:root {
  --frame: #EEE9E1;
  --ink: #1E1A17;
  --ink-muted: #6B5F55;
  --rule: rgba(30, 26, 23, 0.12);
  --accent: #8A4A26;
  --font-serif: ui-serif, "New York", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
}

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

body {
  background: var(--frame);
  color: var(--ink);
  font: 400 16px/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  padding: 0 16px;
}

.top {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 0 8px;
}
.home { display: inline-block; color: var(--ink); }
.home .logo-mark { display: block; width: 96px; height: auto; }

.doc {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 0 64px;
  overflow-wrap: break-word;
}

.doc h1 {
  font: 400 clamp(36px, 6vw, 52px)/1.1 var(--font-serif);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.doc .meta { color: var(--ink-muted); font-size: 14px; margin-bottom: 32px; }
.doc h2 {
  font: 400 24px/1.3 var(--font-serif);
  margin: 48px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.doc h1 + h2 { border-top: 0; padding-top: 0; margin-top: 32px; }
.doc h3 { font: 600 16px/1.4 var(--font-sans); margin: 28px 0 8px; }
.doc p, .doc ul { margin: 0 0 14px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--accent); text-underline-offset: 2px; }

.foot {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 0 40px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 20px;
  font-size: 13px;
}
.foot a { color: var(--ink-muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }