@import url("fonts.css");

/* ==================== FOUNDATION ==================== */

:root {
  --font-display: "Pattaya", "Times New Roman", serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Allura", "Snell Roundhand", "Segoe Script", cursive;
  --font-arabic: "Geeza Pro", "Traditional Arabic", serif;
}

img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  /* background: var(--plum); */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background: #f1e3ce;
  color: var(--plum);
}

body.intro-locked {
  height: 100vh;
  overflow: hidden;
}

button, input, select, textarea {
  font: inherit;
}

button,
a,
.hero {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

main {
  overflow: clip;
  /* background: var(--plum); */
}

.section-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.section-pad {
  padding: 68px 0;
  position: relative;
}

.eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 650;
  /* letter-spacing: 0.26em; */
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--mauve);
}

.section-heading {
  margin: 0 auto 34px;
  max-width: 680px;
  text-align: center;
}

.section-heading h2,
.welcome-copy h2,
.venue-inner h2,
.dress-copy h2,
.gift-copy h2,
.closing-section h2 {
  margin: 13px 0 18px;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  color: var(--plum);
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
}

.ornament {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 auto 0;
  width: 108px;
}

.ornament::before, .ornament::after {
  content: "";
  height: 1px;
  width: 43px;
  background: color-mix(
    in srgb,
    var(--champagne) 75%,
    transparent
    );
}

.ornament i {
  border: 1px solid var(--champagne);
  height: 7px;
  transform: rotate(45deg);
  width: 7px;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(.2,.75,.25,1), transform 0.9s cubic-bezier(.2,.75,.25,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==================== HERO / OPENING ==================== */

.hero {
  align-items: center;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: var(--plum);
  color: var(--ivory);
  
    -webkit-tap-highlight-color: transparent;
}

.hero.is-closed {
  cursor: pointer;
}

.hero-video, .hero-veil {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.hero-video {
  transform: scale(1.025);
  transition: filter 1.8s ease, transform 8s ease;
  z-index: -3;
  filter: none;
}

.is-open .hero-video {
  transform: scale(1.08);
  filter: none;
}

.hero-veil {
  z-index: -2;
  background: transparent;
}

.hero-geometry {
  inset: 21px;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.hero-geometry::before, .hero-geometry::after {
  border-style: solid;
  content: "";
  inset: 0;
  position: absolute;
  border-color: color-mix(
    in srgb,
    var(--champagne) 32%,
    transparent
    );
}

.hero-geometry::before {
  border-width: 1px;
  clip-path: polygon(0 0, 35% 0, 35% 1px, 65% 1px, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% calc(100% - 1px), 35% calc(100% - 1px), 35% 100%, 0 100%);
}

.hero-geometry::after {
  border-width: 0 1px;
  inset: 12px 0;
}

.hero-geometry i {
  border: 1px solid color-mix(in srgb, var(--ivory) 23%, transparent);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 35% 35% 0 0;
  height: 48%;
  left: 50%;
  max-width: 690px;
  position: absolute;
  top: 4%;
  transform: translateX(-50%);
  width: 72%;
  border-color: color-mix(
    in srgb,
    var(--champagne) 26%,
    transparent
    );
}

.hero-geometry i + i {
  height: 44%;
  opacity: .45;
  top: 8%;
  width: 64%;
}

.opening-mark {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 19px;
  inset: 0;
  justify-content: center;
  opacity: 1;
  position: absolute;
  transition: opacity .7s ease, transform .9s ease, visibility .7s;
  visibility: visible;
  z-index: 3;
  color: var(--ivory);
}

.is-open .opening-mark {
  opacity: 0;
  transform: scale(.96);
  visibility: hidden;
}

.opening-mono {
  align-items: center;
  display: flex;
  gap: 18px;
  line-height: 1;
  color: var(--ivory);
  font-family: var(--font-script);
  font-size: clamp(3.8rem, 12vw, 6rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.opening-mono i {
  height: 52px;
  transform: rotate(28deg);
  width: 1px;
  background: color-mix(
    in srgb,
    var(--champagne) 70%,
    transparent
    );
}

.opening-label {
  font-size: .64rem;
  font-weight: 650;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--champagne);
  display: none;
}

.opening-ripple {
  border: 1px solid color-mix(in srgb, var(--ivory) 52%, transparent);
  border-radius: 50%;
  height: 31px;
  margin-top: 6px;
  position: relative;
  width: 31px;
  border-color: color-mix(
    in srgb,
    var(--champagne) 80%,
    transparent
    );
}

.opening-ripple::before, .opening-ripple::after {
  border: 1px solid color-mix(in srgb, var(--ivory) 35%, transparent);
  border-radius: inherit;
  content: "";
  inset: -1px;
  position: absolute;
  animation: pulse-ring 2.4s ease-out infinite;
  border-color: color-mix(
    in srgb,
    var(--champagne) 46%,
    transparent
    );
}

.opening-ripple::after {
  animation-delay: .8s;
}

.music-toggle {
  align-items: center;
  backdrop-filter: blur(7px);
  border: 1px solid color-mix(in srgb, var(--ivory) 42%, transparent);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  font-size: .61rem;
  font-weight: 650;
  gap: 0;
  letter-spacing: .16em;
  padding: 10px 12px;
  position: fixed;
  right: 17px;
  text-transform: uppercase;
  top: 17px;
  transition: background .25s ease, border-color .25s ease;
  z-index: 50;
  background: color-mix(
    in srgb,
    var(--plum) 68%,
    transparent
    );
  border-color: color-mix(
    in srgb,
    var(--champagne) 55%,
    transparent
    );
  color: var(--ivory);
}

.music-toggle:hover, .music-toggle:focus-visible {
  outline: none;
  background: color-mix(
    in srgb,
    var(--plum) 92%,
    transparent
    );
  border-color: var(--champagne);
}

.music-bars {
  align-items: center;
  display: flex;
  gap: 2px;
  height: 15px;
}

.music-bars i {
  background: currentColor;
  border-radius: 2px;
  display: block;
  height: 5px;
  opacity: .8;
  width: 1px;
}

.music-toggle.is-playing .music-bars i {
  animation: music-bar .8s ease-in-out infinite alternate;
}

.music-toggle.is-playing .music-bars i:nth-child(2) {
  animation-delay: -.45s;
}

.music-toggle.is-playing .music-bars i:nth-child(3) {
  animation-delay: -.25s;
}

.hero-content {
  margin: auto;
  max-width: 860px;
  padding: 118px 34px 90px;
  text-align: center;
  width: 100%;
  color: var(--ivory);
  text-shadow: 0 1px 3px rgba(30, 0, 3, .9),
    0 4px 20px rgba(30, 0, 3, .65);
  opacity: 0;
  transform: translateY(28px);
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, transform;
  line-height: 1.45;
}

.bismillah-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 55px 0 0px;
}

.bismillah-mark {
  display: block;
  width: 100px;
  height: auto;
  margin: 0 auto;
  opacity: .95;
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(20, 0, 3, .45));
}

.translation {
  font-family: var(--font-body);
  font-size: .95rem;
  font-style: normal;
  font-weight: 400;
  margin: 0;
  color: var(--ivory);
  opacity: .9;
  line-height: 1.3;
}

.bismillah-sanskrit {
  font-family: "Yatra One", "Nirmala UI", "Noto Serif Devanagari", "Kohinoor Devanagari", "Mangal", var(--font-body);
  font-size: 1.2rem;
  letter-spacing: .05em;
  margin: 0;
  color: var(--champagne);
  opacity: .92;
  line-height: 1.5;
}

.hero-welcome {
  font-size: .58rem;
  font-weight: 600;
  white-space: pre-line;
  letter-spacing: .16em;
  margin: 0 0 20px;
  text-transform: uppercase;
  line-height: 1.4;
    opacity: .8;

}

.couple-names {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.couple-names h1 {
  margin: 0 0 5px;
  text-wrap: balance;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: .9;
}

.couple-names h1 span {
  display: block;
  font-size: 1.06em;
  font-family: inherit;
}

.couple-names p {
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .2em;
  margin: 0 0 3px;
  opacity: .75;
  text-transform: uppercase;
}

.couple-names small {
  font-size: 1rem;
}

.name-ampersand {
  line-height: 1;
  color: var(--champagne);
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  justify-self: center;
}

.hero-invitation {
  font-family: var(--font-display);
  font-size: .92rem;
  line-height: 1.4;
  margin: 20px auto 6px;
  max-width: 500px;
}

.hero-closing {
  font-size: .58rem;
  font-weight: 600;
  white-space: pre-line;
  letter-spacing: .16em;
  margin: 0;
  opacity: .8;
  text-transform: uppercase;
}

.scroll-cue {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 22px auto 0;
  text-decoration: none;
  width: fit-content;
  color: var(--ivory);
}

.scroll-cue span {
  font-size: .52rem;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.scroll-cue i {
  height: 27px;
  overflow: hidden;
  position: relative;
  width: 1px;
  background: color-mix(
    in srgb,
    var(--champagne) 55%,
    transparent
    );
}

.scroll-cue i::after {
  animation: scroll-line 2s ease-in-out infinite;
  content: "";
  height: 10px;
  left: 0;
  position: absolute;
  top: -10px;
  width: 1px;
  background: var(--champagne);
}

/* ==================== WELCOME ==================== */

.welcome-section {
  background: radial-gradient(
    circle at 85% 25%,
    color-mix(
    in srgb,
    var(--lilac) 30%,
    transparent
    ),
    transparent 29%
    ),
    var(--ivory);
}

/* .welcome-section::before, .welcome-section::after {
  border: 1px solid color-mix(in srgb, var(--mauve) 18%, transparent);
  border-radius: 50%;
  content: "";
  height: 230px;
  left: -160px;
  position: absolute;
  top: 20px;
  width: 230px;
  border-color: color-mix(
    in srgb,
    var(--champagne) 24%,
    transparent
    );
} */

.welcome-section::after {
  height: 190px;
  left: auto;
  right: -130px;
  top: auto;
  bottom: 34px;
  width: 190px;
}

.welcome-shell {
  align-items: center;
  display: grid;
  gap: 52px;
  max-width: 350px;
}

.arch-emblem {
  align-items: center;
  aspect-ratio: .78;
  border: 1px solid color-mix(in srgb, var(--plum) 20%, transparent);
  border-radius: 50% 50% 5px 5px / 34% 34% 5px 5px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 285px;
  position: relative;
  width: 76%;
  background: #DFC7A9;
}

.arch-emblem::before {
  border: 1px solid color-mix(in srgb, var(--champagne) 82%, transparent);
  border-radius: inherit;
  content: "";
  inset: 12px;
  position: absolute;
}

.arch-emblem::after {
  content: "";
  height: 1px;
  position: absolute;
  transform: rotate(-45deg);
  width: 53%;
  background: color-mix(
    in srgb,
    var(--plum) 26%,
    transparent
    );
}

.arch-emblem span {
  font-family: var(--font-arabic);
  font-size: 4.4rem;
  position: relative;
  z-index: 2;
  color: var(--plum);
}

.arch-emblem i {
  border: 1px solid color-mix(in srgb, var(--champagne) 68%, transparent);
  height: 48px;
  position: absolute;
  transform: rotate(45deg);
  width: 48px;
}

.welcome-copy {
  text-align: center;
}

.welcome-copy p {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.85;
  margin: 0 auto;
  max-width: 320px;
  color: color-mix(
    in srgb,
    var(--plum) 78%,
    var(--ivory)
    );
}

/* Sunder Kand Path fills with the maroon floral-arch backdrop; ivory/gold text sits on the velvet ground */
#welcome.welcome-section {
  background-image: url("../images/sundar-kand.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--ivory);
  display: flex;
  align-items: center;
  min-height: min(177vw, 790px);
  padding-top: clamp(20px, 5vw, 36px);
  padding-bottom: clamp(20px, 5vw, 36px);
}

#welcome.welcome-section::before,
#welcome.welcome-section::after {
  display: none;
}

#welcome .event-card {
  max-width: 340px;
}

#welcome .eyebrow {
  color: var(--champagne);
  font-size: .86rem;
  line-height: 1.55;
  padding: 0 12px;
}

#welcome .event-card h2 {
  color: var(--ivory);
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  margin: 26px 0 18px;
}

#welcome .event-card .ornament {
  margin-bottom: 28px;
}

#welcome .event-when {
  color: color-mix(in srgb, var(--ivory) 90%, transparent);
  font-size: 1.18rem;
  line-height: 1.65;
  margin: 8px 0;
}

#welcome .event-note {
  color: color-mix(in srgb, var(--champagne) 92%, transparent);
  font-size: 1.05rem;
  margin: 16px 0 30px;
}

#welcome .event-venue {
  font-size: 1rem;
  margin-top: 6px;
}

#welcome .event-venue a {
  color: var(--ivory);
}

#welcome .event-venue a:hover,
#welcome .event-venue a:focus-visible {
  color: var(--champagne);
  border-color: var(--champagne);
}

#welcome .event-pin {
  color: var(--champagne);
}

#welcome .event-venue a:hover,
#welcome .event-venue a:focus-visible {
  color: var(--champagne);
  border-color: var(--champagne);
}

#welcome .event-pin {
  color: var(--champagne);
}

/* Sunder Kand Path event card */
.event-card {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.event-card h2 {
  margin: 14px 0 12px;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  color: var(--plum);
}

.event-card .ornament {
  margin-bottom: 4px;
}

.event-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  color: color-mix(in srgb, var(--plum) 70%, var(--ivory));
}

.event-body {
  margin: 0 auto 20px;
  max-width: 390px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--plum) 78%, var(--ivory));
}

.event-when {
  margin: 5px 0;
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--plum) 82%, var(--ivory));
}

.event-note {
  margin: 8px 0 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--mauve);
}

.attire-note {
  margin: 0;
  padding: 11px 0px 20px 0px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--mauve);
  position: relative;
  z-index: 1;
}

/* The FloralDivider that follows every section straddles the section
   boundary and grows with viewport width (its img is sized in vw), so on
   phones its top half can grow tall enough to sit over this note's text.
   Scale the bottom padding along with it so there's always clear air
   between the sentence and the garland below it. */
@media (max-width: 480px) {
  .attire-note {
    padding-bottom: clamp(36px, 11vw, 78px);
  }
}

/* Per-event dress theme: theme name, colour line and swatch chips (replaces .attire-note on themed events) */
.dress-theme {
  margin: 0 auto;
  padding: 11px 20px 26px;
  max-width: 420px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.dress-theme-label {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--champagne);
}

.dress-theme-title {
  margin: 6px 0 2px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.4vw, 1.55rem);
  line-height: 1.25;
  color: var(--plum);
}

.dress-theme-sub {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .98rem;
  color: var(--mauve);
}

.dress-swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.dress-swatches li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.dress-swatches i {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--swatch);
  border: 2px solid var(--ivory);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--champagne) 70%, transparent),
    0 4px 10px color-mix(in srgb, var(--plum) 18%, transparent);
}

.dress-swatches span {
  font-family: var(--font-body);
  font-size: .68rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--plum) 80%, var(--ivory));
}

.event-split {
  display: block;
  width: 46px;
  height: 1px;
  margin: 26px auto 22px;
  background: color-mix(in srgb, var(--champagne) 62%, transparent);
}

.event-venue {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
}

.event-venue a {
  display: inline-flex;
  /* flex-start (not center): when the address wraps to 2-3 lines on narrow
     phones, the pin was never given its own flex line, so "center" measured
     against the whole wrapped block and centered the icon over the middle
     line instead of the first - making it look like it floats mid-sentence. */
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 7px;
  max-width: 420px;
  padding-bottom: 2px;
  color: var(--plum);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.event-venue a:hover, .event-venue a:focus-visible {
  color: var(--mauve);
  border-color: var(--mauve);
}

.event-pin {
  flex-shrink: 0;
  color: var(--mauve);
  margin-top: 2px;
}

.sunderkand-figure {
  /* width: min(1040px, calc(100% - 32px)); */
  /* margin: 0 auto; */
  /* padding: 24px 0 0; */
      background: radial-gradient(circle at 85% 25%, 
color-mix(in srgb, var(--lilac) 30%, transparent), transparent 29%), var(--ivory);
}

.sunderkand-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.mehndi-figure {
  background: radial-gradient(circle at 85% 25%,
    color-mix(in srgb, var(--lilac) 30%, transparent), transparent 29%), var(--ivory);
}

.mehndi-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.haldi-figure,
.anandkaraj-figure {
  background: radial-gradient(circle at 85% 25%,
    color-mix(in srgb, var(--lilac) 30%, transparent), transparent 29%), var(--ivory);
}

/* Bidaai time closes the Anand Karaj block, after the photo and dress theme */
.bidaai-note {
  margin: 0;
  padding: 14px 9px 28px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--mauve);
  position: relative;
  z-index: 1;
  background-color: #fcfbf6;
}

.doli-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.haldi-figure img,
.anandkaraj-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mehndi section fills with the henna-mehfil illustration; copy sits in the blank arch,
   between the top garland and the seated figures generously spaced so it fills that
   band with no dead gap above the women. */
#mehndi.welcome-section {
  background-image: url("../images/mehndi-bg.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  min-height: min(172vw, 750px);
  padding-top: clamp(46px, 11vw, 80px);
  padding-bottom: clamp(118px, 33vw, 205px);
}

#mehndi.welcome-section::before,
#mehndi.welcome-section::after {
  display: none;
}

#mehndi .event-card {
  max-width: 300px;
      margin-top: 85px;
}

#mehndi .eyebrow {
  font-size: .82rem;
  line-height: 1.5;
  margin-bottom: 2px;
  padding: 0 20px;
}

#mehndi .event-lead {
  margin-top: 5px;
  font-size: .95rem;
}

#mehndi .event-card h2 {
  font-size: clamp(1.5rem, 4vw, 2.05rem);
  line-height: 1.2;
  margin: 10px auto 10px;
  max-width: 250px;
}

#mehndi .event-card .ornament {
  margin-bottom: 10px;
}

#mehndi .event-body {
  max-width: 284px;
  font-size: .95rem;
  line-height: 1.68;
  margin-bottom: 10px;
}

#mehndi .event-when {
  font-size: 1.04rem;
  line-height: 1.6;
  margin: 4px 0;
}

#mehndi .event-venue {
  font-size: .9rem;
  margin-top: 12px;
}

/* On narrow phones (<=480px) this copy block runs long enough to spill past
   the reserved "blank arch" band and overlap the seated-women illustration
   baked into mehndi-bg.png - same underlying issue as #haldi below: the
   copy is fixed-size (rem) while the illustration scales with viewport
   width, so the narrower the phone, the sooner the women's heads arrive.
   The old 55px card margin-top alone ate most of the safe band, so it's
   cut way down here, the text stack is trimmed further, and min-height is
   raised to push the illustration's safe band down enough to clear it. */
@media (max-width: 480px) {
  #mehndi.welcome-section {
    min-height: min(196vw, 675px);
    padding-top: 90px;
    padding-bottom: clamp(155px, 38vw, 205px);
  }

  #mehndi .event-card {
    margin-top: 30px;
  }

  #mehndi .eyebrow {
    font-size: .68rem;
    line-height: 1.35;
    margin-bottom: 0;
  }

  #mehndi .event-lead {
    margin-top: 3px;
    font-size: .78rem;
  }

  #mehndi .event-card h2 {
    font-size: 1.3rem;
    line-height: 1.18;
    margin: 8px auto;
    max-width: 235px;
  }

  #mehndi .event-card .ornament {
    margin-bottom: 8px;
  }

  #mehndi .event-body {
    max-width: 250px;
    font-size: .72rem;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  #mehndi .event-when {
    font-size: .78rem;
    line-height: 1.25;
    margin: 2px 0;
  }

  #mehndi .event-venue {
    font-size: .68rem;
    line-height: 1.2;
    margin-top: 6px;
  }
}

/* Haldi section fills with the marigold-haldi illustration; copy sits in the pale-yellow
   band above the seated couple. */
#haldi.welcome-section {
  background-image: url("../images/haldi-bgd.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  min-height: min(170vw, 745px);
  padding-top: clamp(51px, 12vw, 108px);
  padding-bottom: clamp(120px, 34vw, 210px);
}

#haldi.welcome-section::before,
#haldi.welcome-section::after {
  display: none;
}

#haldi .event-card {
  max-width: 280px;
}

#haldi .event-card h2 {
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  line-height: 1.14;
  margin: 0 0 10px;
}

#haldi .event-card .ornament {
  margin-bottom: 10px;
}

#haldi .event-body {
  max-width: 250px;
  font-size: .8rem;
  line-height: 1.35;
  margin-bottom: 12px;
}

#haldi .event-when {
  font-size: .86rem;
  line-height: 1.25;
  margin: 2px 0;
}

#haldi .event-venue {
  font-size: .72rem;
  line-height: 1.22;
  margin-top: 5px;
}

/* This address is the longest of the four venue lines, so it needs the
   biggest buffer bump of the group. The copy block is fixed-size (rem, not
   vw) below 480px, while the couple photo baked into haldi-bgd.png scales
   down with viewport width - so the narrower the phone, the higher up the
   couple's heads sit relative to the text. Taller min-height pushes the
   whole illustration (and the safe band above the couple) further down to
   compensate, and the fonts/margins are trimmed on top of that so the
   copy block itself is short enough to clear the couple even at 320px. */
@media (max-width: 480px) {
  #haldi.welcome-section {
    min-height: min(220vw, 780px);
    padding-top: 40px;
    padding-bottom: clamp(172px, 42vw, 210px);
  }

  #haldi .event-card {
    max-width: 250px;
  }

  #haldi .event-card h2 {
    font-size: 1.05rem;
    line-height: 1.15;
    margin: 0 0 6px;
  }

  #haldi .event-card .ornament {
    margin-bottom: 6px;
  }

  #haldi .event-body {
    max-width: 220px;
    font-size: .64rem;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  #haldi .event-when {
    font-size: .7rem;
    line-height: 1.15;
    margin: 1px 0;
  }

  #haldi .event-venue {
    font-size: .6rem;
    line-height: 1.15;
    margin-top: 5px;
  }
}

/* Starry Night fills the section with the night-terrace photo; light maroon scrim keeps text legible */
#starry.welcome-section {
  background-image:url("../images/Starry-Night.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ivory);
  display: flex;
  align-items: flex-start;
  min-height: min(175vw, 780px);
      padding: 24px 0;
}

/* drop the champagne arc lines that the light sections use they show as stray lines on the photo */
#starry.welcome-section::before,
#starry.welcome-section::after {
  display: none;
}
#starry .event-card{
  max-width: 274px;
}
#starry .event-card h2 {
  color: var(--ivory);
  font-size: clamp(2.1rem, 5.4vw, 3.3rem);
  margin: 10px 0 10px;
}

#starry .event-lead,
#starry .event-body,
#starry .event-when {
  color: color-mix(in srgb, var(--ivory) 88%, transparent);
}

#starry .event-lead {
  font-size: .88rem;
}

#starry .event-body {
  font-size: .92rem;
  line-height: 1.55;
  margin-bottom: 16px;
}

#starry .event-when {
  font-size: 1rem;
  line-height: 1.5;
}

#starry .event-venue {
  font-size: .84rem;
}

#starry .event-venue a {
  color: var(--ivory);
}

#starry .event-venue a:hover,
#starry .event-venue a:focus-visible {
  color: var(--champagne);
  border-bottom-color: var(--champagne);
}

#starry .event-pin {
  color: var(--champagne);
}

/* On narrow phones the address line wraps onto an extra row, pushing the
   card past the safe zone the Starry-Night.jpeg art was drawn for and
   overlapping the couple/dessert-tower graphic at the bottom. Text stays
   close to the base size here - only the heading and body come down a
   touch, with extra section height doing most of the work. */
@media (max-width: 375px) {
  #starry.welcome-section {
    min-height: min(205vw, 720px);
  }

  #starry .event-card h2 {
    font-size: 25px;
    margin: 6px 0 8px;
  }

  #starry .event-lead {
    font-size: 11px;
  }

  #starry .event-body {
    font-size: 12px;
    line-height: 1.38;
    margin-bottom: 8px;
  }

  #starry .event-when {
    font-size: 12px;
    line-height: 1.3;
    margin: 2px 0;
  }

  #starry .event-venue {
    font-size: 10px;
  }
}

.signature, .closing-names {
  color: var(--mauve);
  margin-top: 26px;
  font-family: var(--font-script);
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}

.signature span, .closing-names span {
  margin: 0 5px;
  font-family: var(--font-display);
  font-size: .6em;
  font-style: italic;
}

.signature span {
  color: var(--champagne);
}

.closing-names span {
  color: var(--champagne);
}

/* ==================== DATE REVEAL / SCRATCH ==================== */

.scratch-section {
  background: #E7D3B8;
}

.scratch-section::before {
  background-size: 42px 72px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  position: absolute;
  background-image: linear-gradient(
    30deg,
    transparent 49.5%,
    color-mix(
    in srgb,
    var(--plum) 4%,
    transparent
    ) 50%,
    transparent 50.5%
    ),
    linear-gradient(
    150deg,
    transparent 49.5%,
    color-mix(
    in srgb,
    var(--plum) 4%,
    transparent
    ) 50%,
    transparent 50.5%
    );
}

.scratch-wrap {
  aspect-ratio: 1.6;
  border: 1px solid color-mix(in srgb, var(--champagne) 45%, transparent);
  margin: 0 auto;
  max-width: 650px;
  overflow: hidden;
  position: relative;
  background: var(--ivory);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--plum) 12%, transparent);
  z-index: 1;
  width: 100%;
}

.date-reveal {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  inset: 0;
  justify-content: center;
  /* keep content inside the clear window of the decorative frame overlay */
  padding: clamp(28px, 8%, 46px) clamp(40px, 16%, 108px) clamp(26px, 8%, 42px);
  position: absolute;
  text-align: center;
  color: var(--plum);
}

.date-reveal::before {
  border: 1px solid color-mix(in srgb, var(--mauve) 18%, transparent);
  border-radius: 50% 50% 4px 4px / 33% 33% 4px 4px;
  content: "";
  inset: 24px 21%;
  position: absolute;
  border-color: color-mix(
    in srgb,
    var(--champagne) 46%,
    transparent
    );
}

.date-reveal > * {
  position: relative;
  z-index: 1;
}


.date-kicker {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .28em;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--mauve);
  font-family: var(--font-body);
  line-height: 1;
  margin: 0 0 5px;
}

.date-reveal strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 4.3rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--plum);
}

.countdown {
  --cd-num: clamp(1.7rem, 8vw, 3.1rem);
  --cd-gap: clamp(7px, 2.6vw, 20px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--cd-gap);
  margin: 10px 0 0;
}

.countdown-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: clamp(36px, 11.5vw, 60px);
}

/* colon between each pair, centred in the gap and aligned to the digits */
.countdown-unit:not(:first-child)::before {
  content: ":";
  position: absolute;
  right: 100%;
  top: 0;
  width: var(--cd-gap);
  height: var(--cd-num);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: calc(var(--cd-num) * .66);
  font-weight: 700;
  line-height: 1;
  color: var(--plum);
  opacity: .38;
  pointer-events: none;
}

.countdown-value {
  font-family: var(--font-body);
  font-size: var(--cd-num);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--plum);
  opacity: .6;
}

.scratch-canvas {
  cursor: crosshair;
  height: 100%;
  inset: 0;
  position: absolute;
  touch-action: none;
  transition: opacity .7s ease, transform .8s ease;
  width: 100%;
  z-index: 3;
}

.scratch-canvas:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 4px;
}

.scratch-wrap.is-revealed {
  animation: date-celebrate .85s cubic-bezier(.2,.8,.2,1);
}

.scratch-note {
  font-family: var(--font-display);
  font-size: .9rem;
  font-style: italic;
  margin: 22px auto 0;
  text-align: center;
  color: #6F0B17;
  display: none;
}

.petal-shower {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 100;
}

.petal-shower i {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  box-shadow: 0 2px 4px
    color-mix(
    in srgb,
    var(--plum) 12%,
    transparent
    );
  transform-origin: center;
  will-change: transform, opacity;
}

/* ==================== GALLERY ==================== */

.gallery-section {
  background: var(--ivory);
}

.gallery-frame {
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  max-height: 720px;
  max-width: 920px;
  overflow: hidden;
  position: relative;
  user-select: none;
  background: var(--lilac);
  box-shadow: 0 30px 80px
    color-mix(
    in srgb,
    var(--plum) 12%,
    transparent
    );
    touch-action: pan-y;
cursor: pointer;
}

.gallery-slide {
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  transform: scale(1.035);
  transition: opacity 1.1s ease, transform 5.8s ease;
}

.gallery-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.gallery-slide img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  filter: saturate(.88)
    contrast(1.02)
    sepia(.04);
}

.gallery-slide::after {
  content: "";
  inset: 0;
  position: absolute;
  background: linear-gradient(
    to top,
    color-mix(
    in srgb,
    var(--plum) 78%,
    transparent
    ),
    transparent 42%
    );
}

.gallery-slide figcaption {
  bottom: 29px;
  font-family: var(--font-display);
  font-size: 1.13rem;
  font-style: italic;
  left: 29px;
  letter-spacing: .01em;
  position: absolute;
  z-index: 2;
  color: var(--ivory);
}

.gallery-corner {
  border-style: solid;
  height: 36px;
  position: absolute;
  width: 36px;
  z-index: 3;
  border-color: color-mix(
    in srgb,
    var(--champagne) 75%,
    transparent
    );
}

.gallery-corner-a {
  border-width: 1px 0 0 1px;
  left: 17px;
  top: 17px;
}

.gallery-corner-b {
  border-width: 0 1px 1px 0;
  bottom: 17px;
  right: 17px;
}

.gallery-dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 24px;
}

.gallery-dots button {
  background: transparent;
  border: 1px solid var(--mauve);
  border-radius: 50%;
  cursor: pointer;
  height: 7px;
  padding: 0;
  transition: background .25s, transform .25s;
  width: 7px;
}

.gallery-dots button.is-active {
  transform: scale(1.35);
  background: var(--plum);
}

/* ==================== COUNTDOWN ==================== */
/* Countdown lives inside the scratch reveal see .countdown / .countdown-unit
   near the .date-reveal rules above. The old dark full-width countdown section
   was removed from the markup, so its styles are gone too. */

/* ==================== PROGRAM ==================== */

.program-section {
  background: color-mix(
    in srgb,
    var(--lilac) 32%,
    var(--ivory)
    );
}

.timeline {
  margin: 0 auto;
  max-width: 830px;
  position: relative;
}

.timeline::before {
  bottom: 28px;
  content: "";
  left: 20px;
  position: absolute;
  top: 28px;
  width: 1px;
  background: color-mix(
    in srgb,
    var(--champagne) 58%,
    transparent
    );
}

.timeline article {
  align-items: start;
  display: grid;
  gap: 8px 17px;
  grid-template-columns: 40px 72px 1fr;
  padding: 22px 0;
  position: relative;
}

.timeline-index {
  align-items: center;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  display: flex;
  font-size: .49rem;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  letter-spacing: .1em;
  width: 40px;
  z-index: 1;
  background: color-mix(
    in srgb,
    var(--lilac) 20%,
    var(--ivory)
    );
  color: var(--mauve);
}

.timeline time {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding-top: 9px;
  text-transform: uppercase;
  color: var(--mauve);
}

.timeline h3, .event-list h3, .rsvp-success h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  margin: 3px 0 8px;
  color: var(--plum);
}

.timeline p {
  font-family: var(--font-display);
  font-size: .85rem;
  font-style: italic;
  margin: 0;
  color: color-mix(
    in srgb,
    var(--plum) 68%,
    var(--ivory)
    );
}

/* ==================== VENUE ==================== */

.venue-section {
  padding-left: 20px;
  padding-right: 20px;
  background: var(--ivory);
}

.venue-arch {
  align-items: center;
  border-radius: 48% 48% 4px 4px / 20% 20% 4px 4px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 980px;
  overflow: hidden;
  padding: 74px 26px 60px;
  position: relative;
  background: radial-gradient(
    circle at 50% 12%,
    #520B13,
    var(--plum) 53%,
    #260306
    );
  color: var(--ivory);
  box-shadow: 0 35px 90px
    color-mix(
    in srgb,
    var(--plum) 18%,
    transparent
    );
}

.venue-arch::before, .venue-arch::after {
  border: 1px solid color-mix(in srgb, var(--ivory) 18%, transparent);
  border-radius: inherit;
  content: "";
  inset: 13px;
  position: absolute;
}

.venue-arch::after {
  inset: 26px;
  border-color: color-mix(
    in srgb,
    var(--champagne) 48%,
    transparent
    );
}

.venue-inner {
  max-width: 630px;
  position: relative;
  text-align: center;
  z-index: 2;
}

.venue-inner .eyebrow {
  color: var(--champagne);
}

.venue-mark {
  display: block;
  font-size: 1.1rem;
  margin: 24px 0;
  color: var(--champagne);
}

.venue-inner h2 {
  color: var(--ivory);
  font-size: clamp(4rem, 11vw, 6.6rem);
}

.venue-inner p {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.7;
  margin: 20px auto 31px;
  max-width: 480px;
  opacity: .78;
  color: color-mix(
    in srgb,
    var(--ivory) 78%,
    transparent
    );
}

.primary-button {
  align-items: center;
  background: var(--plum);
  border: 1px solid var(--plum);
  border-radius: 0;
  color: var(--ivory);
  cursor: pointer;
  display: inline-flex;
  font-size: .62rem;
  font-weight: 700;
  gap: 24px;
  justify-content: center;
  letter-spacing: .16em;
  min-height: 50px;
  padding: 13px 20px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .25s, color .25s, transform .25s;
}

.primary-button:hover {
  transform: translateY(-2px);
}

.primary-button.light {
  background: transparent;
  border-color: color-mix(
    in srgb,
    var(--champagne) 72%,
    transparent
    );
  color: var(--ivory);
}

.primary-button.light:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--plum);
}

/* ==================== DRESS CODE ==================== */

.dress-section {
  background: linear-gradient(
    145deg,
    #E0CBB4,
    var(--lilac)
    );
}

.dress-shell {
  align-items: center;
  display: grid;
  gap: 45px;
  max-width: 960px;
}

.dress-copy {
  text-align: center;
}

.dress-copy p {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.85;
  margin: 0;
  color: color-mix(
    in srgb,
    var(--plum) 75%,
    var(--ivory)
    );
}

.palette {
  display: flex;
  justify-content: center;
}

.palette i {
  border: 4px solid #E0CBB4;
  border-radius: 50%;
  display: block;
  height: 65px;
  margin-left: -10px;
  transition: transform .3s ease;
  width: 65px;
  box-shadow: 0 5px 18px
    color-mix(
    in srgb,
    var(--plum) 18%,
    transparent
    );
}

.palette i:first-child {
  margin-left: 0;
}

.palette i:hover {
  transform: translateY(-7px);
  z-index: 2;
}

/* ==================== EVENTS ==================== */

.events-section {
  background: var(--ivory);
}

.event-list {
  display: grid;
  gap: 20px;
  margin: 0 auto;
  max-width: 320px;
}

.event-list article {
  position: relative;
  padding: 34px 28px;
  text-align: center;

  background: color-mix(
    in srgb,
    var(--lilac) 14%,
    var(--ivory)
  );

  border: 1px solid color-mix(
    in srgb,
    var(--champagne) 55%,
    transparent
  );

  box-shadow:
    0 16px 40px color-mix(
      in srgb,
      var(--plum) 8%,
      transparent
    );
}

/* subtle inner border */
.event-list article::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;

  border: 1px solid color-mix(
    in srgb,
    var(--champagne) 22%,
    transparent
  );
}

/* remove old number */
.event-list article > span {
  display: none;
}

.event-list h3 {
  position: relative;
  z-index: 1;

  margin: 0 0 14px;

  color: var(--plum);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
}

.event-list p {
  position: relative;
  z-index: 1;

  margin: 0 0 12px;

  color: var(--mauve);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.event-list small {
  position: relative;
  z-index: 1;
  display: block;

  margin-bottom: 15px;

  color: color-mix(
    in srgb,
    var(--plum) 65%,
    var(--ivory)
  );

  font-family: var(--font-display);
  font-size: .95rem;
  font-style: italic;
}

.event-map-link {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 10px 18px;

  border: 1px solid var(--champagne);

  color: var(--plum);
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    background .25s ease,
    color .25s ease;
}

.event-map-link:hover {
  background: var(--champagne);
  color: var(--plum);
}

@media (max-width: 600px) {
  .event-list {
    gap: 16px;
  }

  .event-list article {
    padding: 30px 22px;
  }
}

/* ==================== GIFTS ==================== */

.gifts-section {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(
    circle at center,
    #510B13,
    var(--plum) 58%,
    #260306
    );
  color: var(--ivory);
}
.gift-bloom {
  height: 670px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 670px;
}

.gift-bloom::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(
    in srgb,
    var(--champagne) 22%,
    transparent
  );
}

.gift-bloom::before {
  width: 72%;
  height: 72%;
}

.gift-bloom::after {
  width: 48%;
  height: 48%;
}

.gift-bloom i {
  display: none;
}

.gift-copy {
  max-width: 680px;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

.gift-copy .eyebrow {
  color: var(--champagne);
}

.gift-copy h2 {
  color: var(--ivory);
}

.gift-copy p {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.8;
  margin: 26px auto 0;
  opacity: .78;
  color: color-mix(
    in srgb,
    var(--ivory) 78%,
    transparent
    );
}

/* ==================== RSVP ==================== */

.rsvp-section {
  background: radial-gradient(
    circle at 18% 18%,
    color-mix(
    in srgb,
    var(--lilac) 34%,
    transparent
    ),
    transparent 28%
    ),
    var(--ivory);
}

.rsvp-shell {
  max-width: 880px;
}

.rsvp-form {
  display: grid;
  gap: 24px 28px;
}

.rsvp-form label {
  display: block;
}

.rsvp-form label > span {
  display: block;
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .17em;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--mauve);
}

.rsvp-form input, .rsvp-form select, .rsvp-form textarea {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 32%, transparent);
  border-radius: 0;
  outline: none;
  padding: 9px 0 12px;
  transition: border-color .25s;
  width: 100%;
  color: var(--plum);
  border-bottom-color: color-mix(
    in srgb,
    var(--champagne) 56%,
    var(--plum)
    );
}

.rsvp-form select {
  background-position: calc(100% - 6px) 50%, 100% 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  padding-right: 20px;
  background-image: linear-gradient(
    45deg,
    transparent 50%,
    var(--champagne) 50%
    ),
    linear-gradient(
    135deg,
    var(--champagne) 50%,
    transparent 50%
    );
}

.rsvp-form textarea {
  resize: vertical;
}

.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus {
  border-color: var(--mauve);
}

.rsvp-form ::placeholder {
  opacity: 1;
  color: color-mix(
    in srgb,
    var(--plum) 46%,
    var(--ivory)
    );
}

.form-wide {
  grid-column: 1 / -1;
}

.form-footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
  margin-top: 12px;
  text-align: center;
}

.form-footer p {
  font-family: var(--font-display);
  font-size: .92rem;
  font-style: italic;
  margin: 0;
  color: var(--plum);
}

.form-footer small {
  display: block;
  font-size: .67rem;
  margin-top: 2px;
  color: color-mix(
    in srgb,
    var(--plum) 62%,
    var(--ivory)
    );
}

.rsvp-success {
  margin: 0 auto;
  max-width: 610px;
  padding: 45px 25px;
  text-align: center;
}

.rsvp-success > span {
  color: var(--champagne);
}

.rsvp-success h3 {
  font-size: 2.5rem;
  margin: 15px 0;
  color: var(--plum);
}

.rsvp-success p {
  color: color-mix(in srgb, var(--plum) 68%, var(--ivory));
  font-family: var(--font-display);
}

.text-button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 3px 0;
  text-transform: uppercase;
  color: var(--mauve);
}

/* ==================== CLOSING ==================== */

.closing-section {
  --closing-maroon: #7A1F2B;
  --closing-cream: #F7F3EC;
  display: flex;
  justify-content: center;
  text-align: center;
  padding: clamp(3.25rem, 14vw, 5rem) 20px;
  /* same deep-maroon radial the old gifts section used */
  background: radial-gradient(circle at center, #510B13, var(--plum) 58%, #260306);
  color: var(--closing-cream);
}

.closing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 520px;
}

.closing-kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.62rem, 3vw, .875rem);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--closing-cream) 70%, transparent);
}

.closing-families {
  margin: clamp(.7rem, 3.4vw, 1rem) 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.25rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--closing-cream) 92%, transparent);
}

.closing-monogram {
  width: clamp(120px, 32vw, 160px);
  height: auto;
  margin-top: clamp(1.4rem, 6vw, 2rem);
}

.closing-rule {
  display: block;
  width: 56px;
  height: 1px;
  margin-top: clamp(1.4rem, 6vw, 2rem);
  background: color-mix(in srgb, var(--closing-cream) 30%, transparent);
}

.closing-date {
  margin: clamp(1.1rem, 5vw, 1.75rem) 0 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.4rem, 5.5vw, 1.875rem);
  line-height: 1;
  color: var(--closing-cream);
}

.closing-hashtag {
  margin: clamp(.9rem, 4vw, 1.25rem) 0 0;
  font-family: var(--font-body);
  font-size: clamp(.62rem, 3.2vw, .875rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--closing-cream) 60%, transparent);
}

.hero.is-open .hero-content {
  visibility: visible;
  pointer-events: auto;
  animation: hero-content-reveal 1.4s cubic-bezier(.16,.75,.25,1) 8s both;
}

::selection {
  background: var(--mauve);
  color: var(--ivory);
}

.palette i:nth-child(1) {
  background: #3A070C !important;
}

.palette i:nth-child(2) {
  background: #6F0B17 !important;
}

.palette i:nth-child(3) {
  background: #A51520 !important;
}

.palette i:nth-child(4) {
  background: #C9A35F !important;
}

.palette i:nth-child(5) {
  background: #F1E3CE !important;
}

.rsvp-section .primary-button:hover {
  background: var(--mauve);
  border-color: var(--mauve);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: var(--champagne);
}

#brideName, #groomName {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: .92;
}

@keyframes hero-content-reveal {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(.985);
    filter: blur(5px);
  }
  60% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes pulse-ring {
  70%, 100% { opacity: 0; transform: scale(2.05); }
}

@keyframes music-bar {
  to { height: 15px; }
}

@keyframes scroll-line { to { transform: translateY(38px); } }

@keyframes date-celebrate {
  40% {
    box-shadow: 0 28px 90px color-mix(in srgb, var(--mauve) 30%, transparent);
    transform: scale(1.02);
  }
}

@media (min-width: 700px) {
  .section-pad {
    padding: 90px 0;
  }

  .section-shell {
    width: min(1120px, calc(100% - 80px));
  }

  .hero-geometry {
    inset: 28px;
  }

  .hero-content {
    padding-left: 55px;
    padding-right: 55px;
  }

  .couple-names {
    grid-template-columns: 1fr auto 1fr;
  }

  .name-ampersand {
    font-size: 2.6rem;
  }

  .welcome-shell {
    grid-template-columns: .78fr 1.22fr;
    gap: 80px;
  }

  .welcome-copy {
    text-align: left;
  }

  .welcome-copy p {
    margin-left: 0;
  }

  .arch-emblem {
    max-width: 320px;
    width: 100%;
  }

  .gallery-frame {
    aspect-ratio: 16 / 10;
  }

  .gallery-slide figcaption {
    bottom: 40px;
    left: 43px;
  }

  .timeline article {
    grid-template-columns: 50px 115px 1fr;
    gap: 26px;
    padding: 27px 0;
  }

  .timeline::before {
    left: 25px;
  }

  .timeline-index {
    height: 50px;
    width: 50px;
  }

  .timeline time {
    padding-top: 13px;
  }

  .timeline h3 {
    font-size: 1.85rem;
  }

  .venue-arch {
    border-radius: 50% 50% 4px 4px / 34% 34% 4px 4px;
  }

  .dress-shell {
    grid-template-columns: 1.25fr .75fr;
    gap: 70px;
  }

  .dress-copy {
    text-align: left;
  }

  .palette {
    justify-content: flex-end;
  }

  .event-list article {
    grid-template-columns: 55px 1.1fr 1fr .9fr;
    padding: 29px 0;
  }

  .event-list p, .event-list small {
    grid-column: auto;
  }

  .event-list h3 {
    font-size: 1.8rem;
  }

  .rsvp-form {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-footer {
    flex-direction: row;
    text-align: left;
  }

  .closing-section {
    padding-left: 55px;
    padding-right: 55px;
  }
}

@media (min-width: 1000px) {
  .hero-content {
    padding-top: 112px;
  }

  .palette i {
    height: 78px;
    width: 78px;
  }
}

@media (max-height: 750px) and (min-width: 700px) {
  .hero-content {
    padding-bottom: 50px;
    padding-top: 75px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero.is-open .hero-content {
    animation: none;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 600px) {
  #brideName, #groomName {
    font-size: clamp(2.2rem, 9vw, 3.4rem);
    line-height: .92;
    white-space: nowrap;
  }

  #brideName span, #groomName span {
    display: inline;
  }

  .section-shell {
    width: min(100% - 100px, 1120px);
  }

  .hero-geometry {
    inset: 14px;
  }

  .music-toggle {
    right: 12px;
    top: 12px;
  }

  .section-heading h2, .welcome-copy h2, .dress-copy h2, .gift-copy h2 {
    font-size: clamp(2.6rem, 11vw, 3.8rem);
  }

  .venue-inner h2, .closing-section h2 {
    font-size: clamp(2.6rem, 11vw, 3.8rem);
  }

  .signature, .closing-names {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }
}

/* Outer container that holds both the frame and the scratch card */

.scratch-frame-shell {
  position: relative;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 34px;
}

/* The generated PNG frame */

.scratch-frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1.01);
  -webkit-user-drag: none;
  z-index: 3;
}

/* October 18, 2026 */

.date-main {
  color: var(--plum);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: .95;
  margin: 0 0 8px;
}

/* Sunday */

.date-day {
  color: var(--plum);
  font-family: var(--font-body);
  font-size: clamp(.96rem, 3vw, 1rem);
  font-weight: 400;
  line-height: 1;
  margin: 0 0 6px;
}

/* 07:00 PM */

.date-time {
  color: var(--plum);
  font-family: var(--font-display);
  font-size: clamp(.9rem, 2.5vw, 1.2rem);
  font-style: normal;
  font-weight: 550;
  line-height: 1;
  margin: 0;
}

#musicLabel {
  display: none;
}

.floral-divider {
  height: 0;
  position: relative;
  z-index: 10;
  pointer-events: none;
}

.floral-divider img {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(850px, 92vw);
  height: auto;
  transform: translate(-50%, -50%);
  display: block;
}

/* ==================== VENUE ==================== */

.venue-card {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  padding: 70px 32px;
  text-align: center;
  background: radial-gradient(
    circle at 50% 0%,
    color-mix(in srgb, var(--mauve) 18%, transparent),
    transparent 42%
    ),
    var(--plum);
  color: var(--ivory);
  border: 1px solid
    color-mix(
    in srgb,
    var(--champagne) 55%,
    transparent
    );
  box-shadow: 0 28px 70px
    color-mix(
    in srgb,
    var(--plum) 16%,
    transparent
    );
}

/* subtle inner border */

.venue-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid
    color-mix(
    in srgb,
    var(--champagne) 24%,
    transparent
    );
  pointer-events: none;
}

.venue-card .eyebrow {
  position: relative;
  z-index: 1;
  color: var(--champagne);
}

/* small divider */

.venue-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px auto 26px;
  color: var(--champagne);
}

.venue-divider::before, .venue-divider::after {
  content: "";
  width: 44px;
  height: 1px;
  background: color-mix(
    in srgb,
    var(--champagne) 60%,
    transparent
    );
}

.venue-divider span {
  font-size: .65rem;
}

/* Venue name */

.venue-card h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-script);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 400;
  line-height: .95;
}

/* Address */

.venue-card p {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 24px auto 32px;
  color: color-mix(
    in srgb,
    var(--ivory) 70%,
    transparent
    );
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.6;
}

/* Map button */

.venue-map-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--champagne);
  color: var(--ivory);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .25s ease,
    color .25s ease,
    transform .25s ease;
}

.venue-map-button:hover {
  background: var(--champagne);
  color: var(--plum);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .venue-card {
    padding: 56px 26px;
  }

  .venue-card h2 {
    font-size: clamp(2.4rem, 10vw, 3.6rem);
  }

  .venue-card p {
    margin-top: 20px;
    margin-bottom: 28px;
  }
}

.date-reveal::before {
  display: none;
}

.scratch-section .section-heading {
  margin-bottom: 10px;
}

.program-section {
  background: color-mix(
    in srgb,
    var(--lilac) 32%,
    var(--ivory)
  );
}

.program-section .section-heading {
  margin-bottom: 28px;
}

.timeline {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

/* vertical gold line */
.timeline::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 104px;
  width: 1px;
  background: color-mix(
    in srgb,
    var(--champagne) 65%,
    transparent
  );
}

.timeline article {
  position: relative;
  display: grid;
  grid-template-columns: 82px 1fr;
  column-gap: 58px;
  padding: 20px 0;
}

/* remove the numbers */
.timeline-index {
  display: none;
}

/* gold timeline dot */
.timeline article::before {
  content: "";
  position: absolute;
  left: 104px;
  top: 24px;

  width: 9px;
  height: 9px;

  background: var(--champagne);
  border: 3px solid color-mix(
    in srgb,
    var(--lilac) 32%,
    var(--ivory)
  );

  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.timeline time {
  grid-column: 1;
  padding-top: 5px;

  color: var(--mauve);
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: right;
  text-transform: uppercase;
}

/* assumes h3 + p are inside the event content */
.timeline h3 {
  color: var(--plum);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4vw, 1.9rem);
  font-weight: 400;
  line-height: 1;
  margin: 0 0 8px;
}

.timeline p {
  color: color-mix(
    in srgb,
    var(--plum) 60%,
    var(--ivory)
  );
  font-family: var(--font-display);
  font-size: .8rem;
  font-style: italic;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 600px) {
  .timeline {
    max-width: 100%;
  }

  .timeline::before {
    left: 86px;
  }

  .timeline article {
    grid-template-columns: 66px 1fr;
    column-gap: 58px;
    padding: 18px 0;
  }

  .timeline article::before {
    left: 86px;
  }

  .timeline h3 {
    font-size: 1.45rem;
  }
}

/* =========================
   NAQSH PREVIEW UI
========================= */

.naqsh-demo-badge {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 9998;

  padding: 8px 13px;
  border-radius: 999px;

  background: rgba(20, 20, 20, 0.72);
  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  pointer-events: none;
}


/* FLOATING CTA */

.naqsh-preview-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;

  border: none;
  border-radius: 999px;

  padding: 14px 21px;

  background: #111;
  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;

  cursor: pointer;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.naqsh-preview-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
}


/* MODAL */

.naqsh-cta-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 22px;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.naqsh-cta-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.naqsh-cta-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


/* MODAL CARD */

.naqsh-cta-card {
  position: relative;
  z-index: 1;

  width: min(390px, 100%);
  padding: 38px 28px 28px;

  border-radius: 22px;

  background: #f8f5ef;
  color: #171717;

  text-align: center;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);

  transform: translateY(15px) scale(0.97);

  transition: transform 0.3s ease;
}

.naqsh-cta-modal.is-open .naqsh-cta-card {
  transform: translateY(0) scale(1);
}


.naqsh-cta-close {
  position: absolute;
  top: 12px;
  right: 15px;

  width: 34px;
  height: 34px;

  border: none;
  background: transparent;

  color: #222;
  font-size: 25px;
  line-height: 1;

  cursor: pointer;
}


.naqsh-cta-eyebrow {
  display: block;
  margin-bottom: 12px;

  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.22em;
}


.naqsh-cta-card h3 {
  margin: 0 0 12px;

  font-size: 28px;
  font-weight: 500;
}


.naqsh-cta-card p {
  margin: 0 auto 25px;

  max-width: 310px;

  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.65;

  color: #666;
}


/* INSTAGRAM BUTTON */

.naqsh-instagram-btn {
  display: block;

  padding: 14px 20px;
  

  border-radius: 999px;

  background: #111;
  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;

  text-decoration: none;

  transition: transform 0.2s ease;
}

.naqsh-instagram-btn:hover {
  transform: translateY(-1px);
}


/* MOBILE */

@media (max-width: 600px) {
  .naqsh-demo-badge {
    top: 12px;
    left: 12px;

    padding: 7px 11px;

    font-size: 9px;
  }

  .naqsh-preview-cta {
    right: 14px;
    bottom: 14px;

    padding: 13px 18px;

    font-size: 12px;
  }

  .naqsh-cta-card {
    padding: 36px 22px 24px;
  }
}

.naqsh-demo-badge {
    display: none;
    
}