.welcome-page {
  transition: opacity 180ms var(--ease);
}
.welcome-restoring .welcome-page,
.welcome-page.welcome-leaving {
  opacity: 0;
}
.autumn-welcome {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: clip;
}
.welcome-art {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.welcome-art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
}
.autumn-welcome::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(0deg, var(--background) 0%, transparent 42%);
}
.greeting-copy {
  inline-size: 100%;
  max-inline-size: 580px;
  margin-inline: auto;
  margin-block-start: 52svh;
  padding: 24px max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  text-align: center;
}
.greeting-copy h1 {
  font-size: clamp(30px, 9.2vw, 38px);
  font-weight: 800;
  line-height: 1.45;
  text-wrap: balance;
}
.greeting-copy p {
  margin-block-start: 14px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--muted);
}
.greeting-copy bdi {
  white-space: nowrap;
}
.greeting-enter {
  touch-action: manipulation;
  min-block-size: 56px;
  inline-size: min(100%, 260px);
  margin-block-start: 26px;
  font-size: 16px;
  gap: 12px;
}
.greeting-enter svg {
  inline-size: 18px;
  block-size: 18px;
  fill: currentColor;
}
.greeting-enter:active {
  transform: scale(.98);
}
@media (max-height: 680px) and (max-width: 759px) {
  .autumn-welcome::after {
    background: linear-gradient(0deg, var(--background) 0%, var(--overlay) 34%, transparent 64%);
  }
  .greeting-copy {
    margin-block-start: 44svh;
    padding-block: 16px max(20px, env(safe-area-inset-bottom));
  }
  .greeting-copy h1 { font-size: 30px; line-height: 1.35; }
  .greeting-copy p { font-size: 15px; margin-block-start: 10px; }
  .greeting-enter { margin-block-start: 18px; }
}
@media (min-width: 760px) {
  .autumn-welcome {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .welcome-art {
    inset-inline-start: 50%;
  }
  .welcome-art img { object-position: center 40%; }
  .autumn-welcome::after {
    background: linear-gradient(to left, var(--background) 47%, transparent 72%);
  }
  .greeting-copy {
    grid-column: 1;
    margin-block-start: 0;
    max-inline-size: 600px;
    padding: 64px clamp(32px, 5vw, 88px);
    text-align: start;
  }
  .greeting-copy h1 { font-size: clamp(38px, 4vw, 60px); line-height: 1.45; }
  .greeting-copy p { font-size: 19px; margin-block-start: 20px; }
  .greeting-enter { margin-block-start: 32px; }
  .greeting-break { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-page { transition: none; }
  .greeting-enter:active { transform: none; }
}