:root {
  color-scheme: light;
  --ink: #2f2921;
  --muted: #736759;
  --paper: #fffaf0;
  --surface: #fffdf8;
  --line: #e6d5bb;
  --accent: #8a5a2b;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Serif SC", "Songti SC", Georgia, serif; line-height: 1.75; }
a { color: var(--accent); text-underline-offset: .18em; }
.seo-header, .seo-footer, .seo-main { width: min(100% - 32px, 920px); margin-inline: auto; }
.seo-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.seo-brand img { display: block; width: 190px; height: auto; }
.seo-header nav { display: flex; flex-wrap: wrap; gap: 18px; font-family: system-ui, sans-serif; font-size: .92rem; }
.seo-main { padding-block: 28px 64px; }
.seo-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-family: system-ui, sans-serif; font-size: .86rem; }
.seo-hero { padding: clamp(28px, 6vw, 64px) 0; border-bottom: 1px solid var(--line); }
.seo-eyebrow { color: var(--accent); font-family: system-ui, sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 18em; margin: .2em 0; font-size: clamp(2rem, 6vw, 4rem); line-height: 1.15; }
h2 { margin-top: 2em; line-height: 1.35; }
.seo-primary { display: inline-block; margin-top: 16px; padding: 10px 18px; border-radius: 999px; color: #fff; background: var(--accent); font-family: system-ui, sans-serif; font-weight: 650; text-decoration: none; }
.seo-plan-list, .seo-book-list, .seo-reading-list { padding: 0; list-style: none; }
.seo-plan-list li, .seo-book-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.seo-plan-list li > a, .seo-plan-list li > span, .seo-book-list strong { margin-right: 12px; font-weight: 700; }
.seo-plan-list small, .seo-book-list span { color: var(--muted); }
.seo-plan-list p { margin: 4px 0 0; color: var(--muted); font-size: .94rem; }
.seo-book-list div, .seo-related div, .seo-chapter-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.seo-prose { max-width: 740px; margin-top: 42px; font-size: 1.05rem; }
.seo-prose p { margin: 1.2em 0; }
.seo-prose h3 { margin-top: 1.5em; }
.seo-prose ul, .seo-prose ol { margin: 1.2em 0; padding-left: 1.5em; }
.seo-prose li + li { margin-top: .45em; }
.seo-rights-note, .seo-related { padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--surface); color: var(--muted); }
.seo-footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
@media (max-width: 640px) {
  .seo-header, .seo-footer { align-items: flex-start; flex-direction: column; padding-block: 18px; }
  .seo-brand img { width: 160px; }
}