/* ------------------------------------------------------------------
   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; margin-top: 40px; align-items: center; text-align: center; }
.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 { 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, then a gentle line appears below it. The pill itself is moved with a transform only, so layout never jumps. */
.choice-dodge { position: relative; transition: padding-bottom .38s var(--ease); }
.choice-dodge.dodging { padding-bottom: var(--band, 0px); }
.dodge-note { margin: 0; max-height: 0; overflow: hidden; opacity: 0; color: #7a1f33; font-style: italic; font-size: 17px; line-height: 1.45; transition: max-height .4s var(--ease), opacity .4s ease, margin-top .4s var(--ease);
  scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom)); } /* when the page nudges to show this line, keep it clear of the fixed bottom bar (.quicknav) */
.dodge-note.show { max-height: 6em; opacity: 1; margin-top: 10px; }
html[lang="gu"] .dodge-note { font-size: 16.5px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .choice-dodge, .dodge-note { transition: 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); }

.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: linear-gradient(120deg, var(--c1), var(--c2)); 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, linear-gradient(120deg, var(--c1), var(--c2)) 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: linear-gradient(120deg, var(--c1), var(--c2)); }
.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; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6px; margin: 14px 0 8px; }
.dc-sw1 { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.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 photos: stacked on phones, side by side when the card is wide enough */
/* ladies + gentlemen share ONE row at every size; the column ratio matches the two photos' aspect ratios, so both come out the same height */
.dc-looks { display: grid; grid-template-columns: 1.25fr 1fr; align-items: start; gap: 12px; }
.dc-look { margin: 0; }
.dc-look figcaption { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 8px; }
.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; }
.dc-names { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; font-size: 15px; color: var(--ink); }
.dc-names span { display: flex; align-items: center; justify-content: center; gap: 6px; text-wrap: balance; }
.dc-names i { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.1); }
/* 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-looks { gap: 8px; }
  .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; }
  .dc-names { margin-top: 6px; gap: 4px; }
  .dc-names span { font-size: 0; gap: 0; } /* the colour names are already in the swatches above; keep just the two dots */
}

/* 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-look.gents .dc-photo { animation-delay: .09s; }
.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: -6px 0 20px; }
.party-list { display: grid; gap: 8px; }
.party-row { display: flex; gap: 8px; animation: partyIn .35s var(--ease) both; }
.party-row input { flex: 1; min-width: 0; }
.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; } }

/* ---------- 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 = the SAME two colours as the FAQ outfit guide (js/dresscode.js → LOOKS)
   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 { 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 { 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; }