/* ============================================================
   Uncommon Christian Network — stylesheet module: live
   The Shortwave, Podcast, and Radio page styles. (Name kept for the
   header.php load order: base, layout, home, live, support, pages.)
   ============================================================ */
/* ===== Shortwave page ===================================================== */
/* The page is a direct port of the approved redesign, so its geometry — the
   1180px shell, the 720px hero, the light panel lifted 84px over the foot of
   it, the 1.18/.82 schedule split and the three-column fund panel — is kept as
   drawn. The colours are NOT the design file's private hexes: they map onto the
   brand tokens already in base.css, which are the same mauve ramp, so the page
   stays in step with the rest of the site if that ramp is ever retuned.
   Everything is prefixed swx- and scoped to this page's own sections. */
.swx-hero,.swx-story,.swx-schedule,.swx-utc-note,.swx-mission,.swx-listen,.swx-reception{
  --swx-1:var(--ucn-purple);          /* #9667ad — the design's base   */
  --swx-2:var(--ucn-purple-bright);   /* #ae80c5 — highlights, links   */
  --swx-3:var(--ucn-purple-soft);     /* #7a568c — secondary           */
  --swx-4:var(--ucn-purple-muted);    /* #5f466c — low-emphasis        */
  --swx-amber:var(--beacon-500);      /* the hero's warm accent        */
  --swx-ink:#f7f3fa;
  --swx-muted:#b9b0c2;
  --swx-line:rgba(174,128,197,.27);
  /* Display face: the redesign draws its headings in a serif. The site already
     has one — Georgia, the same face the home page's editorial headings use —
     so nothing new is loaded (font-src is 'self'; Google Fonts cannot load). */
  --swx-display:Georgia,"Times New Roman",serif;
}
/* The old page's vivid violet ramp is still needed by the shortwave fund block
   on /support, which was designed against it. Scoped to that section only. */
#shortwave{
  --violet-900:#2E1B4D;
  --violet-700:#4A2C7A;
  --violet-600:#6B3CC4;
  --violet-600-rgb:107,60,196;
  --violet-500:#9B6BF2;
  --violet-500-rgb:155,107,242;
  --violet-400:#BC97F8;
  --violet-400-rgb:188,151,248;
  --violet-200:#DCC6FB;
  --accent:var(--violet-400);
  --accent-2:var(--violet-400);
}

/* The page runs on its own shell, narrower than the site .container, because
   the design's column maths (and the hero's copy column) are drawn to it. */
.swx-shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.swx-eyebrow{margin:0 0 14px;color:var(--swx-2);
  font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase}
.swx-amber{color:var(--swx-amber)}
.swx-panel{border:1px solid var(--swx-line);border-radius:24px;
  background:linear-gradient(145deg,rgba(22,19,33,.94),rgba(11,10,18,.96));
  box-shadow:0 24px 70px rgba(0,0,0,.28)}

/* ---------- Hero ----------
   The photograph is composed with its dark half on the left, so the copy sits
   in space the artwork already left for it and the scrim only deepens it. */
.swx-hero{position:relative;min-height:720px;display:grid;align-items:center;overflow:hidden;
  background:#08070d}
.swx-hero-art,.swx-hero-shade{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.swx-hero-shade{background:
  linear-gradient(90deg,rgba(5,4,9,.98) 0%,rgba(5,4,9,.88) 31%,rgba(5,4,9,.3) 59%,rgba(5,4,9,.06) 100%),
  linear-gradient(0deg,var(--bg),transparent 24%)}
.swx-hero-copy{position:relative;z-index:1;padding:120px 0 150px}
/* Georgia sets wider than the design file's face, so the size and the copy
   column are tuned to keep the headline on the two lines it was drawn as. */
.swx-hero h1{max-width:16ch;margin:0 0 24px;font-family:var(--swx-display);
  font-size:clamp(3rem,5.4vw,5.4rem);font-weight:500;line-height:.98;letter-spacing:-.035em;
  color:var(--swx-ink)}
.swx-hero h1 span,.swx-mission h2 span{color:var(--swx-2)}
.swx-hero-lede{max-width:520px;margin:0;color:var(--swx-muted);font-size:1.1rem;line-height:1.65}
.swx-hero-facts{display:flex;flex-wrap:wrap;gap:38px;margin:54px 0 0;padding:0;list-style:none}
.swx-hero-facts li{display:flex;align-items:center;gap:11px;color:var(--swx-ink);font-size:.8rem;line-height:1.35}
.swx-hero-facts svg{flex:none;width:28px;height:28px;fill:none;stroke:var(--swx-amber);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- "Beyond the internet": the one light panel on the page ---------- */
.swx-story{position:relative;z-index:2;margin-top:-84px;padding:46px;border-radius:22px;
  background:#f3eff0;color:#19131d;box-shadow:0 30px 90px rgba(0,0,0,.35);
  display:grid;grid-template-columns:.9fr 2.3fr;gap:44px;align-items:center}
.swx-story .swx-eyebrow{color:var(--swx-3)}
.swx-story h2{margin:0 0 12px;font-family:var(--swx-display);font-weight:500;font-size:2.4rem;
  line-height:1.06;letter-spacing:-.02em;color:#19131d}
.swx-story p{margin:0;color:#5b5260;line-height:1.65}
.swx-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:14px}
.swx-steps article{text-align:center}
.swx-lineart{display:block;color:var(--swx-3)}
.swx-steps .swx-lineart{height:100px}
.swx-lineart svg{width:120px;height:90px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.swx-steps h3{margin:0 0 6px;font-family:var(--font);font-size:1rem;font-weight:700;color:#19131d}
.swx-steps h3 b,.swx-card-copy>b{display:inline-grid;place-items:center;width:24px;height:24px;
  margin-right:7px;border-radius:50%;background:var(--swx-1);color:#fff;
  font-size:.76rem;font-weight:700;vertical-align:middle}
.swx-steps p{margin:0;font-size:.8rem;color:#5b5260;line-height:1.6}
.swx-flow{color:var(--swx-1);font-size:1.1rem;letter-spacing:.1em;text-align:center}

/* ---------- Schedule: the weekly table beside the live countdown ---------- */
.swx-schedule{display:grid;grid-template-columns:1.18fr .82fr;gap:22px;padding:76px 0 38px;
  align-items:start}
.swx-sched-main{display:grid;gap:14px;min-width:0}
.swx-sched-card{padding:28px}
.swx-table{margin:10px -28px 0}
.swx-row{display:grid;grid-template-columns:1.1fr 1.05fr .85fr;gap:20px;align-items:center;
  padding:22px 28px;border-top:1px solid rgba(255,255,255,.1);color:var(--swx-ink);
  text-decoration:none;transition:background .15s}
a.swx-row:hover{background:rgba(150,103,173,.08)}
a.swx-row:focus-visible{outline:2px solid var(--swx-2);outline-offset:-2px}
.swx-row-head{padding-block:12px;color:var(--swx-muted);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em}
.swx-row>strong{font-size:1.05rem;font-weight:700}
.swx-row>b{font-weight:600;font-size:.95rem}
.swx-row>span{font-size:.9rem}
.swx-table small{display:block;margin-top:5px;color:var(--swx-2);font-size:.76rem;font-weight:500;
  letter-spacing:0;text-transform:none}
.swx-row>span small{color:var(--swx-muted)}
.swx-when-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.swx-zone-toggle{cursor:pointer;font:inherit;font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--swx-2);background:rgba(150,103,173,.14);
  border:1px solid var(--swx-line);border-radius:999px;padding:.3rem .62rem;white-space:nowrap}
.swx-zone-toggle:hover{color:#fff;border-color:var(--swx-2)}
.swx-phone{margin:20px 0 0;font-size:.86rem}
.swx-phone a{display:inline-flex;align-items:center;gap:.55rem;color:var(--swx-2)}
.swx-phone a:hover{color:#fff}
.swx-phone svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.swx-utc-note{margin:0;color:var(--swx-muted);font-size:.78rem;line-height:1.65}
.swx-utc-note a{color:var(--swx-2);text-decoration:underline}
.swx-empty{padding:28px}
.swx-empty p{margin:0;color:var(--swx-muted)}
.swx-empty a{color:var(--swx-2)}

.swx-sched-side{display:grid;gap:18px}
.swx-countdown,.swx-practical{padding:26px}
.swx-cd{display:flex;align-items:flex-start;gap:13px;margin:0 0 25px}
.swx-cd b{font-size:2rem;font-weight:700;line-height:1;color:var(--swx-ink);
  font-variant-numeric:tabular-nums}
.swx-cd small{display:block;margin-top:7px;color:var(--swx-muted);font-size:.55rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.swx-cd i{font-style:normal;color:var(--swx-2);font-size:1.5rem;line-height:1.25}
.swx-cd.is-live b{color:var(--swx-amber)}
.swx-cd-meta{margin:0;color:var(--swx-muted);font-size:.86rem;line-height:1.7}
.swx-cd-meta strong{color:var(--swx-ink)}
.swx-practical{display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:linear-gradient(120deg,rgba(49,38,55,.85),rgba(21,15,29,.95))}
.swx-practical h3{margin:0 0 8px;font-family:var(--swx-display);font-weight:500;font-size:1.15rem;
  line-height:1.25;color:var(--swx-ink)}
.swx-practical p{margin:0;color:var(--swx-muted);font-size:.86rem;line-height:1.6}
.swx-practical .swx-lineart{flex:0 0 115px;color:var(--swx-2)}
.swx-practical .swx-lineart svg{width:115px;height:90px}

/* ---------- The fund: mission, this month's goal, the gift ---------- */
.swx-mission{display:grid;grid-template-columns:1.05fr .92fr .82fr;margin-top:34px;padding:38px}
.swx-mission>div{padding:0 28px;min-width:0}
.swx-mission>div+div{border-left:1px solid rgba(255,255,255,.1)}
.swx-mission h2{margin:0 0 18px;font-family:var(--swx-display);font-weight:500;font-size:3.1rem;
  line-height:1.02;letter-spacing:-.03em;color:var(--swx-ink)}
.swx-mission-copy p{margin:0 0 14px;color:var(--swx-muted);font-size:.9rem;line-height:1.65}
.swx-mission-copy p strong{color:var(--swx-ink)}
.swx-mission-facts{display:flex;gap:24px;margin:30px 0 0;padding:0;list-style:none}
.swx-mission-facts li{display:flex;align-items:center;gap:9px;color:#eee2f4;font-size:.78rem;
  line-height:1.35}
.swx-mission-facts svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--swx-2);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.swx-goal-amount{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px;margin:0}
.swx-goal-amount strong{font-size:2.2rem;font-weight:700;line-height:1;color:var(--swx-ink)}
.swx-goal-amount small{margin-right:auto;color:var(--swx-muted);font-size:.9rem}
.swx-goal-amount b{color:var(--swx-2);font-size:2rem;font-weight:700;line-height:1}
.swx-goal-amount b i{font-style:normal;font-size:1.1rem}
.swx-goal-amount b.is-over{color:var(--swx-amber)}
.swx-progress{height:8px;margin:17px 0 20px;border-radius:99px;background:#050409;overflow:hidden}
.swx-progress span{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#7840ce,var(--swx-2));box-shadow:0 0 18px var(--swx-2)}
.swx-goal-note{display:flex;align-items:center;gap:11px;margin:0;
  color:var(--swx-muted);font-size:.78rem;line-height:1.6}
.swx-goal-note strong{color:var(--swx-ink)}
.swx-goal-note-ico{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--swx-line);background:rgba(150,103,173,.14);color:var(--swx-2)}
.swx-goal-note-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.swx-goal-off{margin:26px 0 0;color:var(--swx-muted);font-size:.85rem}
.swx-goal-off strong{color:var(--swx-ink)}
.swx-eyebrow-gap{margin-top:30px}
.swx-amts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.swx-amt,.swx-donate{font:inherit;font-weight:600;color:#fff;padding:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#171622;
  transition:border-color .15s,background .15s}
.swx-amt:hover,.swx-amt.active{border-color:var(--swx-2);
  background:linear-gradient(135deg,#6f37bd,var(--swx-1))}
.swx-field{display:flex;align-items:center;gap:8px;margin-top:13px;padding:12px;
  border:1px solid rgba(255,255,255,.14);border-radius:9px}
.swx-field:focus-within{border-color:var(--swx-2)}
.swx-field>span{color:var(--swx-muted)}
.swx-field input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#fff;font:inherit}
.swx-field input::placeholder{color:#6f6879}

.swx-gift-lines{margin:25px 0 18px}
.swx-gift-lines div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.1);font-size:.75rem}
.swx-gift-lines dt{color:var(--swx-muted);white-space:nowrap}
.swx-gift-lines dd{margin:0;text-align:right;font-weight:600;color:var(--swx-ink);white-space:nowrap}
.swx-gift-total{display:flex;justify-content:space-between;align-items:flex-end;margin:0;
  color:var(--swx-muted);font-size:.82rem}
.swx-gift-total strong{color:#fff;font-size:2.3rem;font-weight:700;line-height:1}
.swx-donate{width:100%;margin-top:13px;border:0;font-weight:700;
  background:linear-gradient(135deg,#733bd1,var(--swx-1));
  box-shadow:0 10px 25px rgba(150,103,173,.3)}
.swx-donate:hover{filter:brightness(1.08)}
.swx-donate[disabled]{opacity:.55;cursor:default;filter:none}
.swx-status{margin:10px 0 0;min-height:1.2em;color:var(--swx-2);font-size:.78rem}
.swx-status.is-error{color:#ff8f8f}
.swx-gift-notes{margin:14px 0 0;padding-left:16px;color:var(--swx-muted);font-size:.72rem;line-height:1.7}
.swx-gift-notes strong{color:var(--swx-ink)}
.swx-fineprint{margin:12px 0 0;color:#6f6879;font-size:.66rem;line-height:1.6}

/* ---------- How to hear it: three photographed cards ---------- */
.swx-listen{padding:76px 0 48px}
.swx-listen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.swx-listen article{position:relative;min-height:440px;overflow:hidden;
  border:1px solid var(--swx-line);border-radius:20px;background:#12101a}
/* The photograph is bottom-anchored at its own 4:3 aspect — never stretched —
   and the copy's gradient dissolves into it. */
.swx-listen img{position:absolute;inset:auto 0 0;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:contain}
.swx-card-copy{position:relative;z-index:1;min-height:220px;padding:26px;
  background:linear-gradient(#12101a 68%,transparent)}
.swx-card-copy>b{float:left;margin-right:12px}
.swx-card-copy h3{margin:0 0 8px;font-family:var(--font);font-size:1.18rem;font-weight:700;
  color:var(--swx-ink)}
.swx-card-copy p{margin:0;color:var(--swx-muted);font-size:.85rem;line-height:1.6}

/* ---------- Reception tip banner ----------
   The artwork is ultra-wide (2172×724); the banner takes that exact aspect so
   the whole picture shows without being cropped or letterboxed. */
.swx-reception{position:relative;aspect-ratio:2172/724;min-height:275px;margin-bottom:70px;
  overflow:hidden;border:1px solid var(--swx-3);border-radius:24px}
.swx-reception>img,.swx-reception-shade{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#261832}
.swx-reception-shade{background:linear-gradient(90deg,rgba(45,26,50,.55),rgba(35,22,47,.82) 42%,rgba(17,12,25,.88))}
.swx-reception-copy,.swx-reception-times{position:absolute;z-index:1;top:50%;transform:translateY(-50%)}
.swx-reception-copy{left:22%;max-width:480px}
.swx-reception-copy h2{margin:0 0 10px;font-family:var(--swx-display);font-weight:500;font-size:2rem;
  line-height:1.1;letter-spacing:-.02em;color:var(--swx-ink)}
.swx-reception-copy p{margin:0;color:var(--swx-muted);font-size:.88rem;line-height:1.65}
.swx-reception-times{right:5%;padding-left:34px;border-left:1px solid rgba(255,255,255,.15)}
.swx-reception-times ul{margin:0;padding-left:18px;color:#eee2f4;font-size:.82rem;line-height:1.9}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .swx-story{grid-template-columns:1fr;gap:28px}
  .swx-schedule{grid-template-columns:1fr}
  .swx-mission{grid-template-columns:1fr 1fr}
  .swx-mission>div{padding:0 22px}
  .swx-mission-copy{grid-column:1 / -1;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
  .swx-mission>div+div.swx-goal{border-left:0}
  .swx-mission h2{font-size:2.6rem}
}
@media (max-width:900px){
  .swx-shell{width:min(100% - 28px,680px)}
  .swx-hero{min-height:640px}
  .swx-hero-art{object-position:64% center}
  .swx-hero-shade{background:linear-gradient(90deg,rgba(5,4,9,.95),rgba(5,4,9,.58)),
    linear-gradient(0deg,var(--bg),transparent 30%)}
  .swx-hero-copy{padding:90px 0 120px}
  .swx-hero-facts{gap:18px}
  .swx-story{padding:30px}
  .swx-steps{grid-template-columns:1fr;gap:22px}
  .swx-flow{transform:rotate(90deg)}
  .swx-mission{grid-template-columns:1fr;padding:30px}
  .swx-mission>div{padding:26px 0}
  .swx-mission>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .swx-mission-copy{padding-top:0;padding-bottom:26px}
  .swx-listen-grid{grid-template-columns:1fr}
  .swx-reception{aspect-ratio:auto;min-height:470px}
  .swx-reception>img{object-fit:cover}
  .swx-reception-copy{left:7%;right:7%;top:34%;max-width:none}
  .swx-reception-times{left:7%;right:auto;top:74%;padding-left:0;border-left:0}
}
@media (max-width:580px){
  .swx-hero-facts{display:grid;grid-template-columns:1fr 1fr}
  .swx-story{margin-top:-42px}
  .swx-sched-card{padding:22px}
  .swx-table{margin-inline:-22px}
  .swx-row{grid-template-columns:1fr 1fr;gap:12px;padding:18px 22px}
  .swx-row>span{grid-column:1 / -1}
  /* The head row collapses to the one control it carries: the time-zone toggle. */
  .swx-row-head{grid-template-columns:1fr}
  .swx-row-head>span:first-child,.swx-row-head>span:last-child{display:none}
  .swx-mission h2{font-size:2.4rem}
  .swx-mission-facts{flex-direction:column;gap:14px}
  .swx-listen article{min-height:420px}
  .swx-cd b{font-size:1.7rem}
}

/* ===== Podcast page ======================================================= */
/* Hero: display headline + lead on the left, a "studio card" (mic + animated
   waveform) on the right — the same feel as the home hero. */
.pod-hero{position:relative;isolation:isolate;overflow:hidden;min-height:590px;display:grid;align-items:center;
  padding:clamp(52px,7vw,92px) 0 clamp(40px,5vw,62px);border-bottom:1px solid rgba(255,255,255,.07);
  background:#0b0c13}
.pod-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#0b0c13 5%,rgba(11,12,19,.96) 25%,rgba(11,12,19,.58) 55%,rgba(11,12,19,.1) 80%),
    linear-gradient(0deg,#0b0c13 0%,transparent 26%,transparent 72%,rgba(11,12,19,.74) 100%),
    radial-gradient(ellipse at center,transparent 46%,rgba(11,12,19,.74) 100%)}
.pod-hero::after{content:"";position:absolute;inset:auto -12% -60% 47%;z-index:-1;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgb(from var(--violet-400) r g b / .18),transparent 64%);pointer-events:none}
.pod-hero-bg-art{position:absolute;z-index:-2;top:2%;bottom:2%;width:61%;max-width:60rem;
  right:max(-1%, calc((100% - var(--maxw)) / 2 - 1.5rem))}
.pod-hero-bg-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center right;
  filter:saturate(1.15) brightness(1.04) contrast(1.03) drop-shadow(0 28px 42px rgba(0,0,0,.34))}
.pod-hero-grid{position:relative;z-index:1;width:100%;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2.2rem,5vw,5rem);
  align-items:center;justify-items:start}
.pod-hero-copy{width:100%;max-width:560px;min-width:0;margin:0;justify-self:start;text-align:left}

/* Podcast hero player — reuses the radio player's look (.rp-player and its
   children), overriding the radio-specific fixed height, and adds a seek +
   skip row underneath. */
.pod-player{height:auto;margin-top:0;align-self:center;justify-content:flex-start;
  gap:clamp(14px,2vw,20px);width:100%;justify-self:end;
  background:linear-gradient(180deg,rgba(35,18,44,.55),rgba(13,12,22,.55))}
.pod-seekrow{display:flex;align-items:center;gap:clamp(7px,1.1vw,13px);width:100%}
.pod-seek{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:6px;border-radius:99px;cursor:pointer;
  background:linear-gradient(to right,var(--violet-500) 0%,rgb(from var(--violet-500) r g b / .28) 0%)}
.pod-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--violet-300,#dec9e9);border:0;cursor:pointer;box-shadow:0 0 0 3px rgb(from var(--violet-500) r g b / .3)}
.pod-seek::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--violet-300,#dec9e9);border:0;cursor:pointer}
.pod-seek::-moz-range-track{height:6px;border-radius:99px;background:transparent}
.pod-seek:focus-visible{outline:2px solid var(--violet-400);outline-offset:4px}
.pod-skip{position:relative;flex:0 0 auto;width:38px;height:38px;border:1px solid #20242D;border-radius:50%;
  background:rgba(18,20,26,.8);color:#c4c8d2;cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s}
.pod-skip:hover{color:#fff;border-color:var(--violet-500)}
.pod-skip svg{width:23px;height:23px}
.pod-skip-n{position:absolute;inset:0;display:grid;place-items:center;font-size:8.5px;font-weight:800;padding-top:1px}
.pod-speed{flex:0 0 auto;min-width:42px;height:30px;padding:0 .55rem;border:1px solid var(--line);border-radius:8px;
  background:#151721;color:#d4d6de;cursor:pointer;font-weight:800;font-size:.76rem;font-variant-numeric:tabular-nums}
.pod-speed:hover{border-color:var(--violet-500);color:#fff}
.pod-hero-title{font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,6vw,5rem);line-height:.95;letter-spacing:-.05em;margin:1rem 0 0;color:#fdfbfe}
.pod-hero-title .accent{color:var(--violet-500);text-shadow:0 0 36px rgb(from var(--violet-500) r g b / .25)}
.pod-hero-lead{color:#c7cad4;font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.62;
  max-width:38rem;margin:1.2rem 0 0}
.pod-platform-note{display:flex;align-items:center;gap:.6rem;margin:1.3rem 0 0;color:var(--muted);font-size:.88rem}
.pod-platform-note strong{color:#fff}
.pp-ico{color:var(--accent-2)}
.pod-platform-note--gap{margin-top:1.6rem}

/* Studio card */
.studio-card{position:relative;min-height:410px;padding:1.7rem;border:1px solid var(--violet-700);border-radius:26px;
  background:linear-gradient(145deg,var(--violet-900),#0d0e15 72%);box-shadow:0 24px 80px rgba(0,0,0,.42);overflow:hidden}
.studio-card::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-100px;top:-90px;
  border:1px solid rgb(from var(--violet-200) r g b / .22);box-shadow:0 0 0 36px rgb(from var(--violet-200) r g b / .05),0 0 0 72px rgb(from var(--violet-200) r g b / .03)}
.show-badge{position:relative;z-index:2;display:inline-flex;padding:.5rem .7rem;border-radius:999px;
  background:var(--violet-900);color:var(--accent-2);font-size:.66rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.studio-mic{position:absolute;right:58px;top:50px;width:104px;filter:drop-shadow(0 0 25px rgb(from var(--violet-200) r g b / .3));transform:rotate(8deg)}
.sm-head{display:block;width:88px;height:116px;border-radius:44px;
  background:repeating-linear-gradient(90deg,#242630 0 3px,#5d6170 3px 5px);
  border:5px solid #a5a8b1;box-shadow:inset 0 0 30px #05060a}
.sm-neck{display:block;width:16px;height:64px;margin:0 auto;background:linear-gradient(90deg,#555967,#c6c8ce,#555967)}
.sm-base{display:block;width:98px;height:9px;margin:-2px auto 0;border-radius:99px;background:var(--accent);box-shadow:0 0 22px var(--violet-400)}
.studio-title{position:relative;z-index:2;margin:72px 0 0;font-family:var(--display);
  font-size:clamp(2.6rem,5vw,3.7rem);line-height:.9;letter-spacing:-.05em;font-weight:900}
.studio-title span{display:block;color:var(--accent);font-size:1.05rem;letter-spacing:.02em;margin-top:.7rem;font-weight:700;text-transform:uppercase}
.studio-wave{position:absolute;left:1.7rem;right:1.7rem;bottom:2.1rem;height:48px;display:flex;gap:4px;align-items:center}
.studio-wave i{flex:1;height:var(--h);min-height:3px;border-radius:99px;
  background:linear-gradient(var(--violet-200),var(--violet-400));box-shadow:0 0 8px rgb(from var(--violet-200) r g b / .5);
  animation:heroWave 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.studio-wave i{animation:none}}
.studio-card--shows{display:grid;place-items:center;padding:0;
  background:radial-gradient(circle at 50% 45%,rgb(from var(--violet-200) r g b / .23),transparent 42%),linear-gradient(145deg,var(--violet-900),#0b0c13)}
.studio-card--shows::before{display:none}
.pod-hero-ring{position:absolute;border:1px solid rgb(from var(--violet-200) r g b / .2);border-radius:50%}
.pod-hero-ring--one{inset:8%}
.pod-hero-ring--two{inset:20%;border-color:rgb(from var(--violet-200) r g b / .3)}
.pod-hero-cover{position:absolute;width:min(54%,240px);aspect-ratio:1;overflow:hidden;margin:0;
  border:1px solid rgba(255,255,255,.16);border-radius:26px;box-shadow:0 30px 65px rgba(0,0,0,.48)}
.pod-hero-cover img{display:block;width:100%;height:100%;object-fit:cover}
.pod-hero-cover--uncommon{z-index:1;right:10%;top:18%;transform:rotate(7deg)}
.pod-hero-cover--cqa{z-index:2;left:10%;bottom:12%;transform:rotate(-6deg);
  box-shadow:0 36px 75px rgba(0,0,0,.58),0 0 0 1px rgb(from var(--violet-200) r g b / .12)}
.studio-card--illustrated{overflow:visible;padding:0;border:0;box-shadow:none;
  background:radial-gradient(ellipse at 56% 48%,rgb(from var(--violet-400) r g b / .14),transparent 58%)}
.studio-card--illustrated::before{display:none}
.studio-card--illustrated>img{display:block;width:108%;height:108%;margin:-4%;object-fit:cover;object-position:center;
  filter:saturate(1.16) brightness(1.05);
  -webkit-mask-image:radial-gradient(ellipse 68% 70% at 50% 50%,#000 38%,rgba(0,0,0,.92) 54%,transparent 86%);
  mask-image:radial-gradient(ellipse 68% 70% at 50% 50%,#000 38%,rgba(0,0,0,.92) 54%,transparent 86%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Platform follow bar */
.pod-platforms{padding:1.4rem 0;border-bottom:1px solid rgba(255,255,255,.07);background:#0c0e15}
.pod-platform-row{display:flex;align-items:center;gap:.7rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pod-platform-row>span{white-space:nowrap;color:var(--muted);font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;margin-right:.5rem;flex:none}
.platform{white-space:nowrap;flex:none;border:1px solid var(--line);border-radius:12px;background:#141722;
  color:#daddE5;padding:.65rem .85rem;font-weight:700;font-size:.9rem;transition:.15s}
.platform:hover{border-color:var(--violet-600);background:var(--violet-900);color:#fff}
.platform b{color:var(--accent);margin-right:.4rem;font-size:.7em}

/* Section heads */
.pod-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.6rem;margin-bottom:1.8rem;flex-wrap:wrap}
.pod-h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.8vw,3rem);
  line-height:1.04;letter-spacing:-.04em;margin:.5rem 0 0}
.pod-sec-count{color:var(--accent-2);font-weight:800;font-size:.82rem;margin:0;white-space:nowrap}
.pod-muted{background:#0c0e15;border-block:1px solid rgba(255,255,255,.07)}
.pod-tag{display:inline-flex;align-self:flex-start;padding:.4rem .6rem;border-radius:999px;background:var(--violet-900);
  color:var(--accent-2);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}


/* Show cards — the cover art is cinematic and near-black, so it bleeds full
   onto a dark card (no clashing panel behind it) with an album-style glow, and
   lifts on hover. Copy sits beside it as a real playlist. */
.show-cards{display:grid;grid-template-columns:1fr;gap:1.4rem}
.show-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.3rem,2.6vw,2.1rem);
  padding:clamp(1.2rem,2.2vw,1.7rem);border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:radial-gradient(130% 130% at 0% 0%,rgb(from var(--violet-600) r g b / .12),transparent 52%),linear-gradient(155deg,#1a121e,#0c0d14);
  box-shadow:0 18px 46px rgba(0,0,0,.42);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.show-card:hover{transform:translateY(-4px);border-color:var(--violet-600);
  box-shadow:0 30px 66px -10px rgb(from var(--violet-600) r g b / .34)}
.show-cover{position:relative;width:clamp(148px,17vw,196px);aspect-ratio:1;align-self:start;
  border-radius:18px;overflow:hidden;display:grid;place-items:center;background:#050507;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 34px rgba(0,0,0,.55),0 14px 40px -10px rgb(from var(--violet-500) r g b / .45)}
.show-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 42px rgba(0,0,0,.5)}
.show-cover img{width:100%;height:100%;object-fit:cover;padding:0}
.show-cover strong{font-family:var(--display);font-size:2.6rem;letter-spacing:-.06em;color:var(--violet-200)}
.show-info{display:flex;flex-direction:column;min-width:0}
.show-cat{align-self:flex-start;display:inline-block;padding:.3rem .62rem;margin:0 0 .55rem;border-radius:999px;
  background:rgb(from var(--violet-500) r g b / .16);border:1px solid rgb(from var(--violet-500) r g b / .3);
  color:var(--violet-200);font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.show-name{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.4vw,1.95rem);margin:0 0 .15rem;letter-spacing:-.03em;line-height:1.05}
.show-host{color:var(--muted);font-size:.86rem;margin:0 0 1rem}
.show-desc{color:var(--muted);font-size:.9rem;margin:0 0 .9rem}
.show-play-latest{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.05rem;
  padding:.6rem 1.15rem;border-radius:999px;border:1px solid var(--violet-500);background:var(--violet-600);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.9rem;cursor:pointer;
  transition:background .18s,transform .12s,box-shadow .18s;box-shadow:0 10px 26px -6px rgb(from var(--violet-600) r g b / .5)}
.show-play-latest:hover{background:var(--violet-500);transform:translateY(-1px);box-shadow:0 14px 32px -6px rgb(from var(--violet-500) r g b / .6)}
.show-play-latest svg{width:15px;height:15px;margin-left:1px}
.show-eps{list-style:none;margin:0;padding:.7rem 0 0;display:flex;flex-direction:column;gap:.12rem;border-top:1px solid rgba(255,255,255,.06)}
/* Long shows scroll inside the card instead of stretching it endlessly. */
.show-eps[data-scroll]{max-height:250px;overflow-y:auto;padding-right:.4rem}
.show-eps[data-scroll]::-webkit-scrollbar{width:8px}
.show-eps[data-scroll]::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.show-eps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;min-width:0;
  padding:.42rem .5rem;border-radius:11px;transition:background .15s}
.show-eps li:hover{background:rgba(255,255,255,.045)}
.show-eps li.playing{background:rgb(from var(--violet-500) r g b / .13)}
.ep-play{flex:none;width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:.15s;
  border:1px solid rgb(from var(--violet-500) r g b / .35);background:rgb(from var(--violet-500) r g b / .12);color:var(--violet-200)}
.ep-play:hover{background:var(--violet-600);border-color:var(--violet-500);color:#fff}
.ep-play.playing{background:var(--violet-600);border-color:var(--violet-400);color:#fff}
.ep-play svg{width:14px;height:14px}
.ep-play .ep-ic-play{margin-left:1px}
.ep-play .ep-ic-pause{display:none}
.ep-play.playing .ep-ic-play{display:none}
.ep-play.playing .ep-ic-pause{display:block}
.ep-text{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ep-name{font-size:.9rem;font-weight:600;color:#e7e9f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-sub{color:var(--muted);font-size:.74rem}
.ep-len{color:var(--muted);font-size:.76rem;font-variant-numeric:tabular-nums;white-space:nowrap;justify-self:end}


@media (max-width:900px){
  /* minmax(0,1fr), not 1fr, so the column can shrink below the player's
     content width — otherwise the player pushes ~16px past the screen. */
  .pod-hero-grid{grid-template-columns:minmax(0,1fr)}
  .pod-hero-copy{width:100%;max-width:none}
  .pod-hero-bg-art{right:-24%;width:105%;opacity:.7}
  .pod-player{justify-self:stretch;min-width:0}
  .studio-card{min-height:380px}
  .show-cards{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pod-sec-head{align-items:flex-start;flex-direction:column}
  .show-cover{width:clamp(84px,26vw,116px);border-radius:14px}
  .show-play-latest{padding:.5rem .9rem;font-size:.82rem}
  .pod-platform-row>span{display:none}
  .pod-seekrow{flex-wrap:wrap;justify-content:center}
  .pod-seek{order:-1;flex:1 1 100%}
}
@media (max-width:430px){
  /* Very narrow: stack the cover above the copy so titles aren't crushed. */
  .show-card{grid-template-columns:1fr}
  .show-cover{width:clamp(120px,42vw,160px)}
}


/* ===== Radio page ========================================================= */
/* Hero: copy on the left, the big live player card on the right. */
.rp-hero{position:relative;overflow:hidden;padding:clamp(44px,5.5vw,68px) 0 clamp(40px,5vw,60px);
  border-bottom:1px solid rgba(255,255,255,.07)}
.rp-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(3rem,6.5vw,6rem);align-items:stretch}
.rp-hero-copy{min-width:0}
.rp-hero-title{font-family:var(--display);font-weight:800;
  font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:.95;letter-spacing:-.05em;margin:1rem 0 0;color:#fdfbfe}
.rp-hero-title .accent{color:var(--violet-500);text-shadow:0 0 36px rgb(from var(--violet-500) r g b / .25)}
.rp-hero-lead{color:#c5c9d3;font-size:clamp(1.02rem,1.6vw,1.15rem);line-height:1.62;max-width:34rem;margin:1.1rem 0 0}
.rp-hero-lead strong{color:#fff}
.rp-points{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.rp-point{padding:.5rem .7rem;border:1px solid var(--line);border-radius:999px;background:#141721;
  color:#d5d8e1;font-size:.75rem;font-weight:700}
.rp-point b{color:var(--ok);margin-right:.35rem;font-size:.7em}
.rp-hero-links{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:1.4rem}
.rp-hero-links a{color:var(--accent-2);font-size:.85rem;font-weight:800}
.rp-hero-links a:hover{color:#fff}

/* Live player — the home page media bar, exact style/colors, rebuilt as a wide
   short glassy bar that fills the hero beside the copy. Element ids/classes kept
   so radio-player.js keeps driving it. */
/* Transparent glass panel, NO backdrop-filter (it softened the text/icons on a
   fractional-pixel grid cell). Glass look comes from translucency + edge light. */
.rp-player{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(18px,2.5vw,32px);padding:clamp(18px,2.2vw,26px) clamp(24px,3.2vw,38px);
  margin-top:calc(clamp(2.4rem,2.4vw,2.9rem) + 5px);align-self:start;
  width:100%;height:calc((100% - 2.6rem) * 0.9167);border:1px solid rgba(255,255,255,.14);border-radius:20px;
  background:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
/* On-demand mode adds a seek row, so let the bar grow to fit it. */
.rp-player.mode-track{height:auto}
.rp-bar-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.8vw,22px)}
.rp-play{flex:0 0 auto;width:clamp(60px,5vw,72px);height:clamp(60px,5vw,72px);border-radius:50%;
  border:1px solid var(--violet-500);background:rgb(from var(--violet-500) r g b / .16);color:var(--violet-300,#dec9e9);cursor:pointer;
  display:grid;place-items:center;transition:background .25s ease,box-shadow .25s ease,transform .12s ease}
.rp-play:hover{background:rgb(from var(--violet-500) r g b / .28);box-shadow:0 0 22px -2px rgb(from var(--violet-500) r g b / .55)}
.rp-play:active{transform:scale(.94)}
.rp-play:focus-visible{outline:2px solid var(--violet-400);outline-offset:3px}
.rp-play svg{width:26px;height:26px}
.rp-play .hp-play{margin-left:2px}.rp-play .hp-pause{display:none}
.rp-play.is-playing .hp-play{display:none}.rp-play.is-playing .hp-pause{display:block}
.rp-nowtext{flex:1 1 180px;min-width:150px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.rp-npline{display:flex;align-items:center;gap:8px}
.rp-nplabel{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--violet-300,#dec9e9)}
.rp-elapsed{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.4px;color:#5B6472}
.rp-nowtext h2{font-family:var(--display);margin:0;font-size:clamp(14px,1.4vw,16px);font-weight:600;color:#EAEDF2;
  letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-nowtext p{margin:0;font-size:12px;color:#8A93A2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-wave{flex:0 0 auto;width:100%;height:clamp(48px,6.5vh,76px);display:flex;align-items:flex-end;gap:2px;margin:0;padding:0}
.rp-wave i{flex:1;height:100%;border-radius:99px;background:linear-gradient(rgb(from var(--violet-400) r g b / .95),rgb(from var(--violet-600) r g b / .4));
  opacity:.9;transform:scaleY(var(--sy,.3));transform-origin:bottom;transition:transform .18s}
.rp-player.playing .rp-wave i{animation:rpPulse .85s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes rpPulse{from{transform:scaleY(.35);opacity:.5}to{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.rp-player.playing .rp-wave i{animation:none;transform:scaleY(.7)}}
.rp-controls{flex:0 0 auto;display:flex;align-items:center;gap:12px;margin:0;padding:0;border:0}
.rp-mute{width:32px;height:32px;border:1px solid #20242D;border-radius:2px;background:rgba(18,20,26,.8);color:#8A93A2;
  cursor:pointer;display:grid;place-items:center;transition:color .2s ease,border-color .2s ease}
.rp-mute:hover{color:#EAEDF2;border-color:#2C313B}
.rp-mute svg{width:16px;height:16px}
.rp-mute .rc-vol-off{display:none}
.rp-mute.is-muted .rc-vol-on{display:none}.rp-mute.is-muted .rc-vol-off{display:block}
.rp-vol{-webkit-appearance:none;appearance:none;accent-color:var(--violet-500);
  width:clamp(84px,9vw,120px);height:4px;border-radius:99px;cursor:pointer;
  background:rgb(from var(--violet-500) r g b / .32)}
.rp-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--violet-400);border:0;cursor:pointer;box-shadow:0 0 0 3px rgb(from var(--violet-500) r g b / .28)}
.rp-vol::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--violet-400);border:0;cursor:pointer}
.rp-vol::-moz-range-track{height:4px;border-radius:99px;background:rgb(from var(--violet-500) r g b / .32)}

/* Recently played strip (under the hero) */
.rp-recent{padding:1.6rem 0 .4rem}
.rp-recent .eyebrow{margin-bottom:.75rem}
.rp-recent-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;list-style:none;margin:0;padding:0}
.rp-recent-list li{min-width:0}
.rp-recent-list button{width:100%;min-height:66px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  text-align:left;font-family:inherit;cursor:pointer;background:#141721;border:1px solid var(--line);border-radius:12px;
  padding:.6rem .85rem;transition:border-color .15s}
.rp-recent-list button:hover{border-color:var(--violet-500)}
.rp-recent-list .rr-title{font-weight:600;font-size:.86rem;color:#eaedf2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-recent-list .rr-artist{font-size:.75rem;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-recent-list button.unavailable{opacity:.4;cursor:not-allowed}
.rp-recent-list button.unavailable:hover{border-color:var(--line)}
@media (max-width:700px){.rp-recent-list{grid-template-columns:repeat(2,1fr)}}

/* Back-to-live control (shows when the player is on an on-demand track) */
.rp-backlive{margin-top:.35rem;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--violet-200);font-size:.76rem;font-weight:700}
.rp-backlive:hover{color:#fff}

/* Programs & on-demand: one card; tabs live in their own header bar; all three
   panels are the same fixed height. */
.lib{margin-top:1.4rem;border:1px solid var(--line);border-radius:20px;background:#0f1119;overflow:hidden}
.lib-head{background:#0c0e15;border-bottom:1px solid var(--line);padding:0 .5rem}
.lib-tabs{display:flex;gap:.2rem;flex-wrap:wrap}
.lib-tab{cursor:pointer;padding:.95rem 1.3rem;border:0;background:transparent;border-bottom:2px solid transparent;
  color:var(--muted);font-family:var(--display);font-weight:700;font-size:.92rem;transition:.15s}
.lib-tab:hover{color:#fff}
.lib-tab.active{color:#fff;border-bottom-color:var(--violet-500)}
.lib-panel{display:flex;flex-direction:column;height:560px;padding:clamp(1rem,2.4vw,1.6rem);min-width:0}
.lib-panel[hidden]{display:none}

/* On-demand library */
.od-list{list-style:none;margin:0;padding:0 .5rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;
  flex:1;min-height:0;overflow-y:auto;align-content:start}
.od-list::-webkit-scrollbar{width:9px}
.od-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.od-empty{color:var(--muted)}
.od-item{display:flex;align-items:center;gap:.8rem;padding:.65rem .8rem;border:1px solid var(--line);border-radius:12px;
  background:#141721;cursor:pointer;transition:border-color .15s,background .15s;min-width:0}
.od-item:hover{border-color:var(--violet-600)}
.od-item.playing{border-color:var(--violet-500);background:var(--violet-900)}
.od-play{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--violet-500);
  background:rgb(from var(--violet-500) r g b / .16);color:var(--violet-200);display:grid;place-items:center;cursor:pointer}
.od-play svg{width:16px;height:16px}
.od-ic-pause{display:none}
.od-item.playing .od-ic-play{display:none}
.od-item.playing .od-ic-pause{display:block}
.od-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.od-meta strong{font-size:.9rem;font-weight:600;color:#eaedf2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-meta span{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.od-list{grid-template-columns:1fr}}
.rp-time{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.rp-actions{display:flex;gap:.5rem}
.rp-iconbtn{border:1px solid var(--line);border-radius:10px;background:#151721;color:#d4d6de;
  padding:.5rem .7rem;cursor:pointer;font-size:.78rem;font-weight:700}
.rp-iconbtn:hover{border-color:var(--accent);color:#fff}

/* On the air strip */
.rp-onnow{padding:1.2rem 0;border-bottom:1px solid rgba(255,255,255,.07);background:#0c0e15}
.rp-on-row{display:grid;grid-template-columns:auto repeat(3,1fr);gap:.7rem;align-items:stretch}
.rp-on-label{display:flex;align-items:center;padding-right:.7rem;color:var(--muted);font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}
.rp-timeline{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;padding:.8rem .95rem;
  border:1px solid var(--line);border-radius:13px;background:#141721;min-width:0}
.rp-timeline.active{border-color:var(--violet-600);background:var(--violet-900)}
.rp-tdot{width:38px;height:36px;display:grid;place-items:center;border-radius:10px;background:#222534;color:var(--accent-2);
  font-size:.62rem;font-weight:800;text-transform:uppercase}
.rp-timeline.active .rp-tdot{background:var(--violet-600);color:#fff}
.rp-timeline small{display:block;color:var(--muted);font-size:.58rem;text-transform:uppercase;letter-spacing:.09em}
.rp-timeline strong{display:block;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Section furniture */
.rp-muted{background:#0c0e15;border-block:1px solid rgba(255,255,255,.07)}
.rp-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.6rem;margin-bottom:1.8rem;flex-wrap:wrap}
.rp-sec-head>div{max-width:720px}
.rp-h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.04;
  letter-spacing:-.04em;margin:.5rem 0 .6rem}
.rp-sub{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.55}
.rp-aside{max-width:310px;margin:0;color:var(--muted);font-size:.82rem;text-align:right}

/* Program guide */
.rp-guide{border:0;background:none;padding:0;display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.rp-guide-tools{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;margin-bottom:1rem;flex-wrap:wrap;min-width:0}
/* min-width:0 lets this flex item shrink below its content so overflow-x:auto
   actually scrolls the day chips instead of forcing the whole library wide. */
.rp-days{display:flex;gap:.45rem;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.rp-day{scroll-snap-align:start}
.rp-day{flex:none;min-width:72px;padding:.55rem .7rem;border:1px solid var(--line);border-radius:12px;background:#141721;
  color:var(--muted);cursor:pointer;font-family:var(--font);font-weight:700;text-align:center;transition:.15s}
.rp-day small{display:block;font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.1rem}
.rp-day:hover{border-color:var(--violet-600);color:var(--text)}
.rp-day.active{color:#fff;border-color:var(--violet-500);background:var(--violet-600)}
.rp-guide-opts{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
/* reused 12/24 segmented toggle */
.wsx-seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.2rem;gap:.2rem}
.wsx-seg-btn{background:none;border:0;color:var(--muted);padding:.4rem .8rem;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.8rem;transition:.15s}
.wsx-seg-btn:hover{color:var(--text)}
.wsx-seg-btn.active{background:var(--violet-600);color:#fff}
.rp-select{border:1px solid var(--line);border-radius:11px;background:#151822;color:#d9dbe3;padding:.5rem .65rem;
  font-family:var(--font);font-size:.85rem;cursor:pointer}
.rp-select:focus{outline:none;border-color:var(--accent)}
.rp-guide-list{display:grid;gap:.5rem;flex:1;min-height:0;overflow-y:auto;padding-right:.5rem;align-content:start}
.rp-guide-empty{padding:2rem 1.2rem;text-align:center;border:1px dashed #3b4050;border-radius:14px;color:var(--muted);line-height:1.6}
.rp-program{display:grid;grid-template-columns:110px 1fr auto;gap:1.2rem;align-items:center;padding:1rem 1.15rem;
  border:1px solid var(--line);border-radius:15px;background:linear-gradient(110deg,#171a25,#11131b);transition:.2s border-color,.2s transform}
.rp-program:hover{border-color:var(--violet-700);transform:translateX(3px)}
.rp-program.live{border-color:var(--beacon-500);background:linear-gradient(110deg,rgb(from var(--beacon-500) r g b / .12),#12131c)}
.rp-prog-time{font-family:var(--display);font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
.rp-prog-time small{display:block;color:var(--muted);font-size:.66rem;font-weight:600}
.rp-prog-body h3{font-family:var(--display);margin:0;font-size:1.1rem}
.rp-prog-tag{padding:.4rem .6rem;border-radius:999px;background:var(--violet-900);color:var(--accent-2);font-size:.62rem;
  font-weight:800;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.rp-program.live .rp-prog-tag{background:var(--beacon-500);color:#17110a}
.rp-guide-foot{margin-top:1rem;color:var(--muted);font-size:.82rem}

/* Why listeners stay */
.rp-why{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.rp-whycard{padding:1.5rem;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.rp-why-ico{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--violet-900);color:var(--accent-2);font-size:1.3rem}
.rp-why-ico svg{width:22px;height:22px}
.rp-whycard h3{font-family:var(--display);font-size:1.2rem;margin:1rem 0 .35rem}
.rp-whycard p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.5}



/* Sticky mini player */
.rp-mini{position:fixed;z-index:55;left:50%;bottom:15px;transform:translateX(-50%);
  width:min(760px,calc(100% - 24px));display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;
  padding:.7rem .85rem;border:1px solid var(--violet-600);border-radius:16px;background:rgb(from var(--violet-900) r g b / .94);
  backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,.44)}
.rp-mini[hidden]{display:none}
body.has-player .rp-mini{bottom:88px}
.rp-mini-play{width:39px;height:39px;flex:none;border:1px solid var(--violet-500);border-radius:50%;background:var(--violet-600);color:#fff;cursor:pointer;display:grid;place-items:center}
.rp-mini-play:hover{background:var(--violet-500)}
.rp-mini-play svg{width:17px;height:17px}
.rp-mini-play .hp-play{margin-left:2px}.rp-mini-play .hp-pause{display:none}
.rp-mini-play.is-playing .hp-play{display:none}.rp-mini-play.is-playing .hp-pause{display:block}
.rp-mini-meta{min-width:0}
.rp-mini-meta small{display:block;color:var(--accent-2);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em}
.rp-mini-meta strong{display:block;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-mini-live{display:inline-flex;align-items:center;gap:.35rem;color:var(--beacon-500);font-size:.7rem;font-weight:800;white-space:nowrap}
.rp-mini-live i{width:7px;height:7px;border-radius:50%;background:var(--beacon-500);box-shadow:0 0 10px var(--beacon-500)}

@media (max-width:950px){
  .rp-hero-grid{grid-template-columns:1fr}
  .rp-on-row{grid-template-columns:1fr 1fr}
  .rp-on-label{grid-column:1/-1}
  .rp-why{grid-template-columns:1fr 1fr}
  .rp-program{grid-template-columns:90px 1fr auto}
  /* Schedule: on mobile the fixed-height panel + internal scroll traps the
     list (nearly impossible to scroll under the fixed player). Let the panel
     grow and the list flow so the whole page scrolls the schedule. */
  .lib-panel{height:auto}
  .rp-guide{flex:none;min-height:0}
  .rp-guide-list{overflow-y:visible;flex:none;min-height:0;padding-right:0}
}
@media (max-width:620px){
  .rp-bigstatus{display:none}
  .rp-on-row{grid-template-columns:1fr}
  .rp-sec-head{align-items:flex-start;flex-direction:column}
  .rp-aside{text-align:left}
  .rp-guide-tools{align-items:stretch;flex-direction:column}
  .rp-days{width:100%}
  .rp-program{grid-template-columns:76px 1fr}
  .rp-prog-tag{grid-column:2;justify-self:start}
  .rp-why{grid-template-columns:1fr}
}

/* ===== Radio play button: loading/buffering spinner ======================= */
/* Both the home and radio play buttons use id="heroPlay"; the mini-player
   button gets .is-loading too. While connecting we hide the play/pause icon
   and spin a ring so the click clearly registered. */
#heroPlay,.rp-mini-play{position:relative}
#heroPlay.is-loading svg,.rp-mini-play.is-loading svg{opacity:0}
#heroPlay.is-loading::after,.rp-mini-play.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:42%;aspect-ratio:1;
  margin:0;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  transform:translate(-50%,-50%);animation:heroSpin .7s linear infinite}
@keyframes heroSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  #heroPlay.is-loading::after,.rp-mini-play.is-loading::after{animation-duration:1.4s}
}

/* ---------- On-demand category filters ----------
   Chips built from the categories the admin console defines. The second row
   appears only when the selected category has sub-categories with content. */
.od-filters,.od-subfilters{display:flex;flex-wrap:wrap;gap:.45rem;padding:.9rem 1.1rem 0}
.od-subfilters{padding-top:.55rem}
.od-chip{cursor:pointer;font:inherit;font-size:.82rem;font-weight:700;color:var(--muted);
  background:#0d0f18;border:1px solid var(--line);border-radius:99px;padding:.4rem .9rem;
  transition:color .15s,border-color .15s,background .15s}
.od-chip:hover{color:#fff;border-color:rgb(from var(--violet-400) r g b / .5)}
.od-chip.active{color:#fff;background:rgb(from var(--violet-600) r g b / .28);
  border-color:rgb(from var(--violet-400) r g b / .7)}
.od-subfilters .od-chip{font-size:.76rem;padding:.32rem .75rem}

/* ================= Listen: Schedule + On Demand, side by side =============
   Two matching cards. Each has an icon badge, a title/subtitle stack and a
   "view all" action, then its own list. They stack on narrow screens. */
.lx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem;align-items:start}
.lx-card{border:1px solid var(--line);border-radius:20px;background:#0c0e16;overflow:hidden;
  padding:1.1rem 1.15rem 1.15rem}
.lx-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.lx-ico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--violet-500),var(--violet-700));
  box-shadow:0 6px 18px rgb(from var(--violet-600) r g b / .35)}
.lx-ico svg{width:21px;height:21px}
.lx-titles{min-width:0;flex:1}
.lx-titles h2{font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff;margin:0;line-height:1.15}
.lx-titles p{margin:.15rem 0 0;color:var(--muted);font-size:.82rem}
.lx-more{flex:none;cursor:pointer;font:inherit;font-size:.78rem;font-weight:700;color:#dfe3ec;
  background:#141826;border:1px solid var(--line);border-radius:99px;padding:.42rem .85rem;transition:.15s}
.lx-more:hover{color:#fff;border-color:rgb(from var(--violet-400) r g b / .6);
  background:rgb(from var(--violet-600) r g b / .22)}
.lx-opts{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.85rem}

/* Day pills */
.lx-card .rp-days{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:none}
.lx-card .rp-days::-webkit-scrollbar{display:none}
.lx-card .rp-day{flex:none;cursor:pointer;font:inherit;text-align:center;line-height:1.15;
  padding:.45rem .7rem;border-radius:12px;border:1px solid var(--line);background:#10131d;
  color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:.15s}
.lx-card .rp-day span{display:block;font-size:.74rem;letter-spacing:.02em;color:#fff;margin-top:.15rem}
.lx-card .rp-day:hover{border-color:rgb(from var(--violet-400) r g b / .5)}
.lx-card .rp-day.active{background:linear-gradient(160deg,var(--violet-600),var(--violet-700));
  border-color:transparent;color:#fff}

/* Rows — shared shape for a programme and a track */
.lx-row{display:flex;align-items:center;gap:.75rem;padding:.7rem .75rem;margin-bottom:.45rem;
  border:1px solid var(--line);border-radius:14px;background:#10131d;transition:.15s}
.lx-row:hover{border-color:rgb(from var(--violet-400) r g b / .45);background:#141826}
.lx-when{flex:none;width:58px;text-align:left;line-height:1.1}
.lx-when strong{display:block;font-family:var(--display);font-size:.98rem;color:#fff;font-variant-numeric:tabular-nums}
.lx-when small{display:block;font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.lx-badge{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  color:var(--violet-300,#dac1e6);background:rgb(from var(--violet-900) r g b / .55);
  border:1px solid rgb(from var(--violet-400) r g b / .3)}
.lx-badge svg{width:17px;height:17px}
.lx-name{flex:1;min-width:0}
.lx-name strong{display:block;color:#fff;font-size:.92rem;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-name span{display:block;color:var(--muted);font-size:.78rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-acts{flex:none;display:flex;align-items:center;gap:.35rem}
.lx-act{cursor:pointer;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:var(--muted);background:transparent;border:0;transition:.15s}
.lx-act:hover{color:#fff;background:rgb(from var(--violet-600) r g b / .28)}
.lx-act svg{width:16px;height:16px}
.lx-act.is-done{color:var(--ok)}
.lx-state{flex:none;font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--violet-400);min-width:64px;text-align:right}
.lx-state.is-live{display:inline-flex;align-items:center;gap:.35rem;justify-content:flex-end;color:#ff6b6b}
.lx-state.is-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff6b6b;
  box-shadow:0 0 0 3px rgb(255 107 107 / .2)}
.lx-dur{flex:none;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
/* Round play button on on-demand rows */
.lx-play{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:#fff;border:0;background:linear-gradient(150deg,var(--violet-500),var(--violet-700));
  box-shadow:0 4px 12px rgb(from var(--violet-600) r g b / .4);transition:transform .15s}
.lx-play:hover{transform:scale(1.06)}
.lx-play svg{width:15px;height:15px}
.od-item.playing .lx-play{background:linear-gradient(150deg,#fff,#d9d2ff);color:#25132d}
.lx-list{list-style:none;margin:0;padding:0}
.lx-empty{color:var(--muted);font-size:.88rem;padding:.8rem .2rem}

@media (max-width:980px){ .lx-grid{grid-template-columns:1fr} }

/* The on-demand list inside a .lx-card is a single column of full-width rows —
   the older two-column grid squeezed the titles into ellipses. */
.lx-card .od-list{display:block;padding:0;max-height:none;overflow:visible}
.lx-card .od-list .lx-row{margin-bottom:.45rem}

/* The listen cards track the HERO's width, not the narrower text container, and
   keep widening with the viewport. The side gutter matches the hero's own inset
   so the card edges line up with the hero copy above them. */
.lx-wrap{width:100%;padding-inline:clamp(16px,3vw,48px)}
/* Equal height: stretch both columns, then let each card fill its cell so the
   two always end on the same line however many rows each holds. */
.lx-grid{align-items:stretch}
.lx-card{display:flex;flex-direction:column;height:100%}
.lx-card .od-list,.lx-card .rp-guide{flex:1}
.lx-card .lx-opts{margin-top:auto;padding-top:.85rem}

/* Inside a card the panel already supplies the side padding, so the filter rows
   only need breathing room BELOW them — without this the chips sat directly on
   the first track. */
.lx-card .od-filters{padding:.1rem 0 .9rem}
.lx-card .od-subfilters{padding:0 0 .8rem}

/* Clock format + timezone now sit in the Schedule card's header, so they wrap
   neatly beside the title rather than anchoring to the bottom of the card. */
.lx-head .lx-opts{margin:0;padding:0;flex:none;justify-content:flex-end;gap:.45rem}
.lx-head .rp-select{font-size:.76rem;padding:.34rem .5rem}
.lx-head .wsx-seg-btn{font-size:.72rem;padding:.3rem .6rem}
@media (max-width:1240px){
  .lx-head{flex-wrap:wrap}
  .lx-head .lx-opts{width:100%;justify-content:flex-start}
}

/* Fixed viewport: ten rows visible, scroll for the rest. Both cards therefore
   have the same height no matter how many programmes or tracks there are —
   previously each card grew or shrank with its content. */
.lx-card{--lx-row:62px;--lx-rows:10}
.lx-card .od-list,.lx-card .rp-guide-list{
  max-height:calc(var(--lx-row) * var(--lx-rows));
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.lx-card .od-list::-webkit-scrollbar,.lx-card .rp-guide-list::-webkit-scrollbar{width:8px}
.lx-card .od-list::-webkit-scrollbar-track,.lx-card .rp-guide-list::-webkit-scrollbar-track{background:transparent}
.lx-card .od-list::-webkit-scrollbar-thumb,.lx-card .rp-guide-list::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:99px}
.lx-card .od-list::-webkit-scrollbar-thumb:hover,.lx-card .rp-guide-list::-webkit-scrollbar-thumb:hover{
  background:rgb(from var(--violet-400) r g b / .55)}
/* Room for the scrollbar so it never overlaps the row's right-hand controls. */
.lx-card .od-list .lx-row,.lx-card .rp-guide-list .lx-row{margin-right:.25rem}
@media (max-width:980px){ .lx-card{--lx-rows:8} }


/* The home page's Schedule + On Demand console moved to media-hub.css, which
   replaces the .lx-* shell with the UCN media-console design. The generic
   .lx-* rules above stay for any other page that still uses them. */