:root {
  --maroon-950: #2d0712;
  --maroon-900: #420b1b;
  --maroon-800: #571526;
  --maroon-700: #741f34;
  --green-900: #123d34;
  --green-700: #1f6251;
  --turmeric: #e3a72f;
  --gold: #c9902e;
  --gold-light: #f4d58c;
  --cream: #fff7e6;
  --jasmine: #fffaf0;
  --stone: #eadbc4;
  --ink: #351917;
  --serif: Georgia, "Times New Roman", "Noto Serif Tamil", serif;
  --sans: "Trebuchet MS", "Noto Sans Tamil", Arial, sans-serif;
  --progress: 0;
}

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

html {
  scroll-behavior: smooth;
  background: var(--maroon-950);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(116, 31, 52, .035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(31, 98, 81, .03) 0 1px, transparent 1.5px);
  background-size: 17px 17px, 23px 23px;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: var(--maroon-950);
  background: var(--jasmine);
  border: 2px solid var(--gold);
  transform: translateY(-150%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--turmeric);
  outline-offset: 4px;
}

html.envelope-pending body { overflow: hidden; }

.envelope-gate { display: none; }

.has-js.envelope-pending .envelope-gate {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  overflow: hidden;
  color: var(--jasmine);
  background:
    repeating-linear-gradient(105deg, rgba(255,255,255,.016) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 38%, #7c2639 0%, #4a0d1d 48%, #260610 100%);
  opacity: 1;
  transition: opacity .45s ease, visibility .45s ease;
}

.envelope-gate::before,
.envelope-gate::after {
  content: "";
  position: absolute;
  inset: 1rem;
  pointer-events: none;
  border: 1px solid rgba(244,213,140,.42);
}

.envelope-gate::after { inset: 1.4rem; border-color: rgba(244,213,140,.13); }

.envelope-aura {
  position: absolute;
  width: min(100vw, 48rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,167,47,.2), transparent 66%);
  animation: envelope-aura 4s ease-in-out infinite;
}

.envelope-open {
  position: relative;
  width: min(82vw, 34rem);
  aspect-ratio: 1.48;
  padding: 0;
  color: inherit;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 1100px;
  filter: drop-shadow(0 2.2rem 2.2rem rgba(0,0,0,.38));
}

.envelope-back,
.envelope-pocket,
.envelope-flap,
.envelope-card {
  position: absolute;
  left: 0;
  width: 100%;
}

.envelope-back {
  z-index: 1;
  inset: 0;
  border: 1px solid #d8aa54;
  border-radius: .45rem;
  background:
    repeating-linear-gradient(105deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #721f34, #430b1b 68%, #5e1428);
  box-shadow: inset 0 0 0 .45rem #591326, inset 0 0 0 .5rem rgba(244,213,140,.4);
  transition: opacity .5s ease;
}

.envelope-card {
  z-index: 2;
  top: 7%;
  left: 7%;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 86%;
  height: 82%;
  padding: 1.5rem;
  color: var(--maroon-900);
  border: 1px solid var(--gold);
  border-radius: .25rem;
  background:
    linear-gradient(45deg, rgba(201,144,46,.08) 25%, transparent 25% 75%, rgba(201,144,46,.08) 75%) 0 0 / 16px 16px,
    #fff4df;
  box-shadow: inset 0 0 0 .45rem #fff4df, inset 0 0 0 .5rem rgba(201,144,46,.45);
  transform: translateY(9%);
  transition: transform .72s cubic-bezier(.22,.72,.24,1) .28s, box-shadow .5s ease;
}

.letter-flourish {
  width: 5rem;
  height: 1rem;
  margin-bottom: .25rem;
  background: radial-gradient(circle, var(--gold) 0 3px, transparent 3.5px), linear-gradient(90deg, transparent, var(--gold), transparent) center / 100% 1px no-repeat;
}

.envelope-card strong {
  color: var(--maroon-700);
  font-size: clamp(.58rem, 1.2vw, .76rem);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.envelope-card small {
  color: var(--green-700);
  font-family: var(--serif);
  font-size: clamp(.9rem, 2vw, 1.2rem);
  letter-spacing: .08em;
}

.envelope-card b {
  margin: .35rem 0;
  color: var(--maroon-800);
  font-family: var(--serif);
  font-size: clamp(3rem, 10vw, 5.6rem);
  font-weight: 400;
  line-height: 1;
}

.envelope-card b i { color: var(--gold); font-size: .65em; font-weight: 400; }
.envelope-card em { font-family: var(--serif); font-size: clamp(.72rem, 1.8vw, 1rem); font-style: normal; }
.envelope-card > span:last-child { margin-top: .55rem; color: var(--maroon-700); font-size: .68rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }

.envelope-pocket {
  z-index: 4;
  bottom: 0;
  height: 72%;
  border: 1px solid #c99238;
  border-radius: 0 0 .45rem .45rem;
  clip-path: polygon(0 0, 50% 61%, 100% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(105deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #681a2e, #430b1b);
  transition: opacity .5s ease;
}

.envelope-flap {
  z-index: 5;
  top: 0;
  height: 58%;
  border: 1px solid #dcad55;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background:
    repeating-linear-gradient(105deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(165deg, #7b2439, #4a0d1e);
  transform-origin: top center;
  backface-visibility: hidden;
  transition: transform .62s cubic-bezier(.42,0,.18,1), opacity .5s ease;
}

.envelope-seal {
  position: absolute;
  z-index: 6;
  top: 48%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 5.2rem;
  aspect-ratio: 1;
  color: #5a1426;
  border: 2px solid #f0ce7f;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f7dda0, #cb8f2b 62%, #885617);
  box-shadow: 0 .45rem 1rem rgba(0,0,0,.28), inset 0 0 0 .35rem rgba(116,31,52,.16);
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .28s ease, opacity .28s ease;
}

.envelope-seal i { font-size: .8em; font-weight: 400; }
.envelope-open:hover .envelope-seal { transform: translate(-50%, -50%) scale(1.06); }

.envelope-instruction {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(255,250,240,.76);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.envelope-gate.is-opening { pointer-events: none; }
.envelope-gate.is-opening .envelope-flap { z-index: 0; transform: rotateX(180deg); }
.envelope-gate.is-opening .envelope-seal { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-18deg); }
.envelope-gate.is-opening .envelope-card { transform: translateY(-50%) scale(1.04); }
.envelope-gate.is-reading .envelope-back,
.envelope-gate.is-reading .envelope-pocket,
.envelope-gate.is-reading .envelope-flap { opacity: 0; }
.envelope-gate.is-reading .envelope-card { z-index: 8; transform: translateY(0) scale(1.14); box-shadow: 0 2.4rem 5rem rgba(0,0,0,.38), inset 0 0 0 .45rem #fff4df, inset 0 0 0 .5rem rgba(201,144,46,.45); }
.envelope-gate.is-reading .envelope-instruction { color: var(--gold-light); }
.envelope-gate.is-leaving { pointer-events: none; opacity: 0; visibility: hidden; }

@keyframes envelope-aura { 50% { transform: scale(1.06); opacity: .7; } }

.tamil { font-family: "Noto Serif Tamil", Latha, var(--serif); }

.hero-stage {
  position: relative;
  height: 175svh;
  min-height: 62rem;
  color: var(--jasmine);
  background: var(--maroon-950);
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(219, 159, 55, .18), transparent 35%),
    linear-gradient(160deg, #29040e 0%, #571526 52%, #23060d 100%);
}

.hero-sticky::before,
.hero-sticky::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1rem;
  pointer-events: none;
  border: 1px solid rgba(244, 213, 140, .32);
}

.hero-sticky::after {
  inset: 1.35rem;
  border-color: rgba(244, 213, 140, .12);
}

.hero-glow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 42%;
  width: min(90vw, 52rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(.8 + var(--progress) * .3));
  background: radial-gradient(circle, rgba(232, 174, 60, .18), rgba(232, 174, 60, .04) 45%, transparent 70%);
  filter: blur(1px);
}

.hero-title {
  position: absolute;
  z-index: 3;
  top: 38%;
  left: 50%;
  width: min(92vw, 72rem);
  text-align: center;
  transform: translate(-50%, calc(-50% - var(--progress) * 8svh));
  opacity: clamp(0, calc(1.35 - var(--progress) * 1.9), 1);
  will-change: transform, opacity;
}

.eyebrow,
.section-kicker {
  margin: 0 0 1rem;
  color: var(--gold-light);
  font-size: clamp(.78rem, 1.3vw, .96rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero-title h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 2.5vw, 2.3rem);
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.25rem, 9vw, 8rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.055em;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .24);
}

#couple-names:focus { outline: none; }

.hero-title h1 b {
  color: var(--turmeric);
  font-size: .62em;
  font-style: italic;
  font-weight: 400;
}

.hero-place {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 1.5rem 0 0;
  color: rgba(255, 250, 240, .76);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.hero-place span { width: 2.5rem; height: 1px; background: var(--gold); }

.gopuram-picture {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -18svh;
  width: min(68vw, 42rem);
  transform: translate3d(-50%, calc(44svh - var(--progress) * 53svh), 0) scale(calc(.84 + var(--progress) * .16));
  transform-origin: center bottom;
  filter: drop-shadow(0 1.2rem 2rem rgba(0, 0, 0, .42));
  will-change: transform;
}

.gopuram-picture img { width: 100%; height: auto; }

.hero-date {
  position: absolute;
  z-index: 5;
  bottom: 7.5svh;
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(.55rem, 2vw, 1.2rem);
  color: var(--jasmine);
  font-family: var(--serif);
  opacity: clamp(0, calc(var(--progress) * 2.5 - 1.4), 1);
  transform: translate(-50%, calc(2rem - var(--progress) * 2rem));
  white-space: nowrap;
  padding: .45rem .8rem;
  border: 1px solid rgba(244, 213, 140, .24);
  border-radius: 100vmax;
  background: rgba(45, 7, 18, .58);
  backdrop-filter: blur(5px);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  will-change: transform, opacity;
}

.hero-date span { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.hero-date small { color: var(--gold-light); font-family: var(--sans); font-size: .78rem; letter-spacing: .25em; text-transform: uppercase; }

.scroll-cue {
  position: absolute;
  z-index: 6;
  bottom: 2.2rem;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .65rem;
  transform: translateX(-50%);
  opacity: clamp(0, calc(1 - var(--progress) * 4), 1);
  color: rgba(255, 250, 240, .64);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.scroll-cue i { width: 1px; height: 2.5rem; background: linear-gradient(var(--gold), transparent); animation: cue 1.8s ease-in-out infinite; }

@keyframes cue { 50% { transform: scaleY(.55); transform-origin: top; opacity: .45; } }

.petals { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.petals i {
  position: absolute;
  top: -4rem;
  width: .65rem;
  height: 1.05rem;
  border-radius: 80% 20% 70% 30%;
  background: rgba(255, 250, 228, .72);
  box-shadow: inset 0 -2px 3px rgba(201, 144, 46, .24);
  animation: petal-fall 12s linear infinite;
}
.petals i:nth-child(1) { left: 11%; animation-delay: -2s; }
.petals i:nth-child(2) { left: 27%; animation-delay: -8s; animation-duration: 15s; }
.petals i:nth-child(3) { left: 43%; animation-delay: -5s; animation-duration: 10s; }
.petals i:nth-child(4) { left: 62%; animation-delay: -10s; animation-duration: 14s; }
.petals i:nth-child(5) { left: 78%; animation-delay: -3s; animation-duration: 11s; }
.petals i:nth-child(6) { left: 91%; animation-delay: -7s; animation-duration: 16s; }

@keyframes petal-fall {
  0% { transform: translate3d(0, -5vh, 0) rotate(0deg); opacity: 0; }
  12% { opacity: .75; }
  100% { transform: translate3d(5vw, 110vh, 0) rotate(440deg); opacity: 0; }
}

.ambient-petals {
  --petal-color: rgba(255, 250, 240, .76);
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-petals i {
  --drift: 3.5vw;
  position: absolute;
  top: -2rem;
  left: 10%;
  width: .55rem;
  height: .85rem;
  border-radius: 70% 20% 65% 28%;
  background: var(--petal-color);
  box-shadow: inset 0 -.12rem .15rem rgba(116, 31, 52, .13);
  opacity: 0;
  transform-origin: 60% 90%;
  animation: section-petal-fall 16s linear infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}

.ambient-petals.is-active i { animation-play-state: running; }
.ambient-petals i:nth-child(2) { left: 29%; --drift: -2.5vw; animation-delay: -11s; animation-duration: 19s; }
.ambient-petals i:nth-child(3) { left: 52%; --drift: 4.5vw; animation-delay: -5s; animation-duration: 14s; }
.ambient-petals i:nth-child(4) { left: 73%; --drift: -4vw; animation-delay: -15s; animation-duration: 21s; }
.ambient-petals i:nth-child(5) { left: 91%; --drift: 2vw; animation-delay: -8s; animation-duration: 17s; }
.ambient-petals--gold { --petal-color: rgba(244, 213, 140, .65); }
.ambient-petals--marigold { --petal-color: rgba(227, 167, 47, .72); }
.ambient-petals--rose { --petal-color: rgba(159, 48, 68, .47); }

@keyframes section-petal-fall {
  0% { transform: translate3d(0, -3rem, 0) rotate(0deg) scale(.8); opacity: 0; }
  12% { opacity: .62; }
  76% { opacity: .48; }
  100% { transform: translate3d(var(--drift), calc(100vh + 7rem), 0) rotate(390deg) scale(1); opacity: 0; }
}

.section-shell { width: min(72rem, calc(100% - 2.5rem)); margin-inline: auto; }

.welcome {
  position: relative;
  padding: clamp(6rem, 11vw, 10rem) 0 clamp(5rem, 9vw, 8rem);
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(201,144,46,.13) 1px, transparent 1px) 0 0 / 3.5rem 100%,
    radial-gradient(circle at 50% 18%, rgba(227,167,47,.12), transparent 30%),
    linear-gradient(180deg, #fff8e9, #f4e3c8);
  border-block: 1px solid rgba(201,144,46,.38);
}

.welcome.section-shell { width: 100%; max-width: none; margin: 0; padding-inline: clamp(1.25rem, 5vw, 5rem); }
.welcome::before, .welcome::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3.5rem;
  bottom: 3.5rem;
  width: 1.4rem;
  background:
    radial-gradient(circle, var(--maroon-700) 0 2px, transparent 2.5px) center top / 100% 1.55rem repeat-y,
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(201,144,46,.62) calc(50% - .5px), rgba(201,144,46,.62) calc(50% + .5px), transparent calc(50% + .5px));
  opacity: .46;
}
.welcome::before { left: clamp(.65rem, 2vw, 1.5rem); }
.welcome::after { right: clamp(.65rem, 2vw, 1.5rem); }
.welcome > :not(.ambient-petals) { position: relative; z-index: 3; }

.welcome-canopy,
.venue-canopy,
.portrait-thoranam {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: clamp(.35rem, 1vw, .85rem);
  width: min(58rem, 86vw);
  transform: translateX(-50%);
  border-top: .55rem solid var(--maroon-800);
}

.welcome-canopy i,
.venue-canopy i,
.portrait-thoranam i {
  display: block;
  width: clamp(1.5rem, 4vw, 3rem);
  height: clamp(1.5rem, 4vw, 3rem);
  border: 2px solid var(--gold);
  border-top: 0;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(135deg, var(--maroon-800), #8b2b41);
  box-shadow: inset 0 -.25rem .4rem rgba(0,0,0,.16);
}

.section-mark { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 2rem; }
.section-mark span { width: 3rem; height: 1px; background: var(--gold); }
.section-mark i { width: .75rem; aspect-ratio: 1; border: 1px solid var(--gold); transform: rotate(45deg); }

.welcome .section-kicker,
.celebrations .section-kicker,
.portraits .section-kicker { color: var(--maroon-700); }

.section-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}
.section-kicker::before, .section-kicker::after { content: ""; width: clamp(1.5rem, 5vw, 4rem); height: 1px; background: currentColor; opacity: .48; }

.welcome h2,
.celebrations h2,
.venue h2,
.portraits h2,
.closing h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.45rem, 6vw, 5.1rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.intro {
  max-width: 39rem;
  margin: 1.7rem auto 0;
  color: #664542;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.75;
}

.ornament { display: block; width: min(58rem, 94%); margin: clamp(3rem, 7vw, 5.5rem) auto 0; padding: 1.25rem; border-block: 1px solid rgba(201,144,46,.32); background: radial-gradient(ellipse, rgba(255,255,255,.76), transparent 68%); }
.ornament img { width: 100%; height: auto; }

.madurai-interlude {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(78svh, 48rem);
  padding: clamp(7rem, 14vw, 12rem) 1.5rem clamp(5rem, 9vw, 8rem);
  color: var(--jasmine);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(199,125,39,.24), transparent 32%),
    linear-gradient(180deg, #230811, #4b1221 62%, #123d34);
}

.madurai-interlude::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(244,213,140,.07) 50%, transparent 50.2%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.018) 32px);
}

.corridor-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.corridor-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.45)); }

.madurai-copy { position: relative; z-index: 3; width: min(44rem, 72vw); margin-top: 3rem; }
.madurai-copy .section-kicker { color: var(--gold-light); }
.madurai-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.3rem, 5.8vw, 5rem); font-weight: 400; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.kolam-line { width: min(20rem, 78%); margin-top: 2.4rem; overflow: visible; }
.kolam-line path { fill: none; stroke: var(--gold-light); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease .25s; }
.madurai-copy.is-visible .kolam-line path { stroke-dashoffset: 0; }

.celebrations {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  color: var(--jasmine);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(159,48,68,.24), transparent 24%),
    radial-gradient(circle at 85% 78%, rgba(227,167,47,.15), transparent 26%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(145deg, #0c332c, #184d40 52%, #0b2d27);
  background-size: 2rem 2rem;
}

.celebrations::after { content: ""; position: absolute; inset: 2.3rem; pointer-events: none; border: 1px solid rgba(244,213,140,.13); }

.celebrations::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px solid rgba(244, 213, 140, .23);
  pointer-events: none;
}

.celebrations .section-shell,
.portraits .section-shell { position: relative; z-index: 3; }

.celebrations .section-kicker { color: var(--gold-light); text-align: center; }
.celebrations h2 { text-align: center; }

.event-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 4vw, 3.5rem);
  width: min(55rem, 100%);
  margin: clamp(3rem, 7vw, 5rem) auto 0;
}

.procession-thread {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 43%;
  width: 14%;
  height: 2.4rem;
  overflow: visible;
  pointer-events: none;
}

.procession-thread path { fill: none; stroke: var(--gold-light); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s ease .5s; }
.event-grid:has(.is-visible) .procession-thread path { stroke-dashoffset: 0; }

.event-card {
  position: relative;
  min-height: 32rem;
  padding: 5rem clamp(1.5rem, 4vw, 3.5rem) 3rem;
  text-align: center;
  border: 2px solid rgba(244, 213, 140, .66);
  border-radius: 10rem 10rem 1rem 1rem;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 .45rem rgba(18, 61, 52, .8), inset 0 0 0 .53rem rgba(244, 213, 140, .28), inset 0 0 3rem rgba(0,0,0,.2), 0 1.5rem 3rem rgba(0,0,0,.22);
  overflow: hidden;
}

.event-card::after {
  content: "";
  position: absolute;
  inset: -50% -100%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 46%, rgba(255,238,183,.13) 50%, transparent 54%);
  transform: translateX(-30%);
  transition: transform 1.2s ease .35s;
}
.event-card.is-visible::after { transform: translateX(35%); }
.event-card--reception { background: radial-gradient(circle at 50% 25%, rgba(226,149,45,.14), transparent 28%), linear-gradient(155deg, #5a1529, #2f0b17 75%); }
.event-card--wedding { background: radial-gradient(circle at 50% 20%, rgba(255,220,136,.22), transparent 34%), linear-gradient(155deg, #355f4d, #15382f 78%); }
.event-card--reception::before, .event-card--wedding::before { content: ""; position: absolute; inset: 1.25rem; pointer-events: none; border: 1px dashed rgba(244,213,140,.28); border-radius: inherit; }
.lamp-mark {
  position: absolute;
  top: 1.7rem;
  left: 50%;
  width: 2.6rem;
  height: 3rem;
  transform: translateX(-50%);
}
.lamp-mark::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: .72rem;
  width: .88rem;
  height: 1.65rem;
  border-radius: 72% 22% 65% 30%;
  background: linear-gradient(145deg, #fff1a8 8%, var(--turmeric) 54%, #d15b21 100%);
  filter: drop-shadow(0 0 .42rem rgba(255, 187, 49, .72));
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: event-flame 1.55s ease-in-out infinite;
  animation-play-state: paused;
}
.lamp-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .35rem;
  width: 3.7rem;
  height: 3.7rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 62, .22), transparent 67%);
  animation: event-glow 2.1s ease-in-out infinite;
  animation-play-state: paused;
}
.event-card.is-onscreen .lamp-mark::before,
.event-card.is-onscreen .lamp-mark::after { animation-play-state: running; }
.event-card--wedding .lamp-mark::before,
.event-card--wedding .lamp-mark::after { animation-delay: -.7s; }
.lamp-mark i {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: .15rem;
  width: 2.45rem;
  height: .72rem;
  transform: translateX(-50%);
  border: 2px solid var(--gold-light);
  border-top: 0;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, rgba(201,144,46,.12), rgba(201,144,46,.4));
}
@keyframes event-flame {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-2deg); filter: drop-shadow(0 0 .42rem rgba(255,187,49,.68)); }
  35% { transform: translateX(-50%) scale(.88, 1.08) rotate(4deg); filter: drop-shadow(0 0 .72rem rgba(255,187,49,.86)); }
  68% { transform: translateX(-50%) scale(1.06, .92) rotate(-4deg); }
}
@keyframes event-glow { 50% { opacity: .62; transform: translateX(-50%) scale(1.14); } }
.event-number { margin: 0; color: var(--gold-light); font-family: var(--serif); font-size: clamp(4rem, 8vw, 6rem); line-height: .9; }
.event-month { margin: .75rem 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.card-rule { width: 3rem; height: 1px; margin: 2rem auto; background: var(--gold); }
.event-card h3 { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; }
.event-time { margin: 1.2rem 0 0; font-family: var(--serif); font-size: 1.25rem; }
.event-time span { font-family: var(--sans); font-size: .65em; font-weight: 700; letter-spacing: .08em; }
.event-note { margin: 1.2rem 0 0; color: rgba(255,250,240,.62); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

.procession-divider {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: clamp(5rem, 9vw, 7rem);
  margin-block: -1px;
}
.procession-divider span { width: min(23vw, 14rem); height: 1px; background: var(--gold); opacity: .65; }
.procession-divider i { width: 1.2rem; aspect-ratio: 1; border: 2px solid var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 .35rem rgba(201,144,46,.12); }
.procession-divider--dawn { background: linear-gradient(180deg, var(--green-900), #ead8b9); }
.procession-divider--jasmine { background: linear-gradient(180deg, #f3e4cb, #e5cfaa); }
.procession-divider--threshold { background: linear-gradient(180deg, #e8d5b4, var(--maroon-900)); }

.venue { position: relative; width: 100%; max-width: none; margin: 0; padding: clamp(7rem, 12vw, 11rem) 1.25rem; overflow: hidden; background: radial-gradient(circle at 50% 34%, #fffaf0 0 24%, transparent 56%), repeating-linear-gradient(45deg, rgba(116,31,52,.035) 0 1px, transparent 1px 12px), linear-gradient(180deg, #ead8b9, #f7ebd8); }
.venue::before, .venue::after {
  content: "";
  position: absolute;
  top: 4rem;
  bottom: 4rem;
  width: 1.5rem;
  background:
    linear-gradient(45deg, transparent 42%, rgba(116,31,52,.36) 43% 57%, transparent 58%) center top / .72rem .72rem repeat-y,
    linear-gradient(-45deg, transparent 42%, rgba(201,144,46,.62) 43% 57%, transparent 58%) center .36rem / .72rem .72rem repeat-y;
  opacity: .52;
}
.venue::before { left: 1rem; }
.venue::after { right: 1rem; }
.venue-arch { z-index: 3; }
.venue-canopy { border-top-color: var(--green-900); }
.venue-canopy i { background: linear-gradient(135deg, var(--green-900), var(--green-700)); }
.venue-arch {
  position: relative;
  width: min(47rem, 100%);
  margin: auto;
  padding: clamp(5.5rem, 11vw, 8rem) clamp(1.5rem, 7vw, 5rem) clamp(3rem, 7vw, 5rem);
  text-align: center;
  border: 1px solid rgba(116,31,52,.35);
  border-radius: 50% 50% 1rem 1rem / 25% 25% 1rem 1rem;
  background: radial-gradient(circle at 50% 15%, rgba(227,167,47,.12), transparent 35%), repeating-linear-gradient(45deg, rgba(201,144,46,.04) 0 1px, transparent 1px 10px), linear-gradient(180deg, #fffaf0, #f4e7d2);
  box-shadow: inset 0 0 0 .55rem var(--cream), inset 0 0 0 .66rem rgba(201,144,46,.48), inset 0 0 4rem rgba(201,144,46,.08), 0 2rem 5rem rgba(87,21,38,.15);
}
.venue-arch::before { content: ""; position: absolute; inset: 1.2rem; border: 1px solid rgba(201,144,46,.38); border-radius: inherit; pointer-events: none; }
.venue-arch::after { content: ""; position: absolute; inset: 2rem; border: 1px solid rgba(116,31,52,.11); border-radius: inherit; pointer-events: none; }
.venue .section-kicker { color: var(--maroon-700); }
.venue h2 { color: var(--maroon-800); font-size: clamp(2.7rem, 7vw, 5.5rem); letter-spacing: .04em; }
.venue-city { margin: .7rem 0 0; color: var(--green-700); font-size: .8rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.venue-rule { display: flex; align-items: center; justify-content: center; width: min(13rem, 60%); height: 1.5rem; margin: 2rem auto; }
.venue-rule::before, .venue-rule::after { content: ""; flex: 1; height: 1px; background: var(--gold); }
.venue-rule span { width: .75rem; aspect-ratio: 1; margin: 0 .8rem; border: 1px solid var(--gold); transform: rotate(45deg); }
.venue address { color: #62443f; font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.25rem); font-style: normal; line-height: 1.8; }
.venue-skyline { display: flex; align-items: end; justify-content: center; gap: .18rem; height: 3rem; margin: 1.8rem auto -.35rem; color: var(--gold); opacity: .66; }
.venue-skyline i { display: block; width: .75rem; height: 1.35rem; border: 1px solid currentColor; clip-path: polygon(50% 0, 68% 21%, 63% 21%, 82% 46%, 75% 46%, 100% 100%, 0 100%, 25% 46%, 18% 46%, 37% 21%, 32% 21%); }
.venue-skyline i:nth-child(2), .venue-skyline i:nth-child(6) { height: 1.85rem; }
.venue-skyline i:nth-child(3), .venue-skyline i:nth-child(5) { height: 2.25rem; }
.venue-skyline i:nth-child(4) { width: 1rem; height: 2.85rem; }
.map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.5rem;
  margin-top: 2.2rem;
  padding: .85rem 1.35rem;
  color: var(--jasmine);
  background: var(--maroon-800);
  border: 1px solid var(--maroon-800);
  border-radius: 100vmax;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.map-button svg { width: 1.2rem; fill: var(--gold-light); }
.map-button:hover { transform: translateY(-2px); background: var(--maroon-700); box-shadow: 0 .8rem 1.8rem rgba(87,21,38,.2); }

.portraits { position: relative; padding: clamp(7rem, 12vw, 10rem) 0 clamp(6rem, 10vw, 9rem); text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(255,250,240,.72), transparent 46%), repeating-linear-gradient(135deg, rgba(116,31,52,.045) 0 1px, transparent 1px 14px), #e8d5b4; }
.portraits::before, .portraits::after { content: ""; position: absolute; top: 4rem; bottom: 4rem; width: 1px; background: linear-gradient(transparent, var(--gold), transparent); }
.portraits::before { left: 4vw; }
.portraits::after { right: 4vw; }
.portrait-thoranam { border-top-color: var(--maroon-800); }
.portrait-pair { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3.5rem); margin-top: clamp(3rem, 7vw, 5rem); }
.portrait { width: min(32vw, 18rem); margin: 0; }
.portrait-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: var(--gold-light);
  border: 2px solid var(--gold);
  border-radius: 50% 50% .8rem .8rem / 24% 24% .8rem .8rem;
  background:
    radial-gradient(circle at 15% 15%, rgba(244,213,140,.14) 0 2px, transparent 2.5px) 0 0 / 18px 18px,
    linear-gradient(145deg, var(--maroon-800), var(--green-900));
  box-shadow: inset 0 0 0 .5rem #efe0ca, inset 0 0 0 .62rem var(--gold), inset 0 0 3rem rgba(0,0,0,.2), 0 1.5rem 3rem rgba(53,25,23,.22);
}
.portrait-frame::before { content: ""; position: absolute; inset: 1rem; border: 1px solid rgba(244,213,140,.3); border-radius: inherit; }
.portrait-frame::after { content: ""; position: absolute; top: .75rem; right: .8rem; width: 2.2rem; height: 2.2rem; background: radial-gradient(circle at 72% 20%, var(--gold-light) 0 2px, transparent 2.5px), radial-gradient(circle at 34% 46%, rgba(255,250,240,.82) 0 2px, transparent 2.5px), radial-gradient(circle at 78% 72%, rgba(244,213,140,.72) 0 2px, transparent 2.5px); }
.portrait-frame span { font-family: var(--serif); font-size: clamp(4rem, 10vw, 7rem); font-style: italic; }
.portrait-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption { margin-top: 1.2rem; color: var(--maroon-800); font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.8rem); }
.portrait-ampersand { color: var(--maroon-700); font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 4.5rem); font-style: italic; }

.closing { position: relative; padding: clamp(8rem, 14vw, 12rem) 1.25rem; color: var(--jasmine); text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, #7a2034, var(--maroon-900) 48%, var(--maroon-950)), repeating-linear-gradient(90deg, rgba(244,213,140,.035) 0 1px, transparent 1px 3rem); }
.closing::before { content: ""; position: absolute; inset: 1.2rem; border: 1px solid rgba(244,213,140,.25); pointer-events: none; }
.closing::after { content: ""; position: absolute; top: 1.2rem; left: 50%; width: min(34rem, 78vw); height: 6rem; transform: translateX(-50%); border: 1px solid rgba(244,213,140,.3); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; }
.threshold-top { position: absolute; z-index: 1; top: 0; left: 50%; display: flex; justify-content: center; gap: 1rem; width: min(62rem, 90vw); padding-top: .65rem; transform: translateX(-50%); border-top: .75rem solid var(--gold); }
.threshold-top i { width: clamp(2rem, 6vw, 4rem); height: 2rem; border: 2px solid var(--gold-light); border-top: 0; border-radius: 0 0 50% 50%; background: rgba(116,31,52,.55); }
.closing-lamp { position: absolute; z-index: 1; top: 33%; width: 2.2rem; height: 1.15rem; border: 2px solid var(--gold-light); border-top: 0; border-radius: 0 0 50% 50%; opacity: .8; }
.closing-lamp::before { content: ""; position: absolute; left: 50%; bottom: .65rem; width: .75rem; height: 1.35rem; transform: translateX(-50%); border-radius: 70% 20% 60% 30%; background: var(--turmeric); filter: drop-shadow(0 0 .65rem rgba(227,167,47,.7)); animation: lamp-flicker 2.4s ease-in-out infinite; animation-play-state: paused; }
.closing.is-onscreen .closing-lamp::before { animation-play-state: running; }
.closing-lamp i { position: absolute; left: 50%; top: 100%; width: 1px; height: 5rem; background: linear-gradient(rgba(244,213,140,.55), transparent); }
.closing-lamp--left { left: clamp(2.5rem, 10vw, 10rem); }
.closing-lamp--right { right: clamp(2.5rem, 10vw, 10rem); }
@keyframes lamp-flicker { 50% { transform: translateX(-50%) scale(.88) rotate(3deg); opacity: .82; } }
.closing-inner { position: relative; z-index: 3; width: min(48rem, 100%); margin: auto; }
.closing .tamil { margin: 0 0 1.4rem; color: var(--gold-light); font-size: .9rem; font-weight: 700; letter-spacing: .18em; }
.closing h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
.closing-names { margin-top: 2.4rem; color: var(--gold-light); font-family: var(--serif); font-size: 1.5rem; letter-spacing: .25em; }
.closing-names span { color: var(--jasmine); font-style: italic; }
.closing-date { margin: 1.2rem 0 0; color: rgba(255,250,240,.63); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.motion-ready .reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 700px) {
  .envelope-open { width: min(88vw, 30rem); }
  .envelope-seal { width: 4.3rem; }
  .envelope-card { padding: 1rem; }
  .envelope-gate.is-reading .envelope-card { transform: translateY(0) scale(1.03); }
  .hero-stage { height: 165svh; }
  .hero-sticky::before { inset: .55rem; }
  .hero-sticky::after { inset: .85rem; }
  .hero-title { top: 34%; }
  .hero-title h1 { flex-direction: column; gap: .25rem; font-size: clamp(3.15rem, 16vw, 5.4rem); }
  .hero-title h1 b { margin-block: -.2rem; }
  .gopuram-picture { bottom: -7svh; width: min(96vw, 31rem); transform: translate3d(-50%, calc(49svh - var(--progress) * 50svh), 0) scale(calc(.86 + var(--progress) * .14)); }
  .hero-date { bottom: 5svh; }
  .petals { display: none; }
  .welcome::before, .welcome::after { width: .9rem; opacity: .32; }
  .welcome-canopy, .venue-canopy, .portrait-thoranam { width: 82vw; gap: .25rem; }
  .welcome-canopy i, .venue-canopy i, .portrait-thoranam i { width: 1.55rem; height: 1.55rem; }
  .madurai-interlude { min-height: 42rem; padding-inline: 1rem; }
  .corridor-art img { width: 150%; max-width: none; margin-left: -25%; opacity: .76; }
  .madurai-copy { width: min(76vw, 28rem); margin-top: 5rem; }
  .event-grid { grid-template-columns: 1fr; width: min(25rem, 100%); }
  .procession-thread { top: 48.5%; left: 50%; width: 2.5rem; height: 6rem; transform: translate(-50%, -50%) rotate(90deg); }
  .event-card { min-height: 29rem; }
  .procession-divider { height: 4.5rem; }
  .venue::before, .venue::after { width: .7rem; opacity: .36; }
  .ambient-petals i:nth-child(n+4) { display: none; }
  .venue-arch { border-radius: 10rem 10rem 1rem 1rem; }
  .closing-lamp { top: 22%; transform: scale(.8); }
}

@media (max-width: 430px) {
  .section-shell { width: min(100% - 1.5rem, 72rem); }
  .hero-place span { width: 1.5rem; }
  .event-card { padding-inline: 1.3rem; }
  .portrait-pair { gap: .65rem; }
  .portrait { width: 38vw; }
  .portrait-ampersand { font-size: 2.2rem; }
  .closing-date { line-height: 1.7; }
  .closing-lamp--left { left: 2rem; }
  .closing-lamp--right { right: 2rem; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .hero-title { top: 37%; }
  .hero-title h1 { flex-direction: row; font-size: clamp(2.7rem, 9vw, 4rem); }
  .gopuram-picture { width: min(45vw, 21rem); bottom: -35svh; }
  .hero-date { bottom: 1.2rem; }
  .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-stage { height: 100svh; min-height: 38rem; }
  .hero-title { top: 29%; transform: translate(-50%, -50%); opacity: 1; }
  .gopuram-picture { bottom: -19svh; width: min(72vw, 34rem); transform: translateX(-50%); }
  .hero-date { bottom: 4svh; opacity: 1; transform: translateX(-50%); }
  .scroll-cue, .petals, .ambient-petals { display: none; }
  .envelope-aura { animation: none; }
  .envelope-gate { transition-duration: .15s !important; transition-delay: 0s !important; }
  .envelope-flap, .envelope-card, .envelope-seal { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .kolam-line path, .procession-thread path { stroke-dashoffset: 0; transition: none; }
  .event-card::after { display: none; }
  .closing-lamp::before, .lamp-mark::before, .lamp-mark::after { animation: none; }
  .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .map-button { border: 2px solid ButtonText; }
  .hero-sticky::before, .hero-sticky::after, .celebrations::before, .closing::before { border-color: CanvasText; }
}