/* The Listening Room — "The Room" direction
   walnut ink · brass dial · warm cream ground */

:root{
  --paper:#EFE6D6;
  --paper-2:#E5D9C4;
  --paper-3:#DFD1B8;
  --ink:#3A2A22;
  --ink-2:#5A463C;
  --ink-3:#7A6558;
  --walnut:#241812;
  --brass:#C9A227;
  --brass-lt:#E3C766;
  --sienna:#8C3B22;
  --line:rgba(58,42,34,.20);
  --line-2:rgba(58,42,34,.34);
  --line-brass:rgba(201,162,39,.34);

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --prose:'Newsreader',Georgia,serif;
  --ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono','SFMono-Regular',Menlo,monospace;

  --gut:clamp(20px,4vw,64px);
  --maxw:1460px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--prose);font-size:20px;line-height:1.62;font-weight:300;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--sienna);text-decoration:none}
a:hover{color:var(--brass)}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
::selection{background:var(--brass);color:var(--walnut)}
:focus-visible{outline:2px solid var(--sienna);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:1080px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--walnut);color:var(--paper);padding:10px 14px;z-index:99}

/* ───────── kickers & headings ───────── */
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sienna);margin:0 0 18px}
.kicker--brass{color:var(--brass)}
.band-hd{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-bottom:1px solid var(--line-2);padding-bottom:14px;margin-bottom:40px}
.band-hd h2{font-family:var(--ui);font-size:15px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--sienna)}
.band-hd .aside{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;color:var(--ink-3)}
.band--dark .band-hd{border-bottom-color:var(--line-brass)}
.band--dark .band-hd h2{color:var(--brass)}
.band--dark .band-hd .aside{color:rgba(239,230,214,.58)}

.band{padding-block:clamp(48px,6vw,84px)}
.band--tight{padding-block:clamp(34px,4vw,54px)}
.band--dark{background:var(--walnut);color:var(--paper)}
.band--walnut{background:var(--ink);color:var(--paper)}
.band--paper2{background:var(--paper-2)}

/* ───────── masthead + dropdown nav ───────── */
.masthead{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--ink)}
.masthead__in{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  max-width:var(--maxw);margin-inline:auto;padding:18px var(--gut) 14px}
.brandblock{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.wordmark{font-family:var(--ui);font-size:clamp(21px,2vw,28px);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);line-height:1}
a.wordmark:hover{color:var(--sienna)}
.strapline{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--sienna)}

.nav{font-family:var(--ui)}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(20px,2.2vw,34px);align-items:flex-end}
.nav>ul>li{position:relative}
.nav>ul>li>a{display:block;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding-bottom:6px;border-bottom:2px solid transparent}
.nav>ul>li>a:hover,.nav>ul>li:focus-within>a{color:var(--sienna);border-bottom-color:var(--brass)}
.nav>ul>li>a[aria-current="page"]{color:var(--sienna);border-bottom-color:var(--brass)}
.nav .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav-sub{list-style:none;margin:0;padding:14px 0 10px;position:absolute;top:calc(100% + 14px);left:-18px;
  min-width:322px;background:var(--walnut);border:1px solid var(--line-brass);
  box-shadow:0 18px 44px rgba(36,24,18,.35);opacity:0;visibility:hidden;transform:translateY(-6px);z-index:70}
.nav-sub::before{content:attr(data-cat);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);padding:0 20px 10px;margin-bottom:8px;border-bottom:1px solid var(--line-brass)}
.nav .has-sub:hover>.nav-sub,.nav .has-sub:focus-within>.nav-sub{opacity:1;visibility:visible;transform:none}
.nav>ul>li:nth-last-child(-n+3) .nav-sub{left:auto;right:-18px}
.nav-sub a{display:block;padding:9px 20px;font-family:var(--prose);font-size:18px;font-weight:300;line-height:1.3;
  color:rgba(239,230,214,.82)}
.nav-sub a:hover{background:rgba(201,162,39,.12);color:var(--brass)}
.nav-sub .sub-all{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  padding-top:12px;margin-top:8px;border-top:1px solid var(--line-brass)}
.nav-burger{display:none}

@media (max-width:1180px){
  .nav>ul>li>a{font-size:13px;letter-spacing:.08em}
  .nav>ul{gap:18px}
}
@media (max-width:960px){
  .masthead__in{align-items:center}
  .nav-burger{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--sienna);cursor:pointer;padding:8px 0;background:none;border:0;-webkit-appearance:none}
  .nav-burger svg{width:22px;height:22px}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--walnut);border-bottom:2px solid var(--brass);
    max-height:0;overflow:hidden}
  .masthead[data-nav-open] .nav{max-height:calc(100vh - 100%);overflow-y:auto}
  .nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0 20px}
  .nav>ul>li>a{color:var(--paper);font-size:15px;padding:14px var(--gut) 10px;border-bottom:none}
  .nav>ul>li>a:hover,.nav>ul>li:focus-within>a{border-bottom-color:transparent;color:var(--brass)}
  .nav .has-sub::after{display:none}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;min-width:0;
    padding:0 0 14px;background:transparent}
  .nav>ul>li:nth-last-child(-n+3) .nav-sub{right:auto}
  .nav-sub::before{display:none}
  .nav-sub a{padding:7px var(--gut) 7px calc(var(--gut) + 18px);font-size:17px;border-left:1px solid var(--line-brass);
    margin-left:var(--gut)}
  .nav-sub .sub-all{border-top:none;margin:0}
}

@media (max-width:520px){
  .masthead__in{flex-wrap:wrap;row-gap:6px;padding-top:14px}
  .brandblock{flex:1 1 auto;min-width:0;gap:8px}
  .wordmark{font-size:16px;letter-spacing:.05em}
  .strapline{font-size:11px;letter-spacing:.12em}
  .foot .wordmark{font-size:18px;letter-spacing:.08em}
}

/* ───────── hero / start here ───────── */
.hero{padding-block:clamp(40px,5vw,70px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,4vw,64px);align-items:end}
.hero h1{font-family:var(--prose);font-size:clamp(40px,5.6vw,82px);line-height:1;letter-spacing:-.02em;margin:0 0 26px}
.hero .dek{font-size:clamp(20px,1.6vw,25px);line-height:1.5;color:var(--ink-2);max-width:30em;text-wrap:pretty}
.hero__figure{position:relative}
.hero__figure img{width:100%;height:clamp(300px,44vw,560px);object-fit:cover;border:1px solid var(--line-2)}
.hero__figure figcaption{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-3);padding-top:10px}
.hero__meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
.hero__meta div{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--ink-2);max-width:22ch}
.hero__meta b{display:block;font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sienna);margin-bottom:6px}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}

/* ───────── rules + plan view (one component, CSS-only) ───────── */
.rp input{position:absolute;opacity:0;pointer-events:none}
.rp__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(26px,3.4vw,54px);align-items:start}
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.rules li{border-bottom:1px solid var(--line)}
.rules label{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;padding:20px 16px 20px 12px;
  cursor:pointer;border-left:3px solid transparent}
.rules label:hover{background:rgba(201,162,39,.09)}
.rules .n{font-family:var(--mono);font-size:14px;letter-spacing:.14em;color:var(--sienna);padding-top:4px}
.rules .r{font-family:var(--ui);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2;display:block;margin-bottom:5px}
.rules .note-in{font-size:18.5px;line-height:1.45;color:var(--ink-2);display:block}
.plan{border:1px solid var(--line-2);background:var(--paper-2);position:sticky;top:104px}
.plan__hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 20px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.plan__hd .live{color:var(--sienna);text-transform:none;letter-spacing:.04em}
.plan__hd .live span{display:none}
.plan svg{display:block;width:100%;height:auto}
.plan__notes{padding:16px 20px;border-top:1px solid var(--line);min-height:5.4em}
.plan__notes p{display:none;font-size:19px;line-height:1.5;color:var(--ink);margin:0}
/* Diagram annotation: the SVG is scaled to its container, so the type size is
   stepped per layout regime to land at ~15-19px on screen at every width. */
.plan .pl,.plan .pa{paint-order:stroke fill;stroke:var(--paper);stroke-linejoin:round}
.plan .pl{font-family:var(--mono);letter-spacing:2px;fill:rgba(58,42,34,.62);font-size:14px;stroke-width:4px}
.plan .pa{font-family:var(--mono);fill:var(--sienna);font-size:16px;stroke-width:4.5px}
@media (max-width:1200px){.plan .pl{font-size:20px}.plan .pa{font-size:23px}}
@media (max-width:900px){.plan .pl{font-size:11.5px}.plan .pa{font-size:13px}}
@media (max-width:720px){.plan .pl{font-size:15px}.plan .pa{font-size:17px}}
@media (max-width:520px){.plan .pl{font-size:21px}.plan .pa{font-size:24px}}
@media (max-width:440px){.plan .pl{font-size:27px}.plan .pa{font-size:28px}}
.ov{opacity:0}
.rp #rule-1:checked~.rp__grid .ov-1,.rp #rule-2:checked~.rp__grid .ov-2,
.rp #rule-3:checked~.rp__grid .ov-3,.rp #rule-4:checked~.rp__grid .ov-4,
.rp #rule-5:checked~.rp__grid .ov-5{opacity:1}
.rp #rule-1:checked~.rp__grid .pn-1,.rp #rule-2:checked~.rp__grid .pn-2,
.rp #rule-3:checked~.rp__grid .pn-3,.rp #rule-4:checked~.rp__grid .pn-4,
.rp #rule-5:checked~.rp__grid .pn-5{display:block}
.rp #rule-1:checked~.rp__grid .hl-1,.rp #rule-2:checked~.rp__grid .hl-2,
.rp #rule-3:checked~.rp__grid .hl-3,.rp #rule-4:checked~.rp__grid .hl-4,
.rp #rule-5:checked~.rp__grid .hl-5{display:inline}
.rp #rule-1:checked~.rp__grid .lb-1,.rp #rule-2:checked~.rp__grid .lb-2,
.rp #rule-3:checked~.rp__grid .lb-3,.rp #rule-4:checked~.rp__grid .lb-4,
.rp #rule-5:checked~.rp__grid .lb-5{background:var(--paper-2);border-left-color:var(--brass)}
@media (max-width:900px){
  .rp__grid{grid-template-columns:1fr}
  .plan{position:static;order:-1}
}

/* ───────── signal chain ───────── */
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-brass);
  border:1px solid var(--line-brass)}
.chain__stage{background:var(--walnut);padding:26px 24px 30px;display:flex;flex-direction:column;gap:13px}
.chain__stage .n{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;color:var(--brass)}
.chain__stage h3{font-family:var(--ui);font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--paper)}
.chain__stage .does{font-size:18.5px;line-height:1.45;color:rgba(239,230,214,.78);flex:1}
.chain__stage .diff{font-size:18px;line-height:1.45;color:var(--brass-lt);padding-top:13px;border-top:1px solid var(--line-brass)}
.mag{display:flex;gap:5px;align-items:flex-end;height:26px}
.mag i{display:block;width:16px;background:rgba(239,230,214,.18)}
.mag i.on{background:var(--brass)}
.mag i:nth-child(1){height:35%}.mag i:nth-child(2){height:55%}.mag i:nth-child(3){height:78%}.mag i:nth-child(4){height:100%}
.mag-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,230,214,.6)}
@media (max-width:1000px){.chain{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.chain{grid-template-columns:1fr}}

/* ───────── spec decoder ───────── */
.decoder{border-top:1px solid var(--line-2)}
.decoder__row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.3fr);
  gap:clamp(16px,2.4vw,44px);padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.decoder__row:hover{background:rgba(201,162,39,.07)}
.decoder .spec{font-family:var(--display);font-size:clamp(24px,2.3vw,33px);line-height:1.08}
.decoder .lab{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sienna);
  display:block;margin-bottom:8px}
.decoder .txt{font-size:19.5px;line-height:1.5;color:var(--ink-2)}
.decoder .txt strong{font-weight:500;color:var(--ink)}
.decoder .not .lab{color:var(--ink-3)}
@media (max-width:860px){.decoder__row{grid-template-columns:1fr;gap:14px}}

/* ───────── budget split ───────── */
.bud input{position:absolute;opacity:0;pointer-events:none}
.bud__tabs{display:flex;flex-wrap:wrap;border:1px solid var(--line-brass);width:max-content;max-width:100%;margin-bottom:34px}
.bud__tabs label{font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:13px 26px;cursor:pointer;color:rgba(239,230,214,.66);border-right:1px solid var(--line-brass)}
.bud__tabs label:last-child{border-right:none}
.bud__tabs label:hover{color:var(--brass)}
.bud__panel{display:none}
.bud #tier-1:checked~.bud__body .bp-1,.bud #tier-2:checked~.bud__body .bp-2,.bud #tier-3:checked~.bud__body .bp-3{display:block}
.bud #tier-1:checked~.bud__tabs .tb-1,.bud #tier-2:checked~.bud__tabs .tb-2,.bud #tier-3:checked~.bud__tabs .tb-3{background:var(--brass);color:var(--walnut)}
.bud__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(26px,3.4vw,52px);align-items:start}
.split{display:flex;height:82px;border:1px solid var(--line-brass);overflow:hidden;margin-bottom:20px}
.split div{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;
  border-right:1px solid rgba(239,230,214,.14)}
.split div:last-child{border-right:none}
.split-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.split-legend li{display:flex;flex-direction:column;gap:7px}
.split-legend .sw{height:4px;display:block}
.split-legend .nm{font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--paper)}
.split-legend .pc{font-family:var(--mono);font-size:20px;color:var(--brass)}
.bud__arg{border-left:1px solid var(--line-brass);padding-left:clamp(20px,2.4vw,36px)}
.bud__arg p{font-size:21px;line-height:1.55;color:var(--paper)}
.bud__arg .standing{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line-brass)}
@media (max-width:980px){.bud__body{grid-template-columns:1fr}.bud__arg{border-left:none;border-top:1px solid var(--line-brass);
  padding:22px 0 0}.split-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.split{height:auto;flex-direction:column}.split div{height:46px;border-right:none;
  border-bottom:1px solid rgba(239,230,214,.14)}}

/* ───────── section cards ───────── */
.seccards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,1.8vw,28px);align-items:stretch}
.seccard{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:2px solid var(--ink);color:var(--ink);height:100%}
.seccard:hover{border-top-color:var(--sienna);color:var(--sienna)}
.seccard .n{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;color:var(--sienna)}
.seccard h3{font-family:var(--ui);font-size:21px;font-weight:700;line-height:1.14;min-height:2.28em}
.seccard p{font-size:18px;line-height:1.45;color:var(--ink-2);flex:1;margin:0}
.seccard .cnt{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--ink-3);
  padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:1100px){.seccards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.seccards{grid-template-columns:repeat(2,minmax(0,1fr))}.seccard h3{min-height:0}}
@media (max-width:440px){.seccards{grid-template-columns:1fr}}

/* ───────── reading feed ───────── */
.feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.feed--lead{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.fcard{background:var(--paper);padding:22px 22px 26px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.fcard:hover{background:var(--paper-2)}
.fcard__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.fcard__img img{width:100%;height:100%;object-fit:cover}
.fcard .cat{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sienna)}
.fcard h3{font-family:var(--display);font-size:clamp(22px,1.9vw,29px);line-height:1.12;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fcard--big h3{font-size:clamp(26px,2.6vw,40px)}
.fcard p{font-size:18px;line-height:1.45;color:var(--ink-2);flex:1;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;color:var(--ink-3);
  padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:1000px){.feed,.feed--lead{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.feed,.feed--lead{grid-template-columns:1fr}}

.more{margin-top:0}
.more input{position:absolute;opacity:0;pointer-events:none}
.more__extra{max-height:0;overflow:hidden}
.more input:checked~.more__extra{max-height:none;overflow:visible}
.more__btn{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--ui);font-size:13px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sienna);cursor:pointer;
  border:1px solid var(--line-2);padding:14px 24px}
.more__btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.more input:checked~.more__btn{display:none}
.rowlist{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.rowlist li{border-bottom:1px solid var(--line)}
.rowlist a{display:grid;grid-template-columns:64px minmax(0,1.5fr) minmax(0,1.6fr) auto;gap:clamp(14px,2vw,32px);
  align-items:baseline;padding:20px 8px;color:var(--ink)}
.rowlist a:hover{background:var(--paper-2);color:var(--sienna)}
.rowlist .n{font-family:var(--mono);font-size:14px;color:var(--brass)}
.rowlist .t{font-family:var(--display);font-size:clamp(20px,1.7vw,26px);line-height:1.15}
.rowlist .b{font-size:18px;line-height:1.4;color:var(--ink-2)}
.rowlist .m{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);white-space:nowrap}
@media (max-width:860px){.rowlist a{grid-template-columns:40px 1fr;row-gap:8px}
  .rowlist .b,.rowlist .m{grid-column:2}}

/* ───────── supporters ───────── */
.sup{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding-block:clamp(28px,3vw,40px)}
.sup__hd{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.sup__hd h2{font-family:var(--display);font-size:clamp(24px,2.2vw,32px);line-height:1.1}
.sup__hd .k{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sienna)}
.sup__hd .adv{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sup__row{display:grid;gap:clamp(14px,1.6vw,24px)}
.sup__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sup__row--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sponsor{display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.sponsor img{width:100%;aspect-ratio:5/2;object-fit:cover;background:var(--walnut);border:1px solid var(--line-brass)}
.sponsor:hover img{border-color:var(--brass)}
.sponsor-blurb{font-size:17.5px;line-height:1.42;color:var(--ink-2);min-height:0}
.sup__row--3 .sponsor-blurb:empty{min-height:2.9em}
.sup__note{font-size:18.5px;line-height:1.5;color:var(--ink-2);max-width:62ch;margin-top:22px}
@media (max-width:820px){.sup__row--3,.sup__row--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.sup__row--3,.sup__row--4{grid-template-columns:1fr}}

/* ───────── footer ───────── */
.foot{background:var(--walnut);color:var(--paper);padding-block:clamp(40px,4.5vw,64px);border-top:2px solid var(--brass)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.foot .wordmark{color:var(--paper);font-size:21px;letter-spacing:.1em;margin-bottom:14px;display:block}
.foot p{font-size:18px;line-height:1.55;color:rgba(239,230,214,.66);max-width:36em}
.foot h4{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot ul a{font-size:18px;color:rgba(239,230,214,.72)}
.foot ul a:hover{color:var(--brass)}
.foot__disc{margin-top:clamp(30px,3.5vw,46px);padding-top:22px;border-top:1px solid var(--line-brass);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:rgba(239,230,214,.55)}
@media (max-width:900px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ───────── article ───────── */
.arthero{position:relative;background:var(--walnut)}
.arthero img{width:100%;height:clamp(260px,42vw,580px);object-fit:cover;opacity:.86}
.arthero__plate{max-width:var(--maxw);margin:-96px auto 0;padding-inline:var(--gut);position:relative;z-index:2}
.arthero__plate .inner{background:var(--paper);border-top:3px solid var(--brass);padding:clamp(26px,3.2vw,46px) clamp(24px,3vw,54px) clamp(24px,2.6vw,38px);max-width:1080px}
.arthero h1{font-family:var(--display);font-size:clamp(32px,4.6vw,68px);line-height:1.03;letter-spacing:-.022em;margin:0 0 18px}
.artmeta{font-family:var(--mono);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sienna);
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.artmeta .sep{color:var(--ink-3)}
.crumb{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  padding:22px 0 0}
.crumb a{color:var(--sienna)}
@media (max-width:760px){.arthero__plate{margin-top:0}.arthero__plate .inner{padding-inline:0;background:transparent;border-top:none}
  .arthero__plate{padding-top:26px}}

.article-body{
  display:grid;
  grid-template-columns:[num] 68px [text] minmax(0,72ch) [text-end gap] clamp(24px,3vw,56px) [margin] minmax(0,28ch) [margin-end];
  justify-content:start;align-content:start;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  padding-block:clamp(34px,4vw,60px);column-gap:0;
}
.article-body>*{grid-column:text}
.article-body>p{font-size:22px;line-height:1.68;color:var(--ink);margin:0 0 1.15em;text-wrap:pretty}
.article-body>p.lead{font-family:var(--prose);font-size:clamp(23px,2vw,29px);line-height:1.45;color:var(--ink-2);
  margin-bottom:1.1em;font-weight:300}
.article-body>p.dropcap::first-letter{float:left;font-family:var(--display);font-size:5.4em;line-height:.76;
  margin:.06em .12em 0 0;color:var(--brass)}
.article-body>h2{grid-column:num / text-end;display:grid;grid-template-columns:68px 1fr;gap:0;
  font-family:var(--ui);font-size:clamp(17px,1.5vw,21px);font-weight:700;letter-spacing:.02em;color:var(--ink);
  margin:2.2em 0 .8em;padding-bottom:.55em;border-bottom:1px solid var(--line-2);counter-increment:sec}
.article-body>h2::before{content:counter(sec,decimal-leading-zero);font-family:var(--mono);font-size:14px;
  letter-spacing:.1em;color:var(--brass);font-weight:400;padding-top:.35em}
.article-body>h2:first-of-type{margin-top:.6em}
.article-body>h3{font-family:var(--ui);font-size:19px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--sienna);margin:1.9em 0 .5em}
.article-body{counter-reset:sec}
.article-body em{font-style:italic}
.article-body strong{font-weight:500}
.article-body>p a,.article-body li a{color:var(--sienna);border-bottom:1px solid rgba(140,59,34,.34)}
.article-body>p a:hover{color:var(--ink);border-bottom-color:var(--brass);background:rgba(201,162,39,.16)}
.article-body>.full{grid-column:num / margin-end}

/* marginal pull-quote — paired with the paragraph it was lifted from */
.article-body>.qpair{grid-column:text / margin-end;display:grid;align-items:start;
  grid-template-columns:minmax(0,72ch) clamp(24px,3vw,56px) minmax(0,28ch)}
.article-body>.qpair>p{grid-column:1;font-size:22px;line-height:1.68;color:var(--ink);margin:0 0 1.15em;text-wrap:pretty}
.article-body>.qpair>*{grid-column:1}
.article-body>.qpair>.pullquote{grid-column:3}
.article-body .full{grid-column:num / text-end}
.pullquote{margin:.2em 0 1.4em;padding-left:clamp(20px,2.4vw,34px);border-left:2px solid var(--brass);align-self:start}
.pullquote p{font-family:var(--display);font-size:clamp(21px,1.85vw,27px);line-height:1.3;font-style:italic;
  color:var(--ink);margin:0;text-wrap:pretty}
.article-body--narrow{grid-template-columns:[num] 68px [text] minmax(0,74ch) [text-end margin-end]}
.article-body--narrow>.qpair{grid-template-columns:minmax(0,74ch)}
.article-body--narrow>.qpair>.pullquote{grid-column:1;margin:1.5em 0;padding:0 0 0 clamp(20px,2.4vw,34px)}
.article-body--narrow>.full{grid-column:num / text-end}
@media (max-width:1160px){
  .article-body,.article-body--narrow{grid-template-columns:[num] 56px [text] minmax(0,1fr) [text-end margin-end]}
  .article-body>h2{grid-template-columns:56px 1fr}
  .article-body>.full{grid-column:num / text-end}
  .article-body>.qpair,.article-body--narrow>.qpair{grid-template-columns:minmax(0,1fr)}
  .article-body>.qpair>.pullquote{grid-column:1;margin:1.5em 0;padding:0 0 0 24px}
}
@media (max-width:640px){
  .article-body,.article-body--narrow{grid-template-columns:[num] 0 [text] minmax(0,1fr) [text-end margin-end];padding-inline:var(--gut)}
  .article-body>.qpair>p{font-size:20px}
  .article-body>h2{grid-template-columns:1fr;gap:6px}
  .article-body>h2::before{padding-top:0}
  .article-body>p{font-size:20px}
}

/* ───────── palette components ───────── */
.lead{font-size:clamp(22px,1.9vw,27px);line-height:1.45;color:var(--ink-2)}
.blockquote{margin:2em 0;padding:0 0 0 clamp(20px,2.4vw,34px);border-left:3px solid var(--sienna)}
.blockquote p{font-family:var(--prose);font-size:22px;line-height:1.5;font-style:italic;margin:0 0 .5em}
.blockquote cite{font-family:var(--mono);font-size:13.5px;font-style:normal;letter-spacing:.08em;color:var(--ink-3)}
.callout{margin:2.2em 0;background:var(--paper-2);border-top:3px solid var(--brass);padding:24px clamp(20px,2.4vw,32px)}
.callout::before{content:"The point";display:block;font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sienna);margin-bottom:10px}
.callout p{font-size:21px;line-height:1.5;margin:0}
.note{margin:1.8em 0;padding:16px 20px;border:1px solid var(--line-2);font-size:18.5px;line-height:1.5;color:var(--ink-2)}
.note::before{content:"Note — ";font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sienna)}

.versus,.datatable{width:100%;border-collapse:collapse;margin:2.2em 0;font-size:18.5px}
.versus caption,.datatable caption{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sienna);text-align:left;padding-bottom:12px}
.versus th,.datatable th{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;padding:12px 14px;border-bottom:2px solid var(--ink);vertical-align:bottom}
.versus td,.datatable td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45;color:var(--ink-2)}
.versus tbody th{font-family:var(--ui);font-size:14px;border-bottom:1px solid var(--line);color:var(--ink);width:26%}
.datatable tbody tr:hover,.versus tbody tr:hover{background:rgba(201,162,39,.09)}
.datatable td:first-child{color:var(--ink);font-weight:400}
.table-scroll{overflow-x:auto;margin:2.2em 0}
.table-scroll table{margin:0}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin:2.2em 0}
.statblock{background:var(--paper);padding:20px 18px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-size:clamp(26px,2.4vw,36px);line-height:1;color:var(--ink)}
.stat-label{font-size:16.5px;line-height:1.35;color:var(--ink-2)}

.timeline{list-style:none;margin:2.2em 0;padding:0;border-left:2px solid var(--brass)}
.timeline li{display:grid;grid-template-columns:minmax(120px,26%) 1fr;gap:clamp(14px,2vw,28px);
  padding:16px 0 16px 24px;position:relative;border-bottom:1px solid var(--line)}
.timeline li::before{content:"";position:absolute;left:-6px;top:24px;width:10px;height:10px;background:var(--brass);
  border-radius:50%}
.t-when{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--sienna);line-height:1.35}
.t-what{font-size:18.5px;line-height:1.45;color:var(--ink-2)}
@media (max-width:600px){.timeline li{grid-template-columns:1fr;gap:5px}}

.chart{margin:2.4em 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-3);padding-top:14px;
  border-top:1px solid var(--line);margin-top:14px;line-height:1.45}
.chart .ax{font-family:var(--mono);font-size:11px;fill:var(--ink-3)}
.chart .bl{font-family:var(--ui);font-size:11.5px;font-weight:700;fill:var(--ink);letter-spacing:.06em}
.chart .vl{font-family:var(--mono);font-size:12px;fill:var(--sienna)}

.article-figure{margin:2.4em 0}
.article-figure img{width:100%;border:1px solid var(--line-2)}
.article-figure figcaption{font-family:var(--mono);font-size:13.5px;line-height:1.45;color:var(--ink-3);padding-top:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:2.4em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line-2)}
.gallery figcaption{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);padding-top:8px;line-height:1.4}
.map-figure{margin:2.4em 0;border:1px solid var(--line-2);background:var(--paper-2);padding:14px}
.map-slot{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,rgba(58,42,34,.05) 0 12px,transparent 12px 24px);
  border:1px dashed var(--line-2);display:flex;align-items:center;justify-content:center}
.map-slot::after{content:"";font-family:var(--mono);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:12px}
.map-figure figcaption{font-family:var(--mono);font-size:13px;color:var(--ink-3);padding-top:12px}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:2.4em 0}
.profile-card{border:1px solid var(--line-2);background:var(--paper-2);padding:22px}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;border-radius:50%;margin-bottom:14px}
.profile-card.no-photo::before{content:"";display:block;width:46px;height:2px;background:var(--brass);margin-bottom:16px}
.profile-card h3{font-family:var(--display);font-size:24px;line-height:1.15;margin-bottom:4px}
.profile-card .p-role{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sienna);margin:0 0 10px}
.profile-card p{font-size:18px;line-height:1.45;color:var(--ink-2)}
.profile-card .p-links{font-family:var(--mono);font-size:13px;letter-spacing:.06em;margin:12px 0 0}
.profile-card .p-attr{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:8px}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:2.4em 0}
.org-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-2);padding:16px 18px;color:var(--ink);
  background:var(--paper)}
.org-card:hover{background:var(--paper-2);border-color:var(--sienna)}
.org-card .org-logo{width:34px;height:34px;object-fit:contain;margin-bottom:6px}
.org-card.no-logo::before{content:"";width:26px;height:2px;background:var(--brass);display:block;margin-bottom:8px}
.org-name{font-family:var(--ui);font-size:17px;font-weight:700;line-height:1.2}
.org-host{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);word-break:break-word}
.entity-ref{font-family:inherit;border-bottom:1px solid rgba(140,59,34,.4)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin:2.4em 0}
.further-grid a{background:var(--paper);padding:20px;font-family:var(--display);font-size:22px;line-height:1.15;color:var(--ink)}
.further-grid a:hover{background:var(--paper-2);color:var(--sienna)}

.related{border-top:2px solid var(--ink);padding-top:26px;margin-top:clamp(34px,4vw,56px)}
.related h2{font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sienna);margin-bottom:22px}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.related-links li{background:var(--paper)}
.related-links a{display:flex;flex-direction:column;gap:8px;padding:22px;height:100%;color:var(--ink)}
.related-links a:hover{background:var(--paper-2);color:var(--sienna)}
.related-links .cat{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sienna)}
.related-links .t{font-family:var(--display);font-size:24px;line-height:1.14}
.related-links .b{font-size:17.5px;line-height:1.4;color:var(--ink-2)}

/* ───────── category / hub / simple pages ───────── */
.pagehead{padding-block:clamp(40px,5vw,72px);border-bottom:1px solid var(--line-2)}
.pagehead__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:end}
.pagehead h1{font-family:var(--prose);font-size:clamp(36px,5vw,72px);line-height:1.01;letter-spacing:-.02em}
.pagehead .dek{font-size:clamp(19px,1.5vw,23px);line-height:1.5;color:var(--ink-2);max-width:34em}
@media (max-width:880px){.pagehead__grid{grid-template-columns:1fr}}

.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1.3fr) minmax(0,1.4fr) auto;
  gap:clamp(16px,2.4vw,36px);align-items:center;padding:22px 8px;color:var(--ink)}
.cat-list a:hover{background:var(--paper-2);color:var(--sienna)}
.cat-list .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.cat-list .thumb img{width:100%;height:100%;object-fit:cover}
.cat-list .t{font-family:var(--display);font-size:clamp(22px,2vw,30px);line-height:1.1}
.cat-list .b{font-size:18.5px;line-height:1.45;color:var(--ink-2)}
.cat-list .m{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);white-space:nowrap}
@media (max-width:900px){.cat-list a{grid-template-columns:110px 1fr;row-gap:10px}
  .cat-list .b,.cat-list .m{grid-column:2}}
@media (max-width:520px){.cat-list a{grid-template-columns:1fr}
  .cat-list .b,.cat-list .m{grid-column:1}}

.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line)}
.hubcol{background:var(--paper);padding:26px 24px 30px;display:flex;flex-direction:column;gap:14px}
.hubcol h2{font-family:var(--ui);font-size:21px;font-weight:700;line-height:1.15}
.hubcol>p{font-size:18px;line-height:1.45;color:var(--ink-2);margin:0}
.hubcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.hubcol li{border-bottom:1px solid var(--line)}
.hubcol li a{display:block;padding:11px 0;font-family:var(--prose);font-size:19px;line-height:1.3;color:var(--ink)}
.hubcol li a:hover{color:var(--sienna)}

.prose-page{max-width:74ch;padding-inline:var(--gut);margin-inline:auto;padding-block:clamp(34px,4vw,60px)}
.prose-page h2{font-family:var(--ui);font-size:16px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sienna);margin:2.2em 0 .7em;padding-bottom:.5em;border-bottom:1px solid var(--line-2)}
.prose-page p{font-size:21px;line-height:1.66}
.prose-page ul{padding-left:1.1em;font-size:21px;line-height:1.6}
.prose-page li{margin-bottom:.5em}
.contact-list{list-style:none;padding:0;margin:1.6em 0;display:grid;gap:14px}
.contact-list li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;font-size:20px;line-height:1.45}
.contact-list svg{width:22px;height:22px;stroke:var(--sienna);fill:none;stroke-width:1.5;margin-top:3px}

.err{padding-block:clamp(60px,9vw,140px);text-align:left}
.err h1{font-family:var(--display);font-size:clamp(44px,7vw,104px);line-height:.98;letter-spacing:-.02em;margin-bottom:20px}
.err p{font-size:23px;line-height:1.5;color:var(--ink-2);max-width:30em}
.err .code{font-family:var(--mono);font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:22px}
.btn{display:inline-block;margin-top:28px;font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);background:var(--ink);padding:16px 30px}
.btn:hover{background:var(--sienna);color:var(--paper)}

/* ───────── styleguide ───────── */
.sg-sec{padding-block:clamp(34px,4vw,56px);border-bottom:1px solid var(--line)}
.sg-sec>h2{font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sienna);margin-bottom:8px}
.sg-sec>.hint{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-bottom:28px}
.sg-demo{max-width:78ch}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.sg-sw{border:1px solid var(--line-2)}
.sg-sw i{display:block;height:74px}
.sg-sw span{display:block;font-family:var(--mono);font-size:12.5px;padding:10px 12px;line-height:1.5}
.sg-type p{margin:0 0 14px}

/* 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{object-fit:contain!important}

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

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

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

/* op-bold-names: operator: bold brand names. They are their own .sponsor-name elements — Design
   set a face and size but no weight, so they inherited normal. CSS only. */
.sup__row .sponsor .sponsor-blurb .sp-brand{font-weight:700}


/* op-footer-compact: the footer printed 9 rows for 9 link(s) in
   2 list(s) — 1001px at 390, 7% 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 1001 -> 735px (27% 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(9px,2.99vw,43px)!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:20px}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2598px at 390, 18% of the whole page. Two columns bring it to
   1454px (44% shorter). Checked before writing: no new overflow, smallest mark still
   167px wide, longest blurb 1 lines, tile heights 210-263px.
   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 (.sup__row.sup__row--3, .sup__row.sup__row--4), 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__row.sup__row--3{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:23px!important}
    .sup__row.sup__row--3 > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup__row.sup__row--3 > * *{min-width:0!important;max-width:100%}
    .sup__row.sup__row--3 img,.sup__row.sup__row--3 svg{max-width:100%;height:auto}
  .sup__row.sup__row--4{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:23px!important}
    .sup__row.sup__row--4 > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup__row.sup__row--4 > * *{min-width:0!important;max-width:100%}
    .sup__row.sup__row--4 img,.sup__row.sup__row--4 svg{max-width:100%;height:auto}
}

/* op-blurb-rows: money blurbs ran to 7 rows at 390, 1454px 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. */
@media (max-width:640px){
  .sup__row.sup__row--3 .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:78px!important;min-height:0!important;overflow:hidden!important}
  .sup__row.sup__row--4 .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:78px!important;min-height:0!important;overflow:hidden!important}
  .sup__row.sup__row--4 .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:78px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sup__row.sup__row--3 (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sup__row.sup__row--3:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sup__row.sup__row--4 5 rows at 900). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sup__row.sup__row--4 .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-hover-pad */
.decoder__row{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.thumb > img,
  a.fcard > span.fcard__img > img,
  a.fcard.fcard--big > span.fcard__img > img,
  article.article-body > figure.article-figure.full > img,
  div.hero__grid > figure.hero__figure > img,
  div.wrap > figure.article-figure > img,
  main > div.arthero > img){height:auto}
/* op-img-dims:end */