/* =========================================================
   shardsoglass.com — "Frank Statement"
   Palette (named jobs):
     ground  #101418  every page ground
     ink     #ECE6DA  headlines and prose
     accent  #F0B429  tobacco gold — areas, mastheads, the instrument side
     second  #2E8B87  teal — the answer side, data, pulled figures
     flag    #C96442  campaigns
     quiet   #8E959B  credits, kickers, attribution
   ========================================================= */

:root{
  --ground:#101418;
  --panel:#181D22;
  --panel-2:#161B20;
  --rule:#23292F;
  --rule-strong:#39424a;
  --ink:#ECE6DA;
  --ink-2:#C3C8CC;
  --quiet:#8E959B;
  --accent:#F0B429;
  --second:#2E8B87;
  --second-ink:#45A8A3;
  --flag:#C96442;
  --flag-ink:#E0805E;
  --on-accent:#101418;
  --on-second:#05100F;

  --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(20px,4vw,72px);
  --wide:1100px;          /* content area */
  --measure:66ch;         /* prose */
  --body:17px;
  --step:clamp(28px,4vw,56px);   /* band rhythm */
  --para:1.15em;                 /* paragraph gap, the A2 reference */
}

@media (min-width:1280px){ :root{ --wide:1240px; --body:18px; } }
@media (min-width:1600px){ :root{ --wide:1480px; --measure:72ch; --body:19px; --gutter:clamp(48px,5vw,110px); } }
@media (min-width:2200px){ :root{ --wide:1880px; --measure:78ch; --body:20px; --gutter:clamp(72px,6vw,180px); } }
@media (min-width:2560px){ :root{ --wide:2120px; --measure:82ch; --body:21px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:var(--body)/1.62 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--accent); }
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.05; margin:0; text-wrap:pretty; }
p{ margin:0 0 var(--para); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:8px; top:8px; z-index:99; background:var(--accent); color:var(--on-accent); padding:8px 14px; }

/* ---------- shared shells ---------- */
.wrap{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter); }
.bleed{ width:100%; }
.kicker{
  font:800 12px/1.3 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px; display:flex; align-items:center; gap:9px;
}
.kicker--second{ color:var(--second-ink); }
.kicker--flag{ color:var(--flag-ink); }
.kicker svg{ width:18px; height:18px; flex:none; }
.eyebrow{ font:800 11.5px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--quiet); margin:0 0 10px; }
.rule-gold{ height:2px; background:var(--accent); border:0; margin:0; }
.hair{ height:1px; background:var(--rule); border:0; margin:0; }

/* ---------- masthead ---------- */
.masthead{ background:var(--accent); color:var(--on-accent); }
.masthead__inner{ padding-block:clamp(16px,1.8vw,30px); }
.masthead__top{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px clamp(18px,2.5vw,54px); }
.wordmark{
  font-family:var(--display); font-size:clamp(28px,4.4vw,74px); line-height:.94;
  letter-spacing:-.01em; text-decoration:none; display:block;
}
.masthead__line{
  font:800 clamp(10.5px,.78vw,13px)/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  margin:0; padding-bottom:.35em;
}
.masthead__rule{ height:1px; background:rgba(16,20,24,.45); margin:clamp(10px,1.1vw,18px) 0 0; border:0; }
@media (max-width:719px){
  .masthead__top{ flex-direction:column; align-items:center; text-align:center; }
  .masthead__line{ padding-bottom:0; }
}

/* ---------- nav ---------- */
.nav{ background:var(--accent); color:var(--on-accent); border-top:1px solid rgba(16,20,24,.28); }
.nav__list{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:2px clamp(12px,1.8vw,40px); padding-block:10px;
}
.nav__list > li{ position:relative; }
.nav__link{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  font:800 clamp(11px,.82vw,13.5px)/1 var(--sans); letter-spacing:.19em; text-transform:uppercase;
  padding:9px 0;
}
.nav__link svg{ width:17px; height:17px; flex:none; }
.nav__link:hover{ color:var(--on-accent); box-shadow:inset 0 -2px 0 var(--on-accent); }
.nav__link[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--on-accent); }
.nav__sub{
  list-style:none; margin:0; padding:10px 0 14px; display:flex; flex-wrap:wrap;
  gap:6px 22px; font:600 12.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
}
.nav__sub a{ text-decoration:none; border-bottom:1px solid rgba(16,20,24,.4); padding-bottom:3px; }
/* second level: CSS-only disclosure, no hover gap */
.nav details{ }
.nav summary{ list-style:none; cursor:pointer; }
.nav summary::-webkit-details-marker{ display:none; }
.nav summary .caret{ font-size:.7em; }

/* ---------- homepage: facing documents ---------- */
.facing{ padding-block:clamp(30px,4vw,80px) clamp(24px,3vw,56px); }
.facing__head{
  font-family:var(--display); font-size:clamp(28px,3.4vw,66px); line-height:1.02;
  max-width:34ch; margin:0 0 clamp(22px,2.6vw,54px);
}
.pair{ display:flex; flex-wrap:wrap; gap:clamp(22px,2.6vw,64px); align-items:stretch; }
.pair__col{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; }
.pair__spine{ flex:0 0 22px; align-self:stretch; display:flex; align-items:center; color:var(--accent); }
.pair__spine svg{ width:22px; height:100%; min-height:180px; }
@media (max-width:900px){
  .pair__spine{ flex:1 1 100%; height:26px; align-items:center; }
  .pair__spine svg{ width:100%; height:22px; min-height:0; }
}
.pair__col h2{ font-size:clamp(21px,1.9vw,36px); margin:16px 0 10px; }
.pair__col p{ color:var(--ink-2); margin:0; }
.pair__col .plate{ margin:0; }

/* the 63 band */
.numberband{ background:var(--accent); color:var(--on-accent); }
.numberband__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,3vw,72px);
  padding-block:clamp(26px,3.4vw,70px);
}
.numberband__n{
  font-family:var(--display); font-size:clamp(86px,12vw,260px); line-height:.78;
  letter-spacing:-.04em; margin:0; flex:0 0 auto;
}
.numberband__t{ flex:1 1 300px; min-width:0; max-width:46ch; margin:0; font-size:clamp(17px,1.35vw,26px); font-weight:600; line-height:1.4; }

/* generic band */
.band{ padding-block:clamp(34px,4.4vw,90px); }
.band--panel{ background:var(--panel-2); }
.band__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 28px; margin-bottom:clamp(18px,2.2vw,40px); }
.band__head h2{ font-size:clamp(24px,2.4vw,48px); margin:0; }
.band__head p{ margin:0; max-width:56ch; color:var(--ink-2); }
.band__more{
  margin-left:auto; font:800 12px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); text-decoration:none; white-space:nowrap;
}
.band__note{ margin:clamp(16px,1.8vw,30px) 0 0; color:var(--quiet); font-size:15px; max-width:70ch; }

.split{ display:flex; flex-wrap:wrap; gap:clamp(22px,3vw,72px); align-items:center; }
.split__text{ flex:1 1 320px; min-width:0; max-width:46ch; }
.split__media{ flex:1 1 380px; min-width:0; }
.split h3{ font-size:clamp(22px,2.2vw,44px); margin:0 0 14px; }
.split p{ color:var(--ink-2); margin:0; }

/* quiet single line */
.quietline{ padding-block:clamp(26px,3vw,64px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.quietline p{
  font-family:var(--display); font-size:clamp(19px,1.8vw,34px); line-height:1.32;
  color:var(--second-ink); max-width:44ch; margin:0;
}
@media (min-width:1600px){ .quietline p{ max-width:52ch; } }

/* ---------- document / answer pairs (the signature) ---------- */
.dpair{
  display:flex; flex-wrap:wrap; gap:clamp(18px,2.2vw,56px);
  padding-top:clamp(18px,2vw,38px); border-top:1px solid var(--rule);
}
.dpair + .dpair{ margin-top:clamp(26px,3vw,64px); }
.dpair--lead{ border-top:2px solid var(--accent); }
.dpair__side{ flex:1 1 320px; min-width:0; display:flex; gap:18px; align-items:flex-start; }
.dpair__thumb{ flex:0 0 clamp(104px,10vw,190px); }
.dpair__thumb img{ aspect-ratio:4/5; object-fit:cover; width:100%; border:1px solid var(--rule); }
.dpair--lead .dpair__thumb{ flex:0 0 clamp(130px,14vw,260px); }
.dpair__body{ flex:1 1 190px; min-width:0; }
.dpair__body h3{ font-size:clamp(19px,1.55vw,30px); margin:0 0 10px; }
.dpair__body h3 a{ text-decoration:none; }
.dpair__body h3 a:hover{ text-decoration:underline; }
.dpair__body p{ margin:0; color:var(--ink-2); font-size:16.5px; }
.dpair__tag{ font:800 11.5px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; margin:0 0 9px; }
.dpair__tag--doc{ color:var(--accent); }
.dpair__tag--ans{ color:var(--second-ink); }

/* ---------- cards (even height) ---------- */
.cards{ display:grid; gap:clamp(18px,2vw,40px); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
@media (min-width:1600px){ .cards{ gap:clamp(28px,2.2vw,56px); } }
.card{
  display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--rule);
  text-decoration:none; height:100%;
}
.card:hover{ border-color:var(--accent); color:inherit; }
.card__img{ aspect-ratio:16/10; width:100%; object-fit:cover; }
.card__in{ padding:clamp(14px,1.2vw,24px); display:flex; flex-direction:column; flex:1 1 auto; gap:10px; }
.card h3{ font-size:clamp(18px,1.3vw,25px); margin:0; }
.card p{ margin:0; color:var(--ink-2); font-size:16px; }
.card__foot{ margin-top:auto; padding-top:6px; font:800 11px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--quiet); }

/* the long-wait band: four rules */
.rules{ display:grid; gap:clamp(18px,2vw,40px); grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.rule-card{ border-top:2px solid var(--accent); padding-top:16px; display:flex; flex-direction:column; gap:10px; height:100%; }
.rule-card--stalled{ border-top-color:var(--flag); }
.rule-card h3{ font-size:clamp(18px,1.25vw,24px); margin:0; }
.rule-card h3 a{ text-decoration:none; }
.rule-card h3 a:hover{ text-decoration:underline; }
.rule-card__state{ font:800 11.5px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--quiet); }
.rule-card p{ margin:0; color:var(--ink-2); font-size:16px; }
.rule-card__bar{ margin-top:auto; padding-top:12px; }

/* ---------- figures: three treatments, one drawing system ---------- */
figure{ margin:0; }
.article-figure img{ width:100%; }
.article-figure figcaption{
  display:flex; flex-wrap:wrap; gap:6px 24px; align-items:baseline;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--rule);
}
.article-figure .cap{ flex:1 1 min(46ch,100%); max-width:62ch; margin:0; font-size:16.5px; line-height:1.5; color:var(--ink-2); }
.article-figure .credit{ flex:0 1 auto; margin:0; font:11.5px/1.5 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--quiet); }
@media (min-width:1024px){ .article-figure .credit{ margin-left:auto; text-align:right; max-width:34ch; } }

/* 1 — plate: full-bleed band that breaks the measure */
.article-figure.plate img{ aspect-ratio:16/10; object-fit:cover; }
/* 2 — mat: photograph sits on a panel with an inset hairline */
.article-figure.mat{ background:var(--panel); border:1px solid var(--rule); padding:clamp(12px,1vw,22px); }
.article-figure.mat img{ aspect-ratio:16/10; object-fit:cover; border:1px solid var(--rule-strong); }
.article-figure.mat figcaption{ border-top-color:var(--rule-strong); }
/* 3 — corner-marked plate: gold corner marks outset from the image only */
.article-figure.marked{ position:relative; }
.article-figure.marked .frame{ position:relative; }
.article-figure.marked .frame img{ aspect-ratio:3/2; object-fit:cover; }
.article-figure.marked .frame svg{
  position:absolute; inset:-9px; width:calc(100% + 18px); height:calc(100% + 18px);
  color:var(--accent); pointer-events:none;
}
/* 4 — inset: small, offset into the margin */
.article-figure.inset img{ aspect-ratio:4/5; object-fit:cover; }

.gallery{ display:grid; gap:clamp(10px,1vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.gallery figure img{ aspect-ratio:4/5; object-fit:cover; width:100%; }
.gallery figcaption{ margin-top:8px; font-size:14.5px; color:var(--quiet); }

.map-figure .map-slot{ width:100%; aspect-ratio:16/9; background:var(--panel-2); border:1px solid var(--rule); }
.map-figure figcaption{ margin-top:12px; padding-top:10px; border-top:1px solid var(--rule); font-size:16.5px; color:var(--ink-2); }

/* ---------- article page ---------- */
.artmast{ padding-block:clamp(30px,3.6vw,76px) clamp(18px,2vw,36px); }
.artmast h1{ font-size:clamp(32px,4.2vw,88px); line-height:.99; max-width:26ch; margin:0 0 clamp(16px,1.6vw,30px); }
.lead{
  font-size:clamp(19px,1.25vw,25px); line-height:1.48; color:var(--ink-2);
  max-width:52ch; margin:0 0 var(--para);
}
.artmast .lead{ max-width:56ch; }
.breadcrumb{ font:800 12px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; margin:0 0 14px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.breadcrumb a{ text-decoration:none; }
.breadcrumb svg{ width:18px; height:18px; flex:none; }

.hero{ margin-block:0 clamp(24px,3vw,56px); }
.hero .frame img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
@media (min-width:1024px){ .hero .frame img{ aspect-ratio:2.3/1; } }

.article-body{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter); padding-bottom:clamp(30px,4vw,80px); }
.prose{ max-width:var(--measure); margin-inline:auto; }
.prose h2{
  font-size:clamp(23px,1.9vw,38px); margin:calc(var(--para) * 1.9) 0 .55em; clear:both;
  padding-top:.5em; border-top:1px solid var(--rule);
}
.prose p{ font-size:1em; }
.prose > :first-child{ margin-top:0; }
.prose ul,.prose ol{ margin:0 0 var(--para); padding-left:1.3em; }
.prose li{ margin-bottom:.45em; }
.entity-ref{ overflow-wrap:anywhere; }

/* margin cargo — floated out of the measure at desktop, in flow on phones */
.marginnote,.attrib{
  border-top:2px solid var(--accent); padding-top:10px; margin:0 0 var(--para);
  font:14.5px/1.55 var(--sans); color:var(--ink-2); clear:both;
}
.marginnote .m-label,.attrib .m-label{
  display:block; font:800 11px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px;
}
.attrib{ border-top-color:var(--second); }
.attrib .m-label{ color:var(--second-ink); }
.attrib .docket{ font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--ink); display:block; }
@media (min-width:1100px){
  .marginnote{
    float:left; clear:left; width:24ch;
    margin-left:calc(-24ch - clamp(20px,2.2vw,54px)); margin-bottom:calc(var(--para) * 1.4);
  }
  .attrib{
    float:right; clear:right; width:22ch;
    margin-right:calc(-22ch - clamp(20px,2.2vw,54px)); margin-bottom:calc(var(--para) * 1.4);
  }
}
@media (min-width:1600px){
  .marginnote{ width:27ch; margin-left:calc(-27ch - clamp(28px,2.4vw,64px)); }
  .attrib{ width:25ch; margin-right:calc(-25ch - clamp(28px,2.4vw,64px)); }
}
@media (min-width:2200px){
  .marginnote{ width:30ch; margin-left:calc(-30ch - clamp(40px,3vw,90px)); font-size:15.5px; }
  .attrib{ width:28ch; margin-right:calc(-28ch - clamp(40px,3vw,90px)); font-size:15.5px; }
}

/* inserted units — A2 spacing: twice the paragraph gap, floor 32px desktop / 24px mobile */
.insert{ clear:both; margin-block:max(24px,calc(var(--para) * 2)); }
@media (min-width:768px){ .insert{ margin-block:max(32px,calc(var(--para) * 2.4)); } }
.insert:last-child{ margin-bottom:0; }
/* breakout: wider than the prose on both sides */
.breakout{ width:min(100%,calc(var(--measure) + 12vw)); margin-inline:auto; }
@media (min-width:1100px){ .breakout{ width:calc(100% + 9vw); margin-inline:-4.5vw; } }
@media (min-width:1600px){ .breakout{ width:calc(100% + 16vw); margin-inline:-8vw; } }
@media (min-width:2200px){ .breakout{ width:calc(100% + 22vw); margin-inline:-11vw; } }
/* full-bleed: never wider than the viewport (no horizontal scroll) */
.fullbleed{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.fullbleed .fb-in{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- components ---------- */
.pullquote{ margin:0; border-left:3px solid var(--accent); padding:4px 0 4px clamp(16px,1.6vw,30px); }
.pullquote p{ font-family:var(--display); font-size:clamp(21px,1.7vw,33px); line-height:1.28; margin:0; }
.blockquote{ margin:0; background:var(--panel); border:1px solid var(--rule); padding:clamp(16px,1.5vw,30px); }
.blockquote p{ font-family:var(--display); font-size:clamp(18px,1.35vw,26px); line-height:1.35; margin:0 0 .7em; }
.blockquote cite{ font:600 14px/1.5 var(--sans); font-style:normal; color:var(--quiet); letter-spacing:.06em; }
.callout{ background:var(--second); color:var(--on-second); padding:clamp(16px,1.5vw,30px); }
.callout p{ margin:0; font-size:1em; font-weight:600; line-height:1.5; }
.callout p + p{ margin-top:.7em; }
.note{
  border-left:2px solid var(--quiet); padding-left:16px; color:var(--ink-2);
  font-size:16px; margin:0;
}

.statrow{ display:grid; gap:clamp(12px,1.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.statblock{ background:var(--panel); border:1px solid var(--rule); border-top:2px solid var(--accent); padding:clamp(14px,1.2vw,24px); display:flex; flex-direction:column; gap:8px; height:100%; }
.stat-num{ font-family:var(--display); font-size:clamp(34px,3vw,62px); line-height:.9; color:var(--ink); }
.stat-label{ font-size:15px; color:var(--ink-2); line-height:1.4; }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  display:grid; gap:4px 20px; padding:14px 0; border-top:1px solid var(--rule);
  grid-template-columns:minmax(0,1fr);
}
.timeline li:first-child{ border-top:2px solid var(--accent); }
@media (min-width:640px){ .timeline li{ grid-template-columns:minmax(11ch,20ch) minmax(0,1fr); } }
@media (min-width:1600px){ .timeline li{ grid-template-columns:minmax(13ch,26ch) minmax(0,1fr); } }
.t-when{ font:800 13px/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); overflow-wrap:break-word; }
.t-what{ font-size:16.5px; color:var(--ink-2); line-height:1.5; }

.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.datatable,table.versus{ width:100%; border-collapse:collapse; font-size:16px; min-width:34ch; }
.datatable caption,.versus caption{ text-align:left; font:800 11.5px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--quiet); padding-bottom:10px; }
.datatable th,.datatable td,.versus th,.versus td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--rule); vertical-align:top; }
.datatable thead th,.versus thead th{ font:800 12px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border-bottom:2px solid var(--accent); }
.versus tbody th{ font:600 16px/1.45 var(--sans); color:var(--ink); width:30%; }
.datatable tbody tr:last-child td,.versus tbody tr:last-child td{ border-bottom:0; }

.chart{ }
.chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart figcaption{ margin-top:14px; padding-top:10px; border-top:1px solid var(--rule); font-size:16px; color:var(--ink-2); }
.chart .c-label{ font:600 13px/1.2 var(--sans); fill:var(--quiet); }
.chart .c-value{ font:800 13px/1.2 var(--sans); fill:var(--ink); }

.profile-grid{ display:grid; gap:clamp(16px,1.6vw,32px); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.profile-card{ background:var(--panel); border:1px solid var(--rule); padding:clamp(14px,1.2vw,24px); display:flex; flex-direction:column; gap:9px; height:100%; }
.p-photo{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.profile-card h3{ font-size:22px; margin:0; }
.p-role{ font:800 11.5px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0; }
.profile-card p{ margin:0; font-size:16px; color:var(--ink-2); }
.p-links{ margin-top:auto; padding-top:6px; font-size:15px; }
.p-attr{ font:12px/1.5 var(--mono); color:var(--quiet); }
.profile-card.no-photo{ border-left:2px solid var(--accent); }

.org-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.org-card{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--panel); border:1px solid var(--rule); padding:12px 14px; min-height:64px;
}
.org-card:hover{ border-color:var(--accent); }
.org-logo{ width:44px; height:44px; object-fit:contain; flex:none; background:var(--ground); }
.org-name{ font:600 16px/1.3 var(--sans); }
.org-host{ font:12px/1.3 var(--mono); color:var(--quiet); display:block; margin-top:3px; }
.org-card.no-logo .org-name{ border-left:2px solid var(--accent); padding-left:10px; }

.further-grid,.related-links{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); list-style:none; margin:0; padding:0; }
.further-grid a,.related-links a{
  display:block; text-decoration:none; background:var(--panel); border:1px solid var(--rule);
  border-top:2px solid var(--accent); padding:14px 16px; font-family:var(--display); font-size:20px; line-height:1.18; height:100%;
}
.further-grid a:hover,.related-links a:hover{ border-color:var(--accent); color:var(--accent); }
.related-links:empty{ display:none; }

.endunit{ border-top:2px solid var(--accent); padding-top:clamp(16px,1.6vw,30px); }
.endunit h2{ font-size:clamp(20px,1.5vw,28px); border:0; padding:0; margin:0 0 16px; }

/* ---------- section (category) pages ---------- */
.cathead{ padding-block:clamp(28px,3.4vw,72px) clamp(20px,2.2vw,44px); }
.cathead__grid{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,72px); align-items:flex-end; }
.cathead h1{ flex:1 1 min(100%,30ch); font-size:clamp(30px,3.6vw,74px); margin:0; }
.cathead__aside{ flex:1 1 min(100%,34ch); max-width:54ch; }
.cathead__aside p{ margin:0 0 10px; color:var(--ink-2); font-size:clamp(17px,1.05vw,20px); }
.catcount{ font:800 12px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--quiet); margin:0; }
.cat-list{ list-style:none; margin:0; padding:0; }
.cat-list li + li{ margin-top:clamp(26px,2.6vw,56px); }
.entry{ display:flex; flex-wrap:wrap; gap:clamp(18px,2.2vw,52px); align-items:flex-start; padding-top:clamp(18px,2vw,38px); border-top:1px solid var(--rule); }
.entry--lead{ border-top:2px solid var(--accent); }
.entry__media{ flex:1 1 min(100%,300px); min-width:0; }
.entry__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--rule); }
.entry--lead .entry__media{ flex:1 1 min(100%,440px); }
.entry__body{ flex:1 1 min(100%,320px); min-width:0; }
.entry__body h2{ font-size:clamp(21px,1.75vw,34px); margin:0 0 12px; }
.entry--lead .entry__body h2{ font-size:clamp(25px,2.3vw,46px); }
.entry__body h2 a{ text-decoration:none; }
.entry__body h2 a:hover{ text-decoration:underline; }
.entry__body p{ margin:0 0 10px; color:var(--ink-2); font-size:16.5px; }
.entry__meta{ font:800 11.5px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--quiet); margin:0; }
.entry--alt{ flex-direction:row-reverse; }
@media (min-width:1100px){
  .entry--row .entry__media{ flex:0 0 clamp(220px,22vw,420px); }
}
.subhead{ margin:clamp(30px,3vw,64px) 0 clamp(14px,1.4vw,26px); display:flex; align-items:baseline; gap:16px; }
.subhead h2{ font-size:clamp(20px,1.5vw,30px); margin:0; }
.subhead__rule{ flex:1 1 auto; height:1px; background:var(--rule); }

/* ---------- archive ---------- */
.arch{ display:grid; gap:0; }
.arch__row{
  display:grid; gap:6px 24px; padding:clamp(14px,1.2vw,22px) 0; border-top:1px solid var(--rule);
  grid-template-columns:minmax(0,1fr); align-items:baseline;
}
@media (min-width:900px){ .arch__row{ grid-template-columns:minmax(0,3fr) minmax(0,2fr) 16ch; } }
.arch__row h3{ font-size:clamp(18px,1.2vw,24px); margin:0; }
.arch__row h3 a{ text-decoration:none; }
.arch__row h3 a:hover{ text-decoration:underline; color:var(--accent); }
.arch__row p{ margin:0; color:var(--ink-2); font-size:15.5px; }
.arch__sec{ font:800 11.5px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--quiet); }

/* ---------- supporters ---------- */
.supporters{ background:var(--panel-2); }
.sup-group + .sup-group{ margin-top:clamp(22px,2.4vw,48px); }
.sup-grid{ display:grid; gap:clamp(14px,1.4vw,28px); grid-template-columns:repeat(auto-fit,min(100%,520px)); justify-content:start; }
.sponsor{
  display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; text-decoration:none;
  background:var(--panel); border:1px solid var(--rule); padding:16px; height:100%;
}
.sponsor:hover{ border-color:var(--accent); color:inherit; }
/* ONE logo box size for the whole block: the box is fixed, the mark contains inside it */
.sponsor img{
  flex:0 0 224px; width:224px; height:56px; box-sizing:border-box; padding:6px 12px;
  object-fit:contain; background:var(--ground);
}
.sponsor .sponsor-text{ flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:5px; }
.sponsor-name{ font:600 16px/1.25 var(--sans); white-space:nowrap; }
.sponsor-blurb{ font-size:14.5px; line-height:1.45; color:var(--ink-2); }
@media (max-width:560px){
  .sponsor img{ flex:0 0 100%; width:100%; }
  .sponsor-name{ white-space:normal; }
}

/* ---------- footer ---------- */
.foot{ background:var(--accent); color:var(--on-accent); }
.foot__in{ display:flex; flex-wrap:wrap; gap:18px clamp(24px,3vw,72px); align-items:baseline; padding-block:clamp(22px,2.4vw,50px); }
.foot__name{ font-family:var(--display); font-size:clamp(20px,1.8vw,34px); margin:0; flex:0 0 auto; }
.foot__line{ margin:0; flex:1 1 min(100%,34ch); font-size:clamp(15px,1vw,19px); font-weight:600; }
.foot__nav{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; font:800 11.5px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.foot__nav a{ text-decoration:none; }
.foot__nav a:hover{ color:var(--on-accent); text-decoration:underline; }

/* ---------- static pages ---------- */
.page{ padding-block:clamp(30px,3.6vw,76px) clamp(36px,4vw,90px); }
.page h1{ font-size:clamp(30px,3.4vw,68px); margin:0 0 clamp(16px,1.6vw,30px); max-width:28ch; }
.page .prose h2{ }
.err{ text-align:left; }
.err__code{ font-family:var(--display); font-size:clamp(70px,10vw,190px); line-height:.85; color:var(--accent); margin:0 0 10px; }

/* ---------- styleguide only ---------- */
.sg-sec{ padding-block:clamp(26px,3vw,60px); border-top:1px solid var(--rule); }
.sg-sec > h2{ font-size:clamp(22px,1.8vw,34px); margin:0 0 8px; }
.sg-sec > .eyebrow{ margin-bottom:18px; }
.sg-narrow{ max-width:360px; border:1px dashed var(--rule-strong); padding:12px; }

/* record blocks lifted out of the prose */
.recordblock{ background:var(--panel); border:1px solid var(--rule); border-top:2px solid var(--accent); padding:clamp(16px,1.5vw,30px); }
.recordblock h3{ font-size:clamp(19px,1.4vw,27px); margin:0 0 14px; }
.recordblock ul{ margin:0; padding-left:1.15em; }
.recordblock li{ margin-bottom:.5em; color:var(--ink-2); font-size:16.5px; line-height:1.5; }
.recordblock li:last-child{ margin-bottom:0; }
.recordblock .timeline li:first-child{ border-top:1px solid var(--rule); }
.related-links a{ display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; }
.related-links img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.related-links .r-s{ display:block; padding:13px 15px 0; font:800 11px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--quiet); }
.related-links .r-t{ display:block; padding:8px 15px 17px; }
.hero figcaption{ margin-top:12px; }

/* nav second level — a row of its own, never a hover panel */
.nav__l2{
  display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline; margin:0;
  padding:9px 0 11px; border-top:1px solid rgba(16,20,24,.28);
  font:600 12px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase;
}
.nav__l2-of{ font-weight:800; color:#4A3C12; }
.nav__l2 a{ text-decoration:none; border-bottom:1px solid rgba(16,20,24,.45); padding-bottom:2px; }
.nav__l2 a:hover{ color:var(--on-accent); border-bottom-width:2px; }
@media (max-width:640px){ .nav__l2{ font-size:11.5px; gap:6px 16px; } }

/* bounded lists, forms */
.longlist{ margin-top:.6em; }
.longlist > summary{ cursor:pointer; font:800 11.5px/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); padding:8px 0; }
.longlist[open] > summary{ border-bottom:1px solid var(--rule); margin-bottom:.6em; }
.cform p{ display:flex; flex-direction:column; gap:7px; margin:0 0 18px; max-width:44ch; }
.cform label{ font:800 11.5px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--quiet); }
.cform input,.cform textarea{
  font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--rule-strong);
  padding:11px 13px; width:100%;
}
.cform input:focus,.cform textarea:focus{ border-color:var(--accent); outline:none; }
.cform button{
  font:800 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  background:var(--accent); color:var(--on-accent); border:0; padding:14px 26px;
}
.cform button:hover{ background:var(--ink); }

/* the hero is full-bleed: keep its corner marks inside the viewport (no h-scroll) */
.article-figure.marked.hero .frame svg{ inset:0; width:100%; height:100%; }

/* label colours win over container paragraph colour
   (these labels are <p> elements inside containers that set p{color}) */
p.kicker.kicker{ color:var(--accent); }
p.kicker--second.kicker--second{ color:var(--second-ink); }
p.kicker--flag.kicker--flag{ color:var(--flag-ink); }
p.dpair__tag--doc.dpair__tag--doc{ color:var(--accent); }
p.dpair__tag--ans.dpair__tag--ans{ color:var(--second-ink); }
p.entry__meta.entry__meta{ color:var(--quiet); }
p.card__foot.card__foot{ color:var(--quiet); }
p.eyebrow.eyebrow{ color:var(--quiet); }
p.catcount.catcount{ color:var(--quiet); }
p.arch__sec.arch__sec{ color:var(--quiet); }
p.band__note.band__note{ color:var(--quiet); }
p.credit.credit{ color:var(--quiet); }
p.cap.cap{ color:var(--ink-2); }
p.lead.lead{ color:var(--ink-2); }
p.note.note{ color:var(--ink-2); }
p.p-role.p-role{ color:var(--accent); }
p.p-attr.p-attr{ color:var(--quiet); }
/* the rule card states its own status in its own colour; the span beneath it stays quiet */
.rule-card p.rule-card__state.rule-card__state{ color:var(--accent); }
.rule-card--stalled p.rule-card__state.rule-card__state{ color:var(--flag-ink); }

/* one lone tile per row: centre it rather than leaving a left column */
@media (max-width:1099px){ .sup-grid{ justify-content:center; } }

/* ---- bolder, wider header ---- */
.masthead .wrap,.nav .wrap{ max-width:none; }
.masthead__inner{ padding-block:clamp(18px,2.2vw,38px); }
.masthead__top{ align-items:center; gap:14px clamp(20px,3vw,64px); }
.wordmark{ font-size:clamp(34px,6.6vw,104px); letter-spacing:-.02em; }
.masthead__line{
  background:var(--ground); color:var(--accent); padding:10px 16px; margin:0;
  font-size:clamp(10.5px,.86vw,14px); letter-spacing:.24em; padding-bottom:10px;
}
.masthead__rule{ height:2px; background:var(--ground); }

.nav__list{ gap:8px 8px; padding-block:14px 12px; }
.nav__link{
  background:var(--ground); color:var(--ink); border:2px solid var(--ground);
  padding:12px 18px; gap:11px; font-size:clamp(12px,.95vw,15px); letter-spacing:.16em;
}
.nav__link svg{ width:22px; height:22px; }
.nav__link:hover{ background:var(--accent); color:var(--ground); box-shadow:none; }
.nav__link:hover svg{ color:inherit; }
.nav__link[aria-current="page"]{ background:var(--ink); color:var(--ground); box-shadow:none; }
.nav__link[aria-current="page"] svg{ color:inherit; }
.nav__list > li:nth-child(1) .nav__link svg{ color:#F0B429; }
.nav__list > li:nth-child(2) .nav__link svg{ color:#45A8A3; }
.nav__list > li:nth-child(3) .nav__link svg{ color:#E0805E; }
.nav__list > li:nth-child(4) .nav__link svg{ color:#F0B429; }
.nav__list > li:nth-child(5) .nav__link svg{ color:#45A8A3; }
.nav__list > li:nth-child(6) .nav__link svg{ color:#C3C8CC; }
.nav__l2{ border-top:2px solid var(--ground); padding:12px 0 14px; }
@media (max-width:560px){
  .nav__link{ padding:11px 14px; letter-spacing:.12em; }
  .nav__list{ gap:6px; }
}

/* ---- review pass ---- */
/* 1 · the facing-band labels get a padded plate of their own */
.kicker{ padding:10px 14px; background:var(--panel); border-left:3px solid currentColor; }
.facing .kicker,.split .kicker{ margin-bottom:20px; }
.band__head .kicker{ background:none; border-left:0; padding:0; }

/* 2 · the sixty-three years band carries more weight */
.numberband{ border-block:3px solid var(--ground); }
.numberband__inner{ padding-block:clamp(30px,4.2vw,84px); gap:clamp(18px,3.4vw,84px); }
.numberband__n{ font-size:clamp(118px,16.5vw,330px); line-height:.74; }
.numberband__t{ font-size:clamp(19px,1.6vw,32px); max-width:40ch; line-height:1.35; }

/* 3 · the documents band: tighter, and the plates are treated */
.band--panel .dpair + .dpair{ margin-top:clamp(16px,1.7vw,34px); }
.dpair{ padding-top:clamp(14px,1.5vw,28px); gap:clamp(16px,1.8vw,44px); }
.dpair__thumb{ flex:0 0 clamp(120px,11.5vw,220px); background:var(--panel); padding:8px; border-top:2px solid var(--accent); }
.dpair--lead .dpair__thumb{ flex:0 0 clamp(150px,15vw,280px); }
.dpair__thumb img{ border:1px solid var(--rule-strong); }
.dpair__side:last-child .dpair__thumb{ border-top-color:var(--second); }
.dpair__body h3{ margin-bottom:8px; }

/* ---- label margins win too (same specificity cause as the colours) ---- */
p.dpair__tag.dpair__tag{ margin:0 0 9px; }
p.kicker.kicker{ margin:0 0 14px; }
.facing p.kicker.kicker,.split p.kicker.kicker{ margin-bottom:20px; }
p.entry__meta.entry__meta{ margin:0 0 10px; }
p.rule-card__state.rule-card__state{ margin:0; }
p.card__foot.card__foot{ margin-top:auto; padding-top:6px; }
p.eyebrow.eyebrow{ margin:0 0 10px; }
p.catcount.catcount{ margin:0; }
p.band__note.band__note{ margin:clamp(16px,1.8vw,30px) 0 0; }
p.lead.lead{ margin:0 0 var(--para); }
p.p-role.p-role{ margin:0; }
/* the lead pair is the heaviest row, not the most cramped one */
@media (max-width:1099px){
  /* only the homepage's documents band stacks its lead pair; the section-page
     opener keeps the left/right device its own caption describes */
  .band--panel .dpair--lead .dpair__side{ flex:1 1 100%; }
  .dpair--lead .dpair__thumb{ flex:0 0 clamp(104px,11vw,190px); }
}

/* the money band: one lead piece, two figures and a pair of numbers beside it */
.moneygrid{ display:grid; gap:clamp(20px,2.6vw,60px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1000px){ .moneygrid{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.money-lead .kicker{ margin-top:clamp(16px,1.6vw,28px); }
.money-lead h3{ font-size:clamp(24px,2.2vw,46px); margin:0 0 12px; }
.money-lead > p:last-child{ margin:0; color:var(--ink-2); max-width:52ch; }
.money-side{ display:flex; flex-direction:column; gap:clamp(16px,1.8vw,36px); }
.money-item{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; border-top:1px solid var(--rule); padding-top:clamp(14px,1.4vw,26px); }
.money-thumb{ flex:0 0 clamp(96px,9vw,160px); background:var(--panel); padding:7px; border-top:2px solid var(--second); }
.money-item:last-child .money-thumb{ border-top-color:var(--accent); }
.money-thumb img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--rule-strong); }
.money-body{ flex:1 1 min(100%,220px); min-width:0; }
.money-item h3{ font-size:clamp(18px,1.35vw,27px); margin:0 0 8px; }
.money-item p:last-child{ margin:0; color:var(--ink-2); font-size:16px; }
.money-side .statrow{ grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); }

/* the settlement-paid-for-the-advertising line: a teal plate, full bleed */
.quietline{ background:var(--second); color:var(--on-second); border-block:3px solid var(--ground); padding-block:0; }
.quietline__in{ display:flex; flex-wrap:wrap; gap:clamp(16px,2.2vw,52px); align-items:stretch; padding-block:clamp(30px,4vw,84px); }
.quietline__mark{ flex:0 0 26px; align-self:stretch; min-height:96px; }
.quietline__mark svg{ width:26px; height:100%; }
.quietline .quietline__in p{
  flex:1 1 min(100%,28ch); min-width:0; margin:0; color:var(--on-second);
  font-family:var(--display); font-size:clamp(22px,2.3vw,46px); line-height:1.22; max-width:36ch;
}
@media (min-width:1600px){ .quietline .quietline__in p{ max-width:42ch; } }

/* truth® keeps its own casing wherever the section is named */
.lc{ text-transform:none; }

/* ---- and their type sizes (same specificity cause as the colours and margins) ---- */
p.dpair__tag.dpair__tag{ font-size:11.5px; line-height:1.3; }
p.entry__meta.entry__meta{ font-size:11.5px; line-height:1.3; }
p.catcount.catcount{ font-size:12px; line-height:1.3; }
p.card__foot.card__foot{ font-size:11px; line-height:1.3; }
p.rule-card__state.rule-card__state{ font-size:11.5px; line-height:1.3; }
p.kicker.kicker{ font-size:12px; line-height:1.3; }
p.eyebrow.eyebrow{ font-size:11.5px; line-height:1.3; }
p.credit.credit{ font-size:11.5px; line-height:1.5; }
p.p-role.p-role{ font-size:11.5px; line-height:1.3; }
p.p-attr.p-attr{ font-size:12px; line-height:1.5; }
p.arch__sec.arch__sec{ font-size:11.5px; line-height:1.4; }
p.band__note.band__note{ font-size:15px; line-height:1.7; }

/* 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){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):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-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;}

/* op-grid-3up-fill: operator: use the full width of the container and three items per row. The
   tracks were a FIXED repeat(auto-fit, min(100%,520px)) with justify-content:start, so two 520px
   tiles sat in a much wider band and left the rest empty. Three fluid tracks fill it. Desktop
   only — Design centres the fixed tracks below 1100px and that still applies. */
@media (min-width:1100px){
  .sup-grid{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}
}

/* op-no-mark-ground: operator: the extra black background is not needed. Design gave the mark
   background:var(--ground) — #101418, the PAGE ground — so on the tile's own --panel (#181D22) it
   read as a darker box around every wordmark. Fill only; the fixed 224x56 box, the inset and the
   contain all stay, so the marks keep their uniform size. */
.sponsor img{background:transparent}

/* op-money-columns: the supporters block ran one tile per row — 6 tiles,
   955px at 390, 10% of the whole page. Two columns bring it to
   616px (35% shorter). Checked before writing: no new overflow, smallest mark still
   133px wide, longest blurb 2 lines, tile heights 184-206px.
   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.
   Only the tier(s) that were one-per-row are touched (.sup-grid), 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){
  .sup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sup-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-grid > * *{min-width:0!important;max-width:100%}
    .sup-grid img,.sup-grid svg{max-width:100%;height:auto}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0px; text-wrap: pretty;}
h1:where(.rt-h2){font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0px; text-wrap: pretty;}
.pair__col h1:where(.rt-h2){font-size: clamp(21px, 1.9vw, 36px); margin: 16px 0px 10px;}
.band__head h1:where(.rt-h2){font-size: clamp(24px, 2.4vw, 48px); margin: 0px;}
.dpair__body h2:where(.rt-h3){font-size: clamp(19px, 1.55vw, 30px); margin: 0px 0px 10px;}
.dpair__body h2:where(.rt-h3) a{text-decoration: none;}
.dpair__body h2:where(.rt-h3) a:hover{text-decoration: underline;}
.dpair__body h2:where(.rt-h3){margin-bottom: 8px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.entry.entry--alt.entry--row > div.entry__media > img,
  article.entry.entry--lead > div.entry__media > img,
  article.entry.entry--row > div.entry__media > img,
  article.money-item > div.money-thumb > img,
  div.breakout.insert > figure.article-figure.mat > img,
  div.cards > a.card > img.card__img,
  div.dpair__side > div.dpair__thumb > img,
  figure.article-figure.hero.marked > div.frame > img,
  figure.article-figure.marked > div.frame > img,
  figure.article-figure.marked.plate > div.frame > img,
  li > a > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sup-grid (7 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sup-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
@media (min-width:728px) and (max-width:1099px){.sup-grid.sup-grid:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(520px,calc(50% - 7px)),1fr))!important;justify-content:stretch!important}.sup-grid.sup-grid > [data-partner]{width:auto!important;max-width:none!important}}
@media (min-width:728px) and (max-width:1099px){.sup-grid.sup-grid:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(520px,calc(50% - 16px)),1fr))!important}.sup-grid.sup-grid > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important}}