:root {
  color-scheme: light;
  --paper: #fff4d7;
  --ink: #202342;
  --body-ink: #4c4545;
  --green: #104b3e;
  --coral: #ec655b;
  --gold: #efb93f;
  --teal: #1d9b95;
  --violet: #6d61b5;
  --leaf: #5c9b35;
  --display: "Cooper Black", "Cooper Std Black", "Cooper Std", "Bookman Old Style", Georgia, serif;
  --text: "Avenir Next", Avenir, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--paper);
}

body {
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

h1,
p {
  margin: 0;
}

.web04-scene {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 248, 218, 0.95), transparent 42%),
    linear-gradient(180deg, #fff7dc 0%, #dff5ef 62%, #f5e5bc 100%);
  --lockup-left: 32px;
  --lockup-top: 60px;
  --lockup-width: min(760px, calc(100vw - 64px));
  --lockup-max-height: 420px;
  --title-size: 62px;
  --note-size: 16px;
  --facts-size: 14px;
  --label-size: 10px;
  --address-size: 12px;
  --rsvp-size: 14px;
  --lockup-gap: 14px;
}

.ambient-bleed,
.poster-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--plate-image);
  background-repeat: no-repeat;
}

.ambient-bleed {
  z-index: -4;
  background-size: cover;
  background-position: 50% 50%;
  filter: blur(22px) saturate(1.08);
  transform: scale(1.06);
  opacity: 0.84;
}

.ambient-bleed::after {
  position: absolute;
  inset: -2px;
  content: "";
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 246, 213, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(255, 251, 230, 0.08), rgba(35, 91, 65, 0.1));
}

.poster-art {
  z-index: -3;
  background-size: var(--plate-render-width) var(--plate-render-height);
  background-position: var(--plate-left) var(--plate-top);
  filter: saturate(1.03);
}

.poster-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 252, 234, 0.04) 0%, transparent 48%, rgba(21, 83, 57, 0.1) 100%),
    radial-gradient(ellipse at 26% 23%, rgba(255, 248, 218, 0.08), transparent 38%);
}

.copy-haze {
  position: absolute;
  z-index: -1;
  left: calc(var(--lockup-left) - 60px);
  top: calc(var(--lockup-top) - 28px);
  width: min(calc(var(--lockup-width) + 120px), calc(100vw - 28px));
  height: min(calc(var(--lockup-max-height) * 1.05), 52vh);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 48% 40%, rgba(255, 248, 224, 0.34), rgba(255, 248, 224, 0.18) 46%, transparent 76%);
  filter: blur(18px);
  opacity: var(--haze-opacity, 0.34);
  pointer-events: none;
}

.invite-lockup {
  position: absolute;
  z-index: 4;
  left: var(--lockup-left);
  top: var(--lockup-top);
  width: var(--lockup-width);
  max-height: var(--lockup-max-height);
  color: var(--ink);
  text-shadow:
    0 2px 0 rgba(255, 249, 229, 0.72),
    0 10px 30px rgba(82, 60, 35, 0.08);
  opacity: 1;
}

.js .invite-lockup {
  opacity: 0;
}

.js.is-ready .invite-lockup {
  opacity: 1;
  transition: opacity 240ms ease;
}

.invite-lockup h1 {
  max-width: var(--title-width, 100%);
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--title-size);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.86;
  text-wrap: balance;
}

.invite-lockup h1 span {
  display: block;
}

.web04-scene[data-title-flow="single"] .invite-lockup h1 span {
  display: inline;
}

.web04-scene[data-title-flow="single"] .invite-lockup h1 span:first-child::after {
  content: " ";
}

.web04-scene[data-title-flow="single"] .invite-lockup h1 span:nth-child(2)::after {
  content: "\A";
  white-space: pre;
}

.party-note {
  max-width: min(760px, 100%);
  margin-top: var(--note-gap, 16px);
  color: var(--body-ink);
  font-size: var(--note-size);
  font-weight: 850;
  line-height: 1.22;
}

.event-facts {
  display: grid;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--facts-gap, 16px);
  row-gap: 7px;
  color: var(--green);
  font-size: var(--facts-size);
  line-height: 1.14;
}

.web04-scene[data-compact-wide="true"] .party-note {
  max-width: min(620px, 100%);
  line-height: 1.1;
}

.web04-scene[data-compact-wide="true"] .event-facts {
  row-gap: 4px;
  line-height: 1.08;
}

.web04-scene[data-compact-wide="true"] .rsvp-link {
  min-height: 26px;
  line-height: 1;
}

.fact-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: first baseline;
  column-gap: 14px;
}

.fact-label {
  color: var(--coral);
  font-size: var(--label-size);
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.fact-copy {
  color: #064a40;
  font-weight: 900;
}

.fact-separator {
  margin: 0 8px;
  color: rgba(239, 185, 63, 0.92);
  font-weight: 900;
}

.location-link {
  display: grid;
  width: fit-content;
  max-width: 100%;
  border-radius: 5px;
  text-decoration: none;
}

.location-link:hover {
  color: #006458;
  text-shadow:
    0 2px 0 rgba(255, 252, 235, 0.76),
    0 0 18px rgba(255, 246, 204, 0.32);
}

.location-link:focus-visible,
.rsvp-link:focus-visible {
  outline: 2px solid rgba(29, 155, 149, 0.55);
  outline-offset: 4px;
}

.address {
  margin-top: 2px;
  color: #5b514c;
  font-size: var(--address-size);
  font-weight: 800;
}

.rsvp-link {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  margin-top: var(--rsvp-gap, 17px);
  padding: 3px 0;
  color: var(--green);
  font-size: var(--rsvp-size);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-decoration: none;
}

.rsvp-link::after {
  content: ">";
  margin-left: 9px;
  transform: translateY(-1px);
  transition: transform 160ms ease;
}

.rsvp-link:hover {
  color: #006458;
}

.rsvp-link:hover::after {
  transform: translate(3px, -1px);
}

.motion-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.motion-mark {
  position: absolute;
  left: var(--mark-x);
  top: var(--mark-y);
  color: var(--mark-color);
  font-family: var(--text);
  font-size: var(--mark-size);
  font-weight: 900;
  line-height: 1;
  opacity: var(--mark-opacity, 0.78);
  text-shadow: 0 2px 0 rgba(255, 252, 235, 0.58);
  transform: translate3d(-50%, -50%, 0) rotate(var(--mark-rotate, 0deg));
  animation: mark-dance var(--mark-duration, 6.8s) ease-in-out infinite;
  animation-delay: var(--mark-delay, 0s);
  will-change: transform, opacity;
}

.motion-mark[data-layer="behind-copy"] {
  z-index: -1;
  opacity: 0.32;
}

@keyframes mark-dance {
  0% {
    opacity: calc(var(--mark-opacity, 0.78) * 0.78);
    transform: translate3d(-50%, -50%, 0) translateY(0) rotate(var(--mark-rotate, 0deg)) scale(0.96);
  }

  34% {
    opacity: var(--mark-opacity, 0.78);
    transform: translate3d(-50%, -50%, 0) translate(var(--mark-swing, 12px), calc(var(--mark-rise, 20px) * -1)) rotate(calc(var(--mark-rotate, 0deg) + var(--mark-tilt, 12deg))) scale(1.08);
  }

  67% {
    opacity: calc(var(--mark-opacity, 0.78) * 0.86);
    transform: translate3d(-50%, -50%, 0) translate(calc(var(--mark-swing, 12px) * -0.45), var(--mark-dip, 6px)) rotate(calc(var(--mark-rotate, 0deg) - var(--mark-tilt, 12deg) * 0.5)) scale(0.99);
  }

  100% {
    opacity: calc(var(--mark-opacity, 0.78) * 0.78);
    transform: translate3d(-50%, -50%, 0) translateY(0) rotate(var(--mark-rotate, 0deg)) scale(0.96);
  }
}

.web04-scene[data-fit-status="fallback"] .invite-lockup {
  left: clamp(22px, 7vw, 84px);
  top: clamp(42px, 9vh, 112px);
  width: min(780px, calc(100vw - clamp(44px, 14vw, 168px)));
  max-height: none;
}

.web04-scene[data-fit-status="fallback"] .copy-haze {
  opacity: 0.5;
}

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

  .rsvp-link::after {
    transition: none;
  }
}

@media (max-width: 420px) {
  .fact-row {
    column-gap: 10px;
  }

  .fact-separator {
    margin: 0 5px;
  }
}