/* ============================================================
   BaguaChart — Article layout system  v3 「杂志版」
   文章页共用样式（主栏正文 + 右侧粘性边注栏）
   建立 2026-09-15，v2 重排 2026-09-15（对齐基线收敛）
   v3 2026-09-15：消灭右栏空洞 —— 正文改 .spread 双栏，
                  右栏承载 At-a-glance / 术语卡 / 方位表 / 边注

   ── 对齐规范（唯一基线，改版式务必遵守）────────────────────
     视口 1440 为例，wrap 内容区 = 1068px：
       文本左基线   L = 186      ← 正文 / 标题 / 卡片文字 / 表格 / 图注 全部锚这条线
       文本栏宽        680       ← 英文衬线约 78 字符，可读性上限
       右栏         906 → 1254   ← 边注 / 卡片配图，宽 348
       视觉出血带   160 → 1280   ← 全宽图、卡片外框、表格、CTA、延伸阅读

     规则：文字一律进文本栏；图片/卡片外框用 .bleed 出血，
           出血块内部 padding 用 --wrap-pad，使文字自动落回 186。
           ⚠️ .spread 的两栏 = .article 的两栏，所以主栏文字天然落在 186。

   ── 结构约定 ──────────────────────────────────────────────
     <div class="wrap">                                   ← 1120 容器
       <div class="top-bar">…</div>
       <div class="article">                              ← 栅格：文本栏 680 + 右栏 348
         <header class="hero-head spread">                ← 左：刊头  右：At a glance 卡
           <div class="hero-main">…</div>
           <aside class="spread-side"><div class="glance">…</div></aside>
         </header>
         <figure class="fig fig--hero bleed">…</figure>    ← 出血全宽图版
         <div class="spread">                             ← 正文段 + 右侧边注
           <div class="spread-main prose">…</div>
           <aside class="spread-side"><div class="note">…</div></aside>
         </div>
         <section class="el-list bleed">…</section>        ← 出血，卡片文字自动回基线
         <div class="table-box bleed">…</div>
         <div class="cta-box bleed">…</div>
         <ul class="read-grid bleed">…</ul>
       </div>
       <footer class="footer">…</footer>
     </div>
   ────────────────────────────────────────────────────────── */

:root {
  --ink: #0d0b09;
  --paper: #1a1510;
  --paper-light: #241e17;
  --gold: #c9a050;
  --gold-bright: #e8c97a;
  --gold-pale: #f5e6c8;
  --text: #d4c8b0;
  --muted: #8a7d68;
  --dim: #6d6252;
  --border: #2e261c;
  --border-gold: #5a4828;
  --hair: rgba(90, 72, 40, 0.5);

  /* 兼容别名：老文章页的自定义组件用这几个名字引用同一套色板
     （30 篇文章页在杂志化时保留各自组件的 CSS，靠这层别名继续解析） */
  --bg: var(--ink);
  --card: var(--paper);
  --cinnabar: #b8493a;
  --jade: #86b596;
  --sky: #74a8be;

  /* 出血量：出血块用它向左右外扩，块内 padding 再用它把文字推回基线 */
  --wrap-pad: 26px;
  /* 文本栏宽 */
  --col-text: 680px;
  /* 文本栏与右栏间距 */
  --col-gap: 40px;
  /* 右栏宽（1068 - 680 - 40） */
  --col-side: 348px;
  /* 粘性边注的吸附高度 */
  --rail-top: 92px;

  /* 五行五色（深底可读性已提亮） */
  --wood: #86b596;
  --fire: #d4614f;
  --earth: #c8a24e;
  --metal: #ded7c7;
  --water: #74a8be;

  /* 字体栈 */
  --ff-serif: 'ArtSerifEN', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Songti TC', serif;
  --ff-serif-cjk: 'ArtSerifEN', 'Iowan Old Style', Palatino, Georgia, 'SerifTC', 'Songti TC', 'STSongti-TC', 'PMingLiU', serif;
  --ff-ui: 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@font-face { font-family: 'ArtSerifEN'; src: local('Iowan Old Style'), local('Palatino Linotype'), local('Palatino'), local('Book Antiqua'), local('Georgia'), local('Times New Roman'); }
@font-face { font-family: 'SerifTC'; src: local('Songti TC'), local('STSongti-TC'), local('PMingLiU'), local('Noto Serif CJK TC'), local('Songti SC'), local('SimSun'); }

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-serif);
  background: var(--ink);
  color: var(--text);
  min-height: 100vh;
  font-size: 17.5px;
  line-height: 1.85;
  /* ⚠️ 必须用 clip 而不是 hidden：overflow-x:hidden 会把 body 变成滚动容器，
     导致内部 position:sticky 的右侧边注失效（边注不再吸附） */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 老浏览器没有 overflow:clip —— 宁可牺牲边注吸附，也不能出现横向滚动条 */
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

/* 内文与图形里的 CJK 用繁体字库 */
.cjk, .el-seal, .wn-zh, .term-glyph, .pl-zh {
  font-family: 'SerifTC', 'Songti TC', 'STSongti-TC', 'PMingLiU', 'Noto Serif CJK TC', 'PingFang TC', 'Microsoft JhengHei', serif;
}
.ui,
.kicker, .hero-meta, .el-tag, .el-num, .el-facts dt, .legend, .wn-en, .callout-title,
.pull cite, .note-t, .term-rom, .note-list dt, .plate-cap, .fig-plate, .table-box th,
a.cta-btn, .nav-link, .footer-col h3 {
  font-family: var(--ff-ui);
}

/* ---------- 阅读进度条 ---------- */
/* 阅读进度条
   ⚠️ 用 transform: scaleX() 而不是 width —— 改 width 会让浏览器每帧重算布局，
      而 scaleX 只在合成器上跑，主线程零开销。
      观感完全等价：整宽的渐变被横向压缩后，可见段恰好覆盖「A→B 全渐变」，
      与原来「把元素本身做窄」看到的是同一条渐变。 */
.readbar {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--border-gold), var(--gold-bright));
  z-index: 90; opacity: .85;
}

/* ---------- 容器 ---------- */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
  padding-bottom: 72px;
}

/* ---------- 图文栅格 ---------- */
.article {
  display: grid;
  grid-template-columns: minmax(0, var(--col-text)) minmax(0, 1fr);
  column-gap: var(--col-gap);
  counter-reset: sec fig;
}
/* 默认进文本栏（左对齐到同一条基线） */
.article > * { grid-column: 1 / 2; min-width: 0; }
/* 出血块：外扩到 wrap 外边界 */
.article > .bleed {
  grid-column: 1 / -1;
  margin-left: calc(-1 * var(--wrap-pad));
  margin-right: calc(-1 * var(--wrap-pad));
}
/* 双栏块（刊头 + 正文段）：与 .article 同栅格，故主栏文字仍在 186 */
.article > .spread { grid-column: 1 / -1; }
.spread {
  display: grid;
  grid-template-columns: minmax(0, var(--col-text)) minmax(0, 1fr);
  column-gap: var(--col-gap);
  align-items: stretch;
}
.spread-main { grid-column: 1; min-width: 0; }
.spread-side { grid-column: 2; position: relative; }

/* 边注在栏内粘住：段落很长时右侧始终有一条"导读" */
.spread-side > * { position: sticky; top: var(--rail-top); }

/* ---------- 顶栏 ---------- */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 46px;
}
.logo {
  color: var(--gold-bright);
  font-family: 'SerifTC', 'Songti TC', serif;
  font-size: 18px;
  letter-spacing: 3px;
  text-decoration: none;
}
.logo:hover { color: var(--gold-pale); }
.top-bar-right { display: flex; align-items: center; gap: 22px; }
.nav-link {
  color: var(--muted);
  font-size: 13.5px;
  text-decoration: none;
  letter-spacing: .08em;
  transition: color .3s;
}
.nav-link:hover { color: var(--gold); }

/* ---------- 刊头（左标题 / 右 At a glance） ---------- */
.hero-head { margin: 0 0 48px; }
.kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.hero-head h1 {
  font-family: var(--ff-serif);
  font-size: clamp(33px, 4.6vw, 50px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--gold-pale);
  text-wrap: balance;
}
.hero-head .lead {
  font-size: 18px;
  line-height: 1.72;
  color: var(--muted);
  margin-top: 20px;
  max-width: 34em;
}
.hero-meta {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero-meta i { font-style: normal; margin: 0 10px; opacity: .45; }

/* At a glance 卡（右栏顶部，刊头的一部分） */
.glance {
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 22px 22px 20px;
  /* ⚠️ 不加 backdrop-filter：这块背后是纯色页面底（不是照片），blur 肉眼不可见，
     却要浏览器每帧做一次背景快照再模糊 —— 滚动时是纯粹的白付开销。
     用略高不透明度的渐变顶上，观感一致。 */
  background: linear-gradient(180deg, rgba(201, 160, 80, .085), rgba(20, 16, 12, .82));
}
.glance-t {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.glance ul { list-style: none; margin: 0; padding: 0; }
.glance li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--text);
  margin-bottom: 12px;
}
.glance li:last-child { margin-bottom: 0; }
.glance li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .75;
}
.glance b { color: var(--gold-pale); font-weight: 600; }
.glance .cjk { font-size: 14.5px; }

/* ---------- 图 ---------- */
.fig { margin: 0 0 54px; }
.fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--hair);
}
.fig--hero img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: 0 34px 80px -34px rgba(201, 160, 80, .22), 0 18px 44px -22px rgba(0, 0, 0, .85);
}

/* 图注：左为说明、右为图版号 —— 说明文字落在 186，编号落在 1254 */
.fig figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-top: 16px;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.65;
}
.fig figcaption .fig-cap { flex: 1 1 auto; min-width: 0; }
.fig--hero figcaption { padding: 0 var(--wrap-pad); }
.fig-plate {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .7;
  white-space: nowrap;
}

/* ---------- 正文排版 ---------- */
.prose > p { margin-bottom: 1.35em; }

.prose > p.standfirst {
  font-size: 19.5px;
  line-height: 1.72;
  color: #e3d8c1;
  margin-bottom: 1.2em;
}
/* 首字下沉 —— 杂志式开篇 */
.prose > p.standfirst::first-letter {
  float: left;
  font-family: var(--ff-serif);
  font-size: 3.35em;
  line-height: .84;
  padding: .06em .12em 0 0;
  color: var(--gold-bright);
}

.prose > h2 {
  position: relative;
  font-family: var(--ff-serif);
  font-size: clamp(23px, 3vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--gold-bright);
  margin: 60px 0 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  counter-increment: sec;
}
/* 章节之间的呼吸。
   ⚠️ 章节标题的上边距必须是 0（见下方 h2:first-child），否则主栏标题会被推下去、
      与右栏边注错位；所以间隔改由 .spread 之间的外边距承担 */
.spread + .spread { margin-top: 44px; }
.el-list + .spread { margin-top: 42px; }

/* 章节编号：与标题同一行右侧，避免单独占行造成空档 */
.prose > h2::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute;
  right: 0;
  top: 26px;
  font-family: var(--ff-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold);
  opacity: .55;
}
/* 每块的首个 h2：只去掉上外边距，保留分隔线与上内边距
   —— 于是章节细分隔线正好落在 .spread 顶边，与右栏边注的顶线同一条水平线，
      跨主栏与边注栏形成一条"行线"，整页节奏由此统一 */
.prose > h2:first-child { margin-top: 0; }
/* 首块若无 h2 打头，也要有顶部分隔 */
.spread:not(:first-child) > .spread-main > .prose > h2:first-child { margin-top: 0; }

.prose > h3 {
  font-size: 19px;
  font-weight: 500;
  color: var(--gold-pale);
  margin: 34px 0 12px;
  letter-spacing: .01em;
}

/* 普通列表（带 class 的列表如 .flow / .read-grid / .glance 不受影响） */
.prose > ul:not([class]),
.prose > ol:not([class]) { margin: 0 0 1.45em 1.15em; }
.prose > ul:not([class]) > li,
.prose > ol:not([class]) > li { margin-bottom: .55em; line-height: 1.8; }
.prose > ul:not([class]) > li::marker,
.prose > ol:not([class]) > li::marker { color: var(--gold); }

.prose strong { color: var(--gold-pale); font-weight: 600; }
.prose em { font-style: italic; color: #e6dbc4; }

/* 链接只作用于正文段落和普通列表项，避免误伤卡片/按钮 */
.prose > p a,
.prose > ul:not([class]) > li a,
.prose > ol:not([class]) > li a,
.prose .callout p a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 160, 80, .35);
  transition: color .2s, border-color .2s;
}
.prose > p a:hover,
.prose > ul:not([class]) > li a:hover,
.prose > ol:not([class]) > li a:hover,
.prose .callout p a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

/* 引言块 */
.pull {
  margin: 46px 0;
  padding: 2px 0 2px 26px;
  border-left: 2px solid var(--border-gold);
  font-family: var(--ff-serif);
  font-size: 21px;
  line-height: 1.55;
  font-style: italic;
  color: var(--gold-pale);
}
.pull cite {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* 提示框 */
.callout {
  background: linear-gradient(180deg, rgba(201, 160, 80, .07), rgba(20, 16, 12, .72));
  border: 1px solid var(--hair);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 22px 24px;
  margin: 34px 0;
  /* 背景是纯色页面底，不用 backdrop-filter：看不见效果，却每帧要做背景快照 */
}
.callout p { font-size: 16px; margin-bottom: .8em; }
.callout p:last-child { margin-bottom: 0; }
.callout .callout-title {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* ============================================================
   右栏元件：边注 / 术语卡 / 方位表 / 相关阅读
   ============================================================ */
.note {
  border-top: 1px solid var(--border-gold);
  padding-top: 14px;
}
.note-t {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.note p {
  font-size: 13.5px;
  line-height: 1.74;
  color: var(--muted);
  margin-bottom: .75em;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--text); font-weight: 600; }
.note a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 160, 80, .35);
}
.note a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

/* 术语卡：大号 CJK + 罗马字 + 释义 */
.term { border-top: 1px solid var(--border-gold); padding-top: 15px; }
.term-glyph {
  display: block;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--gold-bright);
  margin-bottom: 6px;
}
.term-rom {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 13px;
}
.term p { font-size: 13.5px; line-height: 1.74; color: var(--muted); }

/* 方位小表：元素 | 方位 */
.note-list { list-style: none; margin: 0; padding: 0; }
.note-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}
.note-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.note-list .nl-k { font-weight: 600; }
.note-list .nl-v { color: var(--muted); font-size: 12.5px; }

/* 相关阅读小卡（右栏） */
.note-links { list-style: none; margin: 0; padding: 0; }
.note-links li { margin-bottom: 11px; }
.note-links li:last-child { margin-bottom: 0; }
.note-links a {
  display: block;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(26, 21, 16, .5);
  text-decoration: none;
  font-size: 13.5px;
  color: var(--gold-pale);
  line-height: 1.45;
  transition: border-color .25s, background .25s;
}
.note-links a:hover {
  border-color: var(--border-gold);
  background: rgba(36, 30, 23, .72);
  color: var(--gold-bright);
}
.note-links span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ---------- 表格（出血全宽 + 列宽固定，保证纵向成列） ---------- */
.table-box {
  overflow-x: auto;
  margin: 44px 0 48px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(26, 21, 16, .55);
}
/* 表题行：左说明落 186、右编号落 1254 */
.plate-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 15px calc(var(--wrap-pad) - 1px) 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(20, 16, 12, .5);
}
.plate-cap .cap-t {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.6;
}
.plate-cap .fig-plate { opacity: .8; }
.table-box table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14.5px;
  min-width: 520px;
}
.table-box th, .table-box td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}
/* 首列/末列吃掉出血量（减 1px 边框），使表格文字落在 186 / 1254 基线 */
.table-box th:first-child, .table-box td:first-child {
  padding-left: calc(var(--wrap-pad) - 1px);
}
.table-box th:last-child, .table-box td:last-child {
  padding-right: calc(var(--wrap-pad) - 1px);
}
/* 5 列固定宽度比例 */
.table-box th:nth-child(1) { width: 22%; }
.table-box th:nth-child(2) { width: 19%; }
.table-box th:nth-child(3) { width: 19%; }
.table-box th:nth-child(4) { width: 22%; }
.table-box th:nth-child(5) { width: 18%; }
.table-box th {
  background: rgba(36, 30, 23, .8);
  color: var(--gold-bright);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.table-box tbody tr:last-child td { border-bottom: none; }
.table-box tbody tr { transition: background .2s; }
.table-box tbody tr:hover { background: rgba(201, 160, 80, .05); }

/* ---------- 元素卡（配图满高出血到卡片右缘） ---------- */
.el-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 46px 0 12px;
}
.el-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--col-text)) minmax(0, 1fr);
  column-gap: var(--col-gap);
  align-items: stretch;
  /* 右侧不留白：配图出血到卡片右缘。左 padding 让文字精确回到 186 */
  padding: 32px 0 32px calc(var(--wrap-pad) - 1px);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(201, 160, 80, .05), rgba(20, 16, 12, .62));
}
/* 文字固定在文本栏（左）、配图固定在右侧栏 —— 显式定位，不依赖 DOM 顺序 */
.el-card > .el-body { grid-column: 1; grid-row: 1; }
.el-card > .el-media { grid-column: 2; grid-row: 1; align-self: stretch; }
/* 细金线在卡片左缘亮起，呼应元素色 */
.el-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--el-color, var(--gold)), transparent);
  opacity: .5;
}
.el-media { position: relative; min-height: 200px; }
.el-media img {
  display: block;
  width: 100%;
  height: 100%;
  /* height 属性会当 CSS 高度用，必须显式设置，否则比例失效、图被拉伸 */
  object-fit: cover;
  border: 0;
  border-left: 1px solid var(--hair);
  border-radius: 0;
}
.el-seal {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--gold-pale);
  border: 1px solid rgba(201, 160, 80, .55);
  background: rgba(13, 11, 9, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 3px;
}
/* 卡片序号：与左上印章对角呼应 */
.el-num {
  position: absolute;
  right: 13px;
  top: 13px;
  padding: 5px 9px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--el-color, var(--gold));
  border: 1px solid rgba(201, 160, 80, .28);
  background: rgba(13, 11, 9, .58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 3px;
  line-height: 1;
}

.el-body { display: flex; flex-direction: column; }
.el-body h3 {
  font-family: var(--ff-serif);
  font-size: 29px;
  font-weight: 400;
  color: var(--gold-pale);
  margin: 0 0 10px;
  line-height: 1.2;
}
.el-body h3 small {
  font-size: 14px;
  color: var(--dim);
  letter-spacing: .12em;
  margin-left: 10px;
}
/* 小标签在标题之上（eyebrow），与正文同基线 */
.el-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--el-color, var(--gold));
  margin-bottom: 11px;
}
.el-body > p { font-size: 16.5px; line-height: 1.8; margin-bottom: 16px; }
.el-body > p strong { color: var(--gold-pale); }

.el-facts {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 10px;
  /* 关键：dt/dd 首行基线对齐，而不是靠 padding-top 硬凑 */
  align-items: baseline;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
}
.el-facts dt {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.el-facts dd { margin: 0; line-height: 1.66; }

/* 正文里给元素名上色 */
.c-wood { color: var(--wood); font-weight: 600; }
.c-fire { color: var(--fire); font-weight: 600; }
.c-earth { color: var(--earth); font-weight: 600; }
.c-metal { color: var(--metal); font-weight: 600; }
.c-water { color: var(--water); font-weight: 600; }
th .c-wood, th .c-fire, th .c-earth, th .c-metal, th .c-water { font-weight: 600; }

/* ---------- 相生 / 相剋 关系列表（箭头成一条竖线） ---------- */
.flow {
  list-style: none;
  margin: 30px 0 34px;
  padding: 0;
  border-top: 1px solid var(--border);
}
.flow li {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  column-gap: 28px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
/* 三列：元素名 | 箭头 | 元素名 —— 5 行的箭头全部落在同一竖线 */
.flow-pair {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items: baseline;
  font-size: 16px;
}
.flow-pair b:first-child { text-align: right; }
.flow-pair b:last-child { text-align: left; }
.flow-ar {
  color: var(--dim);
  font-family: var(--ff-serif);
  text-align: center;
  line-height: 1;
}
.flow-note { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ---------- 五行循环图（左对齐到文本基线，做成"图版"） ---------- */
.wx-fig { max-width: 620px; margin: 42px 0 4px; }
.wx-svg { width: 100%; height: auto; display: block; }
.wx-orbit { fill: none; stroke: rgba(90, 72, 40, .38); stroke-width: 1; stroke-dasharray: 2 7; }
.arc-gen { stroke: var(--gold); stroke-width: 1.6; }
.arc-kee { stroke: #b8493a; stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .9; }
.wn-disc { fill: rgba(20, 16, 12, .92); stroke: rgba(90, 72, 40, .75); stroke-width: 1; }
.wn-zh { font-size: 27px; }
.wn-zh--wood { fill: var(--wood); }
.wn-zh--fire { fill: var(--fire); }
.wn-zh--earth { fill: var(--earth); }
.wn-zh--metal { fill: var(--metal); }
.wn-zh--water { fill: var(--water); }
.wn-en {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  fill: var(--muted);
}
.legend {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 16px 0 0;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.legend i {
  display: inline-block;
  width: 26px;
  height: 0;
  border-top: 2px solid var(--gold);
  vertical-align: middle;
  margin-right: 9px;
}
.legend i.is-dash { border-top: 2px dashed #b8493a; }
/* 图版内的图注也走"左说明 / 右编号" */
.wx-fig figcaption { margin-top: 14px; font-size: 13px; font-style: italic; color: var(--muted); line-height: 1.65; }

/* ---------- 通用图版（自动 SVG 纹样，可播"金线自绘"） ----------
   与 .wx-fig 同规格：左对齐到文本基线，做成"图版"而非居中插画。
   图注统一为 .fig style="display:flex" 结构，故这里只给外框几何。
   ⚠️ 颜色一律在 SVG 元素上用 style="fill:var()" —— 表现属性（fill="var(--x)"）不合法
   图版的 viewBox 在转换时按实测内容外框收紧过，所以这里用宽高比给三档限宽：
     .plate--wide 横幅（时间轴 / 条形 / 矩阵）→ 用满文本栏
     .plate--tall 竖幅（太極 / 单柱）→ 收窄，否则会长成一整屏 */
.plate { max-width: 620px; margin: 42px 0 4px; }
.plate--wide { max-width: none; }
.plate--tall { max-width: 452px; }
.plate svg { width: 100%; height: auto; display: block; overflow: visible; }
/* 图注与 .fig 同构：左说明 / 右图版号，两端对齐到同一基线 */
.plate figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-top: 14px;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.65;
}
.plate figcaption .fig-cap { flex: 1 1 auto; min-width: 0; }

/* 参考线：细金环 / 轨道（静态，不参与自绘）
   ⚠️ 原来是 rgba(90,72,40,.38) —— 与 #0d0d0d 底色的亮度差只有十几级，
   r=196 的金环实测 557px 直径却几乎看不见，图版于是显得"内容只有中间一小块"。
   改走金调并把不透明度提到 .34，环才真正承担起撑住图版的作用。 */
.pl-ring { fill: none; stroke: rgba(201, 160, 80, .34); stroke-width: 1; }
.pl-ring--dash { stroke-dasharray: 2 7; }
.pl-ring--solid { stroke: rgba(201, 160, 80, .5); }
/* 需要"描线"的实线：JS 用 getTotalLength() 做 dashoffset 动画 */
.pl-draw { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.pl-draw--faint { stroke: rgba(201, 160, 80, .45); stroke-width: 1; }
/* 虚线（相剋/对立关系）：dasharray 已被占用，不能用 dashoffset → 只淡入 */
.pl-dash { fill: none; stroke: #b8493a; stroke-width: 1.3; stroke-dasharray: 5 5; opacity: .9; }
.pl-tick { fill: none; stroke: rgba(120, 100, 62, .7); stroke-width: 1; }
.pl-dot { fill: rgba(20, 16, 12, .92); stroke: rgba(90, 72, 40, .75); stroke-width: 1; }
/* 太極双鱼眼：一实一虚，但两边视觉重量要相当 —— 虚的那只必须给足描边，
   否则实心金饼 vs 1px 细线，看着像漏画了一半 */
.pl-eye--yang { fill: var(--gold-bright); stroke: none; opacity: .9; }
.pl-eye--yin { fill: var(--bg); stroke: rgba(201, 160, 80, .7); stroke-width: 1.8; }
/* 太极两眼之间的细虚线（表达「两态只在与对方的关系中存在」） */
.pl-thread { fill: none; stroke: rgba(201, 160, 80, .5); stroke-width: 1; stroke-dasharray: 3 4; }
.pl-cell { fill: rgba(201, 160, 80, .07); stroke: var(--border); stroke-width: 1; }
.pl-cell--on { fill: rgba(201, 160, 80, .2); }
.pl-bar { fill: rgba(201, 160, 80, .34); }
/* 版内文字 */
.pl-zh { font-size: 24px; fill: var(--gold-pale); text-anchor: middle; }
.pl-zh--sm { font-size: 16px; fill: var(--muted); }
.pl-en { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; fill: var(--muted); text-anchor: middle; }
.pl-num { font-family: var(--ff-ui); font-size: 10px; letter-spacing: .14em; fill: var(--dim); text-anchor: middle; }
.plink { fill: none; stroke: rgba(90, 72, 40, .55); stroke-width: 1; }

/* ---------- 章节大标题行（出血：标题落 186、右侧小注落 1254） ---------- */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px var(--wrap-pad) 0;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
}
.sec-head h2 {
  font-family: var(--ff-serif);
  font-size: clamp(23px, 3vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--gold-bright);
}
.sec-note {
  flex: 0 0 auto;
  font-family: var(--ff-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

/* ---------- 延伸阅读卡片（出血 4 列） ---------- */
.read-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  margin: 26px 0 10px;
  padding: 0;
  list-style: none;
}
.read-grid li { margin: 0; }
.read-grid a {
  display: block;
  height: 100%;
  /* 26px = --wrap-pad：卡内文字正好落在 186 / 1254 基线 */
  padding: 20px 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(26, 21, 16, .45);
  text-decoration: none;
  transition: border-color .25s, transform .25s, background .25s;
}
.read-grid a:hover {
  border-color: var(--border-gold);
  background: rgba(36, 30, 23, .6);
  transform: translateY(-2px);
}
.read-grid .read-t {
  display: block;
  font-size: 16px;
  color: var(--gold-pale);
  margin-bottom: 6px;
  line-height: 1.4;
}
.read-grid .read-d {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- CTA ---------- */
.cta-box {
  background: linear-gradient(180deg, rgba(201, 160, 80, .08), rgba(20, 16, 12, .78));
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 40px 32px;
  margin: 52px 0 56px;
  text-align: center;
  /* 背景是纯色页面底，不用 backdrop-filter：看不见效果，却每帧要做背景快照 */
}
.cta-box h3 {
  font-family: var(--ff-serif);
  font-size: 25px;
  font-weight: 400;
  color: var(--gold-pale);
  margin: 0 0 10px;
}
.cta-box p { color: var(--muted); font-size: 15.5px; margin-bottom: 26px; }
a.cta-btn {
  display: inline-block;
  background: transparent;
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  padding: 13px 36px;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background .3s, color .3s;
  /* letter-spacing 会在末字后补空隙 → 用等量 padding-left 把墨迹推回居中 */
  padding-left: calc(36px + .26em);
}
a.cta-btn:hover { background: rgba(201, 160, 80, .16); color: var(--gold-pale); }

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding-top: 34px;
  margin-top: 68px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.footer-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 52px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.footer-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.footer-col h3 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
  margin: 0 0 8px;
  font-weight: 600;
  /* 居中排版 + letter-spacing：末尾空隙会让墨迹偏左，补等量左侧内边距 */
  padding-left: .18em;
}
.footer-col a { color: var(--muted); text-decoration: none; font-size: 13px; line-height: 1.85; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { margin-top: 4px; }
.footer-bottom a { color: var(--muted); text-decoration: none; margin: 0 6px; }
.footer-bottom a:hover { color: var(--gold); }
.footer-copy { margin-top: 12px; color: var(--dim); font-size: 12.5px; }

/* ---------- 兼容旧标记（尚未改版的老文章页仍可用） ---------- */
.container { max-width: 720px; margin: 0 auto; padding: 0 20px 60px; }
.content h2 { font-family: var(--ff-serif); font-size: 25px; color: var(--gold-bright); margin: 42px 0 18px; font-weight: 400; }
.content h3 { font-size: 18px; color: var(--gold-pale); margin: 28px 0 12px; font-weight: 500; }
.content p { margin-bottom: 16px; }
.content ul, .content ol { margin: 0 0 18px 22px; }
.content a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201, 160, 80, .35); }
.ornament { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 28px 0; }
.ornament span { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--border-gold), transparent); }
.ornament .diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); opacity: .5; }

/* ---------- 响应式 ---------- */
/* 单栏：主栏与右栏合并，边注落到正文之后 */
@media (max-width: 900px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .article > *,
  .article > .bleed,
  .article > .spread { grid-column: 1 / -1; }
  /* 单栏下不再出血：出血会让卡片贴到屏幕边缘、失去留白 */
  .article > .bleed { margin-left: 0; margin-right: 0; }
  .spread { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .spread-main, .spread-side { grid-column: 1; }
  .spread-side > * { position: static; }
  /* 边注改成整幅横条，别再挤在窄栏里 */
  .note, .term { padding-top: 16px; }
  .note-list li { font-size: 13.5px; }
  .fig--hero figcaption { padding: 0; }
  .table-box th:first-child, .table-box td:first-child,
  .plate-cap { padding-left: 18px; }
  .table-box th:last-child, .table-box td:last-child,
  .plate-cap { padding-right: 18px; }
  /* 配图回到卡片内缩，图在上、文字在下 */
  .el-card { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 0 0 26px; }
  .el-card > .el-media { grid-column: 1; grid-row: 1; min-height: 0; }
  .el-card > .el-body { grid-column: 1; grid-row: 2; padding: 24px 20px 0; }
  .el-media { max-width: none; width: 100%; height: auto; }
  .el-media img { height: auto; aspect-ratio: 16 / 10; border-left: 0; border-bottom: 1px solid var(--hair); }
  .el-body h3 { font-size: 25px; }
  .el-facts { margin-top: 18px; }
  .flow li { grid-template-columns: 172px minmax(0, 1fr); column-gap: 20px; }
  /* 刊头 At a glance 挪到标题下方，并取消粘性 */
  .hero-head .spread-side { margin-top: 30px; }
}

@media (max-width: 700px) {
  :root { --wrap-pad: 18px; --col-gap: 22px; }
  body { font-size: 16.5px; }
  .wrap { padding-bottom: 56px; }
  .hero-head { margin-bottom: 34px; }
  .spread + .spread, .el-list + .spread { margin-top: 34px; }
  .hero-head h1 { font-size: clamp(28px, 8.6vw, 37px); }
  .hero-head .lead { font-size: 16.5px; }
  .prose > p.standfirst { font-size: 18px; }
  .prose > h2 { margin: 46px 0 18px; padding-top: 18px; }
  .prose > h2::before { top: 22px; }
  .fig--hero img { aspect-ratio: 4 / 3; }
  .fig figcaption { flex-direction: column; gap: 8px; }
  .sec-head { flex-direction: column; gap: 8px; padding: 18px var(--wrap-pad) 0; }
  .sec-note { white-space: normal; }
  .pull { font-size: 18.5px; padding-left: 18px; }
  .flow li { grid-template-columns: minmax(0, 1fr); row-gap: 5px; }
  .flow-pair { grid-template-columns: 84px 24px 84px; font-size: 15.5px; }
  .flow-pair b:first-child { text-align: left; }
  /* 窄屏字段表改为上下堆叠：并排两列会把内容挤成每行一个词 */
  .el-facts { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
  .el-facts dt { margin-top: 11px; }
  .el-facts dt:first-of-type { margin-top: 0; }
  .wx-fig { max-width: 100%; }
  .plate { max-width: 100%; }
  /* SVG 内字号按 viewBox 单位，窄屏整体缩放后需放大才可读 */
  .wn-zh { font-size: 32px; }
  .wn-en { font-size: 15px; letter-spacing: .16em; }
  .pl-zh { font-size: 30px; }
  .pl-en, .pl-num { font-size: 14px; }
  .term-glyph { font-size: 32px; }
  .cta-box { padding: 32px 22px; }
  .footer-grid { gap: 28px; }
  .top-bar { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .top-bar-right { gap: 16px; }
  a.cta-btn { padding: 12px 26px; padding-left: calc(26px + .26em); }
  .table-box table { min-width: 460px; }
  .read-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 尊重系统"减弱动态效果"偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .read-grid a:hover { transform: none; }
}