/* ============================================================
   base.css — 明朝课程全站基础样式（v4 · 生动国风亮色）
   背景：用户定调「中式古风、颜色生动、不一定要很有古韵，
         重点是有意思」——从暗金古籍调转为亮宣纸 + 朱红/翠青/
         藤黄/黛蓝的国风亮色。
   设计意图：令牌一处定义（亮宣纸底、朱红主强调、翠青辅助、
             藤黄荧光笔、老金线条），各页只叠布局样式。
   约束：图标一律内联 SVG（禁 emoji）；正文黑体系 ≥14.5px、
         行高 ≥1.75；荧光笔 = 藤黄淡底 + 深字加粗；纹样低对比度。
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 色板：亮宣纸 / 朱红 / 翠青 / 藤黄 / 黛蓝 / 老金 */
  --paper: #f7f1e3;           /* 页面底：亮宣纸 */
  --paper-2: #fdf8ec;         /* 卡片面：更亮一档 */
  --paper-3: #f0e7d0;         /* 沉降面 */
  --ink: #3a2f24;             /* 正文墨色 */
  --ink-soft: #85765a;        /* 次级文字 */
  --zhu: #c8402f;             /* 主强调：朱红 */
  --zhu-deep: #a8341f;        /* 深朱（hover） */
  --zhu-mist: rgba(200, 64, 47, 0.12);
  --qing: #2f7f6f;            /* 辅助：翠青 */
  --qing-mist: rgba(47, 127, 111, 0.14);
  --huang: #dfa42e;           /* 点缀：藤黄（荧光笔/高亮数字） */
  --huang-mist: rgba(223, 164, 46, 0.28);
  --dian: #33587a;            /* 辅助：黛蓝（链接/西语轨） */
  --gold: #b8862b;            /* 老金：细线、边框 */
  --line: rgba(58, 47, 36, 0.2);
  --line-dim: rgba(58, 47, 36, 0.11);

  /* 排版：标题衬线（国风），正文黑体（可读） */
  --font-serif: Georgia, "Noto Serif SC", "Source Han Serif SC",
                "Songti SC", STSong, "Times New Roman", serif;
  --font-sans: "PingFang SC", "Source Han Sans SC", "Noto Sans SC",
               -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-body: 15.5px;
  --fs-sm: 14.5px;
  --fs-md: 17px;
  --fs-lg: 21px;
  --fs-xl: 30px;
  --fs-hero: clamp(46px, 8vw, 84px);

  --lh: 1.78;
  --sp: 8px;
  --radius: 10px;

  /* 明代纹样（SVG 平铺，淡墨线；底纹图待生成亮色版后可再挂） */
  --pattern-lotus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%233a2f24' stroke-opacity='.045' stroke-width='1.3'%3E%3Cpath d='M0 62 C28 30 52 94 78 62 S108 30 120 46'/%3E%3Cpath d='M62 0 C30 28 94 52 62 78 S30 108 46 120'/%3E%3Ccircle cx='78' cy='62' r='3.2'/%3E%3Ccircle cx='62' cy='78' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-hui: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 8h14V4H6v12h12v-8h6' fill='none' stroke='%23b8862b' stroke-opacity='.35' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- 基础排版 ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--pattern-lotus); /* 淡墨缠枝莲 */
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.3;
  margin: 0 0 calc(var(--sp) * 2);
  font-weight: 700;
  color: var(--ink);
}
p { margin: 0 0 calc(var(--sp) * 2); }
a { color: var(--dian); text-decoration: none; }
a:hover { color: var(--zhu); }

/* 荧光笔式高亮：藤黄淡底 + 深字加粗（真正的荧光笔） */
.hl {
  font-weight: 700;
  background: var(--huang-mist);
  padding: 0 .3em;
  border-radius: 3px;
}
.hl-red { background: var(--zhu-mist); }

/* 关键数字：大号等宽 + 朱红 */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--zhu);
  letter-spacing: -0.01em;
}

/* 印章（朱砂方章） */
.seal {
  display: inline-grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  background: var(--zhu);
  color: #fff8ea;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: .55em;
  line-height: 1.2;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 248, 234, 0.4);
  vertical-align: middle;
  text-align: center;
}

/* SVG 图标（sprite 引用） */
.icon {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
  flex: none;
}

/* 回纹分隔饰带 */
.divider-hui {
  height: 24px;
  background-image: var(--pattern-hui);
  background-repeat: repeat-x;
  background-position: center;
  margin: calc(var(--sp) * 5) 0;
}

/* 站内横幅插画 */
.lesson-banner {
  margin: 0 0 calc(var(--sp) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(120, 60, 30, 0.14);
}
.lesson-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 页头 ---------- */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp);
  padding: calc(var(--sp) * 2.5) calc(var(--sp) * 4);
  border-bottom: 1px solid var(--line-dim);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: calc(var(--sp) * 1.2);
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
}
.brand .icon { width: 1.5em; height: 1.5em; color: var(--zhu); }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font: inherit;
  font-weight: 600;
  color: var(--dian);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .35em 1em;
  cursor: pointer;
}
.lang-btn:hover { background: var(--qing-mist); color: var(--qing); }

/* ---------- 首页 Hero ---------- */
main { max-width: 1060px; margin: 0 auto; padding: 0 calc(var(--sp) * 4); }

.hero {
  position: relative;
  margin: 0 calc(var(--sp) * -4);
  min-height: 76vh;
  display: grid;
  align-content: end;
  padding: calc(var(--sp) * 8) calc(var(--sp) * 5) calc(var(--sp) * 7);
  background-image:
    linear-gradient(180deg, rgba(58, 47, 36, 0.06) 0%, rgba(58, 47, 36, 0.34) 55%, rgba(58, 47, 36, 0.82) 100%),
    url("../img/hero-bg2.jpg");
  background-size: cover;
  background-position: center 38%;
  border-bottom: 3px solid var(--zhu);
}
.hero-copy { position: relative; max-width: 620px; }
.eyebrow {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .18em;
  color: #fff0c8;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: calc(var(--sp) * 1.5);
}
.eyebrow::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 2px;
  background: rgba(255, 240, 200, 0.5);
}
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: .06em;
  margin: calc(var(--sp) * 2) 0 var(--sp);
  color: #fff8ea;
  text-shadow: 0 2px 22px rgba(45, 30, 15, 0.65);
}
.hero-sub {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: #ffe9b0;
  font-weight: 600;
  letter-spacing: .08em;
}
.hook {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.6;
  margin-top: calc(var(--sp) * 3);
  color: #fff8ea;
}
.hook .hl { background: rgba(223, 164, 46, 0.55); color: #fff8ea; }
.hook-sub { color: rgba(255, 248, 234, 0.88); max-width: 560px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sp) * 1.5);
  margin-top: calc(var(--sp) * 3.5);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  padding: .75em 1.5em;
  border-radius: var(--radius);
  border: 2px solid var(--zhu);
  color: var(--zhu);
  background: rgba(255, 248, 234, 0.85);
}
.btn:hover { background: var(--zhu-mist); color: var(--zhu-deep); }
.btn-primary {
  background: var(--zhu);
  color: #fff8ea;
}
.btn-primary:hover { background: var(--zhu-deep); color: #fff8ea; }

/* ---------- 教材目录（三编八章） ---------- */
.toc { padding: calc(var(--sp) * 4) 0 calc(var(--sp) * 6); }
.toc > h2 { font-size: var(--fs-xl); }
.toc-sub { color: var(--ink-soft); max-width: 640px; margin-top: calc(var(--sp) * -1); }
.toc-part { margin-top: calc(var(--sp) * 4); }
.toc-part > h3 {
  font-size: var(--fs-md);
  display: flex;
  align-items: baseline;
  gap: calc(var(--sp) * 1.5);
  color: var(--zhu);
  letter-spacing: .08em;
  border-bottom: 2px solid var(--zhu-mist);
  padding-bottom: calc(var(--sp) * 1.2);
}
.toc-part > h3 .num { font-size: var(--fs-lg); color: var(--huang); }
.toc-ch {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: calc(var(--sp) * 2.5);
  align-items: center;
  padding: calc(var(--sp) * 2.2) calc(var(--sp) * 1);
  border-bottom: 1px solid var(--line-dim);
  color: var(--ink);
  transition: background-color .15s ease;
}
a.toc-ch:hover { background: var(--zhu-mist); color: var(--ink); }
.toc-ch .ch-no {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--zhu);
  min-width: 1.6em;
  line-height: 1;
}
.toc-ch.wip { opacity: .55; }
.toc-ch.wip .ch-no { color: var(--ink-soft); }
.toc-ch h4 {
  font-size: var(--fs-md);
  margin: 0 0 calc(var(--sp) * 0.6);
  display: flex;
  align-items: center;
  gap: calc(var(--sp) * 1.5);
  flex-wrap: wrap;
}
.ch-secs { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.ch-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff8ea;
  background: var(--qing);
  border-radius: 999px;
  padding: .1em .7em;
}
.toc-ch.read .ch-no { color: var(--qing); }
.ch-arrow { color: var(--zhu); }
.wip-tag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .toc-ch { grid-template-columns: auto 1fr; }
  .ch-arrow, .wip-tag { display: none; }
}

/* ---------- 页脚（海水江崖 · 翠青+朱红） ---------- */
.site-foot { margin-top: calc(var(--sp) * 4); }
.haishui {
  display: block;
  width: 100%;
  height: 96px;
}
.haishui .cliff { fill: var(--qing); }
.haishui .wave { stroke: var(--qing); fill: none; stroke-width: 1.8; }
.foot-line {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  padding: calc(var(--sp) * 2) calc(var(--sp) * 3) calc(var(--sp) * 4);
  margin: 0;
  border-top: 1px solid var(--line-dim);
}

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
  .hero { min-height: 68vh; padding: calc(var(--sp) * 6) calc(var(--sp) * 3); }
  main { padding: 0 calc(var(--sp) * 3); }
  .hero { margin: 0 calc(var(--sp) * -3); }
  .site-head { padding: calc(var(--sp) * 2); }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}