/* ============================================================
   十年回看 · 「关于我们」页专用样式
   ------------------------------------------------------------
   为什么单独一个文件（2026-09-30）：
     改这页的同时，另一个会话正在密集改 assets/css/style.css。
     发布走的是整站 rsync —— 本页样式若留在 style.css 里，就没办法
     「只推本次改的文件」，会把别人没做完的内容一起带上线。
   合并回去的办法：把下面这一段原样搬到 style.css 末尾，
   再删掉 about.html 里那一行 <link ... about.css>，行为完全一致。

   ⚠️ 类名一律带 ab- 前缀，是有意的：style.css 里已经有一个 .fold
     （「我的」页的分组折叠，由 assets/js/auth.js 生成，标记是
      .fold-t / .fold-v / .fold-x）。两处若同名，将来一旦合并，
      `.fold > summary` 会互相覆盖 —— 所以这里另起一套名字。

   内容：
     · .ab-hero / .ab-lede     开场：标题 + 一句话定位
     · .ab-cards / .ab-card    三个板块各一张小卡（auto-fit 自动落栏，不写断点）
     · .ab-fold                可展开的细则条 —— 原生 <details>，无 JS 也能用、
                               键盘可达、折叠内容始终在 DOM 里（搜索与读屏照常读得到）
     · .ab-cross               折叠区里的清单一族

   仍守本站规范：无渐变、字重只用 400/600/800、蓝只给交互元素。
   ============================================================ */

.ab-hero{padding:2px 0 6px}
.ab-lede{
  margin-top:14px;max-width:32em;
  font-family:var(--font-text);font-size:18px;line-height:1.55;
  letter-spacing:-.006em;font-weight:400;color:var(--ink-3);
}

.ab-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.ab-card{padding:20px}
.ab-card h3{font-size:17px;color:var(--ink)}
.ab-card p{margin:10px 0 0;font-size:14.5px;line-height:1.62;color:var(--ink-body)}
.ab-card .ab-note{margin-top:8px;font-size:13px;line-height:1.6;color:var(--ink-4)}

/* 折叠条：一条发丝线分隔，右侧一个箭头指示展开方向 —— 苹果式披露 */
.ab-folds{margin-top:2px}
.ab-fold{border-top:1px solid var(--line-2)}
/* 首条不画顶线 —— 上面分组标题自带的底线就是它的上边界，否则两条线相距 10px 看着像重影 */
.ab-folds > .ab-fold:first-child{border-top:0}
.ab-fold:last-child{border-bottom:1px solid var(--line-2)}
.ab-fold > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:56px;                       /* 触控目标 ≥48px */
  padding:16px 2px;
  font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  transition:color .18s ease-out;
}
.ab-fold > summary::-webkit-details-marker{display:none}
.ab-fold > summary::marker{content:""}
.ab-fold > summary:hover{color:var(--accent)}
.ab-fold > summary:focus-visible{outline:0;border-radius:var(--r-xs);box-shadow:var(--focus-ring)}
.ab-chev{
  flex:none;width:9px;height:9px;margin-right:6px;
  border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);
  transform:rotate(45deg);
  transition:transform .2s ease-out,border-color .18s ease-out;
}
.ab-fold[open] .ab-chev{transform:rotate(-135deg)}
.ab-fold > summary:hover .ab-chev{border-color:var(--accent)}
.ab-fold-body{padding:2px 0 24px;font-size:14.5px;line-height:1.7;color:var(--ink-body)}
.ab-fold-body > :first-child{margin-top:0}
.ab-fold-body p{margin:0 0 12px}
.ab-fold-body p:last-child{margin-bottom:0}
.ab-fold-body .kv,.ab-fold-body .notice{margin-top:14px}

.ab-cross{margin:0;padding-left:19px}
.ab-cross li{margin:8px 0}