/* ============================================================
   动态 · 文章页与列表页专属区块（news/*.html · news.html）
   依赖 aw.css 的 Design Tokens（颜色 / 字阶 / 圆角 / 容器 / 节奏），
   本文件只定义区块，不重复定义 token。

   与全站「容器无 max-width」的刻意偏离：
     长文没有行长上限就没法读。文章壳 .art 限宽 1360，正文段落限 41em
     （中文用 em 估行长：1em ≈ 1 个汉字，41em ≈ 一行 40 字）。
     图可以比正文宽（正文列 1040），形成「窄字宽图」的编辑排版节奏。
   ============================================================ */

/* ---------- 阅读进度线：贴视口顶部，紫罗兰 → 青柠，进度由 news.js 写在 --p ---------- */
.art-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--accent));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

.art { max-width: 1360px; margin-inline: auto; }

/* ---------- 面包屑 ---------- */
.art-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 36px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
}
.art-top a { border-bottom: 1px solid transparent; }
.art-top a:hover { color: var(--ink); border-bottom-color: var(--line); }
.art-top i { font-style: normal; color: var(--mut-2); }

/* ---------- 标题区 ---------- */
.art-head { padding-top: clamp(22px, 3vw, 44px); max-width: 1040px; }
.art-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mut);
}
.art-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--mut-2); }
.art-meta .cat {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--ink);
  border: 0.5px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}

/* 标题两层：上一行是合作双方的「锁定」，下一行是新闻本身 */
.art-title { margin-top: 20px; }
.art-title__lockup {
  display: block;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mut);
  margin-bottom: 0.5em;
}
.art-title__lockup em { font-style: normal; color: var(--violet); padding-inline: 0.18em; }
.art-title__main {
  display: block;
  font-size: clamp(32px, 5vw, 76px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 17em;
}
.art-sub {
  margin-top: 22px;
  max-width: 40em;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  color: var(--mut);
}

/* ---------- 主视觉：复用 aw.css 的 .band（21:9 视差照片带） ---------- */
.art-hero { margin-top: clamp(32px, 5vw, 56px); }

/* ---------- 信息表 ---------- */
.art-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 0.5px solid var(--line);
}
.art-facts > div { padding: 22px 24px 0 0; margin-right: 24px; border-right: 0.5px solid var(--line); }
.art-facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.art-facts dt { font-size: 13px; font-weight: 300; line-height: 20px; color: var(--mut); }
.art-facts dd { margin-top: 6px; font-size: 15px; font-weight: 500; line-height: 24px; }
.art-facts dd small { display: block; margin-top: 2px; font-size: 13px; font-weight: 300; color: var(--mut); }

/* ---------- 两栏：左侧粘性目录栏 · 右侧正文 ---------- */
.art-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1040px);
  gap: 0 clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(56px, 8vw, 112px);
}
.art-rail { position: sticky; top: 32px; }
.art-rail__label {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut-2);
}
.art-toc { display: flex; flex-direction: column; border-top: 0.5px solid var(--line); }
.art-toc a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--mut);
  transition: color 0.3s var(--ease);
}
.art-toc a b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--mut-2);
  transition: color 0.3s var(--ease);
}
.art-toc a:hover, .art-toc a.is-on { color: var(--ink); }
.art-toc a.is-on b { color: var(--violet); }

.art-rail__share { margin-top: 34px; }
.art-share { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.art-share > * {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  color: var(--mut);
  transition: color 0.3s var(--ease);
}
.art-share > *:hover { color: var(--ink); }
.art-share > *::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--accent);
  flex: none;
  transition: background-color 0.3s var(--ease);
}
.art-share .is-done { color: var(--violet); }
.art-share .is-done::before { background: var(--violet); }

/* ---------- 正文 ---------- */
.art-body { min-width: 0; }

/* 导语：比正文大一档，顶上一小截青柠线 */
.art-body .art-lede {
  position: relative;
  padding-top: 24px;
  max-width: 36em;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.art-body .art-lede::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 2px;
  background: var(--accent);
}

.art-sec { margin-top: clamp(48px, 6vw, 84px); }
.art-sec--tight { margin-top: clamp(28px, 4vw, 44px); }

.art-body p {
  max-width: 41em;
  font-size: 17px;
  font-weight: 300;
  line-height: 32px;
  color: rgba(34, 34, 34, 0.84);
}
.art-body p + p { margin-top: 1.25em; }
.art-body p b { font-weight: 500; color: var(--ink); }

.art-body .art-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mut-2);
}
.art-kicker b { font-weight: 400; color: var(--ink); }
.art-kicker i { width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: none; }
.art-sec h2 {
  margin-top: 14px;
  max-width: 20em;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.art-sec h2 + p { margin-top: 22px; }

/* 图：比正文宽，圆角 8，图注带青柠小方块 */
.art-fig { margin-top: clamp(28px, 4vw, 44px); }
.art-fig .pic {
  aspect-ratio: var(--ar, 1080 / 506);   /* 单张图可用 --ar 覆盖（双图并置时各图比例不同） */
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--grey);
}
.art-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-fig figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
}
.art-fig figcaption i { width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: none; }
.art-fig + p { margin-top: clamp(28px, 4vw, 44px); }

/* 数据条：复用 aw.css 的 .stat-row */
.art-stats { margin-top: clamp(28px, 4vw, 44px); }
.art-stats .stat-row { margin-top: 0; }

/* 关键词大字：一句话顶一段 */
.art-pull {
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.art-pull b {
  display: block;
  font-size: clamp(34px, 5vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.art-pull b i { font-style: normal; color: var(--violet); }
.art-pull span {
  display: block;
  margin-top: 14px;
  max-width: 36em;
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  color: var(--mut);
}

/* 引言：青柠竖线 + 说话人 */
.art-quote {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 var(--gap-x);
  align-items: start;
  margin-top: clamp(36px, 5vw, 56px);
}
.art-quote__bar { height: 100%; min-height: 84px; border-left: 2px solid var(--accent); }
.art-quote blockquote {
  max-width: 30em;
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.art-quote figcaption {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
}
.art-quote figcaption b { display: block; font-weight: 500; color: var(--ink); }

/* 收束段 */
.art-body .art-close {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 26px;
  border-top: 2px solid var(--ink);
  max-width: 36em;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* 文末：标签 · 日期 */
.art-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 22px;
  border-top: 0.5px solid var(--line);
}
.art-foot .meta-chips { margin-top: 0; }
.art-foot__date { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--mut-2); }

/* 更多动态 */
.art-more { margin-top: clamp(72px, 10vw, 140px); }

/* 页尾行动区 */
.art-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: clamp(56px, 8vw, 112px);
  padding-top: clamp(28px, 4vw, 52px);
  border-top: 0.5px solid var(--line);
}
.art-cta h3 {
  max-width: 15em;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
}
.art-cta__acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   动态列表页 · 头条卡（news.html）
   白卡 14 圆角：左图右文，图占 7/12
   ============================================================ */
.news-feat {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0;
  border-radius: var(--r-card);
  background: var(--card);
  overflow: hidden;
  box-shadow: inset 0 0 0 0.5px var(--line);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.news-feat:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 0.5px var(--line), 0 18px 40px -24px rgba(0, 0, 0, 0.25); }
.news-feat__pic { aspect-ratio: 16 / 9; overflow: hidden; background: var(--grey); }
.news-feat__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.news-feat:hover .news-feat__pic img { transform: scale(1.03); }
.news-feat__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(24px, 3vw, 44px);
}
.news-feat__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mut-2);
}
.news-feat__meta .cat {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--mut);
  border: 0.5px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}
.news-feat__title {
  margin-top: 16px;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.news-feat__sub { margin-top: 14px; font-size: 15px; font-weight: 300; line-height: 24px; color: var(--mut); max-width: 30em; }
.news-feat__more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.news-feat__more svg { transition: transform 0.4s var(--ease); }
.news-feat:hover .news-feat__more svg { transform: translateX(4px); }
.news-list--after-feat { margin-top: clamp(40px, 5vw, 64px); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1000px) {
  .art-layout { grid-template-columns: minmax(0, 1fr); gap: 36px 0; }
  .art-rail { position: static; }
  .art-toc { flex-direction: row; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .art-toc a {
    display: inline-flex;
    gap: 8px;
    padding: 5px 12px;
    border: 0.5px solid var(--line);
    border-radius: 999px;
  }
  .art-rail__share { display: none; }
  .news-feat { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .art-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .art-facts > div:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
}
@media (max-width: 760px) {
  .art-body p { font-size: 16px; line-height: 30px; }
  .art-fig .pic { aspect-ratio: var(--ar-m, 16 / 10); }
  .art-quote { grid-template-columns: 24px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .art-progress { transition: none; }
  .news-feat, .news-feat__pic img, .news-feat__more svg { transition: none; }
  .news-feat:hover { transform: none; }
  .news-feat:hover .news-feat__pic img { transform: none; }
}

/* ============================================================
   v2（2026-09-05）· 制药研磨机一文新增的区块
   要点格 / 工步列表 / 双图并置 / 文末出处；.art-fig 的宽高比改由 --ar 控制
   ============================================================ */

/* 双图并置：手绘稿 → 落地界面 */
.art-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-x);
  align-items: end;   /* 两图比例不同（607 / 647），底对齐让图注落在同一条线上 */
  margin-top: clamp(28px, 4vw, 44px);
}
.art-duo .art-fig { margin-top: 0; }
.art-duo + p { margin-top: clamp(28px, 4vw, 44px); }

/* 要点格：--cols 列（默认 2）；默认白卡，--plain 变体只留发丝线 */
.art-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: var(--gap-x);
  margin-top: clamp(24px, 3vw, 36px);
}
.art-grid > div {
  padding: 22px 22px 24px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.art-grid > div::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin-bottom: 16px;
  border-radius: 1px;
  background: var(--accent);
}
.art-grid > div:nth-child(2n)::before { background: var(--violet); }
.art-grid b {
  display: block;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.art-body .art-grid p { margin-top: 8px; font-size: 15px; line-height: 26px; }
.art-grid--plain > div {
  padding: 18px 0 0;
  border-radius: 0;
  border-top: 0.5px solid var(--line);
  background: none;
  box-shadow: none;
}
.art-grid + p { margin-top: clamp(24px, 3vw, 36px); }

/* 工步：编号 · 标题 · 说明，发丝线分隔；右侧贴一只界面里的机械臂动画（白卡，粘性） */
.art-steps-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--gap-y) clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 36px);
}
.art-steps { list-style: none; border-top: 0.5px solid var(--line); }
.art-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 12px;
  padding: 18px 0;
  border-bottom: 0.5px solid var(--line);
}
.art-steps li b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 26px;
  color: var(--mut-2);
}
.art-steps li h3 { font-size: 17px; font-weight: 500; line-height: 26px; letter-spacing: -0.01em; }
.art-body .art-steps p { margin-top: 4px; font-size: 15px; line-height: 26px; }
.art-arm {
  position: sticky;
  top: 32px;
  padding: 18px 18px 14px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.art-arm img { display: block; width: 100%; height: auto; }
.art-arm figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
}
.art-arm figcaption i { width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: none; }
.art-steps-wrap + p { margin-top: clamp(24px, 3vw, 36px); }

/* 文末：原文出处 + 日期 */
.art-foot__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.art-foot__src {
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.art-foot__src:hover { color: var(--ink); border-bottom-color: var(--line); }

@media (max-width: 860px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); }
  .art-steps-wrap { grid-template-columns: minmax(0, 1fr); }
  .art-arm { position: static; max-width: 320px; }
}
@media (max-width: 760px) {
  .art-duo { grid-template-columns: minmax(0, 1fr); gap: var(--gap-y); }
}

/* ============================================================
   v2（2026-09-05）· 旧站文章迁入后新增的正文构件
   生成器 tools/build-news.py 会按行形态输出这些块：
   小标题 .art-h3 · 列表 .art-list · 诗行 .art-stanza · 组图 .art-grid ·
   规格表 .art-specs · 竖图 .art-fig--tall · 来源 .art-source · 列表页筛选 .filters
   ============================================================ */

/* 图按原始比例显示（--ar 由生成器写进去），不再一律裁成 1080/506 */
.art-fig .pic { aspect-ratio: var(--ar, 1080 / 506); }
.art-fig--tall { max-width: min(100%, 480px); }
.art-fig--tall .pic { background: transparent; }

.art-intro { margin-top: clamp(28px, 4vw, 44px); }
.art-intro > * + * { margin-top: 1.25em; }
.art-sec h2 + * { margin-top: 22px; }
.art-sec > * + *, .art-body .art-intro > * + * { margin-top: 1.25em; }
.art-sec > .art-fig, .art-sec > .art-grid, .art-intro > .art-fig, .art-intro > .art-grid { margin-top: clamp(28px, 4vw, 44px); }
.art-sec > .art-fig + *, .art-sec > .art-grid + *, .art-intro > .art-fig + *, .art-intro > .art-grid + * { margin-top: clamp(28px, 4vw, 44px); }
.art-sec > .art-quote, .art-sec > .art-pull, .art-sec > .art-stats { margin-top: clamp(36px, 5vw, 56px); }

/* 小标题：比 h2 小一档，前面一小截青柠线呼应导语 */
.art-h3 {
  position: relative;
  margin-top: clamp(30px, 4vw, 44px) !important;
  max-width: 30em;
  padding-left: 18px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.art-h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

/* 列表：无圆点，青柠小方块 + 加粗题 + 说明 */
.art-list {
  list-style: none;
  padding: 0;
  max-width: 41em;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.art-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: rgba(34, 34, 34, 0.84);
}
.art-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--accent);
}
.art-list li b { display: block; font-weight: 500; color: var(--ink); }
.art-list li span { display: block; }
.art-list li span + span { margin-top: 4px; }

/* 诗行式段落（公众号原文一行一句的写法） */
.art-body .art-stanza {
  max-width: 41em;
  font-size: 17px;
  font-weight: 400;
  line-height: 32px;
  color: var(--ink);
}

/* 组图：2 / 3 列，格子比例取组内中位数（--ar），差异太大时退回 4:3 */
.art-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 12px;
}
.art-grid__cell {
  aspect-ratio: var(--ar, 4 / 3);
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--grey);
}
.art-grid__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-grid figcaption {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
}
.art-grid figcaption i { width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: none; }

/* 规格表：两列，键左值右，发丝线分隔（联名触摸屏那篇） */
.art-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  max-width: 41em;
  border-top: 0.5px solid var(--line);
}
.art-specs > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 0.5px solid var(--line);
  font-size: 15px;
  line-height: 24px;
}
.art-specs dt { font-weight: 300; color: var(--mut); }
.art-specs dd { font-weight: 500; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* 文末来源 */
.art-body .art-source {
  margin-top: 18px;
  max-width: 41em;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut-2);
}
.art-source a { color: var(--mut); border-bottom: 1px solid var(--line); }
.art-source a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* 列表页筛选条：与加入我们页的部门筛选同一形态（join.css .filters） */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.filters button {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--line);
  font-size: 13px;
  font-weight: 400;
  color: var(--mut);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.filters button:hover { color: var(--ink); box-shadow: inset 0 0 0 0.5px var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.filters em { font-style: normal; font-family: var(--mono); font-size: 11px; opacity: 0.6; margin-left: 6px; }
/* 分类筛选靠 hidden 属性收起：.news-row / .news-feat 自带 display，会盖掉 UA 的 [hidden] */
.news-row[hidden], .news-feat[hidden] { display: none; }
.news-list--after-feat:has(> .news-row[hidden]:first-child) { margin-top: 0; }
.news-feat[hidden] + .news-list--after-feat { margin-top: 0; }

@media (max-width: 760px) {
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .art-specs { grid-template-columns: 1fr; }
  .art-list li { font-size: 15px; line-height: 26px; }
}

/* ============================================================
   文章视觉化（2026-09-05）
   长文删不掉，但可以给它锚点：小标题挂彩色序号章、事实清单配 emoji、
   章节号上彩底。注入由 tools/enhance-news.py 负责，可重复执行。
   ============================================================ */

/* ---- 小标题：原来只有一根小横杠，换成彩色序号章 ---- */
.art-h3.vb-n { padding-left: 0; }

/* ---- 事实清单：字段名前配 emoji，四栏灰字变成能扫读的清单 ---- */
/* 字段名的 emoji 圆章走 .vb-e 的 ::before，样式与位移都在 vibe.css */

/* ---- 章节眉题：编号上彩底 ---- */
.art-kicker.vb-kicker b {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 500;
}

/* ---- 正文里的加粗：加一道青柠底纹，扫读时能停住眼睛 ---- */
.art-body p b, .art-body li b {
  background: linear-gradient(transparent 64%, rgba(217, 242, 79, 0.5) 64%);
  padding: 0 1px;
}

@media (prefers-reduced-motion: reduce) {
  .filters button[data-emo]::before { transition: none; }
}

/* ---------- 列表页配色（2026-09-05）----------
   筛选按钮配 emoji，分类标记按类型上色。全走属性选择器，卡片 HTML 不动。 */
.filters button[data-emo]::before {
  content: attr(data-emo);
  margin-right: 7px;
  font-size: 13px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
.filters button:hover::before { transform: rotate(-12deg) scale(1.18); }

[data-cat="coop"]    .cat { background: var(--vb-mint-b);   color: var(--vb-mint-f); }
[data-cat="release"] .cat { background: var(--vb-violet-b); color: var(--vb-violet-f); }
[data-cat="expo"]    .cat { background: var(--vb-amber-b);  color: var(--vb-amber-f); }
[data-cat="view"]    .cat { background: var(--vb-sky-b);    color: var(--vb-sky-f); }
[data-cat] .cat {
  padding: 2px 9px;
  border-radius: 20px;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) { .filters button[data-emo]::before { transition: none; } }