/* ---- retune the whole site from this block ---- */
:root {
  --accent: #c9a227;
  --bg: #101010;
  --fg: #f2f2ee;
  --muted: color-mix(in srgb, var(--fg) 55%, var(--bg));
  --body: 1.25rem;      /* one body size; h1 is 2x */
  --measure: 36em;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f4f3f0; --fg: #181818; }
}
/* ----------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: var(--body);
  line-height: 1.55;
  background: var(--bg);
  color: var(--fg);
  max-width: var(--measure);
  margin: 0 auto;
  padding: 12vh 1.25rem 4rem;
}

h1 { font-size: 2em; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 1em; font-weight: 600; color: var(--muted); margin-top: 3rem; }

p, ul, ol, figure { margin-top: 1.4rem; }
ul, ol { list-style-position: inside; }
li { margin-top: 0.35rem; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; display: block; }
figcaption { color: var(--muted); }

.muted { color: var(--muted); }

blockquote { margin-top: 1.4rem; padding-left: 1.25rem; border-left: 2px solid var(--accent); }
blockquote .cite { color: var(--muted); }

footer { margin-top: 6rem; color: var(--muted); }
footer a { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
footer a:hover { color: var(--fg); }