/* Cin Weekly — "Painted Signs"
   Rebuilt from the picked homepage (PICK_SPEC.md / PICK_HOMEPAGE.jpg).
   Palette, by job:
     --ground #121110  page ground (ink)
     --ink    #F4EFE4  type on the ground / cream band ground
     --flag   #E23D28  accent, saturated red — full-bleed statement, rules, hot numerals
     --amber  #F2C230  secondary, saturated yellow — the sign bar, links, kickers
     --mute   #8F8880  quiet type: captions, credits, meta
     --panel  #1D1B19  inset panels, chip cells, map ground
     --stone  #C9C2B6  figure mat
*/



:root{
  --ground:#121110; --ink:#F4EFE4; --flag:#E23D28; --amber:#F2C230;
  --mute:#8F8880; --panel:#1D1B19; --stone:#C9C2B6; --flag-deep:#8E2418;
  --hair:rgba(244,239,228,.22);
  --cream-mute:#6A645C;

  --display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --prose:Literata,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --measure:66ch;      /* prose  ~680px */
  --breakout:60rem;    /* figures, pull-quotes, tables  ~960px */
  --gutter:18px;
  --body:17px;
  --rule:2px;
  --heavy:4px;
}

*,*::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.6 var(--prose);text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--amber);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--flag);text-decoration-color:var(--flag);text-decoration-thickness:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.88;letter-spacing:-.008em;margin:0;text-wrap:balance}
p{margin:0 0 1.05em;text-wrap:pretty}
::selection{background:var(--amber);color:var(--ground)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---- three widths ---- */
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.breakout{width:100%;max-width:var(--breakout);margin-inline:auto;padding-inline:var(--gutter)}
.bleed{width:100%;max-width:none;padding-inline:0}
/* full page width, gutters only — for bands that want the whole measure */
.wide{width:100%;max-width:2400px;margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(30px,4vw,84px)}
.band--tight{padding-block:clamp(26px,2.4vw,46px)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin:0 0 clamp(12px,1.2vw,26px);display:flex;align-items:center;gap:.7em;
  min-width:0;font-weight:500}
.kicker::after{content:"";flex:1 1 24px;height:1px;background:var(--hair);min-width:16px}
.kicker a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.kicker a:hover{color:var(--flag);border-bottom-color:var(--flag)}
.mark{width:1.55em;height:1.55em;flex:none;padding:.22em;box-sizing:content-box;
  background:var(--flag);color:var(--ink)}
.mark path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.more-link{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,1.3vw,26px);letter-spacing:.02em}

/* ---- signature: the cable catenary ---- */
.cable{display:block;width:100%;height:22px;color:var(--flag)}
.cable path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke}
.divider{margin:clamp(26px,3vw,58px) 0;color:var(--mute)}
.divider .cable{height:16px}

/* ---- the sign bar, above the masthead ---- */
.signbar{background:var(--amber);color:var(--ground)}
.signbar nav{max-width:2400px;margin-inline:auto;padding-inline:var(--gutter)}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-label{display:none}
.nav-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0 clamp(9px,1.5vw,44px);
  list-style:none;margin:0;padding:6px 0 7px}
.nav-bar a{display:flex;align-items:center;gap:.4em;font-family:var(--display);font-weight:900;
  font-size:clamp(13.5px,.94vw,21px);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ground);text-decoration:none;padding:4px 0;white-space:nowrap}
.nav-bar .mark{background:none;color:inherit;padding:0;width:1.15em;height:1.15em}
.nav-bar a:hover{color:var(--flag)}
.nav-bar a[aria-current]{box-shadow:inset 0 -3px 0 var(--flag)}
.nav-bar .nav-end{margin-left:0}
.nav-bar .nav-end a{color:rgba(18,17,16,.72)}

/* ---- masthead ---- */
.site-head{border-bottom:var(--heavy) solid var(--flag)}
.masthead{max-width:2400px;margin-inline:auto;padding:clamp(18px,2.2vw,52px) var(--gutter) clamp(8px,.9vw,18px);
  display:grid;grid-template-columns:1fr;gap:clamp(8px,1vw,22px);align-items:end}
.masthead a{text-decoration:none;color:inherit;display:flex;align-items:flex-end;gap:clamp(8px,1.1vw,26px)}
/* sign-painter wordmark: hard two-tone split fill, cream above the line, deep red below,
   with a hairline red offset the way a shop sign is shadowed by hand */
.wordmark{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(46px,10.4vw,196px);line-height:.76;letter-spacing:-.012em;
  background:linear-gradient(180deg,var(--ink) 0 61%,var(--flag) 61% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(3px 3px 0 rgba(142,36,24,.55));
  transition:background-position .18s linear,filter .18s linear;
  background-size:100% 100%;background-position:0 0}
.masthead a:hover .wordmark{
  background:linear-gradient(180deg,var(--ink) 0 44%,var(--flag) 44% 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(5px 5px 0 rgba(142,36,24,.75))}
.est{width:clamp(64px,6.4vw,150px);height:auto;color:var(--flag);flex:none;margin-bottom:clamp(4px,.6vw,16px)}
.est text{font-family:var(--mono)}
.strap-head{margin:0 0 clamp(4px,.5vw,12px);font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.14;color:var(--mute);
  font-size:clamp(13px,.82vw,19px);max-width:30ch}
.head-cable{max-width:2400px;margin-inline:auto;padding:0 var(--gutter) 2px}

/* ---- the lead: photograph set inside the word ---- */
.typelead{max-width:2400px;margin-inline:auto;padding:clamp(16px,2.2vw,64px) var(--gutter) 0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.78;
  letter-spacing:-.014em;font-size:clamp(48px,11.2vw,258px)}
.typelead a{color:inherit;text-decoration:none;display:block}
.typelead .strip{position:relative;width:100%;height:clamp(44px,9vw,208px);
  margin:clamp(8px,.9vw,22px) 0;background:var(--panel);overflow:hidden}
.typelead .strip img{width:100%;height:100%;object-fit:cover}
.typelead a:hover .strip{outline:var(--heavy) solid var(--flag);outline-offset:calc(-1 * var(--heavy))}
.typelead .row{display:flex;align-items:baseline;gap:clamp(10px,1.5vw,40px);flex-wrap:wrap;
  padding-top:clamp(4px,.5vw,12px)}
.typelead .yr{font-size:clamp(12px,.76vw,19px);font-weight:600;letter-spacing:.15em;color:var(--flag)}
.lead-under{max-width:2400px;margin:clamp(18px,2.2vw,48px) auto 0;padding:clamp(14px,1.5vw,28px) var(--gutter) 0;
  display:grid;grid-template-columns:1fr;gap:clamp(12px,1.6vw,44px);align-items:start}
.lead-under::before{content:"";grid-column:1/-1;height:1px;background:var(--hair);
  margin:0 0 clamp(12px,1.4vw,26px)}
.lead-under .deck{font-size:clamp(17px,1.1vw,25px);line-height:1.5;max-width:none;margin:0;
  padding-bottom:clamp(6px,.8vw,16px)}
.lead-under .deck::first-line{letter-spacing:.005em}
.lead-under .credit{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;line-height:1.6;
  text-transform:uppercase;color:var(--mute);margin:0;max-width:26ch}
.lead-under h1{font-size:clamp(22px,1.5vw,32px);margin:0 0 .5em}
.lead-under h1 a{color:inherit;text-decoration:none}
.lead-under h1 a:hover{color:var(--amber)}

/* ---- cream statement band ---- */
.band-cream{background:var(--ink);color:var(--ground)}
.band-cream .lede{font-size:clamp(17px,1.06vw,26px);line-height:1.5;max-width:56ch;margin:0}
.band-cream .say{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,2.6vw,54px);line-height:.94;letter-spacing:-.01em;margin:0 0 .45em}
.band-cream a{color:#A8331F}
.cream-say{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(32px,4.1vw,104px);line-height:.9;letter-spacing:-.016em;margin:0 0 clamp(16px,1.7vw,34px);
  max-width:none;border-bottom:var(--heavy) solid var(--ground);padding-bottom:clamp(10px,1vw,22px)}
/* the two band headings that carry a whole section: one line, as large as the measure allows */
.band-say{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4.1vw,104px);line-height:.9;letter-spacing:-.016em;max-width:none;
  margin:0 0 clamp(16px,1.8vw,38px)}
@media (min-width:900px){ .cream-say,.band-say{white-space:nowrap} }
.band-head{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,3.5vw,84px);line-height:.9;letter-spacing:-.014em;
  max-width:34ch;margin:0 0 clamp(14px,1.5vw,32px)}
.cream-cols{columns:1;column-gap:clamp(24px,3vw,64px);margin-bottom:clamp(18px,2vw,40px)}
.cream-cols p{font-size:clamp(16.5px,1.02vw,24px);line-height:1.52;margin:0 0 .7em}
.cream-cols p:first-child::first-letter{font-family:var(--display);font-weight:800;
  float:left;font-size:3.1em;line-height:.78;padding:.06em .12em 0 0;color:#A8331F}
.cream-index{list-style:none;margin:clamp(6px,.8vw,16px) 0 0;padding:0;counter-reset:ci;
  border-top:var(--rule) solid var(--ground)}
.cream-index li{counter-increment:ci;border-bottom:1px solid rgba(18,17,16,.24)}
.cream-index a{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:0 clamp(14px,1.6vw,32px);
  align-items:baseline;padding:clamp(.85em,1.1vw,1.15em) clamp(6px,.8vw,16px);text-decoration:none;color:var(--ground)}
.cream-index a::before{content:"0" counter(ci);font-family:var(--mono);font-size:12.5px;
  letter-spacing:.08em;color:var(--cream-mute)}
.cream-index .ci-name{display:flex;align-items:center;gap:.5em;font-family:var(--display);
  font-weight:700;text-transform:uppercase;font-size:clamp(19px,1.5vw,30px);line-height:1}
.cream-index .ci-n{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cream-mute);white-space:nowrap}
.cream-index a:hover{background:rgba(18,17,16,.05)}
.cream-index a:hover .ci-name{color:#A8331F}
.cream-index a:hover .ci-n{color:var(--ground)}
.band-cream .kicker{color:#A8331F}
.band-cream .kicker::after{background:rgba(18,17,16,.28)}
.band-cream .mark{background:var(--ground);color:var(--ink)}

/* ---- year dial: five dates, one open at a time (CSS only) ---- */
.dial{border-top:var(--heavy) solid var(--flag);font-variant-numeric:tabular-nums}
.dial > input{position:absolute;opacity:0;pointer-events:none}
.dial-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  border-bottom:1px solid var(--hair)}
.dial-tab{display:grid;gap:.15em;padding:clamp(10px,1.1vw,22px) clamp(8px,.8vw,18px) clamp(12px,1.2vw,24px);
  cursor:pointer;border-right:1px solid var(--hair);border-top:3px solid transparent}
.dial-tab:last-of-type{border-right:0}
.dial-tab .dy{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(26px,3.4vw,74px);line-height:.86;color:var(--mute);transition:color .12s}
.dial-tab .dk{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);transition:color .12s}
.dial-tab:hover .dy,.dial-tab:hover .dk{color:var(--ink)}
.dial-panels{position:relative}
.dial-panel{display:none;grid-template-columns:auto minmax(0,1fr) clamp(104px,12vw,188px);
  gap:clamp(14px,1.8vw,48px);padding-top:clamp(18px,2vw,40px);align-items:start}
.dp-year{font-family:var(--display);font-weight:800;
  font-size:clamp(54px,7.6vw,172px);line-height:.8;letter-spacing:-.022em;color:var(--flag);
  margin:-.06em 0 0;font-variant-numeric:tabular-nums}
.dp-text p{font-size:clamp(17px,1.06vw,25px);line-height:1.48;max-width:52ch;margin:0 0 .8em}
.dp-go{margin:clamp(6px,.8vw,16px) 0 0}
.dp-fig{margin:0}
.dp-fig img{width:100%;aspect-ratio:1/1;object-fit:cover}
.dp-fig figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--mute);padding-top:.55em;line-height:1.4}
.dial > input:nth-of-type(1):checked ~ .dial-tabs .dial-tab:nth-of-type(1),
.dial > input:nth-of-type(2):checked ~ .dial-tabs .dial-tab:nth-of-type(2),
.dial > input:nth-of-type(3):checked ~ .dial-tabs .dial-tab:nth-of-type(3),
.dial > input:nth-of-type(4):checked ~ .dial-tabs .dial-tab:nth-of-type(4),
.dial > input:nth-of-type(5):checked ~ .dial-tabs .dial-tab:nth-of-type(5){
  border-top-color:var(--flag);background:var(--panel)}
.dial > input:nth-of-type(1):checked ~ .dial-tabs .dial-tab:nth-of-type(1) .dy,
.dial > input:nth-of-type(2):checked ~ .dial-tabs .dial-tab:nth-of-type(2) .dy,
.dial > input:nth-of-type(3):checked ~ .dial-tabs .dial-tab:nth-of-type(3) .dy,
.dial > input:nth-of-type(4):checked ~ .dial-tabs .dial-tab:nth-of-type(4) .dy,
.dial > input:nth-of-type(5):checked ~ .dial-tabs .dial-tab:nth-of-type(5) .dy{color:var(--flag)}
.dial > input:nth-of-type(1):checked ~ .dial-tabs .dial-tab:nth-of-type(1) .dk,
.dial > input:nth-of-type(2):checked ~ .dial-tabs .dial-tab:nth-of-type(2) .dk,
.dial > input:nth-of-type(3):checked ~ .dial-tabs .dial-tab:nth-of-type(3) .dk,
.dial > input:nth-of-type(4):checked ~ .dial-tabs .dial-tab:nth-of-type(4) .dk,
.dial > input:nth-of-type(5):checked ~ .dial-tabs .dial-tab:nth-of-type(5) .dk{color:var(--ink)}
.dial > input:nth-of-type(1):checked ~ .dial-panels .dial-panel[data-i="1"],
.dial > input:nth-of-type(2):checked ~ .dial-panels .dial-panel[data-i="2"],
.dial > input:nth-of-type(3):checked ~ .dial-panels .dial-panel[data-i="3"],
.dial > input:nth-of-type(4):checked ~ .dial-panels .dial-panel[data-i="4"],
.dial > input:nth-of-type(5):checked ~ .dial-panels .dial-panel[data-i="5"]{display:grid}
.dial > input:focus-visible ~ .dial-tabs .dial-tab{outline:none}
.dial > input:nth-of-type(1):focus-visible ~ .dial-tabs .dial-tab:nth-of-type(1),
.dial > input:nth-of-type(2):focus-visible ~ .dial-tabs .dial-tab:nth-of-type(2),
.dial > input:nth-of-type(3):focus-visible ~ .dial-tabs .dial-tab:nth-of-type(3),
.dial > input:nth-of-type(4):focus-visible ~ .dial-tabs .dial-tab:nth-of-type(4),
.dial > input:nth-of-type(5):focus-visible ~ .dial-tabs .dial-tab:nth-of-type(5){outline:3px solid var(--amber);outline-offset:-3px}

/* ---- full-bleed red statement ---- */
.band-flag{background:var(--flag-deep);color:var(--ink)}
.band-flag .say{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,5vw,120px);line-height:.9;letter-spacing:-.012em;margin:0;max-width:32ch;color:var(--ink)}
.band-flag p:not(.kicker):not(.say){color:#0A0A09;font-size:clamp(18px,1.08vw,25px);font-weight:600;
  line-height:1.46;max-width:44ch;margin:clamp(14px,1.6vw,40px) 0 0}
.band-flag .kicker{color:var(--ink);font-size:12px}
.band-flag .kicker a{color:var(--ink)}
.band-flag .kicker::after{background:rgba(244,239,228,.42)}
.band-flag .mark{background:var(--ink);color:var(--flag-deep)}
.band-flag a{color:#0A0A09}
.band-flag .more-link{color:#0A0A09}

/* ---- amber panel band ---- */
.band-amber{background:var(--amber);color:var(--ground)}
.band-amber h2,.band-amber h3{color:var(--ground)}
.band-amber .kicker{color:var(--ground);font-size:12px}
.band-amber .kicker a{color:var(--ground)}
.band-amber .kicker::after{background:rgba(18,17,16,.32)}
.band-amber .mark{background:var(--ground);color:var(--amber)}
.band-amber a{color:#8C2A17}

/* ---- panel band (dark inset) ---- */
.band-panel{background:var(--panel)}

/* ---- figure system: (a) letterbox bleed  (b) mat  (c) offset pull  (d) chip/cross ---- */
figure{margin:0}
.fig-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em 1.6em;max-width:82ch;padding-top:.6em}
.fig-cap p{margin:0;flex:1 1 26ch;min-width:0;font-size:15.5px;line-height:1.45}
.fig-cap .credit{flex:0 1 auto;margin-left:auto;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mute);line-height:1.5}
.fig-bleed{margin-block:clamp(32px,2.8vw,56px)}
.fig-bleed img{width:100%;height:clamp(200px,31vw,560px);object-fit:cover}
.fig-bleed .fig-cap{max-width:min(82ch,100%);margin-inline:auto;padding:.65em var(--gutter) 0;
  border-top:1px solid var(--hair)}
.fig-mat{margin-block:clamp(32px,2.4vw,48px);background:var(--stone);padding:clamp(14px,1.5vw,24px)}
.fig-mat img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.fig-mat .fig-cap p{font-family:var(--prose);font-style:italic;color:var(--ground)}
.fig-mat .fig-cap .credit{color:var(--cream-mute)}
.fig-offset{margin-block:clamp(32px,2.4vw,48px)}
.fig-offset img{width:100%;aspect-ratio:3/2;object-fit:cover;border-left:6px solid var(--flag)}
.fig-cross{margin-block:clamp(32px,2.2vw,44px);display:grid;
  grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:0 clamp(12px,1.2vw,22px);
  align-items:start;border-top:var(--rule) solid var(--ink);padding-top:.8em}
.fig-cross img{width:100%;aspect-ratio:1/1;object-fit:cover}
.fig-cross figcaption{font-size:15.5px;line-height:1.44}
.fig-cross .x-title{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:19px;line-height:1;margin-bottom:.35em}
.fig-cross a{text-decoration:none;color:inherit}
.fig-cross a:hover .x-title{color:var(--amber)}
.fig-cross .credit{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--mute);margin-top:.5em}
.breakout:has(> .gallery),.breakout:has(> .pullquote){margin-block:clamp(32px,3.4vw,64px)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px;
  margin-block:clamp(32px,2.6vw,52px)}
.breakout > .gallery{margin-block:.7em 0}
.breakout > .pullquote{margin-block:0}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gallery figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--mute);padding-top:.45em}
.gallery a{text-decoration:none;color:var(--mute)}
.gallery a:hover figcaption{color:var(--amber)}

/* ---- homepage rooms ---- */
.uneven{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,40px)}
.uneven .piece{display:flex;flex-direction:column}
.uneven .piece a{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.uneven .piece img{width:100%;aspect-ratio:16/10;object-fit:cover}
.uneven .piece > a > div{padding-top:clamp(10px,1.1vw,22px)}
.uneven .piece h3{margin:.55em 0 .5em;padding-bottom:.1em;line-height:.94}
.uneven .piece .idx{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--amber);border-top:var(--rule) solid var(--ink);padding-top:.5em;margin-top:.75em}
.uneven .piece .kicker{margin:.55em 0 .1em}
.uneven .piece p:not(.kicker){font-size:15.5px;line-height:1.45;color:var(--mute);margin:0}
.uneven .piece a:hover h3{color:var(--amber)}
.uneven .p1 h3{font-size:clamp(24px,2.3vw,42px)}
.uneven .p2 h3{font-size:clamp(20px,1.6vw,29px)}
.uneven .p3{border-top:var(--rule) solid var(--ink);padding-top:.75em}
.uneven .p3 h3{font-size:clamp(19px,1.35vw,25px)}
.uneven .p3 img{aspect-ratio:3/1}

.pair{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,40px)}
.asym{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,40px)}
.card-lg a,.card-sm a{text-decoration:none;color:inherit}
.card-lg img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-lg h3{font-size:clamp(24px,2.2vw,42px);margin:.55em 0 .35em}
.card-sm{border-top:var(--rule) solid var(--ink);padding-top:.75em}
.card-sm h3{font-size:clamp(19px,1.45vw,27px);margin:0 0 .35em}
.card-sm img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:.7em}
.card-lg p:not(.kicker),.card-sm p:not(.kicker){font-size:15.5px;line-height:1.45;color:var(--mute)}
.card-lg a:hover h3,.card-sm a:hover h3{color:var(--amber)}

.quote-lift{margin:0}
.quote-lift .say{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,72px);line-height:.9;margin:0}
.quote-lift cite{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;
  font-style:normal;color:var(--mute);margin-top:1.1em;line-height:1.5}

/* ---- article ---- */
.art-head{padding-block:clamp(20px,2.6vw,56px) clamp(12px,1.4vw,24px)}
.art-head h1{font-size:clamp(34px,5.4vw,108px)}
.art-main{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
main > section:last-child,main > article > section:last-child{padding-bottom:clamp(34px,3.2vw,68px)}
.art-rail{width:100%;max-width:var(--breakout);margin-inline:auto;padding-inline:var(--gutter)}
.art-rail .r-head{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);border-top:var(--rule) solid var(--ink);padding-top:.7em;margin:0 0 .3em}
.lead{font-size:clamp(18px,1.28vw,25px);line-height:1.45;font-weight:600;margin:0 0 1.15em}
.art-body h2{font-size:clamp(22px,2vw,38px);margin:clamp(26px,3vw,56px) 0 .5em;
  padding-top:.5em;border-top:1px solid var(--hair)}
.art-body h3{font-size:clamp(18px,1.35vw,25px);margin:2em 0 .4em}
.art-body ul{padding-left:1.1em}
.art-body li{margin-bottom:.4em}
.kicker .art-sec{flex:none}
.art-sec{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:clamp(14px,.98vw,20px);
  color:var(--amber);text-decoration:none}
.art-sec:hover{color:var(--flag)}

/* Notes-for-Design material: full-bleed interruptions, not a standing rail */
.material{background:var(--panel);border-top:var(--heavy) solid var(--flag);
  padding-block:clamp(26px,2.8vw,54px);margin-block:clamp(32px,3.4vw,64px)}
.material h2{font-size:clamp(20px,1.9vw,36px);margin:0 0 .75em;border:0;padding:0}
/* two record panels in a row read as one section: no repeated red rule, no repeated kicker */
.material:has(+ .material){margin-bottom:0;padding-bottom:0}
.material + .material{border-top:0;margin-top:0;padding-top:0}
.material + .material > .breakout > .kicker{display:none}
.material + .material > .breakout > h2{padding-top:clamp(20px,2vw,40px);
  border-top:1px solid var(--hair);margin-top:0}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:1fr;gap:.15em 1.4em;padding:.6em 0;border-top:1px solid var(--hair)}
.timeline li:last-child{border-bottom:1px solid var(--hair)}
.t-when{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber);padding-top:.25em}
.t-what{font-size:16.5px;line-height:1.45}
.factlist{list-style:none;margin:0;padding:0;columns:1;column-gap:clamp(20px,2.6vw,54px)}
.factlist li{break-inside:avoid;padding:.55em 0;border-top:1px solid var(--hair);font-size:16.5px;line-height:1.45}
.factlist li b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.06em;color:var(--amber)}

.pullquote{margin:clamp(30px,3.2vw,58px) 0;padding-left:clamp(16px,1.4vw,26px);border-left:6px solid var(--flag)}
.pullquote p{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.5vw,50px);line-height:.94;margin:0}
.blockquote{margin:clamp(28px,2.6vw,46px) 0;padding:clamp(15px,1.4vw,26px);background:var(--stone);color:var(--ground)}
.blockquote p{font-size:1.06em;font-style:italic;margin:0 0 .5em}
.blockquote cite{font-family:var(--mono);font-size:12px;letter-spacing:.07em;font-style:normal;color:var(--cream-mute)}
.callout{margin:clamp(28px,2.6vw,46px) 0;background:var(--amber);color:var(--ground);padding:clamp(15px,1.4vw,26px)}
.callout p{margin:0;font-size:1.06em;font-weight:600}
.note{font-family:var(--mono);font-size:13.5px;line-height:1.55;color:var(--mute);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:.7em 0;margin:1.6em 0}

.datatable,.versus{width:100%;border-collapse:collapse;margin:clamp(28px,2.6vw,48px) 0;font-size:16px}
.datatable th,.datatable td,.versus th,.versus td{text-align:left;padding:.6em .8em;
  border-bottom:1px solid var(--hair);vertical-align:top}
.datatable thead th,.versus thead th{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:var(--rule) solid var(--ink);font-size:15px}
.datatable tbody tr:nth-child(even),.versus tbody tr:nth-child(even){background:rgba(244,239,228,.05)}
.versus td+td{border-left:1px solid var(--hair)}
.table-scroll{overflow-x:auto}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:var(--hair);margin:clamp(28px,2.6vw,48px) 0;border:1px solid var(--hair)}
.statblock{background:var(--panel);padding:clamp(12px,1.2vw,22px)}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(32px,3.2vw,62px);
  line-height:.86;color:var(--flag)}
.stat-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute);margin-top:.5em;line-height:1.4}

.chart figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute);padding-top:.5em}
.chart svg{width:100%;height:auto;display:block}
.chart .bar-r{fill:var(--flag)}
.chart .bar-lab,.chart .bar-val{font-family:var(--mono);font-size:11px;fill:var(--ink)}
.chart .axis{stroke:var(--hair);stroke-width:1}

/* ---- cards / references ---- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(12px,1.4vw,26px);margin:clamp(20px,2.4vw,44px) 0}
.profile-card{display:flex;flex-direction:column;background:var(--panel);padding:clamp(12px,1.2vw,20px);
  border-top:var(--rule) solid var(--amber)}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:.7em}
.profile-card h3{font-size:20px;margin-bottom:.25em}
.profile-card .p-role{font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin:0 0 .7em}
.profile-card p{font-size:15.5px;line-height:1.45}
.profile-card .p-links{margin-top:auto;padding-top:.6em;margin-bottom:0}
.profile-card.no-photo{border-top-color:var(--flag)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin:clamp(20px,2.4vw,44px) 0}
.org-card{display:grid;grid-template-columns:44px 1fr;gap:.2em .8em;align-items:center;
  background:var(--panel);padding:.8em;text-decoration:none;color:var(--ink)}
.org-card:hover{background:var(--amber);color:var(--ground)}
.org-logo{grid-row:1/3;width:44px;height:44px;object-fit:contain;background:var(--ground)}
.org-card.no-logo{grid-template-columns:1fr}
.org-name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;line-height:1}
.org-host{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.org-card:hover .org-host{color:rgba(18,17,16,.7)}
.entity-ref{font-family:var(--mono);font-size:.92em;white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin:clamp(20px,2.4vw,44px) 0}
.further-grid .mark{background:var(--flag);color:var(--ink)}
.further-grid a:hover .mark{background:var(--ground);color:var(--amber)}
.further-grid a{background:var(--panel);padding:clamp(12px,1.2vw,20px);text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1;
  display:flex;align-items:flex-start;gap:.5em;min-height:5em}
.further-grid a:hover{background:var(--amber);color:var(--ground)}
.related-links{list-style:none;margin:0;padding:0}
.related-links li{border-top:1px solid var(--hair)}
.related-links li:last-child{border-bottom:1px solid var(--hair)}
.related-links a{display:block;padding:.7em 0;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,1.3vw,26px);line-height:1.02}
.related-links a:hover{color:var(--amber)}

.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--hair)}
.cat-list li:last-child{border-bottom:var(--rule) solid var(--ink)}
.cat-list a{display:grid;gap:.2em;padding:.85em 0;text-decoration:none;color:var(--ink)}
.cat-list a:hover .ct{color:var(--amber)}
.cat-list .ct{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,1.55vw,30px);line-height:1}
.cat-list .cb{font-size:15.5px;line-height:1.45;color:var(--mute);max-width:90ch}

/* ---- supporters ---- */
.supporters{border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.sup-head{display:grid;grid-template-columns:1fr;gap:.5em clamp(20px,2.2vw,48px);
  align-items:center;margin-bottom:clamp(14px,1.5vw,30px)}
.sup-head h2{font-size:clamp(19px,1.5vw,29px)}
.sup-head p{font-family:var(--mono);font-size:12.5px;line-height:1.5;letter-spacing:.05em;
  color:var(--mute);margin:0;max-width:46ch}
.sup-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(14px,1.5vw,30px);margin-bottom:clamp(14px,1.5vw,30px)}
.sponsor{display:flex;flex-direction:column;gap:.55em;text-decoration:none;color:var(--ink);min-width:0}
.sponsor img{flex:none;width:100%;height:52px;background:var(--ground);border:1px solid var(--hair);
  object-fit:contain;padding:6px 12px}
.sponsor .sponsor-name{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:17px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor .sponsor-blurb{font-size:14px;line-height:1.4;color:var(--mute)}
.sponsor:hover .sponsor-name{color:var(--amber)}
.sup-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--mute);margin:0}

/* ---- map ---- */
.map-figure{margin:0}
.map-slot{width:100%;background:var(--panel);border:1px solid var(--hair);contain:paint}
.map-slot svg{width:100%;height:auto;display:block}
.map-water{fill:#3E5B60;stroke:none}
.map-waterline{fill:none;stroke:#5C8188;stroke-width:1.1}
.map-built{fill:var(--ink);stroke:none;opacity:.09}
.map-minor{fill:none;stroke:var(--stone);stroke-width:.7;opacity:.4}
.map-major{fill:none;stroke:var(--stone);stroke-width:1.5;opacity:.8}
.map-pin circle{fill:var(--flag);stroke:var(--ink);stroke-width:1.5}
.map-pin text{font-family:var(--mono);font-size:11px;fill:var(--ink);letter-spacing:.04em}
.map-pin:hover circle{fill:var(--amber)}
.map-pin:hover text{fill:var(--amber)}
.map-cap{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);margin:.8em 0 0}
.map-hero{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,44px);
  margin-top:clamp(16px,1.8vw,38px);align-items:start}
.map-slot{border:0;border-top:var(--heavy) solid var(--flag);background:transparent;padding-top:clamp(8px,.8vw,16px)}
.map-hero .map-pin circle{fill:var(--flag);stroke:var(--ground);stroke-width:2.5;transition:fill .12s,r .12s}
.map-hero .map-pin text{font-family:var(--mono);font-size:15px;fill:var(--ink);letter-spacing:.02em;
  paint-order:stroke;stroke:var(--ground);stroke-width:4.5;stroke-linejoin:round;transition:fill .12s}
.map-hero .map-pin:hover circle{fill:var(--amber);r:11}
.map-hero .map-pin:hover text{fill:var(--amber);font-weight:700}
.map-hero .pin-n{display:none}
.pin-hit{fill:transparent;stroke:none}
.map-side{display:grid;gap:clamp(10px,1.1vw,20px);align-content:start}
.map-lede{font-size:clamp(16px,.98vw,22px);line-height:1.5;margin:0;max-width:44ch}
.map-side .map-cap{margin:0}
.map-legend{list-style:none;margin:0;padding:0;display:grid;gap:.42em}
.map-legend li{display:flex;align-items:center;gap:.7em;font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;color:var(--mute);line-height:1.35}
.lg{flex:none;width:24px;height:11px;position:relative}
.lg-w{background:#3E5B60}
.lg-l{border-top:2px solid #5C8188;height:0}
.lg-j{border-top:2px solid var(--stone);height:0;opacity:.8}
.lg-p{width:11px;height:11px;border-radius:50%;background:var(--flag);border:2px solid var(--ink);margin-left:6px}
.map-places{list-style:none;margin:0;padding:0;counter-reset:mp;
  border-top:1px solid var(--hair);columns:1}
.map-places li{counter-increment:mp;break-inside:avoid;border-bottom:1px solid var(--hair)}
.map-places a{display:block;padding:.4em 0;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1vw,20px);line-height:1.1;transition:color .12s}
.map-places a::before{content:"0" counter(mp) " ";font-family:var(--mono);font-weight:400;
  font-size:11px;letter-spacing:.06em;color:var(--flag);margin-right:.5em}
.map-places a:hover,.map-places a:hover::before{color:var(--amber)}
.map-figure:has(.map-places li[data-i="1"] a:hover) .map-pin[data-i="1"] circle,.map-figure:has(.map-places li[data-i="1"] a:focus-visible) .map-pin[data-i="1"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="1"] a:hover) .map-pin[data-i="1"] text,.map-figure:has(.map-places li[data-i="1"] a:focus-visible) .map-pin[data-i="1"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="1"]:hover) .map-places li[data-i="1"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="2"] a:hover) .map-pin[data-i="2"] circle,.map-figure:has(.map-places li[data-i="2"] a:focus-visible) .map-pin[data-i="2"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="2"] a:hover) .map-pin[data-i="2"] text,.map-figure:has(.map-places li[data-i="2"] a:focus-visible) .map-pin[data-i="2"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="2"]:hover) .map-places li[data-i="2"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="3"] a:hover) .map-pin[data-i="3"] circle,.map-figure:has(.map-places li[data-i="3"] a:focus-visible) .map-pin[data-i="3"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="3"] a:hover) .map-pin[data-i="3"] text,.map-figure:has(.map-places li[data-i="3"] a:focus-visible) .map-pin[data-i="3"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="3"]:hover) .map-places li[data-i="3"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="4"] a:hover) .map-pin[data-i="4"] circle,.map-figure:has(.map-places li[data-i="4"] a:focus-visible) .map-pin[data-i="4"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="4"] a:hover) .map-pin[data-i="4"] text,.map-figure:has(.map-places li[data-i="4"] a:focus-visible) .map-pin[data-i="4"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="4"]:hover) .map-places li[data-i="4"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="5"] a:hover) .map-pin[data-i="5"] circle,.map-figure:has(.map-places li[data-i="5"] a:focus-visible) .map-pin[data-i="5"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="5"] a:hover) .map-pin[data-i="5"] text,.map-figure:has(.map-places li[data-i="5"] a:focus-visible) .map-pin[data-i="5"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="5"]:hover) .map-places li[data-i="5"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="6"] a:hover) .map-pin[data-i="6"] circle,.map-figure:has(.map-places li[data-i="6"] a:focus-visible) .map-pin[data-i="6"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="6"] a:hover) .map-pin[data-i="6"] text,.map-figure:has(.map-places li[data-i="6"] a:focus-visible) .map-pin[data-i="6"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="6"]:hover) .map-places li[data-i="6"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="7"] a:hover) .map-pin[data-i="7"] circle,.map-figure:has(.map-places li[data-i="7"] a:focus-visible) .map-pin[data-i="7"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="7"] a:hover) .map-pin[data-i="7"] text,.map-figure:has(.map-places li[data-i="7"] a:focus-visible) .map-pin[data-i="7"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="7"]:hover) .map-places li[data-i="7"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="8"] a:hover) .map-pin[data-i="8"] circle,.map-figure:has(.map-places li[data-i="8"] a:focus-visible) .map-pin[data-i="8"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="8"] a:hover) .map-pin[data-i="8"] text,.map-figure:has(.map-places li[data-i="8"] a:focus-visible) .map-pin[data-i="8"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="8"]:hover) .map-places li[data-i="8"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="9"] a:hover) .map-pin[data-i="9"] circle,.map-figure:has(.map-places li[data-i="9"] a:focus-visible) .map-pin[data-i="9"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="9"] a:hover) .map-pin[data-i="9"] text,.map-figure:has(.map-places li[data-i="9"] a:focus-visible) .map-pin[data-i="9"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="9"]:hover) .map-places li[data-i="9"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="10"] a:hover) .map-pin[data-i="10"] circle,.map-figure:has(.map-places li[data-i="10"] a:focus-visible) .map-pin[data-i="10"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="10"] a:hover) .map-pin[data-i="10"] text,.map-figure:has(.map-places li[data-i="10"] a:focus-visible) .map-pin[data-i="10"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="10"]:hover) .map-places li[data-i="10"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="11"] a:hover) .map-pin[data-i="11"] circle,.map-figure:has(.map-places li[data-i="11"] a:focus-visible) .map-pin[data-i="11"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="11"] a:hover) .map-pin[data-i="11"] text,.map-figure:has(.map-places li[data-i="11"] a:focus-visible) .map-pin[data-i="11"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="11"]:hover) .map-places li[data-i="11"] a{color:var(--amber)}
.map-figure:has(.map-places li[data-i="12"] a:hover) .map-pin[data-i="12"] circle,.map-figure:has(.map-places li[data-i="12"] a:focus-visible) .map-pin[data-i="12"] circle{fill:var(--amber);r:11}
.map-figure:has(.map-places li[data-i="12"] a:hover) .map-pin[data-i="12"] text,.map-figure:has(.map-places li[data-i="12"] a:focus-visible) .map-pin[data-i="12"] text{fill:var(--amber);font-weight:700}
.map-figure:has(.map-pin[data-i="12"]:hover) .map-places li[data-i="12"] a{color:var(--amber)}


/* ---- footer, on cream ---- */
.site-foot{background:var(--ink);color:var(--ground);border-top:var(--heavy) solid var(--flag);
  padding-block:clamp(18px,2vw,42px)}
.foot-word{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,5.4vw,124px);line-height:.8;letter-spacing:-.014em;margin:0 0 clamp(10px,1.1vw,24px)}
.foot-grid{max-width:2400px;margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,1.8vw,44px);
  border-top:var(--rule) solid var(--ground);padding-top:clamp(12px,1.2vw,24px);align-items:start}
.foot-nav{list-style:none;margin:0;padding:0;display:grid;gap:.45em}
.foot-nav a{display:flex;align-items:center;gap:.5em;color:var(--ground);text-decoration:none;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px}
.foot-nav .mark{background:var(--ground);color:var(--ink)}
.foot-nav a:hover .mark{background:#A8331F}
.foot-nav a:hover{color:#A8331F}
.foot-strap{font-size:15px;line-height:1.5;color:var(--cream-mute);max-width:30ch;margin:0}
.foot-word-wrap{max-width:2400px;margin-inline:auto;padding-inline:var(--gutter)}

/* ---- CSS-only expander ---- */
.expander{border-top:var(--rule) solid var(--ink)}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked~.more{display:block}
.expander label{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:.8em 0;cursor:pointer;color:var(--amber)}
.expander label:hover{color:var(--flag)}
.expander input:checked~label .lbl-open{display:none}
.expander label .lbl-shut{display:none}
.expander input:checked~label .lbl-shut{display:inline}

/* ================= breakpoints ================= */
@media (max-width:699px){
  .nav-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;padding:.65em 0;cursor:pointer;color:var(--ground);
    border-bottom:1px solid rgba(18,17,16,.35)}
  .nav-bar{display:none}
  .nav-toggle:checked~.nav-bar{display:grid;gap:.1em;padding-bottom:12px}
  .nav-bar .nav-end{margin-left:0}
  .fig-cross{grid-template-columns:minmax(0,76px) minmax(0,1fr)}
  .fig-bleed,.fig-mat,.fig-offset,.fig-cross,.gallery{margin-block:24px}
  /* the map: names cannot fit at this scale, so the dots carry numerals and the list carries the names */
  .map-hero .map-pin > text:not(.pin-n){display:none}
  .map-hero .map-pin circle{r:23;stroke-width:5}
  .map-hero .map-pin text.pin-n{display:block;font-family:var(--mono);font-size:36px;font-weight:700;
    fill:var(--ground);stroke:none;paint-order:normal;letter-spacing:0}
  .map-hero .map-pin:hover circle,.map-figure:has(.map-places a:hover) .map-pin circle{r:23}
  .map-hero .map-pin circle.pin-hit{r:33}
  /* the two clustered pairs are closer than the mobile dot diameter — separate them here only */
  .map-hero .map-pin[data-i="1"]{transform:translate(18px,-15px)}
  .map-hero .map-pin[data-i="2"]{transform:translate(-18px,15px)}
  .map-hero .map-pin[data-i="5"]{transform:translate(19px,21px)}
  .map-hero .map-pin[data-i="7"]{transform:translate(-26px,-29px)}
  .map-places a{padding:.55em 0}
  .dial-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr);
    overflow-x:auto;scrollbar-width:thin}
  .dial-tab{border-top-width:3px}
  .dial-tab .dk{display:none}
  .dial-panel{grid-template-columns:minmax(0,1fr) clamp(88px,26vw,132px)}
  .dp-year{grid-column:1/-1;margin-bottom:.1em}
}
@media (min-width:700px){
  :root{--gutter:30px;--body:17.5px}
  .nav-label{font-size:13px;letter-spacing:.16em;padding:.75em 0}
  .ledger{grid-template-columns:minmax(0,auto) minmax(0,1fr) clamp(116px,9.6vw,214px);
    column-gap:clamp(14px,2.2vw,60px)}
  .ledger .head{display:grid;grid-template-columns:subgrid}
  .map-places{columns:2;column-gap:clamp(18px,2vw,40px)}
  .masthead{grid-template-columns:1fr auto}
  .uneven{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);grid-template-areas:"a b" "c c"}
  .uneven .p1{grid-area:a}.uneven .p2{grid-area:b}
  .uneven .p3{grid-area:c;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    gap:0 clamp(14px,1.4vw,26px);align-items:start}
  .pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .asym{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
  .lead-under{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
  .ledger .chip{margin-bottom:0}
  .ledger .txt{margin:0}
  .timeline li{grid-template-columns:minmax(0,15ch) minmax(0,1fr)}
  .sup-head{grid-template-columns:auto minmax(0,1fr)}
  .factlist{columns:2}
}
@media (min-width:700px) and (max-width:1023px){
  .nav-label{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.16em;
    text-transform:uppercase;padding:.7em 0;cursor:pointer;color:var(--ground);
    border-bottom:1px solid rgba(18,17,16,.35)}
  .nav-bar{display:none}
  .nav-toggle:checked ~ .nav-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.1em clamp(12px,2vw,40px);padding-bottom:12px}
  .nav-bar .nav-end{margin-left:0}
}
@media (min-width:1024px){
  :root{--measure:68ch;--breakout:64rem;--gutter:40px;--body:18px}
  .nav-bar .nav-end{margin-left:auto}
  .nav-bar a{letter-spacing:.11em}
  .fig-offset{margin-left:calc(-1 * clamp(20px,4vw,88px))}
  .fig-offset .fig-cap{margin-left:clamp(20px,4vw,88px)}
}
@media (min-width:1280px){
  :root{--measure:70ch;--breakout:70rem;--gutter:52px;--body:18.5px}
  .cream-cols{columns:2}
  .map-hero{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}
  .map-places{columns:1}
  .uneven{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"a b c"}
  .uneven .p3{border-top:0;padding-top:0;display:flex}
  .uneven .p3 img{aspect-ratio:4/3}
}
/* above the desktop cap: the page gains width, columns and type */
@media (min-width:1440px){
  :root{--measure:76ch;--breakout:78rem;--gutter:66px;--body:19px;--rule:3px;--heavy:6px}
  .dp-text{columns:2;column-gap:clamp(28px,3vw,72px)}
  .dp-text p{max-width:none}
  .dp-go{column-span:all;break-before:column}
  .band{padding-block:clamp(48px,5vw,102px)}
  .fig-bleed img{height:clamp(340px,33vw,660px)}
  .factlist{columns:3}
  .timeline{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(26px,3vw,64px)}
  .timeline li:nth-child(2){border-top:1px solid var(--hair)}
  .sup-group{gap:18px}
}
@media (min-width:1920px){
  :root{--measure:80ch;--breakout:92rem;--gutter:88px;--body:20px}
  .art-shell{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(320px,1fr);
    gap:0 clamp(40px,4vw,96px);max-width:2400px;margin-inline:auto;padding-inline:var(--gutter)}
  .art-shell .art-main,.art-shell .art-rail{max-width:none;margin-inline:0;padding-inline:0}
  .art-shell .art-rail{grid-column:2;grid-row:1/999;align-self:start;
    position:sticky;top:clamp(20px,2vw,48px);display:grid;gap:clamp(18px,1.8vw,36px)}
  .art-shell .art-rail .fig-mat,.art-shell .art-rail .fig-cross{margin-block:0}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .further-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
  .uneven{grid-template-columns:minmax(0,2.5fr) minmax(0,1fr) minmax(0,1.4fr)}
}
@media (min-width:2400px){
  :root{--measure:84ch;--breakout:108rem;--gutter:112px;--body:21px}
  .band{padding-block:clamp(64px,5.4vw,136px)}
  .fig-bleed img{height:clamp(460px,31vw,820px)}
  .art-shell{grid-template-columns:minmax(0,var(--measure)) minmax(420px,1fr)}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
}
@media print{ .signbar,.supporters{display:none} body{background:#fff;color:#000} }

/* 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-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){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}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit-panels{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px;width:100%}
.mapkit-panels>svg.mapkit{width:100%;height:auto;display:block}
@media (max-width:700px){.mapkit-panels{grid-template-columns:minmax(0,1fr)}}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#F4EFE4;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* 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;}

/* op-overflow-text: a.entity-ref overhung the viewport by 291px at 320 on
   1869-red-stockings.html — width 320px reaching x=338, white-space:nowrap,
   min-width:0px, inside p (block/nowrap,
   tracks none). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .entity-ref{white-space:normal;min-width:0;max-width:100%;overflow-wrap:anywhere}
}

/* op-money-columns: the supporters block ran one tile per row — 9 tiles,
   1058px at 390, 11% of the whole page. Two columns bring it to
   870px (18% shorter). Checked before writing: no new overflow, smallest mark still
   168px wide, longest blurb 1 lines, tile heights 110-173px.
   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 (.sup-group), 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-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sup-group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-group > * *{min-width:0!important;max-width:100%}
    .sup-group img,.sup-group svg{max-width:100%;height:auto}

}

/* op-blurb-rows: money blurbs ran to 4 rows at 390, 784px of tier across
   9 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){
  .sup-group .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
  .sup-group .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sup-group (5 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){
  .sup-group:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-edge-gutter: copy sat against the screen edge at phone width — div.fig-cap > p, span.credit — with no gutter at all
   (19 runs of text measured within 2px of the glass; 19 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 18px IS NOT MINE: it is the gutter this build already uses on its own full-width
   containers at the same width, taken as the median of them. Only the columns that TOUCH are
   padded — operator, on kaanet: "Only items needed padding are the ones touching edges of
   browsers ... Not globally." Phone widths only. */
@media (max-width:390px){
  div.fig-cap > p{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  span.credit{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
}

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:999px){
  div.fig-cap{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
@media (min-width:901px){
  .fig-offset .fig-cap{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > div.strip > img,
  article > figure.bleed.fig-bleed > img,
  article > figure.fig-offset > img,
  article.card-lg > a > img,
  article.card-sm > a > img,
  article.p1.piece > a > img,
  article.p2.piece > a > img,
  article.p3.piece > a > img,
  aside.art-rail > figure.fig-mat > img,
  div.art-body.art-main > figure.fig-offset > img,
  div.breakout > figure.fig-mat > img,
  div.dial-panel > figure.dp-fig > img,
  figure > a > img,
  figure.fig-cross > a > img,
  main > figure.bleed.fig-bleed > img,
  section > figure.bleed.fig-bleed > img){height:auto}
/* op-img-dims:end */

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}

.fig-cross.fig-cross a{max-width:100%!important;overflow:hidden}.fig-cross.fig-cross img{max-width:100%!important;height:auto!important}