/* Series Media — seriesmedia.org · Tempo Spine */
:root{
  --paper:#141416; --paper-2:#191A1D; --panel:#0E0E10; --panel-2:#101013;
  --ink:#EDEBE6; --ink-2:#CFCDC7; --dim:#8E8E96; --dim-2:#63636B;
  --rule:#28282E; --rule-2:#1D1D22;
  --accent:#C9F04B; --accent-ink:#141416;
  --s1:#C9F04B; --s2:#DCE64B; --s3:#E8CF4B; --s4:#E8AE4B; --s5:#E4903C;
  --display:"Bodoni Moda",Georgia,serif;
  --ui:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --stand:"Instrument Serif",Georgia,serif;
  --measure:68ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--ui);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--ink)}
p{margin:0 0 1.15em}
::selection{background:var(--accent);color:var(--accent-ink)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:10px 14px;font-family:var(--mono);font-size:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:1460px;margin:0 auto;padding-inline:clamp(18px,4vw,56px)}
.measure{max-width:var(--measure);margin-inline:auto}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.kicker--accent{color:var(--accent)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* masthead */
.masthead{border-bottom:1px solid var(--rule)}
.masthead-inner{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:flex-end;justify-content:space-between;padding:26px 0 18px}
.wordmark{display:block;font-family:var(--ui);font-weight:800;font-size:clamp(20px,2.4vw,26px);letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}
.masthead-sub{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);margin-top:9px}
.nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.nav a{color:var(--dim);display:inline-block;padding:6px 0}
.nav a:hover,.nav a[aria-current]{color:var(--accent)}

/* homepage lead */
.lead-story{position:relative;margin-top:22px;background:var(--panel)}
.lead-media{position:relative;aspect-ratio:4/5;overflow:hidden}
@media(min-width:600px){.lead-media{aspect-ratio:16/9}}
@media(min-width:1100px){.lead-media{aspect-ratio:21/9}}
.lead-media img{width:100%;height:100%;object-fit:cover;display:block}
.lead-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.97) 8%,rgba(10,10,11,.78) 42%,rgba(10,10,11,.34) 72%,rgba(10,10,11,.5));pointer-events:none}
.lead-rules{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(233,235,230,.07) 0 1px,transparent 1px 44px)}
.lead-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,40px)}
.lead-head{display:flex;gap:clamp(16px,2vw,30px);align-items:flex-start}
.lead-bpm{font-family:var(--mono);font-weight:600;font-size:clamp(30px,4.4vw,54px);line-height:.9;color:var(--accent);letter-spacing:-.03em}
.lead-bpm small{display:block;font-size:9px;letter-spacing:.2em;color:var(--dim);margin-top:8px}
.lead-title{font-family:var(--ui);font-weight:800;font-size:clamp(28px,4.4vw,58px);line-height:1.02;letter-spacing:-.03em;text-wrap:pretty;max-width:19ch}
.lead-stand{font-family:var(--stand);font-size:clamp(17px,1.6vw,23px);line-height:1.4;color:var(--ink-2);margin:14px 0 0;max-width:56ch;text-wrap:pretty}
.lead-meta{margin-top:14px}

/* main grid: feed + partner rail */
.feedgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;padding:44px 0 10px}
@media(min-width:1080px){.feedgrid{grid-template-columns:minmax(0,1fr) 320px;gap:56px}}

.band-head{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.band-title{font-family:var(--ui);font-weight:800;letter-spacing:-.025em;font-size:clamp(24px,3vw,34px);letter-spacing:-.01em}
.band-note{font-family:var(--ui);font-size:15px;color:var(--dim);max-width:60ch}

/* the tape column */
.tape{border-bottom:1px solid var(--rule)}
.lane{display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px 18px;padding:20px 0;border-bottom:1px solid var(--rule-2);align-items:start}
.lane:last-child{border-bottom:0}
.lane:hover{background:var(--paper-2)}
.lane-bpm{font-family:var(--mono);font-weight:600;font-size:clamp(24px,2.4vw,30px);line-height:1;color:var(--accent);letter-spacing:-.02em}
.lane-bpm small{display:block;font-size:9px;letter-spacing:.18em;color:var(--dim-2);margin-top:7px;text-transform:uppercase}
.lane-thumb{display:none}
.lane-thumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.lane-title{font-family:var(--ui);font-weight:700;font-size:clamp(19px,1.9vw,25px);line-height:1.18;letter-spacing:-.02em;text-wrap:pretty}
.lane-stand{font-family:var(--stand);font-size:17px;line-height:1.38;color:var(--dim);margin:7px 0 0;text-wrap:pretty}
.lane-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px}
.lane-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.lane-tag a{color:var(--dim-2)}
@media(min-width:760px){
  .lane{grid-template-columns:84px 176px minmax(0,1fr);gap:26px}
  .lane-thumb{display:block}
}

/* section index strips */
.strips{margin-top:52px}
.strip{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 26px;padding:16px 0 20px;border-top:3px solid var(--rule)}
.strip:hover{background:var(--paper-2)}
.strip-no{font-family:var(--mono);font-size:11px;letter-spacing:.2em}
.strip-title{font-family:var(--ui);font-weight:800;letter-spacing:-.025em;font-size:clamp(22px,2.6vw,30px);line-height:1}
.strip-blurb{font-family:var(--ui);font-size:15px;color:var(--dim);max-width:70ch}
.strip-count{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
@media(min-width:760px){.strip{grid-template-columns:80px 260px minmax(0,1fr) 90px;align-items:baseline}}
.strip--1{border-top-color:var(--s1)}.strip--1 .strip-no{color:var(--s1)}
.strip--2{border-top-color:var(--s2)}.strip--2 .strip-no{color:var(--s2)}
.strip--3{border-top-color:var(--s3)}.strip--3 .strip-no{color:var(--s3)}
.strip--4{border-top-color:var(--s4)}.strip--4 .strip-no{color:var(--s4)}
.strip--5{border-top-color:var(--s5)}.strip--5 .strip-no{color:var(--s5)}

/* partners rail */
.rail{align-self:start;max-width:430px}
@media(min-width:1080px){.rail{position:sticky;top:20px;max-width:none}}
.rail-head{border-top:1px solid var(--rule);padding-top:14px}
.rail-title{font-family:var(--ui);font-weight:800;letter-spacing:-.02em;font-size:22px;line-height:1.1;margin-bottom:8px}
.rail-note{font-size:14px;color:var(--dim);margin:0}
.partners{margin-top:20px}
.partners-group{margin-bottom:22px}
.partners-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);padding-bottom:9px;border-bottom:1px solid var(--rule-2);margin-bottom:12px}
.partners-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.sponsor{display:block;background:var(--panel);border:1px solid var(--rule);padding:14px;text-decoration:none}
.sponsor:hover{border-color:var(--accent);background:var(--panel-2)}
.sponsor-box{display:flex;align-items:center;justify-content:center;height:52px;padding:0 6px}
.sponsor-box img{max-height:34px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
.sponsor--wide .sponsor-box{height:88px}
.sponsor--wide .sponsor-box img{max-height:60px}
.sponsor-name{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:12px;padding-top:11px;border-top:1px solid var(--rule-2)}
.sponsor-blurb{display:block;font-size:14px;line-height:1.45;color:var(--dim);margin-top:7px}

/* map */
.map-figure{margin:0}
.map-frame{border:1px solid var(--rule);background:var(--panel);padding:10px}
.map-frame img,.map-frame svg{display:block;width:100%;height:auto}
.map-slot{min-height:280px}
.map-figure figcaption,.article-figure figcaption{font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.04em;color:var(--dim);margin-top:10px}
.pin{cursor:pointer;transition:opacity .18s ease}
.pin:focus{outline:none}
.pin .pin-dot,.pin .pin-ring,.pin .pin-label{transition:all .18s ease}
.map-frame.is-focused .pin{opacity:.32}
.map-frame.is-focused .pin.is-on{opacity:1}
.pin:hover .pin-ring,.pin:focus .pin-ring,.pin.is-on .pin-ring{r:20;stroke-opacity:.9}
.pin:hover .pin-label,.pin:focus .pin-label,.pin.is-on .pin-label{fill:#C9F04B}
.map-readout{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin-top:12px;padding-top:11px;border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.map-readout-city{color:var(--accent)}
.map-readout-ll{color:var(--dim)}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}

/* footer */
.foot{border-top:1px solid var(--rule);margin-top:56px;padding:38px 0 54px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
@media(min-width:820px){.foot-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:760px){.nav{gap:2px 20px}.nav a{padding:9px 0}.foot ul{line-height:2.3}.masthead-inner{padding:22px 0 12px}}
.foot h3{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);font-weight:400;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:2}
.foot ul a{display:inline-block;padding:5px 0}
.foot-about{font-family:var(--stand);font-size:20px;line-height:1.4;color:var(--ink-2);max-width:44ch}
.disclaimer{font-size:14px;color:var(--dim-2);max-width:70ch;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--rule-2)}
.foot-mark{font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:#3A3A42;margin-top:22px}

/* article */
.article{padding:34px 0 0}
.art-head{border-bottom:1px solid var(--rule);padding-bottom:26px}
.art-bpm{display:flex;align-items:baseline;gap:14px;font-family:var(--mono);font-weight:600;font-size:34px;color:var(--accent);letter-spacing:-.02em}
.art-bpm span{font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.art-title{font-family:var(--ui);font-weight:800;font-size:clamp(30px,5vw,60px);line-height:1.02;letter-spacing:-.032em;margin:16px 0 0;max-width:20ch;text-wrap:pretty}
.art-lead,.lead{font-family:var(--stand);font-size:clamp(20px,2.1vw,26px);line-height:1.38;color:var(--ink);margin:18px 0 0;max-width:44ch;text-wrap:pretty}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.art-hero{margin:0 0 34px}
.art-hero img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
.art-body{padding:32px 0 10px;font-size:19px;line-height:1.72;color:var(--ink-2)}
.art-body p{margin:0 0 1.1em;text-wrap:pretty}
.art-body h2{font-family:var(--ui);font-weight:700;font-size:clamp(23px,2.6vw,30px);line-height:1.18;letter-spacing:-.022em;margin:2.1em 0 .6em}
.art-body h3{font-family:var(--ui);font-weight:600;font-size:20px;margin:1.8em 0 .5em}
.art-body a{color:var(--ink);border-bottom:1px solid var(--accent)}
.art-body a:hover{color:var(--accent)}
.art-foot{border-top:1px solid var(--rule);margin-top:40px;padding-top:26px}

/* interruption panels */
.tape-stop{background:var(--panel);border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);margin:44px 0;padding:clamp(22px,3vw,34px)}
.tape-stop-head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-bottom:20px}
.tape-stop-head h2{font-family:var(--ui);font-weight:600;font-size:19px;letter-spacing:.01em;margin:0}
.tape-stop-tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.ledger{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ledger li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 22px;padding:12px 0;border-top:1px solid var(--rule-2);font-size:16px;line-height:1.5}
.ledger li:first-child{border-top:0;padding-top:0}
@media(min-width:700px){.ledger li{grid-template-columns:minmax(140px,var(--lg-col,240px)) minmax(0,1fr)}}
.ledger li.solo,.timeline li.solo{grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.ledger li.solo,.timeline li.solo{grid-template-columns:minmax(0,1fr)}}
.ledger .term{font-family:var(--ui);font-weight:600;color:var(--ink)}
.ledger .term-def{color:var(--dim)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 22px;padding:14px 0 14px 22px;border-left:1px solid var(--rule);position:relative;font-size:16px;line-height:1.5}
.timeline li::before{content:"";position:absolute;left:-4px;top:20px;width:7px;height:7px;background:var(--accent)}
@media(min-width:700px){.timeline li{grid-template-columns:minmax(150px,230px) minmax(0,1fr)}}
.t-when{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.t-what{color:var(--ink-2)}

/* text components */
.pullquote{margin:2em 0;padding:0 0 0 22px;border-left:2px solid var(--accent)}
.pullquote p{font-family:var(--stand);font-weight:400;font-style:italic;font-size:clamp(22px,2.6vw,30px);line-height:1.25;color:var(--ink);margin:0;text-wrap:pretty}
.blockquote{margin:2em 0;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.blockquote p{font-family:var(--stand);font-size:22px;line-height:1.42;color:var(--ink);margin:0 0 .5em}
.blockquote cite{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-style:normal}
.callout{background:var(--panel);border-left:3px solid var(--accent);padding:20px 22px;margin:2em 0}
.callout p{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.note{font-size:15px;line-height:1.6;color:var(--dim);border-top:1px solid var(--rule-2);padding-top:12px}
.entity-ref{font-family:var(--mono);font-size:.92em;letter-spacing:.04em;color:var(--accent);border-bottom:1px solid var(--rule)}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:2em 0;font-size:16px;display:block;overflow-x:auto}
.versus th,.versus td,.datatable th,.datatable td{padding:12px 14px;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top;min-width:120px}
.versus th,.datatable th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:400;border-bottom:1px solid var(--rule)}
.versus td:first-child,.datatable td:first-child{color:var(--ink);font-weight:600;min-width:180px}
.datatable td.num{font-family:var(--mono);color:var(--accent)}

/* stats */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule-2);margin:2em 0;border:1px solid var(--rule-2)}
.statblock{background:var(--panel);padding:20px 18px}
.stat-num{display:block;font-family:var(--mono);font-weight:600;font-size:32px;line-height:1;color:var(--accent);letter-spacing:-.02em}
.stat-label{display:block;font-size:14px;line-height:1.4;color:var(--dim);margin-top:9px}

/* charts */
.chart{margin:2em 0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart figcaption{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--dim);margin-top:12px}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar-dim{fill:#3A4A22}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--accent);stroke-width:2}
.chart .c-label{font-family:var(--mono);font-size:11px;fill:var(--dim)}
.chart .c-val{font-family:var(--mono);font-size:11px;fill:var(--ink)}

/* figures + gallery */
.article-figure{margin:2.4em 0}
.article-figure img{display:block;width:100%}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:2.4em 0}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--dim);margin-top:8px}

/* cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:2em 0}
.profile-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule);padding:18px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-family:var(--ui);font-weight:700;letter-spacing:-.02em;font-size:21px;line-height:1.1}
.profile-card .p-role{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:8px 0 10px}
.profile-card p{font-size:15px;line-height:1.55;color:var(--dim)}
.profile-card .p-links{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:12px}
.profile-card .p-attr{font-family:var(--mono);font-size:10px;color:var(--dim-2);letter-spacing:.1em}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:2em 0}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--rule);padding:16px}
.org-card:hover{border-color:var(--accent)}
.org-logo{max-height:26px;max-width:100%;width:auto;object-fit:contain;align-self:flex-start;margin-bottom:6px}
.org-name{font-family:var(--ui);font-weight:600;color:var(--ink)}
.org-host{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* lists of links */
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:1.6em 0}
.further-grid a{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--rule);padding:18px;font-family:var(--ui);font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1.2}
.further-grid a:hover{border-color:var(--accent)}
.further-grid a::before{content:attr(data-bpm);font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--accent)}
.related-links{list-style:none;margin:0;padding:0}
.related-links li{border-top:1px solid var(--rule-2)}
.related-links a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;font-family:var(--ui);font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1.25}
.related-links .r-bpm{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--accent)}
.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cat-list li{border-bottom:1px solid var(--rule-2)}
.cat-list a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 20px;padding:18px 0;align-items:baseline}
.cat-list a:hover{background:var(--paper-2)}
.cat-list .c-bpm{font-family:var(--mono);font-weight:600;font-size:19px;color:var(--accent)}
.cat-list .c-title{font-family:var(--ui);font-weight:700;font-size:clamp(18px,1.9vw,23px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.cat-list .c-dek{font-family:var(--stand);font-size:16px;line-height:1.4;color:var(--dim);margin-top:5px;grid-column:1/-1}
@media(min-width:700px){.cat-list .c-dek{grid-column:2}}

/* expander */
.expander{margin-top:14px}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked ~ .more{display:block}
.expander label{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--rule);padding:9px 14px;cursor:pointer;margin-top:12px}
.expander label:hover{border-color:var(--accent)}
.expander input:checked ~ label .lbl-more{display:none}
.lbl-less{display:none}
.expander input:checked ~ label .lbl-less{display:inline}

/* page headers */
.page-head{padding:40px 0 26px;border-bottom:1px solid var(--rule)}
.page-title{font-family:var(--ui);font-weight:800;font-size:clamp(32px,5.6vw,66px);line-height:1;letter-spacing:-.035em}
.page-intro{font-family:var(--stand);font-size:clamp(19px,2vw,24px);line-height:1.4;color:var(--ink-2);margin:16px 0 0;max-width:52ch;text-wrap:pretty}
.section-body{padding:34px 0 0}
.section-body p{max-width:var(--measure)}

/* 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. */
.partners-grid .sponsor.sponsor img{height:38px!important}

/* op-recentre-plate: the money mark sat off-centre in its own plate (measured 176px of skew:
   1px on one side, 177px on the other, with a 148px mark in a 354px plate).
   ⚠️ THE CAUSE IS OURS, NOT DESIGN'S: sp-mark-frame forces display:block on the plate, which
   replaces the flex centring Design put there — and with the mark capped by a max-width and no
   auto margins it drifts to one side. Rather than fight the block display, the mark itself is
   centred with auto inline margins, which works whatever the plate's display ends up being. */
div.sponsor{text-align:center}
div.sponsor > img{display:block!important;margin-inline:auto!important}


/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.masthead-inner{padding-inline:clamp(18px,4vw,56px)}
}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 822px at 390, 8% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 822 -> 582px (29% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:min(2.08vw,30px)!important;row-gap:8px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1279px at 390, 13% of the whole page. Two columns bring it to
   852px (33% shorter). Checked before writing: no new overflow, smallest mark still
   103px wide, longest blurb 3 lines, tile heights 84-194px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. 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 (.partners-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){
  .partners-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .partners-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .partners-grid > * *{min-width:0!important;max-width:100%}
    .partners-grid img,.partners-grid svg{max-width:100%;height:auto}
  .partners-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 740px (90 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .measure) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main#main div.art-body.measure{--measure:min(77.472ch, 100%)!important}
}
@media (min-width:1600px){
  main#main div.art-body.measure{--measure:min(clamp(77.472ch, 58.542vw, calc(77.472ch * 1.2)), 100%)!important}
  main#main div.art-body.measure > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

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

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

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; font-weight: 700; color: var(--ink);}
.foot h2:where(.rt-h3){font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim-2); font-weight: 400; margin-bottom: 12px;}
.art-body h2:where(.rt-h3){font-family: var(--ui); font-weight: 600; font-size: 20px; margin: 1.8em 0px 0.5em;}
h2.rt-h3.rt-h3{height:34.3906px;line-height:34.4px;letter-spacing:normal}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:799px){
  div.art-body.measure{padding-left:max(clamp(18px,4vw,56px), 18px);padding-right:max(clamp(18px,4vw,56px), 18px)}
}
@media (min-width:681px){
  div.art-head{padding-left:max(clamp(18px,4vw,56px), 18px);padding-right:max(clamp(18px,4vw,56px), 18px)}
  div.art-meta{padding-left:max(clamp(18px,4vw,56px), 18px);padding-right:max(clamp(18px,4vw,56px), 18px)}
  div.kicker.kicker--accent{padding-left:max(clamp(18px,4vw,56px), 18px);padding-right:max(clamp(18px,4vw,56px), 18px)}
  figure.art-hero.article-figure > figcaption, figure.art-hero.article-figure > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:max(clamp(18px,4vw,56px), 18px);padding-right:max(clamp(18px,4vw,56px), 18px)}
  figure.chart.bar > figcaption, figure.chart.bar > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:max(clamp(18px,4vw,56px), 18px);padding-right:max(clamp(18px,4vw,56px), 18px)}
  div.art-head div.art-meta{padding-left:0;padding-right:0}
  div.art-head div.kicker.kicker--accent{padding-left:0;padding-right:0}
}
@media (min-width:901px){
  div.wrap.masthead-inner{padding-left:max(0px, calc(max(clamp(18px,4vw,56px), 18px) - max(0px, (100vw - 1460px) / 2)));padding-right:max(0px, calc(max(clamp(18px,4vw,56px), 18px) - max(0px, (100vw - 1460px) / 2)))}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.lane > div.lane-thumb > img,
  article.lead-story > div.lead-media > img,
  main.article.wrap > figure.art-hero.article-figure > img,
  main.article.wrap > figure.article-figure > img){height:auto}
/* op-img-dims:end */