/* ══════════════════════════════════════════════════════════════════════
   Arjun & Shweta — wedding invitation
   Plain CSS, no build step. Sections are ordered the same way as index.html.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Colour */
  --ink:        #25070c;
  --maroon:     #4a0d16;
  --maroon-2:   #6b1220;
  --sindoor:    #b3141f;
  --gold:       #d8b04a;
  --gold-lt:    #f6e3a8;
  --gold-dp:    #9c7420;
  --marigold:   #e8871e;
  --ivory:      #f7efe1;
  --cream:      #efe5d4;
  --text:       #3a3028;

  /* Type */
  --display: "Cormorant Garamond", Georgia, serif;
  --caps:    "Marcellus", Georgia, serif;
  --body:    "DM Sans", system-ui, sans-serif;
  --nagari:  "Tiro Devanagari Sanskrit", "Nirmala UI", serif;

  /* A gold-leaf gradient, reused for text and rules */
  --foil: linear-gradient(100deg,
    var(--gold-dp) 0%, var(--gold) 16%, var(--gold-lt) 30%,
    #fffaea 39%, var(--gold-lt) 48%, var(--gold) 64%, var(--gold-dp) 100%);
}

* { box-sizing: border-box; }

/* Component rules below set display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--body);
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

img { display: block; max-width: 100%; }

/* Paper grain over everything */
.grain {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* ── Shared type ─────────────────────────────────────────────────────── */

.eyebrow, .section-kicker, .label, .event-type, .event-meta span, .gate-kicker {
  font-family: var(--caps);
  font-size: 11px;
  letter-spacing: .3em;
  font-weight: 400;
}

.devanagari { font-family: var(--nagari); }

/* Gold-leaf text with a slow shimmer sweep */
.foil {
  background: var(--foil);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foil-sweep 9s linear infinite;
}
@keyframes foil-sweep {
  from { background-position: 0% 50%; }
  to   { background-position: 260% 50%; }
}

.names, .cd-unit b, .event-number, .event-copy h3, .detail-grid strong,
.date, .final-date, .gate-names {
  font-variant-numeric: lining-nums tabular-nums;
}

.divider { display: block; width: min(440px, 78%); margin: 44px auto 0; color: var(--gold-dp); opacity: .8; }

/* ══════════════════════════════════════════════════════════════════════
   1. THE TEMPLE GATE
   ══════════════════════════════════════════════════════════════════════ */

.gate { display: none; }

.no-js .gate { display: none !important; }

.js .gate {
  display: block;
  position: fixed; inset: 0; z-index: 90;
  background: radial-gradient(ellipse at 50% 42%, #5c1420 0%, #2c0810 55%, #16040a 100%);
  overflow: hidden;
}

/* Warm sanctum light that grows as the doors part */
.gate-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(255, 216, 140, .95), rgba(232, 135, 30, .35) 40%, transparent 72%);
  opacity: 0; transform: scale(.6);
  transition: opacity 1.6s ease .5s, transform 2.6s ease .3s;
}
.gate.is-open .gate-glow { opacity: 1; transform: scale(1.5); }

/* ── The doors ───────────────────────────────────────────────────────── */

.gate-doors {
  position: absolute; inset: 0;
  perspective: 1900px;
  perspective-origin: 50% 46%;
}

.door {
  position: absolute; top: 0; bottom: 0;
  width: 50.4%;
  backface-visibility: hidden;
  transition: transform 2.3s cubic-bezier(.42, 0, .18, 1);
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.20) 0 3px, rgba(255,225,180,.035) 3px 9px),
    linear-gradient(100deg, #40160f 0%, #29090b 44%, #3a1310 78%, #200708 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.75);
}
.door-l { left: 0;  transform-origin: left center;  border-right: 2px solid rgba(0,0,0,.6); }
.door-r { right: 0; transform-origin: right center; border-left:  2px solid rgba(0,0,0,.6); }

.gate.is-open .door-l { transform: rotateY(-112deg); }
.gate.is-open .door-r { transform: rotateY( 112deg); }

/* Gold frame + jaali corner brackets */
.door::before {
  content: ""; position: absolute; inset: 18px;
  border: 1px solid rgba(216, 176, 74, .55);
  outline: 4px solid rgba(216, 176, 74, .12);
  outline-offset: 4px;
  pointer-events: none;
}
/* Pierced gold jaali running down the meeting stile, as on a temple door */
.door::after {
  content: ""; position: absolute; top: 18px; bottom: 18px;
  width: 26px; pointer-events: none; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 52'%3E%3Cg fill='none' stroke='%23d8b04a' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M13 2 C21 8 21 18 13 24 C5 18 5 8 13 2Z'/%3E%3Cpath d='M13 28 C21 34 21 44 13 50 C5 44 5 34 13 28Z'/%3E%3Ccircle cx='13' cy='26' r='2.2'/%3E%3Cpath d='M2 0 V52 M24 0 V52' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") repeat-y center / 26px 52px;
}
.door-l::after { right: 20px; }
.door-r::after { left: 20px; }

.door-face { position: absolute; inset: 46px 62px 22% 40px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 20px; }
.door-r .door-face { inset: 46px 40px 22% 62px; }

.door-panel {
  position: relative;
  border: 1px solid rgba(216, 176, 74, .28);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cg fill='none' stroke='%23c9a34a' stroke-width='2' stroke-linejoin='round' opacity='.62'%3E%3Cpath d='M50 16 C76 16 88 33 88 56 V126 H12 V56 C12 33 24 16 50 16Z'/%3E%3Cpath d='M50 32 C68 32 76 45 76 60 V112 H24 V60 C24 45 32 32 50 32Z'/%3E%3Cpath d='M50 50 C59 50 64 59 64 68 C64 81 50 90 50 90 C50 90 36 81 36 68 C36 59 41 50 50 50Z'/%3E%3Cpath d='M50 90 V112'/%3E%3Ccircle cx='50' cy='68' r='4'/%3E%3C/g%3E%3C/svg%3E") center / 62% auto no-repeat,
    linear-gradient(160deg, rgba(255,220,170,.06), rgba(0,0,0,.45));
  box-shadow: inset 0 0 22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,220,170,.08);
}

/* Brass-studded belt across the middle of each door */
.door-belt {
  position: absolute; left: 18px; right: 18px; top: 84%;
  height: 30px; margin-top: -15px;
  background:
    radial-gradient(circle at 15px 15px, rgba(240,212,147,.85) 0 3.2px, rgba(90,64,16,.9) 3.6px, transparent 4.2px) 0 0 / 30px 30px,
    linear-gradient(180deg, rgba(178,138,56,.9), rgba(88,62,16,.95));
  border-top: 1px solid rgba(255, 236, 190, .32);
  border-bottom: 1px solid rgba(0,0,0,.45);
  box-shadow: 0 3px 14px rgba(0,0,0,.5);
}

/* Brass pull-rings, mounted either side of the join */
.door-handle {
  position: absolute; top: 84%; margin-top: -27px;
  width: 54px; height: 54px; border-radius: 50%;
  border: 6px solid rgba(216, 176, 74, .9);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6), inset 0 2px 4px rgba(255, 240, 200, .5);
}
.door-l .door-handle { right: 6px; }
.door-r .door-handle { left: 6px; }

/* Torana arch across the top of the doorway */
.gate-torana {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1180px, 128vw); color: var(--gold);
  opacity: 0; filter: drop-shadow(0 0 14px rgba(216,176,74,.45));
  animation: torana-in 2s ease .3s forwards;
}
@keyframes torana-in { to { opacity: .85; } }
.gate.is-open .gate-torana { opacity: 0; transition: opacity .7s ease; }

/* The mandala seal that draws itself across the join */
.gate-seal {
  position: absolute; top: 50%; left: 50%;
  width: min(740px, 98vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--gold-lt);
  filter: drop-shadow(0 0 18px rgba(246, 227, 168, .55));
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: seal-draw 3.4s ease-out .45s forwards, seal-spin 90s linear infinite;
}
@keyframes seal-draw { to { stroke-dashoffset: 0; } }
@keyframes seal-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.gate.is-open .gate-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(2.4);
  transition: opacity .9s ease, transform 1.4s cubic-bezier(.4, 0, .2, 1);
}

/* ── Gate copy + button ──────────────────────────────────────────────── */

.gate-ui {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 30px 24px;
  color: var(--gold-lt);
  transition: opacity .6s ease, transform .8s ease;
}
.gate.is-open .gate-ui { opacity: 0; transform: translateY(-24px); pointer-events: none; }

/* Pool of shadow behind the copy — the mandala still glows around its edge */
.gate-ui::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(860px, 104vw); height: min(700px, 92vh);
  background: radial-gradient(ellipse at center,
    rgba(14, 3, 6, .93) 0%, rgba(14, 3, 6, .88) 38%,
    rgba(14, 3, 6, .55) 62%, rgba(14, 3, 6, 0) 78%);
  pointer-events: none;
}

.gate-ui > * { animation: rise-in 1.2s cubic-bezier(.2,.7,.2,1) both; }
.gate-shloka  { animation-delay: .5s; }
.gate-om      { animation-delay: .7s; }
.gate-kicker  { animation-delay: .9s; }
.gate-names   { animation-delay: 1.05s; }
.gate-btn     { animation-delay: 1.3s; }
.gate-note    { animation-delay: 1.5s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.gate-shloka {
  font-family: var(--nagari);
  font-size: clamp(15px, 2.4vw, 21px);
  letter-spacing: .04em;
  margin: 0 0 6px;
  color: var(--gold-lt);
  text-shadow: 0 0 22px rgba(246, 227, 168, .45);
}

/* The couple's own monogram, sitting straight on the maroon */
.gate-logo {
  width: clamp(88px, 11vw, 128px); height: auto;
  margin: 16px auto 26px;
  filter: drop-shadow(0 0 26px rgba(216, 176, 74, .35));
}

.gate-kicker { margin: 0 0 14px; opacity: .8; }

/* Arjun (5 letters) and Shweta (6) have different widths, so simply centring
   the line leaves the ampersand left of the mandala's centre. balanceNames()
   in script.js measures the two and gives the shorter one a matching min-width,
   which pins the "&" to the true centre without stretching anything. */
.gate-names, .names, .finale h2 {
  display: flex; align-items: baseline; justify-content: center;
}
.gate-names > span, .names > span, .finale h2 > span { flex: 0 0 auto; }
.gate-names > i, .names > i, .finale h2 > i { flex: none; }

.gate-names {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 7.2vw, 84px);
  line-height: 1;
  gap: clamp(10px, 2vw, 22px);
  margin: 0 0 calc(42px - .3em);
  padding-bottom: .3em;
  background: var(--foil); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise-in 1.2s cubic-bezier(.2,.7,.2,1) both 1.05s, foil-sweep 9s linear infinite;
}
.gate-names i { font-size: .42em; font-style: italic; color: var(--gold); }

.gate-btn {
  position: relative;
  appearance: none; cursor: pointer;
  background: transparent;
  border: 1px solid rgba(216, 176, 74, .8);
  color: var(--gold-lt);
  font-family: var(--caps);
  font-size: 12px; letter-spacing: .26em;
  padding: 20px 42px;
  border-radius: 999px;
  overflow: hidden;
  transition: color .4s ease, border-color .4s ease, transform .3s ease;
}
.gate-btn:hover { color: var(--ink); border-color: var(--gold-lt); transform: translateY(-2px); }
.gate-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--foil); background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.6,0,.2,1);
}
.gate-btn:hover::before { transform: scaleX(1); }
.gate-btn-label { position: relative; z-index: 1; }

/* Breathing ring around the button */
.gate-btn-ring {
  position: absolute; inset: -1px; border-radius: 999px;
  border: 1px solid rgba(246, 227, 168, .5);
  animation: pulse-ring 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

.gate-note {
  margin: 22px 0 0;
  font-size: 10px; letter-spacing: .22em;
  opacity: .55; text-transform: uppercase;
}

/* Curtain-fall once the doors are wide open */
.gate.is-gone { opacity: 0; pointer-events: none; transition: opacity .9s ease; }

/* ══════════════════════════════════════════════════════════════════════
   2. MUSIC BUTTON
   ══════════════════════════════════════════════════════════════════════ */

.music-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  border: 1px solid rgba(216, 176, 74, .75);
  background: rgba(37, 7, 12, .82);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.music-btn:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(216, 176, 74, .35); }

.eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq i {
  display: block; width: 3px; border-radius: 2px;
  background: var(--gold-lt);
  transition: height .3s ease;
}
/* At rest the bars sit at mixed heights so the icon still reads as sound. */
.eq i:nth-child(1) { height: 7px; }
.eq i:nth-child(2) { height: 14px; }
.eq i:nth-child(3) { height: 9px; }
.eq i:nth-child(4) { height: 16px; }
.music-btn[aria-pressed="true"] .eq i { animation: eq-bounce .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .15s; }
.eq i:nth-child(3) { animation-delay: .3s; }
.eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq-bounce {
  0%, 100% { height: 5px; }
  50%      { height: 17px; }
}
/* Muted state: a slash through the bars */
.music-btn[aria-pressed="false"]::after {
  content: ""; position: absolute;
  width: 30px; height: 1px; background: var(--gold-lt);
  transform: rotate(-45deg); opacity: .85;
}

/* ══════════════════════════════════════════════════════════════════════
   3. HERO
   ══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
}

.hero-bg {
  position: absolute; inset: -8% 0;
  background: url("assets/images/diyas-dark.jpg") center / cover no-repeat;
  animation: ken-burns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ken-burns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(-1.5%, -1.5%, 0); }
}

.hero-veil {
  position: absolute; inset: 0;
  background:
    /* tight pool over the copy — kills the flame hotspot behind the names */
    radial-gradient(ellipse 42% 34% at 50% 47%,
      rgba(18, 4, 8, .82) 0%, rgba(18, 4, 8, .66) 48%, rgba(18, 4, 8, 0) 76%),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(37, 7, 12, .40), rgba(21, 4, 8, .88) 75%),
    linear-gradient(180deg, rgba(21, 4, 8, .8) 0%, transparent 28%, transparent 62%, rgba(21, 4, 8, .95) 100%);
}

.petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero-mandala {
  position: absolute; top: 50%; left: 50%;
  width: min(1150px, 134vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--gold);
  opacity: .13;
  animation: slow-spin 140s linear infinite;
}
@keyframes slow-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Marigold strands hanging from the top corners */
.garland {
  position: absolute; top: -8px;
  width: clamp(128px, 17vw, 220px);
  color: var(--marigold);
  opacity: .92;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
  transform-origin: top center;
  animation: sway 7s ease-in-out infinite;
}
.garland-l { left: -10px; }
.garland-r { right: -14px; transform: scaleX(-1); animation-name: sway-mirror; animation-delay: -2.4s; }

@keyframes sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}
@keyframes sway-mirror {
  0%, 100% { transform: scaleX(-1) rotate(-1.6deg); }
  50%      { transform: scaleX(-1) rotate(1.6deg); }
}
/* Stagger the individual strands so the garland breathes */
.gl-strand { animation: strand-drift 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); transform-origin: top center; }
@keyframes strand-drift {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}

.hero-inner {
  position: relative; z-index: 3;
  text-align: center;
  padding: 90px 20px 120px;
  width: 100%;
  max-width: 940px;
}

.hero-shloka {
  font-size: clamp(14px, 2vw, 18px);
  color: var(--gold-lt);
  margin: 0 0 26px;
  opacity: .9;
  text-shadow: 0 0 20px rgba(246, 227, 168, .35);
}

.eyebrow { margin-bottom: 26px; color: var(--gold); opacity: .95; }

.monogram {
  display: block; height: auto;
  width: clamp(74px, 8vw, 104px);
  margin: 0 auto 22px;
  filter: drop-shadow(0 0 22px rgba(216, 176, 74, .3));
}

.invite-line {
  font-size: 13px; letter-spacing: .04em;
  max-width: 430px; margin: 0 auto 22px;
  line-height: 1.9; opacity: .85;
}

.names {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(58px, 11vw, 128px);
  line-height: .8;
  margin: 22px 0 calc(30px - .32em);
  padding-bottom: .32em;
  display: flex; justify-content: center; align-items: center;
  gap: clamp(14px, 3vw, 30px);
  background: var(--foil); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil-sweep 9s linear infinite;
  filter: drop-shadow(0 4px 26px rgba(216, 176, 74, .28));
}
.names span:first-child { font-style: italic; }
.names span:last-child  { font-weight: 600; }
.names i, .finale h2 i  { font-size: .38em; font-weight: 400; color: var(--gold-lt); }

.date-rule { display: flex; align-items: center; justify-content: center; gap: 20px; }
.date-rule .rule {
  height: 1px; width: clamp(30px, 9vw, 110px);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.date-rule .rule:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.date { letter-spacing: .34em; font-size: 13px; color: var(--gold-lt); margin: 0; }
.date b { margin: 0 8px; font-weight: 400; opacity: .6; }

/* ── Countdown ───────────────────────────────────────────────────────── */

.countdown {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 26px);
  margin-top: 46px;
}
.cd-unit {
  min-width: 84px; padding: 16px 10px 13px;
  border: 1px solid rgba(216, 176, 74, .35);
  background: rgba(37, 7, 12, .35);
  backdrop-filter: blur(3px);
  position: relative;
}
.cd-unit::before, .cd-unit::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  border: 1px solid var(--gold); opacity: .8;
}
.cd-unit::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cd-unit::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.cd-unit b {
  display: block;
  font-family: var(--caps);
  font-size: clamp(26px, 4.2vw, 38px);
  line-height: 1;
  color: var(--gold-lt);
}
.cd-unit span {
  display: block; margin-top: 8px;
  font-family: var(--caps);
  font-size: 9px; letter-spacing: .22em;
  opacity: .65;
}

.cd-today {
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 44px);
  font-style: italic;
  color: var(--gold-lt);
  margin: 0;
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  color: var(--gold-lt); text-decoration: none;
  font-family: var(--caps);
  font-size: 9px; letter-spacing: .24em;
  opacity: .8; z-index: 3;
}
.scroll-cue span { display: block; font-size: 20px; margin-top: 8px; animation: nudge 2s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0);   opacity: .5; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   4. SECTIONS ON PAPER
   ══════════════════════════════════════════════════════════════════════ */

.section { padding: 130px 7vw; max-width: 1100px; margin: auto; }
.intro { text-align: center; max-width: 800px; }
.section-kicker { margin-bottom: 24px; color: var(--gold-dp); }

.section h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(46px, 7vw, 84px);
  line-height: .98;
  margin: 0 0 30px;
  color: var(--maroon);
}
.section h2 em { font-weight: 400; color: var(--sindoor); }

.intro p, .muted { max-width: 620px; margin: auto; line-height: 1.95; font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════════
   5. FAMILIES
   ══════════════════════════════════════════════════════════════════════ */

.family-strip {
  position: relative; overflow: hidden;
  padding: 100px 7vw;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(179, 20, 31, .35), transparent 62%),
    linear-gradient(180deg, var(--maroon) 0%, var(--ink) 100%);
  color: var(--ivory);
  text-align: center;
}
.family-mandala {
  position: absolute; top: 50%; left: 50%;
  width: min(720px, 110vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--gold); opacity: .09;
  animation: slow-spin 180s linear infinite reverse;
}
.family-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 34px;
}
.family-card h3 {
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight: 500;
  margin: 14px 0 calc(16px - .22em);
  padding-bottom: .22em;
  background: var(--foil); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil-sweep 11s linear infinite;
}
.family-card p { font-size: 12.5px; line-height: 1.9; margin: 5px auto; max-width: 350px; }
.family-card p b { font-weight: 500; color: var(--gold-lt); }
.family-card .small { opacity: .6; font-size: 10.5px; margin-top: 12px; }
.family-card .small + .small { margin-top: 3px; }   /* sibling + grandparents read as one group */
.label { opacity: .7; color: var(--gold); }

.ampersand { display: grid; justify-items: center; }
.ampersand img {
  width: clamp(76px, 8vw, 108px); height: auto;
  filter: drop-shadow(0 0 24px rgba(216, 176, 74, .28));
}

/* ══════════════════════════════════════════════════════════════════════
   6. EVENTS
   ══════════════════════════════════════════════════════════════════════ */

.events { max-width: 1200px; }
.events > h2 { text-align: center; }
.events > .section-kicker { text-align: center; }
.events > .divider { margin-bottom: 80px; }

.event-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(30px, 6vw, 80px);
  margin-bottom: 110px;
}
.event-card.reverse { direction: rtl; }
.event-card.reverse > * { direction: ltr; }

.event-photo {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.event-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .8s ease;
  filter: saturate(1.05) contrast(1.03);
}
.event-photo:hover img { transform: scale(1.07); }

/* Gold corner frame that draws in on hover */
.photo-frame {
  position: absolute; inset: 14px;
  pointer-events: none;
  border: 1px solid rgba(246, 227, 168, .55);
  box-shadow: 0 0 0 1px rgba(37, 7, 12, .25);
  transition: inset .6s cubic-bezier(.2,.7,.2,1), border-color .6s ease;
}
.event-photo:hover .photo-frame { inset: 22px; border-color: var(--gold-lt); }

.event-copy { padding: 10px 0; }
.event-number {
  font-family: var(--caps);
  font-size: 52px; line-height: 1;
  color: var(--gold-dp); opacity: .35;
  margin-bottom: 6px;
}
.event-type { color: var(--sindoor); margin: 0 0 12px; }
.event-copy h3 {
  font-family: var(--display);
  font-size: clamp(36px, 4.6vw, 52px);
  font-weight: 500; margin: 0 0 14px;
  color: var(--maroon);
}
.event-copy p:not(.event-type) { max-width: 430px; line-height: 1.85; font-size: 13.5px; margin: 0; }

.event-meta { display: flex; gap: 16px; margin-top: 26px; align-items: baseline; }
.event-meta + .event-meta { margin-top: 10px; }   /* venue sits under the date */
.event-meta span { opacity: .55; flex: none; width: 46px; }
.event-meta strong {
  font-size: 11px; letter-spacing: .18em; font-weight: 500;
  padding-left: 18px; position: relative;
  max-width: 34ch; line-height: 1.7;
}
/* A venue is prose, not a code — letterspacing hurts it */
.event-meta strong[data-name$="Venue"] { letter-spacing: .04em; font-size: 12px; }
.event-meta strong::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1px; background: var(--gold-dp);
}

/* ══════════════════════════════════════════════════════════════════════
   7. MARIGOLD BAND
   ══════════════════════════════════════════════════════════════════════ */

.band { position: relative; height: 46vh; min-height: 280px; overflow: hidden; }
.band-img {
  position: absolute; inset: -14% 0;
  background: url("assets/images/marigold.jpg") center / cover no-repeat;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.band-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(239, 229, 212, .95) 0%, rgba(239, 229, 212, .1) 22%,
                            rgba(37, 7, 12, .18) 70%, rgba(74, 13, 22, .82) 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   10. DETAILS
   ══════════════════════════════════════════════════════════════════════ */

.details { text-align: center; }

.detail-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 60px;
  border-top: 1px solid rgba(156, 116, 32, .35);
  border-bottom: 1px solid rgba(156, 116, 32, .35);
}
.detail-grid div {
  padding: 38px 20px;
  border-right: 1px solid rgba(156, 116, 32, .28);
}
.detail-grid div:last-child { border-right: 0; }
.detail-grid span {
  display: block; font-family: var(--caps);
  font-size: 9.5px; letter-spacing: .26em; opacity: .6; margin-bottom: 12px;
}
.detail-grid strong { font-family: var(--display); font-size: 28px; font-weight: 500; color: var(--maroon); }

.actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 54px; }
.btn {
  font-family: var(--caps); font-size: 11px; letter-spacing: .24em;
  padding: 18px 36px; border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid {
  border: 1px solid transparent;
  background: linear-gradient(120deg, var(--maroon), var(--sindoor));
  color: var(--gold-lt);
  box-shadow: 0 8px 24px rgba(74, 13, 22, .28);
}
.btn-solid:hover { box-shadow: 0 12px 30px rgba(74, 13, 22, .38); }
.btn-ghost { border: 1px solid rgba(156, 116, 32, .7); color: var(--maroon); background: transparent; }
.btn-ghost:hover { background: rgba(216, 176, 74, .15); }

.actions-note { font-size: 11.5px; opacity: .7; margin-top: 22px; text-align: center; line-height: 1.9; }

.cal-heading {
  text-align: center; margin: 0 0 22px;
  font-family: var(--caps);
  font-size: 10px; letter-spacing: .28em;
  color: var(--gold-dp);
}
.cal-actions { margin-top: 0; }
.cal-actions .btn { padding: 15px 28px; font-size: 10.5px; }
.actions-note a {
  color: var(--maroon);
  border-bottom: 1px solid rgba(156, 116, 32, .5);
  text-decoration: none;
}
.actions-note a:hover { color: var(--sindoor); border-bottom-color: var(--sindoor); }

.btn {
  font-family: var(--caps); font-size: 11px; letter-spacing: .24em;
  padding: 18px 36px; border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid {
  border: 1px solid transparent;
  background: linear-gradient(120deg, var(--maroon), var(--sindoor));
  color: var(--gold-lt);
  box-shadow: 0 8px 24px rgba(74, 13, 22, .28);
}
.btn-solid:hover { box-shadow: 0 12px 30px rgba(74, 13, 22, .38); }
.btn-ghost { border: 1px solid rgba(156, 116, 32, .7); color: var(--maroon); background: transparent; }
.btn-ghost:hover { background: rgba(216, 176, 74, .15); }

.actions-note { font-size: 11.5px; opacity: .7; margin-top: 22px; text-align: center; line-height: 1.9; }

.cal-links {
  text-align: center; margin-top: 18px;
  font-size: 11.5px; letter-spacing: .04em;
}
.cal-links span { opacity: .55; margin-right: 6px; }
.cal-links a {
  color: var(--maroon); text-decoration: none;
  border-bottom: 1px solid rgba(156, 116, 32, .5);
  margin: 0 7px; padding-bottom: 1px;
  display: inline-block;
}
.cal-links a:hover { color: var(--sindoor); border-bottom-color: var(--sindoor); }

/* ══════════════════════════════════════════════════════════════════════
   11. FINALE
   ══════════════════════════════════════════════════════════════════════ */

.finale {
  position: relative; overflow: hidden;
  min-height: 96svh;
  display: grid; place-items: center;
  text-align: center;
  background: var(--ink);
  color: var(--ivory);
}
.finale-bg {
  position: absolute; inset: -10% 0;
  background: url("assets/images/diyas-dark.jpg") center / cover no-repeat;
  transform: scaleX(-1) translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.finale-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 50% 42%,
      rgba(16, 3, 7, .7) 0%, rgba(16, 3, 7, .45) 50%, rgba(16, 3, 7, 0) 78%),
    radial-gradient(ellipse 65% 55% at 50% 55%, rgba(37, 7, 12, .5), rgba(16, 3, 7, .93) 78%),
    linear-gradient(180deg, rgba(74, 13, 22, .9) 0%, transparent 30%);
}
.finale-torana {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1080px, 124vw); color: var(--gold); opacity: .35;
}
.finale-inner { position: relative; z-index: 2; width: 100%; padding: 120px 22px; }

.finale h2 {
  font-family: var(--display);
  font-size: clamp(58px, 11vw, 132px);
  font-weight: 500; line-height: .85;
  margin: 30px 0 calc(30px - .3em);
  padding-bottom: .3em;
  background: var(--foil); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil-sweep 9s linear infinite;
}
.finale-logo {
  width: clamp(96px, 12vw, 140px); height: auto;
  margin: 0 auto 30px;
  filter: drop-shadow(0 0 30px rgba(216, 176, 74, .3));
}

.final-date { font-family: var(--caps); font-size: 11px; letter-spacing: .36em; color: var(--gold-lt); }

/* Row of little clay lamps with live flames */
.diyas { display: flex; justify-content: center; gap: 34px; margin: 58px 0 48px; }
.diya {
  position: relative;
  width: 56px; height: 21px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(180deg, #b4703c, #6d3c1c);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .55), inset 0 2px 3px rgba(255, 210, 160, .35);
}
.diya::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #8a4f24, #cf8a4d, #8a4f24);
}
.flame {
  position: absolute; left: 50%; bottom: 17px;
  width: 15px; height: 31px;
  margin-left: -7.5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 78%, #fff6d0 0%, #ffd166 38%, #f08a1d 68%, rgba(240, 100, 20, 0) 100%);
  box-shadow: 0 0 20px 6px rgba(255, 176, 62, .55), 0 0 46px 16px rgba(240, 130, 30, .28);
  transform-origin: 50% 100%;
  animation: flicker 1.6s ease-in-out infinite;
}
.diya:nth-child(2) .flame { animation-delay: -.4s; animation-duration: 1.9s; }
.diya:nth-child(3) .flame { animation-delay: -.9s; animation-duration: 1.4s; }
.diya:nth-child(4) .flame { animation-delay: -1.3s; animation-duration: 2.1s; }
.diya:nth-child(5) .flame { animation-delay: -.6s; animation-duration: 1.7s; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1)       rotate(-2deg); opacity: .95; }
  35%      { transform: scale(.92, 1.14)  rotate(2.5deg); opacity: 1; }
  65%      { transform: scale(1.06, .93)  rotate(-1.5deg); opacity: .88; }
}

.blessing { font-family: var(--display); font-size: 21px; font-style: italic; opacity: .85; }

/* The couple's hashtag, set like a line of gold leaf */
.hashtag {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin: 34px 0 0;
}
.hashtag b {
  font-family: var(--caps);
  font-size: clamp(13px, 1.8vw, 17px);
  font-weight: 400; letter-spacing: .18em;
  background: var(--foil); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil-sweep 9s linear infinite;
  padding-bottom: .12em;
}
.hash-rule {
  height: 1px; width: clamp(26px, 7vw, 74px);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hash-rule:last-child { background: linear-gradient(90deg, var(--gold), transparent); }

/* The hashtag set small under a monogram */
.tag-line {
  font-family: var(--caps);
  font-size: clamp(9px, 1.1vw, 11px);
  letter-spacing: .26em;
  color: var(--gold);
  margin: -8px 0 24px;
  opacity: .85;
}

.footer-made { max-width: 40ch; margin: 0 auto 10px !important; line-height: 1.8; }

.footer-tag {
  font-family: var(--caps);
  font-size: 11px; letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 14px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */

footer {
  padding: 46px 24px 34px;
  text-align: center;
  background: #150307;
  color: #b39c86;
  font-size: 9.5px; letter-spacing: .12em;
}
footer p { margin: 8px; }
footer a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(216, 176, 74, .35); }
footer a:hover { color: var(--gold-lt); }
.footer-lotus { width: 76px; margin: 0 auto 22px; color: var(--gold-dp); opacity: .6; display: block; }

/* ══════════════════════════════════════════════════════════════════════
   SCRATCH CARDS
   ══════════════════════════════════════════════════════════════════════ */

.scratch-section { text-align: center; }

.scratch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 44px);
  margin-top: 58px;
}

.scratch-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(170deg, #fffaf0, #ede0c8);
  box-shadow: 0 14px 40px rgba(74, 13, 22, .14);
  outline: 1px solid rgba(156, 116, 32, .45);
}
.scratch-card:focus-visible { outline: 2px solid var(--gold-dp); outline-offset: 3px; }

.scratch-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 30px 24px; text-align: center;
}

.scratch-photo {
  width: clamp(96px, 15vw, 140px); aspect-ratio: 1;
  border-radius: 50%;
  margin-bottom: 22px;
  display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #6b1220, var(--maroon));
  border: 1px solid rgba(216, 176, 74, .8);
  box-shadow: 0 0 0 5px rgba(216, 176, 74, .16);
}
.scratch-photo img { width: 100%; height: 100%; object-fit: cover; }
.scratch-mono {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 58px);
  color: var(--gold-lt);
}

.scratch-card .label { color: var(--gold-dp); }
.scratch-card h3 {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500; margin: 10px 0 12px;
  color: var(--maroon);
}
.scratch-line {
  font-size: 13px; line-height: 1.8;
  max-width: 34ch; margin: 0 0 18px;
}
.scratch-facts { list-style: none; margin: 0; padding: 0; }
.scratch-facts li {
  font-size: 11.5px; line-height: 1.6;
  padding: 6px 0 6px 20px;
  position: relative; text-align: left;
  opacity: .85;
}
.scratch-facts li::before {
  content: "✦"; position: absolute; left: 0; top: 5px;
  color: var(--gold-dp); font-size: 10px;
}

/* <canvas> is a replaced element: inset:0 alone leaves it at its intrinsic 300x150. */
.scratch-foil {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  touch-action: none;          /* let us scratch instead of scrolling the page */
  transition: opacity .7s ease;
}
.scratch-foil:active { cursor: grabbing; }

.scratch-hint {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--caps);
  font-size: 12px; letter-spacing: .3em;
  color: rgba(43, 17, 5, .65);
  transition: opacity .4s ease;
}
.scratch-hint.is-away { opacity: 0; }

.scratch-card.is-revealed .scratch-foil,
.scratch-card.is-revealed .scratch-hint { opacity: 0; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════
   SHARED FORM CONTROLS
   ══════════════════════════════════════════════════════════════════════ */

.quiz-form label,
.rsvp-form label:not(.pill) { display: block; text-align: left; }

.quiz-form label > span,
.rsvp-form label:not(.pill) > span,
.rsvp-form legend {
  display: block;
  font-family: var(--caps);
  font-size: 9.5px; letter-spacing: .26em;
  opacity: .7; margin-bottom: 9px;
}

.quiz-form input,
.rsvp-form input:not([type="radio"]):not([type="checkbox"]),
.rsvp-form textarea {
  width: 100%;
  font-family: var(--body); font-size: 14px;
  padding: 14px 16px;
  color: inherit;
  background: rgba(255, 250, 238, .06);
  border: 1px solid rgba(216, 176, 74, .45);
  border-radius: 3px;
  transition: border-color .25s ease, background .25s ease;
}
.rsvp-form input:not([type="radio"]):not([type="checkbox"]),
.rsvp-form textarea { background: rgba(74, 13, 22, .03); }

.quiz-form input:focus,
.rsvp-form input:focus,
.rsvp-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(216, 176, 74, .12);
}
.quiz-form input::placeholder,
.rsvp-form ::placeholder { color: currentColor; opacity: .35; }
.rsvp-form textarea { resize: vertical; }

/* Radio / checkbox pills */
.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
  display: inline-block; cursor: pointer;
  font-size: 12px; letter-spacing: .04em;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(216, 176, 74, .45);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.pill input:checked + span {
  background: linear-gradient(120deg, var(--maroon), var(--sindoor));
  border-color: transparent; color: var(--gold-lt);
}
.pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

 /* Bot honeypot: off-screen rather than display:none, which some bots skip. */
.trap {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.quiz-error {
  font-size: 12px; color: #ffb4a8;
  margin: 4px 0 0; text-align: left;
}
.details .quiz-error, .rsvp-section  /* Bot honeypot: off-screen rather than display:none, which some bots skip. */
.trap {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.quiz-error { color: var(--sindoor); }

/* ══════════════════════════════════════════════════════════════════════
   THE QUIZ
   ══════════════════════════════════════════════════════════════════════ */

.quiz-section {
  position: relative; overflow: hidden;
  padding: 120px 7vw;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(179, 20, 31, .3), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--maroon) 100%);
  color: var(--ivory);
  text-align: center;
}
.quiz-mandala {
  position: absolute; top: 50%; left: 50%;
  width: min(760px, 118vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--gold); opacity: .07;
  animation: slow-spin 170s linear infinite;
}
.quiz-inner { position: relative; z-index: 2; max-width: 660px; margin: auto; }

.quiz-section .section-kicker { color: var(--gold); }
.quiz-section h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1; margin: 0 0 26px;
  color: var(--ivory);
}
.quiz-section h2 em { color: var(--gold-lt); font-weight: 400; }

.quiz-lead { font-size: 13.5px; opacity: .8; margin: 0 0 34px; }

.quiz-form { display: grid; gap: 20px; text-align: left; }
.quiz-form .btn { justify-self: center; margin-top: 6px; border: 0; }
.quiz-played { font-size: 11px; letter-spacing: .14em; opacity: .55; margin-top: 26px; }

/* ── Question head: counter + ring timer ── */
.quiz-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.quiz-progress { font-family: var(--caps); font-size: 10px; letter-spacing: .24em; opacity: .7; margin: 0; }
.quiz-progress b { color: var(--gold-lt); font-weight: 400; }

.quiz-timer { position: relative; width: 44px; height: 44px; }
.quiz-timer svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.quiz-timer circle { fill: none; stroke-width: 2.5; }
.t-track { stroke: rgba(216, 176, 74, .22); }
.t-bar { stroke: var(--gold-lt); stroke-linecap: round; }
.quiz-timer b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--caps); font-size: 15px;
  color: var(--gold-lt);
}
.quiz-timer.is-low .t-bar { stroke: #ff8577; }
.quiz-timer.is-low b { color: #ff8577; animation: pulse-num .6s ease-in-out infinite; }
@keyframes pulse-num { 50% { transform: scale(1.16); } }

.quiz-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; }
.quiz-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(246, 227, 168, .22);
  transition: background .3s ease, transform .3s ease;
}
.quiz-dots span.is-now   { background: var(--gold-lt); transform: scale(1.45); }
.quiz-dots span.is-right { background: #64c88a; }
.quiz-dots span.is-wrong { background: #e0685c; }

.quiz-q {
  font-family: var(--display);
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 500; line-height: 1.25;
  margin: 0 0 30px;
  color: var(--gold-lt);
}

.quiz-options { display: grid; gap: 11px; }
.quiz-option {
  display: flex; align-items: center; gap: 14px;
  width: 100%; cursor: pointer; text-align: left;
  padding: 15px 18px;
  font-family: var(--body); font-size: 14px;
  color: var(--ivory);
  background: rgba(255, 250, 238, .05);
  border: 1px solid rgba(216, 176, 74, .35);
  border-radius: 3px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.quiz-option:hover:not(:disabled) {
  background: rgba(216, 176, 74, .14);
  border-color: var(--gold);
  transform: translateX(3px);
}
.quiz-option:disabled { cursor: default; }
.quiz-option i {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--caps); font-style: normal; font-size: 11px;
  border: 1px solid rgba(216, 176, 74, .5);
  color: var(--gold-lt);
}
.quiz-option.is-right {
  background: rgba(100, 200, 138, .18);
  border-color: #64c88a;
}
.quiz-option.is-right i { border-color: #64c88a; color: #9ae4b5; }
.quiz-option.is-wrong {
  background: rgba(224, 104, 92, .16);
  border-color: #e0685c;
}
.quiz-option.is-wrong i { border-color: #e0685c; color: #ffa79c; }

/* ── Score ── */
.quiz-score {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin-bottom: 14px;
}
.quiz-score b {
  font-family: var(--display);
  font-size: clamp(70px, 12vw, 116px);
  font-weight: 500; line-height: 1;
  font-variant-numeric: lining-nums;
  background: var(--foil); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil-sweep 9s linear infinite;
}
.quiz-score span { font-family: var(--caps); font-size: 20px; opacity: .55; }
.quiz-score i { font-style: normal; }

.quiz-verdict {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 500; font-style: italic;
  margin: 0 0 18px; color: var(--gold-lt);
}

/* .btn-ghost is maroon-on-cream by default, which disappears on this panel. */
.quiz-section .btn-ghost { color: var(--gold-lt); border-color: rgba(216, 176, 74, .6); }
.quiz-section .btn-ghost:hover { background: rgba(216, 176, 74, .18); color: #fffaea; }

.quiz-review { font-size: 12.5px; line-height: 1.85; opacity: .7; margin: 0 auto 24px; max-width: 46ch; }
.quiz-saved { font-size: 11px; letter-spacing: .14em; opacity: .55; margin: 0 0 26px; }

/* ══════════════════════════════════════════════════════════════════════
   RSVP
   ══════════════════════════════════════════════════════════════════════ */

.rsvp-section { padding: 20px 7vw 130px; }
.rsvp-inner {
  max-width: 720px; margin: auto;
  padding: clamp(32px, 5vw, 60px);
  text-align: center;
  background: linear-gradient(170deg, #fdf6e8, #f0e5d0);
  border: 1px solid rgba(156, 116, 32, .4);
  box-shadow: 0 20px 60px rgba(74, 13, 22, .12);
  position: relative;
}
.rsvp-inner::before, .rsvp-inner::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--gold-dp); opacity: .7;
}
.rsvp-inner::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.rsvp-inner::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.rsvp-section h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 5.5vw, 62px);
  line-height: 1; margin: 0 0 22px;
  color: var(--maroon);
}
.rsvp-section h2 em { color: var(--sindoor); font-weight: 400; }

.rsvp-form { display: grid; gap: 24px; margin-top: 10px; }
.rsvp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rsvp-when { grid-template-columns: 160px 1fr; }

.rsvp-form fieldset { border: 0; margin: 0; padding: 0; text-align: left; }
.rsvp-choice, .rsvp-events { display: flex; flex-wrap: wrap; gap: 10px; }
.rsvp-choice legend, .rsvp-events legend { width: 100%; }

.rsvp-form .actions { margin-top: 4px; }
.rsvp-form .btn-solid { border: 0; }

.rsvp-thanks { padding: 20px 0 6px; }
.thanks-mark {
  font-size: 34px; color: var(--gold-dp);
  animation: pulse-ring 2.6s ease-out infinite;
}
.rsvp-thanks h3 {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 500; margin: 12px 0 12px;
  color: var(--maroon);
}
.rsvp-thanks p { font-size: 13.5px; line-height: 1.85; max-width: 42ch; margin: 0 auto 26px; }

/* ══════════════════════════════════════════════════════════════════════
   SCROLL REVEALS
   ══════════════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.reveal.show { opacity: 1; transform: none; }

/* Without JavaScript nothing would ever be revealed, so show it all up front. */
.no-js .reveal { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .event-card { grid-template-columns: 1fr; gap: 26px; margin-bottom: 84px; }
  .event-card.reverse { direction: ltr; }
  .event-number { font-size: 40px; }
}

@media (max-width: 700px) {
  .section { padding: 90px 22px; }

  .scratch-grid { grid-template-columns: 1fr; gap: 22px; }
  .scratch-card { aspect-ratio: 4 / 5; }

  .quiz-section { padding: 90px 22px; }
  .quiz-q { font-size: 22px; }
  .quiz-option { font-size: 13px; padding: 13px 14px; gap: 11px; }

  .rsvp-section { padding: 10px 18px 100px; }
  .rsvp-inner { padding: 30px 20px; }
  .rsvp-row, .rsvp-when { grid-template-columns: 1fr; }

  .door-face { inset: 30px 46px 24% 16px; grid-template-columns: 1fr; gap: 14px; }
  .door-r .door-face { inset: 30px 16px 24% 46px; }
  .door-panel:nth-child(n+4) { display: none; }
  .door::after { width: 20px; background-size: 20px 40px; }
  .door-l::after { right: 14px; }
  .door-r::after { left: 14px; }
  .door-belt { height: 22px; margin-top: -11px; background-size: 22px 22px; }
  .door-handle { width: 42px; height: 42px; margin-top: -24px; border-width: 4px; }
  .door-l .door-handle { right: 18px; }
  .door-r .door-handle { left: 18px; }
  .gate-logo { width: 78px; }

  .garland { width: 96px; opacity: .8; }
  .hero-inner { padding: 80px 18px 130px; }
  .names { font-size: 66px; gap: 12px; flex-wrap: wrap; }
  /* No room for equal halves on a phone — go back to plain centring */
  .gate-names, .names, .finale h2 { flex-wrap: wrap; }
  .countdown { gap: 8px; }
  .cd-unit { min-width: 68px; padding: 12px 6px 10px; }

  .family-inner { grid-template-columns: 1fr; gap: 18px; }
  .ampersand img { width: 72px; }

  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid div { border-right: 0; border-bottom: 1px solid rgba(156, 116, 32, .28); }
  .detail-grid div:last-child { border-bottom: 0; }

  .diyas { gap: 14px; }
  .music-btn { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION — keep the beauty, drop the movement
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .hero-bg, .band-img, .finale-bg { animation: none; transform: none; }
  .petals { display: none; }
  .gate-seal { stroke-dashoffset: 0; }
  .gate-torana { opacity: .85; }
}