:root{
  --gold:#d9ad54;
  --gold-bright:#f2cf7c;
  --gold-muted:#8f6d34;
  --ink:#080503;
  --panel:rgba(8,6,4,.93);
  --panel-soft:rgba(10,7,5,.86);
  --line:rgba(224,180,88,.42);
  --text:#f5ead5;
  --muted:#c3ad87;
  --red:#d24b2e;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{
  min-width:320px;
  min-height:100vh;
  color:var(--text);
  background:#050301;
  font-family:Georgia,"Times New Roman",serif;
}
button,input,a{font:inherit}
a{color:inherit;text-decoration:none}

.topbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  min-height:76px;
  padding:12px clamp(18px,4vw,64px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:linear-gradient(180deg,rgba(5,3,2,.96),rgba(5,3,2,.82),rgba(5,3,2,.28));
  border-bottom:1px solid rgba(218,173,84,.16);
  backdrop-filter:blur(7px);
}
.brand{display:flex;align-items:center;gap:13px}
.brand-mark{
  width:50px;height:50px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--gold-bright);
  font:700 12px/1 Arial,sans-serif;
  letter-spacing:1.5px;
  box-shadow:inset 0 0 20px rgba(217,173,84,.08),0 0 24px rgba(0,0,0,.45);
}
.brand-copy{display:flex;flex-direction:column}
.brand-copy strong{color:var(--gold-bright);font-size:19px;letter-spacing:1px}
.brand-copy small{margin-top:3px;color:var(--muted);font:11px/1.2 Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}
.main-nav{display:flex;align-items:center;gap:clamp(14px,2.5vw,34px);font:12px/1 Arial,sans-serif;letter-spacing:1.7px;text-transform:uppercase}
.main-nav a{position:relative;padding:10px 0;color:#d4c3a6;transition:.25s ease}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--gold);transition:.25s ease}
.main-nav a:hover,.main-nav a.active{color:var(--gold-bright)}
.main-nav a:hover::after,.main-nav a.active::after{right:0}

.radio-page{min-height:100vh}
.radio-stage{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:#080503;
}
.radio-image{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.61) saturate(.87) contrast(1.07);
}
.stage-shade{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 49%,rgba(0,0,0,.04) 0 25%,rgba(0,0,0,.24) 58%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(0,0,0,.36),transparent 21%,transparent 78%,rgba(0,0,0,.82));
}

.central-console{
  position:absolute;
  z-index:5;
  top:180px;
  bottom:44px;
  left:50%;
  width:min(1080px,72vw);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  pointer-events:none;
}

.studio-sign{
  width:100%;
  margin-top:0;
  text-align:center;
  pointer-events:none;
}
.studio-sign p{
  margin:0 0 7px;
  color:var(--gold-muted);
  font:13px/1 Arial,sans-serif;
  letter-spacing:7px;
  text-transform:uppercase;
}
.studio-sign h1{
  margin:0;
  color:var(--gold-bright);
  font-size:clamp(36px,4vw,66px);
  font-weight:500;
  letter-spacing:1.6px;
  line-height:1.03;
  text-shadow:0 2px 8px rgba(0,0,0,.95),0 0 24px rgba(217,173,84,.22);
}

.on-air-sign{
  margin-top:130px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border:1px solid rgba(210,75,46,.58);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(35,9,5,.93),rgba(12,4,3,.94));
  color:#efb29e;
  font:11px/1 Arial,sans-serif;
  letter-spacing:2.1px;
  box-shadow:0 8px 26px rgba(0,0,0,.58),inset 0 0 15px rgba(210,75,46,.08);
  pointer-events:auto;
}
.on-air-dot{width:8px;height:8px;border-radius:50%;background:#7c3728;box-shadow:0 0 0 rgba(210,75,46,0)}
body.is-playing .on-air-dot{background:#ef6848;box-shadow:0 0 15px rgba(239,104,72,.88);animation:pulse 1.5s infinite}
body.is-playing .on-air-sign{color:#ffd2c6;border-color:rgba(239,104,72,.8)}
@keyframes pulse{50%{opacity:.52}}

.radio-information-panel{
  width:100%;
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(217,173,84,.34);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(10,8,6,.94),rgba(4,3,2,.94));
  box-shadow:0 18px 46px rgba(0,0,0,.54),inset 0 0 40px rgba(217,173,84,.04);
  overflow:hidden;
  pointer-events:auto;
}
.info-module{
  position:relative;
  min-height:126px;
  padding:20px 24px 18px;
}
.info-module+ .info-module{border-left:1px solid rgba(217,173,84,.22)}
.module-heading{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.module-heading h2{
  color:#ead6b0;
  font:600 15px/1 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.module-light{
  width:8px;height:8px;
  border-radius:50%;
  flex:0 0 auto;
}
.light-studio{background:#d69a33;box-shadow:0 0 12px rgba(214,154,51,.72)}
.light-broadcast{background:#79aa74;box-shadow:0 0 12px rgba(121,170,116,.72)}
.light-about{background:#619ebc;box-shadow:0 0 12px rgba(97,158,188,.72)}
.module-kicker{
  margin-bottom:7px;
  color:var(--gold-muted)!important;
  font:10px/1.2 Arial,sans-serif!important;
  letter-spacing:2px;
  text-transform:uppercase;
}
.info-module p:last-child{color:#c8baa1;font:12px/1.48 Arial,sans-serif}

.player-console{
  width:min(760px,78%);
  margin-top:18px;
  padding:17px 28px 16px;
  border:1px solid rgba(217,173,84,.46);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(18,12,8,.97),rgba(5,3,2,.97));
  box-shadow:0 25px 62px rgba(0,0,0,.62),inset 0 0 42px rgba(217,173,84,.055);
  text-align:center;
  pointer-events:auto;
}
.console-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-bottom:13px}
.console-heading>span{height:1px;background:linear-gradient(90deg,transparent,rgba(217,173,84,.5))}
.console-heading>span:last-child{background:linear-gradient(90deg,rgba(217,173,84,.5),transparent)}
.console-eyebrow{font:9px/1 Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--gold-muted)}
.player-console h2{margin:5px 0 0;font-size:21px;font-weight:500;color:#f5e5c6}
.rds-display{
  min-height:48px;
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:12px;
  padding:9px 16px;
  overflow:hidden;
  border:1px solid rgba(217,173,84,.32);
  border-radius:7px;
  background:#100b07;
  box-shadow:inset 0 0 18px rgba(0,0,0,.72);
}
#radio-rds-text{color:var(--gold-bright);font:15px/1.35 Arial,sans-serif;letter-spacing:1px;text-shadow:0 0 10px rgba(217,173,84,.28)}
.rds-bars{
  height:22px;
  background:
    linear-gradient(to top,var(--gold) 0 40%,transparent 40%) 0 100%/4px 100% no-repeat,
    linear-gradient(to top,var(--gold) 0 70%,transparent 70%) 8px 100%/4px 100% no-repeat,
    linear-gradient(to top,var(--gold) 0 95%,transparent 95%) 16px 100%/4px 100% no-repeat,
    linear-gradient(to top,var(--gold) 0 62%,transparent 62%) 24px 100%/4px 100% no-repeat,
    linear-gradient(to top,var(--gold) 0 82%,transparent 82%) 32px 100%/4px 100% no-repeat;
  opacity:.75;
}
.rds-bars.mirror{transform:scaleX(-1)}
.player-controls-row{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;margin-top:15px}
.volume-dial{
  width:58px;height:58px;
  margin:auto;
  display:grid;place-items:center;
  border:1px solid rgba(217,173,84,.4);
  border-radius:50%;
  background:radial-gradient(circle at 45% 38%,#2f2116 0 22%,#0c0805 60%,#020101 100%);
  box-shadow:inset 0 0 8px rgba(242,207,124,.14),0 0 0 5px rgba(217,173,84,.05);
}
.volume-dial span{width:3px;height:20px;border-radius:4px;background:var(--gold-bright);transform:translateY(-8px) rotate(32deg);transform-origin:50% 18px}
.player-main-controls{min-width:0}
.player-actions{display:flex;justify-content:center;gap:12px}
.player-button{
  min-width:128px;
  padding:11px 18px;
  border:1px solid rgba(217,173,84,.38);
  border-radius:5px;
  color:#d8c4a0;
  background:linear-gradient(180deg,#21150c,#0c0805);
  cursor:pointer;
  font:700 11px/1 Arial,sans-serif;
  letter-spacing:1.8px;
  transition:.2s ease;
}
.player-button span{margin-right:7px;color:var(--gold)}
.player-button:hover{transform:translateY(-1px);border-color:var(--gold);color:#fff1d4;box-shadow:0 7px 18px rgba(0,0,0,.4)}
.player-button.primary{color:#1a1007;background:linear-gradient(180deg,#efc56e,#a8762d);border-color:#f2cf7c}
.player-button.primary span{color:#241407}
.volume-control{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;margin-top:13px;color:var(--muted);font:9px/1 Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
#volume{width:100%;accent-color:var(--gold)}
.listeners{margin-top:10px;color:#a99676;font:10px/1 Arial,sans-serif;letter-spacing:1.2px}
.listeners strong{color:var(--gold-bright)}

.footer{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:40;
  min-height:38px;
  display:flex;justify-content:center;align-items:center;gap:12px;
  padding:8px 20px;
  color:rgba(238,221,193,.54);
  background:linear-gradient(180deg,transparent,rgba(4,2,1,.94));
  font:10px/1 Arial,sans-serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.footer-separator{color:var(--gold-muted)}

@media (max-width:1180px){
  .central-console{width:min(980px,82vw)}
  .on-air-sign{margin-top:118px}
  .player-console{width:82%}
}

@media (max-width:920px){
  .main-nav{display:none}
  .central-console{width:88vw;top:86px}
  .studio-sign h1{font-size:clamp(34px,6vw,54px)}
  .on-air-sign{margin-top:110px}
  .radio-information-panel{grid-template-columns:1fr}
  .info-module{min-height:auto;padding:15px 20px}
  .info-module+ .info-module{border-left:0;border-top:1px solid rgba(217,173,84,.2)}
  .player-console{width:100%}
}

@media (max-width:760px){
  body{overflow:auto}
  .topbar{position:absolute;min-height:68px;padding:10px 16px}
  .brand-mark{width:42px;height:42px}
  .brand-copy strong{font-size:17px}
  .radio-stage{min-height:1260px;background:#080503}
  .radio-image{height:620px;object-position:center top}
  .stage-shade{height:620px}
  .central-console{position:relative;top:0;bottom:auto;left:auto;width:auto;transform:none;padding:105px 15px 80px}
  .studio-sign h1{font-size:30px}
  .studio-sign p{font-size:11px;letter-spacing:4px}
  .on-air-sign{margin-top:130px}
  .radio-information-panel{margin-top:22px}
  .player-console{padding:18px 16px}
  .player-controls-row{grid-template-columns:1fr}
  .volume-dial{display:none}
  .player-actions{flex-wrap:wrap}
  .player-button{min-width:118px}
  .rds-display{grid-template-columns:28px 1fr 28px;padding-inline:10px}
  .footer{position:absolute}
}

@media (max-width:440px){
  .brand-copy small{letter-spacing:1.2px}
  .studio-sign h1{font-size:25px}
  .player-button{width:100%}
  .player-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .rds-bars{display:none}
  .rds-display{grid-template-columns:1fr}
  #radio-rds-text{font-size:13px}
}