/* ==========================================================================
   She Let Go(d) — site.css   (round 3)
   Each section is a full-bleed background at its comp aspect ratio. Live
   text is absolutely positioned in percentages/vw so it matches the comp
   at every desktop width; at 1672 the layout is 1:1 with the comp.
   ========================================================================== */

:root {
  --page:      #fbf6f2;
  --paper:     #fbfbfb;
  --panel:     #fefbf8;
  --heading:   #0a1a3a;
  --body:      #1f2c4d;
  --plum:      #46283f;
  --crimson:   #d0104a;
  --rose:      #a95869;
  --rose-hov:  #92485a;
  --gold:      #9a5e14;
  --gold-line: #c9a56b;
  --gold-soft: #e8d4a6;

  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-script:  'Hurricane', 'Sacramento', 'Great Vibes', cursive;
  --font-marker:  'Sacramento', 'Homemade Apple', cursive;
  --font-ui:      system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --header-h:   90px;
  --w-narrow: 780px;
  --w-med:    1180px;
  --w-wide:   1672px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:where([id]) { scroll-margin-top: calc(var(--header-h) + 12px); }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { color: var(--heading); margin: 0; font-weight: 500; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: var(--heading); text-decoration: none; }
a:hover, a:focus-visible { color: var(--rose); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}
img { max-width: 100%; height: auto; display: block; }

.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;}

/* -------------------- header -------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--page);
  border-bottom: 1px solid rgba(201, 165, 107, 0.25);
  min-height: var(--header-h);
}
.site-header .wrap {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 18px clamp(20px, 2.4vw, 40px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; text-decoration: none; }
.brand .brand-mark {
  font-family: var(--font-display);
  color: var(--heading);
  font-size: 26px;
  white-space: nowrap;
}
.brand .brand-mark .she {
  font-family: var(--font-script);
  color: var(--crimson);
  font-size: 44px;
  margin-right: 6px;
  vertical-align: -6px;
  font-weight: 400;
}
.brand .brand-mark .d { color: var(--gold); }
.brand .brand-tag {
  font-family: var(--font-ui);
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 600;
}
.nav-links {
  display: flex; justify-content: center; gap: 30px;
  list-style: none; padding: 0; margin: 0;
}
.nav-links a {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--heading);
  padding: 8px 4px;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.nav-links a[aria-current="page"] { color: var(--rose); }
.nav-cta {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; background: var(--rose);
  padding: 14px 28px;
  border: 0; border-radius: var(--radius-pill);
  min-height: 44px; cursor: pointer;
  transition: background 160ms ease;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--rose-hov); color: #fff; }
.nav-toggle {
  display: none;
  background: transparent; border: 0;
  width: 44px; height: 44px; cursor: pointer; padding: 10px;
  color: var(--heading);
}
.nav-toggle svg { width: 24px; height: 24px; }

/* -------------------- section common (desktop, >= 900px) -------------------- */
.section {
  position: relative;
  width: 100%;
  background-color: var(--page);
  overflow: visible;
}
/* Background lives on a ::before layer so fade masks only affect the image, not the live text on top */
.section::before {
  content: "";
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
}
.section .layer {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Per-section background image assignment. */
.section.hero::before    { background-image: url('/assets/hero-bg.webp?v=50597f737b71'); }
.section.story::before   { background-image: url('/assets/story-bg.webp?v=50597f737b71'); }
.section.book::before    { background-image: url('/assets/book-scene.webp?v=50597f737b71'); }
/* .connect section owns its own background below (no .section wrapper) */

/* Fade masks apply to the ::before background layer only — text stays at full opacity */
.sec-fade-bottom::before { -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
                               mask-image: linear-gradient(to bottom, black 86%, transparent 100%); }
.sec-fade-top-bot::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 86%, transparent 100%);
                                mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 86%, transparent 100%); }
.sec-fade-top-bot-strong::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 86%, transparent 100%);
                                       mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 86%, transparent 100%); }
.sec-fade-top::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
                            mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%); }

/* Sections stack with breathing room between them; fades still soften the seams.
   NOTE (2026-09-24): prior to today, `.section.hero/story/book { margin: 0 auto }`
   shorthand at lines ~270/352/424 was silently zeroing the mb declared here —
   sections rendered flush (0px gap) despite the intent. Fixed by switching
   those three rules to `margin-inline: auto`. Then bumped this clamp 25%
   above the prior intended 80/40 baseline per Matt's ask. */
.section { margin-bottom: clamp(60px, 7vw, 100px); }
.section + .section { margin-top: 0; }
@media (max-width: 900px) {
  .section { margin-bottom: clamp(36px, 5vw, 50px); }
}

/* -------------------- typography atoms -------------------- */
.eyebrow {
  font-family: var(--font-ui);
  color: var(--heading);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex; align-items: center;
  gap: 0.8vw;
  flex-wrap: wrap;
}
/* Keep multi-word phrases atomic so overflow wraps between phrases,
   not mid-phrase. Prior bug (2026-09-24): hero eyebrow rendered
   "REAL / CONVERSATIONS" split across two lines at 1440 because the
   flex container narrower than content forced each span to shrink
   and word-break internally. Story didn't hit this because its
   container had 40px more room. */
.eyebrow > span:not(.dot) { white-space: nowrap; }
.eyebrow .dot {
  display: inline-block; width: 0.35vw; height: 0.35vw;
  min-width: 5px; min-height: 5px;
  background: var(--gold-line); transform: rotate(45deg);
  flex-shrink: 0;
}
.eyebrow-flanked {
  display: inline-flex; align-items: center; gap: 1vw;
  font-family: var(--font-ui);
  color: var(--heading);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.eyebrow-flanked hr {
  flex: 0 0 3.5vw; min-width: 40px; height: 1px;
  background: var(--gold-line); border: 0; margin: 0;
}
.script-crimson {
  font-family: var(--font-script);
  color: var(--crimson);
  font-weight: 400;
  line-height: 1;
  display: inline-block;
}
.btn-primary {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; background: var(--rose);
  border: 0; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.7vw;
  transition: background 160ms ease, transform 160ms ease;
  min-height: 44px;
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--rose-hov); color: #fff; transform: translateY(-1px); }
.btn-primary .arrow { font-family: var(--font-ui); font-weight: 400; }

/* Icon row atom */
/* .icon-tile removed 2026-09-23 with the .h-icons and .s-icons blocks —
   copy rewrite dropped the three-phrase icon rows on hero + story. */

/* -------------------- HERO / STORY / BOOK — desktop grid rewrite --------------------
   Rewritten 2026-09-22: was aspect-ratio-locked containers with every text child
   absolutely-positioned at %-based offsets + vw-scaled typography. Broke at
   ≥2560px (Matt's 27" monitor: story headline↔script overlap). Full history:
   docs/tech-debt.md.

   Playbook (same as the /about grid rewrite):
     - Section: max-width 1600px + centered so ultra-wide displays don't scale
       the composite background indefinitely (cream shows on either side at
       >1600px viewports — intentional).
     - min-height + padding using clamp() with px caps, so no runaway vertical
       growth.
     - .layer: flex column with real block flow, no absolute positioning.
     - Text elements: capped max-width (natural line length) + clamp() font
       sizes with px maxima. No vw fonts that scale independently of container.

   Mobile block (@media max-width: 768px) still owns its own layout — this
   desktop refactor does not touch it.                                          */

/* HERO */
.section.hero {
  max-width: 1600px;
  margin-inline: auto;
  min-height: clamp(560px, 46vw, 780px);
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px);
}
.section.hero::before { background-position: right center; }
.hero .layer {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 22px);
}
.hero .layer > * {
  position: static;
  transform: none;
  left: auto; top: auto;
  max-width: min(100%, 480px);
}
.section.hero .h-eyebrow {
  font-family: var(--font-ui);
  color: var(--heading);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  /* Selector bumped from `.hero .h-eyebrow` → `.section.hero .h-eyebrow`
     to reach specificity (0,0,3,0), beating `.hero .layer > *` at
     (0,0,2,1) so this max-width wins over the wildcard 480px cap.
     640px gives ~110px slack over the measured 530px nowrap content
     width at 1440 (194 + 30 + 129 + 30 + 147). Content stays one line. */
  max-width: min(100%, 640px);
  background: transparent;
  padding: 0;
}
.hero .h-headline {
  font-family: var(--font-display);
  color: var(--heading);
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0;
}
.hero .h-script {
  font-family: var(--font-script);
  color: var(--crimson);
  font-size: clamp(48px, 5.4vw, 88px);
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.hero .h-body {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--body);
  max-width: 460px;
  margin: 4px 0;
}
/* Paragraph break inside hero body — matches the `p + p` rules on
   .story .s-body / .book .b-body so a second sentence-paragraph
   ("You can start exactly where you are.") reads as its own line.
   Negative margin counteracts the layer's flex gap (22px @1440,
   14px @375) so the closing line sits ~50% closer to the body above
   than the eyebrow→headline→script rhythm. Still visually separate. */
.hero .h-body + .h-body { margin-top: -6px; }
/* .hero .h-icons deleted 2026-09-23 — copy rewrite. */
.hero .h-btn {
  display: inline-flex;
  font-size: 13px;
  padding: 16px 32px;
  min-height: 52px;
  /* Match the closing-paragraph offset so body→close and close→btn
     read as the same visual rhythm (~18px @1440, ~10px @375). */
  margin-top: -6px;
  align-items: center;
}
/* Selector bumped from `.hero .h-caption` → `.section.hero .h-caption`
   for (0,0,3,0) specificity so the margin-top wins over the mobile
   `.section .layer > * + * { margin-top: 16px }` rule at (0,0,2,2). */
.section.hero .h-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Script font (Hurricane after 2026-09-24 revert), natural mixed
     case, doubled 22→44. margin-top adds ~50% to the button→caption
     flex-gap (22 @1440, 14 @375) per Matt's spacing ask. */
  font-family: var(--font-script);
  color: var(--body);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-size: 44px;
  line-height: 1;
  margin-top: clamp(7px, 0.8vw, 11px);
  background: transparent;
}
.hero .h-caption hr { width: 40px; height: 1px; border: 0; background: var(--gold-line); margin: 0; }

/* STORY */
.section.story {
  max-width: 1600px;
  margin-inline: auto;
  min-height: clamp(600px, 50vw, 820px);
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px);
}
.section.story::before { background-position: right center; }
.story .layer {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 22px);
}
.story .layer > * {
  position: static;
  transform: none;
  left: auto; top: auto;
  max-width: min(100%, 520px);
}
.story .s-eyebrow {
  font-family: var(--font-ui);
  color: var(--heading);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
}
.story .s-headline {
  font-family: var(--font-display);
  color: var(--heading);
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.05;
  font-weight: 500;
  margin: 0;
}
.story .s-script {
  font-family: var(--font-script);
  color: var(--crimson);
  font-size: clamp(44px, 4.4vw, 72px);
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.story .s-body {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--body);
  max-width: 500px;
  margin: 4px 0;
}
.story .s-body p + p { margin-top: 12px; }
/* .story .s-icons deleted 2026-09-23 — copy rewrite. */
.story .s-flanked {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  color: var(--heading);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 11px;
  margin-top: 4px;
}
.story .s-flanked hr { width: 40px; height: 1px; border: 0; background: var(--gold-line); margin: 0; }

/* BOOK */
.section.book {
  max-width: 1600px;
  margin-inline: auto;
  min-height: clamp(640px, 56vw, 880px);
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px);
}
.section.book::before { background-position: right center; }
.book .layer {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 22px);
}
.book .layer > * {
  position: static;
  transform: none;
  left: auto; top: auto;
  max-width: min(100%, 520px);
}
.book .b-headline {
  font-family: var(--font-display);
  color: var(--heading);
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.05;
  font-weight: 500;
  margin: 0;
}
.book .b-script {
  font-family: var(--font-script);
  color: var(--crimson);
  font-size: clamp(36px, 3.8vw, 62px);
  line-height: 1.05;
  margin: 0;
}
.book .b-body {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--body);
  max-width: 500px;
  margin: 4px 0;
}
.book .b-body p + p { margin-top: 12px; }
.book .b-btn {
  display: inline-flex;
  font-size: 13px;
  padding: 16px 32px;
  min-height: 52px;
  margin-top: 8px;
  align-items: center;
}

/* -------------------- HERO / STORY / BOOK — intermediate tablet (769-1279)
   ------------------------------------------------------------
   Bug that motivated this block (2026-09-24): at effective viewport ~911px
   (Matt at 1366×150% zoom), the desktop side-by-side layout puts a 480/520px
   text column on the left over a ::before absolute bg-image with
   `background-position: right center` + `cover`. As the viewport narrows,
   the composite's right-anchored content (wall art / Dawn / book cover)
   scales up and shifts LEFT into the text column — 24-64px of visible
   overlap depending on section.

   Threshold picked empirically: swept 1024→1600 with screenshots, bleed
   persists all the way through 1200 (wall art visible-portion still
   crosses the 520px text column). 1280 has ~60-80px clearance and is
   the first width where every zoom-effective size Matt commonly hits
   (1366@125=1092, 1920@150=1280, 1440@150=960 — all safely covered)
   fits inside the stacked layout.

   Fix: at 769-1279, swap to the same bg-behind + cream-overlay + stacked
   text pattern the ≤768 mobile block already uses. No side-by-side split
   = no bleed possible at ANY zoom in this range. Desktop side-by-side
   still applies at ≥1280 (proven safe there); mobile block still owns
   ≤768.                                                                     */
@media (min-width: 769px) and (max-width: 1279px) {
  .section.hero,
  .section.story,
  .section.book {
    display: block;
    padding: clamp(56px, 8vw, 96px) clamp(28px, 5vw, 64px);
    min-height: auto;
    aspect-ratio: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .section.hero  { background-image: url('/assets/hero-bg.webp?v=50597f737b71'); }
  .section.story { background-image: url('/assets/story-bg.webp?v=50597f737b71'); }
  .section.book  { background-image: url('/assets/book-scene.webp?v=50597f737b71'); }

  /* ::before becomes a cream wash so text is readable over the photo */
  .section.hero::before,
  .section.story::before,
  .section.book::before {
    background-image: none;
    background: linear-gradient(to bottom,
                                rgba(251,246,242,0.92) 0%,
                                rgba(251,246,242,0.86) 55%,
                                rgba(251,246,242,0.40) 100%);
    -webkit-mask-image: none;
            mask-image: none;
  }

  .section.hero .layer,
  .section.story .layer,
  .section.book .layer {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
  }
  .hero .layer > *,
  .story .layer > *,
  .book .layer > * {
    max-width: 100%;
  }
  /* h-script/s-script have `white-space: nowrap` — at these widths that can
     itself overflow if the container is narrower than the script line.
     Allow wrapping in this range so nothing horizontally overflows. */
  .hero .h-script,
  .story .s-script {
    white-space: normal;
  }
}

/* -------------------- STAY CONNECTED --------------------
   The Stay Connected section is the design comp itself, baked in
   as the background image (all text, frame, angel, tagline, flowers).
   The only live HTML is the form (inputs + submit button),
   absolutely positioned over the comp's form area. */
/* Connect section — REVERTED 2026-09-23 to pre-refactor baked-composite
   state. Full asset is the design comp (STAY CONNECTED + "Come along for
   the journey." + body + tagline all baked in). Form absolutely positioned
   into the pink stripe band at 78% top. Same layout as pre-1c9c6e2.
   TODO: replace with a text-free version of connect-bg.webp when
   available, then reintroduce live HTML for the copy Matt approved. */
.connect {
  position: relative;
  width: 100%;
  aspect-ratio: 1671 / 650;
  background-image: url('/assets/connect-bg.webp?v=50597f737b71');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
  /* .connect isn't a .section so the section margin-bottom rule
     doesn't cascade — declare the gap between .book → .connect here. */
  margin-top: clamp(60px, 7vw, 100px);
}
@media (max-width: 900px) {
  .connect { margin-top: clamp(36px, 5vw, 50px); }
}
.connect-form {
  /* Position in the clean pink stripe band on connect-bg.webp
     (1671 x 650). Body ends y ~440; tagline starts y ~490;
     clean gap y ~445-485. */
  position: absolute;
  top: 78%;
  left: 26.3%;
  right: 20%;
  display: flex;
  gap: 0.7vw;
  z-index: 2;
}

.connect-form input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.85vw 1.2vw;
  font-size: 0.9vw;
  border: 1px solid #c9a56b;
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-ui);
  color: #0a1a3a;
  min-height: 44px;
}
.connect-form input:focus-visible {
  outline: 2px solid #a95869;
  outline-offset: 2px;
}

.connect-form button {
  flex: 0 0 46%;
  padding: 0.85vw 1.5vw;
  font-size: 0.85vw;
  letter-spacing: 0.15em;
  font-weight: 600;
  background: #a95869;
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui);
  min-height: 44px;
  transition: background 160ms ease;
  white-space: nowrap;
}
.connect-form button:hover,
.connect-form button:focus-visible { background: #92485a; }

/* JS handler writes here — kept out of the visible flow */
.connect-message {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 0.85vw;
  color: #0a1a3a;
  min-height: 18px;
  background: rgba(251, 246, 242, 0.9);
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 2;
  display: none;
}
.connect-message.error,
.connect-message.ok { display: block; }
.connect-message.error { color: #a83a3a; }
.connect-message.ok { color: #2e6b3d; }

/* -------------------- FOOTER (live HTML below Connect) -------------------- */
.site-footer { margin-top: 0; }
.footer-bar {
  background: var(--rose);
  color: #fff;
  padding: 28px 0;
}
/* 3-column grid: brand LEFT · nav CENTER · social RIGHT.
   grid-template-columns: 1fr auto 1fr guarantees nav sits centered
   regardless of brand or social widths — no drift as flex children resize.
   Mobile stack takes over below 1024px (see @media block near bottom of
   this file) — the grid can't shrink narrower than its content and the
   viewport gets crowded before 1024. */
.footer-bar .wrap {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 clamp(20px, 2.4vw, 40px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px 32px;
}
.footer-brand  { justify-self: start; }
.footer-nav    { justify-self: center; }
.footer-social {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; text-decoration: none; }
.footer-brand .brand-mark { font-family: var(--font-display); color: #fff; font-size: 22px; white-space: nowrap; }
.footer-brand .brand-mark .she {
  font-family: var(--font-script);
  color: #fff5f8;
  font-size: 38px;
  margin-right: 6px;
  vertical-align: -6px;
}
.footer-brand .brand-mark .d { color: #ffe1b4; }
.footer-brand .brand-tag {
  font-family: var(--font-ui);
  color: rgba(255,255,255,0.85);
  font-size: 9px; letter-spacing: 0.32em;
  text-transform: uppercase; margin-top: 6px; font-weight: 600;
}
.footer-nav { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.footer-nav a {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #fff;
  padding: 8px 4px; min-height: 44px;
  display: inline-flex; align-items: center;
  font-weight: 600;
}
.footer-nav a:hover { color: #ffe1b4; }
/* "You belong here" — plain script text, no button chrome. Matches the
   Hurricane face + cream color of "She" in the brand-mark for visual
   coherence with the logo. Contrast #fff5f8 on rose #a95869 = ~5.1:1
   (WCAG requires 4.5:1). ✓ */
.footer-cta {
  color: #fff5f8;
  font-family: var(--font-script);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
}
.footer-cta:hover,
.footer-cta:focus-visible { color: #ffe1b4; text-decoration: none; }

/* Social icon buttons — IG + TikTok share the same visual treatment.
   44×44 tap target (Apple HIG minimum) with a 22px inline SVG centered.
   Any future icon should extend the shared selector below. */
.footer-ig,
.footer-tiktok,
.footer-fb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: #fff;
  border-radius: 50%;
  transition: color 160ms ease, transform 160ms ease;
  text-decoration: none;
}
.footer-ig svg,
.footer-tiktok svg,
.footer-fb svg { width: 22px; height: 22px; }
.footer-ig:hover, .footer-ig:focus-visible,
.footer-tiktok:hover, .footer-tiktok:focus-visible,
.footer-fb:hover, .footer-fb:focus-visible { color: #ffe1b4; transform: translateY(-1px); }
.footer-legal {
  background: var(--rose-hov);
  color: rgba(255,245,238,0.75);
  text-align: center;
  padding: 12px 0 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
}
.footer-legal .amg {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: #9a8a7a;
  text-decoration: none;
}
.footer-legal .amg:hover, .footer-legal .amg:focus-visible { color: #ffe1b4; }

/* -------------------- ABOUT PAGE -------------------- */
/* Rewritten 2026-09-22: was `.about-poster { aspect-ratio: 1024/1536 }` with
   every child absolutely-positioned at percentage offsets over a composite
   background image. Body content flowed inside a fixed-height slot that
   didn't scale with vw-typography, so at intermediate desktop widths the
   quote overran the photo and the tagline band drifted into the button
   area. Full history in docs/tech-debt.md.
   All layout now lives inside the desktop @media block — no
   absolute-positioning base rules to leak.                                */
.about-page { background: #fbf6f2; min-height: 100vh; }
.about-wrap {
  max-width: 1120px; margin: 0 auto;
  padding: 24px clamp(20px, 3vw, 48px) 60px;
}
.about-poster { position: relative; width: 100%; }
.about-poster .a-tagline .sep,
.about-poster .a-band    .sep { color: var(--gold-line); margin: 0 0.6vw; }

@media (min-width: 769px) {
  /* Two-column grid: photo on the left, text column on the right,
     tagline band spans full-width below both.
     No absolute positioning anywhere — every child is a real grid item. */
  .about-poster {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "photo heading"
      "photo heart-top"
      "photo tagline"
      "photo body"
      "band  band";
    gap: 0 clamp(32px, 4vw, 64px);
    padding: 40px 0 32px;
    align-items: start;
    background-image: none;
    aspect-ratio: auto;
  }
  .about-poster::before {
    content: "";
    grid-area: photo;
    align-self: stretch;
    min-height: 640px;
    background-image: url('/assets/dawn-about.webp?v=50597f737b71');
    background-size: cover;
    background-position: center 22%;
    background-repeat: no-repeat;
    border-radius: 10px;
    -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  }
  .about-poster .a-heading {
    grid-area: heading;
    font-family: var(--font-script);
    color: var(--crimson);
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    font-weight: 400;
    margin: 0;
    text-align: center;
  }
  .about-poster .a-heart-top {
    grid-area: heart-top;
    color: var(--rose);
    font-size: 20px;
    line-height: 1;
    text-align: center;
    margin-top: 12px;
  }
  .about-poster .a-tagline {
    grid-area: tagline;
    font-family: var(--font-ui);
    color: var(--body);
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    margin-top: 12px;
  }
  .about-poster .a-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 28px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: #45375f;
    text-align: left;
  }
  .about-poster .a-body p { margin: 0 0 14px; align-self: stretch; }
  .about-poster .a-body p:last-of-type { margin-bottom: 0; }
  .about-poster .a-body > .a-divider,
  .about-poster .a-body > .a-quote,
  .about-poster .a-body > .a-heart-bot,
  .about-poster .a-body > .a-btn { align-self: center; }

  .about-poster .a-divider {
    display: block;
    width: 80px;
    height: 1px;
    background: var(--gold-line);
    border: 0;
    margin: 32px auto 20px;
  }

  /* Pull quote — plain italic serif on the page background. No card, no
     highlight, no left rule. Just typography. Contrast plum #46283f on
     page cream #fbf6f2 = ~12.2:1 (WCAG requires 4.5:1). ✓ */
  .about-poster .a-quote {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    color: var(--plum, #46283f);
    font-size: 21px;
    line-height: 1.55;
    text-align: center;
    max-width: 42ch;
    margin: 0 auto;
  }

  .about-poster .a-heart-bot {
    display: block;
    color: var(--rose);
    font-size: 22px;
    line-height: 1;
    text-align: center;
    margin: 22px 0 6px;
  }

  .about-poster .a-btn {
    display: inline-flex;
    margin: 12px auto 0;
    font-size: 13px;
    padding: 16px 32px;
    min-height: 52px;
    min-width: 280px;
    white-space: nowrap;
    justify-content: center;
    text-align: center;
    align-self: center;
  }

  .about-poster .a-band {
    grid-area: band;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--gold-line);
    font-family: var(--font-display);
    color: var(--plum);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
  }
}

/* -------------------- BOOK / COACHING sub-pages (kept as clean pages) -------------------- */
.subpage {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 3vw, 40px) clamp(80px, 10vw, 130px);
  max-width: 960px; margin: 0 auto;
}
.subpage .eyebrow { justify-content: flex-start; margin-bottom: 20px; font-size: 12px; }
.subpage h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--heading);
  line-height: 1.02;
  margin: 0 0 12px;
}
.subpage h1 .script-crimson {
  display: block; font-size: 1.3em; margin-top: 0.15em; line-height: 1;
}
.subpage .sub {
  font-family: var(--font-script);
  color: var(--crimson);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  margin: 6px 0 24px;
}
.subpage .lede { max-width: 600px; font-size: 1.05rem; margin: 0 0 1.1em; }
/* Badge that sits directly above the book image. Layout swap 2026-09-24
   moved this from the top of the /book page to just above the cover,
   so it needs its own centering + spacing (overrides the generic
   `.subpage .eyebrow { justify-content: flex-start }` which was correct
   when the badge lived above the h1). */
.subpage .eyebrow.book-cover-badge {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 32px auto 12px;
}
.book-cover-hero {
  max-width: 700px;
  margin: 0 auto 32px;
  filter: drop-shadow(0 20px 40px rgba(10,26,58,0.16));
}
.book-cover-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
/* Centers the CTA button beneath the (centered) book cover on /book.
   Left-alignment was fine when the button followed left-aligned text,
   but as of the 2026-09-24 layout swap it now follows the centered
   cover image so it should center too. */
.subpage .buy-row { margin: 26px 0 12px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.subpage .buy-row .btn-secondary-outline {
  background: transparent;
  border: 2px solid var(--rose);
  color: var(--rose);
}
.subpage .buy-row .btn-secondary-outline:hover,
.subpage .buy-row .btn-secondary-outline:focus-visible {
  background: var(--rose);
  color: #fff;
}
.subpage .fine {
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(31, 44, 77, 0.7);
  margin-top: 12px;
}

.coaching-form-wrap {
  margin-top: 30px;
  padding: 30px;
  background: var(--panel);
  border-radius: 12px;
}
.coaching-form { display: grid; gap: 18px; }
.coaching-form label {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--heading);
  font-weight: 600;
  display: block; margin-bottom: 6px;
}
.coaching-form input,
.coaching-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(10, 26, 58, 0.15);
  background: #fff;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--heading);
  min-height: 48px;
}
.coaching-form textarea { min-height: 140px; resize: vertical; }
.coaching-form input:focus-visible,
.coaching-form textarea:focus-visible {
  outline: 2px solid var(--rose); outline-offset: 2px; border-color: var(--rose);
}
.subpage .btn-primary {
  font-size: 12px;
  padding: 18px 34px;
  min-height: 52px;
  gap: 12px;
}

/* -------------------- MOBILE (< 900px) -------------------- */
@media (max-width: 900px) {
  :root { --header-h: 66px; }
  html { -webkit-text-size-adjust: 100%; }

  .site-header .wrap { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 20px; }
  .brand .brand-mark { font-size: 20px; }
  .brand .brand-mark .she { font-size: 32px; vertical-align: -5px; margin-right: 4px; }
  .nav-cta { padding: 12px 18px; font-size: 11px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: var(--panel);
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 24px;
    transform: translateY(-120%);
    transition: transform 260ms ease;
    box-shadow: 0 20px 40px -20px rgba(10, 26, 58, 0.25);
    border-bottom: 1px solid rgba(201, 165, 107, 0.25);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 14px 4px; border-bottom: 1px solid rgba(201, 165, 107, 0.2); }
  .nav-links a:last-child { border-bottom: 0; }

  /* Kill section-fade masks on mobile so text renders cleanly */
  .sec-fade-bottom, .sec-fade-top-bot, .sec-fade-top-bot-strong, .sec-fade-top {
    -webkit-mask-image: none; mask-image: none;
  }

  /* On mobile: section becomes a stacked text block + image block */
  .section { aspect-ratio: auto; background-image: none; padding: 40px 20px 20px; }
  .section::before { display: none; }
  .section + .section { margin-top: 0; }
  .section .layer { position: static; max-width: 100%; }
  .section .layer > * { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: auto !important; max-width: 100% !important; white-space: normal !important; }
  .section .layer > * + * { margin-top: 16px; }

  .section .h-headline, .section .s-headline, .section .b-headline, .section .c-headline,
  .section .h-script, .section .s-script, .section .b-script { font-size: 34px; line-height: 1.05; }
  .section .h-script, .section .s-script, .section .b-script,
  .section .c-tagline { font-size: 40px; line-height: 1; }
  .section .h-body, .section .s-body, .section .b-body, .section .c-body { font-size: 16px; line-height: 1.6; }
  .section .h-eyebrow, .section .s-eyebrow, .section .c-eyebrow, .section .b-preorder { font-size: 11px; }
  /* .h-caption script font at 44px (doubled from the 22px in the
     prior iteration — see the desktop rule for the same size). */
  .section.hero .h-caption { font-size: 44px; }
  /* mobile .h-icons/.s-icons rules deleted 2026-09-23 — copy rewrite. */
  .section .h-btn, .section .b-btn, .section .connect .c-form button {
    width: auto; height: 52px; font-size: 12px; padding: 0 26px;
  }
  .section .h-rule-diamond hr, .section .h-caption hr,
  .section .s-flanked hr, .section .c-eyebrow hr,
  .eyebrow-flanked hr { width: 40px !important; min-width: 40px !important; }

  /* Section image blocks below text (using ::after pseudo with cover asset) */
  .section.hero::after,
  .section.story::after,
  .section.book::after,
  .section.connect::after {
    content: "";
    display: block;
    width: 100vw; margin-left: -20px;
    margin-top: 24px;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 100%);
  }
  .section.story::after  { background-image: url('/assets/story-bg.webp?v=50597f737b71');  aspect-ratio: 1672 / 941; }
  .section.book::after   { background-image: url('/assets/book-scene.webp?v=50597f737b71'); aspect-ratio: 1448 / 1086; }
  /* .connect owns its own bg on mobile via its always-on background-image */

  /* Connect: show baked comp scaled to fit width, stack live form below */
  .connect {
    aspect-ratio: auto;
    padding: 0 0 24px;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
  /* Reserve height for the baked bg (aspect 1672/720 at 100vw) plus form */
  .connect::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1672 / 610;
  }
  .connect-form {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 0;
  }
  .connect-form input,
  .connect-form button {
    width: 100%;
    max-width: 320px;
    padding: 14px 18px;
    font-size: 15px;
    min-width: 0;
  }
  .connect-message {
    position: static; transform: none;
    text-align: center; margin-top: 8px;
    font-size: 13px;
  }

  /* About page: text-first, then Dawn portrait centered below.
     Cream-to-light gradient across the surround so the bright right
     edge of Dawn's portrait blends into the page instead of hitting
     a harsh cream/white seam. */
  html:has(.about-page) { background-color: #fbf6f2 !important; }
  .about-page,
  .about-page main,
  .about-wrap {
    background: linear-gradient(to right, #fbf6f2, #f5f0ec) !important;
  }
  .about-wrap { padding: 24px 20px 48px; }
  .about-poster {
    aspect-ratio: 3 / 4;
    background-image: url('/assets/dawn-about.webp?v=50597f737b71') !important;
    background-position: center 25% !important;
    background-color: #fbf6f2;
    margin: 24px auto 0;
    max-height: 460px;
    max-width: 340px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
    display: block;
  }
  .about-poster > * { display: none !important; }

  .about-mobile-text {
    display: block !important;
    font-size: 16px; line-height: 1.65;
    color: var(--body);
  }
  .about-mobile-text h1 {
    font-family: var(--font-script);
    color: var(--crimson);
    font-size: 52px;
    line-height: 1;
    margin: 0 0 8px;
  }
  .about-mobile-text .tagline {
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--heading);
    font-weight: 600;
    margin-bottom: 22px;
  }
  .about-mobile-text .tagline .sep { color: var(--gold-line); margin: 0 8px; }
  .about-mobile-text p { margin: 0 0 14px; }
  /* Pull quote — plain italic serif on the page background. Matches the
     desktop treatment: no card, no border rule, no highlight. */
  .about-mobile-text .quote {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--plum, #46283f);
    font-size: 18px;
    line-height: 1.5;
    max-width: 42ch;
    margin: 26px auto 8px;
  }
  /* Two-line, centered tagline on mobile:
       Line 1: SHE LET GO(D)
       Line 2: HEAL · RELEASE · RISE
     Implemented in CSS (no HTML change) by promoting the first <span>
     to a block and hiding the first .sep that follows it. */
  .about-mobile-text .band {
    font-family: var(--font-display);
    color: var(--plum);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 11px;
    text-align: center;
    margin: 32px auto 0;
    width: 100%;
    font-weight: 500;
    display: block;
  }
  .about-mobile-text .band > span:first-child {
    display: block;
    margin-bottom: 8px;
  }
  .about-mobile-text .band > span:first-child + .sep { display: none; }
  .about-mobile-text .band > span { white-space: nowrap; }
  .about-mobile-text .band .sep { color: var(--gold-line); margin: 0 6px; }

  /* Footer content-only rules that need to hit at ≤900. The stacking
     itself is handled in the ≤1023 block below so the grid collapses
     before content would need to compress. */
  .footer-nav { flex-wrap: wrap; justify-content: center; }
  .footer-cta { font-size: 24px; }
  .footer-brand {
    align-items: center !important;
    text-align: center;
    margin: 0 auto;
  }
  .footer-brand .brand-mark,
  .footer-brand .brand-tag { text-align: center; }
}

/* Footer stacks below 1024px — grid can't shrink narrower than its content
   so we collapse to a single column before things overlap. Kicks in above
   the 900px mobile block so ~950px viewports (Matt's known problem width)
   get a clean stacked layout rather than an overflowing 3-col grid. */
@media (max-width: 1023px) {
  .footer-bar .wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 20px;
  }
  .footer-brand,
  .footer-nav,
  .footer-social { justify-self: center; }
  .footer-social { flex-wrap: wrap; justify-content: center; }
}

/* Desktop-only mobile helper hider */
.about-mobile-text { display: none; }
@media (max-width: 900px) { .about-mobile-text { display: block; } }

/* 3D-book image only renders on mobile inside the book section */
.b-image-mobile { display: none; }

/* -------------------- MOBILE HERO OVERRIDE (<= 768px) --------------------
   Applies AFTER the broader @media (max-width: 900px) mobile block so it
   wins. Hero at phone widths uses the bg image behind the text, matching
   the desktop pattern (photo behind, text on top with cream overlay). */
@media (max-width: 768px) {
  .section.hero {
    background-image: url('/assets/hero-bg.webp?v=50597f737b71') !important;
    background-size: cover !important;
    background-position: 70% center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
    position: relative !important;
    padding: 100px 20px 12px !important;
    margin-bottom: clamp(36px, 5vw, 50px) !important;
    aspect-ratio: auto !important;
  }
  .section.hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: none !important;
    background: linear-gradient(to bottom,
                                rgba(251,246,242,0.93) 0%,
                                rgba(251,246,242,0.85) 50%,
                                rgba(251,246,242,0.4) 100%) !important;
    z-index: 1 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  /* Bottom fade — matches the story section's technique so the hero
     photo dissolves softly into cream instead of hitting the "MY STORY"
     eyebrow with a hard edge. */
  .section.hero::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 96px !important;
    background: linear-gradient(to bottom,
                                rgba(251,246,242,0) 0%,
                                rgba(251,246,242,1) 100%) !important;
    background-image: linear-gradient(to bottom,
                                      rgba(251,246,242,0) 0%,
                                      rgba(251,246,242,1) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    aspect-ratio: auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  .section.hero .layer {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Header at phone widths: centered brand + tagline + CTA stacked in
     a single column; hamburger anchored to the right edge without
     affecting the centered brand block. */
  .site-header { padding-top: 8px !important; }
  .site-header .wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    position: relative !important;
    grid-template-columns: none !important;
  }
  /* <nav> wrapper collapses so the fixed-position mobile menu doesn't
     leave a phantom flex slot in the header row. */
  .site-header nav { display: contents !important; }
  .site-header .brand {
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: calc(100% - 88px);  /* keep clear of the 44px hamburger + 20px right pad + gap */
  }
  .site-header .brand .brand-mark,
  .site-header .brand .brand-tag { text-align: center !important; }
  .site-header .nav-cta {
    align-self: center !important;
    margin: 0 auto !important;
  }
  .site-header .nav-toggle {
    position: absolute !important;
    right: 20px !important;
    top: 14px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
  }

  /* Eyebrow: stack all three phrases vertically on mobile, hide diamond
     separators so each phrase gets its own clean line */
  .section.hero .h-eyebrow {
    font-size: 0.7rem !important;
    letter-spacing: 0.18em !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .section.hero .h-eyebrow .dot { display: none !important; }

  /* Same eyebrow treatment across ALL sections — stacked, no dots */
  .section .h-eyebrow,
  .section .s-eyebrow,
  .section .c-eyebrow {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.18em !important;
  }
  .section .h-eyebrow .dot,
  .section .s-eyebrow .dot,
  .section .c-eyebrow .dot { display: none !important; }

  /* "Your Story Matters Here" left-aligned to match the paragraph
     column. (Restyled 2026-09-24 from UI-caps to Allura mixed case.) */
  .section.hero .h-caption {
    text-align: left !important;
    align-self: flex-start !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
  }

  /* Icon row: tighter gap + smaller labels so all three fit */
  .section.hero .h-icons {
    gap: 10px !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }
  .section.hero .h-icons .label {
    font-size: 8.5px !important;
    min-width: 0 !important;
    letter-spacing: 0.1em !important;
  }
  .section.hero .h-icons svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* MY STORY: bg image behind, cream gradient overlay, text stacks on
     top. Section auto-heights to its content (no 100vh) so the gap
     between "NOT PERFECT. JUST REAL." and the next heading stays tight. */
  .section.story {
    background-image: url('/assets/story-bg.webp?v=50597f737b71') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 36px 20px 24px !important;
    min-height: 0 !important;
    margin-bottom: clamp(36px, 5vw, 50px) !important;
    aspect-ratio: auto !important;
    position: relative !important;
  }
  .section.story::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: none !important;
    background: linear-gradient(to bottom,
                                rgba(251,246,242,0.93) 0%,
                                rgba(251,246,242,0.85) 60%,
                                rgba(251,246,242,0.3) 100%) !important;
    z-index: 1 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  /* Bottom fade: soft 96px gradient into cream so the knit-blanket
     background doesn't slam against the next section's heading with
     a hard edge. */
  .section.story::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 96px !important;
    background: linear-gradient(to bottom,
                                rgba(251,246,242,0) 0%,
                                rgba(251,246,242,1) 100%) !important;
    background-image: linear-gradient(to bottom,
                                      rgba(251,246,242,0) 0%,
                                      rgba(251,246,242,1) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    aspect-ratio: auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  .section.story .layer {
    position: relative !important;
    z-index: 2 !important;
  }
  /* "NOT PERFECT. JUST REAL." — flanked, centered, readable */
  .section.story .s-flanked {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 24px auto 0 !important;
    width: 100% !important;
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--heading) !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }
  .section.story .s-flanked hr {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 1px !important;
    background: var(--gold-line) !important;
    border: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  .section.story .s-flanked span { white-space: nowrap !important; }

  /* THE BOOK on mobile — text-first stack:
       headline → script → body → 3D book image → Preorder button.
     Dropped the background-scene image + the massive margin-top hack
     under the button; instead the real <img class="b-image-mobile">
     lives inline in the layer between .b-body and .b-btn. */
  .section.book {
    background-image: none !important;
    background-color: #fbf6f2 !important;
    padding: 24px 20px 32px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    position: relative !important;
  }
  .section.book::before { display: none !important; }
  .section.book::after  { display: none !important; }
  .section.book .layer {
    position: relative !important;
    z-index: 2 !important;
  }
  .section.book .b-headline { margin-top: 0 !important; }
  .section.book .b-image-mobile {
    display: block !important;
    width: 75% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 24px auto 0 !important;
  }
  /* Preorder button — 24-32px below the book image, centered */
  .section.book .b-btn {
    width: 80% !important;
    max-width: 320px !important;
    margin: 28px auto 0 !important;
    display: flex !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Hero: LEFT-align every element to match the story section pattern.
     Icons row uses the same 20px gap + 26px svg + 10px labels as
     .section .s-icons so the three phrases sit in identical columns. */
  .section.hero .layer {
    text-align: left !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .section.hero .h-eyebrow {
    /* align-items: flex-start already set in the shared eyebrow rule
       above (line ~1282). Keeping just the positional properties. */
    justify-content: flex-start !important;
    align-self: flex-start !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
  /* WORK WITH DAWN button: centered within the hero column.
     Uses block-level flex + width:fit-content so margin-inline:auto
     actually centers it — inline-flex + auto margins does not. */
  .section.hero .h-btn {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    /* Top margin matches the desktop close→button rhythm (~50% of the
     old spacing). Negative to counteract the layer's 14px flex gap. */
    margin: -6px auto 0 !important;
    align-self: center !important;
    align-items: center !important;
  }
  /* "Your Story Matters Here" caption: centered below the button. */
  .section.hero .h-caption {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    align-self: center !important;
    padding-left: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  /* Icons: identical to story icons — 20px gap, wrap, 26px svgs, 10px labels */
  .section.hero .h-icons {
    gap: 20px !important;
    flex-wrap: wrap !important;
  }
  .section.hero .h-icons svg {
    width: 26px !important;
    height: 26px !important;
  }
  .section.hero .h-icons .label {
    font-size: 10px !important;
    min-width: 70px !important;
    letter-spacing: 0.18em !important;
  }

  /* Closing quote on About mobile — centered */
  .about-mobile-text .quote { text-align: center !important; }
}