:root{
  --navy:#1B1E2B; --navy-deep:#13151F; --navy-2:#232736;
  --cream:#F5F0E6; --cream-2:#EDE5D6; --copper:#B8743F; --copper-lt:#E0A46F;
  --ink:#1B1E2B; --muted:#5E6070; --line:rgba(27,30,43,.14);
  --serif:"DM Serif Display", Georgia, "Times New Roman", serif;
  --sans:Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(72px + env(safe-area-inset-top,0px)); background:var(--navy)}
body{margin:0; font-family:var(--sans); font-size:1.0625rem; line-height:1.6; color:var(--ink); background:var(--cream)}
img{max-width:100%; height:auto; display:block}
h1,h2{font-family:var(--serif); font-weight:400; line-height:1.08; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.8rem,7vw,5.4rem)}
h2{font-size:clamp(2rem,4.2vw,3rem)}
p{margin:0 0 1em; max-width:62ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--copper-lt); outline-offset:3px; border-radius:4px}

/* nav */
.nav{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:1.5rem;
  padding:.7rem clamp(1rem,4vw,2.5rem); background:rgba(19,21,31,.94); backdrop-filter:blur(8px); color:var(--cream)}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; font-family:var(--serif); font-size:1.3rem; white-space:nowrap}
.brand img{width:26px; height:auto}
.brand em{font-style:normal; font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--copper-lt); margin-left:.2rem}
.nav nav{display:flex; gap:1.4rem; margin-left:auto}
.nav nav a{text-decoration:none; font-size:.95rem; font-weight:500; opacity:.85}
.nav nav a:hover{opacity:1; color:var(--copper-lt)}
.onair{display:flex; align-items:center; gap:.5rem; text-decoration:none; font-size:.8rem; font-weight:700;
  padding:.35rem .75rem; border:1px solid rgba(245,240,230,.25); border-radius:3px; letter-spacing:.06em}
.lamp{width:9px; height:9px; border-radius:50%; background:#4a4d5a}
.onair.is-live{border-color:#e0443a; color:#fff; background:#b3261e}
.onair.is-live .lamp{background:#ff6a5f; box-shadow:0 0 10px #ff6a5f; animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* hero */
.hero{background:radial-gradient(ellipse at 75% 30%, #2a2f44 0%, var(--navy) 55%, var(--navy-deep) 100%); color:var(--cream); overflow:hidden}
.hero-inner{max-width:1180px; margin:0 auto; padding:clamp(3rem,8vw,6rem) clamp(1.25rem,4vw,2.5rem) 2rem;
  display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center}
.lede{font-size:1.2rem; color:rgba(245,240,230,.82)}
.hero-logo{width:100%; max-width:400px; justify-self:center}
.wave{display:flex; align-items:center; justify-content:center; gap:5px; height:90px; padding:0 1rem 1.5rem; overflow:hidden}
.wave span{flex:0 0 4px; border-radius:2px; background:var(--copper); transform-origin:center; opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .wave span{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes rise{from{transform:scaleY(.05)}}

/* buttons */
.actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.4rem; border-radius:999px; font-weight:600; font-size:.98rem; text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:inherit}
.btn-copper{background:var(--copper); color:#fff}
.btn-copper:hover{background:#a2632f}
.btn-ghost{background:transparent; border-color:rgba(245,240,230,.4); color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream)}
.btn-navy{background:var(--navy); color:var(--cream)}
.btn-navy:hover{background:#2c3146}
.btn-line{border-color:currentColor}
.btn[hidden]{display:none}

/* bands */
.band{padding:clamp(3.5rem,8vw,6rem) 0}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}
.cream{background:var(--cream)}
.cream-2{background:var(--cream-2)}
.navy{background:var(--navy); color:var(--cream)}
.navy-2{background:var(--navy-2); color:var(--cream)}
.copper{background:var(--copper); color:#fff}
.split{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.topics{color:var(--muted); font-size:1rem}
.sub{color:var(--muted)}

/* player */
.player{position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--navy); box-shadow:0 0 0 8px var(--navy-2), 0 24px 50px -20px rgba(19,21,31,.6)}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.empty{position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:.4rem; padding:clamp(1.25rem,4vw,2.25rem); color:var(--cream);
  background:linear-gradient(90deg, rgba(19,21,31,.97) 45%, rgba(19,21,31,.05)), url(assets/mark-light.svg) right 9% center/auto 72% no-repeat, var(--navy)}
.empty strong,.empty p{max-width:62%}
.empty strong{font-family:var(--serif); font-weight:400; font-size:1.6rem; line-height:1.15}
.empty p{margin:0 0 .6rem; color:rgba(245,240,230,.8); font-size:.98rem}

/* platforms */
.platforms{list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem}
.platforms a,.platforms span.off{display:flex; align-items:center; gap:.9rem; padding:1.1rem 1.2rem; border-radius:10px; text-decoration:none; background:var(--cream); border:1px solid var(--line); height:100%}
.platforms a:hover{border-color:var(--copper)}
.platforms svg{flex:0 0 32px; width:32px; height:32px}
.platforms b{display:block; font-weight:600}
.platforms small{color:var(--muted)}
.platforms .off{opacity:.62}

/* live */
.live-card{background:var(--navy-deep); border:1px solid rgba(245,240,230,.12); border-radius:12px; padding:clamp(1.25rem,3vw,2rem)}
.live-card .when{color:var(--copper-lt); font-weight:600; margin-bottom:.8rem}
.guest-row{display:flex; gap:1rem; align-items:center; margin-bottom:1rem}
.guest-row img,.guest-row .ph{width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 72px; background:var(--navy-2); display:grid; place-items:center; font-family:var(--serif); font-size:1.6rem; color:var(--copper-lt)}
.guest-row h3{font-family:var(--serif); font-weight:400; font-size:1.6rem; margin:0; line-height:1.1}
.guest-row p{margin:.15rem 0 0; color:rgba(245,240,230,.72)}
.live-card .topic{font-size:1.1rem}
.live-card .btn-ghost{font-size:.9rem; padding:.65rem 1.1rem}
.live-embed{position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000; margin-bottom:1rem}
.live-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.muted-lt{color:rgba(245,240,230,.7)}

/* host */
.host{display:grid; grid-template-columns:260px 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.host-photo{margin:0}
.host-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px; box-shadow:0 0 0 8px var(--cream-2)}
.host-photo figcaption{margin-top:.9rem; font-size:.85rem; color:var(--muted)}
.host-mark{aspect-ratio:4/5; border-radius:10px; background:var(--navy); color:var(--copper-lt); display:grid; place-items:center; font-family:var(--serif); font-size:5rem; background-size:cover; background-position:center}

/* verticals */
.verticals{list-style:none; margin:0; padding:0; columns:2; column-gap:2rem}
.verticals li{break-inside:avoid; padding:.7rem 0; border-bottom:1px solid rgba(245,240,230,.14); font-size:1.05rem}

/* guest */
.guest{text-align:center}
.guest p{margin-left:auto; margin-right:auto; color:rgba(255,255,255,.92)}
.guest .btn{margin-top:1rem}

/* footer */
.foot{background:var(--navy-deep); color:var(--cream); padding:3rem 0 3.5rem}
.foot-inner{display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center}
.foot-inner img{width:110px}
.foot-links{display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center}
.foot-links a{text-decoration:none; opacity:.8}
.foot-links a:hover{opacity:1; color:var(--copper-lt)}
.small{font-size:.85rem; opacity:.65; margin:0; text-align:right}

@media (max-width:860px){
  .nav nav{display:none}
  .onair{margin-left:auto}
  .hero-inner,.split,.host{grid-template-columns:1fr}
  .hero-logo{max-width:220px; order:-1}
  .host-photo{margin:0}
.host-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px; box-shadow:0 0 0 8px var(--cream-2)}
.host-photo figcaption{margin-top:.9rem; font-size:.85rem; color:var(--muted)}
.host-photo{max-width:320px}
  .foot-inner{grid-template-columns:1fr; text-align:center; justify-items:center}
  .small{text-align:center}
}
@media (max-width:480px){
  .brand em{display:none}
  .verticals{columns:1}
}