:root {
  --serif: "Bodoni Moda", Didot, "Times New Roman", serif;
  --script: "Parisienne", cursive;
}

h1, h2, h3,
.hero-copy,
.where-date,
.closing-names {
  font-family: var(--serif);
}

.intro-script,
.where-place,
.closing-script,
.closing-names span,
.hero h1 small {
  font-family: var(--script);
}

.hero,
.intro,
.timing,
.closing {
  position: relative;
  isolation: isolate;
}

.hero::before,
.intro::before,
.timing::before,
.closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: rgba(255, 251, 246, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 54%, transparent 82%);
  mask-image: radial-gradient(ellipse at center, #000 54%, transparent 82%);
  pointer-events: none;
}

.hero::before {
  inset: 2.5rem max(4vw, calc((100% - 820px) / 2));
  border-radius: 46%;
}

.intro::before,
.timing::before,
.closing::before {
  inset: 1.5rem max(1%, calc((100% - 900px) / 2));
}

.fabric-note,
.where,
.detail-card,
.rsvp-section,
.rsvp-form {
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.where { background: rgba(255, 252, 247, 0.48); }
.rsvp-section { background: rgba(249, 240, 232, 0.56); }
.rsvp-form { background: rgba(255, 253, 249, 0.84) !important; }

.countdown-card {
  background: linear-gradient(145deg, rgba(89, 20, 39, 0.48), rgba(123, 35, 53, 0.32));
  border: 1px solid rgba(255, 242, 234, 0.62);
  box-shadow:
    0 28px 75px rgba(80, 28, 38, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(91, 25, 39, 0.15);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.countdown-card h2,
.countdown strong {
  color: #fffaf6;
  text-shadow: 0 2px 14px rgba(67, 13, 29, 0.3);
}

@media (max-width: 760px) {
  .hero::before { inset: 1rem 0.25rem; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
  .intro::before, .timing::before, .closing::before { inset: 0; }
}