:root {
  color-scheme: light;
  --page-width: 655.235;
  --page-height: 4317.295;
}

@font-face {
  font-family: "Nautica";
  src: url("assets/Nautica.otf?v=1") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Bridal Routine";
  src: url("assets/Bridal_Routine.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Oskar Two Light";
  src: url("assets/Oskar-TwoLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  background: #626a43;
  scroll-behavior: auto;
}

body {
  min-width: 280px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 10%, #92996e 0, #70784d 42%, #565e3b 100%);
}

.opening {
  position: relative;
  z-index: 2;
  width: min(100%, 655.235px);
  aspect-ratio: 655.235 / 2194.512;
  margin-inline: auto;
  background: #858c61;
  box-shadow: 0 0 48px rgb(29 34 18 / 34%);
  overflow: visible;
}

.opening__scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #f1efe7;
  isolation: isolate;
}

.opening__background {
  position: absolute;
  left: 0;
  z-index: -4;
  width: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  will-change: opacity, transform;
}

.opening__background--hero {
  top: 0;
  height: 47.9%;
  object-position: 50% 45%;
  border-radius: 0;
}

.opening__background--silk {
  top: 45.66%;
  z-index: -3;
  height: 54.34%;
  object-position: 50% 42%;
}

.opening__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 10%), transparent 32%),
    linear-gradient(0deg, rgb(30 36 18 / 10%), transparent 40%);
  pointer-events: none;
}

.opening__title {
  position: absolute;
  z-index: 4;
  height: auto;
  pointer-events: none;
}

.opening__title--top {
  top: 49.2%;
  left: 1.5%;
  width: 97%;
}

.opening__title--bottom {
  top: 87.94%;
  left: 41.2%;
  width: 56.47%;
}

.opening__flowers-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.opening__flowers {
  position: absolute;
  top: 58.2%;
  bottom: auto;
  left: -17.5%;
  width: 48%;
  height: auto;
  transform: rotate(-5deg);
  pointer-events: none;
  will-change: opacity, transform;
}

.opening__envelope-closed {
  position: absolute;
  top: min(84vh, calc(min(100vw, 655.235px) * 1.16));
  left: 50%;
  width: min(57.5vw, 377px);
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  z-index: 7;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 18px 20px rgb(24 27 15 / 16%));
  pointer-events: none;
  will-change: opacity, transform;
}

.envelope-layer {
  position: absolute;
  top: min(84vh, calc(min(100vw, 655.235px) * 1.16));
  left: 50%;
  display: none;
  width: min(57.5vw, 377px);
  aspect-ratio: 783 / 583;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  perspective: 1350px;
  filter: drop-shadow(0 18px 20px rgb(24 27 15 / 16%));
  will-change: transform;
}

.envelope-layer--back {
  z-index: 5;
}

.envelope-layer--front {
  z-index: 7;
  transform-style: preserve-3d;
}

.envelope__back,
.envelope__lining,
.envelope__front,
.envelope__flap-face {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(249 247 238 / 24%), rgb(225 222 210 / 10%)),
    url("assets/envelope-paper.webp") center / cover;
}

.envelope__back {
  border: 1px solid rgb(85 83 66 / 14%);
  box-shadow:
    0 18px 28px rgb(28 31 18 / 22%),
    inset 0 1px rgb(255 255 255 / 44%);
}

.envelope__lining {
  inset: 6.5% 6.2% 31%;
  z-index: 2;
  opacity: var(--lining-opacity, 0);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 52%, 50% 100%, 0 52%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%), rgb(56 49 34 / 8%)),
    url("assets/envelope-inside.webp") center 44% / cover;
  box-shadow:
    inset 0 0 0 8px rgb(248 246 236 / 92%),
    inset 0 -18px 22px rgb(28 30 18 / 16%);
  transition: opacity 0.05s linear;
}

.envelope__lid {
  position: absolute;
  inset: 0;
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  filter: var(--lid-filter, drop-shadow(0 1px 1px rgb(64 61 45 / 22%)));
  will-change: transform, filter;
}

.envelope__flap-face {
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 50% 62%);
  border: 1px solid rgb(69 67 53 / 24%);
  filter:
    drop-shadow(0 2px 1px rgb(66 63 48 / 26%))
    drop-shadow(0 8px 10px rgb(39 42 24 / 8%));
  backface-visibility: hidden;
}

.envelope__flap-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 42%), transparent 34%),
    linear-gradient(115deg, transparent 44%, rgb(78 73 54 / 18%) 50%, transparent 57%);
  opacity: var(--flap-shade-opacity, 0.16);
  pointer-events: none;
}

.envelope__flap-face--inner {
  overflow: hidden;
  transform: rotateX(180deg);
  background:
    linear-gradient(165deg, rgb(249 247 238 / 24%), rgb(218 214 199 / 12%)),
    url("assets/envelope-paper.webp") center / cover;
}

.envelope__flap-face--outer::before,
.envelope__flap-face--outer::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: 70.8%;
  height: 1.35px;
  background: rgb(68 66 52 / 42%);
  box-shadow: 0 1px rgb(255 255 255 / 40%);
}

.envelope__flap-face--outer::before {
  left: 0;
  transform: rotate(45deg);
  transform-origin: left;
}

.envelope__flap-face--outer::after {
  right: 0;
  transform: rotate(-45deg);
  transform-origin: right;
}

.envelope__front {
  z-index: 3;
  clip-path: polygon(0 20%, 50% 61%, 100% 20%, 100% 100%, 0 100%);
  border: 1px solid rgb(75 72 56 / 18%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 56%),
    inset 0 -1px rgb(70 67 52 / 10%);
}

.envelope__front {
  filter: var(--front-filter, none);
}

.envelope__front::before,
.envelope__front::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  z-index: 5;
  width: 64%;
  height: 1.35px;
  background: rgb(68 66 52 / 43%);
  box-shadow: 0 1px rgb(255 255 255 / 48%);
  transform-origin: bottom;
}

.envelope__front::before {
  left: 0;
  transform: rotate(-38deg);
  transform-origin: left bottom;
}

.envelope__front::after {
  right: 0;
  transform: rotate(38deg);
  transform-origin: right bottom;
}

.envelope__seal {
  position: absolute;
  top: 61%;
  left: 50%;
  z-index: 3;
  width: 24%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translateY(var(--seal-lift, 0)) scale(var(--seal-scale, 1));
  transform-style: preserve-3d;
  filter: drop-shadow(0 var(--seal-shadow-y, 4px) var(--seal-shadow-blur, 5px) rgb(30 34 18 / 25%));
}

.envelope__seal-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: visible;
  will-change: opacity;
}

.envelope__seal-face--back {
  transform: rotateX(180deg);
  opacity: 0;
}

.opening__envelope-open,
.opening__envelope-pocket {
  position: absolute;
  top: min(84vh, calc(min(100vw, 655.235px) * 1.16));
  left: 50%;
  width: min(80vw, 520px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(9deg) scale(0.72);
  transform-origin: 50% 62%;
  pointer-events: none;
  will-change: top, left, opacity, transform;
}

.opening__envelope-open {
  z-index: 5;
  filter: drop-shadow(0 14px 12px rgb(24 27 15 / 22%));
  will-change: top, left, opacity, transform;
}

.opening__envelope-pocket {
  z-index: 7;
}

.opening__envelope-target {
  position: absolute;
  top: 86%;
  left: 4.9%;
  width: 43.5%;
  aspect-ratio: 1671 / 2015;
  visibility: hidden;
  pointer-events: none;
}

.opening__polaroid {
  position: absolute;
  top: 94%;
  right: 1.25%;
  z-index: 7;
  width: 28.72%;
  height: auto;
  pointer-events: none;
}

.opening__card {
  position: absolute;
  top: 63%;
  left: 50%;
  z-index: 6;
  width: min(78%, 500px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.34);
  transform-origin: 50% 55%;
  box-shadow: none;
  will-change: opacity, transform;
  user-select: none;
  -webkit-user-drag: none;
}

.opening__card.is-extracted {
  z-index: 8;
}

.opening__card-target {
  position: absolute;
  top: 58.9%;
  left: 16.9%;
  width: 66.24%;
  aspect-ratio: 870 / 1239;
  visibility: hidden;
  pointer-events: none;
}

.paper-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 655.235px);
  margin-inline: auto;
  overflow: hidden;
  background: #e9e5df;
  box-shadow: 0 0 48px rgb(29 34 18 / 34%);
}

.invitation {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
  background: #f1efe7;
  isolation: isolate;
}

.invitation__artwork {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.art-part {
  position: relative;
}

.art-part--top {
  z-index: 2;
}

.art-part--bottom {
  z-index: 1;
}

.invitation__polaroid-left {
  position: absolute;
  top: 72%;
  left: -5%;
  z-index: 3;
  width: 28.72%;
  height: auto;
  transform: rotate(-14deg);
  filter: drop-shadow(0 3px 6px rgb(60 65 39 / 22%));
  pointer-events: none;
  user-select: none;
}

.timeline {
  --u: min(100vw, 655.235px);
  position: relative;
  z-index: 1;
  padding: calc(var(--u) * 0.085) calc(var(--u) * 0.075) calc(var(--u) * 0.075);
  background: url("assets/timeline-paper.webp") no-repeat top center / 100% auto;
}

.timeline__title {
  margin: 0 0 calc(var(--u) * 0.05);
  color: #4d5236;
  font: 400 calc(var(--u) * 0.105) / 1.15 "Nautica", "Bridal Routine", "Times New Roman", serif;
  text-align: center;
  font-weight: 400;
}

.timeline__note {
  margin: calc(var(--u) * -0.028) 0 calc(var(--u) * 0.05);
  color: #8a8570;
  font: 300 calc(var(--u) * 0.0145) / 1.6 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.timeline__note a {
  color: #4e7d28;
  text-decoration: none;
}

.timeline__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__list::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 0.02);
  bottom: calc(var(--u) * 0.02);
  left: 50%;
  width: 1px;
  background:
    linear-gradient(
      rgb(104 115 76 / 0%),
      rgb(104 115 76 / 55%) 8%,
      rgb(104 115 76 / 55%) 92%,
      rgb(104 115 76 / 0%)
    );
  transform: translateX(-0.5px);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr calc(var(--u) * 0.135) 1fr;
  align-items: center;
  padding: calc(var(--u) * 0.018) 0;
}

.timeline__medallion {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 0.115);
  height: calc(var(--u) * 0.115);
  margin-inline: auto;
  border: 1px solid rgb(104 115 76 / 34%);
  border-radius: 999px;
  background: #f4f2e9;
  box-shadow:
    0 0 0 calc(var(--u) * 0.006) #f4f2e9,
    0 2px 8px rgb(60 65 39 / 14%);
}

.timeline__medallion svg {
  width: 78%;
  height: 78%;
  display: block;
}

.timeline__content {
  grid-row: 1;
  margin: 0;
}

.timeline__item:nth-child(odd) .timeline__content {
  grid-column: 1;
  padding-right: calc(var(--u) * 0.012);
  text-align: right;
}

.timeline__item:nth-child(even) .timeline__content {
  grid-column: 3;
  padding-left: calc(var(--u) * 0.012);
  text-align: left;
}

.timeline__time {
  margin: 0 0 calc(var(--u) * 0.008);
  color: #6d6a52;
  font: 300 calc(var(--u) * 0.0165) / 1.4 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.timeline__event {
  margin: 0;
  text-wrap: balance;
  color: #494736;
  font: 300 calc(var(--u) * 0.0235) / 1.35 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 300;
}

.timeline__place {
  margin: calc(var(--u) * 0.008) 0 0;
  color: #7a765c;
  font: 300 calc(var(--u) * 0.0155) / 1.5 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.timeline__place a {
  color: #4e7d28;
  font-weight: 400;
  text-decoration: underline solid rgb(78 125 40 / 75%);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.timeline__place a:hover,
.timeline__place a:focus-visible {
  color: #4d5236;
}

.music-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  background: rgb(104 115 76 / 88%);
  color: #f4f2e9;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 16px rgb(29 34 18 / 30%);
  backdrop-filter: blur(4px);
  transition:
    opacity 400ms ease,
    transform 240ms ease,
    background-color 240ms ease;
}

.music-toggle svg {
  width: 22px;
  height: 22px;
}

.music-toggle .music-toggle__slash {
  opacity: 1;
}

.music-toggle.is-playing .music-toggle__slash {
  opacity: 0;
}

.music-toggle.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.music-toggle:hover {
  background: rgb(119 130 89 / 94%);
  transform: scale(1.06);
}

.invitation__rsvp-copy {
  position: absolute;
  top: 69.003%;
  left: 50%;
  z-index: 4;
  width: 78%;
  margin: 0;
  color: #494736;
  font: 300 calc(min(100vw, 655.235px) * 0.01831) / 1.75 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.24em;
  text-align: center;
  text-shadow: none;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}

.invitation__rsvp-copy span {
  display: block;
}

.bank-details {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
  padding: 5% 9% 15%;
  background: #e9e5df url("assets/footer-paper-12222.webp") no-repeat top center / 100% auto;
}

.bank-details {
  overflow: hidden;
}

.bank-details__flower {
  position: absolute;
  right: -5%;
  bottom: calc(min(100vw, 655.235px) * -0.05);
  z-index: 2;
  width: 27%;
  height: auto;
  transform: rotate(9deg);
  pointer-events: none;
  user-select: none;
}

.bank-details__copy {
  position: relative;
  z-index: 1;
}

.bank-details__copy {
  margin: 0;
  color: #494736;
  font: 300 calc(min(100vw, 655.235px) * 0.01831) / 1.75 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
}

.bank-details__copy span {
  display: block;
}

.bank-details__heading,
.bank-details__copy span:first-child {
  -webkit-text-stroke: 0.4px #494736;
}

.bank-details__heading {
  margin-top: 1.6em;
}

.invitation__bank-details-heading {
  margin-top: 1.6em;
}

.majestic-visuals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.majestic-visual {
  position: absolute;
  z-index: 3;
  height: auto;
  opacity: 0;
  filter: blur(2px);
  transform: translateY(18px) scale(0.985);
  transform-origin: 50% 70%;
  transition:
    opacity 1.35s cubic-bezier(0.2, 0.75, 0.25, 1),
    transform 1.6s cubic-bezier(0.16, 0.75, 0.2, 1),
    filter 1.45s ease-out;
  will-change: opacity, transform, filter;
}

.majestic-visual.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.majestic-visual--tree-left {
  top: -5.868%;
  left: -38.6%;
  width: 65.76%;
}

.majestic-visual--tree-right {
  top: -3.702%;
  left: 74.77%;
  width: 65.76%;
  transition-delay: 120ms;
}

.majestic-visual--bird-left {
  top: 13.841%;
  left: 28.74%;
  width: 23.37%;
  transition-delay: 320ms;
}

.majestic-visual--bird-right {
  top: 16.220%;
  left: 53.39%;
  width: 15.98%;
  transition-delay: 470ms;
}

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

.pair {
  position: absolute;
  top: calc(10.110% - 10px);
  width: 6.715%;
  height: 1.863%;
  overflow: visible;
}

.pair__face {
  --sprite-column: 0;
  --sprite-row: 0;
  position: absolute;
  inset: 0;
  background-image: url("assets/digits/pairs.png");
  background-repeat: no-repeat;
  background-size: 1000% 1000%;
  background-position:
    calc(var(--sprite-column) * 11.111111%)
    calc(var(--sprite-row) * 11.111111%);
  opacity: 0;
  backface-visibility: hidden;
  will-change: opacity;
}

.pair__face.is-current {
  opacity: 1;
}

.pair--days {
  left: 31.086%;
}

.pair--hours {
  left: 41.214%;
}

.pair--minutes {
  left: 50.903%;
}

.pair--seconds {
  left: 60.797%;
}

.pair__face.is-blinking {
  animation: number-blink 620ms cubic-bezier(0.35, 0, 0.2, 1) both;
}

.colon {
  position: absolute;
  top: calc(10.110% - 10px);
  width: 1.262%;
  height: 1.863%;
  object-fit: fill;
  opacity: 1;
}

.colon--one {
  left: 39.256%;
}

.colon--two {
  left: 48.396%;
}

.colon--three {
  left: 58.802%;
}

.rsvp-button {
  position: absolute;
  top: calc(73.219% - 6px);
  left: calc(35.2% + 11px);
  z-index: 5;
  width: calc(29.6% - 22px);
  height: 2.18%;
  padding: 0;
  border: 1px solid rgb(104 115 76 / 75%);
  outline: 1px solid rgb(104 115 76 / 30%);
  outline-offset: 3px;
  background: transparent;
  box-shadow: none;
  color: #4d5236;
  cursor: pointer;
  font: 300 clamp(10px, 2.4vw, 15px) / 1 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  transition:
    background-color 320ms ease,
    color 320ms ease,
    border-color 320ms ease,
    letter-spacing 320ms ease;
}

.rsvp-button:hover,
.rsvp-button:focus-visible {
  border-color: #68734c;
  background: #68734c;
  color: #f4f2e9;
  letter-spacing: 0.36em;
}

.rsvp-button:focus-visible {
  outline: 2px solid #4d5236;
  outline-offset: 4px;
}

.rsvp-button:active {
  background: #5c673f;
  transition-duration: 120ms;
}

body.rsvp-is-open {
  overflow: hidden;
}

.rsvp-modal[hidden] {
  display: none;
}

.rsvp-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 34px);
  color: #4d5236;
}

.rsvp-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 12%, rgb(255 255 255 / 22%), transparent 36%),
    rgb(48 54 31 / 64%);
  backdrop-filter: blur(10px);
}

.rsvp-modal__card {
  position: relative;
  z-index: 1;
  width: min(92vw, 500px);
  max-height: min(88vh, 780px);
  overflow: auto;
  padding: clamp(28px, 6vw, 46px);
  border: 1px solid rgb(97 101 71 / 30%);
  border-radius: 3px;
  background:
    linear-gradient(rgb(249 247 238 / 30%), rgb(241 239 231 / 14%)),
    url("assets/timeline-paper.webp") top center / 100% auto;
  box-shadow: 0 26px 70px rgb(23 27 14 / 38%);
  animation: rsvp-modal-rise 520ms cubic-bezier(0.16, 0.75, 0.2, 1) both;
}

.rsvp-modal__close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(79 84 54 / 14%);
  border-radius: 999px;
  background: rgb(255 255 255 / 46%);
  color: #535939;
  cursor: pointer;
  font: 300 28px / 1 Georgia, serif;
  transition:
    transform 220ms ease,
    background-color 220ms ease;
}

.rsvp-modal__close:hover,
.rsvp-modal__close:focus-visible {
  background: rgb(255 255 255 / 78%);
  transform: rotate(8deg) scale(1.06);
}

.rsvp-modal__close:focus-visible {
  outline: 2px solid #7c8559;
  outline-offset: 3px;
}

.rsvp-modal__eyebrow {
  margin: 0 0 8px;
  color: #71784f;
  font: 300 11px / 1.45 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
}

.rsvp-modal__title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 6px 0 30px;
  color: #3f4529;
  font: 300 clamp(24px, 6.5vw, 34px) / 1 "Oskar Two Light", "Times New Roman", serif;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-align: center;
  text-transform: uppercase;
}

.rsvp-modal__title::before,
.rsvp-modal__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(104 115 76 / 35%);
}

.rsvp-modal__intro {
  max-width: 28em;
  margin: 12px auto 24px;
  color: #666b49;
  font: 300 13px / 1.7 "Oskar Two Light", Georgia, serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

.rsvp-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
}

.rsvp-form__hidden {
  display: none;
}

.rsvp-form__field {
  display: grid;
  gap: 7px;
  color: #545a3a;
  font: 300 12px / 1.2 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rsvp-form__field input,
.rsvp-form__field select,
.rsvp-form__field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid rgb(85 89 58 / 42%);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #3f4529;
  font: 400 16px / 1.35 Georgia, "Times New Roman", serif;
  letter-spacing: 0;
  outline: none;
  text-transform: none;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.rsvp-form__field textarea {
  min-height: 74px;
  resize: vertical;
}

.rsvp-form__field input:focus,
.rsvp-form__field select:focus,
.rsvp-form__field textarea:focus {
  border-bottom-color: #68734c;
  box-shadow: 0 1px 0 #68734c;
}

.rsvp-form__fieldset {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.rsvp-form__fieldset legend {
  margin-bottom: 4px;
  padding-inline: 0;
  color: #545a3a;
  font: 300 12px / 1.2 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rsvp-form__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4c5234;
  cursor: pointer;
  font: 400 15px / 1.3 Georgia, "Times New Roman", serif;
}

.rsvp-form__choice input {
  accent-color: #68734c;
}

.rsvp-form__status {
  min-height: 20px;
  margin: 0;
  color: #626848;
  font: 400 13px / 1.45 Georgia, "Times New Roman", serif;
  text-align: center;
}

.rsvp-form__status.is-success {
  color: #4f6336;
}

.rsvp-form__status.is-error {
  color: #835044;
}

.rsvp-form__submit {
  justify-self: center;
  min-width: 200px;
  min-height: 46px;
  padding: 0 28px;
  border: 1px solid rgb(104 115 76 / 75%);
  border-radius: 0;
  outline: 1px solid rgb(104 115 76 / 30%);
  outline-offset: 3px;
  background: transparent;
  box-shadow: none;
  color: #4d5236;
  cursor: pointer;
  font: 300 13px / 1 "Oskar Two Light", Arial, sans-serif;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  transition:
    background-color 260ms ease,
    color 260ms ease,
    letter-spacing 260ms ease;
}

.rsvp-form__submit:hover,
.rsvp-form__submit:focus-visible {
  background: #68734c;
  color: #f4f2e9;
  letter-spacing: 0.36em;
}

.rsvp-form__submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.rsvp-form__submit:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  contain: strict !important;
}

.visually-hidden > * {
  margin: 0 !important;
}

@keyframes number-blink {
  0% {
    opacity: 1;
    filter: none;
  }

  38% {
    opacity: 0.22;
    filter: drop-shadow(0 0 2px rgb(91 96 62 / 18%));
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes rsvp-modal-rise {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-layer {
    opacity: 0;
  }

  .opening__envelope-pocket {
    display: none;
  }

  .opening__envelope-open {
    position: absolute;
    top: 74.2%;
    left: 4.9%;
    width: 43.5%;
    opacity: 1;
    clip-path: none;
    transform: rotate(-9deg);
  }

  .opening__card {
    position: absolute;
    top: 60.24%;
    left: 16.9%;
    width: 66.24%;
    opacity: 1;
    transform: none;
  }

  .pair__face.is-blinking {
    animation: none;
  }

  .majestic-visual {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .rsvp-button {
    transition: none;
  }

  .rsvp-modal__card {
    animation: none;
  }

  .rsvp-modal__close,
  .rsvp-form__field input,
  .rsvp-form__field select,
  .rsvp-form__field textarea,
  .rsvp-form__submit {
    transition: none;
  }
}

.copy-value {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px dashed rgb(85 89 58 / 45%);
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: border-color 200ms ease, color 200ms ease;
}

.copy-value:hover,
.copy-value:focus-visible {
  border-bottom-color: #68734c;
  color: #3f4529;
}

.copy-value svg {
  width: 0.95em;
  height: 0.95em;
  stroke-width: 1.4;
  opacity: 0.75;
  flex: none;
}

.copy-value__done {
  position: absolute;
  top: -1.5em;
  left: 50%;
  padding: 2px 8px;
  border-radius: 2px;
  background: #68734c;
  color: #f4f2e9;
  font-style: normal;
  font-size: 0.8em;
  letter-spacing: 0.18em;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 250ms ease;
  pointer-events: none;
  white-space: nowrap;
}

.copy-value.is-copied .copy-value__done {
  opacity: 1;
}

.nowrap {
  white-space: nowrap;
}