/*
Theme Name: The Empirical
Theme URI: https://theempirical.org
Author: Voltaire
Description: Block theme for The Empirical, a science publication.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: empirical
*/

/* ==========================================================================
   The Empirical: component styles.
   Colors, fonts and sizes come from theme.json (presets); this file holds the
   newspaper layout that theme.json can't express. Block markup lives in
   templates/, parts/ and patterns/; class names here match the `className`s used there.
   Type: Old Standard TT (masthead) / Source Serif 4 (text) / IBM Plex Sans (labels), all OFL.
   ========================================================================== */

:root{
  --paper:var(--wp--preset--color--paper);
  --paper-2:var(--wp--preset--color--paper-2);
  --ink:var(--wp--preset--color--ink);
  --ink-2:var(--wp--preset--color--ink-2);
  --muted:var(--wp--preset--color--muted);
  --hair:var(--wp--preset--color--hair);
  --accent:var(--wp--preset--color--accent);

  --display:var(--wp--preset--font-family--display);
  --serif:var(--wp--preset--font-family--serif);
  --sans:var(--wp--preset--font-family--sans);

  --wrap:1240px;
  --gut:1.4rem;      /* space either side of a column rule */
}

/* ---- Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
img,svg{max-width:100%}
:where(.wp-site-blocks) :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote){margin:0}
:where(.screen-reader-text){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap}
.wp-block-post-template{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,3vw,28px)}
.wp-block-template-part{display:block}

/* ==========================================================================
   MASTHEAD  (parts/header.html)
   ========================================================================== */
.utility{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--hair);
  font:500 .72rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.utility a{text-decoration:none}
.utility a:hover{text-decoration:underline;text-underline-offset:.2em}
.utility .wp-block-navigation{gap:1.2rem;font:inherit}
.utility .wp-block-navigation__container{gap:1.2rem}
.utility .wp-block-navigation-item__content{padding:0}
.utility .wp-block-loginout{margin:0}
.utility-search .wp-block-search__inside-wrapper{align-items:center}
.utility-search .wp-block-search__button{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.utility-search .wp-block-search__button:hover{text-decoration:underline;text-underline-offset:.2em}
.utility-search .wp-block-search__input{padding:.25rem .5rem;border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:400 .85rem var(--sans);letter-spacing:0;text-transform:none}

.nameplate{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.25rem;padding:1.2rem 0 1rem}
.nameplate-title{text-align:center;white-space:nowrap;font:700 clamp(2.7rem,8.6vw,6.5rem)/1 var(--display);letter-spacing:-.012em}
.nameplate-title a{text-decoration:none}
.ear{max-width:11.5rem;padding:.55rem .8rem;border:1px solid var(--ink);text-align:center;
  font:500 .7rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ear strong{display:block;font:700 1.05rem/1.3 var(--display);letter-spacing:0;text-transform:none;color:var(--ink)}
.ear.l{justify-self:start}
.ear.r{justify-self:end}

.dateline{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .1rem;
  border-top:3px double var(--ink);border-bottom:1px solid var(--ink);
  font:500 .78rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.dateline .wp-block-empirical-today{font-weight:600}

.sections{display:block;border-bottom:3px double var(--ink)}
.sections .wp-block-navigation__container{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;max-width:100%;margin-inline:auto;
  overflow-x:auto;scrollbar-width:none}
.sections .wp-block-navigation__container::-webkit-scrollbar{display:none}
.sections .wp-block-navigation-item{flex:none}
.sections .wp-block-navigation-item+.wp-block-navigation-item{border-left:1px solid var(--hair)}
.sections .wp-block-navigation-item__content{display:block;padding:.8rem 1.15rem;white-space:nowrap;text-decoration:none;
  font:600 .78rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase}
.sections .wp-block-navigation-item__content:hover{color:var(--accent)}
.sections .wp-block-navigation-item__content[aria-current]{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}

/* ==========================================================================
   STORY PARTS (shared)
   ========================================================================== */
.kicker{margin-bottom:.4rem;font:600 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover{text-decoration:underline;text-underline-offset:.2em}

/* Headlines are links: black by default, oxblood + underline on hover/focus */
.hl{margin-bottom:.4rem;font-family:var(--serif);font-weight:700;font-size:1.2rem;line-height:1.12;letter-spacing:-.005em;text-wrap:balance}
.hl a{text-decoration:none}
.hl a:hover,.hl a:focus-visible{color:var(--accent);text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.14em}
.hl-md{font-size:1.38rem}
.hl-sm{font-size:1.06rem;line-height:1.22}

.dek{margin-bottom:.8rem;font-size:1.2rem;line-height:1.38;color:var(--ink-2)}
.summary{margin-bottom:.55rem;font-size:.95rem;line-height:1.45;color:var(--ink-2)}
.dek p,.summary p{margin:0}
.wp-block-empirical-byline{margin:0;font:500 .7rem/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wp-block-empirical-byline b{font-weight:600;color:var(--ink)}
.more,.more a{font:600 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.more:hover,.more a:hover{text-decoration:underline;text-underline-offset:.25em}
.loc{font:600 .78em/1 var(--sans);letter-spacing:.09em;text-transform:uppercase}

.thumb{margin:0 0 .65rem}
.thumb img{display:block;width:100%;height:auto}
.date{margin:0;font:400 .72rem/1.3 var(--sans);color:var(--muted)}
.credit{color:var(--muted);font-style:italic}

/* ==========================================================================
   FRONT PAGE  (templates/front-page.html + patterns/front-*.php)
   ========================================================================== */
/* Same 4 equal columns as the section rows below: the feature area spans 3, the rail is 1.
   Negative margin + the clipped .rowwrap let the column rules line up with the rows beneath. */
.front{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);
  margin-inline:calc(var(--gut)*-1);padding:1.6rem 0 .5rem}
.col{padding-inline:var(--gut)}
.col.lead{border-right:1px solid var(--hair)}

/* Featured articles: one per sticky post */
.features .wp-block-post+.wp-block-post{margin-top:1.9rem;padding-top:1.9rem;border-top:1px solid var(--ink)}
.features .hl{margin-bottom:.4rem;font-size:1.95rem;line-height:1.08;letter-spacing:-.01em}
.features .wp-block-post:first-child .hl{margin-bottom:.6rem;font-size:clamp(2.05rem,4vw,3.3rem);line-height:1.04;letter-spacing:-.016em}
.feature .dek{max-width:44rem}
.feature .wp-block-empirical-byline{margin-bottom:.9rem}
.feature .wp-block-post-featured-image{margin:0 0 1.15rem}
.feature .wp-block-post-featured-image img{display:block;width:100%}
.wp-block-empirical-lead-text{columns:3;column-gap:calc(var(--gut)*2);column-rule:1px solid var(--hair);font-size:.98rem;line-height:1.52;text-wrap:pretty}
.wp-block-empirical-lead-text p{margin:0 0 .7em;text-indent:1.2em}
.wp-block-empirical-lead-text p:first-child{text-indent:0}
.features .more{display:inline-block;margin-top:.5rem}

/* Right-rail boxes */
.box{border-top:3px solid var(--ink);padding-top:.55rem}
.box+.box{margin-top:1.6rem}
.box-title{margin-bottom:.7rem;font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.brief .wp-block-post{padding:.6rem 0;border-top:1px solid var(--hair);font-size:.92rem;line-height:1.42}
.brief .wp-block-post:first-child{padding-top:0;border-top:0}
.brief-label{display:inline;margin:0 .4em 0 0;font:600 .72rem var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.brief-text,.brief-text p{display:inline;margin:0}
.opinion .wp-block-post+.wp-block-post{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--hair)}
.stack .wp-block-post+.wp-block-post{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--hair)}

/* Section rows below the fold */
.section>.section-head,.archive-head>.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:2.1rem 0 1.15rem;padding:.45rem 0;
  border-top:3px solid var(--ink);border-bottom:1px solid var(--hair)}
.section-head .wp-block-heading,.archive-title{font:700 1.4rem/1.1 var(--display);letter-spacing:.01em}
.section-head p{margin:0}
.rowwrap{overflow:hidden;margin-inline:-8px;padding-inline:8px}  /* 8px keeps keyboard focus rings from being clipped */
.row{display:grid;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.6rem;margin-inline:calc(var(--gut)*-1)}
.row>.wp-block-post{padding-inline:var(--gut);border-left:1px solid var(--hair)}
.row .hl{font-size:1.2rem}
.row-lead{grid-template-columns:2fr 1fr 1fr}
.row-lead>.wp-block-post:first-child{grid-row:span 2}
.row-lead>.wp-block-post:first-child .hl{font-size:1.85rem;line-height:1.08;letter-spacing:-.01em}
.row-lead>.wp-block-post:not(:first-child) .thumb{display:none}

/* Archive / search / index */
.archive-head{padding:1.6rem 0 0}
.archive-head .archive-title{margin:0}
.archive-head .wp-block-term-description{margin-top:.6rem;color:var(--ink-2)}
.archive-head>.section-head{margin-top:0}
.pager{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:2rem 0 1rem;padding-top:1rem;border-top:1px solid var(--hair);
  font:600 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.pager a{color:var(--accent);text-decoration:none}
.pager a:hover{text-decoration:underline;text-underline-offset:.25em}
.pager .page-numbers{padding:0 .35em}
.pager .page-numbers.current{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.no-results{padding:2rem 0;color:var(--ink-2)}
.wp-block-search.search-page{margin-bottom:1.6rem}
.wp-block-search.search-page .wp-block-search__input{padding:.5rem .7rem;border:1px solid var(--ink);background:var(--paper);font:400 1rem var(--serif)}

/* ==========================================================================
   ARTICLE PAGE  (templates/single.html)
   ========================================================================== */
.article-layout{display:grid;grid-template-columns:10rem minmax(0,38rem) 19.5rem;column-gap:1.6rem;justify-content:center;
  grid-template-areas:"head head side" "rail body side";padding:1.8rem 0 2.5rem}
.a-head{grid-area:head;margin-bottom:1.5rem;padding-bottom:1.1rem;border-bottom:1px solid var(--ink)}
.a-rail{grid-area:rail}
.a-body{grid-area:body}
.a-side{grid-area:side;align-self:stretch;padding-left:1.6rem;border-left:1px solid var(--hair)}

.crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em;margin-bottom:.7rem;font:500 .72rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.crumbs p{margin:0}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:.2em}
.a-title{margin-bottom:.8rem;font:700 clamp(2.1rem,4.4vw,3.55rem)/1.05 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.a-dek{max-width:44rem;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.a-dek p{margin:0}

.rail-item+.rail-item{margin-top:1.05rem}
.rail-label{margin:0;font:600 .66rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rail-value{margin:.25rem 0 0;font:400 .84rem/1.45 var(--sans);color:var(--ink-2)}
.rail-value a{color:var(--ink);text-underline-offset:.18em}
.rail-value a:hover{color:var(--accent)}
.a-rail .wp-block-post-author-name{font-weight:600;color:var(--ink)}
.a-rail .wp-block-post-terms__separator{margin-right:.2em}
.wp-block-empirical-share button{margin:0;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.wp-block-empirical-share button:hover{color:var(--accent)}

.a-body{font-size:1.09rem;line-height:1.62}
.a-body p{margin:0;text-indent:1.4em}
.a-body p:first-of-type,.a-body .wp-block-heading+p,.a-body figure+p,.a-body ul+p,.a-body ol+p,.a-body .wp-block-pullquote+p{text-indent:0}
.a-body .loc{font-size:.8em}
.a-body .wp-block-heading{margin:1.9rem 0 .5rem;font:700 1.4rem/1.2 var(--serif);letter-spacing:-.008em}
.a-body h3.wp-block-heading{margin:1.5rem 0 .4rem;font-size:1.15rem;line-height:1.25}
.a-body figure{margin:1.4rem 0}
.a-body .wp-block-post-featured-image{margin:0 0 1.4rem}
.a-body .wp-block-post-featured-image img{display:block;width:100%}
.a-body ul,.a-body ol{margin:.9rem 0;padding-left:1.4rem}
.a-body ul{list-style:disc}
.a-body ol{list-style:decimal}
.a-body li{margin:.25rem 0}
.a-body .wp-block-quote{margin:1.4rem 0;padding-left:1.2rem;border-left:3px solid var(--ink)}
.a-body .wp-block-quote p{text-indent:0}
.a-body .wp-block-pullquote{margin:1.9rem 0;padding:1rem .5rem;text-align:center;border-block:3px double var(--ink)}
.a-body .wp-block-pullquote blockquote{margin:0;padding:0}
.a-body .wp-block-pullquote p{text-indent:0;margin:0;font:italic 400 1.75rem/1.2 var(--display);text-wrap:balance}
.a-body .wp-block-pullquote cite{display:block;margin-top:.65rem;font:600 .7rem var(--sans);letter-spacing:.13em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.a-body .endnote{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--ink);font:italic 400 .95rem/1.5 var(--serif);color:var(--ink-2)}
.page-layout{max-width:38rem;margin-inline:auto;padding:1.8rem 0 2.5rem}
.page-layout .a-title{padding-bottom:1.1rem;border-bottom:1px solid var(--ink);margin-bottom:1.5rem}

.sticky{position:sticky;top:1rem}
.box-title-rule{padding-top:.55rem;border-top:3px solid var(--ink)}
.related .wp-block-post{padding:.85rem 0;border-top:1px solid var(--hair)}
.related .wp-block-post:first-child{padding-top:0;border-top:0}
.related .hl{margin-bottom:.25rem;font-size:1.08rem;line-height:1.2}
.related .thumb{margin-bottom:.55rem}
.related .wp-block-post:not(:first-child) .thumb{display:none}
.topics{margin-top:1.6rem}
.topics .box-title{padding-top:.7rem;border-top:1px solid var(--ink)}
.topics .wp-block-post-terms{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font:500 .8rem/1.3 var(--sans)}
.topics .wp-block-post-terms__separator{display:none}
.topics a{text-underline-offset:.2em}

/* ==========================================================================
   FOOTER  (parts/footer.html)
   ========================================================================== */
.site-footer{margin-top:2.2rem;padding:1.6rem 0 2.6rem;border-top:3px double var(--ink);font:400 .86rem/1.55 var(--sans);color:var(--ink-2)}
.foot-title{margin:0 0 .5rem;font:700 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.6rem}
.foot-grid p{margin:0}
.foot-links{font:inherit}
.foot-links .wp-block-navigation__container{display:block}
.foot-links .wp-block-navigation-item__content{display:block;padding:.12rem 0;text-decoration:none}
.foot-links .wp-block-navigation-item__content:hover{color:var(--accent);text-decoration:underline}
.foot-brand{margin:0 0 .5rem;font:700 1.7rem/1 var(--display);color:var(--ink)}
.foot-brand a{text-decoration:none}
.colophon{margin:1.6rem 0 0;padding-top:1rem;border-top:1px solid var(--hair);font-size:.78rem;color:var(--muted)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .wp-block-empirical-lead-text{columns:2;column-gap:1.7rem}
  .ear{display:none}
  .nameplate{grid-template-columns:1fr}
}

/* Tablet: lead story goes full width, rails sit side by side beneath it */
@media (max-width:1023px){
  .front{grid-template-columns:minmax(0,1fr);margin-inline:0}
  .col{padding-inline:0}
  .col.lead{border-right:0;padding-bottom:1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--hair)}
  .col.right{columns:2;column-gap:calc(var(--gut)*2);column-rule:1px solid var(--hair)}
  .col.right .wp-block-post,.col.right .box:not(.stack){break-inside:avoid}
  .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row-lead>.wp-block-post:first-child{grid-column:1/-1;grid-row:auto;border-bottom:1px solid var(--hair);padding-bottom:1.4rem}

  .article-layout{grid-template-columns:minmax(0,38rem);grid-template-areas:"head" "rail" "body" "side";column-gap:0}
  .a-head{margin-bottom:1rem}
  .a-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.9rem 1.2rem;margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--hair)}
  .rail-item+.rail-item{margin-top:0}
  .a-side{margin-top:2.2rem;padding:1.6rem 0 0;border-left:0;border-top:3px solid var(--ink)}
  .sticky{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* Phone: single column, sections stack */
@media (max-width:699px){
  .nameplate{padding:.9rem 0 .75rem}
  .dateline .edition{display:none}
  .col.right{columns:1}
  .wp-block-empirical-lead-text{columns:1}
  .feature .wp-block-post-featured-image img{aspect-ratio:3/2!important}
  .features .wp-block-post+.wp-block-post{margin-top:1.6rem;padding-top:1.6rem}
  .hl-md{font-size:1.3rem}
  .row,.row-lead{grid-template-columns:minmax(0,1fr)}
  .row>.wp-block-post{border-left:0}
  .row>.wp-block-post+.wp-block-post{padding-top:1.1rem;border-top:1px solid var(--hair)}
  .row-lead>.wp-block-post:first-child{border-bottom:0;padding-bottom:0}
  .row-lead>.wp-block-post:first-child .hl{font-size:1.6rem}
  .a-body .wp-block-pullquote p{font-size:1.45rem}
  .foot-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   PRINT: the newspaper, actually printed
   ========================================================================== */
@media print{
  body{background:#fff;font-size:11pt}
  .utility,.sections,.ear,.a-side,.foot-grid,.wp-block-empirical-share{display:none}
  .article-layout{display:block}
  .a-head{margin-bottom:.5rem}
  a{text-decoration:none}
}