/* ==========================================================================
   Amanda XVIII — Maison Rouge, one screen per page
   Black velvet, crimson lacquer and ivory. Fonts: Bodoni Moda, Cormorant Garamond, Jost (SIL OFL 1.1).
   ========================================================================== */

:root {
  color-scheme: dark;
  --noir: #0b0709; --noir-2: #110a0d; --velvet: #170c11; --oxblood: #3a0a15;
  --crimson: #a3122a; --scarlet: #d32a41; --rose: #eba9b1;
  --ivory: #f6eee5; --paper: #f7efe5; --pearl: #d8cfd2; --mist: #a6999d; --ink: #2a1418;
  --line: rgba(246, 238, 229, .14); --line-strong: rgba(246, 238, 229, .26); --line-red: rgba(211, 42, 65, .5);
  --lacquer: linear-gradient(135deg, #e2394e 0%, #b3172f 38%, #7d0b1e 70%, #aa1631 100%);
  --display: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --vh: 1vh; --top: 0px; --bar: 68px;
  --px: clamp(26px, 6vw, 72px);
}
@supports (height: 1svh) { :root { --vh: 1svh; } }
.admin-bar { --top: 32px; }
@media (max-width: 782px) { .admin-bar { --top: 46px; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
html { background: var(--noir); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 280px; background: var(--noir); color: var(--ivory); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200000; pointer-events: none; opacity: .055;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:where(a, button, input, textarea):focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; }
h1:focus, h3:focus { outline: none; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cl-skip:focus { z-index: 300000; position: fixed; top: 12px; left: 12px; width: auto; height: auto; margin: 0; padding: 12px 17px; clip: auto; clip-path: none; color: var(--ink); background: var(--ivory); }
.cl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cl-seal-band { font-family: var(--sans); font-weight: 500; }
.br-phone { display: none; }
/* ---------- Type ---------- */
.kicker, .section-label, .nav, .hero-credit, .opening-corner, .cover-kicker, .seal-hint, .cl-eyebrow {
  font: 500 10.5px/1.6 var(--sans); letter-spacing: .36em; text-transform: uppercase;
}
.kicker { color: var(--rose); }
.star-line { display: flex; align-items: center; justify-content: center; gap: 12px; width: 150px; }
.star-line::before, .star-line::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 238, 229, .5)); }
.star-line::after { background: linear-gradient(90deg, rgba(246, 238, 229, .5), transparent); }
.star-line i { width: 7px; height: 7px; flex: none; background: var(--scarlet); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(211, 42, 65, .18), 0 0 14px rgba(211, 42, 65, .6); }
.arrow { display: block; flex: none; width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.arrow.down { transform: rotate(90deg); }

/* ---------- Buttons ---------- */
.button {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 30px; border: 1px solid transparent; border-radius: 999px;
  font: 500 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s, border-color .35s, color .35s;
}
.button:hover .arrow { transform: translateX(4px); }
.button:active { transform: scale(.98); }
.button.red {
  color: #fff6f0; background: var(--lacquer); border-color: rgba(255, 170, 182, .35);
  box-shadow: 0 16px 34px -14px rgba(211, 42, 65, .75), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(60, 0, 10, .45);
}
.button.red::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 225, 230, .45) 50%, transparent 70%); transform: translateX(-130%);
}
.button.red:hover::after { animation: sheen 1.1s var(--ease); }
.button.red:hover { box-shadow: 0 20px 40px -14px rgba(211, 42, 65, .95), inset 0 1px 0 rgba(255, 255, 255, .3); }
.button.outline { color: var(--ivory); background: rgba(11, 7, 9, .35); border-color: rgba(246, 238, 229, .32); }
.button.outline:hover { border-color: var(--scarlet); background: rgba(211, 42, 65, .1); }
.button .icon, .button > svg:not(.arrow) { width: 17px; height: 17px; flex: none; }
@keyframes sheen { to { transform: translateX(130%); } }
.cl-monogram { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; aspect-ratio: 1; }
.cl-monogram img { width: 100%; height: auto; }
.cl-monogram-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(246, 238, 229, .45); box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(211, 42, 65, .45); }
.cl-a { width: 64%; height: auto; fill: currentColor; color: var(--ivory); }

/* ==========================================================================
   Opening: the cover, the curtain, then the written A
   ========================================================================== */
.opener { position: fixed; top: var(--top); right: 0; bottom: 0; left: 0; z-index: 100000; isolation: isolate; overflow: hidden; background: #0a0708; color: var(--ivory); }
.cl-document:not(.cl-js) .opener { display: none; }
.opener.is-fading { opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.opener-surround {
  position: absolute; inset: 0; opacity: .5;
  background: linear-gradient(90deg, rgba(10, 7, 8, .2), rgba(10, 7, 8, .96) 38%, rgba(10, 7, 8, .96) 62%, rgba(10, 7, 8, .2)), linear-gradient(0deg, rgba(10, 7, 8, .95), transparent 60%), url("./amanda/premiere.webp") center bottom / cover no-repeat;
}
.opener-screen { position: absolute; inset: 0; width: min(100%, calc(var(--vh) * 56.25)); margin-inline: auto; overflow: hidden; background: #100b0e url("./amanda/opener-poster.webp") center / cover no-repeat; box-shadow: 0 0 90px 40px #090709; }
.opener-screen .cl-opening-poster, .opener-screen .cl-reveal-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cl-opening-poster { transform: scale(1.04); animation: drift 24s ease-in-out infinite alternate; }
.cl-reveal-video { opacity: 0; transition: opacity .7s ease; }
.opener.has-video .cl-reveal-video { opacity: 1; }
@keyframes drift { to { transform: scale(1.12) translateY(-1.5%); } }
.opening-wash { position: absolute; inset: 0; pointer-events: none; transition: opacity 1s ease; background: radial-gradient(ellipse 80% 55% at 50% 46%, rgba(8, 5, 6, .3), rgba(8, 5, 6, .8) 75%), linear-gradient(0deg, rgba(8, 5, 6, .9), transparent 40%, transparent 70%, rgba(8, 5, 6, .55)); }
.opener[data-phase="playing"] .opening-wash { opacity: .25; }
/* Velvet curtain over the hall, used only if the video cannot play. */
.opener-hall { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .6s ease, transform 6s var(--ease-out); }
.opener.use-curtain .opener-hall { opacity: 1; }
.opener.curtain-open .opener-hall { transform: scale(1); }
.opener-curtain { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.opener.use-curtain .opener-curtain { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.opener-curtain i { position: absolute; top: 0; bottom: 0; width: 51%; transition: transform 2.2s cubic-bezier(.7, 0, .25, 1); background: linear-gradient(90deg, rgba(0, 0, 0, .6), transparent 30%, rgba(255, 200, 210, .07) 50%, transparent 70%, rgba(0, 0, 0, .6)) 0 0 / 38px 100%, radial-gradient(ellipse 80% 40% at 50% 0%, rgba(122, 10, 28, .45), transparent 70%), linear-gradient(180deg, #1a0d12, #0b0709); box-shadow: inset 0 -80px 90px rgba(0, 0, 0, .6); }
.opener-curtain i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(211, 42, 65, .1), rgba(211, 42, 65, .7) 50%, rgba(211, 42, 65, .1)); }
.opener-curtain i:first-child { left: 0; transform-origin: 0 0; }
.opener-curtain i:first-child::after { right: 0; }
.opener-curtain i:last-child { right: 0; transform-origin: 100% 0; }
.opener-curtain i:last-child::after { left: 0; }
.opener.curtain-open .opener-curtain i:first-child { transform: translateX(-92%) skewX(4deg); }
.opener.curtain-open .opener-curtain i:last-child { transform: translateX(92%) skewX(-4deg); }
.opener.use-curtain .cl-opening-poster { opacity: 0; transition: opacity .5s ease .5s; }
.opener-frame { position: absolute; top: max(14px, env(safe-area-inset-top)); bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; width: min(100% - 28px, calc(var(--vh) * 56.25 - 28px)); margin-inline: auto; border: 1px solid rgba(246, 238, 229, .2); pointer-events: none; transition: opacity .8s ease; }
.opener-frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(211, 42, 65, .28); }
.opener-frame i { position: absolute; width: 7px; height: 7px; background: var(--scarlet); transform: rotate(45deg); }
.opener-frame i:nth-child(1) { top: -4px; left: -4px; } .opener-frame i:nth-child(2) { top: -4px; right: -4px; }
.opener-frame i:nth-child(3) { bottom: -4px; left: -4px; } .opener-frame i:nth-child(4) { bottom: -4px; right: -4px; }
.opening-corner { position: absolute; top: max(36px, calc(env(safe-area-inset-top) + 26px)); left: 0; right: 0; width: min(100% - 64px, calc(var(--vh) * 56.25 - 64px)); margin-inline: auto; display: flex; justify-content: space-between; color: var(--pearl); font-size: 9px; letter-spacing: .3em; transition: opacity .6s ease; }
.opening-content { position: absolute; top: 50%; left: 50%; width: min(88%, 440px); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity .8s ease, transform 1s var(--ease); }
.cover-kicker { color: var(--rose); font-size: 9.5px; margin-bottom: clamp(14px, 2.4vh, 22px); }
.tagline { font: 400 clamp(32px, calc(var(--vh) * 5), 50px)/1.08 var(--display); letter-spacing: -.005em; text-shadow: 0 4px 30px rgba(0, 0, 0, .8); }
.tagline em { display: block; font-size: 1.18em; color: #fde9ec; }
.opening-content .star-line { margin: clamp(16px, 2.6vh, 26px) 0; }
.subtext { color: rgba(246, 238, 229, .9); font: italic 400 clamp(17px, calc(var(--vh) * 2.6), 22px)/1.4 var(--serif); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.btn-open { margin-top: clamp(26px, calc(var(--vh) * 5), 44px); min-height: 56px; padding: 0 34px; }
.btn-open::after { animation: sheen 3.6s var(--ease) 1.6s infinite; }
.btn-open::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(211, 42, 65, .55); animation: pulse 2.8s ease-out 1s infinite; pointer-events: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(211, 42, 65, .5); } 100% { box-shadow: 0 0 0 18px rgba(211, 42, 65, 0); } }
.opener[data-phase="closed"] .opening-content > * { animation: rise 1.5s var(--ease-out) both; }
.opener[data-phase="closed"] .opening-content > :nth-child(2) { animation-delay: .15s; }
.opener[data-phase="closed"] .opening-content > :nth-child(3) { animation-delay: .35s; }
.opener[data-phase="closed"] .opening-content > :nth-child(4) { animation-delay: .5s; }
.opener[data-phase="closed"] .opening-content > :nth-child(5) { animation-delay: .7s; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.opener:not([data-phase="closed"]) .opening-content { opacity: 0; transform: translate(-50%, calc(-50% - 16px)); pointer-events: none; }
.opener:not([data-phase="closed"]) .opening-corner { opacity: .45; }
.opener-controls { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; gap: 8px; z-index: 3; }
.opener-controls button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(246, 238, 229, .28); border-radius: 999px; background: rgba(11, 7, 9, .55); color: var(--ivory); font: 500 9.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.opener-controls .arrow { width: 14px; }
#skip-reveal { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.opener[data-phase="playing"]:not(.is-iris) #skip-reveal { opacity: 1; visibility: visible; transition: opacity .6s ease 1s; }
.opener.is-iris .opener-controls { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
@media (max-aspect-ratio: 7/8) {
  .opener-surround { display: none; }
  .opener-screen { width: 100%; box-shadow: none; }
  .opener-frame { width: auto; left: 14px; right: 14px; }
  .opening-corner { width: auto; left: 32px; right: 32px; }
}

/* ---------- The monogram (opening and thank-you) ---------- */
/* ---------- Opening monogram ---------- */
.opener-monogram {
  position: absolute; inset: 0;
  width: min(100%, calc(var(--vh) * 56.25)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 5vh; pointer-events: none; visibility: hidden;
}
.is-monogram .opener-monogram { visibility: visible; }
.opener-monogram::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 48% at 50% 45%, rgba(8, 4, 6, .86), rgba(8, 4, 6, .5) 66%, rgba(8, 4, 6, .18));
  opacity: 0; transition: opacity 1.2s ease;
}
.is-monogram .opener-monogram::before { opacity: 1; }
.om-stage { position: relative; width: min(92%, calc(var(--vh) * 47)); will-change: transform; }
.om { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.om-aura, .om-sparks, .om-beams { position: absolute; pointer-events: none; }
.om-aura { inset: 0; }
.om-glow, .om-burst, .om-wave { position: absolute; left: 50%; top: 50%; display: block; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; }
.om-glow { width: 115%; aspect-ratio: 1; background: radial-gradient(circle, rgba(217, 66, 80, .42), rgba(140, 18, 33, .18) 40%, transparent 68%); }
.om-burst { width: 72%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 238, 238, .95), rgba(255, 110, 122, .5) 32%, transparent 64%); mix-blend-mode: screen; }
.om-wave { width: 62%; aspect-ratio: 1; border: 1.5px solid rgba(255, 140, 150, .85); box-shadow: 0 0 18px rgba(217, 66, 80, .6); }

/* Monogram pieces start hidden; the timeline below brings them in. */
.om-disc { fill: #0a080b; opacity: 0; transition: opacity .5s ease; }
.om-draw { stroke-dasharray: var(--len, 1200) var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.om-scrolls .om-draw { stroke-width: 1.6; }
.om-leaf, .om-dot { opacity: 0; transform-box: fill-box; transform-origin: center; }
.om-fill { opacity: 0; }
.om-letter-a { transform-box: fill-box; transform-origin: 50% 55%; }
.om-nib { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.om-nib.is-on { opacity: 1; }
.om-shine { transform: translateX(0); }
.om-name {
  position: relative; display: flex; justify-content: center; margin-top: 2.6vh; padding-left: .5em;
  font: 400 clamp(20px, 3.2vh, 34px)/1 var(--serif); letter-spacing: .5em; text-transform: uppercase;
  color: var(--ivory); text-shadow: 0 0 22px rgba(217, 66, 80, .55);
  transition: opacity .5s ease;
}
.om-name span { display: inline-block; opacity: 0; }
.om-numeral {
  position: relative; display: flex; align-items: center; gap: 12px; margin-top: 1.4vh;
  font: 700 10px/1 var(--sans); letter-spacing: .5em; color: var(--rose); padding-left: .5em;
  transition: opacity .5s ease;
}
.om-numeral i { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #d94250); transform: scaleX(0); }
.om-numeral i:last-child { background: linear-gradient(90deg, #d94250, transparent); }
.om-numeral span { opacity: 0; }
.om-sparks { inset: 0; overflow: hidden; transition: opacity .6s ease; }
.om-ember, .om-glint { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); opacity: 0; }
.om-ember { border-radius: 50%; background: radial-gradient(circle, #ffd5d9 0, #e2404e 45%, transparent 72%); }
.om-glint { background: #ffe3e6; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
.om-beams { inset: 0; overflow: hidden; transition: opacity .6s ease; }
.om-beam {
  position: absolute; top: -6%; width: 70%; height: 112%; opacity: 0; transform-origin: 50% 0;
  background: conic-gradient(from 166deg at 50% 0, transparent 0deg, rgba(255, 220, 224, .2) 14deg, transparent 28deg);
  -webkit-mask: linear-gradient(#000 20%, transparent 92%); mask: linear-gradient(#000 20%, transparent 92%);
}
.om-beam-left { left: -28%; transform: rotate(-42deg); }
.om-beam-right { right: -28%; transform: rotate(42deg); }

/* Timeline (seconds after "Open the invitation") */
.is-monogram .om-ring-outer { animation: omDraw 1.9s cubic-bezier(.65, 0, .35, 1) .2s both; }
.is-monogram .om-ring-inner { animation: omDraw 1.9s cubic-bezier(.65, 0, .35, 1) .45s both; }
.is-monogram .om-top .om-draw { animation: omDraw 1.5s ease-in-out .95s both; }
.is-monogram .om-sides .om-draw { animation: omDraw 1.4s ease-in-out 1.2s both; }
.is-monogram .om-bottom .om-draw { animation: omDraw 1.5s ease-in-out 1.4s both; }
.is-monogram .om-outline .om-draw { animation: omDraw 2.1s cubic-bezier(.65, 0, .35, 1) .9s both; }
.is-monogram .om-leaf, .is-monogram .om-dot { animation: omPop .75s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(1.95s + var(--i) * 45ms); }
.is-monogram .om-fill { animation: omFade 1s ease 2.6s both; }
.is-monogram .om-burst { animation: omBurst 1.2s ease-out 3.8s both; }
.is-monogram .om-wave { animation: omWave 1.5s cubic-bezier(.16, 1, .3, 1) 3.85s both; }
.is-monogram .om-glow { animation: omGlow 3.2s ease 3.3s both; }
.is-monogram .om-shine { animation: omShine 1.5s cubic-bezier(.65, 0, .35, 1) 4s both; }
.is-monogram .om-letter-a { animation: omSettle 1s cubic-bezier(.34, 1.56, .64, 1) 3.78s both; }
.is-monogram .om-name span { animation: omLetter 1.05s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(4.15s + var(--i) * 95ms); }
.is-monogram .om-numeral i { animation: omLine 1s cubic-bezier(.16, 1, .3, 1) 4.9s both; }
.is-monogram .om-numeral span { animation: omFade .9s ease 5s both; }
.is-monogram .om-ember { animation: omEmber var(--t) ease-in var(--d) infinite; }
.is-monogram .om-glint { animation: omGlint var(--t) ease-in-out var(--d) infinite; }
.is-monogram .om-beam-left { animation: omBeamL 2.6s cubic-bezier(.45, 0, .2, 1) 1.1s both; }
.is-monogram .om-beam-right { animation: omBeamR 2.6s cubic-bezier(.45, 0, .2, 1) 1.3s both; }
@keyframes omDraw { to { stroke-dashoffset: 0; } }
@keyframes omFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes omSettle { 0% { transform: none; } 35% { transform: scale(1.045); } 100% { transform: none; } }
@keyframes omPop { from { opacity: 0; transform: scale(0) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes omBurst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } }
@keyframes omWave { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.95); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.3); } }
@keyframes omGlow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 45% { opacity: 1; } 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } }
@keyframes omShine { from { transform: translateX(0); } to { transform: translateX(470px); } }
@keyframes omLetter { from { opacity: 0; transform: translate3d(0, -18px, 0) scale(1.4); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes omLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes omEmber { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx), -40vh, 0) scale(1.1); } }
@keyframes omGlint { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes omBeamL { 0% { opacity: 0; transform: rotate(-58deg); } 40% { opacity: 1; } 100% { opacity: .65; transform: rotate(-24deg); } }
@keyframes omBeamR { 0% { opacity: 0; transform: rotate(58deg); } 40% { opacity: 1; } 100% { opacity: .65; transform: rotate(24deg); } }

/* The ring turns into an iris: black around it, the invitation inside it, then it opens. */
.opener-iris { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; visibility: hidden; pointer-events: none; }
.opener.is-iris .opener-iris { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.is-monogram .om-disc { opacity: .5; transition: opacity 1.6s ease 1.8s; }
.opener.is-iris .om-disc { opacity: 1; transition: opacity .5s ease; }
.opener.is-iris .om-name, .opener.is-iris .om-numeral, .opener.is-iris .om-beams, .opener.is-iris .om-sparks, .opener.is-iris .om-aura { opacity: 0; transition: opacity .5s ease; }
.opener.is-iris .opening-corner, .opener.is-iris .opener-monogram::before { opacity: 0; transition: opacity .5s ease; }
.opener.is-cameo { background: transparent; transition: none; }
.opener.is-cameo .opener-surround, .opener.is-cameo .opener-screen { visibility: hidden; }
.opener.is-cameo .om-disc { opacity: 0; transition: opacity .9s ease; }
.opener.is-cameo .om-letter { opacity: 0; transition: opacity .8s ease .35s; }

/* ==========================================================================
   Chrome: monogram, page counter, RSVP, page dots
   ========================================================================== */
.chrome { position: fixed; top: var(--top); left: 0; right: 0; bottom: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease) .4s; }
.cl-opened .chrome, .cl-document:not(.cl-js) .chrome { opacity: 1; }
.chrome::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 110px; background: linear-gradient(180deg, rgba(11, 7, 9, .72), rgba(11, 7, 9, 0)); }
.chrome > * { pointer-events: auto; }
.chrome-mark { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: calc(var(--px) - 8px); color: var(--ivory); transition: transform .5s var(--ease-out); }
.chrome-mark .cl-monogram { width: 42px; }
.chrome-mark:hover { transform: scale(1.06); }
.chrome-count { position: absolute; top: calc(30px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: var(--mist); font: 500 10px/1 var(--sans); letter-spacing: .26em; pointer-events: none; }
.chrome-count #page-now { color: var(--ivory); }
.chrome-count i { width: 22px; height: 1px; background: var(--line-red); }
.chrome-rsvp { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: calc(var(--px) - 8px); display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px 0 calc(18px + .3em); border-radius: 999px; border: 1px solid var(--line-red); background: rgba(211, 42, 65, .14); color: #fff4f0; font: 500 10px/1 var(--sans); letter-spacing: .3em; transition: background-color .35s, border-color .35s, opacity .4s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chrome-rsvp:hover { background: var(--crimson); border-color: var(--crimson); }
[data-page="rsvp"] .chrome-rsvp { opacity: 0; pointer-events: none; }
.dots { position: absolute; top: 50%; right: max(10px, env(safe-area-inset-right)); transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; }
.dots a { position: relative; display: grid; place-items: center; width: 26px; height: 26px; }
.dots a::before { content: ""; width: 6px; height: 6px; border: 1px solid rgba(246, 238, 229, .55); transform: rotate(45deg) scale(.85); transition: transform .5s var(--ease-out), background-color .5s, border-color .5s, box-shadow .5s; }
.dots a.is-current::before { background: var(--scarlet); border-color: #ff8090; transform: rotate(45deg) scale(1.35); box-shadow: 0 0 12px rgba(211, 42, 65, .9); }
.dots em { position: absolute; right: 30px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; opacity: 0; pointer-events: none; color: var(--pearl); font: 500 9.5px/1 var(--sans); font-style: normal; letter-spacing: .26em; text-transform: uppercase; transition: opacity .3s, transform .4s var(--ease-out); }
@media (hover: hover) { .dots a:hover em { opacity: 1; transform: translate(0, -50%); } }
.cl-music { position: absolute; left: calc(var(--px) - 8px); bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-red); border-radius: 50%; background: rgba(11, 7, 9, .6); color: var(--ivory); }
.cl-music svg { width: 20px; height: 20px; }
.cl-music[aria-pressed="true"] { box-shadow: 0 0 0 4px rgba(211, 42, 65, .2); }

/* ==========================================================================
   Pages: one screen each
   ========================================================================== */
.pages { position: fixed; top: var(--top); right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; outline: none; }
.pages::-webkit-scrollbar { display: none; }
.pages.no-snap { scroll-snap-type: none; }
.page { position: relative; isolation: isolate; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: var(--noir); }
.page-bg { position: absolute; top: -10%; bottom: -10%; left: 0; right: 0; z-index: -1; overflow: hidden; will-change: transform; }
.page-inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--bar) + clamp(8px, calc(var(--vh) * 2.5), 34px)) var(--px) clamp(26px, calc(var(--vh) * 5), 60px); will-change: transform, opacity; }
.centered { align-items: center; text-align: center; }
.section-backdrop { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; pointer-events: none; }
.velvet { background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(122, 10, 28, .42), transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(58, 10, 21, .6), transparent 70%), var(--noir-2); }
.velvet::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 24px, rgba(255, 255, 255, .012) 24px 42px, rgba(0, 0, 0, .08) 42px 60px); opacity: .7; }

/* Chapter headings */
.chapter { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: clamp(16px, calc(var(--vh) * 3.4), 40px); text-align: center; }
.chapter-no { display: flex; align-items: center; gap: 16px; font: italic 400 clamp(22px, calc(var(--vh) * 3.2), 28px)/1 var(--display); color: var(--scarlet); }
.chapter-no::before, .chapter-no::after { content: ""; width: clamp(34px, 9vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, var(--line-red)); }
.chapter-no::after { background: linear-gradient(90deg, var(--line-red), transparent); }
.chapter-name { font: 500 10px/1.6 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--pearl); padding-left: .42em; }

/* I · Amanda */
.page-amanda .hero-picture, .page-amanda .hero-picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-amanda .hero-picture img { object-fit: cover; object-position: 62% 30%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 7, 9, .96) 0%, rgba(11, 7, 9, .8) 28%, rgba(11, 7, 9, .25) 55%, rgba(11, 7, 9, 0) 75%), linear-gradient(0deg, rgba(11, 7, 9, .92) 0%, rgba(11, 7, 9, 0) 34%), radial-gradient(ellipse 60% 70% at 0% 50%, rgba(122, 10, 28, .3), transparent 70%); }
.light-sweep { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(100deg, transparent, rgba(255, 236, 238, .14) 45%, rgba(255, 255, 255, .2) 50%, transparent 60%); transform: translateX(-120%) skewX(-14deg); mix-blend-mode: screen; pointer-events: none; }
.hero-copy { justify-content: center; max-width: 1180px; }
.hero-copy .kicker { color: var(--pearl); text-shadow: 0 1px 14px rgba(0, 0, 0, .85); }
.hero-name { margin: clamp(10px, calc(var(--vh) * 2), 20px) 0 0 -.04em; font: 400 min(14vw, calc(var(--vh) * 22), 200px)/.86 var(--display); letter-spacing: -.035em; color: var(--ivory); text-shadow: 0 10px 50px rgba(0, 0, 0, .45); }
.hero-name .a-letters { display: block; }
.hero-name .a-letters span { display: inline-block; }
.hero-numeral { display: flex; align-items: center; gap: 18px; margin: .3em 0 0 .04em; font: 400 .2em/1 var(--sans); letter-spacing: .62em; color: var(--rose); }
.hero-numeral b { font-weight: 400; padding-left: .62em; }
.hero-numeral i { width: 1.8em; height: 1px; background: rgba(235, 169, 177, .6); }
.hero-numeral i:first-child { display: none; }
.hero-copy .star-line { margin: clamp(16px, calc(var(--vh) * 3), 28px) 0 clamp(12px, calc(var(--vh) * 2.2), 22px); justify-content: flex-start; }
.hero-copy .star-line::before { display: none; }
.hero-line { max-width: 30ch; color: rgba(246, 238, 229, .92); font: italic 400 clamp(18px, calc(var(--vh) * 2.8), 26px)/1.45 var(--serif); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: clamp(20px, calc(var(--vh) * 4), 36px); }
.details-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: rgba(246, 238, 229, .85); font: 500 10.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.details-link .arrow { width: 15px; animation: nudge 2.6s ease-in-out 3s infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: rotate(90deg) translateX(0); } 30% { transform: rotate(90deg) translateX(5px); } }
.hero-credit { position: absolute; left: var(--px); right: var(--px); bottom: clamp(18px, calc(var(--vh) * 3.4), 34px); display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--pearl); font: 500 9.5px/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.hero-credit i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.motes i { position: absolute; left: var(--x); bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 238, .95), rgba(240, 150, 160, .45) 45%, transparent 70%); opacity: 0; filter: blur(.4px); }
.page.is-active .motes i { animation: mote var(--t) linear var(--w) infinite; }
@keyframes mote { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 12% { opacity: var(--o, .7); } 85% { opacity: var(--o, .7); } 100% { opacity: 0; transform: translate3d(var(--dx), calc(var(--vh) * -95), 0); } }

/* II · Save the date */
.beams .beam { position: absolute; top: -10%; width: 70%; height: 110%; transform-origin: 50% 0; background: conic-gradient(from 166deg at 50% 0, transparent 0deg, rgba(255, 220, 224, .1) 14deg, transparent 28deg); -webkit-mask: linear-gradient(#000 25%, transparent 95%); mask: linear-gradient(#000 25%, transparent 95%); z-index: 1; }
.beam-l { left: -20%; animation: beamL 9s ease-in-out infinite alternate; }
.beam-r { right: -20%; animation: beamR 11s ease-in-out infinite alternate; }
@keyframes beamL { from { transform: rotate(-32deg); } to { transform: rotate(-8deg); } }
@keyframes beamR { from { transform: rotate(30deg); } to { transform: rotate(6deg); } }
.ticket { position: relative; width: min(100%, 380px, calc(var(--vh) * 58)); perspective: 1600px; }
.ticket-card { position: relative; height: clamp(196px, calc(var(--vh) * 32), 270px); transform-style: preserve-3d; transition: transform 1.4s var(--ease-io); }
.ticket.is-revealed .ticket-card { transform: rotateY(180deg); }
.ticket-face {
  position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; padding: 22px 26px; text-align: center; border-radius: 16px; color: var(--ivory);
  background: radial-gradient(120% 120% at 0% 0%, #2b0c15 0%, #150a0d 55%, #0f0709 100%);
  border: 1px solid rgba(211, 42, 65, .6);
  box-shadow: 0 40px 70px -36px #000, inset 0 0 0 7px #120709, inset 0 0 0 8px rgba(211, 42, 65, .32), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: visibility 0s .7s;
}
.ticket-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle 15px at 0 62%, var(--noir-2) 92%, transparent 100%), radial-gradient(circle 15px at 100% 62%, var(--noir-2) 92%, transparent 100%); }
.ticket-back { transform: rotateY(180deg); }
.ticket-back, .ticket.is-revealed .cl-date-closed { visibility: hidden; }
.ticket.is-revealed .ticket-back { visibility: visible; }
.ticket-corner { position: absolute; top: 16px; right: 16px; opacity: .55; }
.ticket-corner .cl-monogram { width: 30px; }
.ticket .kicker { color: var(--rose); }
.ticket-date { margin: 10px 0 18px; font: 400 clamp(38px, calc(var(--vh) * 6.2), 60px)/1.02 var(--display); letter-spacing: -.02em; }
.ticket-date em { color: var(--rose); }
.ticket-perforation { width: 100%; border-bottom: 1px dashed rgba(246, 238, 229, .28); }
.ticket .button.outline { margin-top: 18px; min-height: 44px; }
.cl-date-value { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 14px; }
.td-day { font: 400 clamp(84px, calc(var(--vh) * 13), 128px)/.82 var(--display); letter-spacing: -.04em; background: linear-gradient(160deg, #ff8a97, #d32a41 40%, #8c0f22 80%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding: 0 .06em; font-variant-numeric: lining-nums tabular-nums; }
.td-month { font: 500 11.5px/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; color: var(--ivory); padding-left: .5em; }
.ticket-time { margin-top: 14px; color: var(--pearl); font: 500 10px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, 380px); margin-top: clamp(18px, calc(var(--vh) * 3.6), 34px); border-block: 1px solid var(--line); }
.countdown div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(10px, calc(var(--vh) * 1.8), 16px) 4px; }
.countdown div + div::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--line); }
.countdown b { font: 400 clamp(26px, calc(var(--vh) * 4.4), 40px)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; color: var(--ivory); }
.countdown b.tick { animation: tick .55s var(--ease-out); }
@keyframes tick { from { opacity: .3; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.countdown span { font: 500 8.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mist); padding-left: .3em; }
.cal-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; margin-top: 12px; font: 500 9.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.cal-links span { color: var(--mist); }
.cal-links a { display: inline-flex; align-items: center; min-height: 38px; color: var(--ivory); border-bottom: 1px solid var(--line-red); }
.cal-links a:hover { color: var(--rose); }

/* III · Venue */
.page-venue .page-bg { background: var(--noir); }
.venue-photo { position: absolute; inset: 0; overflow: hidden; }
.venue-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.venue-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 7, 9, .7) 0%, rgba(11, 7, 9, .05) 22%, rgba(11, 7, 9, .15) 42%, rgba(11, 7, 9, .86) 70%, var(--noir) 100%); }
.glints i { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; background: #fff3f4; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); opacity: 0; }
.page-venue.is-active .glints i { animation: glint 2.8s ease-in-out var(--d) infinite; }
@keyframes glint { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 45% { opacity: .9; transform: scale(1) rotate(45deg); } }
.venue-copy { justify-content: flex-end; align-items: center; text-align: center; }
.venue-copy .chapter { margin-bottom: 14px; }
.page-venue h2 { font-size: min(17vw, calc(var(--vh) * 11), 110px); line-height: .98; letter-spacing: -.03em; }
.venue-room { margin: 10px 0 14px; font: italic 400 clamp(20px, calc(var(--vh) * 3), 26px)/1.35 var(--serif); color: var(--pearl); }
.venue-meta { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(16px, calc(var(--vh) * 3), 26px); font: 500 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.venue-meta svg { width: 17px; height: 17px; color: var(--rose); }

/* Programme / message */
.cl-program-list { width: min(100%, 560px); list-style: none; padding: 0; text-align: left; }
.cl-program-list li { display: flex; align-items: baseline; gap: 14px; padding: clamp(10px, calc(var(--vh) * 1.8), 16px) 0; border-bottom: 1px solid var(--line); }
.cl-program-list li span { flex: none; min-width: 80px; color: var(--rose); font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.cl-program-list li i { flex: 1; border-bottom: 1px dotted rgba(246, 238, 229, .25); transform: translateY(-4px); }
.cl-program-list li strong { font: 400 clamp(19px, calc(var(--vh) * 2.8), 24px)/1.3 var(--serif); }
.message-quote { max-width: 28ch; margin-top: 16px; font: italic 400 clamp(22px, calc(var(--vh) * 3.8), 36px)/1.42 var(--serif); }
.signature { margin-top: clamp(14px, calc(var(--vh) * 2.6), 24px); font: italic 400 clamp(19px, calc(var(--vh) * 2.8), 24px)/1.3 var(--serif); color: var(--rose); }

/* IV · Dress code */
.spotlight { background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(122, 10, 28, .42), transparent 72%), radial-gradient(ellipse 50% 60% at 50% 100%, rgba(58, 10, 21, .5), transparent), var(--noir); }
.attire-grid { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(14px, calc(var(--vh) * 2.6), 26px); }
.attire-photo { position: relative; height: clamp(150px, calc(var(--vh) * 30), 520px); aspect-ratio: 3 / 4; flex: none; }
.attire-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 28%; border-radius: 999px 999px 6px 6px; }
.attire-photo::before { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(246, 238, 229, .24); border-radius: 999px 999px 9px 9px; pointer-events: none; }
.attire-photo::after { content: ""; position: absolute; top: -14px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; background: var(--scarlet); transform: rotate(45deg); box-shadow: 0 0 14px rgba(211, 42, 65, .8); }
.attire-copy { display: flex; flex-direction: column; align-items: center; }
.attire-copy .chapter { margin-bottom: 10px; }
.page-dress h2 { font-size: min(12vw, calc(var(--vh) * 7), 96px); line-height: .98; letter-spacing: -.035em; }
.page-dress h2 em, .page-rsvp h2 em, .page-wishlist h2 em, .page-thanks h2 em, .cl-inspiration h2 em { color: var(--rose); }
.attire-description { max-width: 34ch; margin-top: 10px; color: rgba(246, 238, 229, .8); font: 400 clamp(17px, calc(var(--vh) * 2.6), 21px)/1.45 var(--serif); }
.palette { list-style: none; display: flex; justify-content: center; gap: clamp(18px, 4vw, 30px); padding: 0; margin-top: clamp(12px, calc(var(--vh) * 2.4), 24px); }
.palette li { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--mist); font: 500 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; padding-left: .24em; }
.swatch { display: block; width: clamp(36px, calc(var(--vh) * 6.2), 50px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px rgba(246, 238, 229, .35), 0 0 0 5px var(--noir), 0 0 0 6px rgba(246, 238, 229, .14), 0 10px 20px -8px #000; }
.swatch.black { background: radial-gradient(circle at 32% 28%, #4a484f, #111115 62%); }
.swatch.gray { background: radial-gradient(circle at 32% 28%, #d9d8de, #85848e 66%); }
.swatch.white { background: radial-gradient(circle at 32% 28%, #ffffff, #ededed 70%); }
.red-note { margin-top: clamp(12px, calc(var(--vh) * 2.4), 22px); color: var(--ivory); font: italic 400 clamp(19px, calc(var(--vh) * 3), 25px)/1.35 var(--serif); }
.red-note span { color: var(--rose); background: linear-gradient(var(--scarlet), var(--scarlet)) 0 92% / 100% 1.5px no-repeat; }
.page-dress .cl-inspiration-button { margin-top: clamp(12px, calc(var(--vh) * 2.6), 26px); min-height: 46px; }

/* V · Wishlist */
.sheen { background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(122, 10, 28, .45), transparent 72%), var(--velvet); }
.page-wishlist h2 { font-size: min(12vw, calc(var(--vh) * 7.4), 84px); line-height: 1.02; letter-spacing: -.03em; }
.wish-sub { margin-top: 10px; color: rgba(246, 238, 229, .82); font: italic 400 clamp(18px, calc(var(--vh) * 2.8), 23px)/1.4 var(--serif); }
.wish-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 560px); padding: 0; margin-top: clamp(18px, calc(var(--vh) * 3.6), 36px); perspective: 1200px; }
.wish-grid li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: clamp(84px, calc(var(--vh) * 15), 140px); padding: 14px 10px; border: 1px solid var(--line); border-radius: 90px 90px 8px 8px; background: linear-gradient(170deg, rgba(246, 238, 229, .07), rgba(246, 238, 229, .01)); font: 400 clamp(17px, calc(var(--vh) * 2.6), 21px)/1.22 var(--serif); }
.wish-grid li span { font: italic 400 20px/1 var(--display); color: var(--scarlet); }
.wish-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; border-radius: 8px; }

/* VI · RSVP */
.drapes { background: radial-gradient(ellipse 70% 50% at 30% 40%, rgba(122, 10, 28, .45), transparent 70%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 22px, rgba(255, 255, 255, .012) 22px 40px, rgba(0, 0, 0, .1) 40px 58px), linear-gradient(180deg, #14090d, #0d0709); }
.rsvp-grid { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.page-rsvp .chapter { margin-bottom: 8px; }
.page-rsvp h2 { font-size: min(10vw, calc(var(--vh) * 5.2), 92px); line-height: 1; letter-spacing: -.03em; }
.rsvp-meta { margin-top: 6px; color: var(--pearl); font: 400 clamp(15px, calc(var(--vh) * 2.3), 20px)/1.45 var(--serif); }
.rsvp-meta span { color: var(--rose); font-style: italic; }
.rsvp-card-wrap { width: min(100%, 440px); margin-top: clamp(30px, calc(var(--vh) * 5), 46px); }

/* VII · Thank you */
.finale { background: radial-gradient(ellipse 55% 50% at 50% 34%, rgba(122, 10, 28, .55), transparent 72%), var(--noir); }
.thanks-monogram { width: min(64vw, calc(var(--vh) * 34), 330px); margin-bottom: clamp(4px, calc(var(--vh) * 1), 12px); }
.thanks-monogram .om { width: 100%; height: auto; overflow: visible; }
.page-thanks h2 { font-size: min(16vw, calc(var(--vh) * 9.5), 110px); line-height: 1; letter-spacing: -.035em; }
.thanks-line { margin-top: 10px; color: rgba(246, 238, 229, .88); font: italic 400 clamp(19px, calc(var(--vh) * 2.9), 25px)/1.4 var(--serif); }
.finale-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin-top: clamp(14px, calc(var(--vh) * 3.4), 34px); }
.replay-button, .cl-dashboard-link { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0; border: 0; background: transparent; color: var(--pearl); font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.replay-button svg { width: 16px; height: 16px; color: var(--scarlet); }
.replay-button:hover, .cl-dashboard-link:hover { color: #fff; }

/* ==========================================================================
   Page choreography. Each page plays its entrance when it settles on screen,
   and resets while off screen so it plays again on the next visit.
   ========================================================================== */
.cl-motion .a { transition: opacity 1s var(--ease), transform 1.3s var(--ease-out), filter 1s ease, letter-spacing 1.8s var(--ease-out), clip-path 1.6s var(--ease-io); transition-delay: var(--d, 0s); }
.cl-motion .page:not(.is-active) .a, .cl-motion .page:not(.is-active) .a *, .cl-motion .page:not(.is-active) .a-letters span { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
.cl-motion .page:not(.is-active) .a-up { opacity: 0; transform: translate3d(0, 34px, 0); }
.cl-motion .page:not(.is-active) .a-fade { opacity: 0; }
.cl-motion .page:not(.is-active) .a-track { opacity: 0; letter-spacing: .85em; }
.cl-motion .a-pop { transition-timing-function: ease, cubic-bezier(.3, 1.7, .55, 1); }
.cl-motion .page:not(.is-active) .a-pop { opacity: 0; transform: translate3d(0, 20px, 0) scale(.45); }

/* Name: letters turn up into place */
.cl-motion .a-letters { perspective: 600px; }
.cl-motion .a-letters span { transition: opacity .9s ease, transform 1.4s var(--ease-out), filter 1.1s ease; transition-delay: calc(.4s + var(--i) * 85ms); transform-origin: 50% 80%; }
.cl-motion .page:not(.is-active) .a-letters span { opacity: 0; transform: translate3d(0, .4em, 0) rotateX(-85deg); filter: blur(10px); }
.cl-motion .a-numeral b, .cl-motion .a-numeral i { transition: opacity 1.2s ease, letter-spacing 1.8s var(--ease-out), transform 1.4s var(--ease-out); transition-delay: var(--d, 0s); }
.cl-motion .page:not(.is-active) .a-numeral b { opacity: 0; letter-spacing: 1.3em; }
.cl-motion .page:not(.is-active) .a-numeral i { transform: scaleX(0); }
.cl-motion .a-numeral i:last-child { transform-origin: left; }

/* Diamond rule */
.cl-motion .a-star .star-line::before, .cl-motion .a-star .star-line::after { transition: transform 1.4s var(--ease-out) var(--d, 0s); }
.cl-motion .a-star .star-line::before { transform-origin: right; }
.cl-motion .a-star .star-line::after { transform-origin: left; }
.cl-motion .page:not(.is-active) .a-star .star-line::before, .cl-motion .page:not(.is-active) .a-star .star-line::after { transform: scaleX(0); }
.cl-motion .a-star .star-line i { transition: transform 1.1s cubic-bezier(.3, 1.6, .55, 1) calc(var(--d, 0s) + .3s), opacity .5s ease calc(var(--d, 0s) + .3s); }
.cl-motion .page:not(.is-active) .a-star .star-line i { opacity: 0; transform: rotate(-135deg) scale(0); }

/* Chapter heading: the rules draw out from the numeral */
.cl-motion .a-chapter .chapter-no::before, .cl-motion .a-chapter .chapter-no::after { transition: transform 1.5s var(--ease-out) .25s; }
.cl-motion .a-chapter .chapter-no::before { transform-origin: right; }
.cl-motion .a-chapter .chapter-no::after { transform-origin: left; }
.cl-motion .a-chapter .chapter-name { transition: opacity 1.2s ease .35s, letter-spacing 1.8s var(--ease-out) .35s; }
.cl-motion .page:not(.is-active) .a-chapter { opacity: 0; transform: translate3d(0, -10px, 0); }
.cl-motion .page:not(.is-active) .a-chapter .chapter-no::before, .cl-motion .page:not(.is-active) .a-chapter .chapter-no::after { transform: scaleX(0); }
.cl-motion .page:not(.is-active) .a-chapter .chapter-name { opacity: 0; letter-spacing: .9em; }

/* Headlines rise line by line from behind a mask */
.a-mask > span { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .14em; margin: 0 -.08em -.14em; }
.a-mask .mi { display: inline-block; }
.cl-motion .a-mask .mi { transition: transform 1.3s var(--ease-out); transition-delay: calc(var(--d, 0s) + var(--li, 0) * .14s); }
.cl-motion .page:not(.is-active) .a-mask .mi { transform: translate3d(0, 115%, 0) rotate(4deg); }

/* Hero portrait settles, a light passes */
.cl-motion .page-amanda .hero-picture img { transition: transform 3.6s var(--ease-out); }
.cl-motion .page-amanda:not(.is-active) .hero-picture img { transform: scale(1.18); transition-duration: 0s; }
.page-amanda.is-active .light-sweep { animation: sweep 2.6s var(--ease-io) 1.9s both; }
@keyframes sweep { from { transform: translateX(-120%) skewX(-14deg); } to { transform: translateX(330%) skewX(-14deg); } }

/* Ticket is handed over, then turns to reveal the date */
.cl-motion .a-ticket { transform-origin: 50% 100%; transition: opacity .9s ease, transform 1.6s cubic-bezier(.2, 1.15, .35, 1); transition-delay: var(--d, 0s); }
.cl-motion .page:not(.is-active) .a-ticket { opacity: 0; transform: perspective(1000px) rotateX(58deg) translate3d(0, 90px, 0) scale(.88); }
.ticket::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; opacity: 0; }
.ticket.is-revealed::after { animation: foil 1.6s var(--ease-io) .9s both; }
@keyframes foil { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -60% 0; } }

/* Venue: the hall is unveiled from the centre like curtains parting */
.cl-motion .a-curtain { transition: clip-path 2s var(--ease-io) .15s; }
.cl-motion .a-curtain img { transition: transform 4s var(--ease-out) .15s; }
.cl-motion .page:not(.is-active) .a-curtain { clip-path: inset(0 50% 0 50%); }
.cl-motion .page:not(.is-active) .a-curtain img { transform: scale(1.3); }

/* Dress code: the arch rises */
.cl-motion .a-arch { transition: clip-path 1.8s var(--ease-io), opacity .6s ease; transition-delay: var(--d, 0s); clip-path: inset(-20px -20px -20px -20px round 999px 999px 9px 9px); }
.cl-motion .a-arch img { transition: transform 3s var(--ease-out); transition-delay: var(--d, 0s); }
.cl-motion .page:not(.is-active) .a-arch { clip-path: inset(100% -20px -20px -20px round 999px 999px 9px 9px); }
.cl-motion .page:not(.is-active) .a-arch img { transform: scale(1.3) translateY(6%); }
.cl-motion .a-ink span { transition: background-size 1.2s var(--ease-io), color 1s ease; transition-delay: calc(var(--d, 0s) + .5s); }
.cl-motion .page:not(.is-active) .a-ink span { background-size: 0 1.5px; color: var(--ivory); }

/* Wishlist: cards are dealt onto the table */
.cl-motion .a-deal { transition: opacity .7s ease, transform 1.3s cubic-bezier(.2, 1.1, .35, 1); transition-delay: var(--d, 0s); }
.cl-motion .page:not(.is-active) .a-deal { opacity: 0; transform: translate3d(0, 60px, 0) rotate(-7deg) rotateY(75deg); }

/* RSVP: the card arrives and is sealed */
.cl-motion .a-card { transition: opacity .9s ease, transform 1.5s var(--ease-out); transition-delay: var(--d, 0s); }
.cl-motion .page:not(.is-active) .a-card { opacity: 0; transform: translate3d(0, 90px, 0) scale(.94); }
.cl-motion .a-stamp { transition: opacity .25s ease, transform .55s cubic-bezier(.55, 0, .8, .2), filter .4s ease; transition-delay: var(--d, 0s); }
.cl-motion .page:not(.is-active) .a-stamp { opacity: 0; transform: scale(2.8) rotate(-28deg); filter: blur(6px); }
.reply-seal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(211, 42, 65, .7); opacity: 0; pointer-events: none; }
.page-rsvp.is-active .reply-seal::after { animation: ripple 1.2s ease-out calc(var(--d, 0s) + .5s) both; }
@keyframes ripple { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.4); } }

/* Swipe depth: set by the page engine while scrolling */
.cl-motion .page-bg { transform: translate3d(0, calc(var(--p, 0) * 24%), 0) scale(calc(1 + var(--pa, 0) * .08)); }
.cl-motion .page-inner { opacity: calc(1 - var(--pa, 0) * 1.25); transform: translate3d(0, calc(var(--p, 0) * 12%), 0) scale(calc(1 - var(--pa, 0) * .05)); }
.reply-card {
  position: relative; padding: clamp(46px, 5vw, 58px) clamp(24px, 4vw, 46px) clamp(28px, 4vw, 40px);
  background: radial-gradient(130% 90% at 50% 0%, #fffaf3, var(--paper) 55%, #efe2d2); color: var(--ink);
  border-radius: 6px; color-scheme: light;
  box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .5) inset;
}
.reply-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(163, 18, 42, .32); border-radius: 3px; pointer-events: none; }
.reply-card::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(163, 18, 42, .12); border-radius: 2px; pointer-events: none; }
.reply-seal { position: absolute; top: -44px; left: 50%; width: 88px; margin-left: -44px; z-index: 2; }
.reply-seal .cl-seal-art { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.reply-title { position: relative; margin-bottom: 26px; text-align: center; font: italic 400 24px/1.2 var(--display); color: var(--crimson); }
.reply-card > label, .reply-card legend, #guest-count > label { display: block; position: relative; font: 500 9.5px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--crimson); }
.reply-card input[type="text"] {
  position: relative; display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 10px 2px;
  border: 0; border-bottom: 1px solid rgba(42, 20, 24, .3); border-radius: 0; background: transparent; color: var(--ink);
  font: 500 21px/1.2 var(--serif); transition: border-color .3s, box-shadow .3s;
}
.reply-card input[type="text"]::placeholder { color: rgba(42, 20, 24, .4); font-style: italic; }
.reply-card input[type="text"]:focus { outline: none; border-bottom-color: var(--crimson); box-shadow: 0 1px 0 var(--crimson); }
.cl-attendance { position: relative; margin: 28px 0 22px; padding: 0; border: 0; min-width: 0; }
.cl-attendance legend { margin-bottom: 12px; padding: 0; }
.cl-attendance-choice { position: relative; display: block; margin-bottom: 8px; cursor: pointer; }
.cl-attendance-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cl-attendance-choice span {
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 10px 16px;
  border: 1px solid rgba(42, 20, 24, .18); border-radius: 4px; background: rgba(255, 255, 255, .45);
  font: 500 19px/1.2 var(--serif); color: var(--ink); transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.cl-attendance-choice i { position: relative; width: 18px; height: 18px; flex: none; border: 1px solid rgba(42, 20, 24, .4); border-radius: 50%; }
.cl-attendance-choice i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--crimson); transform: scale(0); transition: transform .35s var(--ease-out); }
.cl-attendance-choice b { margin-left: auto; color: var(--crimson); font-weight: 400; opacity: 0; transition: opacity .3s; }
.cl-attendance-choice input:checked + span { border-color: var(--crimson); background: rgba(211, 42, 65, .07); box-shadow: inset 0 0 0 1px rgba(163, 18, 42, .35); }
.cl-attendance-choice input:checked + span i { border-color: var(--crimson); }
.cl-attendance-choice input:checked + span i::after { transform: scale(1); }
.cl-attendance-choice input:checked + span b { opacity: 1; }
.cl-attendance-choice input:focus-visible + span { outline: 2px solid var(--crimson); outline-offset: 3px; }
#guest-count { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.cl-stepper { display: flex; align-items: center; border: 1px solid rgba(42, 20, 24, .25); border-radius: 999px; background: rgba(255, 255, 255, .5); }
.cl-stepper button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--crimson); font: 300 22px/1 var(--sans); }
.cl-stepper button:disabled { opacity: .3; }
.cl-stepper input { width: 46px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: center; font: 500 20px/1 var(--display); -moz-appearance: textfield; appearance: textfield; }
.cl-stepper input::-webkit-inner-spin-button, .cl-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cl-voice-button {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px dashed rgba(163, 18, 42, .5); border-radius: 4px; background: transparent; color: var(--crimson);
  font: italic 500 19px/1 var(--serif); text-align: left; transition: background-color .3s;
}
.cl-voice-button:hover { background: rgba(211, 42, 65, .06); }
.cl-voice-button svg { width: 21px; height: 21px; }
.cl-voice-button.is-recording { border-style: solid; background: var(--crimson); color: #fff6f0; }
.cl-voice-button.is-recording svg { animation: breathe 1s ease-in-out infinite; }
.cl-voice-status, .cl-rsvp-feedback, .cl-form-thanks { position: relative; margin-top: 10px; color: #6b4b52; font: 400 13px/1.5 var(--sans); }
.cl-rsvp-feedback { color: #9b1027; }
.cl-rsvp-feedback:empty, .cl-voice-status:empty { display: none; }
#voice-preview { position: relative; }
#voice-preview audio { width: 100%; margin-top: 10px; }
#voice-remove { display: block; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--crimson); font: 400 13px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.reply-card .send { position: relative; width: 100%; margin-top: 22px; min-height: 56px; }
.cl-form-thanks { text-align: center; font: italic 400 17px/1.4 var(--serif); color: #6b4b52; }
.cl-honeypot { position: absolute; top: 0; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Receipt */
.cl-success {
  position: relative; display: grid; justify-items: center; gap: 10px; padding: clamp(34px, 5vw, 52px) clamp(24px, 4vw, 44px);
  background: radial-gradient(130% 90% at 50% 0%, #fffaf3, var(--paper) 55%, #efe2d2); color: var(--ink);
  border-radius: 6px; text-align: center; overflow-wrap: anywhere; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .9);
}
.cl-success::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(163, 18, 42, .32); border-radius: 3px; pointer-events: none; }
.cl-success h3 { position: relative; font: italic 400 clamp(30px, 3.6vw, 44px)/1.08 var(--display); color: var(--crimson); }
.cl-success p { position: relative; font: 400 18px/1.5 var(--serif); }
.cl-success .cl-eyebrow { color: var(--crimson); font: 500 10.5px/1.6 var(--sans); letter-spacing: .36em; text-transform: uppercase; }
.cl-receipt-name { font: 400 28px/1.3 var(--display) !important; }
.cl-receipt-code { position: relative; padding: 8px 14px; margin: 6px 0; border: 1px dashed rgba(163, 18, 42, .5); border-radius: 3px; color: var(--crimson); font: 600 13px/1 var(--sans); letter-spacing: .16em; }
.cl-gold-button { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--lacquer); color: #fff6f0; font: 500 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; box-shadow: 0 14px 28px -14px rgba(163, 18, 42, .8); }
.cl-receipt-download { position: relative; color: var(--crimson); font: 400 13px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.cl-next { position: relative; display: inline-flex; width: 36px; height: 36px; color: var(--crimson); }
.cl-next svg { width: 100%; }
/* Compact reply card for one-screen pages */
.reply-card { padding: clamp(40px, calc(var(--vh) * 6), 54px) clamp(20px, 4vw, 40px) clamp(18px, calc(var(--vh) * 3), 30px); text-align: left; }
.reply-seal { top: -40px; width: clamp(64px, calc(var(--vh) * 11), 84px); margin-left: calc(clamp(64px, calc(var(--vh) * 11), 84px) / -2); }
.reply-title { margin-bottom: clamp(10px, calc(var(--vh) * 2), 20px); font-size: clamp(19px, calc(var(--vh) * 3), 24px); }
.reply-card input[type="text"] { min-height: 42px; padding: 6px 2px; font-size: 20px; }
.cl-attendance { margin: clamp(12px, calc(var(--vh) * 2.4), 22px) 0 clamp(10px, calc(var(--vh) * 2), 18px); }
.cl-attendance legend { margin-bottom: 8px; }
.cl-attendance-choice { margin-bottom: 6px; }
.cl-attendance-choice span { min-height: clamp(42px, calc(var(--vh) * 6.6), 52px); font-size: 18px; }
#guest-count { margin-bottom: clamp(10px, calc(var(--vh) * 1.8), 16px); }
.cl-stepper button, .cl-stepper input { height: 40px; }
.cl-voice-button { min-height: clamp(42px, calc(var(--vh) * 6.4), 50px); font-size: 18px; }
.reply-card .send { margin-top: clamp(12px, calc(var(--vh) * 2.2), 20px); min-height: clamp(48px, calc(var(--vh) * 7), 56px); }
/* Outfit inspiration */
.cl-inspiration {
  width: min(92vw, 640px); max-width: none; max-height: 88vh; max-height: 88svh; margin: auto; padding: 0; overflow: auto;
  border: 1px solid var(--line-red); border-radius: 18px; color: var(--ivory); background: linear-gradient(170deg, #1d0d13, #0c0709);
  box-shadow: 0 50px 100px -30px #000; overscroll-behavior: contain;
}
.cl-inspiration[open] { animation: dialogIn .6s var(--ease-out); }
.cl-inspiration::backdrop { background: rgba(5, 3, 4, .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.cl-inspiration-inner { position: relative; padding: clamp(30px, 5vw, 50px) clamp(20px, 5vw, 44px) clamp(28px, 4vw, 40px); text-align: center; }
.cl-inspiration h2 { margin: 8px 0 20px; font-size: clamp(36px, 6vw, 54px); line-height: 1.04; }
.cl-modal-close { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ivory); font: 300 24px/1 var(--sans); }
.cl-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.cl-tabs button { min-height: 40px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--pearl); font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.cl-tabs button[aria-selected="true"] { background: var(--lacquer); border-color: transparent; color: #fff6f0; }
.cl-outfits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cl-outfits figure { margin: 0; }
.cl-outfits img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 160px 160px 6px 6px; }
.cl-outfits figcaption { margin-top: 10px; color: var(--pearl); font: italic 400 17px/1.3 var(--serif); }
.cl-modal-palette-label { margin: 24px 0 14px; }
.cl-inspiration .palette { justify-content: center; }

/* ==========================================================================
   Reply card layout: guests and voice wish share a row, choices sit side by side
   on shorter screens, so the whole RSVP fits one screen.
   ========================================================================== */
.reply-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.reply-card > * { grid-column: 1 / -1; }
.reply-card > #guest-count { grid-column: 1; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; margin-bottom: 0; }
.reply-card > #voice-record { grid-column: 2; align-self: end; }
.reply-card > #guest-count[hidden] + #voice-record { grid-column: 1 / -1; }
.cl-stepper button { width: 40px; }
.cl-stepper input { width: 38px; }
.cl-voice-button { gap: 9px; padding: 0 12px; font-size: 17px; line-height: 1.05; }
.cl-voice-status, #voice-preview, .cl-rsvp-feedback { grid-column: 1 / -1; }

/* ==========================================================================
   Phones and tablets held upright
   ========================================================================== */
@media (max-aspect-ratio: 1/1) {
  .br-phone { display: inline; }
  .page-amanda .hero-picture img { object-position: 58% 30%; }
  .hero-shade { background: linear-gradient(0deg, var(--noir) 0%, rgba(11, 7, 9, .94) 24%, rgba(11, 7, 9, .7) 42%, rgba(11, 7, 9, .18) 58%, rgba(11, 7, 9, 0) 70%, rgba(11, 7, 9, .55) 100%); }
  .hero-copy { justify-content: flex-end; align-items: center; text-align: center; padding-bottom: calc(clamp(26px, calc(var(--vh) * 5), 60px) + 30px); }
  .hero-name { margin-left: 0; font-size: min(23vw, calc(var(--vh) * 13.5), 190px); }
  .hero-numeral { justify-content: center; margin-left: 0; }
  .hero-numeral i:first-child { display: block; }
  .hero-copy .star-line { justify-content: center; }
  .hero-copy .star-line::before { display: block; }
  .hero-line { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-credit { bottom: clamp(16px, calc(var(--vh) * 3), 30px); font-size: 8.5px; letter-spacing: .24em; }
}
@media (max-width: 520px) {
  :root { --bar: 62px; }
  .chrome-mark .cl-monogram { width: 38px; }
  .chrome-rsvp { min-height: 34px; padding-inline: 14px calc(14px + .3em); }
  .dots { right: 2px; }
  .dots a { width: 22px; height: 24px; }
  .page-inner { padding-inline: max(26px, env(safe-area-inset-left)) max(30px, env(safe-area-inset-right)); }
  .hero-actions .details-link { display: none; }
  .countdown span { font-size: 7.5px; letter-spacing: .22em; }
  .wish-grid { gap: 8px; }
}

/* ==========================================================================
   Landscape tablets and desktops
   ========================================================================== */
@media (min-aspect-ratio: 1/1) and (min-width: 860px) {
  .hero-copy { margin-left: max(0px, calc((100vw - 1180px) / 2)); }
  .hero-shade { background: linear-gradient(90deg, rgba(11, 7, 9, .97) 0%, rgba(11, 7, 9, .9) 26%, rgba(11, 7, 9, .6) 42%, rgba(11, 7, 9, .12) 60%, rgba(11, 7, 9, 0) 74%), linear-gradient(0deg, rgba(11, 7, 9, .92) 0%, rgba(11, 7, 9, 0) 30%), radial-gradient(ellipse 60% 70% at 0% 50%, rgba(122, 10, 28, .3), transparent 70%); }
  .hero-name { font-size: min(11vw, calc(var(--vh) * 19), 168px); }
  .hero-line, .hero-copy .kicker { max-width: 34ch; }
  .page-venue .page-bg { background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(122, 10, 28, .32), transparent 70%), var(--noir); }
  .venue-photo { right: auto; width: 50%; }
  .venue-shade { background: linear-gradient(90deg, rgba(11, 7, 9, 0) 0%, rgba(11, 7, 9, .1) 60%, var(--noir) 100%), linear-gradient(180deg, rgba(11, 7, 9, .55), transparent 24%, transparent 76%, rgba(11, 7, 9, .7)); }
  .venue-shade { right: auto; width: 50%; }
  .glints { position: absolute; inset: 0 50% 0 0; }
  .venue-copy { justify-content: center; margin-left: 50%; padding-inline: clamp(30px, 5vw, 90px) var(--px); }
  .page-venue h2 { font-size: min(8vw, calc(var(--vh) * 13), 128px); }
  .attire-grid { flex-direction: row; gap: clamp(40px, 7vw, 120px); }
  .attire-photo { height: min(calc(var(--vh) * 64), 620px); }
  .attire-copy { max-width: 520px; }
  .page-dress h2 { font-size: min(7vw, calc(var(--vh) * 9), 96px); }
  .wish-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); width: min(100%, 980px); gap: 14px; }
  .wish-grid li:last-child:nth-child(odd) { grid-column: auto; border-radius: 90px 90px 8px 8px; }
  .wish-grid li { min-height: clamp(150px, calc(var(--vh) * 26), 240px); }
  .rsvp-grid { flex-direction: row; align-items: center; justify-content: center; gap: clamp(40px, 7vw, 120px); text-align: left; }
  .rsvp-intro { flex: 0 1 540px; }
  .page-rsvp .chapter { align-items: flex-start; }
  .page-rsvp .chapter-no::before { display: none; }
  .page-rsvp .chapter-name { padding-left: 0; }
  .page-rsvp h2 { font-size: min(5.6vw, calc(var(--vh) * 8.6), 86px); line-height: .98; }
  .page-rsvp h2 > span { display: block; width: fit-content; }
  .rsvp-meta { margin-top: 18px; }
  .rsvp-card-wrap { flex: 0 1 440px; margin-top: 0; }
}

/* ==========================================================================
   Shorter screens: keep every page to a single screen
   ========================================================================== */
@media (max-height: 820px) {
  .reply-seal { top: -26px; right: -14px; left: auto; margin-left: 0; width: 62px; }
  .reply-title { padding-right: 34px; font-size: clamp(18px, calc(var(--vh) * 2.8), 22px); }
  .reply-card { padding-top: 26px; }
  .rsvp-card-wrap { margin-top: 34px; }
  .cl-attendance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cl-attendance legend { grid-column: 1 / -1; }
  .cl-attendance-choice { margin: 0; }
  .cl-attendance-choice span { height: 100%; gap: 9px; padding: 8px 10px; font-size: 16.5px; line-height: 1.12; }
  .cl-attendance-choice b { display: none; }
  .page-rsvp .page-inner { padding-bottom: clamp(16px, calc(var(--vh) * 3), 40px); }
}
@media (max-height: 760px) and (max-aspect-ratio: 1/1) {
  .attire-description { display: none; }
  .attire-photo { height: clamp(120px, calc(var(--vh) * 27), 520px); }
  .page-rsvp h2 { font-size: min(9vw, calc(var(--vh) * 4.6)); }
}
@media (max-height: 680px) {
  .hero-line { font-size: 17px; }
  .chapter { gap: 5px; margin-bottom: 12px; }
  .chapter-no { font-size: 20px; }
}
@media (max-height: 640px) {
  .page-rsvp .chapter, .rsvp-meta { display: none; }
  .wish-sub { display: none; }
  .ticket-card { height: 186px; }
  .countdown div { padding-block: 8px; }
  .cal-links a { min-height: 34px; }
  .hero-actions { margin-top: 16px; }
}
@media (max-height: 620px) and (max-aspect-ratio: 1/1) {
  .hero-line { display: none; }
  .attire-photo { height: calc(var(--vh) * 22); }
  .page-dress .cl-inspiration-button { min-height: 42px; }
  .thanks-monogram { width: calc(var(--vh) * 30); }
}
@media (max-height: 580px) {
  .reply-title { display: none; }
  .reply-card { padding-top: 22px; }
  .chrome-count { display: none; }
}

/* ==========================================================================
   Phone held sideways, reduced motion, no script
   ========================================================================== */
.rotate-note { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  html:not(.cl-typing) .rotate-note { position: fixed; inset: 0; z-index: 300000; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--noir); color: var(--ivory); text-align: center; font: italic 400 19px/1.4 var(--serif); }
  .rotate-note svg { width: 46px; color: var(--scarlet); animation: turn 2.4s var(--ease-io) infinite; }
}
@keyframes turn { 0%, 20% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0); } }
.cl-document:not(.cl-js) .thanks-monogram { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cl-opening-poster, .btn-open::after, .btn-open::before, .beam, .details-link .arrow, .motes i, .glints i, .light-sweep { animation: none !important; }
  .ticket-card { transition-duration: .01ms; }
  .is-monogram *, .is-monogram *::before, .is-monogram *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .pages { scroll-behavior: auto; }
}

/* After replying: the guest pass takes the whole page on phones. */
.page-rsvp .page-inner { justify-content: safe center; overflow-y: auto; scrollbar-width: none; }
.page-rsvp .page-inner::-webkit-scrollbar { display: none; }
@media (max-aspect-ratio: 1/1) {
  .has-receipt .rsvp-intro { display: none; }
  .has-receipt .rsvp-card-wrap { margin-top: 0; }
}
@media (max-height: 820px) {
  .cl-success { gap: 6px; padding: clamp(24px, calc(var(--vh) * 4), 40px) 22px; }
  .cl-success h3 { font-size: clamp(26px, calc(var(--vh) * 4.4), 38px); }
  .cl-success p { font-size: 16.5px; line-height: 1.4; }
  .cl-receipt-name { font-size: 24px !important; }
  .cl-success .cl-gold-button { min-height: 44px; }
}

/* ==========================================================================
   Music controls
   ========================================================================== */
.sound-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: rgba(246, 238, 229, .62); font: 500 9px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.sound-hint svg { width: 15px; height: 15px; color: var(--rose); }
.opener[data-phase="closed"] .opening-content > :nth-child(6) { animation-delay: .9s; }
.opener-controls svg { width: 15px; height: 15px; flex: none; }
#opener-audio[aria-pressed="true"] .icon-off, #opener-audio[aria-pressed="false"] .icon-on { display: none; }
.cl-music { top: calc(16px + env(safe-area-inset-top)); bottom: auto; left: calc(var(--px) - 8px + 54px); width: 38px; height: 38px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .35s, border-color .35s, box-shadow .35s; }
.cl-music:hover { border-color: var(--scarlet); }
.cl-music .icon-on { display: none; }
.cl-music svg { width: 18px; height: 18px; }
.cl-music[aria-pressed="true"] .icon-off, .cl-music[aria-pressed="false"] .cl-eq { display: none; }
.cl-eq { display: flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.cl-eq i { width: 2px; height: 100%; border-radius: 1px; background: var(--rose); transform-origin: 50% 100%; animation: eq 1.1s ease-in-out infinite alternate; }
.cl-eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.4s; }
.cl-eq i:nth-child(3) { animation-duration: 1.3s; animation-delay: -.7s; }
@keyframes eq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@media (max-width: 520px) { .cl-music { left: calc(var(--px) - 8px + 46px); width: 34px; height: 34px; } .cl-music svg { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { .cl-eq i { animation: none; transform: scaleY(.7); } }


/* Amanda XVIII 2.3 - A Night of Dancing. Client revision, November 2026. */
/* Keep essential copy readable. Let dense pages scroll internally instead of hiding text. */
.page-inner { padding-bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px)); justify-content: safe center; overflow-y: auto; scrollbar-width: none; }
.page-inner::-webkit-scrollbar { display: none; }
.page-inner > * { flex-shrink: 0; }
.pages.is-traveling { scroll-snap-type: none; scroll-behavior: auto; }
.hero-credit { bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px)); }
.hero-copy { padding-bottom: max(133px, calc(env(safe-area-inset-bottom) + 120px)); }
.page-rsvp .page-inner { padding-bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px)); }
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--rose); outline-offset: 5px; }

/* Guest-controlled chapter navigation; no auto-advance. */
.page-controls { position: fixed; z-index: 65; left: 50%; bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); transform: translateX(-50%); width: min(420px, calc(100% - 36px)); min-height: 48px; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; border: 1px solid rgba(246,238,229,.2); border-radius: 999px; background: rgba(16,8,12,.92); backdrop-filter: blur(16px); box-shadow: 0 8px 35px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transition: opacity 1.4s ease, visibility 0s 1.4s; }
.cl-opened .page-controls { opacity: 1; visibility: visible; transition-delay: 0s; }
.page-controls button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ivory); font: 500 10px/1 var(--sans); letter-spacing: .06em; cursor: pointer; }
.page-controls button:disabled { opacity: .25; cursor: default; }
.page-controls button:not(:disabled):hover { background: rgba(211,42,65,.18); }
.page-controls > span { text-align: center; color: var(--pearl); font: 400 10px/1.25 var(--sans); letter-spacing: .08em; }

/* Measured, slower entrances, while respecting reduced-motion preferences. */
@media (prefers-reduced-motion: no-preference) {
 .cl-motion .a { transition-duration: 1.45s, 1.8s, 1.45s, 2.2s, 2.1s; }
 .cl-motion .a-letters span { transition-duration: 1.3s, 1.9s, 1.6s; transition-delay: calc(.45s + var(--i) * 120ms); }
 .cl-motion .a-mask .mi { transition-duration: 1.8s; }
 .cl-motion .a-ticket { transition-duration: 1.3s, 2.1s; }
 .cl-motion .a-deal { transition-duration: 1.1s, 1.8s; }
 .cl-motion .a-card { transition-duration: 1.3s, 2s; }
 .cl-motion .a-curtain { transition-duration: 2.8s; }
 .cl-motion .a-curtain img { transition-duration: 5.4s; }
 .cl-motion .a-arch { transition-duration: 2.5s, 1.1s; }
 .ticket-card { transition-duration: 2s; }
 .ticket-face { transition-delay: 1s; }
 .opener-curtain i { transition-duration: 2.6s; }
 .opener.is-fading { transition-duration: 1s; }
 .beam-l { animation-duration: 16s; }
 .beam-r { animation-duration: 20s; }
 .page-venue.is-active .glints i { animation-duration: 4.5s; }
 .page-amanda.is-active .light-sweep { animation-duration: 3.8s; }
 .btn-open::after { animation-duration: 6s; }
 .btn-open::before { animation-duration: 5s; }
}
.text-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 0; background: none; color: var(--pearl); font: 500 10px/1.45 var(--sans); letter-spacing: .12em; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(235,169,177,.35); }
.text-action:hover { color: var(--ivory); text-decoration-color: var(--rose); }
.text-action svg { width: 18px; height: 18px; }
.interaction-hint { margin-top: 12px; color: var(--mist); font: 400 10px/1.5 var(--sans); letter-spacing: .08em; }
.interaction-status { max-width: 50ch; min-height: 1.5em; margin-top: 9px; color: var(--rose); text-align: center; font: 400 12px/1.5 var(--sans); overflow-wrap: anywhere; }

/* The evening: editorial typography, light-play floor, and accessible detail tabs. */
.night-backdrop { background: radial-gradient(ellipse at 50% 22%,rgba(163,18,42,.28),transparent 54%),linear-gradient(180deg,#120a0d,#090709); }
.night-orbit { position: absolute; width: min(75vw,700px); aspect-ratio: 1; top: 3%; left: 50%; transform: translateX(-50%); border: 1px solid rgba(235,169,177,.14); border-radius: 50%; box-shadow: 0 0 0 26px rgba(235,169,177,.025),0 0 0 80px rgba(235,169,177,.012); }
.dance-floor { position: absolute; inset: 60% -40% -30%; background-image: linear-gradient(rgba(235,169,177,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(235,169,177,.14) 1px,transparent 1px); background-size: 70px 70px; transform: perspective(420px) rotateX(58deg); transform-origin: center top; opacity: .3; mask-image: linear-gradient(transparent,#000 40%,transparent); transition: opacity 1.8s ease; }
.page-night[data-mood="dance"] .dance-floor { opacity: .85; }
.page-night[data-mood="music"] .night-orbit { border-color: rgba(235,169,177,.4); }
.night-copy .chapter { margin-bottom: clamp(16px,2.4vh,28px); }
.page-night h2 { font: 400 clamp(48px,7.3vh,88px)/.98 var(--display); letter-spacing: -.035em; }
.page-night h2 > span { display: block; }
.page-night h2 em { color: var(--rose); }
.night-intro { max-width: 47ch; margin-top: 22px; color: var(--pearl); font: 400 clamp(18px,2.4vh,23px)/1.45 var(--serif); }
.night-note { max-width: 44ch; margin-top: 12px; color: var(--rose); font: 400 11px/1.6 var(--sans); letter-spacing: .06em; }
.night-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.night-tabs button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(246,238,229,.025); color: var(--pearl); font: 400 11px/1.3 var(--sans); cursor: pointer; transition: background .6s ease,border-color .6s ease; }
.night-tabs button[aria-selected="true"] { border-color: var(--scarlet); background: rgba(163,18,42,.28); color: var(--ivory); }
.night-panels { display: grid; place-content: center; min-height: 94px; width: min(100%,580px); margin: 10px 0 12px; color: var(--ivory); font: italic 400 clamp(19px,2.6vh,25px)/1.35 var(--serif); }
.night-panels p { margin: 0; }

/* Date: reveal only on tap. The date itself never counts through incorrect days. */
.ticket-reset { min-height: 32px; margin-top: 3px; font-size: 9px; }
.ticket-back { padding-top: 15px; padding-bottom: 12px; }
.ticket-back .td-day { font-size: clamp(66px,11vh,106px); }
.ticket-back .ticket-time { margin-top: 10px; }
.ticket-back .cl-date-value { margin-bottom: 10px; }
.ticket .button.outline { font-size: 9px; letter-spacing: .17em; }

/* Venue. */
.venue-invitation { color: var(--rose); font: italic 400 21px/1.3 var(--serif); margin: 0 0 14px; }
.venue-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.venue-copy { justify-content: flex-end; }

/* Attire: never hide the client's instructions on a shorter phone. */
.attire-formality { margin-top: 12px; color: var(--rose); font: 500 10px/1.5 var(--sans); letter-spacing: .28em; text-transform: uppercase; }
.attire-description { display: block; max-width: 43ch; margin-top: 8px; font-size: clamp(16px,2.2vh,20px); line-height: 1.4; }
.attire-grid { gap: clamp(16px,2vh,30px); }
.interactive-palette { margin-top: 18px; }
.interactive-palette button { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 7px 8px; min-width: 64px; border: 0; background: transparent; color: var(--pearl); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.interactive-palette button[aria-pressed="true"] .swatch { box-shadow: 0 0 0 2px var(--rose),0 0 0 6px var(--noir),0 0 0 7px var(--rose); }
.palette-status { max-width: 42ch; min-height: 2.6em; margin-top: 10px; color: var(--pearl); font: italic 400 16px/1.3 var(--serif); }
.red-note { margin-top: 10px; }
.attire-request { margin-top: 3px; color: var(--mist); font: italic 400 15px/1.4 var(--serif); }
.page-dress .cl-inspiration-button { margin-top: 14px; }

/* Wishlist: the supplied categories, not invented brands, sizes, or gift requirements. */
.wish-sub { display: block; }
.wish-guide { max-width: 42ch; margin-top: 10px; color: var(--mist); font: 400 11px/1.6 var(--sans); }
.wish-grid { margin-top: 24px; }
.wish-grid li { padding: 0; overflow: hidden; }
.wish-reveal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 13px; width: 100%; height: 100%; min-height: inherit; border: none; border-radius: inherit; background: transparent; color: var(--ivory); cursor: pointer; transition: background .9s ease; }
.wish-reveal[aria-expanded="true"] { background: rgba(163,18,42,.18); }
.wish-grid li .wish-number { font: italic 400 25px/1 var(--display); color: var(--rose); }
.wish-grid li .wish-prompt { font: 400 10px/1.4 var(--sans); color: var(--pearl); letter-spacing: .1em; }
.wish-grid li .wish-name { color: var(--ivory); font: 400 clamp(18px,2.6vh,23px)/1.2 var(--serif); }
.wishlist-note { width: min(100%,580px); margin-top: 18px; border-block: 1px solid var(--line); }
.wishlist-note summary { display: flex; justify-content: center; align-items: center; gap: 20px; min-height: 46px; padding: 8px 16px; color: var(--rose); font: italic 400 19px/1.3 var(--serif); cursor: pointer; list-style: none; }
.wishlist-note summary::-webkit-details-marker { display: none; }
.wishlist-note summary span { font: 400 18px/1 var(--sans); transition: transform .5s ease; }
.wishlist-note[open] summary span { transform: rotate(45deg); }
.wishlist-note p { max-width: 48ch; margin: 0 auto; padding: 0 10px 18px; color: var(--pearl); font: 400 18px/1.5 var(--serif); }
.cl-program-list details { width: 100%; }
.cl-program-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; cursor: pointer; color: var(--rose); font: 500 12px/1.4 var(--sans); }
.cl-program-list summary span { color: var(--mist); min-width: 0; font-size: 10px; }
.cl-program-list strong { display: block; padding: 8px 0; }

/* RSVP: a song request uses the existing private notes field and submission flow. */
.song-request-label span { display: inline; margin: 0; font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.reply-card input#song-request { min-height: 37px; padding: 7px 10px; font-size: 17px; }
.rsvp-card-wrap { flex-shrink: 0; }
.rsvp-meta { display: block; }

/* Closing interactions: bounded, gentle sparkle, never flashing. */
.page-thanks h2 { font-size: clamp(38px,6.2vh,78px); }
.page-thanks h2 > span { display: block; }
.thanks-monogram { width: min(48vw,25vh,250px); }
.finale-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin-top: 20px; }
.finale-actions .button { min-height: 48px; }
.page-thanks .signature { margin-top: 12px; }
.page-thanks .finale-foot { margin-top: 12px; }
.page-thanks .interaction-status { max-width: 44ch; }
.celebration-sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.celebration-sparkles i { position: absolute; bottom: 16%; left: var(--x); width: 7px; height: 7px; background: var(--rose); opacity: 0; transform: rotate(45deg); animation: celebrate-sparkle 3.6s ease-out var(--delay) both; }
.celebration-sparkles i:nth-child(3n) { background: var(--ivory); width: 4px; height: 4px; }
@keyframes celebrate-sparkle { 0% { opacity: 0; transform: translate(0,0) rotate(45deg); } 18% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--drift),-48vh) rotate(180deg); } }

@media (max-aspect-ratio: 1/1) {
 .attire-photo { height: clamp(96px,16vh,160px); }
 .page-dress h2 { font-size: clamp(36px,5.4vh,57px); }
 .attire-copy .chapter { margin-bottom: 9px; }
 .attire-grid { gap: 22px; }
 .attire-description { max-width: 40ch; }
 .page-dress .page-inner { padding-top: 92px; }
 .palette .swatch { width: 34px; }
 .page-rsvp h2 { font-size: clamp(30px,4.6vh,44px); }
 .page-rsvp .chapter { display: flex; }
 .rsvp-card-wrap { margin-top: 30px; }
 .page-thanks h2 { font-size: clamp(38px,6vh,62px); }
 .hero-line { display: block; }
 .night-tabs { gap: 6px; }
 .night-tabs button { padding: 9px 11px; font-size: 10px; }
 .page-night h2 { font-size: clamp(48px,7.3vh,70px); }
 .night-intro { margin-top: 18px; }
 .night-panels { min-height: 82px; }
 .venue-copy { padding-top: max(230px,34vh); }
}
@media (min-aspect-ratio: 11/10) and (min-width: 1000px) {
 .attire-photo { height: min(56vh,530px); }
 .venue-copy { justify-content: safe center; }
 .rsvp-card-wrap { margin-top: 0; }
 .wish-grid li { min-height: clamp(140px,23vh,220px); }
}
@media (max-height: 700px) {
 .night-copy .chapter { margin-bottom: 14px; }
 .night-intro { font-size: 17px; margin-top: 14px; }
 .night-note { font-size: 10px; }
 .night-tabs { margin-top: 16px; }
 .night-panels { min-height: 75px; font-size: 19px; margin-block: 4px 8px; }
 .night-copy > .button { min-height: 42px; }
 .interaction-hint { margin-top: 8px; }
 .page-dress .page-inner, .page-rsvp .page-inner { justify-content: flex-start; }
 .wish-sub { font-size: 18px; }
 .page-thanks h2 { font-size: 36px; }
 .thanks-line { font-size: 18px; }
 .thanks-monogram { width: 22vh; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { scroll-behavior: auto !important; }
 .page-controls, .night-tabs button, .dance-floor, .wish-reveal, .ticket-card { transition: none !important; }
 .celebration-sparkles i { animation: none !important; }
 .cl-motion .a, .cl-motion .a-mask .mi, .cl-motion .a-letters span { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Final mobile-fit corrections after visual review. */
@media (max-aspect-ratio: 1/1) {
 .hero-copy { justify-content: flex-end; }
 .attire-photo { height: clamp(90px,12vh,125px); }
 .attire-grid { gap: 16px; }
 .attire-description { font-size: 17px; }
 .reply-card { padding: 24px 22px 20px; }
 .reply-title { font-size: 22px; padding-right: 30px; margin-bottom: 10px; }
 .reply-seal { top: -25px; right: -12px; left: auto; margin-left: 0; width: 62px; }
 .cl-attendance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 .cl-attendance legend { grid-column: 1 / -1; }
 .cl-attendance-choice { margin: 0; }
 .cl-attendance-choice span { height: 100%; gap: 8px; min-height: 48px; padding: 8px; font-size: 16px; line-height: 1.15; }
 .cl-attendance-choice b { display: none; }
 .reply-card label, .reply-card legend { margin-top: 9px; }
 .reply-card > #guest-count { margin-top: 0; }
 .reply-card > #voice-record { margin-top: 10px; min-height: 46px; }
 .reply-card .send { margin-top: 12px; min-height: 48px; }
 .page-rsvp .rsvp-meta { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 .ticket-face, .chrome, .page-controls { transition: none !important; }
}


/* 2.3.1 source-package fixes: hide delayed controls until the invitation is ready. */
.pages { scroll-behavior: auto; }
.page-controls[aria-hidden="true"] { visibility: hidden; }
@media (max-width: 360px) {
 .page-controls { grid-template-columns: 72px 1fr 72px; }
 .night-tabs button { padding-inline: 9px; }
}

/* Small screens retain the full ticket and clearly signal inner-page scrolling. */
@media (max-height: 680px) {
 .ticket-card { height: 244px; }
 .ticket .cl-date-closed { padding-block: 20px; }
 .ticket .cl-date-closed .ticket-date { margin-block: 10px 14px; }
}
html[data-content-more="true"] #page-label::after {
 content: "Scroll for more"; display: block; margin-top: 4px;
 color: var(--rose); font-size: 8px; line-height: 1.1; letter-spacing: .05em;
}


/* 2.3.2: requested attire guidance and discreet closing credit only. */
.page-dress .attire-guidance {
  max-width: 43ch; margin-top: 8px; color: var(--pearl);
  font: italic 400 clamp(16px,2vh,19px)/1.4 var(--serif);
}
.page-dress .attire-accent { color: var(--rose); }
.page-thanks .creator-credit {
  max-width: 100%; margin-top: 14px; padding: 10px 8px 0;
  border-top: 1px solid var(--line); color: var(--pearl);
  font: 400 10px/1.7 var(--sans); letter-spacing: .06em;
  text-align: center; overflow-wrap: anywhere;
}
.page-thanks .creator-credit span { color: var(--ivory); white-space: nowrap; }

/* v2.3.3: navigation stays in-page; music fallback is shown only when needed. */
.cl-music-resume { position: fixed; z-index: 9500; top: calc(64px + env(safe-area-inset-top)); left: var(--px); max-width: calc(100vw - 2 * var(--px)); min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-red); border-radius: 999px; background: #170c11; color: var(--ivory); font: 500 11px/1.4 var(--sans); box-shadow: 0 8px 28px #0008; }
.cl-directions { width: min(92vw, 680px); }
.cl-directions h2 { padding-inline: 14px; }
.directions-date { margin-top: 6px; color: var(--mist); font: 400 13px/1.6 var(--sans); }
.directions-photo { display: block; width: 100%; height: clamp(190px, 32vh, 300px); margin: 22px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--noir); }
.directions-photo { overflow: hidden; }
.directions-photo img { width: 100%; height: 100%; object-fit: cover; }
.directions-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.directions-actions .button { max-width: 100%; white-space: normal; padding-block: 12px; }
.directions-help { margin-top: 16px; color: var(--mist); font: 400 12px/1.6 var(--sans); }
.cl-dialog-fallback[open] { position: fixed; inset: 0; z-index: 10000; box-shadow: 0 0 0 100vmax #000c; }
.cl-modal-open .pages { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cl-inspiration[open] { animation: none; } }
/* Long labels and guest names must also fit compact 320px-wide screens. */
.night-copy > .button, .cl-receipt .cl-gold-button { max-width: 100%; min-width: 0; white-space: normal; line-height: 1.4; text-align: center; justify-content: center; padding-block: 12px; }
.night-panels { grid-template-columns: minmax(0, 1fr); }
.cl-receipt-name { max-width: 100%; overflow-wrap: anywhere; }