/* ==========================================================================
   Bid & Nash · शुभ विवाह
   Envelope page: sindoor red, maroon, temple gold, ivory.
   Main page: one of the palettes below (set `palette` in js/config.js).
   ========================================================================== */

:root {
  --sindoor: #B3121F;
  --maroon: #5E0B15;
  --maroon-deep: #3B0710;
  --marigold: #F4A300;
  --saffron: #E8700F;
  --gold: #D4AF37;
  --gold-soft: #EBD38C;
  --ivory: #FFF8EC;
  --cream: #FAEBD3;
  --mehendi: #56772B;
  --white: #FFFDF8;

  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-script: 'Great Vibes', 'Cormorant Garamond', cursive;
  --f-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-deva: 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', 'Kohinoor Devanagari', serif;

  --nav-h: 64px;
  --lane-h: 66px;
  --radius: 18px;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

/* ---------- Colour tokens ----------
   The envelope page (.gate) uses this base set (sindoor & maroon), so the
   envelope stays red. The main page uses one of the two palettes below:
   Botanical (Option 3) or Pearl Silk (Option 4). Pick one in js/config.js
   (`palette`), or preview with ?palette=botanical / ?palette=silk  */
:root, .gate {
  /* base: sindoor & maroon (envelope page) */
  --deep-a: #4A0912; --deep-b: #5E0B15; --deep-c: #3B0710; --deep-d: #2A050B;
  --deep-rgb: 59, 7, 16; --night-rgb: 30, 3, 7;
  --glow-rgb: 179, 18, 31;
  --head: #5E0B15; --head-rgb: 94, 11, 21;
  --accent: #B3121F; --accent-rgb: 179, 18, 31;
  --hi: #F4A300; --hi-rgb: 244, 163, 0;
  --kick: #E8700F;
  --bg: #FFF8EC; --bg-2: #FAEBD3; --bg-3: #F7E2C2; --card: #FFFDF8;
  --ink: #2E1A12; --ink-soft: #6B4E3D;
  --line: rgba(var(--head-rgb), .14);
  --shadow: 0 18px 40px -22px rgba(var(--deep-rgb), .45);
  --surf-rgb: 59, 7, 16; --lane-a-rgb: 42, 5, 11; --lane-b-rgb: 30, 3, 7;
  --on-surf: #FFF8EC; --on-surf-rgb: 255, 248, 236; --on-surf-soft: #EBD38C; --on-surf-soft-rgb: 235, 211, 140;
  --name-a: #FFF3C8; --name-b: #EAC66A; --name-c: #C3902A; --name-foot: #D4AF37;
  --names-shadow: drop-shadow(0 6px 24px rgba(0, 0, 0, .45));
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01));
  --btn-bg: linear-gradient(135deg, #FBE29A 0%, #E2BC55 45%, #B98A1E 100%); --btn-ink: #3B0710; --btn-glow-rgb: 212, 175, 55;
  --step-bg: #F4A300; --step-ink: #3B0710; --rsvp-card: #FFF8EC;
}
/* The two palettes. Text on the "deep" surfaces is dark (--on-surf). */
/* Pearl Silk (Option 4): off-white #F9F9FB, slate / midnight blue #1E293B,
   crimson #990000 used sparingly (only the couple's names and the dates),
   with an ultra-thin red line-art Panas lamp and Kalash. */
html[data-palette="silk"], html[data-palette="silk"] .env__card {
  --deep-a: #FCFCFD; --deep-b: #F9F9FB; --deep-c: #F1F2F6; --deep-d: #F3F4F7;
  --surf-rgb: 249, 249, 251; --lane-a-rgb: 251, 251, 252; --lane-b-rgb: 236, 238, 243;
  --deep-rgb: 30, 41, 59; --night-rgb: 15, 23, 42;
  --glow-rgb: 255, 255, 255;
  --head: #1E293B; --head-rgb: 30, 41, 59;
  --accent: #64748B; --accent-rgb: 100, 116, 139;
  --hi: #A3ADBD; --hi-rgb: 163, 173, 189;
  --kick: #990000;
  --bg: #F9F9FB; --bg-2: #F3F4F7; --bg-3: #EBEDF2; --card: #FFFFFF;
  --ink: #1E293B; --ink-soft: #475569;
  --on-surf: #1E293B; --on-surf-rgb: 30, 41, 59; --on-surf-soft: #64748B; --on-surf-soft-rgb: 100, 116, 139;
  --name-a: #B8262B; --name-b: #990000; --name-c: #6E0000; --name-foot: #990000;
  --names-shadow: drop-shadow(0 6px 18px rgba(153, 0, 0, .10));
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .45));
  --btn-bg: #1E293B; --btn-ink: #FFFFFF; --btn-glow-rgb: 30, 41, 59;
  --step-bg: #1E293B; --step-ink: #FFFFFF; --rsvp-card: #FFFFFF;
}
/* crimson only on names and dates: labels that share --kick stay slate */
html[data-palette="silk"] .kicker,
html[data-palette="silk"] .section__head--light .kicker { color: #64748B; }
html[data-palette="silk"] .hero__date,
html[data-palette="silk"] .event__when,
html[data-palette="silk"] .env__card-date { color: #990000; }
html[data-palette="silk"] .event__when small { color: var(--ink-soft); }
html[data-palette="silk"] [data-mandala] { color: #64748B; }
html[data-palette="silk"] .footer__hashtag { color: #64748B; }

/* Gilded Sage (Option 3-1): Option 3's colours worked like Option 6. The
   top of the page is a wash of muted sage #9CAF88 warming through a soft
   gold glow into warm ivory #FFFDF9; the sections below keep a light
   sage-and-gold tint instead of plain white. Forest green #1C3121 for text
   and names, light gold #D4AF37 for buttons, rules and the garland. */
html[data-palette="gilded"], html[data-palette="gilded"] .env__card {
  --theme: #9CAF88;
  --deep-a: #F6F3E4; --deep-b: #EEF0DF; --deep-c: #E2E8D2; --deep-d: #DCE3CB;
  --surf-rgb: 251, 250, 242; --lane-a-rgb: 251, 250, 242; --lane-b-rgb: 232, 236, 218;
  --deep-rgb: 28, 49, 33; --night-rgb: 16, 26, 19;
  --glow-rgb: 255, 248, 222;
  --head: #3E5634; --head-rgb: 62, 86, 52;
  --accent: #8C7322; --accent-rgb: 140, 115, 34;
  --hi: #D4AF37; --hi-rgb: 212, 175, 55;
  --kick: #8C7322;
  --bg: #FBFAF2; --bg-2: #F3F1DF; --bg-3: #E7EBD6; --card: #FFFEFA;
  --ink: #1C3121; --ink-soft: #4C5B4A;
  --on-surf: #1C3121; --on-surf-rgb: 28, 49, 33; --on-surf-soft: #6B5A1A; --on-surf-soft-rgb: 107, 90, 26;
  --name-a: #FBE7A6; --name-b: #D4AF37; --name-c: #8E6A12; --name-foot: #A8821F;
  --names-shadow: drop-shadow(0 1px 1px rgba(28, 49, 33, .45)) drop-shadow(0 6px 18px rgba(28, 49, 33, .28));
  --glass: linear-gradient(180deg, rgba(255, 254, 246, .78), rgba(255, 254, 246, .45));
  --btn-bg: linear-gradient(135deg, #F1D98A 0%, #D4AF37 50%, #B8932A 100%); --btn-ink: #1C3121; --btn-glow-rgb: 212, 175, 55;
  --step-bg: #D4AF37; --step-ink: #1C3121; --rsvp-card: #FFFEFA;
}
html[data-palette="gilded"] .hero,
html[data-palette="gilded"] .env__card {
  background:
    radial-gradient(ellipse 70% 38% at 50% 58%, rgba(236, 211, 130, .55), transparent 75%),
    linear-gradient(180deg, #9CAF88 0%, #A9B98F 20%, #C9CB9E 42%, #E9DDAA 62%, #F7F0D8 80%, #FFFDF9 96%);
}
html[data-palette="gilded"] .hero__mandala { color: #FFFDF0; }
html[data-palette="gilded"] .footer__mandala { color: #8C7322; }
/* gold lettering at the top: foil-gold names, deeper antique gold for the small lines */
html[data-palette="gilded"] .hero__invocation,
html[data-palette="gilded"] .env__card-deva { color: #6E5410; }
html[data-palette="gilded"] .hero__kicker { color: #6E5410; }
html[data-palette="gilded"] .hero__sub { color: #7A5D12; }
html[data-palette="gilded"] .hero__date,
html[data-palette="gilded"] .env__card-date { color: #5E470C; }
html[data-palette="gilded"] .hero__place { color: #6E5410; }
html[data-palette="gilded"] .env__card-names { filter: drop-shadow(0 1px 1px rgba(28, 49, 33, .5)) drop-shadow(0 3px 8px rgba(28, 49, 33, .25)); }
/* the sage-and-gold carries on down the page */
html[data-palette="gilded"] .section--story {
  background:
    radial-gradient(circle at 12% 18%, rgba(212, 175, 55, .14), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(156, 175, 136, .22), transparent 42%),
    linear-gradient(180deg, #FFFDF9, #F6F4E6);
}
html[data-palette="gilded"] .section--gallery { background: linear-gradient(180deg, #F3F2E2, #E9EDDA); }
html[data-palette="gilded"] .toran-divider { --g1: #B8932A; --g2: #9CAF88; }
html[data-palette="gilded"] .section__head--light .kicker { color: #8C7322; }

/* Sindoor Blush (Option 5): the top of the page is deep sindoor #8C1C13,
   melting through soft dusty rose #D8A39D into warm ivory #FAF6F0, where
   the events and RSVP sit. Text on the red is cream; the date sits on a
   small ivory "glass" plate so it reads wherever the gradient lands. */
html[data-palette="sindoor"], html[data-palette="sindoor"] .env__card {
  --theme: #8C1C13;
  --deep-a: #FBF3EE; --deep-b: #FAF6F0; --deep-c: #F2E2DA; --deep-d: #F4E7E0;
  --surf-rgb: 250, 246, 240; --lane-a-rgb: 250, 246, 240; --lane-b-rgb: 240, 226, 218;
  --deep-rgb: 74, 22, 16; --night-rgb: 30, 8, 6;
  --glow-rgb: 255, 255, 255;
  --head: #8C1C13; --head-rgb: 140, 28, 19;
  --accent: #A8574F; --accent-rgb: 168, 87, 79;
  --hi: #D8A39D; --hi-rgb: 216, 163, 157;
  --kick: #9A5A50;
  --bg: #FAF6F0; --bg-2: #F6EDE6; --bg-3: #F0E2D9; --card: #FFFDFA;
  --ink: #3A2420; --ink-soft: #6E5651;
  --on-surf: #3A2420; --on-surf-rgb: 58, 36, 32; --on-surf-soft: #8C1C13; --on-surf-soft-rgb: 140, 28, 19;
  --name-a: #FFF4E6; --name-b: #F6D9CF; --name-c: #E2AFA6; --name-foot: #8C1C13;
  --names-shadow: drop-shadow(0 6px 22px rgba(60, 6, 4, .45));
  --glass: linear-gradient(180deg, rgba(255, 253, 250, .78), rgba(255, 253, 250, .55));
  --btn-bg: linear-gradient(135deg, #A8322A 0%, #8C1C13 60%, #741510 100%); --btn-ink: #FFFFFF; --btn-glow-rgb: 140, 28, 19;
  --step-bg: #8C1C13; --step-ink: #FFFFFF; --rsvp-card: #FFFFFF;
}
html[data-palette="sindoor"] .hero {
  background: linear-gradient(180deg, #7A160F 0%, #8C1C13 22%, #8C1C13 38%, #D8A39D 66%, #FAF6F0 92%);
}
/* on the small card the names sit lower, so the red runs further down */
html[data-palette="sindoor"] .env__card {
  background: linear-gradient(180deg, #7A160F 0%, #8C1C13 30%, #8C1C13 70%, #D8A39D 90%, #FAF6F0 100%);
}
html[data-palette="sindoor"] .env__card-date { color: #FFF1E8; }
html[data-palette="sindoor"] .hero__mandala { color: #F7E1D8; }
html[data-palette="sindoor"] .footer__mandala { color: #8C1C13; }
html[data-palette="sindoor"] .hero__invocation,
html[data-palette="sindoor"] .env__card-deva { color: #F6D9CF; }
html[data-palette="sindoor"] .hero__kicker { color: rgba(255, 240, 230, .88); }
html[data-palette="sindoor"] .hero__sub { color: #FFF1E8; text-shadow: 0 1px 14px rgba(60, 6, 4, .35); }
html[data-palette="sindoor"] .hero__meta {
  background: rgba(250, 246, 240, .82); border-radius: 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-color: rgba(140, 28, 19, .25);
}
html[data-palette="sindoor"] .hero__date { color: #8C1C13; }
html[data-palette="sindoor"] .hero__place { color: #6E5651; }
html[data-palette="sindoor"] .toran-divider { --g1: #A8574F; --g2: #D8A39D; }
/* the nav sits on red until it turns solid ivory on scroll */
html[data-palette="sindoor"] .nav:not(.is-solid):not(.is-open) .nav__toggle { color: #FFF3E8; }
html[data-palette="sindoor"] .nav.is-solid .nav__brand,
html[data-palette="sindoor"] .nav.is-open .nav__brand { --name-a: #B8473C; --name-b: #8C1C13; --name-c: #6A140D; }
@media (min-width: 761px) {
  html[data-palette="sindoor"] .nav:not(.is-solid) .nav__links a { color: rgba(255, 243, 232, .9); }
  html[data-palette="sindoor"] .nav:not(.is-solid) .nav__links .nav__cta { color: #FFF3E8; border-color: rgba(255, 243, 232, .65); }
}

/* Sage Mist (Option 6): muted sage #8A9A86 at the top, through soft mist
   sage #C8D3C5 into crisp off-white #F9FBF7. Deep crimson #9E1B32 ties in
   the red: buttons, dividers, the garland and the Kalash / Panas line art. */
html[data-palette="mist"], html[data-palette="mist"] .env__card {
  --theme: #8A9A86;
  --deep-a: #F4F7F2; --deep-b: #F9FBF7; --deep-c: #E9EFE6; --deep-d: #DCE4D8;
  --surf-rgb: 249, 251, 247; --lane-a-rgb: 249, 251, 247; --lane-b-rgb: 226, 233, 223;
  --deep-rgb: 34, 48, 32; --night-rgb: 18, 26, 17;
  --glow-rgb: 255, 255, 255;
  --head: #3F5139; --head-rgb: 63, 81, 57;
  --accent: #9E1B32; --accent-rgb: 158, 27, 50;
  --hi: #8A9A86; --hi-rgb: 138, 154, 134;
  --kick: #9E1B32;
  --bg: #F9FBF7; --bg-2: #F1F5EE; --bg-3: #E7EEE3; --card: #FFFFFF;
  --ink: #22301F; --ink-soft: #56634F;
  --on-surf: #22301F; --on-surf-rgb: 34, 48, 31; --on-surf-soft: #9E1B32; --on-surf-soft-rgb: 158, 27, 50;
  --name-a: #4E6247; --name-b: #2F3F2B; --name-c: #1C2A1B; --name-foot: #2F3F2B;
  --names-shadow: drop-shadow(0 6px 18px rgba(249, 251, 247, .35));
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42));
  --btn-bg: linear-gradient(135deg, #B8324A 0%, #9E1B32 60%, #831628 100%); --btn-ink: #FFFFFF; --btn-glow-rgb: 158, 27, 50;
  --step-bg: #9E1B32; --step-ink: #FFFFFF; --rsvp-card: #FFFFFF;
}
html[data-palette="mist"] .hero,
html[data-palette="mist"] .env__card {
  background: linear-gradient(180deg, #8A9A86 0%, #8A9A86 18%, #C8D3C5 55%, #F9FBF7 92%);
}
html[data-palette="mist"] .hero__mandala { color: #F9FBF7; }
html[data-palette="mist"] .footer__mandala { color: #3F5139; }
html[data-palette="mist"] .hero__invocation,
html[data-palette="mist"] .env__card-deva { color: #22301F; }
html[data-palette="mist"] .hero__kicker { color: rgba(34, 48, 31, .8); }
html[data-palette="mist"] .toran-divider { --g1: #9E1B32; --g2: #8A9A86; }
/* red line-art motifs: the Kalash on the card and the Panas in the footer */
html[data-palette="mist"] .env__card-kalash,
html[data-palette="mist"] .footer__panas { display: block; }

/* Botanical (Option 3): warm ivory #FFFDF9, deep forest green #1C3121,
   muted sage #9CAF88 and light gold #D4AF37, with line-drawn roses & leaves.
   Titles use a deeper shade of the same sage (#5E7752) so they stay readable;
   the pure #9CAF88 is used for the botanical drawings, buttons and lines. */
html[data-palette="botanical"], html[data-palette="botanical"] .env__card {
  --deep-a: #FFFEFB; --deep-b: #FFFDF9; --deep-c: #F7F5EC; --deep-d: #F4F6EF;
  --surf-rgb: 255, 253, 249; --lane-a-rgb: 255, 254, 251; --lane-b-rgb: 238, 242, 232;
  --deep-rgb: 28, 49, 33; --night-rgb: 16, 26, 19;
  --glow-rgb: 255, 255, 255;
  --head: #5E7752; --head-rgb: 94, 119, 82;
  --accent: #6F8761; --accent-rgb: 111, 135, 97;
  --hi: #D4AF37; --hi-rgb: 212, 175, 55;
  --kick: #9A7B1C;
  --bg: #FFFDF9; --bg-2: #F6F7F0; --bg-3: #EDF1E6; --card: #FFFFFF;
  --ink: #1C3121; --ink-soft: #4A5A4D;
  --on-surf: #1C3121; --on-surf-rgb: 28, 49, 33; --on-surf-soft: #6F8761; --on-surf-soft-rgb: 111, 135, 97;
  --name-a: #E8CB72; --name-b: #D4AF37; --name-c: #A8862A; --name-foot: #B8962E;
  --names-shadow: drop-shadow(0 6px 18px rgba(156, 175, 136, .2));
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .45));
  --btn-bg: linear-gradient(135deg, #B5C6A3 0%, #9CAF88 55%, #889C74 100%); --btn-ink: #1C3121; --btn-glow-rgb: 156, 175, 136;
  --step-bg: #9CAF88; --step-ink: #1C3121; --rsvp-card: #FFFFFF;
}
html[data-palette="botanical"] .hero__mandala,
html[data-palette="botanical"] .footer__mandala { color: #9CAF88; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: var(--lane-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
.deva { font-family: var(--f-deva); }
.amp { font-family: var(--f-script); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--gold); color: var(--maroon-deep); padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }

section[id] { scroll-margin-top: calc(var(--nav-h) - 1px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .85em 1.7em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--f-body); font-weight: 500; font-size: .92rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s, color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold {
  color: var(--btn-ink);
  background: var(--btn-bg);
  box-shadow: 0 10px 26px -10px rgba(var(--btn-glow-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn--gold:hover { box-shadow: 0 16px 34px -12px rgba(var(--btn-glow-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn--ghost { color: var(--on-surf-soft); border-color: rgba(var(--on-surf-soft-rgb), .55); background: rgba(255, 255, 255, .03); }
.btn--ghost:hover { background: rgba(var(--on-surf-soft-rgb), .12); }
.btn--line { color: var(--head); border-color: var(--line); background: var(--card); text-transform: none; letter-spacing: .02em; font-size: .9rem; padding: .6em 1.15em; }
.btn--line:hover { border-color: var(--gold); box-shadow: 0 8px 20px -14px rgba(var(--head-rgb), .6); }
.btn--lg { padding: 1em 2.1em; font-size: 1rem; }
.btn[disabled] { opacity: .65; cursor: not-allowed; transform: none; }

/* ==========================================================================
   GATE — the sealed envelope with Shree Ganesh on the wax seal
   ========================================================================== */
.gate { display: none; }
html.js .gate {
  display: block;
  position: fixed; inset: 0; z-index: 200;
  overflow: hidden;
  color: var(--ink);
  /* soft champagne paper, a little deeper at the edges */
  background:
    radial-gradient(ellipse 75% 65% at 50% 46%, #FCF4E6 0%, #F7E7CE 50%, #F0DBBA 88%, #E8CFA8 100%);
}
/* paper grain */
html.js .gate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px;
  opacity: .32; mix-blend-mode: multiply;
}
.gate__scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 2; }
.gate__inner {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(40px, 7vh, 80px) 16px 36px; text-align: center;
}
/* candle-warm light pooled behind the envelope */
.gate__glow {
  position: absolute; left: 50%; top: 54%; width: min(130vw, 1000px); aspect-ratio: 1.3;
  translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .55), rgba(255, 214, 140, .18) 55%, transparent);
  animation: glowBreath 7s ease-in-out infinite alternate;
}
@keyframes glowBreath { to { opacity: .7; transform: scale(1.04); } }
/* gold line-art mandala, barely there, turning very slowly */
.gate__mandala {
  position: absolute; left: 50%; top: 54%;
  width: min(118vw, 860px); aspect-ratio: 1;
  translate: -50% -50%;
  color: #B98A1E; opacity: .17;
  animation: spin 180s linear infinite;
  pointer-events: none;
  transition: opacity .6s ease;
}
.gate__mandala svg, .hero__mandala svg, .footer__mandala svg { width: 100%; height: 100%; display: block; }
/* drifting gold dust */
.gate__dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gate__dust i {
  position: absolute; bottom: -10px; border-radius: 50%;
  background: radial-gradient(circle, #FFF4CF 0%, #E2B44A 55%, rgba(226, 180, 74, 0) 75%);
  box-shadow: 0 0 6px rgba(240, 190, 80, .7);
  animation: dustRise linear infinite;
  opacity: 0;
}
@keyframes dustRise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .95; }
  50% { transform: translate(var(--sway, 18px), -55vh); opacity: .6; }
  80% { opacity: .9; }
  100% { transform: translate(0, -110vh); opacity: 0; }
}
/* a fine double gold rule framing the page, with paisley flourishes in the corners */
.gate__frame {
  position: absolute; inset: clamp(10px, 2vw, 18px); pointer-events: none;
  border: 1px solid rgba(185, 138, 30, .55);
  outline: 1px solid rgba(185, 138, 30, .28); outline-offset: 5px;
  transition: opacity .6s ease;
}
.gate__corner { position: absolute; width: clamp(84px, 14vw, 156px); aspect-ratio: 1; }
.gate__corner svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gate__corner--tl { left: 6px; top: 6px; }
.gate__corner--tr { right: 6px; top: 6px; transform: scaleX(-1); }
.gate__corner--bl { left: 6px; bottom: 6px; transform: scaleY(-1); }
.gate__corner--br { right: 6px; bottom: 6px; transform: scale(-1, -1); }
.gate__rule {
  position: relative; width: 150px; height: 12px; margin: -6px auto clamp(18px, 4vh, 30px);
  background: linear-gradient(90deg, transparent, #C79A35 30%, #C79A35 70%, transparent) center / 100% 1px no-repeat;
}
.gate__rule i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  background: var(--sindoor); transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 3px #F8EAD3, 0 0 0 4px #C79A35;
}
.gate__top { position: relative; transition: opacity .6s ease, transform .6s var(--ease); }
.gate__invocation { font-size: clamp(1.05rem, 3vw, 1.3rem); color: #880E4F; letter-spacing: .04em; }
.gate__title {
  margin: .5rem 0 clamp(14px, 3vh, 22px);
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 4vw, 1.7rem); color: #36454F;
}

/* ---------- the envelope ---------- */
.env {
  --w: min(88vw, 500px);
  position: relative; width: var(--w); aspect-ratio: 3 / 2;
  perspective: 1400px;
  flex: none;
  transition: transform 1s var(--ease);
}
.gate.is-opening .env { transform: translateY(min(12vh, 110px)); }
.env__back {
  position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(180deg, #4A0912, #33050C);
  box-shadow: 0 40px 60px -30px rgba(74, 9, 18, .55), 0 14px 24px -14px rgba(74, 9, 18, .35), 0 0 0 1px rgba(212, 175, 55, .35);
  transition: opacity .6s ease;
}

/* the card that slides out (styled like the hero so the zoom flows into it) */
.env__card {
  position: absolute; left: 6%; right: 6%; top: 5%; height: 90%; z-index: 2;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(var(--glow-rgb), .6), transparent 75%),
    linear-gradient(180deg, var(--deep-a) 0%, var(--deep-b) 55%, var(--deep-c) 100%);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .6), 0 18px 40px -16px rgba(0, 0, 0, .7);
  transform-origin: 50% 50%;
  transition: transform 1.1s cubic-bezier(.3, .7, .2, 1), border-radius .95s cubic-bezier(.65, 0, .35, 1), box-shadow .6s ease;
  will-change: transform;
}
.env__card-inner {
  position: absolute; inset: 4%;
  border: 1px solid rgba(212, 175, 55, .55); border-radius: 5px;
  box-shadow: inset 0 0 0 3px rgba(var(--deep-rgb), .12), inset 0 0 0 4px rgba(212, 175, 55, .3);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 5%;
}
.env__card-ganesha { width: 25%; aspect-ratio: 1; color: var(--gold); }
.env__card-ganesha svg { width: 100%; height: 100%; display: block; }
.env__card-deva { margin-top: 2%; font-size: calc(var(--w) * .032); color: var(--on-surf-soft); }
.env__card-names {
  font-family: var(--f-script); font-size: calc(var(--w) * .1); line-height: 1.15;
  background: linear-gradient(180deg, var(--name-a) 10%, var(--name-b) 55%, var(--name-c) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .2em;
}
.env__card-names .amp { font-size: .6em; }
.env__card-date { font-family: var(--f-display); font-style: italic; font-size: calc(var(--w) * .034); color: var(--on-surf); }

/* front pocket: side and bottom folds */
.env__pocket { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 10px; overflow: hidden; transition: opacity .6s ease; }
.env__pocket svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.env__address {
  position: absolute; left: 0; right: 0; bottom: 9%;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.env__to { font-size: calc(var(--w) * .022); letter-spacing: .3em; text-transform: uppercase; color: rgba(235, 211, 140, .75); }
.env__name {
  font-family: var(--f-script); font-size: calc(var(--w) * .064); line-height: 1.2;
  color: var(--gold-soft); padding: 0 .3em; max-width: 86%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* top flap (3D fold) */
.env__flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 60%; z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.6, 0, .3, 1), z-index 0s .5s;
}
.env__flap-face { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.env__flap-face svg { width: 100%; height: 100%; display: block; }
.env__flap-face--back {
  transform: rotateX(180deg);
  background:
    radial-gradient(circle, rgba(94, 11, 21, .35) 1.2px, transparent 1.7px) 0 0 / 14px 14px,
    linear-gradient(180deg, #F6C55A, #E8A23A);
}

/* wax seal with Ganesh ji */
.env__seal {
  position: absolute; left: 50%; top: 58%; z-index: 5;
  width: clamp(76px, 22%, 108px); aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.env__seal::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(255, 214, 120, .65);
  animation: pulseRing 2.4s ease-out infinite;
  pointer-events: none;
}
.env__seal:focus-visible { outline: 3px solid var(--marigold); outline-offset: 6px; }
.env__seal-half {
  position: absolute; inset: 0;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
  transition: transform .9s cubic-bezier(.5, 0, .6, 1), opacity .9s ease;
}
.env__seal-half svg { width: 100%; height: 100%; display: block; overflow: visible; }
.env__seal-half--l { clip-path: polygon(-10% -10%, 53% -10%, 47% 20%, 55% 40%, 46% 60%, 54% 80%, 49% 110%, -10% 110%); }
.env__seal-half--r { clip-path: polygon(53% -10%, 110% -10%, 110% 110%, 49% 110%, 54% 80%, 46% 60%, 55% 40%, 47% 20%); }

/* ---------- "open the invitation" prompt ---------- */
.gate__cta { position: relative; margin-top: clamp(22px, 4vh, 34px); display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .5s ease, transform .5s var(--ease); }
.gate__hint { font-size: .84rem; letter-spacing: .04em; color: var(--ink-soft); }

/* ---------- opening sequence (classes added one by one from main.js) ---------- */
.gate.is-opening .gate__cta { opacity: 0; transform: translateY(18px); pointer-events: none; }
.gate.is-opening .gate__top { opacity: 0; transform: translateY(-14px); }
.gate.is-opening .env__seal::after { display: none; }
.env.is-cracked .env__seal { pointer-events: none; }
.env.is-cracked .env__seal-half--l { transform: translate(-40%, 70%) rotate(-38deg); opacity: 0; }
.env.is-cracked .env__seal-half--r { transform: translate(40%, 70%) rotate(34deg); opacity: 0; }
.env.is-open .env__flap { transform: rotateX(180deg); z-index: 1; }
.env.is-out .env__card { transform: translateY(-58%); }
.env.is-zoom .env__card {
  z-index: 6; box-shadow: 0 0 0 1px rgba(212, 175, 55, .7), 0 10px 30px -10px rgba(0, 0, 0, .55);
  transition: transform .95s cubic-bezier(.65, 0, .35, 1), border-radius .95s cubic-bezier(.65, 0, .35, 1), box-shadow .6s ease;
}
.env.is-zoom .env__card-inner { opacity: 0; transition: opacity .5s ease .2s; }
/* the red envelope grows to fill the screen; only a sliver stays visible around the card */
.env.is-zoom .env__back {
  background: #6B0F1D; border-radius: 0;
  transition: transform .7s cubic-bezier(.5, 0, .3, 1), border-radius .7s ease;
}
.env.is-zoom .env__pocket, .env.is-zoom .env__flap { opacity: 0; transition: opacity .4s ease; }
.gate.is-zooming .gate__frame, .gate.is-zooming .gate__mandala, .gate.is-zooming .gate__dust { opacity: 0; transition: opacity .6s ease; }
.gate.is-gone { opacity: 0; transition: opacity .7s ease; pointer-events: none; }

@keyframes pulseRing {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes spin { to { rotate: 360deg; } }

/* short screens: tighten so envelope + form fit without scrolling */
@media (max-height: 640px) {
  .gate__inner { padding-top: 32px; }
  .env { --w: min(88vw, 420px, 92vh); }
}

/* ==========================================================================
   PETALS canvas
   ========================================================================== */
.petals { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 150; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px);
  color: var(--on-surf);
  transition: background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s;
}
.nav.is-solid {
  background: rgba(var(--surf-rgb), .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(212, 175, 55, .35), 0 10px 30px -18px rgba(0, 0, 0, .6);
}
.nav__brand {
  font-family: var(--f-script); font-size: 2rem; line-height: 1; text-decoration: none; color: var(--on-surf-soft);
  display: inline-flex; align-items: baseline; gap: .12em;
}
.nav__brand .amp { font-size: .7em; color: var(--hi); }
/* gold monogram badge (replaces the plain initials once the script runs) */
.nav__brand svg { display: block; width: 48px; height: 48px; overflow: visible; transition: transform .5s var(--ease), filter .5s ease; filter: drop-shadow(0 2px 6px rgba(var(--deep-rgb), .12)); }
.nav__brand:hover svg { transform: rotate(-6deg) scale(1.05); }
.mono__l { font-family: var(--f-script); font-size: 27px; }
.mono__amp { font-family: var(--f-script); font-size: 12px; }
.nav__links { display: flex; gap: clamp(14px, 2.5vw, 34px); align-items: center; }
.nav__links a {
  text-decoration: none; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(var(--on-surf-rgb), .85); position: relative; padding: 6px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hi);
  transform: scaleX(0); transition: transform .35s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--on-surf-soft); }
.nav__links .nav__cta {
  border: 1px solid rgba(var(--on-surf-soft-rgb), .6); padding: 8px 18px; border-radius: 999px; color: var(--on-surf-soft);
}
.nav__links .nav__cta::after { display: none; }
.nav__links .nav__cta:hover { background: rgba(var(--on-surf-soft-rgb), .14); }
.nav__toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 7px; color: var(--on-surf-soft);
}
.nav__bar { width: 24px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__bar--1 { transform: translateY(4.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bar--2 { transform: translateY(-4.25px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; top: var(--nav-h); left: 12px; right: 12px;
    flex-direction: column; gap: 0; padding: 10px 0;
    background: rgb(var(--surf-rgb)); border: 1px solid rgba(212, 175, 55, .35); border-radius: 16px;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7);
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity .3s ease, transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.is-open .nav__links { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .3s ease, transform .3s var(--ease); }
  .nav.is-open { background: rgba(var(--surf-rgb), .95); }
  .nav__links a { padding: 14px 24px; width: 100%; text-align: center; }
  .nav__links a::after { display: none; }
  .nav__links .nav__cta { width: auto; margin: 8px auto 4px; padding: 10px 28px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--nav-h) + 48px) 20px 130px;
  color: var(--on-surf);
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(var(--glow-rgb), .55), transparent 70%),
    radial-gradient(ellipse at 50% 120%, rgba(var(--hi-rgb), .22), transparent 55%),
    linear-gradient(180deg, var(--deep-a) 0%, var(--deep-b) 50%, var(--deep-c) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(212, 175, 55, .18) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
  mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
}
.hero__mandala {
  position: absolute; left: 50%; top: 46%;
  width: min(140vw, 1050px); aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--gold); opacity: .13;
  animation: spin 160s linear infinite;
  pointer-events: none;
}
.hero__bells {
  position: absolute; top: calc(var(--nav-h) - 6px); left: 0; right: 0;
  display: flex; justify-content: space-between; padding: 0 6vw; pointer-events: none;
}
.bell { transform-origin: 50% 0; animation: swing 3.4s ease-in-out infinite alternate; }
.bell svg { display: block; overflow: visible; }
.hero__inner { position: relative; z-index: 1; max-width: 900px; }
.hero__invocation { color: var(--on-surf-soft); font-size: clamp(1.1rem, 3vw, 1.4rem); }
.hero__kicker { margin-top: 1.4rem; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(var(--on-surf-rgb), .75); }
.hero__names {
  font-family: var(--f-script); font-weight: 400;
  font-size: clamp(4.2rem, 11vw, 7.6rem); line-height: 1.05;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .22em;
  margin: .4rem 0 0; padding: .05em .25em .12em;
  background: linear-gradient(180deg, var(--name-a) 5%, var(--name-b) 50%, var(--name-c) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: var(--names-shadow);
}
.hero__names .amp { font-size: .55em; }
.hero__sub { font-family: var(--f-display); font-style: italic; font-size: clamp(1.25rem, 3.4vw, 1.7rem); color: var(--on-surf-soft); }
.hero__meta { margin: 1.6rem auto 0; display: inline-flex; flex-direction: column; gap: .2rem; padding: .9rem 2rem; border-top: 1px solid rgba(212, 175, 55, .4); border-bottom: 1px solid rgba(212, 175, 55, .4); }
.hero__date { font-family: var(--f-display); font-size: clamp(1.25rem, 3.4vw, 1.65rem); font-weight: 500; letter-spacing: .04em; }
.hero__place { font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(var(--on-surf-rgb), .75); }

.countdown { display: flex; justify-content: center; gap: clamp(10px, 3vw, 22px); margin: 2.2rem auto 0; }
.countdown__unit {
  min-width: clamp(64px, 17vw, 92px); padding: 14px 6px 10px;
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 60px 60px 12px 12px;
  background: var(--glass);
}
.countdown__num { display: block; font-family: var(--f-display); font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 500; line-height: 1.1; color: var(--on-surf); font-variant-numeric: tabular-nums; }
.countdown__label { display: block; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--on-surf-soft); }
.countdown__done { margin-top: 2rem; font-family: var(--f-display); font-style: italic; font-size: 1.6rem; color: var(--on-surf-soft); }

.hero__actions { margin-top: 2.4rem; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(var(--on-surf-rgb), .7);
}
.feet { position: relative; width: 26px; height: 34px; }
.feet i {
  position: absolute; width: 9px; height: 15px; border-radius: 50% 50% 45% 45%;
  background: var(--hi); opacity: 0;
  animation: step 1.6s ease-in-out infinite;
}
.feet i:first-child { left: 2px; bottom: 0; }
.feet i:last-child { right: 2px; top: 0; animation-delay: .8s; }
@keyframes step { 0%, 100% { opacity: 0; } 30%, 60% { opacity: .9; } }

/* hero entrance (after the gate opens) */
html.js .hero-in { opacity: 0; }
html.js body.is-entered .hero-in { animation: fadeUp 1.2s var(--ease) both; animation-delay: calc(var(--i, 0) * .14s + .2s); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* ==========================================================================
   TORAN (marigold + mango leaf garland)
   ========================================================================== */
.toran-divider { position: relative; z-index: 2; max-width: 980px; margin: -2px auto 0; padding: 0 12px; pointer-events: none; }
.toran-divider svg { width: 100%; height: auto; display: block; overflow: visible; }
.toran-divider--top { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; }
.toran .swing { transform-box: fill-box; transform-origin: 50% 0; animation: swing 3s ease-in-out infinite alternate; }
/* garland colours: lines & beads (--g1), leaf/clay tint (--g2), diyo flame (--g3), flame core (--g4) */
.toran-divider { --g1: #C29B48; --g2: var(--accent); --g3: #E8A33A; --g4: #FFE7A3; }
.toran-divider svg { max-width: 760px; margin: 0 auto; }
html[data-palette="botanical"] .toran-divider { --g1: #C9A54A; --g2: #9CAF88; }
html[data-palette="silk"] .toran-divider { --g1: #990000; --g2: #990000; --g3: #990000; --g4: #F9F9FB; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { position: relative; padding: clamp(64px, 9vw, 120px) 20px; }
.section__head { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--kick); font-weight: 500;
}
.kicker .deva { font-size: 1rem; letter-spacing: 0; color: var(--accent); }
.section__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 3.8rem); line-height: 1.1; color: var(--head); margin-top: .4rem;
}
.section__deva { font-size: 1.3rem; color: var(--accent); margin-top: .2rem; }
.section__lead { margin-top: 1rem; font-size: 1.06rem; line-height: 1.75; color: var(--ink-soft); }
.section__note { margin-top: .8rem; font-size: .82rem; letter-spacing: .08em; color: var(--ink-soft); font-style: italic; }
.flourish {
  position: relative; width: 170px; height: 14px; margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent) center / 100% 1px no-repeat;
}
.flourish::before, .flourish::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; background: var(--accent); transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--gold);
}
.flourish::after { width: 4px; height: 4px; background: var(--hi); box-shadow: none; }

.section__head--light .section__title { color: var(--on-surf); }
.section__head--light .section__deva { color: var(--on-surf-soft); }
.section__head--light .section__lead { color: rgba(var(--on-surf-rgb), .8); }
.section__head--light .kicker { color: var(--hi); }
.section__head--light .kicker .deva { color: var(--on-surf-soft); }
.section__head--light .flourish::before { box-shadow: 0 0 0 3px var(--deep-b), 0 0 0 4px var(--gold); }

/* reveal on scroll */
html.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   STORY timeline
   ========================================================================== */
.section--story {
  background:
    radial-gradient(circle at 10% 20%, rgba(var(--hi-rgb), .08), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(var(--glow-rgb), .06), transparent 40%),
    var(--bg);
}
.timeline { position: relative; max-width: 1040px; margin: 0 auto; }
.timeline__list { list-style: none; margin: 0; padding: 0; }
.timeline__track, .timeline__fill {
  position: absolute; top: 0; bottom: 0; left: 22px; width: 3px; margin-left: -1.5px; border-radius: 3px;
}
.timeline__track { background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); }
.timeline__fill { background: linear-gradient(180deg, var(--hi), var(--kick) 50%, var(--accent)); transform-origin: top; transform: scaleY(0); }
.timeline__walker {
  position: absolute; left: 22px; top: 0; width: 0; height: 0; z-index: 2;
}
.timeline__walker span {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, #FFE9A8 0 25%, var(--hi) 45%, rgba(var(--hi-rgb), 0) 72%);
  box-shadow: 0 0 18px 6px rgba(var(--hi-rgb), .45);
  animation: flicker 1.8s ease-in-out infinite alternate;
}
@keyframes flicker { from { transform: scale(.85); opacity: .85; } to { transform: scale(1.15); opacity: 1; } }

.moment { position: relative; padding-left: 58px; margin-bottom: 40px; }
.moment:last-child { margin-bottom: 0; }
.moment__dot {
  position: absolute; left: 22px; top: 26px; width: 16px; height: 16px; z-index: 1;
  transform: translate(-50%, 0) rotate(45deg);
  background: var(--bg); border: 2px solid var(--gold);
  transition: background-color .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.moment.is-reached .moment__dot { background: var(--accent); border-color: var(--hi); box-shadow: 0 0 0 6px rgba(var(--hi-rgb), .2); }
.moment__card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 26px 24px; box-shadow: var(--shadow); overflow: hidden;
}
.moment__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--hi), var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s;
}
.moment.is-reached .moment__card::before { transform: scaleX(1); }
.moment__photo { width: calc(100% + 52px); max-width: none; margin: -26px -26px 20px; aspect-ratio: 4 / 3; object-fit: cover; }
.moment__chapter { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: .15rem; }
.moment__date { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--kick); }
.section__lead--story { font-family: var(--f-display); font-style: italic; font-size: clamp(1.35rem, 3vw, 1.75rem); color: var(--head); }
.moment__title { font-family: var(--f-display); font-size: 1.75rem; color: var(--head); margin: .1rem 0 .5rem; line-height: 1.2; }
.moment__text { color: var(--ink-soft); line-height: 1.75; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

@media (min-width: 860px) {
  .timeline__track, .timeline__fill, .timeline__walker { left: 50%; }
  .moment { width: 50%; padding: 0 56px 0 0; margin-bottom: 64px; }
  .moment--right { margin-left: 50%; padding: 0 0 0 56px; }
  .moment__dot { left: 100%; }
  .moment--right .moment__dot { left: 0; }
  html.js .moment.reveal { transform: translateX(-40px); }
  html.js .moment--right.reveal { transform: translateX(40px); }
  html.js .moment.reveal.is-visible { transform: none; }
  .moment:not(.moment--right) .moment__card { text-align: right; }
  .moment:not(.moment--right) .moment__text { text-align: justify; }
}

/* ==========================================================================
   EVENTS
   ========================================================================== */
.section--events {
  background:
    radial-gradient(circle, rgba(212, 175, 55, .16) 1px, transparent 1.6px) 0 0 / 24px 24px,
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
}
.events {
  max-width: 1060px; margin: 0 auto;
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: start;
}
.event {
  position: relative; text-align: center;
  background: var(--card);
  border-radius: 240px 240px var(--radius) var(--radius);
  padding: 64px 26px 28px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(212, 175, 55, .45);
}
.event::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 232px 232px 12px 12px;
}
.event__icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--head);
  background: radial-gradient(circle at 50% 35%, #FFF4D6, #F9D98A);
  box-shadow: 0 0 0 6px rgba(var(--hi-rgb), .14), inset 0 -3px 0 rgba(232, 112, 15, .25);
}
.event__icon svg { width: 32px; height: 32px; }
.event__deva { font-family: var(--f-deva); color: var(--accent); font-size: 1.15rem; }
.event__name { font-family: var(--f-display); font-size: 1.85rem; color: var(--head); line-height: 1.15; margin: .1rem 0 .8rem; }
.event__when { font-weight: 500; color: var(--ink); line-height: 1.5; }
.event__when small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .95rem; }
.event__venue { margin-top: .9rem; color: var(--ink-soft); line-height: 1.5; }
.event__venue strong { color: var(--ink); font-weight: 500; }
.event__desc { margin-top: 1rem; color: var(--ink-soft); line-height: 1.7; font-size: .97rem; }
.event__attire {
  margin-top: 1rem; display: inline-block; font-size: .88rem; color: var(--mehendi);
  background: rgba(86, 119, 43, .08); border: 1px dashed rgba(86, 119, 43, .4); border-radius: 999px; padding: .35em 1em;
}
.event__attire b { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; margin-right: .4em; }
.event__actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.event__map { margin-top: 1rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.event__map iframe { display: block; width: 100%; height: 240px; border: 0; }

.cal { position: relative; }
.cal__menu {
  position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  min-width: 210px; padding: 6px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 20px 40px -16px rgba(var(--deep-rgb), .45);
  display: flex; flex-direction: column;
}
.cal__menu a, .cal__menu button {
  text-align: left; padding: 10px 12px; border-radius: 8px; border: 0; background: transparent; cursor: pointer;
  color: var(--head); text-decoration: none; font-size: .92rem;
}
.cal__menu a:hover, .cal__menu button:hover { background: var(--bg-2); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.section--gallery { background: var(--bg); padding-bottom: clamp(100px, 12vw, 160px); }
.gallery { max-width: 1200px; margin: 0 auto; }
.gallery__feature { max-width: 480px; margin: 0 auto clamp(36px, 5vw, 56px); }
.feature {
  position: relative; margin: 0; padding: 12px;
  border-radius: 320px 320px 20px 20px;
  background: linear-gradient(160deg, #F6DFA0, var(--gold) 40%, #A87B1A);
  box-shadow: 0 30px 60px -30px rgba(var(--deep-rgb), .6);
}
.feature__inner, .feature > button {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--bg-2);
  border-radius: 310px 310px 12px 12px; overflow: hidden; aspect-ratio: 4 / 5;
}
.feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.feature > button:hover img { transform: scale(1.04); }
.feature figcaption { text-align: center; margin-top: 12px; font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: var(--head); }

.gallery__collage { columns: 3 260px; column-gap: 16px; }
.tile {
  display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; cursor: zoom-in;
  break-inside: avoid; border-radius: 14px; overflow: hidden; position: relative;
  background: var(--bg-2); box-shadow: 0 14px 30px -20px rgba(var(--deep-rgb), .5);
}
.tile img { width: 100%; height: auto; transition: transform .9s var(--ease), filter .9s; }
.tile:hover img { transform: scale(1.05); }
.tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; text-align: left;
  color: var(--ivory); font-family: var(--f-display); font-style: italic; font-size: 1.05rem;
  background: linear-gradient(transparent, rgba(var(--night-rgb), .75));
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease);
}
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity: 1; transform: none; }
@media (hover: none) { .tile__cap { opacity: 1; transform: none; } }

.placeholder {
  display: grid; place-items: center; align-content: center; text-align: center; gap: 6px; padding: 24px;
  color: rgba(var(--head-rgb), .55);
  background:
    radial-gradient(circle, rgba(212, 175, 55, .22) 1px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(160deg, var(--bg-2), var(--bg-3));
  font-family: var(--f-display); font-style: italic; font-size: 1.05rem;
}
.placeholder svg { width: 38px; height: 38px; color: var(--gold); margin: 0 auto 4px; }
.tile.placeholder { cursor: default; break-inside: avoid; }
.feature .placeholder { height: 100%; border-radius: inherit; }
.gallery__note { text-align: center; margin-top: 10px; color: var(--ink-soft); font-style: italic; }

/* ==========================================================================
   MOMENTS as a little Instagram-style profile: header, highlights, grid
   ========================================================================== */
.ig {
  max-width: 820px; margin: 0 auto; padding: clamp(18px, 4vw, 34px);
  background: var(--card); border-radius: 26px;
  border: 1px solid rgba(212, 175, 55, .35);
  box-shadow: 0 30px 60px -36px rgba(var(--deep-rgb), .55);
}
.ig__head { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 4vw, 40px); align-items: center; }
.ig__avatar { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.ig__ring {
  display: block; width: clamp(92px, 20vw, 150px); aspect-ratio: 1; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 210deg, #F6E3A1, #D4AF37, var(--accent), #B8932A, #F6E3A1);
}
.ig__ring img, .ig__hl-ring img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
  border: 3px solid var(--card);
}
.ig__ring img { object-position: 50% 45%; }
.ig__handle { font-family: var(--f-body); font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-weight: 500; color: var(--ink); letter-spacing: .01em; }
.ig__tick { color: #D4AF37; font-size: .85em; }
.ig__stats { list-style: none; margin: .55rem 0 .7rem; padding: 0; display: flex; gap: clamp(14px, 3.5vw, 30px); font-size: .92rem; color: var(--ink-soft); }
.ig__stats b { color: var(--ink); font-weight: 600; margin-right: .25em; }
.ig__bio { font-size: .93rem; line-height: 1.55; color: var(--ink-soft); }
.ig__name { display: block; color: var(--ink); font-weight: 500; }
.ig__meta { display: block; margin-top: .15rem; color: var(--head); font-size: .85rem; letter-spacing: .04em; }
.ig__follow {
  display: inline-block; margin-top: .9rem; padding: .5em 1.6em; border-radius: 10px;
  background: var(--btn-bg); color: var(--btn-ink); text-decoration: none;
  font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 8px 20px -12px rgba(var(--btn-glow-rgb), .8);
}
.ig__follow:hover { transform: translateY(-1px); }

.ig__highlights {
  list-style: none; margin: clamp(18px, 4vw, 30px) 0 0; padding: 4px 2px 6px;
  display: flex; gap: clamp(12px, 3vw, 22px); overflow-x: auto; scrollbar-width: none;
}
.ig__highlights::-webkit-scrollbar { display: none; }
.ig__highlights button { padding: 0; border: 0; background: none; cursor: pointer; display: grid; justify-items: center; gap: 6px; width: 72px; }
.ig__hl-ring {
  display: block; width: 64px; height: 64px; border-radius: 50%; padding: 2px;
  background: linear-gradient(135deg, #F1D98A, #D4AF37 45%, var(--accent));
  transition: transform .3s var(--ease);
}
.ig__highlights button:hover .ig__hl-ring { transform: scale(1.06); }
.ig__hl-ring img { border-width: 2px; }
.ig__hl-label { font-size: .72rem; color: var(--ink-soft); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ig__tabs {
  display: flex; justify-content: center; gap: 46px; margin-top: clamp(14px, 3vw, 22px);
  border-top: 1px solid var(--line); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.ig__tabs span { padding: 12px 0 10px; margin-top: -1px; border-top: 1px solid transparent; }
.ig__tabs .is-on { color: var(--ink); border-top-color: var(--ink); }

.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 14px; overflow: hidden; }
.ig__tile {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
  background: var(--bg-2);
}
.ig__tile--big { grid-column: span 2; grid-row: span 2; }
.ig__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.ig__tile:hover img, .ig__tile:focus-visible img { transform: scale(1.05); }
.ig__over {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(var(--night-rgb), .38); color: #fff; opacity: 0; transition: opacity .3s ease;
  font-family: var(--f-display); font-style: italic; font-size: clamp(.85rem, 2vw, 1.05rem); text-align: center; padding: 10px;
}
.ig__over svg { width: 22px; height: 22px; fill: #fff; }
.ig__tile:hover .ig__over, .ig__tile:focus-visible .ig__over { opacity: 1; }
.ig__pop { position: absolute; left: 50%; top: 50%; width: 34%; translate: -50% -50%; opacity: 0; pointer-events: none; }
.ig__pop svg { width: 100%; height: auto; fill: #fff; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35)); }
.ig__tile.is-loved .ig__pop { animation: igPop .9s var(--ease) both; }
@keyframes igPop {
  0% { opacity: 0; transform: scale(.3); }
  25% { opacity: 1; transform: scale(1.15); }
  45% { transform: scale(.95); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1) translateY(-14px); }
}
.ig__hint { margin-top: 12px; text-align: center; font-size: .78rem; color: var(--ink-soft); font-style: italic; }
.ig__empty { min-height: 240px; border-radius: 14px; }
@media (hover: none) { .ig__over { display: none; } }
@media (max-width: 520px) {
  .ig { border-radius: 20px; }
  .ig__head { grid-template-columns: auto 1fr; gap: 14px; }
  .ig__stats { font-size: .82rem; gap: 12px; }
  .ig__grid { gap: 3px; border-radius: 10px; }
  .ig__tabs { gap: 30px; }
}

/* ==========================================================================
   RSVP
   ========================================================================== */
.section--rsvp {
  color: var(--on-surf);
  padding-top: clamp(120px, 14vw, 170px);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--glow-rgb), .45), transparent 70%),
    radial-gradient(circle, rgba(212, 175, 55, .12) 1px, transparent 1.6px) 0 0 / 26px 26px,
    linear-gradient(180deg, var(--deep-b), var(--deep-c));
}
.rsvp {
  position: relative; max-width: 720px; margin: 0 auto;
  background: var(--rsvp-card); color: var(--ink);
  border-radius: 28px; padding: clamp(26px, 5vw, 48px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(212, 175, 55, .5), 0 0 0 8px rgba(212, 175, 55, .08);
}
.rsvp { text-align: center; }
.rsvp__invite { font-family: var(--f-display); font-size: clamp(1.25rem, 3.6vw, 1.5rem); line-height: 1.5; color: var(--head); max-width: 520px; margin: 0 auto; }
.rsvp__steps {
  list-style: none; margin: 26px auto 30px; padding: 0; max-width: 480px;
  display: grid; gap: 12px; text-align: left;
}
.rsvp__steps li { position: relative; padding-left: 40px; line-height: 1.55; color: var(--ink-soft); }
.rsvp__steps li::before {
  counter-increment: rsvpstep; content: counter(rsvpstep);
  position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 600;
  background: var(--step-bg); color: var(--step-ink);
}
.rsvp__steps { counter-reset: rsvpstep; }
.rsvp__go { min-width: min(100%, 300px); }
.rsvp__go[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.rsvp__soon { margin-top: 14px; font-size: .95rem; color: var(--ink-soft); }
.rsvp__closed {
  margin: 0 auto 22px; max-width: 520px; padding: 12px 16px; border-radius: 12px; font-size: .95rem;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .3); color: var(--ink);
}
.rsvp__contact { margin-top: 26px; text-align: center; font-size: .9rem; color: var(--ink-soft); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative; overflow: hidden; text-align: center;
  padding: 80px 20px 64px; color: var(--on-surf);
  background: var(--deep-d);
  border-top: 1px solid rgba(212, 175, 55, .3);
}
.footer__mandala { position: absolute; left: 50%; top: 50%; width: 520px; aspect-ratio: 1; translate: -50% -50%; color: var(--gold); opacity: .07; animation: spin 200s linear infinite; pointer-events: none; }
.footer > p { position: relative; }
.footer__deva { font-size: clamp(1.15rem, 3.5vw, 1.5rem); color: var(--on-surf-soft); }
.footer__en { margin-top: .4rem; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: rgba(var(--on-surf-rgb), .75); }
.footer__names {
  margin-top: 1.4rem; font-family: var(--f-script); font-size: clamp(2.8rem, 9vw, 4rem); line-height: 1.2;
  background: linear-gradient(180deg, var(--name-a), var(--name-foot)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__families { margin-top: .6rem; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(var(--on-surf-rgb), .6); }
.footer__hashtag { margin-top: 1rem; font-size: .9rem; letter-spacing: .14em; color: var(--hi); }

/* ==========================================================================
   PROCESSION — guests walking to the mandap as you scroll
   ========================================================================== */
.procession {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  height: var(--lane-h);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--lane-a-rgb), .78), rgba(var(--lane-b-rgb), .96));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid rgba(212, 175, 55, .45);
  box-shadow: 0 -10px 30px -18px rgba(var(--deep-rgb), .7);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .6s var(--ease), opacity .6s;
}
body.is-locked .procession { transform: translateY(110%); opacity: 0; }
.procession__ground {
  position: absolute; left: 0; right: 0; bottom: 9px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(212, 175, 55, .6) 0 10px, transparent 10px 18px);
}
.procession__crowd {
  position: absolute; left: 0; bottom: 10px;
  will-change: transform;
  transition: transform .35s cubic-bezier(.25, .7, .3, 1);
}
.procession__flip svg { display: block; height: 52px; width: auto; overflow: visible; transition: transform .35s var(--ease); }
.procession__flip.is-reversed svg { transform: scaleX(-1); }
.procession__mandap { position: absolute; right: 10px; bottom: 9px; }
.procession__mandap svg { display: block; height: 56px; width: auto; overflow: visible; }

.fig { transform-box: fill-box; transform-origin: 50% 100%; }
.leg, .arm { transform-box: fill-box; transform-origin: 50% 0; }
.procession.is-walking .fig { animation: bob .26s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.procession.is-walking .leg-a, .procession.is-walking .arm-b { animation: stride .52s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.procession.is-walking .leg-b, .procession.is-walking .arm-a { animation: stride .52s ease-in-out infinite alternate-reverse; animation-delay: var(--d, 0s); }
@keyframes stride { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }

.mandap-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: fire .5s ease-in-out infinite alternate; }
@keyframes fire { from { transform: scaleY(.85) scaleX(1.05); } to { transform: scaleY(1.12) scaleX(.94); } }
.mandap-glow { opacity: 0; transition: opacity .8s ease; }
.procession.has-arrived .mandap-glow { opacity: 1; }
.procession.has-arrived .fig { animation: celebrate .5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes celebrate { from { transform: translateY(0); } to { transform: translateY(-5px); } }

.procession__hearts { position: absolute; right: 30px; bottom: 50px; width: 40px; height: 1px; }
.procession__hearts i {
  position: absolute; bottom: 0; font-style: normal; color: var(--hi); font-size: 12px; opacity: 0;
}
.procession.has-arrived .procession__hearts i { animation: rise 2.4s ease-out infinite; }
.procession__hearts i:nth-child(2) { left: 14px; animation-delay: .8s !important; color: #FF7A7A; }
.procession__hearts i:nth-child(3) { left: 28px; animation-delay: 1.6s !important; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1.1); } }

@media (max-width: 600px) {
  :root { --lane-h: 58px; }
  .procession__flip svg { height: 44px; }
  .procession__mandap svg { height: 48px; }
}

/* ==========================================================================
   MUSIC toggle
   ========================================================================== */
.music {
  position: fixed; right: 16px; bottom: calc(var(--lane-h) + 16px); z-index: 95;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(212, 175, 55, .6); background: rgba(var(--surf-rgb), .9); color: var(--on-surf-soft);
  display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(var(--deep-rgb), .7);
}
.music__bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.music__bars i { width: 3px; height: 30%; background: currentColor; border-radius: 2px; }
.music[aria-pressed="true"] .music__bars i { animation: eq .9s ease-in-out infinite alternate; }
.music__bars i:nth-child(2) { animation-delay: .3s !important; }
.music__bars i:nth-child(3) { animation-delay: .6s !important; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }

/* ==========================================================================
   PANAS & KALASH: ultra-thin crimson line art (only in the Pearl Silk palette)
   ========================================================================== */
.silk-orn { display: none; }
.silk-orn svg { display: block; width: 100%; height: auto; overflow: visible; }
html[data-palette="silk"] .silk-orn { display: block; }
.hero__panas { width: clamp(38px, 4.4vw, 46px); margin: -6px auto 6px; }
.footer__panas { position: relative; width: 44px; margin: 0 auto 14px; }
.env__card-kalash { width: 7%; margin: 0 auto -1.5%; }

/* ==========================================================================
   KUNDALI MILAN background (behind the envelope, the hero and the footer):
   two charts that drift gently; only the nakshatra ring turns.
   ========================================================================== */
[data-mandala].is-kundali { animation: none; }
[data-mandala].is-kundali svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kd-num { font-family: var(--f-deva); font-size: 26px; fill: currentColor; stroke: none; text-anchor: middle; }
.kd-pl { font-family: var(--f-deva); font-size: 22px; fill: currentColor; stroke: none; text-anchor: middle; opacity: .8; }
.kd-glow { animation: kdGlow 4.5s ease-in-out infinite alternate; }
.kd-a { animation: kdDrift 16s ease-in-out infinite alternate; }
.kd-b { animation: kdDrift 16s ease-in-out infinite alternate-reverse; }
.kd-ring { animation: spin 300s linear infinite; }
@keyframes kdDrift { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@keyframes kdGlow { from { opacity: .45; } to { opacity: 1; } }

/* ==========================================================================
   ENVELOPE FRAME: right after opening, the site sits inside the red
   envelope (a thin sliver around the edges) until the guest scrolls or taps.
   ========================================================================== */
.frame { display: none; }
.frame.is-on {
  display: block; position: fixed; inset: 0; z-index: 150; pointer-events: none;
  --frame-m: 16px;
}
.frame__window {
  position: absolute; inset: var(--frame-m); border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, .7),
    0 0 0 200vmax #6B0F1D,
    inset 0 2px 14px rgba(0, 0, 0, .14);
  transition: inset .9s cubic-bezier(.65, 0, .35, 1), border-radius .9s ease, opacity .5s ease .55s;
}
.frame.is-releasing .frame__window { inset: calc(var(--frame-m) * -2); border-radius: 0; opacity: 0; }

/* ==========================================================================
   PALETTE preview switcher (shown only with ?palette= in the address)
   ========================================================================== */
.palettes {
  position: fixed; left: 16px; bottom: calc(var(--lane-h) + 16px); z-index: 96;
  display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px;
  max-width: calc(100vw - 90px);
  border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.palettes__name { font-size: .78rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 4px; }
.palettes__chip {
  flex: none; width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.palettes__chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.palettes__chip--silk { background: linear-gradient(135deg, #F9F9FB 50%, #1E293B 50% 75%, #990000 75%); }
.palettes__chip--gilded { background: linear-gradient(180deg, #9CAF88 0 34%, #E9DDAA 34% 67%, #FFFDF9 67%); }
.palettes__chip--sindoor { background: linear-gradient(180deg, #8C1C13 0 34%, #D8A39D 34% 67%, #FAF6F0 67%); }
.palettes__chip--mist { background: linear-gradient(180deg, #8A9A86 0 34%, #C8D3C5 34% 67%, #F9FBF7 67%); }
.palettes__chip--botanical { background: linear-gradient(135deg, #FFFDF9 50%, #9CAF88 50% 75%, #D4AF37 75%); }
@media (max-width: 600px) { .palettes__name { display: none; } }
body.is-locked .palettes { display: none; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center; padding: 60px 64px;
  background: rgba(var(--night-rgb), .95);
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__figure { margin: 0; text-align: center; }
.lightbox__figure img { max-width: min(92vw, 1200px); max-height: 80vh; width: auto; height: auto; margin: 0 auto; border-radius: 8px; box-shadow: 0 30px 80px -20px #000; }
.lightbox__figure figcaption { margin-top: 14px; color: var(--gold-soft); font-family: var(--f-display); font-style: italic; font-size: 1.15rem; }
.lightbox__close, .lightbox__nav {
  position: absolute; border: 1px solid rgba(212, 175, 55, .5); background: rgba(var(--deep-rgb), .7); color: var(--gold-soft);
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.8rem; line-height: 1;
  display: grid; place-items: center;
}
.lightbox__close { top: 14px; right: 14px; }
.lightbox__nav--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox { padding: 60px 10px 90px; }
  .lightbox__nav { top: auto; bottom: 20px; transform: none; }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .hero-in { opacity: 1; }
}