:root {
  --cream: #f8efe2;
  --paper: #fff8ec;
  --paper-deep: #f0e2cf;
  --burgundy: #8d0014;
  --burgundy-dark: #6d0010;
  --ink: #2b211c;
  --muted: #77685f;
  --brown: #5b3829;
  --sage: #9eae91;
  --shadow: 0 28px 80px rgba(24, 14, 10, 0.22);
  --nav-height: 70px;
  --section-block-top: clamp(26px, 4vw, 42px);
  --section-block-bottom: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  background-attachment: fixed;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, rgba(124, 74, 43, 0.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 66%, rgba(124, 74, 43, 0.07) 0 1px, transparent 1.5px);
  background-size: 22px 24px, 31px 29px;
  opacity: 0.5;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg width='230' height='170' viewBox='0 0 230 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 78C52 38 86 40 111 55C141 72 160 36 193 60C206 69 215 82 219 98' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M45 117C66 93 92 94 112 108' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.48'/%3E%3Cpath d='M133 125C151 112 171 113 186 129' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.45'/%3E%3Ccircle cx='82' cy='52' r='3.2' fill='%23b5bd9e' opacity='.7'/%3E%3Ccircle cx='132' cy='44' r='3.2' fill='%23d9b6a4' opacity='.72'/%3E%3Ccircle cx='113' cy='108' r='2.8' fill='%23b5bd9e' opacity='.68'/%3E%3Ccircle cx='65' cy='117' r='2.6' fill='%23c9a590' opacity='.68'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='230' height='170' viewBox='0 0 230 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 78C52 38 86 40 111 55C141 72 160 36 193 60C206 69 215 82 219 98' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M45 117C66 93 92 94 112 108' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.48'/%3E%3Cpath d='M133 125C151 112 171 113 186 129' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.45'/%3E%3Ccircle cx='82' cy='52' r='3.2' fill='%23b5bd9e' opacity='.7'/%3E%3Ccircle cx='132' cy='44' r='3.2' fill='%23d9b6a4' opacity='.72'/%3E%3Ccircle cx='113' cy='108' r='2.8' fill='%23b5bd9e' opacity='.68'/%3E%3Ccircle cx='65' cy='117' r='2.6' fill='%23c9a590' opacity='.68'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='230' height='170' viewBox='0 0 230 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 78C52 38 86 40 111 55C141 72 160 36 193 60C206 69 215 82 219 98' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M45 117C66 93 92 94 112 108' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.48'/%3E%3Cpath d='M133 125C151 112 171 113 186 129' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.45'/%3E%3Ccircle cx='82' cy='52' r='3.2' fill='%23b5bd9e' opacity='.7'/%3E%3Ccircle cx='132' cy='44' r='3.2' fill='%23d9b6a4' opacity='.72'/%3E%3Ccircle cx='113' cy='108' r='2.8' fill='%23b5bd9e' opacity='.68'/%3E%3Ccircle cx='65' cy='117' r='2.6' fill='%23c9a590' opacity='.68'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='230' height='170' viewBox='0 0 230 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 78C52 38 86 40 111 55C141 72 160 36 193 60C206 69 215 82 219 98' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M45 117C66 93 92 94 112 108' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.48'/%3E%3Cpath d='M133 125C151 112 171 113 186 129' stroke='%23d9b6a4' stroke-width='1.4' stroke-linecap='round' opacity='.45'/%3E%3Ccircle cx='82' cy='52' r='3.2' fill='%23b5bd9e' opacity='.7'/%3E%3Ccircle cx='132' cy='44' r='3.2' fill='%23d9b6a4' opacity='.72'/%3E%3Ccircle cx='113' cy='108' r='2.8' fill='%23b5bd9e' opacity='.68'/%3E%3Ccircle cx='65' cy='117' r='2.6' fill='%23c9a590' opacity='.68'/%3E%3C/svg%3E");
  background-position:
    36px 64px,
    calc(100% - 266px) 64px,
    36px calc(100vh - 230px),
    calc(100% - 266px) calc(100vh - 230px);
  background-repeat: no-repeat;
  background-size: 230px 170px;
  opacity: 0.12;
}

.top-nav {
  position: fixed;
  z-index: 10;
  top: 14px;
  left: 50%;
  width: min(1120px, calc(100% - 28px));
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 248, 236, 0.42);
  border-radius: 8px;
  background: rgba(255, 248, 236, 0.88);
  box-shadow: 0 12px 36px rgba(17, 11, 8, 0.18);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

.brand {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--burgundy);
  font-family: "Great Vibes", cursive;
  font-size: 1.9rem;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
}

.brand::after {
  content: "";
  align-self: center;
  width: 40px;
  height: 36px;
  margin-top: -2px;
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='88' viewBox='0 0 96 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%238d0014' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M49 77C35 62 18 51 13 34C9 20 19 10 34 13C43 15 49 23 50 32C55 20 65 10 78 14C91 18 90 35 82 48C73 62 61 70 49 77Z' stroke-width='6'/%3E%3Cpath d='M42 72C28 58 18 45 18 31C18 19 29 16 39 20' stroke-width='2.8' opacity='.72'/%3E%3Cpath d='M54 70C66 58 78 48 82 34C85 22 77 16 66 18' stroke-width='2.7' opacity='.68'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.nav-links a {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--ink);
  font-size: 0.88rem;
  text-decoration: none;
  border-radius: 999px;
  transition: color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--paper);
  background: var(--burgundy);
}

.nav-links a.is-active {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(141, 0, 20, 0.18);
}

.section {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: calc(var(--nav-height) + 46px) 20px 72px;
  display: grid;
  place-items: center;
  background: transparent;
}

.date-section {
  place-items: start center;
}

.location-section,
.timing-section,
.dress-section,
.rsvp-section,
.countdown-section {
  place-items: start center;
}

.date-section,
.location-section,
.timing-section,
.dress-section,
.rsvp-section,
.countdown-section {
  min-height: auto;
  padding-top: 0;
  padding-bottom: clamp(32px, 5vh, 52px);
}

.hero-section {
  position: relative;
  overflow: hidden;
  padding-bottom: 24px;
}

.hero-backdrop {
  display: none;
}

.invite-paper {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  overflow: visible;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: none;
  isolation: isolate;
}

.paper-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 24%, rgba(124, 74, 43, 0.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 66%, rgba(124, 74, 43, 0.07) 0 1px, transparent 1.5px);
  background-size: 22px 24px, 31px 29px;
  opacity: 0.5;
}

.hero-heading {
  padding: 0 34px 38px;
  margin-top: -8px;
  text-align: left;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: lowercase;
  letter-spacing: 0;
}

h1,
.recognition h2,
.calendar-card h2,
.location-card h2,
.timing-card h2,
.dress-card h2,
.form-card h2,
.countdown-card h2,
.final-note {
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 400;
}

h1 {
  margin: 0;
  color: var(--burgundy);
  font-size: clamp(3rem, 10vw, 4.25rem);
  line-height: 1.05;
}

h1 span {
  display: block;
  white-space: nowrap;
}

h1 span + span {
  margin-left: 84px;
}

.kid-card {
  position: relative;
  min-height: 350px;
  margin: 0 22px 0;
}

.kid-photos {
  position: absolute;
  left: 50%;
  bottom: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 88%;
  transform: translateX(-50%);
}

.kid-photo {
  position: relative;
  margin: 0 -8px;
}

.kid-photo.groom {
  transform: translate(8px, -4px);
}

.kid-photo.bride {
  transform: translate(-4px, 30px);
}

.kid-photo .photo-placeholder {
  position: relative;
  overflow: visible;
  width: 132px;
  height: 180px;
  border: 0;
  border-radius: 46% 46% 18px 18px;
  outline: 3px dashed rgba(141, 0, 20, 0.45);
  outline-offset: -9px;
}

.photo-cutout-slot:has(.kid-image[src]) {
  width: 190px;
  height: 230px;
}

.kid-photo.bride .photo-placeholder {
  height: 230px;
  background: linear-gradient(160deg, #fff4f0, #eec8c1);
}

.kid-photo.groom .photo-placeholder {
  background: linear-gradient(160deg, #f7f7f7 0 44%, #191919 45% 100%);
}

.kid-photo figcaption {
  position: absolute;
  top: 58%;
  color: var(--burgundy);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: 1.2rem;
  transform: rotate(-12deg);
  white-space: nowrap;
  z-index: 4;
}

.kid-photo figcaption::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 42px;
  background-image: url("data:image/svg+xml,%3Csvg width='74' height='52' viewBox='0 0 74 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 42 C19 23 35 13 61 12' stroke='%238d0014' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M52 4 L66 12 L53 22' stroke='%238d0014' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 39 C24 25 37 18 56 16' stroke='%23fff8ec' stroke-width='1.5' stroke-linecap='round' opacity='.48'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  animation: labelArrowFloat 2.2s ease-in-out infinite;
}

.kid-photo.groom figcaption {
  left: -108px;
  top: 56%;
  animation: labelFloatGroom 4.8s ease-in-out infinite;
}

.kid-photo.groom figcaption::after {
  right: -18px;
  top: -42px;
  transform: rotate(-8deg);
}

.kid-photo.bride figcaption {
  right: -86px;
  top: 47%;
  transform: rotate(15deg);
  animation: labelFloatBride 5.2s ease-in-out infinite;
}

.kid-photo.bride figcaption::after {
  left: -18px;
  top: -42px;
  transform: scaleX(-1) rotate(-20deg);
  animation-delay: 0.35s;
}

.photo-placeholder {
  display: grid;
  place-items: center;
  color: rgba(43, 33, 28, 0.55);
  background: linear-gradient(145deg, #eee7dd, #d6cec3);
  text-align: center;
  font-size: 0.85rem;
}

.photo-cutout-slot {
  isolation: isolate;
}

.photo-cutout-slot::before {
  content: "";
  position: absolute;
  inset: 9px 12px 0;
  z-index: -1;
  border-radius: 48% 48% 18px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62), transparent 56%),
    rgba(141, 0, 20, 0.08);
}

.placeholder-label {
  position: relative;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 248, 236, 0.72);
}

.kid-image {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: block;
  max-width: 148%;
  max-height: 126%;
  object-fit: contain;
  transform: translateX(-50%);
}

.kid-image:not([src]) {
  display: none;
}

.photo-cutout-slot:has(.kid-image[src]) {
  background: transparent;
  outline: 0;
}

.photo-cutout-slot:has(.kid-image[src])::before {
  display: none;
}

.photo-cutout-slot:has(.kid-image[src]) .placeholder-label {
  display: none;
}

.cutout {
  filter:
    drop-shadow(3px 0 0 var(--burgundy))
    drop-shadow(-3px 0 0 var(--burgundy))
    drop-shadow(0 3px 0 var(--burgundy))
    drop-shadow(0 -3px 0 var(--burgundy))
    drop-shadow(0 12px 12px rgba(24, 14, 10, 0.2));
}

.groom-image {
  max-width: 164%;
  max-height: 134%;
  transform: translateX(-52%);
}

.bride-image {
  max-width: 148%;
  max-height: 118%;
  transform: translateX(-49%);
}

.kid-photo.bride::before,
.kid-photo.bride::after {
  content: "";
  position: absolute;
  top: -66px;
  width: 3px;
  height: 94px;
  z-index: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, #8d0014 0 38%, #f0d45a 39% 66%, #8d0014 67% 100%);
  opacity: 0.92;
}

.kid-photo.bride::before {
  left: 48px;
  transform: rotate(-1deg);
}

.kid-photo.bride::after {
  right: 38px;
  transform: rotate(1deg);
}

.ribbon {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 5;
  width: 292px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 34px 12px;
  color: var(--paper);
  background: transparent;
  border-radius: 0;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: 1.55rem;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 rgba(109, 0, 16, 0.28);
  transform: translateX(-50%) rotate(-2deg);
  isolation: isolate;
}

.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ribbon::before {
  inset: -7px -34px -17px -32px;
  z-index: -1;
  background-image: url("./assets/brush-reference.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 72%;
}

.ribbon::after {
  display: none;
}

.doodle-heart {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--burgundy);
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: softHeartPulse 2.1s ease-in-out infinite;
  transform-origin: center;
}

.heart-path.main {
  stroke-width: 7.5;
}

.heart-path.echo {
  opacity: 0.72;
  stroke-width: 3.2;
}

.heart-one {
  top: -34px;
  left: 42%;
  width: 66px;
  height: 60px;
  --heart-rotate: -2deg;
  transform: rotate(var(--heart-rotate));
}

.heart-two {
  top: 100px;
  left: 10px;
  width: 50px;
  height: 46px;
  --heart-rotate: -14deg;
  transform: rotate(var(--heart-rotate));
  animation-delay: 0.5s;
}

.heart-three {
  top: 91px;
  right: 8px;
  width: 56px;
  height: 52px;
  --heart-rotate: 13deg;
  transform: rotate(var(--heart-rotate));
  animation-delay: 0.9s;
}

.recognition {
  position: relative;
  padding: 0 40px 54px;
  text-align: center;
}

.recognition h2 {
  display: inline-block;
  margin: 0 0 18px;
  color: var(--burgundy);
  font-size: 2.2rem;
  line-height: 1;
  border-bottom: 2px wavy var(--burgundy);
}

.recognition p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.55;
}

.thread-line {
  position: absolute;
  right: 22px;
  top: 520px;
  width: 92px;
  height: 300px;
  fill: none;
  stroke: var(--burgundy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.burgundy-panel {
  position: relative;
  z-index: 0;
  min-height: 650px;
  padding: 34px 38px 40px;
  color: var(--paper);
  background: transparent;
}

.burgundy-panel::before {
  content: "";
  position: absolute;
  top: -42px;
  left: 50%;
  width: 100vw;
  height: 58px;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='360' height='58' viewBox='0 0 360 58' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 36 C60 20 120 52 180 36 C240 20 300 52 360 36 L360 58 L0 58 Z' fill='%238d0014'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 360px 58px;
  transform: translateX(-50%);
}

.burgundy-panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  z-index: 0;
  background: var(--burgundy);
  transform: translateX(-50%);
}

.burgundy-panel > * {
  position: relative;
  z-index: 1;
}

.polaroid {
  width: 250px;
  margin: 0;
  padding: 14px 14px 42px;
  background: #fffaf2;
  box-shadow: 0 18px 26px rgba(24, 14, 10, 0.2);
}

.polaroid .photo-placeholder {
  position: relative;
  overflow: hidden;
  height: 212px;
}

.polaroid-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polaroid-one .polaroid-photo {
  object-position: center 42%;
}

.polaroid-two .polaroid-photo {
  object-position: 56% center;
}

.polaroid .photo-placeholder:has(.polaroid-photo[src]) span {
  display: none;
}

.polaroid-one {
  transform: rotate(-7deg);
}

.polaroid-two {
  margin-left: auto;
  transform: rotate(7deg);
}

.couple-equation {
  margin: 34px 0 28px;
  color: var(--paper);
  font-family: "Segoe Script", "Monotype Corsiva", "Segoe Print", cursive;
  font-size: 2.15rem;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}

.couple-equation span {
  display: inline-flex;
  width: 48px;
  height: 42px;
  margin-left: 6px;
  color: transparent;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='88' viewBox='0 0 96 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff8ec' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M49 77C35 62 18 51 13 34C9 20 19 10 34 13C43 15 49 23 50 32C55 20 65 10 78 14C91 18 90 35 82 48C73 62 61 70 49 77Z' stroke-width='7'/%3E%3Cpath d='M42 72C28 58 18 45 18 31C18 19 29 16 39 20' stroke-width='3.4' opacity='.86'/%3E%3Cpath d='M54 70C66 58 78 48 82 34C85 22 77 16 66 18' stroke-width='3.2' opacity='.78'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-4px);
  animation: equationHeartPulse 2s ease-in-out infinite;
}

.white-heart {
  position: absolute;
  width: 62px;
  height: 58px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='88' viewBox='0 0 96 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff8ec' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M49 77C35 62 18 51 13 34C9 20 19 10 34 13C43 15 49 23 50 32C55 20 65 10 78 14C91 18 90 35 82 48C73 62 61 70 49 77Z' stroke-width='7'/%3E%3Cpath d='M42 72C28 58 18 45 18 31C18 19 29 16 39 20' stroke-width='3.4' opacity='.86'/%3E%3Cpath d='M54 70C66 58 78 48 82 34C85 22 77 16 66 18' stroke-width='3.2' opacity='.78'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: whiteHeartPulse 2.15s ease-in-out infinite;
  transform-origin: center;
}

.white-heart.left {
  left: 32px;
  bottom: 102px;
  width: 66px;
  height: 60px;
  --heart-rotate: -10deg;
  transform: rotate(var(--heart-rotate));
}

.white-heart.right {
  right: 46px;
  top: 82px;
  width: 58px;
  height: 54px;
  --heart-rotate: 9deg;
  transform: rotate(var(--heart-rotate));
  animation-delay: 0.45s;
}

.white-heart.top-extra {
  left: auto;
  right: 390px;
  top: 90px;
  width: 46px;
  height: 42px;
  opacity: 0.86;
  --heart-rotate: -18deg;
  transform: rotate(var(--heart-rotate));
  animation-delay: 0.8s;
}

.white-heart.bottom-extra {
  left: 390px;
  right: auto;
  bottom: 130px;
  width: 50px;
  height: 46px;
  opacity: 0.9;
  --heart-rotate: 14deg;
  transform: rotate(var(--heart-rotate));
  animation-delay: 1.15s;
}

.content-card {
  width: min(760px, 100%);
  padding: clamp(34px, 7vw, 70px);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: none;
  text-align: center;
}

.small-note {
  max-width: 440px;
  margin: 0 auto 34px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.55;
}

.calendar-card {
  position: relative;
}

.calendar-card,
.dress-card,
.form-card,
.timing-card,
.countdown-card {
  padding-top: var(--section-block-top);
  padding-bottom: var(--section-block-bottom);
}

.calendar-card h2 {
  display: inline-block;
  margin: 0;
  color: var(--burgundy);
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  vertical-align: baseline;
  transform: none;
}

.year {
  display: inline-block;
  margin: 0 0 0 18px;
  color: var(--burgundy);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  vertical-align: baseline;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(32px, 1fr));
  gap: 8px;
  max-width: 560px;
  margin: 30px auto 58px;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(1rem, 3.6vw, 1.45rem);
}

.calendar span {
  min-height: 70px;
  display: grid;
  place-items: center;
}

.calendar span:nth-child(-n+7) {
  min-height: 30px;
  color: var(--burgundy);
  border-bottom: 2px solid var(--ink);
}

.muted-day {
  color: rgba(43, 33, 28, 0.28);
}

.selected-day {
  position: relative;
  color: var(--burgundy);
  font-size: 1.5em;
  z-index: 0;
}

.selected-day::before {
  content: "♡";
  position: absolute;
  inset: 50% auto auto 50%;
  color: var(--burgundy);
  font-size: 3.4em;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: -1;
}

.selected-day::before {
  content: "";
  left: 50%;
  top: 52%;
  width: 94px;
  height: 82px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='88' viewBox='0 0 96 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%238d0014' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M49 77C35 62 18 51 13 34C9 20 19 10 34 13C43 15 49 23 50 32C55 20 65 10 78 14C91 18 90 35 82 48C73 62 61 70 49 77Z' stroke-width='5.5'/%3E%3Cpath d='M42 72C28 58 18 45 18 31C18 19 29 16 39 20' stroke-width='2.5' opacity='.72'/%3E%3Cpath d='M54 70C66 58 78 48 82 34C85 22 77 16 66 18' stroke-width='2.4' opacity='.68'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  animation: calendarHeartBreath 2.1s ease-in-out infinite;
}

.selected-day.is-date-animated::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  animation: calendarHeartBreath 2.1s ease-in-out infinite;
}

.date-copy {
  max-width: 440px;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.55;
}

.date-copy strong {
  position: relative;
  display: inline-block;
  margin-top: 4px;
  color: var(--ink);
  font-style: normal;
}

.date-copy strong::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -6px;
  bottom: -12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='170' height='18' viewBox='0 0 170 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10 C15 2 31 16 47 9 C63 2 78 16 95 9 C112 2 127 16 144 9 C155 4 162 7 168 10' stroke='%238d0014' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.location-section,
.dress-section,
.countdown-section {
  overflow: visible;
  color: var(--paper);
}

.location-section::before,
.dress-section::before,
.countdown-section::before {
  content: "";
  position: absolute;
  top: -42px;
  left: 50%;
  width: 100vw;
  height: 58px;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='360' height='58' viewBox='0 0 360 58' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 36 C60 20 120 52 180 36 C240 20 300 52 360 36 L360 58 L0 58 Z' fill='%238d0014'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 360px 58px;
  transform: translateX(-50%);
  pointer-events: none;
}

.location-section::after,
.dress-section::after,
.countdown-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  z-index: 0;
  background: var(--burgundy);
  transform: translateX(-50%);
  pointer-events: none;
}

.location-card {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  padding: var(--section-block-top) 24px var(--section-block-bottom);
  text-align: center;
}

.location-card h2,
.timing-card h2 {
  display: inline-block;
  margin: 0;
  font-size: clamp(3rem, 9vw, 4.7rem);
  line-height: 1;
}

.location-card h2 {
  position: relative;
  color: var(--paper);
}

.location-question-mark {
  position: absolute;
  z-index: 2;
  color: rgba(255, 248, 236, 0.88);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  line-height: 1;
  pointer-events: none;
  text-shadow:
    1px 0 0 rgba(255, 248, 236, 0.62),
    -1px 0 0 rgba(255, 248, 236, 0.28);
  animation: questionMarkFloat 3s ease-in-out infinite;
}

.location-question-mark:nth-of-type(1) {
  left: -54px;
  top: -14px;
  transform: rotate(-22deg);
}

.location-question-mark:nth-of-type(2) {
  right: -54px;
  top: -20px;
  font-size: clamp(1.1rem, 2.8vw, 1.7rem);
  transform: rotate(18deg);
  animation-delay: 0.35s;
}

.location-question-mark:nth-of-type(3) {
  left: -36px;
  bottom: 10px;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  transform: rotate(14deg);
  animation-delay: 0.7s;
}

.location-question-mark:nth-of-type(4) {
  right: -36px;
  bottom: 8px;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  transform: rotate(-16deg);
  animation-delay: 1.05s;
}

.location-question-mark:nth-of-type(5) {
  left: 4px;
  top: -42px;
  font-size: clamp(0.95rem, 2.4vw, 1.45rem);
  transform: rotate(10deg);
  animation-delay: 0.2s;
}

.location-question-mark:nth-of-type(6) {
  right: 12px;
  top: -46px;
  font-size: clamp(1rem, 2.5vw, 1.55rem);
  transform: rotate(-12deg);
  animation-delay: 0.55s;
}

.location-question-mark:nth-of-type(7) {
  left: -78px;
  top: 28px;
  font-size: clamp(0.9rem, 2.2vw, 1.35rem);
  transform: rotate(26deg);
  animation-delay: 0.9s;
}

.location-question-mark:nth-of-type(8) {
  right: -78px;
  top: 24px;
  font-size: clamp(0.9rem, 2.2vw, 1.35rem);
  transform: rotate(-26deg);
  animation-delay: 1.25s;
}

.location-question-mark:nth-of-type(9) {
  left: 22%;
  top: -70px;
  font-size: clamp(0.92rem, 2.2vw, 1.35rem);
  transform: rotate(-18deg);
  animation-delay: 0.15s;
}

.location-question-mark:nth-of-type(10) {
  left: 44%;
  top: -86px;
  font-size: clamp(1rem, 2.4vw, 1.55rem);
  transform: rotate(12deg);
  animation-delay: 0.5s;
}

.location-question-mark:nth-of-type(11) {
  right: 24%;
  top: -72px;
  font-size: clamp(0.92rem, 2.2vw, 1.35rem);
  transform: rotate(20deg);
  animation-delay: 0.85s;
}

.location-card h2::after,
.timing-card h2::after {
  content: "";
  display: block;
  width: 168%;
  min-width: 390px;
  height: 20px;
  margin: 8px 0 0 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: translateX(-50%);
}

.location-card h2::after {
  background-image: url("data:image/svg+xml,%3Csvg width='460' height='28' viewBox='0 0 460 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 15 C22 2 43 26 64 14 C86 2 108 26 130 14 C152 2 174 26 196 14 C218 2 240 26 262 14 C284 2 306 26 328 14 C350 2 372 26 394 14 C416 2 438 20 456 14' stroke='%23fff8ec' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.timing-card h2::after {
  width: 190%;
  min-width: 470px;
  background-image: url("data:image/svg+xml,%3Csvg width='460' height='28' viewBox='0 0 460 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 15 C22 2 43 26 64 14 C86 2 108 26 130 14 C152 2 174 26 196 14 C218 2 240 26 262 14 C284 2 306 26 328 14 C350 2 372 26 394 14 C416 2 438 20 456 14' stroke='%238d0014' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.location-name,
.location-address {
  max-width: 430px;
  margin: 18px auto 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2.3vw, 1.28rem);
  font-style: italic;
  line-height: 1.45;
}

.location-address {
  margin-top: 6px;
}

.location-polaroid {
  width: min(560px, 92%);
  margin: 34px auto 32px;
  padding: 18px 18px 46px;
  background: #fffaf2;
  box-shadow: 0 20px 34px rgba(24, 14, 10, 0.28);
  transform: rotate(4deg);
}

.location-photo-placeholder {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  color: var(--muted);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3), transparent 60%),
    linear-gradient(145deg, #eee7dd, #d6cec3);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.location-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.location-photo-placeholder:has(.location-photo[src]) span {
  display: none;
}

.map-button {
  min-width: 220px;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 38px;
  color: var(--burgundy);
  background: var(--paper);
  border: 1px solid rgba(255, 248, 236, 0.8);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  font-style: italic;
  line-height: 1.2;
  text-decoration: none;
}

.location-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.copy-address-button {
  min-width: 220px;
  min-height: 64px;
  padding: 16px 28px;
  color: var(--burgundy);
  background: var(--paper);
  border: 1px solid rgba(255, 248, 236, 0.8);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  font-style: italic;
}

.timing-card {
  overflow: hidden;
  min-height: 1240px;
  display: grid;
  align-content: start;
}

.timing-card h2 {
  color: var(--burgundy);
}

.timing-list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 162px);
  row-gap: 96px;
  column-gap: 92px;
  max-width: 660px;
  min-height: 1000px;
  margin: 64px auto 0;
  --timing-heart-x: 0px;
  --timing-heart-y: 0px;
  --timing-heart-opacity: 1;
  --timing-heart-scale: 1;
  --timing-arrow-top: 42px;
}

.timing-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: auto;
  left: 50%;
  width: 3px;
  height: calc(100% + 34px);
  background: var(--burgundy);
  border-radius: 999px;
  transform: translateX(-50%);
  pointer-events: none;
}

.timing-item {
  position: relative;
  min-height: 162px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding-top: 22px;
  font-family: Georgia, "Times New Roman", serif;
}

.timing-item::before,
.timing-item::after {
  content: "";
  position: absolute;
  top: var(--timing-arrow-top);
  pointer-events: none;
}

.timing-item::before {
  width: 54px;
  height: 2px;
  background: var(--burgundy);
  transform: translateY(-50%);
}

.timing-item::after {
  width: 9px;
  height: 9px;
  border-top: 3px solid var(--burgundy);
  border-right: 3px solid var(--burgundy);
}

.timing-item-1700::before {
  height: 2px;
}

.timing-heart {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 48px;
  height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='88' viewBox='0 0 96 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%238d0014' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M49 77C35 62 18 51 13 34C9 20 19 10 34 13C43 15 49 23 50 32C55 20 65 10 78 14C91 18 90 35 82 48C73 62 61 70 49 77Z' stroke-width='6.8'/%3E%3Cpath d='M42 72C28 58 18 45 18 31C18 19 29 16 39 20' stroke-width='3.2' opacity='.78'/%3E%3Cpath d='M54 70C66 58 78 48 82 34C85 22 77 16 66 18' stroke-width='3' opacity='.72'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(calc(-50% + var(--timing-heart-x)), calc(var(--timing-heart-y) - 50%)) rotate(-8deg);
  opacity: var(--timing-heart-opacity);
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(141, 0, 20, 0.16));
  animation: timingHeartPulse 1.7s ease-in-out infinite;
  transition: opacity 220ms ease;
}

.timing-heart::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(141, 0, 20, 0.12);
  transform: scale(0.8);
  animation: timingHeartEcho 1.7s ease-in-out infinite;
}

.timing-item.left {
  text-align: right;
  padding-right: 26px;
}

.timing-item.left::before {
  right: -46px;
}

.timing-item.left::after {
  right: 2px;
  transform: translateY(-50%) rotate(-135deg);
}

.timing-item.right {
  grid-column: 2;
  text-align: left;
  padding-left: 26px;
}

.timing-item.right::before {
  left: -46px;
}

.timing-item.right::after {
  left: 2px;
  transform: translateY(-50%) rotate(45deg);
}

.timing-item-1530 {
  grid-column: 1;
  grid-row: 1;
}

.timing-item-1600 {
  grid-column: 2;
  grid-row: 2;
  transform: none;
}

.timing-item-1700 {
  grid-column: 1;
  grid-row: 3;
  transform: none;
}

.timing-item-2200 {
  grid-column: 2;
  grid-row: 4;
}

.timing-item-2200 p {
  color: var(--ink);
}

.timing-item-1600.reveal-item,
.timing-item-1600.reveal-item.is-visible {
  transform: none;
}

.timing-item-1700.reveal-item,
.timing-item-1700.reveal-item.is-visible {
  transform: none;
}

.timing-item time {
  color: var(--burgundy);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(1.8rem, 5vw, 2.35rem);
  line-height: 1;
  transition: color 260ms ease, transform 260ms ease;
}

.timing-item p {
  margin: 0;
  font-size: clamp(1.08rem, 2.25vw, 1.28rem);
  font-style: italic;
  line-height: 1.35;
  transition: color 260ms ease, transform 260ms ease;
}

.timing-item.is-active time,
.timing-item.is-active p {
  color: var(--burgundy-dark);
  transform: translateY(-2px);
}

.dress-card h2,
.form-card h2,
.countdown-card h2 {
  margin: 0 0 28px;
  font-size: clamp(2.4rem, 8vw, 4.5rem);
}

.dress-card h2 {
  display: inline-block;
}

.dress-card h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 20px;
  margin-top: 8px;
  background-image: url("data:image/svg+xml,%3Csvg width='460' height='28' viewBox='0 0 460 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 15 C22 2 43 26 64 14 C86 2 108 26 130 14 C152 2 174 26 196 14 C218 2 240 26 262 14 C284 2 306 26 328 14 C350 2 372 26 394 14 C416 2 438 20 456 14' stroke='%23fff8ec' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.form-card h2 {
  color: var(--burgundy);
  line-height: 0.92;
}

.dress-card {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  color: var(--paper);
  background: transparent;
  box-shadow: none;
}

.countdown-card {
  position: relative;
  z-index: 1;
  color: var(--paper);
  background: transparent;
  box-shadow: none;
}

.dress-card h2,
.dress-card p {
  color: var(--paper);
}

.dress-card p,
.form-card p {
  max-width: 620px;
  margin: 0 auto 36px;
  font-size: clamp(1.1rem, 3.2vw, 1.6rem);
  line-height: 1.45;
}

.dress-card p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2.3vw, 1.28rem);
  font-style: italic;
  line-height: 1.45;
}

.form-card p {
  color: var(--ink);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 400;
}

.palette {
  display: grid;
  grid-template-columns: repeat(4, clamp(48px, 10vw, 78px));
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  margin: 0 auto 34px;
}

.palette span {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--swatch, rgba(255, 248, 236, 0.1));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  cursor: default;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.palette span::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: -30px;
  z-index: 2;
  padding: 4px 9px;
  color: var(--burgundy);
  background: var(--paper);
  border: 1px solid rgba(255, 248, 236, 0.55);
  border-radius: 999px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.palette span:hover,
.palette span:focus-visible {
  transform: translateY(-4px) scale(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.08),
    0 10px 22px rgba(24, 14, 10, 0.2);
}

.palette span:hover::after,
.palette span:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dress-polaroids {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 330px));
  align-items: start;
  justify-content: center;
  gap: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 64px);
  width: min(860px, 100%);
  margin: 0 auto;
}

.dress-polaroid {
  width: 100%;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.dress-polaroid .photo-placeholder {
  overflow: hidden;
  height: clamp(330px, 42vw, 430px);
  background: transparent;
  border-radius: 8px;
}

.dress-polaroid .polaroid-photo {
  object-fit: cover;
  object-position: center top;
}

.dress-polaroid-one .polaroid-photo {
  object-position: center 56%;
}

.dress-polaroid-two .polaroid-photo {
  object-position: center top;
  transform: scale(1.16);
  transform-origin: center top;
}

.dress-polaroid-one {
  grid-column: 1 / 2;
  justify-self: center;
  transform: none;
}

.dress-polaroid-two {
  grid-column: 1 / 2;
  justify-self: center;
  transform: none;
}

.dress-polaroid-three {
  grid-column: 2 / 3;
  justify-self: center;
  width: 100%;
  max-width: 330px;
  transform: none;
  z-index: 2;
}

form {
  display: grid;
  gap: 30px;
  text-align: left;
}

.form-field,
label {
  display: grid;
  gap: 10px;
  color: var(--ink);
  font-size: 0.95rem;
}

.form-field {
  position: relative;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-label {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

.required-star {
  color: var(--burgundy);
  font-style: normal;
  margin-left: 4px;
}

.field-warning {
  min-height: 18px;
  color: var(--burgundy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.35;
}

.field-warning:empty {
  display: none;
}

.required-note {
  margin: -8px 0 0;
  width: 100%;
  color: rgba(43, 33, 28, 0.68);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-style: italic;
  text-align: left;
}

input,
select,
textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(141, 0, 20, 0.55);
  border-radius: 0;
  padding: 12px 0 13px;
  color: var(--ink);
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-style: italic;
}

select {
  color: var(--burgundy);
  font-style: normal;
}

select option {
  color: var(--burgundy);
}

input::placeholder,
textarea::placeholder {
  color: rgba(119, 104, 95, 0.42);
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--burgundy);
}

textarea {
  min-height: 118px;
  border: 1px solid rgba(141, 0, 20, 0.55);
  padding: 16px;
  resize: vertical;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.choice-button {
  position: relative;
  display: inline-flex;
  min-width: 154px;
}

.rsvp-tip-host::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 8;
  width: max-content;
  max-width: min(360px, calc(100vw - 44px));
  padding: 10px 14px;
  color: var(--burgundy);
  background: rgba(255, 248, 236, 0.88);
  border: 1px solid rgba(141, 0, 20, 0.18);
  box-shadow: 0 14px 34px rgba(24, 14, 10, 0.14);
  backdrop-filter: blur(8px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 360ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
  transition-delay: 0s;
}

.rsvp-tip-host::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: calc(100% + 2px);
  z-index: 9;
  width: 12px;
  height: 12px;
  background: rgba(255, 248, 236, 0.88);
  border-right: 1px solid rgba(141, 0, 20, 0.18);
  border-bottom: 1px solid rgba(141, 0, 20, 0.18);
  opacity: 0;
  transform: translateY(8px) rotate(45deg) scale(0.96);
  pointer-events: none;
  transition: opacity 360ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
  transition-delay: 0s;
}

.rsvp-tip-host:hover::after,
.rsvp-tip-host:focus-within::after,
.rsvp-tip-host:hover::before,
.rsvp-tip-host:focus-within::before {
  opacity: 1;
  transition-delay: 0.6s;
}

.rsvp-tip-host:hover::after,
.rsvp-tip-host:focus-within::after {
  transform: translateY(0) scale(1);
  transition-delay: 0.6s;
}

.rsvp-tip-host:hover::before,
.rsvp-tip-host:focus-within::before {
  transform: translateY(0) rotate(45deg) scale(1);
  transition-delay: 0.6s;
}

.choice-button.rsvp-tip-host::after {
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 8px) scale(0.96);
  text-align: center;
}

.choice-button.rsvp-tip-host::before {
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translate(-50%, 8px) rotate(45deg) scale(0.96);
}

.choice-button.rsvp-tip-host:hover::after,
.choice-button.rsvp-tip-host:focus-within::after {
  transform: translate(-50%, 0) scale(1);
}

.choice-button.rsvp-tip-host:hover::before,
.choice-button.rsvp-tip-host:focus-within::before {
  transform: translate(-50%, 0) rotate(45deg) scale(1);
}

.choice-button.rsvp-tip-host:not(:has(input:checked))::after,
.choice-button.rsvp-tip-host:not(:has(input:checked))::before {
  display: none;
}

.choice-button input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-button span {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 24px;
  color: var(--burgundy);
  border: 1px solid rgba(183, 137, 120, 0.42);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(1rem, 2.1vw, 1.18rem);
  letter-spacing: 0;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
}

.choice-button input:checked + span {
  color: var(--paper);
  background: #b18475;
  border-color: #b18475;
}

.drinks-row .choice-button {
  min-width: 0;
}

.companion-details[hidden] {
  display: none;
}

.guest-fields {
  display: grid;
  gap: 14px;
}

.guest-field {
  display: grid;
}

.guest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.add-guest-button,
.remove-guest-button {
  justify-self: start;
  min-height: 44px;
  padding: 10px 18px;
  color: var(--burgundy);
  background: transparent;
  border: 1px solid rgba(183, 137, 120, 0.42);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  letter-spacing: 0;
  text-transform: none;
}

.add-guest-button:hover,
.remove-guest-button:hover {
  color: var(--paper);
  background: #b18475;
}

button {
  min-height: 58px;
  border: 0;
  border-radius: 0;
  padding: 14px 22px;
  color: var(--paper);
  background: #b18475;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(1.08rem, 2.3vw, 1.25rem);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

button:hover {
  background: #9e7164;
}

button:disabled {
  cursor: default;
  opacity: 0.68;
}

.form-status {
  min-height: 24px;
  margin: 0;
  color: var(--burgundy);
  text-align: center;
}

.timer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.timer div {
  position: relative;
  overflow: hidden;
  min-height: 94px;
  display: grid;
  place-items: center;
  padding: 12px 8px;
  background:
    linear-gradient(var(--burgundy), var(--burgundy)) padding-box,
    linear-gradient(115deg, rgba(255,248,236,0.3), rgba(255,248,236,0.95), rgba(255,248,236,0.28)) border-box;
  border: 1px solid rgba(255, 248, 236, 0.46);
  border-radius: 6px;
  animation: timerBorderFlow 3.4s linear infinite;
}

.timer div::before {
  content: "";
  position: absolute;
  inset: -40% -70%;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 248, 236, 0.24) 50%, transparent 62%);
  transform: translateX(-45%);
  animation: timerShimmer 3.4s linear infinite;
  pointer-events: none;
}

.timer div > * {
  position: relative;
  z-index: 1;
}

.timer div:nth-child(2) {
  animation-delay: 0.35s;
}

.timer div:nth-child(2)::before {
  animation-delay: 0.35s;
}

.timer div:nth-child(3) {
  animation-delay: 0.7s;
}

.timer div:nth-child(3)::before {
  animation-delay: 0.7s;
}

.timer div:nth-child(4) {
  animation-delay: 1.05s;
}

.timer div:nth-child(4)::before {
  animation-delay: 1.05s;
}

.timer strong {
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 400;
  display: inline-block;
}

.timer strong.is-ticking {
  animation: timerTick 360ms ease;
}

.timer span {
  color: var(--paper);
  font-size: 0.78rem;
}

.final-note {
  margin: 36px 0 0;
  color: var(--paper);
  font-size: clamp(2rem, 7vw, 3.4rem);
}

.countdown-card h2 {
  color: var(--paper);
}

.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

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

.is-lightboxable {
  cursor: zoom-in;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(24, 14, 10, 0.76);
  backdrop-filter: blur(10px);
}

.image-lightbox[hidden] {
  display: none;
}

.lightbox-image {
  max-width: min(92vw, 1040px);
  max-height: 86vh;
  display: block;
  object-fit: contain;
  background: var(--paper);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  min-width: 46px;
  min-height: 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  color: var(--burgundy);
  background: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  max-width: min(460px, calc(100vw - 32px));
  padding: 13px 18px;
  color: var(--paper);
  background: rgba(141, 0, 20, 0.94);
  border: 1px solid rgba(255, 248, 236, 0.35);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.success-modal {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(24, 14, 10, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.success-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.success-modal__panel {
  width: min(430px, 100%);
  padding: 34px 28px;
  color: var(--burgundy);
  background: var(--paper);
  border: 1px solid rgba(141, 0, 20, 0.18);
  box-shadow: 0 24px 74px rgba(24, 14, 10, 0.28);
  text-align: center;
  transform: translateY(12px) scale(0.96);
  transition: transform 240ms ease;
}

.success-modal.is-visible .success-modal__panel {
  transform: translateY(0) scale(1);
}

.success-modal__title {
  margin: 0 0 14px;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
}

.success-modal__text {
  margin: 0 0 24px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.45;
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  color: var(--burgundy);
  background: var(--paper);
  border: 1px solid rgba(141, 0, 20, 0.24);
  box-shadow: 0 14px 32px rgba(24, 14, 10, 0.22);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  color: var(--paper);
  background: var(--burgundy);
}

.confetti-piece {
  position: fixed;
  top: -14px;
  z-index: 130;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
  animation: confettiFall var(--fall-duration, 2200ms) linear forwards;
}

@keyframes timingHeartPulse {
  0%,
  100% {
    transform: translate(calc(-50% + var(--timing-heart-x)), calc(var(--timing-heart-y) - 50%)) rotate(-8deg) scale(var(--timing-heart-scale));
  }
  50% {
    transform: translate(calc(-50% + var(--timing-heart-x)), calc(var(--timing-heart-y) - 50%)) rotate(-8deg) scale(calc(var(--timing-heart-scale) * 1.08));
  }
}

@keyframes timingHeartEcho {
  0%,
  100% {
    opacity: 0.12;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.28;
    transform: scale(1.35);
  }
}

@keyframes timerTick {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-5px) scale(1.08);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes timerBorderFlow {
  0%,
  100% {
    border-color: rgba(255, 248, 236, 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 248, 236, 0.02);
  }
  50% {
    border-color: rgba(255, 248, 236, 0.9);
    box-shadow: inset 0 0 0 1px rgba(255, 248, 236, 0.12);
  }
}

@keyframes timerShimmer {
  0% {
    transform: translateX(-45%);
  }
  100% {
    transform: translateX(45%);
  }
}

@keyframes calendarHeartBreath {
  0% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.94);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.08);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.94);
  }
}

@keyframes softHeartPulse {
  0%,
  100% {
    transform: rotate(var(--heart-rotate, 0deg)) scale(1);
  }
  50% {
    transform: rotate(var(--heart-rotate, 0deg)) scale(1.1);
  }
}

@keyframes whiteHeartPulse {
  0%,
  100% {
    transform: rotate(var(--heart-rotate, 0deg)) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: rotate(var(--heart-rotate, 0deg)) scale(1.11);
    opacity: 1;
  }
}

@keyframes equationHeartPulse {
  0%,
  100% {
    transform: translateY(-4px) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.11);
  }
}

@keyframes labelFloatGroom {
  0%,
  100% {
    transform: rotate(-12deg) translateY(0);
  }
  50% {
    transform: rotate(-9deg) translateY(-5px);
  }
}

@keyframes labelFloatBride {
  0%,
  100% {
    transform: rotate(15deg) translateY(0);
  }
  50% {
    transform: rotate(12deg) translateY(-5px);
  }
}

@keyframes labelArrowFloat {
  0%,
  100% {
    opacity: 0.82;
    translate: 0 0;
  }
  50% {
    opacity: 1;
    translate: 5px -3px;
  }
}

@keyframes questionMarkFloat {
  0%,
  100% {
    opacity: 0.72;
    translate: 0 0;
  }
  50% {
    opacity: 0.95;
    translate: 0 -5px;
  }
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--fall-drift, 40px), 105vh, 0) rotate(var(--fall-rotate, 540deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item,
  .timer strong,
  .timing-heart,
  .timing-heart::after,
  .confetti-piece,
  .selected-day::before,
  .doodle-heart,
  .white-heart,
  .couple-equation span,
  .kid-photo figcaption,
  .location-question-mark {
    animation: none !important;
    transition: none !important;
  }

  .reveal-item {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 720px) {
  :root {
    --nav-height: 104px;
  }

  .top-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  .nav-links {
    justify-content: flex-start;
    width: 100%;
  }

  .nav-links a {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 0.78rem;
  }

  .section {
    padding-inline: 12px;
  }

  .hero-heading {
    padding: 0 26px 32px;
    margin-top: -6px;
  }

  h1 span + span {
    margin-left: 58px;
  }

  .kid-card {
    margin-inline: 14px;
  }

  .kid-photo .photo-placeholder {
    width: 112px;
    height: 160px;
  }

  .photo-cutout-slot:has(.kid-image[src]) {
    width: 148px;
    height: 194px;
  }

  .kid-photo.bride .photo-placeholder {
    height: 194px;
  }

  .kid-photo figcaption {
    font-size: 1rem;
  }

  .kid-photo.groom figcaption {
    left: -72px;
    top: 55%;
  }

  .kid-photo.bride figcaption {
    right: -62px;
    top: 58%;
  }

  .kid-photo figcaption::after {
    width: 42px;
    height: 30px;
  }

  .kid-photo.groom figcaption::after {
    right: -12px;
    top: -31px;
  }

  .kid-photo.bride figcaption::after {
    left: -12px;
    top: -31px;
  }

  .kid-photo.groom {
    transform: translate(6px, -2px);
  }

  .kid-photo.bride {
    transform: translate(-4px, 20px);
  }

  .groom-image {
    max-width: 158%;
    max-height: 130%;
  }

  .bride-image {
    max-width: 142%;
    max-height: 114%;
  }

  .kid-photo.bride::before,
  .kid-photo.bride::after {
    top: -50px;
    height: 74px;
    width: 2.5px;
  }

  .kid-photo.bride::before {
    left: 38px;
  }

  .kid-photo.bride::after {
    right: 30px;
  }

  .ribbon {
    width: 220px;
    font-size: 1.35rem;
  }

  .recognition {
    padding-inline: 24px;
  }

  .thread-line {
    right: 10px;
    top: 508px;
    width: 76px;
    height: 260px;
  }

  .burgundy-panel {
    min-height: 490px;
    padding-inline: 24px;
  }

  .location-card {
    padding-inline: 18px;
  }

  .location-card h2::after,
  .timing-card h2::after {
    min-width: 280px;
    width: 142%;
  }

  .timing-card h2::after {
    min-width: 340px;
    width: 160%;
    height: 20px;
    margin-bottom: 0;
  }

  .location-polaroid {
    width: min(420px, 92%);
    padding: 12px 12px 34px;
  }

  .location-photo-placeholder {
    aspect-ratio: 16 / 10;
  }

  .timing-card {
    min-height: 1110px;
  }

  .timing-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 84px;
    max-width: 360px;
    min-height: 860px;
    margin-top: 44px;
  }

  .timing-list::before {
    left: 30px;
    width: 3px;
  }

  .timing-heart {
    left: 30px;
    width: 40px;
    height: 38px;
  }

  .timing-item.left,
  .timing-item.right {
    grid-column: 1;
    grid-row: auto;
    min-height: 136px;
    padding-right: 0;
    padding-left: 106px;
    text-align: left;
  }

  .timing-item-1600,
  .timing-item-1700 {
    transform: none;
  }

  .timing-item.left::before,
  .timing-item.right::before {
    left: 30px;
    right: auto;
    width: 58px;
  }

  .timing-item.left::after,
  .timing-item.right::after {
    left: 80px;
    right: auto;
    transform: translateY(-50%) rotate(45deg);
  }

  .palette {
    grid-template-columns: repeat(3, clamp(52px, 18vw, 68px));
  }

  .dress-polaroids {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: center;
  }

  .polaroid {
    width: 166px;
  }

  .dress-polaroid {
    width: min(300px, 82vw);
  }

  .dress-polaroid-three {
    width: min(300px, 82vw);
  }

  .polaroid .photo-placeholder {
    height: 136px;
  }

  .dress-polaroid .photo-placeholder {
    height: min(390px, 106vw);
  }

  .dress-polaroid-one,
  .dress-polaroid-two,
  .dress-polaroid-three {
    grid-column: auto;
    justify-self: center;
    transform: rotate(var(--mobile-polaroid-tilt, -4deg));
  }

  .dress-polaroid-two {
    --mobile-polaroid-tilt: 4deg;
  }

  .timer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 390px) {
  .invite-paper {
    border-radius: 8px;
  }

  .kid-photo.groom figcaption {
    left: -60px;
  }

  .kid-photo .photo-placeholder {
    width: 100px;
  }

  .photo-cutout-slot:has(.kid-image[src]) {
    width: 134px;
    height: 184px;
  }

  .ribbon {
    width: 205px;
  }

  .calendar {
    gap: 4px;
  }

}