/* milía · The details
   Same language as home/: warm near-black ground, cream type, Host Grotesk, film grain, the living photo,
   rack-focus device frames, masked headlines, drawn hairlines, magnetic pills; reduced motion = gentler.
   Three chapters (Invite, Plan, Celebrate), each opening on a photograph, then its parts, each
   with the real milía screen racking into focus out of that chapter's photograph. */

:root {
  --ground: oklch(0.16 0.008 60);
  --ground-deep: oklch(0.12 0.008 60);
  --ground-lift: oklch(0.19 0.009 60);
  --cream: oklch(0.94 0.018 80);
  --cream-dim: oklch(0.94 0.018 80 / 0.72);
  --cream-faint: oklch(0.94 0.018 80 / 0.46);
  --cream-hair: oklch(0.94 0.018 80 / 0.16);
  --cream-rule: oklch(0.94 0.018 80 / 0.12);
  --ink: oklch(0.19 0.01 60);
  --shade: 0.13 0.008 60;
  --candle: 0.8 0.085 68;            /* warm light spilling from a lit screen */

  --gutter: 16px;
  --edge: 20px;
  --fedge: 16px;            /* caption inset inside a reel frame */
  --head-h: 60px;           /* the top bar: 60px phone, 72px from 760px */
  --top-h: 60px;
  --bar-h: 64px;
  --gap: 8px;               /* the thin dark gap between frames */
  --peek: 64px;             /* how much of the first frame shows under the hero */

  --t-label: 0.75rem;       /* 12px, caps only */
  --t-sub: 0.9375rem;       /* 15px */
  --t-body: 1rem;
  --t-line: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --t-hero: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem);
  --t-room: clamp(1.375rem, 1.15rem + 1vw, 2.125rem);
  --t-h2: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  --t-plan: clamp(1.875rem, 1.3rem + 2.4vw, 3.5rem);
  --t-quote: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);       /* ease-out-quint */
  --ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --rack: 1100ms;           /* the focus pull */
  --font: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Reel frame size. The frame in focus sits a little left of centre (--lead), so the next frame
     always shows more of itself on the right than the last one does on the left. */
  --fw: 84vw;
  --fh: calc(100svh - var(--head-h) - var(--bar-h) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  --lead: calc((100vw - var(--fw)) * 0.3);
  --step: 72svh;            /* vertical scroll per frame when pinned */
  --nb-dim: 0.42;           /* how much a neighbouring frame darkens */
}

@media (min-width: 760px) { :root { --head-h: 72px; --top-h: 72px; } }
@media (min-width: 900px) {
  :root {
    --gutter: 32px; --edge: 32px; --fedge: 24px; --head-h: 72px; --bar-h: 80px; --gap: 14px; --peek: 72px;
    --fw: min(76vw, calc(var(--fh) * 1.62));
    --step: 80svh;
    --nb-dim: 0.6;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, .skip:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
  border-radius: 2px;
}
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.nowrap { white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 50;
  background: var(--cream); color: var(--ink); padding: 12px 16px; font-size: var(--t-sub);
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Type roles ---------- */
.label, .num {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.num { font-variant-numeric: tabular-nums; }
.line {
  font-size: var(--t-line);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.line--hero { font-size: var(--t-hero); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; }
.sub {
  margin-top: 6px;
  font-size: var(--t-sub);
  line-height: 1.5;
  color: var(--cream-dim);
}
.h2 {
  font-size: var(--t-h2);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-left: -0.05em;
  text-wrap: balance;
}
.eyebrow { color: var(--cream-faint); margin-bottom: 20px; }
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }
/* ---------- Top bar (identical on every page) ----------
   Transparent over the hero; solid ground + one hairline once the page has moved ~40px.
   Desktop: Home · The details · Pricing · Sign in, then the pill. Phone (<760px): logo, pill, menu. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: calc(var(--top-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  display: flex; align-items: center; gap: 8px;
  background: oklch(0.16 0.008 60 / 0);
  box-shadow: inset 0 -1px 0 oklch(0.94 0.018 80 / 0);
  transition: background-color 420ms var(--ease), box-shadow 420ms var(--ease);
}
.top.solid { background: var(--ground); box-shadow: inset 0 -1px 0 var(--cream-rule); }
.logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.logo img { height: 15px; width: auto; }
@media (min-width: 760px) { .logo img { height: 18px; } }

.top-nav { display: none; align-items: center; margin-right: 10px; }
.top-nav a, .top-pill {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.top-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--cream-dim);
  transition: color 200ms var(--ease);
}
.top-nav a[aria-current="page"] { color: var(--cream); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (hover: hover) { .top-nav a:hover { color: var(--cream); } }
.top-pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px 0 calc(18px + 0.18em);
  border: 1px solid var(--cream); border-radius: 999px;
  color: var(--cream);
  transition: background-color 250ms var(--ease), color 250ms var(--ease);
}
.top-pill::before { content: ""; position: absolute; inset: -3px -2px; }
@media (hover: hover) { .top-pill:hover { background: var(--cream); color: var(--ink); } }
.top-pill:focus-visible { border-radius: 999px; }
.tp-short { display: none; }
@media (max-width: 359px) { .tp-long { display: none; } .tp-short { display: inline; } }

.menu-btn {
  display: grid; place-content: center; gap: 6px;
  width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn i { display: block; width: 22px; height: 1px; background: var(--cream); transition: translate 300ms var(--ease); }
.menu-btn i + i { width: 14px; justify-self: end; }
@media (hover: hover) { .menu-btn:hover i + i { width: 22px; } }
.menu-btn:focus-visible { outline-offset: -2px; border-radius: 50%; }

@media (min-width: 760px) {
  .top { gap: 4px; }
  .top-nav { display: flex; }
  .menu-btn { display: none; }
}

/* the phone menu: a quiet full-screen sheet */
.sheet {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: var(--ground);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 320ms var(--ease);
}
.sheet[hidden] { display: none; }
.sheet.open { opacity: 1; }
.sheet-head { flex: none; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; }
.sheet-close {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: -10px; padding: 0 10px;
  border: 0; background: none; cursor: pointer; color: var(--cream);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
}
.sheet-nav { flex: 1; display: flex; align-items: center; padding: 32px 0; }
.sheet-nav ol { width: 100%; }
.sheet-nav li { border-bottom: 1px solid var(--cream-rule); opacity: 0; translate: 0 14px; transition: opacity 500ms var(--ease), translate 700ms var(--ease); }
.sheet-nav li:first-child { border-top: 1px solid var(--cream-rule); }
.sheet.open .sheet-nav li { opacity: 1; translate: none; transition-delay: calc(80ms + var(--i, 0) * 55ms); }
.sheet-nav a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0 20px;
  text-decoration: none; color: var(--cream-dim);
}
.sheet-nav .num { color: var(--cream-faint); min-width: 2ch; }
.sheet-nav .t { font-size: 2rem; font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
.sheet-nav a[aria-current="page"] { color: var(--cream); }
.sheet-nav a[aria-current="page"] .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.sheet-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-foot .label { color: var(--cream-faint); }
html.locked, html.locked body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sheet-nav li { translate: none; transition: opacity 300ms ease-out; }
  .sheet.open .sheet-nav li { transition-delay: 0ms; }
}

/* ---------- Corner captions (shared) ---------- */
.cap { position: relative; z-index: 2; }
.hero .cap, .words .cap { position: absolute; }
.cap--tl { top: calc(var(--head-h) + env(safe-area-inset-top) + 16px); left: var(--edge); color: var(--cream-dim); }
.cap--bl { left: var(--edge); bottom: calc(var(--edge) + 4px); max-width: min(32ch, calc(100% - 2 * var(--edge))); }
.cap--br { right: var(--edge); bottom: calc(var(--edge) + 4px); }

/* ---------- Hero: the living photo ---------- */
/* Fills the whole first screen; the scroll cue says there is more below. */
.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden; isolation: isolate;
  background: var(--ground-deep);
}
.living { position: absolute; inset: 0; }
.poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 50%;
}
@media (min-aspect-ratio: 1/1) { .poster { object-position: 53% 50%; } }
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero::before { top: 0; height: 24%; background: linear-gradient(oklch(var(--shade) / 0.6), oklch(var(--shade) / 0)); }
.hero::after { bottom: 0; height: 46%; background: linear-gradient(oklch(var(--shade) / 0), oklch(var(--shade) / 0.62) 72%, var(--ground)); }
.hero-shade { /* deepens as you scroll on into the reel */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--ground); opacity: var(--shade-o, 0);
}
.hero .cap--bl { max-width: 9ch; }
@media (min-width: 900px) { .hero .cap--bl { max-width: none; } }

/* the scroll cue: a fine line, a point of light travelling down it */
.cue {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: 44px; padding-top: 8px;
  color: var(--cream-dim); text-decoration: none;
}
.cue .label { writing-mode: vertical-rl; letter-spacing: 0.2em; }
.cue i { display: block; width: 1px; height: 56px; background: var(--cream-hair); position: relative; overflow: hidden; }
.cue i::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(oklch(0.94 0.018 80 / 0), var(--cream));
  transform: translateY(-100%); animation: cue 2.6s var(--ease-io) 2.2s infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(260%); } }
@media (hover: hover) { .cue:hover { color: var(--cream); } }
@media (min-width: 900px) { .cue i { height: 72px; } }

/* light from the screen, falling on the scene around it */
.spill {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(30% 42% at var(--sx, 50%) var(--sy, 54%), oklch(var(--candle) / 0.3), oklch(var(--candle) / 0) 72%),
    radial-gradient(60% 70% at var(--sx, 50%) var(--sy, 54%), oklch(var(--candle) / 0.07), oklch(var(--candle) / 0) 80%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity calc(var(--rack) * 0.6) var(--ease-io);
}
/* The device. Dark titanium, a thin black bezel, true iPhone proportions (screen 1170 x 2532),
   corner radii taken from the screen (12.1% of its width) plus the bezel. No gloss, no notch art. */
.device {
  --bz: 2.7cqw;
  container-type: inline-size;
  position: relative;
  height: min(100%, 680px);
  aspect-ratio: 0.4752;
  max-width: 100%;
}
.room-stage .device, .reveal .device { height: min(100%, 680px); }
.bezel {
  position: absolute; inset: 0;
  padding: var(--bz);
  border-radius: calc(11.5cqw + var(--bz));
  border: 1.5px solid transparent;
  background:
    linear-gradient(oklch(0.115 0.004 60), oklch(0.115 0.004 60)) padding-box,
    linear-gradient(158deg, oklch(0.6 0.007 75), oklch(0.36 0.006 70) 22%, oklch(0.47 0.007 72) 52%, oklch(0.3 0.005 68) 80%, oklch(0.44 0.006 72)) border-box;
  box-shadow:
    0 0 0 0.5px oklch(0.2 0.005 60),
    0 2px 3px -1px oklch(0.08 0.02 50 / 0.5),
    0 30px 50px -28px oklch(0.07 0.025 45 / 0.85),
    0 70px 110px -40px oklch(0.07 0.03 45 / 0.75),
    0 0 90px 6px oklch(var(--candle) / 0.1);
}
.screen {
  position: relative; height: 100%;
  border-radius: 11.5cqw;
  overflow: hidden;
  background: oklch(0.97 0.005 80);
  isolation: isolate;
}
.screen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  -webkit-user-drag: none; pointer-events: none;
}
/* a sequence: the incoming screen fades in on top of the one it replaces */
.screen[data-seq] img { opacity: 0; z-index: 0; transition: opacity 1200ms var(--ease-io); }
.screen[data-seq]:not(.playing) img:first-child { opacity: 1; transition: none; }
.screen[data-seq] img.prev { opacity: 1; z-index: 1; transition: none; }
.screen[data-seq] img.on { opacity: 1; z-index: 2; }
.screen::after { /* the island, faint */
  content: ""; position: absolute; z-index: 2; top: 2.6cqw; left: 50%; translate: -50% 0;
  width: 24%; height: 6.6cqw; border-radius: 99px;
  background: oklch(0.1 0.003 60 / 0.82);
}
.no-island .screen::after { display: none; }

/* a landscape screen: frameless, floating, a fine rounded edge */
.slate {
  position: relative;
  width: min(100%, 1060px);
  aspect-ratio: 2400 / 1559;
  max-height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: oklch(0.97 0.005 80);
  box-shadow:
    0 0 0 1px oklch(0.94 0.018 80 / 0.1),
    0 2px 4px -2px oklch(0.08 0.02 50 / 0.4),
    0 40px 70px -36px oklch(0.07 0.025 45 / 0.85),
    0 80px 140px -60px oklch(0.07 0.03 45 / 0.7),
    0 0 100px 6px oklch(var(--candle) / 0.06);
}
.slate img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; -webkit-user-drag: none; pointer-events: none; }
.price { font-size: var(--t-line); font-variant-numeric: tabular-nums; }
.pill {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px;
  background: var(--cream); color: var(--ink);
  font-size: var(--t-sub); font-weight: 500; letter-spacing: 0.005em;
  text-decoration: none;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}
.pill:focus-visible, .plan--rec .plan-cta:focus-visible { border-radius: 999px; }
@media (hover: hover) { .pill:hover { background: oklch(0.98 0.012 80); } }
.pill:active, .plan--rec .plan-cta:active { transform: scale(0.98); }
/* ---------- Film grain over everything, very light ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 25; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.07;
  mix-blend-mode: overlay;
  animation: grain 900ms steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}


/* =====================================================================
   The details: everything below is this page's own.
   ===================================================================== */
:root {
  --ch-h: 44px;                                         /* the chapter bar */
  --bars: calc(var(--top-h) + var(--ch-h) + env(safe-area-inset-top));
  --t-part: clamp(1.625rem, 1.2rem + 1.7vw, 2.75rem);
  --t-ch: clamp(2.5rem, 1.6rem + 3.6vw, 5.25rem);
  --sec: 88px;                                          /* breathing room between parts */
}
@media (min-width: 900px) { :root { --sec: 144px; } }
html { scroll-padding-top: var(--bars); }

/* hero title: bigger than home's line, it names the page */
.hero-line { font-size: var(--t-ch); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; margin-left: -0.04em; }
.hero .cap--bl { max-width: none; }

/* ---------- Chapter bar ---------- */
.chapters {
  position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top)); z-index: 20;
  height: var(--ch-h);
  background: var(--ground);
  box-shadow: inset 0 -1px 0 var(--cream-rule);
}
.chapters ol { display: flex; justify-content: center; align-items: center; height: 100%; gap: 2px; }
.chapters a {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  text-decoration: none; color: var(--cream-dim);
  transition: color 300ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chapters .num { font-size: inherit; letter-spacing: 0.14em; color: var(--cream-faint); transition: color 300ms var(--ease); }
.chapters a::after { /* the underline draws in under the chapter in view */
  content: ""; position: absolute; left: 12px; right: calc(12px + 0.18em); bottom: 9px; height: 1px;
  background: var(--cream); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 600ms var(--ease);
}
.chapters a.is-on, .chapters a.is-on .num { color: var(--cream); }
.chapters a.is-on::after { transform: none; }
@media (hover: hover) { .chapters a:hover { color: var(--cream); } }
.chapters a:focus-visible { outline-offset: -4px; }
@media (min-width: 760px) { .chapters ol { gap: 16px; } }

/* ---------- Chapter openings ---------- */
.chapter { position: relative; }
.opening { position: relative; isolation: isolate; }
.op-img { position: absolute; inset: 0; overflow: hidden; background: var(--ground-deep); }
.op-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--os, 1)); transform-origin: 50% 60%;
}
.ch-line { font-size: var(--t-ch); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; margin-left: -0.04em; text-wrap: balance; }

/* a full-bleed band: the photograph, the chapter's number in the corner, the line low */
.opening--band { height: calc(100svh - var(--bars)); min-height: 520px; overflow: hidden; }
.opening--band .cap { position: absolute; }
.opening--band .cap--tl { top: 24px; }
.opening--band .cap--tl .num, .op-label .num { color: var(--cream); margin-right: 8px; }
.opening--band .cap--bl { max-width: min(12ch, calc(100% - 2 * var(--edge))); bottom: calc(var(--edge) + 12px); }
.opening--band::before, .opening--band::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.opening--band::before { top: 0; height: 26%; background: linear-gradient(oklch(var(--shade) / 0.7), oklch(var(--shade) / 0)); }
.opening--band::after { bottom: 0; height: 58%; background: linear-gradient(oklch(var(--shade) / 0), oklch(var(--shade) / 0.66) 70%, var(--ground)); }
.opening--details .op-img img { object-position: 40% 50%; filter: brightness(0.86); }
.opening--vow .op-img img { object-position: 74% 50%; }
@media (min-width: 900px) {
  .opening--band { height: min(calc(100svh - var(--bars)), 64vw); }
  .opening--details .op-img img { object-position: 50% 46%; }
  .opening--vow .op-img img { object-position: 60% 56%; }
  /* the shoreline: the line sits on the right, across the water from the couple */
  .opening--vow .cap--bl { left: auto; right: var(--edge); text-align: right; }
  .opening--vow .cap--tl { left: auto; right: var(--edge); }
}

/* a split: the words on the ground, the photograph tall beside them */
.opening--split { display: grid; padding-top: 40px; }
.chapter + .chapter { margin-top: var(--sec); }
.op-words { padding: 0 var(--edge) 32px; }
.op-label { color: var(--cream-dim); margin-bottom: 22px; }
.opening--split .op-img { position: relative; inset: auto; aspect-ratio: 4 / 5; }
.opening--split .op-img img { object-position: 46% 50%; }
@media (min-width: 900px) {
  .opening--split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: end;
    padding-top: 40px;
  }
  .op-words { padding: 0 clamp(32px, 4vw, 72px) 8px var(--edge); }
  .opening--split .op-img { aspect-ratio: auto; height: min(calc(100svh - var(--bars) - 80px), 52vw); }
  .opening--split .op-img img { object-position: 30% 50%; }
}

/* ---------- Parts ---------- */
.parts { padding-bottom: 8px; }
.part { padding-top: var(--sec); }
.part-text { position: relative; padding: 22px var(--edge) 28px; }
.part-text::before, .cel::before { /* a hairline that draws above each part */
  content: ""; position: absolute; top: 0; left: var(--edge); right: var(--edge); height: 1px;
  background: var(--cream-rule);
}
.part-n { color: var(--cream-faint); margin-bottom: 14px; }
.part-name { font-size: var(--t-part); font-weight: 300; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.part-line { margin-top: 12px; font-size: var(--t-body); line-height: 1.5; color: var(--cream-dim); max-width: 34ch; text-wrap: pretty; }

@media (min-width: 900px) {
  .part {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
    column-gap: clamp(32px, 4vw, 72px);
    padding: var(--sec) var(--edge) 0;
  }
  .part-text { padding: 24px 0 0; max-width: 26rem; }
  .part-text::before { left: 0; right: 0; }
  .parts--left .part { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .parts--left .part .scene { order: -1; }
  .parts--left .part-text { justify-self: end; width: 100%; }
  .parts--left .part--band .part-text { width: auto; justify-self: auto; }
}

/* ---------- The scene: a photograph that racks out of focus as the real screen rises into it ---------- */
.scene { position: relative; margin: 0; overflow: hidden; isolation: isolate; background: var(--ground-deep); aspect-ratio: var(--ar, 1); }
.scene--phone { --ar: 0.74; }
.scene--note { --ar: 0.86; }
.scene--slate { --ar: 0.96; }
.scene--band { --ar: 0.92; }
.scene-photo { position: absolute; inset: -3%; z-index: 0; }
.scene-push { position: absolute; inset: 0; transition: scale calc(var(--rack) * 1.3) var(--ease); }
.scene-push picture { position: absolute; inset: 0; display: block; }
.scene-push img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.scene-push .soft { opacity: 0; transition: opacity var(--rack) var(--ease-io); }
.scene-push .soft img { filter: blur(14px) brightness(0.56) saturate(0.82); transform: scale(1.06); }
.scene[data-photo="details"] .soft img { filter: blur(14px) brightness(0.5) saturate(0.82); }
.scene.is-focus .scene-push { scale: 1.045; }
.scene.is-focus .scene-push .soft { opacity: 1; }
.scene .spill { --sx: 50%; --sy: 52%; }
.scene.is-focus .spill { opacity: 1; transition: opacity calc(var(--rack) * 1.4) var(--ease-io) calc(var(--rack) * 0.3); }
.scene::after { /* edges settle into the ground */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, oklch(var(--shade) / 0) 55%, oklch(var(--shade) / 0.45));
}
.scene-fg {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  padding: 9% 7%;
  container-type: size;
}
.js .scene-fg > * { opacity: 0; translate: 0 18%; transition: opacity 520ms var(--ease-in), translate 600ms var(--ease-in); }
.js .scene.is-focus .scene-fg > * {
  opacity: 1; translate: 0 0;
  transition: opacity 700ms var(--ease) calc(var(--rack) * 0.22), translate var(--rack) var(--ease) calc(var(--rack) * 0.16);
}
.scene .device { height: min(100%, 640px); }
.scene .slate { width: min(100cqw, 153cqh, 1060px); }

/* phones: a landscape screen is cropped to the part that matters, close enough to read */
.slate--zoom { aspect-ratio: 1.08; border-radius: 8px; }
.scene .slate--zoom { width: min(100cqw, 108cqh); }
.slate--zoom img {
  position: absolute; top: 0; left: 0; max-width: none;
  width: calc(var(--z, 1) * 100%); height: auto; aspect-ratio: 2400 / 1559; object-fit: fill;
  translate: calc(var(--zx, 0%) * -1) calc(var(--zy, 0%) * -1);
}
.slate--note { aspect-ratio: 936 / 1026; border-radius: 14px; }
.scene .slate--note { width: min(100cqw, 91cqh, 460px); }
.slate--seating { aspect-ratio: 1.12; border-radius: 8px; }
.scene .slate--seating { width: min(100cqw, 112cqh); }
.slate--seating img { object-position: 1.5% 50%; }
.slate picture { display: contents; }

@media (min-width: 760px) {
  .slate--seating { aspect-ratio: 2400 / 1559; border-radius: 10px; }
  .scene .slate--seating { width: min(100cqw, 153cqh, 1180px); }
  .slate--seating img { object-position: 0 0; }
}
@media (min-width: 900px) {
  .scene--phone { --ar: 1.02; }
  .scene--note { --ar: 1.08; }
  .scene--slate { --ar: 1.22; }
  .scene-fg { padding: 8% 7%; }
  .scene--phone .scene-fg { padding: 7% 8%; }
  /* on a larger screen the whole page shows, as it is */
  .slate--zoom { aspect-ratio: 2400 / 1559; border-radius: 10px; }
  .scene .slate--zoom { width: min(100cqw, 153cqh, 1060px); }
  .slate--zoom img { position: static; width: 100%; height: 100%; translate: none; object-fit: cover; }
}

/* the seating plan: a full-bleed band, the words above it */
.part--band .scene { --ar: 0.92; }
@media (min-width: 900px) {
  .part--band { display: block; padding: var(--sec) 0 0; }
  .part--band .part-text {
    max-width: none; margin: 0 var(--edge) 40px;
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px); align-items: end;
  }
  .part--band .part-n { grid-column: 1; }
  .part--band .part-name { grid-column: 1; }
  .part--band .part-line { grid-column: 2; grid-row: 2; margin: 0; padding-bottom: 4px; }
  .part--band .scene { --ar: auto; aspect-ratio: auto; height: min(90svh, 56vw); }
  .part--band .scene-fg { padding: 64px 48px; }
}

/* ---------- The designs: a strip of large previews ---------- */
.designs { padding-top: var(--sec); padding-bottom: 8px; }
.designs-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.designs-head .part-text { flex: 1; }
.designs-ctrl { display: none; }
.d-strip {
  position: relative;
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding: 12px var(--edge) 4px;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  outline: none;
}
.d-strip::-webkit-scrollbar { display: none; }
.d-strip:focus-visible { outline: 2px solid var(--cream); outline-offset: -2px; }
.d-strip.is-drag { scroll-snap-type: none; cursor: grabbing; }
.design { position: relative; flex: 0 0 auto; width: min(64vw, 300px); scroll-snap-align: start; }
.design:last-child { margin-right: calc(100vw - min(64vw, 300px) - 2 * var(--edge)); }
.d-stage { position: relative; }
.d-desk { display: none; }
.d-stage .d-phone { height: auto; width: 100%; }
.d-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 16px; }
.d-name { font-size: var(--t-room); font-weight: 300; line-height: 1.1; letter-spacing: -0.025em; }
.d-live {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap;
  font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--cream-dim); text-decoration: none;
  transition: color 200ms var(--ease);
}
.d-live span[aria-hidden] { transition: translate 300ms var(--ease); }
@media (hover: hover) { .d-live:hover { color: var(--cream); } .d-live:hover span[aria-hidden] { translate: 2px -2px; } }
.d-progress { margin: 24px var(--edge) 0; height: 1px; background: var(--cream-hair); position: relative; overflow: hidden; }
.d-progress i { position: absolute; inset: 0; background: var(--cream-dim); transform-origin: 0 50%; transform: scaleX(var(--dp, 0.17)); }

@media (min-width: 760px) {
  .designs-ctrl { display: flex; align-items: center; gap: 4px; padding: 0 calc(var(--edge) - 12px) 28px 0; }
  .designs-ctrl .count { margin-right: 12px; color: var(--cream); }
  .designs-ctrl .count .d-all { color: var(--cream-faint); }
  .d-strip { gap: clamp(28px, 3vw, 48px); padding-top: 24px; cursor: grab; }
  .design { width: clamp(520px, 60vw, 920px); }
  .design:last-child { margin-right: calc(100vw - clamp(520px, 60vw, 920px) - 2 * var(--edge)); }
  .d-stage { padding: 0 8% 7% 0; }
  .d-desk { display: block; width: 100%; aspect-ratio: 1.6; border-radius: 8px; }
  .d-desk img { -webkit-user-drag: none; }
  .d-stage .d-phone { position: absolute; right: 0; bottom: 0; width: auto; height: 76%; }
  .d-cap { padding-top: 22px; }
}
.arrow {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--cream);
  transition: opacity 200ms var(--ease), background-color 200ms var(--ease);
}
@media (hover: hover) { .arrow:hover { background: oklch(0.94 0.018 80 / 0.08); } }
.arrow:active svg { transform: scale(0.9); }
.arrow[aria-disabled="true"] { opacity: 0.28; cursor: default; background: none; }
.count { white-space: nowrap; }

@media (min-width: 900px) { .designs-head { padding: 0 var(--edge); } .designs-head .designs-ctrl { padding-right: 0; margin-right: -12px; } }

/* ---------- Celebrate: the album held in view while the parts pass ---------- */
.celebrate { padding-top: var(--sec); }
.cel-stage .scene { --ar: 0.8; }
.cel-list { padding-top: 24px; }
.cel { position: relative; padding: 22px var(--edge) 30px; }
.cel .part-line { margin-top: 10px; }
@media (min-width: 900px) {
  .celebrate {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px);
    padding: var(--sec) var(--edge) 0;
    align-items: start;
  }
  .cel-stage { position: sticky; top: calc(var(--bars) + 24px); }
  .cel-stage .scene { --ar: auto; aspect-ratio: auto; height: calc(100svh - var(--bars) - 48px); max-height: 820px; }
  .cel-list { padding: 18svh 0 18svh; }
  .cel { padding: 26px 0 0; min-height: 30svh; }
  .cel::before { left: 0; right: 0; }
}

/* Each part carries its own screen. On a phone it sits under the words, full-bleed like the other parts;
   on a wide screen the stage holds them all and racks from one to the next as each part reaches the middle. */
.cel-stage { display: none; }
.cel + .cel { margin-top: calc(var(--sec) * 0.55); }
.cel-scene { margin: 26px calc(var(--edge) * -1) 0; }
.cel-scene.scene--note { --ar: 0.9; }
.cel-scene.scene--phone { --ar: 0.8; }
@media (min-width: 900px) {
  .cel-stage { display: block; }
  .cel-scene { display: none; }
  .cel + .cel { margin-top: 0; }
}
.takes, .take { width: 100%; height: 100%; display: grid; place-items: center; }
.take { grid-area: 1 / 1; container-type: size; }
.takes { grid-template: 1fr / 1fr; }
.take .device { height: min(100%, 640px); }
.take .slate--note { width: min(100cqw, 91cqh, 470px); }
/* the pull: the outgoing screen softens and falls back as the next one sharpens into place */
.take {
  opacity: 0; filter: blur(14px); scale: 0.965; pointer-events: none;
  transition: opacity 560ms var(--ease-in), filter 640ms var(--ease-in), scale 800ms var(--ease-in);
}
.take.on {
  opacity: 1; filter: blur(0); scale: 1;
  transition: opacity 760ms var(--ease) 260ms, filter calc(var(--rack) * 0.9) var(--ease) 220ms, scale var(--rack) var(--ease) 200ms;
}
/* the album and the guestbook share one phone: only its screen changes */
.screen--swap img { opacity: 0; transition: opacity 1000ms var(--ease-io); }
.screen--swap img.on { opacity: 1; }

/* ---------- The door ---------- */
.close {
  position: relative; isolation: isolate;
  padding: calc(var(--sec) + 24px) var(--edge) 72px;
  display: grid; gap: 32px;
}
.close::before { /* a little candlelight on the ground */
  content: ""; position: absolute; inset: 10% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 20% 70%, oklch(var(--candle) / 0.07), oklch(var(--candle) / 0));
}
.end-line {
  font-size: clamp(2.75rem, 1.3rem + 5vw, 6.5rem);
  font-weight: 300; line-height: 0.96; letter-spacing: -0.045em; margin-left: -0.04em;
}
.end-line > span { display: block; white-space: nowrap; }
.close-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.close-foot .price { color: var(--cream-dim); }
.close-foot .amt { color: var(--cream); }
.close-ctas { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.more-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: var(--t-sub); text-decoration: none; color: var(--cream);
  border-bottom: 1px solid var(--cream-hair);
  transition: border-color 200ms var(--ease);
}
.more-link::after { content: "→"; transition: translate 300ms var(--ease); }
@media (hover: hover) { .more-link:hover { border-color: var(--cream); } .more-link:hover::after { translate: 3px 0; } }
@media (min-width: 900px) {
  .close { padding-block: calc(var(--sec) + 40px) 112px; gap: 48px; }
}

/* ---------- Footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  padding: 12px var(--edge) calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid oklch(0.94 0.018 80 / 0.1);
  font-size: var(--t-label); letter-spacing: 0.04em; color: var(--cream-faint);
}
.foot-nav { display: flex; flex-wrap: wrap; margin-left: -10px; }
.foot a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; text-decoration: none; transition: color 200ms var(--ease); }
.foot-mail { color: var(--cream-dim); }
@media (hover: hover) { .foot a:hover, .foot a:hover .foot-mail { color: var(--cream); } }
.foot-c { padding: 12px 0; }

/* ---------- Arrivals ---------- */
.js .hero .cap {
  opacity: 0; translate: 0 10px;
  transition: opacity 1100ms var(--ease), translate 1100ms var(--ease);
  transition-delay: var(--dl, 0ms);
}
.js .hero .cap.in { opacity: 1; translate: 0 0; }
.js .hero .living { animation: settle 2600ms var(--ease) both; }
@keyframes settle { from { transform: scale(1.06); opacity: 0.001; } 30% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes fade { from { opacity: 0.001; } to { opacity: 1; } }
@keyframes cue-rm { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ===================== Motion layer (html.mo, set by main.js) ===================== */
.mo { --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-hair {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 1px; z-index: 40;
  background: var(--cream); opacity: 0.38; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
}
.hero-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-ui > * { pointer-events: auto; }
.mo .hero { background: var(--ground); }
.mo .living { transform-origin: 50% 35%; }

/* headlines: each line slides up out of its mask and comes into focus */
.mo .mk { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.08em 0.08em 0.16em; margin: -0.08em -0.08em -0.16em; }
.mo .mk-i {
  display: inline-block;
  transform: translate3d(0, 112%, 0); opacity: 0; filter: blur(8px);
  transition: transform 500ms var(--ease-in), opacity 400ms ease-in, filter 400ms ease-in;
}
.mo .in .mk-i, .mo .mk-host.in .mk-i {
  transform: none; opacity: 1; filter: none;
  transition: transform 1300ms var(--ease-expo), opacity 900ms var(--ease), filter 1000ms var(--ease);
  transition-delay: calc(var(--li, 0) * 70ms + var(--hd, 120ms));
}
.mo .hero .hero-line { --hd: 900ms; opacity: 1; translate: none; }
.mo .op-label, .mo .opening--band .cap--tl { opacity: 0; clip-path: inset(0 100% 0 0); translate: -6px 0; }
.mo .in .op-label, .mo .opening--band.in .cap--tl {
  opacity: 1; clip-path: inset(0 0 0 0); translate: none;
  transition: opacity 800ms var(--ease), clip-path 1200ms var(--ease-expo), translate 1200ms var(--ease-expo);
}

/* parts: the hairline draws, the words rise */
.mo .part-text::before, .mo .cel::before { transform: scaleX(0); transform-origin: 0 50%; }
.mo .in > .part-text::before, .mo .part-text.in::before, .mo .cel.in::before { transform: none; transition: transform 1400ms var(--ease-expo) 40ms; }
.mo .part-text > *, .mo .cel > *, .mo .close-foot, .mo .d-strip {
  opacity: 0; translate: 0 16px;
  transition: opacity 900ms var(--ease) calc(var(--k, 0) * 90ms + 140ms), translate 1100ms var(--ease-expo) calc(var(--k, 0) * 90ms + 140ms);
}
.mo .part-text.in > *, .mo .cel.in > *, .mo .close-foot.in, .mo .d-strip.in { opacity: 1; translate: none; }

/* desktop pills: a slight magnetic lean and a soft sweep */
.mo .mag {
  position: relative; isolation: isolate; overflow: hidden;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: background-color 200ms var(--ease), transform 200ms var(--ease), translate 600ms var(--ease-expo);
}
.mo .mag::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: oklch(0.99 0.008 80);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 500ms var(--ease-in);
}
.mo .pill.mag:hover { background: var(--cream); }
.mo .mag:hover::before { transform: none; transform-origin: 0 50%; transition: transform 700ms var(--ease-expo); }

/* ---------- Reduced motion: the same beats, gentler. Fades, nothing travels or scales. ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero .cap { translate: none; transition: opacity 900ms ease-out; transition-delay: var(--dl, 0ms); }
  .js .hero .living { animation: fade 1400ms ease-out both; }
  .cue i::after { animation: cue-rm 3.2s ease-in-out 1.6s infinite; transform: none; top: 30%; }
  .grain { animation: none; }
  .pill:active, .arrow:active svg { transform: none; }
  .more-link::after, .d-live span[aria-hidden] { transition: none; }
  .chapters a::after { transition: opacity 400ms ease-out; transform: none; opacity: 0; }
  .chapters a.is-on::after { opacity: 1; }
  .scene-push, .scene.is-focus .scene-push { scale: none; transition: none; }
  .scene-push .soft { transition: opacity 700ms ease-out; }
  .js .scene-fg > *, .js .scene.is-focus .scene-fg > * { translate: none; }
  .js .scene-fg > * { transition: opacity 450ms ease-out; }
  .js .scene.is-focus .scene-fg > * { transition: opacity 700ms ease-out 150ms; }
  .take { filter: none; scale: none; transition: opacity 500ms ease-out; }
  .take.on { filter: none; scale: none; transition: opacity 700ms ease-out 200ms; }
}
.rm.mo .mk-i, .rm.mo .in .mk-i { transform: none; filter: none; }
.rm.mo .mk-i { transition: opacity 300ms ease-out; }
.rm.mo .in .mk-i { transition: opacity 600ms ease-out calc(var(--li, 0) * 90ms + var(--hd, 0ms)); }
.rm.mo .op-label, .rm.mo .opening--band .cap--tl { clip-path: none; translate: none; }
.rm.mo .part-text::before, .rm.mo .cel::before { transform: none; opacity: 0; }
.rm.mo .in > .part-text::before, .rm.mo .part-text.in::before, .rm.mo .cel.in::before { opacity: 1; transition: opacity 600ms ease-out; }
.rm.mo .part-text > *, .rm.mo .cel > *, .rm.mo .close-foot, .rm.mo .d-strip { translate: none; transition: opacity 600ms ease-out calc(var(--k, 0) * 60ms); }

/* ---------- Live site: the legal identity line under the footer (filled by /site.js from LEGAL) ---------- */
.ft-legal { flex-basis: 100%; padding: 0 0 12px; line-height: 1.5; color: var(--cream-faint); }
.ft-legal:empty { display: none; }