/* ===========================================================================
   Ashana Sophia Music - "The Hidden Garden After Rain"
   Palette, type, motion tokens all from the brand kit (ashana-sophia/kit.json).
   Light journey: dusk gate -> parchment dawn -> a luminous dive -> dawn ->
   deepening candlelit dusk. Rework round: cinematic-depth hero, real cover art,
   refined Archimedean-spiral glyph, dappled light instead of line-art doodles.
   =========================================================================== */

:root {
  /* --- light / dawn register --- */
  --bg: #F6F0E3;
  --surface: #EDE3D0;
  --ink: #2B221A;
  --ink-muted: #5A4C3C;      /* raised from #6E5F4E -> 7.30:1 on dawn bg (Mark: "cannot read") */
  --line: #D9CDB6;
  --accent: #8A5E20;        /* deep ochre - AA-safe for filled controls + focus on light */
  --accent-2: #3A4A38;      /* forest */
  --candle: #C08A3E;        /* candle-amber - glyphs/lines only on light, never focus on light */
  --candle-lit: #D9A758;
  --apricot: #F3E4C4;
  --wine: #7A4038;
  --seam-warm-1: #D9CBB0;   /* seam midpoint - warm sand */
  --seam-warm-2: #8A7A5F;   /* seam midpoint - olive taupe */
  --seam-warm-3: #4A463A;   /* seam midpoint - deep umber-olive */

  /* --- dusk register --- */
  --dusk-bg: #1E211B;
  --dusk-surface: #262A23;
  --dusk-ink: #EFE6D4;
  --dusk-muted: #C8BEA5;     /* raised from #B3A88F -> 8.82:1 on dusk bg (Mark: "cannot read") */
  --dusk-accent: #D9A758;   /* focus + accent on dusk */

  /* --- motion tokens (five shared) --- */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-parallax: cubic-bezier(0.33, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-enter: 800ms;   /* things bloom */
  --dur-exit: 240ms;    /* brief, never abrupt */
  --dur-micro: 80ms;    /* pointer-follow smoothing (tilt) */
  --distance: 14px;
  --blur: 6px;

  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Newsreader', Georgia, serif;

  --maxw-prose: 68ch;
  --maxw-page: 1360px;
  --pad-x: clamp(1.5rem, 7vw, 7rem);
  --pad-section: clamp(96px, 14vh, 176px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--dusk-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* page-wide paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
/* Every <img> is wrapped in <picture> for the WebP source. display:contents removes the
   picture from the box tree, so `.gate img`, `.facade img`, `.shop-card__img img` etc.
   still lay out as direct children of their containers and no layout changed. */
picture { display: contents; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.register-dusk :focus-visible,
.soma :focus-visible,
.interlude :focus-visible,
.stay :focus-visible,
.shows :focus-visible,
.apothecary :focus-visible { outline-color: var(--dusk-accent); }

/* explicit focus-visible on the play facades (accent outline + offset) */
.facade:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.register-dusk .facade:focus-visible,
.soma .facade:focus-visible { outline-color: var(--dusk-accent); }

::selection { background: rgba(217, 167, 88, 0.28); color: #2B221A; }
.register-dusk ::selection,
.soma ::selection,
.stay ::selection,
.apothecary ::selection { background: rgba(217, 167, 88, 0.32); color: #EFE6D4; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 210; /* above the entry-ritual veil (200) so first-Tab focus is visible */
  background: var(--accent);
  color: var(--bg);
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* shared type helpers ------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
}
.eyebrow .spark { width: 5px; height: 5px; border-radius: 50%; background: var(--candle); flex: none; }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.8rem);
  line-height: 1.07;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0 0 1.2rem;
}
/* signature titles - editorial scale, calmed per Mark ("decrease... all headers") */
.section-title--xl {
  font-size: clamp(2.4rem, 6.5vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
}
.section-intro {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 52ch;
  margin: 0 0 clamp(2.4rem, 5vw, 3.6rem);
}
/* A second intro paragraph that continues the first thought rather than starting a new
   block. Close the gap on the FIRST one rather than pulling the second up with a
   negative margin - same result, and the spacing stays additive. */
.section-intro:has(+ .section-intro--tight) { margin-bottom: clamp(0.9rem, 1.8vw, 1.3rem); }
.aside-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* ===========================================================================
   DAPPLED LIGHT (the garden atmosphere layer)
   Light and photography carry the atmosphere; no margin line-art doodles.
   =========================================================================== */
/* soft dappled-light drift on light sections (very subtle, opacity <= 0.1) */
.atmos-light {
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(20% 26% at 22% 18%, rgba(217, 167, 88, 0.10), transparent 62%),
    radial-gradient(24% 30% at 78% 42%, rgba(192, 138, 62, 0.08), transparent 64%),
    radial-gradient(18% 24% at 60% 82%, rgba(122, 64, 56, 0.06), transparent 60%);
  animation: drift 96s ease-in-out infinite alternate;
  will-change: transform;
}
.section > .section__head,
.section > .release-grid,
.section > .spotlight,
.section > .story,
.section > .offerings-stage,
.section > .shows__stage,
.section > .apothecary__stage,
.section > .stay__inner,
.section > .earlier { position: relative; z-index: 1; }

/* ===========================================================================
   NAV - hidden at first paint, fades in after the threshold
   =========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--pad-x);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur-enter) var(--ease-settle),
              transform var(--dur-enter) var(--ease-settle);
}
.nav::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% + 2.4rem);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(30, 33, 27, 0.92) 0%,
    rgba(30, 33, 27, 0.6) 55%,
    rgba(30, 33, 27, 0) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
}
.nav.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.nav.on-light { color: var(--ink); }
.nav.on-light::before {
  background: linear-gradient(180deg,
    rgba(246, 240, 227, 0.92) 0%,
    rgba(246, 240, 227, 0.6) 55%,
    rgba(246, 240, 227, 0) 100%);
}
.nav.on-dusk { color: var(--dusk-ink); }
.nav.on-dusk :focus-visible { outline-color: #D9A758; }

.nav__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity var(--dur-exit) var(--ease-snap);
}
.nav__mark:hover { opacity: 1; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
/* The nav is the ONLY way around a single long-scroll page, so "where am I" has to be
   legible at a glance. The previous active state was opacity 0.82 -> 1 plus a hairline,
   which is close to invisible in peripheral vision. Now the current section also takes
   the register's accent colour and a full-width rule that wipes in. */
.nav__links a {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: inherit;
  opacity: 0.72;
  padding-bottom: 4px;
  transition: opacity var(--dur-exit) var(--ease-snap),
              color var(--dur-exit) var(--ease-snap);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-exit) var(--ease-snap);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.is-action {
  opacity: 1;
  color: var(--nav-accent, currentColor);
}
.nav__links a.is-action::after { transform: scaleX(1); }
.nav.on-dusk { --nav-accent: var(--dusk-accent); }
.nav.on-light { --nav-accent: var(--accent); }
.nav__toggle { display: none; }

/* ===========================================================================
   HERO - "The Gate": her photo through a garden-gate arch, at dusk.
   The arch is the dominant form (~72vh), her name is set into its foot,
   the invocation blooms line by line below. A garden at dusk, not empty dark:
   layered vignette + drifting canopy dapple + a low horizon glow. (LOCKED concept)
   =========================================================================== */
.hero {
  position: relative;
  min-height: 100dvh;
  /* Everything in the hero except the arch: top padding + row gap + the words block +
     the cue reserve + the stage's own slack. The arch is sized from what's LEFT of the
     viewport after this, so the invocation can never be pushed past the fold.
     Measured, not guessed - see the short-viewport override below. */
  --hero-chrome: 423px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* These verticals are deliberately FIXED, not vh-based: --hero-chrome has to equal the
     real non-arch height for the arch to size correctly, and a vh padding makes that
     height a moving target. Horizontal padding stays fluid. */
  row-gap: 1.75rem;
  column-gap: 0;
  /* bottom padding reserves room for the absolutely-pinned cue below the whisper */
  padding: 3.5rem clamp(1.5rem, 5vw, 4rem) 8.5rem;
  overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% 8%, #2E3126 0%, #23261F 40%, var(--dusk-bg) 78%),
    var(--dusk-bg);
  color: var(--dusk-ink);
}
/* On a phone the 14vh bottom reserve pushed the hero ~29px past the viewport, so the
   "Enter softly" cue was clipped at the fold. Trim the reserve (still >= the cue's own
   61px) rather than shrinking the arch - her photo stays the dominant form. */
@media (max-width: 720px) {
  .hero { padding-bottom: clamp(5rem, 10.5vh, 7rem); }
}
/* SHORT VIEWPORTS - i.e. most laptops. A 1366x768 laptop gives ~660px of page once
   browser chrome is taken, and the hero measured 832px there: the invocation sat at
   728px and "Lay down the weight you've been carrying" was cut off at the fold
   (client-reported, reproduced at 1366x660 and 1280x700).
   Tighten the stack; the arch then re-sizes itself from --hero-chrome, so no element
   needs a magic pixel value. EVERY --hero-chrome value in this file (423 base, 317
   short+wide, 246 short+narrow, 269 short+very-narrow) is a MEASURED non-arch height,
   because the hero fits exactly when --hero-chrome equals it. If you change the hero's
   padding, gap, or copy, re-measure and update the numbers or the arch will mis-size. */
/* Boundaries OVERLAP at exactly 720px rather than abutting: with min-width:721px (or
   720.02px) a fractional viewport width from zoom or a fractional DPR lands between the
   branches, matches neither, and silently falls back to the tall-screen chrome. The
   narrow branch is declared later, so it wins the 720px tie. */
@media (max-height: 820px) and (min-width: 720px) {
  .hero {
    --hero-chrome: 317px;
    padding-top: 1.5rem;
    padding-bottom: 5rem;
    row-gap: 0.875rem;
  }
}
/* Short AND narrow - small phones (375x553, 360x640) and anything with little height.
   These were falling through to the tall 423px chrome, which pinned the arch to its
   floor and pushed the invocation back under the fold. The whisper goes here because
   it restates the invocation and the invocation is the line that has to survive.
   `.hero .hero__whisper` (not `.hero__whisper`) because the base rule is declared
   later in this file and would otherwise win on source order. */
@media (max-height: 820px) and (max-width: 720px) {
  .hero {
    --hero-chrome: 246px;
    padding-top: 1.25rem;
    padding-bottom: 4.5rem;
    row-gap: 0.75rem;
  }
  .hero .hero__whisper { display: none; }
}
/* Very narrow (320px-class). Same branch as above, but the invocation wraps to one more
   line at this width, which makes the real non-arch height ~269px rather than ~246px.
   --hero-chrome has to track that or the arch over-claims and the hero overflows. */
@media (max-height: 820px) and (max-width: 340px) {
  .hero { --hero-chrome: 269px; }
}
/* Landscape phones. Below ~560px of height a 3:4 portrait and the invocation simply
   cannot stack - the arch alone would eat the viewport. Landscape has width instead,
   so use it: arch and words side by side, arch sized from height rather than the
   vertical budget. */
/* NOTE ON SPECIFICITY: this block sits ABOVE the base .gate / .hero__names /
   .hero__invocation rules, so a bare `.gate {}` here would lose on source order and
   silently do nothing. Every selector is prefixed with `.hero ` to outrank the base
   rule regardless of position. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    padding-top: 1.25rem;
    padding-bottom: 3.25rem;
  }
  /* 7.5rem covers this branch's padding plus the stage's own slack; measured to land
     the hero at exactly 100dvh from 360px to 560px of height. No 200px floor here -
     in landscape the arch must be free to go small, and the words carry the frame. */
  .hero .gate { width: min(34vw, (100dvh - 7.5rem) * 0.75); }
  .hero .hero__words { max-width: 44ch; }
  .hero .hero__invocation { text-align: left; max-width: none; }
  .hero .hero__whisper { display: none; }
  /* The lockup sizes off vw, which is LARGE in landscape while the arch is small - at
     844x390 "SOPHIA" rendered ~236px inside a 200px arch and got clipped by its
     overflow:hidden. Size it off height here, which is what the arch tracks. */
  .hero .hero__names { max-width: 92%; }
  .hero .hero__names .primary { font-size: clamp(1rem, 4.6vh, 1.7rem); }
  .hero .hero__names .secondary { font-size: clamp(0.625rem, 1.9vh, 0.8125rem); }
}

/* the dusk garden atmosphere -------------------------------------------------- */
.hero__void { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* dappled canopy light: soft leaf-broken warmth, drifting very slowly */
.hero__canopy {
  position: absolute; inset: -14%;
  background:
    radial-gradient(9% 12% at 22% 16%, rgba(217, 167, 88, 0.16), transparent 60%),
    radial-gradient(7% 10% at 38% 8%, rgba(192, 138, 62, 0.12), transparent 62%),
    radial-gradient(11% 15% at 72% 22%, rgba(217, 167, 88, 0.12), transparent 60%),
    radial-gradient(8% 11% at 84% 40%, rgba(192, 138, 62, 0.10), transparent 62%),
    radial-gradient(10% 13% at 12% 46%, rgba(217, 167, 88, 0.08), transparent 64%),
    radial-gradient(9% 12% at 62% 60%, rgba(122, 64, 56, 0.08), transparent 62%);
  animation: drift 90s ease-in-out infinite alternate;
  will-change: transform;
}
/* a faint warm horizon glow at the foot of the arch, like last light behind trees */
.hero__horizon {
  position: absolute; left: 50%; bottom: -6%; width: min(120%, 1100px); height: 46%;
  transform: translateX(-50%);
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(217, 167, 88, 0.22), transparent 68%),
    radial-gradient(85% 100% at 50% 100%, rgba(122, 64, 56, 0.14), transparent 72%);
}
/* layered edge vignette so the frame reads as depth, not a flat panel */
.hero__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 46%, rgba(14, 16, 12, 0.5) 100%),
    linear-gradient(180deg, rgba(14, 16, 12, 0.34) 0%, transparent 22%, transparent 70%, rgba(14, 16, 12, 0.32) 100%);
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

/* the stage: the arch is the composition's dominant form ----------------------- */
.hero__stage {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.gate {
  position: relative;
  /* Sized by WIDTH so the 3:4 arch never distorts (height-sizing warped it on mobile
     once already). The width is whichever is smallest: the viewport, the 540px cap, or
     three-quarters of the vertical space left after --hero-chrome. That last term is
     what keeps the invocation above the fold on short screens without a breakpoint. */
  /* The 120px floor is a last-resort guard so the arch can never compute to zero or a
     negative width. It must never participate in the fit: a floor LARGER than the
     budget re-creates exactly the overflow this mechanism exists to prevent (a 200px
     floor silently broke 320x480 portrait and the 561-583px band on wide screens - the
     arch stopped shrinking while --hero-chrome kept its full reserve).
     Known bound: in PORTRAIT the floor starts winning below ~406px of viewport height
     (~429px at widths <=340px), and the hero overflows from there. No shipping device
     has a portrait viewport that short, so it is left uncovered deliberately; landscape
     below 560px is handled by its own branch. If that assumption ever changes, add a
     branch - do not raise the floor. */
  width: max(120px, min(92vw, 540px, (100dvh - var(--hero-chrome)) * 0.75));
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 50vh 50vh 20px 20px;   /* full arch top */
  overflow: hidden;
  box-shadow:
    0 60px 140px -54px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(239, 230, 212, 0.06);
  /* VISIBLE base: gate-open plays the entrance via `backwards` fill (hidden only
     during the delay); resting flat + visible so freeing the animation for the
     scroll pin can never leave it hidden, and no-JS shows the arch. */
  opacity: 1;
  transform: none;
  animation: gate-open 1600ms var(--ease-settle) both;
  animation-delay: 200ms;
}
/* once the entrance has settled, hand the gate's transform to the scroll pin */
.hero.gate-freed .gate { animation: none; }
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  border: 1px solid rgba(239, 230, 212, 0.24);
  pointer-events: none;
}
.gate img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;   /* source is an exact 3:4 crop, so this is a safety net only */
  filter: saturate(0.86) contrast(1.02) brightness(0.94) sepia(0.10);
  /* NO idle zoom. The photo holds still; the only scale on the gate comes from the
     scroll-scrubbed walk-through (js/main.js). Client asked for "no zoom in". */
}
/* The foot ramp reaches its darkest only at the very bottom edge, but the name lockup
   sits ~72-95% down - right where her white dress is brightest. Measured 17-29% of the
   lockup below 3:1 there. Pulling the dark stops UP puts the band under the type
   without touching the top two-thirds of the arch, where her face is. */
.gate__grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(30, 33, 27, 0.04) 0%,
      rgba(20, 22, 17, 0.26) 46%,
      rgba(16, 18, 13, 0.66) 72%,
      rgba(14, 16, 11, 0.90) 100%),
    radial-gradient(96% 74% at 50% 26%, rgba(217, 167, 88, 0.24), transparent 72%);
  mix-blend-mode: multiply;
}
.gate__grade-2 {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(122% 100% at 50% 38%, transparent 50%, rgba(16, 18, 13, 0.7) 100%);
}
@keyframes gate-open {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* the name lockup, set into the darkened foot of the arch (integrated, not floating) */
.hero__names {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  transform: translateX(-50%);
  z-index: 5;
  width: max-content;
  max-width: min(94vw, 32rem);
  text-align: center;
  margin: 0;
  opacity: 0;
  animation: name-rise 1200ms var(--ease-settle) both;
  animation-delay: 1050ms;
}
.hero__names .primary {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.2vw, 3.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.04;
  color: var(--dusk-ink);
  text-shadow: 0 2px 26px rgba(12, 14, 10, 0.7), 0 1px 3px rgba(12, 14, 10, 0.6);
}
/* deterministic two-line stacked wordmark - never overflows the arch at any width */
.hero__names .primary .word { display: block; }
.hero__names .secondary {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
  letter-spacing: 0.14em;
  color: var(--dusk-muted);
  margin-top: 0.55rem;
  text-shadow: 0 1px 12px rgba(12, 14, 10, 0.7);
}
@keyframes name-rise {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* the invocation, composed below the arch, blooming line by line ---------------- */
.hero__words { position: relative; z-index: 2; }
.hero__invocation {
  text-align: center;
  /* em-agnostic cap: the lines set their own size, so a ch cap here would
     measure against the paragraph's 1rem and shatter the lines */
  max-width: min(92vw, 60rem);
  margin: 0 auto;
}
/* masked line rise: each line lifts from behind an overflow mask (item 3).
   Pure CSS so it runs with JS off; reduced-motion off-ramp lands the text flat. */
.hero__invocation .line { display: block; }
.hero__invocation .line__mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;   /* descender room inside the clip */
  margin-bottom: -0.14em;   /* ...without shifting layout */
}
.hero__invocation .line__rise {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.85vw, 3.05rem);
  line-height: 1.1;
  letter-spacing: -0.016em;
  text-wrap: balance;
  transform: translateY(110%);
  animation: line-rise 1150ms var(--ease-settle) both;
}
.hero__invocation .line.l1 .line__rise { animation-delay: 1400ms; }
.hero__invocation .line.l2 .line__rise { color: var(--dusk-muted); animation-delay: 1950ms; }
@keyframes line-rise { from { transform: translateY(110%); } to { transform: translateY(0); } }
.hero__whisper {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.1875rem);
  line-height: 1.55;
  color: var(--dusk-muted);
  max-width: 42ch;
  margin: 1.2rem auto 0;
  opacity: 0;
  filter: blur(5px);
  animation: bloom 1100ms var(--ease-settle) both;
  animation-delay: 2650ms;
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  opacity: 0;
  animation: rise-centered 1100ms var(--ease-settle) both;
  animation-delay: 3300ms;
}
@keyframes rise-centered {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.hero__cue .spiral { width: 32px; height: 32px; }
.hero__cue .spiral path {
  fill: none; stroke: var(--dusk-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: draw 2600ms var(--ease-settle) forwards;
  animation-delay: 3400ms;
}
.hero__cue .label {
  font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dusk-muted);
}

@keyframes bloom {
  from { opacity: 0; transform: translateY(var(--distance)); filter: blur(var(--blur)); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ===========================================================================
   SECTION SHELLS + register backgrounds
   =========================================================================== */
.section { position: relative; z-index: 1; padding: var(--pad-section) var(--pad-x); overflow: hidden; }
.section__inner { position: relative; z-index: 1; max-width: var(--maxw-page); margin: 0 auto; }
.section__head { max-width: var(--maxw-prose); position: relative; z-index: 1; }

.register-dawn { background: var(--bg); color: var(--ink); }
.register-noon { background: var(--surface); color: var(--ink); }
.register-dusk { background: var(--dusk-bg); color: var(--dusk-ink); }
.register-dusk .eyebrow,
.soma .eyebrow { color: var(--dusk-accent); }
.register-dusk .eyebrow .spark,
.soma .eyebrow .spark { background: var(--dusk-accent); }
.register-dusk .section-intro,
.soma .section-intro { color: var(--dusk-muted); }

/* seam: soft gradient bridge between registers so the light "crossfades".
   Grain + a faint hand-inked wave keep the transition organic, not a rigid rule. */
.seam { position: relative; height: clamp(80px, 12vh, 150px); border: 0; margin: 0; overflow: hidden; }
.seam::after {  /* paper grain carried across the transition */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.seam::before {  /* a soft ink-wash wave, low contrast, breaks the straight edge */
  content: ""; position: absolute; left: -2%; right: -2%; top: 50%; height: 60px;
  transform: translateY(-50%); pointer-events: none; opacity: 0.5;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C 180 12 300 52 480 34 C 660 16 780 50 960 32 C 1080 20 1140 40 1200 30' fill='none' stroke='%238A7A5F' stroke-width='1.1' opacity='0.5'/%3E%3C/svg%3E");
}
.seam--dawn-to-noon { background: linear-gradient(var(--bg), var(--surface)); }
.seam--noon-to-dawn { background: linear-gradient(var(--surface), var(--bg)); }
.seam--dusk-to-dusk { background: linear-gradient(var(--dusk-bg), var(--dusk-surface)); }

/* register-crossing seams (light <-> dusk): route through warm umber/olive stops
   so the midpoint reads as dusk falling, not a neutral-gray border. */
.seam--dusk-to-dawn,
.seam--dawn-to-dusk,
.seam--noon-to-dusk,
.seam--dusk-to-noon {
  height: clamp(140px, 22vh, 260px);
}
.seam--dusk-to-dawn {
  background: linear-gradient(180deg,
    var(--dusk-bg) 0%, var(--dusk-surface) 10%, var(--seam-warm-3) 30%,
    var(--seam-warm-2) 55%, var(--seam-warm-1) 80%, var(--bg) 100%);
}
.seam--dawn-to-dusk {
  background: linear-gradient(180deg,
    var(--bg) 0%, var(--seam-warm-1) 20%, var(--seam-warm-2) 45%,
    var(--seam-warm-3) 70%, var(--dusk-surface) 90%, var(--dusk-bg) 100%);
}
.seam--noon-to-dusk {
  background: linear-gradient(180deg,
    var(--surface) 0%, var(--seam-warm-1) 18%, var(--seam-warm-2) 44%,
    var(--seam-warm-3) 70%, var(--dusk-surface) 90%, var(--dusk-bg) 100%);
}
.seam--dusk-to-noon {
  background: linear-gradient(180deg,
    var(--dusk-bg) 0%, var(--dusk-surface) 10%, var(--seam-warm-3) 30%,
    var(--seam-warm-2) 56%, var(--seam-warm-1) 82%, var(--surface) 100%);
}
.seam--crossing::before { opacity: 0.32; }

/* reveal-on-scroll (GSAP adds .is-in; CSS is the reduced-motion-safe fallback) */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-enter) var(--ease-settle), transform var(--dur-enter) var(--ease-settle); }

/* headline that rises with a whisper of rotation (signature entrance) */
.rise-rotate { opacity: 0; transform: translateY(26px) rotate(-1.2deg); transform-origin: left bottom; }
.rise-rotate.is-in { opacity: 1; transform: none; transition: opacity 1000ms var(--ease-settle), transform 1000ms var(--ease-settle); }

/* image arch that unmasks upward (curtain reveal) */
.unmask { clip-path: inset(0 0 0 0); }

/* ===========================================================================
   LISTEN - featured spotlight + offset release grid + earlier works
   =========================================================================== */
.listen__invite {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 26ch;
  margin: 0.4rem 0 clamp(2.8rem, 5.5vw, 4rem);
  color: var(--ink);
}

/* featured "Daughters of the Moon" - a spotlight, not a small card */
.spotlight {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: clamp(3.2rem, 6vw, 5rem);
  border: 1px solid var(--line);
}
.spotlight__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* amber dawn-glow atmosphere */
  background:
    radial-gradient(58% 72% at 26% 42%, rgba(217, 167, 88, 0.28), transparent 68%),
    radial-gradient(46% 60% at 84% 74%, rgba(192, 138, 62, 0.18), transparent 70%),
    linear-gradient(180deg, var(--apricot), var(--bg));
}
.spotlight > *:not(.spotlight__glow) { position: relative; z-index: 1; }
@media (min-width: 860px) {
  .spotlight { grid-template-columns: minmax(280px, 0.9fr) 1.1fr; }
}
/* featured art is now the real cover - a large cover facade, glow card around it */
.facade.spotlight__art {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 0; padding: 0; cursor: pointer;
  border-radius: 18px;
  overflow: hidden;
  background: var(--dusk-surface);
  box-shadow: 0 30px 70px -44px rgba(0, 0, 0, 0.6);
}
.spotlight__art .facade__play { position: absolute; left: 1.1rem; bottom: 1.1rem; }
.spotlight__meta { align-self: start; }
.spotlight__meta .release__kind { color: var(--accent); }
.spotlight__meta h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0.5rem 0 0.9rem; text-wrap: balance;
}
.spotlight__meta .release__note { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--ink-muted); max-width: 40ch; margin: 0 0 1.3rem; }
/* the English title, set as a translation line under the Spanish one (as the cover art does) */
.spotlight__meta h3 .release__alt {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.9vw, 1.4rem);
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-top: 0.45rem;
}

.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1.6rem, 3.2vw, 2.8rem);
}
@media (min-width: 760px) {
  .release-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  /* offset every second card so the row breathes and reads editorial, not gridded */
  .release-grid > .release:nth-child(3n+2) { margin-top: clamp(2rem, 5vw, 4.2rem); }
}
.release { display: flex; flex-direction: column; gap: 0.9rem; }

/* the facade: cover art + a breathing play affordance; iframe injected on click */
.facade {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
  color: var(--dusk-ink);
  display: block;
}
.facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-settle); }
.facade:hover img { transform: scale(1.035); }
.facade__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20, 22, 17, 0.62) 0%, rgba(20, 22, 17, 0.06) 46%, rgba(20, 22, 17, 0.28) 100%);
  transition: background 400ms var(--ease-snap);
}
.facade:hover .facade__scrim { background: linear-gradient(0deg, rgba(20, 22, 17, 0.68) 0%, rgba(20, 22, 17, 0.10) 50%, rgba(20, 22, 17, 0.30) 100%); }
.facade__play {
  position: absolute;
  left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem 0.55rem 0.6rem;
  background: rgba(246, 240, 227, 0.92);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.facade__play .disc {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  display: grid; place-items: center;
  animation: breathe-scale 4s ease-in-out infinite;
}
.facade__play .disc svg { width: 11px; height: 11px; margin-left: 1px; }
@keyframes breathe-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

.release__meta { display: flex; flex-direction: column; gap: 0.3rem; }
.release__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.release__kind { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.release__note { color: var(--ink-muted); max-width: 42ch; margin: 0.6rem 0 0; }
.release__links { display: flex; gap: 1.1rem; margin-top: 0.6rem; }
.release__links a {
  font-size: 0.9375rem; letter-spacing: 0.04em; text-decoration: none;   /* up per Mark: "Listen on Spotify - increase text size" */
  color: var(--accent); border-bottom: 1px solid rgba(138, 94, 32, 0.35); padding-bottom: 1px;
}
.release__links a:hover { border-bottom-color: var(--accent); }
.soma .release__links a { color: var(--dusk-accent); border-bottom-color: rgba(217, 167, 88, 0.4); }
.soma .release__links a:hover { border-bottom-color: var(--dusk-accent); }

/* earlier works - editorial rows: title weight vs tabular-nums year at low opacity */
.earlier {
  margin-top: clamp(3.4rem, 7vw, 5.4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.earlier__label { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1.4rem; }
.earlier__list { display: flex; flex-direction: column; }
/* now with cover thumbnails (Mark: "Earlier works - Images?") */
.earlier__item {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.4rem);
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
}
/* Enlarged ~27% at the client's request ("make the images for each album larger").
   Held at 76px rather than pushed further because Sundara's only available cover is
   160px - beyond 76px it would visibly soften on a 2x screen. */
.earlier__item .cover {
  flex: none; width: clamp(58px, 7vw, 76px); aspect-ratio: 1;
  border-radius: 11px; overflow: hidden; border: 1px solid var(--line);
}
.earlier__item .cover img { width: 100%; height: 100%; object-fit: cover; }
.earlier__item .t { flex: 1; font-family: var(--font-display); font-size: clamp(1.125rem, 2vw, 1.5rem); font-style: italic; line-height: 1.2; }
.earlier__item .y {
  font-family: var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
  font-size: 0.9375rem; color: var(--ink-muted); opacity: 0.66; flex: none;
}
.earlier__link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.8rem;
  font-size: 1.0625rem; text-decoration: none; color: var(--accent);   /* up per Mark: "Hear the early albums on Bandcamp - increase text size" */
  border-bottom: 1px solid rgba(138, 94, 32, 0.35); padding-bottom: 2px; align-self: flex-start;
}
.earlier__link:hover { border-bottom-color: var(--accent); }

/* ===========================================================================
   SOMA LUZ - a luminous dive: underwater world, copy + covers over the water
   =========================================================================== */
.soma { color: var(--dusk-ink); background: #16211F; padding-top: clamp(120px, 18vh, 220px); padding-bottom: clamp(120px, 18vh, 220px); }
.soma__water { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.soma__water img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: saturate(0.9) contrast(1.02) brightness(0.7) sepia(0.14); }
/* deepened so the copy (top-left) lands on an effective >=7:1 while the underwater
   image stays legible under the covers (lower-right). Mark: "Soma Luz - cannot read." */
.soma__water .veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 19, 17, 0.74) 0%, rgba(15, 21, 19, 0.5) 30%, rgba(15, 21, 19, 0.34) 54%, rgba(13, 18, 16, 0.82) 100%),
    linear-gradient(102deg, rgba(11, 17, 15, 0.58) 0%, rgba(11, 17, 15, 0.14) 46%, transparent 66%),
    radial-gradient(120% 90% at 50% 12%, rgba(217, 167, 88, 0.14), transparent 60%);
}
/* underwater-light depth on the copy: a whisper of shadow, not a box */
.soma .section__head h2,
.soma .section__head .section-intro { text-shadow: 0 1px 18px rgba(10, 16, 14, 0.55); }
/* A scrim that travels WITH the copy.
   The section-wide veil above darkens fixed percentage BANDS of the section, but the
   copy is anchored to the top of the content - so when .soma__covers reflows from four
   columns to two the section grows taller, the paragraph slides down into the veil's
   transparent band, and it lands on the photo's bright light-shafts. Measured: 0.3% of
   the paragraph below 4.5:1 at 1440px wide, but 17% at 820px. Deepening the veil again
   would only move which width fails. Anchoring the scrim to the text removes the
   dependency on section height altogether.
   Elliptical and heavily bled past the text so it reads as depth in the water, not a panel. */
.soma .section__head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3rem -3.5rem -2.5rem -3.5rem;
  pointer-events: none;
  background: radial-gradient(112% 94% at 26% 46%,
    rgba(8, 14, 13, 0.90) 0%,
    rgba(8, 14, 13, 0.74) 38%,
    rgba(8, 14, 13, 0.38) 66%,
    transparent 84%);
}
.soma .section__inner { max-width: 1080px; }
.soma .section-intro { max-width: 46ch; }
.soma__covers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.6vw, 1.8rem);
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
}
@media (min-width: 760px) { .soma__covers { grid-template-columns: repeat(4, 1fr); align-items: start; } }
@media (min-width: 760px) { .soma__covers > .release:nth-child(even) { margin-top: clamp(1.6rem, 4vw, 3rem); } }
.soma .facade { background: rgba(20, 30, 28, 0.5); border: 1px solid rgba(217, 167, 88, 0.16); }
.soma .release__title { font-size: 1.0625rem; }
.soma .release__kind { color: var(--dusk-muted); }
/* anchored footer link, not a stray line (Mark: "Soma Luz on Spotify - dangling/lost") */
.soma__more {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid rgba(217, 167, 88, 0.2);
  display: flex; justify-content: center;
}
.soma__more a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--dusk-accent); text-decoration: none;
  border-bottom: 1px solid rgba(217, 167, 88, 0.4); padding-bottom: 2px; font-size: 1.0625rem;
  transition: border-bottom-color var(--dur-exit) var(--ease-snap), opacity var(--dur-exit) var(--ease-snap);
}
.soma__more a:hover { border-bottom-color: var(--dusk-accent); opacity: 0.82; }

/* ===========================================================================
   HER STORY - editorial spread: large arch image + prose, drawn milestone vine
   =========================================================================== */
.story { max-width: var(--maxw-page); margin: 0 auto; }
.story__spread { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 940px) {
  /* the spread dissolves (display:contents) and the whole story becomes one grid:
     prose + trail + press + coda stack in the left column against the sticky
     portrait column - no dead band between the prose and the timeline */
  .story__spread { display: contents; }
  .story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    grid-template-areas:
      "head head"
      "prose portrait"
      "journey portrait"
      "trail portrait"
      "press portrait"
      "coda portrait";
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .story > .section__head { grid-area: head; }
  .story__prose { grid-area: prose; }
  .story__portrait { grid-area: portrait; }
  .story > .story__journey { grid-area: journey; }
  .story > .trail { grid-area: trail; }
  .story > .press-note { grid-area: press; }
  .story__coda { grid-area: coda; }
}
.story__prose { max-width: 60ch; }
.story__prose p {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.78;
  margin: 0 0 1.5rem;
}
.story__prose .lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.3;
  font-style: italic;
  margin-bottom: 2rem;
}
/* closing thesis - her italic voice bookends the prose (opens on .lead, closes here) */
.story__thesis {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  line-height: 1.34;
  color: var(--ink);
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}

/* the large lotus-pond arch (garden-gate motif), sticky-ish on desktop */
.story__portrait { position: relative; }
@media (min-width: 940px) { .story__portrait { position: sticky; top: clamp(90px, 12vh, 140px); } }
.story__portrait .arch {
  position: relative;
  border-radius: 999px 999px 18px 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4.4;
  border: 1px solid var(--line);
}
.story__portrait .arch img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; filter: saturate(0.94) brightness(0.98) contrast(1.02); }
.story__portrait .arch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 80% at 50% 24%, transparent 52%, rgba(30, 33, 27, 0.4) 100%);
}
.story__portrait figcaption { font-size: 0.875rem; color: var(--ink-muted); font-style: italic; margin-top: 0.7rem; text-align: center; }

/* the candid humanity inset (teaching kids kirtan) */
.story__candid { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.story__candid .frame { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.story__candid .frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94); }
.story__candid figcaption { font-size: 0.875rem; color: var(--ink-muted); font-style: italic; margin-top: 0.6rem; }

/* "My journey" tagline above the milestone trail (Mark's note) */
.story__journey {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.2;
  color: var(--ink);
  margin: clamp(2.6rem, 5vw, 3.8rem) 0 0;
}
/* milestone list as a drawn vine trail with spiral nodes (farm -> Maui) */
.trail { position: relative; list-style: none; margin: clamp(3rem, 6vw, 4.6rem) 0 0; padding: 0 0 0 clamp(42px, 5.5vw, 60px); }
.story__journey + .trail { margin-top: clamp(1rem, 2.2vw, 1.6rem); }
/* a clean drawn hairline instead of a hand-rolled vine */
.trail__vine { position: absolute; left: clamp(2px, 0.8vw, 8px); top: 4px; bottom: 4px; width: clamp(20px, 2.6vw, 28px); z-index: 0; color: var(--accent-2); }
.trail__vine path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: 0.3; }
.trail__vine.is-draw path { stroke-dasharray: 1000; stroke-dashoffset: 0; }
.trail__stop { position: relative; padding: 0 0 clamp(1.8rem, 3.6vw, 2.8rem); }
.trail__stop:last-child { padding-bottom: 0; }
.trail__node {
  position: absolute; left: calc(-1 * clamp(42px, 5.5vw, 60px)); top: 0.15rem;
  width: clamp(22px, 2.8vw, 30px); height: clamp(22px, 2.8vw, 30px);
  display: grid; place-items: center;
}
.trail__node .spiral { width: 100%; height: 100%; }
.trail__node .spiral path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 400; stroke-dashoffset: 0; }
/* is-draw is a JS hook; JS arms (hides) then draws. Default rests fully drawn (no-JS safe). */
.trail__node .spiral.is-draw path { stroke-dashoffset: 0; }
.trail__body .place { font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.15; }
.trail__body .what { color: var(--ink-muted); font-size: 0.9375rem; margin-top: 0.35rem; }

.press-note {
  border-left: 2px solid var(--candle);
  padding: 0.4rem 0 0.4rem 1.4rem;
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 0;
  max-width: 48ch;
}
.press-note blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.35; }
.press-note cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.story__coda { color: var(--ink-muted); font-size: 1rem; max-width: 56ch; margin: clamp(2rem, 4vw, 2.8rem) 0 0; }
/* the coda reframed as a short titled bio (Mark: "Need description: Story or Bio") */
.story__bio-label { font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.75rem; }
.story__bio p:not(.story__bio-label) { margin: 0; color: var(--ink-muted); font-size: 1.0625rem; line-height: 1.7; }

/* ===========================================================================
   INTERLUDE - the grief-and-beauty line, huge italic on a dusk band
   =========================================================================== */
.interlude {
  position: relative;
  /* top layer pins both edges to pure dusk-bg so the warm glows never leave a
     visible boundary line against the seams above/below */
  background:
    linear-gradient(180deg, var(--dusk-bg) 0%, transparent 18%, transparent 82%, var(--dusk-bg) 100%),
    radial-gradient(90% 120% at 30% 20%, rgba(122, 64, 56, 0.28), transparent 62%),
    radial-gradient(80% 100% at 84% 84%, rgba(217, 167, 88, 0.12), transparent 66%),
    var(--dusk-bg);
  color: var(--dusk-ink);
  padding: clamp(120px, 20vh, 260px) var(--pad-x);
  overflow: hidden;
}
/* measure set in rem (not ch): the huge quote font would make ch resolve against
   the small container font and collapse the column to one word per line */
.interlude__inner {
  position: relative; z-index: 1;
  max-width: min(92vw, 68rem); margin: 0 auto;
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  text-align: center;
}
@media (min-width: 820px) {
  .interlude__inner { grid-template-columns: minmax(280px, 340px) 1fr; text-align: left; }
  .interlude__inner blockquote { margin-left: 0; }
}
/* the "one hand over the heart" portrait - dark by design, gently lifted so she
   reads against the dusk band; a soft arch echo of the hero gate */
.interlude__portrait {
  margin: 0; width: 100%; max-width: 340px; justify-self: center;
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 190px 190px 18px 18px;
  border: 1px solid rgba(217, 167, 88, 0.22);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.75);
}
/* Lifted further (1.16 -> 1.34) because the manager flagged this photo as too dark to
   connect with. NOT swapped out: the client picked this specific image for this specific
   quote and said she loves it here, so the brighter grade is the compromise. If she
   later agrees to replace it, the lift should come back down. */
.interlude__portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%;
  filter: brightness(1.34) contrast(0.98) saturate(0.95) sepia(0.05);
}
.interlude blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.9rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.interlude blockquote .soft { color: var(--dusk-muted); }

/* ===========================================================================
   IN HER WORDS - editorial interview spread (dawn parchment)
   Her deepest self-revelation, arranged as a magazine spread: a centerpiece
   italic pull-quote flanked by a drawn spiral, then a hanging small-caps
   question rail beside her answers. A new light-register breath before the
   invitation. Source material is a conversation with Ana Leger; the on-page credit
   line was removed at the client's request 2026-07-29 (.words__credit went with it).
   =========================================================================== */
/* centerpiece: the "words aren't even there" pull-quote */
.words__pull {
  position: relative;
  max-width: min(92vw, 44rem);
  margin: clamp(3rem, 7vw, 5.6rem) auto clamp(3.4rem, 8vw, 6rem);
  text-align: center;
}
.words__spiral {
  display: block;
  width: clamp(38px, 6vw, 56px);
  height: auto;
  margin: 0 auto clamp(1rem, 2.6vw, 1.8rem);
  color: var(--candle);
}
.words__spiral path {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.85;
}
.words__spiral.is-draw path { stroke-dashoffset: 0; } /* no-JS rest: fully drawn */
.words__pull blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 4.8vw, 3.8rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* the dialogue: hanging question rail + her answers */
.words__dialogue {
  max-width: var(--maxw-page);
  margin: 0 auto;
  display: grid;
  gap: clamp(2.6rem, 6vw, 4.4rem);
}
.words__x { display: grid; gap: clamp(0.7rem, 1.8vw, 1.2rem); }
@media (min-width: 860px) {
  .words__x {
    grid-template-columns: minmax(0, 14rem) minmax(0, 40rem);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    justify-content: center;
  }
}
.words__q {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-wrap: pretty;
}
.words__a { max-width: 42ch; }
.words__a p {
  margin: 0 0 1.2rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.78;
  color: var(--ink);
  text-wrap: pretty;
}
.words__a p:last-child { margin-bottom: 0; }

/* ===========================================================================
   OFFERINGS - candlelit stage, session photo with presence, hand-note aside
   =========================================================================== */
.offerings-stage {
  position: relative;
  border-radius: 24px;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 90% at 78% 30%, rgba(217, 167, 88, 0.2), transparent 66%),
    radial-gradient(60% 80% at 12% 82%, rgba(122, 64, 56, 0.1), transparent 66%),
    var(--bg);
}
.offering-card {
  position: relative; z-index: 1;
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  max-width: 60rem;
}
@media (min-width: 760px) { .offering-card { grid-template-columns: minmax(260px, 340px) 1fr; } }
.offering-card__img { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.offering-card__img img { width: 100%; height: 100%; object-fit: cover; }
.offering-card__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(110% 90% at 50% 30%, transparent 56%, rgba(43, 34, 26, 0.28) 100%); }
.offering-card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; margin: 0 0 0.9rem; }
.offering-card p { color: var(--ink-muted); margin: 0 0 1rem; max-width: 44ch; text-wrap: pretty; }
.offering-card .price { font-family: var(--font-display); font-size: 1.125rem; color: var(--ink); margin-bottom: 1.4rem; }
.offering-card .price span { color: var(--ink-muted); font-family: var(--font-body); font-size: 0.9375rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.9375rem; letter-spacing: 0.02em;
  text-decoration: none;
  background: var(--accent); color: var(--bg);
  border: 1px solid var(--accent);
  transition: filter var(--dur-exit) var(--ease-snap), transform var(--dur-exit) var(--ease-snap);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.98); }
.register-dusk .btn, .soma .btn { background: var(--dusk-accent); color: var(--dusk-bg); border-color: var(--dusk-accent); }

.offering-subtitle {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.3;
  color: var(--ink-muted); margin: 0 0 1rem; max-width: 40ch;
}
.offering-tagline { font-family: var(--font-display); font-style: italic; color: var(--ink-muted); margin-top: 1.4rem; font-size: 1.0625rem; }

/* stage + by-request note share one composition: side by side on wide screens,
   stacked on narrow - no orphaned panel floating in dead space */
.offerings-layout { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); align-items: stretch; }
@media (min-width: 1100px) {
  .offerings-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
  .offerings-quiet { align-self: center; }
}

/* by-request offerings as a candlelit evening invitation - a small dusk island
   in the noon register, echoing the page's own light journey */
.offerings-quiet {
  position: relative;
  max-width: 34rem;
  padding: clamp(1.8rem, 3.5vw, 2.4rem) clamp(1.6rem, 3vw, 2.2rem);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(192, 138, 62, 0.24), transparent 58%),
    radial-gradient(90% 70% at 88% 100%, rgba(122, 64, 56, 0.2), transparent 64%),
    var(--dusk-bg);
  color: var(--dusk-ink);
  border: 1px solid rgba(239, 230, 212, 0.14);
  border-radius: 18px;
  overflow: hidden;
}
/* a slow candle-breath in the corner glow */
.offerings-quiet__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 38% at 22% 8%, rgba(217, 167, 88, 0.13), transparent 70%);
  animation: candle-breathe 9s ease-in-out infinite alternate;
}
/* a quiet aside, not a beacon: narrow breath so the booking card keeps the room */
@keyframes candle-breathe { from { opacity: 0.75; } to { opacity: 1; } }
.offerings-quiet > *:not(.offerings-quiet__glow) { position: relative; z-index: 1; }
.offerings-quiet .label { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--dusk-accent); margin: 0 0 1rem; }
.offerings-quiet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.offerings-quiet li { font-family: var(--font-display); color: var(--dusk-ink); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.3; position: relative; padding-left: 1.7rem; }
.offerings-quiet__rule {
  border: 0; height: 1px; margin: 1.3rem 0 1.1rem;
  background: linear-gradient(90deg, rgba(217, 167, 88, 0.45), rgba(217, 167, 88, 0.06));
}
.offerings-quiet :focus-visible { outline-color: var(--dusk-accent); }
.offerings-quiet li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.22em;
  width: 14px; height: 14px;
  opacity: 0.6;
  background-color: var(--candle);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 48.5C50.15 48.38 50.5 47.93 50.87 47.79C51.24 47.64 51.75 47.54 52.23 47.62C52.7 47.69 53.28 47.88 53.74 48.22C54.2 48.56 54.7 49.06 55.01 49.66C55.32 50.25 55.58 51.01 55.63 51.79C55.67 52.56 55.57 53.46 55.26 54.28C54.95 55.1 54.44 55.98 53.76 56.68C53.07 57.38 52.16 58.05 51.16 58.46C50.17 58.88 48.95 59.16 47.77 59.16C46.58 59.15 45.24 58.92 44.06 58.42C42.87 57.91 41.63 57.13 40.65 56.13C39.67 55.14 38.75 53.84 38.19 52.45C37.62 51.07 37.24 49.41 37.24 47.8C37.24 46.19 37.54 44.4 38.19 42.82C38.83 41.23 39.85 39.59 41.11 38.28C42.38 36.98 44.03 35.77 45.79 34.99C47.56 34.21 49.65 33.68 51.68 33.62C53.72 33.55 55.97 33.86 57.98 34.6C59.99 35.33 62.07 36.52 63.74 38.02C65.41 39.52 66.97 41.49 68.01 43.6C69.05 45.71 69.79 48.23 69.98 50.68C70.17 53.13 69.91 55.86 69.14 58.31C68.38 60.76 67.07 63.31 65.38 65.38C63.69 67.45 61.45 69.4 59.02 70.76C56.59 72.11 53.67 73.13 50.8 73.5C47.94 73.87 44.73 73.72 41.83 72.98C38.93 72.24 35.9 70.87 33.39 69.05C30.88 67.22 28.49 64.75 26.78 62.03C25.07 59.32 23.72 56.02 23.11 52.76C22.5 49.5 22.46 45.83 23.12 42.47C23.78 39.11 25.15 35.57 27.06 32.6C28.97 29.63 31.62 26.76 34.58 24.65C37.54 22.53 41.17 20.79 44.81 19.89C48.44 18.99 52.58 18.71 56.4 19.22C60.21 19.74 64.27 21.04 67.72 22.98C71.18 24.92 74.56 27.7 77.12 30.86C79.68 34.02 81.86 37.95 83.11 41.93C84.36 45.92 84.94 50.49 84.63 54.76C84.32 59.03 83.15 63.61 81.24 67.56C79.33 71.52 76.48 75.44 73.17 78.48C69.86 81.53 65.67 84.19 61.37 85.84C57.07 87.49 52.09 88.44 47.37 88.39C42.66 88.34 37.56 87.36 33.1 85.54C28.63 83.72 24.15 80.88 20.59 77.47C17.03 74.06 13.85 69.66 11.75 65.08C9.65 60.51 8.62 52.51 8 50' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 48.5C50.15 48.38 50.5 47.93 50.87 47.79C51.24 47.64 51.75 47.54 52.23 47.62C52.7 47.69 53.28 47.88 53.74 48.22C54.2 48.56 54.7 49.06 55.01 49.66C55.32 50.25 55.58 51.01 55.63 51.79C55.67 52.56 55.57 53.46 55.26 54.28C54.95 55.1 54.44 55.98 53.76 56.68C53.07 57.38 52.16 58.05 51.16 58.46C50.17 58.88 48.95 59.16 47.77 59.16C46.58 59.15 45.24 58.92 44.06 58.42C42.87 57.91 41.63 57.13 40.65 56.13C39.67 55.14 38.75 53.84 38.19 52.45C37.62 51.07 37.24 49.41 37.24 47.8C37.24 46.19 37.54 44.4 38.19 42.82C38.83 41.23 39.85 39.59 41.11 38.28C42.38 36.98 44.03 35.77 45.79 34.99C47.56 34.21 49.65 33.68 51.68 33.62C53.72 33.55 55.97 33.86 57.98 34.6C59.99 35.33 62.07 36.52 63.74 38.02C65.41 39.52 66.97 41.49 68.01 43.6C69.05 45.71 69.79 48.23 69.98 50.68C70.17 53.13 69.91 55.86 69.14 58.31C68.38 60.76 67.07 63.31 65.38 65.38C63.69 67.45 61.45 69.4 59.02 70.76C56.59 72.11 53.67 73.13 50.8 73.5C47.94 73.87 44.73 73.72 41.83 72.98C38.93 72.24 35.9 70.87 33.39 69.05C30.88 67.22 28.49 64.75 26.78 62.03C25.07 59.32 23.72 56.02 23.11 52.76C22.5 49.5 22.46 45.83 23.12 42.47C23.78 39.11 25.15 35.57 27.06 32.6C28.97 29.63 31.62 26.76 34.58 24.65C37.54 22.53 41.17 20.79 44.81 19.89C48.44 18.99 52.58 18.71 56.4 19.22C60.21 19.74 64.27 21.04 67.72 22.98C71.18 24.92 74.56 27.7 77.12 30.86C79.68 34.02 81.86 37.95 83.11 41.93C84.36 45.92 84.94 50.49 84.63 54.76C84.32 59.03 83.15 63.61 81.24 67.56C79.33 71.52 76.48 75.44 73.17 78.48C69.86 81.53 65.67 84.19 61.37 85.84C57.07 87.49 52.09 88.44 47.37 88.39C42.66 88.34 37.56 87.36 33.1 85.54C28.63 83.72 24.15 80.88 20.59 77.47C17.03 74.06 13.85 69.66 11.75 65.08C9.65 60.51 8.62 52.51 8 50' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
}
.offerings-quiet .fine { font-size: 0.9375rem; color: var(--dusk-muted); font-style: normal; margin: 0; }
.offerings-quiet .fine a {
  color: var(--dusk-accent);
  border-bottom: 1px solid rgba(217, 167, 88, 0.35); padding-bottom: 1px;
  transition: border-bottom-color var(--dur-exit) var(--ease-snap);
}
.offerings-quiet .fine a:hover { border-bottom-color: var(--dusk-accent); }

/* ===========================================================================
   SHOWS - spiral-ceremony photo anchor beside the CTA (dusk) + past strip
   =========================================================================== */
.shows { padding-bottom: clamp(48px, 6vh, 96px); }
.seam--shows-gap { height: clamp(40px, 6vh, 80px); }
.shows__stage { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 4.6rem); }
@media (min-width: 860px) { .shows__stage { grid-template-columns: minmax(260px, 380px) 1fr; } }
.shows__anchor { position: relative; }
.shows__anchor .frame {
  position: relative; border-radius: 999px 999px 18px 18px; overflow: hidden; aspect-ratio: 3 / 4;
  border: 1px solid rgba(217, 167, 88, 0.22);
}
/* lifted so the spiral-of-candles subject actually reads (Mark: "cannot see what it is") */
.shows__anchor .frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86) brightness(0.9) contrast(1.03) sepia(0.06); }
/* lighter warm vignette - still intimate, no longer swallowing the subject */
.shows__anchor .frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(94% 80% at 50% 32%, transparent 52%, rgba(14, 16, 12, 0.5) 100%),
    radial-gradient(60% 50% at 50% 34%, rgba(217, 167, 88, 0.14), transparent 64%);
}
.shows__anchor figcaption { font-size: 0.9375rem; color: var(--dusk-ink); font-style: italic; margin-top: 0.7rem; text-align: center; }
.shows__invite .section-title { margin-top: 0; }
.shows__cta { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: clamp(1.4rem, 3vw, 2rem); }
/* This one sits in the dusk register, where a solid ochre block was the loudest thing on
   the screen. Ghost treatment: ochre hairline and text, warming to a soft fill on hover.
   The Offerings button stays filled - it's on a light background and it's the real CTA,
   and the "Reserve a seat" card (when an event is live) stays filled for the same reason. */
.shows__cta .btn {
  background: transparent;
  color: var(--dusk-accent);
  border-color: rgba(217, 167, 88, 0.45);
  transition: background var(--dur-exit) var(--ease-snap),
              border-color var(--dur-exit) var(--ease-snap),
              transform var(--dur-exit) var(--ease-snap);
}
.shows__cta .btn:hover {
  filter: none;
  background: rgba(217, 167, 88, 0.12);
  border-color: var(--dusk-accent);
}
.shows__cta .aside { color: var(--dusk-muted); font-size: 0.9375rem; }
/* next-gathering: a candlelit featured event card (markup ships commented until
   details are final - see the template in index.html) */
.next-gathering { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.next-gathering .label { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dusk-accent); margin: 0 0 0.9rem; }
.next-gathering__card {
  display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem); flex-wrap: wrap;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgba(217, 167, 88, 0.3);
  border-radius: 18px;
  background:
    radial-gradient(80% 120% at 12% 20%, rgba(192, 138, 62, 0.14), transparent 60%),
    rgba(239, 230, 212, 0.03);
}
.next-gathering__when {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.7rem 1.1rem;
  border-right: 1px solid rgba(217, 167, 88, 0.25);
}
.next-gathering__when .day { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dusk-muted); }
.next-gathering__when .date { font-family: var(--font-display); font-size: 1.5rem; color: var(--dusk-ink); font-variant-numeric: tabular-nums; }
.next-gathering__what { flex: 1; min-width: 14rem; }
.next-gathering__what h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.1; margin: 0 0 0.35rem; color: var(--dusk-ink); }
.next-gathering__what .meta { margin: 0; font-size: 0.9375rem; color: var(--dusk-muted); font-variant-numeric: tabular-nums; }
.next-gathering__what .meta--sub { margin-top: 0.3rem; font-size: 0.875rem; opacity: 0.82; }
/* the upcoming show's own flyer, matted like the past ones below so the two read as one
   family: poster CONTAINED, never cropped - these carry their own dates and prices. */
.next-gathering__poster {
  flex: 0 0 auto; width: clamp(5.5rem, 13vw, 8.5rem);
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(217, 167, 88, 0.22);
  background: rgba(16, 18, 13, 0.55);
}
.next-gathering__poster img { display: block; width: 100%; height: auto; filter: saturate(0.9) brightness(0.94); }

.past-gatherings .label { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dusk-muted); margin: 0 0 0.7rem; }
.past-gatherings__note {
  font-family: var(--font-body); font-style: italic;
  font-size: 0.9375rem; line-height: 1.6; color: var(--dusk-muted);
  max-width: 52ch; margin: 0 0 1.6rem;
}
/* deterministic columns so six flyers always land in balanced rows (6 / 3+3 / 2s) */
.gathering-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); }
@media (min-width: 640px) { .gathering-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .gathering-strip { grid-template-columns: repeat(6, 1fr); } }
.gathering-strip figure { margin: 0; }
/* These are POSTERS, not photographs: they carry titles, dates and prices. cover-cropping
   them into a uniform 4:5 sliced the text (the flyers are 9:16, 1:1 and 640x905, so up to
   a third of each was cut). `contain` on a dark mat shows each one whole, like a poster
   pinned to a board, and the mat gives the mixed shapes a common edge. */
.gathering-strip .frame {
  border-radius: 18px; overflow: hidden; aspect-ratio: 4/5;
  border: 1px solid rgba(217, 167, 88, 0.2);
  background: rgba(16, 18, 13, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.gathering-strip .frame img {
  width: 100%; height: 100%; object-fit: contain;
  filter: saturate(0.9) brightness(0.9);
}
.gathering-strip figcaption { font-size: 0.875rem; color: var(--dusk-muted); margin-top: 0.55rem; line-height: 1.45; }
.gathering-strip figcaption .ttl { display: block; color: var(--dusk-ink); opacity: 0.88; }
.gathering-strip figcaption .mta { display: block; font-size: 0.75rem; }

/* ===========================================================================
   APOTHECARY - Agua de Flora editorial pairing + cascading product cards (dusk)
   =========================================================================== */
.apothecary { background: var(--dusk-surface); color: var(--dusk-ink); }
.apothecary .eyebrow { color: var(--dusk-accent); }
.apothecary .eyebrow .spark { background: var(--dusk-accent); }
.apothecary .section-intro { color: var(--dusk-muted); }

/* the Agua de Flora art composed WITH the section head, not floating alone */
.apothecary__lede { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(2.8rem, 6vw, 4.4rem); }
@media (min-width: 860px) { .apothecary__lede { grid-template-columns: 1fr minmax(300px, 440px); } }
.apothecary__banner {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 24px; overflow: hidden; border: 1px solid rgba(217, 167, 88, 0.18);
}
.apothecary__banner img { width: 100%; height: 100%; object-fit: cover; }
.apothecary__banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(100% 100% at 50% 40%, transparent 60%, rgba(20, 22, 17, 0.42) 100%); }

/* the bridge from music to scent - her own words on where the perfumes began */
.apothecary__origin {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.4;
  color: var(--dusk-ink); max-width: 34ch; margin: clamp(1.4rem, 3vw, 2rem) 0 0;
}

/* the craft - a quiet old-world perfumery note between the banner and the shelf */
.apothecary__craft {
  max-width: 60ch;
  margin: 0 0 clamp(2.6rem, 6vw, 4rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid rgba(217, 167, 88, 0.22);
}
.apothecary__craft .label {
  font-family: var(--font-body); font-size: 0.8125rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--dusk-accent); margin: 0 0 1rem;
}
.apothecary__craft p:not(.label) {
  margin: 0; color: var(--dusk-muted);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.72; text-wrap: pretty;
}

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
@media (min-width: 760px) {
  .shop-grid { grid-template-columns: repeat(4, 1fr); align-items: start; }
  /* break the flat grid: cascading margin-top offsets */
  .shop-grid > .shop-card:nth-child(2) { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
  .shop-grid > .shop-card:nth-child(3) { margin-top: clamp(2.8rem, 6vw, 4.8rem); }
  .shop-grid > .shop-card:nth-child(4) { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
}
/* Cards are plain divs while purchases are locked (no anchor-era text-decoration/color
   needed). No hover-scale either - the ambient pointer tilt on .shop-card__img (js)
   keeps the shelf alive without promising a destination the click can't deliver. */
.shop-card { display: flex; flex-direction: column; gap: 0.8rem; }
.shop-card__img { border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; background: var(--dusk-bg); }
.shop-card__img img { width: 100%; height: 100%; object-fit: cover; }
.shop-card .name { font-family: var(--font-display); font-size: 1.0625rem; }
.shop-card .meta { font-size: 0.8125rem; color: var(--dusk-muted); }
/* kept: prices come back with the next batch of inventory */
.shop-card .price { color: var(--dusk-accent); }

/* "the shelf is resting" - purchases closed while she makes the next batch by hand.
   Borrows the hairline + label language of .apothecary__craft so it reads as a sibling
   note in this section rather than a new component. */
.apothecary__restock {
  max-width: 52ch;
  margin: clamp(2.6rem, 6vw, 4rem) 0 0;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid rgba(217, 167, 88, 0.22);
}
.apothecary__restock .label {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  color: var(--dusk-accent); margin: 0 0 0.9rem;
}
.apothecary__restock p:not(.label) {
  margin: 0; color: var(--dusk-muted);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.72; text-wrap: pretty;
}
.apothecary__restock .apothecary__all { margin-top: clamp(1.4rem, 3vw, 2rem); }
.apothecary__all {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: clamp(2.4rem, 5vw, 3.4rem);
  text-decoration: none; color: var(--dusk-accent);
  border-bottom: 1px solid rgba(217, 167, 88, 0.4); padding-bottom: 2px;
  transition: border-bottom-color var(--dur-exit) var(--ease-snap), opacity var(--dur-exit) var(--ease-snap);
}
.apothecary__all:hover { border-bottom-color: var(--dusk-accent); opacity: 0.82; }

/* ===========================================================================
   STAY CLOSE - Earth Altar mandala breathing behind the form + drawn spiral
   =========================================================================== */
.stay { position: relative; background: var(--dusk-bg); color: var(--dusk-ink); text-align: center; overflow: hidden; }
.stay__mandala {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; width: min(84vw, 720px); aspect-ratio: 1 / 1;
  transform: translate(-50%, -46%);
  opacity: 0.14;
}
.stay__mandala img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  filter: saturate(0.6) brightness(0.7) sepia(0.28) contrast(1.02);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
  animation: mandala-breathe 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes mandala-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.04) rotate(4deg); }
}
.stay__inner { position: relative; z-index: 1; }
.stay .eyebrow { color: var(--dusk-accent); justify-content: center; }
.stay .eyebrow .spark { background: var(--dusk-accent); }
.stay__blessing {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  text-wrap: balance;
  margin: 0 auto 1.4rem;
  max-width: 16ch;
}
.stay__sub { color: var(--dusk-muted); max-width: 42ch; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); }
.subscribe {
  display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
  max-width: 30rem; margin: 0 auto clamp(2.4rem, 5vw, 3.2rem);
}
.subscribe label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.subscribe input {
  flex: 1 1 16rem;
  background: var(--dusk-surface);
  border: 1px solid rgba(217, 167, 88, 0.28);
  color: var(--dusk-ink);
  font-family: var(--font-body); font-size: 1rem;
  padding: 0.85rem 1.1rem; border-radius: 12px;
}
.subscribe input::placeholder { color: var(--dusk-muted); }
.subscribe input:focus-visible { outline: 2px solid var(--dusk-accent); outline-offset: 3px; }
.subscribe input:-webkit-autofill {
  -webkit-text-fill-color: #EFE6D4;
  -webkit-box-shadow: 0 0 0 100px var(--dusk-surface) inset;
  caret-color: #EFE6D4;
}
.subscribe button {
  flex: none;
  background: var(--dusk-accent); color: var(--dusk-bg);
  border: 1px solid var(--dusk-accent);
  font-family: var(--font-body); font-size: 0.9375rem; letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem; border-radius: 12px; cursor: pointer;
  transition: filter var(--dur-exit) var(--ease-snap), transform var(--dur-exit) var(--ease-snap);
}
.subscribe button:hover { filter: brightness(1.06); }
.subscribe button:active { transform: scale(0.98); }
.subscribe__note { font-size: 0.8125rem; color: var(--dusk-muted); margin-top: -1.8rem; }

.socials { display: flex; gap: clamp(1rem, 3vw, 2rem); justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.socials a { text-decoration: none; color: var(--dusk-muted); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color var(--dur-exit) var(--ease-snap); }
.socials a:hover { color: var(--dusk-accent); }

/* contact line (Mark: "Contact - booking, collaborations, press") */
.stay__contact { margin: clamp(1.6rem, 3vw, 2.2rem) auto 0; max-width: 46ch; font-size: 0.9375rem; color: var(--dusk-muted); }
.stay__contact a {
  color: var(--dusk-accent); text-decoration: none;
  border-bottom: 1px solid rgba(217, 167, 88, 0.35); padding-bottom: 1px;
  transition: border-bottom-color var(--dur-exit) var(--ease-snap);
}
.stay__contact a:hover { border-bottom-color: var(--dusk-accent); }

/* closing spiral glyph - the last thing you see, drawing itself above the sign-off */
.stay__spiral { width: clamp(52px, 7vw, 84px); height: clamp(52px, 7vw, 84px); margin: clamp(3rem, 7vw, 5rem) auto clamp(1.4rem, 3vw, 2rem); }
.stay__spiral path { fill: none; stroke: var(--dusk-accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 0; }
/* is-draw is a JS hook; JS arms (hides) then draws. Default rests fully drawn (no-JS safe). */
.stay__spiral.is-draw path { stroke-dashoffset: 0; }

.site-foot {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(217, 167, 88, 0.18);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
}
.site-foot .mark { font-family: var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.9375rem; }
.site-foot .fine { font-size: 0.75rem; color: var(--dusk-muted); }
.site-foot .spiral-mark { width: 22px; height: 22px; }
.site-foot .spiral-mark path { fill: none; stroke: var(--dusk-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===========================================================================
   SIGNATURE PASS - Awwwards craft round
   Lenis smooth scroll, entry ritual, masked word rises, gate-walk pin,
   cover tilt, ambient-sound toggle. Every effect has a reduced-motion off-ramp
   in the block below; each is JS-gated so no-JS falls back to plain flow.
   =========================================================================== */

/* --- Lenis smooth scroll (item 7): kill native smooth so it doesn't double up - */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Entry ritual veil (item 2): opt-in via html.ritual-on; auto-fades in CSS -- */
.ritual { display: none; }
html.ritual-on .ritual {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(120% 100% at 50% 42%, #262a21 0%, #1a1d16 56%, #101208 100%);
  animation: ritual-veil 1550ms var(--ease-settle) forwards;
}
.ritual__field {
  position: absolute; inset: -10%;
  background:
    radial-gradient(9% 12% at 30% 24%, rgba(217, 167, 88, 0.14), transparent 60%),
    radial-gradient(8% 11% at 68% 34%, rgba(192, 138, 62, 0.10), transparent 62%),
    radial-gradient(10% 13% at 50% 70%, rgba(122, 64, 56, 0.08), transparent 62%);
  animation: drift 60s ease-in-out infinite alternate;
}
.ritual__spiral { position: relative; width: clamp(66px, 12vw, 112px); height: clamp(66px, 12vw, 112px); }
.ritual__spiral path {
  fill: none; stroke: var(--dusk-accent); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: ritual-draw 1200ms var(--ease-settle) 120ms forwards,
             ritual-bloom 1200ms var(--ease-settle) 120ms both;
}
@keyframes ritual-draw { to { stroke-dashoffset: 0; } }
@keyframes ritual-bloom { from { opacity: 0; } to { opacity: 1; } }
@keyframes ritual-veil {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* the spiral swells gently, like a gate breathing open, then rests */
html.ritual-on .ritual__spiral {
  transform: scale(0.9);
  opacity: 0;
  animation: ritual-breathe 1400ms var(--ease-settle) 120ms forwards;
}
@keyframes ritual-breathe {
  0% { transform: scale(0.9); opacity: 0; }
  55% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Masked word rise for section titles (item 3, JS-split) ------------------ */
/* JS wraps each word; default (no JS) rests as plain, fully-visible text. */
.rise-rotate.words-split { opacity: 1; transform: none; }
.wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.wm__i { display: inline-block; will-change: transform; }
.words-done .wm__i { will-change: auto; } /* release compositor layers after the one-shot rise */

/* --- Gate-walk void deepen layer (item 1): GSAP scrubs opacity during the pin - */
.hero__deepen {
  position: absolute;
  inset: 0;
  z-index: 8;   /* above every hero layer, so the deepening void swallows the chrome */
  pointer-events: none;
  opacity: 0;
  /* at full strength this swallows the whole arch (only a faint ember at center),
     so the walk resolves into near-black before we release into the dawn */
  background:
    radial-gradient(112% 88% at 50% 36%, rgba(12, 14, 9, 0.5) 0%, rgba(9, 11, 7, 0.9) 52%, #070805 100%);
}
/* while pinned, the arch scales past the viewer - give it a GPU hint */
.gate { will-change: transform, opacity; }

/* --- Cover tilt toward cursor (item 5): pointer-fine, motion-safe only -------- */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .facade.tilt-el {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 520ms var(--ease-settle);
  }
  .shop-card__img.tilt-el {
    transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 520ms var(--ease-settle);
  }
  .facade.is-tilting, .shop-card__img.is-tilting { transition: transform var(--dur-micro) linear; }
  /* specular sheen that follows the cursor, screen-blended so it reads as light */
  .facade.tilt-el::after, .shop-card__img.tilt-el::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background: radial-gradient(160px 160px at var(--mx, 50%) var(--my, 50%),
                rgba(255, 246, 226, 0.30), transparent 62%);
    transition: opacity 420ms var(--ease-snap);
  }
  .facade.is-tilting::after, .shop-card__img.is-tilting::after { opacity: 1; }
}

/* --- Ambient-sound toggle (item 6) ------------------------------------------- */
.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-family: var(--font-body);
  color: inherit;
  transition: border-color var(--dur-exit) var(--ease-snap),
              background var(--dur-exit) var(--ease-snap),
              opacity var(--dur-exit) var(--ease-snap);
}
.sound-toggle__waves { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-toggle__waves i {
  width: 2px; height: 5px; flex: none;
  background: currentColor; border-radius: 2px; opacity: 0.72;
  transition: height var(--dur-exit) var(--ease-snap);
}
.sound-toggle.is-playing .sound-toggle__waves i { opacity: 1; animation: sound-wave 900ms var(--ease-settle) infinite; }
.sound-toggle.is-playing .sound-toggle__waves i:nth-child(1) { animation-delay: 0ms; }
.sound-toggle.is-playing .sound-toggle__waves i:nth-child(2) { animation-delay: 150ms; }
.sound-toggle.is-playing .sound-toggle__waves i:nth-child(3) { animation-delay: 300ms; }
@keyframes sound-wave { 0%, 100% { height: 4px; } 50% { height: 14px; } }

.sound-toggle--hero {
  position: absolute;
  top: clamp(1rem, 3vh, 1.7rem);
  right: clamp(1rem, 4vw, 2.2rem);
  z-index: 7;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  border-radius: 999px;
  background: rgba(24, 27, 20, 0.42);
  border: 1px solid rgba(217, 167, 88, 0.34);
  color: var(--dusk-ink);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.sound-toggle--hero:hover { border-color: var(--dusk-accent); background: rgba(24, 27, 20, 0.58); }
.sound-toggle--hero .sound-toggle__label {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dusk-muted);
}
.sound-toggle--hero.is-playing .sound-toggle__label { color: var(--dusk-ink); }

.sound-toggle--nav {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid currentColor;
  opacity: 0.6;
}
.sound-toggle--nav .sound-toggle__label {
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.sound-toggle--nav:hover, .sound-toggle--nav.is-playing { opacity: 1; }
/* icon-only beside the hamburger on small screens (44px = tap-target floor) */
@media (max-width: 720px) {
  .sound-toggle--nav { width: 44px; height: 44px; justify-content: center; padding: 0; border-radius: 50%; }
  .sound-toggle--nav .sound-toggle__label { display: none; }
}

.nav__right { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.6rem); }

/* ===========================================================================
   RESPONSIVE - nav collapses to a soft overlay
   =========================================================================== */
@media (max-width: 720px) {
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: inherit;
  }
  .nav__toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; }
  .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; }
  .nav__toggle span::before { top: -7px; } .nav__toggle span::after { top: 7px; }
  .nav__links {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center; gap: 1.8rem;
    background: rgba(30, 33, 27, 0.97); color: var(--dusk-ink);
    transform: translateY(-100%);
    visibility: hidden;   /* closed: links leave the tab order */
    transition: transform var(--dur-enter) var(--ease-settle),
                visibility 0s var(--dur-enter);
    padding: 2rem;
  }
  .nav__links.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-enter) var(--ease-settle),
                visibility 0s;
  }
  .nav__links a { font-size: 1.25rem; font-family: var(--font-display); opacity: 1; padding-bottom: 6px; }
  /* The mobile menu is always a dark overlay, so the accent is the dusk one whatever
     register the nav bar itself is tinted to. Previously the open menu gave NO
     indication of the current section at all. */
  .nav__links a.is-action { color: var(--dusk-accent); }
  .nav__links a::after { left: 50%; right: 50%; transform: none; transition: left var(--dur-exit) var(--ease-snap), right var(--dur-exit) var(--ease-snap); }
  .nav__links a.is-action::after,
  .nav__links a:hover::after { left: 0; right: 0; }

  .release__links a, .socials a, .soma__more a, .apothecary__all {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* on the smallest screens the hero pill sheds its label to just the waves */
  .sound-toggle--hero { padding: 0.5rem; }
  .sound-toggle--hero .sound-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* ===========================================================================
   REDUCED MOTION - every effect has an off-ramp
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__canopy, .atmos-light { animation: none; }
  .gate { animation: none; opacity: 1; transform: none; }
  .hero__names { animation: none; opacity: 1; transform: translateX(-50%); }
  .hero__cue { animation: none; opacity: 1; transform: translateX(-50%); }
  .hero__invocation .line, .hero__whisper { animation: none; opacity: 1; filter: none; transform: none; }
  .hero__cue .spiral path { animation: none; stroke-dashoffset: 0; }
  .facade__play .disc { animation: none; }
  .stay__mandala img { animation: none; }
  .reveal, .rise-rotate { opacity: 1; transform: none; }
  .unmask { clip-path: none; }
  /* drawn line-art rests fully drawn */
  .trail__vine.is-draw path,
  .trail__node .spiral.is-draw path,
  .words__spiral.is-draw path,
  .stay__spiral.is-draw path { stroke-dashoffset: 0; }
  .facade:hover img, .facade:hover .facade__scrim { transform: none; }
  .nav { transition: opacity var(--dur-exit) linear; }
  .btn:active, .subscribe button:active { transform: none; }

  /* signature pass off-ramps: land everything flat, no drift, no rise, no tilt */
  .hero__invocation .line__rise { animation: none; transform: none; }
  .hero__deepen { opacity: 0 !important; }
  .ritual__field { animation: none; }
  .ritual__spiral path { animation: none; stroke-dashoffset: 0; }
  html.ritual-on .ritual__spiral { animation: none; transform: none; opacity: 1; }
  html.ritual-on .ritual { animation: none; opacity: 0; visibility: hidden; pointer-events: none; }
  .wm, .wm__i { overflow: visible; transform: none; }
  .sound-toggle.is-playing .sound-toggle__waves i { animation: none; height: 9px; }
  .offerings-quiet__glow { animation: none; opacity: 1; }

  * { scroll-behavior: auto !important; }
}

/* ===========================================================================
   PRINT - light and legible, no atmosphere layers or fixed nav
   =========================================================================== */
@media print {
  body,
  .hero, .register-dusk, .soma, .interlude, .apothecary, .stay {
    background: var(--bg) !important;
    color: var(--ink) !important;
  }
  .hero__void, .atmos-light, .stay__mandala, .nav, .seam,
  .ritual, .sound-toggle, .hero__deepen, .words__spiral {
    display: none !important;
  }
  img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
}