/* =========================================================
   STVMRGN V10 — "The site is the writing sample."
   Draft hero · screenplay scenes · channel-surf TV
   Loads after site.css; uses its tokens.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Exo+2:ital,wght@1,800;1,900&family=Mr+Dafoe&display=swap');

@font-face {
  font-family: 'DSEG14';
  src: url('../fonts/DSEG14Classic-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'DSEG7';
  src: url('../fonts/DSEG7Classic-Regular.woff2') format('woff2');
  font-display: swap;
}

/* =========================================================
   CHANNEL 84 — the Gen X broadcast theme.
   v10.css loads after site.css on every page, so re-declaring
   the site tokens here reskins the whole catalog at once.
   ========================================================= */
:root {
  --mono: 'Courier Prime', 'Courier New', monospace;
  --osd: 'DSEG14', 'Courier Prime', monospace;
  --chrome-display: 'Exo 2', 'Oswald', sans-serif;
  --neon-script: 'Mr Dafoe', 'Dancing Script', cursive;

  /* palette takeover: indigo night, neon cyan, arcade amber */
  --bg: #0a0716;
  --bg-panel: #110c20;
  --bg-panel-2: #161030;
  --bg-raise: #1c1538;

  --ink: #f3f1fa;
  --ink-dim: #a8a3bd;
  --ink-quiet: rgba(168, 163, 189, 0.74);
  --ink-whisper: rgba(168, 163, 189, 0.45);

  --gold: #ffb347;
  --gold-bright: #ffd07a;
  --gold-deep: #8a5a1c;
  --teal: #25e2ff;
  --teal-bright: #5df1ff;
  --teal-soft: rgba(37, 226, 255, 0.14);
  --teal-line: rgba(37, 226, 255, 0.45);
  --teal-glow: rgba(37, 226, 255, 0.16);

  --pink: #ff3df0;
  --violet: #8a3dff;

  --rule: rgba(37, 226, 255, 0.26);
  --rule-soft: rgba(37, 226, 255, 0.15);
  --rule-gold: rgba(255, 179, 71, 0.45);
}

/* faint CRT scanlines over everything — the station never sleeps */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
  opacity: 0.30;
  mix-blend-mode: multiply;
}

/* chrome lettering — the Back to the Future treatment.
   The gradient is taller than the text and drifts, so the
   metal catches light even when nothing else moves. */
.chrome {
  font-family: var(--chrome-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  background: linear-gradient(180deg,
    #f4fbff 0%, #bfe4ff 30%, #5d86c2 46%,
    #16234c 50%, #cfe9ff 54%, #7ba2d4 72%, #f8ffff 100%);
  background-size: 100% 240%;
  background-position: 50% 0%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 61, 240, 0.55))
    drop-shadow(0 -1px 0 rgba(255, 61, 240, 0.35))
    drop-shadow(0 0 16px rgba(255, 61, 240, 0.35))
    drop-shadow(0 0 44px rgba(138, 61, 255, 0.3));
  animation: chrome-sheen 7s ease-in-out infinite alternate;
}
@keyframes chrome-sheen {
  from { background-position: 50% 0%; }
  to { background-position: 50% 56%; }
}

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

/* ---------- nav: the ON AIR lamp ---------- */
.nav__onair {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: clamp(18px, 3vw, 42px);
  margin-right: auto;
  padding: 6px 12px 6px 8px;
  border: 1px solid rgba(255, 91, 73, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(84, 8, 12, 0.54), rgba(15, 7, 13, 0.72)),
    radial-gradient(circle at 18% 24%, rgba(255, 154, 128, 0.24), transparent 44%);
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 213, 0.18),
    inset 0 -10px 18px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(255, 59, 47, 0.12);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: #ffe4dc;
  text-transform: uppercase;
}
.nav__onair i {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 218, 204, 0.38);
  background:
    radial-gradient(circle at 34% 28%, #fff0d0 0 13%, #ff9987 18%, #ff3b2f 54%, #8d160f 100%);
  box-shadow:
    inset -4px -5px 7px rgba(82, 7, 5, 0.65),
    inset 2px 2px 5px rgba(255, 237, 211, 0.52),
    0 0 10px rgba(255, 59, 47, 0.95),
    0 0 22px rgba(255, 59, 47, 0.36);
  animation: onair-pulse 1.8s ease-in-out infinite;
}
.nav__onair i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 6px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 246, 220, 0.76);
  filter: blur(0.2px);
}
@keyframes onair-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(0.92);
    box-shadow:
      inset -4px -5px 7px rgba(82, 7, 5, 0.68),
      inset 2px 2px 5px rgba(255, 237, 211, 0.42),
      0 0 7px rgba(255, 59, 47, 0.7),
      0 0 14px rgba(255, 59, 47, 0.22);
  }
}
@media (max-width: 860px) { .nav__onair { display: none; } }

/* =========================================================
   SIGN ON — the WSTV hero
   ========================================================= */
.signon {
  position: relative;
  min-height: 94svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(96px, 14vh, 160px) 0 clamp(56px, 9vh, 110px);
}
.signon__wrap { width: 100%; }

/* the set warming up: one beat of static, then the picture */
.signon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0 1px, rgba(0, 0, 0, 0.55) 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 5px);
  animation: signon-static 0.48s steps(6) forwards;
}
@keyframes signon-static {
  0% { opacity: 1; background-position: 0 0, 0 0; }
  40% { opacity: 1; background-position: 0 7px, 9px 0; }
  80% { opacity: 0.6; background-position: 0 3px, 4px 0; }
  100% { opacity: 0; visibility: hidden; }
}

.signon__bars {
  width: clamp(150px, 24vw, 230px);
  height: 9px;
  border-radius: 2px;
  margin-bottom: clamp(20px, 4vh, 34px);
  background: linear-gradient(90deg,
    #c4c8d2 0 14.28%, #ffd24a 14.28% 28.56%, #25e2ff 28.56% 42.84%,
    #3ee06b 42.84% 57.12%, #ff3df0 57.12% 71.4%, #e8483e 71.4% 85.68%, #2e4bd8 85.68% 100%);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
}
.signon__slug { margin-bottom: 4px; }

.signon__logo {
  margin: 0;
  font-size: clamp(96px, 21vw, 230px);
  line-height: 0.88;
  letter-spacing: 0.01em;
  padding-right: 0.12em;
  position: relative;
  animation: chrome-sheen 7s ease-in-out infinite alternate, signon-rise 0.9s 0.18s var(--ease) both;
}
@keyframes signon-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* breathing backlight behind the call letters */
.signon__logo::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  background:
    radial-gradient(48% 70% at 38% 50%, rgba(255, 61, 240, 0.34), transparent 70%),
    radial-gradient(46% 64% at 68% 46%, rgba(138, 61, 255, 0.30), transparent 72%),
    radial-gradient(60% 50% at 50% 88%, rgba(37, 226, 255, 0.18), transparent 70%);
  filter: blur(30px);
  animation: signon-breathe 4.2s ease-in-out infinite alternate;
}
@keyframes signon-breathe {
  from { opacity: 0.55; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1.08); }
}

.signon__script {
  font-family: var(--display);
  font-size: clamp(18px, 2.7vw, 34px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  margin: 0;
  transform: none;
  text-shadow: none;
  animation: signon-rise 0.9s 0.28s var(--ease) both;
}
@keyframes signon-neon {
  0% { opacity: 0; text-shadow: none; }
  34% { opacity: 0; }
  40% { opacity: 1; }
  44% { opacity: 0.25; }
  49% { opacity: 1; }
  53% { opacity: 0.4; }
  60%, 100% {
    opacity: 1;
    text-shadow:
      0 0 5px rgba(255, 61, 240, 0.95),
      0 0 16px rgba(255, 61, 240, 0.6),
      0 0 38px rgba(255, 61, 240, 0.35);
  }
}

.signon__copy {
  max-width: 58ch;
  color: var(--ink-dim);
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.65;
  margin: clamp(22px, 4vh, 36px) 0 30px;
}
.signon__copy strong { color: var(--ink); }

/* neon grid horizon — for the open and the close */
.grid-horizon {
  position: relative;
}
.grid-horizon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 61, 240, 0.06) 55%, rgba(255, 61, 240, 0.12) 100%),
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(255, 61, 240, 0.16) 26px 27px),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(37, 226, 255, 0.10) 64px 65px);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 55%);
          mask: linear-gradient(180deg, transparent 0%, #000 55%);
  transform: perspective(340px) rotateX(48deg);
  transform-origin: 50% 100%;
  opacity: 0.5;
}

/* ---------- Screenplay sluglines ---------- */
.slug {
  font-family: var(--mono);
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 10px;
}
.slug .gold { color: var(--gold); }

.act-head {
  padding-top: clamp(56px, 9vw, 110px);
  padding-bottom: clamp(24px, 4vw, 44px);
}
.act-head__action {
  font-family: var(--mono);
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--ink-quiet);
  max-width: 56ch;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .chrome,
  .signon__logo,
  .signon__logo::before,
  .signon__script,
  .nav__onair i {
    animation: none;
  }
  .signon::after { display: none; }
}

/* ---------- Scenes (sticky cinematic stack) ---------- */
.scenes { position: relative; }
/* Each hold is taller than the viewport so its scene dwells fully visible
   before the next one slides up to cover it. */
.scene-hold { height: 175svh; }
.scene-hold:last-child { height: 100svh; }
.scene {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  border-top: 1px solid var(--rule-gold);
  background: var(--bg);
}
.scene__link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
.scene__bg {
  position: absolute;
  inset: 0;
  background-image: var(--scene-img);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 1200ms var(--ease);
}
.scene__link:hover .scene__bg,
.scene__link:focus-visible .scene__bg { transform: scale(1.0); }
.scene__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.05) 34%, rgba(11,11,12,0.18) 58%, rgba(11,11,12,0.92) 100%);
}
.scene__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(36px, 7vh, 80px);
}
/* content children are spans (valid inside <a>) — lay them out as blocks */
.scene__content > span { display: block; }
.scene__number {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
}
.scene__slug { color: var(--ink); text-shadow: 0 1px 14px rgba(0,0,0,0.6); }
.scene__title {
  font-size: clamp(40px, 7vw, 92px);
  line-height: 0.98;
  text-transform: uppercase;
  margin: 6px 0 14px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.scene__copy {
  max-width: 52ch;
  color: var(--ink);
  opacity: 0.92;
  font-size: clamp(15px, 1.8vw, 18px);
  margin: 0 0 16px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.65);
}
.scene__meta {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0;
}
.scene__meta .arrow { transition: transform var(--ease-fast); display: inline-block; }
.scene__link:hover .scene__meta .arrow { transform: translateX(6px); }

/* ---------- Home hero: the set, then tonight's lineup ----------
   The set and the lineup share one stage width so they read as a single
   piece of furniture. The stage is capped by viewport height as well as
   width — on a tall screen the whole thing clears the fold; on a short one
   it stops shrinking at 840px so the two guide columns stay readable. */
/* The set and the lineup share one stage width — the screen is exactly as
   wide as the two channel lists under it. On desktop the stage fills the
   content column, so the set lines up with every section below it. */
.signon--set .signon__wrap {
  --stage: 100%;
}
.hero-set {
  width: var(--stage, 100%);
  margin: 0 auto;
}
.hero-set .tv-ident {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050505;
  transition: opacity 320ms linear;
}
.hero-set .tv-ident[hidden] { display: none; }
.hero-set[data-tuned] .tv-ident { opacity: 0; pointer-events: none; }

/* Tonight's lineup — prime time beside late night */
.home-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.8vw, 40px);
  width: var(--stage, 100%);
  margin: clamp(12px, 1.5vw, 17px) auto 0;
}
.home-guide__col {
  border-top: 1px solid var(--rule-gold);
  padding-top: clamp(8px, 1.1vw, 12px);
  min-width: 0;
}
.home-guide__col .slug { margin-bottom: 4px; }
.home-guide__col h2 {
  margin: 0 0 3px;
  font-size: clamp(24px, 2.9vw, 36px);
  line-height: 0.92;
  text-transform: uppercase;
}
.home-guide__col h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
/* the plain-English gloss rides beside the heading instead of repeating it in an
   eyebrow above — 23 August, the eyebrow was saying the heading twice */
.home-guide__col h2 .what {
  font-family: var(--mono);
  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink-quiet);
}
.home-guide__col ul { list-style: none; margin: 0; padding: 0; }
/* The title gets the full column; the case-study link tucks onto the
   credit line beside it, so a row stays two tight lines. */
.home-guide__col li {
  position: relative;
  border-top: 1px solid var(--rule-soft);
}
.home-guide__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 5px 0;
  color: var(--ink);
  transition: background var(--ease-fast);
}
.home-guide__row:hover { background: rgba(255,255,255,0.03); }
.home-guide__row .ch {
  font-family: var(--osd);
  font-size: 16px;
  color: var(--gold);
}
.home-guide__row .show { min-width: 0; }
.home-guide__row b {
  display: block;
  font-family: var(--display);
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.home-guide__row em {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--ink-quiet);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* only reserve room when a notes link actually shares the credit line */
.home-guide__col li:has(.home-guide__notes) .home-guide__row em {
  padding-right: 116px;
}
.home-guide__row:hover b,
.home-guide__row:focus-visible b { color: var(--gold-bright); }
.home-guide__notes {
  position: absolute;
  right: 0;
  bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--teal-bright);
}
.home-guide__notes:hover { color: var(--gold-bright); }

/* the tuned channel reads as on-air, with no reflow */
.home-guide__col li.is-tuned {
  box-shadow: inset 2px 0 0 #41ff7a;
  background: rgba(65,255,122,0.045);
}
.home-guide__col li.is-tuned .ch {
  color: #41ff7a;
  text-shadow: 0 0 10px rgba(65,255,122,0.5);
}
.home-guide__col li.is-tuned b { color: #fff; }
.home-guide__col li.is-tuned em { color: var(--teal-bright); }

@media (max-width: 880px) {
  .hero-set { width: 100%; }
  .home-guide { grid-template-columns: 1fr; gap: 26px; }
  .home-guide__row b { font-size: 18px; }
  /* stacked columns have the vertical room to wrap rather than clip */
  .home-guide__row em { white-space: normal; overflow: visible; }
}
@media (max-width: 560px) {
  .tv-btn { padding: 9px 12px; }
  /* the call letters are already on the screen — no room to repeat them */
  .tv-controls__brand { display: none; }
}

/* ---------- Intermission (Brand on the Run) ---------- */
.intermission {
  border-top: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule-soft);
  background:
    radial-gradient(1100px 480px at 80% 0%, rgba(58,175,169,0.10), transparent 60%),
    var(--bg-panel);
}
.intermission__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(48px, 8vw, 100px) 0;
}
.intermission__title {
  font-size: clamp(38px, 5.6vw, 72px);
  text-transform: uppercase;
  line-height: 1;
  margin: 8px 0 16px;
}
.intermission__title .teal { color: var(--teal-bright); }
.intermission__copy { color: var(--ink-dim); max-width: 52ch; margin: 0 0 26px; }
.intermission__art {
  border: 1px solid var(--rule-gold);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: rotate(1.2deg);
  transition: transform 500ms var(--ease);
}
.intermission a:hover .intermission__art { transform: rotate(0deg) scale(1.02); }
@media (max-width: 880px) {
  .intermission__grid { grid-template-columns: 1fr; }
  .intermission__art { transform: none; max-width: 480px; }
}

/* ---------- TV (shared: teaser + full set) ---------- */
.tv-set {
  position: relative;
  background: #050505;
  border: 1px solid rgba(212,162,74,0.35);
  border-radius: 14px;
  padding: clamp(10px, 1.6vw, 18px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 40px 100px rgba(0,0,0,0.55);
}
.tv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
/* An <iframe> with no src is an about:blank document, and WebKit paints that
   OPAQUE WHITE — so on iOS the untuned home set showed a white rectangle where
   the picture should be. The broadcast look never revealed it because the ident
   video sits over the frame; the arcade look hides that video, which left the
   bare frame on top of the 8-bit title card. Keep the frame out of the paint
   until the set is actually tuned. Reported from a phone, 23 August. */
.hero-set:not([data-tuned]) [data-tv-frame] { visibility: hidden; }

.tv-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tv-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 1;
  transition: opacity 260ms linear;
}
.tv-static[data-off] { opacity: 0; pointer-events: none; }

/* scanline / vignette over everything */
.tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.14) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(0,0,0,0.42) 100%);
  border-radius: 6px;
}

.tv-osd {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  font-family: var(--osd);
  color: #41ff7a;
  text-shadow: 0 0 12px rgba(65,255,122,0.65);
  opacity: 0;
  transition: opacity 300ms linear;
}
.tv-osd.is-on { opacity: 1; }
.tv-osd__ch {
  position: absolute;
  top: 4.5%;
  right: 4%;
  font-size: clamp(20px, 3.4vw, 40px);
}
.tv-osd__label {
  position: absolute;
  left: 4%;
  bottom: 5.5%;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  max-width: 70%;
}

.tv-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: clamp(10px, 1.4vw, 16px);
}
.tv-controls__brand {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}
.tv-btn {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  padding: 10px 16px;
  border: 1px solid var(--rule-gold);
  border-radius: 6px;
  color: var(--ink);
  background: var(--bg-raise);
  transition: border-color var(--ease-fast), color var(--ease-fast), transform var(--ease-fast);
}
.tv-btn:hover { color: var(--gold-bright); border-color: var(--gold); }
.tv-btn:active { transform: translateY(1px); }

/* TV guide */
.tv-guide {
  margin: clamp(28px, 4vw, 44px) 0 0;
  border-top: 1px solid var(--rule-soft);
}
.tv-guide ul { list-style: none; margin: 0; padding: 0; }
.tv-guide li {
  display: flex;
  align-items: center;
  gap: 8px 20px;
}
.tv-guide li .tv-guide__row { flex: 1; }
.tv-guide li > .tv-guide__notes { border-bottom: 0; }
.tv-guide__daypart {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 22px 0 10px;
  margin: 0;
}
.tv-guide li { border-bottom: 1px solid var(--rule-soft); }
.tv-guide__row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: baseline;
  gap: 10px 20px;
  width: 100%;
  text-align: left;
  padding: 14px 4px;
  transition: background var(--ease-fast);
}
.tv-guide__row:hover { background: rgba(255,255,255,0.03); }
.tv-guide__row .ch {
  font-family: var(--osd);
  font-size: 17px;
  color: var(--gold);
}
.tv-guide__row .show {
  font-family: var(--display);
  font-size: clamp(17px, 2.2vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.tv-guide__row .show small {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-quiet);
  text-transform: none;
  margin-top: 2px;
}
.tv-guide__row .now {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--teal-bright);
  text-transform: uppercase;
  opacity: 0;
}
li.is-tuned .tv-guide__row .now { opacity: 1; }
li.is-tuned .tv-guide__row .ch { color: #41ff7a; text-shadow: 0 0 10px rgba(65,255,122,0.5); }
.tv-guide__notes {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-quiet);
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.tv-guide__notes:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 640px) {
  .tv-guide__row { grid-template-columns: 50px 1fr; }
  .tv-guide__row .now { display: none; }
}

/* Home teaser */
.tv-teaser { display: block; max-width: 880px; }
.tv-teaser .tv-screen { cursor: pointer; }
.tv-teaser__nosignal {
  position: absolute;
  z-index: 5;
  left: 4%;
  bottom: 6%;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 10px rgba(0,0,0,0.8);
}
.tv-teaser__cta {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 16px 0 0;
}
.tv-teaser:hover .tv-teaser__cta { color: var(--gold-bright); }

/* ---------- Act III — station break ---------- */
.station-break { border-top: 1px solid var(--rule-gold); }
.station-break__grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.station-card {
  position: relative;
  border: 1px solid var(--rule-gold);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent 28%),
    linear-gradient(145deg, #07060d, var(--bg-panel-2));
  box-shadow: 0 28px 70px -24px rgba(0,0,0,0.85), 0 0 34px rgba(37,226,255,0.1);
  padding: 18px;
}
.station-card__screen {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border: 8px solid #06050a;
  outline: 1px solid rgba(37,226,255,0.4);
  background:
    radial-gradient(80% 90% at 50% 45%, transparent 48%, rgba(0,0,0,0.48) 100%),
    linear-gradient(90deg, #c9c9cf 0 14.285%, #ffd24a 14.285% 28.57%, #25e2ff 28.57% 42.855%, #3ee06b 42.855% 57.14%, #ff3df0 57.14% 71.425%, #e8483e 71.425% 85.71%, #2e4bd8 85.71% 100%);
}
.station-card__screen::before,
.station-card__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.station-card__screen::before {
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.station-card__screen::after {
  background:
    linear-gradient(180deg, transparent 58%, rgba(0,0,0,0.7)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 6px);
}
.station-card__bars {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 26%;
  height: 16%;
  background:
    linear-gradient(90deg, #111 0 14.285%, #203 14.285% 28.57%, #022 28.57% 42.855%, #031 42.855% 57.14%, #303 57.14% 71.425%, #301 71.425% 85.71%, #012 85.71% 100%);
  opacity: 0.9;
}
.station-card__call {
  position: absolute;
  left: 8%;
  bottom: 38px;
  font-family: var(--osd);
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: 0.08em;
  color: #41ff7a;
  text-shadow: 0 0 14px rgba(65,255,122,0.62);
}
.station-card__caption {
  position: absolute;
  left: 9%;
  top: 18px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.86);
  text-transform: uppercase;
}
.station-card__controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-quiet);
  text-transform: uppercase;
}
.station-break__copy p {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.7;
  color: var(--ink-dim);
  margin: 0 0 1.2em;
}
.station-break__copy h2 {
  margin: 0 0 18px;
  max-width: 12ch;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(38px, 6.3vw, 78px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}
.station-break__kicker {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4 !important;
  color: var(--gold) !important;
  text-transform: uppercase;
}
.station-break__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
@media (max-width: 760px) {
  .station-break__grid { grid-template-columns: 1fr; }
  .station-card { max-width: 360px; }
  .station-card__screen { min-height: 230px; }
}

/* The home page runs straight from the last Off Screen piece into the footer
   now that the contact section is gone (29 August). A soft wash over the top of
   the footer keeps that seam from reading as an abrupt edge. Home page only —
   every other page still ends with its own section above the footer. */
.home-page .foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(110px, 16vh, 200px);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(212, 162, 74, 0.10) 0%,
    rgba(212, 162, 74, 0.035) 45%,
    transparent 100%);
}

/* ---------- Fade out ----------
   Unused since 29 August: the home page was the only page carrying .fadeout and
   its contact section is gone. Rules kept in place rather than pruned across
   three theme files for one deletion. */
.fadeout {
  border-top: 1px solid var(--rule-gold);
  padding: clamp(70px, 12vw, 140px) 0;
  background:
    radial-gradient(900px 420px at 50% 110%, rgba(212,162,74,0.08), transparent 65%),
    var(--bg);
  text-align: left;
}
.fadeout__title {
  font-size: clamp(48px, 9vw, 120px);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 14px 0 18px;
}
.fadeout__copy {
  font-family: var(--mono);
  color: var(--ink-quiet);
  max-width: 52ch;
  margin: 0 0 36px;
  font-size: clamp(14px, 1.7vw, 17px);
}
.fadeout__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  font-family: var(--display);
  font-size: clamp(20px, 3vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fadeout__contacts a {
  color: var(--ink);
  border-bottom: 2px solid var(--rule-gold);
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
.fadeout__contacts a:hover { color: var(--gold-bright); border-color: var(--gold); }

/* ---------- Print archive header on portfolio page ---------- */
.archive-head { padding-top: clamp(40px, 6vw, 76px); }

/* ---------- Case pages in screenplay dress ---------- */
.case-slug { margin-bottom: 14px; font-size: clamp(13px, 1.6vw, 16px); }
/* v10.css loads after site.css; same specificity wins the cascade */
.case-grid__label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Profile: the one-sheet + station ID ---------- */
.resume-hero--onesheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.onesheet-slug { margin-bottom: 18px; }

.station-id-hang {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.station-id {
  position: relative;
  margin: 26px 0 0;
  width: 100%;
  max-width: 340px;
  min-width: 0;
  box-sizing: border-box;
  padding: 34px 16px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #08080b, var(--bg-panel-2) 76%);
  border: 1px solid var(--rule-gold);
  box-shadow:
    0 24px 60px -18px rgba(0, 0, 0, 0.82),
    0 0 34px rgba(37, 226, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform-origin: 50% -28px;
  animation: station-id-sway 7s ease-in-out infinite;
}
.station-id:hover { animation-duration: 2.6s; }
@keyframes station-id-sway {
  0%, 100% { transform: rotate(1.15deg); }
  50% { transform: rotate(-1.15deg); }
}
.station-id__strap {
  position: absolute;
  left: 50%;
  top: -34px;
  width: 18px;
  height: 42px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.28), transparent 22% 78%, rgba(0,0,0,0.32)),
    repeating-linear-gradient(180deg, var(--teal) 0 7px, #15555b 7px 14px);
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(37, 226, 255, 0.22);
}
.station-id__clip {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 58px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: #060607;
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.07);
}
.station-id__label,
.station-id__meta,
.station-id__ticker {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
}
.station-id__label {
  margin: 4px 0 10px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-align: center;
}
.station-id__screen {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 7px solid #0b0b0d;
  outline: 1px solid rgba(37, 226, 255, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 24px rgba(37, 226, 255, 0.14);
  background:
    radial-gradient(90% 90% at 50% 44%, transparent 48%, rgba(0,0,0,0.55) 100%),
    linear-gradient(90deg, #c9c9cf 0 14.285%, #ffd24a 14.285% 28.57%, #25e2ff 28.57% 42.855%, #3ee06b 42.855% 57.14%, #ff3df0 57.14% 71.425%, #e8483e 71.425% 85.71%, #2e4bd8 85.71% 100%);
}
.station-id__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.14) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 50%, transparent 54%, rgba(0,0,0,0.52) 100%);
}
.station-id__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.62)),
    linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.18));
}
.station-id__bars {
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 8%;
  bottom: 18%;
  height: 18%;
  background:
    linear-gradient(90deg, #111 0 14.285%, #203 14.285% 28.57%, #022 28.57% 42.855%, #031 42.855% 57.14%, #303 57.14% 71.425%, #301 71.425% 85.71%, #012 85.71% 100%);
  opacity: 0.82;
}
.station-id__bug {
  position: absolute;
  z-index: 5;
  left: 14px;
  bottom: 12px;
  color: #41ff7a;
  font-family: var(--osd);
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(65,255,122,0.56);
}
.station-id__meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 8px;
  color: #41ff7a;
  font-family: var(--osd);
  font-size: clamp(14px, 1.8vw, 20px);
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(65,255,122,0.5);
}
.station-id__meta span + span {
  color: var(--teal-bright);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  align-self: center;
  text-align: right;
  text-shadow: none;
}
.station-id__name {
  display: block;
  font-family: var(--display);
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 0.95;
}
.station-id__ticker {
  display: block;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
@media (max-width: 720px) {
  .resume-hero--onesheet { grid-template-columns: 1fr; }
  .station-id-hang { justify-content: flex-start; padding-left: 10px; }
  .station-id {
    max-width: 100%;
    min-width: 0;
    animation: none;
    transform: none;
  }
  .station-id__meta { align-items: flex-start; }
  .station-id__ticker { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .station-id { animation: none; }
}

/* ---------- Profile: vintage STV Guide cover ---------- */
.tvguide-cover-hang {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.tvguide-cover {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 0.72;
  margin: 14px 0 0;
  overflow: hidden;
  border-radius: 4px;
  background: #130d12;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 28px 65px -18px rgba(0,0,0,0.86),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 1px rgba(0,0,0,0.4);
  transform-origin: 50% -24px;
  animation: tvguide-cover-look 7s ease-in-out infinite;
}
.tvguide-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(0,0,0,0.28), transparent 26% 70%, rgba(0,0,0,0.3)),
    radial-gradient(120% 90% at 52% 42%, transparent 55%, rgba(0,0,0,0.42));
  mix-blend-mode: multiply;
}
.tvguide-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255,255,255,0.16), transparent 22% 64%, rgba(255,255,255,0.06)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
  opacity: 0.55;
}
@keyframes tvguide-cover-look {
  0%, 100% { transform: rotate(0.8deg) translateY(0); }
  50% { transform: rotate(-0.8deg) translateY(2px); }
}
.tvguide-cover__photo {
  position: absolute;
  inset: 0;
  min-height: 0;
  z-index: 1;
  background: #050505;
}
.tvguide-cover__photo .resume-portrait__still,
.tvguide-cover__photo .resume-portrait__video {
  object-position: 55% 18%;
  filter: saturate(0.95) contrast(1.08) brightness(0.78);
}
.tvguide-cover__photo .resume-portrait__video {
  filter: saturate(1.02) contrast(1.04) brightness(0.88);
}
.tvguide-cover__date,
.tvguide-cover__price,
.tvguide-cover__mast,
.tvguide-cover__line,
.tvguide-cover__cast,
.tvguide-cover__feature,
.tvguide-cover__barcode {
  position: absolute;
  z-index: 8;
}
.tvguide-cover__date,
.tvguide-cover__price,
.tvguide-cover__cast {
  font-family: var(--mono);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.86);
}
.tvguide-cover__date {
  top: 8px;
  left: 14px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.tvguide-cover__price {
  top: 8px;
  right: 13px;
  color: #fff;
  font-size: 11px;
}
.tvguide-cover__mast {
  top: 28px;
  left: 14px;
  width: 136px;
  padding: 8px 11px 9px;
  border-radius: 8px;
  background: #ec211c;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.34);
}
.tvguide-cover__mast span,
.tvguide-cover__mast b {
  display: block;
  font-family: var(--chrome-display);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.tvguide-cover__mast span {
  font-size: 58px;
  font-weight: 900;
}
.tvguide-cover__mast b {
  margin-top: 3px;
  font-size: 25px;
  font-weight: 800;
}
.tvguide-cover__line--top {
  top: 18px;
  right: 14px;
  width: 150px;
  color: #fbff5c;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  line-height: 0.92;
  text-align: right;
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(0,0,0,0.82);
}
.tvguide-cover__cast {
  top: 132px;
  left: 16px;
  width: 126px;
  color: #fff;
  font-size: 9px;
  line-height: 1.25;
}
.tvguide-cover__feature {
  right: 16px;
  bottom: 36px;
  width: 168px;
  color: #fff;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 0.95;
  text-align: right;
  text-transform: uppercase;
  text-shadow:
    0 2px 2px rgba(0,0,0,0.82),
    0 0 12px rgba(37,226,255,0.22);
}
.tvguide-cover__barcode {
  left: 16px;
  bottom: 20px;
  width: 58px;
  height: 94px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    #fff;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.42);
}
.tvguide-cover__barcode::before {
  content: "";
  position: absolute;
  inset: 10px 6px 18px;
  background:
    repeating-linear-gradient(90deg,
      #111 0 2px, transparent 2px 4px,
      #111 4px 5px, transparent 5px 8px,
      #111 8px 11px, transparent 11px 13px,
      #111 13px 14px, transparent 14px 18px);
}
.tvguide-cover__barcode::after {
  content: "0 1714358";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  color: #111;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: -0.08em;
}
@media (max-width: 720px) {
  .resume-hero--onesheet { grid-template-columns: 1fr; }
  .tvguide-cover-hang { justify-content: flex-start; padding-left: 10px; }
  .tvguide-cover {
    width: min(100%, 310px);
    animation: none;
    transform: none;
  }
  .tvguide-cover__mast { width: 118px; }
  .tvguide-cover__mast span { font-size: 50px; }
  .tvguide-cover__mast b { font-size: 22px; }
  .tvguide-cover__line--top {
    width: 128px;
    font-size: 21px;
  }
  .tvguide-cover__feature {
    width: 152px;
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tvguide-cover { animation: none; }
}

/* ---------- Film pages: late-night broadcast frame ---------- */
.film--tv {
  background: transparent;
  border: 0;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.film-tv {
  margin: 0 auto;
  width: min(100%, 980px);
}
.film-tv .tv-controls {
  justify-content: flex-end;
}
.film-tv .tv-controls__brand {
  margin-left: 0;
}

/* ---------- Call Now: end-of-broadcast infomercial ---------- */
.callnow-card {
  position: relative;
  margin: clamp(54px, 8vh, 96px) 0 clamp(22px, 3vh, 38px);
  min-height: clamp(480px, 62vh, 660px);
  padding: clamp(32px, 7vw, 84px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--rule-gold);
  border-radius: 14px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 4px),
    radial-gradient(70% 80% at 74% 18%, rgba(255,61,240,0.20), transparent 58%),
    radial-gradient(80% 70% at 12% 18%, rgba(64,111,255,0.46), transparent 64%),
    linear-gradient(145deg, #081a8a 0%, #1737cf 42%, #080712 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}
.callnow-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  border: 1px solid rgba(255,179,71,0.38);
  border-radius: 9px;
}
.callnow-card .slug {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
}
.callnow-card h1 {
  position: relative;
  z-index: 1;
  max-width: min(100%, 980px);
  margin: 0 auto clamp(18px, 2.8vw, 30px);
  font-family: var(--display);
  font-style: normal;
  font-weight: 900;
  font-size: clamp(43px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: #ffe45f;
  text-align: center;
  text-shadow:
    0 2px 0 #fff8b8,
    3px 4px 0 #ef6b1a,
    6px 8px 0 #07134e,
    9px 12px 0 rgba(0,0,0,0.58),
    0 0 18px rgba(255,228,95,0.18);
  white-space: nowrap;
  transform: none;
  transform-origin: left bottom;
}
.callnow-card__burst {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 3vw, 30px);
  right: clamp(12px, 2.4vw, 28px);
  display: grid;
  place-items: center;
  width: clamp(60px, 7vw, 84px);
  aspect-ratio: 1;
  border: 3px solid #fff7b6;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #fff6a6 0 12%, transparent 13%),
    radial-gradient(circle, #ff3f25 0 46%, #bf0f1a 47% 100%);
  color: #fff7b6;
  font-family: var(--chrome-display);
  font-size: clamp(20px, 3.2vw, 36px);
  font-style: italic;
  font-weight: 900;
  line-height: 0.84;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(10deg);
  box-shadow:
    0 5px 0 #07134e,
    0 14px 26px rgba(0,0,0,0.46);
  text-shadow:
    2px 2px 0 #07134e,
    4px 4px 0 rgba(0,0,0,0.42);
}
.callnow-card__screen {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  width: min(100%, 720px);
  max-width: 720px;
  padding: 0;
  text-align: center;
}
.callnow-card__screen::before {
  content: "CALL TOLL FREE";
  display: block;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #07134e,
    4px 4px 0 rgba(0,0,0,0.48);
}
.callnow-card__cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 1.1vw, 12px);
  margin: -2px 0 4px;
}
.cc {
  display: inline-grid;
  place-items: center;
  min-width: clamp(38px, 5.4vw, 58px);
  height: clamp(24px, 3.4vw, 34px);
  padding: 0 7px;
  border: 2px solid #f8f3df;
  border-radius: 3px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(10px, 1.25vw, 14px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.46),
    2px 2px 0 rgba(0,0,0,0.44);
}
.cc--visa {
  background: linear-gradient(180deg, #213aa5 0 46%, #fff 46% 58%, #d59725 58%);
}
.cc--mc {
  background:
    radial-gradient(circle at 42% 50%, #e13b24 0 33%, transparent 34%),
    radial-gradient(circle at 58% 50%, #f3b322 0 33%, transparent 34%),
    #202038;
}
.cc--amex {
  background: linear-gradient(180deg, #43c6d7, #14556c);
}
.cc--disc {
  background: linear-gradient(90deg, #202020, #4e4e38 52%, #c4a64d);
}
.callnow-card__screen a {
  width: 100%;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(16px, 2.2vw, 27px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #07134e,
    4px 4px 0 rgba(0,0,0,0.46);
  overflow-wrap: anywhere;
}
.callnow-card__screen p {
  margin: 6px 0 0;
  color: #fff36a;
  font-family: var(--display);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #07134e,
    4px 4px 0 rgba(0,0,0,0.44);
}
.callnow-card__screen a:first-child {
  color: #fff36a;
  font-family: var(--chrome-display);
  font-style: italic;
  font-size: clamp(42px, 7.2vw, 88px);
  font-weight: 900;
  letter-spacing: 0.025em;
  line-height: 0.88;
  text-shadow:
    2px 2px 0 #fbf7be,
    5px 5px 0 #07134e,
    8px 8px 0 rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow-wrap: normal;
}
.callnow-card__screen a:hover {
  color: #fff36a;
}
.callnow-card__fineprint {
  position: relative;
  z-index: 1;
  margin: clamp(20px, 4vw, 34px) auto 0;
  width: min(100%, 720px);
  max-width: 720px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(14px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #07134e,
    4px 4px 0 rgba(0,0,0,0.45);
}
.callnow-card__fineprint span {
  display: block;
}
@media (max-width: 640px) {
  .callnow-card {
    margin: 34px 0 12px;
    min-height: 0;
    padding: 96px 24px 30px;
  }
  .callnow-card h1 {
    max-width: 11ch;
    font-size: clamp(29px, 8.1vw, 38px);
    line-height: 1;
  }
  .callnow-card h1 span {
    display: block;
  }
  .callnow-card__burst {
    top: 12px;
    right: 12px;
    width: 60px;
    font-size: 14px;
  }
  .callnow-card__screen a {
    font-size: clamp(13px, 4.2vw, 18px);
  }
  .callnow-card__screen a:first-child {
    font-size: clamp(31px, 9.4vw, 42px);
    letter-spacing: 0.01em;
  }
  .callnow-card__cards {
    flex-wrap: wrap;
  }
  .callnow-card__screen p {
    font-size: clamp(13px, 4vw, 17px);
  }
}

/* ---------- Home: WSTV lobby sign ---------- */
body.home-page .signon {
  min-height: 0;
  align-items: flex-start;
  padding: clamp(54px, 8vh, 92px) 0 clamp(18px, 3vh, 32px);
  background:
    radial-gradient(900px 420px at 72% 20%, rgba(37, 226, 255, 0.18), transparent 68%),
    radial-gradient(760px 380px at 8% 18%, rgba(255, 61, 240, 0.12), transparent 64%),
    radial-gradient(620px 320px at 24% 34%, rgba(255, 179, 71, 0.11), transparent 68%),
    linear-gradient(180deg, rgba(245, 245, 245, 0.035), transparent 22%),
    var(--bg);
}
body.home-page .signon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 72px),
    radial-gradient(1200px 460px at 50% 100%, rgba(0, 0, 0, 0.62), transparent 72%);
  opacity: 0.75;
}
body.home-page .signon::after {
  display: none;
}
body.home-page .signon__wrap {
  position: relative;
  z-index: 2;
}
body.home-page .signon__bars {
  width: clamp(190px, 26vw, 320px);
  height: 7px;
  margin-bottom: clamp(18px, 3vh, 28px);
  border-radius: 999px;
  background:
    linear-gradient(90deg, #ffb347 0 24%, #25e2ff 24% 52%, #ff3df0 52% 74%, #f3f3f3 74% 100%);
  box-shadow:
    0 0 22px rgba(79, 209, 204, 0.22),
    0 0 34px rgba(212, 162, 74, 0.16),
    0 3px 0 rgba(0,0,0,0.38);
}
body.home-page .signon__slug {
  display: grid;
  gap: 6px;
  margin-bottom: clamp(16px, 2.4vh, 26px);
  color: rgba(245, 245, 245, 0.62);
}
body.home-page .signon__slug span {
  display: block;
}
body.home-page .signon__slug .gold {
  color: var(--gold-bright);
  letter-spacing: 0.12em;
}
body.home-page .signon__ident {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) clamp(68px, 8vw, 112px);
  grid-template-areas:
    "call channel"
    "script script";
  align-items: stretch;
  gap: clamp(12px, 1.8vw, 22px);
  width: min(100%, 1040px);
  margin: 0;
  padding: clamp(26px, 4vw, 48px);
  overflow: hidden;
  border: 2px solid rgba(255, 179, 71, 0.42);
  border-radius: 18px 6px 18px 6px;
  background:
    linear-gradient(130deg, rgba(255,255,255,0.11), transparent 25% 72%, rgba(255,255,255,0.055)),
    linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, 0.08) 45%, transparent 52%),
    radial-gradient(80% 120% at 18% 16%, rgba(255, 61, 240, 0.11), transparent 58%),
    radial-gradient(70% 110% at 84% 8%, rgba(37, 226, 255, 0.12), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(180deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(19, 19, 22, 0.95), rgba(7, 7, 9, 0.96));
  box-shadow:
    0 38px 90px -28px rgba(0, 0, 0, 0.9),
    0 0 0 8px rgba(255,255,255,0.025),
    0 0 38px rgba(255, 61, 240, 0.075),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.8);
  transform: perspective(900px) rotateX(2deg) rotate(-0.45deg);
  transform-origin: center bottom;
}
body.home-page .signon__ident::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(93, 241, 255, 0.28);
  border-radius: 13px 4px 13px 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 179, 71, 0.16),
    inset 0 0 28px rgba(37, 226, 255, 0.045);
  pointer-events: none;
}
body.home-page .signon__ident::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -42%;
  height: 32%;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.06) 25%, rgba(93,241,255,0.14) 48%, rgba(255,61,240,0.08) 58%, transparent 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: signon-tracking-roll 7.5s linear infinite;
}
body.home-page .signon__ident--video {
  display: block;
  width: min(100%, 1040px);
  padding: 0;
  aspect-ratio: 1200 / 630;
  background: #050505;
}
body.home-page .signon__ident--video::before {
  z-index: 2;
}
body.home-page .signon__ident--video::after {
  z-index: 3;
}
body.home-page .signon__video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.03);
}
@keyframes signon-tracking-roll {
  0% { transform: translateY(-24%); opacity: 0; }
  10% { opacity: 0.72; }
  82% { opacity: 0.72; }
  100% { transform: translateY(520%); opacity: 0; }
}
body.home-page .signon__call {
  grid-area: call;
  position: relative;
  z-index: 2;
  color: #fff0a4;
  font-family: var(--chrome-display);
  font-style: italic;
  font-size: clamp(86px, 16vw, 218px);
  font-weight: 900;
  line-height: 0.74;
  letter-spacing: -0.02em;
  text-shadow:
    -3px 0 0 rgba(37,226,255,0.68),
    3px 0 0 rgba(255,61,240,0.52),
    0 3px 0 #5f461d,
    6px 8px 0 rgba(20, 8, 54, 0.9),
    10px 14px 18px rgba(0,0,0,0.68),
    0 0 24px rgba(255, 208, 122, 0.16);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,0.46));
  transform: skewX(-5deg) rotate(-1.2deg);
  transform-origin: 4% 85%;
}
body.home-page .signon__call::after {
  content: "";
  position: absolute;
  left: 4%;
  right: -4%;
  bottom: -14px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb347 0 13%, #25e2ff 24% 68%, rgba(245,245,245,0.8));
  box-shadow:
    4px 5px 0 rgba(255,61,240,0.22),
    0 0 18px rgba(79,209,204,0.24);
}
body.home-page .signon__channel {
  grid-area: channel;
  position: relative;
  z-index: 2;
  display: flex;
  min-width: clamp(68px, 8vw, 112px);
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border: 2px solid rgba(93, 241, 255, 0.58);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 12%, rgba(93,241,255,0.22), transparent 54%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(37,226,255,0.13), rgba(0,0,0,0.36));
  color: var(--teal-bright);
  font-family: var(--display);
  font-size: clamp(20px, 2.9vw, 38px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow:
    0 0 10px rgba(93,241,255,0.62),
    2px 0 0 rgba(255,61,240,0.24);
  box-shadow:
    inset 0 0 22px rgba(79,209,204,0.12),
    0 14px 30px rgba(0,0,0,0.34);
  transform: rotate(0.9deg);
}
body.home-page .signon__script {
  grid-area: script;
  position: relative;
  z-index: 6;
  display: block;
  width: 100%;
  margin-top: clamp(10px, 1.6vw, 18px);
  padding: clamp(12px, 1.8vw, 18px) clamp(14px, 2vw, 22px);
  border-left: 0;
  border-top: 2px solid rgba(255, 179, 71, 0.36);
  border-left: 5px solid rgba(255, 61, 240, 0.42);
  background:
    linear-gradient(90deg, rgba(255,179,71,0.18), rgba(37,226,255,0.11) 52%, rgba(255,61,240,0.08)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 5px);
  color: var(--gold-bright);
  font-family: var(--chrome-display);
  font-style: italic;
  font-size: clamp(19px, 2.8vw, 36px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow:
    -2px 0 0 rgba(37,226,255,0.36),
    2px 2px 0 rgba(92, 26, 96, 0.64),
    0 0 18px rgba(212,162,74,0.16);
  animation: none;
  transform: rotate(-0.25deg);
}
body.home-page .signon__actions {
  margin-top: clamp(20px, 3vh, 32px);
}
body.home-page .signon + section .act-head {
  padding-top: clamp(18px, 2.6vw, 34px);
  padding-bottom: clamp(20px, 3vw, 34px);
}

@media (max-width: 720px) {
  body.home-page .signon {
    min-height: 0;
    padding: 46px 0 18px;
  }
  body.home-page .signon__bars {
    width: 180px;
    margin-bottom: 18px;
  }
  body.home-page .signon__slug {
    margin-bottom: 16px;
    font-size: 9px;
    letter-spacing: 0.16em;
    line-height: 1.55;
  }
  body.home-page .signon__slug .gold {
    letter-spacing: 0.1em;
  }
  body.home-page .signon__ident {
    grid-template-columns: minmax(0, 1fr) 62px;
    gap: 8px;
    width: 100%;
    padding: 16px 14px 14px;
    transform: none;
  }
  body.home-page .signon__ident--video {
    display: block;
    padding: 0;
  }
  body.home-page .signon__ident::before {
    inset: 8px;
  }
  body.home-page .signon__call {
    font-size: clamp(70px, 24vw, 104px);
    line-height: 0.78;
  }
  body.home-page .signon__call::after {
    bottom: -8px;
    height: 6px;
  }
  body.home-page .signon__channel {
    min-width: 62px;
    font-size: 19px;
    padding: 8px 5px;
  }
  body.home-page .signon__script {
    margin-top: 4px;
    padding: 10px 11px;
    background: rgba(16, 16, 18, 0.86);
    color: #ffd07a;
    font-size: clamp(15px, 5.3vw, 21px);
    line-height: 1.08;
    letter-spacing: 0.075em;
    text-shadow: 0 1px 10px rgba(255,208,122,0.18);
  }
  body.home-page .signon__actions {
    margin-top: 18px;
  }
  body.home-page .signon + section .act-head {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  body.home-page .home-guide {
    gap: 22px;
  }
}

/* ---------- Home: the set as hero ----------
   Everything above the fold, so the signon furniture gives up its padding. */
body.home-page .signon--set {
  padding: clamp(12px, 1.6vh, 18px) 0 clamp(28px, 4vh, 44px);
}
body.home-page .signon--set .signon__bars {
  width: clamp(130px, 14vw, 180px);
  height: 5px;
  margin-bottom: clamp(7px, 1vh, 11px);
}
/* the slugline runs as one line beside the bars-width, not a stacked block */
body.home-page .signon--set .signon__slug {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: clamp(8px, 1.3vh, 14px);
}

@media (max-width: 880px) {
  body.home-page .signon--set { padding: 26px 0 40px; }
}

/* ---------- Footer: name and resume on one line ---------- */
/* The link takes the footer row's own type treatment so it reads as part of
   the colophon, not as a button that wandered down here. */
.foot__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 28px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.foot__head .foot__tag { margin-bottom: 0; }
/* The footer name is a mailto. Note `.foot p` already out-specifies .foot__tag
   in site.css, so this name has always rendered at 15px body size, not the 24px
   the .foot__tag rule suggests — the link inherits that same computed size so it
   sits identically to how it read before. These rules are scoped under .foot only
   to beat `.foot a`, which would otherwise recolour it teal on hover. The
   envelope is sized in em, so it tracks the type in every look, including arcade
   where .foot__tag drops to 11px. */
.foot .foot__mail {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-decoration: none;
}
.foot .foot__mail-icon {
  width: 0.82em;
  height: 0.82em;
  flex: none;
  color: var(--gold);
  transition: color var(--ease-fast), transform var(--ease-fast);
}
.foot .foot__mail:hover,
.foot .foot__mail:focus-visible { color: var(--gold-bright); }
.foot .foot__mail:hover .foot__mail-icon,
.foot .foot__mail:focus-visible .foot__mail-icon { color: var(--gold-bright); transform: translateY(-1px); }

.foot__resume {
  font-family: var(--body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--rule-gold);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
.foot__resume:hover,
.foot__resume:focus-visible { color: var(--gold-bright); border-color: var(--gold); }