/* ════════════════════════════════════════════════════════════════════
   WAYMARK — the Hiking Dogs design system
   One system for the app and every content page.

   Materials: the DOC orange track-marker triangle · LINZ survey paper ·
   contour-ink hairlines · glacial water · tussock gold · beech ink.
   Type: Plus Jakarta Sans (display) · Inter (body) · IBM Plex Mono (data).
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══ PASSTHROUGH (default): the Explore POV light spatial system.
     Luminous ground, window primitives with real layered shadows, glass
     pill chrome, mono instrument captions. Hikes wear orange, stays teal. ═══ */

  /* brand */
  --marker: #E4531B;        /* DOC orange: logo, hike markers, hike accents */
  --marker-btn: #B83E0D;
  --marker-hot: #B23D12;
  --marker-ink: #B23D12;
  --glacier: #0D9488;       /* POV teal: stays + brand accents */
  --glacier-ink: #0B6B62;
  /* per-context accent: walks wear orange (their marker), accommodation wears
     teal. Set on <main class="accent-walk|accent-stay">; default = teal brand. */
  --accent: var(--glacier);
  --accent-ink: var(--glacier-ink);
  --btn-grad: linear-gradient(135deg, #10A396, #0B8578);
  --gold: #D9A13B;          /* passthrough star gold */
  --gold-ink: #9A6E1F;
  --gold-soft: rgba(217, 161, 59, .14);

  /* surfaces: the luminous room */
  --paper: #E6E8EC;         /* ground */
  --ground-hi: #F5F7F9;
  --ground-lo: #D6D9E0;
  --surface: #FCFDFE;       /* the window */
  --surface-2: #F1F3F6;
  --ink: #171A21;
  --ink-2: #565D69;
  --ink-3: #8A909C;
  --contour: #8F8A80;       /* the survivor: warm survey linework */
  --contour-deep: #6E6659;  /* background bands: the orange tint dialled
                               off, darker (James 2026-07-10) */
  --line: rgba(23, 26, 33, .10);
  --line-2: rgba(23, 26, 33, .17);

  /* difficulty ramp */
  --d-easy: #2E7D46;
  --d-moderate: #C0851C;
  --d-hard: #C6492B;
  --d-expert: #6C4A8C;
  --d-easy-bg: rgba(46, 125, 70, .12);
  --d-moderate-bg: rgba(192, 133, 28, .13);
  --d-hard-bg: rgba(198, 73, 43, .12);
  --d-expert-bg: rgba(108, 74, 140, .12);

  /* semantics */
  --danger: #B3261E;
  --ok: #2E7D46;

  /* geometry: passthrough windows */
  --r-sm: 8px;
  --r: 16px;
  --r-lg: 20px;
  --r-win: 26px;
  --r-full: 999px;
  --maxw: 1140px;
  --shadow-sm: 0 1px 2px rgba(21, 25, 34, .08);
  --shadow: 0 1px 2px rgba(21, 25, 34, .08), 0 8px 20px rgba(21, 25, 34, .10), 0 24px 48px rgba(21, 25, 34, .10);
  --shadow-lg: 0 1px 2px rgba(21, 25, 34, .10), 0 10px 24px rgba(21, 25, 34, .13), 0 34px 70px rgba(21, 25, 34, .16);
  --shadow-hover: 0 2px 4px rgba(21, 25, 34, .14), 0 20px 44px rgba(21, 25, 34, .2);
  --btn-shadow: 0 1px 2px rgba(21, 25, 34, .3), 0 10px 26px rgba(21, 25, 34, .22);
  --btn-shadow-hover: 0 2px 5px rgba(21, 25, 34, .34), 0 16px 34px rgba(21, 25, 34, .26);
  --shadow-glow: 0 0 40px rgba(13, 148, 136, .18);

  /* type (POV voices; Plex Mono stays as the instrument voice) */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}

/* ── The Void (opt-in via the toggle): the neutral-dark palette ────── */
:root[data-theme="dark"] {
  --marker: #F0602A; --marker-btn: #B83E0D; --marker-hot: #FF7040; --marker-ink: #F58154;
  --glacier: #14B8A6; --glacier-ink: #5EEAD4;
  --gold: #FBBF24; --gold-ink: #FBBF24; --gold-soft: rgba(251, 191, 36, .16);
  --paper: #0A0A0A; --ground-hi: #121214; --ground-lo: #050506;
  --surface: #171717; --surface-2: #222222;
  --ink: #FAFAFA; --ink-2: #C9C9C9; --ink-3: #979797;
  --contour: #B99762;
  --contour-deep: #93815F;
  --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .19);
  --d-easy: #4C9E64; --d-moderate: #D19A36; --d-hard: #D96A4A; --d-expert: #9678BE;
  --d-easy-bg: rgba(76, 158, 100, .16); --d-moderate-bg: rgba(209, 154, 54, .16);
  --d-hard-bg: rgba(217, 106, 74, .16); --d-expert-bg: rgba(150, 120, 190, .16);
  --danger: #F87171; --ok: #4C9E64;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 4px 18px -6px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 44px -14px rgba(0, 0, 0, .6);
  --shadow-hover: 0 6px 24px -6px rgba(0, 0, 0, .6);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .35);
  --btn-shadow-hover: 0 2px 5px rgba(0, 0, 0, .45), 0 16px 34px rgba(0, 0, 0, .4);
  --shadow-glow: 0 0 40px rgba(20, 184, 166, .25);
  color-scheme: dark;
}

/* the luminous room behind every page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(130% 85% at 50% -12%, var(--ground-hi), transparent 58%),
    radial-gradient(100% 55% at 50% 116%, var(--ground-lo), transparent 55%);
}

/* ── Reset & base ─────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--glacier-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--glacier-ink); text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); }
::selection { background: var(--gold-soft); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -.022em; line-height: 1.12;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 700; }
h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.012em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 22px; }

/* the measured-value voice: bold display numerals, quiet caps units (POV) */
.data, .mono {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.data .u {
  font-family: var(--font-sans); font-size: .64em; color: var(--ink-3);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-left: 3px;
}

.eyebrow {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}

/* ── The Verdict Chip ─────────────────────────────────────────────────
   Verdicts are paw glyphs (vg vg-off / vg-lead / vg-permit); the
   brandmark is the map's trailhead paw badge. */
.verdict-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  padding: 4px 11px 4px 8px; border-radius: var(--r-full);
  white-space: nowrap;
}
.verdict-chip .vm { width: 14px; height: 12px; }
.verdict-chip.offlead { border-color: var(--marker); background: rgba(228, 83, 27, .08); }
.verdict-chip.nodogs { border-color: var(--danger); background: var(--d-hard-bg); color: var(--danger); }

/* ── Difficulty ───────────────────────────────────────────────────────
   Colour + contour-stack glyph + word: triple-encoded. */
.diff-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px 6px 11px; border-radius: var(--r-full);
  text-decoration: none;
}
.diff-chip:hover { text-decoration: none; }
.diff-chip { color: var(--ink); }
/* one difficulty language everywhere: the coloured dot (same as cards + map) */
.diff-chip .dd { width: 10px; height: 10px; border-radius: 50%; background: var(--dd-c, var(--ink-3)); flex: none; }
.diff-chip.diff-easy { --dd-c: var(--d-easy); }
.diff-chip.diff-moderate { --dd-c: var(--d-moderate); }
.diff-chip.diff-hard { --dd-c: var(--d-hard); }
.diff-chip.diff-expert { --dd-c: var(--d-expert); }
.diff-easy     { background: var(--d-easy-bg); }
.diff-moderate { background: var(--d-moderate-bg); }
.diff-hard     { background: var(--d-hard-bg); }
.diff-expert   { background: var(--d-expert-bg); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  padding: 11px 22px; border-radius: var(--r);
  transition: transform .15s var(--ease), box-shadow .2s, background .18s, color .18s;
  border: 1px solid transparent;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
/* walks wear orange, accommodation teal; buttons + accents follow the context */
main.accent-walk { --accent: var(--marker); --accent-ink: var(--marker-ink);
  --btn-grad: linear-gradient(135deg, var(--marker), var(--marker-btn)); }
main.accent-stay { --accent: var(--glacier); --accent-ink: var(--glacier-ink);
  --btn-grad: linear-gradient(135deg, #10A396, #0B8578); }
.btn-primary {
  background: var(--ink);
  color: var(--paper); box-shadow: var(--btn-shadow);
}
.btn-primary:hover {
  background: var(--ink);
  color: var(--paper); box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--contour); color: var(--marker-ink); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { color: var(--marker-ink); background: var(--surface-2); }
.btn-block { width: 100%; }
.btn .xp { font-family: var(--font-sans); font-size: .85em; font-weight: 600; }
.btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }

/* ── Chips / facets ──────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-2);
  padding: 6px 13px; border-radius: var(--r-full);
  text-decoration: none; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip svg { width: 13px; height: 13px; }
.chip:hover { border-color: var(--glacier); color: var(--glacier-ink); }
.chip.active, .chip[aria-pressed="true"] { background: linear-gradient(135deg, #10A396, #0B8578); border-color: transparent; color: #fff; }

/* ── Browse block: quiet labelled chip rows, no card walls ────────── */
.browse-block .browse-row { display: flex; align-items: baseline; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }
.browse-block .browse-row:first-of-type { border-top: 0; }
.browse-h { flex: none; width: 74px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.browse-row .chips { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .browse-block .browse-row { flex-direction: column; gap: 9px; }
  .browse-h { width: auto; }
}

/* ── Trip cards + hero: backed by their real terrain contours ─────── */
.trip-card { position: relative; overflow: hidden; }
.trip-card::before { content: ""; position: absolute; inset: 0; background: var(--contour); opacity: .35; pointer-events: none;
  -webkit-mask: var(--tc) center / cover no-repeat; mask: var(--tc) center / cover no-repeat; }
.trip-card > * { position: relative; }
.trip-card:hover::before { opacity: .55; }
/* the card is a div (two live links inside), so links carry their own colours */
.trip-card h3 a { color: var(--ink); text-decoration: none; }
.trip-card h3 a:hover { color: var(--marker-ink); }
.trip-card-summary { font-size: .88rem; color: var(--ink-2); line-height: 1.5; margin: 4px 0 6px; }
.trip-card-actions { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.trip-card-actions .go { margin-top: 0; padding-top: 0; text-decoration: none; }
.trip-card-actions .go svg { width: 15px; height: 13px; }
.trip-card-actions .go-quiet { color: var(--ink-2); font-weight: 600; }
.trip-card-actions .go-quiet:hover { color: var(--ink); }
.trip-lede-summary { font-size: .98rem; margin-top: 10px; }
.trip-hero .contour-band { opacity: .26; -webkit-mask-image: none; mask-image: none;
  -webkit-mask: var(--tc) right center / cover no-repeat; mask: var(--tc) right center / cover no-repeat; }

/* ── Trail card — the field-guide entry ──────────────────────────── */
.trail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tcard {
  --spine: var(--ink-3);
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 15px 17px 14px;
  box-shadow: var(--card-shadow);
  transition: transform .18s var(--ease), box-shadow .22s, border-color .18s;
  /* defer layout/paint of off-screen cards on dense hubs (395-card regions,
     big-city towns); the `auto` keyword caches real height after first paint */
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}
/* difficulty now reads from the dot badge, no edge spine needed */
.tcard:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.tcard-head { display: flex; align-items: flex-start; gap: 8px; }
.tcard h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.25; flex: 1; min-height: 2.5em; }
.tcard h3 a { color: inherit; text-decoration: none; }
.tcard h3 a::after { content: ""; position: absolute; inset: 0; }  /* stretched link */
.tcard-place { font-size: .8rem; color: var(--ink-3); }
/* difficulty badge: a haloed colour dot + label, the clear grade signal */
.tcard-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: -2px; }
.tcard-diff { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.tcard-diff .dd { width: 8px; height: 8px; border-radius: 50%; background: var(--dd-c, var(--ink-3)); }
.tcard-diff.dd-easy { --dd-c: var(--d-easy); }
.tcard-diff.dd-moderate { --dd-c: var(--d-moderate); }
.tcard-diff.dd-hard { --dd-c: var(--d-hard); }
.tcard-diff.dd-expert { --dd-c: var(--d-expert); }
.tcard-sub .tcard-place { position: relative; padding-left: 11px; }
.tcard-sub .tcard-place::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); transform: translateY(-50%); }
.tcard-spark { height: 40px; color: var(--marker); }
.tcard-spark svg { width: 100%; height: 100%; display: block; }
.tcard.done .tcard-spark { color: var(--gold); }
.tcard-stats svg { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; }
.tcard-stats > span { white-space: nowrap; }
.tcard-stats {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.tcard-stats .u { color: var(--ink-3); font-size: .9em; }
.tcard-tags { display: flex; flex-wrap: wrap; gap: 5px 10px; font-size: .74rem; color: var(--ink-3); margin-top: auto; }
.tcard-tags span { display: inline-flex; align-items: center; gap: 4px; }
.tcard-tags svg { width: 12px; height: 12px; }
.tcard-tags .tag-water { color: var(--marker-ink); }
.tcard .save {
  position: relative; z-index: 2;
  color: var(--ink-2); padding: 2px; border-radius: var(--r-sm);
  transition: color .15s, transform .15s;
}
.tcard .save svg { width: 17px; height: 15px; }
.tcard .save:hover { color: var(--marker); transform: scale(1.12); }
.tcard .save.on { color: var(--marker); }
.tcard .done-mark { color: var(--gold-ink); font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }

/* ── Instrument stat cluster ─────────────────────────────────────── */
.instrument {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
/* Trail sheets cap at ~820px, so six-across cells run to ~130px and the longer
   values (ROUTE, RATING) wrap. Lay six as 3x2 in that band, going full six-wide
   only past 1160px where the container is genuinely wide (region/campsite hubs). */
@media (min-width: 861px) { .instrument { grid-template-columns: repeat(3, 1fr); }
  .instrument.cells-4 { grid-template-columns: repeat(4, 1fr); }
  .instrument.cells-5 { grid-template-columns: repeat(5, 1fr); }
  .instrument .val { white-space: nowrap; } }
@media (min-width: 1160px) { .instrument { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 480px) { .instrument { grid-template-columns: repeat(2, 1fr); }
  /* a trailing odd cell spans full width so no empty half-cell is left */
  .instrument > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.instrument > div {
  padding: 13px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.instrument .lbl { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.instrument .val { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.instrument .val .u { font-size: .68em; color: var(--ink-3); margin-left: 2px; }

/* ── Route profile (the signature strip) ─────────────────────────── */
.profile-wrap { position: relative; }
/* the hero profile's 920-wide viewBox scales to ~0.4x on phones, shrinking its
   labels below legibility: bump the in-SVG type so it lands readable */
@media (max-width: 720px) {
  .profile-hero .pf-tick { font: 600 24px var(--font-mono); }
  .profile-hero .pf-km { font: 700 26px var(--font-mono); }
  .profile-hero .pf-flag { font: 700 28px var(--font-mono); }
}
.profile-wrap svg { width: 100%; height: auto; display: block; }
.profile-readout {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px;
  font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.profile-readout .u { color: var(--ink-3); }
/* pair the four metrics 2x2 on mobile so the fourth never orphans on its own row */
@media (max-width: 480px) {
  .profile-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
}

/* ── Sheet collar (trail detail frame) ───────────────────────────── */
.sheet {
  position: relative;
  border: 1px solid var(--line-2); border-radius: var(--r-win);
  background: var(--surface);
  padding: clamp(18px, 4vw, 40px);
  box-shadow: var(--shadow-lg);
}
.sheet::before, .sheet::after {
  content: ""; position: absolute; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--contour) 55%, transparent) 0 5px, transparent 5px 48px);
  background-size: 1px 100%; background-repeat: no-repeat;
  top: 14px; bottom: 14px; width: 5px;
}
.sheet::before { left: 7px; background-position: left top; }
.sheet::after { right: 7px; background-position: right top;
  background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--contour) 55%, transparent) 0 5px, transparent 5px 48px); }
.sheet-ref {
  position: absolute; top: 10px; right: 20px;
  font-family: var(--font-mono); font-size: .64rem; color: var(--ink-3); letter-spacing: .04em;
}

/* ── Page header / masthead (content pages) ──────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 12px 0 6px;
  pointer-events: none;
}
.site-header .container {
  display: flex; align-items: center; gap: 14px; height: 56px;
  pointer-events: auto;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  border-radius: var(--r-lg);   /* one radius across nav, cards + panels */
  box-shadow: var(--glass-ring);
  padding-left: 18px; padding-right: 10px;
  max-width: calc(var(--maxw) + 40px);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.16rem;
  color: var(--ink); text-decoration: none; margin-right: auto; letter-spacing: -.01em;
}
.brand > svg { width: 25px; height: 25px; color: var(--marker); flex: none; }
.brand b { font-weight: 600; color: var(--marker); }
.brand-word { white-space: nowrap; }
/* the little scribbled "NZ" tucked in close at an angle after the wordmark, ink */
.brand-nz {
  align-self: flex-start; margin-left: -6px;
  font-family: var(--font-display); font-weight: 800; font-size: .64em;
  letter-spacing: .02em; color: var(--ink);
  transform: rotate(-11deg) translateY(-1px); transform-origin: left center;
}
/* ghost search: mirrors the map app bar's search slot so the header never
   jumps between surfaces; clicking it hands off to the map (where search lives) */
.site-header .brand { margin-right: 0; }
/* The brand never shrinks in either header. It is `flex: 0 1 auto` by default,
   and its wordmark is `white-space: nowrap`, so under any condition that makes
   the text wider than the space flex would squeeze the BOX while the text kept
   its size — the ink then spills past the box and the search pill, which is laid
   out after that box, lands on top of the scribbled NZ. Pinning the brand makes
   the search the only thing that flexes (it has min-width: 0), which is what we
   want anyway. Applies to both headers so they cannot drift apart again. */
.site-header .brand, #appbar .brand { flex: 0 0 auto; }
/* the NZ is rotated, so its glyph reaches slightly past its layout box — reserve
   that back so the measured gap to the search is the gap you actually see */
.site-header .brand-nz, #appbar .brand-nz { margin-right: 3px; }
.site-search {
  flex: 1 1 auto; max-width: 520px; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border: 1px solid var(--line-2); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-3);
  font-size: .88rem; text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: border-color .15s, color .15s;
}
.site-search .s-ic { width: 16px; height: 16px; flex: none; }
.site-search:hover { border-color: var(--glacier); color: var(--ink-2); }
.site-search .s-short { display: none; }   /* desktop shows the full label */
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav a {
  font-size: .9rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
  padding: 7px 12px; border-radius: var(--r-full);
  transition: color .15s, background .15s;
}
.site-nav a:hover { color: var(--ink); background: var(--surface-2); }
.site-nav a.active { color: var(--glacier-ink); background: rgba(20, 184, 166, .12); }
/* ── nav groups: the app surfaces (Map/Trips/Profile — teal accent, live in the
   map) sit apart from the separate reading pages (Guides/About). The two are
   split by a crisp, short, vertically-centred divider; the page links read as a
   deliberate secondary pair (never a disabled grey). ─────────────────────── */
.site-nav .nav-app + .nav-page { position: relative; margin-left: 15px; }
.site-nav .nav-app + .nav-page::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--line-2);
}
.site-nav .nav-page { color: var(--ink-2); }
.site-nav .nav-page:hover { color: var(--ink); background: var(--surface-2); }
.site-nav .nav-page.active { color: var(--ink); background: var(--surface-2); }
/* mobile tab bar: same idea, a short divider between the app tabs and the pages */
.tabbar .nav-app + .nav-page { position: relative; }
.tabbar .nav-app + .nav-page::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: var(--line);
}
.nav-login { font-size: .9rem; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 7px 10px; border-radius: var(--r-full); white-space: nowrap; }
.nav-login:hover { color: var(--ink); background: var(--surface-2); }
.btn-app {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: linear-gradient(135deg, #10A396, #0B8578); color: #fff; text-decoration: none;
  font-weight: 600; font-size: .88rem; padding: 8px 16px; border-radius: var(--r-full);
  transition: background .18s, transform .15s, box-shadow .2s;
}
.btn-app:hover { background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff; transform: translateY(-1px); box-shadow: 0 0 22px -4px rgba(20, 184, 166, .5); }
.btn-app svg { width: 14px; height: 12px; }
.theme-toggle { color: var(--ink-3); padding: 8px; border-radius: var(--r-full); }
.theme-toggle:hover { color: var(--ink); background: var(--surface-2); }
.theme-toggle svg { width: 17px; height: 17px; }

/* ── Hero (content pages) ────────────────────────────────────────── */
.hero { padding: clamp(34px, 6vw, 60px) 0 clamp(26px, 4vw, 44px); position: relative; }
.hero .breadcrumb { margin-bottom: 12px; }
.hero h1 { max-width: 22ch; }
.hero .lede { margin-top: 12px; max-width: 58ch; font-size: 1.05rem; color: var(--ink-2); }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 34px; margin-top: 18px; font-size: .88rem; color: var(--ink-2); }
@media (min-width: 1160px) { .hero-stats { grid-template-columns: repeat(4, max-content); } }
.hero-stats .data { font-size: .95em; }
.hero-stats .u { color: var(--ink-3); }
/* 'Explore on the map' funnel button (content pages -> pre-filtered map) */
.hero-cta { margin-top: 20px; }
.map-cta svg { width: 17px; height: 15px; }
.breadcrumb { font-size: .8rem; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { color: var(--glacier-ink); text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; color: var(--line-2); }

/* contour texture band — real terrain lines in a whisper of the marker orange,
   so the heroes carry the brand colour without shouting */
.contour-band { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .34; color: var(--contour-deep); z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), transparent 97%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), transparent 97%); }
.contour-band svg { width: 100%; height: 100%; min-width: 900px; }
.contour-band svg path { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.hero { position: relative; }
/* the contour band reaches the very TOP of the page, running up behind the
   floating glass nav (which sits on top of it), rather than stopping in a hard
   line just below it. Header ≈ 74px flow (12+56+6) plus any notch. (The glacial
   glow .hero::after does the same, set on its base rule further down.) */
.hero .contour-band { top: calc(-78px - env(safe-area-inset-top, 0px)); }

/* ── Sections & prose ────────────────────────────────────────────── */
.section { padding: clamp(26px, 4vw, 42px) 0; }
.section-title { margin-bottom: 6px; }
.section-intro { color: var(--ink-2); max-width: 62ch; margin-bottom: 22px; }
.prose { font-size: 1.02rem; max-width: 68ch; }
.prose p { margin-bottom: 14px; color: var(--ink-2); }
.prose h2 { margin: 30px 0 12px; }
.prose h3 { margin: 22px 0 8px; color: var(--ink); }
.prose ul, .prose ol { padding-left: 24px; margin-bottom: 14px; color: var(--ink-2); }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--contour); }
.prose strong { color: var(--ink); }
.prose blockquote { border-left: 3px solid var(--contour); padding: 4px 0 4px 18px; margin: 18px 0; font-family: var(--font-display); font-style: italic; color: var(--ink-2); }

/* Clean note, NOT a boxed callout: no background, no border, no coloured left
   stripe (James disliked those). Just a colour-coded icon + text, set off from
   the surrounding content by spacing and a hairline when several stack. */
.info-box {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 0; margin: 6px 0;
  font-size: .92rem; color: var(--ink-2); line-height: 1.5;
}
.info-box + .info-box { border-top: 1px solid var(--line); }
.info-box svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--glacier-ink); margin-top: 2px; }
.info-box strong { color: var(--ink); }
/* each access note (route summary, Start, Walk) on its own line — as inline
   spans they ran together into one jammed paragraph */
.info-box .mp-note { display: block; }
.info-box .mp-note + .mp-note { margin-top: 4px; }
.info-box.warn svg { color: var(--gold-ink); }
.info-box.danger svg { color: var(--danger); }

/* ── Link cards / hub grids ──────────────────────────────────────── */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.link-card {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 17px 19px; text-decoration: none;
  box-shadow: var(--card-shadow);
  transition: transform .18s var(--ease), box-shadow .22s, border-color .15s;
}
.link-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.link-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; color: var(--ink); }
.link-card .meta { font-family: var(--font-sans); font-weight: 500; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.link-card .go { color: var(--glacier-ink); font-weight: 700; font-size: .85rem; margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 5px; }

/* ── Campsite card ───────────────────────────────────────────────── */
.ccard {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none;
  box-shadow: var(--card-shadow);
  transition: transform .18s var(--ease), box-shadow .22s;
}
.ccard:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.ccard img { width: 100%; height: 150px; object-fit: cover; }
/* Drawn terrain plate as a theme-aware background: the void plate by default,
   a paper-palette plate under [data-theme=light]. Swapped via a CSS custom
   property so the browser only ever fetches the plate that is actually shown.
   --plate / --plate-light are set inline per card (the URLs are per-slug). */
.ccard-plate {
  width: 100%; height: 150px; display: block;
  background-image: var(--plate); background-size: cover; background-position: center;
}
.camp-plate-bg {
  aspect-ratio: 460 / 300; display: block;
  background-image: var(--plate); background-size: cover; background-position: center;
}
.ccard-plate, .camp-plate-bg { background-image: var(--plate-light); }
:root[data-theme="dark"] .ccard-plate,
:root[data-theme="dark"] .camp-plate-bg { background-image: var(--plate); }
.ccard-body { padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 7px; }
.ccard h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.ccard .meta { font-family: var(--font-sans); font-weight: 500; font-size: .78rem; color: var(--ink-3); }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  margin-top: clamp(40px, 7vw, 70px);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding: 44px 0 26px;
  font-size: .9rem; color: var(--ink-2);
}
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.footer-brand p { font-size: .86rem; color: var(--ink-3); max-width: 32ch; margin-top: 10px; }
.footer-col .footer-h { font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--ink-2); text-decoration: none; padding: 4px 0; font-size: .88rem; }
.footer-col a:hover { color: var(--glacier-ink); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding-top: 20px; font-size: .78rem; color: var(--ink-3); }
.footer-bottom a { color: inherit; }

/* ── Universal bottom tab bar (mobile) ───────────────────────────── */
.tabbar {
  display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  justify-content: space-around;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--line);
}
.tabbar .tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-3); text-decoration: none;
  font-size: .66rem; font-weight: 600; letter-spacing: .02em;
  padding: 5px 2px; border-radius: 12px;
  transition: color .15s;
}
.tabbar .tab svg { width: 21px; height: 21px; }
.tabbar .tab:active { transform: scale(.94); }
.tabbar .tab.active { color: var(--glacier-ink); }
@media (min-width: 721px) { .tabbar { display: none; } }

/* ── mobile nav dropdown (top-right, replaces the bottom tab bar) ────── */
.navmenu { display: none; position: relative; margin-left: 2px; }
.navmenu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-full);
  color: var(--ink-2); background: none;
}
.navmenu-btn:hover, .navmenu.open .navmenu-btn { color: var(--ink); background: var(--surface-2); }
.navmenu-btn svg { width: 23px; height: 23px; }
.navmenu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
  min-width: 196px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  animation: navmenu-in .16s var(--ease);
}
@keyframes navmenu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.navmenu-panel[hidden] { display: none; }
.navmenu-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; border-radius: 11px;
  font-weight: 600; font-size: .96rem; color: var(--ink); text-decoration: none;
  background: none; text-align: left; width: 100%; cursor: pointer;
}
.navmenu-item:hover { background: var(--surface-2); }
.navmenu-item svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.navmenu-item.nav-page { color: var(--ink-2); }
.navmenu-sep { height: 1px; background: var(--line); margin: 6px 10px; }
@media (max-width: 720px) { .navmenu { display: inline-flex; } }
@media (max-width: 720px) {
  .tabbar { display: none !important; }   /* nav moved to the top-right dropdown */
  .site-nav, .btn-app, .nav-login { display: none !important; }
  /* the day/night toggle moves INTO the dropdown menu on phones */
  .site-header .theme-toggle { display: none; }
  /* the SAME solid full-width top bar as the map app (logo + search + burger),
     edge to edge and up into the notch — one header across every page. */
  .site-header { padding: 0; }
  .site-header .container {
    max-width: none; border-radius: 0; gap: 10px;
    height: calc(48px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0 14px;
    background: var(--surface); box-shadow: none;
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .brand { font-size: 1.05rem; }
  .brand > svg { width: 23px; height: 23px; }
  /* phones: short label + a tidy, consistent search pill (same height as the map
     app bar's input, 16px so iOS never zooms) */
  .site-search .s-full { display: none; }
  .site-search .s-short { display: inline; }
  .site-search { height: 38px; padding: 0 14px; font-size: 16px; }
  body.has-tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .site-footer { margin-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 440px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Tables (facts, fees) ────────────────────────────────────────── */
.facts { width: 100%; border-collapse: collapse; font-size: .92rem; }
.facts th { text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); padding: 8px 14px 8px 0; }
.facts td { padding: 8px 14px 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.facts td.data { color: var(--ink); }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 12px; }
.faq-item h2 { display: flex; gap: 10px; font-size: 1.02rem; margin-bottom: 8px; }
.faq-item h2 svg { width: 13px; height: 12px; flex-shrink: 0; margin-top: 6px; color: var(--contour); }
.faq-item p { font-size: .94rem; color: var(--ink-2); }

/* ── Accessibility & polish ──────────────────────────────────────── */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 18px;
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2.5px solid var(--glacier); outline-offset: 2px; border-radius: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .site-footer, .tabbar, .btn, .chips, .skip-link, .theme-toggle,
  .map-embed, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .sheet { border-color: #999; box-shadow: none; }
  a { color: #000; text-decoration: none; }
  .tcard, .ccard, .link-card, .faq-item { box-shadow: none; border-color: #bbb; break-inside: avoid; }
}

/* ════════════════════════════════════════════════════════════════════
   TRAIL DETAIL — the money page (appended by build.pages.trail)
   Scoped under .trail-detail so nothing here touches other page types.
   ════════════════════════════════════════════════════════════════════ */
.trail-detail { padding: clamp(18px, 3vw, 30px) 0 20px; }
.trail-sheet { max-width: 860px; margin: 0 auto; }
.trail-sheet .breadcrumb { margin: 4px 0 16px; padding-right: 96px; }
.trail-sheet .sheet-ref { font-size: .62rem; }

.trail-collar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.trail-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; line-height: 1.12; }
.trail-place { margin-top: 6px; font-family: var(--font-sans); font-weight: 500; font-size: .86rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.trail-profile { margin: 22px 0 4px; color: var(--contour); }
.profile-compact { height: 62px; margin: 20px 0 4px; color: var(--marker); }
.profile-compact svg { width: 100%; height: 100%; display: block; }
.profile-note { font-size: .9rem; color: var(--ink-3); margin-top: 6px; }
.trail-detail .instrument { margin: 18px 0 4px; }
.trail-detail .instrument .val svg { width: .82em; height: .82em; color: var(--gold-ink); vertical-align: -1px; }

/* route map */
.trail-map-wrap { margin: 26px 0 4px; }
.map-eyebrow { display: block; margin-bottom: 8px; }
.trail-map {
  position: relative; height: clamp(260px, 42vh, 420px);
  border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; background: var(--surface-2);
}
.trail-map .maplibregl-map { position: absolute; inset: 0; }
.map-skeleton {
  position: absolute; inset: 0; opacity: .5; color: var(--contour);
  background-image: repeating-linear-gradient(115deg, transparent 0 26px, currentColor 26px 27px);
}
.maplibregl-map + .map-skeleton, .trail-map.ready .map-skeleton { display: none; }
.map-pawmark { line-height: 0; filter: drop-shadow(0 2px 3px rgba(27, 33, 28, .35)); }
.map-pawmark svg { display: block; }

/* good to know */
/* dog verdict: a clean panel, no coloured left stripe (James disliked those) —
   the colour lives in the verdict marker/icon instead */
.gtk-verdict {
  display: flex; align-items: center; gap: 14px; margin: 4px 0 16px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.gtk-verdict .vm { flex-shrink: 0; }
.gtk-verdict .vm { flex-shrink: 0; }
.gtk-verdict p { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); }
.gtk-permit { margin: 0 0 16px; }
.gtk-permit .info-box { margin: 0; }
.gtk-permit .permit-cta { margin-top: 14px; }
.gtk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gtk-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-full);
  padding: 6px 13px;
}
.gtk-chip svg { width: 14px; height: 14px; color: var(--ink-3); }
a.gtk-chip { text-decoration: none; transition: border-color .15s; }
a.gtk-chip:hover { border-color: var(--marker); }
.gtk-chip.water { color: var(--marker-ink); border-color: color-mix(in srgb, var(--marker) 45%, var(--line-2)); background: rgba(240, 96, 42, .08); }
/* Save / Been-here toggle state on the trail CTA (client localStorage) */
.cta-row .btn[aria-pressed="true"] { background: var(--glacier); color: #fff; border-color: var(--glacier); }
.cta-row .btn[aria-pressed="true"] svg { color: #fff; }
.gtk-chip.water svg { color: var(--marker-ink); }

.trail-detail .section { padding: clamp(20px, 3vw, 30px) 0; }
.trail-sheet .about { padding-bottom: 4px; }
.trail-detail .more-all { margin-top: 16px; font-weight: 600; }
.trail-detail .more-all a { color: var(--glacier-ink); text-decoration: none; }
.trail-detail .more-all a:hover { text-decoration: underline; }

/* CTA */
.cta-block {
  margin: 10px auto 0; max-width: 860px;
  border: 1px solid var(--line-2); border-top: 3px solid var(--marker);
  border-radius: var(--r); background: var(--surface);
  padding: clamp(20px, 4vw, 30px); text-align: center;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-block .btn-secondary svg { width: 15px; height: 13px; color: var(--marker); }
.cta-note { margin-top: 12px; font-size: .86rem; color: var(--ink-3); }

@media (max-width: 560px) {
  .trail-sheet .breadcrumb { padding-right: 0; }
  .trail-sheet .sheet-ref { position: static; display: block; text-align: right; margin-bottom: 4px; }
}


/* ════════════════════════════════════════════════════════════════════
   CAMPSITES — index hub + detail (the one photographic surface)
   Appended component styles; nothing above is modified.
   ════════════════════════════════════════════════════════════════════ */

/* index grid + card additions (extends the base .ccard) */
.ccard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.ccard-region { font-size: .74rem; color: var(--ink-3); font-weight: 600; }
.ccard-region a { color: var(--ink-3); text-decoration: none; }
.ccard-region a:hover { color: var(--glacier-ink); }
.ccard .verdict-chip { align-self: flex-start; }
.ccard .meta .u { color: var(--ink-3); }
.ccard .meta .dot { color: var(--line-2); margin: 0 6px; }
.ccard-noimg {
  width: 100%; height: 150px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-3);
  background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 12px);
}
.ccard-noimg svg { width: 40px; height: 36px; }
/* the stretched-link pattern so the whole card is clickable */
.ccard::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ccard-region a, .ccard .verdict-chip { position: relative; z-index: 2; }

/* detail hero: text + photo two-up */
.camp-hero { padding-bottom: clamp(20px, 3vw, 32px); }
.camp-hero-grid { display: grid; grid-template-columns: 1fr minmax(300px, 460px); gap: clamp(20px, 4vw, 44px); align-items: start; }
.camp-hero-text .eyebrow { display: block; margin: 4px 0 6px; }
.camp-hero-text .eyebrow .sep { color: var(--line-2); margin: 0 4px; }
.camp-hero-text .eyebrow a { color: var(--ink-3); text-decoration: none; }
.camp-hero-text .eyebrow a:hover { color: var(--glacier-ink); }
.camp-hero-text h1 { max-width: 18ch; }
.camp-photo { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--surface-2); }
.camp-photo img { width: 100%; height: auto; aspect-ratio: 460 / 300; object-fit: cover; }
.camp-photo figcaption { font-size: .72rem; color: var(--ink-3); padding: 7px 12px; background: var(--surface); border-top: 1px solid var(--line); }
.camp-photo figcaption a { color: var(--ink-2); }
/* real DOC photo hero: the terrain plate is kept as an additive locator inset,
   the required CC-BY credit sits as a soft overlay on the photo */
.camp-photo.has-real { position: relative; }
.camp-photo-none .noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 460 / 300; color: var(--ink-3);
  background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 14px); }
.camp-photo-none .noimg svg { width: 54px; height: 48px; }

/* the policy plate — the loud dog fact under the title */
.policy-hero { margin-top: 16px; }
.policy-hero > .verdict-chip { font-size: 1rem; padding: 8px 18px 8px 13px; border-width: 1.5px; }
.policy-hero > .verdict-chip .vm { width: 22px; height: 20px; }
.policy-rule { margin-top: 12px; font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); max-width: 40ch; }
.policy-hero .info-box { margin-top: 16px; }
.policy-cta { margin-top: 14px; }

/* Get the dog permit — the apply block on permit campsite pages */
.camp-permit { scroll-margin-top: 90px; }
.permit-apply {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(18px, 3vw, 26px);
}
.permit-lede h2 { font-size: 1.32rem; margin: 0 0 8px; }
.permit-lede p { color: var(--ink-2); max-width: 64ch; margin: 0; }
.permit-cta { margin-top: 18px; }
.permit-office { margin-top: 12px; font-size: .84rem; color: var(--ink-3); }
.permit-office span { font-family: var(--font-sans); font-weight: 600; color: var(--ink-2); }
.permit-steps { list-style: none; counter-reset: step; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.permit-steps li { counter-increment: step; position: relative; padding-left: 40px; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.permit-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-ink);
  font-family: var(--font-mono); font-weight: 600; font-size: .82rem;
  display: grid; place-items: center;
}
.permit-steps strong { color: var(--ink); font-weight: 600; }

/* detail body column */
.camp-main { margin-top: clamp(8px, 2vw, 20px); }
.camp-main > .instrument { margin-bottom: 8px; }
.camp-main .section { padding: clamp(22px, 4vw, 34px) 0; }
.camp-main .section + .section { border-top: 1px solid var(--line); }
.prose .cite { font-family: var(--font-sans); font-weight: 500; font-size: .76rem; color: var(--ink-3); margin-top: 12px; }

/* facilities / access chips */
.camp-facilities .fac-group + .fac-group { margin-top: 18px; }
.camp-facilities .eyebrow { display: block; margin-bottom: 10px; }
.fac-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* facility / access token: same visual recipe as the base .chip (surface fill,
   --line-2 border, 6px 13px, wt600) but static, no interactive affordance. */
.fac-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-2);
  padding: 6px 13px; border-radius: var(--r-full);
}
.fac-chip svg { width: 13px; height: 13px; color: var(--ink-3); }
.fac-chip.water { color: var(--glacier-ink); border-color: color-mix(in srgb, var(--glacier) 45%, var(--line-2)); }
.fac-chip.water svg { color: var(--glacier-ink); }

/* alerts */
.alert-flag {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--danger); padding: 2px 7px; border-radius: var(--r-full);
}
.info-box.danger .alert-date { font-family: var(--font-sans); font-weight: 500; font-size: .74rem; color: var(--ink-3); margin-top: 6px; }
.alert-note { font-size: .86rem; color: var(--ink-2); margin-top: 4px; }

/* nearest-trail compact cards */
.tcard-lite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tcard-lite {
  --spine: var(--ink-3);
  position: relative; display: flex; align-items: stretch; gap: 10px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px;
  transition: transform .15s var(--ease), box-shadow .2s, border-color .18s;
}
.tcard-lite::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--spine); pointer-events: none;
  border-top-left-radius: inherit; border-bottom-left-radius: inherit;
}
.tcard-lite:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tcard-lite.d-easy { --spine: var(--d-easy); }
.tcard-lite.d-moderate { --spine: var(--d-moderate); }
.tcard-lite.d-hard { --spine: var(--d-hard); }
.tcard-lite.d-expert { --spine: var(--d-expert); }
.tcard-lite .vg { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; }
.tcard-lite .tl-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tcard-lite .tl-name { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink); line-height: 1.2; }
.tcard-lite .tl-meta { font-family: var(--font-sans); font-weight: 500; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: auto; }

/* source / CC-BY attribution block */
.source-block {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; font-size: .9rem; color: var(--ink-2);
}
.source-block > div:first-child svg { width: 20px; height: 20px; color: var(--ink-3); }
.source-block strong { color: var(--ink); }
.source-block .source-meta { font-family: var(--font-sans); font-weight: 500; font-size: .8rem; color: var(--ink-3); margin-top: 8px; }
.source-block .source-meta a { color: var(--glacier-ink); }

@media (max-width: 720px) {
  .camp-hero-grid { grid-template-columns: 1fr; }
  .camp-photo { order: -1; max-width: 460px; }
}

/* ════════════════════════════════════════════════════════════════════
   REGIONS & TRAIL HUBS — region index/detail + gazetteer + difficulty
   Appended component styles; nothing above is modified.
   ════════════════════════════════════════════════════════════════════ */

/* attribution footnote under any card grid that shows ratings */
.grid-note { margin-top: 14px; font-size: .78rem; color: var(--ink-3); }
.grid-note a { color: var(--ink-3); }
.grid-note a:hover { color: var(--glacier-ink); }

/* link-card body used as a plain-sans description (not a mono meta) */
.link-card .meta.desc {
  font-family: var(--font-sans); text-transform: none; letter-spacing: 0;
  color: var(--ink-3); font-size: .84rem; line-height: 1.45; margin-top: 2px;
}

/* ══ Guides / FAQ / About / 404 — appended for pages/guides.py + pages/meta.py ══ */
/* (additive only; no existing rule modified) */

.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; font-family: var(--font-mono); font-size: .78rem;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.byline svg { width: 14px; height: 12px; color: var(--contour); flex-shrink: 0; }
.byline .dot { color: var(--line-2); }

.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--contour); border-radius: var(--r);
  padding: 16px 20px; margin: 24px 0 32px;
}
.toc h2 {
  font-family: var(--font-sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 10px;
}
.toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.toc li { margin: 0 0 7px; break-inside: avoid; }
.toc a { color: var(--glacier-ink); text-decoration: none; font-weight: 500; font-size: .93rem; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 520px) { .toc ol { columns: 1; } }

.h-nodogs { display: flex; align-items: center; gap: 11px; }
.h-nodogs svg { width: 26px; height: 23px; color: var(--ink-2); flex-shrink: 0; }

.pcta {
  margin-top: 40px; padding: 26px 28px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
}
.pcta h2 { margin: 0 0 6px; }
.pcta p { margin: 0 0 16px; color: var(--ink-2); max-width: 52ch; }

/* ── The Field-Guide Plate ─────────────────────────────────────────────
   Banks presented as a formal book plate: matted photo, a fine
   contour-ink keyline, caption set beneath in small-caps mono. Shared
   between the gazetteer hero (Plate I) and the About entry (Plate II). */
.plate-frame {
  position: relative; background: var(--surface);
  padding: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: var(--shadow-lg);
}
.plate-frame img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1/1; object-fit: cover; object-position: 50% 30%;
}
.plate-cap { display: flex; flex-direction: column; gap: 5px; }
.plate-cap-hd {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1.35;
}
.plate-cap .pc-no { color: var(--glacier); font-weight: 600; }
.plate-cap .pc-dot { color: var(--line-2); margin: 0 7px; }
.plate-cap .pc-nm { color: var(--ink); }
.plate-cap-sub {
  font-family: var(--font-sans); font-size: .73rem; font-weight: 500; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .07em;
}

/* Plate I: the gazetteer hero. One sheet: a top rule and a shared datum
   rule tie the words and the photo to the same baseline grid. */
.plate-hero { padding-bottom: clamp(30px, 4vw, 50px); }
.plate-hero .breadcrumb { margin-bottom: clamp(16px, 2vw, 22px); }
.plate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 26vw, 320px);
  grid-template-rows: 1fr auto;
  column-gap: clamp(34px, 5vw, 72px);
  row-gap: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line-2);
  padding-top: clamp(26px, 3.4vw, 42px);
  position: relative;
}
.plate-col-text {
  grid-column: 1; grid-row: 1; align-self: stretch;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: 3px;
}
.plate-col-text .eyebrow { display: block; margin-bottom: 14px; }
.plate-hero h1 { margin: 0; max-width: 16ch; }
.plate-hero .lede { margin-top: 15px; max-width: 46ch; }
/* the plate (photo + its caption) lives whole in the top section: caption
   directly under a slightly smaller image, above the shared rule */
.plate {
  grid-column: 2; grid-row: 1; align-self: center;
  display: flex; flex-direction: column; gap: 12px; margin: 0;
}
.plate-rule {                      /* the shared datum under both columns */
  grid-column: 1 / -1; grid-row: 2; align-self: start;
  height: 0; border-top: 1px solid var(--line-2); position: relative;
}
/* the numbers get the whole row under the rule, nothing to collide with */
.plate-hero .hero-stats {
  grid-column: 1 / -1; grid-row: 2; align-self: start;
  margin: 0; padding-top: clamp(15px, 1.7vw, 19px);
}
@media (max-width: 900px) {
  .plate-grid { display: block; border-top-width: 1px; }
  .plate-grid::before, .plate-grid::after { display: none; }
  .plate, .plate-col-text { display: block; }
  .plate-hero h1 { max-width: 22ch; }
  .plate-hero .lede { max-width: 58ch; }
  .plate-rule { display: none; }
  .plate-hero .hero-stats { padding-top: 0; margin-top: 18px; }
  .plate { margin-top: clamp(26px, 5vw, 34px); max-width: 344px; }
  .plate .plate-frame { margin: 0; }
  .plate .plate-cap { padding-top: 12px; margin-top: 13px; border-top: 1px solid var(--line-2); }
}

/* Plate II: the About entry. Portrait beside the bio under a ruled header. */
.dog-plate { margin: clamp(34px, 5vw, 52px) 0 clamp(8px, 2vw, 16px); }
.dog-plate-head {
  position: relative; border-bottom: 1px solid var(--line-2);
  padding-bottom: 13px; margin-bottom: clamp(22px, 3vw, 30px);
}
.dog-plate-head .eyebrow { display: block; margin-bottom: 9px; }
.dog-plate-head h2 { margin: 0; }
.dog-plate-body {
  display: grid; grid-template-columns: minmax(232px, 296px) 1fr;
  gap: clamp(26px, 4vw, 46px); align-items: start;
}
.dp-figure { margin: 0; }
.dp-figure .plate-frame img { object-position: 50% 26%; }
.dp-figure .plate-cap { margin-top: 13px; }
.dp-text { max-width: 52ch; }
.dp-text p { margin: 0 0 15px; color: var(--ink-2); font-size: 1.02rem; }
.dp-text p:first-child { margin-top: -5px; }
.dp-text strong { color: var(--ink); }
@media (max-width: 640px) {
  .dog-plate-body { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 28px); }
  .dp-figure { max-width: 322px; }
  .dp-text { max-width: none; }
  .dp-text p:first-child { margin-top: 0; }
}

.field-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.field-links .chip svg { color: var(--glacier); }
/* CC BY source credit for walks sourced from a named agency */
.src-credit { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* About stat cards: mono numerals inside a link-card heading */
.link-card h3.data { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.link-card h3.data .u {
  font-family: var(--font-sans); font-size: .58em; font-weight: 600;
  color: var(--ink-3); letter-spacing: .03em; margin-left: 2px;
}
.link-card .go svg { width: 14px; height: 14px; vertical-align: -1px; }

/* About page: trim the thin-hero void and give peer sections one ruled header
   treatment (eyebrow + h2 + hairline), matching .dog-plate-head. */
.about-hero { padding-bottom: clamp(12px, 2vw, 22px); }
.about-body { padding-top: clamp(6px, 1.5vw, 14px); }
.about-body > .prose > section:not(.dog-plate) { margin-bottom: clamp(26px, 4vw, 40px); }
.about-body .dog-plate-head + .section-intro { margin-top: -6px; }

/* trail page: sections after the sheet align to the sheet's inner text edge */
.trail-detail > .section,
.trail-detail > .cta-block { padding-left: clamp(18px, 4vw, 40px); padding-right: clamp(18px, 4vw, 40px); }

/* the hidden attribute must always win over component display rules */
[hidden] { display: none !important; }

/* MapLibre control skin — shared by the app and embedded route maps */
.maplibregl-ctrl-group { background: var(--surface) !important; border: 1px solid var(--line-2) !important; box-shadow: var(--shadow-sm) !important; border-radius: var(--r-sm) !important; overflow: hidden; }
.maplibregl-ctrl-group button { background: var(--surface) !important; width: 32px; height: 32px; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
.maplibregl-ctrl-group button:hover { background: var(--surface-2) !important; }
.maplibregl-ctrl-group button svg { color: var(--ink-2); }
.maplibregl-ctrl-group button.on { color: var(--marker); }
.maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--surface) 82%, transparent) !important; }
.maplibregl-ctrl-attrib a { color: var(--ink-3) !important; }
/* selected feature pin: a single-colour dot that rises out of the ground on a
   same-colour line when the map tilts into 3D. Column of dot (top) + line
   (grows from 0), anchored at the ground point (trail start / the feature). */
.sel-pin { position: relative; display: flex; flex-direction: column; align-items: center; pointer-events: none; will-change: transform; }
.sel-pin-dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 2px 7px rgba(11,31,23,.45); transition: transform .9s cubic-bezier(.22,.9,.24,1); }
.sel-pin-stalk { width: 2.5px; height: 0; border-radius: 2px; transition: height .9s cubic-bezier(.22,.9,.24,1); }
.sel-pin.up .sel-pin-stalk { height: 36px; }
/* pulsing ground ring under the SELECTED pin (every marker stands up in 3D, so
   this marks which one is selected) */
.sel-pin-pulse { position: absolute; bottom: -7px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; opacity: .5; transform: scale(.4); animation: sel-pulse 1.7s ease-out infinite; }
@keyframes sel-pulse { 0% { transform: scale(.35); opacity: .55; } 70%,100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sel-pin-dot, .sel-pin-stalk { transition: none; } .sel-pin-pulse { animation: none; opacity: .3; transform: scale(1); } }
/* the compact (i) joins the same control family as zoom/locate: surface pill, quiet glyph */
.maplibregl-ctrl-attrib-button { background-color: var(--surface) !important; border: 1px solid var(--line-2) !important; box-shadow: var(--shadow-sm); opacity: .78; }
/* dark: keep the black glyph readable on a translucent white pill (no filter, it would flip the bg too) */
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { background-color: hsla(0, 0%, 100%, .65) !important; border-color: transparent !important; }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(.92); }
  .maplibregl-ctrl-bottom-right { bottom: calc(var(--tabbar-h) + 6px); }

/* verdict glyphs (paw language — chips + card heads) */
.vg { width: 17px; height: 17px; flex-shrink: 0; }
.vg-off { color: var(--marker); }
.vg-no { color: var(--danger); }
.vg-lead { color: var(--ink-2); }
.vg-permit { color: var(--gold-ink); }
.vg-lg { width: 40px; height: 40px; }
.verdict-chip .vg { width: 15px; height: 15px; }
.verdict-chip.permit { border-color: var(--gold); background: var(--gold-soft); }
.tcard-head .vg { margin-top: 2px; }

/* ── WS4/WS5: emergency vet card · daylight line · obstacle chips ────
   (shared by static trail pages AND the app panel, so they live here) */
.evet-card { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.evet-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-full); background: rgba(228, 83, 27, .1); color: var(--marker-ink); }
.evet-ico svg { width: 17px; height: 17px; }
.evet-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.evet-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.evet-name { font-weight: 600; font-size: .92rem; color: var(--ink); }
.evet-meta { font-size: .8rem; color: var(--ink-2); }
.evet-call { flex: none; white-space: nowrap; font-size: .82rem; padding: 8px 13px; }
.daylight { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: .84rem; color: var(--ink-2); }
.daylight svg { width: 15px; height: 15px; margin-top: 2px; color: var(--gold-ink); flex: none; }
.daylight.past { color: var(--d-hard); }
.gk.gk-warn { border-color: rgba(217, 70, 20, .4); }
.gk.gk-warn svg { color: var(--marker-hot); }

/* hub hero: Banks photo card fills the right column on desktop */
.hero-banks { display: none; }
@media (min-width: 980px) {
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; }
  /* guides: text + a smaller Banks card, right-hand column */
  .guide-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: center; }
  .hero-banks { display: block; position: relative; }
  /* square 1:1 crop with the face held high, so the caption pill sits on the
     lower edge clear of it (width/height attrs keep layout; cover re-crops) */
  .hero-banks img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 24%; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 4px solid var(--surface); transform: rotate(1.6deg); }
  .hero-banks-cap { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
    background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line);
    border-radius: var(--r-full); padding: 5px 12px; font-size: .78rem; font-weight: 600; color: var(--ink-2);
    font-family: var(--font-sans); font-style: normal; box-shadow: var(--shadow-sm); }
  .hero-banks-cap svg { width: 13px; height: 13px; color: var(--gold); }
}

.hk-up, .hk-stats span { white-space: nowrap; }

/* Browse sheet: the mobile tab-bar menu naming every section */
.browse-scrim { position: fixed; inset: 0; z-index: 79; background: rgba(27,33,28,.45); }
.browse-auth { display: flex; gap: 10px; padding: 12px 14px 6px; border-top: 1px solid var(--line); margin-top: 6px; }
.browse-auth .btn { flex: 1; font-size: .9rem; padding: 10px 12px; }
.browse-sheet {
  position: fixed; z-index: 80; left: 10px; right: 10px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 140px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 14px 8px 10px; max-width: 460px; margin: 0 auto;
}
.browse-title { font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 8px; }
.browse-sheet a {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: var(--r);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem;
}
.browse-sheet a:hover, .browse-sheet a:active { background: var(--surface-2); }
.browse-sheet a svg { width: 19px; height: 19px; color: var(--glacier); flex-shrink: 0; }
.browse-sheet a span { display: flex; flex-direction: column; }
.browse-sheet a em { font-style: normal; font-weight: 400; font-size: .76rem; color: var(--ink-3); }
/* the auth row keeps real button colours: the sheet's link ink would otherwise
   paint the primary's label ink-on-ink (invisible) and force its paw teal */
.browse-sheet .browse-auth a { justify-content: center; gap: 8px; }
.browse-sheet .browse-auth .btn-primary { color: var(--paper); }
.browse-sheet .browse-auth .btn-primary:hover, .browse-sheet .browse-auth .btn-primary:active { background: var(--ink); }
.browse-sheet .browse-auth .btn-primary svg { color: currentColor; }


/* ═══════════════════════════════════════════════════════════════════════
   Modern layer: surfaces, light, motion
   Loads on top of the base system (same file, appended last so it wins on
   equal specificity). Rule of the house, carried from Explore POV:
     GLASS belongs to CHROME  (bars, floating sheet)
     PAPER belongs to CONTENT (cards read as fine printed plates)
   Paired with /assets/js/modern.js. Everything fails safe without JS and
   every motion rule is gated behind prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --wm-r: 14px;                 /* card radius, a touch larger than base   */
  --wm-r-lg: 20px;
  --wm-expo: cubic-bezier(.16, 1, .3, 1);

  /* passthrough glass: near-white pill over the luminous ground */
  --glass-bg: rgba(250, 251, 253, .62);
  --glass-blur: 24px;
  --glass-edge: rgba(255, 255, 255, .6);
  --glass-ring: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 0 0 1px rgba(23, 26, 33, .06), 0 12px 34px rgba(21, 25, 34, .14);

  /* passthrough window card */
  --card-ring: inset 0 1px 0 rgba(255, 255, 255, .6);
  --card-shadow: var(--shadow);
  --card-shadow-hover: var(--shadow-hover);

  /* ambient light field */
  --amb-glacier: rgba(13, 148, 136, .10);
  --amb-gold: rgba(206, 154, 52, .085);

  /* focus glow ring */
  --glow-ring: 0 0 0 4px rgba(13, 148, 136, .22);
}

/* The Void: dark glass + deep float */
:root[data-theme="dark"] {
  --glass-bg: color-mix(in srgb, var(--paper) 72%, transparent);
  --glass-edge: rgba(255, 255, 255, .08);
  --glass-ring: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 34px rgba(0, 0, 0, .5);
  --card-ring: inset 0 0 0 1px rgba(255, 255, 255, .05);
  --card-shadow:
    0 2px 4px rgba(0, 0, 0, .38),
    0 18px 44px -18px rgba(0, 0, 0, .66);
  --card-shadow-hover:
    0 3px 8px rgba(0, 0, 0, .44),
    0 28px 58px -18px rgba(0, 0, 0, .72),
    0 0 40px -8px rgba(20, 184, 166, .18);
  --amb-glacier: rgba(20, 184, 166, .17);
  --amb-gold: rgba(6, 182, 212, .10);
  --glow-ring: 0 0 0 4px rgba(20, 184, 166, .32);
}

/* ── CHROME · glass ───────────────────────────────────────────────────
   The sticky app bar becomes a floating pane of glass over the contour
   paper: heavier blur + saturate, a lit top hairline, a shadow that
   deepens once the page has scrolled. */
/* (pill chrome lives on .site-header .container; the shell stays transparent) */
.site-header.wm-scrolled .container {
  box-shadow: var(--glass-ring), 0 18px 44px -12px rgba(21, 25, 34, .22);
}

/* Mobile bottom tab bar: glass vocabulary, but nearly opaque so high-contrast
   page text (footer fine print, map cards) can never bleed through the labels. */
.tabbar {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  -webkit-backdrop-filter: saturate(185%) blur(20px);
  backdrop-filter: saturate(185%) blur(20px);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 -6px 20px -12px rgba(0, 0, 0, .5);
}

/* Floating browse sheet: a true glass panel, not paper */
.browse-sheet {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(185%) blur(22px);
  backdrop-filter: saturate(185%) blur(22px);
  box-shadow: var(--shadow-lg), var(--card-ring);
}

/* ── HEROES · ambient light field ─────────────────────────────────────
   A soft radial wash of glacier + gold sits BEHIND the contour texture
   (contour-band is z-index:-1, this is z-index:-2), so the terrain lines
   still read as the top layer. Dark theme glows deeper, POV-void style. */
.hero { position: relative; isolation: isolate; }
.hero::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  /* reach the very top of the page, up behind the floating glass nav (header is
     ~74px of flow), so the glacial glow isn't cut off in a line below the nav */
  left: -1px; right: -1px; bottom: -1px;
  top: calc(-78px - env(safe-area-inset-top, 0px));
  background:
    radial-gradient(52% 70% at 88% 2%, var(--amb-glacier), transparent 60%),
    radial-gradient(40% 54% at 2% -10%, var(--amb-gold), transparent 52%);
}

/* The trail detail page has no hero; give the sheet a light field to
   float above, top-anchored so the sheet lifts off the paper. The field
   bleeds sideways past the sheet, so clip the container's horizontal
   overflow (clip keeps the top bleed and never makes a scroll container,
   so nothing scrolls horizontally at any width). */
.trail-detail { position: relative; overflow-x: clip; }
.trail-detail::before {
  content: ""; position: absolute; left: -6vw; right: -6vw; top: -2px; height: 460px;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 100% at 74% 0%, var(--amb-glacier), transparent 64%),
    radial-gradient(44% 84% at 14% 0%, var(--amb-gold), transparent 60%);
}

/* ── CONTENT · paper cards get the POV plate treatment ────────────────
   Layered soft shadow + inset hairline ring + slightly larger radius.
   These stay OPAQUE paper (no blur): a fine printed field-guide plate,
   never frosted plastic. */
.tcard,
.ccard,
.link-card,
.faq-item,
.instrument,
.gtk-verdict,
.cta-block,
.permit-apply,
.source-block,
.tcard-lite,
.toc,
.pcta {
  border-radius: var(--wm-r);
  box-shadow: var(--card-shadow), var(--card-ring);
  transition: transform .18s var(--wm-expo), box-shadow .28s var(--wm-expo),
    border-color .2s var(--wm-expo);
}

/* interactive cards: lift + deepen on hover */
.tcard:hover,
.ccard:hover,
.link-card:hover,
.tcard-lite:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover), var(--card-ring);
  border-color: var(--line-2);
}

/* difficulty spine is now a ::before pseudo-element on .tcard (see base rules)
   so it follows the card radius; nothing to trim here. */

/* the trail-detail survey sheet keeps its 3px sheet corners and punch
   holes, but now floats above the ambient wash */
.sheet { box-shadow: var(--card-shadow); }

/* field-guide plate frames gain the inset ring alongside their deep mat */
.plate-frame { box-shadow: var(--shadow-lg), var(--card-ring); }

/* photographic campsite card: match radius so the image crop stays clean */
.ccard { border-radius: var(--wm-r); }
.camp-photo { border-radius: var(--wm-r); box-shadow: var(--card-shadow), var(--card-ring); }

/* ── BUTTONS · POV pill: accent gradient + glow (walks orange / stays teal) ── */
.btn { border-radius: var(--r-full); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--btn-shadow);
}
.btn-primary:hover {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--btn-shadow-hover);
}
.btn-secondary { border-radius: var(--r-full); }

/* app-store pill in the bar gets a gentle glow on hover */
.btn-app:hover {
  box-shadow: 0 10px 26px -12px rgba(178, 61, 18, .6);
}

/* glow focus ring, added to the AA outline */
.btn:focus-visible,
.btn-app:focus-visible,
.chip:focus-visible,
.diff-chip:focus-visible,
.site-nav a:focus-visible,
.tcard h3 a:focus-visible {
  box-shadow: var(--glow-ring);
}

/* difficulty + region facet chips: pill lift on hover, quiet but alive */
.chip { transition: border-color .16s var(--wm-expo), color .16s var(--wm-expo),
  background .16s var(--wm-expo), transform .16s var(--wm-expo), box-shadow .2s var(--wm-expo); }
.chip:hover, .diff-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-shadow);
}

/* ── BIG HERO STAT NUMERALS (from basecamp) ───────────────────────────
   The existing hero-stats row is kept exactly as-is (flex, plate-grid
   placement untouched); only the numerals grow and take a glacier-to-gold
   tint. Both endpoint tokens are AA text inks, so the fill stays legible.
   The gradient is declared on both .data and its count-up wrapper so
   whichever element carries the number paints a self-contained clip. */
/* One flat accent, in the display voice, matching the cover's solid counts.
   The old teal->gold clip-gradient muddied to olive in light and read as a
   multi-hue gimmick against the teal-primary system. */
.hero-stats .data,
.hero-stats .data .wm-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--glacier-ink);
}
/* units / trailing labels stay muted */
.hero-stats .data .u {
  font-size: .5em;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 3px;
}

/* ── SCROLL REVEAL (paired with modern.js) ────────────────────────────
   Elements are hidden ONLY once JS marks the document; without JS every
   card is visible. Expo-eased rise, POV cadence. */
.wm-js .wm-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--wm-expo), transform .6s var(--wm-expo);
  will-change: opacity, transform;
}
.wm-js .wm-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── MOTION HELPERS (from fieldmotion) ────────────────────────────────
   .wm-draw: hero contour + elevation strokes drawing themselves in on
   load (transition set inline by JS). .wm-num: the count-up cell holds
   its final width so a ticking numeral never reflows its row. */
.wm-draw { will-change: stroke-dashoffset; }
.wm-num { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* ── prefers-reduced-motion: kill ALL motion, keep the surfaces ───────*/
@media (prefers-reduced-motion: reduce) {
  .wm-js .wm-reveal,
  .wm-js .wm-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .site-header,
  .tcard, .ccard, .link-card, .tcard-lite, .chip, .diff-chip,
  .btn, .btn-app {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TOWNS + FEATURE HUBS — /walks-near/* and /trails/<feature>.html
   Appended by build.pages.towns + build.pages.features. Additive only;
   nothing above is modified. Reuses .hero, .trail-grid, .ccard-grid,
   .link-grid, .chips and .field-links from the base system; the two new
   things are the community-holiday-park card and the town A-Z directory.
   ════════════════════════════════════════════════════════════════════ */

/* Community holiday parks in a town's "stay nearby" block. These sites have
   no detail page of their own, so the whole card is a link out to the park's
   website (or the live map when we hold no site). Lighter than .ccard: no
   photo, a paw glyph and the dog policy phrase carry it. */
.ccamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ccamp {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px 13px; text-decoration: none;
  transition: transform .16s var(--ease), box-shadow .2s, border-color .18s;
}
.ccamp:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.ccamp h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.ccamp-policy { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.ccamp-policy svg { width: 14px; height: 14px; color: var(--glacier-ink); flex-shrink: 0; }
.ccamp-dist { font-size: .78rem; color: var(--ink-3); }
/* ── Curated trip itinerary ──────────────────────────────────────── */
.trip-day { padding-top: 0; }
.trip-camp { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink-2); margin-bottom: 14px; }
.trip-camp svg { width: 16px; height: 16px; color: var(--glacier-ink); }
.trip-camp a { color: var(--glacier-ink); text-decoration: none; }
.trip-camp a:hover { text-decoration: underline; }
.trip-hikes { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.trip-hike { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.trip-hike > svg { width: 16px; height: 16px; color: var(--gold-ink); flex-shrink: 0; margin-top: 3px; }
.trip-hike .tl-name { font-weight: 600; }
.trip-hike .tl-name a { color: var(--glacier-ink); text-decoration: none; }
.trip-hike .tl-name a:hover { text-decoration: underline; }
.trip-hike .tl-meta { color: var(--ink-3); font-size: .82rem; margin-left: 6px; }
.trip-note { margin-top: 4px; font-size: .86rem; color: var(--ink-3); }
.ccamp-go { margin-top: auto; padding-top: 4px; font-size: .78rem; font-weight: 600; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.hero .lede.why { font-size: .98rem; color: var(--ink-2); margin-top: 8px; }
.ccamp-go svg { width: 12px; height: 12px; }

/* sub-eyebrow inside the "stay nearby" section, one per source */
.stay-sub { display: block; margin: 4px 0 12px; }
.stay-sub + .ccard-grid, .stay-sub + .ccamp-grid { margin-bottom: 26px; }

/* The town directory (/walks-near/) — regions as cards, towns A-Z inside,
   each with its live track count. */
.town-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.town-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 10px; }
.town-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.town-group-h a { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.town-group-h a:hover { color: var(--glacier-ink); }
.town-group-h .n { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.town-links { list-style: none; margin: 0; padding: 0; }
.town-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.town-links a:hover { color: var(--glacier-ink); }
.town-links a .n { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* the Profile nav item wears the dog's portrait when signed in */
.nav-avatar { width: 20px; height: 20px; border-radius: 999px; object-fit: cover;
  display: inline-block; vertical-align: -5px; margin-right: 7px;
  border: 1.5px solid var(--marker);
  background: var(--surface-2); /* new portraits have transparent backgrounds */ }
.has-avatar > svg { display: none; }
.tabbar .tab .nav-avatar { margin-right: 0; vertical-align: 0; }