/* Generated from src/styles by scripts/build.mjs. Edit source modules, not this file. */
/* ── Nostia token layer (inlined from assets/tokens) ── */
/* ── Nostia Webfonts (self-hosted) ─────────────────────────────────
   ONE brand type system for every surface: Cormorant Garamond
   (poetic italic serif, display/headings) + Manrope (sans, body & UI).
   Rewritten for nostia.app: the site ships woff2 variable fonts under
   assets/fonts/ (smaller than the design project's ttf). SIL OFL.
   ──────────────────────────────────────────────────────────────── */

/* Cormorant Garamond — display & headings (the signature italic) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}

/* Manrope — UI / body (every surface) */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* Material Symbols — self-hosted so the privacy-first landing makes no
   third-party font request before consent. Apache 2.0, Google Fonts. */
@font-face {
  font-family: "Material Symbols Rounded";
  src: url("fonts/MaterialSymbolsRounded-v2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ════════════════════════════════════════════════════════════════
   Nostia — Color tokens · "Warm Paper / Living Forest"
   Source of truth: android core/designsystem/theme/Color.kt + Theme.kt
   ────────────────────────────────────────────────────────────────
   The mobile app blends two poles by time of day:
     · LIGHT  = "Warm Premium"  — warm sage paper, deep espresso ink,
                                   chartreuse sprout + deep-moss accents
     · DARK   = "Twilight Garden" — deep night garden, glowing lotus,
                                    gold-leaf accents
   A monochrome "Private Mode" palette is provided as an opt-in scope.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Raw primitives (theme-independent) ────────────────────── */
  --paper-warm:        #DEDBD3;   /* canonical warm paper */
  --paper-warm-dark:   #1B1813;   /* canonical warm-dark ground */
  --ink-warm:          #1A1610;   /* near-black warm ink */
  --ink-warm-inverse:  #F2EBDC;   /* warm off-white */
  --sprout:            #B7DC5C;   /* chartreuse — the brand lotus green */
  --support:           #D66B6B;   /* pink — the always-visible safety bridge */
  --gold-leaf:         #C9A84C;   /* twilight accent */

  /* ════════ LIGHT — "Warm Premium" (default) ════════ */

  /* Text */
  --text:        #211B12;  /* deep espresso — primary text (~11:1 on paper) */
  --text-mute:   #4E4839;  /* secondary text — AA on bg & cards (~6.3:1) */
  --text-soft:   #6A6253;  /* tertiary — now AA for body (~4.6:1), not just large */

  /* Surfaces */
  --bg:          #D9E0C7;  /* warm sage ground */
  --bg-card:     #E9EDD9;  /* card lifts off bg */
  --bg-card-soft:#E1E7D1;  /* nested / quieter card */
  --paper:       #EFF3E1;  /* brightest sheet (sheets, inputs) */

  /* Tinted surfaces — mood-coded soft fills */
  --tint-lavender: #E4DAE6;
  --tint-mist:     #E0DCD0;
  --tint-cream:    #EDE6D3;
  --tint-sage:     #DDE3C9;
  --tint-blush:    #EAD6CE;

  /* Lines */
  --line:        rgba(33, 27, 18, 0.14);  /* hairline dividers */
  --line-strong: rgba(33, 27, 18, 0.25);  /* visible borders / outlines */

  /* Accents */
  --accent:        #B7DC5C;  /* sprout — fills, selected chips, glow */
  --accent-soft:   #E3EFB8;  /* sprout tint — soft buttons, selected */
  --accent-deep:   #3E531C;  /* deep moss — primary button + AA text/icon */
  --accent-warm:   #D7A6A6;  /* blush */
  --accent-warm-soft:#E8C9C9;
  --accent-support:#C95F5F;       /* pink safety — FILL / border / large text only */
  --accent-support-text:#9C4146;  /* AA-safe safety text on light tints & cards (~4.7:1) */

  /* Aliases used across components */
  --ink:        #211B12;
  --ink-soft:   #2E2820;
  --on-accent:  #FFFFFF;     /* text on accent-deep (primary button) */
  --on-sprout:  #211B12;     /* ink reads ~12:1 on raw sprout */
}

/* ════════ DARK — "Twilight Garden" ════════
   Apply via <html data-theme="dark"> or .theme-twilight on a container. */
:root[data-theme="dark"],
.theme-twilight {
  --text:        #ECE6D6;
  --text-mute:   #9DA68C;
  --text-soft:   #76806A;

  --bg:          #0E120D;  /* deep garden night */
  --bg-card:     #181E16;
  --bg-card-soft:#1F261C;
  --paper:       #141A12;

  --tint-lavender: #241E2E;  /* plum dusk */
  --tint-mist:     #1E241C;
  --tint-cream:    #2A2A1C;
  --tint-sage:     #202A1E;
  --tint-blush:    #2E2026;

  --line:        rgba(236, 230, 214, 0.13);
  --line-strong: rgba(236, 230, 214, 0.25);

  --accent:        #C9A84C;  /* gold-leaf */
  --accent-soft:   #2E3A1E;
  --accent-deep:   #E3C56A;  /* bright gold — readable on dark */
  --accent-warm:   #D7A6A6;
  --accent-warm-soft:#4F3A35;
  --accent-support:#D66B6B;
  --accent-support-text:#E0A3A3;  /* AA-safe safety text on dark tints */

  --ink:        #0E120D;
  --ink-soft:   #D8D0C2;
  --on-accent:  #211B12;     /* ink on gold */
  --on-sprout:  #211B12;
}

/* ════════ Private Mode — monochrome charcoal ════════
   Opt-in: .theme-private. No hue, deepest privacy. */
.theme-private {
  --text:        #E5E5E5;
  --text-mute:   #787877;
  --text-soft:   #A0A09F;

  --bg:          #0B0B0A;
  --bg-card:     #2E2E2D;
  --bg-card-soft:#1E1E1E;
  --paper:       #0B0B0A;

  --tint-lavender: #2E2E2D;
  --tint-mist:     #2E2E2D;
  --tint-cream:    #2E2E2D;
  --tint-sage:     #2E2E2D;
  --tint-blush:    #2E2E2D;

  --line:        #2E2E2D;
  --line-strong: #4A4A49;

  --accent:        #CCCCCC;
  --accent-soft:   #4A4A49;
  --accent-deep:   #CCCCCC;
  --accent-warm:   #787877;
  --accent-warm-soft:#2E2E2D;
  --accent-support:#787877;
  --accent-support-text:#A0A09F;  /* monochrome — safety text in Private Mode */

  --ink:        #E5E5E5;
  --ink-soft:   #CCCCCC;
  --on-accent:  #0B0B0A;
  --on-sprout:  #0B0B0A;
}

/* ════════════════════════════════════════════════════════════════
   Nostia — Material Design 3 system layer
   ────────────────────────────────────────────────────────────────
   Nostia's apps are MD3 (Jetpack Compose Material3). This file expresses
   the warm-paper brand as a COMPLETE MD3 token set so the look is driven
   by roles, not one-off hex. Role names mirror Compose `ColorScheme`
   1:1 (`--md-sys-color-primary` ↔ `colorScheme.primary`) so values port
   straight into the app.

     · LIGHT  = "Warm Premium"   (default :root)
     · DARK   = "Twilight Garden" ([data-theme="dark"] / .theme-twilight)

   Brand seed → MD3 roles:
     primary   = deep moss      (the committed action: buttons, key icons)
     secondary = warm sage-olive (supporting chrome)
     tertiary  = blush rose      (gentle accent / warmth)
     error     = warm red        (destructive only — NOT the safety bridge;
                                  the pink safety lives in --eu-support)
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primary — deep moss (committed action) ───────────────── */
  --md-sys-color-primary:              #3E531C;
  --md-sys-color-on-primary:           #FFFFFF;
  --md-sys-color-primary-container:    #C7E08A;
  --md-sys-color-on-primary-container: #283A0A;
  --md-sys-color-inverse-primary:      #C7E08A;

  /* ── Secondary — warm sage-olive (supporting) ─────────────── */
  --md-sys-color-secondary:              #5C6147;
  --md-sys-color-on-secondary:           #FFFFFF;
  --md-sys-color-secondary-container:    #E1E7D1;
  --md-sys-color-on-secondary-container: #2C3120;

  /* ── Tertiary — blush rose (gentle warmth) ────────────────── */
  --md-sys-color-tertiary:              #8C5A5A;
  --md-sys-color-on-tertiary:           #FFFFFF;
  --md-sys-color-tertiary-container:    #EAD6CE;
  --md-sys-color-on-tertiary-container: #432020;

  /* ── Error — warm red (destructive only) ──────────────────── */
  --md-sys-color-error:              #9C4146;
  --md-sys-color-on-error:           #FFFFFF;
  --md-sys-color-error-container:    #F4D9D9;
  --md-sys-color-on-error-container: #3A1416;

  /* ── Surfaces — warm paper tonal ladder ───────────────────── */
  --md-sys-color-background:    #D9E0C7;
  --md-sys-color-on-background: #211B12;
  --md-sys-color-surface:       #EFF3E1;
  --md-sys-color-on-surface:    #211B12;
  --md-sys-color-surface-dim:    #D2D9BF;
  --md-sys-color-surface-bright: #F5F8EA;

  --md-sys-color-surface-container-lowest:  #F8FBEF;
  --md-sys-color-surface-container-low:     #EDF1DF;
  --md-sys-color-surface-container:         #E9EDD9;
  --md-sys-color-surface-container-high:    #E2E8D2;
  --md-sys-color-surface-container-highest: #DBE2CB;

  --md-sys-color-surface-variant:    #E1E7D1;
  --md-sys-color-on-surface-variant: #4A4A3C;
  --md-sys-color-outline:            #75786A;
  --md-sys-color-outline-variant:    #C5C8B4;

  --md-sys-color-inverse-surface:    #2F352A;
  --md-sys-color-inverse-on-surface: #EFF3E1;
  --md-sys-color-scrim:              #000000;

  /* Brand-specific role kept OUTSIDE error: the always-calm safety bridge.
     Deepened from #C95F5F so the white label clears WCAG AA (5.1:1); the old
     #C95F5F gave white only 3.97:1 — a fail on a stress-critical control. */
  --eu-support:           #B84A4A;
  --eu-on-support:        #FFFFFF;
  --eu-support-container: #F4DCDC;

  /* ── State layers (MD3 overlay opacities) ─────────────────────
     Compose into any role with color-mix, e.g.
     background: color-mix(in srgb, var(--md-sys-color-primary)
                 calc(var(--md-sys-state-hover) * 100%), transparent); */
  --md-sys-state-hover:   0.08;  /* @kind other */
  --md-sys-state-focus:   0.10;  /* @kind other */
  --md-sys-state-pressed: 0.10;  /* @kind other */
  --md-sys-state-dragged: 0.16;  /* @kind other */

  /* ── Shape scale (MD3 corner tokens) ──────────────────────────
     Brand specifics: cards land at -large-increased(20), buttons & pills
     are -full. */
  --md-sys-shape-corner-none:            0px;
  --md-sys-shape-corner-extra-small:     4px;
  --md-sys-shape-corner-small:           8px;
  --md-sys-shape-corner-medium:          12px;
  --md-sys-shape-corner-large:           16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large:     28px;
  --md-sys-shape-corner-full:            999px;

  /* ── Elevation (MD3 tonal + shadow, warmed) ───────────────────
     MD3 light surfaces lift with a tonal tint + a soft shadow. */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(46,36,24,0.18), 0 1px 3px 1px rgba(46,36,24,0.10);
  --md-sys-elevation-2: 0 1px 2px rgba(46,36,24,0.18), 0 2px 6px 2px rgba(46,36,24,0.10);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(46,36,24,0.10), 0 1px 3px rgba(46,36,24,0.18);
}

/* ════════ DARK — "Twilight Garden" ════════ */
:root[data-theme="dark"],
.theme-twilight {
  --md-sys-color-primary:              #E3C56A;  /* gold-leaf */
  --md-sys-color-on-primary:           #2A2410;
  --md-sys-color-primary-container:    #5A4A1E;
  --md-sys-color-on-primary-container: #F4E2A8;
  --md-sys-color-inverse-primary:      #3E531C;

  --md-sys-color-secondary:              #C3C9AC;
  --md-sys-color-on-secondary:           #2C3120;
  --md-sys-color-secondary-container:    #404633;
  --md-sys-color-on-secondary-container: #E1E7D1;

  --md-sys-color-tertiary:              #E0B6B0;
  --md-sys-color-on-tertiary:           #432020;
  --md-sys-color-tertiary-container:    #5C3A38;
  --md-sys-color-on-tertiary-container: #EAD6CE;

  --md-sys-color-error:              #F2B8B5;
  --md-sys-color-on-error:           #3A1416;
  --md-sys-color-error-container:    #6B3438;
  --md-sys-color-on-error-container: #F4D9D9;

  --md-sys-color-background:    #0E120D;
  --md-sys-color-on-background: #ECE6D6;
  --md-sys-color-surface:       #11160F;
  --md-sys-color-on-surface:    #ECE6D6;
  --md-sys-color-surface-dim:    #0E120D;
  --md-sys-color-surface-bright: #343A2C;

  --md-sys-color-surface-container-lowest:  #090C08;
  --md-sys-color-surface-container-low:     #181E16;
  --md-sys-color-surface-container:         #1C231A;
  --md-sys-color-surface-container-high:    #272E23;
  --md-sys-color-surface-container-highest: #32392D;

  --md-sys-color-surface-variant:    #44483B;
  --md-sys-color-on-surface-variant: #C5C8B4;
  --md-sys-color-outline:            #8E927F;
  --md-sys-color-outline-variant:    #44483B;

  --md-sys-color-inverse-surface:    #ECE6D6;
  --md-sys-color-inverse-on-surface: #2F352A;
  --md-sys-color-scrim:              #000000;

  --eu-support:           #E0A3A3;
  --eu-on-support:        #3A1416;
  --eu-support-container: #5C3A3A;

  --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.50);
  --md-sys-elevation-2: 0 2px 6px rgba(0,0,0,0.55);
  --md-sys-elevation-3: 0 6px 14px rgba(0,0,0,0.60);
}

/* ── MD3 emphasized motion (the "expressive" easings) ───────────── */
:root {
  --md-sys-motion-emphasized:            cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --md-sys-motion-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);/* @kind other */
  --md-sys-motion-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);/* @kind other */
  --md-sys-motion-standard:              cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --md-sys-motion-dur-short:  200ms;  /* @kind other */
  --md-sys-motion-dur-medium: 350ms;  /* @kind other */
  --md-sys-motion-dur-long:   500ms;  /* @kind other */
}

/* ════════════════════════════════════════════════════════════════
   Nostia — Typography tokens
   Source: android core/designsystem/theme/Type.kt
   Display voice = Cormorant Garamond (the italic display is the
   poetic, hand-on-shoulder greeting). UI voice = Manrope.
   sp → px 1:1.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Families */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ── Display & headings (Cormorant Garamond) ──────────────── */
  /* display — italic, the signature greeting ("Good evening, …") */
  --display-family: var(--font-display);
  --display-size: 38px;
  --display-line: 44px;
  --display-weight: 500;
  --display-style: italic; /* @kind other */
  --display-tracking: -0.5px;

  --h1-size: 28px;   --h1-line: 34px;   --h1-weight: 600;  --h1-tracking: -0.15px;
  --h2-size: 22px;   --h2-line: 28px;   --h2-weight: 500;  --h2-tracking: 0;

  /* ── UI text (Manrope) ────────────────────────────────────── */
  --title-size: 15px;   --title-line: 20px;   --title-weight: 500;
  --body-size: 15px;    --body-line: 22px;    --body-weight: 400;
  --body-soft-size: 14px; --body-soft-line: 22px;
  --label-size: 13px;   --label-line: 17px;   --label-weight: 500;
  --caption-size: 12px; --caption-line: 17px; --caption-weight: 400;

  /* meta — uppercase, bold, wide tracking (eyebrows / rails) */
  --meta-size: 11px;    --meta-line: 14px;    --meta-weight: 700;  --meta-tracking: 1.5px;

  /* button label */
  --button-size: 15px;  --button-line: 20px;  --button-weight: 500;  --button-tracking: 0.08px;
}

/* ── Ready-made text classes (optional convenience) ─────────────── */
.eu-display {
  font-family: var(--font-display); font-style: italic; font-weight: var(--display-weight);
  font-size: var(--display-size); line-height: var(--display-line);
  letter-spacing: var(--display-tracking); color: var(--text);
}
.eu-h1 {
  font-family: var(--font-display); font-weight: var(--h1-weight);
  font-size: var(--h1-size); line-height: var(--h1-line);
  letter-spacing: var(--h1-tracking); color: var(--text);
}
.eu-h2 {
  font-family: var(--font-display); font-weight: var(--h2-weight);
  font-size: var(--h2-size); line-height: var(--h2-line); color: var(--text);
}
.eu-title { font-family: var(--font-sans); font-weight: var(--title-weight);
  font-size: var(--title-size); line-height: var(--title-line); color: var(--text); }
.eu-body { font-family: var(--font-sans); font-weight: var(--body-weight);
  font-size: var(--body-size); line-height: var(--body-line); color: var(--text); }
.eu-body-soft { font-family: var(--font-sans);
  font-size: var(--body-soft-size); line-height: var(--body-soft-line); color: var(--text-mute); }
.eu-label { font-family: var(--font-sans); font-weight: var(--label-weight);
  font-size: var(--label-size); line-height: var(--label-line); color: var(--text); }
.eu-caption { font-family: var(--font-sans);
  font-size: var(--caption-size); line-height: var(--caption-line); color: var(--text-mute); }
.eu-meta {
  font-family: var(--font-sans); font-weight: var(--meta-weight);
  font-size: var(--meta-size); line-height: var(--meta-line);
  letter-spacing: var(--meta-tracking); text-transform: uppercase; color: var(--text-mute);
}

/* ════════════════════════════════════════════════════════════════
   Nostia — Spacing, Radius & Shadow tokens
   Source: android core/designsystem/theme/Spacing.kt + EuCard/EuButton
   4dp grid. dp → px 1:1.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing — 4px grid (reach for these first) ───────────── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s7: 28px;  --s8: 32px;  --s10: 40px; --s12: 48px;
  --s14: 56px; --s16: 64px;

  /* Off-grid "compact" rhythm — denser layouts only, NOT defaults */
  --compact-xs: 6px;  --compact-sm: 10px; --compact-md: 14px;
  --compact-lg: 18px; --compact-xl: 22px;
  --nudge: 2px;       /* hairline optical inset */

  /* ── Radius ───────────────────────────────────────────────── */
  --r-xxs: 6px;   /* tiny chips / inner ticks */
  --r-xs:  8px;   /* small controls */
  --r-sm:  10px;
  --r-smd: 12px;  /* workhorse — most chips / inputs */
  --r-md:  14px;
  --r-mlg: 16px;  /* standard card */
  --r-lg:  20px;  /* EuCard default */
  --r-xlg: 24px;  /* large containers / bottom sheets */
  --r-xl:  28px;
  --r-xxl: 36px;
  --r-pill: 999px;/* buttons & pills are fully round */

  /* ── Shadows ──────────────────────────────────────────────────
     Warm, soft lift. On the light face it reads as elevation; on the
     dark Twilight ground the border carries lift and shadow recedes. */
  --shadow-card:    0 5px 18px rgba(46, 36, 24, 0.10);
  --shadow-card-lg: 0 12px 34px rgba(46, 36, 24, 0.14);
  --shadow-primary: 0 8px 20px rgba(62, 83, 28, 0.30);  /* accent-deep glow under primary button */
  --shadow-sheet:   0 -8px 40px rgba(46, 36, 24, 0.18); /* bottom sheet rising */

  /* Glassmorphism card border — subtle white stroke gradient */
  --card-border: rgba(255, 255, 255, 0.12);
}

/* ════════════════════════════════════════════════════════════════
   Nostia — Motion tokens
   Source: android core/designsystem/theme/Motion.kt + MotionSpecs.kt
   Calm, organic, breathing. Nothing snaps; surfaces "give" and settle.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Easings */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-soft: cubic-bezier(0.45, 0, 0.15, 1);      /* @kind other */

  /* Durations */
  --dur-fast:   180ms;   /* @kind other */
  --dur-base:   320ms;   /* @kind other */
  --dur-slow:   600ms;   /* @kind other */
  --dur-fadeup: 480ms;   /* @kind other */
  --dur-breath: 4200ms;  /* @kind other */
  --dur-drift:  5000ms;  /* @kind other */
  --dur-ambient:28000ms; /* @kind other */
  --dur-shimmer:3400ms;  /* @kind other */

  /* Interaction */
  --press-scale: 0.96;   /* @kind other */
  --dur-bloom:   620ms;  /* @kind other */
  --dur-loader:  1800ms; /* @kind other */
  --dur-liquid:  6200ms; /* @kind other */
  --enter-stagger: 70ms; /* @kind other */
}

/* The signature "fade up" enter — soft and unhurried. */
@keyframes eu-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slow respiration — lotus, orb, ambient ground. */
@keyframes eu-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Skeleton shimmer sweep. */
@keyframes eu-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Living press-bloom — a soft sprout light opens from the point of touch and
   fades, so a filled control "comes alive" under the finger. Centered on the
   press point by translate(-50%,-50%); gate on prefers-reduced-motion. */
@keyframes eu-press-bloom {
  0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.18); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1); }
}

/* Loader ripple — a petal-ring opens outward from the breathing orb and fades. */
@keyframes eu-ripple {
  0%   { transform: scale(0.32); opacity: 0.55; }
  100% { transform: scale(1);    opacity: 0; }
}

/* Liquid goo — the loader's droplets. SVG circles under a blur + alpha-contrast
   (gooey) filter: satellites rise out of the orb, neck, detach, and melt back.
   The gold droplet carries warm light through the green, shifting the gradient. */
@keyframes eu-goo-core {
  0%, 100% { transform: scale(1); }
  33%      { transform: scale(1.09) translate(1.5px, -1px); }
  66%      { transform: scale(0.95) translate(-1.5px, 1px); }
}
@keyframes eu-goo-a {
  0%, 100% { transform: translate(0, 0) scale(0.55); }
  45%      { transform: translate(15px, -19px) scale(1); }
  62%      { transform: translate(12px, -15px) scale(0.85); }
}
@keyframes eu-goo-b {
  0%, 100% { transform: translate(0, 0) scale(0.5); }
  50%      { transform: translate(-16px, 13px) scale(1); }
}
@keyframes eu-goo-c {
  0%, 100% { transform: translate(0, 0) scale(0.48); }
  55%      { transform: translate(10px, 18px) scale(0.95); }
  72%      { transform: translate(8px, 14px) scale(0.78); }
}
@keyframes eu-goo-light {
  0%, 100% { transform: translate(-5px, -4px) scale(0.9); opacity: 0.45; }
  50%      { transform: translate(6px, 5px) scale(1.15);  opacity: 0.85; }
}

/* Ambient drift — pools of mood-light wander the ground, barely perceptible.
   The room the journal lives in; ~28s cycles, never demanding attention. */
@keyframes eu-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1);       opacity: 0.5; }
  50%      { transform: translate(30px, -22px) scale(1.15); opacity: 0.85; }
}
@keyframes eu-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1.08);    opacity: 0.6; }
  50%      { transform: translate(-26px, 18px) scale(0.92); opacity: 0.3; }
}

/* Quiet halo pulse — a breathing glow behind a resting control (the tab-bar
   practice lotus). Opacity + scale on a detached halo; never shifts layout. */
@keyframes eu-glow-pulse {
  0%, 100% { opacity: 0.3;  transform: scale(0.88); }
  50%      { opacity: 0.75; transform: scale(1.12); }
}

/* Imperceptible rotation — for the M3 scallop "cookie" shapes; a full turn
   takes ~a minute, felt rather than seen. */
@keyframes eu-spin-slow {
  to { transform: rotate(360deg); }
}

/* ── landing modules ── */
:root {
  /* Landing semantic layer. Product tokens stay in assets/tokens; these name
     the layout and material decisions unique to the field-journal story. */
  --layout-max: 1120px;
  --layout-gutter: 32px;
  --layout-gutter-mobile: 20px;
  --nav-height: 68px;
  --section-anchor-offset: 80px;
  --surface-nav: color-mix(in srgb, var(--bg) 84%, transparent);
  --surface-sheet: color-mix(in srgb, var(--paper) 94%, transparent);
  --surface-success: color-mix(in srgb, var(--tint-sage) 86%, var(--paper));
  --focus-ring: color-mix(in srgb, var(--accent) 32%, transparent);
  --shadow-menu: 0 22px 54px color-mix(in srgb, var(--ink) 16%, transparent);
  /* the ground the page stands on once the day ends — one night for both themes */
  /* canon Twilight Garden night: deep garden ground + plum dusk (dark theme's
     --bg and --tint-lavender), so the fallen night matches the app's palette */
  --night-ground: #0E120D;
  --night-dusk: #241E2E;
  /* living-lotus petal light — paired per theme so every [data-lotus] instance
     follows the day (warm forest by day, twilight garden by night) */
  --lotus-o1: #3B5238; --lotus-o2: #6B855A; --lotus-o3: #9DAE6E;
  --lotus-m1: #6E8A58; --lotus-m2: #A6B873; --lotus-m3: #D8D29A;
  --lotus-i1: #BCC988; --lotus-i2: #DAD6A0; --lotus-i3: #E9CDC1;
  --lotus-h1: #F6E9D8; --lotus-h2: #D6A88E;
}
.theme-twilight {
  --lotus-o1: #232D18; --lotus-o2: #4A5A2E; --lotus-o3: #7A7F42;
  --lotus-m1: #3C4A24; --lotus-m2: #77804A; --lotus-m3: #C9A84C;
  --lotus-i1: #8A8A50; --lotus-i2: #CDB56A; --lotus-i3: #E9D8A6;
  --lotus-h1: #F6EBCB; --lotus-h2: #C9A84C;
}
/* derived surfaces resolve against :root's palette, and `color` inherits as a
   computed value from body — re-anchor both inside any twilight scope (the
   night sections, the flipped nav) so the whole subtree follows the flip */
.theme-twilight {
  color: var(--text);
  --surface-nav: color-mix(in srgb, var(--bg) 84%, transparent);
  --surface-sheet: color-mix(in srgb, var(--paper) 94%, transparent);
  --surface-success: color-mix(in srgb, var(--tint-sage) 86%, var(--paper));
  --focus-ring: color-mix(in srgb, var(--accent) 32%, transparent);
  --shadow-menu: 0 22px 54px color-mix(in srgb, var(--ink) 16%, transparent);
}

* { box-sizing: border-box; }
  html, body { margin: 0; }
  html { scroll-behavior: smooth; overflow-x: hidden; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { overflow-x: clip; }
  html.nav-open, body.nav-open { overflow: hidden; overscroll-behavior: contain; }
  body {
    background: var(--bg); color: var(--text); font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased; line-height: 1.5;
  }
  /* the ground gradient lives on its own fixed layer — same look as
     background-attachment: fixed without the per-frame repaint it costs */
  body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-image:
      radial-gradient(80% 42% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
      linear-gradient(var(--bg-card-soft) 0%, var(--bg) 26%, color-mix(in srgb, var(--bg) 84%, var(--ink)) 100%);
  }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--layout-gutter); }
  /* icon spans must never inherit text styling from tracked-caps parents:
     non-zero letter-spacing disables the name->glyph ligatures in Chrome, and
     uppercase breaks the name match (raw "ECO" instead of the leaf) */
  .msr { letter-spacing: normal; text-transform: none; }
  /* lotus hosts are square; reserving the box before JS injects the SVG kills CLS */
  [data-lotus] { aspect-ratio: 1; }
  [data-lotus] .st1 { stop-color: var(--lotus-o1); } [data-lotus] .st2 { stop-color: var(--lotus-o2); } [data-lotus] .st3 { stop-color: var(--lotus-o3); }
  [data-lotus] .sm1 { stop-color: var(--lotus-m1); } [data-lotus] .sm2 { stop-color: var(--lotus-m2); } [data-lotus] .sm3 { stop-color: var(--lotus-m3); }
  [data-lotus] .si1 { stop-color: var(--lotus-i1); } [data-lotus] .si2 { stop-color: var(--lotus-i2); } [data-lotus] .si3 { stop-color: var(--lotus-i3); }
  [data-lotus] .sh1 { stop-color: var(--lotus-h1); } [data-lotus] .sh2 { stop-color: var(--lotus-h2); }
  :where(#top, #story, #product, #lotus, #privacy, #join, #main) { scroll-margin-top: var(--section-anchor-offset); }

/* ── accessibility: skip link + keyboard focus ── */
  .skip-link { position: fixed; top: 10px; left: 10px; z-index: 100;
    transform: translateY(-150%); transition: transform var(--dur-base) var(--ease);
    background: var(--accent-deep); color: var(--on-accent); font-weight: 600; font-size: 14px;
    padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-primary); }
  .skip-link:focus { transform: none; outline: none; }
  /* screen-reader-only text: names sections whose visual design carries no
     heading, so the h1→h2→h3 outline stays intact for assistive tech */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 6px; }
  .nav-toggle:focus-visible { outline-offset: 3px; }
  .msr { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; line-height: 1;
    -webkit-font-feature-settings: "liga"; }

/* ── nav ── */
  nav { position: sticky; top: 0; z-index: 90;
    background: var(--surface-nav);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); }
  .nav-inner { display: flex; align-items: center; gap: 22px; height: var(--nav-height); }
  .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
  .brand img { width: 40px; height: 40px; }
  .brand .word { font-family: var(--font-display); font-style: italic; font-size: 26px; }
  .nav-link { font-size: 14px; color: var(--text-mute); transition: color var(--dur-base) var(--ease); }
  .nav-link:hover { color: var(--text); }
  .header-cta { margin-left: 2px; }
  .nav-menu { display: flex; align-items: center; gap: 26px; }
  .nav-link, .text-link { white-space: nowrap; }
  .nav-menu-note, .nav-menu-legal { display: none; }
  .nav-toggle { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong);
    background: transparent; color: var(--text-mute); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
  .nav-toggle:hover { color: var(--text); border-color: var(--text-mute); }
  .nav-toggle line { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
  .nav-toggle.is-open line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-toggle.is-open line:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .nav-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); pointer-events: none; }

/* ── day-cycle sky — the page passes from dawn to dusk as you scroll ── */
  .sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
  .sky::before { content: ""; position: absolute; inset: 0; opacity: calc(var(--noon, 0) * .55);
    background: radial-gradient(72% 48% at 50% 0%, color-mix(in srgb, var(--tint-cream) 70%, transparent), transparent 72%); }
  /* dusk hands over to night: the pale lavender veil must leave as the true
     dark arrives, or it grays the canon night ground from above */
  .sky::after { content: ""; position: absolute; inset: 0;
    opacity: calc(var(--dusk, 0) * .7 * (1 - var(--night, 0)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--tint-lavender) 46%, transparent) 0%,
      color-mix(in srgb, #4A3960 30%, transparent) 100%); }
  /* night ground — rises as the promise chapter enters; canon Twilight Garden:
     plum dusk melting into the deep garden night, never a neutral gray */
  .sky .night { position: absolute; inset: 0; opacity: var(--night, 0);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--night-dusk) 34%, var(--night-ground)) 0%,
      var(--night-ground) 55%); }
  /* sections that cross into night swap to twilight tokens off-screen; these
     registered tokens let the fixed chrome (nav, day rail) cross-dissolve instead
     of popping when its class flips in view */
  @property --text { syntax: "<color>"; inherits: true; initial-value: #211B12; }
  @property --text-mute { syntax: "<color>"; inherits: true; initial-value: #4E4839; }
  @property --text-soft { syntax: "<color>"; inherits: true; initial-value: #6A6253; }
  @property --accent-deep { syntax: "<color>"; inherits: true; initial-value: #3E531C; }
  nav[data-night], .dayrail[data-night] {
    transition: --text .9s var(--ease), --text-mute .9s var(--ease),
      --text-soft .9s var(--ease), --accent-deep .9s var(--ease),
      background-color .9s var(--ease), border-color .9s var(--ease); }
  /* the sun rides the compositor: position via transform, never left/top */
  .sky .orb { position: absolute; left: 0; top: 0; width: 46vmin; height: 46vmin;
    transform: translate(var(--sunx, 20vw), var(--suny, 30vh)) translate(-50%, -50%);
    will-change: transform; pointer-events: none; }
  .sky .orb::before, .sky .orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
  .sky .orb::before { opacity: calc((1 - var(--dusk, 0)) * .5);
    background: radial-gradient(circle, color-mix(in srgb, var(--tint-cream) 85%, #fff) 0%,
      color-mix(in srgb, var(--tint-cream) 40%, transparent) 34%, transparent 68%); }
  .sky .orb::after { opacity: calc(var(--dusk, 0) * .45);
    background: radial-gradient(circle, color-mix(in srgb, var(--tint-lavender) 80%, #fff) 0%,
      color-mix(in srgb, var(--tint-lavender) 36%, transparent) 30%, transparent 66%); }

  /* ── dust — pollen by day, fireflies by dusk (canvas, motion-safe) ── */
  .dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .dust { display: none; } }

  /* ── day rail — the whole page is one day; this is its clock ── */
  .dayrail { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 40;
    display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
  .dr-time { font-family: var(--font-sans); font-weight: 700; font-size: 10px; line-height: 1;
    letter-spacing: 1.6px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
  .dr-line { position: relative; width: 1px; height: 30vh;
    background: color-mix(in srgb, var(--text-mute) 28%, transparent); }
  .dr-sun { position: absolute; left: 50%; top: calc(var(--sp, 0) * 100%);
    width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--accent-deep);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
  .dr-word { font-family: var(--font-sans); font-weight: 700; font-size: 10px; line-height: 1;
    letter-spacing: 2.2px; text-transform: uppercase; color: var(--text-soft); writing-mode: vertical-rl; }
  @media (max-width: 1240px), (prefers-reduced-motion: reduce) { .dayrail { display: none; } }

  /* ── mood veil — the sky takes the mood you hold ── */
  .mood-veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
    background: radial-gradient(70% 60% at 50% 30%, var(--mv, transparent), transparent 75%);
    transition: opacity .7s var(--ease); }
  body[data-mood] .mood-veil { opacity: .55; }

  /* ── cursor glow — attention as light ── */
  .cursor-glow { position: fixed; left: 0; top: 0; z-index: 70; width: 340px; height: 340px;
    border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 65%);
    transition: opacity .6s var(--ease); }
  body.has-cursor .cursor-glow { opacity: 1; }
  @media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }

  /* ── band lotus draws itself — line-art first, then it lives ── */
  .band-lotus .pt path { stroke: var(--accent-deep); stroke-width: 1; vector-effect: non-scaling-stroke;
    stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 1));
    stroke-opacity: calc(1 - var(--draw, 1)); fill-opacity: calc(var(--draw, 1) * .97); }

  /* ── mood names drift — the vocabulary, typography as the hero ── */
  .mood-flow { overflow: hidden; padding: clamp(36px, 7vh, 76px) 0;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .mf-line { display: flex; gap: clamp(32px, 4vw, 64px); white-space: nowrap; width: max-content;
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(44px, 7vw, 96px); color: var(--text); line-height: 1.05;
    /* dissolve before the words slide under the frosted nav — no hard clip at the header */
    opacity: calc(.2 - .2 * clamp(0, (var(--dp, .5) - .66) * 5, 1)); }
  .mf-line.a { transform: translateX(calc(-16vw + var(--dp, 0) * 12vw)); }
  .mf-line.b { transform: translateX(calc(-2vw - var(--dp, 0) * 12vw)); color: var(--accent-deep); }
  @media (prefers-reduced-motion: reduce) { .mf-line { transform: none; } }

  /* ── CTA breath — shadow-only pulse, no layout shift ── */
  @media (prefers-reduced-motion: no-preference) {
    .beta-form .btn-primary { animation: cta-breath 3.8s var(--ease-soft) infinite; }
    @keyframes cta-breath {
      0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
      50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 16%, transparent); }
    }
  }

  /* ── touch bloom — the app's tap aura, echoed on the landing ── */
  .touch-aura { position: fixed; z-index: 80; width: 14px; height: 14px; border-radius: 50%;
    pointer-events: none; transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 70%);
    animation: touch-bloom .85s var(--ease) forwards; }
  @keyframes touch-bloom { 0% { width: 14px; height: 14px; opacity: 0; } 18% { opacity: .5; }
    100% { width: 280px; height: 280px; opacity: 0; } }

/* ── buttons ── */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-sans); font-weight: 500; font-size: 15px; letter-spacing: .08px;
    border-radius: var(--r-pill); cursor: pointer; border: none; height: 50px; padding: 0 26px;
    white-space: nowrap;
    /* the magnetic drift rides --magx/--magy so :active can still compose the
       press scale on top (an inline transform would override it) */
    transform: translate(var(--magx, 0px), var(--magy, 0px));
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease); }
  .btn:active { transform: translate(var(--magx, 0px), var(--magy, 0px)) scale(var(--press-scale)); }
  .btn.magnetic { transition: transform .5s var(--ease), box-shadow var(--dur-base) var(--ease); }
  .btn.magnetic:active { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease); }
  .btn-primary { background: var(--accent-deep); color: var(--on-accent); box-shadow: var(--shadow-primary); }
  .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
  .btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
  .btn.is-loading { opacity: 0.8; cursor: wait !important; }

  /* ── waitlist form ── */
  .beta { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
  .beta-form { display: flex; gap: 10px; flex-wrap: wrap; }
  .hp-wrap { position: absolute !important; left: -10000px !important; top: auto !important;
    width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
  .beta-input { flex: 1 1 200px; height: 50px; padding: 0 18px; border-radius: var(--r-pill);
    border: 1px solid var(--line-strong); background: var(--paper); color: var(--text);
    font-family: var(--font-sans); font-size: 15px; outline: none;
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
  .beta-input::placeholder { color: var(--text-soft); }
  .beta-input:focus { border-color: var(--accent-deep);
    box-shadow: 0 0 0 3px var(--focus-ring); }
  .beta-form .btn-primary { flex: 0 0 auto; }
  .beta-note { font-size: 13px; color: var(--text-mute); margin: 0; display: flex; align-items: flex-start; gap: 7px; }
  .beta-note .msr { font-size: 15px; color: var(--accent-deep); }
  .beta-note a { text-decoration: underline; text-underline-offset: 3px; }
  .beta-done { display: none; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--r-lg);
    background: var(--surface-success); border: 1px solid var(--line-strong); color: var(--text); font-size: 15px; max-width: 520px;
    text-align: left; box-shadow: var(--shadow-card); }
  .beta-done .msr { font-size: 22px; color: var(--accent-deep); flex: none; }
  .beta-done strong, .beta-done small { display: block; }
  .beta-done small { margin-top: 4px; color: var(--text-mute); font-size: 12.5px; line-height: 1.45; }
  .beta.is-done .beta-form, .beta.is-done .beta-note { display: none; }
  .beta.is-done .beta-done { display: flex; }
  .beta-err { display: none; margin: 0; font-size: 13px; color: var(--accent-support-text); }
  .beta.is-error .beta-err:not(:empty) { display: block; }
  .beta.is-error .beta-note { display: none; }
  .beta.is-error .beta-input { border-color: var(--accent-support);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-support) 26%, transparent); }
  .beta-closed { display: none; align-items: flex-start; gap: 10px; padding: 14px 18px; border-radius: var(--r-lg);
    background: var(--bg-card); border: 1px solid var(--card-border); color: var(--text); font-size: 15px;
    max-width: 460px; line-height: 1.5; }
  .beta-closed .msr { font-size: 22px; color: var(--accent-support-text); flex: none; }
  .beta.is-closed .beta-form, .beta.is-closed .beta-note,
  .beta.is-closed .beta-done, .beta.is-closed .beta-err { display: none; }
  .beta.is-closed .beta-closed { display: flex; }

/* ── phone mockup chrome (mirrors the app) ── */
  .pm { --s: .62; position: relative; flex: none;
    width: calc(390px * var(--s)); height: calc(844px * var(--s));
    border-radius: calc(46px * var(--s)); overflow: hidden;
    box-shadow: 0 0 0 calc(9px * var(--s)) #100d09, 0 30px 70px rgba(28,20,10,.34); }
  .pm-inner { position: absolute; top: 0; left: 0; width: 390px; height: 844px;
    transform-origin: top left; transform: scale(var(--s));
    background: var(--bg); overflow: hidden;
    background-image:
      radial-gradient(120% 56% at 50% 20%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
      linear-gradient(var(--bg-card-soft) 0%, var(--bg) 34%, color-mix(in srgb, var(--bg) 80%, #000) 100%); }
  .pm-status { position: absolute; top: 0; left: 0; right: 0; z-index: 20; height: 46px;
    display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
    font-size: 13px; font-weight: 600; color: var(--text); }
  .pm-status .r { display: flex; align-items: center; gap: 6px; }
  .sb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); opacity: .7; }
  .pm-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
  .pm-head { display: flex; align-items: center; gap: 10px; padding: 54px 22px 0; }
  .pm-head .hicon { width: 34px; height: 34px; border-radius: 50%;
    background: color-mix(in srgb, var(--bg-card) 55%, transparent); color: var(--text-mute);
    display: inline-flex; align-items: center; justify-content: center; }
  .pm-meta { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-mute); }
  .pm-back-row { display: flex; align-items: center; gap: 8px; padding: 50px 16px 0; }
  .pm-back-row .hicon { width: 34px; height: 34px; border-radius: 50%; color: var(--text-mute);
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg-card) 50%, transparent); }
  .pm-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    display: flex; justify-content: space-around; align-items: flex-end; padding: 10px 14px 24px;
    background: color-mix(in srgb, var(--bg-card) 74%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .pm-nav .it { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--text-mute); }
  .pm-nav .it.on { color: var(--accent-deep); }
  .pm-nav .it span { font-size: 10px; font-weight: 600; letter-spacing: .3px; }
  .pm-nav .it.ctr { margin-top: -24px; }
  .pm-nav .it.ctr .orb { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-deep);
    color: var(--on-accent); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-deep) 32%, transparent); }
  .pm-fab { position: absolute; right: 20px; bottom: 86px; z-index: 7; width: 54px; height: 54px;
    border-radius: 50%; background: var(--accent-deep); color: var(--on-accent);
    box-shadow: var(--shadow-primary); display: flex; align-items: center; justify-content: center; }
  .pm-disp { font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 38px; line-height: 1.05; letter-spacing: -0.5px; color: var(--text); }
  .pm-cap { font-size: 12px; line-height: 1.45; color: var(--text-mute); }
  .pm-home-body { flex: 1; display: flex; flex-direction: column; padding: 18px 24px 0; }
  .pm-lotus { width: 200px; height: 200px;
    animation: eu-breathe var(--dur-breath, 4200ms) var(--ease-soft) infinite; transform-origin: center; }
  @media (prefers-reduced-motion: reduce) { .pm-lotus { animation: none; } }
  .pm-moodline { text-align: center; font-family: var(--font-sans); font-weight: 500; font-size: 11px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); }
  .pm-btn { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: var(--r-pill);
    font-family: var(--font-sans); font-weight: 500; font-size: 15px; }
  .pm-btn.primary { background: var(--accent-deep); color: var(--on-accent); box-shadow: var(--shadow-primary); }
  .pm-btn.quiet { color: var(--text-mute); }
  .pm-pad { padding: 8px 24px 0; overflow: hidden; }
  .pm-h1 { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.15px; color: var(--text); }
  .mood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mood { border-radius: 16px; padding: 14px; border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card); position: relative; }
  .mood .g { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 50%, #fff 12%); color: var(--accent-deep); margin-bottom: 10px; }
  .mood .g .msr { font-size: 20px; }
  .mood .l { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--text); }
  .mood .s { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
  .mood.sel { box-shadow: 0 0 0 2px var(--accent-deep), var(--shadow-card); }
  .pm-label { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--text); }
  .pm-pills { display: flex; gap: 8px; }
  .pm-pill { padding: 8px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
    color: var(--text-mute); background: var(--bg-card); border: 1px solid var(--card-border); }
  .pm-pill.sel { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }
  .pm-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px;
    border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--line);
    color: var(--text-soft); font-size: 13px; }
  .pm-search .msr { font-size: 18px; color: var(--text-mute); }
  .pm-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
    border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg-card);
    color: var(--text-soft); font-size: 12px; font-weight: 600; }
  .pm-chip .msr { font-size: 16px; }
  .pm-entry { background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card); padding: 16px; }
  .pm-entry .who { display: flex; align-items: center; gap: 10px; }
  .pm-entry .eg { width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-deep); }
  .pm-entry .eg .msr { font-size: 19px; }
  .pm-entry .mn { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--text); line-height: 1.1; }
  .pm-entry .mn small { font-family: var(--font-sans); font-style: normal; font-size: 12px; color: var(--text-soft); font-weight: 400; }
  .pm-entry .txt { font-size: 14px; line-height: 1.45; color: var(--text); }
  .pm-sumcard { background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card); padding: 16px; }
  .pm-sumrow { display: flex; justify-content: space-between; }
  .pm-sumrow .it { display: flex; align-items: center; gap: 8px; }
  .pm-sumrow .dot { width: 10px; height: 10px; border-radius: 50%; }
  .pm-sumrow .lbl { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--text); }

  /* ══ scroll-story engine ══ */
  [data-scene] { --p: 0; position: relative; }
  .stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }

/* ── chapter plates — the book's running heads ── */
  .chap { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px 22px;
    border-top: 1px solid var(--line-strong); padding-top: 16px; text-align: left; }
  .ch-no { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 2.6px;
    text-transform: uppercase; color: var(--accent-deep); white-space: nowrap; }
  .ch-title { grid-column: 2; font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
  .ch-time { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 2px;
    color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ch-dek { grid-column: 2 / -1; max-width: 54ch; color: var(--text-mute); font-size: 16px;
    line-height: 1.55; margin: 8px 0 0; text-wrap: pretty; }
  .flow-ch { margin-bottom: clamp(36px, 6vh, 64px); }
  /* plates pinned at the top of sticky scenes — clearance derives from the nav
     token so the plate can never slide under the frosted bar */
  .stick .ch-wrap { flex: none; width: 100%;
    padding-top: calc(var(--nav-height) + clamp(8px, 3vh, 34px)); pointer-events: none;
    position: relative; z-index: 3; }
  .stick .chap { padding-top: 13px; }
  .stick .chap .ch-title { font-size: clamp(22px, 2.5vw, 32px); }
  .scene-body { flex: 1; min-height: 0; position: relative; width: 100%;
    display: flex; align-items: center; justify-content: center; }
  .scene-body > .wrap { width: 100%; }

  /* reveals (base state visible; hidden only when motion is welcome) */
  @media (prefers-reduced-motion: no-preference) {
    .rv { opacity: 0; transform: translateY(26px); }
    .rv.in { opacity: 1; transform: none;
      transition: opacity .9s var(--ease), transform .9s var(--ease);
      transition-delay: var(--rd, 0ms); }
    /* specimens keep their pinned tilt through the reveal */
    .mood-tk.rv { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(30px); }
    .mood-tk.rv.in { opacity: 1; transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0px));
      transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--rd, 0ms); }
    /* if the module bundle never ran (blocked, failed, disabled), nothing that
       was hidden for a reveal may stay hidden — the page degrades to visible */
    html:not(.js) .rv { opacity: 1; transform: none; }
  }

/* ── hero — the journal's title page ── */
  .hero { min-height: calc(100svh - var(--nav-height)); display: flex; align-items: center; position: relative; }
  .hero::before { content: ""; position: absolute; inset: -12% 0 auto 0; height: 120%; z-index: 0; pointer-events: none;
    background: radial-gradient(46% 46% at 50% 34%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%); }
  .hero-copy { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: clamp(12px, 2svh, 24px); padding: clamp(14px, 2.4svh, 34px) 0 84px; }
  .hero-eyebrow { align-self: center; margin: 0; display: inline-flex; align-items: center; gap: 13px;
    font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--accent-deep); }
  .hero-eyebrow::before, .hero-eyebrow::after { content: ""; width: 26px; height: 1px;
    background: color-mix(in srgb, var(--accent-deep) 42%, transparent); }
  .hero-breath { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .breath-stage { position: relative; display: inline-flex; align-items: center; justify-content: center; }
  .hero-lotus { position: relative; width: clamp(104px, 13.5svh, 160px); cursor: pointer; touch-action: none;
    -webkit-user-select: none; user-select: none;
    animation: eu-breathe var(--dur-breath, 4200ms) var(--ease-soft) infinite; transform-origin: center; }
  .hero-lotus svg { width: 100%; height: auto; display: block; }
  @media (prefers-reduced-motion: reduce) { .hero-lotus { animation: none; } }
  /* A fluid energy field replaces the counting ring and follows the contact. */
  .breath-aura {
    --bp: 0;
    position: absolute;
    left: var(--aura-x, 50%);
    top: var(--aura-y, 50%);
    width: clamp(180px, 30svh, 300px);
    aspect-ratio: 1;
    z-index: -1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    filter: blur(9px) saturate(1.18);
    transition:
      left .22s var(--ease-soft),
      top .22s var(--ease-soft),
      opacity .65s var(--ease);
    will-change: left, top, opacity;
  }
  .breath-aura::before,
  .breath-aura::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  .breath-aura::before {
    inset: 8% 5% 12% 9%;
    border-radius: 58% 42% 64% 36% / 44% 61% 39% 56%;
    background:
      radial-gradient(ellipse at 32% 38%,
        color-mix(in srgb, var(--accent) 64%, transparent) 0 14%,
        color-mix(in srgb, var(--accent) 30%, transparent) 36%,
        transparent 70%),
      radial-gradient(ellipse at 67% 63%,
        color-mix(in srgb, var(--tint-cream) 72%, transparent) 0 12%,
        color-mix(in srgb, var(--accent-deep) 18%, transparent) 42%,
        transparent 72%);
    transform: rotate(-8deg) scale(calc(.68 + var(--bp) * .48));
    animation: breath-aura-flow 5.6s ease-in-out infinite alternate;
  }
  .breath-aura::after {
    inset: 18% 13% 7% 4%;
    border-radius: 36% 64% 43% 57% / 62% 38% 58% 42%;
    background:
      radial-gradient(ellipse at 66% 33%,
        color-mix(in srgb, var(--lotus-m2) 50%, transparent) 0 13%,
        color-mix(in srgb, var(--accent) 24%, transparent) 43%,
        transparent 72%),
      radial-gradient(ellipse at 34% 69%,
        color-mix(in srgb, var(--tint-lavender) 38%, transparent) 0 10%,
        transparent 64%);
    transform: rotate(11deg) scale(calc(.62 + var(--bp) * .54));
    animation: breath-aura-drift 4.4s ease-in-out infinite alternate-reverse;
  }
  .hero.breathing .breath-aura {
    opacity: calc(.44 + var(--bp) * .5);
    transition:
      left .22s var(--ease-soft),
      top .22s var(--ease-soft),
      opacity .32s var(--ease);
  }
  @keyframes breath-aura-flow {
    0% { transform: rotate(-9deg) translate3d(-2%, 1%, 0) scale(calc(.68 + var(--bp) * .48)); }
    52% { transform: rotate(5deg) translate3d(3%, -2%, 0) scale(calc(.72 + var(--bp) * .5)); }
    100% { transform: rotate(13deg) translate3d(-1%, 3%, 0) scale(calc(.66 + var(--bp) * .52)); }
  }
  @keyframes breath-aura-drift {
    0% { transform: rotate(12deg) translate3d(3%, 0, 0) scale(calc(.62 + var(--bp) * .54)); }
    55% { transform: rotate(-6deg) translate3d(-3%, 3%, 0) scale(calc(.66 + var(--bp) * .5)); }
    100% { transform: rotate(-15deg) translate3d(1%, -2%, 0) scale(calc(.6 + var(--bp) * .56)); }
  }
  .breath-word { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 12px);
    font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--text);
    white-space: nowrap; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
  .hero.breathing .breath-word { opacity: 1; }
  /* the same whisper voice as "The day begins" — italic serif, not tracked caps */
  .breath-cue { appearance: none; background: none; border: none; cursor: pointer; padding: 6px 2px 3px;
    font-family: var(--font-display); font-style: italic; font-size: 17px;
    color: var(--text-mute); border-bottom: 1px solid color-mix(in srgb, var(--text-mute) 45%, transparent);
    touch-action: none; -webkit-user-select: none; user-select: none;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), opacity .5s var(--ease); }
  .breath-cue:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
  .hero.breathing .breath-cue { opacity: 0; }
  /* while you breathe, the page holds its breath — the type recedes, the light stays */
  .hero .hero-eyebrow, .hero h1.display, .hero .subhead, .hero .hero-actions, .hero .hero-proof {
    transition: opacity 1s var(--ease); }
  .hero.breathing .hero-eyebrow, .hero.breathing h1.display, .hero.breathing .subhead,
  .hero.breathing .hero-actions, .hero.breathing .hero-proof { opacity: .12; }

  /* ── living lotus — 24 petals, bloom driven by --bloom (0 closed … 1 open) ── */
  .lotus-live { --bloom: 1; }
  .lotus-live .pt {
    opacity: calc(.12 + .88 * var(--bo, 1));
    transform: translate(54px, 54px) rotate(calc(var(--a) + (1 - var(--bo, 1)) * -26deg))
      scale(calc(var(--rs) * (0.08 + 0.92 * var(--bo, 1)))); }
  .lotus-live .r0 { --bo: clamp(0, calc(var(--bloom) * 1.5), 1); }
  .lotus-live .r1 { --bo: clamp(0, calc((var(--bloom) - .16) * 1.5), 1); }
  .lotus-live .r2 { --bo: clamp(0, calc((var(--bloom) - .36) * 1.7), 1); }
  .lotus-live .heart { transform-origin: 54px 54px; transform: scale(calc(.6 + .4 * var(--bloom))); }
  @media (prefers-reduced-motion: reduce) {
    .lotus-live { --bloom: 1 !important; }
    .breath-aura { filter: blur(15px); transition: opacity .2s ease; }
    .breath-aura::before, .breath-aura::after { animation: none; transform: none; }
  }
  h1.display { font-family: var(--font-display); font-style: normal; font-weight: 500;
    font-size: clamp(52px, min(9vw, 11.5svh), 116px); line-height: .97; letter-spacing: -0.03em; margin: 0;
    max-width: 12ch; text-wrap: balance; }
  h1.display .hw.acc { font-style: italic; color: var(--accent-deep); }
  .subhead { font-size: clamp(16px, 1.35vw, 19px); color: var(--text-mute); max-width: 46ch;
    margin: 0; text-wrap: pretty; line-height: 1.55; }
  .subhead b { color: var(--text); font-weight: 600; }
  .hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
  .hero-proof { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px 18px;
    margin: 2px 0 0; color: var(--text-mute); font-size: 11px; letter-spacing: .04em; }
  .hero-proof span { position: relative; }
  .hero-proof span + span::before { content: ""; position: absolute; left: -10px; top: 50%;
    width: 3px; height: 3px; border-radius: 50%; background: var(--accent-deep); transform: translateY(-50%); }
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy > * { opacity: 0; transform: translateY(18px);
      animation: hero-in 1s var(--ease) forwards; }
    .hero-copy > *:nth-child(1) { animation-delay: .05s; }
    .hero-copy > *:nth-child(3) { animation-delay: .38s; }
    .hero-copy > *:nth-child(4) { animation-delay: .54s; }
    .hero-copy > *:nth-child(5) { animation-delay: .68s; }
    .hero-copy > *:nth-child(6) { animation-delay: .8s; }
    @keyframes hero-in { to { opacity: 1; transform: none; } }
    .hero-copy > h1.display { animation: none; opacity: 1; transform: none; }
    /* words rise from quarter-visible, so the first paint is already contentful */
    h1.display .hw { display: inline-block; opacity: .25; transform: translateY(.3em);
      animation: hero-word .9s var(--ease) forwards; animation-delay: var(--hd, .3s); }
    @keyframes hero-word { to { opacity: 1; transform: none; } }
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy { transform: translateY(calc(var(--hy, 0) * -46px)); opacity: calc(1 - var(--hy, 0) * 0.85); }
    .scroll-cue { opacity: calc(1 - var(--hy, 0) * 2.4); }
  }
  /* not a scroll cue: the book announces its own first chapter, as a whisper */
  .scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 1;
    color: var(--text-mute); }
  .scroll-cue .t { font-family: var(--font-display); font-style: italic; font-size: 17px; }

/* ── how it works — three quiet steps ── */
.howit {
  padding: clamp(48px, 8vh, 88px) 0 clamp(36px, 6vh, 64px);
}

.howit-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.howit-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--compact-sm);
}

.howit-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--accent-deep);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
}

.howit-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}

.howit-desc {
  font-size: var(--body-soft-size);
  line-height: var(--body-soft-line);
  color: var(--text-mute);
  margin: 0;
  max-width: 24ch;
}

@media (max-width: 600px) {
  .howit-steps {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 320px;
  }
}
/* ── scene 1 · grades dissolve ── */
  .noise { height: 230vh; }
  .noise .stick { text-align: center; overflow: clip; }
  .noise-center { position: relative; z-index: 2; max-width: 60ch; padding: 0 24px; }
  .noise-l1 { font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -0.4px; margin: 0;
    text-wrap: balance; }
  /* discrete beats: scroll crosses a threshold, CSS transitions perform the
     change — a rest position never shows a half-dissolved state */
  .noise-l2 { font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08;
    letter-spacing: calc(-0.4px + .12em);
    margin: 14px 0 0; color: var(--accent-deep); text-wrap: balance;
    opacity: 0; transform: translateY(16px);
    transition: opacity .8s var(--ease), transform .8s var(--ease), letter-spacing 1.1s var(--ease); }
  .noise.s-l2 .noise-l2 { opacity: 1; transform: none; letter-spacing: -0.4px; }
  .noise-cap { font-size: 15px; color: var(--text-mute); margin: 20px auto 0; max-width: 40ch;
    text-wrap: pretty; opacity: 0; transition: opacity .7s var(--ease) .15s; }
  .noise.s-cap .noise-cap { opacity: 1; }
  /* no JS -> no thresholds: the chapter must still tell its whole story */
  html:not(.js) .noise-l2 { opacity: 1; transform: none; letter-spacing: -0.4px; }
  html:not(.js) .noise-cap { opacity: 1; }
  .chip-cluster { display: contents; }
  .chip { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: var(--r-pill); background: var(--paper);
    border: 1px solid var(--line-strong); box-shadow: var(--shadow-card);
    /* layout containment only: paint containment would clip the char shatter
       at the pill edge (the scene's own overflow: clip bounds stray ink) */
    min-height: 34px; contain: layout;
    font-size: 14px; font-weight: 600; color: var(--text-mute); white-space: nowrap;
    opacity: .95;
    transform: translate(calc(var(--dx) * var(--p)), calc(var(--dy) * var(--p)))
      rotate(calc(var(--rz) * var(--p)));
    transition: opacity .6s var(--ease) .18s; }
  .chip.gone { opacity: 0; }
  .chip .msr { font-size: 17px; color: var(--text-soft); }
  /* the mid-height chips live at headline height — keep them pinned to the far
     edges and only show them when the centre column has real clearance */
  @media (max-width: 1200px) { .chip.lo { display: none; } }
  .chip .chw { display: inline-block; white-space: pre; }
  .chip .ch { display: inline-block; white-space: pre;
    transition: transform .75s var(--ease), opacity .6s var(--ease);
    transition-delay: var(--chd, 0ms); }
  .chip.gone .ch { transform: translate(var(--sx, 0px), var(--sy, -60px))
      rotate(var(--sr, 30deg)) scale(.7); opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .chip { opacity: .3; transform: none; transition: opacity .4s ease; }
    .chip.gone { opacity: 0; }
    .noise-l2, .noise-cap { opacity: 1; transform: none; letter-spacing: -0.4px; transition: none; }
  }

/* ── ch. II · naming — the herbarium: specimens pinned to the page, not cards ── */
  .moods { padding: clamp(72px, 11vh, 130px) 0 clamp(60px, 9vh, 110px); }
  .herb { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(44px, 7vh, 72px) clamp(24px, 3vw, 44px);
    max-width: 1020px; margin: 0 auto; }
  .mood-tk { position: relative; border-top: 1px solid var(--line-strong); padding: 13px 2px 0; cursor: default;
    transform: rotate(var(--tilt, 0deg)) translateY(calc(var(--lift, 0px) + var(--dp, 0) * var(--f, 0) * -22px)); }
  .mood-tk .no { display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 2.2px;
    text-transform: uppercase; color: var(--text-mute); }
  /* the specimen's pressed glyph — the same vocabulary the app's check-in uses */
  .mood-tk .sw { width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    color: var(--accent-deep);
    transition: transform .55s var(--ease); }
  .mood-tk .sw .msr { font-size: 17px; }
  .mood-tk:hover .sw { transform: rotate(-8deg) scale(1.08); }
  .mood-tk .l { font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(28px, 2.9vw, 40px); line-height: 1.05; color: var(--text); margin: 10px 0 0;
    transition: color .4s var(--ease); }
  .mood-tk .s { font-size: 13px; color: var(--text); opacity: .72; margin: 5px 0 0; }
  .mood-tk::after { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px;
    background: var(--accent-deep); transition: width .55s var(--ease); }
  .mood-tk:hover .l, .mood-tk.sel .l { color: var(--accent-deep); }
  .mood-tk:hover::after, .mood-tk.sel::after { width: 100%; }
  .mood-tk.sel .sw { border-color: var(--accent-deep); }

/* ── ch. III · the room (sticky phone) ── */
  .journey { height: 440vh; }
  .jgrid { display: grid; grid-template-columns: minmax(300px, 430px) 1fr;
    gap: clamp(28px, 5vw, 72px); align-items: center; width: 100%; }
  .jsteps { display: flex; flex-direction: column; gap: 6px; }
  .jstep { position: relative; padding: 14px 0 14px 22px; border-left: 1px solid var(--line);
    opacity: .34; transition: opacity .5s var(--ease); }
  .jstep::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 100%;
    background: var(--accent-deep); transform: scaleY(0); transform-origin: 0 0; transition: transform .6s var(--ease); }
  .jstep.on { opacity: 1; }
  .jstep.on::before { transform: scaleY(1); }
  .jstep .k { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--accent-deep); }
  .jstep h3 { font-family: var(--font-display); font-style: italic; font-size: 26px; font-weight: 500; margin: 6px 0 4px; }
  .jstep p { color: var(--text-mute); font-size: 14px; line-height: 1.5; margin: 0; }
  .jphone {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    perspective: 1400px;
    padding-bottom: clamp(36px, 7svh, 64px);
  }
  .jphone .pm { --s: .62; transform: rotateY(var(--tilt, 0deg)); transition: transform .9s var(--ease); }
  @media (prefers-reduced-motion: reduce) { .jphone .pm { transform: none; transition: none; } }
  .jscreen { position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transform: translateY(14px); transition: opacity .45s var(--ease); }
  @media (prefers-reduced-motion: no-preference) {
    .jscreen { transition: opacity .45s var(--ease), transform .55s var(--ease); }
  }
  .jscreen.on { opacity: 1; transform: none; pointer-events: auto; }

  /* ── sections ── */
  section { position: relative; }

  /* ── lotus band — a day passes in one scene: bloom at dawn, fold at dusk ── */
  .band { height: 280vh; }
  /* Blur across the actual section boundary, not just inside the next scene.
     The masked overlap dissolves the product floor before the lotus room begins. */
  .band::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: clamp(-64px, -8svh, -48px);
    height: clamp(150px, 24svh, 220px);
    pointer-events: none;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 5%, transparent) 0%,
      color-mix(in srgb, var(--bg-card) 18%, transparent) 46%,
      color-mix(in srgb, var(--bg-card) 8%, transparent) 72%,
      transparent 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, #000 24%, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg,
      transparent 0%, #000 24%, #000 62%, transparent 100%);
  }
  /* Ease both edges of the lotus room into the fixed day-cycle ground. The
     transparent ends reveal the same sky as the adjacent chapters, so neither
     the entrance nor the hand-off to the promise can form a section seam. */
  .band .stick {
    background: linear-gradient(180deg,
      transparent 0,
      color-mix(in srgb, var(--bg-card) 38%, transparent) clamp(84px, 14svh, 120px),
      var(--bg-card) clamp(150px, 25svh, 220px),
      var(--bg-card) calc(100% - clamp(220px, 34svh, 300px)),
      color-mix(in srgb, var(--bg-card) 46%, transparent) calc(100% - clamp(96px, 16svh, 140px)),
      transparent 100%);
    border-bottom: 0;
  }
  /* The chapter rule belongs inside the book plates. At this scene boundary it
     reads as a divider, so the soft ground transition carries the hand-off. */
  .band .chap { border-top-color: transparent; }
  .band-dusk { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--dusk, 0) * .82);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tint-lavender) 52%, transparent) 0%,
      color-mix(in srgb, var(--tint-lavender) 26%, rgba(22, 18, 36, .3)) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .72) 76%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .72) 76%, transparent 100%); }
  .band-inner { position: relative; display: grid; grid-template-columns: 1.08fr 1fr;
    gap: clamp(32px, 5vw, 72px); align-items: center; width: 100%; }
  .band-lotus { position: relative; width: min(440px, 52vh); justify-self: center; transform-origin: center;
    animation: eu-breathe var(--dur-breath, 4200ms) var(--ease-soft) infinite; }
  /* the flower is the scene's sun: a warm pool of light that cools as dusk takes it */
  .band-lotus::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 66%);
    opacity: calc(.9 - var(--dusk, 0) * .62); }
  .band-lotus::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--tint-lavender) 55%, transparent) 0%, transparent 62%);
    opacity: calc(var(--dusk, 0) * .55); }
  .band-lotus svg { width: 100%; height: auto; display: block; }
  /* the day narrated in three lines, keyed to the bloom the engine already drives */
  .band-line { display: grid; font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.02em;
    margin: 0 0 16px; min-height: 2.2em; align-items: start; text-wrap: balance; }
  .band-line .bl {
    grid-area: 1 / 1;
    opacity: 0;
    filter: blur(2px);
    transform: translateY(.14em);
    transition:
      opacity .18s var(--ease),
      filter .24s var(--ease),
      transform .28s var(--ease);
  }
  .band:not([data-ph]) .b0 {
    opacity: 1;
    filter: none;
    transform: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    /* Fade through a quiet beat instead of cross-fading two full sentences.
       The outgoing line clears first; the incoming line then settles into place. */
    .band[data-ph="0"] .b0,
    .band[data-ph="1"] .b1,
    .band[data-ph="2"] .b2 {
      opacity: 1;
      filter: none;
      transform: none;
      transition-delay: .2s;
    }
  }
  .band p { color: var(--text-mute); font-size: 16px; margin: 0 0 14px; max-width: 42ch; }
  @media (prefers-reduced-motion: no-preference) {
    /* the day's words let go as night rises — and never sit half-lit on the veil */
    .band-copy { opacity: calc(1 - var(--night, 0) * .6); }
  }
  .moodline { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-mute); }
  .moodline-x { display: grid; }
  .moodline-x .ml { grid-area: 1 / 1; transition: opacity .45s var(--ease); }
  .moodline-x .ml.a { opacity: 1; }
  .moodline-x .ml.b { opacity: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .band.after-dusk .ml.a { opacity: 0; }
    .band.after-dusk .ml.b { opacity: 1; }
  }
  .band-hint { margin-top: 20px; font-size: 13px; color: var(--text-soft); }
  @media (prefers-reduced-motion: reduce) {
    .band { height: auto; }
    .band .stick { position: static; height: auto; padding: clamp(64px, 9vh, 100px) 0; }
    .band-lotus { animation: none; }
    .band-lotus::before { opacity: .55; }
    .band-lotus::after { display: none; }
    .band-dusk { display: none; }
    .band-hint { display: none; }
    .moodline-x .ml.b { display: none; }
    /* motion off: the story stays readable as one static line */
    .band-line .b0 { opacity: 1; filter: none; transform: none; }
    .band-line .b1, .band-line .b2 { opacity: 0; filter: none; transform: none; }
  }

/* ── ch. IV · the index — a book's table of contents with dotted leaders ── */
  .book-index { padding: clamp(72px, 11vh, 130px) 0; }
  /* the contents page of a book sits centred between its margins — a narrow
     column pinned to the left of a wide viewport read as a layout accident */
  .idx-list { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; }
  .idx { display: flex; align-items: baseline; gap: 0;
    padding: clamp(14px, 2vh, 20px) 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; }
  .idx:first-child { border-top: 1px solid var(--line-strong); }
  .idx-title { font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2;
    color: var(--text); white-space: nowrap; flex-shrink: 0; }
  .idx-dots { flex: 1; min-width: 24px; margin: 0 12px;
    border-bottom: 2px dotted color-mix(in srgb, var(--text-mute) 45%, transparent);
    align-self: baseline; position: relative; top: -4px; }
  .idx-ref { font-family: var(--font-sans); font-weight: 500; font-size: var(--label-size);
    letter-spacing: 0.5px; color: var(--text-mute); white-space: nowrap; flex-shrink: 0; }
  .idx-ref .text-link { color: var(--accent-deep); text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent-deep) 40%, transparent);
    text-underline-offset: 3px; }
  .idx-ref .text-link:hover { text-decoration-color: var(--accent-deep); }
  @media (max-width: 600px) {
    .idx-title { font-size: clamp(17px, 5vw, 22px); }
    .idx-dots { min-width: 12px; margin: 0 8px; }
    .idx-ref { font-size: 12px; }
  }

/* ── feature cards — six quiet truths, 3×2 grid ── */
.features {
  padding: clamp(48px, 8vh, 96px) 0;
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  max-width: 960px;
  margin: 0 auto;
}

.feat {
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.feat:hover {
  box-shadow: var(--shadow-card-lg);
  transform: translateY(-3px);
}

.feat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-smd);
  background: var(--accent-soft);
  color: var(--accent-deep);
  margin-bottom: var(--compact-md);
}

.feat-icon .msr {
  font-size: 22px;
}

.feat-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.15;
  margin: 0 0 var(--s2);
  color: var(--text);
}

.feat-desc {
  font-size: var(--body-soft-size);
  line-height: var(--body-soft-line);
  color: var(--text-mute);
  margin: 0;
}

@media (max-width: 760px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .feat-grid {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  .feat {
    padding: var(--s5);
  }
}
/* ── ch. V · the promise — a lamplit signed page: the one sheet that stays
      light while night falls around it; ruled ledger lines, no card salad ── */
  .oath-sec { padding: clamp(72px, 11vh, 130px) 0; }
  .oath { max-width: 780px; margin: 0 auto; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 56px) clamp(24px, 4vw, 44px);
    box-shadow: 0 34px 90px color-mix(in srgb, var(--night-ground) 42%, transparent); }
  .oath-lead { font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(34px, 5vw, 58px); line-height: 1.06; letter-spacing: -0.02em;
    margin: 0 0 clamp(24px, 3.5vh, 40px); max-width: 17ch; text-wrap: balance; }
  .vows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
  .vows li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: baseline;
    padding: clamp(18px, 2.6vh, 24px) 2px; border-bottom: 1px solid var(--line);
    font-size: 17px; line-height: 1.6; color: var(--text-mute); }
  .vows li:first-child { border-top: 1px solid var(--line-strong); }
  .vows .vn { font-family: var(--font-display); font-style: italic; font-size: 27px; color: var(--accent-deep); }
  .vows b { color: var(--text); font-weight: 600; }
  .oath-sign { display: flex; align-items: center; gap: 13px; margin-top: 4px; padding-top: 24px; }
  .oath-sign img { width: 38px; height: 38px; }
  .oath-sign .wd { font-family: var(--font-display); font-style: italic; font-size: 30px; }
  .oath-sign .dt { font-family: var(--font-display); font-style: italic; font-size: 16px;
    color: var(--text-mute); margin-left: auto; text-align: right; }
  .oath-cta { margin: 26px 0 0; }
  .oath-cta .text-link { font-size: 14px; color: var(--text-mute); text-decoration: underline;
    text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
  .oath-cta .text-link:hover { color: var(--text); text-decoration-color: currentColor; }

  /* ── manifesto — words surface with the scroll ── */
  .manifesto { height: 160vh; }
  .manifesto .stick { text-align: center; }
  .mani-bg { position: absolute; left: 50%; top: 50%; width: min(88vmin, 720px); opacity: .07; pointer-events: none;
    transform: translate(-50%, -50%) rotate(calc(var(--p, 0) * 36deg)) scale(calc(.92 + var(--p, 0) * .14)); }
  .mani-bg svg { width: 100%; height: auto; display: block; }
  .mani-center { position: relative; z-index: 1; width: min(100%, 980px); padding: 0 24px; }
  .mani-text { font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(24px, min(4vw, 7svh), 52px); line-height: 1.08; letter-spacing: -0.2px;
    color: var(--text); margin: 16px auto 0; max-width: min(88vw, 24ch); max-height: 80svh;
    text-wrap: balance; overflow: visible; }
  .mani-text .w { opacity: calc(.45 + .55 * clamp(0, (var(--p) - var(--wt, 0)) * 5, 1)); }
  @media (prefers-reduced-motion: reduce) { .mani-text .w { opacity: 1; } }
  @media (max-width: 600px) {
    .mani-center { padding: 0 18px; }
    .mani-text { font-size: clamp(22px, min(6.2vw, 6.4svh), 30px); line-height: 1.1; max-width: min(90vw, 22ch); }
  }

/* ── closing CTA ── */
  .closing { text-align: center; padding: clamp(56px, 9vh, 110px) 0 clamp(110px, 16vh, 170px); }
  .closing-lotus { width: 106px; margin: 0 auto 20px;
    animation: eu-breathe var(--dur-breath, 4200ms) var(--ease-soft) infinite; transform-origin: center; }
  .closing-lotus svg { width: 100%; height: auto; display: block; }
  @media (prefers-reduced-motion: reduce) { .closing-lotus { animation: none; } }
  .closing h2 { font-family: var(--font-display); font-style: italic; font-size: clamp(36px, 5.4vw, 64px);
    font-weight: 500; line-height: 1.04; margin: 16px auto 0; max-width: 16ch; letter-spacing: -0.3px;
    text-wrap: balance; }
  .closing .lead { color: var(--text-mute); font-size: 16px; max-width: 58ch; margin: 16px auto 0; }
  .closing .beta { margin: 30px auto 0; align-items: center; }
  .closing .beta-form { justify-content: center; }
  .closing .beta-note, .closing .beta-done { justify-content: center; text-align: center; }
  @media (min-width: 761px) and (min-height: 720px) {
    .closing {
      min-height: calc(76svh + clamp(72px, 11svh, 128px));
      display: flex; align-items: flex-start;
      padding: 0 0 clamp(72px, 11svh, 128px);
    }
    .closing > .wrap {
      width: 100%; min-height: 76svh; display: flex; flex-direction: column;
      align-items: center; justify-content: center; padding-top: clamp(44px, 7svh, 84px);
      padding-bottom: clamp(44px, 7svh, 84px);
    }
  }

/* ── footer ── */
  footer { margin-top: clamp(44px, 8vh, 92px); border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    padding: 34px 0 calc(58px + env(safe-area-inset-bottom)); color: var(--text-mute); }
  .foot-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .foot-inner img { opacity: .74; }
  .foot-inner .word { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--text-mute); }
  .foot-links { margin-left: auto; display: flex; gap: 20px; }
  .foot-links a { font-size: 12px; color: var(--text-mute); }
  .foot-links a:hover { color: var(--text); }
  .foot-note { margin-top: 18px; font-size: 11.5px; color: var(--text-mute); }
  .foot-note + .foot-note { margin-top: 6px; }

  .beta-input {
    border-color: color-mix(in srgb, var(--text) 34%, transparent);
    background: color-mix(in srgb, var(--paper) 96%, var(--bg) 4%);
  }
  .closing .beta {
    padding: 12px; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    border-radius: var(--r-xlg); background: color-mix(in srgb, var(--paper) 46%, transparent);
    box-shadow: 0 10px 30px color-mix(in srgb, #2e2418 10%, transparent);
  }
  .closing .beta-note,
  .band-hint,
  .oath-sign .dt,
  .foot-note {
    color: var(--text-mute);
  }
  .hero::before { opacity: .72; }
  .sky .orb { opacity: .78; }

/* ── cookie / analytics consent bar (GA loads only on Accept) ── */
  .cookie-bar { position: fixed; left: 14px; right: auto; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80;
    width: min(440px, calc(100% - 28px)); max-width: 440px; margin: 0; display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--card-border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-card); padding: 12px 14px; }
  .cookie-bar[hidden] { display: none; }
  .cookie-text { margin: 0; flex: 1 1 230px; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-mute); }
  .cookie-text a { color: var(--accent-deep); border-bottom: 1px solid var(--line-strong); }
  .cookie-actions { display: flex; gap: 8px; margin-left: auto; }
  .cookie-actions .btn { height: 36px; padding: 0 15px; font-size: 13px; }
  @media (max-width: 560px) {
    .cookie-bar { left: 10px; right: 10px; width: auto; max-width: none;
      bottom: calc(10px + env(safe-area-inset-bottom)); gap: 8px 10px; padding: 10px 12px; }
    .cookie-text { flex: 1 1 100%; font-size: 12px; line-height: 1.35; }
    .cookie-actions { margin-left: 0; width: 100%; }
    .cookie-actions .btn { flex: 1; height: 36px; padding: 0 12px; }
  }
  @media (max-width: 480px), (max-height: 500px) {
    .cookie-bar { left: 8px; right: calc(8px + (100vw - 100%)); bottom: calc(8px + env(safe-area-inset-bottom));
      max-width: none; min-height: 42px; flex-wrap: nowrap; gap: 8px; padding: 7px 8px; border-radius: 14px; }
    /* the Privacy link must survive even in the mini bar — consent stays informed */
    .cookie-text { flex: 1 1 auto; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cookie-text a { display: inline; }
    .cookie-actions { flex: 0 0 auto; width: auto; gap: 6px; }
    .cookie-actions .btn { flex: 0 0 auto; min-height: 42px; padding: 0 10px; font-size: 12px; }
  }
  @media (max-height: 720px) and (min-width: 561px) {
    .cookie-bar { left: 10px; right: auto; bottom: calc(8px + env(safe-area-inset-bottom));
      width: min(440px, calc(100% - 20px)); max-width: 440px; min-height: 42px;
      flex-wrap: nowrap; gap: 8px; padding: 7px 10px; }
    .cookie-text { min-width: 0; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cookie-actions { flex: 0 0 auto; width: auto; gap: 6px; }
    .cookie-actions .btn { flex: 0 0 auto; height: 30px; padding: 0 10px; font-size: 12px; }
  }

/* ── responsive ── */
  @media (max-width: 960px) {
    .nav-menu { gap: 16px; }
    .jgrid { grid-template-columns: 1fr; gap: 0; align-content: center; justify-items: center; }
    .jsteps { display: grid; width: 100%; max-width: 480px; margin-top: 16px; }
    .jstep { grid-area: 1 / 1; opacity: 0; min-height: 108px; padding: 12px 0; text-align: center;
      border-left: none; transform: translateY(8px); pointer-events: none; }
    .jstep::before { display: none; }
    .jstep.on { opacity: 1; transform: none; }
    .jstep h3 { font-size: 22px; margin-top: 4px; }
    .jstep p { font-size: 13px; }
    .jphone .pm { --s: .5; }
    /* the stacked stage is bottom-heavy on short viewports: guarantee air
       under the mockup so it never sits flush against the stage edge */
    .jphone { padding-bottom: clamp(16px, 4svh, 48px); }
    .herb { grid-template-columns: repeat(2, 1fr); }
    .band-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .band p { margin-left: auto; margin-right: auto; }
    .band-line { margin-left: auto; margin-right: auto; }
    .band-lotus { width: min(300px, 66vw, 36svh); }
    /* the stacked stage is one screen tall from 960px down — the shorter scene
       runs must travel with the layout collapse, not with the 760px sheet */
    .noise { height: 115vh; }
    .journey { height: 195vh; }
    .band { height: 130vh; }
    .manifesto { height: 90vh; }
  }
  @media (max-width: 760px) {
    /* Opening the sheet disables document scrolling, which also disables the
       sticky state in some mobile browsers. Pin the nav for that state. */
    html.nav-open nav { position: fixed; left: 0; right: 0; top: 0; }
    .nav-toggle { display: inline-flex; width: 44px; height: 44px; }
    .header-cta {
      margin-left: auto;
      margin-right: 8px;
      height: 36px;
      padding: 0 14px;
      font-size: 13px;
      align-items: center;
      justify-content: center;
    }
    .nav-menu {
      position: fixed; top: 68px; left: 0; right: 0; bottom: 0; z-index: 95;
      height: calc(100dvh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto;
      flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      box-shadow: var(--shadow-menu);
      padding: clamp(24px, 6svh, 46px) 20px calc(32px + env(safe-area-inset-bottom));
      transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease); }
    .nav-menu.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto;
      backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav-menu-note { display: block; max-width: 30ch; margin: 0 0 20px; color: var(--text-mute);
      font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.15; }
    .nav-menu .nav-link { padding: 18px 2px; font-size: 16px; border-bottom: 1px solid var(--line); }
    .nav-menu-legal { display: flex; gap: 22px; margin-top: auto; padding-top: 32px;
      color: var(--text-mute); font-size: 13px; }
    .oath-sec { padding: 72px 0 56px; }
    /* narrow screens: 7% of 390px is a 27px fade — too abrupt for 90px glyphs */
    .mood-flow {
      mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    }
  }
  @media (max-width: 600px) {
    .wrap { padding: 0 var(--layout-gutter-mobile); }
    .nav-inner { gap: 10px; }
    h1.display { font-size: clamp(40px, 12vw, 54px); }
    .subhead { font-size: 16px; }
    .hero-eyebrow { font-size: 10px; letter-spacing: 2.4px; }
    .noise-l1, .noise-l2 { font-size: clamp(26px, 8vw, 32px); }
    .chip { font-size: 12px; padding: 7px 12px; }
    .herb {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 24px 16px !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    .mood-tk {
      width: 100% !important;
      transform: translateY(calc(var(--dp, 0) * var(--f, 0) * -12px)) !important;
    }
    .beta, .beta-done, .beta-closed { max-width: none; }
    .beta-form { flex-direction: column; gap: 12px; width: 100%; }
    .closing .beta { align-items: stretch; }
    .beta-input { flex: 1 1 auto; width: 100%; }
    .beta-form .btn-primary { width: 100%; height: 54px; }
    .flow-ch { margin-bottom: 32px; }
    .ch-title { font-size: clamp(26px, 8vw, 34px); }
    /* narrow plates stack: number+time on the rule line, the title full-width under.
       The dek must span too — left in the desktop 2/-1 slot it inflates the auto
       column and collapses the number track to 0 (Ch. II overlap bug) */
    .chap { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; }
    .chap .ch-no { grid-column: 1; grid-row: 1; }
    .chap .ch-time { grid-column: 2; grid-row: 1; }
    .chap .ch-title { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
    .chap .ch-dek { grid-column: 1 / -1; }
    .oath .chap .ch-title { max-width: 15ch; margin-top: 8px;
      font-size: clamp(32px, 10vw, 42px); line-height: .98; }
    .oath-lead { font-size: clamp(28px, 8.6vw, 34px); }
    /* .wrap.oath: the sheet is also a .wrap, and the ≤480 .wrap gutter rule
       sits later in the cascade — the sheet padding must outrank it */
    .wrap.oath { padding: 26px 18px 32px; border-radius: var(--r-md); }
    .vows li {
      grid-template-columns: 32px 1fr;
      gap: 12px;
      padding: 15px 2px;
      font-size: 14.5px;
      line-height: 1.5;
    }
    .band h2, .closing h2 { font-size: clamp(28px, 8.4vw, 34px); }
    .closing { padding-bottom: calc(126px + env(safe-area-inset-bottom)); }
    footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  }
  @media (max-width: 600px) and (min-height: 700px) {
    /* Match the reference title page's measured pause around the breathing
       gesture while preserving the eyebrow-to-headline relationship. */
    .hero-copy { top: 15px; }
    .hero-breath {
      gap: 21px;
      margin-top: 9px;
      margin-bottom: 14px;
    }
  }
  @media (max-width: 480px) {
    .wrap { padding: 0 16px; }
    .jphone .pm { --s: .44; }
    .mood-tk .l { font-size: 26px; }
    .foot-links { width: 100%; margin-left: 0; gap: 16px 22px; flex-wrap: wrap; }
    .noise .stick { overflow: hidden; }
    .chip-cluster {
      flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-content: center; align-items: start; gap: 8px 10px;
      width: min(calc(100% - 32px), 340px); margin: clamp(14px, 3.5svh, 24px) auto 0;
      pointer-events: none;
    }
    .chip-cluster > .chip {
      position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      --dx: 0px !important; --dy: 0px !important; --rz: 0deg !important;
      display: inline-flex; justify-content: center; width: 100%; min-height: 31px;
      max-width: none; font-size: 11px; line-height: 1.15; padding: 7px 10px;
      white-space: normal; overflow: visible; text-overflow: clip; opacity: .82; filter: none;
      transform: rotate(var(--mobile-r, 0deg));
    }
    .chip-cluster > .chip:nth-child(1) { --mobile-r: -2.2deg; }
    .chip-cluster > .chip:nth-child(2) { --mobile-r: 1.4deg; }
    .chip-cluster > .chip:nth-child(3) { --mobile-r: 1.8deg; }
    .chip-cluster > .chip:nth-child(4) { --mobile-r: -1.2deg; }
    .chip-cluster > .chip:nth-child(n+5) { display: none; }
    .chip-cluster > .chip.gone { opacity: 0; }
    /* if the window was desktop-wide at load, chars were split for the shatter —
       pin them back so a resized/rotated viewport never shows empty shells
       (the .chip.gone variant must be named too, or it outranks the rescue) */
    .chip .ch, .chip.gone .ch { transform: none; opacity: 1; transition: none; }
  }
  @media (max-width: 360px) {
    .chip-cluster { grid-template-columns: minmax(0, 1fr); width: min(calc(100% - 36px), 248px); gap: 8px; }
    .chip-cluster > .chip:nth-child(4) { display: none; }
    .scroll-cue { display: none; }
    .hero-copy { padding-bottom: 24px; }
    .hero-actions { gap: 14px; }
    .hero-proof { gap: 5px 14px; font-size: 10px; }
    .hero-proof span + span::before { left: -8px; }
  }
  @media (max-width: 430px) {
    .scroll-cue { display: none; }
  }
  /* Claude Design's title page keeps its complete conversion path visible on
     short laptop and embedded-preview viewports. Compact only the hero here;
     the narrative scenes retain their measured scroll geometry. */
  @media (min-width: 761px) and (max-height: 760px) {
    .hero-copy {
      gap: clamp(8px, 1.35svh, 14px);
      padding: 6px 0 46px;
    }
    .hero-lotus { width: clamp(78px, 12.5svh, 108px); }
    h1.display {
      font-size: clamp(52px, min(6.8vw, 9.5svh), 72px);
      line-height: .95;
    }
    .subhead {
      max-width: 44ch;
      font-size: 14px;
      line-height: 1.4;
    }
    .breath-cue { font-size: 15px; }
    .scroll-cue { bottom: 10px; }
    .scroll-cue .t { font-size: 14px; }
  }
  /* short-viewport phone bump only where the width shrink isn't already in
     charge — otherwise small phones would get a BIGGER mockup than 480px ones */
  @media (min-width: 481px) and (max-height: 700px) {
    .jphone .pm { --s: .52; }
    .jstep { padding: 12px 18px; }
    .jstep p { font-size: 13px; }
  }
  /* short REAL phones (browser toolbar eats the viewport): a slightly smaller
     mockup keeps plate, step and phone breathing inside one screen */
  @media (max-width: 480px) and (max-height: 760px) {
    .jphone .pm { --s: .4; }
    .jsteps { margin-top: 8px; }
    .jstep { min-height: 96px; }
  }
  @media (max-height: 650px) {
    .nav-inner { height: 60px; }
    .nav-menu { top: 60px; }
    .hero { min-height: calc(100svh - 60px); }
    .hero-copy { gap: clamp(7px, 1.35svh, 12px); padding: 2px 0 34px; }
    .hero-lotus { width: clamp(74px, 13svh, 112px); }
    h1.display { font-size: clamp(32px, min(6.2vw, 9svh), 72px); line-height: .94; }
    .subhead { font-size: 13px; line-height: 1.32; max-width: 40ch; }
    .band-hint { display: none; }
    /* keep the breath button in the tree for keyboard/AT — hide it visually only */
    .breath-cue { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .scroll-cue { bottom: 8px; gap: 2px; }
    .scroll-cue .t { font-size: 9px; letter-spacing: 1.5px; }
    .scroll-cue .msr { font-size: 16px; }
    .stick .ch-wrap { padding-top: clamp(52px, 8svh, 66px); }
    .stick .chap { padding-top: 10px; }
    .stick .chap .ch-title { font-size: clamp(20px, min(2.4vw, 5svh), 28px); }
    .scene-body { align-items: center; }
    .mood-flow { padding: 30px 0; }
    .moods, .oath-sec { padding: 48px 0; }
    .flow-ch { margin-bottom: 28px; }
    .band-lotus { width: min(230px, 30svh); }
    .closing { padding-top: 48px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
    .closing-lotus { display: none; }
    .closing h2 { margin-top: 6px; }
    .closing .lead { margin-top: 8px; font-size: 14px; line-height: 1.4; }
    .closing .beta { margin-top: 18px; }
    .closing .beta-input, .closing .beta-form .btn-primary { height: 46px; }
    footer { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  }
  @media (min-width: 761px) and (max-height: 650px) {
    /* The breathing prompt is part of the title-page conversion path in the
       Claude reference. Keep it visible on short laptop viewports. */
    .hero-copy { top: 4px; }
    .hero-breath { gap: 24px; }
    .subhead { margin-top: 13px; }
    .breath-cue {
      position: static;
      width: auto;
      height: auto;
      padding: 6px 2px 3px;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
      border: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--text-mute) 45%, transparent);
    }
  }
  @media (max-width: 760px) and (max-height: 650px) {
    .nav-menu { height: calc(100dvh - 60px); max-height: calc(100dvh - 60px); }
  }
  @media (max-height: 650px) and (orientation: landscape) {
    /* A short laptop still needs a full narrative run: the compact row is the
       opening pose, then every metric leaves before Nostia's answer arrives. */
    .noise { height: 230vh; }
    .chip-cluster {
      flex: none; display: flex; justify-content: center; align-items: center; gap: 8px;
      width: min(calc(100% - 48px), 690px); margin: 8px auto 0; pointer-events: none;
    }
    .chip-cluster > .chip {
      position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      display: inline-flex; min-height: 30px; max-width: 170px; padding: 6px 10px;
      font-size: 11px; line-height: 1.15; white-space: nowrap; overflow: visible;
      opacity: .78; filter: none;
    }
    .chip-cluster > .chip:nth-child(1) { --mobile-r: -1.2deg; }
    .chip-cluster > .chip:nth-child(2) { --mobile-r: .8deg; }
    .chip-cluster > .chip:nth-child(3) { --mobile-r: 1.1deg; }
    .chip-cluster > .chip:nth-child(4) { --mobile-r: -1deg; }
    .chip-cluster > .chip:nth-child(n+5) { display: none; }
    .chip-cluster > .chip.gone { opacity: 0; }
  }
  @media (max-width: 900px) and (max-height: 650px) and (orientation: landscape) {
    .noise { height: 160vh; }
    .chip-cluster > .chip {
      --dx: 0px !important; --dy: 0px !important; --rz: 0deg !important;
      transform: rotate(var(--mobile-r, 0deg));
    }
    /* Touch landscape keeps the lightweight whole-pill fade. */
    .chip .ch, .chip.gone .ch { transform: none; opacity: 1; transition: none; }
  }
  @media (max-height: 500px) {
    .cookie-bar { left: 10px; right: calc(10px + (100vw - 100%)); bottom: calc(8px + env(safe-area-inset-bottom));
      width: auto; max-width: none; min-height: 40px; padding: 6px 10px; border-radius: 14px;
      flex-wrap: nowrap; gap: 8px; }
    /* consent must stay informed even in the mini bar: one ellipsized line + the Privacy link */
    .cookie-text { display: block; flex: 1 1 auto; font-size: 11px; line-height: 1.2;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cookie-text a { display: inline; }
    .cookie-actions { width: auto; margin-left: 0; gap: 6px; flex: 0 0 auto; }
    .cookie-actions .btn { height: 28px; padding: 0 9px; font-size: 12px; }
    .closing { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    footer { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  }