:root{
  --navy:#0b2a66;
  --blue:#1689f5;
  --sky:#2bbcff;
  --coral:#ff4d5f;
  --orange:#ff9142;
  --text:#102a60;
  --muted:#66738e;
  --line:#e8e1dc;

  /* V19 desktop tightened to avoid homepage scrolling */
  --header-h:clamp(56px,3.2vw,68px);
  --hero-h:clamp(238px,14.6vw,272px);
  --status-w:min(86vw,1650px);
  --content-w:min(86vw,1650px);
  --content-pad-r:18px;
  --show-h:clamp(146px,8.9vw,172px);
  --info-h:clamp(190px,11.5vw,228px);
  --listen-h:clamp(96px,5.8vw,116px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:#fff7ef;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}
button,a{font:inherit}
.top-colour-line{display:none}

/* Exact lower left/right decoration from the approved master. */
body:before,body:after{
  content:"";
  position:absolute;
  top:calc(var(--header-h) + var(--hero-h));
  z-index:-2;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:100% 100%;
}
body:before{
  left:0;
  width:8.3732vw;
  height:36.9617vw;
  max-height:710px;
  background-image:url("assets/v15-left-lower.webp");
}
body:after{
  right:0;
  width:9.8086vw;
  height:36.9617vw;
  max-height:710px;
  background-image:url("assets/v15-right-lower.webp");
}

/* =========================================================
   HEADER — full-width crop from the approved reference
   ========================================================= */
.site-header{
  width:100vw;
  height:var(--header-h);
  min-height:0;
  margin:0;
  padding:0;
  position:sticky;
  top:0;
  z-index:50;
  background:url("assets/v15-header-full.webp") center/100% 100% no-repeat;
  border:0;
  box-shadow:none;
}
.site-header .brand,
.site-header .nav,
.site-header .search-button,
.site-header .live-button{opacity:0}
.brand{
  position:absolute;
  left:10.35%;
  top:0;
  width:17.4%;
  height:100%;
  display:block;
}
.brand img{width:100%;height:100%;object-fit:contain}
.nav{
  position:absolute;
  left:43.2%;
  top:0;
  width:28.7%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  align-items:center;
}
.nav a{display:block;height:100%;text-decoration:none}
.search-button{
  position:absolute;
  left:72.2%;
  top:0;
  width:3.0%;
  height:100%;
  border:0;
  background:transparent;
  cursor:pointer;
}
.live-button{
  position:absolute;
  left:75.3%;
  top:10%;
  width:11.0%;
  height:72%;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
}
.nav-toggle{display:none}

/* =========================================================
   HERO — one exact full-width crop; no CSS recreation
   ========================================================= */
.hero{
  width:100vw;
  height:var(--hero-h);
  min-height:0;
  margin:0;
  display:block;
  position:relative;
  overflow:hidden;
  background:none!important;
}
.hero:before,.hero:after,
.hero-copy:before,.hero-copy:after,
.hero-photo:before,.hero-photo:after{display:none!important}
.hero-photo{display:none}
.hero-copy{
  position:absolute;
  inset:0;
  padding:0;
  background:none;
}
.hero-copy>.kicker,
.hero-copy>.hero-wordmark,
.hero-copy>.hero-claim,
.hero-copy>p,
.hero-copy>.colour-notes{
  opacity:0;
  pointer-events:none;
}
.hero-actions{display:none!important}
.hero-actions .primary,
.hero-actions .secondary{display:none!important}

/* =========================================================
   LIVE STATUS STRIP
   ========================================================= */
.status-strip{
  width:var(--status-w);
  min-height:clamp(64px,3.9vw,76px);
  margin:0 auto;
  display:grid;
  grid-template-columns:31.6% 36.4% 32%;
  background:#fff;
  border:1px solid rgba(225,219,214,.94);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 5px 16px rgba(9,39,94,.08);
  position:relative;
  z-index:5;
}
.status-item{
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 16px;
  position:relative;
  background:#fff;
}
.status-item+.status-item{border-left:1px solid #e8e1db}
.round-icon{
  width:clamp(50px,3.23vw,62px);
  height:clamp(50px,3.23vw,62px);
  flex:0 0 auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
}
.status-onair .round-icon{background:#ff3f62}
.status-track .round-icon{background:#1598f4}
.status-next .round-icon{background:#ff7e41}
.status-item small{
  display:block;
  font-weight:900;
  font-size:clamp(11px,.72vw,14px);
  color:#ff4d5f;
  margin-bottom:1px;
}
.status-item strong{
  display:block;
  font-size:clamp(15px,.96vw,19px);
  line-height:1.07;
  color:#102a60;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.status-item>div>span:last-child{
  display:block;
  color:#425c82;
  font-size:clamp(11px,.72vw,14px);
}
.status-item:after{
  content:"";
  position:absolute;
  right:3.7%;
  top:29%;
  width:22%;
  height:40%;
  opacity:.82;
  background:repeating-linear-gradient(90deg,transparent 0 7px,currentColor 7px 10px,transparent 10px 14px);
  clip-path:polygon(0 50%,5% 36%,10% 64%,15% 24%,20% 72%,25% 29%,30% 68%,35% 35%,40% 62%,45% 39%,50% 69%,55% 42%,60% 57%,65% 46%,70% 62%,75% 44%,80% 56%,85% 48%,90% 54%,95% 50%,100% 52%,100% 59%,0 59%);
  pointer-events:none;
}
.status-onair{color:#ff9b38}
.status-track{color:#34b7ff}
.status-next{color:#5bc9ff}

/* =========================================================
   CENTRAL CONTENT
   ========================================================= */
.page-wrap{
  width:var(--content-w);
  margin:0 auto;
  padding:8px var(--content-pad-r) 14px 0;
  position:relative;
}
.page-wrap:before,.page-wrap:after{display:none}

/* SHOW ROW */
.shows-layout{
  display:grid;
  grid-template-columns:minmax(0,999fr) 357fr;
  gap:clamp(10px,.718vw,14px);
  align-items:start;
}
.show-grid{
  display:grid;
  grid-template-columns:333fr 332fr 310fr;
  gap:clamp(10px,.718vw,14px);
}
.show-card{
  height:var(--show-h);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  border:0;
  box-shadow:none;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.show-card.weekend{background-image:url("assets/v15-show-weekend.webp")!important}
.show-card.rock{background-image:url("assets/v27-show-rock.webp")!important}
.show-card.disco{background-image:url("assets/v15-show-disco.webp")!important}
.show-card:before,.show-card:after{display:none!important}
.show-overlay{position:absolute;inset:0;opacity:0}
.show-overlay a{position:absolute;inset:0;display:block}

/* generic panels */
.panel{
  background:#fff;
  border:1px solid rgba(224,218,212,.95);
  border-radius:16px;
  box-shadow:0 4px 14px rgba(10,44,96,.05);
  overflow:hidden;
}
.panel-head{
  padding:10px 12px 7px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.eyebrow{
  display:block;
  color:#ff4d5f;
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:2px;
}
.panel-head h2{
  margin:0;
  color:#102a60;
  font-size:clamp(15px,.95vw,18px);
  line-height:1.08;
}
.panel-link,.presenter-link,#mixcloudTopLink{
  color:#1689f5;
  text-decoration:none;
  font-weight:850;
  font-size:11px;
  white-space:nowrap;
}
.badge{
  border-radius:999px;
  background:#eef3fb;
  color:#4f6486;
  padding:4px 8px;
  font-size:9px;
  font-weight:900;
}
.badge.live{background:#ffedf0;color:#ff4d5f}
.presenter-badge-hidden{display:none}

/* schedule */
.schedule-panel{height:var(--show-h)}
.schedule-preview .schedule-row{
  display:grid;
  grid-template-columns:42px 62px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:9px 15px;
  border-top:1px solid #e9e2dc;
  font-size:clamp(10px,.67vw,13px);
}
.schedule-preview .schedule-row b{color:#102a60}
.schedule-preview .schedule-row span{color:#1689f5;font-weight:850}
.schedule-preview .schedule-row strong{
  color:#102a60;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.schedule-preview .schedule-row.is-current{
  background:linear-gradient(90deg,#fff0f1,#fff8f3);
}
.schedule-preview .schedule-row.is-current b{color:#ff4d5f}
.schedule-note{display:none}

/* SECOND ROW */
.radio-dashboard{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,.718vw,14px);
  margin-top:8px;
  align-items:stretch;
}
.presenter-card,.now-playing-card,.history-card{
  min-height:var(--info-h);
}
.presenter-card{
  background:linear-gradient(150deg,#fff 0 57%,#fff8ef 57% 73%,#f2f8ff 73% 100%);
}
.presenter-main{
  display:grid;
  grid-template-columns:clamp(94px,6.2vw,126px) minmax(0,1fr);
  gap:16px;
  padding:0 14px 8px;
  align-items:center;
}
.presenter-picture-wrap{
  width:clamp(94px,6.2vw,126px);
  height:clamp(94px,6.2vw,126px);
  border-radius:50%;
  border:5px solid #fff;
  box-shadow:0 2px 10px rgba(10,44,96,.12);
  overflow:hidden;
  position:relative;
}
.presenter-picture-wrap img{width:100%;height:100%;object-fit:cover}
.presenter-live-dot{display:none}
.presenter-main h3{
  margin:0 0 3px;
  font-size:clamp(18px,1.22vw,24px);
  color:#102a60;
}
.presenter-main p{
  margin:0 0 3px;
  color:#294f82;
  font-size:clamp(13px,.85vw,16px);
  line-height:1.25;
}
.presenter-main .muted{font-size:clamp(11px,.72vw,14px)}
.presenter-fallback{
  margin:0 14px 10px 26%;
  padding:8px 11px;
  background:#eef5ff;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#32527e;
  font-size:clamp(10px,.66vw,13px);
}
.presenter-fallback img{display:none}

.now-playing-main{
  display:grid;
  grid-template-columns:clamp(88px,5.26vw,101px) minmax(0,1fr);
  gap:14px;
  padding:0 14px 8px;
}
.now-playing-main img{
  width:clamp(88px,5.26vw,101px);
  height:clamp(88px,5.26vw,101px);
  object-fit:cover;
  border-radius:12px;
}
.track-info h3{margin:3px 0 3px;font-size:clamp(15px,1vw,19px)}
.track-info>p{margin:0 0 10px;font-size:clamp(13px,.85vw,16px)}
.progress{height:6px;background:#e5e9ef;border-radius:999px;overflow:hidden}
.progress span{display:block;height:100%;width:14%;background:#1689f5;border-radius:999px}
.track-meta{display:flex;justify-content:space-between;font-size:clamp(10px,.65vw,12px);color:#66738e;margin:7px 0 5px}
.track-info small{color:#7c8698}
.stream-player{
  margin:0 14px 10px;
  padding:8px 11px;
  border-radius:14px;
  background:#f4f8fb;
  border:1px solid #e5ebf1;
}
.stream-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:clamp(11px,.75vw,14px)}
.stream-title i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#18cc72;margin-right:5px}
.stream-controls{display:flex;align-items:center;gap:10px}
.round-play{
  width:clamp(42px,2.8vw,54px);
  height:clamp(42px,2.8vw,54px);
  border:0;border-radius:50%;background:#1689f5;color:#fff;font-weight:900;cursor:pointer;
}
.stream-controls input{flex:1;accent-color:#1689f5}
.stream-controls a{color:#1689f5;text-decoration:none;font-weight:800;font-size:10px}

.history-list{padding:0 14px 10px}
.history-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:8px;
  padding:3px 0;
  border-top:1px solid #e6e1dc;
  font-size:clamp(10px,.66vw,13px);
}
.history-row time{color:#183f79;font-weight:850}
.history-row span{color:#294b7b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* LISTEN AGAIN */
.listen-again{
  position:relative;
  margin-top:8px;
  height:var(--listen-h);
  background:url("assets/v15-listen-again.webp") center/100% 100% no-repeat!important;
  border:0;
  box-shadow:none;
}
.listen-again .panel-head,.listen-again .episode-grid{opacity:0}
.listen-again .episode-grid{
  position:absolute;left:0;right:0;bottom:0;height:70%;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.episode{position:relative}
.episode-play{position:absolute;inset:0;display:block}

/* BELOW THE REFERENCE FOLD */
.about{
  margin-top:14px;
  padding:22px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px;
  background:linear-gradient(135deg,#fff8ef,#fff 58%,#eef8ff);
}
.about h2{margin:4px 0 7px;font-size:28px}
.about p{margin:0;color:#50627a;line-height:1.5;font-size:14px}
.about-points{display:grid;gap:8px}
.about-points span{padding:8px 11px;background:#fff;border:1px solid #e4e8ed;border-radius:12px;font-size:12px}

.full-schedule{margin-top:14px;background:linear-gradient(135deg,#fff8ef,#fff 58%,#eef8ff)}
.full-schedule-head{align-items:flex-start;padding-bottom:14px}
.full-schedule-head>div:first-child{max-width:760px}
.full-schedule-head p{margin:6px 0 0}
.schedule-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:520px}
.schedule-legend span{font-size:9px;font-weight:900;color:#fff;padding:5px 8px;border-radius:999px}
.legend-news{background:#b37b59}.legend-disco{background:#d34f7b}.legend-90s{background:#0b9d86}.legend-rock{background:#d96a3c}.legend-70s{background:#b7d950;color:#244100!important}.legend-60s{background:#50c9c2;color:#103e43!important}.legend-funk{background:#ff2857}.legend-80s{background:#43c486;color:#103d31!important}
.schedule-scroll{overflow-x:auto;padding:0 14px 17px}
.weekly-schedule{display:grid;grid-template-columns:repeat(7,minmax(170px,1fr));gap:9px;min-width:1240px}
.schedule-day{border-radius:13px;background:#fff;border:1px solid #e6e1dc;overflow:hidden}
.schedule-day-head{display:flex;justify-content:space-between;padding:10px 11px;background:#f7fbff;border-bottom:1px solid #e6e1dc}
.schedule-day-head b{font-size:13px}
.schedule-day-head span{font-size:8px;font-weight:900;color:#fff;background:#ff4d5f;padding:4px 7px;border-radius:999px}
.programme-list{padding:7px;display:grid;gap:5px}
.programme{display:grid;grid-template-columns:44px 1fr auto;gap:7px;align-items:center;padding:6px 8px;border-radius:8px;color:#fff;font-size:10px}
.programme-news{background:#b37b59}.programme-disco-show{background:#d34f7b}.programme-nineties{background:#0b9d86}.programme-rock-block{background:#d96a3c}.programme-glam-rock{background:#f0c421;color:#27354b}.programme-seventies{background:#b7d950;color:#26422e}.programme-sixties{background:#50c9c2;color:#123e44}.programme-funk{background:#ff2857}.programme-eighties{background:#43c486;color:#103d31}.programme-default{background:#6b7b94}
.programme.is-live{outline:3px solid rgba(255,75,89,.23)}
.programme em{font-style:normal;background:#fff;color:#ff4d5f;border-radius:999px;padding:3px 5px;font-size:7px;font-weight:900}

/* FOOTER */
footer{
  width:var(--content-w);
  margin:0 auto;
  padding:10px var(--content-pad-r) 14px 0;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:12px;
  border-top:1px solid #e7dfd8;
}
footer img{width:178px}
footer p{font-size:10px;color:#66738e;margin:2px 0 0}
.footer-links{display:flex;gap:18px}
.footer-links a{color:#50627a;text-decoration:none;font-size:11px;font-weight:800}
.copyright{text-align:right;color:#7c8799;font-size:10px}
.error-text{color:#d83a49}

/* =========================================================
   RESPONSIVE: preserve function below desktop
   ========================================================= */
@media(max-width:1199px){
  body:before,body:after{display:none}
  :root{
    --status-w:calc(100vw - 16px);
    --content-w:calc(100vw - 16px);
    --content-pad-r:0px;
  }
  .site-header{
    width:calc(100vw - 10px);
    height:64px;
    margin:0 auto;
    background:#fff;
    display:flex;
    align-items:center;
    padding:0 14px;
    gap:12px;
  }
  .site-header .brand,.site-header .nav,.site-header .search-button,.site-header .live-button{opacity:1}
  .brand{position:static;width:auto;height:auto;margin-right:auto}
  .brand img{width:220px;height:auto}
  .nav-toggle{display:block;border:0;background:transparent;font-size:24px;color:var(--navy)}
  .nav{
    display:none;
    position:absolute;
    left:0;right:0;top:64px;
    width:auto;height:auto;
    background:#fff;
    padding:10px 16px;
    flex-direction:column;
    grid-template-columns:none;
    align-items:stretch;
    gap:0;
    box-shadow:0 12px 24px rgba(10,44,96,.08);
  }
  .nav.open{display:flex}
  .nav a{height:auto;padding:10px 0;color:var(--navy);font-weight:800}
  .search-button{position:static;width:auto;height:auto}
  .live-button{display:none}
  .hero{
    width:calc(100vw - 10px);
    height:auto;
    margin:0 auto;
    background:none;
    display:grid;
    grid-template-columns:1fr;
  }
  .hero-copy{
    position:relative;
    inset:auto;
    min-height:300px;
    background:linear-gradient(135deg,#fff5e9,#ffe1ca);
    padding:24px;
  }
  .hero-copy>.kicker,.hero-copy>.hero-wordmark,.hero-copy>.hero-claim,.hero-copy>p,.hero-copy>.colour-notes{opacity:1}
  .kicker{font-size:10px;letter-spacing:2px;color:#ff4d5f;font-weight:900}
  .hero-wordmark{font-size:58px;font-weight:950;letter-spacing:-3px;color:#0b2a66}
  .hero-wordmark strong{color:#1689f5}
  .hero-claim{font-size:24px;letter-spacing:3px}
  .hero-copy p{font-size:14px;line-height:1.4;max-width:620px}
  .hero-actions{position:static;width:auto;height:auto;display:flex;margin-top:12px}
  .hero-actions .primary,.hero-actions .secondary{opacity:1;height:auto;width:auto;padding:11px 20px;border-radius:999px}
  .primary{background:#ff4d5f;color:#fff}
  .secondary{border:2px solid #b8d3ef;color:#0b2a66;background:#fff}
  .colour-notes{display:flex;gap:8px;margin-top:12px}
  .colour-notes span{padding:6px 10px;border-radius:999px;background:#fff;font-size:10px}
  .hero-photo{
    display:block;
    min-height:260px;
    background:url("assets/v15-hero-full.webp") center right/cover no-repeat;
  }
  .status-strip{grid-template-columns:1fr;gap:8px;background:transparent;border:0;box-shadow:none}
  .status-item{border:1px solid #e8e1db;border-radius:16px!important}
  .status-item+.status-item{border-left:1px solid #e8e1db}
  .shows-layout{grid-template-columns:1fr}
  .show-grid{grid-template-columns:repeat(3,1fr)}
  .schedule-panel{height:auto;margin-top:10px}
  .schedule-note{display:block;padding:0 15px 12px;color:#66738e;font-size:10px}
  .radio-dashboard{grid-template-columns:1fr 1fr}
  .history-card{grid-column:1/-1}
  .listen-again{height:auto;min-height:120px;background:#fff!important}
  .listen-again .panel-head,.listen-again .episode-grid{opacity:1}
  .listen-again .episode-grid{position:static;height:auto;padding:0 14px 14px}
  .episode{padding:10px;border:1px solid #e5e2dd;border-radius:12px}
}
@media(max-width:820px){
  .show-grid{grid-template-columns:1fr}
  .show-card{height:210px}
  .radio-dashboard{grid-template-columns:1fr}
  .history-card{grid-column:auto}
  .presenter-main{grid-template-columns:100px 1fr}
  .presenter-picture-wrap{width:100px;height:100px}
  .now-playing-main{grid-template-columns:82px 1fr}
  .now-playing-main img{width:82px;height:82px}
  .episode-grid{grid-template-columns:1fr!important}
  .about{grid-template-columns:1fr}
  footer{grid-template-columns:1fr;text-align:center}
  .footer-links{justify-content:center;flex-wrap:wrap}
  .copyright{text-align:center}
}
@media(max-width:520px){
  .brand img{width:190px}
  .hero-wordmark{font-size:42px}
  .hero-claim{font-size:18px}
  .presenter-main{grid-template-columns:1fr}
  .presenter-picture-wrap{width:130px;height:130px}
  .presenter-fallback{margin-left:16px}
  .stream-controls a{display:none}
}


/* ============================================================
   V16 corrections
   ============================================================ */

/* Make image-overlay buttons reliably clickable on the desktop master artwork. */
.site-header .live-button,
.hero-actions .primary,
.hero-actions .secondary{
  opacity:.001 !important;
  pointer-events:auto !important;
  z-index:30 !important;
  cursor:pointer !important;
}

/* The visual master remains, but actual click zones sit above it. */
.site-header .live-button{position:absolute!important}
.hero-actions{z-index:30!important}

/* Home has no schedule content anymore. Keep the fourth card footprint so
   the composition remains close to the approved master. */
.station-card{
  height:var(--show-h);
  background:
    radial-gradient(circle at 92% 9%,rgba(48,188,255,.25) 0 60px,transparent 61px),
    radial-gradient(circle at 8% 98%,rgba(255,139,66,.22) 0 72px,transparent 73px),
    linear-gradient(145deg,#fff 0,#fff8ef 54%,#edf8ff 100%);
  position:relative;
}
.station-card:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.45;
  background:radial-gradient(circle,#ff8790 0 2px,transparent 2.4px) 0 0/18px 18px;
  mask-image:linear-gradient(135deg,#000 0 25%,transparent 56%);
  pointer-events:none;
}
.station-card-inner{
  position:relative;
  z-index:2;
  height:100%;
  padding:13px 15px;
  display:flex;
  flex-direction:column;
}
.station-card h2{
  margin:2px 0 3px;
  font-size:clamp(18px,1.12vw,22px);
  color:#0b2a66;
}
.station-card p{
  margin:0;
  color:#50678b;
  font-size:clamp(10px,.66vw,13px);
  line-height:1.25;
}
.station-tags{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:auto;
  margin-bottom:9px;
}
.station-tags span{
  padding:4px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  background:#eef7ff;
  color:#167fd7;
}
.station-tags span:nth-child(1){background:#ffe9eb;color:#d83d50}
.station-tags span:nth-child(2){background:#fff0dc;color:#c86a0b}
.station-tags span:nth-child(4){background:#efedff;color:#5c54b7}
.station-card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.station-live{
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ff4d5f,#ff8545);
  color:#fff;
  font-size:10px;
  font-weight:900;
  padding:7px 11px;
  cursor:pointer;
}
.station-card-actions a{
  color:#1689f5;
  font-size:10px;
  text-decoration:none;
  font-weight:900;
}

/* Design tightening from the V15 screenshot. */
.status-strip{
  margin-top:-1px!important;
  min-height:clamp(70px,4.18vw,81px)!important;
}
.status-item{
  padding-top:9px!important;
  padding-bottom:9px!important;
}
.page-wrap{padding-top:9px!important}
.shows-layout{gap:clamp(9px,.66vw,13px)!important}
.show-grid{gap:clamp(9px,.66vw,13px)!important}
.radio-dashboard{
  margin-top:9px!important;
  gap:clamp(9px,.66vw,13px)!important;
}
.presenter-card,.now-playing-card,.history-card{
  min-height:clamp(220px,13.15vw,254px)!important;
}
.panel-head{padding-top:11px!important}
.presenter-fallback{margin-bottom:10px!important}
.history-row{padding:3.5px 0!important}

/* Match the reference more closely: no stray STATION badge in presenter heading. */
#presenterBadge{display:none!important}

/* Listen Again closer to the reference fold. */
.listen-again{margin-top:9px!important}

/* Actual player: stronger feedback states */
.stream-title #streamState{font-weight:800}
.stream-title #streamState.is-buffering{color:#e17a24}
.stream-title #streamState.is-error{color:#d83a49}

/* Schedule nav/page helper */
.schedule-link-active{color:#ff4d5f!important}

/* The full schedule no longer exists on the home page. */
.full-schedule{display:none!important}

@media(max-width:1199px){
  .site-header .live-button,
  .hero-actions .primary,
  .hero-actions .secondary{opacity:1!important}
  .station-card{height:auto;min-height:150px}
}


/* ============================================================
   V17 – Hero alignment + separate Listen Again + legal footer
   ============================================================ */

/* The hero is now an actual image with the exact reference aspect ratio.
   This removes background-size/crop drift between screen widths. */
.hero{
  width:100vw!important;
  aspect-ratio:1672 / 265!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  background:none!important;
}
.hero-master-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  z-index:1;
  pointer-events:none;
}
.hero-copy{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  padding:0!important;
  background:transparent!important;
}
.hero-photo{display:none!important}
.hero-copy>.kicker,
.hero-copy>.hero-wordmark,
.hero-copy>.hero-claim,
.hero-copy>p,
.hero-copy>.colour-notes{opacity:0!important;pointer-events:none!important}
.hero-actions{
  position:absolute!important;
  left:10.2%!important;
  top:68.7%!important;
  width:20.3%!important;
  height:15.4%!important;
  display:flex!important;
  gap:1vw!important;
  z-index:12!important;
}
.hero-actions .primary,
.hero-actions .secondary{
  opacity:.001!important;
  display:block!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  cursor:pointer!important;
}
.hero-actions .primary{width:52%!important}
.hero-actions .secondary{width:44%!important}

/* After removing Listen Again from home, keep the lower part visually tight. */
.about{
  margin-top:10px!important;
}
footer{
  margin-top:10px!important;
}

/* Legal link */
.footer-links a[href="impressum.html"]{font-weight:900}

/* Mobile hero falls back to live HTML content. */
@media(max-width:1199px){
  .hero{
    width:calc(100vw - 10px)!important;
    aspect-ratio:auto!important;
    height:auto!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    background:none!important;
  }
  .hero-master-art{display:none!important}
  .hero-copy{
    position:relative!important;
    inset:auto!important;
    min-height:260px!important;
    padding:22px!important;
    background:linear-gradient(135deg,#fff5e9,#ffe1ca)!important;
  }
  .hero-copy>.kicker,
  .hero-copy>.hero-wordmark,
  .hero-copy>.hero-claim,
  .hero-copy>p,
  .hero-copy>.colour-notes{opacity:1!important;pointer-events:auto!important}
  .hero-actions{
    position:static!important;
    width:auto!important;
    height:auto!important;
    display:flex!important;
    margin-top:12px!important;
  }
  .hero-actions .primary,
  .hero-actions .secondary{
    opacity:1!important;
    height:auto!important;
    width:auto!important;
    padding:11px 20px!important;
  }
}


/* ============================================================
   V19 – desktop hero artwork, slightly shifted left
   and without the duplicated hero buttons.
   ============================================================ */
@media (min-width:1200px){
  .hero{
    overflow:hidden !important;
  }
  .hero-master-art{
    width:105.2% !important;
    height:100% !important;
    left:-3.55% !important;
    right:auto !important;
    top:0 !important;
    bottom:0 !important;
    object-fit:cover !important;
    object-position:left center !important;
    transform:none !important;
    display:block !important;
  }
  .hero-copy{
    z-index:2 !important;
  }
  .hero-actions{
    display:none !important;
  }
}

/* V19 extras */
.station-card-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.station-card-actions a{
  color:#1689f5;
  text-decoration:none;
  font-weight:850;
  font-size:12px;
}
.station-card-actions .station-live{display:none!important}
footer{
  border-top:1px solid #e9e0d9;
}
@media (min-width:1200px){
  body{
    overflow-y:auto;
  }
}


/* ============================================================
   V21 – final homepage tightening for 1920x1080 / 100% zoom
   ============================================================ */
@media (min-width:1200px){

  :root{
    --status-w:min(86vw,1650px);
    --content-w:min(86vw,1650px);
    --show-h:clamp(142px,8.45vw,162px);
    --info-h:clamp(172px,10.35vw,198px);
  }

  /* Keep upper layout as approved, only tighten the vertical rhythm. */
  .status-strip{
    min-height:clamp(62px,3.55vw,69px)!important;
    margin-top:-1px!important;
  }
  .status-item{
    padding:7px 15px!important;
    gap:11px!important;
  }
  .round-icon{
    width:clamp(44px,2.65vw,51px)!important;
    height:clamp(44px,2.65vw,51px)!important;
    font-size:20px!important;
  }
  .status-item small{font-size:11px!important}
  .status-item strong{font-size:clamp(14px,.9vw,17px)!important}
  .status-item>div>span:last-child{font-size:11px!important}
  .status-item:after{
    height:30%!important;
    top:35%!important;
  }

  .page-wrap{
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  .shows-layout,
  .show-grid{
    gap:9px!important;
  }
  .show-card,
  .station-card{
    height:var(--show-h)!important;
    min-height:var(--show-h)!important;
  }

  /* Quick Links card – stronger, less "office-card" looking. */
  .station-card{
    position:relative!important;
    color:#fff!important;
    border:0!important;
    background:
      radial-gradient(circle at 88% 12%,rgba(46,193,255,.82) 0 52px,transparent 53px),
      radial-gradient(circle at 14% 106%,rgba(255,139,57,.96) 0 84px,transparent 85px),
      radial-gradient(circle at 93% 88%,rgba(255,68,102,.55) 0 56px,transparent 57px),
      linear-gradient(135deg,#0a235e 0,#0b367f 55%,#0b285f 100%)!important;
    box-shadow:0 8px 18px rgba(8,39,96,.16)!important;
    overflow:hidden!important;
  }
  .station-card:before{
    opacity:.17!important;
    background:radial-gradient(circle,#fff 0 2px,transparent 2.4px) 0 0/17px 17px!important;
    mask-image:linear-gradient(135deg,#000 0 52%,transparent 88%)!important;
  }
  .station-card-inner{
    padding:11px 13px!important;
  }
  .station-card .eyebrow{
    color:#ffb777!important;
    font-size:8px!important;
    margin-bottom:1px!important;
  }
  .station-card h2{
    color:#fff!important;
    margin:0 0 2px!important;
    font-size:clamp(17px,1vw,20px)!important;
  }
  .station-card p{
    color:#dbe9ff!important;
    font-size:10px!important;
    line-height:1.16!important;
    margin:0 0 8px!important;
  }
  .station-card-actions.quick-links{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    margin-top:auto!important;
  }
  .station-card-actions.quick-links a{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
    padding:7px 8px!important;
    border-radius:10px!important;
    color:#fff!important;
    background:rgba(255,255,255,.10)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .station-card-actions.quick-links a:hover{
    background:rgba(255,255,255,.17)!important;
  }
  .station-card-actions.quick-links a span{
    width:18px!important;
    height:18px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:linear-gradient(135deg,#22b9ff,#ff5d73)!important;
    flex:0 0 18px!important;
    font-size:9px!important;
    font-weight:900!important;
  }

  /* Lower three cards: around 15–20% flatter than V20. */
  .radio-dashboard{
    margin-top:7px!important;
    gap:9px!important;
  }
  .presenter-card,
  .now-playing-card,
  .history-card{
    min-height:var(--info-h)!important;
    height:var(--info-h)!important;
  }
  .panel-head{
    padding:8px 12px 6px!important;
  }
  .panel-head h2{
    font-size:15px!important;
  }
  .eyebrow{
    font-size:8px!important;
    letter-spacing:1.8px!important;
  }
  .panel-link,.presenter-link{
    font-size:10px!important;
  }

  /* Presenter */
  .presenter-main{
    grid-template-columns:clamp(78px,4.8vw,92px) minmax(0,1fr)!important;
    gap:11px!important;
    padding:0 12px 5px!important;
  }
  .presenter-picture-wrap{
    width:clamp(78px,4.8vw,92px)!important;
    height:clamp(78px,4.8vw,92px)!important;
    border-width:4px!important;
  }
  .presenter-main h3{
    font-size:clamp(16px,1vw,19px)!important;
    margin-bottom:1px!important;
  }
  .presenter-main p{
    font-size:clamp(11px,.7vw,13px)!important;
    line-height:1.13!important;
    margin-bottom:2px!important;
  }
  .presenter-main .muted{
    font-size:10px!important;
    line-height:1.13!important;
  }
  .presenter-fallback{
    margin:0 12px 7px 22%!important;
    padding:5px 8px!important;
    border-radius:9px!important;
    font-size:9px!important;
    line-height:1.15!important;
  }

  /* Now Playing */
  .now-playing-main{
    grid-template-columns:clamp(72px,4.3vw,82px) minmax(0,1fr)!important;
    gap:10px!important;
    padding:0 12px 5px!important;
  }
  .now-playing-main img{
    width:clamp(72px,4.3vw,82px)!important;
    height:clamp(72px,4.3vw,82px)!important;
    border-radius:10px!important;
  }
  .track-info h3{
    margin:1px 0 1px!important;
    font-size:15px!important;
  }
  .track-info>p{
    margin:0 0 5px!important;
    font-size:12px!important;
  }
  .progress{height:5px!important}
  .track-meta{
    margin:4px 0 2px!important;
    font-size:9px!important;
  }
  .track-info small{font-size:9px!important}
  .stream-player{
    margin:0 12px 7px!important;
    padding:6px 9px!important;
    border-radius:11px!important;
  }
  .stream-title{
    margin-bottom:5px!important;
    font-size:10px!important;
  }
  .stream-title i{
    width:7px!important;height:7px!important;
  }
  .stream-controls{
    gap:7px!important;
  }
  .round-play{
    width:34px!important;
    height:34px!important;
    font-size:12px!important;
  }
  #volumeIcon{font-size:11px!important}
  .stream-controls a{font-size:9px!important}

  /* Recently Played: 10 rows remain visible but consume much less height. */
  .history-list{
    padding:0 12px 6px!important;
  }
  .history-row{
    grid-template-columns:45px minmax(0,1fr)!important;
    gap:6px!important;
    padding:2px 0!important;
    font-size:10px!important;
    line-height:1.05!important;
  }

  /* Slim footer to keep the entire homepage within the viewport. */
  footer{
    margin-top:7px!important;
    padding:7px var(--content-pad-r) 9px 0!important;
    min-height:42px!important;
    gap:10px!important;
  }
  footer img{
    width:145px!important;
  }
  footer p{
    display:none!important;
  }
  .footer-links{
    gap:12px!important;
  }
  .footer-links a{
    font-size:10px!important;
  }
  .copyright{
    font-size:9px!important;
  }
}

/* Mobile/tablet keeps the normal responsive card sizing. */
@media (max-width:1199px){
  .station-card-actions.quick-links{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
}


/* ============================================================
   V23 – fix clipped dashboard boxes and unused bottom area
   ============================================================ */
@media (min-width:1200px){

  /* Let the second row grow with its content instead of cutting it off. */
  .radio-dashboard{
    align-items:stretch !important;
    grid-auto-rows:auto !important;
  }

  .presenter-card,
  .now-playing-card,
  .history-card{
    height:auto !important;
    min-height:238px !important;
    overflow:hidden !important;
  }

  /* Keep Recently Played complete; its content determines the row height. */
  .history-card{
    min-height:238px !important;
  }
  .history-list{
    padding-bottom:9px !important;
  }
  .history-row{
    padding:3px 0 !important;
    line-height:1.12 !important;
  }

  /* The player must never be cut off. */
  .now-playing-card{
    display:flex !important;
    flex-direction:column !important;
  }
  .now-playing-main{
    flex:0 0 auto !important;
  }
  .stream-player{
    margin-top:auto !important;
    margin-bottom:9px !important;
  }

  /* Presenter card follows the same full-height row cleanly. */
  .presenter-card{
    display:flex !important;
    flex-direction:column !important;
  }
  .presenter-fallback{
    margin-top:auto !important;
    margin-bottom:9px !important;
  }

  /* Remove the over-compression that caused the cards to be chopped. */
  .panel{
    overflow:hidden !important;
  }

  /* Footer directly follows the dashboard; no artificial empty stage below. */
  .page-wrap{
    padding-bottom:0 !important;
  }
  footer{
    margin-top:8px !important;
    padding-top:9px !important;
    padding-bottom:10px !important;
  }
}

/* At shorter desktop viewport heights, keep everything readable rather than clipping. */
@media (min-width:1200px) and (max-height:850px){
  .presenter-card,
  .now-playing-card,
  .history-card{
    min-height:224px !important;
  }
  .presenter-picture-wrap{
    width:84px !important;
    height:84px !important;
  }
  .now-playing-main img{
    width:76px !important;
    height:76px !important;
  }
}


/* ============================================================
   V24 – single presenter + clean page ending
   ============================================================ */

/* Peter Tonner is the only presenter for now. */
.presenter-card .panel-head{
  min-height:43px!important;
}
.presenter-main{
  align-items:center!important;
}
.presenter-live-dot{
  display:none!important;
}

/* No obsolete presenter fallback/link area. */
.presenter-fallback,
.presenter-link,
#presenterBadge{
  display:none!important;
}

/* Remove the empty area below the footer.
   The body becomes a real viewport column and the footer settles at the bottom. */
html{
  min-height:100%;
  background:#fff7ef;
}
body{
  min-height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
}
main{
  flex:1 0 auto!important;
}
footer{
  flex:0 0 auto!important;
  margin-top:8px!important;
  position:relative!important;
  z-index:4!important;
}

/* On large screens the footer closes the page with a deliberate colour band,
   instead of leaving a beige unused rectangle under it. */
@media (min-width:1200px){
  footer{
    width:100%!important;
    max-width:none!important;
    min-height:58px!important;
    padding:9px max(calc((100vw - min(86vw,1650px))/2),18px)!important;
    background:
      linear-gradient(90deg,
        rgba(31,164,255,.12) 0 9%,
        rgba(255,255,255,.94) 9% 91%,
        rgba(255,142,62,.14) 91% 100%)!important;
    border-top:1px solid rgba(226,219,212,.95)!important;
  }
  footer > *{
    position:relative;
    z-index:2;
  }
}

/* Tablet/mobile presenter remains clean and uses Peter's real image. */
@media (max-width:1199px){
  .presenter-main{
    grid-template-columns:100px 1fr!important;
  }
  .presenter-picture-wrap{
    width:100px!important;
    height:100px!important;
  }
}

:root{
  --navy:#0b2a66;
  --blue:#1689f5;
  --sky:#2bbcff;
  --coral:#ff4d5f;
  --orange:#ff9142;
  --text:#102a60;
  --muted:#66738e;
  --line:#e8e1dc;

  /* V19 desktop tightened to avoid homepage scrolling */
  --header-h:clamp(56px,3.2vw,68px);
  --hero-h:clamp(238px,14.6vw,272px);
  --status-w:min(86vw,1650px);
  --content-w:min(86vw,1650px);
  --content-pad-r:18px;
  --show-h:clamp(146px,8.9vw,172px);
  --info-h:clamp(190px,11.5vw,228px);
  --listen-h:clamp(96px,5.8vw,116px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:#fff7ef;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}
button,a{font:inherit}
.top-colour-line{display:none}

/* Exact lower left/right decoration from the approved master. */
body:before,body:after{
  content:"";
  position:absolute;
  top:calc(var(--header-h) + var(--hero-h));
  z-index:-2;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:100% 100%;
}
body:before{
  left:0;
  width:8.3732vw;
  height:36.9617vw;
  max-height:710px;
  background-image:url("assets/v15-left-lower.webp");
}
body:after{
  right:0;
  width:9.8086vw;
  height:36.9617vw;
  max-height:710px;
  background-image:url("assets/v15-right-lower.webp");
}

/* =========================================================
   HEADER — full-width crop from the approved reference
   ========================================================= */
.site-header{
  width:100vw;
  height:var(--header-h);
  min-height:0;
  margin:0;
  padding:0;
  position:sticky;
  top:0;
  z-index:50;
  background:url("assets/v15-header-full.webp") center/100% 100% no-repeat;
  border:0;
  box-shadow:none;
}
.site-header .brand,
.site-header .nav,
.site-header .search-button,
.site-header .live-button{opacity:0}
.brand{
  position:absolute;
  left:10.35%;
  top:0;
  width:17.4%;
  height:100%;
  display:block;
}
.brand img{width:100%;height:100%;object-fit:contain}
.nav{
  position:absolute;
  left:43.2%;
  top:0;
  width:28.7%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  align-items:center;
}
.nav a{display:block;height:100%;text-decoration:none}
.search-button{
  position:absolute;
  left:72.2%;
  top:0;
  width:3.0%;
  height:100%;
  border:0;
  background:transparent;
  cursor:pointer;
}
.live-button{
  position:absolute;
  left:75.3%;
  top:10%;
  width:11.0%;
  height:72%;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
}
.nav-toggle{display:none}

/* =========================================================
   HERO — one exact full-width crop; no CSS recreation
   ========================================================= */
.hero{
  width:100vw;
  height:var(--hero-h);
  min-height:0;
  margin:0;
  display:block;
  position:relative;
  overflow:hidden;
  background:none!important;
}
.hero:before,.hero:after,
.hero-copy:before,.hero-copy:after,
.hero-photo:before,.hero-photo:after{display:none!important}
.hero-photo{display:none}
.hero-copy{
  position:absolute;
  inset:0;
  padding:0;
  background:none;
}
.hero-copy>.kicker,
.hero-copy>.hero-wordmark,
.hero-copy>.hero-claim,
.hero-copy>p,
.hero-copy>.colour-notes{
  opacity:0;
  pointer-events:none;
}
.hero-actions{display:none!important}
.hero-actions .primary,
.hero-actions .secondary{display:none!important}

/* =========================================================
   LIVE STATUS STRIP
   ========================================================= */
.status-strip{
  width:var(--status-w);
  min-height:clamp(64px,3.9vw,76px);
  margin:0 auto;
  display:grid;
  grid-template-columns:31.6% 36.4% 32%;
  background:#fff;
  border:1px solid rgba(225,219,214,.94);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 5px 16px rgba(9,39,94,.08);
  position:relative;
  z-index:5;
}
.status-item{
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 16px;
  position:relative;
  background:#fff;
}
.status-item+.status-item{border-left:1px solid #e8e1db}
.round-icon{
  width:clamp(50px,3.23vw,62px);
  height:clamp(50px,3.23vw,62px);
  flex:0 0 auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
}
.status-onair .round-icon{background:#ff3f62}
.status-track .round-icon{background:#1598f4}
.status-next .round-icon{background:#ff7e41}
.status-item small{
  display:block;
  font-weight:900;
  font-size:clamp(11px,.72vw,14px);
  color:#ff4d5f;
  margin-bottom:1px;
}
.status-item strong{
  display:block;
  font-size:clamp(15px,.96vw,19px);
  line-height:1.07;
  color:#102a60;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.status-item>div>span:last-child{
  display:block;
  color:#425c82;
  font-size:clamp(11px,.72vw,14px);
}
.status-item:after{
  content:"";
  position:absolute;
  right:3.7%;
  top:29%;
  width:22%;
  height:40%;
  opacity:.82;
  background:repeating-linear-gradient(90deg,transparent 0 7px,currentColor 7px 10px,transparent 10px 14px);
  clip-path:polygon(0 50%,5% 36%,10% 64%,15% 24%,20% 72%,25% 29%,30% 68%,35% 35%,40% 62%,45% 39%,50% 69%,55% 42%,60% 57%,65% 46%,70% 62%,75% 44%,80% 56%,85% 48%,90% 54%,95% 50%,100% 52%,100% 59%,0 59%);
  pointer-events:none;
}
.status-onair{color:#ff9b38}
.status-track{color:#34b7ff}
.status-next{color:#5bc9ff}

/* =========================================================
   CENTRAL CONTENT
   ========================================================= */
.page-wrap{
  width:var(--content-w);
  margin:0 auto;
  padding:8px var(--content-pad-r) 14px 0;
  position:relative;
}
.page-wrap:before,.page-wrap:after{display:none}

/* SHOW ROW */
.shows-layout{
  display:grid;
  grid-template-columns:minmax(0,999fr) 357fr;
  gap:clamp(10px,.718vw,14px);
  align-items:start;
}
.show-grid{
  display:grid;
  grid-template-columns:333fr 332fr 310fr;
  gap:clamp(10px,.718vw,14px);
}
.show-card{
  height:var(--show-h);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  border:0;
  box-shadow:none;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.show-card.weekend{background-image:url("assets/v15-show-weekend.webp")!important}
.show-card.rock{background-image:url("assets/v27-show-rock.webp")!important}
.show-card.disco{background-image:url("assets/v15-show-disco.webp")!important}
.show-card:before,.show-card:after{display:none!important}
.show-overlay{position:absolute;inset:0;opacity:0}
.show-overlay a{position:absolute;inset:0;display:block}

/* generic panels */
.panel{
  background:#fff;
  border:1px solid rgba(224,218,212,.95);
  border-radius:16px;
  box-shadow:0 4px 14px rgba(10,44,96,.05);
  overflow:hidden;
}
.panel-head{
  padding:10px 12px 7px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.eyebrow{
  display:block;
  color:#ff4d5f;
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:2px;
}
.panel-head h2{
  margin:0;
  color:#102a60;
  font-size:clamp(15px,.95vw,18px);
  line-height:1.08;
}
.panel-link,.presenter-link,#mixcloudTopLink{
  color:#1689f5;
  text-decoration:none;
  font-weight:850;
  font-size:11px;
  white-space:nowrap;
}
.badge{
  border-radius:999px;
  background:#eef3fb;
  color:#4f6486;
  padding:4px 8px;
  font-size:9px;
  font-weight:900;
}
.badge.live{background:#ffedf0;color:#ff4d5f}
.presenter-badge-hidden{display:none}

/* schedule */
.schedule-panel{height:var(--show-h)}
.schedule-preview .schedule-row{
  display:grid;
  grid-template-columns:42px 62px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:9px 15px;
  border-top:1px solid #e9e2dc;
  font-size:clamp(10px,.67vw,13px);
}
.schedule-preview .schedule-row b{color:#102a60}
.schedule-preview .schedule-row span{color:#1689f5;font-weight:850}
.schedule-preview .schedule-row strong{
  color:#102a60;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.schedule-preview .schedule-row.is-current{
  background:linear-gradient(90deg,#fff0f1,#fff8f3);
}
.schedule-preview .schedule-row.is-current b{color:#ff4d5f}
.schedule-note{display:none}

/* SECOND ROW */
.radio-dashboard{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,.718vw,14px);
  margin-top:8px;
  align-items:stretch;
}
.presenter-card,.now-playing-card,.history-card{
  min-height:var(--info-h);
}
.presenter-card{
  background:linear-gradient(150deg,#fff 0 57%,#fff8ef 57% 73%,#f2f8ff 73% 100%);
}
.presenter-main{
  display:grid;
  grid-template-columns:clamp(94px,6.2vw,126px) minmax(0,1fr);
  gap:16px;
  padding:0 14px 8px;
  align-items:center;
}
.presenter-picture-wrap{
  width:clamp(94px,6.2vw,126px);
  height:clamp(94px,6.2vw,126px);
  border-radius:50%;
  border:5px solid #fff;
  box-shadow:0 2px 10px rgba(10,44,96,.12);
  overflow:hidden;
  position:relative;
}
.presenter-picture-wrap img{width:100%;height:100%;object-fit:cover}
.presenter-live-dot{display:none}
.presenter-main h3{
  margin:0 0 3px;
  font-size:clamp(18px,1.22vw,24px);
  color:#102a60;
}
.presenter-main p{
  margin:0 0 3px;
  color:#294f82;
  font-size:clamp(13px,.85vw,16px);
  line-height:1.25;
}
.presenter-main .muted{font-size:clamp(11px,.72vw,14px)}
.presenter-fallback{
  margin:0 14px 10px 26%;
  padding:8px 11px;
  background:#eef5ff;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#32527e;
  font-size:clamp(10px,.66vw,13px);
}
.presenter-fallback img{display:none}

.now-playing-main{
  display:grid;
  grid-template-columns:clamp(88px,5.26vw,101px) minmax(0,1fr);
  gap:14px;
  padding:0 14px 8px;
}
.now-playing-main img{
  width:clamp(88px,5.26vw,101px);
  height:clamp(88px,5.26vw,101px);
  object-fit:cover;
  border-radius:12px;
}
.track-info h3{margin:3px 0 3px;font-size:clamp(15px,1vw,19px)}
.track-info>p{margin:0 0 10px;font-size:clamp(13px,.85vw,16px)}
.progress{height:6px;background:#e5e9ef;border-radius:999px;overflow:hidden}
.progress span{display:block;height:100%;width:14%;background:#1689f5;border-radius:999px}
.track-meta{display:flex;justify-content:space-between;font-size:clamp(10px,.65vw,12px);color:#66738e;margin:7px 0 5px}
.track-info small{color:#7c8698}
.stream-player{
  margin:0 14px 10px;
  padding:8px 11px;
  border-radius:14px;
  background:#f4f8fb;
  border:1px solid #e5ebf1;
}
.stream-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:clamp(11px,.75vw,14px)}
.stream-title i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#18cc72;margin-right:5px}
.stream-controls{display:flex;align-items:center;gap:10px}
.round-play{
  width:clamp(42px,2.8vw,54px);
  height:clamp(42px,2.8vw,54px);
  border:0;border-radius:50%;background:#1689f5;color:#fff;font-weight:900;cursor:pointer;
}
.stream-controls input{flex:1;accent-color:#1689f5}
.stream-controls a{color:#1689f5;text-decoration:none;font-weight:800;font-size:10px}

.history-list{padding:0 14px 10px}
.history-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:8px;
  padding:3px 0;
  border-top:1px solid #e6e1dc;
  font-size:clamp(10px,.66vw,13px);
}
.history-row time{color:#183f79;font-weight:850}
.history-row span{color:#294b7b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* LISTEN AGAIN */
.listen-again{
  position:relative;
  margin-top:8px;
  height:var(--listen-h);
  background:url("assets/v15-listen-again.webp") center/100% 100% no-repeat!important;
  border:0;
  box-shadow:none;
}
.listen-again .panel-head,.listen-again .episode-grid{opacity:0}
.listen-again .episode-grid{
  position:absolute;left:0;right:0;bottom:0;height:70%;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.episode{position:relative}
.episode-play{position:absolute;inset:0;display:block}

/* BELOW THE REFERENCE FOLD */
.about{
  margin-top:14px;
  padding:22px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px;
  background:linear-gradient(135deg,#fff8ef,#fff 58%,#eef8ff);
}
.about h2{margin:4px 0 7px;font-size:28px}
.about p{margin:0;color:#50627a;line-height:1.5;font-size:14px}
.about-points{display:grid;gap:8px}
.about-points span{padding:8px 11px;background:#fff;border:1px solid #e4e8ed;border-radius:12px;font-size:12px}

.full-schedule{margin-top:14px;background:linear-gradient(135deg,#fff8ef,#fff 58%,#eef8ff)}
.full-schedule-head{align-items:flex-start;padding-bottom:14px}
.full-schedule-head>div:first-child{max-width:760px}
.full-schedule-head p{margin:6px 0 0}
.schedule-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:520px}
.schedule-legend span{font-size:9px;font-weight:900;color:#fff;padding:5px 8px;border-radius:999px}
.legend-news{background:#b37b59}.legend-disco{background:#d34f7b}.legend-90s{background:#0b9d86}.legend-rock{background:#d96a3c}.legend-70s{background:#b7d950;color:#244100!important}.legend-60s{background:#50c9c2;color:#103e43!important}.legend-funk{background:#ff2857}.legend-80s{background:#43c486;color:#103d31!important}
.schedule-scroll{overflow-x:auto;padding:0 14px 17px}
.weekly-schedule{display:grid;grid-template-columns:repeat(7,minmax(170px,1fr));gap:9px;min-width:1240px}
.schedule-day{border-radius:13px;background:#fff;border:1px solid #e6e1dc;overflow:hidden}
.schedule-day-head{display:flex;justify-content:space-between;padding:10px 11px;background:#f7fbff;border-bottom:1px solid #e6e1dc}
.schedule-day-head b{font-size:13px}
.schedule-day-head span{font-size:8px;font-weight:900;color:#fff;background:#ff4d5f;padding:4px 7px;border-radius:999px}
.programme-list{padding:7px;display:grid;gap:5px}
.programme{display:grid;grid-template-columns:44px 1fr auto;gap:7px;align-items:center;padding:6px 8px;border-radius:8px;color:#fff;font-size:10px}
.programme-news{background:#b37b59}.programme-disco-show{background:#d34f7b}.programme-nineties{background:#0b9d86}.programme-rock-block{background:#d96a3c}.programme-glam-rock{background:#f0c421;color:#27354b}.programme-seventies{background:#b7d950;color:#26422e}.programme-sixties{background:#50c9c2;color:#123e44}.programme-funk{background:#ff2857}.programme-eighties{background:#43c486;color:#103d31}.programme-default{background:#6b7b94}
.programme.is-live{outline:3px solid rgba(255,75,89,.23)}
.programme em{font-style:normal;background:#fff;color:#ff4d5f;border-radius:999px;padding:3px 5px;font-size:7px;font-weight:900}

/* FOOTER */
footer{
  width:var(--content-w);
  margin:0 auto;
  padding:10px var(--content-pad-r) 14px 0;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:12px;
  border-top:1px solid #e7dfd8;
}
footer img{width:178px}
footer p{font-size:10px;color:#66738e;margin:2px 0 0}
.footer-links{display:flex;gap:18px}
.footer-links a{color:#50627a;text-decoration:none;font-size:11px;font-weight:800}
.copyright{text-align:right;color:#7c8799;font-size:10px}
.error-text{color:#d83a49}

/* =========================================================
   RESPONSIVE: preserve function below desktop
   ========================================================= */
@media(max-width:1199px){
  body:before,body:after{display:none}
  :root{
    --status-w:calc(100vw - 16px);
    --content-w:calc(100vw - 16px);
    --content-pad-r:0px;
  }
  .site-header{
    width:calc(100vw - 10px);
    height:64px;
    margin:0 auto;
    background:#fff;
    display:flex;
    align-items:center;
    padding:0 14px;
    gap:12px;
  }
  .site-header .brand,.site-header .nav,.site-header .search-button,.site-header .live-button{opacity:1}
  .brand{position:static;width:auto;height:auto;margin-right:auto}
  .brand img{width:220px;height:auto}
  .nav-toggle{display:block;border:0;background:transparent;font-size:24px;color:var(--navy)}
  .nav{
    display:none;
    position:absolute;
    left:0;right:0;top:64px;
    width:auto;height:auto;
    background:#fff;
    padding:10px 16px;
    flex-direction:column;
    grid-template-columns:none;
    align-items:stretch;
    gap:0;
    box-shadow:0 12px 24px rgba(10,44,96,.08);
  }
  .nav.open{display:flex}
  .nav a{height:auto;padding:10px 0;color:var(--navy);font-weight:800}
  .search-button{position:static;width:auto;height:auto}
  .live-button{display:none}
  .hero{
    width:calc(100vw - 10px);
    height:auto;
    margin:0 auto;
    background:none;
    display:grid;
    grid-template-columns:1fr;
  }
  .hero-copy{
    position:relative;
    inset:auto;
    min-height:300px;
    background:linear-gradient(135deg,#fff5e9,#ffe1ca);
    padding:24px;
  }
  .hero-copy>.kicker,.hero-copy>.hero-wordmark,.hero-copy>.hero-claim,.hero-copy>p,.hero-copy>.colour-notes{opacity:1}
  .kicker{font-size:10px;letter-spacing:2px;color:#ff4d5f;font-weight:900}
  .hero-wordmark{font-size:58px;font-weight:950;letter-spacing:-3px;color:#0b2a66}
  .hero-wordmark strong{color:#1689f5}
  .hero-claim{font-size:24px;letter-spacing:3px}
  .hero-copy p{font-size:14px;line-height:1.4;max-width:620px}
  .hero-actions{position:static;width:auto;height:auto;display:flex;margin-top:12px}
  .hero-actions .primary,.hero-actions .secondary{opacity:1;height:auto;width:auto;padding:11px 20px;border-radius:999px}
  .primary{background:#ff4d5f;color:#fff}
  .secondary{border:2px solid #b8d3ef;color:#0b2a66;background:#fff}
  .colour-notes{display:flex;gap:8px;margin-top:12px}
  .colour-notes span{padding:6px 10px;border-radius:999px;background:#fff;font-size:10px}
  .hero-photo{
    display:block;
    min-height:260px;
    background:url("assets/v15-hero-full.webp") center right/cover no-repeat;
  }
  .status-strip{grid-template-columns:1fr;gap:8px;background:transparent;border:0;box-shadow:none}
  .status-item{border:1px solid #e8e1db;border-radius:16px!important}
  .status-item+.status-item{border-left:1px solid #e8e1db}
  .shows-layout{grid-template-columns:1fr}
  .show-grid{grid-template-columns:repeat(3,1fr)}
  .schedule-panel{height:auto;margin-top:10px}
  .schedule-note{display:block;padding:0 15px 12px;color:#66738e;font-size:10px}
  .radio-dashboard{grid-template-columns:1fr 1fr}
  .history-card{grid-column:1/-1}
  .listen-again{height:auto;min-height:120px;background:#fff!important}
  .listen-again .panel-head,.listen-again .episode-grid{opacity:1}
  .listen-again .episode-grid{position:static;height:auto;padding:0 14px 14px}
  .episode{padding:10px;border:1px solid #e5e2dd;border-radius:12px}
}
@media(max-width:820px){
  .show-grid{grid-template-columns:1fr}
  .show-card{height:210px}
  .radio-dashboard{grid-template-columns:1fr}
  .history-card{grid-column:auto}
  .presenter-main{grid-template-columns:100px 1fr}
  .presenter-picture-wrap{width:100px;height:100px}
  .now-playing-main{grid-template-columns:82px 1fr}
  .now-playing-main img{width:82px;height:82px}
  .episode-grid{grid-template-columns:1fr!important}
  .about{grid-template-columns:1fr}
  footer{grid-template-columns:1fr;text-align:center}
  .footer-links{justify-content:center;flex-wrap:wrap}
  .copyright{text-align:center}
}
@media(max-width:520px){
  .brand img{width:190px}
  .hero-wordmark{font-size:42px}
  .hero-claim{font-size:18px}
  .presenter-main{grid-template-columns:1fr}
  .presenter-picture-wrap{width:130px;height:130px}
  .presenter-fallback{margin-left:16px}
  .stream-controls a{display:none}
}


/* ============================================================
   V16 corrections
   ============================================================ */

/* Make image-overlay buttons reliably clickable on the desktop master artwork. */
.site-header .live-button,
.hero-actions .primary,
.hero-actions .secondary{
  opacity:.001 !important;
  pointer-events:auto !important;
  z-index:30 !important;
  cursor:pointer !important;
}

/* The visual master remains, but actual click zones sit above it. */
.site-header .live-button{position:absolute!important}
.hero-actions{z-index:30!important}

/* Home has no schedule content anymore. Keep the fourth card footprint so
   the composition remains close to the approved master. */
.station-card{
  height:var(--show-h);
  background:
    radial-gradient(circle at 92% 9%,rgba(48,188,255,.25) 0 60px,transparent 61px),
    radial-gradient(circle at 8% 98%,rgba(255,139,66,.22) 0 72px,transparent 73px),
    linear-gradient(145deg,#fff 0,#fff8ef 54%,#edf8ff 100%);
  position:relative;
}
.station-card:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.45;
  background:radial-gradient(circle,#ff8790 0 2px,transparent 2.4px) 0 0/18px 18px;
  mask-image:linear-gradient(135deg,#000 0 25%,transparent 56%);
  pointer-events:none;
}
.station-card-inner{
  position:relative;
  z-index:2;
  height:100%;
  padding:13px 15px;
  display:flex;
  flex-direction:column;
}
.station-card h2{
  margin:2px 0 3px;
  font-size:clamp(18px,1.12vw,22px);
  color:#0b2a66;
}
.station-card p{
  margin:0;
  color:#50678b;
  font-size:clamp(10px,.66vw,13px);
  line-height:1.25;
}
.station-tags{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:auto;
  margin-bottom:9px;
}
.station-tags span{
  padding:4px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  background:#eef7ff;
  color:#167fd7;
}
.station-tags span:nth-child(1){background:#ffe9eb;color:#d83d50}
.station-tags span:nth-child(2){background:#fff0dc;color:#c86a0b}
.station-tags span:nth-child(4){background:#efedff;color:#5c54b7}
.station-card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.station-live{
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ff4d5f,#ff8545);
  color:#fff;
  font-size:10px;
  font-weight:900;
  padding:7px 11px;
  cursor:pointer;
}
.station-card-actions a{
  color:#1689f5;
  font-size:10px;
  text-decoration:none;
  font-weight:900;
}

/* Design tightening from the V15 screenshot. */
.status-strip{
  margin-top:-1px!important;
  min-height:clamp(70px,4.18vw,81px)!important;
}
.status-item{
  padding-top:9px!important;
  padding-bottom:9px!important;
}
.page-wrap{padding-top:9px!important}
.shows-layout{gap:clamp(9px,.66vw,13px)!important}
.show-grid{gap:clamp(9px,.66vw,13px)!important}
.radio-dashboard{
  margin-top:9px!important;
  gap:clamp(9px,.66vw,13px)!important;
}
.presenter-card,.now-playing-card,.history-card{
  min-height:clamp(220px,13.15vw,254px)!important;
}
.panel-head{padding-top:11px!important}
.presenter-fallback{margin-bottom:10px!important}
.history-row{padding:3.5px 0!important}

/* Match the reference more closely: no stray STATION badge in presenter heading. */
#presenterBadge{display:none!important}

/* Listen Again closer to the reference fold. */
.listen-again{margin-top:9px!important}

/* Actual player: stronger feedback states */
.stream-title #streamState{font-weight:800}
.stream-title #streamState.is-buffering{color:#e17a24}
.stream-title #streamState.is-error{color:#d83a49}

/* Schedule nav/page helper */
.schedule-link-active{color:#ff4d5f!important}

/* The full schedule no longer exists on the home page. */
.full-schedule{display:none!important}

@media(max-width:1199px){
  .site-header .live-button,
  .hero-actions .primary,
  .hero-actions .secondary{opacity:1!important}
  .station-card{height:auto;min-height:150px}
}


/* ============================================================
   V17 – Hero alignment + separate Listen Again + legal footer
   ============================================================ */

/* The hero is now an actual image with the exact reference aspect ratio.
   This removes background-size/crop drift between screen widths. */
.hero{
  width:100vw!important;
  aspect-ratio:1672 / 265!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  background:none!important;
}
.hero-master-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  z-index:1;
  pointer-events:none;
}
.hero-copy{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  padding:0!important;
  background:transparent!important;
}
.hero-photo{display:none!important}
.hero-copy>.kicker,
.hero-copy>.hero-wordmark,
.hero-copy>.hero-claim,
.hero-copy>p,
.hero-copy>.colour-notes{opacity:0!important;pointer-events:none!important}
.hero-actions{
  position:absolute!important;
  left:10.2%!important;
  top:68.7%!important;
  width:20.3%!important;
  height:15.4%!important;
  display:flex!important;
  gap:1vw!important;
  z-index:12!important;
}
.hero-actions .primary,
.hero-actions .secondary{
  opacity:.001!important;
  display:block!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  cursor:pointer!important;
}
.hero-actions .primary{width:52%!important}
.hero-actions .secondary{width:44%!important}

/* After removing Listen Again from home, keep the lower part visually tight. */
.about{
  margin-top:10px!important;
}
footer{
  margin-top:10px!important;
}

/* Legal link */
.footer-links a[href="impressum.html"]{font-weight:900}

/* Mobile hero falls back to live HTML content. */
@media(max-width:1199px){
  .hero{
    width:calc(100vw - 10px)!important;
    aspect-ratio:auto!important;
    height:auto!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    background:none!important;
  }
  .hero-master-art{display:none!important}
  .hero-copy{
    position:relative!important;
    inset:auto!important;
    min-height:260px!important;
    padding:22px!important;
    background:linear-gradient(135deg,#fff5e9,#ffe1ca)!important;
  }
  .hero-copy>.kicker,
  .hero-copy>.hero-wordmark,
  .hero-copy>.hero-claim,
  .hero-copy>p,
  .hero-copy>.colour-notes{opacity:1!important;pointer-events:auto!important}
  .hero-actions{
    position:static!important;
    width:auto!important;
    height:auto!important;
    display:flex!important;
    margin-top:12px!important;
  }
  .hero-actions .primary,
  .hero-actions .secondary{
    opacity:1!important;
    height:auto!important;
    width:auto!important;
    padding:11px 20px!important;
  }
}


/* ============================================================
   V19 – desktop hero artwork, slightly shifted left
   and without the duplicated hero buttons.
   ============================================================ */
@media (min-width:1200px){
  .hero{
    overflow:hidden !important;
  }
  .hero-master-art{
    width:105.2% !important;
    height:100% !important;
    left:-3.55% !important;
    right:auto !important;
    top:0 !important;
    bottom:0 !important;
    object-fit:cover !important;
    object-position:left center !important;
    transform:none !important;
    display:block !important;
  }
  .hero-copy{
    z-index:2 !important;
  }
  .hero-actions{
    display:none !important;
  }
}

/* V19 extras */
.station-card-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.station-card-actions a{
  color:#1689f5;
  text-decoration:none;
  font-weight:850;
  font-size:12px;
}
.station-card-actions .station-live{display:none!important}
footer{
  border-top:1px solid #e9e0d9;
}
@media (min-width:1200px){
  body{
    overflow-y:auto;
  }
}


/* ============================================================
   V21 – final homepage tightening for 1920x1080 / 100% zoom
   ============================================================ */
@media (min-width:1200px){

  :root{
    --status-w:min(86vw,1650px);
    --content-w:min(86vw,1650px);
    --show-h:clamp(142px,8.45vw,162px);
    --info-h:clamp(172px,10.35vw,198px);
  }

  /* Keep upper layout as approved, only tighten the vertical rhythm. */
  .status-strip{
    min-height:clamp(62px,3.55vw,69px)!important;
    margin-top:-1px!important;
  }
  .status-item{
    padding:7px 15px!important;
    gap:11px!important;
  }
  .round-icon{
    width:clamp(44px,2.65vw,51px)!important;
    height:clamp(44px,2.65vw,51px)!important;
    font-size:20px!important;
  }
  .status-item small{font-size:11px!important}
  .status-item strong{font-size:clamp(14px,.9vw,17px)!important}
  .status-item>div>span:last-child{font-size:11px!important}
  .status-item:after{
    height:30%!important;
    top:35%!important;
  }

  .page-wrap{
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  .shows-layout,
  .show-grid{
    gap:9px!important;
  }
  .show-card,
  .station-card{
    height:var(--show-h)!important;
    min-height:var(--show-h)!important;
  }

  /* Quick Links card – stronger, less "office-card" looking. */
  .station-card{
    position:relative!important;
    color:#fff!important;
    border:0!important;
    background:
      radial-gradient(circle at 88% 12%,rgba(46,193,255,.82) 0 52px,transparent 53px),
      radial-gradient(circle at 14% 106%,rgba(255,139,57,.96) 0 84px,transparent 85px),
      radial-gradient(circle at 93% 88%,rgba(255,68,102,.55) 0 56px,transparent 57px),
      linear-gradient(135deg,#0a235e 0,#0b367f 55%,#0b285f 100%)!important;
    box-shadow:0 8px 18px rgba(8,39,96,.16)!important;
    overflow:hidden!important;
  }
  .station-card:before{
    opacity:.17!important;
    background:radial-gradient(circle,#fff 0 2px,transparent 2.4px) 0 0/17px 17px!important;
    mask-image:linear-gradient(135deg,#000 0 52%,transparent 88%)!important;
  }
  .station-card-inner{
    padding:11px 13px!important;
  }
  .station-card .eyebrow{
    color:#ffb777!important;
    font-size:8px!important;
    margin-bottom:1px!important;
  }
  .station-card h2{
    color:#fff!important;
    margin:0 0 2px!important;
    font-size:clamp(17px,1vw,20px)!important;
  }
  .station-card p{
    color:#dbe9ff!important;
    font-size:10px!important;
    line-height:1.16!important;
    margin:0 0 8px!important;
  }
  .station-card-actions.quick-links{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    margin-top:auto!important;
  }
  .station-card-actions.quick-links a{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
    padding:7px 8px!important;
    border-radius:10px!important;
    color:#fff!important;
    background:rgba(255,255,255,.10)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .station-card-actions.quick-links a:hover{
    background:rgba(255,255,255,.17)!important;
  }
  .station-card-actions.quick-links a span{
    width:18px!important;
    height:18px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:linear-gradient(135deg,#22b9ff,#ff5d73)!important;
    flex:0 0 18px!important;
    font-size:9px!important;
    font-weight:900!important;
  }

  /* Lower three cards: around 15–20% flatter than V20. */
  .radio-dashboard{
    margin-top:7px!important;
    gap:9px!important;
  }
  .presenter-card,
  .now-playing-card,
  .history-card{
    min-height:var(--info-h)!important;
    height:var(--info-h)!important;
  }
  .panel-head{
    padding:8px 12px 6px!important;
  }
  .panel-head h2{
    font-size:15px!important;
  }
  .eyebrow{
    font-size:8px!important;
    letter-spacing:1.8px!important;
  }
  .panel-link,.presenter-link{
    font-size:10px!important;
  }

  /* Presenter */
  .presenter-main{
    grid-template-columns:clamp(78px,4.8vw,92px) minmax(0,1fr)!important;
    gap:11px!important;
    padding:0 12px 5px!important;
  }
  .presenter-picture-wrap{
    width:clamp(78px,4.8vw,92px)!important;
    height:clamp(78px,4.8vw,92px)!important;
    border-width:4px!important;
  }
  .presenter-main h3{
    font-size:clamp(16px,1vw,19px)!important;
    margin-bottom:1px!important;
  }
  .presenter-main p{
    font-size:clamp(11px,.7vw,13px)!important;
    line-height:1.13!important;
    margin-bottom:2px!important;
  }
  .presenter-main .muted{
    font-size:10px!important;
    line-height:1.13!important;
  }
  .presenter-fallback{
    margin:0 12px 7px 22%!important;
    padding:5px 8px!important;
    border-radius:9px!important;
    font-size:9px!important;
    line-height:1.15!important;
  }

  /* Now Playing */
  .now-playing-main{
    grid-template-columns:clamp(72px,4.3vw,82px) minmax(0,1fr)!important;
    gap:10px!important;
    padding:0 12px 5px!important;
  }
  .now-playing-main img{
    width:clamp(72px,4.3vw,82px)!important;
    height:clamp(72px,4.3vw,82px)!important;
    border-radius:10px!important;
  }
  .track-info h3{
    margin:1px 0 1px!important;
    font-size:15px!important;
  }
  .track-info>p{
    margin:0 0 5px!important;
    font-size:12px!important;
  }
  .progress{height:5px!important}
  .track-meta{
    margin:4px 0 2px!important;
    font-size:9px!important;
  }
  .track-info small{font-size:9px!important}
  .stream-player{
    margin:0 12px 7px!important;
    padding:6px 9px!important;
    border-radius:11px!important;
  }
  .stream-title{
    margin-bottom:5px!important;
    font-size:10px!important;
  }
  .stream-title i{
    width:7px!important;height:7px!important;
  }
  .stream-controls{
    gap:7px!important;
  }
  .round-play{
    width:34px!important;
    height:34px!important;
    font-size:12px!important;
  }
  #volumeIcon{font-size:11px!important}
  .stream-controls a{font-size:9px!important}

  /* Recently Played: 10 rows remain visible but consume much less height. */
  .history-list{
    padding:0 12px 6px!important;
  }
  .history-row{
    grid-template-columns:45px minmax(0,1fr)!important;
    gap:6px!important;
    padding:2px 0!important;
    font-size:10px!important;
    line-height:1.05!important;
  }

  /* Slim footer to keep the entire homepage within the viewport. */
  footer{
    margin-top:7px!important;
    padding:7px var(--content-pad-r) 9px 0!important;
    min-height:42px!important;
    gap:10px!important;
  }
  footer img{
    width:145px!important;
  }
  footer p{
    display:none!important;
  }
  .footer-links{
    gap:12px!important;
  }
  .footer-links a{
    font-size:10px!important;
  }
  .copyright{
    font-size:9px!important;
  }
}

/* Mobile/tablet keeps the normal responsive card sizing. */
@media (max-width:1199px){
  .station-card-actions.quick-links{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
}


/* ============================================================
   V23 – fix clipped dashboard boxes and unused bottom area
   ============================================================ */
@media (min-width:1200px){

  /* Let the second row grow with its content instead of cutting it off. */
  .radio-dashboard{
    align-items:stretch !important;
    grid-auto-rows:auto !important;
  }

  .presenter-card,
  .now-playing-card,
  .history-card{
    height:auto !important;
    min-height:238px !important;
    overflow:hidden !important;
  }

  /* Keep Recently Played complete; its content determines the row height. */
  .history-card{
    min-height:238px !important;
  }
  .history-list{
    padding-bottom:9px !important;
  }
  .history-row{
    padding:3px 0 !important;
    line-height:1.12 !important;
  }

  /* The player must never be cut off. */
  .now-playing-card{
    display:flex !important;
    flex-direction:column !important;
  }
  .now-playing-main{
    flex:0 0 auto !important;
  }
  .stream-player{
    margin-top:auto !important;
    margin-bottom:9px !important;
  }

  /* Presenter card follows the same full-height row cleanly. */
  .presenter-card{
    display:flex !important;
    flex-direction:column !important;
  }
  .presenter-fallback{
    margin-top:auto !important;
    margin-bottom:9px !important;
  }

  /* Remove the over-compression that caused the cards to be chopped. */
  .panel{
    overflow:hidden !important;
  }

  /* Footer directly follows the dashboard; no artificial empty stage below. */
  .page-wrap{
    padding-bottom:0 !important;
  }
  footer{
    margin-top:8px !important;
    padding-top:9px !important;
    padding-bottom:10px !important;
  }
}

/* At shorter desktop viewport heights, keep everything readable rather than clipping. */
@media (min-width:1200px) and (max-height:850px){
  .presenter-card,
  .now-playing-card,
  .history-card{
    min-height:224px !important;
  }
  .presenter-picture-wrap{
    width:84px !important;
    height:84px !important;
  }
  .now-playing-main img{
    width:76px !important;
    height:76px !important;
  }
}


/* ============================================================
   V24 – single presenter + clean page ending
   ============================================================ */

/* Peter Tonner is the only presenter for now. */
.presenter-card .panel-head{
  min-height:43px!important;
}
.presenter-main{
  align-items:center!important;
}
.presenter-live-dot{
  display:none!important;
}

/* No obsolete presenter fallback/link area. */
.presenter-fallback,
.presenter-link,
#presenterBadge{
  display:none!important;
}

/* Remove the empty area below the footer.
   The body becomes a real viewport column and the footer settles at the bottom. */
html{
  min-height:100%;
  background:#fff7ef;
}
body{
  min-height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
}
main{
  flex:1 0 auto!important;
}
footer{
  flex:0 0 auto!important;
  margin-top:8px!important;
  position:relative!important;
  z-index:4!important;
}

/* On large screens the footer closes the page with a deliberate colour band,
   instead of leaving a beige unused rectangle under it. */
@media (min-width:1200px){
  footer{
    width:100%!important;
    max-width:none!important;
    min-height:58px!important;
    padding:9px max(calc((100vw - min(86vw,1650px))/2),18px)!important;
    background:
      linear-gradient(90deg,
        rgba(31,164,255,.12) 0 9%,
        rgba(255,255,255,.94) 9% 91%,
        rgba(255,142,62,.14) 91% 100%)!important;
    border-top:1px solid rgba(226,219,212,.95)!important;
  }
  footer > *{
    position:relative;
    z-index:2;
  }
}

/* Tablet/mobile presenter remains clean and uses Peter's real image. */
@media (max-width:1199px){
  .presenter-main{
    grid-template-columns:100px 1fr!important;
  }
  .presenter-picture-wrap{
    width:100px!important;
    height:100px!important;
  }
}


/* ============================================================
   V25 – 100vh homepage + sharp equal cards + larger presenter
   ============================================================ */

.homepage-v25{
  min-height:100vh!important;
  min-height:100dvh!important;
}

/* Desktop: the whole homepage is a true viewport layout.
   No page area is allowed below the footer. */
@media (min-width:1200px){
  html{
    height:100%!important;
    min-height:100%!important;
  }
  body.homepage-v25{
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-rows:var(--header-h) minmax(0,1fr) 58px!important;
    background:#fff7ef!important;
  }

  body.homepage-v25 > .site-header{
    grid-row:1!important;
  }

  body.homepage-v25 > main{
    grid-row:2!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:
      var(--hero-h)
      minmax(62px,68px)
      minmax(0,1fr)!important;
    overflow:hidden!important;
  }

  body.homepage-v25 .hero{
    grid-row:1!important;
    min-height:0!important;
  }

  body.homepage-v25 .status-strip{
    grid-row:2!important;
    align-self:start!important;
    min-height:64px!important;
    height:64px!important;
  }

  body.homepage-v25 .page-wrap{
    grid-row:3!important;
    min-height:0!important;
    height:100%!important;
    padding:7px var(--content-pad-r) 5px 0!important;
    display:grid!important;
    grid-template-rows:158px minmax(0,1fr)!important;
    gap:8px!important;
    overflow:hidden!important;
  }

  body.homepage-v25 .radio-dashboard{
    min-height:0!important;
    height:100%!important;
    margin-top:0!important;
    align-items:stretch!important;
  }

  body.homepage-v25 .presenter-card,
  body.homepage-v25 .now-playing-card,
  body.homepage-v25 .history-card{
    height:100%!important;
    min-height:0!important;
  }

  body.homepage-v25 > footer{
    grid-row:3!important;
    align-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    padding:8px max(calc((100vw - min(86vw,1650px))/2),18px)!important;
    background:
      linear-gradient(90deg,
        rgba(31,164,255,.16) 0 8%,
        rgba(255,255,255,.98) 8% 92%,
        rgba(255,142,62,.17) 92% 100%)!important;
    border-top:1px solid rgba(226,219,212,.95)!important;
  }

  /* side art reaches the bottom of the viewport, not beyond it */
  body.homepage-v25:before,
  body.homepage-v25:after{
    bottom:0!important;
    height:auto!important;
    min-height:calc(100vh - var(--header-h) - var(--hero-h))!important;
    background-size:100% 100%!important;
  }
}

/* ----------------------------------------------------------------
   Four equal, crisp cards – all text is HTML, all artwork is vector.
   ---------------------------------------------------------------- */
.top-card-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
  height:158px!important;
  min-height:158px!important;
}

.v25-show-card,
.v25-quick-card{
  position:relative;
  min-width:0;
  height:158px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.90);
  box-shadow:0 7px 16px rgba(8,38,92,.12);
}

.v25-show-card{
  color:#fff;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
.v25-show-card.weekend{background-image:url("assets/v15-show-weekend.webp")!important}
.v25-show-card.rock{background-image:url("assets/v25-rock.svg")!important}
.v25-show-card.disco{background-image:url("assets/v15-show-disco.webp")!important}

.v25-card-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(4,14,42,.02) 8%,rgba(4,12,37,.18) 42%,rgba(3,10,30,.88) 100%);
}

.v25-show-time{
  position:absolute;
  left:13px;
  top:12px;
  z-index:2;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#596479;
  font-size:10px;
  font-weight:950;
  letter-spacing:.15px;
  backdrop-filter:blur(3px);
}

.v25-show-copy{
  position:absolute;
  z-index:2;
  left:14px;
  right:62px;
  bottom:10px;
  color:#fff;
}
.v25-show-copy h2{
  margin:0 0 4px;
  color:#fff;
  font-size:26px;
  line-height:.90;
  letter-spacing:-.7px;
  text-shadow:0 3px 12px rgba(0,0,0,.34);
}
.v25-show-copy p{
  margin:0 0 5px;
  color:rgba(255,255,255,.94);
  font-size:10.5px;
  line-height:1.14;
}
.v25-show-copy a{
  color:#fff;
  text-decoration:none;
  font-size:10.5px;
  font-weight:900;
}

.v25-play{
  position:absolute;
  right:13px;
  bottom:13px;
  z-index:3;
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#ff425e,#ff7546);
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:900;
  box-shadow:0 7px 15px rgba(4,13,40,.30);
}
.v25-play.blue{background:linear-gradient(135deg,#22c1ff,#1683f4)}

.v25-quick-card{
  padding:11px 12px;
  color:#fff;
  background:
    radial-gradient(circle at 91% 12%,rgba(44,188,255,.78) 0 54px,transparent 55px),
    radial-gradient(circle at 13% 110%,rgba(255,138,58,.98) 0 82px,transparent 83px),
    radial-gradient(circle at 97% 94%,rgba(255,80,124,.58) 0 55px,transparent 56px),
    radial-gradient(circle,#fff 0 1.7px,transparent 2px) 0 0/18px 18px,
    linear-gradient(135deg,#0a245f,#103a84 58%,#0b285f);
}
.v25-quick-kicker{
  display:block;
  color:#ffbd77;
  font-size:8px;
  font-weight:950;
  letter-spacing:1.8px;
}
.v25-quick-card h2{
  margin:1px 0 1px;
  color:#fff;
  font-size:20px;
}
.v25-quick-card p{
  margin:0 0 7px;
  color:#dce9ff;
  font-size:9.5px;
}
.v25-quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.v25-quick-grid a{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 8px;
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.15);
  text-decoration:none;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.v25-quick-grid a span{
  width:19px;
  height:19px;
  flex:0 0 19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#24bfff,#ff5b75);
  font-size:9px;
}

/* ----------------------------------------------------------------
   Peter's presenter image: substantially larger, as requested.
   Other Now Playing / Recently Played content is left unchanged.
   ---------------------------------------------------------------- */
@media (min-width:1200px){
  body.homepage-v25 .presenter-main{
    grid-template-columns:158px minmax(0,1fr)!important;
    gap:18px!important;
    padding:2px 16px 10px!important;
    align-items:center!important;
  }
  body.homepage-v25 .presenter-picture-wrap{
    width:158px!important;
    height:158px!important;
    border-width:5px!important;
    box-shadow:0 7px 18px rgba(8,38,92,.17)!important;
  }
  body.homepage-v25 .presenter-main h3{
    font-size:24px!important;
    margin-bottom:4px!important;
  }
  body.homepage-v25 .presenter-main p{
    font-size:14px!important;
    line-height:1.2!important;
  }
  body.homepage-v25 .presenter-main .muted{
    font-size:11px!important;
  }
}

/* ----------------------------------------------------------------
   Correct, crisp vector logo on subpages/footer
   ---------------------------------------------------------------- */
body.homepage-v25 footer img{
  width:205px!important;
  height:auto!important;
  display:block!important;
}

/* Tablet/mobile cards stack normally instead of being forced into desktop sizes. */
@media (max-width:1199px){
  .top-card-grid{
    height:auto!important;
    min-height:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .v25-show-card,.v25-quick-card{
    height:190px!important;
  }
}
@media (max-width:720px){
  .top-card-grid{grid-template-columns:1fr!important}
  .v25-show-card,.v25-quick-card{height:210px!important}
}

/* ================================================================
   V26 fixes
   1) Presenter image slightly smaller and better proportioned
   2) Footer uses the clean official logo sizing
   3) Rock Anthems card uses a realistic guitar image
   ================================================================ */

/* Realistic rock card image */
.v25-show-card.rock{
  background-image:url("assets/v27-show-rock.webp")!important;
  background-size:cover!important;
  background-position:center center!important;
}

/* Presenter image: slightly reduce size and crop more naturally */
@media (min-width:1200px){
  body.homepage-v25 .presenter-main{
    grid-template-columns:136px minmax(0,1fr)!important;
    gap:16px!important;
    align-items:center!important;
  }
  body.homepage-v25 .presenter-picture-wrap{
    width:136px!important;
    height:136px!important;
    border-width:4px!important;
    box-shadow:0 7px 16px rgba(8,38,92,.14)!important;
  }
  body.homepage-v25 .presenter-picture-wrap img{
    object-fit:cover!important;
    object-position:center 18%!important;
    transform:scale(.96)!important;
  }
  body.homepage-v25 .presenter-main h3{
    font-size:22px!important;
  }
}

/* Correct footer brand rendering */
body.homepage-v25 footer img{
  width:220px!important;
  height:auto!important;
  display:block!important;
}
body.homepage-v25 footer a{
  display:inline-block!important;
}


/* ================================================================
   V27
   - restore the colourful side artwork down the full page height
   - keep footer in the page flow with no empty centre area below
   - clean footer/subpage logo asset
   - Rock Anthems card uses a clean real-guitar image without overprinted text
   ================================================================ */

body.homepage-v25{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  background:#fff7ef;
}
body.homepage-v25 main{
  flex:1 0 auto;
  position:relative;
  z-index:1;
}
body.homepage-v25 footer{
  margin-top:auto!important;
  position:relative;
  z-index:2;
}

/* Full-height colourful side pattern, based on the approved master look. */
body.homepage-v25::before,
body.homepage-v25::after{
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  width:clamp(86px,8.8vw,170px);
  z-index:0;
  pointer-events:none;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat;
}
body.homepage-v25::before{
  left:0;
  background-image:
    url("assets/v15-left-lower.webp"),
    radial-gradient(circle at 23% 22%, rgba(255,97,129,.92) 0 60px, transparent 61px),
    radial-gradient(circle at 38% 33%, rgba(255,192,73,.95) 0 56px, transparent 57px),
    radial-gradient(circle, rgba(255,255,255,.85) 0 1.9px, transparent 2.3px),
    linear-gradient(180deg, rgba(255,139,126,.28) 0 38%, rgba(255,196,103,.18) 38% 60%, rgba(255,247,239,0) 60% 100%);
  background-size:
    100% auto,
    100% 320px,
    100% 320px,
    15px 15px,
    100% 100%;
  background-position:
    left bottom,
    left top,
    left 70px,
    left top,
    left top;
}
body.homepage-v25::after{
  right:0;
  background-image:
    url("assets/v15-right-lower.webp"),
    radial-gradient(circle at 76% 18%, rgba(47,148,255,.96) 0 74px, transparent 75px),
    radial-gradient(circle at 94% 8%, rgba(255,187,78,.96) 0 32px, transparent 33px),
    radial-gradient(circle, rgba(255,255,255,.82) 0 1.9px, transparent 2.3px),
    linear-gradient(180deg, rgba(43,183,255,.20) 0 35%, rgba(22,137,245,.15) 35% 60%, rgba(255,247,239,0) 60% 100%);
  background-size:
    100% auto,
    100% 330px,
    100% 220px,
    15px 15px,
    100% 100%;
  background-position:
    right bottom,
    right top,
    right top,
    right top,
    right top;
}

/* Keep content above the side artwork. */
body.homepage-v25 .site-header,
body.homepage-v25 main,
body.homepage-v25 footer{
  position:relative;
  z-index:1;
}

/* Homepage footer: no empty centre strip below, visually consistent with the page background. */
body.homepage-v25 footer{
  background:transparent;
  padding-top:10px!important;
  padding-bottom:12px!important;
}

/* Clean Rock Anthems background with a real guitar and no duplicated lettering. */
body.homepage-v25 .v25-show-card.rock{
  background-image:url("assets/v27-show-rock.webp")!important;
  background-position:center center!important;
  background-size:cover!important;
}

body.homepage-v25 .v25-show-card.weekend{
  background-image:url("assets/v15-show-weekend.webp")!important;
  background-position:center center!important;
  background-size:cover!important;
}
body.homepage-v25 .v25-show-card.disco{
  background-image:url("assets/v15-show-disco.webp")!important;
  background-position:center center!important;
  background-size:cover!important;
}

/* Footer logo sizing with the corrected logo asset. */
body.homepage-v25 footer img{
  width:205px!important;
  height:auto!important;
}

@media (max-width:1199px){
  body.homepage-v25::before,
  body.homepage-v25::after{
    display:none;
  }
}


/* ================================================================
   V28
   - restore the exact V20 side colours / hands-up framing
   - rename Weekend Warm-Up to Feel Good Friday
   - keep the stronger footer/logo treatment and no empty area below footer
   - refine the Rock Anthems crop and add a little more space in Recently Played
   ================================================================ */

body.homepage-v25{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  background:#fff7ef;
}
body.homepage-v25 main{
  flex:1 0 auto;
  position:relative;
  z-index:1;
}
body.homepage-v25 footer{
  margin-top:auto!important;
  position:relative;
  z-index:2;
  width:var(--content-w)!important;
  max-width:none!important;
  padding:12px var(--content-pad-r) 14px 0!important;
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  align-items:center!important;
  gap:16px!important;
  border-top:1px solid #e7dfd8!important;
  background:transparent!important;
}
body.homepage-v25 footer > div:first-child{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
body.homepage-v25 .footer-links{
  justify-content:flex-end!important;
  flex-wrap:wrap;
  gap:16px!important;
}
body.homepage-v25 footer img{
  width:220px!important;
  height:auto!important;
  display:block!important;
}
body.homepage-v25 footer p{
  margin-top:3px!important;
}
body.homepage-v25 .history-list{
  padding:0 14px 16px!important;
}

/* Exact V20-style side framing: use the approved hands-up graphics only. */
body.homepage-v25::before,
body.homepage-v25::after{
  content:"";
  position:absolute!important;
  top:calc(var(--header-h) + var(--hero-h))!important;
  bottom:auto!important;
  z-index:0!important;
  pointer-events:none!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
}
body.homepage-v25::before{
  left:0!important;
  width:8.3732vw!important;
  min-width:78px!important;
  max-width:161px!important;
  height:36.9617vw!important;
  max-height:710px!important;
  background-image:url("assets/v15-left-lower.webp")!important;
  background-position:left top!important;
}
body.homepage-v25::after{
  right:0!important;
  width:9.8086vw!important;
  min-width:92px!important;
  max-width:188px!important;
  height:36.9617vw!important;
  max-height:710px!important;
  background-image:url("assets/v15-right-lower.webp")!important;
  background-position:right top!important;
}
body.homepage-v25 .site-header,
body.homepage-v25 main,
body.homepage-v25 footer{
  position:relative;
  z-index:1;
}

/* Slightly cleaner, more legible real-guitar crop. */
body.homepage-v25 .v25-show-card.rock{
  background-image:url("assets/v27-show-rock.webp")!important;
  background-position:58% center!important;
  background-size:cover!important;
}

body.homepage-v25 .v25-show-card.weekend{
  background-image:url("assets/v15-show-weekend.webp")!important;
  background-position:center center!important;
  background-size:cover!important;
}
body.homepage-v25 .v25-show-card.disco{
  background-image:url("assets/v15-show-disco.webp")!important;
  background-position:center center!important;
  background-size:cover!important;
}

/* Maintain equal, crisp four-card row while keeping the quick-links card aligned. */
body.homepage-v25 .top-card-grid{
  grid-template-columns:1fr 1fr 1fr 1fr!important;
  gap:10px!important;
}
body.homepage-v25 .v25-show-card,
body.homepage-v25 .v25-quick-card{
  height:160px!important;
}

@media (max-width:1199px){
  body.homepage-v25::before,
  body.homepage-v25::after{
    display:none!important;
  }
  body.homepage-v25 footer{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
  body.homepage-v25 footer > div:first-child{
    align-items:center!important;
  }
  body.homepage-v25 .footer-links{
    justify-content:center!important;
  }
}

/* =========================================================
   V32 – unified original GALAXISRADIO logo, based on V31
   Desktop homepage header remains the approved V15 header artwork;
   this controls responsive header and footer logo rendering.
   ========================================================= */
.brand img{
  object-fit:contain;
  object-position:left center;
}
footer img{
  width:165px;
  height:auto;
  max-height:31px;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:1199px){
  .brand img{width:220px;height:auto;max-height:42px}
}
@media(max-width:520px){
  .brand img{width:190px;height:auto;max-height:36px}
  footer img{width:155px;max-height:30px}
}


/* ================================================================
   V35
   - desktop hero: permanently hide old "Weekend Warm-Ups" text and
     show the current Feel Good Friday wording as live HTML
   - footer logo: same clean logo as header, smaller and never clipped
   - footer: more vertical breathing room for logo/navigation
   ================================================================ */
.hero-desktop-copy-v35{display:none}
@media (min-width:1200px){
  body.homepage-v25 .hero-desktop-copy-v35{
    display:block;
    position:absolute;
    left:7.25%;
    top:49.0%;
    width:31.4%;
    min-height:19%;
    z-index:4;
    padding:3px 6px 4px 0;
    color:#17345f;
    font-family:Arial,"Helvetica Neue",sans-serif;
    font-size:clamp(10px,.74vw,15px);
    line-height:1.34;
    background:linear-gradient(90deg,rgba(255,250,244,.995) 0%,rgba(255,255,255,.995) 58%,rgba(255,242,226,.95) 100%);
    box-shadow:0 0 8px 8px rgba(255,249,241,.72);
  }
  body.homepage-v25 .hero-desktop-copy-v35 b{font-weight:800;color:#122f59}

  body.homepage-v25 > footer{
    height:auto!important;
    min-height:86px!important;
    padding-top:14px!important;
    padding-bottom:18px!important;
    overflow:visible!important;
    align-items:center!important;
  }
  body.homepage-v25 > footer > div:first-child{
    min-height:52px!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  body.homepage-v25 > footer img{
    width:168px!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:left center!important;
    display:block!important;
  }
  body.homepage-v25 > footer p{
    margin:4px 0 0!important;
    line-height:1.2!important;
  }
  body.homepage-v25 > footer .footer-links,
  body.homepage-v25 > footer .copyright{
    align-self:center!important;
    padding-bottom:3px!important;
  }
}
@media (max-width:1199px){
  body.homepage-v25 > footer{
    height:auto!important;
    min-height:90px!important;
    padding-top:16px!important;
    padding-bottom:18px!important;
    overflow:visible!important;
  }
  body.homepage-v25 > footer img{
    width:160px!important;
    height:auto!important;
    max-height:none!important;
  }
}

/* =========================================================
   V37 – redesigned Quick Links card
   ========================================================= */
body.homepage-v25 .v37-quick-card{
  position:relative!important;
  overflow:hidden!important;
  padding:12px 13px 11px!important;
  color:#fff!important;
  background:
    linear-gradient(90deg,rgba(4,18,63,.96) 0%,rgba(7,38,100,.91) 50%,rgba(41,19,83,.86) 100%),
    url("assets/v37-quick-links.svg") center/cover no-repeat!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 8px 20px rgba(7,34,91,.18)!important;
}
body.homepage-v25 .v37-quick-card::after{
  content:"";
  position:absolute;
  right:-26px;
  top:-28px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(43,210,255,.34),rgba(43,210,255,0) 68%);
  pointer-events:none;
}
body.homepage-v25 .v37-quick-copy{
  position:relative;
  z-index:2;
  padding-right:76px;
}
body.homepage-v25 .v37-quick-card .v25-quick-kicker{
  color:#ffc066!important;
  letter-spacing:1.65px!important;
  font-size:7.5px!important;
}
body.homepage-v25 .v37-quick-card h2{
  margin:1px 0 1px!important;
  color:#fff!important;
  font-size:20px!important;
  line-height:1!important;
  text-shadow:0 2px 8px rgba(2,9,35,.28);
}
body.homepage-v25 .v37-quick-card p{
  margin:3px 0 8px!important;
  color:#dbe9ff!important;
  font-size:9.2px!important;
}
body.homepage-v25 .v37-quick-card .v25-quick-grid{
  position:relative;
  z-index:3;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
}
body.homepage-v25 .v37-quick-card .v25-quick-grid a{
  height:35px!important;
  padding:0 9px!important;
  border-radius:10px!important;
  color:#fff!important;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.07))!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)!important;
  backdrop-filter:blur(2px);
  transition:transform .16s ease,background .16s ease,border-color .16s ease!important;
}
body.homepage-v25 .v37-quick-card .v25-quick-grid a:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(135deg,rgba(43,194,255,.25),rgba(255,79,127,.18))!important;
  border-color:rgba(255,255,255,.55)!important;
}
body.homepage-v25 .v37-quick-card .v25-quick-grid a strong{
  font-size:10px!important;
  font-weight:900!important;
}
body.homepage-v25 .v37-quick-card .v37-icon{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  color:#fff!important;
  background:linear-gradient(135deg,#24c7ff 0%,#4a8aff 45%,#ff5f86 100%)!important;
  box-shadow:0 2px 7px rgba(3,17,53,.28)!important;
  font-size:9px!important;
}

/* ================================================================
   V38 – lower dashboard: never crop content
   - show all 10 Recently Played rows
   - keep Presenter / Now Playing / Recently Played equal-height
   - allow the page to grow instead of hiding the bottom of cards
   ================================================================ */
@media (min-width:1200px){
  body.homepage-v25 .radio-dashboard{
    align-items:stretch!important;
  }
  body.homepage-v25 .presenter-card,
  body.homepage-v25 .now-playing-card,
  body.homepage-v25 .history-card{
    height:auto!important;
    min-height:242px!important;
    overflow:visible!important;
  }
  body.homepage-v25 .history-card{
    overflow:hidden!important;
  }
  body.homepage-v25 .history-list{
    padding:0 14px 12px!important;
  }
  body.homepage-v25 .history-row{
    padding:3px 0!important;
    line-height:1.18!important;
  }
  body.homepage-v25 .now-playing-card{
    display:flex!important;
    flex-direction:column!important;
  }
  body.homepage-v25 .now-playing-card .stream-player{
    margin-top:auto!important;
  }
  body.homepage-v25 .presenter-card{
    display:flex!important;
    flex-direction:column!important;
  }
  body.homepage-v25 > footer{
    margin-top:10px!important;
  }
}


/* ================================================================
   V39 – cleaner homepage lower section
   - remove duplicate visible Now Playing panel on homepage
   - keep only Current Presenter and Recently Played
   - remove desktop viewport clipping so cards and footer are fully visible
   ================================================================ */
body.homepage-v25 .live-support[hidden]{display:none!important;}

@media (min-width:1200px){
  html{height:auto!important;min-height:100%!important;}
  body.homepage-v25{
    display:block!important;
    height:auto!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }
  body.homepage-v25 > main{
    display:block!important;
    overflow:visible!important;
    min-height:0!important;
  }
  body.homepage-v25 .status-strip{
    height:auto!important;
    min-height:64px!important;
  }
  body.homepage-v25 .page-wrap{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    padding:7px var(--content-pad-r) 0 0!important;
  }
  body.homepage-v25 .top-card-grid{
    margin-bottom:8px!important;
  }
  body.homepage-v25 .radio-dashboard{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    height:auto!important;
    min-height:0!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  body.homepage-v25 .presenter-card,
  body.homepage-v25 .history-card{
    height:auto!important;
    min-height:250px!important;
    overflow:hidden!important;
  }
  body.homepage-v25 .history-card .panel-head{
    padding-bottom:6px!important;
  }
  body.homepage-v25 .history-list{
    padding:0 14px 12px!important;
  }
  body.homepage-v25 .history-row{
    padding:4px 0!important;
    line-height:1.2!important;
  }
  body.homepage-v25 > footer{
    position:relative!important;
    width:var(--content-w)!important;
    max-width:none!important;
    height:auto!important;
    min-height:68px!important;
    margin:10px auto 0!important;
    padding:12px var(--content-pad-r) 14px 0!important;
    align-items:center!important;
  }
  body.homepage-v25:before,
  body.homepage-v25:after{
    bottom:0!important;
    min-height:unset!important;
    height:36.9617vw!important;
    max-height:710px!important;
  }
}

@media (max-width:1199px){
  body.homepage-v25 .radio-dashboard{
    grid-template-columns:1fr!important;
  }
}

/* ================================================================
   V48 – 70s Flashback replaces Quick Links on the homepage.
   ================================================================ */
body.homepage-v25 .v25-show-card.flashback{
  background-image:url("assets/v48-show-70s-flashback.svg")!important;
  background-position:center center!important;
  background-size:cover!important;
}
body.homepage-v25 .v25-show-card.flashback .v25-card-shade{
  background:linear-gradient(90deg,rgba(20,7,43,.88) 0%,rgba(20,7,43,.60) 48%,rgba(20,7,43,.12) 100%)!important;
}


/* ================================================================
   V51 – requested homepage-only additions.
   Existing cards/layout remain unchanged.
   ================================================================ */

/* One additional Newsbox card below the existing four-card row. */
body.homepage-v25 .newsbox-home-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
  margin:0 0 8px!important;
}
body.homepage-v25 .newsbox-home-row .v25-show-card.newsbox{
  grid-column:1 / 2!important;
  height:158px!important;
  min-height:158px!important;
  background-image:url("assets/v51-newsbox.svg")!important;
  background-size:cover!important;
  background-position:center!important;
}
body.homepage-v25 .newsbox-home-row .v25-show-card.newsbox .v25-card-shade{
  background:linear-gradient(90deg,rgba(3,20,61,.88) 0%,rgba(3,20,61,.56) 52%,rgba(3,20,61,.08) 100%)!important;
}
body.homepage-v25 .newsbox-home-row .v25-show-card.newsbox .v25-show-copy p strong{
  color:#ffd45b!important;
}

/* Make the existing Now Playing status unmistakable without moving it. */
body.homepage-v25 .status-track{
  z-index:3!important;
  background:
    linear-gradient(135deg,#eef9ff 0%,#fff8ef 46%,#fff0f4 100%)!important;
  box-shadow:
    inset 0 0 0 2px #ff4d64,
    0 8px 22px rgba(255,77,100,.18)!important;
}
body.homepage-v25 .status-track .round-icon{
  background:linear-gradient(135deg,#1598f4 0%,#116bd8 58%,#ff4d64 100%)!important;
  box-shadow:0 0 0 5px rgba(21,152,244,.10),0 5px 14px rgba(17,107,216,.24)!important;
}
body.homepage-v25 .status-track small{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  margin-bottom:4px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  color:#fff!important;
  background:#ff4d64!important;
  font-size:clamp(10px,.68vw,13px)!important;
  letter-spacing:.7px!important;
  text-transform:uppercase!important;
}
body.homepage-v25 .status-track #quickNowPlaying{
  color:#082e6d!important;
  font-size:clamp(17px,1.08vw,21px)!important;
  font-weight:950!important;
}
body.homepage-v25 .status-track #quickNowMeta{
  color:#1675c9!important;
  font-weight:900!important;
}
@keyframes gr-nowplaying-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@media (prefers-reduced-motion:no-preference){
  body.homepage-v25 .status-track .round-icon{
    animation:gr-nowplaying-pulse 2.2s ease-in-out infinite!important;
  }
}