/* Sistema 102 Radios — The Dated Spine
   ground #0D1014 · panel #171C22 · ink #E7E4DC · meter green #D9F24B · alarm red #C4152C
   Space Grotesk (display) · DM Mono (dates + labels) · Spectral (prose) */

:root{
  --ground:#0D1014;
  --panel:#171C22;
  --slot:#1F262C;
  --ink:#E7E4DC;
  --ink-2:#8D958E;
  --ink-3:#A7AEA8;
  --accent:#D9F24B;
  --alert:#C4152C;
  --alert-ink:#FF6B7A;
  --rule:#262D33;
  --border:#2B333A;
  --rule-faint:#1B2126;

  --disp:"Space Grotesk",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --prose-face:"Spectral",Georgia,serif;

  --shell:1120px;
  --gutter:20px;
  --prose:100%;
  --body:19px;
  --rail:0px;
  --stop-gap:44px;
  --tile:100%;
}

*,*::before,*::after{box-sizing:border-box}

html{background:var(--ground);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:300 var(--body)/1.62 var(--prose-face);
  overflow-x:hidden;
}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--alert-ink)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.028em;margin:0;text-wrap:pretty}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.2em}
table{border-collapse:collapse;width:100%}
::selection{background:var(--accent);color:var(--ground)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter)}
.mono{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.kicker{font:500 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.kicker--accent{color:var(--accent)}
.kicker--alert{color:var(--alert-ink)}
.ico{width:1em;height:1em;flex:none;vertical-align:-.12em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.kicker .ico{width:15px;height:15px;margin-right:.55em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:9;background:var(--accent);color:var(--ground);padding:10px 14px;font:500 12px/1 var(--mono)}

/* ─── the axis: masthead ─────────────────────────────── */
.axis{border-bottom:1px solid var(--rule)}
.axis__top{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-end;justify-content:space-between;padding:26px 0 16px}
.wordmark{display:block;font:700 clamp(30px,4.4vw,46px)/.88 var(--disp);letter-spacing:-.04em;color:var(--ink)}
.wordmark b{color:var(--accent);font-weight:700}
.wordmark span{display:block;font:500 clamp(11px,1.2vw,15px)/1 var(--mono);letter-spacing:.34em;color:var(--ink-2);margin-top:.5em}
.standing{max-width:44ch;font:300 16px/1.5 var(--prose-face);color:var(--ink-2)}

.scale{position:relative;padding-bottom:4px}
.scale svg{display:block;width:100%;height:38px;color:#4A524C}
.scale__years{position:relative;height:14px;margin-top:8px;font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--ink-2)}
.scale__years span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.scale__years span:first-child{transform:none}
.scale__years span:last-child{transform:translateX(-100%)}
.scale__call{position:relative;height:16px;margin-top:9px;font:500 13px/1 var(--mono);letter-spacing:.06em}
.scale__call a{position:absolute;transform:translateX(-50%);white-space:nowrap}
@media (max-width:700px){
  .scale svg{height:26px}
  .scale__years span{display:none}
  .scale__years span.keep{display:block}
}

.nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin:22px 0 24px;background:var(--panel);border:1px solid var(--border);border-top:2px solid var(--accent)}
.nav a{display:flex;align-items:center;gap:.55em;padding:16px;font:500 13px/1 var(--mono);letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;color:var(--ink);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.nav a:hover{background:var(--slot);color:var(--accent)}
.nav a[aria-current]{color:var(--ground);background:var(--accent)}
.nav a .ico{width:17px;height:17px}


/* ─── bands ──────────────────────────────────────────── */
.band{padding:clamp(52px,6vw,104px) 0}
.band--tight{padding:clamp(36px,4vw,64px) 0}
.band--ruled{border-top:1px solid var(--rule)}
.band__head{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(28px,3vw,44px)}
.band__title{font:700 clamp(26px,2.6vw,40px)/1.04 var(--disp)}
.more{font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:7px;white-space:nowrap}

/* lead hero: the year at emblem scale */
.lead{display:grid;gap:clamp(28px,3vw,56px);align-items:end}
.emblem{display:block;font:700 clamp(104px,17vw,300px)/.76 var(--disp);letter-spacing:-.06em;color:var(--accent);margin-left:-.02em}
.lead h1{font:700 clamp(30px,3.4vw,50px)/1.06 var(--disp);margin-top:.5em}
.lead__deck{font:300 clamp(18px,1.5vw,22px)/1.5 var(--prose-face);color:var(--ink-3);margin-top:.7em;max-width:52ch}
.lead__cta{display:inline-block;margin-top:1.4em;font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--accent);padding-bottom:7px}

/* the spine */
.stop__line{display:none}
.stop{padding:0 0 var(--stop-gap)}
.stop + .stop{padding-top:var(--stop-gap);border-top:1px solid var(--rule-faint)}
.stop:last-child{padding-bottom:0}
.stop__year{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.year{font:700 clamp(30px,3vw,46px)/1 var(--disp);letter-spacing:-.03em;color:var(--ink)}
.year--on{color:var(--accent)}
.stop h3{font:700 clamp(24px,2.2vw,34px)/1.1 var(--disp)}
.stop--wide h3{font:700 clamp(28px,3.2vw,52px)/1.05 var(--disp)}
.stop__body{display:grid;gap:clamp(20px,2.2vw,44px);margin-top:18px;align-items:start}
.stop__sum{font:300 var(--body)/1.6 var(--prose-face);color:var(--ink-3)}
.stop__sum p{margin:0}

/* the empty bracket — no date */
.bracket{display:inline-flex;align-items:center;color:var(--alert-ink)}
.bracket svg{width:auto;height:clamp(30px,3vw,46px);stroke:currentColor;fill:none;stroke-width:3}
.bracket--lg svg{height:clamp(70px,9vw,150px);stroke-width:3}

/* red no-date area */
.nodate{background:var(--alert);color:#FFF8F4;padding:clamp(48px,5.5vw,84px) 0}
.nodate a{color:#FFF8F4;border-bottom:1px solid currentColor}
.nodate__grid{display:grid;gap:clamp(28px,3vw,64px);align-items:start}
.nodate h2{font:700 clamp(28px,3.6vw,60px)/1.03 var(--disp)}
.nodate p{font:300 clamp(18px,1.4vw,21px)/1.6 var(--prose-face);color:#FFE4E0;max-width:62ch}
.nodate .kicker{color:#FFE4E0}
.nodate__mark svg{width:100%;max-width:280px;height:auto;stroke:#FFF8F4;fill:none;stroke-width:3}
.nodate__link{display:inline-block;margin-top:1.6em;font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding-bottom:7px}

/* map band */
.map{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,64px);align-items:start}
.legend{display:flex;flex-direction:column;gap:16px;margin-top:clamp(26px,3vw,40px);font:400 clamp(15px,1.15vw,18px)/1.25 var(--mono);color:var(--ink)}
.legend span{display:flex;align-items:center;gap:12px}
.legend i{width:24px;height:24px;flex:none;display:block}
.map__field{background:var(--panel);border:1px solid var(--border);padding:12px}
.map__field svg{display:block;width:100%;height:auto}
.map__pin circle{stroke:var(--ground);stroke-width:6}
.map__pin text{font-family:var(--mono);font-size:40px;fill:var(--ink);letter-spacing:1px;paint-order:stroke;stroke:var(--ground);stroke-width:7px}
.map__pin:hover circle{stroke:var(--accent);stroke-width:5}
.map__pin:hover text{fill:var(--accent)}
.map__note{margin-top:14px;font:300 16px/1.5 var(--prose-face);color:var(--ink-3);max-width:70ch}

/* pair band — two dated one-liners */
.pair{display:grid;gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pair > a{display:block;padding:clamp(30px,3.4vw,52px) 0}
.pair > a:hover h3{color:var(--accent)}
.pair h3{font:700 clamp(22px,2vw,30px)/1.14 var(--disp);color:var(--ink);margin-top:16px}
.pair__year{display:flex;align-items:baseline;gap:16px}
.pair__year .year{font-size:clamp(26px,2.4vw,38px);color:var(--ink-2)}

/* ─── figures: three treatments, one drawing system ─── */
figure{margin:0}
.fig__cap{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;margin-top:14px}
.fig__cap p{margin:0;font:300 17px/1.5 var(--prose-face);color:var(--ink);flex:1 1 34ch;min-width:0}
.fig__cap .credit{font:400 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--ink-2);flex:0 1 auto;white-space:normal}

/* 1 · matted panel */
.fig--mat{background:var(--panel);border:1px solid var(--border);padding:12px}
.fig--mat img{width:100%;background:var(--slot)}
.fig--mat .fig__cap{padding:0 2px}
.fig--mat--sm{padding:8px}

/* 2 · full bleed */
.fig--bleed{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--slot)}
.fig--bleed img{width:100%;max-height:min(76vh,760px);object-fit:cover}
.fig--bleed .fig__cap{max-width:var(--shell);margin:0 auto;padding:14px var(--gutter) 0}

/* 3 · rail portrait */
.fig--rail{background:var(--panel);border:1px solid var(--border);padding:8px}
.fig--rail img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--slot)}
.fig--rail .fig__cap{flex-direction:column;gap:6px}
.fig--rail .fig__cap p{font-size:15px;flex:1 1 auto}

/* native logos sit on a plate, never cropped */
.fig img.plate{background:var(--ink);padding:22px;object-fit:contain;max-height:340px}
.fig--rail img.plate{aspect-ratio:4/5;padding:16px}
.fig--bleed img.plate{max-height:420px;object-fit:contain;padding:40px}

/* ─── article ────────────────────────────────────────── */
.masthead-article{padding-block:clamp(40px,4.5vw,72px) clamp(28px,3vw,48px)}
.article-title{display:grid;gap:clamp(18px,2vw,48px);align-items:start}
.article-title h1{font:700 clamp(30px,3.9vw,64px)/1;letter-spacing:-.038em}
.article-title .emblem{font-size:clamp(80px,12vw,190px);margin-top:-.07em}
.deck{font:300 clamp(19px,1.6vw,25px)/1.44 var(--prose-face);color:var(--ink-3);margin-top:.7em;max-width:56ch}
.byline{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:clamp(18px,2vw,28px);padding-top:16px;border-top:1px solid var(--rule)}
.byline .kicker{display:flex;align-items:center}

.body{display:grid;grid-template-columns:1fr;gap:0;padding:clamp(40px,5vw,80px) 0 0}
.body__rail{display:none}
.body__line{display:none}
.body > *{grid-column:1}
.body h2{grid-column:1;font:700 clamp(22px,2.1vw,32px)/1.14;margin:1.9em 0 .7em}
.body h2:first-child{margin-top:0}
.body p{max-width:none}
.body strong{color:var(--ink);font-weight:600}
.body em{font-style:italic}

/* insertion spacing — A2: ≥2× the paragraph gap, ≥24px mobile / ≥32px desktop */
.ins{margin:clamp(32px,4vw,56px) 0}
.ins:last-child{margin-bottom:0}

/* pull quote */
.pull{border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);padding:24px 0;color:var(--accent);font:600 clamp(21px,1.9vw,27px)/1.35 var(--prose-face)}
.pull p{margin:0}

/* notes-for-design units */
.unit{border:1px solid var(--border);background:var(--panel);padding:clamp(20px,2.2vw,32px)}
.unit__head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;margin-bottom:22px}
.unit__head h3{font:700 20px/1.2 var(--disp)}
.unit--open{border:0;background:none;padding:0;border-top:1px solid var(--accent);padding-top:22px}

/* chronology as a mini spine */
.chron{display:grid;grid-template-columns:1fr;gap:0;margin:0}
.chron__row{display:grid;grid-template-columns:1fr;gap:4px 24px;padding:16px 0;border-top:1px solid var(--rule-faint)}
.chron__row:first-child{border-top:0;padding-top:0}
.chron dt{font:500 14px/1.3 var(--mono);letter-spacing:.06em;color:var(--accent)}
.chron dd{margin:0;font:300 17px/1.5 var(--prose-face);color:var(--ink)}

/* definition rows */
.defs{display:grid;grid-template-columns:1fr;gap:0;margin:0}
.defs__row{padding:16px 0;border-top:1px solid var(--rule-faint)}
.defs__row:first-child{border-top:0;padding-top:0}
.defs dt{font:700 17px/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.defs dd{margin:.35em 0 0;font:300 16px/1.55 var(--prose-face);color:var(--ink-3)}

/* plain bullet unit */
.unit ul{margin:0;padding-left:0;list-style:none;display:grid;gap:14px}
.unit ul li{padding-left:22px;position:relative;font:300 17px/1.55 var(--prose-face);color:var(--ink)}
.unit ul li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--accent)}

/* marginalia asides */
.marg{border-top:1px solid var(--rule);padding-top:18px}
.marg__label{font:400 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.marg__year{font:700 clamp(26px,2.4vw,34px)/1 var(--disp);letter-spacing:-.02em;color:var(--accent)}
.marg p:not(.marg__label):not(.marg__year){font:300 16px/1.55 var(--prose-face);color:var(--ink-3);margin:.6em 0 0}
.marg__year--sm{font-size:23px}
.marg--fig{border-top:0;padding-top:0;max-width:300px}

/* end furniture */
.tail{padding-block:clamp(44px,5vw,72px) clamp(56px,6vw,96px)}
.related{border-top:1px solid var(--accent);padding-top:24px;margin:0;list-style:none;padding-left:0;display:grid;gap:0}
.related li{border-bottom:1px solid var(--rule-faint)}
.related li:last-child{border-bottom:0}
.related a{display:grid;gap:6px 24px;padding:20px 0;align-items:baseline}
.related a:hover .related__t{color:var(--accent)}
.related__y{font:500 14px/1.2 var(--mono);letter-spacing:.06em;color:var(--ink-2)}
.related__t{font:700 clamp(19px,1.6vw,24px)/1.2 var(--disp);color:var(--ink)}

/* ─── listings (section pages, archive) ──────────────── */
.pagehead{padding-block:clamp(40px,5vw,80px) clamp(28px,3vw,44px)}
.pagehead__grid{display:grid;gap:clamp(24px,3vw,56px);align-items:end}
.pagehead h1{font:700 clamp(38px,6vw,96px)/.94;letter-spacing:-.045em}
.pagehead__blurb{font:300 clamp(18px,1.5vw,22px)/1.5 var(--prose-face);color:var(--ink-3);margin-top:.8em;max-width:56ch}
.pagehead__meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(20px,2vw,30px);padding-top:16px;border-top:1px solid var(--rule)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px 20px;padding:22px 0 0}
.crumbs a,.crumbs span{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.crumbs span{color:var(--ink-2)}

.cards{display:grid;grid-template-columns:1fr;gap:clamp(30px,3vw,48px)}
.card{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--border);padding:12px}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--slot)}
.card img.plate{object-fit:contain;background:var(--ink);padding:20px}
.card__txt{display:flex;flex-direction:column;flex:1;padding:18px 6px 8px}
.card__year{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.card__year .bracket svg{height:16px;stroke-width:2.4}
.card h3{font:700 clamp(20px,1.7vw,26px)/1.16;min-height:2.32em}
.card p{margin:12px 0 0;font:300 16px/1.55 var(--prose-face);color:var(--ink-3)}
.card__go{margin-top:auto;padding-top:20px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
a.card:hover{border-color:var(--accent)}
a.card:hover h3{color:var(--accent)}

/* section-lead band */
.slead{display:grid;gap:clamp(24px,2.6vw,48px);align-items:center;border-top:1px solid var(--accent);padding-top:clamp(28px,3vw,44px)}
.slead h2{font:700 clamp(28px,3.4vw,52px)/1.05}
.slead__deck{font:300 clamp(18px,1.4vw,20px)/1.6 var(--prose-face);color:var(--ink-3);margin-top:.8em}

/* sections hub */
.hub{display:grid;grid-template-columns:1fr;gap:clamp(24px,2.4vw,40px)}
.hub a{display:flex;flex-direction:column;height:100%;border:1px solid var(--border);background:var(--panel);padding:clamp(22px,2.2vw,32px)}
.hub a:hover{border-color:var(--accent)}
.hub .ico{width:34px;height:34px;color:var(--accent);margin-bottom:22px}
.hub h2{font:700 clamp(22px,1.9vw,30px)/1.12}
.hub p{margin:14px 0 0;font:300 16px/1.55 var(--prose-face);color:var(--ink-3)}
.hub .count{margin-top:auto;padding-top:22px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* archive table */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.reg{min-width:640px;font:300 17px/1.45 var(--prose-face)}
.reg thead th{text-align:left;padding:14px 20px 14px 0;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--accent);border-bottom:1px solid var(--rule)}
.reg td{padding:16px 20px 16px 0;border-bottom:1px solid var(--rule-faint);vertical-align:top}
.reg td:last-child,.reg th:last-child{padding-right:0}
.reg .c-year{font:400 15px/1.3 var(--mono);color:var(--accent);white-space:nowrap}
.reg .c-year .bracket svg{height:15px;stroke-width:2.4}
.reg .c-t a{font:700 18px/1.25 var(--disp);letter-spacing:-.012em;color:var(--ink)}
.reg .c-t a:hover{color:var(--accent)}
.reg .c-s{color:var(--ink-2);font:400 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* ─── supporters ─────────────────────────────────────── */
.sup{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(32px,3.6vw,56px) 0}
.sup__head{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline;margin-bottom:26px}
.sup__grid{display:grid;grid-template-columns:repeat(auto-fit,var(--tile));grid-auto-rows:1fr;gap:24px;justify-content:start}
.sponsor{display:flex;flex-direction:column;width:100%;min-height:116px;height:100%;background:var(--panel);border:1px solid var(--border);padding:18px}
.sponsor:hover{border-color:var(--accent)}
.sponsor-name{font:700 19px/1.2 var(--disp);letter-spacing:-.015em;color:var(--ink)}
.sponsor:hover .sponsor-name{color:var(--accent)}
.sponsor-blurb{display:block;margin-top:12px;font:300 15px/1.45 var(--prose-face);color:var(--ink-3)}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}

/* ─── footer ─────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule);padding:clamp(40px,4vw,64px) 0 clamp(48px,5vw,80px)}
.foot__grid{display:grid;gap:clamp(26px,3vw,56px)}
.foot__nav{display:grid;gap:12px}
.foot__nav a{display:flex;align-items:center;gap:.55em;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.foot__nav a:hover{color:var(--accent)}
.foot__nav a .ico{width:15px;height:15px}
.foot .standing{margin-top:14px}

/* ─── static text pages ─────────────────────────────── */
.prose-page{padding:clamp(30px,4vw,60px) 0 clamp(56px,6vw,96px)}
.prose-page h2{font:700 clamp(22px,2vw,30px)/1.15;margin:1.8em 0 .6em}
.prose-page p{max-width:74ch}

/* ─── styleguide (internal, unlinked) ───────────────── */
.sg{padding-block:40px}
.sg h2{border-top:1px solid var(--accent);padding-top:16px;margin:56px 0 22px;font-size:26px}

/* ═══ breakpoints — the page keeps gaining above the desktop cap ═══ */
@media (min-width:560px){
  :root{--gutter:28px;--tile:calc((100% - 24px)/2)}
  .chron__row{grid-template-columns:170px minmax(0,1fr)}
  .related a{grid-template-columns:120px minmax(0,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  :root{--shell:1120px;--gutter:40px;--prose:70ch;--body:19px}
  .lead{grid-template-columns:minmax(0,1fr) minmax(340px,52%)}
  .lead .fig--mat img{aspect-ratio:4/3;object-fit:cover}
  .stop__body{grid-template-columns:minmax(0,1fr) minmax(240px,34%)}
  .stop--wide .stop__body{grid-template-columns:minmax(0,1fr)}
  .nodate__grid{grid-template-columns:minmax(200px,280px) minmax(0,1fr)}
  .pair{grid-template-columns:1fr 1fr}
  .pair > a{padding-inline:0}
  .pair > a:first-child{padding-right:clamp(28px,3vw,52px);border-right:1px solid var(--rule)}
  .pair > a:last-child{padding-left:clamp(28px,3vw,52px)}
  .article-title{grid-template-columns:minmax(200px,300px) minmax(0,1fr)}
  .pagehead__grid{grid-template-columns:minmax(0,1fr) minmax(260px,38%)}
  .slead{grid-template-columns:minmax(0,1fr) minmax(280px,44%)}
  .foot__grid{grid-template-columns:minmax(0,1fr) auto}
  .foot__nav{grid-template-columns:repeat(3,auto);gap:14px 40px}
  .defs__row{display:grid;grid-template-columns:minmax(160px,26%) minmax(0,1fr);gap:0 28px}
  .defs dd{margin-top:0}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hub{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1120px){:root{--tile:calc((100% - 72px)/4)}}
@media (min-width:1200px){
  :root{--shell:1180px;--gutter:56px;--prose:74ch;--body:20px;--rail:104px;--stop-gap:52px}
  .stop{display:grid;grid-template-columns:225px 1px minmax(0,1fr);padding:0}
  .stop + .stop{padding-top:0}
  .stop:last-child{padding-bottom:0}
  .stop__year{grid-column:1;justify-content:flex-end;text-align:right;padding:var(--stop-gap) 30px 0 0;margin:0}
  .stop__line{display:block;grid-column:2;background:var(--rule)}
  .stop__main{grid-column:3;padding:var(--stop-gap) 0 var(--stop-gap) 44px}
  .stop:first-child .stop__year,.stop:first-child .stop__main{padding-top:0}

  .body{grid-template-columns:var(--rail) 1px minmax(0,var(--prose))}
  .body > *{grid-column:3;padding-left:52px}
  .body__rail{display:block;grid-row:1/-1;grid-column:1;padding:0;text-align:right;padding-right:26px}
  .body__line{display:block;grid-row:1/-1;grid-column:2;background:var(--rule);padding:0}
  .body .ins--wide{grid-column:3/-1}
  .tick-rail{display:flex;flex-direction:column;gap:0;font:400 12px/1 var(--mono);letter-spacing:.04em;color:var(--ink-2);position:sticky;top:28px}
  .tick-rail span{padding:0 0 14px;display:block}
  .tick-rail span.on{color:var(--accent)}
  .sup__grid{gap:24px}
}
@media (min-width:1600px){
  :root{--shell:1560px;--gutter:64px;--prose:82ch;--body:21px;--stop-gap:60px;--rail:200px}
  .body{grid-template-columns:minmax(0,1fr) var(--rail) 1px minmax(0,var(--prose)) minmax(280px,320px) minmax(0,1fr)}
  .body > *{grid-column:4}
  .body__rail{grid-column:2}
  .body__line{grid-column:3}
  .body .marg{grid-column:5;max-width:420px}  .body .ins--wide{grid-column:4}
  .body .ins--breakout{grid-column:4/6}
  .lead{grid-template-columns:minmax(0,1fr) minmax(520px,54%)}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
}
@media (min-width:2100px){
  :root{--shell:2000px;--prose:96ch;--body:22px;--rail:240px;--stop-gap:72px}
  .body{grid-template-columns:minmax(0,1fr) var(--rail) 1px minmax(0,var(--prose)) minmax(300px,400px) minmax(0,1fr)}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hub{grid-template-columns:repeat(5,minmax(0,1fr))}
  .emblem{font-size:300px}
  .stop{grid-template-columns:280px 1px minmax(0,1fr)}
}
@media (min-width:2500px){
  :root{--shell:2380px;--gutter:80px}
}
@media print{
  body{background:#fff;color:#111}
  .axis,.nav,.sup,.foot{display:none}
}

.cat-list{list-style:none;padding-left:0;margin:0}
.cat-list li{display:flex}
a.card{width:100%}
.margs{display:block}
.margs > * + *{margin-top:30px}
.map__field svg{width:100%;height:auto;display:block}
.map__field .pins text{pointer-events:none}
@media (min-width:1600px){
  .margs{display:contents}
  .body .marg{grid-column:5;margin:0 0 38px 40px;padding-left:0;align-self:start}
  .margs > * + *{margin-top:0}
}

/* map: legend beside the field only where the field stays legible */
@media (min-width:1200px){.map{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:899px){.map__pin text{display:none}.map__pin{pointer-events:none}}

/* the axis as a live playhead over the dated stops */
.scale__cursor,.scale__cursor-y{position:absolute;opacity:0;pointer-events:none;transition:left .38s cubic-bezier(.4,0,.2,1),opacity .25s}
.scale__cursor{top:0;height:38px;width:2px;background:var(--ink);transform:translateX(-1px)}
.scale__cursor-y{top:44px;transform:translateX(-50%);font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--ink)}
/* the affordance never touches text: the year, the spine and the photograph carry it */
.js-scroll .stop .fig img,.js-scroll .stop .year,.js-scroll .stop__main{transition:opacity .45s ease,color .35s ease,box-shadow .35s ease}
.js-live .stop .year{color:var(--ink-2)}
.js-live .stop.is-on .year{color:var(--accent)}
.js-live .stop__main{box-shadow:inset 3px 0 0 transparent}
.js-live .stop.is-on .stop__main{box-shadow:inset 3px 0 0 var(--accent)}
.js-live .stop:not(.is-on) .fig img{opacity:.52}
@media (min-width:1200px){.stop__year{position:sticky;top:26px;align-self:start}}
@media (prefers-reduced-motion:reduce){
  .js-scroll .stop .fig img,.js-scroll .stop .year,.js-scroll .stop__main{transition:none}
  .scale__cursor,.scale__cursor-y{transition:none}
}

/* map band: legend carries equal weight to the plate */
.map > div:first-child > p{font-size:clamp(19px,1.5vw,25px);line-height:1.5;text-wrap:pretty}

/* pin type and radius sized per breakpoint so the RENDERED size stays 15-20px,
   whatever width the band's column happens to be (map.html keeps its own 40/20) */
.map .map__pin text{font-size:40px;stroke-width:8px}
.map .map__pin circle{r:20px}
@media (min-width:1200px){.map .map__pin text{font-size:68px;stroke-width:12px}.map .map__pin circle{r:34px}}
@media (min-width:1600px){.map .map__pin text{font-size:56px;stroke-width:10px}.map .map__pin circle{r:28px}}
@media (min-width:2100px){.map .map__pin text{font-size:44px;stroke-width:9px}.map .map__pin circle{r:22px}}
@media (min-width:2500px){.map .map__pin text{font-size:34px;stroke-width:8px}.map .map__pin circle{r:17px}}

/* map band: the decisions that put the colours on the map */
.mapfacts{margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--rule);padding-top:22px}
.mapfacts .kicker{margin-bottom:18px}
.reg--compact{min-width:0;font-size:16px}
.reg--compact thead th{padding:10px 14px 10px 0;font-size:11px;border-top:0}
.reg--compact td{padding:13px 14px 13px 0}
.reg--compact td:last-child,.reg--compact th:last-child{padding-right:0}
.reg--compact .c-year{font-size:14px}
.reg--compact .c-year .bracket svg{height:13px}
.reg--compact .c-terr{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.reg--compact .c-inst{color:var(--ink-2);font-size:15px}
.reg--compact .c-inst a{color:var(--ink-2);border-bottom:1px solid var(--rule)}
.reg--compact .c-inst a:hover{color:var(--accent);border-color:var(--accent)}
@media (max-width:559px){.reg--compact{min-width:520px}}

/* 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}
.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}
.sponsor.sponsor{justify-content:center!important}
: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):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-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}

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sup__grid .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

/* op-clamp-2: operator: limit blurbs to two rows to keep the vertical size of the grid
   consistent. grid-auto-rows:1fr already equalises the ROW, but a four-line sentence dragged
   every tile in that row taller. Two lines reserved and two the maximum; display forced because
   sp-blurb-unhide sets display:block, which cancels a clamp. */
.sup__grid .sponsor .sponsor-blurb{
  display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;min-height:2.9em;
}

/* op-nav-collapse: this nav printed 353px of stacked links at 390 before any content
   (7 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "bracket", seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (20px measured) the button carries the build's
   gutter (20px) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (940px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "plus" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:940px){
  .menu-switch{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;padding:10px 4px;letter-spacing:.2em;gap:12px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .menu-switch::before{content:"[";opacity:.55}
  .menu-switch::after{content:"]";opacity:.55}
  .menu-switch-bars{width:11px;height:11px;flex:none;position:relative;border-top:1.5px solid currentColor;margin-top:-1px;box-shadow:inset 5px 0 0 -3.75px currentColor}
  .nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .menu-switch-c:checked ~ .nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .shell:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .nav)){display:none}
}

/* op-footer-compact: the footer printed 10 rows for 10 link(s) in
   1 list(s) — 487px at 390, 5% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 487 -> 338px (31% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:20px!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px}
}

/* op-money-columns: the supporters block ran one tile per row — 8 tiles,
   1217px at 390, 13% of the whole page. Two columns bring it to
   893px (27% shorter). Checked before writing: no new overflow, smallest mark still
   128px wide, longest blurb 2 lines, tile heights 200-222px.
   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.
   Only the tier(s) that were one-per-row are touched (.sup__grid), 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){
  .sup__grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px!important}
    .sup__grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup__grid > * *{min-width:0!important;max-width:100%}
    .sup__grid img,.sup__grid svg{max-width:100%;height:auto}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.ins > figure.fig.fig--mat > img,
  div.ins.ins--wide > figure.fig.fig--mat > img,
  div.lead.shell > figure.fig.fig--mat > img,
  div.marg.marg--fig > figure.fig.fig--rail > img,
  div.slead > figure.fig.fig--mat > img,
  div.stop__body > figure.fig.fig--mat.fig--mat--sm > img,
  li > a.card > img,
  main > figure.fig.fig--bleed > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sup__grid (5 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sup__grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}