:root{
  --bg:#1a2420; --bg-2:#0d1f15; --green:#2d5a3d; --green-2:#6b9b6c;
  --cream:#f4e4b8; --paper:#f4e4b8; --paper-2:#ede0b5;
  --paper-text:#2a261b; --ink:#e6dfc8; --ink-dim:#9aa28b;
  --warn:#e89a4a; --red:#c45a5a; --blue:#6a8aa8;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);overflow-x:hidden;}
body{font-family:'Kalam',cursive;-webkit-font-smoothing:antialiased;}

/* Each section snaps to center as it settles into view, so the scroll
   comes to rest on a checkpoint instead of stopping mid-card. Only the
   settle-point snaps (scroll-snap-stop isn't "always") so a fast flick
   can still sail past several checkpoints at once. */
html{
  scroll-snap-type:y mandatory;
  /* Reserves the fixed nav's height from the snap alignment calculation, so
     a centered section (especially a tall one, like the parks passport)
     gets pushed down for clearance instead of tucking flush under the nav. */
  scroll-padding-top:110px;
}

/* Respect OS-level "reduce motion": disable forced scroll-snap (a known
   vestibular-disorder trigger), the hiker's walk-cycle keyframe loop, the
   scroll-cue bounce, and every card/hover transition site-wide. Near-zero
   duration (not display:none/animation:none) so elements still land on
   their final state instantly instead of getting stuck mid-transition. */
@media (prefers-reduced-motion: reduce) {
  html{scroll-snap-type:none;}
  *, *::before, *::after{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* Mountain bg, fixed. 100dvh keeps the peak from jumping/gapping when mobile
   browser chrome shows/hides; vh stays as a fallback for older browsers. */
.mountain-bg{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:0;pointer-events:none;}
.mountain-bg svg{width:100%;height:100%;display:block;}

/* These repaint every scroll-driven frame (sky color, sun/moon position,
   star opacity) while sitting in the same SVG as several expensive
   feTurbulence/feDisplacementMap filters on the static mountain geometry.
   will-change hints the browser to composite them on their own layer so
   the filtered paths aren't re-rasterized alongside them each frame. */
#sky-sun, #sky-moon, #sky-stars{will-change:opacity,transform;}

/* Checkpoint flags planted along the trail (js/site.js initTrailFlags) —
   dim and flag-down until the hiker reaches that checkpoint, then flip to
   the same warm orange as the summit flag. */
.trail-flag .pole{stroke:#8a7a5a;stroke-width:1.4;transition:stroke .4s ease;}
.trail-flag .flag-pennant{fill:rgba(244,228,184,0.3);transition:fill .4s ease;}
.trail-flag.reached .pole{stroke:#c4a574;}
.trail-flag.reached .flag-pennant{fill:#e89a4a;}

/* Hiker, fixed positioned via JS, walks up trail. z-index sits below main's
   cards (z-index:2) so the hiker always passes behind card content instead
   of walking on top of it, but above the mountain-bg (z-index:0). */
.hiker-fixed{
  position:fixed;left:0;top:0;z-index:1;pointer-events:none;
  will-change:transform;
  transform-origin:center center;
  transition:transform 0.08s linear;
}

/* Fixed scrim behind the nav strip so the logo/links stay legible no matter
   what color the time-of-day sky gradient behind them currently is. */
/* Strong enough to keep the nav readable even when a tall card (e.g. the
   parks passport, dark-on-dark) scrolls flush underneath it — a text-shadow
   alone only helps against light backgrounds like the mountain art. */
.nav-scrim{
  position:fixed;inset:0 0 auto 0;height:120px;z-index:9;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 100%);
}

/* Nav */
.nav-strip{
  position:fixed;top:18px;left:30px;right:30px;
  top:calc(18px + env(safe-area-inset-top));
  left:calc(30px + env(safe-area-inset-left));
  right:calc(30px + env(safe-area-inset-right));
  display:flex;justify-content:space-between;align-items:center;
  z-index:10;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-dim);letter-spacing:0.12em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,0.8),0 0 10px rgba(0,0,0,0.4);
  /* Own backdrop (not just the page-wide .nav-scrim) so the nav stays
     legible even over a dark card that's scrolled up flush behind it —
     the text-shadow alone only helps against light backgrounds. */
  padding:8px 14px;border-radius:12px;
  background:rgba(10,15,10,0.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.nav-strip .logo{
  font-family:'Caveat',cursive;font-size:28px;color:var(--cream);
  letter-spacing:0;text-transform:none;line-height:1;transform:rotate(-2deg);
  text-shadow:0 2px 4px rgba(0,0,0,0.85),0 0 12px rgba(0,0,0,0.4);
}
.nav-strip .links{display:flex;gap:20px;}
.nav-strip a{
  color:var(--ink-dim);text-decoration:none;
  border-bottom:1px dashed transparent;padding-bottom:2px;
  transition:color .15s,border-color .15s;
}
.nav-strip a:hover{color:var(--cream);border-bottom-color:var(--cream);}

/* Altitude indicator (right rail) */
.altimeter{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:6;pointer-events:none;}
.altimeter .track{width:3px;height:260px;background:rgba(244,228,184,0.16);border-radius:2px;position:relative;margin:0 auto;}
.altimeter .progress{position:absolute;left:-2px;top:0;width:7px;background:var(--cream);border-radius:3px;height:0;box-shadow:0 0 8px rgba(244,228,184,0.4);}
.altimeter .label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-dim);text-align:center;margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,0.7);}
.altimeter .alt-now{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cream);text-align:center;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,0.7);}

/* Checkpoint ticks — one per section, positioned along the track by
   altitude fraction. Clickable to jump straight to that section. */
.altimeter .tick{
  appearance:none;padding:0;font:inherit;
  position:absolute;left:50%;top:0;
  transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;
  background:rgba(244,228,184,0.22);border:1.5px solid rgba(244,228,184,0.4);
  cursor:pointer;pointer-events:auto;
  transition:background .15s,border-color .15s,transform .15s;
}
.altimeter .tick:hover{transform:translate(-50%,-50%) scale(1.35);}
.altimeter .tick.active{
  background:var(--cream);border-color:var(--cream);
  box-shadow:0 0 9px rgba(244,228,184,0.65);
}
.altimeter .tick-label{
  position:absolute;right:100%;top:50%;margin-right:9px;
  transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.06em;
  color:var(--ink-dim);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.altimeter .tick:hover .tick-label,.altimeter .tick.active .tick-label{
  opacity:1;color:var(--cream);
}

/* Sections */
main{position:relative;z-index:2;}
section{
  min-height:90vh;min-height:90dvh;display:flex;align-items:center;
  padding:64px 60px;position:relative;
  scroll-snap-align:center;
}
section.right{justify-content:flex-end;}
section.left{justify-content:flex-start;}
section.center{justify-content:center;text-align:center;flex-direction:column;}

/* Keep right-aligned cards clear of the fixed altimeter rail (right:30px);
   .altimeter is display:none below 760px so no clearance is needed there. */
@media (min-width:761px){
  section.right{padding-right:150px;}
}

/* INTRO */
.intro{justify-content:flex-start;padding-top:18vh;}
/* Solid (not blurred) scrim behind the base-camp and summit text — both
   sit directly on the open sky (no card underneath), which cycles through
   bright dawn/dusk colors, and text-shadow alone isn't enough contrast
   against a light patch of sky. Shared between the two open-sky sections
   since neither has a paper card giving it a built-in backdrop already.
   Deliberately not backdrop-filter: this sits over the fixed sky gradient
   that's still animating on desktop scroll, and a blur here would mean
   resampling that gradient every frame it's on screen. */
.hero-scrim{
  background:rgba(10,15,10,0.42);
  border-radius:26px;
  padding:28px 40px 32px;
  max-width:640px;
}
.intro h1{font-family:'Caveat',cursive;font-size:120px;line-height:0.95;color:var(--cream);margin:0;text-shadow:3px 4px 0 rgba(0,0,0,0.5);transform:rotate(-2deg);}
.intro .tag{font-family:'Patrick Hand',cursive;font-size:22px;color:var(--ink);width:100%;max-width:560px;margin:20px auto 0;line-height:1.4;}
.intro .scroll-cue{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--green-2);margin-top:36px;text-shadow:0 1px 3px rgba(0,0,0,0.7);}
.intro .scroll-cue::after{content:" ↓";display:inline-block;margin-left:6px;animation:bounce 1.6s infinite ease-in-out;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
.intro .kicker-base{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--green-2);margin-bottom:16px;text-shadow:0 1px 3px rgba(0,0,0,0.7);}

/* SUMMIT */
.summit h2{font-family:'Caveat',cursive;font-size:130px;line-height:1;color:var(--cream);margin:0;text-shadow:3px 4px 0 rgba(0,0,0,0.5);transform:rotate(-1deg);}
.summit .tag{font-family:'Patrick Hand',cursive;font-size:22px;color:var(--ink);width:100%;max-width:600px;margin:40px auto 36px;line-height:1.4;}
.summit-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.summit-links a{
  display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--cream);
  font-family:'Patrick Hand',cursive;font-size:18px;padding:10px 22px;
  border:2px solid var(--cream);
  border-radius:14px 22px 18px 24px / 22px 14px 24px 18px;
  text-decoration:none;
  transition:transform .15s,background .15s;
  transform:rotate(-0.6deg);
}
.summit-links a:hover{background:rgba(244,228,184,0.1);transform:rotate(-1.4deg);}
.summit .kicker-base{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--green-2);margin-bottom:20px;}

/* CARD — paper index card */
.card{
  max-width:460px;width:100%;background:var(--paper);color:var(--paper-text);
  padding:28px 30px 26px;
  box-shadow:6px 9px 0 rgba(0,0,0,0.5),0 0 0 1px rgba(0,0,0,0.08);
  border-radius:2px;position:relative;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,0.025) 0,rgba(0,0,0,0.025) 1px,transparent 1px,transparent 28px),
    radial-gradient(circle at 20% 30%,rgba(0,0,0,0.04),transparent 60%),
    radial-gradient(circle at 80% 70%,rgba(0,0,0,0.035),transparent 50%);
  opacity:0;transform:translateY(50px) rotate(var(--rot,-1.2deg));
  transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.3,1);
}
.card.in{opacity:1;transform:translateY(0) rotate(var(--rot,-1.2deg));}

.card .tape{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:120px;height:24px;background:rgba(154,200,180,0.55);
  border:1px solid rgba(0,0,0,0.06);box-shadow:0 2px 0 rgba(0,0,0,0.15);
}
.card .tape.alt{
  background:rgba(232,154,74,0.5);left:auto;right:30px;
  transform:rotate(8deg);width:90px;
}
.card .pin{
  position:absolute;top:-9px;left:24px;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffc89a,#e89a4a 55%,#a05a1c 100%);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,0.25),3px 4px 4px rgba(0,0,0,0.4);
}
.card .pin.green{background:radial-gradient(circle at 30% 30%,#b8d49a,#6b9b6c 55%,#365a36 100%);}
.card .pin.red{background:radial-gradient(circle at 30% 30%,#ffaaaa,#c45a5a 55%,#7a2a2a 100%);}

.card .kicker{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:#6a5a3a;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center;
}
.card .kicker .marker{color:#1a2420;font-weight:600;}
.card h2{font-family:'Caveat',cursive;font-size:48px;line-height:0.92;margin:0 0 4px;color:#1a2420;font-weight:700;}
.card .sub{font-family:'Patrick Hand',cursive;font-size:18px;color:#5a4a2b;margin-bottom:14px;}
.card p{font-family:'Kalam',cursive;font-size:16px;line-height:1.5;color:#2a261b;margin:8px 0;}
.card p strong{font-weight:700;color:#1a2420;}
.card p.small{font-size:14px;color:#5a4a2b;}

.card .pct{display:flex;align-items:center;gap:12px;margin:14px 0 10px;}
.card .pct .bar{flex:1;height:9px;background:rgba(0,0,0,0.13);border-radius:5px;position:relative;overflow:hidden;}
.card .pct .bar i{position:absolute;left:0;top:0;bottom:0;background:#2d5a3d;border-radius:5px;}
.card .pct .num{font-family:'JetBrains Mono',monospace;font-size:14px;color:#1a2420;font-weight:600;}

.card a.btn{
  display:inline-flex;align-items:center;gap:6px;
  background:#1a2420;color:#f4e4b8;
  font-family:'Patrick Hand',cursive;font-size:17px;
  padding:7px 16px;border-radius:14px;
  text-decoration:none;margin-top:10px;
  transform:rotate(-1.5deg);transition:transform .15s;
  box-shadow:2px 3px 0 rgba(0,0,0,0.25);
}
.card a.btn:hover{transform:rotate(-2.5deg) scale(1.05);}
.card a.btn::after{content:"→";}

/* US tile map */
.us-map{
  display:grid;grid-template-columns:repeat(12,1fr);gap:3px;
  margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:9px;
  max-width:440px;
}
.us-map .cell{
  position:relative;
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:2px;color:#5a4a2b;background:rgba(0,0,0,0.07);
  font-weight:600;letter-spacing:0.04em;
  transition:transform .15s,background .15s;
}
.us-map .cell:hover{transform:scale(1.15);z-index:2;}
.us-map .cell.done{background:#2d5a3d;color:var(--cream);box-shadow:1px 1px 0 rgba(0,0,0,0.2);}
.us-map .cell.empty{background:transparent;pointer-events:none;}

/* Full state name on hover, same pattern as .pennant::after/.stamp::after.
   Clamped to the cell's own left/right edges (not centered) for the
   leftmost/rightmost grid columns (WA, ME, CA/HI/AK, ...) so the tooltip
   can't push past the card/viewport edge the way a centered one would. */
.us-map .cell::after{
  content:attr(data-full);
  position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#1a2420;color:#f4e4b8;font-family:'Patrick Hand',cursive;font-size:12px;
  padding:3px 8px;border-radius:6px;
  max-width:110px;width:max-content;white-space:normal;text-align:center;line-height:1.3;
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;
  box-shadow:0 3px 8px rgba(0,0,0,0.35);z-index:5;
}
.us-map .cell:nth-child(12n+1)::after{left:0;transform:translateX(0) translateY(4px);}
.us-map .cell:nth-child(12n)::after{left:auto;right:0;transform:translateX(0) translateY(4px);}
.us-map .cell:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}
.us-map .cell:nth-child(12n+1):hover::after{transform:translateX(0) translateY(0);}
.us-map .cell:nth-child(12n):hover::after{transform:translateX(0) translateY(0);}

/* Ballparks — team pennants */
.pennant-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:12px 8px;margin-top:14px;
}
.pennant{
  position:relative;cursor:default;
  transition:transform .15s;
  transform:rotate(-2deg);
}
.pennant:hover{transform:rotate(-4deg) scale(1.1);}
.pennant svg{display:block;width:100%;height:auto;filter:drop-shadow(1px 2px 0 rgba(0,0,0,0.2));}

.pennant::after{
  content:attr(data-full);
  position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#1a2420;color:#f4e4b8;font-family:'Patrick Hand',cursive;font-size:12px;
  padding:4px 9px;border-radius:6px;
  /* Capped + wrapping instead of nowrap: a long "Park — Team" label
     shouldn't be able to stretch the tooltip's (invisible, but still
     layout-contributing) box past the grid and inflate page width. */
  max-width:140px;width:max-content;white-space:normal;text-align:center;line-height:1.3;
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;
  box-shadow:0 3px 8px rgba(0,0,0,0.35);z-index:5;
}
.pennant:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}

/* #6a5a3a (not the original #8a7a5a) — that measured 3.32:1 against the
   paper background, under WCAG AA's 4.5:1 minimum for this text size. */
.row-chk{display:flex;align-items:center;gap:6px;color:#6a5a3a;line-height:1.25;}
.row-chk.done{color:#1a2420;}
.row-chk .box{
  display:inline-block;width:12px;height:12px;
  border:1.5px solid #5a4a2b;flex:0 0 12px;
  transform:rotate(-2deg);position:relative;
}
.row-chk.done .box{background:#2d5a3d;border-color:#2d5a3d;}
.row-chk.done .box::after{
  content:"✓";position:absolute;left:-1px;top:-9px;
  color:var(--cream);font-family:'Caveat',cursive;
  font-size:17px;line-height:1;font-weight:700;
}

/* Passport card — national parks */
.card.passport{
  background:#241811;color:#e8d9b0;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,0.02) 0,rgba(255,255,255,0.02) 1px,transparent 1px,transparent 28px),
    radial-gradient(circle at 15% 20%,rgba(255,255,255,0.05),transparent 55%),
    radial-gradient(circle at 85% 80%,rgba(0,0,0,0.3),transparent 55%);
  border:2px solid #8a6a2c;
  box-shadow:6px 9px 0 rgba(0,0,0,0.5),0 0 0 1px rgba(0,0,0,0.2),inset 0 0 0 4px rgba(201,162,39,0.18);
}
.card.passport .kicker{color:#c9a227;}
.card.passport .kicker .marker{color:#e8d9b0;}
.card.passport h2{color:#f0dfa8;}
.card.passport .sub{color:#b8a06a;}
.card.passport .pct .bar{background:rgba(255,255,255,0.1);}
.card.passport .pct .bar i{background:#c9a227;}
.card.passport .pct .num{color:#f0dfa8;}
.passport-emblem{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#e8c65a,#c9a227 55%,#8a6a2c 100%);
  color:#241811;display:flex;align-items:center;justify-content:center;
  font-size:16px;box-shadow:0 3px 5px rgba(0,0,0,0.45),inset -2px -2px 0 rgba(0,0,0,0.2);
}

.parks-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:14px 8px;margin-top:16px;
}
.stamp{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  position:relative;cursor:default;
}
.stamp .stamp-icon{
  width:34px;height:34px;border-radius:50%;
  /* 0.4/0.55 alpha (not the original 0.28/0.35) — those measured under
     4.5:1 (text) / 3:1 (icon outline) against the passport's dark
     background, failing WCAG AA. */
  border:1.5px dashed rgba(232,217,176,0.4);
  display:flex;align-items:center;justify-content:center;
  color:rgba(232,217,176,0.4);
  transition:transform .15s,border-color .15s,color .15s,background .15s;
}
.stamp.done .stamp-icon{
  border:1.5px solid #c9a227;background:rgba(201,162,39,0.1);
  color:#e8c65a;transform:rotate(-6deg);
}
.stamp:hover .stamp-icon{transform:scale(1.15) rotate(-6deg);}
.stamp-code{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.06em;
  color:rgba(232,217,176,0.55);
}
.stamp.done .stamp-code{color:#e8d9b0;}

.stamp::after{
  content:attr(data-full);
  position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#150e08;color:#e8d9b0;font-family:'Patrick Hand',cursive;font-size:12px;
  padding:4px 9px;border-radius:6px;
  max-width:150px;width:max-content;white-space:normal;text-align:center;line-height:1.3;
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;
  box-shadow:0 3px 8px rgba(0,0,0,0.45);z-index:5;
  border:1px solid rgba(201,162,39,0.4);
}
.stamp:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}

/* NH 48 list */
.peaks-list{
  margin-top:10px;font-family:'Kalam',cursive;font-size:13px;
  columns:2;column-gap:14px;
}
.peaks-list .row-chk{break-inside:avoid;}

/* Projects mini tiles */
.proj-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.proj-tiles .ptile{
  background:#1a2420;color:#f4e4b8;
  padding:14px 12px;border-radius:6px;
  text-decoration:none;
  transition:transform .15s;
}
.proj-tiles .ptile:hover{transform:rotate(-1deg) scale(1.04);}
.proj-tiles .ptile .ttl{font-family:'Caveat',cursive;font-size:26px;line-height:1.15;margin-bottom:4px;white-space:nowrap;}
.proj-tiles .ptile .desc{font-family:'Patrick Hand',cursive;font-size:13px;color:#9aa28b;margin-top:2px;}

@media (max-width:760px){
  /* Without scroll-snap-stop, a fast swipe can sail past several cards
     before settling (see the comment on html{scroll-snap-type} above) —
     desirable on desktop's smooth wheel-scroll, but on mobile it reads as
     cards drifting/floating past rather than a deliberate one-card-per-
     swipe motion. Forcing every section to be a hard stop makes each
     swipe advance exactly one card. */
  section{scroll-snap-stop:always;padding:60px 24px;}
  .intro{padding-top:22vh;}
  .hero-scrim{padding:20px 22px 24px;border-radius:20px;}
  .intro h1{font-size:68px;}
  .intro .tag{font-size:18px;}
  .summit h2{font-size:64px;}
  /* !important: several cards set a wider desktop max-width via inline
     style (e.g. style="max-width:560px"), which otherwise beats this
     media-query rule regardless of specificity and clips content on
     narrow viewports instead of letting it shrink to fit. */
  .card{max-width:100%!important;}
  .card h2{font-size:36px;}
  /* The parks passport (63 stamps) runs ~1.5x the height of a typical
     mobile viewport. With scroll-snap-stop:always now forcing a hard
     landing on every section, an oversized card would either get clipped
     or force the swipe-per-card rhythm to break. Instead it becomes its
     own internally-scrollable region: one swipe lands you on the card,
     you scroll inside it to see the full grid, then swiping again at the
     bottom hands off to the page scroll and advances to the next card. */
  .card.passport{max-height:82vh;max-height:82dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:46px;}
  /* The star emblem normally overlaps the card's top edge (like a wax
     seal), which the new overflow:auto above would clip — pulled fully
     inside the box on mobile instead, with the card's extra padding-top
     (above) giving it clearance from the kicker text below it. */
  .card.passport .passport-emblem{top:8px;}
  .altimeter{display:none;}
  .nav-strip{font-size:9px;left:calc(18px + env(safe-area-inset-left));right:calc(18px + env(safe-area-inset-right));}
  .nav-strip .logo{font-size:22px;}
  .nav-strip .links{gap:14px;}
  .us-map{font-size:7px;}
  .peaks-list{columns:1;}

  /* backdrop-filter forces a continuous blur-resample of everything
     scrolling underneath this fixed bar, every frame it's on screen
     (i.e. always) — one of the most well-known mobile scroll-jank
     causes. Dropped on mobile in favor of a more opaque solid
     background, which the .nav-scrim gradient behind it already helps
     keep legible without the blur. */
  .nav-strip{background:rgba(10,15,10,0.82);-webkit-backdrop-filter:none;backdrop-filter:none;}

  /* The feTurbulence/feDisplacementMap "rough edge" filters (7 of them)
     on the mountain art are expensive to rasterize on mobile GPUs, and
     sit in a position:fixed layer behind the whole page — a candidate
     for continuous repaint cost during scroll. Disabled on mobile;
     the shapes still render, just with clean edges instead of the
     hand-drawn wobble. */
  .mountain-bg svg [filter]{filter:none;}
}

@media (max-width:420px){
  .nav-strip .links{gap:10px;font-size:8px;}
}