/* Welcome section: text + steps on the left, portrait on the right.
   The arch top lines up with the heading; its bottom lines up with the steps. */
.welcome.welcome-split {
  max-width: 1120px;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas:
    "label   ."
    "text    photo"
    "signoff .";
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 0;
  align-items: stretch;
}
.welcome-split > .label { grid-area: label; text-align: left; justify-self: start; margin-left: 0; margin-right: 0; }
.welcome-split > .sign-off { grid-area: signoff; text-align: left; margin-left: 0; justify-self: start; }
.welcome-split .welcome-text { grid-area: text; }
.welcome-split .welcome-text h2 { text-align: left; margin-top: 0; }
.welcome-split .welcome-text p { margin-left: 0; margin-right: 0; }
.welcome-split .steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  margin-bottom: 0;
}
.welcome-photo {
  grid-area: photo;
  margin: 0;
  position: relative;
  min-height: 360px;
  border-radius: 999px 999px var(--radius) var(--radius);
  overflow: hidden;
  background: var(--mist);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 8px var(--card), 0 0 0 9px var(--dusty);
}
.welcome-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.welcome-photo .photo-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 24px;
  color: var(--mist-ink);
  font-family: var(--caps); letter-spacing: .14em; font-size: .78rem;
}
.welcome-photo .photo-placeholder em { font-family: var(--script); font-style: normal; font-size: 2rem; letter-spacing: 0; color: var(--champagne-ink); }
@media (max-width: 860px) {
  .welcome.welcome-split {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "label" "text" "signoff";
    text-align: center;
  }
  .welcome-split > .label { margin-left: auto; margin-right: auto; }
  .welcome-photo { aspect-ratio: 4 / 5; min-height: 0; max-width: 340px; width: 100%; margin: 0 auto 28px; }
  .welcome-split > .label,
  .welcome-split > .sign-off,
  .welcome-split .welcome-text h2 { text-align: center; justify-self: center; }
  .welcome-split .welcome-text p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 520px) {
  .welcome-split .steps { grid-template-columns: 1fr; }
}