/* Mobile-first interaction layer. Palette + type foundations live in styles.css. */
:root {
  --lilac: #e8dafa;
  --coral: #f17b98;
  --lemon: #e4ed9a;
  --white: #fff;
}

body {
  font-size: 16px;
}

.dock-love-story {
  display: none;
}

.hero-description,
.section-heading>p:last-child,
.event-description,
.play-copy>p:last-child,
.rsvp-note>p:not(.eyebrow),
.venue-details p,
.letter-paper>p:not(.eyebrow),
.reply-ready>p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

.button,
.text-button {
  font-size: 15px;
  min-height: 54px;
}

.button {
  border-radius: 16px;
  padding: 16px 23px;
}

.button-rust {
  background: var(--rust);
  box-shadow: 0 5px 0 #53319d;
}

.button-green {
  background: var(--ink);
}

.button:active {
  transform: translateY(3px);
  box-shadow: none;
}

.eyebrow,
.hero-copy>.eyebrow {
  font-size: 12px;
  letter-spacing: .1em;
}

.hero-date {
  font-size: 14px;
}

.hero-footnote {
  font-size: 13px;
}

.hero h1 {
  color: #34234f;
}

.hero-heading {
  width: fit-content;
}

.marrying-label {
  position: relative;
  inset: auto;
  display: inline-flex;
  background: var(--lemon);
  border: 0;
  border-radius: 6px;
  padding: 8px 13px;
  font-size: 11px;
  color: var(--ink);
  transform: rotate(-4deg);
  margin-bottom: 26px;
  letter-spacing: .07em;
}

.hero-art {
  padding: 15px;
  transform: translate3d(0, var(--hero-art-y, 0px), 0) rotate(var(--hero-art-rotate, 0deg));
}

.hero-art picture {
  border: 7px solid white;
  border-radius: 47% 47% 20px 20px;
  overflow: hidden;
  background: white;
  box-shadow: 0 16px 52px #64409620;
}

.wedding-illustration {
  transform: scale(1.015);
}

.hero-art::before {
  content: '';
  position: absolute;
  inset: 10% -2% -3%;
  border: 1px solid #b99dda;
  border-radius: 46% 46% 20px 20px;
  rotate: -6deg;
  pointer-events: none;
  z-index: -1;
}

.date-stamp {
  border: 0;
  background: var(--lemon);
  color: var(--ink);
  outline: none;
  width: 118px;
  height: 118px;
  box-shadow: 0 6px 0 #34234f12;
}

.date-stamp::before {
  border-color: #34234f33;
}

.date-stamp span {
  font-size: 10px;
  letter-spacing: .03em;
}

.date-stamp strong {
  font-size: 43px;
}

.art-caption {
  border-radius: 7px;
  padding: 3px 10px;
  background: #ffe4eb;
  z-index: 3;
  font-size: 23px;
  bottom: -9px;
}

.art-caption svg {
  display: none;
}

.orbit-one {
  color: var(--coral);
  font-size: 45px;
}

.orbit-two {
  color: var(--rust);
  font-size: 42px;
}

.scroll-cue {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0;
}

.scroll-cue>span:last-child {
  width: 35px;
  height: 35px;
  border: 1px solid #bba4d7;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: nudge-down 1.8s var(--ease) infinite;
}

.hero-edition {
  font-size: 11px;
}

.ticker {
  transform: rotate(-1deg);
  background: #7044c7;
  padding-block: 21px;
}

.ticker span {
  font-size: 13px;
}

.ticker i {
  color: var(--lemon);
}

.brand-caption {
  font-size: 10px;
}

.desktop-nav,
.header-rsvp {
  font-size: 14px;
}

.sound-label {
  font-size: 12px;
}

.sound-button {
  border: 1px solid #d8c6ed;
  border-radius: 50px;
  padding-inline: 12px;
}

.header-rsvp {
  border: 0;
  padding: 9px 15px;
  border-radius: 50px;
  background: var(--lemon);
  gap: 14px;
}

/* The scene follows the same scroll clock as the rest of the invitation. */
.adventure {
  background: #eadcfb;
  margin-top: 15px;
}

.adventure-sticky {
  overflow: hidden;
  background: #eadcfb;
  transition: background 600ms;
}

.adventure[data-stage="1"] .adventure-sticky {
  background: #f7deed;
}

.adventure[data-stage="2"] .adventure-sticky {
  background: #e8edcf;
}

.adventure-inner {
  max-width: 1060px;
  width: calc(100% - 48px);
  margin: auto;
  padding: 34px 0 30px;
}

.adventure-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.adventure-topline>.eyebrow {
  max-width: 260px;
  font-size: 11px;
}

.motion-toggle {
  background: #ffffff80;
  border: 1px solid #795a9e40;
  border-radius: 30px;
  padding: 10px 13px;
  font-size: 12px;
  min-height: 44px;
  flex-shrink: 0;
}

.motion-toggle>span {
  margin-left: 4px;
}

.chapter-copy {
  text-align: center;
  margin: 31px auto 0;
}

.chapter-number {
  font-size: 12px;
  letter-spacing: .15em;
  font-weight: 600;
  color: #75519c;
}

.chapter-copy>p {
  font-family: var(--serif);
  font-size: clamp(44px, 5.6vw, 78px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-top: 12px;
}

.chapter-copy em {
  color: var(--rust);
}

.chapter-copy>span:last-child {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  margin: 14px auto 0;
  max-width: 470px;
  color: #675477;
}

.adventure-world {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

.road-scene {
  display: block;
  width: 100%;
  height: auto;
}

.world-sticker {
  position: absolute;
  left: 4%;
  top: 14%;
  border-radius: 50%;
  width: 105px;
  height: 105px;
  display: grid;
  align-content: center;
  text-align: center;
  background: var(--ink);
  color: white;
  font: 25px/1 var(--serif);
  rotate: -12deg;
  z-index: 2;
}

.world-sticker em {
  color: var(--lemon);
}

.world-spark {
  position: absolute;
  right: 5%;
  top: 30%;
  color: var(--rust);
  font-size: 54px;
  animation: slow-turn 20s linear infinite;
}

.scene-heart {
  transform-box: fill-box;
  transform-origin: center;
}

.scene-finish {
  opacity: var(--finish-opacity, 0);
}

.chapter-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.chapter-controls button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid #9e7abb66;
  border-radius: 12px;
  background: #ffffff70;
  min-height: 49px;
  padding: 10px 22px;
  font-size: 14px;
  overflow: hidden;
}

.chapter-controls button span {
  font-size: 11px;
  opacity: .65;
}

.chapter-controls button[aria-current] {
  color: white;
  background: var(--ink);
  border-color: var(--ink);
}

.chapter-controls button::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--chapter-progress, 0%);
  height: 3px;
  background: var(--coral);
}

.adventure-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  font-size: 13px;
}

.adventure-scroll-hint {
  color: #6d5b7a;
}

.adventure-scroll-hint i {
  display: inline-block;
  font-style: normal;
  font-size: 18px;
  margin-right: 8px;
  animation: nudge-down 1.8s var(--ease) infinite;
}

.adventure-bottom a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #75519c;
}

.motion-ready .adventure {
  height: 235svh;
  position: relative;
}

.motion-ready .adventure-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
}

.motion-ready .adventure-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.motion-ready .adventure-world {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  align-items: center;
}

.motion-ready .road-scene {
  max-height: 100%;
}

.motion-ready .chapter-controls,
.motion-ready .adventure-topline,
.motion-ready .adventure-bottom,
.motion-ready .chapter-copy {
  flex-shrink: 0;
}

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation-play-state: paused !important;
  transition-duration: .01ms !important;
}

.motion-paused {
  scroll-behavior: auto;
}

/* More obvious invitations to interact. */
.interaction-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 28px auto 0;
  border: 1px solid #c7ace2;
  border-radius: 50px;
  padding: 10px 17px;
  font-size: 14px;
  color: var(--rust);
}

.interaction-prompt>span {
  font-size: 25px;
  line-height: 1;
}

.person-card {
  border-radius: 20px;
  padding: 24px;
  background: white;
  border-color: #dac9ed;
  box-shadow: 0 9px 0 #e3d6f5;
}

.card-tape {
  background: #cbaff57a;
}

.portrait-frame {
  position: relative;
  aspect-ratio: 260 / 250;
  border-radius: 14px;
  background: linear-gradient(145deg, #f7e8f1, #eadcfa);
}

.portrait-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
  transform: scale(1.025);
  transform-origin: 50% 20%;
}

.groom-card .portrait-photo {
  object-position: center 12%;
}

.person-number {
  font-size: 12px;
  letter-spacing: .08em;
}

.person-subtitle {
  font-size: 14px;
  line-height: 1.6;
}

.person-name {
  font-size: 48px;
}

.card-hint {
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 550;
  border-radius: 9px;
  padding: 12px 8px;
  background: #ede4fa;
  margin-top: 17px;
  gap: 8px;
}

.person-secret {
  border-radius: 20px;
}

.person-secret .card-hint {
  background: #ffffff14;
  color: white;
}

.person-secret>span:not(.card-hint) {
  font-size: 37px;
}

.person-secret small {
  color: #eee3ff;
  font-size: 14px;
}

.story-end {
  font-size: 14px;
  line-height: 1.7;
}

.carousel-controls {
  display: none;
}

.verse-section {
  background: #34234f;
  color: white;
  padding-block: 82px;
}

.verse-inner>p {
  font-size: clamp(42px, 5vw, 65px);
}

.verse-inner>p em,
.verse-cross {
  color: #e8c4ff;
}

.verse-word {
  opacity: var(--word-opacity, 1);
}

.verse-inner>span {
  font-size: 12px;
}

.verse-flower {
  color: #af8ad3;
}

/* A living strip of old-photo stamps. Add images only in wedding.config.js. */
.memory-stamps {
  position: relative;
  z-index: 2;
  width: 100vw;
  margin: 62px calc(50% - 50vw) 0;
  transform: rotate(-1.35deg);
  transform-origin: 50% 50%;
}

.memory-stamps-heading {
  width: min(100% - 42px, 1060px);
  margin: 0 auto 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #dccaf1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.memory-stamps-heading::before,
.memory-stamps-heading::after {
  content: '';
  width: min(14vw, 120px);
  height: 1px;
  background: #b497d659;
}

.memory-stamps-heading i {
  color: #f08aaa;
  font: italic 20px/1 var(--serif);
}

.memory-stamps-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 31px 0 40px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.memory-stamps-viewport::-webkit-scrollbar {
  display: none;
}

.memory-stamps-track {
  display: flex;
  width: max-content;
  padding-left: 18px;
}

.memory-stamps-track.is-ready {
  animation: memory-stamps-roll var(--stamp-duration, 55s) linear infinite;
  will-change: transform;
}

.memory-stamps-track.is-manual {
  animation: none !important;
  transform: none !important;
  will-change: auto;
}

.memory-stamps-track.is-held,
.memory-stamps-viewport:hover .memory-stamps-track,
.memory-stamps-viewport:focus-visible .memory-stamps-track,
.motion-paused .memory-stamps-track {
  animation-play-state: paused;
}

.memory-stamps-set {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
}

.memory-stamp {
  --stamp-width: 210px;
  position: relative;
  flex: 0 0 var(--stamp-width);
  width: var(--stamp-width);
  margin: 0;
  padding: 9px 9px 8px;
  border: 7px dotted #fffaf3;
  background: #fffaf3;
  color: #4b335f;
  box-shadow: 0 10px 18px #12091f35, 0 2px 0 #ffffffb8 inset;
  contain: layout paint;
  transform: rotate(var(--stamp-tilt, -2deg));
  transform-origin: center;
  transition: transform .35s var(--ease);
}

.memory-stamp:nth-child(even) {
  margin-top: 20px;
}

.memory-stamp:nth-child(3n) {
  margin-top: -12px;
}

.memory-stamp img {
  display: block;
  width: 100%;
  height: clamp(218px, 25vw, 284px);
  border: 1px solid #d7c3e6;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.memory-stamp figcaption {
  min-height: 31px;
  padding: 8px 3px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: italic 16px/1.35 var(--serif);
  text-align: center;
}

.memory-stamp::after {
  content: 'A  ♡  J';
  position: absolute;
  right: 12px;
  bottom: 7px;
  color: #835cac;
  font: 700 7px/1 var(--sans);
  letter-spacing: .1em;
  opacity: .55;
}

.memory-stamp:hover,
.memory-stamp:focus-within {
  z-index: 2;
  transform: rotate(0) translateY(-5px);
}

.memory-stamps-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: -8px 0 0;
  color: #d8c7e8;
  font-size: 11px;
  letter-spacing: .08em;
}

.memory-stamps-hint span {
  color: #f08aaa;
  font-size: 17px;
}

@keyframes memory-stamps-roll {
  to {
    transform: translate3d(calc(-1 * var(--stamp-distance, 0px)), 0, 0);
  }
}

.date-block>span {
  font-size: 14px;
}

.countdown-intro {
  font-size: 12px;
  max-width: 170px;
}

.countdown-numbers div>span {
  font-size: 12px;
}

.countdown-numbers strong {
  font-size: 49px;
}

.countdown .text-button {
  font-size: 14px;
}

.event-content .eyebrow {
  font-size: 12px;
}

.event-art {
  border-radius: 26px;
  background: #ecddff;
  transform: rotate(var(--event-tilt, 0deg)) scale(var(--event-scale, 1));
}

.event-reception .event-art {
  background: #ffe1e9;
}

.venue-details strong {
  font-size: 16px;
}

.venue-pending {
  font-size: 12px;
  letter-spacing: .04em;
}

.journey-car {
  width: 105px;
  left: -22px;
}

.journey-car>svg {
  width: 105px;
  height: 62px;
}

.journey-car>span {
  font-size: 8px;
  letter-spacing: 0;
}

.play-section {
  background: #eee2ff;
}

.team-choice {
  border-radius: 17px;
  padding: 22px;
  border-color: #d3bcea;
}

.team-choice strong {
  font-size: 30px;
}

.team-choice small {
  font-size: 14px;
}

.team-result {
  font-size: 14px;
  line-height: 1.65;
}

.handwritten {
  font-size: 29px;
}

.rsvp-card {
  border-radius: 20px;
  overflow: hidden;
  background: white;
}

.rsvp-card label,
.attendance legend {
  font-size: 15px;
}

.rsvp-card input:not([type="radio"]),
.rsvp-card textarea {
  font-size: 16px;
  /* padding-top: 12px; */
}

.rsvp-card input::placeholder,
.rsvp-card textarea::placeholder {
  font-size: 15px;
}

.form-heading .eyebrow {
  font-size: 12px;
}

.radio-option>span {
  font-size: 13px;
  border-radius: 9px;
  padding-inline: 10px;
}

.guest-count-row label small,
.optional,
.reply-explainer {
  font-size: 13px;
}

.stepper {
  border-radius: 10px;
  overflow: hidden;
}

.stepper button {
  width: 44px;
  height: 48px;
}

.rsvp-card .stepper input {
  font-size: 17px;
}

.reply-ready blockquote {
  font-size: 15px;
}

.reply-ready .text-button {
  font-size: 14px;
}

.signed-note {
  font-size: 14px;
}

.rsvp::before,
.rsvp::after {
  content: '♥';
  position: absolute;
  color: var(--coral);
  font: 44px/1 var(--serif);
  opacity: var(--end-progress, 0);
  pointer-events: none;
  z-index: -1;
}

.rsvp::before {
  left: 3%;
  top: 13%;
  transform: translateY(var(--end-y, 26px)) rotate(-18deg);
}

.rsvp::after {
  right: 3%;
  bottom: 12%;
  transform: translateY(var(--end-y, 26px)) rotate(17deg) scale(.75);
}

.rsvp {
  position: relative;
  isolation: isolate;
}

.rsvp-note,
.rsvp-card {
  transform: translateY(var(--end-y, 0px)) rotate(var(--end-rotate, 0deg));
  transform-origin: center;
}

.bless-button>span {
  font-size: 15px;
}

.bless-button>small {
  font-size: 13px;
}

.footer-bottom>p,
.footer-bottom>a:last-child {
  font-size: 11px;
}

.site-footer .footer-top {
  transform: translateY(var(--footer-y, 42px)) scale(var(--footer-scale, .94));
  opacity: calc(.35 + var(--footer-progress, 0) * .65);
}

.site-footer .footer-tagline em {
  display: inline-block;
  transform: translateX(calc(var(--footer-y, 42px) * -.45));
}

.letter-paper .eyebrow {
  font-size: 12px;
}

.letter-paper>.letter-date,
.letter-paper>.letter-date+p {
  font-size: 15px;
}

.letter-paper>small {
  font-size: 12px;
}

.letter-paper .button {
  font-size: 14px;
}

.letter-dialog {
  border-radius: 22px;
  background: white;
}

.letter-paper {
  border-radius: 15px;
}

/* A tiny, untimed game. All five hearts can also be caught with the keyboard. */
.heart-game {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.game-copy .eyebrow {
  color: var(--rust);
  margin-bottom: 24px;
}

.game-copy>p:not(.eyebrow) {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 350px;
  margin-top: 24px;
}

.game-tag {
  display: inline-block;
  background: var(--lemon);
  color: var(--ink);
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 13px;
  rotate: -3deg;
  margin-top: 23px;
}

.game-card {
  border: 1px solid #d1bde8;
  border-radius: 24px;
  background: white;
  overflow: hidden;
  box-shadow: 0 10px 0 #e9dcf8;
}

.game-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 19px 23px;
  background: #f0e7fc;
  font-size: 12px;
  font-weight: 600;
}

.game-header>span:first-child {
  letter-spacing: .11em;
}

.game-field {
  height: 325px;
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(#d6c2ef 1px, transparent 1px);
  background-size: 21px 21px;
}

.game-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 2;
  gap: 14px;
}

.game-big-heart {
  font: 80px/1 var(--serif);
  color: #ef7694;
  animation: heartbeat 2s ease-in-out infinite;
}

.game-start>p {
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}

.game-start .button {
  margin-top: 3px;
  min-width: 180px;
}

.game-doodle {
  position: absolute;
  pointer-events: none;
  color: #c7abe5;
  font: 55px var(--serif);
  animation: float 5s ease-in-out infinite;
}

.doodle-one {
  left: 8%;
  top: 16%;
}

.doodle-two {
  right: 9%;
  top: 28%;
}

.doodle-three {
  bottom: 8%;
  right: 13%;
  font-size: 33px;
}

.catch-heart {
  position: absolute;
  left: var(--heart-x, 50%);
  top: var(--heart-y, 50%);
  translate: -50% -50%;
  border: 0;
  width: 90px;
  height: 94px;
  border-radius: 22px;
  background: #ffe2eb;
  color: #9f2258;
  box-shadow: 0 5px 0 #eeadca;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 3;
  touch-action: manipulation;
}

.catch-heart>span {
  font: 50px/.9 var(--serif);
  animation: heartbeat 1.6s ease-in-out infinite;
}

.catch-heart>small {
  font-size: 13px;
}

.catch-heart:active {
  scale: .92;
}

.game-dots {
  display: flex;
  justify-content: center;
  gap: 19px;
  margin-top: 20px;
  color: #d6c5e6;
  font-size: 23px;
}

.game-dots .is-caught {
  color: #d64b7a;
  animation: pop-in 450ms var(--ease) both;
}

.game-hint {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 20px 22px;
}

.game-prize {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fcfaff;
  text-align: center;
  padding: 20px;
  z-index: 4;
}

.prize-icon {
  font-size: 41px;
  line-height: 1;
  color: var(--rust);
  margin-bottom: 13px;
}

.game-prize .eyebrow {
  font-size: 10px;
  color: var(--rust);
}

.game-prize h3 {
  font: 43px/1.02 var(--serif);
  margin-top: 13px;
}

.game-prize h3:focus,
.reply-ready h3:focus {
  outline: none;
}

.game-prize>p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 14px;
}

.game-prize .text-button {
  font-size: 13px;
  margin-top: 2px;
  min-height: 40px;
}

.confetti-heart {
  font-size: 31px;
}

.js-ready .reveal:not(.is-visible) {
  translate: var(--reveal-x, 0px) 44px;
  rotate: var(--reveal-tilt, 0deg);
}

.js-ready .person-card.reveal.is-visible {
  translate: var(--card-x, 0px) 0;
}

.event-ceremony,
.rsvp-note,
.game-copy {
  --reveal-x: -30px;
}

.event-reception,
.rsvp-card,
.game-card,
.team-picker {
  --reveal-x: 30px;
}

.game-card {
  --reveal-tilt: 3deg;
}

@keyframes nudge-down {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

@keyframes heartbeat {

  0%,
  55%,
  100% {
    scale: 1;
  }

  20% {
    scale: 1.13;
  }

  35% {
    scale: 1.03;
  }

  45% {
    scale: 1.09;
  }
}

@keyframes pop-in {
  from {
    scale: .3;
    rotate: -20deg;
  }

  to {
    scale: 1;
    rotate: 0deg;
  }
}

@media (max-width: 900px) {
  .heart-game {
    gap: 40px;
  }

  .adventure-inner {
    width: calc(100% - 48px);
  }

  .countdown {
    justify-content: center;
  }

  .hero-art {
    padding: 8px;
  }

  .hero-copy>.button {
    font-size: 14px;
  }

  .rsvp {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 45px;
  }

  .rsvp-note {
    text-align: center;
  }

  .rsvp-note>p:not(.eyebrow) {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  html {
    scroll-padding-top: 18px;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .site-footer {
    padding-bottom: 224px;
    background: linear-gradient(to bottom, var(--ink) 0, var(--ink) calc(100% - 120px), #60417c calc(100% - 52px), var(--lilac) 100%);
  }

  .section-shell {
    width: calc(100% - 40px);
  }

  .site-header {
    gap: 8px;
    min-height: 78px;
  }

  .brand-caption {
    display: none;
  }

  .brand-mark {
    font-size: 42px;
  }

  .header-actions {
    gap: 10px;
  }

  .sound-button {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 10px;
  }

  .header-rsvp {
    font-size: 13px;
    gap: 12px;
  }

  .hero {
    padding-top: 31px;
    padding-bottom: 89px;
  }

  .hero-copy>.eyebrow {
    font-size: 11px;
    letter-spacing: .05em;
    margin-bottom: 20px;
  }

  .hero-copy>.eyebrow .icon {
    width: 15px;
  }

  .marrying-label {
    margin-bottom: 19px;
    font-size: 10px;
    padding: 7px 11px;
  }

  .hero h1 {
    font-size: clamp(75px, 22vw, 122px);
    line-height: .95;
  }

  .hero h1 .name-second {
    margin-left: 0;
  }

  .hero-description {
    font-size: 16px;
    max-width: 325px;
    margin: 21px auto 0;
    line-height: 1.6;
  }

  .name-spark {
    top: 45%;
    right: -14px;
    width: 19px;
  }

  .hero-date {
    font-size: 13px;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 18px;
  }

  .hero-copy>.button {
    font-size: 15px;
    min-height: 57px;
    margin-top: 24px;
    padding: 16px 22px;
    gap: 17px;
  }

  .hero-footnote {
    font-size: 12px;
    margin-top: 13px;
  }

  .hero-art {
    width: 89%;
    max-width: 390px;
    margin-top: 31px;
    padding: 7px;
  }

  .hero-art picture {
    border-width: 5px;
  }

  .date-stamp {
    width: 102px;
    height: 102px;
    top: 4%;
    right: -18px;
  }

  .date-stamp strong {
    font-size: 36px;
  }

  .date-stamp span {
    font-size: 9px;
  }

  .art-caption {
    right: 0;
    font-size: 22px;
    bottom: -5px;
  }

  .orbit-one {
    font-size: 37px;
    left: -20px;
    top: 14%;
  }

  .orbit-two {
    font-size: 37px;
    right: -16px;
    bottom: 18%;
  }

  .scroll-cue {
    bottom: 10px;
    font-size: 14px;
    gap: 14px;
  }

  .scroll-line {
    display: none;
  }

  .hero-edition {
    display: none;
  }

  .ticker {
    margin-top: 0;
    padding-block: 17px;
  }

  .ticker span {
    font-size: 12px;
    letter-spacing: .1em;
  }

  .section-space {
    padding-block: 68px;
  }

  h2 {
    font-size: clamp(41px, 11vw, 56px);
  }

  .section-heading>p:last-child {
    font-size: 16px;
    margin-top: 22px;
  }

  .section-heading>p:last-child br {
    display: none;
  }

  .eyebrow {
    font-size: 12px;
  }

  .adventure {
    margin-top: 9px;
  }

  .adventure-inner {
    width: calc(100% - 32px);
    padding: 21px 0 20px;
  }

  .adventure-topline {
    gap: 12px;
  }

  .adventure-topline>.eyebrow {
    max-width: 155px;
    font-size: 10px;
    line-height: 1.55;
  }

  .motion-toggle {
    font-size: 11px;
    padding: 9px 11px;
  }

  .chapter-copy {
    margin-top: 27px;
  }

  .chapter-number {
    font-size: 11px;
  }

  .chapter-copy>p {
    font-size: 51px;
    max-width: 320px;
    margin: 16px auto 0;
    line-height: 1.02;
  }

  .chapter-copy>p em {
    display: block;
  }

  .chapter-copy>span:last-child {
    font-size: 16px;
    max-width: 270px;
    margin-top: 15px;
    min-height: 52px;
  }

  .adventure-world {
    min-height: 220px;
    margin-inline: -16px;
    width: calc(100% + 32px);
  }

  .motion-ready .adventure-world {
    width: calc(100% + 32px);
    min-height: 190px;
  }

  .road-scene {
    min-height: 210px;
    object-fit: cover;
  }

  .world-sticker {
    width: 76px;
    height: 76px;
    left: 4%;
    top: 9%;
    font-size: 21px;
  }

  .world-spark {
    font-size: 35px;
    right: 5%;
    top: 24%;
  }

  .chapter-controls {
    gap: 6px;
  }

  .chapter-controls button {
    flex: 1;
    padding: 10px 5px;
    font-size: 12px;
    gap: 5px;
    min-height: 48px;
    border-radius: 10px;
  }

  .chapter-controls button>span {
    font-size: 10px;
  }

  .adventure-bottom {
    font-size: 12px;
    margin-top: 16px;
    gap: 16px;
  }

  .adventure-scroll-hint {
    max-width: 130px;
    line-height: 1.5;
  }

  .adventure-scroll-hint i {
    margin-right: 5px;
  }

  .adventure-bottom a {
    max-width: 130px;
    line-height: 1.5;
    font-size: 13px;
  }

  .motion-ready .adventure {
    height: 240svh;
  }

  .motion-ready .adventure-sticky {
    height: calc(100svh - 84px - env(safe-area-inset-bottom));
  }

  .couple-layout {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 25px;
    padding: 32px 25px 28px;
    display: flex;
    justify-content: flex-start;
    gap: 26px;
    width: calc(100% + 40px);
    margin: 6px -20px 0;
    scrollbar-width: none;
  }

  .couple-layout::-webkit-scrollbar {
    display: none;
  }

  .couple-amp {
    display: none;
  }

  .person-card {
    flex: 0 0 min(79vw, 310px);
    width: min(79vw, 310px);
    padding: 22px;
    scroll-snap-align: center;
    margin: 0;
    --card-rotate: -2deg;
  }

  .groom-card {
    --card-rotate: 2deg;
  }

  .portrait-frame {
    max-height: 234px;
  }

  .person-number {
    font-size: 12px;
    letter-spacing: .09em;
    margin-bottom: 13px;
  }

  .person-name {
    font-size: 46px;
  }

  .person-subtitle {
    font-size: 14px;
    min-height: 45px;
  }

  .card-hint {
    font-size: 13px;
    padding-block: 12px;
    margin-top: 14px;
  }

  .card-hint>span {
    font-size: 21px;
  }

  .card-tape {
    width: 80px;
    left: calc(50% - 40px);
    height: 26px;
  }

  .person-secret {
    padding: 25px;
  }

  .person-secret>span:not(.card-hint) {
    font-size: 37px;
  }

  .person-secret>.icon {
    width: 36px;
    height: 36px;
    margin-bottom: 28px;
  }

  .person-secret small {
    font-size: 14px;
    line-height: 1.7;
  }

  .carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin-top: 5px;
  }

  .carousel-controls button {
    width: 48px;
    height: 48px;
    border: 1px solid #c7aee5;
    border-radius: 50%;
    background: white;
    color: var(--rust);
    font-size: 22px;
  }

  .carousel-controls>span {
    font-size: 13px;
  }

  .carousel-controls>span span {
    color: var(--muted);
  }

  .interaction-prompt {
    font-size: 14px;
    margin-top: 24px;
  }

  .story-end {
    font-size: 14px;
    margin-top: 30px;
    max-width: 330px;
  }

  .verse-section {
    padding-block: 66px 78px;
  }

  .verse-inner>p {
    font-size: 41px;
    line-height: 1.16;
  }

  .verse-inner>span {
    font-size: 12px;
  }

  .memory-stamps {
    margin-top: 48px;
    transform: rotate(-1deg);
  }

  .memory-stamps-heading {
    width: calc(100% - 30px);
    gap: 8px;
    font-size: 9px;
  }

  .memory-stamps-heading::before,
  .memory-stamps-heading::after {
    width: 25px;
  }

  .memory-stamps-viewport {
    padding-block: 27px 35px;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .memory-stamps-set {
    gap: 13px;
    padding-right: 13px;
  }

  .memory-stamp {
    padding: 7px 7px 6px;
    border-width: 6px;
  }

  .memory-stamp:nth-child(even) {
    margin-top: 14px;
  }

  .memory-stamp img {
    height: 218px;
  }

  .memory-stamp figcaption {
    font-size: 15px;
  }

  .date-block>span {
    font-size: 14px;
  }

  .date-block strong {
    font-size: 55px;
  }

  .countdown-intro {
    font-size: 12px;
    max-width: none;
  }

  .countdown-numbers {
    gap: 14px;
  }

  .countdown-numbers strong {
    font-size: 44px;
  }

  .countdown-numbers div>span {
    font-size: 11px;
    letter-spacing: .07em;
  }

  .countdown .text-button {
    font-size: 14px;
  }

  .journey {
    padding-left: 58px;
  }

  .journey-car {
    width: 76px;
    left: -7px;
  }

  .journey-car>svg {
    width: 76px;
    height: 49px;
  }

  .journey-car>span {
    font-size: 6px;
  }

  .event-art {
    width: 118px;
    height: 125px;
    margin-bottom: 34px;
  }

  .event-art>svg {
    width: 87px;
    height: 87px;
  }

  .event-content .eyebrow {
    font-size: 11px;
  }

  .small-dot {
    margin-inline: 6px;
  }

  .event h3 {
    font-size: 37px;
    line-height: 1.1;
  }

  .event-description {
    font-size: 16px;
    margin-top: 16px;
    line-height: 1.7;
  }

  .venue-details strong {
    font-size: 15px;
  }

  .venue-header {
    padding: 14px;
  }

  .venue-details p {
    font-size: 15px;
    line-height: 1.65;
  }

  .venue-pending {
    font-size: 11px;
  }

  .day-footer {
    font-size: 28px;
  }

  .play-copy .eyebrow {
    font-size: 11px;
  }

  .play-copy>p:last-child {
    font-size: 16px;
  }

  .team-choice {
    padding: 20px 17px;
    gap: 13px;
  }

  .team-choice strong {
    font-size: 29px;
  }

  .team-choice small {
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.5;
  }

  .team-result {
    font-size: 14px;
    margin-top: 21px;
  }

  .heart-game {
    display: block;
  }

  .game-copy {
    text-align: center;
  }

  .game-copy>p:not(.eyebrow) {
    font-size: 16px;
    margin: 21px auto 0;
    max-width: 290px;
  }

  .game-copy .eyebrow {
    font-size: 11px;
    margin-bottom: 21px;
  }

  .game-card {
    margin-top: 38px;
  }

  .game-field {
    height: 320px;
  }

  .game-header {
    padding: 18px;
    font-size: 11px;
  }

  .rsvp {
    padding-top: 36px;
  }

  .rsvp-note>p:not(.eyebrow) {
    font-size: 16px;
  }

  .rsvp-card {
    padding: 30px 22px;
  }

  .rsvp-card label,
  .attendance legend {
    font-size: 15px;
  }

  .attendance {
    gap: 10px;
  }

  .radio-option {
    flex-basis: 100%;
  }

  .radio-option>span {
    justify-content: flex-start;
    font-size: 14px;
    padding: 14px;
    min-height: 51px;
  }

  .radio-option>span::before {
    content: '';
    width: 17px;
    height: 17px;
    border: 1px solid #9878b9;
    border-radius: 50%;
  }

  .radio-option input:checked+span::before {
    border: 5px solid var(--rust);
    background: white;
  }

  .rsvp-card input::placeholder,
  .rsvp-card textarea::placeholder {
    font-size: 15px;
  }

  .form-heading .eyebrow {
    font-size: 12px;
  }

  .guest-count-row {
    gap: 10px;
    padding-block: 5px 24px;
  }

  .guest-count-row label {
    max-width: 160px;
  }

  .guest-count-row label small {
    font-size: 12px;
  }

  .stepper button {
    width: 38px;
    min-height: 48px;
  }

  .rsvp-card .stepper input {
    width: 32px;
  }

  .reply-explainer {
    font-size: 13px;
  }

  .signed-note {
    font-size: 14px;
  }

  .signed-note>span {
    font-size: 43px;
  }

  .rsvp-spark {
    bottom: 6px;
    right: 3px;
  }

  .footer-bottom>p,
  .footer-bottom>a:last-child {
    font-size: 11px;
    letter-spacing: .04em;
  }

  .dock-love-story {
    --bride-x: 2vw;
    --groom-x: 98vw;
    --heart-scale: 0;
    --character-scale: .82;
    --bride-tilt: -7deg;
    --groom-tilt: 7deg;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(50px + env(safe-area-inset-bottom));
    height: 104px;
    z-index: 69;
    display: block;
    overflow: visible;
    border: 0;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    padding: 0;
    pointer-events: auto;
  }

  .dock-love-story:active .dock-love-copy {
    transform: translateX(-50%) scale(.97);
  }

  .dock-character {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 76px;
    height: 101px;
    translate: -50% 0;
    z-index: 3;
    overflow: hidden;
    opacity: var(--apart-opacity, 1);
    filter: drop-shadow(0 7px 8px #34234f26);
    transform: translate3d(var(--bride-x), 0, 0) rotate(var(--bride-tilt)) scale(var(--character-scale));
    transform-origin: 50% 100%;
    will-change: transform, opacity;
  }

  .dock-character img {
    position: absolute;
    left: 0;
    top: 0;
    width: 152px;
    height: auto;
    max-width: none;
  }

  .dock-groom {
    transform: translate3d(var(--groom-x), 0, 0) rotate(var(--groom-tilt)) scale(var(--character-scale));
  }

  .dock-groom img {
    left: auto;
    right: 0;
  }

  .dock-joined-couple {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 94px;
    height: 103px;
    z-index: 3;
    opacity: var(--join-opacity, 0);
    transform: translateX(-50%) scale(var(--join-scale, .9));
    transform-origin: 50% 100%;
    filter: drop-shadow(0 7px 9px #34234f2d);
    pointer-events: none;
    will-change: opacity, transform;
  }

  .dock-joined-couple img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  .dock-finale {
    position: absolute;
    left: 49%;
    top: -43px;
    width: 58px;
    height: 55px;
    translate: -50% 0;
    z-index: 4;
    transform: scale(var(--heart-scale)) rotate(calc((1 - var(--heart-scale)) * -9deg));
    opacity: var(--heart-scale);
    filter: drop-shadow(0 8px 13px #8d2a6c42);
    transform-origin: 50% 58%;
  }

  .dock-finale::before,
  .dock-finale::after {
    position: absolute;
    z-index: 3;
    color: #ffd85e;
    text-shadow: 0 0 8px #ffdd74;
    animation: heart-sparkle 1.8s ease-in-out infinite;
  }

  .dock-finale::before {
    content: '✦';
    left: -10px;
    top: 3px;
    font-size: 13px;
  }

  .dock-finale::after {
    content: '✧';
    right: -10px;
    top: 22px;
    color: #ff9fbd;
    font-size: 12px;
    animation-delay: -.85s;
  }

  .dock-final-heart {
    position: absolute;
    inset: 0;
  }

  .dock-final-heart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .dock-monogram {
    position: absolute;
    inset: 20px 0 auto;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    color: white;
    font: 700 13px/1 var(--sans);
    text-shadow: 0 1px 3px #69284f99;
  }

  .dock-monogram i {
    font: italic 800 16px/1 var(--serif);
  }

  .dock-monogram b {
    font-size: 10px;
    font-weight: 900;
    opacity: 1;
  }

  .dock-love-copy {
    position: absolute;
    left: 50%;
    top: 19px;
    width: min(48vw, 190px);
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    white-space: normal;
    transform: translateX(-50%);
    transition: transform .35s var(--ease), opacity .3s ease;
    isolation: isolate;
    text-align: center;
    font-size: 12px;
    line-height: 1.12;
    font-weight: 750;
    letter-spacing: -.01em;
    color: #553d68;
    text-shadow: 0 1px 0 white, 0 0 10px white, 0 0 16px white;
  }

  .dock-love-copy::before {
    content: '';
    position: absolute;
    inset: -9px -20px;
    z-index: -1;
    background: #fff1;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    mask-image: radial-gradient(ellipse, #000 38%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse, #000 38%, transparent 76%);
    pointer-events: none;
  }

  .dock-love-copy span {
    display: inline-block;
    animation: dock-letter .42s var(--ease) backwards;
    animation-delay: calc(var(--letter-index) * 14ms);
  }

  .dock-love-story.is-united .dock-character {
    filter: saturate(1.08) drop-shadow(0 8px 10px #34234f2e);
  }

  .dock-love-story.is-united .dock-finale {
    animation: dock-heartbeat 1.6s ease-in-out infinite;
  }

  .dock-love-story.is-united .dock-love-copy {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }

  .mobile-dock {
    left: 8px;
    right: 8px;
    bottom: calc(7px + env(safe-area-inset-bottom));
    min-height: 62px;
    padding: 4px 6px;
    border: 1px solid #d8c6ed;
    border-radius: 18px;
    background: #fcfafff2;
    box-shadow: 0 8px 30px #34234f1f;
    overflow: visible;
  }

  .mobile-dock::before {
    display: none;
  }

  .mobile-dock::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    top: -8px;
    height: 10px;
    z-index: -1;
    background: radial-gradient(circle at 6px 10px, #fcfaff 6px, transparent 6.4px) center 0 / 12px 10px repeat-x;
    filter: drop-shadow(0 -1px 0 #d8c6ed);
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    pointer-events: none;
  }

  .mobile-dock a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    gap: 2px;
    padding: 4px 3px;
    color: #6d567f;
    border-radius: 13px;
    transition: transform .35s var(--ease), color .25s, background .25s;
  }

  .mobile-dock a>span {
    font-size: 11px;
  }

  .mobile-dock .icon {
    width: 19px;
    height: 19px;
  }

  .mobile-dock a:last-child {
    flex-basis: 0;
    border-radius: 13px;
    background: transparent;
    color: #6d567f;
    margin-left: 0;
  }

  .mobile-dock a.is-active,
  .mobile-dock a:last-child.is-active {
    color: white;
    background: var(--rust);
    transform: translateY(-3px);
    box-shadow: 0 5px 11px #7044c733;
  }

  .mobile-dock a.is-active .icon {
    animation: nav-pop .46s var(--ease);
  }

  .toast {
    bottom: calc(145px + env(safe-area-inset-bottom));
    font-size: 14px;
  }

  .letter-paper>p:not(.eyebrow) {
    font-size: 16px;
  }

  .letter-paper .button {
    font-size: 14px;
  }

  .letter-paper>.letter-date,
  .letter-paper>.letter-date+p {
    font-size: 14px;
  }

  .letter-paper>small {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 21.3vw;
  }

  .hero-copy>.eyebrow {
    font-size: 10px;
  }

  .hero-copy>.button {
    padding-inline: 16px;
    font-size: 14px;
    gap: 13px;
  }

  .hero-description {
    font-size: 16px;
  }

  .hero-date {
    font-size: 12px;
  }

  .hero-footnote {
    font-size: 12px;
  }

  .chapter-copy>p {
    font-size: 45px;
  }

  .chapter-controls button {
    font-size: 11px;
  }

  .game-prize h3 {
    font-size: 39px;
  }

  .person-card {
    padding: 18px;
    flex-basis: 81vw;
    width: 81vw;
  }

  .person-secret>span:not(.card-hint) {
    font-size: 33px;
  }

  .carousel-controls {
    gap: 11px;
  }

  .carousel-controls>span {
    font-size: 12px;
  }

  .event h3 {
    font-size: 34px;
  }

  .rsvp-card {
    padding-inline: 18px;
  }

  .rsvp-card label {
    font-size: 14px;
  }

  .dock-love-copy {
    width: 46vw;
    font-size: 11px;
  }

  .dock-character {
    width: 68px;
    height: 91px;
  }

  .dock-character img {
    width: 136px;
  }

  .dock-joined-couple {
    width: 84px;
    height: 92px;
  }
}

@media (max-height: 740px) and (max-width: 600px) {
  .adventure-inner {
    padding-block: 13px;
  }

  .chapter-copy {
    margin-top: 13px;
  }

  .chapter-copy>p {
    font-size: 39px;
    margin-top: 9px;
  }

  .chapter-copy>span:last-child {
    margin-top: 10px;
    font-size: 14px;
    min-height: 44px;
  }

  .motion-ready .adventure-world {
    min-height: 130px;
  }

  .road-scene {
    min-height: 140px;
  }

  .adventure-bottom {
    margin-top: 8px;
  }

  .world-sticker {
    width: 62px;
    height: 62px;
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .adventure {
    height: auto;
  }

  .motion-ready .adventure-sticky {
    position: relative;
    height: auto;
  }

  .motion-ready .adventure-inner {
    display: block;
  }

  .adventure-scroll-hint {
    display: none;
  }

  .adventure-bottom {
    justify-content: flex-end;
  }

  .hero-art,
  .event-art {
    transform: none !important;
  }

  .verse-word {
    opacity: 1 !important;
  }

  .js-ready .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
    translate: none;
    rotate: none;
  }

  .couple-layout {
    scroll-behavior: auto;
  }

  .dock-love-copy span {
    animation: none;
  }

  .dock-love-story.is-united .dock-finale,
  .mobile-dock a.is-active .icon {
    animation: none;
  }

  .memory-stamps-track {
    animation: none !important;
    transform: none !important;
  }

  .memory-stamps-set[aria-hidden="true"] {
    display: none;
  }
}

@keyframes dock-letter {
  from {
    opacity: 0;
    transform: translateY(8px) rotate(3deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@keyframes dock-heartbeat {

  0%,
  100% {
    scale: 1;
  }

  35% {
    scale: 1.19;
  }

  55% {
    scale: .98;
  }

  72% {
    scale: 1.12;
  }
}

@keyframes heart-sparkle {

  0%,
  100% {
    opacity: .35;
    scale: .7;
    rotate: -8deg;
  }

  45% {
    opacity: 1;
    scale: 1.2;
    rotate: 8deg;
  }
}

@keyframes nav-pop {
  0% {
    scale: .6;
    rotate: -12deg;
  }

  65% {
    scale: 1.18;
    rotate: 7deg;
  }

  100% {
    scale: 1;
    rotate: 0;
  }
}

/* Preserve the design while avoiding costly repaints on constrained touch devices. */
.performance-lite body::after {
  display: none;
}

.performance-lite .hero-art,
.performance-lite .event-art {
  transform: none !important;
}

.performance-lite .verse-word {
  opacity: 1 !important;
}

.performance-lite .person-card {
  --card-x: 0px !important;
}

.performance-lite .world-spark,
.performance-lite .dock-love-copy span,
.performance-lite .mobile-dock a.is-active .icon {
  animation: none !important;
}

.performance-lite .dock-character,
.performance-lite .dock-joined-couple,
.performance-lite .dock-finale,
.performance-lite .mobile-dock::after {
  filter: none !important;
}

.performance-lite .dock-love-copy::before {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #fff8;
}

.performance-lite .mobile-dock {
  box-shadow: 0 4px 14px #34234f17;
}