/* =========================================================
   Namita & Kabir · Save the Date
   ========================================================= */

:root {
  --cream: #f3e7dc;
  --cream-deep: #eddacb;
  --cream-soft: #f8f0e7;
  --line: #d9c4ad;
  --gold: #b48a44;
  --gold-soft: #cfa96a;
  --brown: #4d3627;
  --brown-soft: #7a604d;
  --rose: #b8485f;
  --mauve: #d9c5c8;
  --peach: #f6dcc2;
  --peach-deep: #f8d5b5;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --nav-h: 72px;
  --container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--brown);
  background: var(--cream-deep);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }

/* ---------- Type ---------- */
.eyebrow, .hero__date, .hero__venue, .arch__date, .event__date, .btn, .nav__links a, .countdown span {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 400;
}
h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
}
h3 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.85rem;
  font-weight: 500;
}
.lede {
  max-width: 560px;
  margin: 0.9rem auto 0;
  font-size: 1.02rem;
  color: var(--brown-soft);
}
.amp { font-family: var(--script); }

/* ---------- Layout ---------- */
.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.container--narrow { max-width: 760px; }
.section { position: relative; padding: clamp(72px, 9vw, 120px) 0; }
.section__head { text-align: center; margin-bottom: clamp(40px, 6vw, 64px); }
.center { text-align: center; }
.motif { width: 20px; height: 20px; color: var(--rose); margin: 0 auto 18px; display: block; }
.ornament { color: var(--rose); margin: 22px auto 18px; display: flex; justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.7rem; letter-spacing: 0.28em;
  padding: 14px 30px; border-radius: 999px;
  cursor: pointer; text-decoration: none; background: transparent;
  color: var(--brown); border: 1px solid var(--brown-soft);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.btn--lg { padding: 18px 44px; font-size: 0.74rem; }
.btn .arrow { font-family: var(--serif); font-size: 1.1em; letter-spacing: 0; }
.textlink { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.textlink:hover { border-color: var(--brown); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 92%, white);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  width: min(100% - 32px, 1240px); margin-inline: auto;
  height: var(--nav-h); display: flex; align-items: center; gap: 32px;
}
.nav__logo {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.25em;
  text-decoration: none; color: var(--brown); display: flex; align-items: center; gap: 6px;
}
.nav__logo span { font-weight: 300; color: var(--brown-soft); }
.nav__links { display: flex; gap: clamp(18px, 3vw, 44px); margin-left: 24px; }
.nav__links a { font-size: 0.66rem; letter-spacing: 0.26em; text-decoration: none; color: var(--brown); opacity: .85; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__links-cta { display: none; }
.nav__cta { margin-left: auto; font-size: 0.62rem; padding: 11px 24px; }
.nav__burger {
  display: none; margin-left: auto; width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer; padding: 8px;
  flex-direction: column; justify-content: center; gap: 6px;
}
.nav__burger span { display: block; height: 1px; background: var(--brown); transition: transform .3s, opacity .3s; }

/* ---------- Intro curtain ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: linear-gradient(180deg, #d8c3c7 0%, #e8d0c7 30%, #f3d9c3 58%, var(--peach-deep) 100%);
  transition: opacity 1.2s ease 1.6s;
}
.intro-skip .intro, .intro.is-done { display: none; }
body.is-intro { overflow: hidden; }
.intro__blooms { position: absolute; inset: 0; }

/* Each bloom is a soft-edged flower cluster; --dx/--dy point away from the screen centre */
.intro__bloom {
  position: absolute; overflow: hidden;
  left: var(--cx); top: var(--cy); width: var(--w); height: var(--h);
  transform: translate(-50%, -50%) scale(1.04);
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 62%, transparent 100%);
  transition: transform 2.8s cubic-bezier(.55, 0, .7, .55), opacity 2.4s ease .5s;
  will-change: transform, opacity;
}
.intro__bloom img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.intro__bloom--flip img { transform: scaleX(-1); }
.intro.is-open .intro__bloom {
  transform: translate(calc(-50% + var(--dx) * 80vw), calc(-50% + var(--dy) * 80vh)) scale(1.8);
  opacity: 0;
}
.intro.is-open { opacity: 0; }

/* LED string lights */
.intro__lights {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  transition: transform 2.8s cubic-bezier(.55, 0, .7, .55), opacity 1.8s ease .3s;
}
.intro.is-open .intro__lights { transform: scale(1.5); opacity: 0; }
.intro__lights svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.intro__lights path {
  fill: none; stroke: rgba(70, 40, 30, .55); stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.led {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff8e6 0%, #ffe3a3 45%, #f7b955 100%);
  box-shadow:
    0 0 4px 1px rgba(255, 236, 190, .95),
    0 0 12px 4px rgba(255, 205, 120, .6),
    0 0 26px 9px rgba(255, 175, 80, .28);
  animation: led-twinkle var(--dur, 2.4s) ease-in-out var(--delay, 0s) infinite alternate;
}
.led--sm { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.led--lg { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
@keyframes led-twinkle {
  0%   { opacity: .45; transform: scale(.85); }
  100% { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .led { animation: none; }
}

/* ---------- Hero: one full illustrated scene with the text set into the sky ---------- */
.hero { position: relative; background: var(--cream); border-top: 1px solid #c9a98b; }
.hero__scene { position: relative; overflow: hidden; background: #f3d9c3; }
.hero__img { display: block; width: 100%; height: auto; }
.hero__content {
  position: absolute; left: 50%; top: 19%; transform: translateX(-50%);
  z-index: 2; width: min(92%, 720px); text-align: center;
}
.hero .eyebrow { font-size: clamp(0.62rem, 1.1vw, 0.84rem); letter-spacing: 0.42em; margin: 0 0 0.7em; }
.hero__names {
  font-family: var(--script); font-weight: 400;
  font-size: clamp(2.4rem, 7.4vw, 6.2rem); line-height: 1.05;
  color: var(--gold); margin-bottom: 0.22em;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.hero__date { font-size: clamp(0.66rem, 1.3vw, 1rem); letter-spacing: 0.38em; margin: 0; }
.hero__venue { font-size: clamp(0.66rem, 1.3vw, 1rem); letter-spacing: 0.38em; margin: 0.3em 0 0; }
.hero .ornament { margin: 1.3vw auto 1vw; }
.hero__tagline { margin: 0; font-size: clamp(0.6rem, 1.05vw, 0.84rem); letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.9; }

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

/* Countdown ribbon under the scene */
.hero__band {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px clamp(28px, 6vw, 72px);
  padding: 22px 16px; background: var(--cream);
  border-top: 1px solid #c9a98b; border-bottom: 1px solid var(--line);
}
.countdown { display: flex; justify-content: center; gap: clamp(18px, 4vw, 40px); margin: 0; }
.countdown div { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.countdown b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1; }
.countdown span { font-size: 0.56rem; letter-spacing: 0.26em; margin-top: 6px; color: var(--brown-soft); }

.hero__scroll { display: inline-flex; color: var(--brown-soft); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }


/* ---------- Weekend ---------- */
/* A note from us: slim ornamental strip between the hero and the weekend */
.notice {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(26px, 3.4vw, 40px) 16px;
}
.notice__inner {
  max-width: 720px; margin: 0 auto; text-align: center;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 14px;
}
.notice__rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.notice__rule + .notice__motif + .notice__rule { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.notice__motif { width: 16px; height: 16px; color: var(--gold); }
.notice__text {
  grid-column: 1 / -1; margin: 14px 0 0;
  font-family: var(--serif); font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--brown);
}
.notice__text em { font-style: italic; color: var(--gold); }

.weekend { background: var(--cream-deep); overflow: hidden; }
/* Flex so that guests invited to one or two events still get centred cards */
.arches {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(28px, 4vw, 56px); margin-bottom: clamp(44px, 6vw, 72px);
}
.arch { text-decoration: none; text-align: center; display: block; flex: 1 1 0; min-width: 220px; max-width: 360px; }
.arch__frame {
  position: relative; width: min(100%, 260px); margin: 0 auto 26px;
  aspect-ratio: 220 / 246;
  border-radius: 50% 50% 14px 14px / 42% 42% 14px 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--gold-soft), 0 0 0 6px var(--cream-deep), 0 0 0 7px var(--line);
  transition: transform .4s ease;
}
.arch:hover .arch__frame { transform: translateY(-4px); }
.arch__frame img { width: 100%; height: 100%; object-fit: cover; }
.arch__date { font-size: 0.72rem; letter-spacing: 0.3em; margin: 0 0 4px; }
.arch__title { margin: 0 0 10px; }
.arch__desc { margin: 0 auto; max-width: 260px; font-size: 0.93rem; color: var(--brown-soft); }

.floral { position: absolute; pointer-events: none; z-index: 0; }
.floral--bl, .floral--rl, .floral--pl {
  left: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 100%), linear-gradient(to top, #000 50%, transparent 100%);
  mask-image: linear-gradient(to right, #000 45%, transparent 100%), linear-gradient(to top, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.floral--br, .floral--rr, .floral--pr {
  right: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%), linear-gradient(to top, #000 50%, transparent 100%);
  mask-image: linear-gradient(to left, #000 45%, transparent 100%), linear-gradient(to top, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.floral--bl { width: clamp(150px, 22vw, 300px); }
.floral--br { width: clamp(140px, 20vw, 270px); }

/* ---------- Story ---------- */
.proposal {
  background: var(--cream-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; padding-top: clamp(120px, 13vw, 170px);
}
.proposal__inner { position: relative; z-index: 1; }
.proposal .eyebrow { margin-bottom: 14px; }
.proposal__script { font-family: var(--script); font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1; color: var(--gold); margin: 2px 0 14px; }
.proposal .lede { max-width: 520px; margin-inline: auto; }
.proposal__frame {
  position: relative; max-width: 520px; margin: 0 auto;
  aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 50% 50% 16px 16px / 28% 28% 16px 16px;
  box-shadow: 0 0 0 1px var(--gold-soft), 0 0 0 8px var(--cream-soft), 0 0 0 9px var(--line), 0 24px 60px -30px rgba(74, 45, 30, .45);
}
.proposal__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.proposal__caption {
  text-align: center; margin: 30px 0 0; font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brown-soft);
}
.proposal__caption .dot { color: var(--gold); margin: 0 4px; }
.floral--pl { left: 0; bottom: 0; width: clamp(140px, 20vw, 280px); }
.floral--pr { right: 0; bottom: 0; width: clamp(130px, 18vw, 250px); }
.rsvp__gifts { margin: 30px auto 0; max-width: 460px; font-size: 0.82rem; line-height: 1.7; color: var(--brown-soft); border-top: 1px solid var(--line); padding-top: 18px; }

/* ---------- Events ---------- */
.event-list { display: grid; gap: 22px; }
.event { background: var(--cream-soft); border: 1px solid var(--line); }
.event__row {
  display: grid; grid-template-columns: 210px 1fr auto; align-items: center; gap: 24px;
  width: 100%; text-align: left; background: none; border: 0; padding: 0 24px 0 0;
  cursor: pointer; color: inherit; font: inherit;
}
.event__img { width: 210px; height: 118px; object-fit: cover; }
.event__date { font-size: 0.7rem; letter-spacing: 0.26em; margin: 0 0 6px; color: var(--brown-soft); }
.event__title { margin: 0; }
.event__plus { position: relative; width: 26px; height: 26px; border: 1px solid var(--brown-soft); border-radius: 50%; flex: none; }
.event__plus::before, .event__plus::after {
  content: ""; position: absolute; background: var(--brown); left: 50%; top: 50%; transform: translate(-50%, -50%);
  transition: transform .3s;
}
.event__plus::before { width: 11px; height: 1px; }
.event__plus::after { width: 1px; height: 11px; }
.event__row[aria-expanded="true"] .event__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.event__body { padding: 8px 24px 26px 24px; border-top: 1px solid var(--line); }
.event__body dl { display: grid; gap: 10px; margin: 18px 0; padding: 0; }
.event__body dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.event__body dt { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brown-soft); padding-top: 4px; }
.event__body dd { margin: 0; font-size: 0.97rem; }
.event__body p { margin: 0; color: var(--brown-soft); font-size: 0.97rem; }

/* ---------- Travel ---------- */
.travel { background: var(--cream-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { border: 1px solid var(--line); padding: 34px 30px; background: var(--cream); }
.card h3 { margin-bottom: 14px; color: var(--gold); }
.card p { margin: 0 0 14px; font-size: 0.97rem; color: var(--brown-soft); }
.card strong { font-weight: 500; color: var(--brown); }

/* ---------- FAQ ---------- */
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--serif); font-size: 1.25rem; font-weight: 500;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-weight: 300; font-size: 1.4rem; color: var(--brown-soft);
  transition: transform .3s;
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list p { margin: 0 0 24px; color: var(--brown-soft); max-width: 640px; }

/* ---------- RSVP ---------- */
.rsvp { overflow: hidden; background: var(--cream-deep); text-align: center; }
.rsvp__frame {
  position: relative; z-index: 1; max-width: 560px; margin-inline: auto; padding: 56px 28px 48px;
  border: 1px solid var(--gold-soft);
  border-radius: 50% 50% 18px 18px / 30% 30% 18px 18px;
  background: color-mix(in srgb, var(--cream-deep) 70%, transparent);
}
.rsvp .btn { margin-top: 28px; }
.rsvp__note { margin: 18px 0 0; font-size: 0.8rem; color: var(--brown-soft); letter-spacing: 0.06em; }
.floral--rl { width: clamp(110px, 14vw, 200px); }
.floral--rr { width: clamp(130px, 16vw, 230px); }

/* ---------- Footer ---------- */
.footer { text-align: center; padding: 56px 16px 40px; border-top: 1px solid var(--line); background: var(--cream); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; }
.footer__names { font-family: var(--script); font-size: 2.4rem; color: var(--gold); text-transform: none; letter-spacing: 0; margin: 0 0 8px; }
.footer p { margin: 6px 0; }
.footer__small { color: var(--brown-soft); margin-top: 20px; font-size: 0.66rem; }
.footer__small a { text-decoration: none; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .arches { gap: 20px; }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .nav__links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 18px 24px; border-top: 1px solid var(--line); font-size: 0.72rem; }
  .nav__links-cta { display: block; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Phones: the full-height scene has room in the sky, so the text sits in it like the mock.
     Sizes are in vw so the block scales with the picture at every phone width. */
  .hero__content { top: 18%; width: 92%; }
  .hero__names { font-size: 9.2vw; margin-bottom: 0.18em; }
  .hero .eyebrow { font-size: 2.6vw; letter-spacing: 0.38em; margin-bottom: 0.6em; }
  .hero__date, .hero__venue { font-size: 2.75vw; letter-spacing: 0.3em; }
  .hero__venue { margin-top: 0.35em; }
  .hero__tagline { font-size: 2.45vw; letter-spacing: 0.24em; line-height: 1.8; }
  .hero .ornament { margin: 2.2vw auto 1.8vw; }
  .hero .ornament svg { width: 3.6vw; height: 3.6vw; }
  .countdown { gap: 16px; }

  .arches { gap: 44px; }
  .arch { flex-basis: 100%; max-width: 420px; }
  .floral--bl, .floral--br { width: 30vw; }

  .event__row { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .event__img { width: 100%; height: 170px; }
  .event__meta { padding: 18px 20px 0; }
  .event__plus { position: absolute; right: 20px; bottom: 22px; }
  .event { position: relative; }
  .event__row { padding-bottom: 20px; }
  .event__body dl div { grid-template-columns: 1fr; gap: 2px; }

  .rsvp { padding-bottom: 150px; }
  .rsvp__frame { border-radius: 50% 50% 14px 14px / 22% 22% 14px 14px; padding: 48px 20px 40px; background: var(--cream-deep); }
  .floral--rl { width: 30vw; }
  .floral--rr { width: 32vw; }
}

/* ---------- Password gate (sits on top of the closed flower curtain) ---------- */
.gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: transparent;
  transition: opacity .5s ease, visibility .5s;
}
@media (prefers-reduced-motion: reduce) {
  .gate { background: linear-gradient(180deg, #d8c3c7 0%, #e8d0c7 30%, #f3d9c3 58%, var(--peach-deep) 100%); }
}
.gate.is-open { opacity: 0; visibility: hidden; }
.gate-skip .gate { display: none; }
body.is-gated { overflow: hidden; }
.gate__card {
  width: min(100%, 440px); text-align: center; padding: 52px 32px 44px;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 24px 60px rgba(77, 54, 39, .18);
  border-radius: 50% 50% 18px 18px / 26% 26% 18px 18px;
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: blur(6px);
}
.gate__names { font-family: var(--script); font-size: clamp(2.4rem, 7vw, 3.2rem); color: var(--gold); margin: 6px 0 10px; }
.gate__hint { margin: 0 0 24px; color: var(--brown-soft); font-size: 0.95rem; }
.gate .field { text-align: left; }
.gate .btn { margin-top: 24px; }

/* ---------- Forms ---------- */
.field { display: block; text-align: left; margin: 0 0 22px; }
.field span {
  display: block; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brown-soft); margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--brown);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 8px 2px; border-radius: 0; outline: none; transition: border-color .25s;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--brown-soft) 55%, transparent); }
.field--short { max-width: 320px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
  font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brown-soft); margin-bottom: 8px; padding: 0;
}
.rsvp__form { margin-top: 32px; }
.rsvp__form .btn { margin-top: 8px; }
.form__msg { min-height: 1.4em; margin: 18px 0 0; font-size: 0.86rem; letter-spacing: 0.04em; color: var(--brown-soft); }
.form__msg.is-error { color: var(--rose); }
.form__msg.is-ok { color: var(--gold); font-weight: 400; }
.btn:disabled { opacity: .55; cursor: wait; }
.rsvp__greeting { margin: 0 0 26px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--brown); }
.field span em { font-style: normal; text-transform: none; letter-spacing: 0.04em; opacity: .8; }
.rsvp__back { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: var(--sans); color: var(--brown-soft); margin-top: 22px; padding-left: 0; padding-right: 0; }

/* ---------- RSVP: petals + bougainvillea cascades (same artwork as the hero corners) ---------- */
.rsvp { padding-top: clamp(120px, 13vw, 170px); }
.rsvp__petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.cascade {
  position: absolute; top: -2px; z-index: 0; pointer-events: none; overflow: hidden;
  width: clamp(180px, 21vw, 330px);   /* height follows the artwork so the bottom fade lands on its edge */
  transform-origin: 50% 0;
  animation: cascade-sway 9s ease-in-out infinite alternate;
  /* fade toward the centre of the page and toward the bottom so it melts into the section */
  -webkit-mask-image: linear-gradient(to left, #000 48%, transparent 100%), linear-gradient(to top, transparent 0%, #000 24%);
  mask-image: linear-gradient(to left, #000 48%, transparent 100%), linear-gradient(to top, transparent 0%, #000 24%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.cascade img { display: block; width: 104%; height: auto; }   /* 104%: the outer 4% carries a frame line from the mock */
.cascade--right { right: 0; }
.cascade--left  { left: 0; transform: scaleX(-1); animation-name: cascade-sway-flipped; animation-delay: -4.5s; }
@keyframes cascade-sway         { from { transform: rotate(-.7deg); }          to { transform: rotate(.7deg); } }
@keyframes cascade-sway-flipped { from { transform: scaleX(-1) rotate(-.7deg); } to { transform: scaleX(-1) rotate(.7deg); } }
@media (max-width: 640px) {
  .rsvp, .proposal { padding-top: 110px; }
  .proposal .cascade { width: 30vw; height: 300px; }
  .proposal .section__head { background: color-mix(in srgb, var(--cream-soft) 86%, transparent); border-radius: 18px; padding: 8px 10px 14px; backdrop-filter: blur(2px); }
  .cascade { width: 36vw; }
  .rsvp__frame { background: color-mix(in srgb, var(--cream-deep) 93%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .cascade { animation: none; }
  .cascade--left { transform: scaleX(-1); }
  .rsvp__petals { display: none; }
}