/* suchablog.com — Cell by cell.
   Palette roles: ground / ink / panel (viridian) / accent (chrome yellow) / deep.
   Two saturated members, ~115° apart in hue: viridian #0F6B52 and chrome yellow #F0A500. */
:root{
  --ground:#E8EAEC;
  --ink:#101312;
  --panel:#0F6B52;
  --accent:#F0A500;
  --deep:#06231C;
  --flag:#B00020;
  --ink-soft:#3D4644;
  --rule:#B7BDBB;
  --rule-soft:#C9CECD;
  --paper-warm:#F0EEE6;
  --display:'Space Grotesk',system-ui,sans-serif;
  --read:'Spectral',Georgia,serif;
  --mono:'DM Mono','SFMono-Regular',monospace;
  --gutter:clamp(20px,4.2vw,88px);
  --measure:74ch;
  --band:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--read);font-size:19px;line-height:1.7;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--panel);text-decoration:none}
a:hover{color:var(--ink);background:var(--accent)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.06;margin:0}
h1{font-size:clamp(34px,4.4vw,72px);letter-spacing:-.045em}
h2{font-size:clamp(27px,2.7vw,42px);letter-spacing:-.035em}
h3{font-size:clamp(21px,1.7vw,27px);letter-spacing:-.025em}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.wrap{padding-inline:var(--gutter)}
.measure{max-width:var(--measure);padding-inline:var(--gutter);margin-inline:auto}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--panel);display:flex;align-items:center;gap:9px}
.kicker svg{width:19px;height:19px;flex:0 0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--ink);padding:8px 12px;z-index:20}

/* ---------- masthead ---------- */
.masthead{background:var(--deep);color:var(--ground)}
.masthead a{color:var(--ground)}
.masthead a:hover{color:var(--ink);background:var(--accent)}
.mast-top{display:flex;flex-wrap:wrap;align-items:flex-end;border-bottom:1px solid rgba(232,234,236,.28)}
.mast-mark{flex:0 0 auto;padding:clamp(18px,2.4vw,34px) var(--gutter);border-right:1px solid rgba(232,234,236,.28);display:flex;align-items:flex-end}
.mast-mark svg{width:clamp(52px,5vw,78px);height:auto}
.mast-name{flex:1 1 320px;min-width:0;padding:clamp(18px,2.4vw,34px) var(--gutter);display:flex;flex-direction:column;justify-content:flex-end}
.mast-name .wordmark{font-family:var(--display);font-weight:700;font-size:clamp(42px,6.4vw,124px);line-height:.86;letter-spacing:-.055em;margin-bottom:-.08em}
.mast-sub{flex:1 1 260px;min-width:0;border-left:1px solid rgba(232,234,236,.28);padding:clamp(18px,2.4vw,34px) var(--gutter);display:flex;flex-direction:column;justify-content:flex-end}
.mast-sub .label{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.mast-sub p{margin:0;font-size:16.5px;line-height:1.45}

/* section rows — every destination printed, nothing behind a control */
.navrow{display:grid;grid-template-columns:clamp(46px,3.4vw,78px) minmax(0,1.05fr) minmax(0,1.4fr);gap:0 clamp(14px,2vw,38px);padding:clamp(13px,1.2vw,20px) var(--gutter);border-bottom:1px solid rgba(232,234,236,.18);align-items:start}
.navrow:last-child{border-bottom:0}
.navrow .no{font-family:var(--mono);font-size:18px;line-height:1.35;color:var(--accent)}
.navrow .sec{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.5vw,23px);line-height:1.18;letter-spacing:-.02em;display:flex;gap:10px;align-items:baseline}
.navrow .sec svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.navrow .run{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:7px clamp(14px,1.6vw,28px);padding-top:3px;font-size:15.5px;line-height:1.35}
.navrow .run a{color:rgba(232,234,236,.86)}
.mast-thin{display:flex;flex-wrap:wrap;gap:14px clamp(14px,1.8vw,30px);align-items:center;padding:14px var(--gutter);font-family:var(--mono);font-size:13.5px}
.mast-thin .wordmark{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.4vw,38px);letter-spacing:-.04em;line-height:1;margin-right:6px}
.mast-thin a.here{color:var(--accent);border-bottom:2px solid var(--accent)}
.mast-thin .spacer{flex:1 1 auto}

/* ---------- bands ---------- */
.band{padding:clamp(38px,4.4vw,84px) 0}
.band--panel{background:var(--panel);color:var(--ground)}
.band--panel a{color:var(--ground);border-bottom:1px solid rgba(232,234,236,.5)}
.band--panel a:hover{color:var(--ink);background:var(--accent);border-color:transparent}
.band--ink{background:var(--ink);color:var(--ground)}
.band--ink a{color:var(--ground);border-bottom:1px solid rgba(232,234,236,.5)}
.band--ink a:hover{color:var(--ink);background:var(--accent);border-color:transparent}
.band--quiet{padding:clamp(30px,3.2vw,58px) 0}
.band-head{display:flex;flex-wrap:wrap;gap:16px clamp(20px,2.4vw,44px);align-items:baseline;margin-bottom:clamp(18px,2vw,32px)}
.band-head h2{flex:1 1 320px;min-width:0}
.band-head p{flex:1 1 340px;min-width:0;margin:0;font-size:17px;line-height:1.55}

/* ---------- lead ---------- */
.lead-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:0}
.lead-text{flex:2 1 560px;min-width:0;padding:clamp(28px,3.4vw,64px) clamp(20px,2.6vw,56px) clamp(28px,3vw,54px) var(--gutter);border-right:1px solid var(--rule)}
.lead-media{flex:1 1 420px;min-width:0;position:relative;overflow:hidden;min-height:min(760px,58vw)}
.lead-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lead-media .plate{position:absolute;left:0;bottom:0;background:var(--accent);color:var(--ink);padding:10px 16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;max-width:92%}
.lead-rule{display:flex;align-items:baseline;gap:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--panel)}
.lead-rule .line{flex:1 1 auto;height:1px;background:var(--panel);opacity:.4}
.lead-text h1{margin:22px 0 0}
.lead-dek{font-size:clamp(19px,1.5vw,27px);line-height:1.5;margin:22px 0 0;max-width:46ch}
.figure-big{font-family:var(--display);font-weight:700;font-size:clamp(56px,6.4vw,116px);line-height:.82;letter-spacing:-.05em;color:var(--panel);display:block}
/* numbers on one row, labels on the next, so the numerals share a baseline
   however many lines a label wraps to */
.lead-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px clamp(16px,2.2vw,40px);margin-top:clamp(24px,2.6vw,40px);align-items:end}
.lead-figures .n{grid-row:1;align-self:end;border-top:2px solid var(--ink);padding-top:12px}
.lead-figures .l{grid-row:2;align-self:start;margin:0;font-size:15.5px;line-height:1.4}
@media (max-width:620px){.lead-figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px}.lead-figures .l{font-size:14px}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(18px,2.2vw,34px)}
.card{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--ink);padding:14px 16px 18px;min-width:0}
.card .media{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--ink);margin:0 -16px 2px}
.card .media img{width:100%;height:100%;object-fit:cover}
.card h3{margin:0}
.card p{font-size:16px;line-height:1.5;margin:0}
.card .meta{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.card .meta svg{width:16px;height:16px}
.band--panel .card,.band--ink .card{border-top-color:var(--accent)}
.band--panel .card .meta,.band--ink .card .meta{color:rgba(232,234,236,.75)}
.band--panel .card .media,.band--ink .card .media{border-color:rgba(232,234,236,.4)}

/* ---------- figure system: three treatments ---------- */
figure{margin:0}
figcaption{font-family:var(--read);font-size:16px;line-height:1.5;max-width:60ch}
.credit{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);margin-top:6px}
.band--panel .credit,.band--ink .credit,.fig-mat .credit{color:var(--ground)}
/* 1 — full-bleed band. Frame matches the 1.6 source so nothing is cropped away;
   the caption rule spans the page, the caption text does not. */
.fig-bleed{margin:clamp(26px,3vw,48px) 0}
.fig-bleed .frame{position:relative;width:100%;aspect-ratio:1.7/1;overflow:hidden}
.fig-bleed img{width:100%;height:100%;object-fit:cover}
.fig-bleed figcaption{padding:12px var(--gutter) 0;margin:12px auto 0;border-top:2px solid var(--ink);display:grid;grid-template-columns:minmax(0,60ch) minmax(0,1fr);gap:6px clamp(24px,3vw,56px);align-items:start;max-width:var(--band)}
.fig-bleed figcaption .credit{margin-top:0}
/* 2 — matted card: photograph on a viridian mat, inset hairline */
.fig-mat{background:var(--panel);color:var(--ground);padding:clamp(14px,1.6vw,22px);margin:clamp(26px,3vw,44px) 0;max-width:min(100%,860px)}
.fig-mat .frame{outline:1px solid rgba(232,234,236,.55);outline-offset:-7px;position:relative;aspect-ratio:16/10;overflow:hidden}
.fig-mat img{width:100%;height:100%;object-fit:cover}
.fig-mat figcaption{margin-top:14px;color:var(--ground);font-size:16.5px;padding-left:16px;border-left:3px solid var(--accent)}
/* 3 — inset in the margin beside the text column */
.fig-inset{float:right;width:min(38%,400px);margin:8px 0 22px clamp(28px,3vw,56px);clear:right}
.fig-inset .frame{border:1px solid var(--ink);position:relative;aspect-ratio:16/10;overflow:hidden}
.fig-inset img{width:100%;height:100%;object-fit:cover}
.fig-inset figcaption{margin-top:10px;font-size:15px;padding-top:8px;border-top:1px solid var(--rule);max-width:none}
.article-figure{margin:clamp(22px,2.6vw,38px) 0}
.article-figure .frame,.article-figure>img{border:1px solid var(--ink)}
.article-figure figcaption{margin-top:10px;border-top:1px solid var(--rule);padding-top:8px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(14px,1.6vw,24px);margin:clamp(22px,2.6vw,36px) 0}
.gallery figure .frame{border:1px solid var(--ink);aspect-ratio:4/5;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{margin-top:9px;font-size:15px}
.map-figure .map-slot{aspect-ratio:16/9;border:1px solid var(--ink);background:var(--paper-warm)}

/* ---------- article ---------- */
.article-head{border-bottom:1px solid var(--rule)}
.article-head-grid{display:flex;flex-wrap:wrap;gap:0;max-width:var(--band);margin-inline:auto}
.article-head-main{flex:2 1 560px;min-width:0;padding:clamp(28px,3.4vw,58px) clamp(20px,2.6vw,48px) clamp(24px,2.6vw,44px) var(--gutter)}
.article-head-side{flex:1 1 280px;min-width:0;border-left:1px solid var(--rule);padding:clamp(20px,2.4vw,34px) var(--gutter)}
.article-head-side .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.spec-list{font-family:var(--mono);font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:10px}
.spec-list div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule-soft);padding-bottom:8px}
.spec-list div:last-child{border-bottom:0}
.spec-list span:last-child{color:var(--panel);text-align:right}
/* Article body: the container spans the page, the TEXT is capped at a readable
   measure, and figures/notes take the width that is left — so the page reads wide
   without the lines getting long. */
.prose{max-width:var(--band);padding-inline:var(--gutter);margin-inline:auto}
.prose::after{content:"";display:block;clear:both}
.prose>p,.prose>h2,.prose>h3,.prose>ul,.prose>ol,.prose>.blockquote,.prose>.pullquote,.prose>.note{max-width:var(--measure)}
.prose h2{margin:clamp(28px,3vw,46px) 0 14px}
.prose h3{margin:26px 0 10px}
.prose p{font-size:19px;line-height:1.72}
.prose>p:first-of-type{font-size:20px}
.prose>ul,.prose>ol{padding-left:1.1em}
.prose li{margin-bottom:.5em;line-height:1.6}
.dropcap::first-letter{font-family:var(--display);font-weight:700;font-size:3.6em;line-height:.8;float:left;margin:.06em .09em 0 0;color:var(--panel)}
.lead{font-family:var(--read);font-size:clamp(19px,1.4vw,24px);line-height:1.5;margin:0 0 1em}
.pullquote{margin:clamp(26px,3vw,44px) 0;padding:0 0 0 20px;border-left:4px solid var(--accent)}
.pullquote p{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,34px);line-height:1.18;letter-spacing:-.02em;margin:0}
.blockquote{margin:clamp(22px,2.4vw,36px) 0;padding:18px 22px;background:var(--paper-warm);border-left:4px solid var(--panel)}
.blockquote p{margin:0 0 .5em}
.blockquote cite{font-family:var(--mono);font-size:13px;font-style:normal;color:var(--ink-soft)}
.callout{margin:clamp(24px,2.6vw,40px) 0;background:var(--deep);color:var(--ground);padding:clamp(18px,2vw,28px)}
.callout .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.callout p{margin:0 0 .6em;font-size:17.5px;line-height:1.6}
.callout p:last-child{margin:0}
.callout a{color:var(--ground);border-bottom:1px solid rgba(232,234,236,.5)}
.note{font-size:16.5px;line-height:1.55;padding:14px 16px;border:1px solid var(--rule);background:var(--paper-warm)}
.note::before{content:"Note — ";font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--panel)}

/* interruption: full-width worksheet panels between prose blocks */
.interrupt{margin:clamp(30px,3.4vw,56px) 0;padding:clamp(24px,2.8vw,44px) 0;background:var(--paper-warm);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.interrupt-inner{padding-inline:var(--gutter);max-width:var(--band);margin-inline:auto}
.interrupt h2,.interrupt h3{margin:0 0 6px}
.interrupt .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--panel);margin-bottom:8px}

.timeline{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,26%) minmax(0,1fr);gap:0 clamp(14px,1.8vw,30px);padding:12px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.timeline li:first-child{border-top:1px solid var(--rule)}
.t-when{font-family:var(--mono);font-size:14px;color:var(--panel);line-height:1.4}
.t-what{font-size:17px;line-height:1.5}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(14px,1.8vw,28px);margin:14px 0 0}
.statblock{border-top:2px solid var(--ink);padding-top:10px;display:flex;flex-direction:column;min-width:0}
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-.04em;color:var(--panel)}
.stat-label{font-size:15.5px;line-height:1.45;margin-top:8px}
.datatable,.versus{width:100%;border-collapse:collapse;margin:14px 0 0;font-size:16.5px}
.datatable th,.versus th{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--rule)}
.datatable td,.versus td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;line-height:1.5;overflow-wrap:anywhere}
.versus td:first-child{font-family:var(--display);font-weight:500;letter-spacing:-.01em}
.chart{margin:clamp(22px,2.6vw,36px) 0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:10px;font-size:15.5px;border-top:1px solid var(--rule);padding-top:8px}

/* ---------- cards / references ---------- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(16px,2vw,28px);margin:14px 0 0}
.profile-card{border-top:2px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;min-width:0}
.profile-card .p-photo{aspect-ratio:1;object-fit:cover;border:1px solid var(--ink);margin-bottom:12px}
.profile-card h3{margin:0 0 4px}
.profile-card .p-role{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--panel);margin:0 0 10px}
.profile-card p{font-size:16px;line-height:1.5}
.profile-card .p-links,.profile-card .p-attr{margin-top:auto;font-family:var(--mono);font-size:13px}
.profile-card.no-photo{border-top-color:var(--panel)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin:14px 0 0}
.org-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--rule);padding:14px;min-width:0}
.org-card:hover{background:var(--accent)}
.org-logo{max-height:34px;width:auto;object-fit:contain}
.org-name{font-family:var(--display);font-weight:500}
.org-host{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.entity-ref{border-bottom:1px solid var(--panel)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin:14px 0 0}
.further-grid a{border:1px solid var(--rule);padding:14px;font-family:var(--display);font-weight:500;font-size:17.5px;line-height:1.2;letter-spacing:-.015em;display:block}
.related-links{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.related-links li{border-top:1px solid var(--rule);padding-top:10px;font-size:17.5px}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--rule-soft);padding:16px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:6px clamp(16px,2.4vw,44px);align-items:baseline}
.cat-list .t{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.5vw,24px);line-height:1.18;letter-spacing:-.02em}
.cat-list .b{font-size:16.5px;line-height:1.5;color:var(--ink-soft)}
.cat-list .len{font-family:var(--mono);font-style:normal;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--panel);margin-right:10px;white-space:nowrap}
.cat-list li:first-child{border-top:2px solid var(--ink)}

/* compact title index — titles only, flows in columns */
.title-index{list-style:none;margin:14px 0 0;padding:0;columns:4 210px;column-gap:clamp(20px,2.6vw,48px)}
.title-index li{break-inside:avoid;padding:5px 0;font-size:16.5px;line-height:1.35}
@media (max-width:620px){.title-index{columns:1}}
.expander{margin-top:14px}
.expander input{position:absolute;opacity:0;width:0;height:0}
.expander .more{display:none}
.expander input:checked~.more{display:block}
.expander label{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--panel);border-bottom:1px solid var(--panel);cursor:pointer;margin-top:12px}
.expander input:checked~label{display:none}

/* ---------- supporters — homepage only, one band ----------
   Count-agnostic: auto-fit grid, no positional selectors, no hardcoded count.
   ONE logo-box geometry in every slot; the mosaic comes from tile SPAN, never
   from a wider plate or a larger mark. .sponsor--wide is movable between slots. */
.supporters{background:var(--paper-warm);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.sponsor-group{display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(auto-fit,minmax(min(100%,236px),1fr));gap:clamp(12px,1.4vw,20px);margin-top:20px;align-items:start}
.sponsor{display:grid;grid-template-rows:auto auto 1fr;gap:10px;border:1px solid var(--rule);background:var(--ground);padding:14px;text-decoration:none;color:var(--ink);min-width:0}
.sponsor:hover{background:var(--accent)}
.sponsor .logo-box{background:var(--deep);height:76px;max-width:244px;display:flex;align-items:center;justify-content:center;padding:10px 14px;width:100%;overflow:hidden}
.sponsor .logo-box img{max-height:48px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor .logo-box .set-name{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.025em;line-height:1.08;color:#EDEFEA;text-align:center;text-wrap:balance}
.sponsor-name{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.015em;line-height:1.2}
.sponsor-host{font-family:var(--mono);font-size:12px;color:var(--ink-soft);overflow-wrap:anywhere}
.sponsor-blurb{font-size:15.5px;line-height:1.45;color:var(--ink-soft);min-width:200px}
.sponsor-blurb:empty{display:none}
.sponsor--wide{grid-column:span 2}
.sponsor--wide .sponsor-blurb{min-width:min(100%,200px)}
.sponsor--type .logo-box{background:var(--panel)}
.group-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--panel);margin-top:26px}

/* ---------- footer — minimal ---------- */
.foot{background:var(--deep);color:rgba(232,234,236,.84);padding:clamp(22px,2.4vw,34px) 0 clamp(24px,2.6vw,38px)}
.foot a{color:rgba(232,234,236,.88)}
.foot-min{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px clamp(20px,3vw,56px)}
.foot-id{display:flex;align-items:baseline;gap:14px;flex:0 1 auto;min-width:0}
.foot .wordmark{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.04em;color:var(--ground);line-height:1}
.foot-id p{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px clamp(14px,1.8vw,26px);font-size:16px;min-width:0}
.foot-nav--quiet{font-family:var(--mono);font-size:13px;margin-left:auto}
.foot-nav--quiet a{color:rgba(232,234,236,.62)}

@media (max-width:900px){
  .navrow{grid-template-columns:38px minmax(0,1fr);gap:4px 12px}
  .navrow .run{grid-column:2}
  /* touch widths: nav links get real tap targets */
  .navrow .run a,.navrow .sec a,.mast-thin a,.foot-nav a{display:inline-block;padding:8px 0}
  .navrow .run{gap:2px clamp(14px,1.6vw,28px)}
  .mast-thin{gap:6px 18px}
  .lead-text{border-right:0;border-bottom:1px solid var(--rule)}
  .lead-media{min-height:62vw}
  .article-head-side{border-left:0;border-top:1px solid var(--rule)}
  .cat-list li{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  body{font-size:18px}
  .datatable td,.datatable th,.versus td{font-size:15.5px;padding-right:10px}
  .fig-inset{float:none;width:auto;margin:22px 0}
  .fig-bleed figcaption{grid-template-columns:minmax(0,1fr);padding-top:10px}
  .fig-bleed .frame{aspect-ratio:16/10}
  .foot-nav--quiet{margin-left:0}
  .sponsor--wide{grid-column:span 1}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media print{
  .masthead .navrow,.supporters{display:none}
  body{font-size:11pt;background:#fff}
}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

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

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

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

/* op-no-green-box: operator: "public agent's grid has green background for no reason". The tier
   Design marked .sponsor--type paints its logo box with --panel (#0F6B52, the site's green) while
   every other box uses --deep — so one tile in the band read as a different treatment for no
   reason the reader can see. Same ground as the rest. */
.sponsor.sponsor--type .logo-box{background:var(--deep)}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2242px at 390, 13% of the whole page. Two columns bring it to
   1334px (40% shorter). Checked before writing: no new overflow, smallest mark still
   109px wide, longest blurb 3 lines, tile heights 193-216px.
   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-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:20px!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}
  .sponsor-group .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-group (11 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}
}

/* op-hover-pad */
.masthead a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; margin: 0px;}
h2:where(.rt-h3){font-size: clamp(21px, 1.7vw, 27px); letter-spacing: -0.025em;}
.card h2:where(.rt-h3){margin: 0px;}
.interrupt h2:where(.rt-h3){margin: 0px 0px 6px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.media > img,
  div.lead-grid > div.lead-media > img,
  figure.fig-bleed > div.frame > img,
  figure.fig-inset > div.frame > img,
  figure.fig-mat > div.frame > img){height:auto}
/* op-img-dims:end */