/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID / SITE — the home page's look, for every other public page.

   liquid.css restyles the tour in detail. This lighter layer does the same job
   for the pages that were built on the older dark platform style (story,
   changelog, gallery, advertising, the TV post, live): it re-points their
   colour tokens, swaps the type, and puts the night-sky wallpaper behind them.
   Appearance only — loaded last, it adds and removes no content.
   2026-10-05.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --lq-ink:#050611; --lq-paper:#eef1fb; --lq-mute:#a3abc8; --lq-dim:#c4cbe3;
  --lq-cyan:#5ee0ff; --lq-blue:#2e7cf6; --lq-lilac:#8f7dff; --lq-tally:#ff3d5a;
  --lq-line:rgba(201,214,255,.14); --lq-line2:rgba(201,214,255,.28);
  --lq-glass:rgba(10,12,30,.55);
  --lq-display:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --lq-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lq-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* The old platform tokens, re-pointed (story, changelog, gallery, advertising, TV post). */
  --bg:#050611; --bg2:rgba(10,12,30,.55); --bg3:rgba(18,22,48,.7); --card:rgba(10,12,30,.55);
  --bd:rgba(201,214,255,.14); --bd2:rgba(201,214,255,.28); --line:rgba(201,214,255,.14);
  --tx:#eef1fb; --dim:#c4cbe3; --muted:#a3abc8; --faint:rgba(238,241,246,.5);
  --blue:#2e7cf6; --purple:#8f7dff; --gold:#5ee0ff; --sig:#5ee0ff;
  --grad:linear-gradient(110deg,#5ee0ff,#2e7cf6 45%,#8f7dff);
  --fd:"Archivo","Helvetica Neue",Arial,sans-serif; --fb:"Instrument Sans",system-ui,sans-serif; --fm:"JetBrains Mono",ui-monospace,monospace;
  /* live.html's broadcast tokens */
  --ink2:rgba(10,12,30,.6); --mute:#a3abc8;
  color-scheme:dark;
}
/* gallery uses --ink as its text colour; live uses it as the background. */
html{background:var(--lq-ink)!important}
body{background:transparent!important;color:var(--lq-paper)!important;font-family:var(--lq-body)!important;-webkit-font-smoothing:antialiased}

/* ── The sky ─────────────────────────────────────────────────────────────── */
body::before{content:"";position:fixed;inset:-4%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 28%,rgba(46,124,246,.24),transparent 70%),
    radial-gradient(40% 40% at 88% 82%,rgba(143,125,255,.15),transparent 70%),
    linear-gradient(180deg,rgba(5,6,17,.35),rgba(5,6,17,.82) 65%),
    url(/onair/08-wallpaper.webp) center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Type ────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--lq-display)!important;font-stretch:125%;font-variation-settings:'wdth' 125}
h1,h2{font-weight:800!important;text-transform:uppercase;letter-spacing:-.01em!important;line-height:1.06!important}
h3,h4{font-weight:700!important}
h1{font-size:clamp(26px,3.8vw,52px)!important}
h2{font-size:clamp(21px,2.8vw,36px)!important}
p,li,dd,td,label,input,select,textarea,button{font-family:var(--lq-body)}
h1{background:linear-gradient(180deg,#fff 0%,#e8ebf2 36%,#9aa3bb 50%,#f4f6fa 56%,#c9d0e0 82%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(94,224,255,.16))}
h1 em,h1 .grad,h1 .g,h1 span.hl,h2 .grad,h2 em{font-style:normal;
  background:linear-gradient(95deg,#e9f6ff,var(--lq-cyan) 22%,#7aa8ff 42%,#b8a8ff 60%,#ffffff 78%,#e9f6ff)!important;
  background-size:240% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;animation:lqs-holo 9s linear infinite}
@keyframes lqs-holo{to{background-position:220% 0}}

/* Eyebrows, kickers, tags, stamps: mono, cyan. */
.eyebrow,.kicker,.stamp,.tag,.k,.kick,.label,.eyb{font-family:var(--lq-mono)!important;letter-spacing:.2em!important;text-transform:uppercase}
.eyebrow,.kicker{color:var(--lq-cyan)!important}
.eyebrow{border-color:var(--lq-line2)!important;background:rgba(10,12,30,.45)!important;border-radius:999px!important}

/* ── Header bars: glass ──────────────────────────────────────────────────── */
body>header:first-of-type,body>.nav,body>nav.nav,header.nav,.topbar,.site-head{
  background:rgba(5,6,17,.62)!important;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--lq-line)!important}
body>header a,body>.nav a,header.nav a,nav a{font-family:var(--lq-body)}

/* ── Buttons: chrome pill for the main action, glass pill for the rest ─────
   Element-qualified on purpose: on some pages .cta is a wrapper <div>. */
a.cta,button.cta,a.btn,button.btn,.btn-primary,.nav-cta{border-radius:999px!important}
a.cta:not(.ghost),button.cta:not(.ghost),a.btn:not(.ghost):not(.line):not(.btn-ghost),button.btn:not(.ghost):not(.line):not(.btn-ghost),.btn-primary,.nav-cta{
  background:linear-gradient(180deg,#ffffff,#d9deea 55%,#b9c1d6)!important;color:#07080f!important;-webkit-text-fill-color:#07080f;
  border:0!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.08em;font-size:13px!important;
  box-shadow:0 1px 0 #fff inset,0 10px 30px -12px rgba(94,224,255,.6)!important}
a.ghost,button.ghost,.btn-ghost,a.btn.line{border-radius:999px!important;border:1px solid rgba(201,214,255,.35)!important;color:var(--lq-paper)!important;
  -webkit-text-fill-color:var(--lq-paper);background:rgba(10,12,30,.4)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
a.ghost:hover,button.ghost:hover,.btn-ghost:hover{border-color:var(--lq-paper)!important}
/* live.html's signal-green labels and rules move to the house cyan. */
.sig,.on-air,.kick{color:var(--lq-cyan)}

/* ── Cards and panels pick up the glass via --bg2/--card; give them the radius ─ */
.card,.item figure,.tile,.panel,.box,.stat,.q,.note{border-radius:18px}
.note{background:rgba(94,224,255,.06)!important;border-color:rgba(94,224,255,.3)!important}
img{border-radius:inherit}

a{text-decoration-color:rgba(94,224,255,.45)}
:focus-visible{outline:2px solid var(--lq-cyan)!important;outline-offset:3px}

/* ── Footers ─────────────────────────────────────────────────────────────── */
body>footer,footer{background:rgba(5,6,17,.6);border-top:1px solid var(--lq-line)!important}

@media (prefers-reduced-motion:reduce){h1 em,h1 .grad,h1 .g,h2 .grad,h2 em{animation:none!important}}

/* Phones: the uppercase pill is wider than the old button, so it tightens to fit the bar. */
@media (max-width:560px){
  header a.cta,.nav a.cta,header a.btn,.nav a.btn,.nav-cta{font-size:11px!important;letter-spacing:.05em!important;padding:9px 13px!important;white-space:nowrap}
}

/* Advertising (and the TV post): "Get a plan" is black with white type, so it reads as
   its own action and is not mistaken for the network bar's chrome Request access. 2026-10-05 */
nav.nav a.nav-cta{background:#05060f!important;color:#fff!important;-webkit-text-fill-color:#fff;
  border:1px solid rgba(201,214,255,.38)!important;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 8px 24px -10px rgba(94,224,255,.45)!important}
nav.nav a.nav-cta:hover{background:#000!important;border-color:#fff!important}