/* ============================================================
   世荣集团 · 文章/问题库栏目样式  v2
   继承首页北极星「一份被翻旧的纸面档案」：
   纸面承担文字，金线只做标点，一处可以够不着的灰承认边界。

   本版改动集中在两件事：
   1. 建立阅读版面（.art-grid 主栏 + 右侧「本篇要点」）、
      文首的可直接引用摘要、文末的上一篇/下一篇接力；
   2. 可读性收口——全栏目对比度达 AA、中文行长收进
      28~40 字、编号一律走 --gold-ink。

   顶栏/页脚属于全站底账（styles.css / index.html），改这里会连带首页，
   故仅在文末集中列出待统一样式的问题，不在本文件越权覆盖。
   只在「文章页内部」需要、且不打算回流首页的修正，用 body.art-page 前缀。
   ============================================================ */

/* ---------- 变量 ---------- */

.art-page {
  /* 浅底金色小字：#A0762E 在米白上仅 3.86:1，压到 AA 需更深一档。
     待回流 styles.css：首页 .sec-no 等其他金色小字同样是 3.86:1，
     移到 :root 后一并修掉；在此之前先作为本栏目的私有 token。 */
  --gold-ink: #7A561F;
  /* 正文栏宽：17.5px 字号下约 36~38 个汉字一行 */
  --measure: 680px;
  /* 警示纸：从 --paper-3 向 --gold-l 偏移一档，不是新色系 */
  --warn-bg: #F0E3C6;
}

body.art-page { background: var(--paper); }

/* ---------- 通用页头（文章页沿用首页顶栏，这里只补偏移） ---------- */

/* 文章页顶栏默认走「已滚动」态：纸底 + 深字 + 固定，不依赖首页的 hero 逻辑 */
body.art-page .site-head {
  background: rgba(250, 248, 241, .985);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  color: var(--ink);
  padding-block: 12px;
  box-shadow: 0 1px 0 var(--line);
}
body.art-page .brand-logo { filter: none; }
body.art-page .site-head .head-phone { color: var(--ink-2); }
body.art-page .head-phone span { opacity: .82; }
/* 顶栏是 fixed，给正文留出高度 */
body.art-page main { padding-top: 62px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 999;
  font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- 页脚可读性（颜色属全站缺陷，待 styles.css 一并收口） ---------- */

body.art-page .foot-base { color: rgba(246, 242, 233, .62); font-size: 12px; letter-spacing: .02em; }
body.art-page .credits { color: rgba(246, 242, 233, .62); }

/* ---------- 面包屑 ---------- */

.crumb-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  padding-top: clamp(20px, 3vw, 32px);
}

.crumb {
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.crumb a { color: var(--ink-2); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.crumb a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }
.crumb span { margin: 0 7px; opacity: .55; }
.crumb .cur { color: var(--ink-2); opacity: 1; }

/* 返回问题库：文章页唯一的「退路」，放在面包屑右侧 */
.crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gold-ink);
  border-bottom: 1px solid rgba(160, 118, 46, .35);
  transition: border-color .2s var(--ease);
}
.crumb-back:hover { border-bottom-color: var(--gold-ink); }
.crumb-back i {
  font-style: normal;
  font-family: var(--num);
  line-height: 1;
  transition: transform .24s var(--ease);
}
.crumb-back:hover i { transform: translateX(-3px); }

/* ---------- 文章页主体 ---------- */

.art-shell { padding-bottom: clamp(60px, 8vw, 110px); }

/* 文首：左侧题头 ＋ 右侧认读卡（排成一行，题头抬到「认读卡」的上沿，
   读者一眼看到「这篇讲什么 + 归哪类 + 谁写的」） */
.art-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 24px clamp(28px, 4vw, 56px);
  align-items: start;
  padding-top: clamp(22px, 3.4vw, 40px);
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.art-hero-main { min-width: 0; }

.art-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.art-eyebrow .cat {
  font-weight: 600;
  color: var(--gold-ink);
  letter-spacing: .06em;
}
.art-eyebrow .cat::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  background: rgba(160, 118, 46, .5);
}
.art-eyebrow .upd { font-family: var(--num); letter-spacing: .03em; }

.art-h1 {
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.33;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 20em;
}

/* 认读卡：无描边的纸片，只靠底与间距成形（规则：分隔线与边框不重复） */
.art-card {
  background: var(--paper-2);
  border-radius: 2px;
  padding: 20px 22px 10px;
}
.art-card dl { margin: 0; }
.art-card dt {
  font-size: 12.5px;
  color: var(--ink-2);
  letter-spacing: .06em;
  margin-bottom: 3px;
}
.art-card dd {
  margin: 0 0 13px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}
.art-card dd:last-child { margin-bottom: 6px; }
.art-card .ok { color: var(--gold-ink); }

/* ---------- 版面网格：主栏 ＋ 右栏 ---------- */

.art-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 40px clamp(32px, 4vw, 56px);
  align-items: start;
  padding-top: clamp(28px, 3.6vw, 44px);
}

/* 右栏随读：只用 sticky，不用滚动脚本。
   top 取顶栏 62px + 14px 呼吸，贴着顶栏吸住，不先空一截再吸。 */
.art-main { min-width: 0; }
.art-rail { position: sticky; top: 76px; }

/* 本篇要点：一份贴在右栏的便签纸。
   压在标题与正文之间的是这篇的核心结论，也是可以直接被 AI 引用的摘要。 */
.brief {
  padding: 22px 24px 20px;
  background: var(--paper-2);
  border-radius: 2px;
}
.brief .b-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold-ink);
  margin-bottom: 12px;
}
.brief .b-label::before { content: "§ "; font-family: var(--num); font-weight: 400; }
.brief p + p { margin-top: 11px; }
.brief p,
.brief li {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink);
  text-wrap: pretty;
}
.brief strong { font-weight: 600; }
.brief ul { margin: 12px 0 0; }
.brief li {
  position: relative;
  padding-left: 17px;
  margin-bottom: 8px;
}
.brief li:last-child { margin-bottom: 0; }
.brief li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 7px;
  height: 1px;
  background: var(--gold-ink);
}

/* ---------- 文尾接力 ---------- */

.art-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: clamp(34px, 4vw, 46px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.pager-item {
  display: block;
  padding: 16px 18px;
  border-radius: 2px;
  transition: background .22s var(--ease);
}
.pager-item:hover { background: var(--paper-2); }
.pager-item .pi-k {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2);
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.pager-item .pi-t {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
  transition: color .22s var(--ease);
}
.pager-item:hover .pi-t { color: var(--gold-ink); }
.pager-item.is-next { text-align: right; }
.pager-item .pi-k i { font-style: normal; font-family: var(--num); }
.pager-item.is-next .pi-k i { margin-left: 4px; }
.pager-item.is-prev .pi-k i { margin-right: 4px; }

/* ---------- 正文排版 ---------- */

.prose {
  max-width: var(--measure);
  counter-reset: h2c;
  padding-bottom: 4px;
}

.prose h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.45;
  color: var(--ink);
  margin-top: clamp(42px, 5vw, 58px);
  margin-bottom: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  counter-increment: h2c;
  text-wrap: pretty;
}
/* 编号只有一个用处：让读者和 AI 都能说「第 03 节」。它不抢标题的字重 */
.prose h2::before {
  content: counter(h2c, decimal-leading-zero);
  display: block;
  font-family: var(--num);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--gold-ink);
  margin-bottom: 8px;
}

.prose h3 {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-top: 30px;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-weight: 600;
  text-wrap: pretty;
}

.prose p {
  font-size: 17.5px;
  line-height: 1.88;
  color: var(--ink);
  margin-bottom: 18px;
  text-wrap: pretty;
}

.prose strong { color: var(--ink); font-weight: 600; }

/* 首段直答：文章的第 0 段，也是 AI 最先摘的一句。
   只用「字号大一号 + 一道细线 + 留白」把它分开，
   不用彩色单侧边线（那是编辑器默认做法），也不加纸底（会变成又一个便签）。
   线放在上方：与眉标/标题区划开，不和下方 h2 的 border-top 抢同一条缝。 */
.prose .prose-lead {
  font-size: 18.5px;
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
  margin-bottom: clamp(24px, 2.6vw, 34px);
  text-wrap: pretty;
}
/* 下方留白多于上方，靠节奏建立「第 0 段」的独立感，零新增元素 */
.prose .prose-lead + h2 { border-top: 0; padding-top: 0; margin-top: clamp(48px, 5.4vw, 64px); }

.prose a {
  color: var(--gold-ink);
  border-bottom: 1px solid rgba(160, 118, 46, .38);
  transition: border-color .2s;
}
.prose a:hover { border-bottom-color: var(--gold-ink); }

.prose ul, .prose ol { margin: 0 0 20px; padding-left: 0; }
.prose ul > li, .prose ol > li {
  list-style: none;
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 10px;
  text-wrap: pretty;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .86em;
  width: 8px;
  height: 1px;
  background: var(--gold-ink);
}
.prose ol { counter-reset: olc; }
.prose ol > li { counter-increment: olc; padding-left: 30px; }
.prose ol > li::before {
  content: counter(olc) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--num);
  font-size: 15px;
  line-height: 1.85;
  color: var(--gold-ink);
}

/* ---------- 表格（AI 抽取最喜欢的结构） ---------- */

.prose .tbl-wrap {
  margin: 24px 0 30px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.75;
}
.prose thead th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .03em;
  padding: 11px 13px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.prose tbody td {
  padding: 13px 13px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  vertical-align: top;
  text-wrap: pretty;
}
.prose tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.prose tbody td:first-child {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}

/* 对比表：左列放概念 */
.prose .tbl-cmp tbody td:first-child { width: 24%; }

/* ---------- 引用/来源 ---------- */

.src {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
  margin-top: -6px;
  margin-bottom: 26px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  text-wrap: pretty;
}
.src b { font-weight: 400; color: var(--ink); }

.quote-box {
  margin: 26px 0;
  padding: 22px 26px;
  background: var(--paper-2);
  border-radius: 2px;
}
.quote-box p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 10px;
  text-wrap: pretty;
}
.quote-box cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  color: var(--ink);
  opacity: .82;
}

/* ---------- 提示框 ---------- */

.note {
  margin: 26px 0;
  padding: 20px 24px;
  background: var(--paper-3);
  border-radius: 2px;
}
.note .note-t {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: .06em;
}
.note p { font-size: 15.5px; line-height: 1.85; margin-bottom: 0; color: var(--ink); text-wrap: pretty; }
.note.warn { background: var(--warn-bg); }
.note.warn .note-t { color: var(--gold-ink); }

/* ---------- 边界声明 ---------- */

.boundary {
  margin-top: clamp(40px, 5vw, 58px);
  padding: 26px 28px;
  background: var(--navy);
  border-radius: 2px;
  color: #E8EEF4;
}
.boundary h2 {
  color: #fff;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  font-size: 19px;
  margin-bottom: 14px;
}
.boundary h2::before { display: none; }
.boundary ul > li { color: #C4D2DE; font-size: 15.5px; line-height: 1.8; }
.boundary ul > li::before { background: var(--gold-l); }
.boundary p { color: #C4D2DE; font-size: 15.5px; line-height: 1.85; margin-bottom: 0; text-wrap: pretty; }
.boundary .boundary-foot { margin-top: 16px; }
.boundary strong { color: #FFFFFF; font-weight: 600; }

/* ---------- 数据来源清单 ---------- */

.sources-list {
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  max-width: var(--measure);
}
.sources-list h2 {
  font-size: 15px;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: .06em;
}
.sources-list ol { counter-reset: sl; }
.sources-list li {
  counter-increment: sl;
  list-style: none;
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 12px;
  text-wrap: pretty;
}
.sources-list li::before {
  content: "[" counter(sl) "]";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--num);
  color: var(--gold-ink);
  font-size: 12.5px;
}
/* 每条独立成块，URL 单独一行，不参与「每行字数」计算 */
.sources-list li.src-list {
  display: block;
  word-break: normal;
}
.sources-list li.src-list .u {
  display: block;
  margin-top: 3px;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-family: var(--num);
  font-size: 13px;
  letter-spacing: .01em;
}
.sources-list a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  word-break: break-all;
  overflow-wrap: anywhere;
  transition: color .2s, border-color .2s;
}
.sources-list a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }

/* ---------- 文末行动区（只在列表页用：文章页的文末一律走 .related，避免两块重复） ---------- */

.art-cta {
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(28px, 4vw, 42px);
  background: var(--paper-2);
  border-radius: 2px;
  max-width: var(--measure);
}
.art-cta h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.5;
  text-wrap: pretty;
}
.art-cta p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 22px;
  max-width: 34em;
  text-wrap: pretty;
}
.art-cta .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* 次要按钮：沿用 .btn 的语法，只换描边来源（首页的 ghost 是白色描边） */
.art-page .btn-outline { border-color: rgba(22, 34, 44, .32); color: var(--ink); }
.art-page .btn-outline:hover { border-color: var(--ink); background: rgba(22, 34, 44, .05); }

/* ---------- 相关阅读 ---------- */

.related {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  max-width: var(--measure);
}
.related > h2 {
  font-size: 15px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
  margin-bottom: 18px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
/* 相关阅读不做描边白卡：用纸底 + 悬停抬起，与正文里的引用块同一材质 */
.rel-card {
  display: block;
  padding: 20px 22px;
  border-radius: 2px;
  background: var(--paper-2);
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.rel-card:hover { background: var(--paper-3); transform: translateY(-2px); }
.rel-card .rc-tag {
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--gold-ink);
  display: block;
  margin-bottom: 8px;
}
.rel-card .rc-t {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  display: block;
  text-wrap: pretty;
}
.rel-card .rc-d {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-2);
  display: block;
  margin-top: 8px;
  text-wrap: pretty;
}

/* ---------- 文章列表页 ---------- */

.list-hero {
  max-width: 760px;
  padding-top: clamp(30px, 5vw, 56px);
  padding-bottom: clamp(26px, 4vw, 40px);
}
.list-hero h1 {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.28;
  color: var(--ink);
  margin-bottom: 18px;
}
.list-hero p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
  max-width: 34em;
  text-wrap: pretty;
}

/* 说明区：并入 list-hero，不再单独挂一条彩色侧边线 */
.list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink);
}
.list-meta span { display: inline-flex; align-items: baseline; gap: 7px; }
.list-meta .k { color: var(--ink-2); letter-spacing: .04em; }
.list-meta .v { font-family: var(--num); letter-spacing: .02em; }

/* 列表用「编号 | 标题+摘要 | 日期」的横向栅格，
   复用首页 index-row 的语法，避免只有几条时右侧空一大片。 */
.list-group { margin-bottom: clamp(42px, 5.5vw, 66px); max-width: 900px; }
.list-group-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.list-group-head h2 {
  font-size: clamp(19px, 2.3vw, 24px);
  color: var(--ink);
  line-height: 1.4;
}
.list-group-head .lg-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-2);
  font-family: var(--num);
}

.art-list { border-top: 0; }
.art-list > li { border-bottom: 1px solid var(--line-soft); }
.art-list a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 168px;
  gap: 0 22px;
  align-items: start;
  padding: 22px 0;
  transition: padding-left .24s var(--ease);
}
.art-list a:hover { padding-left: 10px; }
.art-list a:hover .al-t { color: var(--gold-ink); }
.al-no {
  font-family: var(--num);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--gold-ink);
  padding-top: 5px;
}
.al-body { min-width: 0; }
.al-t {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  display: block;
  margin-bottom: 7px;
  transition: color .22s var(--ease);
  text-wrap: pretty;
}
.al-d {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  display: block;
  max-width: 34em;
  text-wrap: pretty;
}
.al-m {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: .02em;
  text-align: right;
  padding-top: 3px;
}
.al-m .badge {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--gold-ink);
  border: 1px solid rgba(160, 118, 46, .38);
  border-radius: 2px;
  padding: 1px 7px;
}
.art-list > li.soon a { cursor: default; }
.art-list > li.soon a:hover { padding-left: 0; }
/* 灰色「即将发布」是有意弱化：它不该看起来和可点的文章一样重 */
.art-list > li.soon .al-t { color: var(--ink-3); }
.art-list > li.soon .al-no { color: var(--ink-3); }
.art-list > li.soon .al-d { color: var(--ink-2); }
.art-list > li.soon .al-m .badge { color: var(--ink-2); border-color: var(--line); }

/* ---------- 响应式 ---------- */

@media (max-width: 1080px) {
  .art-hero,
  .art-grid { grid-template-columns: minmax(0, 1fr); }
  .art-hero { gap: 22px; }
  .art-hero .art-card { max-width: 420px; }
  .art-rail { position: static; }
  .brief { max-width: 560px; }
}

@media (max-width: 980px) {
  .prose { max-width: 100%; }
}

@media (max-width: 640px) {
  body.art-page main { padding-top: 56px; }
  .art-hero { padding-top: 18px; }
  .art-h1 { font-size: clamp(25px, 7.2vw, 31px); line-height: 1.36; }
  .art-eyebrow { margin-bottom: 14px; font-size: 12.5px; }
  .art-card { padding: 18px 18px 8px; }
  .art-grid { padding-top: 22px; gap: 12px; }
  .brief { padding: 20px 18px 18px; }
  .prose p, .prose ul > li, .prose ol > li { font-size: 16.5px; line-height: 1.85; }
  .prose table { font-size: 14px; }
  .prose thead th, .prose tbody td { padding: 10px 10px; }
  .prose .tbl-cmp tbody td:first-child { width: 30%; }
  .quote-box { padding: 18px 18px; }
  .quote-box p { font-size: 16px; }
  .note { padding: 18px 18px; }
  .boundary { padding: 22px 20px; }
  .boundary ul > li, .boundary p { font-size: 15px; }
  .art-cta { padding: 24px 18px; }
  .art-cta .cta-row .btn { width: 100%; }
  .related-grid { grid-template-columns: 1fr; }
  .art-pager { grid-template-columns: 1fr; }
  .pager-item.is-next { text-align: left; }
  .pager-item.is-next .pi-k i { margin-left: 0; margin-right: 4px; }
  .pager-item.is-next .pi-k i { transform: rotate(180deg); display: inline-block; }
  .list-hero { padding-top: 24px; }
  .list-hero p { font-size: 16px; }
  .al-t { font-size: 17.5px; }
  .al-d { font-size: 14px; }
  /* 移动端横向栅格塌成「编号 + 正文」，日期/徽标落到标题下方 */
  .art-list a { grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; padding: 18px 0; }
  .al-no { padding-top: 4px; }
  .al-m { grid-column: 2; justify-content: flex-start; text-align: left; padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .art-page *, .art-page *::before, .art-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- 待归并到 styles.css 的全站项 ----------
   以下只记录，不在本文件覆盖，因为改这里会连带首页：
   1. .head-phone span（「香港」）3.21:1 —— 首页顶栏同样存在；
   2. .foot-base / .credits 3.76:1 —— 文章页已在上面用 body.art-page 局部修正，
      首页仍需同步；
   3. .foot-brand p span、.foot-col a 透明度偏低，建议统一提到 .62 以上。
   ------------------------------------------------------------ */
/* ---------- 待归并到 styles.css 的全站项 ---------- */
/* 1. --gold-ink (#7A561F)：首页 .sec-no 等浅底金色小字同为 3.86:1，回流 :root 后一并修。
   2. body.art-page .foot-base 的 .62 不透明度：首页 .foot-base 仍是 .42（3.76:1），应统一。
   3. 断点只有 980px / 640px 两档，与首页一致；新增内容若需要第三档，请先在 styles.css 里定。 */