/* ========================================================================
   ALTER — the sonic journey landing page.

   Separate from the main site on purpose. This one arrives from a paid ad,
   has one job, and carries no navigation: an ad landing page with escape
   routes leaks the traffic you paid for.

   The whole surface is lit by --lvl, a 0..1 number written once per frame
   from a real AnalyserNode on the playing audio. Nothing here is a fake
   pulse on a timer — when the track breathes, the page breathes.
   ======================================================================== */

:root {
  --ink:        #0D0805;
  --ground:     #150B06;
  --ground-up:  #241209;
  --ember:      #C2430E;
  --ember-lit:  #E8933F;
  --ivory:      #F8F5EF;
  --sand:       #D8C6AE;

  /* Lifted after an audit on phone screens: at 0.55-0.62 the small labels were
     technically legible and practically skipped. */
  --ivory-soft: rgba(248, 245, 239, 0.82);
  --ivory-dim:  rgba(248, 245, 239, 0.66);
  --sand-dim:   rgba(216, 198, 174, 0.76);
  --hair:       rgba(248, 245, 239, 0.12);

  --display: 'Cormorant Garamond', Georgia, serif;
  /* Cormorant speaks; Manrope informs. Montserrat was wide and slow to read in
     paragraphs on a phone, and Space Mono was a third voice nobody needed. */
  --body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wide: 44rem;
  --pad: clamp(1.25rem, 5vw, 2.5rem);

  /* live audio amplitude, 0..1 — set from JS every frame */
  --lvl: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ground);
  color: var(--ivory-soft);
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  line-height: 1.68;
  overflow-x: hidden;
  /* Cormorant ships old-style figures, where 1 is a short bar sitting on the
     baseline - "11 October" then reads as one wide glyph, not eleven. Every
     number on the page stands at cap height instead. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

img, video { display: block; max-width: 100%; }
em { font-style: italic; }
strong { color: var(--ivory); font-weight: 500; }

::selection { background: var(--ember); color: var(--ivory); }

:focus-visible { outline: 2px solid var(--ember-lit); outline-offset: 3px; }

.skip-link {
  position: fixed; top: 0; left: 50%; z-index: 999;
  transform: translate(-50%, -130%);
  padding: 0.7rem 1.4rem;
  background: var(--ember); color: var(--ivory);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 0 0 6px 6px;
  transition: transform 0.25s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------------- The gate: the ad's promise, kept ---------------- */

.gate {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.75rem, 5vh, 3.5rem) var(--pad);
  overflow: hidden;
  isolation: isolate;
}

.gate-bg { position: absolute; inset: 0; z-index: -2; }
.gate-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* the image itself lifts a little as the track swells */
  transform: scale(calc(1.06 + var(--lvl) * 0.035));
  filter: saturate(calc(0.92 + var(--lvl) * 0.35)) brightness(calc(0.62 + var(--lvl) * 0.3));
  transition: filter 120ms linear;
}

/* Two scrims: one to sink the photo, one warm bloom that is the music itself. */
.gate-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 62% 46% at 50% 46%,
      rgba(232, 147, 63, calc(0.10 + var(--lvl) * 0.42)) 0%,
      rgba(194, 67, 14, calc(0.05 + var(--lvl) * 0.20)) 38%,
      transparent 70%),
    linear-gradient(180deg,
      rgba(13, 8, 5, 0.82) 0%,
      rgba(13, 8, 5, 0.36) 34%,
      rgba(13, 8, 5, 0.72) 74%,
      var(--ground) 100%);
}

.gate-inner {
  position: relative;
  width: 100%;
  max-width: var(--wide);
  text-align: center;
}

.gate-mark {
  width: clamp(46px, 13vw, 62px); height: auto;
  margin: 0 auto clamp(0.9rem, 2.5vh, 1.5rem);
  opacity: 0.9;
}

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sand-dim);
  margin-bottom: 1rem;
}

.gate-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.5rem, 10.5vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ivory);
  text-wrap: balance;
  text-shadow: 0 0 calc(30px + var(--lvl) * 70px) rgba(232, 147, 63, calc(0.16 + var(--lvl) * 0.4));
}



/* ---------------- The beats ---------------- */

main { position: relative; }

/* one warm light for the whole scroll, breathing with the track */
/* (the page-wide light now lives in .atmos, with the phase of the journey) */

.beat {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(4.5rem, 13vh, 8.5rem) var(--pad);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s cubic-bezier(.16,.84,.44,1), transform 1.1s cubic-bezier(.16,.84,.44,1);
}
.beat.is-lit { opacity: 1; transform: none; }

.eyebrow {
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ember-lit);
  margin-bottom: 1.1rem;
}

.beat h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.1rem, 7.5vw, 3.6rem);
  line-height: 1.04;
  color: var(--ivory);
  margin-bottom: 1.3rem;
  text-wrap: balance;
}
.beat h2 em { color: var(--ember-lit); }

.beat p { max-width: 56ch; }
.beat p + p { margin-top: 1rem; }
.lede { color: var(--sand); font-size: 1.15rem; margin-bottom: 1rem; }

/* ---------------- The invitation film ---------------- */

.film { margin-top: clamp(2rem, 5vh, 3rem); }
.film.is-empty { display: none; }
.film-frame {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ground-up), var(--ink));
  cursor: pointer;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-frame::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, rgba(13, 8, 5, 0.72), transparent);
  pointer-events: none;
}
.film-play {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: 66px; height: 66px; margin: -33px 0 0 -33px;
  border-radius: 50%;
  background: rgba(248, 245, 239, 0.92);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.16,.84,.44,1);
}
.film-play::after {
  content: ''; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent var(--ember);
}
.film-frame:hover .film-play { transform: scale(1.07); }
.film-frame.is-playing .film-play,
.film-frame.is-playing .film-hint { opacity: 0; }
.film-hint {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 1.1rem;
  text-align: center;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ivory);
  transition: opacity 0.4s ease;
}
.film figcaption {
  margin-top: 0.85rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-dim);
}

/* ---------------- ARME ---------------- */

.arme { display: grid; gap: clamp(1.75rem, 5vw, 2.75rem); }
.arme img { border-radius: 8px; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45); }
.sig {
  margin-top: 1.3rem;
  font-family: var(--display); font-style: italic; font-size: 1.1rem;
  color: var(--sand);
}

/* ---------------- Voices ---------------- */


/* ---------------- The ask ---------------- */

.close { padding-bottom: clamp(5rem, 15vh, 9rem); }

.facts {
  list-style: none;
  margin: clamp(1.75rem, 5vh, 2.5rem) 0;
  border-top: 1px solid var(--hair);
}
.facts li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hair);
}
.facts span {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand-dim);
}
.facts strong { font-weight: 400; color: var(--ivory); text-align: right; }

/* ---------------- The framework, and who holds it ---------------- */
.ritual {
  max-width: 38rem; margin: clamp(2.25rem, 6vh, 3.25rem) auto 0;
  padding: clamp(1.4rem, 4vw, 2rem);
  border: 1px solid rgba(232, 147, 63, 0.25); border-radius: 16px;
  background: rgba(232, 147, 63, 0.04);
}
.ritual-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.1; color: var(--ivory);
  margin-bottom: 0.5rem;
}
.ritual-list { list-style: none; counter-reset: rit; margin-top: 1.5rem; display: grid; gap: 1.1rem; text-align: left; }
.ritual-list li { counter-increment: rit; padding-left: 2.4rem; position: relative; color: var(--ivory-soft); text-wrap: pretty; }
.ritual-list li::before {
  content: counter(rit); position: absolute; left: 0; top: -0.1em;
  font-family: var(--display); font-size: 1.5rem; color: var(--ember-lit);
}
.ritual-list span {
  display: block; margin-bottom: 0.2rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand);
}

.crew-list {
  list-style: none; max-width: 40rem; margin: clamp(2rem, 5vh, 2.75rem) auto 0;
  display: grid; gap: clamp(1.75rem, 5vw, 2.5rem);
}
.crew-one img {
  width: clamp(96px, 28vw, 130px); height: auto; margin: 0 auto 0.9rem;
  border-radius: 50%; border: 1px solid rgba(232, 147, 63, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.crew-one img.is-empty, .crew-one img[hidden] { display: none; }
.crew-name { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; color: var(--ivory); }
.crew-role { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember-lit); margin: 0.3rem 0 0.6rem; }
.crew-line { max-width: 34ch; margin-inline: auto; color: var(--ivory-soft); text-wrap: pretty; }
@media (min-width: 46rem) {
  .crew-list { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* ---------------- What it does ---------------- */
.arc { list-style: none; max-width: 40rem; margin: clamp(2rem, 5vh, 2.75rem) auto 0; display: grid; gap: 1.5rem; text-align: left; }
.arc li { padding-left: 1.4rem; border-left: 2px solid rgba(232, 147, 63, 0.35); }
.arc-when { display: block; margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember-lit); }
.arc-what { color: var(--ivory-soft); text-wrap: pretty; }
.arc-what strong { color: var(--ivory); font-weight: 500; }

.teach-lede { margin: clamp(2rem, 5vh, 2.75rem) auto 0; max-width: 42ch; color: var(--sand); font-family: var(--display); font-style: italic; font-size: 1.2rem; }
.cares { max-width: 40rem; margin: 1.5rem auto 0; display: grid; gap: 1.25rem; text-align: left; }
.care { padding: 1.1rem 1.2rem; border: 1px solid var(--hair); border-radius: 14px; background: rgba(248, 245, 239, 0.03); }
.care-q { font-family: var(--display); font-size: 1.25rem; line-height: 1.25; color: var(--ivory); margin-bottom: 0.45rem; }
.care-a { color: var(--ivory-soft); text-wrap: pretty; }

/* ---------------- The path ----------------
   What it does, told as one journey rather than a list: a lit thread runs
   down the left, each stage is a point on it, and its name is set large
   enough to be read by somebody who is only scanning. */
.path {
  list-style: none; position: relative;
  max-width: 40rem; margin: clamp(2.25rem, 6vh, 3.25rem) auto 0;
  text-align: left;
}
.path::before {
  content: ""; position: absolute; left: 0.45rem; top: 0.6rem; bottom: 0.6rem; width: 1px;
  background: linear-gradient(180deg, rgba(232, 147, 63, 0.05), rgba(232, 147, 63, 0.55) 18%, rgba(232, 147, 63, 0.55) 82%, rgba(232, 147, 63, 0.05));
}
.path-step { position: relative; padding: 0 0 clamp(2.25rem, 6vh, 3rem) 2.3rem; }
.path-step:last-child { padding-bottom: 0; }
.path-step::before {
  content: ""; position: absolute; left: 0.07rem; top: 0.28rem;
  width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--ground, #150B06);
  border: 1px solid var(--ember-lit);
  box-shadow: 0 0 calc(10px + var(--lvl, 0) * 18px) rgba(232, 147, 63, 0.55);
}
.path-tag {
  display: inline-block; margin-bottom: 0.55rem;
  padding: 0.28rem 0.65rem; border-radius: 999px;
  background: rgba(232, 147, 63, 0.12); border: 1px solid rgba(232, 147, 63, 0.35);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ember-lit);
}
.path-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.55rem, 6.4vw, 2.2rem); line-height: 1.12;
  color: var(--ivory); margin-bottom: 0.7rem; text-wrap: balance;
}
.path-text { color: var(--ivory-soft); text-wrap: pretty; }
.care-a a { color: var(--ember-lit); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232, 147, 63, 0.4); }
.care-a a:hover { color: var(--ivory); }
.path .arc { margin-top: 1.25rem; max-width: none; }
.path .cares { margin-top: 1rem; max-width: none; }

/* what you walk out with: the one part that should feel like a gift */
.path-step--gift::before { background: var(--ember-lit); }
.path-step--gift .path-title { color: var(--ember-lit); }
.gains { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.75rem; }
.gains li {
  padding: 0.85rem 1rem;
  border-radius: 12px; border: 1px solid rgba(232, 147, 63, 0.22);
  background: rgba(232, 147, 63, 0.06);
  color: var(--ivory-soft); text-wrap: pretty;
}
.gains strong { color: var(--ivory); font-weight: 600; }

/* ---------------- The two doors ---------------- */
.choices { max-width: 40rem; margin: clamp(1.75rem, 5vh, 2.5rem) auto 0; display: grid; gap: 1rem; text-align: left; }
.choice { padding: 1.2rem 1.3rem; border: 1px solid var(--hair); border-radius: 14px; }
.choice-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand-dim); margin-bottom: 0.5rem; }
.choice-line { color: var(--ivory-dim); text-wrap: pretty; }
.choice--lit { border-color: rgba(232, 147, 63, 0.45); background: rgba(232, 147, 63, 0.07); }
.choice--lit .choice-label { color: var(--ember-lit); }
.choice--lit .choice-line { color: var(--ivory); }
@media (min-width: 46rem) { .choices { grid-template-columns: 1fr 1fr; } }

/* the price it would be anywhere else, beside the price it is */
.price-note {
  margin: -0.35rem auto 0.9rem; max-width: 34ch;
  font-size: 0.78rem; line-height: 1.5; color: var(--sand-dim);
}

.price-was {
  display: block; margin-bottom: 0.1rem;
  font-family: var(--display); font-size: 1.15rem; line-height: 1;
  color: var(--sand-dim); text-decoration: line-through;
  text-decoration-color: rgba(232, 147, 63, 0.7);
}

/* the thread, picked up from the inquiry */
.from-quiz {
  max-width: var(--wide); margin: 0 auto;
  padding: 1.1rem var(--pad);
  border-bottom: 1px solid rgba(232, 147, 63, 0.25);
  text-align: center; font-family: var(--display);
  font-size: clamp(1.05rem, 4.2vw, 1.3rem); line-height: 1.35; color: var(--sand);
}
.from-quiz[hidden] { display: none; }
.from-quiz strong { display: block; font-weight: 500; color: var(--ivory); }

/* what a place buys, itemised at the moment of paying */
.gets {
  list-style: none; max-width: 32rem; margin: clamp(1.5rem, 4vh, 2rem) auto;
  display: grid; gap: 0.7rem; text-align: left;
}
.gets li { position: relative; padding-left: 1.6rem; color: var(--ivory-soft); text-wrap: pretty; }
.gets li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ember-lit);
  box-shadow: 0 0 calc(6px + var(--lvl, 0) * 12px) rgba(232, 147, 63, 0.65);
}
.safety {
  max-width: 44ch; margin: 1.4rem auto 0; text-align: center;
  font-size: 0.88rem; color: var(--sand);
}

/* ---------------- The venue ---------------- */
.venue h2 em { color: var(--ember-lit); font-style: normal; }
.venue-shot {
  margin: clamp(1.5rem, 4vh, 2.25rem) auto clamp(1.25rem, 3vh, 1.75rem);
  max-width: 34rem;
}
.venue-shot img {
  width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid rgba(232, 147, 63, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.venue-shot figcaption {
  margin-top: 0.7rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-dim);
}
.venue-lede { color: var(--ivory-soft); max-width: 44ch; }
.venue-where {
  margin-top: clamp(1.25rem, 3.5vh, 1.75rem);
  padding-top: 1.1rem; border-top: 1px solid var(--hair);
  font-size: 0.86rem; letter-spacing: 0.04em; color: var(--sand);
}
.venue-where a { display: block; margin-top: 0.5rem; color: var(--ember-lit); text-decoration: none; }
.venue-where a:hover { color: var(--ivory); text-decoration: underline; }

.pay {
  display: block;
  padding: 1.15rem 1.5rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #D9581B, var(--ember));
  color: var(--ivory);
  text-align: center; text-decoration: none;
  box-shadow: 0 16px 44px rgba(194, 67, 14, 0.4);
  transition: transform 0.25s cubic-bezier(.16,.84,.44,1), box-shadow 0.25s ease;
}
.pay:hover { transform: translateY(-2px); box-shadow: 0 22px 56px rgba(194, 67, 14, 0.52); }
.pay-label {
  display: block;
  font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.pay-sub {
  display: block; margin-top: 0.35rem;
  font-size: 0.7rem; letter-spacing: 0.1em;
  color: rgba(248, 245, 239, 0.72);
}
.pay.is-missing {
  background: transparent; border: 1px dashed var(--hair);
  box-shadow: none; cursor: not-allowed;
}
.pay.is-missing .pay-label { color: var(--sand-dim); }

.alt { margin-top: 1.4rem; text-align: center; font-size: 0.92rem; }
.alt a { color: var(--ember-lit); }
.fine {
  margin-top: 1.6rem;
  font-size: 0.8rem; line-height: 1.6;
  color: var(--ivory-dim);
  max-width: 48ch;
}

.foot {
  padding: 2.5rem var(--pad) 3rem;
  text-align: center;
  border-top: 1px solid var(--hair);
}
.foot img { width: 34px; height: auto; margin: 0 auto 0.9rem; opacity: 0.75; }
.foot p {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand-dim);
}

/* ---------------- Wider screens ---------------- */

@media (min-width: 46rem) {
  .arme { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
    .film-frame { aspect-ratio: 16 / 9; }
  .pay { max-width: 26rem; }
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .beat { opacity: 1; transform: none; transition: none; }
  
  .gate-bg img { transform: scale(1.06); transition: none; }
}

/* ================= The turns =================
   Two moments where the page stops talking and says one thing. */

.turn {
  padding: clamp(4.5rem, 14vh, 9rem) var(--pad);
  text-align: center;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(.16,.84,.44,1), transform 1.2s cubic-bezier(.16,.84,.44,1);
}
.turn.is-lit { opacity: 1; transform: none; }
.turn p {
  max-width: none;
  font-family: var(--display);
  font-size: clamp(2.4rem, 10vw, 5rem);
  line-height: 1.02;
  color: var(--ivory);
  text-wrap: balance;
}
.turn em { color: var(--ember-lit); }
.turn--end p { font-size: clamp(2rem, 8vw, 3.6rem); }

/* ================= The questions =================
   Seven films in a row is a wall — anyone not tapping play gets nothing, and
   each one is another chance to leave. The answer is written and always
   visible; the film folds inside. Works at any number of films, including none.
   ================================================================= */

.asks { max-width: var(--wide); }
.ask { border-bottom: 1px solid var(--hair); }
.ask summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.2rem, 4.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--ivory);
}
.ask summary::-webkit-details-marker { display: none; }
.ask summary::after {
  content: '+';
  flex: none;
  font-family: var(--body); font-size: 1.4rem; line-height: 1;
  color: var(--ember-lit);
  transition: transform 0.35s cubic-bezier(.16,.84,.44,1);
}
.ask[open] summary::after { transform: rotate(45deg); }
.ask-body { padding-bottom: 1.6rem; }
.ask-body p { max-width: 54ch; }

/* ================= Films ================= */

.film--sm { margin-top: 1.25rem; }
.film--sm .film-frame { aspect-ratio: 16 / 9; border-radius: 6px; }
.film--sm .film-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.film--sm .film-play::after { border-width: 9px 0 9px 14px; }

/* ================= Experiences shared ================= */

.says {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(1.75rem, 5vh, 2.75rem);
}
.say { flex: 0 1 clamp(220px, 60vw, 260px); }
.say { margin: 0; }
.say.is-empty { display: none; }
.say .film-frame { aspect-ratio: 9 / 16; border-radius: 8px; }
.say figcaption { text-transform: none; letter-spacing: 0.01em; font-size: 0.8rem; line-height: 1.5; font-style: italic; }
.say .film-play { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
.say .film-play::after { border-width: 9px 0 9px 14px; }
.say figcaption {
  margin-top: 0.7rem;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-dim);
}
#shared.is-empty { display: none; }

/* ================= The ask ================= */

.come { margin-bottom: clamp(1.75rem, 5vh, 2.5rem); }
.come em { color: var(--ember-lit); }


@media (prefers-reduced-motion: reduce) {
  .turn { opacity: 1; transform: none; transition: none; }
  .ask summary::after { transition: none; }
}

/* Phone-shot clips are 9:16. Cropping one into a landscape box takes the head
   off whoever is speaking, so portrait footage keeps its own frame and is held
   to a sensible column width instead. */
.film--portrait .film-frame {
  aspect-ratio: 9 / 16;
  max-width: 320px;
  margin-inline: auto;
}

/* ---------------- The invitation film is square ---------------- */
.film--square .film-frame { aspect-ratio: 1 / 1; max-width: 34rem; margin-inline: auto; }

/* ---------------- Who holds the room ----------------
   Evidence, not adjectives: a real photograph of a real room, numbers that can
   be checked, and the certificate itself at the end of the section. */
.authority h2 { margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }

.hold { margin: 0; }
.hold.is-empty { display: none; }
.hold img {
  width: 100%; height: auto;
  border-radius: 8px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  filter: saturate(0.94);
}
.hold figcaption {
  margin-top: 0.8rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-dim);
}
.hold--lead { margin-bottom: clamp(1.75rem, 5vh, 2.5rem); }

.auth-lede { max-width: 56ch; }
.auth-lede + .auth-lede { margin-top: 1rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: clamp(2rem, 5vh, 2.75rem) 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.stats dt {
  font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  line-height: 1;
  color: var(--ember-lit);
  font-variant-numeric: tabular-nums;
}
.stats dd {
  margin-top: 0.5rem;
  font-size: 0.72rem; line-height: 1.45;
  color: var(--ivory-dim);
}

.creds { list-style: none; }
.creds li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.95rem;
  color: var(--ivory-soft);
}
.creds span {
  font-family: var(--body); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-dim);
  padding-top: 0.2rem;
}


/* The certificate is shown on its own paper, not dimmed into the page. */
.cert { margin: clamp(2.25rem, 6vh, 3rem) auto 0; max-width: 26rem; }
.cert.is-empty { display: none; }
.cert img {
  width: 100%; height: auto;
  border-radius: 4px;
  background: #fff;
  padding: clamp(0.4rem, 1.5vw, 0.75rem);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
}
.cert figcaption {
  margin-top: 1rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-dim);
  text-align: center;
}

@media (max-width: 30rem) {
  /* Stacked on phones as number | label rows. A fixed number column keeps the
     three labels aligned, and nowrap stops "1 year" breaking into two lines. */
  .stats { grid-template-columns: 1fr; gap: 1rem; }
  .stats div { display: grid; grid-template-columns: 7.25rem 1fr; align-items: baseline; gap: 0.75rem; }
  .stats dt { font-size: 1.65rem; white-space: nowrap; }
  .stats dd { margin-top: 0; }
  .creds li { grid-template-columns: 1fr; gap: 0.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cert img { transform: none; }
}

/* ---------------- Trust, bridge, close ---------------- */
.shared-lede { max-width: 46ch; margin: 0 auto; text-align: center; color: var(--ivory-soft); }
#shared h2, #shared .eyebrow { text-align: center; }
.shared-foot {
  margin-top: clamp(1.75rem, 5vh, 2.5rem); text-align: center;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand-dim);
}
.bridge-date {
  display: flex; flex-direction: column; gap: 0.2rem;
  margin: 0 0 clamp(1.5rem, 4vh, 2rem);
  font-family: var(--display); font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.15;
}
.bridge-date strong { color: var(--ivory); font-weight: 500; }
.bridge-date span { color: var(--sand); font-style: italic; }
.bridge { padding-bottom: clamp(2.5rem, 7vh, 4rem); }
.close { padding-top: clamp(2.5rem, 7vh, 4rem); }
.close-title { margin-bottom: clamp(1.5rem, 4vh, 2rem); }
.close-title em { color: var(--ember-lit); }
.end-mark { width: clamp(90px, 26vw, 130px); height: auto; margin: 1.75rem auto 0; opacity: 0.9; }
.invite .eyebrow { text-align: center; }
.close-lede { margin: -0.5rem 0 1.5rem; color: var(--sand); font-family: var(--display); font-style: italic; font-size: 1.15rem; }



/* ======================================================================
   THE GROUND OF THE JOURNEY
   One fixed layer under everything. Each section names its phase in
   data-tone; the body takes it on and the colour eases across (the custom
   properties are registered so they interpolate rather than snap):

     dusk       the music, "how do you feel"   ember, low and central
     candle     who holds the room             amber from one side, like a flame
     room       invitation, testimonials       the brand's clay, filling the space
     threshold  come as you are                light gathering at the floor
     dawn       reserve, see you there         the lights come up; the ground
                                               warms toward the brand's deep brown

   The glow keeps breathing with --lvl, so the music is still in the room
   while they read. A fine grain stops the big dark fields banding on cheap
   screens and makes the ground feel like film rather than a flat fill.
   ====================================================================== */

@property --tone-ground { syntax: '<color>'; inherits: true; initial-value: #150B06; }
@property --tone-core   { syntax: '<color>'; inherits: true; initial-value: rgba(194, 67, 14, 0.16); }
@property --tone-x      { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --tone-y      { syntax: '<percentage>'; inherits: true; initial-value: 45%; }

body {
  --tone-ground: #150B06; --tone-core: rgba(194, 67, 14, 0.16); --tone-x: 50%; --tone-y: 45%;
  background: var(--tone-ground);
  transition: --tone-ground 2.6s ease, --tone-core 2.6s ease, --tone-x 3.2s ease, --tone-y 3.2s ease;
}
body[data-tone="candle"]    { --tone-ground: #170C06; --tone-core: rgba(232, 147, 63, 0.15); --tone-x: 16%; --tone-y: 20%; }
body[data-tone="room"]      { --tone-ground: #1A0D07; --tone-core: rgba(153, 50, 10, 0.30);  --tone-x: 50%; --tone-y: 50%; }
body[data-tone="threshold"] { --tone-ground: #1D0F08; --tone-core: rgba(232, 147, 63, 0.18); --tone-x: 50%; --tone-y: 100%; }
body[data-tone="dawn"]      { --tone-ground: #28140B; --tone-core: rgba(246, 201, 139, 0.18); --tone-x: 50%; --tone-y: 108%; }

.atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.atmos-glow {
  position: absolute; inset: -12%;
  background:
    radial-gradient(ellipse 62% 48% at var(--tone-x) var(--tone-y), var(--tone-core) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(194, 67, 14, calc(var(--lvl) * 0.14)) 0%, transparent 72%);
  opacity: calc(0.8 + var(--lvl) * 0.5);
  animation: atmosBreathe 22s ease-in-out infinite alternate;
}
@keyframes atmosBreathe {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, -1.5%, 0) scale(1.06); }
}
.atmos-grain {
  position: absolute; inset: 0;
  opacity: 0.08;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ======================================================================
   ONE AXIS
   The audit found the page zig-zagging: centred gate, left-aligned "how do
   you feel", centred invitation, left bridge, left close with a centred
   WhatsApp line under it. For a page gone through like a ceremony,
   everything now sits on the centre line. Only genuine tables - facts,
   prices, credentials on wide screens - keep columns, held to a narrower
   measure so they sit under their headings instead of spanning past them.
   ====================================================================== */

.beat { text-align: center; }
.beat p, .beat h2, .beat .eyebrow { margin-inline: auto; }
.lede, .auth-lede { max-width: 42ch; }
.close-lede { margin: -0.5rem auto 1.75rem; }
.bridge-date { align-items: center; }

.film figcaption, .hold figcaption { text-align: center; }

.stats { text-align: center; }
.stats dd { margin-inline: auto; max-width: 20ch; }

.creds, .facts { max-width: 38rem; margin-inline: auto; text-align: left; }
.facts { margin-block: clamp(1.75rem, 5vh, 2.5rem); }
.pay { max-width: 26rem; margin-inline: auto; }
.fine { text-align: center; }

@media (max-width: 30rem) {
  /* centred number over its label, instead of a two-column row */
  .stats { gap: 1.4rem; }
  .stats div { display: block; }
  .stats dt { font-size: 2.2rem; }
  .stats dd { margin-top: 0.35rem; }
  .creds { text-align: center; }
  .creds li { padding: 0.9rem 0; }
}

/* ======================================================================
   TYPE
   Nothing on the page now sets below ~11px, and small capitals carry weight
   500-600 so they hold up against the dark.
   ====================================================================== */

.eyebrow { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.28em; }
.film figcaption, .hold figcaption, .cert figcaption { font-size: 0.72rem; font-weight: 500; }
.film-hint { font-size: 0.7rem; font-weight: 600; }
.creds span { color: var(--sand); letter-spacing: 0.16em; }
.creds li { font-size: 1rem; }
.stats dd { font-size: 0.86rem; color: var(--ivory-soft); }
.facts span { font-size: 0.72rem; font-weight: 600; }
.pay-label { font-weight: 700; }

/* A testimonial is a person speaking. Set it in the speaking face, in their
   own case - not in tracked capitals like a label. */
.say figcaption {
  margin-top: 0.9rem;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 1.14rem; line-height: 1.35;
  letter-spacing: 0; text-transform: none;
  color: var(--sand);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .atmos-glow { animation: none; }
  body { transition: none; }
}

/* Centred text shows a stranded last word far more than ragged-right does. */
.beat p, .fine, .say figcaption { text-wrap: pretty; }


/* ======================================================================
   MOTION  (driven by js/motion.js)
   Every hidden starting state is scoped to html.motion, which the script
   adds only when it runs and reduced motion is not asked for. Without it,
   nothing on this page is ever invisible.
   ====================================================================== */

:root { --ease-out: cubic-bezier(.16, .84, .44, 1); --ease-soft: cubic-bezier(.22, .61, .36, 1); }

/* ---------------- words rise from behind a mask ---------------- */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for italic descenders and the ascenders of Cormorant */
  padding: 0.08em 0.04em 0.14em;
  margin: -0.08em -0.04em -0.14em;
}
.wi { display: inline-block; }
.motion .wi {
  transform: translate3d(0, 110%, 0) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--i) * 70ms);
}
.motion .words.in .wi,
.motion .gate.is-ready .wi { transform: none; }
.motion .gate .wi { transition-delay: calc(250ms + var(--i) * 110ms); transition-duration: 1.3s; }

/* the rest of the opening follows the headline in */
.motion .gate-mark,
.motion .hero-kicker,
.motion .hero-sub,
.motion .scroll-cue {
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.motion .gate-mark { transform: translate3d(0, -10px, 0) scale(0.9); }
.motion .gate.is-ready .gate-mark { opacity: 0.9; transform: none; transition-delay: 0s; }
.motion .gate.is-ready .hero-kicker { opacity: 1; transform: none; transition-delay: 0.2s; }
.motion .gate.is-ready .hero-sub    { opacity: 1; transform: none; transition-delay: 1.1s; }
.motion .gate.is-ready .scroll-cue  { opacity: 1; transform: none; transition-delay: 1.8s; }

/* the emblem floats, very slightly, like something held */
.motion .gate.is-ready .gate-mark { animation: floatMark 7s ease-in-out 1.2s infinite; }
@keyframes floatMark {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
.gate-inner { will-change: transform, opacity; }

/* ---------------- rise ---------------- */
.motion .rise {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion .rise.in { opacity: 1; transform: none; }

/* testimonial cards come up with a little turn, like being handed over */
.motion .say.rise { transform: translate3d(0, 60px, 0) rotate(-2.5deg); }
.motion .say.rise:nth-child(2) { transform: translate3d(0, 60px, 0) rotate(2.5deg); }
.motion .say.rise.in { transform: none; }

/* the booking button arrives last and a touch larger */
.motion .pay.rise { transform: translate3d(0, 28px, 0) scale(0.96); }
.motion .pay.rise.in { transform: none; }
.motion .pay.rise.in:hover { transform: translateY(-2px); }

/* ---------------- lines draw themselves ---------------- */
.motion .creds li.rise,
.motion .facts li.rise {
  border-bottom-color: transparent;
  background: linear-gradient(var(--hair), var(--hair)) no-repeat left bottom / 0% 1px;
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), background-size 1.4s var(--ease-soft);
  transition-delay: var(--d, 0ms);
}
.motion .creds li.rise.in,
.motion .facts li.rise.in { background-size: 100% 1px; }
@media (max-width: 30rem) {
  .motion .creds li.rise { background-position: center bottom; }
}

/* ---------------- unveil ---------------- */
.hold-frame {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}
.hold-frame img { box-shadow: none; border-radius: 0; will-change: transform; }

.motion .unveil {
  clip-path: inset(14% 10% 14% 10% round 14px);
  opacity: 0;
  transition: clip-path 1.5s var(--ease-out), opacity 0.9s ease, transform 1.5s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion .unveil.in { clip-path: inset(0 0 0 0 round 8px); opacity: 1; }
.motion .film-frame.unveil .film-video { transform: scale(1.18); transition: transform 2.2s var(--ease-out); }
.motion .film-frame.unveil.in .film-video { transform: scale(1); }

/* the certificate is laid down onto the page */
.motion .cert img.unveil {
  clip-path: none;
  transform: translate3d(0, 50px, 0) rotate(-5deg) scale(0.94);
}
.motion .cert img.unveil.in { transform: rotate(-0.6deg); }

/* ---------------- the turns grow into place as you pass ---------------- */
.motion .turn p {
  transform: scale(calc(0.9 + var(--p, 0) * 0.1));
  letter-spacing: calc((1 - var(--p, 0)) * 0.05em);
  text-shadow: 0 0 calc(var(--p, 0) * 60px) rgba(232, 147, 63, calc(var(--p, 0) * 0.28));
  will-change: transform;
}

/* ---------------- the booking button catches the light ---------------- */
.pay { position: relative; overflow: hidden; }
.pay::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 210, 0.28), transparent);
  transform: skewX(-18deg);
  animation: sheen 5.5s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 62% { left: -60%; }
  100%    { left: 130%; }
}

/* the live tier's dot breathes */

/* ---------------- embers and the thread ---------------- */
.embers { position: absolute; inset: 0; width: 100%; height: 100%; }

.thread {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  height: 2px;
  background: linear-gradient(90deg, var(--ember), var(--ember-lit), #F6C98B);
  transform-origin: 0 50%;
  transform: scaleX(0);
  box-shadow: 0 0 12px rgba(232, 147, 63, 0.6);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pay::after { animation: none; }
}

/* ---------------- The opening room, moving ---------------- */
.gate-video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(calc(1.06 + var(--lvl) * 0.035));
  filter: saturate(calc(0.92 + var(--lvl) * 0.35)) brightness(calc(0.62 + var(--lvl) * 0.3));
  transition: opacity 1.6s ease, filter 120ms linear;
}
.gate-video.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gate-video { display: none; } }

/* ---------------- People in the room, behind the words ----------------
   Full-bleed loops under the glow and grain. A veil keeps the centre column
   dark enough for the words, and lets the dancers show at the edges and in
   the gaps between sections. Only the loop for the current phase is lit. */
.bg-loop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  /* a memory of the room, not footage to study */
  filter: sepia(0.25) saturate(0.9) contrast(1.05);
  transform: scale(1.04);
  transition: opacity 2.2s ease;
}
.bg-loop.is-lit { opacity: calc(var(--o, 0.28) + var(--lvl) * 0.12); }
.atmos-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 55% at 50% 50%, rgba(21, 11, 6, 0.72) 0%, rgba(21, 11, 6, 0.38) 70%, rgba(21, 11, 6, 0.2) 100%),
    linear-gradient(180deg, rgba(21, 11, 6, 0.55), rgba(21, 11, 6, 0.1) 30%, rgba(21, 11, 6, 0.1) 70%, rgba(21, 11, 6, 0.6));
}
@media (min-width: 46rem) {
  /* on wide screens the column is narrow, so the dancers can show more */
  .bg-loop.is-lit { opacity: calc(var(--o, 0.28) + 0.06 + var(--lvl) * 0.12); }
}
@media (prefers-reduced-motion: reduce) { .bg-loop { display: none; } }

/* The opening room dissolves into the ground below it instead of ending on a
   hard edge, so the people behind "How do you feel?" seem to be in the same
   space the music opened. */
.gate-bg, .gate-video, .gate-scrim {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}


/* ======================================================================
   THE WELCOME
   The first screen is the experience itself: the moving room, the name and
   what it is. Nothing to press. The music is already underneath.
   ====================================================================== */

.hero .gate-inner { padding-bottom: clamp(3rem, 9vh, 5rem); }

.hero .gate-mark { width: clamp(52px, 14vw, 70px); margin-bottom: clamp(1.2rem, 3.5vh, 2rem); }

.hero-kicker {
  font-size: clamp(0.72rem, 2.6vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  padding-left: 0.42em;               /* balances the trailing letter-space */
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: clamp(0.5rem, 1.6vh, 0.9rem);
}

/* A sentence, not a wordmark: set in sentence case and sized to be read
   at a glance rather than to fill the screen. */
.hero .gate-title {
  font-size: clamp(2.3rem, 9.4vw, 4.8rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-transform: none;
  text-wrap: balance;
}
.hero .gate-title em { font-style: normal; color: var(--ember-lit); }

.hero-sub {
  margin: clamp(1.1rem, 3vh, 1.8rem) auto 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 4.4vw, 1.6rem);
  line-height: 1.3;
  color: var(--sand);
}
.hero-when {
  margin-top: clamp(1.1rem, 3vh, 1.6rem);
  font-family: var(--body); font-size: clamp(0.76rem, 3vw, 0.9rem);
  letter-spacing: 0.06em; color: var(--ivory-soft);
}
.hero-when strong { color: var(--ivory); font-weight: 600; }
.hero-cta {
  display: inline-block; margin-top: clamp(0.9rem, 2.5vh, 1.3rem);
  padding: 0.85rem 1.6rem;
  border: 1px solid rgba(232, 147, 63, 0.6); border-radius: 999px;
  background: rgba(21, 11, 6, 0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ivory); text-decoration: none;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.hero-cta:hover { background: rgba(232, 147, 63, 0.16); border-color: var(--ember-lit); transform: translateY(-2px); }

.hero-pillars {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  margin-top: 0.7rem;
  font-family: var(--body); font-style: normal;
  font-size: clamp(0.72rem, 2.7vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ivory);
}
.hero-pillars span { padding: 0 clamp(0.6rem, 2.4vw, 1.1rem) 0 calc(clamp(0.6rem, 2.4vw, 1.1rem) + 0.28em); }
.hero-pillars span + span { border-left: 1px solid rgba(232, 147, 63, 0.7); }

/* a thread of light falling, to say the page continues below */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(5.2rem, 12vh, 6.5rem);
  width: 1px; height: clamp(38px, 7vh, 56px);
  margin-left: -0.5px;
  overflow: hidden;
  background: rgba(248, 245, 239, 0.18);
}
.scroll-cue::after {
  content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%;
  background: linear-gradient(transparent, var(--ember-lit));
  animation: cueFall 2.2s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes cueFall { to { top: 100%; } }

/* ---------------- ALTER 001 · The First Light ---------------- */
.first-light { padding-top: clamp(5rem, 16vh, 10rem); padding-bottom: clamp(1.5rem, 5vh, 3rem); }
.first-light .eyebrow { font-size: 0.82rem; letter-spacing: 0.4em; padding-left: 0.4em; }
.first-light h2 { font-size: clamp(2.8rem, 11vw, 5.4rem); line-height: 1; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue::after { animation: none; }
}


/* nothing sits at the bottom of the opening now, so the cue can too */
.scroll-cue { bottom: clamp(1.6rem, 5vh, 2.6rem); }


/* The invitation film carries its own subtitles along the bottom, so its
   "tap for sound" sits at the top instead of on top of the words. */
.film--square .film-hint { top: 1rem; bottom: auto; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }


/* ======================================================================
   THE LIVE PRICE
   Only the price that applies right now: per person, and for two. The
   server moves it to the next tier by itself as places are paid for.
   ====================================================================== */
.price {
  max-width: 30rem;
  margin: 0 auto clamp(1.5rem, 4vh, 2.2rem);
  padding: clamp(1.4rem, 4vw, 2rem) clamp(1.1rem, 4vw, 2rem);
  border: 1px solid rgba(232, 147, 63, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(232, 147, 63, 0.07), rgba(21, 11, 6, 0.35));
  text-align: center;
}
.price-tier {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.3em; padding-left: 0.3em;
  text-transform: uppercase; color: var(--ember-lit);
  margin: 0 auto 1rem;
}
.price-options { display: flex; justify-content: center; gap: clamp(1.5rem, 8vw, 3.5rem); flex-wrap: wrap; }
.beat .price-opt { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; margin: 0; }
.price-opt[hidden] { display: none !important; }
.price-amt {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.3rem, 10vw, 3.2rem); line-height: 1;
  color: var(--ivory); font-variant-numeric: lining-nums tabular-nums;
}
.price-for { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-dim); }
.beat .price-left { margin: 1.1rem auto 0; font-size: 0.86rem; color: var(--ember-lit); }
.price-left::before {
  content: "\25CF"; display: inline-block; margin-right: 0.45em;
  font-size: 0.7em; vertical-align: 0.15em;
  animation: livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.price.is-full .price-tier { font-size: 1rem; color: var(--sand); margin-bottom: 0; }

button.pay { width: 100%; border: 0; cursor: pointer; font: inherit; }
button.pay:disabled { cursor: progress; opacity: 0.75; }
#book { max-width: 26rem; }

/* ======================================================================
   THE BOOKING FORM
   ====================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html.is-booking { overflow: hidden; }

.booking {
  width: min(30rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1.15rem, 5vw, 2rem) clamp(1.25rem, 4vw, 1.75rem);
  border: 1px solid rgba(232, 147, 63, 0.25);
  border-radius: 18px;
  background: linear-gradient(180deg, #25130A, #150B06 60%);
  color: var(--ivory-soft);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.booking::backdrop { background: rgba(8, 4, 2, 0.72); backdrop-filter: blur(6px); }
.booking[open] { animation: bookingIn 0.45s cubic-bezier(.16,.84,.44,1); }
@keyframes bookingIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

.booking-close {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--sand); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.booking-close:hover { background: rgba(248, 245, 239, 0.08); color: var(--ivory); }

.booking .eyebrow { text-align: center; margin: 0 0 0.5rem; }
.booking-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem, 7vw, 2.3rem); line-height: 1.05;
  color: var(--ivory); text-align: center;
  margin: 0 0 1.4rem;
}

.kinds { border: 0; padding: 0; margin: 0 0 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.kind { position: relative; cursor: pointer; }
.kind[hidden] { display: none; }
.kinds:has(.kind[hidden]) { grid-template-columns: 1fr; }
.kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kind-body {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.9rem 0.5rem;
  border: 1px solid rgba(248, 245, 239, 0.16); border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.kind-name { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.kind-price { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--ivory); }
.kind input:checked + .kind-body { border-color: var(--ember-lit); background: rgba(232, 147, 63, 0.1); }
.kind input:checked + .kind-body .kind-name { color: var(--ember-lit); }
.kind input:focus-visible + .kind-body { outline: 2px solid var(--ember-lit); outline-offset: 2px; }

.field { display: block; margin-bottom: 0.95rem; text-align: left; }
.field[hidden] { display: none; }
.field-label { display: block; margin-bottom: 0.35rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); }
.field > input, .phone {
  width: 100%;
  font: 400 1rem/1.3 var(--body);
  color: var(--ivory);
  background: rgba(248, 245, 239, 0.05);
  border: 1px solid rgba(248, 245, 239, 0.18);
  border-radius: 10px;
}
.field > input { padding: 0.8rem 0.9rem; }
.field input:focus { outline: none; }
.field > input:focus, .phone:focus-within { border-color: var(--ember-lit); box-shadow: 0 0 0 3px rgba(232, 147, 63, 0.18); }
.phone { display: flex; align-items: stretch; overflow: hidden; }
.phone-cc { display: grid; place-items: center; padding: 0 0.75rem; color: var(--sand); border-right: 1px solid rgba(248, 245, 239, 0.14); font-size: 0.95rem; }
.phone input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.8rem 0.9rem; font: 400 1rem/1.3 var(--body); color: var(--ivory); }
.field input::placeholder { color: rgba(248, 245, 239, 0.3); }
.field-error { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: #F2A36B; }
.field-error:empty { display: none; }
.field.has-error > input, .field.has-error .phone { border-color: #E07A45; }

.check { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.2rem 0 1.2rem; font-size: 0.88rem; line-height: 1.45; text-align: left; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0.1rem 0 0; accent-color: var(--ember-lit); flex: none; }

.booking-error {
  margin: 0 0 1rem; padding: 0.75rem 0.9rem;
  border-radius: 10px; background: rgba(224, 122, 69, 0.12); border: 1px solid rgba(224, 122, 69, 0.4);
  font-size: 0.9rem; line-height: 1.5; color: var(--ivory); text-align: left;
}
.booking-error a { color: var(--ember-lit); white-space: nowrap; }
.booking .pay { max-width: none; }
.pay.is-busy .pay-label::after {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.6em; vertical-align: -0.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.booking-fine { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--ivory-dim); text-align: center; }

.booking-done { text-align: center; padding-top: 0.5rem; }
.booking-done-text { margin: 0 auto 1rem; max-width: 34ch; color: var(--ivory-soft); }
.booking-ref { margin: 0 0 1.5rem; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--sand); }
.booking-ref strong { display: block; margin-top: 0.3rem; font-size: 1.3rem; letter-spacing: 0.12em; color: var(--ivory); }

/* The flyer: the evening on one card, theirs to keep and to send on. */
.done-flyer { margin: 0 0 1.5rem; }
.done-flyer img {
  width: min(320px, 82%); height: auto; margin: 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(232, 147, 63, 0.28);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}
.done-flyer figcaption { margin-top: 0.9rem; }
.done-flyer a {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember-lit); text-decoration: none;
  border-bottom: 1px solid rgba(232, 147, 63, 0.35); padding-bottom: 2px;
}
.done-flyer a:hover { color: var(--ivory); border-bottom-color: var(--ivory); }

@media (prefers-reduced-motion: reduce) {
  .booking[open], .price-left::before, .pay.is-busy .pay-label::after { animation: none; }
}

/* the close mark gets its own corner; the heading lines keep clear of it */
.booking-form > .eyebrow:first-of-type,
.booking-done > .eyebrow:first-of-type { padding-inline: 2.2rem; letter-spacing: 0.2em; font-size: clamp(0.64rem, 2.6vw, 0.74rem); white-space: nowrap; }

@media (max-width: 22rem) {
  /* on the narrowest phones the close mark sits above the heading, not beside it */
  .booking { padding-top: 3rem; }
  .booking-close { top: 0.35rem; right: 0.35rem; }
}


/* ======================================================================
   ALTER / ALTAR
   The E in the name turns, every few seconds, into an A in ember light and
   back: the thing you change, and the place you bring it to.
   ====================================================================== */
/* Both letters sit in the same cell of a one-cell grid, so the word keeps the
   width of the wider one (the A) whichever is showing. Absolute positioning
   made the A overlap the R, because an A is wider than an E. */
.swap { display: inline-grid; vertical-align: baseline; }
.swap-e, .swap-a { grid-area: 1 / 1; justify-self: center; }
.swap-a {
  color: var(--ember-lit);
  text-shadow: 0 0 calc(24px + var(--lvl) * 40px) rgba(232, 147, 63, 0.55);
  opacity: 0;
}
.swap-e { animation: swapE 7s ease-in-out 2.4s infinite; }
.swap-a { animation: swapA 7s ease-in-out 2.4s infinite; }
@keyframes swapE {
  0%, 38%   { opacity: 1; filter: blur(0); transform: none; }
  46%, 88%  { opacity: 0; filter: blur(6px); transform: translateY(-0.08em) scale(0.94); }
  96%, 100% { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes swapA {
  0%, 38%   { opacity: 0; filter: blur(6px); transform: translateY(0.08em) scale(0.94); }
  46%, 88%  { opacity: 1; filter: blur(0); transform: none; }
  96%, 100% { opacity: 0; filter: blur(6px); transform: translateY(0.08em) scale(0.94); }
}
/* the letter joins the headline's entrance */
.motion .gate .swap { opacity: 0; transition: opacity 1.2s var(--ease-out) 0.6s; }
.motion .gate.is-ready .swap { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .swap-e, .swap-a { animation: none; }
}

/* the opening is now dancers, not light: a touch more shade behind the words */
.hero .gate-scrim {
  background:
    radial-gradient(ellipse 70% 42% at 50% 50%, rgba(13, 8, 5, calc(0.55 - var(--lvl) * 0.15)) 0%, transparent 75%),
    linear-gradient(180deg, rgba(13, 8, 5, 0.7) 0%, rgba(13, 8, 5, 0.35) 38%, rgba(13, 8, 5, 0.5) 70%, var(--ground) 100%);
}

/* ALTER never breaks across lines, whichever letter it is showing */
.gate-title .nowrap { white-space: nowrap; }

/* the dancers should be seen, not guessed at: lift the opening footage and
   keep the shade concentrated behind the words */
.hero .gate-video {
  filter: saturate(calc(0.95 + var(--lvl) * 0.3)) brightness(calc(0.85 + var(--lvl) * 0.2));
}
.hero .gate-scrim {
  background:
    radial-gradient(ellipse 62% 36% at 50% 50%, rgba(13, 8, 5, calc(0.62 - var(--lvl) * 0.15)) 0%, rgba(13, 8, 5, 0.15) 75%, transparent 100%),
    linear-gradient(180deg, rgba(13, 8, 5, 0.5) 0%, rgba(13, 8, 5, 0.12) 30%, rgba(13, 8, 5, 0.18) 70%, var(--ground) 100%);
}


/* ======================================================================
   THE AGREEMENTS AND THE QUESTIONS
   Everything a guest would otherwise message to ask, answered before the
   price. Numbered because the room is held in this order, not for show.
   ====================================================================== */
.rules {
  max-width: 38rem;
  margin: clamp(1.5rem, 4vh, 2.25rem) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
  text-align: left;
}
.rules li {
  counter-increment: rule;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.2rem 0.6rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ivory-soft);
}
.rules li::before {
  content: counter(rule);
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--ember-lit);
  font-variant-numeric: lining-nums tabular-nums;
}
.beat .rules-more { max-width: 38rem; margin: 1rem auto 0; text-align: left; }
.rules-more summary {
  cursor: pointer; list-style: none;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember-lit); padding: 0.6rem 0;
}
.rules-more summary::-webkit-details-marker { display: none; }
.rules-more summary::after { content: " +"; }
.rules-more[open] summary::after { content: " ‘2"; }
.rules--rest { margin-top: 0.5rem; }

.rules-foot {
  margin-top: 1.1rem;
  font-size: 0.9rem;
  color: var(--ivory-dim);
  max-width: 38rem;
}

.asks-section .asks { text-align: left; margin-top: clamp(1.25rem, 3.5vh, 2rem); }
.ask summary:hover { color: var(--ember-lit); }
.ask-body p { color: var(--ivory-soft); }
.ask-body p + p { margin-top: 0.7rem; }
.ask-body a { color: var(--ember-lit); }

/* a testimonial's voice gets a name */
.say figcaption cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--body); font-style: normal; font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand-dim);
}


/* ======================================================================
   BOOKING, EARLIER
   The same price and the same form, offered where belief peaks (straight
   after the voices) and from a small button that follows the reader down.
   ====================================================================== */
.mid-book { padding-block: clamp(1rem, 3vh, 2rem) clamp(3.5rem, 10vh, 6rem); }
.price--mid { margin-bottom: clamp(1.25rem, 3.5vh, 1.75rem); }
#bookMid { max-width: 26rem; }

/* Kept for anywhere a second offer should stay quiet. The mid-page button
   is not one of them: it is the first time anyone is asked, and a hollow
   outline reads as an afterthought. */
.pay.pay--quiet {
  background: transparent;
  border: 1px solid rgba(232, 147, 63, 0.55);
  box-shadow: none;
  color: var(--ember-lit);
}
.pay--quiet .pay-label { color: var(--ember-lit); }
.pay--quiet .pay-sub { color: var(--sand-dim); }
.pay--quiet::after { display: none; }          /* no sheen on the quiet one */
.pay.pay--quiet:hover {
  background: rgba(232, 147, 63, 0.08);
  border-color: var(--ember-lit);
  box-shadow: none;
}

/* A small mark that follows the reader, in the page's own material: dark
   glass and a hairline, not a coloured sticker. */
.float-book {
  position: fixed; z-index: 94;
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  padding: 0.7rem 1.05rem;
  border: 1px solid rgba(232, 147, 63, 0.4);
  border-radius: 999px;
  background: rgba(21, 11, 6, 0.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--ivory);
  font-family: var(--body);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16,.84,.44,1), border-color 0.3s ease;
}
.float-book[hidden] { display: none; }
.float-book.is-up { opacity: 1; transform: none; }
.float-book-label {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sand);
}
.float-book-price { font-family: var(--display); font-size: 1.1rem; line-height: 1; color: var(--ember-lit); }
.float-book:hover { border-color: var(--ember-lit); background: rgba(21, 11, 6, 0.85); }

@media (prefers-reduced-motion: reduce) {
  .float-book { transition: none; }
}

/* the quiet pages, linked where they belong: at the very bottom */
.foot-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem;
  margin-top: 1.1rem;
}
.foot-links a {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-dim); text-decoration: none;
}
.foot-links a:hover { color: var(--ivory); }

/* ======================================================================
   PHONES: THE SAME PAGE, WITHOUT THE EXPENSIVE PARTS
   Full-screen video carrying a colour filter, a grain layer blended over
   it, and a filter that changes with the music all have to be recomposited
   every frame. On a mid-range phone that was the difference between 14fps
   and a page that scrolls properly. The grade is already baked into the
   footage, so on a small screen the effects only cost.
   ====================================================================== */
@media (max-width: 700px) {
  .bg-loop { filter: none; }
  .hero .gate-video, .gate-video { filter: brightness(0.86); }
  .atmos-grain { display: none; }
  .atmos-glow { animation: none; }
  .embers { display: none; }
}

/* ======================================================================
   THE PROMISE, IN THE ADVERTISEMENT'S VOICE
   Same words, same weight as the ad - big numerals, capitals, wide
   tracking - so the click lands on something it recognises.
   ====================================================================== */
.hero .gate-title--ad {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}
.gate-title--ad .ad-big {
  display: block;
  font-weight: 700;
  font-size: clamp(2.6rem, 12.5vw, 6.5rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.gate-title--ad .ad-line {
  display: block;
  margin-top: clamp(0.5rem, 1.6vh, 0.9rem);
  font-weight: 600;
  font-size: clamp(1.25rem, 5.6vw, 2.3rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
}
.hero-sub--ad {
  font-family: var(--body); font-style: normal; font-weight: 600;
  font-size: clamp(0.68rem, 2.9vw, 0.95rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory);
}

/* ---------------- authority, told ---------------- */
.auth-lede--first { font-family: var(--display); font-size: clamp(1.35rem, 4.6vw, 1.7rem); line-height: 1.3; color: var(--ivory); }
.auth-lede strong { color: var(--ivory); font-weight: 600; }

.ritual--brief { text-align: center; }
.ritual-kicker { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sand-dim); margin: 0 auto 0.4rem !important; }
.ritual--brief .ritual-title { margin: 0 auto 0.9rem; }
.ritual-three { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto !important; max-width: none !important;
  font-size: clamp(0.66rem, 2.6vw, 0.8rem); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember-lit); }
.ritual-three span { padding: 0.2rem clamp(0.5rem, 2vw, 0.9rem); }
.ritual-three span + span { border-left: 1px solid rgba(232, 147, 63, 0.45); }

.story-body { max-width: 38rem; margin: 0 auto; }
.story-body p { color: var(--ivory-soft); text-wrap: pretty; }
.story-body p + p { margin-top: 1.1rem; }
.story-three {
  font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.2;
  color: var(--ivory) !important; padding: 0.4rem 0 0.4rem 1.2rem;
  border-left: 2px solid var(--ember-lit);
}
.story-three em { color: var(--ember-lit); }
.story-three--small { font-size: clamp(1.25rem, 4.6vw, 1.55rem); font-style: italic; }
.story-turn { font-family: var(--display); font-size: clamp(1.3rem, 4.8vw, 1.6rem); line-height: 1.3; color: var(--ivory) !important; }
.hold--room { margin-top: clamp(2.25rem, 6vh, 3rem); }

.invite h2 { text-align: center; }
.crew-lede { margin-inline: auto; text-align: center; }
@media (min-width: 46rem) { .crew-list--two { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- the journey, taught ---------------- */
.path-text + .path-text { margin-top: 0.9rem; }
.path-text em { color: var(--ivory); }
.path-key {
  margin-top: 1rem; font-family: var(--display); font-size: clamp(1.25rem, 4.4vw, 1.5rem);
  line-height: 1.3; color: var(--ember-lit); text-wrap: pretty;
}
.path-text--small { font-size: 0.9rem; color: var(--sand-dim); margin-top: 0.9rem; }
.path-text--small a { color: var(--ember-lit); }
.safe { list-style: none; margin-top: 1rem; display: grid; gap: 0.55rem; }
.safe li { position: relative; padding-left: 1.5rem; color: var(--ivory-soft); }
.safe li::before { content: ""; position: absolute; left: 0.2rem; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--ember-lit); }
.path-step--gift .gains { margin-top: 1rem; }

/* ---------------- the closing circle ---------------- */
.circle-body { max-width: 38rem; margin: 0 auto; }
.circle-body p { color: var(--ivory-soft); text-wrap: pretty; }
.circle-body p + p { margin-top: 1rem; }
.circle-key { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 5.4vw, 2rem); color: var(--ivory) !important; }
.choices-lede { margin: clamp(2rem, 5vh, 2.75rem) auto 0 !important; text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sand); }
.welcome { margin: clamp(1.75rem, 5vh, 2.5rem) auto 0 !important; text-align: center; font-family: var(--display); font-size: clamp(1.4rem, 5vw, 1.8rem); color: var(--ivory); }
.welcome span { display: block; margin-top: 0.3rem; font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.24em; color: var(--ember-lit); }
.close .bridge-date { margin-bottom: 1rem; }
.close .facts { margin-bottom: clamp(1.75rem, 5vh, 2.5rem); }

.hero-when .nowrap { white-space: nowrap; }
@media (max-width: 30rem) {
  .ritual-three { flex-direction: column; gap: 0.35rem; }
  .ritual-three span + span { border-left: 0; }
}
/* the film and the voices read as one block of proof */
.beat.invite { padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
#shared { padding-top: clamp(1rem, 3vh, 2rem); }
.story { padding-top: clamp(2rem, 6vh, 4rem); }
.pay--bridge { display: block; margin: clamp(1.5rem, 4vh, 2rem) auto 0; max-width: 26rem; }