:root {
  --paper: #fffffa;
  --ink: #201f1e;
  --blue: #3658a7;
  --blue-hover: #6f86c4;
  --font-body: "Asul", Georgia, serif;
  --font-display: "Besley", Georgia, serif;
  --font-script: "Butterfly Kids", cursive;
  --site-nav-top: 72px;
  --site-nav-right: 66px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

body.home-page {
  height: 100svh;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.reveal {
  opacity: 0;
  transition: opacity 900ms ease;
}

.reveal.is-visible {
  opacity: 1;
}

/* Home */
.home-shell {
  --home-content-shift: 0px;

  position: relative;
  height: 100svh;
  min-height: 640px;
  background: var(--paper);
  overflow: hidden;
}

.home-hero {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.home-top-links,
.story-side-nav {
  position: fixed;
  top: var(--site-nav-top);
  right: var(--site-nav-right);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--blue);
  font: 400 16px/1.8 var(--font-body);
  text-align: right;
}

.home-film {
  position: absolute;
  z-index: 1;
  top: calc(169.75px + var(--home-content-shift));
  left: 50%;
  width: 282.4px;
  height: 339.4px;
  object-fit: cover;
  transform: translateX(-50%);
}

.home-title {
  position: absolute;
  z-index: 3;
  top: calc(339.45px + var(--home-content-shift));
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--blue);
  font: 400 clamp(40px, 10.65vw, 136px)/1 var(--font-display);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.home-date {
  position: absolute;
  z-index: 3;
  top: calc(540px + var(--home-content-shift));
  left: 50%;
  width: min(576px, calc(100vw - 48px));
  margin: 0;
  transform: translateX(-50%);
  color: var(--ink);
  font: 400 19.07px/1.8 var(--font-body);
  text-align: center;
}

.site-footer {
  position: relative;
  height: 215.875px;
  background: var(--paper);
  text-align: center;
}

.footer-mark,
.footer-initials {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
}

.footer-mark {
  width: 232px;
}

.footer-initials {
  min-width: 190px;
  color: #101010;
  font: 400 96px/0.9 var(--font-script);
  letter-spacing: 0;
  white-space: nowrap;
}

.site-footer p {
  position: absolute;
  top: 155px;
  left: 50%;
  width: 282px;
  margin: 0;
  transform: translateX(-50%);
  font: 400 16px/1.8 var(--font-body);
  text-align: center;
}

.home-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 120px;
}

.home-footer .footer-initials {
  top: 8px;
  min-width: 140px;
  font-size: 82px;
}

.home-footer p {
  top: 84px;
}

.floating-player {
  position: fixed;
  bottom: 22px;
  left: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  width: 238px;
  min-height: 48px;
  padding: 8px 12px 9px 8px;
  border: 1px solid rgba(54, 88, 167, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.92);
  color: var(--blue);
  box-shadow: 0 8px 24px rgba(32, 31, 30, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.player-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.player-icon {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
  transform: translate(-35%, -50%);
}

.floating-player.is-playing .player-icon {
  left: 50%;
  width: 10px;
  height: 12px;
  border: 0;
  transform: translate(-50%, -50%);
}

.floating-player.is-playing .player-icon::before,
.floating-player.is-playing .player-icon::after {
  position: absolute;
  top: 0;
  width: 3px;
  height: 12px;
  background: currentColor;
  content: "";
}

.floating-player.is-playing .player-icon::before {
  left: 0;
}

.floating-player.is-playing .player-icon::after {
  right: 0;
}

.player-meta {
  min-width: 0;
  margin-left: 10px;
  font-family: var(--font-body);
}

.player-meta strong,
.player-meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-meta strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
}

.player-meta span {
  margin-top: 1px;
  color: var(--blue);
  font-size: 11px;
  line-height: 1.2;
}

.player-progress {
  position: absolute;
  right: 15px;
  bottom: 8px;
  left: 50px;
  height: 1px;
  overflow: hidden;
  background: rgba(54, 88, 167, 0.2);
}

.player-progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--blue);
}

/* Story header */
.story-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  height: 235px;
  pointer-events: none;
}

.story-header a,
.story-header button {
  pointer-events: auto;
}

.home-top-links a,
.story-side-nav a {
  display: block;
  padding: 1.45px 0;
  transition: color 180ms ease;
}

.home-top-links a:hover,
.home-top-links a:focus-visible,
.story-side-nav a:hover,
.story-side-nav a:focus-visible {
  color: var(--blue-hover);
}

.story-side-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.story-logo-text {
  position: absolute;
  top: 20px;
  left: 50%;
  width: min(620px, 50vw);
  transform: translateX(-50%);
  font: 400 70px/1.15 var(--font-script);
  text-align: center;
}

.story-logo-text span {
  display: block;
}

.story-logo-image,
.menu-toggle,
.mobile-menu {
  display: none;
}

/* Story content */
.story-main {
  background: var(--paper);
}

.story-section {
  position: relative;
  padding-inline: 4vw;
}

.story-intro {
  min-height: 901.7px;
  padding-top: 293px;
}

.story-two-col {
  display: grid;
  grid-template-columns: minmax(320px, 429px) minmax(420px, 527px);
  justify-content: space-between;
  gap: clamp(90px, 12vw, 156px);
  max-width: 1163px;
  margin: 0 auto;
}

.story-section h2 {
  margin: 0;
  font: 400 49.79px/1.277 var(--font-display);
  letter-spacing: 0;
  text-transform: uppercase;
}

.story-copy {
  width: 100%;
  max-width: 527px;
  font: 400 16px/1.8 var(--font-body);
}

.story-copy p {
  margin: 0 0 16px;
}

.story-copy p:last-child {
  margin-bottom: 0;
}

.date-collage {
  position: relative;
  isolation: isolate;
  height: 2409.3px;
  background: var(--paper);
  overflow: visible;
}

.date-collage h3 {
  --date-fade-opacity: 1;
  position: sticky;
  top: 40svh;
  z-index: 1;
  width: max-content;
  margin: 0 auto;
  transform: translateY(-50%);
  opacity: var(--date-fade-opacity);
  color: var(--blue);
  font: 400 65.2px/1 var(--font-display);
  white-space: nowrap;
  pointer-events: none;
  will-change: opacity;
}

.date-collage h3.reveal {
  transition: opacity 120ms linear;
}

.date-collage h3.reveal.is-visible {
  opacity: var(--date-fade-opacity);
}

.date-collage h3.reveal:not(.is-visible) {
  opacity: 0;
}

.collage-photo {
  position: absolute;
  z-index: 2;
  width: 202.6px;
  height: 243.2px;
  object-fit: contain;
}

.photo-a { left: 15.65%; top: 665.5px; }
.photo-b { left: 27.25%; top: 1137.5px; }
.photo-c { left: 65.9%; top: 738.1px; }
.photo-d { left: 4.05%; top: 1573.3px; }
.photo-e { left: 54.3%; top: 2081.7px; }
.photo-f { left: calc(100% - 226px); top: 1198px; }
.photo-g { left: 70.8%; top: 1664px; }

@media (min-width: 900px) and (max-width: 1020px) {
  .photo-f { left: calc(100% - 226px); }
  .photo-g { left: calc(100% - 400px); }

  .rsvp-page .floating-player {
    width: 46px;
    min-height: 46px;
    padding: 7px;
  }

  .rsvp-page .floating-player .player-meta,
  .rsvp-page .floating-player .player-progress {
    display: none;
  }
}

.engagement-section {
  min-height: 622px;
  padding-top: 42px;
}

.music-section {
  position: relative;
  min-height: 327.7px;
  padding-top: 37px;
  background: var(--paper);
  text-align: center;
}

.spotify-card {
  position: relative;
  display: flex;
  align-items: center;
  width: 478px;
  max-width: calc(100vw - 46px);
  height: 152px;
  margin: 0 auto;
  padding: 16px 54px 16px 16px;
  overflow: hidden;
  border-radius: 10px;
  background: #262626;
  color: #fff;
  text-align: left;
}

.spotify-card img {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 7px;
  object-fit: cover;
}

.spotify-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  margin-left: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.spotify-copy strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spotify-copy span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #b5b5b5;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spotify-copy span b {
  display: inline-block;
  margin-right: 5px;
  padding: 2px 5px;
  border-radius: 2px;
  background: #d7d7d7;
  color: #262626;
  font-size: 10px;
  line-height: 1;
}

.spotify-copy small {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  color: #fff;
  font-size: 13px;
}

.spotify-copy small i {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.spotify-copy small i::before,
.spotify-copy small i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #fff;
  content: "";
  transform: translate(-50%, -50%);
}

.spotify-copy small i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.spotify-logo {
  position: absolute;
  top: 18px;
  right: 17px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
}

.spotify-logo::before,
.spotify-logo::after {
  position: absolute;
  left: 5px;
  width: 14px;
  height: 7px;
  border-top: 2px solid #262626;
  border-radius: 50%;
  content: "";
}

.spotify-logo::before {
  top: 7px;
}

.spotify-logo::after {
  top: 11px;
  width: 12px;
}

.spotify-dots {
  position: absolute;
  right: 63px;
  bottom: 29px;
  color: #bdbdbd;
  font: 700 16px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 3px;
}

.spotify-play {
  position: absolute;
  right: 16px;
  bottom: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
}

.spotify-play::before {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #262626;
  content: "";
  transform: translate(-40%, -50%);
}

.music-section p {
  margin: 29px auto 0;
  width: min(478px, calc(100vw - 46px));
  font: 400 16px/1.8 var(--font-body);
  text-align: center;
}

.story-footer {
  height: 215.875px;
}

/* RSVP */
.rsvp-blank-intro {
  min-height: 430px;
  padding: 0;
}

.rsvp-form-section {
  position: relative;
  min-height: 888px;
  padding: 92px 4vw 40px;
  background: var(--paper);
  text-align: center;
}

.rsvp-shell {
  width: min(482px, calc(100vw - 48px));
  margin: 0 auto;
}

.rsvp-shell h1 {
  margin: 0;
  color: var(--blue);
  font: 400 82px/0.95 var(--font-display);
  letter-spacing: 0;
}

.rsvp-intro {
  width: min(430px, 100%);
  margin: 25px auto 48px;
  color: var(--ink);
  font: 400 18px/1.45 var(--font-body);
  text-align: center;
}

.rsvp-group-name {
  width: min(430px, 100%);
  margin: 20px auto 0;
  color: var(--blue);
  font: 700 16px/1.35 var(--font-body);
  text-align: center;
}

.rsvp-form {
  color: var(--blue);
  text-align: left;
}

.rsvp-field,
.rsvp-form fieldset {
  display: block;
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}

.rsvp-field span,
.rsvp-field small,
.rsvp-form legend {
  display: block;
}

.rsvp-field span,
.rsvp-form legend {
  margin: 0 0 12px;
  color: var(--blue);
  font: 400 16px/1.25 var(--font-body);
}

.rsvp-field small {
  margin: -4px 0 10px;
  color: var(--ink);
  font: 400 15px/1.35 var(--font-body);
}

.rsvp-field > input,
.rsvp-other > input[type="text"] {
  display: block;
  width: 100%;
  padding: 0 5px 8px;
  border: 0;
  border-bottom: 1px solid var(--blue);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 16px/1.35 var(--font-body);
  outline: none;
}

.rsvp-field > input {
  height: 31px;
}

.rsvp-field > input::placeholder,
.rsvp-other > input[type="text"]::placeholder {
  color: rgba(32, 31, 30, 0.42);
  opacity: 1;
}

.rsvp-field > input:focus,
.rsvp-other > input[type="text"]:focus {
  border-bottom-width: 2px;
}

.rsvp-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 10px;
  color: var(--ink);
  font: 400 16px/1.35 var(--font-body);
}

.rsvp-radio input[type="radio"] {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--blue);
  border-radius: 50%;
  appearance: none;
  background: transparent;
}

.rsvp-radio input[type="radio"]:checked::after {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--blue);
  content: "";
}

.rsvp-radio span {
  margin: 0;
  color: var(--ink);
  font: inherit;
}

.rsvp-guest-list {
  margin-bottom: 35px;
}

.rsvp-guest {
  margin: 0 0 34px;
  padding: 0;
  border-top: 0;
}

.rsvp-guest + .rsvp-guest {
  padding-top: 30px;
  border-top: 1px solid rgba(54, 88, 167, 0.22);
}

.rsvp-form .rsvp-guest-name {
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
  color: var(--ink);
  font: 700 21px/1.25 var(--font-body);
}

.rsvp-guest-question {
  margin: 0 0 12px;
  color: var(--blue);
  font: 400 16px/1.25 var(--font-body);
}

.rsvp-dietary {
  margin-top: 17px;
  margin-bottom: 0;
}

.rsvp-stepper {
  display: grid;
  grid-template-columns: 44px 72px 44px;
  align-items: center;
  width: 160px;
  height: 37px;
  border-bottom: 1px solid var(--blue);
  color: var(--blue);
}

.rsvp-stepper button {
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font: 400 22px/1 var(--font-body);
}

.guest-count {
  color: var(--ink);
  font: 400 16px/1 var(--font-body);
  text-align: center;
}

.meal-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0 19px;
}

.rsvp-other {
  width: 100%;
}

.rsvp-other > input[type="text"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 120px;
  padding-bottom: 4px;
}

.rsvp-submit {
  display: block;
  width: 243px;
  height: 52px;
  margin: 43px auto 0;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font: 700 14px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rsvp-submit:hover,
.rsvp-submit:focus-visible {
  background: var(--blue);
  color: var(--paper);
}

.rsvp-submit:disabled {
  cursor: wait;
  opacity: 0.55;
}

.rsvp-status {
  min-height: 24px;
  margin: 16px 0 0;
  color: var(--blue);
  font: 400 14px/1.4 var(--font-body);
  text-align: center;
}

.rsvp-status-panel {
  margin-top: -22px;
  margin-bottom: 46px;
}

.rsvp-confirmation {
  color: var(--ink);
  text-align: left;
}

.rsvp-confirmation h2 {
  margin: 0 0 31px;
  color: var(--blue);
  font: 400 30px/1.22 var(--font-display);
  text-align: center;
}

.rsvp-confirmation h3 {
  margin: 31px 0 13px;
  color: var(--blue);
  font: 700 16px/1.35 var(--font-body);
}

.rsvp-confirmation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rsvp-confirmation li {
  margin: 0 0 10px;
  font: 400 16px/1.45 var(--font-body);
}

.rsvp-confirmation p {
  margin: 32px 0 0;
  font: 400 16px/1.55 var(--font-body);
  text-align: center;
}

/* Details */
.details-main {
  overflow: hidden;
  padding-top: 246px;
  background: var(--paper);
}

.details-welcome {
  width: min(646px, calc(100vw - 46px));
  margin: 0 auto;
  text-align: center;
}

.details-florals {
  width: 132px;
  margin: 0 auto 28px;
}

.details-kicker {
  margin: 0 0 10px;
  color: var(--blue);
  font: 400 18px/1.4 var(--font-body);
}

.details-welcome h1,
.details-schedule h2,
.details-location h2,
.details-attire h2,
.details-faq h2 {
  margin: 0;
  color: var(--ink);
  font: 400 40.31px/1.277 var(--font-display);
  letter-spacing: 0;
}

.details-celebration h1 {
  color: var(--blue);
  font-size: clamp(54px, 7vw, 96px);
  line-height: 1;
}

.details-copy {
  width: min(560px, 100%);
  margin: 24px auto 0;
  font: 400 16px/1.8 var(--font-body);
}

.details-copy p {
  margin: 0 0 28px;
}

.details-copy p:last-child {
  margin-bottom: 0;
}

.details-meta {
  margin-bottom: 40px;
  color: var(--ink);
  font-weight: 700;
}

.details-schedule {
  display: grid;
  grid-template-columns: 320px minmax(360px, 520px);
  justify-content: center;
  gap: 96px;
  width: min(936px, calc(100vw - 74px));
  margin: 132px auto 0;
}

.details-schedule h2,
.details-location h2,
.details-attire h2,
.details-faq h2 {
  color: var(--blue);
}

.schedule-list {
  border-top: 1px solid rgba(54, 88, 167, 0.36);
}

.schedule-item {
  display: grid;
  grid-template-columns: 214px 1fr;
  gap: 30px;
  padding: 27px 0 28px;
  border-bottom: 1px solid rgba(54, 88, 167, 0.36);
}

.schedule-item time {
  color: var(--blue);
  font: 400 22px/1.277 var(--font-display);
  white-space: nowrap;
}

.schedule-item h3 {
  margin: 0 0 5px;
  color: var(--ink);
  font: 700 16px/1.5 var(--font-body);
}

.schedule-item p {
  margin: 0;
  font: 400 16px/1.65 var(--font-body);
}

.details-location {
  display: grid;
  grid-template-columns: 320px minmax(360px, 520px);
  justify-content: center;
  gap: 96px;
  width: min(936px, calc(100vw - 74px));
  margin: 136px auto 0;
}

.details-location-copy h2 {
  margin-bottom: 24px;
}

.details-location-copy h3 {
  margin: 30px 0 7px;
  color: var(--blue);
  font: 700 16px/1.45 var(--font-body);
}

.details-location-copy p {
  margin: 0 0 22px;
  font: 400 16px/1.8 var(--font-body);
}

.location-name {
  font-weight: 700;
}

.map-preview {
  width: 100%;
  height: 222px;
  margin: 4px 0 24px;
  border: 1px solid rgba(54, 88, 167, 0.34);
  overflow: hidden;
  background: rgba(54, 88, 167, 0.06);
}

.map-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(0.92) brightness(1.06);
}

.inline-map-link {
  border-bottom: 1px solid currentColor;
  color: var(--blue);
  transition: color 180ms ease;
}

.inline-map-link:hover,
.inline-map-link:focus-visible {
  color: var(--blue-hover);
}

.details-strip {
  height: 286px;
  margin-top: 120px;
  overflow: hidden;
}

.details-strip-track {
  display: flex;
  gap: 0;
  width: max-content;
  transform: translateX(calc(50vw - 1130px));
}

.details-strip img {
  flex: 0 0 226px;
  width: 226px;
  height: 286px;
  background: #050505;
  object-fit: contain;
}

.details-attire {
  width: min(620px, calc(100vw - 46px));
  margin: 78px auto 0;
  text-align: center;
}

.attire-intro {
  width: min(360px, 100%);
  margin: 16px auto 18px;
  color: var(--blue);
  font: 400 30.6px/1.277 var(--font-display);
}

.attire-copy {
  width: min(520px, 100%);
  margin: 0 auto;
  font: 400 16px/1.8 var(--font-body);
}

.details-faq {
  display: grid;
  grid-template-columns: 320px minmax(360px, 520px);
  justify-content: center;
  gap: 96px;
  width: min(936px, calc(100vw - 74px));
  margin: 146px auto 0;
  padding-bottom: 103px;
}

.details-faq h2 {
  font-size: 30.6px;
  line-height: 1.277;
  text-align: left;
  text-transform: uppercase;
}

.faq-list {
  padding-top: 1px;
}

.faq-item {
  border-bottom: 1px solid rgba(32, 31, 30, 0.24);
}

.faq-item:first-child {
  border-top: 1px solid rgba(32, 31, 30, 0.24);
}

.faq-question {
  display: block;
  width: 100%;
  padding: 24px 0 23px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 400 18.21px/1.389 var(--font-display);
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 240ms ease, opacity 180ms ease;
}

.faq-answer p {
  margin: 0 0 23px;
  font: 400 16px/1.8 var(--font-body);
}

.faq-answer p + p {
  margin-top: -8px;
}

.faq-item.is-open .faq-answer {
  max-height: 430px;
  opacity: 1;
}

@media (max-width: 899px) {
  :root {
    --site-nav-top: 52px;
    --site-nav-right: 30px;
  }

  .home-shell {
    --home-content-shift: 64px;
  }

  .home-hero {
    height: 100%;
    min-height: 0;
  }

  .home-film {
    top: calc(158.25px + var(--home-content-shift));
    width: 168.4px;
    height: 202.2px;
  }

  .home-title {
    top: calc(259.35px + var(--home-content-shift));
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(46px, 10.25vw, 82px);
  }

  .home-date {
    top: calc(420px + var(--home-content-shift));
    font-size: 17.84px;
  }

  .home-footer .footer-mark,
  .story-footer .footer-mark,
  .home-footer .footer-initials,
  .story-footer .footer-initials {
    width: 138.86px;
  }

  .home-footer {
    height: 118px;
  }

  .home-footer .footer-initials {
    top: 8px;
    min-width: 118px;
    font-size: 74px;
  }

  .home-footer p {
    top: 78px;
  }

  .story-header {
    height: 189.65px;
  }

  .story-side-nav,
  .story-logo-text {
    display: none;
  }

  .story-logo-image {
    position: absolute;
    top: 46px;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 173.56px;
    color: #111;
    text-align: center;
    transform: translateX(-50%);
    transition: color 180ms ease;
  }

  .initial-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font: 400 84px/0.92 var(--font-script);
    text-align: center;
    white-space: nowrap;
  }

  .menu-toggle {
    position: absolute;
    top: 76px;
    right: 61px;
    display: block;
    width: 47px;
    height: 37px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .menu-toggle span {
    position: absolute;
    left: 7px;
    width: 33px;
    height: 1px;
    background: #111;
    transition: transform 180ms ease, background 180ms ease;
  }

  .menu-toggle span:first-child { top: 13px; }
  .menu-toggle span:last-child { top: 22px; }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: block;
    background: var(--blue);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .mobile-menu nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 297px 0 0 9vw;
  }

  .mobile-menu a {
    margin-bottom: 53.75px;
    color: #fff;
    font: 400 46.08px/1 var(--font-body);
    text-transform: uppercase;
  }

  body.menu-open {
    overflow: hidden;
  }

  body.menu-open .mobile-menu {
    opacity: 1;
    pointer-events: auto;
  }

  body.menu-open .story-header {
    position: fixed;
  }

  body.menu-open .story-logo-image {
    color: #fff;
  }

  body.menu-open .menu-toggle {
    top: 49px;
    right: 62px;
    width: 49px;
    height: 49px;
    border: 2px solid #fff;
  }

  body.menu-open .menu-toggle span {
    left: 11px;
    top: 23px;
    width: 24px;
    background: #fff;
  }

  body.menu-open .menu-toggle span:first-child {
    transform: rotate(45deg);
  }

  body.menu-open .menu-toggle span:last-child {
    transform: rotate(-45deg);
  }

  .story-intro {
    min-height: 1210px;
    padding-top: 224px;
  }

  .story-section {
    padding-inline: 4vw;
  }

  .story-two-col {
    grid-template-columns: minmax(240px, 281px) minmax(290px, 311px);
    max-width: 691px;
    gap: 60px;
  }

  .story-section h2 {
    font-size: 36.28px;
  }

  .date-collage {
    height: 1770px;
  }

  .date-collage h3 {
    top: 50svh;
    font-size: 60px;
  }

  .collage-photo {
    width: 143.6px;
    height: 172.3px;
  }

  .photo-a { left: 15.4%; top: 505px; }
  .photo-b { left: 26.9%; top: 845px; }
  .photo-c { left: 65%; top: 557px; }
  .photo-d { left: 4%; top: 1160px; }
  .photo-e { left: 53.5%; top: 1526px; }
  .photo-f { left: calc(100% - 166px); top: 890px; }
  .photo-g { left: 62%; top: 1265px; }

  .engagement-section {
    min-height: 1080px;
    padding-top: 0;
  }

  .music-section {
    min-height: 314px;
    padding-top: 0;
  }

  .story-footer {
    height: 215px;
  }

  .rsvp-blank-intro {
    min-height: 390px;
  }

  .rsvp-form-section {
    min-height: 850px;
    padding-top: 82px;
  }

  .details-main {
    padding-top: 216px;
  }

  .details-schedule {
    grid-template-columns: minmax(230px, 270px) minmax(320px, 390px);
    gap: 54px;
    width: min(714px, calc(100vw - 46px));
    margin-top: 112px;
  }

  .schedule-item {
    grid-template-columns: 186px 1fr;
    gap: 26px;
  }

  .details-location {
    grid-template-columns: minmax(230px, 270px) minmax(320px, 390px);
    gap: 54px;
    width: min(714px, calc(100vw - 46px));
    margin-top: 118px;
  }

  .details-strip {
    height: 250px;
    margin-top: 104px;
  }

  .details-strip-track {
    transform: translateX(calc(50vw - 990px));
  }

  .details-strip img {
    flex-basis: 198px;
    width: 198px;
    height: 250px;
  }

  .details-faq {
    grid-template-columns: minmax(230px, 270px) minmax(320px, 390px);
    gap: 54px;
    width: min(714px, calc(100vw - 46px));
  }
}

@media (max-width: 600px) {
  :root {
    --site-nav-top: 35px;
    --site-nav-right: 23.4px;
  }

  .home-shell {
    --home-content-shift: 0px;
    min-height: 640px;
  }

  .home-hero {
    height: 100%;
    min-height: 0;
  }

  .home-film {
    top: calc(209.6px + var(--home-content-shift));
    width: 166.1px;
    height: 199.8px;
  }

  .home-title {
    top: calc(309.5px + var(--home-content-shift));
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(35px, 9.8vw, 39px);
  }

  .home-date {
    top: calc(438px + var(--home-content-shift));
    width: calc(100vw - 46.8px);
    font-size: 18.03px;
  }

  .site-footer {
    height: 206px;
  }

  .home-footer {
    height: 132px;
  }

  .story-footer {
    height: 206px;
  }

  .home-footer .footer-mark,
  .story-footer .footer-mark,
  .home-footer .footer-initials,
  .story-footer .footer-initials {
    top: 28.5px;
    width: 175.4px;
  }

  .home-footer .footer-initials {
    top: 4px;
    min-width: 120px;
    font-size: 72px;
  }

  .story-footer .footer-initials {
    min-width: 150px;
    font-size: 82px;
  }

  .home-footer p,
  .story-footer p {
    top: 134px;
    width: calc(100vw - 46.8px);
  }

  .home-footer p {
    top: 76px;
  }

  .floating-player {
    bottom: 18px;
    left: 18px;
    width: 46px;
    min-height: 46px;
    padding: 7px;
  }

  .floating-player .player-meta,
  .floating-player .player-progress {
    display: none;
  }

  .story-page .floating-player,
  .details-page .floating-player {
    left: auto;
    right: 18px;
  }

  .player-toggle {
    width: 30px;
    height: 30px;
  }

  .story-header {
    height: 144.3px;
  }

  .story-logo-image {
    top: 23.4px;
    width: 173.56px;
  }

  .menu-toggle {
    top: 53.65px;
    right: 23.4px;
  }

  .mobile-menu nav {
    padding-top: 296px;
    padding-left: 35px;
  }

  .mobile-menu a {
    margin-bottom: 27.3px;
    font-size: 33.15px;
  }

  body.menu-open .menu-toggle {
    top: 48px;
    right: 23.4px;
  }

  .story-section {
    padding-inline: 23.4px;
  }

  .story-intro {
    min-height: 1215px;
    padding-top: 172px;
  }

  .story-two-col {
    display: block;
    max-width: none;
  }

  .story-section h2 {
    font-size: 38.28px;
    line-height: 1.277;
  }

  .story-copy {
    max-width: none;
    margin-top: 44px;
  }

  .story-copy p {
    margin-bottom: 16px;
  }

  .date-collage {
    height: 2058px;
  }

  .date-collage h3 {
    top: 54svh;
    font-size: 79.3px;
  }

  .collage-photo {
    width: 136.6px;
    height: 164px;
  }

  .photo-a { left: 23.4px; top: 410px; }
  .photo-b { left: 23.4px; top: 970px; }
  .photo-c { left: 23.4px; top: 1530px; }
  .photo-d { left: calc(100% - 160px); top: 725px; }
  .photo-e { left: calc(100% - 160px); top: 1270px; }
  .photo-f { left: calc(100% - 160px); top: 1750px; }
  .photo-g { left: 23.4px; top: 1815px; }

  .engagement-section {
    min-height: 1074px;
    padding-top: 0;
  }

  .engagement-section .story-copy {
    margin-top: 46px;
  }

  .music-section {
    min-height: 295px;
    padding-top: 0;
  }

  .spotify-card {
    width: calc(100vw - 46.8px);
  }

  .music-section p {
    margin-top: 18px;
  }

  .rsvp-blank-intro {
    min-height: 360px;
  }

  .rsvp-form-section {
    min-height: 820px;
    padding: 66px 23.4px 38px;
  }

  .rsvp-shell {
    width: 100%;
  }

  .rsvp-shell h1 {
    font-size: 68px;
  }

  .rsvp-intro {
    margin-top: 20px;
    margin-bottom: 43px;
    font-size: 17px;
  }

  .rsvp-field,
  .rsvp-form fieldset {
    margin-bottom: 28px;
  }

  .meal-options {
    display: block;
  }

  .rsvp-submit {
    width: min(243px, 100%);
  }

  .details-main {
    padding-top: 172px;
  }

  .details-welcome {
    width: calc(100vw - 46.8px);
  }

  .details-florals {
    margin-bottom: 28px;
  }

  .details-welcome h1,
  .details-schedule h2,
  .details-location h2,
  .details-attire h2 {
    font-size: 38.28px;
  }

  .details-celebration h1 {
    font-size: clamp(50px, 14.4vw, 60px);
  }

  .details-copy {
    width: min(315px, 100%);
    margin-top: 18px;
  }

  .details-schedule {
    display: block;
    width: calc(100vw - 46.8px);
    max-width: 380px;
    margin: 78px auto 0;
  }

  .details-schedule h2 {
    margin-bottom: 30px;
    text-align: center;
  }

  .schedule-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0 23px;
    text-align: center;
  }

  .schedule-item time {
    font-size: 24px;
  }

  .details-location {
    display: block;
    width: calc(100vw - 46.8px);
    max-width: 380px;
    margin: 78px auto 0;
    text-align: center;
  }

  .details-location-copy + .details-location-copy {
    margin-top: 56px;
  }

  .details-strip {
    height: 220px;
    margin-top: 76px;
  }

  .details-strip-track {
    gap: 0;
    transform: translateX(calc(50vw - 870px));
  }

  .details-strip img {
    flex-basis: 174px;
    width: 174px;
    height: 220px;
  }

  .details-attire {
    width: calc(100vw - 46.8px);
    margin-top: 62px;
  }

  .attire-intro {
    margin-bottom: 16px;
  }

  .attire-copy {
    width: min(320px, 100%);
  }

  .details-faq {
    display: block;
    width: calc(100vw - 46.8px);
    margin-top: 96px;
    padding-bottom: 68px;
  }

  .details-faq h2 {
    width: min(311px, 100%);
    margin-bottom: 45px;
    font-size: 30.6px;
  }

  .faq-question {
    padding: 22px 0 21px;
    font-size: 17.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
  }
}