:root {
  color-scheme: light;
  --ink: #3d403e;
  --muted: #8e918c;
  --sage: #6f7d70;
  --taupe: #9e8c7a;
  --paper: #f4f2ee;
  --panel: #fdfcfa;
  --line: #e2ddd4;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.8;
}
a { color: var(--sage); }
.doc { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 80px; }
.brand { color: var(--taupe); font-weight: 700; letter-spacing: .12em; font-size: .85rem; text-decoration: none; }
h1, h2, h3 { font-weight: 700; }
h1 { margin: 22px 0 6px; font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.3; }
h2 { margin-top: 38px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 1.2rem; }
h3 { margin: 26px 0 4px; font-size: 1rem; }
.updated, .note { color: var(--muted); font-size: .9rem; }
.lead, .card { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.card a { font-weight: 600; }
.nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; }
ul { padding-left: 1.3rem; }
footer { margin-top: 52px; color: var(--muted); font-size: .85rem; }