/* ulmathletics.com — Bayou Sideline
   Palette (3 saturated-vs-neutral roles, each with a job):
     --ground  #101314  page ground (dark)
     --ink     #E4E1D8  type on ground
     --paper   #F4F1E9  light panel ground (secondary ground)
     --accent  #F0A017  amber — numerals, marks, filled areas   (saturated, hue ~40)
     --second  #2B4C9B  field blue — full section grounds, rules (saturated, hue ~225)
     --quiet   #8D8578  labels, credits (near-neutral, support only)
*/

:root{
  --ground:#101314;
  --ink:#E4E1D8;
  --paper:#F4F1E9;
  --accent:#F0A017;
  --second:#2B4C9B;
  --quiet:#8D8578;

  /* one hue per subject — the icon is the only place they appear */
  --c-sunbelt:#F0A017;
  --c-money:#4FA981;
  --c-coaches:#E4694A;
  --c-louisiana:#6C93E0;
  --c-archive:#A98BE0;
  --c-about:#35A8B4;
  --c-contact:#DE8AA6;

  --ground-2:#181D1F;
  --ground-3:#1B2023;
  --line:rgba(228,225,216,.20);
  --line-strong:rgba(228,225,216,.42);
  --ink-dim:#C4BFB4;

  --sans:"Chivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Petrona",Georgia,"Times New Roman",serif;

  --prose:70ch;
  --w-wide:1120px;
  --w-max:1440px;
  --body:18px;
  --gut:22px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:var(--body);line-height:1.6;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:pretty}
p{margin:0}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse}
svg{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── width system ───────────────────────────────────────────────
   three visibly different content widths plus full-bleed        */
.wrap{max-width:var(--w-max);margin:0 auto;padding-inline:var(--gut)}
.wrap-wide{max-width:var(--w-wide);margin:0 auto;padding-inline:var(--gut)}
.measure{max-width:var(--prose)}

/* ── the drawn device: mileage rule ─────────────────────────── */
.rule{display:block;width:100%;height:14px;color:var(--second)}
.rule--accent{color:var(--accent)}

/* ── icon system: 24-grid, 1.6 stroke, currentColor ─────────── */
.ico{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.ico--lg{width:34px;height:34px;stroke-width:1.4}
.ico--xl{width:54px;height:54px;stroke-width:1.2}
.ico--sunbelt{color:var(--c-sunbelt)}
.ico--money{color:var(--c-money)}
.ico--coaches{color:var(--c-coaches)}
.ico--louisiana{color:var(--c-louisiana)}
.ico--archive{color:var(--c-archive)}
.ico--about{color:var(--c-about)}
.ico--contact{color:var(--c-contact)}
.band--paper .ico--sunbelt{color:#A66A02}
.band--blue .ico--sunbelt,.band--blue .ico--money,.band--blue .ico--coaches,
.band--blue .ico--louisiana,.band--blue .ico--archive{color:var(--paper)}

/* ── kickers / labels ──────────────────────────────────────── */
.kicker{display:inline-flex;align-items:center;gap:11px;
  font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.kicker .ico{width:30px;height:30px;padding:5px;stroke-width:1.5;
  border:1px solid currentColor;border-radius:2px}
.kicker--quiet{color:var(--quiet)}
.card .kicker,.feed__item .kicker{color:var(--quiet)}
.card .kicker .ico,.feed__item .kicker .ico{width:26px;height:26px;padding:4px}
.nav__link .ico{width:19px;height:19px;stroke-width:1.7}
.label{font:600 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--quiet)}

/* ── masthead ──────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--line);background:var(--ground);position:relative;z-index:40}
.masthead__in{max-width:var(--w-max);margin:0 auto;padding:22px var(--gut) 0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:end}
.wordmark{display:block;color:inherit}
.wordmark:hover{text-decoration:none}
.wordmark b,.wordmark i{display:inline;font:900 clamp(30px,4vw,58px)/.9 var(--sans);
  letter-spacing:-.035em;text-transform:uppercase;font-style:normal}
.wordmark b{color:var(--ink)}
.wordmark i{margin-left:.22em;color:transparent;-webkit-text-stroke:2px var(--accent)}
.wordmark span{display:block;margin-top:9px;font:400 12px/1 var(--sans);
  letter-spacing:.26em;text-transform:uppercase;color:var(--quiet)}
.masthead--inner .wordmark b,.masthead--inner .wordmark i{font-size:clamp(26px,2.6vw,40px)}
.masthead--inner .wordmark i{-webkit-text-stroke-width:1.6px}

/* nav: sections only, second level = sections, never a page list */
.nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav-btn{display:none}
.nav{display:flex;flex-wrap:wrap;gap:2px 26px;align-items:flex-end;
  border-top:1px solid var(--line);padding-bottom:4px;min-width:0}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:8px;padding:8px 0 10px;
  font:700 13px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.nav__link:hover{color:var(--accent);text-decoration:none}
.nav__link[aria-current="page"]{color:var(--accent)}
.nav__item--has > .nav__link::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.nav__panel{position:absolute;left:-14px;top:100%;min-width:210px;padding:12px 0 10px;
  background:var(--ground-2);border:1px solid var(--line);
  opacity:0;visibility:hidden;transition:opacity .12s ease}
.nav__item--has::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px} /* hover bridge */
.nav__item--has:hover .nav__panel,.nav__item--has:focus-within .nav__panel{opacity:1;visibility:visible}
.nav__panel a{display:block;padding:7px 16px;font:400 13px/1.35 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.nav__panel a:hover{background:var(--ground-3);color:var(--accent);text-decoration:none}
.nav__panel em{display:block;padding:2px 16px 8px;font-style:normal;
  font:400 12.5px/1.45 var(--serif);color:var(--quiet)}

/* ── bands ─────────────────────────────────────────────────── */
.band{padding-block:clamp(46px,5vw,86px)}
.band--tight{padding-block:clamp(30px,3vw,48px)}
.band--paper{background:var(--paper);color:#1A1D1F}
.band--paper a{color:#1B3576}
.band--blue{background:var(--second);color:var(--paper)}
.band--blue a{color:var(--paper)}
.band--sunk{background:var(--ground-2)}
.band__head{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.band__head .rule{flex:1 1 auto;width:auto}
.band__title{font:600 13px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:10px;text-wrap:pretty}
.band__title .ico{flex:none}
.band--blue .band__title,.band--paper .band__title{color:inherit}

/* ── opener ────────────────────────────────────────────────── */
.opener{position:relative;isolation:isolate;min-height:clamp(420px,58vw,760px);display:flex;align-items:flex-end}
.opener img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.opener::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(16,19,20,.99) 4%,rgba(16,19,20,.92) 22%,rgba(16,19,20,.72) 52%,rgba(16,19,20,.34) 78%,rgba(16,19,20,.16) 100%)}
.opener__in{width:100%;max-width:var(--w-max);margin:0 auto;padding:0 var(--gut) clamp(34px,4vw,60px)}
.opener h1{font:400 clamp(30px,3.4vw,54px)/1.1 var(--serif);max-width:26ch;
  text-shadow:0 2px 26px rgba(6,8,9,.85),0 1px 3px rgba(6,8,9,.7)}
.opener p{margin-top:16px;max-width:56ch;font:400 clamp(17px,1.2vw,21px)/1.55 var(--serif);color:var(--ink-dim);
  text-shadow:0 1px 16px rgba(6,8,9,.8)}
.signature{display:flex;align-items:center;gap:clamp(14px,2vw,30px);margin-top:clamp(22px,2.4vw,38px);flex-wrap:wrap}
.signature b{font:900 clamp(38px,4.6vw,76px)/.9 var(--sans);letter-spacing:-.03em;color:var(--accent)}
.signature span{font:400 clamp(26px,3vw,44px)/1 var(--sans);color:var(--quiet)}
.signature em{flex:1 1 180px;min-width:120px;font-style:normal;
  font:600 12px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);max-width:26ch}

/* ── lead feature ──────────────────────────────────────────── */
.lead-feature{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,52px)}
.lead-feature h2{font:400 clamp(34px,4.2vw,66px)/1.03 var(--serif);letter-spacing:-.012em;max-width:24ch}
.lead-feature .standfirst{margin-top:20px;max-width:58ch;
  font:300 clamp(19px,1.5vw,25px)/1.48 var(--sans);color:var(--ink-dim)}
.numpair{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,54px);align-items:flex-end;margin-top:34px}
.numpair div{min-width:0}
.numpair b{display:block;font:900 clamp(50px,6vw,104px)/.86 var(--sans);letter-spacing:-.04em;color:var(--accent)}
.numpair b.plain{color:var(--ink)}
.numpair span{display:block;margin-top:10px;font:600 13px/1.45 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);max-width:32ch}

/* ── figure system — four treatments, one drawing system ───── */
figure{margin:0}
.fig{margin-block:clamp(28px,3vw,46px)}
.fig + .fig,.breakout + .breakout,.notes-band + .notes-band{margin-top:clamp(40px,4vw,68px)}
.fig img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* caption block: sized by the CAPTION, never by the image.
   Desktop runs caption + credit on ONE row; closes up when short. */
.fig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.fig figcaption .cap{flex:1 1 30ch;min-width:min(100%,26ch);max-width:76ch;
  font:500 16px/1.45 var(--sans);color:var(--ink)}
.fig figcaption .cred{flex:0 1 auto;margin-left:auto;max-width:52ch;
  font:400 13px/1.45 var(--sans);letter-spacing:.06em;color:var(--quiet)}
.band--paper .fig figcaption,.band--blue .fig figcaption{border-top-color:rgba(16,19,20,.22)}
.band--paper .fig figcaption .cap{color:#1A1D1F}
.band--paper .fig figcaption .cred{color:#6B6355}
.band--blue .fig figcaption{border-top-color:rgba(244,241,233,.4)}
.band--blue .fig figcaption .cap{color:var(--paper)}
.band--blue .fig figcaption .cred{color:rgba(244,241,233,.72)}

/* 1 — plate: the photograph sits on a mat */
.fig--plate{background:var(--ground-2);padding:clamp(14px,1.4vw,22px);border:1px solid var(--line);
  border-top:3px solid var(--accent)}
.fig--plate img{aspect-ratio:4/3;object-fit:cover}
.fig--plate figcaption{margin-top:16px;padding:14px 2px 2px;border-top:1px solid var(--line);
  flex-direction:column;align-items:flex-start;gap:9px}
.fig--plate figcaption .cap{flex:0 1 auto;max-width:52ch;font-size:16.5px;line-height:1.5}
.fig--plate figcaption .cred{margin-left:0}

/* 2 — frame: inset hairline over the image + amber bar at the foot */
.fig--frame{position:relative}
.fig--frame .shot{position:relative}
.fig--frame .shot::after{content:"";position:absolute;inset:9px;border:1px solid rgba(244,241,233,.55);pointer-events:none}
.fig--frame figcaption{border-top:3px solid var(--accent);padding-top:13px}

/* 3 — bleed: breaks the measure, caption inset under the left edge */
.fig--bleed img{width:100%;aspect-ratio:16/7;max-height:min(78vh,760px);object-fit:cover}
.fig--bleed figcaption{max-width:var(--w-max);margin-inline:auto;padding-inline:var(--gut);
  flex-wrap:nowrap;align-items:baseline;gap:26px}
.fig--bleed figcaption .cap{flex:1 1 auto;max-width:none;min-width:0}
.fig--bleed figcaption .cred{flex:none;white-space:nowrap}
@media (max-width:700px){
  .fig--bleed figcaption{flex-wrap:wrap;gap:6px 20px}
  .fig--bleed figcaption .cred{white-space:normal}
}
/* bleed variant: caption rides in one row across the top of the image */
.fig--bleed.cap-top{position:relative}
.fig--bleed.cap-top figcaption{position:absolute;top:0;left:0;right:0;z-index:2;
  max-width:none;margin:0;padding:16px var(--gut) 20px;border-top:0;
  flex-wrap:nowrap;align-items:baseline;gap:26px;
  background:linear-gradient(to bottom,rgba(10,13,14,.9) 0%,rgba(10,13,14,.62) 62%,rgba(10,13,14,0) 100%)}
.fig--bleed.cap-top figcaption .cap{flex:1 1 auto;min-width:0;max-width:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fig--bleed.cap-top figcaption .cred{flex:none;white-space:nowrap}

/* 4 — side: image and caption share a row (grid item, so no float) */
.fig--side{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 26px;align-items:start;
  padding-top:16px;border-top:1px solid var(--line)}
.fig--side img{aspect-ratio:4/3}
.fig--side figcaption{margin-top:0;padding-top:0;border-top:0;flex-direction:column;align-items:flex-start;gap:10px}
.fig--side figcaption .cap{flex:0 1 auto;max-width:38ch;font-size:17px;line-height:1.5}
.fig--side figcaption .cred{margin-left:0}
@media (min-width:720px){
  .fig--side{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
}
@media (min-width:1200px){
  .fig--side{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
}

/* legacy inset (styleguide only) — never float inside the article grid */
.article .fig--inset{float:none;width:100%;margin-inline:0}
/* 5 — inset: small, in the column, prose runs beside it */
.fig--inset{float:right;width:min(46%,340px);margin:6px 0 20px 30px}
.fig--inset figcaption{margin-top:11px;padding-top:9px}
.fig--inset figcaption .cap{font-size:15px;flex-basis:100%}
.fig--inset figcaption .cred{margin-left:0;font-size:12.5px}

/* tint: keyed to the palette, used on decorative bands */
.fig--tint img{filter:saturate(.72) contrast(1.03)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.gallery figure{margin:0}
.gallery img{aspect-ratio:16/10;object-fit:cover}
.gallery figcaption{margin-top:10px;font:500 15px/1.4 var(--sans);color:var(--ink)}
.band--paper .gallery figcaption{color:#1A1D1F}

.map-figure .map-slot{aspect-ratio:16/9;background:var(--ground-2);border:1px dashed var(--line-strong)}

/* ── cards: even height, no ragged rows ───────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(20px,2vw,34px)}
.card{display:flex;flex-direction:column;background:transparent;color:inherit;
  border-top:2px solid var(--line-strong);padding-top:18px}
.card:hover{text-decoration:none}
.card__shot{aspect-ratio:16/10;overflow:hidden;background:var(--ground-3);margin-bottom:16px;
  position:relative;box-shadow:0 0 0 1px var(--line)}
.card__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,13,14,.5) 0%,rgba(10,13,14,0) 46%);
  box-shadow:inset 0 0 0 1px rgba(244,241,233,.14)}
.card__shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;
  filter:saturate(.88) contrast(1.04)}
.card:hover .card__shot img{transform:scale(1.035);filter:saturate(1) contrast(1.04)}
.card h3{font:400 clamp(20px,1.5vw,26px)/1.18 var(--serif);color:var(--ink);min-height:2.36em}
.card:hover h3{color:var(--accent)}
.card p{margin-top:10px;font:400 16px/1.5 var(--serif);color:var(--quiet)}
.card .kicker{margin-bottom:12px}
.card__foot{margin-top:auto;padding-top:16px;font:600 11.5px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.card--big h3{font-size:clamp(26px,2.6vw,40px);min-height:0}
.card--big{border-top-width:3px;border-top-color:var(--accent)}
.card--big .card__shot{aspect-ratio:16/9;margin-bottom:20px;flex:1 1 auto;min-height:0}
.card--big .card__shot img{height:100%}
.card--big .card__shot::after{background:linear-gradient(to top,rgba(10,13,14,.62) 0%,rgba(10,13,14,0) 52%)}
.card--big p{font-size:18px;max-width:52ch}
.band--paper .card{border-top-color:rgba(16,19,20,.3)}
.band--paper .card h3{color:#14171A}
.band--paper .card p{color:#5C5548}

/* the uneven seconds row: one large, two small */
.seconds{display:grid;gap:clamp(22px,2.4vw,40px);grid-template-columns:minmax(0,1fr)}

/* ── quiet line band ──────────────────────────────────────── */
.quiet-line{display:grid;gap:clamp(20px,2.6vw,44px);align-items:center;
  padding-top:clamp(22px,2.4vw,36px);border-top:1px solid rgba(244,241,233,.34)}
.quiet-line b{font:900 clamp(56px,8vw,150px)/.84 var(--sans);letter-spacing:-.04em;color:var(--paper)}
.quiet-line p{font:400 clamp(21px,2vw,34px)/1.24 var(--serif);max-width:30ch}
.quiet-line small{display:block;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(244,241,233,.34);
  font:400 16px/1.55 var(--serif);color:rgba(244,241,233,.86);max-width:48ch}
.quiet-line small a{border-bottom:1px solid rgba(244,241,233,.5)}
.quiet-line small a:hover{text-decoration:none;border-bottom-color:var(--paper)}

/* ── feed + supporters rail ───────────────────────────────── */
.feed-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,3.4vw,60px)}
.feed{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(26px,3vw,52px)}
@media (min-width:820px){
  .feed{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the first row runs the full width and carries a larger frame */
  .feed__item:first-child{grid-column:1/-1;grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:clamp(24px,2.6vw,40px);padding-block:28px}
  .feed__item:first-child h3{font-size:clamp(24px,2.1vw,34px);line-height:1.14}
  .feed__item:first-child p{font-size:17.5px;max-width:56ch}
  .feed__item:nth-child(2),.feed__item:nth-child(3){border-top:1px solid var(--line)}
  .feed__item:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (min-width:1400px){
  .feed{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feed__item:first-child{grid-column:1/-1;grid-template-columns:minmax(0,420px) minmax(0,1fr)}
  .feed__item:nth-child(-n+4){border-top:1px solid var(--line)}
  .feed__item:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
}
.feed__item{display:grid;grid-template-columns:minmax(0,116px) minmax(0,1fr);gap:20px;
  align-items:start;padding:22px 16px 22px 0;border-top:1px solid var(--line);color:inherit;
  transition:background .18s ease,padding-left .18s ease}
.feed__item:last-child{border-bottom:1px solid var(--line)}
.feed__item:hover{text-decoration:none;background:var(--ground-3);
  box-shadow:inset 3px 0 0 var(--accent);padding-left:16px}
.feed__item img{aspect-ratio:4/3;object-fit:cover;width:100%;
  filter:saturate(.88) contrast(1.04);box-shadow:0 0 0 1px var(--line)}
.feed__item h3{font:400 clamp(19px,1.4vw,24px)/1.2 var(--serif);color:var(--ink)}
.feed__item:hover h3{color:var(--accent)}
.feed__item p{margin-top:8px;font:400 15.5px/1.5 var(--serif);color:var(--quiet);max-width:64ch}
.feed__item .kicker{font-size:11px;margin-bottom:9px}

/* Supporters — a narrow RAIL beside the feed, uneven mosaic,
   name set as type (no logo), one block of 11.
   Tile width is CONSTANT; prominence is a class, never a position. */
.supporters{align-self:start;border:1px solid var(--line);background:var(--ground-2)}
.supporters__head{padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.supporters__head h2{font:600 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.supporters__head p{margin-top:8px;font:400 14.5px/1.5 var(--serif);color:var(--quiet)}
.mosaic{display:flex;flex-wrap:wrap;gap:1px}
.sponsor{flex:0 0 262px;max-width:100%;background:var(--ground-2);box-shadow:0 0 0 1px var(--line);
  display:flex;flex-direction:column;gap:7px;padding:15px 17px 16px;color:inherit}
.sponsor:hover{background:var(--ground-3);text-decoration:none}
.sponsor .sponsor-name{font:600 17px/1.28 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.sponsor:hover .sponsor-name{color:var(--accent)}
.sponsor .sponsor-blurb{font:400 14.5px/1.5 var(--serif);color:var(--quiet);min-width:200px}
.sponsor.feat{padding:20px 14px 22px 17px;background:var(--ground-3);border-left:3px solid var(--accent)}
.sponsor.feat .sponsor-name{font-size:23px;line-height:1.18}
.sponsor.feat .sponsor-blurb{font-size:15.5px;color:var(--ink-dim)}

/* horizontal variant — its own band, head left, tiles running across */
.supporters--row{border:0;background:transparent;display:grid;gap:clamp(20px,2.4vw,40px)}
.supporters--row .supporters__head{padding:0 0 14px;border-bottom:1px solid var(--line)}
.supporters--row .supporters__head p{max-width:36ch}
.supporters--row .mosaic{align-content:start}
.supporters--row .mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px}
.supporters--row .sponsor{flex:none;max-width:none}
.supporters--row .sponsor.feat{grid-column:span 2}
@media (max-width:520px){.supporters--row .sponsor.feat{grid-column:span 1}}
@media (min-width:900px){
  .supporters--row{grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:start}
  .supporters--row .supporters__head{border-bottom:0;border-right:1px solid var(--line);padding:0 24px 0 0}
}
@media (min-width:1200px){
  .supporters--row{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
}

/* ── sections hub strip ───────────────────────────────────── */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px}
.hub a{display:flex;flex-direction:column;gap:16px;padding:34px 24px 28px;background:var(--ground);
  box-shadow:0 0 0 1px var(--line);color:inherit;transition:background .18s ease}
.hub a:hover{background:var(--ground-2);text-decoration:none}
.hub .ico--lg{width:64px;height:64px;stroke-width:1.15;padding:12px;
  border:1px solid currentColor;border-radius:3px}
.hub a:hover .ico--lg{background:rgba(244,241,233,.06)}
.hub h3{font:600 13px/1.35 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);max-width:20ch}
.hub a:hover h3{color:var(--accent)}
.hub p{font:400 15px/1.5 var(--serif);color:var(--quiet);max-width:34ch}
.hub b{margin-top:auto;padding-top:14px;font:600 11px/1 var(--sans);
  letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);font-weight:600}

/* ── article ──────────────────────────────────────────────── */
.article{display:grid;column-gap:clamp(24px,3vw,56px);
  grid-template-columns:[a] minmax(var(--gut),1fr) [b] minmax(0,var(--prose)) [c] minmax(var(--gut),1fr) [d]}
.article > *{grid-column:b}
.article > .breakout{grid-column:a/d;width:min(100%,var(--w-wide));justify-self:center;padding-inline:var(--gut)}
.article > .full{grid-column:a/d;width:100%;padding-inline:0}
.article > .runright{grid-column:b/d;padding-right:var(--gut)}
.article > p,.article > .lead,.article > h2,.article > h3,.article > .note,.article > .pullquote{
  margin-block:0}
.article > p{margin-top:22px;font:400 clamp(18px,1.25vw,21px)/1.66 var(--serif);color:#DAD5CB}
.article > h2{margin-top:clamp(38px,3.4vw,58px);font:400 clamp(26px,2.2vw,36px)/1.16 var(--serif);max-width:30ch}
.article > h2 + p{margin-top:16px}
.article > h3{margin-top:32px;font:600 clamp(19px,1.3vw,23px)/1.25 var(--sans)}
.article p a{color:var(--accent);border-bottom:1px solid rgba(240,160,23,.4)}
.article p a:hover{color:var(--ink);border-bottom-color:var(--ink);text-decoration:none}

.article-head{padding-top:clamp(34px,3.6vw,60px);padding-bottom:clamp(10px,1.4vw,22px)}
.article-head h1{margin-top:18px;font:400 clamp(32px,4.4vw,72px)/1.02 var(--serif);
  letter-spacing:-.014em;max-width:20ch}
.article-head .standfirst{margin-top:22px;max-width:62ch;
  font:300 clamp(19px,1.7vw,27px)/1.44 var(--sans);color:var(--ink-dim)}
.article-head .meta{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
@media (min-width:1000px){
  .article-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    column-gap:clamp(30px,3.4vw,64px);align-items:end}
  .article-head .kicker{grid-column:1/-1}
  .article-head h1{grid-column:1;margin-top:20px}
  .article-head .standfirst{grid-column:2;margin-top:0;padding-bottom:6px}
  .article-head .meta{grid-column:1/-1}
}
.article-head .meta a{color:var(--quiet)}
.article-head .meta a:hover{color:var(--accent);text-decoration:none}

/* components — text */
.lead{margin-top:24px;font:300 clamp(20px,1.6vw,26px)/1.46 var(--sans);color:var(--ink)}
.pullquote{margin:clamp(34px,3.4vw,54px) 0;padding:clamp(24px,2.4vw,36px) clamp(22px,2.4vw,34px);
  border-left:4px solid var(--accent);background:var(--ground-2)}
.pullquote p{font:400 clamp(22px,2.1vw,32px)/1.22 var(--serif);color:var(--ink);max-width:34ch}
.blockquote{margin:clamp(28px,2.6vw,42px) 0 0;padding:22px 24px;background:var(--ground-2);border:1px solid var(--line)}
.blockquote p{font:400 clamp(18px,1.4vw,22px)/1.5 var(--serif);color:var(--ink)}
.blockquote cite{display:block;margin-top:12px;font-style:normal;
  font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.callout{margin:clamp(28px,2.6vw,42px) 0 0;padding:24px 26px;background:var(--accent);color:#1A1204}
.callout p{font:500 clamp(17px,1.3vw,20px)/1.5 var(--sans);max-width:62ch}
.callout .label{color:rgba(26,18,4,.66);display:block;margin-bottom:10px}
.note{margin-top:22px;padding-left:16px;border-left:2px solid var(--line-strong);
  font:400 16.5px/1.6 var(--serif);color:var(--quiet)}

/* components — data */
.datatable,.versus{width:100%;margin-top:26px;font-family:var(--sans)}
.datatable caption,.versus caption{text-align:left;padding-bottom:12px;
  font:600 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.datatable th,.versus th{text-align:left;padding:12px 14px 12px 0;border-bottom:2px solid var(--accent);
  font:600 11.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);vertical-align:bottom}
.datatable td,.versus td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);
  font:400 17px/1.4 var(--serif);color:var(--ink);vertical-align:top}
.datatable td:last-child,.versus td:last-child,
.datatable th:last-child,.versus th:last-child{padding-right:0}
.datatable td.num,.datatable th.num{text-align:right;font-family:var(--sans);font-weight:600}
.versus td:first-child{font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:.04em;color:var(--quiet);width:34%}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;margin-top:28px}
.statblock{background:var(--ground-2);box-shadow:0 0 0 1px var(--line);padding:22px 20px 24px;display:flex;flex-direction:column;gap:10px}
.stat-num{font:900 clamp(30px,2.9vw,48px)/.94 var(--sans);letter-spacing:-.03em;color:var(--accent);
  overflow-wrap:break-word;hyphens:auto}
.stat-label{font:500 14.5px/1.42 var(--sans);color:var(--ink-dim)}
.band--paper .statblock{background:#EAE6DC}
.band--paper .stat-label{color:#4A443A}

.timeline{list-style:none;margin-top:28px}
.timeline li{display:grid;grid-template-columns:minmax(0,158px) minmax(0,1fr);gap:8px 26px;
  padding:16px 0;border-top:1px solid var(--line);align-items:baseline}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.t-when{font:600 13px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  overflow-wrap:break-word}
.t-what{font:400 17px/1.55 var(--serif);color:var(--ink)}

/* .article-figure — the plain named figure from the component spec */
.article-figure{margin-block:clamp(28px,3vw,46px)}
.article-figure img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;
  margin-top:14px;padding-top:12px;border-top:3px solid var(--accent);
  font:500 16px/1.45 var(--sans);color:var(--ink)}
.article-figure figcaption .cred{margin-left:auto;font:400 13px/1.45 var(--sans);
  letter-spacing:.06em;color:var(--quiet)}

.map-figure figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font:500 16px/1.45 var(--sans);color:var(--ink)}
.map-figure .map-slot{display:flex;align-items:flex-end;padding:18px}
.map-figure .map-slot span{font:600 12px/1.5 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--quiet);max-width:44ch}

.chart figcaption{margin-top:12px;font:400 14.5px/1.5 var(--sans);color:var(--quiet)}
.chart .plot{width:100%}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .bar-fill{fill:var(--accent)}
.chart .bar-fill--alt{fill:var(--second)}
.chart .axis{stroke:var(--line-strong);stroke-width:1}
.chart text{font:500 12.5px var(--sans);fill:var(--ink-dim)}
.chart .val{font-weight:700;fill:var(--accent)}

/* components — cards & references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:1px;margin-top:28px}
.profile-card{background:var(--ground-2);box-shadow:0 0 0 1px var(--line);padding:0 0 22px;display:flex;flex-direction:column}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:18px}
.profile-card.no-photo{padding-top:22px;border-top:3px solid var(--second)}
.profile-card h3,.profile-card .p-role,.profile-card p,.profile-card .p-links,.profile-card .p-attr{
  padding-inline:20px}
.profile-card h3{font:400 22px/1.18 var(--serif);color:var(--ink)}
.profile-card .p-role{margin-top:7px;font:600 11.5px/1.35 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.profile-card p{margin-top:12px;font:400 16px/1.55 var(--serif);color:var(--quiet)}
.profile-card .p-links{margin-top:auto;padding-top:16px;font:600 12px/1.5 var(--sans);letter-spacing:.1em}
.profile-card .p-attr{margin-top:10px;font:400 12.5px/1.45 var(--sans);color:var(--quiet)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;margin-top:26px}
.org-card{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;background:var(--ground-2);
  box-shadow:0 0 0 1px var(--line);color:inherit}
.org-card:hover{background:var(--ground-3);text-decoration:none}
.org-card .org-logo{height:26px;width:auto;max-width:100%;object-fit:contain}
.org-card.no-logo{border-left:3px solid var(--second)}
.org-name{font:600 16px/1.3 var(--sans);color:var(--ink)}
.org-host{font:400 13px/1.3 var(--sans);letter-spacing:.06em;color:var(--quiet)}

.entity-ref{font-weight:600;white-space:nowrap}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;margin-top:24px}
.further-grid a{display:block;padding:20px;background:var(--ground-2);box-shadow:0 0 0 1px var(--line);color:var(--ink);
  font:400 19px/1.28 var(--serif)}
.further-grid a:hover{background:var(--ground-3);color:var(--accent);text-decoration:none}

.related-links{list-style:none;margin-top:20px}
.related-links li{border-top:1px solid var(--line)}
.related-links li:last-child{border-bottom:1px solid var(--line)}
.related-links a{display:flex;gap:14px;align-items:baseline;padding:15px 0;
  font:400 19px/1.3 var(--serif);color:var(--ink)}
.related-links a:hover{color:var(--accent);text-decoration:none}
.related-links .ico{color:var(--quiet);margin-top:.24em}

/* notes-for-design material: full-bleed and breakout interruptions */
.notes-band{background:var(--ground-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.notes-band .band__head{margin-bottom:22px}
.notes-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(22px,2.4vw,44px)}
.deflist{list-style:none}
.deflist li{padding:14px 0;border-top:1px solid var(--line)}
.deflist li:last-child{border-bottom:1px solid var(--line)}
.deflist b{display:block;font:600 15px/1.35 var(--sans);color:var(--accent)}
.deflist span{display:block;margin-top:6px;font:400 16px/1.55 var(--serif);color:var(--ink-dim)}

.related-band{margin-top:clamp(44px,4.4vw,76px);border-top:1px solid var(--line);background:var(--ground-2)}
.related-band .card{border-top-color:var(--line-strong)}

/* category / archive lists */
.cat-list{list-style:none;margin-top:8px}
.cat-list li{border-top:1px solid var(--line)}
.cat-list li:last-child{border-bottom:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:minmax(0,44px) minmax(0,1fr) minmax(0,auto);
  gap:10px 24px;align-items:baseline;padding:20px 0;color:inherit}
.cat-list a:hover{text-decoration:none}
.cat-list .n{font:400 13px/1.5 var(--sans);letter-spacing:.14em;color:var(--quiet)}
.cat-list strong{font:400 clamp(20px,1.6vw,26px)/1.24 var(--serif);font-weight:400;color:var(--ink);display:block}
.cat-list a:hover strong{color:var(--accent)}
.cat-list em{display:block;margin-top:8px;font-style:normal;
  font:400 16px/1.5 var(--serif);color:var(--quiet);max-width:78ch}
.cat-list .tag{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);white-space:nowrap}

.expander{margin-top:8px}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked ~ .cat-list .more{display:block}
.expander label{display:inline-block;margin-top:18px;padding:11px 18px;border:1px solid var(--line-strong);
  font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.expander label:hover{border-color:var(--accent);color:var(--accent)}
.expander input:checked ~ label{display:none}

/* section opener */
.sec-head{display:grid;gap:clamp(22px,2.6vw,44px);align-items:end}
.sec-head .no{font:900 clamp(58px,7vw,120px)/.82 var(--sans);letter-spacing:-.04em;color:var(--accent)}
.sec-head h1{font:400 clamp(30px,3.4vw,54px)/1.06 var(--serif);max-width:28ch}
.sec-head p{margin-top:20px;font:400 clamp(18px,1.35vw,22px)/1.58 var(--serif);color:var(--ink-dim);max-width:66ch}
.subnav{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.subnav a{padding:10px 15px;border:1px solid var(--line-strong);
  font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.subnav a:hover,.subnav a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#141210;text-decoration:none}

/* ── footer ───────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);margin-top:clamp(50px,5vw,90px);background:var(--ground-2)}
.foot__top{padding-block:clamp(36px,3.6vw,58px) clamp(28px,2.8vw,42px)}
.foot__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,54px);align-items:start}
.foot__mark b,.foot__mark i{display:inline;font:900 clamp(30px,3.4vw,46px)/.92 var(--sans);
  letter-spacing:-.035em;text-transform:uppercase;font-style:normal}
.foot__mark b{color:var(--ink)}
.foot__mark i{margin-left:.22em;color:transparent;-webkit-text-stroke:1.6px var(--accent)}
.foot p{margin-top:16px;max-width:52ch;font:400 17px/1.55 var(--serif);color:var(--ink-dim)}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,40px)}
@media (max-width:620px){.foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.foot__cols{grid-template-columns:minmax(0,1fr)}}
.foot__col h3{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.foot__col a{display:flex;align-items:center;gap:11px;padding:9px 0;
  font:600 12.5px/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.foot__col a:hover{color:var(--accent);text-decoration:none}
.foot__col a .ico{width:22px;height:22px;padding:3px;border:1px solid currentColor;border-radius:2px;stroke-width:1.6}
.foot__bottom{border-top:1px solid var(--line);padding-block:18px 22px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between}
.foot__bottom small{font:400 12.5px/1.5 var(--sans);letter-spacing:.06em;color:var(--quiet)}
.foot__rule{color:var(--second);flex:1 1 160px;min-width:110px;max-width:420px}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.foot nav a{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.foot nav a:hover{color:var(--accent);text-decoration:none}
.foot .mark{color:var(--accent)}

/* ── responsive: mobile-up to desktop ─────────────────────── */
@media (min-width:640px){
  :root{--gut:30px}
  .feed__item{grid-template-columns:minmax(0,148px) minmax(0,1fr)}
  .seconds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiet-line{grid-template-columns:auto minmax(0,1fr);align-items:center}
}
@media (min-width:900px){
  :root{--body:19px;--gut:38px}
  .lead-feature{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
  .seconds{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .seconds .card--big{grid-row:span 2}
  .foot__in{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:start}
  .sec-head{grid-template-columns:auto minmax(0,1fr)}
}
@media (min-width:1440px){
  .masthead__in{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:44px;padding-bottom:14px}
  .nav{border-top:0;justify-content:flex-end;padding-bottom:8px}
}
@media (min-width:1080px){
  .feed-rail{grid-template-columns:minmax(0,1fr) 264px}
  .supporters:not(.supporters--row) .sponsor{flex:0 0 262px}
}

/* ── ABOVE THE DESKTOP CAP — the page gains, not the margin ── */
@media (min-width:1200px){
  :root{--body:19px;--prose:72ch;--w-wide:1180px;--w-max:1500px;--gut:44px}
  .foot__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .feed-rail{grid-template-columns:minmax(0,1fr) 300px}
  .supporters:not(.supporters--row) .sponsor{flex:0 0 298px}
  .fig--inset{width:min(42%,380px);margin-left:38px}
}
@media (min-width:1600px){
  :root{--body:20px;--prose:78ch;--w-wide:1420px;--w-max:1700px;--gut:56px}
  .feed-rail{grid-template-columns:minmax(0,1fr) 360px}
  .supporters:not(.supporters--row) .sponsor{flex:0 0 358px}
  .mosaic{gap:1px}
  .seconds{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr)}
  .seconds .card--big{grid-row:span 1}
  .hub{grid-template-columns:repeat(4,minmax(0,1fr))}
  .article > .runright{grid-column:b/d}
  .cards{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
}
@media (min-width:2000px){
  :root{--body:20px;--prose:80ch;--w-wide:1420px;--w-max:1700px;--gut:60px}
  .feed-rail{grid-template-columns:minmax(0,1fr) 380px}
  .supporters:not(.supporters--row) .sponsor{flex:0 0 378px}
  .feed__item{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:30px}
  .notes-cols{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
  .statrow{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}
/* the shell stops growing here — the page is centred, not stretched */
@media (min-width:1820px){
  html{background:#0A0D0E}
  body{max-width:1780px;margin-inline:auto;border-inline:1px solid var(--line)}
}
@media (min-width:2400px){
  :root{--body:20px;--prose:80ch;--w-wide:1420px;--w-max:1700px;--gut:60px}
}

@media (max-width:780px){
  .chart .plot{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .chart .plot svg{min-width:700px}
}
@media (max-width:1100px){
  .hub{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .fig--bleed.cap-top figcaption{position:static;background:none;padding:0;
    flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
  .fig--bleed.cap-top figcaption .cap{white-space:normal;overflow:visible}
}
@media (max-width:820px){
  .masthead__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;
    column-gap:16px;padding:16px var(--gut) 16px}
  .wordmark span{display:none}
  .nav-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;min-height:46px;
    border:1px solid var(--line-strong);cursor:pointer;
    font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
  .nav-btn:hover{border-color:var(--accent);color:var(--accent)}
  .nav-btn__bars{display:grid;gap:4px;width:18px}
  .nav-btn__bars span{display:block;height:2px;background:currentColor}
  .nav-btn__close{display:none}
  .nav-toggle:checked ~ .nav-btn .nav-btn__open{display:none}
  .nav-toggle:checked ~ .nav-btn .nav-btn__close{display:inline}
  .nav-toggle:focus-visible ~ .nav-btn{outline:2px solid var(--accent);outline-offset:3px}
  .nav{grid-column:1/-1;flex-direction:column;align-items:stretch;
    gap:0;border-top:1px solid var(--line);margin-top:14px;padding-bottom:8px}
  .masthead__in:has(.nav-toggle) .nav{display:none}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav__item{border-bottom:1px solid var(--line)}
  .nav__item--has > .nav__link::after{display:none}
  .nav__link{display:flex;width:100%;min-height:52px;padding:14px 2px;font-size:14px;letter-spacing:.1em}
  .nav__panel{display:none}
  .nav__item--has::after{display:none}
}
@media (max-width:560px){
  .fig--inset{float:none;width:100%;margin:24px 0}
  .feed__item{grid-template-columns:minmax(0,84px) minmax(0,1fr);gap:16px}
  .cat-list a{grid-template-columns:minmax(0,1fr)}
  .cat-list .tag{margin-top:6px}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .sponsor{flex:1 1 100%}
  .wordmark b,.wordmark i{font-size:clamp(26px,7.6vw,36px)}
  .wordmark i{-webkit-text-stroke-width:1.5px}
}

/* ── phones: every interruption, table and grid holds at 360px ── */
@media (max-width:700px){
  :root{--gut:18px;--body:17px}
  .article{column-gap:0;
    grid-template-columns:[a] var(--gut) [b] minmax(0,1fr) [c] var(--gut) [d]}
  .article > .runright{grid-column:b;padding-right:0}
  /* the framed and plated figures keep the page gutter; only the bleed runs edge to edge */
  .article > .breakout{padding-inline:var(--gut)}
  .article > .breakout,.notes-band .wrap-wide{padding-inline:var(--gut)}
  .article > h2{margin-top:clamp(30px,7vw,44px)}
  .statrow{grid-template-columns:minmax(0,1fr)}
  .statblock{padding:18px 16px 20px}
  .stat-num{font-size:34px}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0}
  .t-when{font-size:12px;letter-spacing:.12em}
  .t-what{font-size:16.5px}
  .deflist li{padding:12px 0}
  .callout{padding:18px 18px 20px}
  .pullquote{padding:20px 18px}
  .pullquote p{font-size:21px;line-height:1.26}
  .blockquote{padding:18px 18px}
  .fig--plate{padding:12px}
  .fig--side{gap:14px}
  .fig--frame .shot::after{inset:6px}
  .fig--bleed img{aspect-ratio:4/3;max-height:62vh}
  .article-head h1{font-size:clamp(28px,8.4vw,40px)}
  .article-head .standfirst{font-size:18px}
  .band__head{gap:10px 12px;margin-bottom:20px;flex-wrap:wrap}
  .band__head .rule{flex:1 0 100%}
  .band__title{font-size:11px;letter-spacing:.16em}
  .datatable td,.versus td{font-size:16px;padding:12px 10px 12px 0}
  .datatable th,.versus th{font-size:10.5px;letter-spacing:.12em}
  .versus td:first-child{width:38%;font-size:13px}
  .map-figure .map-slot{aspect-ratio:4/3;padding:14px}
  .map-figure .map-slot span{font-size:11px;letter-spacing:.12em}
  .profile-grid,.org-grid,.further-grid{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card h3{min-height:0}
  .seconds{grid-template-columns:minmax(0,1fr)}
  .sec-head .no{font-size:56px}
  .subnav a{min-height:44px;display:inline-flex;align-items:center}
  .cat-list a{padding:16px 0;gap:6px}
  .expander label{min-height:46px;display:inline-flex;align-items:center}
  .foot__col a{min-height:44px}
  .quiet-line b{font-size:64px}
  .signature b{font-size:38px}
  .signature em{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* 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}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

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

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

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
: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-unify-mosaic: operator: "first 3 items were meant to be unique in formatting but it doesnt
   work. unify all formatting." The featured three span two columns, sit on --ground-3 with an
   accent border and carry larger type, which in a narrow rail reads as three odd tiles rather
   than a lead tier. They now take the same single column, ground and type as the other eight. */
.supporters--row .mosaic .sponsor.feat{grid-column:span 1}
/* ⚠️ background:none left the top three TRANSPARENT while the other eight sit on --ground-2 —
   still two treatments, just the other way round. They take the same ground. */
.mosaic .sponsor.feat{background:var(--ground-2);border-left:0}
/* ⚠️ font-size:inherit inherits from the TILE, not from the rule the other tiles use, so the
   featured three kept reading larger. The non-feat values are stated instead: 17px/1.28 name,
   14.5px/1.5 blurb, --quiet ink, and the same 15px/17px padding. */
.mosaic .sponsor.feat{padding:15px 17px 16px}
.mosaic .sponsor.feat .sponsor-name{font:600 17px/1.28 var(--sans);letter-spacing:-.005em}
.mosaic .sponsor.feat .sponsor-blurb{font:400 14.5px/1.5 var(--serif);color:var(--quiet)}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 921px at 390, 11% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 921 -> 741px (20% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:min(1.81vw,26px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px}
}

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

}

/* op-blurb-rows: money blurbs ran to 4 rows at 390, 755px of tier across
   11 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped.
   11 of these tiles carry no mark, so the blurb IS the tile — the copy is clipped
   for display, never removed, and the tile keeps its shape. */
@media (max-width:640px){
  .mosaic .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:66px!important;min-height:0!important;overflow:hidden!important}
}

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

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

/* op-article-seam: text ran into the band that follows it (0-7px) — operator: "end of paragraph nearly touches intersection. Padding is missing." The section now keeps Design's own gap before the band: p → blockquote.pullquote: 22px (the gap after the band). */
  article.article > p:has(+ blockquote.pullquote){padding-bottom:22px!important}
/* op-article-seam:end */
@media (max-width:719px){.fig--bleed figcaption .cred.cred{flex:0 1 auto!important;min-width:0!important;white-space:normal!important}}
.fig--bleed figcaption .cred.cred{flex:0 1 auto!important;min-width:0!important;white-space:normal!important}