/* A single photographic invitation, shared by home and Gift Shop. */
.arrival {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #31272c;
  color: #fff4e6;
  min-height: 680px;
  padding: 64px 7%;
}
.arrival-image { position: absolute; inset: 0 0 0 30%; z-index: -3; mask-image: linear-gradient(90deg, transparent, #000 25%); }
.arrival-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.arrival-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, #31272c 4%, #412c36f5 27%, #482d35bb 43%, #3327261a 70%), linear-gradient(0deg, #201a24b8, transparent 42%);
}
.arrival-content { width: min(46%, 490px); min-height: 552px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.arrival-intro .eyebrow { display: flex; align-items: center; gap: 12px; color: #f0cbb2; font-size: 10px; letter-spacing: .15em; margin: 0 0 22px; }
.arrival-intro .eyebrow > span { font-size: 22px; line-height: 1; }
.arrival-intro h2 { font-size: clamp(60px, 6.2vw, 88px); line-height: .99; letter-spacing: -.035em; margin: 0 0 24px; }
.arrival-intro h2 em { color: #edc8b9; }
.arrival-intro > p:last-child { color: #f5e4d8; font-size: 14px; line-height: 1.8; margin: 0; }
.arrival-invitation { border-top: 1px solid #f2d2b94a; padding-top: 23px; }
.arrival-details { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.arrival-details > div > span { display: block; font-size: 9px; letter-spacing: .13em; color: #e2bea5; margin-bottom: 10px; }
.arrival-details a, .arrival-details p { display: block; font-size: 15px; line-height: 1.5; margin: 0; }
.arrival-details small { display: block; color: #dfcfc3; font-size: 12px; margin-top: 3px; }
.arrival-directions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 23px; }
.arrival-directions a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px solid #f8dec263; border-radius: 3px; font-size: 12px; background: #ead8c20a; transition: background .25s, border-color .25s; }
.arrival-directions a:first-child { background: #f6e8d7; border-color: #f6e8d7; color: #4c303a; }
.arrival-directions a:hover { background: #f6e8d729; border-color: #f6e8d7; }
.arrival-directions a:first-child:hover { background: #fff7ed; }
.arrival-directions a > span { font-size: 18px; line-height: 1; transition: transform .25s; }
.arrival-directions a:hover > span { transform: translate(2px, -2px); }
.arrival-phone { display: block; font-size: 10px; line-height: 1.6; color: #dfcfc3; margin-top: 17px; }
.arrival-phone span { white-space: nowrap; color: #fff0df; margin-left: 4px; }
.arrival-photo-note { position: absolute; right: 6%; bottom: 44px; text-align: right; text-shadow: 0 2px 16px #140e14; }
.arrival-photo-note > span { display: block; font-size: 9px; letter-spacing: .16em; color: #f4dec8; }
.arrival-photo-note em { display: block; font: 32px/1.4 var(--script); margin-top: 6px; }
@media (min-width: 761px) and (max-width: 1050px) {
  .arrival { padding: 52px 6%; min-height: 650px; }
  .arrival-content { width: 50%; min-height: 546px; }
  .arrival-intro h2 { font-size: 66px; }
  .arrival-photo-note em { font-size: 25px; }
}
@media (max-width: 760px) {
  .arrival { min-height: 660px; padding: 30px 7% 25px; }
  .arrival-image { inset: 0; mask-image: none; }
  .arrival-image img { object-position: 50% 64%; }
  .arrival-shade { background: linear-gradient(180deg, #241e29ed 0%, #32202cac 20%, #241b2310 39%, #261c242b 49%, #33232de8 68%, #38252f 87%, #422b35 100%); }
  .arrival-content { width: 100%; min-height: 605px; gap: 172px; }
  .arrival-intro .eyebrow { font-size: 8px; letter-spacing: .13em; margin-bottom: 15px; gap: 9px; }
  .arrival-intro .eyebrow > span { font-size: 18px; }
  .arrival-intro h2 { font-size: clamp(46px, 12.8vw, 65px); line-height: .98; margin-bottom: 14px; }
  .arrival-intro > p:last-child { font-size: 12px; line-height: 1.65; }
  .arrival-invitation { padding-top: 18px; }
  .arrival-details { grid-template-columns: 1.15fr 1fr; gap: 12px; }
  .arrival-details > div > span { font-size: 8px; margin-bottom: 8px; }
  .arrival-details a, .arrival-details p { font-size: 13px; }
  .arrival-details small { font-size: 11px; }
  .arrival-directions { margin-top: 18px; gap: 9px; }
  .arrival-directions a { padding: 13px 14px; font-size: 11px; min-height: 46px; }
  .arrival-phone { font-size: 9px; margin-top: 14px; }
  .arrival-photo-note { display: none; }
}
@media (max-width: 360px) {
  .arrival { padding-left: 6%; padding-right: 6%; }
  .arrival-intro h2 { font-size: 46px; }
  .arrival-content { gap: 155px; }
  .arrival-phone span { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .arrival-directions a, .arrival-directions a > span { transition: none; }
}