/* ==========================================================================
   Erin Northcott — Sunrise to Stars
   Type: Fraunces (editorial display serif) / Karla (body) / JetBrains Mono (labels)
   ========================================================================== */

/* ==========================================================================
   SELF-HOSTED FACES (2026-09-07)

   Menlo takes over the label role from JetBrains Mono, and Baxter Clean the
   cursive one from Caveat. Both are subset to Latin plus the punctuation this
   site actually sets, which is why they are 17KB and 59KB rather than 475KB
   and 240KB.

   Both are Regular only. font-synthesis-weight is off so the browser fakes
   nothing: any --mono rule asking for 300 or 500 simply gets 400 rather than a
   smeared or emboldened counterfeit of a weight that does not exist.
   ========================================================================== */
@font-face {
  font-family: 'Menlo Web';
  src: url("fonts/menlo-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Bold and both italics are lifted out of the system Menlo.ttc, which carries
   all four. Menlo is the body face now, so <strong> and <em> have to be real
   cuts: with Regular alone every emphasis in the copy would have flattened to
   nothing under font-synthesis-weight: none. */
@font-face {
  font-family: 'Menlo Web';
  src: url("fonts/menlo-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Menlo Web';
  src: url("fonts/menlo-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Menlo Web';
  src: url("fonts/menlo-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Archivo, variable 100..900 in both styles, straight from Google Fonts (OFL).
   Latin subset only: the latin-ext and vietnamese cuts this site never sets. */
@font-face {
  font-family: 'Archivo';
  src: url("fonts/archivo-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url("fonts/archivo-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Baxter Clean';
  src: url("fonts/baxter-clean.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ballerino';
  src: url("fonts/ballerino.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --white:    #ffffff;
  --gold:     #c9a84c;
  --gold-lite:#e9c766;
  --rose:      #f5c6c6;
  --rose-deep: #bf5468;   /* rose with enough weight to read on the light sky */
  --clay:     #8b5e3c;
  --midnight: #0a0a1a;

  --ink:      #3a2e22;   /* warm near-black for body text on light sky */
  --ink-soft: #6b5a48;

  --serif: 'Fraunces', Georgia, Cambria, 'Times New Roman', serif; /* display */
  --mono:  'Menlo Web', Menlo, ui-monospace, SFMono-Regular, monospace; /* labels */
  --hand:  'Ballerino', 'Baxter Clean', 'Caveat', 'Segoe Script', cursive;   /* archival hand: Ballerino ITC trial 2026-09-09, Baxter behind it */
  --body:  'Archivo', 'Helvetica Neue', Arial, sans-serif;           /* paragraphs. Karla -> Menlo -> Archivo, 2026-09-07 */

  --accent-red: #b23a2e;   /* oxidized brick — the documentary's red, on palette */

  --measure:  72ch;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

/* Menlo now ships 400 and 700, so only the cursive needs synthesis held off */
[class*="hand"], .keyart__line { font-synthesis-weight: none; }

html { scroll-behavior: smooth; }

body {
  position: relative;      /* anchors .endsky to the bottom of the document */
  margin: 0;
  font-family: var(--body);
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--midnight); /* fallback beneath the sky */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Fixed atmosphere layers
   -------------------------------------------------------------------------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -3;
  /* JS overwrites this; static pink-peach sunrise as no-JS fallback */
  background: linear-gradient(180deg, #fdeef1 0%, #f7c8c7 50%, #f8c290 100%);
  will-change: background;
}

.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;              /* JS raises this near the night section */
  pointer-events: none;
  will-change: opacity;
}

/* glowing horizon light-band (a nod to Rising Temps) — a warm horizon that
   intensifies into the night via the --night signal set by sky.js */
.horizon {
  position: fixed;
  left: 0; right: 0;
  top: 60%;
  height: 46vh;
  transform: translateY(-50%);
  z-index: -2;
  pointer-events: none;
  /* MINIMISED 2026-10-04: "whatever this white blurry line is, it needs to
     be minimized". This is the band across the night sky. Three changes,
     all of them making it less of a LINE and more of a glow:
       - opacity ceiling .78 -> .26 at full night (about a third), and the
         floor .16 -> .06 so it barely registers before the night
       - the ellipse goes 58% -> 96% of the element's height, so the same
         light is spread over nearly twice the band, and the stops move out
         (40->46, 66->74) so the core is less concentrated
       - blur 34px -> 54px
     Kept, not deleted: it is what stops the night reading as flat. */
  background:
    radial-gradient(220% 96% at 50% 50%,
      rgba(255,244,222,.55) 0%,
      rgba(233,199,102,.30) 46%,
      rgba(201,168,76,.12) 74%,
      transparent 94%);
  filter: blur(54px);
  mix-blend-mode: screen;
  opacity: calc(.06 + var(--night, 0) * .20);
  will-change: opacity;
}

/* ambient celestial dust — drifts across the whole site (motes.js) */
.motes { position: fixed; inset: 0; z-index: -1; pointer-events: none; }


/* portal edge vignette — a soft threshold frame that deepens the space */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(128% 108% at 50% 42%, transparent 54%, rgba(8,5,16,.30) 100%);
}

/* arrival veil — a luminous wash that dissolves on load, like entering */
.enter-veil {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, #ffffff 0%, #fbe0e0 40%, #f6c290 100%);
  animation: enter 2s var(--ease) forwards;
}
@keyframes enter {
  0%   { opacity: 1; transform: scale(1.05); }
  55%  { opacity: .55; }
  100% { opacity: 0; visibility: hidden; transform: scale(1); }
}

/* film grain over everything — gives the flat gradients a cinematic tooth */
.grain {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .8;
  mix-blend-mode: soft-light;
  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");
  background-size: 150px 150px;
  animation: grainshift .6s steps(2) infinite;   /* subtle projector flicker */
}
@keyframes grainshift {
  0% { transform: translate(0,0); } 50% { transform: translate(-4px,3px); } 100% { transform: translate(3px,-2px); }
}

/* warm light leaks bleeding in from the edges, like an old exposed reel */
.leaks {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .5;
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(255,196,120,.5), transparent 60%),
    radial-gradient(50% 45% at 0% 85%, rgba(232,120,120,.4), transparent 62%),
    radial-gradient(40% 30% at 8% 8%, rgba(255,230,170,.35), transparent 60%);
  animation: leakbreathe 14s ease-in-out infinite;
}
@keyframes leakbreathe { 0%,100% { opacity: .38; } 50% { opacity: .62; } }

/* dust specks & a couple of hairline scratches drifting on the negative */
.dust {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,250,235,.9), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,250,235,.7), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(30,20,10,.5), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(255,250,235,.8), transparent),
    radial-gradient(1px 1px at 55% 85%, rgba(30,20,10,.4), transparent);
  animation: dustflick .5s steps(3) infinite;
}
@keyframes dustflick { 0%,100% { opacity: .42; } 33% { opacity: .55; } 66% { opacity: .34; } }

/* the hairline scratches ride on their own layer so they can weave in the
   gate without dragging the specks along with them */
.dust::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 12%, rgba(255,255,255,.10) 12.2%, transparent 12.4%),
    linear-gradient(90deg, transparent 78%, rgba(20,12,6,.12) 78.15%, transparent 78.3%);
  animation: gateweave 9s ease-in-out infinite;
}
/* an uneven sway — film never wanders back to exactly where it started */
@keyframes gateweave {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(2.4px); }
  33%  { transform: translateX(-1.1px); }
  52%  { transform: translateX(-2.8px); }
  71%  { transform: translateX(.9px); }
  88%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dust::after { animation: none; }
}

/* film-edge markings — a strip of exposed negative running down each side.
   The strip carries its own ground (a warm film base) rather than a blend
   mode, so the sprockets read over the dawn sky and the night alike —
   multiply would have erased them from #night down. */
/* The strip is deliberately still. Both the slow crawl and the stepped
   pull-down were tried and cut -- the edge should read as film without
   asking for any attention. (git 810bcf1..v140 has the gate mechanics if
   the motion is ever wanted back.) */
.filmedge {
  position: fixed;
  top: 0; bottom: 0;
  width: 46px;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;                       /* the print column is taller than the viewport */
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: rgba(255,238,212,.74);
  text-shadow: 0 0 3px rgba(18,10,4,.7), 0 1px 1px rgba(18,10,4,.55);
}
.filmedge--l {
  left: 0;
  background: linear-gradient(to right,
    rgba(24,14,6,.30) 0%, rgba(24,14,6,.27) 64%, rgba(24,14,6,0) 100%);
}
.filmedge--r {
  right: 0;
  background: linear-gradient(to left,
    rgba(24,14,6,.30) 0%, rgba(24,14,6,.27) 64%, rgba(24,14,6,0) 100%);
}

/* the perforations */
.filmedge::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='58'%3E%3Crect x='4' y='17' width='12' height='24' rx='3.5' fill='%23fff4de' fill-opacity='.66'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 20px 58px;
}
.filmedge--l::before { left: 0; }
.filmedge--r::before { right: 0; }

/* the edge printing, repeating evenly down the strip */
.filmedge__print {
  position: absolute;
  top: -290px;
}
.filmedge--l .filmedge__print { left: 20px; right: 0; }
.filmedge--r .filmedge__print { left: 0; right: 20px; }
.filmedge__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 290px;                          /* five pitches */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
}

@media (max-width: 720px) { .filmedge { display: none; } }

/* --------------------------------------------------------------------------
   Handwritten / archival accents (from the documentary's title cards)
   -------------------------------------------------------------------------- */
/* a word with a rough, hand-scrawled underline beneath it */
.hand-underline {
  position: relative;
  white-space: nowrap;
}
.hand-underline::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  bottom: -.24em;
  height: .34em;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cpath d='M3 9 C 60 3, 120 13, 180 6 S 232 5, 237 8' fill='none' stroke='%23b23a2e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: .9;
}
/* the red accent word, in the film's oxidized brick */
.ink-accent { color: var(--accent-red); font-style: italic; }

/* small handwritten archival annotation */
.hero__note {
  font-family: var(--hand);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  color: #000;
  opacity: .82;
  margin: .9rem 0 0;
  transform: rotate(-2.2deg);
}
/* handwritten caption under the pull-quote */
.pullquote__hand {
  font-family: var(--hand);
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  color: var(--clay);
  margin: .4rem 0 0 .3rem;
  transform: rotate(-1.6deg);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 4vw, 3rem);
  /* translucent bar — light over the bright mid sections, dark over hero/night */
  background: rgba(255,255,255,0.06);
  background: color-mix(in srgb, rgba(255,255,255,.05), rgba(12,10,26,.5) calc(var(--dusk, 0) * 100%));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.nav__name {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(.9rem, 1.25vw, 1.1rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);                                                               /* fallback */
  color: color-mix(in oklab, var(--ink), #fdf6e8 calc(var(--dusk, 0) * 100%)); /* ink ↔ ivory */
  text-decoration: none;
  white-space: nowrap;
}
.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.9rem, 2vw, 2rem);
  justify-content: flex-end;
}
.nav__link {
  position: relative;
  font-family: var(--mono);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);                                                                       /* fallback */
  color: color-mix(in oklab, var(--ink-soft), rgba(253,246,232,.92) calc(var(--dusk, 0) * 100%));
  cursor: default;                 /* stubbed for now */
  transition: color .3s var(--ease);
}
.nav__link:hover { color: #e2809b; }   /* pink hover */
/* a straight pink rule, the width of the word, wiped in from the left */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: .1em;                     /* trims the trailing letter-space, so the
                                      rule ends on the last glyph, not past it */
  bottom: -.35em;
  height: 2px;
  background: #e57fa0;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .22s var(--ease), clip-path .42s var(--ease);
  pointer-events: none;
}
.nav__link:hover::after,
.nav__link:focus-visible::after { opacity: 1; clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   Sections & shared type
   -------------------------------------------------------------------------- */
.page { position: relative; z-index: 1; }

.section {
  position: relative;
  padding: clamp(6rem, 16vh, 12rem) clamp(1.25rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.measure { max-width: var(--measure); margin: 0 auto; }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #000;                 /* stated, not warm-brown */
  margin: 0 0 1.4rem;
}
.eyebrow--light { color: var(--gold-lite); }

/* the section titles are the cursive now (2026-09-07), not Fraunces italic.
   Baxter is a copperplate: it is already slanted, so the italic comes off,
   and a script needs air under it and none of the serif's negative tracking,
   or the descenders of one line tangle with the capitals of the next. */
.section__title {
  font-family: var(--hand);
  font-style: normal;
  font-weight: 400;
  /* Baxter's cap-height is low for its em, so it has to be set larger than
     Fraunces was just to outrank the paragraph under it. */
  font-size: clamp(4rem, 9.5vw, 7.4rem);   /* much bigger, 2026-09-09 */
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0 0 1.5rem;
  color: #000;                 /* stated, not warm-brown */
}
.section__title--light { color: #fff7ea; }

.lede {
  font-size: clamp(0.98rem, 1.2vw, 1.14rem);   /* Karla sets a touch smaller than Arial */
  line-height: 1.72;
  color: #000;              /* body paragraphs read black, not warm brown */
  margin: 0;
}
.lede--light { color: rgba(255,248,238,.9); }

/* --------------------------------------------------------------------------
   SUNRISE — hero
   -------------------------------------------------------------------------- */
.section--hero {
  align-items: center;
  text-align: center;
  min-height: 100vh;
  overflow: hidden;
  /* the hero holds nothing but the photo, so it doesn't need full section padding */
  padding-top: clamp(4rem, 9vh, 7rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
}
/* Erin is the landing: the whole frame, edges and all, filling the screen with
   the nav floating over it. The collage carries its own black film border, so
   the ground behind it is that same black — any letterboxing reads as more of
   the border rather than as a gap. */
.section--hero {
  min-height: 100vh;
  padding: 0;
  justify-content: center;
}
.hero {
  max-width: none;
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 2;
}
/* the film is the landing — its border is part of the edit, so it's shown
   whole on black exactly as the collage was */
/* full bleed, edge to edge, under the nav — the whole frame at its own 16:9,
   so nothing is cropped and there is no black ground anywhere */
.section--hero .filmframe { width: 100%; max-width: none; margin: 0; }
.section--hero .filmframe__img {
  aspect-ratio: 16 / 9;
  height: auto;
  background: none;
}
.section--hero .filmframe__img video { object-fit: contain; }
.section--hero .filmframe__cap { display: none; }
.section--hero .film__cta { margin-top: clamp(1.2rem, 3vh, 2rem); }
/* Narrower than the frame's own 16:9, filling the height would letterbox it into
   a sea of black — so the hero stops trying to fill the screen and simply shows
   the whole frame at its natural size. Nothing is ever cropped, at any width. */
@media (max-width: 1000px) {
  .section--hero { min-height: 0; }
  .section--hero .filmframe__img { height: auto; aspect-ratio: 1920 / 1080; }
}

/* the film keeps its own stage, one scroll in */
.section--film {
  min-height: 0;
  padding-top: clamp(2.5rem, 6vh, 4.5rem);
  padding-bottom: clamp(3.5rem, 9vh, 6.5rem);
}
.section--film .filmframe { width: 100%; max-width: min(92vw, 1100px); margin: 0 auto; }


/* soft cloud banks on either side of the sunrise hero — you enter between them */
.hero__clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__clouds span {
  position: absolute;
  display: block;
  /* several overlapping puffs → a lumpy, cloud-like mass */
  background:
    radial-gradient(closest-side at 26% 62%, rgba(255,255,255,.92), rgba(255,255,255,0)),
    radial-gradient(closest-side at 48% 42%, rgba(255,255,255,.98), rgba(255,255,255,0)),
    radial-gradient(closest-side at 70% 60%, rgba(255,255,255,.90), rgba(255,255,255,0)),
    radial-gradient(closest-side at 40% 74%, rgba(255,255,255,.84), rgba(255,255,255,0)),
    radial-gradient(closest-side at 84% 46%, rgba(255,255,255,.80), rgba(255,255,255,0));
  background-repeat: no-repeat;
  filter: blur(16px);
  will-change: transform;
}
/* left bank — drifts gently inward and back, like parting clouds */
.hero__clouds span:nth-child(1) { width: 44vw; height: 24vw; top:  4%; left: -22%; opacity: .92; animation: cloud-l 27s ease-in-out infinite; }
.hero__clouds span:nth-child(2) { width: 36vw; height: 20vw; top: 42%; left: -18%; opacity: .78; animation: cloud-l 35s ease-in-out infinite; }
.hero__clouds span:nth-child(3) { width: 32vw; height: 18vw; top: 72%; left: -24%; opacity: .72; animation: cloud-l 31s ease-in-out infinite; }
/* right bank */
.hero__clouds span:nth-child(4) { width: 44vw; height: 24vw; top:  2%; right: -22%; opacity: .92; animation: cloud-r 29s ease-in-out infinite; }
.hero__clouds span:nth-child(5) { width: 36vw; height: 20vw; top: 40%; right: -18%; opacity: .78; animation: cloud-r 37s ease-in-out infinite; }
.hero__clouds span:nth-child(6) { width: 32vw; height: 18vw; top: 70%; right: -24%; opacity: .72; animation: cloud-r 33s ease-in-out infinite; }
@keyframes cloud-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6vw); } }
@keyframes cloud-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6vw); } }
.hero .eyebrow { color: var(--clay); }
.section--hero .eyebrow::before { content: "\2014\00a0"; }
.section--hero .eyebrow::after  { content: "\00a0\2014"; }
.hero__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 9.4vw, 6.2rem);
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;                 /* one line */
  margin: 0;
  color: var(--ink);
}
.hero__tagline {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--clay);
  margin: 1.4rem 0 0;
}


/* --------------------------------------------------------------------------
   GOLDEN HOUR — pullquote + ripple
   -------------------------------------------------------------------------- */
.pullquote {
  position: relative;
  margin: clamp(4rem, 10vh, 8rem) auto 0;
  max-width: 30ch;
  text-align: center;
}
.pullquote blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 1.2;
  color: var(--clay);
}

/* the DANIEL button reads white like the other two, and fills pink on hover */
.film__cta { text-align: center; margin: 0; }
.film__cta .btn-enter { color: #000; }
.film__cta .btn-enter:hover,
.film__cta .btn-enter:focus-visible {
  background: var(--rose);
  border-color: var(--rose);
  color: #000;
}


/* --------------------------------------------------------------------------
   Reel 02 arrives blown out and resolves — bloom.js sets --bloom on :root as
   the rose comes up the screen. At rest it is 0 and nothing renders.
   -------------------------------------------------------------------------- */
/* No white disc landing on top of it — the rose itself arrives as diffuse
   light and gathers into a flower: blurred, bright, colourless and barely
   there, resolving into focus as it comes up the screen. */




/* film still as a warm duotone inside a 16mm-style frame — clickable to the film */
.filmframe { margin: 0; position: relative; }
.filmframe__link { display: block; position: relative; text-decoration: none; color: inherit; cursor: pointer; }
/* the gate border is baked into Erin's own edit — no CSS mask needed */
.filmframe__img {
  position: relative;
  aspect-ratio: 16 / 9;                /* matches the documentary clip */
  overflow: hidden;
  border-radius: 2px;
}

.filmframe__img img,
.filmframe__img video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(.85); /* gently muted to sit in the palette */
}

/* The "Watch the trailer" cue is GONE (2026-10-02, at her ask): "i dont
   want to see that watch the trailer button, it shouldn't be there". The
   span is out of index.html and every rule that existed only for it is out
   of here. The hero image itself is still the link — the <a> wrapping it
   still opens the trailer dialog and still carries the aria-label — so
   nothing is lost but the badge. */
.filmframe__img::after {               /* subtle warm grade for cohesion */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(139,94,60,.20), rgba(201,168,76,.10) 55%, rgba(245,198,198,.14));
  mix-blend-mode: soft-light;
}
.filmframe__cap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* ---- The Becoming: text beside the unfurling-rose video ------------------- */

.section--sunset { overflow: hidden; }
.petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.petals--back  { z-index: 0; }
.petals--front { z-index: 4; }
.becoming__grid { position: relative; z-index: 2; }

.becoming__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;   /* the text column ends where the text does */
  gap: clamp(1.75rem, 4.6vw, 4.25rem);
  align-items: center;
}
.becoming__text { max-width: 52ch; text-align: left; }
.becoming__text .lede + .lede { margin-top: 1.1rem; }
/* the title holds one line beside the rose; the copy sits a touch smaller (2026-09-09) */
.becoming__text { container-type: inline-size; }   /* the title sizes off its own column */
.becoming__text .section__title {
  white-space: nowrap;
  font-size: clamp(2.6rem, 22cqi, 6rem);   /* the line is ~4.2em wide, so 22cqi always fits */
}
.becoming__text .lede { font-size: clamp(0.98rem, 1.2vw, 1.14rem); }   /* 2026-10-26,
   "why is the font size different from inner ceremnie and her bio? keep it
   consistent": this had been a size down from every other paragraph on the
   site since 2026-09-09. It now matches .lede exactly. */

/* Pill buttons (DANIEL, ENTER) — outlined in rose, filling pink on hover */
.btn-enter {
  display: inline-block;
  margin-top: clamp(1.8rem, 3.2vw, 2.6rem);
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rose-deep);                                                    /* fallback */
  color: color-mix(in oklab, var(--rose-deep), var(--rose) calc(var(--dusk, 0) * 100%));
  text-decoration: none;
  padding: 1.15rem 3rem;
  border: 1px solid currentColor;   /* deep rose on the light sky → pale rose as it darkens */
  border-radius: 0;
  background: transparent;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn-enter:hover,
.btn-enter:focus-visible {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--ink);
}

.becoming__media { margin: 0; position: relative; max-width: 580px; }

/* soft-edged orb that clips the video + its 8mm film overlays together */
/* a square, like the film frame — nothing else on this site is round */
.becoming__film {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
  /* the dark ring that seated the print in the metal is gone with the
     emboss (2026-10-02) — same as .erin__plate img */
}
.becoming__film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* warm, faded 8mm color grade */
  filter: sepia(.34) saturate(1.32) contrast(1.06) brightness(1.04) hue-rotate(-8deg);
  animation: film8-weave 3.2s steps(6) infinite;   /* subtle gate weave */
}
/* flickering film grain over the rose */
.becoming__grain8 {
  position: absolute; inset: -10%;
  pointer-events: none;
  z-index: 2;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 130px 130px;
  animation: film8-grain .5s steps(4) infinite, film8-flicker 2.6s ease-in-out infinite;
}
/* warm vignette + top/bottom light bloom, like a projected frame */
.becoming__vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(40,18,8,.55) 100%),
    linear-gradient(180deg, rgba(255,226,180,.12), transparent 30%, transparent 72%, rgba(60,20,10,.25));
  mix-blend-mode: multiply;
}
@keyframes film8-grain {
  0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); }
  50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); } 100% { transform: translate(1%,3%); }
}
@keyframes film8-flicker { 0%,100% { opacity: .42; } 45% { opacity: .58; } 70% { opacity: .34; } }
@keyframes film8-weave {
  0% { transform: translate(0,0) scale(1.02); } 50% { transform: translate(.6%,-.5%) scale(1.02); } 100% { transform: translate(-.4%,.4%) scale(1.02); }
}

/* a soft petal-pink glow behind the rose */
/* the glow behind it stays soft and shapeless — it's light, not an object */
.becoming__media::before {
  content: "";
  position: absolute;
  inset: 2%;
  background: radial-gradient(closest-side, rgba(245,198,198,.34), transparent 76%);
  filter: blur(26px);
  z-index: -1;
}
@media (max-width: 820px) {
  .becoming__grid { grid-template-columns: 1fr; gap: 2rem; max-width: 30rem; }
  .becoming__media { max-width: 22rem; margin: 0 auto; }
}

/* ---- HOOK: archival threshold (opening a box of old tapes at sunset) ------ */
.section--hook {
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding-top: clamp(5rem, 13vh, 9rem);
  padding-bottom: clamp(6rem, 15vh, 10.5rem);
}

.hook {
  max-width: 46rem;
  margin: 0 auto;
}
/* the hook now carries the whole reel: two lines, the paragraph, the film */
.hook .lede {
  max-width: 54ch;
  margin: clamp(1.6rem, 3.4vw, 2.6rem) auto 0;
}
.hook__label {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--clay);
  opacity: .72;
  margin: 0 0 1.3rem;
}
.hook__hand {
  font-family: var(--hand);
  font-size: clamp(2rem, 8.4vw, 4.1rem);
  line-height: 1.08;
  white-space: nowrap;                 /* one thought, one line */
  color: #e07a9c;                      /* pink, not brown */
  transform: rotate(-1.4deg);
  margin: 0 0 .9rem;
}
.hook__line {
  font-family: var(--mono);
  font-style: normal;
  /* Menlo sets far wider than Fraunces did, and this line is nowrap, so the
     ceiling has to come down or the sentence runs off a laptop screen. */
  font-size: clamp(.72rem, 2.9vw, 1.6rem);
  letter-spacing: -.01em;
  line-height: 1.4;
  white-space: nowrap;                 /* one thought, one line */
  color: #000;                               /* black — the pink is the hand above it */
  margin: 0;
}
.hook__hbo { font-style: normal; letter-spacing: .01em; }  /* quietly important */

/* ---- Closing benediction: held right under the audio, on the deep night ---- */
.pullquote--close {
  max-width: none;
  margin: clamp(2.5rem, 7vh, 5.5rem) auto 0;   /* close under the starline — one moment */
  text-align: center;
}
.pullquote--close blockquote {
  color: #ffffff;
  font-family: var(--hand);            /* Baxter, like the section titles (2026-09-09) */
  font-style: normal;                  /* the script is already slanted */
  font-weight: 400;
  font-size: clamp(2.3rem, 9.5vw, 6.2rem);   /* Baxter's cap-height runs low, so it sits larger */
  line-height: 1.14;
  letter-spacing: 0;
  white-space: nowrap;                 /* one sentence, one line */
  text-shadow: 0 0 46px rgba(255,255,255,.28);
  animation: glow-breathe 6.5s ease-in-out infinite;
}
/* a slow, gentle shimmer — magic felt even without a cursor */
@keyframes glow-breathe {
  0%, 100% { text-shadow: 0 0 30px rgba(255,255,255,.22); }
  50%      { text-shadow: 0 0 56px rgba(255,255,255,.45); }
}
.pullquote--close .pullquote__hand {
  color: #ffffff;
  opacity: .75;
  margin-top: 1rem;
  font-family: var(--body);            /* Archivo: the attribution is set, not written (2026-09-09) */
  font-size: clamp(.95rem, 1.4vw, 1.2rem);
  letter-spacing: .06em;
  transform: none;
}

/* concentric water-ripple behind the pullquote */
.ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.ripple i {
  position: absolute;
  top: 50%; left: 50%;
  width: 42vmin; height: 42vmin;
  margin: -21vmin 0 0 -21vmin;
  border: 1px solid rgba(201,168,76,.45);
  border-radius: 50%;
  opacity: 0;
}
.reveal.in .ripple i { animation: ripple 5.5s var(--ease) infinite; }
.reveal.in .ripple i:nth-child(2) { animation-delay: 1.8s; }
.reveal.in .ripple i:nth-child(3) { animation-delay: 3.6s; }
@keyframes ripple {
  0%   { transform: scale(.2); opacity: .55; }
  80%  { opacity: 0; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* --------------------------------------------------------------------------
   NIGHT SKY — audio player + starline
   -------------------------------------------------------------------------- */
.section--night { min-height: 100vh; justify-content: flex-end; padding-top: clamp(7rem, 14vh, 11rem); padding-bottom: clamp(7rem, 16vh, 11rem); }
.night__inner { text-align: center; }
.night__intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: rgba(255,248,238,.85);
  margin: 0 0 2.5rem;
}

.player {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.1rem 1.3rem;
  text-align: left;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(233,199,102,.28);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.player__btn {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(233,199,102,.5);
  border-radius: 50%;
  background: rgba(201,168,76,.14);
  color: var(--gold-lite);
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.player__btn:hover {
  background: rgba(242,183,204,.22);          /* pink hover */
  border-color: rgba(243,176,196,.7);
  color: #f3b0c4;
  transform: scale(1.05);
}
.player__icon { width: 22px; height: 22px; fill: currentColor; }
.player__icon--pause { display: none; }
.player.is-playing .player__icon--play { display: none; }
.player.is-playing .player__icon--pause { display: block; }

.player__body { flex: 1 1 auto; min-width: 0; }
.player__label {
  font-family: var(--mono);
  margin: 0 0 .55rem;
  font-size: .7rem;
  letter-spacing: .05em;
  color: rgba(255,248,238,.82);
}
.player__track {
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.16);
  cursor: pointer;
  overflow: hidden;
}
.player__progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-lite));
}
.player__time {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: rgba(255,248,238,.55);
}

/* the gold line that fades in slowly as the audio plays */
.starline {
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  max-width: 24ch;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 4.5vw, 2.8rem);
  line-height: 1.35;
  color: var(--gold-lite);
  text-shadow: 0 0 26px rgba(201,168,76,.35);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 6s var(--ease), transform 6s var(--ease);
}
.starline.in { opacity: 1; transform: none; animation: glow-breathe 6.5s ease-in-out infinite; }
.starline__by {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: .42em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233,199,102,.7);
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .nav { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .8rem 1.1rem; }
  /* four links won't sit on one row here — let them wrap left-aligned under
     the wordmark rather than stranding the last one on the right */
  .nav__links { gap: .5rem 1.05rem; justify-content: flex-start; }
  .nav__link { font-size: .76rem; letter-spacing: .1em; }
  .player { border-radius: 22px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — keep the scroll-driven sky, calm everything else
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal.in .ripple i { animation: none; opacity: .25; }
  .starline { transition: opacity 1s linear; transform: none; }
  .hero__clouds span { animation: none; }
  .enter-veil { animation: none; opacity: 0; visibility: hidden; }
  .grain, .dust, .leaks { animation: none; }
  .filmframe__img img { transition: none; }
  .becoming__film video, .becoming__grain8 { animation: none; }
  .becoming__film video { transform: scale(1.02); }
  .starline.in, .pullquote--close blockquote { animation: none; }
}

/* --------------------------------------------------------------------------
   Footer — quiet archival close, held in the deep night
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  color: rgba(255,248,238,.8);
  padding: clamp(3rem, 6vh, 4.5rem) clamp(1.5rem, 3vw, 2.5rem) 1.5rem;
  border-top: 1px solid rgba(233,199,102,.16);
  background: linear-gradient(180deg, rgba(10,10,26,0) 0%, rgba(6,5,14,.6) 100%);
}
.footer__inner {
  max-width: none;               /* full-bleed — spans the whole width */
  margin: 0;
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr;   /* bio holds the left, links sit right */
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.footer__name {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff7ea;
  margin: 0;
}
.footer__tag {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-lite);
  margin: .7rem 0 0;
}
.footer__note {
  font-family: var(--hand);
  font-size: 1.3rem;
  color: rgba(255,248,238,.6);
  margin: 1.2rem 0 0;
  transform: rotate(-1.6deg);
}
.footer__col { display: flex; flex-direction: column; gap: .45rem; }
.footer__h {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #f3b0c4;                 /* pink column titles */
  margin: 0 0 .7rem;
}
.footer__link {
  font-family: var(--mono);            /* footer text is Menlo, like the nav (2026-09-09) */
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,248,238,.82);
  cursor: default;                 /* stubbed until inner pages exist */
  transition: color .3s var(--ease);
}
.footer__link:hover { color: #f3b0c4; }   /* pink hover (lighter for the dark footer) */
.footer__badge {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,248,238,.45);
  margin-top: .6rem;
}
.footer__base {
  max-width: none;
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,248,238,.4);
}
@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__base { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Key-art label — Daniel & The Film only.
   A torn strip of white tape pulled from the tape boxes, the film's own line
   brushed across it. Deliberately the one place this motif appears.
   -------------------------------------------------------------------------- */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.keyart {
  position: absolute;
  left: 50%;
  /* rests on the frame's bottom edge rather than straddling it — the .75rem
     clears the dip the -1.1deg rotation puts on the lower corners */
  bottom: .75rem;
  z-index: 3;
  width: min(84%, 660px);
  margin: 0;
  padding: clamp(.85rem, 1.7vw, 1.25rem) clamp(1.6rem, 3.6vw, 2.8rem) clamp(1.1rem, 2.2vw, 1.5rem);
  transform: translateX(-50%) rotate(-1.1deg);
  pointer-events: none;                 /* the frame underneath stays clickable */
  text-align: center;
}

/* the paper itself — sun-faded, stained, scratched, then torn by turbulence */
.keyart__paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(91deg, transparent 22.4%, rgba(70,44,24,.16) 22.5%, transparent 22.7%),
    linear-gradient(89deg, transparent 68.6%, rgba(70,44,24,.12) 68.75%, transparent 68.9%),
    radial-gradient(64% 120% at 88% 104%, rgba(178,143,98,.34), transparent 66%),
    radial-gradient(70% 130% at 10% -8%, rgba(255,255,255,.95), transparent 62%),
    linear-gradient(177deg, #fdfaf3 0%, #f8f2e4 54%, #eadfc9 100%);
  background-size: 140px 140px, auto, auto, auto, auto, auto;
  background-blend-mode: multiply, normal, normal, normal, normal, normal;
  opacity: .96;
  filter: url(#torn-edge) drop-shadow(0 10px 18px rgba(52,28,12,.34));
}

/* brushed lettering, sitting on the paper rather than in it */
.keyart__line {
  position: relative;
  z-index: 1;
  display: block;
  font-family: 'Permanent Marker', var(--hand), cursive;
  font-size: clamp(1.05rem, 3.1vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #17120f;
  opacity: .92;                          /* ink that soaked in, not printed */
  text-shadow: 0 0 1px rgba(23,18,15,.5);
}
.keyart__line em {
  font-style: normal;
  color: var(--accent-red);              /* the one red word, as on the poster */
}

/* the rough brush rule struck underneath the words */
.keyart__rule {
  position: relative;
  z-index: 1;
  display: block;
  width: 84%;
  height: 5px;
  margin: clamp(.5rem, 1vw, .75rem) auto 0;
  background: #17120f;
  opacity: .88;
  filter: url(#torn-rule);
}

/* the caption clears the label now that it hangs off the frame */
.filmframe__cap--under { margin-top: clamp(2.6rem, 4.6vw, 3.6rem); }

@media (max-width: 720px) {
  .keyart { width: 92%; bottom: .5rem; }
  .keyart__rule { height: 4px; }
}

/* --------------------------------------------------------------------------
   The projector — the frame it throws, and the lamp's unsteadiness
   -------------------------------------------------------------------------- */
/* faint vertical frame lines, paired light + dark so they read on cream and
   on midnight alike */
.framelines {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(90deg, transparent calc(7% - 1px), rgba(52,32,16,.13) 7%, transparent calc(7% + 1px)),
    linear-gradient(90deg, transparent calc(7% + 1px), rgba(255,244,224,.15) calc(7% + 2px), transparent calc(7% + 3px)),
    linear-gradient(90deg, transparent calc(93% - 1px), rgba(52,32,16,.13) 93%, transparent calc(93% + 1px)),
    linear-gradient(90deg, transparent calc(93% + 1px), rgba(255,244,224,.15) calc(93% + 2px), transparent calc(93% + 3px));
  /* shares gateweave with the hairline scratches, so the whole projected
     image wanders as one rather than each layer sliding on its own */
  animation: gateweave 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .framelines { animation: none; }
}
@media (max-width: 720px) { .framelines { display: none; } }

/* the lamp: a very small, uneven lift in luminance */
.flicker {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #fff3dc;
  mix-blend-mode: soft-light;
  opacity: .03;
  animation: proj-flicker 3.4s steps(9) infinite;
}
@keyframes proj-flicker {
  0%, 100% { opacity: .026; }
  20%      { opacity: .050; }
  40%      { opacity: .020; }
  60%      { opacity: .058; }
  80%      { opacity: .032; }
}

/* sprocket ticks ahead of every reel number */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: .4em;
  margin-right: .9em;
  vertical-align: .08em;
  border-radius: 1px;
  opacity: .42;
  background-image: repeating-linear-gradient(90deg, currentColor 0 .34em, transparent .34em .84em);
}

@media (prefers-reduced-motion: reduce) {
  .flicker { animation: none; opacity: .03; }
}



/* --------------------------------------------------------------------------
   Footer: bio and socials on the left, pages on the right, credits beneath
   -------------------------------------------------------------------------- */
.footer__bio {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,248,238,.62);
  margin: .75rem 0 0;
}

.footer__follow {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.5rem);
  margin: clamp(1.3rem, 2.6vw, 1.9rem) 0 0;
}
.footer__follow-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #f3b0c4;                 /* same pink as the column titles */
  white-space: nowrap;
}
.footer__socials { display: flex; gap: clamp(.9rem, 1.8vw, 1.3rem); }
.footer__social {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  color: rgba(255,248,238,.78);
  cursor: default;                 /* stubbed until the real handles land */
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.footer__social svg { width: 100%; height: 100%; fill: currentColor; }
.footer__social:hover { color: #f3b0c4; transform: translateY(-2px); }

/* three items across the base bar now */
.footer__base { align-items: center; }
.footer__base .footer__badge { margin-top: 0; }

@media (max-width: 720px) {
  .footer__bio { max-width: none; }
  .footer__base { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* site credit in the base bar — the one live link down here */
.footer__credit {
  color: rgba(255,248,238,.45);
  text-decoration: none;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.footer__credit:hover,
.footer__credit:focus-visible { color: #f3b0c4; }

/* the Inner Ceremonies button sits on the dusk — white so it reads */
.becoming__text .btn-enter { color: #fff; }
.becoming__text .btn-enter:hover,
.becoming__text .btn-enter:focus-visible {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Collaborate — the invitation, held wide on the dusk
   -------------------------------------------------------------------------- */
.section--collab {
  min-height: 0;
  padding-top: clamp(4rem, 11vh, 7.5rem);
  padding-bottom: clamp(4rem, 11vh, 7.5rem);
}
.collab__inner { text-align: center; max-width: 54ch; }
.collab__inner .lede { margin-left: auto; margin-right: auto; }
/* one sweeping line, never two: it may run wider than the measure, centered */
.collab__inner .section__title {
  white-space: nowrap;
  width: max-content;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(2.2rem, 9vw, 7.4rem);
}

/* on the dusk, this button reads white too */
.collab__inner .btn-enter { color: #fff; }
.collab__inner .btn-enter:hover,
.collab__inner .btn-enter:focus-visible {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   THE END OF THE PAGE — "Mommy, the stars are kissing me."
   Daniel's face in the starfield, anchored to the bottom of the document and
   tall enough to run behind the closing quote AND the footer, so the two read
   as one continuous night instead of a picture pasted under a seam. It sits at
   z-index 0: above the fixed sky layers, below .page and .footer content.
   -------------------------------------------------------------------------- */
.endsky {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* THE TOP SEAM (2026-10-02). Two passes, and the second is what is here.

     It started as `transparent 0%, rgba(0,0,0,.6) 12%, #000 26%` — three
     stops, the first leg carrying 60% of the opacity in 12% of the height.
     That knee is a sharp change in SLOPE, and the eye reads a slope change
     as an edge even though no stop is hard: "the transition here feels
     harsh, i dont want to see such a stark outline". Replacing it with a
     smoothstep measured 22% less slope change and stretched the ramp from
     187px to 274px.

     Then she asked for it in the file itself: "i need the file of the
     nightsky with daniels eyes overlaid to have a gradient opacity at the
     top, so it fades better". So there is NO MASK HERE ANY MORE — the fade
     is an alpha channel. WebP because PNG with that alpha is 3.07MB for a
     starfield this noisy, while WebP at q90 is ~280KB, smaller than the
     687KB JPG.

     THE RAMP IS NOW HERS (2026-10-04, "please update the photo to the new
     one, 2.2"). starskissingme2.2.jpg is the SAME PHOTOGRAPH as
     starskissingme2.jpg — below y=300 they are pixel-identical, max
     difference 3/255, which is JPEG noise. The only thing in 2.2 is a fade
     she painted at the top, and because JPEG has no alpha it is flattened
     onto WHITE. Dropped in as-is it would read as a pale haze over the
     night, not a fade.

     So the ramp was recovered instead of copied. Flattening on white means
     flat = a*orig + (1-a)*255, so a = (255 - flat) / (255 - orig), taken per
     row (her ramp is horizontal), lightly smoothed, and pinned to opaque
     below the ramp. Reconstructing her file from it lands within 0.11/255
     mean, 1.1 max — her curve exactly. The RGB comes from the UNTOUCHED
     .jpg, not from 2.2, so none of the white she flattened onto is carried
     into the half-transparent rows.

     Her curve: alpha .67 at the very top, .73 by y=30, .90 by y=100, full by
     y=232 (20% of the frame). It is deliberately much shallower than the
     54% smoothstep that shipped at v=314 four minutes before she sent 2.2,
     so this is read as her saying that faded too far. NOTE it stops at .67
     rather than reaching 0, so the photo still arrives at two thirds
     strength at the element's top edge.

     To go back to the generated 54% smoothstep, point the <picture> at
     starskissingme2-fade.webp, which is still in images/. */
}
.endsky img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}
.endsky::after {               /* keeps the quote and the footer type readable */
  content: "";
  position: absolute;
  inset: 0;
  /* this used to be masked along with the photo; with the fade moved into
     the file, its own top has to fade or IT becomes the hard edge */
  background: linear-gradient(180deg,
    rgba(6,7,18,0) 0%, rgba(6,7,18,.10) 22%, rgba(6,7,18,.22) 40%,
    rgba(6,7,18,.34) 62%, rgba(6,7,18,.60) 100%);
}


/* --------------------------------------------------------------------------
   The closing line arrives a letter at a time, left to right — his words
   surfacing rather than being printed. letters.js splits the text and adds
   .lit when it comes into view; the caption follows once the line has landed.
   -------------------------------------------------------------------------- */
.pullquote--close .ltr {
  display: inline-block;
  opacity: 0;
  white-space: pre;
}
.pullquote--close.lit .ltr {
  animation: letter-in .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 20ms);
}
@keyframes letter-in {
  from { opacity: 0; transform: translateY(.22em) scale(.96); filter: blur(7px); }
  to   { opacity: 1; transform: none;                         filter: blur(0); }
}
/* the attribution waits for the line to finish */
.pullquote--close.lit .pullquote__hand {
  animation: hand-in .6s var(--ease) both;
  animation-delay: calc(var(--n, 0) * 20ms + .18s);
}
@keyframes hand-in { from { opacity: 0; } to { opacity: .75; } }

@media (prefers-reduced-motion: reduce) {
  .pullquote--close .ltr { opacity: 1; animation: none; }
  .pullquote--close.lit .pullquote__hand { animation: none; opacity: .75; }
}

/* --------------------------------------------------------------------------
   ERIN — the bridge between the archive and the practice. One photograph in a
   plain print border, and the two paragraphs that carry you from the film into
   the work.
   -------------------------------------------------------------------------- */
.section--erin {
  min-height: 0;
  padding-top: clamp(3rem, 8vh, 6rem);
  padding-bottom: clamp(3.5rem, 9vh, 7rem);
  overflow: hidden;                  /* the ink runs off the edge, not off the page */
}
/* rose-gold ink spilling in from the edge of the screen, behind everything */
.erin__ink {
  position: absolute;
  right: -11%;
  top: 56%;
  transform: translateY(-50%) rotate(6deg);
  width: min(31vw, 390px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: .88;
}
/* the same container and column split as Inner Ceremonies, so the two
   sections share one pair of vertical edges down the page */
.erin__grid {
  position: relative;
  z-index: 1;                        /* the words sit above the ink */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* 2026-10-02: her photo column was .88fr against 1.12fr and is now the
     WIDER of the two. align-items is stretch, not centre, because she asked
     for the photo to match the length of the text — stretch makes the row
     its own answer at every width instead of a height I guessed once. */
  /* 2026-10-05, "make erins photo on the homepage slightly smaller, its a bit
     too big": the photo column eases back from 1.15fr to 1.02fr. The row is
     the text's height, so handing the words a little more width shortens
     them, and the plate comes down in both directions rather than just
     narrowing. It is still the wider column, which was her earlier ask. */
  grid-template-columns: .82fr 1fr;   /* 2026-10-06, smaller again, twice */
  gap: clamp(1.75rem, 4.6vw, 4.25rem);
  align-items: stretch;
  text-align: left;
}
.erin__photo { margin: 0; }

/* a plain gilt frame — the light falls across it once and stays put */
/* HER BIO PHOTO: A THIN FLAT GOLD MAT (2026-10-02) ─────────────────────────
   Two asks in a row. First: "i want her bio pic on the homepage to be wider,
   and remove the gold boarder, make it better sizing. this is not looking
   good" — so the frame came off entirely. Then, straight after: "i just want
   it thinner, and lose the gradient - just make it more elegent". Read as
   the border, not the photo (she had just asked for the photo WIDER, so
   "thinner" cannot be the photo), and read as a walk-back of removing it:
   she wants the mat kept, only thin and flat. The gradient she can still see
   is v=309 on her screen; it has been flat since v=310.

   So: a 6px flat mat in the site's --gold #c9a84c. No gradient, no inset
   bevel, no hairline, and no dark ring around the print — all three of those
   were what made the old frame heavy. Thickness went clamp(.5rem, 1.1vw,
   .8rem), which is 8-12.8px, down to a flat 6px that does not grow with the
   viewport: a mat reads as elegant when it stays hairline-thin next to the
   image, and scaling it up with the page is what made it a slab.

   WIDER is a separate thing and it stays: the column widened (.erin__grid
   0.88fr/1.12fr -> 1fr/1.1fr) and the crop went 4/5 portrait to 5/4
   landscape. erin-rose.jpg is a 1920x1042 composite — a rose double exposure
   on the left, Erin on the right — and `object-fit: cover` scales by
   whichever axis needs more. At 4/5 that was the HEIGHT, so the box showed
   only 43% of the image's width and her face filled it. At 5/4 the width
   drives it and the box shows about 68%, so she comes down in the frame on
   her own and the bloom reads. That is also what her #15 wanted.

   NOTE: .becoming__media (the rose teaser) still carries the thicker flat
   plate from v=310. She has only ever named the bio pic, so the two are
   deliberately out of step until she says which way to settle it. */
/* THE PHOTO IS AS TALL AS THE TEXT (2026-10-02, her ask: "make the photo
   taller, so it natches the length of the text", and "NO I MEANT IT WIDER").

   There is no aspect-ratio here any more, and that is the point. A ratio is
   a height guessed once; the text block's height changes with the column
   width, the copy and the font, so a guessed ratio only matches at one
   viewport. Instead the grid row stretches and the photo takes whatever
   height the words next to it come to — so they are flush top and bottom at
   EVERY width, which is also what "the spacing is all off" was about.

   The chain has to be unbroken for that to work: the grid stretches the
   figure, .erin__photo passes the height to .erin__plate, and the plate is a
   grid so the img can be height: 100% of it. `min-height: 0` on the img is
   load-bearing — a grid item's default min-height is auto, which is the
   image's own intrinsic height, and without it the photo refuses to shrink
   below 1042px and drags the whole section down with it.

   Phones get their ratio back below 820px, where the two stack and there is
   no text beside the photo to match. */
/* "i want erins bio pic to be a bit taller" (2026-10-02). It was exactly as
   tall as the text, which is what she asked for an hour earlier; now it
   overhangs the words by half of 3.5rem at each end. align-self: center
   takes the figure OUT of the row's stretch so it can be taller than its
   own row — leave it stretching and height can never exceed the row, which
   is the text. The row is still the text's height, so the section does not
   grow; the photo just overhangs into padding that was already there
   (50px above, 57px below). */
.erin__photo { align-self: center; height: calc(100% + 3.5rem); }
.erin__plate {
  width: 100%;
  height: 100%;
  padding: 6px;
  background: #c9a84c;
  box-shadow: 0 20px 46px rgba(74,42,20,.26);
  display: grid;
}
.erin__plate img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  /* CENTRED ON HER FACE (2026-10-04, "i need erins photo centered to her
     face"). This is 50% because the FILE is now centred on her, not because
     50% of erin-rose.jpg is her face.

     No object-position value could do it. erin-rose.jpg is a 1920x1042
     composite with the rose on the left and Erin at 68% across, and this
     box's aspect changes with the viewport because its height follows the
     text beside it. Work out the X that centres her at each width and you
     get 82% at 1024, 91% at 1200, 99% at 1280, 98% at 1440, 92% at 1680 —
     there is no single number, so she would drift at every breakpoint.

     So the crop moved into the file: erin-rose-face.jpg is erin-rose.jpg
     cropped to (876, 0, 1920, 1042) — as wide as it can be while staying
     centred on her, since she sits close to the right edge of the source.
     1044x1042, 176KB, down from 355KB.

     TOOK TWO GOES. The first crop used a face centre of 68% read off a
     grid over the source, and she came back with "the photo is still not
     centered". Gridding the CROP instead showed her face at 57.5% of it,
     i.e. 72.8% of the source: 5 points out, which at this zoom is most of
     a face. **Measure the face on the CROP and check the 50% line lands on
     her nose — do not trust a reading taken off the wide composite.**
     The rose is gone from this frame; it was only ever in shot by pulling
     the crop left, which is the same thing that pushed her off centre.

     erin-rose.jpg stays in images/ as the source of the crop. */
  object-position: 50% 50%;
  filter: saturate(1.02) brightness(1.02);
}

.erin__text { max-width: 60ch; }
.erin__text .lede { margin-top: clamp(.9rem, 2vw, 1.35rem); }
/* the photo column took width off this one, which left the second paragraph
   ending on a lone "own." — text-wrap: pretty pulls a word down to keep the
   last line company. See the no-orphans rule. */
.erin__text .lede { text-wrap: pretty; }
.erin__title {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  margin: .35rem 0 0;
}

@media (max-width: 820px) {
  .erin__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 5vw, 2.4rem);
    max-width: 34rem;
    text-align: center;
  }
  /* the 300px cap was for the framed portrait; frameless and landscape it
     just made the photo narrower than the words under it. Stacked there is
     no text beside the photo to match, so the ratio comes back and the
     full-height chain is undone. */
  .erin__photo { height: auto; }
  .erin__plate { margin: 0 auto; max-width: 100%; height: auto; }
  .erin__plate img { height: auto; aspect-ratio: 5 / 4; }
  .erin__text { max-width: none; }
  .erin__ink { width: 52vw; right: -18%; top: 78%; opacity: .38; }
}

/* --------------------------------------------------------------------------
   The lamp — a pool of light following the pointer, sitting between the sky
   and the page so it lights the air without ever washing the type.
   Light can't brighten a bright sky, so there are two of them: a warm bloom
   that works by overlay while the sun is up, and real light by screen once
   it's dark. They cross over on --night.
   -------------------------------------------------------------------------- */
.lamp {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;                    /* above the sky and the dust, below .page */
  width: 440px;
  height: 440px;
  pointer-events: none;
  opacity: 0;
  filter: blur(16px);
  transition: opacity .7s var(--ease);
  will-change: transform;
}
.lamp--warm {
  mix-blend-mode: overlay;
  background: radial-gradient(circle,
    rgba(255,206,132,.95) 0%, rgba(255,188,104,.42) 36%, transparent 68%);
}
.lamp--cool {
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(208,226,255,.66) 0%, rgba(172,198,255,.28) 36%, transparent 68%);
}
.lamp--warm.is-lit { opacity: calc(.85 - var(--night, 0) * .8); }
.lamp--cool.is-lit { opacity: calc(.2 + var(--night, 0) * .8); }

@media (pointer: coarse) { .lamp { display: none; } }
@media (prefers-reduced-motion: reduce) { .lamp { display: none; } }


/* --------------------------------------------------------------------------
   CONNECT — the enquiry page. The sky doesn't run its arc here; it holds on
   one photographed sunset, so the page is a single held moment rather than a
   second journey. That sunset is pale, so this page runs light: --dusk and
   --night sit at 0 and the form is dark ink on warm paper.
   -------------------------------------------------------------------------- */
body.is-connect {
  --dusk: 0;
  --night: 0;
}
/* the labels have a bright band of sky to hold their own against */
body.is-connect .eyebrow { color: #9a6a3c; }
body.is-connect .sky {
  background: #cdbcc4 url("images/connect-sky2.jpg?v=179") center / cover no-repeat;
}
/* The sunset that replaced the pale one on 2026-09-07 is a city skyline, and
   the third label lands right where a dark tower meets the blown-out sun. The
   line crosses that edge, so no single text colour survives it: dark type
   disappears into the building, light type into the flare.

   So the labels carry their own light instead. A warm bloom, not a white
   halo — on a photographed sunset it reads as the sun flaring around the
   letters, which is what the rest of the frame is already doing. The inputs
   below need none of this; they have their own paper. */
body.is-connect .connect__label {
  color: var(--ink);
  text-shadow:
    0 0 3px  rgba(255,246,236,.92),
    0 0 11px rgba(255,246,236,.85),
    0 0 22px rgba(255,240,226,.55);
}

/* No film strips on Connect (2026-09-07). Hidden rather than pulled out of the
   markup: the .filmedge block is identical in all four pages and editing one
   copy is how they drift apart. One line to put back. */
body.is-connect .filmedge { display: none; }
/* the footer keeps its dark band so it still reads over a bright sky */
body.is-connect .footer {
  background: linear-gradient(180deg, rgba(22,14,32,.62) 0%, rgba(9,6,16,.88) 100%);
}

.section--connect {
  min-height: 100vh;
  justify-content: center;
  padding-top: clamp(6rem, 15vh, 10rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}
.connect__inner {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
.connect__intro { margin-bottom: clamp(2rem, 5vh, 3.25rem); }

.connect__field {
  display: block;
  margin: 0 0 clamp(1.1rem, 2.6vh, 1.7rem);
}
.connect__label {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.connect__input {
  display: block;
  width: 100%;
  padding: .95rem 1.1rem;
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(255,252,246,.6);
  border: 1px solid rgba(96,66,44,.34);
  border-radius: 0;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.connect__input--area { resize: vertical; min-height: 9rem; }
.connect__input:hover { border-color: rgba(96,66,44,.55); }
.connect__input:focus {
  outline: none;
  border-color: var(--rose-deep);
  background: rgba(255,253,249,.82);
}
.connect__input:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }

.connect__botcheck { display: none !important; }

/* the one solid button on the site — an outline would vanish into the sand */
.connect__send {
  margin-top: .4rem;
  cursor: pointer;
  color: #fff8ee;
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  box-shadow: 0 12px 28px rgba(120,40,60,.24);
}
.connect__send:hover,
.connect__send:focus-visible {
  background: #8f3348;
  border-color: #8f3348;
  color: #fff8ee;
}
.connect__send[disabled] { opacity: .6; cursor: default; }

.connect__note {
  margin: 1.1rem 0 0;
  min-height: 1.2em;
  font-family: var(--body);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
}
.connect__note.is-sent   { color: #8f3348; }
.connect__note.is-failed { color: var(--accent-red); }

.nav__link--here { cursor: pointer; }

@media (max-width: 640px) {
  .connect__inner { max-width: none; }
}

/* the links that actually go somewhere behave like links; the stubs don't */
.nav__link[href],
.footer__link[href] { cursor: pointer; }

/* the footer assembles instead of arriving all at once */
.footer__inner > .reveal:nth-child(2) { transition-delay: .1s; }
.footer__inner > .reveal:nth-child(3) { transition-delay: .2s; }
.footer__base.reveal { transition-delay: .3s; }

/* a quiet tag beside a link that isn't a link yet */
.footer__soon {
  margin-left: .5rem;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
  white-space: nowrap;
}


/* The bar floats over the hero with nothing behind it, then takes back its
   translucent ground once the page scrolls past. */
.nav.is-over {
  /* no bar — but a breath of shade so the links hold up wherever the photo is
     light behind them */
  background: linear-gradient(180deg, rgba(8,8,10,.42) 0%, rgba(8,8,10,0) 100%);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav.is-over .nav__name,
.nav.is-over .nav__link { color: #fff8ee; }
.nav.is-over .nav__link:hover { color: #f3b0c4; }


/* Inner Ceremonies still sits on a light-enough sky (luminance .47), so its
   type goes black with the rest. Collaborate (.29) and the night (.13) keep
   their cream — black would be unreadable on them. */
#sunset .eyebrow--light,
#sunset .section__title--light,
#sunset .lede--light { color: #000; }
#sunset .btn-enter { color: #000; }
#sunset .btn-enter:hover,
#sunset .btn-enter:focus-visible { background: var(--rose); border-color: var(--rose); color: #000; }



.ceremony__cta { margin: clamp(1.4rem, 3vw, 2.1rem) 0 0; }


/* the rose's right edge lines up with the panels below it */
/* a smaller rose, still right-aligned with the panels below */
/* the same gilt frame as Erin's portrait */
/* the teaser plate, now matched to .erin__plate above (2026-10-02): "also
   the inner cereomies rose image boarder needs to be ajusted, make it
   thinner with no gradient or emboss".

   Same answer as the bio photo, so the two finally agree again: a flat 6px
   mat in --gold #c9a84c. The gradient went at v=310 — what she can still
   see is an older version on her screen — and this takes the last two heavy
   things with it, the 1px hairline and the emboss. The emboss was never one
   property: it was the `inset 0 0 0 1px rgba(255,242,206,.5)` lit edge on
   this element (gone at v=310) PLUS the dark ring on .becoming__film below,
   which read as the print sunk into metal. Both are gone now.

   6px is a flat value on purpose, not a clamp: growing the mat with the
   viewport is exactly what made it read as a slab.

   SIZE, 2026-10-04: "make the inner ceremonies rose square bigger" —
   415px -> 500px, which is where it was before her #15 shrank it 17%.
   .becoming__grid's second track has to move with it or the plate sits
   left in its old slot with dead space beside it. */
.becoming__media {
  max-width: 500px;
  margin: 0;
  padding: 6px;
  background: #c9a84c;
  box-shadow: 0 20px 46px rgba(74,42,20,.26);
}
.becoming__grid {
  max-width: 1040px;
  grid-template-columns: minmax(0, 52ch) 500px;   /* tracks .becoming__media */
  justify-content: center;
  gap: clamp(1.5rem, 3.4vw, 3rem);
}

/* the tightened two-column pair is desktop-only — below this it stacks */
@media (max-width: 820px) {
  .becoming__grid {
    grid-template-columns: 1fr;
    max-width: 30rem;
    justify-content: stretch;
  }
  .becoming__media { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Sound: the film runs silent until the viewer asks for it. Sits in the
   frame's top corner, out of the key-art label's way, and stays legible over
   whatever the footage is doing underneath.
   -------------------------------------------------------------------------- */
.filmframe__sound {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff7ea;
  background: rgba(20,12,20,.44);
  border: 1px solid rgba(255,247,234,.4);
  border-radius: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.filmframe__sound:hover,
.filmframe__sound:focus-visible {
  background: rgba(20,12,20,.66);
  border-color: rgba(233,199,102,.75);
}
.filmframe__sound[hidden] { display: none; }

.filmframe__sound-icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.filmframe__sound-icon .spk { fill: currentColor; stroke: none; }
/* muted shows the cross; on shows the waves */
.filmframe__sound-icon .wave { opacity: 0; }
.filmframe__sound.is-on .filmframe__sound-icon .wave { opacity: 1; }
.filmframe__sound.is-on .filmframe__sound-icon .cross { opacity: 0; }

@media (max-width: 720px) {
  .filmframe__sound { top: 10px; right: 10px; padding: .42rem .6rem; font-size: .55rem; }
  .filmframe__sound-label { display: none; }   /* icon only on a phone */
}


/* in the hero the bar sits over the frame's top corner, so the sound control
   moves down out of its way (and clear of the key-art label at bottom centre) */
.section--hero .filmframe__sound {
  top: auto;
  right: auto;
  bottom: clamp(1rem, 3vh, 2rem);
  left: clamp(1rem, 3vw, 2.2rem);
}

/* ==========================================================================
   INNER CEREMONIES — the temple page.

   The homepage is a journey through a sunset; this is the room you arrive in
   when it is over. White is the whole ground. Cream and blush are allowed to
   exist only as a warming of that white, never as a colour you would name,
   and gold appears exactly three times: the pullquote rule, the booking
   button, the closing line. If you can point at the pink, it is too strong.
   ========================================================================== */
body.is-ceremony {
  --dusk: 0;
  --night: 0;

  /* Palette lifted from soniachoquette.net, her reference for this page.
     The ground is a warm peach cream, not white, and the one loud colour is
     a marigold reserved entirely for the thing you are meant to press. */
  --t-ink:      #3d332b;              /* warm charcoal, never pure black */
  --t-ink-soft: #85776a;
  --t-cream:    #faf3ee;              /* the page ground */
  --t-blush:    #f7e7df;              /* the deeper peach, for whole sections */
  --t-peach:    #ffc2a7;              /* bloom only, never a fill */
  --t-marigold: #ffca2c;              /* buttons only */
  --t-hair:     rgba(199,116,94,.34); /* every rule: warm terracotta, never grey */
  --t-measure:  min(100% - 3rem, 62ch);  /* ONE spine: text, columns, portrait */

  background: var(--t-cream);
  color: var(--t-ink);
}

/* the ground: white, with cream settling toward the foot like light pooling */
/* Two oversized blooms fading out well before they meet, on white. This is
   what makes a page read as luminous rather than merely blank: the light has
   somewhere to come from. Both fade to nothing by ~55%, so there is never an
   edge anywhere. Blush top-left, cream bottom-right. */
/* Peach in from the left edge, marigold in from the right, and the middle
   left pale so the type always has clean ground under it. The blooms are
   edge-anchored, not corner-anchored: they bleed in from the sides. */
body.is-ceremony .sky {
  background:
    radial-gradient(62% 92% at 0% 42%,   rgba(248,186,150,.78) 0%, rgba(250,243,238,0) 58%),
    radial-gradient(58% 88% at 100% 62%, rgba(255,205,88,.62)  0%, rgba(250,243,238,0) 56%),
    var(--t-cream);
}
/* grain stays for continuity with the film, at the edge of perception */
body.is-ceremony .grain { opacity: .035; }

/* the film edges lighten: the same strip, printed on paler stock */
body.is-ceremony .filmedge {
  width: 34px;
  color: rgba(61,51,43,.32);
  text-shadow: none;
  font-weight: 300;
}
body.is-ceremony .filmedge--l {
  background: linear-gradient(to right,
    rgba(61,51,43,.055) 0%, rgba(61,51,43,.04) 64%, rgba(61,51,43,0) 100%);
}
body.is-ceremony .filmedge--r {
  background: linear-gradient(to left,
    rgba(61,51,43,.055) 0%, rgba(61,51,43,.04) 64%, rgba(61,51,43,0) 100%);
}
/* No perforations on this page. The holes are the mechanically repeating,
   hard-edged part of the film language, and this page is built on softness.
   The edge printing stays: it reads as a watermark rather than as machinery,
   so the family resemblance to the homepage survives.
   To put them back, restore the ::before background-image and give the print
   column a 15px inset again. */
body.is-ceremony .filmedge::before { content: none; }
body.is-ceremony .filmedge--l .filmedge__print { left: 0; right: 0; }
body.is-ceremony .filmedge--r .filmedge__print { left: 0; right: 0; }

/* the bar sits on white, so it needs a white ground of its own */
/* no backdrop blur: the ground behind is flat white, so it buys nothing and
   haloes a soft band under the bar */
body.is-ceremony .nav {
  background: var(--t-cream);
  border-bottom: 1px solid var(--t-hair);
}
body.is-ceremony .nav__name,
body.is-ceremony .nav__link { color: var(--t-ink); font-weight: 300; }
body.is-ceremony .nav__link[aria-disabled="true"] { color: var(--t-ink-soft); }

/* the reveal is slower here than anywhere else on the site: things arrive */
body.is-ceremony .reveal {
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(.16,.64,.28,1);
}

/* --- rhythm ------------------------------------------------------------- */
.temple { position: relative; z-index: 1; }
.temple__measure {
  width: var(--t-measure);
  margin-inline: auto;
}
.temple__band {
  position: relative;
  padding-block: clamp(5rem, 13vh, 9.5rem);
}
.temple__hero {
  /* full bleed: .temple is unconstrained, so 100% is the whole viewport width
     without the scrollbar error 100vw would introduce */
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;                  /* mobile toolbars change 100vh mid-scroll */
  min-height: 34rem;
  margin: 0;
  padding: 0;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.temple__herovid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* lifted, but the pink is left in: draining it was what turned the rose
     grey. A touch of sepia warms the whites the clip was shot against. */
  filter: brightness(1.09) saturate(.95) sepia(.09);
}
/* The wash laid back over the film. Warm white, not pure white: #fff over a
   pink film is what made it read grey. Heaviest on the left where the words
   are, thinnest on the right so the rose still opens. */
.temple__herowash {
  position: absolute;
  inset: 0;
  background:
    /* the halo the centred words sit on. Without it they land on the brightest
       part of the film and the subtitle disappears into the petals. */
    radial-gradient(44% 34% at 50% 47%, rgba(250,243,238,.88) 0%, rgba(250,243,238,0) 76%),
    linear-gradient(90deg,
      rgba(250,243,238,.80) 0%,  rgba(250,241,235,.50) 25%,
      rgba(249,238,231,.38) 50%, rgba(250,241,235,.50) 75%,
      rgba(247,231,223,.80) 100%),
    linear-gradient(180deg, rgba(250,243,238,.55) 0%, rgba(250,243,238,0) 22%),
    linear-gradient(0deg,   rgba(247,235,228,.62) 0%, rgba(247,235,228,0) 26%);
}
/* The hero is centred on the rose. The headline still carries its two parts
   as separate lines, they just stack down the middle now rather than sitting
   either side of the flower. */
.temple__herotext {
  position: relative;             /* above the wash */
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4.5rem);
  text-align: center;
}
.temple__hero .temple__eyebrow { justify-content: center; }
.temple__title { display: block; }

/* Section headings. The page had one 64px hero and then nothing above 17px
   body, with an 11px mono label doing the work of a heading. These give the
   page its missing middle step: 64 / 40 / 20 / 17. The hero keeps the small
   mono kicker, which is a label rather than a heading. */
.temple__band .temple__eyebrow,
.temple__guidetext .temple__eyebrow {
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-ink);
  gap: 1.1rem;
  margin-bottom: clamp(1.9rem, 3.6vw, 2.8rem);
}
.temple__band .temple__eyebrow::before,
.temple__guidetext .temple__eyebrow::before {
  width: 2.6rem;
  opacity: .38;
}

/* --- type --------------------------------------------------------------- */
/* Large, mixed case, set tight, with a single italic word. Letterspaced caps
   read as a wordmark; this reads as a sentence someone means. */
.temple__title {
  margin: 0;
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(3rem, 6.6vw, 5.4rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--t-ink);
}
/* Baxter is already a slanted script, so the emphasis cannot be a slant */
.temple__title em {
  font-style: normal;
  font-weight: 400;
}
/* the second line steps right, the one device worth taking from the Lumina
   template: it works on the shape of the line, not on its colour */
.temple__title-step {
  display: inline-block;
  margin-left: clamp(1rem, 4.5vw, 3.6rem);
}
.temple__sub {
  display: block;
  margin: clamp(1.1rem, 2.4vw, 1.7rem) 0 0;
  font-family: var(--body);            /* Archivo: Menlo is for nav and tiny labels only (2026-09-09) */
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  letter-spacing: .01em;
  color: var(--t-ink);
}
.temple__eyebrow {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 clamp(1.6rem, 3.2vw, 2.4rem);
  font-family: var(--mono);
  font-weight: 300;
  font-size: .68rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
}
.temple__eyebrow::before {
  content: "";
  flex: none;
  width: 2.1rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.temple__lede {
  margin: 0 0 clamp(1.5rem, 2.8vw, 2rem);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.95;                    /* the air is inside the paragraph too */
  color: var(--t-ink);
}
.temple__lede em { font-style: italic; color: var(--t-ink-soft); }
/* Inline emphasis. Body sets at 300, so the lift to 600 is what makes a
   paragraph scannable rather than a wall: you can read the bold phrases alone
   and still get the sense of it. */
.temple__lede strong,
.temple__note strong,
.temple__parttext strong {
  font-weight: 600;
  color: var(--t-ink);
}
.temple__note {
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  font-family: var(--body);
  font-weight: 300;
  font-size: .94rem;
  line-height: 1.9;
  color: var(--t-ink-soft);
}

/* the gold pullquote: one hairline of gold above it, and nothing else */
.temple__pull {
  width: min(100% - 3rem, 34ch);
  margin: clamp(3.5rem, 8vh, 6rem) auto 0;
  padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid rgba(201,168,76,.34);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  line-height: 1.62;
  text-align: center;
  color: var(--gold);
}
/* the emotional beat: italic, centred, held apart from the argument */
.temple__beat {
  width: min(100% - 3rem, 40ch);
  margin: clamp(3rem, 7vh, 5rem) auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 2.3vw, 1.5rem);
  line-height: 1.7;
  text-align: center;
  color: var(--t-ink);
}

/* --- the rose ----------------------------------------------------------- */
/* turned almost entirely to light: present as a warmth, not as an image */
.temple__band--rose {
  overflow: hidden;
  z-index: 0;              /* so the ink's negative z-index stays inside this band */
  /* the blush, arriving and leaving so gradually there is no edge to see */
  background: linear-gradient(180deg,
    rgba(247,231,223,0) 0%, var(--t-blush) 26%, var(--t-blush) 74%, rgba(247,231,223,0) 100%);
}
/* The ink laid on its side and stretched right across the band, running under
   the text. rotate(90deg) turns the tall bloom horizontal; scaleX squashes what
   is about to become its vertical extent, so it reads as a wide smear rather
   than a tall column. z-index -1 puts it above the band's own background but
   below the words, which is why the band has to be its own stacking context. */
.temple__rose {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(108vw, 1320px);
  height: auto;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(.4);
  transform-origin: center;
  z-index: -1;
  opacity: .46;
  filter: saturate(.78) brightness(1.07);
  pointer-events: none;
  user-select: none;
}

/* --- a session ---------------------------------------------------------- */
.temple__parts {
  list-style: none;
  /* keeps the page's left rail, runs out to the right so three cards have
     room. 62ch across gave 171px cards, which set three words to a line. */
  margin: 0 clamp(1.5rem, 5vw, 4.5rem) 0 max(1.5rem, calc((100% - 62ch) / 2));
  padding: 0;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  grid-template-columns: repeat(3, 1fr);
}
.temple__part {
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  border: 1px solid var(--t-hair);
  border-radius: 6px;
  background: rgba(255,253,251,.55);
}
.temple__partnum {
  margin: 0 0 .9rem;
  font-family: var(--mono);
  font-weight: 300;
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--t-ink-soft);
}
.temple__partname {
  margin: 0 0 .7rem;
  font-family: var(--hand);
  font-weight: 300;
  font-size: 1.24rem;
  letter-spacing: 0;
  color: var(--t-ink);
}
.temple__parttext {
  margin: 0;
  font-family: var(--body);
  font-weight: 300;
  font-size: .96rem;
  line-height: 1.85;
  color: var(--t-ink);
}
@media (max-width: 760px) {
  .temple__parts { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* --- your guide --------------------------------------------------------- */
/* the rose-edited portrait is 16:9 and carries its own black film border, so
   it leads the section at full width and the text settles underneath it */
.temple__guide {
  width: var(--t-measure);
  margin-inline: auto;
}
.temple__portrait { margin: 0 0 clamp(2.4rem, 5vw, 3.6rem); }
.temple__portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.temple__guidetext .temple__lede:last-child { margin-bottom: 0; }

/* --- begin -------------------------------------------------------------- */
.temple__offer { margin: 0; }
.temple__offerrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: clamp(1rem, 2vw, 1.35rem) 0;
  border-bottom: 1px solid var(--t-hair);
}
.temple__offerrow:first-child { border-top: 1px solid var(--t-hair); }
.temple__offer dt {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--t-ink);
}
.temple__offer dd {
  margin: 0;
  font-family: var(--body);
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
}
/* The one loud thing on the page, and the reference's clearest signature: a
   filled marigold pill with dark text, not an outline. */
body.is-ceremony .temple__book {
  background: var(--t-marigold);
  border-color: var(--t-marigold);
  border-radius: 999px;
  color: var(--t-ink);
  font-weight: 500;
  letter-spacing: .18em;
  padding: 1.1rem 2.6rem;
}
body.is-ceremony .temple__book:hover,
body.is-ceremony .temple__book:focus-visible {
  background: #f5bc16;
  border-color: #f5bc16;
  color: var(--t-ink);
}

/* --- the closing line --------------------------------------------------- */
/* the page warms very slightly as it comes to rest */
.temple__close {
  background: linear-gradient(180deg, rgba(247,231,223,0) 0%, var(--t-blush) 60%);
  padding-block: clamp(7rem, 20vh, 13rem);
  text-align: center;
}
.temple__closing {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 3.4vw, 2.3rem);
  letter-spacing: .01em;
  color: var(--gold);
}

/* The footer was built for the homepage's night sky: cream type that relies
   on darkness behind it. On this page that is white on white, so the whole
   band is rebuilt light rather than dropped into a dark slab, which would
   land like a brick at the foot of an otherwise weightless page. */
body.is-ceremony .footer {
  background: var(--t-blush);
  border-top: 1px solid var(--t-hair);
  color: var(--t-ink);
}
body.is-ceremony .footer__name,
body.is-ceremony .footer__link,
body.is-ceremony .footer__base { color: var(--t-ink); }
body.is-ceremony .footer__name { font-weight: 500; }
body.is-ceremony .footer__bio,
body.is-ceremony .footer__h,
body.is-ceremony .footer__follow-label,
body.is-ceremony .footer__soon,
body.is-ceremony .footer__code,
body.is-ceremony .footer__social,
body.is-ceremony .footer__credit { color: var(--t-ink-soft); }
body.is-ceremony .footer__link[aria-disabled="true"] { color: var(--t-ink-soft); }
body.is-ceremony .footer__link:hover,
body.is-ceremony .footer__social:hover,
body.is-ceremony .footer__credit:hover,
body.is-ceremony .footer__credit:focus-visible { color: var(--gold); }
body.is-ceremony .footer__base { border-top-color: var(--t-hair); }

/* ==========================================================================
   INNER CEREMONIES, LIGHT VARIANT (the tester at /inner-ceremonies-tester/)

   The same page built to the white brief instead of the peach one: white
   dominant, blush and cream only as a warming of it, and #c9a84c gold in
   three places. Scoped entirely to .is-temple-light so the live peach page
   is not touched by any of it.
   ========================================================================== */
body.is-temple-light {
  --t-ink:      #4a4038;
  --t-ink-soft: #857a6e;
  --t-cream:    #fdfaf5;
  --t-blush:    #fdf6f6;
  --t-hair:     rgba(74,64,56,.09);
  background: #fff;
}
body.is-temple-light .sky {
  background:
    radial-gradient(circle at 8% 4%,   rgba(252,231,236,.50) 0%, rgba(255,255,255,0) 54%),
    radial-gradient(circle at 94% 92%, rgba(250,242,228,.60) 0%, rgba(255,255,255,0) 56%),
    #ffffff;
}
body.is-temple-light .nav { background: #fff; }
body.is-temple-light .filmedge--l {
  background: linear-gradient(to right,
    rgba(74,64,56,.05) 0%, rgba(74,64,56,.035) 64%, rgba(74,64,56,0) 100%);
}
body.is-temple-light .filmedge--r {
  background: linear-gradient(to left,
    rgba(74,64,56,.05) 0%, rgba(74,64,56,.035) 64%, rgba(74,64,56,0) 100%);
}

/* hero: one centred title and a subtitle, not a split headline */
body.is-temple-light .temple__hero { align-items: center; }
body.is-temple-light .temple__herotext {
  width: 100%;
  margin-inline: auto;
  max-width: 44rem;
  text-align: center;
}
body.is-temple-light .temple__title {
  display: block;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 1.06;
}
body.is-temple-light .temple__sub { color: var(--t-ink-soft); }
body.is-temple-light .temple__herowash {
  background:
    radial-gradient(44% 34% at 50% 47%, rgba(255,255,255,.90) 0%, rgba(255,255,255,0) 76%),
    linear-gradient(90deg,
      rgba(255,255,255,.78) 0%, rgba(255,255,255,.62) 34%,
      rgba(255,255,255,.50) 68%, rgba(255,255,255,.44) 100%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(0deg,   rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 26%);
}

/* the pullquote gets the gentle blush ground the brief asks for */
body.is-temple-light .temple__pull {
  padding: clamp(2rem, 4vw, 2.8rem) clamp(1.6rem, 4vw, 3rem) clamp(1.8rem, 3.6vw, 2.6rem);
  border-top: 1px solid rgba(201,168,76,.34);
  background: linear-gradient(180deg, rgba(253,246,246,.9) 0%, rgba(253,246,246,0) 100%);
}

/* A Session: three plain parts, no cards and no numbers */
body.is-temple-light .temple__parts {
  margin: 0 auto;
  width: var(--t-measure);
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
body.is-temple-light .temple__part {
  display: block;
  padding: clamp(1.4rem, 2.4vw, 1.9rem) 0 0;
  border: 0;
  border-top: 1px solid var(--t-hair);
  border-radius: 0;
  background: none;
}
body.is-temple-light .temple__partname {
  margin: 0 0 .9rem;
  font-family: var(--body);
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
}

/* the button returns to her gold, kept soft rather than a hard outline */
body.is-temple-light .temple__book {
  background: var(--gold);
  border-color: var(--gold);
  border-radius: 999px;
  color: #fff;
  font-weight: 400;
  letter-spacing: .22em;
  padding: 1.1rem 2.6rem;
}
body.is-temple-light .temple__book:hover,
body.is-temple-light .temple__book:focus-visible {
  background: #b8963f;
  border-color: #b8963f;
  color: #fff;
}
body.is-temple-light .temple__closing em { font-style: italic; }
body.is-temple-light .temple__close {
  background: linear-gradient(180deg, rgba(253,250,245,0) 0%, var(--t-cream) 55%);
}
body.is-temple-light .footer { background: var(--t-cream); }


/* ==========================================================================
   (removed 2026-09-07) Inner Ceremonies used to have its own arrival: the veil
   opening outward, the title and subtitle settling their letter-spacing, and
   the hero video creeping back from 1.055 over ten seconds. All of it is gone
   at Natalie's word - the hero is a plain header now.

   The spiral page turn in transition.js is the site's arrival, and it does the
   job for every page rather than choreographing one of them twice.
   ========================================================================== */

/* ==========================================================================
   THE STAR SPIRAL  (Inner Ceremonies, 2026-09-07)

   From the "An Ethereal Reset" cover Natalie brought. Silver on cobalt there;
   here the ground is peach, so it is gold, and it has to stay quiet enough
   that the two paragraphs on either side of it still lead.

   175 stars on an Archimedean spiral, generated rather than drawn, placed at
   even arc length so the density holds from the centre out. Four glyphs in
   <defs>, reused: that is the difference between 41KB of inline path data and
   23KB.
   ========================================================================== */
.spiral {
  margin: clamp(2.5rem, 7vh, 5rem) auto;
  width: min(74vw, 400px);
  display: block;
}
.spiral__svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }

/* the whole figure turns once, very slowly: at 240s it is never caught moving,
   it is only ever in a slightly different place than you remember */
.spiral__stars {
  /* --c is the centre, written into the markup by the generator, because the
     viewBox is sized to whatever the spiral actually came out as */
  transform-origin: var(--c) var(--c);
  animation: spiral-turn 240s linear infinite;
}

/* the <g> carries the placement as an SVG attribute and the opacity as CSS;
   the <use> inside is the only thing a keyframe is allowed to transform. A CSS
   transform on the <g> would override its transform attribute and drop every
   star onto the origin. */
.spiral__star { opacity: 0; }
.spiral__star use {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
}
/* White stars on a blush ground have almost no contrast to work with, so what
   makes them read is not the fill, it is the warm shadow under them: the paper
   darkens slightly where each star sits, the way foil does. Applied once on the
   group rather than 175 times. */
/* No dark ground behind these, so nothing but the shadow separates a white
   star from a blush page: the paper darkens just under each one, the way foil
   sits on paper, and a wider warm glow lifts it off. */
.spiral__stars {
  filter:
    drop-shadow(0 1px 1.5px rgba(150,92,72,.62))
    drop-shadow(0 0 7px rgba(255,238,222,.75));
}
/* Each star carries its own index, so the wind-in runs from the centre
   outward: 14ms apart, which over 175 stars is 2.4s of unfurling. The final
   opacity is per-star too, so the spiral glitters unevenly the way a page of
   pressed foil stars does, rather than reading as one flat printed object. */
/* Two animations on the same element: the arrival, then the twinkle, which is
   held back until the arrival that precedes it has finished. Each star carries
   its own period and phase, or 175 of them blink in unison and it reads as a
   flicker rather than a sky. */
.spiral.in .spiral__star {
  animation: spiral-fade .9s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i) * 14ms);
}
/* 36 of the 227, picked at random rather than every Nth so the eye cannot find
   the rhythm. The rest hold steady, which is what makes these read as pulsing
   at all: everything twinkling is just noise. */
.spiral.in .spiral__star--tw {
  animation:
    spiral-fade .9s cubic-bezier(.2,.7,.3,1) both,
    spiral-twinkle var(--tw) ease-in-out infinite;
  animation-delay:
    calc(var(--i) * 14ms),
    calc(var(--i) * 14ms + .9s + var(--td));
}
.spiral.in .spiral__star--tw use {
  animation:
    spiral-open .9s cubic-bezier(.2,.7,.3,1) both,
    spiral-pulse var(--tw) ease-in-out infinite;
  animation-delay:
    calc(var(--i) * 14ms),
    calc(var(--i) * 14ms + .9s + var(--td));
}
/* A twinkle has to go brighter than its neighbours before it goes out, or it
   only ever reads as a star dimming. Peak first, then the dip. */
@keyframes spiral-twinkle {
  0%   { opacity: var(--o); }
  30%  { opacity: 1; }
  62%  { opacity: var(--lo); }
  100% { opacity: var(--o); }
}
/* and it swells as it peaks: opacity alone at this contrast is nearly nothing */
@keyframes spiral-pulse {
  0%   { transform: none; }
  30%  { transform: scale(1.55); }
  62%  { transform: scale(.82); }
  100% { transform: none; }
}
.spiral.in .spiral__star use {
  animation: spiral-open .9s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i) * 14ms);
}
@keyframes spiral-fade { from { opacity: 0; } to { opacity: var(--o); } }
@keyframes spiral-open {
  from { transform: scale(.2) rotate(-40deg); }
  to   { transform: none; }
}
@keyframes spiral-turn { to { transform: rotate(360deg); } }

/* warm the innermost turns, so the centre reads as the source of the light */
/* the innermost turns keep a breath of warmth so the centre reads as source */
.spiral__star:nth-child(-n+62) use { fill: #fffaf4; }

@media (prefers-reduced-motion: reduce) {
  .spiral__stars { animation: none; }
  .spiral.in .spiral__star,
  .spiral.in .spiral__star--tw,
  .spiral__star { animation: none !important; opacity: var(--o); }
  .spiral.in .spiral__star use,
  .spiral__star use { animation: none; transform: none; }
}


/* ==========================================================================
   THE PAGE TURN  (2026-09-07)

   The spiral is how you move between Erin's pages. It winds in over the page
   you are leaving, the navigation happens under it, and it unwinds away on
   the page you arrive at, so one continuous gesture spans the load.

   Built as an overlay driven by transition.js, NOT as @view-transition: that
   at-rule is per-document and all four pages share this stylesheet, so it
   could not be scoped to Erin's site.
   ========================================================================== */
.pageturn {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* warm, not white: the site is lit by a sunset from end to end */
  background: radial-gradient(circle at 50% 50%,
    #fffaf4 0%, #fdf1e6 44%, #f7e3d4 100%);
}
.pageturn__svg {
  width: min(52vw, 300px);
  height: auto;
  overflow: visible;
}
.pageturn__star { opacity: 0; }
/* Gold, not the white of the page spiral. These stars land on a cream ground
   rather than a blush one, and white on cream is nothing at all: the first
   build of this was an empty screen. Gold also keeps the page turn inside the
   sunset the site is lit by, without needing a dark ground she has already
   turned down once. */
.pageturn__star use {
  fill: #d9973c;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 1px 2px rgba(150,84,46,.35));
}
.pageturn__star:nth-child(-n+26) use { fill: #e8b45c; }

/* --- leaving: the ground comes up, the spiral winds out from the centre --- */
.pageturn.is-in {
  visibility: visible;
  animation: pt-ground .42s ease-out both;
}
/* opacity on the <g>, transform on the <use> inside it. A CSS transform on the
   <g> overrides the transform attribute holding its place on the spiral, and
   every star drops onto the SVG origin in one stack. */
.pageturn.is-in .pageturn__star {
  animation: pt-fade .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i) * var(--pt-stagger));
}
.pageturn.is-in .pageturn__star use {
  animation: pt-star .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i) * var(--pt-stagger));
}

/* --- arriving: it is already there, and unwinds away from the centre ------
   Reversed delay, so the outermost stars leave last: the spiral closes down
   into its own middle rather than blinking off. */
.pageturn.is-out {
  visibility: visible;
  opacity: 1;
  animation: pt-ground .55s .3s ease-in reverse both;
}
.pageturn.is-out .pageturn__star {
  opacity: 1;
  animation: pt-fade .42s ease-in reverse both;
  animation-delay: calc((var(--pt-count) - var(--i)) * var(--pt-stagger));
}
.pageturn.is-out .pageturn__star use {
  animation: pt-star .42s ease-in reverse both;
  animation-delay: calc((var(--pt-count) - var(--i)) * var(--pt-stagger));
}

@keyframes pt-ground {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-star {
  from { transform: scale(.2) rotate(-50deg); }
  to   { transform: none; }
}

/* transition.js bails before it builds anything under reduced motion, so this
   is only a guard for a preference that changes mid-session */
@media (prefers-reduced-motion: reduce) {
  .pageturn { display: none; }
}

/* ==========================================================================
   THE TRAILER GATE — <dialog class="trailer">, driven by trailer.js

   The DANIEL button and the hero film frame open this instead of leaving for
   YouTube. trailer.js fills the iframe src on open and strips it on close, so
   nothing loads until asked and the sound stops dead on dismiss.

   The close animation is on the dialog ITSELF: trailer.js waits for
   `animationend` on the dialog before it calls close(), and a keyframe on a
   child would only reach it by bubbling.
   ========================================================================== */
.trailer {
  /* Third term keeps the 16:9 gate inside the viewport on a short window: the
     close button above it and the caption below it need ~5rem between them,
     and without this the × clips off the top edge on a laptop. */
  width: min(92vw, 1080px, (92vh - 5rem) * 16 / 9);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f4e9dd;
  overflow: visible;
}
.trailer::backdrop {
  /* midnight, not black — the site has no pure black anywhere on it */
  background: rgba(10, 10, 26, .88);
  backdrop-filter: blur(3px);
}
.trailer[open] { animation: trailer-in .42s var(--ease) both; }
.trailer.is-closing { animation: trailer-out .28s ease-in both; }

@keyframes trailer-in {
  from { opacity: 0; transform: scale(.965) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes trailer-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(.985); }
}

.trailer__frame { position: relative; }

/* The gate: a projector's black aperture with a warm rule around it, so the
   embed lands as a frame being thrown rather than a card floating on a page. */
.trailer__gate {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(201, 168, 76, .30);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 30px 80px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.trailer__vid {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Caption sits under the gate. The Crave link is the louder of the two: it is
   the only thing here anyone is meant to act on. */
.trailer__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin: .85rem 0 0;
  font-family: var(--mono);
}
.trailer__cap > span {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 233, 221, .58);
}
.trailer__out {
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f4e9dd;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 233, 221, .35);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.trailer__out:hover,
.trailer__out:focus-visible { color: var(--gold-lite); border-color: var(--gold-lite); }

/* × clears the gate's top-right corner rather than sitting inside the picture */
.trailer__close {
  position: absolute;
  top: -2.9rem;
  right: -.25rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(244, 233, 221, .72);
  cursor: pointer;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.trailer__close:hover,
.trailer__close:focus-visible { color: var(--white); transform: rotate(90deg); }
/* The close button carries autofocus, so its ring is the first thing on screen
   every single open. The browser default is a hard blue box on a warm film
   frame; this keeps the affordance and drops the colour clash. */
.trailer__close:focus-visible,
.trailer__out:focus-visible {
  outline: 2px solid var(--gold-lite);
  outline-offset: 3px;
  border-radius: 2px;
}
.trailer__close svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

@media (max-width: 640px) {
  .trailer { width: 94vw; }
  .trailer__close { top: -2.6rem; right: -.15rem; }
  .trailer__cap { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .trailer[open],
  .trailer.is-closing { animation: none; }
  .trailer__close:hover,
  .trailer__close:focus-visible { transform: none; }
}

/* ==========================================================================
   INNER CEREMONIES — WHITE CARDS (2026-09-07)

   Every section now sits on its own pure white card, rounded, floating on the
   peach ground. The ground keeps its two edge blooms, so the light still has
   somewhere to come from; the cards are what the light falls on.

   The card IS the band, not a wrapper inside it. Everything on this page is
   measured against the band's own width (the 62ch spine, the three-part grid's
   left rail, the portrait), so putting a narrower element inside would have
   given the page two competing centres. Narrowing the band itself keeps one.
   ========================================================================== */
body.is-ceremony .temple__band {
  width: min(100% - 5rem, 1060px);
  margin-inline: auto;
  margin-block: clamp(1rem, 2.6vh, 2.2rem);
  padding-block: clamp(3.4rem, 8vh, 6rem);
  background: #fff;
  border-radius: clamp(20px, 2.4vw, 34px);
  /* warm shadow, never grey: a grey shadow on a peach ground reads as dirt */
  box-shadow:
    0 26px 60px -34px rgba(150, 92, 72, .40),
    0 2px 6px -3px rgba(150, 92, 72, .13);
}
/* the blush wash was the Thresholds band's ground; the card is that now */
body.is-ceremony .temple__band--rose { background: #fff; }

/* the hero runs full bleed straight into the first card, so that join needs
   more air than the gap between two cards */
body.is-ceremony .temple__hero + .temple__band { margin-top: clamp(2.5rem, 6vh, 4.5rem); }
body.is-ceremony .temple__band:last-of-type { margin-bottom: clamp(2rem, 5vh, 3.6rem); }

/* White stars on white paper have no fill contrast at all, so the shadow has
   to do more work here than it did on blush. Still no dark ground behind them:
   the paper darkens under each star and a warm glow lifts it off, the way foil
   sits on a page. */
body.is-ceremony .spiral__stars {
  filter:
    drop-shadow(0 1px 1.6px rgba(150, 92, 72, .80))
    drop-shadow(0 0 8px rgba(222, 156, 122, .58));
}

/* --- the label above the headline --------------------------------------- */
/* Two levels now: a small mono kicker naming the section, and the Baxter
   headline saying the thing. The leading rule moves up to the kicker, because
   two rules stacked read as a mistake. */
.temple__label {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 clamp(.85rem, 1.8vw, 1.25rem);
  font-family: var(--mono);
  font-weight: 400;
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
}
.temple__label::before {
  content: "";
  flex: none;
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.temple__label--hero {
  justify-content: center;
  color: var(--t-ink);
  opacity: .78;
}
.temple__label--hero::before { display: none; }

.temple__label + .temple__eyebrow::before { display: none; }
.temple__label + .temple__eyebrow { gap: 0; }

/* --- the three calls ----------------------------------------------------- */
.temple__cta { margin: clamp(2.1rem, 4vw, 3rem) 0 0; }
.temple__hero .temple__cta { margin-top: clamp(1.8rem, 3.6vw, 2.6rem); }

/* the last line of the page before the closing flourish: a question and the
   button in one breath, so the button reads as the answer to it */
.temple__ready {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.2rem;
  margin: clamp(2.1rem, 4vw, 3rem) 0 0;
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--t-ink);
}

@media (max-width: 640px) {
  body.is-ceremony .temple__band {
    width: min(100% - 1.4rem, 1140px);
    border-radius: 18px;
  }
}

/* ==========================================================================
   INNER CEREMONIES v3 COPY + STRUCTURE (2026-09-08)
   Her call: "i like the branding i have though... keep that, just add this
   new copy and structure with some additional design edits." So the peach
   ground, the white cards, Baxter and the marigold all stay exactly as they
   were. This block only styles what the new structure added: the welcome
   quote in the hero, the three kind words, the two offerings, and the
   bigger titles she asked for the day before.
   ========================================================================== */

/* --- titles up ("make the titles bigger") --- */
body.is-ceremony .temple__title {
  font-size: clamp(3.6rem, 8.2vw, 6.8rem);
  line-height: 1.05;
}
body.is-ceremony .temple__band .temple__eyebrow,
body.is-ceremony .temple__guidetext .temple__eyebrow {
  font-size: clamp(2.9rem, 6vw, 4.8rem);
  line-height: 1.12;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
body.is-ceremony .temple__label { font-size: .72rem; }
body.is-ceremony .temple__label--centre { justify-content: center; }
body.is-ceremony .temple__closing { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
/* the closing is already italic; "clear" stands out by going upright */
body.is-ceremony .temple__closing em { font-style: normal; }

/* --- hero: room for the welcome and the button under the title --- */
body.is-ceremony .temple__hero {
  height: auto;
  min-height: 100svh;
  padding-block: clamp(7rem, 15vh, 10rem) clamp(5rem, 11vh, 8rem);
}
/* Erin's welcome: her voice before anything is explained. A soft white pane
   on the rose, the same family as the cards below. */
body.is-ceremony .temple__welcome {
  max-width: 38rem;
  margin: clamp(2.2rem, 4.6vw, 3.4rem) auto 0;
  padding: clamp(1.6rem, 3.4vw, 2.4rem) clamp(1.6rem, 4vw, 2.8rem);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(6px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.68;
  text-align: center;
  color: var(--t-ink);
}
body.is-ceremony .temple__welcome p { margin: 0; }
body.is-ceremony .temple__welcome footer {
  margin-top: 1rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
}
body.is-ceremony .temple__hero .temple__cta { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* --- kind words: three, italic serif, one under another --- */
body.is-ceremony .temple__kind {
  list-style: none;
  margin: clamp(1rem, 3vw, 2rem) auto 0;
  padding: 0;
  width: var(--t-measure);
  display: grid;
  gap: clamp(2.4rem, 5vw, 3.6rem);
}
body.is-ceremony .temple__quote { text-align: center; }
body.is-ceremony .temple__quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.55;
  color: var(--t-ink);
}
body.is-ceremony .temple__quote blockquote::before { content: "\201C"; }
body.is-ceremony .temple__quote blockquote::after  { content: "\201D"; }
body.is-ceremony .temple__who {
  margin: .9rem 0 0;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
}

/* --- the two offerings: clean, minimal, terracotta hairline --- */
body.is-ceremony .temple__plans {
  list-style: none;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0;
  width: var(--t-measure);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
body.is-ceremony .temple__plan {
  padding: clamp(1.8rem, 3.2vw, 2.4rem) clamp(1.5rem, 2.8vw, 2rem);
  border: 1px solid var(--t-hair);
  border-radius: 22px;
  background: var(--t-cream);
}
body.is-ceremony .temple__planname {
  margin: 0 0 .5rem;
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  color: var(--t-ink);
}
body.is-ceremony .temple__planprice {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--t-ink);
}
body.is-ceremony .temple__planprice span {
  font-size: .62rem;
  letter-spacing: .22em;
  vertical-align: .18em;
  margin-left: .25rem;
  color: var(--t-ink-soft);
}
body.is-ceremony .temple__plantext {
  margin: 0;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--t-ink);
}
@media (max-width: 640px) {
  body.is-ceremony .temple__plans { grid-template-columns: 1fr; }
}

/* --- wider and shorter (2026-09-08) ---
   "too much space on either side of the text so it just looks really long
   and hard to read." The spine goes from 62ch to 47rem, the card comes in to
   meet it, and every card loses a third of its vertical padding. */
body.is-ceremony { --t-measure: min(100% - 6rem, 47rem); }
/* the indigo of the "meets you there" block (2026-10-04). The card she
   pointed at on soniachoquette.net/good-vibes-tribe computes to exactly
   rgb(49,23,178), and that shipped at v=327 — but on screen she read it as
   too cold against her warm page, so it is warmed here: more red, a little
   more green, the blue pulled down. Her screenshot of that card is wide-gamut,
   which is part of why the same value looks warmer in her capture than in the
   browser. #fbfbfb words and an 18px radius are hers. */
/* The indigo every coloured surface on this page shares: the two cards and
   the note band. The amber trial of 2026-10-04 ("lets try the amber", then
   "keep it more monochromatic") took this to #96591a, a deep version of the
   page's own hue; she looked at it and said "go back to the blue", so the
   blue stands and the amber is gone rather than left commented out.
   See [[erin-northcott-client-site]] for why blue and not gold. */
body.is-ceremony { --t-indigo: #4226bd; }
body.is-ceremony .temple__band {
  width: min(100% - 5rem, 1000px);
  padding-block: clamp(2.6rem, 6vh, 4.2rem);
}
body.is-ceremony .temple__band .temple__eyebrow,
body.is-ceremony .temple__guidetext .temple__eyebrow { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
body.is-ceremony .temple__lede { line-height: 1.7; }
body.is-ceremony .temple__beat { margin-block: clamp(2rem, 5vh, 3.4rem); }
body.is-ceremony .temple__pull { margin-top: clamp(2.4rem, 6vh, 4rem); }

/* --- cursive titles on one line (2026-09-08) ---
   "all cursive titles should be on one line - do not make them two lines if
   you can." So every Baxter title is sized against the width it has to fit,
   not the viewport: container units, capped at the size she asked for. The
   longest H2 is the 31-character trust quote, which sets the ratio for all
   of them so they come out one size. Under 640px the width simply is not
   there, and wrapping beats a 24px script. */
body.is-ceremony .temple__measure,
body.is-ceremony .temple__guidetext,
body.is-ceremony .temple__herotext,
body.is-ceremony .temple__plan { container-type: inline-size; }

body.is-ceremony .temple__title {
  white-space: nowrap;
  font-size: min(6.8rem, 16.5cqw);
}
body.is-ceremony .temple__band .temple__eyebrow,
body.is-ceremony .temple__guidetext .temple__eyebrow {
  white-space: nowrap;
  font-size: min(4.8rem, 9.4cqw);
}
body.is-ceremony .temple__planname {
  white-space: nowrap;
  font-size: min(2.2rem, 12.5cqw);
}
@media (max-width: 640px) {
  body.is-ceremony { --t-measure: min(100% - 3rem, 47rem); }
  body.is-ceremony .temple__band .temple__eyebrow,
  body.is-ceremony .temple__guidetext .temple__eyebrow {
    white-space: normal;
    font-size: clamp(2.2rem, 9.5vw, 3rem);
  }
  body.is-ceremony .temple__planname { white-space: normal; font-size: 1.9rem; }
}


/* ==========================================================================
   INNER CEREMONIES — PRESENCE (2026-09-08)
   "the white blocks just aren't working... its so repetitive. remove them for
   now, and make the sections feel like they have PRESENCE."
   The cards go. Each section gets its own composition on the peach ground:
   Thresholds on the left rail with the spiral of stars standing beside it;
   The Work centred on a blush band; the Guide as portrait-and-words side by
   side; Kind Words three across a warm band; Begin centred, with the two
   offerings as the one card left on the page. Five rooms, not one repeated.
   ========================================================================== */
body.is-ceremony .temple__band {
  width: 100%;
  margin: 0;
  padding-block: clamp(4.5rem, 11vh, 7.5rem);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
body.is-ceremony .temple__hero + .temple__band { margin-top: 0; }
body.is-ceremony .temple__band:last-of-type { margin-bottom: 0; }
body.is-ceremony .temple__wrap {
  width: min(100% - 6rem, 1120px);
  margin-inline: auto;
}
body.is-ceremony .temple__centre { text-align: center; }
body.is-ceremony .temple__centre .temple__label { justify-content: center; }

/* --- welcome: one quiet passage on the ground, no pane --- */
body.is-ceremony .temple__band--welcome { padding-block: clamp(3.5rem, 9vh, 6rem) 0; }
body.is-ceremony .temple__band--welcome .temple__welcome {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  background: none;
  backdrop-filter: none;
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  line-height: 1.6;
}

/* --- thresholds: text left, the spiral standing beside it --- */
body.is-ceremony .temple__band--thresholds { overflow: hidden; }
body.is-ceremony .temple__cols {
  display: grid;
  grid-template-columns: minmax(0, 33rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
body.is-ceremony .temple__col { container-type: inline-size; }
body.is-ceremony .temple__col .temple__beat { width: 100%; margin-inline: 0; }
body.is-ceremony .temple__aside { position: relative; }
body.is-ceremony .temple__aside .spiral {
  width: min(100% + 6vw, 620px);
  margin: 0 -6vw 0 auto;
}

/* --- the work: a blush band, everything centred, the pullquote large --- */
body.is-ceremony .temple__band--work {
  padding-block: clamp(5.5rem, 13vh, 9rem);
  background: linear-gradient(180deg,
    rgba(247,231,223,0) 0%, var(--t-blush) 18%, var(--t-blush) 82%, rgba(247,231,223,0) 100%);
}
body.is-ceremony .temple__band--work .temple__pull {
  width: min(100% - 3rem, 46rem);
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.4;
}

/* --- the guide: portrait large on the left, words beside it --- */
body.is-ceremony .temple__band--guide .temple__guide {
  width: min(100% - 6rem, 1120px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
body.is-ceremony .temple__band--guide .temple__portrait {
  position: relative;
  margin: 0;
  z-index: 0;
}
body.is-ceremony .temple__band--guide .temple__portrait img { border-radius: 28px; }
/* a marigold plate set behind and off to one side: the only place the button
   colour appears as a surface */
body.is-ceremony .temple__band--guide .temple__portrait::before {
  content: "";
  position: absolute;
  inset: 1.2rem -1.2rem -1.2rem 1.2rem;
  border-radius: 28px;
  background: rgba(255, 202, 44, .3);
  z-index: -1;
}

/* --- kind words: three across a warm band, each opened by a gold mark --- */
body.is-ceremony .temple__band--kind {
  padding-block: clamp(5rem, 12vh, 8rem);
  background: linear-gradient(180deg,
    rgba(255,205,88,0) 0%, rgba(255,205,88,.14) 22%, rgba(255,205,88,.14) 78%, rgba(255,205,88,0) 100%);
}
body.is-ceremony .temple__band--kind .temple__kind {
  width: 100%;
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: start;
}
body.is-ceremony .temple__band--kind .temple__quote { text-align: left; }
body.is-ceremony .temple__band--kind .temple__quote blockquote {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
}
body.is-ceremony .temple__band--kind .temple__quote blockquote::before {
  content: "\201C";
  display: block;
  margin-bottom: .4rem;
  font-family: var(--hand);
  font-style: normal;
  font-size: 4.2rem;
  line-height: .55;
  color: var(--gold);
}
body.is-ceremony .temple__band--kind .temple__quote blockquote::after { content: none; }

/* --- begin: the two offerings, and the deeper one warmer --- */
body.is-ceremony .temple__band--begin .temple__plans { width: min(100% - 6rem, 58rem); }
body.is-ceremony .temple__plan--deep {
  background: rgba(255, 202, 44, .16);
  border-color: rgba(255, 202, 44, .55);
}

@media (max-width: 860px) {
  body.is-ceremony .temple__cols,
  body.is-ceremony .temple__band--guide .temple__guide { grid-template-columns: 1fr; }
  body.is-ceremony .temple__aside .spiral { width: min(80vw, 420px); margin: 2rem auto 0; }
  body.is-ceremony .temple__band--kind .temple__kind { grid-template-columns: 1fr; }
  body.is-ceremony .temple__wrap,
  body.is-ceremony .temple__band--guide .temple__guide { width: min(100% - 3rem, 1120px); }
}


/* --- client praise: the reference is soniachoquette.net's row --- */
body.is-ceremony .temple__band--praise { padding-block: clamp(4.5rem, 11vh, 7.5rem) clamp(3.5rem, 8vh, 5.5rem); }
body.is-ceremony .temple__band--praise .temple__eyebrow { margin-bottom: 0; }
body.is-ceremony .praise { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
body.is-ceremony .praise__track {
  --card: min(820px, 86vw);
  list-style: none;
  margin: 0;
  padding: 1.5rem calc((100% - var(--card)) / 2) 2rem;   /* so the ends can centre */
  display: flex;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.is-ceremony .praise__track::-webkit-scrollbar { display: none; }
body.is-ceremony .praise__card {
  flex: 0 0 var(--card);
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
  min-height: 23rem;
  padding: clamp(2rem, 3.6vw, 3.2rem) clamp(1.8rem, 3.4vw, 3rem);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 50px -34px rgba(150, 92, 72, .35);
}
/* the sitter: a soft blush disc with an initial, until she has their photos */
body.is-ceremony .praise__avatar {
  width: clamp(7rem, 11vw, 10.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #fbe3d6, #f3c9b6 70%);
  font-family: var(--hand);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  line-height: 1;
  color: #8b5e3c;
}
body.is-ceremony .praise__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding-top: .6rem;
}
body.is-ceremony .praise__quote {
  margin: 0 0 2.2rem;
  font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  line-height: 1.6;
  color: var(--t-ink);
}
body.is-ceremony .praise__who {
  margin: 0;
  font-size: 1.02rem;
  color: var(--t-ink);
}
body.is-ceremony .praise__who strong { font-weight: 600; margin-right: .5rem; }
body.is-ceremony .praise__who span { color: var(--t-ink-soft); }
body.is-ceremony .praise__nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: .4rem;
}
body.is-ceremony .praise__btn {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--t-ink);
  box-shadow: 0 8px 20px -12px rgba(150, 92, 72, .4);
  transition: border-color .2s, transform .2s;
}
body.is-ceremony .praise__btn:hover,
body.is-ceremony .praise__btn:focus-visible { border-color: var(--t-marigold); outline: none; }
body.is-ceremony .praise__btn:active { transform: scale(.94); }
body.is-ceremony .praise__btn svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  body.is-ceremony .praise__card { grid-template-columns: 1fr; min-height: 0; }
  body.is-ceremony .praise__avatar { width: 5.5rem; font-size: 2.2rem; }
}
/* a centred H2 with no label above it still carried the left-rail rule */
body.is-ceremony .temple__centre .temple__eyebrow { justify-content: center; }
body.is-ceremony .temple__centre .temple__eyebrow::before { display: none; }

/* --- guide, centred (2026-09-08): the rose-collage portrait, rounded, in
   the middle of the section, the words centred under it --- */
body.is-ceremony .temple__band--guide .temple__guide {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
}
body.is-ceremony .temple__band--guide .temple__portrait {
  width: min(100%, 58rem);
}
body.is-ceremony .temple__band--guide .temple__portrait::before { content: none; }
body.is-ceremony .temple__band--guide .temple__portrait img {
  border-radius: clamp(18px, 2.4vw, 30px);
  box-shadow: 0 30px 70px -40px rgba(61, 51, 43, .5);
}
body.is-ceremony .temple__band--guide .temple__guidetext {
  width: min(100%, 44rem);
}
body.is-ceremony .temple__band--guide .temple__guidetext .temple__label { justify-content: center; }
body.is-ceremony .temple__band--guide .temple__guidetext .temple__eyebrow { justify-content: center; }
body.is-ceremony .temple__band--guide .temple__guidetext .temple__eyebrow::before { display: none; }

/* --- welcome panel (2026-09-08): soniachoquette.net's overlap block ---
   A wide blush panel, rounded, laid over the foot of the hero so the two
   read as one piece. Her name as the title, the forest passage in italic
   serif beneath. No button here: the hero's is a hand's width above. */
body.is-ceremony .temple__band--welcome {
  position: relative;
  z-index: 2;
  margin-top: clamp(-7rem, -12vh, -4.5rem);
  padding-block: 0 clamp(1rem, 3vh, 2rem);
}
body.is-ceremony .temple__panel {
  width: min(100% - 3rem, 1040px);
  margin-inline: auto;
  padding: clamp(2.5rem, 5.3vw, 4rem) clamp(1.4rem, 5.3vw, 4.4rem) clamp(2.6rem, 5.6vw, 4.2rem);
  border-radius: clamp(20px, 2.4vw, 30px);
  text-align: center;
  background: linear-gradient(180deg, rgba(252, 240, 234, .96) 0%, rgba(249, 218, 206, .96) 100%);
  box-shadow: 0 30px 70px -44px rgba(150, 92, 72, .45);
}
body.is-ceremony .temple__paneltitle {
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.1;
  color: var(--t-ink);
}
body.is-ceremony .temple__band--welcome .temple__welcome {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0;
  background: none;
  backdrop-filter: none;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.45;
  color: var(--t-ink);
}
body.is-ceremony .temple__band--welcome .temple__welcome p { margin: 0; }

/* --- welcome panel, take two (2026-09-08): no name, off-white. The hero
   itself is not touched: her words. The panel simply overlaps its foot. */
body.is-ceremony .temple__panel {
  padding-top: clamp(1.9rem, 4.3vw, 3.3rem);
  padding-bottom: clamp(2.8rem, 6.2vw, 4.75rem);
  background: linear-gradient(180deg, rgba(255, 252, 249, .97) 0%, rgba(253, 243, 238, .97) 100%);
}
/* The overlap never actually happened: the "hero + band" rule that zeroes the
   gap after the hero outranked the panel's negative margin. Named here at
   the same weight, later, so it wins. Sits ~6rem up over the roses. */
body.is-ceremony .temple__hero + .temple__band--welcome { margin-top: clamp(-7rem, -12vh, -4.5rem); }

/* --- the work: her nebula behind it (2026-09-08) ---
   innerceremonies2.jpg, laid under the band at low opacity and washed with
   the blush so it reads as weather behind the words, not a picture. */
body.is-ceremony .temple__band--work {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body.is-ceremony .temple__band--work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/work-sky.jpg?v=196") center / cover no-repeat;
  opacity: .32;
  filter: saturate(.85) brightness(1.08);
  /* soft in and out at the top and bottom edges, so there is no hard line */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}


/* --- drift: the marquee of client phrases (2026-09-08) ---
   Slow enough that it is never seen to move, only to have moved. Two copies
   of the run sit end to end and the track slides exactly one run's width,
   so the second copy lands where the first began and the loop has no seam.
   Edges are masked so a phrase dissolves in and out rather than being cut. */
body.is-ceremony .temple__band--drift {
  padding-block: clamp(3.5rem, 8vh, 6rem);
}
body.is-ceremony .drift {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
body.is-ceremony .drift__track {
  display: flex;
  width: max-content;
  animation: drift 95s linear infinite;
  will-change: transform;
}
/* the marquee ignores the pointer: no slow-down on hover, no stutter (2026-09-09) */
body.is-ceremony .drift, body.is-ceremony .drift__track { pointer-events: none; }
body.is-ceremony .drift__run {
  display: flex;
  align-items: center;
  flex: none;
  padding-right: clamp(2.2rem, 4vw, 3.4rem);   /* the gap before the next run */
  gap: clamp(2.2rem, 4vw, 3.4rem);
  white-space: nowrap;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  letter-spacing: .04em;
  color: var(--t-ink-soft);
}
body.is-ceremony .drift__mark {
  font-style: normal;
  font-size: .62em;
  color: var(--gold);
  opacity: .85;
  transform: translateY(-.08em);
}
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-ceremony .drift__track { animation: none; }
  body.is-ceremony .drift { mask-image: none; -webkit-mask-image: none; }
  body.is-ceremony .drift__track { flex-wrap: wrap; width: 100%; justify-content: center; }
  body.is-ceremony .drift__run { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: .8rem; }
  body.is-ceremony .drift__run[aria-hidden="true"] { display: none; }
}

/* --- guide, words left and portrait right (2026-09-08) --- */
body.is-ceremony .temple__band--guide .temple__guide {
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  align-items: center;
  justify-items: stretch;
  gap: clamp(2.5rem, 6vw, 6rem);
  text-align: left;
}
body.is-ceremony .temple__band--guide .temple__guidetext { width: auto; }
body.is-ceremony .temple__band--guide .temple__guidetext .temple__label { justify-content: flex-start; }
body.is-ceremony .temple__band--guide .temple__guidetext .temple__eyebrow { justify-content: flex-start; }
body.is-ceremony .temple__band--guide .temple__portrait { width: 100%; }
/* the image is wide; cropped to a standing rectangle so it holds the column */
body.is-ceremony .temple__band--guide .temple__portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 80% 40%;    /* her whole face in, the rose glow at the left edge */
  border-radius: clamp(18px, 2.2vw, 26px);
}
@media (max-width: 860px) {
  body.is-ceremony .temple__band--guide .temple__guide { grid-template-columns: 1fr; }
  body.is-ceremony .temple__band--guide .temple__portrait { order: -1; }
  body.is-ceremony .temple__band--guide .temple__portrait img { aspect-ratio: 16 / 10; object-position: 60% 40%; }
}
/* portrait left, words right (2026-09-08) */
body.is-ceremony .temple__band--guide .temple__guide { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
body.is-ceremony .temple__band--guide .temple__portrait { order: -1; }
/* the tree portrait (2026-09-08): already standing, so it is barely cropped */
body.is-ceremony .temple__band--guide .temple__portrait img { object-position: 50% 0%; }
@media (max-width: 860px) {
  body.is-ceremony .temple__band--guide .temple__portrait img { aspect-ratio: 4 / 5; object-position: 50% 0%; }
}
/* bigger portrait (2026-09-08): the columns go to even, the wrap widens */
body.is-ceremony .temple__band--guide .temple__guide {
  width: min(100% - 5rem, 1240px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
/* thresholds, wider column (2026-09-08): the text takes more of the width
   and the two italic lines sit on the left rail with the paragraphs rather
   than centred inside the column */
body.is-ceremony .temple__band--thresholds .temple__wrap { width: min(100% - 5rem, 1240px); }
body.is-ceremony .temple__cols {
  grid-template-columns: minmax(0, 42rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
body.is-ceremony .temple__col .temple__beat {
  text-align: left;
  margin-block: clamp(1.6rem, 4vh, 2.6rem);
}
body.is-ceremony .temple__aside .spiral { width: min(100% + 4vw, 560px); }
/* the marquee rides up onto the line where the nebula fades (2026-09-08) */
body.is-ceremony .temple__band--work { padding-bottom: clamp(4rem, 9vh, 6.5rem); }
body.is-ceremony .temple__band--drift {
  position: relative;
  z-index: 1;
  margin-top: clamp(-6.5rem, -11vh, -4rem);
  padding-block: 0 clamp(3rem, 7vh, 5rem);
}
/* second pass: that put it under the pullquote. Room kept below the quote,
   and the marquee lifted only half the fade, so it sits in the fade itself. */
body.is-ceremony .temple__band--work { padding-bottom: clamp(8rem, 15vh, 10rem); }
body.is-ceremony .temple__band--drift { margin-top: clamp(-4rem, -7vh, -2.5rem); }

/* --- the rose behind the spiral (2026-09-08) ---
   Multiplied onto the ground so its white studio square disappears and only
   the flower is left, held very faint, feathered out well before its edge. */
body.is-ceremony .temple__aside { position: relative; z-index: 0; }
body.is-ceremony .temple__aside .spiral { position: relative; z-index: 1; }
body.is-ceremony .temple__asiderose {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(135%, 780px);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: .34;
  mix-blend-mode: multiply;
  filter: saturate(.8) brightness(1.06);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
  pointer-events: none;
  user-select: none;
}
/* no film strips on Inner Ceremonies at all (2026-09-08). The homepage and
   Connect keep theirs; the markup stays in the page so the four files match. */
body.is-ceremony .filmedge { display: none; }

/* rose centred on the spiral itself (2026-09-08): it now lives inside the
   figure, so its centre is the spiral's centre (--c is the viewBox middle).
   Fainter, and feathered tighter. Paragraph column a step narrower. */
body.is-ceremony .temple__aside .spiral { position: relative; }
body.is-ceremony .temple__aside .spiral__svg { position: relative; z-index: 1; }
body.is-ceremony .temple__asiderose {
  width: 150%;
  max-width: none;
  opacity: .2;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 58%);
}
body.is-ceremony .temple__cols { grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); }
/* The rose sits on the INNER COIL, not the box centre: the spiral's first
   turn is centred at (213, 218) of a 398 box, so the flower goes there. And
   bigger. (2026-09-08) */
body.is-ceremony .temple__asiderose {
  left: 53.6%;
  top: 54.6%;
  width: 190%;
  opacity: .2;
}
/* settled size: a step up from where it was, feathered inside the outer coil */
body.is-ceremony .temple__asiderose {
  width: 172%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 52%);
  mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 52%);
}
/* spiral and rose nudged left (2026-09-08): the figure was bleeding 6vw off
   the right edge; it now sits inside the column with a little air */
body.is-ceremony .temple__aside .spiral { margin: 0 1vw 0 auto; }
/* section titles up again (2026-09-08), still one line each: the ratio to
   the column rises, except in the guide, where the 31-character trust quote
   already fills its column at the old ratio */
body.is-ceremony .temple__band .temple__eyebrow { font-size: min(5.6rem, 10.6cqw); }
body.is-ceremony .temple__guidetext .temple__eyebrow { font-size: min(5.6rem, 9.4cqw); }

/* emphasis in the paragraphs (2026-09-08): bold for the claim, italic for
   the felt phrase. Archivo has real cuts of both. */
body.is-ceremony .temple__lede strong,
body.is-ceremony .temple__plantext strong { font-weight: 600; color: var(--t-ink); }
body.is-ceremony .temple__lede em,
body.is-ceremony .temple__plantext em { font-style: italic; font-weight: 300; }

/* rose a touch fainter (2026-09-08) */
body.is-ceremony .temple__asiderose { opacity: .95; }   /* full strength, the way the v4 study had it (2026-09-09) */


/* --- the three pillars (2026-09-08) ---
   Three columns on the ground, names in gold, a hairline root running under
   all three with a short stem rising to each: three trees grown together,
   drawn in one line. Stacks under 860px, root becoming a left rail. */
body.is-ceremony .temple__band--pillars { padding-block: clamp(4.5rem, 11vh, 7.5rem) clamp(4rem, 9vh, 6rem); }
body.is-ceremony .pillars {
  --root: rgba(201, 168, 76, .55);
  list-style: none;
  position: relative;
  width: min(100% - 5rem, 1180px);
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
body.is-ceremony .pillar {
  position: relative;
  padding-top: 2.4rem;
}
/* the stem: a short vertical hairline above each name */
body.is-ceremony .pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1.6rem;
  background: var(--root);
}
/* the root: one line across all three, sitting on the stems */
body.is-ceremony .pillars::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,168,76,0) 0%, var(--root) 8%, var(--root) 92%, rgba(201,168,76,0) 100%);
}
body.is-ceremony .pillar__name {
  margin: 0 0 .9rem;
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  white-space: nowrap;
  color: var(--gold);
}
body.is-ceremony .pillar__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--t-ink);
}
body.is-ceremony .pillar__text strong { font-weight: 600; }
body.is-ceremony .pillar__text em { font-style: italic; font-weight: 300; }
@media (max-width: 860px) {
  body.is-ceremony .pillars { grid-template-columns: 1fr; gap: 2.4rem; width: min(100% - 3rem, 1180px); padding-left: 1.4rem; }
  body.is-ceremony .pillars::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(201,168,76,0) 0%, var(--root) 6%, var(--root) 94%, rgba(201,168,76,0) 100%); }
  body.is-ceremony .pillar { padding-top: 0; padding-left: 0; }
  body.is-ceremony .pillar::before { left: -1.4rem; top: .9rem; width: 1rem; height: 1px; }
  body.is-ceremony .pillar__name { white-space: normal; }
}

/* --- pillars, take two (2026-09-08): soniachoquette.net's three-up ---
   Centred columns, a delicate line icon over each name, hairlines standing
   between the columns. The root and stems go. */
body.is-ceremony .pillars { width: min(100% - 5rem, 1140px); gap: 0; }
body.is-ceremony .pillars::before { content: none; }
body.is-ceremony .pillar {
  padding: .5rem clamp(1.4rem, 3vw, 2.8rem) .5rem;
  text-align: center;
}
body.is-ceremony .pillar::before { content: none; }
body.is-ceremony .pillar + .pillar { border-left: 1px solid rgba(201, 168, 76, .45); }
body.is-ceremony .pillar__icon {
  width: 4.4rem;
  height: 4.4rem;
  margin: 0 auto 1.4rem;
  display: block;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gold);
}
body.is-ceremony .pillar__name { margin-bottom: 1rem; }
body.is-ceremony .pillar__text { font-size: .98rem; line-height: 1.65; max-width: 22rem; margin-inline: auto; }
@media (max-width: 860px) {
  body.is-ceremony .pillars { padding-left: 0; gap: 2.8rem; width: min(100% - 3rem, 1140px); }
  body.is-ceremony .pillar + .pillar { border-left: 0; border-top: 1px solid rgba(201, 168, 76, .45); padding-top: 2.4rem; }
  body.is-ceremony .pillar::before { content: none; }
}


/* ==========================================================================
   THE ARCHWAY (2026-09-08) — drawn, not photographed
   One pointed arch, used twice: as the way into Inner Ceremonies from any
   page (arch.js, an overlay), and as a threshold inside the page that the
   scroll carries you through (threshold.js, a pinned stage).

   The wall is the page's own ground with the arch cut out of it by a mask;
   what lies beyond shows through the opening. The mask image is a large
   white field with a small black arch in its middle, so scaling mask-size
   scales the opening while the wall keeps covering the screen. Two stroked
   outlines make the frame. Everything scales from the same centre.
   ========================================================================== */
:root {
  /* one evenodd path: the field, with the arch as a hole in it. A CSS mask
     reads an SVG image by ALPHA, so the hole has to be transparent, not black. */
  --arch-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4000 4000'><path fill='white' fill-rule='evenodd' d='M0 0H4000V4000H0Z M1970 2080V1990C1970 1962 1984 1944 2000 1930C2016 1944 2030 1962 2030 1990V2080Z'/></svg>");
}

/* --- the overlay: the way in --- */
.archway {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility 0s .32s;
}
.archway.is-up { opacity: 1; visibility: visible; transition: opacity .22s ease; pointer-events: auto; }
.archway__beyond,
.archway__wall { position: absolute; inset: 0; }
.archway__beyond {
  background-position: center;
  background-size: cover;
  /* washed the way the hero is, so the glimpse is the same roses */
  filter: brightness(1.12) saturate(.9);
}
.archway__beyond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 248, 242, .42);
}
.archway__wall {
  background: #faf3ee;
  -webkit-mask-image: var(--arch-mask);
  mask-image: var(--arch-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* opening ≈ 46vh tall to start: 4000 units of mask for 160 of arch */
  -webkit-mask-size: 1150vh;
  mask-size: 1150vh;
}
.archway__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(46vh / 1.6);
  height: 46vh;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  overflow: visible;
  fill: none;
  stroke: #c9a84c;
  stroke-width: .9;
  stroke-linejoin: round;
}
/* pass through: the opening grows past the screen, the frame with it */
.archway.is-through .archway__wall,
.archway.is-through .archway__frame {
  transition: mask-size .62s cubic-bezier(.4, 0, .2, 1), -webkit-mask-size .62s cubic-bezier(.4, 0, .2, 1), transform .62s cubic-bezier(.4, 0, .2, 1), opacity .5s ease .12s;
}
.archway.is-through .archway__wall { -webkit-mask-size: 6200vh; mask-size: 6200vh; }
.archway.is-through .archway__frame { transform: translate(-50%, -50%) scale(5.4); opacity: 0; }
/* arriving: already through; the roses over the roses, and gone */
.archway.is-out { opacity: 0; visibility: visible; transition: opacity .45s ease .05s, visibility 0s .5s; }
.archway.is-out .archway__wall { -webkit-mask-size: 6200vh; mask-size: 6200vh; }
.archway.is-out .archway__frame { opacity: 0; }

/* --- inside the page: the threshold --- */
body.is-ceremony .temple__band--arch {
  --p: 0;
  height: 165vh;                      /* the runway: 65vh of scroll to pass through */
  padding: 0;
  margin: 0;
}
body.is-ceremony .arch {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* the whole stage goes as you come out the other side */
  opacity: calc(1 - max(0, (var(--p) - .72) / .28));
}
body.is-ceremony .arch__beyond,
body.is-ceremony .arch__wall { position: absolute; inset: 0; }
body.is-ceremony .arch__beyond {
  background-position: center;
  background-size: cover;
  filter: brightness(1.12) saturate(.9);
  transform: scale(calc(1.06 + var(--p) * .18));
}
body.is-ceremony .arch__beyond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 248, 242, .38);
}
body.is-ceremony .arch__wall {
  background: transparent;
  -webkit-mask-image: var(--arch-mask);
  mask-image: var(--arch-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: calc(1150vh * (1 + var(--p) * 4.6));
  mask-size: calc(1150vh * (1 + var(--p) * 4.6));
}
/* the wall IS the page ground: painted here so the mask has something to cut */
body.is-ceremony .arch__wall::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 92% at 0% 42%,   rgba(248,186,150,.78) 0%, rgba(250,243,238,0) 58%),
    radial-gradient(58% 88% at 100% 62%, rgba(255,205,88,.62)  0%, rgba(250,243,238,0) 56%),
    #faf3ee;
}
body.is-ceremony .arch__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(46vh / 1.6);
  height: 46vh;
  transform: translate(-50%, -50%) scale(calc(1 + var(--p) * 4.6));
  transform-origin: 50% 50%;
  overflow: visible;
  fill: none;
  stroke: #c9a84c;
  stroke-width: .9;
  stroke-linejoin: round;
  opacity: calc(1 - max(0, (var(--p) - .55) / .3));
}
@media (prefers-reduced-motion: reduce) {
  .archway { display: none; }
  body.is-ceremony .temple__band--arch { height: auto; }
  body.is-ceremony .arch { position: relative; height: 70vh; opacity: 1; }
}


/* --- the rings (2026-09-08): her gold glitter ring, four times, concentric,
   behind the closing line. Each turns at its own pace, alternating ways, so
   the glitter drifts against itself. Faint: the words stay the point. --- */
body.is-ceremony .temple__close {
  position: relative;
  overflow: hidden;
  min-height: min(80vh, 46rem);
  display: grid;
  place-items: center;
}
body.is-ceremony .temple__closing { position: relative; z-index: 1; }
body.is-ceremony .rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 52rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body.is-ceremony .rings__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  animation: rings-turn 140s linear infinite;
  will-change: transform;
}
body.is-ceremony .rings__ring:nth-child(2) { transform: scale(.76); animation: rings-turn-back 110s linear infinite; opacity: .55; }
body.is-ceremony .rings__ring:nth-child(3) { transform: scale(.54); animation: rings-turn 85s linear infinite; opacity: .6; }
body.is-ceremony .rings__ring:nth-child(4) { transform: scale(.34); animation: rings-turn-back 60s linear infinite; opacity: .65; }
@keyframes rings-turn      { from { transform: scale(var(--s, 1)) rotate(0deg); }   to { transform: scale(var(--s, 1)) rotate(360deg); } }
@keyframes rings-turn-back { from { transform: scale(var(--s, 1)) rotate(360deg); } to { transform: scale(var(--s, 1)) rotate(0deg); } }
body.is-ceremony .rings__ring:nth-child(1) { --s: 1; }
body.is-ceremony .rings__ring:nth-child(2) { --s: .76; }
body.is-ceremony .rings__ring:nth-child(3) { --s: .54; }
body.is-ceremony .rings__ring:nth-child(4) { --s: .34; }
@media (prefers-reduced-motion: reduce) {
  body.is-ceremony .rings__ring { animation: none; }
}


/* --- the gate (2026-09-08): the ARCH as the entrance to the page ---
   The archway overlay from arch.js, held open and waiting. Her name above
   the arch, ENTER beneath. Click, and it is the same pass-through. The page
   does not scroll while the gate is up. */
html.has-gate { overflow: hidden; }
.archway--gate { cursor: pointer; }
.archway--gate.is-up { pointer-events: auto; transition: opacity .7s ease; }
.archway--gate:focus-visible { outline: none; }
.archway--gate.is-through { pointer-events: none; }
.archway--gate.is-gone { opacity: 0; transition: opacity .6s ease; }
.archway__name,
.archway__enter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  transition: opacity .35s ease;
}
.archway__name {
  bottom: calc(50% + 23vh + 1.6rem);
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.1;
  color: #3d332b;
}
.archway__enter {
  top: calc(50% + 23vh + 1.6rem);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #c9a84c;
  animation: gate-breathe 3.4s ease-in-out infinite;
}
@keyframes gate-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.archway.is-through .archway__name,
.archway.is-through .archway__enter { opacity: 0; animation: none; }

/* --- the portal at the top (2026-09-08) ---
   The page opens on the arch. There is no click: the first scroll opens it
   and the hero is beneath. The hero's own rules assumed it was first; the
   panel overlap still follows the hero, so nothing there changes. If you came
   in through the arch from another page, this one stands down. */
body.is-ceremony .temple__band--arch { height: 170vh; }
body.is-ceremony .temple__band--arch + .temple__hero { margin-top: calc(-1 * clamp(2rem, 6vh, 4rem)); }
html.arrived-by-arch body.is-ceremony .temple__band--arch { display: none; }
/* The hero waits directly beneath the portal's last screen, so as the arch
   opens past the frame the roses through it become the roses of the hero
   with no ground showing between. 70vh of scroll takes you through. */
body.is-ceremony .temple__band--arch { position: relative; z-index: 3; height: 170vh; }
body.is-ceremony .temple__band--arch + .temple__hero { margin-top: -100vh; z-index: 0; }
body.is-ceremony .arch { opacity: calc(1 - max(0, (var(--p) - .6) / .4)); }
/* No cross-fade while the arch is still visible: the opening grows until it
   is wider than any screen (46vh * 8 = 230vh across on a 16:9 window), and
   only then, with nothing but roses on screen, does the stage give way. */
body.is-ceremony .arch__wall {
  -webkit-mask-size: calc(1150vh * (1 + var(--p) * 7));
  mask-size: calc(1150vh * (1 + var(--p) * 7));
}
body.is-ceremony .arch__frame { transform: translate(-50%, -50%) scale(calc(1 + var(--p) * 7)); opacity: calc(1 - max(0, (var(--p) - .5) / .3)); }
body.is-ceremony .arch { opacity: calc(1 - max(0, (var(--p) - .88) / .12)); }

/* Hand over with a cut, not a fade, and make the two sides of the cut the
   same picture: the roses beyond the arch carry the hero's own wash, sit at
   the hero's own scale, and the stage drops in the last 2% of the runway,
   once the opening is already wider than the screen. Nothing is ever seen
   through anything. */
body.is-ceremony .arch__beyond { transform: none; filter: none; }
body.is-ceremony .arch__beyond::after { content: none; }
body.is-ceremony .arch__beyond .temple__herowash { position: absolute; inset: 0; }
body.is-ceremony .arch { opacity: calc(1 - clamp(0, (var(--p) - .95) * 50, 1)); }
/* The arch path is 60 units wide in its 100-unit box, so the opening needs
   x14 (not x8) to clear the edges of a 16:9 screen: 1150vh * 14 * 60/4000
   = 241vh across. It is past the edges from p≈.72; the cut is at .94. */
body.is-ceremony .arch__wall {
  -webkit-mask-size: calc(1150vh * (1 + var(--p) * 13));
  mask-size: calc(1150vh * (1 + var(--p) * 13));
}
body.is-ceremony .arch__frame { transform: translate(-50%, -50%) scale(calc(1 + var(--p) * 13)); opacity: calc(1 - max(0, (var(--p) - .4) / .25)); }
body.is-ceremony .arch { opacity: calc(1 - clamp(0, (var(--p) - .94) * 50, 1)); }

/* ==========================================================================
   PORTAL, SMOOTH (2026-09-08) — the hero lives inside the stage
   "when i enter it still jigs a bit and doesnt land smoothly on the hero, i
   want it to slowly fade in." The hero is now the thing beyond the arch,
   pinned in the same sticky stage, so nothing scrolls under anything. Its
   roses are what you see through the opening; its words fade in slowly once
   the opening has cleared the screen. Then the stage releases and the hero
   scrolls away as any hero would.
   ========================================================================== */
body.is-ceremony .temple__band--arch { z-index: 1; height: 190vh; }
body.is-ceremony .arch { opacity: 1; }
body.is-ceremony .arch .temple__hero {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding-block: 0;
  display: grid;
  place-items: center;
}
body.is-ceremony .arch .temple__herotext {
  opacity: calc(clamp(0, (var(--p) - .66) / .3, 1));
  transform: translateY(calc((1 - clamp(0, (var(--p) - .66) / .3, 1)) * 10px));
}
/* the wall and frame sit over the hero */
body.is-ceremony .arch__wall, body.is-ceremony .arch__frame { z-index: 2; }
/* the welcome panel now follows the portal band, not a bare hero */
body.is-ceremony .temple__band--arch + .temple__band--welcome { margin-top: clamp(-7rem, -12vh, -4.5rem); z-index: 2; }
/* arrived through the arch from another page: no runway, the hero stands open */
html.arrived-by-arch body.is-ceremony .temple__band--arch { display: block; height: 100svh; }
/* closing line in the page's own hand, ink not gold; rings smaller (2026-09-08) */
body.is-ceremony .temple__closing {
  font-family: var(--hand);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.1;
  color: var(--t-ink);
  white-space: nowrap;
}
body.is-ceremony .temple__closing em { font-style: normal; }
body.is-ceremony .rings { width: min(70vw, 34rem); }
body.is-ceremony .temple__close { min-height: min(64vh, 36rem); }
@media (max-width: 640px) { body.is-ceremony .temple__closing { white-space: normal; font-size: 2.4rem; } }
/* The question mark used to be set apart because Baxter Clean had no glyph
   for it. Ballerino, the script since 2026-09-09, does, and the override had
   stopped doing what its note claimed anyway: --serif is remapped to Archivo
   for this page further down the file, so the mark was rendering in the sans.
   It now takes the script like the rest of the line (2026-10-09). */
body.is-ceremony .temple__q { font: inherit; margin-left: 0; }

/* footer links hover pink on Inner Ceremonies too, like the rest of the site
   (2026-09-08); the gold hover stays for the credit and the socials */
body.is-ceremony .footer__link:hover,
body.is-ceremony .footer__link:focus-visible { color: #e2809b; }

/* (2026-09-08) The automatic arch transition on clicking an Inner Ceremonies
   link is gone: "the automatic transition is now unnecessary". The portal at
   the top of the page is the entrance now, every time. arch.js removed. */

/* --------------------------------------------------------------------------
   The Three Pillars as cards that turn over (2026-09-09). The front holds the
   symbol and the name; a click turns the card and the text is on the back.
   The columns' dividers come off: a card carries its own edge.
   -------------------------------------------------------------------------- */
body.is-ceremony .pillars--flip { gap: clamp(1.2rem, 2.4vw, 2rem); }
body.is-ceremony .pillar--flip { padding: 0; perspective: 1400px; }
body.is-ceremony .pillar--flip + .pillar--flip { border-left: 0; }
body.is-ceremony .pillar__card {
  display: block;
  position: relative;
  width: 100%;
  min-height: 21rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.2, .7, .2, 1);
}
body.is-ceremony .pillar__card.is-flipped { transform: rotateY(180deg); }
body.is-ceremony .pillar__card:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 20px; }
body.is-ceremony .pillar__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.2rem clamp(1.3rem, 2.4vw, 2rem);
  border-radius: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
body.is-ceremony .pillar__face--front {
  background: #fff;
  border: 1px solid rgba(201, 168, 76, .55);
  box-shadow: 0 18px 44px rgba(120, 80, 60, .10);
  transition: box-shadow .3s ease, transform .3s ease;
}
body.is-ceremony .pillar__card:hover .pillar__face--front,
body.is-ceremony .pillar__card:focus-visible .pillar__face--front {
  box-shadow: 0 24px 54px rgba(120, 80, 60, .16);
}
body.is-ceremony .pillar__face--back {
  background: var(--t-blush);
  border: 1px solid rgba(201, 168, 76, .4);
  transform: rotateY(180deg);
}
body.is-ceremony .pillar__face .pillar__name { display: block; color: #000; }   /* black, not gold (2026-09-09) */
body.is-ceremony .pillar__face--back .pillar__name { font-size: 1.9rem; margin-bottom: .9rem; }
body.is-ceremony .pillar__face--back .pillar__text { display: block; text-align: left; }
body.is-ceremony .pillar__hint {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
}
@media (max-width: 820px) {
  body.is-ceremony .pillar--flip + .pillar--flip { border-top: 0; padding-top: 0; }
  body.is-ceremony .pillar__card { min-height: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.is-ceremony .pillar__card { transition: none; }
}

/* --------------------------------------------------------------------------
   Choose your depth (2026-09-09): two invitations, not a pricing table. White
   cards, hairline edges, gold only on the label and the button; the Journey
   sits on blush with a gold edge so it reads as the fuller of the two.
   -------------------------------------------------------------------------- */
body.is-ceremony .depth {
  list-style: none;
  width: min(100% - 5rem, 980px);
  margin: clamp(2.4rem, 5vw, 3.6rem) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: stretch;
}
body.is-ceremony .depth__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(201, 168, 76, .38);
  border-radius: 22px;
  padding: clamp(2rem, 3.6vw, 3rem) clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.8rem, 3vw, 2.4rem);
  text-align: left;
  box-shadow: 0 16px 40px rgba(120, 80, 60, .07);
}
body.is-ceremony .depth__card--journey {
  background: var(--t-blush);
  border-color: var(--gold);
}
body.is-ceremony .depth__label {
  margin: 0 0 .7rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
body.is-ceremony .depth__gem { font-size: .6em; vertical-align: .15em; margin-right: .35em; }
body.is-ceremony .depth__sub {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.3;
  color: var(--t-ink);
}
body.is-ceremony .depth__text {
  margin: 0 0 1.4rem;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--t-ink);
}
body.is-ceremony .depth__list {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  border-top: 1px solid rgba(201, 168, 76, .32);
}
body.is-ceremony .depth__list li {
  padding: .62rem 0;
  border-bottom: 1px solid rgba(201, 168, 76, .32);
  font-family: var(--body);
  font-size: .97rem;
  line-height: 1.5;
  color: var(--t-ink);
}
body.is-ceremony .depth__foot {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: .98rem;
  color: var(--t-ink-soft);
}
body.is-ceremony .depth__cta { margin: auto 0 0; text-align: center; }
body.is-ceremony .depth__cta .temple__book { margin-top: 0; }
body.is-ceremony .depth__note {
  width: min(100% - 5rem, 560px);
  margin: clamp(1.6rem, 3.6vw, 2.4rem) auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--t-ink-soft);
  text-align: center;
}
@media (max-width: 820px) {
  body.is-ceremony .depth { grid-template-columns: 1fr; width: min(100% - 2rem, 560px); }
  body.is-ceremony .depth__note { width: min(100% - 2rem, 560px); }
}

/* --------------------------------------------------------------------------
   FAQ (2026-09-09): a clean accordion. Questions in the serif, answers in
   Archivo, one gold hairline between each, the panel opening on a grid
   transition so nothing jumps.
   -------------------------------------------------------------------------- */
body.is-ceremony .faq {
  list-style: none;
  width: min(100% - 5rem, 720px);
  margin: clamp(1.6rem, 4vh, 2.6rem) auto 0;
  padding: 0;
  border-top: 1px solid rgba(201, 168, 76, .4);
}
body.is-ceremony .faq__item { border-bottom: 1px solid rgba(201, 168, 76, .4); }
body.is-ceremony .faq__q { margin: 0; font-size: inherit; font-weight: inherit; }
body.is-ceremony .faq__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  margin: 0;
  padding: 1.15rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.12rem, 1.7vw, 1.35rem);
  line-height: 1.35;
  color: var(--t-ink);
  transition: color .25s ease;
}
body.is-ceremony .faq__btn:hover,
body.is-ceremony .faq__btn:focus-visible { color: #000; }
body.is-ceremony .faq__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
/* the mark: a hairline plus that turns into a minus */
body.is-ceremony .faq__mark {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
}
body.is-ceremony .faq__mark::before,
body.is-ceremony .faq__mark::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1px;
  background: var(--gold);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
body.is-ceremony .faq__mark::after { transform: rotate(90deg); }
body.is-ceremony .faq__item.is-open .faq__mark::after { transform: rotate(0deg); }
body.is-ceremony .faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1);
}
body.is-ceremony .faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
body.is-ceremony .faq__inner { overflow: hidden; }
body.is-ceremony .faq__inner p {
  margin: 0;
  padding: 0 2.5rem 1.4rem 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--t-ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s ease .08s, transform .4s ease .08s;
}
body.is-ceremony .faq__item.is-open .faq__inner p { opacity: 1; transform: none; }

/* ── FAQ ROWS LIGHT UP ON HOVER (2026-10-04) ──────────────────────────────
   "make the FAQ hover with a white block. something interactive". A white
   card wipes in from the left behind the row: it grows out past the
   hairlines on both sides so it reads as a block lifting off the gradient
   rather than a highlight inside the list. The question and its answer ride
   8px to the right as it lands, a soft gold disc opens behind the plus, and
   the row carries a shadow for the length of the hover.

   The card lives on `.faq__item`, NOT on the button: a closed item is just
   the question row, so it covers exactly that, and an open one is question
   plus answer, so the whole thing becomes one white card while you read.
   It is a ::before at z-index 0 with the question and panel lifted to
   z-index 1 — z-index: -1 would drop it behind the band's own background
   and show nothing at all. */
body.is-ceremony .faq__item { position: relative; isolation: isolate; }
body.is-ceremony .faq__item::before {
  content: "";
  position: absolute;
  inset: 3px clamp(-1.4rem, -1.2vw, -.9rem);
  z-index: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(120, 80, 50, .13);
  opacity: 0;
  transform: scaleX(.94);
  transform-origin: left center;
  transition: opacity .28s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
body.is-ceremony .faq__q,
body.is-ceremony .faq__panel { position: relative; z-index: 1; }
body.is-ceremony .faq__item:hover::before,
body.is-ceremony .faq__item:focus-within::before,
body.is-ceremony .faq__item.is-open::before { opacity: 1; transform: scaleX(1); }

/* the question text and the answer slide together, so they stay aligned
   with each other on the card instead of stepping apart */
body.is-ceremony .faq__btn > span:not(.faq__mark),
body.is-ceremony .faq__inner p {
  transition: transform .45s cubic-bezier(.2, .7, .2, 1),
              opacity .4s ease .08s;
}
body.is-ceremony .faq__item:hover .faq__btn > span:not(.faq__mark),
body.is-ceremony .faq__item:focus-within .faq__btn > span:not(.faq__mark),
body.is-ceremony .faq__item.is-open .faq__btn > span:not(.faq__mark) {
  transform: translateX(8px);
}
body.is-ceremony .faq__item.is-open .faq__inner p { opacity: 1; transform: translateX(8px); }
body.is-ceremony .faq__item.is-open .faq__inner p { padding-right: 3.2rem; }

/* the mark leans back the other way, with a gold disc opening behind it */
body.is-ceremony .faq__mark { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
body.is-ceremony .faq__item:hover .faq__mark,
body.is-ceremony .faq__item:focus-within .faq__mark,
body.is-ceremony .faq__item.is-open .faq__mark { transform: translateX(-8px); }
body.is-ceremony .faq__btn::after {
  content: "";
  position: absolute;
  right: -.65rem;
  top: 50%;
  width: 2.3rem; height: 2.3rem;
  margin-top: -1.15rem;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 202, 44, .22);
  opacity: 0;
  transform: translateX(0) scale(.4);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
  pointer-events: none;
}
body.is-ceremony .faq__item:hover .faq__btn::after,
body.is-ceremony .faq__item:focus-within .faq__btn::after,
body.is-ceremony .faq__item.is-open .faq__btn::after {
  opacity: 1;
  transform: translateX(-8px) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  body.is-ceremony .faq__item::before,
  body.is-ceremony .faq__btn::after,
  body.is-ceremony .faq__btn > span:not(.faq__mark),
  body.is-ceremony .faq__inner p,
  body.is-ceremony .faq__mark { transition: none; }
  body.is-ceremony .faq__item:hover::before,
  body.is-ceremony .faq__item.is-open::before { transform: none; }
  body.is-ceremony .faq__item:hover .faq__btn > span:not(.faq__mark),
  body.is-ceremony .faq__item.is-open .faq__btn > span:not(.faq__mark),
  body.is-ceremony .faq__item.is-open .faq__inner p,
  body.is-ceremony .faq__item:hover .faq__mark,
  body.is-ceremony .faq__item.is-open .faq__mark { transform: none; }
  body.is-ceremony .faq__item:hover .faq__btn::after,
  body.is-ceremony .faq__item.is-open .faq__btn::after { transform: scale(1); }
}

/* the outcome passage: centred, serif, held before the closing line */
body.is-ceremony .temple__band--outcome { padding-block: clamp(2rem, 5vh, 3.5rem); }
body.is-ceremony .temple__outcome {
  width: min(100% - 3rem, 44rem);
  margin: 0 auto;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.5;
  color: var(--t-ink);
}
/* "clear" stays the same colour as the rest of the line (2026-09-09) */
body.is-ceremony .temple__closing em { color: inherit; }

@media (max-width: 820px) {
  body.is-ceremony .faq { width: min(100% - 2rem, 720px); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-ceremony .faq__panel, body.is-ceremony .faq__inner p, body.is-ceremony .faq__mark::before, body.is-ceremony .faq__mark::after { transition: none; }
}

/* NO FRAUNCES on Inner Ceremonies (2026-09-09, Natalie): every serif role on
   this page is Archivo. The script and Menlo roles are untouched. */
body.is-ceremony { --serif: 'Archivo', 'Helvetica Neue', Arial, sans-serif; }

/* --------------------------------------------------------------------------
   The dust (2026-09-09): dust.js redraws the four gold rings as grains on a
   canvas over the whole close, so the hand can scatter them and they drift
   back. The PNG rings stay for reduced motion and until the canvas is up.
   -------------------------------------------------------------------------- */
body.is-ceremony .temple__close { position: relative; }
body.is-ceremony .dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body.is-ceremony .rings.is-dust .rings__ring { visibility: hidden; }
body.is-ceremony .temple__closing { position: relative; z-index: 1; }

/* ==========================================================================
   DANIEL (2026-09-09): the love letter. Golden hour into sunset, held still;
   the homepage's film edges and grain; one line, a filmstrip moved by the
   scroll, the story, the film, the cards, the compass.
   ========================================================================== */
body.is-daniel {
  --d-ink: #2a1c12;
  --d-ink-soft: rgba(42,28,18,.72);
  --d-cream: #fff3e2;
  --d-gold: #d9a84a;
  --d-gold-deep: #b9782a;           /* amber, not olive, on the peach */
  color: var(--d-ink);
  background: #e9a874;
}
/* the ground: a late sun, top to bottom, never moving */
body.is-daniel .sky {
  background: linear-gradient(180deg,
    #fbe1c2 0%, #f6c99a 22%, #efaf7e 48%, #e6946a 70%, #d97a5a 88%, #c4654f 100%);
}
body.is-daniel .grain { opacity: .55; }
body.is-daniel .nav { background: transparent; }
body.is-daniel .page { position: relative; z-index: 1; }

/* ---- 1. the pact ---------------------------------------------------- */
body.is-daniel .dan__pact {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 1.5rem;
}
body.is-daniel .dan__pactline {
  margin: 0;
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2.2rem, 6.4vw, 5.6rem);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  color: var(--d-ink);
  white-space: nowrap;
}
@media (max-width: 560px) { body.is-daniel .dan__pactline { white-space: normal; font-size: 2.6rem; } }

/* ---- 2. the strip --------------------------------------------------- */
/* A slow filmstrip. The current photograph nearly fills the screen; the
   neighbours wait as thin slivers at the edges; the strip eases left on its
   own clock (strip.js) and loops without a seam. --r is each frame's place
   relative to the current one: 0 centre, -1 left, 1 right. */
body.is-daniel .strip {
  position: relative;
  padding: 0 0 clamp(2rem, 5vh, 3.5rem);
}
body.is-daniel .strip__stage {
  --fw: 92vw;                          /* the frame */
  --fh: 84svh;
  --gap: 1.6vw;                        /* between frames: what shows of a neighbour is (100vw - fw) / 2 - gap */
  position: relative;
  height: var(--fh);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
}
body.is-daniel .strip__stage:active { cursor: grabbing; }
body.is-daniel .strip__stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(42,28,18,.4); }
body.is-daniel .strip__frame {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--fw);
  height: var(--fh);
  margin: 0;
  transform: translateX(calc(-50% + var(--r, 0) * (var(--fw) + var(--gap))));
  transition: transform 1.9s cubic-bezier(.45, .05, .2, 1), filter 1.9s ease;
  filter: brightness(.6);
  will-change: transform;
  cursor: default;
}
body.is-daniel .strip__frame.is-still { transition: none; }
body.is-daniel .strip__frame[data-phase="cur"] { filter: brightness(1); }
body.is-daniel .strip__frame[data-phase="prev"],
body.is-daniel .strip__frame[data-phase="next"] { cursor: pointer; }
body.is-daniel .strip__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  /* the 8mm frame: warm, a little faded, the edge worn soft */
  filter: sepia(.16) saturate(.92) contrast(.96) brightness(1.02);
  box-shadow: 0 30px 80px rgba(60,26,10,.28);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%);
  mask-composite: intersect;
  -webkit-user-drag: none;
  user-select: none;
}
body.is-daniel .strip__progress {
  position: absolute;
  left: 50%;
  bottom: clamp(.6rem, 1.6vh, 1.2rem);
  width: min(40vw, 300px);
  height: 1px;
  transform: translateX(-50%);
  background: rgba(42,28,18,.18);
}
body.is-daniel .strip__progress i {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--d-gold-deep);
  transition: transform 1.9s cubic-bezier(.45, .05, .2, 1);
}
@media (max-width: 720px) {
  body.is-daniel .strip__stage { --fw: 90vw; --fh: 64svh; --gap: 2vw; }
}
@media (prefers-reduced-motion: reduce) {
  body.is-daniel .strip__frame, body.is-daniel .strip__progress i { transition: none; }
}

/* ---- 3. the story --------------------------------------------------- */
body.is-daniel .dan__story {
  padding: clamp(5rem, 12vh, 9rem) 1.5rem clamp(4rem, 10vh, 7rem);
}
body.is-daniel .dan__prose {
  max-width: 650px;
  margin: 0 auto;
  font-family: var(--body);
  font-size: clamp(1.08rem, 1.35vw, 1.22rem);
  line-height: 1.85;
  color: var(--d-ink);
}
body.is-daniel .dan__prose p { margin: 0 0 1.6em; }
body.is-daniel .dan__prose p:last-child { margin-bottom: 0; }
body.is-daniel .dan__open {
  font-size: 1.32em;
  line-height: 1.55;
  margin-bottom: 1.4em !important;
}
body.is-daniel .dan__song { font-style: italic; color: var(--d-gold-deep); }
body.is-daniel .dan__inline {
  max-width: 820px;
  margin: clamp(3rem, 8vh, 5.5rem) auto;
}
body.is-daniel .dan__inline img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(.16) saturate(.92) contrast(.96);
  box-shadow: 0 24px 60px rgba(60,26,10,.24), 0 0 0 1px rgba(255,240,215,.35);
}

/* ---- 4 & 5. the film, the cards ------------------------------------- */
body.is-daniel .dan__band { padding: clamp(4.5rem, 11vh, 8rem) 1.5rem; }
body.is-daniel .dan__film { border-top: 1px solid rgba(42,28,18,.14); }
body.is-daniel .dan__cosmos { border-top: 1px solid rgba(42,28,18,.14); }
body.is-daniel .dan__measure { max-width: 650px; margin: 0 auto; text-align: left; }
body.is-daniel .eyebrow--light { color: var(--d-ink-soft); }
body.is-daniel .dan__h2 {
  color: var(--d-ink);
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  margin-bottom: 1.2rem;
  white-space: nowrap;
}
@media (max-width: 760px) { body.is-daniel .dan__h2 { white-space: normal; } }
body.is-daniel .dan__p {
  font-family: var(--body);
  font-size: clamp(1.02rem, 1.25vw, 1.14rem);
  line-height: 1.75;
  color: var(--d-ink);
  margin: 0 0 1.6rem;
}
body.is-daniel .dan__ctas { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin: 0 0 2rem; }
body.is-daniel .dan__btn {
  margin-top: 0;
  color: var(--d-ink);
  border-color: var(--d-ink);
  border-radius: 999px;
}
body.is-daniel .dan__btn:hover,
body.is-daniel .dan__btn:focus-visible { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-cream); }
body.is-daniel .dan__btn--fill { background: var(--d-ink); color: var(--d-cream); }
body.is-daniel .dan__btn--fill:hover,
body.is-daniel .dan__btn--fill:focus-visible { background: #000; border-color: #000; color: #fff; }
body.is-daniel .dan__audience {
  font-family: var(--body);
  font-style: italic;
  font-size: 1rem;
  color: var(--d-ink-soft);
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(42,28,18,.14);
}
/* the signup */
body.is-daniel .dan__signup { margin-top: .4rem; }
body.is-daniel .dan__hp { position: absolute; left: -9999px; }
body.is-daniel .dan__label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--d-ink-soft);
  margin: 0 0 .6rem;
}
body.is-daniel .dan__field { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; }
body.is-daniel .dan__input {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--body);
  font-size: 1.02rem;
  color: var(--d-ink);
  background: rgba(255,246,232,.55);
  border: 1px solid rgba(42,28,18,.35);
  border-radius: 999px;
  padding: .9rem 1.3rem;
  outline: none;
}
body.is-daniel .dan__input::placeholder { color: rgba(42,28,18,.45); }
body.is-daniel .dan__input:focus-visible { border-color: var(--d-ink); box-shadow: 0 0 0 3px rgba(42,28,18,.12); }
body.is-daniel .dan__signup .dan__btn { cursor: pointer; font: inherit; font-family: var(--mono); font-size: .84rem; letter-spacing: .3em; text-transform: uppercase; }
body.is-daniel .dan__note { font-family: var(--body); font-size: .95rem; color: var(--d-ink-soft); margin: .8rem 0 0; min-height: 1.4em; }
body.is-daniel .dan__signup.is-sent .dan__field { opacity: .5; pointer-events: none; }

/* ---- 6. the close --------------------------------------------------- */
body.is-daniel .dan__close {
  padding: clamp(7rem, 20vh, 13rem) 1.5rem clamp(6rem, 16vh, 10rem);
  text-align: center;
}
body.is-daniel .dan__compass {
  width: clamp(120px, 16vw, 170px);
  height: auto;
  margin: 0 auto 2.2rem;
  display: block;
  color: var(--d-ink);
  fill: none;
  stroke: currentColor;
  stroke-width: .9;
  stroke-linejoin: round;
  opacity: .8;
}
body.is-daniel .dan__compass text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  fill: currentColor;
  stroke: none;
}
body.is-daniel .dan__closing {
  margin: 0;
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 4.4rem);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--d-gold-deep);
  white-space: nowrap;
}
@media (max-width: 480px) { body.is-daniel .dan__closing { white-space: normal; } }

/* the footer sits on the sunset's last band */
body.is-daniel .footer { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Daniel, second pass (2026-09-09): Archivo only on this page, and the
   ground is her blurred night: navy at the left through blue to a pink glow
   at the right (a gradient standing in until the real image lands in
   images/daniel/sky.jpg). Everything reads in cream on it.
   -------------------------------------------------------------------------- */
body.is-daniel {
  --d-ink: #f6ebdf;
  --d-ink-soft: rgba(246,235,223,.72);
  --d-cream: #f6ebdf;
  --d-dark: #0b1020;
  --d-gold: #e2b866;
  --d-gold-deep: #d9a84a;
  --ink: #f6ebdf;
  --ink-soft: rgba(246,235,223,.72);
  color: var(--d-ink);
  background: #0e1426;
}
body.is-daniel .sky {
  background:
    radial-gradient(ellipse 34% 40% at 78% 96%, rgba(236,178,170,.85) 0%, rgba(236,178,170,0) 100%),
    radial-gradient(ellipse 40% 60% at 92% 70%, rgba(150,140,160,.55) 0%, rgba(150,140,160,0) 100%),
    radial-gradient(ellipse 30% 55% at 48% 72%, rgba(46,72,170,.75) 0%, rgba(46,72,170,0) 100%),
    radial-gradient(ellipse 60% 80% at 10% 30%, rgba(8,12,26,1) 0%, rgba(8,12,26,0) 100%),
    linear-gradient(90deg, #080c1a 0%, #141c34 30%, #22305c 55%, #3a3f66 78%, #5a4a66 100%);
}
body.is-daniel .grain { opacity: .5; }
body.is-daniel .nav__name,
body.is-daniel .nav__link { color: var(--d-ink); }
body.is-daniel .nav__link[aria-disabled="true"] { color: var(--d-ink-soft); }
body.is-daniel .nav__link:hover,
body.is-daniel .nav__link:focus-visible { color: #f3b0c4; }
body.is-daniel .filmedge { color: rgba(255,238,212,.55); }

/* Archivo everywhere on this page */
body.is-daniel .dan__pactline,
body.is-daniel .dan__closing {
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.01em;
}
body.is-daniel .dan__pactline { font-size: clamp(1.9rem, 4.6vw, 3.8rem); color: var(--d-ink); }
body.is-daniel .dan__closing { font-size: clamp(1.7rem, 3.8vw, 3.1rem); color: var(--d-gold); }
body.is-daniel .dan__h2 {
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--d-ink);
  margin: 0 0 1.4rem;
  white-space: normal;
  text-wrap: balance;
}
body.is-daniel .eyebrow--light { color: var(--d-ink-soft); }
body.is-daniel .eyebrow::before { background: var(--d-gold); }

/* the story, in chapters */
body.is-daniel .dan__storyhead { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
body.is-daniel .dan__storyhead .dan__h2 { margin-bottom: 0; }
body.is-daniel .dan__chapter + .dan__chapter { margin-top: clamp(3rem, 8vh, 5.5rem); }
body.is-daniel .dan__inline + .dan__chapter { margin-top: 0; }
body.is-daniel .dan__ch {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--d-ink);
  margin: 0 0 1.1rem;
}
body.is-daniel .dan__gem { color: var(--d-gold); font-size: .62em; vertical-align: .18em; margin-right: .3em; }
body.is-daniel .dan__prose { color: var(--d-ink); }
body.is-daniel .dan__song { color: var(--d-gold); font-style: italic; }
body.is-daniel .dan__inline { max-width: 650px; margin: clamp(2.6rem, 7vh, 4.5rem) auto; }
body.is-daniel .dan__inline img { box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,240,215,.18); }

/* the film, the cards, in cream */
body.is-daniel .dan__film,
body.is-daniel .dan__cosmos { border-top-color: rgba(246,235,223,.16); }
body.is-daniel .dan__p { color: var(--d-ink); }
body.is-daniel .dan__btn { color: var(--d-ink); border-color: var(--d-ink); }
body.is-daniel .dan__btn:hover,
body.is-daniel .dan__btn:focus-visible { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-dark); }
body.is-daniel .dan__btn--fill { background: var(--d-ink); color: var(--d-dark); }
body.is-daniel .dan__btn--fill:hover,
body.is-daniel .dan__btn--fill:focus-visible { background: #fff; border-color: #fff; color: var(--d-dark); }
body.is-daniel .dan__audience { color: var(--d-ink-soft); border-top-color: rgba(246,235,223,.16); }
body.is-daniel .dan__label { color: var(--d-ink-soft); }
body.is-daniel .dan__input { color: var(--d-ink); background: rgba(255,255,255,.06); border-color: rgba(246,235,223,.4); }
body.is-daniel .dan__input::placeholder { color: rgba(246,235,223,.45); }
body.is-daniel .dan__input:focus-visible { border-color: var(--d-ink); box-shadow: 0 0 0 3px rgba(246,235,223,.15); }
body.is-daniel .dan__note { color: var(--d-ink-soft); }

/* the compass and the strip's line */
body.is-daniel .dan__compass { color: var(--d-ink); opacity: .85; }
body.is-daniel .strip__progress { background: rgba(246,235,223,.2); }
body.is-daniel .strip__progress i { background: var(--d-gold); }
body.is-daniel .strip__frame img { box-shadow: 0 30px 80px rgba(0,0,0,.5); }

/* the strip is a strip (2026-09-09): the photographs sit on black film,
   butted together, the black showing only as the thin gap between frames */
body.is-daniel .strip__stage { --fw: 91vw; --gap: .9vw; background: #07060a; }
body.is-daniel .strip__frame img {
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: none;
  filter: sepia(.14) saturate(.94) contrast(.98);
}
body.is-daniel .strip__frame { filter: brightness(.55); }
body.is-daniel .strip__frame[data-phase="cur"] { filter: brightness(1); }
body.is-daniel .strip__progress { bottom: .5rem; background: rgba(246,235,223,.25); }
@media (max-width: 720px) {
  body.is-daniel .strip__stage { --fw: 88vw; --gap: 1.4vw; }
}

/* the Kodak edges live on the Daniel strip only now (2026-09-09): they are
   the strip's own sprocket margins, pinned to the stage instead of the screen */
body.is-daniel .strip__stage .filmedge { position: absolute; top: 0; bottom: 0; z-index: 5; }

/* the hero (2026-09-09): the daisies, full bleed, the pact line over them */
body.is-daniel .dan__pact { position: relative; overflow: hidden; isolation: isolate; }
body.is-daniel .dan__hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 45%;
  z-index: -1;
  filter: saturate(.95) contrast(.98);
}
/* a breath of dark behind the words so the cream reads on the grass */
body.is-daniel .dan__pact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(20,14,10,.34) 0%, rgba(20,14,10,0) 100%),
    linear-gradient(180deg, rgba(10,12,24,.35) 0%, rgba(10,12,24,0) 30%, rgba(10,12,24,0) 75%, rgba(10,12,24,.55) 100%);
}
body.is-daniel .dan__pactline {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 24px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.4);
}

/* the line sits in the grass above them, not across their faces */
body.is-daniel .dan__pact { align-items: start; padding-top: clamp(7rem, 24svh, 15rem); }
body.is-daniel .dan__pact::after {
  background:
    radial-gradient(ellipse 70% 34% at 50% 28%, rgba(20,14,10,.38) 0%, rgba(20,14,10,0) 100%),
    linear-gradient(180deg, rgba(10,12,24,.4) 0%, rgba(10,12,24,0) 34%, rgba(10,12,24,0) 78%, rgba(10,12,24,.55) 100%);
}
@media (max-width: 720px) {
  body.is-daniel .dan__hero { object-position: 42% 50%; }
  body.is-daniel .dan__pact { padding-top: clamp(6rem, 20svh, 10rem); }
}

/* the pact line: yellow, typed (2026-09-09) */
body.is-daniel .dan__pactline {
  color: #ffca2c;
  text-shadow: 0 2px 26px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.45);
  min-height: 1.15em;                 /* holds its line while empty */
}
body.is-daniel .dan__caret {
  display: inline-block;
  width: .06em;
  height: .95em;
  margin-left: .08em;
  vertical-align: -.1em;
  background: #ffca2c;
  animation: pact-blink 1s steps(1) infinite;
}
body.is-daniel .is-typed .dan__caret { animation: pact-blink 1s steps(1) 2, pact-out .6s ease 2s forwards; }
@keyframes pact-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pact-out { to { opacity: 0; } }

/* the strip inside the story: full bleed out of the narrow column, room around it */
body.is-daniel .dan__story .strip {
  width: 100vw;
  margin: clamp(3.5rem, 9vh, 6rem) calc(50% - 50vw);
  padding-bottom: 0;
}
body.is-daniel .dan__story .strip + .dan__chapter { margin-top: 0; }

/* --------------------------------------------------------------------------
   The story in sections (2026-09-09): each chapter is its own panel on the
   night, a numbered marker above its title, a thin edge, room between. Easy
   to follow, still the same ground.
   -------------------------------------------------------------------------- */
body.is-daniel .dan__story { padding-top: clamp(4rem, 10vh, 7rem); }
body.is-daniel .dan__storyhead { max-width: 760px; margin-bottom: clamp(2rem, 5vh, 3.2rem); }
body.is-daniel .dan__chapter {
  max-width: 760px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.4rem) clamp(2.2rem, 4vw, 3.2rem);
  background: rgba(6,9,20,.42);
  border: 1px solid rgba(246,235,223,.14);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.is-daniel .dan__chapter + .dan__chapter { margin-top: clamp(1.6rem, 4vh, 2.6rem); }
body.is-daniel .dan__num {
  margin: 0 0 .7rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--d-gold);
}
body.is-daniel .dan__num .dan__gem { margin-right: .5em; vertical-align: .05em; }
body.is-daniel .dan__ch {
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  font-weight: 400;
  margin: 0 0 1.3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(246,235,223,.14);
}
body.is-daniel .dan__chapter p { max-width: 36rem; }
body.is-daniel .dan__chapter .dan__inline {
  max-width: 100%;
  margin: 1.8rem 0 0;
}
body.is-daniel .dan__chapter .dan__inline img { border-radius: 3px; }
body.is-daniel .dan__story .strip { margin-top: clamp(2.6rem, 7vh, 4.5rem); }
body.is-daniel .dan__story .strip + .dan__chapter { margin-top: clamp(2.6rem, 7vh, 4.5rem); }

/* --------------------------------------------------------------------------
   The story as chapter sections (2026-09-09): "Chapter 1: title", the words,
   and a photograph beside them; the photograph swaps sides each chapter.
   -------------------------------------------------------------------------- */
body.is-daniel .dan__storyhead { max-width: 1040px; }
body.is-daniel .dan__sec {
  width: min(100%, 1040px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
  background: rgba(6,9,20,.42);
  border: 1px solid rgba(246,235,223,.14);
  border-radius: 6px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.is-daniel .dan__sec + .dan__sec { margin-top: clamp(1.8rem, 4.5vh, 3rem); }
body.is-daniel .dan__sec--flip .dan__sectext { order: 2; }
body.is-daniel .dan__sec--flip .dan__secphoto { order: 1; }
body.is-daniel .dan__sectext {
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 3.6vw, 3rem) clamp(2.2rem, 4vw, 3.2rem);
  min-width: 0;
}
body.is-daniel .dan__sectext .dan__ch {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--d-ink);
  margin: 0 0 1.3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(246,235,223,.14);
}
body.is-daniel .dan__chnum { color: var(--d-gold); font-weight: 300; margin-right: .15em; }
body.is-daniel .dan__sectext p {
  margin: 0 0 1.25em;
  font-family: var(--body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.8;
  color: var(--d-ink);
}
body.is-daniel .dan__sectext p:last-child { margin-bottom: 0; }
body.is-daniel .dan__sectext .dan__song { color: var(--d-gold); font-style: italic; }
body.is-daniel .dan__secphoto {
  margin: 0;
  position: relative;
  min-height: 320px;
}
body.is-daniel .dan__secphoto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: sepia(.14) saturate(.94) contrast(.97);
}
body.is-daniel .dan__story .strip { margin-top: clamp(2.6rem, 7vh, 4.5rem); }
body.is-daniel .dan__story .strip + .dan__sec { margin-top: clamp(2.6rem, 7vh, 4.5rem); }
@media (max-width: 820px) {
  body.is-daniel .dan__sec { grid-template-columns: 1fr; }
  body.is-daniel .dan__sec--flip .dan__sectext { order: 1; }
  body.is-daniel .dan__sec--flip .dan__secphoto { order: 2; }
  body.is-daniel .dan__secphoto { min-height: 0; aspect-ratio: 4 / 3; }
}

/* the close: Dan's symbol, the hand-drawn rings, in place of the compass (2026-09-09) */
body.is-daniel .dan__rings {
  display: block;
  width: clamp(170px, 24vw, 260px);
  height: auto;
  margin: 0 auto 2.4rem;
  color: var(--d-ink);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}

/* the chapter photograph keeps its frame and rides alongside long chapters */
@media (min-width: 821px) {
  body.is-daniel .dan__sec { align-items: start; }
  body.is-daniel .dan__secphoto {
    position: sticky;
    top: 4.5rem;
    min-height: 0;
    aspect-ratio: 4 / 3;
    align-self: start;
    margin: clamp(1.2rem, 2.4vw, 2rem);
    border-radius: 4px;
    overflow: hidden;
  }
}

/* wider chapters, so the text runs shorter (2026-09-09) */
body.is-daniel .dan__story { padding-left: clamp(1rem, 3vw, 2.5rem); padding-right: clamp(1rem, 3vw, 2.5rem); }
body.is-daniel .dan__storyhead { max-width: 1320px; }
body.is-daniel .dan__sec { width: min(100%, 1320px); grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
body.is-daniel .dan__sectext { padding: clamp(2rem, 3.5vw, 3rem) clamp(1.6rem, 3.6vw, 3.4rem) clamp(2.2rem, 3.5vw, 3rem); }
body.is-daniel .dan__sectext p { max-width: none; font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.75; }

/* photos back to the full height of the section (her call); the panels stay wide */
@media (min-width: 821px) {
  body.is-daniel .dan__sec { align-items: stretch; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  body.is-daniel .dan__secphoto {
    position: relative;
    top: auto;
    aspect-ratio: auto;
    align-self: stretch;
    margin: 0;
    border-radius: 0;
    min-height: 320px;
  }
}

/* the close on Daniel: the gold dust rings from Inner Ceremonies, behind the line (2026-09-09) */
body.is-daniel .dan__close {
  position: relative;
  min-height: min(70vh, 40rem);
  display: grid;
  place-items: center;
  isolation: isolate;
}
body.is-daniel .dan__close .rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, 38rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
body.is-daniel .dan__close .rings__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .7;
  filter: brightness(1.15) saturate(1.05);
  animation: rings-turn 140s linear infinite;
}
body.is-daniel .dan__close .rings__ring:nth-child(1) { --s: 1; }
body.is-daniel .dan__close .rings__ring:nth-child(2) { --s: .76; animation: rings-turn-back 110s linear infinite; opacity: .72; }
body.is-daniel .dan__close .rings__ring:nth-child(3) { --s: .54; animation: rings-turn 85s linear infinite; opacity: .76; }
body.is-daniel .dan__close .rings__ring:nth-child(4) { --s: .34; animation: rings-turn-back 60s linear infinite; opacity: .8; }
body.is-daniel .dan__closing { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { body.is-daniel .dan__close .rings__ring { animation: none; } }

/* --------------------------------------------------------------------------
   Cards of the Cosmos (2026-09-09): a light band on the night. The objects
   sit in a row with air between them, and beneath them one rectangular
   outlined button. The email field appears when it is pressed.
   -------------------------------------------------------------------------- */
body.is-daniel .cosmos {
  position: relative;
  z-index: 1;
  background: #f7f4ee;
  color: #1e1a17;
  padding: clamp(4rem, 10vh, 7rem) clamp(1.2rem, 4vw, 3rem) clamp(4.5rem, 11vh, 8rem);
}
body.is-daniel .cosmos__inner { width: min(100%, 1200px); margin: 0 auto; text-align: center; }
body.is-daniel .cosmos__head { max-width: 640px; margin: 0 auto clamp(2.5rem, 6vh, 4rem); }
body.is-daniel .cosmos .eyebrow { color: rgba(30,26,23,.62); justify-content: center; }
body.is-daniel .cosmos .eyebrow::before { background: #b9852f; }
body.is-daniel .cosmos__h2 { color: #1e1a17; }
body.is-daniel .cosmos__p {
  font-family: var(--body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  color: #1e1a17;
  margin: 0;
}
body.is-daniel .cosmos__row {
  list-style: none;
  margin: 0 auto clamp(3rem, 8vh, 5rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 6vw, 6rem);
  align-items: center;
  width: min(100%, 1000px);
}
body.is-daniel .cosmos__obj { display: grid; place-items: center; }
body.is-daniel .cosmos__card {
  width: min(100%, 220px);
  height: auto;
  color: #2a2420;
  fill: none;
  stroke: currentColor;
  stroke-width: .9;
  filter: drop-shadow(0 18px 30px rgba(30,26,23,.14));
}
body.is-daniel .cosmos__obj:nth-child(1) .cosmos__card { transform: rotate(-3deg); }
body.is-daniel .cosmos__obj:nth-child(3) .cosmos__card { transform: rotate(2.5deg); }
body.is-daniel .cosmos__act { display: grid; place-items: center; }
body.is-daniel .cosmos__btn {
  display: inline-block;
  min-width: min(100%, 590px);
  padding: 1.5rem 2.5rem;
  border: 1px solid #1e1a17;
  border-radius: 0;
  background: transparent;
  color: #1e1a17;
  font-family: var(--body);
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
body.is-daniel .cosmos__btn:hover,
body.is-daniel .cosmos__btn:focus-visible { background: #1e1a17; color: #f7f4ee; outline: none; }
body.is-daniel .cosmos__form { width: min(100%, 590px); text-align: left; }
body.is-daniel .cosmos__form .dan__label { color: rgba(30,26,23,.62); }
body.is-daniel .cosmos__form .dan__input {
  color: #1e1a17;
  background: #fff;
  border: 1px solid #1e1a17;
  border-radius: 0;
}
body.is-daniel .cosmos__form .dan__input::placeholder { color: rgba(30,26,23,.4); }
body.is-daniel .cosmos__form .dan__input:focus-visible { box-shadow: 0 0 0 3px rgba(30,26,23,.12); border-color: #1e1a17; }
body.is-daniel .cosmos__btn--send { min-width: 0; padding: .9rem 1.8rem; }
body.is-daniel .cosmos__form .dan__note { color: rgba(30,26,23,.7); }
@media (max-width: 720px) {
  body.is-daniel .cosmos__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  body.is-daniel .cosmos__btn { padding: 1.2rem 1.5rem; }
}

/* the opener steps aside once the field is open */
body.is-daniel .cosmos__btn[hidden] { display: none; }

/* the real cards, and a much smaller section (2026-09-09) */
body.is-daniel .cosmos { padding: clamp(2.6rem, 6vh, 4rem) clamp(1.2rem, 4vw, 3rem) clamp(3rem, 7vh, 4.5rem); }
body.is-daniel .cosmos__head { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); }
body.is-daniel .cosmos__h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .8rem; }
body.is-daniel .cosmos__p { font-size: clamp(.95rem, 1.1vw, 1.02rem); }
body.is-daniel .cosmos__row { width: min(100%, 640px); gap: clamp(1rem, 3vw, 2.4rem); margin-bottom: clamp(1.8rem, 5vh, 3rem); }
body.is-daniel .cosmos__img {
  display: block;
  width: min(100%, 150px);
  height: auto;
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(30,26,23,.18), 0 0 0 1px rgba(30,26,23,.08);
  /* the tilt lives in --rot now, so the drag can add its own translate
     without throwing the card straight (2026-10-05) */
  --dx: 0px; --dy: 0px; --rot: 0deg;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  cursor: grab;
  touch-action: none;                /* the card takes the drag, not the page */
  -webkit-user-drag: none;
  user-select: none;
  position: relative;
  z-index: 1;
}
body.is-daniel .cosmos__obj:nth-child(1) .cosmos__img { --rot: -3deg; }
body.is-daniel .cosmos__obj:nth-child(3) .cosmos__img { --rot: 2.5deg; }
/* picked up: lifted off the table and above its neighbours */
body.is-daniel .cosmos__img.is-drag {
  cursor: grabbing;
  box-shadow: 0 26px 48px rgba(30,26,23,.3), 0 0 0 1px rgba(30,26,23,.1);
}
body.is-daniel .cosmos__btn { min-width: min(100%, 360px); padding: 1rem 2rem; font-size: clamp(.82rem, 1vw, .95rem); }
body.is-daniel .cosmos__form { width: min(100%, 420px); }

/* the rings at the close, a size down (2026-09-09) */
body.is-daniel .dan__close .rings { width: min(58vw, 26rem); }
body.is-daniel .dan__close { min-height: min(60vh, 34rem); }

/* ==========================================================================
   DANIEL, the storybook pass (2026-09-09 evening, from her brief). The same
   chapter spreads; every other one turns to warm paper. Chapter markers in
   words, a folio in the corner, a thin inner rule, a caption under each
   plate, photo mounts on the paper pages. Restrained.
   ========================================================================== */
body.is-daniel {
  --pg-paper: #f3e8d9;
  --pg-paper-2: #ebdccb;
  --pg-ink: #2b2019;
  --pg-ink-soft: rgba(43,32,25,.66);
  --pg-rule: rgba(43,32,25,.22);
  --pg-gold: #b07f2b;
}
/* the story title, clear, with a small ornamental rule under it */
body.is-daniel .dan__storyhead .dan__h2 { color: #fbf3ea; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
body.is-daniel .dan__rule {
  display: block;
  width: 7rem;
  height: 1px;
  margin: 1.4rem 0 0;
  background: var(--d-gold);
  position: relative;
}
body.is-daniel .dan__rule::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--d-gold);
}

/* chapter marker, in words, tiny; the title carries the number too */
body.is-daniel .dan__marker {
  margin: 0 0 .8rem !important;
  font-family: var(--mono) !important;
  font-size: .64rem !important;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--d-gold);
  line-height: 1 !important;
}
body.is-daniel .dan__sectext .dan__ch { font-size: clamp(1.4rem, 2vw, 1.85rem); }
body.is-daniel .dan__chnum { font-weight: 300; }

/* the text side: a thin inner rule a finger's width in, the folio in the corner */
body.is-daniel .dan__sectext { position: relative; }
body.is-daniel .dan__sectext::before {
  content: "";
  position: absolute;
  inset: .85rem;
  border: 1px solid rgba(246,235,223,.10);
  pointer-events: none;
}
body.is-daniel .dan__folio {
  position: absolute;
  right: 1.5rem;
  bottom: 1.1rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: rgba(246,235,223,.5);
}
body.is-daniel .dan__folio::before { content: attr(data-folio); }
body.is-daniel .dan__sec[data-folio="1"] .dan__folio::before { content: "1"; }
body.is-daniel .dan__sec[data-folio="2"] .dan__folio::before { content: "2"; }
body.is-daniel .dan__sec[data-folio="3"] .dan__folio::before { content: "3"; }
body.is-daniel .dan__sec[data-folio="4"] .dan__folio::before { content: "4"; }
body.is-daniel .dan__sec[data-folio="5"] .dan__folio::before { content: "5"; }
body.is-daniel .dan__sec[data-folio="6"] .dan__folio::before { content: "6"; }
body.is-daniel .dan__sec[data-folio="7"] .dan__folio::before { content: "7"; }
body.is-daniel .dan__sectext { padding-bottom: clamp(3rem, 4.5vw, 3.8rem); }

/* the plate: a caption beneath every photograph */
body.is-daniel .dan__secphoto { display: flex; flex-direction: column; }
body.is-daniel .dan__secphoto img { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
body.is-daniel .dan__caption {
  flex: none;
  padding: .7rem 1.2rem .8rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(246,235,223,.62);
  background: rgba(6,9,20,.5);
}

/* every other chapter is a paper page: warm, readable, the photograph mounted */
body.is-daniel .dan__sec--paper {
  background: var(--pg-paper);
  border-color: rgba(43,32,25,.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  color: var(--pg-ink);
}
body.is-daniel .dan__sec--paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .09;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
body.is-daniel .dan__sec--paper > * { position: relative; z-index: 1; }
body.is-daniel .dan__sec--paper .dan__sectext .dan__ch,
body.is-daniel .dan__sec--paper .dan__sectext p { color: var(--pg-ink); }
body.is-daniel .dan__sec--paper .dan__sectext .dan__ch { border-bottom-color: var(--pg-rule); }
body.is-daniel .dan__sec--paper .dan__marker,
body.is-daniel .dan__sec--paper .dan__chnum,
body.is-daniel .dan__sec--paper .dan__song { color: var(--pg-gold); }
body.is-daniel .dan__sec--paper .dan__sectext::before { border-color: var(--pg-rule); }
body.is-daniel .dan__sec--paper .dan__folio { color: var(--pg-ink-soft); }
/* the mounted plate: room around it, corners holding it */
body.is-daniel .dan__sec--paper .dan__secphoto {
  background: var(--pg-paper-2);
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  justify-content: center;
}
body.is-daniel .dan__sec--paper .dan__secphoto img {
  flex: 0 1 auto;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  box-shadow: 0 12px 30px rgba(43,32,25,.22);
  filter: sepia(.1) saturate(.96);
}
body.is-daniel .dan__sec--paper .dan__caption { background: none; color: var(--pg-ink-soft); padding-bottom: 0; }
/* four corners on the mount */
body.is-daniel .dan__sec--paper .dan__secphoto { --c: 14px; }
body.is-daniel .dan__sec--paper .dan__secphoto::before,
body.is-daniel .dan__sec--paper .dan__secphoto::after {
  content: "";
  position: absolute;
  width: var(--c); height: var(--c);
  background: var(--pg-ink);
  opacity: .55;
  z-index: 2;
}
body.is-daniel .dan__sec--paper .dan__secphoto::before { left: calc(clamp(1.6rem, 3.4vw, 2.8rem) - 4px); top: 0; clip-path: polygon(0 0, 100% 0, 0 100%); top: calc(50% - var(--mount-h, 0px)); }
/* keep the corners simple: two, top-left and bottom-right of the plate */
body.is-daniel .dan__sec--paper .dan__secphoto::before { top: calc(clamp(1.6rem, 3.4vw, 2.8rem) - 4px); }
body.is-daniel .dan__sec--paper .dan__secphoto::after { right: calc(clamp(1.6rem, 3.4vw, 2.8rem) - 4px); bottom: calc(clamp(1.6rem, 3.4vw, 2.8rem) + 1.9rem); clip-path: polygon(100% 100%, 100% 0, 0 100%); }

@media (max-width: 820px) {
  body.is-daniel .dan__secphoto { aspect-ratio: auto; }
  body.is-daniel .dan__secphoto img { aspect-ratio: 4 / 3; height: auto; }
}

/* --------------------------------------------------------------------------
   Storybook refinements (2026-09-09): more paper in every section, four true
   photo corners on each plate, the doubled chapter marker gone.
   -------------------------------------------------------------------------- */
body.is-daniel .grain { opacity: .28; }
/* paper fibre on every chapter: faint on the night pages, fuller on the paper ones */
body.is-daniel .dan__sec { position: relative; }
body.is-daniel .dan__sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
body.is-daniel .dan__sec > * { position: relative; z-index: 1; }
body.is-daniel .dan__sec--paper {
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, rgba(255,250,242,.55) 0%, rgba(255,250,242,0) 70%),
    linear-gradient(180deg, #f5ebdd 0%, #efe2d1 100%);
}
body.is-daniel .dan__sec--paper::before {
  opacity: .2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .09' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E");
}
body.is-daniel .dan__sec--paper .dan__secphoto { background: rgba(43,32,25,.05); }

/* the old two corners come off; the mount carries four */
body.is-daniel .dan__sec--paper .dan__secphoto::before,
body.is-daniel .dan__sec--paper .dan__secphoto::after { content: none; }
body.is-daniel .dan__mount {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
body.is-daniel .dan__mount img { width: 100%; height: 100%; object-fit: cover; flex: 1 1 auto; }
body.is-daniel .dan__sec--paper .dan__mount { flex: 0 1 auto; }
body.is-daniel .dan__sec--paper .dan__mount img { height: auto; aspect-ratio: 4 / 3; }
body.is-daniel .dan__mount::before,
body.is-daniel .dan__mount::after,
body.is-daniel .dan__mountc::before,
body.is-daniel .dan__mountc::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  z-index: 3;
  background: #1c1512;
  opacity: .78;
  pointer-events: none;
}
body.is-daniel .dan__mount::before  { left: -2px; top: -2px;    clip-path: polygon(0 0, 100% 0, 0 100%); }
body.is-daniel .dan__mount::after   { right: -2px; top: -2px;   clip-path: polygon(0 0, 100% 0, 100% 100%); }
body.is-daniel .dan__mountc::before { left: -2px; bottom: -2px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
body.is-daniel .dan__mountc::after  { right: -2px; bottom: -2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
body.is-daniel .dan__mountc { position: absolute; inset: 0; pointer-events: none; }
/* on the night pages the corners read in cream, like the paper ones read in ink */
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mount::before,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mount::after,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mountc::before,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mountc::after { background: #efe3d3; opacity: .9; }

/* --------------------------------------------------------------------------
   Polaroids (2026-09-09): every plate is a polaroid, white frame, the deeper
   foot carrying the caption, a small tilt, held to the page by four corners.
   -------------------------------------------------------------------------- */
body.is-daniel .dan__secphoto {
  display: grid;
  place-items: center;
  padding: clamp(1.6rem, 3.4vw, 3rem);
  background: rgba(6,9,20,.28);
}
body.is-daniel .dan__sec--paper .dan__secphoto { background: rgba(43,32,25,.05); padding: clamp(1.6rem, 3.4vw, 3rem); }
body.is-daniel .dan__mount {
  display: block;
  flex: none;
  width: min(100%, 420px);
  padding: 5.5% 5.5% 15%;
  background: linear-gradient(180deg, #fbf8f2 0%, #f3eee5 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.6) inset;
  transform: rotate(-1.6deg);
}
body.is-daniel .dan__sec--flip .dan__mount { transform: rotate(1.4deg); }
body.is-daniel .dan__sec--paper .dan__mount { box-shadow: 0 14px 30px rgba(43,32,25,.22), 0 1px 0 rgba(255,255,255,.7) inset; }
body.is-daniel .dan__mount img,
body.is-daniel .dan__sec--paper .dan__mount img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 40%;
  filter: sepia(.12) saturate(.96) contrast(.98);
}
body.is-daniel .dan__caption,
body.is-daniel .dan__sec--paper .dan__caption {
  position: absolute;
  left: 5.5%; right: 5.5%;
  bottom: 5.2%;
  padding: 0;
  background: none;
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(.9rem, 1vw, 1rem);
  letter-spacing: 0;
  text-transform: none;
  color: rgba(43,32,25,.72);
  text-align: center;
}
/* the corners hold the polaroid, not the photograph */
body.is-daniel .dan__mount::before,
body.is-daniel .dan__mount::after,
body.is-daniel .dan__mountc::before,
body.is-daniel .dan__mountc::after { width: 26px; height: 26px; }
body.is-daniel .dan__mount::before  { left: -3px; top: -3px; }
body.is-daniel .dan__mount::after   { right: -3px; top: -3px; }
body.is-daniel .dan__mountc::before { left: -3px; bottom: -3px; }
body.is-daniel .dan__mountc::after  { right: -3px; bottom: -3px; }
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mount::before,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mount::after,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mountc::before,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mountc::after { background: #d9c9b3; opacity: .95; }
body.is-daniel .dan__sec--paper .dan__mount::before,
body.is-daniel .dan__sec--paper .dan__mount::after,
body.is-daniel .dan__sec--paper .dan__mountc::before,
body.is-daniel .dan__sec--paper .dan__mountc::after { background: #2b2019; opacity: .8; }
@media (max-width: 820px) {
  body.is-daniel .dan__secphoto { aspect-ratio: auto; }
  body.is-daniel .dan__mount { width: min(100%, 340px); }
}

/* the strip moves faster (2026-09-09) */
body.is-daniel .strip__frame { transition-duration: 1.1s; }
body.is-daniel .strip__progress i { transition-duration: 1.1s; }

/* chapter titles in the script (2026-09-09) */
body.is-daniel .dan__sectext .dan__ch {
  font-family: var(--hand);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: 0;
  padding-bottom: .8rem;
}
body.is-daniel .dan__chnum { font-weight: 400; margin-right: .25em; }

/* ==========================================================================
   The chapters as a pinned deck (2026-09-09): STACK. The next card rises over
   the one you are reading; the covered card sinks a step. Each card is the
   whole chapter, words and polaroid together. Narrow screens and reduced
   motion get the plain stacked column (deck.is-static).
   ========================================================================== */
body.is-daniel .deck { position: relative; }
body.is-daniel .deck__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
body.is-daniel .deck__stage .dan__sec {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100% - 2rem, 1320px);
  max-height: calc(100svh - 7rem);
  margin: 0;
  z-index: calc(1 + var(--i, 0));
  transform:
    translate(-50%, -50%)
    translateY(calc((1 - var(--e, 1)) * 115vh))
    scale(calc(1 - var(--x, 0) * .06));
  filter: brightness(calc(1 - var(--x, 0) * .10));
  will-change: transform;
  box-shadow: 0 -20px 60px rgba(0,0,0,.35);
}
/* a tall chapter scrolls inside its own card rather than past the stage */
body.is-daniel .deck__stage .dan__sec { display: grid; grid-template-rows: minmax(0, 1fr); }
body.is-daniel .deck__stage .dan__sectext { overflow: auto; min-height: 0; max-height: calc(100svh - 7rem); scrollbar-width: thin; }
body.is-daniel .deck__stage .dan__secphoto { max-height: calc(100svh - 7rem); }
/* the plain column */
body.is-daniel .deck.is-static .deck__stage { position: static; height: auto; overflow: visible; }
body.is-daniel .deck.is-static .dan__sec { position: relative; left: auto; top: auto; transform: none; filter: none; max-height: none; width: min(100%, 1320px); margin: 0 auto; display: grid; grid-template-rows: none; box-shadow: none; }
body.is-daniel .deck.is-static .dan__sec + .dan__sec { margin-top: clamp(1.8rem, 4.5vh, 3rem); }
body.is-daniel .deck.is-static .dan__sectext { overflow: visible; max-height: none; }
body.is-daniel .dan__story .strip { margin-top: clamp(2rem, 6vh, 4rem); }

/* the title: only "Chapter One:" in the gold script; the rest in Archivo */
body.is-daniel .dan__sectext .dan__ch {
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  display: flex;
  align-items: baseline;
  gap: .5em;
  flex-wrap: wrap;
}
body.is-daniel .dan__chnum {
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.45em;
  line-height: 1;
  color: var(--d-gold);
  margin: 0;
}
body.is-daniel .dan__sec--paper .dan__chnum { color: var(--pg-gold); }

/* the polaroid: thin white on three sides, the photograph bigger (2026-09-09) */
body.is-daniel .dan__mount { padding: 3% 3% 14%; width: min(100%, 480px); }
body.is-daniel .dan__caption, body.is-daniel .dan__sec--paper .dan__caption { left: 3%; right: 3%; bottom: 4.6%; }

/* the night cards are opaque now: nothing beneath shows through (2026-09-09) */
body.is-daniel .dan__sec:not(.dan__sec--paper) {
  background: linear-gradient(160deg, #141a30 0%, #0f142a 55%, #131627 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(246,235,223,.16);
}
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__secphoto { background: rgba(0,0,0,.18); }

/* the photo corners in gold: one flat colour, no gradient (2026-10-05) */
body.is-daniel .dan__mount::before,
body.is-daniel .dan__mount::after,
body.is-daniel .dan__mountc::before,
body.is-daniel .dan__mountc::after,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mount::before,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mount::after,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mountc::before,
body.is-daniel .dan__sec:not(.dan__sec--paper) .dan__mountc::after,
body.is-daniel .dan__sec--paper .dan__mount::before,
body.is-daniel .dan__sec--paper .dan__mount::after,
body.is-daniel .dan__sec--paper .dan__mountc::before,
body.is-daniel .dan__sec--paper .dan__mountc::after {
  opacity: 1;
  background: var(--gold);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* the opening settles straight into the story: no gap under the hero (2026-09-09) */
body.is-daniel .dan__story { padding-top: clamp(2rem, 5vh, 3.2rem); }
body.is-daniel .dan__storyhead { margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem); }

/* "Erin Northcott, Producer" is a credit, not a flourish: Archivo, stated (2026-09-09) */
.erin__title {
  font-family: var(--body);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  white-space: nowrap;
}
@media (max-width: 560px) { .erin__title { white-space: normal; } }

/* "Have a creative idea?" and the Connect welcome: Archivo, one line (2026-09-09) */
.collab__inner .section__title,
.connect__inner .section__title,
body:not(.is-ceremony) h1.section__title {
  font-family: var(--body);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .collab__inner .section__title,
  .connect__inner .section__title,
  body:not(.is-ceremony) h1.section__title { white-space: normal; }
}

/* the orb on the Daniel page: one warm orange lamp, screened onto the night (2026-09-09) */
body.is-daniel .lamp--warm {
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,150,60,.55) 0%, rgba(255,120,50,.32) 22%, rgba(230,90,40,.14) 45%, rgba(230,90,40,0) 70%);
  filter: blur(18px);
}
body.is-daniel .lamp--warm.is-lit { opacity: .9; }
body.is-daniel .dan__pact .dan__hero { z-index: -2; }

/* --------------------------------------------------------------------------
   Deck cards, one clean rule (2026-09-09, after the Living Room went wrong):
   every card keeps the balanced split; the polaroid scales with the window's
   height so it is never crushed; the two long chapters fit through tighter
   leading, not a smaller photo. Short windows do not pin at all (stack.js).
   -------------------------------------------------------------------------- */
body.is-daniel .deck__stage .dan__sec { max-height: calc(100svh - 4rem); }
body.is-daniel .deck__stage .dan__sectext,
body.is-daniel .deck__stage .dan__secphoto { max-height: calc(100svh - 4rem); }
body.is-daniel .deck__stage .dan__sec,
body.is-daniel .deck__stage .dan__sec--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
body.is-daniel .deck__stage .dan__sec--flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
body.is-daniel .deck__stage .dan__mount { width: min(100%, 520px, calc((100svh - 4rem) * .74)); }
body.is-daniel .deck__stage .dan__mount img { max-height: none; height: auto; }
/* 2026-10-09: Four and Five join Six here. Her Oct 9 copy made them longer,
   and a deck card can never be taller than the screen it is pinned to, so
   the text had begun scrolling inside its own card with the inner rule
   sliding up through the words. The compaction Six already used closes it. */
body.is-daniel .deck__stage .dan__sec[data-folio="4"] .dan__sectext,
body.is-daniel .deck__stage .dan__sec[data-folio="5"] .dan__sectext,
body.is-daniel .deck__stage .dan__sec[data-folio="6"] .dan__sectext { padding-top: clamp(1.4rem, 2.6vw, 2.2rem); padding-bottom: clamp(2.2rem, 3vw, 2.8rem); }
body.is-daniel .deck__stage .dan__sec[data-folio="4"] .dan__sectext p,
body.is-daniel .deck__stage .dan__sec[data-folio="5"] .dan__sectext p,
body.is-daniel .deck__stage .dan__sec[data-folio="6"] .dan__sectext p { line-height: 1.66; font-size: clamp(.98rem, 1.12vw, 1.06rem); }

/* Between the static column (<=820px) and a comfortable desktop the text
   column is at its narrowest while the card is still a full screen, which is
   where the long chapters run out of room. A touch more compaction just in
   that band; above it nothing changes. */
@media (min-width: 821px) and (max-width: 1200px) {
  body.is-daniel .deck__stage .dan__sec[data-folio="4"] .dan__sectext p,
  body.is-daniel .deck__stage .dan__sec[data-folio="5"] .dan__sectext p,
  body.is-daniel .deck__stage .dan__sec[data-folio="6"] .dan__sectext p,
  body.is-daniel .deck__stage .dan__sec[data-folio="7"] .dan__sectext p { line-height: 1.52; font-size: .95rem; }
  body.is-daniel .deck__stage .dan__sec[data-folio="4"] .dan__sectext p { margin-bottom: .7em; }
}

/* every deck card the same height, the tallest one's (2026-09-09) */
body.is-daniel .deck__stage .dan__sec { height: calc(100svh - 4rem); }

/* the plain column sizes itself; the script then evens the cards up */
body.is-daniel .deck.is-static .dan__sec { height: auto; }

/* the Inner Ceremonies teaser's one line (2026-09-09) */
.becoming__line {
  margin: 1.3rem 0 0;
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.4;
  color: #fff7ea;
}
#sunset .becoming__line { color: #000; }

/* --------------------------------------------------------------------------
   TRIAL (2026-09-09): Instrument Serif on the homepage titles, in place of the
   script where it felt whimsical. Scoped to body.try-instrument so it comes
   off with one class if she says no.
   -------------------------------------------------------------------------- */
body.try-instrument {
  --display: 'Instrument Serif', 'Times New Roman', serif;
}
body.try-instrument .section__title {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3rem, 6.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}
body.try-instrument .erin__title,
body.try-instrument .collab__inner .section__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  letter-spacing: -.015em;
  line-height: 1.05;
}
body.try-instrument .becoming__text .section__title { font-size: clamp(2.8rem, 5.2vw, 4.6rem); }
body.try-instrument .becoming__line {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}
body.try-instrument .hook__hand {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.8rem, 5vw, 3.4rem);
}

/* refinements to the trial (2026-09-09): the dying-wish line in Archivo, the
   Inner Ceremonies title in the italic, the teaser line held to one line */
body.try-instrument .hook__line {
  font-family: var(--body);
  font-style: normal;
  font-weight: 300;
}
body.try-instrument .becoming__text .section__title { font-style: italic; }
body.try-instrument .becoming__line { white-space: nowrap; font-size: clamp(1.15rem, 1.5vw, 1.45rem); }
@media (max-width: 720px) { body.try-instrument .becoming__line { white-space: normal; } }

/* --------------------------------------------------------------------------
   Instrument Serif on Inner Ceremonies and Daniel (2026-09-09), same logic as
   the homepage trial: section titles in the roman, the page's own title in
   the italic; body, labels and the closing lines untouched.
   -------------------------------------------------------------------------- */
/* Inner Ceremonies */
body.is-ceremony.try-instrument .temple__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.02;
}
body.is-ceremony.try-instrument .temple__eyebrow,
body.is-ceremony.try-instrument .temple__band .temple__eyebrow,
body.is-ceremony.try-instrument .temple__guidetext .temple__eyebrow {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.06;
}
body.is-ceremony.try-instrument .pillar__name {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  letter-spacing: -.01em;
}
body.is-ceremony.try-instrument .pillar__face--back .pillar__name { font-size: 1.6rem; }
/* Daniel */
body.is-daniel.try-instrument .dan__h2,
body.is-daniel.try-instrument .cosmos__h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.05;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}
body.is-daniel.try-instrument .dan__pactline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
}
body.is-daniel.try-instrument .dan__chnum {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.25em;
}
body.is-daniel.try-instrument .dan__sectext .dan__ch { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 2.4vw, 2.2rem); letter-spacing: -.01em; }

/* Daniel's closing line in the script, like the homepage's (2026-09-09) */
body.is-daniel .dan__closing,
body.is-daniel.try-instrument .dan__closing {
  font-family: var(--hand);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  letter-spacing: 0;
  line-height: 1.15;
}

/* the story's line under its title (2026-09-09) */
body.is-daniel .dan__sub {
  margin: .4rem 0 0;
  font-family: var(--display, var(--body));
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.3;
  color: var(--d-gold);
}
body.is-daniel .dan__storyhead .dan__rule { margin-top: 1.2rem; }

/* the pact line: bigger, and lower, nearer the middle of the frame (2026-09-09) */
body.is-daniel .dan__pact { padding-top: clamp(9rem, 34svh, 20rem); }
body.is-daniel.try-instrument .dan__pactline,
body.is-daniel .dan__pactline { font-size: clamp(2.6rem, 6.6vw, 5.6rem); }
body.is-daniel .dan__pact::after {
  background:
    radial-gradient(ellipse 72% 36% at 50% 40%, rgba(20,14,10,.4) 0%, rgba(20,14,10,0) 100%),
    linear-gradient(180deg, rgba(10,12,24,.4) 0%, rgba(10,12,24,0) 34%, rgba(10,12,24,0) 78%, rgba(10,12,24,.55) 100%);
}
@media (max-width: 720px) { body.is-daniel .dan__pact { padding-top: clamp(7rem, 28svh, 12rem); } }

/* the photograph sits a touch lower in the frame; the line hangs just above their heads */
body.is-daniel .dan__hero { object-position: 55% 66%; }
body.is-daniel .dan__pact { padding-top: clamp(8rem, 27svh, 16rem); }
@media (max-width: 720px) { body.is-daniel .dan__hero { object-position: 42% 62%; } body.is-daniel .dan__pact { padding-top: clamp(6rem, 22svh, 10rem); } }

/* arrows at either edge of the strip (2026-09-09) */
body.is-daniel .strip__arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 3.1rem;
  height: 3.1rem;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(246,235,223,.55);
  border-radius: 50%;
  background: rgba(8,10,20,.45);
  color: #f6ebdf;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
body.is-daniel .strip__arrow--prev { left: clamp(3.4rem, 4.5vw, 4.4rem); }
body.is-daniel .strip__arrow--next { right: clamp(3.4rem, 4.5vw, 4.4rem); }
body.is-daniel .strip__arrow svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.is-daniel .strip__arrow:hover,
body.is-daniel .strip__arrow:focus-visible { background: rgba(246,235,223,.92); border-color: #f6ebdf; color: #0b1020; outline: none; }
body.is-daniel .strip__arrow:active { transform: translateY(-50%) scale(.94); }
@media (max-width: 720px) {
  body.is-daniel .strip__arrow { width: 2.6rem; height: 2.6rem; }
  body.is-daniel .strip__arrow--prev { left: 2.6rem; }
  body.is-daniel .strip__arrow--next { right: 2.6rem; }
}

/* the pact line: a size down, a little lower (2026-09-09) */
body.is-daniel.try-instrument .dan__pactline,
body.is-daniel .dan__pactline { font-size: clamp(2.3rem, 5.6vw, 4.8rem); }
body.is-daniel .dan__pact { padding-top: clamp(9rem, 32svh, 18rem); }

/* the pull line on Inner Ceremonies: smaller, in the italic (2026-09-09) */
body.is-ceremony.try-instrument .temple__band--work .temple__pull,
body.is-ceremony.try-instrument .temple__pull {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.35;
  letter-spacing: 0;
}

/* the closing line's caret takes the line's own gold (2026-09-09) */
body.is-daniel .dan__closing .dan__caret { background: currentColor; height: .8em; width: .05em; }
body.is-daniel .dan__closing { min-height: 1.15em; }

/* the Connect welcome in Instrument Serif (2026-09-09) */
body.try-instrument .connect__inner .section__title,
body.try-instrument h1.section__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.8vw, 4.2rem);
  letter-spacing: -.015em;
  line-height: 1.05;
}

/* the wordmark, nav and footer: Archivo at regular weight, not bold (2026-09-09) */
.nav__name,
.footer__name,
body.is-ceremony .nav__name,
body.is-ceremony .footer__name,
body.is-daniel .nav__name,
body.is-daniel .footer__name {
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: .18em;
}

/* "Scroll to enter" under the arch, in the small mono; it goes as you pass through (2026-09-09) */
body.is-ceremony .arch__hint {
  position: absolute;
  left: 50%;
  top: calc(50% + 23vh + 2.4rem);
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
  white-space: nowrap;
  opacity: calc(1 - min(1, var(--p, 0) * 4));
  animation: arch-hint 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes arch-hint { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(4px); } }
@media (prefers-reduced-motion: reduce) { body.is-ceremony .arch__hint { animation: none; } }
@media (max-width: 720px) { body.is-ceremony .arch__hint { top: auto; bottom: 2rem; } }

/* the hint sits above the wall */
body.is-ceremony .arch__hint { z-index: 6; }

/* no rule above The Film or the cards (2026-09-09) */
body.is-daniel .dan__film, body.is-daniel .dan__cosmos { border-top: 0; }

/* the marquee sits a little lower under The Work (2026-09-09) */
body.is-ceremony .temple__band--drift { margin-top: clamp(-1.2rem, -2vh, -.4rem); padding-top: clamp(1rem, 2.5vh, 1.8rem); }

/* --------------------------------------------------------------------------
   PODCAST (2026-09-09): a splash on the Connect sky until there are episodes.
   -------------------------------------------------------------------------- */
body.is-podcast .connect__inner,
body.is-podcast .podcast__inner { max-width: none; text-align: center; }
body.is-podcast .section--podcast { justify-content: center; }
body.try-instrument.is-podcast .podcast__title {
  font-style: italic;                       /* the page's own title, like the others */
  font-size: clamp(3rem, 7.2vw, 6rem);
  white-space: nowrap;
  margin: 0;
}
body.is-podcast .podcast__inner .eyebrow { margin-bottom: 1.1rem; }

/* ==========================================================================
   TALISMANS (2026-09-09): every primary CTA as a small gilt object. A thin
   warm-gold edge, a parchment fill with a candlelit inner glow, a soft pill,
   a tiny diamond either side of the label. On hover the glow warms, the
   button lifts a hair and a glint travels across it like light on gold foil;
   pressed, it settles back like a small heavy thing. Two grounds only:
   light (default) and dark (--tal-dark). Everything below overrides the
   page-specific button rules above, so it is prefixed with `html body`.
   ========================================================================== */
:root {
  --tal-ink:   #3b2a14;
  --tal-edge:  rgba(201,168,76,.78);
  --tal-edge-hi: #e9c766;
  --tal-fill:  linear-gradient(180deg, rgba(255,247,229,.78), rgba(255,236,204,.62));
  --tal-glow:  rgba(255,214,140,.55);
  --tal-halo:  rgba(233,199,102,.16);
  --tal-sheen: rgba(255,250,236,.95);
}
html body .btn-enter,
html body .connect__send,
html body.is-ceremony .temple__book,
html body.is-temple-light .temple__book,
html body.is-daniel .dan__btn,
html body.is-daniel .dan__btn--fill,
html body.is-daniel .cosmos__btn,
html body .trailer__out {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  color: var(--tal-ink);
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--tal-edge);
  border-radius: 999px;
  background:
    linear-gradient(115deg, transparent 0 38%, var(--tal-sheen) 50%, transparent 62% 100%) no-repeat -220% 0 / 220% 100%,
    var(--tal-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 0 14px var(--tal-glow),
    0 0 0 0 var(--tal-halo),
    0 1px 2px rgba(60,40,15,.08);
  transform: translateY(0);
  transition:
    box-shadow .45s var(--ease), border-color .45s var(--ease),
    color .45s var(--ease), transform .35s var(--ease);
  cursor: pointer;
}
/* the ornaments: a tiny diamond either side, in the edge's gold */
html body .btn-enter::before,  html body .btn-enter::after,
html body .connect__send::before, html body .connect__send::after,
html body.is-ceremony .temple__book::before, html body.is-ceremony .temple__book::after,
html body.is-daniel .dan__btn::before, html body.is-daniel .dan__btn::after,
html body.is-daniel .cosmos__btn::before, html body.is-daniel .cosmos__btn::after,
html body .trailer__out::before, html body .trailer__out::after {
  content: "\25C6";                                 /* ◆ */
  font-size: .62em;
  line-height: 1;
  color: var(--tal-orn, var(--tal-edge-hi));
  opacity: .75;
  transform: translateY(-.05em);
  transition: opacity .45s var(--ease);
}
/* hover: warmer glow, a hair of lift, brighter edge, clearer text, one glint */
html body .btn-enter:hover, html body .btn-enter:focus-visible,
html body .connect__send:hover, html body .connect__send:focus-visible,
html body.is-ceremony .temple__book:hover, html body.is-ceremony .temple__book:focus-visible,
html body.is-temple-light .temple__book:hover, html body.is-temple-light .temple__book:focus-visible,
html body.is-daniel .dan__btn:hover, html body.is-daniel .dan__btn:focus-visible,
html body.is-daniel .dan__btn--fill:hover, html body.is-daniel .dan__btn--fill:focus-visible,
html body.is-daniel .cosmos__btn:hover, html body.is-daniel .cosmos__btn:focus-visible,
html body .trailer__out:hover, html body .trailer__out:focus-visible {
  color: var(--tal-ink);
  border-color: var(--tal-edge-hi);
  background-color: transparent;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    inset 0 0 18px var(--tal-glow),
    0 0 0 5px var(--tal-halo),
    0 3px 8px rgba(60,40,15,.10);
  animation: tal-glint 1.15s var(--ease) 1;
  outline: none;
}
html body .btn-enter:hover::before, html body .btn-enter:hover::after,
html body .connect__send:hover::before, html body .connect__send:hover::after,
html body.is-ceremony .temple__book:hover::before, html body.is-ceremony .temple__book:hover::after,
html body.is-daniel .dan__btn:hover::before, html body.is-daniel .dan__btn:hover::after,
html body.is-daniel .cosmos__btn:hover::before, html body.is-daniel .cosmos__btn:hover::after,
html body .trailer__out:hover::before, html body .trailer__out:hover::after { opacity: 1; }
/* pressed: it settles, the glow gathers inward */
html body .btn-enter:active,
html body .connect__send:active,
html body.is-ceremony .temple__book:active,
html body.is-temple-light .temple__book:active,
html body.is-daniel .dan__btn:active,
html body.is-daniel .dan__btn--fill:active,
html body.is-daniel .cosmos__btn:active,
html body .trailer__out:active {
  transform: translateY(0) scale(.985);
  transition-duration: .12s;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 2px 10px rgba(120,84,30,.22),
    inset 0 0 18px var(--tal-glow),
    0 0 0 3px var(--tal-halo),
    0 0 0 rgba(60,40,15,0);
}
html body .btn-enter:focus-visible,
html body .connect__send:focus-visible,
html body.is-ceremony .temple__book:focus-visible,
html body.is-daniel .dan__btn:focus-visible,
html body.is-daniel .cosmos__btn:focus-visible,
html body .trailer__out:focus-visible { outline: 2px solid var(--tal-edge-hi); outline-offset: 3px; }
/* the glint: the sheen layer crosses once, then rests off the left edge */
@keyframes tal-glint {
  from { background-position: -220% 0, 0 0; }
  to   { background-position:  220% 0, 0 0; }
}

/* the ID rules on the homepage need matching weight */
html body #sunset .btn-enter, html body #sunset .btn-enter:hover, html body #sunset .btn-enter:focus-visible,
html body .film__cta .btn-enter, html body .film__cta .btn-enter:hover { color: var(--tal-ink); border-color: var(--tal-edge); background-color: transparent; }
html body #sunset .btn-enter:hover, html body .film__cta .btn-enter:hover { border-color: var(--tal-edge-hi); }

/* dark grounds: cream ink, a translucent gilt fill, the glow reads as candle */
html body .becoming__text .btn-enter,
html body .collab__inner .btn-enter,
html body.is-daniel .dan__btn,
html body.is-daniel .dan__btn--fill,
html body .trailer__out {
  --tal-ink:   #fff1d6;
  --tal-edge:  rgba(233,199,102,.7);
  --tal-edge-hi: #f3d98a;
  --tal-fill:  linear-gradient(180deg, rgba(255,226,170,.16), rgba(255,206,130,.09));
  --tal-glow:  rgba(255,198,110,.28);
  --tal-halo:  rgba(233,199,102,.13);
  --tal-sheen: rgba(255,240,205,.55);
}
html body .becoming__text .btn-enter:hover, html body .becoming__text .btn-enter:focus-visible,
html body .collab__inner .btn-enter:hover, html body .collab__inner .btn-enter:focus-visible { color: #fffaf0; }

/* per-page tidy-ups */
html body .connect__send { margin-top: .6rem; }
html body .connect__send[disabled] { opacity: .6; cursor: default; }
html body.is-ceremony .temple__book,
html body.is-temple-light .temple__book { --tal-fill: linear-gradient(180deg, rgba(255,236,190,.9), rgba(255,220,140,.72)); --tal-edge: rgba(190,150,60,.85); --tal-orn: #b8862e; }
/* inside the package cards the label must stay on one line */
html body.is-ceremony .depth__cta .temple__book { white-space: nowrap; letter-spacing: .18em; padding: 1rem 1.5rem; gap: .7em; }
html body.is-daniel .dan__btn--fill { --tal-fill: linear-gradient(180deg, rgba(255,226,170,.28), rgba(255,206,130,.18)); }
html body.is-daniel .cosmos__btn { min-width: 0; padding: 1.15rem 2.6rem; font-size: .82rem; }
html body.is-daniel .cosmos__btn--send { padding: .95rem 1.8rem; }
html body .trailer__out { font-size: .66rem; padding: .7rem 1.4rem; letter-spacing: .18em; border-bottom-width: 1px; }

@media (prefers-reduced-motion: reduce) {
  html body .btn-enter, html body .connect__send, html body .temple__book, html body .dan__btn, html body .cosmos__btn, html body .trailer__out {
    transition: box-shadow .3s, border-color .3s, color .3s; animation: none !important; transform: none !important;
  }
}

/* ==========================================================================
   GLINTS (2026-09-09): light catching on memory. A few warm points and hair-
   line streaks placed by glint.js inside the heroes, around the cards and
   the arch (never inside the chapter cards: their children are grid items). Each breathes on its own slow cycle,
   drifts a hair while it is lit, and moves to a fresh spot every time it goes
   dark. Never more than a few lit at once. Off under reduced motion.
   ========================================================================== */
.has-glints--anchor { position: relative; }   /* only hosts that were static */
.glint {
  position: absolute;
  left: var(--g-x, 50%); top: var(--g-y, 50%);
  width: var(--g-size, 3px); height: var(--g-size, 3px);
  margin: calc(var(--g-size, 3px) / -2) 0 0 calc(var(--g-size, 3px) / -2);
  pointer-events: none;
  z-index: 2;
  transform: rotate(var(--g-rot, 0deg));
}
.glint::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,214,.95) 0%, rgba(255,218,150,.7) 30%, rgba(255,200,110,0) 70%);
  opacity: 0;
  animation: glint-breathe var(--g-dur, 10s) ease-in-out var(--g-delay, 0s) infinite;
  will-change: opacity, transform;
}
.glint--line { width: var(--g-len, 16px); height: 1px; margin: 0 0 0 calc(var(--g-len, 16px) / -2); }
.glint--line::before {
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,232,180,0), rgba(255,240,205,.9) 50%, rgba(255,232,180,0));
}
.has-glints.is-resting .glint::before { animation-play-state: paused; }
@keyframes glint-breathe {
  0%        { opacity: 0; transform: translate(0, 0) scale(.55); }
  14%       { opacity: var(--g-max, .6); transform: translate(calc(var(--g-dx, 0px) * .3), calc(var(--g-dy, 0px) * .3)) scale(1); }
  30%       { opacity: var(--g-max, .6); transform: translate(var(--g-dx, 0px), var(--g-dy, 0px)) scale(.9); }
  44%, 100% { opacity: 0; transform: translate(var(--g-dx, 0px), var(--g-dy, 0px)) scale(.55); }
}
/* light grounds want a slightly warmer, firmer fleck to be sensed at all */
body.is-ceremony .glint::before,
.cosmos .glint::before,
.section--podcast .glint::before { --g-max: .75; }
.cosmos .glint::before { background: radial-gradient(circle, rgba(255,240,200,1) 0%, rgba(232,190,110,.8) 30%, rgba(220,170,80,0) 70%); }
@media (prefers-reduced-motion: reduce) { .glint { display: none; } }

/* ==========================================================================
   A NOTE FROM ME (2026-09-09): a short letter under the bio. Same two even
   columns as the bio so the words line up with hers above; the photo of her
   and Ayan sits small at the inner edge of the left column, like a snapshot
   laid beside a letter.
   ========================================================================== */
body.is-ceremony .temple__band--note { padding-block: clamp(2rem, 6vh, 4rem) clamp(4.5rem, 11vh, 7.5rem); }
/* "move the photo to the left, widen the text paragraph" (2026-10-04): the
   grid was two even halves with the photo right-aligned inside the left one,
   which left 146px of dead navy to its left and held the letter to 580px.
   The left column now sizes to the photo itself and the photo sits at the
   start of it, so the letter takes everything that frees up. Photo size,
   tilt and the gap between the two are unchanged. */
body.is-ceremony .temple__note {
  width: min(100% - 5rem, 1240px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  text-align: left;
}
body.is-ceremony .temple__snap {
  margin: 0;
  width: clamp(260px, 32vw, 420px);
  justify-self: start;
  transform: rotate(-1.5deg);
}
body.is-ceremony .temple__snap img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: clamp(14px, 1.6vw, 20px);
  box-shadow: 0 10px 28px rgba(120,80,50,.14);
}
/* "the paragraph text needs to be wider too" (2026-10-04): the letter was
   capped at 58ch (499px) inside a 580px column, so it stopped 81px short of
   its own column for no reason. The cap now sits past the column, which
   means the column itself sets the measure and the lines run the full width
   of the text half. NOTHING MOVES: the grid is still two even columns and
   the photo is still right-aligned at the inner edge of the left one. */
body.is-ceremony .temple__notetext { max-width: 100%; }
body.is-ceremony .temple__notetext .temple__label { justify-content: flex-start; }
body.is-ceremony .temple__noteline {
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.6rem);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--t-ink);
  white-space: nowrap;
}
body.is-ceremony .temple__notetext .temple__lede:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  body.is-ceremony .temple__note { grid-template-columns: 1fr; gap: 1.8rem; }
  body.is-ceremony .temple__snap { justify-self: start; width: min(76vw, 340px); }
  body.is-ceremony .temple__noteline { white-space: normal; }
}

/* the closing rings breathe instead of turning (2026-09-09): each on its own
   slow period, a 3% swell and a little brightening, nothing else */
body.is-ceremony .rings__ring,
body.is-ceremony .rings__ring:nth-child(2),
body.is-ceremony .rings__ring:nth-child(3),
body.is-ceremony .rings__ring:nth-child(4) { animation: rings-breathe var(--rb, 12s) ease-in-out var(--rd, 0s) infinite; }
body.is-ceremony .rings__ring:nth-child(1) { --rb: 14s; --rd: 0s; }
body.is-ceremony .rings__ring:nth-child(2) { --rb: 11s; --rd: -4s; }
body.is-ceremony .rings__ring:nth-child(3) { --rb: 13s; --rd: -8s; }
body.is-ceremony .rings__ring:nth-child(4) { --rb: 9s;  --rd: -2s; }
@keyframes rings-breathe {
  0%, 100% { transform: scale(var(--s, 1)); opacity: var(--ro, .55); }
  50%      { transform: scale(calc(var(--s, 1) * 1.03)); opacity: calc(var(--ro, .55) + .18); }
}
body.is-ceremony .rings__ring:nth-child(1) { --ro: .5; }
body.is-ceremony .rings__ring:nth-child(2) { --ro: .55; }
body.is-ceremony .rings__ring:nth-child(3) { --ro: .6; }
body.is-ceremony .rings__ring:nth-child(4) { --ro: .65; }
@media (prefers-reduced-motion: reduce) { body.is-ceremony .rings__ring { animation: none; } }

/* the package cards run wider (2026-09-09), the same span as the bio */
body.is-ceremony .depth { width: min(100% - 5rem, 1240px); }

/* the teaser tried an arch portal on 2026-09-09; it flickered on her machine, so it is a square again */

/* a curtain (sticky hero, story rising over it) was tried on 2026-09-09 and reverted at her ask */

/* the orb rides ABOVE the page on Daniel (2026-09-10): she wants it as a
   cursor everywhere, over the hero, the cards and the cream band, not only
   on the open night sky. Under the nav, never over the pointer's targets. */
body.is-daniel .lamp--warm {
  z-index: 40;
  mix-blend-mode: normal;          /* screen vanished on the photo and the paper */
  width: 360px; height: 360px;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,222,160,.62) 0%, rgba(255,186,100,.40) 14%, rgba(255,150,70,.20) 30%, rgba(245,120,55,.07) 48%, rgba(245,120,55,0) 66%);
  filter: blur(16px);
}
body.is-daniel .lamp--warm.is-lit { opacity: .72; }   /* "a bit intense" at .95, softened 2026-09-10 */

/* film-subtitle yellow for the chapter titles (2026-09-10): the gold read as
   gilt; she wants the feel of subtitles on a print. Night cards take the
   pact line's marigold family, paper cards a deeper amber-yellow that still
   holds on cream. */
body.is-daniel {
  --d-sub: #ffd84a;
  --pg-sub: #c79b0e;
}
body.is-daniel .dan__chnum,
body.is-daniel.try-instrument .dan__chnum,
body.is-daniel .dan__sub { color: var(--d-sub); }
body.is-daniel .dan__sec--paper .dan__chnum { color: var(--pg-sub); }

/* ==========================================================================
   THRESHOLDS, rebalanced (2026-09-10). What was off: the spiral's arm ran to
   within a title's height of the words while the outer edge had twice that
   air; the column carried four voices (bold, body, grey italic, pull lines);
   and the spiral's dense side faced the text. So: an even gutter, the figure
   centred in its column and turned so its open end faces the words, the
   grey inline italics back to plain body, the pull lines a touch smaller
   with the first one broken on purpose, and the paragraph rhythm tightened.
   ========================================================================== */
body.is-ceremony .temple__band--thresholds .temple__cols {
  grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 6.5rem);
  align-items: center;
}
body.is-ceremony .temple__band--thresholds .temple__aside .spiral {
  width: min(100%, 520px);
  margin: 0 auto;
}
/* turned half a circle: the arms now bunch on the outer side, the opening
   faces the column. The rose follows the inner coil to its new spot. */
body.is-ceremony .temple__band--thresholds .spiral__svg { transform: rotate(180deg); }
body.is-ceremony .temple__band--thresholds .temple__asiderose { left: 46.4%; top: 45.4%; }
/* one italic voice, not two */
body.is-ceremony .temple__band--thresholds .temple__lede em { font-style: normal; font-weight: inherit; color: inherit; }
body.is-ceremony .temple__band--thresholds .temple__beat {
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.5;
  margin-block: clamp(1.3rem, 3vh, 2rem);
}
body.is-ceremony .temple__band--thresholds .temple__lede { margin-bottom: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.8; }
body.is-ceremony .temple__band--thresholds .temple__col > :last-child { margin-bottom: 0; }

/* ── "WHEREVER YOU'RE STANDING" ON ITS OWN WHITE BLOCK (2026-10-04) ───────
   Her ask: "put this text on a separate white block section underneath -
   centered to create some separation". It used to be the last paragraph of
   the Thresholds left rail, where it read as more column copy. Now it is a
   band of its own between Thresholds and The Work: a white card, centred,
   with air above and below so the page takes a breath before the next
   section. The card carries the same 14px radius and warm shadow the FAQ
   rows take on hover, so the two white blocks on this page match. */
body.is-ceremony .temple__band--meets {
  padding-block: clamp(1rem, 3vh, 2rem) clamp(2.5rem, 7vh, 4.5rem);
}
/* wider at her ask (2026-10-04): 48rem (768px) to 1080px, so the card sits
   closer to the 1240px the consult band and the note grid take and stops
   reading as a narrow panel floating in the middle of the band */
body.is-ceremony .temple__meets {
  width: min(100% - 5rem, 1080px);
  margin: 0 auto;
  padding: clamp(2.6rem, 5.5vw, 3.8rem) clamp(2rem, 4.5vw, 3.6rem);
  border-radius: 18px;
  background: var(--t-indigo);
  box-shadow: 0 18px 46px rgba(30, 18, 110, .26);
}
/* ── THE BLOCK GOES INDIGO (2026-10-04) ───────────────────────────────────
   She sent a reference card in a vivid blue-violet with white words and
   asked for that colouring here. The card keeps its size and position; the
   ground, the ink and the corner radius change. White body copy, and the
   closing line a shade softer so it still reads as the quieter beat. */
body.is-ceremony .temple__meets .temple__lede,
body.is-ceremony .temple__meets .temple__beat { color: #fbfbfb; }
body.is-ceremony .temple__meets .temple__lede strong { color: #fff; }
/* the em italics were a near-black warm charcoal, invisible on indigo */
body.is-ceremony .temple__meets .temple__lede em { color: rgba(255, 255, 255, .82); }
body.is-ceremony .temple__meets .temple__beat--close { color: rgba(255, 255, 255, .9); }
/* the marigold highlighter was tuned for a pale ground; on indigo it needs
   to carry the words itself, so it goes opaque and the questions take the
   dark ink back inside it */
body.is-ceremony .temple__meets .temple__hl {
  background-image: linear-gradient(90deg,
    rgba(255, 213, 112, 0) 0%, rgba(255, 213, 112, .92) 5%,
    rgba(255, 213, 112, .92) 95%, rgba(255, 213, 112, 0) 100%);
  color: #1c1540;
}

/* ── THE TWO CLOSING QUOTES TAKE THE SAME INDIGO CARD (2026-10-04) ────────
   "put this in the blue background - same style as 'should i stay'". Erin's
   quote and the pull line were loose on the page ground at the end of The
   Session; they now share one card with the same width, radius, padding and
   indigo as the block above, which is why they carry `.temple__meets` itself
   and only the quote-specific colours live here. Wording and order are
   unchanged. */
body.is-ceremony .temple__meets--quotes {
  margin-top: clamp(3rem, 7vh, 5rem);
}
/* the quotes fill the card (2026-10-04, "make the text wider here again"):
   the figure was still on the page's 47rem spine and the pull line on 46rem
   inside a 1080px card, so both stopped ~200px short of their own box. */
body.is-ceremony .temple__meets--quotes .temple__quote--work {
  width: 100%;
  margin: 0;
  padding: 0;
}
/* balance was what kept them narrow: it evens the lines by SHRINKING the
   measure, so the quote sat at 663px inside a 965px box. Pretty instead, so
   the lines run the width of the card and only the last one is protected. */
body.is-ceremony .temple__meets--quotes .temple__quote--work blockquote,
body.is-ceremony.try-instrument .temple__meets--quotes .temple__quote--work blockquote {
  width: 100%;
  text-wrap: pretty;
}
body.is-ceremony .temple__meets--quotes .temple__quote blockquote,
body.is-ceremony.try-instrument .temple__meets--quotes .temple__quote blockquote,
body.is-ceremony .temple__meets--quotes .temple__pull,
body.is-ceremony.try-instrument .temple__meets--quotes .temple__pull { color: #fbfbfb; }
body.is-ceremony .temple__meets--quotes .temple__cite { color: rgba(251, 251, 251, .72); }
/* the pull line closes the card, so it keeps its size but loses the big
   outer margin it had when it stood alone on the page */
/* the band rule below sets this to 46rem at the same specificity and comes
   later in the file, so the card scope has to name the band too */
body.is-ceremony .temple__band--session .temple__meets--quotes .temple__pull {
  width: 100%;
  margin: clamp(2.4rem, 5vh, 3.4rem) auto 0;
  padding-top: 0;
  border-top: 0;
  text-wrap: pretty;
}
/* the two questions and the closing line stay centred, the paragraph between
   them keeps the justified setting every other paragraph on the page has */
body.is-ceremony .temple__meets .temple__beat {
  width: 100%;
  margin: 0 auto clamp(1.4rem, 3.2vh, 2.1rem);
  font-size: clamp(1.14rem, 2vw, 1.45rem);
  line-height: 1.55;
  text-align: center;
}
body.is-ceremony .temple__meets .temple__lede {
  margin: 0;
  line-height: 1.8;
}
body.is-ceremony .temple__meets .temple__beat--close {
  margin: clamp(1.6rem, 3.6vh, 2.4rem) auto 0;
}
@media (max-width: 1140px) and (min-width: 821px) {
  body.is-ceremony .temple__band--thresholds .temple__cols { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
}

/* ==========================================================================
   THE END OF THE DECK (2026-09-10). Two things so the chapters do not just
   stop: an eighth card, one line in the subtitle yellow over the rings, rises
   like every card before it; then, on the next scroll, the whole stage sinks,
   shrinks and dims (--c from stack.js) before the pin lets go and the film
   strip comes. Her ask: "some way to finish that card section".
   ========================================================================== */
body.is-daniel .deck__stage {
  transform-origin: 50% 60%;
  transform: scale(calc(1 - var(--c, 0) * .08));
  filter: brightness(calc(1 - var(--c, 0) * .7));
  opacity: calc(1 - var(--c, 0) * .92);     /* all but gone by the time the pin lets go (her ask, 2026-09-10) */
  will-change: transform, filter, opacity;
}
body.is-daniel .deck.is-static .deck__stage { transform: none; filter: none; opacity: 1; }

body.is-daniel .deck__stage .dan__sec--end,
body.is-daniel .dan__sec--end {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  background: #0d1327;
  border: 1px solid rgba(246,235,223,.12);
}
body.is-daniel .dan__sec--end > * { grid-area: 1 / 1; }
body.is-daniel .dan__endring {
  width: min(52vh, 26rem);
  height: auto;
  opacity: .16;                    /* very faint, her ask (2026-09-10) */
  pointer-events: none;
}
body.is-daniel .dan__endline {
  margin: 0;
  padding: 0 1.5rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--d-sub);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
body.is-daniel .deck.is-static .dan__sec--end { min-height: 0; padding: clamp(3rem, 8vh, 5rem) 1.5rem; }
@media (max-width: 560px) { body.is-daniel .dan__endline { white-space: normal; font-size: 2rem; } }

/* the line shrinks into the dark as the deck fades (2026-09-10): a little
   scale on top of the stage's own, and it goes a beat sooner than the card */
body.is-daniel .deck__stage .dan__endline {
  transform: scale(calc(1 - var(--c, 0) * .32));
  opacity: calc(1 - var(--c, 0) * .6);
  filter: blur(calc(var(--c, 0) * 1.5px));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
body.is-daniel .deck.is-static .dan__endline { transform: none; opacity: 1; filter: none; }

/* the trust line under her name in the bio (2026-09-10): the thing people
   say to her, so the paragraph that follows ("It's the thing people say to
   me again and again") has its antecedent. Instrument italic, one line. */
body.is-ceremony .temple__trust {
  margin: calc(-1 * clamp(.6rem, 1.6vw, 1.2rem)) 0 clamp(1.4rem, 3vw, 2.2rem);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--t-ink);
  white-space: nowrap;
}
@media (max-width: 720px) { body.is-ceremony .temple__trust { white-space: normal; } }

/* PHONE FIX (2026-09-10): the "bigger portrait" rule above re-split the bio
   into two columns after the 860px rule that stacks it, so on phones the
   words were squeezed beside an empty column and the page scrolled sideways.
   Restated here, after it, so the stack wins on small screens. */
@media (max-width: 860px) {
  body.is-ceremony .temple__band--guide .temple__guide { grid-template-columns: minmax(0, 1fr); width: min(100% - 3rem, 1120px); }
}
/* the marquee's track is thousands of pixels wide; clip it sideways at the
   band so the page itself never scrolls horizontally on phones (2026-09-10) */
body.is-ceremony .temple__band--drift { overflow-x: clip; }
/* phones: the package cards back to the narrow measure (the wider desktop
   rule above had overtaken the 820px rule) and never wider than the screen */
@media (max-width: 820px) {
  body.is-ceremony .depth { width: min(100% - 2rem, 560px); }
  body.is-ceremony .depth__card { min-width: 0; max-width: 100%; }
}

/* ==========================================================================
   FROM THE AUDIENCE (2026-09-10): a band of its own under The Film. Six
   reviews she sent, five gold stars over each, Archivo italic on night cards
   with the chapter cards' thin rule. Three across, two, then one.
   ========================================================================== */
body.is-daniel .dan__reviews { border-top: 0; padding-top: clamp(1rem, 3vh, 2rem); }
body.is-daniel .dan__reviewshead { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
body.is-daniel .dan__reviewgrid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
body.is-daniel .dan__review {
  margin: 0;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.3rem, 2.2vw, 1.8rem);
  background: rgba(13,19,39,.72);
  border: 1px solid rgba(246,235,223,.12);
  border-radius: 6px;
}
body.is-daniel .dan__stars {
  display: block;
  font-size: .82rem;
  letter-spacing: .22em;
  color: var(--d-gold);
  text-shadow: 0 0 10px rgba(226,184,102,.35);
}
body.is-daniel .dan__review p {
  margin: .7rem 0 0;
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(.98rem, 1.1vw, 1.06rem);
  line-height: 1.75;
  color: var(--d-ink);
}
@media (max-width: 960px) { body.is-daniel .dan__reviewgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { body.is-daniel .dan__reviewgrid { grid-template-columns: minmax(0, 1fr); } }

/* THE FILM with its poster (2026-09-10): the HBO one-sheet at the left,
   at its own size (the file is 367px wide, so it is never scaled up), the
   words and the two buttons beside it. Stacks under 760px. */
body.is-daniel .dan__filmgrid {
  width: min(100%, 1040px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
body.is-daniel .dan__film .dan__measure { margin: 0; }
body.is-daniel .dan__poster { margin: 0; }
body.is-daniel .dan__poster img {
  display: block;
  width: 100%;
  max-width: 367px;
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(246,235,223,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
@media (max-width: 760px) {
  body.is-daniel .dan__filmgrid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  body.is-daniel .dan__poster { width: min(64vw, 300px); margin: 0 auto; }
}

/* ==========================================================================
   THE DECK ON PHONES (2026-09-10). Her ask: "polaroid on top and words
   underneath, and still follow the same card stacking animation". The
   two-column stage rules above outranked the phone rule, so the card was
   squeezed into two columns; here, with the same weight, it is one column:
   photo first, words under it, the words scrolling inside the card when a
   chapter is long. (The pinned stack itself lagged on her phone, so it is
   desktop only again; on phones the cards simply stack down the page.)
   ========================================================================== */
@media (max-width: 820px) {
  body.is-daniel .deck__stage .dan__sec,
  body.is-daniel .deck__stage .dan__sec--flip,
  body.is-daniel .deck.is-static .dan__sec,
  body.is-daniel .deck.is-static .dan__sec--flip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  body.is-daniel .dan__sec .dan__secphoto,
  body.is-daniel .dan__sec--flip .dan__secphoto { order: 1; min-height: 0; aspect-ratio: auto; }
  body.is-daniel .dan__sec .dan__sectext,
  body.is-daniel .dan__sec--flip .dan__sectext { order: 2; }
  body.is-daniel .deck__stage .dan__secphoto {
    max-height: none;
    padding: clamp(1rem, 3svh, 1.6rem) 1rem 0;
    display: grid;
    place-items: center;
  }
  body.is-daniel .deck__stage .dan__mount { width: min(100% - 1rem, 320px, 38svh); }
  body.is-daniel .deck__stage .dan__sectext {
    max-height: none;
    min-height: 0;
    overflow: auto;
    padding: clamp(1rem, 2.5svh, 1.5rem) 1.25rem clamp(1.2rem, 3svh, 1.8rem);
    -webkit-overflow-scrolling: touch;
  }
  body.is-daniel .deck__stage .dan__sectext .dan__ch { font-size: 1.35rem; }
  body.is-daniel .deck__stage .dan__sectext p { font-size: .95rem; line-height: 1.6; }
  body.is-daniel .deck__stage .dan__sec { width: min(100% - 1rem, 1320px); height: calc(100svh - 3rem); max-height: calc(100svh - 3rem); }
  body.is-daniel .deck__stage .dan__sec--end { grid-template-rows: minmax(0, 1fr); }
  body.is-daniel .deck__stage .dan__sec--end > * { grid-row: 1; }
}
/* phones read the deck as a plain column (2026-09-10): each card as tall as
   its own words, nothing pinned, nothing scrolling inside a card */
@media (max-width: 820px) {
  body.is-daniel .deck.is-static .dan__sec { height: auto; max-height: none; top: auto; }
  body.is-daniel .deck.is-static .dan__sectext { overflow: visible; max-height: none; }
  body.is-daniel .deck.is-static .dan__secphoto { padding: clamp(1rem, 3svh, 1.6rem) 1rem 0; display: grid; place-items: center; }
  body.is-daniel .deck.is-static .dan__mount { width: min(100% - 1rem, 320px); }
  body.is-daniel .deck.is-static .dan__sec--end { min-height: 60svh; }
}

/* no ornaments on the buttons (2026-09-10): "remove the little stars, it's too much" */
html body .btn-enter::before,  html body .btn-enter::after,
html body .connect__send::before, html body .connect__send::after,
html body.is-ceremony .temple__book::before, html body.is-ceremony .temple__book::after,
html body.is-daniel .dan__btn::before, html body.is-daniel .dan__btn::after,
html body.is-daniel .cosmos__btn::before, html body.is-daniel .cosmos__btn::after,
html body .trailer__out::before, html body .trailer__out::after { content: none; }

/* TYPE on Inner Ceremonies (2026-09-10, settled after two rounds): titles,
   labels, pull lines and the closing keep the warm CHARCOAL; every paragraph
   of body copy is BLACK ("go back to the charcoal but for body font, always
   BLACK"); the soft grey is gone, nothing on the page is grey any more. */
body.is-ceremony,
body.is-ceremony.is-temple-light {
  --t-ink: #3d332b;
  --t-ink-soft: #3d332b;
  --t-body: #121110;
}
body.is-ceremony .temple__lede,
body.is-ceremony .temple__plantext,
body.is-ceremony .temple__lede em,
body.is-ceremony .temple__plantext em,
body.is-ceremony .temple__lede strong,
body.is-ceremony .faq__inner p,
body.is-ceremony .depth__text,
body.is-ceremony .depth__list,
body.is-ceremony .depth__sub,
body.is-ceremony .depth__foot,
body.is-ceremony .depth__note,
body.is-ceremony .pillar__text,
body.is-ceremony .praise__quote,
body.is-ceremony .praise__who,
body.is-ceremony .temple__notetext .temple__lede,
body.is-ceremony .temple__sub { color: var(--t-body); }
/* the pull line under The Work: charcoal like the titles, not gold */
body.is-ceremony .temple__band--work .temple__pull,
body.is-ceremony.try-instrument .temple__band--work .temple__pull,
body.is-ceremony.try-instrument .temple__pull { color: var(--t-ink); }

/* ==========================================================================
   SOLID BUTTONS (2026-09-10). Her call: the site is already luminous, so the
   buttons should feel grounded: a solid gold pill at rest, and on hover the
   fill drops away to an outline. No glow, no sheen, no lift. Overrides the
   TALISMANS block above with the same selectors, later in the file.
   ========================================================================== */
html body .btn-enter,
html body .connect__send,
html body.is-ceremony .temple__book,
html body.is-temple-light .temple__book,
html body.is-daniel .dan__btn,
html body.is-daniel .dan__btn--fill,
html body.is-daniel .cosmos__btn,
html body .trailer__out,
html body #sunset .btn-enter,
html body .film__cta .btn-enter {
  --tal-solid: #c9a84c;
  --tal-hover-ink: #121110;
  background: var(--tal-solid);
  border: 1px solid var(--tal-solid);
  color: #1a1408;
  box-shadow: none;
  transform: none;
  animation: none;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
html body .btn-enter:hover, html body .btn-enter:focus-visible,
html body .connect__send:hover, html body .connect__send:focus-visible,
html body.is-ceremony .temple__book:hover, html body.is-ceremony .temple__book:focus-visible,
html body.is-temple-light .temple__book:hover, html body.is-temple-light .temple__book:focus-visible,
html body.is-daniel .dan__btn:hover, html body.is-daniel .dan__btn:focus-visible,
html body.is-daniel .dan__btn--fill:hover, html body.is-daniel .dan__btn--fill:focus-visible,
html body.is-daniel .cosmos__btn:hover, html body.is-daniel .cosmos__btn:focus-visible,
html body .trailer__out:hover, html body .trailer__out:focus-visible,
html body #sunset .btn-enter:hover, html body #sunset .btn-enter:focus-visible,
html body .film__cta .btn-enter:hover, html body .film__cta .btn-enter:focus-visible {
  background: transparent;
  border-color: var(--tal-solid);
  color: var(--tal-hover-ink);
  box-shadow: none;
  transform: none;
  animation: none;
}
html body .btn-enter:active,
html body .connect__send:active,
html body.is-ceremony .temple__book:active,
html body.is-temple-light .temple__book:active,
html body.is-daniel .dan__btn:active,
html body.is-daniel .dan__btn--fill:active,
html body.is-daniel .cosmos__btn:active,
html body .trailer__out:active {
  background: color-mix(in oklab, var(--tal-solid), #000 14%);
  border-color: color-mix(in oklab, var(--tal-solid), #000 14%);
  color: #1a1408;
  transform: none;
  box-shadow: none;
}
/* dark grounds: a lighter gold, and the outline's text goes cream */
html body .becoming__text .btn-enter,
html body .collab__inner .btn-enter,
html body.is-daniel .dan__btn,
html body.is-daniel .dan__btn--fill,
html body .trailer__out { --tal-solid: #e2b866; --tal-hover-ink: #fff1d6; }
/* the ceremony page keeps her marigold */
html body.is-ceremony .temple__book,
html body.is-temple-light .temple__book { --tal-solid: #ffca2c; }

/* the arch overlay never takes the pointer (2026-09-10): its frame and wall
   sat over the hero's Book a Complimentary Call button and swallowed every
   hover and click once you had scrolled through */
body.is-ceremony .arch__wall,
body.is-ceremony .arch__frame,
body.is-ceremony .arch__hint { pointer-events: none; }   /* the hero lives INSIDE .arch, so only the overlays */

/* ONE button colour everywhere (2026-09-10): her marigold, on every ground */
html body .btn-enter,
html body .connect__send,
html body.is-ceremony .temple__book,
html body.is-temple-light .temple__book,
html body.is-daniel .dan__btn,
html body.is-daniel .dan__btn--fill,
html body.is-daniel .cosmos__btn,
html body .trailer__out,
html body #sunset .btn-enter,
html body .film__cta .btn-enter,
html body .becoming__text .btn-enter,
html body .collab__inner .btn-enter { --tal-solid: #ffca2c; }

/* ==========================================================================
   HOMEPAGE BUTTONS follow the sky (2026-09-10). The marigold got lost on the
   peach and orange grounds, so on the homepage the buttons take an INK that
   moves with the sky's own scroll value (--dusk, written by sky.js: 0 on the
   light sky, 1 by the night): black on the light sky, cream on the dark,
   every shade between as you scroll. DANIEL, the first, is an outline; the
   other two are solid. Hover swaps each one to its opposite.
   ========================================================================== */
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) .btn-enter {
  /* a quick crossfade around the sky's midpoint, not a slow blend: a slow
     blend put ink and paper at the same grey exactly where Learn more sits */
  --hp-t:     clamp(0, calc((var(--dusk, 0) - .42) * 8), 1);
  --hp-ink:   color-mix(in oklab, #121110, #fff6e8 calc(var(--hp-t) * 100%));
  --hp-paper: color-mix(in oklab, #fff6e8, #121110 calc(var(--hp-t) * 100%));
  background: var(--hp-ink);
  border-color: var(--hp-ink);
  color: var(--hp-paper);
}
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) .btn-enter:hover,
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) .btn-enter:focus-visible {
  background: transparent;
  border-color: var(--hp-ink);
  color: var(--hp-ink);
}
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) .btn-enter:active {
  background: var(--hp-ink);
  border-color: var(--hp-ink);
  color: var(--hp-paper);
}
/* the first button, DANIEL on the sunset: an outline that fills on hover */
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) .film__cta .btn-enter {
  background: transparent;
  border-color: var(--hp-ink);
  color: var(--hp-ink);
}
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) .film__cta .btn-enter:hover,
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) .film__cta .btn-enter:focus-visible {
  background: var(--hp-ink);
  color: var(--hp-paper);
}
/* the sunset section's ID rule outranks the class rules, so it is said again with the ID */
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) #sunset .btn-enter { background: var(--hp-ink); border-color: var(--hp-ink); color: var(--hp-paper); }
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) #sunset .btn-enter:hover,
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) #sunset .btn-enter:focus-visible { background: transparent; border-color: var(--hp-ink); color: var(--hp-ink); }
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) #sunset .btn-enter:active { background: var(--hp-ink); color: var(--hp-paper); }

/* ── LEARN MORE HOLDS ITS COLOUR (2026-10-07) ──────────────────────────────
   "The learn more button on the homepage should stay the same colour and not
   change when you scroll." The sky's crossfade is centred at --dusk .42,
   which is almost exactly where The Becoming sits, so this one button did
   its whole black-to-cream flip while you were reading the section. Pinning
   --hp-t to 0 freezes it at the ink-on-cream-text state it already has when
   the section arrives; everything downstream (hover, active) still works,
   it just no longer moves. Only this button: the DANIEL outline above it and
   the Collaborate button below still follow the sky. */
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) #sunset .ceremony__cta .btn-enter,
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) #sunset .ceremony__cta .btn-enter:hover,
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) #sunset .ceremony__cta .btn-enter:focus-visible,
html body:not(.is-daniel):not(.is-ceremony):not(.is-connect) #sunset .ceremony__cta .btn-enter:active {
  --hp-t: 0;
}

/* ==========================================================================
   THE FOREST beside "When life is asking you to change" (2026-09-10). A
   trial: `.is-forest` on the Thresholds section shows a faded, warm-graded
   photo of light through redwoods and hides the rose spiral. Remove the
   class from the section (and nothing else) to get the spiral back.
   ========================================================================== */
body.is-ceremony .temple__forest { display: none; }
body.is-ceremony .temple__band--thresholds.is-forest .spiral { display: none; }
body.is-ceremony .temple__band--thresholds.is-forest .temple__forest {
  display: block;
  width: min(100%, 520px);
  aspect-ratio: 4 / 5;
  height: auto;
  margin: 0 auto;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: .82;
  filter: sepia(.28) saturate(.78) brightness(1.06) contrast(.96);   /* warmed toward the page */
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 42%, rgba(0,0,0,.55) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 42%, rgba(0,0,0,.55) 66%, transparent 100%);
}
@media (max-width: 860px) {
  body.is-ceremony .temple__band--thresholds.is-forest .temple__aside { width: 100%; }
  body.is-ceremony .temple__band--thresholds.is-forest .temple__forest { width: min(80vw, 420px); margin: 2rem auto 0; }
}

/* a soft highlighter wash behind "Should I stay? Should I go?" (2026-09-10):
   marigold at a quarter strength, laid under each line separately, the ends
   feathered like a marker stroke */
body.is-ceremony .temple__hl {
  display: inline;
  padding: .12em .35em;
  margin: 0 -.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(90deg, rgba(255,202,44,0) 0%, rgba(255,202,44,.34) 5%, rgba(255,202,44,.34) 95%, rgba(255,202,44,0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 78%;
  background-position: 0 62%;
  border-radius: .3em;
}

/* NO ORPHANS (2026-09-11). The pillars intro left "together." alone on its
   last line: the measure there widens a little so it fits, and every body
   paragraph on the page asks the browser for pretty wrapping, which keeps a
   single word off the last line wherever it can. */
body.is-ceremony .temple__band--pillars .temple__measure { --t-measure: min(100% - 6rem, 50rem); }
body.is-ceremony .temple__lede,
body.is-ceremony .temple__plantext,
body.is-ceremony .depth__text,
body.is-ceremony .pillar__text,
body.is-ceremony .faq__inner p,
body.is-ceremony .temple__notetext p,
body.is-ceremony .praise__quote { text-wrap: pretty; }

/* ── THE TWO NEW QUOTES (2026-09-29, Erin's final copy) ───────────────────
   Daniel's line to his grade 2 students, inside Chapter Seven's text column,
   and LL Cool J in The Film. Both are set the way every emotional line on
   this page is set: Instrument italic, subtitle yellow on the night cards,
   attribution in Archivo (never Menlo — that is nav and tiny labels only).
   Fluid clamps throughout, so no phone override is needed after this. */
body.is-daniel .dan__chquote {
  margin: clamp(1.4rem, 2.4vh, 2.1rem) 0 0;
  padding-top: clamp(1.1rem, 2vh, 1.6rem);
  border-top: 1px solid color-mix(in srgb, var(--d-sub) 26%, transparent);
}
body.is-daniel .dan__chquote blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
  line-height: 1.38;
  letter-spacing: -.005em;
  color: var(--d-sub);
  text-wrap: pretty;
}
body.is-daniel .dan__chquote figcaption {
  margin-top: .6rem;
  font-family: var(--body);
  font-size: clamp(.78rem, .92vw, .86rem);
  line-height: 1.5;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--d-cream) 62%, transparent);
  text-wrap: pretty;
}
body.is-daniel .dan__chquote-note { font-style: italic; opacity: .82; }
/* the warm paper chapters carry the deeper gold instead of the night yellow */
body.is-daniel .dan__sec--paper .dan__chquote { border-top-color: var(--pg-rule); }
/* 2026-10-28, "make this text black, i can't see it": the lyric was --pg-sub,
   the deeper gold, which is 2.5:1 against the #f3e8d9 paper — it reads on the
   night cards, not on this one. It takes the paper's own ink instead, the same
   colour as the prose above it, at 13:1. Chapter Seven is a NIGHT card and its
   quote stays the bright yellow; this selector cannot reach it. */
body.is-daniel .dan__sec--paper .dan__chquote blockquote { color: var(--pg-ink); }
body.is-daniel .dan__sec--paper .dan__chquote figcaption {
  color: color-mix(in srgb, var(--pg-ink) 68%, transparent);
}

body.is-daniel .dan__filmquote {
  margin: 0 0 1.8rem;
  padding-left: clamp(.9rem, 1.4vw, 1.2rem);
  border-left: 1px solid color-mix(in srgb, var(--d-gold) 42%, transparent);
}
body.is-daniel .dan__filmquote blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.18rem, 1.9vw, 1.6rem);
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--d-gold);
  text-wrap: pretty;
}
body.is-daniel .dan__filmquote figcaption {
  margin-top: .5rem;
  font-family: var(--body);
  font-size: clamp(.8rem, .95vw, .88rem);
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--d-ink) 64%, transparent);
}

/* ── THE CONSULTATION CALL + THE TWO NEW CEREMONY QUOTES ──────────────────
   (2026-09-29, Erin's final copy)
   The $50 hour stands above the two packages as the step everyone takes
   first, so it spans the same 1240px the cards do and reads as one band,
   not a third option. Erin's line in The Work and Madonna's after the
   pillars both reuse the existing .temple__quote (serif italic, centred,
   with its own curly marks); only the attribution is new, and it is set in
   Archivo — Menlo is nav and tiny labels only. */
body.is-ceremony .consult {
  width: min(100% - 5rem, 1240px);
  margin: clamp(2.2rem, 4.5vw, 3.2rem) auto 0;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3.2vw, 2.6rem);
  background: rgba(255, 202, 44, .10);
  border: 1px solid rgba(201, 168, 76, .42);
  border-radius: 22px;
  text-align: center;
}
body.is-ceremony .consult__head {
  margin: 0 0 .7rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.3;
  color: var(--t-ink);
}
body.is-ceremony .consult__price { color: var(--gold); white-space: nowrap; }
/* THE MEASURE IS THE PAGE'S OWN, NOT A CH COUNT (2026-10-28). It was
   `min(100%, 68ch)` on both, and `ch` is relative to each element's own
   font-size, so the .95rem refund came out 592px against the 1rem text's
   623px: two paragraphs in one card with left edges 16px apart, both of
   them narrower than the lede directly above. They now share `47rem`,
   which is `--t-measure`'s own cap, so the card's words line up with the
   band's and the justified lines stop stretching. */
body.is-ceremony .consult__refund,
body.is-ceremony .consult__text {
  width: min(100%, 47rem);
  margin: 0 auto;
  font-family: var(--body);
  line-height: 1.65;
  color: var(--t-ink);
  text-wrap: pretty;
}
body.is-ceremony .consult__refund {
  margin-bottom: .9rem;
  font-size: .95rem;
  color: var(--t-ink-soft);
}
body.is-ceremony .consult__text { font-size: 1rem; }

body.is-ceremony .temple__quote--work,
/* ── THE WORK QUOTE GETS A REAL MEASURE (2026-10-04) ───────────────────────
   "in the inner ceremonies page, this text needs to have a wider paragraph
   box". `.temple__quote--work` had NO width of its own, so as a shrink-to-
   fit child of the band it sized to its own longest line: 476px at 1440,
   against 752px for the paragraphs above it and 736px for the pull line
   below. That is why it broke to five short lines between two much wider
   blocks. Given the page's own measure it lines up with the body copy and
   the pull line instead. text-wrap: balance so the lines come out even,
   the same treatment its sibling --pillars quote already has. */
body.is-ceremony .temple__quote--work {
  width: var(--t-measure);
  margin-inline: auto;
}
body.is-ceremony .temple__quote--work blockquote { text-wrap: balance; }

body.is-ceremony .temple__quote--pillars {
  width: min(100% - 3rem, 60rem);
  margin: clamp(3rem, 6.5vh, 4.6rem) auto 0;
  padding: 0;
}
/* ── MADONNA ON ONE LINE (2026-10-04) ──────────────────────────────────────
   "this line needs to be longer too, one line". The 52ch box broke it after
   "no real", so the measure is widened and the line is held on one row with
   nowrap, the same treatment the script headings take. The size is tied to
   vw as well as rem so it shrinks instead of overflowing on a narrow
   desktop window; under 820px it goes back to wrapping. */
@media (min-width: 821px) {
  body.is-ceremony .temple__quote--pillars blockquote {
    white-space: nowrap;
    font-size: min(1.72rem, 2.5vw);
  }
}
/* the same italic the pull lines take on this page, so the two quotes sit in
   the page's own voice rather than the older serif */
body.is-ceremony.try-instrument .temple__quote--work blockquote,
body.is-ceremony.try-instrument .temple__quote--pillars blockquote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.28rem, 2.1vw, 1.72rem);
  line-height: 1.4;
  letter-spacing: 0;
}
/* balance, not pretty: these are two- to six-line quotes, and pretty still
   left "self-belief." alone on Madonna's last line. See [[no-orphans]]. */
body.is-ceremony .temple__quote--work blockquote,
body.is-ceremony .temple__quote--pillars blockquote { text-wrap: balance; }
body.is-ceremony .temple__cite {
  margin: .9rem 0 0;
  font-family: var(--body);
  font-size: .88rem;
  letter-spacing: .02em;
  color: var(--t-ink-soft);
}

@media (max-width: 820px) {
  body.is-ceremony .consult { width: min(100% - 2rem, 560px); border-radius: 18px; }
  body.is-ceremony .temple__quote--work,
  body.is-ceremony .temple__quote--pillars { width: min(100% - 2rem, 40ch); }
}

/* ── "WHAT HAPPENS IN AN INNER CEREMONY" SPLIT IN TWO (2026-10-02) ─────────
   Her final copy made this section 303 words, and it was the only place on
   the page carrying a long argument CENTRED — Thresholds, the bio and the
   note all run this long and read fine because they are left-aligned. So:
   two stacked parts at the seam in her own copy (the frame, then the session
   itself), each with its own label and heading, body ranged left on the same
   62ch spine. The band element itself is untouched, so the nebula, the blush
   fade and the marquee lifting into that fade all stay exactly as tuned. */
body.is-ceremony .work__part .temple__lede {
  text-align: left;
  text-wrap: pretty;
}
body.is-ceremony .work__part--second {
  margin-top: clamp(3.2rem, 7vh, 5rem);
  padding-top: clamp(2.6rem, 5.5vh, 4rem);
  border-top: 1px solid rgba(201, 168, 76, .34);
}
/* the second label sits a touch closer to its rule than a band label would */
body.is-ceremony .work__part--second .temple__label { margin-top: 0; }

@media (max-width: 820px) {
  body.is-ceremony .work__part--second {
    margin-top: clamp(2.4rem, 5vh, 3.4rem);
    padding-top: clamp(2rem, 4vh, 2.8rem);
  }
}

/* The words-part-around-the-cursor effect (v=302) was REMOVED at her ask on
   2026-10-02 (v=309): "remove the text hover animation - we need to come up
   with something better than that". words.js, its script tag and the `.cw`
   rules are all deleted rather than left dormant, so the paragraphs are plain
   text nodes again. If a text hover ever comes back it starts from scratch;
   do not resurrect this one. */

/* ── BODY COPY JUSTIFIED, LAST LINE LEFT (2026-10-04, Inner Ceremonies) ───
   History: justified 2026-10-02 (both edges flush AND the last line
   stretched across the measure), ranged left later the same day because the
   stretched last line was the problem, and now justified again at her ask
   with `text-align-last: left` so the final line of every paragraph stays
   short and ranged left. Same selectors throughout — headings, labels and
   every quote-voiced line were never in this list. */
body.is-ceremony .temple__lede,
body.is-ceremony .depth__text,
body.is-ceremony .depth__foot,
body.is-ceremony .depth__note,
body.is-ceremony .consult__refund,
body.is-ceremony .consult__text,
body.is-ceremony .pillar__text,
body.is-ceremony .faq__inner p {
  text-align: justify;
  text-align-last: left;
}

/* The Work's two parts take the same treatment as every paragraph above.
   Kept explicit so the two rules do not read as a conflict later. */
body.is-ceremony .work__part .temple__lede {
  text-align: justify;
  text-align-last: left;
}

/* ── PILLAR CARDS LIFT AND TILT ON HOVER (2026-10-02) ──────────────────────
   The flip owns `.pillar__card` (rotateY(180deg) on .is-flipped), so the
   hover cannot live there without the two transforms fighting. It goes on the
   `.pillar--flip` LI instead: two different elements, two transforms, no
   conflict, and the flip keeps its own .85s curve.

   The li carries `perspective: 1400px` as a property for its child; the tilt
   needs a perspective for ITSELF, which is the perspective() transform
   function below. Set at rest too, so hovering does not jump between a
   transformed and an untransformed box.

   --prx/--pry come from pillars.js. They default to 0, so with no JS a hover
   still lifts and deepens the shadow, it just does not lean. */
body.is-ceremony .pillar--flip {
  transform: perspective(900px);
  transition: transform .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  body.is-ceremony .pillar--flip:hover {
    transform: perspective(900px) translateY(-6px)
               rotateX(var(--prx, 0deg)) rotateY(var(--pry, 0deg));
  }
  /* the shadow belongs to whichever face is showing, so the lift reads the
     same whether the card is front up or flipped */
  body.is-ceremony .pillar--flip:hover .pillar__face--front,
  body.is-ceremony .pillar--flip:hover .pillar__face--back {
    box-shadow: 0 30px 64px rgba(120, 80, 60, .22);
  }
}
body.is-ceremony .pillar__face--back {
  box-shadow: 0 18px 44px rgba(120, 80, 60, .10);
  transition: box-shadow .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.is-ceremony .pillar--flip,
  body.is-ceremony .pillar--flip:hover {
    transform: none;
    transition: none;
  }
}

/* ── THE PRAISE ROW IS DRAGGABLE (2026-10-02) ──────────────────────────────
   praise.js does the work; these two classes are the only thing CSS owes it.
   `.is-free` lifts scroll-snap for the length of a drag and its throw, which
   it has to: under `scroll-snap-type: x mandatory` every scrollLeft we write
   is yanked back to the nearest snap point and the card never moves with the
   hand. `.is-grab` is the cursor and the select guard, and comes off the
   moment the pointer lets go, while `.is-free` stays until the throw lands.
   Touch keeps the native snap untouched (the script never arms for a finger),
   so the grab cursor is hidden from pointer-coarse devices too. */
body.is-ceremony .praise__track { cursor: grab; }
body.is-ceremony .praise__track.is-grab {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
body.is-ceremony .praise__track.is-free { scroll-snap-type: none; }
@media (hover: none), (pointer: coarse) {
  body.is-ceremony .praise__track { cursor: auto; }
}

/* ── THE PACKAGES READ AS A LIST (2026-10-02) ──────────────────────────────
   At her ask: what you get should be scannable, not a ruled table. The
   hairline between every row is gone (it made four items look like a price
   sheet); each line now carries a small gold dot, sits on more air, and is
   set a weight lighter than the paragraph above it so the description still
   leads and the list reads as the detail under it. Archivo is variable
   100..900 here, so 300 is a real cut, not a synthesised one.

   "Includes:" takes the card's existing tiny-label idiom exactly (the same
   Menlo, tracking and gold as `.depth__label` above it, a size down): a
   kicker, which is the one role Menlo keeps on this site. */
body.is-ceremony .depth__includes {
  margin: .2rem 0 .9rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}
body.is-ceremony .depth__list {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  border-top: 0;
  display: grid;
  gap: .8rem;
}
body.is-ceremony .depth__list li {
  position: relative;
  padding: 0 0 0 1.4rem;
  border-bottom: 0;
  font-family: var(--body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--t-ink);
  text-align: left;
  text-wrap: pretty;
}
body.is-ceremony .depth__list li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .8em;                /* on the first line's middle, not the box top, so
                               a two-line item keeps its dot beside line one */
  width: .36rem;
  height: .36rem;
  margin-top: -.18rem;
  border-radius: 50%;
  background: var(--gold);
}

/* ── "I'VE BEEN WHERE YOU ARE" IS ITS OWN ZONE (2026-10-02) ────────────────
   At her ask: deep navy, cream words, gold label and heading, and enough
   padding that the page changes mood when you reach it. LAYOUT IS UNTOUCHED
   — the two even columns, the photo's size, tilt and inner-edge placement,
   and the order of the paragraphs are all exactly as they were; only the
   ground, the ink and the breathing room change.

   Every ceremony band is FULL BLEED: the override at ~line 3110 sets
   `body.is-ceremony .temple__band` to `width: 100%` with `border-radius: 0`,
   so this is a true edge-to-edge stripe and the measure comes from the
   `.temple__note` grid inside it. That is why there is no radius and no
   margin here — a rounded corner or a cream gap at the viewport edge would
   read as a mistake on a stripe, and the padding alone makes the zone.

   These selectors have to come last in the file: the TYPE COLOUR block above
   sets `body.is-ceremony .temple__notetext .temple__lede` to `--t-body` at
   the same specificity, so this wins on order alone. Don't move it up. */
/* 2026-10-04: "change 'i've been where you are' to the brighter blue instead
   of the navy" — the zone takes the same `--t-indigo` the two cards above it
   use, so every coloured surface on this page is the one blue. The gold label
   and heading and the cream body all still clear 6:1 on it. */
body.is-ceremony .temple__band--note {
  background: var(--t-indigo);
  padding-block: clamp(5.5rem, 13vh, 9rem);
}
body.is-ceremony .temple__band--note .temple__label { color: var(--gold-lite); }
body.is-ceremony .temple__notetext .temple__label { color: var(--gold-lite); }
body.is-ceremony .temple__band--note .temple__noteline { color: var(--gold-lite); }
body.is-ceremony .temple__notetext .temple__lede,
body.is-ceremony .temple__band--note .temple__lede {
  color: var(--t-cream);
}
/* the snapshot's shadow was a warm brown for the cream ground; on navy it
   reads as nothing, so it goes deeper and cooler to keep the photo sitting
   on the ground rather than floating on it */
body.is-ceremony .temple__band--note .temple__snap img {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

/* ── HOVER STATES INSIDE THE NOTE SECTION (2026-10-02) ─────────────────────
   At her ask. Two things, and one of them is a placeholder.

   What she asked for third — "the text hover effect from the rest of the
   page applied here too" — is NOT here, because an hour later she asked for
   that effect to be removed from the whole page (see the note where the
   WORDS block used to be). There is no page-wide text hover to apply.

   1. The snapshot lifts a little and brightens on hover: the one element in
      the section a pointer can land on.
   2. A gold underline that sweeps in from the left for links. THERE ARE NO
      LINKS OR BUTTONS IN THIS SECTION YET — the note is four paragraphs, a
      heading and a photo — so this rule is waiting for the first one she adds
      rather than changing anything today. Scoped to the band so it can never
      touch the page's real buttons, which keep their own solid/transparent
      hover from the SOLID BUTTONS block. */
body.is-ceremony .temple__band--note .temple__snap {
  transition: transform .35s ease, filter .35s ease;
}
body.is-ceremony .temple__band--note .temple__snap:hover {
  transform: rotate(-1.5deg) translateY(-4px) scale(1.012);
  filter: brightness(1.06);
}
body.is-ceremony .temple__band--note a:not(.btn-enter) {
  position: relative;
  color: var(--gold-lite);
  text-decoration: none;
  transition: color .25s ease;
}
body.is-ceremony .temple__band--note a:not(.btn-enter)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.14em;
  height: 1px;
  background: var(--gold-lite);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
body.is-ceremony .temple__band--note a:not(.btn-enter):hover,
body.is-ceremony .temple__band--note a:not(.btn-enter):focus-visible {
  color: #fff6e2;
}
body.is-ceremony .temple__band--note a:not(.btn-enter):hover::after,
body.is-ceremony .temple__band--note a:not(.btn-enter):focus-visible::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  body.is-ceremony .temple__band--note .temple__snap,
  body.is-ceremony .temple__band--note a:not(.btn-enter)::after { transition: none; }
  body.is-ceremony .temple__band--note .temple__snap:hover { transform: rotate(-1.5deg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE WORK AND THE SESSION BECOME TWO BANDS (2026-10-04)
   Her ask: "i want the 'what happens in an inner ceremony' section to just be
   the background of the starry image - dont extend it into two sections, have
   it match the width of the screen and the 'inside a session' can be the navy
   blue full background."

   They were one `.temple__band--work` holding two `.work__part` blocks with a
   gold rule between them. Now they are two sections in the markup:
   `--work` keeps the first part, `--session` is new and carries the second
   part plus Erin's quote and the pull line, in the reading order they had.

   THE WORK: the nebula stops being weather behind the words and becomes the
   section's background. The blush gradient and the top/bottom mask are both
   gone — that fade was what made it bleed into the sections either side, and
   she asked for a block the width of the screen. The image is held just off
   full strength and a soft cream wash sits over it so the warm charcoal body
   copy still reads over the darker corners of the sky.

   Both bands are already full bleed: the ceremony override sets every
   `.temple__band` to width 100% with no radius, so "the width of the screen"
   needs no extra width rule here, only the removal of the fades.
   ═══════════════════════════════════════════════════════════════════════════ */
body.is-ceremony .temple__band--work {
  padding-block: clamp(5.5rem, 13vh, 9rem) clamp(6.5rem, 15vh, 10rem);
  background: transparent;
}
/* THE TWO EDGES (2026-10-04, third pass): "the soft gradient went missing,
   the background has a sharp line on both top and bottom of the image."
   Cutting the old mask to make the band read as a block left the image
   stopping dead at both edges, so both fade again: out over the first 15%
   and the last 15%, with the page's own ground showing through at either
   end. The second pass dissolved the bottom into navy instead, because The
   Session was a dark block then; it is the page ground again now (see
   below), so the symmetric fade is back.
   The cream wash carries the same mask — otherwise the wash alone would
   draw the hard line the image no longer does. */
body.is-ceremony .temple__band--work::before,
body.is-ceremony .temple__band--work::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
body.is-ceremony .temple__band--work::before {
  background: url("images/work-sky.jpg?v=323") center / cover no-repeat;
  opacity: .9;
  filter: saturate(.92) brightness(1.04);
}
/* the cream wash that keeps the ink legible over the sky */
body.is-ceremony .temple__band--work::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 243, 238, .58);
  pointer-events: none;
}

/* THE SESSION: her ask on 2026-10-04, after a few hours on the navy —
   "make inside a session background the main background - the soft yellow
   and pink orb - same as the others i dont like the blue". So the band
   carries no ground of its own and the page's orb gradient runs straight
   through it, the way every other band on this page does. The navy at
   v=324-328 and every colour override it needed (gold label and heading,
   cream body, cream quote and cite, white strong, gold em) are deleted
   rather than left dormant: on the light ground the page's own type colours
   are correct again. It stays its own section — the split she asked for is
   untouched, only the colour goes back. */
body.is-ceremony .temple__band--session {
  padding-block: clamp(4rem, 9vh, 6rem) clamp(5rem, 12vh, 8.5rem);
  background: transparent;
}
/* the rule above the second part was the seam between two parts of one band;
   there is no seam now, so the part starts flush at the top of its own band */
body.is-ceremony .temple__band--session .work__part--second {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
body.is-ceremony .temple__band--session .temple__pull {
  width: min(100% - 3rem, 46rem);
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.4;
}

/* The marquee used to be pulled up into the bottom of The Work's blush fade.
   The Work no longer sits directly above it — The Session does, with its own
   padding — so the lift has nothing to lift into and stays cancelled. */
body.is-ceremony .temple__band--drift { margin-top: 0; }


/* --------------------------------------------------------------------------
   THE POND (2026-10-05): "Like a raindrop ripples the pond" is her own line,
   so the card performs it. Click anywhere on the indigo and three rings open
   from that point; left alone, a quieter drop lands by itself every few
   seconds so the water is already moving when you arrive. Scoped to this one
   card: .temple__meets is also worn by the closing quotes card.
   -------------------------------------------------------------------------- */
body.is-ceremony .temple__band--meets .temple__meets {
  position: relative;
  overflow: hidden;              /* rings stop at the rounded corners */
  cursor: pointer;               /* the hand is told the water can be touched */
}
/* the words stay above the water. The drops are excluded: this rule outranks
   .drip's own position:absolute, which dropped them into the text flow. */
body.is-ceremony .temple__band--meets .temple__meets > :not(.drip) { position: relative; z-index: 1; }

.drip {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
  --drip-ink: rgba(255, 255, 255, .95);   /* white, 2026-10-21: the marigold was lost on the pink */
  /* the card is only ~370px tall, so a ring wider than that clips to an arc
     before it has read as a circle */
  --drip-size: 300px;
}
.drip i {
  position: absolute;
  top: 0; left: 0;
  width: var(--drip-size);
  height: var(--drip-size);
  margin: calc(var(--drip-size) / -2) 0 0 calc(var(--drip-size) / -2);
  border: 1.5px solid var(--drip-ink);
  border-radius: 50%;
  opacity: 0;
  animation: drip 2.6s cubic-bezier(.22,.61,.36,1) forwards;
}
.drip i:nth-child(2) { animation-delay: .26s; }
.drip i:nth-child(3) { animation-delay: .52s; }
/* a drop that falls by itself is quieter and spreads less far */
.drip--rain { --drip-ink: rgba(255, 255, 255, .8); --drip-size: 200px; }
.drip--rain i { animation-duration: 3.4s; }

@keyframes drip {
  0%   { transform: scale(.06); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drip { display: none; }
}

/* ==========================================================================
   THE CARDS GO WARM (2026-10-07). "This is the colour I want for the blue
   boxes instead." The three indigo surfaces (the "Should I stay" card, the
   closing quotes card, and the full-bleed note stripe) take a warm ground
   from her own palette instead of #4226bd.

   Everything below is the consequence, not a second opinion: the copy on
   those surfaces was set white, the labels gold, the highlighter opaque and
   the shadows blue-violet, all of which were chosen FOR the navy and none of
   which read on a light ground. Each one goes back to the value it had
   before the card went indigo on 2026-10-04.
   ========================================================================== */
/* 2026-10-08, "use this colour instead for the pink, this one is a bit
   lighter": a pale petal pink, read off her swatch. Named so it is one line
   to retune if the hex is not exact. */
body.is-ceremony { --t-petal: #fae3df; --t-indigo: var(--t-petal); }

/* the copy comes back to the page's warm ink */
body.is-ceremony .temple__meets .temple__lede,
body.is-ceremony .temple__meets .temple__beat,
body.is-ceremony .temple__notetext .temple__lede,
body.is-ceremony .temple__band--note .temple__lede { color: var(--t-ink); }
body.is-ceremony .temple__meets .temple__lede strong { color: var(--t-ink); }
body.is-ceremony .temple__meets .temple__lede em { color: var(--t-ink-soft); }
body.is-ceremony .temple__meets .temple__beat--close { color: var(--t-ink); }

/* the note stripe's label and its heading */
body.is-ceremony .temple__band--note .temple__label,
body.is-ceremony .temple__notetext .temple__label { color: var(--t-ink-soft); }
body.is-ceremony .temple__band--note .temple__noteline { color: var(--t-ink); }

/* 2026-10-07, "remove the yellow highlight from 'should i stay' and just bold
   that part": no wash at all now, the questions carry themselves in weight.
   The padding and the negative margins go too, or the span keeps the inset
   the highlighter needed and the two lines sit off-centre. */
body.is-ceremony .temple__meets .temple__hl {
  background-image: none;
  color: inherit;
  font-weight: 700;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* the closing quotes card */
body.is-ceremony .temple__meets--quotes .temple__quote blockquote,
body.is-ceremony.try-instrument .temple__meets--quotes .temple__quote blockquote,
body.is-ceremony .temple__meets--quotes .temple__pull,
body.is-ceremony.try-instrument .temple__meets--quotes .temple__pull { color: var(--t-ink); }
body.is-ceremony .temple__meets--quotes .temple__cite { color: var(--t-ink-soft); }

/* the shadows were mixed for navy: a blue-violet under the cards and a near
   black under the snapshot. Both go warm again. */
body.is-ceremony .temple__meets { box-shadow: 0 18px 46px rgba(120,80,50,.2); }
body.is-ceremony .temple__band--note .temple__snap img { box-shadow: 0 10px 28px rgba(120,80,50,.14); }

/* ==========================================================================
   CASE STUDY (2026-10-23). Asked for as a card, then as a dropdown, then
   "i still need to find a better way to present the client study
   testimonial": two options were previewed and she took the first one.

   A closed row showed nothing, so nobody opened it. The line that lands is
   out in the open now, in the display italic with her credit under it, and
   only the remaining paragraphs sit behind the toggle. No surface, no card:
   the page's own ground throughout.
   ========================================================================== */
body.is-ceremony .temple__band--story {
  padding-block: clamp(1.4rem, 3vh, 2.4rem) clamp(3rem, 7vh, 4.5rem);
}
body.is-ceremony .temple__band--story .temple__label { margin-bottom: 0; }
/* 2026-10-26, "this section should have a white block behind it to match the
   other testimonials": the same surface, radius and warm shadow as
   .praise__card, which supersedes the "no wite background" of 10-23. */
body.is-ceremony .story {
  width: min(100% - 3rem, 1040px);
  text-align: center;                 /* 2026-10-26, "wider, and the text centered" */
  margin: clamp(1.6rem, 3.4vh, 2.6rem) auto 0;
  padding: clamp(2rem, 3.6vw, 3.2rem) clamp(1.8rem, 3.4vw, 3rem);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 50px -34px rgba(150, 92, 72, .35);
}

/* the pulled line, in the same display italic as her other pull quotes */
body.is-ceremony .story__lead {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--t-ink);
  text-wrap: pretty;                  /* never a lone word on the last line */
}
/* the credit, set like the praise card's */
body.is-ceremony .story__who {
  margin: clamp(1.2rem, 2.6vw, 1.8rem) 0 0;
  font-family: var(--body);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--t-ink-soft);
}
body.is-ceremony .story__who strong { font-weight: 600; color: var(--t-ink); }
body.is-ceremony .story__who > span { margin-left: .45rem; }
body.is-ceremony .story__role { display: inline-block; margin-left: 0; font-size: .86rem; }

/* the toggle: a hairline label with a chevron that turns over */
body.is-ceremony .story__more {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding: 0 0 .3rem;
  border: 0;
  border-bottom: 1px solid var(--t-hair);
  background: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
  transition: color .25s ease, border-color .25s ease;
}
body.is-ceremony .story__more:hover,
body.is-ceremony .story__more:focus-visible { color: var(--gold); border-color: var(--gold); }
body.is-ceremony .story__more:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
body.is-ceremony .story__more i {
  display: block;
  width: .62rem; height: .62rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
body.is-ceremony .story.is-open .story__more i { transform: rotate(-135deg) translate(-2px, -2px); }

/* the rest of the story, on the same grid-rows opening the FAQ uses */
body.is-ceremony .story__rest {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1);
}
body.is-ceremony .story.is-open .story__rest { grid-template-rows: 1fr; }
body.is-ceremony .story__rest > div { overflow: hidden; }
body.is-ceremony .story__rest p {
  margin: 0 0 1.05em;
  font-family: var(--body);
  font-size: .99rem;
  line-height: 1.72;
  color: var(--t-ink);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .45s ease .1s, transform .45s ease .1s;
}
body.is-ceremony .story.is-open .story__rest p { opacity: 1; transform: none; }
body.is-ceremony .story__rest p:first-child { padding-top: clamp(1.6rem, 3.4vw, 2.4rem); }
body.is-ceremony .story__rest p:last-child { margin-bottom: 0; }

/* the lead, the credit and the toggle all sit on the centre line. The story
   itself stays ragged-left once open: six centred paragraphs are a hard read.
   The block is centred within the card instead. */
body.is-ceremony .story__lead { margin-inline: auto; max-width: none; }   /* 2026-10-26: fills the card */
body.is-ceremony .story__rest > div { text-align: left; }
body.is-ceremony .story__rest p { margin-inline: auto; max-width: 80ch; }


@media (prefers-reduced-motion: reduce) {
  body.is-ceremony .story__rest,
  body.is-ceremony .story__rest p,
  body.is-ceremony .story__more i { transition: none; }
}

/* 2026-10-23, "both of these are by erin, so her credit should be on the
   bottom small": the quotes card carried a credit under the first quote and
   none under the second. One credit now, at the foot of the card, centred
   and a size down from the in-line one it replaces. */
body.is-ceremony .temple__meets--quotes .temple__cite--card {
  margin: clamp(1.6rem, 3.4vh, 2.6rem) 0 0;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--t-ink-soft);
}

/* ==========================================================================
   SEO PASS (2026-10-25). Two presentational consequences of it, and nothing
   else: the story heading is now the page's <h1> and carries a much longer
   line than "Sibling Love" did, so it is allowed to wrap and set smaller;
   and nothing else.
   ========================================================================== */
body.is-daniel .dan__h1 {
  white-space: normal;                /* the old two-word title never wrapped */
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.15;
  /* 2026-10-28: it was capped at 18ch with `balance`, which held it to 450px
     inside a 1320px head and then evened the overflow into three short lines:
     "why are you clumping the text together in lines like this". The cap is
     gone, so it takes the head's own width and sets on ONE line from 1400up,
     and `pretty` fills each line rather than balancing them. */
  text-wrap: pretty;
}

/* ==========================================================================
   THE BECOMING, STACKED (2026-10-26). "on mobile, i want the title of inner
   ceremonies, then the rose then the copy."

   The title lives inside .becoming__text, so the only way to lift the rose
   between it and the copy without touching the markup is to let that block
   dissolve into the grid: display: contents makes its children siblings of
   the figure, and order does the rest.

   Two consequences, both handled here: the column becomes a flex stack so
   the grid's 2rem gap does not land between every paragraph, and the title
   loses the container it sized against, so its 22cqi is restated in vw.
   ========================================================================== */
@media (max-width: 820px) {
  .becoming__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .becoming__text { display: contents; }

  .becoming__media { order: 1; }
  .becoming__text > .eyebrow { order: 2; }
  .becoming__text > .section__title {
    order: 3;
    font-size: clamp(2.2rem, 13vw, 4rem);   /* was 22cqi off its own column */
    margin-bottom: 0;
  }
  /* 2026-10-28, "make the inner ceremonies rose the same size as erins
     photo": it was capped at 20rem, 320px against the 343px column, so it
     read as inset while the photo above it ran edge to edge. It now takes
     the column, same as .erin__photo. */
  .becoming__media {
    max-width: 100%;
    margin: clamp(1.4rem, 5vw, 2rem) auto clamp(1.6rem, 6vw, 2.4rem);
  }
  .becoming__text > .lede { order: 4; }
  .becoming__text > .becoming__line { order: 5; }
  .becoming__text > .ceremony__cta { order: 6; }
}

/* 2026-10-26, "erin northcott bio should be left justified too": the Your
   Guide words come off the centre line. The portrait above them stays
   centred, and the block keeps its own measure. */
body.is-ceremony .temple__band--guide .temple__guidetext { text-align: left; }
body.is-ceremony .temple__band--guide .temple__guidetext .temple__label,
body.is-ceremony .temple__band--guide .temple__guidetext .temple__eyebrow { justify-content: flex-start; }

/* 2026-10-26, "i want erin's bio and title to be left justified": the
   homepage Erin block centred itself when it stacked. It no longer does.
   The photo above it stays centred in its own column. */
@media (max-width: 820px) {
  .erin__grid { text-align: left; }
}

/* 2026-10-26, "the title of inner ceremonies needs to be left justified too".
   Stated outright rather than left to inherit through the display: contents
   block. The size is deliberately NOT touched here: it matches .erin__title
   and must stay that way. */
@media (max-width: 820px) {
  .becoming__grid,
  .becoming__text,
  .becoming__text > * { text-align: left; }
}

/* 2026-10-28, "make the inner ceremonies title left justified". text-align
   was already left and had been since 10-26 — the title was not centred TEXT,
   it was a centred BOX. .becoming__grid carries align-items: center, and in
   the stacked flex column that shrinks each child to its content and centres
   it, so the title sat 272px wide at x=59 while the paragraphs below ran the
   full 343. Stretching the box is what moves the words, not another
   text-align. Scoped to the title alone: the eyebrow and the button are
   centred by the same rule and she has not asked for those. */
@media (max-width: 820px) {
  .becoming__text > .section__title { align-self: stretch; }
}

/* 2026-10-26, "there is too much space after 'have a creative idea' and reel
   4, shorten that". The night reel holds a full viewport and pins its words
   to the foot, so most of that gap was its empty head, not the padding. */
@media (max-width: 820px) {
  .section--collab { padding-bottom: clamp(2.2rem, 6vh, 3.4rem); }
  .section--night {
    min-height: 68vh;
    padding-top: clamp(2.5rem, 7vh, 4rem);
  }
}

/* 2026-10-26, "i asked for the paragraph to be left justified with the last
   line aligned left": justified, not left-aligned, which is what the earlier
   text-align: left gave her. The last line stays flush left so the paragraph
   never ends on a stretched row. */
.erin__text .lede {
  text-align: justify;
  text-align-last: left;
}
@media (max-width: 820px) {
  .erin__grid { text-align: left; }        /* the title and the rest */
  .erin__text .lede { text-align: justify; text-align-last: left; }
}

/* ==========================================================================
   IS THIS JOURNEY FOR YOU (2026-10-26). From her copy file, then "change the
   'is this journey for you' section to have drop down bars instead of the
   text already showing": two rows on the FAQ's own mechanics, so faq.js
   opens them and the gold hairlines and plus-to-minus mark come for free.
   Only the list inside each panel is set here.
   ========================================================================== */
body.is-ceremony .temple__band--fit {
  padding-block: clamp(2.6rem, 6vh, 4.2rem) clamp(2rem, 5vh, 3.4rem);
}
body.is-ceremony .fit { width: min(100% - 5rem, 760px); }
body.is-ceremony .fit .faq__btn { font-size: clamp(1rem, 1.35vw, 1.16rem); }
body.is-ceremony .fit .fit__list {
  list-style: none;
  margin: 0;
  padding: 0 2.5rem 1.4rem 0;
}
body.is-ceremony .fit .fit__list li {
  position: relative;
  margin: 0 0 .85rem;
  padding-left: 1.2rem;
  font-family: var(--body);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--t-ink);
  text-align: left;
  text-wrap: pretty;                  /* never a lone word on the last line */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s ease .08s, transform .4s ease .08s;
}
body.is-ceremony .fit .faq__item.is-open .fit__list li { opacity: 1; transform: none; }
body.is-ceremony .fit .fit__list li:last-child { margin-bottom: 0; }
body.is-ceremony .fit .fit__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: .42rem; height: 1px;
  background: var(--gold);
}

/* the Carl Jung line in A Note From Me, set like the other cited quotes */
body.is-ceremony .temple__quote--note { margin: clamp(1.4rem, 3vw, 2.2rem) 0; }
body.is-ceremony .temple__quote--note blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  color: var(--t-ink);
  text-wrap: pretty;
}

/* ==========================================================================
   UNCOVERING, QUIETER (2026-10-26). "we need to make the 'uncovering'
   section better, there is so much words." Not a word is cut: the three
   paragraphs that describe the uncovering are set as ONE inset movement,
   on a gold hairline, a size down and on a narrower measure, so the eye
   reads them as a single passage between her two plain-spoken bookends.
   The Jung line is then the payoff rather than a seventh paragraph.
   ========================================================================== */
body.is-ceremony .note__uncover {
  margin: clamp(1.4rem, 3vw, 2rem) 0;
  padding-left: clamp(1rem, 2.2vw, 1.6rem);
  border-left: 1px solid rgba(201, 168, 76, .55);
}
body.is-ceremony .note__uncover .temple__lede {
  margin: 0 0 .8em;
  max-width: 62ch;
  font-size: clamp(.92rem, 1.08vw, 1rem);
  line-height: 1.62;
  color: var(--t-ink-soft);
  text-wrap: pretty;                  /* never a lone word on the last line */
}
body.is-ceremony .note__uncover .temple__lede:last-child { margin-bottom: 0; }
body.is-ceremony .note__uncover .temple__lede em { font-style: italic; color: inherit; }

/* the Jung line, set apart from the paragraphs on either side of it */
body.is-ceremony .temple__quote--note {
  margin: clamp(1.6rem, 3.4vw, 2.4rem) 0 clamp(1.4rem, 3vw, 2rem);
  max-width: 44ch;
}
body.is-ceremony .temple__quote--note blockquote {
  font-size: clamp(1.1rem, 1.75vw, 1.4rem);
  line-height: 1.32;
}

/* 2026-10-26: the trust line used to be "I just knew I could trust you." and
   was set nowrap to hold one line. Her copy replaced it with a sentence more
   than twice that length, which then ran straight off the right edge. It
   wraps now, balanced, on its own measure. */
body.is-ceremony .temple__trust {
  white-space: normal;
  max-width: 30ch;
  text-wrap: balance;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  line-height: 1.24;
}

/* 2026-10-26, "keep the text in the paragraph section aligned, and to match
   the size of the photo. make the photo bigger to accomodate all the text":
   the band stops centring its two columns and stretches them instead, so the
   snapshot runs the full height of the letter beside it and the two edges
   line up top and bottom. The photo widens with it. */
body.is-ceremony .temple__note { align-items: stretch; }
body.is-ceremony .temple__snap {
  width: clamp(300px, 38vw, 520px);
  align-self: stretch;
  display: flex;
}
body.is-ceremony .temple__snap img {
  height: 100%;
  aspect-ratio: auto;                 /* the letter sets the height now */
  object-fit: cover;
  object-position: 50% 28%;
}
@media (max-width: 860px) {
  body.is-ceremony .temple__note { align-items: start; }
  body.is-ceremony .temple__snap { width: min(76vw, 340px); display: block; }
  body.is-ceremony .temple__snap img { height: auto; aspect-ratio: 4 / 5; }
}

/* 2026-10-26, "make the paragraph text a bit wider, i don't want the section
   to be bigger / taller than a regular screen": the letter takes the width
   the photo gives up, which shortens it, and the band is capped so the whole
   thing sits inside one screen. */
body.is-ceremony .temple__band--note { padding-block: clamp(2.2rem, 5vh, 3.4rem); }
body.is-ceremony .temple__snap { width: clamp(230px, 26vw, 360px); }
body.is-ceremony .temple__note { gap: clamp(1.6rem, 3.4vw, 3rem); }
body.is-ceremony .temple__notetext .temple__lede { max-width: none; }
body.is-ceremony .note__uncover .temple__lede { max-width: none; }

/* 2026-10-26, "i didn't ask you to make it landscape. i just wanted it less
   tall": back to the upright frame it has always had, simply shorter. It no
   longer stretches to the full height of the letter beside it. */
body.is-ceremony .temple__note { align-items: center; }
body.is-ceremony .temple__snap { align-self: center; }
body.is-ceremony .temple__snap img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-position: 50% 28%;
}

/* 2026-10-26, "now slightly increase the size of the photo": same upright
   frame, a step up in width. The letter keeps its wider measure. */
body.is-ceremony .temple__snap { width: clamp(260px, 30vw, 420px); }

/* 2026-10-26, "i want the 'change the inner world and everything else will
   follow' to be the same size text, and remove the quotation marks": the
   pull line comes down to the size of the quote above it, and the card's
   quote drops the marks the stylesheet was drawing around it. */
body.is-ceremony .temple__band--session .temple__meets--quotes .temple__pull,
body.is-ceremony.try-instrument .temple__meets--quotes .temple__pull {
  font-size: clamp(1.28rem, 2.1vw, 1.72rem);   /* exactly the quote above it */
  line-height: 1.4;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}
body.is-ceremony .temple__meets--quotes .temple__quote blockquote::before,
body.is-ceremony .temple__meets--quotes .temple__quote blockquote::after { content: none; }



/* 2026-10-26, "i want the two to be beside each other like you had before,
   not on top of each other": the two bars sit side by side again, each
   opening on its own. The list's single top rule becomes one per column, or
   the two would share a hairline they no longer stand under. */
body.is-ceremony .fit {
  width: min(100% - 5rem, 1040px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
  border-top: 0;
}
body.is-ceremony .fit .faq__item {
  border-top: 1px solid rgba(201, 168, 76, .4);
}
@media (max-width: 820px) {
  body.is-ceremony .fit { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   INNER CEREMONIES ON MOBILE (2026-10-28), two asks.
   ========================================================================== */

/* 1. "the section 'thresholds' the paragraph text isn't wide enough, have it
   match all of the width of the text - for example, 'the work' section
   paragraph is the right width".

   The 860px rule that collapses .temple__cols to one track was never
   reaching this band. `body.is-ceremony .temple__cols` is three selectors;
   `body.is-ceremony .temple__band--thresholds .temple__cols` is four, and
   specificity beats a media query, so Thresholds kept its two-column grid on
   a phone: the words took 262px at x=40 while the spiral held the rest. The
   Work, which has no such override, measured 342px at x=24. Restated at the
   band's own specificity, Thresholds now matches it. */
@media (max-width: 860px) {
  body.is-ceremony .temple__band--thresholds .temple__cols {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 5vw, 2.4rem);
  }
  /* the same trap one level up: `.temple__band--thresholds .temple__wrap`
     pins the band to `100% - 5rem` for its wide desktop spread, and outranks
     the 860px `.temple__wrap` rule that takes every other band to
     `100% - 3rem`. That is the last 32px: 310 against The Work's 342. */
  body.is-ceremony .temple__band--thresholds .temple__wrap { width: min(100% - 3rem, 1240px); }
}

/* 2. "then i want you to make all of the titles left justified", and then
   "the journey and three pillars - left justified" when they had not moved.

   BOTH the kickers and the headings are FLEX ROWS, not blocks — the hairline
   rule is a ::before beside the word. text-align does nothing to a flex
   container; justify-content is the only thing that moves them, and the
   first pass set it on `.temple__label` alone at two selectors. What
   actually centres them is `.temple__centre .temple__label` and
   `.temple__centre .temple__eyebrow` at THREE, on the wrapper, so the first
   pass lost on specificity and every heading stayed centred while reporting
   `text-align: left`. Matched here at the wrapper's own specificity.

   The ::before hairlines stay suppressed exactly as they were: this moves
   the rows, it does not re-decorate them. */
@media (max-width: 820px) {
  body.is-ceremony .temple__title,
  body.is-ceremony .temple__label,
  body.is-ceremony .temple__eyebrow { text-align: left; }
  body.is-ceremony .temple__label,
  body.is-ceremony .temple__label--centre,
  body.is-ceremony .temple__eyebrow,
  body.is-ceremony .temple__centre .temple__label,
  body.is-ceremony .temple__centre .temple__eyebrow { justify-content: flex-start; }
}

/* 2026-10-28, "the journey and three pillars - left justified" on mobile.
   A third of the same trap. text-align was already left: the heading block
   was INSET. `.temple__band--pillars .temple__measure` sets its own
   `--t-measure: min(100% - 6rem, 50rem)` for the band's wider desktop
   spread, and that element rule beats the token on body, so on a phone the
   kicker and heading sat 294px at x=48 while the three pillar cards
   directly beneath them ran 342 at x=24: the title indented from its own
   cards by 24px. It takes the page measure below 820px. */
@media (max-width: 820px) {
  body.is-ceremony .temple__band--pillars .temple__measure { --t-measure: min(100% - 3rem, 47rem); }
}

/* 2026-10-28, "the illustration feels a bit muddy, make it bigger so it
   matches the desktop version more. the rings are so close to each other in
   the mobile version."

   Measured, and the gaps really are exactly half: the ring box is
   `min(70vw, 34rem)`, which is 544px on a 1440 desktop but only 273px on a
   390 phone, so the four rings fell at 60/64/54px apart there and 30/32/28
   here. The cap is what a phone never reaches, so widening the vw term is
   the only lever: 96vw gives 374px and ~41/44/38. It cannot reach 544 on a
   390 screen, so this closes most of the gap rather than all of it. */
@media (max-width: 820px) {
  body.is-ceremony .rings { width: min(96vw, 34rem); }
}

/* 2026-10-28, "make the text a bit larger too, still keeping it in one line".
   The closing line was 38.4px on a phone (the 2.6rem floor of its desktop
   clamp) and only 239px wide in a 390px box, so there was room going spare.

   The string measures 6.22em, so the largest that fits the page's own
   `100% - 3rem` measure is ~54px at 390 — more than "a bit". Capped at 3rem
   instead: 48px at 390, 299px wide, 45px clear each side. The vw term is
   what protects narrow phones (43px at 320, still one line), and nowrap
   makes the one-line rule structural rather than a hope. */
@media (max-width: 820px) {
  body.is-ceremony .temple__closing {
    font-size: min(calc((100vw - 3rem) / 6.5), 3rem);
    white-space: nowrap;
  }
}