@font-face {
  font-family: Baskerville;
  src: url('assets/Fonts/BaskervilleBT/BaskervilleBT-Roman.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html { background: #56251f; scroll-behavior: smooth; scroll-snap-type: y mandatory; }
body { margin: 0; }
.invitation { width: 100%; max-width: 480px; margin-inline: auto; overflow: clip; }
.intro { position: relative; width: 100%; height: 100vh; height: 100svh; isolation: isolate; container-type: inline-size; overflow: hidden; background: #f6e9d3; }
.intro__background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.intro__logo { position: absolute; width: 10.8%; height: auto; top: 21%; left: 45.8%; }
.intro__flowers { position: absolute; left: 25%; top: 33.5%; width: 51%; height: 30%; object-fit: contain; }
.intro__video { display: none; }
.intro__message { position: absolute; top: 67.85%; left: 12%; width: 76%; margin: 0; color: #515637; font-family: Baskerville, 'Baskerville', 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 3.65cqw; line-height: 1.28; text-align: center; }
.message-line { display: block; white-space: nowrap; }
.intro__forever { position: absolute; top: 76.4%; left: 12.7%; width: 77.3%; aspect-ratio: 1978 / 301; }
.forever-word { position: absolute; inset: 0; width: 100%; height: auto; }
.forever-bird { position: absolute; top: 0; width: 10.77%; height: auto; }
.forever-bird--left { left: 0; }
.forever-bird--right { right: 0; }
.intro__scroll { position: absolute; top: 84.45%; left: 49.85%; width: 3.44%; }
.intro__scroll img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@font-face {
  font-family: BigCaslon;
  src: url('assets/Fonts/BigCaslon/BigCaslon-Medium.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
.celebration { position: relative; height: 100vh; height: 100svh; isolation: isolate; container-type: inline-size; overflow: hidden; background: #fbe6cc; color: #61633f; }
.celebration__background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.celebration__branch { position: absolute; top: -3%; left: 23%; width: 93%; transform-origin: 8% 0; }
.celebration__branch--left { top: 11%; left: -17%; width: 68%; }
.celebration__branch img { display: block; width: 100%; mask-image: linear-gradient(to bottom, transparent 5%, black 23%); }
.celebration__parrot { position: absolute; left: 30%; top: 26%; width: 9.68%; height: auto; aspect-ratio: 238 / 660; object-fit: contain; transform-origin: 50% 28%; }
.celebration__blessing { position: absolute; top: 20.33%; left: 30.86%; width: 38.28%; }
.celebration__blessing img { display: block; width: 100%; }
.celebration__invitation { position: absolute; top: 32.95%; left: 15%; width: 70%; margin: 0; text-align: center; font: italic 600 3.9cqw/1.3 Baskerville, serif; }
.celebration__invitation span { display: block; white-space: nowrap; }
.celebration__groom, .celebration__bride { position: absolute; left: 13%; width: 74%; text-align: center; font-family: BigCaslon;}
.celebration__groom { top: 45.2%; }
.celebration__bride { top: 63.35%; }
.celebration h2 { margin: 0; height: 13.5cqw; display: grid; place-items: center; }
.celebration__name { display: block; height: 10.5cqw; width: auto; max-width: 100%; object-fit: contain; }
@font-face {
  font-family: Bigora;
  src: url('assets/Fonts/Bigora/Bigora.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.celebration__groom p, .celebration__bride p { margin: 1.3% -5% 0; font: italic 600 3.22cqw/1.2 Baskerville, serif; white-space: nowrap; }
.celebration__ampersand { position: absolute; top: 56.1%; left: 35%; width: 30%; text-align: center; font: 400 12cqw/1 Bigora, serif; color: #b32f30; }
.celebration__birds { position: absolute; top: 56%; right: -4%; width: 26%; height: 12%; object-fit: contain; }
.celebration__bottom-left { position: absolute; width: 28%; left: 1.5%; bottom: -5px; transform-origin: 50% 100%; }
.celebration__bottom-right { position: absolute; width: 36.2%; right: 4%; bottom: 0; transform-origin: 50% 100%; }

/* Preserve the original phone framing; avoid stretching in desktop previews. */
@media (min-width: 768px) {
  .intro__background, .celebration__background {
    object-fit: cover;
    object-position: center;
  }
}

.intro__scroll::after { content: ""; position: absolute; inset: -10px -14px; }
.intro__scroll:focus-visible { outline: 2px solid #61633f; outline-offset: 8px; border-radius: 8px; }

.invitation { background: #f6e9d3; }

.celebration__butterfly { position: absolute; left: 8%; top: 50%; width: 10%; height: auto; pointer-events: none; z-index: 2; transform: translate(-50%, -50%); }

.mehendi { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; container-type: inline-size; background: #fcf6e9; color: #755714; }
.mehendi__background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.mehendi__branch { position: absolute; top: 2.5%; left: 0; width: 69.2%; transform-origin: 0 40%; }
.mehendi__green-parrot { position: absolute; top: 10.3%; left: 23%; width: 21%; height: 15.5%; object-fit: contain; }
.mehendi__lantern { position: absolute; top: 0; width: 21.7%; height: auto; transform-origin: 50% 0; }
.mehendi__lantern--left { left: 53.7%; }
.mehendi__lantern--right { left: 74.1%; }
.mehendi__date { position: absolute; top: 28%; left: 40.1%; width: 29%; height: auto; }
.mehendi__title { position: absolute; top: 39.3%; left: 29.4%; width: 46.5%; margin: 0; }
.mehendi__title img { display: block; width: 100%; height: auto; }
.mehendi__details { position: absolute; top: 48.5%; left: 28%; width: 54%; text-align: center; font: italic 600 3cqw/1.15 Baskerville, serif; }
.mehendi__details p { margin: 0; }
.mehendi__details span { display: block; white-space: nowrap; }
.mehendi__venue { padding-top: 3cqw; }
.mehendi__dress { padding-top: 6cqw; font-size: 2.5cqw; }
.mehendi__middle-perch { position: absolute; left: 0; top: 57.3%; width: 19.9%; }
.mehendi__middle-perch > img { display: block; width: 100%; height: auto; }
.mehendi__left-bird { position: absolute; left: 25%; top: -5%; width: 80%; height: auto; aspect-ratio: 255 / 360; object-fit: contain; }
.mehendi__table-parrot { position: absolute; left: 44%; top: calc(84.5% - 6cqw); width: 8%; height: auto; aspect-ratio: 238 / 660; object-fit: contain; }

.mehendi__branch-bottom { position: absolute; left: 0; top: 69.5%; width: 18.3%; height: auto; transform-origin: 0 15%; }

@media (min-width: 768px) { .mehendi__background { object-fit: cover; object-position: center; } }

.invitation > section { scroll-snap-align: start; scroll-snap-stop: always; }

.mehendi__topbranch-left { position: absolute; left: 0; top: 10.3%; width: 32.5%; height: auto; }

.mehendi__branch-middle { position: absolute; left: 0; top: 34.5%; width: 27.9%; height: auto; }

.haldi { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; container-type: inline-size; background: #f8eed4; color: #a77800; }
.haldi__background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.haldi__curtains { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.haldi .mehendi__branch { top: 0.5%; }
.haldi__branch-top { position: absolute; top: 10.3%; left: 0; width: 32.5%; height: auto; }
.haldi__branch-middle { position: absolute; top: 34.5%; left: 0; width: 27.9%; height: auto; }
.haldi__top-parrot { position: absolute; top: 14%; left: 23%; width: 8%; height: auto; aspect-ratio: 238 / 660; object-fit: contain; }
.haldi__middle-perch { position: absolute; top: 57.3%; left: 0; width: 19.9%; }
.haldi__middle-perch > img { display: block; width: 100%; height: auto; }
.haldi__green-parrot { position: absolute; top: -25%; left: 23%; width: 100%; height: auto; aspect-ratio: 320 / 360; object-fit: contain; transform: scaleX(-1); }
.haldi .mehendi__date { top: 31.4%; left: 38.6%; width: 29.5%; }
.haldi .mehendi__title { top: 42.9%; left: 39.6%; width: 28%; }
.haldi .mehendi__details { top: 49.3%; left: 26%; width: 54%; }
.haldi__bottom-decor { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; mask-image: linear-gradient(to bottom, transparent 0%, black 20%); }
@media (min-width: 768px) { .haldi__background { object-fit: cover; object-position: center; } }
.event-video-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mehendi__branch-middle, .haldi__branch-middle { transform-origin: 0 10%; }

.haldi__petals { position: absolute; inset: 0; width: 100%; height: auto; object-fit: cover; z-index: 3; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .haldi__petals { display: none; } }

.mehendi__butterfly { position: absolute; left: -32%; top: 0; width: 8%; height: auto; z-index: 2; pointer-events: none; transform: translate(-50%, -85%); }

.vedic { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; container-type: inline-size; background: #fcf2dd; color: #75580d; }
.vedic__background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.vedic__top-branch { position: absolute; top: 0; left: 0; width: 23.3%; height: auto; }
.vedic__upper-flowers { position: absolute; top: 10.5%; left: 0; width: 33%; height: auto; transform-origin: 0 100%; }
.vedic__middle-branch { position: absolute; top: 34.5%; left: 0; width: 32%; height: auto; }
.vedic__lower-perch { position: absolute; top: 56%; left: 0; width: 25.3%; transform-origin: 0 12%; }
.vedic__lower-branch { display: block; width: 100%; height: auto; }
.vedic__bell { position: absolute; top: 0; width: 11.2%; }
.vedic__bell img { display: block; width: 100%; height: auto; transform-origin: 50% 0; }
.vedic__bell--left { left: 70.6%; }
.vedic__bell--right { left: 85.7%; }
.vedic .mehendi__date { top: 21.5%; left: 39.2%; width: 30%; }
.vedic .mehendi__title { top: 33.5%; left: 33.3%; width: 39.1%; }
.vedic .mehendi__details { top: 44.8%; left: 23%; width: 62%; font-style: normal; font-size: 3.4cqw; line-height: 1.25; }
.vedic .mehendi__time span + span { margin-top: 1cqw; }
.vedic .mehendi__venue { position: relative; left: -20cqw; width: 100cqw; padding-top: 3.5cqw; font-size: 2.65cqw; line-height: 1.5; text-align: center; }
.vedic .mehendi__dress { padding-top: 5cqw; font-style: italic; font-size: 2.4cqw; line-height: 1.15; }
.vedic__middle-bird { position: absolute; top: 37.3%; left: 14.5%; width: 13.5%; height: auto; aspect-ratio: 255 / 360; object-fit: contain; }
.vedic__green-parrot { position: absolute; top: 1.8svh; left: 43.48%; width: 84.98%; height: auto; aspect-ratio: 320 / 360; object-fit: contain; }
.vedic__mandap { position: absolute; right: 0; bottom: 0; width: 68.1%; height: auto; }
.vedic__pillar { position: absolute; left: 0; bottom: 0; width: 33.1%; height: auto; }
.vedic__elephant { position: absolute; left: 28.3%; bottom: 0; width: 20.4%; height: auto; }
@media (min-width: 768px) { .vedic__background { object-fit: cover; object-position: center; } }

.vedic__petals { position: absolute; top: 0; right: 0; width: 85%; height: auto; z-index: 3; pointer-events: none; transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .vedic__petals { display: none; } }

.vedic__fireworks { position: absolute; top: 5%; left: 37%; width: 34%; height: auto; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .vedic__fireworks { display: none; } }

/* Keep invitation copy and lettering above decorative artwork and overlays. */
.intro__logo,
.intro__message,
.intro__forever,
.celebration__blessing,
.celebration__invitation,
.celebration__groom,
.celebration__bride,
.celebration__ampersand,
.mehendi__date,
.mehendi__title,
.mehendi__details {
  z-index: 10;
}

.afterparty { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; container-type: inline-size; background: #fff7e8; color: #99002a; }
.afterparty__background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.afterparty__top-branch { position: absolute; top: 2%; left: 0; width: 69.2%; height: auto; transform-origin: 0 50%; }
.afterparty__upper-flowers { position: absolute; top: 10.5%; left: 0; width: 33%; height: auto; }
.afterparty__middle-branch { position: absolute; top: 34.5%; left: 0; width: 32%; height: auto; transform-origin: 0 0; }
.afterparty__fruit-branch { position: absolute; top: 57.3%; left: 0; width: 19.9%; height: auto; }
.afterparty__lower-branch { position: absolute; top: 69.5%; left: 0; width: 18.3%; height: auto; }
.afterparty__gold-disco { position: absolute; top: -16px; right: 0; width: 75.95%; height: auto; }
.afterparty__pink-disco { position: absolute; top: 26%; left: 21.4%; width: 10.3%; height: auto; }
.afterparty__top-parrot { position: absolute; top: 15%; left: 23%; width: 8%; height: auto; aspect-ratio: 238 / 660; object-fit: contain; }
.afterparty__green-parrot { position: absolute; top: 53.8%; left: 3%; width: 21.5%; height: auto; aspect-ratio: 320 / 360; object-fit: contain; transform: scaleX(-1); }
.afterparty__date { position: absolute; top: 28.5%; left: 38.3%; width: 30%; height: auto; z-index: 10; }
.afterparty__title { position: absolute; top: 42.8%; left: 30%; width: 46%; margin: 0; z-index: 10; }
.afterparty__title img { display: block; height: auto; }
.afterparty__wedding-text { width: 60%; margin: 0 auto 3cqw; }
.afterparty__party-text { width: 100%; }
.afterparty__time, .afterparty__venue, .afterparty__message { position: absolute; margin: 0; text-align: center; font: 600 3.3cqw/1.3 Baskerville, serif; z-index: 10; }
.afterparty__time { top: 53.5%; left: 30%; width: 46%; }
.afterparty__venue { top: 59.1%; left: 29%; width: 47%; font-size: 2.8cqw; line-height: 1.4; }
.afterparty__venue span, .afterparty__message span { display: block; white-space: nowrap; }
.afterparty__message { top: 68.5%; left: 24%; width: 58%; font-style: italic; font-weight: 400; font-size: 3cqw; }
.afterparty__butterfly { position: absolute; top: 45.3%; left: 77%; width: 5%; height: auto; }
.afterparty__skyline { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
@media (min-width: 768px) { .afterparty__background { object-fit: cover; object-position: center; } }
.afterparty__pink-disco { transform-origin: 55% 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.rsvp { position: relative; min-height: 100vh; min-height: 100svh; isolation: isolate; container-type: inline-size; background: #fcecd2; color: #9f002b; padding: 0 11% 25cqw; }
.rsvp__background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.rsvp__content { padding-top: 61cqw; position: relative; z-index: 10; }
.rsvp h2 { width: 78%; margin: 0 auto; }
.rsvp h2 img { display: block; width: 100%; height: auto; }
.rsvp__intro { margin: 2cqw -2cqw 5.2cqw; text-align: center; font: 400 2.55cqw/1.4 Baskerville, serif; }
.rsvp__form { position: relative; padding: 5cqw 3.5cqw; border: 1px solid #c4b58e; outline: 1px solid #d7cbb0; outline-offset: -4px; border-radius: 4px; background: #f8f5ef; color: #8d7539; font: 400 12px/1.5 Arial, sans-serif; }
.rsvp__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin: 0; padding: 0; border: 0; }
.rsvp__choices label { position: relative; cursor: pointer; }
.rsvp__choices input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rsvp__choices span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 11px 5px; border: 1px solid #c4b58e; border-radius: 9px; font-size: clamp(10px, 2.3cqw, 12px); transition: background-color 200ms ease, color 200ms ease; }
.rsvp__choices input:checked + span { background: #9b7b2d; color: #fffaf0; }
.rsvp__choices input:focus-visible + span { outline: 2px solid #9f002b; outline-offset: 3px; }
.rsvp__prompt { margin: 4.2cqw 0 1.5cqw; text-align: center; font: italic 400 2.7cqw/1.4 Baskerville, serif; }
.rsvp__fields { padding-top: 6cqw; }
.rsvp__field { display: block; margin-bottom: 5.5cqw; font-size: clamp(11px, 2.45cqw, 12px); letter-spacing: 0.01em; }
.rsvp__field input, .rsvp__field select, .rsvp__field textarea { display: block; margin-top: 2cqw; width: 100%; border: 1px solid #c4b58e; border-radius: 9px; background: #fdfbf7; color: #826d39; padding: 12px; min-height: 44px; font: 400 14px/1.5 Baskerville, serif; }
.rsvp__field textarea { resize: vertical; min-height: 110px; }
.rsvp__field textarea::placeholder { color: #b2a789; font: 400 12px/1.6 Baskerville, serif; }
.rsvp__field :focus-visible { outline: 2px solid #9f002b; outline-offset: 2px; }
.rsvp__submit { width: 100%; padding: 13px 8px; min-height: 44px; border: 0; border-radius: 8px; background: #9b7b2d; color: #fffaf0; font: 400 11px/1.4 Arial, sans-serif; letter-spacing: 0.06em; cursor: pointer; }
.rsvp__submit:disabled { opacity: 0.65; cursor: wait; }
.rsvp__status { margin: 0; font-size: 12px; }
.rsvp__status:not(:empty) { margin-top: 12px; }
.rsvp__status[data-error] { color: #9f002b; }
.rsvp__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rsvp__thanks { text-align: center; padding-top: 17cqw; outline: none; }
.rsvp__thanks h3 { margin: 0 0 3cqw; font: 400 9cqw/1.15 BigCaslon, serif; }
.rsvp__thanks-message { margin: 0; font: 400 4.5cqw/1.3 Baskerville, serif; white-space: pre-line; }
.rsvp__contact { margin-top: 18cqw; }
.rsvp__contact img { display: block; width: 40%; height: auto; margin: 0 auto 2cqw; }
.rsvp__contact a { color: inherit; text-decoration: none; font: 400 6cqw/1.2 Baskerville, serif; }

.rsvp__field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%239b7b2d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 7px;
}

.closing { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: #fbf1df; }
.closing__background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.closing__flowers { position: absolute; top: 34.2%; left: 29.15%; width: 41.7%; height: auto; }
.closing__signature { position: absolute; top: 56%; left: 33%; width: 34%; margin: 0; z-index: 10; }
.closing__signature img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) { .closing__background { object-fit: cover; object-position: center; } }
.closing__flowers { transform-origin: 50% 100%; }

html.invitation-locked { overflow: hidden; }
.intro-cover { position: fixed; inset: 0; width: min(100%, 480px); margin-inline: auto; z-index: 100; background: #f4e8d3; display: grid; place-items: center; }
.intro-cover__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-cover__play { position: relative; display: grid; place-items: center; width: 76px; height: 76px; padding: 0; border: 1px solid rgba(255, 250, 237, 0.85); border-radius: 50%; background: rgba(112, 70, 41, 0.24); box-shadow: 0 4px 28px #6a3e2c24; backdrop-filter: blur(4px); cursor: pointer; }
.intro-cover__play span { width: 0; height: 0; margin-left: 5px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 19px solid #fff9eb; }
.intro-cover__play:focus-visible { outline: 3px solid #9f002b; outline-offset: 6px; }
.music-toggle { position: fixed; right: max(12px, calc((100vw - 480px) / 2 + 12px)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 80; padding: 9px 12px; border: 1px solid #bca86d; border-radius: 20px; background: #fff8eae8; color: #805f28; font: 12px Baskerville, serif; cursor: pointer; }