/* ==========================================================================
   STRIDE TOGETHER: THE WALKING WORLD, elevated build
   All component colors come from the design tokens below. The only literal
   hex values outside :root live in the hand-authored SVG artwork inside
   index.html, which is the illustrated world itself, not a UI component.
   No em dashes and no en dashes anywhere in this file.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --navy: #092242;
  --navy-deep: #071a33;
  --green: #03AE37;
  --green-deep: #078f31;
  --green-ink: #067a2b;        /* dark green for text links on white, AA */
  --gold: #FFCD29;
  --gold-deep: #edb414;
  --white: #ffffff;
  --ink: #1A1A1A;
  --tint: #DCE6F5;
  --gray-soft: #EAEAEA;
  --body-mut: #4b5566;
  --grass: #4a9a50;
  --road: #d9dade;
  --road-edge: #b9bfc7;
  --wood: #8a5c2f;
  --wood-lit: #b07f45;
  --wood-deep: #6f4a24;
  --cream: #fff6e2;
  --dusk: #0b1e38;

  /* People: skin and hair tokens for the illustrated walkers. The
     community is about 80 percent Black women, and the little walkers
     reflect that: a range of brown skin tones and natural hairstyles. */
  --skin-deep: #5C3A21;
  --skin-medium: #7A4A2B;
  --skin-warm: #8D5524;
  --skin-golden: #A9714B;
  --skin-fair: #f3d4ad;
  --hair-noir: #221812;
  --hair-espresso: #3B2A1E;
  --hair-navy: #0b2a52;

  /* Alpha tints (navy-tinted, never gray or black) */
  --nav-bg: rgba(18, 47, 87, 0.92);
  --navy-a08: rgba(9,34,66,0.08);
  --navy-a12: rgba(9,34,66,0.12);
  --navy-a16: rgba(9,34,66,0.16);
  --navy-a35: rgba(9,34,66,0.35);
  --navy-a45: rgba(9,34,66,0.45);
  --navy-a55: rgba(9,34,66,0.55);
  --backdrop: rgba(7,26,51,0.62);
  --tint-a12: rgba(220,230,245,0.12);
  --tint-a60: rgba(220,230,245,0.6);
  --green-a10: rgba(3,174,55,0.10);
  --green-a18: rgba(3,174,55,0.18);
  --green-a35: rgba(3,174,55,0.35);
  --gold-a30: rgba(255,205,41,0.30);
  --white-a25: rgba(255,255,255,0.25);
  --white-a55: rgba(255,255,255,0.55);
  --white-a75: rgba(255,255,255,0.75);

  /* Type */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-hero: clamp(2.6rem, 3.8vw, 3.6rem);
  --fs-h2: clamp(1.9rem, 2.8vw, 2.4rem);
  --fs-label: clamp(2.1rem, 3.6vw, 3.1rem);
  --fs-card: 1.3rem;
  --fs-lead: 1.02rem;
  --fs-body: 0.95rem;
  --fs-cap: 0.8rem;
  --fs-micro: 0.72rem;

  /* Space (8px grid) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  /* Radii */
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  /* Depth (navy-tinted only) */
  --shadow-soft: 0 2px 6px rgba(9,34,66,0.10), 0 10px 26px rgba(9,34,66,0.12);
  --shadow-lift: 0 4px 10px rgba(9,34,66,0.14), 0 20px 48px rgba(9,34,66,0.18);

  --nav-h: 64px;
}

/* ---------- Reset and base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--dusk); /* dusk navy beyond the page edges */
  line-height: 1.6;
  font-size: var(--fs-body);
  overflow-x: clip;
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--s-1); top: -60px; z-index: 100;
  background: var(--navy); color: var(--white);
  padding: 10px 16px; border-radius: 0 0 10px 10px; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Focus: gold ring with a navy inner keyline so it reads on any surface */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--navy);
  border-radius: 6px;
}

/* ---------- Nav (the dusk sky band) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tint-a12);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; min-height: var(--nav-h);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 8px clamp(12px, 4vw, 40px);
}
.js .nav-inner { flex-wrap: nowrap; }

/* Supplied white wordmark: transparent 1024 square with the mark in the
   middle (alpha bbox 113,291 to 905,766 -> visible 792x475). The crop frame
   trims the transparent padding; the white lettering sits directly on the
   navy band, no chip needed. Never stretched, never recolored. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.logo-crop {
  --lh: 40px; /* rendered height of the wordmark itself */
  position: relative; overflow: hidden;
  width: calc(var(--lh) * 1.667);
  height: var(--lh);
}
.logo-crop img {
  position: absolute; max-width: none; height: auto;
  width: calc(var(--lh) * 2.156);
  left: calc(var(--lh) * -0.238);
  top: calc(var(--lh) * -0.613);
}
.logo-crop--footer { --lh: 48px; }

.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-left: auto; }
.nav-links a {
  color: var(--tint); text-decoration: none;
  font-size: 0.9rem; font-weight: 500;
  padding: 4px 2px;
  transition: color 180ms ease;
}
.nav-links a:hover { color: var(--white); }

.nav-burger {
  display: none;
  border: 0; background: none; color: var(--tint); cursor: pointer;
  width: 42px; height: 42px; border-radius: 10px;
  place-items: center; margin-left: auto;
}
.nav-burger:hover { color: var(--white); }
.nav-burger svg { width: 24px; height: 24px; }

.btn-join {
  flex: none;
  background: var(--green); color: var(--navy);
  font-weight: 700; font-size: 0.84rem; text-decoration: none;
  padding: 10px 18px; border-radius: var(--radius-pill);
  box-shadow: 0 2px 10px var(--navy-a35);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.btn-join:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--navy-a45); }

@media (max-width: 879px) {
  .js .nav-burger { display: grid; }
  .js .nav-links {
    display: none;
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-deep);
    border-bottom: 1px solid var(--tint-a12);
    box-shadow: var(--shadow-lift);
    padding: var(--s-1) 0 var(--s-2);
    margin: 0;
  }
  .js .nav-links.is-open { display: flex; }
  .js .nav-links a { padding: 14px clamp(16px, 6vw, 40px); font-size: 1rem; }
}
@media (min-width: 880px) {
  .js .nav-links { display: flex; }
}

/* ---------- Scene scaffolding: the continuous world ---------- */
.scene {
  position: relative;
  overflow: hidden;
  background-color: var(--grass);
  /* Fallback road stripe so the road never breaks between the art scenes */
  background-image: linear-gradient(
    90deg,
    transparent calc(50% - 26px),
    var(--road-edge) calc(50% - 26px), var(--road-edge) calc(50% - 21px),
    var(--road) calc(50% - 21px), var(--road) calc(50% + 21px),
    var(--road-edge) calc(50% + 21px), var(--road-edge) calc(50% + 26px),
    transparent calc(50% + 26px)
  );
}
.scene--hero { background-image: none; }
.scene-art { display: block; width: 200%; margin-left: -50%; height: auto; }
.scene-overlay { position: relative; z-index: 2; }

@media (min-width: 880px) {
  .scene--hero      { aspect-ratio: 1440 / 1000; }
  .scene--how       { aspect-ratio: 1440 / 900; }
  .scene--momentum  { aspect-ratio: 1440 / 820; }
  .scene--community { aspect-ratio: 1440 / 900; }
  .scene--stories   { aspect-ratio: 1440 / 620; }
  .scene-art { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
  .scene-overlay { position: static; }
  .pin { position: absolute; margin: 0; }
}
@media (max-width: 879px) {
  .scene-overlay {
    display: flex; flex-direction: column; align-items: center;
    gap: 18px; padding: 26px 20px 44px;
  }
  .pin { position: static; }

  /* Small screens: the hero is info-first. The overlay is pulled up over
     the artwork so only a band of dusk sky shows above the hero card and
     the h1, subhead, and both CTAs are on screen without scrolling. The
     world continues behind and below the card. 138.9vw is the rendered
     height of the hero art: 200vw wide at a 1440 x 1000 viewBox. */
  .scene--hero .scene-overlay {
    margin-top: calc(70px - 138.9vw);
  }
  /* The hero scene also carries the fallback road stripe down here, so
     the road stays visually connected where the overlay runs past the
     bottom edge of the artwork. */
  .scene--hero {
    background-image: linear-gradient(
      90deg,
      transparent calc(50% - 26px),
      var(--road-edge) calc(50% - 26px), var(--road-edge) calc(50% - 21px),
      var(--road) calc(50% - 21px), var(--road) calc(50% + 21px),
      var(--road-edge) calc(50% + 21px), var(--road-edge) calc(50% + 26px),
      transparent calc(50% + 26px)
    );
  }
}

/* The green route line that draws itself down the road while you scroll.
   Without JavaScript, or under reduced motion, it renders fully drawn. */
.route-draw {
  fill: none;
  stroke: var(--green);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  opacity: 0.8;
}
.scene.is-anchored .route-draw {
  opacity: 1;
  stroke-width: 9;
  filter: drop-shadow(0 0 6px var(--green-a35));
}

/* ---------- Section display labels on the grass ---------- */
.section-label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--white);
  text-shadow: 0 3px 18px var(--navy-a45), 0 1px 4px var(--navy-a35);
}
.section-label .label-cue {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); background: var(--navy);
  padding: 4px 12px; border-radius: var(--radius-pill);
  margin-bottom: 8px;
}
.section-label .label-cue { display: block; width: max-content; max-width: 100%; }

.mile-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--navy);
  font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.02em;
  padding: 7px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); flex: none;
  box-shadow: 0 0 0 3px var(--green-a18);
  display: inline-block;
}

/* ---------- Heat-map hotspots: the road is the navigation ---------- */
/* Hidden until JavaScript upgrades the page; the same content then lives
   in the in-flow panels below each scene. */
.hotspot {
  display: none;
  border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
  justify-items: center; gap: 10px;
  padding: 6px;
}
.js .hotspot { display: grid; }
/* Each marker sits in a soft white light pool with a white keyline and a
   navy grounding shadow, so the green (or gold) pulse never sits directly
   on raw green grass. This base styling is animation-independent: with
   reduced motion the static marker keeps the same contrast. */
.hs-dot {
  position: relative;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--green);
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 10px var(--white-a55),
    0 0 0 17px var(--white-a25),
    0 0 22px var(--green-a35),
    0 3px 12px var(--navy-a35);
}
.hs-dot::before, .hs-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--green);
  box-shadow: 0 0 0 2px var(--white-a75);
  opacity: 0;
}
.hotspot--gold .hs-dot {
  background: var(--gold);
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 10px var(--white-a55),
    0 0 0 17px var(--white-a25),
    0 0 22px var(--gold-a30),
    0 3px 12px var(--navy-a35);
}
.hotspot--gold .hs-dot::before, .hotspot--gold .hs-dot::after { border-color: var(--gold); }
.hotspot--gold .hs-tag .dot { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-a30); }
.hs-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--navy);
  font-size: var(--fs-cap); font-weight: 600;
  padding: 7px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hotspot:hover .hs-tag, .hotspot:focus-visible .hs-tag {
  transform: translateY(-2px); box-shadow: var(--shadow-lift);
}
.hotspot:hover .hs-dot, .hotspot:focus-visible .hs-dot {
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 12px var(--white-a55),
    0 0 0 20px var(--white-a25),
    0 0 30px var(--green-a35),
    0 3px 12px var(--navy-a35);
}
.hotspot--gold:hover .hs-dot, .hotspot--gold:focus-visible .hs-dot {
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 12px var(--white-a55),
    0 0 0 20px var(--white-a25),
    0 0 30px var(--gold-a30),
    0 3px 12px var(--navy-a35);
}
@media (prefers-reduced-motion: no-preference) {
  .hs-dot::before { animation: hsPing 2.8s ease-out infinite; }
  .hs-dot::after  { animation: hsPing 2.8s ease-out 1.4s infinite; }
  @keyframes hsPing {
    0%   { transform: scale(1);   opacity: 0.75; }
    100% { transform: scale(3.1); opacity: 0; }
  }
}

/* ---------- Stop panels: normal sections without JS, dialogs with JS ---- */
.stop-panel {
  background-color: var(--grass);
  background-image: linear-gradient(
    90deg,
    transparent calc(50% - 26px),
    var(--road-edge) calc(50% - 26px), var(--road-edge) calc(50% - 21px),
    var(--road) calc(50% - 21px), var(--road) calc(50% + 21px),
    var(--road-edge) calc(50% + 21px), var(--road-edge) calc(50% + 26px),
    transparent calc(50% + 26px)
  );
  padding: var(--s-5) 20px var(--s-6);
}
.stop-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
}
.js .stop-panel { display: none; }
.js .stop-panel.is-open {
  display: block;
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 24px));
  background: none; padding: 0;
  z-index: 80;
}
.js .stop-panel.is-open .stop-card {
  max-height: min(84vh, 720px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion: no-preference) {
  .js .stop-panel.is-open { animation: popIn 220ms ease-out; }
  @keyframes popIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
}

/* Body copy inside the About Us and Legal stop panels. The card already
   scrolls when a dialog runs long; this just keeps the prose readable. */
.stop-prose p { color: var(--body-mut); max-width: 58ch; margin-bottom: var(--s-2); }
.stop-prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card); letter-spacing: 0.02em; line-height: 1.05;
  color: var(--navy);
  margin: var(--s-3) 0 6px;
}
.stop-prose .stop-note { margin-bottom: 0; }
.stop-prose + .stop-cta-row { margin-top: var(--s-2); }

.stop-close {
  display: none;
  position: absolute; top: 14px; right: 14px; z-index: 2;
  border: 0; cursor: pointer;
  background: var(--gray-soft); color: var(--navy);
  font: inherit; font-weight: 600; font-size: var(--fs-cap);
  padding: 8px 14px; border-radius: var(--radius-pill);
  transition: background 160ms ease, transform 160ms ease;
}
.stop-close:hover { background: var(--tint); transform: translateY(-1px); }
.js .stop-close { display: inline-block; }

.stop-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-cap); font-weight: 600; color: var(--navy);
  background: var(--gray-soft);
  padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: var(--s-2);
}
#panel-challenge .stop-kicker .dot, #panel-closing .stop-kicker .dot {
  background: var(--gold); box-shadow: 0 0 0 3px var(--gold-a30);
}
.stop-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2); letter-spacing: 0.02em; line-height: 1.02;
  color: var(--navy);
  margin-bottom: var(--s-1);
}
.stop-lead { color: var(--body-mut); max-width: 58ch; margin-bottom: var(--s-3); }
.stop-cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  margin-top: var(--s-3);
}
.learn-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--green-ink); font-weight: 600; font-size: 0.9rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.learn-link:hover { color: var(--navy); }
.stop-note { margin-top: var(--s-2); font-size: var(--fs-cap); color: var(--body-mut); }

/* ---------- Buttons ---------- */
.btn-green {
  display: inline-block; background: var(--green); color: var(--navy);
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  padding: 13px 26px; border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px var(--green-a35), 0 2px 6px var(--navy-a12);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.btn-green:hover { background: var(--gold); transform: translateY(-1px); }
.btn-gold {
  display: inline-block; background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  text-align: center; text-wrap: balance;
  padding: 14px 30px; border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px var(--navy-a35), 0 2px 6px var(--navy-a16);
  transition: transform 180ms ease, filter 180ms ease;
}
.btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---------- Chips (How It Works) ---------- */
.chip-grid { display: grid; gap: var(--s-2); }
.chip {
  background: var(--white);
  border: 1px solid var(--gray-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
  display: flex; gap: 12px; align-items: flex-start;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.chip-icon {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--green-a10); color: var(--green-ink);
}
.chip-icon svg { width: 22px; height: 22px; }
.chip h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card); letter-spacing: 0.02em; line-height: 1;
  margin-bottom: 4px;
}
.chip p { font-size: 0.85rem; line-height: 1.5; color: var(--body-mut); }

/* ---------- Challenge components ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.stat-chip {
  flex: 1 1 180px;
  background: var(--white); border: 1px solid var(--gray-soft);
  border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--shadow-soft);
  text-align: center;
}
.stat-chip .stat-num {
  font-family: var(--font-display);
  font-size: 2rem; line-height: 1; letter-spacing: 0.02em;
  color: var(--navy);
}
.stat-chip .stat-num em { font-style: normal; color: var(--green-ink); }
.stat-chip .stat-cap { font-size: 0.78rem; color: var(--body-mut); margin-top: 4px; }

.track30 { display: flex; gap: 3px; margin: var(--s-1) 0 4px; }
.track30 span {
  flex: 1 1 4px; height: 16px; border-radius: 3px;
  background: var(--gray-soft); min-width: 0;
}
.track30 .is-done { background: var(--green); }
.track30 .is-today { background: var(--gold); }
.track-cap { font-size: var(--fs-cap); color: var(--body-mut); margin-bottom: var(--s-3); }

.medal-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--gray-soft);
  border-radius: var(--radius);
  padding: 16px 20px 12px;
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--s-2);
}
.medal { display: grid; justify-items: center; gap: 6px; transition: transform 200ms ease; }
.medal:hover { transform: translateY(-3px); }
.medal-coin {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, var(--cream), var(--gold) 58%, var(--gold-deep) 100%);
  border: 3px solid var(--gold-deep);
  box-shadow: 0 3px 8px var(--navy-a16), inset 0 2px 4px rgba(255,255,255,0.55);
  color: var(--wood-deep);
}
.medal-coin svg { width: 26px; height: 26px; }
.medal-name {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy); text-align: center;
}

/* ---------- Community components ---------- */
.rhythm { list-style: none; display: grid; gap: 10px; margin-bottom: var(--s-3); }
.rhythm li { display: flex; gap: 10px; align-items: flex-start; color: var(--body-mut); font-size: 0.9rem; }
.rhythm .dot { margin-top: 7px; }

.gallery {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: var(--s-2);
}
.g-item figure { margin: 0; }
.g-item img, .g-item .g-ph {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  display: block;
  background: var(--grass);
}
.g-item figcaption { font-size: 0.75rem; color: var(--body-mut); margin-top: 6px; }
.invite-line {
  background: var(--green-a10);
  border: 1px dashed var(--green);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.85rem; color: var(--navy);
  margin-bottom: var(--s-2);
}
.invite-line a { color: var(--green-ink); font-weight: 600; }

/* ---------- Testimonies (Wall of Wins) ---------- */
.wins {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.win-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 22px 18px 16px;
  margin: 0;
}
.win-card::before { /* the pin holding the note to the board */
  content: ""; position: absolute; top: -6px; left: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--green);
  box-shadow: 0 2px 4px var(--navy-a35);
}
.win-card blockquote {
  font-size: 0.98rem; font-weight: 600; line-height: 1.45;
  color: var(--navy); margin-bottom: 10px;
}
.win-card figcaption {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-cap); color: var(--body-mut);
}
.win-card .q-av {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--green); color: var(--white);
}
.win-card .q-av svg { width: 14px; height: 14px; }
/* Member avatar: an illustrated walker portrait cropped into the circle.
   Swap the svg for an img when a real photo arrives; it fills the circle. */
.win-card .q-av--member svg { width: 20px; height: 22px; }
.win-card .q-av img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.win-card--invite {
  border: 1px dashed var(--green);
  background: var(--green-a10);
}
.win-card--invite::before { background: var(--gold); }
.win-card--invite p { font-size: 0.88rem; color: var(--navy); }
.win-card--invite .hint { font-size: 0.75rem; color: var(--body-mut); margin-top: 8px; }

/* ---------- Why Walking (always in flow, the learn-more anchor) ---------- */
.whywalk {
  background-color: var(--grass);
  background-image: linear-gradient(
    90deg,
    transparent calc(50% - 26px),
    var(--road-edge) calc(50% - 26px), var(--road-edge) calc(50% - 21px),
    var(--road) calc(50% - 21px), var(--road) calc(50% + 21px),
    var(--road-edge) calc(50% + 21px), var(--road-edge) calc(50% + 26px),
    transparent calc(50% + 26px)
  );
  padding: var(--s-6) 20px var(--s-7);
}
.whywalk:focus { outline: none; }
.why-inner { max-width: 880px; margin: 0 auto; }
.why-head { text-align: center; margin-bottom: var(--s-4); }
.why-head .label-cue {
  display: inline-block; font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); background: var(--navy);
  padding: 4px 12px; border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.why-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-label); letter-spacing: 0.02em; line-height: 1;
  color: var(--white);
  text-shadow: 0 3px 18px var(--navy-a45), 0 1px 4px var(--navy-a35);
}
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-2);
}
.why-card { /* a wood-framed trail marker */
  background: var(--white);
  border: 3px solid var(--wood-lit);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.why-card .chip-icon { margin-bottom: 10px; }
.why-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card); letter-spacing: 0.02em; line-height: 1;
  margin-bottom: 6px;
}
.why-card p { font-size: 0.85rem; line-height: 1.55; color: var(--body-mut); }
.founder-line {
  max-width: 620px; margin: var(--s-4) auto 0;
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(20px, 3vw, 32px);
  color: var(--tint);
}
.founder-line blockquote { font-size: 1.02rem; line-height: 1.6; margin-bottom: 10px; color: var(--white); }
.founder-line cite { font-style: normal; font-size: var(--fs-cap); color: var(--gold); }

/* ---------- Hero ---------- */
.hero-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 38px);
  box-shadow: var(--shadow-lift);
  max-width: 480px;
}
.hero-card .eyebrow {
  display: block; font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green-ink); margin-bottom: 10px;
}
.hero-card h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.98; letter-spacing: 0.01em;
  color: var(--navy);
  margin-bottom: 10px;
  text-wrap: balance;
}
.hero-card .subhead {
  font-size: 0.98rem; color: var(--body-mut);
  margin-bottom: 18px; max-width: 36ch;
}
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* The hero's single green CTA carries the card's action weight alone,
   so it gets the primary button size. Calm, not shouty. */
.hero-cta-row .btn-green { padding: 14px 30px; font-size: 1rem; }
.hero-meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 14px;
}
.step-counter {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  background: var(--navy); color: var(--white);
  border-radius: 14px; padding: 9px 16px 8px;
  box-shadow: var(--shadow-soft);
}
.step-counter .sc-num {
  font-family: var(--font-display);
  font-size: 1.45rem; line-height: 1; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.step-counter .sc-num .sc-goal { color: var(--gold); }
.step-counter .sc-cap {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tint); margin-top: 3px;
}
.step-counter .sc-live {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .step-counter .sc-live { animation: livePulse 1.8s ease-in-out infinite; }
  @keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--green-a35); }
    60% { box-shadow: 0 0 0 5px rgba(3,174,55,0); }
  }
}
.hero-support { margin-top: 12px; font-size: 0.78rem; color: var(--body-mut); }
.hero-photo {
  width: min(350px, 78vw);
  border-radius: 58% 42% 55% 45% / 52% 49% 51% 48%;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,0.85);
  box-shadow: var(--shadow-lift);
  transform: rotate(-2deg);
  background: var(--navy);
}
@media (min-width: 880px) { .hero-photo { width: min(350px, 27vw); } }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 10 / 9; }

/* ---------- Pins: where things sit in the world on wide screens ---------- */
@media (min-width: 880px) {
  /* The hero card sits high so the h1, subhead, the green CTA, and the
     step counter are all on screen before any scrolling. The world art
     may run below the fold; the info may not. */
  .pin--hero-card   { left: 6%;  top: 6%; }
  .pin--hero-photo  { right: 5.5%; top: 12%; }
  .pin--mile-0      { left: 22%; top: 84%; }

  .pin--how-label   { left: 7%;  top: 6%; }
  .pin--hs-how      { left: 26%; top: 36%; }

  .pin--mom-label   { right: 7%; top: 6%; text-align: right; }
  .pin--hs-challenge{ left: 60%; top: 47%; }

  .pin--com-label   { left: 7%;  top: 5%; }
  .pin--hs-community{ left: 46%; top: 57%; }

  .pin--sto-label   { right: 7%; top: 8%; text-align: right; }
  .pin--hs-stories  { left: 44%; top: 47%; }

  .pin--hs-closing  { left: 50%; top: 12%; transform: translateX(-50%); }
}

/* ---------- Footer scene ---------- */
.scene--footer { background-color: var(--dusk); background-image: none; }
.scene--footer .scene-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
}
.footer-flow {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-5) 20px 40px;
  gap: 26px;
}
@media (min-width: 880px) { .footer-flow { padding-top: 300px; } }
.fp-mark {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--white);
  padding: 8px 18px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.fp-mark svg { width: 16px; height: 16px; }

.signpost { position: relative; width: min(460px, 92vw); padding: 12px 0 26px; }
.sp-post {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 16px; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--wood), var(--wood-lit) 45%, var(--wood-deep));
  border-radius: 6px;
  box-shadow: 0 6px 16px var(--navy-a35);
}
.sp-post::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  width: 66px; height: 16px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--navy-a45), transparent);
}
.signpost nav { position: relative; display: grid; gap: 12px; }
.plank {
  position: relative;
  display: block; width: 58%;
  font-family: var(--font-display);
  font-size: 1.25rem; letter-spacing: 0.06em; line-height: 1;
  color: var(--cream); text-decoration: none; text-align: center;
  padding: 11px 20px;
  background: linear-gradient(180deg, var(--wood-lit), var(--wood));
  box-shadow: 0 4px 10px var(--navy-a35), inset 0 1px 0 rgba(255,240,210,0.35);
  transition: transform 180ms ease, filter 180ms ease;
}
.plank:hover { filter: brightness(1.12); }
.plank::before, .plank::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: var(--wood-deep); transform: translateY(-50%);
  box-shadow: inset 0 1px 1px var(--navy-a45);
}
.plank--l {
  margin-right: auto; transform: rotate(-1.6deg);
  clip-path: polygon(0 50%, 7% 0, 100% 0, 100% 100%, 7% 100%);
  padding-left: 30px;
}
.plank--l::before { left: 12%; } .plank--l::after { right: 5%; }
.plank--l:hover { transform: rotate(-1.6deg) translateY(-1px); }
.plank--r {
  margin-left: auto; transform: rotate(1.6deg);
  clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%);
  padding-right: 30px;
}
.plank--r::before { left: 5%; } .plank--r::after { right: 12%; }
.plank--r:hover { transform: rotate(1.6deg) translateY(-1px); }

.subfooter {
  margin-top: 30px;
  display: grid; justify-items: center; gap: 12px;
  text-align: center; color: var(--tint);
}
.subfooter .tagline {
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: 0.08em; color: var(--gold);
}
/* Newsletter signup: a plain GET form to the Substack subscribe page.
   No embed script, no iframe. Styled to sit calmly on the dusk band. */
.subfooter .newsletter { display: grid; justify-items: center; gap: 10px; }
.nl-label { font-size: var(--fs-cap); color: var(--tint); }
.nl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nl-input {
  width: min(280px, 72vw);
  padding: 11px 16px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 0.9rem;
}
.nl-input::placeholder { color: var(--body-mut); }
.nl-btn {
  border: 0; cursor: pointer;
  background: var(--green); color: var(--navy);
  font: inherit; font-weight: 700; font-size: 0.9rem;
  padding: 11px 22px; border-radius: var(--radius-pill);
  transition: background 180ms ease, transform 180ms ease;
}
.nl-btn:hover { background: var(--gold); transform: translateY(-1px); }
.nl-input:focus-visible, .nl-btn:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}
.subfooter .dev-note { color: var(--tint-a60); }
.subfooter .social-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 20px; font-size: 0.85rem;
}
.subfooter .social-row a { color: var(--tint); text-decoration: none; }
.subfooter .social-row a:hover { color: var(--white); text-decoration: underline; }
.subfooter .fineprint { font-size: var(--fs-micro); color: var(--tint-a60); max-width: 62ch; }

/* ---------- Wayfinder: you are here ---------- */
.wayfinder {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  display: none; align-items: center; gap: 8px;
  background: var(--navy); color: var(--white);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em;
  padding: 8px 14px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  pointer-events: none;
}
.js .wayfinder.is-live { display: inline-flex; }
.wayfinder svg { width: 14px; height: 14px; color: var(--green); flex: none; }

/* ---------- Backdrop for the dialogs ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 0;
}

/* ---------- Reveal motion (JS + motion permitted only) ---------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity 520ms ease-out, transform 520ms ease-out;
  }
  .js .reveal.is-in { opacity: 1; transform: translateY(0); }
  .js .pin--hero-photo.reveal { transform: translateY(16px) rotate(-2deg); }
  .js .pin--hero-photo.reveal.is-in { transform: translateY(0) rotate(-2deg); }
}
@media (min-width: 880px) and (prefers-reduced-motion: no-preference) {
  .js .pin--hs-closing.reveal { transform: translateX(-50%) translateY(16px); }
  .js .pin--hs-closing.reveal.is-in { transform: translateX(-50%) translateY(0); }
}

/* ---------- Living world: ambient layer, motion-independent base ----------
   These rules only place and shape the ambient props. Every animation that
   moves them lives inside the prefers-reduced-motion block further down,
   so with reduced motion the world is a complete, calm, still scene. */

/* Route walkers: tiny people who follow the road's own path data via
   offset-path, so they never float across the grass. Hidden entirely when
   the browser cannot place them on the path (no walkers stuck at origin).
   Their static resting spot is the --rw-start fraction along the road. */
.rw { display: none; }
@supports (offset-rotate: 0deg) and (offset-path: path("M0,0 L10,10")) {
  .rw {
    display: inline;
    offset-rotate: 0deg;
    offset-distance: calc(var(--rw-start, 0.3) * 100%);
  }
}

/* Trees that sway pivot at their roots; boards, flags, notes, and ripples
   each pivot where they are fastened in the world. */
.sway         { transform-box: fill-box; transform-origin: 50% 100%; }
.flag-wave    { transform-box: fill-box; transform-origin: 0% 50%; }
.note-flutter { transform-box: fill-box; transform-origin: 50% 0%; }
.ripple       { transform-box: fill-box; transform-origin: center; }
.signpost nav { transform-origin: 50% 0; }

/* Fireflies and the gold footprint trail rest invisible: they are motion
   moments, and the still scene is complete without them. */
.fly, .fstep { opacity: 0; }

/* ---------- Living world: gentle ambient motion, all gated ---------- */
@media (prefers-reduced-motion: no-preference) {
  .amb { animation: ambDrift 8s ease-in-out infinite alternate; animation-delay: var(--amb-del, 0s); }
  .amb--slow { animation-duration: 12s; }
  @keyframes ambDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(14px); }
  }
  .sun-breathe { animation: sunBreathe 9s ease-in-out infinite alternate; animation-delay: var(--sun-del, 0s); }
  @keyframes sunBreathe {
    from { opacity: 0.88; }
    to   { opacity: 1; }
  }
  .lamp-halo { animation: lampGlow 4.5s ease-in-out infinite alternate; animation-delay: var(--lamp-del, 0s); }
  @keyframes lampGlow {
    from { opacity: 0.18; }
    to   { opacity: 0.34; }
  }
  .gold-shimmer { animation: goldShimmer 6s ease-in-out infinite alternate; }
  @keyframes goldShimmer {
    from { opacity: 0.8; }
    to   { opacity: 1; }
  }

  /* Route walkers stroll the road end to end. The negative delay drops
     each one mid-route at load, so nobody starts in sync, and the brief
     opacity ramps hide the loop seam at the path ends. */
  .rw {
    animation: rwWalk var(--rw-dur, 90s) linear infinite;
    animation-delay: calc(-1 * var(--rw-dur, 90s) * var(--rw-start, 0.3));
  }
  .rw--rev { animation-direction: reverse; }
  @keyframes rwWalk {
    0%    { offset-distance: 0%;   opacity: 0; }
    3%    { opacity: 1; }
    97%   { opacity: 1; }
    100%  { offset-distance: 100%; opacity: 0; }
  }

  /* Birds glide across the sky in long, quiet arcs. Negative delays put
     each one mid-flight from the first frame. */
  .bird { animation: birdGlide var(--b-dur, 48s) linear infinite; animation-delay: var(--b-del, 0s); }
  @keyframes birdGlide {
    0%   { transform: translate(-540px, 30px); opacity: 0; }
    8%   { opacity: 0.75; }
    50%  { transform: translate(20px, -14px); }
    92%  { opacity: 0.75; }
    100% { transform: translate(560px, 16px); opacity: 0; }
  }

  /* Stars breathe at different phases so the sky never pulses in sync. */
  .stars circle { animation: starTwinkle 5.6s ease-in-out infinite alternate; }
  .stars circle:nth-child(2n)   { animation-duration: 7.2s; animation-delay: -2.3s; }
  .stars circle:nth-child(3n)   { animation-delay: -4.1s; }
  .stars circle:nth-child(3n+1) { animation-duration: 6.4s; animation-delay: -1.2s; }
  @keyframes starTwinkle {
    from { opacity: 0.4; }
    to   { opacity: 1; }
  }

  /* Clouds drift a few steps and drift back, very slowly. */
  .cloud-drift { animation: cloudDrift var(--cl-dur, 85s) ease-in-out infinite alternate; animation-delay: var(--cl-del, 0s); }
  @keyframes cloudDrift {
    from { transform: translateX(-26px); }
    to   { transform: translateX(26px); }
  }

  /* Lake highlights swell and settle like slow water. */
  .ripple { animation: lakeRipple var(--rip-dur, 7s) ease-in-out infinite alternate; animation-delay: var(--rip-del, 0s); }
  @keyframes lakeRipple {
    from { transform: scale(1, 1);      opacity: 0.38; }
    to   { transform: scale(1.07, 1.16); opacity: 0.58; }
  }

  /* Some trees lean a degree into the breeze, each on its own clock. */
  .sway { animation: treeSway var(--sw-dur, 8s) ease-in-out infinite alternate; animation-delay: var(--sw-del, 0s); }
  @keyframes treeSway {
    from { transform: rotate(-0.7deg); }
    to   { transform: rotate(0.9deg); }
  }

  /* A grass facet catches the light now and then. */
  .glint { animation: grassGlint 12s ease-in-out infinite alternate; animation-delay: var(--gl-del, 0s); }
  @keyframes grassGlint {
    from { opacity: 1; }
    to   { opacity: 0.68; }
  }

  /* Flags and the finish pennant ripple gently at the free edge. */
  .flag-wave { animation: flagWave var(--fw-dur, 2.6s) ease-in-out infinite alternate; }
  @keyframes flagWave {
    from { transform: skewY(-1.5deg) scaleX(1); }
    to   { transform: skewY(1.5deg)  scaleX(0.96); }
  }

  /* Cork-board notes flutter barely at all, pinned at the top. */
  .note-flutter { animation: noteFlutter var(--nf-dur, 6s) ease-in-out infinite alternate; animation-delay: var(--nf-del, 0s); }
  @keyframes noteFlutter {
    from { transform: rotate(-0.5deg); }
    to   { transform: rotate(0.6deg); }
  }

  /* Warm windows breathe their light as dusk settles. */
  .win-glow { animation: windowGlow var(--wg-dur, 6.5s) ease-in-out infinite alternate; animation-delay: var(--wg-del, 0s); }
  @keyframes windowGlow {
    from { opacity: 0.68; }
    to   { opacity: 0.95; }
  }

  /* The trophy sparkles take turns catching the light. */
  .spark path { animation: sparkTwinkle 3.8s ease-in-out infinite alternate; }
  .spark path + path { animation-delay: -1.9s; }
  @keyframes sparkTwinkle {
    from { opacity: 0.35; }
    to   { opacity: 1; }
  }

  /* Gold footprints land one after another along the Momentum trail,
     hold, then fade so the walk can begin again. */
  .fstep { animation: stepGlow 13s linear infinite; animation-delay: var(--fs-del, 0s); }
  @keyframes stepGlow {
    0%   { opacity: 0; }
    6%   { opacity: 0.9; }
    55%  { opacity: 0.9; }
    70%  { opacity: 0; }
    100% { opacity: 0; }
  }

  /* Fireflies wander the dusk stretch by the footer. */
  .fly { animation: flyDrift var(--f-dur, 9s) ease-in-out infinite; animation-delay: var(--f-del, 0s); }
  @keyframes flyDrift {
    0%   { opacity: 0;    transform: translate(0, 0); }
    35%  { opacity: 0.8; }
    50%  { transform: translate(8px, -10px); }
    70%  { opacity: 0.45; }
    100% { opacity: 0;    transform: translate(2px, -16px); }
  }

  /* The whole signpost eases through a third of a degree, like wood in wind. */
  .signpost nav { animation: signSway 9s ease-in-out infinite alternate; }
  @keyframes signSway {
    from { transform: rotate(-0.3deg); }
    to   { transform: rotate(0.3deg); }
  }
}