:root {
  --dw-bg: #f1eadb; --dw-fg: #0f1f3a; --dw-accent: #b7472a; --dw-panel: rgba(14, 64, 72, .96);
  --dw-font-body: 'Source Serif 4', Georgia, serif; --label: 'Oswald', 'Arial Narrow', sans-serif; --type: 'Special Elite', 'Courier New', monospace;
  --teal: #1a5f68; --teal-d: #0e4048; --yellow: #f5d547; --rust: #b7472a; --navy: #0f1f3a; --paper: #f1eadb; --paper-d: #e6dcc5; --line: rgba(15, 31, 58, .18);
}
body { overflow-x: hidden; }
.dw-toast { color: #f1eadb; }
h1, h2, h3 { font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; margin: 0 0 .45em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
section { padding: clamp(56px, 9vw, 112px) clamp(16px, 5vw, 64px); }

.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 12px clamp(16px, 4vw, 40px); background: #0e4048f0; color: var(--paper); border-bottom: 4px solid var(--yellow); }
.brand { display: flex; align-items: center; gap: .55em; font-family: var(--label); font-weight: 700; font-size: 1.25rem; letter-spacing: .1em; color: var(--paper); text-decoration: none; }
.brand span:not(.atom) { font-weight: 400; color: var(--yellow); }
.atom { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--paper); position: relative; }
.atom::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--yellow); }
.topbar nav { display: flex; align-items: center; gap: 18px; font-family: var(--label); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.topbar nav a { color: var(--paper); text-decoration: none; opacity: .85; }
.topbar nav a:hover { color: var(--yellow); opacity: 1; }
.dw-audio { color: var(--paper); font-family: var(--label); }
@media (max-width: 760px) { .topbar nav a { display: none; } .brand { font-size: 1.05rem; } }

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 0; overflow: hidden; background: var(--teal-d); color: var(--paper); }
.hero-layer { position: absolute; inset: 0; }
.hero-fig { position: absolute; left: 50%; top: 50%; width: max(100%, calc(100svh * 1.7778)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.hero-art { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #0e4048f2 0%, #0e4048b0 38%, transparent 62%), linear-gradient(transparent 70%, #0e4048 100%); }
.hero-copy { position: relative; z-index: 3; max-width: 680px; padding: 0 clamp(16px, 5vw, 64px) clamp(44px, 9vh, 110px); }
.kicker { font-family: var(--label); font-size: .86rem; letter-spacing: .24em; text-transform: uppercase; color: var(--yellow); margin: 0 0 1rem; }
.hero h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); text-shadow: 0 3px 24px #0008; }
.lede { font-size: clamp(1.05rem, 1.9vw, 1.25rem); max-width: 54ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.btn { font-family: var(--label); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--paper); border: 2px solid var(--paper); padding: .75em 1.3em; transition: background .2s, color .2s; }
.btn:hover { background: var(--paper); color: var(--teal-d); }
.btn-hot { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.btn-hot:hover { background: #fff07a; border-color: #fff07a; }
.hs { position: absolute; z-index: 4; border-radius: 50%; border: 2px dashed transparent; background: transparent; cursor: pointer; transition: border-color .3s, background .3s; }
.hs:hover, .hs:focus-visible { border-color: var(--yellow); background: #f5d54726; }
.hs.is-found { border-color: #ffffff88; }
.hs-station { left: 29.2%; top: 13%; width: 4%; aspect-ratio: 1; }
.hs-feed { left: 56.4%; top: 28%; width: 7%; aspect-ratio: 1; }
.hs-eng { left: 71.5%; top: 47%; width: 8%; aspect-ratio: 1; }
@media (max-width: 760px) {
  .hero { display: block; min-height: 0; padding-top: 58px; }
  .hero-layer { position: relative; inset: auto; overflow: hidden; }
  .hero-fig { position: relative; left: -30%; top: 0; width: 160%; transform: none; }
  .hero::after { inset: 58px 0 auto 0; height: 90vw; background: linear-gradient(transparent 55%, #0e4048 100%); }
  .hero-copy { margin-top: -4vw; }
}

.dial-sec { background: var(--teal-d); color: var(--paper); }
.dial-head { max-width: 760px; margin: 0 auto 1.8rem; text-align: center; }
.dial-head p:last-child { opacity: .88; }
.radio { max-width: 980px; margin: 0 auto; padding: clamp(16px, 3vw, 28px); border-radius: 26px; background: linear-gradient(160deg, #6b3a1f, #3f2010 70%); box-shadow: inset 0 2px 0 #ffffff22, inset 0 -6px 0 #00000055, 0 30px 80px #0009; }
.radio-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.eye { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #0b1a10 30%, #062b14 31%); border: 3px solid #c9b48a; position: relative; overflow: hidden; flex: none; }
.eye-wedge { --open: 1; position: absolute; inset: 4px; border-radius: 50%;
  background: conic-gradient(from calc(180deg - var(--open) * 70deg), #0a1b0e 0deg, #0a1b0e calc(var(--open) * 140deg), #5fe85d calc(var(--open) * 140deg), #b9ff9a 300deg, #5fe85d 360deg);
  box-shadow: 0 0 18px #5fe85d88; transition: background .15s; }
.eye-wedge::after { content: ''; position: absolute; inset: 36%; border-radius: 50%; background: #0b1a10; }
.freq { font-family: var(--label); font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; color: var(--yellow); text-shadow: 0 0 12px #f5d54766; }
.freq small { font-size: .4em; margin-left: .3em; color: var(--paper); }
.power { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; padding: .7em 1.1em; border-radius: 999px; border: 2px solid var(--paper-d); background: #2a150a; color: var(--paper); cursor: pointer; }
.power.is-on { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.scale { position: relative; height: 92px; border-radius: 12px; background: linear-gradient(#f9e9b8, #f0d27a); box-shadow: inset 0 0 0 3px #c9b48a, inset 0 8px 20px #0003; overflow: hidden; cursor: ew-resize; touch-action: none; }
.ticks { position: absolute; inset: 0 14px; }
.ticks span { position: absolute; top: 14px; transform: translateX(-50%); font-family: var(--label); font-size: clamp(.7rem, 1.6vw, .95rem); color: var(--navy); }
.ticks i { position: absolute; bottom: 12px; width: 1px; height: 14px; background: #0f1f3a88; }
.ticks i.major { height: 26px; width: 2px; background: var(--navy); }
.needle { position: absolute; top: 6px; bottom: 6px; width: 3px; background: var(--rust); box-shadow: 0 0 6px #b7472a99; transform: translateX(-1px); }
.tuner { width: 100%; margin: 14px 0 6px; accent-color: var(--yellow); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.presets button { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; padding: .55em 1em; border-radius: 8px; border: 0; background: var(--paper-d); color: var(--navy); cursor: pointer; box-shadow: inset 0 -3px 0 #0003; }
.presets button:hover, .presets button:focus-visible { background: var(--yellow); }
.tape { max-width: 980px; margin: 22px auto 0; min-height: 190px; }
.station { background: var(--paper); color: var(--navy); padding: 1.2rem 1.4rem; border-radius: 4px; box-shadow: 0 16px 40px #0006; border-left: 8px solid var(--rust); }
.call { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem; color: var(--rust); margin: 0 0 .4rem; }
.tx { font-family: var(--type); font-size: 1rem; line-height: 1.6; margin: 0; }
.st-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: .9rem; }
.st-act a { font-family: var(--label); text-transform: uppercase; letter-spacing: .06em; color: var(--teal); }
.log { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; padding: .55em 1em; border: 2px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; }
.log:hover, .log:focus-visible { background: var(--navy); color: var(--paper); }
.log.is-found { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.log.is-found::after { content: '  ✓ logged'; }
.logged { text-align: center; font-family: var(--label); letter-spacing: .08em; text-transform: uppercase; margin-top: 1.4rem; }
.logged b { color: var(--yellow); }
.reward { max-width: 760px; margin: 1rem auto; padding: 1rem 1.2rem; border: 2px solid var(--yellow); background: #f5d54714; }
.journal { max-width: 860px; margin: 1rem auto 0; font-size: .95rem; }
.journal li { margin: .5em 0; }
.journal strong { color: var(--yellow); margin-right: .3em; }

.line { max-width: 1200px; margin: 0 auto; }
.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.item { background: #fffaf0; border: 1px solid var(--line); padding: 1.3rem 1.3rem 1.1rem; box-shadow: 6px 6px 0 var(--teal); }
.item h3 { font-size: 1.7rem; color: var(--teal-d); }
.model { font-family: var(--label); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rust); margin: 0 0 .3rem; }
.item p { margin: 0 0 .8rem; }
.item .fp { font-family: var(--type); font-size: .78rem; line-height: 1.5; color: #45506a; border-top: 1px dashed var(--line); padding-top: .6rem; margin: 0; }
.art { position: relative; max-width: 760px; margin: 2.6rem auto 0; border: 10px solid #fffaf0; box-shadow: 0 20px 60px #0f1f3a40; }
.art img { width: 100%; height: auto; }
.hs-dial { left: 68%; top: 34%; width: 15%; aspect-ratio: 1; }
.hs-pearl { left: 47%; top: 40%; width: 12%; aspect-ratio: 1; }
.hs-ash { left: 13%; top: 73%; width: 16%; aspect-ratio: 1.4; }
.art .hs:hover, .art .hs:focus-visible { border-color: var(--rust); background: #b7472a22; }

.merch { text-align: center; background: var(--paper-d); }
.merch > p { max-width: 60ch; margin: 0 auto; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; max-width: 1060px; margin: 1.6rem auto 0; }
.offer { font-family: var(--label); text-transform: uppercase; letter-spacing: .04em; font-size: 1.2rem; color: var(--navy); background: var(--paper); border: 2px solid var(--navy); padding: 1.1rem 1rem; cursor: pointer; box-shadow: 5px 5px 0 var(--navy); transition: transform .15s, box-shadow .15s; }
.offer small { display: block; margin-top: .35em; font-family: var(--dw-font-body); text-transform: none; letter-spacing: 0; font-size: .9rem; color: #45506a; }
.offer:hover, .offer:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--rust); }

.club { display: grid; justify-items: center; text-align: center; background: var(--teal); color: var(--paper); }
.club > p { max-width: 56ch; }
.club .dw-optin { text-align: left; width: 100%; }
.club .dw-optin input[type=email] { background: #fffaf0; color: var(--navy); border-color: var(--paper-d); }
.club .dw-optin button[type=submit] { background: var(--yellow); color: var(--navy); font-family: var(--label); letter-spacing: .08em; text-transform: uppercase; border-radius: 0; }
.club .dw-optin input[type=email] { border-radius: 0; }
.offer-note { margin: 0; color: var(--yellow); font-family: var(--label); letter-spacing: .04em; }

.foot { padding: 34px 16px 8px; text-align: center; background: var(--navy); color: var(--paper); }
.foot a { color: var(--yellow); }
.slogan { font-family: var(--label); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; letter-spacing: .06em; color: var(--yellow); margin: 0 0 .4rem; }
.more { font-family: var(--label); letter-spacing: .06em; }