:root {
  --ink: #4b2531;
  --paper: #fff8ef;
  --intro-panel: #7f274c;
  --display: Georgia, "Times New Roman", serif;
  --radius-lg: .6rem;
  --radius-md: .35rem;
  --scratch-one: #f3b6c5;
  --scratch-two: #a94770;
}
body { background-color: var(--paper); background-image: radial-gradient(rgba(98,52,48,.08) .7px, transparent .7px); background-size: 7px 7px; }
.invite-intro { background: #852b50; }
.invite-intro::before { content: "❀"; position: absolute; z-index: 1; top: -18vmin; right: -5vmin; color: rgba(255,255,255,.06); font-family: Georgia, serif; font-size: 75vmin; line-height: 1; }
.intro-content h1 { font-style: italic; letter-spacing: -.06em; }
.intro-orbit { border-radius: 48% 52% 46% 54%; }
.site-nav { color: #56263a; }
.site-nav .brand-mark { border-color: rgba(86,38,58,.35); background: rgba(255,255,255,.38); }
.site-nav .button--ghost { border-color: rgba(86,38,58,.55); color: #56263a; }
.site-nav .button--light { background: #7e294d; color: #fff; }
.hero { min-height: min(1050px, 100svh); color: #56263a; background: #f5dace; }
.hero::after { background: linear-gradient(180deg, rgba(255,250,240,.05), transparent 55%, rgba(72,37,43,.18)); }
.hero-art { object-position: center 35%; }
.hero-inner { position: relative; z-index: 2; align-content: start; padding-top: clamp(8rem, 16vh, 11rem); }
.hero-kicker { position: relative; padding: .72rem 1.15rem; border: 1px solid rgba(86,38,58,.18); border-radius: 999px; background: rgba(255,248,239,.78); box-shadow: 0 .55rem 1.5rem rgba(86,38,58,.1); backdrop-filter: blur(10px); }
.petal-swing { position: absolute; z-index: 1; top: -2.5rem; width: clamp(10rem, 20vw, 18rem); pointer-events: none; transform-origin: 50% 0; filter: drop-shadow(0 1.1rem 1rem rgba(85,42,49,.18)); will-change: transform; }
.petal-swing img { display: block; width: 100%; height: auto; }
.petal-swing--left { left: -3rem; animation: petal-pendulum-left 6.5s ease-in-out infinite; }
.petal-swing--right { right: -4.5rem; width: clamp(8rem, 16vw, 14rem); animation: petal-pendulum-right 7.4s ease-in-out infinite; opacity: .9; transform: scaleX(-1); }
@keyframes petal-pendulum-left { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes petal-pendulum-right { 0%,100% { transform: scaleX(-1) rotate(-5deg); } 50% { transform: scaleX(-1) rotate(4deg); } }
.hero-title { max-width: 9ch; font-size: clamp(4.8rem, 14vw, 10rem); font-style: italic; font-weight: 400; letter-spacing: -.07em; line-height: .75; text-shadow: 0 1px rgba(255,255,255,.7); }
.hero-title small { margin-bottom: 1rem; font-family: var(--body); font-style: normal; }
.hero-title > span { position: relative; }
.hero-title > span::after { content: ""; position: absolute; right: -.4em; bottom: .03em; left: -.3em; height: .08em; border-radius: 100%; background: var(--accent); transform: rotate(-2deg); opacity: .75; }
.hero-age { border-color: rgba(75,37,49,.34); background: rgba(255,250,241,.4); }
.hero-note { max-width: 26rem; margin: 1rem 0 0; font-family: Georgia, serif; font-size: 1.05rem; font-style: italic; }
.hero-actions .button { background: #722844; }
.hero-actions { margin-top: 3rem; }
.hero-actions .button--ghost { border-color: #722844; background: rgba(255,250,241,.25); color: #722844; }
.marquee { padding: 1rem 0; background: var(--primary); color: #fff7ee; font-family: Georgia, serif; font-style: italic; font-weight: 400; text-transform: none; transform: rotate(.6deg) scale(1.02); }
.message-section { padding-block: clamp(7rem, 14vw, 12rem); overflow: hidden; }
.message-section::before, .message-section::after { content: "❀"; position: absolute; color: var(--accent); font-family: Georgia, serif; font-size: 14rem; opacity: .12; }
.message-section::before { top: -3rem; left: -3rem; transform: rotate(-20deg); }
.message-section::after { right: -2rem; bottom: -4rem; transform: rotate(18deg); }
.message-section blockquote { font-style: italic; font-weight: 400; }
.message-note { max-width: 34rem; margin: 1.6rem auto 0; line-height: 1.8; }
.details-section { background: #f4e4dd; clip-path: polygon(0 2rem, 12% 1.4rem, 25% 2.2rem, 42% 1rem, 58% 2.2rem, 73% 1.5rem, 88% 2.4rem, 100% 1rem, 100% calc(100% - 1.5rem), 88% 100%, 72% calc(100% - 1rem), 55% 100%, 37% calc(100% - 1.4rem), 20% 100%, 0 calc(100% - 1rem)); }
.detail-card { border: 1px solid rgba(94,47,57,.16); background: #fffaf3; box-shadow: 0 1rem 2.5rem rgba(94,47,57,.07); }
.detail-card:nth-child(1) { transform: rotate(-1.4deg); }
.detail-card:nth-child(2) { background: var(--accent); color: #56263a; transform: translateY(1.4rem) rotate(1.2deg); }
.detail-card:nth-child(3) { transform: rotate(-.5deg); }
.detail-card::before { content: ""; position: absolute; top: -.35rem; left: 50%; width: 4.5rem; height: 1.2rem; background: rgba(249,216,183,.65); transform: translateX(-50%) rotate(-2deg); }
.text-link { display: inline-block; margin-top: 1rem; border-bottom: 1px solid currentColor; font-size: .72rem; font-weight: 900; }
.moments-section { padding-top: 8rem; }
.moment-card { border: .7rem solid #fff; border-bottom-width: 1rem; border-radius: 0; background: #fff; box-shadow: 0 1.2rem 2.5rem rgba(95,57,52,.11); }
.moment-card:nth-child(1) { transform: rotate(-2deg); }
.moment-card:nth-child(2) { transform: rotate(2deg); }
.moment-card:nth-child(3) { transform: rotate(-1deg); }
.moment-art { background: linear-gradient(145deg, #f5d1c3, #f7a8ba); }
.moment-art-2 { background: radial-gradient(circle at 70% 20%, #fff7e9 0 8%, transparent 8.5%), linear-gradient(155deg, var(--highlight), #c683a8); }
.moment-art-3 { background: linear-gradient(145deg, #c9d9c5, #f3c6b0); }
.moment-art::before { border-color: rgba(255,255,255,.8); }
.countdown-section { background: #fff4e8; }
.countdown-section .flip-card { --flip-card-bg: #fffaf3; color: var(--primary); border-color: rgba(98,48,58,.12); font-family: Georgia, serif; font-weight: 400; }
.save-date-section { background: #f4e4dd; }
.save-date-section h2 { font-style: italic; font-weight: 400; }
.scratch-card { background: #fffaf3; }
.scratch-card:nth-child(1) { transform: rotate(-2deg); }
.scratch-card:nth-child(2) { transform: translateY(1rem) rotate(1.5deg); }
.scratch-card:nth-child(3) { transform: rotate(-1deg); }
.map-section { background: #fff4e8; }
.map-layout { border-radius: .6rem; background: #f4e4dd; box-shadow: 1rem 1rem 0 var(--accent); }
.map-copy h2 { font-style: italic; font-weight: 400; }
.map-frame-wrap { border-radius: 0 .6rem .6rem 0; }
.rsvp-section { background: #fff4e8; }
.rsvp-card { background: #722844; box-shadow: 1rem 1rem 0 var(--accent); }
.rsvp-card::before { content: ""; position: absolute; inset: .8rem; border: 1px solid rgba(255,255,255,.24); pointer-events: none; }
.rsvp-card h2 { font-style: italic; font-weight: 400; }
.rsvp-card .button--accent { background: #fff2e6; color: #5e223c; }
.site-footer { background: #000; }
.site-footer .brand-mark { border-color: rgba(75,37,49,.25); }
.site-footer button { border: 0; background: transparent; color: inherit; font-weight: 700; }

html[data-variant="boy"] .hero-title > span::after { background: var(--accent); }
html[data-variant="boy"] .rsvp-card { background: #3f5689; }
html[data-variant="universal"] .rsvp-card { background: #72513e; }

@media (min-width: 900px) {
  .hero-inner { align-content: center; justify-items: start; padding-top: 5rem; text-align: left; }
  .hero-inner > * { margin-left: 6%; }
  .hero-actions { justify-content: flex-start; }
  .hero-note { margin-left: 6%; }
}
@media (max-width: 760px) {
  .site-nav .brand { color: #56263a; }
  .hero-inner { width: 100%; align-content: start; justify-items: center; padding: 9.4rem 1.25rem 3rem; text-align: center; }
  .hero-kicker { max-width: min(24rem, 94vw); padding: .6rem .85rem; font-size: clamp(.62rem, 2.7vw, .74rem); letter-spacing: .16em; line-height: 1.45; text-align: center; }
  .hero-title { max-width: 100%; margin-top: .3rem; font-size: clamp(5rem, 22vw, 7.1rem); line-height: .72; }
  .hero-title small { margin-bottom: .8rem; font-size: .1em; }
  .hero-age { margin-top: 1rem; font-size: .65rem; }
  .hero-note { max-width: 22rem; margin: 1rem auto 0; font-size: 1rem; text-align: center; }
  .hero-actions { width: 100%; margin-top: 2.65rem; gap: .55rem; }
  .hero-actions .button { flex: 1 1 10rem; min-width: 0; padding-inline: .8rem; }
  .detail-card:nth-child(n), .moment-card:nth-child(n) { transform: none; }
  .scratch-card:nth-child(n) { transform: none; }
  .map-layout { box-shadow: .45rem .45rem 0 var(--accent); }
  .rsvp-card { box-shadow: .5rem .5rem 0 var(--accent); }
  .petal-swing { top: 3rem; width: 8.5rem; opacity: .76; }
  .petal-swing--left { left: -3.8rem; }
  .petal-swing--right { top: 5.5rem; right: -3.6rem; width: 7.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .petal-swing { animation: none; }
}