/* Crazy One's Quote — Direction B, "The Long Line"
   Palette roles: ground (near-black), ink (bone), accent (orange), secondary (cyan), quiet (stone) */

:root{
  --ground:#0E0E10;
  --panel:#17171B;
  --card:#1C1C21;
  --ink:#EDE7DC;
  --ink-2:#BDB6AA;
  --accent:#FF5A1F;
  --cyan:#00B3C8;
  --stone:#7E7870;
  --rule:#2C2C32;

  --shell:1440px;
  --break:1080px;
  --prose:68ch;
  --fs:17px;
  --pad:clamp(18px,4vw,56px);

  --display:'Chivo',system-ui,sans-serif;
  --body:'Source Serif 4',Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (min-width:1600px){:root{--shell:1560px;--break:1280px;--prose:72ch;--fs:19px;--pad:64px}}
@media (min-width:2000px){:root{--shell:1840px;--break:1480px;--prose:76ch;--fs:20px;--pad:80px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:var(--fs);line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0 0 1.15em;text-wrap:pretty}
::selection{background:var(--accent);color:var(--ground)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.prose{max-width:var(--prose);margin-inline:auto}
.breakout{max-width:var(--break);margin-inline:auto}

/* signature + icons */
.struck{width:1.05em;height:1.05em;flex:none;color:var(--cyan);vertical-align:-.14em}
.icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:34px;height:34px}

/* ---------- masthead + nav ---------- */
.masthead{background:var(--ground)}
.masthead-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-block:clamp(16px,1.8vw,30px)}
.wordmark{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(24px,2.9vw,50px);letter-spacing:-.035em;line-height:1;color:var(--ink);
  text-transform:uppercase}
.wordmark:hover{color:var(--accent)}
.mast-sub{display:none}
@media (min-width:900px){.mast-sub{display:block;max-width:38ch;text-align:right;margin:0;
  font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--stone)}}

.nav{position:sticky;top:0;z-index:30;background:rgba(14,14,16,.93);
  backdrop-filter:blur(10px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding-block:7px}
.nav a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:8px 12px}
.nav a .icon{width:16px;height:16px;color:var(--stone)}
.nav a:hover{color:var(--accent)}
.nav a:hover .icon{color:var(--accent)}

.nav-toggle,.nav-label{display:none}
@media (max-width:900px){
  .nav-label{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;
    font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
  .nav-in{display:none;flex-direction:column;align-items:stretch;padding-bottom:12px}
  .nav-toggle:checked ~ .shell .nav-in{display:flex}
  .nav a{font-size:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
}

/* ---------- opening ---------- */
.opening{padding-block:clamp(40px,6vw,150px) clamp(28px,3vw,70px)}
.opening h1{font-size:clamp(48px,10.4vw,290px);line-height:.84;letter-spacing:-.035em;text-transform:uppercase}
.opening h1 em{font-style:normal;color:var(--accent)}
.opening-foot{display:grid;gap:clamp(18px,2.2vw,54px);margin-top:clamp(24px,3vw,64px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.opening-foot .big{font-size:clamp(18px,1.35vw,27px);line-height:1.42;max-width:34ch;margin:0}
.opening-foot .small{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--stone);max-width:42ch;margin:0}

.lead-band{position:relative;background:#000}
.lead-band img{width:100%;height:clamp(320px,64vh,900px);object-fit:cover;opacity:.66}
.lead-copy{position:absolute;inset:auto 0 0 0;padding:var(--pad);
  background:linear-gradient(to top,rgba(6,6,7,.92),rgba(6,6,7,0))}
.lead-copy .in{max-width:var(--shell);margin-inline:auto}
.lead-quote{font-family:var(--display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(30px,5.4vw,104px);line-height:.94;margin:0;max-width:20ch;text-transform:uppercase}
.lead-meta{margin-top:clamp(14px,1.6vw,28px);max-width:76ch}
.lead-meta p{margin:0;color:var(--ink-2);font-size:clamp(15px,1.05vw,20px);line-height:1.5}
.lead-credit{font-family:var(--mono);font-size:11.5px;color:var(--stone);margin-top:8px}
.kicker{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}

/* ---------- the long line: sticky year rail ---------- */
.line-run{padding-block:clamp(34px,4vw,90px)}
.station{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,64px);
  border-top:1px solid var(--rule);padding-top:clamp(20px,2.2vw,44px)}
@media (min-width:820px){.station{grid-template-columns:clamp(120px,12vw,300px) minmax(0,1fr)}}
.station-year{font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(30px,3.6vw,92px);line-height:.86;color:var(--accent)}
@media (min-width:820px){.station-year{position:sticky;top:64px;align-self:start}}
.station-year span{display:block;font-family:var(--mono);font-weight:400;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-top:10px;line-height:1.5}
.station-body{min-width:0;padding-bottom:clamp(30px,3.4vw,80px)}
.station-body h2{font-size:clamp(28px,3vw,64px);display:flex;align-items:flex-start;gap:clamp(12px,1.2vw,22px);max-width:36ch;line-height:.98}
.station-body h2 .icon-lg{flex:none;color:var(--cyan);width:clamp(22px,1.9vw,34px);height:auto;margin-top:.18em}
.station-body > h2:first-child{padding-top:clamp(4px,.5vw,10px)}
.station-blurb{max-width:72ch;color:var(--ink-2);font-size:clamp(16px,1.15vw,22px);margin-top:14px}

.band{padding-block:clamp(40px,4.6vw,100px)}
.band-tight{padding-block:clamp(24px,2.6vw,48px)}
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 20px;
  border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:clamp(18px,2.2vw,40px)}
.band-head h2{font-size:clamp(24px,2.5vw,46px);display:flex;align-items:center;gap:14px}
.band-head .icon-lg{color:var(--cyan)}
.band-no{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone)}
.band-blurb{max-width:58ch;color:var(--ink-2);font-size:clamp(16px,1.1vw,21px)}
.band-ink{background:var(--panel)}
.band-bondi{background:var(--ink);color:#141317}
.band-bondi a{color:#141317;border-bottom:1px solid rgba(20,19,23,.3)}
.band-bondi a:hover{color:var(--accent);border-color:var(--accent)}
.band-bondi .band-head{border-color:rgba(20,19,23,.24)}
.band-bondi .band-head .icon-lg,.band-bondi .band-no{color:#141317}
.band-bondi .band-blurb{color:#4A463F}
.quiet-line{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.7vw,32px);
  letter-spacing:-.03em;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:clamp(20px,2vw,38px)}


/* ---------- section colors: the 1977 six-stripe order ---------- */
:root{
  --c-two-steves:#61BB46;
  --c-the-mac:#FDB827;
  --c-cast-out:#F5821F;
  --c-the-return:#E03A3E;
  --c-the-devices:#963D97;
  --c-verified:#009DDC;
  --c-never-said:#00B3C8;
}
.nav a[href*="two-steves"] .icon{color:var(--c-two-steves)}
.nav a[href*="the-mac"] .icon{color:var(--c-the-mac)}
.nav a[href*="cast-out"] .icon{color:var(--c-cast-out)}
.nav a[href*="the-return"] .icon{color:var(--c-the-return)}
.nav a[href*="the-devices"] .icon{color:var(--c-the-devices)}
.nav a[href*="verified"] .icon{color:var(--c-verified)}
.nav a[href*="never-said"] .icon{color:var(--c-never-said)}
.nav a:hover .icon{color:currentColor}
.nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 currentColor}
.nav a[href*="two-steves"][aria-current]{box-shadow:inset 0 -3px 0 var(--c-two-steves)}
.nav a[href*="the-mac"][aria-current]{box-shadow:inset 0 -3px 0 var(--c-the-mac)}
.nav a[href*="cast-out"][aria-current]{box-shadow:inset 0 -3px 0 var(--c-cast-out)}
.nav a[href*="the-return"][aria-current]{box-shadow:inset 0 -3px 0 var(--c-the-return)}
.nav a[href*="the-devices"][aria-current]{box-shadow:inset 0 -3px 0 var(--c-the-devices)}
.nav a[href*="verified"][aria-current]{box-shadow:inset 0 -3px 0 var(--c-verified)}
.nav a[href*="never-said"][aria-current]{box-shadow:inset 0 -3px 0 var(--c-never-said)}
.nav a[aria-current] .icon{color:inherit}

/* the same six carry into station marks, hub heads and section cards */
[data-sec] .icon-lg,[data-sec] > .band-head .icon-lg{color:var(--sec)}
[data-sec="two-steves"]{--sec:var(--c-two-steves)}
[data-sec="the-mac"]{--sec:var(--c-the-mac)}
[data-sec="cast-out"]{--sec:var(--c-cast-out)}
[data-sec="the-return"]{--sec:var(--c-the-return)}
[data-sec="the-devices"]{--sec:var(--c-the-devices)}
[data-sec="verified"]{--sec:var(--c-verified)}
[data-sec="never-said"]{--sec:var(--c-never-said)}
.station[data-sec] .station-year{color:var(--sec)}
.entry[data-sec] .tag{color:var(--sec)}
.hub-head[data-sec] .icon-lg{color:var(--sec)}

/* ---------- plates, cards, lists ---------- */
.plate{display:grid;gap:clamp(20px,2.4vw,54px);align-items:start}
@media (min-width:900px){.plate{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.plate-title{font-size:clamp(28px,3.4vw,64px)}
.plate .stand{font-size:clamp(17px,1.2vw,23px);color:var(--ink-2);margin-top:18px}
.vermilion-plate{background:var(--accent);color:#1A0A03;padding:clamp(20px,2vw,38px);margin-top:26px}
.vermilion-plate h3{font-size:clamp(19px,1.5vw,28px);margin-bottom:12px}
.vermilion-plate p{margin:0;font-size:clamp(15px,1.05vw,19px);line-height:1.5}
.vermilion-plate a{color:#1A0A03;border-bottom:1px solid rgba(26,10,3,.45)}
.vermilion-plate a:hover{color:#fff;border-color:#fff}

.entries{display:grid;gap:clamp(18px,2vw,40px)}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.entry{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.entry .shotwrap{background:var(--card);border:1px solid var(--rule);padding:8px}
.entry img{aspect-ratio:8/5;object-fit:cover;width:100%}
.entry .shotnote{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;
  line-height:1.45;letter-spacing:.02em;color:var(--stone)}
.entry .shotnote em{font-style:italic}
.entry h3{font-size:clamp(19px,1.3vw,27px);margin-top:14px;min-height:2.1em;letter-spacing:-.025em}
.entry:hover h3{color:var(--accent)}
.entry p{color:var(--ink-2);font-size:15.5px;line-height:1.55;margin:8px 0 0}
.entry .tag{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.band-bondi .entry{color:#141317}
.band-bondi .entry p{color:#4A463F}
.band-bondi .entry .shotwrap{background:rgba(0,0,0,.14);border-color:rgba(20,19,23,.2)}
.band-bondi .entry .tag{color:#6E6961}
.band-bondi .entry:hover h3{color:var(--accent)}

.stack-list{list-style:none;margin:0;padding:0}
.stack-list li{border-top:1px solid var(--rule)}
.band-bondi .stack-list li{border-color:rgba(20,19,23,.2)}
.stack-list a{display:grid;gap:4px 22px;padding:15px 0;color:inherit;border:0}
@media (min-width:700px){.stack-list a{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}}
.stack-list .t{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.25vw,24px);letter-spacing:-.025em}
.stack-list a:hover .t{color:var(--accent)}
.band-bondi .stack-list a:hover .t{color:var(--accent)}
.stack-list .m{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--stone)}
.band-bondi .stack-list .m{color:#6E6961}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(12px,1.2vw,26px)}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule)}
.strip figcaption{margin-top:9px;display:flex;align-items:baseline;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.strip .yr{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--accent)}
.band-bondi .strip figcaption{color:#4A463F}
.band-bondi .strip .yr{color:#0E0E10}

.dev-grid{list-style:none;margin:clamp(22px,2.6vw,52px) 0 0;padding:0;display:grid;
  gap:0;border-top:1px solid rgba(20,19,23,.22)}
@media (min-width:600px){.dev-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.dev-grid{grid-template-columns:repeat(5,1fr)}}
.dev-cell{border-bottom:1px solid rgba(20,19,23,.22)}
@media (min-width:600px){.dev-cell:nth-child(odd){border-right:1px solid rgba(20,19,23,.22)}}
@media (min-width:600px) and (max-width:1079px){
  .dev-cell:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
}
@media (min-width:1080px){
  .dev-cell{border-right:1px solid rgba(20,19,23,.22);border-bottom:0}
  .dev-cell:nth-child(odd){border-right:1px solid rgba(20,19,23,.22)}
  .dev-cell:last-child{border-right:0}
}
.dev-cell a{display:flex;flex-direction:column;height:100%;color:#141317;
  padding:clamp(16px,1.6vw,28px) clamp(14px,1.4vw,26px) clamp(20px,2vw,36px)}
@media (min-width:1080px){.dev-cell:first-child a{padding-left:0}.dev-cell:last-child a{padding-right:0}}
.dev-yr{font-family:var(--display);font-weight:900;letter-spacing:-.045em;line-height:.82;
  font-size:clamp(40px,4.2vw,78px)}
.dev-name{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.05vw,19px);
  letter-spacing:.04em;text-transform:uppercase;margin-top:clamp(10px,1vw,16px)}
.dev-said{font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(19px,1.35vw,25px);line-height:1.1;margin-top:clamp(10px,1vw,18px);text-wrap:balance}
.dev-line{font-size:clamp(14px,.95vw,16.5px);line-height:1.5;color:#4A463F;
  margin-top:clamp(8px,.8vw,14px);max-width:34ch}
.dev-cell a:hover .dev-yr,.dev-cell a:hover .dev-said{color:var(--accent)}

.split{display:grid;gap:clamp(24px,3vw,64px)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}

/* quote board: the two verdict columns */
.split-quotes{display:grid;gap:0;border-top:1px solid var(--rule)}
@media (min-width:940px){.split-quotes{grid-template-columns:1fr 1fr}}
.qcol{padding:clamp(22px,2.4vw,46px) 0;min-width:0}
@media (min-width:940px){
  .qcol-a{padding-right:clamp(26px,3vw,64px);border-right:1px solid var(--rule)}
  .qcol-b{padding-left:clamp(26px,3vw,64px)}
}
@media (max-width:939px){.qcol-b{border-top:1px solid var(--rule)}}
.qcol .band-head{border:0;padding:0;margin-bottom:clamp(16px,1.8vw,32px);align-items:center}
.qcol .band-head h2{font-size:clamp(20px,1.7vw,32px);letter-spacing:-.02em;text-transform:uppercase;
  display:flex;align-items:center;gap:12px}
.qcol .band-head .icon-lg{width:26px;height:26px;color:var(--sec,var(--cyan))}
.qcol .claim-list{list-style:none;margin:0;padding:0;counter-reset:q}
.qcol .claim{counter-increment:q;display:grid;gap:2px 18px;
  grid-template-columns:2.4ch minmax(0,1fr);
  border-top:1px solid var(--rule);padding:clamp(16px,1.5vw,26px) 0}
.qcol .claim:first-child{border-top:0;padding-top:0}
.qcol .claim::before{content:counter(q,decimal-leading-zero);grid-row:1 / span 2;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;line-height:1.9;color:var(--stone)}
.qcol-a .claim .said{color:var(--ink)}
.qcol-b .claim .said{display:flex;align-items:flex-start;gap:.5em}
.qcol .claim .src{max-width:44ch}
.qcol .qnote{display:flex;gap:12px;align-items:flex-start;margin:clamp(18px,2vw,32px) 0 0;
  border-top:1px solid var(--rule);padding-top:14px}
.qcol .qnote .struck{margin-top:.15em}
.claim{border-top:1px solid var(--rule);padding-top:16px}
.claim .said{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.5vw,48px);
  letter-spacing:-.03em;line-height:1.08;margin:0 0 10px}
.claim .said a{color:var(--ink)}
.claim .said a:hover{color:var(--accent)}
.claim .src{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--stone);line-height:1.55}

/* ---------- figures ---------- */
figure{margin:0}
figcaption{margin-top:10px}
.fig-bleed,.fig-mat,.fig-inset,.strip figure{container-type:inline-size}
.cap{display:grid;gap:4px 24px;align-items:baseline}
@container (min-width:620px){.cap{grid-template-columns:minmax(240px,1fr) minmax(0,270px)}}
.cap .c{font-size:clamp(14.5px,1vw,18px);line-height:1.5;color:var(--ink-2)}
.cap .k{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--stone)}

.fig-bleed{position:relative;width:100%;margin-block:clamp(44px,4vw,80px)}
.fig-bleed img{width:100%;height:clamp(300px,56vh,840px);object-fit:cover}
.fig-bleed figcaption{position:absolute;left:0;bottom:0;margin:0;background:var(--ground);
  border-top:3px solid var(--accent);padding:14px 20px;max-width:min(94%,620px)}
.fig-bleed .cap{grid-template-columns:1fr}

.fig-mat{margin-block:clamp(44px,4vw,76px)}
.fig-mat .mat{background:var(--card);border:1px solid var(--rule);padding:12px}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption .c{font-family:var(--mono);font-size:.82rem;line-height:1.55;color:var(--ink-2)}

.fig-inset{width:100%;display:grid;gap:14px 24px;margin-block:clamp(44px,4vw,76px)}
@media (min-width:760px){.fig-inset{grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:end}}
.fig-inset img{width:100%;aspect-ratio:4/5;object-fit:cover;border-bottom:3px solid var(--cyan)}
.fig-inset figcaption{margin-top:0}
.fig-inset figcaption .c{font-size:clamp(15px,1.05vw,19px)}
.fig-inset .cap{grid-template-columns:1fr}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- article ---------- */
.article-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,72px);
  width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
@media (min-width:2000px){.article-shell{grid-template-columns:minmax(0,1fr) 320px}}
.article{padding-block:clamp(30px,3.4vw,70px);min-width:0}
.article-head{max-width:var(--break);margin-inline:auto}
.article h1{font-size:clamp(32px,4.2vw,84px);margin-bottom:clamp(14px,1.6vw,28px)}
.article .lead{font-family:var(--body);font-size:clamp(19px,1.5vw,29px);line-height:1.42;
  color:var(--ink);max-width:52ch;margin:0}
.article-body{margin-top:clamp(24px,2.6vw,56px)}
.article-body > *{max-width:var(--prose);margin-inline:auto}
.article-body > .breakout,.article-body > .fig-mat,.article-body > .notes,.article-body > .pullquote{max-width:var(--break)}
.article-body > *:last-child{margin-bottom:clamp(44px,4vw,80px)}
.article-body > .fig-bleed{max-width:none}
.article-body h2{font-size:clamp(22px,2vw,38px);margin:clamp(28px,2.6vw,54px) 0 14px;
  padding-top:14px;border-top:1px solid var(--rule)}
.article-body h3{font-size:clamp(18px,1.4vw,26px);margin:26px 0 10px}
.article-body p a{border-bottom:1px solid rgba(255,90,31,.4)}
.article-body ul{padding-left:1.1em}
.article-body li{margin-bottom:.4em}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);margin-bottom:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumb .icon{color:var(--cyan)}

.pullquote{margin:clamp(44px,4vw,80px) auto;padding-left:clamp(16px,1.6vw,32px);
  border-left:4px solid var(--accent)}
.pullquote p{font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(23px,2.4vw,44px);line-height:1.08;margin:0}
.blockquote{margin:clamp(44px,3.4vw,64px) 0;padding-left:20px;border-left:3px solid var(--cyan)}
.blockquote p{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.5vw,28px);
  line-height:1.2;letter-spacing:-.025em;margin:0 0 10px}
.blockquote cite{font-family:var(--mono);font-size:12px;font-style:normal;color:var(--stone)}
.callout{background:var(--panel);border-left:4px solid var(--cyan);padding:clamp(16px,1.6vw,28px);margin:clamp(44px,3.4vw,64px) 0}
.callout p{margin:0}
.note{font-family:var(--mono);font-size:.84rem;line-height:1.6;color:var(--stone);
  border-top:1px solid var(--rule);padding-top:10px}

.notes{margin:clamp(44px,4vw,80px) auto;background:var(--panel);border:1px solid var(--rule)}
.notes-head{display:flex;align-items:center;gap:12px;background:var(--accent);color:#1A0A03;
  padding:12px clamp(16px,1.6vw,26px);font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase}
.notes-body{padding:clamp(16px,1.8vw,30px)}
.notes h4{font-family:var(--display);font-weight:700;font-size:16px;margin:0 0 10px;color:var(--accent)}
.notes h4.notes-sub{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:clamp(22px,2.2vw,34px) 0 10px;padding-top:clamp(16px,1.6vw,24px);
  border-top:1px solid var(--rule)}
.keyfacts{list-style:none;margin:0;padding:0}
.keyfacts li{border-top:1px solid var(--rule);padding:9px 0;font-size:16px;line-height:1.5}
.keyfacts li:first-child{border-top:0}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;gap:2px 20px;border-top:1px solid var(--rule);padding:11px 0}
.timeline li:first-child{border-top:0}
@media (min-width:680px){.timeline li{grid-template-columns:minmax(90px,180px) minmax(0,1fr)}}
.t-when{font-family:var(--display);font-weight:800;font-size:15px;color:var(--cyan)}
.t-what{font-size:16px;line-height:1.5}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:14px}
.statblock{border-top:3px solid var(--accent);padding-top:10px}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.4vw,44px);letter-spacing:-.04em}
.stat-label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stone);margin-top:5px}

.versus,.datatable{width:100%;border-collapse:collapse;margin:clamp(44px,3.4vw,64px) 0;font-size:16px}
.versus th,.versus td,.datatable th,.datatable td{border-bottom:1px solid var(--rule);
  padding:11px 12px;text-align:left;vertical-align:top}
.versus th,.datatable th{font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--panel)}
.table-wrap{overflow-x:auto}

.toc{display:none}
@media (min-width:2000px){
  .toc{display:block;position:sticky;top:80px;align-self:start;padding-top:clamp(30px,3.4vw,70px)}
  .toc h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--stone);margin-bottom:14px;font-weight:400}
  .toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
  .toc li{counter-increment:t;border-top:1px solid var(--rule)}
  .toc a{display:block;padding:10px 0;color:var(--ink);font-family:var(--display);font-weight:600;font-size:15px;line-height:1.3}
  .toc a::before{content:counter(t,decimal-leading-zero) " ";color:var(--accent);font-family:var(--mono);font-size:11px}
  .toc a:hover{color:var(--accent)}
}

.profile-grid,.org-grid,.further-grid{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.profile-card{background:var(--panel);border:1px solid var(--rule);padding:16px;
  display:flex;flex-direction:column;height:100%}
.profile-card .p-photo{aspect-ratio:1/1;object-fit:cover;width:76px;border-radius:50%;margin-bottom:12px}
.profile-card h3{font-size:19px}
.profile-card .p-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stone);margin:6px 0 10px}
.profile-card p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.profile-card .p-links{margin-top:auto;padding-top:10px}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--rule);
  color:var(--ink);padding:14px 16px;min-height:96px;justify-content:center}
.org-card .org-logo{max-height:34px;width:auto;object-fit:contain}
.org-name{font-family:var(--display);font-weight:700;font-size:16px}
.org-host{font-family:var(--mono);font-size:11.5px;color:var(--stone)}
.entity-ref{border-bottom:1px solid rgba(255,90,31,.4)}
.further-grid a{display:flex;flex-direction:column;gap:8px;background:var(--panel);
  border:1px solid var(--rule);border-top:3px solid var(--cyan);padding:16px;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:17px;line-height:1.25}
.further-grid a:hover{border-top-color:var(--accent);color:var(--accent)}
.further-grid .m{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--stone);font-weight:400}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.related-links a{font-family:var(--display);font-weight:600;font-size:17px}
.cat-list{list-style:none;margin:0;padding:0}

/* ---------- supporters ---------- */
.supporters{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:clamp(24px,2.6vw,48px)}
.sup-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:clamp(16px,1.6vw,28px)}
.sup-head h2{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.25vw,24px);letter-spacing:-.025em}
.sup-head .sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--stone);max-width:52ch}
.sup-tier{display:flex;flex-wrap:wrap;gap:clamp(18px,2vw,44px)}
.sup-tier + .sup-tier{margin-top:clamp(20px,2.2vw,40px);padding-top:clamp(16px,1.6vw,28px);border-top:1px solid var(--rule)}
.sup-tier-b{gap:clamp(12px,1.2vw,26px)}
.sup-set{display:flex;flex-direction:column;gap:12px}
.sup-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.sup-group{display:flex;flex-wrap:wrap;gap:clamp(12px,1.2vw,24px)}
.sponsor{flex:0 0 300px;display:flex;flex-direction:column;gap:9px;color:var(--ink)}
.sponsor img{background:#000;border:1px solid var(--rule);width:100%;aspect-ratio:300/72;
  padding:12px 16px;max-height:72px;height:auto;object-fit:contain}
.sponsor-name{font-family:var(--display);font-weight:700;font-size:15px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sponsor.feat .sponsor-name{font-size:17px;color:var(--ink)}
.sponsor:hover .sponsor-name{color:var(--accent)}
@media (max-width:660px){.sponsor{flex:0 0 100%}}

/* ---------- footer ---------- */
.foot{background:var(--panel);color:var(--ink-2);padding-block:clamp(34px,3.4vw,70px);
  font-size:15.5px;border-top:1px solid var(--rule)}
.foot a{color:var(--ink)}
.foot a:hover{color:var(--accent)}
.foot-grid{display:grid;gap:clamp(20px,2.4vw,54px);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.foot h3{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stone);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot .line{margin-top:clamp(24px,2.4vw,48px);padding-top:18px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-family:var(--mono);font-size:11.5px;color:var(--stone)}

/* ---------- hub ---------- */
.hub-head{padding-block:clamp(30px,3.4vw,72px);border-bottom:1px solid var(--rule)}
.hub-head h1{font-size:clamp(38px,6vw,140px);display:flex;align-items:center;gap:.3em;
  text-transform:uppercase;letter-spacing:-.035em}
.hub-head .icon-lg{width:clamp(34px,3.2vw,68px);height:auto;color:var(--cyan)}
.hub-head .band-blurb{margin-top:18px;font-size:clamp(17px,1.3vw,24px)}

.more{margin-top:16px}
.more input{position:absolute;opacity:0;pointer-events:none}
.more .hidden-items{display:none}
.more input:checked ~ .hidden-items{display:block}
.more label{display:inline-block;cursor:pointer;font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid currentColor;padding-bottom:3px}
.more input:checked ~ label{display:none}

/* 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}
.sup-tier{flex-wrap:wrap!important}
.sup-tier > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sup-set > .sponsor{flex:0 0 auto!important}
.sup-group{flex-wrap:wrap!important}
.sup-group > .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){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-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}

/* op-footer-compact: the footer printed 8 rows for 8 link(s) in
   2 list(s) — 717px at 390, 6% 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 717 -> 514px (28% 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(8px,2.43vw,35px)!important;row-gap:8px!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:24px}
}

/* op-money-columns: the supporters block ran one tile per row — 8 tiles,
   897px at 390, 8% of the whole page. Two columns bring it to
   300px (67% shorter). Checked before writing: no new overflow, smallest mark still
   170px wide, longest blurb 1 lines, tile heights 74-77px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sup-group), 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-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:17px!important}
    .sup-group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-group > * *{min-width:0!important;max-width:100%}
    .sup-group img,.sup-group svg{max-width:100%;height:auto}
}

/* op-name-wrap: at 320 — and still at 390 on this build — the money tile truncated its brand name — "Evil Angel Transexuals" — losing up to 52px to an
   ellipsis. The name is allowed to wrap instead of being cut: a brand that reads as half a word
   is worse than a brand on two lines. Structural only, phone widths only, desktop untouched. */
@media (max-width:400px){
  .sponsor-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 0px; text-wrap: balance;}
h3:where(.rt-h4){font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 0px; text-wrap: balance;}
.entry h2:where(.rt-h3){font-size: clamp(19px, 1.3vw, 27px); margin-top: 14px; min-height: 2.1em; letter-spacing: -0.025em;}
.entry:hover h2:where(.rt-h3){color: var(--accent);}
.notes h3:where(.rt-h4){font-family: var(--display); font-weight: 700; font-size: 16px; margin: 0px 0px 10px; color: var(--accent);}
.notes h3:where(.rt-h4).notes-sub{font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: clamp(22px, 2.2vw, 34px) 0px 10px; padding-top: clamp(16px, 1.6vw, 24px); border-top: 1px solid var(--rule);}
.foot h2:where(.rt-h3){font-family: var(--mono); font-weight: 400; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 12px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.entry > div.shotwrap > img,
  article.article > figure.fig-bleed > img,
  body > section.lead-band > img,
  div.article-body > figure.fig-inset > img,
  div.station-body > figure.fig-bleed > img,
  figure.fig-mat > div.mat > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sup-group (3 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sup-group:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-grow-same-size: an added partner would have wrapped onto a new row ALONE and stretched across the grid (flex rows that grow). Same minimum (basis 220px, min-width min(220px, 100%)), same columns at every width, a short row keeps its siblings' size — applied at the moment of adding, as the operator chose (2026-09-23). Phones keep their own rules. */
@media (min-width:641px){
  div.sup-set:nth-of-type(3) > div.sup-group{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */
@media (min-width:641px){div.sup-set:nth-of-type(3){flex:1 1 100%!important;min-width:0}div.sup-set:nth-of-type(3) > div.sup-group{width:100%}}[data-partner] img{background:transparent!important}