/* ==========================================================================
   LOVETOPUS.COM — journey.css — THE STAGED DIVE (homepage) · v2.1
   --------------------------------------------------------------------------
   Layers ON TOP of ocean.css (tokens, buttons, rows, capture, nav, footer
   base, typography). This file owns the homepage's staged-dive composition:
   the continuous painted fresco background, eight 100svh proximity-snap
   stages floating over it, the coverflow crew, the Book-1 cover object, and
   the golden finale + editorial colophon.

   DOCTRINE (section_rework_v2.md v2.1):
   - ONE painted dive: a single continuous fresco is the page background,
     panned by ONE rAF loop (journey.js) with a registration-aware transfer
     so each band lands under its stage (band E held across S5a + S5b).
   - EIGHT stages, each a place at a depth: S1 A · S2 B · S3 C · S4 D ·
     S5a + S5b (both Band E) · S6 F · footer. Each is min-height:100svh with
     scroll-snap-align:start; the document scroller snaps y proximity.
   - TWO compositions only: the reading lockup (S1, S3) and the center axis
     (S2, S4, S5a, S5b, S6).
   - NO AREA SCRIMS. The fresco runs at 100% colour everywhere. Readability =
     placement in the painted calm zones + text-shadow + two ratified ≤18%
     under-text vignettes (S3 / S6 only). Those vignettes are soft radials
     bound to the text block (they scroll 1:1 WITH the text, never sweeping a
     hard edge across the differently-panning fresco — skill lesson 2026-07-10).
   - transform / opacity / filter ONLY animate; no layout-property animation.
   - Reduced-motion & No-JS: every stage is a complete static page (§ end).
   ========================================================================== */

body { overflow-anchor: none; }               /* never re-anchor on height change */

/* The document scroller snaps gently (proximity → never traps scroll / a11y). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
}

/* --------------------------------------------------------------------------
   0. THE ONE WATER COLUMN (fallback under the fresco)
   -------------------------------------------------------------------------- */
.ocean {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   0b. THE FRESCO — the page's continuous painted background.
   Viewport-fixed window; the slice column stacks at natural aspect and
   journey.js pans it so each band registers under its stage. Fixed → never
   contributes to document height (no CLS, no scrollHeight breathing).
   -------------------------------------------------------------------------- */
.fresco {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  /* The fallback water gradient lives on the fresco's OWN background (behind
     its child slice column). A position:fixed element is hoisted out of its
     ancestor's stacking context in Chrome, so a sibling/parent gradient would
     paint OVER it — putting the fallback here is the only bulletproof layer.
     If the slices fail or letterbox on ultra-wide, this is still the ocean. */
  background:
    linear-gradient(to bottom,
      #8FC9D2 0%, #4FA0AF 7%, #3C8B9A 15%, #2E7D8E 23%, #216173 33%,
      #16455C 41%, #103A4E 49%, #1A5468 56%, #123F52 62%, #0B2A3C 70%,
      #07202E 77%, #0A2838 83%, #2E7D8E 90%, #276A7C 95%, #0B2A3C 100%);
}
.fresco__col {
  position: absolute;
  top: 0; left: 0; right: 0;
  will-change: transform;
  transform: translate3d(0, var(--fresco-y, 0px), 0);
}
.fresco__slice {
  display: block;
  width: 100%;
  height: auto;                                /* natural aspect — never stretched */
}

/* --------------------------------------------------------------------------
   1. THE STAGE PRIMITIVE — one section = one 100svh snap stop.
   overflow:clip keeps reveal transforms from ever growing the document.
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  overflow: clip;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 15vh, 168px) var(--page-pad) clamp(72px, 12vh, 128px);
  isolation: isolate;
}
.stage__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

/* --- composition A: the reading lockup (S1 left focal, S3 book) ---------- */
.lockup { display: flex; align-items: center; gap: clamp(32px, 5vw, 72px); }
.lockup--left .copy--left { max-width: 34rem; }
/* S1 hero: text sits in the left third; Hugo+Finley are painted in the fresco. */
.lockup--left { justify-content: flex-start; }

/* --- composition B: the center axis (everything on one centred column) ---- */
.center-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}
.center-axis--narrow { max-width: 620px; }
/* keep the narrow constraint winning over the wide .stage__inner (they share a
   single-class specificity, and a later responsive .stage__inner rule would
   otherwise widen the column) */
.stage__inner.center-axis--narrow { max-width: 620px; }
.center-axis .display-l,
.center-axis .display-xl { max-width: 20ch; margin-inline: auto; }
.center-axis .lede,
.center-axis .body-text { max-width: 54ch; margin-inline: auto; }
/* a veil wrapper is a transparent shrink-to-fit block on the axis */
.center-axis > .veil { display: flex; flex-direction: column; align-items: center; }

/* --------------------------------------------------------------------------
   2. READABILITY WITHOUT SCRIMS — placement + text-shadow (§0.5).
   Applied to the TEXT, never to an area. Brighter bands get the stronger
   shadow. No backdrop-blur, no panels, anywhere.
   -------------------------------------------------------------------------- */
.scene .display-xl, .scene .display-l, .scene .lede, .scene .body-text,
.scene .kicker, .scene .caption, .scene .trust-line, .scene .honesty,
.scene .thermocline, .scene .method-link, .scene .actions,
.cf__cap > *, .bookcover__peek {
  text-shadow: 0 1px 2px rgba(7, 32, 46, 0.6), 0 2px 10px rgba(7, 32, 46, 0.55),
               0 0 26px rgba(7, 32, 46, 0.4);
}
/* Brighter bands (hero surface, light shaft, gold bloom): a tighter dark halo
   layered under a wider one, so white type stays legible over the painted
   light without an area scrim (the sanctioned no-scrim tool). */
.s1 .display-xl, .s1 .lede, .s1 .caption, .s1 .actions,
.s5a .trust-line, .s5a .honesty, .s5a .thermocline,
.s5b .display-l, .s5b .lede, .s5b .caption, .s5b .kicker,
.s6 .display-xl, .s6 .body-text, .s6 .caption, .s6 .kicker {
  text-shadow: 0 1px 2px rgba(7, 32, 46, 0.72), 0 1px 6px rgba(7, 32, 46, 0.66),
               0 2px 16px rgba(7, 32, 46, 0.55), 0 0 40px rgba(7, 32, 46, 0.4);
}

/* LOCAL under-text water-shadow — the owner-ratified device (≤18%, soft
   radial, bound 1:1 to the TEXT BLOCK, moves WITH the content). It is NEVER an
   area scrim and NEVER an alpha-ramp along the scroll axis over the fresco:
   radial + glued to the text, so it never sweeps the painting independently
   (skill lesson 2026-07-10). It FADES IN with the text so flagship word builds
   stay unobscured. Applied wherever text sits over painted light (S1 rays ·
   S2/S4 open water · S5 shaft · S6 gold); S3 keeps its own over the pocket.
   Law 2: soft ellipse fading fully to transparent — no traceable rectangle. */
.veil, .copy--book, .s1 .copy--left, .s5b__pool { position: relative; }
.veil::before, .copy--book::before,
.s1 .copy--left::before, .s5b__pool::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.55em -1.25em;
  border-radius: 46%;
  /* flat 18% across the whole text block, softening only in the outer margin
     (so the ≤18% ceiling is applied uniformly, not just at the centre) */
  background: radial-gradient(146% 134% at 50% 50%,
      rgba(7, 32, 46, var(--veil, 0.18)) 0%,
      rgba(7, 32, 46, var(--veil, 0.18)) 82%,
      rgba(7, 32, 46, 0) 100%);
  pointer-events: none;
}
/* flagship hero: hold the veil back so the word-by-word build stays clean.
   (S5a and S6 use explicit .veil wrappers around ONLY their text so the veil
   hugs the copy, never the full-width column — Law 2: no area scrim.) */
.s1 .copy--left { --vd: 460ms; }
/* fade the veil in WITH the text (never before it) */
html.js .veil::before, html.js .copy--book::before,
html.js .s1 .copy--left::before, html.js .s5b__pool::before { opacity: 0; }
html.js .scene.in .veil::before, html.js .s3.in .copy--book::before,
html.js .s1.in .copy--left::before, html.js .s5b.in .s5b__pool::before {
  opacity: 1;
  transition: opacity 700ms var(--ease-drift);
  transition-delay: var(--vd, 300ms);
}

/* --------------------------------------------------------------------------
   3. ENTRANCE VOCABULARY (§0.4)
   - .enter        : single-block "materialize from soft blur" (connective).
   - .word         : flagship word-by-word build (hero + finale only).
   - .kicker/.caption run faster (400ms). Everything time-driven, never scrubbed.
   The transition lives on the revealed side so it always runs to completion.
   -------------------------------------------------------------------------- */
html.js .enter {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(7px);
}
html.js .in .enter,
html.js .scene.in .enter,
html.js .colophon.in .enter {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 560ms var(--ease-drift),
    transform 560ms var(--ease-drift),
    filter 560ms var(--ease-drift);
  transition-delay: var(--d, 0ms);
}
/* kicker + caption: crisp 400ms announcements */
html.js .in .kicker.enter, html.js .in .caption.enter,
html.js .scene.in .kicker.enter, html.js .scene.in .caption.enter {
  transition-duration: 400ms;
}

/* FLAGSHIP word build — each word surfaces from deeper blur (14px), 700ms. */
html.js .build-flagship .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(14px);
  white-space: pre;
}
html.js .scene.in .build-flagship .word {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 700ms var(--ease-drift),
    transform 700ms var(--ease-drift),
    filter 700ms var(--ease-drift);
  transition-delay: var(--d, 0ms);
}

/* --------------------------------------------------------------------------
   4. KICKER — small-caps announcement with the glowing-dot marker (§0.3)
   -------------------------------------------------------------------------- */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.center-axis > .kicker { justify-content: center; }
.copy .kicker { justify-content: flex-start; }
.kicker__dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--feelstream));
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--dot, var(--feelstream)) 55%, transparent);
}

/* --------------------------------------------------------------------------
   5. S1 · HERO (Band A — reading lockup, text left)
   -------------------------------------------------------------------------- */
.s1 { padding-top: clamp(120px, 18vh, 200px); }
.s1 .lede { max-width: 32rem; }
.s1 .caption { margin-top: var(--s-5); opacity: 0.82; }
.s1 .actions { margin-top: var(--s-7); }

/* --------------------------------------------------------------------------
   6. S2 · WORLD + COVERFLOW (Band B — center axis) (§2b)
   -------------------------------------------------------------------------- */
.coverflow {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: clamp(28px, 4vh, 48px) auto 0;
  outline: none;
}
.cf__stage { position: relative; height: clamp(320px, 52svh, 520px); }
.cf__track { list-style: none; margin: 0; padding: 0; height: 100%; position: relative; }

/* NO-JS / base: all ten friends as a static, fully-informative column. */
.cf__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--s-6);
}
.cf__ui, .cf__live { display: none; }         /* controls inert without JS */

/* JS: becomes the coverflow. Slides stack absolute; transform set per-frame
   by journey.js (translateX + scale). Only the centre caption shows. */
html.js .cf__stage { overflow: clip; }
html.js .cf__track { position: absolute; inset: 0; }
html.js .cf__slide {
  position: absolute;
  inset: 0;
  padding: 0;
  justify-content: flex-start;
  transition: transform 450ms var(--ease-drift),
              opacity 450ms var(--ease-drift),
              filter 450ms var(--ease-drift);
}
html.js .cf__art {
  flex: none;
  height: 72%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
/* composite-side soft glow-rim so each friend sits IN the water (fresco_map
   §3) — tunable in CSS, never baked into the alpha. Centre only. */
html.js .cf__slide.is-center .cf__art::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 4%;
  width: min(70%, 320px); height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(60% 60% at 50% 62%,
      rgba(140, 232, 223, 0.13), rgba(140, 232, 223, 0.04) 46%, transparent 72%);
  pointer-events: none;
}
html.js .cf__art img {
  position: relative;
  max-height: 100%;
  max-width: min(84%, 340px);
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(4, 16, 24, 0.42));
}
/* caption under the CENTRE character only — clean text on the fresco */
html.js .cf__cap {
  flex: none;
  width: 100%;
  padding-top: var(--s-4);
  opacity: 0;
  transition: opacity 300ms var(--ease-drift);
}
html.js .cf__slide.is-center .cf__cap { opacity: 1; }
.cf__name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--h3);
  line-height: 1.15;
  font-weight: 600;
}
.cf__kicker {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--k, var(--feelstream));
}
.cf__line {
  display: block;
  margin-top: var(--s-3);
  max-width: 34ch;
  margin-inline: auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--lede);
  line-height: 1.4;
  opacity: 0.95;
}

/* coverflow controls: real buttons ≥44px, arrows + glowing dots */
html.js .cf__ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.cf__arrow {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--paper) 55%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-drift),
              background-color var(--dur-ui) var(--ease-drift);
}
.cf__arrow:hover { border-color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }
.cf__dots { display: flex; align-items: center; gap: 6px; }
.cf__dot {
  width: 32px; height: 44px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cf__dot::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper);
  opacity: 0.4;
  box-shadow: 0 0 6px 1px rgba(191, 244, 238, 0.3);
  transition: opacity var(--dur-ui) var(--ease-drift), transform var(--dur-ui) var(--ease-drift);
}
.cf__dot[aria-current="true"]::before { opacity: 1; transform: scale(1.25); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   7. S3 · BOOK 1 (Band C — reading lockup, cover LEFT, text RIGHT)
   -------------------------------------------------------------------------- */
.lockup--book { justify-content: center; align-items: center; }
.lockup--book .copy--book { flex: 1 1 44%; max-width: 34rem; }
.s3 .body-aside { display: block; margin-top: var(--s-3); font-style: italic; opacity: 0.82; }

/* THE COVER OBJECT — presented as a tilted object riding the golden pocket. */
.bookcover {
  flex: none;
  display: block;
  position: relative;
  width: clamp(200px, 30vw, 340px);
  text-decoration: none;
  transform-style: preserve-3d;
  outline-offset: 6px;
}
.bookcover__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  transform: perspective(1200px) rotateY(8deg) rotateZ(-3deg);
  /* warm glow-rim from the pocket light + cool depth shadow falling below */
  filter: drop-shadow(0 0 48px rgba(255, 206, 128, 0.35))
          drop-shadow(0 24px 48px rgba(7, 32, 46, 0.5));
  transition: transform 420ms var(--ease-drift), filter 420ms var(--ease-drift);
}
/* the page's ONLY idle float (sanctioned by the motion tokens) */
@media (prefers-reduced-motion: no-preference) {
  html.js .s3.in .bookcover__img { animation: cover-float 7s var(--ease-drift) 1.2s infinite alternate; }
}
@keyframes cover-float {
  from { transform: perspective(1200px) rotateY(8deg) rotateZ(-3deg) translateY(-4px); }
  to   { transform: perspective(1200px) rotateY(8deg) rotateZ(-3deg) translateY(4px); }
}
.bookcover__peek {
  display: block;
  margin-top: var(--s-4);
  text-align: center;
  font-size: var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-ui) var(--ease-drift), transform var(--dur-ui) var(--ease-drift);
}
/* hover/focus: lift, tilt eases toward flat, glow brightens, label fades in */
.bookcover:hover .bookcover__img, .bookcover:focus-visible .bookcover__img {
  transform: perspective(1200px) rotateY(4deg) rotateZ(-1.5deg) translateY(-4px) scale(1.02);
  filter: drop-shadow(0 0 60px rgba(255, 206, 128, 0.5))
          drop-shadow(0 28px 54px rgba(7, 32, 46, 0.52));
  animation: none;
}
.bookcover:hover .bookcover__peek, .bookcover:focus-visible .bookcover__peek {
  opacity: 0.9; transform: none;
}

/* the cover's own reveal: rises from below out of soft focus (§3 mid tier) */
html.js .reveal-cover {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(10px);
}
html.js .s3.in .reveal-cover {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 900ms var(--ease-drift), transform 900ms var(--ease-drift), filter 900ms var(--ease-drift);
  transition-delay: 250ms;
}

/* --------------------------------------------------------------------------
   8. S4 · METHOD + PICKER (Band D — center axis) (§4)
   -------------------------------------------------------------------------- */
.picker { margin-top: var(--s-7); width: 100%; }
.picker__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-drift) var(--ease-drift);
  overflow: hidden;
  text-align: start;
}
.picker.is-open .picker__panel { grid-template-rows: 1fr; }
.picker__rows { min-height: 0; }
.picker__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; column-gap: var(--s-7); }
@media (min-width: 800px) { .picker__list { columns: 2; } }
.picker__list li { break-inside: avoid; }
.picker__row {
  display: flex; align-items: baseline; gap: var(--s-4);
  min-height: 44px; padding: var(--s-3) var(--s-1);
  border-bottom: 1px solid rgba(247, 245, 241, 0.14);
  text-decoration: none;
}
.picker__row:hover .picker__challenge, .picker__row:focus-visible .picker__challenge { opacity: 1; }
.picker__row .row__dot { align-self: center; }
.picker__challenge { flex: 1; font-size: var(--ui); opacity: 0.9; transition: opacity var(--dur-ui) var(--ease-drift); }
.picker__realm { flex: none; font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; opacity: 0.66; white-space: nowrap; }
/* the visible secondary exit — the parent whose feeling is #7–14 sees it now */
.picker__exit { margin-top: var(--s-6); display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   9. S5a · TRUST (Band E upper — center axis). Thermocline = announcement.
   -------------------------------------------------------------------------- */
.thermocline--draw {
  display: flex; align-items: center; gap: var(--s-4);
  max-width: 460px; margin-inline: auto;
  font-size: var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: var(--s-7);
}
.thermocline--draw::before, .thermocline--draw::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(247, 245, 241, 0.28);
  transform: scaleX(0);
  transform-origin: center;
}
.thermocline--draw::before { transform-origin: right; }
.thermocline--draw::after  { transform-origin: left; }
html.js .s5a.in .thermocline--draw::before,
html.js .s5a.in .thermocline--draw::after {
  transform: scaleX(1);
  transition: transform 800ms var(--ease-drift);
}
.s5a .trust-line {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.28;
  font-weight: 600;
  max-width: 24ch;
  margin-inline: auto;
}
/* the page's most solemn entrance — a deliberately slow 900ms surface */
html.js .s5a.in .trust-line.enter { transition-duration: 900ms; }
.s5a .honesty {
  max-width: 54ch;
  margin: var(--s-6) auto 0;
  font-size: var(--caption);
  line-height: 1.55;
  opacity: 0.76;
}
.s5a .method-link { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   10. S5b · CAPTURE (Band E lower — center axis, inside the light column)
   -------------------------------------------------------------------------- */
.s5b__pool {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  padding: var(--s-7) var(--s-5) var(--s-6);
}
/* NB: the S5b under-text treatment is the shared dark veil (§2), which sits on
   .s5b__pool::before — it darkens the bright light-shaft under the whole
   capture block. (The earlier "welcome brighten" glow was retired: it lifted
   the bright shaft further and hurt contrast; the painted shaft is spotlight
   enough.) */
.s5b .capture { margin-inline: auto; text-align: start; }
.s5b .capture__controls { justify-content: center; }

/* the gold Bubbloon that rises once on capture success */
.s5b__bubbloon {
  position: absolute;
  left: 50%; bottom: 34%;
  width: 26px; height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255, 236, 180, 0.95), rgba(242, 193, 78, 0.6) 60%, transparent 72%);
  box-shadow: 0 0 16px 4px rgba(242, 193, 78, 0.4);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
.s5b__pool.bubbloon-go .s5b__bubbloon { animation: bubbloon-rise 2.6s var(--ease-drift) 1; }
@keyframes bubbloon-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-64vh) scale(1); }
}

/* --------------------------------------------------------------------------
   11. S6 · FINALE (Band F — center axis). Gold = light in the water only.
   -------------------------------------------------------------------------- */
.s6__finale { max-width: 760px; }
.s6__finale .display-xl { max-width: 20ch; margin-inline: auto; }
.s6__finale .body-text { margin: var(--s-6) auto 0; max-width: 46ch; }
.s6__finale .actions { justify-content: center; margin-top: var(--s-7); }
.s6__finale .caption { margin-top: var(--s-4); opacity: 0.82; }
.s6__finale .btn--primary { font-size: var(--label); padding: 18px 40px; }   /* largest CTA */

/* the warm bloom rising from below the finale */
.s6::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: radial-gradient(80% 52% at 50% 92%,
      rgba(255, 206, 128, 0.30), rgba(255, 206, 128, 0.08) 44%, transparent 68%);
  pointer-events: none;
}

/* the finale constellation — the map warm-relit, ONE overlay above the glow */
.s6__constellation {
  position: relative;
  max-width: 420px;
  margin: var(--s-6) auto var(--s-7);
  filter: sepia(0.42) saturate(1.3) hue-rotate(-8deg) brightness(1.08)
          drop-shadow(0 0 34px rgba(242, 193, 78, 0.4));
  border-radius: 12px;
}
.s6__constellation img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 60%, transparent 100%);
}
/* the one sanctioned long beat — gold glow fades up from 0 (1200ms) */
html.js .s6__constellation {
  opacity: 0; transform: scale(0.94);
  filter: blur(8px) sepia(0.42) saturate(1.3) hue-rotate(-8deg) brightness(1.08);
}
html.js .s6.in .s6__constellation {
  opacity: 1; transform: none;
  filter: sepia(0.42) saturate(1.3) hue-rotate(-8deg) brightness(1.08) drop-shadow(0 0 34px rgba(242, 193, 78, 0.4));
  transition: opacity 1200ms var(--ease-drift), transform 1200ms var(--ease-drift), filter 1200ms var(--ease-drift);
  transition-delay: var(--d, 0ms);
}

/* CTA one-time glow pulse on entry (entrance-only; never repeats). Uses
   backwards fill so it never overrides :hover afterwards (skill lesson). */
@media (prefers-reduced-motion: no-preference) {
  html.js .s6.in .btn--pulse { animation: cta-pulse 900ms var(--ease-drift) 2s 1 backwards; }
}
@keyframes cta-pulse {
  0%   { filter: drop-shadow(0 0 0 rgba(240, 138, 75, 0)); }
  45%  { filter: drop-shadow(0 0 18px rgba(240, 138, 75, 0.55)); }
  100% { filter: drop-shadow(0 0 0 rgba(240, 138, 75, 0)); }
}

/* --------------------------------------------------------------------------
   12. AUDIO ROW (§3.5) — the Murmub affordance.
   -------------------------------------------------------------------------- */
.audiorow {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-6);
  max-width: 34rem;
}
.audiorow__btn {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--paper) 55%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-drift), background-color var(--dur-ui) var(--ease-drift);
}
.audiorow__btn:hover { border-color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }
.audiorow__btn svg { width: 12px; height: 12px; margin-left: 2px; }
.audiorow__text { font-size: var(--ui); opacity: 0.92; }
.audiorow__link { display: block; margin-top: var(--s-2); font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; opacity: 0.72; }

/* --------------------------------------------------------------------------
   13. FOOTER V2 — the publisher's colophon (§8). Editorial, quiet, useful.
   Warm handoff lip from the golden water, then a cool colophon field.
   -------------------------------------------------------------------------- */
.colophon {
  position: relative;
  z-index: 2;
  scroll-snap-align: start;
  background: linear-gradient(to bottom, var(--ocean-800), var(--ocean-900));
  padding: 0 var(--page-pad) var(--s-7);
  border-top: 1px solid rgba(247, 245, 241, 0.10);
}
/* the warm transition lip — the painting ends warm before the furniture */
.colophon__lip {
  height: 48px;
  margin: 0 calc(-1 * var(--page-pad));
  background: linear-gradient(to bottom,
      rgba(120, 82, 40, 0.55), rgba(11, 42, 60, 0) 100%);
  pointer-events: none;
}
.colophon__inner { max-width: 1180px; margin-inline: auto; padding-top: var(--s-8); }

.colophon__grid {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 2fr 3fr;
  gap: var(--s-8) var(--s-7);
}
.colophon__brand { }
.colophon__wordmark img { height: 24px; width: auto; opacity: 0.92; margin-bottom: var(--s-5); }
.colophon__motto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--lede);
  line-height: 1.4;
  max-width: 26ch;
  margin-bottom: var(--s-4);
}
.colophon__note { opacity: 0.7; }

.colophon__head { margin-bottom: var(--s-5); opacity: 0.8; }
.colophon__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.colophon__col a {
  display: inline-flex; align-items: center;
  min-height: 40px;
  font-size: var(--ui);
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-drift);
}
.colophon__col a:hover { color: var(--paper); }

.colophon__crewline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--lede);
  line-height: 1.4;
  margin-bottom: var(--s-5);
  max-width: 24ch;
}
.colophon .capture--compact { max-width: 100%; }
.colophon .capture--compact .capture__controls { gap: var(--s-3); }
.colophon .capture--compact .capture__privacy { margin-top: var(--s-3); }

.colophon__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(247, 245, 241, 0.10);
  font-size: var(--caption);
  opacity: 0.6;
}
.colophon__legal a { color: inherit; text-decoration: none; }
.colophon__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.colophon__legal-sep { opacity: 0.5; }

/* footer entrance: a single quiet fade — the show is over */
html.js .colophon .enter { transition-duration: 400ms !important; }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .lockup { flex-direction: column; text-align: center; gap: clamp(24px, 5vh, 44px); }
  .lockup--left { justify-content: center; align-items: center; }
  .lockup--left .copy--left { max-width: 100%; }
  .lockup--left .copy .kicker { justify-content: center; }
  .lockup--book { flex-direction: column; }
  .lockup--book .copy--book { flex-basis: auto; max-width: 100%; }
  .copy .kicker { justify-content: center; }
  .bookcover { width: clamp(180px, 46vw, 260px); }
  .bookcover__peek { opacity: 0.9; transform: none; }  /* always visible on touch */
  .colophon__grid { grid-template-columns: 1fr 1fr; }
  .colophon__crew { grid-column: 1 / -1; order: -1; }   /* newsletter first on mobile */
  .colophon__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .cf__stage { height: clamp(300px, 46svh, 420px); }
  .cf__line { font-size: var(--ui); }
}
@media (min-width: 1280px) {
  .stage__inner { max-width: 1200px; }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION — every stage a COMPLETE static page (nothing lost).
   The fresco still pans with scroll (scroll-DRIVEN reveal, not idle motion),
   so all six painted bands stay reachable; snap is disabled (harmless).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  html.js .enter,
  html.js .scene .enter,
  html.js .colophon .enter,
  html.js .build-flagship .word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  html.js .reveal-cover { opacity: 1 !important; transform: none !important; filter: none !important; }
  html.js .s3.in .bookcover__img { animation: none !important; }
  html.js .thermocline--draw::before, html.js .thermocline--draw::after { transform: scaleX(1) !important; }
  html.js .cf__slide { transition: none !important; }
  /* under-text veils are a readability aid — keep them, just don't animate */
  html.js .veil::before, html.js .copy--book::before,
  html.js .s1 .copy--left::before, html.js .s5b__pool::before {
    opacity: 1 !important; transition: none !important;
  }
  html.js .s6__constellation {
    opacity: 1 !important; transform: none !important;
    filter: sepia(0.42) saturate(1.3) hue-rotate(-8deg) brightness(1.08) drop-shadow(0 0 28px rgba(242, 193, 78, 0.34)) !important;
  }
  html.js .s6.in .btn--pulse { animation: none !important; }
  .s5b__bubbloon { display: none !important; }
}

/* --------------------------------------------------------------------------
   16. NO-JS SAFETY NET — .enter/.word states exist only under html.js, so
   without JS everything is visible: the coverflow is a static column of all
   ten friends with captions; the cover is a plain tilted object; the fresco
   is the painted background (no transform needed).
   -------------------------------------------------------------------------- */