/* Segre Radio — "Count It Out"
   Palette: ground #0E0E11 · ink #EFEBE2 · acid #D8F231 · magenta #FF2E6C
   Device: four staff rules, magenta bar lines, stacked acid numerals, the 3-3-2 figure. */

:root{
  --ground:#0E0E11;
  --ink:#EFEBE2;
  --acid:#D8F231;
  --magenta:#FF2E6C;
  --magenta-deep:#96123C;
  --prose-ink:#DCD8CE;
  --caption-ink:#C4C0B5;
  --label:#8C8B82;
  --credit:#77766E;
  --rule:#3E3E45;
  --rule-min:#2E2E34;
  --well:#2A2A2F;

  --body:17px;
  --measure:920px;
  --breakout:1400px;
  --page:1560px;
  --gutter:20px;
  --para:1.1em;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Spectral,Georgia,serif; font-weight:300;
  font-size:var(--body); line-height:1.62;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--acid); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--magenta)}
h1,h2,h3,h4,.disp{font-family:"Big Shoulders Display",Impact,sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.005em; margin:0}
p{margin:0 0 var(--para)}
em{font-style:italic}
.wrap{max-width:var(--page); margin:0 auto; padding:0 var(--gutter)}
.measure{max-width:var(--measure); margin-left:auto; margin-right:auto}
.breakout{max-width:var(--breakout); margin-left:auto; margin-right:auto}
.skip{position:absolute; left:-9999px}
.runlabel{display:none}
.skip:focus{left:8px; top:8px; background:var(--acid); color:var(--ground); padding:8px 12px; z-index:9}

/* ---------- the staff ---------- */
.staff{
  height:32px; width:100%;
  background:
    linear-gradient(var(--rule),var(--rule)) 0 4px/100% 1.4px no-repeat,
    linear-gradient(var(--rule),var(--rule)) 0 12px/100% 1.4px no-repeat,
    linear-gradient(var(--rule),var(--rule)) 0 20px/100% 1.4px no-repeat,
    linear-gradient(var(--rule),var(--rule)) 0 28px/100% 1.4px no-repeat;
}
.endmark{display:flex; align-items:center; gap:0; padding:38px 0 46px; color:var(--label); font-size:.88em}
.endmark::before{content:""; flex:1 1 auto; height:40px; background:
  linear-gradient(var(--rule),var(--rule)) 0 8px/100% 1.4px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 16px/100% 1.4px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 24px/100% 1.4px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 32px/100% 1.4px no-repeat}
.endmark svg{flex:none}

/* ---------- header ---------- */
.topbar{border-bottom:1px solid var(--rule-min)}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px var(--gutter); max-width:var(--page); margin:0 auto}
.topnav{display:flex; align-items:baseline; gap:26px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.topnav::-webkit-scrollbar{display:none}
@media (max-width:1199px){
  .topnav{gap:16px}
  .topnav a{font-size:14px; letter-spacing:.1em}
  .topnav .sub{display:none}
}
@media (max-width:820px){
  .topnav{-webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.15) 100%); mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.15) 100%)}
}
.topnav a{font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:17px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap}
.topnav a[href$="/category/current-records/"],.topnav a[href$="/category/who-counts/"],.topnav a[href$="/category/before-streaming/"]{color:var(--acid)}
.topnav a[href$="/category/riddims-palos/"],.topnav a[href$="/category/spain-americas/"]{color:var(--magenta)}
.topnav a:hover{color:var(--ink)}
.topnav a[aria-current]{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px}
.topnav .sub{font-family:Spectral,serif; font-weight:300; font-size:14px; letter-spacing:.04em; text-transform:none; color:var(--label); margin-left:8px; white-space:nowrap}
.topnav .item{display:flex; align-items:baseline}
.archive-btn{font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:17px; letter-spacing:.16em; text-transform:uppercase; background:var(--acid); color:var(--ground); padding:5px 14px; text-decoration:none; white-space:nowrap}
.archive-btn:hover{background:var(--magenta); color:var(--ground)}
.masthead{padding:24px var(--gutter) 16px; max-width:var(--page); margin:0 auto; position:relative}
.masthead .staff{position:static; width:100%; margin-top:20px}
.mastrow{display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; position:relative}
h1.mast,.mast{font-weight:900; font-size:clamp(56px,11.5vw,184px); line-height:.78}
.wm{color:var(--acid)}
.mast-sm{font-weight:900; font-size:clamp(28px,3.4vw,40px); line-height:.8; text-decoration:none; color:var(--ink)}
.mast-sm:hover{color:var(--acid)}
.mark332{flex:none; margin-bottom:10px}

/* ---------- bands ---------- */
.band{padding:clamp(46px,5vw,86px) 0 0}
.band-in{max-width:var(--page); margin:0 auto; padding:0 var(--gutter)}
.band-head{display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; border-top:1px solid var(--rule); padding-top:26px}
.band-head h2{font-size:clamp(34px,5.2vw,94px); line-height:.86}
.band-head .note{margin-left:auto; font-size:.92em; color:var(--label); padding-bottom:8px}
.num{flex:none; display:block}
.eyebrow{font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:17px; letter-spacing:.2em; text-transform:uppercase; color:var(--magenta)}
.eyebrow.acid{color:var(--acid)}
.blurb{margin:18px 0 0; font-size:1.15em; line-height:1.5; color:var(--prose-ink); max-width:var(--measure)}

/* poster / lead band */
.poster{display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--rule-min); border-bottom:1px solid var(--rule-min); margin-top:22px}
.poster-copy{padding:clamp(30px,3.4vw,60px) var(--gutter)}
.poster h2{font-weight:900; font-size:clamp(40px,8.4vw,150px); line-height:.84; margin:0 0 26px; text-wrap:pretty}
.poster h2 a{color:inherit; text-decoration:none}
.poster h2 a:hover{color:var(--acid)}
.poster-dek{font-size:1.28em; line-height:1.45; color:var(--prose-ink); max-width:920px}
.slab{position:relative; min-height:420px; border-top:1px solid var(--rule-min); display:grid; grid-template-rows:minmax(0,1fr) auto}
.slab img{grid-row:1; width:100%; height:100%; min-height:0; object-fit:cover; object-position:var(--slot-pos,50% 50%)}
.slab-cap{grid-row:2; margin-top:0; background:var(--acid); color:var(--ground); padding:16px 20px}
.slab-cap p{margin:0; font-size:.95em; line-height:1.4; font-weight:400; color:var(--ground)}
.slab-cap .credit{color:#3F4419; margin-top:6px}

/* acid strip */
.strip{background:var(--acid); color:var(--ground); padding:18px 0; margin-top:0}
.strip p{margin:0; font-size:1.18em; line-height:1.4; font-weight:400; max-width:var(--page); padding:0 var(--gutter); margin:0 auto}

/* edit band */
.edit{display:grid; grid-template-columns:minmax(0,1fr); gap:34px; margin-top:36px}
.lead-entry{display:block; text-decoration:none; color:var(--ink)}
.lead-entry .shot{position:relative; aspect-ratio:16/10; background:var(--well); overflow:hidden; border-top:9px solid var(--acid)}
.lead-entry .shot img{width:100%; height:100%; object-fit:cover}
.lead-entry h3{font-size:clamp(30px,3.8vw,56px); line-height:.9; margin:0 0 10px}
.lead-entry:hover h3{color:var(--acid)}
.leadcap{display:grid; grid-template-columns:22px minmax(0,1fr); gap:18px; margin-top:20px}
.barline{background:var(--magenta); width:6px; border:0; margin:0; height:100%; min-height:60px}
.chips{display:flex; flex-direction:column}
.chip-entry{display:grid; grid-template-columns:110px minmax(0,1fr); gap:18px; padding:22px 0; border-top:1px solid var(--rule-min); text-decoration:none; color:var(--ink); align-items:start}
.chip-entry:first-child{border-top:0; padding-top:0}
.chip-entry .shot{aspect-ratio:1/1; background:var(--well); overflow:hidden; border-top:6px solid var(--magenta)}
.chip-entry .shot img{width:100%; height:100%; object-fit:cover}
.chip-entry h3{font-size:clamp(22px,2vw,30px); line-height:.94; margin:0 0 6px}
.chip-entry:hover h3{color:var(--acid)}
.chip-entry p{margin:0; font-size:.95em; line-height:1.5; color:var(--caption-ink)}

/* rhythm row */
.rhythm{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px; margin-top:32px}
.rhythm a{display:block; text-decoration:none; color:var(--ink); min-width:0}
.rhythm .shot{height:clamp(200px,42vw,300px); background:var(--well); overflow:hidden; border-top:7px solid var(--rule)}
.rhythm .beat-acc .shot,.rhythm a.beat-acc .shot{border-top-color:var(--acid)}
.rhythm .beat-off .shot,.rhythm a.beat-off .shot{border-top-color:var(--magenta)}
.rhythm .shot img{width:100%; height:100%; object-fit:cover}
.rhythm h3{font-size:clamp(20px,1.7vw,30px); line-height:.94; margin:14px 0 6px; color:var(--acid); overflow-wrap:break-word}
.rhythm a:hover h3{color:var(--magenta)}
.rhythm p{margin:0 0 14px; font-size:.9em; line-height:1.45; color:var(--caption-ink)}

/* magenta figures band */
.mag{background:var(--magenta-deep); color:var(--ink); padding:clamp(44px,4.8vw,80px) 0}
.mag a{color:var(--ink)}
.mag h2{font-weight:900; font-size:clamp(34px,5.8vw,112px); line-height:.84; margin:0 0 22px; text-shadow:.05em .055em 0 var(--ground)}
.mag .lede{font-size:1.12em; line-height:1.5; max-width:880px; font-weight:400; margin:0 0 34px}
.mag-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:34px}
.tbl{width:100%; border-collapse:collapse; font-size:1em}
.tbl-scroll{overflow-x:auto}
.tbl thead th{text-align:left; font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:15px; letter-spacing:.14em; text-transform:uppercase; padding:0 14px 10px 0; border-bottom:2px solid currentColor; width:auto; border-left:0; vertical-align:bottom}
.tbl thead th:first-child{padding-left:18px}
.tbl td{padding:16px 18px 18px 0; border-bottom:1px solid rgba(239,235,226,.28); vertical-align:top; font-weight:400}
.tbl th[scope="row"]{width:190px; vertical-align:top; text-align:left; font-family:"Big Shoulders Display",sans-serif; font-weight:800; text-transform:uppercase; font-size:1.5em; line-height:.92; letter-spacing:.01em; padding:16px 24px 18px 14px; border-left:4px solid var(--acid); border-bottom:1px solid rgba(239,235,226,.28)}
.tbl td a{display:block; font-family:"Big Shoulders Display",sans-serif; font-weight:700; text-transform:uppercase; font-size:1.2em; line-height:.98; letter-spacing:.02em; text-decoration:none; margin-bottom:8px}
.tbl td a:hover{color:var(--acid)}
.tbl .wp{display:block; font-size:.88em; line-height:1.5; color:#F0C9D4; max-width:62ch}
.mag .shot{display:block}
figure{margin:0}
.mag figcaption{margin-top:12px}
.mag figcaption p{color:var(--ink)}
.mag figure img{border-top:8px solid var(--acid)}
.mag .credit{color:#F0B9C8}
.mag .caprow{display:block}
.mag .caprow .credit{text-align:left; max-width:none; margin-top:4px}

/* two-up ground band */
.twoup{display:grid; grid-template-columns:minmax(0,1fr); gap:34px; margin-top:34px}
.twoup a{text-decoration:none; color:var(--ink); display:block}
.twoup .shot{aspect-ratio:16/10; background:var(--well); overflow:hidden; border-top:7px solid var(--acid)}
.twoup .shot img{width:100%; height:100%; object-fit:cover}
.twoup h3{font-size:clamp(26px,2.6vw,42px); line-height:.92; margin:16px 0 8px}
.twoup a:hover h3{color:var(--acid)}
.twoup p{margin:0; font-size:.98em; line-height:1.5; color:var(--caption-ink)}

/* quiet band */
.quiet{padding:clamp(46px,5vw,90px) 0 0}
.quiet ol{list-style:none; margin:30px 0 0; padding:0; max-width:1200px}
.quiet li{padding:16px 0; border-top:1px solid var(--rule-min)}
.quiet li:last-child{border-bottom:1px solid var(--rule-min)}
.quiet a{font-family:"Big Shoulders Display",sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(22px,2.2vw,38px); line-height:.96; color:var(--ink); text-decoration:none}
.quiet a:hover{color:var(--acid)}

/* ---------- supporters ---------- */
.supporters{margin-top:clamp(50px,5vw,90px); border-top:1px solid var(--rule)}
.supporters .band-in{padding-top:26px; padding-bottom:10px}
.sup-head{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.sup-head h2{font-size:clamp(24px,2.4vw,40px); line-height:.9}
.sup-head p{margin:0; color:var(--label); font-size:.92em}
.sup-list{margin:24px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:0}
.sup-list li{border:1px solid var(--rule-min); margin:-1px 0 0 -1px; background:var(--ground)}
.sponsor{display:flex; align-items:center; justify-content:center; width:100%; height:78px; padding:14px 18px; text-decoration:none}
.sponsor img{max-height:40px; max-width:100%; width:auto; height:auto; object-fit:contain}
.sponsor:hover{background:#17171B}

/* ---------- footer ---------- */
footer.site{margin-top:clamp(44px,4vw,80px); border-top:1px solid var(--rule); padding:34px 0 46px}
.foot-in{max-width:var(--page); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap}
.foot-in .mast{font-size:clamp(40px,6vw,104px)}
.footnav{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:flex-end}
.footnav a{font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); text-decoration:none}
.footnav a:hover{color:var(--acid)}
.foot-line{margin:24px auto 0; max-width:var(--page); padding:0 var(--gutter); color:var(--label); font-size:.95em}

/* ---------- figures (three treatments) ---------- */
.shot{display:block}
figure{margin:0}
figcaption{margin-top:12px}
figcaption p{margin:0; font-size:.95em; line-height:1.45; color:var(--caption-ink)}
.credit{display:block; font-size:.86em; line-height:1.4; color:var(--credit); margin-top:4px}
.caprow{display:block}

/* slab: full-bleed, acid strip caption */
.fig-slab{margin:0}
.fig-slab .shot{position:relative; width:100%; aspect-ratio:16/9; background:var(--well); overflow:hidden}
.fig-slab .shot img{width:100%; height:100%; object-fit:cover}
.fig-slab figcaption{margin-top:0; background:var(--acid); color:var(--ground); padding:14px var(--gutter)}
.fig-slab figcaption .inner{max-width:var(--page); margin:0 auto; display:block}
.fig-slab figcaption p{color:var(--ground); font-weight:400; font-size:1em}
.fig-slab figcaption .credit{color:#3F4419}

/* bracketed: breakout width, magenta bar line, caption beside */
.fig-brk{display:grid; grid-template-columns:8px minmax(0,1fr); gap:16px; align-items:start}
.fig-brk .rulebar{background:var(--magenta); width:8px; height:100%; min-height:120px}
.fig-brk .shot{background:var(--well); overflow:hidden}
.fig-brk .shot img{width:100%; height:auto}
.fig-brk figcaption{max-width:46ch}

/* chip: inset, prose measure or narrower */
.fig-chip{max-width:380px}
.fig-chip .shot{aspect-ratio:1/1; background:var(--well); overflow:hidden}
.fig-chip .shot img{width:100%; height:100%; object-fit:cover}
.fig-chip figcaption{max-width:380px}

/* ---------- article ---------- */
.col{max-width:var(--measure); margin:0 auto}
.col::after{content:""; display:block; clear:both}
.fig-float{margin:0 0 22px}
@media (min-width:1000px){ .fig-float{float:right; width:300px; margin:8px 0 20px 34px} .fig-float .shot{aspect-ratio:1/1; background:var(--well); overflow:hidden} .fig-float .shot img{width:100%;height:100%;object-fit:cover} }
.fig-float .shot{background:var(--well); overflow:hidden}
.fig-float img{width:100%; height:auto; display:block}
.fig-float figcaption{border-top:1px solid var(--rule-min); padding-top:8px}

.art-head{padding-top:clamp(30px,3.6vw,56px)}
.art-kicker{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.art-kicker a{text-decoration:none}
h1.art-title{font-weight:900; font-size:clamp(38px,8vw,140px); line-height:.82; margin:16px 0 22px; text-wrap:pretty}
.art-dek{font-size:1.3em; line-height:1.42; color:var(--prose-ink); max-width:var(--breakout)}
.art-body{padding-top:clamp(34px,3.4vw,58px)}
.art-body h2{font-size:clamp(28px,3.4vw,58px); line-height:.9; margin:clamp(28px,3vw,46px) 0 18px}
.art-body p{max-width:var(--measure); margin-left:auto; margin-right:auto}
.art-body>h2{max-width:var(--measure); margin-left:auto; margin-right:auto}
.ins{margin:clamp(32px,3.6vw,60px) auto}
.ins.stack-clear{clear:both}
.notes{border-top:2px solid var(--magenta); padding-top:20px}
.notes h3{font-size:clamp(22px,2.2vw,36px); line-height:.94; margin:0 0 4px}
.notes .tag{font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--magenta); display:block; margin-bottom:10px}
.notes ul{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0}
.notes li{padding:13px 0; border-top:1px solid var(--rule-min); font-size:.98em; line-height:1.5; color:var(--prose-ink)}
.notes li:last-child{border-bottom:1px solid var(--rule-min)}
.pull{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:26px 0}
.pull p{font-family:"Big Shoulders Display",sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(26px,3vw,52px); line-height:.92; color:var(--acid); margin:0; max-width:none}
.related{margin-top:clamp(40px,4vw,70px); border-top:1px solid var(--rule); padding-top:24px}
.related h2{font-size:clamp(22px,2.2vw,36px); line-height:.94; margin:0 0 16px}
ul.related-links{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2px}
ul.related-links li{min-width:0}
ul.related-links a{display:grid; grid-template-columns:88px minmax(0,1fr); gap:16px; align-items:center; padding:14px 0; border-top:1px solid var(--rule-min); text-decoration:none; color:var(--ink)}
ul.related-links .shot{aspect-ratio:1/1; background:var(--well); overflow:hidden}
ul.related-links .shot img{width:100%; height:100%; object-fit:cover}
ul.related-links span.t{font-family:"Big Shoulders Display",sans-serif; font-weight:800; text-transform:uppercase; font-size:1.35em; line-height:.98}
ul.related-links a:hover span.t{color:var(--acid)}

/* ---------- category / archive ---------- */
.cat-open{display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-bottom:1px solid var(--rule-min)}
.cat-copy{padding:clamp(30px,3.4vw,58px) var(--gutter)}
.cat-copy h1{font-weight:900; font-size:clamp(38px,7vw,116px); line-height:.84; margin:14px 0 18px; text-wrap:pretty}
.cat-copy .blurb{font-size:1.2em}
.cat-open .slab-cap p{font-size:.88em}
.cat-open .slab-cap .credit{font-size:.8em}
.cat-meta{margin:20px 0 0; color:var(--label); font-size:.95em}
.cat-list{list-style:none; margin:0; padding:0}
.cat-lead{padding:clamp(34px,3.6vw,56px) 0; border-bottom:1px solid var(--rule)}
.cat-lead a{display:grid; grid-template-columns:minmax(0,1fr); gap:26px; text-decoration:none; color:var(--ink); align-items:center}
.cat-lead .shot{aspect-ratio:16/10; background:var(--well); overflow:hidden}
.cat-lead .shot img{width:100%; height:100%; object-fit:cover}
.cat-lead h2{font-size:clamp(30px,4.4vw,76px); line-height:.88; margin:0 0 14px}
.cat-lead a:hover h2{color:var(--acid)}
.cat-lead p{margin:0; font-size:1.05em; line-height:1.5; color:var(--prose-ink); max-width:70ch}
.cards{display:grid; grid-template-columns:minmax(0,1fr); gap:36px; padding:36px 0 0; list-style:none; margin:0}
.cards li{min-width:0; display:flex}
.cards a{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); border-top:1px solid var(--rule-min); padding-top:18px; width:100%}
.cards .shot{aspect-ratio:16/10; background:var(--well); overflow:hidden; margin-bottom:16px}
.cards .shot img{width:100%; height:100%; object-fit:cover}
.cards h3{font-size:clamp(24px,2.2vw,34px); line-height:.94; margin:0 0 10px; min-height:1.88em}
.cards a:hover h3{color:var(--acid)}
.cards p{margin:0 0 14px; font-size:.96em; line-height:1.5; color:var(--caption-ink)}
.cards .foot{margin-top:auto; font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--label)}
.arch-sec{padding:clamp(36px,3.6vw,60px) 0 0}
.arch-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:26px; margin-top:24px; list-style:none; padding:0}
.arch-grid li{min-width:0}
.arch-grid a{display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; text-decoration:none; color:var(--ink); align-items:start}
.arch-grid .shot{aspect-ratio:1/1; background:var(--well); overflow:hidden}
.arch-grid .shot img{width:100%; height:100%; object-fit:cover}
.arch-grid h3{font-size:1.28em; line-height:.98; margin:0}
.arch-grid a:hover h3{color:var(--acid)}

/* ---------- flat pages ---------- */
.page-body{padding-top:clamp(30px,3vw,50px)}
.page-body h1{font-weight:900; font-size:clamp(38px,7vw,116px); line-height:.84; margin:0 0 22px}
.page-body h2{font-size:clamp(26px,2.6vw,44px); line-height:.92; margin:clamp(28px,3vw,44px) 0 14px}
.page-body p{max-width:var(--measure)}
.page-body ul{max-width:var(--measure); color:var(--prose-ink)}

/* ---------- responsive: the page grows, not the margin ---------- */
@media (min-width:700px){
  :root{--gutter:32px}
  .poster{grid-template-columns:minmax(0,1fr) 44%}
  .slab{border-top:0; border-left:1px solid var(--rule-min)}
  .rhythm{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mag-grid{grid-template-columns:minmax(0,1fr) 34%}
  .twoup{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  ul.related-links{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 34px}
  .cat-open{grid-template-columns:minmax(0,1fr) 40%}
  .cat-lead a{grid-template-columns:56% minmax(0,1fr); gap:38px}
  .notes ul{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 34px}
  .caprow{display:flex; align-items:baseline; gap:20px; justify-content:space-between}
  .caprow .credit{margin-top:0; text-align:right; flex:none; max-width:40%}
}
@media (min-width:1000px){
  :root{--gutter:44px}
  .edit{grid-template-columns:58% minmax(0,1fr); gap:48px}
  .rhythm{grid-template-columns:minmax(0,1.55fr) minmax(0,1.55fr) minmax(0,1.55fr) minmax(0,1.05fr) minmax(0,1.05fr) minmax(0,1.05fr) minmax(0,.8fr) minmax(0,.8fr)}
  .rhythm .shot{height:clamp(300px,30vw,460px)}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .arch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fig-brk{grid-template-columns:8px minmax(0,1fr) 34%; gap:24px}
  .fig-brk figcaption{align-self:end; margin-top:0}
}
@media (min-width:1200px){
  :root{--body:19px; --gutter:56px}
  .slab{min-height:640px}
}
@media (min-width:1600px){
  :root{--body:21px; --page:1800px; --measure:960px; --breakout:1500px}
  .arch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .art-body{position:relative}
  .art-body::before{content:""; position:absolute; left:0; top:0; bottom:0; width:1.4px; background:var(--rule)}
  .runlabel{display:block; position:absolute; left:0; transform:rotate(180deg); writing-mode:vertical-rl; font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:16px; letter-spacing:.2em; text-transform:uppercase; color:var(--label); padding-left:10px}
  .fig-brk{grid-template-columns:8px minmax(0,1fr) 30%}
  .slab{min-height:760px}
}
@media (min-width:2000px){
  :root{--body:23px; --page:2200px; --measure:1080px; --breakout:1760px}
  .rhythm{gap:30px 20px}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px}
  .arch-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .slab{min-height:900px}
  .fig-chip{max-width:460px}
}
@media (min-width:2400px){
  :root{--page:2560px; --measure:1160px; --breakout:2000px}
  .arch-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media print{ body{background:#fff; color:#111} }

/* 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}
.sup-head{flex-wrap:wrap!important}
.sup-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!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-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

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

/* 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 .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor.sponsor img{box-sizing:border-box!important;height:40px!important;display:block!important;width:100%!important;padding:8px 12px!important}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.shot > img,
  a.beat-acc > span.shot > img,
  a.beat-off > span.shot > img,
  a.chip-entry > span.shot > img,
  a.lead-entry > span.shot > img,
  div > figure > img,
  div.poster > figure.slab > img,
  figure.fig-brk > span.shot > img,
  figure.fig-float > span.shot > img,
  figure.fig-slab > span.shot > img,
  section.cat-open > figure.slab > img){height:auto}
/* op-img-dims:end */