/* 2A03 — Label. Palette: paper (ground) · ink · red (accent) · cobalt (secondary) · cream (panel) */
:root{
  --paper:#EDE6D6;
  --ink:#17130F;
  --red:#D91F26;
  --cobalt:#143C9A;
  --cream:#F7F3E8;
  --tan:#DCD3BC;
  --quiet:#6f685d;
  --rule:#c9bfa6;

  --prose:74ch;
  --side:200px;
  --body:17.5px;
  --gut:clamp(20px,3.2vw,56px);
  --maxwide:1780px;

  --display:'Anton',Impact,sans-serif;
  --text:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'Sometype Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:var(--body);line-height:1.62;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
p{text-wrap:pretty}
a{color:var(--cobalt);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--red)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95;margin:0}
.k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.icon--lg{width:44px;height:44px;stroke-width:1.3}
.reg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.1}

/* ---------- widths ---------- */
.wide{width:min(96vw,var(--maxwide));margin-inline:auto;padding-inline:var(--gut)}
.bleed{width:100%}

/* ---------- masthead ---------- */
.plate{background:var(--red);color:var(--cream);padding:40px var(--gut) 34px;display:flex;gap:40px;align-items:flex-start}
.plate a{color:inherit;text-decoration:none}
.plate a:hover{color:var(--cream);text-decoration:underline}
.plate__main{flex:1;display:flex;flex-direction:column;gap:18px;min-width:0}
.sig{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.wordmark{font-family:var(--display);font-size:clamp(64px,11vw,186px);line-height:.78;letter-spacing:-.01em;text-transform:uppercase;display:block}
.plate__strap{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}
.plate__strap p{margin:0;font-size:clamp(16px,1.1vw,20px);line-height:1.4;max-width:42ch}
.spine{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;display:grid;gap:10px;text-align:right;flex:none;padding-top:6px;border-top:2px solid rgba(247,243,232,.55)}
.spine .on{text-decoration:underline;text-underline-offset:.3em}

/* off-register band under the label */
.offreg{background:var(--ink);color:var(--paper);padding:18px var(--gut);margin-left:26px;display:flex;justify-content:space-between;align-items:baseline;gap:clamp(16px,3vw,48px);flex-wrap:nowrap;overflow:hidden}
.offreg h2,.offreg .line{font-family:var(--display);font-size:clamp(13px,1.85vw,30px);text-transform:uppercase;margin:0;white-space:nowrap}
.offreg .src{font-family:var(--mono);font-size:clamp(8.5px,.85vw,11.5px);letter-spacing:.14em;color:#a09a8e;white-space:nowrap;flex:none}

/* compact header for inner pages */
.bar{background:var(--red);color:var(--cream);padding:16px var(--gut);display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.bar a{color:inherit;text-decoration:none}
.bar a:hover{text-decoration:underline}
.bar__mark{font-family:var(--display);font-size:clamp(26px,2.4vw,42px);text-transform:uppercase;flex:none}
.bar__nav{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;flex:1}
.bar__nav .on{border-bottom:2px solid var(--cream)}
.subbar{background:var(--ink);color:#a09a8e;padding:11px var(--gut);margin-left:26px;display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.subbar a{color:#a09a8e;text-decoration:none}
.subbar a:hover,.subbar .on{color:#fff}

/* ---------- homepage bands ---------- */
.band{padding:clamp(44px,5vw,86px) 0}
.band--tight{padding:clamp(28px,3vw,48px) 0}
.band__head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.band__head h2{font-size:clamp(26px,3vw,44px)}
.band__head .more{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}

.band--lead{background:var(--cream);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:clamp(34px,4.4vw,72px) 0}
.lead-story{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,3.4vw,60px);align-items:end}
.lead-story .fig--mat{background:var(--paper);padding:16px;box-shadow:0 0 0 1px rgba(23,19,15,.14),18px 18px 0 0 var(--red)}
.lead-story .fig--mat img{aspect-ratio:4/3}
.lead-story h1{font-size:clamp(38px,5.6vw,104px)}
.lead-story .lead{font-size:clamp(18px,1.45vw,26px);line-height:1.45;max-width:40ch}
.lead-story__meta .k[href]{font-size:12.5px}
.lead-story__meta{display:flex;flex-direction:column;gap:16px;padding-bottom:6px}

.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.field{padding:30px;display:flex;flex-direction:column;gap:14px;min-height:100%}
.field h3{font-size:clamp(20px,1.7vw,27px)}
.field p{margin:0;font-size:15.5px;line-height:1.5}
.field .num{font-family:var(--display);font-size:clamp(54px,6vw,84px);line-height:.78}
.field img{margin-top:auto;aspect-ratio:16/10;object-fit:cover;width:100%}
.field a{color:inherit}
.field--cobalt{background:var(--cobalt);color:var(--cream)}
.field--ink{background:var(--ink);color:var(--paper)}
.field--tan{background:var(--tan)}
.field--cream{background:var(--cream)}

.quiet-line{display:flex;gap:clamp(20px,3vw,44px);align-items:flex-start}
.quiet-line h2{font-size:clamp(30px,3.6vw,54px);max-width:34ch}
.quiet-line p{max-width:56ch;font-size:clamp(16px,1.15vw,20px);color:#4a453d}

.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--rule)}
.hub__item{background:var(--paper);padding:24px;display:flex;flex-direction:column;gap:10px}
.hub__item h3{font-size:20px}
.hub__item p{margin:0;font-size:15px;color:#4a453d}
.hub__item .k{color:var(--red)}
.hub__top{display:flex;align-items:center;gap:12px;color:var(--red)}
.hub__item .count{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--quiet);text-transform:uppercase}

/* ---------- article ---------- */
.article{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [wide-start] minmax(0,var(--side))
    [prose-start] minmax(0,var(--prose))
    [prose-end] minmax(0,var(--side))
    [wide-end] minmax(var(--gut),1fr)
    [full-end];
  row-gap:26px;
  padding:clamp(34px,4vw,64px) 0 0;
}
.article>*{grid-column:prose}
.article>.breakout{grid-column:wide-start/wide-end}
.article>.full{grid-column:full}
.article p{margin:0;font-size:1em;line-height:1.68}
.article h1{grid-column:wide-start/prose-end;font-size:clamp(36px,5vw,86px);margin-bottom:4px}
.article h2{font-size:clamp(22px,2.2vw,34px);margin-top:22px}
.article h3{font-family:var(--text);text-transform:none;font-weight:600;font-size:1.06em;letter-spacing:0}
.article .kicker{grid-column:wide-start/prose-end;display:flex;align-items:center;gap:12px;color:var(--red)}
.article .kicker span{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.article ul,.article ol{margin:0;padding-left:1.2em}
.article li{margin-bottom:.4em}
.article hr{display:none}

.lead{font-size:1.2em;line-height:1.5;color:#3b352d;margin:0}
.article .lead{font-weight:500}

/* figure system — three treatments, one drawing language */
figure{margin:0}
figcaption{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-top:10px}
figcaption .cap{font-size:15px;line-height:1.42;max-width:62ch;flex:1 1 320px;min-width:0}
figcaption .credit{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--quiet);flex:0 1 auto;margin-left:auto}
figcaption .fignum{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--red);flex:none}

.fig--mat{background:var(--cream);padding:14px;box-shadow:0 0 0 1px rgba(23,19,15,.10)}
.fig--mat img{aspect-ratio:16/10;object-fit:cover;width:100%}
.fig--mat figcaption{padding:2px 2px 0}

.fig--bleed img{width:100%;aspect-ratio:21/9;object-fit:cover}
.fig--bleed figcaption{width:min(96vw,var(--maxwide));margin-inline:auto;padding:0 var(--gut)}

.fig--inset{width:min(46%,340px);margin:6px 28px 18px 0;border-top:6px solid var(--cobalt);padding-top:10px}
.fig--inset img{aspect-ratio:4/3;object-fit:cover}
.fig--inset figcaption .cap{font-size:14px;flex:1 1 100%}
.fig--inset figcaption .credit{margin-left:0;flex:1 1 100%}

.fig--panel{background:var(--ink);color:var(--paper);padding:clamp(18px,2vw,34px);display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.fig--panel img{aspect-ratio:16/9;object-fit:cover}
.fig--panel figcaption .cap{color:var(--paper)}
.fig--panel figcaption .credit{color:#948d80}

/* apparatus — the Notes-for-Design material, interrupting the prose */
.apparatus{background:var(--cream);border-top:3px solid var(--ink);border-bottom:1px solid var(--rule);padding:24px clamp(18px,2vw,30px)}
.apparatus--cobalt{background:var(--cobalt);color:var(--cream);border-top-color:var(--cream);border-bottom-color:rgba(255,255,255,.3)}
.apparatus--cobalt .apparatus__k{color:var(--cream)}
.apparatus--ink{background:var(--ink);color:var(--paper);border-top-color:var(--red);border-bottom-color:#39332b}
.apparatus--ink .apparatus__k{color:var(--red)}
.apparatus__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.apparatus dl{margin:0;display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);gap:10px 26px}
.apparatus dt{font-family:var(--mono);font-size:13px;line-height:1.4}
.apparatus dd{margin:0;font-size:15.5px;line-height:1.5}
.apparatus ul{margin:0;padding-left:1.1em;font-size:15.5px}

.pullquote{margin:0;background:var(--red);color:var(--cream);padding:clamp(28px,3.4vw,56px) var(--gut)}
.pullquote p{margin:0 auto;font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3.2vw,50px);line-height:1.06;max-width:30ch;width:min(96vw,var(--maxwide))}
.blockquote{margin:0;border-left:6px solid var(--cobalt);padding:4px 0 4px 20px}
.blockquote p{font-size:1.1em;font-style:italic}
.blockquote cite{display:block;margin-top:8px;font-family:var(--mono);font-style:normal;font-size:12px;color:var(--quiet)}
.callout{background:var(--tan);padding:20px 24px;border-top:3px solid var(--cobalt)}
.callout p{margin:0;font-size:1.02em}
.note{font-size:.92em;color:var(--quiet);border-left:2px solid var(--rule);padding-left:14px}

/* data */
.versus,.datatable{width:100%;border-collapse:collapse;font-size:15.5px}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.versus thead th,.datatable thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--cream);border-bottom:none}
.datatable tbody tr:nth-child(even),.versus tbody tr:nth-child(even){background:var(--cream)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule)}
.statblock{background:var(--cream);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-size:clamp(34px,3.4vw,54px);line-height:.85;color:var(--red)}
.stat-label{font-size:14px;line-height:1.35;color:#4a453d}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(110px,200px) minmax(0,1fr);gap:8px 24px;padding:12px 0;border-top:1px solid var(--rule)}
.t-when{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--red);line-height:1.4}
.t-what{font-size:15.5px;line-height:1.5}
.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:8px}

/* cards */
.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule)}
.cat-list li{background:var(--paper);display:flex}
.cat-list a{display:flex;flex-direction:column;gap:10px;padding:0 0 22px;color:inherit;text-decoration:none;width:100%}
.cat-list img{aspect-ratio:16/10;object-fit:cover;width:100%}
.cat-list h3{font-size:21px;line-height:1;padding:0 20px;min-height:2.1em}
.cat-list p{margin:0;padding:0 20px;font-size:15px;color:#4a453d}
.cat-list .k{padding:0 20px;color:var(--red);margin-top:auto}
.cat-list a:hover h3{color:var(--red)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gallery img{aspect-ratio:3/2;object-fit:cover}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.profile-card{background:var(--cream);padding:20px;display:flex;flex-direction:column;gap:10px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.profile-card h3{font-size:20px}
.profile-card .p-role{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.profile-card p{margin:0;font-size:15px}
.profile-card .p-links{margin-top:auto;font-size:14px}
.profile-card.no-photo{border-top:6px solid var(--cobalt)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.org-card{display:flex;align-items:center;gap:12px;background:var(--cream);padding:12px 14px;text-decoration:none;color:inherit}
.org-card .org-logo{width:44px;height:44px;object-fit:contain;flex:none}
.org-card .org-name{font-weight:600}
.org-card .org-host{font-family:var(--mono);font-size:11.5px;color:var(--quiet)}
.org-card.no-logo{border-left:4px solid var(--red)}
.entity-ref{font-weight:600;white-space:nowrap}
.further-grid,.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.further-grid a,.related-links a{display:block;background:var(--cream);padding:16px 18px;text-decoration:none;color:inherit;border-top:3px solid var(--red);font-family:var(--display);text-transform:uppercase;font-size:19px;line-height:1.02}
.further-grid a:hover,.related-links a:hover{background:var(--tan)}

/* supporters */
.supporters{padding:clamp(34px,4vw,64px) 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sponsor-run{display:flex;flex-wrap:wrap;gap:18px}
.sponsor-group{display:flex;flex-wrap:wrap;gap:18px}
.sponsor-group+.sponsor-group{margin-top:18px}
.sponsor{flex:0 0 300px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px}
.sponsor img{background:var(--ink);width:100%;aspect-ratio:5/1;max-height:56px;height:auto;object-fit:contain;padding:8px 14px}
.sponsor .sponsor-name{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
.sponsor.feat img{aspect-ratio:5/1;background:#0d0b09;box-shadow:0 0 0 1px var(--ink)}
.sponsor.feat .sponsor-name{color:var(--ink);font-weight:700}
.sponsor:hover .sponsor-name{color:var(--red)}
.sponsor-blurb{font-size:14px;line-height:1.4;color:#4a453d;min-width:200px}

/* footer */
.foot{background:var(--ink);color:var(--paper);padding:34px 0 44px;margin-top:0}
.foot .wide{display:flex;gap:26px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.foot a{color:var(--paper);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__mark{font-family:var(--display);font-size:32px;text-transform:uppercase}
.foot__what{font-size:15px;color:#a09a8e;max-width:44ch}
.foot__nav{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}

/* register / archive */
.register{display:grid;gap:0}
.register__sec{border-top:3px solid var(--ink);padding:22px 0 30px}
.register__sec h2{font-size:clamp(22px,2.2vw,32px);margin-bottom:4px}
.register ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:1px;background:var(--rule)}
.register li{background:var(--paper)}
.register li a{display:grid;grid-template-columns:2.2rem minmax(0,1fr) minmax(0,1.1fr);gap:18px;padding:13px 6px;text-decoration:none;color:inherit;align-items:baseline}
.register li a:hover{background:var(--cream)}
.register .rn{font-family:var(--mono);font-size:12px;color:var(--red)}
.register .rt{font-family:var(--display);text-transform:uppercase;font-size:19px;line-height:1.05}
.register .rb{font-size:14.5px;color:#4a453d}

.page-head{padding:clamp(34px,4vw,64px) 0 0}
.page-head h1{font-size:clamp(34px,5vw,80px);max-width:22ch}
.page-head .lead{margin-top:16px;max-width:60ch}
.pair{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,3vw,52px);align-items:start}

/* ---------- responsive: keeps going above the desktop cap ---------- */
@media (max-width:760px){
  .plate{flex-direction:column;gap:22px}
  .spine{text-align:left;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
  .offreg,.subbar{margin-left:0}
  .lead-story,.pair,.quiet-line{grid-template-columns:1fr;display:grid}
  .fig--inset{float:none;width:100%;margin:0 0 18px}
  .apparatus dl{grid-template-columns:1fr;gap:4px 0}
  .apparatus dt{margin-top:10px}
  .sponsor{flex:0 0 100%}
  .register li a{grid-template-columns:1.6rem minmax(0,1fr);gap:10px}
  .register .rb{grid-column:2}
}
@media (min-width:1200px){
  :root{--prose:76ch;--side:230px;--body:18px;--maxwide:1600px}
}
@media (min-width:1600px){
  :root{--prose:78ch;--side:300px;--body:19px;--maxwide:1880px}
  .fig--inset{width:min(46%,420px)}
  .cat-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:2000px){
  :root{--prose:82ch;--side:400px;--body:20.5px;--maxwide:2200px}
  .article{row-gap:32px}
  .apparatus dl{grid-template-columns:minmax(240px,360px) minmax(0,1fr)}
  .hub{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:2400px){
  :root{--prose:86ch;--side:520px;--body:22px;--maxwide:2600px}
  .fig--bleed img{aspect-ratio:2.6/1}
  .cat-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* .article-figure — the standing figure treatment (mat) */
.article-figure{background:var(--cream);padding:14px;box-shadow:0 0 0 1px rgba(23,19,15,.10)}
.article-figure img{aspect-ratio:16/10;object-fit:cover;width:100%}
.article-figure figcaption{padding:2px 2px 0}
.sg{width:min(96vw,var(--maxwide));margin-inline:auto;padding:0 var(--gut) 90px;display:flex;flex-direction:column;gap:44px}
.sg section{display:flex;flex-direction:column;gap:14px}
.sg h2{font-size:26px;border-top:3px solid var(--ink);padding-top:10px}

/* statement band — one claim, at size, on a saturated ground */
.statement{background:var(--cobalt);color:var(--cream);padding:clamp(40px,5vw,88px) 0}
.statement__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.statement__body{display:flex;flex-direction:column;gap:18px}
.statement__k{color:var(--cream);opacity:.75}
.statement h2{font-size:clamp(34px,4.6vw,76px);line-height:.98;max-width:24ch}
.statement p{margin:0;font-size:clamp(17px,1.2vw,21px);line-height:1.5;max-width:52ch}
.statement__cta{align-self:flex-start;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:4px}
.statement__cta:hover{color:#fff;border-bottom-color:var(--cream)}
.statement__figure{display:flex;flex-direction:column;gap:16px}
.statement__wave{width:100%;height:auto;color:var(--cream)}
.statement__src{font-family:var(--mono);font-size:11.5px!important;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
@media (max-width:760px){.statement__inner{grid-template-columns:1fr}}
@media (min-width:2000px){.statement h2{max-width:22ch}}

/* caption sitting on the photograph */
.fig--over{position:relative}
.fig--over img{aspect-ratio:21/9}
.fig--over figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:clamp(46px,6vw,90px) var(--gut) 20px;
  background:linear-gradient(to top,rgba(23,19,15,.86) 0%,rgba(23,19,15,.55) 48%,rgba(23,19,15,0) 100%);
  display:flex;gap:8px 22px;align-items:baseline;flex-wrap:wrap}
.fig--over figcaption .cap{color:var(--cream);font-size:clamp(15px,1.15vw,19px);max-width:52ch}
.fig--over figcaption .credit{color:#cfc7b6}
.fig--over figcaption .fignum{color:#fff;opacity:.8}

/* hub — the drawn marks lead */
.hub{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.hub__tile{background:var(--paper);padding:26px 22px 22px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.hub__tile:hover{background:var(--cream)}
.hub__icon{width:clamp(64px,7vw,104px);height:clamp(64px,7vw,104px);stroke:var(--red);fill:none;stroke-width:1.1;stroke-linecap:square}
.hub__tile:hover .hub__icon{stroke:var(--cobalt)}
.hub__label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}
.hub__title{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,1.35vw,23px);line-height:1.02;margin-top:auto}
@media (min-width:2000px){.hub{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* the channel strip — off-register black band under the label */
.offreg{align-items:stretch;padding:0;gap:0}
.offreg__k{font-family:var(--mono);font-size:clamp(9px,.85vw,11.5px);letter-spacing:.16em;text-transform:uppercase;color:#a09a8e;
  padding:14px clamp(12px,1.6vw,26px);border-right:1px solid #39332b;display:flex;align-items:center;flex:none;line-height:1.5}
.chstrip{list-style:none;margin:0;padding:0;display:flex;flex:1;min-width:0}
.chstrip__cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:12px clamp(8px,1.4vw,22px);border-right:1px solid #39332b}
.chstrip__n{font-family:var(--mono);font-size:clamp(8.5px,.8vw,10.5px);letter-spacing:.18em;color:var(--red)}
.chstrip__wave{width:clamp(24px,2.6vw,40px);height:auto;color:var(--cream);opacity:.9}
.chstrip__t{font-family:var(--display);text-transform:uppercase;font-size:clamp(12px,1.5vw,24px);line-height:1;white-space:nowrap}
.offreg .src{padding:14px clamp(12px,1.6vw,26px);display:flex;align-items:center;line-height:1.5;white-space:nowrap}
@media (max-width:620px){
  .offreg{flex-wrap:wrap}
  .offreg__k,.offreg .src{flex:1 1 100%;border-right:0}
  .chstrip{flex:1 1 100%}
  .chstrip__t{font-size:11px}
}

/* hub titles read as names, not as headlines */
.hub__title{font-family:var(--text);text-transform:none;font-weight:600;letter-spacing:-.005em;
  font-size:clamp(16px,1.25vw,21px);line-height:1.25}

/* legible apparatus on saturated grounds */
.apparatus--cobalt .t-when,.apparatus--ink .t-when{color:#fff}
.apparatus--cobalt .timeline li{border-top-color:rgba(255,255,255,.34)}
.apparatus--ink .timeline li{border-top-color:#4a4238}
.apparatus--cobalt .t-what{color:var(--cream)}
.apparatus--ink .t-what{color:var(--paper)}
.apparatus--cobalt dt,.apparatus--cobalt dd{color:var(--cream)}
.apparatus--ink dt,.apparatus--ink dd{color:var(--paper)}
.apparatus--cobalt .apparatus__k{color:#fff;opacity:.85}

/* apparatus definition rows — ruled, aligned, breathing */
.apparatus dl{display:grid;grid-template-columns:minmax(190px,32%) minmax(0,1fr);gap:0}
.apparatus dt,.apparatus dd{padding:11px 0;border-top:1px solid var(--rule);align-self:start}
.apparatus dd{padding-left:26px}
.apparatus dt{font-family:var(--mono);font-size:12.5px;line-height:1.45;letter-spacing:.01em;text-transform:uppercase}
.apparatus dd{font-size:15.5px;line-height:1.5}
.apparatus dl>dt:first-of-type,.apparatus dl>dt:first-of-type+dd{border-top:0}
.apparatus--cobalt dt,.apparatus--cobalt dd{border-top-color:rgba(255,255,255,.32)}
.apparatus--ink dt,.apparatus--ink dd{border-top-color:#4a4238}
@media (max-width:760px){
  .apparatus dl{grid-template-columns:1fr}
  .apparatus dt{padding-bottom:2px}
  .apparatus dd{padding:0 0 12px;border-top:0}
  .apparatus dl>dt:first-of-type+dd{border-top:0}
}

/* inset figure with prose running beside it */
.wrapzone{grid-column:prose}
.wrapzone::after{content:"";display:block;clear:both}
.wrapzone p{margin:0 0 1.15em}
.wrapzone p:last-child{margin-bottom:0}
.wrapzone .fig--inset{float:left;width:min(46%,330px);margin:6px 28px 16px 0;border-top:6px solid var(--cobalt);padding-top:10px}
.wrapzone .fig--inset img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:760px){.wrapzone .fig--inset{float:none;width:100%;margin:0 0 16px}}

/* end-of-piece hand-off */
.next{background:var(--ink);color:var(--paper);padding:clamp(30px,3.4vw,58px) 0;margin-top:14px}
.next__head{display:flex;align-items:center;gap:14px;color:var(--red);padding-bottom:14px;border-bottom:1px solid #4a4238}
.next__head .k{color:#a09a8e}
.next__all{margin-left:auto;color:var(--red);text-decoration:none;white-space:nowrap}
.next__all:hover{color:#fff}
.next__list{list-style:none;margin:0;padding:0}
.next__list a{display:grid;grid-template-columns:3.4rem minmax(0,1.05fr) minmax(0,1.15fr) 2rem;gap:22px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid #39332b;text-decoration:none;color:inherit}
.next__list a:hover{background:#211c17}
.next__list a:hover .next__t{color:var(--red)}
.next__n{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--red)}
.next__t{font-weight:600;font-size:clamp(17px,1.4vw,24px);line-height:1.2}
.next__b{font-size:15px;line-height:1.45;color:#a09a8e}
.next__go{font-family:var(--mono);color:#a09a8e;text-align:right}
@media (max-width:760px){
  .next__list a{grid-template-columns:2.6rem minmax(0,1fr);gap:6px 14px}
  .next__b{grid-column:2}
  .next__go{display:none}
}

/* the long apparatus panels read on a light ground; cobalt stays as rule and label */
.apparatus--cobalt{background:var(--cream);color:var(--ink);border-top:3px solid var(--cobalt);border-bottom:1px solid var(--rule)}
.apparatus--cobalt .apparatus__k{color:var(--cobalt);opacity:1}
.apparatus--cobalt .t-when{color:var(--cobalt);font-weight:500}
.apparatus--cobalt .t-what,.apparatus--cobalt dt,.apparatus--cobalt dd,.apparatus--cobalt li{color:var(--ink)}
.apparatus--cobalt .timeline li,.apparatus--cobalt dt,.apparatus--cobalt dd{border-top-color:var(--rule)}
.apparatus--cobalt ul li::marker{color:var(--cobalt)}
/* and the ink panels keep their dates off red */
.apparatus--ink .t-when{color:#fff}

/* ---------- touch: legible furniture, 44px targets ---------- */
@media (max-width:760px){
  .offreg__k,.offreg .src{font-size:11.5px!important;letter-spacing:.12em}
  .chstrip__n{font-size:10.5px}
  .chstrip__t{font-size:14px}
  .chstrip__cell{padding:12px 14px}

  .bar__nav{gap:0 4px}
  .bar__nav a,.subbar a,.spine a{min-height:44px;display:inline-flex;align-items:center;padding:0 2px}
  .foot__nav a{min-height:44px;display:inline-flex;align-items:center}
  .band__head .more,.statement__cta,.next__all,.lead-story__meta a.k{min-height:44px;display:inline-flex;align-items:center}
  .hub__tile,.cat-list a,.next__list a,.register li a,.org-card{min-height:56px}
  .article p a,.next__b a{padding:2px 0}
}

@media (max-width:760px){
  .field h3 a,.field a.k{min-height:44px;display:flex;align-items:center}
  .field a.k{border-top:1px solid currentColor;padding-top:10px;margin-top:2px;opacity:.9}
}

/* standfirst wins over the generic prose rule */
.article p.lead,.lead{font-size:1.2em;line-height:1.5;color:#3b352d}
.article p.lead{font-weight:500}
/* credit meta clears the contrast floor */
figcaption .credit{font-size:12px;color:#5b5449}
.fig--panel figcaption .credit{color:#b3aa9b}
.fig--over figcaption .credit{color:#d8d1c2}

/* 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-run{flex-wrap:wrap!important}
.sponsor-run > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor-group{flex-wrap:wrap!important}
.sponsor-group > .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-domain-override: per-domain, from work/css_override.css */
/* two tiers stack as rows on every width; side-by-side at >1900px left the second tier 18px lower */
.sponsor-run{flex-direction:column!important;align-items:stretch!important}
.sponsor-group{width:100%}

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

/* op-nav-collapse: this nav printed 214px of stacked links at 390 before any content
   (7 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "block-fill", 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 (20px measured) the button carries the build's
   gutter (200px) 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 "plus" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-open{display:none}
@media (max-width:940px){
  .menu-open{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:auto;border:1px solid currentColor;border-radius:3px;padding:12px 16px;background:color-mix(in srgb, currentColor 9%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-open-bars{width:11px;height:11px;flex:none;position:relative;border-top:1.5px solid currentColor;margin-top:-1px;box-shadow:inset 5px 0 0 -3.75px currentColor}
  .spine{display:none}
  .menu-open-c:checked ~ .spine{display:grid}
  .plate:has(> .menu-open){display:flow-root}
  .menu-open:not(:has(~ .spine)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 6 tiles,
   590px at 390, 9% of the whole page. Two columns bring it to
   333px (44% shorter). Checked before writing: no new overflow, smallest mark still
   160px wide, longest blurb 1 lines, tile heights 62-86px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-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){
  .sponsor-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group > * *{min-width:0!important;max-width:100%}
    .sponsor-group img,.sponsor-group svg{max-width:100%;height:auto}

}

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

/* op-hover-pad */
.register li a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95; margin: 0px;}
h2.rt-h3{font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95; margin: 0px;}
.article h2.rt-h3{font-family: var(--text); text-transform: none; font-weight: 600; font-size: 1.06em; letter-spacing: 0px;}
.article h2:where(.rt-h3){font-family: var(--text); text-transform: none; font-weight: 600; font-size: 1.06em; letter-spacing: 0px;}
.cat-list h2:where(.rt-h3){font-size: 21px; line-height: 1; padding: 0px 20px; min-height: 2.1em;}
.cat-list a:hover h2:where(.rt-h3){color: var(--red);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.band.band--tight.pair > figure.fig--mat > img,
  div.band.band--tight.wide > figure.fig--mat > img,
  div.fields > article.field.field--cobalt > img,
  div.fields > article.field.field--ink > img,
  div.fields > article.field.field--tan > img,
  div.lead-story > figure.fig--mat > img,
  div.wrapzone > figure.breakout.fig--mat > img,
  div.wrapzone > figure.breakout.fig--panel > img,
  div.wrapzone > figure.fig--inset > img,
  li > a > img,
  main.article > figure.breakout.fig--mat > img,
  main.article > figure.breakout.fig--panel > img,
  main.article > figure.fig--bleed.full > img,
  section.band--tight > figure.fig--bleed.fig--over > img){height:auto}
/* op-img-dims:end */

/* op-grow-same-size: an added partner would have wrapped onto a new row ALONE and stretched across the grid (flex rows that grow). Same minimum (basis 220px, min-width min(220px, 100%)), same columns at every width, a short row keeps its siblings' size — applied at the moment of adding, as the operator chose (2026-09-23). Phones keep their own rules. */
@media (min-width:641px){
  div.sponsor-group:nth-of-type(2){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */
