/* ============ 专题文章页（topics 表命中时的 /topics/{slug}）============
   外壳与 hero 复用 topics.css 的 .topic-*，正文复用 news.css 的 .news-body-md。
   这里只有三样新东西：文章壳的宽度、数据块（.tblk-*）、来源区（脚注）的版式。
   脚注本身的基础样式在 news.css 里，跟着 markdown 输出的其余部分。
   写死的四个枢纽页不引这个文件，不受影响。 */

/* 正文是一篇文章不是一张清单，所以比 .topic-main 的 1100px 窄一档，
   与 news.css 的 .news-article 同宽。
   页尾留白也跟 `.news-article` 一档（桌面 40px / 手机 60px），不是 `.topic-main`
   的 72px —— 那是给清单页留的，一篇文章读完只剩一个「← 全部专题」，底下空出
   130px 到页脚太旷（2026-09-03 用户提）。 */
.topic-article { max-width: 860px; padding-bottom: 40px; }
@media (max-width: 720px) { .topic-article { padding-bottom: 60px; } }
.topic-article .ta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
}
.topic-article .ta-meta .sep { color: var(--line-strong); }

/* ---- 图（头图 + 节内配图）----
   两者共用 partials/topic_figure.html，只差外层 class。
   ⚠️ **宽度就是正文栏宽，不出血** —— bleed 到 1100px 容器宽时读起来是图在赶字。 */
.topic-hero-fig,
.topic-fig { margin: 24px 0; }
.topic-hero-fig { margin: 20px 0 8px; }
.topic-hero-fig .tfig-link,
.topic-fig .tfig-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-inset);
}
.topic-hero-fig img,
.topic-fig img {
  width: 100%;
  height: auto;
  display: block;
  /* 头图裁成横幅，节内配图按原比例——档案照与竖构图的现场照都能用 */
  transition: transform var(--dur-slow) var(--ease-out);
}
.topic-hero-fig img { aspect-ratio: 21 / 9; object-fit: cover; }
.topic-fig .tfig-link:hover img { transform: scale(1.015); }

.topic-hero-fig figcaption,
.topic-fig figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}
/* credit 与 license。**永远存在**——凡显示库里的图就必须署名。 */
.tfig-credit {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  /* ⚠️ muted 不是 faint：署名是**合规要求**的文字，深色主题下 faint(#78746a)
     落在面板底(#151619)上只有 3.9:1，muted 是 7.5:1。真正的辅助信息
     （`.tl .d` / `.tgm-meta` / `.tl-sub`）才保持 faint。 */
  color: var(--fg-muted);
}
.tfig-credit a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.tfig-credit a:hover { color: var(--accent); }

/* ---- 数据块 ---- */

.tblk {
  margin: 28px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  /* 正文是 17px/1.8 的长文排版，块里是密集数据，不该继承那套行高 */
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
}
/* 抬头只剩眉标一行 —— 「发射详情 →」/「火箭页 →」那条 2026-09-04 撤掉了，
   去处挂在标题上（同一个地方写两遍，而标题才是读者第一眼落到的）。 */
.tblk-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-faint);
}
.tblk-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
/* 标题**就是**去详情页的链接（工位卡没有详情页，那一处仍是 `<div>`）。
   ⚠️ `.ta-body` 那个前缀不能省：正文那份 `.news-body-md a` 会给它上主题色和
   下划线，裸 `a.tblk-name`(0,1,1) 压不过 (0,1,1) 的同分先后 —— 标题要与纯文本
   标题同色，hover 才走主题色。 */
.tblk-name { display: block; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-strong); }
.ta-body a.tblk-name { color: var(--fg-strong); text-decoration: none; }
.ta-body a.tblk-name:hover { color: var(--accent); }
.tblk-en { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); margin-top: 2px; }
.tblk-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  margin: 16px 0 8px;
}

/* 数据卡里没有图 —— 卡是拿来读数的，塞图只会把行距撑开、把数字挤散。 */
.tblk-id-text { min-width: 0; }
.tblk-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ⚠️ **卡里一行只放一个数据**：`.tblk-kv` / `.tblk-specs` 在任何断点都是单列，
   别加回 640px 起分 2/3 列的规则；年度与工位也是一行一个，不用 chips。 */
.tblk-kv { margin: 0; display: block; }
/* ⚠️ 两列**各占其位**：键列约占三分之一，值从三分之一处起左对齐 —— 不是
   「键 96px + 值紧贴」，那样两列都堆在左侧 1/3。grid 而不是 flex：
   `minmax(140px, 32%)` 让键列既有下限又不吃掉长值的空间。

   四处共用这一套几何：发射卡的 `<dl>` 行、规格 / 战绩 / 年度行、卡里的列表行、
   站内相关的行。各自的 padding 与要压掉的正文列表样式写在下面自己那条里
   （`.ta-body` 前缀在选择器组里各算各的特异性，理由见各自的注释）。 */
.tkv,
.tsp,
.ta-body .tblk-list li,
.ta-body .trel-list li {
  display: grid;
  grid-template-columns: minmax(140px, 32%) minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  border-bottom: 1px solid var(--line-faint);
}
.tkv { padding: 7px 0; }
/* 键列也走 muted（理由同 `.tfig-credit`）—— 键读不清等于整行读不清。 */
.tkv dt { color: var(--fg-muted); font-size: 13px; }
/* ⚠️ 值**左对齐**紧跟在键右边，不是两端对齐。长值换行不截断 —— 卡里只有
   一列，宽度够，截成省略号反而看不到工位全名。 */
.tkv dd {
  margin: 0;
  min-width: 0;
  font-family: var(--font-mono);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.tkv dd a { color: var(--accent); text-decoration: none; }
.tkv dd a:hover { text-decoration: underline; }

/* 三处截断段落（发射卡的任务描述、图集组头的任务描述、报道摘要）共用这一套
   多行截断；截几行各自写在自己那条里。 */
.ta-body .tblk-desc,
.ta-body .tgm-desc,
.topic-news .tn-sum {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 任务描述：键值表之后的一段话（`launch_stats` 块），两行封顶 —— 长的一条能
   把整张卡撑成两屏，要全文点卡片标题。
   ⚠️ **前缀不能省**：`.news-body p`（0,1,1）给正文每个 `<p>` 加 22px 下边距，
   裸 `.tblk-desc`（0,1,0）压不过它，卡底会多出一截空白。 */
.ta-body .tblk-desc {
  /* 不画分隔线：`<dl>` 的末行自己已经有一条 `border-bottom`，再加一条顶线
     就是两条线夹着 12px 空白（同来源区那处的理由）。 */
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  -webkit-line-clamp: 2;
}

/* 规格 / 战绩 / 年度：同一种一行一个的键值行，几何见上面那组。 */
.tsp { padding: 7px 0; }
.tsp-k { color: var(--fg-muted); font-size: 13px; }
.tsp-v {
  min-width: 0;
  font-family: var(--font-mono);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

/* 🔴 **本页每个 `<ul>` 都要带 `.ta-body` 前缀**（这一条、`.tl`、`.trel-list`）。
   正文那边 `.news-body-md ul { padding-left:24px }`（0,1,1）与
   `.news-body-md ul li { padding:3px 8px; border-radius:6px }`（0,1,2）都比裸
   `.tblk-list`（0,1,0）/ `.tblk-list li`（0,1,1）更特殊 —— 不加前缀，这几行会
   整体右推 24px（时间线的圆点会跟着浮到竖线外），还会带上正文列表的 hover
   底色与圆角。加上前缀是 (0,2,0)/(0,2,1)，压得住。 */
.ta-body .tblk-list { list-style: none; margin: 0; padding: 0; }
/* 「名字 + note」的行（在役火箭那种）note 落在值列；`.tblk-plain` 是只有
   名字的裸行（发射场 / 工位），单列全宽。 */
.ta-body .tblk-list li {
  margin: 0;
  padding: 7px 0;
  background: none;
  border-radius: 0;
  overflow-wrap: anywhere;
}
.ta-body .tblk-plain li { display: block; }
.ta-body .tblk-list li:hover { background: none; }
.ta-body .tblk-list li a { color: var(--fg); text-decoration: none; }
.ta-body .tblk-list li a:hover { color: var(--accent); }
/* 紧跟名字后面，不 `margin-left:auto` 推到行尾 —— 同「卡内全部左对齐」。 */
.tblk-list .tnote { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); }

/* 「历史型号」：一排灰 pill。基础 `.tpill`（`--bg-inset` + `--fg-muted`）就是
   灰的那一档，所以不加修饰类；它们是链接，只补一个 hover。 */
.tblk-retired { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-body .tblk-retired a.tpill { color: var(--fg-muted); }
.ta-body .tblk-retired a.tpill:hover { color: var(--accent); }

/* 时间线。**不是卡片**：正文流里的一条纵向序列，左侧竖线 + 圆点，
   宽度就是正文栏宽。 */
.topic-tl, .topic-gallery { margin: 28px 0; }
/* 小节抬头（时间线 / 图集 / 站内相关）用**正文的 h3 风格**，不用卡片眉标，
   所以这里只管间距 —— 字体 / 字号 / 字重 / 颜色都由 `.news-body-md h3` 给。
   ⚠️ **别在这里写 font-* / color / text-transform**：`.news-body-md h3`(0,1,1)
   压过裸 `.tl-h`(0,1,0)，写了不生效，只有 news 那条没设的项会漏出来 ——
   曾经漏出一个 `text-transform: uppercase`，把型号名大写成「CERES-1S」。 */
.ta-body .tl-h { margin: 28px 0 14px; }
/* 抬头只写小节名，「这一节讲的是哪几款火箭」降到下面一行 mono 小字 ——
   块自带小节名，正文里不该再有同名 h2。 */
.tl-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  margin: -8px 0 14px;
}
/* 🔴 **这几条必须带 `.ta-body` 前缀**，理由同 `.tblk-list`（见上）。顺带把
   正文列表的 hover 底色与圆角显式清掉 —— 时间线的行不是可点的列表项。 */
.ta-body .tl {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--line-strong);
  margin-left: 6px;
}
.ta-body .tl li {
  position: relative;
  margin: 0;
  padding: 0 0 14px 20px;
  background: none;
  border-radius: 0;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
}
.ta-body .tl li:hover { background: none; }
.ta-body .tl li:last-child { padding-bottom: 0; }
.tl li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--fg-dim);
}
/* 「最新报道」复用同一套 `.tl`，没有「本专题那一条」的概念所以圆点不高亮。 */
.topic-news .tl .t a { overflow-wrap: anywhere; }
/* 摘要在标题下、来源站上，**一行封顶**：这一节固定在正文最前，一条占三行就把
   第一段叙事推到屏外。要细节该点进原文。条数上限见 `NEWS_DEFAULT_LIMIT`。 */
.topic-news .tn-sum {
  -webkit-line-clamp: 1;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* 人工编辑标记：标题后跟的小 pill，以及摘要下面那行「编辑注：…」。
   ⚠️ **不共用 `.tpill`**：那一套标的是发射状态，这一套标的是我们对一条报道下的
   编辑判断，两者撞在同一节里会被读成同一类信息。所以更小、更轻。
   「存疑」用告警色，「已更正」是中性灰 —— 已更正是个交代，不是警告。 */
.topic-news .tflag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  font-weight: var(--fw-medium);
  vertical-align: 1px;
  white-space: nowrap;
}
.topic-news .tflag.disputed { background: var(--warn-soft-bg); color: var(--warn-dark); }
.topic-news .tflag.correction { background: var(--bg-inset); color: var(--fg-muted); }
/* 深色主题下 `--warn-dark` 在深底上偏暗，换回原色 —— 同 `.tpill` 那组。 */
html[data-theme="dark"] .topic-news .tflag.disputed { color: var(--warn); }
/* 编辑注独占一行,在摘要之下、来源站之上 —— 它是我们写的，不是那篇报道的一句话，
   所以用 mono 与摘要区分开。**不截断**：一句话说明本来就该看全。 */
.topic-news .tn-note {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* 「任务更新」同样复用 `.tl`。正文是一段话不是一个标题，所以比时间线的任务名
   小一档（那边继承 `.news-body` 的 17px/1.8）—— 一节五条 17px 的段落会把叙事
   整个推到屏外。没有链接的更新是纯文本，样式由这条统一给。 */
.topic-upd .tl .t { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }

/* 本专题绑定的那几发。 */
.tl li.hi::before { background: var(--accent); border-color: var(--accent); }
.tl .d {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.tl .t { min-width: 0; }
.ta-body .tl .t a { color: var(--fg); text-decoration: none; font-weight: var(--fw-medium); }
.ta-body .tl .t a:hover { color: var(--accent); }
.tl .t .sub { display: block; font-size: 12.5px; color: var(--fg-faint); }
/* 🔴 **`@media` 里的选择器要跟它的基础规则同前缀。** 裸 `.tl li`（0,1,1）压不过
   基础规则 `.ta-body .tl li`（0,2,1），390px 的手机上时间线就仍是三列，标题被
   挤成一列竖排的字。已核：两列几何那组在 480px 那个 `@media` 里逐字照抄，
   `.tgm-shots.multi` 的基础规则是裸类、无需前缀。 */
@media (max-width: 640px) { .ta-body .tl li { grid-template-columns: 1fr; } }

/* 站内相关。**不是数据卡**，且**一个类型一行、同类链接并排** —— 一条链接
   占一行的话是六行 45px 高、字号跟正文标题一样大，类型标签还每行重复一遍。
   两列几何见 `.tkv`；`.ta-body` 前缀的理由同 `.tblk-list`。 */
.topic-rel { margin: 28px 0; }
.ta-body .trel-list { list-style: none; margin: 0; padding: 0; }
.ta-body .trel-list li {
  margin: 0;
  padding: 8px 0;
  /* 行高要自己定死。这一节在 `.news-body` 里面，那边是 17px/1.8 的长文排版，
     不覆盖的话每行净高 30.6px、加上 padding 就又是 46px —— 正是用户说的
     「内容太薄撑得太开」。 */
  font-size: 14px;
  line-height: 1.6;
  background: none;
  border-radius: 0;
}
.ta-body .trel-list li:hover { background: none; }
/* 类型标签是这一行的键，同 `.tkv dt` 走 muted。行内分隔符仍是 faint。 */
.trel-label { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.trel-links { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.trel-links .sep { color: var(--fg-faint); margin: 0 6px; }
.ta-body .trel-list a {
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ta-body .trel-list a:hover { color: var(--accent); }
/* 窄屏放不下两列，四处一起退回上下堆（键一行、值一行）。选择器与上面那组
   基础规则逐字相同 —— 特异性一样，靠位置在后面取胜。 */
@media (max-width: 480px) {
  .tkv,
  .tsp,
  .ta-body .tblk-list li,
  .ta-body .trel-list li {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
}

/* ---- 状态 pill ----
   分桶与 render::helpers::status_pill_class 一致（`~/chx/CLAUDE.md` 的发射状态
   语义表）：go/success 绿、tbc/hold/partial 黄、tbd 橙、fail/abort 红、
   live 实心红、其余灰。**分桶必须一致，色值按背景走**：这一页是浅底面板，
   所以浅色主题用 *-dark 那一档取够对比度，深色主题换回原色。 */
.tpill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--bg-inset);
  color: var(--fg-muted);
}
.tpill.go, .tpill.success { background: var(--success-soft-bg); color: var(--success-dark); }
.tpill.tbc, .tpill.hold, .tpill.partial { background: var(--warn-soft-bg); color: var(--warn-dark); }
.tpill.tbd { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.tpill.fail, .tpill.abort { background: var(--danger-soft-bg); color: var(--danger-dark); }
/* live 是「正在进行 / 直播」的徽章，不是失败信号 —— 与 agency.css / launch.css
   同一约定，见 `~/chx/CLAUDE.md` 的发射状态语义表。 */
.tpill.live { background: var(--danger); color: var(--accent-fg); }

html[data-theme="dark"] .tpill.go,
html[data-theme="dark"] .tpill.success { color: var(--success); }
html[data-theme="dark"] .tpill.tbc,
html[data-theme="dark"] .tpill.hold,
html[data-theme="dark"] .tpill.partial { color: var(--warn); }
html[data-theme="dark"] .tpill.fail,
html[data-theme="dark"] .tpill.abort { color: var(--danger); }

/* ---- 图集 ----
   **不是数据卡**，而且**按任务分组**：正文流里的一节，一次发射一组，
   头行的排版语言与 `.tl li` 的头行一致。 */
/* 组头三行。一组 = 一次任务，组间用一条细线 + 32px 分开 —— 没有这个边界与
   这三行信息就分不清当前是哪个任务。 */
.tgal-mission + .tgal-mission {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-faint);
}
/* 组头第一行 = 标题 + 状态 pill 并排。
   ⚠️ **pill 在 h4 外面**：在里面时标题的可访问名会连着状态读成「…天启
   16-18 & 20成功」。所以排版归这一层 flex，h4 只剩字体。
   ⚠️ 前缀不能省：`.news-body-md h4`（0,1,1）的 `margin:24px 0 10px` 压得过裸
   `.tgm-title`（0,1,0），所以那份间距搬到这里、h4 自己归零。 */
.ta-body .tgm-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 10px;
  /* pill 原先长在 h4 里，继承的是 h4 的 1.35；挪出来若继承 `.news-body` 的 1.8，
     它的行盒会高 5px，baseline 对齐后把整个组头顶下去 3px。 */
  line-height: 1.35;
}
.tgm-title {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--fg-strong);
}
.topic-article .ta-body .tgm-title { margin: 0; padding-top: 0; border-top: none; }
.tgm-title a { color: var(--fg-strong); text-decoration: none; }
.tgm-title a:hover { color: var(--accent); }
.tgm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-faint);
}
.tgm-meta .sep { color: var(--line-strong); }
.tgm-meta a { color: var(--fg-muted); text-decoration: none; }
.tgm-meta a:hover { color: var(--accent); }
/* ⚠️ **前缀不能省**（同 `.tblk-desc`）：这是 `<p>`，`.news-body p`（0,1,1）的
   `margin: 0 0 22px` 压得过裸 `.tgm-desc`（0,1,0），「上 8px 下 0」会变成
   「上 0 下 22px」—— 描述贴住 meta 行，与下面的图之间反倒多出一截。 */
.ta-body .tgm-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  /* 两行封顶：任务描述长短差得很远，全放出来组头会盖过图。 */
  -webkit-line-clamp: 2;
}
/* 一张图 = 占正文栏全宽（`<div>` 的默认 block）；多张 = 组内成网格。 */
.tgm-shots { margin-top: 12px; }
.tgm-shots.multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .tgm-shots.multi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 同上那条碰撞的另一面：`.news-body-md a`（0,1,1）给正文里每个 `<a>` 加橙色
   下划线。图集格子与卡片里的链接是整块可点区域，不该带正文链接的装饰。 */
.ta-body .tgal,
.ta-body .tblk a { text-decoration: none; }
.tgal { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* 图片不套框、不做 hover —— 只留圆角与加载时的底色。 */
.tgal-img {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-inset);
}
.tgal-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* 组内多图时格子矮一些，一行三张不至于比正文还高。 */
.tgm-shots.multi .tgal-img img { aspect-ratio: 4 / 3; }
/* 署名，11px + muted 同 `.tfig-credit` —— 图集与正文配图没有理由分两档。 */
.tgal-credit { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); overflow-wrap: anywhere; }
/* 来源标签（「现场图」/「报道配图」）—— 多图时得看得出每张是什么。 */
.tgal-credit b { color: var(--fg-muted); font-weight: var(--fw-semibold); }

/* 页尾的版本说明。与 hero 那行 `.ta-meta` 同一档字（mono 12px / faint）——
   两者说的是同一类事，一头一尾呼应；居中是因为它在 `.news-end-divider` 与
   「← 全部专题」之间，那两样都是居中的。 */
.topic-article .ta-foot {
  margin: -8px 0 22px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-faint);
  text-wrap: pretty;
}

/* ---- 脚注：来源区的版式 ----
   脚注的基础样式（引用角标与定义的序号）在 `news.css` 的 markdown 输出那一段
   —— 那几条对任何 `.news-body-md` 都成立，本页只是恰好是第一个用到脚注的页面。
   留在这里的是**专题页自己的来源区版式**，所以选择器都带 `.topic-article`。 */
/* 来源区**不用卡片**：裸行 —— 橙色 mono 序号 + 链接 + 站点 + 日期，
   行间一条细线。
   ⚠️ 抬头（「来源」小标题）放不进去：pulldown-cmark 把每条脚注定义渲染成正文的
   直接兄弟节点，没有包裹元素可挂标题。 */
.topic-article .ta-body .footnote-definition {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid var(--line-faint);
}
/* 与上一节之间只留间距，**不画线**：上一节（多半是站内相关）自己末行已经有
   一条底线，再加一条顶线就是两条线夹着一段空白。序号 + 间距足够说明这是另一节。 */
.topic-article .ta-body .footnote-definition:first-of-type { margin-top: 28px; }
/* ⚠️ **单栏，不做两栏。** 同上：没有包裹元素，grid / column-count 都用不上，
   而 `inline-flex` + `calc(50% - Npx)` 要靠字号去猜兄弟节点间那段文本空白有
   多宽，换个字号就掉回单栏。要两栏得自己渲染来源区（T1 的
   `[[BLOCK: sources]]`），不是 CSS 能补的。 */
.topic-article .ta-body .footnote-definition p { margin: 0; }