:root {
  --ink: #161210;
  --paper: #f5efe6;
  --cinnabar: #a81828;
  --gold: #c9a070;
  --muted: #6b5a50;
  --line: #e6d9c8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Segoe UI", "Be Vietnam Pro", system-ui, sans-serif;
  background: radial-gradient(900px 420px at 50% -8%, #faf6ee 0%, transparent 55%), var(--paper);
  color: var(--ink);
  line-height: 1.65;
}
main { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.mark {
  width: 48px; height: 48px; margin: 0 auto 20px;
  border: 1.5px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cinnabar); font-size: 22px; font-weight: 600;
}
h1 {
  font-weight: 600;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  text-align: center;
}
h2 { font-size: 18px; font-weight: 600; margin: 32px 0 10px; }
.lead, .meta, .nav { color: var(--muted); }
.lead { text-align: center; margin: 0 0 20px; }
.nav { text-align: center; margin: 0 0 28px; font-size: 14px; }
.nav a { color: var(--cinnabar); margin: 0 8px; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 0 0 6px; }
a { color: var(--cinnabar); }
code { font-size: 13px; background: #efe6d8; padding: 1px 5px; border-radius: 4px; }
.meta { margin-top: 40px; text-align: center; font-size: 14px; }
.updated { font-size: 13px; text-align: center; color: var(--muted); margin: 0 0 8px; }