@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: optional;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
}
@font-face {
  font-family: "Italiana";
  src: url("../fonts/italiana-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: optional;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: optional;
}

:root {
  color-scheme: light;
  --ivory: #f8f0e6;
  --champagne: #d2b991;
  --blush: #e4b9af;
  --taupe: #b49b82;
  --ink: #5c493e;
  --opening-frame-width: min(69.87493vw, 447.54px);
  --invitation-frame-width: min(75.46492vw, 483.34px);
  --opening-frame-ratio: 709 / 1178;
  --opening-frame-top: min(calc(85.17px + 20.61vw), 217.18px);
  --invitation-frame-top: max(2rem, calc(min(19.00727vw, 121.74px) - 4.5rem));
  --entrance-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html {
  min-width: 320px;
  scroll-behavior: auto;
  font-synthesis: none;
}
html[data-app-state="booting"] :is([data-motion-root], .site-tools) {
  visibility: hidden;
}
html[data-initial-route="invitation"] #cover {
  display: none;
}
html[data-initial-route="invitation"] #invitation[hidden] {
  display: block;
}
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 12%, rgb(228 185 175 / 24%), transparent 32rem),
    radial-gradient(circle at 84% 74%, rgb(210 185 145 / 26%), transparent 34rem),
    var(--ivory);
  font-family: "Cormorant Garamond", Georgia, serif;
}
button, input, textarea { font: inherit; }
button { min-height: 48px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.site-tools {
  position: fixed;
  z-index: 100;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
}
.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.language-switcher button {
  min-width: 48px;
  min-height: 48px;
  padding: 0.55rem 0.35rem;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.screen {
  width: min(100%, 52rem);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 6rem) clamp(1rem, 4vw, 2rem) 3rem;
}
.cover-screen {
  position: relative;
  width: 100%;
  min-height: max(100svh, 812px);
  margin: 0;
  padding: 0 0 clamp(3rem, 7vw, 5rem);
  overflow-x: clip;
  text-align: center;
}
.cover-screen[hidden], .invitation-screen[hidden] { display: none; }
[data-motion-state="preparing"] [data-enter] {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .is-entering [data-enter]:not([data-enter="cover-strip"]) {
    animation-duration: var(--enter-duration, 700ms);
    animation-delay: var(--enter-delay, 0ms);
    animation-timing-function: var(--entrance-ease);
    animation-fill-mode: backwards;
  }

  .is-entering [data-enter="cover-title"] {
    --enter-delay: 0ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="cover-peonies"] {
    --enter-delay: 140ms;
    --enter-duration: 800ms;
    animation-name: entrance-soft-scale;
  }

  .is-entering [data-enter="cover-frame"] {
    --enter-delay: 220ms;
    --enter-duration: 850ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="cover-slot"] {
    --enter-delay: 360ms;
    --enter-duration: 500ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="cover-action"] {
    --enter-delay: 700ms;
    --enter-duration: 500ms;
    --enter-y: 10px;
    animation-name: entrance-rise;
  }

  .is-entering [data-enter="invitation-frame"] {
    --enter-duration: 800ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="invitation-peonies"] {
    --enter-delay: 0ms;
    --enter-duration: 800ms;
    animation-name: entrance-soft-scale;
  }

  .is-entering [data-enter="invitation-envelope"] {
    --enter-delay: 140ms;
    --enter-x: -14px;
    --enter-y: -10px;
    animation-name: entrance-offset;
  }

  .is-entering [data-enter="invitation-envelope-letter"] {
    --enter-delay: 220ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="invitation-locket"] {
    --enter-delay: 260ms;
    --enter-x: 12px;
    --enter-y: -12px;
    --enter-rotate: 3deg;
    animation-name: entrance-offset-rotate;
  }

  .is-entering [data-enter="invitation-heart"] {
    --enter-delay: 340ms;
    --enter-duration: 760ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="invitation-cupid"] {
    --enter-delay: 460ms;
    --enter-x: -14px;
    --enter-y: 10px;
    animation-name: entrance-offset;
  }

  .is-entering [data-enter="invitation-record"] {
    --enter-delay: 520ms;
    --enter-x: 12px;
    --enter-y: 12px;
    animation-name: entrance-record;
  }

  .is-entering [data-enter="invitation-music-label"] {
    --enter-delay: 650ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="invitation-caption"] {
    --enter-delay: 720ms;
    --enter-duration: 500ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="invitation-details"] {
    --enter-delay: 720ms;
    --enter-duration: 500ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="rsvp-back"] {
    --enter-duration: 450ms;
    animation-name: entrance-fade;
  }

  .is-entering [data-enter="rsvp-panel"] {
    --enter-delay: 100ms;
    --enter-duration: 750ms;
    --enter-y: 14px;
    animation-name: entrance-rise;
  }

  .is-entering [data-enter="rsvp-intro"] {
    --enter-delay: 220ms;
    --enter-duration: 600ms;
    animation-name: entrance-fade;
  }
}
.cover-title-group {
  position: absolute;
  z-index: 3;
  top: 4.5%;
  left: 5%;
  width: 90%;
  height: auto;
  overflow: visible;
}
@media (max-width: 30rem) {
  .cover-title-group {
    top: max(4.5%, 3.9rem);
    left: 2%;
    width: 96%;
  }
  .cover-title-group .eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
  .cover-title-group h1 {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }
}
.eyebrow {
  width: fit-content;
  margin: 0 auto;
  padding-block: 0.3em 0.4em;
  padding-inline: 0.45em;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(0.9rem, 2.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.65;
  text-transform: uppercase;
}
.cover-title-group h1 {
  width: fit-content;
  margin: 0.35rem auto 0;
  padding-block: 0.35em 0.8em;
  padding-inline: 0.4em;
  overflow: visible;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(1.9rem, 8.3vw, 6.25rem);
  font-weight: 400;
  line-height: 1.45;
  white-space: nowrap;
}
@media (min-width: 48rem) {
  .cover-title-group h1 {
    margin-top: -0.5em;
  }
}
.opening-stage,
.invitation-artwork {
  position: relative;
  width: 100%;
}
.opening-stage {
  z-index: 1;
  padding-top: var(--opening-frame-top);
}
.opening-frame,
.invitation-frame-stage {
  position: relative;
  aspect-ratio: var(--opening-frame-ratio);
  margin-inline: auto;
  isolation: isolate;
}

.opening-frame {
  width: var(--opening-frame-width);
}

.invitation-frame-stage {
  width: var(--invitation-frame-width);
}
.cover-peony-layer,
.invitation-peony-layer {
  position: absolute;
  z-index: 0;
  top: 8%;
  left: -16%;
  width: 132%;
  height: 72%;
  overflow: clip;
  pointer-events: none;
}
.cover-peonies,
.invitation-peonies {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.cover-peonies-left,
.invitation-peonies-left { bottom: 0; left: 0; width: 72%; height: 90%; }
.cover-peonies-right,
.invitation-peonies-right { top: 0; right: 0; width: 42%; height: 58%; }
.opening-frame-image { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.opening-slot-shell {
  position: absolute;
  z-index: 2;
  top: 23%;
  left: 25%;
  width: 50%;
  aspect-ratio: 844 / 156;
  pointer-events: none;
}
.opening-slot {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: inset(4% 0 4% round 999px);
}
.opening-strip-mask {
  position: absolute;
  z-index: 3;
  top: 25%;
  left: 34.5%;
  width: 31%;
  height: 60%;
  overflow: visible;
  clip-path: inset(-10% -15%);
  animation: none;
  pointer-events: none;
}
.opening-strip-window {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 77.6667%;
  background-color: #f8f0e6;
  transform-origin: 50% 50%;
  animation: none;
  transform: translate(4%, 12%) rotate(-2.8deg);
  will-change: transform;
}
.opening-photo-strip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f8f0e6;
  opacity: 1;
}
.opening-photo-frame {
  position: absolute;
  left: 6.6667%;
  width: 86.6667%;
  height: 27.5556%;
  overflow: hidden;
  background: #ddd2c5;
}
.opening-photo-frame-one { top: 2.6667%; }
.opening-photo-frame-two { top: 32.6667%; }
.opening-photo-frame-three { top: 62.6667%; }
.opening-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.08);
}
.opening-photo-kiss {
  object-position: 30% 45%;
  transform: scale(2);
  transform-origin: 30% 45%;
}
.opening-photo-kimono {
  object-position: 56% 43%;
  transform: scale(2.4);
  transform-origin: 56% 43%;
}
.opening-photo-selfie {
  object-position: 50% 43%;
  transform: scale(1.05);
  transform-origin: 50% 43%;
}
.opening-photo-date {
  position: absolute;
  right: 6.6667%;
  bottom: 2.5%;
  left: 6.6667%;
  color: var(--ink);
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(0.8rem, 3vw, 1.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}
.opening-slot-lip {
  position: absolute;
  z-index: 2;
  top: 27.3%;
  left: 28.5%;
  width: 43%;
  height: 1.2%;
  border-bottom: 1px solid rgb(92 73 62 / 34%);
  border-radius: 0 0 999px 999px;
  background:
    linear-gradient(
      to bottom,
      rgb(92 73 62 / 34%) 0%,
      rgb(180 155 130 / 18%) 48%,
      rgb(180 155 130 / 0%) 100%
    );
  box-shadow: 0 3px 4px rgb(92 73 62 / 22%);
  pointer-events: none;
}
.primary-action {
  min-width: 48px;
  min-height: 56px;
  margin-top: 1rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: rgb(248 240 230 / 72%);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
}
.opening-action {
  position: relative;
  z-index: 4;
  width: min(60%, 448px);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.details-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
@keyframes photo-strip-print-and-drop {
  0% { transform: translate(0, -100%) rotate(0deg); }
  68% { transform: translate(0, 12%) rotate(0deg); }
  79% { transform: translate(0, 12%) rotate(0deg); }
  91% { transform: translate(6%, 14%) rotate(-3.4deg); }
  100% { transform: translate(4%, 12%) rotate(-2.8deg); }
}
@keyframes photo-strip-mask-release {
  0%, 79% { clip-path: inset(0); }
  79.01%, 100% { clip-path: inset(-10% -15%); }
}
@keyframes entrance-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes entrance-rise {
  from { opacity: 0; transform: translateY(var(--enter-y, 10px)); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes entrance-soft-scale {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes entrance-frame {
  from { opacity: 0; transform: translateY(var(--enter-y, 18px)) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes entrance-offset {
  from { opacity: 0; transform: translate(var(--enter-x, 0), var(--enter-y, 0)); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes entrance-offset-rotate {
  from {
    opacity: 0;
    transform: translate(var(--enter-x, 0), var(--enter-y, 0)) rotate(var(--enter-rotate, 0deg));
  }
  to { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
@keyframes entrance-heart {
  from { opacity: 0; transform: translateY(var(--enter-y, 10px)) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes entrance-record {
  from {
    opacity: 0;
    transform: translate(var(--enter-x, 12px), var(--enter-y, 12px)) scale(0.96);
  }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .cover-screen.is-printing-strip .opening-strip-mask {
    animation: photo-strip-mask-release 7.2s linear 850ms both;
  }

  .cover-screen.is-printing-strip .opening-strip-window {
    animation: photo-strip-print-and-drop 7.2s cubic-bezier(0.28, 0.12, 0.2, 1) 850ms both;
  }
}
[data-motion-state="preparing"] .opening-strip-mask {
  clip-path: inset(0);
}
[data-motion-state="preparing"] .opening-strip-window {
  transform: translate(0, -100%) rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .opening-strip-mask {
    animation: none;
    clip-path: inset(-10% -15%);
  }
  .opening-strip-window {
    animation: none;
    transform: translate(4%, 12%) rotate(-2.8deg);
  }
}
.invitation-screen {
  width: 100%;
  max-width: none;
  padding: 0;
  text-align: center;
}
.invitation-screen:focus,
.invitation-screen:focus-visible {
  outline: none;
}
.invitation-artwork {
  padding-top: var(--invitation-frame-top);
  margin: 0 auto;
  overflow: visible;
}
.art-layer {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h, auto);
}
.art-layer > img { width: 100%; height: 100%; object-fit: contain; }

/*
 * The invitation reuses the cover's exact 709 × 1178 frame coordinate
 * system. Every percentage below is measured against that single frame.
 */
.art-frame-wrap { --x: 0; --y: 0; --w: 100%; --h: 100%; z-index: 1; }
.envelope-group { --x: 4%; --y: 6%; --w: 69%; --h: 46%; z-index: 3; }
.art-locket-wrap { --x: 43%; --y: 18%; --w: 54%; --h: 31%; z-index: 4; }
.heart-stack { --x: 11%; --y: 43%; --w: 78%; --h: 42%; z-index: 5; }
.art-cupid-wrap { --x: -1%; --y: 67%; --w: 44%; --h: 28%; z-index: 7; }
.music-control { --x: 62%; --y: 68%; --w: 33%; --h: 21%; z-index: 7; }
.music-label { --x: 68%; --y: 73%; --w: 32%; --h: 21%; z-index: 8; }

.art-frame-wrap { pointer-events: none; }
.envelope-group {
  pointer-events: none;
}
.art-envelope-visual {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotate(-2.5deg);
  transform-origin: center;
}
.art-envelope { display: block; width: 100%; height: 100%; object-fit: contain; }
.envelope-letter {
  position: absolute;
  top: 17%;
  left: 14%;
  display: grid;
  justify-items: center;
  align-content: center;
  width: 72%;
  height: 48%;
  margin: 0;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(1.15rem, 5vw, 2.45rem);
  font-weight: 600;
  line-height: 0.9;
  text-align: center;
}
.envelope-name {
  display: block;
  width: 100%;
  white-space: nowrap;
}
.envelope-ampersand {
  display: block;
  margin-block: -0.04em;
  font-size: 0.78em;
}
.art-locket-visual {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 736 / 754;
  transform: translateX(-50%) rotate(-2deg);
  transform-origin: center;
}
.locket-photo {
  position: absolute;
  z-index: 1;
  display: block;
  overflow: hidden;
  background: #d8d0c7;
}
.locket-photo-arianna {
  top: 40%;
  left: 10%;
  width: 37.5%;
  height: 37.5%;
  clip-path: polygon(
    69.3% 5.4%, 78% 9.7%, 82% 14.3%, 85.3% 18.5%, 88.2% 23.1%, 90.4% 27.4%,
    92.2% 32%, 93.3% 36.2%, 94% 40.8%, 94.7% 45.1%, 94.7% 49.7%, 95.1% 53.9%,
    95.1% 58.1%, 94.7% 62.7%, 94.3% 67%, 94% 71.6%, 93.3% 75.8%, 92.5% 80.4%,
    91.4% 84.7%, 90.4% 89.3%, 87.5% 93.5%, 83.1% 93.5%, 51.2% 89.3%, 37.1% 84.7%,
    28.8% 80.4%, 21.9% 75.8%, 16.4% 71.6%, 12.5% 67%, 8.8% 62.7%, 6.7% 58.1%,
    5.9% 53.9%, 5.9% 49.7%, 7.4% 45.1%, 13.2% 40.8%, 41.4% 36.2%, 45.8% 32%,
    48% 27.4%, 49.8% 23.1%, 51.6% 18.5%, 53.8% 14.3%, 56.3% 9.7%, 63.9% 5.4%
  );
}
.locket-photo-charles {
  top: 26%;
  left: 52%;
  width: 40%;
  height: 40%;
  clip-path: polygon(
    78.9% 4.6%, 89.1% 9.3%, 92.1% 13.6%, 94.2% 18.2%, 95.2% 22.5%, 95.5% 27.2%,
    95.5% 31.8%, 95.2% 36.1%, 92.1% 40.8%, 93.2% 45.1%, 92.1% 49.7%, 89.8% 54.4%,
    87.7% 58.7%, 85.4% 63.3%, 83% 67.6%, 79.9% 72.3%, 76.2% 76.9%, 72.4% 81.2%,
    68% 85.9%, 63.6% 90.2%, 57.5% 94.8%, 54.8% 94.8%, 45.6% 90.2%, 38.8% 85.9%,
    32.4% 81.2%, 27.3% 76.9%, 22.5% 72.3%, 18.1% 67.6%, 14.7% 63.3%, 11.6% 58.7%,
    9.6% 54.4%, 7.9% 49.7%, 6.5% 45.1%, 5.5% 40.8%, 4.9% 36.1%, 4.5% 31.8%,
    5.2% 27.2%, 6.9% 22.5%, 9.9% 18.2%, 17.8% 13.6%, 66% 9.3%, 76.2% 4.6%
  );
}
.locket-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.08);
}
.locket-portrait-arianna {
  object-position: 50% 27%;
  transform: scale(2);
  transform-origin: 50% 27%;
}
.locket-portrait-charles {
  object-position: 53% 47%;
  transform: scale(4.8);
  transform-origin: 53% 47%;
}
.art-locket {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.heart-lace { position: absolute; z-index: 8; inset: 0; width: 100%; }
.heart-stack .heart-paper { position: absolute; z-index: 9; top: 9.95%; left: 10.75%; width: 79.6%; height: 80.2%; }
.heart-copy {
  position: absolute;
  z-index: 9;
  top: 28%;
  left: 9%;
  display: grid;
  justify-items: center;
  align-content: center;
  row-gap: clamp(0.2rem, 0.8vw, 0.45rem);
  width: 82%;
  height: 38%;
  color: var(--ink);
  line-height: 1.05;
  text-align: center;
}
.heart-script {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(1.25rem, 4.5vw, 2.25rem);
  font-weight: 600;
}
.heart-copy time {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(0.9rem, 3vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.heart-location {
  display: block;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(0.68rem, 2.1vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.2;
  white-space: nowrap;
}
.art-cupid { transform: none; }
.music-control {
  display: block;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.record-rotor {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: center;
  animation: record-spin 20s linear infinite;
  pointer-events: none;
  will-change: transform;
}
.art-record {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.record-center-label {
  position: relative;
  display: grid;
  place-items: center;
  width: 76%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 32%), transparent 42%),
    repeating-linear-gradient(0deg, rgb(92 73 62 / 2.5%) 0 1px, transparent 1px 3px),
    #f4f0e5;
  box-shadow:
    inset 0 0 0 1px rgb(92 73 62 / 15%),
    inset 0 0 0.8rem rgb(92 73 62 / 8%);
}
.record-center-label::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / 30%), transparent 48%);
  content: "";
  pointer-events: none;
}
.record-monogram {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: #15110f;
}
.record-initial,
.record-ampersand {
  position: absolute;
  font-family: "Pinyon Script", cursive;
  font-weight: 600;
  line-height: 1;
}
.record-initial {
  font-size: clamp(2rem, 8.7vw, 4.1rem);
}
.record-initial-a {
  top: 2%;
  left: 8%;
  transform: rotate(-5deg);
}
.record-initial-c {
  right: 6%;
  bottom: 0;
  transform: rotate(5deg);
}
.record-ampersand {
  top: 50%;
  left: 50%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.9rem, 3.4vw, 1.55rem);
  transform: translate(-50%, -50%);
}
.record-play-indicator {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 29%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(120 116 113 / 86%);
  box-shadow: 0 0.08rem 0.2rem rgb(20 15 12 / 20%);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.record-play-heart {
  position: relative;
  display: grid;
  place-items: center;
  width: 76%;
  height: 76%;
  color: #151416;
  line-height: 1;
}
.record-play-heart::before {
  font-family: Georgia, serif;
  font-size: clamp(1.05rem, 4.3vw, 2.15rem);
  content: "♥";
}
.record-play-heart::after {
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0;
  height: 0;
  border-top: clamp(0.22rem, 0.9vw, 0.42rem) solid transparent;
  border-bottom: clamp(0.22rem, 0.9vw, 0.42rem) solid transparent;
  border-left: clamp(0.36rem, 1.4vw, 0.68rem) solid #fff;
  content: "";
  filter: drop-shadow(0 0.03rem 0 rgb(0 0 0 / 18%));
  transform: translate(-42%, -50%);
}
.music-label {
  display: block;
  overflow: visible;
  color: #17110f;
  pointer-events: none;
}
.music-label-text {
  fill: currentColor;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18.5px;
}
.music-label-copy {
  font-weight: 600;
  letter-spacing: 0.08em;
  paint-order: stroke fill;
  stroke: currentColor;
  stroke-width: 0.18px;
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang="it"] .music-label-text {
  font-size: 14px;
}
html[lang="it"] .music-label-copy {
  letter-spacing: 0.04em;
}
.invitation-brief {
  width: 100%;
  margin: 0;
  padding-block: 0.35em 0.55em;
  padding-inline: 0.5em;
  overflow: visible;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(1.9rem, 5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}
.music-status {
  min-height: 1.5em;
  margin: 0.5rem auto 1rem;
}
@keyframes record-spin {
  to { transform: rotate(360deg); }
}
.invitation-details-stage {
  width: min(calc(100% - 2rem), 48rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-bottom: clamp(4rem, 10vw, 7rem);
}
.invitation-details-inner {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(1.75rem, 5vw, 3rem);
}
.invitation-details-inner > * {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.countdown-heading {
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1rem, 1.75vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.countdown-values {
  display: grid;
  width: min(100%, 30rem);
  min-height: 4.5rem;
  grid-template-columns:
    minmax(0, 1.45fr) minmax(0, 0.16fr)
    minmax(0, 1fr) minmax(0, 0.16fr)
    minmax(0, 1fr) minmax(0, 0.16fr)
    minmax(0, 1fr);
  align-items: center;
  color: var(--ink);
  font-family: "Bodoni Moda", Georgia, serif;
  font-variant-numeric: tabular-nums;
}
[data-countdown-value] { position: relative; display: grid; width: auto; place-items: center; }
[data-countdown-value] strong { font-size: clamp(2.2rem, 4.2vw, 4.2rem); font-weight: 400; line-height: 0.8; }
.countdown-separator { display: block; font-size: clamp(1.8rem, 3.3vw, 3.3rem); line-height: 0.8; }
[data-countdown-value] small {
  position: absolute;
  top: 142%;
  width: max-content;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(0.58rem, 1.1vw, 0.9rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-countdown-complete] { font-size: clamp(1.2rem, 2.5vw, 2rem); }
.details-action {
  display: inline-flex;
  width: min(100%, 35rem);
  min-height: 56px;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  text-decoration: none;
}
.invitation-contact {
  width: min(100%, 34rem);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.35;
}
.invitation-contact > span { display: inline-block; }
.invitation-contact a {
  display: inline-flex;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 1.05em;
  font-weight: 700;
}
.closing-names {
  width: fit-content;
  max-width: 100%;
  padding-block: 0.35em 0.8em;
  padding-inline: 0.4em;
  overflow: visible;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(2rem, 10vw, 5.5rem);
  font-weight: 400;
  line-height: 1.45;
  white-space: nowrap;
}
.invitation-back {
  display: inline-flex;
  min-width: 8rem;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 0.65rem 1rem;
  color: inherit;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}
.rsvp-page {
  width: min(100%, 42rem);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 6rem) clamp(1rem, 4vw, 2rem) 3rem;
}
.rsvp-back {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--ink);
  font-family: "Italiana", Georgia, serif;
  letter-spacing: 0.08em;
}
.rsvp-back::before { content: "←"; margin-right: 0.5rem; }
.guest-details {
  width: min(100%, 38rem);
  margin: 3rem auto 0;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  border: 1px solid rgb(92 73 62 / 38%);
  background: rgb(248 240 230 / 78%);
  text-align: left;
}
.guest-details h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 400;
  text-align: center;
}
.guest-details-intro > p { text-align: center; font-size: 1.15rem; }
.form-field { margin-top: 1rem; }
.form-field label { display: block; margin-bottom: 0.35rem; font-size: 1.05rem; font-weight: 600; }
.form-field input:not([type="checkbox"]), .form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem;
  border: 1px solid rgb(92 73 62 / 55%);
  border-radius: 0;
  color: var(--ink);
  background: #fffdf8;
  font-size: 1rem;
}
.checkbox-field {
  position: relative;
  display: block;
}
.checkbox-field input {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 48px;
  height: 48px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  transform: translateY(-50%);
}
.checkbox-field label {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  margin: 0;
  padding: 0.35rem 0.25rem 0.35rem 3.5rem;
  cursor: pointer;
}
.checkbox-field label::before {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 22px;
  height: 22px;
  border: 1px solid rgb(92 73 62 / 70%);
  background: #fffdf8;
  box-shadow: inset 0 0 0 1px rgb(210 185 145 / 48%);
  content: "";
  transform: translateY(-50%);
}
.checkbox-field input:checked + label::before {
  border-color: var(--ink);
  background: var(--ink);
}
.checkbox-field input:checked + label::after {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 6px;
  height: 11px;
  border: solid var(--ivory);
  border-width: 0 2px 2px 0;
  content: "";
  transform: translateY(-62%) rotate(45deg);
}
.checkbox-field input:focus-visible { outline: 0; }
.checkbox-field input:focus-visible + label::before {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.field-error { min-height: 1.25em; margin: 0.25rem 0 0; color: #684027; }
.form-status { min-height: 1.5em; text-align: center; }
.rsvp-support {
  margin: 0.5rem 0 0;
  overflow-wrap: anywhere;
  text-align: center;
}
.rsvp-support > span { display: inline-block; }
.rsvp-support a {
  display: inline-flex;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.honeypot, .submission-frame { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 47.999rem) {
  .invitation-details-stage { width: min(calc(100% - 3rem), 35rem); }
  .invitation-brief { font-size: clamp(1.55rem, 7.4vw, 3.75rem); }
  .countdown-heading { font-size: 1rem; }
  .countdown-values { min-height: 64px; margin-bottom: 1.5rem; }
  [data-countdown-value] strong { font-size: clamp(1.9rem, 11vw, 2.6rem); }
  .countdown-separator { font-size: clamp(1.5rem, 7vw, 2rem); }
  [data-countdown-value] small { top: 112%; font-size: 0.58rem; letter-spacing: 0.05em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .opening-photo-strip, .record-rotor { animation: none; }
}
@media (forced-colors: active) {
  .checkbox-field label::before {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
  .checkbox-field input:checked + label::before {
    border-color: Highlight;
    background: Highlight;
  }
  .checkbox-field input:checked + label::after { border-color: HighlightText; }
}