/* Layout: one night-dark column. Signal bar, hero with headline in the image's empty sky, player, now playing, queue, log. */
:root {
  --bg: #0a0c0c; --panel: #111515; --line: #1f2827; --fg: #e9e3d2; --muted: #7d8582;
  --signal: #36d1c4; --signal-dim: #1b5f59; --hot: #ff5a3c;
  --display: "League Gothic", "Oswald", "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.55 var(--body); }
.wrap { max-width: 980px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.mono { font-family: var(--mono); }
.label { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* signal bar */
.bar { border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.bar img { width: 34px; height: 34px; }
.callsign { font: 400 26px/1 var(--display); letter-spacing: .06em; }
.freq { font: 600 13px/1 var(--mono); color: var(--signal); }
.pill { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 7px 10px; border: 1px solid var(--line); color: var(--muted); }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill.live { color: var(--hot); border-color: var(--hot); }
.pill.live i { background: var(--hot); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pill.live i { animation: none; } }

/* hero */
.hero { position: relative; border-bottom: 1px solid var(--line); background: #000; }
.hero img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 72vh; object-fit: cover; opacity: .9; }
.hero .copy { position: absolute; inset: 0; display: flex; align-items: center; }
.hero .copy .wrap { width: 100%; padding-block: 0 8%; display: grid; gap: 10px; }
.hero h1 { font: 400 clamp(48px, min(10vw, 12vh), 112px)/.9 var(--display); letter-spacing: .01em; margin: 0; max-width: 9ch; text-wrap: balance; }
.hero p { margin: 0; max-width: 44ch; color: #cfc9b8; font-size: 17px; }

main.wrap { display: grid; gap: 36px; padding-block: 32px 64px; }

/* player */
.player { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.play { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--signal); background: transparent; color: var(--signal); cursor: pointer; display: grid; place-items: center; }
.play:disabled { border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.play:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.play svg { width: 26px; height: 26px; fill: currentColor; }
.player .state { display: grid; gap: 6px; min-width: 0; }
.player .state strong { font: 400 30px/1 var(--display); letter-spacing: .03em; }
.vol { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.vol input { accent-color: var(--signal); width: 140px; }
.mute { border: 1px solid var(--signal); background: transparent; color: var(--signal); border-radius: 999px; padding: 6px 14px; font: inherit; cursor: pointer; min-height: 36px; }
.mute[aria-pressed="true"] { background: var(--signal); color: #000; }
.mute:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* now playing */
.now { display: grid; gap: 14px; padding: 22px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.now h2 { font: 400 clamp(36px, 6vw, 56px)/1 var(--display); margin: 0; letter-spacing: .02em; text-wrap: balance; }
.now .style { color: var(--muted); margin: 0; max-width: 70ch; font-size: 15px; }
.progress { height: 3px; background: var(--line); }
.progress div { height: 100%; width: 0; background: var(--signal); transition: width 1s linear; }
.receipt { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.receipt b { color: var(--fg); font-weight: 600; }
.receipt .x b { color: var(--signal); }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.cols section { display: grid; gap: 12px; align-content: start; min-width: 0; }
.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.list .t { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.list .m { font: 12px/1.3 var(--mono); color: var(--muted); grid-column: 1 / -1; font-variant-numeric: tabular-nums; }
.list .x { font: 600 13px/1.3 var(--mono); color: var(--signal); font-variant-numeric: tabular-nums; }
.list .rendering { color: var(--hot); }
.empty { color: var(--muted); font-size: 14px; margin: 0; }

footer { border-top: 1px solid var(--line); }
footer .wrap { padding-block: 22px 40px; display: flex; flex-wrap: wrap; gap: 10px 24px; font: 12px/1.5 var(--mono); color: var(--muted); }
a { color: var(--signal); }
footer .rnd { padding-block: 0 40px; margin-top: -22px; align-items: center; }
footer .rndtag { font: 600 11px/1 var(--mono); letter-spacing: .16em; color: var(--hot); border: 1px solid var(--hot); padding: 4px 7px; border-radius: 3px; }

/* Phone: the 16:9 image is too short to hold the headline, so the copy sits below it. */
@media (max-width: 640px) {
  .hero .copy { position: static; display: block; }
  .hero .copy .wrap { padding-block: 22px 26px; }
  .hero img { max-height: none; }
}

/* Narrow phones: keep the callsign and the on-air light on one line. */
@media (max-width: 430px) {
  .callsign { font-size: 22px; }
  .freq { display: none; }
}

/* YouTube live player: a click-to-load screen, so nothing from YouTube loads until a visitor tunes in. */
.watch { display: grid; gap: 10px; }
.screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--panel) url("img/emblem-192.png") center 30% / 88px no-repeat; border: 1px solid var(--line); }
.screen .tune { top: 62%; }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tune { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border: 2px solid var(--signal); background: rgba(10, 12, 12, .72); color: var(--signal);
  font: 400 28px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.tune svg { width: 22px; height: 22px; fill: currentColor; }
.tune:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.watchnote { margin: 0; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }