:root {
  color-scheme: light;
  --ink: #2f2924;
  --muted: #74685c;
  --line: #d8c9ad;
  --paper: #f7f0e1;
  --panel: #fffaf0;
  --accent: #8f4933;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  line-height: 1.85;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: var(--accent); text-underline-offset: .2em; }
.article-shell { width: min(920px, calc(100% - 40px)); margin: 0 auto; }
.article-header, .article-footer { padding: 22px 0; border-bottom: 1px solid var(--line); }
.article-footer { border-top: 1px solid var(--line); border-bottom: 0; display: flex; flex-wrap: wrap; gap: 16px 24px; }
.article-header a { text-decoration: none; }
.breadcrumb { margin: 28px 0 10px; color: var(--muted); font-size: .88rem; }
main { padding-bottom: 56px; }
h1, h2, h3 { line-height: 1.45; }
h1 { margin: 8px 0 14px; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: .025em; }
h2 { margin-top: 2.2em; font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
.eyebrow { color: var(--accent); font: 700 .72rem/1.5 ui-monospace, monospace; letter-spacing: .08em; }
.dek { max-width: 760px; color: var(--muted); font-size: 1.08rem; }
.article-meta { color: var(--muted); font-size: .84rem; }
.article-callout, .article-card { padding: 18px 20px; border: 1px solid var(--line); background: var(--panel); }
.article-callout { margin: 24px 0; }
.article-card h2, .article-card h3 { margin-top: 0; }
.article-image { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #93c3ca; }
figure { margin: 28px 0; }
figcaption { margin-top: 8px; color: var(--muted); font-size: .86rem; }
.table-wrap { overflow-x: auto; margin: 20px 0; }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { padding: 11px 13px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #eee2ca; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.article-grid a { color: inherit; text-decoration: none; }
.article-grid a:hover h2 { color: var(--accent); }
.article-grid h2 { margin: 0 0 8px; font-size: 1.12rem; }
.article-grid p { margin: 0; color: var(--muted); font-size: .92rem; }
.step-list li { margin: 10px 0; }
.small-note { color: var(--muted); font-size: .88rem; }
@media (max-width: 720px) {
  .article-grid { grid-template-columns: 1fr; }
  th, td { min-width: 120px; }
}
@media print {
  :root { background: #fff; }
  .article-header, .article-footer { display: none; }
  .article-shell { width: 100%; }
}