/* mushroom-online.com — Frequency
   filed by register, not by menu */
:root{
  --paper:#0E0F14; --panel:#12141D; --panel2:#171A25; --ink:#E6E3EE; --ink-2:#A6ABBC; --ink-3:#767C90;
  --line:rgba(230,227,238,.13); --line-2:rgba(230,227,238,.07);
  --acid:#C6FF3A; --uv:#8B5CF6; --uv-soft:#B8A4FF;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --body:Archivo,system-ui,-apple-system,sans-serif;
  --display:'Instrument Serif',Georgia,serif;
  --measure:68ch; --shell:1440px; --gut:clamp(18px,4vw,52px);
  --fs-body:1.075rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--fs-body);line-height:1.62;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--acid);text-decoration:none}
a:hover{color:#E4FF9B}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.015em;text-wrap:balance}
h1,h2,h3{font-family:var(--display)}
p{margin:0 0 1.15em;text-wrap:pretty}
figure{margin:0}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.kicker{font:500 .66rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.kicker.acid{color:var(--acid)} .kicker.uv{color:var(--uv-soft)}
.rule{height:1px;background:var(--line-2);border:0;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:60;background:rgba(10,11,16,.93);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.masthead .bar{display:flex;align-items:center;gap:clamp(14px,3vw,40px);padding:14px 0;max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.wordmark{display:flex;align-items:baseline;gap:7px;flex:none}
.wordmark .dot{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 13px var(--acid);align-self:center}
.wordmark .wm{font-family:var(--display);font-size:1.62rem;line-height:1;color:var(--acid)}
.wordmark .tld{font:500 .68rem/1 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.nav{display:flex;gap:clamp(10px,2vw,26px);flex-wrap:wrap;margin-left:auto;align-items:center}
.nav a{white-space:nowrap;font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--acid)}
.nav a .hz{color:var(--ink-3);margin-left:6px;font-size:.62rem}
.nav a:hover .hz{color:var(--uv-soft)}

/* ---------- spectrum rail (signature) ---------- */
.with-rail{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0}
.rail{position:sticky;top:64px;align-self:start;height:calc(100vh - 64px);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 0 22px}
.rail-cap{font:500 .58rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:0 8px 10px}
.rail-band{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;padding:10px 6px;border-top:1px solid var(--line-2);color:var(--ink-2);position:relative}
.rail-band .rl-name{writing-mode:vertical-rl;transform:rotate(180deg);font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.rail-band .rl-hz{font:500 .55rem/1 var(--mono);color:var(--ink-3);letter-spacing:.08em}
.rail-band .rl-meter{width:6px;background:var(--line);border-radius:2px}
.rail-band:hover{color:var(--ink)} .rail-band:hover .rl-meter{background:var(--acid)}
.rail-band.is-active{color:var(--acid)} .rail-band.is-active .rl-meter{background:var(--acid);box-shadow:0 0 10px rgba(198,255,58,.5)}
.rail-strip{display:none}
@media(max-width:1080px){
  .with-rail{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .rail-strip{display:flex;gap:8px;overflow-x:auto;padding:12px var(--gut);border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:var(--head-h,96px);z-index:50;scrollbar-width:none}
  .rail-strip a{flex:none;font:500 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);padding:8px 11px}
  .rail-strip a b{color:var(--ink-3);font-weight:500;margin-left:7px;font-size:.58rem}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;border-bottom:1px solid var(--line);overflow:hidden;background:#07080C}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.06) brightness(.72)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(97deg,rgba(8,9,13,.94) 0%,rgba(8,9,13,.55) 44%,rgba(139,92,246,.18) 100%);mix-blend-mode:normal}
.hero-in{position:relative;z-index:2;padding:clamp(28px,6vw,72px) var(--gut) clamp(30px,5vw,56px);max-width:min(100%,980px)}
.hero h1{font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:1.02;margin:.5em 0 0;color:#F4F2EE}
.hero .credit,.credit{font:400 .68rem/1.4 var(--mono);color:var(--ink-3);letter-spacing:.04em}
.hero .standfirst{margin:1.1em 0 0;max-width:56ch;font-size:1.1rem;color:#CFCEDB}
.hero-meta{display:flex;gap:16px;align-items:center;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--acid);color:var(--acid);font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:12px 16px;min-height:44px}
.btn:hover{background:var(--acid);color:#0B0D12}
.btn.ghost{border-color:var(--line);color:var(--ink-2)}
.btn.ghost:hover{background:transparent;border-color:var(--ink-2);color:var(--ink)}

/* ---------- generic band ---------- */
.band{padding:clamp(38px,6vw,76px) 0;border-bottom:1px solid var(--line-2)}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:26px}
.band-head h2{font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.06}
.band-head p{margin:.5em 0 0;max-width:58ch;color:var(--ink-2)}
.band-note{max-width:46ch;color:var(--ink-3);font-size:.95rem;margin:0}

/* ---------- spectrum navigator ---------- */
.spectrum{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.sp-row{display:grid;grid-template-columns:118px minmax(0,1fr) minmax(0,1.25fr) 92px;gap:clamp(12px,2vw,26px);align-items:center;background:var(--paper);padding:20px clamp(14px,2vw,24px);transition:background .18s}
.sp-row:hover{background:var(--panel)}
.sp-row .sp-hz{font:500 .72rem/1.3 var(--mono);letter-spacing:.06em;color:var(--acid)}
.sp-row .sp-hz small{display:block;color:var(--ink-3);letter-spacing:.14em;margin-top:5px;font-size:.6rem}
.sp-row h3{font-size:1.5rem;line-height:1.1}
.sp-row .sp-blurb{margin:0;color:var(--ink-2);font-size:.95rem}
.sp-row .sp-bars{display:flex;align-items:flex-end;gap:3px;height:34px;justify-content:flex-end}
.sp-row .sp-bars i{width:5px;background:var(--line);display:block}
.sp-row:hover .sp-bars i{background:var(--uv)}
@media(max-width:860px){.sp-row{grid-template-columns:1fr;gap:9px}.sp-row .sp-bars{justify-content:flex-start}}

/* ---------- featured long read ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:end}
.feature h2{font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.02;margin:.35em 0 0}
.feature .lead{font-size:1.12rem;color:#CFCEDB;max-width:52ch}
.feature .f-side{border-left:1px solid var(--line);padding-left:clamp(16px,2vw,28px)}
.feature .f-side dl{margin:0;display:grid;gap:14px}
.feature .f-side dt{font:500 .6rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.feature .f-side dd{margin:5px 0 0;font-size:.98rem;color:var(--ink)}
@media(max-width:880px){.feature{grid-template-columns:1fr}.feature .f-side{border-left:0;border-top:1px solid var(--line);padding:20px 0 0}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.card{display:flex;flex-direction:column;background:var(--paper);padding:0 0 20px;min-height:100%}
.card:hover{background:var(--panel)}
.card .c-img{aspect-ratio:16/10;overflow:hidden;background:#0A0C11}
.card .c-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82)}
.card:hover .c-img img{filter:saturate(1) brightness(.95)}
.card .c-body{padding:16px clamp(14px,1.6vw,20px) 0;display:flex;flex-direction:column;flex:1;gap:9px}
.card .c-slug{font:500 .62rem/1 var(--mono);letter-spacing:.14em;color:var(--ink-3);word-break:break-word}
.card h3{font-size:1.32rem;line-height:1.14;min-height:2.28em}
.card p{margin:0;color:var(--ink-2);font-size:.93rem}
.card .c-meta{margin-top:auto;padding-top:14px;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap}
.card .c-meta .hz{color:var(--uv-soft)}

/* ---------- band index (per section on homepage) ---------- */
.bandblock{scroll-margin-top:calc(var(--head-h,96px) + 62px);display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:clamp(24px,3.4vw,40px) 0;border-top:1px solid var(--line-2)}
.bandblock .bb-side .bb-no{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--uv-soft)}
.bandblock .bb-side h3{font-size:1.55rem;margin:.25em 0 0}
.bandblock .bb-side .bb-hz{font:500 .66rem/1 var(--mono);letter-spacing:.12em;color:var(--acid);margin-top:10px}
.bandblock .bb-side p{margin:14px 0 0;color:var(--ink-3);font-size:.9rem}
.bandblock ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-2)}
.bandblock li{background:var(--paper)}
.bandblock li a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:15px 4px;color:var(--ink)}
.bandblock li a:hover{background:var(--panel);color:var(--acid)}
.bandblock li .t{font-family:var(--display);font-size:1.24rem;line-height:1.2}
.bandblock li .m{font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
@media(max-width:820px){.bandblock{grid-template-columns:1fr;gap:16px}}

/* ---------- supporters (The Rig) ---------- */
.rig{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);padding:clamp(22px,3vw,34px) 0}
.rig-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.rig-head h2{font-size:1.32rem}
.rig-head .kicker{margin-left:auto}
.rig-row{display:flex;flex-wrap:wrap;gap:12px}
.sponsor{flex:1 1 190px;min-width:0;display:flex;align-items:center;justify-content:center;background:#0A0C11;border:1px solid var(--line);height:76px;padding:12px 20px}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain;opacity:.86}
.sponsor:hover{border-color:var(--uv);background:#0D0F16}
.sponsor:hover img{opacity:1}
.sponsor.feat{flex-basis:230px;height:104px}
.sponsor.feat img{max-height:56px}
.sponsor-blurb{display:none}
@media(max-width:620px){.rig-row{gap:10px}.sponsor,.sponsor.feat{flex:1 1 100%;height:88px}}

/* ---------- map ---------- */
.map-figure{border:1px solid var(--line);background:var(--panel);padding:clamp(12px,2vw,22px)}
.map-figure svg{width:100%;height:auto;display:block}
.map-figure figcaption{margin-top:14px;font:400 .84rem/1.5 var(--body);color:var(--ink-3);max-width:70ch}
.map-slot{min-height:220px}
.map-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.map-legend i{display:inline-block;width:8px;height:8px;background:var(--acid);border-radius:50%;margin-right:7px}
.map-legend-uv::before{content:"";display:inline-block;width:10px;height:10px;background:#2A2340;border:1px solid var(--uv);margin-right:7px;vertical-align:-1px}

/* ---------- footer ---------- */
.foot{background:#0A0B10;border-top:1px solid var(--line);padding:clamp(30px,4vw,52px) 0 34px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.foot h4{font:500 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot ul a{color:var(--ink-2);font-size:.95rem}
.foot ul a:hover{color:var(--acid)}
.disclaimer{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line-2);color:var(--ink-3);font-size:.86rem;max-width:78ch}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

/* ---------- article ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--acid),var(--uv));z-index:80}
.art-head{padding:clamp(28px,5vw,64px) 0 clamp(18px,2.4vw,30px);border-bottom:1px solid var(--line-2)}
.art-head .crumbs{display:flex;gap:10px;flex-wrap:wrap;font:500 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.art-head h1{font-size:clamp(2.1rem,5.4vw,4rem);line-height:1.01;max-width:26ch}
.art-head .lead{margin:1.1em 0 0;font-size:1.22rem;line-height:1.5;color:#CFCEDB;max-width:60ch}
.art-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.art-meta .cat{color:var(--acid)}
.art-hero{border-bottom:1px solid var(--line-2)}
.art-hero img{width:100%;max-height:min(62vh,620px);object-fit:cover;filter:saturate(.88) brightness(.8)}
.art-hero .credit{padding:10px var(--gut) 0;max-width:var(--shell);margin:0 auto}
.prose{max-width:var(--measure);margin:0 auto;padding:clamp(26px,4vw,52px) var(--gut) 10px;font-size:1.135rem;line-height:1.72;color:#D5D3DF}
.prose>h2:first-child{margin-top:.15em}
.prose h2{font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.12;margin:2em 0 .55em;color:var(--ink)}
.prose h2 .h-no{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--ink-3);display:block;margin-bottom:.7em;font-weight:500}
.prose a{color:var(--acid);border-bottom:1px solid rgba(198,255,58,.35)}
.prose a:hover{background:rgba(198,255,58,.12)}
.prose strong{color:var(--ink);font-weight:600}
.breakout{max-width:1180px;margin:clamp(30px,4vw,56px) auto;padding-inline:var(--gut)}
.breakout.wide{max-width:var(--shell)}
.lead{font-size:1.2rem;color:#CFCEDB}
.pullquote{margin:0;border-top:1px solid var(--uv);border-bottom:1px solid var(--uv);padding:26px 0}
.pullquote p{margin:0;font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.22;color:#F1EFF7}
.blockquote{margin:0;border-left:2px solid var(--acid);padding:4px 0 4px 22px}
.blockquote p{font-family:var(--display);font-size:1.4rem;line-height:1.35;margin:0 0 .5em}
.blockquote cite{font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
.callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid);padding:20px 22px;margin:0}
.callout p{margin:0;color:var(--ink)}
.note{font-size:.95rem;color:var(--ink-3);border-left:1px solid var(--line);padding-left:14px}
.panel{border:1px solid var(--line);background:var(--panel)}
.panel-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
.panel-head h3{font-size:1.18rem}
.panel-body{padding:clamp(14px,2vw,22px) clamp(14px,2vw,20px)}

/* frequency-map / definition rows */
.deflist{display:grid;gap:1px;background:var(--line-2)}
.defrow{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);gap:clamp(12px,2vw,26px);background:var(--panel);padding:15px 16px}
.defrow dt{font:500 .76rem/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acid);margin:0}
.defrow dd{margin:0;color:var(--ink-2);font-size:.99rem}
@media(max-width:700px){.defrow{grid-template-columns:1fr;gap:6px}}
/* spectrum strip inside articles */
.freqbars{display:flex;gap:6px;align-items:flex-end;height:96px;margin-bottom:6px}
.freqbars i{flex:1;background:linear-gradient(180deg,var(--uv),rgba(139,92,246,.2));display:block}
.freqbars i:nth-child(odd){background:linear-gradient(180deg,var(--acid),rgba(198,255,58,.16))}
.freqscale{display:flex;justify-content:space-between;font:500 .58rem/1 var(--mono);letter-spacing:.1em;color:var(--ink-3)}

/* tables */
.datatable,.versus{width:100%;border-collapse:collapse;font-size:.98rem}
.datatable th,.datatable td,.versus th,.versus td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.datatable th,.versus th{font:500 .64rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--panel2)}
.datatable td,.versus td{color:var(--ink-2)}
.versus td:first-child{color:var(--ink);font-weight:500}
.table-wrap{overflow-x:auto}
/* stats */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.statblock{background:var(--panel);padding:20px 18px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-size:2.5rem;line-height:1;color:var(--acid)}
.stat-label{font-size:.9rem;color:var(--ink-2)}
/* timeline */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-2)}
.timeline li{display:grid;grid-template-columns:minmax(140px,.36fr) minmax(0,1fr);gap:clamp(12px,2vw,24px);background:var(--panel);padding:15px 16px}
.t-when{font:500 .74rem/1.4 var(--mono);letter-spacing:.06em;color:var(--uv-soft)}
.t-what{color:var(--ink-2)}
@media(max-width:700px){.timeline li{grid-template-columns:1fr;gap:6px}}
/* charts */
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:12px;font-size:.86rem;color:var(--ink-3)}
.chart text{font-family:var(--mono);font-size:11px;fill:var(--ink-3)}
/* figures */
.article-figure img{width:100%;border:1px solid var(--line)}
.article-figure figcaption{margin-top:11px;font-size:.88rem;color:var(--ink-3);max-width:70ch}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.gallery figure figcaption{margin-top:8px;font-size:.8rem;color:var(--ink-3)}
/* cards / refs */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.profile-card{border:1px solid var(--line);background:var(--panel);padding:18px}
.profile-card .p-photo{width:64px;height:64px;object-fit:cover;border-radius:50%;margin-bottom:12px}
.profile-card h3{font-size:1.2rem}
.profile-card .p-role{font:500 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acid);margin:8px 0 12px}
.profile-card p{font-size:.94rem;color:var(--ink-2)}
.profile-card .p-attr{font-size:.8rem;color:var(--ink-3)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.org-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:2px 14px;align-items:center;border:1px solid var(--line);background:#0A0C11;padding:14px 16px}
.org-card .org-logo{grid-row:1/3;max-height:38px;max-width:120px;width:auto;object-fit:contain}
.org-card .org-name{font-weight:600;color:var(--ink);font-size:.98rem}
.org-card .org-host{font:400 .74rem/1 var(--mono);color:var(--ink-3)}
.entity-ref{border-bottom:1px solid rgba(198,255,58,.4)}
.further-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.further-grid a{flex:1 1 200px;min-width:0;background:var(--panel);padding:18px;color:var(--ink);display:grid;align-content:start;gap:10px;min-height:96px}
.further-grid .fg-name{display:block;font-family:var(--display);font-size:1.2rem;line-height:1.2}
.further-grid .fg-hz{display:block;font:500 .62rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.further-grid a:hover .fg-hz{color:var(--acid)}
.further-grid a:hover{background:var(--panel2);color:var(--acid)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.related-links li{background:var(--panel)}
.related-links a{display:block;padding:15px 16px;font-family:var(--display);font-size:1.16rem;color:var(--ink)}
.related-links a:hover{background:var(--panel2);color:var(--acid)}
.related-links a .m{display:block;font:500 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
/* expander */
.more{margin-top:14px}
.more input{position:absolute;opacity:0;pointer-events:none}
.more .extra{display:none}
.more input:checked~.extra{display:grid}
.more label{display:inline-flex;min-height:44px;align-items:center;font:500 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acid);cursor:pointer;border-bottom:1px solid var(--line)}
.more input:checked~label .lbl-more{display:none}
.more label .lbl-less{display:none}
.more input:checked~label .lbl-less{display:inline}
/* category page */
.cat-hero{padding:clamp(30px,5vw,66px) 0 clamp(20px,3vw,34px);border-bottom:1px solid var(--line-2)}
.cat-hero h1{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.01}
.cat-hero .blurb{margin:1em 0 0;max-width:62ch;font-size:1.14rem;color:#CFCEDB}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-2);border-block:1px solid var(--line-2)}
.cat-list li{background:var(--paper)}
.cat-list li a{display:grid;grid-template-columns:64px minmax(0,1fr) 150px;gap:clamp(12px,2vw,28px);align-items:start;padding:22px 6px;color:var(--ink)}
.cat-list li a:hover{background:var(--panel)}
.cat-list .n{font:500 .7rem/1.4 var(--mono);color:var(--ink-3)}
.cat-list li a>span:nth-child(2){display:grid;gap:.42em}
.cat-list .t{display:block;font-family:var(--display);font-size:clamp(1.3rem,2.3vw,1.72rem);line-height:1.14}
.cat-list .d{display:block;color:var(--ink-2);font-size:.95rem;line-height:1.55;max-width:70ch}
.cat-list .m{display:grid;gap:.5em;justify-items:start;font:500 .6rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cat-list .m span{display:block}
@media(max-width:760px){.cat-list li a{grid-template-columns:1fr;gap:8px}.cat-list .m{order:3}}
/* simple page */
.page-body{max-width:var(--measure);margin:0 auto;padding:clamp(28px,5vw,60px) var(--gut) clamp(30px,5vw,70px);font-size:1.1rem;line-height:1.7;color:#D5D3DF}
.page-body h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.04;margin-bottom:.6em}
.page-body h2{font-size:1.5rem;margin:1.8em 0 .5em}
.notfound{text-align:center;padding:clamp(60px,12vw,140px) var(--gut)}
.notfound .code{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;color:var(--acid);text-transform:uppercase}
.notfound h1{font-size:clamp(2.4rem,7vw,4.4rem);margin:.3em 0}
/* styleguide */
.sg-sec{border-top:1px solid var(--line);padding:34px 0}
.sg-sec>h2{font-size:1.6rem;margin-bottom:6px}
.sg-sec>.kicker{margin-bottom:20px;display:block}
.sg-narrow{max-width:360px;border:1px dashed var(--line);padding:12px;resize:horizontal;overflow:auto}

/* ---------- mobile audit fixes ---------- */
@media(max-width:760px){
  .masthead .bar{flex-wrap:wrap;row-gap:2px;padding-top:11px;padding-bottom:0}
  .nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;gap:20px;padding-bottom:0}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;min-height:46px;display:inline-flex;align-items:center;padding:0;border-bottom-width:2px}
  .foot ul a{display:inline-flex;align-items:center;min-height:40px}
  .wordmark{min-height:44px;align-items:center}
  .art-meta a,.cat{min-height:32px;display:inline-flex;align-items:center}
  .foot ul{gap:2px}
  .related-links a,.cat-list li a,.bandblock li a,.further-grid a{min-height:48px}
}
@media(max-width:620px){
  .nav a{font-size:.72rem;letter-spacing:.12em}
  .nav a .hz{font-size:.66rem;margin-left:5px}
  .wordmark .wm{font-size:1.42rem}
  .wordmark .tld,
  .kicker,.credit,.hz,.c-slug,.cat,.fg-hz,.org-host,
  .cat-list .m,.cat-list .n,.bandblock li .m,.bandblock .bb-hz,
  .profile-card .p-role,.rail-cap,.rl-hz,.h-no,.map-legend{font-size:.72rem;letter-spacing:.1em}
  .c-meta,.card .c-meta span{font-size:.72rem}
  .datatable,.versus{display:block;overflow-x:auto;font-size:.86rem}
  .article-figure figcaption,.map-figure figcaption,.chart figcaption{font-size:.9rem}
}

@media(max-width:620px){
  html body .nav a .hz{font-size:.72rem}
  html body .hz,html body .credit,html body .c-slug,html body .c-meta,html body .c-meta span,
  html body .cat,html body .fg-hz,html body .org-host,html body .m,html body .n,
  html body .bb-hz,html body .p-role,html body .rl-hz,html body .h-no,html body .kicker,
  html body .lbl-more,html body .lbl-less,html body .map-legend,html body .t-when,
  html body .wordmark .tld,html body .rail-cap{font-size:.72rem;line-height:1.4}
  html body .chart svg{overflow:hidden}
  html body .chart{overflow-x:auto}
}

@media(max-width:620px){
  html body .hero .credit,html body .credit,
  html body .card .c-slug,html body .card .c-meta,
  html body .related-links a .m,html body .further-grid .fg-hz,
  html body .prose h2 .h-no,html body .profile-card .p-role,
  html body .rail-band .rl-hz,html body .rail-strip a,html body .rail-strip a b,
  html body .art-head .crumbs,html body .art-meta,html body .blockquote cite,
  html body .datatable th,html body .versus th,html body .freqscale,
  html body .foot h4,html body .more label,html body .rail-cap{font-size:.72rem;line-height:1.4}
}

/* 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. */
.rig-row.feat-row .feat.sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.rig-row.feat-row .feat.sponsor.feat.sponsor img{height:56px!important;display:block!important;width:100%!important}
.rig-row .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.rig-row .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1048px at 390, 9% of the whole page. Two columns bring it to
   558px (47% shorter). Checked before writing: no new overflow, smallest mark still
   128px wide, longest blurb 0 lines, tile heights 88-88px.
   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 (.rig-row.feat-row, .rig-row), 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){
  .rig-row.feat-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .rig-row.feat-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .rig-row.feat-row > * *{min-width:0!important;max-width:100%}
    .rig-row.feat-row img,.rig-row.feat-row svg{max-width:100%;height:auto}
  .rig-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .rig-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .rig-row > * *{min-width:0!important;max-width:100%}
    .rig-row img,.rig-row svg{max-width:100%;height:auto}
}

/* op-odd-tier-lead: .rig-row.feat-row (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){
  .rig-row.feat-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 603px (78 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose) 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){
  article div.prose{--measure:min(85.767ch, 100%)!important}
}
@media (min-width:1600px){
  article div.prose{--measure:min(clamp(85.767ch, 61.944vw, calc(85.767ch * 1.2)), 100%)!important}
  article div.prose > :is(p:not([class])){font-size:clamp(18.16px,1.2611vw,21.79px)!important}
}
/* op-article-width:end */

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

/* op-hover-pad */
.cat-list li a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; font-weight: 400; letter-spacing: -0.015em; text-wrap: balance;}
h2:where(.rt-h3){font-family: var(--display);}
.bandblock .bb-side h2:where(.rt-h3){font-size: 1.55rem; margin: 0.25em 0px 0px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.c-img > img,
  article > div.art-hero > img,
  article > figure.article-figure.breakout.wide > img,
  body > section.hero > img,
  div.shell > figure.article-figure > img){height:auto}
/* op-img-dims:end */

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 558px 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){
  .rig-row.feat-row .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}
  .rig-row .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}
  .rig-row .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-blurb-beside-mark — these tiles are mark strips with the blurb set BESIDE the mark: a gap so the two don't
   touch, and any tile whose content box is under 200px (tablet tier-2, phone tiles) stays the mark alone, as Design drew it empty */
.rig-row .sponsor{container-type:inline-size}
.rig-row .sponsor-blurb{margin-left:12px}
@container (max-width:200px){.rig-row .sponsor .sponsor-blurb.sponsor-blurb{display:none!important}}
/* op-blurb-beside-mark:end */
.rig-row > .sponsor.sponsor[data-partner]{height:auto!important;min-height:76px!important}
.rig-row > .sponsor[data-partner]{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}.rig-row > .sponsor[data-partner] > .sponsor-blurb{width:100%!important;max-width:none!important}
.rig-row > .sponsor[data-partner]{align-items:center!important}.rig-row > .sponsor[data-partner] > .sponsor-blurb{text-align:center!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}