/* Royal Heritage Theme: Deep Crimson, Marigold, Antique Gold & Warm Silk Ivory */
:root {
  --crimson: #7A0C1E;
  --crimson-deep: #4A0711;
  --crimson-light: #9E162B;
  --sindoor: #B8222B;

  --night: #24040A; /* imperial velvet maroon */
  --night-deep: #160205;

  --gold: #B8862F; /* antique royal gold */
  --gold-rich: #C5993E;
  --gold-light: #ECC875; /* luminous gold foil */
  --gold-pale: #FBF1D6;
  --gold-deep: #8E6218;

  --ivory: #FAF6EE; /* warm royal silk ivory */
  --ivory-pure: #FFFDF9;
  --blush: #F4EADA; /* sandalwood cream */
  --blush-deep: #EBDCC7;

  --ink: #2C1217; /* warm deep walnut / maroon for readability */
  --ink-soft: #6E5358;

  --marigold: #F29D12;
  --marigold-deep: #D97706;
  --rani: #D62246;
  --leaf: #2E6B3E;

  --rule: rgba(184, 134, 47, 0.42);
  --rule-strong: rgba(184, 134, 47, 0.85);

  /* Mappings for component semantic aliases */
  --peacock: var(--crimson);
  --peacock-deep: var(--crimson-deep);
  --teal: var(--marigold-deep);
  --copper: var(--sindoor);
  --copper-light: #E06D53;

  --script: "Great Vibes", "Snell Roundhand", cursive;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --deva: "Tiro Devanagari Hindi", "Noto Serif Devanagari", "Kohinoor Devanagari", serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #200308;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(197, 153, 62, 0.24), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(122, 12, 30, 0.38), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(184, 134, 47, 0.12), transparent 70%);
  background-attachment: fixed;
  color: var(--ink);
  font: 500 1.12rem/1.6 var(--serif);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
/* No lone last words: headings balance their lines, running text avoids orphans. */
h1, h2, h3, .kicker, .sec-sub, .parents, .welcome-names, .muhurat-date, .muhurat-rituals { text-wrap: balance; }
p, li { text-wrap: pretty; }
.nowrap { white-space: nowrap; }

/* The whole invitation is an imperial card, framed with gold foil and royal crimson */
.site {
  max-width: 560px;
  margin: 0 auto;
  background: var(--ivory);
  box-shadow: 0 0 60px rgba(32, 3, 8, .6), 0 0 0 2px var(--gold-light), 0 0 0 5px var(--crimson-deep), 0 0 0 7px var(--gold-rich);
  overflow: hidden;
  position: relative;
}

.kicker {
  font: 600 0.7rem/1.4 var(--sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0;
}
.script { font-family: var(--script); font-weight: 400; }
.kicker .hi { font-size: 1.3em; font-weight: 400; letter-spacing: .02em; color: var(--crimson); }
.hi { font-family: var(--deva); }

.sec { padding: 64px 28px; text-align: center; position: relative; }
.invite, .itinerary, .rsvp, .venues {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg opacity='.08'%3E%3Ccircle cx='40' cy='40' r='18' fill='none' stroke='%23B8862F' stroke-width='1'/%3E%3Cpath d='M40 18 C36 28 28 36 18 40 C28 44 36 52 40 62 C44 52 52 44 62 40 C52 36 44 28 40 18 Z' fill='%237A0C1E' stroke='%23B8862F' stroke-width='.8'/%3E%3Ccircle cx='40' cy='40' r='5' fill='%23C5993E'/%3E%3Cpath d='M0 0 Q20 20 0 40 Q20 20 40 0' fill='none' stroke='%23B8862F' stroke-width='.8'/%3E%3Cpath d='M80 0 Q60 20 80 40 Q60 20 40 0' fill='none' stroke='%23B8862F' stroke-width='.8'/%3E%3Cpath d='M0 80 Q20 60 0 40 Q20 60 40 80' fill='none' stroke='%23B8862F' stroke-width='.8'/%3E%3Cpath d='M80 80 Q60 60 80 40 Q60 60 40 80' fill='none' stroke='%23B8862F' stroke-width='.8'/%3E%3Ccircle cx='0' cy='0' r='8' fill='%23C5993E' opacity='.5'/%3E%3Ccircle cx='80' cy='0' r='8' fill='%23C5993E' opacity='.5'/%3E%3Ccircle cx='0' cy='80' r='8' fill='%23C5993E' opacity='.5'/%3E%3Ccircle cx='80' cy='80' r='8' fill='%23C5993E' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}
.sec-title {
  margin: 6px 0 4px;
  font: 400 clamp(2.6rem, 11vw, 3.3rem)/1.1 var(--script);
  color: var(--crimson);
}
.sec-sub { margin: 0 0 30px; font-family: var(--deva); color: var(--gold-deep); font-size: 1.05rem; }
.flourish { display: block; width: 150px; height: 18px; margin: 14px auto; color: var(--gold-rich); }

/* ---------- Envelope intro ---------- */
/* Shows the envelope before envelope.js runs; !important to beat the [hidden] rule above. */
.sealed .envelope[hidden] { display: grid !important; }
.envelope {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ECC875' stroke-width='.6' opacity='.09'%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Cpath d='M40 18 C36 28 28 36 18 40 C28 44 36 52 40 62 C44 52 52 44 62 40 C52 36 44 28 40 18 Z'/%3E%3Cpath d='M0 0 Q20 20 0 40 Q20 20 40 0M80 0 Q60 20 80 40 Q60 20 40 0M0 80 Q20 60 0 40 Q20 60 40 80M80 80 Q60 60 80 40 Q60 60 40 80'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 40%, #7A0C1E, #3D050D 55%, #180205);
  transition: opacity .95s ease .9s, visibility 0s linear 1.85s;
  /* The envelope's shape (width / height) and size. Phones: a tall card that keeps the same
     proportions on every phone, whatever its height. Larger and landscape screens override these below. */
  --env-ratio: .62;
  --env-w: min(92vw, 460px, calc(88svh * .62));
  --flap: 66%;
}
.envelope.open { opacity: 0; visibility: hidden; }
.env-body {
  position: relative;
  width: var(--env-w);
  height: calc(var(--env-w) / var(--env-ratio));
  /* Everything inside sizes itself from the envelope (cqw / cqh / cqmin), not the screen. */
  container-type: size;
  /* Gives the flap its 3D swing when it opens (perspective only reaches direct children). */
  perspective: 1400px;
  border-radius: 14px;
  background: linear-gradient(180deg, #5E0816, #3A040C 70%, #2A030A);
  box-shadow: 0 0 0 1.5px rgba(236, 200, 117, .6), 0 0 0 5px rgba(74, 7, 17, .85), 0 0 0 6.5px rgba(236, 200, 117, .3), 0 34px 80px -10px rgba(0, 0, 0, .75);
  /* Seal size, shared by the seal and the prompt under it. */
  --seal: clamp(58px, 21cqmin, 112px);
}
.env-pocket { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.env-corner { position: absolute; z-index: 3; width: 38%; width: 30cqmin; color: var(--gold-light); opacity: .9; pointer-events: none; }
.env-corner.tl { top: 0; left: 0; }
.env-corner.tr { top: 0; right: 0; transform: scaleX(-1); }
.env-corner.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.env-corner.br { bottom: 0; right: 0; transform: scale(-1, -1); }
.env-flap {
  position: absolute; inset: 0 0 auto 0; height: var(--flap);
  transform-origin: 50% 0;
  transition: transform 1.15s cubic-bezier(.6, 0, .3, 1);
  backface-visibility: hidden;
  z-index: 2;
}
.envelope.open .env-flap { transform: rotateX(178deg); }
.env-flap svg.flap-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.env-text {
  position: absolute; inset: 6% 0 auto; inset-block-start: 4.5cqh; text-align: center; color: var(--gold-light);
}
.env-mantra {
  margin: 0 0 10px; margin-bottom: 2cqh;
  font: 400 clamp(.95rem, 4.4vw, 1.15rem)/1.2 var(--deva);
  font-size: clamp(.85rem, 4.6cqmin, 1.6rem);
  color: var(--gold-light); letter-spacing: .04em;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.env-logo-frame {
  width: min(64%, 330px, 38svh); width: min(64cqw, 39cqh, 400px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, #FFF6DD, #ECC875 45%, #9A6A1F);
  box-shadow: 0 0 0 1px rgba(74, 7, 17, .8), 0 0 0 5px rgba(236, 200, 117, .28), 0 22px 42px -8px rgba(0,0,0,.7);
  overflow: hidden;
}
.env-logo {
  width: 100%; height: 100%;
  aspect-ratio: 1; display: block;
  border-radius: 50%; object-fit: cover;
  transform: scale(1.06);
}
.monogram {
  font: italic 600 5.6rem/0.9 var(--serif);
  background: linear-gradient(180deg, #FFE8A8, #E6C47E 45%, #B8862F);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.monogram small { font-size: .42em; font-weight: 500; margin: 0 2px; }
.seal {
  position: absolute; left: 50%; top: var(--flap); z-index: 3;
  width: var(--seal); height: var(--seal); margin: calc(var(--seal) / -2) 0 0 calc(var(--seal) / -2);
  border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #FFF6DD, #E6C47E 45%, #A87420 100%);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 -4px 8px rgba(120,70,10,.45);
  display: grid; place-items: center;
  animation: seal-pulse 2.2s ease-in-out infinite;
  transition: transform .5s ease, opacity .4s ease;
}
.seal svg { width: 62%; height: 62%; }
/* Ganesh ji: darker lines so they stay crisp on small seals, and a soft fade towards the rim
   so the cut edges of the drawing disappear and the face is the centre of the stamp. */
.seal .seal-ganesh {
  width: 80%; height: auto; transform: translate(-3%, 2%);
  mix-blend-mode: multiply; opacity: 1;
  filter: contrast(1.35) brightness(.92);
  -webkit-mask-image: radial-gradient(closest-side circle at 53% 47%, #000 76%, transparent 100%);
  mask-image: radial-gradient(closest-side circle at 53% 47%, #000 76%, transparent 100%);
}
/* Engraved inner rim: a dark groove with a light edge, like a minted seal. */
.seal::after {
  content: ""; position: absolute; inset: 7%; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(120, 70, 10, .55);
  box-shadow: 0 0 0 1px rgba(255, 246, 221, .55), inset 0 0 0 1px rgba(255, 246, 221, .35);
}
/* Keyboard focus ring in the envelope's gold rather than stark white. */
.seal:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 5px; }
@media (hover: hover) { .seal:hover { transform: scale(1.07); } }
.envelope.open .seal { transform: scale(.35); opacity: 0; }
@keyframes seal-pulse { 0%,100% { box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 0 0 rgba(230,196,126,.65); } 50% { box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 0 16px rgba(230,196,126,0); } }
.tap {
  position: absolute; left: 0; right: 0; z-index: 3; padding: 6px 0;
  top: calc(var(--flap) + var(--seal) / 2 + 8px);
  text-align: center; margin: 0; cursor: pointer;
  font: 600 .78rem/1 var(--sans); font-size: clamp(.7rem, 2.3cqmin, .95rem);
  letter-spacing: .32em; color: var(--gold-pale);
  animation: breathe 2.2s ease-in-out infinite;
}
/* "Tap" on touch screens, "Click" where there's a mouse. */
.tap-click { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tap-touch { display: none; }
  .tap-click { display: inline; }
}
.envelope.open .tap { opacity: 0; animation: none; }
@keyframes breathe { 50% { opacity: .45; } }
.env-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(circle at 50% 60%, #FFF8E6 0%, rgba(255,233,170,.85) 25%, rgba(230,196,126,0) 60%);
  opacity: 0; transform: scale(.4);
}
.envelope.open .env-glow { animation: glow 1.6s ease-out .45s forwards; }
@keyframes glow { 40% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(2); } }

/* Tablets held upright: a broader card. */
@media (min-width: 600px) and (orientation: portrait) {
  .envelope { --env-ratio: .72; --env-w: min(78vw, 620px, calc(86svh * .72)); --flap: 64%; }
}
/* Landscape screens (desktops, laptops, sideways phones and tablets): a classic wide envelope. */
@media (orientation: landscape) {
  .envelope { --env-ratio: 1.45; --env-w: min(86vw, 1040px, calc(84svh * 1.45)); --flap: 60%; }
  .env-logo-frame { width: min(32cqh, 400px); }
  .env-corner { width: 26cqmin; }
}

/* ---------- Hero scene ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: 10svh 24px 32px;
  text-align: center;
  color: #FFF3DC;
  overflow: hidden;
  background: #160205;
}
.hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 72%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 72% 62% at 50% 36%, rgba(22, 2, 5, .82) 0%, rgba(22, 2, 5, .52) 52%, transparent 80%);
}
.hero > *:not(.hero-scene) { position: relative; z-index: 2; }
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero .blessing-top { margin: 0 0 4px; font-family: var(--deva); color: var(--gold-pale); font-size: clamp(1rem, 4.6vw, 1.15rem); letter-spacing: .08em; opacity: .95; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.7); }
.hero .blessing { margin: 0; font-family: var(--deva); color: var(--gold-light); font-size: clamp(1.1rem, 5vw, 1.25rem); letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 12px rgba(255, 190, 90, .4); }
.hero-names {
  margin: 12px 0 0;
  font: 400 clamp(3.5rem, 16vw, 4.9rem)/1.02 var(--script);
  color: #FFF6E5;
  text-shadow: 0 2px 4px rgba(22, 2, 5, .9), 0 4px 24px rgba(255, 195, 95, .5);
}
.hero-names:focus { outline: none; }
.hero-names span { display: block; font-size: .5em; color: var(--gold-light); margin: 4px 0; }
.hero-tag { margin: 14px 0 0; font: 600 .74rem/1.6 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-pale); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.hero-date {
  display: block; width: max-content; max-width: 100%; margin: 10px auto 0; padding: 8px 18px;
  border-block: 1px solid rgba(236, 200, 117, .75);
  background: linear-gradient(90deg, transparent, rgba(122, 12, 30, .45) 20%, rgba(122, 12, 30, .45) 80%, transparent);
  font: 600 clamp(.92rem, 4.2vw, 1.08rem)/1.2 var(--display); letter-spacing: .14em; color: var(--gold-light);
}
.hero-place { display: block; margin-top: 8px; font-size: .68rem; letter-spacing: .38em; color: var(--gold-pale); }
.scroll-cue {
  margin-top: auto;
  display: grid; justify-items: center; gap: 6px;
  font: 600 .66rem/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: #FFF3DC; text-decoration: none;
  padding: 10px 18px 4px;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.scroll-cue:hover { opacity: 1; transform: translateY(2px); }
.scroll-cue svg { width: 22px; height: 22px; color: var(--gold-light); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.bulb { animation: twinkle-bulb 2.4s ease-in-out infinite; }
@keyframes twinkle-bulb { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.star { animation: twinkle-bulb 3.2s ease-in-out infinite; }
.hero-scene.paused * { animation-play-state: paused; }

/* ---------- Toran ---------- */
.toran { position: relative; height: 74px; overflow: hidden; background: var(--ivory); }
.toran::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 26px;
  background: radial-gradient(circle at 13px 13px, var(--marigold) 9px, var(--marigold-deep) 11px, transparent 12px) 0 0 / 26px 26px repeat-x;
}
.toran-drops { position: absolute; inset: 20px 0 0 0; display: flex; justify-content: space-around; padding-inline: 10px; }
.drop { width: 18px; display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: sway 5s ease-in-out infinite; }
.drop:nth-child(even) { animation-delay: -2.5s; }
.drop i { display: block; width: 14px; height: 14px; border-radius: 50%; margin-top: -2px; background: radial-gradient(circle at 40% 35%, #FFD166, var(--marigold) 55%, var(--marigold-deep)); }
.drop i.r { background: radial-gradient(circle at 40% 35%, #F78BB0, var(--rani) 60%, #A8255A); }
.drop b { display: block; width: 12px; height: 18px; margin-top: 1px; background: var(--leaf); border-radius: 0 100% 0 100%; transform: rotate(45deg); }
@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* ---------- Invitation & families ---------- */
.invite { padding-top: 24px; }
.ganesh { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin: 0; }
.ganesh-art { position: relative; z-index: 1; width: auto; height: 250px; flex: none; filter: drop-shadow(0 6px 16px rgba(122, 12, 30, .14)); }
.mantra { margin: 12px 0 0; font: 400 1.65rem/1.3 var(--deva); color: var(--crimson); }
.shloka + .shloka { margin-top: 14px; }
.shloka { margin: 12px auto 0; max-width: 30ch; font: 400 1.08rem/1.75 var(--deva); color: var(--gold-deep); font-weight: 500; }
.invite > .kicker { margin-top: 16px; }
.diya { width: 40px; height: 40px; flex: none; overflow: visible; }
.diya .flame, .havan { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.3s ease-in-out infinite alternate; }
.diya .flame + .flame { animation-duration: .9s; }
.diya:last-child .flame { animation-delay: -.6s; }
@keyframes flicker {
  0% { transform: scale(1, 1) rotate(-3deg); opacity: .95; }
  40% { transform: scale(.92, 1.12) rotate(2deg); opacity: 1; }
  100% { transform: scale(1.05, .9) rotate(-1deg); opacity: .85; }
}
/* Preserves 100% of the circular gold medallion, peacocks and ribbon while feathering the square corners */
.logo-medallion {
  position: relative;
  isolation: isolate;
  width: min(100%, 400px);
  aspect-ratio: 1;
  margin: 22px auto 0;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, #FBF1D6, #ECC875 45%, #B8862F 85%, #8E6218);
  box-shadow:
    0 0 0 2px var(--ivory),
    0 0 0 4px var(--rule-strong),
    0 20px 44px -14px rgba(74, 7, 17, 0.32);
}
.logo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(1.055);
}
.elder { margin: 18px auto 22px; max-width: 34ch; }
.elder-name { margin: 0; font: 600 1.4rem/1.35 var(--serif); color: var(--crimson-deep); }
.elder-request { margin: 10px 0 0; font: 400 1.05rem/1.6 var(--deva); color: var(--gold-deep); }
.invite-lead {
  margin: 10px auto 0;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 1.15rem;
}
.person {
  margin: 28px 0 0;
  padding: 30px 22px 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(236, 200, 117, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(255,253,249,0.98) 0%, rgba(247,239,226,0.95) 100%);
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  box-shadow: 0 12px 28px -12px rgba(74, 7, 17, 0.2), inset 0 0 0 1px var(--gold-light);
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (hover: hover) {
  .person:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -12px rgba(74, 7, 17, 0.28), inset 0 0 0 1px var(--gold-rich);
  }
}
.person::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px dashed var(--rule);
  border-radius: 14px;
  pointer-events: none;
}
.person .honor { margin: 0 0 4px; font: 400 .98rem/1.3 var(--deva); color: var(--gold-deep); }
.person .name { margin: 0; font: 600 clamp(2.3rem, 10vw, 3rem)/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--crimson-deep); }
.person .full { margin: 4px 0 0; font: 400 1.8rem/1.2 var(--script); color: var(--crimson); }
.person .parents { margin: 8px auto 0; max-width: 38ch; font: 600 .68rem/1.7 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); }
.with {
  margin: 24px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--deva); font-size: 1.35rem; color: var(--crimson);
}
.with span {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFFDF9, #F4EADA);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4px var(--gold-light), 0 6px 16px -6px rgba(74, 7, 17, .25);
}
.with::before, .with::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-rich), transparent); }
.muhurat {
  margin: 32px auto 0;
  padding: 28px 24px 26px;
  max-width: 480px;
  background:
    radial-gradient(circle at 50% 0%, rgba(236, 200, 117, 0.2), transparent 65%),
    linear-gradient(135deg, rgba(255,253,248,0.98), rgba(250,242,228,0.95));
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  box-shadow: 0 10px 28px -10px rgba(74, 7, 17, 0.18), inset 0 0 0 1px var(--gold-light);
  position: relative;
}
.muhurat::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px dashed var(--rule);
  border-radius: 14px;
  pointer-events: none;
}
.muhurat-date { margin: 8px 0 0; font: 600 1.5rem/1.2 var(--display); letter-spacing: .04em; color: var(--crimson-deep); }
.muhurat-rituals { margin: 8px auto 0; font-family: var(--deva); font-size: .95rem; color: var(--crimson-deep); font-weight: 500; letter-spacing: .02em; }

/* ---------- Reveal the date ---------- */
.date-sec {
  background:
    radial-gradient(circle at 50% 0%, rgba(236,200,117,.22), transparent 60%),
    linear-gradient(160deg, #6B0E1D 0%, #3B050E 55%, #1F0206 100%);
  color: #FFF3DC;
  overflow: hidden;
  border-block: 2px solid var(--gold-light);
}
.date-sec .sec-title { color: #FFF3DC; }
.date-sec .kicker { color: var(--gold-light); }
.date-sec .sec-sub { color: var(--gold-light); margin-bottom: 20px; }
.sparkle-bg { position: absolute; inset: 0; pointer-events: none; }
.sparkle-bg i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-light);
  animation: twinkle-bulb 2.6s ease-in-out infinite;
}
.date-revealed { margin-top: 16px; position: relative; z-index: 1; }
.big-date { margin: 0; font: 400 2.9rem/1.1 var(--script); color: var(--gold-light); text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.big-day { margin: 4px 0 0; font: 600 .74rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-pale); }
.countdown { display: flex; justify-content: center; gap: clamp(8px, 2.8vw, 12px); margin: 24px 0 0; }
.countdown div {
  flex: 0 1 76px; min-width: 0; padding: 14px 0 11px;
  border: 1px solid rgba(236, 200, 117, .75); border-radius: 14px;
  background: linear-gradient(180deg, rgba(68, 8, 19, .78), rgba(28, 3, 8, .85));
  box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255, 246, 221, .25);
  backdrop-filter: blur(6px);
  position: relative;
}
.countdown b {
  display: block;
  font: 700 1.8rem/1 var(--serif);
  font-variant-numeric: tabular-nums;
  color: #FFFDF8;
}
.countdown small { display: block; margin-top: 5px; font: 600 .56rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.count-note { margin: 14px 0 0; font-style: italic; color: var(--gold-pale); }
.cal-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.cal-hint { margin: 14px auto 0; max-width: 42ch; font: 500 .74rem/1.6 var(--sans); color: var(--gold-pale); }
.cal-hint a { color: var(--gold-light); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 4px; margin: -12px -4px; }
.cal-hint a:hover { color: #FFFDF8; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 13px 24px; border-radius: 999px; border: 0; cursor: pointer;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
  font: 700 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-rose {
  background: linear-gradient(135deg, #8E1426, #5B0613);
  color: #FFFDF8;
  border: 1px solid var(--gold-light);
  box-shadow: 0 6px 18px -4px rgba(74, 7, 17, .6);
}
.btn-rose:hover {
  background: linear-gradient(135deg, #A3182D, #6E0918);
  box-shadow: 0 8px 22px -4px rgba(74, 7, 17, .75);
  transform: translateY(-1px);
}
.btn-gold {
  background: linear-gradient(180deg, #FBF1D6, #ECC875 50%, #C5993E);
  color: #38050E;
  border: 1px solid #B8862F;
  box-shadow: 0 6px 16px -6px rgba(74, 7, 17, .4);
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(74, 7, 17, .55);
  background: linear-gradient(180deg, #FFF6E0, #F4D388 50%, #D4A548);
}
.btn-line {
  color: #FFFDF8;
  border: 1px solid rgba(236, 200, 117, .75);
  background: rgba(74, 7, 17, .3);
}
.btn-line:hover {
  background: rgba(236, 200, 117, .15);
  border-color: var(--gold-light);
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:active { transform: scale(.97); }

/* ---------- Itinerary ---------- */
.itinerary { background: var(--ivory); }
.day-head { margin: 46px 0 22px; display: flex; align-items: center; gap: 14px; }
.day-head:first-of-type { margin-top: 12px; }
.day-head::before, .day-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--rule-strong), transparent); }
.day-head span {
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFDF9, #F4EADA);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 2px 10px -4px rgba(74, 7, 17, .15);
  font: 700 .7rem/1.4 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--crimson-deep);
}
.day-events { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 28px; }
.ev {
  flex: 0 1 380px;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FFFDF9 0%, #F7EFE2 100%);
  border-radius: 22px;
  padding: 10px 10px 22px;
  border: 1px solid var(--rule-strong);
  box-shadow:
    0 0 0 2px var(--ivory),
    0 0 0 4px var(--gold-rich),
    0 18px 38px -16px rgba(74, 7, 17, .42);
  position: relative;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.ev-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 15px;
  overflow: hidden;
  background: var(--blush);
  box-shadow: 0 6px 20px -8px rgba(74, 7, 17, .4);
  cursor: zoom-in;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out;
}
.ev-art:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
}
/* Bottom vignette so the plaque sits cleanly without covering top chandeliers or arches */
.ev-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(26, 2, 7, 0.62));
  pointer-events: none;
  z-index: 3;
}
.scene {
  display: block; width: 100%; height: 100%; object-fit: cover;
  animation: scene-breathe 8s ease-in-out infinite alternate;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes scene-breathe {
  0% { transform: scale(1.01) translateY(0); }
  100% { transform: scale(1.04) translateY(-2px); }
}
.ev-art:hover .scene {
  animation-play-state: paused;
  transform: scale(1.06) translateY(-2px);
}
/* Each card: realistic royal painting, live ambient animated FX, and bottom royal plaque */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: hidden; }
.ev-label {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  padding: 6px 22px 8px; border-radius: 999px;
  background: rgba(255, 252, 246, .95);
  border: 1px solid var(--gold-rich);
  box-shadow: 0 0 0 2px rgba(236, 200, 117, .35), 0 8px 20px -6px rgba(22, 2, 5, .65);
  backdrop-filter: blur(6px);
  z-index: 4;
}
.ev-label .ev-name { margin: 0; font-size: clamp(1.55rem, 7vw, 1.85rem); line-height: 1.05; }
.ev-name { margin: 4px 0 0; font: 400 2.4rem/1.1 var(--script); color: var(--crimson); }
.ev-body {
  padding: 16px 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.ev-hi { margin: 0; font-family: var(--deva); color: var(--crimson); font-size: 1.12rem; font-weight: 500; }
.ev-note { margin: 6px auto 0; max-width: 30ch; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.ev-meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ev-time {
  display: inline-block; padding: 7px 18px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  font: 700 .74rem/1 var(--sans); letter-spacing: .18em; color: var(--crimson-deep);
  background: linear-gradient(180deg, #FFFDF9, #FBF1D6);
  box-shadow: 0 2px 8px -3px rgba(74, 7, 17, .18);
}
.time-hi { font: 400 1rem/1 var(--deva); letter-spacing: 0; color: var(--crimson); }
.ev-place {
  display: inline-block; width: fit-content; margin: 0 auto; padding: 6px 8px;
  font: 700 .66rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--crimson);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 5px;
}
.ev-place:hover { text-decoration-color: currentColor; color: var(--crimson-deep); }

/* Interactive Wedding-Day Flow Timeline Card */
.timeline-card {
  margin: 46px auto 0;
  max-width: 520px;
  padding: 26px 22px 24px;
  background: linear-gradient(180deg, #FFFDF9, #F6ECDC);
  border-radius: 20px;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 0 0 1px var(--gold-light), 0 14px 32px -16px rgba(74, 7, 17, .3);
}
.timeline-card > .kicker { margin-bottom: 16px; color: var(--crimson); }
.timeline { list-style: none; margin: 0 auto; padding: 0 0 0 28px; text-align: left; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(var(--gold-rich), var(--crimson)); }
.timeline li {
  position: relative;
  margin-bottom: 10px;
  padding: 12px 16px;
  background: rgba(255, 253, 249, 0.9);
  border-radius: 12px;
  border: 1px solid var(--rule);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.timeline li:last-child { margin-bottom: 0; }
.timeline li:hover {
  transform: translateX(4px);
  border-color: var(--gold-rich);
  background: #FFFDF9;
  box-shadow: 0 4px 14px -6px rgba(74, 7, 17, .22);
}
.timeline .tl-dot {
  position: absolute; left: -29px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border-radius: 50%; background: var(--crimson); border: 2px solid var(--gold-light);
  color: var(--gold-light); font-size: .62rem; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(74, 7, 17, .3);
}
.timeline .when {
  font: 700 .68rem/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crimson-deep);
  background: var(--gold-pale);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
}
.timeline .when:lang(hi) { font: 400 .9rem/1.3 var(--deva); letter-spacing: 0; text-transform: none; }
.timeline .tl-title { font-size: 1.12rem; font-weight: 600; color: var(--ink); flex: 1 1 auto; }
.timeline .tl-title small { font: 400 .92rem/1 var(--deva); color: var(--gold-deep); margin-left: 6px; }

/* ---------- Card motion ---------- */
.fx * { transform-box: fill-box; transform-origin: center; }
.s-twinkle { animation: twinkle-bulb 2.4s ease-in-out infinite; }
.s-note text, .s-note { animation: note-up 3s ease-out infinite; }
@keyframes note-up { 0% { opacity: 0; transform: translateY(10px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
.s-fall { animation: fall-in 5s linear infinite; }
@keyframes fall-in { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(300px) rotate(240deg); } }
.s-steam { animation: steam 2.4s ease-out infinite; }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-8px); } }
/* Per-card particles and a golden shine, built by script; they run only while the card is on screen. */
.ev-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ev-fx i, .ev-shine { animation-play-state: paused; }
.ev-art.live .ev-fx i, .ev-art.live .ev-shine { animation-play-state: running; }
.anim .ev-art:not(.live) .fx * { animation-play-state: paused; }
.ev-fx i {
  position: absolute; left: var(--x); top: -6%; width: var(--s); height: var(--s);
  font-style: normal; line-height: 1; opacity: 0;
  filter: drop-shadow(0 1px 1.5px rgba(40, 4, 10, .55));
  animation: fx-fall var(--d) linear var(--delay) infinite;
  will-change: transform, opacity;
}
.ev-fx .petal { background: var(--c); border-radius: 0 80% 0 80%; box-shadow: inset -2px -2px 0 rgba(0,0,0,.12); }
.ev-fx .confetti { background: var(--c); height: calc(var(--s) * .45); border-radius: 1px; }
.ev-fx .ember, .ev-fx .heart { top: auto; bottom: -4%; animation-name: fx-rise; }
.ev-fx .ember { border-radius: 50%; background: radial-gradient(circle, #FFF6D8 0 25%, var(--c) 60%, transparent 72%); box-shadow: 0 0 10px 2px var(--c); }
.ev-fx .heart, .ev-fx .sparkle { width: auto; height: auto; font-size: var(--s); color: var(--c); text-shadow: 0 0 8px var(--c), 0 0 2px rgba(40, 4, 10, .9), 0 1px 3px rgba(40, 4, 10, .7); }
.ev-fx .sparkle { top: var(--y); animation-name: fx-twinkle; animation-timing-function: ease-in-out; }
@keyframes fx-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  10% { opacity: .95; }
  50% { transform: translate3d(var(--drift), 260px, 0) rotate(calc(var(--rot) * .5)); }
  88% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(calc(var(--drift) * -.4), 540px, 0) rotate(var(--rot)); }
}
@keyframes fx-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), -320px, 0) scale(1.15); }
}
@keyframes fx-twinkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}
.ev-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 190, .32) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: fx-shine 7s ease-in-out infinite;
}
@keyframes fx-shine { 0%, 65% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }


/* ---------- Venues ---------- */
.venues { background: var(--blush); }
.venue-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 28px; }
.venue {
  flex: 0 1 400px; margin: 0; padding: 28px 24px 30px;
  background: linear-gradient(180deg, #FFFDF9, #FAF3E6);
  border-radius: 22px;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 0 0 2px var(--gold-light), 0 16px 36px -18px rgba(74,7,17,.4);
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (hover: hover) {
  .venue:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--gold-rich), 0 22px 42px -16px rgba(74,7,17,.48);
  }
}
.venue::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--rule); border-radius: 15px; pointer-events: none; }
.venue-photo {
  width: 100%; height: 205px;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 14px;
  position: relative;
  box-shadow: 0 0 0 1px var(--rule-strong), 0 8px 22px -10px rgba(74,7,17,.3);
  cursor: zoom-in;
  background: #e9decb;
  z-index: 1;
}
.venue-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.venue-photo:hover img, .venue-photo:focus img {
  transform: scale(1.04);
}
.venue-photo .venue-tag {
  position: absolute; bottom: 8px; right: 8px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(59, 5, 14, 0.88);
  backdrop-filter: blur(4px);
  font: 600 .58rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-pale);
  border: 1px solid rgba(236,200,117,.5);
  display: inline-flex; align-items: center; gap: 5px;
  pointer-events: none;
}
.venue-photo .venue-tag svg { width: 11px; height: 11px; }
.venue h3 { margin: 6px 0 0; font: 400 2.25rem/1.1 var(--script); color: var(--crimson); }
.venue p { margin: 5px 0 0; color: var(--ink-soft); }
.venue .venue-loc { font-weight: 600; color: var(--ink); }
.venue .venue-when { font: 600 .7rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-top: 6px; }
.venue .for { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 22px; font: 600 .6rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--crimson-deep); }
.venue .for span { padding: 6px 11px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--ivory-pure); }
.venue .btn { margin-top: auto; position: relative; z-index: 1; }

/* ---------- Album ---------- */
.album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.album-grid button {
  padding: 0; border: 0; background: var(--blush); cursor: zoom-in;
  border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--gold-light);
}
.album-grid button:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 4 / 3; }
.album-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.album-grid button:hover img { transform: scale(1.04); }
.album-grid button:focus-visible { outline: 2px solid var(--crimson); outline-offset: 5px; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); max-height: 92vh; }
.lightbox::backdrop { background: rgba(22, 2, 5, .94); backdrop-filter: blur(6px); }
.lightbox img { display: block; max-width: 100%; max-height: 88vh; border-radius: 10px; box-shadow: 0 0 0 2px var(--gold-light), 0 24px 60px rgba(0,0,0,.8); }
.lightbox .close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-light); background: var(--crimson-deep); color: var(--gold-pale); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.5); }

/* ---------- RSVP ---------- */
.rsvp { background: linear-gradient(180deg, var(--ivory), var(--blush)); }
.rsvp-card {
  max-width: 460px; margin: 0 auto; padding: 34px 24px;
  background: linear-gradient(180deg, #FFFDF9, #FAF3E6); border-radius: 22px; text-align: left;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 0 0 2px var(--gold-light), 0 18px 36px -16px rgba(74,7,17,.35);
  position: relative;
}
.rsvp-card::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--rule); border-radius: 15px; pointer-events: none; }
.rsvp-intro { margin: 0 0 22px; text-align: center; color: var(--ink-soft); position: relative; z-index: 1; }
.rsvp-form { display: grid; gap: 18px; position: relative; z-index: 1; }
.field { display: grid; gap: 7px; margin: 0; }
.field > label { font: 700 .66rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); padding: 0; }
.field input[type="text"], .field textarea {
  width: 100%; font: 500 1.1rem/1.4 var(--serif); color: var(--ink);
  background: var(--ivory-pure); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; }
.attend { border: 0; padding: 0; min-width: 0; }
.attend legend { padding: 0; margin-bottom: 8px; font: 700 .66rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.attend > label {
  font: 600 1.05rem/1.4 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .75);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.attend > label:has(input:checked) {
  background: linear-gradient(135deg, #FFFDF9, #FBF1D6);
  border-color: var(--crimson);
  box-shadow: 0 4px 12px -6px rgba(122, 12, 30, 0.25), inset 0 0 0 1px rgba(122, 12, 30, 0.15);
}
.attend input { width: 18px; height: 18px; margin: 0; accent-color: var(--crimson); }
.attend .attend-title { font-weight: 600; color: var(--crimson-deep); }
.attend small { margin-left: auto; font: 600 .68rem/1.4 var(--sans); letter-spacing: .08em; color: var(--gold-deep); }
.blessing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.chip {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--ivory-pure);
  color: var(--crimson-deep);
  font: 600 .66rem/1.2 var(--sans);
  letter-spacing: .03em;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .15s ease;
}
.chip:lang(hi) {
  font: 400 .82rem/1.2 var(--deva);
  letter-spacing: 0;
}
.chip:hover {
  background: var(--gold-pale);
  border-color: var(--crimson);
  transform: translateY(-1px);
}
.chip[aria-pressed="true"] {
  background: linear-gradient(135deg, #8E1426, #5B0613);
  color: #FFFDF8;
  border-color: var(--gold-light);
}
.chip:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.field input::placeholder, .field textarea::placeholder { color: #A68B90; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--crimson); outline-offset: 1px; border-color: transparent; }
.rsvp-form .btn { width: 100%; padding-block: 15px; }
.rsvp-contacts { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); text-align: center; position: relative; z-index: 1; }
.rsvp-family { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.rsvp-family .rel { display: block; font: 400 1rem/1.5 var(--deva); color: var(--crimson); }
.rsvp-family b { display: block; font: 600 1.12rem/1.45 var(--serif); color: var(--ink); }
.error { margin: 0; color: var(--crimson); font: 600 .8rem/1.4 var(--sans); }
.done { margin: 0; text-align: center; font-style: italic; color: var(--ink); padding: 10px 14px; border-radius: 10px; background: var(--gold-pale); border: 1px solid var(--rule-strong); }

/* ---------- Closing ---------- */
.closing {
  background:
    radial-gradient(circle at 50% 0%, rgba(236,200,117,.16), transparent 60%),
    linear-gradient(180deg, #2D050C 0%, #160205 100%);
  color: #FFF3DC;
  padding-bottom: 56px;
  border-top: 3px solid var(--gold-light);
}
.closing .note { margin: 0 auto; max-width: 28ch; font: 500 italic 1.45rem/1.45 var(--serif); }
.closing .note em { font-style: normal; color: var(--gold-light); }
.welcome { margin: 30px auto 0; max-width: 34ch; }
.eco { margin: 22px auto 0; max-width: 36ch; padding: 14px 18px; border: 1px dashed rgba(236, 200, 117, .45); border-radius: 14px; background: rgba(255, 248, 230, 0.03); font: 500 .95rem/1.55 var(--serif); color: var(--gold-pale); }
.eco svg { display: block; width: 22px; height: 22px; margin: 0 auto 6px; color: #9CC27A; }
.eco .hi { display: block; margin-top: 6px; font-size: .95rem; color: var(--gold-light); }
.closing .kicker { color: var(--gold-light); }
.closing .kicker .hi { color: var(--gold-pale); }
.welcome-names { margin: 8px 0 0; font: 600 1.25rem/1.5 var(--serif); color: #FFF3DC; }
.welcome-names.hi { font: 400 1.15rem/1.6 var(--deva); }
#manuhar, .closing-block { margin-top: 22px; }
.manuhar { margin: 8px 0 0; font: 400 1.1rem/1.6 var(--deva); color: var(--gold-pale); }
.closing .sign { margin: 18px 0 0; font: 400 1.15rem/1.6 var(--deva); color: var(--gold-light); }
.logo-sm-wrap {
  width: 156px;
  aspect-ratio: 1;
  margin: 26px auto 0;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #FFF6DD, #ECC875 50%, #9A6A1F);
  box-shadow: 0 0 0 5px rgba(236,200,117,.22), 0 14px 30px rgba(0,0,0,.5);
  overflow: hidden;
}
.logo-sm { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transform: scale(1.06); }
.replay-env {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 18px auto 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(236, 200, 117, 0.4);
  background: rgba(236, 200, 117, 0.08);
  color: var(--gold-light);
  font: 600 .62rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.replay-env svg { width: 14px; height: 14px; }
.replay-env:hover {
  background: rgba(236, 200, 117, 0.18);
  border-color: var(--gold-light);
  transform: translateY(-1px);
}
.privacy { margin: 14px auto 0; max-width: 40ch; font: 500 .62rem/1.6 var(--sans); color: rgba(255, 243, 220, .5); }
.foot { margin: 22px 0 0; font: 600 .62rem/1 var(--sans); letter-spacing: .32em; color: rgba(255, 243, 220, .6); }
.closing { padding-bottom: calc(env(safe-area-inset-bottom) + 84px); }

/* ---------- Petals & music ---------- */
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.petals i {
  position: absolute; top: -20px; border-radius: 60% 0 60% 0; opacity: .8;
  animation-name: fall, flutter;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
@keyframes fall { to { translate: 0 calc(105vh + 20px); } }
@keyframes flutter { from { transform: translateX(-18px) rotate(0deg); } to { transform: translateX(18px) rotate(220deg); } }
.music {
  position: fixed; right: max(16px, calc(50vw - 280px + 16px), env(safe-area-inset-right)); bottom: max(68px, calc(env(safe-area-inset-bottom) + 60px)); z-index: 36;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold-light); cursor: pointer;
  background: linear-gradient(135deg, #8E1426, #5B0613); color: #FFFDF8; box-shadow: 0 8px 20px -6px rgba(74, 7, 17, .65);
  display: grid; place-items: center;
}
.music svg { width: 22px; height: 22px; }
.music.playing { animation: seal-pulse 2.2s ease-in-out infinite; }

/* Scroll reveal (only when JS is running) */
.anim .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.anim .reveal.in { opacity: 1; transform: none; }

/* =====================================================================
   Engagement layer: navigation, ornaments, ritual details, celebrations
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main section[id], .ev[id], .venue[id] { scroll-margin-top: 16px; }

/* ---------- Floating section menu (bottom on phones, top on larger screens) ---------- */
.quick-nav {
  position: fixed; z-index: 40; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; gap: 2px; padding: 5px; max-width: calc(100vw - 24px);
  border-radius: 999px;
  background: rgba(36, 4, 10, .86);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(236, 200, 117, .55);
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .7);
  transform: translate(-50%, 160%); opacity: 0; visibility: hidden;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s linear .45s;
}
.quick-nav.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
/* How far down the page you are, as a gold thread along the menu. */
.quick-nav::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--marigold));
  transform-origin: left; transform: scaleX(var(--progress, 0));
}
.quick-nav a {
  display: grid; place-items: center; min-height: 40px; padding: 0 13px; border-radius: 999px;
  font: 600 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--gold-pale); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, color .25s ease;
}
.quick-nav a:hover { color: #fff; background: rgba(236, 200, 117, .14); }
.quick-nav a[aria-current] { background: linear-gradient(180deg, #FBF1D6, #ECC875 55%, #C5993E); color: #38050E; }
.quick-nav a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
/* On phones the music button moves up out of the menu's way. */
.music { transition: bottom .45s cubic-bezier(.2, .8, .2, 1); }
.quick-nav.show ~ .music { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px); }

/* ---------- Envelope extras ---------- */
.env-logo-frame { position: relative; }
/* A slow sweep of light across the logo, like gold foil catching it. */
.env-logo-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 246, 221, .5) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  animation: foil-shine 5s ease-in-out 1.2s infinite;
}
@keyframes foil-shine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
.env-guest {
  position: absolute; left: 10%; right: 10%; bottom: 7%; z-index: 3; margin: 0; text-align: center;
  font: 400 clamp(1.3rem, 7cqmin, 2.4rem)/1.1 var(--script); color: var(--gold-light);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  transition: opacity .4s ease;
}
.envelope.open .env-guest { opacity: 0; }
.seal-burst { position: absolute; left: 50%; top: var(--flap); width: 0; height: 0; z-index: 5; pointer-events: none; }

/* Gold sparks and petals (js/common.js goldBurst). */
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.burst i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 8px rgba(255, 220, 150, .85);
  animation: burst 1.15s cubic-bezier(.15, .7, .3, 1) forwards;
}
.burst i.petal { width: 11px; height: 7px; border-radius: 0 80% 0 80%; box-shadow: none; }
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); }
}

/* ---------- Hero entrance: the blessing, names and date rise in as the envelope opens ---------- */
.sealed .hero-content > *, .sealed .hero .scroll-cue { opacity: 0; }
.hero-in .hero-content > *, .hero-in .scroll-cue { animation: rise-in 1s cubic-bezier(.2, .7, .2, 1) both; }
.hero-in .hero-content > :nth-child(1) { animation-delay: .28s; }
.hero-in .hero-content > :nth-child(2) { animation-delay: .42s; }
.hero-in .hero-content > :nth-child(3) { animation-delay: .6s; }
.hero-in .hero-content > :nth-child(4) { animation-delay: .8s; }
.hero-in .hero-content > :nth-child(5) { animation-delay: .96s; }
.hero-in .hero-content > :nth-child(6) { animation-delay: 1.12s; }
.hero-in .scroll-cue { animation-delay: 1.4s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Gold corner ornaments on the cards ---------- */
.card-corner { position: absolute; z-index: 2; width: 42px; height: 42px; color: var(--gold-rich); opacity: .68; pointer-events: none; }
.card-corner.tl { top: 6px; left: 6px; }
.card-corner.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.card-corner.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.card-corner.br { bottom: 6px; right: 6px; transform: scale(-1, -1); }

/* ---------- Ganesh ji with a slowly turning mandala halo ---------- */
.ganesh-aura-wrap { position: relative; display: grid; place-items: center; flex: none; }
.ganesh-halo {
  position: absolute; left: 50%; top: 44%; z-index: 0; width: 190%; aspect-ratio: 1;
  color: var(--gold-rich); pointer-events: none;
  transform: translate(-50%, -50%);
  animation: halo-spin 120s linear infinite;
}
@keyframes halo-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ganesh .diya { position: relative; z-index: 1; }

/* ---------- Logos: a soft gold glow behind ---------- */
.logo-medallion::before {
  content: ""; position: absolute; inset: -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 200, 117, .45), transparent 70%);
  filter: blur(14px);
}
.logo-sm-wrap { position: relative; isolation: isolate; }
.logo-sm-wrap::before {
  content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 200, 117, .3), transparent 68%);
}


/* ---------- Invitation paragraph: Hindi, a star, then English ---------- */
.invite-lead .lead-hi { display: block; font: 400 1.1rem/1.85 var(--deva); font-style: normal; color: var(--crimson-deep); }
.invite-lead .lead-divider {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0;
  font-style: normal; font-size: .9rem; color: var(--gold-rich);
}
.invite-lead .lead-divider::before, .invite-lead .lead-divider::after { content: ""; width: 48px; height: 1px; background: var(--rule-strong); }
.invite-lead .lead-en { display: block; }

/* ---------- The four rites of the pheras ---------- */
.ritual-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.ritual-pills span {
  flex: 1 1 120px; max-width: 190px; display: grid; gap: 4px; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 12px; background: rgba(255, 255, 255, .65);
}
.ritual-pills b { font: 400 1rem/1.3 var(--deva); color: var(--crimson); }
.ritual-pills small { font: 600 .56rem/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Save-the-date milestones ---------- */
.date-milestones { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto 24px; }
.milestone-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 16px;
  border-radius: 20px; border: 1px solid rgba(236, 200, 117, .4); background: rgba(45, 5, 12, .45);
  color: var(--gold-pale); text-decoration: none; text-align: left;
  font: 500 .7rem/1.4 var(--sans); letter-spacing: .04em;
  transition: border-color .2s ease, color .2s ease;
}
.milestone-pill b { color: #FFF3DC; font-weight: 700; }
.milestone-pill:hover { border-color: var(--gold-light); color: #fff; }
.milestone-pill:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.ms-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(236, 200, 117, .5); }
.milestone-pill.active { border-color: var(--gold-light); background: rgba(236, 200, 117, .14); }
.milestone-pill.active .ms-dot { background: var(--gold-light); animation: ms-pulse 1.8s ease-out infinite; }
.milestone-pill.past { opacity: .6; }
.milestone-pill.past .ms-dot { background: #9CC27A; }
@keyframes ms-pulse { 0% { box-shadow: 0 0 0 0 rgba(236, 200, 117, .7); } 100% { box-shadow: 0 0 0 9px rgba(236, 200, 117, 0); } }

/* Countdown digits flip as they change. */
.countdown div { perspective: 300px; }
.countdown b.flip { animation: digit-flip .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes digit-flip { from { opacity: .15; transform: translateY(-35%) rotateX(75deg); } to { opacity: 1; transform: none; } }

/* ---------- Event cards ---------- */
.ev-art[role="button"] { cursor: zoom-in; }
/* A card lights up when you jump to it from the timeline. */
.ev.spotlight .ev-art { animation: spotlight 2.4s ease; }
@keyframes spotlight {
  30%, 70% { box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--gold-light), 0 0 0 7px var(--crimson-deep), 0 0 44px 12px rgba(236, 200, 117, .8); }
}

.timeline li[data-target] {
  padding-right: 34px; cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.timeline li[data-target]::after {
  content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font: 400 1.5rem/1 var(--serif); color: var(--gold);
}
.timeline li[data-target]:hover { transform: translateX(4px); border-color: var(--gold); box-shadow: 0 8px 18px -12px rgba(74, 7, 17, .45); }
.timeline li[data-target]:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }


/* ---------- RSVP ---------- */
.rsvp-form .btn[type="submit"] { position: relative; }

/* ---------- Closing: share and replay ---------- */
.closing .foot { margin-bottom: 22px; }
/* Buttons sit side by side, centred: their own outside margins would push each other apart. */
.closing-actions > * { margin: 0; }
.closing-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-bottom: calc(env(safe-area-inset-bottom) + 96px);
}
.music.playing .wave { animation: breathe 1.2s ease-in-out infinite; }

/* ---------- Small phones (iPhone SE, compact Android) ---------- */
@media (max-width: 379px) {
  .sec { padding: 56px 18px; }
  .person { padding: 22px 14px 20px; }
  .muhurat { padding: 20px 16px; }
  .rsvp-card { padding: 28px 18px; }
  .venue { padding: 24px 18px 26px; }
  .btn { padding-inline: 20px; letter-spacing: .14em; }
  .hero-tag { letter-spacing: .24em; }
  .scroll-cue { letter-spacing: .24em; }
  .countdown b { font-size: 1.5rem; }
  .countdown small { font-size: .5rem; letter-spacing: .1em; }
  .ganesh-art { height: 210px; }
  .quick-nav a { padding: 0 8px; font-size: .57rem; letter-spacing: .08em; }
  .ritual-pills span { flex-basis: 110px; }
}
/* Short screens: tighten the hero so the names and date clear the mandap. */
@media (max-width: 759px) and (max-height: 700px) {
  .hero { min-height: max(100svh, 560px); padding-top: 5svh; }
  .hero-names { margin-top: 8px; font-size: clamp(3rem, 14vw, 4rem); }
  .hero-names span { margin: 0; }
  .hero-tag { margin-top: 10px; }
  .hero-date { margin-top: 6px; }
  .hero-place { margin-top: 4px; }
}
/* Large phones and small tablets: the invitation card grows a little but keeps its frame. */
@media (min-width: 600px) and (max-width: 759px) {
  .site { max-width: 640px; }
  .sec { padding: 72px 40px; }
  .music { right: max(16px, calc(50vw - 320px + 16px), env(safe-area-inset-right)); }
}

/* ---------- Website: tablet and up ---------- */
@media (min-width: 760px) {
  body { font-size: 1.2rem; }
  .site { max-width: none; box-shadow: none; }
  .sec { padding: 88px 40px; }
  .sec-title { font-size: clamp(3.4rem, 5.4vw, 4.6rem); }
  .sec-sub { margin-bottom: 44px; font-size: 1.2rem; }

  .hero { padding-top: 12svh; }
  .hero .blessing-top { font-size: 1.3rem; }
  .hero .blessing { font-size: 1.5rem; }
  .hero-names { font-size: clamp(4.6rem, 8vw, 7.2rem); }
  .hero-names span { display: inline; margin: 0 .25em; font-size: .6em; }
  .hero-tag { font-size: .86rem; }
  .hero-date { font-size: 1.2rem; padding: 9px 20px; }
  .hero-place { font-size: .74rem; }
  .scroll-cue { font-size: .74rem; }

  .toran { height: 84px; }

  .invite { padding-top: 48px; }
  .ganesh-art { height: 320px; }
  .mantra { font-size: 2rem; }
  .shloka { font-size: 1.25rem; max-width: 40ch; }
  .diya { width: 44px; height: 44px; }
  .elder { max-width: 46ch; }
  .elder-name { font-size: 1.6rem; }
  .elder-request { font-size: 1.2rem; }
  .invite-lead { max-width: 46ch; font-size: 1.35rem; }
  /* Tablet: the two families stay stacked, as centred cards. */
  .couple { max-width: 600px; margin: 20px auto 0; }
  .person .name { font-size: clamp(3rem, 6vw, 3.8rem); }
  .person .full { font-size: 2rem; }
  .person .parents { font-size: .74rem; }
  .muhurat { max-width: 600px; padding: 28px 36px; }
  .muhurat-date { font-size: 1.8rem; }
  .muhurat-rituals { font-size: 1.1rem; }

  .big-date { font-size: 3.8rem; }
  .big-day { font-size: .84rem; }
  .countdown { gap: 18px; }
  .countdown div { flex: 0 0 104px; padding: 18px 0 14px; border-radius: 16px; }
  .countdown b { font-size: 2.6rem; }
  .countdown small { font-size: .62rem; }
  .count-note { font-size: 1.25rem; }
  .cal-row { gap: 16px; }
  .cal-hint { font-size: .8rem; max-width: 56ch; }

  .itinerary .day-events { max-width: 1240px; margin: 0 auto; gap: 40px 24px; }
  .ev { flex-basis: 310px; }
  .day-head { max-width: 1240px; margin: 64px auto 30px; }
  .day-head:first-of-type { margin-top: 16px; }
  .day-head span { font-size: .8rem; }
  .ev-note { font-size: 1.05rem; }
  .timeline { max-width: 560px; margin-top: 56px; }
  .timeline li { padding: 14px 20px; }

  .venue-grid { max-width: 1000px; margin: 0 auto; gap: 28px 24px; }
  .venue { flex-basis: 320px; padding: 34px 26px 32px; }
  .venue-photo { height: 220px; }
  .venue .for { font-size: .64rem; }

  .album-grid { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 18px; max-width: 1100px; margin: 0 auto; }
  .album-grid button:nth-child(3n+1) { grid-column: auto; aspect-ratio: 4 / 5; }
  .album-grid button:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

  .rsvp-card { max-width: 620px; padding: 40px 44px; }
  .rsvp-intro { font-size: 1.2rem; }
  .field > label, .attend legend { font-size: .72rem; }
  .field input[type="text"], .field textarea { font-size: 1.2rem; padding: 13px 16px; }
  .attend > label { font-size: 1.15rem; padding: 13px 16px; }
  .rsvp-family { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }

  .closing { padding-block: 96px 56px; }
  .closing .note { font-size: 2rem; max-width: 30ch; }
  .eco { max-width: 52ch; font-size: 1.05rem; padding: 16px 24px; }
  .welcome { max-width: 52ch; }
  .welcome-names { font-size: 1.4rem; }
  .welcome-names.hi { font-size: 1.3rem; }
  .manuhar, .closing .sign { font-size: 1.25rem; }
  .logo-sm-wrap { width: 190px; }
  .privacy { font-size: .7rem; }
  .foot { font-size: .7rem; }
  .music { right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); width: 54px; height: 54px; }
  .lightbox .close { top: 12px; right: 12px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .sec { padding: 104px 56px; }
  /* The two families side by side, joined by "संग". */
  .couple {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 36px;
    max-width: 1040px; margin: 24px auto 0;
  }
  .couple .person { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
  .couple .with { margin: 0; flex-direction: column; gap: 10px; font-size: 2rem; }
  .couple .with::before, .couple .with::after { width: 1px; height: 46px; }
  .person .name { font-size: clamp(3rem, 4vw, 3.8rem); }
  .muhurat { margin-top: 44px; }

  .ev { flex-basis: 340px; }
  .venue { flex-basis: 400px; padding: 38px 30px 34px; }
  .venue-photo { height: 240px; }
}

/* ---------- Wide screens ---------- */
@media (min-width: 1440px) {
  body { font-size: 1.25rem; }
  .sec { padding: 120px 72px; }
  .sec-title { font-size: 5rem; }
  .itinerary .day-events, .day-head { max-width: 1360px; }
  .ev { flex-basis: 380px; }
  .venue-grid { max-width: 1100px; }
  .venue { flex-basis: 460px; }
  .venue-photo { height: 280px; }
  .album-grid { max-width: 1280px; }
  .logo-medallion { width: 460px; }
  .ganesh-art { height: 360px; }
}

/* Laptops with short windows: keep the names and date clear of the mandap. */
@media (min-width: 760px) and (max-height: 820px) {
  .hero { padding-top: 7svh; }
  .hero-names { margin-top: 10px; font-size: clamp(4rem, 6.4vw, 5.8rem); }
  .hero-tag { margin-top: 10px; }
}

/* Phones held sideways: the hero fits a short, wide screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 100svh; padding-top: 6svh; }
  .hero-names { font-size: clamp(2.6rem, 8vw, 3.6rem); }
  .hero-names span { display: inline; margin: 0 .25em; font-size: .6em; }
  .hero .blessing-top { font-size: 1rem; }
  .hero .blessing { font-size: 1.1rem; }
  .hero .mandap { display: none; }
  .hero::after { height: 100%; }
}

/* Hover zoom only where there's a real pointer, so taps on phones don't leave pictures stuck zoomed. */
@media (hover: none) {
  .ev-art:hover .scene { animation-play-state: running; transform: none; }
  .venue-photo:hover img, .album-grid button:hover img { transform: none; }
}

/* ---------- Engagement layer on tablets and desktops ---------- */
@media (min-width: 760px) {
  .quick-nav { top: 16px; bottom: auto; transform: translate(-50%, -160%); }
  .quick-nav.show { transform: translate(-50%, 0); }
  .quick-nav a { padding: 0 18px; font-size: .66rem; }
  .quick-nav.show ~ .music { bottom: max(24px, env(safe-area-inset-bottom)); }
  main section[id], .ev[id], .venue[id] { scroll-margin-top: 84px; }
  .card-corner { width: 56px; height: 56px; }
  .invite-lead .lead-hi { font-size: 1.3rem; }
  .ritual-pills { max-width: 560px; margin-inline: auto; }
  .ritual-pills b { font-size: 1.1rem; }
  .ritual-pills small { font-size: .6rem; }
  .date-milestones { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .milestone-pill { font-size: .76rem; }
  .closing-actions { margin-bottom: calc(env(safe-area-inset-bottom) + 48px); }
  .ganesh-halo { width: 200%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drop, .fx *, .diya .flame, .havan, .bulb, .star, .seal, .tap, .scroll-cue svg, .sparkle-bg i, .music, .scene { animation: none !important; }
  .scene, .ev-art:hover .scene { transform: none; transition: none; }
  .s-note, .s-note text, .s-steam { opacity: 1; }
  .s-fall, .ev-fx, .ev-shine { display: none; }
  .env-flap, .envelope, .btn, .album-grid img { transition: none; }
  .anim .reveal { opacity: 1; transform: none; transition: none; }
  .hero-in .hero-content > *, .hero-in .scroll-cue, .countdown b.flip, .ganesh-halo, .env-logo-frame::after,
  .milestone-pill.active .ms-dot, .ev.spotlight .ev-art, .music.playing .wave { animation: none !important; }
  .quick-nav, .music, .timeline li[data-target] { transition: none; }
  .burst { display: none; }
}

/* ---------- This site only: the home venue's icon badge, flames, the grandmother's line, music notes and mehndi leaves ---------- */
.elder-name .elder-of { display: block; margin-top: 2px; font: 500 .68rem/1.7 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-wrap: balance; }
.s-flicker { transform-origin: 50% 100%; animation: flicker 1.2s ease-in-out infinite alternate; }
.ev-fx .leaf { background: var(--c); border-radius: 80% 0 80% 0; height: calc(var(--s) * .55); }
.ev-fx .note { top: auto; bottom: -4%; animation-name: fx-rise; width: auto; height: auto; font-size: var(--s); color: var(--c); text-shadow: 0 0 8px var(--c), 0 0 2px rgba(40, 4, 10, .9), 0 1px 3px rgba(40, 4, 10, .7); }
.venue-badge {
  width: 68px; height: 68px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFDF8, #F5E5C9);
  border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
  margin: 4px auto 12px;
  box-shadow: 0 4px 14px -6px rgba(74,7,17,.25);
}
.venue-badge .venue-icon { width: 34px; height: 34px; margin: 0; color: var(--gold-rich); }
@media (prefers-reduced-motion: reduce) { .s-flicker { animation: none !important; } }