/* Catfish Capital — "Alluvium"
   Palette roles: ground / panel / ink / accent (sodium amber) / secondary (river teal) / quiet */
:root{
  --ground:#0C0F0E;
  --panel:#141A18;
  --panel-2:#1B2320;
  --ink:#EFE9DB;
  --accent:#F2A007;          /* saturated, hue ~40  */
  --secondary:#3BB3A6;       /* saturated, hue ~175 */
  --quiet:#93A09A;
  --rule:#2A322F;

  --prose:74ch;
  --wide:1180px;
  --plate:1500px;
  --shell:1360px;

  --fs-body:19px;
  --fs-lead:22px;
  --lh:1.62;

  --display:"Libre Caslon Display", Georgia, "Times New Roman", serif;
  --text:"Spectral", Georgia, serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--text); font-size:var(--fs-body); line-height:var(--lh);
  font-weight:300; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--secondary)}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; letter-spacing:-.015em; line-height:1.06; margin:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
hr{border:0; border-top:1px solid var(--rule); margin:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- width system: prose · wide · plate · bleed ---------- */
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:22px}
.prose{width:100%; max-width:var(--prose); margin-inline:auto; padding-inline:22px}
.wide{width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:22px}
.plate{width:100%; max-width:var(--plate); margin-inline:auto; padding-inline:22px}
.bleed{width:100%}

/* ---------- icon system (24px grid, currentColor, 1.6 stroke) ---------- */
.ico{width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.16em}
.ico-lg{width:44px; height:44px; stroke-width:1.4}
.ico-xl{width:74px; height:74px; stroke-width:1.1}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--rule)}
.mast-in{display:flex; align-items:flex-end; justify-content:center; gap:20px; padding:30px 0 16px}
.mast-name{font-family:var(--display); font-size:clamp(42px,7.4vw,104px); line-height:.86; margin:0}
.mast-name a{color:var(--ink)}
.gauge{width:clamp(18px,1.5vw,30px); height:auto; stroke:var(--accent); fill:none; stroke-width:2; flex:none}
.mast-line{margin:10px auto 0; max-width:58ch; text-align:center; color:var(--quiet);
  font-style:italic; font-size:16px; padding-inline:22px}
.mast--compact .mast-in{padding:18px 0 12px}
.mast--compact .mast-name{font-size:clamp(30px,3.4vw,50px)}
.mast--compact .mast-line{display:none}

/* nav: six ruled cells */
.nav{border-top:1px solid var(--rule)}
.nav ul{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); list-style:none; margin:0; padding:0}
.nav li{border-right:1px solid var(--rule)}
.nav li:last-child{border-right:0}
.nav a{display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 8px;
  color:var(--ink); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; text-align:center}
.nav a:hover{background:var(--panel); color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent)}
.nav .ico{opacity:.85}

/* ---------- homepage bands ---------- */
.band{border-bottom:1px solid var(--rule); padding:clamp(34px,4vw,84px) 0}
.band--flush{padding:0}
.band--panel{background:var(--panel)}
.kicker{display:flex; align-items:center; gap:9px; color:var(--accent);
  text-transform:uppercase; letter-spacing:.19em; font-size:12px; margin-bottom:14px}
.kicker--teal{color:var(--secondary)}

.opener{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1.1fr); gap:clamp(26px,3.2vw,74px); align-items:start}
.opener h1{font-size:clamp(34px,5.2vw,104px); line-height:.95}
.opener-cols{margin-top:clamp(20px,2vw,42px); columns:2; column-gap:clamp(22px,2.2vw,54px);
  column-rule:1px solid var(--rule); color:#CBC6B9}
.opener-cols p:first-child::first-letter{
  font-family:var(--display); float:left; font-size:3.5em; line-height:.76;
  padding:.05em .1em 0 0; color:var(--accent)}
.stageboard{border-left:1px solid var(--rule); padding-left:clamp(16px,1.6vw,34px)}
.stageboard dl{margin:0}
.stageboard dt{font-family:var(--display); font-size:clamp(34px,2.9vw,62px); line-height:.9; color:var(--accent)}
.stageboard dd{margin:7px 0 0; font-size:15.5px; color:var(--quiet)}
.stageboard div + div{margin-top:clamp(14px,1.3vw,26px); padding-top:clamp(14px,1.3vw,26px); border-top:1px solid var(--rule)}

/* lead feature */
.lead-feature{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(22px,2.6vw,60px); align-items:end}
.lead-feature h2{font-size:clamp(28px,3.4vw,66px)}
.lead-feature .dek{font-size:clamp(17px,1.05vw,21px); color:#C2BDB1; margin-top:16px}

/* seconds: two items, different weight, never a grid of equals */
.seconds{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,2.4vw,56px)}
.seconds article{display:flex; flex-direction:column; border-top:2px solid var(--accent); padding-top:14px}
.seconds article + article{border-top-color:var(--secondary)}
.seconds h3{font-size:clamp(20px,1.6vw,32px); line-height:1.12; margin-bottom:10px}
.seconds p{color:#A9B3AE; font-size:16.5px}
.seconds a.more{margin-top:auto; padding-top:12px; text-transform:uppercase; letter-spacing:.13em; font-size:12px}

/* quiet band: one line, nothing else */
.quiet-line{font-family:var(--display); font-size:clamp(24px,2.5vw,54px); line-height:1.22; margin:0}

/* section hub strip */
.hub{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:clamp(16px,1.6vw,34px)}
.hub a{display:flex; flex-direction:column; gap:10px; color:var(--ink);
  border-top:1px solid var(--rule); padding-top:14px; height:100%}
.hub a:hover{border-top-color:var(--accent)}
.hub .h-t{font-family:var(--display); font-size:clamp(18px,1.2vw,24px); line-height:1.14}
.hub .h-b{color:var(--quiet); font-size:15px; margin-top:auto}
.hub .ico-lg{color:var(--accent)}

/* ---------- figure system: three treatments, one drawing system ---------- */
figure{margin:0}
.figcap{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 26px; margin-top:11px}
.figcap .cap{flex:1 1 380px; min-width:0; font-size:16px; line-height:1.4; color:#CBC6B9}
.figcap .cred{flex:0 1 auto; margin-left:auto; font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#6E7A75; line-height:1.5}

/* 1 · plate — photograph sits on a mat with an inset hairline */
.fig-plate{background:var(--panel); padding:clamp(10px,.9vw,18px)}
.fig-plate img{width:100%; height:auto; box-shadow:0 0 0 1px rgba(239,233,219,.16)}
.fig-plate .figcap{padding:0 2px}

/* 2 · bleed — breaks the measure, caption row under it inside the shell */
.fig-bleed img{width:100%; height:clamp(300px,58vh,760px); object-fit:cover}
.fig-bleed .figcap{margin-top:12px}

/* 3 · inset — sits in the column, prose beside it, amber rule over the caption */
.fig-inset{float:right; width:min(46%,420px); margin:6px 0 20px 30px}
.fig-inset img{width:100%; height:auto}
.fig-inset .figcap{border-top:2px solid var(--accent); padding-top:9px; margin-top:10px; display:block}
.fig-inset .cap{font-size:15px; display:block}
.fig-inset .cred{display:block; margin:6px 0 0; font-size:11.5px}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:clamp(12px,1.2vw,26px)}
.gallery img{width:100%; height:100%; aspect-ratio:8/5; object-fit:cover}

/* ---------- map ---------- */
.map-figure{background:var(--panel); padding:clamp(12px,1.2vw,26px)}
.map-slot{position:relative}
.map-slot svg{width:100%; height:auto; display:block}
.map-land{fill:#1E2724; stroke:#3C4844; stroke-width:1.4}
.map-pin circle{fill:var(--accent); stroke:var(--ground); stroke-width:3}
.map-pin text{font-family:var(--text); font-size:26px; fill:var(--ink)}
.map-pin:hover circle{fill:var(--secondary)}
.map-grid{display:grid; grid-template-columns:minmax(0,2.3fr) minmax(0,1fr); gap:clamp(22px,2.6vw,64px); align-items:start}

/* ---------- article ---------- */
.art-head{padding:clamp(26px,3vw,64px) 0 0}
.art-head h1{font-size:clamp(31px,4vw,80px); line-height:.99}
.lead{font-size:var(--fs-lead); line-height:1.45; color:#C6C1B4; font-style:italic; margin-top:20px}
.art-body{padding:clamp(26px,3vw,64px) 0 clamp(44px,5vw,110px)}
.art-body h2{font-size:clamp(23px,1.9vw,38px); line-height:1.12; margin:1.7em 0 .55em}
.art-body h2:first-child{margin-top:0}
.art-body p{max-width:none}
.art-body a{border-bottom:1px solid rgba(242,160,7,.35)}
.art-body::after{content:""; display:block; clear:both}

.pullquote{margin:clamp(24px,2.4vw,50px) 0; padding:clamp(16px,1.6vw,32px) 0;
  border-top:2px solid var(--accent); border-bottom:2px solid var(--accent)}
.pullquote p{font-family:var(--display); font-size:clamp(22px,1.8vw,38px); line-height:1.2; margin:0; font-style:normal}
.callout{background:var(--panel); border-left:3px solid var(--secondary); padding:clamp(16px,1.4vw,26px); margin:clamp(20px,2vw,40px) 0}
.callout p{margin:0; font-size:17.5px}
.note{color:var(--quiet); font-size:16.5px}
.blockquote{margin:clamp(20px,2vw,40px) 0; padding-left:22px; border-left:1px solid var(--rule)}
.blockquote p{font-style:italic}
.blockquote cite{display:block; margin-top:8px; font-size:14px; font-style:normal; color:var(--quiet)}

/* notes-for-design material — breaks out wider than the prose */
.breakout{max-width:var(--wide); margin:clamp(28px,3vw,64px) auto; padding-inline:22px}
.notes-panel{background:var(--panel); padding:clamp(18px,2vw,40px)}
.notes-panel h3{font-size:clamp(19px,1.3vw,26px); margin-bottom:16px}
.notes-panel > .kicker{margin-bottom:10px}

.timeline{list-style:none; margin:0; padding:0}
.timeline li{display:grid; grid-template-columns:minmax(120px,.32fr) minmax(0,1fr); gap:8px 26px;
  padding:13px 0; border-top:1px solid var(--rule); align-items:baseline}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--display); color:var(--accent); font-size:17.5px; line-height:1.2}
.t-what{font-size:16.5px; color:#C6C1B4}

.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(14px,1.4vw,30px)}
.statblock{display:flex; flex-direction:column; gap:8px; border-top:2px solid var(--accent); padding-top:12px}
.stat-num{font-family:var(--display); font-size:clamp(26px,2.1vw,44px); line-height:1}
.stat-label{font-size:15.5px; color:var(--quiet)}

.deflist{margin:0}
.deflist div{padding:12px 0; border-top:1px solid var(--rule)}
.deflist div:first-child{border-top:0}
.deflist dt{font-family:var(--display); font-size:18px; color:var(--secondary)}
.deflist dd{margin:5px 0 0; font-size:16.5px; color:#C6C1B4}

/* tables */
.datatable,.versus{width:100%; border-collapse:collapse; font-size:16.5px}
.datatable th,.datatable td,.versus th,.versus td{text-align:left; padding:11px 14px; border-top:1px solid var(--rule)}
.datatable thead th,.versus thead th{border-top:0; color:var(--accent);
  text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:400}
.chart figcaption{margin-top:10px; font-size:15px; color:var(--quiet)}

/* cards / references */
.profile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(14px,1.4vw,30px)}
.profile-card{display:flex; flex-direction:column; background:var(--panel); padding:16px; height:100%}
.profile-card .p-photo{width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:12px}
.profile-card h3{font-size:21px; margin-bottom:4px}
.profile-card .p-role{color:var(--secondary); font-size:14px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px}
.profile-card .p-links{margin-top:auto; padding-top:10px; font-size:14.5px}
.org-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:12px}
.org-card{display:flex; flex-direction:column; gap:4px; background:var(--panel); padding:14px; color:var(--ink)}
.org-name{font-family:var(--display); font-size:18px}
.org-host{font-size:13px; color:var(--quiet)}
.entity-ref{white-space:nowrap}

.further-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(14px,1.4vw,28px)}
.further-grid a{display:flex; flex-direction:column; gap:8px; color:var(--ink);
  border-top:1px solid var(--rule); padding-top:13px; min-height:100%; font-family:var(--display); font-size:19px; line-height:1.16}
.further-grid a:hover{border-top-color:var(--accent)}
.related-links{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.related-links li{border-top:1px solid var(--rule); padding-top:12px}
.related-links a{font-family:var(--display); font-size:19px; line-height:1.18}

/* card grid (category / archive) — even height */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:clamp(16px,1.7vw,36px)}
.card{display:flex; flex-direction:column; height:100%; background:var(--panel)}
.card img{width:100%; aspect-ratio:8/5; object-fit:cover}
.card-in{display:flex; flex-direction:column; flex:1; padding:16px 16px 18px}
.card h3{font-size:clamp(19px,1.15vw,23px); line-height:1.15; min-height:2.3em; margin-bottom:9px}
.card h3 a{color:var(--ink)}
.card p{color:#A9B3AE; font-size:16px}
.card .card-foot{margin-top:auto; padding-top:12px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--secondary)}

.cat-list{list-style:none; margin:0; padding:0}
.cat-list li{border-top:1px solid var(--rule); padding:15px 0}
.cat-list a{font-family:var(--display); font-size:clamp(19px,1.3vw,26px); line-height:1.16; color:var(--ink)}
.cat-list a:hover{color:var(--accent)}
.cat-list span{display:block; color:var(--quiet); font-size:16px; margin-top:6px; max-width:80ch}

/* CSS-only expander for long lists */
.expander{border-top:1px solid var(--rule)}
.expander input{position:absolute; opacity:0; pointer-events:none}
.expander .more-items{display:none}
.expander input:checked ~ .more-items{display:block}
.expander label{display:inline-block; margin-top:14px; cursor:pointer; color:var(--accent);
  text-transform:uppercase; letter-spacing:.13em; font-size:12px}
.expander input:checked ~ label{color:var(--quiet)}

/* ---------- supporters ---------- */
.supporters{border-top:1px solid var(--rule); padding-top:14px}
.supporters .kicker{margin-bottom:14px}
.sponsor-row{display:grid; grid-template-columns:repeat(auto-fit,260px); gap:14px; justify-content:start}
.sponsor{display:flex; flex-direction:column; gap:10px; width:260px;
  background:#0A0C0B; border:1px solid var(--rule); padding:14px}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{width:100%; max-width:100%; height:auto; max-height:46px; object-fit:contain; margin:0 auto}
.sponsor-blurb{font-size:14.5px; line-height:1.45; color:var(--quiet)}
.sponsor-name{font-family:var(--display); font-size:17px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule); padding:clamp(28px,3vw,60px) 0}
.foot-in{display:flex; flex-wrap:wrap; gap:18px 40px; align-items:baseline; justify-content:space-between}
.foot-name{font-family:var(--display); font-size:clamp(20px,1.5vw,30px)}
.foot-line{color:var(--quiet); font-size:16px; max-width:60ch}
.foot nav{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13px;
  text-transform:uppercase; letter-spacing:.11em}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .opener,.lead-feature,.seconds,.map-grid,.profile-grid{grid-template-columns:minmax(0,1fr)}
  .opener-cols{columns:1}
  .stageboard{border-left:0; border-top:1px solid var(--rule); padding-left:0; padding-top:20px}
  .nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav li{border-bottom:1px solid var(--rule)}
  .nav li:nth-child(2n){border-right:0}
  .fig-inset{float:none; width:100%; margin:20px 0}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .sponsor-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .sponsor{width:auto}
  .figcap .cred{margin-left:0}
}
@media (max-width:420px){
  :root{--fs-body:17.5px; --fs-lead:19px}
  .shell,.prose,.wide,.plate{padding-inline:16px}
}

/* ---------- large displays: each step gains something real ---------- */
@media (min-width:1200px){
  :root{--fs-body:19.5px; --fs-lead:23px; --prose:76ch; --wide:1240px; --plate:1560px; --shell:1440px}
  .fig-inset{width:min(42%,440px)}
}
@media (min-width:1600px){
  :root{--fs-body:20.5px; --fs-lead:25px; --prose:80ch; --wide:1420px; --plate:1800px; --shell:1680px}
  .opener-cols{columns:2}
  .cards{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  .fig-bleed img{height:clamp(420px,62vh,900px)}
}
@media (min-width:2000px){
  :root{--fs-body:21.5px; --fs-lead:27px; --prose:84ch; --wide:1680px; --plate:2140px; --shell:2000px}
  .opener-cols{columns:3}
  .figcap .cap{flex-basis:600px}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
}
@media (min-width:2560px){
  :root{--fs-body:23px; --fs-lead:29px; --prose:88ch; --wide:1980px; --plate:2500px; --shell:2380px}
  .art-body{padding-block:clamp(44px,4vw,120px)}
  .fig-bleed img{height:min(64vh,1100px)}
}

@media print{
  body{background:#fff; color:#000}
  .nav,.supporters,.foot nav{display:none}
}

/* map column + sponsor tiers */
.map-col{max-width:520px; width:100%}
.map-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.sponsor.feat{border-color:var(--secondary)}
.stageboard .kicker{margin-bottom:16px}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (min-width:2000px){ .map-col{max-width:640px} }

.map-land{fill:#1B2320; stroke:#465350; stroke-width:1.6}
.map-pin text{font-size:24px; fill:#EFE9DB; paint-order:stroke; stroke:#0C0F0E; stroke-width:5px; stroke-linejoin:round}
.map-pin:hover text{fill:var(--secondary)}

.art-body .prose::after{content:""; display:block; clear:both}
.art-head + .fig-bleed{margin-top:clamp(22px,2.4vw,52px)}
.art-body > .breakout:last-child{margin-bottom:0}

/* map labels sized for the rendered width; credit line to AA */
.map-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.map-col{max-width:640px}
.map-pin circle{r:14}
.map-pin text{font-size:44px; stroke-width:8px}
.figcap .cred{color:#8A958F}
@media (min-width:1600px){ .map-col{max-width:760px} }
@media (min-width:2000px){ .map-col{max-width:860px} }
@media (max-width:900px){ .map-col{max-width:none} }

.lead-feature{align-items:start}
.pinlist{list-style:none; margin:clamp(22px,2.2vw,40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:0 clamp(18px,1.8vw,38px)}
.pinlist li{border-top:1px solid var(--rule); padding:11px 0}
.pinlist a{font-family:var(--display); font-size:clamp(17px,1.05vw,21px); color:var(--ink)}
.pinlist a:hover{color:var(--accent)}
.pinlist span{display:block; color:var(--quiet); font-size:15px; line-height:1.35; margin-top:3px}

/* text over the photograph */
.fig-overlay{position:relative}
.fig-overlay img{height:clamp(420px,66vh,860px)}
.fig-overlay .overlay{position:absolute; inset:auto 0 0 0; padding:clamp(26px,4vw,80px) 0 clamp(20px,2.4vw,48px);
  background:linear-gradient(to top, rgba(12,15,14,.94) 12%, rgba(12,15,14,.7) 52%, rgba(12,15,14,0))}
.fig-overlay .quiet-line{max-width:26ch; text-wrap:pretty}
.fig-overlay .overlay-foot{display:flex; flex-wrap:wrap; gap:10px 32px; align-items:baseline;
  justify-content:space-between; margin-top:clamp(16px,1.6vw,30px)}
.fig-overlay .overlay-foot a{font-size:15px; letter-spacing:.11em; text-transform:uppercase}
@media (max-width:700px){ .fig-overlay img{height:clamp(460px,80vh,700px)} .fig-overlay .quiet-line{max-width:none; font-size:21px} }

/* section plates */
.hub{gap:clamp(18px,1.8vw,38px)}
.hub a{gap:14px}
.hub-plate{display:flex; align-items:center; justify-content:center;
  width:clamp(72px,5vw,104px); aspect-ratio:1; background:var(--panel); border:1px solid var(--rule)}
.hub-ico{width:66%; height:66%; stroke:var(--accent); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.hub a:hover .hub-plate{border-color:var(--accent); background:#19211E}
.hub a:hover .hub-ico{stroke:var(--secondary)}

/* masthead standfirst on one row where it fits */
.mast-line{max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:820px){ .mast-line{white-space:normal; max-width:52ch} }

/* small list links read better in the text face than the display cut */
.related-links a,.pinlist a{font-family:var(--text); font-weight:400; font-size:17.5px; line-height:1.35}
@media (min-width:1600px){ .related-links a,.pinlist a{font-size:18.5px} }

/* supporters: wider, centred, still one constant tile width */
.sponsor-row{grid-template-columns:repeat(auto-fit,300px); justify-content:center; gap:18px}
.sponsor{width:300px; padding:18px}
.sponsor img{max-height:52px}
.supporters .kicker{justify-content:center}
@media (max-width:900px){
  .sponsor-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .sponsor{width:auto}
}

/* pin legend: fills the column, keyed to the map */
.pinlist{gap:0 clamp(22px,2.2vw,46px); margin-top:clamp(26px,2.6vw,48px)}
.pinlist li{position:relative; padding:15px 0 15px 26px}
.pinlist li::before{content:""; position:absolute; left:0; top:22px; width:9px; height:9px;
  border-radius:50%; background:var(--accent)}
.pinlist a{font-size:19px}
.pinlist span{font-size:16px; margin-top:5px}
@media (min-width:1600px){
  .pinlist li{padding-block:19px}
  .pinlist a{font-size:21px}
  .pinlist span{font-size:17px}
}

.fig-overlay .quiet-line{text-shadow:0 2px 18px rgba(12,15,14,.9), 0 1px 3px rgba(12,15,14,.85)}
.fig-overlay .overlay-foot a,.fig-overlay .overlay-foot .cred{text-shadow:0 1px 10px rgba(12,15,14,.9)}

/* closing band: the five sections */
.band--close{border-bottom:0; padding-block:clamp(40px,4.6vw,104px)}
.hub-head{font-size:clamp(26px,3vw,64px); margin-bottom:clamp(24px,2.4vw,52px)}
.hub{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:1px; background:var(--rule)}
.hub a{background:var(--panel); border-top:0; padding:clamp(18px,1.8vw,32px); gap:12px; transition:background .15s}
.hub a:hover{background:#1B2320}
.hub-top{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:4px}
.hub-no{font-family:var(--display); font-size:clamp(26px,2vw,40px); line-height:1; color:var(--quiet)}
.hub a:hover .hub-no{color:var(--accent)}
.hub-plate{width:clamp(56px,3.6vw,78px); border-color:#39443F; background:#101614}
.hub .h-t{font-size:clamp(19px,1.35vw,27px)}
.hub .h-b{margin-top:0}
.hub-foot{margin-top:auto; padding-top:14px; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--secondary)}
.hub-archive .hub-foot{color:var(--accent)}
.hub-archive .hub-no{font-size:clamp(17px,1.1vw,22px); letter-spacing:.1em; text-transform:uppercase}

.mast-line{padding:0 22px clamp(16px,1.6vw,30px)}

@media (max-width:760px){ .band--panel h2{white-space:normal !important} }

/* ---- phone corrections (must sit after the later desktop rules) ---- */
@media (max-width:900px){
  .map-grid{grid-template-columns:minmax(0,1fr) !important}
  .map-col{max-width:none !important}
  .pinlist{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
  .nav a{min-height:52px}
  .figcap .cred,.overlay-foot .cred{font-size:13px}
  .kicker{font-size:12.5px}
  .hub-foot,.card .card-foot{font-size:12.5px}
  .sponsor-row{justify-content:stretch}
}
@media (max-width:520px){
  .mast-in{gap:12px}
  .fig-overlay img{height:clamp(420px,72vh,620px)}
  .fig-overlay .quiet-line{font-size:22px; line-height:1.28}
  .hub a{padding:18px}
}

@media (max-width:900px){
  .map-pin text{font-size:74px; stroke-width:12px}
  .map-pin circle{r:20}
  .map-land{stroke-width:3}
}

/* supporters: flexible tracks so the last row fills and heights match */
.sponsor-row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); align-items:stretch}
.sponsor{width:auto; justify-content:flex-start}
.sponsor-name{color:var(--ink); text-align:center; line-height:1.25}
.sponsor .sponsor-blurb{margin-top:auto}
@media (max-width:900px){ .sponsor-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }

/* known slot counts: every row fills at every width */
.sponsor-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sponsor-row--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){ .sponsor-row--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .sponsor-row--3,.sponsor-row--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sponsor-row--3 .sponsor:last-child{grid-column:1 / -1}
}
@media (max-width:440px){
  .sponsor-row--3,.sponsor-row--4{grid-template-columns:minmax(0,1fr)}
  .sponsor-row--3 .sponsor:last-child{grid-column:auto}
}

.sponsor img{max-height:44px; opacity:.9}
.sponsor:hover img{opacity:1}
.sponsor-name{font-size:18px; margin-top:2px}

/* map: real land/water separation (2.6:1 land against water) */
.map-water{fill:#0B100F}
.map-land{fill:#46534E; stroke:#8A968F; stroke-width:2.4}
.map-figure{background:#0B100F}
.map-pin circle{stroke:#0B100F}
@media (max-width:900px){ .map-land{stroke-width:4} }

/* definition terms read as text, not display */
.deflist dt{font-family:var(--text); font-weight:600; font-size:17.5px; letter-spacing:0; line-height:1.35}

/* closing cards: three across wherever they fit, never an orphan */
.art-body .cards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.4vw,28px)}
.art-body .card h3{font-size:clamp(17px,1.05vw,21px); min-height:0}
.art-body .card p{font-size:15.5px}
@media (max-width:820px){ .art-body .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-body .card:last-child{grid-column:1 / -1} }
@media (max-width:520px){ .art-body .cards{grid-template-columns:minmax(0,1fr)}
  .art-body .card:last-child{grid-column:auto} }

.nav a{min-height:52px}

.nav li{display:flex}
.nav a{flex:1}

.card-foot{display:flex; align-items:center; gap:7px}
.card-foot .ico{width:1em; height:1em}

/* 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-mark-panel: Design set no ground on the mark, so light and dark logos cannot
   both read against the page. Give every mark the same dark plate and an inset — and
   GROW the box by that inset so the artwork keeps the size Design chose. */
.sponsor img,.sponsor-box img,.sp-logo img{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:62px!important;max-height:62px!important;width:100%!important;object-fit:contain!important;border-radius:2px}

/* 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__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#EDE8DC;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:13.3}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */


/* op-nav-collapse: this nav printed 175px of stacked links at 390 before any content
   (6 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 "inset-box", bold, 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 (0px measured) the button carries the build's
   gutter (22px) 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 "display" technique and marked with the "bars" icon — the mechanism
   is deliberately not identical across the fleet either. */
.index-toggle{display:none}
@media (max-width:940px){
  .index-toggle{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;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;border:1px solid currentColor;border-radius:2px;padding:10px 15px;margin-inline:22px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .index-toggle-bars{width:15px;height:9px;flex:none;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-shadow:inset 0 3.5px 0 -1px currentColor}
  .nav{display:none}
  .index-toggle-c:checked ~ .nav{display:block}
  .mast:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 7 tiles,
   1291px at 390, 13% of the whole page. Two columns bring it to
   838px (35% shorter). Checked before writing: no new overflow, smallest mark still
   131px wide, longest blurb 4 lines, tile heights 162-228px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. 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-row.sponsor-row--3, .sponsor-row.sponsor-row--4), 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-row.sponsor-row--3{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-row.sponsor-row--3 > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row.sponsor-row--3 > * *{min-width:0!important;max-width:100%}
    .sponsor-row.sponsor-row--3 img,.sponsor-row.sponsor-row--3 svg{max-width:100%;height:auto}
  .sponsor-row.sponsor-row--4{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-row.sponsor-row--4 > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row.sponsor-row--4 > * *{min-width:0!important;max-width:100%}
    .sponsor-row.sponsor-row--4 img,.sponsor-row.sponsor-row--4 svg{max-width:100%;height:auto}
  .sponsor-row.sponsor-row--3 .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-row.sponsor-row--4 .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 4 rows at 390, 452px 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-row.sponsor-row--4 .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:66px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-row.sponsor-row--3 (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-row.sponsor-row--3:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
.card h2:where(.rt-h3) a{color: var(--ink);}
div:where(.rt-h1){font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.06; margin: 0px;}
h2:where(.rt-h3){font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.06; margin: 0px;}
.art-head div:where(.rt-h1){font-size: clamp(31px, 4vw, 80px); line-height: 0.99;}
.card h2:where(.rt-h3){font-size: clamp(19px, 1.15vw, 23px); line-height: 1.15; min-height: 2.3em; margin-bottom: 9px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.card > a > img,
  figure.fig-inset > a > img,
  figure.fig-plate > a > img,
  main > figure.fig-bleed > img,
  section.band.band--flush > figure.fig-bleed > img,
  section.band.band--flush > figure.fig-bleed.fig-overlay > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sponsor-row.sponsor-row--4 (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){
  .sponsor-row.sponsor-row--4:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* 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}
[data-partner] img{background:transparent!important}