:root {
  color-scheme: light dark;
  --paper: #faf9f5; --ink: #292b29; --muted: #62665e; --rule: #d7dbd1;
  --accent: #40644c; --wash: #eff1ea;
  --serif: "Iowan Old Style", "Noto Serif CJK SC", "Songti SC", "Noto Serif SC", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1d211e; --ink: #e4e7df; --muted: #b1b9ae; --rule: #424a42; --accent: #a5c9a9; --wash: #282f29; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); }
.masthead, main { width: min(100% - 3rem, 48rem); margin-inline: auto; }
.masthead { padding: clamp(2.5rem, 8vw, 5rem) 0 1.2rem; border-bottom: 1px solid var(--rule); }
.masthead a { color: var(--ink); font: italic 2.6rem/1 var(--serif); text-decoration: none; letter-spacing: -.06em; }
.masthead span { color: var(--accent); }
main { padding-block: clamp(2rem, 6vw, 4.5rem) 5rem; }
article { font-size: clamp(1.04rem, 2vw, 1.18rem); line-height: 1.9; overflow-wrap: anywhere; }
article > :first-child { margin-top: 0; }
h1, h2, h3, h4, h5, h6 { line-height: 1.35; text-wrap: pretty; scroll-margin-top: 2rem; }
h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); letter-spacing: -.035em; margin: 1.5em 0 .65em; }
h2 { font-size: 1.65em; margin: 2em 0 .6em; }
h3 { font-size: 1.24em; margin: 1.7em 0 .5em; }
p, ul, ol, dl { margin-block: 0 1.15em; }
li > ul, li > ol { margin: .25rem 0; }
a { color: var(--accent); text-underline-offset: .18em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
blockquote { border-inline-start: 3px solid var(--accent); margin: 1.5em 0; padding-inline-start: 1.15em; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
code { font: .88em/1.55 ui-monospace, Menlo, Consolas, monospace; background: var(--wash); border-radius: .2em; padding: .12em .28em; }
pre { border: 1px solid var(--rule); background: var(--wash); overflow-x: auto; padding: 1rem; line-height: 1.55; }
pre code { padding: 0; }
table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.3em 0; font-size: .94em; }
th, td { border: 1px solid var(--rule); padding: .4em .75em; text-align: start; }
th { background: var(--wash); }
nav { color: var(--muted); font: .94rem/1.7 var(--sans); margin-bottom: 2rem; }
nav summary { width: fit-content; cursor: pointer; }
nav ol { margin: .65em 0 0; padding-inline-start: 1.6em; }
.empty { color: var(--muted); }
@media (max-width: 35rem) { .masthead, main { width: calc(100% - 2.5rem); } }
@media print { :root { color-scheme: light; --ink: #111; --paper: white; } nav { display:none; } main, .masthead { width:100%; } }