:root {
  --paper: #f4efe4;
  --card: #fffcf6;
  --ink: #1e2433;
  --graphite: #5b5f66;
  --oxblood: #7c2433;
  --hairline: #e2d8c6;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 'Inter', system-ui, -apple-system, sans-serif;
}
main { max-width: 680px; margin: 0 auto; padding: 48px 16px 80px; }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
header img { width: 56px; height: 56px; border-radius: 13px; }
header a { color: inherit; text-decoration: none; }
.brand { font: 600 22px/1.2 'Newsreader', Georgia, serif; }
.brand small { display: block; font: 500 13px/1.4 'Inter', sans-serif; color: var(--graphite); letter-spacing: 0.02em; }
h1 { font: 600 34px/1.15 'Newsreader', Georgia, serif; margin: 0 0 8px; }
h2 { font: 600 22px/1.3 'Newsreader', Georgia, serif; margin: 36px 0 8px; }
p, li { color: var(--ink); }
.muted { color: var(--graphite); font-size: 15px; }
a { color: var(--oxblood); }
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 24px 0;
}
.card p { margin: 0; }
nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 15px; }
code { font: 14px 'IBM Plex Mono', ui-monospace, monospace; background: var(--card); padding: 1px 5px; border-radius: 4px; }