/* MIDIator — 1a Control Room. Dark rack-graphite, amber-cable + LED-cyan. Self-contained: system-stack fonts only (drop self-hosted woff2 into assets/fonts/ and uncomment the @font-face slots below to upgrade). */
/* @font-face{font-family:"MIDIator Grotesk";src:url("fonts/grotesk.woff2") format("woff2");font-weight:400 800;font-display:swap} */
/* @font-face{font-family:"MIDIator Mono";src:url("fonts/mono.woff2") format("woff2");font-weight:400 700;font-display:swap} */
:root{
  --bg:#131518;--bg-deep:#0e1013;--panel:#1a1d21;--panel-2:#16181c;
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.055);
  --ink:#e9ebee;--dim:#a4abb3;--faint:#7b838c;
  --amber:#f5a83c;--amber-dim:#c98a25;--amber-glow:rgba(245,168,60,.55);
  --cyan:#43dcec;--cyan-dim:#2ba7b5;--cyan-glow:rgba(67,220,236,.5);
  --pcb:#d8b877;--pcb-ink:#efe3c4;--pcb-dim:#a98f58;--museum-bg:#1d1710;--museum-panel:#251d12;--museum-line:rgba(216,184,119,.22);
  --font-d:"MIDIator Grotesk","Bahnschrift","DIN Alternate","Franklin Gothic Medium","Avenir Next Condensed",system-ui,sans-serif;
  --font-b:"MIDIator Grotesk",system-ui,"Segoe UI","Helvetica Neue",sans-serif;
  --font-m:"MIDIator Mono",ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1480px;--gut:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--cyan)}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--font-m)}
.kicker{font-family:var(--font-m);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
h1,h2,h3{font-family:var(--font-d);letter-spacing:-.01em;text-wrap:balance}
::selection{background:var(--amber);color:#141312}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(15,17,19,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:30px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:800;font-size:21px;color:var(--ink);letter-spacing:.02em}
.brand:hover{color:var(--ink)}
.brand .led{width:8px;height:8px;background:var(--amber);border-radius:2px;box-shadow:0 0 9px var(--amber-glow)}
.head-tag{margin-left:auto;font-size:12px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;white-space:nowrap}
.site-nav{display:flex;gap:6px}
.nav-item{position:relative}
.nav-item>a,.site-nav>a{display:block;padding:22px 12px;font-family:var(--font-m);font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.nav-item>a:hover,.site-nav>a:hover,.nav-item>a[aria-current],.site-nav>a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--amber)}
.sub{position:absolute;left:0;top:100%;min-width:320px;background:var(--panel);border:1px solid var(--line);border-radius:0 0 8px 8px;padding:8px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.nav-item:hover .sub,.nav-item:focus-within .sub{display:block}
.sub a{display:block;padding:9px 12px;border-radius:5px;font-size:15px;color:var(--dim)}
.sub a:hover{background:var(--panel-2);color:var(--ink)}
.sub .sub-all{font-family:var(--font-m);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border-top:1px solid var(--line-soft);margin-top:6px}
.nav-btn{display:none;margin-left:12px;background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:9px 11px;cursor:pointer}
.nav-btn svg{display:block}
@media (max-width:1120px){
  .head-tag{display:none}
  .nav-btn{display:block;margin-left:auto}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-deep);border-bottom:1px solid var(--line);padding:8px var(--gut) 18px;max-height:calc(100vh - 66px);overflow:auto}
  .site-nav.open{display:flex}
  .nav-item>a,.site-nav>a{padding:13px 4px;border-bottom:1px solid var(--line-soft)}
  .nav-item>a:hover,.nav-item>a[aria-current]{box-shadow:inset 3px 0 0 var(--amber)}
  .sub{position:static;display:block;min-width:0;background:none;border:0;box-shadow:none;padding:2px 0 6px 14px}
}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,8vw,110px) 0 clamp(30px,4vw,56px);position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.hero h1{margin:14px 0 0;font-size:clamp(40px,4.8vw,72px);line-height:1.04;font-weight:800}
.hero .standfirst{margin:22px 0 0;font-size:clamp(18px,1.4vw,21px);line-height:1.65;color:var(--dim);max-width:46ch;text-wrap:pretty}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:6px;font-family:var(--font-d);font-weight:700;font-size:16px;letter-spacing:.02em}
.btn svg{flex:none}
.btn-amber{background:var(--amber);color:#161310}
.btn-amber:hover{background:#ffc064;color:#161310}
.btn-ghost{border:1px solid rgba(255,255,255,.22);color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.hero-fig{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel-2)}
.hero-fig img{width:100%;height:100%;min-height:420px;object-fit:cover;opacity:.9}
.hero-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-family:var(--font-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);background:linear-gradient(0deg,rgba(10,11,12,.9),transparent)}
@media (max-width:900px){.hero-in{grid-template-columns:1fr}.hero-fig img{min-height:220px}}

/* ---------- signal chain explorer ---------- */
.chain-band{padding:clamp(28px,3vw,44px) 0 clamp(48px,5vw,72px)}
.chain-shell{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:clamp(18px,2.5vw,32px)}
.chain-head{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;margin-bottom:22px}
.chain-head .kicker{color:var(--faint)}
.chain-head strong{font-family:var(--font-d);font-size:20px;letter-spacing:.01em}
.chain{display:flex;align-items:stretch;gap:0;list-style:none;margin:0;padding:0}
.chain li{display:flex;align-items:center;flex:1;min-width:0}
.chain li:last-child{flex:1 0 auto}
.chain-node{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding:16px 16px 14px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:var(--panel);color:var(--ink);cursor:pointer;position:relative;transition:border-color .18s,transform .18s}
.chain-node:hover{border-color:var(--cyan);color:var(--ink);transform:translateY(-2px)}
.chain-node .n-led{width:7px;height:7px;border-radius:50%;background:#3a4046;transition:background .2s,box-shadow .2s}
.chain-node .n-label{font-family:var(--font-d);font-weight:700;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chain-node .n-sub{font-family:var(--font-m);font-size:11.5px;letter-spacing:.1em;color:var(--faint)}
.chain-node[aria-expanded="true"]{border-color:var(--amber);background:#201b12}
.chain-node[aria-expanded="true"] .n-led{background:var(--amber);box-shadow:0 0 8px var(--amber-glow)}
.chain-node[aria-expanded="true"] .n-sub{color:var(--amber-dim)}
.chain-link{flex:0 0 clamp(14px,2.2vw,36px);height:2px;background:#3a4046;position:relative;overflow:hidden}
.chain-link.lit{background:var(--amber)}
.chain-link.lit::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff 50%,transparent);transform:translateX(-100%);animation:pulse 1.1s linear infinite}
@keyframes pulse{to{transform:translateX(100%)}}
.chain-panels{margin-top:20px;position:relative}
.chain-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr);gap:clamp(18px,2.5vw,36px);border-top:1px solid var(--line);padding-top:20px}
.chain-panel[hidden]{display:none}
.chain-panel h3{margin:0 0 8px;font-size:15px;font-family:var(--font-m);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.chain-panel h3.h-amber{color:var(--amber)}
.chain-panel p{margin:0;font-size:16.5px;line-height:1.6;color:var(--dim);text-wrap:pretty}
.chain-reads{display:flex;flex-direction:column;gap:8px}
.chain-reads a{font-size:15.5px;line-height:1.4;display:flex;gap:9px;align-items:baseline}
.chain-reads a::before{content:"→";font-family:var(--font-m);color:var(--cyan);flex:none}
.chain-reads .hub-link{margin-top:4px;font-family:var(--font-m);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:960px){
  .chain{flex-direction:column;gap:0}
  .chain li{flex-direction:column;align-items:stretch}
  .chain-node .n-label{white-space:normal}
  .chain-link{flex:0 0 18px;width:2px;height:18px;margin-left:28px}
  .chain-panel{grid-template-columns:1fr}
}

/* ---------- section bands / hubs ---------- */
.band{padding:clamp(44px,5.5vw,76px) 0}
.band+.band{border-top:1px solid var(--line-soft)}
.band-head{display:flex;align-items:baseline;gap:16px;margin-bottom:10px;flex-wrap:wrap}
.band-head .tick{width:24px;height:3px;background:var(--amber);flex:none;align-self:center}
.band-head h2{margin:0;font-size:clamp(26px,2.4vw,34px);font-weight:800}
.band-head .band-all{margin-left:auto;font-family:var(--font-m);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.band-head .band-all:hover{color:var(--amber)}
.band-blurb{margin:0 0 28px;max-width:72ch;color:var(--dim);font-size:17px;text-wrap:pretty}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1180px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.card-grid{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;color:var(--ink);transition:border-color .18s,transform .18s}
.gcard:hover{border-color:rgba(255,255,255,.28);transform:translateY(-3px);color:var(--ink)}
.gcard:hover .cover span{color:var(--cyan);text-shadow:0 0 22px var(--cyan-glow)}
.cover{aspect-ratio:16/9;background:linear-gradient(135deg,#20242a,#121316);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line-soft);overflow:hidden}
.cover span{font-family:var(--font-m);font-weight:600;font-size:clamp(28px,2.6vw,40px);letter-spacing:.04em;color:rgba(255,255,255,.22);transition:color .2s,text-shadow .2s;white-space:nowrap}
.cover.c-amber span{color:rgba(245,168,60,.32)}
.cover.c-cyan span{color:rgba(67,220,236,.3)}
.gcard-body{display:flex;flex-direction:column;gap:9px;padding:18px 20px 20px;flex:1}
.gcard-body b{font-family:var(--font-d);font-size:18.5px;line-height:1.32;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.64em}
.gcard-body p{margin:0;font-size:15px;line-height:1.55;color:var(--dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard-meta{margin-top:auto;padding-top:10px;font-family:var(--font-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* CSS-only expander */
.more-toggle{display:none}
.more-cards{display:none}
.more-cards.card-grid{margin-top:20px}
.more-toggle:checked~.more-cards{display:grid}
.more-label{display:inline-flex;align-items:center;gap:8px;margin-top:22px;cursor:pointer;font-family:var(--font-m);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(245,168,60,.4);border-radius:6px;padding:11px 18px}
.more-label:hover{border-color:var(--amber)}
.more-toggle:checked~.more-label .show-more,.more-label .show-less{display:none}
.more-toggle:checked~.more-label .show-less{display:inline}

/* ---------- museum wing ---------- */
.museum{background:linear-gradient(180deg,var(--museum-bg),#231b0f);border-block:1px solid var(--museum-line);position:relative}
.museum::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 120px,rgba(216,184,119,.045) 120px 121px)}
.museum .kicker{color:var(--pcb)}
.museum .band-head .tick{background:var(--pcb)}
.museum .band-head .band-all{color:var(--pcb)}
.museum .band-head .band-all:hover{color:var(--pcb-ink)}
.museum .band-blurb{color:#c9ba8f}
.museum .gcard{background:var(--museum-panel);border-color:var(--museum-line)}
.museum .gcard:hover{border-color:rgba(216,184,119,.5)}
.museum .cover{background:linear-gradient(135deg,#2c2314,#1c150b);border-bottom-color:var(--museum-line)}
.museum .cover span{color:rgba(216,184,119,.38)}
.museum .gcard:hover .cover span{color:var(--pcb-ink);text-shadow:0 0 22px rgba(216,184,119,.45)}
.museum .gcard-body p{color:#b3a381}
.museum .gcard-meta{color:var(--pcb-dim)}
.museum-flag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--museum-line);border-radius:12px;overflow:hidden;background:var(--museum-panel);margin-bottom:26px;color:var(--ink)}
.museum-flag:hover{border-color:rgba(216,184,119,.5);color:var(--ink)}
.museum-flag .mf-media{position:relative;min-height:280px}
.museum-flag .mf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88}
.museum-flag .mf-body{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:14px}
.museum-flag .mf-body .kicker{color:var(--pcb)}
.museum-flag h3{margin:0;font-size:clamp(26px,2.6vw,38px);line-height:1.1;font-weight:800}
.museum-flag p{margin:0;font-size:17px;line-height:1.6;color:#c9ba8f;text-wrap:pretty}
.museum-flag .mf-cta{margin-top:auto;padding-top:10px;font-family:var(--font-m);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--pcb)}
@media (max-width:860px){.museum-flag{grid-template-columns:1fr}.museum-flag .mf-media{min-height:200px}}

/* ---------- retailers ---------- */
.retail-rows{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel-2)}
.retail-row{display:grid;grid-template-columns:220px minmax(0,1fr) 230px;gap:24px;padding:22px 28px;align-items:baseline}
.retail-row+.retail-row{border-top:1px solid var(--line-soft)}
.retail-row .r-name{font-family:var(--font-d);font-weight:800;font-size:21px;color:var(--ink)}
.retail-row .r-name:hover{color:var(--cyan)}
.retail-row .r-note{margin:0;font-size:16.5px;line-height:1.55;color:var(--dim);text-wrap:pretty}
.retail-row .r-best{font-family:var(--font-m);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);text-align:right}
.retail-row .r-best:hover{color:var(--amber)}
@media (max-width:860px){.retail-row{grid-template-columns:1fr;gap:8px}.retail-row .r-best{text-align:left}}

/* ---------- supporters ---------- */
.supporters{background:var(--bg-deep);border-top:1px solid var(--line)}
.sponsor-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media (max-width:1180px){.sponsor-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.sponsor-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.sponsor-grid{grid-template-columns:repeat(2,1fr)}}
.sponsor{display:flex;flex-direction:column;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:18px 16px 15px;color:var(--dim);transition:border-color .18s}
.sponsor:hover{border-color:rgba(255,255,255,.26);color:var(--dim)}
.sponsor img{width:100%;height:44px;object-fit:contain;filter:grayscale(.2);opacity:.85}
.sponsor .sponsor-blurb{font-size:13px;line-height:1.45;color:var(--faint);min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sponsor:hover .sponsor-blurb{color:var(--dim)}

/* ---------- footer ---------- */
.site-foot{background:var(--bg-deep);border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) 0 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:clamp(20px,3vw,44px)}
@media (max-width:1020px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{margin:0 0 12px;font-family:var(--font-m);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-grid ul a{color:var(--dim);font-size:15px}
.foot-grid ul a:hover{color:var(--ink)}
.foot-brand p{margin:12px 0 0;color:var(--dim);font-size:15px;line-height:1.6;max-width:34ch;text-wrap:pretty}
.foot-line{margin-top:clamp(28px,4vw,44px);padding-top:20px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--font-m);font-size:12.5px;letter-spacing:.06em;color:var(--faint)}

/* ---------- article ---------- */
.post-hero{padding:clamp(44px,6vw,84px) 0 0}
.post-hero .kicker a{color:inherit}
.post-hero h1{margin:14px 0 0;font-size:clamp(34px,4vw,60px);line-height:1.06;font-weight:800;max-width:24ch}
.post-meta{margin-top:18px;font-family:var(--font-m);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px 14px}
.post-meta b{color:var(--dim);font-weight:600}
.article-figure{margin:clamp(26px,3.5vw,44px) 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel-2)}
.article-figure img{width:100%;aspect-ratio:21/9;object-fit:cover;opacity:.92}
.article-figure.portrait img{aspect-ratio:16/10}
.article-figure figcaption{padding:12px 18px;font-size:14.5px;color:var(--faint);font-family:var(--font-m);letter-spacing:.03em;border-top:1px solid var(--line-soft)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,72px);padding-bottom:clamp(40px,5vw,70px)}
.article-layout.no-rail{grid-template-columns:minmax(0,1fr)}
@media (max-width:1020px){.article-layout{grid-template-columns:minmax(0,1fr)}}
.article-body{max-width:75ch;padding-inline:0;font-size:19px;line-height:1.72}
.article-body p{margin:0 0 1.35em;color:var(--ink);text-wrap:pretty}
.article-body .lead{font-size:clamp(20px,1.6vw,23px);line-height:1.6;color:var(--dim);margin:0 0 1.6em}
.article-body>p.opener::first-letter{font-family:var(--font-d);font-weight:800;font-size:3.4em;line-height:.82;float:left;padding:.08em .12em 0 0;color:var(--amber)}
.article-body h2{margin:1.9em 0 .7em;font-size:clamp(24px,2vw,30px);font-weight:800;display:flex;gap:14px;align-items:baseline}
.article-body h2 .sec-n{font-family:var(--font-m);font-weight:600;font-size:.62em;color:var(--cyan);letter-spacing:.08em;flex:none}
.article-body h3{margin:1.6em 0 .6em;font-size:21px}
.article-body ul,.article-body ol{margin:0 0 1.35em;padding-left:1.3em;color:var(--ink)}
.article-body li{margin-bottom:.5em}
.article-body li::marker{color:var(--amber)}
.article-body strong{color:var(--ink)}
.article-body em{color:var(--dim)}
.pullquote{margin:2em 0;padding:0 0 0 26px;border-left:3px solid var(--amber)}
.pullquote p{font-family:var(--font-d);font-size:clamp(22px,1.9vw,27px);line-height:1.4;font-weight:700;color:var(--ink);margin:0}
.blockquote{margin:2em 0;padding:22px 26px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px}
.blockquote p{margin:0;font-size:18.5px;font-style:italic;color:var(--dim)}
.blockquote cite{display:block;margin-top:10px;font-family:var(--font-m);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-style:normal}
.callout{margin:2em 0;padding:20px 24px;background:rgba(67,220,236,.06);border:1px solid rgba(67,220,236,.3);border-radius:9px;position:relative}
.callout::before{content:"KEY TAKEAWAY";font-family:var(--font-m);font-size:11px;letter-spacing:.16em;color:var(--cyan)}
.callout p{margin:6px 0 0;font-size:17.5px;color:var(--ink)}
.note{margin:1.6em 0;padding:14px 18px;border-left:3px solid var(--cyan);background:var(--panel-2);border-radius:0 8px 8px 0;font-size:16.5px;color:var(--dim)}
/* by-the-numbers rail */
.bynumbers{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px;align-self:start}
.bynumbers .bn-head{font-family:var(--font-m);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding-bottom:10px;border-bottom:1px solid var(--line)}
.statrow{display:flex;flex-wrap:wrap;gap:14px;margin:2em 0}
.statblock{flex:1 1 150px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.stat-num{font-family:var(--font-d);font-weight:800;font-size:clamp(26px,2.2vw,34px);color:var(--amber);line-height:1.05}
.stat-label{font-size:14px;color:var(--dim);line-height:1.4}
.bynumbers .statblock{flex:none}
.bynumbers .stat-num{color:var(--cyan)}
@media (max-width:1020px){.bynumbers{position:static;flex-direction:row;flex-wrap:wrap;order:-1}.bynumbers .bn-head{width:100%}.bynumbers .statblock{flex:1 1 150px}}
/* timeline */
.timeline{list-style:none;margin:2em 0;padding:0;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:20px}
.timeline li{position:relative;padding-left:26px;display:flex;flex-direction:column;gap:3px}
.timeline li::before{content:"";position:absolute;left:-6px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--amber)}
.timeline .t-when{font-family:var(--font-m);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--amber)}
.timeline .t-what{font-size:16.5px;line-height:1.55;color:var(--dim);max-width:66ch;text-wrap:pretty}
/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:2em 0;font-size:16px}
.versus caption,.datatable caption{caption-side:top;text-align:left;font-family:var(--font-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-bottom:10px}
.versus th,.datatable th{font-family:var(--font-m);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:600}
.versus td,.datatable td{padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--dim);vertical-align:top;line-height:1.5}
.versus td:first-child,.datatable td:first-child{color:var(--ink);font-weight:600}
.versus thead th:not(:first-child){color:var(--amber)}
.table-scroll{overflow-x:auto}
@media (max-width:640px){.versus th,.datatable th{padding:8px 9px;font-size:11px}.versus td,.datatable td{padding:9px 9px;font-size:14.5px}}
/* charts */
.chart{margin:2em 0;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:20px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:12px;font-size:14.5px;color:var(--faint);font-family:var(--font-m)}
/* map frame (slot only — real geodata injected later) */
.map-figure{margin:2em 0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel-2)}
.map-slot{aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--panel-2) 0 14px,#191c20 14px 28px);color:var(--faint);font-family:var(--font-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.map-slot::after{content:none}
.map-figure figcaption{padding:12px 18px;font-size:14.5px;color:var(--faint);border-top:1px solid var(--line-soft)}
/* profiles / orgs */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:2em 0}
.profile-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:64px;height:64px;border-radius:8px;object-fit:cover}
.profile-card h3{margin:4px 0 0;font-size:19px}
.profile-card .p-role{margin:0;font-family:var(--font-m);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.profile-card p{margin:0;font-size:15px;line-height:1.55;color:var(--dim)}
.profile-card .p-links a{font-size:14px}
.profile-card.no-photo .p-photo{display:none}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:2em 0}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:16px;color:var(--ink)}
.org-card:hover{border-color:rgba(255,255,255,.26);color:var(--ink)}
.org-card .org-logo{width:auto;height:32px;object-fit:contain;align-self:flex-start;opacity:.85}
.org-card.no-logo .org-logo{display:none}
.org-card .org-name{font-family:var(--font-d);font-weight:700;font-size:16.5px}
.org-card .org-host{font-family:var(--font-m);font-size:12px;color:var(--faint);letter-spacing:.05em}
.entity-ref{border-bottom:1px dotted var(--amber-dim);white-space:nowrap}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:2em 0}
.gallery figure{margin:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel-2)}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;opacity:.92}
.gallery figcaption{padding:10px 14px;font-size:13.5px;color:var(--faint);font-family:var(--font-m)}
/* related / further */
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:1.4em 0 0}
.further-grid a{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:16px 18px;color:var(--ink);font-family:var(--font-d);font-weight:700;font-size:16.5px;line-height:1.35;display:flex;flex-direction:column;gap:6px}
.further-grid a:hover{border-color:var(--cyan)}
.further-grid .f-kicker{font-family:var(--font-m);font-weight:400;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.related-wrap{border-top:1px solid var(--line);padding:clamp(30px,4vw,48px) 0 clamp(44px,5vw,64px)}
.related-wrap h2{margin:0 0 6px;font-size:24px}
ul.related-links{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.related-links a{display:flex;gap:10px;align-items:baseline;font-size:17px}
ul.related-links a::before{content:"→";font-family:var(--font-m);color:var(--cyan)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.prevnext a{border:1px solid var(--line);border-radius:9px;padding:16px 18px;display:flex;flex-direction:column;gap:5px;color:var(--ink);background:var(--panel-2)}
.prevnext a:hover{border-color:var(--amber)}
.prevnext .pn-dir{font-family:var(--font-m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.prevnext .pn-title{font-family:var(--font-d);font-weight:700;font-size:16.5px;line-height:1.3}
.prevnext a.pn-next{text-align:right;align-items:flex-end}
@media (max-width:640px){.prevnext{grid-template-columns:1fr}.prevnext a.pn-next{text-align:left;align-items:flex-start}}

/* ---------- category pages ---------- */
.cat-hero{padding:clamp(48px,6vw,84px) 0 clamp(24px,3vw,40px)}
.cat-hero h1{margin:12px 0 0;font-size:clamp(36px,4.4vw,62px);font-weight:800;line-height:1.05}
.cat-hero p{margin:18px 0 0;font-size:clamp(17.5px,1.4vw,20px);line-height:1.65;color:var(--dim);max-width:68ch;text-wrap:pretty}
.cat-count{font-family:var(--font-m);font-size:13px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
ul.cat-list{list-style:none;margin:0;padding:0 0 clamp(48px,6vw,80px);display:flex;flex-direction:column}
ul.cat-list li{border-top:1px solid var(--line-soft)}
ul.cat-list li:last-child{border-bottom:1px solid var(--line-soft)}
ul.cat-list a{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,44%) 130px;gap:24px;align-items:baseline;padding:22px 4px;color:var(--ink)}
ul.cat-list a:hover{background:rgba(255,255,255,.025);color:var(--ink)}
ul.cat-list a:hover .cl-title{color:var(--cyan)}
.cl-glyph{font-family:var(--font-m);font-size:14px;color:var(--amber);letter-spacing:.06em;white-space:nowrap}
.cl-title{font-family:var(--font-d);font-weight:700;font-size:21px;line-height:1.3;transition:color .15s}
.cl-brief{font-size:15.5px;line-height:1.5;color:var(--dim)}
.cl-meta{font-family:var(--font-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:right;white-space:nowrap}
@media (max-width:900px){ul.cat-list a{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 4px}.cl-meta{text-align:left}}

/* ---------- static pages ---------- */
.page-body{padding-bottom:clamp(48px,6vw,84px)}
.page-body .article-body{margin-inline:0}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:2em 0}
.contact-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:8px}
.contact-card svg{color:var(--cyan)}
.contact-card b{font-family:var(--font-d);font-size:17px}
.contact-card p{margin:0;font-size:15px;color:var(--dim)}
.err-hero{min-height:56vh;display:flex;flex-direction:column;justify-content:center;padding:60px 0}
.err-hero .err-code{font-family:var(--font-m);font-size:clamp(64px,10vw,140px);font-weight:600;color:transparent;-webkit-text-stroke:2px var(--amber);line-height:1}
.err-hero h1{margin:10px 0 0;font-size:clamp(28px,3vw,44px)}
.err-hero p{color:var(--dim);font-size:18px;max-width:52ch}

/* ---------- styleguide ---------- */
.sg-section{border-top:1px solid var(--line);padding:clamp(36px,4vw,56px) 0}
.sg-section>h2{font-size:28px;margin:0 0 6px}
.sg-note{font-family:var(--font-m);font-size:13px;color:var(--faint);margin:0 0 26px;letter-spacing:.04em}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.5em 0}
.swatch{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.swatch .sw{height:74px}
.swatch figcaption{padding:10px 12px;font-family:var(--font-m);font-size:12px;color:var(--dim);letter-spacing:.04em}

/* scroll reveal */
.rev{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}}

/* op-grid-4up: operator asked for four marks per row, not six. Design's own ladder already steps
   to 4 at 1180px, so this only changes the widest step — every narrower breakpoint below is
   Design's and must keep winning, hence min-width rather than a bare rule. */
@media (min-width:1181px){
  .sponsor-grid{grid-template-columns:repeat(4,1fr)}
}

/* op-footer-compact: the footer printed 12 rows for 12 link(s) in
   3 list(s) — 800px at 390, 7% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 800 -> 573px (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.99vw,43px)!important;row-gap:6px!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:28px}
}

/* op-hover-pad */
ul.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--font-d); letter-spacing: -0.01em; text-wrap: balance;}
.chain-panel h2:where(.rt-h3){margin: 0px 0px 8px; font-size: 15px; font-family: var(--font-m); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan);}
.chain-panel h2:where(.rt-h3).h-amber{color: var(--amber);}
.museum-flag h2:where(.rt-h3){margin: 0px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; font-weight: 800;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.museum-flag > div.mf-media > img,
  article.article-body > figure.article-figure.portrait > img,
  div.gallery > figure > img,
  div.hero-in.wrap > figure.hero-fig > img,
  div.wrap > figure.article-figure > img){height:auto}
/* op-img-dims:end */