/* ===================== TOKENS ===================== */
:root{
  --bg-void:#0A1418;
  --bg-deep:#0F1F26;
  --bg-deep-2:#132933;
  --lamp:#D9944A;
  --lamp-soft:#E8B27C;
  --static-blue:#5C7C89;
  --paper:#EDE6D8;
  --paper-dim:#9CA8AC;
  --paper-faint:#6E7C81;
  --signal-violet:#8B7EEA;
  --signal-gold:#E3C88A;
  --line:rgba(237,230,216,0.12);

  --font-display:'Fraunces', serif;
  --font-script:'Mrs Saint Delafield', cursive;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'Space Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--bg-void);
  color:var(--paper);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2{
  font-family:var(--font-display);
  font-weight:400;
  margin:0;
  color:var(--paper);
}

a{color:inherit; text-decoration:none;}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--lamp); color:var(--bg-void);
  padding:.6em 1em; z-index:1000;
}
.skip-link:focus{left:1em; top:1em;}

/* grain overlay */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:500;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible{
  outline:2px solid var(--lamp-soft);
  outline-offset:3px;
}

/* ===================== NAV ===================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.2rem, 4vw, 3rem);
  background:linear-gradient(to bottom, rgba(10,20,24,0.85), transparent);
}
.nav-wordmark{
  font-family:var(--font-script);
  font-size:1.6rem;
  color:var(--paper);
  letter-spacing:.02em;
}
.site-nav nav{display:flex; gap:clamp(1rem, 3vw, 2.2rem);}
.site-nav nav a{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
  transition:color .25s ease;
}
.site-nav nav a:hover{color:var(--lamp-soft);}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 30%;
  transform:scale(1.06);
  filter:saturate(0.9);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg-void) 0%, rgba(10,20,24,0.55) 42%, rgba(10,20,24,0.35) 65%, rgba(10,20,24,0.75) 100%);
}
.hero-content{
  position:relative; z-index:2;
  text-align:center;
  max-width:44rem;
  padding:0 1.5rem;
  margin-top:3rem;
}
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lamp-soft);
  margin:0 0 1rem;
}
.hero-wordmark{
  font-family:var(--font-script);
  font-size:clamp(3.6rem, 11vw, 6.5rem);
  color:var(--paper);
  line-height:1;
  margin-bottom:.6rem;
  text-shadow:0 2px 30px rgba(0,0,0,0.4);
}
.hero-tagline{
  font-size:clamp(1rem, 2vw, 1.15rem);
  color:var(--paper-dim);
  font-weight:300;
  max-width:30rem;
  margin:0 auto 2.6rem;
}

.hero-cta{
  display:inline-block;
  margin-top:2.4rem;
  padding:.85em 2.2em;
  border:1px solid var(--lamp-soft);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--lamp-soft);
  transition:background .3s ease, color .3s ease;
}
.hero-cta:hover{
  background:var(--lamp-soft);
  color:var(--bg-void);
}

/* ===================== TUNING DIAL (signature element) ===================== */
.dial{max-width:26rem; margin:0 auto;}
.dial-track{
  position:relative;
  height:2px;
  background:var(--line);
  margin:0 .5rem;
}
.dial-tick{
  position:absolute; top:-6px;
  width:1px; height:14px;
  background:var(--paper-faint);
  transform:translateX(-50%);
}
.dial-tick.major{
  height:20px; top:-9px; background:var(--paper-dim);
  display:flex; justify-content:center;
  font-family:var(--font-mono);
  font-size:.58rem;
  color:var(--paper-faint);
}
.dial-tick.major span,
.dial-tick.major{
  padding-top:26px;
}
.dial-needle{
  position:absolute; top:-14px; left:70%;
  width:2px; height:30px;
  background:var(--lamp);
  box-shadow:0 0 12px 1px var(--lamp);
  transform:translateX(-50%);
  animation:tuneIn 2.4s cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes tuneIn{
  0%{left:2%; opacity:.3;}
  35%{left:88%;}
  60%{left:55%;}
  80%{left:76%;}
  100%{left:70%; opacity:1;}
}
.dial-readout{
  text-align:center;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--paper-dim);
  letter-spacing:.05em;
  margin-top:1.1rem;
}
.dial-readout span{
  color:var(--lamp-soft);
  font-weight:700;
}

.scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  width:22px; height:36px; border:1px solid var(--paper-faint); border-radius:12px;
  z-index:2;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:3px; height:8px; border-radius:2px;
  background:var(--lamp-soft);
  animation:scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{opacity:1; top:7px;}
  70%{opacity:0; top:18px;}
  100%{opacity:0; top:7px;}
}

/* ===================== ABOUT ===================== */
.about{
  background:var(--bg-deep);
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(2rem, 5vw, 5rem);
  align-items:center;
  padding:clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5rem);
}
.about-image{
  width:100%; aspect-ratio:4/5;
  background-size:cover; background-position:center 78%;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--static-blue);
  margin:0 0 .8rem;
}
.section-eyebrow.gold{color:var(--signal-gold);}
.about-copy h2{
  font-size:clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight:400;
  margin-bottom:1.3rem;
  max-width:20ch;
}
.about-copy p{
  color:var(--paper-dim);
  font-weight:300;
  max-width:42ch;
  margin:0 0 1.1rem;
}
.pull-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.25rem;
  color:var(--lamp-soft);
  border-left:2px solid var(--lamp);
  padding-left:1.2rem;
  margin:1.8rem 0;
}
.about-stats{
  display:flex; gap:clamp(1.5rem, 4vw, 3rem);
  margin-top:2rem;
  flex-wrap:wrap;
}
.about-stats > div{display:flex; flex-direction:column;}
.stat-num{
  font-family:var(--font-mono); font-weight:700;
  font-size:1.3rem; color:var(--paper);
}
.stat-label{
  font-family:var(--font-mono); font-size:.65rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--paper-faint);
  margin-top:.2rem;
}

/* ===================== DIAL DIVIDER ===================== */
.dial-divider{
  background:var(--bg-deep);
  padding:0 clamp(1.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
}
.dial-divider-line{
  height:1px;
  background:linear-gradient(to right, transparent, var(--static-blue), var(--lamp), var(--static-blue), transparent);
  opacity:.5;
}

/* ===================== TRANSMISSIONS ===================== */
.transmissions{
  background:var(--bg-deep);
  padding:0 clamp(1.5rem, 6vw, 5rem) clamp(5rem, 8vw, 7rem);
}
.transmissions h2{font-size:clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom:.6rem;}
.section-intro{color:var(--paper-dim); font-weight:300; margin:0 0 3rem;}

.tuner{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.preset{
  display:grid;
  grid-template-columns:5rem 1fr auto;
  align-items:center;
  gap:1rem;
  padding:1.1rem .5rem;
  border-bottom:1px solid var(--line);
  transition:background .3s ease, padding-left .3s ease;
  position:relative;
}
.preset:hover, .preset:focus-within{
  background:rgba(217,148,74,0.06);
  padding-left:1.2rem;
}
.preset::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--lamp);
  transform:scaleY(0);
  transition:transform .3s ease;
}
.preset:hover::before, .preset:focus-within::before{transform:scaleY(1);}
.preset-freq{
  font-family:var(--font-mono); font-size:.85rem;
  color:var(--lamp-soft); letter-spacing:.02em;
}
.preset-title{
  font-family:var(--font-body); font-size:1.05rem; font-weight:500;
  color:var(--paper);
}
.preset-time{
  font-family:var(--font-mono); font-size:.8rem;
  color:var(--paper-faint);
}

/* ===================== LISTEN ===================== */
.listen{
  background:var(--bg-void);
  text-align:center;
  padding:clamp(4rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5rem);
}
.listen h2{font-size:clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom:.6rem;}
.listen .section-intro{max-width:34rem; margin-left:auto; margin-right:auto;}

.platform-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1rem; margin-top:2.4rem;
}
.platform-btn{
  display:flex; align-items:center; gap:.6rem;
  padding:.9em 1.6em;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em;
  color:var(--paper);
  transition:border-color .3s ease, color .3s ease, transform .2s ease;
}
.platform-btn svg{width:18px; height:18px;}
.platform-btn:hover{
  border-color:var(--lamp);
  color:var(--lamp-soft);
  transform:translateY(-2px);
}
.platform-note{
  margin-top:1.6rem;
  font-size:.78rem;
  color:var(--paper-faint);
}

/* ===================== COMING SOON ===================== */
.coming-soon{
  position:relative;
  min-height:60vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.coming-soon-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 20%;
  transform:scale(1.05);
}
.coming-soon-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg-void) 5%, rgba(10,15,20,0.55) 50%, rgba(10,15,20,0.75) 100%);
}
.coming-soon-content{
  position:relative; z-index:2; text-align:center; max-width:34rem; padding:0 1.5rem;
}
.coming-soon-content h2.serif-italic{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.9rem, 4.4vw, 3rem);
  color:var(--signal-gold);
  margin:0;
  text-shadow:0 0 40px rgba(139,126,234,0.35);
}
.coming-soon-content h2.coming-soon-second{
  color:var(--signal-violet);
  text-shadow:0 0 40px rgba(139,126,234,0.45);
}
.coming-soon-and{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--paper-faint);
  margin:.6rem 0;
  letter-spacing:.1em;
}
.coming-soon-content > p:last-child{
  color:var(--paper-dim); font-weight:300;
  margin-top:1.4rem;
}

/* ===================== FOOTER ===================== */
.site-footer{
  background:var(--bg-void);
  border-top:1px solid var(--line);
  padding:clamp(3rem, 6vw, 4rem) clamp(1.5rem, 6vw, 5rem) 2rem;
  text-align:center;
}
.footer-wordmark{
  font-family:var(--font-script);
  font-size:2rem;
  color:var(--paper);
  margin:0;
}
.footer-tagline{
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-faint);
  margin:.5rem 0 2.4rem;
}
.footer-links{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  margin-bottom:2.4rem;
}
.footer-links > a{
  font-family:var(--font-mono); font-size:.85rem; color:var(--lamp-soft);
}
.footer-social{display:flex; gap:1.6rem;}
.footer-social a{
  font-family:var(--font-mono); font-size:.75rem; color:var(--paper-dim);
  letter-spacing:.05em;
}
.footer-social a:hover{color:var(--lamp-soft);}
.footer-copyright{
  font-family:var(--font-mono); font-size:.68rem; color:var(--paper-faint);
}

/* ===================== SCROLL REVEAL ===================== */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 860px){
  .about{grid-template-columns:1fr;}
  .about-image{max-width:20rem; margin:0 auto;}
  .preset{grid-template-columns:3.4rem 1fr auto;}
  .lb{display:none;}
}
@media (max-width: 560px){
  .site-nav nav{gap:1rem;}
  .site-nav nav a{font-size:.62rem;}
  .platform-row{flex-direction:column; align-items:stretch;}
}