/* ============================================================
   祭侄文稿式静态站
   一夜（首页）· 一日（阅读页）
   ============================================================ */

/* ---- 重置 ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-weight: 400;
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   首页：夜
   ============================================================ */
body.home {
  background: #1a1714;
  color: #d8cfc1;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(42, 38, 34, 0) 0%, rgba(15, 13, 11, 0.6) 100%),
    radial-gradient(rgba(90, 80, 70, 0.18) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px;
}

.home-meta { display: none; }
.home-sub { display: none; }
.home-range { display: none; }

.home-foot {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #4a4036;
  font-family: "EB Garamond", "Noto Serif SC", serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  opacity: 0;
  animation: fade-in 3s 5s ease forwards;
}
@keyframes fade-in {
  to { opacity: 1; }
}

/* ---- 画布 ---- */
.canvas {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage {
  position: relative;
  width: min(92vw, 880px);
  height: min(85vh, 800px);
  aspect-ratio: 1000 / 900;
}
.wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- 节点（漂浮名字，不是卡片） ---- */
.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  padding: 0;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  /* 由 JS 每帧叠加 translate 形成漂浮 */
  transition: none;
  will-change: transform;
}
.node-name {
  font-family: "Noto Serif SC", serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  color: #d8cfbd;
  transition: color 1.2s ease, text-shadow 1.2s ease;
}
.node-life {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 11px;
  color: #6b5b48;
  letter-spacing: 0.14em;
  padding-top: 6px;
  opacity: 0.75;
  transition: opacity 1.2s ease, color 1.2s ease;
}

.node:hover .node-name {
  color: #f0e5d0;
  text-shadow: 0 0 18px rgba(240, 225, 200, 0.15);
}
.node:hover .node-life {
  opacity: 1;
  color: #a89a84;
}

/* 颜家：引力中心，字径更大 */
.node-family .node-name {
  font-size: 30px;
  font-weight: 700;
  color: #e8dcc6;
}

/* 唐朝：最沉，色最淡 */
.node-tang .node-name {
  color: #8a7a68;
}
.node-tang .node-life {
  opacity: 0.5;
}

/* ---- 连线（由 JS 实时更新端点，跟随节点漂浮） ---- */
.wire {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #6b5b48;
  stroke-width: 1;
  stroke-opacity: 0;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
}
.wire.wire-main {
  animation: draw-wire 3.6s 0.8s cubic-bezier(.3, .1, .2, 1) forwards;
}
.wire.wire-tang {
  animation: draw-wire 2.2s 3.8s cubic-bezier(.3, .1, .2, 1) forwards;
  stroke-opacity: 0;
  stroke: #4a4036;
}
@keyframes draw-wire {
  0% { stroke-dashoffset: 3000; stroke-opacity: 0; }
  20% { stroke-opacity: 0.7; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0.7; }
}

/* 点击某节点时，其余降至低调 */
.canvas.focus-yan .node:not(.node-yan) { opacity: 0.35; }
.canvas.focus-an .node:not(.node-an) { opacity: 0.35; }
.canvas.focus-family .node:not(.node-family) { opacity: 0.35; }
.canvas.focus-tang .node:not(.node-tang) { opacity: 0.35; }

/* ============================================================
   阅读页：日
   ============================================================ */
body.reading {
  background: #f4efe4;
  background-image:
    radial-gradient(rgba(120, 100, 80, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(160, 140, 110, 0.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  color: #1a1a1a;
  min-height: 100vh;
  padding: 120px 0 160px;
  line-height: 2;
}

/* 回首页按钮 */
.back {
  position: fixed;
  top: 28px;
  left: 28px;
  width: 40px;
  height: 40px;
  border: 1px solid #8a7a68;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif SC", serif;
  font-weight: 500;
  font-size: 16px;
  color: #6b5b48;
  text-decoration: none;
  background: rgba(244, 239, 228, 0.8);
  backdrop-filter: blur(4px);
  z-index: 100;
  transition: all 0.3s ease;
}
.back:hover {
  color: #8a3324;
  border-color: #8a3324;
}

/* 阅读进度条 */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: transparent;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.progress.visible { opacity: 1; }
.progress-bar {
  height: 100%;
  width: 0;
  background: #8a3324;
  transition: width 0.1s ease;
}

/* ---- 页头 ---- */
.page {
  max-width: 32em;
  margin: 0 auto;
  padding: 0 24px;
}
.page-head {
  text-align: center;
  margin-bottom: 140px;
  padding-top: 40px;
}
.page-sub {
  font-family: "EB Garamond", "Noto Serif SC", serif;
  font-style: italic;
  font-size: 14px;
  color: #8a7a68;
  letter-spacing: 0.18em;
  margin-bottom: 28px;
}
.page-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 56px;
  letter-spacing: 0.25em;
  padding-left: 0.25em;
  color: #1a1a1a;
  position: relative;
  display: inline-block;
}
.page-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: #8a3324;
  margin: 32px auto 0;
}

/* ---- 章节 ---- */
.chapter {
  margin-bottom: 96px;
  position: relative;
}
.chapter-head {
  margin: 80px 0 48px;
  text-align: left;
}
.chapter-num {
  font-family: "Noto Serif SC", serif;
  font-weight: 400;
  font-size: 14px;
  color: #8a3324;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  margin-bottom: 16px;
}
.chapter-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.15em;
  padding-left: 0.15em;
  color: #1a1a1a;
  margin-bottom: 4px;
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 0.5px solid #6b5b48;
}

.chapter p {
  font-size: 18px;
  line-height: 2.05;
  color: #1a1a1a;
  margin-bottom: 1.6em;
  text-align: justify;
  text-justify: inter-ideograph;
  font-feature-settings: "palt" 1;
}

/* 朱砂强调 */
em.red {
  font-style: normal;
  color: #8a3324;
  font-weight: 500;
}

/* ---- 页脚 ---- */
.page-foot {
  margin-top: 160px;
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid rgba(107, 91, 72, 0.3);
}
.page-foot a {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  color: #6b5b48;
  text-decoration: none;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  transition: color 0.3s ease;
}
.page-foot a:hover { color: #8a3324; }

/* ============================================================
   主题色
   ============================================================ */
body.theme-yan em.red,
body.theme-yan .chapter-num,
body.theme-yan .page-title::after {
  color: #8a3324;
  background: transparent;
}
body.theme-yan .page-title::after { background: #8a3324; }

body.theme-an em.red,
body.theme-an .chapter-num {
  color: #5a4638;
}
body.theme-an .page-title::after { background: #5a4638; }

body.theme-family em.red,
body.theme-family .chapter-num {
  color: #8a3324;
}
body.theme-family .page-title::after { background: #8a3324; }

body.theme-tang em.red,
body.theme-tang .chapter-num {
  color: #6b5b48;
}
body.theme-tang .page-title::after { background: #6b5b48; }

/* ============================================================
   climax：颜家 · 屠戮
   节奏：定格 → 血污满屏 → 字飘散 → 悬浮 10s → 缓缓聚拢
   ============================================================ */
.chapter-climax {
  position: relative;
}
.chapter-climax p {
  position: relative;
}
.fly-char {
  display: inline-block;
  transition: none;
  will-change: transform, opacity, color;
}

/* 血污遮罩：先飞溅、再缓慢消散 */
.blood-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  background:
    radial-gradient(ellipse at 22% 34%, rgba(90, 20, 18, 0.42) 0%, transparent 28%),
    radial-gradient(ellipse at 78% 28%, rgba(120, 30, 24, 0.38) 0%, transparent 26%),
    radial-gradient(ellipse at 48% 66%, rgba(70, 16, 14, 0.48) 0%, transparent 34%),
    radial-gradient(ellipse at 12% 82%, rgba(95, 22, 18, 0.32) 0%, transparent 24%),
    radial-gradient(ellipse at 86% 74%, rgba(80, 18, 16, 0.36) 0%, transparent 26%),
    radial-gradient(circle at 35% 50%, rgba(140, 40, 30, 0.28) 0%, transparent 18%),
    radial-gradient(circle at 65% 50%, rgba(140, 40, 30, 0.28) 0%, transparent 18%);
  mix-blend-mode: multiply;
  filter: blur(1px);
  transition: opacity 2400ms cubic-bezier(.3, .1, .3, 1);
}
.blood-overlay.splashing {
  opacity: 0.9;
}
.blood-overlay.fading {
  opacity: 0;
  transition: opacity 5800ms cubic-bezier(.4, .1, .4, 1);
}

/* 归位带伤的几种状态 */
.fly-char.wounded-erased {
  position: relative;
  color: transparent !important;
}
.fly-char.wounded-erased::after {
  content: "";
  position: absolute;
  inset: 2px -1px;
  background: #1a1a1a;
  border-radius: 1px;
  transform: scale(1.05, 0.85);
}

/* ============================================================
   颜家：从混沌到清明
   页面顶部背景深一些，越往下越清
   ============================================================ */
body.theme-family {
  background:
    linear-gradient(to bottom,
      #d8cfbd 0%,
      #e4dcca 15%,
      #ede5d2 40%,
      #f1e9d8 70%,
      #f4efe4 100%),
    #f4efe4;
}
body.theme-family .page-head {
  color: #3a3026;
}
body.theme-family .chapter:nth-of-type(-n+3) p {
  color: #2a2420;
}
body.theme-family .chapter:nth-of-type(n+4) p {
  color: #1a1a1a;
}
/* 章号从深到浅到清 */
body.theme-family .chapter-num {
  color: #6b4a3c;
}
body.theme-family .chapter:nth-of-type(n+7) .chapter-num {
  color: #8a3324;
}

/* ============================================================
   唐朝：枯绝末法
   浅灰白底，字淡墨，朱砂极克制
   像长期阳光下晒白的碑纸
   ============================================================ */
body.theme-tang {
  background:
    linear-gradient(to bottom,
      #e8e4d8 0%,
      #e2ddd0 40%,
      #d8d2c2 100%),
    #e2ddd0;
  color: #3a3630;
}
body.theme-tang .page-title { color: #3a3630; }
body.theme-tang .page-sub { color: #8a7a68; }
body.theme-tang .chapter p {
  color: #3a3630;
  opacity: 0.92;
}
body.theme-tang .chapter-title {
  color: #3a3630;
  border-bottom-color: #8a7a68;
}
body.theme-tang .chapter-num { color: #6b5b48; }
body.theme-tang em.red { color: #6b3a28; }
body.theme-tang .page-title::after { background: #6b5b48; }

/* ============================================================
   祭侄文稿拓本浮现（颜家 · 季明 那章）
   ============================================================ */
.rubbing {
  position: relative;
  margin: 64px auto;
  text-align: center;
}
.rubbing img {
  max-width: 100%;
  height: auto;
  opacity: 0;
  filter: sepia(0.3) contrast(0.95) brightness(1.05);
  transition: opacity 2.4s ease;
}
.rubbing.visible img {
  opacity: 0.72;
}
.rubbing-cap {
  font-family: "EB Garamond", "Noto Serif SC", serif;
  font-style: italic;
  font-size: 12px;
  color: #8a7a68;
  letter-spacing: 0.15em;
  margin-top: 16px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 720px) {
  body.reading {
    padding: 90px 0 120px;
  }
  .page { padding: 0 20px; }
  .page-title { font-size: 40px; }
  .chapter p { font-size: 17px; line-height: 2; }
  .chapter-title { font-size: 22px; }
  .page-head { margin-bottom: 80px; }
  .chapter { margin-bottom: 64px; }
  .chapter-head { margin: 56px 0 32px; }

  .home-meta { top: 24px; left: 24px; }
  .home-foot { bottom: 24px; }
  .node { padding: 14px 22px; min-width: 90px; }
  .node-name { font-size: 18px; }
  .node-family .node-name { font-size: 19px; }
}


/* ============================================================
   信息图（章节内嵌 figure.infographic）
   当前只用于 唐朝 · 开元 章的人口增长
   ============================================================ */
.infographic {
  margin: 96px -20px;
  padding: 48px 32px 32px;
  background: transparent;
  border-top: 0.5px solid rgba(107, 91, 72, 0.18);
  border-bottom: 0.5px solid rgba(107, 91, 72, 0.18);
}
@media (max-width: 720px) {
  .infographic {
    margin: 64px -20px;
    padding: 36px 20px 24px;
  }
}

.infographic-head {
  text-align: center;
  margin-bottom: 28px;
}
.infographic-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.26em;
  padding-left: 0.26em;
  color: #2a2620;
  margin-bottom: 8px;
}
.infographic-sub {
  font-family: "EB Garamond", "Noto Serif SC", serif;
  font-style: italic;
  font-size: 12px;
  color: #6b5b48;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  opacity: 0.85;
}

.infographic-body {
  width: 100%;
  padding: 8px 0 16px;
}
.chart-line {
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart-axis {
  stroke: #6b5b48;
  stroke-width: 0.5;
  stroke-opacity: 0.35;
}
.chart-path {
  fill: none;
  stroke: #2a2620;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: chart-draw 2.6s 0.3s cubic-bezier(.3,.1,.2,1) forwards;
}
@keyframes chart-draw { to { stroke-dashoffset: 0; } }

.chart-dot {
  fill: #2a2620;
  opacity: 0;
  animation: chart-pop 0.5s cubic-bezier(.3,.1,.2,1) forwards;
}
.chart-dot-peak { fill: #8a3324; }
@keyframes chart-pop { to { opacity: 1; } }

.chart-year {
  font-family: "EB Garamond", serif;
  font-size: 12px;
  fill: #6b5b48;
  letter-spacing: 0.08em;
  opacity: 0;
  animation: chart-fade 0.6s 0.2s ease forwards;
}
.chart-val {
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  fill: #2a2620;
  opacity: 0;
  animation: chart-fade 0.5s ease forwards;
}
.chart-val:nth-of-type(7) { animation-delay: 0.8s; }
.chart-val:nth-of-type(8) { animation-delay: 1.1s; }
.chart-val:nth-of-type(9) { animation-delay: 1.4s; }
.chart-val:nth-of-type(10) { animation-delay: 1.7s; }
.chart-val:nth-of-type(11) { animation-delay: 2.0s; }
.chart-val-peak {
  fill: #8a3324;
  font-weight: 500;
  animation-delay: 2.5s !important;
}
.chart-peak-tag {
  font-family: "Noto Serif SC", serif;
  font-size: 11px;
  fill: #8a3324;
  letter-spacing: 0.3em;
  opacity: 0;
  animation: chart-fade 0.6s 2.8s ease forwards;
}
@keyframes chart-fade { to { opacity: 1; } }

.infographic-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 24px;
  border-top: 0.5px solid rgba(107, 91, 72, 0.2);
  font-size: 12px;
  color: #6b5b48;
  letter-spacing: 0.14em;
}
.infographic-foot-right {
  font-family: "EB Garamond", "Noto Serif SC", serif;
  font-style: italic;
  color: #8a3324;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  opacity: 0.85;
}
@media (max-width: 720px) {
  .infographic-foot {
    flex-direction: column;
    gap: 8px;
  }
}


/* ============================================================
   附加图表样式
   ============================================================ */

/* ---- 粮价：三段水平色带 ---- */
.price-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 24px 0 16px;
  height: 90px;
}
.price-cell {
  width: var(--w);
  padding: 12px 14px 10px;
  background: rgba(42, 38, 32, 0.04);
  border-left: 2px solid #2a2620;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 60px;
  opacity: 0;
  animation: chart-fade 0.8s forwards;
}
.price-cell:nth-child(1) { animation-delay: 0.2s; }
.price-cell:nth-child(2) { animation-delay: 0.7s; }
.price-cell:nth-child(3) { animation-delay: 1.2s; border-left-color: #6b4a3c; }
.price-num {
  font-family: "Noto Serif SC", serif;
  font-weight: 500;
  font-size: 26px;
  color: #2a2620;
  letter-spacing: 0.08em;
}
.price-where {
  font-size: 11px;
  color: #6b5b48;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.price-axis {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Noto Serif SC", serif;
  font-size: 12px;
  color: #6b5b48;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
}
.price-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #6b5b48, #8a3324);
  opacity: 0.5;
}

/* ---- 城市规模条 ---- */
.city-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0;
}
.city-row {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  align-items: center;
  gap: 16px;
}
.city-name {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  color: #2a2620;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-align: right;
}
.city-bar-wrap {
  height: 22px;
  background: rgba(107, 91, 72, 0.08);
  overflow: hidden;
}
.city-bar {
  height: 100%;
  width: 0;
  background: #2a2620;
  animation: city-grow 1.4s cubic-bezier(.3,.1,.2,1) forwards;
  --w: 0%;
}
.city-bar.peak { background: #8a3324; }
.city-row:nth-child(1) .city-bar { animation-delay: 0.3s; }
.city-row:nth-child(2) .city-bar { animation-delay: 0.7s; }
.city-row:nth-child(3) .city-bar { animation-delay: 1.0s; }
.city-row:nth-child(4) .city-bar { animation-delay: 1.3s; }
@keyframes city-grow { to { width: var(--w); } }
.city-num {
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  color: #2a2620;
  letter-spacing: 0.08em;
}
.city-row:first-child .city-num {
  color: #8a3324;
  font-weight: 500;
}
@media (max-width: 720px) {
  .city-row {
    grid-template-columns: 72px 1fr 56px;
    gap: 10px;
  }
  .city-name { font-size: 13px; }
}

/* ---- 外重内轻对比 ---- */
.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 16px 0 8px;
}
.balance-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.balance-label {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  color: #6b5b48;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  margin-bottom: 12px;
}
.balance-bar {
  width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #ede5d2;
  font-family: "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
  animation: balance-grow 1.4s cubic-bezier(.3,.1,.2,1) 0.3s forwards;
}
.balance-bar-edge { background: #2a2620; }
.balance-bar-center { background: #6b5b48; animation-delay: 0.9s; }
@keyframes balance-grow { to { width: var(--w); } }
.balance-foot {
  margin-top: 10px;
  font-size: 11px;
  color: #6b5b48;
  letter-spacing: 0.18em;
  line-height: 1.8;
}
@media (max-width: 720px) {
  .balance-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- 安禄山三镇环图 ---- */
.three-ring {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.three-ring-arc {
  stroke-dasharray: 0 754;
  animation: three-ring-fill 2.2s 0.4s cubic-bezier(.3,.1,.2,1) forwards;
}
@keyframes three-ring-fill {
  to { stroke-dasharray: 279 754; }
}
.three-ring-big {
  font-family: "Noto Serif SC", serif;
  font-weight: 500;
  font-size: 24px;
  fill: #8a3324;
  letter-spacing: 0.12em;
  opacity: 0;
  animation: chart-fade 0.8s 1.6s forwards;
}
.three-ring-sub {
  font-family: "EB Garamond", "Noto Serif SC", serif;
  font-style: italic;
  font-size: 13px;
  fill: #6b5b48;
  letter-spacing: 0.08em;
  opacity: 0;
  animation: chart-fade 0.8s 2.0s forwards;
}

/* ---- 凤翔米价 vs 开元 ---- */
.ratio-compare {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 8px 0;
}
.ratio-row {
  display: grid;
  grid-template-columns: 60px 1fr 120px;
  align-items: center;
  gap: 16px;
}
.ratio-label {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  color: #6b5b48;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-align: right;
}
.ratio-bar {
  height: 18px;
  background: #2a2620;
  width: 0;
}
.ratio-bar-low {
  animation: ratio-grow 1s 0.3s cubic-bezier(.3,.1,.2,1) forwards;
  --w: 2%;
}
.ratio-bar-high {
  background: #8a3324;
  animation: ratio-grow 2.2s 1.2s cubic-bezier(.3,.1,.2,1) forwards;
  --w: 100%;
}
@keyframes ratio-grow { to { width: var(--w); } }
.ratio-val {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  color: #2a2620;
  letter-spacing: 0.12em;
}
.ratio-row:nth-child(2) .ratio-val { color: #8a3324; font-weight: 500; }
.ratio-gap {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 0.5px solid rgba(107, 91, 72, 0.25);
  font-size: 13px;
  color: #6b5b48;
  text-align: center;
  letter-spacing: 0.12em;
  line-height: 1.9;
}
@media (max-width: 720px) {
  .ratio-row { grid-template-columns: 44px 1fr 80px; gap: 10px; }
}

/* ---- 双轨年表 ---- */
.dual-figure { margin-top: 120px; }
.dual-timeline {
  width: 100%;
  height: auto;
}
.dual-track {
  stroke: #2a2620;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: chart-draw 2.8s 0.4s cubic-bezier(.3,.1,.2,1) forwards;
}
.dual-track-an { stroke: #6b5b48; }
.dual-dot {
  fill: #2a2620;
  opacity: 0;
  animation: chart-fade 0.5s 1.6s forwards;
}
.dual-dot-end {
  fill: #8a3324;
}
.dual-name {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  fill: #2a2620;
  letter-spacing: 0.22em;
  opacity: 0;
  animation: chart-fade 0.8s 0.2s forwards;
}
.dual-year {
  font-family: "EB Garamond", "Noto Serif SC", serif;
  font-style: italic;
  font-size: 11px;
  fill: #6b5b48;
  letter-spacing: 0.15em;
  opacity: 0;
  animation: chart-fade 0.6s 1.8s forwards;
}
.dual-cross {
  stroke: #8a3324;
  stroke-width: 0.8;
  stroke-dasharray: 2 3;
  opacity: 0;
  animation: chart-fade 0.6s 3.0s forwards;
}
.dual-cross-dot {
  fill: #8a3324;
  opacity: 0;
  animation: chart-fade 0.5s 3.2s forwards;
}
.dual-cross-label {
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  fill: #8a3324;
  letter-spacing: 0.22em;
  font-weight: 500;
  opacity: 0;
  animation: chart-fade 0.8s 3.4s forwards;
}
.dual-cross-sub {
  font-family: "EB Garamond", "Noto Serif SC", serif;
  font-style: italic;
  font-size: 12px;
  fill: #6b5b48;
  letter-spacing: 0.18em;
  opacity: 0;
  animation: chart-fade 0.8s 3.6s forwards;
}

/* ---- 贬谪地图 ---- */
.exile-map {
  width: 100%;
  height: auto;
}
.exile-path {
  fill: none;
  stroke: #6b5b48;
  stroke-width: 0.8;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  stroke-dashoffset: 2000;
  animation: exile-draw 4s 0.3s cubic-bezier(.3,.1,.2,1) forwards;
  opacity: 0.7;
}
@keyframes exile-draw {
  0% { stroke-dashoffset: 2000; }
  100% { stroke-dashoffset: 0; }
}
.exile-marker circle {
  fill: #2a2620;
  opacity: 0;
  animation: chart-fade 0.5s var(--d, 0s) forwards;
}
.exile-marker text {
  font-family: "Noto Serif SC", serif;
  font-size: 12px;
  fill: #2a2620;
  letter-spacing: 0.18em;
  opacity: 0;
  animation: chart-fade 0.5s var(--d, 0s) forwards;
}
.exile-marker-end circle { fill: #8a3324; }
.exile-marker-end text { fill: #8a3324; font-weight: 500; }

/* ---- 安禄山进军 ---- */
.march-line { width: 100%; height: auto; }
.march-base {
  stroke: #c4bfb2;
  stroke-width: 1;
}
.march-advance {
  stroke: #8a3324;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation: chart-draw 2.8s 0.5s cubic-bezier(.3,.1,.2,1) forwards;
}
.march-dot {
  fill: #2a2620;
  opacity: 0;
  animation: chart-fade 0.5s forwards;
}
.march-dot-end {
  fill: #8a3324;
}
.march-city {
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  fill: #2a2620;
  letter-spacing: 0.16em;
  opacity: 0;
  animation: chart-fade 0.6s forwards;
}
.march-city-fall { fill: #6b5b48; font-size: 11px; }
.march-city-end { fill: #8a3324; font-weight: 500; }
.march-date {
  font-family: "EB Garamond", "Noto Serif SC", serif;
  font-style: italic;
  font-size: 11px;
  fill: #6b5b48;
  letter-spacing: 0.2em;
  opacity: 0;
  animation: chart-fade 0.6s 1.0s forwards;
}

/* ---- 科举 ---- */
.kejv-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kejv-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  align-items: center;
  gap: 14px;
}
.kejv-label {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  color: #2a2620;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-align: right;
}
.kejv-bar {
  height: 18px;
  width: 0;
  background: #2a2620;
  animation: chart-grow 1.2s cubic-bezier(.3,.1,.2,1) forwards;
}
.kejv-row:nth-child(1) .kejv-bar { animation-delay: 0.3s; }
.kejv-row:nth-child(2) .kejv-bar { animation-delay: 0.7s; }
.kejv-row:nth-child(3) .kejv-bar { animation-delay: 1.1s; background: #6b5b48; }
.kejv-bar-rare { opacity: 0.7; }
@keyframes chart-grow { to { width: var(--w); } }
.kejv-num {
  font-family: "Noto Serif SC", serif;
  font-size: 12px;
  color: #6b5b48;
  letter-spacing: 0.14em;
}
.kejv-row:first-child .kejv-num { color: #8a3324; font-weight: 500; }