/* ══════════ TOKENS (extracted from the 23 refs) ══════════ */
:root{
  --bg:#F4F2ED; --panel:#FFFFFF; --panel-soft:#FAF9F5;
  --ink:#1B1A17; --ink-2:#57534A; --ink-3:#8F8A7D;
  --line:#E7E3DA; --accent:#E8622C; --accent-soft:#FCEDE4;
  --green:#3E5F4A; --green-soft:#E8EEE9; --blue:#33608C;
  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --shadow:0 10px 34px rgba(27,26,23,.09), 0 2px 8px rgba(27,26,23,.05);
  --shadow-lg:0 24px 60px rgba(27,26,23,.16);
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:550}
button{font-family:var(--sans); cursor:pointer; border:0; background:none; padding:0; color:inherit}
.wrap{max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,40px)}

/* ══════════ GATE ══════════ */
#gate{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(rgba(20,24,20,.45),rgba(20,24,20,.72)), url('/assets/img/hero.jpg') center/cover, #2A332C}
.gate-card{background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:34px 30px; width:min(400px,90vw); text-align:center}
.gate-card .mini{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.gate-card h1{font-family:var(--serif); font-size:34px; margin:8px 0 4px}
.gate-card p{color:var(--ink-2); font-size:14px; margin:0 0 18px}
.gate-card input{width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-size:16px; font-family:var(--sans); outline:none; text-align:center}
.gate-card input:focus{border-color:var(--accent)}
.gate-card button{width:100%; margin-top:10px; padding:13px; border-radius:var(--r-sm); background:var(--ink); color:#fff; font-weight:600; font-size:15px}
.gate-card .err{color:#C0392B; font-size:13px; height:18px; margin-top:8px}

/* ══════════ NAV ══════════ */
nav{position:sticky; top:0; z-index:50; padding:10px 0; background:rgba(244,242,237,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(231,227,218,.7)}
.nav-in{display:flex; align-items:center; gap:10px; overflow-x:auto; scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.brand{font-family:var(--serif); font-weight:650; font-size:17px; white-space:nowrap; margin-right:6px}
.brand em{font-style:italic; color:var(--accent)}
.pill{white-space:nowrap; padding:8px 15px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--ink-2); border:1px solid transparent}
.pill:hover{background:var(--panel); border-color:var(--line)}
.pill.on{background:var(--ink); color:#fff}

/* ══════════ HERO ══════════ */
.hero{position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; border-radius:0 0 var(--r-lg) var(--r-lg)}
.hero-bg{position:absolute; inset:0; background:url('/assets/img/hero.jpg') center/cover, linear-gradient(160deg,#39493D,#1F2B22)}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,18,15,.05) 30%,rgba(15,18,15,.62))}
.hero-in{position:relative; z-index:2; width:100%; padding-bottom:clamp(26px,5vw,56px); color:#fff}
.hero .mini{font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#FFD9A8}
.hero h1{font-family:var(--serif); font-size:clamp(46px,9.5vw,108px); line-height:.98; letter-spacing:-.015em; margin:10px 0 14px; font-weight:550}
.hero h1 em{font-style:italic; font-weight:450}
.hero p{max-width:min(34em,100%); font-size:clamp(15px,1.6vw,17.5px); color:rgba(255,255,255,.88); margin:0 0 22px; overflow-wrap:break-word}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; font-size:13.5px; font-weight:500;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); color:#fff; backdrop-filter:blur(8px)}
.chip b{font-weight:700}

/* ══════════ STAT STRIP ══════════ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:-44px auto 0; position:relative; z-index:5}
.stat{background:var(--panel); border-radius:var(--r-md); box-shadow:var(--shadow); padding:18px 20px}
.stat .n{font-family:var(--serif); font-size:30px; font-weight:600; line-height:1}
.stat .l{font-size:12.5px; color:var(--ink-3); margin-top:5px; font-weight:500}
@media(max-width:640px){
  .hero{min-height:72vh}
  .hero-in{padding-bottom:70px}
  .stats{grid-template-columns:1fr 1fr; margin-top:-30px}
}

/* ══════════ SECTIONS ══════════ */
section{padding:clamp(40px,7vw,84px) 0 0; scroll-margin-top:64px}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:6px}
.sec-head h2{font-family:var(--serif); font-size:clamp(30px,4.5vw,46px); letter-spacing:-.01em}
.sec-head h2 em{font-style:italic; color:var(--accent); font-weight:450}
.sec-sub{color:var(--ink-2); font-size:15px; max-width:44em; margin:4px 0 22px}
.count{font-size:13px; color:var(--ink-3); font-weight:600; white-space:nowrap}

/* ══════════ CARD RAILS ══════════ */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:min(270px,72vw); gap:16px; overflow-x:auto; padding:6px 4px 22px; scroll-snap-type:x mandatory; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail.grid-lg{grid-auto-columns:min(340px,84vw)}
@media(min-width:980px){ .rail.as-grid{grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible} .rail.as-grid3{grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible} }
.vcard{background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; scroll-snap-align:start; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease}
.vcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.vcard .ph{position:relative; aspect-ratio:4/3; background:linear-gradient(140deg,#E4E1D8,#D5D2C6); overflow:hidden}
.vcard .ph img{width:100%; height:100%; object-fit:cover}
.vcard .ph .price{position:absolute; top:12px; right:12px; background:rgba(255,255,255,.94); border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:700}
.vcard .ph .flag{position:absolute; top:12px; left:12px; background:var(--ink); color:#fff; border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:600; letter-spacing:.04em}
.vcard .bd{padding:15px 17px 15px; flex:1; display:flex; flex-direction:column; gap:5px}
.vcard h3{font-size:16.5px; font-weight:650; letter-spacing:-.01em}
.vcard .area{font-size:12px; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.07em}
.vcard .blurb{font-size:13.5px; color:var(--ink-2); flex:1}
.links{display:flex; gap:7px; margin-top:10px; flex-wrap:wrap}
.lnk{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); transition:all .15s}
.lnk:hover{border-color:var(--ink); color:var(--ink)}
.lnk.ig{color:#B13589; border-color:#EBCFE2}
.lnk.map{color:var(--blue); border-color:#D3DEE9}

/* ══════════ MAP ══════════ */
.map-shell{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); min-height:560px; height:min(76vh,700px); background:#E9EAE4}
#bigmap{position:absolute; inset:0}
.map-filters{position:absolute; z-index:20; top:14px; left:14px; right:14px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px}
.map-filters::-webkit-scrollbar{display:none}
.mf{white-space:nowrap; padding:9px 15px; border-radius:999px; background:rgba(255,255,255,.95); box-shadow:0 3px 12px rgba(27,26,23,.12); font-size:13px; font-weight:600; color:var(--ink-2); border:1.5px solid transparent}
.mf.on{border-color:var(--ink); color:var(--ink)}
.mf .dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px}
.maplibregl-popup-content{border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:0; overflow:hidden; width:250px}
.maplibregl-popup-close-button{z-index:2; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.92); font-size:18px}
.pop .pph{aspect-ratio:16/9; background:#E4E1D8}
.pop .pph img{width:100%; height:100%; object-fit:cover}
.pop .pbd{padding:12px 14px 13px; font-family:var(--sans)}
.pop h4{margin:0 0 2px; font-size:15px; font-weight:700}
.pop .parea{font-size:11px; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px}
.pop .links{margin-top:8px}
.pin{width:34px; height:34px; border-radius:50%; border:2px solid #fff; background:#fff; box-shadow:0 4px 14px rgba(27,26,23,.28); display:grid; place-items:center; position:relative; transition:transform .25s cubic-bezier(.32,.72,0,1),box-shadow .25s}
.pin::after{content:""; position:absolute; right:1px; bottom:1px; width:8px; height:8px; border-radius:50%; background:var(--accent); border:2px solid #fff}
.pin span{font-size:15px; line-height:1}
.pin.on{transform:scale(1.16); box-shadow:0 0 0 4px var(--accent),0 8px 20px rgba(27,26,23,.32)}
.district-rail{position:absolute; z-index:20; left:14px; bottom:14px; width:min(310px,calc(100% - 28px)); display:grid; gap:7px; pointer-events:none}
.district-rail button{pointer-events:auto; text-align:left; padding:10px 13px; border-radius:12px; background:rgba(247,244,238,.86); backdrop-filter:blur(14px); box-shadow:0 3px 12px rgba(27,26,23,.12); font-size:12px; font-weight:650; color:var(--ink-2); transform:translateY(0); transition:all .25s cubic-bezier(.32,.72,0,1)}
.district-rail button.on{background:var(--ink); color:#fff; transform:translateX(7px)}
.map-fallback{display:none; position:absolute; inset:64px 14px 14px; overflow:auto; padding:14px; background:#F7F4EE; border-radius:var(--r-md)}
.map-fallback h3{font-family:var(--serif); font-size:23px; margin-bottom:10px}
.map-fallback button{display:block; width:100%; text-align:left; padding:11px 4px; border-bottom:1px solid var(--line); font-size:14px}
.map-fallback button span{display:block; color:var(--ink-3); font-size:11px; text-transform:uppercase; letter-spacing:.06em}
.map-static #bigmap,.map-static .district-rail{display:none}
.map-static .map-fallback{display:block}
@media(max-width:700px){.map-shell{height:68vh; min-height:520px}.district-rail{grid-template-columns:repeat(2,1fr); width:calc(100% - 28px)}.district-rail button{padding:8px 10px;font-size:10.5px}.district-rail button.on{transform:translateY(-3px)}}

/* ══════════ BERGE ══════════ */
.base-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:900px){ .base-grid{grid-template-columns:repeat(3,1fr)} }
.bcard{background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.bcard .bph{position:relative; aspect-ratio:16/10; background:linear-gradient(140deg,#3E5F4A,#2A3F33)}
.bcard .bph img{width:100%; height:100%; object-fit:cover}
.bcard .bph .opt{position:absolute; top:14px; left:14px; background:rgba(255,255,255,.95); border-radius:999px; padding:6px 13px; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase}
.bcard .bph h3{position:absolute; left:16px; bottom:14px; color:#fff; font-family:var(--serif); font-size:26px; text-shadow:0 2px 14px rgba(0,0,0,.45)}
.bcard .bbd{padding:16px 18px 18px}
.bcard .tagrow{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px}
.tag{font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:var(--green-soft); color:var(--green)}
.tag.warn{background:var(--accent-soft); color:var(--accent)}
.bcard .deal{margin:0 0 10px; padding:9px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12.5px; line-height:1.45; color:var(--ink-2)}
.bcard .deal strong{color:var(--ink)}
.bcard .checked{font-size:11px; color:var(--ink-3)}
.bcard p{font-size:13.5px; color:var(--ink-2); margin:0}
.hikes{margin-top:26px; display:grid; gap:20px}
@media(min-width:980px){.hikes{grid-template-columns:repeat(2,1fr)}}
.hike{background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-columns:minmax(190px,42%) 1fr; min-height:292px}
@media(max-width:640px){.hike{grid-template-columns:1fr}.hike .hph{height:230px}}
.hike .hph{position:relative; overflow:hidden; background:#d7d8cd; min-height:250px}
.hike .hph>img.photo{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.hike .hbd{padding:19px 20px; align-self:center}
.hike h3{font-family:var(--serif); font-size:21px; line-height:1.08}
.hike .region{font-size:11.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px}
.hike-copy{font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:7px}
.hike-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.hike-chip{padding:5px 9px;border-radius:999px;background:#eeece5;font-size:11px;font-weight:650}.hike-chip.transit{background:#e3eee5;color:#315d3b}
.route-note{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.btn3d{margin-top:11px; display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:#fff; padding:9px 15px; border-radius:999px; font-size:12.5px; font-weight:600}
.btn3d:hover{background:var(--accent)}
.terrain-thumb{position:absolute;inset:0;overflow:hidden;background:#d9ddcf}.terrain-thumb img{position:absolute;width:256px;height:256px;max-width:none;filter:saturate(.58) sepia(.1) brightness(1.05)}
.terrain-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(247,244,238,.06),rgba(28,26,23,.16));box-shadow:inset 0 0 40px rgba(28,26,23,.18)}
.terrain-center{position:absolute;z-index:2;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);background:#E8622C;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 8px #0006}
.terrain-credit{position:absolute;z-index:3;right:5px;bottom:4px;padding:2px 4px;background:#f7f4eed9;color:#4f4b43;font-size:8px}
.route-badge{position:absolute;z-index:3;left:10px;top:10px;padding:5px 9px;border-radius:999px;background:rgba(247,244,238,.9);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* 3D modal */
#tmodal{position:fixed; inset:0; z-index:90; background:rgba(20,19,16,.6); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:14px}
#tmodal.open{display:flex}
.tbox{position:relative; width:min(1000px,96vw); height:min(680px,86vh); background:var(--panel); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg)}
#terrain{position:absolute; inset:0}
.tbar{position:absolute; z-index:5; top:14px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; pointer-events:none}
.tinfo{background:rgba(255,255,255,.95); border-radius:var(--r-md); box-shadow:0 4px 16px rgba(0,0,0,.18); padding:11px 16px; pointer-events:auto}
.tinfo h4{margin:0; font-size:15px; font-weight:700}
.tinfo .m{font-size:12px; color:var(--ink-2)}
.tprofile{margin-top:8px;width:min(320px,62vw);height:55px}.tprofile svg{display:block;width:100%;height:100%}.tprofile .pending{font-size:10px;color:var(--ink-3)}
.tclose{background:rgba(255,255,255,.95); width:38px; height:38px; border-radius:50%; box-shadow:0 4px 16px rgba(0,0,0,.18); font-size:17px; pointer-events:auto}
.thint{position:absolute; z-index:5; bottom:14px; left:50%; transform:translateX(-50%); background:rgba(27,26,23,.78); color:#fff; font-size:11.5px; padding:7px 14px; border-radius:999px; white-space:nowrap}
.thint button{color:#fff;font-weight:700;margin-right:10px}

/* ══════════ POLLS ══════════ */
.poll-wrap{background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:clamp(18px,3.5vw,32px)}
.who{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px}
.who input{padding:11px 15px; border:1.5px solid var(--line); border-radius:999px; font-size:14px; font-family:var(--sans); outline:none; min-width:200px}
.who input:focus{border-color:var(--accent)}
.who .me{background:var(--accent-soft); color:var(--accent); font-weight:700; padding:9px 15px; border-radius:999px; font-size:13px; display:none}
.poll{padding:18px 0; border-top:1px solid var(--line)}
.poll h3{font-size:17px; font-weight:650; margin-bottom:3px}
.poll .q{font-size:13px; color:var(--ink-3); margin-bottom:13px}
.opts{display:grid; gap:9px}
.opt{position:relative; border:1.5px solid var(--line); border-radius:var(--r-md); padding:12px 15px; text-align:left; overflow:hidden; transition:border-color .15s}
.opt:hover{border-color:var(--ink-3)}
.opt.mine{border-color:var(--accent)}
.opt .bar{position:absolute; inset:0; width:0%; background:var(--panel-soft); transition:width .5s ease; z-index:0}
.opt.mine .bar{background:var(--accent-soft)}
.opt .in{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px}
.opt .nm{font-weight:600; font-size:14px}
.opt .voters{font-size:11.5px; color:var(--ink-3)}
.opt .pct{font-weight:700; font-size:14px; min-width:38px; text-align:right}

/* ══════════ PRAKTISCH ══════════ */
.prak{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){ .prak{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pcard{background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px 22px; min-width:0}
.pcard h3{font-size:16px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.pcard ul{margin:0; padding:0; list-style:none}
.pcard li{padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-2); display:flex; justify-content:space-between; gap:12px}
.pcard li:last-child{border:0}
.pcard li b{color:var(--ink); font-weight:600; white-space:normal; text-align:right; min-width:0; overflow-wrap:anywhere}

footer{margin-top:clamp(48px,8vw,90px); padding:34px 0 calc(30px + env(safe-area-inset-bottom)); background:var(--ink); color:#B8B3A6; text-align:center; font-size:13px}
footer .f-title{font-family:var(--serif); font-size:20px; color:#fff; margin-bottom:6px}
footer .f-title em{font-style:italic; color:var(--accent)}

.skeleton{opacity:.55; text-align:center; padding:30px; font-size:13.5px; color:var(--ink-3)}

/* ══════════ P2 · CINEMATIC TERRAIN SHELL ══════════ */
@font-face{font-family:"Fraunces Local";src:url('/assets/fonts/fraunces-variable-normal-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:"Fraunces Local";src:url('/assets/fonts/fraunces-variable-italic-latin.woff2') format('woff2');font-style:italic;font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono Local";src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono Local";src:url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono Local";src:url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}

:root{--bg:#F7F4EE;--panel:#fff;--panel-soft:#FAF8F3;--ink:#1c1a17;--accent:#E8622C;--serif:"Fraunces Local",Georgia,serif;--sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:"IBM Plex Mono Local",ui-monospace,monospace}
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.frame{width:min(1440px,100%);margin-inline:auto;padding-inline:clamp(16px,3vw,48px)}
.measure{width:min(680px,100%)}
.wrap{width:min(1440px,100%);padding-inline:clamp(16px,3vw,48px)}
.trip-data{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* Gate stays sovereign until authentication completes. */
.gate-open #trip-nav{opacity:0;visibility:hidden;transform:translate(-50%,-12px)}

/* One centred, detached navigation object. */
#trip-nav{position:fixed;z-index:80;top:max(14px,env(safe-area-inset-top));left:50%;width:max-content;max-width:calc(100vw - 28px);padding:0;border:0;background:rgba(255,255,255,.65);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.75);border-radius:999px;box-shadow:0 10px 32px rgba(28,26,23,.13);transform:translateX(-50%);transition:transform 280ms ease,opacity 280ms ease,visibility 280ms ease,background 300ms ease,box-shadow 300ms ease}
#trip-nav.nav-hidden{transform:translate(-50%,-130%);opacity:0;pointer-events:none}
.nav-scroller{position:relative;max-width:calc(100vw - 28px);overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;border-radius:inherit}
.nav-scroller::-webkit-scrollbar{display:none}
.nav-in{position:relative;isolation:isolate;display:flex;align-items:center;gap:2px;width:max-content;min-height:46px;padding:4px}
.nav-highlight{position:absolute;z-index:-1;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:999px;background:var(--ink);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.brand,.pill{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:0;border-radius:999px;color:var(--ink-2);font-size:12px;font-weight:650;line-height:1;padding:10px 12px;transition:color 300ms ease,background 300ms ease}
.brand{font-family:var(--serif);font-size:16px;color:var(--ink);padding-inline:11px}.brand em{color:var(--accent)}
.pill:hover{background:rgba(28,26,23,.06);border:0}.pill.on{color:#fff;background:transparent}.pill:focus-visible,.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:520px){#trip-nav{max-width:calc(100vw - 24px)}.nav-scroller{max-width:calc(100vw - 24px);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}.nav-in{min-height:43px}.brand,.pill{padding:9px 10px;font-size:11.5px}}

/* Full-viewport, static-picture-first hero. The OGL canvas is additive only. */
.hero{min-height:100svh;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;margin-inline:0;width:100%;border:clamp(8px,1.25vw,18px) solid var(--bg);border-radius:clamp(24px,3.2vw,48px);background:var(--ink);color:#fff}
.hero-picture,.hero-picture img,.hero-atmosphere,.hero-fog,.hero canvas{position:absolute;inset:0;width:100%;height:100%}.hero-picture{z-index:-4}.hero-picture img{object-fit:cover;object-position:center}.hero canvas{z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.7}
.hero-atmosphere{z-index:-2;background:linear-gradient(180deg,rgba(28,26,23,.62) 0%,rgba(28,26,23,.12) 34%,rgba(28,26,23,.82) 100%),linear-gradient(90deg,rgba(28,26,23,.5),transparent 60%)}
.hero-fog{z-index:-1;opacity:.55;background:radial-gradient(ellipse at 60% 69%,rgba(247,244,238,.26),transparent 35%),radial-gradient(ellipse at 20% 38%,rgba(247,244,238,.12),transparent 38%);filter:blur(18px);transform:scale(1.08)}
.hero-in{position:relative;z-index:2;padding-bottom:clamp(52px,8vw,112px);color:#fff}.hero .mini{font-family:var(--mono);font-size:10px;color:#F7F4EE;letter-spacing:.14em}.hero h1{margin:13px 0 17px;font-size:clamp(54px,10.5vw,154px);line-height:.88;font-weight:530;font-variation-settings:"opsz" 96,"wght" 530;letter-spacing:-.052em}.hero h1 span{display:block;overflow:hidden}.hero h1 em{font-weight:430}.hero p{margin:0 0 24px;font-size:clamp(16px,1.45vw,19px);color:rgba(247,244,238,.9)}
.chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.register{position:absolute;z-index:3;color:rgba(247,244,238,.94);font-family:var(--mono);font-size:18px;line-height:1}.register-tl{top:clamp(20px,3vw,44px);left:clamp(20px,3vw,44px)}.register-tr{top:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px)}.register-bl{bottom:clamp(20px,3vw,44px);left:clamp(20px,3vw,44px)}.register-br{bottom:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px)}
.hero-scroll{position:absolute;z-index:3;right:clamp(28px,4vw,58px);bottom:clamp(24px,4vw,48px);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,238,.82);writing-mode:vertical-rl}.hero-scroll span{margin-top:9px;color:var(--accent)}
.stats{margin:-38px auto 0;position:relative;z-index:6}.stat .n{font-family:var(--mono);font-size:25px;font-weight:600}

section{scroll-margin-top:92px}.sec-sub{max-width:none}.count,.price,.hike-chip,.tag,.deal,.checked,.spec .v,.tinfo .m,.pct{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rail.bleed{padding-inline:max(clamp(16px,3vw,48px),calc((100vw - 1440px)/2 + clamp(16px,3vw,48px)));scroll-padding-inline:max(clamp(16px,3vw,48px),calc((100vw - 1440px)/2 + clamp(16px,3vw,48px)))}
.map-shell.bleed{height:min(78svh,780px);border-radius:0;box-shadow:none}.map-filters{top:20px;left:max(16px,3vw);right:max(16px,3vw)}.district-rail{left:max(16px,3vw);bottom:20px}
@media(min-width:980px){.rail.bleed.as-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.rail.bleed.as-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.hero{border-width:7px;border-radius:28px}.hero-in{padding-bottom:88px}.hero h1{font-size:clamp(52px,17vw,88px)}.hero-scroll{display:none}.stats{margin-top:-26px}.map-shell.bleed{height:68svh}.register-bl,.register-br{bottom:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-fog,.hero canvas{display:none}.hero h1{font-variation-settings:"opsz" 96,"wght" 530}.hero-scroll{display:none}#trip-nav{transition-duration:120ms}.vcard,.pill{transition-duration:120ms}}