/* ==========================================================================
   Muaaz & Hira — wedding invitation
   Sizing: 1rem = 1% of the invitation column (set on <html>), so the whole
   design scales perfectly from a small phone to a desktop window.
   ========================================================================== */

:root {
  --vh: 100vh;
  --cw: min(100vw, 520px, max(calc(var(--vh) * .62), 340px));

  --ivory: #fdf6ec;
  --cream: #f8ead9;
  --peach: #f6cdb8;
  --blush: #efbcb6;
  --rose: #d68a92;
  --wine: #4a1c2b;
  --wine-d: #2d0f1a;
  --ink: #4f1a2a;
  --ink-2: #7a3a49;
  --gold: #c39a4b;
  --gold-hi: #f0dc9f;
  --gold-lo: #8d6a2c;

  --f-script: 'Great Vibes', 'Snell Roundhand', cursive;
  --f-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-ar: 'Aref Ruqaa', 'Amiri', 'Noto Naskh Arabic', serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --hk: 1;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }
@media (max-height: 740px) { :root { --hk: .9; } }
@media (max-height: 660px) { :root { --hk: .8; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  font-size: calc(var(--cw) / 100);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: #1f0a13;
}
body {
  min-height: 100vh;
  font-family: var(--f-serif);
  font-size: 4.4rem;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  background: #1f0a13;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body.is-locked { overflow: hidden; height: var(--vh); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(195, 154, 75, .35); }

/* ---------- desktop backdrop (visible around the invitation column) ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 48% at 50% 28%, rgba(214, 170, 90, .20), transparent 70%),
    radial-gradient(70% 55% at 12% 92%, rgba(214, 138, 146, .16), transparent 70%),
    radial-gradient(60% 50% at 92% 70%, rgba(240, 190, 140, .10), transparent 70%),
    linear-gradient(180deg, #2d0f1a, #1a070f);
}

/* ---------- the column ---------- */
.stage {
  position: relative; z-index: 1;
  width: var(--cw);
  margin: 0 auto;
  overflow: hidden;
  background: var(--ivory);
  box-shadow: 0 0 0 1px rgba(214, 178, 100, .22), 0 40px 140px rgba(0, 0, 0, .6);
}
/* the camera glides in as the doors part */
.js body.is-opening .hero { animation: dolly 3.8s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 46%; }
@keyframes dolly { from { transform: scale(1.12); } to { transform: scale(1); } }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--f-caps); font-weight: 500;
  font-size: 2.7rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-lo); padding-left: .28em;
}
.eyebrow.light { color: var(--gold-hi); }
.sec-title {
  font-family: var(--f-script); font-weight: 400;
  font-size: 11.5rem; line-height: 1.15; color: var(--ink);
}

.off { animation-play-state: paused !important; }  /* set by app.js when a shimmering title is off-screen */
.goldtext {
  background: linear-gradient(100deg, #7d5a21 0%, #e6cc86 18%, #b3862f 38%, #f7e8b6 56%, #a77c2e 76%, #dcbf70 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: foil 9s linear infinite;
}
@keyframes foil { from { background-position: 0% 0; } to { background-position: 240% 0; } }

.orn { display: flex; align-items: center; justify-content: center; gap: 2.4rem; margin: 5rem auto; width: 62rem; }
.orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.orn i:last-child { background: linear-gradient(270deg, transparent, var(--gold)); }
.orn svg { width: 11rem; height: 4.4rem; flex: none; }

/* ---------- reveal on scroll ---------- */
.js [data-r] {
  opacity: 0; transform: translate3d(0, 3.5rem, 0);
  transition: opacity 1.3s var(--ease) var(--d, 0s), transform 1.3s var(--ease) var(--d, 0s), filter 1.3s var(--ease) var(--d, 0s);
}
.js [data-r="blur"] { filter: blur(9px); transform: translate3d(0, 2rem, 0) scale(.98); }
.js [data-r="fade"] { transform: none; }
.js [data-r="rise"] { transform: translate3d(0, 10rem, 0); transition-duration: 1.6s; }
.js [data-r].in { opacity: 1; transform: none; filter: none; }
.js [data-r="draw"] { opacity: 1; transform: none; filter: none; }
/* names are "written" left to right, like ink (the clip sits on an inner span so the observer still sees the outer one) */
.js [data-r="write"] { opacity: 1; transform: none; filter: none; }
.js [data-r="write"] .wr { display: block; clip-path: inset(-25% 103% -25% -6%); transition: clip-path 2.1s cubic-bezier(.55, .05, .25, 1) var(--d, 0s); }
.js [data-r="write"].in .wr { clip-path: inset(-25% -6% -25% -6%); }
.bis-tr, .hero-sub, .verse-note, .close-line, .count-title, .ev-note, .venue, .venue-sub { text-wrap: balance; }

/* ---------- florals ---------- */
.flora { position: absolute; pointer-events: none; z-index: 1; }
.flora svg, [data-flora] svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the soft shadow sits on the static art, never on the swaying wrapper — keeps animation on the GPU */
[data-flora]:not([data-flora="seal"]) svg { filter: drop-shadow(0 1.4rem 2rem var(--fl-shadow, rgba(120, 45, 60, .26))); }
.sway { transform-origin: 0 0; animation: sway 9s ease-in-out infinite alternate; will-change: transform; }
.sway.s2 { animation-duration: 11s; animation-delay: -3s; }
.sway.s3 { animation-duration: 13s; animation-delay: -6s; }
@keyframes sway { from { transform: rotate(-1.3deg) translateY(0); } to { transform: rotate(1.3deg) translateY(.9rem); } }
.sp { transform-box: fill-box; transform-origin: center; opacity: 0; animation: tw 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes tw { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ==========================================================================
   1 · HERO — a fixed 100 × 216 rem scene (art drawn by js/hero.js),
   anchored to the bottom so taller phones simply get more sky
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; z-index: 3;
  height: max(216rem, var(--vh));
  text-align: center;
  background: linear-gradient(180deg, #fff3e8 0%, #fde6d8 30%, #f9d9cc 58%, #f2c6bb 82%, #ebb7ad 100%);
}
.h-scene { position: absolute; left: 0; right: 0; bottom: 0; height: 216rem; }
.h-scene > * { position: absolute; }
.h-scene > [data-hero] > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h-frame, .h-lights, .h-back, .h-front { inset: 0; pointer-events: none; }
.h-frame > svg, .h-back > svg, .h-front > svg { overflow: visible; }
.h-skyline { left: 12%; width: 76%; top: 66.7%; aspect-ratio: 2; opacity: .95; pointer-events: none; }
.h-couple { left: 15.5rem; width: 74rem; bottom: 3rem; aspect-ratio: 600 / 900; z-index: 1;
  filter: drop-shadow(0 1.6rem 2.4rem rgba(110, 40, 50, .22)); }
.h-front { z-index: 1; }
.lb { animation: bulbs 2.4s ease-in-out infinite alternate; }
.lb1 { animation-delay: -.8s; animation-duration: 2.9s; }
.lb2 { animation-delay: -1.6s; animation-duration: 2.1s; }
@keyframes bulbs { from { opacity: .45; } to { opacity: 1; } }

.rays {
  position: absolute; z-index: 0; pointer-events: none;
  left: -35%; right: -35%; top: -6%; height: 60%;
  background: conic-gradient(from 140deg at 50% 0%,
    transparent 0deg 8deg,
    rgba(255, 238, 196, .55) 11deg, transparent 15deg 22deg,
    rgba(255, 234, 186, .42) 26deg, transparent 31deg 36deg,
    rgba(255, 243, 208, .6) 40deg, transparent 45deg 50deg,
    rgba(255, 234, 186, .42) 54deg, transparent 59deg 64deg,
    rgba(255, 238, 196, .55) 68deg, transparent 72deg 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  transform-origin: 50% 0; animation: rays 15s ease-in-out infinite alternate;
}
@keyframes rays { from { transform: rotate(-3.5deg); opacity: .75; } to { transform: rotate(3.5deg); opacity: 1; } }
.glow-drift { position: absolute; z-index: 0; pointer-events: none; inset: 0; overflow: hidden; }
.glow-drift::before, .glow-drift::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(2px);
  background: radial-gradient(circle, rgba(255, 226, 170, .55), rgba(255, 226, 170, 0) 65%);
}
.glow-drift::before { width: 90rem; height: 90rem; left: -20rem; top: 20%; animation: drift1 16s ease-in-out infinite alternate; }
.glow-drift::after { width: 80rem; height: 80rem; right: -25rem; top: 52%; animation: drift2 19s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(30rem, 14rem, 0); } }
@keyframes drift2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-26rem, -18rem, 0); } }

.fl-tl { top: -2rem; left: -2rem; width: 50rem; }
.fl-tr { top: -2rem; right: -2rem; width: 50rem; transform: scaleX(-1); }

.hero-in { left: 4rem; right: 4rem; top: 42rem; z-index: 2; }
.bismillah {
  font-family: var(--f-ar); font-weight: 700; white-space: nowrap;
  font-size: 10.5rem; line-height: 1.6;
  filter: drop-shadow(0 .3rem 1rem rgba(160, 110, 30, .28));
}
.bis-tr {
  font-style: italic; font-weight: 400; font-size: 3.2rem; line-height: 1.35; white-space: nowrap;
  color: var(--ink-2); margin: .6rem auto 0; opacity: .9;
}
.hero .orn { margin: 3rem auto 2.5rem; }
.names { margin: 1rem 0 0; font-weight: 400; }
.nm { display: block; line-height: 1; }
.nm b {
  display: block; font-family: var(--f-script); font-weight: 400; white-space: nowrap;
  font-size: 14.5rem; line-height: 1.15; padding: 0 2rem;
  background: linear-gradient(105deg, #4a1424 0%, #6e2236 26%, #a24558 48%, #6e2236 70%, #4a1424 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: foil 11s linear infinite;
  filter: drop-shadow(0 .4rem 1.2rem rgba(255, 255, 255, .7));
}
.nm b i { font-style: normal; font-size: .62em; }
.full-names {
  margin-top: .4rem; font-family: var(--f-caps); font-weight: 600; font-size: 2.6rem; letter-spacing: .3em; padding-left: .3em;
  text-transform: uppercase; color: #7a5518;
}
.full-names i { font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: 1.5em; letter-spacing: 0; text-transform: none; color: var(--rose); padding: 0 .6rem; }
.hero-dates { margin-top: 1rem; }
.hero-dates span {
  display: inline-block; padding: .9rem 4rem; border-radius: 99rem;
  font-family: var(--f-caps); font-size: 2.5rem; letter-spacing: .2em; text-transform: uppercase; color: #6b4a14;
  background: linear-gradient(90deg, transparent, rgba(240, 220, 159, .55) 20%, rgba(240, 220, 159, .55) 80%, transparent);
}

/* ---------- shared richness: a soft gold lattice on the light sections, filigree dividers ---------- */
.verse::after, .date::after, .journey::after, .events::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='150' viewBox='0 0 100 150'%3E%3Cpath d='M50 0C50 32 100 43 100 75C100 107 50 118 50 150M50 0C50 32 0 43 0 75C0 107 50 118 50 150' fill='none' stroke='%23b98c3c' stroke-opacity='.16' stroke-width='1.6'/%3E%3Cg fill='%23c39a4b' fill-opacity='.16'%3E%3Cellipse cx='50' cy='67' rx='3' ry='6.5'/%3E%3Cellipse cx='50' cy='83' rx='3' ry='6.5'/%3E%3Cellipse cx='42' cy='75' rx='6.5' ry='3'/%3E%3Cellipse cx='58' cy='75' rx='6.5' ry='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 22rem 33rem;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 50%, transparent 30%, #000 85%);
  mask-image: radial-gradient(120% 80% at 50% 50%, transparent 30%, #000 85%);
}
.verse > :not(.flora), .date > :not(.flora), .journey > *, .events > * { position: relative; z-index: 1; }
.divider { width: 74rem; height: 8rem; margin: 0 auto 7rem; }
.divider svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ==========================================================================
   2 · QUOTE
   ========================================================================== */
.verse {
  position: relative; padding: 16rem 0 18rem; margin-top: -1px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #f6d4c4 0%, #f2c5bd 46%, #f6d2c5 100%);
}
.verse::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 40% at 50% 38%, rgba(255, 244, 228, .75), transparent 70%);
}
.verse-intro { position: relative; z-index: 2; margin: 0 auto 10rem; width: 80rem; font-style: italic; font-size: 5.4rem; line-height: 1.3; color: var(--ink-2); text-wrap: balance; }
.arch-wrap { position: relative; width: 84rem; margin: 0 auto; aspect-ratio: 300 / 520; }
.arch-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1rem 2.4rem rgba(130, 60, 60, .18)); }
.arch-frame .a1, .arch-frame .a2, .arch-frame .a3 { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3s var(--ease); }
.arch-frame .a2 { transition-delay: .35s; }
.arch-frame .a3 { transition-delay: .7s; }
.arch-frame .a0, .arch-frame .a-fin { opacity: 0; transition: opacity 2.2s ease .9s; }
.arch-wrap.in .a1, .arch-wrap.in .a2, .arch-wrap.in .a3 { stroke-dashoffset: 0; }
.arch-wrap.in .a0, .arch-wrap.in .a-fin { opacity: 1; }

.quote { position: absolute; left: 8%; right: 8%; top: 27%; z-index: 2; }
.q-mark { display: block; width: 11rem; height: 4.4rem; margin: 0 auto 3.4rem; }
.q-l { font-style: italic; font-weight: 400; color: var(--ink); line-height: 1.18; }
.q1, .q2 { font-size: 10.4rem; }
.q3 { font-size: 8.2rem; margin-top: 2rem; color: var(--ink-2); }
.q4 { font-family: var(--f-script); font-style: normal; font-size: 21rem; line-height: 1.1; margin-top: 1rem; padding: 0 2rem; }
.verse-bouquet { position: absolute; left: -6%; right: -6%; bottom: -5%; z-index: 3; pointer-events: none; }
.verse-bouquet .sway { transform-origin: 50% 100%; }
.verse-note {
  position: relative; z-index: 2;
  margin: 15rem auto 0; width: 66rem; font-style: italic; font-size: 5rem; line-height: 1.4; color: var(--ink-2);
}

/* ==========================================================================
   3 · SAVE THE DATE
   ========================================================================== */
.date {
  position: relative; padding: 16rem 0 14rem; margin-top: -1px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #f6d2c5 0%, #fae4d6 36%, #fdf0e4 100%);
}
.fl-d-tr { top: 0; right: 0; width: 46rem; transform: rotate(8deg) scaleX(-1); transform-origin: top right; opacity: .95; }
.date .sec-title { margin: 1rem 0 9rem; }

.scratch {
  position: relative; width: 80rem; height: 41rem; margin: 0 auto;
  border-radius: 3rem;
  box-shadow: 0 2rem 6rem rgba(120, 60, 50, .28), 0 0 0 1px rgba(195, 154, 75, .75);
}
.scratch-under {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: radial-gradient(90% 90% at 50% 40%, #fffdf8, #f9e8d6);
}
.scratch-under::after { content: ''; position: absolute; inset: 2rem; border-radius: 1.6rem; border: 1px solid rgba(195, 154, 75, .5); pointer-events: none; }
.su-k { font-family: var(--f-caps); font-size: 2.8rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-lo); padding-left: .34em; }
.su-row { display: flex; align-items: baseline; justify-content: center; gap: 3rem; line-height: 1; }
.su-row b { font-family: var(--f-serif); font-weight: 500; font-size: 19rem;
  background: linear-gradient(180deg, #e9cd86, #a77c2e 70%, #7d5a21); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.su-row i { font-family: var(--f-script); font-style: normal; font-size: 10rem; color: var(--rose); }
.su-m { font-family: var(--f-caps); font-size: 3.4rem; letter-spacing: .36em; text-transform: uppercase; color: var(--ink); padding-left: .36em; }
.scratch-cv { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; touch-action: none; cursor: grab; transition: opacity 1.1s ease; }
.scratch-cv:active { cursor: grabbing; }
.scratch.done .scratch-cv { opacity: 0; pointer-events: none; }
.scratch-hint { margin-top: 4.5rem; font-style: italic; font-size: 4.2rem; color: var(--ink-2); transition: opacity .8s; }
.scratch-hint.gone { opacity: 0; }

.count { margin-top: 15rem; max-height: 80rem; transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), max-height 1.2s var(--ease), margin 1.2s var(--ease); }
.count.locked { opacity: 0; transform: translateY(4rem); max-height: 0; margin-top: 0; overflow: hidden; pointer-events: none; }
.count-title { font-style: italic; font-size: 5.4rem; color: var(--ink-2); }
.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6rem; padding: 0 5rem; margin-top: 6rem; }
.cd { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.cd svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cd .trk { fill: rgba(255, 252, 246, .7); stroke: rgba(195, 154, 75, .3); stroke-width: 2; }
.cd .bar { fill: none; stroke: url(#gGold); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s var(--ease); filter: drop-shadow(0 0 2px rgba(195, 154, 75, .6)); }
.cd b { position: relative; font-family: var(--f-serif); font-weight: 500; font-size: 8.2rem; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.cd span { position: absolute; top: 100%; left: 0; right: 0; margin-top: 2rem; font-family: var(--f-caps); font-size: 2.5rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lo); }
.count-grid { margin-bottom: 4rem; }

/* ==========================================================================
   3b · THE BARAT JOURNEY
   ========================================================================== */
.journey { position: relative; padding: 12rem 0 10rem; margin-top: -1px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #fdf0e4 0%, #fbe6d8 50%, #fae6d6 100%); }
.journey .sec-title { margin-top: 1rem; }
.j-sub { font-style: italic; font-size: 5.2rem; color: var(--ink-2); margin-top: .5rem; }
.j-sub b { font-family: var(--f-caps); font-style: normal; font-weight: 600; font-size: .62em; letter-spacing: .24em; color: var(--gold-lo); }
.j-map { position: relative; width: 100rem; aspect-ratio: 1000 / 1240; margin: 4rem auto 0; }
.j-art, .j-trail { position: absolute; inset: 0; }
.j-art { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 94%, transparent 100%); }
.j-art > svg, .j-trail > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.j-car { position: absolute; left: 0; top: 0; width: 26rem; aspect-ratio: 275 / 145; margin: -12.3rem 0 0 -13rem;
  transform-origin: 50% 87%; will-change: transform; filter: drop-shadow(0 .8rem 1.2rem rgba(90, 30, 40, .28)); }
.j-car > svg { width: 100%; height: 100%; display: block; }
.j-car .wh { transform-box: fill-box; transform-origin: center; }
.j-car.driving .wh { animation: spin .55s linear infinite; }
.j-car .pf { fill: #f6e9de; opacity: 0; transform-box: fill-box; transform-origin: center; }
.j-car.driving .pf { animation: puff 1.2s ease-out infinite; }
.j-car.driving .pf:nth-child(2) { animation-delay: .4s; }
.j-car.driving .pf:nth-child(3) { animation-delay: .8s; }
@keyframes puff { 0% { opacity: .75; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-26px, -8px) scale(1.9); } }
@keyframes spin { to { transform: rotate(360deg); } }
.j-note { margin: 2rem auto 0; width: 84rem; font-family: var(--f-caps); font-size: 2.6rem; letter-spacing: .16em; text-transform: uppercase; color: #6b4a14; line-height: 1.8; }
.j-map.arrived::after { content: ''; position: absolute; left: 23.2%; top: 34.8%; width: 12rem; height: 12rem; margin: -6rem 0 0 -6rem; border-radius: 50%;
  border: 2px solid rgba(230, 185, 78, .9); animation: ping 1.4s ease-out infinite; pointer-events: none; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ==========================================================================
   4 · EVENTS
   ========================================================================== */
.events {
  position: relative; padding: 14rem 0 26rem; margin-top: -1px; text-align: center;
  background: linear-gradient(180deg, #fdf0e4 0%, #fae6d6 48%, #f2d6c7 100%);
}
.events-head .sec-title { margin-top: 1rem; font-size: 14rem; }
.events-head .orn { margin-bottom: 18rem; }

.event { position: relative; width: 86rem; margin: 0 auto 30rem; }
.event:last-child { margin-bottom: 0; }
.event-crown { position: absolute; z-index: 4; left: 50%; top: -27rem; width: 84rem; transform: translateX(-50%); pointer-events: none; }
.event-crown .sway { transform-origin: 50% 100%; }

.event-card {
  position: relative; z-index: 2;
  padding: 24rem 7rem 11rem;
  border-radius: 43rem 43rem 5rem 5rem;
  border: 1.5px solid var(--gold);
  background: linear-gradient(180deg, #fffaf3 0%, #fbeee1 100%);
  box-shadow: 0 3rem 8rem rgba(120, 60, 50, .24), inset 0 0 0 6px #fffaf3, inset 0 0 0 7px rgba(195, 154, 75, .55);
}
.event-card::before { content: ''; position: absolute; inset: 7px; border-radius: inherit; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 8 36.6 20.9 48.9 15.1 43.1 27.4 56 32 43.1 36.6 48.9 48.9 36.6 43.1 32 56 27.4 43.1 15.1 48.9 20.9 36.6 8 32 20.9 27.4 15.1 15.1 27.4 20.9Z' fill='none' stroke='%23c39a4b' stroke-width='1.2'/%3E%3Cpath d='M-10 0 0 -10 10 0 0 10ZM54 0 64 -10 74 0 64 10ZM-10 64 0 54 10 64 0 74ZM54 64 64 54 74 64 64 74Z' fill='none' stroke='%23c39a4b' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 13rem 13rem; opacity: .14; }
.night .event-card::before { opacity: .12; }
.ev-icon { display: block; width: 15rem; height: 15rem; margin: 0 auto 2rem; filter: drop-shadow(0 .6rem 1.2rem rgba(195, 154, 75, .45)); }
.ev-name { font-family: var(--f-caps); font-weight: 500; font-size: 8.6rem; letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.ev-day { margin-top: 3rem; font-family: var(--f-caps); font-size: 3.1rem; letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: var(--gold-lo); }
.ev-date { margin-top: 1.2rem; display: flex; align-items: baseline; justify-content: center; gap: 1.4rem; color: var(--ink); line-height: 1; }
.ev-date b { font-family: var(--f-serif); font-weight: 500; font-size: 17rem;
  background: linear-gradient(180deg, #e9cd86, #a77c2e 70%, #7d5a21); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ev-date sup { font-family: var(--f-serif); font-style: italic; font-size: 5rem; margin-left: -.6rem; align-self: flex-start; margin-top: 2rem; color: var(--gold-lo); }
.ev-date span { font-family: var(--f-serif); font-style: italic; font-size: 6.4rem; padding-left: 1rem; }
.ev-note {
  display: inline-flex; align-items: center; gap: 1.8rem; margin-top: 7rem;
  padding: 2.2rem 4.4rem; border-radius: 99rem;
  font-family: var(--f-caps); font-size: 2.7rem; letter-spacing: .14em; text-transform: uppercase; color: #5a3b0f;
  background: linear-gradient(135deg, rgba(240, 220, 159, .75), rgba(214, 170, 90, .35));
  border: 1px solid rgba(195, 154, 75, .75);
}
.ev-note svg { width: 5.2rem; height: 5.2rem; color: var(--gold-lo); }

.ev-info { margin-top: 8rem; display: grid; gap: 7rem; }
.ev-info > div { position: relative; }
.ev-info > div + div::before { content: ''; position: absolute; left: 22%; right: 22%; top: -3.6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.ev-info dt { font-family: var(--f-caps); font-size: 2.8rem; letter-spacing: .36em; padding-left: .36em; text-transform: uppercase; color: var(--gold-lo); }
.ev-info dd { margin-top: 2rem; }
.venue { font-family: var(--f-serif); font-weight: 500; font-size: 6.4rem; line-height: 1.15; color: var(--ink); }
.venue-sub { margin-top: .8rem !important; font-style: italic; font-size: 4.6rem; color: var(--ink-2); }
.time { display: flex; align-items: baseline; justify-content: center; gap: 1rem; color: var(--ink); line-height: 1; }
.time b { font-family: var(--f-serif); font-weight: 500; font-size: 10rem; }
.time small { font-family: var(--f-caps); font-size: 3.2rem; letter-spacing: .1em; margin-right: 1.4rem; color: var(--gold-lo); }
.time i { font-family: var(--f-script); font-style: normal; font-size: 7rem; color: var(--rose); margin-right: 1.4rem; }
.time small:last-child { margin-right: 0; }

.ev-actions { margin-top: 10rem; display: flex; flex-direction: column; align-items: center; gap: 3rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 2.2rem;
  min-width: 56rem; height: 12.5rem; padding: 0 6rem; border-radius: 99rem;
  font-family: var(--f-caps); font-weight: 500; font-size: 3rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--gold); color: var(--gold-lo);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-position .6s;
  position: relative; overflow: hidden;
}
.btn svg { width: 5rem; height: 5rem; flex: none; }
.btn:active { transform: scale(.97); }
.btn.solid {
  color: #3a1420; border-color: transparent;
  background: linear-gradient(110deg, #9a742d 0%, #ecd597 28%, #c39a4b 52%, #f6e7b8 76%, #a47a31 100%);
  background-size: 220% 100%; background-position: 0 0;
  box-shadow: 0 1.4rem 3.4rem rgba(143, 107, 43, .35);
}
.btn.solid:hover { background-position: 100% 0; }
.btn.ghost { background: rgba(255, 250, 242, .55); }
.btn.ghost:hover { background: rgba(255, 250, 242, .95); }

/* ---- Walima: the evening, by candlelight ---- */
.night .event-card {
  color: #f6e7d6; border-color: #d9b76a;
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(226, 160, 120, .26), transparent 70%),
    linear-gradient(180deg, #5c2335 0%, #3f1626 52%, #2c0e1a 100%);
  box-shadow: 0 3rem 9rem rgba(40, 8, 20, .55), inset 0 0 0 6px #3f1626, inset 0 0 0 7px rgba(217, 183, 106, .6), 0 0 0 1px rgba(255, 220, 150, .15);
}
.night .ev-name, .night .venue, .night .time, .night .ev-date { color: #fbeedd; }
.night .ev-day, .night .ev-info dt, .night .time small { color: var(--gold-hi); }
.night .venue-sub { color: #e6c9bd; }
.night .ev-date b { background: linear-gradient(180deg, #fbefc4, #e1bf6d 60%, #b88a35); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.night .ev-date sup { color: var(--gold-hi); }
.night .time i, .night .ev-date span { color: #f0b9ad; }
.night .btn.ghost { color: var(--gold-hi); background: rgba(255, 244, 226, .06); border-color: rgba(240, 220, 159, .7); }
.night .btn.ghost:hover { background: rgba(255, 244, 226, .14); }
.night .ev-info > div + div::before { background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); opacity: .7; }
.night .ev-icon { filter: drop-shadow(0 0 1.8rem rgba(255, 214, 140, .6)); }
.night-stars { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; opacity: .9;
  background:
    radial-gradient(1.2px 1.2px at 14% 12%, #fff 55%, transparent 60%), radial-gradient(1px 1px at 28% 6%, #ffeec2 55%, transparent 60%),
    radial-gradient(1.4px 1.4px at 72% 9%, #fff 55%, transparent 60%), radial-gradient(1px 1px at 86% 18%, #ffeec2 55%, transparent 60%),
    radial-gradient(1px 1px at 8% 26%, #ffeec2 55%, transparent 60%), radial-gradient(1.3px 1.3px at 92% 31%, #fff 55%, transparent 60%),
    radial-gradient(1px 1px at 40% 20%, #fff 55%, transparent 60%), radial-gradient(1px 1px at 60% 14%, #ffeec2 55%, transparent 60%),
    radial-gradient(1.1px 1.1px at 20% 40%, #fff 55%, transparent 60%), radial-gradient(1px 1px at 80% 44%, #ffeec2 55%, transparent 60%);
  animation: stars 4.5s ease-in-out infinite alternate;
}
@keyframes stars { from { opacity: .35; } to { opacity: 1; } }
.night .event-card > :not(.night-stars) { position: relative; }

/* ==========================================================================
   5 · CLOSING
   ========================================================================== */
.closing {
  position: relative; padding: 26rem 6rem 56rem; margin-top: -1px; text-align: center; color: #f6e7d6; overflow: hidden;
  background: linear-gradient(180deg, #f2d6c7 0%, #cf9a9a 7%, #8c4457 17%, #5a2336 30%, #3a1420 48%, #2a0d19 72%, #1f0a13 100%);
}
.close-glow { position: absolute; left: 0; right: 0; top: 14%; height: 70rem; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 190, 110, .24), transparent 72%); animation: breathe 5s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .6; transform: scale(.96); } to { opacity: 1; transform: scale(1.05); } }

.c-lantern { position: absolute; top: -40rem; width: 11rem; aspect-ratio: 160 / 1640; transform-origin: 50% 0; pointer-events: none;
  animation: lantern 6.4s ease-in-out infinite alternate; }
.cl-l { left: 7rem; }
.cl-r { right: 7rem; animation-duration: 7.4s; animation-delay: -2.6s; }
.c-lantern > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.c-lantern .g-halo { top: 84.8%; }
.candles { position: relative; width: 86rem; aspect-ratio: 600 / 470; margin: 0 auto 4rem; }
.candles > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, .35)); }
/* flames: a flickering teardrop with a white core, a blue base and a warm halo */
.cflame { position: absolute; width: 4.6rem; height: 11.5rem; margin: -11rem 0 0 -2.3rem; transform-origin: 50% 96%; pointer-events: none;
  animation: cf-sway 3.2s ease-in-out infinite alternate; }
.cflame > i { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 44'%3E%3Cdefs%3E%3CradialGradient id='o' cx='.5' cy='.74' r='.72'%3E%3Cstop offset='0' stop-color='%23ffd66e'/%3E%3Cstop offset='.55' stop-color='%23ff9c30' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23ff6a00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='.5' cy='.78' r='.62'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%23fff7d2'/%3E%3Cstop offset='1' stop-color='%23ffe18c' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M10 0C13 9 20 17 20 29C20 38 15.5 44 10 44C4.5 44 0 38 0 29C0 17 7 9 10 0Z' fill='url(%23o)'/%3E%3Cpath d='M10 13C12 20 15 24 15 31C15 37 12.8 40.5 10 40.5C7.2 40.5 5 37 5 31C5 24 8 20 10 13Z' fill='url(%23c)'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 50% 92%;
  animation: cf-flick 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 .8rem rgba(255, 170, 70, .9)); }
.cflame::before { content: ''; position: absolute; left: 30%; right: 30%; bottom: 3%; height: 16%; border-radius: 50%; z-index: 1;
  background: radial-gradient(ellipse at 50% 70%, rgba(120, 160, 255, .8), rgba(120, 160, 255, 0) 72%); }
.cflame::after { content: ''; position: absolute; left: 50%; top: 55%; width: 56rem; height: 56rem; margin: -28rem 0 0 -28rem; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 200, 120, .34), rgba(255, 150, 70, .12) 34%, transparent 64%); animation: halo 3.2s ease-in-out infinite alternate; }
.cflame:nth-of-type(2) { animation-duration: 3.8s; animation-delay: -1.1s; }
.cflame:nth-of-type(2) > i { animation-duration: 1.9s; animation-delay: -.6s; }
.cflame:nth-of-type(3) { animation-duration: 2.7s; animation-delay: -.4s; }
.cflame:nth-of-type(3) > i { animation-duration: 1.3s; animation-delay: -.9s; }
.cflame.sm { width: 2.6rem; height: 6.4rem; margin: -6.2rem 0 0 -1.3rem; }
.cflame.sm::after { width: 26rem; height: 26rem; margin: -13rem 0 0 -13rem; }
@keyframes cf-flick {
  0% { transform: scale(1, 1); } 20% { transform: scale(.94, 1.07); } 45% { transform: scale(1.04, .95); }
  70% { transform: scale(.97, 1.04); } 100% { transform: scale(1.02, .98); }
}
@keyframes cf-sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
@keyframes halo { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }

.close-line { font-style: italic; font-size: 8rem; line-height: 1.22; color: #fbeedd; margin-top: 4rem; }
.close-names { font-family: var(--f-script); font-size: 14.5rem; line-height: 1.2; margin: 4rem 0 10rem; white-space: nowrap; filter: drop-shadow(0 0 2rem rgba(240, 200, 120, .35)); }
.close-actions { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.close-msg { width: 84rem; }
.close-msg .orn { margin: 0 auto 4rem; width: 52rem; }
.close-msg .orn i { background: linear-gradient(90deg, transparent, var(--gold-hi)); }
.close-msg .orn i:last-child { background: linear-gradient(270deg, transparent, var(--gold-hi)); }
.close-msg p { font-style: italic; font-size: 5.2rem; line-height: 1.45; color: rgba(251, 238, 221, .88); text-wrap: balance; }
.close-msg .close-thanks { margin-top: 4rem; font-family: var(--f-caps); font-style: normal; font-size: 3rem; letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; color: var(--gold-hi); }
.btn.ghost.light { color: var(--gold-hi); border-color: rgba(240, 220, 159, .7); background: rgba(255, 244, 226, .06); }
.replay { margin-top: 9rem; font-family: var(--f-caps); font-size: 2.6rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(240, 220, 159, .75); padding: 2rem 3rem; border-bottom: 1px solid rgba(240, 220, 159, .35); }
.replay:hover { color: var(--gold-hi); }
.fine { margin-top: 7rem; font-family: var(--f-caps); font-size: 2.3rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(246, 231, 214, .5); }
.fl-close { left: -3rem; right: -3rem; bottom: -2rem; opacity: .95; }
.fl-close .sway { transform-origin: 50% 100%; }
.fl-close { --fl-shadow: rgba(0, 0, 0, .4); }
.site-foot { position: relative; z-index: 1; padding: 6rem 6rem calc(7rem + env(safe-area-inset-bottom)); text-align: center;
  background: #16060c; border-top: 1px solid rgba(240, 220, 159, .22);
  font-family: var(--f-caps); font-size: 2.5rem; letter-spacing: .14em; color: rgba(246, 231, 214, .62); }
.site-foot a { font-family: var(--f-serif); font-size: 1.45em; letter-spacing: .03em; color: var(--gold-hi); text-decoration: none; border-bottom: 1px solid rgba(240, 220, 159, .35); padding-bottom: .2rem; }
.site-foot a:hover { color: #fff3d6; }

/* ==========================================================================
   THE GATE — a candlelit Mughal doorway (the art is drawn by js/gate.js)
   The scene is 100 × 216 "gu", anchored to the bottom of the screen and as
   wide as the column allows; the velvet wall simply continues past its edges.
   Positions below are % of the scene (1000 × 2160 SVG units).
   ========================================================================== */
.gate {
  position: fixed; top: 0; bottom: 0; left: calc(50% - var(--cw) / 2); width: var(--cw);
  z-index: 50; overflow: hidden; cursor: pointer;
  background: #1c0710;
  --gu: min(1rem, calc(var(--vh) / 216));
}
.is-opening .gate { background: transparent; }
.g-scene {
  position: absolute; bottom: 0; left: calc(50% - 50 * var(--gu));
  width: calc(100 * var(--gu)); height: calc(216 * var(--gu));
  perspective: calc(250 * var(--gu)); transform-origin: 50% 56%;
  animation: g-in 1.8s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes g-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.g-scene > * { position: absolute; }
.g-wall, .g-frame { inset: 0; pointer-events: none; }
.g-scene [data-gate] > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.g-leaf svg { overflow: hidden; }                 /* each leaf keeps only its half of the seal */

/* lanterns on long chains, swinging slowly */
.g-lantern { width: 13%; height: 61.69%; top: -40.97%; transform-origin: 50% 0; pointer-events: none;
  animation: lantern 6s ease-in-out infinite alternate; }
.gl-l { left: 6.5%; }
.gl-r { left: 80.5%; animation-duration: 7.2s; animation-delay: -2.4s; }
@keyframes lantern { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
.g-halo { position: absolute; left: 50%; top: 84.8%; width: 520%; aspect-ratio: 1; margin: -260% 0 0 -260%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 115, .46), rgba(255, 150, 70, .15) 32%, transparent 62%);
  animation: lamp 2.6s ease-in-out infinite alternate; }
.gl-r .g-halo { animation-duration: 3.1s; }
@keyframes lamp { 0% { opacity: .72; } 40% { opacity: 1; } 70% { opacity: .84; } 100% { opacity: .95; } }

/* the two leaves */
.door { top: 9.2593%; height: 90.7407%; width: 43%; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
  transition: transform 2.4s cubic-bezier(.62, 0, .24, 1) .55s; }
.door-l { left: 7%; transform-origin: 0 50%; }
.door-r { left: 50%; transform-origin: 100% 50%; }
.g-leaf { position: absolute; inset: 0; }
/* lamplight behind the jali windows */
.g-glow { position: absolute; top: 3.673%; height: 32.296%; width: 85.581%; background: #2a0b0a; }
.door-l .g-glow { left: 11.163%; }
.door-r .g-glow { left: 3.256%; }
.g-glow::before { content: ''; position: absolute; inset: 0; animation: candle 2.8s ease-in-out infinite alternate; }
.door-l .g-glow::before { background: radial-gradient(130% 80% at 92% 86%, #fff7dc 0%, #ffd77f 18%, #f59d45 44%, #a9481b 74%, #4a170f 100%); }
.door-r .g-glow::before { background: radial-gradient(130% 80% at 8% 86%, #fff7dc 0%, #ffd77f 18%, #f59d45 44%, #a9481b 74%, #4a170f 100%); animation-delay: -1.3s; }
@keyframes candle { 0% { opacity: .8; } 35% { opacity: 1; } 60% { opacity: .86; } 100% { opacity: .97; } }

/* light leaking through the meeting line of the doors */
.g-seam { left: calc(50% - 4 * var(--gu)); width: calc(8 * var(--gu)); top: 12.6%; bottom: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 180, 100, .16) 30%, rgba(255, 214, 150, .6) 46%, #fff4d8 50%, rgba(255, 214, 150, .6) 54%, rgba(255, 180, 100, .16) 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 27%, transparent 31%, transparent 80%, #000 84%, #000 96%, transparent);
  mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 27%, transparent 31%, transparent 80%, #000 84%, #000 96%, transparent);
  animation: seam 3.2s ease-in-out infinite alternate; }
@keyframes seam { from { opacity: .5; } to { opacity: 1; } }

/* hanging flower strings and the pearl pendant */
.g-strand, .g-pendant { transform-origin: 50% 0; pointer-events: none; animation: strand 5s ease-in-out infinite alternate; }
.g-strand { width: 4%; }
.st1 { left: 27.2%; top: 20.926%; height: 15.278%; }
.st2 { left: 17.6%; top: 25.926%; height: 11.574%; animation-duration: 6.2s; animation-delay: -1.5s; }
.st3 { left: 68.8%; top: 20.926%; height: 15.278%; animation-duration: 5.6s; animation-delay: -2.4s; }
.st4 { left: 78.4%; top: 25.926%; height: 11.574%; animation-duration: 6.8s; animation-delay: -.7s; }
.g-pendant { left: 47%; top: 13.889%; width: 6%; height: 10.37%; animation-duration: 4.4s; }
@keyframes strand { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }

/* the seal: ripples, a glint of light, and the tap target */
.g-ripple { left: calc(50% - 21 * var(--gu)); top: calc(50% - 21 * var(--gu)); width: calc(42 * var(--gu)); height: calc(42 * var(--gu));
  border-radius: 50%; border: 1.5px solid rgba(255, 228, 168, .8); pointer-events: none; animation: ripple 3.6s ease-out infinite; }
.g-ripple.r2 { animation-delay: 1.8s; }
@keyframes ripple { 0% { transform: scale(.98); opacity: 0; } 14% { opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
.g-glint { left: calc(50% - 16 * var(--gu)); top: calc(50% - 16 * var(--gu)); width: calc(32 * var(--gu)); height: calc(32 * var(--gu));
  border-radius: 50%; overflow: hidden; pointer-events: none; opacity: .7; }
.g-glint i { position: absolute; top: -30%; left: 0; width: 34%; height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 252, 232, .9), transparent);
  transform: translateX(-160%) rotate(22deg); animation: glint 5.5s ease-in-out 2s infinite; }
@keyframes glint { 0% { transform: translateX(-160%) rotate(22deg); } 38%, 100% { transform: translateX(380%) rotate(22deg); } }
.g-hit { left: calc(50% - 23 * var(--gu)); top: calc(50% - 23 * var(--gu)); width: calc(46 * var(--gu)); height: calc(46 * var(--gu)); border-radius: 50%; padding: 0; }

/* the words on the lower panels */
.g-text { left: 9%; right: 9%; top: 63.6%; text-align: center; pointer-events: none; transition: opacity .9s ease; }
.g-guest { font-family: var(--f-serif); font-style: italic; font-size: calc(4.8 * var(--gu)); line-height: 1.25; color: #f6e2bf; margin-bottom: calc(1.8 * var(--gu)); }
.g-guest b { font-weight: 500; color: #fff3d6; }
.g-eyebrow { font-family: var(--f-caps); font-weight: 500; font-size: calc(2.7 * var(--gu)); letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: rgba(240, 220, 159, .92); }
.g-names { font-family: var(--f-script); font-size: calc(12.6 * var(--gu)); line-height: 1.18; margin-top: calc(.4 * var(--gu)); white-space: nowrap;
  filter: drop-shadow(0 0 calc(1.8 * var(--gu)) rgba(255, 196, 110, .38)); }
.g-names i { font-style: normal; font-size: .6em; }
.g-orn { display: flex; align-items: center; justify-content: center; gap: calc(2 * var(--gu)); width: 58%; margin: calc(1.6 * var(--gu)) auto calc(2 * var(--gu)); }
.g-orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hi)); }
.g-orn i:last-child { background: linear-gradient(270deg, transparent, var(--gold-hi)); }
.g-orn svg { width: calc(9 * var(--gu)); height: calc(3.6 * var(--gu)); flex: none; }
.g-hint { font-family: var(--f-caps); font-size: calc(2.45 * var(--gu)); letter-spacing: .36em; padding-left: .36em; text-transform: uppercase; color: #ffe8c2;
  animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
/* wait for the fonts so nothing flashes in a fallback face */
.js .g-text { opacity: 0; }
.js .fonts-ready .g-text { opacity: 1; }
.js body:not(.fonts-ready) #gdSeal .mono { opacity: 0; }

.g-flash { left: 7%; width: 86%; top: 9.26%; bottom: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(58% 40% at 50% 50%, #fffaf0, rgba(255, 228, 170, .72) 38%, rgba(255, 200, 130, .22) 64%, transparent 80%); }

/* ---- opening: the seal cracks, light bursts through, the doors swing in, and we walk through ---- */
.js .is-opening .g-text, .is-opening .g-ripple, .is-opening .g-glint { opacity: 0; transition: opacity .4s ease; }
.is-opening .g-hit { pointer-events: none; }
.door .seal-half { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.3, .7, .3, 1) .08s; }
.is-opening .door-l .seal-half { transform: translate(-22px, 10px) rotate(-8deg); }
.is-opening .door-r .seal-half { transform: translate(22px, 10px) rotate(8deg); }
.is-opening .g-seam { animation: seam-burst 1s ease-out forwards; }
@keyframes seam-burst { 0% { opacity: 1; transform: scaleX(1); } 55% { opacity: 1; transform: scaleX(5); } 100% { opacity: 0; transform: scaleX(10); } }
.is-opening .g-flash { animation: flash 2.2s ease-out .45s forwards; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: .95; } 100% { opacity: 0; } }
.is-opening .door-l { transform: rotateY(105deg); }
.is-opening .door-r { transform: rotateY(-105deg); }
.is-opening .g-scene { animation: g-walk 2.4s cubic-bezier(.5, 0, .75, .45) 1.3s both; }
@keyframes g-walk { 0% { transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }

/* ==========================================================================
   UI
   ========================================================================== */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }

.sound {
  position: fixed; z-index: 70; top: max(12px, env(safe-area-inset-top));
  right: calc(50% - var(--cw) / 2 + 12px);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-lo);
  background: rgba(255, 250, 242, .78); border: 1px solid rgba(195, 154, 75, .7);
  box-shadow: 0 6px 18px rgba(60, 20, 30, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: scale(.7); transition: opacity .8s ease, transform .8s var(--ease);
}
.sound.show { opacity: 1; transform: none; }
.sound[hidden] { display: none; }
.eq { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.eq i { width: 2.5px; border-radius: 2px; background: currentColor; height: 100%; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; animation-duration: 1.2s; } .eq i:nth-child(3) { animation-delay: -.6s; animation-duration: .9s; } .eq i:nth-child(4) { animation-delay: -.2s; animation-duration: 1.3s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.mute-x { position: absolute; width: 24px; height: 24px; opacity: 0; }
.sound.muted .eq i { animation: none; transform: scaleY(.25); opacity: .6; }
.sound.muted .mute-x { opacity: 1; }

.toast { position: fixed; z-index: 80; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 12px 22px; border-radius: 99px; font: 500 12px/1 var(--f-caps); letter-spacing: .14em; text-transform: uppercase; color: #fbeedd;
  background: rgba(45, 15, 26, .92); border: 1px solid rgba(240, 220, 159, .6); box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  transition: opacity .4s ease, transform .4s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* thin gold scrollbar on desktop */
@media (hover: hover) and (min-width: 700px) {
  html { scrollbar-width: thin; scrollbar-color: #b88a35 #1f0a13; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sway, .rays, .glow-drift::before, .glow-drift::after, .goldtext, .nm b, .amp, .close-glow, .night-stars,
  .g-lantern, .g-strand, .g-pendant, .g-glint i, .g-halo, .g-glow::before, .g-seam, .g-hint { animation: none !important; }
  .js [data-r] { transition-duration: .6s !important; filter: none !important; transform: none !important; }
  .door { transition-duration: 1.2s; transition-delay: .2s; }
  .is-opening .g-scene { animation-duration: 1s; animation-delay: .6s; }
}