:root{
  --bg:#0a0c0d;
  --panel:#111416;
  --line:#2a2f31;
  --text:#f0f0ec;
  --muted:#a3a8a5;
  --accent:#b7c94b;
  --soft:#171b1d
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:radial-gradient(circle at 65% 0,#15191a 0,transparent 38%),var(--bg);
  color:var(--text);
  font-family:"Courier New",Courier,monospace
}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:148px;
  border-right:1px solid var(--line);
  padding:28px 18px;
  display:flex;
  flex-direction:column;
  background:rgba(9,11,12,.94);
  backdrop-filter:blur(14px);
  z-index:10
}
.wordmark{
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  text-decoration:none;
  color:var(--accent)
}
.dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-right:7px;
  box-shadow:0 0 12px rgba(183,201,75,.5)
}
nav{
  margin-top:66px;
  display:grid;
  gap:28px
}
nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  transition:.2s
}
nav a small{
  display:block;
  font-size:9px;
  margin-bottom:4px
}
nav a:hover,nav a.active{
  color:var(--accent)
}
.socials{
  margin-top:auto;
  display:flex;
  gap:16px
}
.socials a{
  color:var(--text);
  display:block;
  width:17px;
  height:17px
}
.socials svg{
  width:100%;
  height:100%;
  fill:currentColor
}
.socials a:hover{
  color:var(--accent)
}
main{
  margin-left:148px
}
.site-shell{
  width:min(1220px,calc(100% - 44px));
  margin:0 auto
}
.section{
  padding:32px 0
}
.hero{
  min-height:700px;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:48px;
  align-items:start
}
.kicker{
  color:var(--muted);
  font-size:12px;
  margin:8px 0 31px
}
.hero h1{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(72px,8vw,128px);
  line-height:.9;
  letter-spacing:-.06em;
  margin:0
}
.accent-line{
  width:38px;
  height:4px;
  background:var(--accent);
  margin:30px 0 24px
}
.hero-tagline{
  font-size:17px;
  line-height:1.45
}
.subline{
  margin-top:35px;
  color:#c7cbc8
}
.city-stack{
  display:grid;
  gap:18px
}
.city-card{
  position:relative;
  margin:0;
  border:1px solid var(--line);
  overflow:hidden;
  background:#101314
}
.city-card img{
  width:100%;
  display:block;
  filter:saturate(.82) brightness(.82)
}
.city-main img{
  aspect-ratio:1.7/1;
  object-fit:cover
}
.city-secondary{
  margin-left:14%;
  display:grid;
  grid-template-columns:1.8fr .8fr;
  align-items:stretch
}
.city-secondary img{
  height:100%;
  object-fit:cover
}
.city-card figcaption{
  position:absolute;
  right:16px;
  top:16px;
  background:rgba(10,12,13,.8);
  padding:11px 14px;
  border:1px solid var(--line);
  display:grid;
  gap:4px;
  font-size:11px
}
.city-secondary figcaption,.city-main figcaption{
  position:static;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#121618
}
.city-card figcaption span{
  color:var(--muted)
}
.grid-two{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:18px
}
.panel{
  background:linear-gradient(145deg,#121517,#0f1213);
  border:1px solid var(--line)
}
.panel-heading{
  font-size:12px;
  color:#d9dbd8;
  padding:16px 18px;
  border-bottom:1px solid var(--line)
}
.status-card{
  padding-bottom:8px
}
.status-item{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:18px;
  padding:15px 20px
}
.status-item b{
  font-size:10px;
  color:var(--accent)
}
.status-item p{
  margin:0;
  font-size:13px;
  line-height:1.5
}
.status-item p>span{
  color:var(--muted)
}
.music-inner{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:30px;
  padding:30px
}
.album-cover{
  width:190px;
  aspect-ratio:1;
  object-fit:cover;
  border:1px solid var(--line);
  transition:opacity .18s ease,transform .18s ease
}
.album-cover.is-changing{
  opacity:.15;
  transform:scale(.985)
}
.album-name{
  margin:2px 0 12px!important;
  color:var(--accent)!important;
  font-size:10px!important;
  letter-spacing:.08em;
  text-transform:uppercase
}
.music-inner h2{
  margin:0 0 7px;
  font-size:34px
}
.music-inner p{
  margin:0;
  color:var(--muted)
}
.interests-card p{
  padding:22px 22px 6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8
}
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:16px 22px 22px
}
.tag-row span{
  border:1px solid var(--line);
  padding:8px 10px;
  font-size:10px;
  color:var(--accent);
  background:#0d1011
}
.radio-section{
  padding-top:48px
}
.expanded-radio{
  min-height:740px
}
.radio-top{
  display:grid;
  grid-template-columns:.72fr 1.28fr
}
.radio-profile{
  padding:34px
}
.eyebrow{
  font-size:11px;
  color:var(--accent)
}
.radio-profile h2{
  font-family:Arial,Helvetica,sans-serif;
  font-size:64px;
  letter-spacing:-.04em;
  margin:14px 0 28px
}
.radio-profile dl{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:18px;
  font-size:13px
}
.radio-profile dt{
  color:var(--muted)
}
.radio-profile dd{
  margin:0
}
.receiver{
  border-left:1px solid var(--line);
  background:#080d12
}
.receiver-header{
  display:flex;
  justify-content:space-between;
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  color:var(--muted)
}
.rx-indicator{
  color:var(--accent)
}
.rx-indicator i{
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  margin-right:6px;
  box-shadow:0 0 10px var(--accent)
}
.frequency-display{
  padding:20px 24px 8px;
  font-size:58px;
  letter-spacing:-.06em
}
.frequency-display small{
  font-size:14px;
  color:var(--muted);
  margin-left:10px
}
.waterfall{
  position:relative;
  height:300px;
  overflow:hidden;
  background:repeating-linear-gradient(90deg,#031831 0 6px,#05254b 7px 12px,#03101e 13px 17px),linear-gradient(#091015,#082b68)
}
.grid-lines{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.06) 32px)
}
.spectrum-peaks{
  position:absolute;
  inset:0
}
.ambient-peak{
  position:absolute;
  bottom:0;
  width:2px;
  height:100%;
  background:linear-gradient(to top,rgba(53,182,255,.1),#35b6ff 48%,rgba(53,182,255,.02));
  box-shadow:0 0 14px rgba(53,182,255,.9);
  opacity:.62;
  animation:peakFlicker 1.8s ease-in-out infinite alternate
}
.ambient-peak.hot{
  width:4px;
  background:linear-gradient(to top,rgba(217,239,63,.1),var(--accent) 52%,rgba(217,239,63,.03));
  box-shadow:0 0 20px rgba(217,239,63,.8)
}
.ambient-peak:nth-child(2n){
  animation-delay:-.7s
}
.ambient-peak:nth-child(3n){
  animation-delay:-1.2s
}
.signal{
  position:absolute;
  top:0;
  bottom:0;
  width:4px
}
.main-signal{
  left:72.8%;
  background:#fff;
  box-shadow:0 0 14px #fff,0 0 34px rgba(255,255,255,.45);
  transition:left .16s ease
}
.scan-bar{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:rgba(255,255,255,.35);
  box-shadow:0 0 8px #fff;
  animation:scan 3.4s linear infinite
}
@keyframes scan{
  from{
    top:-4px
  }
  to{
    top:100%
  }
}
@keyframes peakFlicker{
  from{
    opacity:.3;
    filter:brightness(.7)
  }
  to{
    opacity:.9;
    filter:brightness(1.5)
  }
}
.frequency-scale{
  display:flex;
  justify-content:space-between;
  padding:10px 18px 14px;
  color:#747c80;
  font-size:10px
}
.frequency-controls{
  border-top:1px solid var(--line)
}
.full-tuner .tuner{
  min-height:245px;
  padding:28px 34px
}
.tuner-heading{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center
}
.tuner label{
  display:block;
  font-size:11px;
  color:var(--accent)
}
.tuner-heading span{
  font-size:10px;
  color:var(--muted)
}
.tuner input{
  width:100%;
  margin-top:28px;
  accent-color:var(--accent)
}
.tuner-readout{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:10px;
  margin-top:12px
}
.tuner-readout strong{
  color:var(--text);
  font-size:17px
}
.dial-grid{
  height:28px;
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:start;
  border-top:1px solid var(--line)
}
.dial-grid span{
  width:1px;
  height:10px;
  background:#596064
}
.dial-grid span:nth-child(odd){
  height:18px;
  background:var(--accent)
}
.tuner p{
  max-width:780px;
  color:var(--muted);
  font-size:11px;
  line-height:1.65;
  margin:20px 0 0
}
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px
}
.quote{
  padding:30px;
  min-height:230px
}
.quote>span{
  color:var(--accent);
  font-size:54px;
  line-height:.5
}
.quote p{
  font-size:21px;
  line-height:1.55;
  margin:10px 0 22px
}
.quote small{
  color:var(--muted)
}
.contact-card p{
  padding:8px 18px 14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7
}
.contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:0 18px 16px
}
.contact-actions a{
  font-size:10px;
  color:#fff;
  text-decoration:none;
  padding:12px 16px;
  border:1px solid var(--accent);
  background:#667321
}
.contact-actions .secondary{
  background:transparent;
  color:var(--accent)
}
.email-text{
  display:inline-block;
  margin:0 18px 20px;
  color:var(--text);
  font-size:11px;
  text-decoration:none;
  border-bottom:1px solid var(--line)
}
footer{
  display:flex;
  justify-content:space-between;
  padding:24px 0 38px;
  color:#6e7471;
  font-size:10px
}
@media(max-width:1050px){
  .site-shell{
    width:min(100% - 34px,1220px)
  }
  .hero{
    grid-template-columns:1fr
  }
  .hero-copy{
    max-width:700px
  }
  .grid-two,.footer-grid{
    grid-template-columns:1fr 1fr
  }
  .radio-top{
    grid-template-columns:1fr
  }
  .receiver{
    border-left:0;
    border-top:1px solid var(--line)
  }
}
@media(max-width:760px){
  .sidebar{
    position:static;
    width:auto;
    height:auto;
    flex-direction:row;
    align-items:center;
    gap:20px;
    padding:18px
  }
  nav,.socials{
    margin:0
  }
  nav{
    display:none
  }
  .socials{
    margin-left:auto
  }
  main{
    margin-left:0
  }
  .site-shell{
    width:min(100% - 28px,1220px)
  }
  .section{
    padding:24px 0
  }
  .hero h1{
    font-size:18vw
  }
  .grid-two,.footer-grid{
    grid-template-columns:1fr
  }
  .city-secondary{
    margin-left:0
  }
  .music-inner{
    grid-template-columns:140px 1fr
  }
  .album-cover{
    width:140px
  }
  .full-tuner .tuner{
    padding:24px 20px
  }
  footer{
    gap:12px;
    flex-wrap:wrap
  }
}
@media(max-width:520px){
  .radio-profile{
    padding:22px
  }
  .radio-profile h2{
    font-size:48px
  }
  .radio-profile dl{
    grid-template-columns:1fr;
    gap:7px
  }
  .radio-profile dd{
    margin-bottom:10px
  }
  .frequency-display{
    font-size:42px
  }
  .quote p{
    font-size:17px
  }
  .music-inner{
    grid-template-columns:1fr
  }
  .album-cover{
    width:100%;
    max-width:210px
  }
  .tuner-heading{
    align-items:flex-start;
    flex-direction:column
  }
}
@media(max-width:620px){
  .music-inner{
    grid-template-columns:1fr;
    padding:22px
  }
  .album-cover{
    width:100%;
    max-width:260px
  }
  .music-inner h2{
    font-size:28px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  .music-card .album-cover,.ambient-peak,.scan-bar{
    animation:none!important
  }
  .album-cover{
    transition:none
  }
}
.music-card .album-cover{
  animation:none!important
}
.music-copy{
  display:flex;
  flex-direction:column;
  min-width:0
}
.music-inner{
  align-items:center
}
.hero-tagline{
  line-height:1.55
}
.city-secondary-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-left:7%;
}
.city-secondary-row .city-secondary{
  margin:0;
  grid-template-columns:1fr;
}
.city-secondary-row .city-secondary figcaption,.city-main figcaption{
  min-height:84px;
  border-left:0;
  border-top:1px solid var(--line);
  padding:14px 16px;
}
.city-secondary-row .city-secondary img{
  width:100%;
  aspect-ratio:16/8.7;
  object-fit:cover;
}
.full-tuner .tuner-instructions{
  display:block;
  width:100%;
  max-width:none;
  margin:38px 0 0;
  padding-top:24px;
  border-top:1px solid var(--line);
  line-height:1.8;
}
@media(max-width:900px){
  .city-secondary-row{
    margin-left:0
  }
}
@media(max-width:760px){
  .city-secondary-row{
    grid-template-columns:1fr
  }
}
.hero{
  overflow:visible;
}
.city-stack,.city-card,.city-card img{
  min-width:0;
}
.city-main img{
  width:100%;
  aspect-ratio:1.7/1;
  object-fit:cover;
}
.city-secondary-row{
  margin-left:0;
  width:100%;
}
.city-secondary-row .city-secondary{
  min-width:0;
}
.city-secondary-row .city-secondary img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.interests-section{
  display:block;
}
.interests-card{
  min-height:300px;
}
.interests-card p{
  max-width:none;
  font-size:15px;
  padding:34px 34px 12px;
}
.interests-card .tag-row{
  padding:22px 34px 34px;
}
.full-tuner .tuner-instructions{
  max-width:none;
  width:100%;
  text-align:center;
  white-space:nowrap;
  font-size:10px;
  letter-spacing:-.01em;
  margin-top:30px;
  padding-top:21px;
}
@media(max-width:1050px){
  .full-tuner .tuner-instructions{
    white-space:normal;
  }
}
@media(max-width:760px){
  .hero{
    min-height:auto;
  }
  .city-secondary-row{
    grid-template-columns:1fr;
  }
  .interests-card{
    min-height:auto;
  }
}
.city-main img,.city-secondary-row .city-secondary img{
  display:block;
  object-position:center center;
}
.city-main img{
  aspect-ratio:820/530
}
.city-secondary-row .city-secondary img{
  aspect-ratio:16/10.5
}
.city-main,.city-secondary-row .city-secondary{
  background:#0d1011;
}
.city-main img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
}
.city-secondary-row .city-secondary img{
  width:100%;
  height:250px;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  background:#0d1011;
}
.album-navigation{
  position:relative;
  width:190px;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--line);
  background:#090b0c;
}
.album-navigation .album-cover{
  width:100%;
  height:100%;
  border:0;
  display:block;
  object-fit:cover;
  transition:opacity .18s ease,transform .22s ease,filter .22s ease;
}
.album-navigation:hover .album-cover,.album-navigation:focus-within .album-cover{
  transform:scale(1.018);
  filter:brightness(.82);
}
.album-nav-zone{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  opacity:0;
  transition:opacity .18s ease,background .18s ease;
}
.album-nav-left{
  left:0;
  background:linear-gradient(90deg,rgba(5,7,8,.62),transparent);
}
.album-nav-right{
  right:0;
  background:linear-gradient(270deg,rgba(5,7,8,.62),transparent);
}
.album-nav-zone span{
  position:absolute;
  top:50%;
  transform:translateY(-52%);
  font:400 58px/1 Arial,sans-serif;
  text-shadow:0 2px 16px rgba(0,0,0,.9);
  transition:transform .16s ease,color .16s ease;
}
.album-nav-left span{
  left:16px
}
.album-nav-right span{
  right:16px
}
.album-navigation:hover .album-nav-zone,.album-navigation:focus-within .album-nav-zone{
  opacity:1;
}
.album-nav-zone:hover,.album-nav-zone:focus-visible{
  opacity:1;
  color:var(--accent);
  outline:none;
}
.album-nav-left:hover span,.album-nav-left:focus-visible span{
  transform:translate(-3px,-52%);
}
.album-nav-right:hover span,.album-nav-right:focus-visible span{
  transform:translate(3px,-52%);
}
@media (hover:none), (pointer:coarse){
  .album-nav-zone{
    opacity:.72;
  }
}
@media(max-width:760px){
  .city-secondary-row .city-secondary img{
    height:auto;
    max-height:360px;
  }
  .album-navigation{
    width:140px;
  }
}
@media(max-width:520px){
  .album-navigation{
    width:100%;
    max-width:240px;
  }
  .album-nav-zone span{
    font-size:50px;
  }
}
.city-secondary-row .city-secondary:nth-child(2) img{
  width:100%;
  height:250px;
  object-fit:cover;
  object-position:center 42%;
  background:#0d1011;
}
.frequency-scale{
  grid-template-columns:repeat(5,1fr);
}
@media(max-width:760px){
  .city-secondary-row .city-secondary:nth-child(2) img{
    height:240px;
    object-fit:cover;
    object-position:center 42%;
  }
}
.city-secondary-row .city-secondary:first-child img{
  width:100%;
  height:250px;
  object-fit:cover;
  object-position:center 50%;
  background:#0d1011;
}
@media(max-width:760px){
  .city-secondary-row .city-secondary:first-child img{
    height:240px;
    object-fit:cover;
    object-position:center 50%;
  }
}