/* base.css — CSS shared byte-for-byte (rendering-identical) across all four
   marketing pages: index.html, couples.html, story.html, life-management.html.
   Extracted to remove duplication. Loaded AFTER fonts.css and BEFORE
   each page's inline <style>, so page-specific inline rules still override. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
em, i { font-style: normal; }

/* ── The design system ───────────────────────────────────────────────
   Every design token is declared exactly once, here. See CLAUDE.md
   § One token namespace.

   THE MARKETING GROUND IS CLAY (adopted 2026-09-08, from the Claude
   Design "Unicorn Hero" handoff): a chalky sunset field — matte clay
   objects with thick rounded edges on warm cream, glassmorphism panels
   floating over them, a water line at the foot of the page. Display is
   Libre Caslon Text at 400 (headline weight comes from size, never
   boldness); UI and prose are Inter.

   Elevation on clay is THICKNESS: a hard 0 Npx 0 under-shadow in the
   object's own darker clay (the slab's visible edge), plus one soft
   blue-tinted ambient shadow (rgba(46,90,142,…)) — the one place a blur
   is correct in this system, because on a light ground it reads. The
   night system's rule against blurs was a night rule; it does not
   transfer.

   THE NIGHT RAMP BELOW IS NOT DEAD. The member app and the Expo app
   still render the night system, re-declare its shared tokens by hand,
   and are drift-checked against this file on every PR (CLAUDE.md § One
   token namespace). Every night token therefore keeps its exact value
   until those surfaces migrate to clay — change one here and CI fails.
   Marketing components no longer read the night roles; they read the
   clay roles further down.

   TWO DELIBERATE DEVIATIONS from the original handoff remain in force:

   1. Fonts stay self-hosted. font-src 'self' blocks any runtime CDN
      fetch, silently, in production only. The clay faces (Libre Caslon
      Text + Inter) are built by tools/build-fonts.py into fonts/.

   2. Radius names. --radius-sm/md/lg/xl collide with Tailwind's own
      names in the member app's @theme block, which is why the semantic
      names exist. Both are declared; reach for the semantic ones. */
:root {
  color-scheme: light;

  /* ── Type ──────────────────────────────────────────────────────
     Family names only — every use site appends its own fallback.

     TWO VOICES again as of 2026-09-08: the roles split when clay landed.
     Libre Caslon Text carries display and ships at 400 only — the clay
     language never bolds a headline, it sizes it (The Regular Display
     Rule, DESIGN.md). Inter carries UI and prose at 400/500/600/700. */
  --display-font: 'Libre Caslon Text';
  --body-font: 'Inter';
  /* Full stacks. --font-ui's fallback turned sans on 2026-09-08 when Inter
     took the body roles back — a serif fallback under a sans face is a
     flash of the wrong voice on slow loads. */
  --font-display: var(--display-font), 'Charter', Georgia, serif;
  --font-ui: var(--body-font), system-ui, -apple-system, sans-serif;
  --font-numeric: var(--font-ui);

  --size-display-1: 52px;
  --size-display-2: 38px;
  --size-display-3: 28px;
  --size-title: 22px;
  --size-subtitle: 19px;
  --size-body-lg: 18px;
  --size-body: 16px;
  --size-body-sm: 15px;
  --size-caption: 13px;
  --size-micro: 12px;

  --lh-display: 1.1;
  --lh-title: 1.2;
  --lh-body: 1.5;
  --lh-tight: 1.35;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --track-display: -0.015em;
  --track-title: -0.01em;
  --track-body: 0em;
  --track-micro: 0.02em;

  /* ── Raw palette: warm paper ───────────────────────────────────
     A ground again, as of 2026-09-08 — the clay field is cut from this
     ramp (cream-200 is the page, cream-300 the deeper band). */
  --cream-50: #FDFBF7;
  --cream-100: #FBF6EE;
  --cream-200: #F7F3EA;
  --cream-300: #EFE9DE;
  --cream-400: #E2DACB;
  --cream-500: #D3C9B6;

  /* ── Raw palette: plum ink (the night system's ink; the clay system
     inks are warm — see the clay block) */
  --ink-900: #201528;
  --ink-800: #2E2038;
  --ink-700: #3B2E46;
  --ink-600: #4A3D52;
  --ink-500: #574A62;
  --ink-400: #6E5F76;
  --ink-300: #8E8297;
  --ink-200: #B7AEBD;
  --ink-100: #E4E0E8;

  /* ── Raw palette: cool slate (structural chrome only) ──────────── */
  --slate-100: #EDF1F4;
  --slate-200: #DDE4EA;
  --slate-500: #808C8D;
  --slate-700: #5F6B6C;

  /* ── Night ramp: the ground of the member app and the Expo app.
     Drift-checked against app/ and mobile/ on every PR — values are
     frozen here until those surfaces migrate to clay. ──────────────── */
  --night-950: #0C0817;
  --night-900: #100B1E;
  --night-850: #181129;
  --night-800: #1B1430;
  --night-700: #241A3C;
  --night-600: #2A1D3E;
  --night-500: #43294B;
  --night-400: #5E3852;
  --night-hairline: rgba(255,255,255,.12);

  --text-on-night: #EDE7F7;
  --text-on-night-body: #DED7EE;
  --text-on-night-muted: #C6BCDD;
  --text-on-night-faint: #8B7FAA;

  /* ── Brand gradient: retired from marketing type on 2026-09-08 — the
     clay language has no gradient text (emphasis is the deep action red,
     see the headline-emphasis block). Declared because the ramp is still
     the mark and the app still draws it. ─── */
  --grad-stop-1: #F66E62;
  --grad-stop-2: #F0809B;
  --grad-stop-3: #C98FB8;
  --grad-stop-4: #8177B3;
  --grad-stop-5: #6582BA;
  --grad-unicorn: linear-gradient(90deg, #F66E62 0%, #F0809B 22%, #C98FB8 48%, #8177B3 74%, #6582BA 100%);
  --grad-night: linear-gradient(105deg, #241E35 0%, #2F1E31 55%, #221A2E 100%);
  --grad-night-sky: linear-gradient(176deg, #120C22 0%, #1B1430 32%, #2A1D3E 58%, #43294B 80%, #5E3852 100%);
  --glow-dawn: radial-gradient(62% 112% at 50% 118%, rgba(246,150,110,.5), rgba(199,124,170,.28) 40%, rgba(129,119,179,.16) 62%, rgba(27,20,48,0) 80%);
  --coral-ink: #F98D83;
  /* Coral as text ON A LIGHT OBJECT — 5.45:1 on --surface-invert. The clay
     ground is light, so this is the coral that survives the redesign in
     marketing prose accents where warmth is wanted without the action red. */
  --coral-on-light: #B83C30;

  /* ── Logo ramp ─────────────────────────────────────────────────── */
  --logo-coral: #F66E62;
  --logo-pink: #F0809B;
  --logo-blush: #F9C8CB;
  --logo-lilac: #D7AED0;
  --logo-violet: #AF78B2;
  --logo-indigo: #6966AD;
  --logo-blue: #6582BA;
  --logo-sky: #ADC0E0;
  --logo-deep: #59598F;
  --logo-outline: #393A4C;

  /* ── Track accents: one hue per life track (app surfaces) ──────── */
  --track-blue: #7FA8CF;
  --track-teal: #6FC7B8;
  --track-green: #6FD69B;
  --track-slate: #A8B4B5;
  --track-plum: #C79ED8;
  --track-clay: #E0977A;
  --track-blue-tint: rgba(127,168,207,.13);
  --track-teal-tint: rgba(111,199,184,.13);
  --track-green-tint: rgba(111,214,155,.13);
  --track-slate-tint: rgba(168,180,181,.13);
  --track-plum-tint: rgba(199,158,216,.13);
  --track-clay-tint: rgba(224,151,122,.13);

  /* ── Semantic status (night values; drift-checked inks) ────────── */
  --amber-ink: #E8C489;
  --amber-bg: rgba(232,196,137,.14);
  --amber-line: rgba(232,196,137,.28);
  --green-ink: #8FD3AC;
  --green-bg: rgba(143,211,172,.13);
  --green-line: rgba(143,211,172,.26);
  --blue-ink: #ADC0E0;
  --blue-bg: rgba(173,192,224,.14);
  --blue-line: rgba(173,192,224,.28);
  --rose-ink: #F2A9A2;
  --rose-soft: rgba(246,110,98,.30);
  --rose-bg: rgba(246,110,98,.16);

  /* ── Night semantic roles: THE APP'S VOCABULARY. Frozen by the drift
     guards; marketing components read the clay roles below instead. ── */
  --surface-page: var(--night-900);
  --surface-raised: var(--night-850);
  --surface-card: var(--night-800);
  --surface-sunken: var(--night-950);
  --surface-inset: var(--night-700);
  --surface-invert: var(--cream-50);
  --surface-glass: rgba(16,11,30,.55);
  --blur-glass: blur(16px) saturate(1.1);
  --surface-glass-opaque: rgba(16,11,30,.82);

  --text-heading: #FFFFFF;
  --text-body: var(--text-on-night-body);
  --text-muted: var(--text-on-night-muted);
  --text-faint: var(--text-on-night-faint);
  --text-invert: #180F22;
  --text-link: #C9B8E8;
  --text-link-hover: #FFFFFF;

  --border-hairline: rgba(255,255,255,.12);
  --border-field: rgba(255,255,255,.20);
  --border-strong: rgba(255,255,255,.18);
  --border-glass: rgba(255,255,255,.22);
  --border-glass-strong: rgba(255,255,255,.40);
  --focus-ring: var(--logo-sky);

  --status-idle-bg: rgba(255,255,255,.07);
  --status-idle-ink: var(--text-on-night-body);
  --status-underway-bg: var(--amber-bg);
  --status-underway-ink: var(--amber-ink);
  --status-done-bg: var(--green-bg);
  --status-done-ink: var(--green-ink);
  --danger-rest: var(--rose-soft);
  --danger-hover: var(--rose-ink);

  /* Chat bubbles. App-only roles, declared here because this is the single
     token namespace — see the drift guards. */
  --surface-message-own: #733844;
  --surface-message-peer: var(--night-700);

  /* ── Solid action pair. The fill survives the redesign untouched —
     #BE1A38 was chosen against the night ground and is also the clay
     handoff's CTA, asked for by name in both design rounds. The hover
     and edge below are the night values the app still reads; marketing
     buttons press DOWN into clay instead, with --clay-cta-hover /
     --clay-cta-under (a light ground darkens on hover; a dark one
     lightens). ── */
  --action-solid-bg: #BE1A38;
  --action-solid-bg-hover: #D02144;
  --action-solid-ink: #FFFFFF;
  --action-solid-edge: #6E0F20;

  /* ── Segmented control (app roles, drift-checked) ──────────────── */
  --control-track: var(--night-950);
  --control-thumb: var(--night-500);
  --control-thumb-shadow: none;

  /* ── Radius ────────────────────────────────────────────────────── */
  --radius-xs: 5px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-pill: 999px;
  /* Semantic names — prefer these; see the deviation note above. */
  --radius-card: var(--radius-xl);
  --radius-field: var(--radius-md);
  --radius-control: var(--radius-md);
  --radius-chip: var(--radius-pill);
  --radius-micro: var(--radius-xs);
  --radius-tile: var(--radius-lg);
  --radius-hero: var(--radius-2xl);
  --radius: var(--radius-card);
  /* The clay slab's own radius. 22 outside, 14 (--radius-card) for the
     glass panel inside it — the 8px difference is the visible clay lip. */
  --radius-slab: 22px;
  --accent-bar-h: 5px;

  /* ── Spacing ───────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --gutter-column: 22px;
  --gutter-card: 16px;
  --pad-card: 20px;
  --pad-card-tight: 16px;
  --page-max: 1720px;
  --page-pad-x: 48px;
  --header-h: 64px;
  --column-w: 300px;

  /* ── Elevation (night vocabulary — app-shared, values frozen) ──── */
  --shadow-inset-field: inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-none: none;
  --shadow-offset-violet: 8px 8px 0 var(--logo-violet);
  --shadow-offset-indigo: 8px 8px 0 var(--logo-indigo);
  --shadow-offset-coral: 8px 8px 0 var(--logo-coral);
  --shadow-offset-deep: 8px 8px 0 var(--logo-deep);
  --shadow-offset-sm-deep: 3px 3px 0 var(--logo-deep);
  --shadow-offset-sm-violet: 3px 3px 0 var(--logo-violet);
  --shadow-offset-sm-indigo: 3px 3px 0 var(--logo-indigo);
  --night-shadow-card: var(--shadow-offset-violet);
  --night-shadow-card-alt: var(--shadow-offset-indigo);
  --night-shadow-card-hover: 10px 10px 0 var(--logo-violet);
  --night-shadow-control: var(--shadow-offset-sm-deep);
  --night-shadow-button: 4px 4px 0 var(--logo-indigo);
  --night-shadow-pressed: 2px 2px 0 var(--logo-deep);
  --night-shadow-lift: 14px 14px 0 var(--logo-violet);
  --night-shadow-popover: 10px 10px 0 var(--logo-deep);
  --action-solid-shadow: var(--night-shadow-button);
  --action-quiet-shadow: var(--night-shadow-control);

  /* ── Motion (app-shared, values frozen) ────────────────────────── */
  --ease-standard: cubic-bezier(.2,.8,.3,1);
  --ease-exit: cubic-bezier(.4,0,1,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --transition-control: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  --transition-card: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);

  /* Decoration layered on top of a real outline. Focus is never shadow-only. */
  --focus-glow: 0 0 0 4px rgba(173,192,224,.25);

  /* ══ THE CLAY SYSTEM — the marketing ground ═══════════════════════
     From the Unicorn Hero handoff (Claude Design, 2026-09-08): matte
     plasticine objects, chalky sunset palette, soft even studio light.
     Reach for THESE in marketing components. */

  /* Ground and ink. The ground is the cream ramp; the inks are warm
     (brown-black, never the app's plum). */
  --clay-ground: var(--cream-200);
  --clay-ground-deep: var(--cream-300);
  --clay-ink: #1A1815;
  --clay-ink-soft: #3D3A35;
  --clay-text-heading: var(--clay-ink);
  --clay-text-body: var(--clay-ink-soft);
  --clay-text-muted: #6B635B;      /* 5.0:1 on --clay-ground; captions */
  --clay-text-faint: #8F8880;      /* placeholders + disabled only */
  --clay-hairline: rgba(26,24,21,.12);
  --clay-border-field: rgba(26,24,21,.28);

  /* The sunset sky and the water line. The sky is the hero's ground; the
     water is the page's foot — the footer band is deep water. */
  --clay-sky: linear-gradient(180deg, #AFC6E2 0%, #D6DDE6 42%, #F3D5B8 78%, #F7E4CC 100%);
  --clay-sky-top: #AFC6E2;
  --clay-sky-bottom: #F7E4CC;
  --clay-water-deep: #2E5A8E;
  --clay-water-mid: #3B6CA4;
  --clay-glow: radial-gradient(ellipse at center, rgba(255,244,222,.55), rgba(255,244,222,0) 60%);

  /* Clay neutrals: bone (structure — the wheel, neutral slabs) and slab
     (spokes, plinths). hi / mid / lo are the top-light, the body and the
     thumbed lower edge of one lump of clay. */
  --clay-bone-hi: #FBF8F1;
  --clay-bone: #F4EFE6;
  --clay-bone-lo: #DDD5C6;
  --clay-slab-hi: #F6F1E8;
  --clay-slab: #EDE5D8;
  --clay-slab-lo: #D9CFBE;

  /* Clay families. Four hues, chalked toward cream; --clay-*-pod-hi is
     the radial top-light stop where it differs from the gradient hi. */
  --clay-peach-hi: #FBDDC0;
  --clay-peach: #F4BE95;
  --clay-peach-lo: #D99A6E;
  --clay-peach-pod-hi: #FBDDC0;
  --clay-blue-hi: #CFDFF2;
  --clay-blue: #A9C4E4;
  --clay-blue-lo: #7FA0C8;
  --clay-blue-pod-hi: #D2E2F4;
  --clay-orange-hi: #F8C8A8;
  --clay-orange: #EFA27A;
  --clay-orange-lo: #C97E58;
  --clay-orange-pod-hi: #F8C8A8;
  --clay-lavender-hi: #E1DEEC;
  --clay-lavender: #C7C3D9;
  --clay-lavender-lo: #9F9AB8;
  --clay-lavender-pod-hi: #E3E0EE;

  /* Inks that sit ON clay family surfaces (badges, labels) — from the
     hero's card badges, all ≥4.5:1 on their washes. */
  --clay-label-blue: #185FA5;
  --clay-label-rust: #993C1D;
  --clay-wash-blue: #E6F1FB;
  --clay-wash-rust: #FAECE7;

  /* The action pair, pressed into clay: same #BE1A38 fill as the app
     (--action-solid-bg), but hover darkens and the edge is the clay
     under-shadow — the button is a lump with thickness. */
  --clay-cta-hover: #9A1430;
  --clay-cta-under: #8E1229;
  --clay-link: #9A1430;

  /* Glassmorphism: frosted panels floating over clay. */
  --clay-glass: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.45));
  --clay-blur-glass: blur(14px);
  --clay-border-glass: rgba(255,255,255,.75);
  --clay-glass-opaque: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));

  /* Elevation on clay: thickness plus one soft blue ambient. The rim is
     the sculpted edge every slab carries (top-light, bottom occlusion,
     left catch-light). */
  --clay-rim: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(26,24,21,.07), inset 2px 0 0 rgba(255,255,255,.18);
  --clay-shadow-soft: 0 24px 30px -18px rgba(46,90,142,.35);
  --clay-shadow-soft-deep: 0 30px 36px -18px rgba(46,90,142,.4);
  --clay-shadow-button: 0 6px 0 var(--clay-cta-under);
  --clay-shadow-button-pressed: 0 3px 0 var(--clay-cta-under);

  /* Focus on clay: the water blue, 5.9:1 on the ground. */
  --clay-focus-ring: var(--clay-water-deep);
  --clay-focus-glow: 0 0 0 4px rgba(46,90,142,.22);
}

html { scroll-behavior: smooth; }

/* Keyboard focus. The clay interaction colour is the water blue — one ring
   serves the whole site. Inputs are deliberately excluded: they carry the
   water border plus 4px glow instead, which is the system's input-focus
   treatment. :focus-visible keeps the ring off mouse clicks. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--clay-focus-ring);
  outline-offset: 2px;
}

/* Clay grain, painted INTO the ground instead of composited over it — the
   subtle thumbprint texture of the handoff, carried by the same turbulence
   noise the night ground used, a touch stronger because on cream it reads
   at lower alpha than it did on night. Pages set body background-color as
   LONGHAND for exactly this reason — the shorthand would reset this layer. */
body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/></svg>");
  background-blend-mode: multiply;
}

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(24px, 5vw);
  height: 72px;
  background: rgba(251,246,238,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--clay-hairline);
  transition: background-color var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}

/* Over the hero sky the bar lifts off. The solid cream bar is right over a
   cream section, but over the sunset sky it was a hard band across the
   gradient. While the hero is under the nav (main.js adds .is-floating from
   an observer on [data-journey]) the bar goes transparent and a soft cream
   scrim, taller than the bar so it has room to fade, keeps the mark and
   links legible against the sky's upper blue.

   Two states win over floating: the mobile menu open (.is-menu-open, also
   set by main.js), because a transparent bar above an opaque panel reads as
   a slipped panel; and no JS at all, where the class never arrives and the
   nav is the solid bar it always was. */
nav::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 160px;
  background: linear-gradient(to bottom, rgba(251,246,238,0.8), rgba(251,246,238,0));
  pointer-events: none; z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
nav.is-floating:not(.is-menu-open) {
  background-color: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
nav.is-floating:not(.is-menu-open)::before { opacity: 1; }

.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--clay-text-heading); }

/* No radius: the mark is transparent and carries its own silhouette, so a
   corner radius rounds nothing. */
.nav-logo img { width: 40px; height: 40px; display: block; flex: none; }

.nav-logo-text {
  font-family: var(--display-font), serif;
  font-style: normal;
  /* Libre Caslon Text ships at 400 only — the clay display face never
     bolds. Asking for 500 here would make the browser synthesise one. */
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.nav-links { display: flex; gap: 2.25rem; align-items: center; }

.nav-links a {
  font-size: 0.875rem; font-weight: 500;
  color: var(--clay-ink); text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard); position: relative;
}

/* Primary actions are lumps of the action red with visible thickness: the
   hard under-shadow is the clay edge, hover darkens the fill, and pressing
   collapses the thickness — the button physically squashes. */
.nav-cta {
  background: var(--action-solid-bg); color: var(--action-solid-ink) !important;
  padding: 10px 20px; border-radius: var(--radius-pill);
  font-weight: 600 !important; font-size: 0.825rem !important;
  position: relative;
  box-shadow: 0 4px 0 var(--clay-cta-under);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}

.nav-cta span { position: relative; z-index: 1; }

.nav-cta:hover {
  background: var(--clay-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--clay-cta-under);
}
.nav-cta:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--clay-cta-under);
}

/* .nav-signin (Member sign in) is a plain nav link — .nav-links a above is
   its whole rule. The class stays in the markup so the link can be found
   and so the pages need not change. */

.nav-toggle {
  display: none;
  background: transparent; border: none;
  padding: 8px 4px; cursor: pointer;
  flex-direction: column; gap: 5px; align-items: center;
  margin-left: 0.5rem;
}

.nav-toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--clay-ink);
  transition: transform var(--dur-slow) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }

.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Footer: the water line. The page ends the way the hero's horizon does —
   a band of deep water with the curved mid-water lip above it, cream text
   floating on it. The lip is a real element the pages don't need to add:
   the ::before draws it. */

footer {
  background: var(--clay-water-deep);
  padding: 3rem max(24px, 5vw) 1.5rem;
  position: relative; z-index: 1;
  margin-top: 20px;
}
footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 20px;
  background: var(--clay-water-mid);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.footer-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  column-gap: 3rem;
  row-gap: 2rem;
  padding-bottom: 2rem;
}

.footer-brand { max-width: 380px; }

.footer-logo {
  font-family: var(--display-font), serif;
  font-weight: 400;
  font-size: 1.4rem; color: var(--cream-50);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.footer-brand p {
  font-size: 0.875rem; color: rgba(251,246,238,.82);
  line-height: 1.6;
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  column-gap: clamp(0.5rem, 2.5vw, 1.25rem);
  row-gap: 2rem;
}

@media (min-width: 961px) {
  .footer-links-grid {
    grid-template-columns: repeat(3, max-content);
    justify-content: end;
    column-gap: 3rem;
  }
}

.footer-col a {
  display: block;
  color: var(--cream-50);
  text-decoration: none; margin-bottom: 0.4rem;
  font-size: clamp(0.78rem, 3.8vw, 0.925rem);
  line-height: 1.2;
  transition: color var(--dur-base) var(--ease-standard);
}

.footer-col a:hover { color: var(--clay-peach-hi); }

.footer-copy-wrap {
  max-width: 1240px; margin: 1.25rem auto 0;
  display: flex; justify-content: space-between; align-items: center;
  /* .85, not the .65 it launched at: 12.5px is normal text and needs 4.5:1
     on the water — measured at 3.79 by tools/site-audit.mjs before the raise. */
  font-size: 0.78rem; color: rgba(251,246,238,.85);
  flex-wrap: wrap; gap: 1rem;
}


/* ══════════ SHARED COMPONENTS ══════════
   Hoisted out of the per-page <style> blocks. Page blocks still load after
   base.css, so a page can override anything here; where one does, it says
   so explicitly instead of hiding behind an identical-looking duplicate. */

/* ── Clay primitives ─────────────────────────────────────────────
   The two shapes everything else is sculpted from.

   A SLAB is a lump of clay: family gradient (top-light at 165deg), thick
   rounded edge (--radius-slab), a hard under-shadow in its own darker clay
   (its thickness), the sculpted rim, one soft blue ambient. Give it a
   family class to colour it; without one it is bone.

   A GLASS panel floats over clay: frosted white gradient, hairline white
   rim, 14px blur. It usually sits INSIDE a slab with the slab's 10px lip
   showing around it. */
.clay-peach { --fam-hi: var(--clay-peach-hi); --fam: var(--clay-peach); --fam-lo: var(--clay-peach-lo); --pod-hi: var(--clay-peach-pod-hi); }
.clay-blue { --fam-hi: var(--clay-blue-hi); --fam: var(--clay-blue); --fam-lo: var(--clay-blue-lo); --pod-hi: var(--clay-blue-pod-hi); }
.clay-orange { --fam-hi: var(--clay-orange-hi); --fam: var(--clay-orange); --fam-lo: var(--clay-orange-lo); --pod-hi: var(--clay-orange-pod-hi); }
.clay-lavender { --fam-hi: var(--clay-lavender-hi); --fam: var(--clay-lavender); --fam-lo: var(--clay-lavender-lo); --pod-hi: var(--clay-lavender-pod-hi); }

/* Components read the family through var() fallbacks — un-familied clay is
   bone. A family class (on the element or an ancestor) supplies the values
   without any specificity contest. */
.clay-slab {
  background: linear-gradient(165deg, var(--fam-hi, var(--clay-bone-hi)) 0%, var(--fam, var(--clay-bone)) 45%, var(--fam-lo, var(--clay-bone-lo)) 130%);
  border-radius: var(--radius-slab);
  box-shadow:
    0 8px 0 var(--fam-lo, var(--clay-bone-lo)),
    0 10px 0 rgba(26,24,21,.08),
    var(--clay-shadow-soft),
    var(--clay-rim);
}

.clay-glass {
  background: var(--clay-glass);
  backdrop-filter: var(--clay-blur-glass);
  -webkit-backdrop-filter: var(--clay-blur-glass);
  border: 1px solid var(--clay-border-glass);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(26,24,21,.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .clay-glass { background: var(--clay-glass-opaque); }
}

/* ── Buttons ─────────────────────────────────────────────────── */
/* The solid action pair as a lump of clay: red fill, white ink, thickness
   as a hard under-shadow. Hover darkens and lifts a hair; pressing
   squashes the thickness flat — that press IS the claymation. */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--action-solid-bg); color: var(--action-solid-ink);
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-family: var(--body-font), sans-serif;
  font-weight: 600; font-size: 0.925rem;
  text-decoration: none;
  box-shadow: var(--clay-shadow-button);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
  position: relative;
}
.btn-primary span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
.btn-primary:hover {
  background: var(--clay-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--clay-cta-under), 0 18px 24px -12px rgba(190,26,56,0.35);
}
/* Pressed collapses into the page — this is the state that sells the clay. */
.btn-primary:active {
  transform: translateY(3px);
  box-shadow: var(--clay-shadow-button-pressed);
}

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--clay-text-heading); padding: 14px 20px;
  font-family: var(--body-font), sans-serif;
  font-weight: 500; font-size: 0.925rem;
  text-decoration: none;
  position: relative;
}
.btn-secondary::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 10px;
  height: 1px; background: var(--clay-text-heading); transform: scaleX(1);
  transform-origin: left; transition: transform var(--dur-slow) var(--ease-standard);
}
.btn-secondary:hover::after { transform: scaleX(0); transform-origin: right; }

/* ── Headline emphasis ───────────────────────────────────────────
   The emphasised clause of a headline takes the deep action red, on every
   page. The gradient text treatment retired with the night ground
   (2026-09-08): the clay language keeps type matte and single-hue, and on
   cream the ramp's pink stop falls back below the 3:1 large-text floor —
   the exact defect the night ground once fixed. One selector list, one
   declaration; add new emphasis selectors here rather than re-declaring.

   #9A1430 measures 8.0:1 on --clay-ground — clear at any size. */
.hero-title .italic,
.section-title em,
.article-title .accent,
.form-title em,
.cta-title em,
.footer-logo .italic,
.step-num,
.dropcap {
  color: var(--clay-link);
}
/* The footer sits on deep water, where the deep red muddies — its emphasis
   is the peach highlight instead, same clause-level treatment. */
.footer-logo .italic { color: var(--clay-peach-hi); }

/* ── Article shell ─────────────────────────────────────────────── */
article {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 140px 24px 60px;
}
@media (max-width: 768px) {
  article { padding: 110px 20px 40px; }
}

/* ── Long-form prose ─────────────────────────────────────────────
   The article body treatment, shared by story.html and every /blog post.
   Inter for the running text, Libre Caslon for the headings; measures
   carried over from the night system (the reading column is a layout
   decision, not a palette one). */
.prose p {
  font-family: var(--body-font), sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--clay-text-body);
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}
.prose p strong {
  font-weight: 600;
  color: var(--clay-text-heading);
}

.prose h2, .prose h3, .prose h4 {
  font-family: var(--display-font), serif;
  color: var(--clay-text-heading);
  text-wrap: balance;
  scroll-margin-top: 88px;
}
/* The display face has one weight; the ladder is size alone. */
.prose h2 {
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 3rem 0 1.25rem;
}
.prose h3 {
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 1rem;
}
.prose h4 {
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 1.75rem 0 0.75rem;
}

/* Emphasis is carried by weight, because em/i are forced upright at the
   top of this file and no italic face is installed. Inter 600 is a real
   face; see fonts.css. */
.prose em, .prose i {
  font-weight: 600;
  color: var(--clay-text-heading);
}

.prose ul, .prose ol {
  margin: 0 0 1.6rem;
  padding-left: 1.5rem;
  color: var(--clay-text-body);
  font-size: 1.05rem;
  line-height: 1.8;
}
.prose li { margin-bottom: 0.6rem; }
.prose li::marker { color: var(--clay-orange-lo); }
.prose li > ul, .prose li > ol { margin: 0.6rem 0 0; }

/* The quote bar is a finger-thick roll of peach clay, rounded like
   everything else sculpted here. */
.prose blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid var(--clay-peach);
  border-radius: 2px;
}
.prose blockquote p {
  font-family: var(--display-font), serif;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--clay-text-heading);
  margin-bottom: 0.75rem;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose a {
  color: var(--clay-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-standard);
}
.prose a:hover { color: var(--clay-text-heading); }

/* A figure is a photo print pressed into the clay: slab radius, hairline. */
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--clay-hairline);
}
.prose figure { margin: 2.5rem 0; }
.prose figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--clay-text-muted);
  text-align: center;
}
.prose hr {
  border: 0;
  height: 1px;
  background: var(--clay-hairline);
  margin: 3rem 0;
}

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  /* Card radii step down one notch below 640px — DESIGN.md. */
  .prose img { border-radius: var(--radius-tile); }
}

/* ── Section eyebrow ─────────────────────────────────────────── */
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body-font), sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--clay-text-body);
  margin-bottom: 1.5rem;
}
.section-tag::before { content: ''; width: 24px; height: 2px; border-radius: 1px; background: var(--clay-orange-lo); }

/* ── Feature tile ────────────────────────────────────────────────
   One rule, two historical class names: index.html called it .about-card,
   life-management.html called it .feature-card, and they were identical.
   Both selectors are kept so no markup has to change.

   Now a bone clay slab. Family classes (.clay-peach etc.) colour one. */
.about-card, .feature-card {
  background: linear-gradient(165deg, var(--fam-hi, var(--clay-bone-hi)) 0%, var(--fam, var(--clay-bone)) 45%, var(--fam-lo, var(--clay-bone-lo)) 130%);
  border-radius: var(--radius-slab);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 6px 0 var(--fam-lo, var(--clay-bone-lo)), 0 8px 0 rgba(26,24,21,.08), var(--clay-shadow-soft), var(--clay-rim);
  transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
  position: relative; overflow: hidden;
}
/* THE LIFT — one interaction for every card on the site. The slab rises and
   its thickness deepens: the same lump, held higher off the table.
   - :hover only where a pointer can hover (a phone otherwise leaves cards
     stuck lifted after a tap);
   - :active, the press, for touch (WebKit needs the empty touchstart
     listener main.js registers);
   - :focus-visible, so a keyboard reaching a card that is a link gets the
     same lift. */
.about-card, .feature-card { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .about-card:hover, .feature-card:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--fam-lo, var(--clay-bone-lo)), 0 11px 0 rgba(26,24,21,.08), var(--clay-shadow-soft-deep), var(--clay-rim); }
}
.about-card:active, .feature-card:active,
.about-card:focus-visible, .feature-card:focus-visible { transform: translateY(-3px); box-shadow: 0 9px 0 var(--fam-lo, var(--clay-bone-lo)), 0 11px 0 rgba(26,24,21,.08), var(--clay-shadow-soft-deep), var(--clay-rim); }
/* The icon tile is a small glass chip on the slab; the SVG inside inherits
   `color` from the tile's own inline style. Monoline SVG on one 20px grid
   at one 1.5px stroke — never emoji (Drawn Icons Rule). */
.about-card-icon, .feature-icon {
  width: 42px; height: 42px; border-radius: var(--radius-field);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(26,24,21,.06);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.about-card-icon svg, .feature-icon svg { width: 20px; height: 20px; display: block; }
.about-card p, .feature-card p { font-size: 0.875rem; line-height: 1.65; color: var(--clay-text-body); }

/* ── Glass panel ─────────────────────────────────────────────────
   The standalone glass surface (the hero's floating cards use the same
   recipe via .clay-glass). Elevation is deliberately light: glass floats,
   clay has thickness — a glass panel with a thick under-shadow reads as a
   slab pretending. */
.glass-panel {
  background: var(--clay-glass);
  backdrop-filter: var(--clay-blur-glass);
  -webkit-backdrop-filter: var(--clay-blur-glass);
  border: 1px solid var(--clay-border-glass);
  border-radius: var(--radius-tile);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(26,24,21,.06);
  padding: 1.5rem;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel { background: var(--clay-glass-opaque); }
}

/* ── Step cards ──────────────────────────────────────────────────
   Three lumps of clay in three families — the how-it-works row reads as
   the hero's floating cards landed on the table. */
.steps-grid { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step-card {
  background: linear-gradient(165deg, var(--fam-hi, var(--clay-bone-hi)) 0%, var(--fam, var(--clay-bone)) 45%, var(--fam-lo, var(--clay-bone-lo)) 130%);
  border-radius: var(--radius-slab);
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 8px 0 var(--fam-lo, var(--clay-bone-lo)), 0 10px 0 rgba(26,24,21,.08), var(--clay-shadow-soft), var(--clay-rim);
  position: relative; overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.steps-grid .step-card:nth-child(1) { --fam-hi: var(--clay-peach-hi); --fam: var(--clay-peach); --fam-lo: var(--clay-peach-lo); }
.steps-grid .step-card:nth-child(2) { --fam-hi: var(--clay-blue-hi); --fam: var(--clay-blue); --fam-lo: var(--clay-blue-lo); }
.steps-grid .step-card:nth-child(3) { --fam-hi: var(--clay-lavender-hi); --fam: var(--clay-lavender); --fam-lo: var(--clay-lavender-lo); }
/* The Lift, in this card's own vocabulary (see the feature tile above). */
.step-card { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 0 var(--fam-lo, var(--clay-bone-lo)), 0 14px 0 rgba(26,24,21,.08), var(--clay-shadow-soft-deep), var(--clay-rim);
  }
}
.step-card:active, .step-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 0 var(--fam-lo, var(--clay-bone-lo)), 0 14px 0 rgba(26,24,21,.08), var(--clay-shadow-soft-deep), var(--clay-rim);
}
/* Colour comes from the headline-emphasis block above (the action red). */
.step-num {
  font-family: var(--display-font), serif;
  font-style: normal; font-weight: 400;
  font-size: 3.5rem; line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.step-card h3 {
  font-family: var(--display-font), serif;
  font-weight: 400; font-size: 1.25rem;
  color: var(--clay-text-heading); margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.step-card p { font-size: 0.925rem; line-height: 1.7; color: var(--clay-text-body); text-wrap: pretty; }

/* ── CTA card ────────────────────────────────────────────────────
   A wide bone slab with a warm peach glow pooling in one corner —
   shared verbatim by story.html and life-management.html except for the
   top margin, which each page still sets. */
.cta-card {
  position: relative; z-index: 1;
  max-width: 900px;
  padding: 3.5rem 2.5rem;
  background: linear-gradient(165deg, var(--fam-hi, var(--clay-bone-hi)) 0%, var(--fam, var(--clay-bone)) 45%, var(--fam-lo, var(--clay-bone-lo)) 130%);
  color: var(--clay-text-heading);
  border-radius: var(--radius-slab);
  box-shadow: 0 10px 0 var(--fam-lo, var(--clay-bone-lo)), 0 12px 0 rgba(26,24,21,.08), var(--clay-shadow-soft), var(--clay-rim);
  text-align: center; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
@media (hover: hover) {
  .cta-card:hover { transform: translateY(-3px); box-shadow: 0 13px 0 var(--fam-lo, var(--clay-bone-lo)), 0 15px 0 rgba(26,24,21,.08), var(--clay-shadow-soft-deep), var(--clay-rim); }
}
.cta-card:active, .cta-card:focus-within { transform: translateY(-3px); box-shadow: 0 13px 0 var(--fam-lo, var(--clay-bone-lo)), 0 15px 0 rgba(26,24,21,.08), var(--clay-shadow-soft-deep), var(--clay-rim); }
.cta-card::after {
  content: ''; position: absolute;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(244,190,149,0.45) 0%, transparent 70%);
  right: -140px; bottom: -140px;
  pointer-events: none;
}
.cta-tag {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--clay-text-muted);
  margin-bottom: 1rem;
  position: relative; z-index: 1;
}
.cta-title {
  font-family: var(--display-font), serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--clay-text-heading);
  margin-bottom: 1rem;
  line-height: 1.15; letter-spacing: -0.015em;
  position: relative; z-index: 1;
}
.cta-title em { font-style: normal; }
.cta-body {
  color: var(--clay-text-body);
  font-size: 1rem; line-height: 1.7;
  max-width: 480px; margin: 0 auto 2rem;
  position: relative; z-index: 1;
}

/* Nav collapse. One copy, one breakpoint — 960px, the marketing breakpoint. */
@media (max-width: 960px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.75rem max(24px, 5vw) 1.5rem;
    background: rgba(251,246,238,0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--clay-hairline);
    /* The panel's thickness, full width: the same clay under-edge grammar
       as every slab, in the neutral clay. */
    box-shadow: 0 4px 0 var(--clay-slab-lo);
    transform: translateY(-110%); opacity: 0; pointer-events: none;
    transition: transform var(--dur-slow) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
  }

  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }

  .nav-links a {
    display: block; padding: 14px 4px; font-size: 1rem;
    color: var(--clay-text-heading); border-bottom: 1px solid var(--clay-hairline);
  }

  .nav-links a:last-child { border-bottom: none; }

  .nav-links a:not(.nav-cta)::after { display: none; }

  .nav-links .nav-cta {
    margin-top: 0.75rem; padding: 12px 22px !important;
    text-align: center; align-self: flex-start;
  }
}

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