/* Brief, once-per-session welcome intro. */
.welcome-screen[hidden] { display: none; }
.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--paper, #f5f4ef);
  color: var(--ink, #232626);
  overflow: hidden;
  display: grid;
  place-items: center;
  transform: translateY(0);
  will-change: transform;
}
.welcome-centre { text-align: center; width: 100%; padding: 0 24px; transform: translateY(-18px); }
.welcome-logo { margin: 0 auto 34px; border-radius: 4px; background: #11120f; }
.welcome-label { color: #797d73; font-size: 15px; font-weight: 400; margin-bottom: 11px; }
.welcome-title {
  font-family: var(--sans);
  font-size: clamp(58px, 11.5vw, 164px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.065em;
  white-space: nowrap;
}
.welcome-title span {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.058em;
  color: var(--blue, #304df1);
}
.welcome-corner { position: absolute; top: 32px; left: var(--gutter); font-size: 9px; letter-spacing: .12em; color: #797d73; }
.welcome-bottom { position: absolute; bottom: 31px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; font-size: 11px; color: #797d73; }
.welcome-skip { position: absolute; top: 25px; right: var(--gutter); display: flex; align-items: center; gap: 8px; padding: 7px 0 7px 10px; color: #797d73; font-size: 11px; }
.welcome-skip:hover { color: var(--ink); }
.welcome-screen.is-playing .welcome-logo { animation: welcome-arrive 480ms cubic-bezier(.2,.7,.2,1) both; }
.welcome-screen.is-playing .welcome-label { animation: welcome-arrive 530ms 55ms cubic-bezier(.2,.7,.2,1) both; }
.welcome-screen.is-playing .welcome-title { animation: welcome-arrive 650ms 100ms cubic-bezier(.2,.7,.2,1) both; }
.welcome-screen.is-leaving { animation: welcome-lift 760ms cubic-bezier(.76,0,.24,1) both; pointer-events: none; }
@keyframes welcome-arrive { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: translateY(0); } }
@keyframes welcome-lift { to { transform: translateY(-102%); } }
html.welcome-open { overflow: hidden; }

html.welcome-pending { overflow: hidden; }
.welcome-pending .welcome-screen[hidden] { display: grid; }
@media (max-width: 600px) {
  .welcome-logo { width: 55px; height: 55px; margin-bottom: 29px; }
  .welcome-label { font-size: 13px; margin-bottom: 14px; }
  .welcome-title { font-size: clamp(48px, 12vw, 72px); }
  .welcome-corner { top: 28px; font-size: 8px; }
  .welcome-skip { top: 20px; }
  .welcome-bottom { bottom: 31px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-screen, .welcome-screen * { animation: none !important; transition: none !important; }
}