/* ============================================
   绿水青山就是金山银山 · 东方水墨风格
   设计 token & 全局样式
============================================ */

:root {
  /* 色彩 - 晨光模式（默认） */
  --paper: oklch(0.975 0.010 85);          /* 宣纸底 */
  --paper-deep: oklch(0.945 0.014 80);     /* 深一档纸色 */
  --paper-soft: oklch(0.96 0.012 82);      /* 卡片底 */
  --ink: oklch(0.22 0.015 220);            /* 浓墨 */
  --ink-soft: oklch(0.38 0.012 220);       /* 中墨 */
  --ink-faint: oklch(0.62 0.008 220);      /* 淡墨/辅助文字 */
  --line: oklch(0.85 0.010 85);            /* 细分隔线 */
  --line-soft: oklch(0.91 0.010 85);

  /* 强调色（青山绿 默认） */
  --accent: oklch(0.42 0.08 155);
  --accent-soft: oklch(0.55 0.06 155);
  --accent-bg: oklch(0.93 0.025 155);
  --seal: oklch(0.50 0.13 30);             /* 朱砂印 */

  /* 字体 */
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --latin-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* 节奏 */
  --max-w: 720px;
  --max-w-wide: 1080px;
  --section-gap: clamp(120px, 18vw, 220px);

  /* 缓动 */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-strong: cubic-bezier(0.65, 0, 0.35, 1);
}

/* 暮色模式 */
[data-theme="dusk"] {
  --paper: oklch(0.92 0.025 55);
  --paper-deep: oklch(0.88 0.030 50);
  --paper-soft: oklch(0.90 0.028 55);
  --ink: oklch(0.28 0.040 35);
  --ink-soft: oklch(0.42 0.030 35);
  --ink-faint: oklch(0.60 0.020 40);
  --line: oklch(0.78 0.030 55);
  --line-soft: oklch(0.85 0.028 55);
}

/* 夜山模式 */
[data-theme="night"] {
  --paper: oklch(0.20 0.020 240);
  --paper-deep: oklch(0.16 0.022 240);
  --paper-soft: oklch(0.24 0.022 240);
  --ink: oklch(0.92 0.012 80);
  --ink-soft: oklch(0.78 0.014 80);
  --ink-faint: oklch(0.58 0.014 80);
  --line: oklch(0.32 0.020 240);
  --line-soft: oklch(0.27 0.020 240);
  --accent-bg: oklch(0.28 0.040 155);
}

/* 强调色变体 */
[data-accent="blue"] {
  --accent: oklch(0.45 0.07 235);
  --accent-soft: oklch(0.58 0.05 235);
  --accent-bg: oklch(0.93 0.025 235);
}
[data-theme="night"][data-accent="blue"] { --accent-bg: oklch(0.28 0.045 235); }

[data-accent="vermilion"] {
  --accent: oklch(0.52 0.13 30);
  --accent-soft: oklch(0.62 0.10 30);
  --accent-bg: oklch(0.94 0.028 30);
}
[data-theme="night"][data-accent="vermilion"] { --accent-bg: oklch(0.30 0.060 30); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.85;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.6s var(--ease-soft), color 0.6s var(--ease-soft);
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--paper); }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

/* ============ 排版 ============ */
.serif { font-family: var(--serif); }
.sans { font-family: var(--sans); }
.latin { font-family: var(--latin-serif); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--ink);
}

p { text-wrap: pretty; }

/* ============ 工具 ============ */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}
.container-wide {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 28px;
}

.section {
  padding: var(--section-gap) 0;
  position: relative;
}

/* 章节标号 / 印章 */
.chapter-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--latin-serif);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.chapter-mark .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--seal);
  color: var(--seal);
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 500;
  position: relative;
  background: transparent;
}
.chapter-mark .num::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--seal);
  opacity: 0.4;
}

.chapter-title {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
  line-height: 1.25;
}

.chapter-lede {
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 56px;
  line-height: 1.9;
  max-width: 620px;
}

/* 古训引语 */
.epigraph {
  font-family: var(--serif);
  text-align: center;
  margin: 80px auto 64px;
  max-width: 560px;
  color: var(--ink-soft);
}
.epigraph .quote {
  font-size: 22px;
  line-height: 2.1;
  letter-spacing: 0.12em;
  font-weight: 400;
}
.epigraph .source {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--ink-faint);
  font-family: var(--latin-serif);
}
.epigraph .source::before, .epigraph .source::after {
  content: "—— ";
  letter-spacing: 0;
}
.epigraph .source::after { content: " ——"; }

/* 水墨细线分隔 */
.ink-divider {
  display: block;
  margin: 0 auto;
  width: 60%;
  max-width: 320px;
  height: 24px;
  opacity: 0.35;
  color: var(--ink-soft);
}

/* 段落 */
.prose p {
  font-size: 17px;
  line-height: 2.0;
  color: var(--ink);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
}
.prose p .lift {
  color: var(--accent);
  font-weight: 500;
}

/* 滚动出现 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* 链接装饰 */
.inline-link {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  transition: color 0.3s, border-color 0.3s;
}
.inline-link:hover {
  color: var(--seal);
}

/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }