/* Boxnutt — Postmortem
   Palette roles:
   --ground  near-black page ground
   --ink     warm off-white text
   --accent  amber signal (saturated, hue ~40) — indicators, kickers, one full band
   --second  cyan (saturated, hue ~185) — protocol/data material, panel grounds
   --flag    red (saturated, hue ~0)  — "stopped working" markers only
*/
:root{
  --ground:#0E0F11;
  --panel:#181A1E;
  --panel-2:#22252A;
  --ink:#F1EFE9;
  --muted:rgba(241,239,233,.62);
  --rule:rgba(241,239,233,.20);
  --accent:#FFAA00;
  --second:#14C4C4;
  --flag:#E5484D;

  --prose:72ch;
  --wide:1180px;
  --gutter:20px;
  --body:17px;
  --side:0.55fr;

  --display:'Bricolage Grotesque','Syne',system-ui,sans-serif;
  --brand:'Syne',system-ui,sans-serif;
  --text:'Spectral',Georgia,serif;
}
@media (min-width:700px){ :root{ --gutter:34px; --body:17.5px; } }
@media (min-width:1000px){ :root{ --gutter:48px; --wide:1180px; } }
@media (min-width:1200px){ :root{ --gutter:56px; --wide:1320px; --body:18px; } }
@media (min-width:1600px){ :root{ --gutter:72px; --wide:1520px; --prose:78ch; --body:19px; --side:0.8fr; } }
@media (min-width:2100px){ :root{ --gutter:96px; --wide:1840px; --prose:82ch; --body:20.5px; --side:0.95fr; } }

*,*::before,*::after{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(--body); line-height:1.62;
  text-wrap:pretty; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(255,170,0,.38)}
a:hover{color:var(--second); border-bottom-color:var(--second)}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.022em; line-height:1.06; margin:0}
.icon{width:1.35em; height:1.35em; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.wrap{width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter)}
.kicker{font-family:var(--display); font-weight:600; font-size:clamp(12px,.8vw,15px); letter-spacing:.17em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:.6em; margin:0 0 12px}
.kicker a{color:inherit; border:0}
.eyebrow{font-family:var(--display); font-weight:600; font-size:clamp(11px,.72vw,14px); letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule)}
.mast-top{display:flex; align-items:center; gap:clamp(14px,1.6vw,34px); padding:clamp(18px,2vw,40px) 0 clamp(14px,1.4vw,26px); flex-wrap:wrap}
.wordmark{display:flex; align-items:center; gap:14px; border:0}
.wordmark:hover{border:0}
.wordmark svg{width:clamp(24px,2.1vw,44px); height:auto; color:var(--accent)}
.wordmark span{font-family:var(--brand); font-weight:800; font-size:clamp(30px,3.5vw,74px); line-height:.88; letter-spacing:-.035em; color:var(--ink); text-transform:uppercase}
.standfirst{margin:0 0 0 auto; flex:0 1 34ch; font-size:clamp(14px,.95vw,19px); line-height:1.4; color:var(--muted); font-style:italic}
.nav{border-top:1px solid var(--rule)}
.nav ul{display:flex; flex-wrap:wrap; gap:clamp(12px,1.8vw,40px); list-style:none; margin:0; padding:11px 0}
.nav a{display:flex; align-items:center; gap:.5em; color:var(--ink); border:0; font-family:var(--display); font-weight:600; font-size:clamp(12px,.82vw,16px); letter-spacing:.13em; text-transform:uppercase}
.nav a .icon{color:var(--accent); transition:color .2s}
.nav a:hover{color:var(--accent)}
.nav a:hover .icon{color:var(--second)}
.nav a[aria-current]{color:var(--accent); box-shadow:0 2px 0 var(--accent)}
.nav a[aria-current] .icon{color:var(--second)}
.nav .to-archive{margin-left:auto}
.nav .to-archive a{color:var(--muted)}

/* ---------- year-pair device ---------- */
.span-mark{display:inline-flex; align-items:center; gap:.42em; font-family:var(--display); font-weight:800; letter-spacing:-.04em; color:var(--ink)}
.span-mark svg{width:2.1em; height:.5em; color:var(--accent); stroke:currentColor; stroke-width:2.4; fill:none; stroke-linecap:square}
.span-mark.flagged svg{color:var(--flag)}

/* ---------- homepage lead ---------- */
.lead-band{position:relative; border-bottom:1px solid var(--rule); display:flex; align-items:flex-end; min-height:clamp(430px,78vh,1000px); overflow:hidden}
.lead-figure{position:absolute; inset:0; margin:0}
.lead-figure img{width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.04)}
.lead-shade{position:absolute; inset:0; background:linear-gradient(64deg,rgba(14,15,17,.97) 0%,rgba(14,15,17,.9) 38%,rgba(14,15,17,.55) 70%,rgba(14,15,17,.2) 100%)}
.lead-content{position:relative; width:100%; padding:clamp(90px,16vh,240px) 0 0}
.lead-inner{padding-bottom:clamp(18px,2.4vw,54px); max-width:min(100%,52ch)}
.lead-copy h1 a,.lead-content h1 a{color:inherit; border:0}
.lead-copy h1 a:hover,.lead-content h1 a:hover{color:var(--accent)}
.lead-credit{margin:clamp(16px,1.8vw,38px) 0 0}
.lead-content h1{font-size:clamp(30px,4.2vw,104px); line-height:.98}
.lead-content .years{font-size:clamp(26px,3vw,64px); margin-bottom:clamp(10px,1.2vw,24px)}
.lead-copy h1{font-size:clamp(30px,4.2vw,104px); line-height:.98}
.lead-copy .years{font-size:clamp(26px,3vw,64px); margin-bottom:clamp(10px,1.2vw,24px)}
.lead-dek{margin:clamp(12px,1.2vw,26px) 0 0; font-size:clamp(16px,1.12vw,24px); line-height:1.45; color:rgba(241,239,233,.9)}
.lead-facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(12px,1.2vw,24px); width:min(76ch, calc(100vw - 2*var(--gutter))); margin:clamp(18px,1.9vw,40px) 0 0; padding:clamp(12px,1.2vw,24px) 0 0; list-style:none; border-top:1px solid rgba(241,239,233,.38)}
.lead-facts li{padding:0 clamp(14px,1.6vw,36px); border-left:1px solid rgba(241,239,233,.2);
  font-family:var(--display); font-weight:700; font-size:clamp(16px,1.15vw,26px); line-height:1.1; letter-spacing:-.015em; font-variant-numeric:tabular-nums}
.lead-facts li:nth-child(odd){padding-left:0; border-left:0}
@media (min-width:1100px){
  .lead-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lead-facts li:nth-child(odd){padding-left:clamp(14px,1.6vw,36px); border-left:1px solid rgba(241,239,233,.2)}
  .lead-facts li:first-child{padding-left:0; border-left:0}
}
.lead-facts b{display:block; font-family:var(--display); font-weight:600; font-size:clamp(9.5px,.66vw,12.5px); letter-spacing:.17em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; line-height:1.25}
.lead-facts .dead{color:var(--flag)}

.figcredit{font-family:var(--display); font-size:clamp(10.5px,.68vw,13px); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* ---------- signature triptych ---------- */
.signature{border-bottom:1px solid var(--rule); padding:clamp(34px,4vw,96px) 0}
.sig-head{display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(18px,2vw,48px); flex-wrap:wrap; margin-bottom:clamp(20px,2.2vw,48px)}
.sig-head h2{font-size:clamp(24px,2.6vw,60px); max-width:26ch}
.sig-head p{margin:0; flex:0 1 42ch; color:var(--muted)}
.trip{display:grid; gap:clamp(14px,1.5vw,30px); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.trip a{border:0; display:flex; flex-direction:column; background:var(--panel); height:100%}
.trip a:hover .trip-year{color:var(--accent)}
.trip figure{margin:0; position:relative}
.trip img{width:100%; aspect-ratio:16/10; object-fit:cover}
.trip .trip-year{position:absolute; left:clamp(10px,1vw,22px); bottom:clamp(6px,.6vw,14px); font-family:var(--display); font-weight:800; font-size:clamp(42px,4.4vw,104px); line-height:.85; letter-spacing:-.05em; color:var(--ink); text-shadow:0 2px 26px rgba(14,15,17,.85)}
.trip .trip-body{padding:clamp(14px,1.3vw,28px); display:flex; flex-direction:column; gap:8px; flex:1}
.trip h3{font-size:clamp(18px,1.35vw,30px); line-height:1.1; color:var(--ink)}
.trip p{margin:0; font-size:clamp(14.5px,.92vw,19px); color:var(--muted); line-height:1.45}

/* ---------- picks band ---------- */
.picks{padding:clamp(34px,4vw,96px) 0; border-bottom:1px solid var(--rule)}
.picks-grid{display:grid; gap:clamp(20px,2.4vw,56px); grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr)); align-items:start}
.pick{border:0; display:flex; flex-direction:column; gap:12px}
.pick img{width:100%; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--rule)}
.pick h3{font-size:clamp(21px,1.7vw,38px); line-height:1.08; color:var(--ink)}
.pick p{margin:0; color:var(--muted); font-size:clamp(15px,.98vw,20px)}
.pick:hover h3{color:var(--accent)}
.stack{display:flex; flex-direction:column; gap:clamp(16px,1.6vw,34px)}
.stack-item{border-top:1px solid var(--rule); padding-top:12px; display:block; border-bottom:0}
.stack-item h3{font-size:clamp(17px,1.2vw,26px); line-height:1.12; color:var(--ink); margin-bottom:5px}
.stack-item p{margin:0; color:var(--muted); font-size:clamp(14.5px,.9vw,18px)}
.stack-item:hover h3{color:var(--accent)}

/* ---------- quiet accent band ---------- */
.quiet{background:var(--accent); color:#141210; padding:clamp(30px,3.8vw,96px) 0}
.quiet-in{display:grid; gap:clamp(20px,2.4vw,64px); grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .quiet-in{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start} }
.quiet-mark{display:block; width:clamp(52px,5vw,110px); color:rgba(20,18,16,.55); margin-bottom:clamp(12px,1.2vw,26px)}
.quiet-mark svg{width:100%; height:auto}
.quiet-main p{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(24px,2.7vw,60px); line-height:1.03; letter-spacing:-.028em; max-width:30ch}
.quiet-side{border-top:2px solid rgba(20,18,16,.35); padding-top:14px}
@media (min-width:900px){ .quiet-side{border-top:0; border-left:1px solid rgba(20,18,16,.32); padding:4px 0 0 clamp(20px,2vw,48px)} }
.quiet-side .eyebrow{color:rgba(20,18,16,.6); display:block; margin:0 0 10px}
.quiet-side .small{margin:0; font-size:clamp(15px,1vw,21px); line-height:1.5; color:rgba(20,18,16,.82); max-width:44ch}

/* ---------- sections hub ---------- */
.hub{padding:clamp(34px,4vw,96px) 0}
.hub-grid{display:grid; gap:1px; background:var(--rule); grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); border:1px solid var(--rule)}
.hub-cell{background:var(--ground); padding:clamp(18px,1.8vw,38px); display:flex; flex-direction:column; gap:10px; border:0}
.hub-cell:hover{background:var(--panel)}
.hub-no{font-family:var(--display); font-weight:800; font-size:clamp(12px,.8vw,15px); letter-spacing:.1em; color:var(--second)}
.hub-cell h3{font-size:clamp(19px,1.4vw,31px); line-height:1.1; color:var(--ink)}
.hub-cell p{margin:0; color:var(--muted); font-size:clamp(14.5px,.92vw,19px)}
.hub-cell .icon{width:26px; height:26px; color:var(--accent)}
.hub-count{font-family:var(--display); font-size:clamp(11px,.72vw,14px); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:auto}

/* ---------- supporters ---------- */
.supporters{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(30px,3.4vw,80px) 0; background:var(--panel)}
.sup-in{display:grid; gap:clamp(20px,2.2vw,56px); grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){ .sup-in{grid-template-columns:minmax(200px,258px) minmax(0,1fr)} }
.sup-side h2{font-size:clamp(20px,1.5vw,34px); margin-bottom:10px}
.sup-side p{margin:0; color:var(--muted); font-size:clamp(14px,.9vw,18px); max-width:34ch}
.sup-slots{display:flex; flex-direction:column; gap:clamp(12px,1.2vw,24px)}
.sponsor-tier{display:flex; flex-wrap:wrap; gap:clamp(12px,1.2vw,24px)}
.sponsor-tier.roll{gap:clamp(12px,1.2vw,24px)}
.sponsor{flex:0 0 min(100%,364px); width:364px; max-width:100%; min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#0B0C0E; border:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:16px}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{height:auto; max-height:40px; width:100%; max-width:100%; object-fit:contain}
.sponsor .sponsor-name{display:block; width:100%; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (min-width:1600px){ .sponsor{flex-basis:min(100%,400px); width:400px} }

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule); padding:clamp(28px,3vw,72px) 0 clamp(34px,3.4vw,80px); margin-top:clamp(30px,3.4vw,80px)}
.foot-in{display:flex; gap:clamp(22px,3vw,80px); flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
.foot p{margin:8px 0 0; color:var(--muted); max-width:52ch; font-size:clamp(14.5px,.92vw,19px)}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(12px,1.4vw,32px); font-family:var(--display); font-weight:600; font-size:clamp(11px,.74vw,14px); letter-spacing:.15em; text-transform:uppercase}
.foot ul a{color:var(--muted); border:0}
.foot ul a:hover{color:var(--accent)}

/* ---------- article ---------- */
.art-head{padding:clamp(24px,2.6vw,64px) 0 clamp(16px,1.8vw,38px)}
.art-head h1{font-size:clamp(28px,3.9vw,92px); line-height:1; max-width:26ch}
.art-head .lead{margin:clamp(14px,1.5vw,34px) 0 0; max-width:62ch; font-size:clamp(18px,1.28vw,27px); line-height:1.45; color:rgba(241,239,233,.86); font-style:italic}
.art-meta{display:flex; flex-wrap:wrap; gap:clamp(12px,1.4vw,30px); align-items:center; margin-top:clamp(14px,1.5vw,32px); padding-top:12px; border-top:1px solid var(--rule)}
.art-meta span{font-family:var(--display); font-weight:600; font-size:clamp(11.5px,.76vw,15px); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

.article-body{padding-bottom:clamp(20px,2vw,50px); overflow:hidden}
.article-body > p,.article-body > ul,.article-body > h2{max-width:var(--prose)}
.article-body > p{margin:0 0 1.05em}
.article-body h2{font-size:clamp(21px,1.75vw,40px); line-height:1.12; margin:clamp(20px,2vw,48px) 0 .5em; padding-top:clamp(10px,1vw,22px); border-top:2px solid var(--accent); max-width:min(var(--prose),36ch)}
.article-body ul{margin:0 0 1.1em; padding-left:1.2em}
.article-body li{margin-bottom:.4em}
.breakout{max-width:none; clear:both; margin:clamp(22px,2.2vw,56px) 0}
.offset{float:right; width:clamp(240px,27vw,460px); margin:8px 0 clamp(18px,1.8vw,38px) clamp(22px,2.6vw,64px)}
@media (max-width:720px){
  .offset{float:none; width:auto; margin:clamp(18px,2vw,34px) 0}
}

/* figure treatments (three) */
figure{margin:0}
.article-figure figcaption,.fig-bleed figcaption,.fig-mat figcaption{display:flex; flex-wrap:wrap; gap:6px clamp(14px,1.6vw,36px); align-items:baseline; margin-top:12px}
.article-figure figcaption .cap,.fig-bleed figcaption .cap,.fig-mat figcaption .cap{flex:1 1 26ch; min-width:0; font-family:var(--display); font-size:clamp(14px,.92vw,19px); line-height:1.35; color:var(--ink)}
.article-figure figcaption .figcredit,.fig-bleed figcaption .figcredit,.fig-mat figcaption .figcredit{flex:0 1 auto; margin-left:auto}

/* 1 — full-bleed band */
.fig-bleed{grid-column:1 / -1; width:100vw; margin-left:calc(50% - 50vw); position:relative}
.fig-bleed img{width:100%; height:clamp(260px,48vh,760px); object-fit:cover}
.fig-bleed figcaption{max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter)}
/* 2 — mat / card with inset hairline */
.fig-mat{background:var(--panel); padding:clamp(12px,1.1vw,26px); border:1px solid var(--rule)}
.fig-mat img{width:100%; aspect-ratio:16/10; object-fit:cover; outline:1px solid rgba(241,239,233,.22); outline-offset:-7px}
.fig-mat figcaption{padding-top:2px; border-top:2px solid var(--second); margin-top:14px}
/* 3 — inset, amber bar, sits in the offset column or narrow */
.fig-inset{border-left:3px solid var(--accent); padding-left:clamp(10px,1vw,20px)}
.fig-inset img{width:100%; aspect-ratio:4/3; object-fit:cover}
.fig-inset figcaption{margin-top:10px}
.fig-inset .cap{display:block; font-family:var(--display); font-size:clamp(13.5px,.86vw,17px); line-height:1.35}
.fig-inset .figcredit{display:block; margin-top:5px}
.gallery{display:grid; gap:clamp(10px,1vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.gallery img{aspect-ratio:3/2; object-fit:cover}
.map-figure .map-slot{aspect-ratio:16/9; border:1px dashed var(--rule)}

/* text components */
.pullquote{margin:clamp(14px,1.6vw,36px) 0; padding:clamp(16px,1.6vw,36px) 0; border-top:2px solid var(--flag); border-bottom:2px solid var(--flag)}
.pullquote p{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(20px,2.1vw,46px); line-height:1.1; letter-spacing:-.025em; color:var(--ink)}
.blockquote{margin:clamp(14px,1.4vw,32px) 0; padding-left:clamp(14px,1.2vw,26px); border-left:3px solid var(--second)}
.blockquote p{margin:0; font-size:1.05em; font-style:italic}
.blockquote cite{display:block; margin-top:8px; font-family:var(--display); font-style:normal; font-size:clamp(12px,.78vw,15px); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.callout{background:var(--second); color:#0B1414; padding:clamp(16px,1.6vw,34px)}
.callout p{margin:0; font-family:var(--display); font-weight:600; font-size:clamp(15.5px,1.05vw,22px); line-height:1.35}
.callout p + p{margin-top:.7em}
.note{background:var(--panel-2); border-left:3px solid var(--accent); padding:clamp(12px,1vw,22px); font-size:.96em; color:rgba(241,239,233,.88)}

/* data components */
.notes-block{background:var(--panel); border:1px solid var(--rule); padding:clamp(16px,1.7vw,40px)}
.notes-block > h3{font-family:var(--display); font-weight:600; font-size:clamp(11.5px,.76vw,15px); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:clamp(12px,1.2vw,26px)}
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:0}
.timeline li{display:grid; grid-template-columns:minmax(120px,20ch) minmax(0,1fr); gap:6px clamp(14px,1.6vw,40px); padding:clamp(9px,.8vw,16px) 0; border-top:1px solid var(--rule)}
.timeline li:first-child{border-top:0; padding-top:0}
.timeline .t-when{font-family:var(--display); font-weight:700; font-size:clamp(14px,.95vw,20px); color:var(--second); line-height:1.25}
.timeline .t-what{line-height:1.45}
@media (max-width:640px){ .timeline li{grid-template-columns:1fr} }
.statrow{display:grid; gap:1px; background:var(--rule); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); border:1px solid var(--rule)}
.statblock{background:var(--ground); padding:clamp(14px,1.4vw,30px); display:flex; flex-direction:column; gap:8px}
.stat-num{font-family:var(--display); font-weight:800; font-size:clamp(26px,2.5vw,52px); line-height:.94; letter-spacing:-.035em; color:var(--accent); overflow-wrap:break-word; hyphens:none}
.stat-num.mid{font-size:clamp(22px,1.9vw,38px); line-height:1}
.stat-num.long{font-size:clamp(19px,1.45vw,29px); line-height:1.06; letter-spacing:-.02em}
.stat-label{font-size:clamp(14px,.9vw,18px); line-height:1.35; color:var(--muted)}
table{width:100%; border-collapse:collapse; font-size:.97em}
.datatable th,.versus th{font-family:var(--display); font-weight:600; font-size:clamp(11.5px,.76vw,15px); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:left; padding:0 14px 9px 0; border-bottom:2px solid var(--accent)}
.datatable td,.versus td{padding:11px 14px 11px 0; border-bottom:1px solid var(--rule); vertical-align:top}
.versus td:first-child{font-family:var(--display); font-weight:700}
.table-scroll{overflow-x:auto}
.chart figcaption{margin-top:10px; font-family:var(--display); font-size:clamp(13px,.85vw,17px); color:var(--muted)}
.chart svg{width:100%; height:auto; overflow:visible}
.chart .bar-fill{fill:var(--accent)}
.chart .bar-label,.chart .bar-val{font-family:'Syne',sans-serif; font-size:11px; fill:var(--ink)}
.chart .bar-val{fill:var(--muted)}
.chart .line-path{fill:none; stroke:var(--second); stroke-width:2.5}
.chart .axis{stroke:var(--rule); stroke-width:1}

/* cards / references */
.profile-grid,.org-grid,.further-grid{display:grid; gap:clamp(12px,1.2vw,26px); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.profile-card{background:var(--panel); border:1px solid var(--rule); padding:clamp(14px,1.3vw,28px); display:flex; flex-direction:column; gap:8px; height:100%}
.profile-card .p-photo{width:74px; height:74px; object-fit:cover; border-radius:50%}
.profile-card h3{font-size:clamp(17px,1.15vw,24px)}
.profile-card .p-role{margin:0; font-family:var(--display); font-size:clamp(11.5px,.76vw,15px); letter-spacing:.12em; text-transform:uppercase; color:var(--second)}
.profile-card p{margin:0}
.profile-card .p-links{margin-top:auto}
.profile-card .p-attr{font-size:.85em; color:var(--muted)}
.org-card{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 14px; align-items:center; background:var(--panel); border:1px solid var(--rule); padding:12px 14px; border-bottom:1px solid var(--rule)}
.org-card .org-logo{grid-row:1 / span 2; width:46px; height:46px; object-fit:contain}
.org-card .org-name{font-family:var(--display); font-weight:700; color:var(--ink); line-height:1.15}
.org-card .org-host{font-size:.82em; color:var(--muted); font-family:var(--display); letter-spacing:.06em}
.org-card.no-logo{grid-template-columns:1fr}
.entity-ref .arr{white-space:nowrap}
.further-grid a{display:flex; flex-direction:column; gap:6px; background:var(--panel); border:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(13px,1.2vw,26px); color:var(--ink); font-family:var(--display); font-weight:700; font-size:clamp(16px,1.05vw,22px); line-height:1.15; height:100%}
.further-grid a:hover{border-color:var(--accent); color:var(--accent)}
.further-grid a .fg-sec{font-family:var(--display); font-weight:600; font-size:clamp(11px,.72vw,14px); letter-spacing:.16em; text-transform:uppercase; color:var(--second)}
.related-links{list-style:none; margin:0; padding:0; display:grid; gap:10px}

/* category + archive */
.cat-hero{position:relative; border-bottom:1px solid var(--rule)}
.cat-hero img{width:100%; height:clamp(220px,38vh,560px); object-fit:cover; filter:saturate(.8)}
.cat-hero .lead-shade{background:linear-gradient(80deg,rgba(14,15,17,.95),rgba(14,15,17,.35))}
.cat-head{padding:clamp(24px,2.6vw,64px) 0 clamp(18px,2vw,44px)}
.cat-head h1{font-size:clamp(28px,3.6vw,84px); max-width:24ch}
.cat-head p{margin:clamp(12px,1.4vw,30px) 0 0; max-width:58ch; font-size:clamp(17px,1.2vw,25px); color:rgba(241,239,233,.86)}
.cat-list{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.cat-list li{background:var(--ground)}
.cat-list li > a{display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:clamp(16px,1.7vw,38px) 0; border:0; color:var(--ink)}
.cat-list li > a:hover{background:var(--panel)}
.cat-list .cl-in{display:grid; grid-template-columns:minmax(0,26ch) minmax(0,1fr) auto; gap:10px clamp(20px,2.4vw,64px); align-items:baseline; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter); width:100%}
.cat-list h2,.cat-list h3{font-size:clamp(19px,1.5vw,34px); line-height:1.1}
.cat-list p{margin:0; color:var(--muted); font-size:clamp(14.5px,.94vw,19px)}
.cat-list .cl-len{font-family:var(--display); font-weight:600; font-size:clamp(11px,.72vw,14px); letter-spacing:.15em; text-transform:uppercase; color:var(--second)}
.cat-list li > a:hover h3,.cat-list li > a:hover h2{color:var(--accent)}
@media (max-width:900px){ .cat-list .cl-in{grid-template-columns:1fr} }
.arch-sec{padding:clamp(24px,2.6vw,60px) 0 0}
.arch-sec h2{font-size:clamp(20px,1.6vw,36px); display:flex; align-items:center; gap:.5em; padding-bottom:12px; border-bottom:2px solid var(--accent)}
.arch-list{list-style:none; margin:0; padding:0}
.arch-list li{display:grid; grid-template-columns:minmax(0,30ch) minmax(0,1fr) auto; gap:6px clamp(18px,2.2vw,60px); align-items:baseline; padding:clamp(10px,.9vw,18px) 0; border-bottom:1px solid var(--rule)}
.arch-list a{color:var(--ink); border:0; font-family:var(--display); font-weight:700; font-size:clamp(15.5px,1vw,21px); line-height:1.2}
.arch-list a:hover{color:var(--accent)}
.arch-list p{margin:0; color:var(--muted); font-size:clamp(14px,.88vw,18px)}
@media (max-width:820px){ .arch-list li{grid-template-columns:1fr} }

.simple{padding:clamp(26px,3vw,70px) 0}
.simple h1{font-size:clamp(28px,3.4vw,78px); max-width:24ch}
.simple .prose{max-width:70ch; margin-top:clamp(16px,1.8vw,40px)}
.sg-block{padding:clamp(20px,2.2vw,50px) 0; border-top:1px solid var(--rule)}
.sg-block > h2{font-size:clamp(18px,1.3vw,28px); color:var(--second); margin-bottom:clamp(14px,1.4vw,30px)}
.sg-note{font-family:var(--display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}

/* additions */
.trip-year.trip-word{font-size:clamp(20px,1.7vw,38px); letter-spacing:-.02em; bottom:clamp(10px,1vw,20px)}
.related-links.further-grid{list-style:none; padding:0; margin:0}
.related-links.further-grid li{display:flex}
.related-links.further-grid li a{width:100%}
.sup-head .kicker{flex:0 0 auto}
.sup-head h2{flex:0 1 auto}
.lead-facts b{font-weight:600}
@media (min-width:1600px){ .lead-inner{max-width:60ch} }
@media (max-width:640px){
  .lead-figure img{height:clamp(300px,72vh,560px)}
  .lead-copy .years{font-size:clamp(22px,7vw,34px)}
}

.chart .bar-label,.chart .bar-val{font-family:'Bricolage Grotesque','Syne',sans-serif}

/* section index (homepage) */
.secindex{padding:clamp(34px,4vw,96px) 0}
.si-head{display:flex; align-items:baseline; justify-content:space-between; gap:clamp(14px,2vw,48px); flex-wrap:wrap; padding-bottom:12px; border-bottom:2px solid var(--accent)}
.si-head p:last-child{margin:0; color:var(--muted); font-size:clamp(14.5px,.92vw,19px); max-width:46ch}
.si-list{list-style:none; margin:0; padding:0}
.si-list li{border-bottom:1px solid var(--rule)}
.si-list a{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:clamp(12px,1.8vw,44px); padding:clamp(14px,1.5vw,32px) 0; border:0; color:var(--ink)}
.si-list a:hover{color:var(--accent)}
.si-no{font-family:var(--display); font-weight:800; font-size:clamp(22px,2.6vw,58px); line-height:1; letter-spacing:-.04em; color:var(--second); font-variant-numeric:tabular-nums}
.si-icon{display:flex; color:var(--accent)}
.si-list a:hover .si-icon{color:var(--ink)}
.si-body{display:grid; gap:4px; min-width:0}
.si-title{font-family:var(--display); font-weight:700; font-size:clamp(18px,1.55vw,36px); line-height:1.08; letter-spacing:-.022em}
.si-blurb{color:var(--muted); font-size:clamp(14.5px,.92vw,19px)}
.si-count{font-family:var(--display); font-weight:600; font-size:clamp(11px,.72vw,14px); letter-spacing:.15em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
@media (max-width:720px){
  .si-list a{grid-template-columns:auto minmax(0,1fr); gap:6px 16px}
  .si-icon{display:none}
  .si-count{grid-column:2; justify-self:start}
}
/* compact footer */
.foot{padding:clamp(18px,1.8vw,34px) 0 clamp(22px,2vw,40px); margin-top:clamp(26px,2.8vw,64px)}
.foot-in{display:flex; align-items:center; gap:clamp(14px,1.8vw,40px); flex-wrap:wrap; justify-content:flex-start}
.foot-mark span{font-size:clamp(19px,1.5vw,32px)}
.foot-in > p{margin:0; flex:1 1 34ch; color:var(--muted); font-size:clamp(14px,.88vw,18px); max-width:56ch}
.foot-in > ul{flex:0 1 auto; margin-left:auto; gap:clamp(10px,1.1vw,24px)}

.fig-inset.inflow{max-width:min(100%,var(--wide)); display:grid; gap:clamp(12px,1.4vw,32px); grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .fig-inset.inflow{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:end}
  .fig-inset.inflow img{aspect-ratio:16/9}
  .fig-inset.inflow figcaption{margin:0}
}

/* sections as a shelf of six units */
.shelf-band{padding:clamp(34px,4vw,96px) 0}
.shelf{display:grid; gap:clamp(12px,1.3vw,28px); grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr)); margin-top:clamp(18px,2vw,44px)}
.unit{border:0; display:flex; flex-direction:column; height:100%; background:var(--panel)}
.unit-face{position:relative; display:block; overflow:hidden}
.unit-face img{width:100%; aspect-ratio:3/4.4; object-fit:cover; filter:saturate(.7) brightness(.72); transition:filter .25s}
.unit:hover .unit-face img{filter:saturate(1) brightness(.9)}
.unit-face::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,15,17,.55) 0%,rgba(14,15,17,.1) 38%,rgba(14,15,17,.92) 100%)}
.unit-plate{position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:clamp(9px,.8vw,16px); color:var(--accent)}
.unit-no{font-family:var(--display); font-weight:800; font-size:clamp(13px,.85vw,17px); letter-spacing:.06em; color:var(--second); font-variant-numeric:tabular-nums}
.unit-label{position:absolute; z-index:2; left:clamp(9px,.8vw,16px); right:clamp(9px,.8vw,16px); bottom:clamp(8px,.8vw,15px);
  font-family:var(--display); font-weight:800; font-size:clamp(14px,1.05vw,25px); line-height:1.02; letter-spacing:-.03em; color:var(--ink); text-transform:uppercase; overflow-wrap:break-word; hyphens:none}
.unit:hover .unit-label{color:var(--accent)}
.unit-body{display:flex; flex-direction:column; gap:6px; padding:clamp(11px,1vw,22px); flex:1}
.unit-title{font-family:var(--display); font-weight:700; font-size:clamp(14.5px,.95vw,19px); line-height:1.18; color:var(--ink); min-height:2.4em}
.unit-blurb{color:var(--muted); font-size:clamp(13.5px,.85vw,17px); line-height:1.4}
.unit-count{margin-top:auto; padding-top:8px; font-family:var(--display); font-weight:600; font-size:clamp(10.5px,.68vw,13px); letter-spacing:.15em; text-transform:uppercase; color:var(--second)}
@media (max-width:520px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .unit-face img{aspect-ratio:3/3.6}
}

.kicker .icon{color:var(--accent)}
.eyebrow .icon{color:var(--second)}
.further-grid a .fg-sec .icon{color:var(--second)}
.arch-sec h2 .icon{color:var(--accent)}
.hub-cell:hover .icon{color:var(--second)}

/* pull quote set into the right-hand space beside the prose */
.pullquote.pull-right{float:right; clear:right; width:clamp(250px,33%,470px);
  margin:10px 0 clamp(18px,1.8vw,36px) clamp(26px,2.8vw,70px);
  padding:clamp(12px,1.2vw,26px) 0}
.pullquote.pull-right p{font-size:clamp(19px,1.55vw,34px); line-height:1.08}
@media (max-width:820px){
  .pullquote.pull-right{float:none; width:auto; margin:clamp(16px,2vw,32px) 0}
}

/* ---------- mobile ---------- */
@media (max-width:700px){
  .mast-top{padding:14px 0 12px; gap:10px}
  .standfirst{flex:1 1 100%; margin:0; font-size:14.5px; line-height:1.35}

  /* one scrollable row instead of three wrapped ones */
  .nav ul{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:18px; padding:9px 0;
    margin-inline:calc(-1*var(--gutter)); padding-inline:var(--gutter)}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:0 0 auto}
  .nav a{white-space:nowrap; padding:4px 0}

  /* let the lead grow with its content rather than clip it */
  .lead-band{display:block; min-height:0; overflow:visible}
  .lead-figure{position:relative; width:100%; height:58vh}
  .lead-figure img{height:100%}
  .lead-shade{background:linear-gradient(180deg,rgba(14,15,17,.42) 0%,rgba(14,15,17,.72) 46%,var(--ground) 82%)}
  .lead-content{padding-top:0; margin-top:-30vh}
  .lead-content h1{font-size:clamp(27px,8.4vw,40px)}
  .lead-dek{font-size:16px}
  .lead-credit{margin-top:20px}

  .sig-head h2,.si-head{max-width:none}
  .quiet-main p{font-size:clamp(22px,6.6vw,30px); max-width:none}
  .pullquote p{font-size:clamp(20px,6vw,28px)}
  .art-head h1{font-size:clamp(26px,8vw,38px)}
  .cat-head h1,.simple h1{font-size:clamp(26px,7.6vw,36px)}
  .fig-bleed img{height:clamp(220px,40vh,320px)}
  .foot-in{gap:14px}
  .foot-in > ul{margin-left:0; flex:1 1 100%}

  .trip a{background:transparent}
  .trip .trip-body{padding:12px 0 0}
}
@media (max-width:420px){
  .lead-facts li{font-size:15px}
  .stat-num{font-size:24px}
  .stat-num.long{font-size:18px}
}

/* 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}
.sup-slots > .sponsor{flex:0 0 auto!important}
.sponsor-tier{flex-wrap:wrap!important}
.sponsor-tier > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-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:56px!important;max-height:56px!important;width:100%!important;object-fit:contain!important;border-radius:2px}

/* sp-domain-override: per-domain, from work/css_override.css */
/* Two tiers of four. Design sized each tile 364px, which wraps 4 as 3+1 (the orphan grows to the
   full row). Give the tiles a basis that seats four across the ~920px band. */
.sponsor-tier > .sponsor{flex:1 1 190px!important;min-width:0!important}
@media (max-width:760px){.sponsor-tier > .sponsor{flex:1 1 44%!important}}
/* Long names wrap instead of clipping to an ellipsis. */
.sponsor .sponsor-name{white-space:normal!important;overflow:visible!important}

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

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

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

/* sp-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

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

/* op-grow-same-size: this tier grows by STRETCHING (flex rows, flex-grow) — one added tile would wrap onto a new row alone and stretch across the grid. Same minimum (190px), same columns at every width, but a short row keeps its siblings' size. Also straightens today's stretched short row — operator: "Same-size fix now" (2026-09-23, /pipeline/_money_grow_review.html). Phones keep their own rules. */
@media (min-width:641px){
  div.sponsor-tier.roll{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important}
}
/* op-grow-same-size:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.06; margin: 0px;}
.hub-cell h2:where(.rt-h3){font-size: clamp(19px, 1.4vw, 31px); line-height: 1.1; color: var(--ink);}
.cat-list h2:where(.rt-h3){font-size: clamp(19px, 1.5vw, 34px); line-height: 1.1;}
.cat-list li > a:hover h2:where(.rt-h3){color: var(--accent);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > figure > img,
  a.unit > span.unit-face > img,
  div.article-body > figure.breakout.fig-inset.inflow > img,
  div.article-body > figure.breakout.fig-mat > img,
  div.article-body > figure.fig-inset.offset > img,
  div.picks-grid > a.pick > img,
  main > figure.cat-hero > img,
  main > figure.fig-bleed > img,
  section.lead-band > figure.lead-figure > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sponsor-tier.roll (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-tier.roll:has(> *:nth-child(odd):last-child) > *:first-child{flex:0 0 100%!important;max-width:100%!important}
}
[data-partner] img{background:transparent!important}