:root { --night:#171a17; --deep:#101713; --wood:#5b4035; --wood-dark:#271c18; --brass:#c8a448; --paper:#efe8d8; --signal:#93d1a0; --muted:#bdb5a5; --red:#b94a3b; --serif:Georgia,"Times New Roman",serif; --sans:Inter,"Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--night); color:var(--paper); font-family:var(--sans); line-height:1.55; }
a { color:inherit; }
button,input { font:inherit; }
.skip-link { position:fixed; z-index:20; top:.5rem; left:.5rem; padding:.7rem 1rem; background:var(--paper); color:var(--night); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.topbar { min-height:64px; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0 clamp(1rem,4vw,4rem); border-bottom:1px solid #77756b; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.topbar a { text-decoration:none; }
.topbar p { margin:0; }
.opening { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,470px); gap:clamp(2rem,7vw,8rem); align-items:end; padding:clamp(4rem,9vw,9rem) clamp(1rem,7vw,8rem); border-bottom:1px solid #77756b; }
.eyebrow { margin:0 0 1rem; color:var(--brass); font-size:.7rem; font-weight:850; text-transform:uppercase; }
.opening h1 { grid-column:1; margin:0; max-width:900px; font:400 clamp(4rem,9vw,9rem)/.82 var(--serif); }
.lead { grid-column:2; grid-row:1/span 2; margin:0; color:#d7d0c2; font-size:clamp(1rem,1.5vw,1.25rem); }
.listening-room { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); border-bottom:1px solid #77756b; }
.radio-shell { margin:clamp(2rem,6vw,6rem); padding:clamp(1.2rem,3vw,2.4rem); border:3px solid var(--wood-dark); border-radius:6px; background:var(--wood); box-shadow:0 24px 60px #0007,inset 0 0 0 2px #896654; }
.radio-head { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1.2rem; font-size:.72rem; font-weight:850; }
.radio-head p { margin:0; }
.radio-head strong { color:var(--brass); font-family:Consolas,monospace; }
.receiver { min-height:220px; padding:1rem; border:2px solid #080d0a; background:var(--deep); }
#scope { display:block; width:100%; height:150px; }
.readout { display:flex; justify-content:space-between; gap:1rem; margin-top:.8rem; color:var(--signal); font:700 .76rem/1.3 Consolas,monospace; }
.controls { display:grid; grid-template-columns:54px 54px 1fr; gap:1rem; align-items:center; margin-top:1.3rem; }
.controls button { width:54px; height:54px; border:2px solid var(--wood-dark); border-radius:50%; background:var(--brass); color:var(--night); font-size:1.25rem; cursor:pointer; box-shadow:inset 0 -4px 0 #816622; }
.controls button:hover { background:#dfbd65; }
.volume { display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:center; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.volume input { width:100%; accent-color:var(--brass); }
.dial { position:relative; display:grid; grid-template-columns:repeat(5,1fr); margin-top:1.5rem; padding:.65rem 0; border-top:1px solid #dbc58f; border-bottom:1px solid var(--wood-dark); color:#eadcb9; font:700 .68rem/1 Consolas,monospace; text-align:center; }
.dial i { position:absolute; left:50%; top:-7px; width:2px; height:42px; background:var(--red); transform:translateX(-50%); transition:left .14s linear; }
.listening-note { display:grid; grid-template-columns:42px 1fr; gap:1rem; padding:clamp(3rem,7vw,7rem) clamp(1rem,5vw,5rem); border-left:1px solid #77756b; background:#222722; }
.number { margin:.2rem 0 0; color:var(--red); font-size:.8rem; font-weight:900; }
.listening-note h2,.bulletin h2,.provenance h2 { margin:0 0 1.5rem; font:400 clamp(2.5rem,5vw,5.2rem)/.92 var(--serif); }
.listening-note p:last-child { color:var(--muted); }
.bulletin { padding:clamp(4rem,9vw,9rem) clamp(1rem,7vw,8rem); background:var(--paper); color:var(--night); }
.bulletin-title { display:grid; grid-template-columns:50px minmax(0,850px); gap:1rem; margin-bottom:3rem; }
.bulletin .eyebrow,.provenance .eyebrow { color:#963627; }
.bulletin ol { max-width:1200px; margin:0 auto; padding:0; list-style:none; border-top:1px solid var(--night); }
.bulletin li { display:grid; grid-template-columns:100px 1fr; gap:1rem; align-items:center; padding:1.25rem 0; border-bottom:1px solid #aaa597; }
.bulletin time { color:#963627; font-weight:900; }
.bulletin li p { margin:0; font:400 clamp(1.3rem,2.5vw,2.3rem)/1.1 var(--serif); }
.provenance { display:grid; grid-template-columns:50px minmax(0,800px); gap:1rem; padding:clamp(4rem,9vw,9rem) clamp(1rem,8vw,9rem); background:#d0cbc0; color:var(--night); }
.provenance div>p:last-child { max-width:650px; }
footer { display:flex; justify-content:space-between; gap:2rem; padding:2rem clamp(1rem,4vw,4rem); border-top:1px solid #77756b; font-size:.78rem; }
footer p { margin:0; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--signal); outline-offset:3px; }
@media (max-width:820px) { .opening{display:block}.opening h1{margin-bottom:2rem;font-size:clamp(3.6rem,16vw,6.6rem)}.listening-room{grid-template-columns:1fr}.radio-shell{margin:2rem 1rem}.listening-note{border-left:0;border-top:1px solid #77756b}.receiver{min-height:0} }
@media (max-width:500px) { .topbar p{display:none}.radio-shell{padding:1rem}.controls{grid-template-columns:54px 54px}.volume{grid-column:1/-1}.readout{font-size:.66rem}.dial{font-size:.58rem}.listening-note,.bulletin-title,.provenance{grid-template-columns:34px 1fr}.bulletin li{grid-template-columns:64px 1fr}.bulletin{padding-left:1rem;padding-right:1rem}footer{display:block} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.dial i{transition:none} }