/* ==========================================================================
   Wandernote — Landing page
   Consumes css/tokens.css (colors, type, spacing, motion, both themes).
   A quiet, illustrated storybook about the app: misty valleys, candlelit
   studies, firefly dusk, a parchment map, a warm hearth. Editorial serif type,
   massive section spacing, varied composition, one locked palette (the tokens).

   Motion: a cinematic GSAP/ScrollTrigger journey (js/landing.js) drives the
   scenes when the viewport is >=900px and motion is allowed. Otherwise the
   round-1 IntersectionObserver reveal system is the fallback. Scoped rules under
   `html.cinematic` only ever apply once landing.js confirms cinematic mode, so
   they can never strand content when JS is off or the vendor files are missing.

   Sections: hero · manifesto · study · archive · meadow · travels · hearth ·
   waymarkers · closing CTA · footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Painted-scene palette. The hand-built SVG scenes read their stops from these
   vars, so both themes get an intentional, in-key illustration.
   Daylight = dawn over parchment. Hearthlight = deep indigo dusk.
   (Scene-internal art values; tokens-exempt by design, kept here so both
   themes stay in key.)
   -------------------------------------------------------------------------- */
:root {
  --sky-top:    #CFE0E6;   /* pale dawn blue        */
  --sky-mid:    #F0DCC4;   /* warm peach            */
  --sky-low:    #F6ECD9;   /* cream near horizon    */
  --glow:       #F4D29A;   /* low sun               */
  --mtn-far:    #B9C4BF;
  --mtn-mid:    #97A390;
  --mtn-near:   #6F7B65;
  --valley:     #7C8768;
  --valley-low: #5F6B50;
  --mist:       #F3EAD8;
  --lantern:    #E0972F;   /* distant lantern dots  */

  /* Travels map scene (parchment). Tokens-exempt scene art. */
  --map-parch-top: #EAD9B4;
  --map-parch-low: #D9C293;
  --map-edge:      #8A6E3C;
  --map-hill:      #A98A54;
  --map-pine:      #6E7B54;
  --map-lake:      #A9BFC2;
  --map-route-dot: #9A6E3A;
  --map-route:     #7A4A1C;
  --map-lantern:   #C8892E;

  --shell:      min(1180px, 92vw);
  --shell-wide: min(1360px, 94vw);
}

html[data-theme="hearthlight"] {
  --sky-top:    #10131F;
  --sky-mid:    #1B2033;
  --sky-low:    #262C42;
  --glow:       #E6B45C;   /* moon / firefly gold   */
  --mtn-far:    #2C3350;
  --mtn-mid:    #212843;
  --mtn-near:   #171B2A;
  --valley:     #13172A;
  --valley-low: #0D0F1A;
  --mist:       #38466A;
  --lantern:    #F0CE93;

  /* Travels map scene, dusk parchment. Tokens-exempt scene art. */
  --map-parch-top: #2A2C3C;
  --map-parch-low: #191B29;
  --map-edge:      #05060C;
  --map-hill:      #4A5170;
  --map-pine:      #2E3D46;
  --map-lake:      #33465E;
  --map-route-dot: #8A9AB4;
  --map-route:     #E6B45C;
  --map-lantern:   #F0CE93;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  overflow-x: hidden;              /* no horizontal scroll from drifting layers */
}

.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Chapter kicker — small-caps, letterspaced amber, with an optional roman
   numeral + ornamental diamond prefix (data-numeral). This is the editorial
   "chapter mark" device the storybook is built around (brief: section numerals
   "I · The Study"), not a generic section-number eyebrow. */
.kicker {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-caps: small-caps;
}
.kicker[data-numeral]::before {
  content: attr(data-numeral) " \25C7 ";   /* WHITE DIAMOND separator */
  color: var(--accent-soft);
  letter-spacing: 0.18em;
}

.lede {
  color: var(--ink-soft);
  font-size: 1.14rem;
  max-width: 46ch;
  line-height: 1.68;
}

/* Shared section rhythm — cinematic, unhurried spacing (>= 2x --space-8) */
.section {
  position: relative;
  padding: clamp(6rem, 14vh, 11rem) 0;
}
.section > * { margin-inline: auto; width: var(--shell); }

h2 {
  font-size: clamp(2.15rem, 4.8vw, 3.6rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.06;
}

/* --------------------------------------------------------------------------
   Ornamental divider — hairline rules flanking a center diamond. Adds chapter
   rhythm and generous whitespace between scenes.
   -------------------------------------------------------------------------- */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--shell);
  margin: clamp(1rem, 4vh, 3rem) auto;
}
.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  width: min(240px, 28vw);
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.ornament-gem {
  width: 8px;
  height: 8px;
  margin: 0 1.1rem;
  transform: rotate(45deg);
  border: 1px solid var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.78rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-quick) var(--ease-soft),
              box-shadow var(--dur-quick) var(--ease-soft),
              background-color var(--dur-quick) var(--ease-soft);
}
.btn:active { transform: scale(0.975); }

.btn-primary {
  background: var(--accent);
  color: var(--bg-raised);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { box-shadow: var(--glow-lantern); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  backdrop-filter: blur(3px);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Wax-seal CTA — round-cornered ember stamp for the closing panel */
.btn-seal {
  padding: 0.95rem 1.9rem;
  font-size: 1.02rem;
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-soft), var(--accent));
  color: #2a1a08;
  box-shadow: var(--glow-lantern), var(--shadow-lift);
}
.btn-seal .ico { width: 1.35em; height: 1.35em; stroke-width: 1.5; }
.btn-seal:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Header — minimal, fixed; gains a veil once scrolled.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 68px;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  transition: background-color var(--dur-slow) var(--ease-soft),
              box-shadow var(--dur-slow) var(--ease-soft),
              backdrop-filter var(--dur-slow) var(--ease-soft);
}
.site-header.veiled {
  background: var(--bg-veil);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 1px 0 var(--line-soft);
}
.site-header.veiled .brand-word,
.site-header.veiled .header-cta { color: var(--bg-raised); }
.site-header.veiled .brand-mark { color: var(--accent-soft); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark { color: var(--accent); width: 1.4rem; height: 1.4rem; }
.brand-word {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.header-cta {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur-quick) var(--ease-soft);
}
.header-cta:hover { color: var(--accent); }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-stage { position: absolute; inset: 0; z-index: -1; }

.scene { position: absolute; inset: 0; overflow: hidden; }
.scene-art { width: 100%; height: 100%; display: block; }
.scene-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scene { will-change: transform; }

/* candle-flicker on the hero lantern dots + tree */
.scene-lanterns circle { animation: lantern-flicker 4.2s var(--ease-soft) infinite; }
.scene-lanterns circle:nth-child(2) { animation-delay: -1.1s; }
.scene-lanterns circle:nth-child(3) { animation-delay: -2.3s; }
.scene-lanterns circle:nth-child(4) { animation-delay: -0.6s; }
.scene-lanterns circle:nth-child(5) { animation-delay: -3.1s; }
@keyframes lantern-flicker {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Drifting mist — a parallax band wrapper (moved by the cinematic hero
   timeline) with the seamless translateX drift on the inner .mist. */
.mist-band { position: absolute; inset: 0; pointer-events: none; }
.mist {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 46%;
  pointer-events: none;
  background-repeat: repeat-x;
  opacity: 0.5;
  will-change: transform;
}
.mist-far {
  top: 42%;
  background-image:
    radial-gradient(60% 100% at 12% 60%, var(--mist) 0%, transparent 60%),
    radial-gradient(50% 100% at 42% 55%, var(--mist) 0%, transparent 62%),
    radial-gradient(55% 100% at 74% 62%, var(--mist) 0%, transparent 60%);
  background-size: 50% 100%;
  animation: drift-left 46s linear infinite;
}
.mist-near {
  top: 56%;
  height: 40%;
  opacity: 0.42;
  background-image:
    radial-gradient(58% 100% at 20% 55%, var(--mist) 0%, transparent 60%),
    radial-gradient(52% 100% at 60% 62%, var(--mist) 0%, transparent 60%),
    radial-gradient(56% 100% at 88% 55%, var(--mist) 0%, transparent 62%);
  background-size: 50% 100%;
  animation: drift-left 32s linear infinite reverse;
}
@keyframes drift-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.firefly-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Soft light rays raking down from the sun */
.light-rays {
  position: absolute;
  inset: -10% -10% 30% -10%;
  pointer-events: none;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 42px,
    color-mix(in srgb, var(--glow) 55%, transparent) 42px 46px,
    transparent 46px 96px
  );
  mix-blend-mode: soft-light;
  opacity: 0.35;
  mask-image: radial-gradient(70% 60% at 70% 12%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(70% 60% at 70% 12%, #000 0%, transparent 70%);
}
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%, transparent 40%, color-mix(in srgb, var(--valley-low) 60%, transparent) 100%);
}
/* The hero painting stays daylight-bright in BOTH themes, but the wordmark,
   tagline, eyebrow and header text turn cream in hearthlight -- which washes
   out over the light art. Layer a soft dusk scrim over the painting (behind the
   copy) so that cream text keeps >=4.5:1: a top band for the header, a centred
   pool for the copy, over the original edge vignette. Daylight is untouched,
   keeping its dark-ink-on-bright-art contrast. */
html[data-theme="hearthlight"] .hero-vignette {
  background:
    linear-gradient(180deg, rgba(12, 15, 24, 0.6) 0%, rgba(12, 15, 24, 0) 20%),
    radial-gradient(78% 66% at 50% 44%, rgba(12, 15, 24, 0.68) 0%, rgba(12, 15, 24, 0.34) 46%, rgba(12, 15, 24, 0) 76%),
    radial-gradient(120% 90% at 50% 30%, transparent 40%, color-mix(in srgb, var(--valley-low) 60%, transparent) 100%);
}

.hero-inner {
  text-align: center;
  padding: 0 1.25rem;
  max-width: 46rem;
  will-change: transform;
}
.hero-eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-title {
  margin: 0;
  font-size: clamp(3.6rem, 12vw, 8rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 0.98;
  text-shadow: 0 1px 30px color-mix(in srgb, var(--valley-low) 35%, transparent);
}
.hero-tagline {
  margin: var(--space-5) auto 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--ink-soft);
  line-height: 1.6;
}
.hero-actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  bottom: clamp(1rem, 4vh, 2.2rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.scroll-cue .ico { animation: cue-bob 2.4s var(--ease-soft) infinite; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* ==========================================================================
   2 · MANIFESTO — word-by-word reveal
   ========================================================================== */
.manifesto {
  padding: clamp(7rem, 18vh, 12rem) 0;
  text-align: center;
}
.manifesto-line {
  margin-inline: auto;
  width: min(24ch, 92vw);
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, 3.9rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.manifesto-line .word {
  display: inline-block;
  opacity: 0.14;
  filter: blur(1px);
  transition: opacity 0.6s var(--ease-soft), filter 0.6s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.manifesto-line.in-view .word { opacity: 1; filter: blur(0); }

/* ==========================================================================
   3 · THE STUDY — split: copy + swapping beats + live demo card over a desk
   ========================================================================== */
.study-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.study-copy h2 { margin-top: var(--space-2); }

/* Three copy beats. Fallback: a normal stack, all readable. Cinematic: stacked
   in one grid cell and crossfaded by the pinned Study timeline. */
.study-beats {
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-4);
}
.study-beat {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.62;
}
.study-note {
  margin: var(--space-5) 0 0;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.98rem;
}

.study-visual { position: relative; }
.desk-scene {
  position: absolute;
  inset: -6% -8% -6% -8%;
  z-index: -1;
  border-radius: var(--radius-lg);
  opacity: 0.9;
  box-shadow: var(--shadow-lift);
  filter: saturate(0.95);
}

/* Live demo note card */
.demo-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.demo-toolbar {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg-sunken) 55%, transparent);
}
.demo-tool {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft),
              transform var(--dur-quick) var(--ease-soft);
}
.demo-tool:hover { background: var(--bg-sunken); color: var(--ink); }
.demo-tool:active { transform: scale(0.94); }
.demo-tool.is-on { background: var(--accent-glow); color: var(--accent); }

.demo-editor {
  padding: var(--space-5) var(--space-5) var(--space-4);
  min-height: 12rem;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  outline: none;
}
.demo-editor:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-glow); border-radius: var(--radius-sm); }
.demo-editor h2,
.demo-editor .demo-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 var(--space-3);
  line-height: 1.15;
}
.demo-editor p { margin: 0 0 var(--space-3); }
.demo-editor mark {
  background: var(--accent-glow);
  color: inherit;
  padding: 0.05em 0.18em;
  border-radius: 3px;
}
.demo-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--line-soft);
}
.demo-save {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.demo-save .ico { color: var(--accent); width: 1.05rem; height: 1.05rem; }
.demo-save.inking { color: var(--accent); }

/* ==========================================================================
   4 · THE ARCHIVE — band + horizontal sweep of 4 cards, corner flourishes
   ========================================================================== */
.archive-band {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.shelf-scene { border-radius: inherit; }
.shelf-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--valley-low) 82%, transparent) 100%);
}
.archive-band-copy {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  max-width: 40rem;
}
.archive-band-copy .kicker { color: var(--accent-soft); }
.archive-band-copy .kicker[data-numeral]::before { color: #F3ECDC; }
.archive-band-copy h2,
.archive-band-copy .lede { color: #F3ECDC; }
.archive-band-copy .lede { max-width: 34ch; }

/* Sweep viewport. Fallback (default): the track is a plain 2-up grid inside the
   normal shell. Cinematic (html.cinematic): a full-height pinned, overflow-hidden
   stage whose flex track is translated horizontally by ScrollTrigger. */
.archive-sweep { width: var(--shell); }
.archive-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.feature-card {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-soft),
              box-shadow var(--dur-slow) var(--ease-soft),
              border-color var(--dur-slow) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glow-lantern), var(--shadow-lift);
    border-color: var(--accent-glow);
  }
}
.feature-ico {
  color: var(--accent);
  width: 2rem; height: 2rem;
  margin-bottom: var(--space-3);
}
.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.34rem;
  margin: 0 0 var(--space-2);
}
.feature-card p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* SVG corner flourishes; stroke draws in via stroke-dashoffset in cinematic. */
.flourish {
  position: absolute;
  width: 24px; height: 24px;
  color: var(--accent-soft);
  opacity: 0.7;
  pointer-events: none;
}
.flourish-tl { top: 10px; left: 10px; }
.flourish-br { right: 10px; bottom: 10px; }
.flourish-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ==========================================================================
   5 · THE MEADOW — day->night crossfade scene + centered live theme demo
   ========================================================================== */
.meadow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.meadow-stage {
  position: absolute;
  inset: 0;
  width: auto;      /* full-bleed: opt out of the .section > * shell width */
  margin: 0;
  z-index: -1;
  /* Two-axis mask: a vertical fade top/bottom AND a horizontal fade that keeps
     the (darkening) scene OUT from behind the left copy column, so the dark
     daylight lede never loses contrast as the scene crossfades to night. The
     scene stays vivid behind the self-contained demo card on the right. */
  mask-image:
    linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(90deg, transparent 40%, #000 62%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(90deg, transparent 40%, #000 62%);
  -webkit-mask-composite: source-in;
}
.meadow-scene { opacity: 0.5; }
.meadow-scene-night { opacity: 0; }     /* revealed by scroll (cinematic) */
.meadow-fireflies { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-soft); }
.meadow-fireflies.lit { opacity: 1; }
.meadow-fireflies span {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lantern) 0%, transparent 70%);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--lantern) 60%, transparent);
  animation: float-firefly 9s var(--ease-soft) infinite;
}
@keyframes float-firefly {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  25%      { opacity: 1; }
  50%      { transform: translate(14px, -22px); opacity: 0.7; }
  75%      { transform: translate(-10px, -12px); opacity: 0.9; }
}

.meadow-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.meadow-copy .lede { max-width: 40ch; }

/* Live theme demo. Vars re-declared per state so the card is INDEPENDENT of
   the page theme (tokens.css scopes dark vars to html[data-theme], which a
   nested wrapper would not inherit correctly).  Values copied from tokens.css
   — KEEP IN SYNC with :root and html[data-theme="hearthlight"] there. */
.theme-demo[data-theme="daylight"] {
  --bg-raised: #F7F1E3;
  --bg-sunken: #E3D7BF;
  --ink:       #33281B;
  --ink-soft:  #57493A;
  --line:      rgba(51, 40, 27, 0.16);
  --accent:      #985613;
  --accent-glow: rgba(200, 138, 62, 0.30);
  --shadow-lift: 0 4px 12px rgba(60, 45, 28, 0.10), 0 14px 34px rgba(60, 45, 28, 0.13);
}
.theme-demo[data-theme="hearthlight"] {
  --bg-raised: #242A3B;
  --bg-sunken: #12151F;
  --ink:       #ECE3D0;
  --ink-soft:  #C3B8A2;
  --line:      rgba(236, 227, 208, 0.14);
  --accent:      #E6B45C;
  --accent-glow: rgba(230, 180, 92, 0.34);
  --shadow-lift: 0 6px 18px rgba(4, 6, 12, 0.44), 0 16px 40px rgba(4, 6, 12, 0.52);
}
.theme-demo {
  display: grid;
  gap: var(--space-4);
  justify-items: stretch;
}
.theme-demo-card {
  background: var(--bg-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--space-5);
  transition: background-color var(--dur-slow) var(--ease-soft),
              color var(--dur-slow) var(--ease-soft),
              box-shadow var(--dur-slow) var(--ease-soft);
}
.theme-demo-head {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: var(--space-3);
}
.theme-demo-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.theme-demo-name {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.theme-demo-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.theme-demo-card p { color: var(--ink-soft); margin: 0 0 var(--space-4); }
.theme-demo-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.theme-switch {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-quick) var(--ease-soft), box-shadow var(--dur-quick) var(--ease-soft);
}
.theme-switch:hover { box-shadow: var(--glow-lantern); }
.theme-switch:active { transform: scale(0.97); }
.theme-switch .ico { color: var(--accent); }
.theme-demo[data-theme="daylight"] .theme-switch-moon { display: none; }
.theme-demo[data-theme="hearthlight"] .theme-switch-sun { display: none; }

/* ==========================================================================
   6 · YOUR TRAVELS — parchment map + self-drawing journey path + stat callouts
   ========================================================================== */
.travels-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.travel-stats {
  list-style: none;
  margin: var(--space-6) 0 var(--space-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  justify-content: start;
}
.travel-stat { display: grid; }
.travel-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.travel-stat-label {
  margin-top: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.travel-caption {
  margin: 0;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.94rem;
}

.travels-map { position: relative; }
.map-scene {
  position: relative;
  aspect-ratio: 16 / 12;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  border: 1px solid var(--line);
}
.map-art { position: absolute; inset: 0; }
/* Journey path: fully drawn by default (fallback looks finished); the cinematic
   Travels scene sets a dash + offset and scrubs it to 0 to draw it in. */
.journey-path { stroke-linejoin: round; }
.map-end circle { transform-box: fill-box; transform-origin: center; }
.map-end { animation: map-pulse 3.4s var(--ease-soft) infinite; transform-box: fill-box; transform-origin: 560px 150px; }
@keyframes map-pulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

/* ==========================================================================
   7 · THE HEARTH — cozy nook, silent rain/fire visual demos, ember motes
   ========================================================================== */
.hearth-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hearth-visual { position: relative; }
.hearth-scene {
  position: relative;
  aspect-ratio: 16 / 13;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
}
.hearth-flames path { animation: flame-lick 2.6s var(--ease-soft) infinite; transform-box: fill-box; transform-origin: bottom center; }
.hearth-flames path:nth-child(2) { animation-delay: -1.2s; }
@keyframes flame-lick {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.9; }
  50%      { transform: scaleY(1.12) translateY(-2px); opacity: 1; }
}

/* Ember motes drifting up over the hearth (CSS, <=10) */
.ember-motes { position: absolute; inset: 0; pointer-events: none; }
.ember-motes span {
  position: absolute;
  bottom: 22%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--lantern);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--lantern) 55%, transparent);
  opacity: 0;
  animation: ember-rise linear infinite;
}
@keyframes ember-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translateY(-160px) translateX(14px); opacity: 0; }
}

.hearth-copy .lede { max-width: 42ch; }
.hearth-demos {
  margin: var(--space-5) 0 var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
/* The demo tiles are decorative vignettes (scene art); fixed dark values with
   cream labels keep them legible in BOTH themes, like the closing panel. */
.hearth-demo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 120px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
}
.hearth-demo-art { position: absolute; inset: 0; z-index: -1; }
.hearth-demo-rain .hearth-demo-art { background: linear-gradient(180deg, #1c2336, #10131f); }
.hearth-demo-fire .hearth-demo-art { background: radial-gradient(120% 90% at 50% 100%, #3a2412, #14100c); }
.hearth-demo-label {
  position: absolute;
  left: 0; bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.7rem 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(8, 10, 16, 0.5);
  color: #F1E7D4;                 /* cream on dark tile, >7:1 */
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.hearth-demo-label .ico { color: var(--accent-soft); width: 1.05rem; height: 1.05rem; }

/* Rain streaks */
.rain-art span {
  position: absolute;
  top: -20%;
  width: 1px; height: 26px;
  background: linear-gradient(180deg, transparent, rgba(190, 205, 230, 0.7));
  animation: rain-fall linear infinite;
}
.rain-art span:nth-child(1) { left: 14%; animation-duration: 0.9s; animation-delay: -0.2s; }
.rain-art span:nth-child(2) { left: 30%; animation-duration: 1.1s; animation-delay: -0.6s; }
.rain-art span:nth-child(3) { left: 46%; animation-duration: 0.8s; animation-delay: -0.1s; }
.rain-art span:nth-child(4) { left: 62%; animation-duration: 1.0s; animation-delay: -0.5s; }
.rain-art span:nth-child(5) { left: 76%; animation-duration: 0.95s; animation-delay: -0.3s; }
.rain-art span:nth-child(6) { left: 88%; animation-duration: 1.15s; animation-delay: -0.8s; }
@keyframes rain-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(180px); }
}

/* Fire glow + flames */
.fire-art .fire-glow {
  position: absolute;
  left: 50%; bottom: -10%;
  width: 120px; height: 120px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 180, 92, 0.55), transparent 70%);
  animation: fire-pulse 2.4s var(--ease-soft) infinite;
}
.fire-art .fire-flame {
  position: absolute;
  left: 50%; bottom: 18%;
  width: 18px; height: 34px;
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #F0CE93, #E0972F);
  animation: flame-lick 1.8s var(--ease-soft) infinite;
  transform-origin: bottom center;
}
.fire-art .fire-flame-2 { width: 11px; height: 22px; background: linear-gradient(180deg, #F6ECD9, #F0CE93); animation-delay: -0.9s; }
@keyframes fire-pulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
.hearth-note {
  margin: 0;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.92rem;
}

/* ==========================================================================
   8 · WAYMARKERS — compact feature grid (16), dealt in with a cascade
   ========================================================================== */
.waymarkers-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.waymarkers-head .kicker { color: var(--accent); }
.waymarker-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2) var(--space-5);
}
.waymarker {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-soft);
}
.waymarker .ico {
  color: var(--accent);
  width: 1.65rem; height: 1.65rem;
  margin-top: 0.1rem;
}
.waymarker h3 {
  font-family: var(--font-display);
  font-size: 1.16rem;
  margin: 0 0 0.15rem;
}
.waymarker p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.waymarker code {
  font-family: var(--font-ui);
  font-size: 0.86em;
  background: var(--bg-sunken);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}

/* ==========================================================================
   9 · CLOSING CTA — dusk scene scrubbed toward the lantern, drifting motes
   ========================================================================== */
/* Always-dusk panel: fixed dark values (NOT theme vars) so the cream copy clears
   WCAG AA in BOTH themes. Computed against the lightest point of the panel (the
   amber glow rgba(230,180,92,0.22) composited over the top gradient stop #2A2F47,
   ~= rgb(83,76,76)):
     h2   #F5EEDD -> 7.17:1
     lede #EDE4D2 -> 6.57:1
   Against the base #14172A both exceed 12:1. The wax-seal button carries its own
   amber fill and passes independently. */
.closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: clamp(7rem, 16vh, 11rem) 1.25rem;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(230, 180, 92, 0.22), transparent 60%),
    linear-gradient(180deg, #2A2F47, #14172A);
}
.closing-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  transform-origin: 50% 40%;
  will-change: transform;
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 82%);
}
.closing-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(90% 80% at 50% 42%, transparent 30%, rgba(10, 12, 22, 0.85) 100%);
  opacity: 0;
}
.motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mote {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--lantern);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--lantern) 55%, transparent);
  opacity: 0;
  animation: mote-rise linear infinite;
}
@keyframes mote-rise {
  0%   { transform: translateY(20px); opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(-120px); opacity: 0; }
}
.closing-inner { max-width: 40rem; margin-inline: auto; width: auto; position: relative; }
.closing-inner h2 { color: #F5EEDD; }         /* 7.17:1 on lightest panel point */
.closing-inner .lede { color: #EDE4D2; margin: var(--space-4) auto var(--space-6); max-width: 34ch; }  /* 6.57:1 */

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  padding: clamp(3rem, 8vh, 5rem) 0;
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
}
.footer-inner {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.brand-footer .brand-word { font-size: 1.2rem; }
.footer-note {
  margin: 0;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.95rem;
}
.footer-theme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  cursor: pointer;
  transition: transform var(--dur-quick) var(--ease-soft), box-shadow var(--dur-quick) var(--ease-soft);
}
.footer-theme:hover { box-shadow: var(--glow-lantern); }
.footer-theme:active { transform: scale(0.97); }
.footer-theme .ico { color: var(--accent); }
:root .footer-theme-moon { display: none; }
html[data-theme="hearthlight"] .footer-theme-sun { display: none; }
html[data-theme="hearthlight"] .footer-theme-moon { display: inline; }

/* ==========================================================================
   Scroll-reveal system (fallback: JS adds .in-view once, then unobserves)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-soft),
              transform var(--dur-slow) var(--ease-soft);
}
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }

/* ==========================================================================
   CINEMATIC MODE (html.cinematic) — landing.js adds this class ONLY when the
   GSAP journey is active (>=900px, motion allowed, vendor present). GSAP then
   owns the entrances via gsap.from(), so [data-reveal] must NOT be pre-hidden
   here or elements could strand invisible. Base state = fully visible; GSAP
   creates the motion and reverts on cleanup (matchMedia). Nothing below hides
   content on its own except the pinned-scene helpers, which GSAP always drives.
   ========================================================================== */
html.cinematic [data-reveal] { opacity: 1; transform: none; transition: none; }

/* Manifesto words start dim (GSAP scrubs them to full) with no CSS blur/anim. */
html.cinematic .manifesto-line .word { filter: none; transition: none; transform: none; }

/* Pinned scenes fill the frame and center their content (no dead space). */
html.cinematic .manifesto,
html.cinematic .study {
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: 0;
  display: grid;
  align-content: center;
}

/* Study beats stack in one cell so the pinned timeline can crossfade them. */
html.cinematic .study-beats { position: relative; }
html.cinematic .study-beats .study-beat { grid-area: 1 / 1; }

/* Archive horizontal sweep: pinned, full-height, overflow hidden; the track is
   a nowrap flex row that ScrollTrigger translates in X (no page h-scroll). */
html.cinematic .archive-sweep {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
html.cinematic .archive-track {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: clamp(1.5rem, 8vw, 8rem);
  will-change: transform;
}
html.cinematic .archive-track .feature-card {
  flex: 0 0 clamp(320px, 40vw, 520px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 940px) {
  .study-grid,
  .meadow-inner,
  .travels-grid,
  .hearth-grid { grid-template-columns: 1fr; }
  .desk-scene { inset: -4% -4% -4% -4%; }
  .archive-track { grid-template-columns: repeat(2, 1fr); }
  .waymarker-grid { grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-5); }
  .hearth-visual { order: -1; }
}
@media (max-width: 560px) {
  .section { padding: clamp(4rem, 11vh, 6rem) 0; }
  .archive-track { grid-template-columns: 1fr; }
  .waymarker-grid { grid-template-columns: 1fr; }
  .travel-stats { gap: var(--space-4); }
  .hearth-demos { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .footer-inner { flex-direction: column; text-align: center; }
  .header-cta { display: none; }
}

/* ==========================================================================
   Reduced motion — kill parallax/particles/drift/word-stagger; keep opacity.
   (tokens.css already zeroes transition/animation durations; these rules make
   the resting states correct so nothing is stranded invisible or mid-drift.
   Cinematic mode never activates under reduced motion, so only fallback states
   need to be corrected here.)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none; }
  .manifesto-line .word { opacity: 1; filter: none; }
  .study-beat { opacity: 1; }
  .mist { animation: none; opacity: 0.4; }
  .scene-lanterns circle,
  .scroll-cue .ico,
  .meadow-fireflies span,
  .hearth-flames path,
  .map-end,
  .rain-art span,
  .fire-art .fire-glow,
  .fire-art .fire-flame,
  .ember-motes span,
  .mote { animation: none; }
  .meadow-fireflies { opacity: 0; }        /* fireflies stay calm under reduced motion */
  .meadow-fireflies.lit span { opacity: 0.55; }
  .fire-art .fire-flame { opacity: 0.95; }
}