:root {
  --paper: #f9efed;
  --page-pink: #f9e9e9;
  --rose: #d9696d;
  --rose-dark: #a44f55;
  --gold: #b49655;
  --ink: #352729;
  --line: rgba(178, 136, 87, .58);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--page-pink);
  font-family: "Cormorant Garamond", Georgia, serif;
}

.invitation {
  width: min(100%, 500px);
  margin: 0 auto;
  overflow: visible;
  background: var(--page-pink);
  box-shadow: none;
}

.panel, .story-panel, .story, .countdown-section, .details, footer { position: relative; }

.hero {
  min-height: 0;
  aspect-ratio: 381 / 620;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.details::before {
  content: "❧ 𓆸 ❀ 𓆰 ❧";
  position: absolute;
  color: rgba(214, 102, 108, .56);
  font-size: 42px;
  letter-spacing: -8px;
  transform: rotate(-15deg);
}

.floral-top { display: none; }
.botanical-frame {
  position: absolute;
  z-index: 1;
  top: 15%;
  right: 6%;
  bottom: 4.5%;
  left: 6%;
  border: 1px solid rgba(188, 125, 126, .42);
  border-radius: 34px;
  background: rgba(255, 254, 254, .98);
  box-shadow:
    0 18px 16px -14px rgba(104, 62, 66, .20),
    0 8px 8px -7px rgba(104, 62, 66, .10);
}
.botanical-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #df838b;
  border-radius: 25px;
  pointer-events: none;
}
.hero-floral {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.hero-floral-back {
  z-index: 0;
  top: 1.5%;
  left: 0;
  width: 61%;
}
.hero-floral-front {
  z-index: 3;
  top: 5.5%;
  left: 0;
  width: 33%;
}
.hero-floral-top-right {
  z-index: 3;
  top: 0;
  right: 1.5%;
  width: 48%;
}
.hero-floral-back-bottom-left {
  z-index: 0;
  bottom: -3%;
  left: -6%;
  width: 55%;
}
.hero-floral-front-bottom-left {
  z-index: 3;
  bottom: -1%;
  left: -5%;
  width: 34%;
}
.hero-floral-back-bottom-right {
  z-index: 0;
  right: -13%;
  bottom: 4%;
  width: 42%;
}
.hero-floral-front-bottom-right {
  z-index: 3;
  right: -2%;
  bottom: 1%;
  width: 39%;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(24px);
}
.quince-heading {
  position: relative;
  width: 74%;
  height: 86px;
  margin: -12px 0 0;
}
.quince-arc {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateY(31px);
}
.quince-arc text {
  fill: var(--rose);
  font: 600 19px/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(255,255,255,.8);
  stroke-width: .5px;
}
.quince-number {
  position: absolute;
  z-index: 0;
  top: 24px;
  left: 50%;
  color: rgba(190, 159, 91, .44);
  font: 400 clamp(54px, 15vw, 74px)/1 "Italiana", serif;
  letter-spacing: -.12em;
  transform: translateX(-50%);
}
.title-bow {
  position: relative;
  z-index: 2;
  display: block;
  width: 52%;
  height: 34px;
  margin: -6px 0 3px;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero > :not(.botanical-frame, .floral, .hero-floral) { position: relative; z-index: 2; }
.hero h1 { width: 82%; margin: 6px 0 12px; color: var(--rose); font: 400 clamp(58px, 16.5vw, 82px)/.9 "Parisienne", cursive; overflow-wrap: anywhere; }
.lead { width: 72%; margin: 0; color: var(--gold); font-size: clamp(19px, 5.2vw, 26px); line-height: .9; }
.date-row { width: 76%; margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); align-items: center; justify-items: center; gap: 3px; color: var(--rose-dark); text-transform: uppercase; font-size: clamp(12px, 3.4vw, 17px); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.date-row > span:first-child { justify-self: end; }
.date-row > span:last-child { justify-self: start; }
.date-row strong {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 54px;
  border: 0;
  font-size: 22px;
  color: var(--rose);
}
.date-row strong img {
  position: relative;
  z-index: 0;
  grid-area: 1 / 1;
  width: 62px;
  height: 50px;
  object-fit: contain;
  pointer-events: none;
}
.date-row strong b {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  font: inherit;
  line-height: 1;
  transform: translate(3px, -4px);
}
.year { color: var(--gold); letter-spacing: .35em; margin: 14px 0 0; padding-left: .35em; }
.bottom-tiara {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: block;
  width: 42%;
  height: auto;
  max-height: 112px;
  margin: 18px auto 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 501px) {
  .invitation,
  .hero {
    overflow: visible;
  }

  .hero-floral {
    max-width: none;
  }
}

@media (max-width: 500px) {
  .hero-content {
    transform: translate(2%, 28px);
  }

  .botanical-frame {
    left: 8%;
    right: 4%;
  }

  .hero-floral-back {
    left: 1.5%;
    width: 56%;
  }

  .hero-floral-front {
    left: 1.5%;
    width: 29%;
  }

  .hero-floral-top-right {
    top: 0;
    right: 0;
    width: 52%;
  }

  .hero-floral-back-bottom-left {
    left: 1%;
    bottom: 0;
    width: 44%;
  }

  .hero-floral-front-bottom-left {
    left: 1%;
    bottom: 1%;
    width: 27%;
  }

  .hero-floral-back-bottom-right {
    right: 0;
    bottom: 0;
    width: 36%;
  }

  .hero-floral-front-bottom-right {
    right: 1%;
    bottom: 0;
    width: 36%;
  }
}

.story-panel {
  width: auto;
  margin: 54px 3.5% 70px 11%;
  padding: 0 0 28px;
  overflow: hidden;
  background: rgba(255, 246, 246, .42);
  border: 1px solid rgba(209, 145, 148, .18);
  box-shadow: 0 18px 30px rgba(104, 62, 66, .16);
}
.story { min-height: 620px; padding: clamp(30px, 8vw, 42px) 6px 22px clamp(42px, 10vw, 51px); display: grid; grid-template-columns: clamp(112px, 31vw, 135px) minmax(0, 1fr); align-items: start; gap: 0; background: transparent; }
.story::before, .story::after { content: none; }
.vertical-title { position: absolute; z-index: 3; left: clamp(5px, 2vw, 9px); top: clamp(145px, 40vw, 164px); margin: 0; color: var(--rose-dark); text-transform: uppercase; letter-spacing: .03em; font-size: clamp(22px, 6vw, 27px); font-weight: 600; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); }
.photo-stack { z-index: 1; display: flex; flex-direction: column; transform: rotate(-2deg); transform-origin: top center; filter: drop-shadow(0 6px 4px rgba(80,50,50,.18)); }
.photo-stack figure { width: clamp(112px, 31vw, 135px); height: clamp(158px, 41vw, 180px); padding: 7px; margin: -2px 0; background: white; }
.photo-stack figure:nth-child(2) { transform: rotate(2.5deg); }
.photo-stack figure:nth-child(3) { transform: rotate(-1deg); }
.photo-stack img { width: 100%; height: 100%; object-fit: cover; }
.photo-stack figure:nth-child(2) img { object-position: 50% 32%; }
.message-wrap { position: relative; z-index: 2; min-width: 0; width: calc(100% + clamp(13px, 3.1vw, 16px)); margin-top: clamp(145px, 39vw, 170px); margin-left: clamp(-16px, -3.1vw, -13px); }
.story blockquote { position: relative; z-index: 2; margin: 0; min-height: 0; padding: 32px clamp(10px, 2.8vw, 13px) 21px; overflow: hidden; border: 1px solid var(--rose-dark); border-radius: 15px; color: var(--rose-dark); background: #f7dfe1; box-shadow: 0 7px 16px rgba(85,43,43,.12); text-align: center; font-size: clamp(12px, 3.25vw, 14px); line-height: 1.16; overflow-wrap: anywhere; }
.story blockquote::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--rose-dark); border-radius: 9px; pointer-events: none; }
.story blockquote span { display: block; margin-top: clamp(14px, 4vw, 20px); }
.story-tiara { position: absolute; z-index: 1; top: 15px; left: 46%; width: 51%; height: auto; object-fit: contain; transform: rotate(12deg); transform-origin: center; }
.story-photo-branches { position: absolute; z-index: 1; left: 3%; bottom: clamp(28px, 8vw, 42px); width: 56%; height: auto; }
.story-leaves { position: absolute; z-index: 0; top: clamp(-72px, -14vw, -54px); left: clamp(-34px, -7vw, -22px); width: 62%; height: auto; transform: rotate(-8deg); }
.story-bow { position: absolute; z-index: 3; top: 3px; left: 50%; width: 42px; height: 31px; object-fit: contain; transform: translateX(-50%); }
.story-rose { position: absolute; z-index: 3; right: -5%; bottom: 0; width: 42%; height: auto; transform: translateY(72%); }

.countdown-section { position: relative; z-index: 4; margin-top: -12px; padding: 10px 28px 24px; text-align: center; background: transparent; }
.countdown-section h2, .details > h2 { margin: 0 0 12px; color: var(--rose); font: 400 74px/1 "Parisienne", cursive; }
.countdown { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; padding: 17px 10px 13px; border: 1px solid var(--rose-dark); border-radius: 5px; color: var(--gold); }
.countdown div { display: flex; flex-direction: column; }
.countdown strong { font-weight: 400; font-size: 31px; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { margin-top: 7px; text-transform: uppercase; font-size: 10px; }
.countdown i { font-style: normal; font-size: 26px; line-height: .8; }

.details { margin-top: -38px; padding: 38px 28px 75px; text-align: center; background: transparent; }
.details::before { content: none; }
.details > h2 { color: #988459; font-size: 68px; }
.card { position: relative; margin: 0 auto clamp(54px, 15vw, 76px); padding: 45px 30px 38px; border: 1px solid rgba(164,79,85,.38); border-radius: 20px; background: #fdf7f6; box-shadow: 0 10px 24px rgba(110,67,67,.08); overflow: visible; }
.card::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--gold); border-radius: 12px; pointer-events: none; }
.card::after { content: ""; position: absolute; z-index: 1; top: 9px; left: 50%; width: 42%; height: 4px; background: #fdf7f6; transform: translateX(-50%); pointer-events: none; }
.card > * { position: relative; z-index: 2; }
.detail-decor, .detail-bow, .reception-glasses, .dress-figures, .rsvp-envelope { display: block; height: auto; pointer-events: none; user-select: none; }
.detail-decor { position: absolute; z-index: 4; }
.detail-bow { position: absolute; z-index: 5; top: 5px; left: 50%; width: clamp(48px, 15%, 66px); transform: translateX(-50%); }
.reception { padding-top: 52px; padding-bottom: 54px; }
.reception-top { top: 0; right: 0; width: 46%; transform: translate(18%, -34%); }
.reception-glasses { width: clamp(78px, 29%, 116px); margin: 2px auto 4px; }
.reception-bottom { bottom: 0; left: 0; width: 34%; transform: translate(-24%, 42%); }
.dress-code { padding-top: 38px; padding-bottom: 58px; }
.dress-figures { width: clamp(120px, 48%, 190px); margin: 2px auto 8px; }
.dress-left { bottom: 0; left: 0; width: 38%; transform: translate(-25%, 43%); }
.dress-right { right: 0; bottom: 0; width: 24%; transform: translate(30%, 46%); }
.rsvp { padding-top: 52px; padding-bottom: 48px; }
.rsvp-top { top: 0; right: 0; width: 35%; transform: translate(24%, -35%); }
.rsvp-row { display: grid; grid-template-columns: minmax(82px, 38%) minmax(0, 1fr); align-items: center; gap: clamp(8px, 3vw, 16px); }
.rsvp-envelope { width: 100%; }
.rsvp-copy { min-width: 0; }
.rsvp-bottom { right: 0; bottom: 0; width: 37%; transform: translate(25%, 42%); }
.card h3 { margin: 4px 0 6px; color: var(--ink); font: 400 49px/1 "Parisienne", cursive; }
.card p { font-size: 21px; margin: 8px 0; }
.card .time { color: var(--rose-dark); font-size: 27px; }
.button { display: inline-block; margin-top: 17px; padding: 13px 31px 11px; border-radius: 999px; color: #fff; background: var(--rose); box-shadow: 0 7px 12px rgba(128,66,66,.2); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 600; transition: transform .2s, background .2s; }
.button:hover, .button:focus-visible { background: var(--rose-dark); transform: translateY(-2px); }
.dress-code h3 { max-width: 320px; margin: 5px auto; font: 600 29px/1.05 "Cormorant Garamond", serif; text-transform: uppercase; }
.dress-code .script { font: 400 50px/1 "Parisienne", cursive; color: var(--rose); }
.dress-code small { display: block; margin: 12px auto 0; max-width: 250px; color: #7c5a5d; }
.rsvp h3 { color: var(--rose); font-size: 40px; }
.rsvp p { max-width: 270px; margin: 12px auto; }

@media (max-width: 380px) {
  .detail-bow { width: 48px; }
  .reception, .rsvp { padding-inline: 22px; }
  .dress-code { padding-inline: 20px; }
  .rsvp-row { grid-template-columns: 34% minmax(0, 1fr); gap: 7px; }
  .rsvp p { font-size: 17px; }
  .rsvp .button { padding-inline: 20px; }
}

@media (max-width: 500px) {
  .reception-top { transform: translate(12%, -30%); }
  .reception-bottom, .dress-left { transform: translate(-18%, 36%); }
  .dress-right { transform: translate(20%, 39%); }
  .rsvp-top { transform: translate(17%, -30%); }
  .rsvp-bottom { transform: translate(18%, 36%); }
}

footer { min-height: 330px; padding: 28px 20px 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; overflow: hidden; background: var(--page-pink); }
.footer-monogram { position: relative; width: min(88%, 410px); height: 230px; display: grid; place-items: center; }
.footer-monogram span { position: absolute; z-index: 0; inset: 50% auto auto 50%; color: rgba(217, 105, 109, .19); font: 400 clamp(150px, 47vw, 225px)/.75 "Italiana", serif; letter-spacing: -.14em; transform: translate(-53%, -50%); }
.footer-monogram strong { position: relative; z-index: 1; margin-top: 18px; color: var(--rose); font: 400 clamp(76px, 22vw, 110px)/1 "Parisienne", cursive; }
.copyright { position: relative; z-index: 2; margin: 12px 0 0; color: rgba(53, 39, 41, .7); font-size: clamp(10px, 2.8vw, 13px); letter-spacing: .08em; }

.reveal { opacity: 1; transform: translateY(0); }
.scroll-ready:not(.is-visible) { transform: translateY(42px) scale(.975); }
.scroll-ready { transition: transform .9s cubic-bezier(.16, .78, .24, 1); transform-origin: center top; will-change: transform; }
.scroll-ready.is-visible { transform: translateY(0) scale(1); }
.card.scroll-ready:not(.is-visible) { transform: translateY(58px) scale(.96); }
.card.scroll-ready { transition-duration: 1s; }

@media (max-width: 380px) {
  .quince-arc text { font-size: 18px; }
  .story { padding-left: 42px; }
  .countdown strong { font-size: 25px; }
}

@media (max-width: 500px) {
  .story-tiara {
    display: block;
    top: 12px;
    left: 43%;
    width: 55%;
  }

  .story-photo-branches {
    display: block;
    left: 1%;
    bottom: 34px;
    width: 60%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .scroll-ready, .scroll-ready:not(.is-visible), .card.scroll-ready:not(.is-visible) { opacity: 1; transform: none; transition: none; }
}