:root{
  --sky:#2f86dc; --sky-2:#5fb3ff; --sky-pale:#e6f4ff; --ice:#d7efff; --snow:#fbfdff;
  --pine:#1f5a45; --pine-2:#2e7d5b; --moss:#5c9a57; --sun:#ffd166; --ember:#ff6b4a; --berry:#e8434f;
  --ink:#16324a; --ink-2:#3d5a73; --paper:#fffaf0; --card:#ffffff; --line:#d8e6f2;
  --radius:22px; --shadow:0 12px 30px rgba(22,50,74,.14); --shadow-lg:0 24px 60px rgba(22,50,74,.25);
  --head:'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; --body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--sky-pale);font-size:18px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:#0b63b6}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--head);line-height:1.1;margin:0 0 .4em;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,5vw,3.4rem)}
h3{font-size:1.6rem}
p{margin:0 0 .8em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;padding:8px 14px;border-radius:10px}
.skip:focus{left:8px}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px;border-radius:10px}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
.fine{font-size:.85rem;color:var(--ink-2);line-height:1.45}
.center-title{text-align:center;margin-top:2.2rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.45em;justify-content:center;border:0;border-radius:999px;padding:.8em 1.4em;background:var(--ember);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 6px 0 #c94a2e,0 10px 24px rgba(255,107,74,.35);transition:transform .15s, box-shadow .15s;font-size:1.05rem}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c94a2e}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 6px 0 #c9d8e6}
.btn-big{font-size:1.25rem;padding:.9em 1.7em}
.link-btn{background:none;border:0;color:#fff;text-decoration:underline;font-weight:800;padding:.4em 0;opacity:.85}

/* top bar */
.topbar{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:14px;padding:10px 18px;transition:background .3s, box-shadow .3s}
.topbar.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(22,50,74,.12)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:1.35rem;color:var(--ink);text-decoration:none;font-weight:700;white-space:nowrap}
.brand b{color:var(--ember);font-weight:800}
.brand-mark{font-size:1.6rem;display:inline-block;animation:bob 3s ease-in-out infinite}
.topbar:not(.solid) .brand{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:.45em .8em;border-radius:999px;text-decoration:none;font-weight:800;color:var(--ink);font-size:.95rem;white-space:nowrap}
.topbar:not(.solid) .nav a{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.nav a:hover,.nav a.on{background:var(--sun);color:var(--ink)!important;text-shadow:none!important}
.tools{display:flex;gap:6px}
.tool{border:0;background:#fff;border-radius:999px;padding:.35em .8em;font-weight:800;box-shadow:0 3px 0 #c9d8e6;display:flex;align-items:center;gap:4px}
.tool .of{opacity:.55}
.tool.pop{animation:pop .6s}

/* HERO */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;color:#fff;background:linear-gradient(#2f86dc,#cfe8ff)}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#heroCanvas.grabbing{cursor:grabbing}
.hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(9,32,58,.62) 0%,rgba(9,32,58,.35) 38%,rgba(9,32,58,0) 62%),linear-gradient(0deg,rgba(9,32,58,.35),rgba(9,32,58,0) 30%)}
.hero-fallback{position:absolute;inset:0;background:url(photos/alps-hero.jpg) center/cover;display:none}
.no-webgl .hero-fallback{display:block}
.hero-copy{position:absolute;left:max(18px,5vw);top:22%;max-width:620px;pointer-events:none;z-index:2}
.hero-copy .btn,.hero-copy a{pointer-events:auto}
.kicker{font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;background:rgba(22,50,74,.35);display:inline-block;padding:.3em .9em;border-radius:999px;backdrop-filter:blur(4px)}
.hero h1{font-size:clamp(2.6rem,7vw,5.4rem);text-shadow:0 4px 24px rgba(10,40,70,.45);margin:.2em 0 .25em}
.hero h1 em{font-style:normal;color:var(--sun);display:inline-block;animation:wiggle 3.5s ease-in-out 2s infinite}
.hero h1 .word{display:inline-block;animation:rise .8s cubic-bezier(.2,1.4,.4,1) both}
.hero h1 .word:nth-child(2){animation-delay:.08s}.hero h1 .word:nth-child(3){animation-delay:.16s}.hero h1 .word:nth-child(4){animation-delay:.24s}.hero h1 .word:nth-child(5){animation-delay:.32s}
.lead{font-size:1.25rem;font-weight:700;text-shadow:0 2px 12px rgba(10,40,70,.55);max-width:520px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:1rem}
.drag-hint{font-weight:800;font-size:.95rem;background:rgba(22,50,74,.35);padding:.4em .9em;border-radius:999px;animation:nudge 2.4s ease-in-out infinite}
.weather-dock{position:absolute;right:max(16px,3vw);bottom:9%;z-index:3;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);color:var(--ink);border-radius:var(--radius);padding:14px 16px 10px;box-shadow:var(--shadow-lg);max-width:440px}
.weather-dock>p{margin:0 0 .5em;font-weight:700;font-size:.95rem}
.weather-btns{display:flex;gap:6px;flex-wrap:wrap}
.weather-btns button{border:3px solid transparent;background:var(--sky-pale);border-radius:16px;padding:.35em .55em;font-size:1.5rem;display:flex;flex-direction:column;align-items:center;min-width:66px;transition:transform .15s}
.weather-btns button span{font-size:.75rem;font-weight:800}
.weather-btns button:hover{transform:translateY(-3px) rotate(-3deg)}
.weather-btns button[aria-pressed=true]{border-color:var(--ember);background:#fff3e8}
.weather-say{font-size:.9rem;margin:.6em 0 0;min-height:2.6em}
.scroll-cue{position:absolute;left:50%;bottom:18px;width:30px;height:48px;border:3px solid #fff;border-radius:20px;transform:translateX(-50%);z-index:2}
.scroll-cue span{position:absolute;left:50%;top:8px;width:6px;height:10px;background:#fff;border-radius:3px;transform:translateX(-50%);animation:cue 1.6s infinite}

/* sections */
.section{padding:90px 0;position:relative}
.sec-head{text-align:center;max-width:760px;margin:0 auto 2.2rem}
.sec-head p{font-size:1.15rem;color:var(--ink-2)}
.sec-head.light,.sec-head.light p{color:#fff}
.step-pill{display:inline-block;background:var(--sun);color:var(--ink);font-weight:800;padding:.25em 1em;border-radius:999px;margin-bottom:.6em;box-shadow:0 4px 0 #e0a92c;transform:rotate(-3deg)}
.reveal{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .7s, transform .7s cubic-bezier(.2,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* explore */
.explore{background:radial-gradient(1200px 500px at 50% 0%, #10294a 0%, #0b1d36 60%, #0a1a30 100%);color:#fff;padding-top:100px}
.explore .sec-head p{color:#cfe1f5}
.globe-stage{position:relative;height:min(560px,80vw);margin:0 auto 40px;max-width:900px}
#globeCanvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#globeCanvas.grabbing{cursor:grabbing}
.globe-labels{position:absolute;inset:0;pointer-events:none}
.globe-label{position:absolute;left:0;top:0;pointer-events:auto;border:0;background:#fff;color:var(--ink);font-weight:800;font-size:.9rem;padding:.25em .7em .25em .4em;border-radius:999px;display:flex;align-items:center;gap:6px;box-shadow:0 4px 14px rgba(0,0,0,.35);margin:calc(-2.4em + var(--dy,0px)) 0 0 calc(var(--dx,0px) - 1em);transition:opacity .25s;white-space:nowrap}
.globe-label .dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.globe-label:hover{background:var(--sun)}
.globe-label.hidden{opacity:0;pointer-events:none}
.globe-tip{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-weight:800;color:#cfe1f5;margin:0;font-size:.95rem}
.no-webgl .globe-stage{display:none}
.range-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.range-card{position:relative;border:0;padding:0;border-radius:26px;overflow:hidden;background:#000;color:#fff;text-align:left;min-height:340px;box-shadow:0 18px 40px rgba(0,0,0,.35);transform-style:preserve-3d;transition:transform .2s ease-out, box-shadow .2s;will-change:transform}
.range-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.range-card:hover img{transform:scale(1.08)}
.range-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.82) 75%)}
.range-card .rc-body{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;z-index:2;transform:translateZ(40px)}
.range-card .rc-region{white-space:nowrap;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--c);padding:.2em .7em;border-radius:999px}
.range-card h3{font-size:2.2rem;margin:.25em 0 .1em}
.range-card p{margin:0;font-size:.98rem;opacity:.92;line-height:1.35}
.range-card .rc-icon{position:absolute;top:14px;right:14px;z-index:2;font-size:2rem;background:rgba(255,255,255,.9);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;transform:translateZ(60px);animation:bob 3s ease-in-out infinite}
.range-card .rc-go{display:inline-block;margin-top:.6em;background:#fff;color:var(--ink);font-weight:800;padding:.3em .9em;border-radius:999px;font-size:.9rem}
.range-card .rc-done{position:absolute;top:14px;left:14px;z-index:2;background:var(--sun);color:var(--ink);font-weight:800;font-size:.8rem;padding:.2em .7em;border-radius:999px;display:none}
.range-card.visited .rc-done{display:block}

/* mission */
.mission{background:linear-gradient(160deg,#ff8a5b 0%,#f2545b 55%,#c33c6a 100%);color:#fff;overflow:hidden}
.dossier{position:relative;background:var(--paper);color:var(--ink);border-radius:20px;padding:46px clamp(20px,4vw,48px) 30px;box-shadow:var(--shadow-lg);max-width:900px;margin:0 auto;transform:rotate(-1deg)}
.dossier::before{content:'';position:absolute;inset:10px;border:3px dashed #e6c9a8;border-radius:14px;pointer-events:none}
.dossier-tab{position:absolute;top:-16px;left:30px;background:var(--berry);color:#fff;font-weight:800;padding:.3em 1.1em;border-radius:10px;letter-spacing:.1em;font-size:.85rem;transform:rotate(-2deg)}
.typewriter{font-size:1.3rem;font-weight:700;min-height:6.5em}
.typewriter::after{content:'▌';animation:blink 1s steps(1) infinite;color:var(--ember)}
.typewriter.done::after{display:none}
.format-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.format-pick button{border:3px solid var(--line);background:#fff;border-radius:18px;padding:14px 8px;font-size:2.2rem;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .15s}
.format-pick button span{font-size:.95rem;font-weight:800}
.format-pick button:hover{transform:translateY(-4px)}
.format-pick button[aria-pressed=true]{border-color:var(--ember);background:#fff1e6;animation:pop .5s}
.signposts{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:1.4rem}
.signpost{position:relative;border:0;background:#8a5a33;color:#fff;border-radius:16px;padding:18px 14px 16px;text-align:center;box-shadow:0 8px 0 #5e3b1f;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .2s;min-height:150px}
.signpost::after{content:'';position:absolute;bottom:-34px;left:50%;width:14px;height:30px;background:#5e3b1f;transform:translateX(-50%);border-radius:0 0 4px 4px;z-index:-1}
.signpost:nth-child(odd){transform:rotate(-2deg)}.signpost:nth-child(even){transform:rotate(2deg)}
.signpost:hover{transform:rotate(0) translateY(-6px)}
.sp-ico{font-size:2.4rem}
.signpost b{font-family:var(--head);font-size:1.25rem}
.sp-more{display:block;max-height:0;overflow:hidden;font-size:.95rem;font-weight:700;line-height:1.35;transition:max-height .4s}
.signpost[aria-expanded=true]{background:#fff;color:var(--ink);box-shadow:0 8px 0 #e0c9b3}
.signpost[aria-expanded=true] .sp-more{max-height:200px}
.signpost:not([aria-expanded=true])::before{content:'Tap me!';position:absolute;top:-12px;right:-6px;background:var(--sun);color:var(--ink);font-size:.7rem;font-weight:800;padding:.15em .5em;border-radius:8px;animation:bob 2s infinite}
.note-strip{margin:3.2rem auto 0;text-align:center;font-weight:800;background:rgba(255,255,255,.18);border-radius:999px;padding:.6em 1.2em;width:fit-content;max-width:100%}

/* lab */
.lab{background:linear-gradient(180deg,#e6f4ff,#fff)}
.lab-card{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:center;background:#fff;border-radius:28px;padding:clamp(18px,3vw,34px);box-shadow:var(--shadow);margin-bottom:34px}
.lab-card:nth-child(even) .lab-text{order:2}
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1rem 0}
.gauge{background:var(--sky-pale);border-radius:16px;padding:10px;text-align:center}
.g-label{display:block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.gauge b{font-family:var(--head);font-size:1.5rem}
.o2{height:12px;background:#cfe1f0;border-radius:6px;overflow:hidden;margin:6px 0 2px}
.o2 i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22c1a3,#4ad3ff);transition:width .2s}
.zone-say{background:#fff8e1;border-left:6px solid var(--sun);padding:.6em .9em;border-radius:12px;font-weight:700;min-height:3.4em}
.slider-label{font-weight:800;display:block;margin-top:.6em}
input[type=range]{width:100%;accent-color:var(--ember);height:34px}
.climb-scene{border-radius:22px;overflow:hidden;background:#d9efff;aspect-ratio:400/420}
.climb-scene svg{width:100%;height:100%;display:block}
#climber{transition:transform .15s}
.lab-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:.6rem 0 1rem}
.mini{font-weight:800;font-size:.9rem;display:flex;flex-direction:column;min-width:180px}
#rainCanvas{width:100%;height:auto;border-radius:22px;background:#bfe3ff;display:block}
.height-chart{display:flex;align-items:flex-end;gap:10px;height:320px;padding:0 6px;margin-bottom:52px;position:relative;border-bottom:4px solid #b9cbd9}
.height-chart::before{content:'';position:absolute;left:0;right:0;bottom:calc(var(--esb) * 1%);border-top:2px dashed #ff6b4a}
.height-chart::after{content:'🏢 Empire State Building';position:absolute;left:4px;bottom:calc(var(--esb) * 1% + 2px);font-size:.7rem;font-weight:800;color:#c94a2e}
.hbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;border:0;background:none;padding:0;position:relative}
.hbar .mtn{width:100%;height:0;background:linear-gradient(180deg,#fff 0 12%,var(--c) 12%);clip-path:polygon(50% 0,100% 100%,0 100%);transition:height 1.2s cubic-bezier(.2,1.2,.3,1)}
.hbar .hname{position:absolute;top:100%;margin-top:8px;font-size:.72rem;font-weight:800;text-align:center;line-height:1.1;width:100%}
.hbar .hft{position:absolute;font-size:.72rem;font-weight:800;background:#fff;border-radius:8px;padding:0 4px;box-shadow:0 2px 6px rgba(0,0,0,.15);opacity:0;transition:opacity .3s}
.hbar.sel .hft,.hbar:hover .hft{opacity:1}
.hbar.sel .mtn{filter:drop-shadow(0 0 8px var(--c)) brightness(1.08)}

/* games */
.games{background:linear-gradient(180deg,#4b3fb5 0%,#2c6bd8 100%)}
.game-card{background:#fff;border-radius:28px;padding:clamp(18px,3vw,34px);box-shadow:var(--shadow-lg);margin-bottom:34px}
.game-card>header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:.6rem}
.game-card>header h3{margin:0}
.game-badge{background:var(--sky-pale);font-weight:800;font-size:.85rem;padding:.3em .9em;border-radius:999px}
.game-card.won .game-badge{background:var(--sun);animation:pop .6s}
.game-card.won .game-badge::before{content:'🏅 '}
.cw-explain{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:1rem}
.cw-box{border-radius:18px;padding:12px 16px}
.cw-box p{margin:.2em 0 0;font-size:.95rem}
.cw-box.climate{background:#e8f6ee}.cw-box.weather{background:#fff1e6}
.sort-arena{text-align:center}
.sort-card{min-height:120px;display:grid;place-items:center;font-family:var(--head);font-size:clamp(1.3rem,3vw,1.9rem);background:var(--sky-pale);border-radius:22px;padding:18px 24px;margin:0 auto 16px;max-width:720px;box-shadow:inset 0 0 0 3px #cfe1f0}
.sort-card.fly-left{animation:flyL .45s forwards}.sort-card.fly-right{animation:flyR .45s forwards}.sort-card.shake{animation:shake .45s}
.sort-card.enter{animation:enter .4s}
.sort-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.sort-climate{background:#22a06b;box-shadow:0 6px 0 #167a50}
.sort-weather{background:#ff8a3d;box-shadow:0 6px 0 #d0661f}
.sort-progress{height:14px;background:#e3edf6;border-radius:8px;margin:18px auto 6px;max-width:520px;overflow:hidden}
.sort-progress div{height:100%;width:0;background:linear-gradient(90deg,#22c1a3,#4ad3ff);transition:width .4s}
.sort-say{font-weight:800;min-height:1.6em;text-align:center}
.pack-layout{display:grid;grid-template-columns:1fr 240px;gap:20px;align-items:center}
.pack-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.pack-item{border:3px solid var(--line);background:#fff;border-radius:18px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:2.1rem;transition:transform .2s, opacity .4s}
.pack-item span{font-size:.82rem;font-weight:800;line-height:1.15;text-align:center}
.pack-item:hover{transform:translateY(-4px) rotate(-2deg)}
.pack-item.packed{opacity:.25;transform:scale(.8);pointer-events:none;border-style:dashed}
.pack-item.nope{animation:shake .45s;border-color:var(--berry)}
.backpack{display:grid;place-items:center}
.bp-body{width:200px;height:230px;border-radius:60px 60px 34px 34px;background:linear-gradient(160deg,#ff8a3d,#e8434f);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 -14px 0 rgba(0,0,0,.12),var(--shadow);position:relative}
.bp-body::before{content:'';position:absolute;top:-18px;width:80px;height:40px;border:8px solid #b8323c;border-bottom:0;border-radius:40px 40px 0 0}
.bp-emoji{font-size:3.6rem}
.bp-body b{font-family:var(--head);font-size:2rem}
.backpack.gulp .bp-body{animation:gulp .4s}
.flyer{position:fixed;z-index:80;font-size:2.4rem;pointer-events:none;transition:transform .6s cubic-bezier(.5,-0.3,.6,1), opacity .6s}
.vivid-list{display:grid;gap:12px;margin:1rem 0}
.vivid{display:flex;align-items:center;gap:14px;background:var(--sky-pale);border-radius:18px;padding:12px 16px;flex-wrap:wrap}
.vivid p{flex:1;margin:0;font-size:1.15rem;font-weight:700;min-width:220px}
.vivid.up{background:linear-gradient(90deg,#fff5d6,#ffe9f2)}
.vivid.up p{animation:sparkle .7s}
.vivid .btn{font-size:.9rem;padding:.55em 1em}
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:1rem 0}
.tip{background:#f4f1ff;border-radius:14px;padding:10px 12px;font-size:.92rem}
details.example{margin-top:1rem;background:#f8fbff;border-radius:18px;padding:12px 16px}
details summary{cursor:pointer;font-weight:800;font-size:1.1rem}
.poster{background:linear-gradient(160deg,#21445a,#2e7d5b);color:#fff;border-radius:18px;padding:22px;margin:12px 0}
.poster a{color:#ffe08a}
.poster-tag{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;opacity:.8}
.poster h4{font-size:2rem;margin:.2em 0}
.poster-q{font-weight:800;color:var(--sun)}
.poster-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.poster-cols p{font-size:.95rem}
.poster-notes{font-size:.95rem}

/* brochure */
.brochure{background:linear-gradient(180deg,#fff,#fff6e6)}
.trifold-stage{perspective:1600px;display:grid;place-items:center;margin:0 auto 40px;padding:16px 0}
.trifold{position:relative;width:min(660px,92vw);height:300px;border:0;background:none;padding:0;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-14deg);transition:transform .8s;display:flex}
.trifold:hover{transform:rotateX(8deg) rotateY(-6deg)}
.panel{flex:1;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.5,0,.2,1)}
.p-left{transform-origin:right center}.p-right{transform-origin:left center}
.p-right{transform:translateZ(1px) rotateY(-180deg)}
.p-left{transform:translateZ(3px) rotateY(180deg);transition-delay:.45s}
.trifold.open .p-left{transform:none;transition-delay:0s}
.trifold.open .p-right{transform:none;transition-delay:.45s}
.trifold-stage{flex-direction:column}
.fold-hint{font-weight:800;margin:.8rem 0 0;animation:bob 2s infinite}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.face.back{transform:rotateY(180deg)}
.face .f-ico{font-size:2.6rem}
.face .f-num{font-size:.75rem;letter-spacing:.12em;opacity:.7}
.face .f-title{font-family:var(--head);font-size:1.25rem;line-height:1.1}
.panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{border:0;text-align:left;background:#fff;border-radius:20px;padding:18px;box-shadow:var(--shadow);border-top:8px solid var(--c);transition:transform .2s}
.pcard:hover{transform:translateY(-4px)}
.pcard .f-ico{font-size:2rem}
.pcard small{display:block;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-size:.75rem}
.pcard h4{font-size:1.3rem;margin:.1em 0 .3em}
.pcard p{font-size:.95rem;margin:0}
.pcard.flash{animation:pop .6s}
.checklist-box{background:#fff;border-radius:20px;padding:16px 20px;margin-top:28px;box-shadow:var(--shadow)}
.checks{display:grid;gap:8px;margin:12px 0}
.check{display:flex;gap:12px;align-items:flex-start;background:var(--sky-pale);border-radius:14px;padding:10px 12px;cursor:pointer;font-weight:700}
.check input{width:26px;height:26px;accent-color:#22a06b;flex:none;margin:0}
.check:has(input:checked){background:#e3f7ea;text-decoration:line-through;text-decoration-color:#22a06b80}

/* trail */
.trail{background:linear-gradient(180deg,#1f5a45,#173f33);color:#fff}
.trail-layout{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:30px;align-items:center}
.trail-map svg{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
#hiker{transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
.trail-progress{display:flex;align-items:center;gap:12px;font-weight:800;margin-bottom:12px}
.trail-progress .bar{flex:1;height:14px;background:rgba(255,255,255,.2);border-radius:8px;overflow:hidden}
.trail-progress .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sun),var(--ember));transition:width .5s}
.ttask{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.1);border-radius:16px;padding:12px 14px;margin-bottom:10px;cursor:pointer;transition:background .2s, transform .2s}
.ttask:hover{background:rgba(255,255,255,.18);transform:translateX(4px)}
.ttask input{width:28px;height:28px;accent-color:var(--sun);flex:none;margin:0}
.ttask .num{font-family:var(--head);background:var(--sun);color:var(--ink);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;flex:none;font-weight:800}
.ttask:has(input:checked){background:rgba(255,209,102,.22)}
.ttask:has(input:checked) .num{background:#22c18a;color:#fff}
.trail .fine{color:#cfe8dc}

/* teacher + footer */
.teacher{background:#f1f6fb;padding:50px 0}
.teacher-box{background:#fff;border-radius:20px;padding:16px 22px;box-shadow:var(--shadow);margin-bottom:16px}
.teacher-box p{font-size:.98rem;margin-top:.8em}
.credits{font-size:.85rem;columns:2;column-gap:28px}
.credits li{break-inside:avoid;margin-bottom:6px}
.footer{background:#0b1d36;color:#cfe1f5;text-align:center;padding:70px 16px 40px;position:relative}
.footer .brand{justify-content:center;color:#fff}
.footer-mountains{position:absolute;left:0;right:0;top:-60px;height:62px;background:#0b1d36;clip-path:polygon(0 100%,0 70%,8% 30%,15% 62%,24% 10%,33% 60%,42% 35%,50% 70%,58% 20%,68% 66%,77% 28%,86% 58%,93% 40%,100% 64%,100% 100%)}

/* EXPEDITION overlay */
.expedition{position:fixed;inset:0;z-index:60;background:#0b1d36}
.expedition[hidden]{display:none}
.exp-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .4s .35s}
.expedition.open .exp-scroll{opacity:1}
.cloud-wipe{position:absolute;inset:0;z-index:5;pointer-events:none}
.cloud-wipe i{position:absolute;width:120vmax;height:60vmax;border-radius:50%;background:radial-gradient(closest-side,#fff 60%,rgba(255,255,255,0));opacity:0}
.expedition.wipe .cloud-wipe i{animation:cloudpuff 1.1s ease-in-out forwards}
.cloud-wipe i:nth-child(1){left:-40vmax;top:-20vmax}.cloud-wipe i:nth-child(2){right:-40vmax;top:10vmax;animation-delay:.05s!important}
.cloud-wipe i:nth-child(3){left:-20vmax;bottom:-30vmax;animation-delay:.1s!important}.cloud-wipe i:nth-child(4){right:-30vmax;bottom:-20vmax;animation-delay:.15s!important}
.exp-hero{margin:0;position:relative;height:88svh;min-height:520px;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.exp-hero img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;animation:kenburns 26s ease-in-out infinite alternate}
.exp-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.75))}
.exp-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.flash-sky{position:absolute;inset:0;background:#fff;opacity:0;z-index:1;pointer-events:none}
.exp-bar{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;pointer-events:none}
.exp-bar>*{pointer-events:auto}
.exp-close{white-space:nowrap;border:0;background:#fff;border-radius:999px;padding:.5em 1.1em;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.exp-switch{display:flex;gap:6px;background:rgba(255,255,255,.9);padding:5px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.exp-switch button{border:0;background:none;border-radius:999px;font-size:1.3rem;width:40px;height:40px}
.exp-switch button[aria-current=true]{background:var(--sun)}
.exp-hero-copy{position:relative;z-index:2;padding:0 max(18px,5vw) 60px;max-width:900px}
.exp-region{display:inline-block;background:var(--c);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;padding:.3em .9em;border-radius:999px}
.exp-hero h2{font-size:clamp(3.4rem,11vw,7.5rem);margin:.1em 0 0;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.exp-hero .tag{font-size:1.25rem;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.6);max-width:640px}
.exp-hero figcaption{position:absolute;right:12px;bottom:10px;z-index:2;font-size:.75rem;opacity:.85;max-width:60%;text-align:right;text-shadow:0 1px 4px #000}
.weather-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);border-radius:999px;padding:.3em .9em;font-weight:800;font-size:.9rem;margin-top:.4em;border:0;color:#fff}
.exp-body{background:var(--sky-pale);color:var(--ink);padding:40px 0 70px;border-radius:30px 30px 0 0;margin-top:-30px;position:relative;z-index:3}
.bigq{display:flex;gap:16px;align-items:center;background:#fff;border-radius:24px;padding:18px 22px;box-shadow:var(--shadow);margin-bottom:28px}
.bigq .guide-face{font-size:3rem;animation:bob 3s infinite}
.bigq p{margin:0;font-size:1.25rem;font-weight:800}
.bigq small{display:block;color:var(--ink-2);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.75rem}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.stat{background:#fff;border-radius:22px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--head);font-size:2.2rem;color:var(--c);line-height:1}
.stat span{font-weight:800;font-size:.9rem;color:var(--ink-2)}
.esb-stack{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;margin-top:6px;font-size:1rem}
.esb-stack i{font-style:normal;animation:drop .5s backwards}
.exp-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:start}
.exp-sub{font-size:1.7rem;margin:1.6rem 0 .8rem}
.flip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.flip{perspective:1200px;border:0;background:none;padding:0;min-height:290px;text-align:left;display:block;width:100%}
.flip-in{display:block;position:relative;width:100%;height:100%;min-height:290px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.flip.open .flip-in{transform:rotateY(180deg)}
.flip-f,.flip-b{display:block;position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.flip-f{background:linear-gradient(160deg,var(--c),#16324a);color:#fff}
.flip-f{display:flex!important;flex-direction:column;justify-content:space-between}
.flip-f .fi{font-size:2.8rem}
.flip-f .fh{display:block;font-family:var(--head);font-size:1.4rem;line-height:1.1;margin:0 0 .3em}
.flip-f .ft{display:block;font-weight:800;font-size:1.05rem}
.flip-f .tap{font-size:.8rem;font-weight:800;opacity:.85;background:rgba(255,255,255,.18);border-radius:999px;padding:.2em .8em;width:fit-content}
.flip-f .fi,.flip-f .tap{display:block}
.flip-b{background:#fff;transform:rotateY(180deg);overflow-y:auto;font-size:.95rem;line-height:1.45}
.flip-b .fh{display:block;font-family:var(--head);font-size:1.15rem;margin-bottom:.3em}
.flip-b .src{display:block;font-size:.78rem;color:var(--ink-2);margin-top:.8em}
.locator{background:#fff;border-radius:22px;padding:12px;box-shadow:var(--shadow);margin:0}
.locator img{border-radius:14px;width:100%;height:auto}
.locator figcaption{font-size:.8rem;color:var(--ink-2);margin-top:8px}
.extreme-box{background:linear-gradient(160deg,#16324a,#2c4f6e);color:#fff;border-radius:22px;padding:20px;box-shadow:var(--shadow);margin-top:20px}
.extreme-box h4{font-size:1.4rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{background:rgba(255,255,255,.14);border-radius:999px;padding:.35em .9em;font-weight:800;animation:chipIn .5s backwards}
.extreme-box p{font-size:.98rem;opacity:.95}
.trailcam{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 18px}
.polaroid{flex:0 0 min(78%,340px);scroll-snap-align:start;background:#fff;padding:10px 10px 14px;border-radius:6px;box-shadow:var(--shadow);border:0;text-align:left;transition:transform .25s}
.polaroid:nth-child(odd){transform:rotate(-2deg)}.polaroid:nth-child(even){transform:rotate(1.6deg)}
.polaroid:hover{transform:rotate(0) scale(1.03)}
.polaroid img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:3px}
.polaroid span{display:block;font-size:.9rem;font-weight:700;margin-top:8px;line-height:1.3}
.match{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow)}
.match-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.match-cols>div{display:grid;gap:10px;align-content:start}
.mbtn{border:3px solid var(--line);background:#fff;border-radius:16px;padding:12px;text-align:left;font-weight:700;font-size:.95rem;line-height:1.35;transition:transform .15s, border-color .15s}
.mbtn.hz{font-family:var(--head);font-size:1.15rem;background:#fff4ec}
.mbtn:hover{transform:translateY(-2px)}
.mbtn.sel{border-color:var(--ember);box-shadow:0 0 0 4px #ffd6c9}
.mbtn.ok{border-color:#22a06b;background:#e3f7ea;pointer-events:none}
.mbtn.bad{animation:shake .45s;border-color:var(--berry)}
.mbtn .pair{display:inline-block;background:#22a06b;color:#fff;border-radius:8px;padding:0 6px;margin-right:6px;font-size:.8rem}
.match-say{font-weight:800;min-height:1.6em;margin:.8em 0 0}
.vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.vcard{border:0;background:#fff;border-radius:18px;padding:14px;box-shadow:var(--shadow);text-align:left;min-height:110px;transition:transform .2s}
.vcard b{font-family:var(--head);font-size:1.3rem;display:block}
.vcard span{display:block;font-size:.92rem;color:var(--ink-2);margin-top:4px}
.vcard:not(.open) span{filter:blur(6px);user-select:none}
.vcard:not(.open)::after{content:'Tap to reveal 👀';display:block;font-size:.78rem;font-weight:800;color:var(--ember);margin-top:4px}
.vcard:hover{transform:rotate(-1.5deg)}
.video-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:22px;padding:18px;box-shadow:var(--shadow);margin-top:28px}
.video-card .vplay{flex:none;width:64px;height:64px;border-radius:18px;background:#e8434f;color:#fff;display:grid;place-items:center;font-size:1.8rem}
.video-card .fine{margin-top:.4em}
.exp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.exp-sources{background:#fff;border-radius:20px;padding:14px 18px;margin-top:22px;box-shadow:var(--shadow)}
.exp-sources ol{font-size:.95rem}
.safety-note{background:#fff8e1;border-radius:16px;padding:10px 14px;font-weight:700;font-size:.92rem;margin-bottom:12px}

.lightbox{position:fixed;inset:0;z-index:90;background:rgba(5,15,30,.92);display:grid;place-items:center;padding:20px;border:0;width:100%;cursor:zoom-out}
.lightbox img{max-height:80vh;width:auto;border-radius:10px;box-shadow:var(--shadow-lg)}
.lightbox p{color:#fff;font-weight:700;text-align:center;max-width:700px;margin:12px auto 0}

/* dialogs, toast, confetti */
dialog{border:0;border-radius:28px;padding:28px;max-width:min(560px,92vw);box-shadow:var(--shadow-lg);color:var(--ink)}
dialog::backdrop{background:rgba(8,24,44,.6);backdrop-filter:blur(3px)}
dialog[open]{animation:pop .4s}
.leave-ico{font-size:3rem;animation:spin 4s linear infinite;display:inline-block}
.video-warn{background:#fff1f1;border-radius:14px;padding:10px 12px;font-weight:700}
.leave-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 20px}
.badge{text-align:center;background:var(--sky-pale);border-radius:18px;padding:12px 6px;filter:grayscale(1);opacity:.5}
.badge.got{filter:none;opacity:1;background:#fff5d6;animation:pop .5s}
.badge .b-ico{font-size:2.4rem;display:block}
.badge b{display:block;font-size:.9rem}
.badge small{font-size:.75rem;color:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:95;background:#16324a;color:#fff;font-weight:800;padding:14px 22px;border-radius:999px;box-shadow:var(--shadow-lg);transition:transform .45s cubic-bezier(.3,1.4,.5,1);max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:96}

/* keyframes */
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes rise{from{opacity:0;transform:translateY(40px) rotate(4deg)}}
@keyframes wiggle{0%,90%,100%{transform:none}93%{transform:rotate(-3deg)}96%{transform:rotate(3deg)}}
@keyframes nudge{50%{transform:translateX(8px)}}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,16px)}}
@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes blink{50%{opacity:0}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes flyL{to{transform:translateX(-120%) rotate(-14deg);opacity:0}}
@keyframes flyR{to{transform:translateX(120%) rotate(14deg);opacity:0}}
@keyframes enter{from{transform:translateY(30px) scale(.9);opacity:0}}
@keyframes gulp{50%{transform:scale(1.12,.92)}}
@keyframes sparkle{0%{filter:blur(4px);opacity:0;transform:scale(.96)}100%{filter:none;opacity:1}}
@keyframes cloudpuff{0%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-2%,-2%)}}
@keyframes drop{from{transform:translateY(-30px);opacity:0}}
@keyframes chipIn{from{transform:scale(0) rotate(-10deg);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* responsive */
@media (max-width:1020px){
  .nav{display:none}
  .range-grid{grid-template-columns:repeat(2,1fr)}
  .drag-hint{display:none}
  .tools{margin-left:auto}
  .lab-card,.exp-grid{grid-template-columns:1fr}
  .lab-card:nth-child(even) .lab-text{order:0}
  .signposts{grid-template-columns:repeat(3,1fr);row-gap:44px}
}
@media (max-width:760px){
  body{font-size:17px}
  .section{padding:64px 0}
  .range-grid,.panel-grid{grid-template-columns:1fr}
  .range-card{min-height:300px}
  .format-pick{grid-template-columns:repeat(2,1fr)}
  .signposts{grid-template-columns:repeat(2,1fr)}
  .hero-copy{top:15%;right:16px}
  .hero::before{background:linear-gradient(180deg,rgba(9,32,58,.6) 0%,rgba(9,32,58,.3) 55%,rgba(9,32,58,.45) 100%)}
  .weather-dock{left:12px;right:12px;bottom:76px;max-width:none;padding:10px 12px 6px}
  .weather-btns button{min-width:0;flex:1;font-size:1.3rem;padding:.3em .2em}
  .weather-say{min-height:0;font-size:.85rem}
  .drag-hint{display:none}
  .lead{font-size:1.05rem}
  .cw-explain,.match-cols,.poster-cols,.stat-row{grid-template-columns:1fr}
  .pack-layout{grid-template-columns:1fr}
  .bp-body{width:160px;height:170px}
  .trail-layout{grid-template-columns:1fr}
  .trail-map{max-width:300px;margin:0 auto}
  .credits{columns:1}
  .gauges{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .gauge b{font-size:1.15rem}
  .height-chart{height:260px;gap:4px}
  .trifold-stage{padding:8px 0}
  .trifold{height:220px}
  .face .f-title{font-size:1rem}
  .face .f-ico{font-size:1.9rem}
  .brand{font-size:1.15rem}
  .exp-switch button{width:30px;height:30px;font-size:1rem}
  .exp-switch{gap:2px;padding:4px}
  .exp-close{padding:.45em .8em;font-size:.9rem}
  .exp-hero figcaption{display:none}
  .exp-bar{padding:10px}
  .badge-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}