/* A show's own page (scripts/seo-static.mjs writes them): the home page's room and colors, simpler */
:root {
  --wallpaper: #1b2a2f;
  --room-text: #d8e3df;
  --room-muted: #9fb2ad;
  --station-blue: #1747a6;
  --station-navy: #0c2a66;
  --chrome: #f2c14e;
  --paper: #fff6dc;
  --pixel-font: "Pixelify Sans", system-ui, sans-serif;
  --broadcast-font: "Jersey 10", "Pixelify Sans", system-ui, sans-serif;
  --body-font: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0 16px 40px; background: var(--wallpaper); color: var(--room-text); font: 17px/1.55 var(--body-font); }
a { color: var(--chrome); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 880px; margin: 0 auto; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; font: 400 26px/1 var(--broadcast-font); }
.logo { padding: 4px 8px 6px; background: var(--station-blue); color: #fff; box-shadow: inset 0 -3px 0 #d8262f; }
.watch-top { font: 400 16px var(--pixel-font); }
main, footer { max-width: 880px; margin: 0 auto; }
.kicker { margin: 18px 0 4px; font: 400 15px var(--pixel-font); color: var(--room-muted); }
h1 { margin: 0; font: 400 52px/1 var(--broadcast-font); color: var(--paper); text-wrap: balance; }
.when { margin: 8px 0 0; font: 600 18px var(--body-font); color: var(--chrome); }
.lede { max-width: 65ch; font-size: 19px; }
.watch { display: inline-block; padding: 10px 18px; background: var(--chrome); color: #1a1206; font-weight: 700; text-decoration: none; border: 2px solid #8a6514; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.watch.replays { color: var(--paper); background: transparent; border-color: rgba(255, 255, 255, 0.3); }
h2 { margin: 34px 0 12px; font: 400 28px/1 var(--broadcast-font); color: var(--chrome); }
.hosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hosts li { display: grid; gap: 2px; padding: 12px; background: rgba(10, 16, 34, 0.55); }
.hosts canvas { width: 52px; height: 52px; margin-bottom: 6px; image-rendering: pixelated; background: var(--station-blue); box-shadow: 0 0 0 3px #0a1022; }
.hosts strong { font: 400 18px/1.1 var(--broadcast-font); color: var(--paper); }
.hosts span { font-size: 13px; color: var(--chrome); }
.hosts p { margin: 4px 0 0; font-size: 14px; color: var(--room-muted); }
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.others li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 6px 0; }
.others span { font-size: 13px; color: var(--room-muted); white-space: nowrap; }
footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; color: var(--room-muted); }
@media (max-width: 520px) { h1 { font-size: 40px; } }
.hosts strong a { color: inherit; text-decoration: none; } .hosts strong a:hover { color: var(--chrome); text-decoration: underline; }