@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&family=Great+Vibes&display=swap');

/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  --ivory:        #fdf8f0;
  --ivory-warm:   #f7f0e2;
  --cream:        #efe5cf;
  --cream-deep:   #e2d3b8;
  --maroon:       #4a0e1f;
  --maroon-mid:   #6b1a2e;
  --maroon-soft:  #8a3448;
  --gold:         #c9973a;
  --gold-light:   #e2bc6e;
  --gold-pale:    #f0d898;
  --blush:        #eed8d4;
  --ink:          #28100e;
  --muted:        #6b4a52;

  --serif:  'Cormorant Garamond', Baskerville, 'Palatino Linotype', Georgia, serif;
  --script: 'Great Vibes', cursive;
  --sans:   'Montserrat', 'Inter', ui-sans-serif, system-ui, sans-serif;

  --shadow-sm: 0 4px 18px rgba(74,14,31,.07);
  --shadow-md: 0 14px 50px rgba(74,14,31,.13);
  --shadow-lg: 0 28px 90px rgba(74,14,31,.19);
  --ease:      cubic-bezier(.22,.61,.36,1);
  --header-h:  5rem;
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ivory); -webkit-text-size-adjust:100%; }
body {
  min-width:320px; margin:0;
  color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.7;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(201,151,58,.06), transparent),
    var(--ivory);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.menu-open { overflow:hidden; }
img,svg { display:block; max-width:100%; }
img { height:auto; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
p,h1,h2,h3,figure,dl,dd { margin:0; }
address { font-style:normal; }
::selection { color:var(--ivory); background:var(--maroon); }
:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
[hidden] { display:none !important; }

/* ═══════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════ */
.svg-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:1.1em; height:1.1em; flex:0 0 auto; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.skip-link {
  position:fixed; z-index:1000; top:.75rem; left:.75rem;
  padding:.7rem 1rem; color:var(--ivory); background:var(--maroon);
  border-radius:2px; transform:translateY(-200%); transition:transform 200ms;
}
.skip-link:focus { transform:translateY(0); }
.header-inner,.section-inner,.countdown-inner {
  width:min(1160px,calc(100% - 3rem)); margin-inline:auto;
}

/* ═══════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
@keyframes float {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%      { transform:translateY(-10px) rotate(1deg); }
}
@keyframes scroll-line {
  0%,100% { transform:scaleY(.3); opacity:.35; }
  50%      { transform:scaleY(1); opacity:1; }
}
@keyframes spin-slow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* ═══════════════════════════════════════════
   GOLD RULE
═══════════════════════════════════════════ */
.gold-rule {
  display:flex; align-items:center; justify-content:center;
  gap:.7rem; margin:1.9rem auto; color:var(--gold);
}
.gold-rule span {
  height:1px; flex:1; max-width:5rem;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.gold-rule-left { justify-content:flex-start; margin-inline:0; }
.gold-rule-left span { max-width:3.5rem; }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.site-header {
  position:sticky; z-index:100; top:0;
  min-height:var(--header-h);
  background:rgba(253,248,240,.9);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}
.site-header.is-scrolled {
  border-color:rgba(201,151,58,.2);
  box-shadow:0 2px 30px rgba(74,14,31,.07);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-h); gap:1rem;
}
.brand { display:inline-flex; align-items:center; gap:.6rem; color:var(--maroon); }
.brand-mark { width:3rem; height:3rem; flex-shrink:0; }
.brand-mark svg { width:100%; height:100%; }
.brand-copy {
  font-family:var(--serif); font-size:1.15rem; font-weight:500;
  letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Nav */
.primary-navigation {
  display:flex; align-items:center;
  gap:clamp(.7rem,2vw,1.7rem);
}
.primary-navigation a {
  position:relative; display:inline-flex; align-items:center;
  min-height:44px; color:var(--maroon-soft);
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.primary-navigation > a:not(.nav-rsvp)::after {
  content:''; position:absolute; bottom:8px; left:0; right:0;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform 280ms var(--ease);
}
.primary-navigation > a:not(.nav-rsvp):hover::after {
  transform:scaleX(1); transform-origin:left;
}
.nav-rsvp {
  padding:0 1rem !important; min-height:2.4rem !important;
  color:var(--ivory) !important; background:var(--maroon);
  border:1px solid var(--maroon); border-radius:1px;
  transition:background 200ms, color 200ms;
}
.nav-rsvp:hover { color:var(--maroon) !important; background:transparent; }
.menu-toggle {
  display:none; width:2.7rem; height:2.7rem; place-items:center;
  padding:0; color:var(--maroon); background:transparent;
  border:1px solid rgba(74,14,31,.22); border-radius:50%;
}
.menu-toggle .icon { width:1.3rem; height:1.3rem; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero,.section,.countdown-section,.site-footer {
  scroll-margin-top:calc(var(--header-h) + .5rem);
}
.hero {
  position:relative;
  display:grid; place-items:center;
  min-height:max(700px,calc(100svh - var(--header-h)));
  padding:clamp(3rem,6vw,5rem) 1.5rem clamp(4rem,8vw,6rem);
  overflow:hidden; isolation:isolate;
  background:
    radial-gradient(ellipse 100% 55% at 50% 0%, rgba(201,151,58,.09),transparent 55%),
    radial-gradient(ellipse 55% 45% at 10% 85%, rgba(238,216,212,.6),transparent 50%),
    radial-gradient(ellipse 40% 35% at 90% 18%, rgba(226,188,110,.2),transparent 45%),
    linear-gradient(170deg,#f5edd8 0%,#fdf8f0 55%,#ecdfc8 100%);
}
/* Dot texture */
.hero::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(201,151,58,.14) .9px,transparent .9px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 80% 65% at 50% 42%,black 25%,transparent 70%);
  pointer-events:none;
}

/* Corner florals */
.hero-floral {
  position:absolute; z-index:0;
  width:clamp(140px,22vw,260px);
  height:clamp(140px,22vw,260px);
  pointer-events:none;
  animation:float 7s ease-in-out infinite;
}
.hero-floral-tl { top:0; left:0; animation-delay:0s; }
.hero-floral-tr { top:0; right:0; transform:scaleX(-1); animation-delay:1.5s; }
.hero-floral-bl { bottom:0; left:0; transform:scaleY(-1); animation-delay:3s; }
.hero-floral-br { bottom:0; right:0; transform:scale(-1); animation-delay:4.5s; }
.hero-floral svg { width:100%; height:100%; }

/* Hero invitation frame */
.hero-frame {
  position:relative; z-index:1;
  width:min(100%,880px);
  padding:0 clamp(1.5rem,9vw,7rem) clamp(3rem,6vw,5rem);
  text-align:center;
  border:1px solid rgba(201,151,58,.6);
  background:rgba(253,248,240,.6);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-lg);
}

.frame-border-top,.frame-border-bottom {
  width:calc(100% + 2px); margin-inline:-1px;
  overflow:hidden;
}
.frame-border-top { margin-bottom:clamp(1.5rem,4vw,2.8rem); }
.frame-border-bottom { margin-top:clamp(1.5rem,4vw,2.8rem); }
.frame-border-top svg,.frame-border-bottom svg { width:100%; height:auto; }

.hero-content { position:relative; z-index:1; }

.eyebrow,.section-kicker {
  display:block; margin-bottom:.9rem;
  color:var(--gold); font-family:var(--sans);
  font-size:.58rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
}
.hero-family {
  margin-bottom:.4rem; color:var(--muted);
  font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.35rem);
  font-style:italic; font-weight:300;
}

/* Script names */
.hero-names {
  display:flex; align-items:baseline; justify-content:center;
  flex-wrap:wrap; gap:.1em .15em;
  line-height:1; margin:0;
}
.name-nishu,.name-udita {
  font-family:var(--script);
  font-size:clamp(3.8rem,13vw,8.5rem);
  font-weight:400;
  background:linear-gradient(135deg,var(--maroon) 15%,var(--maroon-mid) 40%,var(--gold) 55%,var(--maroon-mid) 72%,var(--maroon) 88%);
  background-size:260% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 7s linear infinite;
}
.name-udita { animation-delay:-3.5s; }
.name-amp {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.4rem,4vw,2.8rem); font-weight:300;
  color:var(--gold); -webkit-text-fill-color:var(--gold);
  align-self:center; margin-inline:.08em;
  animation:none;
}

.hero-divider { margin:1.4rem auto 1.6rem; }
.hero-divider svg { width:min(100%,340px); height:auto; }

.hero-date {
  color:var(--maroon); font-family:var(--serif);
  font-size:clamp(1.1rem,2.4vw,1.45rem); font-weight:500; letter-spacing:.04em;
}
.hero-place {
  margin-top:.35rem; color:var(--muted);
  font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.hero-actions {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:.8rem 1.6rem; margin-top:2.2rem;
}

/* Scroll cue */
.scroll-cue {
  position:absolute; bottom:1.2rem; left:50%;
  transform:translateX(-50%);
  display:inline-flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--muted); font-size:.55rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue i {
  width:1px; height:2.2rem;
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:scroll-line 2.5s var(--ease) infinite;
  transform-origin:top;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.button {
  display:inline-flex; min-height:3rem; align-items:center;
  justify-content:center; gap:.6rem; padding:.7rem 1.8rem;
  font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.18em; line-height:1.2; text-transform:uppercase;
  border:1px solid transparent; border-radius:1px;
  transition:color 220ms var(--ease),background 220ms var(--ease),
             border-color 220ms var(--ease),transform 220ms var(--ease),
             box-shadow 220ms var(--ease);
}
.button .icon,.text-link .icon,.event-map .icon,.footer-bottom .icon {
  width:.9rem; height:.9rem; transition:transform 200ms var(--ease);
}
.button:hover .icon,.text-link:hover .icon,
.event-map:hover .icon,.footer-bottom a:hover .icon { transform:translateX(3px); }

.button-primary {
  color:var(--ivory); background:var(--maroon); border-color:var(--maroon);
  box-shadow:0 4px 22px rgba(74,14,31,.28);
}
.button-primary:hover {
  background:var(--maroon-mid); border-color:var(--maroon-mid);
  transform:translateY(-2px); box-shadow:0 10px 30px rgba(74,14,31,.36);
}
.button-text {
  min-height:2.6rem; padding-inline:0; color:var(--maroon);
  letter-spacing:.12em; border-bottom:1px solid rgba(74,14,31,.28); border-radius:0;
}
.button-text:hover { border-bottom-color:var(--maroon); }
.button-outline-light {
  margin-top:1.9rem; color:var(--ivory);
  border-color:rgba(226,188,110,.6);
}
.button-outline-light:hover {
  color:var(--maroon); background:var(--gold-light);
  border-color:var(--gold-light); transform:translateY(-2px);
}
.text-link {
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.8rem;
  color:var(--maroon); font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid rgba(74,14,31,.22);
  transition:border-color 200ms;
}
.text-link:hover { border-bottom-color:var(--maroon); }

/* ═══════════════════════════════════════════
   COUNTDOWN
═══════════════════════════════════════════ */
.countdown-section {
  position:relative; overflow:hidden; color:var(--ivory);
  background:
    radial-gradient(ellipse 55% 70% at 0% 50%, rgba(201,151,58,.16),transparent 55%),
    radial-gradient(ellipse 40% 55% at 100% 5%, rgba(238,216,212,.07),transparent 50%),
    var(--maroon);
}
.countdown-section::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(201,151,58,.05) 1px,transparent 1px);
  background-size:30px 30px; pointer-events:none;
}
.countdown-inner {
  position:relative; display:grid;
  gap:2.2rem; padding-block:clamp(3rem,7vw,5.2rem);
}
.section-kicker-light { color:var(--gold-light); }
.countdown-intro .section-kicker { margin-bottom:.6rem; }
.countdown-intro h2 {
  max-width:14ch; color:var(--ivory); font-family:var(--serif);
  font-size:clamp(2rem,4.5vw,3.2rem); font-weight:300; line-height:1.0;
}
.countdown {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(226,188,110,.25);
}
.countdown-unit { display:grid; place-items:center; padding:1.6rem .5rem; text-align:center; }
.countdown-unit + .countdown-unit { border-left:1px solid rgba(226,188,110,.18); }
.countdown-unit span {
  display:block; font-family:var(--serif);
  font-size:clamp(2.5rem,8vw,4.5rem); font-weight:300;
  font-variant-numeric:tabular-nums; line-height:1;
  background:linear-gradient(135deg,#fff 25%,var(--gold-pale) 55%,#fff 80%);
  background-size:260% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; animation:shimmer 4s linear infinite;
}
.countdown-unit:nth-child(2) span { animation-delay:-.8s; }
.countdown-unit:nth-child(3) span { animation-delay:-1.6s; }
.countdown-unit:nth-child(4) span { animation-delay:-2.4s; }
.countdown-unit small {
  margin-top:.45rem; color:var(--gold-light);
  font-size:.5rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.countdown-message {
  min-height:1.4em; margin-top:-1rem; color:var(--gold-light);
  font-family:var(--serif); font-size:1.05rem; font-style:italic; font-weight:300;
}

/* ═══════════════════════════════════════════
   SECTION BASE
═══════════════════════════════════════════ */
.section { position:relative; padding-block:clamp(5rem,10vw,9rem); }
.section h2 {
  color:var(--maroon); font-family:var(--serif);
  font-size:clamp(2.7rem,5.5vw,4.8rem);
  font-weight:300; letter-spacing:-.02em; line-height:.92;
}

/* ═══════════════════════════════════════════
   WELCOME
═══════════════════════════════════════════ */
.welcome {
  padding-top:clamp(5rem,11vw,10rem);
  background:linear-gradient(175deg,var(--ivory) 0%,var(--cream) 100%);
}
.welcome-card {
  position:relative; max-width:920px;
  border:1px solid rgba(201,151,58,.35);
  background:rgba(253,248,240,.92);
  box-shadow:var(--shadow-md); overflow:hidden;
}
.welcome-mandala-top,.welcome-mandala-bottom { width:100%; overflow:hidden; line-height:0; }
.welcome-mandala-top  { margin-bottom:0; }
.welcome-mandala-bottom { margin-top:0; }
.welcome-mandala-top svg,.welcome-mandala-bottom svg { width:100%; height:auto; }

.welcome-body {
  padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,8vw,7rem);
  text-align:center;
}
.welcome-monogram {
  width:5.5rem; height:5.5rem; margin:0 auto 1.6rem;
}
.welcome-monogram svg { width:100%; height:100%; }
.welcome-card h2 { max-width:18ch; margin-inline:auto; }
.welcome-copy {
  max-width:55ch; margin:0 auto; color:var(--muted);
  font-family:var(--serif); font-size:clamp(1.15rem,2.4vw,1.42rem);
  font-weight:300; line-height:1.7;
}
.welcome-signoff {
  margin-top:1.6rem; color:var(--maroon);
  font-family:var(--script); font-size:clamp(1.8rem,4vw,2.5rem); font-weight:400;
}
.welcome-signoff strong { font-weight:400; }

/* ═══════════════════════════════════════════
   STORY
═══════════════════════════════════════════ */
.story { overflow:hidden; background:var(--ivory); }
.story-layout { display:grid; align-items:center; gap:clamp(3.5rem,9vw,9rem); }
.story-photos {
  position:relative; width:min(100%,34rem);
  min-height:30rem; margin-inline:auto;
}
.story-photos::before {
  content:''; position:absolute; top:6%; right:6%; bottom:3%; left:8%;
  border:1px solid rgba(201,151,58,.28); transform:rotate(-4.5deg);
}
.story-photo {
  position:absolute; overflow:hidden; margin:0;
  border:.5rem solid var(--ivory); background:var(--cream-deep);
  box-shadow:var(--shadow-lg);
}
.story-photo::after {
  content:''; position:absolute; inset:.4rem;
  border:1px solid rgba(253,248,240,.6); pointer-events:none;
}
.story-photo img { width:100%; height:100%; object-fit:cover; }
.story-photo-udita {
  top:0; left:0; width:60%; height:68%;
  border-radius:7rem 7rem .5rem .5rem; transform:rotate(-2.5deg);
}
.story-photo-udita img { object-position:50% 30%; }
.story-photo-nishu {
  right:0; bottom:0; width:58%; height:60%;
  border-radius:.5rem .5rem 6.5rem 6.5rem; transform:rotate(2.8deg);
}
.story-photo-nishu img { object-position:54% 20%; }
.photo-sparkle { position:absolute; z-index:2; line-height:1; }
.photo-sparkle-one { top:12%; right:2%; }
.photo-sparkle-two { bottom:10%; left:2%; }

.story-copy h2 { max-width:13ch; }
.story-copy > p:not(.section-kicker) {
  max-width:52ch; color:var(--muted);
  font-family:var(--serif); font-size:1.05rem; font-weight:300; line-height:1.8;
}
.story-copy > p + p { margin-top:1.1rem; }

/* ═══════════════════════════════════════════
   EVENTS
═══════════════════════════════════════════ */
.events {
  background:
    radial-gradient(ellipse 65% 50% at 95% 10%,rgba(238,216,212,.5),transparent 55%),
    var(--cream);
}
.section-ornament { margin-bottom:2.5rem; }
.section-ornament svg { width:min(100%,500px); height:auto; margin:0 auto; }
.section-heading { max-width:44rem; margin-bottom:clamp(2.5rem,5.5vw,4.5rem); }
.section-heading h2 { max-width:14ch; }
.section-heading > p:last-child {
  max-width:50ch; margin-top:1rem; color:var(--muted);
  font-family:var(--serif); font-size:1.05rem; font-weight:300;
}

.events-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));
  gap:1rem;
}
.event-card {
  display:flex; flex-direction:column; min-height:21rem; padding:1.6rem;
  border:1px solid rgba(201,151,58,.26);
  background:rgba(253,248,240,.88);
  box-shadow:0 4px 18px rgba(74,14,31,.04);
  transition:transform 320ms var(--ease),box-shadow 320ms var(--ease),border-color 320ms var(--ease);
}
.event-card:hover {
  border-color:rgba(201,151,58,.58); box-shadow:var(--shadow-md); transform:translateY(-7px);
}
.event-topline {
  display:flex; align-items:flex-start; justify-content:space-between; color:var(--gold);
}
.event-topline > span { font-size:.56rem; font-weight:700; letter-spacing:.18em; }
.event-icon { width:2.7rem; height:2.7rem; }
.event-card h3 {
  margin-top:1.4rem; color:var(--maroon);
  font-family:var(--serif); font-size:2rem; font-weight:300; line-height:.92;
}
.event-date {
  min-height:2.8em; margin-top:.8rem; color:var(--maroon-soft);
  font-size:.66rem; font-weight:600; letter-spacing:.04em; line-height:1.5;
}
.event-details {
  display:grid; gap:.7rem; margin-top:1.1rem;
  padding-top:1.1rem; border-top:1px solid rgba(201,151,58,.18);
}
.event-details dt { color:var(--gold); font-size:.52rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.event-details dd { margin-top:.1rem; color:var(--muted); font-family:var(--serif); font-size:.95rem; font-weight:300; }
.event-map {
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:auto; padding-top:1.5rem;
  color:var(--maroon); font-size:.58rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
/* ── Event card colour themes ── */

/* ═══════════════════════════════════════════
   EVENT CARD COLOUR THEMES — PREMIUM
═══════════════════════════════════════════ */

/* ── Mehendi — deep botanical green, like henna garden at dusk ── */
.event-card-mehendi {
  color: var(--ivory);
  border: none;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 110% -10%, rgba(180,230,140,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at -20% 110%, rgba(60,120,50,0.35) 0%, transparent 55%),
    linear-gradient(145deg, #0d2e14 0%, #1c4a22 40%, #142e18 70%, #0a2010 100%);
  box-shadow:
    0 2px 0 rgba(120,200,80,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 25px 60px rgba(10,32,16,0.55),
    0 8px 20px rgba(10,32,16,0.3);
}
.event-card-mehendi::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 20%, rgba(160,220,100,0.08) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(100,180,80,0.06)' stroke-width='0.5'%3E%3Ccircle cx='30' cy='30' r='25'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 60px 60px;
  pointer-events: none;
}
.event-card-mehendi .event-topline { color: #a8e87a; }
.event-card-mehendi .event-details dt { color: #a8e87a; }
.event-card-mehendi h3 { color: #eef8e8; font-style: italic; }
.event-card-mehendi .event-date { color: rgba(220,245,200,0.82); }
.event-card-mehendi .event-details { border-color: rgba(140,220,90,0.2); }
.event-card-mehendi .event-details dd { color: rgba(220,245,200,0.72); }
.event-card-mehendi .event-map { color: #c8f0a0; }
.event-card-mehendi:hover { transform: translateY(-8px); box-shadow: 0 35px 80px rgba(10,32,16,0.65), 0 10px 25px rgba(10,32,16,0.35); }

/* ── Haldi — warm saffron sunrise, like turmeric and marigold ── */
.event-card-haldi {
  color: var(--ivory);
  border: none;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 70% at 110% -15%, rgba(255,220,80,0.22) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at -15% 115%, rgba(200,80,10,0.3) 0%, transparent 55%),
    linear-gradient(145deg, #6b2800 0%, #9e3e00 35%, #7a3200 65%, #4a1a00 100%);
  box-shadow:
    0 2px 0 rgba(255,200,60,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 25px 60px rgba(80,30,0,0.55),
    0 8px 20px rgba(80,30,0,0.3);
}
.event-card-haldi::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 15%, rgba(255,200,50,0.1) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(255,180,40,0.05)' stroke-width='0.6'%3E%3Ccircle cx='40' cy='40' r='35'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cline x1='40' y1='5' x2='40' y2='75'/%3E%3Cline x1='5' y1='40' x2='75' y2='40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 80px 80px;
  pointer-events: none;
}
.event-card-haldi .event-topline { color: #ffd060; }
.event-card-haldi .event-details dt { color: #ffd060; }
.event-card-haldi h3 { color: #fff5d6; font-style: italic; }
.event-card-haldi .event-date { color: rgba(255,235,180,0.85); }
.event-card-haldi .event-details { border-color: rgba(255,200,60,0.22); }
.event-card-haldi .event-details dd { color: rgba(255,235,180,0.72); }
.event-card-haldi .event-map { color: #ffe090; }
.event-card-haldi:hover { transform: translateY(-8px); box-shadow: 0 35px 80px rgba(80,30,0,0.65), 0 10px 25px rgba(80,30,0,0.35); }

/* ── Sangeet — deep royal night, like a midnight celebration sky ── */
.event-card-sangeet {
  color: var(--ivory);
  border: none;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 70% at 110% -10%, rgba(200,140,255,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at -15% 110%, rgba(80,10,120,0.4) 0%, transparent 55%),
    linear-gradient(145deg, #1a0530 0%, #2e0a50 38%, #1e0638 68%, #120320 100%);
  box-shadow:
    0 2px 0 rgba(180,120,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 25px 60px rgba(20,5,40,0.6),
    0 8px 20px rgba(20,5,40,0.35);
}
.event-card-sangeet::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 18%, rgba(180,100,255,0.1) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgba(180,120,255,0.05)' %3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='35' cy='8' r='1.2'/%3E%3Ccircle cx='60' cy='12' r='0.8'/%3E%3Ccircle cx='20' cy='35' r='1'/%3E%3Ccircle cx='55' cy='40' r='1.2'/%3E%3Ccircle cx='8' cy='60' r='0.9'/%3E%3Ccircle cx='45' cy='62' r='1'/%3E%3Ccircle cx='62' cy='55' r='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 70px 70px;
  pointer-events: none;
}
.event-card-sangeet .event-topline { color: #c896ff; }
.event-card-sangeet .event-details dt { color: #c896ff; }
.event-card-sangeet h3 { color: #f2e8ff; font-style: italic; }
.event-card-sangeet .event-date { color: rgba(230,210,255,0.85); }
.event-card-sangeet .event-details { border-color: rgba(180,120,255,0.22); }
.event-card-sangeet .event-details dd { color: rgba(230,210,255,0.72); }
.event-card-sangeet .event-map { color: #d8b0ff; }
.event-card-sangeet:hover { transform: translateY(-8px); box-shadow: 0 35px 80px rgba(20,5,40,0.7), 0 10px 25px rgba(20,5,40,0.4); }

/* Wedding Ceremony — deep maroon featured */
.event-card-featured {
  color: var(--ivory);
  border: none;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 70% at 110% -10%, rgba(226,188,110,0.22) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at -15% 115%, rgba(100,10,30,0.4) 0%, transparent 55%),
    linear-gradient(145deg, #2e0510 0%, #4a0e1f 38%, #380a18 68%, #1e0208 100%);
  box-shadow:
    0 2px 0 rgba(201,151,58,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 25px 60px rgba(30,5,10,0.6),
    0 8px 20px rgba(30,5,10,0.35);
}
.event-card-featured .event-topline,
.event-card-featured .event-details dt { color:var(--gold-light); }
.event-card-featured h3,
.event-card-featured .event-map { color:var(--ivory); }
.event-card-featured h3 { font-style: italic; }
.event-card-featured .event-date { color:rgba(253,248,240,.85); }
.event-card-featured .event-details { border-color:rgba(226,188,110,.25); }
.event-card-featured .event-details dd { color:rgba(253,248,240,.72); }
.event-card-featured:hover { transform: translateY(-8px); box-shadow: 0 35px 80px rgba(30,5,10,0.7), 0 10px 25px rgba(30,5,10,0.4); }

/* ═══════════════════════════════════════════
   GALLERY
═══════════════════════════════════════════ */
.gallery { background:var(--ivory); }
.section-heading-split { display:grid; align-items:end; gap:1.2rem; margin-bottom:clamp(2rem,5vw,3.5rem); }
.section-heading-split > p {
  max-width:30ch; margin-bottom:0; color:var(--muted);
  font-family:var(--serif); font-size:1.05rem; font-weight:300;
}
.gallery-grid {
  display:grid; grid-auto-rows:8.5rem;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem;
}
.gallery-card { position:relative; overflow:hidden; min-width:0; margin:0; }
.gallery-photo { grid-row:span 2; background:var(--cream-deep); }
.gallery-photo img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 800ms var(--ease);
}
.gallery-photo:hover img { transform:scale(1.06); }
.gallery-photo-udita img { object-position:47% 28%; }
.gallery-photo-nishu img { object-position:52% 28%; }
.gallery-photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(28,6,12,.55),transparent 50%); pointer-events:none;
}
.gallery-photo figcaption {
  position:absolute; z-index:1; right:.9rem; bottom:.7rem; left:.9rem;
  color:var(--ivory); font-family:var(--script); font-size:1.35rem; font-weight:400;
}
.gallery-note {
  display:flex; grid-row:span 2; flex-direction:column; justify-content:center;
  padding:1.3rem; color:var(--maroon); background:var(--blush);
  border:1px solid rgba(201,151,58,.22);
}
.gallery-note-icon { width:2.2rem; height:2.2rem; margin-bottom:.7rem; }
.gallery-note p {
  font-family:var(--script); font-size:clamp(1.2rem,4vw,1.6rem); line-height:1.2;
}
.gallery-note > span { margin-top:.8rem; color:var(--gold); font-family:var(--serif); font-size:.9rem; letter-spacing:.06em; }
.gallery-date {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  grid-row:span 1; color:var(--ivory); text-align:center; background:var(--maroon);
}
.gallery-date p { font-family:var(--serif); font-size:2.5rem; font-weight:300; line-height:.85; }
.gallery-date span { margin-top:.3rem; color:var(--gold-light); font-size:.5rem; font-weight:700; letter-spacing:.2em; line-height:1.4; text-transform:uppercase; }

/* ═══════════════════════════════════════════
   VENUE
═══════════════════════════════════════════ */
.venue {
  overflow:hidden; color:var(--ivory);
  background:
    radial-gradient(ellipse 55% 65% at 5% 80%,rgba(201,151,58,.17),transparent 52%),
    radial-gradient(ellipse 40% 50% at 92% 10%,rgba(238,216,212,.08),transparent 50%),
    var(--maroon);
}
.venue-layout { display:grid; align-items:center; gap:clamp(3rem,8vw,7.5rem); }
.venue h2 { color:var(--ivory); max-width:10ch; }
.venue-lead {
  max-width:38ch; margin-top:1.4rem;
  color:rgba(253,248,240,.75); font-family:var(--serif);
  font-size:clamp(1.1rem,2.3vw,1.35rem); font-weight:300; line-height:1.55;
}
.venue address {
  display:flex; align-items:flex-start; gap:.75rem; margin-top:1.7rem;
  color:var(--gold-light); font-family:var(--serif); font-size:.95rem; font-weight:300; line-height:1.65;
}
.venue address .icon { width:1.3rem; height:1.3rem; margin-top:.2rem; color:var(--gold-light); }

.map-card {
  position:relative; min-height:22rem; overflow:hidden; padding:1.4rem;
  border:1px solid rgba(226,188,110,.45);
  background:linear-gradient(130deg,rgba(238,216,212,.65),rgba(253,248,240,.92)),var(--cream);
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.map-card::after {
  content:''; position:absolute; inset:.65rem;
  border:1px solid rgba(201,151,58,.24); pointer-events:none;
}
.map-mandala {
  position:absolute; inset:0; z-index:0; display:grid; place-items:center;
}
.map-mandala svg { width:80%; height:80%; }
.map-card-label {
  position:relative; z-index:2; display:inline-block; padding:.25rem .5rem;
  color:var(--maroon); font-size:.52rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(253,248,240,.9);
}
.map-path { position:absolute; z-index:1; border:1px solid rgba(74,14,31,.22); border-radius:50%; }
.map-path-one { width:17rem; height:8.5rem; top:45%; left:-10%; transform:rotate(-18deg); }
.map-path-two { width:16rem; height:11rem; right:-16%; bottom:-18%; transform:rotate(44deg); }
.map-marker {
  position:absolute; z-index:3; top:32%; left:48%;
  display:grid; width:3.5rem; height:3.5rem; place-items:center;
  color:var(--ivory); background:var(--maroon);
  border:4px solid rgba(253,248,240,.9); border-radius:50%;
  box-shadow:0 6px 22px rgba(74,14,31,.32);
}
.map-marker svg { width:1.6rem; height:1.6rem; }
.map-name {
  position:absolute; z-index:2; top:60%; left:49%;
  transform:translateX(-50%); color:var(--maroon);
  font-family:var(--script); font-size:clamp(1.9rem,6vw,3rem);
  line-height:.9; text-align:center;
}
.map-name em { color:var(--gold); font-weight:400; }
.map-card > p {
  position:absolute; z-index:2; right:1.4rem; bottom:1.4rem; left:1.4rem;
  color:var(--muted); font-size:.62rem; font-weight:600; letter-spacing:.06em; text-align:center;
}

/* ═══════════════════════════════════════════
   RSVP
═══════════════════════════════════════════ */
.rsvp {
  background:
    radial-gradient(ellipse 60% 50% at 100% 100%,rgba(238,216,212,.5),transparent 55%),
    var(--cream);
}
.rsvp-layout { display:grid; align-items:start; gap:clamp(2.5rem,8vw,7rem); }
.rsvp-intro h2 { max-width:10ch; }
.rsvp-intro > p:not(.section-kicker) {
  max-width:40ch; color:var(--muted);
  font-family:var(--serif); font-size:1.05rem; font-weight:300; line-height:1.75;
}

.rsvp-panel {
  padding:clamp(1.5rem,4.5vw,3rem);
  background:var(--ivory); border:1px solid rgba(201,151,58,.28);
  box-shadow:var(--shadow-md);
}
.rsvp-ornament { margin-bottom:1.8rem; }
.rsvp-ornament svg { width:100%; height:auto; }

.rsvp-form { display:grid; gap:1.1rem; }
.form-grid { display:grid; gap:1.1rem; }
.form-field,.attendance-field { min-width:0; padding:0; border:0; }
.form-field label,.attendance-field legend {
  display:block; margin-bottom:.45rem; color:var(--maroon);
  font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.form-field label > span:not(.optional),.attendance-field legend > span { color:var(--gold); }
.optional { margin-left:.3rem; color:var(--muted); font-size:.52rem; font-weight:600; letter-spacing:.04em; text-transform:none; }
.form-field input,.form-field textarea {
  width:100%; color:var(--ink); background:#fdfaf5;
  border:1px solid rgba(74,14,31,.16); border-radius:0; outline:none;
  transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease);
}
.form-field input { min-height:3rem; padding:.65rem .85rem; }
.form-field textarea { min-height:7rem; padding:.8rem; resize:vertical; }
.form-field input:focus,.form-field textarea:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,151,58,.12);
}
.form-field input::placeholder,.form-field textarea::placeholder { color:#a8888e; }

.attendance-options { display:grid; grid-template-columns:1fr; gap:.6rem; }
.attendance-option { position:relative; min-width:0; }
.attendance-option input { position:absolute; opacity:0; }
.attendance-option span {
  display:flex; min-height:3rem; align-items:center;
  padding:.6rem .85rem .6rem 2.5rem; color:var(--muted);
  font-size:.72rem; font-weight:500;
  border:1px solid rgba(74,14,31,.16); background:#fdfaf5;
  transition:color 180ms,background 180ms,border-color 180ms;
}
.attendance-option span::before {
  content:''; position:absolute; left:.85rem;
  width:.85rem; height:.85rem; border:1px solid var(--gold); border-radius:50%;
}
.attendance-option input:checked + span {
  color:var(--maroon); background:rgba(238,216,212,.35); border-color:var(--gold);
}
.attendance-option input:checked + span::before {
  background:var(--maroon); box-shadow:inset 0 0 0 .22rem #fdfaf5;
}
.attendance-option input:focus-visible + span { outline:2px solid var(--gold); outline-offset:2px; }
.button-submit { width:100%; margin-top:.5rem; }

.rsvp-success { padding:clamp(1.5rem,6vw,3.5rem) .5rem; text-align:center; }
.success-mark {
  display:grid; width:4.5rem; height:4.5rem;
  margin:0 auto 1.3rem; place-items:center;
  color:var(--maroon); border:1px solid var(--gold); border-radius:50%;
}
.success-mark svg { width:2.5rem; height:2.5rem; }
.rsvp-success h3 { color:var(--maroon); font-family:var(--serif); font-size:2.3rem; font-weight:300; line-height:1; }
.rsvp-success p { max-width:32ch; margin:.9rem auto 0; color:var(--muted); font-size:.9rem; }
.text-link-button { padding:0; background:transparent; border-top:0; border-right:0; border-left:0; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-footer {
  color:var(--ivory);
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%,rgba(201,151,58,.1),transparent 60%),
    #1c0610;
}
.footer-ornament { overflow:hidden; line-height:0; }
.footer-ornament svg { width:100%; height:auto; display:block; }
.footer-top {
  display:flex; flex-direction:column; align-items:center;
  width:min(1160px,calc(100% - 3rem)); margin-inline:auto;
  padding:clamp(3.5rem,8vw,6rem) 0 2.8rem; text-align:center;
}
.footer-monogram-wrap { width:5rem; height:5rem; margin-bottom:1.4rem; }
.footer-monogram-wrap svg { width:100%; height:100%; }
.footer-names {
  font-family:var(--script); font-size:clamp(3rem,10vw,5.5rem); line-height:.9;
  background:linear-gradient(135deg,#fff 20%,var(--gold-pale) 50%,#fff 75%);
  background-size:260% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; animation:shimmer 5.5s linear infinite;
}
.footer-date {
  margin-top:.85rem; color:var(--gold-light);
  font-size:.58rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
}
.footer-message {
  margin-top:1.2rem; color:rgba(253,248,240,.58);
  font-family:var(--serif); font-size:1.1rem; font-style:italic; font-weight:300;
}
.social-links { display:flex; gap:.6rem; margin-top:1.8rem; }
.social-links a {
  display:grid; width:2.8rem; height:2.8rem; place-items:center;
  color:var(--gold-light); border:1px solid rgba(226,188,110,.35); border-radius:50%;
  transition:color 200ms,background 200ms,transform 200ms;
}
.social-links a:hover { color:var(--maroon); background:var(--gold-light); transform:translateY(-3px); }
.footer-bottom {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.7rem 1.5rem; width:min(1160px,calc(100% - 3rem)); margin-inline:auto;
  padding:1.4rem 0; color:rgba(253,248,240,.38);
  font-size:.58rem; font-weight:600; letter-spacing:.1em;
  border-top:1px solid rgba(226,188,110,.14);
}
.footer-bottom a { display:inline-flex; align-items:center; gap:.35rem; color:var(--gold-light); text-transform:uppercase; }

/* ═══════════════════════════════════════════
   REVEAL ANIMATION
═══════════════════════════════════════════ */
.js-ready .reveal { opacity:0; transform:translateY(1.3rem); transition:opacity 750ms var(--ease),transform 750ms var(--ease); }
.js-ready .reveal.is-visible { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════
   RESPONSIVE — 640px
═══════════════════════════════════════════ */
@media (min-width:640px) {
  .countdown-inner { grid-template-columns:minmax(14rem,.8fr) minmax(24rem,1.4fr); align-items:center; }
  .countdown-message { grid-column:2; }
  .form-grid,.attendance-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-grid { grid-auto-rows:12rem; grid-template-columns:1.05fr .9fr 1.05fr; }
  .gallery-photo-udita { grid-row:span 3; }
  .gallery-note        { grid-row:span 2; }
  .gallery-photo-nishu { grid-row:span 2; }
  .gallery-date        { grid-row:span 1; }
  .footer-bottom { flex-wrap:nowrap; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — 760px
═══════════════════════════════════════════ */
@media (min-width:760px) {
  :root { --header-h:5.25rem; }
  .story-layout,.venue-layout,.rsvp-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .story-layout .story-photos { order:2; }
  .story-layout .story-copy   { order:1; }
  .venue-layout  { grid-template-columns:minmax(0,.9fr) minmax(18rem,1fr); }
  .rsvp-layout   { grid-template-columns:minmax(14rem,.72fr) minmax(24rem,1fr); }
  .section-heading-split { grid-template-columns:1fr minmax(14rem,.65fr); max-width:none; }
}

/* Mobile nav */
@media (max-width:759px) {
  .menu-toggle { display:grid; }
  .primary-navigation {
    position:absolute; top:calc(100% + .5rem); right:1.25rem; left:1.25rem;
    display:grid; gap:0; padding:.6rem; visibility:hidden;
    background:rgba(253,248,240,.99); border:1px solid rgba(201,151,58,.28);
    box-shadow:var(--shadow-md); backdrop-filter:blur(14px);
    opacity:0; transform:translateY(-.6rem);
    transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 200ms;
  }
  .primary-navigation.is-open { visibility:visible; opacity:1; transform:translateY(0); }
  .primary-navigation a { min-height:3rem; padding-inline:.9rem; }
  .primary-navigation > a:not(.nav-rsvp)::after { display:none; }
  .nav-rsvp { justify-content:center; margin:.35rem; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — 1024px
═══════════════════════════════════════════ */
@media (min-width:1024px) {
  .events-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .event-card  { min-height:23rem; padding:1.7rem; }
  .event-card h3 { font-size:1.95rem; }
  .gallery-grid { grid-auto-rows:13.5rem; }
  .map-card { min-height:25rem; }
}

/* ═══════════════════════════════════════════
   VERY SMALL SCREENS
═══════════════════════════════════════════ */
@media (max-width:399px) {
  .brand-copy { display:none; }
  .hero-floral { width:110px; height:110px; }
  .hero-actions { flex-direction:column; }
  .button-primary { width:100%; }
  .scroll-cue span { display:none; }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}