/* kabatas.eu — the look, D (spec: docs/superpowers/specs/2026-11-03-kabatas-eu-design.md): material's layout, visible
   edges. every size, space and colour below comes from these tokens. */
:root {
  /* space: the 8-point grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  /* type: one sans, three roles */
  --face: Roboto, "Helvetica Neue", system-ui, Arial, sans-serif;
  --body: 18px/1.45 var(--face);
  --title: 700 24px/1.25 var(--face);
  --label: 14px/1.45 var(--face);
  /* colour: ink on paper, surfaces with edges, the school's red for one thing per page */
  --ink: #1a1a1a;
  --paper: #fbf8f2;
  --surface: #ffffff;
  --edge: #cfc7ba;
  --quiet: #4a4540;
  --red: #a3262d;
  --red-edge: #7d1c22;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #ece6da; --paper: #15130f; --surface: #1e1b16; --edge: #4a443a; --quiet: #b8b0a2; }
}
html { background: var(--paper); color: var(--ink); font: var(--body); }
body { margin: 0 auto; padding: var(--s3); max-width: 42rem; min-height: 100dvh; display: flex; flex-direction: column; box-sizing: border-box; }
@media (min-width: 48rem) { body { padding: var(--s4); } }
header { display: flex; align-items: center; min-height: var(--s6); border-bottom: 1.5px solid var(--edge); }
.mast { font-weight: 700; font-size: 20px; }
main { flex: 1; padding-top: var(--s5); }
h1 { font: var(--title); margin: 0 0 var(--s3); }
p { margin: 0 0 var(--s3); max-width: 36rem; }
.quiet { color: var(--quiet); font: var(--label); }
footer { padding-top: var(--s4); border-top: 1.5px solid var(--edge); }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }