/* =========================================================
   文章页样式（/articles、/articles/{slug}）
   ---------------------------------------------------------
   这两个页面**不是静态文件**，是平台后端渲染出来的（见平台仓库
   backend/app/services/site_pages.py）。页面里已经内联了一份能独立看的基础排版，
   这个文件负责把它对齐到官网自己的调性：字号、行距、色彩、留白。

   加载顺序是「内联在前、本文件在后」，所以这里写的规则会覆盖内联那份。
   反过来则会出现文章页和官网长得不一样的情况。

   与 site.css 的关系：本文件只在文章页被引用，首页不加载它；
   两边共用 site.css 里的 :root 色板与字体变量，改品牌色只改那一处。
   ========================================================= */

/* ---------- 顶栏与页脚：与首页 .topbar / .footer 视觉一致 ---------- */
.doc-topbar {
  background: rgba(251, 250, 247, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* 顶栏高度同时决定锚点跳转要让出多少空间（后端渲染的基础样式里
   scroll-padding-top 就是按这个变量算的），所以只改这一个值。 */
:root { --doc-topbar-h: 68px; }
.doc-topbar__inner { height: var(--doc-topbar-h); }
/* 这一条在基础样式里已经有一份，这里再写一遍是因为 site.css 夹在中间：
   学校站的 site.css 给首页写了 html{scroll-padding-top:84px}，它按首页 72px 的
   顶栏调的，会盖掉基础样式里按文章页顶栏算出来的值。article.css 最后加载，
   写在这里才是最终生效的那一份。 */
html { scroll-padding-top: calc(var(--doc-topbar-h) + 20px); }
.doc-brand b { font-size: 15.5px; font-weight: 800; letter-spacing: .01em; }
.doc-brand small { color: var(--ink-4); letter-spacing: .18em; }
.doc-nav { font-size: 14.5px; font-weight: 600; }
.doc-nav a { color: var(--ink-2); }
.doc-nav a:hover { color: var(--brand); }

.doc-footer { background: var(--deep); border-top: none; color: var(--deep-text); }
.doc-footer span { color: var(--deep-text); opacity: .85; }

.doc-crumb { color: var(--ink-4); letter-spacing: .01em; }

/* ---------- 正文 ---------- */
.article {
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22, 33, 29, .04), 0 12px 40px -28px rgba(22, 33, 29, .35);
}
.article h1 {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -.005em;
}
/* 摘要用衬线，和正文拉开一层——读者一眼能认出这是"这篇讲什么"，不是正文第一段 */
.article__lede {
  font-family: var(--serif);
  font-size: 16px;
  border-left-color: var(--brand);
  background: var(--brand-soft);
  color: var(--ink-2);
}
.article__cat {
  letter-spacing: .02em;
  font-size: 12.5px;
}
.article__toc { border-color: var(--brand-line); background: var(--white); }
.article__toc b { letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; color: var(--brand); }
.article__toc a:hover { color: var(--brand); }

.article__body { font-size: 16.5px; line-height: 1.95; letter-spacing: .01em; }
.article__body h2 { font-weight: 800; letter-spacing: -.003em; border-top-color: var(--line); }
.article__body h3 { font-weight: 700; color: var(--ink-2); }
.article__body a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; }
.article__body a:hover { color: var(--brand-deep); }
.article__body blockquote {
  border-left-color: var(--brand-line);
  background: var(--paper-2);
  font-family: var(--serif);
}
.article__body th { background: var(--paper-2); font-weight: 700; }
.article__body pre { background: var(--deep); color: var(--deep-text); }

.article__nav a:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.article__nav span { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--brand); }

/* ---------- 右侧栏 ---------- */
.side-card {
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22, 33, 29, .03);
}
.side-card h2 { color: var(--ink-3); text-transform: uppercase; }
.side-cats a { color: var(--ink-2); }
.side-cats a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.side-cats b { color: var(--ink-4); }
.side-posts li + li { border-top-color: var(--line); }
.side-posts time { color: var(--ink-4); font-family: var(--mono); }
.side-posts a { color: var(--ink); }
.side-posts a:hover span { color: var(--brand); }
.side-more { color: var(--brand); }

/* ---------- 列表页 ---------- */
.doc-card { transition: border-color .18s ease, transform .18s ease; }
.doc-card:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.doc-card h2 { font-weight: 700; letter-spacing: .005em; }
.doc-card__meta { letter-spacing: .04em; }
.doc-filters a:hover { border-color: var(--brand-line); color: var(--brand); }
.doc-pager a:hover { border-color: var(--brand-line); color: var(--brand); }

/* 尊重系统的"减少动效"设置，与首页同一条口径 */
@media (prefers-reduced-motion: reduce) {
  .doc-card { transition: none; }
  .doc-card:hover { transform: none; }
}

/* ---------- 打印：文章可以直接打出来给校内传阅 ---------- */
@media print {
  .doc-topbar, .doc-footer, .doc-crumb, .article__nav, .doc-pager, .doc-filters { display: none !important; }
  body { background: #fff; }
  .article { border: none; box-shadow: none; padding: 0; max-width: none; }
  .article__body a { text-decoration: none; color: inherit; }
  /* 打出来的纸上点不了链接，把地址跟在后面 */
  .article__body a[href^="http"]::after { content: "（" attr(href) "）"; font-size: 11px; color: #666; }
}