/* The public entrance reuses today's illustrated portals and shared controls. */
.welcome-hub { width: min(100%, 1100px); margin-inline: auto; padding: 28px 32px 40px; }
.welcome-hub .welcome-brand { margin-bottom: 32px; }
.welcome-hub .welcome-copy { text-align: center; margin-bottom: 52px; }
.welcome-hub .welcome-description { font-size: calc(var(--reading-body-size) + 2px); }
.welcome-hub .welcome-portals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.welcome-portals .portal-link { display: flex; flex-direction: column; min-height: 500px; height: 100%; padding: 0 32px 28px; text-decoration: none; color: var(--app-text); border-radius: inherit; }
.welcome-portals .portal-art { height: 260px; flex-basis: 260px; margin-bottom: 8px; }
.welcome-portals .day-portal { background: linear-gradient(180deg, transparent, var(--app-canvas) 85%, transparent); }
.welcome-portals .portal-scenery { object-position: 65% top; height: 340px; mask-image: linear-gradient(black 30%, transparent 88%); }
.welcome-portals .portal-copy h2 { font: 400 var(--reading-title-size)/1.2 var(--font-display); color: var(--app-text); margin: 12px 0 16px; }
.welcome-portals .portal-copy p { font: 400 calc(var(--reading-body-size) + 2px)/1.65 var(--font-body); color: var(--app-secondary); margin: 0 0 24px; text-wrap: pretty; }
.welcome-portals .portal-label { color: var(--app-gold); }
.welcome-portals .portal-action { min-height: 50px; font-size: var(--reading-body-size); color: var(--app-text); background: color-mix(in srgb, var(--app-field) 85%, transparent); }
.welcome-portals .welcome-return { grid-column: 1 / -1; justify-self: center; max-width: 620px; min-height: 96px; background: color-mix(in srgb, var(--app-surface) 75%, transparent); }
.welcome-return .row-copy small { font-size: var(--reading-body-size); }
@media (max-width: 700px) {
  .welcome-hub { padding: 24px 24px 32px; }
  .welcome-hub .welcome-copy { margin-bottom: 52px; }
  .welcome-hub .welcome-copy h1 { font-size: clamp(34px, 9vw, 46px); }
  .welcome-hub .welcome-description { font-size: var(--reading-body-size); }
  .welcome-hub .welcome-portals { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; gap: 48px; }
  .welcome-portals .portal-link { padding-inline: 24px; min-height: 470px; }
  .welcome-portals .portal-art { height: 230px; flex-basis: 230px; }
  .welcome-portals .portal-copy p { font-size: var(--reading-body-size); }
  .welcome-portals .welcome-return { margin-top: -16px; }
}