/* ==========================================================================
   Trái Bóng Tròn — traibongtron.com
   Direction: "Nights"
   PALETTE — 5 members, each with a job:
     --ground     #0B0C0B  near-black, the site's ground
     --paper      #F2EFE7  second ground, used as whole bands and panels
     --ink        #F4F1EA  ink on ground   (--ink-dark #14150F ink on paper)
     --accent     #E8442B  vermilion, saturated, hue ~14  — bands, numerals, rules, links
     --secondary  #157A4E  green,     saturated, hue ~155 — section 3, panels, markers
   ========================================================================== */

:root{
  --ground:#0B0C0B;
  --ground-2:#151714;
  --paper:#F2EFE7;
  --paper-2:#E6E2D6;
  --ink:#F4F1EA;
  --ink-dark:#14150F;
  --ink-mid:#C9C6BD;
  --ink-quiet:#8C8F85;
  --ink-quiet-dark:#6B6C60;
  --rule:#2C2E29;
  --rule-light:#D3CEBF;
  --accent:#E8442B;
  --accent-deep:#C33418;
  --secondary:#157A4E;

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --prose:"Literata",Georgia,serif;
  --ui:"Space Grotesk",system-ui,-apple-system,sans-serif;

  /* width system — three visibly different measures, plus full bleed */
  --w-page:1360px;   /* outer container            */
  --w-wide:1120px;   /* figures, tables, pull-outs */
  --w-prose:72ch;    /* reading measure            */
  --gut:clamp(18px,4vw,64px);

  --body:18px;
  --read:19px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 var(--body)/1.62 var(--prose);
  text-rendering:optimizeLegibility;
}
/* width/height attrs are presentational hints — they must not beat aspect-ratio */
img{max-width:100%;display:block;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.012em;line-height:1.04;text-wrap:pretty}
p{margin:0 0 1.05em;text-wrap:pretty}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--accent);color:var(--ink);padding:10px 14px;font:600 14px var(--ui)}

/* ---------- containers ----------
   Hard ceiling: no container exceeds --w-cap, whatever the display.
   Full-bleed photographs still run edge to edge; content never does. */
:root{--w-cap:1720px}
.page{width:100%;max-width:min(var(--w-page),var(--w-cap));margin-inline:auto;padding-inline:var(--gut)}
.wide{width:100%;max-width:min(var(--w-wide),var(--w-cap));margin-inline:auto;padding-inline:var(--gut)}
.prose{width:100%;max-width:var(--w-prose);padding-inline:var(--gut);margin-inline:0}
.bleed{width:100%;padding-inline:0}
.on-paper{background:var(--paper);color:var(--ink-dark)}
.on-paper a{color:var(--accent-deep)}
.on-paper a:hover{color:var(--ink-dark)}
.band{padding-block:clamp(46px,6vw,120px)}
.band-tight{padding-block:clamp(28px,3.4vw,64px)}

/* ---------- shared type atoms ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.62em;
  font:500 clamp(13px,.82vw,16px)/1 var(--ui);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.kicker .ico{width:1.35em;height:1.35em}
.label{font:500 13px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet)}
.on-paper .label{color:var(--ink-quiet-dark)}
.num{font-family:var(--display);color:var(--accent);line-height:.8;letter-spacing:-.02em}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.on-paper .rule{background:var(--rule-light)}
.deck{font:300 clamp(17px,1.14vw,23px)/1.5 var(--prose);color:var(--ink-mid)}
.on-paper .deck{color:#43443B}
.more{
  display:inline-flex;align-items:center;gap:.7em;
  font:500 clamp(12px,.82vw,15px)/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--accent);padding-bottom:.5em;
}
.more svg{width:2.3em;height:auto}

/* icons: one system — 24 grid, 1.6 stroke, square caps, currentColor */
.ico{display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter;width:22px;height:22px}
.ico-lg{width:46px;height:46px;stroke-width:1.3}

/* ---------- masthead ---------- */
.nav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.nav-btn{display:none}
.masthead{border-bottom:1px solid var(--rule)}
.masthead .page{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(18px,3vw,72px);
  flex-wrap:wrap;padding-top:clamp(16px,1.8vw,34px);padding-bottom:clamp(10px,1vw,18px)}
.wordmark{display:flex;align-items:flex-end;gap:clamp(10px,1.1vw,22px);color:var(--ink)}
.wordmark .glyph{width:clamp(30px,3vw,58px);height:auto;flex:none;color:var(--accent);margin-bottom:.32em}
.wordmark .name{font-family:var(--display);font-size:clamp(32px,4.4vw,84px);line-height:.84;letter-spacing:-.02em}
.wordmark .name span{white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(12px,1.6vw,38px);padding-bottom:.45em}
.nav a{display:inline-flex;align-items:center;gap:.5em;color:var(--ink);
  font:500 clamp(12px,.8vw,15px)/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;padding-block:6px}
.nav a .ico{width:1.25em;height:1.25em;color:var(--accent)}
.nav a:hover{color:var(--accent)}
.nav a[aria-current]{border-bottom:2px solid var(--accent);padding-bottom:.35em}
.masthead.compact .wordmark .name{font-size:clamp(26px,2.6vw,52px)}
.masthead.compact .wordmark .glyph{width:clamp(19px,1.8vw,36px);margin-bottom:.3em}
/* small wordmark — glyph sized off the same ratio as the name (0.69) so cap heights agree */
.wordmark.sm .name{font-size:clamp(24px,2vw,44px)}
.wordmark.sm .glyph{width:clamp(17px,1.4vw,30px);margin-bottom:.26em}

/* ---------- FIGURE SYSTEM — three treatments, one drawing system ----------
   1 .fig-bleed  full-bleed plate, caption inset under the left edge
   2 .fig-mat    photograph on a mat with a hairline, accent bar at the top
   3 .fig-inset  small plate set into the column, prose continuing beside it
   Caption box is sized by the CAPTION: it never inherits the image height and
   never inherits the prose measure. Caption and credit share one row on wide
   screens and stack on narrow ones.                                          */
figure{margin:0}
.figcap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em 1.8em;
  max-width:84ch;margin-top:clamp(10px,.9vw,18px);
  border-top:1px solid var(--rule);padding-top:.7em;
}
.on-paper .figcap{border-top-color:var(--rule-light)}
.figcap .cap{flex:1 1 32ch;min-width:0;margin:0;
  font:400 clamp(14px,.94vw,18px)/1.45 var(--ui);color:var(--ink-mid)}
.on-paper .figcap .cap{color:#43443B}
.figcap .credit{flex:0 1 auto;margin-left:auto;
  font:400 clamp(13px,.78vw,15px)/1.4 var(--ui);letter-spacing:.05em;color:var(--ink-quiet)}
.on-paper .figcap .credit{color:var(--ink-quiet-dark)}

.fig-bleed{width:100%}
/* .fig-bleed.overlay — caption sits on the plate, bottom left, on its own scrim */
.fig-bleed.overlay{position:relative}
.fig-bleed.overlay::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,11,0) 0%,rgba(11,12,11,.55) 52%,rgba(11,12,11,.92) 100%)}
.fig-bleed.overlay .figcap{position:absolute;left:0;right:0;bottom:clamp(16px,1.8vw,40px);z-index:2;
  border-top:0;padding-top:0;border-left:3px solid var(--accent);margin-inline:auto;
  max-width:min(var(--w-page),var(--w-cap))}
.fig-bleed.overlay .figcap .cap{color:var(--ink);flex:1 1 34ch;
  font:400 clamp(15px,1.02vw,20px)/1.5 var(--ui)}
.fig-bleed.overlay .figcap .credit{color:var(--ink-mid)}
.fig-bleed img{width:100%;height:clamp(280px,52vw,760px);object-fit:cover}
.fig-bleed .figcap{margin-inline:auto;padding-inline:var(--gut);max-width:min(var(--w-page),var(--w-cap))}
.fig-bleed .figcap .cap{flex:1 1 40ch}

.fig-mat{background:var(--ground-2);padding:clamp(12px,1.1vw,26px);border:1px solid var(--rule)}
.on-paper .fig-mat{background:var(--paper-2);border-color:var(--rule-light)}
.fig-mat img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.fig-mat::before{content:"";display:block;height:4px;background:var(--accent);
  margin:0 0 clamp(12px,1.1vw,26px) 0;width:clamp(56px,7vw,120px)}
.fig-mat .figcap{border-top:0;padding-top:.5em}

.fig-inset{float:left;width:min(46%,420px);margin:.4em clamp(20px,2.2vw,40px) 1.2em 0}
.fig-inset img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-bottom:4px solid var(--secondary)}
.fig-inset .figcap{max-width:46ch;border-top:0;padding-top:.6em}
.fig-inset .figcap .cap{flex:1 1 100%;font-size:clamp(13px,.86vw,16px)}
.fig-inset .figcap .credit{margin-left:0}

/* .map-figure — frame and caption only. The slot stays EMPTY: real geometry is
   injected later, never hand-drawn here. Sized by aspect box so the frame holds
   its place in the flow before anything is dropped in. */
.map-figure{width:100%;max-width:min(var(--w-wide),var(--w-cap));margin:clamp(24px,2.6vw,56px) 0;
  background:var(--ground-2);border:1px solid var(--rule);padding:clamp(12px,1.1vw,26px)}
.on-paper .map-figure{background:var(--paper-2);border-color:var(--rule-light)}
.map-figure::before{content:"";display:block;height:4px;width:clamp(56px,7vw,120px);
  background:var(--secondary);margin-bottom:clamp(12px,1.1vw,26px)}
.map-figure .map-slot{position:relative;display:flex;align-items:flex-end;
  width:100%;aspect-ratio:16/9;min-height:220px;padding:clamp(12px,1.1vw,24px);
  border:1px dashed var(--rule);background:
    repeating-linear-gradient(0deg,rgba(244,241,234,.05) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,rgba(244,241,234,.05) 0 1px,transparent 1px 48px)}
.on-paper .map-figure .map-slot{border-color:var(--rule-light);background:
    repeating-linear-gradient(0deg,rgba(20,21,15,.06) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,rgba(20,21,15,.06) 0 1px,transparent 1px 48px)}
.map-figure .map-slot::before{content:none;position:absolute;top:clamp(12px,1.1vw,24px);
  left:clamp(12px,1.1vw,24px);font:500 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--secondary)}
.map-figure .map-spec{margin:0;max-width:64ch;
  font:400 clamp(13px,.88vw,16px)/1.5 var(--ui);color:var(--ink-quiet)}
.on-paper .map-figure .map-spec{color:var(--ink-quiet-dark)}
.map-figure figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em 1.8em;
  max-width:84ch;margin-top:clamp(10px,.9vw,18px);border-top:1px solid var(--rule);padding-top:.7em}
.on-paper .map-figure figcaption{border-top-color:var(--rule-light)}
.map-figure figcaption .cap{flex:1 1 32ch;min-width:0;margin:0;
  font:400 clamp(14px,.94vw,18px)/1.45 var(--ui);color:var(--ink-mid)}
.on-paper .map-figure figcaption .cap{color:#43443B}
.map-figure figcaption .credit{flex:0 1 auto;margin-left:auto;
  font:400 clamp(13px,.78vw,15px)/1.4 var(--ui);letter-spacing:.05em;color:var(--ink-quiet)}

/* styleguide alias required by the spec */
.article-figure{width:100%}
.article-figure img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(10px,1vw,22px)}
.gallery img{height:auto;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{font:400 13px/1.4 var(--ui);color:var(--ink-quiet);margin-top:.6em}

/* ---------- homepage ---------- */
.lead-plate{position:relative}
.lead-plate img{width:100%;height:min(84vh,880px);min-height:420px;object-fit:cover}
.lead-plate .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,11,.76) 0%,rgba(11,12,11,.30) 34%,rgba(11,12,11,.46) 58%,rgba(11,12,11,.82) 76%,rgba(11,12,11,.96) 100%)}
.lead-plate .kicker{background:var(--accent);color:var(--ground);padding:.55em .85em;letter-spacing:.13em}
.lead-plate .kicker:hover{background:#F5603F;color:var(--ground)}
.lead-plate .kicker .ico{color:var(--ground)}
.lead-plate .over{position:absolute;left:0;right:0;bottom:clamp(20px,2.6vw,54px)}
.lead-plate .over .page{display:grid;gap:clamp(16px,2vw,56px);grid-template-columns:1fr}
.lead-title{font-size:clamp(32px,4.6vw,104px);line-height:1;max-width:24ch}
.lead-plate .deck{max-width:44ch;margin:0}

.signature{display:grid;gap:clamp(16px,2vw,54px);grid-template-columns:1fr;align-items:start;
  border-top:2px solid var(--accent);padding-top:clamp(14px,1.4vw,30px)}
.signature .fig{display:flex;flex-direction:column;gap:.3em}
.signature .num{font-size:clamp(58px,8.4vw,190px)}
.signature .num-cap{font:500 13px/1.35 var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-quiet);max-width:22ch}
.signature p{margin:0;max-width:46ch;font:300 clamp(17px,1.16vw,25px)/1.55 var(--prose);color:#E6E3DA}
@media (min-width:700px){.signature{grid-template-columns:auto minmax(0,1fr)}}

.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.2em;border-bottom:1px solid var(--rule);padding-bottom:clamp(12px,1.1vw,24px);
  margin-bottom:clamp(20px,2.2vw,52px)}
.on-paper .band-head{border-bottom-color:var(--rule-light)}
.band-head h2{font-size:clamp(24px,2.5vw,58px);max-width:34ch}

/* editorial cards — even height, no ragged bottoms */
.split{display:grid;gap:clamp(18px,2.2vw,52px);grid-template-columns:1fr}
.piece{display:flex;flex-direction:column;height:100%;color:inherit}
.piece .shot{position:relative;overflow:hidden;display:block;
  background:var(--ground-2);border:1px solid var(--rule);padding:clamp(8px,.7vw,14px)}
.on-paper .piece .shot{background:var(--paper-2);border-color:var(--rule-light)}
.piece:hover .shot{border-color:var(--accent)}
.piece .shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-bottom:3px solid var(--secondary);transition:transform .5s ease}
.piece.big .shot img{border-bottom-color:var(--accent)}
.on-paper .piece .shot img{border-bottom-color:var(--accent-deep)}
.piece .idx{font-family:var(--display);font-size:clamp(22px,1.7vw,38px);line-height:1;color:var(--accent);
  display:block;margin-bottom:.25em}
.on-paper .piece .idx{color:var(--accent-deep)}
.on-paper .piece h3{color:var(--ink-dark)}
.piece:hover .shot img{transform:scale(1.02)}
.piece .body{display:flex;flex-direction:column;flex:1;padding-top:clamp(12px,1.1vw,22px)}
.piece h3{font-size:clamp(20px,1.55vw,36px);margin-bottom:.35em}
.piece.big h3{font-size:clamp(26px,2.6vw,60px)}
.piece p{font:300 clamp(15px,.98vw,20px)/1.6 var(--prose);color:var(--ink-mid);margin:0}
.on-paper .piece p{color:#43443B}
.piece .cta{margin-top:auto;padding-top:clamp(12px,1vw,20px)}
.piece.big .shot img{height:auto;aspect-ratio:16/10}
.split.lead-stack > .piece.big .cta{margin-top:0}
/* at two columns the stacked pair is taller than the lead card: the lead plate
   absorbs the slack rather than leaving a void under its link */
@media (min-width:1000px){
  .split.lead-stack > .piece.big{align-self:stretch;height:100%}
  .split.lead-stack > .piece.big .shot{flex:1 1 auto;min-height:0;display:flex}
  .split.lead-stack > .piece.big .shot img{height:100%;min-height:420px;aspect-ratio:auto;object-fit:cover}
  .split.lead-stack > .piece.big .body{flex:0 0 auto}
}

.quiet-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1.4em}
.quiet-line p{margin:0;font:300 clamp(19px,1.5vw,34px)/1.35 var(--prose);max-width:40ch}

.statement{background:var(--ground-2);color:var(--ink);border-top:6px solid var(--accent);
  border-bottom:1px solid var(--rule)}
.statement .page{display:grid;gap:clamp(18px,2.4vw,64px);grid-template-columns:1fr;align-items:start}
.statement .mark{display:flex;flex-direction:column;gap:.25em}
.statement .mark .num{font-size:clamp(64px,7vw,168px)}
.statement .mark .num-cap{font:500 13px/1.35 var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-quiet);max-width:20ch}
.statement p{margin:0;font-family:var(--display);font-size:clamp(27px,2.9vw,66px);line-height:1.07;max-width:46ch}
.statement p em{font-style:normal;color:var(--accent)}
.statement .src{font:400 clamp(13px,.78vw,15px)/1.5 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-quiet);margin-top:clamp(16px,1.5vw,34px);border-top:1px solid var(--rule);padding-top:1em;max-width:60ch}
@media (min-width:700px){.statement .page{grid-template-columns:auto minmax(0,1fr)}}
@media (min-width:1200px){.statement .mark .num{font-size:clamp(120px,9vw,200px)}}

/* ---------- article ---------- */
.art-head{padding-block:clamp(30px,3.4vw,80px) clamp(20px,2vw,44px)}
.art-head h1{font-size:clamp(34px,4.6vw,104px);max-width:34ch}
.art-head .deck{max-width:52ch;margin-top:.9em}
/* title and standfirst share the page width: title left, standfirst set against it */
.art-head .head-grid{display:grid;gap:clamp(14px,1.6vw,40px) clamp(24px,3.4vw,90px);
  grid-template-columns:1fr;align-items:end;margin-top:.55em}
.art-head .lead{max-width:46ch;margin:0;font:300 clamp(19px,1.36vw,29px)/1.48 var(--prose);color:var(--ink-mid)}
@media (min-width:900px){
  .art-head .head-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .art-head h1{max-width:none}
}
/* the closing note: text between the last figure and the read-next list */
.art-close{border-top:1px solid var(--rule);padding-top:clamp(14px,1.2vw,26px)}
.art-close p{font:300 clamp(16px,1.04vw,22px)/1.6 var(--prose);color:var(--ink-mid);max-width:64ch;margin:0 0 .8em}
.art-close .src{font:400 clamp(13px,.8vw,15px)/1.5 var(--ui);letter-spacing:.06em;color:var(--ink-quiet);margin:0;max-width:80ch}
.art-meta{display:flex;flex-wrap:wrap;gap:1em 2em;align-items:baseline;margin-top:clamp(16px,1.6vw,34px);
  border-top:1px solid var(--rule);padding-top:clamp(10px,.9vw,18px)}

/* asymmetric reading layout: heads hang left of the prose, figures break right,
   notes material interrupts full-bleed. No standing right-hand rail. */
.art-body{max-width:var(--w-page);margin-inline:auto;padding-inline:0}
.art-sec{padding-inline:var(--gut)}
.art-sec h2{
  font-size:clamp(22px,2.05vw,44px);max-width:26ch;color:var(--ink);
  margin:clamp(30px,3vw,66px) 0 .7em;
}
.art-sec h2 .h-mark{display:block;font:500 12px/1 var(--ui);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.9em}
.art-sec .prose{padding-inline:0;max-width:var(--w-prose)}
.art-sec .prose p{font:300 var(--read)/1.72 var(--prose);color:#E6E3DA}
.art-sec .prose p strong{color:var(--ink);font-weight:600}
/* the prose `font:` shorthand outranks the component rules — restate them here */
.art-sec .prose .pullquote p{margin:0;font:400 clamp(24px,2.2vw,48px)/1.1 var(--display);color:var(--ink)}
.art-sec .prose .blockquote p{margin:0 0 .7em;font:300 clamp(16px,1.08vw,23px)/1.55 var(--prose);color:var(--ink)}
.art-sec .prose .callout p{margin:0;font:400 clamp(16px,1.12vw,24px)/1.55 var(--ui);color:var(--ink)}
.art-sec .prose .factlist li{color:var(--ink-mid)}
/* captions live inside .prose, so the prose `font:` shorthand would otherwise
   win over .figcap .cap and set them in the reading serif */
.art-sec .prose .figcap .cap{margin:0;font:400 clamp(14px,.94vw,18px)/1.45 var(--ui);color:var(--ink-mid)}
.art-sec .prose .map-figure .map-spec{font:400 clamp(13px,.88vw,16px)/1.5 var(--ui);color:var(--ink-quiet)}
.art-sec .break{max-width:none;width:min(100%,var(--w-wide));margin-block:clamp(26px,3vw,60px)}
.art-sec .clear{clear:both}
.lead-in::first-letter{initial-letter:2;font-family:var(--display);color:var(--accent);margin-right:.08em}

.notes-band{background:var(--ground-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:clamp(30px,3.2vw,70px);margin-block:clamp(34px,3.6vw,80px)}
.notes-band .grid{display:grid;gap:clamp(20px,2.4vw,56px);grid-template-columns:1fr}
.notes-band h3{font-size:clamp(19px,1.5vw,32px);margin-bottom:.9em}
.notes-band h3 .ico{width:1em;height:1em;color:var(--accent);margin-right:.45em}

.timeline{list-style:none;margin:0;padding:0;counter-reset:t}
.timeline li{display:grid;grid-template-columns:minmax(9ch,15ch) 1fr;gap:.4em 1.4em;
  padding:.75em 0;border-top:1px solid var(--rule)}
.on-paper .timeline li{border-top-color:var(--rule-light)}
.timeline .t-when{font:500 clamp(13px,.84vw,16px)/1.35 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}
.timeline .t-what{font:400 clamp(14px,.94vw,18px)/1.5 var(--ui);color:var(--ink-mid)}
.on-paper .timeline .t-what{color:#43443B}
.factlist{list-style:none;margin:0;padding:0}
.factlist li{padding:.7em 0;border-top:1px solid var(--rule);
  font:400 clamp(14px,.94vw,18px)/1.55 var(--ui);color:var(--ink-mid)}
.on-paper .factlist li{border-top-color:var(--rule-light);color:#43443B}
.pathway{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5em .9em;align-items:center}
.pathway li{display:flex;align-items:center;gap:.9em;
  font:500 clamp(13px,.88vw,17px)/1.3 var(--ui);color:var(--ink-mid)}
.pathway li::after{content:"";width:22px;height:1px;background:var(--accent)}
.pathway li:last-child::after{display:none}

/* ---------- spec components ---------- */
.lead{font:300 clamp(20px,1.4vw,30px)/1.5 var(--prose);color:var(--ink)}
.pullquote{margin:clamp(24px,2.6vw,56px) 0;padding:0 0 0 clamp(16px,1.4vw,30px);
  border-left:4px solid var(--accent)}
.pullquote p{margin:0;font-family:var(--display);font-size:clamp(24px,2.2vw,48px);line-height:1.1}
.blockquote{margin:clamp(20px,2.2vw,48px) 0;padding:clamp(16px,1.4vw,30px);
  background:var(--ground-2);border:1px solid var(--rule)}
.on-paper .blockquote{background:var(--paper-2);border-color:var(--rule-light)}
.blockquote p{margin:0 0 .7em;font:300 clamp(16px,1.08vw,23px)/1.55 var(--prose)}
.blockquote cite{font:500 13px/1.4 var(--ui);letter-spacing:.06em;color:var(--ink-quiet);font-style:normal}
.callout{margin:clamp(20px,2.2vw,48px) 0;padding:clamp(18px,1.8vw,40px);width:100%;
  background:var(--ground-2);border-top:4px solid var(--secondary)}
.on-paper .callout{background:var(--paper-2)}
.callout .c-head{display:flex;align-items:center;gap:.6em;margin-bottom:.9em;
  font:500 13px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--secondary)}
.callout .c-head .ico{width:1.3em;height:1.3em}
.callout p{margin:0;font:400 clamp(16px,1.12vw,24px)/1.55 var(--ui);color:var(--ink);max-width:none}
.callout .c-more{margin-top:1.1em}
.on-paper .callout p{color:var(--ink-dark)}
.note{font:400 clamp(13px,.88vw,16px)/1.55 var(--ui);color:var(--ink-quiet);
  padding-left:1em;border-left:1px solid var(--rule)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:clamp(14px,1.4vw,34px);margin:clamp(20px,2.2vw,48px) 0}
.statblock{display:flex;flex-direction:column;gap:.4em;border-top:2px solid var(--accent);padding-top:.7em}
.stat-num{font-family:var(--display);font-size:clamp(38px,3.4vw,76px);line-height:.85;color:var(--ink)}
.on-paper .stat-num{color:var(--ink-dark)}
.stat-label{font:400 clamp(13px,.86vw,16px)/1.45 var(--ui);color:var(--ink-quiet)}
.on-paper .stat-label{color:var(--ink-quiet-dark)}

.datatable,.versus{width:100%;border-collapse:collapse;font-family:var(--ui);margin:clamp(18px,2vw,40px) 0}
.datatable caption,.versus caption{text-align:left;font:500 12px/1.4 var(--ui);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);padding-bottom:.9em}
.datatable th,.versus th{text-align:left;font:600 clamp(12px,.82vw,15px)/1.3 var(--ui);
  letter-spacing:.08em;text-transform:uppercase;padding:0 1.1em .7em 0;border-bottom:1px solid var(--ink-quiet)}
.datatable td,.versus td{font:400 clamp(14px,.94vw,18px)/1.5 var(--ui);color:var(--ink-mid);
  padding:.7em 1.1em .7em 0;border-bottom:1px solid var(--rule);vertical-align:top}
.on-paper .datatable td,.on-paper .versus td{color:#43443B;border-bottom-color:var(--rule-light)}
.datatable td:last-child,.versus td:last-child{padding-right:0}
.datatable .n{text-align:right;font-variant-numeric:tabular-nums}
.versus th:first-child,.versus td:first-child{width:34%}
.tablewrap{overflow-x:auto}

.chart{margin:clamp(20px,2.2vw,48px) 0}
.chart svg{width:100%;height:auto;display:block;color:var(--ink)}
.chart figcaption{font:400 clamp(13px,.88vw,16px)/1.5 var(--ui);color:var(--ink-quiet);
  margin-top:.8em;border-top:1px solid var(--rule);padding-top:.7em;max-width:80ch}
.on-paper .chart figcaption{color:var(--ink-quiet-dark);border-top-color:var(--rule-light)}
.chart .chart-narrow{display:none}
.chart .axis{stroke:currentColor;opacity:.45;stroke-width:1}
.chart .grid{stroke:currentColor;opacity:.14;stroke-width:1}
.chart .ghost{fill:none;stroke:currentColor;opacity:.5;stroke-width:1;stroke-dasharray:3 3}
.chart .tick{font:500 12px var(--ui);fill:currentColor;opacity:.55}
.chart .key{font:500 12px var(--ui);fill:currentColor;opacity:.8;letter-spacing:.08em}
.chart .barfill{fill:var(--secondary)}
.chart .barfill.alt{fill:var(--accent)}
.chart .lab{font:500 13px var(--ui);fill:currentColor;opacity:.75}
.chart .val{font:600 13px var(--ui);fill:currentColor}

.profile-grid{display:grid;gap:clamp(16px,1.6vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.profile-card{display:flex;flex-direction:column;gap:.7em;background:var(--ground-2);
  border:1px solid var(--rule);padding:clamp(14px,1.2vw,26px)}
.on-paper .profile-card{background:var(--paper-2);border-color:var(--rule-light)}
.profile-card .p-photo{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 30%}
.profile-card h3{font-size:clamp(20px,1.5vw,32px)}
.profile-card .p-role{margin:0;font:500 12px/1.4 var(--ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.profile-card p{margin:0;font:400 clamp(14px,.92vw,17px)/1.55 var(--ui);color:var(--ink-mid)}
.on-paper .profile-card p{color:#43443B}
.profile-card .p-links{display:flex;flex-wrap:wrap;gap:.4em 1.2em}
.profile-card .p-attr{font:400 12px/1.4 var(--ui);letter-spacing:.05em;color:var(--ink-quiet)}
.profile-card.no-photo{border-left:4px solid var(--secondary)}

.org-grid{display:grid;gap:clamp(12px,1.2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.org-card{display:flex;flex-direction:column;gap:.35em;padding:clamp(12px,1vw,20px);
  border:1px solid var(--rule);background:var(--ground-2)}
.on-paper .org-card{background:var(--paper-2);border-color:var(--rule-light)}
.org-card:hover{border-color:var(--accent)}
.org-card .org-logo{max-height:34px;width:auto;object-fit:contain}
.org-card .org-name{font:600 clamp(14px,.94vw,18px)/1.3 var(--ui);color:var(--ink)}
.on-paper .org-card .org-name{color:var(--ink-dark)}
.org-card .org-host{font:400 12px/1.3 var(--ui);letter-spacing:.05em;color:var(--ink-quiet)}
.org-card.no-logo .org-name{border-top:2px solid var(--secondary);padding-top:.5em}
.entity-ref{border-bottom:1px solid rgba(232,68,43,.5);white-space:nowrap}

.further-grid,.related-links{display:grid;gap:clamp(12px,1.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));list-style:none;margin:0;padding:0}
.further-grid a,.related-links a{display:flex;flex-direction:column;gap:.5em;
  border-top:2px solid var(--accent);padding-top:.8em;color:var(--ink);
  font:400 clamp(15px,1vw,20px)/1.35 var(--prose)}
.on-paper .further-grid a,.on-paper .related-links a{color:var(--ink-dark)}
.further-grid a:hover,.related-links a:hover{color:var(--accent)}
.related-links .r-sec{font:500 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet)}

.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule)}
.on-paper .cat-list li{border-top-color:var(--rule-light)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.on-paper .cat-list li:last-child{border-bottom-color:var(--rule-light)}
.cat-list a{display:grid;grid-template-columns:1fr;gap:.35em;padding:clamp(14px,1.3vw,26px) 0;color:var(--ink)}
.on-paper .cat-list a{color:var(--ink-dark)}
.cat-list a:hover{color:var(--accent)}
.cat-list .t{font-family:var(--display);font-size:clamp(20px,1.7vw,38px);line-height:1.08}
.cat-list .d{font:300 clamp(14px,.94vw,18px)/1.5 var(--prose);color:var(--ink-mid);max-width:70ch}
.on-paper .cat-list .d{color:#43443B}

/* CSS-only expander for long lists */
.expander{margin-top:1.4em}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .rest{display:none}
.expander input:checked ~ .rest{display:block}
.expander label{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  font:500 clamp(12px,.82vw,15px)/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:.5em}
.expander input:checked ~ label{display:none}

/* ---------- supporters ---------- */
.supporters{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.on-paper .supporters{border-color:var(--rule-light)}
.supporters .sup-head{display:grid;gap:.6em clamp(20px,3vw,72px);grid-template-columns:1fr;
  padding-bottom:clamp(16px,1.6vw,34px)}
.supporters .sub{display:flex;align-items:center;gap:.6em;
  font:500 13px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.supporters .sub .ico{width:1.3em;height:1.3em}
.supporters .sup-title{font-family:var(--display);font-size:clamp(22px,2vw,44px);line-height:1.06;
  max-width:26ch;margin:.35em 0 0}
.supporters .said{font:400 clamp(14px,.92vw,17px)/1.55 var(--ui);color:var(--ink-quiet);max-width:44ch;margin:0}
@media (min-width:900px){
  .supporters .sup-head{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end}
  .supporters .said{text-align:right;justify-self:end}
}
.sponsor-run{display:flex;flex-wrap:wrap;gap:clamp(12px,1.1vw,22px)}
.sponsor{flex:0 0 300px;display:flex;flex-direction:column;gap:.7em;
  background:var(--ground-2);border:1px solid var(--rule);padding:14px;color:var(--ink)}
.on-paper .sponsor{background:#1B1D19;border-color:#2C2E29;color:var(--ink)}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{width:100%;height:48px;max-height:48px;object-fit:contain;object-position:left center;
  background:#000;padding:6px 10px}
.sponsor .sponsor-name{font:600 15px/1.25 var(--ui);color:var(--ink)}
.sponsor .sponsor-blurb{font:400 13px/1.45 var(--ui);color:var(--ink-mid)}

/* ---------- footer ---------- */
footer.foot{border-top:1px solid var(--rule);padding-block:clamp(34px,3.4vw,74px)}
footer.foot .cols{display:grid;gap:clamp(20px,2.4vw,64px);grid-template-columns:1fr}
footer.foot .about{font:300 clamp(15px,.98vw,20px)/1.55 var(--prose);color:var(--ink-quiet);max-width:52ch;margin:0}
footer.foot nav{display:grid;gap:.9em;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));align-content:start}
footer.foot nav a{display:inline-flex;align-items:center;gap:.5em;color:var(--ink-mid);
  font:500 clamp(12px,.78vw,15px)/1 var(--ui);letter-spacing:.15em;text-transform:uppercase}
footer.foot nav a .ico{width:1.15em;height:1.15em;color:var(--accent)}
footer.foot nav a:hover{color:var(--accent)}

/* ==========================================================================
   RESPONSIVE — the series does not stop at the desktop cap.
   ========================================================================== */
@media (min-width:700px){
  .split.two{grid-template-columns:1fr 1fr}
  .split.lead-two{grid-template-columns:1.6fr 1fr}
  .lead-plate .over .page{grid-template-columns:1.5fr 1fr;align-items:end}
  footer.foot .cols{grid-template-columns:1.4fr 1fr}
  .notes-band .grid.two{grid-template-columns:1fr 1fr}
  .cat-list a{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.6em;align-items:baseline}
}
@media (min-width:1000px){
  :root{--body:18px;--read:20px}
  .split.three{grid-template-columns:repeat(3,1fr)}
  .split.lead-stack{grid-template-columns:1.7fr 1fr}
  .art-sec .prose{margin-left:clamp(0px,7vw,140px)}
  .art-sec h2{margin-left:0;max-width:22ch}
  .art-sec .break{margin-left:clamp(0px,7vw,140px)}
}
/* large desktop — the grid gains columns, figures gain width, prose steps up */
@media (min-width:1200px){
  :root{--w-page:1400px;--w-wide:1180px;--w-prose:74ch;--read:20px}
  .art-body{display:grid;grid-template-columns:minmax(0,1fr);}
  .art-sec h2{position:relative}
  .fig-inset{width:min(40%,440px)}
}
@media (min-width:1500px){
  :root{--w-page:1500px;--w-wide:1220px;--w-prose:76ch;--body:19px;--read:20px;--gut:64px}
  .fig-bleed img{height:min(48vw,720px)}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .art-sec .prose{margin-left:clamp(80px,8vw,180px)}
  .art-sec .break{margin-left:clamp(40px,4vw,100px);width:min(100%,var(--w-wide))}
  .sponsor{flex:0 0 320px}
}
@media (min-width:1900px){
  :root{--w-page:1620px;--w-wide:1320px;--w-prose:78ch;--body:19px;--read:21px;--gut:72px}
  .lead-title{font-size:82px}
  .fig-bleed img{height:min(42vw,780px)}
  .notes-band .grid.two{grid-template-columns:1.1fr 1fr;gap:clamp(40px,4vw,110px)}
  .split.three{grid-template-columns:repeat(3,1fr);gap:clamp(30px,2.6vw,70px)}
  .sponsor{flex:0 0 340px}
}
@media (min-width:2400px){
  :root{--w-page:1720px;--w-wide:1400px;--w-prose:80ch;--body:20px;--read:22px;--gut:80px}
  .fig-bleed img{height:820px}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  .art-sec .prose{margin-left:200px}
  .sponsor{flex:0 0 380px}
}
@media (max-width:699px){
  .fig-inset{float:none;width:100%;margin:1.2em 0}
  .timeline li{grid-template-columns:1fr}
  .sponsor{flex:1 1 100%}
  .lead-plate img{height:min(78vh,680px)}
  .wordmark .name{font-size:clamp(28px,9vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  body{background:#fff;color:#000}
  .masthead,.supporters,footer.foot,.nav{display:none}
}


/* ==========================================================================
   MOBILE — 699px and down. Touch targets 44px+, no horizontal page overflow,
   charts and the map slot given their own affordances instead of being shrunk
   past legibility.
   ========================================================================== */
@media (max-width:699px){
  :root{--gut:18px;--body:17px;--read:18px}
  html,body{overflow-x:hidden}
  body{overflow-wrap:break-word}

  /* --- header: wordmark + a real toggle, list opens beneath --- */
  .masthead{position:sticky;top:0;z-index:100;background:var(--ground);
    border-bottom:1px solid var(--rule)}
  .masthead .page{display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
  .masthead .wordmark{gap:8px;align-items:center;min-width:0}
  .masthead .wordmark .glyph{width:22px;margin-bottom:0}
  .masthead .wordmark .name,
  .masthead.compact .wordmark .name{font-size:23px;line-height:1}

  .nav-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    min-height:44px;padding:0 14px;background:var(--ground-2);
    border:1px solid var(--rule);color:var(--ink);
    font:500 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
    -webkit-tap-highlight-color:transparent}
  .nav-btn-bars{position:relative;width:17px;height:11px;flex:none}
  .nav-btn-bars::before,.nav-btn-bars::after{content:"";position:absolute;left:0;right:0;
    height:1.5px;background:var(--accent)}
  .nav-btn-bars::before{top:0;box-shadow:0 4.75px 0 var(--accent)}
  .nav-btn-bars::after{bottom:0}
  .nav-toggle:checked ~ .nav-btn{background:var(--accent);color:var(--ground);border-color:var(--accent)}
  .nav-toggle:checked ~ .nav-btn .nav-btn-bars::before{box-shadow:none;top:5px;transform:rotate(45deg)}
  .nav-toggle:checked ~ .nav-btn .nav-btn-bars::after{bottom:4.5px;transform:rotate(-45deg)}
  .nav-toggle:checked ~ .nav-btn .nav-btn-bars::before,
  .nav-toggle:checked ~ .nav-btn .nav-btn-bars::after{background:var(--ground)}
  .nav-toggle:focus-visible ~ .nav-btn{outline:2px solid var(--accent);outline-offset:3px}

  .masthead .nav{display:none;grid-column:1 / -1;flex-direction:column;gap:0;
    align-items:stretch;padding:6px 0 4px;border-top:1px solid var(--rule);margin-top:8px}
  .nav-toggle:checked ~ .nav{display:flex}
  .masthead .nav a{display:flex;align-items:center;gap:12px;min-height:52px;
    padding:0 2px;font-size:13px;letter-spacing:.14em;
    border-bottom:1px solid var(--rule)}
  .masthead .nav a:last-child{border-bottom:0}
  .masthead .nav a .ico{width:19px;height:19px}
  .masthead .nav a[aria-current]{border-bottom:1px solid var(--rule);color:var(--accent)}
  .masthead .nav a[aria-current]::after{content:"";width:6px;height:6px;background:var(--accent);
    margin-left:auto}

  /* --- lead plate --- */
  .lead-plate img{height:min(72vh,560px);min-height:360px}
  .lead-plate .scrim{background:linear-gradient(180deg,rgba(11,12,11,.62) 0%,rgba(11,12,11,.34) 30%,rgba(11,12,11,.72) 64%,rgba(11,12,11,.97) 100%)}
  .lead-plate .over{bottom:16px}
  .lead-plate .over .page{gap:14px}
  .lead-title{font-size:30px;line-height:1.04;max-width:none}
  .lead-plate .deck{font-size:16px;max-width:none}
  .lead-plate .kicker{font-size:11px;letter-spacing:.1em;padding:.5em .7em}

  /* --- figures: no overlaid caption on a narrow plate --- */
  .fig-bleed img{height:clamp(240px,58vw,360px)}
  .fig-bleed.overlay::after{display:none}
  .fig-bleed.overlay .figcap{position:static;border-left:0;border-top:1px solid var(--rule);
    padding-top:.7em;margin-top:10px}
  .fig-bleed.overlay .figcap .cap{font-size:14px}
  .art-sec .prose .figcap .cap{font-size:14px}
  .figcap{gap:.5em 0}
  .figcap .cap{flex:1 1 100%}
  .figcap .credit{flex:1 1 100%;margin-left:0}

  /* --- article intersections --- */
  .art-head{padding-block:22px 14px}
  .art-head h1{font-size:30px;max-width:none}
  .art-head .head-grid{gap:12px;margin-top:.5em}
  .art-head .lead{font-size:17px;max-width:none}
  .art-meta{gap:.5em 1.2em;margin-top:16px}
  .art-sec h2{font-size:22px;max-width:none;margin-top:28px}
  .art-sec .prose,.art-sec .break{margin-left:0}
  .art-sec .prose .pullquote p{font-size:22px;line-height:1.12}
  .pullquote{margin:22px 0;padding-left:14px;border-left-width:3px}
  .lead-in::first-letter{initial-letter:unset;font-size:1em;color:inherit;margin-right:0}
  .fig-mat::before{margin-bottom:12px}
  .fig-inset img{aspect-ratio:3/2}
  .art-close p{font-size:16px}

  /* --- notes band --- */
  .notes-band{padding-block:24px;margin-block:26px}
  .notes-band h3{font-size:19px}
  .timeline li{gap:.25em;padding:.65em 0}
  .timeline .t-when{font-size:12px}
  .pathway{gap:.4em}
  .pathway li{font-size:13px;gap:.6em}
  .pathway li::after{width:14px}

  /* --- charts: a phone-width drawing, not the desktop one scaled down.
         Label above each bar, value inline beside it, nothing off-screen. --- */
  .chart{overflow:visible;padding-bottom:0;border-bottom:0}
  .chart .chart-wide{display:none}
  .chart .chart-narrow{display:block;min-width:0;width:100%}
  .chart figcaption{font-size:13px}

  /* --- map slot: portrait, label out of the spec text's way --- */
  .map-figure{margin:22px 0;padding:12px}
  .map-figure::before{margin-bottom:12px}
  .map-figure .map-slot{aspect-ratio:4/5;min-height:0;padding:12px;
    padding-top:40px;align-items:flex-end;
    background-size:32px 32px,32px 32px}
  .map-figure .map-slot::before{top:12px;left:12px;right:12px;font-size:11px;letter-spacing:.13em}
  .map-figure .map-spec{font-size:13px;max-width:none}
  .map-figure figcaption{gap:.5em 0}
  .map-figure figcaption .cap{flex:1 1 100%;font-size:14px}
  .map-figure figcaption .credit{flex:1 1 100%;margin-left:0}

  /* --- home bands --- */
  .band{padding-block:34px}
  .band-head{gap:.7em;padding-bottom:12px;margin-bottom:18px}
  .band-head h2{font-size:24px;max-width:none}
  .signature{gap:14px;padding-top:12px}
  .signature .num{font-size:64px}
  .signature p{font-size:17px;max-width:none}
  .statrow{grid-template-columns:1fr 1fr;gap:14px}
  .stat-num{font-size:34px}
  .stat-label{font-size:13px}
  .statement{border-top-width:4px}
  .statement .page{gap:14px}
  .statement .mark .num{font-size:66px}
  .statement p{font-size:24px;line-height:1.14;max-width:none}
  .piece h3,.piece.big h3{font-size:21px}
  .piece p{font-size:15px}
  .piece .shot{padding:7px}
  .callout{padding:16px}
  .art-sec .prose .callout p,.callout p{font-size:16px}
  .quiet-line p{font-size:19px;max-width:none}
  .cat-list .t{font-size:20px}
  .cat-list .d{font-size:15px}
  .cat-list a{padding:14px 0;min-height:44px}
  .related-links a,.further-grid a{min-height:44px;font-size:16px}
  .expander label{min-height:44px}

  /* --- supporters + footer --- */
  .supporters .sup-head{gap:.5em}
  .supporters .sup-title{font-size:21px;max-width:none}
  .supporters .said{font-size:14px;max-width:none;text-align:left}
  footer.foot{padding-block:28px}
  footer.foot nav{grid-template-columns:1fr 1fr;gap:0}
  footer.foot nav a{min-height:48px;align-items:center;border-bottom:1px solid var(--rule)}
  .wordmark.sm .name{font-size:21px}
  .wordmark.sm .glyph{width:15px}

  /* long inline references must wrap rather than push the page wide */
  .entity-ref{white-space:normal}
  .tablewrap{margin-inline:0}
}

@media (max-width:380px){
  .masthead .wordmark .name,.masthead.compact .wordmark .name{font-size:20px}
  /* clip the word rather than removing it: the control keeps its name */
  .nav-btn-txt{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .nav-btn{padding:0 12px}
  .statrow{grid-template-columns:1fr}
  .lead-title{font-size:27px}
  footer.foot nav{grid-template-columns:1fr}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.supporters .sub{flex-wrap:wrap!important}
.supporters .sub > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor-run{flex-wrap:wrap!important}
.sponsor-run > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* op-no-mark-ground: operator: remove the extra background. The mark carried a pure black plate on
   a #151714 tile. Fill only. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1770px at 390, 18% of the whole page. Two columns bring it to
   1459px (18% shorter). Checked before writing: no new overflow, smallest mark still
   137px wide, longest blurb 5 lines, tile heights 152-201px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-run), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sponsor-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-run > * *{min-width:0!important;max-width:100%}
    .sponsor-run img,.sponsor-run svg{max-width:100%;height:auto}

}

/* op-blurb-rows: money blurbs ran to 4 rows at 390, 509px of tier across
   4 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-run (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.profile-grid > div.profile-card > img.p-photo){height:auto}
/* op-img-dims:end */