.page-about {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  overflow-wrap: break-word;
}

.page-about [id^="chapter-"] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.page-about .breadcrumb {
  padding-top: 1.1rem;
  padding-bottom: .25rem;
}

/* ---------- 布局骨架 ---------- */
.page-about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

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

@media (min-width: 940px) {
  .page-about .about-layout {
    grid-template-columns: 118px minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
  }
}

/* ---------- 左侧章节轨道 ---------- */
.page-about .chapter-rail {
  border-bottom: 1px solid var(--line);
  padding-block: .5rem .75rem;
}

.page-about .rail-heading {
  display: none;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 .7rem;
}

.page-about .rail-list {
  display: flex;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-about .rail-list::-webkit-scrollbar {
  display: none;
}

.page-about .rail-link {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: .42rem .55rem;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.page-about .rail-num {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .rail-link:hover,
.page-about .rail-link:focus-visible {
  color: var(--white);
  background: rgba(60, 242, 196, .08);
  border-bottom-color: var(--cyan);
}

.page-about .rail-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (min-width: 940px) {
  .page-about .chapter-rail {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    align-self: start;
    max-height: calc(100dvh - var(--header-h) - 2rem);
    overflow-y: auto;
    border-bottom: 0;
    border-left: 1px solid var(--line);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 0 .9rem;
  }

  .page-about .rail-heading {
    display: block;
  }

  .page-about .rail-list {
    flex-direction: column;
    overflow: visible;
    gap: .1rem;
  }

  .page-about .rail-link {
    border-left: 2px solid transparent;
    border-bottom: 0;
  }

  .page-about .rail-link:hover,
  .page-about .rail-link:focus-visible {
    border-left-color: var(--cyan);
    border-bottom-color: transparent;
  }
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 5vw, 3.5rem);
}

.page-about .about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

@media (min-width: 1040px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.75rem;
    align-items: start;
  }
}

.page-about .about-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.35rem, 6vw, 4.3rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin: .65rem 0 0;
  color: var(--white);
}

.page-about .about-hero__lede {
  margin: 1.15rem 0 0;
  max-width: 54ch;
  font-size: 1.02rem;
  line-height: 1.72;
  color: #C6DAD2;
}

.page-about .about-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 2rem;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.page-about .hero-stat {
  min-width: 0;
}

.page-about .hero-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .hero-stat__label {
  display: block;
  margin-top: .35rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* 首屏章节预览卡 */
.page-about .about-preview {
  border: 1px solid var(--line);
  background: var(--ink-deepest);
}

.page-about .about-preview__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-deepest);
}

.page-about .about-preview__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: .78;
}

.page-about .about-preview__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 16, 13, .92), rgba(6, 16, 13, .05) 72%);
  pointer-events: none;
}

.page-about .about-preview__body {
  padding: .9rem 1rem 1.1rem;
}

.page-about .about-preview__label {
  margin: 0 0 .55rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-about .about-preview__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-preview__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .7rem;
  padding: .58rem .4rem .58rem .35rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--paper);
  transition: background-color .18s ease;
}

.page-about .about-preview__item:hover,
.page-about .about-preview__item:focus-visible {
  background: rgba(60, 242, 196, .1);
}

.page-about .about-preview__item:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-about .about-preview__num {
  grid-row: span 2;
  padding-top: .18rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--cyan);
}

.page-about .about-preview__title {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
}

.page-about .about-preview__text {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- 通用章节 ---------- */
.page-about .about-section {
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  border-top: 1px solid var(--line);
}

.page-about .about-section__head {
  margin-bottom: clamp(1.2rem, 3vw, 1.9rem);
}

.page-about .about-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-about .about-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--signal);
  flex: none;
}

.page-about .about-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--white);
}

.page-about .about-lede {
  margin: .85rem 0 0;
  max-width: 62ch;
  font-size: .98rem;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 暖纸阅读区 ---------- */
.page-about .about-section--paper {
  background: var(--paper);
  color: var(--ink);
  border-top: 2px solid var(--cyan);
  padding-inline: clamp(1rem, 3.5vw, 2.5rem);
}

.page-about .about-section--paper .about-title {
  color: var(--ink);
}

.page-about .about-section--paper .about-lede {
  color: #41564E;
}

.page-about .about-section--paper .about-kicker {
  color: #0E6350;
}

.page-about .about-section--paper .about-kicker::before {
  background: var(--signal);
}

.page-about .timing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

@media (min-width: 720px) {
  .page-about .timing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-about .timing-card {
  border: 1px solid rgba(11, 31, 26, .22);
  border-top: 2px solid #0E6350;
  background: #FBF6EB;
  padding: 1rem 1.05rem 1.15rem;
}

.page-about .timing-card__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: #0E6350;
  text-transform: uppercase;
}

.page-about .timing-card__title {
  margin: .4rem 0 .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.16;
  color: var(--ink);
}

.page-about .timing-card__text {
  margin: 0;
  font-size: .89rem;
  line-height: 1.66;
  color: #3B4F47;
}

.page-about .timing-card__list {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .35rem;
}

.page-about .timing-card__list li {
  position: relative;
  padding-left: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.55;
  color: #1C302A;
}

.page-about .timing-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 6px;
  height: 6px;
  background: var(--signal);
}

.page-about .figure {
  margin: 1.5rem 0 0;
  border: 1px solid rgba(11, 31, 26, .22);
  background: #E8DDC6;
}

.page-about .figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .figure figcaption {
  padding: .6rem .8rem;
  border-top: 1px solid rgba(11, 31, 26, .16);
  font-family: var(--font-mono);
  font-size: .7rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #41564E;
}

.page-about .figure--team {
  margin-top: 1.25rem;
}

/* ---------- 发展历程 / 年份切换 ---------- */
.page-about .about-stage {
  margin-top: 1.1rem;
}

.page-about .stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}

.page-about .stage-tab {
  appearance: none;
  cursor: pointer;
  padding: .48rem .95rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .07em;
  font-variant-numeric: tabular-nums;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.page-about .stage-tab:hover {
  color: var(--white);
  border-color: var(--cyan);
}

.page-about .stage-tab[aria-selected="true"] {
  color: var(--ink-deepest);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-about .stage-tab:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-about .stage-panel {
  border: 1px solid var(--line);
  background: var(--ink-deepest);
  padding: clamp(1rem, 3vw, 1.6rem);
}

.page-about .stage-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
}

@media (min-width: 720px) {
  .page-about .stage-panel__grid {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
}

.page-about .stage-panel__year {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .stage-panel__head {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--white);
}

.page-about .stage-panel__text {
  margin: .55rem 0 0;
  font-size: .9rem;
  line-height: 1.7;
  color: #B9CFC6;
}

.page-about .stage-panel__list {
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
}

.page-about .stage-panel__list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--paper);
}

.page-about .stage-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 7px;
  height: 2px;
  background: var(--cyan);
}

.page-about .about-stage__note {
  margin: 1rem 0 0;
  padding-left: .85rem;
  border-left: 2px solid var(--yellow);
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 团队 ---------- */
.page-about .team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
}

@media (min-width: 640px) {
  .page-about .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .page-about .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-about .team-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: rgba(11, 31, 26, .55);
  padding: .95rem .95rem 1.05rem;
}

.page-about .team-card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.page-about .team-card__role {
  display: block;
  margin-top: .4rem;
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--cyan);
}

.page-about .team-card__text {
  margin: .5rem 0 0;
  font-size: .8rem;
  line-height: 1.62;
  color: var(--muted);
}

.page-about .team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .page-about .team-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 2rem;
    align-items: start;
  }
}

.page-about .team-layout .figure {
  margin-top: 0;
  border-color: var(--line);
  background: var(--ink-deepest);
}

.page-about .team-layout .figure figcaption {
  border-top-color: var(--line);
  color: var(--muted);
}

.page-about .team-partners {
  min-width: 0;
}

.page-about .team-partners__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.22;
  color: var(--white);
}

.page-about .team-partners__text {
  margin: .7rem 0 0;
  font-size: .9rem;
  line-height: 1.72;
  color: #B9CFC6;
}

.page-about .partner-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .95rem 0 0;
  padding: 0;
  list-style: none;
}

.page-about .partner-chip {
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  background: rgba(60, 242, 196, .07);
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .03em;
  color: var(--paper);
}

.page-about .inline-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}

.page-about .inline-link:hover,
.page-about .inline-link:focus-visible {
  color: var(--ink-deepest);
  background: var(--cyan);
}

/* ---------- 荣誉与承诺 ---------- */
.page-about .about-section--honor {
  background: var(--paper-alt);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-inline: clamp(1rem, 3.5vw, 2.5rem);
}

.page-about .about-section--honor .about-title {
  color: var(--ink);
}

.page-about .about-section--honor .about-lede {
  color: #41564E;
}

.page-about .about-kicker--dark {
  color: #8A3A1E;
}

.page-about .about-kicker--dark::before {
  background: var(--signal);
}

.page-about .honor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

@media (min-width: 760px) {
  .page-about .honor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-about .honor-card {
  position: relative;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 1.05rem 1.1rem 1.2rem 1.35rem;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: background-color .18s ease;
}

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

.page-about .honor-card:hover {
  background: #FBF6EB;
}

.page-about .honor-card__year {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: #0E6350;
  font-variant-numeric: tabular-nums;
}

.page-about .honor-card__title {
  margin: .45rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.24rem;
  line-height: 1.22;
  color: var(--ink);
}

.page-about .honor-card__cat {
  margin: .45rem 0 0;
  font-size: .79rem;
  line-height: 1.6;
  color: #41564E;
}

.page-about .pledge-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(11, 31, 26, .28);
}

.page-about .pledge-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .25rem;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(11, 31, 26, .18);
}

@media (min-width: 600px) {
  .page-about .pledge-item {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
  }
}

.page-about .pledge-key {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: #8A3A1E;
}

.page-about .pledge-val {
  font-size: .89rem;
  line-height: 1.7;
  color: #22362F;
}

/* ---------- 收尾入口 ---------- */
.page-about .about-next {
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}

.page-about .about-next__lede {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.3;
  color: var(--white);
}

.page-about .next-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-about .rail-link,
  .page-about .about-preview__item,
  .page-about .stage-tab,
  .page-about .honor-card {
    transition: none;
  }
}
<<<END>>>

等等——上面的输出里 `<<<END>>>` 是多余的，本来不应该有，但既然写出来了……

不过关键检查：我有没有正确闭合所有标签？我检查一下 main_html 的结构：

- `<main>` → 面包屑 div → 关于布局 div → aside → 关于正文 div → 各 section → 关闭。

在收尾入口 div 之后，我关闭了 about-body、about-layout，然后是 main。对，就是这样：

```
      </div>   <!-- about-next -->
    </div>     <!-- about-body -->
  </div>       <!-- about-layout -->
</main>
```

是的，在 HTML 末尾匹配上了。

等等——我把 `</div>` 正确放好了吗？重算一下：

- `<main>` 
- `<div class="container">` 面包屑 → `</div>`
- `<div class="container about-layout">`
  - `<aside>` ... `</aside>`
  - `<div class="about-body">`
    - 各个 section
    - `<div class="about-next">` ... `</div>`
  - `</div>` ← 关闭 about-body
- `</div>` ← 关闭 about-layout
- `</main>`

在输出里，我写的是：

```
      <div class="about-next">
        ...
      </div>
    </div>
  </div>
</main>
```

是的，没错。

还有一点——首屏预览列表里的 `about-preview__item` 是包在 `<li>` 里的 `<a>` 元素。没问题。

检查一下 `.about-section--paper` 的 `border-top:2px solid cyan` —— 在深色页面里效果不错。

另外我用过 `.eyebrow`（来自全局类）—— 在深色背景上可能没有样式，但既然是共享类，应该没问题。

好。图片统计：正好 3 张。✓

再检查一下“不要复制 meta description 里连续 10 个以上字符”。首页描述是：“了解 N体育看台的官方直营方式、品牌历程、团队分工、数据时效原则与合作生态。看台围绕多联赛赛程、手机射门统计和短句战报持续迭代，并以稳定服务支持日常看球。” 我的页面没有逐字复制。没问题。

还有“不要用描述里的名词列表”—— 我并没有把它们硬堆在 h1 里列出。没问题。

好。输出。因为标记已经写好了，直接输出吧。不过还是要再检查一下 PAGE_CSS 里有没有 `--ghost` 或者 `--primary` 的 var 引用——我并没有用它们，我用的是 `.btn--primary` 这些共享类。嗯。

再检查一下新变量——我并没有声明任何新变量，只用了已有的。`--header-h`、`--line`、`--cyan`、`--muted`、`--white`、`--paper`、`--ink`、`--ink-deepest`、`--paper-alt`、`--signal`、`--yellow`、`--font-mono`、`--font-display`、`--font-body`，全都在列表里。✓

现在输出。
<main id="main-content" class="page-about">
  <div class="container">
    <nav class="breadcrumb" aria-label="当前位置">
      <ol class="breadcrumb-list">
        <li><a class="breadcrumb-link" href="/">看台首页</a></li>
        <li aria-current="page">品牌主张</li>
      </ol>
    </nav>
  </div>

  <div class="container about-layout">
    <aside class="chapter-rail" aria-label="页内章节导航">
      <p class="rail-heading">章节</p>
      <ul class="rail-list">
        <li><a class="rail-link" href="#chapter-start"><span class="rail-num">01</span><span class="rail-label">起点</span></a></li>
        <li><a class="rail-link" href="#chapter-why"><span class="rail-num">02</span><span class="rail-label">为什么</span></a></li>
        <li><a class="rail-link" href="#chapter-history"><span class="rail-num">03</span><span class="rail-label">历程</span></a></li>
        <li><a class="rail-link" href="#chapter-team"><span class="rail-num">04</span><span class="rail-label">团队</span></a></li>
        <li><a class="rail-link" href="#chapter-trust"><span class="rail-num">05</span><span class="rail-label">荣誉</span></a></li>
      </ul>
    </aside>

    <div class="about-body">
      <section id="chapter-start" class="about-hero">
        <div class="about-hero__grid">
          <div class="about-hero__copy">
            <p class="eyebrow">官方直营 · 品牌主张</p>
            <h1 class="about-hero__title">一个官方直营的看台，先替你确认变化</h1>
            <p class="about-hero__lede">N体育看台是官方直营的简体版体育看台，2021 年正式上线。我们最在意的事很具体：同时盯着几个联赛的你，打开页面就能确认今晚的赛程有没有挪动、射门数据已经走到哪一步。赛程、统计、战报放在同一个入口里，不用在几个标签页之间来回找。</p>
            <div class="about-hero__stats">
              <div class="hero-stat">
                <span class="hero-stat__num">14</span>
                <span class="hero-stat__label">个联赛与杯赛</span>
              </div>
              <div class="hero-stat">
                <span class="hero-stat__num">68万</span>
                <span class="hero-stat__label">注册用户</span>
              </div>
              <div class="hero-stat">
                <span class="hero-stat__num">120+</span>
                <span class="hero-stat__label">每周更新赛程场次</span>
              </div>
            </div>
          </div>

          <div class="about-preview">
            <div class="about-preview__media">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="斜角看台灯光与深墨绿轨道线条叠加的夜间场景，无人物">
            </div>
            <div class="about-preview__body">
              <p class="about-preview__label">这一页读什么</p>
              <ul class="about-preview__list">
                <li>
                  <a class="about-preview__item" href="#chapter-why">
                    <span class="about-preview__num">02</span>
                    <span class="about-preview__title">为什么这样组织内容</span>
                    <span class="about-preview__text">入口效率与数据时效，各自的取舍</span>
                  </a>
                </li>
                <li>
                  <a class="about-preview__item" href="#chapter-history">
                    <span class="about-preview__num">03</span>
                    <span class="about-preview__title">这几年做了什么</span>
                    <span class="about-preview__text">从简体版落地到多联赛并行</span>
                  </a>
                </li>
                <li>
                  <a class="about-preview__item" href="#chapter-team">
                    <span class="about-preview__num">04</span>
                    <span class="about-preview__title">谁在维护这些数字</span>
                    <span class="about-preview__text">四条工作线与外部协作伙伴</span>
                  </a>
                </li>
                <li>
                  <a class="about-preview__item" href="#chapter-trust">
                    <span class="about-preview__num">05</span>
                    <span class="about-preview__title">荣誉与长期承诺</span>
                    <span class="about-preview__text">稳定、无障碍与反馈处理时效</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section id="chapter-why" class="about-section about-section--paper">
        <div class="about-section__head">
          <p class="about-kicker">02 / 为什么</p>
          <h2 class="about-title">先让你看到变化，再让你看懂比赛</h2>
          <p class="about-lede">多联赛球迷最怕两件事：开赛时间临时挪了没人告诉，数据刷了半天还是上一轮。我们把这两件事拆成三条并行的工作线，各自有明确的交付节奏。</p>
        </div>

        <div class="timing-grid">
          <article class="timing-card">
            <p class="timing-card__label">赛程变更</p>
            <h3 class="timing-card__title">8 分钟，灯先亮</h3>
            <p class="timing-card__text">官方信息一发布，标注就跟着走，让变更先于你的出行安排。</p>
            <ul class="timing-card__list">
              <li>平均 8 分钟内完成标注</li>
              <li>紧急变更 3 分钟内上时间轴</li>
              <li>橙红色块打断阅读，不怕划过去</li>
            </ul>
          </article>

          <article class="timing-card">
            <p class="timing-card__label">射门统计</p>
            <h3 class="timing-card__title">30 秒，数据跟上</h3>
            <p class="timing-card__text">手机版数据卡随比赛进程推进，射门与射正不再等半场结束。</p>
            <ul class="timing-card__list">
              <li>射门、射正、禁区触球、预期进球等 9 类指标</li>
              <li>赛前、上半场、下半场、补时四段切换</li>
              <li>关键事件即时刷新，荧光青脉冲环提示</li>
            </ul>
          </article>

          <article class="timing-card">
            <p class="timing-card__label">短句战报</p>
            <h3 class="timing-card__title">6 到 12 条，一屏读完</h3>
            <p class="timing-card__text">不写长段落，把一场比赛的走向压缩成能边走边看的分点。</p>
            <ul class="timing-card__list">
              <li>要点式呈现，重点比赛追加 3 条战术观察</li>
              <li>反馈入口放在栏目底部</li>
              <li>编辑团队工作日汇总处理</li>
            </ul>
          </article>
        </div>

        <figure class="figure">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="战术板网格、时间节点与荧光青轨迹线组成的抽象信息图" loading="lazy" decoding="async">
          <figcaption>计时与统计共用一条时间轴：变更节点在左，数据刷新节点在右，异常状态用橙红标出。</figcaption>
        </figure>
      </section>

      <section id="chapter-history" class="about-section">
        <div class="about-section__head">
          <p class="about-kicker">03 / 历程</p>
          <h2 class="about-title">四个阶段，把入口磨顺手</h2>
          <p class="about-lede">从第一版简体界面到今天，每一轮迭代都围绕同一件事：让你少点几下、早几秒看到结果。切换年份可以看每个阶段新增了什么。</p>
        </div>

        <div class="about-stage" data-tabs>
          <div class="stage-tabs" role="tablist" aria-label="版本阶段">
            <button class="tab stage-tab" type="button" role="tab" id="tab-2021" aria-controls="panel-2021" aria-selected="true" tabindex="0">2021</button>
            <button class="tab stage-tab" type="button" role="tab" id="tab-2023" aria-controls="panel-2023" aria-selected="false" tabindex="-1">2023</button>
            <button class="tab stage-tab" type="button" role="tab" id="tab-2024" aria-controls="panel-2024" aria-selected="false" tabindex="-1">2024</button>
            <button class="tab stage-tab" type="button" role="tab" id="tab-2025" aria-controls="panel-2025" aria-selected="false" tabindex="-1">2025</button>
          </div>

          <div class="tab-panel stage-panel" role="tabpanel" id="panel-2021" aria-labelledby="tab-2021">
            <div class="stage-panel__grid">
              <p class="stage-panel__year">2021</p>
              <div>
                <h3 class="stage-panel__head">简体版正式上线</h3>
                <p class="stage-panel__text">第一版就把联赛切换放进左侧竖向轨道，常用入口收进收藏夹，赛程按轮次排列。单赛季能查到的比赛超过 4200 场。</p>
                <ul class="stage-panel__list">
                  <li>简体中文界面，联赛与球队名称统一</li>
                  <li>收藏夹一键打开，桌面与手机主屏都能建快捷方式</li>
                  <li>赛事与统计条目累计超过 18 万条</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="tab-panel stage-panel" role="tabpanel" id="panel-2023" aria-labelledby="tab-2023" hidden>
            <div class="stage-panel__grid">
              <p class="stage-panel__year">2023</p>
              <div>
                <h3 class="stage-panel__head">手机版射门统计</h3>
                <p class="stage-panel__text">把手上的数据做成能在手机上立住的卡片：分阶段切换，刷新节奏跟着比赛走。</p>
                <ul class="stage-panel__list">
                  <li>覆盖射门、射正、禁区触球、预期进球等 9 类指标</li>
                  <li>赛前、上半场、下半场与补时四段切换</li>
                  <li>常规刷新间隔 30 秒，关键事件即时触发</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="tab-panel stage-panel" role="tabpanel" id="panel-2024" aria-labelledby="tab-2024" hidden>
            <div class="stage-panel__grid">
              <p class="stage-panel__year">2024</p>
              <div>
                <h3 class="stage-panel__head">战术板视觉改版</h3>
                <p class="stage-panel__text">深墨绿打底、细网格覆盖，锐角与等宽数字取代了圆角卡片，深色看台与暖纸阅读两套主题同时上线。</p>
                <ul class="stage-panel__list">
                  <li>细线网格与直角面板成为主导形状</li>
                  <li>深色看台、暖纸阅读两种显示模式，偏好保存在本地</li>
                  <li>键盘焦点可见，对比度符合 WCAG AA</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="tab-panel stage-panel" role="tabpanel" id="panel-2025" aria-labelledby="tab-2025" hidden>
            <div class="stage-panel__grid">
              <p class="stage-panel__year">2025</p>
              <div>
                <h3 class="stage-panel__head">多联赛并行浏览</h3>
                <p class="stage-panel__text">同时盯几个联赛的人多了，于是把并行固定、变更筛选和纵向时间轴一起补齐。</p>
                <ul class="stage-panel__list">
                  <li>最多同时固定 6 个联赛</li>
                  <li>赛程变更筛选两步完成：先选联赛，再选变更类型</li>
                  <li>变更时间轴固定在首页第二栏</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <p class="about-stage__note">每 6 周发布一个公开版本，一年迭代 8 至 9 个版本。每周更新的赛程在 120 场以上，统计条目 900 条以上。</p>
      </section>

      <section id="chapter-team" class="about-section">
        <div class="about-section__head">
          <p class="about-kicker">04 / 团队</p>
          <h2 class="about-title">数字背后是 87 个人的日常</h2>
          <p class="about-lede">四条工作线各自对不同的结果负责：一条盯数据准不准，一条管读起来顺不顺，一条保证页面不卡，一条接住你的问题。</p>
        </div>

        <div class="team-grid">
          <article class="team-card">
            <span class="team-card__num">26</span>
            <span class="team-card__role">数据团队</span>
            <p class="team-card__text">负责赛程接收、统计校对与刷新节奏，异常变更第一时间标出。</p>
          </article>
          <article class="team-card">
            <span class="team-card__num">18</span>
            <span class="team-card__role">内容编辑</span>
            <p class="team-card__text">把比赛写成 6 到 12 条短句要点，重点场次追加战术观察。</p>
          </article>
          <article class="team-card">
            <span class="team-card__num">34</span>
            <span class="team-card__role">产品与研发</span>
            <p class="team-card__text">维护看台与手机版的加载速度、并行浏览和主题切换体验。</p>
          </article>
          <article class="team-card">
            <span class="team-card__num">9</span>
            <span class="team-card__role">客服支持</span>
            <p class="team-card__text">处理入口使用、统计疑问和战报反馈，工作日跟进到底。</p>
          </article>
        </div>

        <div class="team-layout">
          <figure class="figure figure--team">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="桌面上并排的多块数据卡片与细线连线，边缘有抽象手部剪影" loading="lazy" decoding="async">
            <figcaption>数据卡、战报稿与客服工单在同一条工作流里流转。</figcaption>
          </figure>
          <div class="team-partners">
            <h3 class="team-partners__title">看台之外，还有一群人在补位</h3>
            <p class="team-partners__text">赛程源、统计源和内容输出不靠单打独斗。我们与外部伙伴长期配合，把多联赛的覆盖面撑起来，也让战术观察这类偏深的内容有人写、有人核。</p>
            <ul class="partner-row">
              <li class="partner-chip">数据服务商 6 家</li>
              <li class="partner-chip">内容创作者 12 家</li>
              <li class="partner-chip">覆盖 14 个联赛与杯赛</li>
            </ul>
            <p class="team-partners__text">想看这些能力具体长什么样，可以翻<a class="inline-link" href="/solutions/">看台方案</a>，也可以直接读<a class="inline-link" href="/trends/">最近的赛况观察</a>。</p>
          </div>
        </div>
      </section>

      <section id="chapter-trust" class="about-section about-section--honor">
        <div class="about-section__head">
          <p class="about-kicker about-kicker--dark">05 / 荣誉</p>
          <h2 class="about-title">做久了，会有人替你记一笔</h2>
          <p class="about-lede">奖项不是目标，但它说明一件事：把数据做准、把入口做顺，是会被看见的。</p>
        </div>

        <div class="honor-grid">
          <article class="honor-card">
            <p class="honor-card__year">2024</p>
            <h3 class="honor-card__title">体育数据产品体验奖</h3>
            <p class="honor-card__cat">类别：数据产品体验方向</p>
          </article>
          <article class="honor-card">
            <p class="honor-card__year">2025</p>
            <h3 class="honor-card__title">长三角体育科技应用案例</h3>
            <p class="honor-card__cat">类别：体育科技应用方向</p>
          </article>
        </div>

        <ul class="pledge-list">
          <li class="pledge-item">
            <span class="pledge-key">稳定</span>
            <span class="pledge-val">平台可用性 99.9%，峰值并发支撑 12 万，比赛日不掉链子。</span>
          </li>
          <li class="pledge-item">
            <span class="pledge-key">速度</span>
            <span class="pledge-val">移动端首屏平均加载 1.8 秒，掏出手机就能看到比分。</span>
          </li>
          <li class="pledge-item">
            <span class="pledge-key">易读</span>
            <span class="pledge-val">键盘焦点可见、对比度符合 WCAG AA，主要页面支持键盘操作。</span>
          </li>
          <li class="pledge-item">
            <span class="pledge-key">回应</span>
            <span class="pledge-val">反馈平均 2 个工作日内给出处理结果，客服邮箱工作日 9:00-18:00 内回复。</span>
          </li>
          <li class="pledge-item">
            <span class="pledge-key">习惯</span>
            <span class="pledge-val">深色看台与暖纸阅读两种显示模式，选过一次就记住。</span>
          </li>
        </ul>
      </section>

      <div class="about-next">
        <p class="about-next__lede">想知道这些能力具体怎么用在你身上，往下走两步。</p>
        <div class="next-links">
          <a class="btn btn--primary" href="/solutions/">看功能方案</a>
          <a class="btn btn--ghost" href="/trends/">读赛况观察</a>
          <a class="btn btn--signal" href="/contact/">联系支持</a>
        </div>
      </div>
    </div>
  </div>
</main>

.page-about {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  overflow-wrap: break-word;
}

.page-about [id^="chapter-"] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.page-about .breadcrumb {
  padding-top: 1.1rem;
  padding-bottom: .25rem;
}

/* ---------- 布局骨架 ---------- */
.page-about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

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

@media (min-width: 940px) {
  .page-about .about-layout {
    grid-template-columns: 118px minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
  }
}

/* ---------- 左侧章节轨道 ---------- */
.page-about .chapter-rail {
  border-bottom: 1px solid var(--line);
  padding-block: .5rem .75rem;
}

.page-about .rail-heading {
  display: none;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 .7rem;
}

.page-about .rail-list {
  display: flex;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-about .rail-list::-webkit-scrollbar {
  display: none;
}

.page-about .rail-link {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: .42rem .55rem;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.page-about .rail-num {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .rail-link:hover,
.page-about .rail-link:focus-visible {
  color: var(--white);
  background: rgba(60, 242, 196, .08);
  border-bottom-color: var(--cyan);
}

.page-about .rail-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (min-width: 940px) {
  .page-about .chapter-rail {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    align-self: start;
    max-height: calc(100dvh - var(--header-h) - 2rem);
    overflow-y: auto;
    border-bottom: 0;
    border-left: 1px solid var(--line);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 0 .9rem;
  }

  .page-about .rail-heading {
    display: block;
  }

  .page-about .rail-list {
    flex-direction: column;
    overflow: visible;
    gap: .1rem;
  }

  .page-about .rail-link {
    border-left: 2px solid transparent;
    border-bottom: 0;
  }

  .page-about .rail-link:hover,
  .page-about .rail-link:focus-visible {
    border-left-color: var(--cyan);
    border-bottom-color: transparent;
  }
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 5vw, 3.5rem);
}

.page-about .about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

@media (min-width: 1040px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.75rem;
    align-items: start;
  }
}

.page-about .about-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.35rem, 6vw, 4.3rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin: .65rem 0 0;
  color: var(--white);
}

.page-about .about-hero__lede {
  margin: 1.15rem 0 0;
  max-width: 54ch;
  font-size: 1.02rem;
  line-height: 1.72;
  color: #C6DAD2;
}

.page-about .about-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 2rem;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.page-about .hero-stat {
  min-width: 0;
}

.page-about .hero-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .hero-stat__label {
  display: block;
  margin-top: .35rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* 首屏章节预览卡 */
.page-about .about-preview {
  border: 1px solid var(--line);
  background: var(--ink-deepest);
}

.page-about .about-preview__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-deepest);
}

.page-about .about-preview__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: .78;
}

.page-about .about-preview__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 16, 13, .92), rgba(6, 16, 13, .05) 72%);
  pointer-events: none;
}

.page-about .about-preview__body {
  padding: .9rem 1rem 1.1rem;
}

.page-about .about-preview__label {
  margin: 0 0 .55rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-about .about-preview__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-preview__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .7rem;
  padding: .58rem .4rem .58rem .35rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--paper);
  transition: background-color .18s ease;
}

.page-about .about-preview__item:hover,
.page-about .about-preview__item:focus-visible {
  background: rgba(60, 242, 196, .1);
}

.page-about .about-preview__item:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-about .about-preview__num {
  grid-row: span 2;
  padding-top: .18rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--cyan);
}

.page-about .about-preview__title {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
}

.page-about .about-preview__text {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- 通用章节 ---------- */
.page-about .about-section {
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  border-top: 1px solid var(--line);
}

.page-about .about-section__head {
  margin-bottom: clamp(1.2rem, 3vw, 1.9rem);
}

.page-about .about-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-about .about-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--signal);
  flex: none;
}

.page-about .about-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--white);
}

.page-about .about-lede {
  margin: .85rem 0 0;
  max-width: 62ch;
  font-size: .98rem;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 暖纸阅读区 ---------- */
.page-about .about-section--paper {
  background: var(--paper);
  color: var(--ink);
  border-top: 2px solid var(--cyan);
  padding-inline: clamp(1rem, 3.5vw, 2.5rem);
}

.page-about .about-section--paper .about-title {
  color: var(--ink);
}

.page-about .about-section--paper .about-lede {
  color: #41564E;
}

.page-about .about-section--paper .about-kicker {
  color: #0E6350;
}

.page-about .about-section--paper .about-kicker::before {
  background: var(--signal);
}

.page-about .timing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

@media (min-width: 720px) {
  .page-about .timing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-about .timing-card {
  border: 1px solid rgba(11, 31, 26, .22);
  border-top: 2px solid #0E6350;
  background: #FBF6EB;
  padding: 1rem 1.05rem 1.15rem;
}

.page-about .timing-card__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: #0E6350;
  text-transform: uppercase;
}

.page-about .timing-card__title {
  margin: .4rem 0 .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.16;
  color: var(--ink);
}

.page-about .timing-card__text {
  margin: 0;
  font-size: .89rem;
  line-height: 1.66;
  color: #3B4F47;
}

.page-about .timing-card__list {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .35rem;
}

.page-about .timing-card__list li {
  position: relative;
  padding-left: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.55;
  color: #1C302A;
}

.page-about .timing-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 6px;
  height: 6px;
  background: var(--signal);
}

.page-about .figure {
  margin: 1.5rem 0 0;
  border: 1px solid rgba(11, 31, 26, .22);
  background: #E8DDC6;
}

.page-about .figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .figure figcaption {
  padding: .6rem .8rem;
  border-top: 1px solid rgba(11, 31, 26, .16);
  font-family: var(--font-mono);
  font-size: .7rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #41564E;
}

.page-about .figure--team {
  margin-top: 1.25rem;
}

/* ---------- 发展历程 / 年份切换 ---------- */
.page-about .about-stage {
  margin-top: 1.1rem;
}

.page-about .stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}

.page-about .stage-tab {
  appearance: none;
  cursor: pointer;
  padding: .48rem .95rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .07em;
  font-variant-numeric: tabular-nums;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.page-about .stage-tab:hover {
  color: var(--white);
  border-color: var(--cyan);
}

.page-about .stage-tab[aria-selected="true"] {
  color: var(--ink-deepest);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-about .stage-tab:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-about .stage-panel {
  border: 1px solid var(--line);
  background: var(--ink-deepest);
  padding: clamp(1rem, 3vw, 1.6rem);
}

.page-about .stage-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
}

@media (min-width: 720px) {
  .page-about .stage-panel__grid {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
}

.page-about .stage-panel__year {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-about .stage-panel__head {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--white);
}

.page-about .stage-panel__text {
  margin: .55rem 0 0;
  font-size: .9rem;
  line-height: 1.7;
  color: #B9CFC6;
}

.page-about .stage-panel__list {
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
}

.page-about .stage-panel__list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--paper);
}

.page-about .stage-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 7px;
  height: 2px;
  background: var(--cyan);
}

.page-about .about-stage__note {
  margin: 1rem 0 0;
  padding-left: .85rem;
  border-left: 2px solid var(--yellow);
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 团队 ---------- */
.page-about .team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
}

@media (min-width: 640px) {
  .page-about .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .page-about .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-about .team-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: rgba(11, 31, 26, .55);
  padding: .95rem .95rem 1.05rem;
}

.page-about .team-card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.page-about .team-card__role {
  display: block;
  margin-top: .4rem;
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--cyan);
}

.page-about .team-card__text {
  margin: .5rem 0 0;
  font-size: .8rem;
  line-height: 1.62;
  color: var(--muted);
}

.page-about .team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .page-about .team-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 2rem;
    align-items: start;
  }
}

.page-about .team-layout .figure {
  margin-top: 0;
  border-color: var(--line);
  background: var(--ink-deepest);
}

.page-about .team-layout .figure figcaption {
  border-top-color: var(--line);
  color: var(--muted);
}

.page-about .team-partners {
  min-width: 0;
}

.page-about .team-partners__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.22;
  color: var(--white);
}

.page-about .team-partners__text {
  margin: .7rem 0 0;
  font-size: .9rem;
  line-height: 1.72;
  color: #B9CFC6;
}

.page-about .partner-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .95rem 0 0;
  padding: 0;
  list-style: none;
}

.page-about .partner-chip {
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  background: rgba(60, 242, 196, .07);
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .03em;
  color: var(--paper);
}

.page-about .inline-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}

.page-about .inline-link:hover,
.page-about .inline-link:focus-visible {
  color: var(--ink-deepest);
  background: var(--cyan);
}

/* ---------- 荣誉与承诺 ---------- */
.page-about .about-section--honor {
  background: var(--paper-alt);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-inline: clamp(1rem, 3.5vw, 2.5rem);
}

.page-about .about-section--honor .about-title {
  color: var(--ink);
}

.page-about .about-section--honor .about-lede {
  color: #41564E;
}

.page-about .about-kicker--dark {
  color: #8A3A1E;
}

.page-about .about-kicker--dark::before {
  background: var(--signal);
}

.page-about .honor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

@media (min-width: 760px) {
  .page-about .honor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-about .honor-card {
  position: relative;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 1.05rem 1.1rem 1.2rem 1.35rem;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: background-color .18s ease;
}

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

.page-about .honor-card:hover {
  background: #FBF6EB;
}

.page-about .honor-card__year {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: #0E6350;
  font-variant-numeric: tabular-nums;
}

.page-about .honor-card__title {
  margin: .45rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.24rem;
  line-height: 1.22;
  color: var(--ink);
}

.page-about .honor-card__cat {
  margin: .45rem 0 0;
  font-size: .79rem;
  line-height: 1.6;
  color: #41564E;
}

.page-about .pledge-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(11, 31, 26, .28);
}

.page-about .pledge-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .25rem;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(11, 31, 26, .18);
}

@media (min-width: 600px) {
  .page-about .pledge-item {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
  }
}

.page-about .pledge-key {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: #8A3A1E;
}

.page-about .pledge-val {
  font-size: .89rem;
  line-height: 1.7;
  color: #22362F;
}

/* ---------- 收尾入口 ---------- */
.page-about .about-next {
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}

.page-about .about-next__lede {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.3;
  color: var(--white);
}

.page-about .next-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-about .rail-link,
  .page-about .about-preview__item,
  .page-about .stage-tab,
  .page-about .honor-card {
    transition: none;
  }
}