@font-face { font-family: 'Paper Serif'; src: url('assets/serif-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paper Serif'; src: url('assets/serif-700.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
:root {
  color-scheme: light;
  --desk: #e8e5de; --paper: #f6f2e8; --ink: #252a27; --muted: #67675d;
  --rule: #a7a598; --faint: #d7d1c3; --accent: #a74432; --inset: #eee8da; --forest: #415b49;
  --highlight: #efe0a7; --warning-paper: #f3e6dd;
  --serif: 'Paper Serif', 'Songti SC', 'STSong', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;
  --mast: 64px; --headline: 64px; --section: 28px; --minor: 22px;
  --body: 16px; --deck: 18px; --meta: 12px; --action: 14px;
  --feature: 36px; --stat: 40px; --wide-track: .08em;
  --news-headline: 52px; --diagram-height: 184px; --line-width: 2px;
  --shell: 1160px; --gutter: var(--s10); --target: 44px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--s6); }
body { margin: 0; color: var(--ink); background: var(--desk); font-family: var(--sans); font-size: var(--body); }
::selection { color: var(--paper); background: var(--accent); }
a { color: inherit; text-underline-offset: var(--s1); }
a:hover, summary:hover { color: var(--accent); }
a:active, summary:active { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--s1); }
p, h1, h2, h3, figure, blockquote { margin: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p { text-wrap: pretty; }
img { display: block; width: 100%; height: auto; }
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.kicker { color: var(--accent); font-size: var(--meta); letter-spacing: .12em; line-height: 1.6; font-weight: 600; }
.label { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5); }
.label > span:last-child { color: var(--muted); font-family: var(--mono); font-size: var(--meta); letter-spacing: 0; font-weight: 400; }
.action { display: inline-flex; align-items: center; gap: var(--s3); min-height: var(--target); font-size: var(--action); }
.prose { font-family: var(--serif); font-size: var(--body); line-height: 1.95; }
.prose p + p { margin-top: var(--s4); }
.column-heading { font-family: var(--serif); font-size: var(--minor); line-height: 1.5; margin-bottom: var(--s4); }
.photo-note { border-top: 1px solid var(--rule); margin-top: var(--s2); font-size: var(--meta); }
.photo-note summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--target); cursor: pointer; list-style: none; font-size: var(--action); }
.photo-note summary::-webkit-details-marker { display: none; }
.photo-note summary::after { content: '+'; font-family: var(--mono); font-size: var(--minor); }
.photo-note[open] summary::after { content: '−'; }
.photo-note p { font-family: var(--serif); font-size: var(--body); line-height: 1.9; padding: var(--s3) 0 var(--s5); }
.classified { border: 1px dashed var(--muted); padding: var(--s6); }
.classified h3 { font-family: var(--serif); font-size: var(--section); line-height: 1.5; margin: var(--s4) 0; }
.classified p { font-size: var(--action); line-height: 1.9; }
.quotation { font-family: var(--serif); font-size: var(--minor); line-height: 1.65; }
.quotation cite { display: block; margin-top: var(--s4); color: var(--muted); font-family: var(--sans); font-style: normal; font-size: var(--meta); }
.skip { position: absolute; left: var(--s4); top: var(--s4); padding: var(--s4); background: var(--paper); transform: translateY(-200%); z-index: 3; }
.skip:focus { transform: none; }
@media (max-width: 1000px) { :root { --mast: 56px; --headline: 48px; --news-headline: 40px; --gutter: var(--s8); } }
@media (max-width: 680px) { :root { --mast: 44px; --headline: 36px; --news-headline: 32px; --feature: 28px; --gutter: var(--s5); } }