/* Reading pages use the approved Linji production tokens. */
:root {
  --color-canvas: #fff; --color-ink: #202622; --color-muted: #5e6862;
  --color-line: #dfe5e1; --color-accent: #246b53; --color-accent-soft: #eaf3ee;
  --type-ui: .875rem; --type-body: 1rem; --type-title: 1.25rem;
  --leading-tight: 1.4; --leading-ui: 1.5; --leading-body: 1.75;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --size-reading: 46rem;
  --size-control: 36px; --size-touch: 44px;
  --weight-regular: 400; --weight-medium: 500; --weight-strong: 600;
}
* { box-sizing: border-box; }
html { color: var(--color-ink); background: var(--color-canvas); scrollbar-width: thin; scrollbar-color: var(--color-line) var(--color-canvas); }
body { margin: 0; font: var(--type-body)/var(--leading-body) system-ui, -apple-system, "Segoe UI", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
body > header, main, body > footer { width: min(100%, var(--size-reading)); margin-inline: auto; padding-inline: var(--space-6); }
body > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-4); }
.brand { font-weight: var(--weight-strong); color: var(--color-ink); text-decoration: none; }
nav { display: flex; align-items: center; gap: var(--space-6); }
nav a, .brand { display: inline-flex; align-items: center; min-height: var(--size-control); font-size: var(--type-ui); }
nav a { color: var(--color-muted); text-decoration: none; }
nav [aria-current="page"] { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; }
a { color: var(--color-accent); text-underline-offset: .22em; overflow-wrap: anywhere; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: var(--space-1); }
main { padding-block: var(--space-8); }
h1, h2, p, ul { margin: 0; }
h1 { font-size: var(--type-title); line-height: var(--leading-tight); font-weight: var(--weight-strong); margin-bottom: var(--space-4); }
h2 { font-size: var(--type-body); line-height: var(--leading-ui); font-weight: var(--weight-strong); margin-bottom: var(--space-2); }
p + p { margin-top: var(--space-3); }
section + section { margin-top: var(--space-8); }
main > p + section { margin-top: var(--space-8); }
ul { padding-left: var(--space-6); }
li + li { margin-top: var(--space-2); }
.meta { font-size: var(--type-ui); color: var(--color-muted); }
body > footer { padding-block: var(--space-6); border-top: 1px solid var(--color-line); font-size: var(--type-ui); color: var(--color-muted); }
::selection { background: var(--color-accent-soft); }
@media (max-width: 52rem) {
  body > header, main, body > footer { padding-inline: var(--space-4); }
  nav a, .brand { min-height: var(--size-touch); }
  main { padding-top: var(--space-6); }
}