*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#02060c}
body{font-family:Arial,Helvetica,sans-serif;color:#fff}
.hero{position:relative;min-height:100vh;overflow:hidden;background:#02060c}
.background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) brightness(.96) contrast(1.04);animation:backgroundColorize 3.2s ease-in-out 1.5s forwards}
.shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(1,7,17,.38),rgba(1,7,17,.08) 38%,rgba(1,7,17,.25)),linear-gradient(to right,rgba(1,7,17,.18),transparent 28%,transparent 72%,rgba(1,7,17,.18))}
.identity{position:absolute;z-index:2;top:clamp(22px,4vw,48px);left:clamp(22px,4vw,54px)}
.callsign{font-size:clamp(3rem,8vw,7rem);font-weight:300;line-height:.95;letter-spacing:.16em;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.station-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;font-size:clamp(.68rem,1.05vw,.95rem);letter-spacing:.14em;color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.coming-soon{position:absolute;z-index:2;top:50%;left:50%;width:min(88vw,760px);transform:translate(-50%,-50%);text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.58)}
.eyebrow{margin-bottom:12px;font-size:clamp(.68rem,1.05vw,.92rem);letter-spacing:.35em;color:rgba(255,255,255,.74)}
.coming-soon h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(3rem,9vw,8.6rem);font-weight:400;letter-spacing:.02em}
.rule{width:64px;height:1px;margin:22px auto 0;background:rgba(255,255,255,.82)}
@media(max-width:640px){.station-meta{max-width:240px;line-height:1.7}.coming-soon{top:58%}}

@keyframes backgroundColorize{
  0%{filter:grayscale(1) brightness(.96) contrast(1.04)}
  100%{filter:grayscale(0) brightness(1) contrast(1)}
}
@media (prefers-reduced-motion: reduce){
  .background{animation:none;filter:none}
}