/* 2026-08-11 batch — ported in full from the approved mockup
   (SBN-Radio-handover-Peter/webradio-station-stellar.html, structure
   identical across all 4 stations) per the "100% follow the
   documentation" directive. CSS pulled out into this external file
   rather than inline, per explicit instruction. The OLD .bio-overlay/
   .bio-panel/etc rules near the bottom are kept UNCHANGED — "Meet the
   Host" (out of scope, no mockup counterpart) still depends on them. */

/* ============================================================
   RADIO STELLAR — PREMIUM STATION DESTINATION
   The other three station pages deliberately keep the established compact
   layout while Radio Stellar acts as the visual pilot for the later family.
   ============================================================ */
.stellar-station-page{
  min-height:100vh; height:auto; padding-bottom:112px;
  background-attachment:fixed;
}
.stellar-station-page .scrim{
  background:
    radial-gradient(circle at 76% 23%,rgba(90,179,255,.12),transparent 23%),
    radial-gradient(circle at 54% 16%,rgba(230,184,102,.085),transparent 28%),
    linear-gradient(180deg,rgba(1,5,9,.18) 0%,rgba(2,6,11,.48) 42%,rgba(2,5,9,.88) 72%,#020509 100%);
}
.stellar-station-page #page-main{padding:0;}
.stellar-station-page header{
  width:min(1440px,100%); margin:0 auto; padding:13px clamp(22px,4vw,58px);
  border-bottom:1px solid rgba(164,214,255,.1);
  background:linear-gradient(180deg,rgba(2,7,12,.62),rgba(2,7,12,.08));
  backdrop-filter:blur(7px);
}
.stellar-station-page .back-link{color:rgba(225,238,245,.68); transition:color .2s ease,transform .2s ease;}
.stellar-station-page .back-link:hover{color:#fff; transform:translateX(-3px);}
.stellar-station-page .back-link img{filter:drop-shadow(0 0 22px rgba(230,184,102,.2));}
.stellar-station-page .here img{height:58px; border:1px solid rgba(159,216,255,.3); box-shadow:0 0 28px rgba(69,177,255,.22);}
.stellar-station-page .here small{color:rgba(212,229,239,.52);}

.stellar-page-shell{position:relative; z-index:3; overflow:hidden;}
.stellar-stage{
  position:relative; isolation:isolate; width:min(1340px,calc(100% - 48px)); min-height:700px;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); align-items:center; gap:38px;
  margin:0 auto; padding:56px clamp(28px,5vw,78px) 86px;
}
.stellar-stage::after{
  content:''; position:absolute; z-index:-1; left:3%; right:3%; bottom:28px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(126,204,255,.28),rgba(230,184,102,.38),transparent);
}
.stellar-stage-glow{
  position:absolute; z-index:-2; right:2%; top:5%; width:58%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(75,171,240,.13),rgba(16,51,81,.055) 38%,transparent 70%);
  filter:blur(4px); pointer-events:none;
}
.stellar-stage-orbit{
  position:absolute; z-index:-1; right:2%; top:49%; border:1px solid rgba(156,213,250,.14);
  border-radius:50%; pointer-events:none; transform:translateY(-50%) rotate(-16deg);
}
.stellar-stage-orbit::before,.stellar-stage-orbit::after{
  content:''; position:absolute; border-radius:50%; background:#e8c57c;
  box-shadow:0 0 12px rgba(230,184,102,.7);
}
.stellar-stage-orbit::before{width:6px; height:6px; left:12%; top:14%;}
.stellar-stage-orbit::after{width:4px; height:4px; right:11%; bottom:18%; background:#8dd8ff; box-shadow:0 0 10px rgba(113,208,255,.7);}
.stellar-stage-orbit.orbit-one{width:54%; aspect-ratio:1.7/1; animation:stellarOrbitBreath 8s ease-in-out infinite;}
.stellar-stage-orbit.orbit-two{right:7%; width:43%; aspect-ratio:1.55/1; border-color:rgba(230,184,102,.14); transform:translateY(-50%) rotate(15deg); animation:stellarOrbitBreath 8s ease-in-out -4s infinite;}
@keyframes stellarOrbitBreath{0%,100%{opacity:.45}50%{opacity:1}}

.stellar-stage-copy{position:relative; z-index:3; max-width:690px;}
.stellar-kicker{
  display:flex; align-items:center; gap:12px; margin-bottom:20px; color:#d9bd7c;
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
}
.stellar-kicker span{width:42px; height:1px; background:linear-gradient(90deg,#d9bd7c,transparent);}
.stellar-stage h1{
  margin:0; color:#fff; font-family:'Orbitron',sans-serif; font-size:clamp(58px,7.8vw,114px);
  font-weight:800; letter-spacing:-.065em; line-height:.82; text-transform:uppercase;
  text-shadow:0 0 60px rgba(98,193,255,.17),0 10px 46px rgba(0,0,0,.5);
}
.stellar-stage h1 small{
  display:block; margin:0 0 11px 7px; color:#9cdcff; font-family:'Rajdhani',sans-serif;
  font-size:.2em; font-weight:600; letter-spacing:.48em; line-height:1; text-transform:uppercase;
}
.stellar-tagline{
  margin:25px 0 9px; color:#efcf88; font-family:'Rajdhani',sans-serif;
  font-size:clamp(16px,1.8vw,23px); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.stellar-stage-copy>p{
  max-width:590px; color:rgba(231,237,240,.73); font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(20px,2vw,27px); line-height:1.38;
}
.stellar-actions{display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:31px;}
.stellar-listen{
  min-width:190px; padding:14px 27px; border:1px solid #efc66f; border-radius:999px;
  background:linear-gradient(135deg,#f1cc7c,#d9a84e); box-shadow:0 15px 36px rgba(191,137,41,.18);
  color:#151006; font-family:'Rajdhani',sans-serif; font-weight:700; transition:transform .2s ease,box-shadow .2s ease;
}
.stellar-listen:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 18px 44px rgba(191,137,41,.28);}
.stellar-secondary{
  padding:10px 2px; border-bottom:1px solid rgba(154,214,249,.3); color:rgba(230,241,247,.78);
  font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:600; letter-spacing:.13em;
  text-decoration:none; text-transform:uppercase; transition:color .2s ease,border-color .2s ease;
}
.stellar-secondary span{margin-left:7px; color:#efc66f;}
.stellar-secondary:hover{color:#fff; border-color:#9bdcff;}
.stellar-live-state{display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:28px;}
.stellar-live-state .live-pill{margin:0; padding:7px 12px; border:1px solid rgba(125,255,176,.2); border-radius:999px; background:rgba(6,18,19,.55);}
.stellar-live-note{color:rgba(206,222,231,.48); font:500 10px 'Rajdhani',sans-serif; letter-spacing:.17em; text-transform:uppercase;}

.stellar-emblem{position:relative; min-height:500px; display:grid; place-items:center;}
.stellar-emblem img{
  position:relative; z-index:3; width:min(400px,82%); filter:drop-shadow(0 28px 52px rgba(0,0,0,.68)) drop-shadow(0 0 34px rgba(77,179,247,.24));
  animation:stellarFloat 7s ease-in-out infinite;
}
@keyframes stellarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.stellar-emblem-halo{position:absolute; border-radius:50%; border:1px solid rgba(128,206,255,.14);}
.stellar-emblem-halo.halo-a{width:94%; aspect-ratio:1; box-shadow:inset 0 0 70px rgba(66,164,229,.035);}
.stellar-emblem-halo.halo-b{width:72%; aspect-ratio:1; border-color:rgba(230,184,102,.16);}
.stellar-emblem-halo.halo-c{width:50%; aspect-ratio:1; border-style:dashed; animation:stellarSpin 45s linear infinite;}
@keyframes stellarSpin{to{transform:rotate(360deg)}}
.stellar-emblem-caption{
  position:absolute; z-index:4; right:2%; bottom:5%; min-width:190px; padding:13px 17px;
  border-left:1px solid rgba(230,184,102,.55); background:linear-gradient(90deg,rgba(3,9,14,.78),transparent);
}
.stellar-emblem-caption span{display:block; color:#8ed8ff; font:600 9px 'Rajdhani',sans-serif; letter-spacing:.22em; text-transform:uppercase;}
.stellar-emblem-caption b{display:block; margin-top:4px; font:600 14px 'Rajdhani',sans-serif; letter-spacing:.09em; text-transform:uppercase;}
.stellar-scroll-cue{
  position:absolute; z-index:6; left:50%; bottom:34px; display:flex; flex-direction:column; align-items:center; gap:5px;
  color:rgba(221,234,241,.58); text-decoration:none; transform:translateX(-50%);
}
.stellar-scroll-cue b{font:600 8px 'Rajdhani',sans-serif; letter-spacing:.2em; text-transform:uppercase;}
.stellar-scroll-cue em{color:#e8c575; font:400 15px 'Rajdhani',sans-serif; animation:stellarScrollDrop 1.35s ease-in-out infinite;}
.stellar-scroll-signal{height:18px; display:flex; align-items:center; gap:3px;}
.stellar-scroll-signal i{width:2px; height:5px; border-radius:2px; background:#83d9ff; animation:stellarScrollSignal .9s ease-in-out infinite alternate;}
.stellar-scroll-signal i:nth-child(2),.stellar-scroll-signal i:nth-child(4){height:11px; animation-delay:-.25s;}
.stellar-scroll-signal i:nth-child(3){height:17px; background:#e8c575; animation-delay:-.5s;}
@keyframes stellarScrollSignal{from{transform:scaleY(.35);opacity:.4}to{transform:scaleY(1);opacity:1}}
@keyframes stellarScrollDrop{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(4px);opacity:1}}

.stellar-signal-deck{
  position:relative; width:min(1220px,calc(100% - 48px)); display:grid; grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr); gap:18px;
  margin:-45px auto 94px; padding:18px; border:1px solid rgba(157,213,248,.17); border-radius:24px;
  background:linear-gradient(145deg,rgba(6,14,21,.91),rgba(9,11,16,.88));
  box-shadow:0 34px 90px rgba(0,0,0,.47),inset 0 1px rgba(255,255,255,.03); backdrop-filter:blur(20px);
}
.stellar-signal-deck::before{
  content:''; position:absolute; left:5%; right:5%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,#78cff9,#e6b866,transparent); opacity:.65;
}
.stellar-now-card,.stellar-up-next{min-width:0; padding:27px 28px; border-radius:16px; background:rgba(255,255,255,.025);}
.stellar-now-card{border:1px solid rgba(230,184,102,.17);}
.stellar-up-next{border:1px solid rgba(143,210,249,.13);}
.stellar-card-label,.stellar-card-heading span{
  color:#86d7ff; font:600 9px 'Rajdhani',sans-serif; letter-spacing:.24em; text-transform:uppercase;
}
.stellar-now-layout{display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:0 19px; margin-top:21px;}
.stellar-now-cover{
  position:relative; grid-row:1/2; width:112px; aspect-ratio:1; overflow:hidden;
  border:1px solid rgba(230,184,102,.28); border-radius:14px; background-position:center; background-size:cover;
  box-shadow:0 16px 30px rgba(0,0,0,.3),inset 0 0 25px rgba(0,0,0,.08);
  appearance:none; padding:0; text-align:left; opacity:1;
}
.stellar-now-cover::after{content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);}
.stellar-now-cover.fallback{background-size:83%; background-repeat:no-repeat; background-color:#050b10;}
.stellar-cover-index{
  position:absolute; z-index:2; left:10px; bottom:8px; color:#efd08a;
  font:500 18px 'Cormorant Garamond',Georgia,serif; text-shadow:0 2px 8px #000;
}
.stellar-cover-ribbon{
  /* Keep the complete label below the cover's clipped top edge. The rotated
     text used to lift the first M outside the card even though the ribbon
     itself still looked intact. */
  position:absolute; z-index:4; top:19px; right:-42px; width:160px; padding:6px 0;
  background:linear-gradient(90deg,#d9a84e,#f1cf82); box-shadow:0 5px 16px rgba(0,0,0,.38);
  color:#161006; font:800 9px/1.25 'Rajdhani',sans-serif; letter-spacing:.1em; text-align:center; text-transform:uppercase; white-space:nowrap;
  transform:rotate(35deg) translateY(-18px); opacity:0; transition:transform .3s ease,opacity .3s ease;
}
.stellar-cover-ribbon b{font-size:10px;}
.stellar-now-cover.has-bio{cursor:pointer; transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;}
.stellar-now-cover.has-bio .stellar-cover-ribbon{transform:rotate(35deg) translateY(0); opacity:1;}
.stellar-now-cover.has-bio:hover,.stellar-now-cover.has-bio:focus-visible{
  border-color:#efcb7c; box-shadow:0 18px 36px rgba(0,0,0,.42),0 0 26px rgba(230,184,102,.16); transform:translateY(-2px);
  outline:none;
}
.stellar-now-copy{min-width:0; display:flex; flex-direction:column;}
.stellar-now-copy strong{overflow:hidden; color:#fff; font:700 clamp(19px,2vw,27px) 'Rajdhani',sans-serif; text-overflow:ellipsis; white-space:nowrap;}
.stellar-now-copy span{margin-top:3px; overflow:hidden; color:rgba(217,226,231,.56); font:500 13px 'Rajdhani',sans-serif; letter-spacing:.07em; text-overflow:ellipsis; white-space:nowrap;}
.stellar-wave{grid-column:1/-1; height:54px; display:flex; align-items:center; justify-content:center; gap:5px; margin-top:27px; overflow:hidden;}
.stellar-wave i{width:2px; height:18%; border-radius:2px; background:linear-gradient(180deg,#9fe1ff,#d9b460); opacity:.36; transform-origin:center;}
.stellar-wave i:nth-child(2n){height:45%}.stellar-wave i:nth-child(3n){height:72%}.stellar-wave i:nth-child(5n){height:95%}
.stellar-wave.active i{opacity:.9; animation:stellarWave .9s ease-in-out infinite alternate;}
.stellar-wave.active i:nth-child(2n){animation-delay:-.25s}.stellar-wave.active i:nth-child(3n){animation-delay:-.55s}.stellar-wave.active i:nth-child(4n){animation-delay:-.72s}
@keyframes stellarWave{from{transform:scaleY(.28)}to{transform:scaleY(1)}}
.stellar-card-heading{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:13px;}
.stellar-card-heading h2{margin-top:3px; color:#fff; font:700 22px 'Rajdhani',sans-serif; letter-spacing:.02em;}
.stellar-sequence-status{color:rgba(225,235,240,.39)!important; letter-spacing:.12em!important; white-space:nowrap;}
.stellar-up-next .rundown{max-width:none; margin:0; border:0; border-radius:0; background:transparent;}
.stellar-up-next .rundown .row{padding:9px 0; border-color:rgba(157,213,248,.1);}
.stellar-up-next .rundown .row.now{background:transparent;}
.stellar-up-next .rundown .queue-cover{
  width:40px; height:40px; border:1px solid rgba(143,210,249,.2); border-radius:7px;
  background-position:center; background-size:cover; box-shadow:0 7px 16px rgba(0,0,0,.22);
}
.stellar-up-next .rundown .queue-cover.fallback{background-size:76%; background-repeat:no-repeat; background-color:#050a0e;}
.stellar-up-next .rundown .t{font:600 14px 'Rajdhani',sans-serif;}
.stellar-up-next .rundown .a{font:500 11px 'Rajdhani',sans-serif; letter-spacing:.04em;}
.stellar-up-next .rundown .bio-link{
  padding-bottom:2px; border-bottom:1px solid rgba(230,184,102,.22); color:#e6c374;
  font:700 8px 'Rajdhani',sans-serif; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
}
.stellar-up-next .rundown .bio-link:hover{border-color:#e6c374; color:#fff;}

.stellar-discovery{
  width:min(1220px,calc(100% - 48px)); display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:64px;
  align-items:center; margin:0 auto 104px; padding:0 10px;
}
.stellar-section-kicker{color:#8dd8ff; font:600 10px 'Rajdhani',sans-serif; letter-spacing:.28em; text-transform:uppercase;}
.stellar-section-copy h2{
  margin:12px 0 17px; color:#fff; font:600 clamp(36px,4.5vw,61px) 'Cormorant Garamond',Georgia,serif; line-height:.92;
}
.stellar-section-copy h2 em{color:#e8c87e; font-weight:500;}
.stellar-section-copy p{max-width:460px; color:rgba(219,228,233,.65); font:500 16px/1.62 'Rajdhani',sans-serif;}
.stellar-section-copy a{display:inline-block; margin-top:23px; color:#e9c777; font:700 11px 'Rajdhani',sans-serif; letter-spacing:.14em; text-decoration:none; text-transform:uppercase;}
.stellar-section-copy a span{display:inline-block; margin-left:8px; transition:transform .2s ease;}
.stellar-section-copy a:hover span{transform:translateX(5px);}
.stellar-artists{max-width:none; margin:0;}
.stellar-artists .artist-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.stellar-artists .artist-card{
  min-width:0; min-height:190px; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:18px;
  border-color:rgba(139,208,249,.14); border-radius:17px; overflow:hidden;
  background:linear-gradient(180deg,rgba(17,28,38,.38),rgba(5,10,15,.92)); position:relative;
}
.stellar-artists .artist-card::after{content:''; position:absolute; inset:0; border:1px solid transparent; border-radius:inherit; transition:border-color .25s ease,background .25s ease;}
.stellar-artists .artist-card:hover::after{border-color:rgba(230,184,102,.38); background:linear-gradient(180deg,transparent,rgba(230,184,102,.045));}
.stellar-artists .artist-card .avatar{
  position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; opacity:.42; filter:saturate(.8);
}
.stellar-artists .artist-card .avatar::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 15%,rgba(3,8,12,.25) 45%,#03080c 100%);}
.stellar-artists .artist-card>div:last-child{position:relative; z-index:2;}
.stellar-artists .artist-card .name{color:#fff; font:700 16px 'Rajdhani',sans-serif;}
.stellar-artists .artist-card .note{margin-top:4px; color:#e3c272; font:600 8px 'Rajdhani',sans-serif; letter-spacing:.13em;}
.stellar-artists .station-switch-card{
  isolation:isolate; min-height:212px; padding:20px; transform:translateY(0);
  text-decoration:none; transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.stellar-artists .station-switch-card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.52;
  background:
    linear-gradient(180deg,rgba(3,9,14,.14) 0%,rgba(3,8,12,.48) 46%,rgba(3,8,12,.96) 100%),
    radial-gradient(circle at 72% 22%,var(--station-glow),transparent 46%),
    var(--station-image) var(--station-position,center) / cover no-repeat;
  transition:opacity .28s ease,transform .55s ease;
}
.stellar-artists .station-switch-card::after{z-index:4;}
.stellar-artists .station-switch-card:hover{
  transform:translateY(-7px); border-color:var(--station-accent); box-shadow:0 24px 48px rgba(0,0,0,.36),0 0 28px var(--station-shadow);
}
.stellar-artists .station-switch-card:hover::before{opacity:.86; transform:scale(1.04);}
.stellar-artists .station-switch-card img{
  position:absolute; z-index:1; top:14px; right:12px; width:104px; height:104px; object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)); opacity:.9; transition:transform .4s ease,filter .4s ease;
}
.stellar-artists .station-switch-card:hover img{transform:translateY(-4px) scale(1.06); filter:drop-shadow(0 10px 24px var(--station-shadow));}
.station-switch-copy{position:relative; z-index:3; display:flex; flex-direction:column; align-items:flex-start; max-width:78%;}
.station-switch-copy span{margin-bottom:8px; color:var(--station-accent); font:700 8px 'Rajdhani',sans-serif; letter-spacing:.17em; text-transform:uppercase;}
.station-switch-copy strong{color:#fff; font:700 19px 'Rajdhani',sans-serif; line-height:1;}
.station-switch-copy small{margin-top:7px; color:rgba(222,232,238,.56); font:600 9px 'Rajdhani',sans-serif; letter-spacing:.1em; text-transform:uppercase;}
.station-switch-arrow{
  position:absolute; z-index:3; right:18px; bottom:16px; width:28px; height:28px; display:grid; place-items:center;
  border:1px solid color-mix(in srgb,var(--station-accent) 46%,transparent); border-radius:50%; color:var(--station-accent);
  font:500 14px 'Rajdhani',sans-serif; transition:background .2s ease,color .2s ease,transform .2s ease;
}
.station-switch-card:hover .station-switch-arrow{background:var(--station-accent); color:#051019; transform:rotate(6deg);}
.station-stellar{--station-accent:#e8c87e;--station-glow:rgba(112,182,236,.28);--station-shadow:rgba(115,199,247,.18);--station-image:url('../img/webradio-station-bg-stellar.webp');--station-position:center;}
.stellar-artists .station-switch-card.station-stellar{
  border-color:rgba(180,126,255,.4);
  box-shadow:inset 0 0 0 1px rgba(180,126,255,.09),0 12px 32px rgba(0,0,0,.18);
}
.stellar-artists .station-switch-card.station-stellar:hover{
  border-color:#c58cff;
  box-shadow:0 24px 50px rgba(0,0,0,.38),0 0 34px rgba(176,100,255,.3),inset 0 0 0 1px rgba(211,167,255,.18);
}
.stellar-artists .station-switch-card.station-stellar:hover::after{
  border-color:rgba(204,145,255,.68);
  background:linear-gradient(180deg,rgba(181,98,255,.035),rgba(181,98,255,.11));
}
.stellar-artists .station-switch-card.station-stellar:hover img{
  filter:drop-shadow(0 10px 25px rgba(193,118,255,.48));
}
.stellar-artists .station-switch-card.station-stellar:hover .station-switch-arrow{background:#c58cff; border-color:#c58cff; color:#12051c;}
.station-quantum{--station-accent:#7bd4ff;--station-glow:rgba(62,156,222,.28);--station-shadow:rgba(69,179,241,.18);--station-image:url('../img/webradio-station-bg-quantum.webp');--station-position:center;}
.station-pulse{--station-accent:#ff52ca;--station-glow:rgba(255,38,180,.3);--station-shadow:rgba(255,48,186,.2);--station-image:url('../img/webradio-station-bg-pulse.webp');--station-position:center;}
.station-redneck{--station-accent:#e8b864;--station-glow:rgba(190,111,43,.3);--station-shadow:rgba(222,150,58,.18);--station-image:url('../img/webradio-station-bg-redneck.webp');--station-position:center;}
.stellar-artists .artist-fallback{
  justify-content:space-between; background:
    radial-gradient(circle at 80% 12%,rgba(117,205,251,.1),transparent 38%),
    linear-gradient(155deg,rgba(15,26,36,.8),rgba(4,9,14,.96));
}
.stellar-artists .artist-fallback>div:last-child{position:relative; z-index:2;}
.artist-fallback-mark{
  position:relative!important; z-index:2; color:rgba(230,184,102,.47);
  font:300 35px 'Cormorant Garamond',Georgia,serif;
}

.stellar-signature{
  position:relative; width:min(1220px,calc(100% - 48px)); min-height:290px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:50px;
  margin:0 auto 54px; padding:54px clamp(30px,6vw,78px); overflow:hidden;
  border:1px solid rgba(230,184,102,.2); border-radius:24px;
  background:
    linear-gradient(110deg,rgba(3,8,13,.95) 0%,rgba(3,8,13,.82) 54%,rgba(4,7,11,.91) 100%),
    radial-gradient(circle at 72% 20%,rgba(78,178,239,.13),transparent 35%),
    url('../img/hosts-shows-universe-v3.webp') center 47% / cover no-repeat;
  box-shadow:0 28px 76px rgba(0,0,0,.36);
}
.stellar-signature::after{content:'S'; position:absolute; right:4%; top:-29%; color:rgba(255,255,255,.018); font:800 390px 'Orbitron',sans-serif; pointer-events:none;}
.stellar-signature-line{position:absolute; left:0; top:22%; bottom:22%; width:2px; background:linear-gradient(#88d9ff,#e8c575);}
.stellar-signature-copy{position:relative; z-index:2;}
.stellar-signature-copy>span{color:#8bd7fb; font:600 9px 'Rajdhani',sans-serif; letter-spacing:.29em; text-transform:uppercase;}
.stellar-signature-copy h2{margin:8px 0 3px; color:#fff; font:600 clamp(38px,5vw,66px) 'Cormorant Garamond',Georgia,serif; line-height:1;}
.stellar-signature-copy p{color:rgba(217,226,231,.58); font:500 16px 'Rajdhani',sans-serif;}
.stellar-signature-actions{position:relative; z-index:2; display:flex; flex-direction:column; gap:11px; min-width:210px;}
.stellar-signature-actions a{padding:13px 17px; border:1px solid rgba(230,184,102,.25); border-radius:999px; color:#f1d28c; font:700 10px 'Rajdhani',sans-serif; letter-spacing:.16em; text-align:center; text-decoration:none; text-transform:uppercase; transition:background .2s ease,border-color .2s ease;}
.stellar-signature-actions a:hover{border-color:#e8c575; background:rgba(230,184,102,.08);}
.stellar-footer-credit{flex-direction:column; gap:7px; margin-bottom:5px!important; padding:14px 24px 12px;}
.stellar-footer-credit-main{display:flex; align-items:center; justify-content:center;}
.stellar-footer-ai{max-width:760px; color:rgba(186,198,207,.48); font-size:9px; line-height:1.45; letter-spacing:.025em; text-wrap:balance;}
.stellar-footer-credit img{flex:none;}

/* The four stations share one premium architecture, while the current
   station's two signal colours tune the lighting and controls. */
.station-premium-page .scrim{
  background:
    radial-gradient(circle at 76% 23%,color-mix(in srgb,var(--premium-primary) 14%,transparent),transparent 25%),
    radial-gradient(circle at 54% 16%,color-mix(in srgb,var(--premium-secondary) 9%,transparent),transparent 29%),
    linear-gradient(180deg,rgba(1,5,9,.18) 0%,rgba(2,6,11,.48) 42%,rgba(2,5,9,.88) 72%,#020509 100%);
}
.station-premium-page header{border-bottom-color:color-mix(in srgb,var(--premium-primary) 14%,transparent);}
.station-premium-page .here img{
  border-color:color-mix(in srgb,var(--premium-primary) 36%,transparent);
  box-shadow:0 0 28px color-mix(in srgb,var(--premium-primary) 24%,transparent);
}
.station-premium-page .stellar-stage::after{
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--premium-primary) 46%,transparent),color-mix(in srgb,var(--premium-secondary) 58%,transparent),transparent);
}
.station-premium-page .stellar-stage-glow{
  background:radial-gradient(circle,color-mix(in srgb,var(--premium-primary) 16%,transparent),color-mix(in srgb,var(--premium-primary) 6%,transparent) 38%,transparent 70%);
}
.station-premium-page .stellar-stage-orbit{border-color:color-mix(in srgb,var(--premium-primary) 18%,transparent);}
.station-premium-page .stellar-stage-orbit.orbit-two{border-color:color-mix(in srgb,var(--premium-secondary) 18%,transparent);}
.station-premium-page .stellar-stage-orbit::before{
  background:var(--premium-secondary); box-shadow:0 0 12px color-mix(in srgb,var(--premium-secondary) 72%,transparent);
}
.station-premium-page .stellar-stage-orbit::after{
  background:var(--premium-primary); box-shadow:0 0 10px color-mix(in srgb,var(--premium-primary) 72%,transparent);
}
.station-premium-page .stellar-kicker{color:var(--premium-secondary);}
.station-premium-page .stellar-kicker span{background:linear-gradient(90deg,var(--premium-secondary),transparent);}
.station-premium-page .stellar-stage h1{text-shadow:0 0 60px color-mix(in srgb,var(--premium-primary) 18%,transparent),0 10px 46px rgba(0,0,0,.5);}
.station-premium-page .stellar-stage h1 small{color:var(--premium-primary);}
.station-premium-page .stellar-tagline{color:var(--premium-secondary);}
.station-premium-page .stellar-listen{
  border-color:var(--premium-secondary);
  background:linear-gradient(135deg,color-mix(in srgb,var(--premium-secondary) 92%,white),color-mix(in srgb,var(--premium-primary) 72%,var(--premium-secondary)));
  box-shadow:0 15px 36px color-mix(in srgb,var(--premium-primary) 18%,transparent);
}
.station-premium-page .stellar-secondary{border-bottom-color:color-mix(in srgb,var(--premium-primary) 34%,transparent);}
.station-premium-page .stellar-secondary span{color:var(--premium-secondary);}
.station-premium-page .stellar-emblem img{filter:drop-shadow(0 28px 52px rgba(0,0,0,.68)) drop-shadow(0 0 34px color-mix(in srgb,var(--premium-primary) 27%,transparent));}
.station-premium-page .stellar-emblem-halo{border-color:color-mix(in srgb,var(--premium-primary) 18%,transparent);}
.station-premium-page .stellar-emblem-halo.halo-b{border-color:color-mix(in srgb,var(--premium-secondary) 20%,transparent);}
.station-premium-page .stellar-emblem-caption{border-left-color:color-mix(in srgb,var(--premium-secondary) 62%,transparent);}
.station-premium-page .stellar-emblem-caption span,.station-premium-page .stellar-scroll-signal i,.station-premium-page .stellar-card-label,.station-premium-page .stellar-card-heading span,.station-premium-page .stellar-section-kicker{color:var(--premium-primary);}
.station-premium-page .stellar-scroll-signal i{background:var(--premium-primary);}
.station-premium-page .stellar-scroll-signal i:nth-child(3){background:var(--premium-secondary);}
.station-premium-page .stellar-scroll-cue em{color:var(--premium-secondary);}
.station-premium-page .stellar-signal-deck::before{background:linear-gradient(90deg,transparent,var(--premium-primary),var(--premium-secondary),transparent);}
.station-premium-page .stellar-now-card{border-color:color-mix(in srgb,var(--premium-secondary) 22%,transparent);}
.station-premium-page .stellar-cover-ribbon{background:linear-gradient(90deg,var(--premium-primary),var(--premium-secondary));}
.station-premium-page .stellar-section-copy a{color:var(--premium-secondary);}
.station-premium-page .stellar-wave i{background:linear-gradient(180deg,var(--premium-primary),var(--premium-secondary));}
.station-premium-page .stellar-section-copy h2 em{color:var(--premium-secondary);}
.station-premium-page .stellar-signature-line{background:linear-gradient(var(--premium-primary),var(--premium-secondary));}
.station-premium-page .stellar-signature-copy>span{color:var(--premium-primary);}
.station-premium-page .stellar-signature-actions a{border-color:color-mix(in srgb,var(--premium-secondary) 28%,transparent); color:var(--premium-secondary);}
.station-premium-page .stellar-signature-actions a:hover{border-color:var(--premium-secondary); background:color-mix(in srgb,var(--premium-secondary) 9%,transparent);}
.station-quantum .stellar-signature::after{content:'Q';}
.station-pulse .stellar-signature::after{content:'P';}
.station-redneck .stellar-signature::after{content:'R';}

/* At the primary 1920x1080 broadcast/desktop target, the first complete
   experience — header, identity/logo and live sequence — fits before the
   fold. The editorial discovery sections intentionally begin below it. */
@media(min-width:1100px) and (min-height:700px){
  .stellar-station-page header{padding-top:3px; padding-bottom:3px;}
  .stellar-station-page .back-link img{height:70px;}
  .stellar-station-page .here img{height:44px;}
  .stellar-stage{min-height:500px; padding-top:16px; padding-bottom:52px;}
  .stellar-stage h1{font-size:clamp(58px,7vw,100px);}
  .stellar-tagline{margin-top:19px;}
  .stellar-actions{margin-top:22px;}
  .stellar-live-state{margin-top:19px;}
  .stellar-emblem{min-height:390px;}
  .stellar-emblem img{width:min(335px,75%);}
  .stellar-emblem-caption{bottom:2%;}
  .stellar-scroll-cue{bottom:50px;}
  .stellar-signal-deck{margin-top:-48px; margin-bottom:94px; padding:10px;}
  .stellar-now-card,.stellar-up-next{padding:16px 20px;}
  .stellar-now-layout{grid-template-columns:92px minmax(0,1fr); margin-top:14px; column-gap:15px;}
  .stellar-now-cover{width:92px;}
  .stellar-wave{height:30px; margin-top:9px;}
  .stellar-card-heading{margin-bottom:7px;}
  .stellar-card-heading h2{font-size:20px;}
  .stellar-up-next .rundown .row{padding:6px 0;}
  .stellar-up-next .rundown .queue-cover{width:34px; height:34px;}
}

/* The global player is fixed near the bottom edge. On shorter desktop
   viewports, pull the live deck slightly farther into the hero so the
   player's frame never sits across the final playlist row. */
@media(min-width:1100px) and (min-height:700px) and (max-height:920px){
  .stellar-signal-deck{margin-top:-66px;}
}

@media(max-width:1050px){
  .stellar-stage{grid-template-columns:1fr .78fr; min-height:560px; padding-inline:34px;}
  .stellar-stage h1{font-size:clamp(54px,8vw,86px);}
  .stellar-emblem{min-height:360px;}
  .stellar-emblem img{width:min(300px,82%);}
  .stellar-signal-deck{grid-template-columns:1fr; margin-top:-18px;}
  .stellar-discovery{grid-template-columns:1fr; gap:36px;}
  .stellar-section-copy{max-width:700px;}
}
@media(max-width:900px){
  .stellar-discovery{width:calc(100% - 32px);}
  .stellar-artists .artist-grid{grid-template-columns:1fr;}
  .stellar-artists .station-switch-card{min-height:142px; padding:18px 22px;}
  .stellar-artists .station-switch-card img{top:50%; right:28px; width:116px; height:116px; transform:translateY(-50%);}
  .stellar-artists .station-switch-card:hover img{transform:translateY(calc(-50% - 4px)) scale(1.04);}
  .station-switch-copy{max-width:62%;}
}
@media(max-width:760px){
  .stellar-station-page{background-attachment:scroll; padding-bottom:128px;}
  .stellar-station-page header{justify-content:space-between; padding-inline:18px;}
  .stellar-station-page .back-link{font-size:10px;}
  .stellar-station-page .here .word{display:none;}
  .stellar-station-page .back-link img{height:58px;}
  .stellar-station-page .here img{height:44px;}
  .stellar-stage{width:100%; min-height:auto; grid-template-columns:1fr; gap:10px; padding:42px 22px 78px; text-align:center;}
  .stellar-stage-copy{display:flex; flex-direction:column; align-items:center;}
  .stellar-kicker{font-size:9px; letter-spacing:.2em;}
  .stellar-stage h1{font-size:clamp(50px,17vw,78px);}
  .stellar-stage h1 small{margin-left:0;}
  .stellar-stage-copy>p{font-size:20px;}
  .stellar-actions,.stellar-live-state{justify-content:center;}
  .stellar-emblem{min-height:310px; margin-top:-8px;}
  .stellar-emblem img{width:min(265px,72vw);}
  .stellar-emblem-caption{right:8%; bottom:2%; text-align:left;}
  .stellar-scroll-cue{bottom:52px;}
  .stellar-stage-orbit.orbit-one{right:-22%; width:118%;}.stellar-stage-orbit.orbit-two{right:-7%; width:88%;}
  .stellar-signal-deck,.stellar-discovery,.stellar-signature{width:calc(100% - 24px);}
  .stellar-signal-deck{margin-top:-44px; margin-bottom:68px; padding:10px; border-radius:18px;}
  .stellar-now-card,.stellar-up-next{padding:22px 18px;}
  .stellar-now-layout{grid-template-columns:94px minmax(0,1fr);}
  .stellar-now-cover{width:94px;}
  .stellar-sequence-status{display:none;}
  .stellar-discovery{margin-bottom:68px; padding:0 8px;}
  .stellar-section-copy{text-align:center;}
  .stellar-section-copy p{margin-inline:auto;}
  .stellar-artists .artist-grid{grid-template-columns:1fr;}
  .stellar-artists .artist-card{min-height:160px;}
  .stellar-signature{grid-template-columns:1fr; gap:30px; min-height:auto; margin-bottom:34px; padding:42px 25px; text-align:center;}
  .stellar-signature-actions{width:100%; min-width:0;}
  .stellar-signature-line{top:0; bottom:auto; left:20%; right:20%; width:auto; height:1px;}
  .stellar-emblem img,.stellar-stage-orbit,.stellar-emblem-halo{animation:none!important;}
}
@media(max-width:520px){
  .stellar-station-page{padding-bottom:112px;}
  .stellar-station-page header{padding:7px 12px;}
  .stellar-station-page .back-link{gap:6px; font-size:8px;}
  .stellar-station-page .back-link img{height:50px;}
  .stellar-station-page .here img{height:38px;}
  .stellar-stage{padding:34px 16px 68px;}
  .stellar-kicker{gap:8px; font-size:8px; letter-spacing:.14em;}
  .stellar-kicker span{width:24px;}
  .stellar-stage h1{font-size:clamp(46px,16vw,66px);}
  .stellar-tagline{font-size:14px; letter-spacing:.16em;}
  .stellar-stage-copy>p{font-size:18px; line-height:1.35;}
  .stellar-actions{width:100%; flex-direction:column; gap:8px; margin-top:23px;}
  .stellar-listen{width:min(100%,280px);}
  .stellar-live-state{margin-top:20px; gap:8px;}
  .stellar-live-note{font-size:8px; letter-spacing:.1em;}
  .stellar-emblem{min-height:260px;}
  .stellar-emblem img{width:min(225px,68vw);}
  .stellar-emblem-caption{right:4%; min-width:150px; padding:10px 12px;}
  .stellar-scroll-cue{bottom:48px;}
  .stellar-scroll-cue b{font-size:7px; letter-spacing:.15em;}
  .stellar-signal-deck{width:calc(100% - 16px); margin-top:-38px; padding:7px; border-radius:15px;}
  .stellar-now-card,.stellar-up-next{padding:17px 12px;}
  .stellar-now-layout{grid-template-columns:76px minmax(0,1fr); column-gap:12px; margin-top:15px;}
  .stellar-now-cover{width:76px;}
  .stellar-now-copy strong{font-size:18px;}
  .stellar-now-copy span{font-size:11px;}
  .stellar-wave{height:34px; margin-top:14px;}
  .stellar-up-next .rundown .row{gap:8px;}
  .stellar-up-next .rundown .queue-cover{width:32px; height:32px;}
  .stellar-up-next .rundown .t{font-size:12px;}
  .stellar-up-next .rundown .bio-link{max-width:46px; font-size:7px; overflow:hidden; text-overflow:ellipsis;}
  .stellar-artists .station-switch-card{min-height:128px; padding:16px;}
  .stellar-artists .station-switch-card img{right:13px; width:92px; height:92px;}
  .station-switch-copy{max-width:66%;}
  .station-switch-copy strong{font-size:18px;}
  .station-switch-copy small{font-size:8px;}
  .station-switch-arrow{right:14px; bottom:13px; width:25px; height:25px;}
  .stellar-signature{padding:36px 18px;}
  .stellar-signature-copy h2{font-size:42px;}
}
@media(max-width:460px){
  .stellar-up-next .rundown .row{gap:9px;}
  .stellar-up-next .rundown .queue-cover{width:32px; height:32px;}
  .stellar-up-next .rundown .bio-link{max-width:46px; overflow:hidden; text-overflow:ellipsis;}
  .stellar-up-next .rundown .tag{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .stellar-emblem img,.stellar-stage-orbit,.stellar-emblem-halo,.stellar-wave i,.stellar-scroll-signal i,.stellar-scroll-cue em{animation:none!important;}
}

/* The current song artwork is the entire visual surface of the Now card.
   Copy and signal animation sit above a broadcast-safe dark gradient. */
.stellar-station-page .stellar-now-card{
  position:relative; min-height:252px; overflow:hidden; isolation:isolate;
  background:#050a0e;
}
.stellar-station-page .stellar-now-card>.stellar-card-label{position:relative; z-index:6;}
.stellar-station-page .stellar-now-layout{position:static; display:block; min-height:188px; margin-top:0;}
.stellar-station-page .stellar-now-cover{
  position:absolute; z-index:1; inset:0; width:100%; height:100%; aspect-ratio:auto;
  border:0; border-radius:inherit; background-position:center; background-size:cover;
  transform:none!important;
}
.stellar-station-page .stellar-now-cover::after{
  background:
    linear-gradient(180deg,rgba(2,7,11,.18) 0%,rgba(2,7,11,.28) 35%,rgba(2,7,11,.94) 100%),
    linear-gradient(90deg,rgba(2,7,11,.42),transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.stellar-station-page .stellar-now-cover.fallback{
  background-size:min(66%,270px); background-repeat:no-repeat; background-color:#050b10;
}
.stellar-station-page .stellar-cover-index{display:none;}
.stellar-station-page .stellar-now-copy{
  position:absolute; z-index:6; left:28px; right:160px; bottom:28px;
  text-shadow:0 3px 14px rgba(0,0,0,.9);
}
.stellar-station-page .stellar-now-copy strong{white-space:normal; line-height:1.02;}
.stellar-station-page .stellar-now-copy span{color:rgba(237,242,245,.72);}
.stellar-station-page .stellar-wave{
  position:absolute; z-index:6; right:24px; bottom:24px; width:112px; height:38px; margin:0;
  pointer-events:none;
}
.stellar-station-page .stellar-now-cover.has-bio:hover,
.stellar-station-page .stellar-now-cover.has-bio:focus-visible{
  border-color:transparent; box-shadow:none; transform:none!important;
}
@media(max-width:520px){
  .stellar-station-page .stellar-now-card{min-height:222px;}
  .stellar-station-page .stellar-now-layout{min-height:162px;}
  .stellar-station-page .stellar-now-copy{left:16px; right:92px; bottom:18px;}
  .stellar-station-page .stellar-wave{right:12px; bottom:16px; width:76px; height:30px;}
  .stellar-station-page .stellar-cover-ribbon{top:18px; right:-44px; width:160px;}
}

@media (min-width:761px){
  /* 2026-08-25 batch (message.txt) — was `height:100vh; overflow-y:hidden`
     with `.hero{overflow:hidden}`, forcing everything from the ON AIR
     pill through the footer into one fixed viewport height with no
     breathing room, silently CLIPPING content on shorter screens.
     `min-height` + no overflow lock keeps the same "starts full-height,
     centered" feel for short content, but now lets the page grow and
     scroll naturally once the extra spacing above (.hero .live-pill's
     new margin-top) needs more room than one screen — matching
     weekly_schedule.html's own already-established "normal page scroll
     is the honest choice" precedent for content that doesn't belong
     jammed into a single screen. .bottom-safe's reserved height is kept
     so the now-bar never overlaps the last bit of content either way. */
  body.no-scroll-hero{min-height:100vh; display:flex; flex-direction:column;}
  body.no-scroll-hero .hero{flex:1; min-height:0; justify-content:center;}
  body.no-scroll-hero .bottom-safe{flex:none; height:96px;}
}
@media (max-width:760px){
  body.no-scroll-hero{padding-bottom:130px;}
}

.station-watermark{position:fixed; inset:0; z-index:2; pointer-events:none; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.station-watermark img{width:min(860px, 76vw); opacity:.13;}

header{padding:10px 50px; flex-wrap:wrap;}
.back-link{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink-dim); font-size:12px; letter-spacing:.06em; text-transform:uppercase;}
/* 2026-09-03 batch, brugerrapporteret (Fabian, via user): "the brand
   logo... should persist to the other pages... scale it the same on
   all pages... a single station page, the logo is smaller" — matches
   webradio-base.css's own header .brand img (home.html's own number),
   same responsive breakpoints below. */
.back-link img{height:104px;}
.back-link:hover{color:var(--ink);}
.here{display:flex; align-items:center; gap:12px; text-align:right;}
.here img{height:46px; border-radius:50%; box-shadow:0 0 18px 2px var(--accent-glow);}
.here b{display:block; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);}
.here small{display:block; font-size:9px; letter-spacing:.1em; color:var(--ink-dim); margin-top:2px;}

.hero{
  position:relative; z-index:5; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:12px 20px 4px;
  /* 2026-09-03 batch, brugerrapporteret (Fabian, via user): "in the
     individual stations, lets move the hero down by 50px at first, that
     looks about right on my current device." An explicit starting
     value, not final — expect a follow-up once Fabian's own viewport
     size is in hand (see .hero .live-pill's own margin-top just below,
     tuned the same iterative way). */
  margin-top:50px;
}
.hero .eyebrow{font-size:12px; letter-spacing:.4em; color:var(--accent); text-transform:uppercase; margin-bottom:6px;}
.hero h1{
  font-size:clamp(28px, 5.5vw, 56px); font-weight:900; letter-spacing:-.01em; line-height:.98;
  text-transform:uppercase; margin-bottom:4px; color:#fff;
  text-shadow:0 0 50px var(--accent-glow);
}
.hero .tagline{font-size:14px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:6px;}
.hero p{color:var(--ink-dim); font-size:13px; max-width:560px; margin:0 auto 10px;}
/* 2026-08-25 batch (message.txt) — brugerønske (Fabian): the area from
   the ON AIR pill down through the footer (rundown, artist grid,
   sibling-nav) felt too cramped against the tagline/blurb above it.
   Scoped to just this page's own .live-pill (the base .live-pill rule
   in webradio-base.css is shared by other pages, e.g. home.html's
   station tickets — must not touch its margin globally). */
.hero .live-pill{margin-top:44px;}
.cta{padding:10px 28px; border-radius:3px; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--gold); color:#1a1204; cursor:pointer; border:none;}
.cta:disabled{opacity:.5; cursor:default;}

.meet-host-link{
  display:inline-block; margin:6px 0 4px; font-size:11px; color:var(--accent); text-decoration:none;
  border-bottom:1px dotted var(--accent); cursor:pointer;
}

/* --- Rundown: real indexed table, "now" row highlighted --- */
.rundown{
  position:relative; z-index:5; width:100%; max-width:640px; margin:10px auto 0;
  border:1px solid rgba(230,184,102,.25); border-radius:10px; background:rgba(255,255,255,.02);
  overflow:hidden;
}
.rundown .row{display:flex; align-items:center; gap:14px; padding:7px 18px; border-bottom:1px solid rgba(230,184,102,.14);}
.rundown .row:last-child{border-bottom:none;}
.rundown .row.now{background:rgba(230,184,102,.06);}
.rundown .idx{flex:none; width:20px; font-size:11px; color:var(--ink-dim); font-weight:700; font-variant-numeric:tabular-nums;}
.rundown .row.now .idx{color:var(--gold);}
.rundown .info{flex:1; min-width:0; text-align:left;}
.rundown .t{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rundown .a{font-size:11px; color:var(--ink-dim);}
.rundown .tag{flex:none; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim);}
.rundown .bio-link{
  flex:none; font-size:10px; letter-spacing:.02em; color:var(--gold);
  text-decoration:none; opacity:.85; transition:opacity .2s ease;
}
.rundown .bio-link:hover{opacity:1;}
.rundown .row.now .tag{color:#7dffb0;}

/* --- Artists on this station --- */
.artists{position:relative; z-index:5; width:100%; max-width:640px; margin:10px auto 0; text-align:left;}
.artists h2{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px;}
.artist-grid{display:flex; gap:12px; flex-wrap:wrap;}
.artist-card{
  flex:1; min-width:150px; display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  padding:10px 12px; border:1px solid rgba(230,184,102,.2); border-radius:8px; background:rgba(255,255,255,.02);
  transition:background .2s ease;
}
.artist-card:hover{background:rgba(230,184,102,.08);}
.artist-card .avatar{flex:none; width:36px; height:36px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.15), transparent 60%), #0a0a0a; border:1px solid var(--accent);}
.artist-card .name{font-size:12px; font-weight:700;}
.artist-card .note{font-size:9px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.05em;}

.hero .footer-credit{margin:0 auto 4px;}

.bottom-safe{flex:none; height:0;}

/* now-bar + bio/lyrics modal CSS moved to webradio-base.css (2026-08-11
   batch) — the now-bar is now a single global component in base.html,
   shared across all pages instead of duplicated per page. */

@media (max-width:760px){
  header{justify-content:center; text-align:center;}
  .here{text-align:center;}
  .rundown, .artists{max-width:94vw;}
  .back-link img{height:64px;}
}

/* ============================================================
   "Meet the Host" — OUT OF SCOPE for the 2026-08-11 visual-parity
   pass (no mockup counterpart exists anywhere for this feature).
   These rules are UNCHANGED from before that pass — do not fold them
   into or rename alongside the .bio-modal-* rules above.
   ============================================================ */
.bio-overlay{
  display:none; position:fixed; inset:0; z-index:50; background:rgba(2,1,3,.85);
  align-items:center; justify-content:center; padding:20px;
}
.bio-overlay.open{display:flex;}
.bio-panel{
  background:#0c0a10; border:1px solid rgba(230,184,102,.25); border-radius:14px;
  max-width:520px; width:100%; max-height:85vh; overflow-y:auto; padding:26px; position:relative; text-align:left;
}
.bio-close{
  position:absolute; top:14px; right:14px; background:none; border:none; color:var(--ink-dim);
  font-size:18px; cursor:pointer; line-height:1;
}
.bio-close:hover{color:var(--ink);}
.bio-kicker{font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); font-weight:700;}
.bio-panel h2{font-size:20px; margin:4px 0 2px;}
/* 2026-08-13 batch, brugerrapporteret: "meet the host might need an
   update, to support images" — optional, only rendered when a host has
   one uploaded (station.html's renderHosts()). */
.host-photo{width:100%; max-height:220px; object-fit:cover; border-radius:8px; margin-bottom:10px;}
.bio-section-title{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:16px 0 6px;}
.bio-panel p{font-size:12.5px; line-height:1.6; color:var(--ink-dim); margin-bottom:10px; white-space:pre-line;}