/* =========================================================
   Aman & Madhu — Wedding Invitation
   Mobile-first. Palette drawn from the supplied artwork.
   ========================================================= */

:root {
  --ivory: #FBF4E6;
  --cream: #F4E7D0;
  --champagne: #E6CFA6;
  --gold: #A47B2E;
  --gold-soft: #C9A452;
  --gold-deep: #7A5A1C;
  --maroon: #6A1B22;
  --maroon-deep: #45101A;
  --brown: #3A2217;
  --ink: #4A2C1F;
  --rose: #B5606C;

  --gold-metal: linear-gradient(170deg, #8E6A26 0%, #C29C4E 35%, #DDBF7C 50%, #B38A3C 68%, #8A6522 100%);

  --f-display: "Cormorant Garamond", "Noto Serif Devanagari", Georgia, serif;
  --f-caps: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --f-body: "Cormorant Garamond", "Noto Serif Devanagari", Georgia, serif;
  --f-deva: "Noto Serif Devanagari", "Tiro Devanagari Hindi", serif;
  --f-deva-display: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --ease-royal: cubic-bezier(.65, .05, .25, 1);
}

/* Hindi switches every family, so nothing is left in a Latin face */
html[lang="hi"] {
  --f-display: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;
  --f-body: "Noto Serif Devanagari", serif;
  --f-caps: "Noto Serif Devanagari", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="hi"] body { font-size: 1.02rem; line-height: 1.85; }

body.is-locked { overflow: hidden; height: 100%; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--maroon); color: var(--ivory); padding: .5rem 1rem; border-radius: 4px;
}
.skip-link:focus { top: calc(12px + var(--safe-t)); }

.ganesh {
  font-family: var(--f-deva-display);
  letter-spacing: .04em;
  color: var(--maroon);
}

/* Gold metallic text */
.gold-text,
.gate__name, .hero__name, .paper__name, .couple__first, .venue__name, .cd__num,
.heart__day, .closing__names, .guest__couple, .gate__amp, .hero__amp {
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 7vw, 3.2rem);
  line-height: 1.15;
  color: var(--maroon);
  text-align: center;
  text-wrap: balance;
}
html[lang="hi"] .section-title { font-style: normal; font-size: clamp(1.7rem, 6.4vw, 2.8rem); line-height: 1.45; }
.section-title--light { color: var(--champagne); }

.lozenge {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--gold); display: inline-block; flex: none;
}

/* =========================================================
   1. LOADER
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-content: center; justify-items: center; gap: 1.2rem;
  background: radial-gradient(ellipse at 50% 45%, #5A1720 0%, var(--maroon-deep) 70%);
  transition: opacity .8s ease, visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__glow {
  position: absolute; width: 60vmin; height: 60vmin; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(233, 196, 120, .28), transparent 65%);
  animation: breathe 3s ease-in-out infinite;
}
.loader__kalash { width: clamp(110px, 32vw, 170px); position: relative; filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); }
.loader__ganesh { color: var(--champagne); font-size: clamp(1.1rem, 4.6vw, 1.5rem); position: relative; }
.loader__thread { width: 140px; height: 1px; background: rgba(230, 207, 166, .25); position: relative; overflow: hidden; }
.loader__thread span { position: absolute; inset: 0; background: var(--gold-metal); transform-origin: left; animation: thread 1.8s var(--ease-royal) infinite; }

@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .7; } }
@keyframes thread { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); transform-origin: left; } 61% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* =========================================================
   2–3. GATE + DOORS
   ========================================================= */
.gate {
  position: fixed; inset: 0; z-index: 50;
  overflow: hidden;
}
.gate.is-gone { display: none; }
.gate__veil { position: absolute; inset: 0; background: rgba(40, 10, 14, .55); pointer-events: none; }
/* CSS-only fallback if GSAP fails to load */
.gate.no-gsap .door { transition: transform 1.8s var(--ease-royal); }
.gate.no-gsap .gate__content, .gate.no-gsap .gate__veil { transition: opacity .6s ease; }
.gate.no-gsap.is-opening .gate__content, .gate.no-gsap.is-opening .gate__veil { opacity: 0; }
.gate.no-gsap.is-opening .door--left { transform: rotateY(-108deg); }
.gate.no-gsap.is-opening .door--right { transform: rotateY(108deg); }

.gate__stage {
  position: absolute; inset: 0;
  perspective: 1600px;
  perspective-origin: 50% 45%;
  display: flex;
}
.door {
  position: relative;
  width: 50%; height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.door--left { transform-origin: 0% 50%; }
.door--right { transform-origin: 100% 50%; }

.door__face {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 100% 45%, rgba(255, 210, 140, .10), transparent 55%),
    linear-gradient(180deg, #5C1820 0%, var(--maroon-deep) 100%);
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: inset -1px 0 0 rgba(201, 164, 82, .6);
}
.door--right .door__face {
  background:
    radial-gradient(ellipse at 0% 45%, rgba(255, 210, 140, .10), transparent 55%),
    linear-gradient(180deg, #5C1820 0%, var(--maroon-deep) 100%);
  box-shadow: inset 1px 0 0 rgba(201, 164, 82, .6);
}

/* carved panel with an arched head */
.door__panel {
  position: absolute;
  inset: calc(4.5vh + var(--safe-t)) 9% calc(3.5vh + var(--safe-b)) 9%;
  border: 1px solid rgba(201, 164, 82, .75);
  border-radius: 999px 999px 6px 6px / 22vh 22vh 6px 6px;
  box-shadow: 0 0 0 5px rgba(69, 16, 26, .6), 0 0 0 6px rgba(201, 164, 82, .35), inset 0 0 40px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.door__jaali {
  position: absolute; inset: 0; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23D9B76A' stroke-width='1'%3E%3Cpath d='M22 2c6 8 6 12 0 20-6-8-6-12 0-20zM22 42c6-8 6-12 0-20-6 8-6 12 0 20zM2 22c8-6 12-6 20 0-8 6-12 6-20 0zM42 22c-8-6-12-6-20 0 8 6 12 6 20 0z'/%3E%3Ccircle cx='22' cy='22' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
}
.door__vine {
  position: absolute; top: calc(-2vh + var(--safe-t)); width: 58%;
  opacity: .9; filter: saturate(.85) brightness(1.05);
}
.door--left .door__vine { left: -6%; }
.door--right .door__vine { right: -6%; }

.door__peacock {
  position: absolute; bottom: calc(2vh + var(--safe-b));
  width: min(78%, 34vh);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .45));
}
.door--left .door__peacock { left: 2%; }
.door--right .door__peacock { right: 2%; }

.door__ring {
  position: absolute; top: 50%; width: 22px; height: 22px; margin-top: 10vh;
  border: 2px solid var(--gold-soft); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(69, 16, 26, .7), 0 2px 6px rgba(0, 0, 0, .5);
}
.door--left .door__ring { right: 10px; }
.door--right .door__ring { left: 10px; }

.gate__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(13vh + var(--safe-t)) 1.5rem 0;
  text-align: center;
  color: var(--champagne);
  pointer-events: none;
}
.gate__content > * { pointer-events: auto; }
.gate__ganesh { color: var(--gold-soft); font-size: clamp(1rem, 4.4vw, 1.35rem); }
.gate__blessing {
  margin-top: 1.2rem;
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.05rem, 4.4vw, 1.35rem); color: var(--champagne);
}
html[lang="hi"] .gate__blessing { font-style: normal; }
.gate__names {
  margin: 1.1rem 0 .9rem;
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
}
.gate__name {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2.4rem, 11vw, 4.6rem);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}
html[lang="hi"] .gate__name { line-height: 1.35; font-size: clamp(2.1rem, 10vw, 4rem); }
.gate__amp { font-family: var(--f-display); font-style: italic; font-size: clamp(1.6rem, 7vw, 2.6rem); margin: .1em 0; }
.gate__request {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1rem, 4.2vw, 1.3rem); max-width: 26ch; color: var(--champagne);
}
html[lang="hi"] .gate__request { font-style: normal; }

/* wax-seal style open button */
.seal {
  position: relative; margin-top: 2rem;
  min-height: 52px; padding: .8rem 2rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 30%, #E9CF8C 0%, #B88F3E 45%, #7F5C1E 100%);
  color: var(--maroon-deep);
  font-family: var(--f-caps); font-size: .95rem; letter-spacing: .12em;
  box-shadow: 0 0 0 1px rgba(255, 236, 190, .6) inset, 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .3s ease;
}
html[lang="hi"] .seal { letter-spacing: .02em; font-size: 1.05rem; }
.seal:hover { transform: translateY(-2px); }
.seal__ring {
  position: absolute; inset: -7px; border-radius: inherit;
  border: 1px solid rgba(217, 183, 106, .6);
  animation: ring 2.6s ease-out infinite;
}
@keyframes ring { 0% { transform: scale(.94); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }

/* =========================================================
   FX canvas
   ========================================================= */
.fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 55; pointer-events: none; }

/* =========================================================
   FLOATING MENU
   ========================================================= */
.menu {
  position: fixed; z-index: 60;
  top: calc(14px + var(--safe-t)); right: 14px;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s;
}
body.is-open .menu { opacity: 1; visibility: visible; }
.menu__toggle {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(164, 123, 46, .55);
  background: rgba(251, 244, 230, .82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--maroon); display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(58, 34, 23, .15);
}
.menu__toggle svg { width: 26px; height: 26px; transition: transform .5s var(--ease-royal); }
.menu__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.menu__list {
  list-style: none; margin: 10px 0 0; padding: .6rem 0;
  position: absolute; right: 0; min-width: 170px;
  background: rgba(251, 244, 230, .96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(164, 123, 46, .4); border-radius: 18px 4px 18px 18px;
  box-shadow: 0 14px 40px rgba(58, 34, 23, .18);
  transform-origin: top right; transform: scale(.9); opacity: 0; visibility: hidden;
  transition: transform .35s var(--ease-royal), opacity .3s, visibility .3s;
}
.menu.is-expanded .menu__list { transform: none; opacity: 1; visibility: visible; }
.menu__list a {
  display: block; padding: .55rem 1.3rem; text-decoration: none;
  font-family: var(--f-display); font-size: 1.2rem; color: var(--maroon);
}
.menu__list a:hover, .menu__list a:focus-visible { background: rgba(164, 123, 46, .12); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(4.5rem + var(--safe-t)) 1rem 5.5rem;
  overflow: hidden;
  background: var(--ivory);
}
.hero__texture {
  position: absolute; inset: -10% 0;
  background: url("watercolor-texture.jpg") center / cover no-repeat;
  opacity: .5;
}
.hero__texture::after { /* soften ornate corners so they don't fight the arch */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(251, 244, 230, .55) 25%, rgba(251, 244, 230, 0) 75%);
}
.hero__vine { position: absolute; top: -2%; width: clamp(110px, 30vw, 260px); pointer-events: none; }
.hero__vine--l { left: -4%; }
.hero__vine--r { right: -4%; }
.hero__peacock, .hero__floral { display: none; position: absolute; pointer-events: none; }

.hero__wrap {
  position: relative;
  width: min(92vw, 62svh, 540px);
  container-type: inline-size;
}
.hero__card { position: relative; }
.hero__arch { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(122, 90, 28, .12)); }
.hero__text {
  position: absolute; left: 17cqi; right: 17cqi; top: 13cqi; height: 60cqi;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.hero__ganesh { font-size: 3.6cqi; margin-bottom: 3cqi; }
.hero__names { display: flex; flex-direction: column; align-items: center; line-height: 1.04; }
.hero__line { display: block; overflow: hidden; padding: 0 .1em .08em; }
.hero__name { display: inline-block; font-family: var(--f-display); font-weight: 500; font-size: 9.2cqi; }
.hero__names:focus { outline: none; }
html[lang="hi"] .hero__name { font-size: 9cqi; line-height: 1.4; }
.hero__amp { display: inline-block; font-family: var(--f-display); font-style: italic; font-size: 7cqi; line-height: 1.1; }
.hero__kicker {
  margin-top: 3.4cqi; font-family: var(--f-display); font-style: italic;
  font-size: 4.6cqi; color: var(--maroon); line-height: 1.3;
}
html[lang="hi"] .hero__kicker { font-style: normal; font-size: 3.8cqi; max-width: 30cqi; line-height: 1.5; }

.hero__details {
  position: relative; margin-top: .8rem;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  text-align: center; color: var(--brown);
}
.hero__date { font-family: var(--f-caps); font-size: clamp(1rem, 4.3vw, 1.25rem); letter-spacing: .06em; color: var(--maroon); }
html[lang="hi"] .hero__date { letter-spacing: 0; }
.hero__time { font-family: var(--f-display); font-size: 1.3rem; font-style: italic; }
html[lang="hi"] .hero__time { font-style: normal; font-size: 1.1rem; }
.hero__venue { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.3; }

.scroll-cue {
  position: absolute; bottom: calc(1.2rem + var(--safe-b)); left: 50%; transform: translateX(-50%);
  width: 30px; height: 46px; display: grid; justify-items: center;
}
.scroll-cue__line { width: 1px; height: 100%; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* =========================================================
   DIVIDER
   ========================================================= */
.divider { display: flex; justify-content: center; padding: 1rem 0; background: var(--ivory); }
.divider svg { width: min(320px, 80vw); height: auto; overflow: visible; }
.divider path, .divider circle { fill: none; stroke: var(--gold); stroke-width: 1; }
.divider circle { fill: var(--gold); stroke: none; }

/* =========================================================
   FRAMES (shared: image card with text in its empty arch)
   ========================================================= */
.frame-wrap { container-type: inline-size; width: min(92vw, 470px); margin-inline: auto; position: relative; }
.frame { position: relative; }
.frame__img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 30px 60px -30px rgba(74, 44, 31, .45); }
.frame__text {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--ink);
}

/* =========================================================
   GUEST
   ========================================================= */
.guest { padding: 3rem 0 2rem; background: var(--ivory); position: relative; }
.frame--hands .frame__text { left: 20cqi; right: 20cqi; top: 21cqi; height: 74cqi; gap: 3cqi; }
.guest__dear { font-family: var(--f-display); font-style: italic; font-size: 7cqi; color: var(--maroon); line-height: 1.2; }
html[lang="hi"] .guest__dear { font-style: normal; font-size: 6.2cqi; line-height: 1.5; }
.guest__name { overflow-wrap: anywhere; word-break: break-word; }
.guest__dear[data-size="l"] { font-size: 5.6cqi; }
.guest__dear[data-size="xl"] { font-size: 4.8cqi; line-height: 1.35; }
html[lang="hi"] .guest__dear[data-size="l"] { font-size: 5.2cqi; }
html[lang="hi"] .guest__dear[data-size="xl"] { font-size: 4.5cqi; }
.guest__body { white-space: pre-line; font-size: 4.4cqi; line-height: 1.5; font-style: italic; }
html[lang="hi"] .guest__body { font-style: normal; font-size: 4cqi; line-height: 1.75; }
.guest__couple { font-family: var(--f-display); font-weight: 500; font-size: 10cqi; line-height: 1.1; }
html[lang="hi"] .guest__couple { font-size: 8cqi; line-height: 1.5; }
.guest__after { font-size: 4cqi; line-height: 1.6; }
.guest__after:empty { display: none; }

/* =========================================================
   INVITATION (watercolour paper — grows with its text)
   ========================================================= */
.invitation { position: relative; padding: 1rem 0 4rem; background: var(--ivory); overflow: hidden; }
.invitation__vine { position: absolute; top: 0; right: 3%; width: clamp(90px, 22vw, 200px); opacity: .9; pointer-events: none; z-index: 2; }

.paper-wrap { container-type: inline-size; width: min(94vw, 600px); margin-inline: auto; }
.paper {
  aspect-ratio: 736 / 1308;
  background: url("watercolor-texture.jpg") center / 100% 100% no-repeat;
  padding: 19cqi 13cqi 42cqi;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 30px 70px -35px rgba(74, 44, 31, .5);
}
.paper__ganesh { font-size: max(.95rem, 3.8cqi); margin-bottom: 4cqi; }
.paper__intro { white-space: pre-line; font-style: italic; font-size: max(1rem, 4.1cqi); line-height: 1.55; }
html[lang="hi"] .paper__intro, html[lang="hi"] .paper__bless, html[lang="hi"] .paper__outro { font-style: normal; font-size: max(.95rem, 3.7cqi); line-height: 1.85; }
.paper__person { margin-top: 5cqi; }
.paper__name { font-family: var(--f-display); font-weight: 500; font-size: max(2rem, 8.6cqi); line-height: 1.1; }
html[lang="hi"] .paper__name { font-size: max(1.8rem, 7.4cqi); line-height: 1.5; }
.paper__rel { font-style: italic; font-size: max(.95rem, 3.6cqi); color: var(--rose); margin-top: 1cqi; }
html[lang="hi"] .paper__rel { font-style: normal; }
.paper__parents { font-family: var(--f-display); font-size: max(1.05rem, 4.3cqi); color: var(--maroon); line-height: 1.35; text-wrap: balance; }
.paper__with { margin-top: 4cqi; font-family: var(--f-display); font-style: italic; font-size: max(1.3rem, 5.6cqi); color: var(--gold); }
html[lang="hi"] .paper__with { font-style: normal; }
.paper__outro { margin-top: 5cqi; white-space: pre-line; font-style: italic; font-size: max(.98rem, 3.9cqi); line-height: 1.55; }
.paper__knot {
  width: 14cqi; height: 1px; margin: 5cqi 0; position: relative; background: var(--gold);
}
.paper__knot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.paper__bless { white-space: pre-line; font-size: max(1rem, 4.1cqi); line-height: 1.55; font-style: italic; }
.paper__from { margin-top: 4cqi; font-family: var(--f-display); font-size: max(1rem, 4cqi); color: var(--maroon); }

/* =========================================================
   COUPLE
   ========================================================= */
.couple {
  position: relative; padding: 4rem 0 0; overflow: hidden;
  background: linear-gradient(180deg, var(--ivory) 0%, #F7EAD6 100%);
}
.couple__floral { position: absolute; width: clamp(120px, 34vw, 300px); pointer-events: none; opacity: .95; }
.couple__floral--l { left: -6%; top: 2%; transform: rotate(-8deg); }
.couple__grid {
  margin-top: 2.2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem;
  grid-template-areas: "frame frame" "groom bride";
  align-items: start;
  padding: 0 1rem;
}
.couple__frame { grid-area: frame; width: min(88vw, 460px); }
.couple__person { text-align: center; }
.couple__person--groom { grid-area: groom; }
.couple__person--bride { grid-area: bride; }
.couple__role { font-style: italic; color: var(--rose); font-size: 1.05rem; }
html[lang="hi"] .couple__role { font-style: normal; }
.couple__first { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.8rem, 13vw, 5.5rem); line-height: 1.05; }
html[lang="hi"] .couple__first { line-height: 1.4; }
.couple__family { font-size: 1rem; line-height: 1.45; max-width: 18ch; margin: .3rem auto 0; }

.frame--mandap .frame__text { left: 20cqi; right: 20cqi; top: 44cqi; height: 36cqi; }
.couple__archline { white-space: pre-line; font-family: var(--f-display); font-style: italic; font-size: 6.4cqi; line-height: 1.3; color: var(--maroon); }
html[lang="hi"] .couple__archline { font-style: normal; font-size: 5.4cqi; line-height: 1.6; }

.couple__hands { width: min(72vw, 380px); margin: 2.2rem auto -1px; position: relative; z-index: 2; }

/* =========================================================
   SCRATCH-TO-REVEAL HEART
   ========================================================= */
.reveal {
  position: relative; padding: 9rem 1rem 4.5rem; overflow: hidden; text-align: center;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(233, 196, 120, .18), transparent 60%),
    #F7EAD6;
}
.reveal__vines { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.reveal__vines img { width: clamp(80px, 22vw, 190px); }
.reveal__hint { margin-top: .6rem; font-style: italic; font-size: 1.05rem; color: var(--brown); }
html[lang="hi"] .reveal__hint { font-style: normal; font-size: .98rem; }

.heart {
  --size: min(84vw, 380px);
  position: relative; width: var(--size); height: var(--size); margin: 1.6rem auto 0;
}
.heart__mandala { position: absolute; inset: -14%; opacity: .5; pointer-events: none; }
.heart__under, .heart__canvas, .heart__outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.heart__under {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* keep the date inside the heart's "safe" core: below the lobes' dip, above the narrowing point */
  padding: 20% 24% 30%;
  text-align: center;
  background: radial-gradient(circle at 50% 45%, #FFF8EC 0%, #F6DCCB 70%, #EBC0B0 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 26C50 22 44 10 27 10 8 10 4 28 4 36c0 22 22 38 46 56 24-18 46-34 46-56 0-8-4-26-23-26-17 0-23 12-23 16z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 26C50 22 44 10 27 10 8 10 4 28 4 36c0 22 22 38 46 56 24-18 46-34 46-56 0-8-4-26-23-26-17 0-23 12-23 16z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.heart__under > * { line-height: 1.15; white-space: nowrap; }
.heart__day { font-family: var(--f-caps); font-weight: 600; font-size: calc(var(--size) * .145); line-height: 1; }
.heart__month { font-family: var(--f-caps); color: var(--maroon); font-size: calc(var(--size) * .052); letter-spacing: .12em; margin-top: calc(var(--size) * .012); padding-left: .12em; }
html[lang="hi"] .heart__month { letter-spacing: 0; padding-left: 0; font-size: calc(var(--size) * .056); line-height: 1.4; }
.heart__year { font-family: var(--f-caps); color: var(--maroon); font-size: calc(var(--size) * .042); letter-spacing: .32em; padding-left: .32em; }
.heart__time {
  position: relative; font-family: var(--f-display); font-style: italic; font-size: calc(var(--size) * .05); color: var(--brown);
  margin-top: calc(var(--size) * .03); padding-top: calc(var(--size) * .022);
}
.heart__time::before { content: ""; position: absolute; top: 0; left: 50%; width: calc(var(--size) * .1); height: 1px; transform: translateX(-50%); background: var(--gold); }
html[lang="hi"] .heart__time { font-style: normal; font-size: calc(var(--size) * .044); line-height: 1.5; }
.heart__canvas { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.heart__canvas:active { cursor: grabbing; }
.heart__outline { pointer-events: none; overflow: visible; }
.heart__outline path { fill: none; stroke: var(--gold); stroke-width: .7; }
.heart.is-revealed .heart__under { animation: heartGlow 2.4s ease-out 1; }
.heart.is-revealed .heart__outline path { stroke-width: 1; filter: drop-shadow(0 0 2px rgba(233, 196, 120, .9)); }
@keyframes heartGlow { 0% { filter: brightness(1.5); } 100% { filter: none; } }

.reveal__skip {
  margin-top: 1.4rem; background: none; border: 0; cursor: pointer; padding: .6rem 1rem;
  font-size: .95rem; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(164, 123, 46, .4);
}
.reveal__after { margin-top: 1.2rem; font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: var(--maroon); opacity: 0; }
html[lang="hi"] .reveal__after { font-style: normal; font-size: 1.15rem; }
.heart.is-revealed ~ .reveal__skip { visibility: hidden; }

/* =========================================================
   COUNTDOWN (maroon band)
   ========================================================= */
.countdown {
  position: relative; text-align: center; color: var(--champagne);
  padding: 6.5rem 1rem 4rem; margin-top: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C9A452' stroke-opacity='.10'%3E%3Cpath d='M30 4l26 26-26 26L4 30z'/%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 30%, #6E1E27 0%, var(--maroon-deep) 75%);
}
.countdown::before, .countdown::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 20%, var(--gold-soft) 80%, transparent);
  -webkit-mask: radial-gradient(circle at 5px 5px, #000 2.4px, transparent 2.6px) 0 0 / 14px 10px;
  mask: radial-gradient(circle at 5px 5px, #000 2.4px, transparent 2.6px) 0 0 / 14px 10px;
}
.countdown::before { top: 14px; }
.countdown::after { bottom: 14px; }
.countdown__nagada {
  position: absolute; left: 50%; top: 0; width: clamp(130px, 38vw, 220px);
  transform: translate(-50%, -52%);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
}
.countdown__shehnai { display: none; position: absolute; width: clamp(140px, 16vw, 230px); top: 40%; opacity: .9; }
.cd {
  margin: 2rem auto 0; max-width: 720px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
.cd__unit { display: flex; flex-direction: column; align-items: center; position: relative; padding: .4rem 0; }
.cd__unit + .cd__unit::before {
  content: ""; position: absolute; left: -.25rem; top: 18%; bottom: 30%; width: 1px;
  background: linear-gradient(transparent, rgba(201, 164, 82, .55), transparent);
}
.cd__num {
  font-family: "Cinzel", serif; font-weight: 500;
  font-size: clamp(2.2rem, 11vw, 4.6rem); line-height: 1.1;
  font-variant-numeric: tabular-nums; display: inline-block;
}
.cd__label { font-size: clamp(.85rem, 3.4vw, 1.05rem); font-style: italic; color: var(--champagne); opacity: .85; }
html[lang="hi"] .cd__label { font-style: normal; }
.cd__done { margin: 2rem auto 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.6rem, 6vw, 2.6rem); color: var(--champagne); max-width: 20ch; line-height: 1.3; }
html[lang="hi"] .cd__done { font-style: normal; }
.countdown__until { margin-top: 1.6rem; font-family: var(--f-caps); letter-spacing: .08em; font-size: .95rem; color: var(--gold-soft); }
html[lang="hi"] .countdown__until { letter-spacing: 0; }

/* =========================================================
   VENUE
   ========================================================= */
.venue {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(180px, 56vw, 300px) 1.25rem clamp(300px, 98vw, 480px);
  background: var(--ivory);
}
.venue__corner { position: absolute; pointer-events: none; height: auto; }
.venue__corner--top { top: 0; left: 0; width: clamp(160px, 46vw, 360px); }
.venue__corner--bottom { bottom: 0; right: 0; width: clamp(210px, 62vw, 440px); }
.venue__content { position: relative; max-width: 34rem; margin: 0 auto; }
.venue__name {
  margin-top: 1rem; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.8rem, 13vw, 5.6rem); line-height: 1.02;
}
html[lang="hi"] .venue__name { line-height: 1.4; font-weight: 400; }
.venue__city { font-family: var(--f-caps); font-size: clamp(.95rem, 4vw, 1.2rem); letter-spacing: .1em; color: var(--maroon); margin-top: .4rem; }
html[lang="hi"] .venue__city { letter-spacing: 0; }
.venue__cta { margin-top: .4rem; }
.venue__cta .btn-gold { margin-top: 1.2rem; }
.venue__when { margin-top: 1.4rem; display: inline-flex; flex-direction: column; gap: .1rem; padding: .9rem 1.6rem; border-top: 1px solid rgba(164, 123, 46, .45); border-bottom: 1px solid rgba(164, 123, 46, .45); font-family: var(--f-display); font-size: 1.2rem; }

/* =========================================================
   BUTTON
   ========================================================= */
.btn-gold {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem;
  min-height: 50px; padding: .75rem 1.7rem; border-radius: 999px; text-decoration: none;
  background: var(--maroon); color: var(--champagne);
  border: 1px solid var(--gold-soft);
  font-family: var(--f-caps); letter-spacing: .1em; font-size: .9rem;
  box-shadow: 0 12px 26px -12px rgba(69, 16, 26, .7), inset 0 0 0 3px var(--maroon), inset 0 0 0 4px rgba(201, 164, 82, .5);
  transition: transform .3s ease, background-color .3s ease;
}
html[lang="hi"] .btn-gold { letter-spacing: 0; font-size: 1rem; }
.btn-gold:hover { transform: translateY(-2px); background: #7A2129; }
.btn-gold svg { width: 20px; height: 20px; fill: none; stroke: var(--gold-soft); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

/* =========================================================
   GALLERY — fanned slideshow
   ========================================================= */
.gallery { position: relative; padding: 4rem 0 3rem; overflow: hidden; background: #F5E6CF; }
.gallery__elephant { display: none; position: absolute; width: 130px; right: 3%; bottom: 3%; opacity: .95; pointer-events: none; }
.slider { margin-top: 2rem; position: relative; }
.slider__stage {
  position: relative; height: min(118vw, 560px);
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.slide {
  position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 736 / 1104;
  margin-left: calc(min(118vw, 560px) * -0.3333);
  border: 0; padding: 0; background: var(--ivory); cursor: zoom-in;
  box-shadow: 0 24px 50px -24px rgba(58, 34, 23, .55);
  outline-offset: 6px;
}
.slide::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(164, 123, 46, .45); pointer-events: none; }
.slide img { width: 100%; height: 100%; object-fit: contain; background: var(--ivory); }
.slider__caption { margin-top: 1.3rem; text-align: center; font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: var(--maroon); min-height: 2em; }
html[lang="hi"] .slider__caption { font-style: normal; font-size: 1.15rem; }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .4rem; }
.slider__btn {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(164, 123, 46, .55); background: transparent; color: var(--maroon);
  display: grid; place-items: center;
}
.slider__btn svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.slider__dots { display: flex; gap: .2rem; }
.slider__dot { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.slider__dot::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold); transition: background-color .3s; }
.slider__dot[aria-current="true"]::before { background: var(--gold); }

/* =========================================================
   CLOSING + FOOTER
   ========================================================= */
.closing { position: relative; padding: 4rem 0 3rem; text-align: center; background: linear-gradient(180deg, #F5E6CF, var(--ivory)); }
.closing__kalash { width: clamp(90px, 24vw, 130px); margin: 0 auto -1.2rem; position: relative; z-index: 2; filter: drop-shadow(0 10px 18px rgba(122, 90, 28, .25)); }
.frame--varmala .frame__text { left: 20cqi; right: 20cqi; top: 22cqi; height: 64cqi; gap: 3.4cqi; }
.closing__bless { white-space: pre-line; font-family: var(--f-display); font-style: italic; font-size: 5cqi; line-height: 1.4; color: var(--maroon); }
html[lang="hi"] .closing__bless { font-style: normal; font-size: 4.4cqi; line-height: 1.7; }
.closing__await { font-size: 4.1cqi; line-height: 1.5; }
.closing__names { font-family: var(--f-display); font-weight: 500; font-size: 10cqi; line-height: 1.15; }
html[lang="hi"] .closing__names { font-size: 8.4cqi; line-height: 1.5; }
.closing__date { font-family: "Cinzel", serif; letter-spacing: .3em; font-size: 3.8cqi; color: var(--gold-deep); }

.footer { position: relative; text-align: center; padding: 3rem 1rem calc(6.5rem + var(--safe-b)); background: var(--ivory); overflow: hidden; }
.footer__mandala { position: absolute; width: 360px; height: 360px; left: 50%; top: 50%; transform: translate(-50%, -40%); opacity: .35; pointer-events: none; }
.footer .ganesh { position: relative; font-size: 1.4rem; }
.footer__line { position: relative; margin-top: .4rem; font-style: italic; color: var(--brown); }
html[lang="hi"] .footer__line { font-style: normal; }

/* mandala (SVG injected by JS) */
.mandala svg { width: 100%; height: 100%; display: block; }
.mandala path, .mandala circle { fill: none; stroke: var(--gold); stroke-width: .5; }

/* =========================================================
   FIXED CONTROLS
   ========================================================= */
.lang, .music {
  position: fixed; z-index: 60; bottom: calc(14px + var(--safe-b));
  background: rgba(251, 244, 230, .86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(164, 123, 46, .55);
  box-shadow: 0 6px 18px rgba(58, 34, 23, .18);
}
.lang { left: 14px; display: flex; align-items: center; border-radius: 999px; padding: 3px; }
.lang__btn {
  min-width: 44px; min-height: 40px; padding: 0 .8rem; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--brown); font-size: .95rem;
  transition: background-color .3s, color .3s;
}
.lang__btn[data-lang="en"] { font-family: "Cinzel", serif; letter-spacing: .08em; font-size: .85rem; }
.lang__btn[data-lang="hi"] { font-family: "Noto Serif Devanagari", serif; }
.lang__btn[aria-pressed="true"] { background: var(--maroon); color: var(--champagne); }
.lang__sep { width: 1px; height: 18px; background: rgba(164, 123, 46, .5); margin: 0 2px; }

.music {
  right: 14px; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--maroon); padding: 0;
}
.music__bars { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.music__bars i { width: 3px; height: 100%; background: var(--maroon); border-radius: 2px; transform-origin: bottom; animation: bar 1.1s ease-in-out infinite; }
.music__bars i:nth-child(2) { animation-delay: -.3s; }
.music__bars i:nth-child(3) { animation-delay: -.6s; }
.music__bars i:nth-child(4) { animation-delay: -.9s; }
.music__off { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.music.is-playing .music__bars { display: flex; }
.music.is-playing .music__off { display: none; }
@keyframes bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(45, 14, 18, .94);
  display: grid; place-items: center; padding: calc(4rem + var(--safe-t)) 1rem calc(2rem + var(--safe-b));
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox__close {
  position: absolute; top: calc(14px + var(--safe-t)); right: 14px;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--gold-soft); background: transparent; color: var(--champagne);
  display: grid; place-items: center;
}
.lightbox__close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* =========================================================
   TABLET / DESKTOP RECOMPOSITION
   ========================================================= */
@media (min-width: 768px) {
  body { font-size: 1.2rem; }
  .hero { padding-top: 5rem; }
  .hero__floral { display: block; }
  .hero__floral--r { right: max(-2vw, calc(50% - 680px)); bottom: -4%; width: clamp(240px, 26vw, 380px); }
  .hero__details { flex-direction: row; gap: 1.4rem; margin-top: 1rem; }
  .hero__venue br { display: none; }
  .hero__venue span:last-child::before { content: ", "; }

  .frame-wrap { width: min(70vw, 480px); }
  .guest { padding: 5rem 0 3rem; }

  .couple { padding-top: 6rem; }
  .couple__grid {
    grid-template-columns: 1fr minmax(0, 440px) 1fr;
    grid-template-areas: "groom frame bride";
    align-items: center; gap: 3rem; max-width: 1200px; margin-inline: auto;
  }
  .couple__frame { width: 100%; }
  .couple__first { font-size: clamp(3rem, 5.5vw, 4.8rem); }
  .couple__person--groom { text-align: right; }
  .couple__person--bride { text-align: left; }
  .couple__person--groom .couple__family { margin-right: 0; }
  .couple__person--bride .couple__family { margin-left: 0; }

  .reveal { padding-top: 10rem; }
  .countdown { padding: 8rem 2rem 5rem; }
  .countdown__shehnai { display: block; }
  .countdown__shehnai--l { left: max(2vw, calc(50% - 620px)); transform: rotate(-8deg); }
  .countdown__shehnai--r { right: max(2vw, calc(50% - 620px)); transform: rotate(8deg); }

  .venue { padding: 9rem 2rem 13rem; min-height: 90vh; display: flex; align-items: center; justify-content: center; }
  .venue__corner--top { width: clamp(260px, 30vw, 420px); }
  .venue__corner--bottom { width: clamp(300px, 34vw, 500px); }


  .gallery__elephant { display: block; }
  .slider__stage { height: min(62vh, 620px); }
  .slide { margin-left: calc(min(62vh, 620px) * -0.3333); }
}

@media (min-width: 1200px) {
  .hero__peacock { display: block; left: max(1vw, calc(50% - 40vw)); bottom: 5%; width: clamp(180px, 18vw, 280px); }
}

@media (min-width: 1280px) {
  .hero__wrap { width: min(40vw, 66svh, 580px); }
  .section-title { font-size: 3.4rem; }
}

/* short landscape phones */
@media (max-height: 560px) and (orientation: landscape) {
  .gate__content { padding-top: calc(4vh + var(--safe-t)); }
  .gate__names { flex-direction: row; gap: .5em; flex-wrap: wrap; justify-content: center; }
  .gate__name { font-size: 2.2rem; }
  .door__peacock { width: 24vh; }
  .seal { margin-top: 1rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  .seal__ring, .scroll-cue__line, .music__bars i { animation: none !important; }
}

[hidden] { display: none !important; }