:root { --ink:#e8e2d1; --muted:#a9b9b7; --deep:#071b25; --navy:#0a2634; --signal:#ff6c42; --line:#f0d86c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--deep); font-family:"DM Mono", monospace; }
.archive { min-height:100vh; overflow:hidden; position:relative; background:radial-gradient(circle at 20% 20%,#144257 0,transparent 35%),var(--deep); }
.map-stage, #map, .map-sheen { position:absolute; inset:0; }
#map { background:#0b3140; filter:saturate(.72) contrast(1.13); }
.map-sheen { pointer-events:none; background:linear-gradient(90deg,rgba(4,20,28,.9) 0%,rgba(4,20,28,.24) 42%,rgba(4,20,28,.06) 100%); z-index:400; }
.leaflet-control-attribution { opacity:.35; font-size:9px!important; }
.masthead { position:relative; z-index:500; padding:clamp(2rem,6vw,5.5rem); width:min(42rem,90vw); animation:rise .8s ease both; }
.eyebrow { font-size:.69rem; letter-spacing:.17em; text-transform:uppercase; color:var(--line); display:flex; gap:.7rem; align-items:center; }
.eyebrow span { width:2.4rem; height:1px; background:var(--line); }
h1 { font:600 clamp(3.8rem,10vw,8.5rem)/.79 "Playfair Display",serif; letter-spacing:-.07em; margin:.9rem 0 1.5rem; text-shadow:0 3px 30px #00131c; }
h1 em { color:#e7c797; font-weight:600; }
.deck { max-width:27rem; font-size:clamp(.8rem,1.2vw,.98rem); line-height:1.8; color:#d0d3c7; }
.control-panel { position:absolute; z-index:500; right:clamp(1.2rem,4vw,4rem); bottom:clamp(1.2rem,4vw,3.5rem); width:min(25rem,calc(100vw - 2.4rem)); padding:1.35rem; background:rgba(5,24,33,.87); border:1px solid rgba(240,216,108,.42); backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.3); animation:rise .8s .15s ease both; }
.panel-kicker { color:var(--line); text-transform:uppercase; letter-spacing:.12em; font-size:.64rem; padding-bottom:1rem; border-bottom:1px solid rgba(232,226,209,.2); display:flex; justify-content:space-between; }
label { display:block; margin:1.1rem 0 .45rem; text-transform:uppercase; letter-spacing:.12em; font-size:.62rem; color:var(--muted); }
select { width:100%; appearance:none; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); padding:.35rem 0 .55rem; font:500 .85rem "DM Mono",monospace; }
select option { color:#071b25; }
.journey-facts { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.65rem; margin:1.25rem 0; }.journey-facts span { display:block; color:var(--muted); font-size:.57rem; line-height:1.45; text-transform:uppercase; }.journey-facts strong { display:block; margin-top:.25rem; font-size:.72rem; font-weight:500; color:#f3e8cf; }
.playback { display:flex; align-items:center; gap:.8rem; }.playback button { width:2.25rem;height:2.25rem; border:1px solid var(--signal); color:var(--signal); background:transparent; border-radius:50%; cursor:pointer; }.playback button:hover { background:var(--signal); color:#0b2330; }.playback input { accent-color:var(--signal); flex:1; }.moment { color:#ccd6ce; min-height:2.6rem; margin:1rem 0 0; font-size:.67rem; line-height:1.6; }
.footer-note { position:absolute; z-index:500; bottom:1.3rem; left:clamp(1.2rem,4vw,4rem); font-size:.56rem; letter-spacing:.14em; color:rgba(232,226,209,.7); }.footer-note span { color:var(--signal); margin:0 .35rem; }
.ship-dot { width:15px; height:15px; border-radius:50%; background:var(--signal); border:3px solid #ffe7ba; box-shadow:0 0 0 7px rgba(255,108,66,.2),0 0 25px var(--signal); }
@keyframes rise { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:none } }
@media (max-width:650px) { .masthead { padding:2rem 1.3rem; width:100%; }.map-sheen { background:linear-gradient(180deg,rgba(4,20,28,.82),rgba(4,20,28,.05) 52%,rgba(4,20,28,.68)); }.footer-note { display:none; }.control-panel { bottom:1rem; }.journey-facts { gap:.4rem; } }