:root {
  --ivory: #fbf8f4;
  --blush: #f3e4ec;
  --powder: #dce7f2;
  --periwinkle: #bacbe3;
  --sage: #cbd6c0;
  --rose: #986078;
  --rose-dark: #74465b;
  --ink: #4a3d46;
  --muted: #7a6b74;
  --line: rgba(116, 70, 91, .22);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
html { background: var(--ivory); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow: hidden;
}

.landing {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(430px, 43vw) 1fr;
  background: var(--ivory);
  isolation: isolate;
}

.story {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 4.2vw, 74px) clamp(32px, 4.7vw, 84px);
  background:
    radial-gradient(circle at 12% 12%, rgba(220, 231, 242, .88), transparent 28%),
    radial-gradient(circle at 91% 86%, rgba(203, 214, 192, .47), transparent 27%),
    linear-gradient(145deg, #fffdf9 0%, #f8f0f4 54%, #f1e6ed 100%);
  box-shadow: 26px 0 60px rgba(57, 42, 50, .08);
  overflow: hidden;
}

.story::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(152, 96, 120, .16);
  pointer-events: none;
}

.story::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  border: 1px solid rgba(152, 96, 120, .08);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -49%);
  pointer-events: none;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(9px, .66vw, 12px);
  letter-spacing: .26em;
  color: var(--rose-dark);
  margin-bottom: clamp(16px, 2vh, 24px);
}
.eyebrow span { display:block; width: 38px; height: 1px; background: var(--line); }

.monogram {
  position: relative;
  width: clamp(70px, 6vw, 96px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: clamp(10px, 1.6vh, 17px);
}
.monogram__ring {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(152, 96, 120, .52);
  border-radius: 48% 52% 50% 47%;
  transform: rotate(5deg);
}
.monogram__ring::before,
.monogram__ring::after {
  content: "";
  position: absolute;
  width: 18px; height: 30px;
  border: 1px solid rgba(152, 96, 120, .36);
  border-width: 1px 0 0 1px;
  border-radius: 90% 0 0 0;
}
.monogram__ring::before { left: -11px; top: 14px; transform: rotate(-31deg); }
.monogram__ring::after { right: -11px; bottom: 14px; transform: rotate(149deg); }
.monogram__text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(31px, 2.55vw, 43px);
  line-height: 1;
  letter-spacing: -.08em;
  color: var(--rose);
}

.title-wrap { position: relative; margin-bottom: clamp(14px, 2.2vh, 26px); }
.script {
  font-family: "Parisienne", cursive;
  font-size: clamp(24px, 2.15vw, 38px);
  color: var(--rose);
  margin: 0 0 -4px;
}
h1 {
  font-family: "Italiana", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(42px, 4vw, 68px);
  letter-spacing: .03em;
  line-height: .98;
  margin: 0;
  color: #5f4652;
}
.xv {
  margin: 10px 0 0;
  font-family: "Italiana", Georgia, serif;
  letter-spacing: .38em;
  padding-left: .38em;
  font-size: clamp(12px, .9vw, 16px);
  color: var(--rose-dark);
}

.message {
  width: min(100%, 540px);
  position: relative;
  z-index: 2;
  font-size: clamp(16px, 1.07vw, 19px);
  line-height: 1.42;
  color: #62545c;
}
.message p { margin: 0 0 .58em; }
.message__highlight {
  color: var(--rose-dark);
  font-style: italic;
  font-size: 1.05em;
}

.footer-note {
  position: relative;
  z-index: 2;
  margin-top: clamp(12px, 2vh, 24px);
  width: min(100%, 520px);
}
.footer-note > p {
  margin: 0 auto 12px;
  font-size: clamp(11px, .78vw, 14px);
  letter-spacing: .05em;
  color: var(--muted);
}
.date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(12px, .88vw, 15px);
  letter-spacing: .15em;
  color: var(--rose-dark);
}
.date i { width: 4px; height: 4px; border: 1px solid var(--rose); transform: rotate(45deg); }

.gallery {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #d9d4d2;
}
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 1.8s ease, transform 9s ease;
}
.slide.is-active { opacity: 1; transform: scale(1); }
.slide img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 56%;
  filter: saturate(.92) contrast(.98) brightness(1.01);
}
.slide[data-slide="1"] img { object-position: center 60%; }
.gallery__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(99, 67, 82, .13), transparent 21%),
    linear-gradient(180deg, rgba(44, 37, 42, .03) 55%, rgba(44, 37, 42, .19) 100%);
}
.gallery__caption {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 3vw, 54px);
  bottom: clamp(27px, 4vh, 52px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.88);
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(9px, .64vw, 12px);
  letter-spacing: .17em;
  text-shadow: 0 1px 16px rgba(0,0,0,.28);
}
.gallery__caption .line { width: 50px; height: 1px; background: rgba(255,255,255,.72); }
.progress {
  position: absolute;
  z-index: 4;
  left: clamp(24px, 2.7vw, 48px);
  bottom: clamp(27px, 4vh, 52px);
  display: flex;
  gap: 7px;
}
.progress__bar {
  width: 38px;
  height: 2px;
  background: rgba(255,255,255,.34);
  overflow: hidden;
  position: relative;
}
.progress__bar::after {
  content: "";
  position: absolute; inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: rgba(255,255,255,.95);
}
.progress__bar.is-active::after { animation: fill 7s linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }

.botanical { position:absolute; z-index:1; pointer-events:none; opacity:.62; }
.botanical--top { width: 165px; height: 145px; left: -12px; top: -7px; transform: rotate(-8deg); }
.botanical--bottom { width: 190px; height: 160px; right: -18px; bottom: -10px; transform: rotate(9deg); }
.petal, .leaf, .flower, .stem { position:absolute; display:block; }
.petal { border-radius: 60% 40% 60% 40%; background: rgba(190,205,232,.64); }
.p1 { width:62px;height:31px;left:32px;top:41px;transform:rotate(21deg); }
.p2 { width:48px;height:26px;left:67px;top:20px;transform:rotate(-18deg);background:rgba(244,193,211,.58); }
.p3 { width:44px;height:23px;left:87px;top:61px;transform:rotate(38deg);background:rgba(211,220,197,.72); }
.leaf { width: 36px; height: 62px; border:1px solid rgba(118,139,111,.28); border-radius: 90% 0 90% 0; }
.l1 { left:17px;top:72px;transform:rotate(29deg); }
.l2 { left:104px;top:83px;transform:rotate(-37deg); }
.flower { width:52px;height:52px;border-radius:50%;border:1px solid rgba(140,159,196,.27); }
.flower::before,.flower::after { content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid currentColor; }
.f1 { left:52px;top:52px;color:rgba(146,166,205,.31); }
.f2 { left:102px;top:78px;width:36px;height:36px;color:rgba(196,138,163,.30); }
.f3 { left:20px;top:96px;width:30px;height:30px;color:rgba(154,181,145,.35); }
.stem { height:100px;width:1px;background:rgba(117,139,111,.28);transform-origin:bottom; }
.s1 { left:58px;bottom:4px;transform:rotate(29deg); }
.s2 { left:119px;bottom:0;transform:rotate(-21deg); }

@media (max-width: 980px) {
  body { overflow: auto; }
  .landing {
    min-height: 100svh;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 53svh 47svh;
  }
  .gallery { grid-row: 1; }
  .story {
    grid-row: 2;
    min-height: 47svh;
    padding: 18px 26px 20px;
    box-shadow: 0 -18px 50px rgba(57,42,50,.08);
  }
  .story::before { inset: 10px; }
  .story::after { width: 72vw; height: 72vw; max-width: 430px; max-height: 430px; }
  .eyebrow { margin-bottom: 5px; font-size: 8px; }
  .monogram { width: 54px; margin-bottom: 1px; }
  .monogram__text { font-size: 25px; }
  .script { font-size: 23px; }
  h1 { font-size: clamp(36px, 10vw, 52px); }
  .xv { margin-top: 5px; font-size: 10px; }
  .title-wrap { margin-bottom: 8px; }
  .message { font-size: clamp(13px, 3.35vw, 16px); line-height: 1.28; }
  .message p:nth-child(2) { margin-bottom: .42em; }
  .footer-note { margin-top: 6px; }
  .footer-note > p { font-size: 9.5px; margin-bottom: 7px; }
  .date { font-size: 10px; }
  .gallery__caption { right: 18px; bottom: 18px; font-size: 8px; }
  .gallery__caption .line { width: 26px; }
  .progress { left: 18px; bottom: 18px; }
  .progress__bar { width: 27px; }
  .slide img { object-position: center 48%; }
  .slide[data-slide="1"] img { object-position: center 57%; }
  .botanical--top { transform: scale(.72) rotate(-8deg); transform-origin: top left; }
  .botanical--bottom { transform: scale(.68) rotate(9deg); transform-origin: bottom right; }
}

@media (max-width: 520px) and (max-height: 760px) {
  .landing { grid-template-rows: 47svh 53svh; }
  .story { min-height: 53svh; }
  .message p:nth-child(2) { display:none; }
  .footer-note > p { max-width: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity .3s linear; transform: none !important; }
  .progress__bar.is-active::after { animation: none; transform: scaleX(1); }
}