/* ============================================================
   MOONLIT MEHFIL — Cinematic Wedding Invitation
   Dark luxury · Indian aesthetic · Film-reel scroll
   ============================================================ */

:root {
  --ink:        #fff7e8;
  --ink-muted:  rgba(255,247,232,0.82);
  --ink-dim:    rgba(255,247,232,0.64);
  --night:      #030506;
  --night-2:    #06080c;
  --deep-blue:  #040b18;
  --forest:     #0d2418;
  --wine:       #5a1729;
  --wine-2:     #8a2640;
  --rose:       #c96e6c;
  --gold:       #edc36e;
  --gold-bright:#f8dc92;
  --gold-deep:  #c89539;
  --amber:      #f3d899;
  --moon:       #e6efff;
  --paper:      #fff0c6;
  --paper-ink:  #2a1410;
  --line-gold:  rgba(237,195,110,0.22);
  --line-white: rgba(255,247,232,0.10);

  --serif:  "Cormorant Garamond", "Marcellus", Georgia, serif;
  --display:"Marcellus", "Cormorant Garamond", Georgia, serif;
  --script: "Great Vibes", "Parisienne", cursive;
  --sans:   "Inter Tight", system-ui, -apple-system, sans-serif;

  --ease-film:   cubic-bezier(0.19,1,0.22,1);
  --ease-smooth: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--night); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse at 50% -4%, rgba(237,195,110,0.10), transparent 38%),
    linear-gradient(180deg, #020405 0%, #04070a 60%, #08060c 100%);
}
button, a { font: inherit; color: inherit; text-decoration: none; border: 0; cursor: pointer; background: none; }
img { display: block; max-width: 100%; }
button { -webkit-tap-highlight-color: transparent; }

/* ── Fallback ────────────────────────────────────────────────── */
.fallback-error {
  min-height: 100vh; display: grid; place-items: center;
  padding: 40px; font: 700 1rem var(--sans); color: var(--ink);
  background: var(--night); text-align: center;
}

/* ============================================================
   GLOBAL ATMOSPHERE
   ============================================================ */
.film-site {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.film-site::before {
  content: "";
  position: fixed; inset: 0; z-index: -10;
  background:
    radial-gradient(circle at 18% 18%, rgba(237,195,110,0.06), transparent 30%),
    radial-gradient(circle at 84% 64%, rgba(138,38,64,0.06), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(13,36,24,0.34), transparent 50%),
    var(--night);
  pointer-events: none;
}

.eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow-line {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
}
.eyebrow-line::before, .eyebrow-line::after {
  content: ""; width: 38px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.amp { font-family: var(--script); font-style: normal; color: var(--gold); font-size: 0.7em; font-weight: 400; }

/* ── Star canvas (sky) ──────────────────────────────────────── */
.star-canvas {
  position: fixed; inset: 0;
  z-index: 1; pointer-events: none;
}

/* ── Film grain ─────────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  opacity: 0.10; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(#n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grainShift 0.18s steps(1) infinite;
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  20%  { background-position: 18px -8px; }
  40%  { background-position: -10px 22px; }
  60%  { background-position: 22px 10px; }
  80%  { background-position: -16px -16px; }
  100% { background-position: 0 0; }
}

/* ── Fireflies ──────────────────────────────────────────────── */
.firefly-field {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  overflow: hidden;
}
.firefly {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,220,146,1) 0%, rgba(237,195,110,0.55) 44%, transparent 72%);
  filter: blur(0.4px);
  box-shadow: 0 0 12px 4px rgba(237,195,110,0.34);
  animation: fireflyDrift linear infinite;
}
@keyframes fireflyDrift {
  0%   { transform: translate3d(0, 14vh, 0) scale(1); opacity: 0; }
  6%   { opacity: 0.85; }
  48%  { transform: translate3d(calc(var(--dx)*0.5), -46vh, 0) scale(0.84); opacity: 0.78; }
  88%  { opacity: 0.32; }
  100% { transform: translate3d(var(--dx), -118vh, 0) scale(0.5); opacity: 0; }
}

/* ── Scroll progress meter ──────────────────────────────────── */
.scroll-meter {
  position: fixed; left: 0; top: 0;
  z-index: 95; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--wine-2) 0%, var(--gold) 40%, var(--amber) 70%, var(--moon) 100%);
  box-shadow: 0 0 22px rgba(237,195,110,0.7);
  transform-origin: 0 50%;
}

/* ── Section labels (chapter markers on right edge) ─────────── */
.chapter-labels {
  position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); top: 50%;
  z-index: 60; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100svh - 32px - env(safe-area-inset-top, 0px) - var(--safe-bottom));
  padding: 4px 8px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  pointer-events: auto;
}
.chapter-label {
  display: flex; align-items: center; gap: 12px;
  min-width: 44px; min-height: 44px; flex: 0 0 auto;
  color: var(--ink-dim);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.3s, transform 0.3s;
}
.chapter-label::before {
  content: ""; width: 18px; height: 1px;
  background: var(--ink-dim); transition: width 0.4s, background 0.3s;
}
.chapter-label.is-active { color: var(--gold); transform: translateX(-6px); }
.chapter-label.is-active::before { width: 32px; background: var(--gold); }
.chapter-label:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; color: var(--gold); }
.chapter-label span { writing-mode: horizontal-tb; }
@media (width < 1024px) {
  .chapter-labels { display: none; }
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(237,195,110,0.10), transparent 45%),
    var(--night);
  overflow: hidden;
}
.preloader-inner {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.preloader-moon {
  width: 86px; height: 86px;
  position: relative;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(220,225,240,0.4)) drop-shadow(0 0 60px rgba(180,190,210,0.18));
  animation: preloaderPulse 1.8s ease-in-out infinite;
}
.preloader-moon .moon-orb { width: 100%; height: 100%; display: block; }
.preloader-moon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: brightness(1.1) contrast(1.08) saturate(0.8); }
.preloader-moon::after { display: none; }
.preloader-name {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 400;
  line-height: 0.96;
  text-align: center;
  letter-spacing: 0.04em;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-film) 0.3s forwards;
}
.preloader-name .amp { font-size: 0.66em; }
.preloader-bar-wrap {
  width: min(280px, 70vw); height: 1px;
  background: rgba(237,195,110,0.20); border-radius: 999px; overflow: hidden;
}
.preloader-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--wine-2), var(--gold), var(--amber));
  border-radius: 999px;
  transform-origin: left;
}
.preloader-pct {
  font-size: 0.68rem; font-weight: 900;
  letter-spacing: 0.32em; color: var(--ink-muted);
}
@keyframes preloaderPulse {
  0%,100% { transform: scale(1);   box-shadow: 0 0 60px 22px rgba(237,195,110,0.28), 0 0 120px 50px rgba(237,195,110,0.10); }
  50%      { transform: scale(1.08); box-shadow: 0 0 96px 38px rgba(237,195,110,0.5), 0 0 200px 80px rgba(237,195,110,0.18); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PRELOADER v2 — Lantern Ascent to Moonlight
   ============================================================ */
.preloader.v2 {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 30px;
  padding: 80px 24px 64px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(237,195,110,0.05), transparent 70%),
    radial-gradient(ellipse 110% 70% at 50% 110%, rgba(138,38,64,0.22), transparent 55%),
    linear-gradient(180deg, #02030a 0%, #050811 45%, #030506 100%);
  overflow: hidden;
  isolation: isolate;
}

.pl-stars {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.pl-star {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
}
.pl-star img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

.pl-mist {
  position: absolute;
  left: -10%; right: -10%; bottom: -8%;
  height: 38%;
  background:
    radial-gradient(ellipse 60% 100% at 30% 100%, rgba(138,38,64,0.18), transparent 70%),
    radial-gradient(ellipse 70% 100% at 75% 100%, rgba(237,195,110,0.12), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 1;
}

.pl-diyas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.pl-diya {
  position: absolute;
  top: 0;
  display: block;
  aspect-ratio: 48 / 72;
  filter:
    drop-shadow(0 0 8px rgba(253,230,168,0.7))
    drop-shadow(0 0 22px rgba(237,195,110,0.45))
    drop-shadow(0 0 44px rgba(237,195,110,0.25));
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}
.pl-diya img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}
.pl-diya::after {
  /* faint vertical trail from below the lantern */
  content: '';
  position: absolute;
  left: 50%; bottom: -28px;
  width: 1px; height: 36px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(237,195,110,0.65), transparent 92%);
  filter: blur(0.6px);
  opacity: 0.85;
}

.pl-moon-stage {
  position: relative;
  width: 180px; height: 180px;
  display: grid; place-items: center;
  z-index: 3;
}
.pl-flash {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,232,0.85) 0%, rgba(248,220,146,0.55) 25%, rgba(237,195,110,0.25) 55%, transparent 78%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 4;
}
.pl-moon {
  position: absolute; inset: 22px;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 36px rgba(220,225,240,0.55))
    drop-shadow(0 0 90px rgba(220,225,240,0.30))
    drop-shadow(0 0 160px rgba(237,195,110,0.18));
  animation: plMoonBreathe 4.5s ease-in-out infinite 1s;
  z-index: 3;
}
.pl-moon .moon-orb,
.pl-moon img,
.pl-moon svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.pl-moon img {
  filter: brightness(1.14) contrast(1.06) saturate(0.85);
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 44%, transparent 64%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 44%, transparent 64%);
}

.pl-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  z-index: 5;
}

.pl-names {
  position: relative;
  z-index: 3;
  font-family: var(--script);
  font-size: clamp(2.6rem, 7.5vw, 4.2rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.012em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0 28px rgba(237,195,110,0.22),
    0 0 60px rgba(237,195,110,0.10);
  margin-top: 8px;
}
.pl-name-script { display: inline-block; }
.pl-name-script .amp {
  display: inline-block;
  font-family: var(--script);
  color: var(--gold);
  font-style: italic;
  font-size: 0.74em;
  margin: 0 0.04em;
  text-shadow: 0 0 22px rgba(237,195,110,0.6);
  transform: translateY(0.04em);
}

.pl-tagline {
  position: relative;
  z-index: 3;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.78rem, 1.5vw, 0.95rem);
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  max-width: 80vw;
  margin-top: -8px;
}
.pl-tagline::before,
.pl-tagline::after {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  vertical-align: middle;
  margin: 0 14px;
  opacity: 0.7;
}

.pl-dots {
  position: absolute;
  bottom: 38px; left: 0; right: 0;
  display: flex; gap: 11px;
  justify-content: center;
  z-index: 3;
}
.pl-dot {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(237,195,110,0.7);
}

@keyframes plMoonBreathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.035); }
}

@media (max-width: 540px) {
  .pl-moon-stage { width: 150px; height: 150px; }
  .pl-moon { inset: 18px; }
  .pl-tagline::before,
  .pl-tagline::after { width: 18px; margin: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader.v2 .pl-diyas,
  .preloader.v2 .pl-flash,
  .preloader.v2 .pl-mist { display: none; }
  .preloader.v2 .pl-moon { animation: none; }
  .preloader.v2 .pl-star { animation: none !important; opacity: 0.6 !important; }
}

/* ============================================================
   OPENING FILM — pull-the-light interactive intro
   --pull is the live drag progress 0..1
   ============================================================ */
.opening-film {
  position: fixed; inset: 0; z-index: 500;
  overflow: hidden;
  background: #02030a;
  perspective: 1600px;
  --pull: 0;
  --pull-eased: var(--pull);
  cursor: default;
  touch-action: none;
}
.opening-film .op-bg {
  position: absolute; inset: -8% -6%;
  z-index: 0;
  opacity: calc(0.08 + var(--pull) * 0.62);
  transform: scale(calc(1.08 - var(--pull) * 0.06));
  transition: opacity 90ms ease;
}
.opening-film .op-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(calc(0.3 + var(--pull) * 0.5)) saturate(1.18) contrast(1.05);
}
.opening-film .op-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 22%, transparent 4%, rgba(2,3,10,0.65) 60%, #02030a 100%);
}
.opening-film .op-blackout {
  position: absolute; inset: 0; z-index: 2;
  background: #02030a;
  opacity: calc(0.78 - var(--pull) * 0.74);
  transition: opacity 90ms ease;
}

/* Side curtains that part as the user pulls */
.opening-film .op-curtain {
  position: absolute; top: 0; bottom: 0;
  width: 52%;
  z-index: 4;
  background:
    repeating-linear-gradient(90deg, rgba(237,195,110,0.045) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #1a0a10, #050306 52%, #1f0a14);
  box-shadow: inset 0 0 200px rgba(0,0,0,0.92);
  transition: transform 80ms ease;
}
.opening-film .op-curtain.left  {
  left: 0;
  transform: translateX(calc(var(--pull) * -82%));
  border-right: 1px solid rgba(237,195,110,0.18);
}
.opening-film .op-curtain.right {
  right: 0;
  transform: translateX(calc(var(--pull) * 82%));
  border-left: 1px solid rgba(237,195,110,0.18);
}
.opening-film .op-curtain-fold {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 9%,
    rgba(0,0,0,0.55) 9.5%, rgba(0,0,0,0) 10%
  );
  pointer-events: none;
}

/* Light bloom from the lantern */
.opening-film .op-bloom {
  position: absolute; left: 50%; top: 0; z-index: 3;
  width: 90vmax; height: 90vmax;
  margin-left: -45vmax; margin-top: -34vmax;
  background: radial-gradient(circle,
    rgba(255,232,164,0.85) 0%,
    rgba(255,210,130,0.42) 16%,
    rgba(237,195,110,0.18) 30%,
    transparent 52%);
  opacity: calc(var(--pull) * 0.95);
  transform: translateY(calc(var(--pull) * 12vh)) scale(calc(0.4 + var(--pull) * 1.3));
  mix-blend-mode: screen;
  pointer-events: none;
  transition: transform 90ms ease, opacity 90ms ease;
  filter: blur(8px);
}
.opening-film .op-rays {
  position: absolute; left: 50%; top: 0; z-index: 3;
  width: 140vmax; height: 140vmax;
  margin-left: -70vmax; margin-top: -54vmax;
  background:
    conic-gradient(from -90deg at 50% 50%,
      rgba(255,232,164,0) 0deg,
      rgba(255,232,164,0.28) 6deg,
      rgba(255,232,164,0) 12deg,
      rgba(255,232,164,0) 24deg,
      rgba(255,232,164,0.18) 30deg,
      rgba(255,232,164,0) 36deg,
      rgba(255,232,164,0) 60deg,
      rgba(255,232,164,0.22) 66deg,
      rgba(255,232,164,0) 72deg,
      rgba(255,232,164,0) 100deg,
      rgba(255,232,164,0.20) 106deg,
      rgba(255,232,164,0) 112deg,
      rgba(255,232,164,0) 360deg);
  opacity: calc(var(--pull) * 0.55);
  transform: translateY(calc(var(--pull) * 8vh)) rotate(calc(var(--pull) * 60deg));
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(2px);
  transition: opacity 90ms ease;
}

/* Lantern + cord + tassel handle */
.opening-film .op-rig {
  position: absolute; left: 50%; top: 0; z-index: 6;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  user-select: none;
}
.opening-film .op-lantern {
  position: relative;
  width: 96px; height: 160px;
  display: block;
  margin-top: clamp(20px, 6vh, 60px);
  filter:
    drop-shadow(0 10px 32px rgba(0,0,0,0.75))
    drop-shadow(0 0 calc(24px + var(--pull) * 90px) rgba(255,210,130, calc(0.4 + var(--pull) * 0.6)));
  transition: filter 100ms ease;
}
.opening-film .op-lantern-img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* brightens the lit window of the lantern as the user pulls */
  filter:
    brightness(calc(0.78 + var(--pull) * 0.55))
    saturate(calc(1 + var(--pull) * 0.35))
    contrast(calc(1 + var(--pull) * 0.08));
  transition: filter 100ms ease;
}
.opening-film .op-lantern-glow {
  position: absolute; left: 50%; top: 46%;
  width: 70%; height: 38%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,247,232, calc(0.35 + var(--pull) * 0.5)) 0%,
    rgba(255,210,130, calc(0.18 + var(--pull) * 0.32)) 36%,
    transparent 72%);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity: calc(0.6 + var(--pull) * 0.4);
  pointer-events: none;
  animation: op-flicker 1.8s ease-in-out infinite;
}
@keyframes op-flicker {
  0%,100% { transform: translate(-50%, -50%) scale(1); opacity: calc(0.55 + var(--pull) * 0.45); }
  50%     { transform: translate(-50%, -52%) scale(1.05); opacity: calc(0.7 + var(--pull) * 0.3); }
}

/* Cord between lantern and tassel — visibly stretches with pull */
.opening-film .op-cord-wrap {
  width: 2px;
  height: calc(70px + var(--pull) * 240px);
  margin-top: 2px;
  display: block;
  transition: height 80ms ease;
}
.opening-film .op-cord-line {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg,
    rgba(237,195,110,0.7) 0%,
    rgba(237,195,110,0.95) 100%);
  box-shadow: 0 0 calc(4px + var(--pull) * 16px) rgba(255,210,130,calc(0.3 + var(--pull) * 0.6));
}

/* Draggable tassel */
.opening-film .op-handle {
  pointer-events: auto;
  position: relative;
  width: 60px; height: 60px;
  margin-top: 4px;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  display: grid; place-items: center;
}
.opening-film .op-handle:active { cursor: grabbing; }
.opening-film .op-tassel-knob {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff8d6 0 18%, #f1c976 22% 56%, #7c3a18 70%);
  box-shadow:
    0 0 calc(16px + var(--pull) * 40px) rgba(255,210,130, calc(0.5 + var(--pull) * 0.5)),
    0 4px 10px rgba(0,0,0,0.5);
  transition: box-shadow 90ms ease;
}
.opening-film .op-tassel-fringe {
  position: absolute; left: 50%; top: 32px;
  width: 26px; height: 22px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(90deg,
      rgba(237,195,110,0.85) 0 2px,
      rgba(237,195,110,0.2) 2px 3px,
      rgba(237,195,110,0.85) 3px 5px,
      rgba(237,195,110,0.2) 5px 6px);
  mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
  border-radius: 4px 4px 50% 50% / 4px 4px 80% 80%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

/* Title plate — gradually emerges as user pulls */
.opening-film .op-titles {
  position: absolute; left: 50%; top: 56%;
  z-index: 7;
  transform: translate(-50%, -50%);
  width: min(820px, 90vw);
  text-align: center;
  pointer-events: none;
  opacity: clamp(0, calc((var(--pull) - 0.05) * 1.6), 1);
  filter: blur(calc((1 - var(--pull)) * 6px));
  transition: opacity 80ms ease, filter 80ms ease;
}
.opening-film .op-titles .op-eye {
  font-size: 0.7rem; font-weight: 900;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
  opacity: calc(var(--pull) * 1.4 - 0.2);
}
.opening-film .op-titles h1 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.94;
  font-size: clamp(3.4rem, 10vw, 7.2rem);
  letter-spacing: 0.005em;
  margin: 0;
  text-shadow:
    0 28px 80px rgba(0,0,0,0.7),
    0 0 calc(20px + var(--pull) * 60px) rgba(255,210,130,calc(var(--pull) * 0.25));
  color: #fff8e8;
}
.opening-film .op-titles h1 .amp {
  display: inline-block;
  margin: 0 0.16em;
  color: var(--gold);
  font-family: var(--script);
  font-style: italic;
}
.opening-film .op-titles .op-tag {
  font-family: var(--script);
  color: var(--gold);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  margin: 12px 0 0;
  opacity: clamp(0, calc((var(--pull) - 0.35) * 2), 1);
}
.opening-film .op-titles .op-meta {
  margin: 14px 0 0;
  color: var(--ink-muted);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  opacity: clamp(0, calc((var(--pull) - 0.45) * 2), 1);
}

/* Instruction at bottom — switches text by phase */
.opening-film .op-instr {
  position: absolute; left: 50%; bottom: clamp(28px, 8vh, 80px);
  z-index: 7;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 22px;
  border: 1px solid rgba(237,195,110,0.32);
  border-radius: 999px;
  background: rgba(3,5,6,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.28em; text-transform: uppercase;
  pointer-events: none;
  opacity: calc(1 - var(--pull) * 0.4);
}
.opening-film .op-instr::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: op-pulse 1.6s ease-in-out infinite;
}
@keyframes op-pulse {
  0%,100% { opacity: 0.5; transform: scale(0.85); }
  50%     { opacity: 1;   transform: scale(1.15); }
}

.opening-film .op-skip {
  position: absolute; right: 20px; bottom: calc(20px + var(--safe-bottom)); z-index: 8;
  min-height: 34px; padding: 0 16px;
  border: 1px solid rgba(237,195,110,0.28);
  border-radius: 999px;
  color: var(--ink-muted);
  background: rgba(3,5,6,0.6);
  backdrop-filter: blur(16px);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.opening-film .op-skip:hover { color: var(--gold); border-color: var(--gold); }
.opening-film.is-open .op-skip {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}

/* On open: white flash + curtains slam aside */
.opening-film.is-open .op-curtain.left  { transform: translateX(-100%); transition: transform 800ms cubic-bezier(0.19,1,0.22,1); }
.opening-film.is-open .op-curtain.right { transform: translateX( 100%); transition: transform 800ms cubic-bezier(0.19,1,0.22,1); }
.opening-film.is-open .op-bloom { opacity: 1; transform: translateY(20vh) scale(2.4); transition: transform 800ms cubic-bezier(0.19,1,0.22,1), opacity 800ms ease; }
.opening-film.is-open .op-blackout { opacity: 0; transition: opacity 600ms ease; }
.opening-film.is-open .op-embers,
.opening-film.is-open .op-stars,
.opening-film.is-open .op-far-moon { opacity: 0; transition: opacity 600ms ease; }

/* ============================================================
   OPENING FILM — atmospheric layers (sync with preloader)
   --pull is live drag 0..1   --mx --my are pointer parallax -1..1
   ============================================================ */
.opening-film { --mx: 0; --my: 0; }

/* far-distant moon halo glowing behind curtains */
.opening-film .op-far-moon {
  position: absolute;
  top: 9vh; left: 50%;
  width: 340px; height: 340px;
  margin-left: -170px;
  border-radius: 50%;
  z-index: 3;
  background:
    radial-gradient(circle at 40% 36%, rgba(255,247,232,0.22) 0%, rgba(220,225,240,0.10) 32%, rgba(237,195,110,0.04) 55%, transparent 70%);
  filter: blur(22px);
  pointer-events: none;
  opacity: calc(0.65 - var(--pull) * 0.65);
  transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -6px), 0);
  transition: opacity 100ms ease, transform 240ms cubic-bezier(0.19,1,0.22,1);
  mix-blend-mode: screen;
}

/* horizon mist — same wine + gold radial gradients as the preloader bottom */
.opening-film .op-mist {
  position: absolute;
  left: -10%; right: -10%; bottom: -10%;
  height: 50%;
  z-index: 3;
  background:
    radial-gradient(ellipse 60% 100% at 28% 100%, rgba(138,38,64,0.22), transparent 65%),
    radial-gradient(ellipse 65% 100% at 76% 100%, rgba(237,195,110,0.16), transparent 65%);
  filter: blur(34px);
  pointer-events: none;
  opacity: calc(0.85 - var(--pull) * 0.35);
  transform: translate3d(calc(var(--mx) * 6px), 0, 0);
  transition: opacity 100ms ease, transform 240ms cubic-bezier(0.19,1,0.22,1);
}

/* twinkling starfield — depth-aware parallax */
.opening-film .op-stars {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: calc(1 - var(--pull) * 0.4);
  transition: opacity 100ms ease;
}
.opening-film .op-star {
  --d: 0.5;
  position: absolute;
  display: block;
  transform: translate3d(calc(var(--mx) * var(--d) * -14px), calc(var(--my) * var(--d) * -8px), 0);
  will-change: opacity, transform;
  transition: transform 380ms cubic-bezier(0.19,1,0.22,1);
}
.opening-film .op-star img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* slow ambient embers drifting upward */
.opening-film .op-embers {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  opacity: calc(0.9 - var(--pull) * 0.5);
  transition: opacity 100ms ease;
}
.opening-film .op-ember {
  position: absolute;
  top: 0;
  display: block;
  opacity: 0;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 0 6px rgba(253,230,168,0.7))
    drop-shadow(0 0 14px rgba(237,195,110,0.45));
}
.opening-film .op-ember img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* idle lantern sway — pendulum from cap */
.opening-film .op-rig {
  transform-origin: 50% 0%;
  animation: opLanternSway 7s ease-in-out infinite;
}
@keyframes opLanternSway {
  0%, 100% { transform: translateX(-50%) rotate(-1.4deg); }
  50%      { transform: translateX(-50%) rotate(1.4deg); }
}
/* dampen the swing as the user actively pulls */
.opening-film:has(.op-handle:active) .op-rig { animation-play-state: paused; }

/* subtle parallax on the lantern rig itself (very small — must not break the cord alignment) */
.opening-film .op-lantern {
  transform: translate3d(calc(var(--mx) * 4px), calc(var(--my) * 2px), 0);
  transition: transform 260ms cubic-bezier(0.19,1,0.22,1);
}

@media (max-width: 540px) {
  .opening-film .op-far-moon { width: 240px; height: 240px; margin-left: -120px; top: 12vh; }
}

@media (prefers-reduced-motion: reduce) {
  .opening-film .op-stars,
  .opening-film .op-embers { display: none; }
  .opening-film .op-rig { animation: none; }
  .opening-film .op-lantern,
  .opening-film .op-far-moon,
  .opening-film .op-mist { transform: none !important; }
}

@media (max-width: 760px) {
  .opening-film .op-titles { top: 50%; }
  .opening-film .op-titles h1 { font-size: clamp(2.6rem, 14vw, 4.4rem); }
  .opening-film .op-rig { transform: translateX(-50%) scale(0.86); }
  .opening-film .op-instr {
    bottom: calc(74px + var(--safe-bottom));
    max-width: calc(100% - 32px);
    justify-content: center;
    padding: 8px 14px;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-align: center;
    white-space: nowrap;
  }
  .opening-film.is-open .op-instr {
    bottom: calc(34px + var(--safe-bottom));
  }
  .opening-film .op-skip {
    left: 50%;
    right: auto;
    bottom: calc(24px + var(--safe-bottom));
    min-height: 32px;
    padding: 0 14px;
    transform: translateX(-50%);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  .opening-film.is-open .op-skip {
    transform: translateX(-50%) translateY(8px);
  }
}

/* ============================================================
   FILM NAV
   ============================================================ */
.film-nav {
  position: fixed; left: 50%;
  bottom: calc(20px + var(--safe-bottom)); z-index: 90;
  display: flex; align-items: center; gap: 4px;
  padding: 6px;
  border: 1px solid rgba(237,195,110,0.22);
  border-radius: 999px;
  background: rgba(3,5,6,0.78);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.56),
    inset 0 1px 0 rgba(255,247,232,0.06);
  transform: translateX(-50%);
}
.film-nav a, .film-nav button {
  min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: rgba(255,247,232,0.78);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s, background 0.2s;
}
.film-nav a:hover, .film-nav button:hover {
  color: #1c1008; background: var(--gold);
}
.film-nav :focus-visible {
  outline: 2px solid var(--gold); outline-offset: -3px;
}
/* The existing sound control stays available during the opening. Section
   links join it after entry, so an early music choice cannot bypass the gate. */
.film-nav.is-opening {
  left: auto !important; right: max(14px, env(safe-area-inset-right, 0px));
  width: auto !important; max-width: calc(100vw - 28px) !important;
  bottom: calc(14px + var(--safe-bottom)) !important;
  z-index: 501; transform: none !important;
}
/* Uploaded/legacy file music remains owned by the shared controller. Its
   control clears this template's measured nav without changing audio policy. */
[data-ea-music-control] {
  bottom: calc(20px + var(--moonlit-nav-height, 58px) + 10px + var(--safe-bottom)) !important;
}
.music-pill { min-width: 44px; padding: 0 12px; }
.music-pill .bars { display: inline-flex; gap: 3px; align-items: flex-end; }
.music-pill i {
  display: block; width: 3px; height: 10px;
  border-radius: 999px; background: currentColor;
  transition: height 0.2s;
}
.music-pill i:nth-child(2) { height: 16px; }
.music-pill i:nth-child(3) { height: 8px; }
.music-pill.is-playing i { animation: equalizer 540ms ease-in-out infinite alternate; }
.music-pill.is-playing i:nth-child(1) { animation-delay: 0ms; }
.music-pill.is-playing i:nth-child(2) { animation-delay: 150ms; }
.music-pill.is-playing i:nth-child(3) { animation-delay: 80ms; }
@keyframes equalizer {
  from { transform: scaleY(0.4); }
  to   { transform: scaleY(1.3); }
}
@media (max-width: 540px) {
  .film-nav { gap: 0; padding: 4px; }
  .film-nav a, .film-nav button { padding: 0 9px; font-size: 0.66rem; }
}

/* ============================================================
   HERO MARQUEE
   ============================================================ */
.hero-marquee {
  position: relative;
  min-height: 112vh;
  display: grid; place-items: center;
  overflow: hidden;
  padding: 100px 18px 130px;
  background: var(--night);
  perspective: 2200px;
}
.hero-bg {
  position: absolute; inset: -8vh -8vw;
  width: 116vw; height: 116vh; object-fit: cover;
  filter: brightness(0.55) saturate(1.15) contrast(1.08);
  z-index: 0;
  will-change: transform;
}
.hero-glow {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(237,195,110,0.18) 0 16%, transparent 56%),
    radial-gradient(ellipse at 50% 50%, rgba(3,5,6,0.0) 0 22%, rgba(3,5,6,0.5) 64%, var(--night) 100%),
    linear-gradient(90deg, rgba(3,5,6,0.86), rgba(3,5,6,0.20) 48%, rgba(3,5,6,0.86));
}
/* Floating arch (real photo behind it) */
.hero-arch {
  position: absolute; left: 50%; bottom: -8vh;
  width: min(540px, 64vw);
  height: min(720px, 78vh);
  border-radius: 50% 50% 24px 24px / 32% 32% 24px 24px;
  border: 1px solid rgba(237,195,110,0.34);
  overflow: hidden;
  z-index: 2;
  transform: translate(-50%,0);
  box-shadow:
    0 60px 140px rgba(0,0,0,0.6),
    0 0 60px rgba(237,195,110,0.10);
  will-change: transform;
}
.hero-arch::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(255,247,232,0.18);
  border-radius: 50% 50% 16px 16px / 32% 32% 16px 16px;
  pointer-events: none; z-index: 3;
}
.hero-arch img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.86) saturate(1.18) contrast(1.05);
}
.hero-arch .arch-fade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 38%, rgba(3,5,6,0.5) 76%, var(--night) 100%);
}

/* Floating date card (top-left of hero) */
.hero-date-card {
  position: absolute; left: clamp(22px, 4vw, 60px); top: 22vh;
  width: min(122px, 12vw); aspect-ratio: 0.74;
  z-index: 4;
  display: grid; place-items: center; align-content: center;
  gap: 4px;
  border: 1px solid rgba(237,195,110,0.5);
  border-radius: 110px 110px 18px 18px;
  color: #2a1410;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.86), transparent 30%),
    linear-gradient(180deg, #fff4c0, #e2a84c 62%, #7c2640);
  box-shadow: 0 36px 100px rgba(0,0,0,0.5), 0 0 70px rgba(237,195,110,0.16);
  pointer-events: none;
  will-change: transform;
}
.hero-date-card .day  { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 0.84; }
.hero-date-card .mon  { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.24em; text-transform: uppercase; }
.hero-date-card .year { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3em; opacity: 0.85; }
@media (max-width: 760px) {
  .hero-date-card { width: 86px; left: 16px; top: 18vh; }
}

/* Orbit rings */
.hero-orbit-ring {
  position: absolute; left: 50%; top: 60%;
  border-radius: 50%;
  transform: translate(-50%,-50%) rotateX(72deg);
  pointer-events: none;
  animation: slowSpin 38s linear infinite;
  z-index: 1;
}
.ring-one { width: min(900px, 78vw); aspect-ratio: 1; border: 1px solid rgba(237,195,110,0.14); }
.ring-two {
  width: min(620px, 56vw); aspect-ratio: 1;
  border: 1px dashed rgba(201,110,108,0.14);
  animation-duration: 52s; animation-direction: reverse;
}
@keyframes slowSpin {
  from { transform: translate(-50%,-50%) rotateX(72deg) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(72deg) rotate(360deg); }
}

.hero-title {
  position: relative; z-index: 5;
  width: min(1160px, 92vw);
  text-align: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.hero-title .title-eye { margin-bottom: 18px; }
.hero-title h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.92;
  font-size: clamp(3.6rem, 11vw, 10rem);
  letter-spacing: 0.005em;
  text-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.hero-title h1 .amp { font-size: 0.6em; }
.hero-title .meta {
  max-width: 600px;
  margin: 24px auto 0;
  color: var(--ink-muted);
  font-size: clamp(0.94rem, 1.7vw, 1.12rem);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.hero-title .tagline {
  font-family: var(--script);
  color: var(--gold);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin-top: 14px;
  letter-spacing: 0.02em;
}
.scroll-cue {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 36px;
  color: var(--gold);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
}
.scroll-cue-track {
  width: 22px; height: 36px;
  border: 1px solid rgba(237,195,110,0.5);
  border-radius: 999px; position: relative;
}
.scroll-cue-track::after {
  content: ""; position: absolute;
  left: 50%; top: 7px;
  width: 4px; height: 8px; border-radius: 999px;
  background: var(--gold);
  transform: translateX(-50%);
  animation: scrollDot 1.7s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(14px); }
}

/* ============================================================
   CHAPTER DIVIDER
   ============================================================ */
.chapter-divider {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 24px;
  padding: clamp(54px,9vw,96px) clamp(18px,5vw,60px);
  background: var(--night);
  overflow: hidden;
}
.chapter-divider::before, .chapter-divider::after {
  content: ""; flex: 1;
  max-width: 240px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237,195,110,0.32), transparent);
}
.chapter-divider-text {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.chapter-divider-text::before {
  content: ""; position: absolute; left: 50%; top: -10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px var(--gold), 0 0 30px rgba(237,195,110,0.4);
  transform: translateX(-50%);
}
.chapter-divider-num {
  font-family: var(--display);
  font-size: clamp(3.4rem, 9vw, 6.6rem);
  font-weight: 400;
  color: rgba(237,195,110,0.18);
  line-height: 0.86;
}
.chapter-divider-label {
  font-size: 0.66rem; font-weight: 900;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   STORY TUNNEL — 3D sticky scroll
   ============================================================ */
.scene-tunnel {
  position: relative;
  background: var(--night);
}
.tunnel-sticky {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: #02030a;
}
.tunnel-back {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(237,195,110,0.06), transparent 56%),
    linear-gradient(180deg, #02030a, #06080e 60%, #050309);
}
.tunnel-grain {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,247,232,0.05) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.16) 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 1px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.tunnel-letterbox {
  position: absolute; left: 0; right: 0; height: 8vh; z-index: 6;
  background: #000;
  pointer-events: none;
}
.tunnel-letterbox.top { top: 0;  box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.tunnel-letterbox.bot { bottom: 0; box-shadow: 0 -18px 40px rgba(0,0,0,0.6); }

/* Reel scenes — full-bleed, snap-cut between */
.reel-stage {
  position: absolute; inset: 0; z-index: 2;
}
.reel-scene {
  position: absolute; inset: 0;
  will-change: transform, opacity, filter;
  transform-origin: 50% 56%;
  pointer-events: none;
}
.reel-scene .reel-img {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #050309;
}
.reel-img-inner {
  position: absolute; inset: -4% -3%;          /* less outward bleed so cover-crop is gentler */
  will-change: transform;
}
.reel-img-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;                 /* favor upper-third so portrait shots show faces, not chest */
  filter: brightness(0.78) saturate(1.18) contrast(1.06);
}
.reel-img-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2,3,8,0.55) 0%, transparent 22%, transparent 58%, rgba(2,3,8,0.92) 100%),
    linear-gradient(90deg, rgba(2,3,8,0.78), transparent 42%, transparent 58%, rgba(2,3,8,0.55));
}
.reel-img-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(0,0,0,0.55) 100%);
}

.reel-copy {
  position: absolute;
  left: clamp(22px, 7vw, 96px);
  bottom: clamp(80px, 16vh, 180px);
  max-width: min(620px, 56vw);
  z-index: 5;
  color: #fff8e8;
  will-change: transform, opacity;
}
.reel-copy .reel-num {
  display: inline-block;
  font-family: var(--display);
  color: rgba(237,195,110,0.7);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(237,195,110,0.32);
}
.reel-copy .reel-kicker {
  margin: 0 0 14px;
  font-family: var(--script);
  color: var(--gold);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  font-style: italic;
}
.reel-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.92;
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  letter-spacing: 0.005em;
  text-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.reel-copy .reel-body {
  margin: 22px 0 0;
  color: rgba(255,247,232,0.84);
  font-size: clamp(0.96rem, 1.4vw, 1.1rem);
  line-height: 1.72;
  max-width: 480px;
  text-wrap: pretty;
}
.reel-copy .reel-mood {
  margin: 18px 0 0;
}
.reel-copy .reel-mood em {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(237,195,110,0.34);
  border-radius: 999px;
  background: rgba(3,5,6,0.55);
  backdrop-filter: blur(8px);
  font-style: normal;
  color: var(--gold);
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.28em; text-transform: uppercase;
}

/* Chapter dots + meta + scroll hint */
.tunnel-dots {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  top: 50%; transform: translateY(-50%);
  z-index: 8;
  display: flex; flex-direction: column; gap: 12px;
  pointer-events: none;
}
.tunnel-dots .tdot {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,247,232,0.18);
  transition: width 220ms ease, height 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.tunnel-dots .tdot.is-past {
  background: rgba(237,195,110,0.55);
}
.tunnel-dots .tdot.is-on {
  width: 8px; height: 28px;
  border-radius: 4px;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(237,195,110,0.6);
}
.tunnel-meta {
  position: absolute;
  left: clamp(22px, 7vw, 96px);
  top: clamp(80px, 12vh, 130px);
  z-index: 6;
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(237,195,110,0.24);
  border-radius: 999px;
  background: rgba(2,3,6,0.55);
  backdrop-filter: blur(12px);
}
.tunnel-meta .now {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.tunnel-meta .sep { color: rgba(255,247,232,0.4); }
.tunnel-meta em {
  font-style: normal;
  color: rgba(255,247,232,0.86);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.tunnel-scroll-hint {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(80px, 14vh, 140px);
  z-index: 8;
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink-muted);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.32em;
  text-transform: uppercase;
}
.tunnel-scroll-hint i {
  width: 36px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  position: relative;
}
.tunnel-scroll-hint i::after {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 12px; height: 5px;
  background: var(--gold);
  border-radius: 999px;
  animation: sh-glide 2.2s ease-in-out infinite;
}
@keyframes sh-glide {
  0%   { transform: translateX(0);    opacity: 0.2; }
  50%  { transform: translateX(20px); opacity: 1; }
  100% { transform: translateX(36px); opacity: 0; }
}

@media (max-width: 760px) {
  .reel-copy { left: 22px; right: 22px; bottom: 100px; max-width: none; }
  .reel-copy h2 { font-size: clamp(2rem, 9vw, 3.4rem); }
  .tunnel-dots { right: 12px; gap: 10px; }
  .tunnel-meta { top: 88px; left: 22px; padding: 6px 12px; }
  .tunnel-meta em { font-size: 0.7rem; letter-spacing: 0.2em; }
  .tunnel-scroll-hint { display: none; }
}

/* ============================================================
   COUNTDOWN — cinematic flip-clock
   ============================================================ */
.countdown-section {
  position: relative;
  overflow: hidden;
  min-height: 86vh;
  display: grid; place-items: center;
  padding: clamp(96px,14vw,160px) clamp(18px,6vw,90px);
  background: #02030a;
  perspective: 1600px;
}
.countdown-section .cd-bg {
  position: absolute; inset: -6%;
  z-index: 0;
  background: url("assets/cinema/palace-facade-night.jpg") center/cover;
  filter: brightness(0.32) saturate(1.18) contrast(1.1) blur(2px);
  opacity: 0.7;
  animation: cd-bg-drift 24s ease-in-out infinite alternate;
}
@keyframes cd-bg-drift {
  from { transform: scale(1.04) translateY(0); }
  to   { transform: scale(1.10) translateY(-1.4%); }
}
.countdown-section .cd-grade {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(237,195,110,0.22), transparent 46%),
    radial-gradient(ellipse at 50% 100%, rgba(102,29,52,0.26), transparent 50%),
    linear-gradient(180deg, rgba(2,3,10,0.62) 0%, rgba(2,3,10,0.32) 30%, rgba(2,3,10,0.78) 100%);
}
.countdown-section .cd-light {
  position: absolute; left: 50%; top: 0;
  width: 200%; height: 60%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 60% at 50% 100%, rgba(237,195,110,0.16), transparent 60%);
  mix-blend-mode: screen;
}
.countdown-section::before,
.countdown-section::after { display: none; }

.countdown-content {
  position: relative; z-index: 3;
  width: 100%; max-width: 1100px;
  text-align: center;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Ornamental divider above title */
.cd-ornament-top {
  display: inline-flex; align-items: center; gap: 16px;
  margin: 0 0 12px;
}
.cd-ornament-top span {
  display: inline-block;
  width: clamp(60px, 12vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.cd-ornament-top i {
  font-style: normal;
  color: var(--gold);
  font-size: 1.2rem;
  text-shadow: 0 0 16px var(--gold);
  animation: cd-orn-spin 6s linear infinite;
}
@keyframes cd-orn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.countdown-title {
  margin: 8px 0 44px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: 0.01em;
}

/* Grid layout */
.countdown-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 18px);
  margin: 0 auto;
  flex-wrap: nowrap;
}
.cd-sep {
  font-family: var(--display);
  color: var(--gold);
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
  text-shadow: 0 0 18px rgba(237,195,110,0.6);
  align-self: center;
  margin-bottom: 36px;
  opacity: 0.8;
  animation: cd-sep-pulse 2.8s ease-in-out infinite;
}
@keyframes cd-sep-pulse {
  0%,100% { opacity: 0.5; transform: scale(0.9); }
  50%     { opacity: 1;   transform: scale(1.1); }
}

/* The flip cell */
.cc-cell {
  position: relative;
  width: clamp(108px, 14vw, 168px);
  display: flex; flex-direction: column;
  align-items: center;
  padding: clamp(20px, 2.4vw, 34px) clamp(12px, 1.4vw, 22px) clamp(16px, 1.8vw, 26px);
  border-radius: 18px;
  border: 1px solid rgba(237,195,110,0.32);
  background:
    linear-gradient(180deg, rgba(8,12,22,0.85) 0%, rgba(4,6,12,0.95) 100%);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,247,232,0.10),
    inset 0 -16px 24px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
  cursor: default;
  will-change: transform;
}
.cc-cell .cc-glow {
  position: absolute; inset: -2px;
  border-radius: 19px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(237,195,110,0.32), transparent 56%);
  opacity: 0.6;
  mix-blend-mode: screen;
}
.cc-cell .cc-corners {
  position: absolute; inset: 8px;
  pointer-events: none;
}
.cc-cell .cc-corners i {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(237,195,110,0.6);
}
.cc-cell .cc-corners i:nth-child(1) { top: 0;    left: 0;    border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.cc-cell .cc-corners i:nth-child(2) { top: 0;    right: 0;   border-left: 0;  border-bottom: 0; border-top-right-radius: 4px; }
.cc-cell .cc-corners i:nth-child(3) { bottom: 0; right: 0;   border-left: 0;  border-top: 0;    border-bottom-right-radius: 4px; }
.cc-cell .cc-corners i:nth-child(4) { bottom: 0; left: 0;    border-right: 0; border-top: 0;    border-bottom-left-radius: 4px; }
.cc-cell .cc-seam {
  position: absolute;
  left: 16px; right: 16px;
  top: 52%; height: 0;
  border-top: 1px dashed rgba(237,195,110,0.18);
  pointer-events: none;
}

.cc-number {
  display: flex; gap: 0;
  perspective: 600px;
  transform-style: preserve-3d;
}
.cc-slot {
  display: inline-block;
  position: relative;
  width: clamp(28px, 3.4vw, 42px);
  height: clamp(56px, 6.8vw, 86px);
  transform-style: preserve-3d;
  text-align: center;
}
.cc-digit {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.8rem, 5.8vw, 4.8rem);
  line-height: 1;
  color: var(--gold);
  text-shadow:
    0 0 24px rgba(237,195,110,0.55),
    0 2px 0 rgba(0,0,0,0.6);
  backface-visibility: hidden;
  transform-origin: center;
  will-change: transform, opacity;
}

.cc-label {
  display: block;
  margin-top: 12px;
  font-size: 0.7rem; font-weight: 900;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* Filmstrip line under countdown grid */
.cd-filmstrip {
  display: flex; gap: 6px; justify-content: center;
  margin: 34px 0 24px;
  opacity: 0.5;
}
.cd-filmstrip span {
  display: inline-block;
  width: 18px; height: 6px;
  border-radius: 1px;
  background: rgba(237,195,110,0.22);
  border: 1px solid rgba(237,195,110,0.18);
}
.cd-filmstrip span:nth-child(odd) { background: rgba(237,195,110,0.34); }

.countdown-date {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 0.96rem; line-height: 1.6;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 12px;
  justify-content: center; flex-wrap: wrap;
}
.countdown-date strong {
  color: var(--gold);
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.cd-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}

/* Drop old countdown rules — they're replaced */
.countdown-cell, .countdown-num, .countdown-label, .countdown-decor { display: none; }

@media (max-width: 760px) {
  .countdown-section { padding: 80px 14px; min-height: 76vh; }
  .countdown-grid { gap: 6px; flex-wrap: nowrap; }
  .cd-sep { display: none; }
  .cc-cell { width: clamp(64px, 22vw, 96px); padding: 16px 8px 12px; border-radius: 14px; }
  .cc-slot { width: clamp(18px, 7vw, 26px); height: clamp(36px, 13vw, 58px); }
  .cc-digit { font-size: clamp(1.7rem, 9vw, 2.6rem); }
  .cc-label { font-size: 0.7rem; letter-spacing: 0.22em; margin-top: 6px; }
  .cc-cell .cc-corners { inset: 5px; }
  .cc-cell .cc-corners i { width: 8px; height: 8px; }
  .countdown-title { font-size: clamp(1.8rem, 7vw, 2.6rem); margin-bottom: 30px; }
  .cd-ornament-top span { width: 36px; }
  .cd-filmstrip { display: none; }
  .countdown-date { font-size: 0.82rem; }
}

/* ============================================================
   INVITATION RITUAL
   ============================================================ */
.invite-ritual {
  position: relative;
  min-height: 110vh;
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(300px, 1fr);
  gap: clamp(28px,6vw,90px);
  align-items: center;
  overflow: hidden;
  padding: clamp(96px,12vw,150px) clamp(18px,6vw,88px);
  background:
    radial-gradient(ellipse at 24% 40%, rgba(237,195,110,0.10), transparent 42%),
    radial-gradient(ellipse at 80% 80%, rgba(13,36,24,0.4), transparent 50%),
    var(--night);
}
.invite-ritual.is-lit {
  background:
    radial-gradient(ellipse at 24% 40%, rgba(237,195,110,0.30), transparent 48%),
    radial-gradient(ellipse at 80% 80%, rgba(13,36,24,0.4), transparent 50%),
    var(--night);
}
.invite-ritual::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("assets/cinema/noor-candle-detail.jpg") center/cover;
  filter: brightness(0.32) saturate(1.06) contrast(1.08);
  opacity: 0.46;
  transition: opacity 0.8s;
}
.invite-ritual.is-lit::before { opacity: 0.62; }
.invite-ritual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(3,5,6,0.86), rgba(3,5,6,0.4) 46%, rgba(3,5,6,0.92));
}
.lamp-orbit, .invite-scroll { position: relative; z-index: 2; }

.lamp-orbit {
  min-height: 480px;
  display: grid; place-items: center;
}
.lamp-orbit::before, .lamp-orbit::after {
  content: ""; position: absolute;
  border-radius: 50%;
  animation: slowSpinFlat 32s linear infinite;
}
.lamp-orbit::before {
  width: min(420px,80vw); aspect-ratio: 1;
  border: 1px solid rgba(237,195,110,0.20);
}
.lamp-orbit::after {
  width: min(290px,62vw); aspect-ratio: 1;
  border: 1px dashed rgba(201,110,108,0.16);
  animation-duration: 44s; animation-direction: reverse;
}
@keyframes slowSpinFlat {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.lamp-button {
  position: relative; z-index: 3;
  display: grid; gap: 22px; place-items: center;
  color: var(--gold);
  font-weight: 900; letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  cursor: pointer; touch-action: none;
}
.lamp-button::before {
  content: ""; position: absolute;
  left: 50%; bottom: calc(100% - 14px);
  width: 2px; height: 120px;
  background: linear-gradient(180deg, transparent, rgba(237,195,110,0.74));
  transform: translateX(-50%);
}
/* Real HD lantern image as the lamp button */
.lamp-button .lamp-orb-img {
  width: 160px; height: 270px;
  display: block;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter:
    drop-shadow(0 14px 36px rgba(0,0,0,0.55))
    drop-shadow(0 0 60px rgba(237,195,110,0.42))
    drop-shadow(0 0 130px rgba(237,195,110,0.18));
  animation: lampSway 5.5s ease-in-out infinite;
  transform-origin: 50% 0%;
  transition: filter 0.6s ease;
}
.lamp-button .lamp-glow {
  position: absolute;
  left: 50%; top: 40%;
  width: 280px; height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,232,164,0.42) 0%, rgba(237,195,110,0.18) 30%, transparent 65%);
  filter: blur(12px);
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  animation: lampGlowPulse 2.6s ease-in-out infinite;
}
.is-lit .lamp-button .lamp-orb-img {
  filter:
    drop-shadow(0 14px 36px rgba(0,0,0,0.6))
    drop-shadow(0 0 100px rgba(237,195,110,0.85))
    drop-shadow(0 0 220px rgba(237,195,110,0.45))
    drop-shadow(0 0 360px rgba(237,195,110,0.22))
    brightness(1.08) saturate(1.18);
  animation: lampSwayLit 4.5s ease-in-out infinite;
}
.is-lit .lamp-button .lamp-glow {
  background: radial-gradient(circle, rgba(255,247,232,0.7) 0%, rgba(255,210,130,0.42) 24%, rgba(237,195,110,0.16) 52%, transparent 72%);
  animation: lampGlowPulseLit 2.4s ease-in-out infinite;
}
@keyframes lampSway {
  0%,100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}
@keyframes lampSwayLit {
  0%,100% { transform: rotate(-2deg) scale(1.02); }
  50%      { transform: rotate(2deg) scale(1.05); }
}
@keyframes lampGlowPulse {
  0%,100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 0.8;  transform: scale(1.08); }
}
@keyframes lampGlowPulseLit {
  0%,100% { opacity: 0.85; transform: scale(1.05); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

.invite-scroll {
  width: min(640px,92vw);
  justify-self: center;
  min-height: 700px;
  display: grid; place-items: center; align-content: center;
  padding: clamp(40px,6vw,76px);
  color: var(--paper-ink);
  text-align: center;
  border: 1px solid rgba(125,78,25,0.32);
  border-radius: 350px 350px 48px 48px;
  background:
    repeating-linear-gradient(0deg, rgba(125,78,25,0.025) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(90deg, rgba(125,78,25,0.025) 0 2px, transparent 2px 60px),
    radial-gradient(circle at 50% 0%, #fff9df, transparent 32%),
    linear-gradient(180deg, #fff5cc, #ebbf73);
  box-shadow: 0 60px 160px rgba(0,0,0,0.55);
  transform-style: preserve-3d;
  position: relative;
}
.invite-scroll::before {
  content: ""; position: absolute; inset: 22px;
  border: 1px solid rgba(102,29,52,0.18);
  border-radius: 328px 328px 36px 36px;
  pointer-events: none;
}
.invite-scroll::after {
  content: ""; position: absolute; left: 50%; top: 36px;
  width: 26px; height: 26px;
  border: 1px solid rgba(102,29,52,0.22);
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(125,78,25,0.18), transparent 70%);
}
.invite-scroll .eyebrow { color: var(--wine); }
.invite-scroll h2 {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.92;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  letter-spacing: 0.005em;
}
.invite-scroll h2 .amp { color: var(--wine); font-size: 0.7em; }
.invite-scroll p {
  max-width: 460px;
  margin: 16px auto;
  color: rgba(41,21,13,0.72);
  font-size: 0.96rem; line-height: 1.74;
}
.invite-scroll .scroll-detail {
  font-family: var(--script);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  color: var(--wine);
  margin-top: 4px;
}

.date-seal {
  width: 138px; aspect-ratio: 1;
  display: grid; place-items: center;
  margin: 22px auto 18px;
  border: 1px solid rgba(102,29,52,0.18);
  border-radius: 50%;
  background: radial-gradient(circle, #fff9df, #e7b65a);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,0.32), 0 16px 36px rgba(125,78,25,0.22);
}
.date-seal strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 0.84;
  color: #2a1410;
}
.date-seal span {
  color: rgba(41,21,13,0.7);
  font-size: 0.66rem; font-weight: 900;
  letter-spacing: 0.22em; text-transform: uppercase;
}

@media (max-width: 880px) {
  .invite-ritual { grid-template-columns: 1fr; gap: 60px; padding: 80px 18px; }
  .lamp-orbit { min-height: 360px; }
  .invite-scroll { min-height: 580px; }
}

/* ============================================================
   EVENTS FILM — swipeable cards
   ============================================================ */
.events-film {
  position: relative;
  overflow: hidden;
  padding: clamp(82px,11vw,140px) clamp(18px,6vw,90px);
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% 36%, rgba(237,195,110,0.10), transparent 32%),
    radial-gradient(circle at 24% 86%, rgba(138,38,64,0.16), transparent 38%),
    linear-gradient(160deg, #030506 0%, #0a1816 58%, #160b14 100%);
}
.section-intro {
  position: relative; z-index: 2;
  max-width: 880px; margin: 0 auto 56px;
  text-align: center;
}
.section-intro h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: 0.96;
  margin-top: 14px;
  letter-spacing: 0.01em;
}
.section-intro > p:not(.eyebrow) {
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: 1rem; line-height: 1.74;
  max-width: 560px; margin-left: auto; margin-right: auto;
}

.events-stage {
  position: relative; z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid; gap: 26px;
}
.event-tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}
.event-pill {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 50px; padding: 0 22px;
  border: 1px solid rgba(237,195,110,0.26);
  border-radius: 999px;
  color: var(--ink-muted);
  background: rgba(8,10,16,0.4);
  backdrop-filter: blur(12px);
  font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.06em;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.event-pill .date {
  font-family: var(--display);
  color: var(--gold);
  font-size: 0.96rem;
  font-weight: 500;
}
.event-pill .nm { font-weight: 700; }
.event-pill.is-active {
  color: #1d1108;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
  box-shadow: 0 14px 40px rgba(237,195,110,0.34), 0 0 36px rgba(237,195,110,0.22);
}
.event-pill.is-active .date { color: var(--wine); }

.event-feature-shell {
  position: relative;
  perspective: 1500px;
  transform-style: preserve-3d;
  min-height: clamp(440px, 64vh, 680px);
}
.event-halo {
  position: absolute; left: 50%; bottom: -40px;
  transform: translateX(-50%);
  width: 80%; height: 60px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(237,195,110,0.32), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
.event-feature {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: clamp(440px, 64vh, 680px);
  border: 1px solid rgba(237,195,110,0.26);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 56px 140px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,247,232,0.06);
  background: rgba(8,10,16,0.6);
  transform-style: preserve-3d;
}
.event-feature .img-side {
  position: relative;
  overflow: hidden;
  background: var(--night);
}
.event-feature .img-side img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.8) saturate(1.2) contrast(1.06);
}
.event-feature .img-side .img-fade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 50%, rgba(8,10,16,0.86) 100%);
}
.event-feature .img-side .img-tag {
  position: absolute; left: 26px; top: 24px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 2;
}
.event-feature .img-side .img-tag .tag-icon {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(237,195,110,0.6);
}
.event-feature .img-side .img-tag .tag-num {
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--ink-dim);
}
.event-feature .copy-side {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px,5vw,52px);
  gap: 14px;
  position: relative;
  background: linear-gradient(135deg, rgba(8,10,16,0.4), rgba(13,36,24,0.32));
}
.event-feature .copy-side .when {
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--gold);
  letter-spacing: 0.04em;
}
.event-feature .copy-side h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
}
.event-feature .copy-side .desc {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 1rem; line-height: 1.72;
}
.event-feature .copy-side .where {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.event-feature .copy-side .where::before {
  content: "✦"; color: var(--gold); font-size: 1rem;
}
.event-feature .copy-side .where-map {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(237,195,110,0.45);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.22em;
  text-decoration: none;
  text-transform: uppercase;
  background: rgba(237,195,110,0.05);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.event-feature .copy-side .where-map:hover,
.event-feature .copy-side .where-map:focus-visible {
  background: rgba(237,195,110,0.18);
  border-color: rgba(237,195,110,0.75);
  color: #fff8e8;
  outline: none;
}
.event-feature .copy-side .where-map svg { flex-shrink: 0; }
.event-light-sweep {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 0%, transparent 40%, rgba(237,195,110,0.12) 50%, transparent 60%);
  z-index: 3;
  pointer-events: none;
  animation: sweep 6s ease-in-out infinite;
}
@keyframes sweep {
  0%,100% { transform: translateX(-30%); opacity: 0; }
  50%      { transform: translateX(30%); opacity: 1; }
}

@media (max-width: 880px) {
  .event-feature { grid-template-columns: 1fr; }
  .event-feature .img-side { min-height: 280px; }
  .event-feature .img-side .img-fade {
    background: linear-gradient(180deg, transparent 50%, rgba(8,10,16,0.86) 100%);
  }
}

.event-counter {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px;
  color: var(--ink-dim);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
}
.event-counter .arrows { display: flex; gap: 10px; }
.event-counter .arrows button {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(237,195,110,0.32);
  color: var(--gold);
  background: rgba(8,10,16,0.4);
  font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.event-counter .arrows button:hover {
  background: var(--gold); color: #1d1108;
}

/* ============================================================
   COUPLE FILM — magazine portrait spread with parallax stack
   ============================================================ */
.couple-film {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(40px,7vw,100px);
  align-items: center;
  overflow: hidden;
  padding: clamp(120px,16vw,180px) clamp(18px,7vw,110px);
  background:
    radial-gradient(ellipse at 12% 60%, rgba(138,38,64,0.22), transparent 44%),
    radial-gradient(ellipse at 88% 30%, rgba(237,195,110,0.12), transparent 42%),
    linear-gradient(180deg, #050309, #0a0712 50%, #050309);
}
.couple-decor { position: absolute; pointer-events: none; }
.couple-decor.decor-glow {
  inset: 0;
  background:
    radial-gradient(circle at 18% 78%, rgba(237,195,110,0.10), transparent 40%),
    radial-gradient(circle at 78% 14%, rgba(255,210,130,0.08), transparent 40%);
}
.couple-decor.decor-grid {
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(237,195,110,0.04) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(237,195,110,0.025) 1px, transparent 1px);
  background-size: 11vw 100%, 100% 11vh;
  mask-image: radial-gradient(ellipse at 50% 50%, black 18%, transparent 72%);
  opacity: 0.55;
}

/* Drifting filmstrip text behind everything */
.couple-strip {
  position: absolute;
  left: -12%; right: -12%;
  top: 14%;
  display: flex; flex-wrap: nowrap;
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(237,195,110,0.025);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 50%;
}
.couple-strip span { padding-right: 0.6em; }

/* Photo cluster */
.couple-cluster {
  position: relative;
  height: min(86vh, 780px);
  min-height: 540px;
}
.couple-cluster .cc-card {
  position: absolute;
  margin: 0;
  border: 1px solid rgba(237,195,110,0.32);
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a14;
  box-shadow:
    0 56px 140px rgba(0,0,0,0.7),
    0 0 60px rgba(237,195,110,0.08),
    inset 0 0 0 1px rgba(255,247,232,0.04);
  will-change: transform;
}
.couple-cluster .cc-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.88) saturate(1.18) contrast(1.06);
}

/* Main editorial portrait — large, slightly off-axis */
.couple-cluster .cc-main {
  left: 8%; top: 6%;
  width: 64%; height: 88%;
  border-radius: 50% 50% 16px 16px / 28% 28% 16px 16px;
  z-index: 3;
  box-shadow:
    0 80px 180px rgba(0,0,0,0.78),
    0 0 100px rgba(237,195,110,0.18),
    inset 0 0 0 1px rgba(255,247,232,0.08);
}
.couple-cluster .cc-main .cc-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(3,5,6,0.7) 100%);
  pointer-events: none;
}
.couple-cluster .cc-main .cc-frame-corners {
  position: absolute; inset: 18px;
  border: 1px solid rgba(255,247,232,0.18);
  border-radius: 50% 50% 8px 8px / 28% 28% 8px 8px;
  pointer-events: none;
}
.couple-cluster .cc-main .cc-caption {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  display: grid; gap: 4px;
  padding: 14px 18px;
  border: 1px solid rgba(237,195,110,0.36);
  border-radius: 8px;
  background: rgba(3,5,6,0.82);
  backdrop-filter: blur(14px);
  z-index: 4;
}
.couple-cluster .cc-main .cc-cap-k {
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.32em;
  color: var(--gold); text-transform: uppercase;
}
.couple-cluster .cc-main .cc-cap-t {
  font-family: var(--display);
  font-size: 1.35rem;
  color: #fff8e8;
  line-height: 1.05;
}
.couple-cluster .cc-main .cc-cap-d {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
  color: var(--ink-muted); text-transform: uppercase;
}

/* Pinned polaroid-style cards floating around the main portrait */
.couple-cluster .cc-pin {
  border-radius: 4px;
  padding: 10px 10px 36px;
  background: #f6efe1;
  border-color: rgba(255,247,232,0.18);
  box-shadow:
    0 36px 90px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.2);
}
.couple-cluster .cc-pin img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 2px;
  filter: brightness(0.82) saturate(1.2) contrast(1.04) sepia(0.04);
}
.couple-cluster .cc-pin figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-family: var(--script);
  color: #2b1a14;
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.couple-cluster .cc-pin::before {
  content: ""; position: absolute;
  left: 50%; top: -8px;
  width: 36px; height: 12px;
  transform: translateX(-50%) rotate(2deg);
  background: linear-gradient(180deg, rgba(220,170,90,0.85), rgba(140,100,50,0.85));
  border-radius: 2px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  z-index: 4;
}
.couple-cluster .cc-pin-1 {
  right: 2%; top: 6%;
  width: 28%; height: 30%;
  z-index: 4;
}
.couple-cluster .cc-pin-2 {
  left: 0%; top: 54%;
  width: 26%; height: 28%;
  z-index: 4;
}
.couple-cluster .cc-pin-3 {
  right: 6%; bottom: 2%;
  width: 30%; height: 30%;
  z-index: 5;
}

/* Film-reel layered photos (main portrait) */
.couple-cluster .cc-main .cc-reel {
  position: absolute; inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}
.couple-cluster .cc-main .cc-reel-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: opacity, filter;
}
.couple-cluster .cc-main .cc-reel-vignette {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(3,5,6,0.55) 100%),
    linear-gradient(180deg, rgba(3,5,6,0.4) 0%, transparent 28%, transparent 70%, rgba(3,5,6,0.5) 100%);
  border-radius: inherit;
}

/* Cinematic spotlight that follows the scroll */
.couple-spotlight {
  position: absolute;
  left: 50%; height: 30vh;
  width: 60vw;
  margin-left: -30vw;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 50%,
    rgba(255,232,164,0.22) 0%,
    rgba(237,195,110,0.10) 30%,
    transparent 65%);
  filter: blur(40px);
  mix-blend-mode: screen;
  z-index: 1;
}

/* Cluster should clip anything that overshoots, so polaroids don't bleed into text column */
.couple-cluster { overflow: visible; }
.couple-film    { contain: paint; }

/* Editorial copy column */
.couple-copy { position: relative; }
.couple-copy .cc-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 22px;
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.36em;
  color: var(--gold); text-transform: uppercase;
}
.couple-copy .cc-eyebrow i {
  display: inline-block; width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.couple-copy .cc-title {
  display: grid;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.86;
  font-size: clamp(3rem, 7.5vw, 6rem);
  letter-spacing: 0.005em;
  color: #fff8e8;
}
.couple-copy .cc-title .cc-amp {
  display: block;
  font-family: var(--script);
  font-style: italic;
  color: var(--gold);
  font-size: 0.6em;
  margin: 0.06em 0 0.06em 0.4em;
  text-shadow: 0 0 30px rgba(237,195,110,0.4);
}
.couple-copy .cc-title .cc-name-l { letter-spacing: 0.005em; }
.couple-copy .cc-title .cc-name-r { letter-spacing: 0.005em; padding-left: 0.6em; }

.couple-copy .cc-lede {
  margin: 28px 0 0;
  color: rgba(255,247,232,0.84);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.78;
  max-width: 520px;
  text-wrap: pretty;
}
.couple-copy .cc-quote {
  position: relative;
  margin: 36px 0 0;
  padding: 26px 28px 22px 38px;
  border-left: 2px solid var(--gold);
  background:
    linear-gradient(135deg, rgba(237,195,110,0.06), transparent 60%);
  border-radius: 2px 14px 14px 2px;
}
.couple-copy .cc-quote .cc-q {
  position: absolute;
  left: 8px; top: -22px;
  font-family: var(--display);
  font-size: 5rem;
  color: var(--gold);
  line-height: 1;
  opacity: 0.7;
}
.couple-copy .cc-quote p {
  margin: 0;
  font-family: var(--script);
  font-style: italic;
  color: #fff8e8;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.45;
  text-wrap: pretty;
}
.couple-copy .cc-quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.3em;
  color: var(--ink-muted); text-transform: uppercase;
}

.couple-copy .cc-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 36px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(237,195,110,0.18);
}
.couple-copy .cc-meta > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 14px;
  border-left: 1px solid rgba(237,195,110,0.14);
}
.couple-copy .cc-meta > div:first-child { border-left: none; padding-left: 0; }
.couple-copy .cc-meta > div span {
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.3em;
  color: rgba(237,195,110,0.7); text-transform: uppercase;
}
.couple-copy .cc-meta > div strong {
  font-family: var(--display);
  font-weight: 400;
  color: #fff8e8;
  font-size: clamp(0.94rem, 1.4vw, 1.14rem);
  line-height: 1.2;
}
.couple-copy .cc-meta > div em {
  font-style: normal;
  font-size: 0.7rem; font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.16em; text-transform: uppercase;
}

.couple-copy .cc-sig {
  display: flex; align-items: center; gap: 14px;
  margin: 32px 0 0;
}
.couple-copy .cc-sig .sig-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237,195,110,0.4), transparent);
}
.couple-copy .cc-sig em {
  font-family: var(--script);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

@media (max-width: 880px) {
  .couple-film { grid-template-columns: 1fr; gap: 40px; padding: 90px 18px; }
  .couple-cluster { height: 80vh; min-height: 480px; }
  .couple-cluster .cc-main { left: 4%; width: 78%; height: 80%; }
  .couple-cluster .cc-pin-1 { right: -4%; width: 38%; height: 26%; }
  .couple-cluster .cc-pin-2 { left: -4%; top: 56%; width: 32%; height: 24%; }
  .couple-cluster .cc-pin-3 { right: 0; bottom: 4%; width: 38%; height: 26%; }
  .couple-copy .cc-title { font-size: clamp(2.4rem, 12vw, 4rem); }
  .couple-copy .cc-meta { grid-template-columns: 1fr; gap: 14px; }
  .couple-copy .cc-meta > div { border-left: none; padding-left: 0; padding-bottom: 14px; border-bottom: 1px solid rgba(237,195,110,0.14); }
  .couple-copy .cc-meta > div:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ============================================================
   GALLERY — 3D circular filmstrip
   ============================================================ */
.gallery-film {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: clamp(96px,12vw,150px) 0 clamp(120px,16vw,180px);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(237,195,110,0.12), transparent 50%),
    radial-gradient(circle at 14% 40%, rgba(56,18,90,0.18), transparent 38%),
    var(--night);
}
.gallery-film .section-intro { padding: 0 clamp(18px,5vw,60px); }
.gallery-stage {
  position: relative;
  height: clamp(440px, 60vh, 620px);
  margin-top: 40px;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.gallery-track {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  display: grid; place-items: center;
  pointer-events: none;
}
.gallery-stage .gallery-card {
  position: absolute; left: 50%; top: 50%;
  width: clamp(260px, 36vw, 440px);
  height: clamp(360px, 48vw, 580px);
  margin-left: calc(clamp(260px, 36vw, 440px) / -2);
  margin-top:  calc(clamp(360px, 48vw, 580px) / -2);
  border-radius: 50% 50% 24px 24px / 32% 32% 24px 24px;
  overflow: hidden;
  border: 1px solid rgba(237,195,110,0.28);
  box-shadow: 0 56px 140px rgba(0,0,0,0.66);
  background: var(--night-2);
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center;
  transition: filter 0.4s, opacity 0.4s;
  will-change: transform, filter, opacity;
}
.gallery-card::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(255,247,232,0.18);
  border-radius: 50% 50% 14px 14px / 32% 32% 14px 14px;
  pointer-events: none; z-index: 2;
}
.gallery-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.88) saturate(1.18);
}
.gallery-card.no-img {
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(237,195,110,0.32), transparent 56%),
    linear-gradient(180deg, #0a0a16, #181030);
}
.gallery-card .frame-num {
  position: absolute; left: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 4;
  color: var(--ink); font-family: var(--display);
}
.gallery-card .frame-num strong { font-size: 1.2rem; color: var(--gold); }
.gallery-card .frame-num span { font-size: 0.66rem; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-muted); }
.gallery-card .frame-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(3,5,6,0.6) 100%);
  z-index: 1;
}

.gallery-controls {
  position: absolute;
  left: 50%; bottom: clamp(80px,11vh,120px);
  transform: translateX(-50%);
  z-index: 6;
  display: flex; align-items: center; gap: 14px;
}
.gallery-controls button {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(237,195,110,0.34);
  color: var(--gold);
  background: rgba(3,5,6,0.7);
  backdrop-filter: blur(14px);
  font-size: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.gallery-controls button:hover { background: var(--gold); color: #1d1108; transform: scale(1.06); }
.gallery-controls .pos {
  min-width: 64px; text-align: center;
  color: var(--ink-muted);
  font-family: var(--display);
  font-size: 0.96rem;
  letter-spacing: 0.1em;
}
.gallery-controls .pos b { color: var(--gold); }

.gallery-projector {
  position: absolute; left: 50%; top: 16%;
  transform: translateX(-50%);
  width: 4px; height: 50%;
  background: linear-gradient(180deg, rgba(237,195,110,0.4), transparent);
  filter: blur(3px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ============================================================
   FINALE / RSVP
   ============================================================ */
.finale-film {
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  overflow: hidden;
  padding: clamp(110px,14vw,180px) clamp(18px,6vw,90px) clamp(140px,16vw,200px);
  background:
    radial-gradient(ellipse at 50% 110%, rgba(237,195,110,0.18), transparent 52%),
    radial-gradient(circle at 25% 20%, rgba(8,18,55,0.6), transparent 48%),
    #020812;
}
.finale-film::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("assets/cinema/palace-lake-night.jpg") center/cover;
  filter: brightness(0.4) saturate(1.18) contrast(1.08);
  opacity: 0.36;
}
.finale-film::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 24%, rgba(2,8,18,0.6) 64%, rgba(2,8,18,0.96) 100%);
}

.finale-card {
  position: relative; z-index: 2;
  width: min(720px, 92vw);
  padding: clamp(50px,7vw,86px) clamp(28px,5vw,60px);
  text-align: center;
  border: 1px solid rgba(237,195,110,0.36);
  border-radius: 320px 320px 28px 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,247,232,0.16), transparent 32%),
    linear-gradient(180deg, rgba(8,12,22,0.86), rgba(8,18,16,0.78));
  box-shadow:
    0 60px 180px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(255,247,232,0.06);
  backdrop-filter: blur(22px) saturate(140%);
}
.finale-card::before {
  content: ""; position: absolute; inset: 18px;
  border: 1px solid rgba(237,195,110,0.18);
  border-radius: 300px 300px 22px 22px; pointer-events: none;
}
.finale-moon {
  position: absolute; left: 50%; top: -52px;
  width: 100px; height: 100px;
  transform: translateX(-50%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 36px rgba(220,225,240,0.5)) drop-shadow(0 0 80px rgba(200,210,230,0.2));
}
.finale-moon .moon-orb { width: 100%; height: 100%; display: block; }
.finale-moon img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: brightness(1.1) contrast(1.08) saturate(0.8);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 44%, transparent 64%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 44%, transparent 64%);
}
.finale-card .eyebrow-line { position: relative; z-index: 2; margin-top: 56px; }
.finale-card h2 {
  position: relative; z-index: 2;
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.6vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
}
.finale-card h2 .amp { font-size: 0.66em; }
.finale-card > p {
  position: relative; z-index: 2;
  max-width: 460px;
  margin: 18px auto 0;
  color: var(--ink-muted);
  font-size: 1rem; line-height: 1.74;
}
.finale-card .finale-date {
  display: block;
  margin-top: 22px;
  font-family: var(--script);
  color: var(--gold);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.finale-card .finale-venue-line {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px;
  margin: 10px auto 0;
}
.finale-card .finale-venue-line > span {
  color: var(--ink);
  font-size: 0.96rem; font-weight: 600;
}
.finale-map-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(237,195,110,0.45);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(237,195,110,0.05);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.finale-map-link:hover,
.finale-map-link:focus-visible {
  background: rgba(237,195,110,0.2);
  border-color: rgba(237,195,110,0.78);
  color: #fff8e8;
  outline: none;
}
.finale-map-link svg { flex-shrink: 0; }
.rsvp-actions {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 32px;
}
.rsvp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 28px;
  border-radius: 999px;
  font-weight: 800; letter-spacing: 0.06em;
  font-size: 0.86rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.rsvp-btn.primary {
  color: #1d1108;
  background: linear-gradient(135deg, #fff4c9, var(--gold) 56%, #d59c4e);
  border: 1px solid rgba(237,195,110,0.6);
  box-shadow: 0 28px 72px rgba(0,0,0,0.4), 0 0 60px rgba(237,195,110,0.32);
}
.rsvp-btn.secondary {
  color: var(--ink);
  background: rgba(8,10,16,0.5);
  border: 1px solid rgba(237,195,110,0.4);
}
.rsvp-btn:hover { transform: translateY(-3px); }
.hashtag-line {
  position: relative; z-index: 2;
  margin-top: 36px;
  color: var(--ink-dim);
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.32em;
  text-transform: uppercase;
}
.finale-credits {
  position: absolute; left: 0; right: 0; bottom: calc(28px + var(--safe-bottom));
  z-index: 3;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.32em;
  text-transform: uppercase;
}
.finale-credits .heart { color: var(--gold); }

/* ============================================================
   INTERACTIVE LAYER — cursor light, lit photos, diyas, shimmer,
   scratch card, redesigned hero
   ============================================================ */

/* Global cursor lantern */
.cursor-light {
  position: fixed; left: 0; top: 0;
  z-index: 7;
  width: 360px; height: 360px;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255,228,164,0.32) 0%,
    rgba(237,195,110,0.18) 26%,
    rgba(237,195,110,0.06) 52%,
    transparent 70%);
  mix-blend-mode: screen;
  filter: blur(4px);
  transform: translate(-50%,-50%);
  will-change: transform;
  opacity: 0.85;
}
@media (max-width: 760px), (pointer: coarse) { .cursor-light { display: none; } }

/* Any photo with .lit-photo gets a warm light at cursor position */
:where(.lit-photo) { position: relative; }
.lit-photo .lit-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  --mx: 50%;
  --my: 50%;
  --lit: 0;
  opacity: calc(var(--lit, 0) * 0.85);
  background: radial-gradient(280px circle at var(--mx) var(--my),
    rgba(255,228,164,0.32) 0%,
    rgba(237,195,110,0.18) 30%,
    rgba(237,195,110,0.05) 56%,
    transparent 76%);
  mix-blend-mode: screen;
  transition: opacity 0.32s ease;
}

/* Diya — tappable lamp */
.diya {
  position: relative;
  width: 44px; height: 60px;
  display: inline-block;
  background: transparent;
  border: 0; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
  transform: translateZ(0);
}
.diya.size-sm { width: 38px; height: 50px; }
.diya.size-lg { width: 72px; height: 94px; }

/* SVG-based diya — uses real asset */
.diya-svg .diya-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* Default state: lit and glowing (the SVG has a flame baked in) */
  filter:
    drop-shadow(0 0 6px rgba(253,230,168,0.75))
    drop-shadow(0 0 16px rgba(237,195,110,0.5))
    drop-shadow(0 0 32px rgba(237,195,110,0.25))
    brightness(1.05) saturate(1.1);
  transition: filter 0.6s ease, transform 0.4s ease;
}
.diya-svg:not(.is-lit) .diya-img {
  /* Unlit state: dim, no glow */
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.55))
    brightness(0.42) saturate(0.55) contrast(0.95);
}
.diya-svg.is-lit .diya-img {
  filter:
    drop-shadow(0 0 10px rgba(253,230,168,0.95))
    drop-shadow(0 0 28px rgba(237,195,110,0.75))
    drop-shadow(0 0 60px rgba(237,195,110,0.4))
    brightness(1.12) saturate(1.18);
  animation: diyaSvgBob 3.6s ease-in-out infinite;
}
.diya-svg:hover { transform: translateY(-1px); }
.diya-svg:not(.is-lit):hover .diya-img {
  filter:
    drop-shadow(0 0 6px rgba(253,230,168,0.4))
    brightness(0.7) saturate(0.85);
}
@keyframes diyaSvgBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .diya-svg.is-lit .diya-img { animation: none; }
}
.diya .diya-bowl {
  position: absolute;
  left: 50%; bottom: 0;
  width: 80%; height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #c87a3a, #5a2912 80%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,210,150,0.3);
}
.diya .diya-bowl::after {
  content: ""; position: absolute;
  left: 6%; right: 6%; top: -3px;
  height: 6px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, #2a1408 0%, #5a2912 70%);
}
.diya .diya-flame {
  position: absolute;
  left: 50%; bottom: 38%;
  width: 14px; height: 26px;
  transform: translate(-50%, 0) scale(0);
  transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 80%, #fff4c4 0%, #ffcd5a 50%, transparent 75%);
  filter: blur(0.4px);
  transition: transform 0.36s var(--ease-spring), opacity 0.36s ease;
  opacity: 0;
}
.diya .diya-flame-inner {
  position: absolute;
  left: 50%; bottom: 30%;
  width: 6px; height: 12px;
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 80%, #fff 0%, #ffe28a 70%, transparent 100%);
}
.diya .diya-halo {
  position: absolute;
  left: 50%; bottom: 28%;
  width: 0; height: 0;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,210,130,0.6) 0%, rgba(237,195,110,0.18) 38%, transparent 72%);
  transition: width 0.6s var(--ease-spring), height 0.6s var(--ease-spring), opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  filter: blur(4px);
  mix-blend-mode: screen;
}
.diya .diya-shadow {
  position: absolute;
  left: 50%; bottom: -6px;
  width: 80%; height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  filter: blur(4px);
  transform: translateX(-50%);
}
.diya.is-lit .diya-flame {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  animation: diya-flicker 1.4s ease-in-out infinite;
}
.diya.is-lit .diya-halo {
  width: 220px; height: 220px;
  opacity: 1;
  animation: diya-halo 2.2s ease-in-out infinite;
}
.diya.size-sm.is-lit .diya-halo { width: 160px; height: 160px; }
.diya.size-lg.is-lit .diya-halo { width: 300px; height: 300px; }
.diya:not(.is-lit):hover .diya-bowl {
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,210,150,0.3), 0 0 0 2px rgba(237,195,110,0.4);
}
@keyframes diya-flicker {
  0%,100% { transform: translate(-50%, 0) scale(1)    rotate(-2deg); }
  25%     { transform: translate(-50%, -1px) scale(1.04) rotate(2deg); }
  50%     { transform: translate(-50%, 0) scale(0.96) rotate(-1deg); }
  75%     { transform: translate(-50%, -1px) scale(1.02) rotate(1deg); }
}
@keyframes diya-halo {
  0%,100% { opacity: 0.75; }
  50%     { opacity: 1; }
}

/* Shimmer letters */
.shimmer { display: inline-block; position: relative; }
.shimmer .sh-l {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateY(54px) rotateX(-78deg);
  transform-origin: 50% 100%;
  animation: sh-letter-in 0.95s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + var(--shimmer-delay, 280ms));
  transition: color 0.36s ease, text-shadow 0.36s ease;
  will-change: transform, opacity;
}
.shimmer .sh-l::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 232, 164, 0.6) 50%, transparent 70%);
  background-size: 240% 100%; background-position: 240% 0;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.shimmer .sh-l:hover {
  color: #fff5d1;
  text-shadow:
    0 0 24px rgba(255,210,130,0.85),
    0 0 60px rgba(237,195,110,0.5);
}
.shimmer .sh-l:hover::after {
  opacity: 1;
  animation: sh-sheen 1s ease both;
}
.shimmer .sh-sp { display: inline-block; }
@keyframes sh-letter-in {
  0%   { opacity: 0; transform: translateY(54px) rotateX(-78deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotateX(0); }
}
@keyframes sh-sheen {
  to { background-position: -240% 0; }
}

/* ============================================================
   HERO — cinematic grid layout (no overlap, mobile-first)
   ============================================================ */
.hero-cinema {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: #02030a;
  isolation: isolate;
  perspective: 2000px;
}

/* Letterbox bars */
.hero-cinema .hero-lb {
  position: absolute; left: 0; right: 0;
  height: 4vh; max-height: 36px; z-index: 14;
  background: #000;
  pointer-events: none;
}
.hero-cinema .hero-lb.top { top: 0;    box-shadow: 0 14px 30px rgba(0,0,0,0.6); }
.hero-cinema .hero-lb.bot { bottom: 0; box-shadow: 0 -14px 30px rgba(0,0,0,0.6); }

/* Layer 1: photo stage */
.hero-cinema .hero-stage {
  position: absolute; inset: -6% -4%;
  z-index: 1;
  --mx: 50%;
  --my: 50%;
  --lit: 0;
  will-change: transform;
}
.hero-cinema .hero-stage img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.55) saturate(1.2) contrast(1.06);
  animation: hero-kenburns 30s ease-in-out infinite alternate;
}
@keyframes hero-kenburns {
  from { transform: scale(1) translate(0,0); }
  to   { transform: scale(1.06) translate(-1%, 1%); }
}
.hero-cinema .hero-stage-grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2,3,10,0.78) 0%, rgba(2,3,10,0.18) 22%, rgba(2,3,10,0.18) 55%, rgba(2,3,10,0.96) 100%),
    linear-gradient(90deg, rgba(2,3,10,0.55) 0%, transparent 30%, transparent 70%, rgba(2,3,10,0.55) 100%);
}
.hero-cinema .hero-stage-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 28%, rgba(0,0,0,0.55) 100%);
}
.hero-cinema .hero-stage-warm {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 88%, rgba(237,195,110,0.20) 0%, transparent 60%);
  mix-blend-mode: screen;
}
.hero-cinema .hero-stage-light {
  position: absolute; inset: 0;
  opacity: calc(var(--lit, 0) * 0.85);
  background: radial-gradient(420px circle at var(--mx) var(--my),
    rgba(255,228,164,0.28) 0%,
    rgba(237,195,110,0.12) 32%,
    transparent 64%);
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Layer 2: god-rays */
.hero-cinema .hero-rays {
  position: absolute; left: 50%; top: -10%;
  width: 140%; height: 80%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background:
    conic-gradient(from -90deg at 50% 0%,
      transparent 0deg,
      rgba(255,232,164,0.10) 1deg, transparent 4deg,
      transparent 16deg,
      rgba(255,232,164,0.08) 17deg, transparent 21deg,
      transparent 30deg,
      rgba(255,232,164,0.12) 31deg, transparent 36deg,
      transparent 360deg);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity: 0.6;
  animation: hero-rays-drift 18s ease-in-out infinite alternate;
}
@keyframes hero-rays-drift {
  from { transform: translateX(-50%) rotate(-4deg); }
  to   { transform: translateX(-50%) rotate( 4deg); }
}

/* Layer 3: palace silhouette */
.hero-cinema .hero-silhouette {
  position: absolute;
  left: -2%; right: -2%; bottom: 0;
  width: 104%; height: 38%;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 -10px 18px rgba(237,195,110,0.08));
}

/* Layer 4: petals canvas */
.hero-cinema .petal-canvas {
  position: absolute; inset: 0;
  z-index: 4; pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* Moon */
.hero-cinema .hero-moon {
  position: absolute;
  top: clamp(50px, 11vh, 110px);
  right: clamp(20px, 10vw, 200px);
  z-index: 5;
  width: clamp(100px, 13vw, 180px); aspect-ratio: 1;
  background: none;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 0 32px rgba(255,247,232,0.45))
    drop-shadow(0 0 80px rgba(237,195,110,0.28))
    drop-shadow(0 0 160px rgba(237,195,110,0.15));
}
.hero-cinema .hero-moon .moon-orb { width: 100%; height: 100%; display: block; border-radius: 50%; }
.hero-cinema .hero-moon img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Radial mask feathers the moon's edges into transparency — kills the JPEG corners */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 42%, transparent 62%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 42%, transparent 62%);
  filter: brightness(1.05) contrast(1.04) saturate(0.95);
}
.hero-cinema .moon-crater { position: absolute; border-radius: 50%; background: rgba(180,150,80,0.14); }
.hero-cinema .moon-crater.c1 { width: 18%; height: 18%; top: 28%; left: 38%; }
.hero-cinema .moon-crater.c2 { width: 8%;  height: 8%;  top: 56%; left: 28%; }
.hero-cinema .moon-crater.c3 { width: 6%;  height: 6%;  top: 62%; left: 58%; }

/* Grid chrome — overlays the photo with structured rows */
.hero-cinema .hero-chrome {
  position: relative;
  z-index: 8;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "tl tr"
    "cn cn"
    "bl br";
  padding: calc(4vh + 24px) clamp(20px, 5vw, 64px) calc(4vh + 24px);
  gap: clamp(16px, 3vw, 36px);
  pointer-events: none;
}
.hero-cinema .hc-area { pointer-events: auto; }
.hero-cinema .hc-top-l  { grid-area: tl; justify-self: start; align-self: start; }
.hero-cinema .hc-top-r  { grid-area: tr; justify-self: end;   align-self: start; }
.hero-cinema .hc-bot-l  { grid-area: bl; justify-self: start; align-self: end; }
.hero-cinema .hc-bot-r  { grid-area: br; justify-self: end;   align-self: end; }
.hero-cinema .hc-center {
  grid-area: cn;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 14px 0;
  will-change: transform, opacity;
}

/* Film slate */
.hero-cinema .hero-slate {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(237,195,110,0.32);
  border-radius: 4px;
  background: rgba(2,3,10,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.66rem; font-weight: 900;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.hero-cinema .hero-slate .sl-num {
  color: var(--gold); font-family: var(--display);
  font-weight: 400; font-size: 0.78rem;
  letter-spacing: 0.24em;
}
.hero-cinema .hero-slate .sl-sep { width: 8px; height: 1px; background: rgba(237,195,110,0.6); }

/* Datestamp */
.hero-cinema .hero-datestamp {
  padding: 18px 22px;
  border: 1px solid rgba(237,195,110,0.4);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(8,12,22,0.82), rgba(8,18,16,0.7));
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  color: #fff8e8;
  text-align: right;
  min-width: 200px;
}
.hero-cinema .hero-datestamp .ds-lbl {
  display: block;
  font-size: 0.66rem; font-weight: 900;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--gold);
}
.hero-cinema .hero-datestamp .ds-row {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 4px; justify-content: flex-end;
}
.hero-cinema .hero-datestamp .ds-row strong {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 0.9; color: var(--gold);
}
.hero-cinema .hero-datestamp .ds-mid {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--display);
}
.hero-cinema .hero-datestamp .ds-mid em {
  font-style: normal;
  font-size: 0.76rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1; color: #fff8e8;
}
.hero-cinema .hero-datestamp .ds-foot {
  display: block; margin-top: 6px;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* Center content */
.hero-cinema .hc-eye {
  display: inline-flex; align-items: center; gap: 18px;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.hero-cinema .hc-eye i {
  display: inline-block;
  width: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-cinema .hc-title {
  margin: 0;
  display: grid;
  gap: 0.08em;                       /* explicit breathing room between rows */
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.96;                 /* slightly looser to keep glyph ascenders inside their row */
  font-size: clamp(3rem, 9vw, 8.4rem);
  letter-spacing: 0.01em;
  color: #fff8e8;
  text-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.hero-cinema .hc-name {
  display: inline-block;
  line-height: 0.95;
}
.hero-cinema .hc-amp {
  display: inline-block;
  font-family: var(--script);        /* script directly here so the ornate ampersand has its own line box */
  font-style: italic;
  font-size: 0.56em;                 /* slightly smaller — the script glyph already reads larger than its em size */
  line-height: 1.1;                  /* tall line-box prevents the swash from bleeding into adjacent rows */
  margin: 0.12em 0;                  /* extra vertical cushion above and below */
  color: var(--gold);
  text-shadow: 0 0 24px rgba(237,195,110,0.45);
}
.hero-cinema .hc-amp .shimmer {
  font-family: var(--script);
  font-style: italic;
}
.hero-cinema .hc-tag {
  margin: 0;
  font-family: var(--script);
  color: var(--gold);
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  font-style: italic;
  letter-spacing: 0.02em;
}
.hero-cinema .hc-meta {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.hero-cinema .hc-meta i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}
.hero-cinema .hc-diyas {
  display: inline-flex; gap: 22px; align-items: flex-end;
  margin-top: 8px;
}
.hero-cinema .hc-cue {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--gold);
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.3em; text-transform: uppercase;
  margin-top: 4px;
}
.hero-cinema .hc-cue .cue-track {
  position: relative;
  width: 16px; height: 28px;
  border: 1px solid rgba(237,195,110,0.5);
  border-radius: 999px;
}
.hero-cinema .hc-cue .cue-dot {
  position: absolute;
  left: 50%; top: 5px;
  width: 3px; height: 6px;
  border-radius: 999px;
  background: var(--gold);
  transform: translateX(-50%);
  animation: hc-cue-dot 1.7s ease-in-out infinite;
}
@keyframes hc-cue-dot {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

/* Mobile + tablet rules — explicit, no overlap */
@media (max-width: 880px) {
  .hero-cinema .hero-chrome {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tl"
      "cn"
      "bl";
    padding: calc(4vh + 14px) 16px calc(4vh + 14px);
    gap: 14px;
  }
  .hero-cinema .hc-top-r,
  .hero-cinema .hc-bot-r { display: none; }
  .hero-cinema .hc-top-l,
  .hero-cinema .hc-bot-l { justify-self: start; }
  .hero-cinema .hero-slate { padding: 5px 10px; gap: 8px; font-size: 0.66rem; letter-spacing: 0.24em; }
  .hero-cinema .hero-slate .sl-num { font-size: 0.66rem; }
  .hero-cinema .hero-moon { top: 10vh; right: 8vw; width: 60px; }
  .hero-cinema .hc-eye i { width: 26px; }
  .hero-cinema .hc-eye { font-size: 0.66rem; gap: 12px; letter-spacing: 0.3em; }
  .hero-cinema .hc-meta { font-size: 0.66rem; gap: 10px; letter-spacing: 0.24em; flex-wrap: wrap; justify-content: center; }
  .hero-cinema .hc-diyas { gap: 18px; }
  .hero-cinema .hc-tag { font-size: 1.4rem; }
}
@media (max-width: 480px) {
  .hero-cinema .hc-title { font-size: clamp(2.4rem, 13vw, 4rem); }
  .hero-cinema .hero-silhouette { height: 28%; }
  .hero-cinema .hc-meta span:nth-child(3) { font-size: 0.66rem; }
}
@media (max-height: 720px) and (min-width: 881px) {
  .hero-cinema .hc-title { font-size: clamp(3.4rem, 8vw, 6.4rem); }
  .hero-cinema .hc-center { gap: 8px; padding: 4px 0; }
  .hero-cinema .hc-eye { font-size: 0.66rem; }
  .hero-cinema .hc-tag { font-size: clamp(1.1rem, 2vw, 1.6rem); }
  .hero-cinema .hc-diyas { gap: 14px; }
  .hero-cinema .hc-diyas .diya.size-sm { width: 26px; height: 36px; }
}

/* ============================================================
   INVITATION SCROLL — Mughal/Indian Muslim wedding details
   ============================================================ */
.invite-scroll {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(212,164,55,0.18), transparent 56%),
    radial-gradient(ellipse at 50% 0%, #fff6dc, transparent 38%),
    linear-gradient(180deg, #fff2c7 0%, #f5dca0 50%, #c89853 100%);
}
.invite-scroll::before {
  content:"";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 24px 24px, rgba(110,26,50,0.10) 0.6px, transparent 1.2px),
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(110,26,50,0.04) 18px 19px, transparent 19px 36px),
    repeating-linear-gradient(-45deg, transparent 0 18px, rgba(110,26,50,0.04) 18px 19px, transparent 19px 36px);
  background-size: 48px 48px, auto, auto;
  pointer-events: none;
  opacity: 0.7;
}
.invite-scroll .is-crescent {
  position: absolute;
  left: 50%; top: 22px;
  width: 64px; height: 64px;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 4px 12px rgba(110,26,50,0.28))
    drop-shadow(0 0 18px rgba(237,195,110,0.4));
  animation: crescentGlow 4.5s ease-in-out infinite;
}
@keyframes crescentGlow {
  0%, 100% { filter:
    drop-shadow(0 4px 12px rgba(110,26,50,0.28))
    drop-shadow(0 0 14px rgba(237,195,110,0.35)); }
  50%      { filter:
    drop-shadow(0 4px 12px rgba(110,26,50,0.28))
    drop-shadow(0 0 24px rgba(237,195,110,0.55)); }
}
.invite-scroll .is-arch {
  position: absolute;
  left: 24px; right: 24px; top: 84px;
  width: calc(100% - 48px);
  height: 70%;
  opacity: 0.42;
  pointer-events: none;
}
.invite-scroll .eyebrow {
  position: relative; z-index: 2;
  margin-top: 80px;
  color: #6e1a32;
  font-weight: 800;
  letter-spacing: 0.36em;
  font-size: 0.66rem;
  font-family: var(--sans);
}

/* Ornate eyebrow — gold flourish, text, gold flourish */
.invite-scroll .eyebrow.eyebrow-ornate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  white-space: nowrap;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
.invite-scroll .eyebrow-flourish {
  display: inline-flex;
  width: clamp(40px, 9vw, 72px);
  height: 12px;
  align-items: center;
  flex-shrink: 0;
}
.invite-scroll .eyebrow-flourish svg {
  width: 100%; height: 100%;
  display: block;
}
.invite-scroll .eyebrow-text {
  display: inline-block;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(212,164,55,0.18);
}
@media (max-width: 540px) {
  .invite-scroll .eyebrow.eyebrow-ornate { gap: 8px; }
  .invite-scroll .eyebrow-flourish { width: clamp(28px, 8vw, 44px); }
  .invite-scroll .eyebrow { font-size: 0.66rem; letter-spacing: 0.3em; }
}
.invite-scroll h2 {
  position: relative; z-index: 2;
  margin: 16px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 0.94;
  color: #29150d;
}
.invite-scroll h2 .amp { color: #d4a437; font-family: var(--script); font-size: 0.7em; font-style: italic; }
.invite-scroll .is-body {
  position: relative; z-index: 2;
  max-width: 440px;
  margin: 20px auto 14px;
  color: rgba(41,21,13,0.76);
  font-size: 0.98rem;
  line-height: 1.74;
}
.invite-scroll .is-ornament-divider {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 14px;
  margin: 14px 0 12px;
}
.invite-scroll .is-ornament-divider .odv-line {
  display: inline-block; width: 56px; height: 1px;
  background: linear-gradient(90deg, transparent, #d4a437, transparent);
}
.invite-scroll .is-ornament-divider .odv-star {
  color: #d4a437;
  text-shadow: 0 0 10px rgba(212,164,55,0.5);
  font-size: 0.85rem;
}
.invite-scroll .is-venue {
  position: relative; z-index: 2;
  margin-top: 18px;
  font-family: var(--display);
  font-style: italic;
  color: #6e1a32;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.invite-scroll .is-venue-glyph {
  color: #d4a437;
  margin: 0 10px;
  font-size: 0.78em;
}

/* Mughal corner ornaments — 8-point Islamic star pattern */
.invite-scroll .is-corner {
  position: absolute;
  width: 44px; height: 44px;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(110,26,50,0.7) 0deg, rgba(110,26,50,0.7) 8deg, transparent 8deg,
      transparent 45deg, rgba(212,164,55,0.7) 45deg, rgba(212,164,55,0.7) 53deg, transparent 53deg,
      transparent 90deg, rgba(110,26,50,0.7) 90deg, rgba(110,26,50,0.7) 98deg, transparent 98deg,
      transparent 135deg, rgba(212,164,55,0.7) 135deg, rgba(212,164,55,0.7) 143deg, transparent 143deg,
      transparent 180deg, rgba(110,26,50,0.7) 180deg, rgba(110,26,50,0.7) 188deg, transparent 188deg,
      transparent 225deg, rgba(212,164,55,0.7) 225deg, rgba(212,164,55,0.7) 233deg, transparent 233deg,
      transparent 270deg, rgba(110,26,50,0.7) 270deg, rgba(110,26,50,0.7) 278deg, transparent 278deg,
      transparent 315deg, rgba(212,164,55,0.7) 315deg, rgba(212,164,55,0.7) 323deg, transparent 323deg,
      transparent 360deg);
  mask: radial-gradient(circle at 50% 50%, black 38%, transparent 38%);
  -webkit-mask: radial-gradient(circle at 50% 50%, black 38%, transparent 38%);
  opacity: 0.6;
}
.invite-scroll .is-corner.is-tl { top: 28px; left: 28px; }
.invite-scroll .is-corner.is-tr { top: 28px; right: 28px; }
.invite-scroll .is-corner.is-bl { bottom: 28px; left: 28px; }
.invite-scroll .is-corner.is-br { bottom: 28px; right: 28px; }

/* Polished scratch reveal */
.invite-scratch-wrap {
  position: relative;
  z-index: 2;
  width: min(100%, 360px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.invite-scratch-wrap .is-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 8px;
  color: #6e1a32;
  font-family: var(--sans);
  font-size: clamp(0.58rem, 1.6vw, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}
.invite-scratch-wrap .is-hint::before,
.invite-scratch-wrap .is-hint::after {
  content: "";
  width: clamp(18px, 7vw, 34px);
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, rgba(147,91,31,0.72), transparent);
}
.scratch-card {
  position: relative;
  width: clamp(238px, 72%, 318px);
  aspect-ratio: 2.12;
  min-height: 112px;
  border: 1px solid rgba(88,34,28,0.38);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,247,205,0.96), rgba(245,206,124,0.86) 50%, rgba(184,119,49,0.76) 100%),
    linear-gradient(135deg, #fff2bf, #e6b65e 50%, #a7652e);
  box-shadow:
    0 14px 28px rgba(76,37,17,0.28),
    inset 0 0 0 1px rgba(255,246,196,0.78),
    inset 0 0 0 5px rgba(99,46,34,0.1);
  isolation: isolate;
}
.scratch-card::before,
.scratch-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 3;
  border-radius: 15px;
  pointer-events: none;
}
.scratch-card::before {
  border: 1px solid rgba(106,45,29,0.28);
  box-shadow: inset 0 0 0 1px rgba(255,247,206,0.42);
}
.scratch-card::after {
  inset: 12px 16px;
  background:
    linear-gradient(90deg, rgba(111,47,31,0.24), transparent 18%, transparent 82%, rgba(111,47,31,0.24)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.28), transparent 44%);
  opacity: 0.52;
  mix-blend-mode: soft-light;
}
.scratch-card .scratch-reveal {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 1;
  padding: 12px 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,251,232,0.95), rgba(246,221,160,0.82) 66%, rgba(206,148,73,0.72) 100%),
    linear-gradient(135deg, rgba(255,246,208,0.96), rgba(218,164,82,0.8));
}
.scratch-card .is-revealed-content {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--display);
  color: #2a1410;
}
.scratch-card .is-revealed-content strong {
  font-size: clamp(3.4rem, 8vw, 4.4rem);     /* prominent date */
  line-height: 0.88;
  font-weight: 400;
  color: #6e1a32;                            /* wine color for emphasis */
  text-shadow: 0 2px 4px rgba(110,26,50,0.18);
}
.scratch-card .is-revealed-content span {
  font-size: clamp(0.86rem, 1.6vw, 1.04rem); /* readable month/year */
  font-weight: 800; letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #6e1a32;
}
.scratch-card .scratch-canvas {
  position: absolute; inset: 0;
  z-index: 4;
  cursor: crosshair;
  touch-action: none;
  border-radius: 18px;
}
.scratch-card.is-revealed .scratch-canvas { animation: scratch-out 0.5s var(--ease-film) forwards; pointer-events: none; }

/* Wrapper that groups the card + the skip link below */
.scratch-card-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%;
}
.scratch-card-wrap .scratch-card {
  /* card stays as-is, just inside the wrap now */
  flex: 0 0 auto;
}
.scratch-skip-link {
  appearance: none;
  border: 1px solid rgba(110,26,50,0.2);
  border-radius: 999px;
  background: rgba(255,246,205,0.58);
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(110,26,50,0.78);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(89,47,18,0.12);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.scratch-skip-link:hover,
.scratch-skip-link:focus-visible {
  color: rgba(110,26,50,1);
  border-color: rgba(110,26,50,0.45);
  background: rgba(255,247,216,0.88);
  transform: translateY(-1px);
}
@keyframes scratch-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.04); }
}

/* Diyas inside invitation section orbit */
.invite-ritual .invite-diya {
  position: absolute; z-index: 4;
  display: block;
  width: 56px; height: 56px;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.5))
    drop-shadow(0 0 22px rgba(237,195,110,0.55))
    drop-shadow(0 0 48px rgba(237,195,110,0.28));
  animation: diyaIdleBob 4.2s ease-in-out infinite;
  transition: filter 0.8s ease, transform 0.8s ease;
}
.invite-ritual .invite-diya img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none; user-select: none;
}
.invite-ritual .invite-diya.id1 { left: 8%;  top: 18%; width: 54px; height: 54px; animation-delay: 0s; }
.invite-ritual .invite-diya.id2 { right: 10%; top: 28%; width: 64px; height: 64px; animation-delay: 0.7s; }
.invite-ritual .invite-diya.id3 { left: 30%; bottom: 10%; width: 58px; height: 58px; animation-delay: 1.4s; }

.invite-ritual.is-lit .invite-diya {
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.55))
    drop-shadow(0 0 40px rgba(237,195,110,0.95))
    drop-shadow(0 0 90px rgba(237,195,110,0.5))
    brightness(1.08) saturate(1.15);
  transform: translateY(-4px);
}
.invite-ritual:not(.is-lit) .invite-diya {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)) brightness(0.55) saturate(0.6);
}
@keyframes diyaIdleBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Pre-lit hint — shown in the right column when the lamp isn't lit yet */
.invite-prehint {
  position: relative; z-index: 2;
  justify-self: center; align-self: center;
  text-align: center;
  color: var(--ink-muted);
  max-width: 360px;
  padding: 32px;
  border: 1px solid rgba(237,195,110,0.18);
  border-radius: 12px;
  background: rgba(3,5,6,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.invite-prehint-eye {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.invite-prehint p {
  font-family: var(--script);
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 0 24px rgba(237,195,110,0.25);
}

/* When the card is showing, hide the pre-hint */
.invite-ritual.is-lit .invite-prehint { display: none; }

/* ============================================================
   MARIGOLD RAIN — kicks in once the seal is scratched
   ============================================================ */
/* Garland strip anchored to the bottom of the invitation section */
.marigold-rain {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 80px;             /* strip height — petals overflow upward freely */
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.marigold-petal {
  position: absolute;
  bottom: 0;                /* anchored to the strip's bottom (= section bottom) */
  transform-origin: 50% 100%;
  /* left value is interpreted as the CENTER of the petal — keeps all petals safely inside the viewport */
  margin-left: 0;
  display: block;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.55))
    drop-shadow(0 0 14px rgba(255,140,0,0.45))
    drop-shadow(0 0 28px rgba(237,195,110,0.28));
}
.marigold-petal img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none; user-select: none;
}

/* Make the strip slightly taller on bigger screens so petals can sit a bit higher */
@media (min-width: 800px) {
  .marigold-rain { height: 100px; }
}

/* When marigolds are falling, warm the section ambient slightly */
.invite-ritual.is-blessed {
  background:
    radial-gradient(ellipse at 24% 40%, rgba(255,140,0,0.16), transparent 42%),
    radial-gradient(ellipse at 80% 80%, rgba(237,195,110,0.18), transparent 50%),
    var(--night);
  transition: background 0.8s ease;
}

@media (prefers-reduced-motion: reduce) {
  .lamp-button .lamp-orb-img,
  .lamp-button .lamp-glow,
  .invite-ritual .invite-diya { animation: none; }
  .marigold-rain { display: none; }
}

/* Unlit / lit dramatic state */
.invite-ritual { transition: background 0.9s ease; }
.invite-ritual:not(.is-lit) .lamp-orb {
  background: radial-gradient(circle at 36% 32%, #d4c69e 0 14%, #8a7849 16% 58%, rgba(120,90,40,0.3) 62%);
  box-shadow: 0 0 22px rgba(180,150,80,0.18);
  animation: none;
}
.invite-ritual .lamp-label {
  display: inline-block;
}

/* Scratch gate: dim and disabled until lit */
.invite-scratch-gate {
  position: relative;
  width: 100%;
  display: grid; place-items: center;
  filter: brightness(0.5) saturate(0.6);
  opacity: 0.55;
  transition: filter 0.7s ease, opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.invite-scratch-gate.is-open {
  filter: brightness(1) saturate(1);
  opacity: 1;
  pointer-events: auto;
  animation: scratch-gate-pop 0.7s var(--ease-spring);
}
@keyframes scratch-gate-pop {
  0%   { transform: scale(0.92) translateY(8px); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1) translateY(0); }
}

/* Blessed status message */
.invite-blessed {
  position: absolute;
  left: 50%; bottom: clamp(36px, 6vh, 60px);
  z-index: 6;
  transform: translateX(-50%);
  font-family: var(--script);
  color: var(--gold);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  text-shadow: 0 0 18px rgba(237,195,110,0.7);
  pointer-events: none;
}

/* When lit: full warm bloom — much more dramatic */
.invite-ritual.is-lit {
  background:
    radial-gradient(ellipse at 24% 40%, rgba(255,210,130,0.36), transparent 50%),
    radial-gradient(ellipse at 76% 70%, rgba(237,195,110,0.16), transparent 48%),
    radial-gradient(ellipse at 80% 80%, rgba(13,36,24,0.4), transparent 50%),
    var(--night);
}
.invite-ritual.is-lit::before { opacity: 0.78; filter: brightness(0.42) saturate(1.2) contrast(1.1); }

/* Stagger the diya flames lighting up */
.invite-ritual .invite-diya .diya-flame,
.invite-ritual .invite-diya .diya-halo {
  transition-timing-function: var(--ease-spring);
}
.invite-ritual.is-lit .invite-diya.id1 .diya-flame { transition-delay: 0s; }
.invite-ritual.is-lit .invite-diya.id1 .diya-halo  { transition-delay: 0.1s; }
.invite-ritual.is-lit .invite-diya.id2 .diya-flame { transition-delay: 0.26s; }
.invite-ritual.is-lit .invite-diya.id2 .diya-halo  { transition-delay: 0.36s; }
.invite-ritual.is-lit .invite-diya.id3 .diya-flame { transition-delay: 0.52s; }
.invite-ritual.is-lit .invite-diya.id3 .diya-halo  { transition-delay: 0.62s; }

/* Couple drag hint */
.couple-cluster .cc-drag-hint {
  position: absolute;
  left: 8%; bottom: -36px;
  z-index: 1;
  font-size: 0.66rem; font-weight: 900;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(237,195,110,0.7);
  display: inline-flex; align-items: center; gap: 10px;
}
.couple-cluster .cc-drag-hint::before {
  content: "✦"; color: var(--gold);
}
.couple-cluster .cc-pin { cursor: grab; touch-action: none; }
.couple-cluster .cc-pin:active { cursor: grabbing; }

/* Old hero-marquee styles — hide leftover rules from old layout */
.hero-marquee { display: none; }

/* ============================================================
   CHAPTER DIVIDER — cinematic upgrades
   ============================================================ */
.chapter-divider {
  perspective: 1200px;
}
.chapter-divider-text {
  position: relative;
  transform-style: preserve-3d;
}
.chapter-divider-stars {
  position: absolute;
  left: 50%; top: -32px;
  display: inline-flex; gap: 14px;
  transform: translateX(-50%);
}
.chapter-divider-stars i {
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  animation: cd-twinkle 2s ease-in-out infinite;
}
.chapter-divider-stars i:nth-child(2) { animation-delay: 0.4s; opacity: 0.6; }
.chapter-divider-stars i:nth-child(3) { animation-delay: 0.8s; opacity: 0.4; }
@keyframes cd-twinkle {
  0%,100% { transform: scale(0.7); opacity: 0.5; }
  50%     { transform: scale(1.3); opacity: 1; }
}

/* ============================================================
   COUNTDOWN — atmospheric background photo + 3D depth
   ============================================================ */
.countdown-section {
  position: relative;
}
.countdown-section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url("assets/cinema/palace-facade-night.jpg") center/cover;
  filter: brightness(0.28) saturate(1.18) contrast(1.1);
  opacity: 0.6;
  animation: cd-bg-drift 24s ease-in-out infinite alternate;
}
@keyframes cd-bg-drift {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.08) translateY(-1%); }
}
.countdown-section::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(237,195,110,0.18), transparent 46%),
    radial-gradient(ellipse at 50% 100%, rgba(102,29,52,0.22), transparent 50%),
    linear-gradient(180deg, rgba(2,3,10,0.5) 0%, rgba(2,3,10,0.2) 30%, rgba(2,3,10,0.5) 100%);
}
.countdown-content {
  perspective: 1000px;
}
.countdown-grid { transform-style: preserve-3d; }
.countdown-cell {
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease-spring);
}
.countdown-cell:hover {
  transform: translateY(-6px) rotateX(8deg);
}

/* ============================================================
   FINALE FIREWORKS / SPARKLES
   ============================================================ */
.finale-film {
  position: relative;
}
.finale-film .finale-sparks {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,228,164,0.9), transparent 60%),
    radial-gradient(2px 2px at 70% 20%, rgba(255,210,130,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 60%, rgba(255,247,232,0.8), transparent 60%),
    radial-gradient(2px 2px at 35% 70%, rgba(237,195,110,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,228,164,0.6), transparent 60%),
    radial-gradient(2px 2px at 15% 55%, rgba(255,210,130,0.5), transparent 60%);
  animation: finale-twinkle 3s ease-in-out infinite alternate;
}
@keyframes finale-twinkle {
  from { opacity: 0.4; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.04); }
}

/* ============================================================
   MOBILE — explicit rules to prevent overlap across sections
   ============================================================ */
@media (max-width: 760px) {
  /* Section padding */
  .countdown-section { padding: 80px 18px; min-height: 70vh; }
  .countdown-cell:not(:last-child)::after { font-size: 1.6rem; right: 0; top: 8px; }
  .countdown-cell { padding: 18px 12px 14px; min-width: 70px; gap: 8px; }
  .countdown-cell::before { border-radius: 14px 14px 8px 8px; }
  .countdown-num { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .countdown-label { font-size: 0.66rem; letter-spacing: 0.22em; }
  .countdown-title { margin-bottom: 32px; }

  /* Reel scenes */
  .reel-copy { left: 18px; right: 18px; bottom: 90px; max-width: none; }
  .reel-copy h2 { font-size: clamp(1.9rem, 8.5vw, 3rem); }
  .reel-copy .reel-body { font-size: 0.92rem; max-width: none; }
  .tunnel-meta { top: 80px; left: 16px; }

  /* Invite */
  .lamp-orbit { min-height: 320px; }
  .lamp-orbit::before { width: min(340px,80vw); }
  .lamp-orbit::after  { width: min(240px,62vw); }
  .invite-ritual .invite-diya { display: none; }
  .invite-scroll { padding: 32px 22px; min-height: 540px; }
  .invite-scroll h2 { font-size: clamp(2rem, 8vw, 3.4rem); }
  .scratch-card { width: 86%; }

  /* Events */
  .events-film { padding: 76px 18px; }
  .event-tabs { gap: 8px; }
  .event-pill { min-height: 44px; padding: 0 16px; font-size: 0.7rem; }
  .event-pill .date { font-size: 0.84rem; }
  .event-feature .copy-side { padding: 24px 22px; }
  .event-feature .copy-side h3 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .event-feature .copy-side .desc { font-size: 0.92rem; }

  /* Couple */
  .couple-film { padding: 80px 18px; }
  .couple-cluster { height: 70vh; min-height: 460px; }
  .couple-copy .cc-title { font-size: clamp(2.2rem, 11vw, 3.6rem); }
  .couple-copy .cc-lede { font-size: 0.96rem; }
  .couple-copy .cc-quote { padding: 22px 22px 18px 28px; }
  .couple-copy .cc-quote p { font-size: 1.1rem; }
  .couple-strip { font-size: clamp(3rem, 12vw, 7rem); }

  /* Gallery */
  .gallery-film { padding: 76px 0 100px; }
  .gallery-stage { height: clamp(360px, 56vh, 480px); margin-top: 28px; }
  .gallery-card { width: clamp(220px, 70vw, 320px); height: clamp(320px, 80vw, 460px); }
  .gallery-controls button { width: 44px; height: 44px; }

  /* Finale */
  .finale-film { padding: 90px 18px 130px; }
  .finale-card { padding: 50px 24px; }
  .finale-card h2 { font-size: clamp(2.2rem, 11vw, 3.6rem); }
  .rsvp-btn { padding: 0 22px; font-size: 0.78rem; }

  /* Chapter divider */
  .chapter-divider { padding: 50px 16px; }
  .chapter-divider-num { font-size: clamp(2.8rem, 16vw, 5rem); }

  /* Film nav */
  .film-nav { gap: 0; }
  .film-nav a, .film-nav button { padding: 0 10px; font-size: 0.7rem; }
}
@media (max-width: 480px) {
  .countdown-grid { gap: 4px; }
  .countdown-cell { padding: 14px 8px 12px; min-width: 60px; }
  .countdown-num { font-size: clamp(1.8rem, 11vw, 2.4rem); }
  .reel-copy h2 { font-size: clamp(1.6rem, 9vw, 2.4rem); }
  .gallery-controls .pos { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .firefly-field, .grain { display: none; }
}

/* ============================================================
   MOBILE TUNING
   ============================================================ */
@media (max-width: 760px) {
  .hero-marquee { min-height: 100vh; padding: 80px 18px 100px; }
  .hero-arch { width: min(420px, 84vw); height: min(540px, 64vh); bottom: -12vh; }
  .hero-orbit-ring { display: none; }
  .reel-frame { width: min(360px, 78vw); height: min(60vh, 520px); }
  .reel-copy { width: min(360px, 90vw); padding: 26px; }
  .reel-num { font-size: 6rem; }
  .invite-scroll { min-height: 600px; padding: 40px 24px; }
  .countdown-cell { padding: 22px 16px 18px; min-width: 76px; }
  .countdown-cell:not(:last-child)::after { display: none; }
}


/* ============================================================
   COUPLE FILM v2 — Cinematic horizontal pin-scroll journey
   ============================================================ */
.couple-film.cf-v2 {
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: stretch;
  padding: 0;
  height: 360vh;
  min-height: 0;
  overflow: visible;
  background:
    radial-gradient(ellipse at 12% 50%, rgba(138,38,64,0.22), transparent 50%),
    radial-gradient(ellipse at 88% 50%, rgba(237,195,110,0.12), transparent 48%),
    linear-gradient(180deg, #050309 0%, #0a0712 50%, #050309 100%);
}
.couple-film.cf-v2.is-mobile { height: auto; }

.cf-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 30%, rgba(237,195,110,0.06), transparent 38%),
    radial-gradient(circle at 78% 70%, rgba(138,38,64,0.10), transparent 42%);
  mix-blend-mode: screen;
  z-index: 0;
}
.cf-mist {
  position: absolute;
  left: -10%; right: -10%; bottom: -8%;
  height: 38%;
  background:
    radial-gradient(ellipse 60% 100% at 28% 100%, rgba(138,38,64,0.18), transparent 60%),
    radial-gradient(ellipse 70% 100% at 76% 100%, rgba(237,195,110,0.12), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.cf-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}
.couple-film.cf-v2.is-mobile .cf-pin {
  position: relative;
  height: auto;
  overflow: visible;
  padding: 80px 16px 40px;
}

.cf-header {
  position: absolute;
  left: 0; right: 0; top: 4vh;
  margin: 0 auto;
  width: min(800px, 92vw);
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
.couple-film.cf-v2.is-mobile .cf-header {
  position: relative;
  left: auto; top: auto;
  transform: none;
  margin: 0 auto 32px;
}
.cf-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 900;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold);
}
.cf-eyebrow i {
  display: inline-block; width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.cf-names {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1;
  color: #fff8e8;
  letter-spacing: 0.005em;
  text-shadow: 0 0 36px rgba(237,195,110,0.28);
}
.cf-names .cn-amp {
  display: inline-block;
  margin: 0 0.16em;
  font-family: var(--script);
  font-style: italic;
  color: var(--gold);
  font-size: 0.62em;
  vertical-align: baseline;
  text-shadow: 0 0 24px rgba(237,195,110,0.6);
}
.cf-lede {
  margin: 10px auto 0;
  max-width: 520px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.78rem, 1.05vw, 0.92rem);
  line-height: 1.55;
  color: var(--ink-muted);
}

.cf-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 400vw;
  height: 100%;
  will-change: transform;
  z-index: 2;
}
.couple-film.cf-v2.is-mobile .cf-track {
  position: relative;
  flex-direction: column;
  width: 100%;
  height: auto;
  transform: none !important;
}

.cf-slide {
  position: relative;
  flex: 0 0 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 22vh 5vw 18vh;     /* clear room for header (top) + controls/finale (bottom) */
}
.couple-film.cf-v2.is-mobile .cf-slide {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 70vh;
  padding: 24px 0 48px;
  border-bottom: 1px solid rgba(237,195,110,0.08);   /* visual separator between slides */
}
.couple-film.cf-v2.is-mobile .cf-slide:last-child { border-bottom: none; }

.cf-bignum {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18rem, 32vw, 36rem);
  line-height: 0.9;
  color: var(--gold);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

.cf-photo {
  position: relative;
  z-index: 2;
  margin: 0;
  width: min(54vw, 760px);
  height: min(56vh, 520px);
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a14;
  border: 1px solid rgba(237,195,110,0.22);
  box-shadow:
    0 60px 140px rgba(0,0,0,0.7),
    0 0 80px rgba(237,195,110,0.16),
    inset 0 0 0 1px rgba(255,247,232,0.06);
  will-change: opacity, transform;
}
.cf-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(1.15) contrast(1.05);
  display: block;
}
.cf-photo-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(3,5,6,0.55) 100%),
    linear-gradient(180deg, rgba(3,5,6,0.3) 0%, transparent 28%, transparent 70%, rgba(3,5,6,0.6) 100%);
  border-radius: inherit;
}

.cf-photo-corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 1px solid rgba(237,195,110,0.55);
  pointer-events: none;
  z-index: 3;
}
.cf-photo-corner.cf-tl { top: 14px; left: 14px;  border-right: none; border-bottom: none; }
.cf-photo-corner.cf-tr { top: 14px; right: 14px; border-left: none;  border-bottom: none; }
.cf-photo-corner.cf-bl { bottom: 14px; left: 14px;  border-right: none; border-top: none; }
.cf-photo-corner.cf-br { bottom: 14px; right: 14px; border-left: none;  border-top: none; }

.couple-film.cf-v2.is-mobile .cf-photo {
  width: 90vw;
  height: 60vh;
}

.cf-cap {
  position: relative;
  z-index: 4;
  display: grid; gap: 6px; place-items: center;
  text-align: center;
  pointer-events: none;
  margin: 0;
}
.couple-film.cf-v2.is-mobile .cf-cap {
  position: relative;
  left: auto; bottom: auto;
  transform: none;
  margin: 0 0 18px;     /* caption above photo: no top margin, bottom gap before image */
  order: -1;             /* render BEFORE the photo in flex order — title precedes its photo */
}
.cf-cap-eye {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 900;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold);
}
.cf-cap-line {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff8e8;
  line-height: 1.05;
}
.cf-cap-date {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-muted);
}

.cf-controls {
  position: absolute;
  left: 0; right: 0; bottom: 5vh;
  margin: 0 auto;
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(480px, 80vw);
  pointer-events: none;
}
.cf-dots {
  display: flex; gap: 14px;
}
.cf-dot {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(237,195,110,0.55);
}
.cf-progress {
  width: 100%; height: 1px;
  background: rgba(237,195,110,0.18);
  border-radius: 999px;
  overflow: hidden;
}
.cf-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wine-2), var(--gold), var(--amber));
  border-radius: 999px;
}
.cf-hint {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.7;
}

.cf-finale {
  position: absolute;
  left: 0; right: 0; bottom: 4vh;
  margin: 0 auto;
  width: min(720px, 88vw);
  z-index: 6;
  text-align: center;
  pointer-events: none;
}
.cf-quote {
  position: relative;
  margin: 0 0 14px;
  padding: 0 28px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink);
}
.cf-quote p { margin: 0 0 8px; }
.cf-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--gold);
}
.cf-quote-mark {
  position: absolute;
  left: 0; top: -8px;
  font-family: var(--script);
  font-size: 2.4rem;
  color: var(--gold);
  opacity: 0.6;
  line-height: 1;
}
.cf-meta {
  display: inline-flex; gap: 14px; align-items: center;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
.cf-meta-dot { color: rgba(237,195,110,0.4); }

.cf-mobile-foot {
  position: relative;
  padding: 40px 24px 64px;
  text-align: center;
  z-index: 2;
}
.cf-mobile-foot .cf-quote { padding: 0 14px; }
.cf-mobile-foot .cf-meta { flex-wrap: wrap; justify-content: center; gap: 8px 14px; }

@media (max-width: 800px) {
  .cf-header { width: 100%; }
  .cf-bignum { font-size: clamp(10rem, 38vw, 22rem); }
  .cf-cap-line { font-size: clamp(1.4rem, 5vw, 1.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .couple-film.cf-v2 { height: auto; }
  .cf-pin { position: relative; height: auto; }
  .cf-track { flex-direction: column; width: 100%; transform: none !important; }
  .cf-slide { flex: 0 0 auto; height: auto; min-height: 80vh; }
  .cf-controls { display: none; }
}

/* Product guardrails: dynamic copy and media should hold together on any viewport. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.opening-film .op-titles h1,
.hero-title h1,
.hero-cinema .hc-title,
.invite-scroll h2,
.event-feature .copy-side h3,
.couple-copy .cc-title,
.countdown-title,
.finale-card h2,
.finale-card > p,
.cf-cap-line,
.cf-quote {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.hero-cinema .hc-center,
.opening-film .op-titles,
.finale-card {
  max-width: min(92vw, 980px);
}

.event-feature,
.countdown-grid,
.rsvp-actions,
.cf-meta {
  min-width: 0;
}

@media (max-width: 520px), (max-height: 700px) {
  .opening-film .op-titles h1,
  .hero-title h1,
  .hero-cinema .hc-title {
    font-size: clamp(2.45rem, min(14vw, 12svh), 4.8rem) !important;
    line-height: .88 !important;
  }

  .hero-cinema .hero-chrome {
    inset: clamp(14px, 5vw, 28px) !important;
  }

  .hero-cinema .hc-eye,
  .hero-cinema .hc-meta,
  .opening-film .op-titles .op-eye,
  .opening-film .op-titles .op-meta {
    letter-spacing: clamp(.14em, .9vw, .28em) !important;
    font-size: clamp(.58rem, 2.5vw, .72rem) !important;
  }

  .invite-scroll {
    min-height: auto !important;
    padding: clamp(36px, 8svh, 70px) clamp(16px, 5vw, 34px) !important;
  }

  .invite-scroll h2,
  .event-feature .copy-side h3,
  .couple-copy .cc-title,
  .finale-card h2 {
    font-size: clamp(2rem, min(11vw, 10svh), 3.7rem) !important;
    line-height: .95 !important;
  }

  .countdown-grid {
    gap: clamp(4px, 2vw, 8px) !important;
  }

  .finale-card {
    padding-inline: clamp(18px, 5vw, 36px) !important;
  }

  .rsvp-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .rsvp-btn {
    justify-content: center;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .film-nav {
    left: calc(24px + 27px) !important;
    bottom: calc(20px + var(--safe-bottom)) !important;
    gap: 0 !important;
    padding: 5px !important;
  }

  .film-nav a {
    display: none !important;
  }

  .film-nav .music-pill {
    display: inline-flex !important;
    width: 44px;
    min-height: 44px;
    padding: 0 !important;
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .finale-film {
    padding: 76px 72px 88px !important;
  }

  .finale-card {
    width: min(620px, 72vw) !important;
    padding: 42px 48px 34px !important;
    border-radius: 260px 260px 24px 24px !important;
  }

  .finale-card::before {
    inset: 14px !important;
    border-radius: 242px 242px 18px 18px !important;
  }

  .finale-moon {
    top: -38px !important;
    width: 76px !important;
    height: 76px !important;
  }

  .finale-card .eyebrow-line {
    margin-top: 30px !important;
  }

  .finale-card h2 {
    margin-top: 10px !important;
    font-size: clamp(2.5rem, 5vw, 4.3rem) !important;
    line-height: 0.94 !important;
  }

  .finale-card > p {
    max-width: 430px;
    margin-top: 12px !important;
    font-size: 0.92rem !important;
    line-height: 1.52 !important;
  }

  .finale-card .finale-date {
    margin-top: 14px !important;
    font-size: 1.45rem !important;
  }

  .finale-card .finale-venue-line {
    margin-top: 6px !important;
    gap: 10px !important;
  }

  .rsvp-actions {
    margin-top: 18px !important;
  }

  .rsvp-btn {
    min-height: 46px !important;
    padding: 0 22px !important;
  }

  .hashtag-line {
    margin-top: 18px !important;
  }
}

/* Moonlit Mehfil fit pass: keep the cinematic template usable on very small phones. */
@media (max-width: 620px) {
  .hero-cinema,
  .countdown-section,
  .invite-ritual,
  .events-film,
  .couple-film,
  .gallery-film,
  .finale-film {
    overflow-x: hidden;
  }

  .film-site,
  .scene-tunnel {
    overflow: visible !important;
  }

  .film-nav {
    width: min(calc(100vw - 12px), 520px) !important;
    max-width: none !important;
    gap: 1px !important;
    padding: 3px !important;
    bottom: calc(6px + var(--safe-bottom)) !important;
    overflow: hidden;
  }

  .film-nav a,
  .film-nav button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 2px !important;
    font-size: clamp(0.46rem, 2.2vw, 0.6rem) !important;
    letter-spacing: 0.045em !important;
    white-space: nowrap !important;
  }

  .film-nav .music-pill {
    flex: 0 0 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
  }

  [data-ea-music-control] {
    bottom: calc(6px + var(--moonlit-nav-height, 52px) + 10px + var(--safe-bottom)) !important;
  }

  .music-pill .bars {
    transform: scale(0.78);
  }

  .opening-film .op-rig {
    transform: translateX(-50%) scale(0.74) !important;
  }

  .opening-film .op-titles {
    top: 47% !important;
    width: min(260px, 88vw) !important;
  }

  .opening-film .op-titles h1 {
    font-size: clamp(2.2rem, min(12vw, 9.8svh), 3.9rem) !important;
    line-height: 0.9 !important;
  }

  .opening-film .op-titles .op-tag {
    font-size: clamp(1rem, 4.5vw, 1.35rem) !important;
  }

  .opening-film .op-titles .op-meta {
    margin-top: 8px !important;
    line-height: 1.45 !important;
  }

  .opening-film .op-instr {
    bottom: calc(50px + var(--safe-bottom)) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 7px 10px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  .opening-film .op-skip {
    bottom: calc(12px + var(--safe-bottom)) !important;
  }

  .hero-cinema .hero-chrome {
    inset: clamp(12px, 4vw, 22px) !important;
    padding-bottom: calc(68px + var(--safe-bottom)) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .hero-cinema .hc-center {
    gap: clamp(6px, 1.8svh, 12px) !important;
    width: min(260px, 90vw);
    margin: 0 auto;
  }

  .hero-cinema .hc-title {
    gap: 0.05em !important;
    font-size: clamp(2.15rem, min(12.5vw, 9.6svh), 4rem) !important;
    line-height: 0.92 !important;
  }

  .hero-cinema .hc-eye {
    gap: 8px !important;
    white-space: normal !important;
    justify-content: center;
  }

  .hero-cinema .hc-eye i {
    width: clamp(18px, 8vw, 30px) !important;
  }

  .hero-cinema .hc-tag {
    font-size: clamp(1rem, 5.4vw, 1.35rem) !important;
    line-height: 1.1 !important;
  }

  .hero-cinema .hc-meta {
    max-width: 240px;
    gap: 6px 10px !important;
    line-height: 1.45 !important;
  }

  .hero-cinema .hc-cue {
    margin-top: 0 !important;
    font-size: clamp(0.54rem, 2.35vw, 0.64rem) !important;
    letter-spacing: 0.18em !important;
  }

  .reel-copy {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(66px + var(--safe-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }

  .reel-copy .reel-num {
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.28em !important;
  }

  .reel-copy .reel-kicker {
    margin-bottom: 8px !important;
    font-size: clamp(1rem, 4.8vw, 1.28rem) !important;
  }

  .reel-copy h2 {
    font-size: clamp(1.65rem, min(9vw, 7svh), 2.45rem) !important;
    line-height: 0.95 !important;
  }

  .reel-copy .reel-body {
    margin-top: 12px !important;
    font-size: clamp(0.82rem, 3.4vw, 0.92rem) !important;
    line-height: 1.55 !important;
    max-width: none !important;
  }

  .reel-copy .reel-mood {
    margin-top: 10px !important;
  }

  .reel-copy .reel-mood em {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    padding: 5px 10px;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
  }

  .tunnel-meta {
    top: clamp(54px, 10svh, 76px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto;
  }

  .countdown-section {
    min-height: 100svh !important;
    padding: clamp(50px, 10svh, 76px) 12px calc(82px + var(--safe-bottom)) !important;
  }

  .countdown-content {
    max-width: 100%;
  }

  .cd-ornament-top {
    gap: 10px !important;
    margin-bottom: 8px !important;
  }

  .cd-ornament-top span {
    width: clamp(26px, 14vw, 54px) !important;
  }

  .countdown-title {
    margin: 6px 0 18px !important;
    font-size: clamp(1.55rem, min(8.2vw, 6svh), 2.28rem) !important;
    line-height: 1 !important;
  }

  .countdown-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(232px, 88vw);
    gap: 8px !important;
  }

  .cd-sep {
    display: none !important;
  }

  .cc-cell {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 6px 8px !important;
    border-radius: 12px !important;
  }

  .cc-cell .cc-corners {
    inset: 5px !important;
  }

  .cc-cell .cc-corners i {
    width: 7px !important;
    height: 7px !important;
  }

  .cc-cell .cc-seam {
    left: 10px !important;
    right: 10px !important;
  }

  .cc-slot {
    width: clamp(17px, 6.4vw, 24px) !important;
    height: clamp(30px, 10.8vw, 42px) !important;
  }

  .cc-digit {
    font-size: clamp(1.52rem, 8.2vw, 2.25rem) !important;
  }

  .cc-label {
    margin-top: 5px !important;
    font-size: 0.54rem !important;
    letter-spacing: 0.15em !important;
  }

  .countdown-date {
    margin-top: 14px !important;
    gap: 7px !important;
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
  }

  .invite-ritual {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: clamp(18px, 4svh, 30px) !important;
    padding: clamp(48px, 9svh, 74px) 12px calc(82px + var(--safe-bottom)) !important;
  }

  .lamp-orbit {
    min-height: clamp(214px, 40svh, 300px) !important;
  }

  .lamp-orbit::before {
    width: min(270px, 74vw) !important;
  }

  .lamp-orbit::after {
    width: min(196px, 56vw) !important;
  }

  .lamp-button {
    gap: 12px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
  }

  .lamp-button::before {
    height: clamp(58px, 14svh, 92px) !important;
  }

  .lamp-button .lamp-orb-img {
    width: clamp(106px, 34vw, 142px) !important;
    height: auto !important;
    max-height: clamp(180px, 38svh, 238px) !important;
    object-fit: contain;
  }

  .lamp-button .lamp-glow {
    width: clamp(190px, 66vw, 252px) !important;
    height: clamp(190px, 66vw, 252px) !important;
    margin: calc(clamp(190px, 66vw, 252px) / -2) 0 0 calc(clamp(190px, 66vw, 252px) / -2) !important;
  }

  .invite-ritual.is-lit {
    gap: 10px !important;
  }

  .invite-ritual.is-lit .lamp-orbit {
    min-height: clamp(158px, 32svh, 228px) !important;
  }

  .invite-ritual.is-lit .lamp-orbit::before {
    width: min(220px, 64vw) !important;
  }

  .invite-ritual.is-lit .lamp-orbit::after {
    width: min(158px, 46vw) !important;
  }

  .invite-ritual.is-lit .lamp-button {
    gap: 6px !important;
  }

  .invite-ritual.is-lit .lamp-button::before {
    height: clamp(38px, 9svh, 66px) !important;
  }

  .invite-ritual.is-lit .lamp-button .lamp-orb-img {
    width: clamp(82px, 28vw, 116px) !important;
    max-height: clamp(140px, 28svh, 194px) !important;
  }

  .invite-prehint {
    padding: 12px 14px !important;
    max-width: min(250px, 88vw) !important;
  }

  .invite-prehint strong {
    font-size: 0.66rem !important;
    letter-spacing: 0.18em !important;
  }

  .invite-prehint span {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  .invite-scroll {
    width: min(360px, 92vw) !important;
    min-height: auto !important;
    padding: clamp(30px, 6svh, 42px) clamp(16px, 5vw, 24px) 28px !important;
    border-radius: 180px 180px 22px 22px !important;
  }

  .invite-scroll::before {
    inset: 12px !important;
    border-radius: 166px 166px 16px 16px !important;
  }

  .invite-scroll::after {
    top: 21px !important;
    width: 18px !important;
    height: 18px !important;
  }

  .invite-scroll .is-crescent {
    top: 16px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .invite-scroll .is-arch {
    left: 14px !important;
    right: 14px !important;
    top: 60px !important;
    width: calc(100% - 28px) !important;
    height: 66% !important;
  }

  .invite-scroll .eyebrow {
    margin-top: 54px !important;
    font-size: clamp(0.52rem, 2.35vw, 0.62rem) !important;
    letter-spacing: 0.18em !important;
    line-height: 1.45 !important;
  }

  .invite-scroll .eyebrow.eyebrow-ornate {
    gap: 6px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .invite-scroll .eyebrow-flourish {
    width: clamp(20px, 8vw, 34px) !important;
  }

  .invite-scroll h2 {
    margin-top: 8px !important;
    font-size: clamp(1.95rem, min(10vw, 8svh), 3rem) !important;
    line-height: 0.98 !important;
  }

  .invite-scroll p {
    margin: 10px auto !important;
    font-size: clamp(0.8rem, 3.2vw, 0.9rem) !important;
    line-height: 1.52 !important;
  }

  .invite-scroll .scroll-detail {
    font-size: clamp(1.05rem, 5vw, 1.38rem) !important;
  }

  .date-seal {
    width: clamp(92px, 31vw, 118px) !important;
    margin: 14px auto 12px !important;
  }

  .date-seal strong {
    font-size: clamp(2.18rem, 12vw, 2.8rem) !important;
  }

  .date-seal span {
    font-size: 0.54rem !important;
    letter-spacing: 0.16em !important;
  }

  .scratch-card {
    width: min(250px, 82vw) !important;
    min-height: 104px !important;
  }

  .scratch-card .is-revealed-content strong {
    font-size: clamp(2.55rem, 14vw, 3.35rem) !important;
  }

  .scratch-card .is-revealed-content span {
    font-size: clamp(0.68rem, 3vw, 0.86rem) !important;
    letter-spacing: 0.22em !important;
  }

  .events-film {
    min-height: auto !important;
    padding: clamp(54px, 9svh, 76px) 12px calc(84px + var(--safe-bottom)) !important;
  }

  .section-intro {
    margin-bottom: clamp(24px, 5svh, 36px) !important;
    max-width: min(92vw, 620px);
  }

  .section-intro h2 {
    margin-top: 10px !important;
    font-size: clamp(1.75rem, min(9vw, 6.5svh), 2.55rem) !important;
    line-height: 1 !important;
  }

  .section-intro > p:not(.eyebrow) {
    margin-top: 10px !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
  }

  .events-stage {
    gap: 16px !important;
  }

  .event-tabs {
    display: grid !important;
    grid-template-columns: 1fr;
    width: min(252px, 88vw);
    margin-inline: auto;
    gap: 7px !important;
  }

  .event-pill {
    justify-content: flex-start !important;
    width: 100%;
    min-height: 38px !important;
    padding: 0 12px !important;
    gap: 9px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.04em;
  }

  .event-pill .date {
    font-size: 0.76rem !important;
    min-width: 34px;
  }

  .event-pill .nm {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .event-feature-shell,
  .event-feature {
    min-height: auto !important;
  }

  .event-feature {
    border-radius: 18px !important;
  }

  .event-feature .img-side {
    min-height: clamp(164px, 32svh, 230px) !important;
  }

  .event-feature .img-side .img-tag {
    left: 16px !important;
    top: 14px !important;
  }

  .event-feature .copy-side {
    padding: 20px 16px !important;
    gap: 9px !important;
  }

  .event-feature .copy-side .when {
    font-size: clamp(0.9rem, 4.2vw, 1.08rem) !important;
  }

  .event-feature .copy-side h3 {
    font-size: clamp(1.55rem, min(8vw, 6svh), 2.28rem) !important;
    line-height: 1 !important;
  }

  .event-feature .copy-side .desc {
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
  }

  .event-feature .copy-side .where {
    margin-top: 6px !important;
    gap: 7px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
  }

  .event-feature .copy-side .where-map {
    padding: 5px 9px !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.12em !important;
  }

  .event-counter {
    margin-top: 12px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.14em !important;
  }

  .event-counter .arrows button {
    width: 36px !important;
    height: 36px !important;
  }

  .couple-film.cf-v2.is-mobile .cf-pin {
    padding: clamp(58px, 10svh, 78px) 12px 32px !important;
  }

  .cf-header {
    width: min(92vw, 420px) !important;
  }

  .cf-eyebrow {
    gap: 8px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.22em !important;
    line-height: 1.4 !important;
  }

  .cf-eyebrow i {
    width: 22px !important;
  }

  .cf-cap-line {
    font-size: clamp(1.28rem, 7vw, 1.7rem) !important;
    line-height: 1.05 !important;
  }

  .cf-mobile-foot {
    padding: 28px 14px calc(76px + var(--safe-bottom)) !important;
  }

  .cf-quote {
    padding: 0 12px !important;
    font-size: clamp(0.9rem, 3.6vw, 1.02rem) !important;
    line-height: 1.55 !important;
  }

  .cf-meta {
    gap: 6px 10px !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.18em !important;
  }

  .gallery-film {
    min-height: auto !important;
    padding: clamp(56px, 9svh, 76px) 0 calc(88px + var(--safe-bottom)) !important;
  }

  .gallery-film .section-intro {
    padding-inline: 12px !important;
  }

  .gallery-stage {
    height: clamp(300px, 50svh, 430px) !important;
    margin-top: 20px !important;
  }

  .gallery-stage .gallery-card {
    width: clamp(190px, 70vw, 285px) !important;
    height: clamp(270px, 88vw, 390px) !important;
    margin-left: calc(clamp(190px, 70vw, 285px) / -2) !important;
    margin-top: calc(clamp(270px, 88vw, 390px) / -2) !important;
  }

  .gallery-controls {
    bottom: calc(52px + var(--safe-bottom)) !important;
    gap: 10px !important;
  }

  .gallery-controls button {
    width: 40px !important;
    height: 40px !important;
  }

  .gallery-controls .pos {
    min-width: 52px !important;
  }

  .finale-film {
    min-height: 100svh !important;
    align-items: start !important;
    padding: clamp(72px, 12svh, 104px) 10px calc(84px + var(--safe-bottom)) !important;
  }

  .finale-card {
    width: min(360px, 92vw) !important;
    padding: clamp(34px, 6svh, 44px) 16px 22px !important;
    border-radius: 190px 190px 18px 18px !important;
  }

  .finale-card::before {
    inset: 10px !important;
    border-radius: 178px 178px 12px 12px !important;
  }

  .finale-moon {
    top: -36px !important;
    width: 72px !important;
    height: 72px !important;
  }

  .finale-card .eyebrow-line {
    margin-top: 34px !important;
  }

  .finale-card h2 {
    margin-top: 10px !important;
    font-size: clamp(1.8rem, min(9.8vw, 7.2svh), 2.85rem) !important;
    line-height: 0.98 !important;
  }

  .finale-card > p {
    margin-top: 10px !important;
    font-size: clamp(0.8rem, 3.2vw, 0.9rem) !important;
    line-height: 1.5 !important;
  }

  .finale-card .finale-date {
    margin-top: 12px !important;
    font-size: clamp(1.1rem, 5vw, 1.42rem) !important;
  }

  .finale-card .finale-venue-line {
    gap: 7px !important;
    margin-top: 6px !important;
  }

  .finale-card .finale-venue-line > span {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }

  .finale-map-link {
    padding: 5px 9px !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.12em !important;
  }

  .rsvp-actions {
    gap: 8px !important;
    margin-top: 16px !important;
  }

  .rsvp-btn {
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 0.72rem !important;
  }

  .hashtag-line {
    margin-top: 18px !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.18em !important;
    line-height: 1.4 !important;
  }

  .finale-credits {
    bottom: calc(54px + var(--safe-bottom)) !important;
    padding: 0 12px;
    font-size: 0.52rem !important;
    letter-spacing: 0.16em !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 340px), (max-height: 620px) {
  .film-nav {
    width: calc(100vw - 8px) !important;
    padding: 2px !important;
    bottom: calc(4px + var(--safe-bottom)) !important;
  }

  .film-nav a,
  .film-nav button {
    min-height: 44px !important;
    font-size: clamp(0.44rem, 2.05vw, 0.56rem) !important;
    letter-spacing: 0.025em !important;
  }

  .film-nav .music-pill {
    flex-basis: 44px !important;
  }

  .opening-film .op-rig {
    transform: translateX(-50%) scale(0.64) !important;
  }

  .opening-film .op-titles {
    top: 45% !important;
  }

  .opening-film .op-titles h1,
  .hero-cinema .hc-title {
    font-size: clamp(1.95rem, min(11.4vw, 8.4svh), 3.3rem) !important;
  }

  .opening-film .op-instr {
    bottom: calc(42px + var(--safe-bottom)) !important;
    font-size: 0.54rem !important;
    letter-spacing: 0.11em !important;
  }

  .hero-cinema .hc-tag,
  .invite-scroll .scroll-detail {
    display: none !important;
  }

  .hero-cinema .hc-diyas {
    gap: 12px !important;
    margin-top: 0 !important;
  }

  .hero-cinema .hc-cue {
    display: none !important;
  }

  .countdown-section {
    padding-top: 42px !important;
    padding-bottom: calc(70px + var(--safe-bottom)) !important;
  }

  .countdown-title {
    font-size: clamp(1.35rem, min(7.6vw, 5.6svh), 1.9rem) !important;
    margin-bottom: 14px !important;
  }

  .countdown-grid {
    width: min(214px, 90vw);
    gap: 6px !important;
  }

  .cc-cell {
    padding: 8px 5px 7px !important;
  }

  .cc-slot {
    height: clamp(27px, 9.6vw, 36px) !important;
  }

  .cc-digit {
    font-size: clamp(1.35rem, 7.4vw, 1.95rem) !important;
  }

  .countdown-date {
    font-size: 0.68rem !important;
  }

  .invite-ritual {
    padding-top: 42px !important;
    gap: 14px !important;
  }

  .lamp-orbit {
    min-height: clamp(178px, 34svh, 230px) !important;
  }

  .lamp-button .lamp-orb-img {
    width: clamp(92px, 31vw, 120px) !important;
    max-height: clamp(156px, 32svh, 204px) !important;
  }

  .lamp-button .lamp-glow {
    width: 184px !important;
    height: 184px !important;
    margin: -92px 0 0 -92px !important;
  }

  .invite-ritual.is-lit .lamp-orbit {
    min-height: clamp(128px, 27svh, 178px) !important;
  }

  .invite-ritual.is-lit .lamp-orbit::before {
    width: min(176px, 58vw) !important;
  }

  .invite-ritual.is-lit .lamp-orbit::after {
    width: min(126px, 42vw) !important;
  }

  .invite-ritual.is-lit .lamp-button::before {
    height: clamp(26px, 7svh, 46px) !important;
  }

  .invite-ritual.is-lit .lamp-button .lamp-orb-img {
    width: clamp(64px, 23vw, 92px) !important;
    max-height: clamp(108px, 22svh, 156px) !important;
  }

  .invite-ritual.is-lit .invite-scroll {
    padding: 22px 12px 18px !important;
  }

  .invite-ritual.is-lit .invite-scroll .is-crescent {
    top: 13px !important;
    width: 30px !important;
    height: 30px !important;
  }

  .invite-ritual.is-lit .invite-scroll .is-arch {
    top: 48px !important;
    height: 58% !important;
  }

  .invite-ritual.is-lit .invite-scroll .eyebrow {
    margin-top: 36px !important;
    font-size: 0.46rem !important;
    letter-spacing: 0.12em !important;
  }

  .invite-ritual.is-lit .invite-scroll h2 {
    margin-top: 5px !important;
    font-size: clamp(1.36rem, 7.6vw, 1.9rem) !important;
  }

  .invite-ritual.is-lit .invite-scroll p {
    margin: 6px auto !important;
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
  }

  .invite-ritual.is-lit .invite-scroll .is-venue {
    order: 19;
    max-width: 210px;
    margin: 4px auto 6px !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  .invite-ritual.is-lit .invite-scroll .is-venue-glyph {
    margin: 0 4px !important;
  }

  .invite-ritual.is-lit .invite-scratch-wrap {
    order: 20;
  }

  .invite-ritual.is-lit .invite-scratch-wrap .is-hint {
    margin: 4px auto 5px !important;
    font-size: 0.66rem !important;
    line-height: 1.2 !important;
  }

  .invite-ritual.is-lit .scratch-card {
    width: min(212px, 76vw) !important;
    min-height: 82px !important;
  }

  .invite-ritual.is-lit .scratch-card .is-revealed-content {
    gap: 4px !important;
  }

  .invite-ritual.is-lit .scratch-card .is-revealed-content strong {
    font-size: 2rem !important;
  }

  .invite-ritual.is-lit .scratch-card .is-revealed-content span {
    font-size: 0.6rem !important;
    letter-spacing: 0.16em !important;
  }

  .invite-ritual.is-lit .scratch-skip-link {
    display: none !important;
  }

  .invite-scroll {
    padding: 27px 14px 22px !important;
  }

  .invite-scroll .is-crescent {
    width: 36px !important;
    height: 36px !important;
  }

  .invite-scroll .eyebrow {
    margin-top: 46px !important;
  }

  .invite-scroll h2,
  .event-feature .copy-side h3,
  .finale-card h2 {
    font-size: clamp(1.55rem, min(8.4vw, 6.4svh), 2.32rem) !important;
  }

  .invite-scroll p,
  .event-feature .copy-side .desc,
  .finale-card > p {
    font-size: 0.76rem !important;
    line-height: 1.43 !important;
  }

  .date-seal {
    width: 82px !important;
    margin: 10px auto 8px !important;
  }

  .date-seal strong {
    font-size: 2rem !important;
  }

  .scratch-card {
    min-height: 92px !important;
  }

  .events-film,
  .gallery-film {
    padding-top: 48px !important;
  }

  .section-intro h2 {
    font-size: clamp(1.45rem, min(8vw, 5.8svh), 2.08rem) !important;
  }

  .section-intro > p:not(.eyebrow) {
    font-size: 0.78rem !important;
  }

  .event-tabs {
    width: min(230px, 90vw);
  }

  .event-pill {
    min-height: 34px !important;
    font-size: 0.56rem !important;
  }

  .event-feature .img-side {
    min-height: clamp(132px, 27svh, 184px) !important;
  }

  .event-feature .copy-side {
    padding: 16px 14px !important;
  }

  .cf-bignum {
    font-size: clamp(6rem, 32vw, 10rem) !important;
  }

  .gallery-stage {
    height: clamp(260px, 44svh, 360px) !important;
  }

  .gallery-stage .gallery-card {
    width: clamp(172px, 66vw, 240px) !important;
    height: clamp(242px, 82vw, 330px) !important;
    margin-left: calc(clamp(172px, 66vw, 240px) / -2) !important;
    margin-top: calc(clamp(242px, 82vw, 330px) / -2) !important;
  }

  .finale-film {
    padding-top: 62px !important;
    padding-bottom: calc(76px + var(--safe-bottom)) !important;
  }

  .finale-card {
    padding: 30px 14px 18px !important;
  }

  .finale-moon {
    width: 62px !important;
    height: 62px !important;
    top: -31px !important;
  }

  .finale-card .eyebrow-line {
    margin-top: 30px !important;
  }

  .finale-card .finale-date,
  .hashtag-line {
    margin-top: 10px !important;
  }

  .rsvp-actions {
    margin-top: 12px !important;
  }

  .rsvp-btn {
    min-height: 38px !important;
  }

  .finale-credits {
    display: none !important;
  }
}

/* Moonlit invitation composition refresh. */
.invite-scroll {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(560px, 92vw);
  min-height: clamp(560px, 78svh, 700px);
  padding: clamp(54px, 7vw, 78px) clamp(34px, 7vw, 72px) 46px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,253,224,0.96), rgba(255,242,188,0.76) 30%, transparent 44%),
    radial-gradient(ellipse at 50% 72%, rgba(151,85,33,0.18), transparent 62%),
    repeating-linear-gradient(45deg, rgba(110,26,50,0.026) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-45deg, rgba(212,164,55,0.035) 0 1px, transparent 1px 32px),
    linear-gradient(180deg, #fff5ca 0%, #f7dea0 56%, #d49b4e 100%);
  box-shadow:
    0 52px 140px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,249,218,0.72),
    inset 0 -28px 46px rgba(115,54,24,0.12);
}

.invite-scroll::before {
  inset: 20px;
  border-color: rgba(110,26,50,0.22);
  box-shadow:
    inset 0 0 0 1px rgba(212,164,55,0.24),
    inset 0 0 34px rgba(255,248,211,0.35);
}

.invite-scroll::after {
  top: 30px;
  width: 30px;
  height: 30px;
  background:
    radial-gradient(circle, rgba(255,250,218,0.52), rgba(212,164,55,0.18) 48%, transparent 72%);
}

.invite-scroll .eyebrow.eyebrow-ornate {
  margin-top: 18px;
  max-width: min(100%, 440px);
  gap: 10px;
}

.invite-scroll .eyebrow {
  font-size: clamp(0.58rem, 1.25vw, 0.68rem);
  letter-spacing: 0.18em;
  line-height: 1.35;
}

.invite-scroll h2 {
  max-width: 100%;
  margin: 10px 0 0;
  font-size: clamp(2.35rem, min(6.1vw, 7.2svh), 4.85rem);
  line-height: 0.95;
  text-wrap: balance;
  text-shadow: 0 10px 26px rgba(105,62,22,0.1);
}

.invite-scroll .is-invite-line {
  position: relative;
  z-index: 2;
  max-width: 380px;
  margin: 10px auto 0 !important;
  color: rgba(75,38,23,0.76);
  font-family: var(--display);
  font-size: clamp(0.86rem, 1.75vw, 1.04rem);
  font-style: italic;
  line-height: 1.45;
}

.invite-scroll .is-ornament-divider {
  margin: 13px 0 12px;
}

.invite-scratch-wrap {
  margin-top: 0;
}

.scratch-card.is-revealed {
  width: clamp(230px, 70%, 310px);
  aspect-ratio: 2.24;
  min-height: 108px;
  border-color: rgba(110,26,50,0.28);
  background:
    radial-gradient(circle at 50% 34%, rgba(255,252,229,0.98), rgba(248,226,166,0.9) 50%, rgba(214,152,68,0.76) 100%),
    linear-gradient(135deg, #fff7d5, #e7b85e);
  box-shadow:
    0 14px 30px rgba(93,50,18,0.22),
    inset 0 0 0 1px rgba(255,250,220,0.9),
    inset 0 0 0 7px rgba(110,26,50,0.055);
}

.scratch-card.is-revealed::after {
  opacity: 0.32;
}

.scratch-card .is-revealed-content {
  gap: 3px;
}

.scratch-card .is-revealed-content .date-eyebrow,
.scratch-card .is-revealed-content .date-note {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.scratch-card .is-revealed-content .date-eyebrow {
  color: rgba(110,26,50,0.78);
  font-size: clamp(0.5rem, 1.2vw, 0.58rem);
  letter-spacing: 0.24em;
}

.scratch-card .is-revealed-content strong {
  margin-top: 1px;
  font-size: clamp(2.75rem, 7vw, 3.8rem);
  line-height: 0.86;
}

.scratch-card .is-revealed-content .date-month {
  color: #6e1a32;
  font-family: var(--sans);
  font-size: clamp(0.66rem, 1.45vw, 0.86rem);
  font-weight: 900;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}

.scratch-card .is-revealed-content .date-note {
  margin-top: 2px;
  color: rgba(78,40,22,0.62);
  font-size: clamp(0.44rem, 1vw, 0.52rem);
  letter-spacing: 0.18em;
}

.invite-scroll .is-venue {
  display: block;
  width: min(100%, 342px);
  margin: 13px auto 0 !important;
  padding: 9px 14px;
  border: 1px solid rgba(110,26,50,0.16);
  border-radius: 18px;
  background: rgba(255,248,215,0.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
  color: #5b1e2d;
  font-family: var(--display);
  font-size: clamp(0.82rem, 1.6vw, 0.98rem);
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.invite-scroll .is-venue-kicker {
  display: block;
  margin-bottom: 3px;
  color: rgba(151,91,31,0.82);
  font-family: var(--sans);
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
}

.invite-scroll .is-venue-glyph {
  display: none !important;
}

@media (max-width: 620px) {
  .invite-scroll {
    width: min(360px, 92vw) !important;
    min-height: auto !important;
    padding: clamp(36px, 5.4svh, 48px) clamp(18px, 5vw, 26px) 20px !important;
    border-radius: 180px 180px 24px 24px !important;
  }

  .invite-scroll::before {
    inset: 12px !important;
    border-radius: 166px 166px 17px 17px !important;
  }

  .invite-scroll::after {
    top: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }

  .invite-scroll .eyebrow {
    margin-top: 44px !important;
    font-size: clamp(0.48rem, 2.1vw, 0.58rem) !important;
    letter-spacing: 0.15em !important;
  }

  .invite-scroll .eyebrow.eyebrow-ornate {
    gap: 6px !important;
  }

  .invite-scroll h2 {
    margin-top: 7px !important;
    font-size: clamp(1.9rem, min(9.3vw, 6.6svh), 2.85rem) !important;
  }

  .invite-scroll .is-invite-line {
    max-width: 260px;
    margin: 7px auto 0 !important;
    font-size: clamp(0.72rem, 2.9vw, 0.84rem) !important;
    line-height: 1.34 !important;
  }

  .invite-scroll .is-ornament-divider {
    margin: 8px 0 10px !important;
    gap: 10px !important;
  }

  .invite-scroll .is-ornament-divider .odv-line {
    width: 40px !important;
  }

  .invite-scratch-wrap {
    width: min(100%, 280px) !important;
  }

  .scratch-card,
  .scratch-card.is-revealed {
    width: min(246px, 80vw) !important;
    min-height: 90px !important;
    aspect-ratio: 2.2 !important;
  }

  .scratch-card .is-revealed-content strong {
    font-size: clamp(2.3rem, 12vw, 3.1rem) !important;
  }

  .scratch-card .is-revealed-content .date-eyebrow {
    font-size: 0.48rem !important;
  }

  .scratch-card .is-revealed-content .date-month {
    font-size: clamp(0.6rem, 2.7vw, 0.74rem) !important;
    letter-spacing: 0.18em !important;
  }

  .scratch-card .is-revealed-content .date-note {
    font-size: 0.42rem !important;
  }

  .invite-scroll .is-venue {
    width: min(100%, 278px) !important;
    margin: 8px auto 0 !important;
    padding: 8px 12px !important;
    font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
    line-height: 1.25 !important;
  }

  .invite-blessed {
    display: none !important;
  }
}

@media (max-width: 340px), (max-height: 620px) {
  .invite-ritual.is-lit .invite-scroll {
    padding: 25px 12px 20px !important;
  }

  .invite-ritual.is-lit .invite-scroll .eyebrow {
    margin-top: 34px !important;
    font-size: 0.44rem !important;
    letter-spacing: 0.11em !important;
  }

  .invite-ritual.is-lit .invite-scroll h2 {
    margin-top: 4px !important;
    font-size: clamp(1.32rem, 7.1vw, 1.82rem) !important;
  }

  .invite-ritual.is-lit .invite-scroll .is-invite-line {
    max-width: 206px;
    margin-top: 4px !important;
    font-size: 0.62rem !important;
    line-height: 1.24 !important;
  }

  .invite-ritual.is-lit .invite-scroll .is-ornament-divider {
    margin: 5px 0 6px !important;
  }

  .invite-ritual.is-lit .invite-scratch-wrap {
    order: 19 !important;
  }

  .invite-ritual.is-lit .scratch-card,
  .invite-ritual.is-lit .scratch-card.is-revealed {
    width: min(208px, 76vw) !important;
    min-height: 78px !important;
  }

  .invite-ritual.is-lit .scratch-card .is-revealed-content strong {
    font-size: 1.9rem !important;
  }

  .invite-ritual.is-lit .scratch-card .is-revealed-content .date-eyebrow {
    font-size: 0.42rem !important;
    letter-spacing: 0.18em !important;
  }

  .invite-ritual.is-lit .scratch-card .is-revealed-content .date-month {
    font-size: 0.56rem !important;
    letter-spacing: 0.14em !important;
  }

  .invite-ritual.is-lit .scratch-card .is-revealed-content .date-note {
    display: none !important;
  }

  .invite-ritual.is-lit .invite-scroll .is-venue {
    order: 20 !important;
    width: min(214px, 80vw) !important;
    margin: 6px auto 0 !important;
    padding: 6px 8px !important;
    font-size: 0.63rem !important;
  }

  .invite-ritual.is-lit .invite-scroll .is-venue-kicker {
    margin-bottom: 2px !important;
    font-size: 0.42rem !important;
    letter-spacing: 0.18em !important;
  }
}