/* =========================================================
   01. Reset
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #e8e1d8;
}

body,
h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

body {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text-main);
  background: #e8e1d8;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open,
body.is-loading,
body.lightbox-open {
  overflow: hidden;
}

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

img {
  object-fit: cover;
}

button,
input,
select {
  font: inherit;
}

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

button {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
}

button,
a,
select {
  cursor: pointer;
}

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

::selection {
  color: var(--bg-light);
  background: var(--bg-dark);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   02. Variables
   ========================================================= */
:root {
  --bg-main: #f2ede5;
  --bg-light: #f7f3ec;
  --bg-dark: #171717;
  --bg-deep: #111111;

  --text-main: #202020;
  --text-light: #f2eee7;
  --text-muted: #6f6962;

  --gold: #b39969;
  --gold-light: #d4c29d;
  --gold-deep: #9f8251;

  --border: rgba(24, 24, 24, 0.17);
  --border-light: rgba(255, 255, 255, 0.18);

  --page-max-width: 1800px;
  --gutter: clamp(28px, 5vw, 76px);
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  --font-serif: "Bodoni 72", Didot, "Times New Roman", Georgia, serif;
  --font-sans: Arial, Helvetica, sans-serif;
  --font-script: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
}

/* =========================================================
   03. Typography
   ========================================================= */
.hero__title,
.story h2,
.venue h2,
.schedule__vertical,
.dress h2,
.gallery h2,
.rsvp h2,
.monogram,
.venue__date,
.schedule__times {
  font-family: var(--font-serif);
  font-weight: 400;
}

.section-kicker,
.hero__eyebrow,
.menu-trigger,
.menu-overlay__nav,
.hero__date small,
.schedule__events h3,
.rsvp-form,
.dress__palette,
.lightbox__counter {
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section-kicker {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.62);
}

.section-kicker--dark {
  color: var(--text-main);
}

.text-mask {
  display: block;
  overflow: hidden;
}

.text-mask > span {
  display: block;
  will-change: transform;
}

/* =========================================================
   04. Layout
   ========================================================= */
.page-shell {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-max-width));
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg-main);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.06);
}

.page-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.026;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.32) 0 0.55px, transparent 0.7px),
    radial-gradient(circle at 74% 68%, rgba(0, 0, 0, 0.22) 0 0.45px, transparent 0.65px);
  background-size: 8px 8px, 11px 11px;
}

.section {
  position: relative;
  width: 100%;
}

.image-reveal {
  overflow: hidden;
}

.image-reveal img,
.media-parallax {
  width: 100%;
  height: 100%;
}

.media-parallax {
  will-change: transform;
}

.botanical-wrap {
  color: rgba(179, 153, 105, 0.78);
}

.botanical path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 2.15s var(--ease-luxury) 0.15s;
}

.botanical-wrap.is-visible .botanical path,
.is-visible .botanical path {
  stroke-dashoffset: 0;
}

/* =========================================================
   05. Invitation Envelope Gate
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(24px, 5vw, 72px);
  color: var(--text-main);
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.86), transparent 34%),
    linear-gradient(135deg, #efe8dd 0%, #f8f4ed 54%, #ebe2d7 100%);
  transition: opacity .9s var(--ease-luxury), visibility .9s;
  perspective: 1500px;
}

.preloader::before,
.preloader::after {
  content: "";
  position: absolute;
  width: min(34vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(179,153,105,.13);
  border-radius: 50%;
  pointer-events: none;
}
.preloader::before { top: -19vw; left: -12vw; }
.preloader::after { right: -14vw; bottom: -21vw; }
.preloader.is-revealing,
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.invitation-gate__grain {
  position: absolute;
  inset: 0;
  opacity: .028;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.45) 0 .45px, transparent .65px),
    radial-gradient(circle at 75% 65%, rgba(0,0,0,.28) 0 .4px, transparent .6px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: multiply;
}

.invitation-gate__eyebrow {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(24px, 4vh, 42px);
  color: #6d655d;
  font-size: clamp(9px, .72vw, 12px);
  letter-spacing: .27em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  animation: gateFadeUp .9s var(--ease-luxury) .15s forwards;
}

.envelope {
  --env-w: clamp(286px, 38vw, 560px);
  --env-h: calc(var(--env-w) * .62);
  position: relative;
  z-index: 3;
  width: var(--env-w);
  height: var(--env-h);
  border: 0;
  outline: 0;
  background: transparent;
  filter: drop-shadow(0 8px 12px rgba(45,34,23,.08)) drop-shadow(0 26px 34px rgba(45,34,23,.09));
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(24px) scale(.97);
  animation: gateEnvelopeIn 1.05s var(--ease-luxury) .28s forwards;
  cursor: pointer;
}
.envelope:focus-visible { outline: 1px solid var(--gold); outline-offset: 14px; }

.envelope__shadow {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: -10%;
  height: 14%;
  border-radius: 50%;
  background: rgba(51,39,27,.12);
  filter: blur(14px);
  transform: scaleX(.82);
  transition: opacity .8s ease, transform 1.1s var(--ease-luxury);
}

.envelope__back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(87,70,50,.12);
  background:
    linear-gradient(145deg, rgba(255,255,255,.42), transparent 42%),
    repeating-linear-gradient(0deg, rgba(72,58,43,.018) 0 1px, transparent 1px 4px),
    #d9cdbc;
}
.envelope__back::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 1px rgba(255,255,255,.48), inset 0 -1px rgba(94,76,55,.08);
}

.envelope__letter {
  position: absolute;
  z-index: 2;
  left: 7.5%;
  right: 7.5%;
  bottom: 4%;
  height: 88%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8% 10%;
  border: 1px solid rgba(54,44,34,.08);
  background:
    repeating-linear-gradient(0deg, rgba(56,46,36,.014) 0 1px, transparent 1px 4px),
    linear-gradient(110deg, rgba(255,255,255,.55), transparent 46%),
    #f8f4ec;
  box-shadow: 0 8px 18px rgba(42,34,26,.06);
  opacity: 0;
  transform: translate3d(0, 20%, -6px) scale(.97);
  transform-origin: center bottom;
  transition:
    transform 1.2s var(--ease-luxury),
    box-shadow 1s ease,
    opacity .45s ease;
}
.envelope__letter-kicker,
.envelope__date {
  color: #625a52;
  font-size: clamp(7px, .58vw, 10px);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.envelope__letter-title {
  margin: clamp(15px, 2vh, 22px) 0 clamp(12px, 1.6vh, 18px);
  color: #2b2927;
  font-family: var(--font-serif);
  font-size: clamp(25px, 3vw, 44px);
  line-height: .98;
  letter-spacing: .04em;
  text-align: center;
}
.envelope__botanical {
  width: 34%;
  margin-top: clamp(10px, 1.4vh, 16px);
  color: rgba(159,130,81,.58);
}

.envelope__flap {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  width: 100%;
  height: 58%;
  background:
    linear-gradient(175deg, rgba(255,255,255,.34), transparent 56%),
    repeating-linear-gradient(0deg, rgba(72,58,43,.016) 0 1px, transparent 1px 4px),
    #e2d7c7;
  clip-path: polygon(0 0,100% 0,50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  backface-visibility: hidden;
  transition: transform .95s cubic-bezier(.65,0,.35,1), filter .8s ease;
}
.envelope__flap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2), transparent 50%);
  clip-path: inherit;
}

.envelope__front { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.envelope__front--left {
  background:
    linear-gradient(150deg, rgba(255,255,255,.14), transparent 55%),
    #d5c8b7;
  clip-path: polygon(0 0,52% 52%,0 100%);
}
.envelope__front--right {
  background:
    linear-gradient(210deg, rgba(255,255,255,.11), transparent 55%),
    #cdbfab;
  clip-path: polygon(100% 0,48% 52%,100% 100%);
}
.envelope__front--bottom {
  z-index: 6;
  background:
    linear-gradient(160deg, rgba(255,255,255,.2), transparent 44%),
    repeating-linear-gradient(0deg, rgba(72,58,43,.012) 0 1px, transparent 1px 4px),
    #ded2c2;
  clip-path: polygon(0 100%,50% 47%,100% 100%);
}

.envelope__seal {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 52%;
  width: clamp(50px, 5vw, 74px);
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 49% 52% 47% 54% / 52% 47% 54% 49%;
  color: #f5ead7;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.28), transparent 21%),
    radial-gradient(circle at 58% 68%, rgba(84,57,27,.18), transparent 42%),
    #9f8251;
  box-shadow:
    0 5px 10px rgba(83,57,26,.22),
    inset 0 0 0 2px rgba(255,255,255,.11),
    inset 0 -4px 7px rgba(76,48,20,.13);
  font-family: var(--font-serif);
  font-size: clamp(12px,1.25vw,18px);
  transform: translate(-50%,-50%);
  transition: opacity .35s ease, transform .55s var(--ease-luxury), filter .45s ease;
  animation: sealGlow 2.8s ease-in-out 1.4s infinite;
}
.envelope__seal b { font-weight: 400; color: #f2d7a4; }

.invitation-gate__hint {
  position: relative;
  z-index: 4;
  margin-top: clamp(30px, 4.5vh, 50px);
  color: rgba(70,64,58,.68);
  font-size: clamp(8px,.68vw,10px);
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: gateFadeUp .8s var(--ease-luxury) .9s forwards;
}

.preloader:not(.is-opening) .envelope:hover { transform: translateY(-4px) scale(1.008); }
.preloader:not(.is-opening) .envelope:hover .envelope__shadow { opacity: .7; transform: scaleX(.9); }
.preloader:not(.is-opening) .envelope:hover .envelope__seal { filter: brightness(1.08); }

.preloader.is-opening .envelope__seal {
  animation: none;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.42) rotate(-10deg);
}
.preloader.is-opening .envelope__flap {
  z-index: 0;
  transform: rotateX(180deg);
  filter: brightness(.95);
}
.preloader.is-opening .envelope__letter {
  z-index: 8;
  opacity: 1;
  transform: translate3d(0,-57%,40px) scale(1.03);
  box-shadow: 0 22px 44px rgba(42,34,26,.12);
  transition-delay: .32s, .32s, .2s;
}
.preloader.is-opening .envelope {
  animation: gateEnvelopeOpen 2s var(--ease-luxury) forwards;
}
.preloader.is-opening .invitation-gate__hint,
.preloader.is-opening .invitation-gate__eyebrow {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

@keyframes gateFadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes gateEnvelopeIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sealGlow {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
@keyframes gateEnvelopeOpen {
  0%,68% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8%) scale(.92); }
}

@media (max-width: 767px) {
  .preloader { justify-content: center; padding: 24px 18px 34px; }
  .preloader::before { top: -32vw; left: -30vw; }
  .preloader::after { right: -34vw; bottom: -30vw; }
  .invitation-gate__eyebrow { margin-bottom: 26px; font-size: 8px; }
  .envelope { --env-w: min(86vw,390px); }
  .envelope__letter { padding: 9% 8%; }
  .envelope__letter-kicker,
  .envelope__date { font-size: 7px; }
  .envelope__letter-title { font-size: clamp(24px,7.6vw,34px); }
  .invitation-gate__hint { margin-top: 34px; font-size: 8px; }
}

@media (max-height: 650px) and (min-width: 600px) {
  .preloader { padding-block: 18px; }
  .invitation-gate__eyebrow { margin-bottom: 14px; }
  .envelope { --env-w: min(44vw,420px); }
  .invitation-gate__hint { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .invitation-gate__eyebrow,
  .envelope,
  .invitation-gate__hint {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .envelope__flap,
  .envelope__letter,
  .envelope__seal,
  .preloader { transition-duration: .01ms !important; }
}

/* =========================================================
   06. Header
   ========================================================= */
.menu-trigger {
  position: absolute;
  top: clamp(22px, 3vw, 46px);
  left: var(--gutter);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #67615c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.menu-trigger i {
  position: relative;
  width: 17px;
  height: 9px;
}

.menu-trigger b {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease-luxury);
}

.menu-trigger b:first-child {
  top: 2px;
}

.menu-trigger b:last-child {
  top: 7px;
  width: 12px;
}

.menu-trigger:hover b:first-child {
  transform: translateX(3px);
}

.menu-trigger:hover b:last-child {
  transform: translateX(-2px);
}

/* =========================================================
   07. Menu
   ========================================================= */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 4500;
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 100svh;
  color: var(--text-light);
  background: #121212;
  clip-path: inset(0 100% 0 0);
  visibility: hidden;
  transition: clip-path 0.85s var(--ease-luxury), visibility 0.85s;
}

.menu-overlay.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.menu-overlay__close {
  position: absolute;
  top: clamp(25px, 4vw, 54px);
  right: clamp(28px, 5vw, 76px);
  z-index: 4;
  width: 36px;
  height: 36px;
}

.menu-overlay__close span {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 28px;
  height: 1px;
  background: #fff;
}

.menu-overlay__close span:first-child {
  transform: rotate(45deg);
}

.menu-overlay__close span:last-child {
  transform: rotate(-45deg);
}

.menu-overlay__media {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
}

.menu-overlay__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, #121212 100%);
}

.menu-overlay__media img {
  width: 100%;
  height: 100%;
  filter: grayscale(1) brightness(0.58) contrast(1.1);
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-luxury) 0.15s;
}

.menu-overlay.is-open .menu-overlay__media img {
  transform: scale(1);
}

.menu-overlay__nav {
  align-self: center;
  padding: 8vh 10vw 8vh 8vw;
}

.menu-overlay__nav a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 24px;
  width: max-content;
  max-width: 100%;
  padding: 11px 0;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.25vw, 58px);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.7s var(--ease-luxury), transform 0.7s var(--ease-luxury), color 0.35s ease;
}

.menu-overlay.is-open .menu-overlay__nav a {
  opacity: 1;
  transform: translateY(0);
}

.menu-overlay.is-open .menu-overlay__nav a:nth-child(1) { transition-delay: 0.16s; }
.menu-overlay.is-open .menu-overlay__nav a:nth-child(2) { transition-delay: 0.21s; }
.menu-overlay.is-open .menu-overlay__nav a:nth-child(3) { transition-delay: 0.26s; }
.menu-overlay.is-open .menu-overlay__nav a:nth-child(4) { transition-delay: 0.31s; }
.menu-overlay.is-open .menu-overlay__nav a:nth-child(5) { transition-delay: 0.36s; }
.menu-overlay.is-open .menu-overlay__nav a:nth-child(6) { transition-delay: 0.41s; }
.menu-overlay.is-open .menu-overlay__nav a:nth-child(7) { transition-delay: 0.46s; }

.menu-overlay__nav a span {
  min-width: 30px;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  transition: color 0.35s ease;
}

.menu-overlay__nav a::after {
  content: "";
  position: absolute;
  left: 54px;
  bottom: 5px;
  width: calc(100% - 54px);
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gold);
  transition: transform 0.45s var(--ease-luxury);
}

.menu-overlay__nav a:hover {
  transform: translateX(8px);
}

.menu-overlay__nav a:hover::after {
  transform: scaleX(1);
}

.menu-overlay__nav a:hover span {
  color: var(--gold-light);
}

.menu-overlay__date {
  position: absolute;
  right: clamp(28px, 5vw, 76px);
  bottom: 30px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.46);
}

/* =========================================================
   08. Hero
   ========================================================= */
.hero {
  min-height: clamp(650px, 59vw, 850px);
  background: linear-gradient(90deg, #f4f0e9 0%, #f4f0e9 48%, #ece6dd 100%);
}

.hero__copy {
  position: relative;
  z-index: 3;
  width: 62%;
  height: 100%;
  min-height: inherit;
  padding: clamp(104px, 11vw, 156px) 0 42px var(--gutter);
}

.hero__title {
  width: max-content;
  max-width: 113%;
  color: #171717;
  font-size: clamp(68px, 8.75vw, 128px);
  line-height: 0.79;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.hero__second-line {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 26px);
  margin-top: clamp(18px, 2vw, 30px);
}

.hero__amp {
  color: var(--gold);
  font-size: 0.76em;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(20px);
}

body.hero-ready .hero__amp {
  animation: heroAmp 0.9s var(--ease-luxury) 0.72s forwards;
}

.hero__eyebrow {
  margin-top: clamp(34px, 3.7vw, 55px);
  font-size: clamp(9px, 0.82vw, 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateY(12px);
}

body.hero-ready .hero__eyebrow {
  animation: heroFade 0.8s var(--ease-luxury) 0.92s forwards;
}

.hero__date {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(48px, 6.2vw, 88px);
  display: grid;
  grid-template-columns: 1px auto auto;
  grid-template-rows: auto 1px auto;
  align-items: end;
  column-gap: clamp(18px, 2.1vw, 30px);
  width: clamp(250px, 28vw, 390px);
}

.hero__date-line {
  grid-row: 1 / 4;
  width: 1px;
  height: 100%;
  align-self: stretch;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom center;
}

.hero__date strong {
  font-family: var(--font-serif);
  font-size: clamp(76px, 7.5vw, 108px);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: -0.06em;
  opacity: 0;
  transform: translateY(24px);
}

.hero__month {
  padding-bottom: 2px;
  font-family: var(--font-serif);
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1;
  opacity: 0;
  transform: translateY(18px);
}

.hero__month b {
  font-weight: 400;
}

.hero__date-rule {
  grid-column: 2 / 4;
  height: 1px;
  margin-top: 18px;
  background: rgba(159, 130, 81, 0.72);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero__date small {
  grid-column: 2 / 4;
  padding-top: 12px;
  font-size: 10px;
  letter-spacing: 0.26em;
  opacity: 0;
  transform: translateY(10px);
}

body.hero-ready .hero__date-line { animation: lineGrowY 0.9s var(--ease-luxury) 1.06s forwards; }
body.hero-ready .hero__date strong { animation: heroFade 0.9s var(--ease-luxury) 1.02s forwards; }
body.hero-ready .hero__month { animation: heroFade 0.9s var(--ease-luxury) 1.15s forwards; }
body.hero-ready .hero__date-rule { animation: lineGrowX 0.9s var(--ease-luxury) 1.24s forwards; }
body.hero-ready .hero__date small { animation: heroFade 0.8s var(--ease-luxury) 1.34s forwards; }

.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  width: 56%;
  height: 100%;
  z-index: 1;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 240, 233, 0.17) 0%, transparent 18%);
}

.hero__media .media-parallax {
  transform: scale(1.055);
}

.hero__media img {
  object-position: 50% 0%;
  filter: grayscale(0.1) contrast(1.02);
}

body.hero-ready .hero__media .media-parallax {
  animation: heroZoom 7s var(--ease-soft) forwards;
}

body.hero-ready .hero__title .text-mask:nth-child(1) > span {
  animation: textReveal 1.05s var(--ease-luxury) 0.32s forwards;
}

body.hero-ready .hero__second-line .text-mask > span {
  animation: textReveal 1.05s var(--ease-luxury) 0.76s forwards;
}

.hero__title .text-mask > span {
  transform: translateY(112%);
}

/* =========================================================
   09. Invitation
   ========================================================= */
.invitation {
  min-height: clamp(400px, 34vw, 500px);
  display: grid;
  grid-template-columns: 58% 42%;
  background: var(--bg-light);
}

.invitation__copy {
  display: grid;
  grid-template-columns: 1px 1fr;
  gap: 48px;
  align-content: center;
  padding: clamp(48px, 6vw, 86px) 5vw clamp(44px, 5vw, 76px) clamp(70px, 8vw, 120px);
}

.vertical-rule {
  width: 1px;
  height: 100%;
  min-height: 240px;
  background: rgba(179, 153, 105, 0.75);
}

.invitation h2 {
  margin-bottom: 26px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.25vw, 34px);
  font-weight: 400;
  letter-spacing: 0.11em;
}

.invitation p:not(.signature) {
  color: #3c3935;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.65;
}

.signature {
  margin-top: 30px;
  color: var(--gold-deep);
  font-family: var(--font-script);
  font-size: clamp(27px, 2.5vw, 39px);
  transform: rotate(-2deg);
}

.invitation__collage {
  position: relative;
  min-height: 100%;
}

.invitation__photo {
  position: absolute;
  top: 50px;
  left: 6%;
  width: 55%;
  height: calc(100% - 68px);
  z-index: 2;
}

.invitation__photo img {
  object-position: center center;
  filter: grayscale(1) contrast(1.04);
}

.invitation__dark {
  position: absolute;
  right: 14%;
  top: 23%;
  z-index: 3;
  width: 29%;
  height: 69%;
  background: linear-gradient(180deg, #1a1a1a 0%, #101010 100%);
}

.invitation__gold-line {
  position: absolute;
  right: 14%;
  top: 53%;
  z-index: 4;
  width: 29%;
  height: 1px;
  background: rgba(179, 153, 105, 0.32);
}

.gold-brush {
  position: absolute;
  left: -4%;
  bottom: 12%;
  z-index: 4;
  width: 18%;
  height: 24%;
  background:
    repeating-linear-gradient(0deg, rgba(196, 157, 86, 0.82) 0 3px, rgba(218, 190, 132, 0.68) 3px 5px, transparent 5px 7px),
    linear-gradient(90deg, rgba(201, 164, 97, 0.92), rgba(225, 203, 153, 0.5));
  clip-path: polygon(0 16%, 85% 0, 100% 12%, 88% 28%, 100% 43%, 86% 59%, 100% 76%, 73% 100%, 0 86%);
}

/* =========================================================
   10. Story
   ========================================================= */
.story {
  display: grid;
  grid-template-columns: 47% 53%;
  min-height: clamp(500px, 43vw, 620px);
  color: var(--text-light);
  background: var(--bg-dark);
}

.story__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(58px, 6vw, 90px) clamp(48px, 6vw, 92px);
}

.story h2 {
  margin: 28px 0 32px;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 0.95;
  letter-spacing: 0.05em;
}

.story__copy > p:last-of-type {
  color: rgba(242, 238, 231, 0.72);
  font-size: clamp(13px, 1.08vw, 16px);
  line-height: 1.72;
}

.story__gold-rule {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 25%;
  height: 1px;
  background: rgba(179, 153, 105, 0.6);
}

.story__media {
  min-height: 100%;
}

.story__media img {
  object-position: center center;
  filter: grayscale(1) contrast(1.05);
}

/* =========================================================
   11. Venue
   ========================================================= */
.venue {
  display: grid;
  grid-template-columns: 11% 23% 42% 24%;
  min-height: clamp(470px, 38vw, 560px);
  background: var(--bg-light);
}

.venue__date {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--gold-deep);
  font-size: clamp(26px, 2.8vw, 42px);
  letter-spacing: 0.03em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.venue__media {
  height: 83%;
  align-self: start;
}

.venue__media img {
  object-position: 50% 38%;
  filter: grayscale(0.52) sepia(0.08) contrast(1.08);
}

.venue__copy {
  align-self: center;
  padding: 20px 9% 20px 14%;
}

.venue h2 {
  margin-top: 23px;
  font-size: clamp(34px, 3.7vw, 54px);
  line-height: 1;
  letter-spacing: 0.015em;
}

.venue__rule {
  display: block;
  width: 35px;
  height: 1px;
  margin: 24px 0 26px;
  background: var(--gold);
}

.venue__copy p:not(.section-kicker) {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.55;
}

.invitation__copy p[data-config-path="invitation.text"],
.story__copy > p[data-config-path="story.text"],
.venue__copy p[data-config-path="venue.text"],
.schedule__events p {
  white-space: pre-line;
}

.story__title {
  white-space: pre-line;
}

.venue__address {
  margin-bottom: 22px;
}

.venue__map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 24px;
  padding: 0 22px;
  border: 1px solid rgba(179, 153, 105, 0.82);
  color: var(--text-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 0.24s ease,
    color 0.24s ease,
    border-color 0.24s ease,
    transform 0.24s ease;
}

.venue__map-link:hover,
.venue__map-link:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}

.venue__botanical {
  align-self: center;
  justify-self: center;
  width: 78%;
}

/* =========================================================
   12. Schedule
   ========================================================= */
.schedule {
  display: grid;
  grid-template-columns: 13% 18% 1px 43% 26%;
  min-height: clamp(520px, 43vw, 630px);
  background: #f4f0e8;
}

.schedule__vertical {
  align-self: center;
  justify-self: center;
  font-size: clamp(32px, 3.1vw, 47px);
  letter-spacing: 0.01em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.schedule__times {
  display: grid;
  grid-auto-rows: minmax(96px, auto);
  row-gap: clamp(18px, 2vw, 30px);
  align-items: start;
  justify-items: end;
  padding: 58px 25% 58px 0;
  color: var(--gold-deep);
  font-size: clamp(26px, 2.6vw, 39px);
  line-height: 1;
}

.schedule__line {
  width: 1px;
  height: calc(100% - 116px);
  align-self: center;
  background: rgba(179, 153, 105, 0.68);
}

.schedule__events {
  display: grid;
  grid-auto-rows: minmax(96px, auto);
  row-gap: clamp(18px, 2vw, 30px);
  padding: 58px 7% 58px 12%;
}

.schedule__events article {
  align-self: start;
  min-height: 96px;
}

.schedule__events h3 {
  margin-bottom: 8px;
  font-size: clamp(10px, 0.84vw, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.schedule__events p {
  color: #5f5a54;
  font-size: clamp(11px, 0.92vw, 14px);
  line-height: 1.52;
}

.schedule__media {
  min-height: 100%;
  background: #111;
}

.schedule__media img {
  object-position: center center;
  filter: grayscale(0.92) contrast(1.06);
}

/* =========================================================
   13. Dress Code
   ========================================================= */
.dress {
  padding: clamp(48px, 5vw, 72px) clamp(42px, 6.8vw, 98px) clamp(36px, 4vw, 58px);
  background: var(--bg-light);
}

.dress h2 {
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 400;
  letter-spacing: 0.08em;
}

.dress__intro p,
.dress__note {
  color: #5f5a54;
  font-size: clamp(11px, 0.92vw, 14px);
  line-height: 1.5;
}

.dress__intro p {
  margin-top: 14px;
}

.dress__palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 34px;
  min-height: 92px;
  overflow: hidden;
}

.swatch {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  transition: flex 0.5s var(--ease-luxury), transform 0.45s var(--ease-luxury), filter 0.45s ease;
}

.swatch::after {
  content: attr(data-hex);
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translate(-50%, 8px);
  opacity: 0;
  font-size: 9px;
  letter-spacing: 0.08em;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-luxury);
}

.swatch span {
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease-luxury);
  font-size: clamp(8px, 0.7vw, 10px);
  letter-spacing: 0.08em;
}

.swatch:hover,
.swatch:focus-visible {
  transform: scaleY(1.06);
  z-index: 2;
}

.swatch:hover span,
.swatch:focus-visible span {
  transform: translateY(-8px);
}

.swatch:hover::after,
.swatch:focus-visible::after {
  opacity: 0.75;
  transform: translate(-50%, 0);
}

.swatch--ivory { background: #e9e1d5; color: #746f68; }
.swatch--sand { background: #d4c5ad; color: #726b61; }
.swatch--taupe { background: #a69b8f; color: #f0ebe3; }
.swatch--olive { background: #70705d; color: #eee8de; }
.swatch--graphite { background: #353638; color: #eee8de; }
.swatch--gold { color: #f5efe4; background: linear-gradient(110deg, #9e7941 0%, #d3ad67 38%, #ab8247 65%, #d5b574 100%); }

.dress__note {
  margin-top: 22px;
}

/* =========================================================
   14. Wishes
   ========================================================= */
.wishes {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: clamp(300px, 26vw, 380px);
}

.wishes__copy {
  position: relative;
  display: flex;
  align-items: center;
  padding: 54px 11%;
  color: var(--text-light);
  background: #171717;
}

.wishes__quote {
  position: absolute;
  top: 19px;
  left: 8%;
  color: var(--gold-deep);
  font-family: Georgia, serif;
  font-size: 74px;
  line-height: 1;
}

.wishes__copy p {
  margin-left: 8%;
  color: rgba(242, 238, 231, 0.77);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.67;
}

.wishes__media {
  min-height: 100%;
}

.wishes__media img {
  object-position: center center;
  filter: sepia(0.08) grayscale(0.15) contrast(1.02);
}

/* =========================================================
   15. Gallery
   ========================================================= */
.gallery {
  padding: clamp(28px, 3vw, 44px) clamp(30px, 5vw, 72px) clamp(26px, 3vw, 42px);
  background: var(--bg-light);
}

.gallery h2 {
  margin-bottom: 20px;
  font-size: clamp(27px, 2.55vw, 39px);
  font-weight: 400;
  letter-spacing: 0.08em;
}

.gallery__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}

.gallery__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.24 / 1;
  background: #ddd;
}

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(179, 153, 105, 0.08);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  filter: grayscale(1) contrast(1.04);
  transition: transform 0.8s var(--ease-luxury), filter 0.6s ease;
}

.gallery__item:hover img {
  transform: scale(1.045);
  filter: grayscale(0.82) contrast(1.03);
}

.gallery__item:hover::after {
  opacity: 1;
}

/* =========================================================
   16. RSVP
   ========================================================= */
.rsvp {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: clamp(430px, 36vw, 530px);
  background: var(--bg-light);
}

.rsvp__form-wrap {
  padding: clamp(42px, 5vw, 72px) clamp(42px, 6vw, 90px);
}

.rsvp h2 {
  font-size: clamp(30px, 3.15vw, 47px);
  line-height: 0.96;
  letter-spacing: 0.06em;
}

.rsvp__form-wrap > p {
  margin-top: 15px;
  color: #625d57;
  font-size: clamp(10px, 0.88vw, 13px);
}

.rsvp-form {
  width: min(100%, 520px);
  margin-top: 28px;
}

.rsvp-form__fields {
  display: grid;
  gap: 18px;
}

.rsvp-form label {
  position: relative;
  display: block;
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {
  width: 100%;
  min-height: 38px;
  padding: 0 30px 0 0;
  border: 0;
  border-radius: 0;
  outline: none;
  color: #242424;
  background: transparent;
  appearance: none;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.rsvp-form textarea {
  min-height: 84px;
  padding-top: 10px;
  resize: vertical;
  line-height: 1.55;
}

.rsvp-form label > span:not(.sr-only),
.rsvp-form fieldset > legend {
  display: block;
  margin-bottom: 6px;
  color: #625d57;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rsvp-form label::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
}

.rsvp-form label:has(select)::after {
  opacity: 0.75;
}

.rsvp-form i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  overflow: hidden;
  background: rgba(32, 32, 32, 0.45);
}

.rsvp-form i::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gold);
  transition: transform 0.55s var(--ease-luxury);
}

.rsvp-form input:focus + i::after,
.rsvp-form select:focus + i::after,
.rsvp-form textarea:focus + i::after {
  transform: scaleX(1);
}

.rsvp-form fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 0 6px;
  border: 0;
}

.rsvp-form fieldset label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rsvp-form fieldset input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  appearance: auto;
  accent-color: #171717;
}

.rsvp-form fieldset label span {
  margin: 0;
  color: #242424;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.field-error {
  display: block;
  max-height: 0;
  overflow: hidden;
  color: #8a4f48;
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
}

.rsvp-form label.has-error .field-error {
  max-height: 28px;
  padding-top: 7px;
  opacity: 1;
}

.rsvp-form label.has-error i {
  background: #8a4f48;
}

.rsvp-form__submit {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 250px;
  height: 52px;
  margin-top: 8px;
  overflow: hidden;
  color: var(--text-light);
  background: #171717;
  font-size: 9px;
  letter-spacing: 0.19em;
  transition: background 0.45s ease, color 0.45s ease;
}

.rsvp-form__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-102%);
  background: var(--gold);
  transition: transform 0.6s var(--ease-luxury);
}

.rsvp-form__submit span {
  position: relative;
  z-index: 1;
}

.rsvp-form__submit:hover::before {
  transform: translateX(0);
}

.rsvp-success {
  margin-top: 54px;
}

.rsvp-success[hidden] {
  display: none;
}

.template-footer {
  display: grid;
  min-height: 120px;
  place-items: center;
  padding: 36px 24px 48px;
  color: #71685f;
  background: #f1ece3;
  text-align: center;
}

.template-footer p {
  margin: 0;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rsvp-success span {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(38px, 4vw, 58px);
  letter-spacing: 0.05em;
}

.rsvp-success p {
  margin-top: 8px;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.rsvp-success button {
  margin-top: 28px;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 5px;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.rsvp__finale {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 5.8vw, 84px) clamp(46px, 5.8vw, 84px);
  border-left: 1px solid rgba(32, 32, 32, 0.1);
  background: #f1ede5;
}

.rsvp__finale > p {
  position: relative;
  z-index: 2;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.85vw, 28px);
  line-height: 1.14;
  letter-spacing: 0.1em;
}

.monogram {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  width: max-content;
  margin-top: clamp(48px, 6vw, 90px);
  font-size: clamp(72px, 7.8vw, 112px);
  line-height: 0.62;
}

.monogram span:first-child {
  grid-column: 1;
  grid-row: 1;
}

.monogram b {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  color: var(--gold);
  font-weight: 400;
  font-size: 0.58em;
  transform: translate(13px, 8px);
}

.monogram span:last-child {
  grid-column: 2;
  grid-row: 2;
  transform: translateX(1px);
}

.rsvp__botanical {
  position: absolute;
  right: -4%;
  bottom: -8%;
  width: 58%;
}

/* =========================================================
   17. Lightbox
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 4700;
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: 46px;
  color: #fff;
  background: rgba(9, 9, 9, 0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__stage {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(100svh - 120px);
  overflow: hidden;
}

.lightbox__stage img {
  max-width: min(1100px, 82vw);
  max-height: 82svh;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.35s ease, transform 0.55s var(--ease-luxury);
}

.lightbox.is-open .lightbox__stage img.is-ready {
  opacity: 1;
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: 25px;
  right: 33px;
  z-index: 2;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-serif);
  font-size: 42px;
  line-height: 1;
}

.lightbox__prev,
.lightbox__next {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease, transform 0.35s var(--ease-luxury);
}

.lightbox__prev:hover,
.lightbox__next:hover {
  color: var(--gold-light);
}

.lightbox__prev:hover { transform: translateX(-5px); }
.lightbox__next:hover { transform: translateX(5px); }

.lightbox__counter {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  padding-top: 14px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
}

/* =========================================================
   18. Cursor
   ========================================================= */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4900;
  width: 34px;
  height: 34px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 0.25s ease;
}

.cursor span {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(27, 27, 27, 0.6);
  border-radius: 50%;
  transition: inset 0.35s var(--ease-luxury), background 0.35s ease, border-color 0.35s ease;
}

.cursor em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  font-style: normal;
  font-size: 7px;
  letter-spacing: 0.12em;
  transition: opacity 0.25s ease;
}

.cursor.is-visible {
  opacity: 1;
}

.cursor.is-hover span {
  inset: 1px;
  background: rgba(179, 153, 105, 0.14);
  border-color: var(--gold);
}

.cursor.is-view span {
  inset: 0;
  background: rgba(242, 237, 229, 0.93);
  border-color: transparent;
}

.cursor.is-view em {
  opacity: 1;
  color: #1f1f1f;
}

/* =========================================================
   19. Animations
   ========================================================= */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 4800;
  height: 2px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gold);
  will-change: transform;
}

[data-reveal] {
  transition-duration: 1.05s;
  transition-timing-function: var(--ease-luxury);
  will-change: opacity, transform, clip-path;
}

[data-reveal="up"] {
  opacity: 0;
  transform: translateY(42px);
}

[data-reveal="left"] {
  opacity: 0;
  transform: translateX(-48px);
}

[data-reveal="right"] {
  opacity: 0;
  transform: translateX(48px);
}

[data-reveal="fade"] {
  opacity: 0;
}

[data-reveal="clip"] {
  clip-path: inset(0 0 100% 0);
}

[data-reveal="clip"] > img,
[data-reveal="clip"] .media-parallax {
  transform: scale(1.08);
  transition: transform 1.45s var(--ease-luxury);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

[data-reveal="clip"].is-visible > img,
[data-reveal="clip"].is-visible .media-parallax {
  transform: scale(1);
}

.headline-reveal .text-mask > span {
  transform: translateY(108%);
  transition: transform 1.02s var(--ease-luxury);
}

.headline-reveal.is-text-visible .text-mask > span {
  transform: translateY(0);
}

.headline-reveal.is-text-visible .text-mask:nth-child(2) > span { transition-delay: 0.08s; }
.headline-reveal.is-text-visible .text-mask:nth-child(3) > span { transition-delay: 0.16s; }

.magnetic {
  will-change: transform;
}

@keyframes preloaderLetter {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes preloaderLine {
  to { transform: scaleX(1); }
}

@keyframes textReveal {
  to { transform: translateY(0); }
}

@keyframes heroAmp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFade {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lineGrowX {
  to { transform: scaleX(1); }
}

@keyframes lineGrowY {
  to { transform: scaleY(1); }
}

@keyframes heroZoom {
  from { transform: scale(1.055); }
  to { transform: scale(1.015); }
}

/* =========================================================
   20. Responsive
   ========================================================= */
@media (max-width: 1180px) {
  :root {
    --gutter: clamp(30px, 5vw, 58px);
  }

  .hero__title {
    font-size: clamp(64px, 8.6vw, 103px);
  }

  .invitation__copy {
    padding-left: 7vw;
    gap: 34px;
  }

  .venue {
    grid-template-columns: 12% 23% 43% 22%;
  }

  .schedule {
    grid-template-columns: 12% 19% 1px 43% 26%;
  }

  .schedule__events {
    padding-left: 9%;
  }
}

@media (max-width: 1024px) {
  .page-shell {
    width: 100%;
    box-shadow: none;
  }

  .menu-overlay {
    grid-template-columns: 30% 70%;
  }

  .hero {
    min-height: 760px;
  }

  .hero__copy {
    width: 100%;
    padding-top: 118px;
  }

  .hero__title {
    position: relative;
    z-index: 3;
    font-size: clamp(62px, 12vw, 102px);
    max-width: 92vw;
  }

  .hero__media {
    top: 0;
    right: 0;
    width: 58%;
    height: 70%;
  }

  .hero__eyebrow {
    margin-top: 32px;
  }

  .hero__date {
    bottom: 54px;
  }

  .invitation {
    grid-template-columns: 52% 48%;
  }

  .invitation__copy {
    padding: 52px 24px 52px 46px;
    gap: 26px;
  }

  .story h2 {
    font-size: clamp(34px, 5.2vw, 49px);
  }

  .venue {
    grid-template-columns: 14% 28% 58%;
    grid-template-rows: auto auto;
  }

  .venue__date {
    grid-row: 1 / 3;
  }

  .venue__media {
    grid-row: 1 / 3;
    height: 100%;
  }

  .venue__copy {
    grid-column: 3;
    grid-row: 1 / 3;
    padding: 60px 12% 60px 11%;
  }

  .venue__botanical {
    position: absolute;
    right: -4%;
    bottom: -18%;
    width: 25%;
    opacity: 0.65;
  }

  .schedule {
    grid-template-columns: 13% 23% 1px 39% 25%;
  }

  .schedule__events p {
    font-size: 11px;
  }

  .dress {
    padding-left: 44px;
    padding-right: 44px;
  }

  .rsvp__form-wrap,
  .rsvp__finale {
    padding: 46px;
  }
}

@media (max-width: 820px) {
  :root {
    --gutter: 24px;
  }

  .page-shell::after {
    opacity: 0.018;
  }

  .menu-trigger {
    top: 20px;
  }

  .menu-overlay {
    display: block;
    padding: 90px 26px 40px;
  }

  .menu-overlay__media {
    position: absolute;
    inset: 0;
    min-height: auto;
    opacity: 0.22;
  }

  .menu-overlay__media::after {
    background: rgba(18, 18, 18, 0.58);
  }

  .menu-overlay__nav {
    position: relative;
    z-index: 2;
    padding: 0;
  }

  .menu-overlay__nav a {
    gap: 16px;
    font-size: clamp(28px, 9vw, 42px);
    padding: 10px 0;
  }

  .menu-overlay__nav a::after {
    left: 45px;
    width: calc(100% - 45px);
  }

  .hero {
    min-height: 700px;
    background: #f4f0e9;
  }

  .hero__copy {
    min-height: 700px;
    padding: 84px var(--gutter) 34px;
  }

  .hero__title {
    width: 100%;
    max-width: none;
    font-size: clamp(54px, 17vw, 80px);
    line-height: 0.84;
    letter-spacing: -0.055em;
  }

  .hero__second-line {
    gap: 10px;
    margin-top: 11px;
  }

  .hero__media {
    top: 52px;
    right: -8%;
    width: 77%;
    height: 54%;
  }

  .hero__media::after {
    background: linear-gradient(90deg, #f4f0e9 0%, rgba(244, 240, 233, 0.76) 6%, transparent 24%);
  }

  .hero__eyebrow {
    position: absolute;
    top: 43%;
    left: var(--gutter);
    max-width: 210px;
    margin: 0;
    line-height: 1.6;
  }

  .hero__date {
    left: var(--gutter);
    bottom: 35px;
    width: min(76vw, 310px);
    column-gap: 17px;
  }

  .hero__date strong {
    font-size: clamp(68px, 21vw, 88px);
  }

  .hero__month {
    font-size: 24px;
  }

  .invitation {
    display: block;
    min-height: 0;
  }

  .invitation__copy {
    grid-template-columns: 1px 1fr;
    gap: 24px;
    padding: 48px 30px 34px;
  }

  .vertical-rule {
    min-height: 220px;
  }

  .invitation__collage {
    height: 330px;
  }

  .invitation__photo {
    top: 12px;
    left: 22%;
    width: 48%;
    height: 88%;
  }

  .invitation__dark {
    right: 7%;
    top: 20%;
    width: 30%;
    height: 66%;
  }

  .gold-brush {
    left: 10%;
    bottom: 12%;
    width: 25%;
    height: 18%;
  }

  .story {
    display: block;
  }

  .story__copy {
    min-height: 420px;
    padding: 52px 32px 58px;
  }

  .story h2 {
    font-size: clamp(39px, 11vw, 52px);
  }

  .story__gold-rule {
    bottom: 34px;
  }

  .story__media {
    height: 360px;
  }

  .venue {
    display: grid;
    grid-template-columns: 18% 37% 45%;
    grid-template-rows: 290px auto;
  }

  .venue__date {
    grid-row: 1;
    font-size: 27px;
  }

  .venue__media {
    grid-row: 1;
    height: 100%;
  }

  .venue__copy {
    grid-column: 1 / 4;
    grid-row: 2;
    padding: 48px 34px 70px 28%;
  }

  .venue__botanical {
    width: 34%;
    right: -6%;
    bottom: -7%;
  }

  .schedule {
    display: grid;
    grid-template-columns: 19% 25% 1px 56%;
    grid-template-rows: auto 300px;
    min-height: 0;
  }

  .schedule__vertical {
    grid-row: 1;
    font-size: 34px;
  }

  .schedule__times {
    grid-row: 1;
    padding: 48px 18px 48px 0;
    font-size: 26px;
  }

  .schedule__line {
    grid-row: 1;
    height: calc(100% - 96px);
  }

  .schedule__events {
    grid-row: 1;
    padding: 48px 16px 48px 18px;
  }

  .schedule__events h3 {
    font-size: 9px;
  }

  .schedule__events p {
    font-size: 10px;
    line-height: 1.42;
  }

  .schedule__media {
    grid-column: 1 / 5;
    grid-row: 2;
  }

  .schedule__media img {
    object-position: 50% 57%;
  }

  .dress {
    padding: 44px 24px 36px;
  }

  .dress__palette {
    grid-template-columns: repeat(3, 1fr);
    min-height: 166px;
  }

  .swatch {
    min-height: 82px;
  }

  .wishes {
    display: block;
  }

  .wishes__copy {
    min-height: 300px;
    padding: 56px 38px;
  }

  .wishes__media {
    height: 280px;
  }

  .gallery {
    padding-left: 24px;
    padding-right: 0;
  }

  .gallery__track {
    display: flex;
    gap: 12px;
    padding-right: 24px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .gallery__track::-webkit-scrollbar {
    display: none;
  }

  .gallery__item {
    flex: 0 0 58vw;
    max-width: 280px;
    scroll-snap-align: start;
  }

  .rsvp {
    display: block;
  }

  .rsvp__form-wrap {
    min-height: 470px;
    padding: 46px 28px 58px;
  }

  .rsvp__finale {
    min-height: 420px;
    border-left: 0;
    border-top: 1px solid rgba(32, 32, 32, 0.1);
    padding: 48px 34px;
  }

  .rsvp__botanical {
    width: 64%;
  }

  .rsvp-form__submit {
    width: 100%;
    min-width: 0;
  }

  .lightbox {
    grid-template-columns: 42px 1fr 42px;
    padding: 26px 10px;
  }

  .lightbox__stage img {
    max-width: 80vw;
  }
}

@media (max-width: 420px) {
  .hero {
    min-height: 650px;
  }

  .hero__copy {
    min-height: 650px;
  }

  .hero__title {
    font-size: clamp(48px, 16.6vw, 68px);
  }

  .hero__media {
    top: 48px;
    width: 78%;
    height: 51%;
  }

  .hero__eyebrow {
    top: 42%;
    font-size: 8px;
  }

  .hero__date strong {
    font-size: 70px;
  }

  .hero__month {
    font-size: 21px;
  }

  .invitation__collage {
    height: 290px;
  }

  .story__copy {
    min-height: 400px;
  }

  .story__media {
    height: 330px;
  }

  .venue {
    grid-template-columns: 18% 39% 43%;
    grid-template-rows: 270px auto;
  }

  .venue__copy {
    padding-left: 22%;
  }

  .schedule {
    grid-template-columns: 18% 26% 1px 56%;
  }

  .schedule__vertical {
    font-size: 30px;
  }

  .schedule__times {
    font-size: 23px;
    padding-right: 14px;
  }

  .schedule__events {
    padding-left: 13px;
    padding-right: 8px;
  }

  .schedule__events p {
    font-size: 9.5px;
  }

  .dress__intro p br {
    display: none;
  }

  .gallery__item {
    flex-basis: 64vw;
  }

  .rsvp h2 {
    font-size: 29px;
  }
}

@media (min-width: 1800px) {
  body {
    padding: 0 24px;
  }

  .page-shell {
    margin-top: 0;
    margin-bottom: 0;
  }
}



/* Additional fluid guards for the exact target viewport families. */
@media (min-width: 1441px) and (max-width: 1799px) {
  .hero__copy { width: 61%; }
  .hero__media { width: 55%; }
  .hero__title { font-size: clamp(112px, 7.35vw, 132px); }
  .invitation__copy { padding-left: clamp(92px, 7vw, 126px); }
}

@media (min-width: 1800px) {
  .hero { min-height: 910px; }
  .hero__title { font-size: 138px; }
  .hero__copy { padding-top: 166px; }
  .hero__date { bottom: 92px; }
  .invitation { min-height: 560px; }
  .story { min-height: 690px; }
  .venue { min-height: 620px; }
  .schedule { min-height: 620px; }
  .wishes { min-height: 410px; }
  .rsvp { min-height: 570px; }
}

@media (max-width: 560px) {
  .hero__copy { padding-left: 22px; padding-right: 22px; }
  .hero__title { font-size: clamp(50px, 16.2vw, 72px); }
  .hero__media { right: -12%; width: 82%; }
  .invitation__copy { padding-left: 24px; padding-right: 22px; }
  .venue__copy { padding-right: 28px; }
  .schedule__events p br { display: none; }
  .rsvp__form-wrap, .rsvp__finale { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 360px) {
  :root { --gutter: 18px; }
  .menu-trigger { left: 18px; }
  .hero { min-height: 620px; }
  .hero__copy { min-height: 620px; padding-left: 18px; padding-right: 18px; }
  .hero__title { font-size: clamp(46px, 15.9vw, 57px); }
  .hero__second-line { gap: 7px; }
  .hero__media { top: 44px; right: -18%; width: 88%; height: 50%; }
  .hero__eyebrow { left: 18px; top: 41%; max-width: 190px; font-size: 7.5px; }
  .hero__date { left: 18px; width: 278px; column-gap: 13px; }
  .hero__date strong { font-size: 64px; }
  .hero__month { font-size: 19px; }
  .invitation__copy { padding-left: 20px; padding-right: 18px; gap: 18px; }
  .invitation h2 { font-size: 22px; }
  .story__copy { padding-left: 24px; padding-right: 24px; }
  .story h2 { font-size: 36px; }
  .venue { grid-template-columns: 18% 41% 41%; }
  .venue__date { font-size: 23px; }
  .venue__copy { padding-left: 20%; padding-right: 20px; }
  .schedule { grid-template-columns: 17% 25% 1px 58%; }
  .schedule__vertical { font-size: 27px; }
  .schedule__times { font-size: 21px; padding-right: 10px; }
  .schedule__events { padding-left: 10px; padding-right: 6px; }
  .schedule__events h3 { font-size: 8.5px; letter-spacing: 0.09em; }
  .schedule__events p { font-size: 9px; }
  .dress { padding-left: 18px; padding-right: 18px; }
  .gallery { padding-left: 18px; }
  .gallery__track { padding-right: 18px; }
  .gallery__item { flex-basis: 72vw; }
  .rsvp h2 { font-size: 27px; }
}

/* =========================================================
   21. Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  [data-reveal],
  [data-reveal="clip"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  [data-reveal="clip"] > img,
  [data-reveal="clip"] .media-parallax,
  .headline-reveal .text-mask > span,
  .hero__title .text-mask > span,
  .hero__amp,
  .hero__eyebrow,
  .hero__date strong,
  .hero__month,
  .hero__date small {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__date-line,
  .hero__date-rule {
    transform: none !important;
  }

  .cursor {
    display: none !important;
  }
}

/* Fine-detail interaction polish */
.venue h2.text-mask > span {
  transform: translateY(108%);
  transition: transform 1.05s var(--ease-luxury);
}

.venue h2.text-mask.is-text-visible > span {
  transform: translateY(0);
}

.swatch.is-active span {
  transform: translateY(-8px);
}

.swatch.is-active::after {
  opacity: 0.75;
  transform: translate(-50%, 0);
}

.rsvp-success.is-visible {
  animation: heroFade 0.75s var(--ease-luxury) both;
}

@media (prefers-reduced-motion: reduce) {
  .venue h2.text-mask > span {
    transform: none !important;
  }
}

/* =========================================================
   22. Wide-screen proportional reconstruction
   ========================================================= */
/*
 * The reference is an editorial composition, so the layout must scale as a
 * composition rather than stop growing at laptop dimensions. 2K screens use
 * almost the full canvas; 4K stays controlled by a larger editorial max-width.
 */
:root {
  --page-max-width: 2800px;
}

@media (min-width: 1181px) {
  :root {
    --gutter: clamp(64px, 5vw, 150px);
  }

  body {
    padding: 0;
  }

  .page-shell {
    width: min(100%, var(--page-max-width));
  }

  .hero {
    min-height: clamp(700px, 54vw, 1420px);
  }

  .hero__copy {
    width: 62%;
    padding-top: clamp(122px, 9.2vw, 250px);
    padding-bottom: clamp(54px, 4vw, 100px);
  }

  .hero__title {
    width: max-content;
    max-width: 114%;
    font-size: clamp(112px, 10.8vw, 300px);
    line-height: 0.79;
  }

  .hero__second-line {
    gap: clamp(20px, 1.7vw, 48px);
    margin-top: clamp(22px, 2vw, 52px);
  }

  .hero__eyebrow {
    margin-top: clamp(38px, 3.5vw, 90px);
    font-size: clamp(10px, 0.76vw, 20px);
  }

  .hero__media {
    width: 56%;
  }

  .hero__date {
    bottom: clamp(54px, 5.8vw, 155px);
    width: clamp(320px, 27vw, 720px);
    column-gap: clamp(22px, 2vw, 54px);
  }

  .hero__date strong {
    font-size: clamp(94px, 8.2vw, 220px);
  }

  .hero__month {
    font-size: clamp(30px, 2.35vw, 62px);
  }

  .hero__date small {
    font-size: clamp(10px, 0.58vw, 15px);
  }

  .invitation {
    min-height: clamp(430px, 33vw, 900px);
  }

  .invitation__copy {
    gap: clamp(42px, 3.3vw, 86px);
    padding: clamp(60px, 5.5vw, 150px) 5vw clamp(54px, 5vw, 130px) clamp(86px, 8vw, 220px);
  }

  .invitation h2 {
    margin-bottom: clamp(26px, 1.8vw, 46px);
    font-size: clamp(31px, 2.3vw, 62px);
  }

  .invitation p:not(.signature) {
    font-size: clamp(15px, 1.02vw, 25px);
  }

  .signature {
    font-size: clamp(34px, 2.4vw, 64px);
  }

  .story {
    min-height: clamp(540px, 41vw, 1120px);
  }

  .story__copy {
    padding: clamp(70px, 6vw, 165px) clamp(64px, 6vw, 165px);
  }

  .story h2 {
    margin: clamp(28px, 2vw, 52px) 0 clamp(32px, 2.2vw, 58px);
    font-size: clamp(52px, 4.4vw, 118px);
  }

  .story__copy > p:last-of-type {
    font-size: clamp(15px, 1.02vw, 25px);
  }

  .venue {
    min-height: clamp(500px, 34vw, 930px);
  }

  .venue__date {
    font-size: clamp(35px, 2.8vw, 74px);
  }

  .venue h2 {
    font-size: clamp(46px, 3.8vw, 100px);
  }

  .venue__copy p:not(.section-kicker) {
    font-size: clamp(14px, 1vw, 24px);
  }

  .section-kicker {
    font-size: clamp(11px, 0.7vw, 18px);
  }

  .schedule {
    min-height: clamp(560px, 40vw, 1100px);
  }

  .schedule__vertical {
    font-size: clamp(40px, 3.25vw, 86px);
  }

  .schedule__times {
    padding-top: clamp(58px, 4.2vw, 115px);
    padding-bottom: clamp(58px, 4.2vw, 115px);
    font-size: clamp(34px, 2.75vw, 72px);
  }

  .schedule__line {
    height: calc(100% - clamp(116px, 8.4vw, 230px));
  }

  .schedule__events {
    padding-top: clamp(58px, 4.2vw, 115px);
    padding-bottom: clamp(58px, 4.2vw, 115px);
  }

  .schedule__events h3 {
    font-size: clamp(10px, 0.8vw, 19px);
  }

  .schedule__events p {
    font-size: clamp(12px, 0.92vw, 22px);
  }

  .dress {
    padding: clamp(54px, 5vw, 135px) clamp(70px, 6.8vw, 185px) clamp(42px, 4vw, 110px);
  }

  .dress h2,
  .gallery h2 {
    font-size: clamp(35px, 2.7vw, 72px);
  }

  .dress__intro p,
  .dress__note {
    font-size: clamp(12px, 0.9vw, 22px);
  }

  .dress__palette {
    min-height: clamp(96px, 6.8vw, 180px);
  }

  .swatch span {
    font-size: clamp(9px, 0.68vw, 17px);
  }

  .wishes {
    min-height: clamp(330px, 24vw, 660px);
  }

  .wishes__quote {
    font-size: clamp(74px, 5.2vw, 138px);
  }

  .wishes__copy p {
    font-size: clamp(15px, 1.08vw, 26px);
  }

  .gallery {
    padding: clamp(34px, 3vw, 82px) clamp(46px, 5vw, 135px) clamp(32px, 3vw, 82px);
  }

  .gallery__track {
    gap: clamp(14px, 1.2vw, 32px);
  }

  .rsvp {
    min-height: clamp(470px, 30vw, 820px);
  }

  .rsvp__form-wrap,
  .rsvp__finale {
    padding: clamp(54px, 5vw, 135px) clamp(58px, 6vw, 160px);
  }

  .rsvp h2 {
    font-size: clamp(40px, 3.2vw, 84px);
  }

  .rsvp__form-wrap > p,
  .rsvp__finale > p {
    font-size: clamp(11px, 0.86vw, 21px);
  }

  .rsvp-form {
    width: min(100%, 760px);
  }
}

@media (min-width: 2801px) {
  .page-shell {
    width: min(78vw, var(--page-max-width));
  }
}

/* Content must remain visible even when a browser/capture tool restores the
   page at a non-zero scroll position. JavaScript still animates these states,
   but the final state never depends on the observer firing perfectly. */
[data-reveal].is-visible,
[data-reveal="clip"].is-visible {
  visibility: visible;
}

/* =========================================================
   23. Final Art Direction Polish
   Refines the editorial hierarchy without changing the
   reference-driven composition or section order.
   ========================================================= */

/* A calmer typographic hierarchy: preserve the oversized display type,
   but bring supporting copy up to a readable editorial scale. */
@media (min-width: 821px) {
  .hero__title {
    font-size: clamp(76px, 9.9vw, 250px);
    max-width: 109%;
  }

  .hero__copy {
    width: 60%;
  }

  .hero__media {
    width: 54.5%;
  }

  .hero__second-line {
    gap: clamp(15px, 1.75vw, 44px);
    margin-top: clamp(20px, 2.15vw, 48px);
  }

  .hero__eyebrow {
    font-size: clamp(10px, 0.86vw, 19px);
    letter-spacing: 0.155em;
  }

  /* Invitation: a denser, more deliberately layered editorial collage. */
  .invitation__copy {
    padding-left: clamp(72px, 8.2vw, 210px);
    padding-right: clamp(38px, 4.3vw, 110px);
  }

  .invitation h2 {
    font-size: clamp(26px, 2.38vw, 58px);
  }

  .invitation p:not(.signature) {
    font-size: clamp(14px, 1.12vw, 25px);
    line-height: 1.68;
  }

  .invitation__photo {
    top: 7%;
    left: 2%;
    width: 59%;
    height: 89%;
  }

  .invitation__dark {
    right: 10%;
    top: 18%;
    width: 32%;
    height: 73%;
  }

  .invitation__gold-line {
    right: 10%;
    width: 32%;
  }

  .gold-brush {
    left: -1%;
    bottom: 10%;
    width: 21%;
    height: 27%;
    transform: rotate(-1.8deg);
    clip-path: polygon(0 18%, 20% 9%, 51% 13%, 77% 0, 100% 10%, 91% 28%, 100% 42%, 86% 55%, 98% 72%, 72% 100%, 43% 91%, 12% 96%, 0 82%, 8% 61%, 0 45%);
  }

  /* Story: keep the strong 50/50 contrast while restoring copy weight. */
  .story__copy {
    padding-left: clamp(48px, 6.5vw, 170px);
    padding-right: clamp(46px, 5.5vw, 145px);
  }

  .story h2 {
    font-size: clamp(42px, 4.65vw, 116px);
  }

  .story__copy > p:last-of-type {
    font-size: clamp(14px, 1.14vw, 25px);
    line-height: 1.7;
  }

  .story__gold-rule {
    bottom: 13%;
    width: 27%;
  }

  /* Venue: tighten the relationship between date, image, copy and line art. */
  .venue {
    grid-template-columns: 10% 25% 44% 21%;
  }

  .venue__media {
    height: 91%;
  }

  .venue__copy {
    padding-left: 9%;
    padding-right: 7%;
  }

  .venue h2 {
    font-size: clamp(37px, 4vw, 98px);
  }

  .venue__copy p:not(.section-kicker) {
    font-size: clamp(13px, 1.1vw, 24px);
    line-height: 1.62;
  }

  .venue__botanical {
    width: 68%;
    transform: translateX(-4%);
  }

  .venue__botanical .botanical g {
    stroke-width: 1.08;
  }

  /* Schedule: stronger time rhythm, clearer spine and a more involved image. */
  .schedule {
    grid-template-columns: 12% 18% 1px 38% 32%;
  }

  .schedule__times {
    padding-right: 18%;
    font-size: clamp(29px, 2.95vw, 70px);
  }

  .schedule__line {
    background: rgba(159, 130, 81, 0.84);
  }

  .schedule__events {
    padding-left: 9%;
    padding-right: 4%;
  }

  .schedule__events h3 {
    font-size: clamp(10px, 0.88vw, 19px);
    letter-spacing: 0.055em;
  }

  .schedule__events p {
    font-size: clamp(12px, 1vw, 22px);
    line-height: 1.58;
  }

  .schedule__media img {
    object-position: 54% 50%;
  }

  /* Dress code: more invitation-like, less UI-like. */
  .dress__intro p,
  .dress__note {
    font-size: clamp(12px, 0.98vw, 21px);
  }

  .dress__palette {
    min-height: clamp(104px, 7.5vw, 186px);
  }

  .swatch span {
    font-size: clamp(9px, 0.74vw, 17px);
    letter-spacing: 0.095em;
  }

  .swatch:hover,
  .swatch:focus-visible {
    transform: scaleY(1.035);
  }

  .swatch--gold {
    filter: saturate(0.78) brightness(0.98);
    background:
      linear-gradient(105deg, rgba(255,255,255,0.08), transparent 28%, rgba(255,255,255,0.08) 54%, transparent 78%),
      linear-gradient(110deg, #987541 0%, #c9a25f 38%, #a67f49 65%, #c8aa6d 100%);
  }

  /* Wishes: rebalance the split and make the quote a true editorial accent. */
  .wishes__quote {
    top: 5%;
    left: 7.5%;
    font-size: clamp(84px, 6vw, 148px);
  }

  .wishes__copy p {
    margin-left: 7.5%;
    font-size: clamp(14px, 1.18vw, 26px);
    line-height: 1.66;
  }

  .wishes__media img {
    object-position: 48% center;
    filter: sepia(0.06) grayscale(0.12) contrast(1.01) brightness(1.045);
  }

  /* Gallery: same geometry, more intentional crops. */
  .gallery__item:nth-child(1) img { object-position: 46% 44%; }
  .gallery__item:nth-child(2) img { object-position: 50% 48%; }
  .gallery__item:nth-child(3) img { object-position: 54% 50%; }
  .gallery__item:nth-child(4) img { object-position: 54% 48%; filter: grayscale(1) contrast(1.09) brightness(0.94); }
  .gallery__item:nth-child(5) img { object-position: 58% 47%; }

  /* RSVP: stronger final CTA and a clearer hierarchy between monogram and botany. */
  .rsvp {
    grid-template-columns: 51% 49%;
  }

  .rsvp__form-wrap {
    padding-left: clamp(48px, 6.2vw, 165px);
    padding-right: clamp(48px, 6vw, 150px);
  }

  .rsvp h2 {
    font-size: clamp(34px, 3.4vw, 82px);
  }

  .rsvp__form-wrap > p {
    font-size: clamp(11px, 0.96vw, 20px);
    line-height: 1.55;
  }

  .rsvp-form {
    width: min(100%, 610px);
    margin-top: clamp(30px, 2.3vw, 54px);
  }

  .rsvp-form label {
    margin-bottom: clamp(18px, 1.5vw, 28px);
  }

  .rsvp-form input,
  .rsvp-form select {
    min-height: 46px;
    height: 46px;
    font-size: clamp(9px, 0.7vw, 13px);
  }

  .rsvp-form label::after {
    top: 16px;
  }

  .rsvp-form__submit {
    min-width: clamp(260px, 20vw, 360px);
    height: clamp(54px, 4vw, 68px);
    margin-top: 12px;
    font-size: clamp(9px, 0.67vw, 13px);
  }

  .rsvp__finale {
    padding-left: clamp(48px, 5.5vw, 145px);
    padding-right: clamp(42px, 5vw, 125px);
  }

  .rsvp__finale > p {
    max-width: 78%;
    font-size: clamp(19px, 1.92vw, 42px);
  }

  .monogram {
    margin-top: clamp(54px, 5.2vw, 118px);
    font-size: clamp(84px, 8.7vw, 205px);
  }

  .rsvp__botanical {
    right: -1%;
    bottom: -7%;
    width: 49%;
    opacity: 0.82;
  }
}

/* Wide-screen caps: keep the whole layout large and immersive, but stop display
   type and decoration from outgrowing the editorial proportions. */
@media (min-width: 1800px) {
  .hero__title {
    font-size: clamp(154px, 9.25vw, 250px);
  }

  .hero__copy {
    width: 59.5%;
  }

  .hero__media {
    width: 54%;
  }

  .venue__botanical {
    width: 64%;
  }

  .rsvp__botanical {
    width: 46%;
  }
}

/* Tablet polish: preserve the asymmetry while increasing reading comfort. */
@media (min-width: 821px) and (max-width: 1180px) {
  .hero__title {
    font-size: clamp(74px, 10.2vw, 116px);
  }

  .hero__copy {
    width: 62%;
  }

  .hero__media {
    width: 55%;
  }

  .invitation p:not(.signature),
  .story__copy > p:last-of-type,
  .venue__copy p:not(.section-kicker),
  .wishes__copy p {
    font-size: 14px;
  }

  .schedule {
    grid-template-columns: 12% 19% 1px 41% 28%;
  }

  .schedule__events p {
    font-size: 11.5px;
  }

  .rsvp-form input,
  .rsvp-form select {
    min-height: 44px;
    height: 44px;
  }
}

/* Mobile reading comfort and touch targets. The composition remains the same;
   only micro-scale typography and controls are strengthened. */
@media (max-width: 820px) {
  .invitation p:not(.signature) {
    font-size: 14px;
    line-height: 1.62;
  }

  .story__copy > p:last-of-type {
    font-size: 13.5px;
    line-height: 1.66;
  }

  .venue__copy p:not(.section-kicker) {
    font-size: 12.5px;
    line-height: 1.6;
  }

  .schedule__events p {
    font-size: 10.5px;
    line-height: 1.48;
  }

  .dress__intro p,
  .dress__note {
    font-size: 12px;
  }

  .wishes__quote {
    font-size: 84px;
  }

  .wishes__copy p {
    font-size: 14px;
    line-height: 1.62;
  }

  .rsvp__form-wrap > p {
    font-size: 11px;
    line-height: 1.5;
  }

  .rsvp-form input,
  .rsvp-form select {
    min-height: 46px;
    height: 46px;
    font-size: 10px;
  }

  .rsvp-form label::after {
    top: 16px;
  }

  .rsvp-form__submit {
    min-height: 52px;
  }

  .monogram {
    font-size: clamp(82px, 24vw, 118px);
  }

  .rsvp__botanical {
    width: 56%;
    opacity: 0.8;
  }
}

@media (max-width: 420px) {
  .schedule__events p {
    font-size: 9.8px;
  }

  .wishes__copy p {
    font-size: 13.5px;
  }

  .rsvp-form input,
  .rsvp-form select {
    font-size: 9.5px;
  }
}

/* Keep the desktop story headline in the same three-line rhythm as the reference. */
@media (min-width: 821px) {
  .story h2 {
    font-size: clamp(42px, 4.15vw, 108px);
  }

  .story h2 .text-mask > span {
    white-space: nowrap;
  }
}

/* =========================================================
   24. Immersive Editorial Scenes
   Full-screen storytelling, refined typography and
   scroll choreography. These rules intentionally override
   the earlier proportional safeguards without changing the
   reference-driven composition.
   ========================================================= */
:root {
  --font-serif: "Bodoni 72", "Bodoni MT", Didot, "Didot LT STD", "Times New Roman", serif;
  --font-editorial: "Iowan Old Style", Baskerville, "Baskerville Old Face", "Times New Roman", serif;
  --font-sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
}

body {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern" 1, "liga" 1;
}

.hero__title,
.story h2,
.venue h2,
.schedule__vertical,
.schedule__times,
.venue__date,
.monogram {
  font-family: var(--font-serif);
  text-rendering: geometricPrecision;
}

.invitation h2,
.dress h2,
.gallery h2,
.rsvp h2,
.rsvp__finale > p {
  font-family: var(--font-editorial);
}

.section-kicker,
.hero__eyebrow,
.invitation p:not(.signature),
.story__copy > p:last-of-type,
.venue__copy p:not(.section-kicker),
.schedule__events,
.dress__intro p,
.dress__note,
.wishes__copy p,
.rsvp__form-wrap > p,
.rsvp-form {
  font-family: var(--font-sans);
}

.hero__title,
.story h2,
.venue h2,
.dress h2,
.gallery h2,
.rsvp h2,
.rsvp__finale > p {
  text-wrap: balance;
}

.section-kicker {
  letter-spacing: 0.16em;
}

/* Desktop / wide screens: every major idea becomes its own visual scene. */
@media (min-width: 1181px) {
  .hero {
    min-height: clamp(780px, 100svh, 1320px);
  }

  .hero__copy {
    min-height: inherit;
    padding-top: clamp(132px, 13vh, 220px);
  }

  .hero__title {
    font-size: clamp(112px, 9.15vw, 238px);
    line-height: 0.815;
    letter-spacing: -0.052em;
  }

  .hero__eyebrow {
    font-size: clamp(11px, 0.72vw, 18px);
    font-weight: 500;
    letter-spacing: 0.18em;
  }

  .invitation {
    min-height: clamp(700px, 88svh, 1080px);
  }

  .story {
    min-height: clamp(760px, 100svh, 1250px);
  }

  .venue {
    min-height: clamp(720px, 95svh, 1180px);
  }

  .schedule {
    min-height: clamp(760px, 100svh, 1240px);
  }

  .dress {
    min-height: clamp(520px, 68svh, 780px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .wishes {
    min-height: clamp(650px, 86svh, 1000px);
  }

  .gallery {
    min-height: clamp(560px, 76svh, 880px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .rsvp {
    min-height: clamp(760px, 100svh, 1180px);
  }

  .invitation h2 {
    font-size: clamp(31px, 2.25vw, 58px);
    line-height: 1.02;
    letter-spacing: 0.075em;
  }

  .invitation p:not(.signature),
  .story__copy > p:last-of-type,
  .venue__copy p:not(.section-kicker),
  .wishes__copy p {
    font-size: clamp(15px, 0.96vw, 23px);
  }

  .story h2 {
    font-size: clamp(54px, 4.15vw, 104px);
    line-height: 0.91;
    letter-spacing: 0.032em;
  }

  .venue h2 {
    font-size: clamp(48px, 3.6vw, 88px);
    line-height: 0.94;
    letter-spacing: -0.012em;
  }

  .schedule__vertical {
    font-size: clamp(43px, 3.05vw, 76px);
    letter-spacing: 0.015em;
  }

  .schedule__times {
    font-size: clamp(37px, 2.75vw, 66px);
  }

  .schedule__events h3 {
    font-size: clamp(11px, 0.76vw, 17px);
    letter-spacing: 0.085em;
  }

  .schedule__events p {
    font-size: clamp(13px, 0.88vw, 20px);
    line-height: 1.58;
  }

  .dress h2,
  .gallery h2 {
    font-size: clamp(38px, 2.55vw, 62px);
    line-height: 0.96;
    letter-spacing: 0.045em;
  }

  .dress__intro p,
  .dress__note {
    font-size: clamp(13px, 0.82vw, 19px);
    line-height: 1.55;
  }

  .gallery__track {
    margin-top: clamp(34px, 4vh, 62px);
  }

  .gallery__item {
    aspect-ratio: 1.28 / 1;
  }

  .rsvp h2 {
    font-size: clamp(42px, 3.15vw, 76px);
    line-height: 0.91;
    letter-spacing: 0.018em;
  }

  .rsvp__finale > p {
    font-size: clamp(22px, 1.7vw, 38px);
    line-height: 1.13;
    letter-spacing: 0.07em;
  }

  .monogram {
    font-size: clamp(104px, 8.8vw, 205px);
  }
}

/* The scroll experience remains fluid: no forced snapping, only stronger
   section presence and consistent anchor breathing room. */
.section {
  scroll-margin-top: 2px;
}

/* Scene choreography is progressive enhancement: content is hidden only after
   JavaScript has confirmed that the scene observer is running. */
body.scene-motion .invitation .vertical-rule,
body.scene-motion .invitation h2,
body.scene-motion .invitation p:not(.signature),
body.scene-motion .invitation .signature,
body.scene-motion .story .section-kicker,
body.scene-motion .story__copy > p:last-of-type,
body.scene-motion .story__gold-rule,
body.scene-motion .venue__date span,
body.scene-motion .venue__copy .section-kicker,
body.scene-motion .venue__rule,
body.scene-motion .venue__copy p:not(.section-kicker),
body.scene-motion .schedule__times span,
body.scene-motion .schedule__line,
body.scene-motion .schedule__events article,
body.scene-motion .dress__intro,
body.scene-motion .dress__palette .swatch,
body.scene-motion .dress__note,
body.scene-motion .wishes__quote,
body.scene-motion .wishes__copy p,
body.scene-motion .gallery h2,
body.scene-motion .gallery__item,
body.scene-motion .rsvp__form-wrap > p,
body.scene-motion .rsvp-form label,
body.scene-motion .rsvp-form__submit,
body.scene-motion .rsvp__finale > p,
body.scene-motion .monogram {
  transition-property: opacity, transform;
  transition-duration: 1s;
  transition-timing-function: var(--ease-luxury);
}

body.scene-motion .invitation:not(.is-scene-seen) .vertical-rule {
  transform: scaleY(0);
  transform-origin: top;
}

body.scene-motion .invitation:not(.is-scene-seen) h2,
body.scene-motion .invitation:not(.is-scene-seen) p:not(.signature),
body.scene-motion .invitation:not(.is-scene-seen) .signature,
body.scene-motion .story:not(.is-scene-seen) .section-kicker,
body.scene-motion .story:not(.is-scene-seen) .story__copy > p:last-of-type,
body.scene-motion .venue:not(.is-scene-seen) .venue__copy .section-kicker,
body.scene-motion .venue:not(.is-scene-seen) .venue__copy p:not(.section-kicker),
body.scene-motion .dress:not(.is-scene-seen) .dress__intro,
body.scene-motion .dress:not(.is-scene-seen) .dress__note,
body.scene-motion .wishes:not(.is-scene-seen) .wishes__quote,
body.scene-motion .wishes:not(.is-scene-seen) .wishes__copy p,
body.scene-motion .gallery:not(.is-scene-seen) h2,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp__form-wrap > p,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp__finale > p,
body.scene-motion .rsvp:not(.is-scene-seen) .monogram {
  opacity: 0;
  transform: translateY(24px);
}

body.scene-motion .invitation.is-scene-seen h2 { transition-delay: 0.08s; }
body.scene-motion .invitation.is-scene-seen p:not(.signature) { transition-delay: 0.2s; }
body.scene-motion .invitation.is-scene-seen .signature { transition-delay: 0.34s; }
body.scene-motion .invitation.is-scene-seen .vertical-rule { transition: transform 1.35s var(--ease-luxury) 0.02s; }

body.scene-motion .story:not(.is-scene-seen) .story__gold-rule {
  transform: scaleX(0);
  transform-origin: right;
}
body.scene-motion .story.is-scene-seen .section-kicker { transition-delay: 0.02s; }
body.scene-motion .story.is-scene-seen .story__copy > p:last-of-type { transition-delay: 0.36s; }
body.scene-motion .story.is-scene-seen .story__gold-rule {
  transition: transform 1.4s var(--ease-luxury) 0.48s;
}

body.scene-motion .venue:not(.is-scene-seen) .venue__date span,
body.scene-motion .schedule:not(.is-scene-seen) .schedule__times span,
body.scene-motion .schedule:not(.is-scene-seen) .schedule__events article,
body.scene-motion .dress:not(.is-scene-seen) .dress__palette .swatch,
body.scene-motion .gallery:not(.is-scene-seen) .gallery__item,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp-form label,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp-form__submit {
  opacity: 0;
  transform: translateY(28px);
}

body.scene-motion .venue:not(.is-scene-seen) .venue__rule {
  transform: scaleX(0);
  transform-origin: left;
}
body.scene-motion .venue.is-scene-seen .venue__date span:nth-child(1) { transition-delay: 0.02s; }
body.scene-motion .venue.is-scene-seen .venue__date span:nth-child(2) { transition-delay: 0.11s; }
body.scene-motion .venue.is-scene-seen .venue__date span:nth-child(3) { transition-delay: 0.2s; }
body.scene-motion .venue.is-scene-seen .venue__copy .section-kicker { transition-delay: 0.16s; }
body.scene-motion .venue.is-scene-seen .venue__rule { transition: transform 1.2s var(--ease-luxury) 0.4s; }
body.scene-motion .venue.is-scene-seen .venue__address { transition-delay: 0.48s; }
body.scene-motion .venue.is-scene-seen .venue__copy p:last-child { transition-delay: 0.58s; }

body.scene-motion .schedule:not(.is-scene-seen) .schedule__line {
  transform: scaleY(0);
  transform-origin: top;
}
body.scene-motion .schedule.is-scene-seen .schedule__line {
  transition: transform 1.6s var(--ease-luxury) 0.08s;
}
body.scene-motion .schedule.is-scene-seen .schedule__times span:nth-child(1),
body.scene-motion .schedule.is-scene-seen .schedule__events article:nth-child(1) { transition-delay: 0.08s; }
body.scene-motion .schedule.is-scene-seen .schedule__times span:nth-child(2),
body.scene-motion .schedule.is-scene-seen .schedule__events article:nth-child(2) { transition-delay: 0.18s; }
body.scene-motion .schedule.is-scene-seen .schedule__times span:nth-child(3),
body.scene-motion .schedule.is-scene-seen .schedule__events article:nth-child(3) { transition-delay: 0.28s; }
body.scene-motion .schedule.is-scene-seen .schedule__times span:nth-child(4),
body.scene-motion .schedule.is-scene-seen .schedule__events article:nth-child(4) { transition-delay: 0.38s; }

body.scene-motion .dress.is-scene-seen .dress__palette .swatch:nth-child(1) { transition-delay: 0.08s; }
body.scene-motion .dress.is-scene-seen .dress__palette .swatch:nth-child(2) { transition-delay: 0.13s; }
body.scene-motion .dress.is-scene-seen .dress__palette .swatch:nth-child(3) { transition-delay: 0.18s; }
body.scene-motion .dress.is-scene-seen .dress__palette .swatch:nth-child(4) { transition-delay: 0.23s; }
body.scene-motion .dress.is-scene-seen .dress__palette .swatch:nth-child(5) { transition-delay: 0.28s; }
body.scene-motion .dress.is-scene-seen .dress__palette .swatch:nth-child(6) { transition-delay: 0.33s; }
body.scene-motion .dress.is-scene-seen .dress__note { transition-delay: 0.42s; }

body.scene-motion .wishes.is-scene-seen .wishes__quote { transition-delay: 0.04s; }
body.scene-motion .wishes.is-scene-seen .wishes__copy p { transition-delay: 0.18s; }

body.scene-motion .gallery.is-scene-seen .gallery__item:nth-child(1) { transition-delay: 0.1s; }
body.scene-motion .gallery.is-scene-seen .gallery__item:nth-child(2) { transition-delay: 0.17s; }
body.scene-motion .gallery.is-scene-seen .gallery__item:nth-child(3) { transition-delay: 0.24s; }
body.scene-motion .gallery.is-scene-seen .gallery__item:nth-child(4) { transition-delay: 0.31s; }
body.scene-motion .gallery.is-scene-seen .gallery__item:nth-child(5) { transition-delay: 0.38s; }

body.scene-motion .rsvp.is-scene-seen .rsvp__form-wrap > p { transition-delay: 0.18s; }
body.scene-motion .rsvp.is-scene-seen .rsvp-form label:nth-child(1) { transition-delay: 0.28s; }
body.scene-motion .rsvp.is-scene-seen .rsvp-form label:nth-child(2) { transition-delay: 0.36s; }
body.scene-motion .rsvp.is-scene-seen .rsvp-form label:nth-child(3) { transition-delay: 0.44s; }
body.scene-motion .rsvp.is-scene-seen .rsvp-form__submit { transition-delay: 0.52s; }
body.scene-motion .rsvp.is-scene-seen .rsvp__finale > p { transition-delay: 0.1s; }
body.scene-motion .rsvp.is-scene-seen .monogram { transition-delay: 0.3s; }

/* Subtle continuous depth. The JS variable is intentionally capped to a few
   pixels, so the composition never drifts away from the reference. */
.gold-brush,
.venue__botanical,
.rsvp__botanical {
  translate: 0 var(--scene-y, 0px);
}

.is-scene-active .botanical path {
  stroke-width: 1.45;
}

/* More deliberate editorial whitespace and reading measure. */
.invitation p:not(.signature),
.story__copy > p:last-of-type,
.venue__copy p:not(.section-kicker),
.schedule__events p,
.wishes__copy p {
  max-width: 34em;
}

.rsvp-success p span {
  display: inline-block;
  margin-top: 8px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.55em;
  letter-spacing: 0.14em;
}

/* Tablet: preserve the editorial scenes, but let content height win when needed. */
@media (min-width: 821px) and (max-width: 1180px) {
  .hero { min-height: clamp(760px, 96svh, 1040px); }
  .invitation { min-height: clamp(620px, 78svh, 860px); }
  .story { min-height: clamp(720px, 92svh, 1000px); }
  .venue { min-height: clamp(660px, 86svh, 940px); }
  .schedule { min-height: clamp(700px, 92svh, 1000px); }
  .dress { min-height: clamp(460px, 58svh, 650px); }
  .wishes { min-height: clamp(540px, 72svh, 760px); }
  .gallery { min-height: clamp(500px, 64svh, 700px); }
  .rsvp { min-height: clamp(680px, 88svh, 960px); }

  .hero__title { line-height: 0.82; letter-spacing: -0.05em; }
  .story h2 { line-height: 0.92; }
  .venue h2 { letter-spacing: -0.01em; }
}

/* Mobile gets scene-like pacing without forcing every content-heavy section
   into a rigid viewport box. */
@media (max-width: 820px) {
  .hero {
    min-height: clamp(650px, 100svh, 940px);
  }

  .hero__copy {
    min-height: inherit;
  }

  .hero__title {
    line-height: 0.82;
    letter-spacing: -0.055em;
  }

  .invitation__copy {
    padding-top: clamp(60px, 9vh, 92px);
    padding-bottom: clamp(48px, 7vh, 74px);
  }

  .invitation__collage {
    min-height: clamp(330px, 46svh, 440px);
  }

  .story__copy {
    min-height: clamp(430px, 54svh, 560px);
  }

  .story__media {
    height: clamp(360px, 46svh, 500px);
  }

  .story h2 {
    line-height: 0.91;
    letter-spacing: 0.025em;
  }

  .venue {
    min-height: 100svh;
    grid-template-rows: minmax(290px, 42svh) auto;
  }

  .venue__copy {
    min-height: 48svh;
  }

  .schedule {
    min-height: 100svh;
    grid-template-rows: auto minmax(300px, 40svh);
  }

  .dress {
    min-height: clamp(500px, 68svh, 650px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .wishes__copy {
    min-height: clamp(330px, 45svh, 430px);
  }

  .wishes__media {
    height: clamp(300px, 42svh, 410px);
  }

  .gallery {
    min-height: clamp(560px, 72svh, 720px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .rsvp__form-wrap {
    min-height: clamp(560px, 76svh, 720px);
  }

  .rsvp__finale {
    min-height: clamp(480px, 64svh, 640px);
  }

  .invitation h2,
  .dress h2,
  .gallery h2,
  .rsvp h2 {
    font-family: var(--font-editorial);
  }

  .section-kicker {
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.scene-motion .section * {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }

  body.scene-motion .vertical-rule,
  body.scene-motion .schedule__line,
  body.scene-motion .venue__rule,
  body.scene-motion .story__gold-rule {
    transform: none !important;
  }
}

/* =========================================================
   25. Orientation and mobile typographic fixes
   ========================================================= */
:root {
  --font-script: "Snell Roundhand", "Segoe Script", "URW Chancery L", "Apple Chancery", "Brush Script MT", cursive;
}

/* Preserve intrinsic rotated typography when reveal motion is applied. */
.venue__date[data-reveal="up"],
.schedule__vertical[data-reveal="up"] {
  transform: rotate(180deg);
}

.venue__date[data-reveal="up"]:not(.is-visible),
.schedule__vertical[data-reveal="up"]:not(.is-visible) {
  opacity: 0;
  translate: 0 42px;
}

.venue__date[data-reveal="up"].is-visible,
.schedule__vertical[data-reveal="up"].is-visible {
  opacity: 1;
  translate: 0 0;
}

/* The venue date is one continuous vertical editorial line rather than three
   side-by-side columns. This also prevents clipping on narrow screens. */
.venue__date {
  flex-direction: row;
  justify-content: center;
  gap: clamp(6px, 0.55vw, 14px);
}

@media (max-width: 820px) {
  .venue__date {
    justify-self: stretch;
    width: 100%;
    padding-inline: 8px;
    font-size: clamp(23px, 6.2vw, 27px);
  }

  .story h2 {
    font-size: clamp(33px, 9.35vw, 40px);
    letter-spacing: 0.015em;
  }

  .story h2 .text-mask > span {
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .story h2 {
    font-size: clamp(31px, 9.2vw, 34px);
  }
}

/* =========================================================
   26. Final production polish
   Refines readability, image scale, section presence and
   restrained cinematic pacing without changing composition.
   ========================================================= */
:root {
  --copy-leading: 1.62;
  --scene-pad-y: clamp(88px, 10svh, 168px);
}

body {
  font-synthesis: none;
}

/* A calmer, more readable micro-typography system. */
.section-kicker {
  font-size: clamp(11px, 0.7vw, 14px);
  line-height: 1.35;
}

.invitation p:not(.signature),
.story__copy > p:last-of-type,
.venue__copy p:not(.section-kicker),
.schedule__events p,
.dress__intro p,
.dress__note,
.wishes__copy p,
.rsvp__form-wrap > p {
  text-wrap: pretty;
}

/* Let image scenes breathe and respond subtly to section focus. */
.story__media img,
.venue__media img,
.schedule__media img,
.wishes__media img,
.gallery__item img {
  scale: 1;
  transition:
    scale 2.6s var(--ease-soft),
    filter 0.8s ease,
    transform 1.45s var(--ease-luxury);
}

.story.is-scene-active .story__media img,
.venue.is-scene-active .venue__media img,
.schedule.is-scene-active .schedule__media img,
.wishes.is-scene-active .wishes__media img {
  scale: 1.012;
}

/* Gallery and palette entrances feel more like page composition than UI. */
body.scene-motion .gallery:not(.is-scene-seen) .gallery__item {
  clip-path: inset(0 0 18% 0);
}

body.scene-motion .gallery .gallery__item {
  transition-property: opacity, transform, clip-path;
  transition-duration: 1.05s, 1.05s, 1.35s;
}

body.scene-motion .gallery.is-scene-seen .gallery__item {
  clip-path: inset(0 0 0 0);
}

body.scene-motion .dress:not(.is-scene-seen) .dress__palette .swatch {
  transform: translateY(22px) scaleY(0.9);
  transform-origin: bottom;
}

body.scene-motion .dress.is-scene-seen .dress__palette .swatch {
  transform: translateY(0) scaleY(1);
}

@media (min-width: 1181px) {
  /* Invitation: stronger reading scale, same editorial collage. */
  .invitation {
    min-height: clamp(760px, 92svh, 1160px);
  }

  .invitation__copy {
    padding-top: var(--scene-pad-y);
    padding-bottom: var(--scene-pad-y);
  }

  .invitation p:not(.signature) {
    font-size: clamp(16px, 1vw, 22px);
    line-height: 1.66;
  }

  .signature {
    margin-top: clamp(34px, 3.2vh, 52px);
    font-size: clamp(32px, 2.55vw, 48px);
  }

  .invitation__photo {
    top: 7%;
    left: 4%;
    width: 59%;
    height: 86%;
  }

  .invitation__dark {
    right: 10%;
    top: 21%;
    width: 31%;
    height: 69%;
  }

  /* Story: body copy remains elegant but becomes genuinely readable. */
  .story__copy > p:last-of-type {
    font-size: clamp(16px, 1vw, 22px);
    line-height: var(--copy-leading);
  }

  /* Venue: give the architectural image more authority and reduce dead space. */
  .venue {
    grid-template-columns: 10% 26% 40% 24%;
    min-height: clamp(780px, 100svh, 1240px);
  }

  .venue__media {
    height: 90%;
    align-self: center;
  }

  .venue__copy {
    padding-left: 10%;
    padding-right: 7%;
  }

  .venue__copy p:not(.section-kicker) {
    font-size: clamp(15px, 0.92vw, 20px);
    line-height: 1.62;
  }

  .venue__address {
    margin-bottom: clamp(22px, 2.4vh, 34px);
  }

  .venue__botanical {
    width: 68%;
  }

  /* Schedule: a more balanced image-to-information ratio. */
  .schedule {
    grid-template-columns: 12% 17% 1px 41% 30%;
    min-height: clamp(800px, 102svh, 1280px);
  }

  .schedule__times {
    padding-right: 22%;
  }

  .schedule__events {
    padding-left: 10%;
    padding-right: 8%;
  }

  .schedule__events h3 {
    font-size: clamp(12px, 0.78vw, 17px);
    line-height: 1.3;
  }

  .schedule__events p {
    font-size: clamp(14px, 0.86vw, 19px);
    line-height: 1.58;
  }

  /* Dress code becomes a deliberate visual pause rather than a utility strip. */
  .dress {
    min-height: clamp(600px, 74svh, 900px);
    padding: clamp(86px, 9vh, 148px) clamp(70px, 7vw, 126px);
  }

  .dress h2 {
    font-size: clamp(42px, 2.8vw, 68px);
  }

  .dress__intro p,
  .dress__note {
    font-size: clamp(14px, 0.86vw, 19px);
  }

  .dress__palette {
    min-height: clamp(118px, 9vw, 154px);
    margin-top: clamp(42px, 4.6vh, 68px);
  }

  .swatch span {
    font-size: clamp(9px, 0.72vw, 12px);
  }

  .dress__note {
    margin-top: clamp(28px, 3vh, 42px);
  }

  /* Wishes: slightly stronger copy scale, preserving the split. */
  .wishes__copy p {
    font-size: clamp(16px, 1vw, 22px);
    line-height: 1.64;
  }

  .wishes__quote {
    font-size: clamp(82px, 5.8vw, 126px);
  }

  /* Gallery becomes a true visual spread. */
  .gallery {
    min-height: clamp(650px, 84svh, 980px);
    padding: clamp(84px, 9vh, 142px) clamp(52px, 5vw, 92px);
  }

  .gallery h2 {
    font-size: clamp(44px, 2.9vw, 70px);
    margin-bottom: 0;
  }

  .gallery__track {
    gap: clamp(14px, 1.15vw, 24px);
    margin-top: clamp(46px, 5.2vh, 78px);
  }

  .gallery__item {
    aspect-ratio: 1.12 / 1;
  }

  /* RSVP: make the form feel like a real final scene, not a small footer form. */
  .rsvp {
    min-height: clamp(820px, 102svh, 1260px);
  }

  .rsvp__form-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(86px, 9vh, 150px) clamp(70px, 7vw, 126px);
  }

  .rsvp__form-wrap > p {
    margin-top: 22px;
    font-size: clamp(13px, 0.78vw, 17px);
    line-height: 1.55;
  }

  .rsvp-form {
    width: min(100%, 620px);
    margin-top: clamp(38px, 4.5vh, 62px);
  }

  .rsvp-form label {
    margin-bottom: clamp(22px, 2.6vh, 34px);
  }

  .rsvp-form input,
  .rsvp-form select {
    height: 50px;
    font-size: clamp(10px, 0.65vw, 12px);
    letter-spacing: 0.105em;
  }

  .rsvp-form label::after {
    top: 18px;
  }

  .rsvp-form__submit {
    min-width: 285px;
    height: 58px;
    margin-top: 12px;
    font-size: 10px;
  }

  .rsvp__finale {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(88px, 9vh, 150px) clamp(74px, 7vw, 128px);
  }

  .rsvp__finale > p {
    font-size: clamp(24px, 1.75vw, 40px);
  }

  .monogram {
    margin-top: clamp(62px, 7vh, 108px);
    font-size: clamp(118px, 9.4vw, 218px);
  }

  .rsvp__botanical {
    width: 52%;
    right: -2%;
    bottom: -5%;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .invitation p:not(.signature),
  .story__copy > p:last-of-type,
  .venue__copy p:not(.section-kicker),
  .wishes__copy p {
    font-size: clamp(14px, 1.35vw, 18px);
  }

  .schedule__events p {
    font-size: clamp(12px, 1.15vw, 16px);
  }

  .dress__palette {
    min-height: 108px;
  }

  .gallery {
    min-height: clamp(560px, 70svh, 760px);
  }

  .gallery__item {
    aspect-ratio: 1.16 / 1;
  }

  .rsvp-form input,
  .rsvp-form select {
    min-height: 46px;
    font-size: 10px;
  }
}

@media (max-width: 820px) {
  /* Mobile remains editorial, but reading comfort wins over extreme miniaturisation. */
  .invitation p:not(.signature),
  .story__copy > p:last-of-type,
  .venue__copy p:not(.section-kicker),
  .schedule__events p,
  .dress__intro p,
  .dress__note,
  .wishes__copy p,
  .rsvp__form-wrap > p {
    font-size: clamp(13px, 3.55vw, 15px);
    line-height: 1.58;
  }

  .section-kicker {
    font-size: 10px;
  }

  .dress {
    min-height: clamp(540px, 72svh, 700px);
  }

  .dress__palette {
    min-height: 96px;
  }

  .gallery {
    min-height: clamp(610px, 78svh, 780px);
  }

  .gallery h2 {
    font-size: clamp(30px, 8.4vw, 42px);
  }

  .rsvp-form input,
  .rsvp-form select {
    min-height: 48px;
    font-size: 10px;
  }

  .rsvp-form label {
    margin-bottom: 20px;
  }

  .rsvp-form__submit {
    width: min(100%, 285px);
    min-height: 54px;
  }

  .rsvp-success span {
    font-size: clamp(38px, 11vw, 54px);
  }
}

@media (max-width: 420px) {
  .gallery {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .dress__palette {
    min-height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story__media img,
  .venue__media img,
  .schedule__media img,
  .wishes__media img,
  .gallery__item img {
    scale: 1 !important;
  }
}

/* =========================================================
   27. Visible editorial refinement
   A deliberately stronger pass: larger scene heights, clearer type hierarchy,
   more confident image scale and more legible supporting copy.
   ========================================================= */
:root {
  --font-serif: "Bodoni MT", "Bodoni 72", Didot, "Times New Roman", Georgia, serif;
  --font-editorial: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --scene-copy: clamp(15px, 0.9vw, 19px);
  --scene-leading: 1.62;
}

body {
  letter-spacing: 0.002em;
}

.hero__title,
.story h2,
.venue h2,
.schedule__vertical,
.dress h2,
.gallery h2,
.rsvp h2,
.monogram,
.venue__date,
.schedule__times {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Make the page read as a sequence of distinct scenes on desktop. */
@media (min-width: 1181px) {
  .hero {
    min-height: min(100svh, 980px);
  }

  .invitation {
    min-height: clamp(700px, 88svh, 980px);
    grid-template-columns: 54% 46%;
  }

  .story {
    min-height: min(100svh, 1040px);
    grid-template-columns: 46% 54%;
  }

  .venue {
    min-height: min(100svh, 1040px);
    grid-template-columns: 10% 28% 40% 22%;
  }

  .schedule {
    min-height: min(100svh, 1040px);
    grid-template-columns: 12% 19% 1px 39% 30%;
  }

  .dress {
    min-height: clamp(620px, 72svh, 820px);
  }

  .wishes {
    min-height: clamp(680px, 86svh, 940px);
  }

  .gallery {
    min-height: clamp(680px, 84svh, 920px);
  }

  .rsvp {
    min-height: min(100svh, 1040px);
  }

  /* Hero: more fashion-editorial spacing and a clearer invitation line. */
  .hero__copy {
    width: 61%;
    padding-top: clamp(118px, 12svh, 162px);
  }

  .hero__title {
    font-size: clamp(82px, 8.6vw, 138px);
    line-height: 0.81;
    letter-spacing: -0.052em;
  }

  .hero__second-line {
    margin-top: clamp(20px, 2.3vh, 34px);
  }

  .hero__eyebrow {
    margin-top: clamp(38px, 4.2vh, 62px);
    font-size: clamp(10px, 0.7vw, 13px);
    letter-spacing: 0.17em;
  }

  .hero__date {
    bottom: clamp(62px, 7svh, 94px);
  }

  .hero__media {
    width: 55%;
  }

  /* Invitation: visibly larger copy and a more assertive collage. */
  .invitation__copy {
    gap: clamp(42px, 3.4vw, 62px);
    padding: clamp(90px, 10svh, 148px) 6vw clamp(90px, 10svh, 148px) clamp(80px, 7vw, 126px);
  }

  .vertical-rule {
    min-height: 320px;
  }

  .invitation h2 {
    margin-bottom: 34px;
    font-size: clamp(31px, 2.35vw, 44px);
    letter-spacing: 0.085em;
  }

  .invitation p:not(.signature) {
    font-size: var(--scene-copy);
    line-height: 1.7;
  }

  .signature {
    margin-top: 36px;
    font-size: clamp(35px, 2.6vw, 50px);
  }

  .invitation__photo {
    top: 7%;
    left: 1%;
    width: 66%;
    height: 86%;
  }

  .invitation__dark {
    right: 7%;
    top: 20%;
    width: 34%;
    height: 68%;
  }

  .invitation__gold-line {
    right: 7%;
    width: 34%;
  }

  .gold-brush {
    left: -7%;
    bottom: 14%;
    width: 22%;
    height: 25%;
  }

  /* Story: stronger headline and readable narrative copy. */
  .story__copy {
    padding: clamp(84px, 9svh, 138px) clamp(62px, 6.2vw, 112px);
  }

  .story h2 {
    margin: 34px 0 40px;
    font-size: clamp(54px, 4.5vw, 82px);
    line-height: 0.9;
    letter-spacing: 0.025em;
  }

  .story__copy > p:last-of-type {
    font-size: var(--scene-copy);
    line-height: 1.68;
  }

  .story__gold-rule {
    bottom: 11%;
    width: 30%;
  }

  /* Venue: scale the photograph and tighten the relationship between image and copy. */
  .venue__date {
    font-size: clamp(34px, 2.6vw, 50px);
  }

  .venue__media {
    height: 88%;
    align-self: center;
  }

  .venue__copy {
    padding: 30px 7% 30px 10%;
  }

  .venue h2 {
    margin-top: 27px;
    font-size: clamp(48px, 3.65vw, 70px);
    line-height: 0.95;
    letter-spacing: -0.015em;
  }

  .venue__rule {
    width: 46px;
    margin: 30px 0 30px;
  }

  .venue__copy p:not(.section-kicker) {
    font-size: var(--scene-copy);
    line-height: 1.62;
  }

  .venue__botanical {
    width: 70%;
  }

  /* Schedule: bigger times, clearer copy, and a more cinematic right image. */
  .schedule__vertical {
    font-size: clamp(43px, 3.05vw, 60px);
  }

  .schedule__times {
    padding: 8svh 19% 8svh 0;
    font-size: clamp(38px, 2.75vw, 54px);
  }

  .schedule__line {
    height: calc(100% - 16svh);
  }

  .schedule__events {
    padding: 8svh 8% 8svh 11%;
  }

  .schedule__events h3 {
    margin-bottom: 10px;
    font-size: clamp(12px, 0.74vw, 15px);
    letter-spacing: 0.08em;
  }

  .schedule__events p {
    font-size: clamp(14px, 0.82vw, 17px);
    line-height: 1.6;
  }

  .schedule__media img {
    object-position: 50% 50%;
  }

  /* Dress code: turn the strip into an intentional editorial pause. */
  .dress {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(92px, 10svh, 142px) clamp(72px, 6.5vw, 118px);
  }

  .dress h2 {
    font-size: clamp(48px, 3.15vw, 66px);
    letter-spacing: 0.055em;
  }

  .dress__intro p,
  .dress__note {
    font-size: clamp(14px, 0.82vw, 17px);
    line-height: 1.62;
  }

  .dress__intro p {
    margin-top: 20px;
  }

  .dress__palette {
    min-height: 132px;
    margin-top: clamp(48px, 5.5svh, 72px);
  }

  .swatch span {
    font-size: clamp(10px, 0.68vw, 13px);
    letter-spacing: 0.1em;
  }

  .dress__note {
    margin-top: 30px;
  }

  /* Wishes: richer type scale and a calmer, more immersive split. */
  .wishes__copy {
    padding: clamp(84px, 9svh, 132px) 11%;
  }

  .wishes__quote {
    top: 7%;
    font-size: clamp(96px, 6vw, 128px);
  }

  .wishes__copy p {
    margin-left: 7%;
    font-size: clamp(16px, 1vw, 20px);
    line-height: 1.72;
  }

  /* Gallery: clearly larger images and stronger title. */
  .gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(82px, 9svh, 136px) clamp(54px, 5vw, 92px);
  }

  .gallery h2 {
    font-size: clamp(46px, 3.05vw, 64px);
    letter-spacing: 0.05em;
  }

  .gallery__track {
    gap: clamp(14px, 1.1vw, 22px);
    margin-top: clamp(48px, 5.5svh, 74px);
  }

  .gallery__item {
    aspect-ratio: 1.06 / 1;
  }

  /* RSVP: make the form equal in visual weight to the finale. */
  .rsvp__form-wrap {
    padding: clamp(92px, 10svh, 148px) clamp(72px, 6.5vw, 118px);
  }

  .rsvp h2 {
    font-size: clamp(50px, 3.55vw, 72px);
    line-height: 0.9;
    letter-spacing: 0.012em;
  }

  .rsvp__form-wrap > p {
    margin-top: 24px;
    font-size: clamp(14px, 0.8vw, 17px);
  }

  .rsvp-form {
    width: min(100%, 640px);
    margin-top: clamp(42px, 5svh, 68px);
  }

  .rsvp-form label {
    margin-bottom: 28px;
  }

  .rsvp-form input,
  .rsvp-form select {
    height: 56px;
    font-size: 11px;
  }

  .rsvp-form label::after {
    top: 20px;
  }

  .rsvp-form__submit {
    min-width: 300px;
    height: 60px;
    margin-top: 14px;
    font-size: 10px;
  }

  .rsvp__finale {
    padding: clamp(92px, 10svh, 148px) clamp(72px, 6.5vw, 118px);
  }

  .rsvp__finale > p {
    font-size: clamp(25px, 1.75vw, 36px);
  }

  .monogram {
    margin-top: clamp(64px, 7svh, 104px);
    font-size: clamp(150px, 10vw, 205px);
  }

  .rsvp__botanical {
    width: 48%;
    right: -1%;
    bottom: -4%;
  }
}

/* Tablet gets the same hierarchy, with content-led heights. */
@media (min-width: 821px) and (max-width: 1180px) {
  .invitation { min-height: clamp(680px, 86svh, 920px); }
  .story { min-height: clamp(760px, 96svh, 1040px); }
  .venue { min-height: clamp(720px, 92svh, 980px); }
  .schedule { min-height: clamp(740px, 96svh, 1020px); }
  .wishes { min-height: clamp(620px, 78svh, 840px); }
  .gallery { min-height: clamp(620px, 76svh, 820px); }
  .rsvp { min-height: clamp(760px, 96svh, 1040px); }

  .invitation p:not(.signature),
  .story__copy > p:last-of-type,
  .venue__copy p:not(.section-kicker),
  .schedule__events p,
  .wishes__copy p {
    font-size: clamp(14px, 1.35vw, 17px);
  }
}

/* Mobile: improve reading comfort without creating rigid 100vh traps. */
@media (max-width: 820px) {
  .invitation h2,
  .dress h2,
  .gallery h2,
  .rsvp h2 {
    letter-spacing: 0.045em;
  }

  .invitation p:not(.signature),
  .story__copy > p:last-of-type,
  .venue__copy p:not(.section-kicker),
  .schedule__events p,
  .dress__intro p,
  .dress__note,
  .wishes__copy p,
  .rsvp__form-wrap > p {
    font-size: clamp(14px, 3.7vw, 16px);
    line-height: 1.62;
  }

  .gallery__item {
    aspect-ratio: 1.04 / 1;
  }

  .rsvp-form input,
  .rsvp-form select {
    min-height: 50px;
  }
}

/* More visible but still restrained scene choreography. */
body.scene-motion .invitation:not(.is-scene-seen) h2,
body.scene-motion .invitation:not(.is-scene-seen) p:not(.signature),
body.scene-motion .invitation:not(.is-scene-seen) .signature,
body.scene-motion .story:not(.is-scene-seen) .section-kicker,
body.scene-motion .story:not(.is-scene-seen) .story__copy > p:last-of-type,
body.scene-motion .venue:not(.is-scene-seen) .venue__copy .section-kicker,
body.scene-motion .venue:not(.is-scene-seen) .venue__copy p:not(.section-kicker),
body.scene-motion .dress:not(.is-scene-seen) .dress__intro,
body.scene-motion .dress:not(.is-scene-seen) .dress__note,
body.scene-motion .wishes:not(.is-scene-seen) .wishes__quote,
body.scene-motion .wishes:not(.is-scene-seen) .wishes__copy p,
body.scene-motion .gallery:not(.is-scene-seen) h2,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp__form-wrap > p,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp__finale > p,
body.scene-motion .rsvp:not(.is-scene-seen) .monogram {
  transform: translateY(36px);
}

body.scene-motion .schedule:not(.is-scene-seen) .schedule__times span,
body.scene-motion .schedule:not(.is-scene-seen) .schedule__events article,
body.scene-motion .gallery:not(.is-scene-seen) .gallery__item,
body.scene-motion .dress:not(.is-scene-seen) .dress__palette .swatch,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp-form label,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp-form__submit {
  transform: translateY(36px);
}

body.scene-motion .section.is-scene-seen [data-reveal].is-visible {
  transition-duration: 1.25s;
}

@media (prefers-reduced-motion: reduce) {
  body.scene-motion .section * {
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   22. Live Motion & Interaction Pass
   ========================================================= */

/* The static composition remains intact; these variables only add depth while
   the user is actively scrolling or pointing. */
.hero {
  --hero-mouse-x: 0px;
  --hero-mouse-y: 0px;
  --hero-title-shift: 0px;
  --hero-photo-shift: 0px;
  --hero-scroll-scale: 1;
  --hero-copy-opacity: 1;
  --hero-cue-opacity: 1;
  --hero-amp-drift: 0px;
}

.hero__copy {
  transform: translate3d(0, var(--hero-title-shift), 0);
  opacity: var(--hero-copy-opacity);
  will-change: transform, opacity;
}

.hero__media,
.hero__media.is-visible {
  transform: translate3d(
    var(--hero-mouse-x),
    calc(var(--hero-photo-shift) + var(--hero-mouse-y)),
    0
  ) scale(var(--hero-scroll-scale));
  transform-origin: 72% 48%;
  will-change: transform, clip-path;
}

.hero__amp {
  margin-left: var(--hero-amp-drift);
  transition: margin-left 0.25s linear;
}

.hero__scroll-cue {
  position: absolute;
  z-index: 5;
  right: clamp(20px, 2.4vw, 42px);
  bottom: clamp(22px, 2.5vw, 38px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(32, 32, 32, 0.62);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  opacity: var(--hero-cue-opacity);
  transform: rotate(90deg) translateX(20%);
  transform-origin: right bottom;
  transition: color 0.35s ease;
}

.hero__scroll-cue i {
  position: relative;
  display: block;
  width: 52px;
  height: 1px;
  overflow: hidden;
  background: rgba(32, 32, 32, 0.18);
}

.hero__scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-100%);
  animation: scrollCue 2.25s var(--ease-luxury) 1.8s infinite;
}

.hero__scroll-cue:hover {
  color: var(--gold-deep);
}

@keyframes scrollCue {
  0% { transform: translateX(-105%); }
  48%, 62% { transform: translateX(0); }
  100% { transform: translateX(105%); }
}

/* A very subtle moving paper grain keeps large ivory fields from feeling
   completely static. The steps timing prevents continuous expensive repainting. */
.page-shell::after {
  animation: paperDrift 7s steps(6, end) infinite;
}

@keyframes paperDrift {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-1px, 1px, 0); }
  40% { transform: translate3d(1px, -1px, 0); }
  60% { transform: translate3d(1px, 1px, 0); }
  80% { transform: translate3d(-1px, -1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* One restrained light sweep accompanies the first image reveal. */
body.scene-motion .section .image-reveal {
  isolation: isolate;
}

body.scene-motion .section .image-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%) skewX(-14deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.16) 48%, transparent 100%);
}

body.scene-motion .section.is-scene-seen .image-reveal::before {
  animation: editorialSweep 1.45s var(--ease-luxury) 0.4s both;
}

@keyframes editorialSweep {
  0% { opacity: 0; transform: translateX(-120%) skewX(-14deg); }
  25% { opacity: 0.5; }
  100% { opacity: 0; transform: translateX(130%) skewX(-14deg); }
}

/* Live depth per scene. These transforms are deliberately small: motion is
   perceived, but the original reference composition never changes. */
@media (min-width: 821px) {
  .story.is-scene-seen .story__copy {
    transform: translate3d(0, var(--live-y-a, 0px), 0);
  }

  .story.is-scene-seen .story__media {
    transform: translate3d(0, var(--live-y-b, 0px), 0) scale(var(--live-scale, 1));
  }

  .venue.is-scene-seen .venue__date {
    transform: translate3d(0, var(--live-y-a, 0px), 0);
  }

  .venue.is-scene-seen .venue__media {
    transform: translate3d(0, var(--live-y-b, 0px), 0) scale(var(--live-scale, 1));
  }

  .venue.is-scene-seen .venue__copy {
    transform: translate3d(var(--live-x-a, 0px), var(--live-y-c, 0px), 0);
  }

  .schedule.is-scene-seen .schedule__vertical {
    transform: translate3d(0, var(--live-y-a, 0px), 0) rotate(180deg);
  }

  .schedule.is-scene-seen .schedule__media {
    transform: translate3d(0, var(--live-y-b, 0px), 0) scale(var(--live-scale, 1));
  }

  .wishes.is-scene-seen .wishes__copy {
    transform: translate3d(0, var(--live-y-a, 0px), 0);
  }

  .wishes.is-scene-seen .wishes__media {
    transform: translate3d(0, var(--live-y-b, 0px), 0) scale(var(--live-scale, 1));
  }

  .gallery.is-scene-seen .gallery__track {
    transform: translate3d(var(--live-x-a, 0px), 0, 0);
  }

  .rsvp.is-scene-seen .rsvp__form-wrap {
    transform: translate3d(0, var(--live-y-c, 0px), 0);
  }

  .rsvp.is-scene-seen .rsvp__finale {
    transform: translate3d(0, var(--live-y-a, 0px), 0);
  }

  .story__copy,
  .story__media,
  .venue__date,
  .venue__media,
  .venue__copy,
  .schedule__vertical,
  .schedule__media,
  .wishes__copy,
  .wishes__media,
  .gallery__track,
  .rsvp__form-wrap,
  .rsvp__finale {
    will-change: transform;
  }
}

/* The invitation collage now has genuine pointer depth. */
.invitation__collage {
  --collage-photo-x: 0px;
  --collage-photo-y: 0px;
  --collage-dark-x: 0px;
  --collage-dark-y: 0px;
  --collage-gold-x: 0px;
  --collage-gold-y: 0px;
}

.invitation__photo,
.invitation__dark,
.gold-brush,
.invitation__gold-line {
  transition: transform 0.8s var(--ease-luxury);
  will-change: transform;
}

.invitation__photo,
.invitation__photo.is-visible {
  transform: translate3d(var(--collage-photo-x), var(--collage-photo-y), 0);
}

.invitation__dark {
  transform: translate3d(var(--collage-dark-x), var(--collage-dark-y), 0);
}

.gold-brush {
  transform: translate3d(var(--collage-gold-x), var(--collage-gold-y), 0) rotate(-4deg);
}

.invitation__gold-line {
  transform: translate3d(var(--collage-dark-x), var(--collage-dark-y), 0);
}

.invitation__collage:hover .invitation__photo,
.invitation__collage:hover .invitation__dark,
.invitation__collage:hover .gold-brush,
.invitation__collage:hover .invitation__gold-line {
  transition-duration: 0.18s;
}

/* The schedule is no longer only a reveal: the timeline physically fills as
   the section crosses the viewport and the current event gains focus. */
.schedule {
  --timeline-progress: 0;
}

.schedule__line {
  overflow: visible;
  background: rgba(179, 153, 105, 0.2);
}

.schedule__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(var(--timeline-progress));
  transform-origin: top center;
  will-change: transform;
}

.schedule__events article,
.schedule__times span {
  transition:
    opacity 0.6s var(--ease-luxury),
    transform 0.7s var(--ease-luxury),
    color 0.45s ease;
}

.schedule.is-scene-seen .schedule__events article:not(.is-current):not(.is-passed) {
  opacity: 0.46;
}

.schedule.is-scene-seen .schedule__events article.is-current {
  opacity: 1;
  transform: translate3d(8px, 0, 0);
}

.schedule.is-scene-seen .schedule__events article.is-passed {
  opacity: 0.78;
}

.schedule.is-scene-seen .schedule__times span:not(.is-current):not(.is-passed) {
  color: color-mix(in srgb, var(--gold) 50%, var(--text-main));
  opacity: 0.48;
}

.schedule.is-scene-seen .schedule__times span.is-current {
  color: var(--gold-deep);
  transform: translate3d(-8px, 0, 0) scale(1.08);
}

/* Active scene feedback is almost subliminal, but makes the page feel more
   responsive to the user's position. */
.section .section-kicker,
.section h2,
.section .signature {
  transition-property: color, transform, opacity;
}

.section.is-scene-active .section-kicker {
  color: var(--gold);
}

.story.is-scene-active .section-kicker {
  color: var(--gold-light);
}

/* Menu previews now react to the item under the pointer. */
.menu-overlay__media img {
  transition: opacity 0.32s ease, transform 1.1s var(--ease-luxury), filter 0.5s ease;
}

.menu-overlay__media img.is-switching {
  opacity: 0;
  transform: scale(1.045);
  filter: blur(2px) grayscale(1);
}

.menu-overlay__nav a:hover ~ * {
  pointer-events: none;
}

/* Gallery images have a small physical response to the pointer. */
.gallery__item {
  --gallery-rx: 0deg;
  --gallery-ry: 0deg;
  --gallery-x: 0px;
  --gallery-y: 0px;
  perspective: 900px;
}

body.scene-motion .gallery.is-scene-seen .gallery__item {
  transform: translate3d(var(--gallery-x), var(--gallery-y), 0)
    rotateX(var(--gallery-rx)) rotateY(var(--gallery-ry));
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease-luxury), opacity 0.9s var(--ease-luxury);
}

body.scene-motion .gallery.is-scene-seen .gallery__item:hover {
  transition-duration: 0.12s;
  z-index: 2;
}

.gallery__item img {
  transition: transform 0.9s var(--ease-luxury), filter 0.7s ease;
}

.gallery__item:hover img {
  transform: scale(1.055) translateZ(10px);
  filter: grayscale(0.82) contrast(1.06);
}

/* Swatches respond more clearly while remaining editorial rather than app-like. */
.dress__palette:hover .swatch:not(:hover) {
  opacity: 0.64;
}

.swatch {
  transition:
    flex 0.75s var(--ease-luxury),
    opacity 0.55s ease,
    transform 0.65s var(--ease-luxury),
    filter 0.55s ease;
}

.swatch:hover,
.swatch.is-active {
  flex: 1.2 1 0;
  transform: translateY(-7px);
  filter: saturate(1.04) contrast(1.03);
}

/* Button feedback is slightly more tactile. */
.rsvp-form__submit {
  position: relative;
  overflow: hidden;
}

.rsvp-form__submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(102%);
  transition: transform 0.65s var(--ease-luxury);
}

.rsvp-form__submit span {
  position: relative;
  z-index: 1;
  transition: color 0.45s ease, letter-spacing 0.55s var(--ease-luxury);
}

.rsvp-form__submit:hover::after,
.rsvp-form__submit:focus-visible::after {
  transform: translateY(0);
}

.rsvp-form__submit:hover span,
.rsvp-form__submit:focus-visible span {
  color: #171717;
  letter-spacing: 0.18em;
}

@media (max-width: 820px) {
  .hero__scroll-cue {
    display: none;
  }

  .page-shell::after {
    animation: none;
  }

  .dress__palette:hover .swatch:not(:hover) {
    opacity: 1;
  }

  .swatch:hover,
  .swatch.is-active {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell::after,
  .hero__scroll-cue i::after,
  body.scene-motion .section.is-scene-seen .image-reveal::before {
    animation: none !important;
  }

  .hero__copy,
  .hero__media,
  .story__copy,
  .story__media,
  .venue__date,
  .venue__media,
  .venue__copy,
  .schedule__vertical,
  .schedule__media,
  .wishes__copy,
  .wishes__media,
  .gallery__track,
  .rsvp__form-wrap,
  .rsvp__finale {
    transform: none !important;
    opacity: 1 !important;
  }

  .schedule__line::after {
    transform: scaleY(1) !important;
  }
}

/* Small motion-composition corrections. */
.hero__amp {
  margin-left: 0;
  translate: var(--hero-amp-drift) 0;
}

.schedule__line {
  position: relative;
}

/* Direct image interaction on the major photographic scenes. */
.story__media,
.venue__media,
.schedule__media,
.wishes__media {
  --media-hover-x: 0px;
  --media-hover-y: 0px;
  --media-hover-scale: 1;
}

.story__media img,
.venue__media img,
.schedule__media img,
.wishes__media img {
  transform: translate3d(var(--media-hover-x), var(--media-hover-y), 0)
    scale(var(--media-hover-scale));
  transition: transform 1.1s var(--ease-luxury), filter 0.7s ease;
  will-change: transform;
}

.story__media:hover img,
.venue__media:hover img,
.schedule__media:hover img,
.wishes__media:hover img {
  transition-duration: 0.22s;
}

/* Botanical line art keeps a small amount of life after the draw animation. */
.section.is-scene-active .botanical g {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: botanicalBreath 5.8s ease-in-out infinite alternate;
}

@keyframes botanicalBreath {
  from { transform: rotate(-0.45deg) translate3d(0, 0, 0); }
  to { transform: rotate(0.65deg) translate3d(1px, -3px, 0); }
}

.wishes.is-scene-active .wishes__quote {
  animation: quoteFloat 4.2s ease-in-out infinite alternate;
}

@keyframes quoteFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -8px, 0); }
}

.monogram span,
.monogram b {
  display: inline-block;
  transition: transform 0.9s var(--ease-luxury), color 0.55s ease;
}

.monogram:hover span:first-child {
  transform: translate3d(-8px, -4px, 0);
}

.monogram:hover span:last-child {
  transform: translate3d(8px, 4px, 0);
}

.monogram:hover b {
  transform: translate3d(0, -6px, 0) scale(1.08);
  color: var(--gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  .section.is-scene-active .botanical g,
  .wishes.is-scene-active .wishes__quote {
    animation: none !important;
  }

  .story__media img,
  .venue__media img,
  .schedule__media img,
  .wishes__media img {
    transform: none !important;
  }
}


/* =========================================================
   23. Final composition pass v7
   Restores scroll choreography, removes layout-breaking parallax,
   rebuilds the invitation collage and expands the gallery into a full slider.
   ========================================================= */

/* Major photographic blocks must never escape their own scene. */
.invitation__collage,
.invitation__photo,
.story__media,
.venue__media,
.schedule__media,
.wishes__media,
.gallery__viewport,
.gallery__item {
  overflow: hidden;
}

/* The reveal system remains the primary motion language. Continuous depth
   transforms are deliberately removed from editorial sections. */
@media (min-width: 821px) {
  .story.is-scene-seen .story__copy,
  .story.is-scene-seen .story__media,
  .venue.is-scene-seen .venue__date,
  .venue.is-scene-seen .venue__media,
  .venue.is-scene-seen .venue__copy,
  .schedule.is-scene-seen .schedule__media,
  .wishes.is-scene-seen .wishes__copy,
  .wishes.is-scene-seen .wishes__media,
  .rsvp.is-scene-seen .rsvp__form-wrap,
  .rsvp.is-scene-seen .rsvp__finale {
    transform: none;
  }

  .schedule.is-scene-seen .schedule__vertical {
    transform: rotate(180deg);
  }
}

/* Invitation collage: one photograph, one dark counterweight, one gold accent.
   Every element overlaps intentionally; nothing floats as an isolated square. */
.invitation {
  min-height: clamp(500px, 48vw, 700px);
  grid-template-columns: 55% 45%;
}

.invitation__copy {
  padding-top: clamp(62px, 7vw, 104px);
  padding-bottom: clamp(62px, 7vw, 104px);
}

.invitation__collage {
  position: relative;
  min-height: 100%;
  --collage-photo-x: 0px;
  --collage-photo-y: 0px;
  --collage-dark-x: 0px;
  --collage-dark-y: 0px;
  --collage-gold-x: 0px;
  --collage-gold-y: 0px;
}

.invitation__photo {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 58%;
  height: 72%;
  z-index: 2;
  transform: translate3d(var(--collage-photo-x), calc(-50% + var(--collage-photo-y)), 0);
  box-shadow: 0 24px 46px rgba(20, 18, 15, 0.11);
  transition: transform 1.25s var(--ease-luxury);
}

.invitation__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.invitation__dark {
  position: absolute;
  top: 50%;
  right: 10%;
  width: 30%;
  height: 58%;
  z-index: 3;
  transform: translate3d(var(--collage-dark-x), calc(-50% + var(--collage-dark-y)), 0);
  background: linear-gradient(180deg, #1a1a1a 0%, #101010 100%);
  border: 1px solid rgba(255,255,255,0.045);
  transition: transform 1.35s var(--ease-luxury);
}

.gold-brush {
  position: absolute;
  left: 3%;
  bottom: 16%;
  z-index: 4;
  width: 17%;
  height: 16%;
  transform: translate3d(var(--collage-gold-x), var(--collage-gold-y), 0) rotate(-3deg);
  background:
    linear-gradient(90deg, rgba(190, 150, 78, 0.96), rgba(226, 199, 143, 0.68)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 5px);
  clip-path: polygon(0 15%, 83% 0, 100% 18%, 88% 33%, 100% 51%, 86% 67%, 100% 84%, 72% 100%, 0 85%);
  transition: transform 1.45s var(--ease-luxury);
}

.invitation__gold-line { display: none !important; }

/* The collage animates as a composed group on entry; pointer response stays tiny. */
body.scene-motion .invitation:not(.is-scene-seen) .invitation__photo {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
body.scene-motion .invitation:not(.is-scene-seen) .invitation__dark {
  opacity: 0;
  transform: translate3d(18px, -46%, 0);
}
body.scene-motion .invitation:not(.is-scene-seen) .gold-brush {
  opacity: 0;
  transform: translate3d(-18px, 12px, 0) rotate(-7deg) scale(0.88);
}
body.scene-motion .invitation.is-scene-seen .invitation__photo {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.45s var(--ease-luxury) 0.2s, opacity 0.8s ease 0.2s, transform 1.25s var(--ease-luxury);
}
body.scene-motion .invitation.is-scene-seen .invitation__dark {
  opacity: 1;
  transition: opacity 0.9s ease 0.48s, transform 1.35s var(--ease-luxury) 0.48s;
}
body.scene-motion .invitation.is-scene-seen .gold-brush {
  opacity: 1;
  transition: opacity 0.8s ease 0.72s, transform 1.45s var(--ease-luxury) 0.72s;
}

/* Gallery becomes a full-width editorial carousel. */
.gallery {
  min-height: clamp(620px, 82svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(26px, 3vw, 42px);
  padding: clamp(70px, 8vh, 118px) 0 clamp(72px, 9vh, 126px);
  background: var(--bg-light);
}

.gallery__header {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 0 clamp(30px, 5vw, 78px);
}

.gallery__kicker {
  margin: 0 0 12px;
  font-size: clamp(9px, 0.65vw, 12px);
  letter-spacing: 0.18em;
  color: rgba(32,32,32,0.48);
}

.gallery h2 {
  margin: 0;
  font-size: clamp(38px, 3.55vw, 58px);
  line-height: 0.95;
  letter-spacing: 0.07em;
}

.gallery__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 2px;
}

.gallery__nav {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(32,32,32,0.18);
  border-radius: 50%;
  color: var(--text-main);
  background: transparent;
  font-size: 17px;
  transition: transform 0.55s var(--ease-luxury), border-color 0.45s ease, background-color 0.45s ease;
}

.gallery__nav:hover,
.gallery__nav:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(179,153,105,0.72);
  background: rgba(255,255,255,0.56);
}

.gallery__count {
  min-width: 58px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: rgba(32,32,32,0.62);
}

.gallery__slider,
.gallery__viewport {
  width: 100%;
}

.gallery__viewport {
  padding: clamp(12px, 1.4vw, 22px) 0 clamp(18px, 2vw, 30px);
}

.gallery__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(14px, 1.7vw, 28px);
  padding: 0 clamp(26px, 4vw, 64px);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.gallery__track.is-measuring {
  transition: none;
}

.gallery__item {
  position: relative;
  flex: 0 0 clamp(260px, 27vw, 620px);
  aspect-ratio: 1.24 / 1;
  border: 0;
  padding: 0;
  background: #d8d3ca;
  cursor: pointer;
  opacity: 0.36;
  transform: scale(0.82);
  transform-origin: center center;
  box-shadow: 0 16px 34px rgba(20,18,15,0.05);
  transition: transform 1.05s var(--ease-luxury), opacity 0.85s ease, box-shadow 0.85s ease;
}

.gallery__item.is-near {
  opacity: 0.72;
  transform: scale(0.91);
}

.gallery__item.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 28px 54px rgba(20,18,15,0.12);
  z-index: 2;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transform: scale(1.03);
  transition: transform 1.15s var(--ease-luxury), filter 0.9s ease;
}

.gallery__item.is-active img {
  filter: grayscale(0.12) contrast(1.035) brightness(0.98);
  transform: scale(1);
}

.gallery__item::after {
  content: "VIEW";
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 2;
  color: rgba(255,255,255,0.94);
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.65s var(--ease-luxury);
}

.gallery__item.is-active:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.gallery__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 12px;
}

.gallery__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(179,153,105,0.66);
  background: transparent;
  transition: width 0.55s var(--ease-luxury), background-color 0.45s ease, transform 0.45s var(--ease-luxury);
}

.gallery__dot.is-active {
  width: 26px;
  background: var(--gold);
}

/* Preserve the premium entrance choreography for the slider itself. */
body.scene-motion .gallery:not(.is-scene-seen) .gallery__header,
body.scene-motion .gallery:not(.is-scene-seen) .gallery__slider {
  opacity: 0;
  transform: translateY(34px);
}
body.scene-motion .gallery.is-scene-seen .gallery__header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease 0.04s, transform 1.2s var(--ease-luxury) 0.04s;
}
body.scene-motion .gallery.is-scene-seen .gallery__slider {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease 0.22s, transform 1.25s var(--ease-luxury) 0.22s;
}

/* Motion stays premium: reveal / mask / timeline first, parallax only as accent. */
.story__media img,
.venue__media img,
.schedule__media img,
.wishes__media img {
  transition: transform 1.4s var(--ease-luxury), filter 0.8s ease;
}

@media (max-width: 1024px) {
  .invitation {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .invitation__copy {
    padding-bottom: 34px;
  }
  .invitation__collage {
    min-height: 440px;
  }
  .invitation__photo {
    left: 24%;
    width: min(54vw, 340px);
    height: min(66vw, 380px);
  }
  .invitation__dark {
    right: 10%;
    width: min(27vw, 150px);
    height: min(48vw, 250px);
  }
  .gold-brush {
    left: 18%;
    bottom: 12%;
    width: 90px;
    height: 66px;
  }
  .gallery {
    min-height: clamp(600px, 78svh, 780px);
  }
  .gallery__item {
    flex-basis: clamp(260px, 48vw, 500px);
  }
}

@media (max-width: 767px) {
  .invitation__collage {
    min-height: 360px;
  }
  .invitation__photo {
    left: 18%;
    width: 58vw;
    height: 72vw;
    max-height: 315px;
  }
  .invitation__dark {
    right: 7%;
    width: 28vw;
    min-width: 94px;
    height: 48vw;
    max-height: 210px;
  }
  .gold-brush {
    left: 10%;
    bottom: 11%;
    width: 74px;
    height: 54px;
  }

  .gallery {
    min-height: auto;
    padding-top: 58px;
    padding-bottom: 66px;
    gap: 24px;
  }
  .gallery__header {
    align-items: center;
    padding: 0 20px;
  }
  .gallery__kicker {
    display: none;
  }
  .gallery h2 {
    font-size: clamp(30px, 8vw, 42px);
  }
  .gallery__controls {
    gap: 7px;
  }
  .gallery__nav {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .gallery__count {
    min-width: 48px;
    font-size: 13px;
  }
  .gallery__track {
    gap: 14px;
    padding-inline: 18px;
  }
  .gallery__item {
    flex-basis: 78vw;
    aspect-ratio: 1.02 / 1;
    opacity: 0.3;
    transform: scale(0.88);
  }
  .gallery__item.is-near {
    opacity: 0.6;
    transform: scale(0.94);
  }
  .gallery__item.is-active {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .invitation__photo,
  .invitation__dark,
  .gold-brush,
  .gallery__track,
  .gallery__item,
  .gallery__item img,
  .gallery__header,
  .gallery__slider {
    transition: none !important;
    animation: none !important;
  }
}

/* Slider state must win over the legacy gallery hover transform rules. */
body.scene-motion .gallery.is-scene-seen .gallery__item {
  transform: scale(0.82);
  transition: transform 1.05s var(--ease-luxury), opacity 0.85s ease, box-shadow 0.85s ease;
}
body.scene-motion .gallery.is-scene-seen .gallery__item.is-near {
  transform: scale(0.91);
}
body.scene-motion .gallery.is-scene-seen .gallery__item.is-active {
  transform: scale(1);
}
body.scene-motion .gallery.is-scene-seen .gallery__item:hover {
  transform: scale(1);
}


/* =========================================================
   24. Invitation collage clarification pass v8
   One clear photo + one background counterweight + one restrained gold accent.
   ========================================================= */
.invitation__collage {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  isolation: isolate;
}

.invitation__photo {
  top: 50% !important;
  left: 10% !important;
  width: 62% !important;
  height: 72% !important;
  z-index: 2 !important;
  transform: translate3d(var(--collage-photo-x, 0px), calc(-50% + var(--collage-photo-y, 0px)), 0) !important;
  box-shadow: 0 22px 46px rgba(24, 22, 18, 0.10);
}

.invitation__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

.invitation__dark {
  top: 50% !important;
  right: 9% !important;
  width: 24% !important;
  height: 54% !important;
  z-index: 1 !important;
  transform: translate3d(var(--collage-dark-x, 0px), calc(-50% + var(--collage-dark-y, 0px)), 0) !important;
  background: #151515 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.invitation__dark::after {
  content: none !important;
}

.gold-brush {
  left: 4% !important;
  bottom: 17% !important;
  width: 15% !important;
  height: 11% !important;
  z-index: 3 !important;
  transform: translate3d(var(--collage-gold-x, 0px), var(--collage-gold-y, 0px), 0) rotate(-2deg) !important;
  background: linear-gradient(90deg, rgba(181, 144, 76, 0.96), rgba(211, 178, 113, 0.78)) !important;
  clip-path: polygon(0 18%, 84% 0, 100% 22%, 90% 40%, 100% 60%, 86% 78%, 100% 100%, 0 84%) !important;
  opacity: 0.92;
  filter: none !important;
}

/* Prevent the collage from visually fragmenting during the reveal. */
body.scene-motion .invitation:not(.is-scene-seen) .invitation__dark {
  transform: translate3d(12px, -50%, 0) !important;
}
body.scene-motion .invitation:not(.is-scene-seen) .gold-brush {
  transform: translate3d(-12px, 8px, 0) rotate(-4deg) scale(0.94) !important;
}
body.scene-motion .invitation.is-scene-seen .invitation__photo {
  transform: translate3d(var(--collage-photo-x, 0px), calc(-50% + var(--collage-photo-y, 0px)), 0) !important;
}
body.scene-motion .invitation.is-scene-seen .invitation__dark {
  transform: translate3d(var(--collage-dark-x, 0px), calc(-50% + var(--collage-dark-y, 0px)), 0) !important;
}
body.scene-motion .invitation.is-scene-seen .gold-brush {
  transform: translate3d(var(--collage-gold-x, 0px), var(--collage-gold-y, 0px), 0) rotate(-2deg) !important;
}

@media (max-width: 1024px) {
  .invitation__collage {
    min-height: 420px;
  }
  .invitation__photo {
    left: 22% !important;
    width: min(58vw, 360px) !important;
    height: min(68vw, 390px) !important;
  }
  .invitation__dark {
    right: 8% !important;
    width: min(24vw, 145px) !important;
    height: min(46vw, 245px) !important;
  }
  .gold-brush {
    left: 15% !important;
    bottom: 14% !important;
    width: 82px !important;
    height: 54px !important;
  }
}

@media (max-width: 767px) {
  .invitation__collage {
    min-height: 340px;
  }
  .invitation__photo {
    left: 18% !important;
    width: 58vw !important;
    height: 68vw !important;
    max-height: 305px !important;
  }
  .invitation__dark {
    right: 7% !important;
    width: 24vw !important;
    min-width: 88px !important;
    height: 44vw !important;
    max-height: 195px !important;
  }
  .gold-brush {
    left: 10% !important;
    bottom: 13% !important;
    width: 66px !important;
    height: 44px !important;
  }
}


/* =========================================================
   25. Invitation editorial rebuild v9
   A clear hierarchy: photograph first, dark counterweight behind it,
   restrained gold leaf accent. No pointer parallax in this scene.
   ========================================================= */
.invitation {
  grid-template-columns: 44% 56% !important;
  min-height: clamp(560px, 42vw, 720px) !important;
}

.invitation__copy {
  align-content: center;
  padding:
    clamp(70px, 8vw, 126px)
    clamp(42px, 5vw, 82px)
    clamp(70px, 8vw, 126px)
    clamp(74px, 8vw, 126px) !important;
}

.invitation__copy > div {
  max-width: 430px;
}

.invitation__collage {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.invitation__photo {
  position: absolute !important;
  top: 50% !important;
  left: 12% !important;
  width: 64% !important;
  height: 76% !important;
  z-index: 3 !important;
  transform: translate3d(0, -50%, 0) !important;
  box-shadow: 0 24px 54px rgba(25, 22, 18, 0.12) !important;
  transition:
    clip-path 1.45s var(--ease-luxury),
    opacity 0.85s ease,
    transform 1.3s var(--ease-luxury) !important;
}

.invitation__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 48%;
  filter: grayscale(1) contrast(1.045);
  transform: scale(1.025);
  transition: transform 1.6s var(--ease-luxury), filter 0.8s ease;
}

.invitation__collage:hover .invitation__photo img {
  transform: scale(1.012);
  filter: grayscale(0.92) contrast(1.035);
}

.invitation__dark {
  position: absolute !important;
  top: 55% !important;
  right: 7% !important;
  width: 27% !important;
  height: 62% !important;
  z-index: 1 !important;
  transform: translate3d(0, -50%, 0) !important;
  background: linear-gradient(180deg, #191919 0%, #111112 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1;
}

.invitation__dark::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.gold-brush {
  position: absolute !important;
  left: 7% !important;
  bottom: 13% !important;
  width: clamp(76px, 14%, 118px) !important;
  height: clamp(48px, 8%, 68px) !important;
  z-index: 2 !important;
  transform: rotate(-4deg) !important;
  border-radius: 42% 12% 36% 18% / 27% 34% 22% 38% !important;
  clip-path: none !important;
  background: linear-gradient(100deg, rgba(181, 143, 74, 0.96), rgba(220, 190, 128, 0.76)) !important;
  opacity: 0.88;
  filter: saturate(0.92) !important;
  overflow: hidden;
}

.gold-brush::after {
  content: "";
  position: absolute;
  inset: 8% 3%;
  opacity: 0.18;
  background:
    linear-gradient(178deg, transparent 0 18%, rgba(255,255,255,0.65) 19% 21%, transparent 22% 47%, rgba(255,255,255,0.45) 48% 50%, transparent 51% 100%);
  mix-blend-mode: screen;
}

.invitation__collage::after {
  content: "";
  position: absolute;
  left: 7%;
  bottom: 10.5%;
  width: 23%;
  height: 1px;
  z-index: 1;
  background: rgba(179, 153, 105, 0.42);
  transform-origin: left center;
}

/* Premium one-time reveal; the completed collage remains perfectly still. */
body.scene-motion .invitation:not(.is-scene-seen) .invitation__photo {
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0) !important;
  transform: translate3d(-14px, -50%, 0) scale(1.025) !important;
}

body.scene-motion .invitation:not(.is-scene-seen) .invitation__dark {
  opacity: 0 !important;
  transform: translate3d(22px, -50%, 0) !important;
}

body.scene-motion .invitation:not(.is-scene-seen) .gold-brush {
  opacity: 0 !important;
  transform: translate3d(-10px, 8px, 0) rotate(-7deg) scaleX(0.72) !important;
  transform-origin: left center;
}

body.scene-motion .invitation:not(.is-scene-seen) .invitation__collage::after {
  transform: scaleX(0);
}

body.scene-motion .invitation.is-scene-seen .invitation__photo {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  transform: translate3d(0, -50%, 0) !important;
  transition-delay: 0.22s !important;
}

body.scene-motion .invitation.is-scene-seen .invitation__dark {
  opacity: 1 !important;
  transform: translate3d(0, -50%, 0) !important;
  transition: opacity 0.9s ease 0.54s, transform 1.25s var(--ease-luxury) 0.54s !important;
}

body.scene-motion .invitation.is-scene-seen .gold-brush {
  opacity: 0.88 !important;
  transform: rotate(-4deg) !important;
  transition: opacity 0.75s ease 0.8s, transform 1.15s var(--ease-luxury) 0.8s !important;
}

body.scene-motion .invitation.is-scene-seen .invitation__collage::after {
  transform: scaleX(1);
  transition: transform 1.05s var(--ease-luxury) 0.92s;
}

@media (max-width: 1024px) {
  .invitation {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .invitation__copy {
    padding: 68px clamp(28px, 7vw, 72px) 38px !important;
  }

  .invitation__collage {
    min-height: 470px !important;
  }

  .invitation__photo {
    left: 20% !important;
    width: min(60vw, 420px) !important;
    height: min(78vw, 430px) !important;
  }

  .invitation__dark {
    right: 10% !important;
    width: min(27vw, 170px) !important;
    height: min(54vw, 285px) !important;
  }

  .gold-brush {
    left: 14% !important;
    bottom: 12% !important;
  }

  .invitation__collage::after {
    left: 14%;
    width: 22%;
    bottom: 9.5%;
  }
}

@media (max-width: 767px) {
  .invitation__copy {
    padding: 56px 24px 32px !important;
  }

  .invitation__collage {
    min-height: 360px !important;
  }

  .invitation__photo {
    left: 14% !important;
    width: 62vw !important;
    height: 76vw !important;
    max-height: 310px !important;
  }

  .invitation__dark {
    right: 6% !important;
    width: 27vw !important;
    min-width: 94px !important;
    height: 48vw !important;
    max-height: 210px !important;
  }

  .gold-brush {
    left: 8% !important;
    bottom: 12% !important;
    width: 70px !important;
    height: 46px !important;
  }

  .invitation__collage::after {
    left: 8%;
    bottom: 9.5%;
    width: 25%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .invitation__photo,
  .invitation__dark,
  .gold-brush,
  .invitation__collage::after {
    transition: none !important;
  }
}


/* =========================================================
   26. Final cinematic + mobile system v10
   No decorative gold brush. Motion lives inside frames, never in layout.
   ========================================================= */

/* Invitation: one clear photograph and one dark counterweight. */
.gold-brush { display: none !important; }
.invitation__collage::after { display: none !important; }
.invitation__collage {
  --collage-photo-x: 0px;
  --collage-photo-y: 0px;
  --collage-dark-x: 0px;
  --collage-dark-y: 0px;
  overflow: hidden !important;
}
.invitation__photo {
  left: 9% !important;
  width: 66% !important;
  height: 78% !important;
  z-index: 2 !important;
  box-shadow: 0 26px 58px rgba(23, 20, 16, 0.12) !important;
}
.invitation__dark {
  right: 5.5% !important;
  top: 54% !important;
  width: 25% !important;
  height: 61% !important;
  z-index: 1 !important;
}
.invitation__photo img {
  object-position: 50% 47% !important;
}
body.scene-motion .invitation:not(.is-scene-seen) .invitation__photo {
  clip-path: inset(0 100% 0 0) !important;
  opacity: 0 !important;
  transform: translate3d(-24px, -50%, 0) scale(1.025) !important;
}
body.scene-motion .invitation:not(.is-scene-seen) .invitation__dark {
  opacity: 0 !important;
  transform: translate3d(34px, -48%, 0) scaleY(0.94) !important;
}
body.scene-motion .invitation.is-scene-seen .invitation__photo {
  transition: clip-path 1.65s var(--ease-luxury) 0.22s, opacity 0.9s ease 0.22s, transform 1.5s var(--ease-luxury) 0.22s !important;
}
body.scene-motion .invitation.is-scene-seen .invitation__dark {
  transition: opacity 1s ease 0.58s, transform 1.45s var(--ease-luxury) 0.58s !important;
}

/* Motion stays inside cropped media frames. */
.cinematic-motion .story__media .media-parallax,
.cinematic-motion .venue__media .media-parallax,
.cinematic-motion .schedule__media .media-parallax,
.cinematic-motion .wishes__media .media-parallax {
  transform: translate3d(0, var(--cinema-y), 0) scale(var(--cinema-scale));
  transition: transform 0.18s linear;
  will-change: transform;
}
.cinematic-motion .venue__botanical,
.cinematic-motion .rsvp__botanical {
  translate: 0 var(--cinema-y-reverse);
  transition: translate 0.2s linear;
}
.cinematic-motion .gallery__header {
  translate: 0 calc(var(--cinema-y-reverse) * 0.22);
}

/* More deliberate section entry choreography. */
body.scene-motion .section:not(.is-scene-seen) .image-reveal {
  filter: saturate(0.72) contrast(0.96);
}
body.scene-motion .section.is-scene-seen .image-reveal {
  filter: saturate(1) contrast(1);
  transition: filter 1.5s ease 0.18s;
}
body.scene-motion .story:not(.is-scene-seen) .story__copy,
body.scene-motion .venue:not(.is-scene-seen) .venue__copy,
body.scene-motion .wishes:not(.is-scene-seen) .wishes__copy,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp__form-wrap,
body.scene-motion .rsvp:not(.is-scene-seen) .rsvp__finale {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
}
body.scene-motion .story.is-scene-seen .story__copy,
body.scene-motion .venue.is-scene-seen .venue__copy,
body.scene-motion .wishes.is-scene-seen .wishes__copy,
body.scene-motion .rsvp.is-scene-seen .rsvp__form-wrap,
body.scene-motion .rsvp.is-scene-seen .rsvp__finale {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.1s ease, transform 1.45s var(--ease-luxury);
}
body.scene-motion .venue.is-scene-seen .venue__copy { transition-delay: 0.18s; }
body.scene-motion .wishes.is-scene-seen .wishes__copy { transition-delay: 0.12s; }
body.scene-motion .rsvp.is-scene-seen .rsvp__finale { transition-delay: 0.22s; }

/* A subtle highlight sweep, once per image reveal. */
.image-reveal { position: relative; }
.image-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.15) 44%, transparent 68%);
  transform: translate3d(-130%, 0, 0);
  opacity: 0;
}
body.scene-motion .section.is-scene-seen .image-reveal::after {
  animation: premiumImageSweep 1.8s var(--ease-luxury) 0.52s both;
}
@keyframes premiumImageSweep {
  0% { opacity: 0; transform: translate3d(-130%,0,0); }
  25% { opacity: 0.72; }
  100% { opacity: 0; transform: translate3d(130%,0,0); }
}

/* Touch-friendly, genuinely separate mobile composition. */
@media (max-width: 767px) {
  :root { --gutter: clamp(20px, 6vw, 28px) !important; }

  html, body { width: 100%; overflow-x: hidden !important; }
  body { font-size: 15px; }
  .page-shell { width: 100% !important; max-width: none !important; overflow: clip !important; }
  .section { min-width: 0; }
  img { max-width: 100%; }

  /* Hero: full-screen cover with readable overlay. */
  .hero {
    min-height: 100svh !important;
    height: auto !important;
    background: #f4f0e9 !important;
  }
  .hero__copy {
    width: 100% !important;
    min-height: 100svh !important;
    padding: 76px var(--gutter) 38px !important;
  }
  .hero__title {
    width: 100% !important;
    max-width: 92vw !important;
    font-size: clamp(49px, 16.2vw, 72px) !important;
    line-height: 0.84 !important;
    letter-spacing: -0.055em !important;
  }
  .hero__second-line { margin-top: 10px !important; gap: 9px !important; }
  .hero__media {
    top: 0 !important;
    right: -13% !important;
    width: 82% !important;
    height: 59svh !important;
  }
  .hero__media img { object-position: 48% 3% !important; }
  .hero__media::after {
    background: linear-gradient(90deg, #f4f0e9 0%, rgba(244,240,233,0.78) 9%, transparent 30%) !important;
  }
  .hero__eyebrow {
    top: min(46svh, 390px) !important;
    left: var(--gutter) !important;
    width: 190px !important;
    font-size: 8px !important;
    line-height: 1.55 !important;
  }
  .hero__date {
    left: var(--gutter) !important;
    bottom: 38px !important;
    width: min(82vw, 320px) !important;
  }
  .hero__date strong { font-size: clamp(66px, 20vw, 88px) !important; }
  .hero__month { font-size: clamp(21px, 6.2vw, 26px) !important; }
  .hero__scroll-cue { display: none !important; }

  /* Invitation: text first, composed image scene below. */
  .invitation {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .invitation__copy {
    grid-template-columns: 1px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 56px var(--gutter) 34px !important;
  }
  .vertical-rule { min-height: 250px !important; }
  .invitation h2 {
    font-size: clamp(27px, 8.2vw, 38px) !important;
    line-height: 1 !important;
    margin-bottom: 22px !important;
  }
  .invitation p:not(.signature) {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }
  .signature {
    margin-top: 24px !important;
    font-size: clamp(28px, 9vw, 40px) !important;
  }
  .invitation__collage {
    min-height: clamp(350px, 104vw, 440px) !important;
    height: auto !important;
  }
  .invitation__photo {
    top: 48% !important;
    left: 8% !important;
    width: 70% !important;
    height: 82% !important;
    max-height: none !important;
  }
  .invitation__dark {
    top: 54% !important;
    right: 4% !important;
    width: 27% !important;
    min-width: 88px !important;
    height: 57% !important;
    max-height: none !important;
  }

  /* Story: cinematic dark card + full-bleed photograph. */
  .story { display: grid !important; grid-template-columns: 1fr !important; min-height: auto !important; }
  .story__copy {
    min-height: 480px !important;
    padding: 64px var(--gutter) 70px !important;
  }
  .story h2 {
    margin: 24px 0 28px !important;
    font-size: clamp(40px, 11.4vw, 54px) !important;
    line-height: 0.92 !important;
  }
  .story__copy > p:last-of-type { font-size: 14px !important; line-height: 1.7 !important; }
  .story__gold-rule { bottom: 36px !important; width: 34% !important; }
  .story__media { height: min(92vw, 430px) !important; min-height: 0 !important; }
  .story__media img { object-position: 57% 50% !important; }

  /* Venue: date as an editorial heading, not a cramped vertical label. */
  .venue {
    display: grid !important;
    grid-template-columns: 34% 66% !important;
    grid-template-rows: auto auto !important;
    min-height: auto !important;
    padding-top: 34px !important;
  }
  .venue__date {
    grid-column: 1 !important;
    grid-row: 1 !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    font-size: clamp(25px, 7vw, 34px) !important;
    min-height: 370px !important;
  }
  .venue__media {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 370px !important;
    align-self: stretch !important;
  }
  .venue__copy {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding: 52px var(--gutter) 84px !important;
  }
  .venue h2 { font-size: clamp(34px, 10vw, 46px) !important; }
  .venue__copy p:not(.section-kicker) { font-size: 14px !important; line-height: 1.65 !important; }
  .venue__botanical {
    width: 44% !important;
    right: -12% !important;
    bottom: -4% !important;
    opacity: 0.48 !important;
  }

  /* Schedule: true vertical timeline, readable on touch screens. */
  .schedule {
    display: grid !important;
    grid-template-columns: 76px 1px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: auto !important;
    padding: 58px var(--gutter) 0 !important;
  }
  .schedule__vertical {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    justify-self: start !important;
    margin-bottom: 42px !important;
    font-size: clamp(34px, 9.5vw, 44px) !important;
  }
  .schedule__times {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0 16px 0 0 !important;
    font-size: 24px !important;
    min-height: 520px !important;
  }
  .schedule__line {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: 100% !important;
    align-self: stretch !important;
  }
  .schedule__events {
    grid-column: 3 !important;
    grid-row: 2 !important;
    padding: 0 0 0 22px !important;
    min-height: 520px !important;
  }
  .schedule__events h3 { font-size: 10px !important; letter-spacing: 0.06em !important; }
  .schedule__events p { font-size: 12px !important; line-height: 1.55 !important; }
  .schedule__media {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    height: min(102vw, 440px) !important;
    margin: 54px calc(var(--gutter) * -1) 0 !important;
  }
  .schedule__media img { object-position: 50% 60% !important; }

  /* Dress code: six readable touch tiles. */
  .dress { padding: 60px var(--gutter) 52px !important; }
  .dress h2 { font-size: clamp(32px, 9vw, 42px) !important; }
  .dress__intro p, .dress__note { font-size: 13px !important; }
  .dress__palette {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    margin-top: 30px !important;
  }
  .swatch { min-height: 92px !important; }
  .swatch span { font-size: 10px !important; }

  /* Wishes: strong split becomes two full-width scenes. */
  .wishes { display: grid !important; grid-template-columns: 1fr !important; min-height: auto !important; }
  .wishes__copy {
    min-height: 360px !important;
    padding: 70px var(--gutter) 64px !important;
  }
  .wishes__copy p { font-size: 14px !important; line-height: 1.68 !important; }
  .wishes__quote { font-size: 68px !important; }
  .wishes__media { height: min(88vw, 390px) !important; }
  .wishes__media img { object-position: 52% 50% !important; }

  /* Gallery: centered large slide, clear controls and swipe. */
  .gallery {
    min-height: auto !important;
    padding: 64px 0 70px !important;
    gap: 26px !important;
  }
  .gallery__header {
    align-items: flex-end !important;
    padding: 0 var(--gutter) !important;
  }
  .gallery__kicker { display: block !important; font-size: 8px !important; margin-bottom: 8px !important; }
  .gallery h2 { font-size: clamp(31px, 9vw, 42px) !important; }
  .gallery__controls { gap: 6px !important; }
  .gallery__nav { width: 42px !important; height: 42px !important; }
  .gallery__count { min-width: 46px !important; font-size: 12px !important; }
  .gallery__track { gap: 14px !important; padding: 0 8vw !important; }
  .gallery__item {
    flex-basis: 82vw !important;
    max-width: 430px !important;
    aspect-ratio: 0.98 / 1 !important;
  }
  body.scene-motion .gallery.is-scene-seen .gallery__item { transform: scale(0.86) !important; }
  body.scene-motion .gallery.is-scene-seen .gallery__item.is-near { transform: scale(0.93) !important; }
  body.scene-motion .gallery.is-scene-seen .gallery__item.is-active { transform: scale(1) !important; }

  /* RSVP: accessible form followed by an intentional finale. */
  .rsvp { display: grid !important; grid-template-columns: 1fr !important; min-height: auto !important; }
  .rsvp__form-wrap {
    min-height: auto !important;
    padding: 68px var(--gutter) 76px !important;
  }
  .rsvp h2 { font-size: clamp(34px, 10vw, 46px) !important; line-height: 0.94 !important; }
  .rsvp__form-wrap > p { font-size: 12px !important; }
  .rsvp-form label { min-height: 54px !important; }
  .rsvp-form input, .rsvp-form select { min-height: 50px !important; font-size: 13px !important; }
  .rsvp-form__submit { min-height: 50px !important; width: 100% !important; }
  .rsvp__finale {
    min-height: 480px !important;
    padding: 64px var(--gutter) 74px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(32,32,32,0.1) !important;
  }
  .rsvp__finale > p { font-size: 13px !important; }
  .monogram { font-size: clamp(72px, 23vw, 104px) !important; }
  .rsvp__botanical { width: 72% !important; right: -18% !important; bottom: -6% !important; }

  /* Mobile menu + lightbox. */
  .menu-overlay { padding: 86px var(--gutter) 42px !important; }
  .menu-overlay__nav a { min-height: 58px; font-size: clamp(28px, 8.8vw, 42px) !important; }
  .lightbox {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    padding: 18px 6px !important;
  }
  .lightbox__stage img { max-width: 78vw !important; max-height: 72svh !important; }
  .cursor { display: none !important; }
}

@media (max-width: 430px) {
  .hero__title { font-size: clamp(47px, 15.8vw, 67px) !important; }
  .hero__media { width: 86% !important; right: -18% !important; }
  .invitation__photo { width: 72% !important; }
  .venue { grid-template-columns: 31% 69% !important; }
  .schedule { grid-template-columns: 68px 1px minmax(0,1fr) !important; }
  .schedule__times { font-size: 22px !important; padding-right: 12px !important; }
  .schedule__events { padding-left: 18px !important; }
  .gallery__header { gap: 10px !important; }
  .gallery__nav { width: 38px !important; height: 38px !important; }
  .gallery__count { display: none !important; }
}

@media (max-width: 360px) {
  :root { --gutter: 18px !important; }
  .hero__title { font-size: 52px !important; }
  .hero__eyebrow { top: 43svh !important; }
  .invitation__copy { gap: 16px !important; }
  .story h2 { font-size: 38px !important; }
  .venue__media { height: 330px !important; }
  .venue__date { min-height: 330px !important; font-size: 24px !important; }
  .schedule { grid-template-columns: 62px 1px minmax(0,1fr) !important; }
  .schedule__times { font-size: 20px !important; }
  .schedule__events p { font-size: 11px !important; }
  .gallery__item { flex-basis: 84vw !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-motion .media-parallax,
  .cinematic-motion .venue__botanical,
  .cinematic-motion .rsvp__botanical,
  .image-reveal::after {
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   24. Hero media stability fix
   The positioned frame must never move; motion stays inside it.
   ========================================================= */
.hero__media,
.hero__media.is-visible {
  transform: none !important;
  translate: none !important;
}

.hero__media .media-parallax {
  width: 100%;
  height: 100%;
  transform: translate3d(
    var(--hero-mouse-x, 0px),
    calc(var(--hero-photo-shift, 0px) + var(--hero-mouse-y, 0px)),
    0
  ) scale(var(--hero-scroll-scale, 1));
  transform-origin: 62% 42%;
  will-change: transform;
  animation: none !important;
}

.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  transform-origin: 58% 36%;
}

body.hero-ready .hero__media img {
  animation: heroImageSettle 6.5s var(--ease-soft) both;
}

@keyframes heroImageSettle {
  from { transform: scale(1.055); }
  to { transform: scale(1.015); }
}

@media (max-width: 767px) {
  .hero {
    --hero-photo-shift: 0px !important;
    --hero-scroll-scale: 1 !important;
    --hero-mouse-x: 0px !important;
    --hero-mouse-y: 0px !important;
  }
  .hero__media .media-parallax {
    transform: none !important;
  }
  .hero__media img {
    object-position: 49% 2% !important;
    transform-origin: 52% 24%;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .hero__media img {
    object-position: 51% 0% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.hero-ready .hero__media img {
    animation: none !important;
    transform: scale(1.015) !important;
  }
}

/* =========================================================
   25. Mobile hero placement correction
   Keep the portrait anchored to the top-right of the first screen.
   ========================================================= */
@media (max-width: 767px) {
  .hero {
    position: relative !important;
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  .hero__copy {
    position: relative !important;
    z-index: 4 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100svh !important;
    padding: clamp(68px, 9svh, 82px) var(--gutter) 34px !important;
    pointer-events: none;
  }

  .hero__media,
  .hero__media.is-visible {
    position: absolute !important;
    z-index: 1 !important;
    top: 0 !important;
    right: -13% !important;
    bottom: auto !important;
    left: auto !important;
    width: 76% !important;
    height: 64svh !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    overflow: hidden !important;
  }

  .hero__media .media-parallax {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  .hero__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 48% 4% !important;
    transform: scale(1.02) !important;
  }

  body.hero-ready .hero__media img {
    animation: mobileHeroSettle 5.8s var(--ease-soft) both !important;
  }

  .hero__media::after {
    z-index: 2 !important;
    background:
      linear-gradient(90deg, #f4f0e9 0%, rgba(244,240,233,0.92) 8%, rgba(244,240,233,0.38) 24%, transparent 43%),
      linear-gradient(180deg, transparent 72%, rgba(244,240,233,0.22) 100%) !important;
  }

  .hero__title {
    position: relative !important;
    z-index: 5 !important;
    width: min-content !important;
    max-width: 69vw !important;
    font-size: clamp(46px, 14.8vw, 64px) !important;
    line-height: 0.84 !important;
    white-space: nowrap !important;
  }

  .hero__eyebrow {
    position: absolute !important;
    z-index: 5 !important;
    top: 34svh !important;
    left: var(--gutter) !important;
    width: 170px !important;
    margin: 0 !important;
  }

  .hero__date {
    z-index: 5 !important;
    left: var(--gutter) !important;
    bottom: 34px !important;
    width: min(76vw, 300px) !important;
  }
}

@media (max-width: 430px) {
  .hero__media,
  .hero__media.is-visible {
    right: -16% !important;
    width: 80% !important;
    height: 62svh !important;
  }

  .hero__title {
    max-width: 71vw !important;
    font-size: clamp(45px, 14.5vw, 61px) !important;
  }

  .hero__eyebrow {
    top: 32.5svh !important;
  }
}

@media (max-width: 360px) {
  .hero__media,
  .hero__media.is-visible {
    right: -18% !important;
    width: 84% !important;
    height: 60svh !important;
  }

  .hero__title {
    max-width: 73vw !important;
    font-size: 48px !important;
  }

  .hero__eyebrow {
    top: 31svh !important;
    width: 155px !important;
  }
}

@keyframes mobileHeroSettle {
  from { transform: scale(1.055); }
  to { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  body.hero-ready .hero__media img {
    animation: none !important;
    transform: scale(1.02) !important;
  }
}


/* =========================================================
   26. Definitive hero frame + premium typography motion
   ========================================================= */
.hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  --hero-photo-shift: 0px !important;
  --hero-scroll-scale: 1 !important;
}

/* The frame owns layout. It never receives scroll or pointer transforms. */
.hero__media,
.hero__media.is-visible {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  z-index: 1 !important;
  width: 56% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  translate: none !important;
  transform: none !important;
  overflow: hidden !important;
  clip-path: inset(0 0 0 0) !important;
}
.hero__media .hero__image-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate3d(var(--hero-mouse-x, 0px), var(--hero-mouse-y, 0px), 0) !important;
  transition: transform 1.15s cubic-bezier(0.16,1,0.3,1) !important;
  animation: none !important;
}
.hero__media img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 49% 4% !important;
  transform: scale(1.025) !important;
  transform-origin: 55% 32% !important;
}
body.hero-ready .hero__media img {
  animation: heroPortraitBreath 8s cubic-bezier(0.16,1,0.3,1) both !important;
}
@keyframes heroPortraitBreath {
  from { transform: scale(1.045); filter: grayscale(.16) contrast(1.06); }
  to { transform: scale(1.018); filter: grayscale(.08) contrast(1.02); }
}

/* Tablet: preserve the same anchored editorial split. */
@media (min-width: 768px) and (max-width: 1100px) {
  .hero { min-height: clamp(660px, 88vh, 900px) !important; }
  .hero__copy { width: 59% !important; padding-left: clamp(34px, 5vw, 62px) !important; }
  .hero__media, .hero__media.is-visible { width: 55% !important; }
  .hero__media img { object-position: 51% 2% !important; }
}

/* Mobile: image remains fixed in the top-right of the first viewport. */
@media (max-width: 767px) {
  .hero {
    height: 100svh !important;
    min-height: 680px !important;
    max-height: 980px !important;
  }
  .hero__copy {
    position: relative !important;
    z-index: 4 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(64px, 8.5svh, 80px) var(--gutter) 32px !important;
  }
  .hero__media, .hero__media.is-visible {
    inset: 0 -10% auto auto !important;
    width: 78% !important;
    height: 62% !important;
  }
  .hero__media .hero__image-inner { transform: none !important; }
  .hero__media img {
    object-position: 49% 2% !important;
    transform-origin: 53% 24% !important;
  }
  .hero__title {
    position: relative !important;
    z-index: 5 !important;
    width: max-content !important;
    max-width: 76vw !important;
    white-space: nowrap !important;
  }
  .hero__eyebrow {
    position: absolute !important;
    top: 34% !important;
    left: var(--gutter) !important;
    z-index: 5 !important;
  }
  .hero__date {
    left: var(--gutter) !important;
    bottom: 32px !important;
    z-index: 5 !important;
  }
}
@media (max-width: 430px) {
  .hero__media, .hero__media.is-visible { right: -13% !important; width: 82% !important; height: 60% !important; }
  .hero__media img { object-position: 48% 2% !important; }
}
@media (max-width: 360px) {
  .hero { min-height: 640px !important; }
  .hero__media, .hero__media.is-visible { right: -16% !important; width: 86% !important; height: 58% !important; }
  .hero__eyebrow { top: 32% !important; }
}

/* Premium heading choreography. */
.motion-heading {
  position: relative;
}
.motion-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.22em;
  width: clamp(32px, 18%, 90px);
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .75;
  transition: transform 1.05s cubic-bezier(.16,1,.3,1) .35s;
}
.motion-heading.is-type-visible::after { transform: scaleX(1); }
.motion-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: .18em;
}
.motion-word:last-child { margin-right: 0; }
.motion-letter {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 108%, 0) rotate(2deg);
  transition:
    transform 1.05s cubic-bezier(.16,1,.3,1),
    opacity .65s ease;
  transition-delay: calc(.025s * var(--letter-index) + .07s * var(--word-index));
}
.motion-heading.is-type-visible .motion-letter {
  opacity: 1;
  transform: translate3d(0,0,0) rotate(0);
}

/* Masked editorial headings animate only on entrance; hover never changes geometry or color. */
.motion-heading .text-mask > span,
.motion-heading.text-mask > span {
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}

.section-kicker,
.hero__eyebrow,
.signature,
.venue__address,
.dress__note,
.rsvp__form-wrap > p {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .85s ease, transform 1s cubic-bezier(.16,1,.3,1);
}
.section-kicker.is-type-visible,
.hero__eyebrow.is-type-visible,
.signature.is-type-visible,
.venue__address.is-type-visible,
.dress__note.is-type-visible,
.rsvp__form-wrap > p.is-type-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Interactive body copy: color-only focus, never movement of the layout. */
.invitation__copy p:not(.signature),
.story__copy > p:last-of-type,
.venue__copy p:not(.section-kicker),
.schedule__events article,
.schedule__events article h3,
.wishes__copy p {
  transition: color .45s ease, opacity .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero__media .hero__image-inner,
  body.hero-ready .hero__media img,
  .motion-heading,
  .motion-letter,
  .section-kicker,
  .hero__eyebrow,
  .signature,
  .venue__address,
  .dress__note,
  .rsvp__form-wrap > p {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* Hero/title motion refinements */
.hero__title.motion-heading::after { display: none; }
@media (max-width: 767px) {
  .hero__media::after {
    background: linear-gradient(90deg, rgba(244,240,233,.98) 0%, rgba(244,240,233,.78) 26%, rgba(244,240,233,.24) 48%, transparent 66%) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-heading { translate: none !important; }
}

/* Keep the permanent hero readability gradient separate from generic image sweeps. */
.hero__media::after {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* =========================================================
   27. Mobile hero art direction — cohesive first-screen composition
   ========================================================= */
@media (max-width: 767px) {
  body {
    background: var(--bg-main) !important;
  }

  .page-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 568px !important;
    max-height: none !important;
    overflow: hidden !important;
    background: var(--bg-main) !important;
  }

  .menu-trigger {
    top: max(18px, calc(env(safe-area-inset-top) + 12px)) !important;
    left: clamp(18px, 5.2vw, 24px) !important;
    z-index: 12 !important;
  }

  .hero__copy {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  .hero__title {
    position: absolute !important;
    top: clamp(72px, 10.5svh, 94px) !important;
    left: clamp(18px, 5.2vw, 24px) !important;
    z-index: 7 !important;
    width: max-content !important;
    max-width: 80vw !important;
    margin: 0 !important;
    font-size: clamp(47px, 15.1vw, 64px) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
  }

  .hero__second-line {
    margin-top: 0.08em !important;
    gap: 0.12em !important;
  }

  .hero__amp {
    transform: translateY(0.035em) !important;
  }

  .hero__eyebrow {
    position: absolute !important;
    top: clamp(206px, 34.5svh, 292px) !important;
    left: clamp(18px, 5.2vw, 24px) !important;
    z-index: 7 !important;
    width: min(46vw, 174px) !important;
    margin: 0 !important;
    font-size: clamp(8px, 2.25vw, 10px) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.17em !important;
  }

  .hero__media,
  .hero__media.is-visible {
    position: absolute !important;
    top: 0 !important;
    right: -7% !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    width: 81% !important;
    height: 72% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip-path: none !important;
    transform: none !important;
    translate: none !important;
  }

  .hero__media .media-parallax {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  .hero__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 3% !important;
    transform-origin: 54% 26% !important;
  }

  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: var(--bg-main);
    transform: scaleX(0);
    transform-origin: right center;
  }

  body:not(.hero-ready) .hero__media::before {
    transform: scaleX(1);
  }

  body.hero-ready .hero__media::before {
    animation: mobileHeroCurtain 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
  }

  .hero__media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg, var(--bg-main) 0%, rgba(244,240,233,0.92) 13%, rgba(244,240,233,0.42) 31%, transparent 52%),
      linear-gradient(180deg, transparent 72%, rgba(244,240,233,0.18) 82%, var(--bg-main) 100%) !important;
    opacity: 1 !important;
  }

  .hero__date {
    position: absolute !important;
    left: clamp(18px, 5.2vw, 24px) !important;
    right: auto !important;
    bottom: clamp(22px, 4.3svh, 42px) !important;
    z-index: 8 !important;
    width: min(78vw, 314px) !important;
    grid-template-columns: 1px minmax(82px, auto) auto !important;
    column-gap: clamp(14px, 4.4vw, 22px) !important;
  }

  .hero__date strong {
    font-size: clamp(68px, 20.5vw, 88px) !important;
    line-height: 0.72 !important;
  }

  .hero__month {
    padding-bottom: 1px !important;
    font-size: clamp(21px, 6.1vw, 27px) !important;
  }

  .hero__date-rule {
    margin-top: clamp(12px, 2.1svh, 18px) !important;
  }

  .hero__date small {
    padding-top: 10px !important;
    font-size: 9px !important;
  }

  .hero__scroll-cue {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .hero__media,
  .hero__media.is-visible {
    right: -8% !important;
    width: 83% !important;
    height: 71% !important;
  }

  .hero__title {
    font-size: clamp(46px, 15vw, 61px) !important;
  }

  .hero__eyebrow {
    top: clamp(198px, 33.8svh, 278px) !important;
  }
}

@media (max-width: 360px) {
  .hero__title {
    top: 66px !important;
    font-size: clamp(43px, 14.8vw, 52px) !important;
  }

  .hero__media,
  .hero__media.is-visible {
    right: -10% !important;
    width: 85% !important;
    height: 70% !important;
  }

  .hero__eyebrow {
    top: clamp(185px, 32.5svh, 228px) !important;
    width: 150px !important;
  }

  .hero__date {
    bottom: 18px !important;
    width: 82vw !important;
  }

  .hero__date strong {
    font-size: clamp(64px, 21vw, 76px) !important;
  }
}

@keyframes mobileHeroCurtain {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .hero__media::before {
    display: none !important;
  }
}






/* =========================================================
   23. Wedding countdown
   ========================================================= */
.countdown {
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, 67svh, 760px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,0.72), transparent 44%),
    linear-gradient(180deg, #eee8de 0%, #f5f1ea 50%, #eee8df 100%);
  color: var(--text-main);
}

.countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.025;
  background-image:
    radial-gradient(circle at 20% 30%, #000 0 0.55px, transparent 0.7px),
    radial-gradient(circle at 76% 70%, #000 0 0.45px, transparent 0.65px);
  background-size: 8px 8px, 11px 11px;
}

.countdown__inner {
  width: min(88%, 1380px);
  padding: clamp(72px, 8vw, 128px) clamp(28px, 5vw, 82px);
  text-align: center;
}

.countdown__kicker {
  margin: 0 0 18px;
  font-size: clamp(10px, 0.72vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #716b62;
}

.countdown__title {
  margin: 0 0 clamp(52px, 6vw, 88px);
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.15vw, 72px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.055em;
}

.countdown__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.6vw, 46px);
  margin-inline: auto;
  max-width: 1240px;
}

.countdown__grid > i {
  width: 1px;
  height: clamp(82px, 10vw, 146px);
  background: linear-gradient(180deg, transparent, rgba(179,153,105,0.65) 24%, rgba(179,153,105,0.65) 76%, transparent);
  transform-origin: center;
}

.countdown__unit {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.countdown__value {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 2.15ch;
  min-height: 0.84em;
  overflow: hidden;
  font-family: var(--font-serif);
  font-size: clamp(58px, 8.2vw, 142px);
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.76;
  letter-spacing: -0.045em;
  white-space: nowrap;
  text-align: center;
  contain: layout paint;
}

.countdown__digit {
  grid-area: 1 / 1;
  display: block;
  min-width: 100%;
  line-height: inherit;
  text-align: center;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.countdown__digit--old {
  animation: countdownDigitOut 0.78s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.countdown__digit--new {
  animation: countdownDigitIn 0.78s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes countdownDigitOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -24%, 0);
    filter: blur(1.5px);
  }
}

@keyframes countdownDigitIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 28%, 0);
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}


.countdown__label {
  font-size: clamp(9px, 0.72vw, 12px);
  letter-spacing: 0.2em;
  color: #625d56;
}

.countdown__date {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7em;
  margin: clamp(54px, 6vw, 86px) 0 0;
  font-size: clamp(10px, 0.84vw, 14px);
  letter-spacing: 0.22em;
  color: #6c665e;
}

.countdown__date span {
  font-family: var(--font-serif);
  font-size: 1.55em;
  color: var(--gold-deep);
}

.countdown__date b {
  color: var(--gold);
  font-weight: 400;
}

.countdown__line {
  position: absolute;
  left: clamp(28px, 5vw, 84px);
  right: clamp(28px, 5vw, 84px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(179,153,105,0.56) 16%, rgba(179,153,105,0.56) 84%, transparent);
  transform: scaleX(0);
  transition: transform 1.65s var(--ease-luxury);
}

.countdown.is-scene-seen .countdown__line {
  transform: scaleX(1);
}

.countdown__line--top { top: clamp(30px, 4vw, 62px); transform-origin: left; }
.countdown__line--bottom { bottom: clamp(30px, 4vw, 62px); transform-origin: right; }

.countdown__ornament {
  position: absolute;
  color: rgba(179,153,105,0.54);
  pointer-events: none;
}

.countdown__ornament--left {
  left: clamp(24px, 4vw, 68px);
  top: 50%;
  font-family: var(--font-serif);
  font-size: clamp(68px, 8vw, 132px);
  line-height: 1;
  opacity: 0.12;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}

.countdown__ornament--right {
  right: clamp(10px, 2.2vw, 38px);
  bottom: -18px;
  width: clamp(115px, 13vw, 220px);
  opacity: 0.62;
}

.countdown__ornament--right svg {
  display: block;
  width: 100%;
  height: auto;
}

body.scene-motion .countdown:not(.is-scene-seen) .countdown__unit {
  opacity: 0;
  transform: translateY(34px);
}

body.scene-motion .countdown .countdown__unit {
  transition: opacity 1s ease, transform 1.25s var(--ease-luxury);
}

body.scene-motion .countdown.is-scene-seen .countdown__unit:nth-of-type(1) { transition-delay: 0.10s; }
body.scene-motion .countdown.is-scene-seen .countdown__unit:nth-of-type(2) { transition-delay: 0.18s; }
body.scene-motion .countdown.is-scene-seen .countdown__unit:nth-of-type(3) { transition-delay: 0.26s; }
body.scene-motion .countdown.is-scene-seen .countdown__unit:nth-of-type(4) { transition-delay: 0.34s; }

@media (max-width: 1024px) {
  .countdown {
    min-height: auto;
  }

  .countdown__inner {
    width: 100%;
    padding: clamp(72px, 12vw, 96px) clamp(16px, 4vw, 28px) clamp(76px, 12vw, 104px);
  }

  .countdown__title {
    max-width: 360px;
    margin-inline: auto;
    margin-bottom: clamp(36px, 8vw, 52px);
    font-size: clamp(31px, 8.8vw, 46px);
    letter-spacing: 0.035em;
  }

  .countdown__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 430px);
    max-width: 430px;
  }

  .countdown__grid > i {
    display: none;
  }

  .countdown__unit {
    position: relative;
    min-width: 0;
    min-height: clamp(112px, 27vw, 136px);
    align-content: center;
    padding: clamp(18px, 4vw, 24px) 6px;
    border-bottom: 1px solid rgba(179,153,105,0.28);
  }

  .countdown__unit:nth-of-type(odd) {
    border-right: 1px solid rgba(179,153,105,0.28);
  }

  .countdown__unit:nth-of-type(3),
  .countdown__unit:nth-of-type(4) {
    border-bottom: 0;
  }

  .countdown__value {
    min-width: 0;
    width: 100%;
    font-size: clamp(54px, 16vw, 82px);
    letter-spacing: -0.035em;
  }

  .countdown__date {
    max-width: 300px;
    margin: clamp(38px, 8vw, 50px) auto 0;
    line-height: 1.8;
  }

  .countdown__ornament--left {
    left: 7px;
    top: 44%;
    font-size: 72px;
  }

  .countdown__ornament--right {
    right: -26px;
    width: 128px;
    opacity: 0.4;
  }
}

@media (max-width: 380px) {
  .countdown__inner { padding-inline: 14px; }
  .countdown__unit { min-height: 108px; }
  .countdown__value { font-size: clamp(48px, 15vw, 68px); }
  .countdown__label { font-size: 8px; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
    .countdown__line { transform: scaleX(1); transition: none; }
}


/* =========================================================
   24. Final refinement — smoother invitation opening
   ========================================================= */

/* Envelope: slower, layered and physically coherent opening. */
.envelope {
  perspective: 1500px;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.envelope__flap {
  transform-origin: 50% 0%;
  transition:
    transform 1.15s cubic-bezier(.2,.72,.24,1) .22s,
    filter .9s ease .22s,
    z-index 0s linear .72s;
  backface-visibility: hidden;
}
.envelope__seal {
  transition:
    opacity .46s ease,
    transform .72s cubic-bezier(.16,1,.3,1),
    filter .45s ease;
}
.envelope__letter {
  transition:
    transform 1.5s cubic-bezier(.16,1,.3,1) .78s,
    opacity .72s ease .68s,
    box-shadow 1.15s ease .78s;
  will-change: transform, opacity;
}
.envelope__shadow {
  transition:
    opacity 1.2s ease,
    transform 1.3s cubic-bezier(.16,1,.3,1);
}
.preloader.is-opening .envelope__seal {
  opacity: 0;
  transform: translate(-50%,-50%) scale(.28) rotate(-7deg);
}
.preloader.is-opening .envelope__flap {
  z-index: 1;
  transform: rotateX(180deg);
  filter: brightness(.96);
}
.preloader.is-opening .envelope__letter {
  z-index: 8;
  opacity: 1;
  transform: translate3d(0,-62%,52px) scale(1.025);
  box-shadow:
    0 10px 22px rgba(42,34,26,.08),
    0 30px 70px rgba(42,34,26,.11);
}
.preloader.is-opening .envelope__shadow {
  opacity: .4;
  transform: scaleX(.82) translateY(11px);
}
.preloader.is-opening .envelope {
  animation: gateEnvelopeOpenRefined 3.05s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes gateEnvelopeOpenRefined {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  18% { opacity: 1; transform: translateY(4px) scale(.998); }
  60% { opacity: 1; transform: translateY(-5px) scale(1.012); }
  82% { opacity: 1; transform: translateY(-7px) scale(1.018); }
  100% { opacity: 0; transform: translateY(5%) scale(.955); }
}
.preloader.is-opening .invitation-gate__hint,
.preloader.is-opening .invitation-gate__eyebrow {
  transition: opacity .62s ease, transform .78s cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  .envelope__flap,
  .envelope__letter,
  .envelope__seal,
  .envelope__shadow {
    transition-duration: .01ms !important;
  }
}



/* Stable countdown digit transition */
@media (prefers-reduced-motion: reduce) {
  .countdown__digit--old,
  .countdown__digit--new {
    animation: none !important;
  }
}
/* Classic Gold contact salon. */
.classic-contacts {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(560px, 1.28fr);
  gap: clamp(64px, 8vw, 144px);
  min-height: clamp(680px, 82svh, 860px);
  padding: clamp(96px, 10vw, 150px) var(--gutter);
  align-items: center;
  overflow: clip;
  background: var(--bg-dark);
  color: var(--text-light);
}
.classic-contacts::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(320px, 36vw, 620px);
  aspect-ratio: 1;
  left: clamp(-360px, -18vw, -170px);
  bottom: clamp(-340px, -18vw, -150px);
  border-radius: 50%;
  background: rgba(179, 153, 105, .14);
  pointer-events: none;
}
.classic-contacts__intro {
  position: relative;
  z-index: 1;
}
.classic-contacts__intro .section-kicker {
  color: var(--gold-light);
}
.classic-contacts__intro h2 {
  max-width: 7ch;
  margin: 24px 0 34px;
  font-family: var(--font-serif);
  font-size: clamp(62px, 6.7vw, 96px);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.classic-contacts__intro>p:last-child {
  max-width: 34ch;
  color: rgba(242, 238, 231, .72);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}
.classic-contacts__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(212, 194, 157, .5);
  background: #201f1d;
}
.classic-contacts__list::before {
  content: "";
  position: absolute;
  top: -13px;
  right: 28px;
  width: 72px;
  height: 25px;
  background: var(--gold);
}
.classic-contacts__list a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(96px, .36fr) minmax(170px, 1fr) auto 24px;
  gap: clamp(18px, 2.4vw, 38px);
  min-height: 132px;
  padding: 28px clamp(24px, 3vw, 46px);
  align-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, .025);
  color: var(--text-light);
  text-decoration: none;
  transform: none !important;
  transition: color .35s ease, background .35s ease;
}
.classic-contacts__list a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .58s var(--ease-luxury);
}
.classic-contacts__list a::after {
  content: "↗";
  color: var(--gold-light);
  font-size: 18px;
  transition: color .3s ease, transform .4s var(--ease-luxury);
}
.classic-contacts__list a:last-child {
  background: var(--gold);
  color: var(--bg-dark);
}
.classic-contacts__list a:last-child::before {
  background: var(--gold-light);
}
.classic-contacts__list a:last-child::after {
  color: var(--bg-dark);
}
.classic-contacts__list a:hover,
.classic-contacts__list a:focus-visible {
  color: var(--bg-dark);
}
.classic-contacts__list a:hover::before,
.classic-contacts__list a:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}
.classic-contacts__list a:hover::after,
.classic-contacts__list a:focus-visible::after {
  color: var(--bg-dark);
  transform: translate(4px, -4px);
}
.classic-contacts__list span {
  color: var(--gold-light);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color .35s ease;
}
.classic-contacts__list strong {
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.1vw, 48px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.classic-contacts__list small {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.classic-contacts__list a:last-child span,
.classic-contacts__list a:hover span,
.classic-contacts__list a:focus-visible span {
  color: rgba(23, 23, 23, .72);
}
@media (max-width: 980px) {
  .classic-contacts {
    grid-template-columns: minmax(260px, .65fr) minmax(450px, 1.35fr);
    gap: 40px;
  }
  .classic-contacts__list a {
    grid-template-columns: 90px 1fr 24px;
  }
  .classic-contacts__list small {
    grid-column: 2;
  }
}
@media (max-width: 760px) {
  .classic-contacts {
    grid-template-columns: 1fr;
    gap: 52px;
    min-height: 0;
    padding: 78px 20px 86px;
  }
  .classic-contacts::before {
    width: 360px;
    left: -260px;
    bottom: -190px;
  }
  .classic-contacts__intro h2 {
    max-width: 6ch;
    font-size: clamp(58px, 20vw, 78px);
  }
  .classic-contacts__list {
    padding: 7px;
  }
  .classic-contacts__list::before {
    right: 20px;
    width: 58px;
  }
  .classic-contacts__list a {
    grid-template-columns: 1fr 24px;
    gap: 11px 16px;
    min-height: 166px;
    padding: 25px 22px;
  }
  .classic-contacts__list span,
  .classic-contacts__list strong,
  .classic-contacts__list small {
    grid-column: 1;
  }
  .classic-contacts__list strong {
    font-size: clamp(38px, 12vw, 48px);
  }
  .classic-contacts__list small {
    font-size: 12px;
    white-space: normal;
  }
  .classic-contacts__list a::after {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .classic-contacts__list a::before,
  .classic-contacts__list a::after {
    transition: none;
  }
}