/* ------------------------------------------------------------------
   Palette sampled from the reference reel (illustrated BAPS invite):
   blush-pink dawn · peach arch · cream-yellow + marigold · sky blue ·
   palm green · rose-gold line art · warm sandstone
------------------------------------------------------------------- */
:root {
  --pink-1: #fce9ee;
  --pink-2: #f5cad8;
  --pink-3: #eeaec4;
  --peach: #f7d4c0;
  --peach-2: #f0b99c;
  --cream: #fdf6d9;
  --cream-2: #fbeeb8;
  --sky: #d4eaf6;
  --sky-2: #b7d9ee;
  --green: #3f7a45;
  --green-2: #2d5f37;
  --marigold: #f4a022;
  --gold: #b98a3e;
  --gold-2: #d9b56a;
  --sand: #dcb28c;
  --ink: #3b2a30;
  --muted: #7d6068;
  --serif: "Cormorant Garamond", Georgia, serif;
  --display: "Cinzel", "Cormorant Garamond", serif;
  --script: "Pinyon Script", cursive;
  --deva: "Noto Serif Devanagari", serif;
  --ease: cubic-bezier(.22,.8,.24,1);
}
/* Gujarati: swap fonts that lack Gujarati glyphs; drop tracking/caps which break Indic shaping */
html[lang="gu"] {
  --serif: "Noto Serif Gujarati", "Rasa", serif;       /* reading text: the most comfortable Gujarati serif at paragraph size */
  --display: "Rasa", "Noto Serif Gujarati", serif;     /* names, headings, labels, buttons: refined, calligraphic contrast */
  --script: "Rasa", "Noto Serif Gujarati", serif;      /* greetings + event names. (Kumar One is retired: it visibly split letters apart, e.g. કીર્ત ન) */
}
html[lang="gu"] * { letter-spacing: 0 !important; text-transform: none !important; }
html[lang="gu"] body { line-height: 1.7; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink);
  background: var(--pink-1); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.locked { overflow: hidden; height: 100dvh; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }
.wrap.narrow { width: min(620px, 100% - 32px); }
[hidden] { display: none !important; }
section { position: relative; overflow: hidden; padding: clamp(60px, 10vw, 110px) 0; }

/* ---------- Language toggle ---------- */
.lang {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 200; display: flex;
  border: 1px solid var(--gold); border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.9);
}
.lang button { font: 600 13px/1 var(--display); padding: 9px 13px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--gold); color: #fff; }
html[lang="gu"] .lang button { font-family: "Rasa", "Noto Serif Gujarati", serif; }
html[lang="gu"] .names, html[lang="gu"] .fam h3 { font-family: var(--display); font-weight: 600; }
html[lang="gu"] .fam-role, html[lang="gu"] .section-title { font-weight: 700; }

/* ---------- Decoration ---------- */
.toran { position: absolute; top: 0; left: 0; right: 0; height: 64px; background: var(--toran) repeat-x top center / 44px 64px; z-index: 2; pointer-events: none; }
.palm { position: absolute; width: clamp(130px, 34vw, 250px); aspect-ratio: 250/270; z-index: 0; pointer-events: none; opacity: .95; }
.palm svg { width: 100%; height: 100%; display: block; }
.palm-l { left: -18px; bottom: 0; transform-origin: bottom left; animation: sway 7s ease-in-out infinite; }
.palm-r { right: -18px; bottom: 0; transform: scaleX(-1); animation: sway 8s ease-in-out infinite reverse; }
.hero .palm { bottom: clamp(30px, 9vw, 80px); width: clamp(170px, 46vw, 300px); z-index: 2; }
.palm.small { width: clamp(90px, 22vw, 170px); bottom: 0; opacity: .85; }
@keyframes sway { 50% { rotate: 3deg; } }

/* ---------- Gate ---------- */
/* transparent so the real invitation is revealed behind the doors; ONE shared perspective so the pair swings as a set */
#gate { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: transparent; perspective: 2600px; perspective-origin: 50% 45%; }
.door { position: absolute; top: 0; bottom: 0; width: 50.2%; z-index: 2; transition: transform 3s cubic-bezier(.55, .06, .2, 1); will-change: transform; }
.door-left  { left: 0;  transform-origin: left center; }
.door-right { right: 0; transform-origin: right center; }
.door-art {
  position: absolute; inset: 0;
  /* Real art: assets/img/02_gate_left.webp / 03_gate_right.png */
  background-color: var(--sand);
  background-image:
    radial-gradient(ellipse at 50% 22%, rgba(255,255,255,.35), transparent 60%),
    repeating-linear-gradient(90deg, rgba(185,138,62,.22) 0 2px, transparent 2px 44px),
    linear-gradient(180deg, #e9c4a4, #cf9a72);
  border: 1px solid var(--gold); box-shadow: inset 0 0 50px rgba(120,70,40,.35);
}
.door-left .door-art  { background-image: var(--gate-l, none), radial-gradient(ellipse at 100% 30%, rgba(255,255,255,.4), transparent 60%), repeating-linear-gradient(90deg, rgba(185,138,62,.22) 0 2px, transparent 2px 44px), linear-gradient(180deg, #e9c4a4, #cf9a72); background-size: cover; background-position: right center; }
.door-right .door-art { background-image: var(--gate-r, none), radial-gradient(ellipse at 0% 30%, rgba(255,255,255,.4), transparent 60%), repeating-linear-gradient(90deg, rgba(185,138,62,.22) 0 2px, transparent 2px 44px), linear-gradient(180deg, #e9c4a4, #cf9a72); background-size: cover; background-position: left center; }
/* doors swing OUTWARD (toward the viewer), hinged at the outer edges; they fade away as they finish so no stretched sliver lingers */
#gate.open .door-left  { transform: rotateY(-84deg); }
#gate.open .door-right { transform: rotateY(84deg); }
#gate.open .door { opacity: 0; transition: transform 3s cubic-bezier(.55, .06, .2, 1), opacity .7s ease 2.2s; }
/* step 1 ("opening"): the greeting lifts away first */
#gate.opening .gate-center, #gate.open .gate-center { opacity: 0; transform: translateY(-10px) scale(.94); pointer-events: none; transition: opacity .45s ease, transform .45s ease; }
#gate.gone { display: none; }

/* "Press to open the doors": the card's whole scalloped border flashes bright gold once, timed to the tap.
   A quick pulse rather than a light travelling round it: the card fades out over .45s right after the tap (see
   "step 1" above), so anything slower would spend most of its life on an already-invisible card.
   The glow is two plain stroked paths (a wide dim "halo" behind a thin bright "core"), not a CSS filter/blur:
   filter on an animated element can force an expensive repaint on some phones, and this reads much the same. */
.arch-glow { opacity: 0; }
.arch-glow-halo { stroke: #ffd98a; stroke-width: 9; }
.arch-glow-core { stroke: #fff6e0; stroke-width: 2.4; stroke-linecap: round; }
#gate.opening .arch-glow-halo { animation: archLinePulseHalo .42s ease-out both; }
#gate.opening .arch-glow-core { animation: archLinePulseCore .42s ease-out both; }
@keyframes archLinePulseHalo { 0% { opacity: 0; } 22% { opacity: .5; } 100% { opacity: 0; } }
@keyframes archLinePulseCore { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #gate.opening .arch-glow-halo, #gate.opening .arch-glow-core { animation: none; } }
.gate-center { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; transition: opacity 1s ease, transform 1.4s var(--ease); }
.gate-om { font-family: var(--deva); font-size: clamp(60px, 15vw, 100px); color: var(--gold); text-shadow: 0 0 30px rgba(255,255,255,.9); animation: glow 3.5s ease-in-out infinite; }
.gate-greet { font-family: var(--script); font-size: clamp(36px, 10vw, 58px); color: var(--green-2); margin: 6px 0 26px; text-shadow: 0 2px 14px rgba(255,255,255,.8); }
.gate-hint { margin-top: 18px; font-size: 15px; color: var(--ink); opacity: .75; }
@keyframes glow { 50% { text-shadow: 0 0 46px rgba(255,255,255,1); } }

/* ---------- Buttons ---------- */
.btn-gold, .btn-ghost { font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; display: inline-block; cursor: pointer; text-align: center; transition: transform .25s var(--ease), box-shadow .25s; }
.btn-gold { font-size: 14px; padding: 15px 34px; border: 0; border-radius: 999px; color: #fff; font-weight: 600; background: linear-gradient(135deg, var(--marigold), var(--gold)); box-shadow: 0 6px 20px rgba(185,138,62,.4); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(185,138,62,.55); }
.btn-gold:disabled { opacity: .6; cursor: wait; }
.btn-gold.wide { display: block; width: 100%; }
.btn-ghost { font-size: 12px; padding: 10px 18px; background: transparent; color: var(--green-2); border: 1px solid var(--green); border-radius: 999px; margin-top: 8px; }
.btn-ghost:hover { background: rgba(63,122,69,.08); }
.sound-btn { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 50; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(255,255,255,.95); color: var(--gold); font-size: 20px; cursor: pointer; }
.sound-btn.muted { opacity: .55; text-decoration: line-through; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .door { transition-duration: .01s; }
  .palm { animation: none; }
}

/* ---------- Hero (pink dawn, mandir rising at the bottom) ---------- */
.hero { min-height: 100dvh; display: grid; place-items: start center; text-align: center; padding: 0; background: var(--hero-bg, none), linear-gradient(180deg, var(--pink-1) 0%, var(--pink-2) 55%, var(--pink-3) 100%); background-size: cover; background-position: center; }
.hero-inner { position: relative; z-index: 1; padding: 96px 22px 230px; max-width: 700px; }
/* Blessing portraits: one ring (Mahant Swami) or, when the left photo exists, a pair (Pramukh Swami on the left) */
.blessing-wrap { margin: 0 auto 44px; }
.blessing-pair { display: flex; justify-content: center; align-items: center; gap: 4px; }
.blessing-fig { position: relative; width: min(280px, 72vw); aspect-ratio: 1; margin: 0; display: grid; place-items: center; transition: transform 1.4s var(--ease) .25s; }
.blessing-fig .mandala { position: absolute; inset: 0; animation: spin 90s linear infinite; }
.blessing-fig.left .mandala { animation-direction: reverse; }   /* the two rings turn in opposite directions */
.blessing-fig .mandala svg { width: 100%; height: 100%; }
.blessing-fig img { width: 60%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--gold-2); box-shadow: 0 6px 22px rgba(120,60,80,.25); }
.blessing-cap { text-align: center; text-wrap: balance; margin-top: 6px; font-family: var(--display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.blessing-wrap.pair .blessing-fig { width: min(224px, 42vw); }
/* two-column desktop hero: the pair must fit the (half-width) text column, minus its 40px side padding */
@media (min-width: 900px) { .blessing-wrap.pair .blessing-fig { width: min(224px, calc((50vw - 80px) / 2 - 6px)); } }
/* entrance: the two portraits glide in from either side to meet in the middle */
.blessing-wrap.pair.reveal:not(.in) .blessing-fig.left  { transform: translateX(-18px); }
.blessing-wrap.pair.reveal:not(.in) .blessing-fig.right { transform: translateX(18px); }
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .blessing-fig .mandala { animation: none; } .blessing-fig { transition: none; } }
.sloka-dev { font-family: var(--deva); font-weight: 700; color: var(--green-2); font-size: clamp(24px, 6vw, 38px); line-height: 1.5; }
.sloka-tr { font-style: italic; font-size: 17px; color: var(--muted); margin-top: 6px; }
.ornament { color: var(--gold); letter-spacing: .6em; margin: 24px 0; font-size: 14px; }
.hero-line { font-size: clamp(17px, 4vw, 21px); max-width: 560px; margin: 0 auto 26px; color: var(--ink); }
.names { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 11vw, 80px); line-height: 1.12; letter-spacing: .08em; color: var(--ink); }
.names span { display: block; }
.names em { display: block; font-family: var(--script); font-style: normal; color: var(--gold); font-size: .7em; line-height: 1; margin: 4px 0; }
.hero-date { font-family: var(--display); letter-spacing: .18em; font-size: clamp(12px, 3.3vw, 16px); text-transform: uppercase; margin-top: 26px; color: var(--green-2); }
.couple-art { display: block; width: min(360px, 80vw); margin: 30px auto 0; }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; height: clamp(150px, 42vw, 240px); background: var(--skyline-img, none) center bottom / auto 100% no-repeat; }
.skyline svg { width: 100%; height: 100%; display: block; }

/* ---------- Common ---------- */
.section-title { font-family: var(--display); font-weight: 400; text-align: center; font-size: clamp(22px, 5.5vw, 34px); letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); margin-bottom: 14px; }
.section-title::after { content: ""; display: block; width: 90px; height: 2px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.section-sub { text-align: center; color: var(--muted); max-width: 520px; margin: 0 auto 30px; text-wrap: balance; }
.section-title { text-wrap: balance; }

/* ---------- Families (blush → cream) ---------- */
.families { background: linear-gradient(180deg, var(--pink-3), var(--cream)); }
.fam-grid { display: grid; gap: 22px; align-items: center; text-align: center; } /* no gap above: the heading that used to sit over this grid was removed 2026-11-03 */
.fam-role { font-family: var(--display); letter-spacing: .25em; font-size: 13px; text-transform: uppercase; color: #7a1f33; font-weight: 700; } /* deep maroon: readable on the pink */
.fam h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 5vw, 28px); margin: 8px 0; color: var(--ink); }
.fam-rel { font-style: italic; color: var(--muted); }
.fam-par { font-size: 20px; }
.fam-amp { font-family: var(--script); font-size: 64px; color: var(--gold); }
@media (min-width: 820px) { .fam-grid { grid-template-columns: 1fr auto 1fr; } }

/* ---------- Events (cream-yellow, marigold toran) ---------- */
.events { background: linear-gradient(180deg, var(--cream), var(--cream-2) 60%, var(--cream)); padding-top: clamp(110px, 16vw, 150px); }
.events .toran { top: 0; }
.event-list { display: grid; gap: 34px; margin-top: 44px; }
.ev { position: relative; background: rgba(255,255,255,.62); border: 1px solid var(--gold-2); border-radius: 20px; padding: 26px 22px 24px; box-shadow: 0 10px 28px rgba(150,110,40,.12); text-align: center; display: grid; gap: 3px; }
.ev-day { font-family: var(--display); letter-spacing: .28em; font-size: 13px; text-transform: uppercase; color: var(--gold); }
.ev-datebar { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--display); color: var(--ink); }
.ev-datebar .m { font-size: 20px; letter-spacing: .2em; text-transform: uppercase; }
.ev-datebar .d { font-size: 54px; line-height: 1; padding: 0 14px; border-inline: 2px solid var(--gold-2); }
.ev-datebar .y { font-size: 20px; letter-spacing: .1em; }
.ev h3 { font-family: var(--script); font-weight: 400; font-size: clamp(34px, 8.5vw, 44px); color: var(--green-2); line-height: 1.2; margin-top: 8px; }
.ev-sub { font-style: italic; color: var(--muted); }
.ev-time { font-family: var(--display); letter-spacing: .1em; margin-top: 8px; color: #b3620a; font-weight: 600; }
.ev-venue { margin-top: 2px; }
.ev-map { justify-self: center; margin-top: 10px; font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); border-bottom: 1px solid var(--gold); text-decoration: none; padding-bottom: 2px; }
@media (min-width: 820px) { .event-list { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Countdown (sky blue) ---------- */
.countdown { background: linear-gradient(180deg, var(--cream), var(--sky) 45%, var(--sky-2)); text-align: center; }
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 34px; max-width: 600px; margin-inline: auto; }
.cd div { border: 1px solid var(--gold-2); border-radius: 16px; padding: 18px 4px; background: rgba(255,255,255,.6); }
.cd b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 8vw, 44px); color: var(--green-2); line-height: 1.1; }
.cd span { font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.countdown .palm.small { bottom: -10px; }

/* ---------- RSVP (sky → peach, arch frame like the reel's "venue" scene) ---------- */
/* sky → peach needs a pale-pink midpoint; a straight blue→peach blend passes through a muddy grey */
.rsvp { background: linear-gradient(180deg, var(--sky-2) 0%, var(--sky) 22%, #fdf1f0 58%, var(--peach) 100%); }
/* the top is a big arch, so the form must start well below the curve and be inset from its sides
   (a line at depth h needs inset ≥ r − √(r² − (r − h)²); ~128px of clear top space keeps text inside on every width) */
.arch { position: relative; background: linear-gradient(180deg, #fff6ee, var(--peach)); border: 2px solid var(--gold-2); border-radius: 240px 240px 22px 22px; padding: clamp(128px, 30vw, 150px) clamp(22px, 6vw, 46px) 30px; box-shadow: 0 14px 40px rgba(150,90,60,.18), inset 0 0 0 6px rgba(255,255,255,.55); }
.arch::before { content: "✦"; position: absolute; top: clamp(56px, 13vw, 72px); left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 22px; letter-spacing: 0; line-height: 1; }
.arch .field { display: block; margin-bottom: 18px; border: 0; }
.field > span, .field > legend, .field > .field-cap { display: block; font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); margin-bottom: 7px; font-weight: 600; }
.field small { text-transform: none; letter-spacing: 0; font-family: var(--serif); color: var(--muted); font-size: 14px; font-weight: 400; }
input[type=text], input[type=tel], input[type=email], input[type=date], textarea { width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; color: var(--ink); background: #fff; border: 1px solid #e3c9b8; border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,138,62,.22); }
.row { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .row { grid-template-columns: 1fr 1fr; } }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice label, .checks label { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid #e3c9b8; border-radius: 10px; background: #fff; cursor: pointer; }
.checks { display: grid; gap: 8px; }
.checks small { color: var(--muted); font-size: 14px; }
input[type=radio], input[type=checkbox] { accent-color: var(--green); width: 18px; height: 18px; flex-shrink: 0; }
/* The playful "Regretfully, no" (main.js, "A playful Regretfully, no"): it hops twice into a spare row that opens up UNDER the options, so it can
   never land on another field, and a little speech bubble appears ON TOP of it - on the same side of the row, edge to edge with the pill, with a
   pointer aimed at the middle of the box - so the question can't be missed. The options never move: the bubble is absolutely positioned inside the
   options row and the pill is moved with a transform, so only what is below them is pushed down (where the bubble sits, which end of the row it is
   on and how much room to make are worked out in main.js and handed over as --note-top / --band / --pill-half and data-side). */
.choice-dodge { position: relative; transition: padding-bottom .38s var(--ease); }
.choice-dodge.dodging { padding-bottom: var(--band, 0px); }
.dodge-note {
  position: absolute; left: 0; right: 0; top: var(--note-top, 0px); margin: 0; pointer-events: none;
  display: grid; align-items: end;            /* both bubbles share ONE cell: the box is as tall as the taller one and never changes height between them; the shorter one sits on the bottom edge, right above the pill */
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s var(--ease), visibility 0s linear .35s;
}
.dodge-note.show { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .3s, transform .35s var(--ease) .3s, visibility 0s; } /* fades in just after the pill has landed (its hop takes .46s), so the two never overlap */
.dodge-note .dn {
  grid-area: 1 / 1; justify-self: start; position: relative; max-width: 100%;   /* on the left end of the row, like a pill that landed there... */
  padding: 7px 15px 8px; border: 1.5px solid var(--gold-2); border-radius: 14px; background: #fffaf0;
  box-shadow: 0 6px 16px rgba(122, 31, 51, .14);
  color: #7a1f33; font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.4;
  opacity: 0; transition: opacity .25s ease;
}
.dodge-note .dn[data-side="right"] { justify-self: end; }                         /* ...or on the right end, when that is where the pill landed */
.dodge-note .dn::after {                       /* the pointer under the bubble, aimed at the middle of the pill (--pill-half = half its width) */
  content: ""; position: absolute; bottom: -7px; left: calc(var(--pill-half, 84px) - 7.5px); width: 12px; height: 12px;
  background: #fffaf0; border-right: 1.5px solid var(--gold-2); border-bottom: 1.5px solid var(--gold-2); border-bottom-right-radius: 3px; transform: rotate(45deg);
}
.dodge-note .dn[data-side="right"]::after { left: auto; right: calc(var(--pill-half, 84px) - 7.5px); }
.dodge-note[data-stage="1"] .dn1, .dodge-note[data-stage="2"] .dn2 { opacity: 1; transition-delay: .12s; } /* the new bubble fades in just after the old one has left */
.dodge-emoji { font-style: normal; white-space: nowrap; }
html[lang="gu"] .dodge-note .dn { font-size: 17px; line-height: 1.7; }
#attendField { scroll-margin-top: 64px; scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom)); } /* when the page nudges to show the whole question, keep it clear of the language switch (top) and the fixed bottom bar (.quicknav) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* read by screen readers, invisible to everyone else */
@media (prefers-reduced-motion: reduce) { .choice-dodge, .dodge-note, .dodge-note .dn { transition: none; } .dodge-note { transform: none; } }
.guest-row { display: flex; gap: 8px; margin-bottom: 8px; }
.guest-row button { border: 1px solid #e3c9b8; background: #fff; border-radius: 10px; width: 46px; font-size: 20px; color: var(--green-2); cursor: pointer; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form-error { color: #a4161a; margin-bottom: 12px; font-size: 16px; }
.thanks { text-align: center; padding: 20px 4px 30px; }
.thanks-om { font-family: var(--deva); font-size: 64px; color: var(--gold); }
.thanks h3 { font-family: var(--script); font-weight: 400; font-size: 46px; color: var(--green-2); }

/* ---------- Calendar (peach → blush) ---------- */
.cal { background: linear-gradient(180deg, var(--peach), var(--pink-2)); text-align: center; }
.cal-help { color: var(--muted); font-size: 15px; margin: 12px 0 30px; }
.cal-list { display: grid; gap: 10px; text-align: left; }
.cal-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--gold-2); border-radius: 14px; background: rgba(255,255,255,.65); }
.cal-item b { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--green-2); }
.cal-item small { font-size: 15px; color: var(--muted); }
.cal-links { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.cal-links a { font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-2); text-decoration: none; border: 1px solid var(--gold); border-radius: 999px; padding: 7px 12px; text-align: center; white-space: nowrap; background: #fff; }
.cal-links a:hover { background: var(--cream); }

.foot { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--pink-2), var(--pink-3)); color: var(--ink); text-align: center; padding: 50px 16px calc(50px + env(safe-area-inset-bottom)); }
.foot > p { position: relative; z-index: 1; }
.foot-greet { font-family: var(--script); font-size: 42px; color: var(--green-2); }

/* ---------- Real illustrated art (added when assets/img/04_mandir_skyline.* exists) ---------- */
.skyline.art { height: min(41vw, 450px); background-size: min(100%, 1120px) auto; background-position: center bottom; }
.hero.has-art .palm { display: none; }               /* the illustration already has palms */
.hero.has-art .hero-inner { padding-bottom: calc(min(41vw, 450px) + 24px); }
.couple-art { filter: drop-shadow(0 10px 18px rgba(120,60,80,.18)); }

/* ---------- Gate plaque: keeps the greeting legible over the carved doors ---------- */
.gate-plaque {
  width: min(86%, 340px); text-align: center; padding: 44px 24px 26px;
  background: radial-gradient(ellipse at 50% 0%, #fffaf0, var(--cream) 70%);
  border: 2px solid var(--gold-2); border-radius: 190px 190px 24px 24px;
  box-shadow: 0 18px 50px rgba(90,50,20,.35), inset 0 0 0 5px rgba(255,255,255,.65);
}
.gate-plaque .gate-om { text-shadow: none; }
.gate-plaque .gate-greet { text-shadow: none; margin-bottom: 20px; }
.gate-plaque .gate-hint { margin-top: 14px; font-size: 14px; }
.gate-plaque .gate-greet { font-size: clamp(28px, 8.2vw, 40px); white-space: nowrap; }

/* couple sits ABOVE the mandir, never overlapping the roof */
.hero.has-art .skyline { z-index: 0; }
.hero.has-art .hero-inner { padding-bottom: calc(min(41vw, 450px) + 12px); }
.hero.has-art .couple-art { position: relative; z-index: 1; width: min(360px, 78vw); }

/* ---------- Hero scene: one illustration (couple + mandir + palms), replaces the separate pieces ---------- */
.hero.has-scene .couple-art, .hero.has-scene .skyline, .hero.has-scene .palm { display: none; }
.hero.has-scene { display: block; }
.hero.has-scene .hero-inner { padding-bottom: 0; margin: 0 auto; }
.scene { position: relative; z-index: 0; margin: -36px auto 0; width: 100%; max-width: 760px; }
.scene img { display: block; width: 100%; height: auto;
  /* dissolve the picture's sky into the hero's pink gradient */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }

@media (min-width: 900px) {
  .hero.has-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 100vh; }
  .hero.has-scene .hero-inner { align-self: center; padding: 110px 40px 60px; max-width: 640px; }
  .scene { margin: 0; max-width: none; height: 100%; min-height: 100vh; }
  .scene img { height: 100%; min-height: 100vh; object-fit: cover; object-position: center bottom;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%);
            mask-image: linear-gradient(to right, transparent 0, #000 24%); }
}

/* The scene now ends on sharp petals/tiles; the NEXT section overlaps it with a torn-paper edge (see "Paper" block at the end),
   so there is no bottom fade any more. Only the sky at the top (mobile) / left edge (desktop) dissolves into the hero gradient. */

/* ============================================================
   Travel & Stay · FAQ · sticky quick-nav
   ============================================================ */
.travel { background: linear-gradient(180deg, var(--sky-2), var(--sky) 35%, var(--cream)); }
.tv-grid { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 720px) { .tv-grid { grid-template-columns: repeat(2, 1fr); } }
.tv-card { background: rgba(255,255,255,.7); border: 1px solid var(--gold-2); border-radius: 20px; padding: 24px 22px; text-align: center; box-shadow: 0 10px 26px rgba(120,90,50,.1); }
.tv-icon { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.tv-card h3 { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--green-2); margin-bottom: 8px; }
.tv-card p { color: var(--ink); font-size: 18px; }
.tv-contact { margin: 26px auto 0; max-width: 460px; text-align: center; background: rgba(255,255,255,.7); border: 1px solid var(--gold-2); border-radius: 20px; padding: 22px; }
.tv-contact h3 { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); }
.tv-contact p { margin-top: 4px; }
.tv-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.tv-btns .btn-ghost { margin-top: 0; font-size: 13px; padding: 11px 20px; }
.tv-map { text-align: center; margin-top: 28px; }
.tv-map .btn-gold { display: inline-block; }

.faq { background: linear-gradient(180deg, var(--cream), var(--cream-2) 55%, var(--sky-2)); }
.faq-list { margin-top: 30px; }
.faq-item { background: rgba(255,255,255,.72); border: 1px solid var(--gold-2); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--green-2); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--gold); flex-shrink: 0; }
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.faq-a { padding: 0 18px 18px; color: var(--ink); }
.faq-a a { color: var(--green-2); text-decoration-color: var(--gold); }
/* "What are the meal timings?" (config.js → faq id "meals"): one line per meal, name left and time right, a dotted gold rule between lines.
   If a line is too narrow for both, the time drops under the name and stays right-aligned. */
.meal-times { margin-top: 10px; }
.meal-times > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; padding: 9px 0; border-bottom: 1px dotted var(--gold-2); }
.meal-times > div:last-child { border-bottom: 0; padding-bottom: 0; }
.meal-times dt { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--green-2); }
.meal-times dd { margin-left: auto; white-space: nowrap; font-weight: 600; color: #9a5208; font-variant-numeric: lining-nums; } /* lining figures: the serif's default old-style "11:30" / "1:30" read like "ɪɪ:30" / "ɪ:30" */
html[lang="gu"] .meal-times dt { font-size: 16px; letter-spacing: 0; }

.quicknav {
  position: fixed; left: 12px; right: 70px; max-width: 440px; margin-inline: auto; z-index: 60;
  bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 2px; padding: 5px;
  background: rgba(255,255,255,.96); border: 1px solid var(--gold); border-radius: 999px; box-shadow: 0 6px 22px rgba(90,50,60,.18);
  transform: translateY(150%); transition: transform .45s var(--ease);
}
.quicknav.show { transform: none; }
.quicknav a { flex: 1; text-align: center; padding: 11px 4px; border-radius: 999px; font: 600 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background .25s, color .25s; }
.quicknav a.active { background: var(--cream-2); color: var(--green-2); }
.quicknav a.cta { background: linear-gradient(135deg, var(--marigold), var(--gold)); color: #fff; }
.quicknav a.cta.active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.quicknav a[hidden] { display: none; }
html[lang="gu"] .quicknav a { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .quicknav { transition: none; } }
/* keep the last section clear of the floating menu */
.foot { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

/* Two-line sloka: honour the line break from config; slightly smaller so each line stays tidy on phones */
.sloka-dev, .sloka-tr { white-space: pre-line; }
.sloka-dev { font-size: clamp(20px, 5.2vw, 34px); }

/* ---------- Door-opening sequence (tap → greeting lifts → doors swing → light spills → invitation settles) ---------- */
/* the inner face falls into shade toward the free edge as each door turns out */
.door::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 3s cubic-bezier(.55, .06, .2, 1); }
.door-left::after  { background: linear-gradient(90deg, rgba(30,12,4,0) 30%, rgba(30,12,4,.7)); }
.door-right::after { background: linear-gradient(270deg, rgba(30,12,4,0) 30%, rgba(30,12,4,.7)); }
#gate.open .door::after { opacity: 1; }
/* warm light between the doors */
.gate-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 55% 75% at 50% 48%, rgba(255, 240, 200, .98), rgba(255, 214, 150, .55) 45%, rgba(255, 200, 140, 0) 75%); }
#gate.open .gate-glow { animation: gateGlow 3.4s ease-out forwards; }
@keyframes gateGlow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
/* the invitation starts slightly enlarged behind the doors, then settles as they open */
.hero { transition: transform 3.6s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 35%; }
body.locked .hero { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .door::after, .hero { transition: none; }
  #gate.open .gate-glow { animation: none; }
  body.locked .hero { transform: none; }
}

/* ---------- Gate emblem (replaces ॐ once assets/img/10_gate_emblem.* exists; artwork is wider than tall) ---------- */
.gate-om.emblem, .thanks-om.emblem { animation: none; text-shadow: none; line-height: 0; }
.gate-om.emblem img, .thanks-om.emblem img { display: block; margin: 0 auto; height: auto; width: clamp(150px, 44vw, 190px); filter: drop-shadow(0 4px 12px rgba(120, 70, 30, .28)); }

/* ============================================================
   Paper · hero buttons · warm line
   ============================================================ */
/* Each section is a sheet of paper laid over the one above with a torn top edge (polygon generated in decor.js → --tear).
   The sharp end of the hero photo sits underneath the first tear, so there is no blur/fade. */
.families, .events, .countdown, .travel, .faq, .rsvp, .cal, .foot {
  margin-top: -12px;
  -webkit-clip-path: polygon(var(--tear), 100% 100%, 0 100%);
          clip-path: polygon(var(--tear), 100% 100%, 0 100%);
}
.events .toran { top: 12px; }           /* keep the garland's string clear of the torn edge */

/* fibre-white lip along each torn edge + fine paper grain (both live inside the clipped sheet) */
.families::before, .events::before, .countdown::before, .travel::before, .faq::before, .rsvp::before, .cal::before, .foot::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain), linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 15px);
  background-size: 180px 180px, 100% 15px;
  background-repeat: repeat, no-repeat;
}
/* soft shade at the foot of each sheet = the shadow the next torn sheet casts on it */
.families::after, .events::after, .countdown::after, .travel::after, .faq::after, .rsvp::after, .cal::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(90,50,60,.14), rgba(90,50,60,0));
}

/* handwritten warm line above the RSVP heading */
.warm-line { font-family: var(--script); font-size: clamp(28px, 7.4vw, 38px); line-height: 1.25; color: var(--green-2); text-align: center; margin-bottom: 16px; }
html[lang="gu"] .warm-line { font-size: clamp(20px, 5.4vw, 26px); line-height: 1.6; }
/* ---------- Outfit colour guide (inside the "What should I wear?" FAQ) ---------- */
.dc { margin-top: 16px; }
.dc-h { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--green-2); text-align: center; margin-bottom: 12px; }

/* the picker: all four celebrations visible at once, no scrolling */
.dc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.dc-chip { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 10px 3px 9px; border-radius: 16px; border: 2px solid transparent; font-family: inherit; color: var(--ink);
  background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(217,181,106,.6); cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s, background .35s; }
.dc-chip i { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.08); transition: transform .35s var(--ease); }
.dc-chip b { font: 600 clamp(10px, 2.9vw, 12px)/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.dc-chip small { font-size: clamp(11px, 3vw, 13px); color: var(--muted); line-height: 1; }
.dc-chip.on { background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; box-shadow: 0 8px 18px color-mix(in srgb, var(--c2) 32%, transparent); transform: translateY(-2px); }
.dc-chip.on i { transform: scale(1.18); }
.dc-chip:focus-visible, .dc-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ONE card at a time: each card fills the track; scroll-snap gives the swipe its "click into place" feel */
.dc-track { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-padding: 0 4px; padding: 6px 4px 22px; }
.dc-track::-webkit-scrollbar { display: none; }
.dc-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 12px; }

.dc-slide { flex: 0 0 100%; min-width: 0; display: flex; scroll-snap-align: start; scroll-snap-stop: always; } /* what snapping aligns; never transformed */
.dc-card { flex: 1; min-width: 0; border-radius: 22px; overflow: hidden; background: #fffdf8;
  background: color-mix(in srgb, var(--c1) 11%, #fffdf8);
  border: 1px solid color-mix(in srgb, var(--c1) 50%, #fff); box-shadow: 0 12px 28px color-mix(in srgb, var(--c2) 26%, transparent);
  /* the card sliding away shrinks and fades; the arriving one grows into place */
  opacity: .4; transform: scale(.93); transition: opacity .5s ease, transform .55s var(--ease); }
.dc-slide.is-active .dc-card { opacity: 1; transform: none; }
.dc-head { height: 66px; display: grid; place-items: center; position: relative; background: var(--grad); }
.dc-head::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.42) 1.2px, transparent 1.8px) 0 0 / 13px 13px; opacity: .55; pointer-events: none; }
.dc-title { position: relative; z-index: 1; padding: 7px 18px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.14);
  font: 600 14px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.dc-body { padding: 16px 16px 18px; text-align: center; }
.dc-when { font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* the two colours of the day */
.dc-sw { display: grid; align-items: start; gap: 6px; margin: 14px 0 8px; } /* one column per colour, a narrow one for each "&" between them: set inline by the script */
.dc-sw1 { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.dc-sw em { align-self: center; font-style: normal; font-family: var(--script); font-size: 22px; color: var(--gold); line-height: 1; }
.dc-sw b { font: 600 15px/1.2 var(--serif); color: var(--ink); text-align: center; text-wrap: balance; }
.dc-dot { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.2); flex: none; }
.dc-dot.band::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9) 1.4px, transparent 1.9px) 0 0 / 8px 8px; } /* bandhani dots */
.dc-tip { font-style: italic; color: var(--muted); font-size: 16px; margin-bottom: 14px; text-wrap: balance; }

/* outfit strip: ONE photo per celebration (lehengas on the left, sherwanis on the right).
   The two labels above it split where the two groups split (column widths are set inline by the script), so each label sits over its own outfits. */
.dc-look { margin: 0; }
.dc-look figcaption { display: grid; gap: 0 6px; margin-bottom: 8px; }
.dc-look figcaption span { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; text-align: center; }
.dc-look figcaption b { font: 600 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); }
.dc-look figcaption small { font-size: 14px; color: var(--muted); }
.dc-photo { border-radius: 16px; overflow: hidden; background: #ece6dc; border: 1px solid rgba(0,0,0,.06); }
.dc-photo img { display: block; width: 100%; height: auto; }
/* phones: a compact tile, so the event picker AND the whole card fit on one screen together (no scrolling between them) */
@media (max-width: 519px) {
  .dc-head { height: 50px; }
  .dc-title { font-size: 13px; padding: 6px 14px; }
  .dc-body { padding: 12px 10px 14px; }
  .dc-sw { margin: 10px 0 6px; }
  .dc-dot { width: 28px; height: 28px; border-width: 2px; }
  .dc-sw b { font-size: 14px; }
  .dc-tip { font-size: 15px; margin-bottom: 10px; }
  .dc-look figcaption { margin-bottom: 6px; gap: 0 6px; }
  .dc-look figcaption b { font-size: 12px; letter-spacing: .1em; }
  .dc-look figcaption small { font-size: 12px; flex-basis: 100%; text-align: center; } /* sub-label on its own line, so both columns line up */
  .dc-photo { border-radius: 12px; }
}

/* entrance animation each time a card becomes the active one */
.dc-slide.is-active .dc-photo { animation: dcRise .65s var(--ease) both; }
.dc-slide.is-active .dc-dot { animation: dcPop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.dc-slide.is-active .dc-sw1:nth-child(3) .dc-dot { animation-delay: .1s; }
@keyframes dcRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dcPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* footer: swipe hint + arrows (arrows appear for mouse users) */
.dc-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: -6px; }
.dc-hint { font-size: 14px; color: var(--muted); }
.dc-arrow { display: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold); background: #fff; color: var(--green-2); font-size: 22px; line-height: 1; cursor: pointer; }
.dc-arrow:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (min-width: 700px) { .dc-arrow { display: inline-grid; place-items: center; } }
@media (prefers-reduced-motion: reduce) {
  .dc-chip, .dc-chip i, .dc-card { transition: none; }
  .dc-card { opacity: 1; transform: none; }
  .dc-slide.is-active .dc-photo, .dc-slide.is-active .dc-dot { animation: none; }
}

/* ---------- RSVP party: the small "+" under the name adds wife / children / other guests ---------- */
.party { margin: 0 0 20px; }
.party-list { display: grid; gap: 18px; }                    /* phone: each person is two lines (name box, then the pair), so people are told apart by a bigger gap than the one inside a person */
@media (min-width: 560px) { .party { margin-top: -6px; } .party-list { gap: 8px; } } /* one line per person here */
/* A row is the name box, the Male / Female pair and the × (remove). On a phone the pair drops to its own line under the name box (the form is only
   ~270px wide there, so beside it would squeeze the name); from 560px up all three sit on one line. */
.party-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 6px 8px; animation: partyIn .35s var(--ease) both; }
.party-row > input { grid-column: 1; grid-row: 1; min-width: 0; }
.party-row > .party-x { grid-column: 2; grid-row: 1; }
.party-row > .gender { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 560px) {
  .party-row { grid-template-columns: minmax(0, 1fr) auto 46px; }
  .party-row > .gender { grid-column: 2; grid-row: 1; }
  .party-row > .party-x { grid-column: 3; }
}
.party-x { flex: none; width: 46px; border: 1px solid #e3c9b8; background: #fff; border-radius: 10px; color: var(--green-2); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s; }
.party-x:hover { background: var(--cream); }
.party-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
.party-list:empty + .party-bar { margin-top: 2px; }
.party-add { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--gold); background: #fff; color: var(--gold); font-size: 23px; line-height: 1; display: grid; place-items: center; padding: 0 0 2px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(185,138,62,.25); transition: transform .25s var(--ease), background .25s, box-shadow .25s; }
.party-add:hover { transform: scale(1.1); background: var(--cream); box-shadow: 0 5px 14px rgba(185,138,62,.4); }
.party-add:active { transform: scale(.95); }
.party-add:disabled { opacity: .4; cursor: default; transform: none; }
.party-add:focus-visible, .party-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.party-label { font-size: 15px; color: var(--muted); flex: 1 1 150px; min-width: 0; text-wrap: balance; }
.party-count { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: var(--cream); border: 1px solid var(--gold-2); color: var(--green-2); font: 600 12px/1.2 var(--display); letter-spacing: .05em; text-align: center; }
@keyframes partyIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .party-row { animation: none; } .party-add { transition: none; } }

/* ---------- Male / Female next to every name (the guest's own name .who, and each "+" row) ---------- */
.who-line { display: grid; gap: 6px; }                       /* phone: the pair sits right under the name box */
.gender { display: flex; gap: 8px; }
.gender label { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 9px 12px; border: 1px solid #e3c9b8; border-radius: 10px; background: #fff; cursor: pointer; font-size: 16px; line-height: 1.3; white-space: nowrap; transition: border-color .2s, background .2s, box-shadow .2s; }
.gender label:has(input:checked) { border-color: var(--gold); background: var(--cream); box-shadow: 0 0 0 2px rgba(185,138,62,.2); }
.gender.missing label { border-color: #a4161a; box-shadow: 0 0 0 2px rgba(164,22,26,.14); } /* flagged by Send when still unanswered; cleared as soon as one is chosen */
@media (min-width: 560px) {
  .who-line { grid-template-columns: minmax(0, 1fr) auto 46px; gap: 8px; }  /* wide enough: the pair sits beside the name box, as tall as it. The empty last column is where the added rows keep their ×, so every name box and pair lines up */
  .gender label { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .gender label { transition: none; } }

/* ---------- Volume nudge: floating message above the ♪ button + a gentle pulse on the button ---------- */
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: min(92vw, 420px);
  padding: 11px 20px; border-radius: 999px; background: rgba(59, 42, 48, .93); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  font: 600 15px/1.3 var(--serif); text-align: center; cursor: pointer; }
.toast.show { animation: toastIn .45s var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sound-btn.nudge { animation: soundPulse 1.3s ease-out infinite; }
@keyframes soundPulse { 0% { box-shadow: 0 0 0 0 rgba(185,138,62,.6); } 100% { box-shadow: 0 0 0 18px rgba(185,138,62,0); } }
@media (prefers-reduced-motion: reduce) { .toast.show { animation: none; } .sound-btn.nudge { animation: none; box-shadow: 0 0 0 4px rgba(185,138,62,.45); } }

/* ---------- Line-art icons (replace emoji): fine gold strokes that match the rest of the design ---------- */
.ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; color: var(--gold); flex: none; }
.ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gate-hint .ic { width: 1.4em; height: 1.4em; vertical-align: -.35em; margin-right: 2px; }
.btn-gold .ic { color: currentColor; width: 1.35em; height: 1.35em; vertical-align: -.32em; margin-right: 4px; }
.btn-ghost .ic { color: var(--gold); width: 1.3em; height: 1.3em; vertical-align: -.3em; margin-right: 2px; }
.toast .ic { color: var(--gold-2); width: 1.35em; height: 1.35em; vertical-align: -.32em; }
/* ♪ button: the icon replaces the text glyph; a slash shows when muted */
.sound-btn { display: grid; place-items: center; padding: 0; }
.sound-btn .ic { width: 23px; height: 23px; vertical-align: 0; }
.sound-btn.muted { text-decoration: none; }
.sound-btn.muted::after { content: ""; position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--gold); transform: rotate(-45deg); }
/* Travel & Stay cards: the icon sits in a small gold-ringed badge */
.tv-icon { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 0; line-height: 0;
  background: linear-gradient(145deg, #fffdf6, var(--cream)); border: 1px solid var(--gold-2); box-shadow: 0 4px 12px rgba(185,138,62,.18), inset 0 0 0 3px rgba(255,255,255,.9); }
.tv-icon .ic { width: 28px; height: 28px; vertical-align: 0; }

/* ============================================================
   3D gate (three.js, js/gate3d.js). If the canvas is never added, the CSS doors above run unchanged.
   ============================================================ */
.gate-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; opacity: 0; transition: opacity .35s ease; }
#gate.gl-on .gate-gl { opacity: 1; }
/* once the canvas has faded in over them (identical pose), the CSS doors are hidden so they can't show through */
#gate.gl-on .door { animation: hideCssDoors 0s linear .45s forwards; }
@keyframes hideCssDoors { to { visibility: hidden; } }

/* ============================================================
   Event cards: Runethia calligraphy for the names, one shared accent colour for weekday + time
   (Runethia is a DEMO font, personal use only: originals/fonts/Runethia-LICENSE-NOTE.txt)
   ============================================================ */
@font-face {
  font-family: "Runethia";
  src: url("../assets/fonts/runethia.woff2?v=1") format("woff2");   /* Latin only (Basic Latin subset) */
  font-weight: 400; font-style: normal; font-display: swap;
}
:root { --event-accent: #b3620a; }
.ev-day, .ev-time { color: var(--event-accent); }                   /* "WEDNESDAY" now matches "10:00 AM – 11:00 AM" */
.ev h3 { font-family: "Runethia", var(--script); }                   /* Gujarati titles fall back to the Gujarati serif automatically */
html[lang="gu"] .ev h3 { font-family: var(--script); }

/* ============================================================
   Event cards: one colour theme per celebration = two of the colours of the FAQ outfit guide (js/dresscode.js → LOOKS; Sagai and Lagna have a third one there)
   Sagai = sage green + lavender · Kirtan = mustard + peach · Mandvo = bandhani pink + yellow · Lagna = royal blue + maroon
   Each card: name in colour 1, weekday + time in colour 2 (--event-accent, so weekday and time always match)
   ============================================================ */
.ev {
  background: linear-gradient(160deg, var(--ev-bg1, rgba(255,255,255,.62)), var(--ev-bg2, rgba(255,255,255,.62)));
  border-color: var(--ev-line, var(--gold-2));
  box-shadow: inset 0 5px 0 var(--ev-line, transparent), 0 10px 28px rgba(120, 90, 60, .14);
}
.ev h3 { color: var(--ev-title, var(--green-2)); }
.ev-datebar .d { border-inline-color: var(--ev-line, var(--gold-2)); }
.ev-map { color: var(--ev-title, var(--green-2)); border-bottom-color: var(--ev-line, var(--gold)); }

.ev-sagai   { --event-accent: #4f6b4b; --ev-title: #5e4390; --ev-line: #9caf98; --ev-bg1: #f2f7f0; --ev-bg2: #ece5f6; }   /* sage green + lavender */
.ev-kirtan  { --event-accent: #a3441f; --ev-title: #8a5a06; --ev-line: #e0ab3d; --ev-bg1: #fff8e4; --ev-bg2: #ffe8de; }   /* mustard + peach */
.ev-mandvo  { --event-accent: #8f6200; --ev-title: #a3134c; --ev-line: #ef7aa1; --ev-bg1: #fff0f5; --ev-bg2: #fff2c9; }   /* bandhani pink + yellow */
.ev-wedding { --event-accent: #27437a; --ev-title: #85192f; --ev-line: #85192f; --ev-bg1: #f1f5fd; --ev-bg2: #f8e9ec; }   /* royal blue + maroon */

/* single-checkbox row in the RSVP form (same look as the radio "choice" chips) */
.check-one { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid #e3c9b8; border-radius: 10px; background: #fff; cursor: pointer; }

/* ---------- Gate greeting: Arima Madurai (self-hosted, Latin subset; SIL Open Font License, see assets/fonts/ArimaMadurai-OFL.txt) ---------- */
@font-face { font-family: "Arima Madurai"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/ArimaMadurai-Medium.woff2") format("woff2"); }
@font-face { font-family: "Arima Madurai"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/ArimaMadurai-Bold.woff2") format("woff2"); }
.gate-plaque .gate-greet { font-family: "Arima Madurai", var(--script); font-weight: 500; font-size: clamp(22px, 6.6vw, 32px); }
html[lang="gu"] .gate-plaque .gate-greet { font-family: var(--script); font-weight: 600; font-size: clamp(26px, 7.4vw, 36px); } /* Arima Madurai has no Gujarati letters */

/* ---------- Language selector: under the arch while the gate is up, top-right afterwards ---------- */
.lang.lang-gate { position: static; z-index: auto; margin-top: 18px; background: rgba(255, 253, 246, .97); border-color: var(--gold-2); box-shadow: 0 8px 22px rgba(90, 50, 20, .3); }
body > .lang:not(.lang-gate) { transition: opacity .6s ease; }
body.locked > .lang:not(.lang-gate) { opacity: 0; pointer-events: none; }

/* ---------- Families: first names, two-level family lines, monogram ---------- */
.fam h3 { font-size: clamp(30px, 8vw, 42px); letter-spacing: .06em; margin: 6px 0 10px; }
.fam-lines { max-width: 470px; margin-inline: auto; }
.fam-rel { margin-top: 2px; }
.fam-rel + .fam-par + .fam-rel { margin-top: 16px; }
.fam-par { font-size: 19px; line-height: 1.4; text-wrap: balance; }
.fam-amp { display: grid; place-items: center; font-size: 0; }
.fam-amp .mono { display: block; width: clamp(98px, 26vw, 124px); height: auto; filter: drop-shadow(0 6px 14px rgba(120, 80, 30, .22)); }
.gate-plaque .btn-gold { text-wrap: balance; }

/* Grandparent lines ("Granddaughter of …") stay on ONE line; js/main.js fitGrandLines() shrinks the type only as much as needed.
   This is just the starting size so nothing jumps before the script runs. */
.fam-par.gp { white-space: nowrap; font-size: clamp(11px, 3.6vw, 18px); text-wrap: nowrap; }

/* Columns must be exactly the space available (never stretch to their no-wrap text), otherwise long lines would spill past the screen. */
.fam-grid { grid-template-columns: minmax(0, 1fr); }
.fam-grid > *, .fam-lines { min-width: 0; }
@media (min-width: 820px) { .fam-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }

/* ---------- S & A logo (supplied artwork, transparent cut-out) between the two families ---------- */
.fam-amp .mono-img { display: block; width: clamp(130px, 36vw, 176px); height: auto; margin-inline: auto; }

/* Footer "Jai Swaminarayan": same font as the greeting on the gate (Arima Madurai; Gujarati uses the Gujarati serif, which has the letters) */
.foot-greet { font-family: "Arima Madurai", var(--script); font-weight: 500; font-size: clamp(26px, 7.4vw, 36px); }
html[lang="gu"] .foot-greet { font-family: var(--script); font-weight: 600; font-size: clamp(28px, 8vw, 38px); }

/* ---------- S & A logo on the gate and in the hero ---------- */
.gate-plaque .gate-greet { margin-bottom: 6px; }
.gate-logo { display: block; width: 118px; height: auto; margin: 0 auto 12px; }
.hero-logo { display: block; width: clamp(104px, 28vw, 136px); height: auto; margin: 4px auto 2px; }
/* very short screens: keep the gate compact so the arch, button and language selector all stay on screen */
@media (max-height: 700px) { .gate-logo { display: none; } }

/* RSVP: WhatsApp help line */
.rsvp-help { text-align: center; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid rgba(201,161,90,.35); font-size: .95rem; color: #6b4a4a; }
.rsvp-help a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 9px 18px; border: 1px solid var(--gold); border-radius: 999px; color: #7a1f33; text-decoration: none; font-weight: 600; background: rgba(255,255,255,.55); }
.rsvp-help a .ic { width: 1.3em; height: 1.3em; }
.rsvp-help a:hover, .rsvp-help a:focus-visible { background: #fff; }

/* ============================================================
   GUJARATI TYPOGRAPHY SYSTEM  (html[lang="gu"])
   Rasa .................. names, headings, labels, buttons, nav  (refined calligraphic contrast)
   Noto Serif Gujarati ... paragraphs and reading text            (most comfortable at body size)
   Rules: Gujarati has no true italic, so we never fake a slant, hierarchy comes from size/weight/colour ·
   no synthetic bold · generous line-height so vowel marks above and below the line never collide ·
   small labels are set larger than their English small-caps equivalents · no tracking, no capitals.
   ============================================================ */
html[lang="gu"] body { font-size: 18px; line-height: 1.8; }
html[lang="gu"] * { font-style: normal !important; font-synthesis: none; }

/* ---- hero ---- */
html[lang="gu"] .sloka-tr { font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 4.2vw, 19px); line-height: 1.9; color: var(--muted); }
html[lang="gu"] .hero-line { font-size: clamp(17px, 4.5vw, 20px); line-height: 1.95; }
html[lang="gu"] .names { font-size: clamp(44px, 12.5vw, 74px); line-height: 1.3; }
html[lang="gu"] .names em { font-family: var(--script); font-weight: 500; font-size: .5em; line-height: 1.1; margin: 2px 0; }
html[lang="gu"] .hero-date { font-family: var(--display); font-weight: 600; font-size: clamp(16px, 4.4vw, 19px); }
html[lang="gu"] .blessing-cap, html[lang="gu"] .blessing figcaption { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.6; }

/* ---- section headings ---- */
html[lang="gu"] .section-title { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 7.2vw, 36px); line-height: 1.4; }
html[lang="gu"] .section-sub { font-size: 16.5px; line-height: 1.9; }

/* ---- families ---- */
html[lang="gu"] .fam-role { font-family: var(--display); font-weight: 700; font-size: 15px; }
html[lang="gu"] .fam h3 { font-size: clamp(34px, 9.5vw, 46px); line-height: 1.3; margin: 2px 0 10px; }
html[lang="gu"] .fam-rel { font-family: var(--display); font-weight: 500; font-size: 17px; color: var(--muted); }
html[lang="gu"] .fam-par { font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.55; }

/* ---- event cards ---- */
html[lang="gu"] .ev-day { font-family: var(--display); font-weight: 600; font-size: 15px; }
html[lang="gu"] .ev-datebar { font-family: var(--display); font-weight: 600; }
html[lang="gu"] .ev h3 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 9vw, 42px); line-height: 1.3; }
html[lang="gu"] .ev-sub { font-size: 16.5px; }
html[lang="gu"] .ev-time { font-family: var(--display); font-weight: 700; font-size: 18px; }
html[lang="gu"] .ev-venue { font-size: 17px; }
html[lang="gu"] .ev-map { font-family: var(--display); font-weight: 600; font-size: 15px; }

/* ---- countdown ---- */
html[lang="gu"] .cd span { font-family: var(--display); font-weight: 600; font-size: 14px; }

/* ---- travel + FAQ ---- */
html[lang="gu"] .tv-card h3 { font-family: var(--display); font-weight: 700; font-size: 18px; }
html[lang="gu"] .tv-card p { font-size: 16.5px; line-height: 1.9; }
html[lang="gu"] .faq-item summary { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.5; }
html[lang="gu"] .faq-a { font-size: 16.5px; line-height: 1.95; }

/* ---- RSVP form ---- */
html[lang="gu"] .warm-line { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 6.4vw, 30px); line-height: 1.6; }
html[lang="gu"] .field > span, html[lang="gu"] .field > legend, html[lang="gu"] .field > .field-cap { font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.5; }
html[lang="gu"] .field small { font-family: var(--serif); font-weight: 400; font-size: 14px; }
html[lang="gu"] input, html[lang="gu"] textarea, html[lang="gu"] select { font-size: 17px; }
html[lang="gu"] .choice label, html[lang="gu"] .checks label, html[lang="gu"] .check-one, html[lang="gu"] .gender label { font-size: 16.5px; line-height: 1.6; }
html[lang="gu"] .btn-gold, html[lang="gu"] .btn-ghost { font-family: var(--display); font-weight: 700; font-size: 17px; }
html[lang="gu"] .form-error { font-size: 16px; }

/* ---- calendar, nav, footer ---- */
html[lang="gu"] .cal-item b { font-family: var(--display); font-weight: 700; font-size: 17px; }
html[lang="gu"] .cal-item small { font-size: 15.5px; }
html[lang="gu"] .cal-links a { font-family: var(--display); font-weight: 600; font-size: 13.5px; }
html[lang="gu"] .cal-help { font-size: 15px; line-height: 1.8; }
html[lang="gu"] .quicknav a { font-family: var(--display); font-weight: 600; font-size: 14.5px; }
html[lang="gu"] .foot > p { font-size: 17px; }
html[lang="gu"] .gate-hint { font-size: 15px; line-height: 1.7; }

/* ---- Gujarati line-breaking polish: balanced short centred blocks, no lonely last word in paragraphs ---- */
html[lang="gu"] .gate-hint, html[lang="gu"] .hero-line, html[lang="gu"] .section-sub,
html[lang="gu"] .warm-line, html[lang="gu"] .cal-help, html[lang="gu"] .sloka-tr,
html[lang="gu"] .ev-sub, html[lang="gu"] .dc-tip { text-wrap: balance; }
html[lang="gu"] .tv-card p, html[lang="gu"] .faq-a, html[lang="gu"] .fam-par:not(.gp) { text-wrap: pretty; }

/* Gujarati calendar list: text needs the full card width, so the two buttons sit in a row UNDER the event instead of squeezing beside it */
html[lang="gu"] .cal-item { flex-direction: column; align-items: stretch; gap: 12px; }
html[lang="gu"] .cal-item small { display: block; margin-top: 2px; }
html[lang="gu"] .cal-links { flex-direction: row; gap: 8px; }
html[lang="gu"] .cal-links a { flex: 1; text-align: center; padding: 9px 10px; }

/* coach-bus option sits under the "staying" answers */
.field .choice + .check-one { margin-top: 12px; }
.coach-note { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ---------- Sarangpur motifs: peacocks, khijdo tree, carved-stone frame ---------- */
.khijdo { width: clamp(120px, 34vw, 165px); margin: 2px auto 14px; }
.khijdo svg { display: block; width: 100%; height: auto; }
.thanks-birds { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.thanks-birds .bird { width: clamp(78px, 22vw, 104px); aspect-ratio: 250/270; }
.thanks-birds .bird.flip { transform: scaleX(-1); }
.thanks-birds .bird svg { display: block; width: 100%; height: 100%; }
/* thin carved-jali band tracing the RSVP arch, like the white stone of the mandir */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .arch::after {
    content: ""; position: absolute; inset: 7px; pointer-events: none;
    border: 13px solid transparent; border-radius: 233px 233px 15px 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1.5 14.5 8 8 14.5 1.5 8Z' fill='none' stroke='%23c9a15a' stroke-width='1'/%3E%3Ccircle cx='8' cy='8' r='1.7' fill='%23c9a15a'/%3E%3C/svg%3E") 0 0 / 16px 16px;
    opacity: .55;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}
/* painted peacock image (footer corners, thank-you) */
.palm img, .bird img { display: block; width: 100%; height: auto; }
.foot { --pk: clamp(110px, 30vw, 180px); --nav: calc(84px + env(safe-area-inset-bottom)); padding-bottom: calc(var(--pk) * 1.09 + var(--nav) + 8px); } /* keeps the birds clear of the floating bottom bar */
.foot .palm.small { width: var(--pk); opacity: 1; bottom: var(--nav); }

/* ================= Sarangpur elements ================= */
/* --- cusped mandir arches (outline drawn by JS as an SVG behind the content; plain boxes remain the fallback) --- */
.arch-shape { position: absolute; left: 0; top: 0; z-index: -1; overflow: visible; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(150, 90, 60, .2)); }
.gate-plaque .arch-shape { filter: drop-shadow(0 18px 28px rgba(90, 50, 20, .38)); }
.arch, .gate-plaque { isolation: isolate; }
.gate-plaque { position: relative; }
.arch-svg .arch, .arch-svg .gate-plaque { background: none; border: 0; box-shadow: none; }
.arch-svg .arch::after { inset: 15px; } /* carved band sits just inside the scalloped edge */

/* --- gold kalash + red/white flag on the crown of each arch --- */
.apex { position: absolute; left: 50%; top: -66px; width: 48px; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.apex svg { display: block; width: 100%; height: auto; }
.apex .flag { animation: flutter 3.4s ease-in-out infinite; }
@keyframes flutter { 0%, 100% { transform: skewY(-5deg) scaleX(1); } 50% { transform: skewY(6deg) scaleX(.86); } }
@media (prefers-reduced-motion: reduce) { .apex .flag { animation: none; } }
.arch-svg .arch::before { top: clamp(64px, 15vw, 80px); } /* star ornament stays clear of the cusps */

/* carved-rosette lattice for the band (replaces the plain diamonds) */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .arch::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' stroke='%23c9a15a' stroke-width='.9'%3E%3Cpath d='M9 2.5c1.6 2.2 1.6 3.6 0 5.5-1.6-1.9-1.6-3.3 0-5.5zM9 10c1.6 2.2 1.6 3.6 0 5.5-1.6-1.9-1.6-3.3 0-5.5zM2.5 9c2.2-1.6 3.6-1.6 5.5 0-1.9 1.6-3.3 1.6-5.5 0zM10 9c2.2-1.6 3.6-1.6 5.5 0-1.9 1.6-3.3 1.6-5.5 0z'/%3E%3C/g%3E%3Ccircle cx='9' cy='9' r='1.2' fill='%23c9a15a'/%3E%3C/svg%3E");
    background-size: 18px 18px;
  }
}

/* --- Sarangpur photo section --- */
.sarangpur { background: linear-gradient(180deg, #fbeee4, var(--peach) 55%, #f6e0d2); }
.sarangpur .section-title { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sarangpur .pillar { flex: none; width: 22px; }
.sarangpur .pillar svg { display: block; width: 100%; height: auto; }
.sar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; margin-top: 22px; }
.sar-card { margin: 0; text-align: center; }
.sar-card:nth-child(even) { transform: translateY(26px); }
.sar-card.reveal.in:nth-child(even) { transform: translateY(26px); } /* keep the stagger once revealed */
.sar-arch { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; overflow: hidden; border: 2px solid var(--gold-2); box-shadow: 0 10px 26px rgba(150, 90, 60, .22), inset 0 0 0 4px rgba(255, 255, 255, .6); background: #efe0d3; }
.sar-arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sar-arch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px rgba(255, 246, 232, .75); pointer-events: none; }
.sar-card figcaption { margin-top: 10px; font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); }
html[lang="gu"] .sar-card figcaption { font-size: 14px; }
.sarangpur { padding-bottom: 76px; }

/* paper-sheet treatment shared with the other sections */
.sarangpur { margin-top: -12px; -webkit-clip-path: polygon(var(--tear), 100% 100%, 0 100%); clip-path: polygon(var(--tear), 100% 100%, 0 100%); }
.sarangpur::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain), linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 15px); background-size: 180px 180px, 100% 15px; background-repeat: repeat, no-repeat; }
.sarangpur::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgba(90,50,60,.14), rgba(90,50,60,0)); }

/* --- evening footer: dusk sky, stars, lit mandir --- */
.foot { background: linear-gradient(180deg, #1d2a5e 0%, #33407e 48%, #7a5a90 82%, #c98aa4 100%); color: #f4ead8; }
.foot-greet { color: #f6dfae; }
.foot-sky { position: absolute; inset: 0; pointer-events: none; }
.foot-sky svg { display: block; width: 100%; height: 100%; }
.foot-sky .tw { animation: twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .95; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .foot-sky .tw { animation: none; } }
.foot-mandir { position: absolute; left: 50%; bottom: var(--nav); transform: translateX(-50%); width: clamp(150px, 44vw, 230px); pointer-events: none; }
.foot-mandir svg { display: block; width: 100%; height: auto; }
.foot::before { z-index: 0; }
.arch-svg .arch { margin-top: 74px; padding-left: clamp(32px, 8.5vw, 54px); padding-right: clamp(32px, 8.5vw, 54px); } /* room for the kalash above; fields clear of the carved band */
.sarangpur .section-title { display: block; }
.sarangpur .pillar { display: inline-block; vertical-align: middle; margin: -8px 14px 0; width: 20px; }
.foot-mandir svg { overflow: visible; }

/* hero date line: deep maroon so it reads clearly on the pink sky */
.hero-date { color: #7a1f33; font-weight: 600; }
/* Sarangpur photos: level rows, equal frames, captions with equal room */
.sar-grid { align-items: start; gap: 22px 16px; }
.sar-card:nth-child(even), .sar-card.reveal.in:nth-child(even) { transform: none; }
.sar-card .sar-arch { width: 100%; }
.sar-card figcaption { min-height: 2.9em; line-height: 1.45; display: flex; align-items: flex-start; justify-content: center; text-wrap: balance; }
.sarangpur { padding-bottom: 60px; }
/* the carved band is now drawn in the SVG (evenly spaced rosettes that follow the curve), so the CSS band is switched off */
.arch-svg .arch::after { display: none; }
.arch-svg .arch { padding-left: clamp(38px, 9.8vw, 54px); padding-right: clamp(38px, 9.8vw, 54px); }
/* no gold line down the middle where the two doors meet (it read as the flagpole continuing to the top of the screen) */
.door-left .door-art { border-right-color: transparent; }
.door-right .door-art { border-left-color: transparent; }
/* mandir line art (recoloured gold on night navy) between the two peacocks */
.foot { --mw: clamp(140px, 44vw, 200px); padding-bottom: calc(max(var(--pk) * 1.09, var(--mw) * .8) + var(--nav) + 14px); }
.foot-mandir { width: var(--mw); }
.foot-mandir img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 12px rgba(243, 207, 128, .35)); }
/* wide screens: the music button no longer needs to share the row, so the bottom bar is centred exactly */
@media (min-width: 560px) { .quicknav { left: 70px; right: 70px; } }
/* event cards: contents start at the top so neighbouring cards line up even when one title wraps to two lines */
.ev { align-content: start; }
/* wide screens: the four Sarangpur photos sit in one row */
@media (min-width: 900px) {
  .sarangpur .wrap { width: min(1000px, 100% - 48px); }
  .sar-grid { grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
  .sar-card:nth-child(even), .sar-card.reveal.in:nth-child(even) { transform: none; }
}
/* footer stars: fixed-size 390px tiles side by side (were stretched into big blobs on wide screens) */
.foot-sky { display: flex; overflow: hidden; }
.foot-sky svg { flex: 0 0 390px; width: 390px; height: 100%; }
.foot-sky svg:nth-child(even) { transform: scaleX(-1); }
/* door shading on the top, bottom and OUTER edge only - the edge where the two doors meet stays clean (no dark groove down the middle) */
.door-left .door-art  { box-shadow: inset 0 25px 50px -25px rgba(120,70,40,.35), inset 0 -25px 50px -25px rgba(120,70,40,.35), inset 25px 0 50px -25px rgba(120,70,40,.35); }
.door-right .door-art { box-shadow: inset 0 25px 50px -25px rgba(120,70,40,.35), inset 0 -25px 50px -25px rgba(120,70,40,.35), inset -25px 0 50px -25px rgba(120,70,40,.35); }

/* ================= Events timeline: golden thread, lit beads, cards that rise as you scroll ================= */
.events .event-list.tl { display: block; position: relative; margin-top: 30px; padding: 0 0 6px 56px; }
.tl-day { position: relative; margin: 4px 0 18px -56px; padding-left: 56px; }
.tl-day span { display: inline-block; padding: 7px 15px; border: 1px solid var(--gold-2); border-radius: 999px; background: rgba(255,250,240,.9); font: 600 12px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); box-shadow: 0 4px 12px rgba(150,110,40,.12); }
html[lang="gu"] .tl-day span { font-size: 14px; }
.tl-item { position: relative; isolation: isolate; margin: 0 0 30px; }
.tl-node { position: absolute; left: -56px; top: 22px; width: 34px; height: 34px; margin-left: 5px; border-radius: 50%; display: grid; place-items: center; background: #fffaf0; border: 1.5px solid var(--gold-2); color: var(--gold); z-index: 2; transition: background .5s, color .5s, box-shadow .6s, transform .6s var(--ease); }
.tl-node .ic { width: 20px; height: 20px; color: currentColor; margin: 0; }
.tl-item::before { content: ""; position: absolute; left: -22px; top: 38px; width: 22px; height: 2px; background: linear-gradient(90deg, var(--ev-line, var(--gold-2)), transparent); opacity: .7; }
.tl-item::after { content: ""; position: absolute; inset: -34px -18px; z-index: -1; background: radial-gradient(58% 58% at 50% 50%, var(--sky, rgba(255,214,140,.4)), transparent 72%); opacity: 0; transition: opacity 1s; pointer-events: none; }
.tl-item[data-sky="morning"] { --sky: rgba(255, 214, 140, .5); }
.tl-item[data-sky="dusk"]    { --sky: rgba(176, 140, 224, .38); }
.tl-item[data-sky="night"]   { --sky: rgba(76, 96, 178, .3); }
.tl-item.on::after { opacity: 1; }
.tl-item.on .tl-node { background: linear-gradient(135deg, #f7d27a, #e0a02f); color: #fff; box-shadow: 0 0 0 5px rgba(246,169,31,.22), 0 0 18px rgba(246,169,31,.75); transform: scale(1.08); }
.tl-card { position: relative; text-align: center; padding: 20px 16px 16px; border: 1px solid var(--ev-line, var(--gold-2)); border-radius: 20px; background: linear-gradient(160deg, var(--ev-bg1, rgba(255,255,255,.7)), var(--ev-bg2, rgba(255,255,255,.7))); box-shadow: inset 0 5px 0 var(--ev-line, transparent), 0 10px 28px rgba(120,90,60,.14); display: grid; gap: 3px; align-content: start; transition: opacity .8s, transform .8s var(--ease), filter .8s; }
.tl-card h3 { font-family: "Runethia", var(--script); font-weight: 400; font-size: clamp(32px, 8vw, 42px); line-height: 1.2; color: var(--ev-title, var(--green-2)); margin-top: 6px; }
html[lang="gu"] .tl-card h3 { font-family: "Rasa", "Noto Serif Gujarati", serif; font-weight: 700; font-size: clamp(24px, 6.4vw, 30px); }
.tl-card .ev-day { font-family: var(--display); letter-spacing: .28em; font-size: 12px; text-transform: uppercase; color: var(--ev-title, var(--gold)); }
.tl-card .ev-time { font-family: var(--display); letter-spacing: .1em; margin-top: 6px; color: #b3620a; font-weight: 600; }
.tl-card .ev-venue { margin-top: 2px; }
.tl-card .ev-map { justify-self: center; margin-top: 8px; font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ev-title, var(--green-2)); border-bottom: 1px solid var(--ev-line, var(--gold)); text-decoration: none; padding-bottom: 2px; }
/* scroll states (only when JS runs): cards wait dimmed and low, then rise when their bead passes 62% of the screen */
.tl-js .tl-item:not(.on) .tl-card { opacity: .38; transform: translateY(20px) scale(.985); filter: saturate(.55); }
@media (prefers-reduced-motion: reduce) { .tl-card, .tl-node, .tl-item::after { transition: none; } }
/* desktop: the thread runs down the middle, cards alternate left and right */
@media (min-width: 820px) {
  .events .event-list.tl { padding: 0; margin-top: 44px; }
  .tl-day { margin: 6px 0 22px; padding: 0; text-align: center; }
  .tl-item { width: calc(50% - 52px); }
  .tl-item.l { margin-right: auto; } .tl-item.r { margin-left: auto; }
  .tl-item.l .tl-node { left: auto; right: -52px; margin: 0 -17px 0 0; }
  .tl-item.r .tl-node { left: -52px; margin: 0 0 0 -17px; }
  .tl-item.l::before { left: auto; right: -34px; background: linear-gradient(270deg, var(--ev-line, var(--gold-2)), transparent); }
  .tl-item.r::before { left: -34px; }
}

/* ===== timeline on phones: the thread runs down the CENTRE so everything lines up with the heading ===== */
@media (max-width: 819px) {
  .events .event-list.tl { padding: 0; margin-top: 30px; }
  .tl-day { position: relative; z-index: 2; margin: 0 0 34px; padding: 0; text-align: center; }
  .tl-day span { background: #fffaf0; }
  .tl-item { margin: 0 0 56px; }
  .tl-item::before { display: none; }
  .tl-node { left: 50%; top: -18px; margin-left: -17px; }    /* the bead sits on the top edge of its card, centred */
  .tl-card { z-index: 1; padding-top: 28px; }
}
/* waiting cards stay solid (so the thread never shows through) and are dimmed by softening what is on them */
.tl-js .tl-item:not(.on) .tl-card { opacity: 1; filter: saturate(.5) brightness(1.03); }
.tl-js .tl-item:not(.on) .tl-card > * { opacity: .42; }
.tl-card > * { transition: opacity .8s; }
@media (prefers-reduced-motion: reduce) { .tl-card > * { transition: none; } }
@media (max-width: 819px) { .tl-day { margin-bottom: 44px; } }


/* ---------- Personal invitation note on the gate — only present when the link carries a guest's name (e.g. /dhireshbhai).
   Sits between the logo and the "Press to open" button; fades in gently after the gate settles. js/main.js unhides it. ---------- */
.gate-invite { margin: 4px auto 16px; padding: 10px 16px 12px; max-width: 262px; border: 1px solid var(--gold-2); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(253, 246, 217, .7));
  box-shadow: 0 6px 18px rgba(150, 110, 40, .16), inset 0 0 0 3px rgba(255, 255, 255, .7);
  opacity: 0; transform: translateY(8px) scale(.97); }
.gate-invite.show { animation: inviteIn .7s var(--ease) both; }
@keyframes inviteIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.gi-dear { font-family: "Runethia", var(--script), "Rasa", "Noto Serif Gujarati", serif; font-size: clamp(24px, 6.6vw, 30px); line-height: 1.15; color: var(--green-2); text-wrap: balance; overflow-wrap: anywhere; }
html[lang="gu"] .gi-dear { font-family: var(--script), "Rasa", "Noto Serif Gujarati", serif; }   /* Runethia is Latin-only: Gujarati mode keeps the Gujarati serif, exactly like the event names */
.gi-msg { margin-top: 3px; font-style: italic; font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--muted); text-wrap: balance; }
html[lang="gu"] .gi-msg { line-height: 1.6; }
@media (max-height: 700px) { .gate-invite { margin-bottom: 12px; padding: 8px 14px 10px; } .gi-dear { font-size: 22px; } .gi-msg { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .gate-invite { opacity: 1; transform: none; } .gate-invite.show { animation: none; } }
/* With the personal note showing, the gate is ~100px taller. Measured (not guessed): with the logo still visible the finial at the top
   of the arch gets clipped on every screen shorter than ~810px — phones in a browser, and short desktop windows like 1280x800. The gate
   already drops the logo on short screens (max-height: 700px above); when a note is present, drop it up to 830px. js/main.js puts
   .has-invite on #gate. */
@media (max-height: 830px) { #gate.has-invite .gate-logo { display: none; } }
/* Shorter screens: js/main.js (fitGate) adds .fit-1, .fit-2 … to #gate one step at a time and stops as soon as the flag on top of the arch is
   fully on screen — so a tall phone keeps the full design, and a short one (or a long, wrapping name) only loses what it must. Cheapest first:
   1 tighter plaque padding · 2 smaller note · 3 no volume hint (the toast asks again once the doors open) · 4 smaller emblem ·
   5 last resort for very short screens (~500px, e.g. an older phone inside WhatsApp's browser): everything a touch smaller. */
#gate.fit-1 .gate-plaque { padding-top: 34px; padding-bottom: 20px; }
#gate.fit-1 .gate-invite { margin-bottom: 10px; }
#gate.fit-2 .gate-invite { margin-bottom: 8px; padding: 7px 12px 8px; }
#gate.fit-2 .gi-dear { font-size: 20px; }
#gate.fit-2 .gi-msg { font-size: 13px; }
#gate.fit-3 .gate-hint { display: none; }
#gate.fit-4 .gate-om.emblem img { width: 112px; }
#gate.fit-5 .gate-plaque { padding-top: 28px; padding-bottom: 14px; }
#gate.fit-5 .gate-om.emblem img { width: 88px; }
#gate.fit-5 .gate-greet { font-size: 22px; }
#gate.fit-5 .gi-dear { font-size: 18px; }
#gate.fit-5 .gi-msg { font-size: 12px; }
#gate.fit-5 .btn-gold { padding: 11px 24px; font-size: 13px; }
html[lang="gu"] #gate.fit-5 .btn-gold { font-size: 15px; }
#gate.fit-5 .lang-gate { margin-top: 8px; }

/* A link that asks for a language (?lang=gu): index.html sets html.lang-pending and js/main.js clears it on its first render. The gate's HTML holds the English
   greeting / button / hint, which main.js is about to rewrite — keep their ink clear meanwhile (the space stays, so nothing jumps). */
html.lang-pending .gate-greet, html.lang-pending .gate-hint, html.lang-pending #openBtn { color: transparent; }