/*
 * The app's chrome on the web: cream, ink, Literata and Source Sans 3
 * (2026-10-17, the product owner's call).
 *
 * The four colours below are the only colour values in `site/`, and each is a
 * copy of a `ui` token in `src/ui/tokens.ts` — the one exception to CLAUDE.md's
 * second hard rule. `src/ui/site.test.ts` fails the build if they drift or if a
 * colour appears anywhere else here.
 *
 * Cream always, like the app's chrome, rather than following the system's dark
 * mode. The fonts are self-hosted from `assets/fonts/` (SIL OFL, licences in
 * `fonts/`): Google Fonts would hand every reader's IP to Google, on the page
 * that promises we don't share data.
 */
:root {
  /* ui.background */
  --background: #f4eee2;
  /* ui.ink */
  --ink: #292824;
  /* ui.secondary */
  --secondary: #59574f;
  /* ui.divider */
  --divider: #dcd6c8;

  color-scheme: light;
}

@font-face {
  font-family: 'Literata';
  src: url('fonts/Literata-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Literata';
  src: url('fonts/Literata-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Literata';
  src: url('fonts/Literata-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  /* `type.body`: 18 on a 32 rhythm, the app's writing size. */
  font-family: 'Literata', Georgia, serif;
  font-size: 18px;
  line-height: 32px;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 4rem;
}

a {
  color: inherit;
  text-decoration-color: var(--secondary);
  text-underline-offset: 3px;
}

strong {
  font-weight: 600;
}

/* `type.heading`, `type.title`, then the body size in the heavier weight. */
h1 {
  font-weight: 600;
  font-size: 32px;
  line-height: 42px;
  margin: 0.5rem 0 0.25rem;
}

h2 {
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--divider);
}

h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 32px;
  margin-top: 1.75rem;
}

/* `type.caption`: what reads as interface, in Source Sans 3 and graphite. */
.meta,
.home {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--secondary);
}

.home a {
  text-decoration: none;
}

/* The tagline, at `type.title`. */
.lede {
  font-style: italic;
  font-size: 24px;
  line-height: 34px;
}

/* `type.label`. */
.links {
  list-style: none;
  padding: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  line-height: 24px;
}

.links li {
  margin: 0.75rem 0;
}