/* 来时之路 —— 后人抚碑：安静、沉、克制 */
:root {
  /* 告诉浏览器这是暗色文档。滚动条、输入框内件这些原生 UI 不看我们的 CSS 变量，
     只看 color-scheme——不声明就按浅色渲染，于是侧栏滚起来时会甩出一条浅灰的
     原生滚动条压在深色面板上。声明之后原生件跟着转暗，"有时冒出来"那条也就不刺眼了。
     写在 style.css 是因为三个页面都加载它，一处即全站。 */
  color-scheme: dark;
  --bg: #14161a;
  --bg-panel: #1c1f24;
  --bg-raise: #22262c;
  --line: #2b2f36;
  --ink: #d8d4cc;
  --ink-dim: #9a968e;
  --ink-faint: #6e6b64;
  --heading: #ece5d5;
  --rust: #8f3b2e;
  --rust-ink: #c26a58;
  --verify: #6b7a8c;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --global-nav-height: 54px;
  /* 窄屏下「档案列表」那条常驻工具条的高度。档案面板要贴着它下缘弹出，
     两处都读这个变量，改一处就对齐，别各写各的数。 */
  --toolbar-height: 52px;
  /* 导航固定在顶上、脱离文档流，凡是 sticky 吸顶的东西都得从它下缘起算，
     否则吸住之后头上那一截就压在导航底下（+1px 是导航的 border-bottom）。 */
  --sticky-top: calc(var(--global-nav-height) + 1px + 24px);
}

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

html {
  background: var(--bg);
  /* 点目录跳转、或直接带哈希打开时，落点要停在导航下面。
     不留这块余量，跳过去的那个小标题正好被固定导航压住，读者以为没跳对。 */
  scroll-padding-top: calc(var(--global-nav-height) + 1px + 16px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- 全站导航 ---------- */
/* 三页一律固定在顶部。固定后 nav 脱离文档流，各页必须自行让出 --global-nav-height，
   见下方 .archive-page / body.prototype-map 的 padding-top。 */
.global-nav {
  border-bottom: 1px solid var(--line);
  background: rgba(20, 22, 26, 0.86);
  backdrop-filter: blur(6px);
  color: var(--ink-dim);
  font-family: var(--serif);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
}

/* +1px 是 .global-nav 的 border-bottom：--global-nav-height 只算内容高，
   实际占位是 54+1=55px，少让这 1px 会把下面的站头压掉一条线 */
.archive-page {
  padding-top: calc(var(--global-nav-height) + 1px);
}

.global-nav-inner {
  max-width: 1280px;
  min-height: var(--global-nav-height);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* 与页脚的落款同一块东西：中英文全名 + 一句这是什么。
   行高压到 1.3（正文继承的是 1.85），两行才塞得进 54px 的导航条不撑高它——
   一撑高，各页按 --global-nav-height 让出的顶部空间就对不上了。 */
.global-brand {
  display: block;
  white-space: nowrap;
}

.global-brand-name {
  display: block;
  color: var(--heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
}

.global-brand-what {
  display: block;
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.3;
}




/* 首页原有的 fixed 覆盖已并入 .global-nav 基础规则，此处不再重复 */

@media (max-width: 560px) {
  .global-nav-inner {
    padding: 0 20px;
    gap: 12px;
  }

  .global-brand-name {
    font-size: 13.5px;
    letter-spacing: 0.12em;
  }

  .global-brand-what {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* 嵌入首页第四屏时：去掉重复的导航条与它让出的空间，正文上边距略收 */
html.is-embedded .global-nav { display: none; }
html.is-embedded .archive-page { padding-top: 0; }
html.is-embedded main { padding-top: 26px; }

/* ---------- 页顶 ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.site-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--heading);
}
.site-subtitle {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
#search {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 8px 12px;
  width: 320px;
  max-width: 100%;
  outline: none;
}
#search:focus { border-color: #4a4038; }
#search::placeholder { color: var(--ink-faint); }

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

/* ---------- 时间轴主页 ---------- */
.timeline {
  position: relative;
  padding-left: 34px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.stage-block { position: relative; margin-bottom: 56px; }
.stage-node {
  position: absolute;
  left: -34px;
  top: 8px;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  background: var(--rust);
}
.stage-head { margin-bottom: 18px; }
.stage-name {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--heading);
}
.stage-range {
  margin-left: 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
/* 一个阶段下面挂一片图卡。以图为主：4:3 满幅彩图，文字压在图的下缘。 */
.war-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.war-card {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.war-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-panel);
}

.war-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.war-card:hover .war-card-media img {
  transform: scale(1.04);
}

/* 只压图的下缘，够文字读就行——不是为了把整张图调暗 */
.war-card-media::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 58%;
  background: linear-gradient(to top,
    rgba(12, 13, 16, 0.92) 0%,
    rgba(12, 13, 16, 0.70) 34%,
    rgba(12, 13, 16, 0) 100%);
  pointer-events: none;
}

.war-card-caption {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  z-index: 2;
}

.war-name {
  display: block;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: var(--heading);
}

.war-time {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

/* 篇数角标绝对定位到图的右上角。原来它在 flex 流里靠 margin-left:auto 顶到右边，
   时间标签一长就换行、把卡片中间撑出一块空白（第二次鸦片战争、甲午战争都中过）。 */
.war-count {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  margin: 0;
  padding: 1px 7px;
  border: 1px solid rgba(216, 212, 204, 0.22);
  border-radius: 2px;
  background: rgba(12, 13, 16, 0.55);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

/* 一句话退到图外、两行截断：它是补充，不该跟图抢 */
.war-oneline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.war-card:hover .war-oneline {
  color: var(--ink);
}

/* 不画分隔线、靠右排：这行是整份档案的落款，不是新起的一块内容，
   横一条通栏实线会把它读成另一个区块。右对齐也与首页各屏右下角的小字一致。 */
.stats-foot {
  margin-top: 44px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

/* ---------- 面包屑 ---------- */
.crumb {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 22px;
}
/* hover 一律只改颜色，不改 opacity。Chrome 里 opacity 一动就把元素提成独立的合成层，
   指针图标每帧重新命中一次，鼠标压在链接上时会在小手与箭头之间抖，最后常停在箭头上
   （实测：几何没有缝、:hover 状态也稳，抖的是图标本身）。color 不触发合成层。 */
.crumb a { transition: color 0.15s; }
.crumb a:hover { color: var(--ink-dim); }
.crumb .sep { margin: 0 8px; color: var(--line); }
.crumb .here { color: var(--ink-dim); }

/* ---------- 双栏布局（战争页 / 阅读页） ---------- */
.layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.layout.with-toc { grid-template-columns: 300px minmax(0, 1fr) 190px; }

/* 正文栏居中。三栏时这一栏本就窄于 760，max-width 不起作用、位置不变；
   一旦侧栏/目录收起（≤1399、≤1099），栏宽放开到整幅，正文若还左贴，
   右边会空出一大片——把这一栏钉在中线上，页脚翻页条也随之与正文同宽。 */
.content {
  min-width: 0;
  max-width: 760px;
  margin-inline: auto;
}

/* 显隐由外层 .list-toggle-bar 统一管，按钮自身只管长相 */
.list-toggle-bar { display: none; }

.list-toggle {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 6px 14px;
  cursor: pointer;
}
.list-toggle:hover { color: var(--ink); }
.list-toggle[aria-expanded="true"] {
  color: var(--heading);
  border-color: #44302b;
}

.sidebar {
  min-width: 0;
  position: sticky;
  top: var(--sticky-top);
  max-height: calc(100vh - var(--sticky-top) - 24px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.side-stage {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 20px 0 0;
}
.side-stage:first-child { margin-top: 0; }
/* 战争标题上方那点间距一律走自身 padding，不用外面的 margin：
   margin 是死区，鼠标横穿它时指针会在手形与箭头之间来回跳（实测 5px 的缝就够跳）。
   把缝收进链接自己的可点范围里，整条侧栏就是一格挨一格，不留缝。 */
.side-war {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 8px 4px;
  border-left: 2px solid transparent;
  transition: color 0.15s;
}
.side-war:hover { color: var(--heading); }
.side-war.current-war { color: var(--heading); }
.side-war.current {
  border-left-color: var(--rust);
  background: var(--bg-panel);
  color: var(--heading);
}
.doc-list { list-style: none; }
.doc-item {
  display: flex;
  align-items: baseline;
  padding: 2px 8px 2px 20px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  transition: color 0.15s;
}
.doc-item:hover { color: var(--ink); }
.doc-item.current {
  border-left-color: var(--rust);
  background: var(--bg-panel);
  color: var(--heading);
}
.time-pre {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.doc-item .time-pre { flex: none; min-width: 7ch; margin-right: 4px; }
.type-tag {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 5px;
}
.type-tag.overview { color: var(--rust-ink); border-color: #44302b; }

/* ---------- 档案正文 ---------- */
.doc {
  min-width: 0;
  max-width: 760px;
}
.doc-meta {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.doc-body h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--heading);
  margin: 8px 0 22px;
  line-height: 1.5;
}
.doc-body h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--heading);
  margin: 36px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.doc-body h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--heading);
  margin: 26px 0 8px;
}
.doc-body h4 {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--heading);
  margin: 20px 0 6px;
}
.doc-body p { margin: 12px 0; }
.doc-fig {
  margin: 14px 0 18px;
  padding: 0;
}
.doc-fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0;
}
/* 配图声明：交代清楚即可，不要抢正文。与 .doc-meta 同一档小字。 */
.fig-notice {
  margin: 32px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.doc-body p.oneliner {
  font-size: 17.5px;
  text-indent: 2em;
  color: var(--heading);
  margin: 20px 0 26px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border-left: 2px solid var(--rust);
  border-radius: 2px;
}
.doc-body strong { color: var(--heading); font-weight: 600; }
.doc-body p.oneliner strong { color: var(--rust-ink); }
.doc-body ul { margin: 12px 0 12px 1.6em; }
.doc-body li { margin: 4px 0; }
.doc-body blockquote {
  margin: 14px 0;
  padding: 8px 16px;
  border-left: 2px solid var(--line);
  color: var(--ink-dim);
  background: var(--bg-panel);
  border-radius: 2px;
}
.doc-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 30px 0;
}
.mark-red { color: var(--rust-ink); }

.table-wrap { overflow-x: auto; margin: 16px 0 20px; }
.doc-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 1.7;
}
.doc-body th, .doc-body td {
  border: 1px solid var(--line);
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
}
.doc-body th {
  background: var(--bg-raise);
  color: var(--heading);
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.doc-body tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }

/* ---------- 目录 ---------- */
.toc {
  position: sticky;
  top: var(--sticky-top);
  max-height: calc(100vh - var(--sticky-top) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 12.5px;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.toc-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.toc a {
  display: block;
  padding: 2px 0;
  color: var(--ink-dim);
  line-height: 1.6;
  transition: color 0.15s;
}
.toc a:hover { color: var(--heading); }

/* ---------- 上一篇 / 下一篇 ---------- */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.pager a {
  font-size: 13.5px;
  color: var(--ink-dim);
  max-width: 46%;
  transition: color 0.15s;
}
.pager a:hover { color: var(--heading); }
.pager .next { text-align: right; margin-left: auto; }
.pager .pager-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

/* ---------- 搜索结果 ---------- */
.search-summary {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.result-item {
  display: block;
  padding: 14px 18px 12px;
  margin-bottom: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.15s;
}
.result-item:hover { border-color: var(--ink-faint); }
.result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.result-title { font-size: 15.5px; color: var(--heading); }
.result-war { font-size: 12px; color: var(--ink-faint); }
.result-oneline {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.empty-note { color: var(--ink-faint); font-size: 14px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1399px) {
  .layout.with-toc { grid-template-columns: 300px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 1099px) {
  main { padding: 28px 18px 64px; }
  .header-inner { padding: 22px 18px 18px; }
  .war-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .layout, .layout.with-toc { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }

  /* 侧栏收起后，「档案列表」是读者跳去另一篇的唯一入口。它原先跟着面包屑
     一起滚出屏幕——正文一长，想换一篇就得先滚回顶。这里把它钉成一条
     常驻工具条，贴在固定导航下缘，读到哪儿都能点开。
     左右负边距抵掉 main 的 18px 内边距，让底色横铺满幅，正文从底下干净地过。 */
  .list-toggle-bar {
    display: flex;
    align-items: center;
    position: sticky;
    top: calc(var(--global-nav-height) + 1px);
    z-index: 40;
    min-height: var(--toolbar-height);
    margin: 0 -18px 14px;
    padding: 0 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }

  /* 档案列表改成从工具条下缘落下来的面板：常驻按钮若还按原样把列表插回
     版面顶部，读者在文章中段点开，展开的东西在几屏之外，等于没打开。
     fixed 贴着工具条，与正文同宽同中线，自身滚动，不挤动正文。 */
  .layout.show-list .sidebar {
    display: block;
    position: fixed;
    /* 缺省值按「工具条已吸住」算；页面停在顶端时工具条还在原位，
       实际下缘由 app.js 量出来写进这两个变量。写自定义属性而不是行内 top，
       是因为变量只在这条规则里被引用——宽屏侧栏变回版面一栏时它自动失效，
       不会有一个残留的坐标把 sticky 侧栏钉死。 */
    top: var(--panel-top, calc(var(--global-nav-height) + 1px + var(--toolbar-height)));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 36px);
    max-width: 760px;
    max-height: var(--panel-max-h,
      calc(100vh - var(--global-nav-height) - var(--toolbar-height) - 48px));
    overflow-y: auto;
    /* 面板滚到头之后，滚轮不再接着推底下的正文——浮层是一层单独的东西，
       两百多条翻到底就该停住，而不是把读者原来读到的位置一起冲走。 */
    overscroll-behavior: contain;
    z-index: 45;
    padding: 16px 18px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  }
}
@media (max-width: 560px) {
  .war-grid { grid-template-columns: 1fr; }
}