/* =============================================================================
   ECHOS IN THE ETHER — STYLESHEET
   -----------------------------------------------------------------------------
   A dark, modern, "late-night shortwave" aesthetic:
     - near-black background with soft cyan/amber/violet glows
     - glassmorphic nav + sticky player (backdrop blur)
     - signal-cyan primary accent, dial-amber secondary
     - animated equalizer + brand pulse to feel "live"
   Dependency-free: system font stack (fast, offline-safe, looks modern).
   Organized top→bottom: tokens → base → nav → hero → sections → schedule →
   episodes → about → footer → player → responsive.
   ========================================================================== */

/* ----------------------------- Design tokens ----------------------------- */
:root{
  --bg:        #07080c;   /* base night background                    */
  --bg-2:      #0c0e15;   /* slightly lifted surfaces                 */
  --panel:     #11141d;   /* cards / panels                           */
  --panel-2:   #161a26;   /* hovered / raised panels                  */
  --ink:       #e9ecf2;   /* primary text                             */
  --muted:     #9aa3b2;   /* secondary text                           */
  --line:      #232838;   /* hairline borders                         */

  --cyan:      #38e1d6;   /* primary accent (signal)                  */
  --amber:     #f5a623;   /* secondary accent (dial glow)             */
  --violet:    #7c5cff;   /* depth accent                             */
  --rose:      #ff6b8b;   /* alert / on-air                           */

  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1120px;
  --player-h:  76px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Courier New", monospace;
}

/* ------------------------------- Base / reset ---------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(56,225,214,.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(124,92,255,.10), transparent 55%),
    radial-gradient(900px 600px at 80% 120%, rgba(245,166,35,.08), transparent 55%),
    var(--bg);
  line-height:1.65;
  /* keep content clear of the sticky player at the bottom */
  padding-bottom:calc(var(--player-h) + 8px);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--cyan); text-decoration:none; }
a:hover{ color:#7af1e8; }
h1,h2,h3{ line-height:1.15; margin:0; }
img{ max-width:100%; display:block; }

/* Shared button styles */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.98rem; letter-spacing:.01em;
  padding:.8rem 1.3rem; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{
  color:#04201e; background:linear-gradient(135deg, var(--cyan), #6bf0c6);
  box-shadow:0 8px 26px rgba(56,225,214,.28);
}
.btn--primary:hover{ box-shadow:0 10px 34px rgba(56,225,214,.42); }
.btn--ghost{
  color:var(--ink); background:rgba(255,255,255,.03);
  border-color:var(--line); backdrop-filter:blur(4px);
}
.btn--ghost:hover{ border-color:var(--cyan); color:#fff; }
.btn__icon{ font-size:.85em; }

/* ================================ NAV ==================================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,9,13,.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:.85rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--ink); }
.brand__name{ font-weight:800; letter-spacing:.14em; font-size:1rem; }
.brand__thin{ font-weight:400; color:var(--muted); letter-spacing:.06em; }
/* Pulsing "signal" dot next to the wordmark */
.brand__pulse{
  width:11px; height:11px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 0 rgba(56,225,214,.6);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(56,225,214,.55); }
  70%{ box-shadow:0 0 0 12px rgba(56,225,214,0); }
  100%{ box-shadow:0 0 0 0 rgba(56,225,214,0); }
}
.nav__links{ display:flex; align-items:center; gap:1.4rem; }
.nav__links a{ color:var(--muted); font-weight:600; font-size:.95rem; }
.nav__links a:hover{ color:var(--ink); }
.nav__cta{
  color:var(--cyan) !important; border:1px solid var(--line);
  padding:.45rem .9rem; border-radius:999px;
}
.nav__cta:hover{ border-color:var(--cyan); }

/* ================================ HERO =================================== */
.hero{
  position:relative; overflow:hidden;
  /* Size to content. The old min-height(82vh) + align-items:center left a huge
     dead zone between the equalizer and Broadcast Schedule below. */
  display:flex; align-items:flex-start;
  padding:3rem 1.25rem 1.6rem;
}
.hero__stars{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 320px at 30% 40%, rgba(56,225,214,.16), transparent 70%),
    radial-gradient(540px 320px at 75% 60%, rgba(124,92,255,.16), transparent 70%);
  filter:blur(6px);
}
.hero__content{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; width:100%;
}
.hero__kicker{
  font-family:var(--mono); letter-spacing:.22em; text-transform:uppercase;
  font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:.9rem;
}
.onair{
  color:var(--rose); font-weight:700;
  animation:blink 1.4s steps(2,start) infinite;
}
@keyframes blink{ 50%{ opacity:.25; } }
.hero__title{
  font-size:clamp(2.8rem, 8vw, 6.2rem);
  font-weight:800; letter-spacing:.04em; margin:.4rem 0 .2rem;
  background:linear-gradient(180deg, #ffffff, #b9c2d6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(56,225,214,.12);
}
.hero__thin{ font-weight:300; color:var(--muted); -webkit-text-fill-color:var(--muted); }
.hero__tagline{
  font-size:clamp(1.05rem, 2.2vw, 1.4rem); color:var(--muted);
  /* Narrow cap on small screens only. 46ch on desktop forced a bad break at "just". */
  max-width:46ch; margin:.4rem 0 1.8rem;
  text-wrap:balance;
}
@media (min-width:768px){
  .hero__tagline{ max-width:none; text-wrap:nowrap; }
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.hero__live-group{
  display:flex; align-items:center; gap:.75rem; flex-shrink:0;
}

/* Animated equalizer bars (left of Listen Live in the hero) */
.equalizer{ display:flex; align-items:flex-end; gap:5px; height:42px; flex-shrink:0; }
.equalizer span{
  width:5px; border-radius:3px;
  background:linear-gradient(180deg, var(--cyan), var(--violet));
  animation:eq 1.1s ease-in-out infinite;
  opacity:.85;
}
.equalizer span:nth-child(odd){ animation-duration:.9s; }
.equalizer span:nth-child(1){ animation-delay:-.2s; }
.equalizer span:nth-child(2){ animation-delay:-.5s; }
.equalizer span:nth-child(3){ animation-delay:-.1s; }
.equalizer span:nth-child(4){ animation-delay:-.7s; }
.equalizer span:nth-child(5){ animation-delay:-.3s; }
.equalizer span:nth-child(6){ animation-delay:-.6s; }
.equalizer span:nth-child(7){ animation-delay:-.15s; }
.equalizer span:nth-child(8){ animation-delay:-.45s; }
.equalizer span:nth-child(9){ animation-delay:-.25s; }
.equalizer span:nth-child(10){ animation-delay:-.55s; }
@keyframes eq{ 0%,100%{ height:8px; } 50%{ height:40px; } }
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .equalizer span, .brand__pulse, .onair, .live-dot, .player__live{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================== SECTIONS ================================= */
.section{ max-width:var(--maxw); margin:0 auto; padding:2.4rem 1.25rem; }
.hero + .section{ padding-top:1.6rem; }
.section__head{ margin-bottom:1.6rem; }
.section__title{
  font-size:clamp(1.6rem, 3.4vw, 2.3rem); font-weight:800; letter-spacing:.01em;
}
.section__title::after{
  content:""; display:block; width:54px; height:3px; margin-top:.7rem;
  background:linear-gradient(90deg, var(--cyan), transparent); border-radius:3px;
}
.section__sub{ color:var(--muted); max-width:60ch; margin:.6rem 0 0; }

/* ============================== SCHEDULE ================================= */
.schedule-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem;
}
.sched-card{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.2rem 1.3rem;
  position:relative; overflow:hidden;
}
.sched-card.is-live{ border-color:var(--rose); box-shadow:0 0 0 1px rgba(255,107,139,.4), 0 12px 40px rgba(255,107,139,.12); }
.sched-card__live{
  position:absolute; top:.9rem; right:.9rem; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.12em; color:var(--rose); font-weight:700;
}
.sched-card__region{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
.sched-card__freq{ font-size:1.7rem; font-weight:800; margin:.5rem 0 .15rem; }
.sched-card__time{ color:var(--muted); }

/* ============================== EPISODES ================================= */
.episode-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.2rem;
}
.ep-card{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.7rem;
  transition:transform .18s ease, border-color .18s ease, box-shadow .25s ease;
}
.ep-card:hover{ transform:translateY(-3px); border-color:rgba(56,225,214,.5); box-shadow:0 18px 50px rgba(0,0,0,.45); }
.ep-card.is-playing{ border-color:var(--cyan); box-shadow:0 0 0 1px rgba(56,225,214,.5), 0 18px 50px rgba(56,225,214,.14); }
.ep-card__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.ep-card__date{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.ep-card__badge{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:#04201e; background:var(--cyan); border-radius:999px; padding:.18rem .6rem; font-weight:700;
}
.ep-card__title{ font-size:1.2rem; font-weight:700; letter-spacing:.005em; }
.ep-card__summary{ color:var(--muted); font-size:.95rem; flex:1; }
.ep-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  font-size:.7rem; color:var(--muted); border:1px solid var(--line);
  padding:.16rem .55rem; border-radius:999px; background:rgba(255,255,255,.02);
}
.ep-card__foot{ display:flex; align-items:center; gap:.7rem; margin-top:.4rem; }
.ep-play{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-weight:700; font-size:.92rem; color:#04201e;
  background:linear-gradient(135deg, var(--cyan), #6bf0c6);
  border:none; padding:.55rem 1rem; border-radius:999px;
  transition:box-shadow .2s ease, transform .15s ease;
}
.ep-play:hover{ box-shadow:0 8px 24px rgba(56,225,214,.34); }
.ep-play:disabled{
  background:var(--panel-2); color:var(--muted); cursor:not-allowed;
  border:1px solid var(--line); box-shadow:none;
}
.ep-notes{ color:var(--muted); font-size:.85rem; border-bottom:1px dashed var(--line); }
.ep-notes:hover{ color:var(--cyan); }
.ep-card__duration{ margin-left:auto; font-family:var(--mono); font-size:.78rem; color:var(--muted); }

/* =============================== ABOUT =================================== */
.about{ display:grid; grid-template-columns:1.6fr 1fr; gap:1.6rem; align-items:start; }
.about__text p{ color:var(--muted); }
.about__text strong{ color:var(--ink); }
.about__card{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;
}
.about__card-title{ font-size:1.05rem; margin-bottom:.6rem; }
.about__address{ font-style:normal; font-family:var(--mono); color:var(--ink); line-height:1.9; font-size:.95rem; }

/* =============================== SUPPORT ================================= */
/* Home-page callout (compact banner linking to support.html). */
.support-cta__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.6rem;
}
.support-cta__inner .section__sub{ margin-top:.5rem; }

/* Support page: kicker + card grid. */
.support-page{ padding-top:1.4rem; }
.support-kicker{
  font-family:var(--mono); letter-spacing:.2em; text-transform:uppercase;
  font-size:.75rem; color:var(--cyan); margin:0 0 .4rem;
}
.support-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.2rem;
  margin-top:.4rem;
}
.support-card{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.7rem;
}
/* Author display:flex above overrides the native [hidden] keyword (HTML spec).
   Without this, PayPal/Patreon cards stay visible even with hidden set. */
.support-card[hidden]{ display:none !important; }
.support-card__title{ font-size:1.15rem; font-weight:700; }
.support-card__desc{ color:var(--muted); font-size:.95rem; flex:1; margin:0; }
.support-card__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.support-note{ color:var(--muted); font-size:.85rem; margin:.2rem 0 0; }
.support-mail{
  margin-top:1.4rem;
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;
}
.support-mail .about__address{ margin-top:.5rem; }
.support-thanks{ color:var(--muted); font-style:italic; margin-top:1.4rem; }
.support-note--error{
  color:#ffc8d4; background:rgba(255,107,139,.08);
  border:1px solid rgba(255,107,139,.35); padding:.85rem 1rem; border-radius:var(--radius-sm);
}
.support-note--error code{ font-family:var(--mono); font-size:.85em; color:var(--ink); }

/* =============================== FOOTER ================================== */
.footer{ border-top:1px solid var(--line); margin-top:1rem; }
.footer__inner{
  max-width:var(--maxw); margin:0 auto; padding:1.6rem 1.25rem;
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center; justify-content:space-between;
  color:var(--muted); font-size:.86rem;
}
.footer__brand{ font-weight:800; letter-spacing:.14em; color:var(--ink); }
.footer__tag{ font-style:italic; }

/* ========================= STICKY AUDIO PLAYER =========================== */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:60; height:var(--player-h);
  background:rgba(10,12,18,.86); backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--line);
  transition:transform .3s ease;
}
/* When nothing has been loaded yet, slide the player out of view. */
.player[data-empty="true"]{ transform:translateY(110%); }
.player__inner{
  max-width:var(--maxw); margin:0 auto; height:100%; padding:0 1rem;
  display:flex; align-items:center; gap:.8rem;
}
.player__btn{
  background:rgba(255,255,255,.04); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; height:40px; min-width:44px; padding:0 .6rem; cursor:pointer;
  font-weight:700; font-size:.85rem; transition:border-color .15s ease, color .15s ease;
}
.player__btn:hover{ border-color:var(--cyan); color:#fff; }
.player__toggle{
  background:linear-gradient(135deg, var(--cyan), #6bf0c6); color:#04201e; border:none;
  font-size:1rem; min-width:48px; height:44px;
}
.player__meta{ min-width:0; width:clamp(120px, 22vw, 260px); }
.player__title{ display:block; font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player__date{ display:block; font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.player__progress{ flex:1; display:flex; align-items:center; gap:.6rem; min-width:120px; }
.player__time{ font-family:var(--mono); font-size:.74rem; color:var(--muted); min-width:38px; text-align:center; }

/* Range inputs (seek + volume) styled for dark UI */
.player__seek, .player__volume{
  -webkit-appearance:none; appearance:none; height:5px; border-radius:999px;
  background:var(--line); cursor:pointer;
}
.player__seek{ flex:1; }
.player__volume{ width:90px; }
.player__seek::-webkit-slider-thumb, .player__volume::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 4px rgba(56,225,214,.18); cursor:pointer;
}
.player__seek::-moz-range-thumb, .player__volume::-moz-range-thumb{
  width:14px; height:14px; border:none; border-radius:50%; background:var(--cyan); cursor:pointer;
}
.player__vol{ display:flex; align-items:center; gap:.4rem; }
.player__vol-icon{ font-size:.95rem; }

/* Episode-card title is now a link to the show's own page. */
.ep-card__title-link{ color:var(--ink); }
.ep-card__title-link:hover{ color:var(--cyan); }

/* ========================== EPISODE PAGE ================================= */
.ep-page{ min-height:60vh; }
.ep-loading{ max-width:var(--maxw); margin:0 auto; padding:3rem 1.25rem; color:var(--muted); }

/* Episode hero/header */
.ep-hero{
  max-width:var(--maxw); margin:0 auto; padding:2.6rem 1.25rem 1.4rem;
  border-bottom:1px solid var(--line);
}
.ep-hero.is-playing .ep-hero__title{ color:var(--cyan); }
.ep-back{ font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--muted); }
.ep-back:hover{ color:var(--cyan); }
.ep-hero__date{ font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin:1rem 0 .3rem; }
.ep-hero__title{ font-size:clamp(1.8rem, 4.5vw, 3rem); font-weight:800; letter-spacing:.01em; }
.ep-hero__summary{ color:var(--muted); font-size:1.12rem; max-width:64ch; margin:.8rem 0 1rem; }
.ep-hero__actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.5rem; }
.ep-hero__duration{ font-family:var(--mono); font-size:.82rem; color:var(--muted); }

/* Episode content sections */
.ep-section{ max-width:var(--maxw); margin:0 auto; padding:2.2rem 1.25rem; border-bottom:1px solid var(--line); }
.ep-section:last-child{ border-bottom:none; }
.ep-section__title{
  font-size:1.4rem; font-weight:800; margin-bottom:1.1rem;
}
.ep-section__title::after{
  content:""; display:block; width:46px; height:3px; margin-top:.6rem;
  background:linear-gradient(90deg, var(--cyan), transparent); border-radius:3px;
}

/* Long-form notes / script prose */
.prose{ max-width:72ch; color:var(--ink); }
.prose h3{ font-size:1.18rem; color:#fff; margin:1.8rem 0 .5rem; }
.prose h3:first-child{ margin-top:0; }
.prose p{ color:#c9d0dc; margin:0 0 1rem; }
.prose ul{ margin:0 0 1.1rem; padding-left:1.2rem; color:#c9d0dc; }
.prose li{ margin:.3rem 0; }
.prose a{ color:var(--cyan); text-decoration:underline; text-underline-offset:2px; }
.prose strong{ color:#fff; }

/* Photo gallery */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:.8rem; }
.gallery__item{
  position:relative; padding:0; border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; cursor:zoom-in; background:var(--panel); display:block;
}
.gallery__item img{ width:100%; height:170px; object-fit:cover; display:block; transition:transform .3s ease; }
.gallery__item:hover img{ transform:scale(1.06); }
.gallery__cap{
  position:absolute; left:0; right:0; bottom:0; padding:.5rem .6rem;
  font-size:.78rem; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,.78), transparent);
}

/* Videos (responsive 16:9 embeds + hosted files) */
.videos{ display:grid; gap:1.4rem; }
.video figcaption{ color:var(--muted); font-size:.88rem; margin-top:.5rem; }
.video-embed{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-file{ width:100%; border-radius:var(--radius-sm); border:1px solid var(--line); background:#000; }

/* Downloads */
.downloads{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.downloads a{
  display:inline-block; font-weight:600; color:var(--cyan);
  border:1px solid var(--line); padding:.55rem .9rem; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02);
}
.downloads a:hover{ border-color:var(--cyan); }

/* Not-found state */
.ep-notfound{ max-width:var(--maxw); margin:0 auto; padding:4rem 1.25rem; text-align:center; }
.ep-notfound h1{ font-size:2rem; margin-bottom:.6rem; }
.ep-notfound p{ color:var(--muted); margin-bottom:1.4rem; }

/* Fullscreen lightbox for gallery photos */
.lightbox{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(4,6,10,.92); backdrop-filter:blur(6px); padding:2rem;
}
.lightbox[hidden]{ display:none; }
.lightbox__figure{ margin:0; max-width:min(1000px, 92vw); max-height:88vh; text-align:center; }
.lightbox__figure img{ max-width:100%; max-height:78vh; border-radius:var(--radius-sm); box-shadow:0 24px 80px rgba(0,0,0,.6); }
.lightbox__figure figcaption{ color:#cdd4e0; margin-top:.8rem; font-size:.92rem; }
.lightbox__close{
  position:absolute; top:1rem; right:1.2rem; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.06); color:#fff; border:1px solid var(--line); cursor:pointer; font-size:1rem;
}
.lightbox__close:hover{ border-color:var(--cyan); }

/* ===================== LIVE (24/7 STREAM) CONTROLS ====================== */
/* Pulsing red dot used on the Listen Live buttons. */
.live-dot{
  width:9px; height:9px; border-radius:50%; background:var(--rose); display:inline-block;
  box-shadow:0 0 0 0 rgba(255,107,139,.6); animation:pulse-rose 1.8s infinite;
}
@keyframes pulse-rose{
  0%{ box-shadow:0 0 0 0 rgba(255,107,139,.55); }
  70%{ box-shadow:0 0 0 9px rgba(255,107,139,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,107,139,0); }
}
.btn--live{ color:#fff; background:linear-gradient(135deg, var(--rose), #ff9a76); box-shadow:0 8px 26px rgba(255,107,139,.25); }
.btn--live:hover{ box-shadow:0 10px 34px rgba(255,107,139,.42); }
.nav__live{ display:inline-flex; align-items:center; gap:.4rem; color:var(--rose) !important; font-weight:700; }
.nav__live:hover{ color:#ff90a6 !important; }
/* Disabled state while the stream URL is not configured yet. */
[data-listen-live].is-disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.35); }

/* Player "live mode": show the LIVE badge, hide the seek bar and skip buttons
   (a live stream has no fixed position to scrub to). */
.player__live{ display:none; color:var(--rose); font-family:var(--mono); font-weight:700; font-size:.72rem; letter-spacing:.1em; animation:blink 1.4s steps(2,start) infinite; }
.player[data-live="true"] .player__live{ display:inline; }
.player[data-live="true"] .player__progress{ display:none; }
.player[data-live="true"] #btn-back,
.player[data-live="true"] #btn-fwd{ display:none; }

/* ============================== RESPONSIVE =============================== */
@media (max-width: 820px){
  .about{ grid-template-columns:1fr; }

  /* Mobile nav: previously every link except the CTA was hidden here, so on
     phones only "Play latest" showed and there was no menu to reach the rest.
     Instead, let the brand stay on the first row and the links wrap onto a
     full-width second row so ALL of them stay reachable (no JS, no hamburger). */
  .nav__inner{ flex-wrap:wrap; }
  .nav__links{
    width:100%;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:.7rem 1.1rem;
    font-size:.9rem;
  }
  .nav__cta{ margin-left:auto; }   /* keep the CTA visually anchored right */

  .player__meta{ display:none; }                   /* save room for controls */
  .player__vol{ display:none; }
}
@media (max-width: 480px){
  .section{ padding:2rem 1rem; }
  .hero + .section{ padding-top:1.2rem; }
  .hero{ padding:2.2rem 1rem 1.2rem; }
  .nav__links{ gap:.6rem .9rem; font-size:.86rem; }
}