/* Free Tier Booth: "broadcast rundown" theme. Tokens documented in visual-manifest.md */
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#16121b;--surface:#211a28;--surface-2:#2b2234;
  --ink:#f4ede3;--ink-muted:#c4b9cf;
  --onair:#ff5c39;--link:#ff9a7a;--vu:#a6e36a;--amber:#ffbf47;--rule:#5a4b68;
  --display:"Bricolage Grotesque","Arial Narrow",sans-serif;
  --body:"Atkinson Hyperlegible",Verdana,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:20px;--s5:32px;--s6:52px;--s7:84px;
  --radius:3px;--max:1180px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body)}
img,svg{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--onair);outline-offset:2px}
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.02em;margin:0 0 var(--s3)}
h1{font-weight:800;font-size:clamp(2rem,1.3rem + 3.2vw,3.4rem)}
h2{font-weight:800;font-size:clamp(1.5rem,1.15rem + 1.4vw,2.1rem)}
h3{font-weight:700;font-size:1.25rem}
p,ul,ol{margin:0 0 var(--s4)}
li{margin-bottom:var(--s2)}
code{font-family:var(--mono);font-size:.9em}

.skip{position:absolute;left:-9999px;top:0;background:var(--onair);color:var(--bg);padding:var(--s2) var(--s3);font-weight:700;z-index:10}
.skip:focus{left:var(--s3);top:var(--s3)}

/* ON AIR strip */
.strip{border-bottom:1px solid var(--rule);background:linear-gradient(90deg,var(--surface) 0,var(--bg) 70%)}
.strip-in{max-width:var(--max);margin:0 auto;padding:var(--s3) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
.lamp{display:inline-flex;align-items:center;gap:6px;font:700 .72rem/1 var(--mono);letter-spacing:.14em;color:var(--bg);background:var(--onair);padding:5px 8px;border-radius:var(--radius)}
.lamp::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bg)}
@media (prefers-reduced-motion:no-preference){.lamp::before{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.25}}
.nav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:0;padding:0;list-style:none}
.nav li{margin:0}
.nav a{color:var(--ink-muted);text-decoration:none;font:700 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:var(--s2) 0;display:inline-block;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--onair)}

/* disclosure cue on every page */
.cue{max-width:var(--max);margin:0 auto;padding:var(--s2) var(--s4);font-size:.9rem;color:var(--ink-muted)}
.cue strong{color:var(--amber);font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-right:var(--s2)}

/* layout with rundown rail */
.frame{max-width:var(--max);margin:0 auto;padding:var(--s5) var(--s4) var(--s6)}
.rail{margin-bottom:var(--s5);padding:var(--s4);background:var(--surface);border-left:3px solid var(--onair);border-radius:var(--radius)}
.rail h2{font:700 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--s3)}
.rail ol{margin:0;padding:0;list-style:none;counter-reset:seg}
.rail li{counter-increment:seg;margin:0 0 var(--s2)}
.rail li::before{content:counter(seg,decimal-leading-zero);font:700 .75rem var(--mono);color:var(--onair);margin-right:var(--s2)}
.rail a{color:var(--ink);text-decoration:none}
.rail a:hover{color:var(--link);text-decoration:underline}
@media (min-width:960px){
  .frame{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s6);align-items:start}
  .rail{position:sticky;top:var(--s4);margin-bottom:0}
}
main{min-width:0}

/* hero */
.kicker,.seg{font:700 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--onair);margin:0 0 var(--s3);display:block}
.lede{font-size:1.2rem;color:var(--ink);max-width:62ch}
.meta{font:400 .85rem/1.5 var(--mono);color:var(--ink-muted)}
.meta b{color:var(--vu);font-weight:700}

/* waveform rule (decorative) */
.wave{height:34px;margin:var(--s5) 0;background:repeating-linear-gradient(90deg,var(--rule) 0 3px,transparent 3px 7px);
  -webkit-mask:radial-gradient(ellipse 60% 100% at 30% 50%,#000 30%,transparent 72%),radial-gradient(ellipse 40% 90% at 75% 50%,#000 25%,transparent 70%);
  mask:radial-gradient(ellipse 60% 100% at 30% 50%,#000 30%,transparent 72%),radial-gradient(ellipse 40% 90% at 75% 50%,#000 25%,transparent 70%)}

section{margin-bottom:var(--s6)}
section>p,section>ul,section>ol{max-width:70ch}

/* badges */
.badge{display:inline-block;font:700 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:var(--radius);color:var(--bg);background:var(--vu);white-space:nowrap}
.badge.trial{background:var(--amber)}
.badge.oss{background:var(--ink-muted)}

/* track-list comparison table */
.tracks{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.98rem}
.tracks caption{text-align:left;font:700 .78rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);padding-bottom:var(--s2)}
.tracks th{font:700 .74rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);text-align:left;padding:var(--s2) var(--s3);background:var(--surface-2)}
.tracks td{background:var(--surface);padding:var(--s3);vertical-align:top}
.tracks td:first-child,.tracks th:first-child{border-left:4px solid var(--onair);font:700 .85rem var(--mono);color:var(--onair);width:3.2em}
.tracks tbody tr:nth-child(even) td:first-child{border-left-color:var(--vu);color:var(--vu)}
.tracks td:nth-child(2) a{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink)}
.tracks .src{font-size:.86rem}
.tracks time{font-family:var(--mono);font-size:.82rem;color:var(--ink-muted);white-space:nowrap}
@media (max-width:719px){
  .tracks,.tracks caption,.tracks tbody,.tracks tr,.tracks td{display:block;width:100%}
  .tracks thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tracks tr{margin-bottom:var(--s3);border-left:4px solid var(--onair);background:var(--surface);border-radius:var(--radius)}
  .tracks tbody tr:nth-child(even){border-left-color:var(--vu)}
  .tracks td,.tracks td:first-child{border-left:0;width:auto;padding:var(--s2) var(--s3)}
  .tracks td[data-label]::before{content:attr(data-label);display:block;font:700 .7rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
}

/* tape-label tool entries */
.tape{background:var(--surface);border-radius:var(--radius);margin-bottom:var(--s4);overflow:hidden;scroll-margin-top:var(--s4)}
.tape-head{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:baseline;justify-content:space-between;padding:var(--s3) var(--s4);background:var(--surface-2);border-bottom:2px dashed var(--rule)}
.tape-head h3{margin:0}
.tape-head .cat{font:400 .8rem var(--mono);letter-spacing:.06em;color:var(--ink-muted);text-transform:uppercase}
.tape-body{padding:var(--s4)}
.tape-body ul{padding-left:1.2em}
.tape-foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);padding:var(--s3) var(--s4);border-top:1px solid var(--rule);font:400 .82rem/1.5 var(--mono);color:var(--ink-muted)}

/* callouts */
.caveat{border:1px solid var(--amber);border-left-width:4px;border-radius:var(--radius);padding:var(--s3) var(--s4);margin:0 0 var(--s4);max-width:70ch}
.caveat strong{color:var(--amber)}
.math{background:var(--surface);border-radius:var(--radius);padding:var(--s4);margin-bottom:var(--s4);max-width:72ch}
.math h3{font-size:1.1rem}

.picks{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:0;list-style:none}
.picks li{margin:0;background:var(--surface);padding:var(--s4);border-radius:var(--radius);border-top:3px solid var(--onair)}
.picks li:nth-child(2n){border-top-color:var(--vu)}
.picks li:nth-child(3n){border-top-color:var(--amber)}
.picks a{font-family:var(--display);font-weight:700;font-size:1.15rem}
.picks p{margin:var(--s2) 0 0;font-size:.95rem;color:var(--ink-muted)}

.srcs{width:100%;border-collapse:collapse;font-size:.92rem}
.srcs th,.srcs td{text-align:left;vertical-align:top;padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule)}
.srcs th{font:700 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.srcs td:first-child{font-family:var(--mono);white-space:nowrap;color:var(--onair)}
.scroll{overflow-x:auto}

/* station ID footer */
.station{border-top:1px solid var(--rule);background:var(--surface)}
.station-in{max-width:var(--max);margin:0 auto;padding:var(--s5) var(--s4);display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.station h2{font:700 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--onair);margin-bottom:var(--s3)}
.station p,.station li{font-size:.92rem;color:var(--ink-muted)}
.station ul{list-style:none;padding:0;margin:0}
.station li{margin-bottom:var(--s1)}

@media print{body{background:#fff;color:#000}.strip,.rail,.wave,.station{display:none}a{color:#000}}
.cap{text-align:left;padding-bottom:var(--s2)}
.cue p{margin:0}
@media (max-width:959px){.rail{display:none}}