/* Reset + tokeny */
*, *::before, *::after { box-sizing: border-box; }
body, h1, p, ul, figure, figcaption { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

:root {
  --paper: #f7f3ec;
  --ink: #241d16;
  --muted: #6d6055;
  --accent: #b4541f;
  --line: #e2d9cb;
  --wide: 60rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16120e;
    --ink: #f0e9df;
    --muted: #a3968a;
    --accent: #e08a4d;
    --line: #2d251d;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.7 Georgia, "Times New Roman", serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: .1em .35em;
  border-radius: 4px;
}