:root {
  --cream: #fbf7f0;
  --ivory: #fffdf8;
  --beige: #efe4d4;
  --sand: #e2d3bd;
  --gold: #b8945f;
  --gold-deep: #9a7544;
  --gold-soft: rgba(184, 148, 95, 0.18);
  --ink: #2f281f;
  --ink-soft: #5c5246;
  --muted: #8a7f70;
  --line: rgba(184, 148, 95, 0.28);
  --shadow: 0 18px 50px rgba(47, 40, 31, 0.08);
  --shadow-soft: 0 8px 28px rgba(47, 40, 31, 0.06);
  --radius: 22px;
  --radius-sm: 14px;
  --font-display: "Great Vibes", cursive;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Manrope", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --section-space: clamp(4.5rem, 10vw, 7.5rem);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  background:
    radial-gradient(ellipse at top, rgba(255, 253, 248, 0.9), transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--ivory) 40%, var(--beige) 100%);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

body.intro-active {
  height: 100svh;
  overflow: hidden;
}

/* ========== Envelope intro ========== */
.envelope-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.envelope-intro__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 253, 247, 0.96), transparent 46%),
    radial-gradient(circle at 12% 18%, rgba(132, 143, 112, 0.13), transparent 27%),
    radial-gradient(circle at 88% 82%, rgba(184, 148, 95, 0.2), transparent 31%),
    linear-gradient(135deg, #f8f0e4 0%, #fffdf8 48%, #e8d6bd 100%);
}

.envelope-intro__backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  pointer-events: none;
}

.envelope-intro__backdrop::after {
  content: "";
  position: absolute;
  inset: clamp(14px, 3vw, 32px);
  border: 1px solid rgba(154, 117, 68, 0.3);
  box-shadow:
    inset 0 0 0 5px rgba(255, 253, 248, 0.5),
    inset 0 0 70px rgba(184, 148, 95, 0.05);
  pointer-events: none;
}

.envelope-intro__glow {
  position: absolute;
  width: min(82vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 250, 238, 0.62);
  filter: blur(90px);
  animation: envelopeGlow 4s ease-in-out infinite;
}

.envelope-intro__stage {
  position: relative;
  z-index: 1;
  width: min(88vw, 560px);
  padding: 2rem 0;
  text-align: center;
  perspective: 1200px;
  animation: envelopeEntrance 1s var(--ease) both;
}

.envelope-intro__stage::before,
.envelope-intro__stage::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(90px, 20vw, 150px);
  height: min(58vh, 390px);
  opacity: 0.38;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23a9824f' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M104 286C83 241 76 201 79 159C82 114 71 72 42 22'/%3E%3Cpath d='M79 224C55 212 35 193 20 169M79 185C98 168 108 148 111 125M78 145C55 132 40 112 32 88M70 103C88 87 96 68 96 46M57 64C41 57 29 44 20 27'/%3E%3Cg fill='%23b8945f' fill-opacity='.15'%3E%3Cellipse cx='44' cy='203' rx='20' ry='7' transform='rotate(38 44 203)'/%3E%3Cellipse cx='98' cy='158' rx='18' ry='6' transform='rotate(-55 98 158)'/%3E%3Cellipse cx='49' cy='121' rx='18' ry='6' transform='rotate(42 49 121)'/%3E%3Cellipse cx='88' cy='77' rx='16' ry='5' transform='rotate(-55 88 77)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transform: translateY(-50%);
}

.envelope-intro__stage::before {
  right: calc(100% - 28px);
}

.envelope-intro__stage::after {
  left: calc(100% - 28px);
  transform: translateY(-50%) scaleX(-1);
}

.envelope {
  position: relative;
  width: min(86vw, 520px);
  aspect-ratio: 1.55;
  margin-inline: auto;
  filter:
    drop-shadow(0 28px 38px rgba(78, 57, 36, 0.2))
    drop-shadow(0 4px 8px rgba(154, 117, 68, 0.12));
  transform-style: preserve-3d;
}

.envelope__back {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(154, 117, 68, 0.38);
  border-radius: 8px;
  background:
    radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.48), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 48%),
    #e7d2b2;
  box-shadow:
    inset 0 0 0 7px rgba(255, 249, 237, 0.2),
    inset 0 -16px 28px rgba(143, 103, 60, 0.08);
}

.envelope__back::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(184, 148, 95, 0.28);
  border-radius: 3px;
}

.envelope__front {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 7px;
  background:
    linear-gradient(25deg, rgba(255, 255, 255, 0.3), transparent 45%),
    #ead7b9;
  clip-path: polygon(0 0, 50% 51%, 100% 0, 100% 100%, 0 100%);
}

.envelope__front::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 520 330' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23a9824f' stroke-width='1.2' stroke-linecap='round' opacity='.5'%3E%3Cpath d='M18 314C61 291 89 264 110 226M34 303C28 278 31 255 43 235M60 289C52 269 53 248 64 227M86 265C79 244 82 223 96 205M502 314C459 291 431 264 410 226M486 303C492 278 489 255 477 235M460 289C468 269 467 248 456 227M434 265C441 244 438 223 424 205'/%3E%3Cg fill='%23b8945f' fill-opacity='.2' stroke='none'%3E%3Cellipse cx='40' cy='267' rx='17' ry='6' transform='rotate(-65 40 267)'/%3E%3Cellipse cx='76' cy='252' rx='17' ry='6' transform='rotate(-52 76 252)'/%3E%3Cellipse cx='480' cy='267' rx='17' ry='6' transform='rotate(65 480 267)'/%3E%3Cellipse cx='444' cy='252' rx='17' ry='6' transform='rotate(52 444 252)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    linear-gradient(160deg, #f5e8d3, #ead5b5);
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}

.envelope__flap {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 7px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.42), transparent 42%),
    repeating-linear-gradient(25deg, rgba(154, 117, 68, 0.025) 0 1px, transparent 1px 7px),
    #dfc6a1;
  clip-path: polygon(0 0, 100% 0, 50% 54%);
  transform-origin: 50% 0;
  backface-visibility: hidden;
  filter: drop-shadow(0 2px 1px rgba(119, 83, 47, 0.12));
}

.wax-seal {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 7;
  width: clamp(66px, 15vw, 82px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  color: #f3dfba;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28), transparent 15%),
    radial-gradient(circle, #a35e4d 0 56%, #824236 58% 100%);
  box-shadow:
    0 7px 15px rgba(72, 35, 27, 0.28),
    inset 0 0 0 4px rgba(255, 222, 178, 0.14),
    inset 0 -5px 8px rgba(73, 28, 24, 0.25);
  transform: translate(-50%, -50%);
  cursor: pointer;
  animation: sealPulse 2.2s ease-in-out infinite;
}

.wax-seal::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(243, 223, 186, 0.5);
  border-radius: 50%;
}

.wax-seal span {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  font-weight: 400;
  letter-spacing: 0;
}

.wax-seal:focus-visible {
  outline: 3px solid rgba(154, 117, 68, 0.45);
  outline-offset: 6px;
}

.envelope-intro__hint {
  position: relative;
  width: fit-content;
  margin: 2.4rem auto 0;
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  font-style: italic;
  animation: hintFade 2.2s ease-in-out infinite;
}

.envelope-intro__hint::before,
.envelope-intro__hint::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(26px, 7vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154, 117, 68, 0.6));
}

.envelope-intro__hint::before {
  right: calc(100% + 14px);
}

.envelope-intro__hint::after {
  left: calc(100% + 14px);
  transform: rotate(180deg);
}

.envelope-intro.is-opening {
  pointer-events: none;
  animation: envelopeIntroExit 0.01s linear 1.95s forwards;
}

.envelope-intro.is-opening .envelope-intro__backdrop,
.envelope-intro.is-opening .envelope-intro__glow {
  animation: backdropReveal 1.95s linear forwards;
}

.envelope-intro.is-opening .envelope__flap {
  animation: flapFlyLeft 1.85s var(--ease) forwards;
}

.envelope-intro.is-opening .envelope__back {
  animation: envelopeFlyLeft 1.85s var(--ease) 0.1s forwards;
}

.envelope-intro.is-opening .envelope__front {
  animation: envelopeFlyRight 1.85s var(--ease) 0.1s forwards;
}

.envelope-intro.is-opening .wax-seal {
  animation: sealBreak 0.35s var(--ease) forwards;
}

.envelope-intro.is-opening .envelope-intro__hint {
  transition: opacity 0.5s ease;
  opacity: 0;
}

.envelope-intro.is-opening .envelope-intro__stage::before,
.envelope-intro.is-opening .envelope-intro__stage::after {
  animation: backdropReveal 1.2s linear forwards;
}

@keyframes envelopeEntrance {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes envelopeGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 0.85; transform: scale(1.06); }
}

@keyframes sealPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes hintFade {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}

@keyframes flapFlyLeft {
  0% { transform: rotateX(0) translate(0); }
  35% { transform: rotateX(180deg) translate(0); }
  100% { transform: rotateX(180deg) translate(-80vw, -18vh) rotateZ(-12deg); }
}

@keyframes envelopeFlyLeft {
  to {
    opacity: 0;
    transform: translateX(-110vw) rotate(-10deg);
  }
}

@keyframes envelopeFlyRight {
  to {
    opacity: 0;
    transform: translateX(110vw) rotate(10deg);
  }
}

@keyframes backdropReveal {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes sealBreak {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(8deg); }
}

@keyframes envelopeIntroExit {
  to { opacity: 0; visibility: hidden; }
}

.container {
  width: min(1120px, calc(100% - 2.5rem));
  margin-inline: auto;
}

.container--narrow {
  width: min(640px, calc(100% - 2.5rem));
}

.section {
  padding-block: var(--section-space);
  position: relative;
}

.section__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.section__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

.section__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.section__lead {
  margin: 1rem auto 0;
  max-width: 36ch;
  color: var(--ink-soft);
  font-weight: 300;
}

/* Progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 100;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transform-origin: left;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.1rem;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.btn--gold {
  background: linear-gradient(135deg, #c9a56f, var(--gold-deep));
  color: #fffdf8;
  box-shadow: 0 12px 28px rgba(154, 117, 68, 0.28);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(154, 117, 68, 0.36);
}

.btn--outline {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-deep);
}

.btn--outline:hover {
  background: var(--gold-soft);
  transform: translateY(-2px);
}

.btn--full {
  width: 100%;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ========== Hero ========== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fffdf8;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: heroZoom 18s ease-out forwards;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 22, 16, 0.45) 0%, rgba(28, 22, 16, 0.55) 45%, rgba(28, 22, 16, 0.72) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: 2rem 1.25rem 5rem;
  max-width: 820px;
}

.hero__eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.88;
  font-weight: 400;
}

.hero__names {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 10vw, 6.4rem);
  font-weight: 400;
  line-height: 1.05;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.hero__date {
  margin: 0.85rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__divider {
  width: 72px;
  height: 1px;
  margin: 1.1rem auto;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 248, 0.85), transparent);
  position: relative;
}

.hero__divider::before,
.hero__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f0d7a8;
  transform: translateY(-50%);
}

.hero__divider::before { left: -10px; }
.hero__divider::after { right: -10px; }

.hero__place {
  margin: 0 0 1.6rem;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.3vw, 1.4rem);
  font-style: italic;
  opacity: 0.92;
}

.hero .btn--gold {
  animation: softPulse 3.2s ease-in-out infinite;
}

.hero__scroll {
  position: absolute;
  bottom: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: #fffdf8;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.hero__scroll:hover {
  opacity: 0.78;
}

.hero__scroll-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero__scroll-arrows {
  position: relative;
  width: 22px;
  height: 24px;
}

.hero__scroll-arrow {
  position: absolute;
  left: 6px;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0;
  animation: scrollChevron 1.8s var(--ease) infinite;
}

.hero__scroll-arrow:nth-child(2) {
  animation-delay: 0.3s;
}

@keyframes heroZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@keyframes softPulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(154, 117, 68, 0.28); }
  50% { box-shadow: 0 14px 36px rgba(240, 215, 168, 0.45); }
}

@keyframes scrollChevron {
  0% { opacity: 0; transform: translateY(-3px) rotate(45deg); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px) rotate(45deg); }
}

/* ========== Invitation ========== */
.invitation {
  background:
    linear-gradient(180deg, rgba(251, 247, 240, 0.4), transparent),
    var(--cream);
}

.invite-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: var(--ivory);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(184, 148, 95, 0.18);
  position: relative;
}

.invite-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 8px);
  pointer-events: none;
  z-index: 2;
}

.invite-card__photo {
  min-height: 420px;
  position: relative;
}

.invite-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.invite-card__body {
  padding: clamp(2rem, 5vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle at top right, rgba(184, 148, 95, 0.08), transparent 45%),
    var(--ivory);
}

.invite-ornament {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.4em;
  margin-bottom: 1rem;
}

.invite-card__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.25;
}

.invite-card__body p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.invite-card__sign {
  margin-top: 1.25rem !important;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink) !important;
}

.invite-card__sign span {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 2rem;
  color: var(--gold-deep);
}

/* ========== RSVP ========== */
.rsvp {
  background:
    linear-gradient(135deg, rgba(226, 211, 189, 0.35), transparent 40%),
    linear-gradient(180deg, var(--beige), var(--cream));
}

.rsvp-form {
  background: var(--ivory);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(184, 148, 95, 0.16);
}

.field {
  margin-bottom: 1.35rem;
}

.field label,
.field legend {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.field input[type="text"],
.field textarea {
  width: 100%;
  border: 1px solid rgba(184, 148, 95, 0.28);
  background: #fffcf7;
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.05rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft);
}

.field--choice {
  border: 0;
  padding: 0;
  margin: 0 0 1.35rem;
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.05rem;
  margin-bottom: 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(184, 148, 95, 0.24);
  background: #fffcf7;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.choice:hover,
.choice:has(input:checked) {
  border-color: var(--gold);
  background: rgba(184, 148, 95, 0.08);
}

.choice input {
  accent-color: var(--gold-deep);
  width: 1.05rem;
  height: 1.05rem;
}

.choice span {
  color: var(--ink);
}

.rsvp-form .btn:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.rsvp-form__status {
  margin: 1rem 0 0;
  color: #9a5147;
  font-size: 0.9rem;
  text-align: center;
}

.rsvp-success {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--ivory);
  border-radius: var(--radius);
  border: 1px solid rgba(184, 148, 95, 0.16);
  box-shadow: var(--shadow-soft);
  animation: fadeUp 0.7s var(--ease);
}

.rsvp-success__icon {
  font-size: 2.4rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  animation: heartBeat 1.4s ease-in-out infinite;
}

.rsvp-success p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.55rem;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ========== FAQ ========== */
.faq {
  background: var(--ivory);
}

.accordion {
  display: grid;
  gap: 0.85rem;
}

.accordion__item {
  background: var(--cream);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(184, 148, 95, 0.16);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.accordion__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 1.35rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background 0.25s ease;
}

.accordion__item summary::-webkit-details-marker {
  display: none;
}

.accordion__item summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--gold-deep);
  border-bottom: 1.5px solid var(--gold-deep);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
  margin-top: -4px;
}

.accordion__item[open] summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}

.accordion__item summary:hover {
  background: rgba(184, 148, 95, 0.06);
}

.accordion__panel {
  padding: 0 1.35rem 1.25rem;
}

.accordion__panel p {
  margin: 0;
  color: var(--ink-soft);
  padding-top: 0.15rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* ========== Program / Timeline ========== */
.program {
  background:
    radial-gradient(circle at 10% 20%, rgba(184, 148, 95, 0.1), transparent 35%),
    var(--cream);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}

.timeline__item {
  position: relative;
  padding: 0 0 2.25rem 5rem;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fffdf8, var(--beige));
  border: 1px solid rgba(184, 148, 95, 0.35);
  color: var(--gold-deep);
  box-shadow: var(--shadow-soft);
  z-index: 1;
}

.timeline__icon svg {
  width: 22px;
  height: 22px;
}

.timeline__item time {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
  margin-bottom: 0.35rem;
}

.timeline__item h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 500;
}

.timeline__item p {
  margin: 0.2rem 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.timeline__address {
  font-style: italic;
  color: var(--muted) !important;
}

/* ========== Love Story ========== */
.story {
  background: linear-gradient(180deg, var(--ivory), var(--cream));
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

.story-card {
  background: var(--ivory);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(184, 148, 95, 0.14);
  box-shadow: var(--shadow-soft);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.story-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.story-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.story-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease), opacity 0.9s var(--ease);
  opacity: 0.92;
}

.story-card.visible .story-card__photo img,
.story-card:hover .story-card__photo img {
  transform: scale(1);
  opacity: 1;
}

.story-card__body {
  padding: 1.4rem 1.5rem 1.65rem;
  position: relative;
}

.story-card__num {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--gold);
  opacity: 0.55;
}

.story-card__body h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 500;
}

.story-card__body p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 36ch;
}

/* ========== Venue ========== */
.venue {
  background:
    radial-gradient(circle at 80% 20%, rgba(184, 148, 95, 0.12), transparent 40%),
    var(--beige);
}

.venue-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 1.5rem;
  align-items: stretch;
}

.venue-card {
  background: var(--ivory);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid rgba(184, 148, 95, 0.16);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.venue-card__label {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.venue-card h3 {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
}

.venue-card__text {
  margin: 0 0 1.75rem;
  color: var(--ink-soft);
}

.venue-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.venue-map {
  position: relative;
  min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(184, 148, 95, 0.18);
  box-shadow: var(--shadow-soft);
  background: var(--sand);
}

.venue-map iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========== Footer ========== */
.footer {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(47, 40, 31, 0.55), rgba(47, 40, 31, 0.72)),
    url("https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=1600&q=70") center/cover;
  color: #fffdf8;
  padding: 5rem 1.5rem;
}

.footer__texture {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(240, 215, 168, 0.12), transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(240, 215, 168, 0.1), transparent 28%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f0d7a8' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.footer__hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.footer__heart {
  position: absolute;
  color: rgba(240, 215, 168, 0.55);
  font-size: 1rem;
  animation: floatHeart 4.5s ease-in-out infinite;
  opacity: 0;
}

.footer__content {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.footer__thanks {
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  font-style: italic;
  line-height: 1.45;
}

.footer__names {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 1;
}

.footer__date {
  margin: 1rem 0 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.85rem;
  opacity: 0.85;
}

@keyframes floatHeart {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.7);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(1.15);
  }
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
  .invite-card,
  .venue-layout,
  .story-grid {
    grid-template-columns: 1fr;
  }

  .invite-card__photo {
    min-height: 280px;
    max-height: 360px;
  }

  .invite-card::before {
    inset: 10px;
  }

  .venue-map,
  .venue-map iframe {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  .container,
  .container--narrow {
    width: calc(100% - 1.5rem);
  }

  .hero__names {
    font-size: clamp(3.2rem, 16vw, 4.4rem);
  }

  .hero__date {
    letter-spacing: 0.12em;
  }

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

  .timeline__item {
    padding-left: 4.25rem;
  }

  .timeline__icon {
    width: 42px;
    height: 42px;
  }

  .timeline__icon svg {
    width: 18px;
    height: 18px;
  }

  .venue-card__actions {
    flex-direction: column;
  }

  .venue-card__actions .btn {
    width: 100%;
  }

  .story-card__body {
    padding: 1.2rem 1.2rem 1.4rem;
  }
}

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

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

  .hero__media img,
  .hero .btn--gold,
  .hero__scroll span,
  .rsvp-success__icon,
  .footer__heart {
    animation: none;
  }

  .envelope-intro,
  .envelope-intro__backdrop,
  .envelope-intro__stage,
  .envelope-intro__glow,
  .envelope__flap,
  .envelope__letter,
  .wax-seal,
  .envelope-intro__hint {
    animation: none !important;
    transition: none !important;
  }

  .envelope-intro.is-opening {
    opacity: 0;
    visibility: hidden;
  }
}