:root {
  --bg: #000;
  --ink: #e8e8e8;
  --muted: #8a8a8a;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* The start page: one star in the dark, the legal links at the foot. */
.home { display: grid; grid-template-rows: 1fr auto; min-height: 100svh; }
.home main { display: grid; place-items: center; }
.star { width: clamp(170px, 40vmin, 360px); height: auto; display: block; }
.home footer { display: flex; justify-content: center; gap: 24px; padding: 0 16px 28px; font-size: 12px; }
.home footer a { color: var(--muted); text-decoration: none; transition: color 200ms var(--ease-out); }
.home footer a:hover { color: var(--ink); }

/* It lights up once, then catches the light now and then. */
@media (prefers-reduced-motion: no-preference) {
  .star { animation: appear 1400ms var(--ease-out) both, glint 9s 2s ease-in-out infinite; }
  @keyframes appear {
    from { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    to { opacity: 1; transform: none; }
  }
  @keyframes glint {
    0%, 88%, 100% { opacity: 1; transform: none; }
    93% { opacity: 0.55; transform: scale(0.94); }
  }
}

/* Imprint and privacy: plain text under the wordmark. */
.legal { max-width: 38rem; margin: 0 auto; padding: 40px 16px 80px; }
.legal header a { display: inline-block; }
.legal header img { width: 120px; height: auto; display: block; }
.legal h1 { font-size: 22px; font-weight: 600; margin: 48px 0 24px; }
.legal h2 { font-size: 15px; font-weight: 600; margin: 32px 0 6px; }
.legal p { margin: 0 0 12px; color: #cfcfcf; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.star.faint { opacity: 0.35; animation: none; }
