/* The agreed holding page (c302, c355; packs 8 and 9, m88, m89, pack 8 screen 7, q39): Crayon box colours from the
   engine's tokens (copied beside this file by stage.mjs), on paper whatever the phone's dark setting (q39); the layout
   shared with the web app's signed-out home (apps/web/src/styles.css). Fredoka for the description line, Andika for
   the rest. */
html { background: var(--pc-page); color: var(--pc-ink); }
body { margin: 0; font: 1.125rem/1.5 var(--pc-font-body); }
/* m105 (c430): the page fits every m106 size without scrolling. Portrait: the lockup above the text, centred, sized so the
   lockup, the description and the first line under it show at 360x640. Landscape from 600 px wide: two columns, the
   lockup as tall as the screen allows on the left and the text beside it, left-aligned and vertically centred. svh, so
   a phone's browser bars never cause a scroll. */
.home {
  min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center;
}
/* The lockup's box keeps the lockup's shape (248 by 322), so nothing moves while the sting plays. */
.home-lockup { flex: none; margin: 0; line-height: 0; aspect-ratio: 248 / 322; width: min(60vw, 320px, calc((100svh - 380px) * 248 / 322)); }
.home-text { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 28em; }
@media (orientation: landscape) and (min-width: 600px) {
  .home { flex-direction: row; gap: clamp(24px, 5vw, 96px); padding: 24px clamp(16px, 4vw, 64px); text-align: left; }
  .home-lockup { width: min(calc((100svh - 48px) * 248 / 322), 45vw); }
  .home-text { flex: 0 1 36em; align-items: flex-start; max-width: 36em; }
}
.home-lockup img, .home-lockup svg { display: block; width: 100%; height: 100%; }
/* Where the sting will play, the still waits unseen so the sting starts from a blank frame; if the script never runs,
   the still shows after a moment anyway. With reduced motion the still is the page (holding.js leaves it). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .home-lockup img { visibility: hidden; animation: still-lockup 0s 1.5s forwards; }
}
@keyframes still-lockup { to { visibility: visible; } }
p { margin: 0; }
.description { font-family: var(--pc-font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.35; }
.quiet { color: var(--pc-quiet); font-size: 1rem; }
a { color: var(--pc-primary); }