@font-face {
  font-family: "Invitation Serif 1";
  src: url("./assets/invitation-font-1.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Invitation Serif 2";
  src: url("./assets/invitation-font-2.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Invitation Serif Supplement";
  src: url("./assets/invitation-serif-supplement.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Invitation Serif Medium";
  src: url("./assets/invitation-serif-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Invitation Icons;
  src: url("./assets/icons.woff2") format("woff2");
}

/* Keep the host's floating badge clear of the invitation controls. */
iframe#nl-badge-frame {
  display: none !important;
}

:root {
  /* The captured artboard measures 10rem across. */
  font-size: min(10vw, 48px);
  --tab-height: calc(44px + env(safe-area-inset-bottom, 0px));
  --invitation-serif: "Invitation Serif 1", "Invitation Serif 2", "Invitation Serif Supplement", serif;
  color: #000;
  background: #fff;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  font: 12px Arial, sans-serif;
}

.invitation-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.invitation-tab {
  display: flex;
  flex: 0 0 var(--tab-height);
}

.rsvp-button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #8f0303;
  color: #fff;
  font: 15px/1.2 var(--invitation-serif);
  cursor: pointer;
}

.invitation-tab .rsvp-button {
  position: relative;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: 0;
  font-size: 16px;
}

.invitation-tab .rsvp-button:active { background: #730202; }
.invitation-tab .rsvp-button:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }

.rsvp-chevron {
  position: absolute;
  top: 14px;
  right: max(18px, env(safe-area-inset-right, 0px));
  width: 27px;
  height: 16px;
  pointer-events: none;
}

.invitation-dialog {
  width: min(310px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid #eadbd8;
  border-radius: 14px;
  background: #fff url("./assets/paper.webp") center top / 10.1099rem auto no-repeat;
  color: #281b18;
  box-shadow: 0 12px 36px rgba(40, 27, 24, .2);
  font: 14px/1.45 Arial, sans-serif;
}

.invitation-dialog::backdrop { background: rgba(35, 21, 18, .48); }

.dialog-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8f0303;
  font-size: 26px;
  cursor: pointer;
}

.rsvp-form, .map-choices { padding: 28px 24px 24px; }

.invitation-dialog h2 {
  margin: 0 24px 18px 0;
  color: #181311;
  font: 18px/1.25 var(--invitation-serif);
  letter-spacing: .06em;
}

.rsvp-field {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-bottom: 14px;
  padding: 0 8px;
  border: 1px solid #8d827d;
}

.rsvp-field:focus-within { outline: 2px solid #8f0303; outline-offset: -1px; }
.rsvp-field span { color: #be1919; }

.rsvp-field input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 16px/1.25 Arial, sans-serif;
  outline: 0;
}

.rsvp-field input::placeholder { color: #68605b; }
.rsvp-form .rsvp-button { width: 100%; border-radius: 0; }
.rsvp-form .rsvp-button:disabled { opacity: .65; cursor: wait; }
.rsvp-form .rsvp-status { margin: 12px 0 0; color: #68514b; }

.map-destination { margin: -6px 0 16px; color: #68514b; }

.map-option {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid #8f0303;
  background: #fffbf8;
  color: #8f0303;
  text-decoration: none;
}

.map-option + .map-option { margin-top: 10px; }

.poster {
  position: relative;
  width: 10rem;
  height: 20.456rem;
  margin: 0 auto;
  overflow: hidden;
  font-family: var(--invitation-serif);
}

.poster > * { position: absolute; }

.paper {
  left: -.02803rem;
  top: -.05333rem;
  width: 10.1099rem;
  height: 27.52rem;
}

.heading-art {
  left: .98667rem;
  top: .02464rem;
  width: 7.94667rem;
  height: 2.2439rem;
}

.gallery {
  left: 1.78667rem;
  top: 3.27493rem;
  width: 6.4rem;
  height: 9.6rem;
  border: .18667rem solid #fff;
  overflow: hidden;
}

.gallery img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.gallery .previous, .gallery .current { opacity: 1; }
.gallery .current { z-index: 1; }
.gallery .fade-in { animation: portrait-fade 2.5s ease both; }

@keyframes portrait-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.poster :is(h1, h2, p) {
  margin: 0;
  padding: .13333rem;
  font-size: .34667rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  overflow-wrap: break-word;
}

.title, .year, .month-day, .time-heading, .venue-heading { color: #8f0303; }
.title { left: 0; top: 2.37839rem; width: 9.97333rem; letter-spacing: .02667rem; }

.poster :is(.year, .month-day) {
  top: 7.89333rem;
  font-size: .32rem;
  letter-spacing: .02667rem;
}

.poster .year { left: -.02667rem; width: 1.70667rem; text-align: right; }
.poster .month-day { left: 8.37333rem; width: 1.6rem; text-align: left; }

.poster .names {
  left: .05333rem;
  top: 13.30667rem;
  width: 9.97333rem;
  font-size: .37333rem;
  letter-spacing: .05333rem;
}

.poster :is(.time-heading, .time, .venue-heading, .venue) {
  left: -.02667rem;
  width: 10.05333rem;
  line-height: 1.7;
}

.poster .time-heading { top: 14.44507rem; font-size: .32rem; }
.poster .time { top: 15.60367rem; line-height: 1.6; white-space: pre-line; }
.poster .venue-heading { top: 17.18714rem; font-size: .32rem; }
.poster .venue { top: 18.38345rem; white-space: pre-line; }

.poster :is(.names, .time, .venue) {
  font-family: "Invitation Serif Medium", var(--invitation-serif);
  font-weight: 500;
}

.ornament {
  top: 14.5303rem;
  width: .64rem;
  height: .64rem;
}

.ornament-left { left: 2.00184rem; }
.ornament-right { left: 7.44rem; }

.controls {
  position: fixed;
  inset: 0 0 var(--tab-height);
  width: 10rem;
  margin: 0 auto;
  pointer-events: none;
}

.controls button {
  position: absolute;
  right: .26667rem;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}

.controls .music {
  top: .26667rem;
  width: .8rem;
  height: .8rem;
  background: rgba(136, 0, 0, .53);
  overflow: hidden;
}

.music img { display: block; width: .8rem; height: .8rem; }
.music.playing img { animation: music-spin 5s linear infinite; }

.music.paused::after {
  position: absolute;
  top: calc(50% - .02667rem);
  width: 100%;
  height: .05333rem;
  background: #fff;
  transform: rotate(45deg);
  content: "";
}

@keyframes music-spin {
  to { transform: rotate(360deg); }
}

.controls .map {
  bottom: calc(15% + .42667rem);
  width: 1.01333rem;
  height: 1.01333rem;
  background: rgba(181, 164, 164, .35);
  font: .26667rem/.37333rem Arial, sans-serif;
  text-shadow: 0 .02667rem .02667rem rgba(0, 0, 0, .14);
}

.map-icon {
  font: .42667rem/normal "Invitation Icons";
  text-shadow: 0 .02667rem .08rem rgba(0, 0, 0, .1);
}

.loading {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: white;
  text-align: center;
}

.is-loading :is(.invitation-scroll, .invitation-tab, .controls) { visibility: hidden; }

.loading-art {
  position: relative;
  width: 2.66667rem;
  height: 2.66667rem;
  margin: 4.5rem auto 0;
  border-radius: 50%;
  outline: .02667rem solid #f7f8f9;
  overflow: hidden;
}

.loading-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.loading-art:not(.is-ready) img { visibility: hidden; }

.loading-fill {
  position: absolute;
  top: .26667rem;
  left: -1.33333rem;
  width: 5.33333rem;
  height: 2.66667rem;
  transform: translateY(.26667rem) rotate(180deg);
}

.loading-art.is-ready .loading-fill { animation: loading-rise 1s linear both; }

.loading-fill::after {
  position: absolute;
  bottom: -.26667rem;
  width: 100%;
  height: 50%;
  left: 0;
  background: white;
  content: "";
}

.loading-fill svg {
  position: absolute;
  top: .53333rem;
  left: -2.13333rem;
  width: 10.66667rem;
  fill: white;
}

.loading-art.is-ready svg { animation: loading-wave 1s linear infinite; }

.loading p { margin: .26667rem 0 0; font-size: .37333rem; color: #646262; }

@keyframes loading-rise {
  from { transform: translateY(.26667rem) rotate(180deg); }
  to { transform: translateY(-2.66667rem) rotate(180deg); }
}

@keyframes loading-wave {
  from { transform: translateX(-2.66666rem); }
  to { transform: translateX(1.33333rem); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery .fade-in, .music.playing img { animation: none; }
  .loading { display: none; }
}