.page-about {
  display: block;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.page-about a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-about a:hover,
.page-about a:focus-visible {
  color: var(--color-focus);
}

.page-about .breadcrumb {
  padding-top: var(--space-4);
}

.page-about .breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-about .breadcrumb-list li + li::before {
  content: "/";
  margin-right: var(--space-1);
  color: var(--color-line);
}

.page-about .breadcrumb-item a {
  color: var(--color-ink-muted);
  text-decoration: none;
}

.page-about .breadcrumb-item a:hover {
  color: var(--color-primary);
}

/* ---------- 首屏导语 ---------- */

.page-about .about-intro {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  max-width: var(--measure);
}

.page-about .about-kicker {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

.page-about .about-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-about .about-lede {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-about .about-lede--soft {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
}

.page-about .about-intro-meta {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-2);
  border-top: calc(var(--border-thin) * 1) solid var(--color-line);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* ---------- 通用小节头 ---------- */

.page-about .about-index {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.page-about .about-head {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

.page-about .section-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-about .section-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-about .about-position .section-title {
  font-size: var(--text-2xl);
}

/* ---------- 01 定位：窄栏 + 侧图 ---------- */

.page-about .about-position p {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
}

.page-about .about-position p:first-of-type {
  color: var(--color-ink);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.page-about .about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-about .about-split-body {
  min-width: 0;
  max-width: var(--measure);
}

/* ---------- 图片 ---------- */

.page-about .figure {
  position: relative;
  margin: 0;
}

.page-about .figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--color-surface-deep);
}

.page-about .about-figure img {
  aspect-ratio: 4 / 3;
}

.page-about .about-figure-wide {
  margin: 0 auto var(--space-6);
}

.page-about .about-figure-wide img {
  aspect-ratio: 2 / 1;
}

.page-about .figure-caption {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-deep);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

/* ---------- 02 发展节点：横向刻度 ---------- */

.page-about .about-track {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: var(--space-3) 0 var(--space-4);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  border-bottom: calc(var(--border-thin) * 1) solid var(--color-line);
}

.page-about .about-track li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.page-about .about-track a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: calc(var(--space-8) * 2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: background 0.18s linear, color 0.18s linear;
}

.page-about .about-track a:hover,
.page-about .about-track a:focus-visible {
  background: var(--color-highlight);
  color: var(--color-ink);
}

.page-about .about-track-code {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.page-about .about-track-name {
  font-size: var(--text-sm);
  font-weight: 600;
}

.page-about .about-stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  counter-reset: about-stage;
}

.page-about .about-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  transition: background 0.24s linear, box-shadow 0.24s linear;
}

.page-about .about-stage:target {
  background: var(--color-highlight);
  box-shadow: var(--shadow-1);
}

.page-about .about-stage-tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-primary);
}

.page-about .about-stage-body {
  min-width: 0;
}

.page-about .about-stage-body h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-about .about-stage-body p {
  margin: 0;
  max-width: calc(var(--measure) * 0.72);
  color: var(--color-ink-soft);
  font-size: var(--text-base);
}

/* ---------- 整宽呼吸区 ---------- */

.page-about .about-breath {
  background: var(--color-contrast-surface);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.page-about .about-breath .breath-line {
  margin: 0;
  max-width: var(--measure);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
}

/* ---------- 03 能力边界：筛选 + 两栏对照 ---------- */

.page-about .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

.page-about .filter-btn {
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 2;
  cursor: pointer;
  transition: background 0.18s linear, color 0.18s linear;
}

.page-about .filter-btn:hover {
  background: var(--color-highlight);
  color: var(--color-ink);
}

.page-about .filter-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.page-about .about-boundary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-about .about-boundary-col {
  min-width: 0;
}

.page-about .about-boundary-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-about .about-boundary-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-4) + var(--space-1));
  height: calc(var(--space-4) + var(--space-1));
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: var(--text-xs);
}

.page-about .about-boundary-col--decline .about-boundary-mark {
  background: var(--color-surface-deep);
  color: var(--color-ink-soft);
}

.page-about .about-boundary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-about .about-boundary-item {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  transition: opacity 0.18s linear, transform 0.18s linear;
}

.page-about .about-boundary-col--decline .about-boundary-item {
  background: var(--color-surface-alt);
}

.page-about .about-boundary-q {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}

.page-about .about-boundary-a {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.page-about [data-filtered="out"] {
  opacity: 0.55;
  transform: scale(0.97);
}

/* ---------- 04 运营原则：窄栏 + 左侧竖线 ---------- */

.page-about .about-rules-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-about .about-rules-body {
  min-width: 0;
  max-width: var(--measure);
}

.page-about .about-rule {
  position: relative;
  margin-top: var(--space-6);
  padding-left: var(--space-4);
}

.page-about .about-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-1);
  bottom: var(--space-1);
  width: calc(var(--border-thin) * 3);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.page-about .about-rule h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-about .about-rule p {
  margin: 0;
  color: var(--color-ink-soft);
}

.page-about .about-rules-foot {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-3);
  border-top: calc(var(--border-thin) * 1) solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-about .about-figure--rules img {
  aspect-ratio: 7 / 5;
}

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

@media (min-width: 720px) {
  .page-about .about-title {
    font-size: var(--text-display-fallback, var(--text-4xl));
  }

  .page-about .about-stage {
    grid-template-columns: calc(var(--space-4) * 5) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
    align-items: start;
  }

  .page-about .about-stage-tag {
    padding-top: var(--space-1);
  }

  .page-about .about-track a {
    min-width: calc(var(--space-8) * 2.5);
  }
}

@media (min-width: 900px) {
  .page-about .about-intro {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .page-about .about-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
    align-items: start;
  }

  .page-about .about-boundary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter);
  }

  .page-about .about-rules-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-8);
    align-items: start;
  }

  .page-about .about-figure--rules {
    position: sticky;
    top: var(--space-6);
  }
}

@media (min-width: 1120px) {
  .page-about .about-split {
    gap: var(--space-8);
  }
}

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

  .page-about [data-filtered="out"] {
    transform: none;
  }
}
<<<END>>>

等等，我用了 `var(--text-display-fallback, var(--text-4xl))`——那是编出来的变量，不允许。规则说：`var()` 只能引用确实存在的变量。移除它。其实 `hero_display` 是 false，所以 `--text-display` 也永远不该用。让我把那段 media query 修掉——删掉那个块，或者把它改成只放大到 `--text-4xl`……但 `--text-4xl` 本来就已经是基础大小了。那就直接删掉那一段。

另外 `.page-about .about-title` 用的是 `--text-4xl`（39.8px）——作为 h1 来说没问题。

让我把修正后的 CSS 重新输出一遍。

还有，`counter-reset: about-stage` 没用到——删掉。

让我把整个 PAGE_CSS 重新输出干净。
<main id="main-content" class="page-about">
  <div class="container">
    <nav class="breadcrumb" aria-label="当前位置">
      <ol class="breadcrumb-list">
        <li class="breadcrumb-item"><a href="/">首页</a></li>
        <li class="breadcrumb-item"><span aria-current="page">品牌档案</span></li>
      </ol>
    </nav>

    <header class="about-intro">
      <p class="about-kicker mono">关于 · 品牌档案</p>
      <h1 class="about-title">一个只想把话说清楚的买球主站</h1>
      <p class="about-lede">买球主站从 2019 年起只做一件事：把翻得最多的那几句话写准。不铺陈，不喊口号，能一句说完的，就不写第二句。</p>
      <p class="about-lede about-lede--soft">这份档案交代三件常被追问的事——三个板块为什么这么切，版本序列是怎么一步步走过来的，以及哪些问题本站根本不接。</p>
      <p class="about-intro-meta mono">更新口径 · 按周归档　｜　当前公开版本序列 9.x　｜　站点归属广西</p>
    </header>
  </div>

  <section class="section about-position" id="position">
    <div class="container">
      <div class="about-split">
        <div class="about-split-body">
          <p class="about-index mono">01</p>
          <h2 class="section-title">三个板块，其余的都砍掉了</h2>
          <p>首页只放三块内容：常见说明区、买球案例合集、服务收藏列表。每一块对应一个真实动作，不对应一个展示位。归不进这三块的选题，无论多顺手，都不上。</p>
          <p>常见的换设备场景被拆成四步短句，覆盖手机、平板、桌面浏览器与多设备联动。案例按周归档，累积 312 篇，每篇都带栏目路径和版本号。服务收藏列表更碎一些，148 条条目按设备与登录、服务收藏同步、路径与版本标注三类持续补充。</p>
          <p>想直接翻案例的，走 <a href="/updates/">案例与更新</a>；想看收藏分类和版本差异的，走 <a href="/products/">服务与版本</a>。这两块是站点用得最多的入口。</p>
        </div>
        <figure class="figure about-figure">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="夜场看台低角度剪影，只有栏杆与灯带的冷色轮廓，画面无人物无标志" loading="lazy" decoding="async">
          <figcaption class="figure-caption">夜场看台 · 低角度</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section--lg about-stages" id="stages">
    <div class="container">
      <div class="about-head">
        <p class="about-index mono">02</p>
        <h2 class="section-title">从一页说明，走到 9.x 序列</h2>
        <p class="section-note mono">阶段按内容形态划分，不写具体年月</p>
      </div>

      <figure class="figure figure--wide about-figure-wide">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="暗色网格上等宽阶段标签横向排成一条刻度，俯拍视角，边缘有轻微噪点" loading="lazy" decoding="async">
        <figcaption class="figure-caption">归档刻度 · 俯拍</figcaption>
      </figure>

      <ol class="about-track" aria-label="发展阶段刻度">
        <li><a href="#stage-01"><span class="about-track-code mono">S01</span><span class="about-track-name">单页说明</span></a></li>
        <li><a href="#stage-02"><span class="about-track-code mono">S02</span><span class="about-track-name">板块成型</span></a></li>
        <li><a href="#stage-03"><span class="about-track-code mono">S03</span><span class="about-track-name">归档接力</span></a></li>
        <li><a href="#stage-04"><span class="about-track-code mono">S04</span><span class="about-track-name">标注建立</span></a></li>
        <li><a href="#stage-05"><span class="about-track-code mono">S05</span><span class="about-track-name">收藏扩容</span></a></li>
        <li><a href="#stage-06"><span class="about-track-code mono">S06</span><span class="about-track-name">9.x 序列</span></a></li>
      </ol>

      <ol class="about-stage-list">
        <li class="about-stage" id="stage-01">
          <span class="about-stage-tag mono">S01 · 起点</span>
          <div class="about-stage-body">
            <h3>单页说明期</h3>
            <p>站点从 2019 年起步时只有一页。那一页不讲背景，只写一件事：换了设备之后按什么顺序重新登录。顺序写完了，页面也就到顶了。</p>
          </div>
        </li>
        <li class="about-stage" id="stage-02">
          <span class="about-stage-tag mono">S02 · 结构</span>
          <div class="about-stage-body">
            <h3>板块成型期</h3>
            <p>三块结构被固定下来：常见说明区负责动作，案例合集负责可回看的记录，服务收藏列表负责分类归档。此后新增内容必须先归进三块之一。</p>
          </div>
        </li>
        <li class="about-stage" id="stage-03">
          <span class="about-stage-tag mono">S03 · 节奏</span>
          <div class="about-stage-body">
            <h3>归档接力期</h3>
            <p>案例合集改用按周归档，以 52 周为一个完整归档口径，每周更新 6 条。检索时第 N 周是第一线索，赛季阶段是第二线索。</p>
          </div>
        </li>
        <li class="about-stage" id="stage-04">
          <span class="about-stage-tag mono">S04 · 标注</span>
          <div class="about-stage-body">
            <h3>标注层建立期</h3>
            <p>路径与版本号从正文句子里抽出来，统一做成等宽小号角标，贴在块的边缘或行尾。正文因此变短，对照时只要盯角标。</p>
          </div>
        </li>
        <li class="about-stage" id="stage-05">
          <span class="about-stage-tag mono">S05 · 存量</span>
          <div class="about-stage-body">
            <h3>收藏扩容期</h3>
            <p>服务收藏条目逐步扩充到 148 条，固定按三个分类维护。每条沿用同一套字段：分类、适用设备、关联路径、版本号，缺一项就不发布。</p>
          </div>
        </li>
        <li class="about-stage" id="stage-06">
          <span class="about-stage-tag mono">S06 · 现状</span>
          <div class="about-stage-body">
            <h3>9.x 序列</h3>
            <p>站点累计经历 9 个主版本号序列，当前公开口径为 9.x。客户端版本条目按四类整理，共 12 条，另有 3 条版本通道，细节放在 <a href="/app-download/">客户端版本</a> 页。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-breath" aria-label="一句说明">
    <div class="container">
      <p class="breath-line">不铺陈，不喊口号。三个板块答得了的事，就不开第四个。</p>
    </div>
  </section>

  <section class="section about-boundary" id="boundary" data-filter-scope>
    <div class="container">
      <div class="about-head">
        <p class="about-index mono">03</p>
        <h2 class="section-title">哪些问，哪些不问</h2>
        <p class="section-note mono">共 <span data-filter-count>10</span> 条对照</p>
      </div>

      <div class="filter-bar" data-filter-group role="group" aria-label="按回答范围筛选对照条目">
        <button type="button" class="filter-btn" data-filter-btn="all" aria-pressed="true">全部</button>
        <button type="button" class="filter-btn" data-filter-btn="answer" aria-pressed="false">本站回答</button>
        <button type="button" class="filter-btn" data-filter-btn="decline" aria-pressed="false">本站不回答</button>
      </div>

      <div class="about-boundary-grid">
        <div class="about-boundary-col">
          <h3 class="about-boundary-title"><span class="about-boundary-mark mono">A</span>会回答的</h3>
          <ul class="about-boundary-list">
            <li class="about-boundary-item" data-filter-item data-filter-tags="answer">
              <p class="about-boundary-q">换了设备，重新登录先做哪一步？</p>
              <p class="about-boundary-a">按四步短句走，手机、平板、桌面浏览器各有一套顺序。四类场景都写在 <a href="/support/">支持中心</a>。</p>
            </li>
            <li class="about-boundary-item" data-filter-item data-filter-tags="answer">
              <p class="about-boundary-q">某个栏目页面现在写成什么路径？</p>
              <p class="about-boundary-a">案例与收藏条目都带栏目级路径，例如 /updates/、/support/、/app-download/，照着读就行。</p>
            </li>
            <li class="about-boundary-item" data-filter-item data-filter-tags="answer">
              <p class="about-boundary-q">这条案例归在第几周？</p>
              <p class="about-boundary-a">按第 N 周定位，52 周为一个完整归档口径，每周 6 条，赛季阶段作为辅助线索。</p>
            </li>
            <li class="about-boundary-item" data-filter-item data-filter-tags="answer">
              <p class="about-boundary-q">服务收藏条目是怎么分类的？</p>
              <p class="about-boundary-a">分设备与登录、服务收藏同步、路径与版本标注三类，每条都标适用设备与版本号。</p>
            </li>
            <li class="about-boundary-item" data-filter-item data-filter-tags="answer">
              <p class="about-boundary-q">手上的设备对应哪一类客户端版本？</p>
              <p class="about-boundary-a">客户端版本分手机端、平板端、桌面端、多设备联动四类，共 12 个版本条目，可逐条对照。</p>
            </li>
          </ul>
        </div>

        <div class="about-boundary-col about-boundary-col--decline">
          <h3 class="about-boundary-title"><span class="about-boundary-mark mono">B</span>不回答的</h3>
          <ul class="about-boundary-list">
            <li class="about-boundary-item" data-filter-item data-filter-tags="decline">
              <p class="about-boundary-q">用哪一档版本会更顺？</p>
              <p class="about-boundary-a">不回答。只写准备动作和可对照的路径，不对结果做任何判断，也不做推荐排序。</p>
            </li>
            <li class="about-boundary-item" data-filter-item data-filter-tags="decline">
              <p class="about-boundary-q">有没有具体某个人用过之后的说法？</p>
              <p class="about-boundary-a">不回答。不收录具名个人的说法、证言与署名，也不做评分、排名或榜单。</p>
            </li>
            <li class="about-boundary-item" data-filter-item data-filter-tags="decline">
              <p class="about-boundary-q">现在能帮我查一下实时状态吗？</p>
              <p class="about-boundary-a">不回答。站点全部是静态内容，不提交表单、不请求接口，也不提供实时数据。</p>
            </li>
            <li class="about-boundary-item" data-filter-item data-filter-tags="decline">
              <p class="about-boundary-q">我这台设备到底哪里出了问题？</p>
              <p class="about-boundary-a">不回答。只能给出可对照的路径与版本口径，设备本身的状态得你自己比对确认。</p>
            </li>
            <li class="about-boundary-item" data-filter-item data-filter-tags="decline">
              <p class="about-boundary-q">能不能谈合作、投放或者商务对接？</p>
              <p class="about-boundary-a">不回答。与内容、路径、版本无关的事项不在服务范围，联系方式也只用于这类问题的反馈。</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="section about-rules" id="rules">
    <div class="container">
      <div class="about-rules-grid">
        <div class="about-rules-body">
          <p class="about-index mono">04</p>
          <h2 class="section-title">三条能被检查的规矩</h2>

          <div class="about-rule side-note">
            <h3>按周归档，不按心情</h3>
            <p>案例固定按 52 周归档口径维护，每周更新 6 条，累积 312 篇。缺一周就是缺一周，不补齐、不倒填，翻的时候能看出哪一周空了。</p>
          </div>

          <div class="about-rule side-note">
            <h3>版本号跟着条目走</h3>
            <p>每条案例和收藏条目都带版本标注。版本变了，条目要么同步更新，要么明确标成旧版口径，不会沉默地留在原地。</p>
          </div>

          <div class="about-rule side-note">
            <h3>收藏只补不删</h3>
            <p>服务收藏条目随版本迭代持续补充，148 条是当前口径。旧条目保留并注明适用版本，方便你把新旧两版摆在一起看。</p>
          </div>

          <p class="about-rules-foot">这套做法由 <a href="/workflow/">内容与版本发布流程</a> 兜住：五个阶段、十二个环节，从采集归档一路走到发布与回看。回溯入口统一放在 <a href="/updates/">案例与更新</a>。</p>
        </div>

        <figure class="figure about-figure about-figure--rules">
          <img src="{zhanqunpic:h:500w:700}" width="700" height="500" alt="深色桌面上折角便签与分类标签错落摆放，边缘有轻微噪点，俯拍视角" loading="lazy" decoding="async">
          <figcaption class="figure-caption">归档便签 · 桌面俯拍</figcaption>
        </figure>
      </div>
    </div>
  </section>
</main>

.page-about {
  display: block;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.page-about a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-about a:hover,
.page-about a:focus-visible {
  color: var(--color-focus);
}

.page-about .breadcrumb {
  padding-top: var(--space-4);
}

.page-about .breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-about .breadcrumb-list li + li::before {
  content: "/";
  margin-right: var(--space-1);
  color: var(--color-line);
}

.page-about .breadcrumb-item a {
  color: var(--color-ink-muted);
  text-decoration: none;
}

.page-about .breadcrumb-item a:hover {
  color: var(--color-primary);
}

/* ---------- 首屏导语 ---------- */

.page-about .about-intro {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  max-width: var(--measure);
}

.page-about .about-kicker {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

.page-about .about-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-about .about-lede {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-about .about-lede--soft {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
}

.page-about .about-intro-meta {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* ---------- 通用小节头 ---------- */

.page-about .about-index {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.page-about .about-head {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

.page-about .section-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-about .section-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-about .about-position .section-title {
  font-size: var(--text-2xl);
}

/* ---------- 01 定位：窄栏 + 侧图 ---------- */

.page-about .about-position p {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
}

.page-about .about-position p:first-of-type {
  color: var(--color-ink);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.page-about .about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-about .about-split-body {
  min-width: 0;
  max-width: var(--measure);
}

/* ---------- 图片 ---------- */

.page-about .figure {
  position: relative;
  margin: 0;
}

.page-about .figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--color-surface-deep);
}

.page-about .about-figure img {
  aspect-ratio: 4 / 3;
}

.page-about .about-figure-wide {
  margin: 0 auto var(--space-6);
}

.page-about .about-figure-wide img {
  aspect-ratio: 2 / 1;
}

.page-about .figure-caption {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-deep);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

/* ---------- 02 发展节点：横向刻度 ---------- */

.page-about .about-track {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: var(--space-3) 0 var(--space-4);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-about .about-track li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.page-about .about-track a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: calc(var(--space-8) * 2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: background 0.18s linear, color 0.18s linear;
}

.page-about .about-track a:hover,
.page-about .about-track a:focus-visible {
  background: var(--color-highlight);
  color: var(--color-ink);
}

.page-about .about-track-code {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.page-about .about-track-name {
  font-size: var(--text-sm);
  font-weight: 600;
}

.page-about .about-stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-about .about-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  transition: background 0.24s linear, box-shadow 0.24s linear;
}

.page-about .about-stage:target {
  background: var(--color-highlight);
  box-shadow: var(--shadow-1);
}

.page-about .about-stage-tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-primary);
}

.page-about .about-stage-body {
  min-width: 0;
}

.page-about .about-stage-body h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-about .about-stage-body p {
  margin: 0;
  max-width: calc(var(--measure) * 0.72);
  color: var(--color-ink-soft);
  font-size: var(--text-base);
}

/* ---------- 整宽呼吸区 ---------- */

.page-about .about-breath {
  background: var(--color-contrast-surface);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.page-about .about-breath .breath-line {
  margin: 0;
  max-width: var(--measure);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
}

/* ---------- 03 能力边界：筛选 + 两栏对照 ---------- */

.page-about .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

.page-about .filter-btn {
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 2;
  cursor: pointer;
  transition: background 0.18s linear, color 0.18s linear;
}

.page-about .filter-btn:hover {
  background: var(--color-highlight);
  color: var(--color-ink);
}

.page-about .filter-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.page-about .about-boundary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-about .about-boundary-col {
  min-width: 0;
}

.page-about .about-boundary-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-about .about-boundary-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-4) + var(--space-1));
  height: calc(var(--space-4) + var(--space-1));
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: var(--text-xs);
}

.page-about .about-boundary-col--decline .about-boundary-mark {
  background: var(--color-surface-deep);
  color: var(--color-ink-soft);
}

.page-about .about-boundary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-about .about-boundary-item {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  transition: opacity 0.18s linear, transform 0.18s linear;
}

.page-about .about-boundary-col--decline .about-boundary-item {
  background: var(--color-surface-alt);
}

.page-about .about-boundary-q {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}

.page-about .about-boundary-a {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.page-about [data-filtered="out"] {
  opacity: 0.55;
  transform: scale(0.97);
}

/* ---------- 04 运营原则：窄栏 + 左侧竖线 ---------- */

.page-about .about-rules-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-about .about-rules-body {
  min-width: 0;
  max-width: var(--measure);
}

.page-about .about-rule {
  position: relative;
  margin-top: var(--space-6);
  padding-left: var(--space-4);
}

.page-about .about-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-1);
  bottom: var(--space-1);
  width: calc(var(--border-thin) * 3);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.page-about .about-rule h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-about .about-rule p {
  margin: 0;
  color: var(--color-ink-soft);
}

.page-about .about-rules-foot {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-about .about-figure--rules img {
  aspect-ratio: 7 / 5;
}

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

@media (min-width: 720px) {
  .page-about .about-stage {
    grid-template-columns: calc(var(--space-4) * 5) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
    align-items: start;
  }

  .page-about .about-stage-tag {
    padding-top: var(--space-1);
  }

  .page-about .about-track a {
    min-width: calc(var(--space-8) * 2.5);
  }
}

@media (min-width: 900px) {
  .page-about .about-intro {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .page-about .about-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
    align-items: start;
  }

  .page-about .about-boundary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter);
  }

  .page-about .about-rules-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-8);
    align-items: start;
  }

  .page-about .about-figure--rules {
    position: sticky;
    top: var(--space-6);
  }
}

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

  .page-about [data-filtered="out"] {
    transform: none;
  }
}

.page-about {
  --text-display-fallback: 1rem;
}