/* 人工智能通识教育红皮书 · 网页版
   版式沿用 MIT AI & Education Report，配色与控件沿用清华 AIGE 体系页 */

:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --ink: #1d2340;
  --body: #2b3157;
  --muted: #5d6685;
  --line: #d8def0;
  --brand: #7a33b6;
  --brand-deep: #5b258a;
  --brand-soft: #f3ecfb;
  --accent: #4d82ff;
  --shadow: 0 18px 48px rgba(49, 37, 98, 0.08);
  --max: 1160px;
  --toc-w: 318px;
  --head-h: 74px;
  --anchor-off: 98px;   /* sticky header + breathing room */
}

* { box-sizing: border-box; }
/* the document is ~230 000px tall: smooth scrolling would crawl on every jump */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

.skip { position: fixed; z-index: 99; top: -80px; left: 16px; padding: 12px 18px;
  border-radius: 999px; background: #fff; color: var(--brand-deep); font-weight: 700;
  box-shadow: var(--shadow); }
.skip:focus { top: 14px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--head-h);
  background: rgba(246, 247, 251, 0.88);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  width: min(calc(100% - 48px), var(--max));
  min-height: var(--head-h);
  margin: 0 auto;
  /* gap 2026-09-10 从 20px 收到 16px，与导航胶囊的内边距一并，
     给中心皮肤那个 19 个字的品牌名腾出余量（详见 .site-nav a）。 */
  display: flex; align-items: center; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 2px solid rgba(122, 51, 182, 0.2); border-radius: 50%;
  background: #fff; color: var(--brand);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 0.92rem; }
.brand-copy small { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.04em; }

.site-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 5px; border: 1px solid rgba(216, 222, 240, 0.86);
  border-radius: 999px; background: rgba(255, 255, 255, 0.7);
}
/* 内边距 2026-09-10 从 13px 收到 11px。导航栏加到五项之后，中心皮肤的页头
   （品牌名 19 个字，比体系长 54px）在 1160px 里**一点余量都不剩**，品牌那行
   中文会折成两行——而 .header-inner 卡在 var(--max)，多宽的屏幕都是 1160px，
   媒体查询救不了这一处，只能让内容自己变窄。五项各省 4px，共 20px。 */
.site-nav a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px;
  border-radius: 999px; color: #4a5270; font-size: 0.84rem; white-space: nowrap;
}
.site-nav a:hover { background: #fff; color: var(--brand-deep); }
.site-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; }
.nav-button {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 18px; flex: none;
  border-radius: 999px; color: #fff; font-size: 0.84rem; font-weight: 700;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow: 0 8px 18px rgba(77, 130, 255, 0.18);
}
.nav-toggle { display: none; }

/* ---------- language switch ---------- */
/* Outlined, not filled: the PDF button is the one call to action in the
   header, and a second solid pill next to it competes with it. */
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 15px; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--brand-deep); font-size: 0.84rem; font-weight: 700;
  white-space: nowrap;
}
.lang-toggle:hover { background: #fff; border-color: var(--brand); }

/* ---------- 全书核心概念 (PDF page 5) ---------- */
.concepts h2 { margin-bottom: 6px; }
.concepts-sub { margin: 0 0 26px; color: var(--muted); font-size: 1rem; }
.concept-grid { display: grid; gap: 16px; }
.concept {
  padding: 16px 22px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 12px; background: var(--surface);
}
/* override .doc h3/h4 — inside a card the generous chapter spacing is wrong */
.doc .concept h3 {
  margin: 0 0 8px; padding: 0; border: 0;
  color: var(--brand-deep); font-size: 1.05rem; font-weight: 700; line-height: 1.4;
}
.concept p { margin: 0 0 6px; font-size: 0.97rem; }
.doc .concept h4 {
  margin: 14px 0 6px; color: var(--ink);
  font-size: 0.92rem; font-weight: 700; line-height: 1.5;
}
/* the six dimensions and the four-capacity cycle read as a run, not a list */
.chain p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; }
.chain span { white-space: nowrap; }
/* · and ⟶ are laid out on the Latin baseline, which sits lower than the optical
   centre of the Han glyphs beside them — so they read as sunken and undersized.
   Lift and enlarge them to line up with the characters rather than the baseline. */
.chain .sep {
  color: var(--muted); line-height: 1;
  font-size: 1.15em; transform: translateY(-0.06em);
}
.chain-arrow .sep { font-size: 1.45em; transform: translateY(-0.11em); }
.chain-arrow span:not(.sep) { font-weight: 700; color: var(--brand-deep); }

/* ---------- machine-translation notice (English edition only) ---------- */
/* Not dismissible: a reader who lands mid-document from a search result
   should still meet it, so it also repeats in the footer. */
.mt-banner {
  margin: 0 0 34px; padding: 16px 20px;
  border: 1px solid #e6d6a8; border-left: 4px solid #c99a2e;
  border-radius: 12px; background: #fdf8ec;
  color: #5c4a1e; font-size: 0.92rem; line-height: 1.65;
}
.mt-banner strong { color: #4a3a12; }
.mt-banner a { color: var(--brand-deep); font-weight: 700; white-space: nowrap; }
.mt-banner a:hover { text-decoration: underline; }

/* ---------- hero ---------- */
.hero {
  padding: 68px 24px 72px;
  text-align: center; color: #fff;
  background:
    radial-gradient(circle at 50% 120%, rgba(255,255,255,0.16) 0, transparent 46%),
    linear-gradient(180deg, #7c379f 0%, #712f96 55%, #6c2f90 100%);
}
.hero-inner { width: min(100%, 880px); margin: 0 auto; }
.hero .eyebrow {
  margin: 0 0 18px; color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.14; }
.hero .sub {
  margin: 16px 0 0; font-size: clamp(1rem, 2vw, 1.28rem); font-weight: 500;
  color: rgba(255, 255, 255, 0.92); letter-spacing: 0.02em;
}
.hero .meta {
  margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; color: rgba(255, 255, 255, 0.72); font-size: 0.84rem;
}
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 全文页的 hero：左边一本书 ----------
   只有报告全文页带封面。附录页、贡献者页的标题是那一页自己的，
   旁边摆本书等于在说一件那页并不讲的事。 */
.hero-book .hero-inner {
  width: min(100%, 1000px);
  display: flex; align-items: center; justify-content: center; gap: 52px;
  text-align: left;
}
.hero-book .hero-copy { flex: 1 1 0; min-width: 0; }
.hero-book .book {
  flex: none; width: 200px; height: auto; border-radius: 3px;
  /* 书脊侧一道暗边 + 落影，让平面的封面立起来 */
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.22) inset, 0 22px 46px rgba(20, 8, 40, 0.42);
}
.hero-book .eyebrow, .hero-book .meta, .hero-book .hero-actions { justify-content: flex-start; }
.hero-book .meta { justify-content: flex-start; }

@media (max-width: 860px) {
  /* 窄屏堆成一列，书缩小居中——横着排会把标题挤成每行两三个字 */
  .hero-book .hero-inner { flex-direction: column; gap: 28px; text-align: center; }
  .hero-book .book { width: 148px; }
  .hero-book .eyebrow, .hero-book .meta, .hero-book .hero-actions { justify-content: center; }
}
@media print { .hero-book .book { display: none; } }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
}
.button-primary { background: #fff; color: var(--brand-deep); }
.button-secondary { border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }

/* ---------- layout ---------- */
.layout {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto; padding: 56px 0 96px;
  display: grid; grid-template-columns: var(--toc-w) minmax(0, 1fr);
  gap: 56px; align-items: start;
}

/* 名单页与版权页没有侧栏目录：内容只有一屏多，正文居中占满 */
.layout-solo { grid-template-columns: minmax(0, 1fr); }
.layout-solo .doc { max-width: 820px; margin: 0 auto; }

/* ---------- table of contents ---------- */
.toc { position: sticky; top: calc(var(--head-h) + 20px); max-height: calc(100vh - var(--head-h) - 48px); overflow: auto; }
.toc-title { margin: 0 0 16px; font-size: 1.28rem; }
.toc nav { border-top: 1px solid var(--line); }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a {
  display: block; padding: 7px 10px 7px 12px;
  border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
  color: #40476b; font-size: 0.855rem; line-height: 1.5;
}
.toc a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.toc a.is-current { border-left-color: var(--brand); background: var(--brand-soft);
  color: var(--brand-deep); font-weight: 700; }
.toc-part > a { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.toc-chapter > a { padding-left: 20px; }
.toc-section { display: none; }
.toc-chapter.is-open .toc-section { display: block; }
.toc-section a { padding-left: 34px; color: var(--muted); font-size: 0.8rem; }
.toc-foot { margin: 22px 0 8px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.76rem; line-height: 1.7; }

/* ---------- document ---------- */
.doc { min-width: 0; max-width: 782px; }
.doc p, .doc li { color: var(--body); font-size: 1.0625rem; line-height: 1.95; }
.doc p { margin: 0 0 1.45em; }
.doc > section, .doc h2, .doc h3, .doc h4 { scroll-margin-top: var(--anchor-off); }

.part-open { margin: 76px 0 8px; padding-top: 40px; border-top: 2px solid var(--ink); }
.part-open:first-child { margin-top: 0; }
.part-open .label { display: block; margin-bottom: 12px; color: var(--brand);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; }
.part-open h2 { font-size: clamp(1.9rem, 3.6vw, 2.65rem); line-height: 1.25; }
.part-open .rule { height: 3px; margin-top: 22px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%); }

.chapter { margin-top: 64px; }
.chapter > .num { display: block; margin-bottom: 10px; color: var(--brand);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; }
.chapter > h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.3; }
.doc h3 { margin: 52px 0 18px; font-size: 1.42rem; line-height: 1.45; }
.doc h4 { margin: 36px 0 14px; font-size: 1.1rem; line-height: 1.5; color: #333b63; }
.doc h3 .n, .doc h4 .n { margin-right: 0.5em; color: var(--brand); font-variant-numeric: tabular-nums; }

.abstract {
  margin: 28px 0 8px; padding: 26px 28px;
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
}
.abstract .lab { display: block; margin-bottom: 10px; color: var(--brand);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; }
.abstract p { margin: 0; font-size: 0.97rem; line-height: 1.85; color: #3a4166; }
.keywords { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.keywords span { padding: 5px 11px; border-radius: 999px; background: var(--brand-soft);
  color: var(--brand-deep); font-size: 0.76rem; }

.doc ul, .doc ol.numbered { margin: 0 0 1.45em; padding-left: 1.35em; }
.doc li { margin-bottom: 0.6em; }
.doc li::marker { color: var(--brand); }

figure.tbl { margin: 34px 0; }
figure.tbl figcaption { margin-bottom: 12px; color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.tbl-scroll { overflow-x: auto; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tbl th, .tbl td { padding: 13px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); line-height: 1.7; }
.tbl thead th { background: var(--brand-soft); color: var(--brand-deep);
  font-weight: 700; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- 流程图 ----------
   书里的 TikZ 图是线性链，印成蛇形回折：第一行从左往右，第二行从右往左，如此往复。
   网页照这个排法来（2026-09-14 改的，此前是「一律从左往右折行」）——**折返是必须的，
   不是好看**：行末那张卡片的下一步就在它正下方，往下的箭头才指得对。折行不折返的话，
   图11.1 里 03 下面那个 ↓ 指的是正下方的 06，而下一步其实是最左边的 04，指错了。

   哪一张卡片位于行末取决于列数，所以排法和箭头都写在样式里，不写进结构：
   三列时第 4、5、6 张（以及每隔六张）反向摆，两列时第 3、4 张（每隔四张）反向摆，
   单列时不折返。反向行里的箭头指左，行末指下。反向摆用的是显式 grid-column，
   容器因此必须是 `grid-auto-flow: row dense`——稀疏排布下光标只进不退，
   第 5 张要求第 2 列时会被挤到下一行去。 */
figure.flow { margin: 38px 0; }
figure.flow figcaption { margin-top: 30px; color: var(--muted);
  font-size: 0.84rem; font-weight: 700; text-align: center; }
.flow .chain { display: grid; grid-auto-flow: row dense; gap: 34px 30px; }
.flow .step { position: relative; display: flex; flex-direction: column;
  justify-content: center; padding: 14px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); text-align: center; line-height: 1.55; }
.flow .step b { display: block; color: var(--ink); font-size: 0.88rem; }
.flow .step span { display: block; color: var(--muted); font-size: 0.8rem; }
.flow .step.key { border-color: var(--brand); background: var(--brand-soft); }
.flow .step.key b { color: var(--brand-deep); }
/* 正向行：箭头指右。反向行与行末在各自的断点里改写。 */
.flow .step:not(:last-child)::after { content: "\2192"; position: absolute;
  right: -22px; top: 50%; transform: translateY(-50%);
  color: var(--brand); font-size: 1.05rem; line-height: 1; }

/* ⚠️ 三档写成互不重叠的区间，不是层层覆盖：媒体查询不提高优先级，
   而 `:nth-child(6n+5)` 比 `.step` 具体，窄屏里照样会盖掉窄屏自己的规则
   （改之前第 5 张在两列下就还挂着三列的左箭头）。 */
@media (min-width: 901px) {                                   /* 三列 */
  .flow .chain { grid-template-columns: repeat(3, 1fr); }
  .flow .step:nth-child(6n+4) { grid-column: 3; }
  .flow .step:nth-child(6n+5) { grid-column: 2; }
  .flow .step:nth-child(6n+6) { grid-column: 1; }
  .flow .step:nth-child(6n+4):not(:last-child)::after,
  .flow .step:nth-child(6n+5):not(:last-child)::after { content: "\2190";
    right: auto; left: -22px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .flow .step:nth-child(3n):not(:last-child)::after { content: "\2193";
    right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%); }
}
@media (min-width: 561px) and (max-width: 900px) {            /* 两列 */
  .flow .chain { grid-template-columns: repeat(2, 1fr); }
  .flow .step:nth-child(4n+3) { grid-column: 2; }
  .flow .step:nth-child(4n+4) { grid-column: 1; }
  .flow .step:nth-child(4n+3):not(:last-child)::after { content: "\2190";
    right: auto; left: -22px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .flow .step:nth-child(2n):not(:last-child)::after { content: "\2193";
    right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%); }
}
@media (max-width: 560px) {                                   /* 单列，不折返 */
  .flow .chain { grid-template-columns: 1fr; }
  .flow .step:not(:last-child)::after { content: "\2193";
    right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%); }
}

/* ---------- 贡献者名单 ----------
   书里排成五列表格，网页上列宽没有含义，排成一行行姓名即可 */
.credits .credit { margin: 0 0 26px; }
.credits .credit h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--brand-deep); }
.credits .credit p { margin: 0; color: var(--body); font-size: 0.92rem; line-height: 2; }
/* 名单后的两条小字说明，书里是 \footnotesize 的星号条目 */
.credits .credit-notes { margin: 26px 0 0; padding: 0; list-style: none; }
.credits .credit-notes li { position: relative; margin: 0 0 8px; padding-left: 1.1em;
  color: var(--muted); font-size: 0.84rem; line-height: 1.85; }
.credits .credit-notes li::before { content: "*"; position: absolute; left: 0; }
/* 名单页的 h2 与 hero 大标题同名，留给文档大纲与 verify.py，不占版面 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---------- 版权与开放许可 ---------- */
.license p { margin: 0 0 14px; font-size: 0.94rem; line-height: 1.9; }
/* 开放共建页只有一个小标题，它就是那一页的 h2（版权页的是 h3，上面还罩着
   一个 sr-only 的页标题）。两种都按小标题排，别让它落进 .chapter > h2 的大字号。 */
.license h3, .license > h2:not(.sr-only) {
  margin: 30px 0 12px; font-size: 1.02rem; color: var(--brand-deep); }
.license > h2:not(.sr-only):first-child { margin-top: 0; }
.license .lic-field { display: flex; flex-wrap: wrap; gap: 0 .2em; margin: 0 0 8px; }
.license .lic-field strong { flex: none; color: var(--ink); }
.license a { color: var(--brand-deep); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.license a:hover { color: var(--accent); }

.tbl th:first-child, .tbl td:first-child { min-width: 6.5em; }

.refs { margin: 0; padding: 0; list-style: none; }
.refs li { margin-bottom: 1.1em; padding-left: 2em; text-indent: -2em;
  font-size: 0.92rem; line-height: 1.8; color: var(--body); word-break: break-word; }

.sig { margin: 2.4em 0 0; text-align: right; color: var(--muted); font-size: 0.95rem; line-height: 1.9; }

/* ---------- 开放共建：页内索引、解读列表、老师名单、详情页 ----------
   2026-09-27 起开放共建页下挂「解读」「老师反馈」两栏，详情页各自成页。 */
.ob-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
.ob-jump a {
  padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--brand-deep); font-size: 0.88rem; font-weight: 700;
}
.ob-jump a:hover { border-color: var(--brand); background: var(--brand-soft); }

/* 三栏标题一个样子。声明那一栏的 h2 同时吃着 .license 的小标题样式，
   选择器写到同样的权重再往后排，才压得住 */
.ob-sec { margin-top: 56px; scroll-margin-top: var(--anchor-off); }
.ob-sec:first-of-type { margin-top: 0; }
.ob-sec > h2, .license.ob-sec > h2:not(.sr-only) {
  margin: 0 0 18px; padding-left: 14px; border-left: 4px solid var(--brand);
  font-size: 1.4rem; line-height: 1.35; color: var(--ink);
}
/* 共建反馈栏标题下那句邀请语，引出页底声明里的联系邮箱 */
.doc .ob-invite { margin: 0 0 18px; }

.ob-news { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
/* .doc li 给每条列表项留的 0.6em 下边距在这两处多余，间距交给 gap */
.doc .ob-news li, .doc .ob-names li { margin: 0; }
.ob-news a {
  display: block; padding: 20px 24px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.ob-news a:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.ob-news-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px;
  color: var(--brand); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; }
.ob-news-meta time { color: var(--muted); font-weight: 500; }
.ob-news-title { display: block; color: var(--ink); font-size: 1.12rem; line-height: 1.5; }
.ob-news a:hover .ob-news-title { color: var(--brand-deep); }
.ob-news-sum { display: block; margin-top: 8px; color: var(--muted); font-size: 0.9rem; line-height: 1.75; }
.ob-news-sum strong { font-weight: 500; }

.doc .ob-names { margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.ob-names a {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.06em;
  transition: border-color .15s, background .15s;
}
.ob-names a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }

/* 详情页 hero：文章标题长，字号比书的 hero 收一档；不带书的署名行 */
.hero-ob { padding: 56px 24px 60px; }
.hero-ob h1 { font-size: clamp(1.75rem, 3.8vw, 2.7rem); line-height: 1.3; }

.ob-lead { margin: 0 0 36px; padding: 20px 24px; border-radius: 14px;
  background: var(--brand-soft); }
.ob-lead p { margin: 0 0 0.6em; color: #3a4166; font-size: 0.95rem; line-height: 1.85; }
.ob-lead p:last-child { margin-bottom: 0; }
.ob-article { margin-top: 0; }
.ob-article h2 { margin: 48px 0 16px; font-size: 1.36rem; line-height: 1.45; color: var(--ink); }
.ob-article h2:first-child { margin-top: 0; }
.ob-article h3 { margin: 32px 0 12px; font-size: 1.1rem; line-height: 1.55; color: var(--brand-deep); }
.ob-article strong { color: var(--ink); }
.ob-article .cite { font-size: 0.72em; line-height: 0; }
.ob-article .cite a { color: var(--brand); }
.ob-refs li { scroll-margin-top: var(--anchor-off); }
.ob-refs .ref-n { color: var(--brand); }
.ob-refs a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; word-break: break-all; }
.ob-hr { margin: 36px auto; width: 64px; border: 0; border-top: 2px solid var(--line); }
.ob-article .tbl td:first-child { min-width: 7em; }
.ob-article .tbl td:nth-child(2) { min-width: 12em; }
.ob-article .tbl-note { margin: 12px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.7; }

.ob-pager { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.ob-pager-prev, .ob-pager-next { display: grid; gap: 2px; min-width: 0; }
.ob-pager-next { text-align: right; }
.ob-pager small { color: var(--muted); font-size: 0.78rem; }
.ob-pager a span { color: var(--brand-deep); font-weight: 700; font-size: 0.92rem; line-height: 1.5; }
.ob-pager a:hover span { color: var(--accent); }
.ob-pager-back { padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--brand-deep); font-size: 0.86rem; font-weight: 700; white-space: nowrap; }
.ob-pager-back:hover { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 560px) {
  .ob-pager { grid-template-columns: 1fr 1fr; }
  .ob-pager-back { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .ob-news a { padding: 16px 18px; }
}

/* ---------- footer / back to top ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner { width: min(calc(100% - 48px), var(--max)); margin: 0 auto;
  padding: 40px 0; display: flex; flex-wrap: wrap; gap: 18px 40px;
  align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 0.82rem; line-height: 1.8; }
.footer-inner a { color: var(--brand-deep); font-weight: 700; }

.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 30;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  color: #fff; font-size: 1.1rem; box-shadow: 0 10px 26px rgba(77, 130, 255, 0.32);
  opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
}
.to-top.is-on { opacity: 1; visibility: visible; }

/* ---------- responsive ---------- */
/* 页头排不下时先收品牌文字：左上角的标本身就是回首页的链接，而导航栏少一项
   就没法用。⚠️ 这个档位是**按体系皮肤的品牌名**定的（16 个字，页头要 1057px）；
   中心皮肤那个名字 19 个字，要到 1181px，它自己的档位在 skin-center/override.css。
   2026-09-10 导航栏加到五项时量过：体系版在 1081px 上还剩 24px 余量。 */
@media (max-width: 1080px) {
  :root { --toc-w: 260px; }
  .layout { gap: 36px; }
  .brand-copy { display: none; }
}
@media (max-width: 860px) {
  :root { --anchor-off: 16px; }
  .site-header { position: static; }
  .header-inner { flex-wrap: wrap; gap: 10px; padding: 12px 0; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-copy { display: grid; min-width: 0; }
  .brand-copy strong { font-size: 0.82rem; }
  .brand-copy small { display: none; }
  .nav-button { order: 2; min-height: 36px; padding: 0 14px; }
  .lang-toggle { order: 1; min-height: 36px; padding: 0 12px; }
  .mt-banner { margin-bottom: 26px; padding: 14px 16px; font-size: 0.88rem; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
  .layout { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .toc { position: static; max-height: none; padding: 18px 20px;
    border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
  .toc[data-collapsed="true"] nav, .toc[data-collapsed="true"] .toc-foot { display: none; }
  .toc-title { display: flex; align-items: center; justify-content: space-between;
    margin: 0; cursor: pointer; }
  .toc-title::after { content: "▾"; color: var(--brand); }
  .toc[data-collapsed="true"] .toc-title::after { content: "▸"; }
  .toc[data-collapsed="true"] .toc-title { margin: 0; }
  .toc nav { margin-top: 14px; }
  .toc-chapter .toc-section { display: none; }
  .doc { max-width: none; }
  .to-top { right: 16px; bottom: 16px; }
}

/* ---------- print ---------- */
@media print {
  :root { --anchor-off: 0; }
  .site-header, .toc, .to-top, .hero-actions, .skip { display: none !important; }
  body { background: #fff; }
  .hero { padding: 0 0 24px; color: #000; background: none; text-align: left;
    border-bottom: 2px solid #000; }
  .hero .eyebrow, .hero .sub, .hero .meta { color: #000; }
  .hero .meta { justify-content: flex-start; }
  .layout { display: block; width: auto; padding: 0; }
  .doc { max-width: none; }
  .doc p, .doc li { font-size: 10.5pt; line-height: 1.75; color: #000; }
  .abstract, .tbl-scroll { box-shadow: none; border: 1px solid #bbb; }
  .chapter { break-before: page; }
  .part-open { break-before: page; }
  h2, h3, h4 { break-after: avoid; }
  figure.tbl, .abstract { break-inside: avoid; }
}

.doc p.footnote {
  margin: 30px 0 24px; padding-top: 14px;
  border-top: 1px solid var(--line);
  max-width: 34em; color: var(--muted); font-size: 0.86rem; line-height: 1.8;
}