/* ═══════════════════════════════════════════════════════════════
   RADIANT LIFE — v6

   The design system is Kaila's own photography and nothing else:
   golden-hour high Sierra, honey backlight, meadow and granite and
   river, white cotton and light denim, mala beads, barefoot.

   v6 changes the one thing v5 got structurally wrong. v5 was ten
   dark scenes and two light ones, which read as a dark site with two
   pale sections — and her brief asks for light and etheric.

   Now light and dark carry the story. Dark is where she still is:
   the problem, the descent, the stakes, the ask. Light is where
   understanding arrives: the mechanism, the gold, the reclamation,
   the after. The page opens up as she does.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette. Specified in RADIANTLIFE BRAND FOUNDATION.docx,
        Part Six: "Deep teal (#25646d, #1f5057), warm gold (#b9a566,
        #c8b571). Cream backgrounds. No black anywhere."
        Everything below is either her hex verbatim, or derived from one
        of hers by scaling luminance only, so the hue never drifts. ── */

  /* light ground */
  --cream:  #FBF6EE;
  --cream2: #F3EADB;
  --hair:   #E2D6C1;

  /* type on dark imagery */
  --on-d:   #FCF7EE;
  --on-d-2: #F4EEE2;

  /* the scrim tone: warm near-neutral, washes rather than stains */
  --u: 44, 38, 34;

  /* HER TEAL, verbatim. Hue 187.5. Earlier builds guessed 193/197/203
     and she called every one of them wrong; this is from the brand doc,
     so it does not get re-picked by adjective again. */
  --teal:   #25646d;   /* 6.3:1 on cream */
  --teal-d: #1f5057;   /* 8.3:1 on cream. Hover, and deep headlines. */

  /* HER GOLD, verbatim. Beautiful, and far too light for small text:
     #b9a566 measures 2.3:1 on cream and #c8b571 measures 1.9:1. So the
     rule is gold-on-dark and gold-as-ornament only... */
  --gold:   #b9a566;   /* 6.1:1 on the umber scrim. Ornament on cream. */
  --gold-l: #c8b571;   /* 7.3:1 on the umber scrim */

  /* ...and small gold text on a LIGHT ground uses this, her #b9a566
     scaled to 0.64 luminance. Hue 45.3, unchanged. 5.1:1 on cream. */
  --gold-t: #766941;

  /* No black anywhere. Body copy is a warm brown at hue 30. */
  --ink:    #3E362E;   /* 11.0:1 on cream */
  --ink-2:  #5A5147;   /* 7.3:1 on cream */

  /* Marcellus for headlines, Raleway for body. Specified in the brand
     doc, Part Six. Both self-hosted in fonts/. */
  --disp: "Marcellus", ui-serif, Georgia, serif;
  --f:    "Raleway", ui-sans-serif, system-ui, sans-serif;

  /* Retired names, kept as aliases so every existing rule resolves to
     her palette instead of the guessed one. --sand was #E7BE7C, --honey
     was #C79245, --gold-d was #6B5220. All three now point at her hexes. */
  --sand:   var(--gold-l);   /* small type on the umber scrim, 7.3:1 */
  --honey:  var(--gold);     /* rules, dots, ornament */
  --gold-d: var(--gold-t);   /* small type on a light ground, 5.1:1 */

  --pad:  clamp(1.5rem, 5vw, 6.5rem);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --max:  1320px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--f); font-weight: 300;
  font-size: clamp(1.03rem, .99rem + .22vw, 1.13rem);
  line-height: 1.7; color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
picture { display: contents; }
/* display:contents promotes <source> to a grid item, which was creating a
   phantom ~103px first row in every .scene and pushing the text block off
   centre. <source> never renders anything, so take it out of flow. */
source { display: none; }
a { color: inherit; }
::selection { background: rgba(199,146,69,.28); }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }
.on-light :focus-visible, .chapter :focus-visible, .scene--light :focus-visible { outline-color: var(--teal); }

.skip { position: absolute; left: -9999px; z-index: 200; background: var(--teal); color: #fff; padding: .75rem 1.25rem; text-decoration: none; }
.skip:focus { left: 1rem; top: 1rem; }

/* ── type ───────────────────────────────────────────────────── */
/* cream, not sand: once the scrims were lightened, a mid gold at 11px
   measured as low as 2.6:1 on the brighter frames. The gold accent still
   carries in .closer, the phase numerals and the rules. */
.eyebrow {
  font-size: .71rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--on-d); margin-bottom: 1.25rem;
  text-shadow: 0 1px 12px rgba(var(--u), .55);
}
/* Poppins at 200 for the largest sizes, 300 below. A geometric sans has a
   tall x-height, so it needs slightly negative tracking and generous
   leading to stay elegant rather than chunky. */
/* The hero is one statement and one question, not three equal lines.
   The size drop between them is what makes it read as editorial rather
   than as a wall of display type. */
.h1 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 4.35rem);
  line-height: 1.13; letter-spacing: -0.012em;
  color: var(--on-d); margin-bottom: 1.9rem;
  text-shadow: 0 1px 26px rgba(var(--u), .30);
}
.h1__a { display: block; text-wrap: balance; }
.h1__b {
  display: block; margin-top: .42em;
  font-size: .46em; font-weight: 300;
  line-height: 1.25; letter-spacing: -0.006em;
  color: var(--on-d-2);
}
/* one line from the breakpoint up — below it, let it wrap naturally */
@media (min-width: 900px) { .h1__b { white-space: nowrap; } }
.h2 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.95rem, 3.6vw, 3rem);
  line-height: 1.2; letter-spacing: -0.009em;
  color: var(--on-d); margin-bottom: 1.5rem;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(var(--u), .26);
}
.lede {
  font-size: clamp(1.08rem, 1.3vw, 1.26rem);
  line-height: 1.66; color: var(--on-d-2);
  max-width: 40ch; margin-bottom: 1.6rem;
}
.body { color: var(--on-d-2); max-width: 40ch; margin-bottom: 1.05rem; }
.plain {
  font-weight: 400; color: var(--on-d);
  max-width: 38ch; margin-bottom: 2.1rem;
  padding-left: 1.1rem; border-left: 2px solid var(--sand);
}
.closer {
  font-weight: 400; color: var(--sand);
  font-size: clamp(1.1rem, 1.45vw, 1.34rem);
  line-height: 1.5; max-width: 36ch; margin-top: 1.7rem;
}
.closer em { font-style: normal; font-weight: 500; }
/* full-opacity cream + its own lift: this line sits low in the hero
   where the veil is thinnest, and at .90 alpha it measured 3.69:1. */
.fine {
  margin-top: 1.1rem; font-size: .84rem; letter-spacing: .07em;
  color: var(--on-d); text-shadow: 0 1px 14px rgba(var(--u), .72);
}

.pull {
  margin-top: 1.9rem; padding: .3rem 0 .3rem 1.4rem;
  border-left: 2px solid var(--sand);
  font-family: var(--disp);
  font-size: clamp(1.24rem, 2vw, 1.7rem);
  line-height: 1.34; color: var(--on-d);
  max-width: 22ch;
}
.pull--sm { font-family: var(--f); font-size: clamp(1.04rem, 1.3vw, 1.18rem); max-width: 32ch; line-height: 1.5; }

/* ── CTA — cream pill, teal word. Highest contrast thing on the page. ── */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f); font-weight: 500;
  font-size: .85rem; letter-spacing: .11em;
  color: var(--teal); background: var(--cream);
  padding: 1.15rem 2.6rem; min-height: 56px;
  border: 0; border-radius: 999px; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 34px rgba(var(--u), .28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 8px 44px rgba(var(--u), .34); }
.cta:active { transform: translateY(0); }
.cta--solid { background: var(--teal); color: #fff; box-shadow: 0 3px 22px rgba(var(--u), .18); }
.chapter .cta, .scene--light .cta { background: var(--teal); color: #fff; }

/* ── bar ────────────────────────────────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.15rem var(--pad);
  color: var(--on-d);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--u), .42) 0%, rgba(var(--u), 0) 100%);
  transition: opacity .35s var(--ease);
}
.bar.is-stuck {
  background: rgba(251,246,238,.92);
  box-shadow: 0 1px 0 var(--hair);
  color: var(--ink);
}
.bar.is-stuck::before { opacity: 0; }
.bar__mark { font-family: var(--disp); font-size: 1.18rem; text-decoration: none; letter-spacing: .01em; color: inherit; }
.bar__nav a { font-size: .87rem; color: inherit; opacity: .88; text-decoration: none; transition: opacity .2s var(--ease); }
.bar__nav a:hover { opacity: 1; }
.bar__cta {
  font-size: .78rem; font-weight: 500; letter-spacing: .09em;
  color: var(--teal); background: var(--cream); border-radius: 999px;
  padding: .74rem 1.55rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 16px rgba(var(--u), .2);
  transition: transform .2s var(--ease);
}
.bar__cta:hover { transform: translateY(-1px); }

/* burger — only below the nav breakpoint */
.bar__burger {
  margin-left: auto; width: 42px; height: 42px; flex: none;
  display: grid; align-content: center; justify-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.bar__burger span {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.bar__burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.bar__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 899px) {
  .bar { gap: 1rem; }
  .bar__nav {
    position: fixed; inset: 62px 0 auto 0; z-index: 99;
    display: grid; gap: .25rem;
    padding: 1rem var(--pad) 1.5rem;
    background: rgba(251,246,238,.97);
    box-shadow: 0 12px 40px rgba(var(--u), .2);
    color: var(--ink);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s;
  }
  .bar__nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .bar__nav a { color: var(--ink); opacity: 1; font-size: 1.02rem; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
  .bar__nav a:last-child { border-bottom: 0; }
  .bar__cta { display: none; }
}
@media (min-width: 900px) {
  .bar__burger { display: none; }
  .bar__nav { display: flex; margin-left: auto; gap: 2.3rem; }
}

/* ═══════════════════════════════════════════════════════════════
   THE SCENE — the primitive the photographic sections are built from
   ═══════════════════════════════════════════════════════════════ */
.scene {
  position: relative; isolation: isolate;
  min-height: min(94svh, 900px);
  display: grid; align-items: center;
  padding-block: clamp(7rem, 12vw, 10rem);
  padding-inline: max(var(--pad), calc((100% - var(--max)) / 2));
  background: #2A1D12;
}
.scene--tall  { min-height: 100svh; align-items: end; }
.scene--phase { min-height: min(82svh, 780px); }
.scene--light { background: var(--cream); }

.scene__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Per-scene framing. Several of these sources are 2:3 portraits dropped
   into wide sections, so cover() crops top and bottom — centred, that
   takes her head off. Y is biased upward on every portrait source. */
#top     .scene__img { transform: scaleX(-1); object-position: 50% 46%; }
#reason  .scene__img { object-position: 50% 18%; }   /* portrait */
#gold    .scene__img { object-position: 62% 50%; }
#descent .scene__img { object-position: 50% 50%; }
#stakes  .scene__img { object-position: 50% 46%; }
#work    .scene__img { object-position: 50% 52%; }
#join    .scene__img { object-position: 34% 62%; }
.scene__veil { position: absolute; inset: 0; z-index: -1; }

/* Directional umber on the text side only — the photograph keeps its
   full richness on the other side. Plus a top/bottom feather so each
   scene dissolves into the next. */
/* One recipe for every dark panel — the hero's. A diagonal falloff plus a
   bottom lift reads as light leaving the frame, where a straight
   side-to-side wash reads as a brown panel laid on top of a photograph.
   Mirrored for right-aligned scenes. */
.scene--l .scene__veil {
  background:
    linear-gradient(78deg,  rgba(var(--u),.70) 0%,  rgba(var(--u),.62) 22%,
                            rgba(var(--u),.50) 40%, rgba(var(--u),.35) 56%,
                            rgba(var(--u),.20) 70%, rgba(var(--u),.08) 84%,
                            rgba(var(--u),0) 96%),
    linear-gradient(0deg,   rgba(var(--u),.52) 0%,  rgba(var(--u),.30) 20%,
                            rgba(var(--u),.10) 40%, rgba(var(--u),0) 62%),
    linear-gradient(180deg, rgba(var(--u),.32) 0%,  rgba(var(--u),0) 22%);
}
.scene--r .scene__veil {
  background:
    linear-gradient(282deg, rgba(var(--u),.70) 0%,  rgba(var(--u),.62) 22%,
                            rgba(var(--u),.50) 40%, rgba(var(--u),.35) 56%,
                            rgba(var(--u),.20) 70%, rgba(var(--u),.08) 84%,
                            rgba(var(--u),0) 96%),
    linear-gradient(0deg,   rgba(var(--u),.52) 0%,  rgba(var(--u),.30) 20%,
                            rgba(var(--u),.10) 40%, rgba(var(--u),0) 62%),
    linear-gradient(180deg, rgba(var(--u),.32) 0%,  rgba(var(--u),0) 22%);
}
.scene--tallish { min-height: min(92svh, 880px); }

/* hero — the type sits low, so the lift is bottom-weighted and the
   bottom stop is deliberately heavy: the fine print lives down there. */
.scene--hero .scene__veil {
  background:
    linear-gradient(78deg,  rgba(var(--u),.70) 0%,  rgba(var(--u),.62) 22%,
                            rgba(var(--u),.50) 40%, rgba(var(--u),.35) 56%,
                            rgba(var(--u),.20) 70%, rgba(var(--u),.08) 84%,
                            rgba(var(--u),0) 96%),
    linear-gradient(0deg,   rgba(var(--u),.76) 0%,  rgba(var(--u),.60) 16%,
                            rgba(var(--u),.36) 34%, rgba(var(--u),.14) 52%,
                            rgba(var(--u),0) 74%),
    linear-gradient(180deg, rgba(var(--u),.34) 0%,  rgba(var(--u),0) 22%);
}

.scene__box { position: relative; width: min(38rem, 100%); }
.scene--l .scene__box { justify-self: start; }
.scene--r .scene__box { justify-self: end; }

/* The plate. The directional veils alone leave legibility at the mercy
   of wherever the photograph happens to be bright — small type at the
   outer edge of a box measured as low as 1.1:1. This is a soft, feathered
   floor of coverage anchored to the text itself, so contrast holds
   whatever is underneath. Type still sits gently on the image; it just
   no longer depends on luck. */
.scene__box::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* deliberately far larger than the text: a background gradient is
     clipped by its own box, so the falloff has to finish well inside
     these bounds or the clip shows as a hard rectangular edge. */
  inset: -14rem -16rem;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--u), .56) 0%,  rgba(var(--u), .54) 40%, rgba(var(--u), .47) 58%,
    rgba(var(--u), .33) 72%, rgba(var(--u), .17) 84%, rgba(var(--u), .05) 93%,
    rgba(var(--u), 0) 100%);
}
.scene--light .scene__box::before {
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(251,246,238, .88) 0%,  rgba(251,246,238, .86) 40%, rgba(251,246,238, .76) 58%,
    rgba(251,246,238, .54) 72%, rgba(251,246,238, .30) 84%, rgba(251,246,238, .10) 93%,
    rgba(251,246,238, 0) 100%);
}

/* ── LIGHT SCENE — cream scrim instead of umber ─────────────── */
.scene--light .scene__veil {
  background:
    linear-gradient(90deg,  rgba(251,246,238,.975) 0%, rgba(251,246,238,.94) 30%,
                            rgba(251,246,238,.60) 56%, rgba(251,246,238,.14) 78%,
                            rgba(251,246,238,0)    92%),
    linear-gradient(180deg, rgba(var(--u),.30) 0%, rgba(var(--u),0) 15%,
                            rgba(var(--u),0) 85%, rgba(var(--u),.30) 100%);
}
.scene--r.scene--light .scene__veil {
  background:
    linear-gradient(270deg, rgba(251,246,238,.975) 0%, rgba(251,246,238,.94) 30%,
                            rgba(251,246,238,.60) 56%, rgba(251,246,238,.14) 78%,
                            rgba(251,246,238,0)    92%),
    linear-gradient(180deg, rgba(var(--u),.30) 0%, rgba(var(--u),0) 15%,
                            rgba(var(--u),0) 85%, rgba(var(--u),.30) 100%);
}
.scene--light .h1, .scene--light .h2 { color: var(--teal); text-shadow: none; }
.scene--light .eyebrow { color: var(--gold-d); }
.scene--light .phase__n small { color: var(--gold-d); }
.scene--light .body, .scene--light .lede { color: var(--ink-2); }
.scene--light .closer { color: var(--teal); }
.scene--light .fine { color: var(--ink-2); text-shadow: none; }
.scene--light .plain { color: var(--ink); border-left-color: var(--honey); }
.scene--light .pull { color: var(--ink); border-left-color: var(--honey); }
.scene--light .phase__n { color: var(--gold); }   /* honey measured ~1.6:1 on the cream plate */
.scene--light .ticks li { color: var(--ink); border-color: rgba(34,30,25,.14); }
.scene--light .ticks li::before { background: var(--honey); }
.scene--light .days dt { color: var(--gold); }
.scene--light .days dd { color: var(--ink-2); }
.scene--light .days > div { border-color: rgba(34,30,25,.14); }

#top .scene__box { width: min(47rem, 100%); }
#top .h1 { max-width: none; }
#kaila .scene__box { width: min(33rem, 100%); }
#kaila .body, #kaila .lede { max-width: 34ch; }
.ticks { max-width: 31rem; }

/* seam-killer: the join between two scenes gets a soft crossfade */
.scene + .scene::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: 7rem; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--u),.34) 0%, rgba(var(--u),0) 100%);
  pointer-events: none;
}
.scene--light + .scene::before,
.scene + .scene--light::before { display: none; }

/* ── the symptom list ───────────────────────────────────────── */
.ticks { list-style: none; display: grid; gap: 0; margin: 2rem 0 0; }
.ticks li {
  position: relative; padding: .8rem 0 .8rem 1.75rem;
  border-bottom: 1px solid rgba(252,247,238,.20);
  font-size: 1.02rem; line-height: 1.55; color: var(--on-d);
}
.ticks li:first-child { border-top: 1px solid rgba(252,247,238,.20); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.4rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sand);
}

/* ── the weekly rhythm ──────────────────────────────────────── */
.days { display: grid; gap: 0; margin: 2rem 0 0; }
.days > div {
  display: grid; grid-template-columns: 7.6rem 1fr; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid rgba(252,247,238,.20);
}
.days > div:last-child { border-bottom: 1px solid rgba(252,247,238,.20); }
.days dt { font-family: var(--disp); font-size: 1.08rem; color: var(--sand); }
.days dd { color: var(--on-d-2); font-size: .99rem; line-height: 1.6; }
@media (max-width: 460px) { .days > div { grid-template-columns: 1fr; gap: .2rem; } }

/* ── the four phases ────────────────────────────────────────── */
.phase__n {
  display: block; font-family: var(--disp); line-height: .9;
  font-size: clamp(3rem, 6vw, 5.4rem);
  color: var(--sand); opacity: .96; margin-bottom: 1rem;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.phase__n small {
  display: block; margin-top: .85rem;
  font-size: .135em; letter-spacing: .26em; text-transform: uppercase;
  font-family: var(--f); font-weight: 500; opacity: .95;
}

/* ── progressive disclosure — the substance, for whoever wants it ── */
.more { margin-top: 1.4rem; max-width: 42ch; }
.more summary {
  cursor: pointer; list-style: none;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; color: var(--sand);
  padding: .55rem 0; border-top: 1px solid rgba(252,247,238,.22);
  display: flex; align-items: center; gap: .6rem;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.more p { color: var(--on-d-2); font-size: .97rem; margin: .6rem 0 0; }
.scene--light .more summary { color: var(--gold-d); border-color: rgba(34,30,25,.16); }
.scene--light .more p { color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════
   THE INSET — contained section: a bounded image beside the text.

   The counterweight to the full-bleed scenes. The page alternates
   between the two so it never runs two of the same shape together,
   and a portrait of Kaila reads as a portrait rather than a billboard.

   No scrim and no plate here — type sits on flat ground, so contrast
   is exact instead of negotiated against whatever the photograph is
   doing underneath.
   ═══════════════════════════════════════════════════════════════ */
.inset {
  padding: clamp(4.5rem, 10vw, 8.5rem) var(--pad);
  background: var(--cream); color: var(--ink);
}
.inset--dark { background: #241A11; color: var(--on-d); }
.inset__in {
  width: min(var(--max), 100%); margin-inline: auto;
  display: grid; gap: clamp(4.4rem, 10vw, 9rem); align-items: center;
}
@media (min-width: 900px) {
  .inset__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the guide portrait sits a little smaller than the copy beside it */
  .inset__in--portrait { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
  .inset--flip .inset__fig { order: 2; }
}
.inset__fig { margin: 0; position: relative; }
/* Softened corners and a wide, very faint shadow. This overrides the P4
   token note ("radius 0 on section imagery") on the client's direction —
   her brief says "no real hard edges" twice, so the brief wins. Kept
   small and diffuse: it should read as air under the photograph, not as
   a card. */
.inset__fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 14px;
  box-shadow:
    0 28px 80px -24px rgba(var(--u), .30),
    0 6px 24px -12px rgba(var(--u), .14);
}
#problem .inset__fig img { object-position: 50% 26%; }
#method  .inset__fig img { object-position: 50% 42%; }
#after   .inset__fig img { object-position: 50% 30%; }
#kaila   .inset__fig img { object-position: 50% 38%; }
.inset__text { max-width: 34rem; }
.inset__text > :last-child { margin-bottom: 0; }

.inset--light .h1, .inset--light .h2 { color: var(--teal); text-shadow: none; }
.inset--light .eyebrow { color: var(--gold-d); }
.inset--light .body, .inset--light .lede { color: var(--ink-2); }
.inset--light .closer { color: var(--teal); }
.inset--light .plain { color: var(--ink); border-left-color: var(--honey); }
.inset--light .pull { color: var(--ink); border-left-color: var(--honey); }
.inset--light .phase__n { color: var(--gold); }
.inset--light .phase__n small { color: var(--gold-d); }
.inset--light .ticks li { color: var(--ink); border-color: rgba(34,30,25,.14); }
.inset--light .ticks li::before { background: var(--honey); }
.inset--light .more summary { color: var(--gold-d); border-color: rgba(34,30,25,.16); }
.inset--light .more p { color: var(--ink-2); }
.inset--light .cta { background: var(--teal); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   THE CHAPTER — light, typographic, no photograph.
   These are the places where understanding arrives; they are meant
   to feel like a held breath after a scene.
   ═══════════════════════════════════════════════════════════════ */
.chapter {
  background: var(--cream);
  padding: clamp(5.5rem, 12vw, 10rem) var(--pad);
  color: var(--ink);
}
.chapter--book { background: var(--cream2); }
.chapter--dark { background: #241A11; color: var(--on-d); }
.chapter__in { width: min(var(--max), 100%); margin-inline: auto; }
.chapter__in--narrow { width: min(46rem, 100%); }
.chapter__head { max-width: 46rem; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
/* gold-d, not gold: chapter--book sits on --cream2, where --gold
   measures 4.18:1 — under the 4.5 needed for text this size. */
.chapter .eyebrow { color: var(--gold-d); }
.chapter .h2 { color: var(--teal); text-shadow: none; }
.chapter .lede { color: var(--ink-2); max-width: 44ch; }
.chapter__closer {
  font-weight: 400; color: var(--teal);
  font-size: clamp(1.1rem, 1.5vw, 1.36rem); line-height: 1.5;
  max-width: 44ch; margin-top: clamp(2rem, 4vw, 3rem);
}
.chapter__closer strong { font-weight: 500; }
.chapter__note {
  margin-top: 1.1rem; font-size: .88rem; color: var(--ink-2);
  max-width: 44ch; opacity: .85;
}
/* The proof slot. v8 requires real member stories and one short film
   before launch, and says not to fabricate or over-polish participant
   language, so the slot ships empty. It still has to look deliberate
   rather than broken: three quiet frames holding the space, and a
   note set large enough to actually read. */
.proof__hold {
  display: grid; gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: clamp(2.6rem, 5vw, 3.6rem); text-align: left;
}
@media (min-width: 820px) { .proof__hold { grid-template-columns: repeat(3, 1fr); } }
.proof__hold li {
  list-style: none; padding: 1.6rem 1.5rem;
  border: 1px dashed rgba(37,100,109,.28); border-radius: 4px;
  background: rgba(37,100,109,.035);
  display: grid; gap: .45rem; align-content: start;
}
.proof__hold b {
  font-family: var(--f); font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-t);
}
.proof__hold span { color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.proof__note {
  margin: clamp(2.2rem, 4vw, 3rem) auto 0; max-width: 56ch;
  font-size: 1.02rem; line-height: 1.68; color: var(--ink-2);
}
.proof__note em { font-style: normal; font-weight: 500; color: var(--teal-d); }
.chapter--dark .eyebrow { color: var(--sand); }
.chapter--dark .h2 { color: var(--on-d); }
.chapter--dark .lede { color: var(--on-d-2); }
.chapter--dark .chapter__closer { color: var(--sand); }

/* ── the architecture — her layer model, drawn ──────────────── */
.arch { list-style: none; display: grid; gap: 0; max-width: 46rem; }
.arch__l {
  position: relative;
  display: grid; grid-template-columns: 3.4rem 1fr; align-items: baseline;
  gap: 1rem; padding: 1.05rem 0 1.05rem 0;
  border-top: 1px solid var(--hair);
}
.arch__l:last-child { border-bottom: 1px solid var(--hair); }
/* the spine that makes it read as one structure, not seven lines */
.arch__l::before {
  content: ""; position: absolute; left: 1.15rem; top: 0; bottom: 0;
  width: 1px; background: var(--hair);
}
.arch__l:first-child::before { top: 50%; }
.arch__l:last-child::before  { bottom: 50%; }
.arch__n {
  position: relative; z-index: 1;
  font-family: var(--f); font-weight: 500;
  font-size: .72rem; letter-spacing: .12em;
  /* --gold measures 2.26:1 on cream. At 12px that needs 4.5, so the
     layer numerals used the accent that fails rather than the one
     derived for exactly this job. --gold-t measures 5.04:1. */
  color: var(--gold-t); background: var(--cream);
  padding: .15rem 0; font-variant-numeric: tabular-nums;
}
.arch__t {
  font-family: var(--disp);
  font-size: clamp(1.16rem, 2.2vw, 1.62rem);
  line-height: 1.3; color: var(--ink);
}
.arch__t em { font-style: italic; color: var(--teal); }
/* the last layer is the one that hurts — give it weight */
.arch__l--end .arch__t { color: var(--teal); }

/* ── the gold seam — the single animated moment on the page ─── */
.seam {
  position: absolute; z-index: -1; pointer-events: none;
  left: 30%; top: -10%; width: 46%; height: 120%;
  background: linear-gradient(180deg,
    rgba(199,146,69,0) 0%, rgba(231,190,124,.55) 22%,
    rgba(255,226,163,.85) 50%, rgba(231,190,124,.55) 78%,
    rgba(199,146,69,0) 100%);
  clip-path: polygon(46% 0, 52% 0, 12% 100%, 6% 100%);
  filter: blur(7px);
  opacity: 0; transform: scaleX(.3);
  transform-origin: 50% 50%;
}
@media (max-width: 780px) { .seam { display: none; } }

/* ── for you / not for you ──────────────────────────────────── */
.fit { display: grid; gap: clamp(2rem, 4vw, 3.4rem); }
@media (min-width: 760px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__h {
  font-family: var(--f); font-weight: 500;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: .7rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--hair);
}
.fit__h--yes { color: var(--teal); }
.fit__h--no  { color: var(--gold); }
.fit__col ul { list-style: none; display: grid; gap: .85rem; }
.fit__col li {
  position: relative; padding-left: 1.5rem;
  color: var(--ink-2); font-size: 1rem; line-height: 1.55;
}
.fit__col li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--honey);
}

/* ── the details — plain on purpose ─────────────────────────── */
.tw { overflow-x: auto; }
.specs { display: grid; gap: 0; min-width: min(100%, 30rem); }
.specs > div {
  display: grid; grid-template-columns: 12rem 1fr; gap: 1.4rem;
  padding: 1.05rem 0; border-top: 1px solid var(--hair);
}
.specs > div:last-child { border-bottom: 1px solid var(--hair); }
.specs dt { font-family: var(--disp); font-size: 1.04rem; color: var(--teal); }
.specs dd { color: var(--ink-2); font-size: .99rem; line-height: 1.6; }
@media (max-width: 620px) { .specs > div { grid-template-columns: 1fr; gap: .25rem; } }

/* ── signup ─────────────────────────────────────────────────── */
.signup { margin-top: 1.9rem; max-width: 34rem; }
.signup--lg { margin-top: 2.1rem; }
/* cream, not sand: this label sits at the outer edge of the text box
   where the scrim is thinnest, and sand measured 1.27:1 there. */
.signup__l {
  display: block; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500;
  color: var(--on-d); margin-bottom: .6rem;
  text-shadow: 0 1px 12px rgba(var(--u), .6);
}
.chapter .signup__l { color: var(--gold-d); text-shadow: none; }
.signup__row { display: grid; gap: .7rem; }
@media (min-width: 620px) { .signup__row { grid-template-columns: 1fr auto; } }
.signup__i {
  font-family: var(--f); font-size: 1rem; font-weight: 300;
  color: var(--on-d); background: rgba(252,247,238,.10);
  border: 1px solid rgba(252,247,238,.42); border-radius: 999px;
  padding: 1.05rem 1.5rem; min-height: 56px; width: 100%;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.signup__i::placeholder { color: rgba(252,247,238,.62); }
.signup__i:hover { border-color: rgba(252,247,238,.62); }
.signup__i:focus { outline: 2px solid var(--sand); outline-offset: 2px; background: rgba(252,247,238,.16); }
.chapter .signup__i, .scene--light .signup__i, .foot .signup__i {
  color: var(--ink); background: rgba(255,255,255,.78);
  border-color: var(--hair);
}
.chapter .signup__i::placeholder,
.scene--light .signup__i::placeholder,
.foot .signup__i::placeholder { color: var(--ink-2); opacity: .75; }
.chapter .signup__i:focus, .scene--light .signup__i:focus, .foot .signup__i:focus {
  outline-color: var(--teal); background: #fff;
}
.scene--light .signup__l, .foot .signup__l { color: var(--gold-d); text-shadow: none; }
.scene--light .signup__msg, .foot .signup__msg { color: var(--ink-2); }
.scene--light .signup__msg[data-state="error"],
.foot .signup__msg[data-state="error"] { color: #9E3228; }
.scene--light .signup__msg[data-state="ok"],
.foot .signup__msg[data-state="ok"] { color: var(--teal); }
.foot .cta { background: var(--teal); color: #fff; }
.signup__i[aria-invalid="true"] { border-color: #E9A38F; }
.chapter .signup__i[aria-invalid="true"] { border-color: #B4503C; }
.signup__msg {
  margin-top: .85rem; font-size: .92rem; line-height: 1.5;
  color: var(--on-d-2); min-height: 1.4em;
}
.signup__msg:empty { margin-top: 0; min-height: 0; }
.chapter .signup__msg { color: var(--ink-2); }
.signup__msg[data-state="error"] { color: #F2B9A6; }
.chapter .signup__msg[data-state="error"] { color: #9E3228; }
.signup__msg[data-state="ok"] { color: var(--sand); }
.chapter .signup__msg[data-state="ok"] { color: var(--teal); }

/* ── quotes (scaffold — used when real member quotes land) ──── */
.quotes { display: grid; gap: clamp(2.6rem, 5vw, 3.6rem); }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
.quotes figure { position: relative; padding-top: 2.7rem; }
.quotes figure::before {
  content: "\201C"; position: absolute; top: -.7rem; left: -.2rem;
  font-family: var(--disp); font-size: 4.8rem; line-height: 1;
  color: var(--honey); opacity: .38;
}
.quotes blockquote {
  font-family: var(--disp); font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  line-height: 1.55; color: var(--ink); margin-bottom: 1.3rem;
}
.quotes figcaption { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.quotes figcaption span { display: block; margin-top: .2rem; color: var(--ink-2); letter-spacing: .06em; text-transform: none; font-size: .84rem; }

/* ── faq ────────────────────────────────────────────────────── */
.faq { display: grid; gap: 0; max-width: 52rem; }
.faq__i { border-top: 1px solid var(--hair); }
.faq__i:last-of-type { border-bottom: 1px solid var(--hair); }
.faq__i summary {
  cursor: pointer; list-style: none;
  display: flex; gap: 1.2rem; align-items: baseline; justify-content: space-between;
  padding: 1.15rem 0;
  font-family: var(--disp); font-size: clamp(1.04rem, 1.5vw, 1.2rem);
  line-height: 1.35; color: var(--teal);
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: .4em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.faq__i[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq__i p {
  color: var(--ink-2); font-size: .99rem; line-height: 1.68;
  max-width: 62ch; padding-bottom: 1.35rem; margin: 0;
}
.chapter__sub {
  font-family: var(--f); font-weight: 500;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-d);
  margin: clamp(3rem, 6vw, 4.5rem) 0 1.4rem;
}
/* .chapter__sub is a LABEL. Paragraphs inside a chapter use this.
   Using the label style for running copy set three whole sections in
   tiny tracked-out uppercase, which is unreadable at any length. */
.chapter__p {
  font-size: clamp(1.04rem, 1.2vw, 1.16rem);
  line-height: 1.72; color: var(--ink-2);
  max-width: 54ch; margin: 0 auto 1.15rem;
}
.chapter__p:last-of-type { margin-bottom: 0; }
.chapter__p em { font-style: normal; font-weight: 500; color: var(--ink); }

/* the book scene — keep the mockup in frame, it sits right of centre */
.scene--book { min-height: min(88svh, 840px); }
.scene--book .scene__img { object-position: 62% 50%; }


/* ── soft imagery inside a contained chapter ────────────────
   Every section carries a photograph now; the typographic ones get a
   very light frame on the right that dissolves before it reaches the
   copy, so nothing on the page is a flat empty panel. */
.chapter { position: relative; isolation: isolate; overflow: hidden; }
.chapter__in { position: relative; z-index: 1; }
.chapter__bg {
  position: absolute; inset: 0 0 0 auto; z-index: -1;
  width: min(80%, 1240px); height: 100%;
  /* the bg box is nearly square while the source is 16:9, so cover()
     crops hard horizontally — centred, it pushes her off the edge */
  object-fit: cover; object-position: 88% 42%;
  /* fades in earlier and reaches full opacity sooner than the first
     attempt, which was so masked it read as an empty panel */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 22%, rgba(0,0,0,.75) 46%, #000 66%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 22%, rgba(0,0,0,.75) 46%, #000 66%);
}
.chapter--dark .chapter__bg { opacity: .30; }
@media (max-width: 900px) { .chapter__bg { display: none; } }

/* ── two-up (private work) ──────────────────────────────────── */
.two { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem);
  margin: clamp(2.2rem, 4vw, 3.2rem) 0 clamp(2.2rem, 4vw, 3rem); }
@media (min-width: 720px) { .two { grid-template-columns: 1fr 1fr; } }
.two__h { font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.22rem, 2vw, 1.5rem); letter-spacing: -.012em;
  color: var(--on-d); margin-bottom: .55rem; }
.two__d { color: var(--on-d-2); font-size: .99rem; line-height: 1.62; max-width: 34ch; }

/* a quiet footnote under a primary CTA — secondary offers live here so
   they never compete with the one ask above them */
.aside { margin-top: 1.7rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(34,30,25,.16);
  font-size: .92rem; line-height: 1.6; color: var(--ink-2); max-width: 42ch; }
.scene--circle { min-height: min(90svh, 860px); }
.scene--circle .scene__img { object-position: 62% 46%; }

/* ── footer ─────────────────────────────────────────────────── */
.foot {
  background: var(--cream2); border-top: 1px solid var(--hair);
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad) clamp(2rem, 4vw, 3rem);
}
.foot__news {
  width: min(var(--max), 100%); margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  display: grid; gap: .5rem;
}
@media (min-width: 900px) {
  .foot__news { grid-template-columns: minmax(0,1fr) minmax(0,26rem); gap: .5rem clamp(2rem,5vw,5rem); align-items: start; }
  .foot__news .signup { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.foot__newsh { font-family: var(--disp); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.2; color: var(--teal); }
.foot__newsd { color: var(--ink-2); font-size: .97rem; max-width: 44ch; }
.signup--foot { max-width: 100%; }
.foot__bar {
  width: min(var(--max), 100%); margin-inline: auto;
  border-top: 1px solid var(--hair); padding-top: clamp(1.6rem, 3vw, 2.2rem);
  display: grid; gap: 1.1rem; justify-items: center; text-align: center;
}
@media (min-width: 820px) {
  .foot__bar { grid-template-columns: 1fr auto 1fr; align-items: baseline; }
  .foot__m { justify-self: start; }
  .foot__c { justify-self: end; }
}
.foot__m { font-family: var(--disp); font-size: 1.1rem; color: var(--ink); }
.foot__l { color: var(--gold-d); font-size: .96rem; font-family: var(--disp); }
.foot__c { font-size: .8rem; color: var(--ink-2); }

/* ── mobile — one column, the veil covers the whole frame ───── */
@media (max-width: 780px) {
  .scene { min-height: auto; padding-block: clamp(5rem, 15vw, 8rem); align-items: center; }
  .scene--tall { min-height: 94svh; align-items: end; }
  .scene__veil {
    background:
      linear-gradient(180deg, rgba(var(--u),.62) 0%, rgba(var(--u),.76) 22%,
                              rgba(var(--u),.76) 78%, rgba(var(--u),.62) 100%) !important;
  }
  .scene--light .scene__veil {
    background:
      linear-gradient(180deg, rgba(251,246,238,.90) 0%, rgba(251,246,238,.94) 20%,
                              rgba(251,246,238,.94) 80%, rgba(251,246,238,.90) 100%) !important;
  }
  .scene__box { width: 100%; justify-self: stretch; }
  .scene + .scene::before { display: none; }
  .cta { width: 100%; }
}

/* ═══ reveal on scroll — additive only.
   The hidden state is applied by JS (html.js), so if the script never
   runs, every word is on the page. Nothing is withheld from a reader. ═══ */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js .arch__l { opacity: 0; transform: translateY(10px); }
  .js .arch.is-in .arch__l {
    opacity: 1; transform: none;
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay: calc(var(--i) * 90ms);
  }
  .js .seam.is-in {
    opacity: .85; transform: scaleX(1);
    transition: opacity 1.6s var(--ease), transform 2.2s cubic-bezier(.2,.7,.3,1);
  }
}
/* with reduced motion the seam is simply present, not animated */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .seam { opacity: .7; transform: none; }
}

/* ── orientation band ────────────────────────────────────────
   Directly under the hero: the whole proposition in three beats, so a
   visitor knows what this is before she decides whether to keep going.
   Numbered because it is a sequence — problem, cause, way out. */
.band {
  background: var(--cream2); border-bottom: 1px solid var(--hair);
  padding: clamp(2.4rem, 5vw, 3.6rem) var(--pad);
}
.band__in {
  width: min(var(--max), 100%); margin-inline: auto;
  list-style: none; display: grid; gap: clamp(1.6rem, 3.5vw, 3rem);
  counter-reset: beat;
}
@media (min-width: 820px) { .band__in { grid-template-columns: repeat(3, 1fr); } }
.band__i { counter-increment: beat; position: relative; padding-top: 1.1rem; border-top: 1px solid var(--hair); }
.band__i::before {
  content: counter(beat, decimal-leading-zero);
  position: absolute; top: -.05rem; left: 0;
  font-family: var(--f); font-size: .62rem; font-weight: 500;
  letter-spacing: .14em; color: var(--gold-d);
}
.band__k {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); letter-spacing: -.01em;
  color: var(--teal); margin: .55rem 0 .45rem;
}
.band__d { color: var(--ink-2); font-size: .95rem; line-height: 1.6; max-width: 38ch; }

/* #work and #join sit on the brightest frames on the page, and #join's
   box grew taller when the three-step plan went in, which moved its
   eyebrow toward the weaker part of the plate. Both measured just under
   4.5, so these two scenes get a touch more cover rather than darkening
   the whole system for them. */
#work .scene__box::before,
#join .scene__box::before {
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--u), .66) 0%,  rgba(var(--u), .64) 40%, rgba(var(--u), .56) 58%,
    rgba(var(--u), .40) 72%, rgba(var(--u), .21) 84%, rgba(var(--u), .06) 93%,
    rgba(var(--u), 0) 100%);
}

/* ── soft CTA — a quiet ask mid-page so the long teaching run
   (mechanism → Buddha → four phases) isn't three explainers with
   nothing to do at the end of them. ─────────────────────────── */
.soft {
  margin-top: 1.9rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(34,30,25,.16);
  font-size: .96rem; line-height: 1.6; color: var(--ink-2); max-width: 42ch;
}
.soft a { color: var(--teal); font-weight: 400; text-underline-offset: .22em; }
.soft a:hover { text-decoration-thickness: 2px; }
.scene:not(.scene--light) .soft { color: var(--on-d-2); border-top-color: rgba(252,247,238,.22); }
.scene:not(.scene--light) .soft a { color: var(--sand); }

/* ── the reader's process plan — what actually happens after the
   click. Sits with the final ask, where that anxiety peaks. ─── */
.steps { list-style: none; display: grid; gap: .85rem; margin: 0 0 1.9rem; max-width: 40ch; }
.steps li { display: grid; grid-template-columns: 1.65rem 1fr; gap: .85rem; align-items: baseline; }
.steps__n {
  font-family: var(--f); font-weight: 500; font-size: .74rem;
  color: var(--teal); background: var(--cream);
  width: 1.65rem; height: 1.65rem; border-radius: 999px;
  display: grid; place-items: center; align-self: start; margin-top: .12rem;
}
.steps__t { color: var(--on-d-2); font-size: .98rem; line-height: 1.55; }
.scene--light .steps__n { background: var(--teal); color: #fff; }
.scene--light .steps__t { color: var(--ink-2); }

/* Hero at 80% of the viewport rather than the full 100svh — full-bleed
   height was pushing the orientation band and everything after it below
   the fold on laptops. Padding comes down with it so 80% is actually
   what renders, rather than min-height being overridden by content. */
#top {
  min-height: min(90svh, 900px);
  /* centred rather than bottom-aligned: .scene--tall uses align-items:end,
     which left her high in the frame and the copy sitting low */
  align-items: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* the stack was 611px of content before padding, which pushed the hero
   back up to 91svh regardless of min-height — these trim it to fit */
#top .h1 { margin-bottom: 1.4rem; }
#top .lede { margin-bottom: 1.15rem; }
#top .plain { margin-bottom: 1.6rem; }
#top .eyebrow { margin-bottom: .95rem; }

/* the hero drops its text shadow — the plate already carries legibility
   there, and the shadow was reading as a halo on the display type */
#top .h1, #top .h2 { text-shadow: none; }
#top .fine { text-shadow: none; }

/* the ways line — names the rest of the offering right under the method,
   so "free circle" never reads as the whole business */
.ways {
  max-width: 44ch; margin-bottom: 1.8rem;
  font-size: .96rem; line-height: 1.6; color: var(--on-d-2);
}
.scene--light .ways, .chapter .ways { color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════
   v7 · COMPONENTS FROM THE BRAND FOUNDATION
   Everything below exists because a specific document asked for it:
   the three-layer phase structure and the methodology line come from
   "The RadiantLife Method — The Four Phases.pdf", the pillars from
   Part One of the brand foundation, the programme card from Part Four.
   ═══════════════════════════════════════════════════════════════ */

/* ── the three layers each phase is read through ─────────────── */
.layers { display: grid; gap: 1.35rem; margin-top: 1.6rem; }
.layers > div { display: grid; gap: .3rem; }
.layers dt {
  font-family: var(--f); font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sand);
}
.layers dd { color: var(--on-d-2); font-size: .99rem; line-height: 1.62; max-width: 42ch; }
.scene--light .layers dt, .inset--light .layers dt, .chapter .layers dt { color: var(--gold-t); }
.scene--light .layers dd, .inset--light .layers dd, .chapter .layers dd { color: var(--ink-2); }
@media (min-width: 1100px) {
  .layers { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .layers dd { font-size: .94rem; }
}

/* the phase's own strapline, above the layers */
.phase__lead {
  font-size: clamp(1.06rem, 1.35vw, 1.2rem); line-height: 1.55;
  color: var(--on-d); max-width: 38ch; margin-bottom: .4rem;
}
.scene--light .phase__lead, .inset--light .phase__lead { color: var(--ink); }
.phase__wk {
  font-family: var(--f); font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sand); margin-top: -.4rem; margin-bottom: 1.1rem;
}
.scene--light .phase__wk, .inset--light .phase__wk { color: var(--gold-t); }

/* ── Regulate · Repair · Repattern · Align ───────────────────── */
.stages {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem 1rem; margin-top: 2.2rem;
  list-style: none;
}
.stages li {
  font-family: var(--disp); font-size: clamp(1.06rem, 1.5vw, 1.34rem);
  color: var(--teal); letter-spacing: .01em;
}
.stages li + li::before {
  content: "→"; display: inline-block; margin-right: 1rem;
  color: var(--gold-t); font-family: var(--f); font-size: .8em;
  transform: translateY(-1px);
}
.chapter--dark .stages li { color: var(--on-d); }
.chapter--dark .stages li + li::before { color: var(--gold-l); }

/* ── the seven pillars ───────────────────────────────────────── */
.pillars { list-style: none; display: grid; gap: 0; margin-top: clamp(2.2rem, 4vw, 3.2rem); text-align: left; }
@media (min-width: 880px) { .pillars { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); } }
.pillars li {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem;
  padding: 1.15rem 0; border-top: 1px solid var(--hair);
  font-family: var(--disp); font-size: clamp(1.08rem, 1.5vw, 1.26rem);
  line-height: 1.35; color: var(--teal-d);
}
.pillars li span {
  font-family: var(--f); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; color: var(--gold-t);
  padding-top: .42em; font-variant-numeric: tabular-nums;
}

/* ── the programme card ──────────────────────────────────────── */
.prog__meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  list-style: none; margin: 0 0 1.6rem;
}
.prog__meta li {
  font-family: var(--f); font-size: .73rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-d); background: rgba(37,100,109,.09);
  padding: .5rem .95rem; border-radius: 999px;
}
.scene--r:not(.scene--light) .prog__meta li,
.scene--l:not(.scene--light) .prog__meta li {
  color: var(--on-d); background: rgba(252,247,238,.14);
}
.trans {
  margin-top: 1.7rem; padding: 1.4rem 1.5rem;
  border-left: 2px solid var(--gold);
  background: rgba(37,100,109,.055);
  font-size: 1.02rem; line-height: 1.6; color: var(--ink);
  max-width: 46ch; border-radius: 0 4px 4px 0;
}
.scene--r:not(.scene--light) .trans,
.scene--l:not(.scene--light) .trans {
  color: var(--on-d-2); background: rgba(252,247,238,.09);
  border-left-color: var(--gold-l);
}

/* ── the four systems ────────────────────────────────────────── */
.systems { list-style: none; display: grid; gap: 0; margin-top: 1.9rem; }
.systems li {
  padding: 1rem 0; border-top: 1px solid var(--hair);
  display: grid; gap: .18rem;
}
.systems li:last-child { border-bottom: 1px solid var(--hair); }
.systems b {
  font-family: var(--disp); font-weight: 400;
  font-size: 1.12rem; color: var(--teal); letter-spacing: .005em;
}
.systems span { color: var(--ink-2); font-size: .98rem; line-height: 1.6; }
.scene--r:not(.scene--light) .systems li, .scene--l:not(.scene--light) .systems li,
.scene--r:not(.scene--light) .systems li:last-child,
.scene--l:not(.scene--light) .systems li:last-child { border-color: rgba(252,247,238,.22); }
.scene--r:not(.scene--light) .systems b, .scene--l:not(.scene--light) .systems b { color: var(--sand); }
.scene--r:not(.scene--light) .systems span, .scene--l:not(.scene--light) .systems span { color: var(--on-d-2); }

/* ── the three legs of her authority ─────────────────────────── */
.legs { list-style: none; display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.legs li { display: grid; gap: .2rem; }
.legs b {
  font-family: var(--f); font-size: .71rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sand);
}
.legs span { color: var(--on-d-2); font-size: .97rem; line-height: 1.6; max-width: 44ch; }
.scene--light .legs b, .inset--light .legs b, .chapter .legs b { color: var(--gold-t); }
.scene--light .legs span, .inset--light .legs span, .chapter .legs span { color: var(--ink-2); }

/* ── the positioning line, set as a statement ────────────────── */
.position {
  margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--hair);
  font-family: var(--disp); font-size: clamp(1.1rem, 1.6vw, 1.38rem);
  line-height: 1.45; color: var(--teal-d); max-width: 40ch;
}
.scene--r:not(.scene--light) .position,
.scene--l:not(.scene--light) .position {
  color: var(--on-d); border-top-color: rgba(252,247,238,.24);
}

/* ── medical disclaimer, quiet and honest ────────────────────── */
.disc {
  font-size: .78rem; line-height: 1.6; color: var(--ink-2);
  opacity: .85; max-width: 62ch; margin-inline: auto;
}


/* ── v7 fix · light scenes over bright frames ─────────────────
   The programme scene sits over a sunlit meadow. The stock light
   veil left teal headlines at roughly 3:1 there. This deepens the
   cream on the text side only, so the photograph keeps its right. */
#programme .scene__veil {
  background:
    linear-gradient(270deg, rgba(251,246,238,.97) 0%, rgba(251,246,238,.93) 30%,
                            rgba(251,246,238,.62) 56%, rgba(251,246,238,.10) 82%,
                            rgba(251,246,238,0) 94%),
    linear-gradient(180deg, rgba(251,246,238,.95) 0%, rgba(251,246,238,0) 18%,
                            rgba(251,246,238,0) 82%, rgba(251,246,238,.95) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   v8 · COMPONENTS FOR Homepage-Copy-v8.md
   v8 gives every section a "Large title" and a "Large subtitle".
   They are set as one heading, the subtitle stepped down inside it,
   so the pair reads as a single statement rather than two headings
   stacked. Everything else here exists for one v8 block.
   ═══════════════════════════════════════════════════════════════ */

/* the subtitle, inside the h2, matching .h1__b in the hero */
.h2__b {
  display: block; margin-top: .34em;
  font-size: .52em; font-weight: 400;
  line-height: 1.3; letter-spacing: -0.004em;
  color: var(--on-d-2);
}
.scene--light .h2__b, .inset--light .h2__b, .chapter .h2__b { color: var(--ink-2); }

/* hero action row: primary button plus v8's secondary link */
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.9rem; margin-top: .4rem; }
/* the closing invitation used to hold a form with margin-top 2.1rem.
   The button that replaced it inherits that gap so the section's
   vertical rhythm is unchanged. */
.acts--lg { margin-top: 2.1rem; }
.link2 {
  font-size: .86rem; letter-spacing: .04em; color: var(--on-d);
  text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid rgba(252,247,238,.42);
  transition: border-color .25s var(--ease);
}
.link2:hover { border-bottom-color: var(--on-d); }
.scene--light .link2, .inset--light .link2, .chapter .link2 {
  color: var(--teal); border-bottom-color: rgba(37,100,109,.4);
}
.scene--light .link2:hover { border-bottom-color: var(--teal); }

/* the six fronts. Each is its own line because the rhythm is the
   argument: six separate efforts, six separate hopes. */
.fronts { list-style: none; display: grid; gap: 0; margin: 1.7rem 0 1.9rem; }
.fronts li {
  position: relative; padding: .62rem 0 .62rem 1.6rem;
  font-size: 1.02rem; line-height: 1.5; color: var(--ink);
  border-bottom: 1px solid rgba(226,214,193,.7);
}
.fronts li:first-child { border-top: 1px solid rgba(226,214,193,.7); }
.fronts li::before {
  content: ""; position: absolute; left: 0; top: 1.18rem;
  width: 8px; height: 1px; background: var(--gold);
}
.scene--r .fronts li, .scene--l .fronts li { color: var(--on-d); border-color: rgba(252,247,238,.2); }

/* one pattern, four places it lives */
.cards { list-style: none; display: grid; gap: 0; margin: 1.9rem 0 2rem; }
@media (min-width: 820px) {
  .cards { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.6rem); }
}
.cards li {
  display: grid; gap: .25rem;
  padding: 1.05rem 0; border-top: 1px solid var(--hair);
}
.cards b {
  font-family: var(--disp); font-weight: 400; font-size: 1.16rem;
  color: var(--teal); letter-spacing: .005em;
}
.cards span { color: var(--ink-2); font-size: .99rem; line-height: 1.6; }
.scene--r:not(.scene--light) .cards li, .scene--l:not(.scene--light) .cards li { border-color: rgba(252,247,238,.22); }
.scene--r:not(.scene--light) .cards b, .scene--l:not(.scene--light) .cards b { color: var(--sand); }
.scene--r:not(.scene--light) .cards span, .scene--l:not(.scene--light) .cards span { color: var(--on-d-2); }

/* the copy stack in "what change can look like" */
.stack { list-style: none; display: grid; gap: .1rem; margin: 1.7rem 0 0; }
.stack li {
  font-family: var(--disp); font-size: clamp(1.14rem, 1.6vw, 1.36rem);
  line-height: 1.45; color: var(--teal-d); padding: .55rem 0;
}
.scene--r:not(.scene--light) .stack li, .scene--l:not(.scene--light) .stack li { color: var(--on-d); }

/* the plan: v8 bolds the action, then explains it */
.steps__t b { font-weight: 600; color: var(--on-d); }
.scene--light .steps__t b, .inset--light .steps__t b, .chapter .steps__t b { color: var(--ink); }

/* the four-card block wants more width than a text column */
.scene__box--wide { width: min(52rem, 100%); }
.body--w { max-width: 52ch; }

/* fine print on a light ground */
.fine--l { color: var(--ink-2); text-shadow: none; }
.scene--light .fine, .inset--light .fine, .chapter .fine { color: var(--ink-2); text-shadow: none; }

/* ═══════════════════════════════════════════════════════════════
   v9 · THE POLISH PASS
   Agency-tier craft applied inside her brand book, not on top of it.

   WHERE THIS DEVIATES FROM THE DESIGN SKILL, AND WHY:
   the skill proposes Geist / Clash Display / PP Editorial New. Her
   brand foundation specifies Marcellus and Raleway, and the client
   has said the brand guidelines govern. Neither face is on the
   skill's banned list, and the skill's own "Editorial Luxury"
   archetype asks for warm creams, muted tones and a high-contrast
   serif heading, which is precisely what she specified. So the
   archetype is honoured and the typefaces stay hers.

   Everything else is the skill, in full: spring easing, the floating
   island nav, double-bezel nested enclosures, button-in-button CTAs,
   magnetic press physics, pill eyebrows, macro whitespace, film
   grain, concentric squircle radii.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Real mass, not ease-in-out. Redefining --ease upgrades every
     transition already written against it, in one move. */
  --ease:   cubic-bezier(.32, .72, 0, 1);
  --glide:  cubic-bezier(.22, 1, .36, 1);

  /* concentric radii: outer shell, inner core = outer minus padding */
  --r-out:  2rem;
  --r-in:   calc(2rem - .375rem);

  /* Warm, highly diffused ambient depth. Never a grey drop shadow. */
  --lift-1: 0 1px 2px rgba(62,54,46,.04), 0 8px 24px -12px rgba(62,54,46,.10);
  --lift-2: 0 2px 4px rgba(62,54,46,.05), 0 18px 50px -20px rgba(62,54,46,.16);
  --lift-3: 0 4px 8px rgba(62,54,46,.06), 0 34px 80px -28px rgba(62,54,46,.22);
}

/* ── film grain · fixed, inert, never on a scrolling layer ─────── */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ═══ THE FLOATING ISLAND NAV ═══════════════════════════════════
   Detached from the top edge, sized to content, centred. The skill
   bans navbars glued edge to edge, and it is right: a pill reads as
   an object in the space rather than a browser chrome. */
.bar {
  inset: 0 0 auto 0;
  padding: clamp(1rem, 2vw, 1.6rem) var(--pad) 0;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
.bar::before { display: none; }
.bar > * { pointer-events: auto; }

/* the pill itself is drawn on a wrapper the markup already gives us:
   mark + nav + cta sit inside one flex row, so the row becomes glass */
.bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0;
}
.bar__in {
  display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem);
  width: max-content; max-width: 100%;
  padding: .55rem .55rem .55rem 1.5rem;
  border-radius: 999px;
  background: rgba(251,246,238,.72);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.6);
  color: var(--ink);
  transition: background .5s var(--ease), box-shadow .5s var(--ease),
              padding .5s var(--ease), transform .5s var(--ease);
}
.bar.is-stuck .bar__in {
  background: rgba(251,246,238,.9);
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.7);
}
.bar__mark { color: var(--ink); font-size: 1.1rem; }
.bar__nav a { color: var(--ink-2); opacity: 1; letter-spacing: .01em; transition: color .3s var(--ease); }
.bar__nav a:hover { color: var(--teal); }

/* nav CTA becomes a proper island button */
.bar__cta {
  background: var(--teal); color: #fff;
  padding: .78rem 1.35rem; font-size: .74rem; letter-spacing: .1em;
  box-shadow: 0 1px 2px rgba(31,80,87,.2), 0 10px 24px -12px rgba(31,80,87,.5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.bar__cta:hover { background: var(--teal-d); transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(31,80,87,.22), 0 16px 32px -14px rgba(31,80,87,.6); }
.bar__cta:active { transform: scale(.975); }

/* ── the hamburger morphs into a true X ───────────────────────── */
.bar__burger {
  margin-left: 0; width: 40px; height: 40px; border-radius: 999px;
  position: relative; display: grid; place-items: center;
  transition: background .35s var(--ease);
}
.bar__burger:hover { background: rgba(37,100,109,.07); }
.bar__burger span {
  /* top: 50% is not optional. Without it the line sits at its static
     position, and browsers disagree about where that is for an
     absolutely positioned child of a centred grid: Chrome centres it,
     iOS Safari puts it at the top edge, where one line was clipped off
     the button and the other read as a stray hairline. The client
     reported the icon missing on her phone. Centre explicitly in both
     axes so every engine draws the same thing. */
  position: absolute; left: 50%; top: 50%; width: 19px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .5s var(--ease), opacity .35s var(--ease);
}
.bar__burger span:first-child { transform: translate(-50%, calc(-50% - 3.5px)); }
.bar__burger span:last-child  { transform: translate(-50%, calc(-50% + 3.5px)); }
.bar__burger[aria-expanded="true"] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.bar__burger[aria-expanded="true"] span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── mobile: a screen-filling glass overlay, links staggered in ── */
@media (max-width: 899px) {
  .bar__in { width: 100%; justify-content: space-between; padding-left: 1.35rem; }
  .bar__nav {
    position: fixed; inset: 0; z-index: 99;
    display: grid; align-content: center; justify-items: start;
    gap: .4rem; padding: 12vh var(--pad) 0;
    background: rgba(251,246,238,.86);
    box-shadow: none;
    opacity: 0; visibility: hidden; transform: none;
    transition: opacity .5s var(--ease), visibility .5s;
  }
  .bar__nav.is-open { opacity: 1; visibility: visible; }
  .bar__nav a {
    font-family: var(--disp); font-size: clamp(2rem, 8vw, 2.9rem);
    color: var(--teal-d); border-bottom: 0; padding: .35rem 0; letter-spacing: -.01em;
    opacity: 0; transform: translateY(2.5rem);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .bar__nav.is-open a { opacity: 1; transform: none; }
  .bar__nav.is-open a:nth-child(1) { transition-delay: .10s; }
  .bar__nav.is-open a:nth-child(2) { transition-delay: .17s; }
  .bar__nav.is-open a:nth-child(3) { transition-delay: .24s; }
  .bar__cta { display: none; }
}
@media (min-width: 900px) { .bar__burger { display: none; } }

/* ═══ THE NESTED CTA · button-in-button ═════════════════════════
   The arrow never sits naked beside the label. It lives in its own
   circular well, flush with the button's inner padding, and it
   carries the kinetic tension on hover while the button itself
   presses under the finger. */
.cta {
  gap: .95rem; padding: .5rem .5rem .5rem 1.75rem;
  border-radius: 999px; min-height: 60px;
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.cta__t { display: inline-block; }
.cta__i {
  width: 44px; height: 44px; flex: none; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(37,100,109,.09);
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.cta__i svg { width: 15px; height: 15px; display: block; }
.cta:hover { transform: translateY(-2px); box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.55); }
.cta:hover .cta__i { transform: translate(3px, -3px) scale(1.06); background: rgba(37,100,109,.16); }
.cta:active { transform: scale(.98); }
.cta:active .cta__i { transform: translate(1px, -1px) scale(1.02); }

/* on the teal-filled variants the well inverts */
.cta--solid .cta__i,
.chapter .cta .cta__i, .scene--light .cta .cta__i, .inset--light .cta .cta__i {
  background: rgba(255,255,255,.18);
}
.cta--solid:hover .cta__i,
.chapter .cta:hover .cta__i, .scene--light .cta:hover .cta__i { background: rgba(255,255,255,.28); }

/* ═══ EYEBROW AS A PILL BADGE ═══════════════════════════════════ */
.eyebrow {
  display: inline-block; margin-bottom: 1.5rem;
  padding: .48rem 1rem .44rem;
  font-size: .625rem; letter-spacing: .2em;
  border-radius: 999px;
  background: rgba(252,247,238,.12);
  box-shadow: inset 0 0 0 1px rgba(252,247,238,.26);
  text-shadow: none;
}
.scene--light .eyebrow, .inset--light .eyebrow, .chapter .eyebrow, .proof .eyebrow {
  background: rgba(37,100,109,.055);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.16);
}

/* ═══ DOUBLE-BEZEL · every image sits in a machined tray ═════════ */
.inset__fig {
  padding: .5rem; border-radius: var(--r-out);
  background: rgba(37,100,109,.045);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.09), var(--lift-1);
  overflow: visible;
}
.inset__fig img, .inset__fig picture > img {
  border-radius: var(--r-in);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), 0 1px 2px rgba(62,54,46,.06);
}

/* ═══ BENTO · one pattern, four places it lives ═════════════════
   Asymmetric on purpose. Two tall cells lead, two shorter follow,
   so the block reads as composed rather than as a four-up grid. */
@media (min-width: 820px) {
  .cards {
    grid-template-columns: 1.15fr .85fr;
    column-gap: 1rem; row-gap: 1rem;
  }
}
.cards li {
  position: relative;
  padding: 1.6rem 1.5rem; border-top: 0;
  border-radius: var(--r-out);
  background: rgba(251,246,238,.5);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.10),
              inset 0 1px 0 rgba(255,255,255,.55), var(--lift-1);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
@media (min-width: 820px) {
  .cards li:nth-child(1) { padding-block: 2.3rem; }
  .cards li:nth-child(4) { padding-block: 2.3rem; }
}
.cards li:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.18),
              inset 0 1px 0 rgba(255,255,255,.65), var(--lift-2);
}
.cards b { font-size: 1.2rem; }

/* ═══ the three benefits, as nested plates ══════════════════════ */
.scene .systems { display: grid; gap: .75rem; }
.scene .systems li {
  padding: 1.35rem 1.4rem; border: 0 !important; border-radius: var(--r-out);
  background: rgba(252,247,238,.07);
  box-shadow: inset 0 0 0 1px rgba(252,247,238,.16), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .6s var(--ease), background .6s var(--ease);
}
.scene .systems li:hover { transform: translateX(4px); background: rgba(252,247,238,.11); }

/* ═══ the proof holds, as real trays ════════════════════════════ */
.proof__hold li {
  border: 0; border-radius: var(--r-out); padding: 1.9rem 1.6rem;
  background: rgba(37,100,109,.04);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.13), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ═══ the email capture, as a machined tray ═════════════════════ */
.signup__row {
  padding: .45rem; border-radius: 999px;
  background: rgba(252,247,238,.09);
  box-shadow: inset 0 0 0 1px rgba(252,247,238,.2), inset 0 1px 0 rgba(255,255,255,.12);
  gap: .5rem;
}
.signup__i {
  border: 0 !important; background: transparent !important;
  padding-left: 1.3rem; color: var(--on-d);
}
.signup__i::placeholder { color: rgba(252,247,238,.5); }
.signup__row:focus-within {
  box-shadow: inset 0 0 0 1px rgba(252,247,238,.4), 0 0 0 4px rgba(199,146,69,.16);
}
.scene--light .signup__row, .chapter .signup__row, .foot .signup__row {
  background: rgba(37,100,109,.05);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.14), inset 0 1px 0 rgba(255,255,255,.5);
}
.scene--light .signup__i, .chapter .signup__i, .foot .signup__i { color: var(--ink); }

/* ═══ MACRO WHITESPACE · let it breathe heavily ═════════════════ */
.scene   { padding-block: clamp(8rem, 15vw, 13rem); }
.chapter { padding-block: clamp(8rem, 15vw, 13rem); }
.inset   { padding-block: clamp(7rem, 13vw, 11rem); }
.proof   { padding-block: clamp(8rem, 15vw, 13rem); }
@media (max-width: 780px) {
  .scene, .chapter, .inset, .proof { padding-block: clamp(5.5rem, 16vw, 8rem); }
}

/* ═══ SCROLL ENTRY · gentle, additive, never withholding ════════
   The client has said twice that she does not want to be made to
   wait to read. So the reveal is short, it is additive only (every
   word is on the page with JS off), and reduced motion removes it. */
.js .reveal {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .9s var(--glide), transform .9s var(--glide);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ═══ v9 fix · the mobile menu overlay ══════════════════════════
   backdrop-filter creates a containing block for fixed-position
   descendants. .bar__nav is position:fixed inset:0 and lives inside
   .bar__in, so the blur on the pill was making the overlay resolve
   against the pill rather than the viewport: it covered ~200px and
   let the page show through.

   Below the nav breakpoint the pill drops the blur and uses a high
   opacity tint instead, which reads the same and restores the
   viewport as the containing block. The pill also sits above the
   overlay so the X stays reachable. */
@media (max-width: 899px) {
  .bar__in {
    position: relative; z-index: 2;
    background: rgba(251,246,238,.94);
  }
  .bar__nav { z-index: 1; padding-top: 18vh; }
  /* the overlay itself may keep its blur: it is fixed, and it has no
     fixed-position descendants of its own. */
}

/* ═══ v9 fix · the close control must survive the overlay ═══════
   The pill and the overlay are both cream, so with the menu open the
   pill and its X dissolved into the background. Open state drops the
   fill entirely: the wordmark and the X then sit directly on the
   glass, which is also the calmer composition. */
.bar.is-nav-open .bar__in {
  background: transparent;
  box-shadow: none;
}
.bar.is-nav-open .bar__mark { color: var(--teal-d); }
.bar.is-nav-open .bar__burger span { background: var(--teal-d); }

/* ═══ v9 fix · z-order inside the pill ══════════════════════════
   .bar__in is position:relative z-index:2, so it opens a stacking
   context. .bar__nav sat at z-index 1 inside it while the wordmark
   and burger were at auto, which painted the full-screen overlay
   ON TOP of its own close control. The two controls now sit above
   the sheet they open. */
@media (max-width: 899px) {
  .bar__nav { z-index: 0; }
  .bar__mark, .bar__burger { position: relative; z-index: 3; }
}

/* ═══════════════════════════════════════════════════════════════
   v10 · APPLE DESIGN PASS
   Typography, materials, response and the three accessibility
   signals. Her palette and both typefaces are untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ── §15 · TRACKING IS SIZE-SPECIFIC ────────────────────────────
   Every heading here is fluid, so a single letter-spacing value is
   wrong at one end of its range: correct at 4.35rem is far too tight
   at 2.4rem. Tracking is therefore fluid too, computed in px so it
   is absolute rather than compounding on an already-fluid em.
   Large display tightens, body sits near zero, small text opens up. */
html { font-optical-sizing: auto; }

.h1 {
  line-height: 1.04;
  letter-spacing: clamp(-1.75px, calc(0.2px - 0.135vw), -0.3px);
}
.h1__b {
  line-height: 1.22;
  letter-spacing: clamp(-0.6px, calc(0.1px - 0.05vw), -0.08px);
}
.h2 {
  line-height: 1.1;
  letter-spacing: clamp(-0.95px, calc(-0.02px - 0.058vw), -0.22px);
}
.h2__b { line-height: 1.28; letter-spacing: -0.005em; }

/* body copy sits at zero; small copy gets a touch of positive
   tracking, which is where legibility actually needs it */
.lede  { line-height: 1.62; letter-spacing: 0; }
.body  { line-height: 1.72; letter-spacing: .002em; }
.pull  { line-height: 1.3;  letter-spacing: -.012em; }
.cards span, .systems span, .steps__t, .proof__hold span, .legs span {
  letter-spacing: .004em;
}
.fine, .signup__l, .foot__c, .disc { letter-spacing: .05em; }

/* ── §12 · MATERIALS ────────────────────────────────────────────
   A bigger surface reads as a thicker material. The pill is small,
   so it blurs less than the full-screen sheet, which blurs hard. */
.bar__in {}
@media (max-width: 899px) {
  .bar__nav {}
}

/* Scroll edge effect, not a hard divider. Apple replaces the 1px
   rule under floating chrome with a short fade where content meets
   it. The pill previously carried a hairline shadow; this is a
   gradient that only exists where the chrome actually overlaps. */
.bar::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 7rem;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(251,246,238,.55) 0%, rgba(251,246,238,0) 100%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.bar.is-stuck::after { opacity: 1; }
.bar.is-stuck .bar__in { box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.75); }

/* Never stack a light translucent surface on another. On the light
   scenes the eyebrow pill was a translucent tint sitting on the
   cream veil sitting on a photograph, three sheets deep, and the
   caps lost their edge. On light it becomes opaque. */
.scene--light .eyebrow, .inset--light .eyebrow, .chapter .eyebrow, .proof .eyebrow {
  background: var(--cream2);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.18);
}

/* §12 vibrancy · type over a translucent surface needs weight and
   tracking, not a lighter grey */
.bar__nav a, .bar__mark { font-weight: 500; }

/* ── §1 · RESPONSE · feedback on press, not on release ──────────
   Every interactive surface answers the finger immediately. 90ms is
   below the threshold where directness starts to fall away. */
.bar__nav a, .link2, .foot a, .faq__i summary {
  transition: color .3s var(--ease), opacity .3s var(--ease), transform .09s ease-out;
}
.bar__nav a:active, .link2:active, .faq__i summary:active { transform: scale(.985); }
.bar__burger:active { transform: scale(.94); }
.cards li:active { transform: translateY(-1px) scale(.995); }

/* ── §7 · SPATIAL CONSISTENCY ───────────────────────────────────
   The sheet emerges from the control that opened it and returns the
   same way, so the relationship between button and content is never
   ambiguous. It also materialises: blur and scale resolve together
   rather than a flat opacity fade. */
@media (max-width: 899px) {
  .bar__nav {
    transform-origin: top right;
    transform: scale(.965);
    transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
  }
  .bar__nav.is-open { transform: scale(1); }
  /* the sheet is draggable, so the JS owns transform while a drag is
     live. This class hands control over without a transition fight. */
  .bar__nav.is-dragging { transition: none; }
}

/* ── §14 · THE THREE ACCESSIBILITY SIGNALS ──────────────────────
   Reduced motion was already handled. Transparency and contrast
   were not, and they are separate user settings. */
@media (prefers-reduced-transparency: reduce) {
  .bar__in { background: var(--cream);}
  .bar__nav { background: var(--cream);}
  .eyebrow { background: var(--cream2); }
  .scene .systems li { background: rgba(44,38,34,.55); }
  body::after { display: none; }        /* the grain is a transparency effect too */
}
@media (prefers-contrast: more) {
  .eyebrow { background: var(--cream); color: var(--gold-t); box-shadow: inset 0 0 0 1px var(--teal-d); }
  .cards li, .proof__hold li { box-shadow: inset 0 0 0 1.5px var(--teal-d); background: var(--cream); }
  .cta { box-shadow: inset 0 0 0 1.5px var(--teal-d); }
  .link2 { border-bottom-color: currentColor; }
  .fronts li, .systems li { border-color: var(--teal-d) !important; }
}
@media (prefers-reduced-motion: reduce) {
  /* a gentler equivalent, not the absence of feedback */
  .bar__nav { transition: opacity .2s ease !important; transform: none !important; }
  .cta:hover, .cards li:hover, .scene .systems li:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v11 · RAILS  ·  the clip carousel and the story carousel

   Built on native overflow scrolling with scroll-snap rather than a
   transform carousel. The platform already gives momentum, edge
   rubber-band, interruptibility, keyboard access and a real
   scrollbar for assistive tech. Reimplementing those in JS is how
   carousels end up broken. JS only adds what native lacks on
   desktop: drag with a mouse, and the two arrows.
   ═══════════════════════════════════════════════════════════════ */

.rail {
  position: relative;
  margin-inline: calc(var(--pad) * -1);
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
}
.rail__track {
  display: flex; gap: clamp(.85rem, 1.6vw, 1.25rem);
  list-style: none; margin: 0;
  padding: .5rem var(--pad);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__item { flex: 0 0 auto; scroll-snap-align: start; }
.rail.is-dragging .rail__track { scroll-snap-type: none; cursor: grabbing; }
.rail.is-dragging * { pointer-events: none; }

/* the rail runs to the page edge, so it fades there rather than
   being clipped by a hard line */
.rail::before, .rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--pad);
  pointer-events: none; z-index: 2;
}
.rail::before { left: 0;  background: linear-gradient(90deg,  var(--cream) 12%, rgba(251,246,238,0) 100%); }
.rail::after  { right: 0; background: linear-gradient(270deg, var(--cream) 12%, rgba(251,246,238,0) 100%); }

/* ── controls ───────────────────────────────────────────────── */
.rail__ctl {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap; margin-top: 1.6rem;
}
.rail__note { font-size: .88rem; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.rail__btns { display: flex; gap: .6rem; margin-left: auto; }
.rail__b {
  width: 52px; height: 52px; border: 0; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; color: var(--teal);
  background: rgba(37,100,109,.06);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.16);
  transition: background .4s var(--ease), transform .4s var(--ease), opacity .4s var(--ease);
}
.rail__b svg { width: 17px; height: 17px; }
.rail__b:hover { background: rgba(37,100,109,.12); }
.rail__b:active { transform: scale(.94); }
.rail__b[disabled] { opacity: .3; cursor: default; }
.rail__b[disabled]:hover { background: rgba(37,100,109,.06); }

/* ── a clip card ────────────────────────────────────────────── */
.clip {
  width: clamp(14.5rem, 23vw, 17.5rem);
  padding: .5rem; border-radius: var(--r-out);
  background: rgba(37,100,109,.045);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.10), var(--lift-1);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.clip:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(37,100,109,.16), var(--lift-2); }
.clip__poster {
  aspect-ratio: 4 / 5; border-radius: var(--r-in);
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--cream2) 0%, #EFE6D6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.clip__poster img { width: 100%; height: 100%; object-fit: cover; }
.clip__play {
  width: 54px; height: 54px; border-radius: 999px;
  background: rgba(251,246,238,.82);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.2), var(--lift-1);
  display: grid; place-items: center;
  transition: transform .5s var(--ease);
}
.clip__play::after {
  content: ""; width: 0; height: 0; margin-left: 3px;
  border-left: 12px solid var(--teal);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.clip:hover .clip__play { transform: scale(1.07); }
.clip__k {
  margin: 1.05rem .6rem .2rem; font-size: .64rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-t);
}
.clip__t { margin: 0 .6rem .8rem; font-size: .97rem; line-height: 1.5; color: var(--ink-2); }

/* ── a story card ───────────────────────────────────────────── */
.say {
  width: clamp(17rem, 30vw, 23rem); height: 100%;
  padding: 2.1rem 1.9rem 1.7rem; border-radius: var(--r-out);
  background: rgba(37,100,109,.045);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.10), var(--lift-1);
  display: grid; align-content: space-between; gap: 1.6rem;
  position: relative;
}
.say::before {
  content: "\201C"; position: absolute; top: .35rem; left: 1.4rem;
  font-family: var(--disp); font-size: 3.6rem; line-height: 1;
  color: var(--gold); opacity: .42;
}
.say blockquote {
  font-family: var(--disp); font-size: clamp(1.06rem, 1.35vw, 1.2rem);
  line-height: 1.5; color: var(--teal-d); padding-top: 1.5rem;
}
.say figcaption { display: grid; gap: .1rem; }
.say__n { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-t); }
.say__c { font-size: .9rem; color: var(--ink-2); }

/* ── the empty state, so a placeholder reads as scaffolding
      rather than as a broken card ─────────────────────────────── */
.is-empty { box-shadow: inset 0 0 0 1px rgba(37,100,109,.13); background: rgba(37,100,109,.028); }
.is-empty .clip__poster { background: repeating-linear-gradient(135deg,
  var(--cream2) 0 10px, rgba(243,234,219,.55) 10px 20px); }
.is-empty blockquote, .is-empty .clip__t { opacity: .55; }
.is-empty .say__n, .is-empty .say__c, .is-empty .clip__k { opacity: .6; }

@media (max-width: 600px) {
  .clip { width: 72vw; }
  .say  { width: 78vw; }
  .rail__ctl { flex-direction: column; align-items: flex-start; }
  .rail__btns { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rail__track { scroll-behavior: auto; }
  .clip:hover, .rail__b:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   v12 · NAV: BLUR REMOVED
   The glass pill was smearing the photograph behind its edges into
   a halo. Removing the blur leaves the pill as a clean, solid
   object, which reads sharper against her imagery. Solid rather
   than translucent, so there is nothing left to smear.

   This also removes the last containing-block hazard from the
   header and drops a per-frame GPU cost on a fixed layer.
   ═══════════════════════════════════════════════════════════════ */
.bar__in,
.bar.is-stuck .bar__in {
  background: var(--cream);
}
.bar__in       { box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.7); }
.bar.is-stuck .bar__in { box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.8); }

/* the full-screen sheet loses it too, and goes solid so nothing
   shows through */
@media (max-width: 899px) {
  .bar__nav {
    background: var(--cream);
    transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
  }
  .bar.is-nav-open .bar__in { background: transparent; box-shadow: none; }
}

/* the scroll edge fade stays: with no blur it is now the only thing
   separating floating chrome from the content moving under it */
.bar::after { background: linear-gradient(180deg, rgba(251,246,238,.62) 0%, rgba(251,246,238,0) 100%); }

/* ── footer · social ────────────────────────────────────────────
   Ultra-light 1.25px line icons drawn inline, so there is no icon
   font to load and the stroke weight matches the CTA arrow. */
.foot__soc {
  display: flex; justify-content: center; gap: .7rem;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}
.foot__soc a {
  width: 48px; height: 48px; border-radius: 999px;
  display: grid; place-items: center; color: var(--teal);
  background: rgba(37,100,109,.05);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.14);
  transition: background .4s var(--ease), color .4s var(--ease),
              transform .4s var(--ease), box-shadow .4s var(--ease);
}
.foot__soc svg { width: 21px; height: 21px; display: block; }
.foot__soc a:hover {
  background: var(--teal); color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(31,80,87,.16), 0 12px 26px -12px rgba(31,80,87,.5);
}
.foot__soc a:active { transform: scale(.94); }

/* until the URLs exist the links are inert, and they look inert */
.foot__soc a[aria-disabled="true"] { opacity: .45; cursor: default; }
.foot__soc a[aria-disabled="true"]:hover {
  background: rgba(37,100,109,.05); color: var(--teal);
  transform: none; box-shadow: inset 0 0 0 1px rgba(37,100,109,.14);
}

/* visually hidden, still read aloud */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   v13 · SPATIAL RHYTHM, TIGHTENED
   The v9 pass set section padding to 128–208px per side. Stacked,
   that put ~384px of nothing between one block of content and the
   next, which read as the page falling apart rather than breathing.
   Roughly halved. Still generous, no longer a canyon.
   ═══════════════════════════════════════════════════════════════ */
.scene, .chapter, .proof { padding-block: clamp(4.5rem, 8vw, 7rem); }
.inset                   { padding-block: clamp(4rem, 7vw, 6.5rem); }
@media (max-width: 780px) {
  .scene, .chapter, .inset, .proof { padding-block: clamp(3.5rem, 11vw, 5rem); }
}
/* the full-height scenes keep their own minimum, so the hero and the
   closing invitation still fill the viewport */
.scene--tall { min-height: 100svh; }

/* ═══ THE CLIP BAND ═════════════════════════════════════════════
   A warmer ground so the carousel reads as its own place, with the
   colour resolving back to the page tone at both edges. No rule, no
   hard seam: it fades in and fades out. */
#talks {
  background: linear-gradient(180deg,
    var(--cream)  0%,
    var(--cream2) 14%,
    var(--cream2) 86%,
    var(--cream)  100%);
}
/* the rail's own edge fades have to match the band, not the page,
   or the cards appear to dissolve into the wrong colour */
#talks .rail::before { background: linear-gradient(90deg,  var(--cream2) 12%, rgba(243,234,219,0) 100%); }
#talks .rail::after  { background: linear-gradient(270deg, var(--cream2) 12%, rgba(243,234,219,0) 100%); }
#talks .clip {
  background: rgba(37,100,109,.05);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.12), var(--lift-1);
}
#talks .clip__poster {
  background: linear-gradient(150deg, var(--cream) 0%, #F6EFE2 100%);
}
#talks .is-empty .clip__poster {
  background: repeating-linear-gradient(135deg,
    var(--cream) 0 10px, rgba(246,239,226,.6) 10px 20px);
}

/* ═══ THE STORY BAND ════════════════════════════════════════════
   Same treatment as the clip band, for the same reason. On plain
   cream the quote cards were cream on cream and barely registered
   as objects at all. The warmer ground gives them an edge, and the
   two carousels now read as a matched pair rather than two
   unrelated stretches of page. */
#voices {
  background: linear-gradient(180deg,
    var(--cream)  0%,
    var(--cream2) 14%,
    var(--cream2) 86%,
    var(--cream)  100%);
}
#voices .rail::before { background: linear-gradient(90deg,  var(--cream2) 12%, rgba(243,234,219,0) 100%); }
#voices .rail::after  { background: linear-gradient(270deg, var(--cream2) 12%, rgba(243,234,219,0) 100%); }
#voices .say {
  background: rgba(37,100,109,.05);
  box-shadow: inset 0 0 0 1px rgba(37,100,109,.12), var(--lift-1);
}
#voices .is-empty { background: rgba(37,100,109,.035); box-shadow: inset 0 0 0 1px rgba(37,100,109,.15); }

/* ═══ THE QUESTIONS BAND ════════════════════════════════════════
   Same warm ground as the two carousel bands, for a different
   reason. "Life can still be hard" sits directly above this on flat
   cream, and both are contained sections rather than cards, so they
   ran together as one very long stretch of the same tone. The band
   gives the FAQ its own place without a hard rule between them.

   Edges resolve back to cream at both ends: the section above meets
   it flush, and below it the cream page ground has to carry on
   uninterrupted through the margin around the closing card. */
#questions {
  background: linear-gradient(180deg,
    var(--cream)  0%,
    var(--cream2) 14%,
    var(--cream2) 86%,
    var(--cream)  100%);
}
/* --hair (#E2D6C1) is tuned for cream, where it reads at a channel
   delta of 102. On the deeper cream2 of this band that falls to 63
   and the rows stop reading as rows. #D7CBB2 is the next step down
   the same warm sand, and measures 100 against cream2, so the rules
   carry exactly the weight they had before the band existed.
   Warm, not teal: every structural line on this page is sand, and
   the FAQ should not be the one place that differs. */
#questions .faq__i,
#questions .faq__i:last-of-type { border-color: #D7CBB2; }

/* the controls row was leaving a wide dead strip under both rails,
   because the note and the buttons are short and the section padding
   then added its own. Pull them up against the cards. */
.rail__ctl { margin-top: 1.2rem; }
.rail      { margin-top: clamp(2rem, 3.6vw, 2.6rem); }

/* ═══════════════════════════════════════════════════════════════
   v14 · ONE RHYTHM FOR THE WHOLE PAGE
   Section padding was already uniform at 112px, but the gaps
   measured anywhere from 253px to 520px. The cause was min-height
   on the photographic scenes: when a section's content is shorter
   than the minimum, the leftover height distributes as extra space
   above and below, so the gap became a function of how much copy
   that section happened to carry.

   Interior sections are now content plus one fixed padding value,
   so every boundary is the same. Only the two bookends still fill
   the viewport, which is deliberate: the hero and the closing
   invitation are meant to be rooms, everything between them is a
   page.
   ═══════════════════════════════════════════════════════════════ */
.scene:not(.scene--tall) { min-height: 0; }
.scene--tall             { min-height: 100svh; }
.scene--phase            { min-height: 0; }

/* one spacing token, used by every section type */
:root { --band-y: clamp(4.5rem, 8vw, 7rem); }
.scene, .chapter, .proof, .inset { padding-block: var(--band-y); }
@media (max-width: 780px) {
  :root { --band-y: clamp(3.5rem, 11vw, 5rem); }
}

/* The hero is deliberately not on this rhythm. #top sets 90svh with
   its own padding, for a documented reason: full height pushed the
   orientation band below the fold on laptops. Leaving it alone. The
   closing invitation stays full height as the matching bookend. */
#invite { align-items: center; }

/* the chapter heading carried an extra top margin that made every
   chapter sit lower than its neighbours by about 48px */
.chapter__head { margin-top: 0; }
.chapter__in > :first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   v15 · THE HAZE IS GONE
   .bar::after was a 112px cream gradient across the top of the
   viewport, added as a "scroll edge effect". Over the light
   sections it was invisible. Over the dark photographic scenes it
   read as a milky band that dimmed the image and washed out the
   headline sitting under it. That is the blur the client kept
   seeing, and removing the backdrop-filter never touched it
   because it was never a blur.

   Nothing replaces it. The pill is a solid object with its own
   shadow; it does not need a gradient to separate it from what is
   moving underneath.
   ═══════════════════════════════════════════════════════════════ */
.bar::after,
.bar.is-stuck::after { display: none !important; content: none !important; }

/* the pill's shadow was a very wide, very soft bloom, which read as
   a second halo. Tighter and closer, so the edge stays crisp. */
.bar__in {
  box-shadow: 0 1px 2px rgba(62,54,46,.10), 0 6px 18px -8px rgba(62,54,46,.22);
}
.bar.is-stuck .bar__in {
  box-shadow: 0 1px 2px rgba(62,54,46,.12), 0 8px 22px -8px rgba(62,54,46,.26);
}

/* ═══════════════════════════════════════════════════════════════
   v16 · THE PHOTOGRAPHIC SECTIONS BECOME CARDS
   Every full-bleed scene is inset from the window edge, rounded,
   and clipped, so it reads as a physical plate laid on the page
   rather than a band bleeding to the browser chrome.

   #pattern is deliberately exempt, per the client. It keeps its
   full bleed, which now also gives the page one moment where the
   rhythm breaks instead of five identical plates in a row.

   The light sections between the cards are left full width. That
   is what makes the cards read as cards: they need a ground to sit
   on, and the cream sections are that ground.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --gut:    clamp(.6rem, 1.4vw, 1.4rem);   /* the breathing edge */
  --r-card: clamp(1.1rem, 2vw, 1.85rem);   /* squircle, scaled to the gutter */
}

.scene:not(.scene--bleed) {
  margin-inline: var(--gut);
  margin-block: var(--gut);
  border-radius: var(--r-card);
  overflow: clip;                 /* clips the photograph to the corners */
}

/* the two bookends still want to fill the window, minus their own
   margins, or the card would push the page past one viewport */
.scene--tall:not(.scene--bleed) { min-height: calc(100svh - (var(--gut) * 2)); }
#top { min-height: calc(min(90svh, 900px) - (var(--gut) * 2)); }

/* the corner radius has to survive the veil and the seam-killer,
   both of which are absolutely positioned children */
.scene:not(.scene--bleed) .scene__veil,
.scene:not(.scene--bleed) .scene__img { border-radius: inherit; }
.scene:not(.scene--bleed) + .scene::before { display: none; }

/* #pattern sits between two cards, so its own full-bleed edges need
   to resolve cleanly rather than butt against a rounded corner */
.scene--bleed { margin-block: 0; }

@media (max-width: 600px) {
  :root { --gut: .5rem; --r-card: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   v17 · THE HERO SITS UNDER THE NAV
   The hero card's top edge is pinned to the vertical middle of the
   nav pill, so the pill reads as an object floating half on the
   page ground and half on the photograph. Measured, not guessed:
   the bar's own top padding plus half the pill's height.

   The hero is also shorter. At 95svh it filled the window and gave
   no signal that anything followed it.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --nav-pad: clamp(1rem, 2vw, 1.6rem);   /* .bar padding-top, shared */
  --pill-h:  63px;                        /* measured at the desktop pill */
}
.bar { padding-top: var(--nav-pad); }

#top {
  /* top edge lands on the pill's centre line */
  margin-top: calc(var(--nav-pad) + (var(--pill-h) / 2));
  /* shorter, so the section below is visible without scrolling */
  min-height: 72svh;
}

@media (max-width: 899px) {
  :root { --pill-h: 58px; }
  #top { min-height: 74svh; }
}


/* ═══ v18 · SPECIFICITY FIX ══════════════════════════════════════
   :not() takes the specificity of its ARGUMENT, so .scene:not(#pattern)
   scored (1,1,0) and silently outranked every #top rule at (1,0,0).
   The hero's margin-top and min-height were being written and then
   overruled. Swapping the ID for a .scene--bleed class drops the
   selector to (0,2,0), which sits below #top where it belongs.
   ══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   v19 · THE ACTUAL BLUR
   .bar.is-stuck carried backdrop-filter: blur(16px) saturate(1.3)
   on the HEADER ELEMENT ITSELF, not on the pill. .bar is full width
   and 88px tall, so once the page scrolled and .is-stuck landed, a
   full-width 88px band of blurred page appeared under the nav.

   Every previous fix targeted .bar__in, one level down, which is
   why removing "the blur" never removed it. It also hid from two
   diagnostics: computed styles read at scroll 0 report none because
   .is-stuck is not applied yet, and a diff that hides only .bar__in
   leaves this blur present in both frames so it cancels out.

   Killed here on the element, in every state, with the state class
   included so nothing can reintroduce it further down the cascade.
   ══════════════════════════════════════════════════════════════════ */
.bar,
.bar.is-stuck,
.bar.is-nav-open {
  background: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   v20 · MORE AIR AROUND THE CARDS, TALLER HERO
   The gutter roughly doubles, so the cards sit further off the
   window edge and the page ground reads as a real margin rather
   than a hairline. The corner radius scales with it, otherwise a
   wider inset makes the same radius look tight.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --gut:    clamp(1rem, 3vw, 3rem);        /* was clamp(.6rem, 1.4vw, 1.4rem) */
  --r-card: clamp(1.25rem, 2.4vw, 2.25rem);/* was clamp(1.1rem, 2vw, 1.85rem) */
}

#top { min-height: 80svh; }                /* was 72svh */

@media (max-width: 899px) {
  #top { min-height: 80svh; }
}
@media (max-width: 600px) {
  :root { --gut: 1rem; --r-card: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════════
   v21 · ONE PATTERN DISSOLVES INTO THE PAGE
   #pattern is the one section left full bleed, so its top and
   bottom edges meet the cream page ground either side of it, not
   another photograph. Its veil still carried the old umber feather
   from when it sat between two dark scenes, which put a dark line
   across both edges instead of blending.

   Both edges now resolve to the exact page ground colour, so the
   image appears to emerge from the page and sink back into it.
   ═══════════════════════════════════════════════════════════════ */
.scene--light.scene--bleed .scene__veil {
  background:
    /* the directional veil that carries the type, unchanged */
    linear-gradient(90deg,  rgba(251,246,238,.975) 0%, rgba(251,246,238,.94) 30%,
                            rgba(251,246,238,.60) 56%, rgba(251,246,238,.14) 78%,
                            rgba(251,246,238,0)    92%),
    /* top and bottom fade to the page ground, not to umber */
    linear-gradient(180deg, rgb(251,246,238)    0%,
                            rgba(251,246,238,.86) 6%,
                            rgba(251,246,238,0)  22%,
                            rgba(251,246,238,0)  78%,
                            rgba(251,246,238,.86) 94%,
                            rgb(251,246,238)   100%);
}
/* and the section's own ground matches, so there is no seam even
   before the image loads */
.scene--bleed { background: var(--cream); }

/* ═══════════════════════════════════════════════════════════════
   v22 · FRAMING AND HEIGHT
   The outcome card is wider in ratio than stakes.jpg (2400x1357),
   so cover scales by width and crops vertically. At the default
   50% that took the crop off the top, which is exactly where her
   head is: measured at 8% down the source image. Anchoring the
   crop nearer the top keeps her whole head in frame at every
   card height.

   The closing invitation was a full viewport tall with short
   content, so it read as a mostly empty photograph.
   ═══════════════════════════════════════════════════════════════ */
#outcome .scene__img { object-position: 50% 18%; }

#invite { min-height: 74svh; }
@media (max-width: 899px) { #invite { min-height: 76svh; } }

/* ═══════════════════════════════════════════════════════════════
   EVENTS  ·  added 7 Sep 2026

   Three additions, no more. Everything else on /events/ and the
   webinar page is a component the home page already had.
   ═══════════════════════════════════════════════════════════════ */

/* On the home page the hero clears the floating nav pill through
   its own #top rule. Interior pages need the same clearance, but
   not #top's other baggage (it mirrors its image and sits 80svh
   tall). This is that clearance on its own. */
.scene--first {
  margin-top: calc(var(--nav-pad) + (var(--pill-h) / 2));
  min-height: 74svh;
}

/* ── the event card ─────────────────────────────────────────
   Built as a list so a second event is a copy of one <li> and
   nothing else. Outline and radius are the .cards family, so an
   event reads as the same kind of object as everything else on
   a cream ground. */
.evts { list-style: none; display: grid; gap: 1.4rem; margin: 2.4rem 0 0; padding: 0; }

.evt {
  display: grid; grid-template-columns: minmax(0, 38%) 1fr;
  align-items: stretch;
  border-radius: var(--r-out); overflow: clip;
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--teal-d);
}
.evt__fig { display: block; position: relative; min-height: 15rem; }
.evt__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evt__body { padding: clamp(1.6rem, 3vw, 2.5rem); display: grid; align-content: start; gap: 0; }

.evt__k {
  font-family: var(--f); font-size: .625rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-t); margin: 0 0 .85rem;
}
.evt__t {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.16;
  letter-spacing: -.014em; color: var(--teal); margin: 0;
}
.evt__t a { color: inherit; text-decoration: none; }
/* the whole card is not a link, so the title needs a real focus ring */
.evt__t a:hover { color: var(--teal-d); }
.evt__t a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 3px; }

.evt__s {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.4;
  color: var(--ink-2); margin: .5rem 0 0; max-width: 40ch;
}
.evt__d { color: var(--ink-2); font-size: .99rem; line-height: 1.62; margin: 1.15rem 0 0; max-width: 46ch; }
.evt__a { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin: 1.7rem 0 0; }
.evt__a .link2 { color: var(--teal); border-bottom-color: rgba(37,100,109,.4); }
.evt__a .link2:hover { border-bottom-color: var(--teal); }

/* ── the meta strip ─────────────────────────────────────────
   Date, length, format. Dots between, never on the first item,
   and it wraps to two lines cleanly on a narrow card. */
.emeta {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: .3rem 1.05rem; margin: 1.2rem 0 0; padding: 0;
  /* 22 Sep 2026: was .78rem (12px). The client read the page on a
     desktop and could barely see the date, which on a registration
     page is the single fact a visitor most needs. 15px, with the
     tracking eased back because larger caps need less of it. */
  font-size: .94rem; letter-spacing: .04em; color: var(--gold-t);
}
.emeta li { position: relative; }
.emeta li + li::before {
  content: ""; position: absolute; left: -.58rem; top: .52em;
  width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .55;
}
.emeta time { font-variant-numeric: tabular-nums; }

/* on the dark hero the same strip sits on the photograph */
/* The two places the date is the headline fact: the hero and the
   closing card. Bigger again, and a little heavier, so it scans
   before the buttons do. */
.emeta--hero {
  margin: 0 0 1.9rem; color: var(--sand);
  font-size: 1.06rem; font-weight: 500; letter-spacing: .03em;
  /* Stacked, not inline. At 17px the four facts no longer fit the
     38rem scene box on one line, and a wrapped inline list puts a
     separator dot at the start of the second line. This is a schedule
     block, so rows read better than a run-on sentence anyway, and it
     matches what the phone breakpoint already does. */
  display: grid; gap: .42rem; justify-items: start;
}
.emeta--hero li + li::before { display: none; }

/* ── footer mark is a link on interior pages ───────────────── */
.foot__m a { color: inherit; text-decoration: none; }
.foot__m a:hover { color: var(--sand); }

@media (max-width: 760px) {
  .evt { grid-template-columns: 1fr; }
  .evt__fig { min-height: 12rem; }
}

/* The eyebrow on a dark scene is not the cream pill it is on light
   ground. It is near white type on a 12% white veil, so its contrast
   is decided entirely by the photograph underneath it. On the webinar
   hero the type sits over the sunlit half of architecture.jpg and the
   10px eyebrow measured 3.44:1 against the 4.5 it needs.

   Same remedy the home page gives #work and #join: more plate under
   this one box, rather than darkening every scene on the site to fix
   one bright frame. */
.scene--plate .scene__box::before {
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--u), .78) 0%,
    rgba(var(--u), .76) 40%,
    rgba(var(--u), .68) 58%,
    rgba(var(--u), .50) 72%,
    rgba(var(--u), .27) 84%,
    rgba(var(--u), .08) 93%,
    rgba(var(--u), 0) 100%);
}

/* The hero veil is bottom weighted by design, because on the home page
   the fine print lives at the bottom of the box. Here the eyebrow sits
   at the very top, in the weakest part of that gradient, so this hero
   also gets a top stop. The photograph keeps its left half, which is
   where the subject is. */
.scene--plate .scene__veil::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--u), .50) 0%, rgba(var(--u), .30) 12%, rgba(var(--u), 0) 30%);
  border-radius: inherit;
}
/* The top stop exists for the eyebrow, which sits at the top of the
   TEXT side. Unmasked it ran the full width and dimmed the subject's
   face on the other side of the frame. Feather it off the photograph's
   half: the mask is transparent over the subject, solid over the type. */
.scene--plate.scene--r .scene__veil::after {
  -webkit-mask-image: linear-gradient(90deg,  transparent 38%, #000 62%);
          mask-image: linear-gradient(90deg,  transparent 38%, #000 62%);
}
.scene--plate.scene--l .scene__veil::after {
  -webkit-mask-image: linear-gradient(270deg, transparent 38%, #000 62%);
          mask-image: linear-gradient(270deg, transparent 38%, #000 62%);
}

/* .two was written for dark scenes, so its colours are the on-dark
   pair. The webinar page runs it on cream, where those are invisible. */
.two--light .two__h { color: var(--teal); }
.two--light .two__d { color: var(--ink-2); }

/* circle.jpg is an interior and its left half is a sunlit wall, the
   brightest ground any type sits on across this site. The gold list
   titles measured 4.12:1 there against the 4.5 they need, and they sit
   high in the frame where the shared .scene--plate top stop has already
   fallen away. Same per-scene remedy the home page gives #programme. */
#hour .scene__veil::after {
  background: linear-gradient(180deg,
    rgba(var(--u), .60) 0%,
    rgba(var(--u), .54) 22%,
    rgba(var(--u), .38) 44%,
    rgba(var(--u), .16) 66%,
    rgba(var(--u), 0) 84%);
}

/* soft-dark.jpg is a 2:3 portrait and the event card's image column is
   wider than it is tall, so cover() crops top and bottom. Centred, the
   visible window starts at 21% of the source and the top of her head is
   at 17%: cropped. Biasing the crop upward puts the window at roughly
   8% to 66%, which keeps her whole head and the rock she is sitting on.
   Measured, not guessed. */
.evt__fig img { object-position: 50% 20%; }

/* ═══ WEBINAR PAGE · crop anchors ══════════════════════════════
   These frames were composed with the subject pinned to one edge so
   the type could own the other two thirds. Several of the sections
   holding them run much taller than 16:9 once nine list lines and six
   paragraphs are in the box, so object-fit: cover scales by height
   and trims the SIDES. Centred, that trims the subject off the edge
   she was deliberately placed on. Anchor the crop to her side and the
   loss comes out of the empty ground under the text instead. */
#head     .scene__img { object-position: 0% 50%; }     /* freedom.jpg,  subject left  */
#reason   .scene__img { object-position: 100% 50%; }   /* answered.jpg, subject right */
#discover .scene__img { object-position: 100% 50%; }   /* discover.jpg, subject right */
#invite   .scene__img { object-position: 100% 50%; }   /* live-call.jpg, subject right */

/* ═══ HERO VEIL, MIRRORED FOR TYPE-ON-THE-RIGHT ═══════════════════
   .scene--hero .scene__veil was written for the home page hero, where
   the type sits on the left: its diagonal runs at 78deg, 70% umber on
   the left fading to nothing on the right. It outranks .scene--r
   because it is declared later at equal specificity. On a hero that
   puts its type on the RIGHT that recipe lands the full 70% on the
   photograph's subject and leaves the text side almost bare, which is
   exactly backwards. Same three layers, diagonal mirrored to 282deg. */
.scene--hero.scene--r .scene__veil {
  background:
    linear-gradient(282deg,
      rgba(var(--u),.70) 0%,  rgba(var(--u),.62) 22%, rgba(var(--u),.50) 40%,
      rgba(var(--u),.35) 56%, rgba(var(--u),.20) 70%, rgba(var(--u),.08) 84%,
      rgba(var(--u),0) 96%),
    linear-gradient(0deg,
      rgba(var(--u),.76) 0%,  rgba(var(--u),.60) 16%, rgba(var(--u),.36) 34%,
      rgba(var(--u),.14) 52%, rgba(var(--u),0) 74%),
    linear-gradient(180deg, rgba(var(--u),.34) 0%, rgba(var(--u),0) 22%);
}

/* .acts was tuned for the hero, where it follows a paragraph. Inside an
   inset it now follows a .closer, the section's emphatic last line, and
   sat six pixels under it. The button is a new thought; give it a beat. */
.inset__text .acts { margin-top: 1.7rem; }

/* ═══════════════════════════════════════════════════════════════
   PHONE  ·  15 Sep 2026  ·  after the client's report that copy was
   not wrapping on her phone.
   ═══════════════════════════════════════════════════════════════ */

/* 1 · A button has to be allowed to wrap on a phone.
   .cta is white-space: nowrap so a label never breaks mid-phrase on a
   desktop. On a phone the longest label, "Yes, I Want to See What's
   Been Shaping Me", is wider than the screen, and a nowrap flex item
   makes its grid parent grow to hold it: the section box measured
   432px on a 375px viewport, and the heading, the three bullets and
   the button were all clipped at the right edge. Two fixes, both
   needed: the boxes may never exceed their container, and on a phone
   the label may wrap. */
.scene__box, .inset__text, .chapter__in, .evt__body { min-width: 0; max-width: 100%; }
@media (max-width: 520px) {
  .cta { white-space: normal; text-align: left; max-width: 100%; line-height: 1.3; }
  .cta__t { flex: 1 1 auto; min-width: 0; }
}

/* 2 · The date strip stacks on a phone. Inline, a wrapped line began
   with a stray separator dot. */
@media (max-width: 520px) {
  .emeta { display: grid; gap: .34rem; }
  .emeta li + li::before { display: none; }
}

/* 3 · Ten pixel caps with wide tracking are at the floor of legibility
   on a phone. Eleven, tracked a little tighter. */
@media (max-width: 520px) {
  .eyebrow, .evt__k { font-size: .6875rem; letter-spacing: .16em; }
}

/* 4 · Tap areas. The drawn size of these controls is right; the touch
   target was under 44px. A pseudo element widens what a thumb can hit
   without moving a pixel of what is drawn. The burger simply grows. */
.link2, .bar__mark, .evt__t a, .foot__m a { position: relative; }
.link2::before, .bar__mark::before, .evt__t a::before, .foot__m a::before {
  content: ""; position: absolute;
  left: -.4rem; right: -.4rem; top: -.7rem; bottom: -.7rem;
}
.bar__burger { width: 44px; height: 44px; }

/* 5 · The menu carries the primary action.
   Under 900px the nav pill has no room for the button and it is
   hidden. With the menu open it comes back as a full-width bar pinned
   to the bottom of the overlay, where a thumb rests: the one thing
   the site asks for should be in the menu, not only in the page
   underneath it. .bar and .bar__in carry no transform, so fixed here
   means fixed to the viewport. */
@media (max-width: 900px) {
  .bar.is-nav-open .bar__cta {
    display: flex; justify-content: center; align-items: center;
    position: fixed; z-index: 3;
    left: 1.25rem; right: 1.25rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    min-height: 58px; padding: 1.05rem 1.5rem;
    text-align: center; white-space: normal;
  }
}

/* The webinar kicker, "A free live webinar with Kaila Leilani, L.Ac.,
   Dipl. OM", is 52 characters and .plain caps at 38ch, so it broke
   after "L.Ac.," and left "Dipl. OM" alone on a second line. The hero
   box is 38rem wide and holds it comfortably. Lift the cap; on a phone
   it still wraps, at the non-breaking spaces set in the markup. */
.plain--line { max-width: none; }

/* ═══════════════════════════════════════════════════════════════
   TWO ASKS  ·  21 Sep 2026
   The community came back alongside the webinar. Wherever both
   appear, one is the primary .cta and the other is this: same pill,
   same height, same icon well, but outlined on transparent, so the
   pair reads as a first and a second choice rather than two rivals.
   On dark ground it is cream on cream outline; on light ground, teal
   on teal outline, matching how the primary already flips.
   ═══════════════════════════════════════════════════════════════ */
.cta--ghost {
  background: transparent; color: var(--on-d);
  box-shadow: inset 0 0 0 1.5px rgba(252,247,238,.62);
}
.cta--ghost .cta__i { background: rgba(252,247,238,.14); }
.cta--ghost:hover {
  background: rgba(252,247,238,.10);
  box-shadow: inset 0 0 0 1.5px rgba(252,247,238,.9);
}
.cta--ghost:hover .cta__i { background: rgba(252,247,238,.22); }

.chapter .cta--ghost, .scene--light .cta--ghost, .inset--light .cta--ghost {
  background: transparent; color: var(--teal);
  box-shadow: inset 0 0 0 1.5px var(--teal);
}
.chapter .cta--ghost .cta__i, .scene--light .cta--ghost .cta__i, .inset--light .cta--ghost .cta__i {
  background: rgba(37,100,109,.10);
}
.chapter .cta--ghost:hover, .scene--light .cta--ghost:hover, .inset--light .cta--ghost:hover {
  background: rgba(37,100,109,.06);
}

/* ═══════════════════════════════════════════════════════════════
   PHONE · THE HERO SPLITS  ·  22 Sep 2026

   On a phone the hero was a photograph with the whole of the hero
   copy laid over it. To keep that type legible the mobile veil is a
   heavy uniform wash across the entire frame, which means the
   photograph is almost entirely hidden in order to serve the words:
   the picture loses and the words do not really win either. The
   client's note was simply that it does not look good, and she is
   right about the cause.

   So on a phone the hero stops overlapping and starts stacking: the
   photograph is a banner at the top with nothing on it and no wash
   over it, and the copy sits underneath on solid ground. Same card,
   same rounded corners, same order. Every type colour still works
   because the panel below is the same dark the veil used to be.

   Scoped to .scene--hero. The other scenes carry far less copy and
   read fine as overlays.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .scene--hero {
    display: block;
    /* every min-height that made it a viewport-filling stage */
    min-height: 0;
    padding: 0;
    background: rgb(var(--u));
    align-items: initial;
  }
  /* the picture element is the banner now, not a backdrop */
  .scene--hero > picture { display: block; }
  .scene--hero .scene__img {
    position: static; z-index: auto;
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }
  /* nothing sits on the photograph, so nothing needs to be dimmed */
  .scene--hero .scene__veil { display: none; }
  .scene--hero .scene__box { padding: clamp(1.6rem, 6vw, 2.2rem); }
  .scene--hero .scene__box::before { display: none; }
}
/* #top and .scene--first set their heights with an id and a class that
   both outrank the block above, so they are unset here explicitly. */
@media (max-width: 780px) {
  #top, .scene--hero.scene--first, .scene--hero.scene--tall { min-height: 0; }
}

@media (max-width: 780px) {
  /* The card's top edge lands on the nav pill's centre line, which was
     right when the top of a hero was sky behind a scrim. Now it is the
     top of a photograph, and the pill was sitting on the subject's
     head. Push the banner clear; the dark panel fills behind the pill,
     which is cream, so it reads as intended rather than as a gap. */
  .scene--hero { padding-top: calc(var(--pill-h) / 2 + var(--nav-pad) + .7rem); }

  /* Cropping a 16:9 frame into a 4:3 banner takes a third off the
     width, so each one has to keep the side its subject is on.
     .scene--l means the type sits left and the subject is right;
     .scene--r is the mirror. The ids are needed because #head already
     sets an anchor for the wide layout and outranks a bare class. */
  #head.scene--l .scene__img { object-position: 76% 50%; }
  #head.scene--r .scene__img { object-position: 0% 50%; }
  #top .scene__img { object-position: 50% 40%; }
}