/* Tokens defined on bare :root so a color always has a value,
   then re-stated for dark. Keeps the page readable before any
   real design exists. */
:root {
  --bg: #fbfbfa;
  --fg: #16150f;
  --muted: #6b6a63;
  --rule: #e3e2dd;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14140f;
    --fg: #f2f1ea;
    --muted: #9c9a91;
    --rule: #2b2a24;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem clamp(1.5rem, 6vw, 6rem);
  max-width: 46rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.tagline {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--muted);
}

footer {
  padding: 1.25rem clamp(1.5rem, 6vw, 6rem);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: currentColor; }