:root {
  color-scheme: light dark;
  --ink: #19202a;
  --muted: #5c6470;
  --paper: #fffdf8;
  --accent: #765d81;
  --line: #e8e2d7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
}

main { max-width: 760px; margin: 0 auto; padding: 72px 28px 48px; }
.brand { color: var(--accent); font-weight: 760; text-decoration: none; letter-spacing: .02em; }
.eyebrow { margin: 44px 0 8px; color: var(--accent); font-size: .9rem; font-weight: 700; letter-spacing: .14em; }
h1 { margin: 0; max-width: 690px; font-size: clamp(2rem, 7vw, 3.9rem); letter-spacing: -.04em; line-height: 1.14; }
h2 { margin: 0 0 12px; font-size: 1.2rem; letter-spacing: -.02em; }
.lede { margin: 22px 0 42px; max-width: 620px; color: var(--muted); font-size: 1.1rem; }
section { padding: 27px 0; border-top: 1px solid var(--line); }
p { margin: 0 0 14px; }
ul, ol { margin: 0; padding-left: 1.4em; }
a { color: var(--accent); text-underline-offset: 3px; }
.footer { margin-top: 42px; color: var(--muted); font-size: .9rem; }

@media (prefers-color-scheme: dark) {
  :root { --ink: #f2eee7; --muted: #c7c0b6; --paper: #161618; --accent: #ddbedc; --line: #393634; }
}