/* Pages that scroll (the home shelf, About, Privacy): the palette, the page itself and its footer.
   The game pages use ui.css instead. */
:root { --bg1: #ffe9a8; --bg2: #ffd6e0; --ink: #4a2c1a; --glow: rgba(255,255,255,.6); --shadow: rgba(60,30,10,.35); --link: #b4442a; }
:root[data-theme="night"] { --bg1: #141a3a; --bg2: #2a1f4a; --ink: #fff3d6; --glow: rgba(0,0,0,.35); --shadow: rgba(0,0,0,.6); --link: #ffc36b; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Grandstander', system-ui, sans-serif; font-weight: 800; color: var(--ink);
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transition: background .8s, color .8s;
}
a { color: var(--link); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Text pages. Grandstander only ships at 800, so it is kept to headings; body copy is the system face. */
.prose {
  max-width: 40rem; margin-inline: auto; padding: 6rem 1.5rem 2rem;
  font-family: system-ui, sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 1.6;
  h1, h2 { font-family: 'Grandstander', system-ui, sans-serif; font-weight: 800; line-height: 1.2; }
  h1 { font-size: clamp(2rem, 6vw, 3rem); margin-block: 0 1rem; text-shadow: 0 4px 0 var(--glow); }
  h2 { font-size: 1.375rem; margin-block: 2rem .5rem; }
  .updated { opacity: .75; }
}

.site-foot {
  display: flex; justify-content: center; gap: 1.5rem; padding: 1.5rem 1rem 2.5rem;
  font-size: 1rem;
  a { color: inherit; opacity: .75; text-decoration: none; }
  a:hover { opacity: 1; text-decoration: underline; }
}