:root {
  --bg: #0b0b12;
  --ink: #9a9aa6;
  --ink-dim: #55556a;
  --mark: #2a1f5c;
  --link: #ff5fa2;
  --sep: #4b3f7a;
  --glow: rgba(180, 170, 255, 0.18);
  --rule: #33334a;
  /* longest line is ~18ch; Space Mono glyphs are ~0.61em wide */
  --size: clamp(2rem, 4.7vw, 6rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Space Mono", ui-monospace, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--link); color: var(--bg); }

.broadcast {
  position: relative;
  min-height: 100vh;
  padding: 4vh 5vw 6vh 40vw;
}

.copy {
  font-size: var(--size);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-shadow: 0 0 18px var(--glow);
  white-space: nowrap;
}

.line { display: block; }
.italic { font-style: italic; }
.indent-1 { padding-left: 2ch; }
.indent-2 { padding-left: 4ch; }
.indent-3 { padding-left: 9ch; }

mark {
  background: var(--mark);
  color: inherit;
  padding: 0 0.08em;
}

mark.channel {
  animation: flicker 4s infinite steps(1);
}

.rule {
  border: 0;
  border-top: 1px dotted var(--rule);
  margin: 0.25em 0;
}

.sep { color: var(--sep); margin-right: 0.4ch; }

.clock {
  margin-top: 0.9em;
  font-size: var(--size);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px var(--glow);
}

.on-air {
  font-size: 0.35em;
  vertical-align: middle;
  color: #ff3b3b;
  animation: blink 1.4s infinite steps(1);
}

.laptop {
  position: absolute;
  right: 6vw;
  bottom: 18vh;
  width: clamp(64px, 8vw, 120px);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  animation: bob 6s ease-in-out infinite;
}

.laptop-body { fill: #14141f; }
.laptop-screen { fill: var(--link); opacity: 0.85; animation: static 0.25s infinite steps(2); }

.footer {
  margin-top: 8vh;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes flicker { 0%, 92% { opacity: 1; } 93% { opacity: 0.2; } 95% { opacity: 1; } 97% { opacity: 0.4; } }
@keyframes static { 50% { opacity: 0.6; } }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}

@media (max-width: 760px) {
  :root { --size: 8.2vw; }
  .broadcast { padding: 6vh 16px 6vh; }
  .indent-3 { padding-left: 5ch; }
  .laptop { bottom: 10vh; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}