/* fuel2000.com — "Cold-Press"
   Palette, each member with a job:
     --paper      ground          #f0ead9  cream page ground
     --ink        ink             #131c3f  text, masthead ground, footer ground
     --accent     accent          #ff6a1f  saturated orange — band grounds, marks, ink-on-dark
     --accent-ink accent (on cream)#c2410c same hue, darkened so it clears text contrast at 15px
     --secondary  secondary       #35406e  saturated indigo — panel grounds, section furniture
     --mat        figure mat      #dcd7c6
   The two saturated members (#ff6a1f, #35406e) are ~206 degrees apart in hue and each
   carries a full-width band on the homepage, not just a rule. */

:root{
  --paper:#f0ead9;
  --ink:#131c3f;
  --accent:#ff6a1f;
  --accent-ink:#c2410c;
  --secondary:#35406e;
  --mat:#dcd7c6;
  --quiet:#56608a;         /* credits / meta on cream  4.9:1 */
  --quiet-rev:#8f9ab8;     /* credits / meta on ink     6.4:1 */
  --rule:#b3a888;
  --ink-2:#1b2550;

  --f-display:Bitter,Georgia,"Times New Roman",serif;
  --f-ui:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --body:17.5px;
  --prose:70ch;
  --breakout:1000px;
  --page:min(92vw,1180px);
  --gutter:clamp(18px,4vw,40px);
  --hang:0px;
  --pad:var(--gutter);
  --gap:clamp(28px,3vw,56px);
  --band:clamp(56px,7vw,132px);
}
@media (min-width:768px){ :root{ --body:18px; --page:min(92vw,1180px) } }
@media (min-width:1024px){ :root{ --body:18.5px; --breakout:1080px; --page:min(92vw,1320px) } }
@media (min-width:1440px){ :root{ --body:19px; --breakout:1180px; --page:min(92vw,1560px) } }
/* — real rules above the desktop cap: measure, type, breakout and page all step up — */
@media (min-width:1600px){ :root{ --body:20px; --prose:74ch; --breakout:1280px; --page:min(93vw,1840px) } }
@media (min-width:2000px){ :root{ --body:21.5px; --prose:78ch; --breakout:1440px; --page:min(93vw,2200px) } }
@media (min-width:2400px){ :root{ --body:23px; --prose:82ch; --breakout:1620px; --page:min(94vw,2520px) } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-display); font-size:var(--body); line-height:1.62;
  font-weight:400; text-wrap:pretty;
}
img{ max-width:100%; display:block }
a{ color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--ink); background:var(--accent); text-decoration:none }
::selection{ background:var(--accent); color:var(--ink) }
:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:2px }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.06; letter-spacing:-.012em; margin:0 }
.icon{ width:1.15em; height:1.15em; flex:none; vertical-align:-.18em }

/* ---------- shells ---------- */
.wrap{ width:var(--page); margin-inline:auto; padding-inline:var(--pad) }
.measure{ max-width:var(--prose) }
.breakout{ max-width:var(--breakout) }
.kicker{
  font-family:var(--f-ui); font-weight:600; font-size:clamp(12px,.24vw+10px,15px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
  display:flex; align-items:center; gap:.55em; margin:0
}
.kicker a{ color:inherit; text-decoration:none }
.kicker a:hover{ background:none; color:var(--ink) }

/* ---------- masthead ---------- */
.masthead{ background:var(--ink); color:var(--paper) }
.masthead a{ color:var(--paper) }
.masthead-in{
  width:var(--page); margin-inline:auto; padding:clamp(14px,1.6vw,30px) var(--pad) clamp(10px,1vw,18px);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(14px,2vw,54px);
}
.wordmark{ display:flex; align-items:center; gap:clamp(10px,.9vw,18px); text-decoration:none; flex:0 1 auto }
.wordmark:hover{ background:none }
.wordmark .name{
  font-family:var(--f-display); font-weight:700; font-size:clamp(30px,3.4vw,64px);
  line-height:.9; letter-spacing:-.03em; color:var(--paper)
}
.wordmark .name em{ font-style:normal; color:var(--accent) }
.standing{
  font-family:var(--f-ui); font-size:clamp(13px,.26vw+10px,17px); line-height:1.45;
  color:var(--quiet-rev); margin:0 0 .25em; max-width:52ch; flex:1 1 22ch
}
/* nav */
.nav{ background:var(--ink); border-top:1px solid #2b3663 }
.nav-in{ width:var(--page); margin-inline:auto; padding-inline:var(--pad) }
.nav ul{ list-style:none; margin:0; padding:0 }
.nav > .nav-in > ul{ display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,52px) }
.nav > .nav-in > ul > li{ position:relative }
.nav a{
  display:flex; align-items:center; gap:.5em; text-decoration:none; color:var(--paper);
  font-family:var(--f-ui); font-weight:600; font-size:clamp(13px,.2vw+11px,16px);
  letter-spacing:.13em; text-transform:uppercase; padding:clamp(10px,1vw,16px) 0;
  border-bottom:3px solid transparent;
}
.nav a:hover,.nav a:focus-visible{ background:none; color:var(--accent); border-bottom-color:var(--accent) }
.nav a[aria-current]{ color:var(--accent); border-bottom-color:var(--accent) }
@media (min-width:700px){
  .has-sub > a::after{ content:"+"; font-family:var(--f-mono); font-size:.8em; opacity:.6; margin-left:.4em }
}
.sub{
  position:absolute; left:-14px; top:100%; z-index:40; min-width:230px;
  background:var(--ink-2); border:1px solid #3d4a80; padding:6px 0;
  opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .12s, transform .12s;
}
.has-sub::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px } /* hover bridge */
.has-sub:hover .sub,.has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:none }
.sub a{
  padding:9px 16px; border-bottom:0; letter-spacing:.1em; font-weight:500;
  font-size:clamp(12px,.18vw+10px,14px); color:var(--paper)
}
.sub a:hover{ background:var(--secondary); color:var(--paper); border-bottom:0 }
@media (max-width:699px){
  .sub{ position:static; opacity:1; visibility:visible; transform:none; display:none }
  .nav > .nav-in > ul{ gap:0 18px }
  .nav a{ padding:9px 0 }
}

/* ---------- the site's one drawn device: the catalogue-card mark ---------- */
.cat-mark{
  position:absolute; top:clamp(10px,1vw,20px); right:clamp(10px,1vw,20px); z-index:5;
  display:flex; align-items:center; justify-content:center;
  width:92px; height:52px; color:var(--paper);
  background:rgba(19,28,63,.82); backdrop-filter:saturate(140%) blur(2px);
}
.cat-mark svg{ position:absolute; inset:0; width:100%; height:100%; color:inherit }
.cat-mark span{
  font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; position:relative
}
.cat-mark.on-paper{ color:var(--ink); background:rgba(240,234,217,.9) }

/* ---------- figure system — three treatments, one drawing system ---------- */
/* caption + credit: one row on desktop, closes up when the caption is short,
   wraps when it is long; the box is never sized by the image. */
.cap{
  font-family:var(--f-ui); font-size:clamp(13.5px,.24vw+11px,16px); line-height:1.45;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3em 1.6em; margin:0;
}
.cap .c-text{ flex:1 1 22ch; max-width:74ch; margin:0 }
.cap .c-credit{
  flex:0 1 auto; margin:0; font-size:.78em; font-style:italic; color:var(--quiet);
  letter-spacing:.02em; white-space:normal
}

/* (1) mat */
.fig-mat{ margin:0; position:relative }
.fig-mat .plate{ background:var(--mat); padding:clamp(10px,1vw,20px); box-shadow:8px 8px 0 var(--secondary); position:relative }
.fig-mat img{ width:100% }
.fig-mat .cap{ margin-top:clamp(10px,.9vw,18px); padding-top:9px; border-top:2px solid var(--accent-ink) }

/* (2) bleed — caption reversed in an ink bar at the base of the image */
.fig-bleed{ margin:0; position:relative }
.fig-bleed .plate{ position:relative }
.fig-bleed img{ width:100%; max-height:min(74vh,1000px); object-fit:cover }
.fig-bleed .cap{
  background:var(--ink); color:var(--paper); padding:clamp(12px,1.1vw,22px) var(--pad);
}
.fig-bleed .cap .c-text{ max-width:80ch }
.fig-bleed .cap .c-credit{ color:var(--quiet-rev) }

/* (3) square-on object */
.fig-object{ margin:0; text-align:center }
.fig-object .plate{
  background:#fff; border:1px solid var(--rule); padding:clamp(12px,1vw,20px);
  max-width:480px; margin-inline:auto
}
.fig-object img{ width:100% }
.fig-object .cap{ justify-content:center; text-align:center; margin-top:12px; max-width:480px; margin-inline:auto }
.fig-object .cap .c-text{ flex:1 1 100% }
.fig-object .cap .c-credit{ flex:1 1 100% }

.article-figure{ margin:0 } /* styleguide alias — same as mat */
.article-figure .plate{ background:var(--mat); padding:clamp(10px,1vw,20px); box-shadow:8px 8px 0 var(--secondary) }
.article-figure figcaption,.fig-mat figcaption{ margin:0 }

/* ---------- homepage bands ---------- */
.band{ padding-block:var(--band) }
.band-tight{ padding-block:clamp(32px,4vw,72px) }
.band-ink{ background:var(--ink); color:var(--paper) }
.band-ink a{ color:var(--accent) }
.band-secondary{ background:var(--secondary); color:var(--paper) }
.band-secondary a{ color:var(--paper) }
.band-accent{ background:var(--accent); color:var(--ink) }
.band-accent a{ color:var(--ink) }
.band-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6em 1.6em;
  border-bottom:2px solid currentColor; padding-bottom:clamp(8px,.7vw,15px); margin-bottom:clamp(20px,2vw,44px)
}
.band-head h2{ font-size:clamp(23px,1.9vw,42px); margin:0; flex:1 1 18ch }
.band-head .more{
  font-family:var(--f-ui); font-weight:600; font-size:clamp(13px,.2vw+11px,16px);
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none; white-space:nowrap
}

/* lead */
.lead-fig{ position:relative }
.lead-fig img{ width:100%; height:min(80vh,1080px); object-fit:cover }
.lead-copy{ padding-top:clamp(18px,1.8vw,40px) }
.lead-copy h1{ font-size:clamp(34px,4.6vw,104px); max-width:26ch }
.lead-copy .deck{
  font-family:var(--f-ui); font-size:clamp(17px,.7vw+12px,28px); line-height:1.36;
  max-width:56ch; margin:clamp(14px,1.2vw,28px) 0 0
}
.lead-copy .more{ display:inline-block; margin-top:clamp(14px,1.2vw,26px) }

/* timeline spine band (homepage) */
.spine{ overflow-x:auto; padding-bottom:8px }
.spine ol{
  list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(116px,1fr); min-width:700px;
}
.spine li{ position:relative; padding-top:clamp(26px,2.4vw,44px) }
.spine li::before{ content:""; position:absolute; left:0; right:0; top:12px; height:2px; background:var(--quiet-rev) }
.spine li::after{ content:""; position:absolute; left:0; top:6px; width:2px; height:14px; background:var(--quiet-rev) }
.spine li.hit::after{ width:11px; height:11px; border-radius:50%; background:var(--accent); top:7px; left:-1px }
.spine .y{
  display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(21px,1.5vw,34px);
  line-height:1; color:var(--accent); letter-spacing:-.02em
}
.spine a{ text-decoration:none; color:var(--paper) }
.spine .w{
  display:block; font-family:var(--f-ui); font-size:clamp(13px,.24vw+11px,16px); line-height:1.3;
  margin-top:.45em; padding-right:14px; text-wrap:balance
}
.spine ol{ padding-right:var(--gutter) }
.spine a:hover .w{ color:var(--accent) }

/* asymmetric monograph grid */
.monos{ display:grid; gap:clamp(18px,2vw,44px); grid-template-columns:1fr }
@media (min-width:760px){ .monos{ grid-template-columns:repeat(6,1fr) } }
.mono{ text-decoration:none; color:inherit; display:flex; flex-direction:column; grid-column:span 6 }
.mono:hover{ background:none }
.mono img{ width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--mat) }
.mono h3{ font-size:clamp(20px,1.35vw,32px); margin:clamp(10px,.8vw,18px) 0 0 }
.mono:hover h3{ color:var(--accent-ink) }
.mono .m-meta{
  font-family:var(--f-ui); font-size:clamp(12.5px,.2vw+10px,15px); letter-spacing:.1em;
  text-transform:uppercase; color:var(--quiet); margin:.5em 0 0
}
.mono p{ margin:.55em 0 0; font-size:.94em }
@media (min-width:760px){
  .mono--xl{ grid-column:span 4 } .mono--xl img{ aspect-ratio:21/10 }
  .mono--xl h3{ font-size:clamp(26px,2.3vw,52px) }
  .mono--l{ grid-column:span 2 } .mono--l img{ aspect-ratio:4/5 }
  .mono--m{ grid-column:span 2 } .mono--m img{ aspect-ratio:1/1 }
  .mono--s{ grid-column:span 2; align-self:end }
  .mono--s img{ aspect-ratio:3/2 }
}

/* rooms panel — image near-full-bleed, text alongside */
.panel{ display:grid; gap:0; grid-template-columns:1fr }
@media (min-width:900px){ .panel{ grid-template-columns:minmax(0,1.62fr) minmax(280px,.95fr) } }
.panel .pic{ position:relative }
.panel .pic img{ width:100%; height:100%; min-height:280px; object-fit:cover }
.panel .say{ padding:clamp(24px,2.4vw,64px) var(--pad) }
.panel .say h2{ font-size:clamp(25px,2.2vw,48px) }
.panel .say p{ margin:clamp(12px,1vw,22px) 0 0; max-width:44ch }
.panel .say .more{
  display:inline-block; margin-top:clamp(14px,1.2vw,28px); font-family:var(--f-ui); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; font-size:clamp(13px,.2vw+11px,16px); text-decoration:none
}

/* sleeves strip — three equal images, captions below, nothing else */
.strip{ display:grid; gap:clamp(14px,1.6vw,36px); grid-template-columns:1fr }
@media (min-width:700px){ .strip{ grid-template-columns:repeat(3,1fr) } }
.strip figure{ margin:0 }
.strip img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--mat) }
.strip .cap{ margin-top:clamp(9px,.8vw,16px) }

/* trade — one dated figure, typographic */
.figure-shout{ display:grid; gap:clamp(18px,2vw,64px); grid-template-columns:1fr; align-items:end }
@media (min-width:860px){ .figure-shout{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) } }
.figure-shout .num{
  font-family:var(--f-display); font-weight:700; font-size:clamp(104px,14.5vw,330px);
  line-height:.76; letter-spacing:-.055em; margin:0
}
.figure-shout .num sup{ font-size:.34em; top:-.9em; letter-spacing:0 }
.figure-shout .say{ font-size:clamp(18px,.8vw+12px,30px); line-height:1.34; margin:0; max-width:46ch }
.figure-shout .src{
  font-family:var(--f-ui); font-size:clamp(12.5px,.2vw+10px,15px); letter-spacing:.1em;
  text-transform:uppercase; margin:clamp(12px,1vw,22px) 0 0
}

/* ---------- supporters ---------- */
.supporters{ background:var(--ink); color:var(--paper); padding-block:clamp(30px,3.2vw,64px) }
.supporters h2{
  font-family:var(--f-ui); font-weight:600; font-size:clamp(12px,.2vw+10px,15px);
  letter-spacing:.18em; text-transform:uppercase; color:var(--quiet-rev); margin:0 0 clamp(16px,1.6vw,32px)
}
.sponsor-group{ display:grid; grid-template-columns:repeat(auto-fit,240px); gap:clamp(14px,1.4vw,28px); justify-content:start }
.sponsor-group + .sponsor-group{ margin-top:clamp(20px,2vw,40px); padding-top:clamp(20px,2vw,40px); border-top:1px solid #2b3663 }
.sponsor{
  flex:0 0 240px; width:240px; text-decoration:none; color:var(--paper);
  display:flex; flex-direction:column; gap:10px;
}
.sponsor:hover{ background:none }
.sponsor .logo-box{
  background:#0b1230; border:1px solid #2b3663; height:64px; padding:10px 14px;
  display:flex; align-items:center; justify-content:center
}
.sponsor .logo-box img{ height:auto; max-height:44px; width:auto; max-width:100%; padding:0; background:none; border:0; object-fit:contain }
.sponsor-name{
  font-family:var(--f-ui); font-weight:600; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; white-space:normal; overflow-wrap:break-word
}
.sponsor-blurb{ font-family:var(--f-ui); font-size:13.5px; line-height:1.4; color:var(--quiet-rev) }
.sponsor:hover .sponsor-name{ color:var(--accent) }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--paper); border-top:1px solid #2b3663 }
.foot-in{
  width:var(--page); margin-inline:auto; padding:clamp(24px,2.4vw,60px) var(--pad);
  display:flex; flex-wrap:wrap; gap:clamp(20px,2.4vw,72px); align-items:flex-start
}
.foot p{ margin:0; flex:1 1 30ch; max-width:56ch; font-family:var(--f-ui); font-size:clamp(14px,.24vw+11px,18px); line-height:1.45; color:var(--paper) }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(12px,1.4vw,38px) }
.foot a{
  color:var(--paper); text-decoration:none; font-family:var(--f-ui); font-weight:600;
  font-size:clamp(13px,.2vw+11px,16px); letter-spacing:.12em; text-transform:uppercase
}
.foot a:hover{ color:var(--accent); background:none }

/* ---------- article ---------- */
.art-head{ padding-block:clamp(24px,2.6vw,60px) clamp(18px,1.8vw,38px) }
.art-head h1{ font-size:clamp(31px,3.9vw,88px); max-width:30ch; margin:clamp(12px,1vw,24px) 0 0 }
.art-head .lead{ margin-top:clamp(14px,1.4vw,32px) }
.lead{
  font-family:var(--f-ui); font-size:clamp(17.5px,.62vw+12px,27px); line-height:1.38;
  max-width:52ch; margin:0; color:var(--ink-2)
}

.art-body{
  display:grid;
  grid-template-columns:[full-start] minmax(0,1fr) [main-start] min(var(--prose),100%) [main-end] minmax(0,1fr) [full-end];
  width:var(--page); margin-inline:auto; padding-inline:var(--pad);
}
.art-body > *{ grid-column:main }
.art-body > .breakout-unit{
  grid-column:full; width:min(var(--breakout),100%); margin-inline:auto;
  margin-block:clamp(32px,3.4vw,72px);
}
.art-body > .in-unit{ margin-block:clamp(32px,3.4vw,64px) }
.art-body h2{
  font-size:clamp(23px,1.9vw,42px); margin:clamp(30px,3vw,64px) 0 .55em;
  padding-top:clamp(14px,1.2vw,26px); border-top:2px solid var(--ink)
}
.art-body h3{ font-size:clamp(19px,1.2vw,28px); margin:clamp(24px,2.2vw,44px) 0 .5em }
.art-body p{ margin:0 0 1.05em }
.art-run > p:last-child{ margin-bottom:0 }
.bleed-unit{ margin-block:clamp(38px,4vw,88px) }

/* side column cargo */
.breakout-unit > .sidenote + .sidenote{ margin-top:clamp(24px,2.4vw,44px) }
.sidenote{
  border-top:3px solid var(--accent-ink); padding-top:clamp(10px,.9vw,18px);
  font-family:var(--f-ui); font-size:clamp(14px,.26vw+11px,17px); line-height:1.45
}
.sidenote h3{
  font-family:var(--f-ui); font-weight:700; font-size:clamp(13px,.2vw+10px,15px);
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 .7em; color:var(--accent-ink)
}
.sidenote ul{ list-style:none; margin:0; padding:0 }
.sidenote li + li{ margin-top:.7em; border-top:1px solid var(--rule); padding-top:.7em }
.sidenote b{ display:block; font-weight:700 }

/* components */
.pullquote{
  margin:0; border-top:3px solid var(--accent-ink); border-bottom:3px solid var(--accent-ink);
  padding-block:clamp(16px,1.6vw,34px)
}
.pullquote p{
  margin:0; font-family:var(--f-display); font-weight:700; font-size:clamp(21px,1.7vw,40px);
  line-height:1.14; letter-spacing:-.015em
}
.blockquote{ margin:0; border-left:5px solid var(--secondary); padding:0 0 0 clamp(14px,1.4vw,28px) }
.blockquote p{ margin:0; font-size:1.06em; font-style:italic }
.blockquote cite{
  display:block; margin-top:.7em; font-family:var(--f-ui); font-style:normal;
  font-size:.8em; letter-spacing:.08em; text-transform:uppercase; color:var(--quiet)
}
.callout{
  margin:0; background:var(--secondary); color:var(--paper);
  padding:clamp(18px,1.8vw,38px); font-family:var(--f-ui)
}
.callout p{ margin:0; font-size:clamp(16px,.4vw+12px,22px); line-height:1.45 }
.callout p + p{ margin-top:.8em }
.callout a{ color:var(--paper) }
.note{
  font-family:var(--f-ui); font-size:.92em; line-height:1.5; color:var(--ink-2);
  border-left:3px solid var(--rule); padding-left:1em; margin:0
}

.timeline{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink) }
.timeline li{
  display:grid; grid-template-columns:1fr; gap:.15em 1.4em;
  padding:clamp(10px,.9vw,18px) 0; border-bottom:1px solid var(--rule)
}
@media (min-width:620px){ .timeline li{ grid-template-columns:minmax(8.5rem,15ch) minmax(0,1fr) } }
.t-when{
  font-family:var(--f-ui); font-weight:700; font-size:clamp(14px,.26vw+11px,18px);
  letter-spacing:.04em; color:var(--accent-ink); text-transform:uppercase
}
.t-what{ font-size:clamp(15.5px,.3vw+12px,19px); line-height:1.5 }

.statrow{ display:grid; gap:clamp(16px,1.6vw,40px); grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)) }
.statblock{ border-top:3px solid var(--accent-ink); padding-top:clamp(8px,.7vw,15px) }
.stat-num{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(34px,3.2vw,76px); line-height:.86; letter-spacing:-.03em
}
.stat-label{ display:block; font-family:var(--f-ui); font-size:clamp(14px,.26vw+11px,17px); line-height:1.42; margin-top:.55em }

.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.datatable,.versus{ border-collapse:collapse; width:100%; min-width:420px; font-size:clamp(15px,.28vw+11px,18px) }
.datatable th,.versus th{
  font-family:var(--f-ui); font-weight:700; font-size:.82em; letter-spacing:.12em;
  text-transform:uppercase; text-align:left; border-bottom:2px solid var(--ink);
  padding:.7em .9em .7em 0; vertical-align:bottom
}
.datatable td,.versus td{ border-bottom:1px solid var(--rule); padding:.8em .9em .8em 0; vertical-align:top }
.datatable tr td:first-child,.versus tr td:first-child{ font-weight:700 }
.versus td + td,.versus th + th{ padding-left:.9em; border-left:1px solid var(--rule) }

.chart figcaption{ font-family:var(--f-ui); font-size:.85em; color:var(--quiet); margin-top:.6em }
.chart svg{ width:100%; height:auto; overflow:visible }
.chart .c-bar{ fill:var(--secondary) }
.chart .c-bar.hi{ fill:var(--accent-ink) }
.chart .c-lab{ font-family:var(--f-ui); font-size:11px; fill:var(--ink) }
.chart .c-line{ fill:none; stroke:var(--accent-ink); stroke-width:2.4; stroke-linejoin:round }
.chart .c-dot{ fill:var(--secondary) }
.chart .c-axis{ stroke:var(--rule); stroke-width:1 }
.chart.donut .c-arc{ fill:none; stroke-width:22 }
.chart.donut .c-arc.a{ stroke:var(--accent-ink) }
.chart.donut .c-arc.b{ stroke:var(--secondary) }
.chart.donut .c-mid{ font-family:var(--f-display); font-weight:700; font-size:26px; fill:var(--ink) }

.gallery{ display:grid; gap:clamp(12px,1.2vw,24px); grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)) }
.gallery figure{ margin:0 }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--mat) }
.gallery figcaption{ font-family:var(--f-ui); font-size:.8em; line-height:1.4; margin-top:.5em; color:var(--quiet) }

.profile-grid{ display:grid; gap:clamp(16px,1.6vw,32px); grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)) }
.profile-card{ display:flex; flex-direction:column; background:var(--mat); padding:clamp(14px,1.2vw,24px) }
.profile-card .p-photo{ width:100%; aspect-ratio:1/1; object-fit:cover; margin-bottom:12px }
.profile-card.no-photo{ border-top:3px solid var(--secondary) }
.profile-card h3{ font-size:clamp(18px,1vw,24px) }
.profile-card .p-role{
  font-family:var(--f-ui); font-size:.8em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--quiet); margin:.45em 0 .8em
}
.profile-card p{ margin:0 0 .7em; font-size:.94em }
.profile-card .p-links,.profile-card .p-attr{ margin-top:auto; font-family:var(--f-ui); font-size:.82em }
.profile-card .p-attr{ color:var(--quiet) }

.org-grid{ display:grid; gap:clamp(10px,1vw,18px); grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)) }
.org-card{
  display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit;
  border:1px solid var(--rule); padding:clamp(12px,1vw,18px); background:#fff
}
.org-card:hover{ background:var(--mat) }
.org-logo{ height:34px; width:auto; max-width:100%; object-fit:contain; object-position:left }
.org-card.no-logo .org-name{ margin-top:0 }
.org-name{ font-family:var(--f-ui); font-weight:700; font-size:1em; line-height:1.25 }
.org-host{ font-family:var(--f-mono); font-size:.76em; color:var(--quiet) }
.entity-ref{ font-family:var(--f-ui); font-size:.95em; white-space:nowrap }

.further-grid,.related-links{ display:grid; gap:clamp(12px,1.2vw,24px); grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); list-style:none; margin:0; padding:0 }
.further-grid a,.related-links a{
  display:block; text-decoration:none; color:inherit; border-top:3px solid var(--accent-ink);
  padding-top:clamp(9px,.8vw,16px); font-family:var(--f-display); font-weight:700;
  font-size:clamp(17px,.9vw,23px); line-height:1.2
}
.further-grid a:hover,.related-links a:hover{ background:none; color:var(--accent-ink) }
.related-links .r-sec{
  display:block; font-family:var(--f-ui); font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--quiet); margin-bottom:.5em
}
.art-end{ padding-block:clamp(40px,4.4vw,96px) }
.art-end h2{
  font-family:var(--f-ui); font-weight:600; font-size:clamp(12px,.2vw+10px,15px);
  letter-spacing:.18em; text-transform:uppercase; color:var(--quiet);
  margin:0 0 clamp(16px,1.6vw,30px)
}

/* category / archive */
.cat-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink) }
.cat-list li{ border-bottom:1px solid var(--rule) }
.cat-list a{
  display:grid; gap:.2em 1.6em; grid-template-columns:1fr; padding:clamp(14px,1.3vw,26px) 0;
  text-decoration:none; color:inherit
}
@media (min-width:820px){ .cat-list a{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:baseline } }
.cat-list a:hover{ background:none }
.cat-list .c-title{
  font-size:clamp(18px,1.15vw,26px)
}
.cat-list a:hover .c-title{ color:var(--accent-ink) }
.cat-list .c-dek{
  font-size:clamp(13.5px,.2vw+11px,16px); color:var(--quiet); line-height:1.38
}
.hero-strip{ position:relative }
.hero-strip img{ width:100%; height:min(46vh,560px); object-fit:cover }
.sec-intro{ max-width:60ch; font-size:1.06em }
.arch-group + .arch-group{ margin-top:clamp(34px,3.4vw,72px) }
.arch-group h2{
  font-size:clamp(21px,1.6vw,34px); display:flex; align-items:center; gap:.5em;
  border-bottom:2px solid var(--ink); padding-bottom:.4em; margin-bottom:.2em
}
.small-print{ font-family:var(--f-ui); font-size:.86em; color:var(--quiet) }
.err{ padding-block:clamp(60px,9vw,180px) }
.err h1{ font-size:clamp(38px,6vw,130px) }
.err p{ font-size:clamp(18px,.8vw+12px,28px); max-width:44ch; margin-top:1em }

/* styleguide only */
.sg-sec{ padding-block:clamp(26px,2.6vw,56px); border-bottom:1px solid var(--rule) }
.sg-sec > h2{
  font-family:var(--f-ui); font-weight:700; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:1.4em
}
.sg-sec > * + *{ margin-top:clamp(20px,2vw,40px) }

/* a lifted line never sets at display size inside the rail */
.side .pullquote p{ font-size:clamp(17px,.4vw+13px,23px); line-height:1.24 }
.art-run:blank{ display:none }

/* a notes panel at breakout width sets its list in two columns */
@media (min-width:820px){
  .breakout-unit > .sidenote ul{ columns:2; column-gap:clamp(24px,3vw,64px) }
  .breakout-unit > .sidenote li{ break-inside:avoid }
  .breakout-unit > .sidenote li:first-child{ border-top:0 }
}
.breakout-unit > .sidenote{ font-size:clamp(15px,.3vw+12px,19px) }
.breakout-unit > .sidenote h3{ font-size:clamp(13px,.22vw+10px,16px) }

/* a paired figure: one insertion carrying two pictures */
.fig-pair{ display:grid; gap:clamp(14px,1.6vw,34px); align-items:start }
@media (min-width:900px){ .fig-pair{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) } }
.fig-pair .fig-bleed img{ max-height:min(58vh,760px) }
.fig-pair .fig-object .plate{ max-width:none }
.fig-pair .fig-object .cap{ max-width:none }

/* card + strip images join the figure system — same mat depth, same offset,
   same hairline as the article figures, differentiated by card weight */

/* the lead monograph: no mat, a keyed accent bar under the picture */
.mono--xl img{
  border-bottom:5px solid var(--accent-ink);
  box-shadow:none;
}
.mono--xl:hover img{ border-bottom-color:var(--ink) }

/* mid-weight cards: the mat treatment, 8px offset in the secondary */
.mono--l img,.mono--m img{
  background:var(--mat);
  padding:clamp(7px,.6vw,14px);
  box-shadow:8px 8px 0 var(--secondary);
  transition:box-shadow .14s ease, transform .14s ease;
}
.mono--l:hover img,.mono--m:hover img{
  box-shadow:12px 12px 0 var(--accent-ink);
  transform:translate(-2px,-2px);
}
.mono--l,.mono--m{ padding-right:10px }

/* the quiet card: hairline inset on a white ground */
.mono--s img{
  background:#fff;
  padding:clamp(7px,.6vw,14px);
  border:1px solid var(--rule);
}
.mono--s:hover img{ border-color:var(--ink) }

/* sleeves strip: square-on objects, hairline border, mat under the caption */
.strip figure{ background:var(--mat); padding:clamp(10px,.9vw,20px) }
.strip img{ border:1px solid rgba(19,28,63,.22) }
.strip a{ display:block; text-decoration:none; color:inherit }
.strip a:hover{ background:none }
.strip a:hover img{ border-color:var(--ink) }
.strip .cap{ padding-top:9px; border-top:2px solid var(--accent-ink) }
.strip .c-text{ font-weight:600 }

/* the rooms panel keeps its bleed, marked by an accent edge */
.panel .pic{ border-bottom:5px solid var(--accent) }
@media (min-width:900px){ .panel .pic{ border-bottom:0; border-right:5px solid var(--accent) } }

/* section openers: bleed with the same keyed bar */
.hero-strip{ border-bottom:5px solid var(--accent-ink) }

/* archive + category list rows get the hairline, not a shadow */
.cat-list a:hover .c-title{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px }

/* trade band: one dominant figure, three supporting ones */
.figure-shout{ border-top:5px solid var(--ink); padding-top:clamp(16px,1.6vw,40px) }
.figure-shout .say{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(19px,1.05vw+12px,38px); line-height:1.14; margin:0
}
.figure-shout .src{ font-weight:600 }
.shout-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:clamp(18px,2vw,56px); margin-top:clamp(26px,2.6vw,64px);
  border-top:2px solid var(--ink); padding-top:clamp(14px,1.2vw,30px);
}
.shout-row > div{ border-left:2px solid var(--ink); padding-left:clamp(12px,1vw,22px) }
.shout-row .n{
  display:block; font-family:var(--f-display); font-weight:700; line-height:.84;
  font-size:clamp(40px,4vw,104px); letter-spacing:-.035em
}
.shout-row .n .pc{ font-size:.5em }
.shout-row .l{
  display:block; font-family:var(--f-ui); font-size:clamp(14px,.26vw+11px,18px);
  line-height:1.42; margin-top:.6em; max-width:34ch
}
.shout-row .shout-more{ display:flex; align-items:flex-end; border-left:0; padding-left:0 }
.shout-row .shout-more .more{
  font-family:var(--f-ui); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-size:clamp(14px,.24vw+11px,19px); text-decoration:none;
  border-bottom:3px solid var(--ink); padding-bottom:4px
}

/* supporters: same tile for every slot, wider than before */
.supporters{ --tile:clamp(220px,18vw,320px) }
.sponsor-group{ grid-template-columns:repeat(auto-fit,var(--tile)); justify-content:start }
.sponsor{ flex:0 0 var(--tile); width:var(--tile) }
.sponsor .logo-box{ height:clamp(64px,4.6vw,88px); padding:clamp(10px,.8vw,16px) clamp(14px,1.2vw,22px) }
.sponsor .logo-box img{ max-height:clamp(44px,3vw,58px) }

@media (min-width:700px){
  :root{ --hang:clamp(25px,2.1vw,34px); --pad:calc(var(--gutter) + var(--hang)) }
}
@media (min-width:700px){
/* one left edge: marks hang into the gutter, every text edge lines up */
.kicker:has(.icon){
  display:grid; grid-template-columns:var(--hang) auto; align-items:center; gap:0;
  margin-left:calc(-1 * var(--hang));
}
.kicker:has(.icon) .icon{ justify-self:start }
.arch-group h2:has(.icon){
  display:grid; grid-template-columns:var(--hang) auto; align-items:center; gap:0;
  margin-left:calc(-1 * var(--hang));
}
.panel .say .more:has(.icon){ display:inline-grid; grid-template-columns:var(--hang) auto; align-items:center; gap:0 }
.wordmark{
  display:grid; grid-template-columns:var(--hang) auto; align-items:center; gap:0;
  margin-left:calc(-1 * var(--hang));
}
.wordmark svg{ width:calc(var(--hang) - 3px); height:auto; justify-self:start }
.nav > .nav-in > ul{ margin-left:calc(-1 * var(--hang)) }
.nav > .nav-in > ul > li > a{
  display:grid; grid-template-columns:var(--hang) auto; align-items:center; gap:0;
}
.nav > .nav-in > ul > li > a .icon{ justify-self:start }
.sub{ left:calc(-14px + var(--hang)) }
.sub a{ display:block; padding-left:16px }
.has-sub > a{ grid-template-columns:var(--hang) auto auto }
.has-sub > a::after{ grid-row:1; grid-column:3; align-self:center }

/* chronologies carry a lot of values: give them table manners */
.breakout-unit .timeline{ border-top:3px solid var(--ink) }
.breakout-unit .timeline li{
  padding:clamp(9px,.75vw,15px) clamp(10px,.9vw,18px);
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.breakout-unit .timeline li:nth-child(odd){ background:rgba(19,28,63,.045) }
.breakout-unit .t-when{
  font-family:var(--f-display); font-weight:700; text-transform:none;
  font-size:clamp(15px,.32vw+12px,21px); letter-spacing:-.01em; color:var(--ink);
  white-space:nowrap
}
.breakout-unit .t-what{ font-size:clamp(15px,.28vw+12px,19px); line-height:1.45 }
@media (min-width:620px){
  .breakout-unit .timeline li{ grid-template-columns:minmax(7rem,13ch) minmax(0,1fr) }
  .breakout-unit .t-when{
    border-right:2px solid var(--accent-ink); margin-right:clamp(10px,.9vw,18px);
    padding-right:clamp(10px,.9vw,18px)
  }
}
/* long runs split into two tracks at breakout width, reading down then across */
@media (min-width:1180px){
  .breakout-unit .timeline{ columns:2; column-gap:clamp(28px,2.6vw,64px); column-rule:1px solid var(--rule) }
  .breakout-unit .timeline li{ break-inside:avoid }
}

/* captions: caption and credit close up on one row, credit quieter and smaller */
.cap{ gap:.1em 1em; line-height:1.4 }
.cap .c-credit{ font-size:.72em; opacity:.92 }
.cap .c-credit::before{ content:"\00b7"; margin-right:.5em; opacity:.5 }
.fig-mat .cap,.article-figure .cap{ margin-top:clamp(8px,.7vw,15px); padding-top:7px }
.fig-object .cap{ margin-top:10px; row-gap:.15em }
.fig-object .cap .c-credit::before{ content:none }
.fig-bleed .cap{ padding-block:clamp(10px,.9vw,18px) }
}
/* paired figures sit inside a full-width band: keep their own gutter */
.bleed-unit .fig-pair{ padding-inline:var(--gutter) }
.bleed-unit .fig-pair .fig-bleed .cap{ padding-inline:0 }

/* founder cards stay terse: a name, a tenure, one fact, one link */
.profile-grid{ grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)) }
.profile-card{ padding:clamp(12px,1vw,20px) }
.profile-card h3{ font-size:clamp(17px,.9vw,22px) }
.profile-card .p-role{ margin:.4em 0 .55em }
.profile-card p{ font-size:.9em; margin-bottom:.55em }
.profile-card .p-links{ font-size:.78em }

/* index rows: title leads, dek is a hint rather than a paragraph */
.cat-list a{ padding-block:clamp(11px,1vw,20px) }
.cat-list .c-title{ font-size:clamp(18px,1.15vw,26px) }
.cat-list .c-dek{ font-size:clamp(13.5px,.2vw+11px,16px); color:var(--quiet); line-height:1.38 }
@media (min-width:820px){ .cat-list a{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) } }

/* a figure's source sits under its label, not inside the sentence */
.stat-label{ font-size:clamp(13.5px,.22vw+11px,17px); max-width:26ch }
.stat-src{
  display:block; margin-top:.4em; font-size:.82em; font-style:italic;
  color:var(--quiet); letter-spacing:.01em
}
.statrow{ gap:clamp(14px,1.4vw,32px) }
.statblock{ padding-top:clamp(7px,.6vw,13px) }

/* mobile: every chrome link is a real tap target, and nothing sets below 13px */
@media (max-width:699px){
  .foot ul{ gap:0; flex-direction:column; width:100% }
  .foot ul li{ border-top:1px solid #2b3663 }
  .foot a{ display:flex; align-items:center; min-height:46px }
  .foot-in{ gap:clamp(16px,4vw,28px) }
  .kicker{ font-size:13px }
  .cap .c-credit{ font-size:13px }
  .sponsor-blurb,.small-print,.gallery figcaption,.chart figcaption,
  .org-host,.profile-card .p-links,.profile-card .p-attr,
  .related-links .r-sec,.arch-group h2 .r-sec{ font-size:13px }
  .chart .c-lab{ font-size:13px }
}

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

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* 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 .logo-box.logo-box{display:block!important;width:100%!important}
.sponsor-group .sponsor.sponsor img{height:48px!important;display:block!important;width:100%!important}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 398px at 390, 5% 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,
   measured 398 -> 265px (33% 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:clamp(20px,1.39vw,20px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 9 tiles,
   1312px at 390, 16% of the whole page. Two columns bring it to
   931px (29% shorter). Checked before writing: no new overflow, smallest mark still
   122px wide, longest blurb 1 lines, tile heights 113-172px.
   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: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}

}

/* op-odd-tier-lead: .sponsor-group (5 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-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.monos > a.mono.mono--l > img,
  div.monos > a.mono.mono--m > img,
  div.monos > a.mono.mono--s > img,
  div.monos > a.mono.mono--xl > img,
  div.panel > div.pic > img,
  figure > a > img,
  figure.fig-bleed > div.plate > img,
  figure.fig-bleed.lead-fig > div.plate > img,
  figure.fig-mat > div.plate > img,
  figure.fig-object > div.plate > img,
  main > div.hero-strip > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1199px){.sponsor-group.sponsor-group:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(220px,calc(50% - 7px)),1fr))!important;justify-content:stretch!important}.sponsor-group.sponsor-group > [data-partner]{width:auto!important;max-width:none!important}}
[data-partner] .logo-box{background:transparent!important}