/* ==========================================================================
   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'); }
.section.story::before   { background-image: url('/assets/story-bg.webp'); }
.section.book::before    { background-image: url('/assets/book-scene.webp'); }
/* .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 */
.section { margin-bottom: 80px; }
.section + .section { margin-top: 0; }
@media (max-width: 900px) {
  .section { margin-bottom: 40px; }
}

/* -------------------- 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;
}
.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 { text-align: center; }
.icon-tile svg { color: var(--gold-line); margin: 0 auto 0.6vw; display: block; }
.icon-tile .label {
  font-family: var(--font-ui);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--heading); font-weight: 600; line-height: 1.3;
}

/* -------------------- HERO (1672 x 811 after live header) -------------------- */
.section.hero {
  aspect-ratio: 1672 / 811;
}
.hero .layer { max-width: var(--w-wide); margin: 0 auto; position: relative; height: 100%; }

.hero .h-eyebrow {
  position: absolute; left: 7.66%; top: 9.01%;
  font-size: 0.84vw;
  background: transparent;
  padding: 0;
  color: var(--heading);
}
.hero .h-rule-diamond { position: absolute; left: 7.66%; top: 12.90%; display: flex; align-items: center; gap: 0.5vw; }
.hero .h-rule-diamond hr { width: 2.4vw; height: 1px; border: 0; background: var(--gold-line); margin: 0; }
.hero .h-rule-diamond .diamond { width: 0.45vw; height: 0.45vw; background: var(--gold-line); transform: rotate(45deg); }

.hero .h-headline {
  position: absolute; left: 7.66%; top: 16.6%;
  font-family: var(--font-display);
  color: var(--heading);
  font-size: 5.4vw;
  line-height: 0.98;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0;
}
.hero .h-script {
  position: absolute; left: 7.30%; top: 28%;
  font-family: var(--font-script);
  color: var(--crimson);
  font-size: 6.5vw;
  line-height: 1;
  white-space: nowrap;
}

.hero .h-body {
  position: absolute; left: 8.19%; top: 46%;
  width: 32%;
  font-size: 1.1vw;
  line-height: 1.6;
  color: var(--body);
}

.hero .h-icons {
  position: absolute;
  left: 13.04%;              /* aligned with .h-btn */
  width: 21.95%;             /* same width as .h-btn */
  top: calc(65% + 40px);
  display: flex;
  justify-content: center;
  gap: 2.6vw;
}
.hero .h-icons svg { width: 1.9vw; height: 1.9vw; min-width: 22px; min-height: 22px; }
.hero .h-icons .label { font-size: 0.68vw; min-width: 5.5vw; text-align: center; }

.hero .h-btn {
  position: absolute; left: 13.04%; top: calc(79.97% + 40px);
  width: 21.95%;
  height: 8.76%;
  font-size: 0.9vw;
  padding: 0;
}

.hero .h-caption {
  position: absolute; left: 24.02%; top: calc(92.5% + 40px);
  transform: translateX(-50%);
  font-family: var(--font-ui);
  color: var(--body);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78vw;
  text-align: center;
  white-space: nowrap;
  background: transparent;
}
.hero .h-caption hr { width: 2.4vw; height: 1px; border: 0; background: var(--gold-line); margin: 0; }

/* -------------------- MY STORY (1672 x 941) -------------------- */
.section.story {
  aspect-ratio: 1672 / 941;
}
.story .layer { max-width: var(--w-wide); margin: 0 auto; position: relative; height: 100%; }

.story .s-eyebrow { position: absolute; left: 6.34%; top: 7.65%; font-size: 0.84vw; }
.story .s-headline {
  position: absolute; left: 6.46%; top: 12.75%;
  font-family: var(--font-display);
  color: var(--heading);
  font-size: 4.4vw;
  line-height: 1.03;
  font-weight: 500;
  margin: 0;
  max-width: 40%;
}
.story .s-script {
  position: absolute; left: 6.34%; top: 30.5%;
  font-family: var(--font-script);
  color: var(--crimson);
  font-size: 5vw;
  line-height: 1;
  white-space: nowrap;
}
.story .s-body {
  position: absolute; left: 6.34%; top: 46%;
  width: 40%;
  font-size: 1.05vw;
  line-height: 1.62;
}
.story .s-body p + p { margin-top: 0.9vw; }
.story .s-icons {
  position: absolute; left: 22.5%; top: 77.05%;
  transform: translateX(-50%);
  display: flex; justify-content: center; gap: 2.6vw;
  text-align: center;
}
.story .s-icons svg { width: 1.8vw; height: 1.8vw; min-width: 22px; min-height: 22px; }
.story .s-icons .label { font-size: 0.68vw; min-width: 6vw; text-align: center; }
.story .s-flanked {
  position: absolute; left: 22.5%; top: 93.20%;
  transform: translateX(-50%);
  font-size: 0.78vw;
}

/* -------------------- THE BOOK (1448 x 1086) -------------------- */
.section.book {
  aspect-ratio: 1448 / 1086;
}
.book .layer { max-width: var(--w-wide); margin: 0 auto; position: relative; height: 100%; }

.book .b-headline {
  position: absolute; left: 6.16%; top: 9.56%;
  font-family: var(--font-display);
  color: var(--heading);
  font-size: 4.4vw;
  line-height: 1.03;
  font-weight: 500;
  margin: 0;
  max-width: 40%;
}
.book .b-script {
  position: absolute; left: 6.16%; top: 27%;
  font-family: var(--font-script);
  color: var(--crimson);
  font-size: 4.4vw;
  line-height: 1.02;
  max-width: 42%;
}
.book .b-body {
  position: absolute; left: 6.22%; top: 47%;
  width: 34%;
  font-size: 1.05vw;
  line-height: 1.62;
}
.book .b-body p + p { margin-top: 0.9vw; }
.book .b-btn {
  position: absolute; left: 8.79%; top: calc(80% + 48px);
  width: 26.68%;
  height: 7.33%;
  font-size: 0.9vw;
  padding: 0;
}
.book .b-preorder {
  position: absolute; left: 22.13%; top: calc(90.44% + 48px);
  transform: translateX(-50%);
  font-size: 0.78vw;
  color: var(--body);
  background: transparent;
  text-align: center;
}
.book .b-italic {
  position: absolute; left: 22.13%; top: calc(93.5% + 48px);
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--body);
  font-size: 0.95vw;
  background: transparent;
  text-align: center;
  white-space: nowrap;
}

/* -------------------- 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 {
  position: relative;
  width: 100%;
  aspect-ratio: 1671 / 650;
  background-image: url('/assets/connect-bg.webp');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
}

.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;
}
.footer-bar .wrap {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 clamp(20px, 2.4vw, 40px);
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 32px;
  align-items: center;
}
.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-tag {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,245,238,0.9);
  font-weight: 600;
  text-align: center;
  line-height: 1.7;
}
.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; }
.footer-cta {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.45);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  min-height: 44px;
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.footer-cta:hover, .footer-cta:focus-visible { background: #fff; color: var(--rose); }

.footer-ig {
  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 { width: 22px; height: 22px; }
.footer-ig:hover, .footer-ig: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 (1024 x 1536 poster) -------------------- */
.about-page { background: #fbfbfb; min-height: 100vh; }
.about-wrap {
  max-width: 1024px; margin: 0 auto;
  padding: 24px clamp(20px, 3vw, 48px) 60px;
}
.about-poster {
  position: relative;
  aspect-ratio: 1024 / 1536;
  width: 100%;
  background-image: url('/assets/about-poster.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Right-panel text zone: paper area starts around 55%, ends around 95%.
   Center for centered elements: 75% of poster width. */
.about-poster .a-heading {
  position: absolute; left: 80%; top: 8%;
  transform: translateX(-50%);
  font-family: var(--font-script);
  color: var(--crimson);
  font-size: 6.4vw;
  line-height: 1;
  font-weight: 400;
  margin: 0;
  white-space: nowrap;
  text-align: center;
}
.about-poster .a-heart-top {
  position: absolute; left: 80%; top: 17%;
  transform: translateX(-50%);
  color: var(--rose);
  font-size: 1.6vw;
  line-height: 1;
}
.about-poster .a-tagline {
  position: absolute; left: 80%; top: 20%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  color: var(--body);
  font-size: 1vw;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}
.about-poster .a-tagline .sep { color: var(--gold-line); margin: 0 0.6vw; }
.about-poster .a-body {
  position: absolute; left: 80%; top: 23.5%;
  transform: translateX(-50%);
  width: 38%;
  font-size: 0.95vw;
  line-height: 1.6;
  color: #45375f;
  text-align: left;
}
.about-poster .a-body p { margin: 0 0 0.75vw; }
.about-poster .a-body p:last-child { margin-bottom: 0; }
/* Divider + quote + heart + button flow naturally after the last body
   paragraph inside .a-body — no absolute positioning. */
.about-poster .a-divider {
  display: block;
  width: 80px;
  height: 1px;
  background: #c9a56b;
  border: 0;
  margin: 40px auto;
}
.about-poster .a-quote {
  font-family: 'Hurricane', var(--font-script);
  font-style: italic;
  color: var(--plum, #46283f);
  font-size: 1.6vw;
  line-height: 1.35;
  text-align: center;
  margin: 0 auto;
  max-width: 90%;
}
.about-poster .a-heart-bot {
  display: block;
  color: var(--rose);
  font-size: 1.6vw;
  line-height: 1;
  text-align: center;
  margin: 20px 0;
}
.about-poster .a-btn {
  display: inline-flex;
  margin: 8px auto 0;
  font-size: 13px;
  padding: 16px 32px;
  min-height: 52px;
  min-width: 280px;
  white-space: nowrap;
  justify-content: center;
  text-align: center;
}
/* Center the button by making its container center-align its inline children */
.about-poster .a-body { text-align: left; }
.about-poster .a-body .a-btn { align-self: center; }
.about-poster .a-body { display: flex; flex-direction: column; align-items: stretch; }
.about-poster .a-body > p { align-self: stretch; }
.about-poster .a-body > .a-quote,
.about-poster .a-body > .a-heart-bot,
.about-poster .a-body > .a-btn,
.about-poster .a-body > .a-divider { align-self: center; }

@media (max-width: 900px) {
  .about-poster .a-btn { display: none; }
}
.about-poster .a-band {
  position: absolute; left: 50%; top: 95.5%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  color: var(--plum);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 1vw;
  white-space: nowrap;
  font-weight: 500;
  text-align: center;
}
.about-poster .a-band .sep { color: var(--gold-line); margin: 0 0.6vw; }

/* -------------------- 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; }
.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;
}
.subpage .buy-row { margin: 26px 0 12px; }
.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,
  .section .h-caption { font-size: 11px; }
  .section .h-icons, .section .s-icons { flex-wrap: wrap; gap: 20px; }
  .section .h-icons svg, .section .s-icons svg { width: 26px; height: 26px; }
  .section .h-icons .label, .section .s-icons .label { font-size: 10px; min-width: 70px; }
  .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');  aspect-ratio: 1672 / 941; }
  .section.book::after   { background-image: url('/assets/book-scene.webp'); 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') !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; }
  .about-mobile-text .quote {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--heading);
    font-size: 20px;
    line-height: 1.35;
    margin: 26px 0 8px;
    padding-top: 22px;
    border-top: 1px solid var(--gold-line);
  }
  /* 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-bar .wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; }
  .footer-nav { flex-wrap: wrap; justify-content: center; }
  /* Center the footer brand (logo + tagline) on mobile.
     Base rule sets align-items: flex-start which left-aligns the two
     child spans inside the flex column even though the parent grid
     centers the block itself. */
  .footer-brand {
    align-items: center !important;
    text-align: center;
    margin: 0 auto;
  }
  .footer-brand .brand-mark,
  .footer-brand .brand-tag { text-align: 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') !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: 0 !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 */
  .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') !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: 0 !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,
  .section.hero .h-icons {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !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;
    margin: 16px 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; }
}