/*
  The app's ink/ember palette, in the two type families it uses — but resolved
  from system fonts rather than bundled files. Legal pages that need a webfont
  round trip to render are legal pages that render late, and the app's own
  reasoning for bundling Newsreader was that it must work on the metro. Nothing
  here is on the metro.
*/

:root {
  --bg: #f6f2ea;
  --surface: #fffdf8;
  --ink: #17151a;
  --muted: #6e6873;
  --line: #e0d9cc;
  --rule: #cfc6b6;
  --ember: #a8620a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0b0d;
    --surface: #131216;
    --ink: #ece7de;
    --muted: #8b8590;
    --line: #262329;
    --rule: #322e38;
    --ember: #f0a03c;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 3rem 1.5rem 5rem;
  background: var(--bg);
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
}

main {
  max-width: 44rem;
  margin: 0 auto;
}

.mono,
nav,
.updated {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 1.2rem;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 2.4rem 0 0.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.lede {
  color: var(--muted);
  font-size: 1.15rem;
}

/* The one accent, spent on the one thing that needs finishing. */
.todo {
  display: block;
  margin: 0.8rem 0;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border-left: 2px solid var(--ember);
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

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

a:hover {
  text-decoration-color: var(--ember);
}

nav {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.updated {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}