/* =====================================================================
   WAYPOINT — SEAM Adventures design system
   One cached stylesheet (served from /assets/css/waypoint.css).
   Loaded only on pages with `waypoint: true` front matter during the
   Gate 2 → Gate 3 transition, then site-wide.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. TOKENS
 * ------------------------------------------------------------------ */
:root {
  /* — Palette (LOCKED) — */
  --dusk:        #12142a;   /* deep midnight-indigo base — never pure black */
  --dusk-2:      #191c38;   /* raised panel / card */
  --dusk-3:      #20243f;   /* hover / inset */
  --paper:       #f2ede1;   /* primary text — APCA Lc-94 / 15.5:1 on --dusk */
  --paper-read:  rgba(242,237,225,.82); /* long-form body prose — APCA ~Lc-70 */
  --paper-2:     rgba(242,237,225,.80); /* secondary prose: leads, standfirsts, subheads */
  --paper-dim:   rgba(242,237,225,.64); /* glanceable labels/captions/meta only — NOT sentences */
  --paper-faint: rgba(242,237,225,.46); /* decorative / disabled only — never running text */
  --amber:       #f5a623;   /* hazard amber — the single action/signal accent */
  --amber-deep:  #e08a10;
  --teal:        #4a9a8f;   /* topographic teal — route line + map marks ONLY */
  --line:        rgba(242,237,225,.11);
  --line-2:      rgba(242,237,225,.20);

  /* — Field-paper artifact palette (printed documents on the dusk world) —
     Money/spec surfaces render as physical field documents: warm cream, dusk-
     tinted ink (never black). Amber-as-TEXT fails contrast on cream (~2.2:1),
     so meaningful text uses ink-amber; amber survives on paper only as marks,
     rules and buttons. Scope: .artifact ONLY — prose stays in the night. */
  --field:     #efe8d8;
  --ink:       #1c1e33;
  --ink-dim:   rgba(28,30,51,.78); /* was .66 — failed AA at the slip's small label sizes */
  --ink-line:  rgba(28,30,51,.18);
  --ink-amber: #8a5405;

  /* — Type families (LOCKED) — */
  --f-display: 'Saira Condensed', 'Saira Fallback', system-ui, sans-serif; /* display / headings, UPPERCASE */
  --f-serif:   'Newsreader', 'Newsreader Fallback', Georgia, serif;        /* human / voice / long-form prose */
  --f-mono:    'Spline Sans Mono', 'Spline Fallback', ui-monospace, monospace; /* data, coordinates, labels, UI */

  /* — Type scale — zoom-safe: every clamp() middle term mixes rem + vw so
     browser zoom keeps working (WCAG 1.4.4). Never a pure-vw middle term. — */
  --fs-hero:    clamp(3.2rem, 1.4rem + 8.5vw, 10rem);
  --fs-finale:  clamp(2.4rem, 1.3rem + 5vw, 5.5rem);
  --fs-display: clamp(2rem, 1.3rem + 3vw, 3.6rem);   /* section titles */
  --fs-display-2: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); /* sub-section / grouped titles — the missing mid-tier between display and h3 */
  --fs-h3:      clamp(1.4rem, 1.2rem + 0.7vw, 1.7rem);
  --fs-lead:    clamp(1.12rem, 1rem + 0.55vw, 1.45rem);
  --fs-body:    1.06rem;
  --fs-small:   0.95rem;
  --fs-label:   0.76rem;  /* mono eyebrows / coords */

  /* — Rhythm & layout — */
  --wrap:    1280px;
  --rail:    76px;        /* left rail width where the route line lives */
  /* Rhythm tiers — deliberately varied vertical cadence so the page doesn't read
     as one section looped. Default is --section; tight compresses spec/data zones,
     breath opens up the itinerary and closing moments. */
  --section-tight:  clamp(32px, 3vw, 48px);
  --section: clamp(44px, 4.5vw, 72px);   /* tightened — was 72–128px, which left dark voids */
  --section-breath: clamp(72px, 8vw, 128px);
  --radius:  4px;         /* Waypoint uses near-square corners, never pills */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);  /* strong decelerate — section reveals */
}

/* ------------------------------------------------------------------ *
 * 2. BASE / RESET
 * ------------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
/* Scrolling is native. Anchor smoothness comes from scroll-behavior (motion-safe, §12). */
body {
  font-family: var(--f-display);
  background: var(--dusk);
  color: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--amber); color: var(--dusk); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.f-serif { font-family: var(--f-serif); }
.f-mono  { font-family: var(--f-mono); font-variant-numeric: tabular-nums slashed-zero; }
.f-cond  { font-family: var(--f-display); }

/* Coordinates / data read as cartographic: fixed-width figures, unambiguous zero */
.hero-coord, .trip-coord, .trip-wp, .tl-when, .gal-cap, .foot-links, .foot-note,
.eyebrow, .nav-links, .trip-sub, .hero-meta { font-variant-numeric: tabular-nums slashed-zero; }

h1, h2, h3 {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: .92;
}

/* Skip link (a11y) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--amber); color: var(--dusk);
  padding: .6rem 1rem; font-family: var(--f-mono); font-size: .8rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.skip-link:focus { left: 0; }

/* Placeholder photo block (used until real photos flow in during Gate 3) */
.ph {
  position: relative;
  background: repeating-linear-gradient(135deg, var(--dusk-2), var(--dusk-2) 14px, var(--dusk-3) 14px, var(--dusk-3) 28px);
  display: grid; place-items: center; color: var(--paper-faint); overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
}

/* Photo treatment — REVISED: the dusk world is carried by the UI surfaces and
   grain, not by strangling the photos. Travel sells through imagery: galleries
   run at full vibrancy (these are the proof-of-life shots); the indigo overlay
   survives only where text sits on an image (heroes' scrim, finale). */
.media-treat { position: relative; overflow: hidden; }
.media-treat img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1) contrast(1.02); }
.media-treat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,20,42,0) 0%, rgba(18,20,42,.28) 100%);
  mix-blend-mode: multiply;
}
/* Galleries: full color, zero overlay. */
.gal-grid .media-treat::after, .gal .media-treat::after { display: none; }
.gal-grid .media-treat img, .gal .media-treat img { filter: none; }

/* ── Field-paper artifact — printed documents on the dusk world ──
   Scope class carrying the full inverse token set; never hand-patch colors
   inside. Hard corners, stamped shadow, no rotation/tape/tears — a printed
   field document, not a scrapbook prop. */
.artifact { background: var(--field); color: var(--ink); border: 1px solid rgba(28,30,51,.4); border-radius: 0; box-shadow: 5px 5px 0 rgba(0,0,0,.35); }
.artifact ::selection { background: var(--ink); color: var(--field); }

/* ------------------------------------------------------------------ *
 * 3. LAYOUT SCAFFOLD
 * ------------------------------------------------------------------ */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.section { padding: var(--section) 0; position: relative; }
.section--tight  { padding: var(--section-tight) 0; }
.section--breath { padding: var(--section-breath) 0; }
.page { padding-left: var(--rail); }
@media (max-width: 900px) { .page { padding-left: 0; } }

.eyebrow {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: 2px;
  text-transform: uppercase; color: var(--amber);
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.eyebrow .idx { color: var(--paper-dim); } /* AA: paper-dim 6.88:1 (paper-faint 4.14 failed small text) */

.sec-title { font-size: var(--fs-display); }
/* Grouped / sub-section titles sit on the real mid-tier, not a hand-patched inline size. */
.sec-title-2 { font-size: var(--fs-display-2); }
/* Headline emphasis stays solid paper — teal is reserved for the route only, so
   two-tone headline words don't dilute the signature. One amber word max per page
   (the finale) carries deliberate emphasis. */
.sec-title .teal { color: var(--paper); }

.lead { font-family: var(--f-serif); font-size: var(--fs-lead); color: var(--paper-2); max-width: 60ch; line-height: 1.5; }
.prose { font-family: var(--f-serif); font-size: var(--fs-body); color: var(--paper-read); max-width: 66ch; }
.prose p + p { margin-top: 1em; }
.prose h2, .prose h3 { font-family: var(--f-display); text-transform: uppercase; color: var(--paper); letter-spacing: .02em; margin: 1.8em 0 .5em; font-size: 1.35rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a { color: var(--amber); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * 4. BUTTONS  (near-square, never pills)
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: var(--radius);
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: 1px; text-transform: uppercase;
  transition: transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
  cursor: pointer; border: 1px solid transparent;
  /* Reset the UA <button> background — without this, real <button class="btn">
     elements (gate "Show", form "← Back") paint cream text on white ButtonFace. */
  background: none; appearance: none; -webkit-appearance: none;
}
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
/* Stamped, mechanical hover — no floaty glow-lift (that soft colored drop-shadow
   is the single most templated button hover on the web). */
.btn-amber { background: var(--amber); color: var(--dusk); font-weight: 600; box-shadow: 3px 3px 0 rgba(0,0,0,.28); }
.btn-amber:hover { background: var(--amber-deep); transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(0,0,0,.28); }
.btn-line { border-color: var(--line-2); color: var(--paper); }
.btn-line:hover { background: rgba(242,237,225,.06); border-color: var(--paper); }

/* ------------------------------------------------------------------ *
 * 5. NAV
 * ------------------------------------------------------------------ */
.wp-nav { position: fixed; inset: 0 0 auto; z-index: 100; transition: background .4s, border-color .4s; }
.wp-nav.scrolled { background: rgba(18,20,42,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.wp-nav .nav-in { max-width: var(--wrap); margin: 0 auto; padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: 1.4rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.brand .ring { width: 20px; height: 20px; border: 3px solid var(--amber); border-radius: 50%; position: relative; flex: none; }
.brand .ring::after { content: ""; position: absolute; inset: 4px; background: var(--teal); border-radius: 50%; }
.nav-links { display: flex; gap: 30px; align-items: center; list-style: none; }
.nav-links a { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: 1px; text-transform: uppercase; color: var(--paper-dim); transition: color .2s; }
.nav-links a:hover { color: var(--paper); }
.nav-cta { border: 1px solid var(--line-2); padding: 8px 18px; border-radius: var(--radius); color: var(--paper) !important; transition: all .25s; }
.nav-cta:hover { background: var(--amber); border-color: var(--amber); color: var(--dusk) !important; }
.nav-burger { display: none; background: none; border: 1px solid var(--line-2); color: var(--paper); font-size: .7rem; font-family: var(--f-mono); padding: 9px 14px; min-height: 44px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }

/* dropdown (Trips) */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after { content: " ▾"; font-size: .7rem; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(18,20,42,.98); border: 1px solid var(--line-2); border-radius: var(--radius); padding: .5rem 0; min-width: 230px; box-shadow: 5px 5px 0 rgba(0,0,0,.28); }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: .55rem 1.25rem; font-size: .8rem; white-space: nowrap; letter-spacing: .5px; }
.dropdown-menu a:hover { background: rgba(242,237,225,.06); color: var(--paper); }
.dd-label { font-family: var(--f-mono); font-size: .66rem; letter-spacing: 2px; text-transform: uppercase; color: var(--paper-dim); padding: .5rem 1.25rem .25rem; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .wp-nav .nav-menu[data-open="true"] ~ .nav-burger { }
  .wp-nav.open .nav-menu { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: .25rem; background: rgba(18,20,42,.98); border-bottom: 1px solid var(--line); padding: 1rem 28px 1.5rem; }
  .wp-nav.open .nav-links { display: flex; flex-direction: column; gap: .25rem; width: 100%; }
  /* Tap targets: top-level drawer links were 15px tall with no padding (WCAG 2.5.8
     wants 24px minimum; platform guidance 44px). */
  .wp-nav.open .nav-links > li > a { display: block; padding: 12px 0; min-height: 44px; box-sizing: border-box; }
  .wp-nav.open .nav-links .nav-cta { display: inline-block; padding: 12px 18px; }
  .wp-nav.open .dropdown-menu { display: block; position: static; transform: none; border: none; box-shadow: none; padding-left: 1rem; min-width: 0; }
  .wp-nav.open .nav-dropdown > a::after { content: ""; }
}

/* ------------------------------------------------------------------ *
 * 6. ROUTE RAIL (signature element — static here; scroll-draw JS lands in Gate 4)
 * ------------------------------------------------------------------ */
.route { position: fixed; top: 0; left: 0; width: var(--rail); height: 100vh; z-index: 50; pointer-events: none; }
.route svg { width: 100%; height: 100%; }
.route .track { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.route .drawn { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; }
.route .ridernow { fill: var(--amber); stroke: var(--dusk); stroke-width: 3; }
@media (max-width: 900px) { .route { display: none; } }

/* ------------------------------------------------------------------ *
 * 7. HERO
 * ------------------------------------------------------------------ */
/* 78svh (not 100): the first trip rows peek above the fold — information scent
   toward the pick list, per the conversion pass. */
.hero { position: relative; min-height: 78svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 28px 60px; max-width: var(--wrap); margin: 0 auto; }
.hero-coord { font-family: var(--f-mono); font-size: .74rem; letter-spacing: 2px; color: var(--teal); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.hero-coord::before { content: ""; width: 34px; height: 1px; background: var(--teal); }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -.005em; }
.hero h1 .amber { color: var(--amber); }
.hero h1 .outline { -webkit-text-stroke: 1.5px var(--paper); color: transparent; }
.hero-lead { font-family: var(--f-serif); font-size: var(--fs-lead); color: var(--paper-2); max-width: 600px; margin: 30px 0 34px; line-height: 1.5; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { margin-top: 44px; display: flex; gap: 34px; flex-wrap: wrap; font-family: var(--f-mono); font-size: .72rem; letter-spacing: 1px; color: var(--paper-dim); border-top: 1px solid var(--line); padding-top: 16px; }
.hero-meta b { color: var(--amber); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 8. TRIPS — waypoint rows (not cards)
 * ------------------------------------------------------------------ */
.trips { border-top: 1px solid var(--line-2); }
.trip { display: grid; grid-template-columns: 64px 1.4fr 1fr auto; gap: 26px; align-items: center; padding: 26px 8px; border-bottom: 1px solid var(--line); transition: background .2s; position: relative; }
.trip:hover { background: var(--dusk-2); }
.trip-wp { font-family: var(--f-mono); font-size: .78rem; color: var(--teal); letter-spacing: 1px; }
.trip-wp b { display: block; color: var(--amber); font-size: 1.3rem; font-weight: 600; }
.trip h3 { font-size: var(--fs-h3); }
.trip h3 a { color: inherit; }
.trip:hover h3 a { color: var(--amber); }
.trip-sub { font-family: var(--f-mono); font-size: .74rem; color: var(--paper-dim); letter-spacing: .5px; margin-top: 5px; text-transform: uppercase; }
.trip-coord { font-family: var(--f-mono); font-size: .78rem; color: var(--paper-dim); }
/* Default to a legible amber-outlined action so it reads as the register button on
   touch (no :hover on mobile); fills solid on hover/focus for pointer users. */
.trip-cta { font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: 1px; color: var(--amber); border: 1px solid rgba(245,166,35,.45); padding: 10px 16px; border-radius: var(--radius); white-space: nowrap; transition: all .25s; }
.trip:hover .trip-cta, .trip-cta:focus-visible { background: var(--amber); border-color: var(--amber); color: var(--dusk); }
/* Register-page layout: form left, booking-slip artifact right on desktop
   (the paper slip belongs at the decision point — DESIGN_CANON §8). Mobile
   keeps the compact header facts; the rail hides to avoid triple-stating price. */
.reg-layout { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .reg-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .reg-rail { position: sticky; top: 92px; }
}
@media (max-width: 1023px) { .reg-rail { display: none; } }

/* Optional hero thumbnail cell — the row stays a route entry, the photo is a
   passport-style stamp (duplicate link: decorative, skipped by keyboard/AT). */
.trip.has-thumb { grid-template-columns: 64px 140px 1.4fr 1fr auto; }
.trip-thumb { display: block; width: 140px; height: 90px; overflow: hidden; }
.trip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .trip, .trip.has-thumb { grid-template-columns: 48px 1fr; gap: 14px; }
  .trip-thumb { display: none; }
  .trip-coord, .trip-cta { grid-column: 2; }
  .trip-cta { justify-self: start; margin-top: 6px; }
}

/* timeline (about page "road so far") */
.timeline { border-top: 1px solid var(--line-2); margin-top: 24px; }
.tl { display: grid; grid-template-columns: 160px 1fr; gap: 26px; padding: 28px 8px; border-bottom: 1px solid var(--line); }
.tl .tl-when { font-family: var(--f-mono); font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); }
.tl h3 { font-size: 1.35rem; margin-bottom: 8px; }
@media (max-width: 640px) { .tl { grid-template-columns: 1fr; gap: 8px; } }

/* status badge (drives sold-out / waitlist in the amber "hazard" language) */
.wp-badge { font-family: var(--f-mono); font-size: .64rem; letter-spacing: 1.5px; text-transform: uppercase; padding: .25rem .6rem; border-radius: 0; border: 1px solid var(--line-2); color: var(--paper-dim); }
.wp-badge.open { color: var(--amber); border-color: rgba(245,166,35,.4); }
.wp-badge.sold { color: var(--dusk); background: var(--amber); border-color: var(--amber); }

/* ------------------------------------------------------------------ *
 * 9. WHY — 3×2 numbered index
 * ------------------------------------------------------------------ */
.panel { background: var(--dusk-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Why — unboxed two-column numbered manifest (hairline rules, no card boxes).
   The boxed symmetric 3-up card grid was the loudest template tell on the site. */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 24px; border-top: 1px solid var(--line-2); }
.why-card { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.why-card .n { grid-row: 1 / span 2; font-family: var(--f-mono); font-size: .8rem; color: var(--amber); letter-spacing: 1px; padding-top: 7px; }
.why-card h3 { grid-column: 2; font-size: 1.35rem; margin: 0 0 6px; }
.why-card p { grid-column: 2; font-family: var(--f-serif); color: var(--paper-read); font-size: .98rem; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ *
 * 10. VOICES — testimonials
 * ------------------------------------------------------------------ */
/* Voices — one dominant editorial pull-quote + two supporting, unboxed.
   Asymmetry reads as curation; three identical cards with initial-circle
   avatars read as generated reviews. Attribution is a mono dateline. */
.voices { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px 60px; margin-top: 28px; }
.voice { border: 0; background: none; padding: 0; }
.voice:first-child { grid-row: 1 / span 2; align-self: center; padding-right: 40px; border-right: 1px solid var(--line); }
.voice:first-child .q { font-size: clamp(1.45rem, 1.15rem + 1.5vw, 2.05rem); line-height: 1.4; color: var(--paper); }
.voice:nth-child(3) { border-top: 1px solid var(--line); padding-top: 24px; }
.voice .q { font-family: var(--f-serif); font-style: italic; font-size: 1.12rem; line-height: 1.5; margin-bottom: 16px; color: var(--paper-read); }
.voice .who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.voice .name { font-family: var(--f-mono); font-size: .74rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--paper); }
.voice .meta { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .5px; color: var(--paper-dim); text-transform: uppercase; }
.voice .meta::before { content: "— "; }
@media (max-width: 900px) {
  .voices { grid-template-columns: 1fr; gap: 26px; }
  .voice:first-child { grid-row: auto; padding-right: 0; border-right: 0; }
  .voice:nth-child(2) { border-top: 1px solid var(--line); padding-top: 24px; }
}

/* ------------------------------------------------------------------ *
 * 10b. ABOUT (founder)
 * ------------------------------------------------------------------ */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.about .about-media { aspect-ratio: 4/5; border-radius: var(--radius); }
.about .prose { margin-bottom: 14px; }
.cred { list-style: none; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.cred li { font-family: var(--f-mono); font-size: .82rem; color: var(--paper-dim); letter-spacing: .3px; display: flex; gap: 12px; }
.cred li::before { content: "→"; color: var(--paper-dim); }
.sig { font-family: var(--f-serif); font-style: italic; color: var(--paper-2); font-size: 1.2rem; margin-top: 8px; }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; gap: 30px; } .about .about-media { max-width: 420px; aspect-ratio: 3/2; } }

/* ------------------------------------------------------------------ *
 * 10c. GALLERY strip
 * ------------------------------------------------------------------ */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.gal .media-treat { aspect-ratio: 3/4; border-radius: var(--radius); }
.gal .media-treat:first-child { grid-row: span 2; aspect-ratio: 3/8; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(2, 1fr); } .gal .media-treat:first-child { grid-row: auto; aspect-ratio: 3/4; } }
/* Editorial gallery grid (gallery page + trip "on the ground"):
   a full-width cinematic breaker leads each cycle, 3-up rows between —
   scale contrast instead of a uniform thumbnail wall. */
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.gal-grid .media-treat { aspect-ratio: 4/3; border-radius: var(--radius); }
.gal-grid .gal-wide { grid-column: 1 / -1; aspect-ratio: 21/9; }
@media (max-width: 640px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gal-grid .gal-wide { aspect-ratio: 16/9; }
}
.gal-cap { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .5px; color: var(--paper-dim); margin-top: 10px; max-width: 70ch; }

/* ------------------------------------------------------------------ *
 * 10d. FINALE (closing CTA)
 * ------------------------------------------------------------------ */
/* Finale: left-aligned against the rail axis — the centered closing CTA was the
   most repeated template ending on the site. */
.finale { position: relative; text-align: left; padding: clamp(90px, 13vw, 150px) 28px; overflow: hidden; }
.finale .finale-bg { position: absolute; inset: 0; z-index: 0; opacity: .28; }
/* Dusk vignette for text legibility over the photo — no amber bloom (the glow
   contradicted the stamped, no-glow ethos). Amber lives only in the headline word. */
.finale::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 100% at 50% 42%, rgba(18,20,42,.70), rgba(18,20,42,.94)); z-index: 1; }
.finale-in { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; }
.finale-in > * { max-width: 840px; }
.finale h2 { font-size: var(--fs-finale); }
.finale h2 .amber { color: var(--amber); }
.finale p { font-family: var(--f-serif); color: var(--paper-read); font-size: 1.1rem; margin: 18px 0 32px; }

/* Status banner (feature-flags.js injects this on .wp pages in the amber language) */
.wp-statusbar { background: var(--amber); color: var(--dusk); text-align: center; padding: 11px 1rem; font-family: var(--f-mono); font-weight: 600; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; position: fixed; top: 0; left: 0; right: 0; z-index: 1100; }
.wp-statusbar a { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * 10e. FAQ accordion (native <details>)
 * ------------------------------------------------------------------ */
.faq-cat { margin-top: 44px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; font-family: var(--f-display); text-transform: uppercase; font-size: 1.12rem; letter-spacing: .01em; color: var(--paper); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--f-mono); color: var(--amber); font-size: 1.4rem; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { color: var(--amber); }
.faq-a { padding: 0 0 26px; max-width: 72ch; }
.faq-a p { font-family: var(--f-serif); color: var(--paper-read); margin-bottom: 10px; }
.faq-a ul { margin: 10px 0; padding-left: 20px; }
.faq-a li { font-family: var(--f-serif); color: var(--paper-read); margin: 4px 0; }
.faq-a strong { color: var(--paper); font-weight: 500; }
.callout { border-left: 3px solid var(--amber); background: var(--dusk-2); padding: 14px 18px; margin: 14px 0; font-family: var(--f-serif); color: var(--paper-read); border-radius: 0 var(--radius) var(--radius) 0; }

/* ================================================================== *
 * TRIP DETAIL PAGE — "expedition dossier"
 * ================================================================== */
/* Hero: full-bleed treated photo (real <img> = LCP), text over a scrim. */
.trip-hero { position: relative; min-height: 74svh; display: flex; align-items: flex-end; overflow: hidden; }
.trip-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1) contrast(1.03); z-index: 0; }
/* Scrim: keep the top clear so the photo reads; only darken the lower third for text. */
/* Top band darkened so the fixed nav stays legible over bright skies (pre-scroll
   the nav has no background of its own). */
.trip-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,20,42,.55) 0%, rgba(18,20,42,.18) 14%, rgba(18,20,42,.05) 30%, rgba(18,20,42,.45) 62%, var(--dusk) 100%); }
.trip-hero-in { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; width: 100%; padding: 0 28px 56px; }
.trip-hero .hero-coord { margin-bottom: 14px; }
.trip-hero h1 { font-size: clamp(3rem, 1.5rem + 7.5vw, 8rem); letter-spacing: -.01em; }
.trip-hero h1 .hero-year { display: block; color: var(--amber); }
.trip-hero .trip-route { font-family: var(--f-serif); font-size: var(--fs-lead); color: var(--paper-2); margin: 14px 0 24px; max-width: 40ch; }
.trip-hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.trip-hero-from { font-family: var(--f-mono); font-size: .8rem; letter-spacing: 1px; color: var(--paper-dim); }
.trip-hero-from b { color: var(--paper); font-size: 1.1rem; }

/* Dossier: mono spec sheet strip */
.dossier { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; margin-top: -28px; position: relative; z-index: 3; }
.dossier .cell { background: var(--dusk); padding: 18px 20px; }
.dossier .k { font-family: var(--f-mono); font-size: .64rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 6px; }
.dossier .v { font-family: var(--f-mono); font-size: .92rem; color: var(--paper); font-variant-numeric: tabular-nums slashed-zero; }

/* Ride profile: data readout */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 24px; }
/* Inside the trip content column: balanced 2x2 (auto-fit left a lopsided hole) */
.trip-main .profile-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .trip-main .profile-grid { grid-template-columns: 1fr; } }
.profile-grid .p { background: var(--dusk-2); padding: 24px; }
.profile-grid .p .k { font-family: var(--f-mono); font-size: .66rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 8px; }
.profile-grid .p .v { font-family: var(--f-display); text-transform: uppercase; font-size: 1.2rem; color: var(--paper); }
.profile-grid .p .s { font-family: var(--f-serif); font-size: .9rem; color: var(--paper-dim); margin-top: 4px; }

/* Route schematic — a transit-line diagram of the trip's stops (real place names
   from the itinerary). Honest schematic, not a geographic map; amber endpoints,
   teal route line, mono labels. Scrolls horizontally on narrow screens. */
.route-map { list-style: none; display: flex; margin: 26px 0 2px; padding: 6px 2px 4px; overflow-x: auto; scrollbar-width: none; }
.route-map::-webkit-scrollbar { display: none; }
.route-map .rm-stop { position: relative; flex: 1 0 auto; min-width: 84px; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 12px; }
.route-map .rm-stop::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: var(--teal); }
.route-map .rm-stop:first-child::before { display: none; }
.route-map .rm-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--dusk); border: 2px solid var(--teal); position: relative; z-index: 1; }
.route-map .rm-stop.rm-end .rm-dot { background: var(--amber); border-color: var(--amber); }
.route-map .rm-name { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .3px; color: var(--paper-dim); margin-top: 10px; white-space: nowrap; padding: 0 6px; }
.route-map .rm-stop.rm-end .rm-name { color: var(--paper); }

/* Itinerary as a vertical route line — each day is a waypoint node */
.route-list { margin-top: 28px; padding-left: 4px; }
.stop { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 0 0 34px 34px; }
.stop::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: -6px; width: 2px; background: var(--line-2); }
.stop:last-child::before { display: none; }
.stop::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--dusk); border: 2px solid var(--teal); }
.stop:first-child::after, .stop:hover::after { background: var(--amber); border-color: var(--amber); }
.stop .stop-day { font-family: var(--f-mono); font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); padding-top: 1px; }
.stop h3 { font-size: 1.3rem; margin-bottom: 6px; }
.stop p { font-family: var(--f-serif); color: var(--paper-read); font-size: 1rem; max-width: 60ch; }
@media (max-width: 640px) { .stop { grid-template-columns: 1fr; gap: 4px; } }

/* Included / excluded — two columns */
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; }
.incl ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.incl li { font-family: var(--f-serif); color: var(--paper-read); display: flex; gap: 12px; align-items: baseline; }
.incl li::before { font-family: var(--f-mono); font-size: .8rem; flex: none; }
.incl .in li::before { content: "✓"; color: var(--paper); }
.incl .out li { color: var(--paper-read); }
.incl .out li::before { content: "×"; color: var(--paper-faint); }
.incl h3 { font-size: 1.1rem; margin-bottom: 14px; }
@media (max-width: 640px) { .incl { grid-template-columns: 1fr; gap: 28px; } }

/* Pricing panel with deposit -> balance timeline */
.price-panel { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--dusk-2); padding: 32px; max-width: 520px; }
.price-panel .amt { font-family: var(--f-display); font-size: clamp(2.4rem, 1.5rem + 4vw, 3.6rem); color: var(--amber); line-height: 1; }
.price-panel .amt span { font-family: var(--f-mono); font-size: .8rem; color: var(--paper-dim); letter-spacing: 1px; margin-left: 8px; }
.pay-line { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .82rem; }
.pay-line:first-of-type { margin-top: 20px; }
.pay-line .pl-k { color: var(--paper-dim); min-width: 74px; letter-spacing: 1px; text-transform: uppercase; font-size: .68rem; }
.pay-line .pl-v { color: var(--paper); }
.pay-line .pl-due { color: var(--paper-dim); margin-left: auto; }
.price-note { font-family: var(--f-serif); font-size: .92rem; color: var(--paper-read); margin-top: 18px; }

/* ── Two-column trip layout: content spine + sticky booking slip ──
   The slip is the paper booking artifact, always in view on desktop (the
   Airbnb-pattern persistent offer, spoken in the field-document language).
   Below 1024px the slip renders in-flow after the dossier. */
.trip-layout { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
@media (min-width: 1024px) {
  .trip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 56px; align-items: start; }
  .trip-main { grid-column: 1; grid-row: 1; }
  .trip-rail { grid-column: 2; grid-row: 1; position: sticky; top: 92px; margin-top: 44px; }
}
@media (max-width: 1023px) { .trip-rail { max-width: 480px; margin: 30px 0 4px; } }

/* Booking slip (paper artifact) */
.slip { padding: 24px 26px 20px; }
.slip-tag { font-family: var(--f-mono); font-size: .66rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); border-bottom: 1px solid var(--ink-line); padding-bottom: 12px; margin-bottom: 16px; }
.slip .amt { font-family: var(--f-display); font-size: 2.6rem; font-weight: 700; color: var(--ink-amber); line-height: 1; text-transform: uppercase; }
.slip .amt span { font-family: var(--f-mono); font-size: .72rem; font-weight: 400; color: var(--ink-dim); margin-left: 8px; letter-spacing: 1px; }
.slip-share { font-family: var(--f-serif); font-style: italic; font-size: .84rem; color: var(--ink-dim); margin: 6px 0 12px; line-height: 1.45; }
.slip .pay-line { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--ink-line); font-family: var(--f-mono); font-size: .78rem; font-variant-numeric: tabular-nums slashed-zero; }
.slip .pay-line:first-of-type { margin-top: 16px; }
.slip .pl-k { color: var(--ink-dim); min-width: 62px; letter-spacing: 1px; text-transform: uppercase; font-size: .72rem; }
.slip .pl-v { color: var(--ink); }
.slip .pl-due { color: var(--ink-dim); margin-left: auto; font-size: .72rem; text-align: right; }
.slip .btn { width: 100%; justify-content: center; margin-top: 16px; }
.slip-note { font-family: var(--f-serif); font-size: .9rem; color: var(--ink); margin-top: 14px; line-height: 1.5; }
.slip-terms { font-family: var(--f-serif); font-size: .84rem; color: var(--ink-dim); margin-top: 8px; line-height: 1.5; }
.slip-meta { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .5px; color: var(--ink-dim); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ink-line); }
.slip-meta a { color: var(--ink); text-decoration: underline; }
.slip-record { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-dim); margin-top: 10px; }

/* Track-record strip — verifiable numbers at the ask */
.record-strip { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--paper-dim); margin-top: 16px; }
.record-strip b { color: var(--amber); font-weight: 600; }

/* Straight answers — top objections, always open, at the decision point */
.answers { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; max-width: 68ch; }
.answers .qa h3 { font-size: 1.15rem; margin-bottom: 6px; }
.answers .qa p { font-family: var(--f-serif); color: var(--paper-read); }
.answers .qa a { color: var(--amber); text-decoration: underline; }

/* Final CTA band — replaces the centered cross-sell exit ramp */
.final-band { border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 34px; display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; }
.final-band .fb-note { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .5px; color: var(--paper-dim); }
.final-band .fb-note a { color: var(--paper); text-decoration: underline; }

/* Mobile sticky reserve bar (detail pages only, below the desktop rail).
   Carries risk-reversal, not just price. JS slides it in after the hero
   (.rb-init enables the hidden state so no-JS visitors always see the bar). */
.reserve-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px; background: rgba(18,20,42,.95); backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); }
.reserve-bar.rb-init { transform: translateY(102%); transition: transform .35s var(--ease-out); }
.reserve-bar.rb-init.rb-show { transform: none; }
.reserve-bar .rb-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reserve-bar .rb-price { font-family: var(--f-mono); font-size: .8rem; color: var(--paper-dim); letter-spacing: .5px; white-space: nowrap; }
.reserve-bar .rb-price b { color: var(--paper); font-size: 1.02rem; }
.reserve-bar .rb-sub { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .5px; color: var(--paper-dim); text-transform: uppercase; }
.reserve-bar .btn { padding: 12px 22px; flex: none; }
@media (max-width: 1023px) { .reserve-bar { display: flex; } body.wp.has-rb { padding-bottom: 76px; } }

.sold-stamp { display: inline-block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--dusk); background: var(--amber); padding: .3rem .8rem; border-radius: 0; }

/* ------------------------------------------------------------------ *
 * 11. FOOTER
 * ------------------------------------------------------------------ */
.wp-footer { border-top: 1px solid var(--line); padding: 40px 28px; }
.wp-footer .foot-in { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.wp-footer .foot-links { display: flex; flex-wrap: wrap; gap: 20px; font-family: var(--f-mono); font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; color: var(--paper-dim); }
.wp-footer .foot-links a:hover { color: var(--amber); }
.wp-footer .foot-note { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 1px; color: var(--paper-dim); }

/* ------------------------------------------------------------------ *
 * 12. MOTION — section reveals
 *   Researched premium spec: opacity 0->1 + translateY 16px, ~550ms, strong
 *   ease-out, transform/opacity only (compositor-safe). Progressive enhancement:
 *     • Modern browsers → CSS scroll-driven (animation-timeline: view()), off
 *       the main thread, zero JS.
 *     • Others → JS adds .reveal-js on <html>, IntersectionObserver toggles .in.
 *       If JS AND scroll-driven are both absent, content simply stays visible.
 *     • prefers-reduced-motion → no movement.
 * ------------------------------------------------------------------ */
@keyframes wp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Complete the fade-in early (by the time the element is ~half into view) so
       content is never left sitting invisible during a slow scroll. */
    .reveal { opacity: 0; animation: wp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    /* Staggered variant: children of a .reveal-group each start their reveal a
       little later, so grouped items (trip rows, why-cards, gallery) cascade in
       rather than snapping together. Ranges stay inside 0–55% so nothing is left
       invisible. */
    .reveal-group > * { opacity: 0; animation: wp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .reveal-group > *:nth-child(2) { animation-range: entry 6% entry 62%; }
    .reveal-group > *:nth-child(3) { animation-range: entry 12% entry 66%; }
    .reveal-group > *:nth-child(4) { animation-range: entry 16% entry 70%; }
    .reveal-group > *:nth-child(5) { animation-range: entry 20% entry 72%; }
    .reveal-group > *:nth-child(n+6) { animation-range: entry 24% entry 76%; }
  }
}
/* IO fallback path — .reveal-js is added by JS only when scroll-driven is unsupported */
.reveal-js .reveal, .reveal-js .reveal-group > * { opacity: 0; transform: translateY(16px); }
.reveal-js .reveal.in, .reveal-js .reveal-group > *.in { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.reveal-js .reveal-group > *:nth-child(2).in { transition-delay: .07s; }
.reveal-js .reveal-group > *:nth-child(3).in { transition-delay: .14s; }
.reveal-js .reveal-group > *:nth-child(4).in { transition-delay: .21s; }
.reveal-js .reveal-group > *:nth-child(n+5).in { transition-delay: .28s; }

/* ── Hero entrance ──
   LCP-safe: transform-only rise (opacity stays 1) so the hero H1 — often the
   Largest Contentful Paint on the home page — is painted immediately and the
   animation never delays LCP. Plays once on load; skipped under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes wp-hero-rise { from { transform: translateY(20px); } to { transform: none; } }
  .hero > *, .trip-hero-in > * { animation: wp-hero-rise .7s var(--ease-out) both; }
  .hero > *:nth-child(1), .trip-hero-in > *:nth-child(1) { animation-delay: .02s; }
  .hero > *:nth-child(2), .trip-hero-in > *:nth-child(2) { animation-delay: .10s; }
  .hero > *:nth-child(3), .trip-hero-in > *:nth-child(3) { animation-delay: .18s; }
  .hero > *:nth-child(4), .trip-hero-in > *:nth-child(4) { animation-delay: .26s; }
  .hero > *:nth-child(n+5), .trip-hero-in > *:nth-child(n+5) { animation-delay: .34s; }
}

/* ── Anchor scrolling: native CSS smooth scroll, motion-safe only.
   (No JS scroll-hijack library — a wheel that always works beats inertial
   polish. Reduced-motion gets instant jumps via the reduce block below.) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

/* ================================================================== *
 * 13. CRAFT REFINEMENTS (design-critique pass) — texture, tighter
 *     condensed display, real type tier, editorial serif detail.
 * ================================================================== */

/* Fine film grain over the flat indigo — turns a hex fill into a "journal"
   surface. One inline SVG, no request; faint enough to leave text crisp. */
.wp::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .wp::after { display: none; } }

/* Commit to the condensed grotesque: display sizes want tight/negative tracking
   (loose caps on a condensed face read timid). Small mono labels keep their spacing. */
.sec-title, .finale h2 { letter-spacing: -.01em; }
.hero h1, .trip-hero h1 { letter-spacing: -.02em; line-height: .9; }

/* One italic serif word inside a display headline — the human editorial move.
   Lowercase Newsreader italic breaking the uppercase condensed run. Use on at
   most one headline per page. */
.sec-title em, .finale h2 em {
  /* weight 400: the only italic Newsreader face shipped — declaring 500 made
     browsers substitute silently (DESIGN_CANON §2: declare what exists). */
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  text-transform: lowercase; letter-spacing: 0; font-size: .95em;
}

/* ── Artifact adaptations: the money components as printed field documents ── */
/* Dossier manifest: cream cells, ink text, hairlines in ink. */
.dossier.artifact { background: var(--ink-line); }
.dossier.artifact .cell { background: var(--field); }
.dossier.artifact .k { color: var(--ink-dim); }
.dossier.artifact .v { color: var(--ink); }
.dossier.artifact .cell:nth-child(4) .v { color: var(--ink-amber); }
.dossier.artifact .cell::before { background: var(--ink-amber); }
/* Price / booking slip */
.price-panel.artifact { background: var(--field); border-color: rgba(28,30,51,.4); }
.price-panel.artifact .amt { color: var(--ink-amber); }
.price-panel.artifact .amt span { color: var(--ink-dim); }
.price-panel.artifact .pay-line { border-top-color: var(--ink-line); }
.price-panel.artifact .pl-k, .price-panel.artifact .pl-due { color: var(--ink-dim); }
.price-panel.artifact .pl-v { color: var(--ink); }
.price-panel.artifact .price-note { color: var(--ink-dim); }
/* Route schematic on paper: darkened teal marks (paper-legible), ink labels. */
.route-map-card { padding: 24px 26px 18px; margin-top: 26px; }
.route-map-card .route-map { margin: 0; padding-bottom: 0; }
.artifact .route-map .rm-stop::before { background: #3d7f76; }
.artifact .route-map .rm-dot { background: var(--field); border-color: #3d7f76; }
.artifact .route-map .rm-stop.rm-end .rm-dot { background: var(--ink-amber); border-color: var(--ink-amber); }
.artifact .route-map .rm-name { color: var(--ink-dim); }
.artifact .route-map .rm-stop.rm-end .rm-name { color: var(--ink); font-weight: 600; }

/* Fill the missing type tier (everything clustered at ~1.3rem before). */
.stop h3, .why-card h3, .tl h3 { font-size: 1.5rem; }

/* Editorial serif detail — drop cap on opening prose, oldstyle figures in prose.
   .prose-plain opts out (legal/utility pages — DESIGN_CANON §3: drop caps are
   an editorial device, not a legal-document one). */
.prose { font-variant-numeric: oldstyle-nums; }
.prose > p:first-of-type::first-letter {
  float: left; font-family: var(--f-display); font-weight: 700;
  font-size: 3.1em; line-height: .74; padding: .06em .12em 0 0; color: var(--amber);
}
.prose-plain > p:first-of-type::first-letter {
  float: none; font-family: inherit; font-weight: inherit;
  font-size: inherit; line-height: inherit; padding: 0; color: inherit;
}
/* Disabled + waitlist states (DESIGN_CANON §4: every component ships its full
   state row; these were missing system-wide). */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}
.wp-input:disabled { opacity: .55; cursor: not-allowed; }
.wp-badge.waitlist { background: rgba(245,166,35,.14); color: var(--amber); border: 1px solid rgba(245,166,35,.45); }

/* Dossier reads as an instrument, not a table: price cell leads in amber, a tiny
   cartographic field-tick on each cell. */
.dossier .cell { position: relative; }
.dossier .cell::before { content: ""; position: absolute; top: 12px; left: 20px; width: 7px; height: 1px; background: var(--teal); }
.dossier .cell:nth-child(4) .v { color: var(--amber); }

/* Sharpen structural data panels to hard corners (instrument feel); chips stay soft. */
.dossier, .profile-grid, .price-panel { border-radius: 0; }

/* ================================================================== *
 * 14. REGISTRATION FORM — "field log" in the Waypoint language
 *   Multi-step (progress-tracked) form; all fields live in ONE Netlify
 *   <form>. Steps are JS-enhanced — with no JS every step is visible and the
 *   form still submits (native required attributes). Top-aligned mono labels,
 *   line-bordered inputs on dusk-2, amber focus, near-square corners.
 * ================================================================== */
.wrap-form { max-width: 780px; }
.page-form { padding-top: 96px; }

/* Trip summary header — dossier language, never the old orange gradient */
.form-head { border-bottom: 1px solid var(--line-2); padding-bottom: 26px; margin-bottom: 30px; }
.form-head .hero-coord { margin-bottom: 14px; }
.form-title { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.4rem); letter-spacing: -.02em; line-height: .92; }
.form-title .hero-year { display: block; color: var(--amber); }
.form-sub { font-family: var(--f-serif); font-size: var(--fs-lead); color: var(--paper-2); margin: 12px 0 20px; }
.form-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .5px; color: var(--paper-dim); text-transform: uppercase; }
.form-facts b { color: var(--paper); font-weight: 600; }
.form-facts .amber { color: var(--amber); }

/* Progress — mono step readout + a stamped bar */
.form-progress { display: none; margin-bottom: 28px; }
.js .form-progress { display: block; }
.form-progress .fp-label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 8px; display: flex; justify-content: space-between; }
.form-progress .fp-label b { color: var(--amber); font-weight: 600; }
.form-progress .fp-track { height: 3px; background: var(--line-2); position: relative; overflow: hidden; }
.form-progress .fp-map { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .5px; text-transform: uppercase; color: var(--paper-dim); margin-top: 8px; }
.form-progress .fp-map .on { color: var(--amber); }
.form-progress .fp-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--amber); transition: width .4s var(--ease-out); }

/* Steps — with JS only the active step shows; without JS all show */
.form-step { margin-bottom: 8px; }
.js .form-step { display: none; }
.js .form-step.is-active { display: block; animation: wp-rise .4s var(--ease-out) both; }
.form-step-head { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-display); text-transform: uppercase; font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.form-step-head .idx { font-family: var(--f-mono); font-size: .8rem; color: var(--amber); letter-spacing: 1px; }
@media (prefers-reduced-motion: reduce) { .js .form-step.is-active { animation: none; } }

/* Field grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-field.col-2 { grid-column: 1 / -1; }
.form-grid .form-field { margin-bottom: 0; }
.form-field label, .choice-legend { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--paper-2); }
.form-field label .req { color: var(--amber); margin-left: 2px; }
.form-field .hint { font-family: var(--f-serif); font-size: .86rem; color: var(--paper-dim); }

.wp-input {
  width: 100%; padding: 13px 15px; background: var(--dusk-2);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font-family: var(--f-serif); font-size: 1rem; color: var(--paper);
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.wp-input::placeholder { color: var(--paper-faint); }
.wp-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,.18); }
textarea.wp-input { min-height: 96px; resize: vertical; line-height: 1.5; }
select.wp-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a89f8c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer;
}
/* Invalid state (set by JS on blur / step advance) */
.wp-input.invalid { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.16); }
.field-err { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .3px; color: #ff8a8d; min-height: 0; }

/* Choice cards — radios / checkboxes in the field-log language */
.choice-set { border: 0; padding: 0; margin: 0; }
.choice-set .choice-legend { display: block; margin-bottom: 10px; }
.choice-group { display: flex; flex-direction: column; gap: 8px; }
.choice-group.row { flex-direction: row; flex-wrap: wrap; }
.choice-group.row .choice { flex: 1 1 160px; }
.choice { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; transition: border-color .2s, background .2s; background: var(--dusk-2); }
.choice:hover { border-color: var(--paper-dim); }
.choice input { margin-top: 2px; accent-color: var(--amber); width: 16px; height: 16px; flex: none; }
.choice:has(input:checked) { border-color: var(--amber); background: var(--dusk-3); }
.choice .c-label { font-family: var(--f-serif); font-size: .98rem; color: var(--paper); }
.choice .c-sub { font-family: var(--f-mono); font-size: .74rem; color: var(--paper-dim); display: block; margin-top: 2px; }

/* Acknowledgement checkboxes — heavier, at the commit step */
.ack { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--dusk-2); margin-bottom: 10px; cursor: pointer; }
.ack input { margin-top: 3px; accent-color: var(--amber); width: 16px; height: 16px; flex: none; }
.ack span { font-family: var(--f-serif); font-size: .92rem; color: var(--paper-read); line-height: 1.5; }
.ack .req { color: var(--amber); }
.ack-note { border-left: 3px solid var(--amber); background: var(--dusk-2); padding: 14px 18px; margin: 4px 0 18px; }
.ack-note .k { font-family: var(--f-mono); font-size: .7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.ack-note p { font-family: var(--f-serif); font-size: .9rem; color: var(--paper-read); }

/* Actions */
.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.form-actions .spacer { flex: 1; }
.form-reassure { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .3px; color: var(--paper-dim); margin-top: 14px; }
.form-reassure b { color: var(--paper-2); }
.btn[hidden] { display: none; }

/* Success / error notes */
.form-note-error, .form-note-success { border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; font-family: var(--f-serif); }
.form-note-error { border: 1px solid rgba(229,72,77,.5); background: rgba(229,72,77,.1); color: #ffb3b5; }
.form-note-success { border: 1px solid var(--amber); background: rgba(245,166,35,.1); }
.form-note-success .s-head { font-family: var(--f-display); text-transform: uppercase; font-size: 1.5rem; color: var(--amber); letter-spacing: -.01em; margin-bottom: 8px; }
.form-note-success p { color: var(--paper-read); }
.form-note-error a, .form-note-success a { color: var(--amber); text-decoration: underline; }

/* Password gate (exploratory) */
.gate { max-width: 440px; margin: 0 auto; text-align: center; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--dusk-2); padding: 40px 32px; }
.gate .eyebrow { justify-content: center; }
.gate h2 { font-size: 2rem; letter-spacing: -.01em; margin-bottom: 10px; }
.gate p { font-family: var(--f-serif); color: var(--paper-read); margin-bottom: 22px; }
.gate .gate-row { display: flex; gap: 10px; }
.gate .wp-input { text-align: center; letter-spacing: 2px; }
.gate .gate-err { font-family: var(--f-mono); font-size: .76rem; color: #ff8a8d; margin-top: 12px; min-height: 1em; }

.form-back { display: inline-flex; margin-top: 30px; font-family: var(--f-mono); font-size: .76rem; letter-spacing: 1px; text-transform: uppercase; color: var(--paper-dim); }
.form-back:hover { color: var(--amber); }

@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-actions .btn { flex: 1; justify-content: center; }
}