/* AETERNA — editorial layer. Shared by journal, about and contact so the three
   inner pages read as one publication. Builds only on tokens from site.css. */

/* ------------------------------------------------------- page opener -- */
.page-head{padding-block:calc(var(--header-h) + var(--sec)) var(--sec)}
.page-head--night{background:var(--night)}
.page-head__in{display:grid;gap:var(--s4);max-width:22ch}
.page-head__in .lede{max-width:var(--measure);margin-top:var(--s2)}
.page-head--wide .page-head__in{max-width:none}
.page-head--split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5) clamp(40px,6vw,120px);align-items:end}
@media (max-width:860px){.page-head--split{grid-template-columns:1fr;align-items:start}}

.crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:0 0 var(--s5);font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);list-style:none;padding:0}
.crumbs li{display:flex;gap:var(--s2);align-items:center}
.crumbs li+li::before{content:"/";color:var(--ink-25)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current=page]{color:var(--ink)}
.night .crumbs,.page-head--night .crumbs{color:var(--night-ink-60)}
.night .crumbs [aria-current=page]{color:var(--night-ink)}

/* ------------------------------------------------------------- prose -- */
.prose{max-width:var(--measure)}
/* Spacing is declared on the elements themselves. A `.prose > * + *` rule reads
   well but loses the cascade to `.prose p`, which is one class more specific,
   and every paragraph ends up flush against the one above it. */
.prose p{font-size:var(--t-lede);line-height:1.64;color:var(--ink-70);margin:0 0 var(--s5)}
.prose>*:last-child{margin-bottom:0}
.prose h2{font:400 var(--t-h3)/1.2 var(--f-display);color:var(--ink);letter-spacing:var(--track-display);margin:var(--s8) 0 var(--s4);text-wrap:balance}
.prose h3{font:500 var(--t-h4)/1.3 var(--f-sans);color:var(--ink);margin:var(--s7) 0 var(--s3)}
.prose ul,.prose ol{margin:0 0 var(--s5);padding-left:var(--s5);display:grid;gap:var(--s3);color:var(--ink-70)}
.prose li{padding-left:var(--s2)}
.prose blockquote{margin:var(--s7) 0;padding-left:var(--s5);border-left:2px solid var(--brass);font:400 var(--t-h4)/1.5 var(--f-sans);color:var(--ink)}
.prose blockquote p{font-size:inherit;color:inherit}
.prose a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
.prose figure{margin:var(--s8) 0}
.prose figure img{width:100%;border-radius:var(--r-sm)}
.prose figcaption{margin-top:var(--s3);font:400 var(--t-sm)/1.5 var(--f-sans);color:var(--ink-45)}
.prose .pull{font:400 var(--t-h3)/1.24 var(--f-display);color:var(--ink);letter-spacing:var(--track-display);margin:var(--s8) 0;max-width:24ch}

/* ------------------------------------------------------------ figures -- */
.figure-wide{margin:0}
.figure-wide img{width:100%;border-radius:var(--r-sm);background:var(--paper-sunk)}
.figure-wide figcaption{margin-top:var(--s3);font:400 var(--t-sm)/1.5 var(--f-sans);color:var(--ink-45);max-width:var(--measure)}
.night .figure-wide figcaption{color:var(--night-ink-60)}

/* -------------------------------------------------------- two columns -- */
.split-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,96px);align-items:start}
.split-2--wide-left{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.split-2--sticky>:first-child{position:sticky;top:calc(var(--header-h) + var(--s6))}
@media (max-width:880px){
  .split-2,.split-2--wide-left{grid-template-columns:1fr;gap:var(--s7)}
  .split-2--sticky>:first-child{position:static}
}

/* ---------------------------------------------------------- accordion -- */
.accordion{border-top:1px solid var(--rule)}
.accordion__item{border-bottom:1px solid var(--rule)}
.accordion__item h3{margin:0}
.accordion__btn{
  all:unset;box-sizing:border-box;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  width:100%;padding:var(--s5) 0;cursor:pointer;
  font:500 var(--t-h4)/1.35 var(--f-sans);letter-spacing:-.006em;color:var(--ink);
  transition:color var(--d1) var(--e-micro);
}
.accordion__btn:hover{color:var(--brass)}
.accordion__btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.accordion__ic{position:relative;flex:none;width:13px;height:13px;align-self:center}
.accordion__ic::before,.accordion__ic::after{content:"";position:absolute;left:0;top:50%;width:13px;height:1.5px;background:var(--brass);transition:transform var(--d2) var(--e-out)}
.accordion__ic::after{transform:rotate(90deg)}
.accordion__btn[aria-expanded=true] .accordion__ic::after{transform:rotate(0)}
.accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d2) var(--e-io)}
.accordion__panel.is-open{grid-template-rows:1fr}
.accordion__panel>div{overflow:hidden}
.accordion__panel p{margin:0 0 var(--s5);max-width:var(--measure);color:var(--ink-70)}
.accordion__panel p:first-child{padding-top:var(--s1)}
html:not(.js) .accordion__panel{grid-template-rows:1fr}

/* -------------------------------------------------------------- tiles -- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s6)}
.tile{display:grid;gap:var(--s3);align-content:start;padding:var(--s6);background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--r-sm)}
.tile svg{width:24px;height:24px;fill:none;stroke:var(--brass);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--s2)}
.tile p{font-size:var(--t-sm);color:var(--ink-45);margin:0}
.night .tile{background:var(--night-2);border-color:var(--night-rule)}
.night .tile p{color:var(--night-ink-60)}

/* -------------------------------------------------------- stat strip -- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6);padding-block:var(--s7);border-block:1px solid var(--rule)}
.stats div{display:grid;gap:var(--s2)}
.stats dt{font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-45);order:2}
.stats dd{font:400 clamp(1.75rem,2.6vw,2.625rem)/1 var(--f-display);color:var(--ink);margin:0;order:1}
.night .stats{border-color:var(--night-rule)}
.night .stats dt{color:var(--night-ink-60)}
.night .stats dd{color:var(--night-ink)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}}

/* --------------------------------------------------------- next/prev -- */
.pager{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;padding-top:var(--s7);border-top:1px solid var(--rule)}
.pager a{display:grid;gap:var(--s1);text-decoration:none;max-width:38ch}
.pager span{font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.pager strong{font:500 var(--t-h4)/1.3 var(--f-sans);color:var(--ink)}
.pager a:hover strong{color:var(--brass)}
.pager a:last-child{text-align:right;justify-items:end}