.arrival-card {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border-radius: 0;
  border: 0;
  background: #fffaf0;
  padding: clamp(38px, 6svh, 54px) clamp(30px, 8vw, 48px) 38px;
  box-shadow: 0 18px 60px rgb(25 42 27 / 20%);
  --invitation-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M12 2H40C44 2 46 0 50 0S56 2 60 2H88C90 2 90 5 92 5C95 5 95 8 95 10C95 12 98 12 98 15V40C98 44 100 46 100 50S98 56 98 60V85C98 88 95 88 95 90C95 92 95 95 92 95C90 95 90 98 88 98H60C56 98 54 100 50 100S44 98 40 98H12C10 98 10 95 8 95C5 95 5 92 5 90C5 88 2 88 2 85V60C2 56 0 54 0 50S2 44 2 40V15C2 12 5 12 5 10C5 8 5 5 8 5C10 5 10 2 12 2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--invitation-outline);
  mask-image: var(--invitation-outline);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.arrival-card::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 0;
  border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23b7a377' stroke-opacity='.65' stroke-width='1' vector-effect='non-scaling-stroke' d='M12 2H40C44 2 46 0 50 0S56 2 60 2H88C90 2 90 5 92 5C95 5 95 8 95 10C95 12 98 12 98 15V40C98 44 100 46 100 50S98 56 98 60V85C98 88 95 88 95 90C95 92 95 95 92 95C90 95 90 98 88 98H60C56 98 54 100 50 100S44 98 40 98H12C10 98 10 95 8 95C5 95 5 92 5 90C5 88 2 88 2 85V60C2 56 0 54 0 50S2 44 2 40V15C2 12 5 12 5 10C5 8 5 5 8 5C10 5 10 2 12 2Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}
.arrival-card h2 { margin-top: 18px; margin-bottom: 20px; }
.arrival-card .venue-text-only { margin-top: 26px; margin-bottom: 26px; }
@media (max-height: 700px) {
  .arrival-card {
    border-radius: 0;
    padding-top: 34px;
    padding-bottom: 30px;
  }
  .arrival-card::before { border-radius: 0; }
  .arrival-card .venue-text-only { margin-top: 18px; margin-bottom: 18px; }
}
.arrival-card .venue-text-only {
  display: flex;
  justify-content: center;
  text-align: center;
}
.arrival-card .venue-text-only > div { width: 100%; }
#intro .wedding-intro {
  margin: 0;
  font-size: clamp(21px, 5.5vw, 30px);
  line-height: 1.25;
  letter-spacing: .09em;
  text-transform: none;
}
#intro .wedding-intro span { display: block; }
#intro .wedding-intro em {
  display: block;
  margin-top: .12em;
  color: #fff2d9;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(35px, 9vw, 49px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .025em;
  text-shadow: 0 2px 16px rgb(35 54 32 / 18%);
}
#intro {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.15s ease, visibility 0s;
}
body:not(.driving) #intro .wedding-intro span {
  animation: wedding-names-in 1.7s cubic-bezier(.2,.7,.2,1) .15s both;
}
body:not(.driving) #intro .wedding-intro em {
  animation: wedding-vow-in 1.9s cubic-bezier(.2,.7,.2,1) .55s both;
}
body.driving #intro {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.15s ease, visibility 0s linear 1.15s;
}
@keyframes wedding-names-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wedding-vow-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #intro .wedding-intro span, #intro .wedding-intro em { animation: none !important; }
  #intro, body.driving #intro { transition: none; }
}