@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Kalam:wght@300;400;700&family=Patrick+Hand&family=JetBrains+Mono:wght@400;500&display=swap');

: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;}

/* 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;}
.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{
  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;}

/* 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;
  filter:grayscale(1) contrast(0.9) brightness(1.35);
  transition:filter .15s,transform .15s;
  transform:rotate(-2deg);
}
.pennant.done{filter:none;}
.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){
  section{padding:60px 24px;}
  .intro{padding-top:22vh;}
  .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;}
  .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;}
}

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