:root {
  --page-bg: #f6dfd9;
  --page-glow: #fcf0ec;
  --wine: #6b1a32;
  --wine-deep: #45101f;
  --mauve-back: #6e3846;
  --paper: #fffaf0;
  --paper-2: #f3e8d3;
  --maroon: #8c252b;
  --maroon-deep: #631a21;
  --gold: #b3843a;
  --gold-light: #e6c67f;
  --gold-text: #7f5313;
  --ink: #3a2a22;
  --muted: #5c4535;
  --serif: "Cormorant Garamond", Georgia, serif;
  --caps: "Cinzel", "Times New Roman", serif;
  --script: "Allura", cursive;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cdefs%3E%3Cg id='l'%3E%3Cpath d='M0-16C6-9 6-1 0 4C-6-1-6-9 0-16Z'/%3E%3Cpath d='M0-11V1'/%3E%3Cpath d='M0 4C-3-4-8-9-13-10C-14-3-9 3 0 4ZM0 4C3-4 8-9 13-10C14-3 9 3 0 4Z'/%3E%3Cpath d='M0 5C-7 0-14-2-19-1C-17 4-10 7 0 5ZM0 5C7 0 14-2 19-1C17 4 10 7 0 5Z'/%3E%3Cpath d='M-12 10Q-6 8 0 10T12 10M-6 13.5Q-3 12 0 13.5T6 13.5'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23a0605a' stroke-opacity='.22' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cuse href='%23l' x='35' y='36'/%3E%3Cuse href='%23l' x='105' y='106'/%3E%3Cpath d='M105 30l1.4 3.6 3.6 1.4-3.6 1.4-1.4 3.6-1.4-3.6-3.6-1.4 3.6-1.4z'/%3E%3Cpath d='M35 100l1.4 3.6 3.6 1.4-3.6 1.4-1.4 3.6-1.4-3.6-3.6-1.4 3.6-1.4z'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.locked, html.locked body { overflow: hidden; height: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  background-color: var(--page-bg);
  background-image: var(--pattern), radial-gradient(ellipse at top, var(--page-glow), var(--page-bg) 70%);
  background-size: 140px 140px, 100% 100%;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Type helpers ---------- */
.caps { font-family: var(--caps); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.script { font-family: var(--script); font-weight: 400; margin: 0; line-height: 1.15; color: var(--maroon); }
.big { font-size: 44px; }
.muted { color: var(--muted); }
.italic { font-style: italic; }
.gold { color: var(--gold-light); }
.names { font-size: clamp(46px, 13vw, 64px); }
.names .amp { font-size: .7em; color: var(--gold); }
.date-line { font-size: 17px; font-weight: 600; color: var(--gold-text); margin-top: 8px; }

.divider { display: flex; align-items: center; gap: 12px; width: 70%; max-width: 260px; margin: 22px auto; color: var(--gold); }
.divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.divider i { font-style: normal; font-size: 14px; }
.small-div { margin: 18px auto; }

/* ---------- Straight-lintel floral frames ---------- */
.floral-frame {
  position: relative;
  padding: 5px;
  border-radius: 5px;
  background: linear-gradient(145deg, #edce83, var(--gold) 45%, #9e6a26 75%, #edce83);
  box-shadow: 0 7px 22px rgba(100, 49, 18, .16);
}
.floral-frame::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 235, 179, .55);
  pointer-events: none;
}
.floral-frame img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 2px;
}

/* ---------- Auspicious details ---------- */
.devanagari { font-family: "Noto Serif Devanagari", serif; }
.ganesh-blessing { text-align: center; margin: 0 auto 15px; color: var(--maroon); }
.ganesh-blessing > img { object-fit: contain; margin: 0 auto 8px; }
.prayer { margin: 0; font-size: 17px; line-height: 1.6; }
.auspicious { margin: 0 0 16px; color: var(--maroon); font-size: 23px; line-height: 1.6; }
.blessing-copy { line-height: 1.9; }
.divider i { flex: none; }
.divider i img { width: 28px; height: 22px; }
button:focus-visible, a:focus-visible { outline: 3px solid #ba651e; outline-offset: 5px; }

/* ---------- Torn paper ---------- */
.paper { position: relative; padding: 34px 26px; text-align: center; isolation: isolate; }
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(214,190,150,.35), transparent 60%),
    var(--paper);
  filter: url(#torn) drop-shadow(0 8px 14px rgba(70,40,20,.16));
}

/* ---------- Wax seal ---------- */
.seal {
  position: absolute; z-index: 5;
  width: 78px; height: 78px; border: 0; padding: 0;
  border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%;
  background: radial-gradient(circle at 35% 30%, #f7e3a6, #d2a24a 40%, #9b6c22 80%, #7a5216);
  box-shadow: inset 0 0 0 6px rgba(120,80,20,.25), inset 0 0 0 8px rgba(255,236,190,.35), 0 6px 14px rgba(40,10,0,.4);
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.seal span {
  font-family: var(--caps); font-weight: 600; font-size: 22px; letter-spacing: .04em;
  color: #7c5519; text-shadow: 0 1px 0 rgba(255,245,210,.7), 0 -1px 0 rgba(90,50,0,.35);
  width: 54px; height: 54px; line-height: 54px; border-radius: 50%;
  border: 1.5px solid rgba(124,85,25,.5);
}
.seal::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(230,198,127,.8); animation: pulse 2s ease-out infinite;
}
.seal.small { width: 62px; height: 62px; }
.seal.small span { width: 42px; height: 42px; line-height: 42px; font-size: 17px; }
@keyframes pulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* ---------- Intro ---------- */
#intro {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background-color: var(--page-bg);
  background-image: var(--pattern), radial-gradient(ellipse at center, var(--page-glow), var(--page-bg) 75%);
  background-size: 140px 140px, 100% 100%;
  transition: opacity 1s cubic-bezier(.4,0,.2,1), visibility 0s linear 1s;
  padding: max(32px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
#intro.gone { opacity: 0; visibility: hidden; }
#intro.opening .tap-hint, #intro.opening .place { opacity: 0; transition: opacity .5s ease; }
.intro-inner { text-align: center; width: 100%; max-width: 420px; margin: auto; position: relative; transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
#intro.gone .intro-inner { transform: scale(1.04); }
.intro-inner .names { margin: 8px 0 0; }
.tap-hint { font-style: italic; font-size: 20px; color: var(--muted); margin: 18px 0 4px; animation: breathe 2.4s ease-in-out infinite; }
.place { color: var(--muted); font-weight: 600; }
@keyframes breathe { 50% { opacity: .45; } }

.envelope, .rsvp-env {
  position: relative; margin: 0 auto;
  width: min(70vw, 300px); aspect-ratio: 1 / 1.05;
}
.envelope { margin-top: 18px; height: clamp(140px, 32svh, 290px); width: auto; aspect-ratio: 300 / 330; max-width: 80vw; }
.env-back, .env-pocket { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; border-radius: 4px; }
.env-back { background: linear-gradient(180deg, #5e2f3c, var(--mauve-back)); box-shadow: 0 18px 30px rgba(90,40,50,.3); }
.env-card { position: absolute; left: 9%; right: 9%; top: 0; bottom: 6%; z-index: 2; transition: transform 1.2s cubic-bezier(.22,1,.36,1); will-change: transform; }
.env-pocket {
  z-index: 3;
  background:
    linear-gradient(135deg, rgba(255,255,255,.1), transparent 40%),
    linear-gradient(180deg, #b97884, #9c5a68 50%, #7a4050);
  clip-path: polygon(0 0, 50% 34%, 100% 0, 100% 100%, 0 100%);
  transition: transform 1s cubic-bezier(.65,0,.35,1) .15s, opacity .7s ease .4s;
  will-change: transform, opacity;
}
.env-back { transition: transform 1s cubic-bezier(.65,0,.35,1) .15s, opacity .7s ease .4s; will-change: transform, opacity; }
.envelope .seal { left: 50%; top: 42%; transform: translate(-50%, 0); transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease .1s; will-change: transform, opacity; }

.envelope.open .seal { transform: translate(-50%, 0) scale(1.2) rotate(-10deg); opacity: 0; }
.envelope.open .seal::after { display: none; }
.envelope.open .env-pocket, .envelope.open .env-back { transform: translateY(60%); opacity: 0; }
.envelope.open .env-card { transform: translateY(-8%) scale(1.05); }

/* petals */
.petal {
  position: fixed; top: -30px; z-index: 60; pointer-events: none;
  width: 14px; height: 18px; border-radius: 80% 0 80% 0;
  background: radial-gradient(circle at 30% 30%, #e0485d, #9b1428);
  animation: fall linear forwards;
}
.petal.marigold { background: radial-gradient(circle at 30% 30%, #ffc94d, #e8890c); border-radius: 50% 50% 50% 0; }
@keyframes fall {
  to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .9; }
}

/* ---------- Main ---------- */
#invite { max-width: 480px; margin: 0 auto; padding: 0 16px 60px; }
.section { padding: 34px 0; }
.hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0 24px; }
.hero-portrait { width: min(68vw, 290px); aspect-ratio: 3 / 4.2; margin: 18px auto 10px; }
.hero .names { margin-top: 6px; }
.scroll-hint { font-style: italic; color: var(--muted); font-size: 18px; animation: breathe 2.4s ease-in-out infinite; }
.scroll-hint::after { content: "⌄"; display: block; font-style: normal; font-size: 20px; color: var(--gold-text); }

/* Text and ornaments that sit directly on the gold background */
#intro .names .amp, .hero .names .amp { color: var(--wine); }
#intro .date-line, .hero .date-line { color: #5e3a08; }
.hero .divider span { background: linear-gradient(90deg, transparent, var(--gold-text), transparent); }
.hero .divider i img { filter: brightness(.6); }

.lead { font-style: italic; margin: 4px 0 14px; color: var(--muted); }
.invite-card { padding: 44px 22px 76px; }
.person { font-size: 50px; }
.parents { margin: 2px 0 0; font-size: 19px; color: var(--muted); font-style: italic; }
.with { font-size: 28px; color: var(--gold); margin: 10px 0 6px; }
.card-foot { display: flex; align-items: stretch; justify-content: center; gap: 14px; font-size: 18px; line-height: 1.4; font-weight: 600; }
.card-foot .caps { color: var(--gold-text); }
.card-foot .vr { width: 1px; background: linear-gradient(transparent, var(--gold), transparent); }
.stamp .devanagari { font-size: 15px; letter-spacing: 0; line-height: 1.4; }
.stamp {
  position: absolute; right: -8px; bottom: -14px; width: 78px; height: 78px; transform: rotate(-12deg);
  display: grid; place-items: center; color: #fff8e6; font-family: var(--caps); font-size: 9.5px; letter-spacing: .15em; text-align: center; line-height: 1.4;
  background: #bd5b21;
  clip-path: polygon(50% 0,61% 9%,75% 5%,79% 19%,93% 23%,90% 37%,100% 50%,90% 63%,93% 77%,79% 81%,75% 95%,61% 91%,50% 100%,39% 91%,25% 95%,21% 81%,7% 77%,10% 63%,0 50%,10% 37%,7% 23%,21% 19%,25% 5%,39% 9%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.2);
}

.cal-card { transform: rotate(.8deg); }
.cal-card .italic { margin: 0 0 6px; font-size: 18px; }
.month { color: var(--gold-text); font-size: 17px; font-weight: 600; margin: 4px 0 14px; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 2px; max-width: 320px; margin: 0 auto; font-size: 19px; font-weight: 600; }
.calendar .dow { font-family: var(--caps); font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .1em; }
.calendar .d { height: 38px; display: grid; place-items: center; position: relative; }
.calendar .hl { color: #fff; font-weight: 600; }
.calendar .hl::before {
  content: ""; position: absolute; width: 38px; height: 38px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 35% 30%, #7d2540, var(--wine-deep));
  box-shadow: 0 0 0 3px rgba(179,132,58,.35);
}
.calendar .hl::after { content: "♥"; position: absolute; top: -9px; right: -2px; font-size: 11px; color: var(--gold); }

.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.btn {
  display: inline-block; padding: 13px 18px; border: 1px solid var(--gold); background: transparent;
  font-family: var(--caps); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--maroon); text-decoration: none; border-radius: 2px;
}
.btn.ghost { border-color: rgba(179,132,58,.6); color: var(--muted); }
.btn.solid { background: var(--maroon); color: var(--gold-light); border-color: var(--maroon); width: 100%; padding: 14px; }
.btn:active { transform: translateY(1px); }

.maroon-card {
  position: relative; text-align: center; padding: 34px 22px; color: #fff6f3;
  background: linear-gradient(170deg, #96525f, #7a3f4e);
  box-shadow: 0 16px 30px rgba(90,40,50,.28);
}
.maroon-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(252,240,236,.5); pointer-events: none; }
.maroon-card .gold { color: #fbe9e4; }
.maroon-card .title { font-size: 26px; letter-spacing: .12em; margin: 6px 0 20px; color: #f6dfd9; }
.timeline { --tl-time: 96px; --tl-dot: 36px; --tl-row: 58px; text-align: left; max-width: 320px; margin: 0 auto; position: relative; }
.tl-day { text-align: center; margin: 22px 0 6px; font-size: 14px; font-weight: 600; color: #fbe9e4; }
.tl-day:first-child { margin-top: 0; }
.tl-group { position: relative; }
.tl-group::before {
  content: ""; position: absolute; width: 1px; background: rgba(251,233,228,.45);
  left: calc(var(--tl-time) + var(--tl-dot) / 2); top: calc(var(--tl-row) / 2); bottom: calc(var(--tl-row) / 2);
}
.tl-row { display: grid; grid-template-columns: var(--tl-time) var(--tl-dot) 1fr; align-items: center; min-height: var(--tl-row); }
.tl-time { font-family: var(--caps); font-size: 15px; font-weight: 600; letter-spacing: .03em; color: #fbe9e4; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 2px; }
.tl-dot { position: relative; width: 28px; height: 28px; margin: 0 auto; border-radius: 50%; border: 1px solid #fbe9e4; background: #86475a; display: grid; place-items: center; font-size: 13px; line-height: 1; color: #fbe9e4; }
.tl-name { font-size: 20px; font-weight: 600; line-height: 1.25; padding-left: 10px; }

.events { display: grid; gap: 26px; padding: 18px 0; }
.event { position: relative; width: 88%; }
.event.alt { margin-left: auto; }
.event .floral-frame { aspect-ratio: 3 / 3.6; }
.event-info { margin: -70px 18px 0; padding: 24px 18px 22px; transform: rotate(-1.5deg); }
.event.alt .event-info { transform: rotate(1.5deg); }
.event-info h4 { font-size: 38px; margin: 4px 0 0; }
.event-info .time { font-family: var(--caps); font-size: 17px; font-weight: 600; letter-spacing: .08em; color: var(--gold-text); margin: 6px 0 8px; }
.event-info .muted { margin: 0; font-style: italic; font-size: 18px; }
.event-info .caps { color: var(--ink); font-size: 14px; font-weight: 600; }
.dress-code { margin: 12px auto 0; padding-top: 10px; border-top: 1px dashed rgba(179,132,58,.45); max-width: 240px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.event-info .dress-code .caps { display: block; font-size: 12px; letter-spacing: .12em; color: var(--gold-text); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-left: 4px; vertical-align: 1px; box-shadow: inset 0 0 0 1px rgba(127,83,19,.35); }

.venue-card .photo { margin: 14px auto 12px; padding: 6px; background: #fff; box-shadow: 0 6px 16px rgba(70,40,20,.18); transform: rotate(-1.2deg); }
.venue-card .photo img { aspect-ratio: 4 / 3.4; object-fit: cover; object-position: center 60%; width: 100%; }
.addr { font-size: 21px; font-weight: 600; margin: 6px 0 2px; }
.small-txt { font-size: 18px; font-style: italic; margin: 0 0 18px; }
.travel > .caps { color: var(--gold-text); font-weight: 600; }
.travel-mode { font-size: 14px; font-weight: 600; color: var(--maroon); margin: 18px 0 2px; }
.travel-item { padding: 10px 0 2px; }
.travel-item + .travel-item { border-top: 1px dashed rgba(179,132,58,.4); }
.travel-name { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; }
.travel-name .muted { font-family: var(--caps); font-size: 13px; letter-spacing: .08em; }
.travel-note { font-size: 17px; font-style: italic; margin: 2px 0 0; }
.travel-item .link-btn { display: inline-block; padding: 8px 10px; }

.countdown-sec { position: relative; text-align: center; padding: 70px 0; }
.countdown-bg {
  position: absolute; inset: 0 -16px; z-index: -1;
  background: url(assets/lake-hindu.webp) center / cover;
  filter: grayscale(1) sepia(.35); opacity: .14;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
}
.countdown-sec .tiny { color: var(--gold-text); font-weight: 600; }
.countdown-sec .title { font-size: 24px; letter-spacing: .12em; color: var(--maroon); margin: 6px 0 18px; }
.countdown { display: flex; justify-content: center; align-items: flex-start; gap: 4px; }
.countdown div { min-width: 64px; }
@media (max-width: 359px) { .countdown div { min-width: 54px; } .countdown b { font-size: 32px; } .countdown span { font-size: 11px; letter-spacing: .04em; } .timeline { --tl-time: 86px; --tl-dot: 32px; } }
.countdown b { display: block; font-family: var(--caps); font-weight: 600; font-size: 38px; color: var(--maroon); line-height: 1.1; }
.countdown span { font-family: var(--caps); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.countdown i { font-style: normal; font-size: 28px; color: var(--gold); line-height: 1.2; }
.countdown-sec .italic { margin-top: 16px; font-size: 18px; }


/* ---------- RSVP ---------- */
.rsvp-sec { text-align: center; }
.rsvp-env { width: min(72vw, 290px); aspect-ratio: 290 / 360; }
.rsvp-env .env-card { transition: transform .9s ease; }
.rsvp-label { position: absolute; z-index: 4; left: 4%; right: 4%; top: 27%; padding: 16px 8px; transform: rotate(-2deg); }
.rsvp-label .script { font-size: 26px; }
.rsvp-env .seal { left: 50%; top: 58%; transform: translateX(-50%); }
.rsvp-sec.opened .rsvp-env, .rsvp-sec.opened .rsvp-hint { display: none; }

.rsvp-form { display: none; text-align: left; padding: 34px 24px 30px; }
.rsvp-sec.opened .rsvp-form { display: block; animation: rise .7s ease both; }
.rsvp-form > .caps, .rsvp-form > h3, .rsvp-form > .muted { text-align: center; }
.rsvp-form > .muted { font-style: italic; margin: 2px 0 18px; font-size: 18px; }
.rsvp-form > .caps { color: var(--gold-text); font-weight: 600; }
.field { display: block; margin: 14px 0; }
.field > span, legend { display: block; font-family: var(--caps); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field em { text-transform: none; letter-spacing: 0; font-family: var(--serif); }
input, textarea {
  width: 100%; font: inherit; font-size: 19px; color: var(--ink);
  background: rgba(255,255,255,.65); border: 0; border-bottom: 1px solid rgba(179,132,58,.6);
  padding: 8px 6px; border-radius: 0; outline: none;
}
input:focus, textarea:focus { border-bottom-color: var(--maroon); background: #fff; }
textarea { resize: vertical; border: 1px solid rgba(179,132,58,.45); }
fieldset { border: 0; padding: 0; margin: 16px 0; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice legend { grid-column: 1 / -1; }
.choice label, .events-pick label { position: relative; cursor: pointer; }
.choice input, .events-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: block; text-align: center; padding: 12px 6px; border: 1px solid rgba(179,132,58,.7); font-size: 18px;
  background: rgba(255,255,255,.5);
}
.choice label { display: flex; }
.choice span { flex: 1; display: flex; align-items: center; justify-content: center; line-height: 1.25; }
.choice input:checked + span { background: var(--maroon); color: var(--gold-light); border-color: var(--maroon); }
.choice input:focus-visible + span, .events-pick input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.events-pick label { display: block; margin: 6px 0; }
.events-pick span { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.events-pick span::before {
  content: ""; width: 20px; height: 20px; flex: none; border: 1px solid var(--gold); background: rgba(255,255,255,.6);
  display: grid; place-items: center;
}
.events-pick input:checked + span::before { content: "✓"; background: var(--maroon); color: var(--gold-light); font-size: 13px; border-color: var(--maroon); }
.stepper { display: flex; align-items: center; gap: 8px; max-width: 170px; }
.stepper button { width: 40px; height: 40px; border: 1px solid var(--gold); background: rgba(255,255,255,.6); font-size: 20px; color: var(--maroon); flex: none; }
.stepper input { text-align: center; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-error { color: #a01c2c; min-height: 1em; font-size: 16px; margin: 8px 0; text-align: center; }
.thanks { animation: rise .7s ease both; }
.thanks p { margin: 8px 0; }
.link-btn { background: none; border: 0; color: var(--maroon); font-family: var(--caps); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; padding: 10px; }

.closing { text-align: center; }
.close-card { transform: rotate(-.6deg); }
.families { font-size: 22px; font-weight: 600; line-height: 1.4; margin: 4px 0 8px; }
.back-top { margin-top: 26px; }

/* ---------- Music FAB ---------- */
.music-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 50px; height: 50px; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 35% 30%, #7d2540, var(--wine-deep));
  box-shadow: 0 0 0 3px rgba(230,198,127,.5), 0 8px 18px rgba(40,5,20,.35);
  display: grid; place-items: center;
}
.music-fab svg { width: 22px; height: 22px; fill: var(--gold-light); }
.music-fab::after { content: ""; position: absolute; width: 30px; height: 2px; background: var(--gold-light); transform: rotate(-45deg); border-radius: 2px; }
.playing .music-fab::after { display: none; }
.playing .music-fab svg { animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px) rotate(-6deg); } }

@media (max-height: 700px) {
  #intro { padding-top: 20px; padding-bottom: 14px; }
  .intro-inner .ganesh-blessing { margin-bottom: 9px; }
  .intro-inner .ganesh-blessing img { width: 58px; height: 58px; margin-bottom: 4px; }
  .intro-inner .prayer { font-size: 14px; }
  .intro-inner .names { font-size: clamp(40px, 11vw, 54px); }
  .intro-inner .envelope { margin-top: 12px; height: clamp(120px, 29svh, 220px); }
  .intro-inner .tap-hint { margin-top: 10px; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.event.reveal.in .event-info { animation: settle .9s .25s ease both; }
@keyframes settle { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}