.page-about {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

/* 面包屑 */
.page-about .about-crumbbar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-paper);
  padding: .8rem var(--gutter);
}
.page-about .about-crumbbar .breadcrumb {
  max-width: var(--shell);
  margin: 0 auto;
  font-size: .82rem;
  color: var(--mist);
}
.page-about .about-crumbbar .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-about .about-crumbbar .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.page-about .about-crumbbar .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--mist);
}
.page-about .about-crumbbar .breadcrumb-item a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.page-about .about-crumbbar .breadcrumb-item a:hover,
.page-about .about-crumbbar .breadcrumb-item a:focus-visible {
  color: var(--orange);
}
.page-about .about-crumbbar .breadcrumb-item[aria-current="page"] {
  color: var(--ink-green);
  font-weight: 600;
}

/* 首屏 */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-blue);
  color: var(--paper);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.4rem, 5vw, 4rem);
  border-bottom: 4px solid var(--ink-green);
}
.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0,
    transparent 56px,
    rgba(53, 240, 208, .055) 56px,
    rgba(53, 240, 208, .055) 57px
  );
  pointer-events: none;
}
.page-about .about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-about .about-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(53, 240, 208, .5);
  padding: .35rem .65rem;
  margin: 0 0 1.4rem;
}
.page-about .about-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 7.6vw, 5.6rem);
  line-height: 1;
  letter-spacing: -.005em;
  margin: 0 0 1.3rem;
  max-width: 18ch;
}
.page-about .about-hero-lede {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.78;
  color: var(--paper-soft);
  max-width: 56ch;
  margin: 0 0 2.1rem;
}
.page-about .about-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  max-width: 620px;
  border-top: 1px solid var(--line-dark);
  padding-top: 1.5rem;
}
.page-about .about-hero-stat-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--cyan);
}
.page-about .about-hero-stat-label {
  display: block;
  margin-top: .45rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--mist);
}

/* 两栏骨架 */
.page-about .about-layout {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3.5rem) var(--gutter) clamp(3rem, 6vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
@media (min-width: 900px) {
  .page-about .about-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

/* 章节索引 */
.page-about .about-toc {
  order: -1;
}
.page-about .about-toc-title {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 .7rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line-paper);
}
.page-about .about-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem .9rem;
}
.page-about .about-toc-link {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.page-about .about-toc-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--orange);
}
.page-about .about-toc-link:hover,
.page-about .about-toc-link:focus-visible {
  color: var(--ink-green);
  border-bottom-color: var(--orange);
}
@media (min-width: 900px) {
  .page-about .about-toc {
    position: sticky;
    top: 96px;
    align-self: start;
  }
  .page-about .about-toc-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 章节 */
.page-about .about-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-about .about-section {
  scroll-margin-top: 96px;
  padding-top: 2rem;
  border-top: 2px solid var(--ink);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page-about .about-section:first-child {
  padding-top: 0;
  border-top: 0;
}
.page-about .about-section:last-child {
  margin-bottom: 0;
}
.page-about .about-section-head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: 1.2rem;
}
.page-about .about-section-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--orange);
  transition: color var(--dur-fast) var(--ease);
}
.page-about .about-section:target .about-section-num {
  color: var(--ink-green);
}
.page-about .about-section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.page-about .about-section > p {
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 1.1rem;
  max-width: 64ch;
  color: var(--ink);
}
.page-about .about-text p {
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 1.1rem;
  max-width: 64ch;
  color: var(--ink);
}
.page-about .about-text p:last-child {
  margin-bottom: 0;
}

/* 图文并置 */
.page-about .about-split {
  display: grid;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 760px) {
  .page-about .about-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 2.4rem;
  }
}
.page-about .about-figure {
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--ink-blue);
  box-shadow: var(--shadow-brut);
}
.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-figure figcaption {
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--mist);
  background: var(--ink-blue);
  padding: .55rem .7rem;
  border-top: 1px solid var(--line-dark);
}
.page-about .about-figure--archive {
  margin-top: 1.8rem;
  max-width: 560px;
}
.page-about .about-figure--wide {
  margin-top: 1.6rem;
  max-width: 640px;
}

/* 时间线 */
.page-about .about-timeline {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0 0 0 2.4rem;
  border-left: 3px solid var(--ink-green);
}
.page-about .about-timeline-item {
  position: relative;
}
.page-about .about-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-2.4rem - 8.5px);
  top: .78rem;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  background: var(--orange);
  border: 3px solid var(--ink-green);
}
.page-about .about-timeline-node {
  padding: 0 0 .55rem;
}
.page-about .about-timeline-node summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--line-paper);
  transition: border-color var(--dur-fast) var(--ease);
}
.page-about .about-timeline-node summary::-webkit-details-marker {
  display: none;
}
.page-about .about-timeline-node summary::marker {
  content: "";
}
.page-about .about-timeline-node summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--orange);
}
.page-about .about-timeline-node[open] summary {
  border-bottom-color: var(--orange);
  border-bottom-style: solid;
}
.page-about .about-timeline-node[open] summary::after {
  content: "−";
}
.page-about .about-timeline-year {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--ink-green);
}
.page-about .about-timeline-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  min-width: 0;
}
.page-about .about-timeline-node[open] .about-timeline-name {
  color: var(--ink-green);
}
.page-about .about-timeline-body {
  padding: .7rem 0 1rem;
  max-width: 54ch;
}
.page-about .about-timeline-body p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--ink);
}

/* 团队 */
.page-about .about-team-grid {
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0 0;
}
@media (min-width: 720px) {
  .page-about .about-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page-about .about-team-card {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  padding: 1.2rem 1.1rem 1.3rem;
  box-shadow: 4px 4px 0 rgba(11, 22, 38, .16);
}
.page-about .about-team-count {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--orange);
}
.page-about .about-team-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: .55rem 0 .5rem;
  color: var(--ink);
}
.page-about .about-team-card p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--ink);
}

/* 资料来源 */
.page-about .about-sources {
  display: grid;
  gap: 1px;
  background: var(--line-paper);
  border: 2px solid var(--ink);
  margin-top: 1.3rem;
}
@media (min-width: 720px) {
  .page-about .about-sources {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page-about .about-source {
  background: var(--paper-2);
  padding: 1.2rem 1.1rem 1.3rem;
}
.page-about .about-source-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ink-blue);
  background: var(--cyan);
  padding: .15rem .45rem;
  margin-bottom: .7rem;
}
.page-about .about-source-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 .5rem;
  color: var(--ink);
}
.page-about .about-source p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--ink);
}

/* 深色引言块 */
.page-about .about-callout {
  margin-top: 1.4rem;
  background: var(--ink-green);
  border-left: 6px solid var(--orange);
  padding: 1.3rem 1.2rem 1.4rem;
}
.page-about .about-callout-kicker {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 .6rem;
}
.page-about .about-callout p:last-child {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--paper-soft);
  max-width: 62ch;
}

/* 回访章节的入口 */
.page-about .about-link-row {
  margin: 1.5rem 0 0;
}
.page-about .about-link-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .84rem;
  letter-spacing: .04em;
  padding: .7rem 1.05rem;
  color: var(--paper);
  background: var(--ink-blue);
  border: 2px solid var(--ink-blue);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.page-about .about-link-chip:hover,
.page-about .about-link-chip:focus-visible {
  background: var(--orange);
  color: var(--ink-blue);
  border-color: var(--orange);
}

/* 结尾行动 */
.page-about .about-cta {
  margin-top: 1.7rem;
}
.page-about .about-cta-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  padding: .85rem 1.6rem;
  background: var(--orange);
  color: var(--ink-blue);
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink-blue);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.page-about .about-cta-link:hover,
.page-about .about-cta-link:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink-blue);
}

@media (min-width: 1080px) {
  .page-about .about-hero-lede {
    max-width: 60ch;
  }
  .page-about .about-section > p {
    max-width: 68ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-toc-link,
  .page-about .about-link-chip,
  .page-about .about-cta-link,
  .page-about .about-timeline-node summary,
  .page-about .about-section-num,
  .page-about .about-crumbbar .breadcrumb-item a {
    transition: none;
  }
  .page-about .about-cta-link:hover,
  .page-about .about-cta-link:focus-visible {
    transform: none;
  }
}
<<<END>>>

我注意到输出中可能缺少结束标记，但按指令要求只输出标记内容，不需要额外的结束标记。让我确认输出格式正确。

实际上指令说"严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号"：MAIN_HTML 和 PAGE_CSS。没有 END 标记的要求，所以我应该删除 <<<END>>> 如果我包含它的话。让我确认一下……指令说的是"严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号： ...  ..."。没有提到 <<<END>>>。所以我应该删除它。

让我在心里重新过一遍整个输出，确保干净无问题。

我注意到在输出中我写了 <<<END>>>，它不应该在那里。而且我还应该验证所有 CSS 引用。

检查一下我用的变量：
- --paper ✓
- --ink ✓
- --paper-2 ✓
- --line-paper ✓
- --mist ✓
- --ink-green ✓
- --orange ✓
- --ink-blue ✓
- --dur-fast ✓
- --ease ✓
- --shell ✓
- --gutter ✓
- --font-mono ✓
- --font-body ✓
- --font-serif ✓
- --font-display ✓
- --paper-soft ✓
- --cyan ✓
- --line-dark ✓
- --shadow-brut ✓
- --dur ✓（没有用？检查一下……我没有在过渡里用 --dur。可能没用到。）

所有变量都存在。好。

嗯，一个顾虑：`.page-about .about-crumbbar .breadcrumb` —— 我用了带 `.breadcrumb` 类名的 `<nav>`，但我的 HTML 是 `<nav class="about-crumbbar" aria-label="面包屑导航">`，里面直接放 `.breadcrumb-list`。所以 `.page-about .about-crumbbar .breadcrumb` 选择器没有匹配到任何东西。

让我修正一下——要么给 nav 加上 `breadcrumb` 类，要么去掉那个选择器。让我给 nav 两个类名：`<nav class="breadcrumb about-crumbbar" aria-label="面包屑导航">`。

但那样 `.breadcrumb` 上的内边距会被共享样式集中处理。嗯。

更简单的做法：把选择器改为 `.page-about .about-crumbbar`。并删除 `.breadcrumb` 相关的行。

让我重写那一段：

```css
.page-about .about-crumbbar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-paper);
  padding: .8rem var(--gutter);
}
.page-about .about-crumbbar .breadcrumb-list {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  list-style: none;
  padding: 0;
  font-size: .82rem;
  color: var(--mist);
}
```

但等等，`.breadcrumb-list` 有 `max-width` 和 `margin: auto`，意味着它会居中且受限。但父级有 `padding: 0 var(--gutter);`。这样一来，`max-width` 就在外壳宽度以内生效了。很好。

还有 `padding: 0` 会覆盖掉。因为我已经在 `:root` 里把它设成 `0` 了，这没问题。

嗯，但是 `margin: 0 auto;` 配合 `max-width` 和 `flex` 是可以的。

现在父级的 `padding: .8rem var(--gutter)` 也处理了垂直居中的问题。

好吧。

还有，我在 `<nav class="about-crumbbar">` 里用 `.breadcrumb-list` 而没有 `.breadcrumb` —— 这没问题，只要样式能找到它就行。

再快速检查一遍 HTML 里的所有 `id` 是否和 TOC 链接对应：
- `#origin` ✓
- `#seasons` ✓
- `#team` ✓
- `#sources` ✓
- `#returns` ✓
- `#next` ✓

好的，都对上了。

还有，`<details>` 默认是折叠的。第一个是不是应该默认展开？没这个必要。还是说……默认展开会好点？保持闭合以维持节奏。

好了，现在输出最终答案并修复这些 CSS 问题。

另外我意识到我在工具中心 CTA 所在的章节用了 `.about-link-row` 作为 `<p>` 的类名，而它里面包含一个 `<a>`。这没问题。

但我把 `.about-link-row` 定义成 `margin: 1.5rem 0 0;` —— 它原本是个 p，所以默认的段落 margin 会被覆盖掉。没问题。

其实我把它设成 `margin: 0` 来抵消 p 的 margin 更好。那就用 `margin: 1.5rem 0 0;` —— 它覆盖了 p 的 `margin-bottom: 1.1rem`。这样没问题。

另外那个段落 *内部* 的锚点标签上用了 `.about-link-chip`。没问题。

好了，定稿。

还有一处：`.page-about .about-timeline-node summary::marker { content: ""; }` —— 这在一些浏览器里可能不合法。加个 `display: flex` 可以去掉默认的三角形。好。

还有，`-` 字符在 `content` 里我用了 `−`（减号）。没问题。

最终：开始输出。
<main id="main-content" class="page-about">
  <nav class="about-crumbbar" aria-label="面包屑导航">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item"><a href="/">矩阵首页</a></li>
      <li class="breadcrumb-item" aria-current="page">品牌故事</li>
    </ol>
  </nav>

  <header class="about-hero">
    <div class="about-hero-inner">
      <p class="about-eyebrow">品牌故事 / 2018-2019 赛季至今</p>
      <h1 class="about-hero-title">从一张战术板，到十二个联赛的资料库</h1>
      <p class="about-hero-lede">完美体育365 起步于一份赛后手记：几个人把关键回合画在板上、抄进文档，然后等下一次终场哨响。六年过去，这些手记长成了 12 个联赛频道、480 支球队档案和 1200 名以上球员的赛季资料，服务 18 万注册用户与每月约 42 万人次的回访。</p>
      <div class="about-hero-stats">
        <div class="about-hero-stat">
          <span class="about-hero-stat-num">12</span>
          <span class="about-hero-stat-label">收录联赛频道</span>
        </div>
        <div class="about-hero-stat">
          <span class="about-hero-stat-num">6</span>
          <span class="about-hero-stat-label">完整赛季档案</span>
        </div>
        <div class="about-hero-stat">
          <span class="about-hero-stat-num">28</span>
          <span class="about-hero-stat-label">编辑、产品与客服</span>
        </div>
      </div>
    </div>
  </header>

  <div class="about-layout">
    <aside class="about-toc" aria-label="章节索引">
      <p class="about-toc-title">章节索引</p>
      <ol class="about-toc-list">
        <li><a class="about-toc-link" href="#origin"><span class="about-toc-num">01</span>从一张战术板开始</a></li>
        <li><a class="about-toc-link" href="#seasons"><span class="about-toc-num">02</span>六年垒起的档案</a></li>
        <li><a class="about-toc-link" href="#team"><span class="about-toc-num">03</span>谁在整理资料</a></li>
        <li><a class="about-toc-link" href="#sources"><span class="about-toc-num">04</span>数据经过几双手</a></li>
        <li><a class="about-toc-link" href="#returns"><span class="about-toc-num">05</span>怎么回访常看的联赛</a></li>
        <li><a class="about-toc-link" href="#next"><span class="about-toc-num">06</span>下一个赛季</a></li>
      </ol>
    </aside>

    <div class="about-body">
      <section class="about-section" id="origin">
        <div class="about-section-head">
          <span class="about-section-num">01</span>
          <h2 class="about-section-title">从一张战术板开始</h2>
        </div>
        <div class="about-split">
          <div class="about-text">
            <p>2018-2019 赛季的一个晚上，我们把一场比赛的转折点画在战术板上，再一行行抄进文档。手记越积越厚，一个念头也清晰起来：终场哨响之后，观众真正想要的是能说清关键回合的资料，一张比分截图远远不够。</p>
            <p>从那以后，每场比赛都被拆成五段：比分走势、关键回合、数据对比、赛后看点、下轮提示。你打开任意一场，都能沿着同一条路径读完，不必在十几个页面之间来回翻找。</p>
          </div>
          <figure class="about-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深色战术板上手绘的跑动箭头、站位圆圈与边线标记，其中两条关键线路用橙色描出" loading="lazy" decoding="async">
            <figcaption>战术板上的第一份赛后手记 / 2018-2019 赛季</figcaption>
          </figure>
        </div>
      </section>

      <section class="about-section" id="seasons">
        <div class="about-section-head">
          <span class="about-section-num">02</span>
          <h2 class="about-section-title">六年下来，资料库里多了什么</h2>
        </div>
        <p>时间线上每个节点都对应一件具体的事。点开任意一条，你会看到那一年资料库多出了什么。</p>

        <ol class="about-timeline">
          <li class="about-timeline-item">
            <details class="about-timeline-node">
              <summary>
                <span class="about-timeline-year">2018-2019</span>
                <span class="about-timeline-name">一份手记变成固定栏目</span>
              </summary>
              <div class="about-timeline-body">
                <p>赛后手记定下了更新节奏，开始有读者按比赛日回来看。球队档案的底稿也在这一年起草。</p>
              </div>
            </details>
          </li>
          <li class="about-timeline-item">
            <details class="about-timeline-node">
              <summary>
                <span class="about-timeline-year">2019-2021</span>
                <span class="about-timeline-name">球队与球员建档成型</span>
              </summary>
              <div class="about-timeline-body">
                <p>两个赛季里把 480 支球队和 1200 名以上球员录进档案，球员以编号与位置标识，方便逐赛季对照。</p>
              </div>
            </details>
          </li>
          <li class="about-timeline-item">
            <details class="about-timeline-node">
              <summary>
                <span class="about-timeline-year">2022</span>
                <span class="about-timeline-name">通勤战报上线</span>
              </summary>
              <div class="about-timeline-body">
                <p>专为上下班路上刷手机的你而做，单篇阅读时长控制在 3 分钟以内，到站前能读完一场。</p>
              </div>
            </details>
          </li>
          <li class="about-timeline-item">
            <details class="about-timeline-node">
              <summary>
                <span class="about-timeline-year">2023</span>
                <span class="about-timeline-name">矩阵首页把入口收成一页</span>
              </summary>
              <div class="about-timeline-body">
                <p>联赛频道、专题栏目和规则说明集中到一个入口，同时关注几个联赛的人不必再记十几个网址。</p>
              </div>
            </details>
          </li>
          <li class="about-timeline-item">
            <details class="about-timeline-node">
              <summary>
                <span class="about-timeline-year">2024</span>
                <span class="about-timeline-name">全站视觉改版</span>
              </summary>
              <div class="about-timeline-body">
                <p>改用夜场控制室与战术板结合的设计语言，比分曲线、关键事件与数据表在平板上同屏可对照。</p>
              </div>
            </details>
          </li>
          <li class="about-timeline-item">
            <details class="about-timeline-node">
              <summary>
                <span class="about-timeline-year">下一个赛季</span>
                <span class="about-timeline-name">向 16 个联赛扩展</span>
              </summary>
              <div class="about-timeline-body">
                <p>资料库计划从 12 个联赛扩到 16 个，新增频道沿用两位编号；收藏清单同时开放协作分享。</p>
              </div>
            </details>
          </li>
        </ol>

        <figure class="about-figure about-figure--archive">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="暗色资料架上一排编号文件夹与资料盒，标签印着两位数字，最上层落着暖色灯光" loading="lazy" decoding="async">
          <figcaption>六个赛季的赛后档案 / 按联赛编号归档</figcaption>
        </figure>
      </section>

      <section class="about-section" id="team">
        <div class="about-section-head">
          <span class="about-section-num">03</span>
          <h2 class="about-section-title">谁在整理这些资料</h2>
        </div>
        <p>28 个人分成三组，各管一段。你不一定跟他们打照面，但每次刷新看到的比分、读到的复盘、点开的收藏夹，都出自这三组人之手。</p>

        <div class="about-team-grid">
          <article class="about-team-card">
            <span class="about-team-count">16</span>
            <h3 class="about-team-name">编辑与数据</h3>
            <p>负责赛前准备、赛后成稿与档案归档。专题栏目至今累计发布 320 篇赛后复盘、战术拆解和规则解读。</p>
          </article>
          <article class="about-team-card">
            <span class="about-team-count">7</span>
            <h3 class="about-team-name">产品与技术</h3>
            <p>做平板复盘模式、收藏夹和按编号排列的联赛入口，也维护比分曲线与数据表的同屏排版。</p>
          </article>
          <article class="about-team-card">
            <span class="about-team-count">5</span>
            <h3 class="about-team-name">客服与运营</h3>
            <p>工作日 09:00–18:00 在线，处理入口、更新与收藏方面的疑问，也整理你反馈的使用问题。</p>
          </article>
        </div>

        <figure class="about-figure about-figure--wide">
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="夜间办公桌的多块屏幕，一块显示统计表格、一块显示两个窗口并排比对，画面只露出双手与键盘" loading="lazy" decoding="async">
          <figcaption>赛后两小时 / 编辑台的常规状态</figcaption>
        </figure>
      </section>

      <section class="about-section" id="sources">
        <div class="about-section-head">
          <span class="about-section-num">04</span>
          <h2 class="about-section-title">一条数据从哪来，经过几双手</h2>
        </div>
        <p>每轮比赛结束后 30 分钟内，比分、关键事件和统计摘要就要上线。为了扛住这个节奏，资料来源分成三类，各有各的负责人。</p>

        <div class="about-sources">
          <article class="about-source">
            <span class="about-source-num">A</span>
            <h3 class="about-source-title">公开赛果</h3>
            <p>比分与比赛结果以赛事公开信息为准，赛果确认后第一时间进入资料库，供你刷新查看。</p>
          </article>
          <article class="about-source">
            <span class="about-source-num">B</span>
            <h3 class="about-source-title">统计公报</h3>
            <p>命中率、控球、跑动这些细节来自赛事统计公报，由编辑逐项录入到对应的比赛条目下。</p>
          </article>
          <article class="about-source">
            <span class="about-source-num">C</span>
            <h3 class="about-source-title">站点整理</h3>
            <p>赛季横评、球队趋势和历史对比由编辑自行汇总，条目后注明整理时间与覆盖范围。</p>
          </article>
        </div>

        <div class="about-callout">
          <p class="about-callout-kicker">两位编辑，同一份结果</p>
          <p>重要数据由两名编辑分头录入，再把结果逐项对一遍，对不上的打回重做。你在页面上看到的每个数值旁边，都标着来源类别和相对更新时间，比如“上一轮赛后 30 分钟内更新”，方便你判断这份资料新到什么程度。</p>
        </div>
      </section>

      <section class="about-section" id="returns">
        <div class="about-section-head">
          <span class="about-section-num">05</span>
          <h2 class="about-section-title">同时看几场球的人，怎么回访</h2>
        </div>
        <p>追两到五个联赛是常态，麻烦往往不在看比赛，而在回访：上周那场加时的关键回合在哪、上上轮的积分变动从哪个入口进。</p>
        <p>矩阵首页把 12 个联赛频道平铺在一页，每个入口配两位编号，口头分享时说“07 号频道”就行。收藏夹可以一次关注多个频道，最多保存 30 个联赛或专题，清单还能导出成图片，发给一起看球的朋友。</p>
        <p class="about-link-row">
          <a class="about-link-chip" href="/tools/">打开工具中心，试试平板复盘</a>
        </p>
      </section>

      <section class="about-section" id="next">
        <div class="about-section-head">
          <span class="about-section-num">06</span>
          <h2 class="about-section-title">下一个赛季的方向</h2>
        </div>
        <p>下一个赛季，资料库会从 12 个联赛扩到 16 个，新增频道同样配两位编号。收藏清单也会开放协作分享：你把常看的几个频道整理好发出去，对方打开就能看到你在看的东西。</p>
        <p>如果你有联赛或数据方面的合作想法，或者只想告诉我们哪一类复盘对你有用，都可以从咨询中心找过来。想先看一看内容风格，战报专栏里放着最新的赛后复盘。</p>
        <div class="about-cta">
          <a class="about-cta-link" href="/consult/">咨询合作</a>
        </div>
      </section>
    </div>
  </div>
</main>

.page-about {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

/* 面包屑 */
.page-about .about-crumbbar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-paper);
  padding: .8rem var(--gutter);
}
.page-about .about-crumbbar .breadcrumb-list {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--mist);
}
.page-about .about-crumbbar .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.page-about .about-crumbbar .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--mist);
}
.page-about .about-crumbbar .breadcrumb-item a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.page-about .about-crumbbar .breadcrumb-item a:hover,
.page-about .about-crumbbar .breadcrumb-item a:focus-visible {
  color: var(--orange);
}
.page-about .about-crumbbar .breadcrumb-item[aria-current="page"] {
  color: var(--ink-green);
  font-weight: 600;
}

/* 首屏 */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-blue);
  color: var(--paper);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.4rem, 5vw, 4rem);
  border-bottom: 4px solid var(--ink-green);
}
.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0,
    transparent 56px,
    rgba(53, 240, 208, .055) 56px,
    rgba(53, 240, 208, .055) 57px
  );
  pointer-events: none;
}
.page-about .about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-about .about-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(53, 240, 208, .5);
  padding: .35rem .65rem;
  margin: 0 0 1.4rem;
}
.page-about .about-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 7.6vw, 5.6rem);
  line-height: 1;
  letter-spacing: -.005em;
  margin: 0 0 1.3rem;
  max-width: 18ch;
}
.page-about .about-hero-lede {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.78;
  color: var(--paper-soft);
  max-width: 56ch;
  margin: 0 0 2.1rem;
}
.page-about .about-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  max-width: 620px;
  border-top: 1px solid var(--line-dark);
  padding-top: 1.5rem;
}
.page-about .about-hero-stat-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--cyan);
}
.page-about .about-hero-stat-label {
  display: block;
  margin-top: .45rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--mist);
}

/* 两栏骨架 */
.page-about .about-layout {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3.5rem) var(--gutter) clamp(3rem, 6vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
@media (min-width: 900px) {
  .page-about .about-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

/* 章节索引 */
.page-about .about-toc {
  order: -1;
}
.page-about .about-toc-title {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 .7rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line-paper);
}
.page-about .about-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem .9rem;
}
.page-about .about-toc-link {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.page-about .about-toc-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--orange);
}
.page-about .about-toc-link:hover,
.page-about .about-toc-link:focus-visible {
  color: var(--ink-green);
  border-bottom-color: var(--orange);
}
@media (min-width: 900px) {
  .page-about .about-toc {
    position: sticky;
    top: 96px;
    align-self: start;
  }
  .page-about .about-toc-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 章节 */
.page-about .about-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-about .about-section {
  scroll-margin-top: 96px;
  padding-top: 2rem;
  border-top: 2px solid var(--ink);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page-about .about-section:first-child {
  padding-top: 0;
  border-top: 0;
}
.page-about .about-section:last-child {
  margin-bottom: 0;
}
.page-about .about-section-head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: 1.2rem;
}
.page-about .about-section-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--orange);
  transition: color var(--dur-fast) var(--ease);
}
.page-about .about-section:target .about-section-num {
  color: var(--ink-green);
}
.page-about .about-section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.page-about .about-section > p {
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 1.1rem;
  max-width: 64ch;
  color: var(--ink);
}
.page-about .about-text p {
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 1.1rem;
  max-width: 64ch;
  color: var(--ink);
}
.page-about .about-text p:last-child {
  margin-bottom: 0;
}

/* 图文并置 */
.page-about .about-split {
  display: grid;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 760px) {
  .page-about .about-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 2.4rem;
  }
}
.page-about .about-figure {
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--ink-blue);
  box-shadow: var(--shadow-brut);
}
.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-figure figcaption {
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--mist);
  background: var(--ink-blue);
  padding: .55rem .7rem;
  border-top: 1px solid var(--line-dark);
}
.page-about .about-figure--archive {
  margin-top: 1.8rem;
  max-width: 560px;
}
.page-about .about-figure--wide {
  margin-top: 1.6rem;
  max-width: 640px;
}

/* 时间线 */
.page-about .about-timeline {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0 0 0 2.4rem;
  border-left: 3px solid var(--ink-green);
}
.page-about .about-timeline-item {
  position: relative;
}
.page-about .about-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-2.4rem - 8.5px);
  top: .78rem;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  background: var(--orange);
  border: 3px solid var(--ink-green);
}
.page-about .about-timeline-node {
  padding: 0 0 .55rem;
}
.page-about .about-timeline-node summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--line-paper);
  transition: border-color var(--dur-fast) var(--ease);
}
.page-about .about-timeline-node summary::-webkit-details-marker {
  display: none;
}
.page-about .about-timeline-node summary::marker {
  content: "";
}
.page-about .about-timeline-node summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--orange);
}
.page-about .about-timeline-node[open] summary {
  border-bottom-color: var(--orange);
  border-bottom-style: solid;
}
.page-about .about-timeline-node[open] summary::after {
  content: "−";
}
.page-about .about-timeline-year {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--ink-green);
}
.page-about .about-timeline-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  min-width: 0;
}
.page-about .about-timeline-node[open] .about-timeline-name {
  color: var(--ink-green);
}
.page-about .about-timeline-body {
  padding: .7rem 0 1rem;
  max-width: 54ch;
}
.page-about .about-timeline-body p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--ink);
}

/* 团队 */
.page-about .about-team-grid {
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0 0;
}
@media (min-width: 720px) {
  .page-about .about-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page-about .about-team-card {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  padding: 1.2rem 1.1rem 1.3rem;
  box-shadow: 4px 4px 0 rgba(11, 22, 38, .16);
}
.page-about .about-team-count {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--orange);
}
.page-about .about-team-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: .55rem 0 .5rem;
  color: var(--ink);
}
.page-about .about-team-card p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--ink);
}

/* 资料来源 */
.page-about .about-sources {
  display: grid;
  gap: 1px;
  background: var(--line-paper);
  border: 2px solid var(--ink);
  margin-top: 1.3rem;
}
@media (min-width: 720px) {
  .page-about .about-sources {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page-about .about-source {
  background: var(--paper-2);
  padding: 1.2rem 1.1rem 1.3rem;
}
.page-about .about-source-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ink-blue);
  background: var(--cyan);
  padding: .15rem .45rem;
  margin-bottom: .7rem;
}
.page-about .about-source-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 .5rem;
  color: var(--ink);
}
.page-about .about-source p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--ink);
}

/* 深色引言块 */
.page-about .about-callout {
  margin-top: 1.4rem;
  background: var(--ink-green);
  border-left: 6px solid var(--orange);
  padding: 1.3rem 1.2rem 1.4rem;
}
.page-about .about-callout-kicker {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 .6rem;
}
.page-about .about-callout p:last-child {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--paper-soft);
  max-width: 62ch;
}

/* 回访章节入口 */
.page-about .about-link-row {
  margin: 1.5rem 0 0;
}
.page-about .about-link-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .84rem;
  letter-spacing: .04em;
  padding: .7rem 1.05rem;
  color: var(--paper);
  background: var(--ink-blue);
  border: 2px solid var(--ink-blue);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.page-about .about-link-chip:hover,
.page-about .about-link-chip:focus-visible {
  background: var(--orange);
  color: var(--ink-blue);
  border-color: var(--orange);
}

/* 结尾行动 */
.page-about .about-cta {
  margin-top: 1.7rem;
}
.page-about .about-cta-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  padding: .85rem 1.6rem;
  background: var(--orange);
  color: var(--ink-blue);
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink-blue);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.page-about .about-cta-link:hover,
.page-about .about-cta-link:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink-blue);
}

@media (min-width: 1080px) {
  .page-about .about-hero-lede {
    max-width: 60ch;
  }
  .page-about .about-section > p {
    max-width: 68ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-toc-link,
  .page-about .about-link-chip,
  .page-about .about-cta-link,
  .page-about .about-timeline-node summary,
  .page-about .about-section-num,
  .page-about .about-crumbbar .breadcrumb-item a {
    transition: none;
  }
  .page-about .about-cta-link:hover,
  .page-about .about-cta-link:focus-visible {
    transform: none;
  }
}