.page-about {
  --about-shell: 1200px;
  --about-line: rgba(44, 62, 92, 0.16);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  overflow-x: hidden;
}

.page-about .media {
  overflow: hidden;
  position: relative;
  margin: 0;
}

.page-about .media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about .media__caption {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--moss);
}

.page-about .lede {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.7;
  color: var(--slate);
  max-width: 30em;
  margin: 0 0 18px;
}

/* ---------- 01 首屏 ---------- */
.page-about .about-intro {
  position: relative;
  padding: clamp(24px, 4vw, 44px) 0 clamp(48px, 8vw, 96px);
  background: var(--paper);
}

.page-about .about-intro::after {
  content: "";
  position: absolute;
  left: 62%;
  right: -14%;
  bottom: -60px;
  height: 260px;
  background: linear-gradient(135deg, var(--signal) 0%, var(--signal-deep) 100%);
  transform: skewY(-7deg);
  opacity: 0.07;
  pointer-events: none;
}

.page-about .about-intro__grid {
  position: relative;
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  margin-top: clamp(22px, 4vw, 44px);
}

.page-about .about-intro h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 7.4vw, 76px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.page-about .about-intro__copy > p:last-child {
  margin: 0;
  max-width: 36em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}

.page-about .about-intro__signal {
  align-self: end;
  background: var(--navy);
  color: var(--white);
  padding: 22px 22px 24px;
  border-left: 5px solid var(--signal);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.page-about .about-intro__signal-label {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--lime);
}

.page-about .about-intro__signal-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(52px, 12vw, 84px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.page-about .about-intro__signal-unit {
  margin: 6px 0 0;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--stone);
}

.page-about .about-intro__signal-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--slate);
  font-size: 13px;
  line-height: 1.7;
  color: var(--stone);
}

/* ---------- 章节头 ---------- */
.page-about .about-section-head {
  padding-top: 18px;
  border-top: 2px solid var(--ink);
  margin-bottom: clamp(26px, 4vw, 52px);
}

.page-about .about-index {
  display: inline-block;
  padding: 3px 9px 4px;
  background: var(--signal);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
}

.page-about .about-index--on-dark {
  background: var(--signal);
}

.page-about .about-section-head h2 {
  margin: 14px 0 8px;
  font-size: clamp(26px, 4.6vw, 48px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.page-about .about-aside {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--moss);
}

/* ---------- 02 起点 ---------- */
.page-about .about-origin {
  padding: clamp(46px, 7vw, 96px) 0;
}

.page-about .about-origin__body {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-about .about-origin__text p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.85;
  max-width: 38em;
}

.page-about .about-origin__text p:last-child {
  margin-bottom: 0;
}

.page-about .about-origin__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--stone);
  border: 1px solid var(--stone);
}

.page-about .about-origin__list li {
  background: var(--paper);
  padding: 15px 16px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.page-about .about-origin__list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--signal-deep);
}

/* ---------- 03 时间轴 ---------- */
.page-about .about-timeline {
  padding: clamp(46px, 7vw, 96px) 0;
  background: linear-gradient(180deg, rgba(220, 213, 198, 0.28) 0%, rgba(244, 241, 233, 0) 42%);
}

.page-about .about-axis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.page-about .about-axis--second {
  margin-top: clamp(28px, 5vw, 56px);
}

.page-about .about-axis__item {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 30px;
}

.page-about .about-axis__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: -34px;
  border-left: 1px dashed var(--stone);
}

.page-about .about-axis__item:last-child::before {
  bottom: auto;
  height: 44px;
}

.page-about .about-axis__dot {
  position: absolute;
  left: 0;
  top: 13px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 2px solid var(--stone);
  border-radius: 50%;
  background: var(--paper);
  z-index: 2;
}

.page-about .about-axis__item:first-child .about-axis__dot,
.page-about .about-axis--second .about-axis__item:first-child .about-axis__dot {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(232, 69, 31, 0.14);
}

.page-about .about-axis__year {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(34px, 9vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--slate);
}

.page-about .about-axis__card {
  background: var(--white);
  padding: 18px 18px 20px;
  box-shadow: inset 5px 0 0 var(--signal);
  border-top: 1px solid var(--stone);
  border-right: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.page-about .about-axis__card h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.page-about .about-axis__card > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}

.page-about .about-fold {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--stone);
}

.page-about .about-fold summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--signal-deep);
}

.page-about .about-fold summary::-webkit-details-marker {
  display: none;
}

.page-about .about-fold summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--signal);
}

.page-about .about-fold[open] summary::after {
  content: "–";
}

.page-about .about-fold > p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate);
  border-left: 2px solid var(--signal-soft);
  padding-left: 12px;
}

.page-about .about-band {
  margin: clamp(32px, 5vw, 64px) 0 0;
}

.page-about .about-band__media {
  aspect-ratio: 16 / 9;
}

/* ---------- 04 数据把关 ---------- */
.page-about .about-check {
  padding: clamp(46px, 7vw, 96px) 0;
  background: var(--white);
}

.page-about .about-check__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-about .about-check__media {
  margin: 0;
}

.page-about .about-check__media .media {
  aspect-ratio: 4 / 3;
}

.page-about .about-check__body > p:first-child {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.85;
  max-width: 38em;
}

.page-about .about-steps {
  list-style: none;
  counter-reset: about-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-about .about-steps li {
  position: relative;
  counter-increment: about-step;
  padding-left: 46px;
}

.page-about .about-steps li::before {
  content: counter(about-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--signal);
}

.page-about .about-steps h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-about .about-steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}

.page-about .about-check__foot {
  margin: 22px 0 0;
  padding: 14px 16px;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  line-height: 1.75;
  border-left: 4px solid var(--lime);
}

/* ---------- 05 产出规模 ---------- */
.page-about .about-scale {
  padding: clamp(46px, 7vw, 96px) 0;
}

.page-about .about-scale__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-about .about-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--stone);
  border: 1px solid var(--stone);
}

.page-about .about-count {
  display: grid;
  gap: 6px;
  background: var(--paper);
  padding: 18px 16px 20px;
}

.page-about .about-count__num {
  font-family: var(--font-mono);
  font-size: clamp(34px, 7vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--navy);
}

.page-about .about-count__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--moss);
}

.page-about .about-count__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--slate);
}

.page-about .about-scale__media {
  margin: 0;
}

.page-about .about-scale__media .media {
  aspect-ratio: 3 / 2;
}

.page-about .about-scale__foot {
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--stone);
  font-size: 14px;
  line-height: 1.85;
  color: var(--slate);
  max-width: 58em;
}

/* ---------- 06 协作 ---------- */
.page-about .about-partners {
  padding: clamp(46px, 7vw, 96px) 0;
  background: var(--white);
}

.page-about .about-partners__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-about .about-partners__main p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.85;
  max-width: 40em;
}

.page-about .about-partners__main p:last-child {
  margin-bottom: 0;
}

.page-about .about-partners__stats {
  display: grid;
  gap: 1px;
  background: var(--stone);
  border: 1px solid var(--stone);
}

.page-about .about-partners__stat {
  background: var(--paper);
  padding: 14px 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-about .about-partners__num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--signal);
  flex: 0 0 auto;
}

.page-about .about-partners__cap {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
}

/* ---------- 07 深色收束 ---------- */
.page-about .about-next {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: clamp(46px, 7vw, 92px) 0 clamp(52px, 8vw, 96px);
  overflow: hidden;
}

.page-about .about-next::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.page-about .about-next .container {
  position: relative;
}

.page-about .about-next__head h2 {
  margin: 16px 0 0;
  font-size: clamp(26px, 4.6vw, 46px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-about .about-next__grid {
  display: grid;
  gap: 1px;
  margin-top: clamp(26px, 4vw, 44px);
  background: var(--slate);
  border: 1px solid var(--slate);
}

.page-about .about-next__col {
  background: var(--navy-2);
  padding: 20px 18px 22px;
}

.page-about .about-next__col h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--white);
}

.page-about .about-next__col h3::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-right: 10px;
  vertical-align: 4px;
  background: var(--lime);
}

.page-about .about-next__col p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--stone);
}

.page-about .about-next__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(26px, 4vw, 42px) 0 0;
  padding: 0;
}

.page-about .about-next .btn--ghost {
  border-color: var(--slate);
  color: var(--white);
}

.page-about .about-next .btn--ghost:hover,
.page-about .about-next .btn--ghost:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-about .about-next__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .about-scale__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
}

@media (min-width: 900px) {
  .page-about .about-intro__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
  }

  .page-about .about-origin__body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  .page-about .about-check__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 56px);
  }

  .page-about .about-partners__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  .page-about .about-axis__item {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 10px 36px;
    padding-left: 40px;
    align-items: start;
  }

  .page-about .about-axis__item::before {
    left: 5px;
    top: 18px;
    bottom: -48px;
  }

  .page-about .about-axis__item:last-child::before {
    height: 60px;
  }

  .page-about .about-axis__dot {
    top: 20px;
  }

  .page-about .about-axis__year {
    font-size: clamp(58px, 6vw, 76px);
  }

  .page-about .about-axis__card {
    padding: 22px 24px 24px;
  }

  .page-about .about-counts {
    gap: 1px;
  }
}

@media (min-width: 1100px) {
  .page-about .about-band__media {
    aspect-ratio: 21 / 9;
  }
}
<<<END>>>

等等，我不该加 `<<<END>>>`。让我删掉它，顺便检查一下格式。

实际上指令说每个标记必须恰好出现一次，并且按照顺序：`` 然后是 ``。结尾不需要额外的标记。我直接删掉就行了。

直接输出到 `` 的 CSS 结束就好。

再验证一下只用到了 JS 相关的属性——其实我压根没加 `data-*` 属性，除非把 `<details>` 算上，它本身是原生行为，不需要脚本。`data-progress` 自动进度条是共享脚本创建的。没问题。

再仔细检查一下：`.page-about .about-axis__item:first-child .about-axis__dot`——对第二个 ol 来说，`:first-child` 对应的是 2020 那一条。我把两个选择器合并成一条了，没问题。

还有 `.about-intro::after`——`overflow-x: hidden` 已经设在 `.page-about` 上，应该能拦住斜块，不会横向溢出。但垂直方向可能会把下面那段撑出额外高度。它只是装饰性的，不影响。好。

再确认一下 `.page-about .about-intro__signal` 的 `clip-path`——用 `box-shadow` 再补一条左侧信号边应该也行，但 `clip-path` 会把阴影裁掉。用 `inset` 方式看看——嗯，其实在边框外面加 `box-shadow` 也会被裁掉。还是换个稳妥的做法：

```css
.page-about .about-intro__signal {
  position: relative;
  ...
  border-left: none;
}
.page-about .about-intro__signal::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--signal);
}
```

因为元素本身有 `clip-path`，`::before` 作为子元素也会被裁剪，但正好是左下角切角的位置，那里的左边线会自然弯折一下，效果反而不错。

实际上元素内部间距是 `24px 22px` 上下、左右 22px——那个 5px 横条压在左边缘上，和内容可能有轻微视觉冲突，但影响不大。

我就直接用 `::before` 来实现吧。

另外 `.page-about .about-intro__signal-num` 用 `var(--lime)`？不，还是保持白色。然后在深色底上用 `--lime` 做标签。这样没问题。

好，输出吧。

还要再检查一下 `.page-about .about-check__foot` 加了深蓝底和浅绿左边框——可读性没问题。

再通查一下有没有被禁的词：口径 / 边界 / 核对 / 可核对 / 逐条核对 / 资料性呈现 / 统一口径 / 跨页面一致 / 不代表 / 不做承诺 / 不设 / 不提供 / 本页只 / 这个页面只做 / 我们不做。

快速扫一遍我的文案：

- “从来不是一个人记完就算数” OK
- “确认积分变动和战报里的说法对得上” OK
- “三道走完” OK
- “共享同一套资料”——嗯，“共享”没问题。
- “五个项目共享同一套资料”——可以。

好，没有禁词。

还有“逐条落到具体位置”——“逐条”本身没问题，不是“逐条核对”这种词组。

继续输出。
<main id="main-content" class="page-about">

  <section class="about-intro" aria-labelledby="about-title">
    <div class="container">
      <nav class="breadcrumb" aria-label="当前位置">
        <ol>
          <li><a href="/">赛场首页</a></li>
          <li aria-current="page">品牌历程</li>
        </ol>
      </nav>

      <div class="about-intro__grid">
        <div class="about-intro__copy">
          <p class="eyebrow">2017 — 现在 · 八个赛季</p>
          <h1 id="about-title">从一块比分牌，长成一座数据指挥台</h1>
          <p class="lede">热竞技体育最早的页面只干一件事：把刚刚发生的那一分，用最快的速度送到你手机上。</p>
          <p>八年下来，同一个入口已经装得下十二个联赛专题、二千六百多名球员的档案，以及每轮都在变的阵容名单。内容的厚度变了，打开的速度没变，比分排在最前面的顺序也没变。</p>
        </div>

        <aside class="about-intro__signal" aria-label="八个赛季留存">
          <p class="about-intro__signal-label">比分与战报</p>
          <p class="about-intro__signal-num">8</p>
          <p class="about-intro__signal-unit">个赛季完整留存</p>
          <p class="about-intro__signal-note">从 2017 年第一块移动端比分牌开始，一轮都没有空着。</p>
        </aside>
      </div>
    </div>
  </section>

  <section class="about-origin" aria-labelledby="origin-title">
    <div class="container">
      <header class="about-section-head">
        <span class="about-index">01</span>
        <h2 id="origin-title">起点：一块等不了的比分牌</h2>
        <p class="about-aside">2017 年 · 第一个移动端页面</p>
      </header>

      <div class="about-origin__body">
        <div class="about-origin__text">
          <p>那时候查一场球的比分，得先打开比赛详情页，再往下翻两三屏。手机信号一弱，页面就卡在半路，等到刷出来，那一分早过去了。热竞技体育的第一个版本把顺序整个倒过来：比分顶在最上面，轮次和对阵压在两侧，其余内容统统往后放。</p>
          <p>页面因此瘦了很多。在地铁里、在电梯口、在球馆门口的几分钟里，点开就能看见当前轮次打到哪儿。这个习惯一直留到了今天——打开任何一页专题，先出现的总是正在进行的比赛，之后才是积分、阵容和战报。</p>
        </div>

        <ul class="about-origin__list">
          <li><strong>先比分</strong>当前轮次的比分与比赛状态排在最前，其余内容依次展开。</li>
          <li><strong>先手机</strong>布局从窄屏开始设计，桌面版是把手机上的内容铺开来。</li>
          <li><strong>先能用</strong>弱网环境下优先保证数字出来，图表与画面随后补齐。</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-timeline" aria-labelledby="timeline-title">
    <div class="container">
      <header class="about-section-head">
        <span class="about-index">02</span>
        <h2 id="timeline-title">六个节点，一条越走越宽的赛道</h2>
        <p class="about-aside">按年份刻度</p>
      </header>

      <ol class="about-axis">
        <li class="about-axis__item">
          <span class="about-axis__dot" aria-hidden="true"></span>
          <p class="about-axis__year">2017</p>
          <article class="about-axis__card">
            <h3>第一块比分牌上线</h3>
            <p>移动端比分页跑通，比分、轮次与对阵挤在一屏里完成展示，页面体积压到几百 KB。</p>
            <details class="about-fold">
              <summary>当季关键事件</summary>
              <p>首屏改成比分优先渲染，比赛进行中的数字可以单独刷新，不用等整页重新下载。</p>
            </details>
          </article>
        </li>

        <li class="about-axis__item">
          <span class="about-axis__dot" aria-hidden="true"></span>
          <p class="about-axis__year">2018</p>
          <article class="about-axis__card">
            <h3>球员档案库建立</h3>
            <p>位置、号码、出场时间与赛季累计数据开始成体系地归档，赛后查人不再只靠战报里的几行字。</p>
            <details class="about-fold">
              <summary>当季关键事件</summary>
              <p>档案库与比分页打通，点开一场比赛就能看到双方的首发名单和当季出场情况。</p>
            </details>
          </article>
        </li>

        <li class="about-axis__item">
          <span class="about-axis__dot" aria-hidden="true"></span>
          <p class="about-axis__year">2019</p>
          <article class="about-axis__card">
            <h3>赛季年鉴创刊</h3>
            <p>第一册年鉴把当季积分、阵容与关键战报收进同一份电子刊，此后一季一册。</p>
            <details class="about-fold">
              <summary>当季关键事件</summary>
              <p>年鉴成了赛季结束后的回看入口，也被不少内容创作者拿去当复盘底稿。</p>
            </details>
          </article>
        </li>
      </ol>

      <figure class="about-band">
        <div class="media media--wide media--slant about-band__media">
          <img class="media__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="昏暗编辑室里多块屏幕显示比分与数据表，冷蓝光与橙色指示灯交织" loading="lazy" decoding="async">
        </div>
        <figcaption class="media__caption">每轮比赛收尾时，编辑室的大屏会同时亮起比赛画面与数据面板</figcaption>
      </figure>

      <ol class="about-axis about-axis--second" start="4">
        <li class="about-axis__item">
          <span class="about-axis__dot" aria-hidden="true"></span>
          <p class="about-axis__year">2020</p>
          <article class="about-axis__card">
            <h3>阵容变动开始逐轮记录</h3>
            <p>首发调整、伤停替换与转会登记按轮次落条，一个赛季累计超过四千八百条，翻阵容不再是拼图。</p>
            <details class="about-fold">
              <summary>当季关键事件</summary>
              <p>阵容对照视图上线，同一名球员上一轮和这一轮站在什么位置，可以逐行对着看。</p>
            </details>
          </article>
        </li>

        <li class="about-axis__item">
          <span class="about-axis__dot" aria-hidden="true"></span>
          <p class="about-axis__year">2023</p>
          <article class="about-axis__card">
            <h3>移动端直播线路改造</h3>
            <p>南北分别配置加速线路，弱网环境下的卡顿率下降 42%，地铁里看直播不再靠运气。</p>
            <details class="about-fold">
              <summary>当季关键事件</summary>
              <p>直播与比分模块拆开加载，画面还在缓冲时，比分已经先一步出现在屏幕上。</p>
            </details>
          </article>
        </li>

        <li class="about-axis__item">
          <span class="about-axis__dot" aria-hidden="true"></span>
          <p class="about-axis__year">2024</p>
          <article class="about-axis__card">
            <h3>新版首页合并成长卷</h3>
            <p>比分、积分榜与专题目录不再分散在几个入口，收进同一条纵向长卷，从上往下翻一遍就够。</p>
            <details class="about-fold">
              <summary>当季关键事件</summary>
              <p>移动端首屏加载控制在 1.5 秒以内，比分模块最先落地。</p>
            </details>
          </article>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-check" aria-labelledby="check-title">
    <div class="container">
      <header class="about-section-head">
        <span class="about-index">03</span>
        <h2 id="check-title">一轮比赛，三道把关</h2>
        <p class="about-aside">编辑岗 × 数据校对岗</p>
      </header>

      <div class="about-check__grid">
        <figure class="about-check__media">
          <div class="media media--tall media--slant">
            <img class="media__img" src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="桌面特写：纸质轮次表、笔迹标记与平板上的阵容点位图并列，暖光照明" loading="lazy" decoding="async">
          </div>
          <figcaption class="media__caption">轮次表上的手写标记，会与平板上的阵容点位逐项对上</figcaption>
        </figure>

        <div class="about-check__body">
          <p>一场比赛的分数、积分和阵容，从来不是一个人记完就算数。每轮比赛收尾，这些数字要先在两道岗位之间走一个来回，再由第三道通读一遍。</p>

          <ol class="about-steps">
            <li>
              <h3>赛果先落地</h3>
              <p>编辑录入终场比分、进球时间与红黄牌，同时标出这场有没有改变排名。</p>
            </li>
            <li>
              <h3>阵容和出场时间对齐</h3>
              <p>数据校对岗把首发名单、换人记录与出场时间跟上一轮比对，首发调整、伤停替换、转会登记逐项落到具体位置。</p>
            </li>
            <li>
              <h3>积分与战报一起通读</h3>
              <p>值班编辑拿着轮次表把当轮所有场次过一遍，确认积分变动和战报里的说法对得上，之后才写进数据面板。</p>
            </li>
          </ol>

          <p class="about-check__foot">三道走完，你在战报里看到的排名，和积分榜上那一行是同一份。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="about-scale" aria-labelledby="scale-title">
    <div class="container">
      <header class="about-section-head">
        <span class="about-index">04</span>
        <h2 id="scale-title">八个赛季攒下来的家底</h2>
        <p class="about-aside">赛季累计</p>
      </header>

      <div class="about-scale__grid">
        <div class="about-counts">
          <div class="about-count">
            <span class="about-count__num">12</span>
            <span class="about-count__label">联赛专题频道</span>
            <p class="about-count__note">覆盖足球、篮球、排球、乒乓球、羽毛球五类项目。</p>
          </div>
          <div class="about-count">
            <span class="about-count__num">2600</span>
            <span class="about-count__label">名球员档案</span>
            <p class="about-count__note">位置、号码、出场时间与赛季累计数据都在里面。</p>
          </div>
          <div class="about-count">
            <span class="about-count__num">4800</span>
            <span class="about-count__label">条阵容变动（单赛季）</span>
            <p class="about-count__note">首发调整、伤停替换与转会登记，按轮次落条。</p>
          </div>
          <div class="about-count">
            <span class="about-count__num">6</span>
            <span class="about-count__label">期赛季年鉴</span>
            <p class="about-count__note">一季一册，汇总当季积分、阵容与关键战报。</p>
          </div>
        </div>

        <figure class="about-scale__media">
          <div class="media media--slant">
            <img class="media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="六期赛季年鉴电子刊封面并排，深蓝底配橙色编号，封面为抽象几何图形" loading="lazy" decoding="async">
          </div>
          <figcaption class="media__caption">六个赛季的年鉴电子刊，一季一册</figcaption>
        </figure>
      </div>

      <p class="about-scale__foot">单轮赛事的视频集锦产出在 60 到 90 条之间，按专题与球队归档，赛后当天完成汇总；图文战报在比赛结束 20 分钟内上线，赶得上你回家路上的那几分钟。</p>
    </div>
  </section>

  <section class="about-partners" aria-labelledby="partners-title">
    <div class="container">
      <header class="about-section-head">
        <span class="about-index">05</span>
        <h2 id="partners-title">写球的人，不止我们一拨</h2>
        <p class="about-aside">协作与交流</p>
      </header>

      <div class="about-partners__grid">
        <div class="about-partners__main">
          <p>平台与四十余家体育内容创作者保持着长期的选题协作。赛后观察、数据解读、阵容变动背后的来龙去脉，很多来自这种一对一的约稿和来回打磨。</p>
          <p>编辑团队会定期和协作者一起开选题会，把当季值得回看的比赛挑出来。这些讨论里的一部分，最后会变成年鉴的章节，也会变成专题页里那段最耐读的分析。</p>
        </div>

        <div class="about-partners__stats">
          <div class="about-partners__stat">
            <span class="about-partners__num">40+</span>
            <span class="about-partners__cap">家内容创作者长期协作</span>
          </div>
          <div class="about-partners__stat">
            <span class="about-partners__num">6</span>
            <span class="about-partners__cap">期年鉴收录协作选题</span>
          </div>
          <div class="about-partners__stat">
            <span class="about-partners__num">5</span>
            <span class="about-partners__cap">类项目共用同一套资料</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="about-next" aria-labelledby="next-title">
    <div class="container">
      <div class="about-next__head">
        <span class="about-index about-index--on-dark">06</span>
        <h2 id="next-title">接下来的重心</h2>
      </div>

      <div class="about-next__grid">
        <div class="about-next__col">
          <h3>再快一点</h3>
          <p>移动端首屏控制在 1.5 秒以内，比分模块优先渲染。三十一个省区市的访问节点南北分线，弱网下少转几圈。</p>
        </div>
        <div class="about-next__col">
          <h3>再深一层</h3>
          <p>十二个联赛专题里，阵容变动与球员数据的对照会继续做细，让每册年鉴都有更多能回看的东西。</p>
        </div>
        <div class="about-next__col">
          <h3>再找得回来</h3>
          <p>旧版本资料按赛季、轮次与球队归档。想翻回几年前的某一场，从支持中心就能找到入口。</p>
        </div>
      </div>

      <ul class="about-next__links">
        <li><a class="btn btn--solid" href="/platform/">看平台服务</a></li>
        <li><a class="btn btn--ghost" href="/information/">翻资讯速递</a></li>
        <li><a class="btn btn--ghost" href="/support/">进支持中心</a></li>
        <li><a class="btn btn--ghost" href="/feedback/">提意见反馈</a></li>
      </ul>
    </div>
  </section>

</main>

.page-about {
  --about-line: rgba(44, 62, 92, 0.16);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  overflow-x: hidden;
}

.page-about .media {
  overflow: hidden;
  position: relative;
  margin: 0;
}

.page-about .media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about .media__caption {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--moss);
}

.page-about .lede {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.7;
  color: var(--slate);
  max-width: 30em;
  margin: 0 0 18px;
}

/* ---------- 首屏 ---------- */
.page-about .about-intro {
  position: relative;
  padding: clamp(24px, 4vw, 44px) 0 clamp(48px, 8vw, 96px);
  background: var(--paper);
}

.page-about .about-intro::after {
  content: "";
  position: absolute;
  left: 62%;
  right: -14%;
  bottom: -60px;
  height: 260px;
  background: linear-gradient(135deg, var(--signal) 0%, var(--signal-deep) 100%);
  transform: skewY(-7deg);
  opacity: 0.07;
  pointer-events: none;
}

.page-about .about-intro__grid {
  position: relative;
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  margin-top: clamp(22px, 4vw, 44px);
}

.page-about .about-intro h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 7.4vw, 76px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.page-about .about-intro__copy > p:last-child {
  margin: 0;
  max-width: 36em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}

.page-about .about-intro__signal {
  position: relative;
  align-self: end;
  background: var(--navy);
  color: var(--white);
  padding: 22px 22px 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.page-about .about-intro__signal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--signal);
}

.page-about .about-intro__signal-label {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--lime);
}

.page-about .about-intro__signal-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(52px, 12vw, 84px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.page-about .about-intro__signal-unit {
  margin: 6px 0 0;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--stone);
}

.page-about .about-intro__signal-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--slate);
  font-size: 13px;
  line-height: 1.7;
  color: var(--stone);
}

/* ---------- 章节头 ---------- */
.page-about .about-section-head {
  padding-top: 18px;
  border-top: 2px solid var(--ink);
  margin-bottom: clamp(26px, 4vw, 52px);
}

.page-about .about-index {
  display: inline-block;
  padding: 3px 9px 4px;
  background: var(--signal);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
}

.page-about .about-index--on-dark {
  background: var(--signal);
}

.page-about .about-section-head h2 {
  margin: 14px 0 8px;
  font-size: clamp(26px, 4.6vw, 48px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.page-about .about-aside {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--moss);
}

/* ---------- 起点 ---------- */
.page-about .about-origin {
  padding: clamp(46px, 7vw, 96px) 0;
}

.page-about .about-origin__body {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-about .about-origin__text p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.85;
  max-width: 38em;
}

.page-about .about-origin__text p:last-child {
  margin-bottom: 0;
}

.page-about .about-origin__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--stone);
  border: 1px solid var(--stone);
}

.page-about .about-origin__list li {
  background: var(--paper);
  padding: 15px 16px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.page-about .about-origin__list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--signal-deep);
}

/* ---------- 时间轴 ---------- */
.page-about .about-timeline {
  padding: clamp(46px, 7vw, 96px) 0;
  background: linear-gradient(180deg, rgba(220, 213, 198, 0.28) 0%, rgba(244, 241, 233, 0) 42%);
}

.page-about .about-axis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.page-about .about-axis--second {
  margin-top: clamp(28px, 5vw, 56px);
}

.page-about .about-axis__item {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 30px;
}

.page-about .about-axis__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: -34px;
  border-left: 1px dashed var(--stone);
}

.page-about .about-axis__item:last-child::before {
  bottom: auto;
  height: 44px;
}

.page-about .about-axis__dot {
  position: absolute;
  left: 0;
  top: 13px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 2px solid var(--stone);
  border-radius: 50%;
  background: var(--paper);
  z-index: 2;
}

.page-about .about-axis__item:first-child .about-axis__dot {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(232, 69, 31, 0.14);
}

.page-about .about-axis__year {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(34px, 9vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--slate);
}

.page-about .about-axis__card {
  background: var(--white);
  padding: 18px 18px 20px;
  box-shadow: inset 5px 0 0 var(--signal);
  border-top: 1px solid var(--stone);
  border-right: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.page-about .about-axis__card h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.page-about .about-axis__card > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}

.page-about .about-fold {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--stone);
}

.page-about .about-fold summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--signal-deep);
}

.page-about .about-fold summary::-webkit-details-marker {
  display: none;
}

.page-about .about-fold summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--signal);
}

.page-about .about-fold[open] summary::after {
  content: "–";
}

.page-about .about-fold > p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate);
  border-left: 2px solid var(--signal-soft);
  padding-left: 12px;
}

.page-about .about-band {
  margin: clamp(32px, 5vw, 64px) 0 0;
}

.page-about .about-band__media {
  aspect-ratio: 16 / 9;
}

/* ---------- 三道把关 ---------- */
.page-about .about-check {
  padding: clamp(46px, 7vw, 96px) 0;
  background: var(--white);
}

.page-about .about-check__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-about .about-check__media {
  margin: 0;
}

.page-about .about-check__media .media {
  aspect-ratio: 4 / 3;
}

.page-about .about-check__body > p:first-child {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.85;
  max-width: 38em;
}

.page-about .about-steps {
  list-style: none;
  counter-reset: about-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-about .about-steps li {
  position: relative;
  counter-increment: about-step;
  padding-left: 46px;
}

.page-about .about-steps li::before {
  content: counter(about-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--signal);
}

.page-about .about-steps h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-about .about-steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}

.page-about .about-check__foot {
  margin: 22px 0 0;
  padding: 14px 16px;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  line-height: 1.75;
  border-left: 4px solid var(--lime);
}

/* ---------- 产出规模 ---------- */
.page-about .about-scale {
  padding: clamp(46px, 7vw, 96px) 0;
}

.page-about .about-scale__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-about .about-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--stone);
  border: 1px solid var(--stone);
}

.page-about .about-count {
  display: grid;
  gap: 6px;
  background: var(--paper);
  padding: 18px 16px 20px;
}

.page-about .about-count__num {
  font-family: var(--font-mono);
  font-size: clamp(34px, 7vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--navy);
}

.page-about .about-count__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--moss);
}

.page-about .about-count__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--slate);
}

.page-about .about-scale__media {
  margin: 0;
}

.page-about .about-scale__media .media {
  aspect-ratio: 3 / 2;
}

.page-about .about-scale__foot {
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--stone);
  font-size: 14px;
  line-height: 1.85;
  color: var(--slate);
  max-width: 58em;
}

/* ---------- 协作 ---------- */
.page-about .about-partners {
  padding: clamp(46px, 7vw, 96px) 0;
  background: var(--white);
}

.page-about .about-partners__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-about .about-partners__main p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.85;
  max-width: 40em;
}

.page-about .about-partners__main p:last-child {
  margin-bottom: 0;
}

.page-about .about-partners__stats {
  display: grid;
  gap: 1px;
  background: var(--stone);
  border: 1px solid var(--stone);
}

.page-about .about-partners__stat {
  background: var(--paper);
  padding: 14px 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-about .about-partners__num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--signal);
}

.page-about .about-partners__cap {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
}

/* ---------- 深色收束 ---------- */
.page-about .about-next {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: clamp(46px, 7vw, 92px) 0 clamp(52px, 8vw, 96px);
  overflow: hidden;
}

.page-about .about-next::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.page-about .about-next .container {
  position: relative;
}

.page-about .about-next__head h2 {
  margin: 16px 0 0;
  font-size: clamp(26px, 4.6vw, 46px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-about .about-next__grid {
  display: grid;
  gap: 1px;
  margin-top: clamp(26px, 4vw, 44px);
  background: var(--slate);
  border: 1px solid var(--slate);
}

.page-about .about-next__col {
  background: var(--navy-2);
  padding: 20px 18px 22px;
}

.page-about .about-next__col h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--white);
}

.page-about .about-next__col h3::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-right: 10px;
  vertical-align: 4px;
  background: var(--lime);
}

.page-about .about-next__col p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--stone);
}

.page-about .about-next__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(26px, 4vw, 42px) 0 0;
  padding: 0;
}

.page-about .about-next .btn--ghost {
  border-color: var(--slate);
  color: var(--white);
}

.page-about .about-next .btn--ghost:hover,
.page-about .about-next .btn--ghost:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-about .about-next__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .about-scale__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
}

@media (min-width: 900px) {
  .page-about .about-intro__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
  }

  .page-about .about-origin__body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  .page-about .about-check__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 56px);
  }

  .page-about .about-partners__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  .page-about .about-axis__item {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 10px 36px;
    padding-left: 40px;
    align-items: start;
  }

  .page-about .about-axis__item::before {
    left: 5px;
    top: 18px;
    bottom: -48px;
  }

  .page-about .about-axis__item:last-child::before {
    height: 60px;
  }

  .page-about .about-axis__dot {
    top: 20px;
  }

  .page-about .about-axis__year {
    font-size: clamp(58px, 6vw, 76px);
  }

  .page-about .about-axis__card {
    padding: 22px 24px 24px;
  }
}

@media (min-width: 1100px) {
  .page-about .about-band__media {
    aspect-ratio: 21 / 9;
  }
}