.page-about {
  --about-gold-line: rgba(201, 162, 39, .30);
  --about-panel: rgba(20, 50, 41, .58);
  --about-panel-lit: rgba(15, 74, 61, .46);
  --about-axis: rgba(201, 162, 39, .34);
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(201, 162, 39, .15), transparent 64%),
    linear-gradient(180deg, var(--c-emerald) 0%, var(--c-emerald-deep) 54%, #041d18 100%);
  color: var(--c-ink);
  overflow-x: hidden;
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  padding-top: clamp(16px, 3vw, 30px);
}
.page-about .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--c-silver);
}
.page-about .crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--about-gold-line);
}
.page-about .crumbs a {
  color: var(--c-silver);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--c-gold-lit);
  border-bottom-color: var(--c-gold-lit);
}
.page-about .crumbs [aria-current="page"] {
  color: var(--c-gold-lit);
}

/* ---------- 首屏 ---------- */
.page-about .about-intro {
  padding-top: clamp(30px, 6vw, 70px);
}
.page-about .about-intro .eyebrow {
  margin: 0 0 14px;
}
.page-about .about-intro h1 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 6.2vw, 60px);
  line-height: 1.2;
  letter-spacing: .005em;
  color: var(--c-ink);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-about .about-intro h1 {
    background: linear-gradient(102deg, var(--c-ink) 28%, var(--c-gold-lit) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.page-about .about-intro .lede {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.55vw, 18.5px);
  line-height: 1.95;
  color: var(--c-silver);
}
.page-about .about-intro__keys {
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 18px 0 0;
  list-style: none;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-gold);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--c-silver);
}
.page-about .about-intro__keys .mono {
  margin-right: 7px;
  font-size: 19px;
  color: var(--c-gold-lit);
}
@media (min-width: 720px) {
  .page-about .about-intro__keys {
    grid-auto-flow: column;
    justify-content: start;
    gap: clamp(24px, 4vw, 48px);
  }
}

/* ---------- 章节头 ---------- */
.page-about .section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: clamp(26px, 4.4vw, 50px);
}
@media (min-width: 880px) {
  .page-about .section-head {
    grid-template-columns: minmax(112px, 172px) 1fr;
    gap: clamp(26px, 4vw, 58px);
    align-items: start;
  }
}
.page-about .section-head .chapter-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(50px, 9vw, 114px);
  line-height: .84;
  letter-spacing: -.03em;
  color: var(--c-gold);
  opacity: .4;
  padding-left: 16px;
  border-left: 2px solid var(--about-gold-line);
}
.page-about .section-head__body .eyebrow {
  margin: 0;
}
.page-about .section-head__body h2 {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(23px, 3.5vw, 38px);
  line-height: 1.3;
  color: var(--c-ink);
}
.page-about .section-head__body p:not(.eyebrow) {
  margin: 14px 0 0;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.95;
  color: var(--c-silver);
}

/* ---------- 内容区通用 ---------- */
.page-about .band {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--about-gold-line) 18%, rgba(79, 227, 208, .28) 52%, var(--about-gold-line) 82%, transparent);
}

.page-about .figure {
  margin: 0;
}
.page-about .figure__cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(200, 211, 209, .68);
}

/* ---------- 阶段导航 ---------- */
.page-about .yearnav {
  margin-bottom: 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.page-about .yearnav::-webkit-scrollbar {
  display: none;
}
.page-about .yearnav ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  min-width: max-content;
}
.page-about .yearnav a {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--line-hair);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--c-silver);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.page-about .yearnav a:hover,
.page-about .yearnav a:focus-visible {
  border-color: var(--c-gold-lit);
  color: var(--c-gold-lit);
  background: rgba(201, 162, 39, .1);
}

/* ---------- 年份轴 ---------- */
.page-about .yearline {
  position: relative;
  margin: 0 0 clamp(30px, 5vw, 56px);
  padding: 6px 0 0 32px;
  list-style: none;
}
.page-about .yearline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, rgba(201, 162, 39, .62), rgba(201, 162, 39, .1));
}
.page-about .yearline__item {
  position: relative;
  padding-bottom: clamp(26px, 4vw, 46px);
  scroll-margin-top: 120px;
}
.page-about .yearline__item:last-child {
  padding-bottom: 0;
}
.page-about .yearline__item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 9px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c-emerald-deep);
  border: 2px solid var(--c-gold);
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .1);
}
.page-about .yearline__year {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(21px, 3.2vw, 31px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--c-gold);
}
.page-about .yearline__body h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--c-ink);
}
.page-about .yearline__body p {
  margin: 0;
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-silver);
}
@media (min-width: 760px) {
  .page-about .yearline__item {
    display: grid;
    grid-template-columns: clamp(118px, 15vw, 186px) 1fr;
    gap: 0 clamp(20px, 3vw, 42px);
    align-items: start;
  }
  .page-about .yearline__item::before {
    top: 6px;
  }
  .page-about .yearline__year {
    margin: 0;
  }
}

/* ---------- 团队 ---------- */
.page-about .team-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
@media (min-width: 900px) {
  .page-about .team-layout {
    grid-template-columns: 1.04fr .96fr;
  }
}
.page-about .team-layout__text p {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--c-silver);
}
.page-about .team-layout__text p:last-child {
  margin-bottom: 0;
}

.page-about .roster {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 620px) {
  .page-about .roster {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .page-about .roster {
    grid-template-columns: repeat(4, 1fr);
  }
}
.page-about .roster__item {
  position: relative;
  padding: 18px 18px 20px;
  background: var(--about-panel);
  border: 1px solid var(--line-hair);
  border-left: 3px solid var(--c-gold);
  border-radius: 3px;
  box-shadow: var(--shadow-sheet);
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
.page-about .roster__item:hover {
  transform: translateY(-3px);
  border-color: var(--c-gold-lit);
  background: var(--about-panel-lit);
}
.page-about .roster__item h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-gold-lit);
}
.page-about .roster__item p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--c-silver);
}

/* ---------- 流程 ---------- */
.page-about .flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 620px) {
  .page-about .flow {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .page-about .flow {
    grid-template-columns: repeat(5, 1fr);
  }
}
.page-about .flow__step {
  position: relative;
  padding: 20px 17px 18px;
  background: linear-gradient(168deg, var(--about-panel-lit), rgba(6, 42, 36, .72));
  border: 1px solid var(--line-hair);
  border-top: 2px solid var(--about-gold-line);
  border-radius: 3px;
  transition: transform .22s ease, border-top-color .22s ease, box-shadow .22s ease;
}
.page-about .flow__step:hover {
  transform: translateY(-4px);
  border-top-color: var(--c-gold-lit);
  box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .9);
}
.page-about .flow__no {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(201, 162, 39, .58);
}
.page-about .flow__step h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--c-ink);
}
.page-about .flow__step p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--c-silver);
}
.page-about .flow__meta {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-hair);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--c-cyan);
}

/* ---------- 合作方式 ---------- */
.page-about .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.page-about .filter-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: rgba(200, 211, 209, .7);
}
.page-about .filter-chip.is-active,
.page-about .filter-chip[aria-pressed="true"] {
  border-color: var(--c-cyan);
  color: var(--c-cyan);
  background: rgba(79, 227, 208, .1);
}

.page-about .coop-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 860px) {
  .page-about .coop-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page-about .coop {
  display: flex;
  flex-direction: column;
  padding: 24px 21px 22px;
  background: var(--about-panel);
  border: 1px solid var(--line-hair);
  border-radius: 3px;
  box-shadow: var(--shadow-sheet);
  transition: opacity .18s ease, border-color .22s ease, transform .22s ease;
}
.page-about .coop:hover {
  transform: translateY(-3px);
  border-color: var(--about-gold-line);
}
.page-about .coop .label-tag {
  align-self: flex-start;
  margin: 0 0 14px;
}
.page-about .coop h3 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  color: var(--c-ink);
}
.page-about .coop p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-silver);
}
.page-about .coop__who {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(200, 211, 209, .72);
}

/* ---------- 长期规矩 ---------- */
.page-about .tenets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-gold);
}
.page-about .tenets__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: clamp(22px, 3.4vw, 34px) 0;
  border-bottom: 1px solid var(--line-hair);
}
@media (min-width: 820px) {
  .page-about .tenets__item {
    grid-template-columns: minmax(96px, 130px) 1fr;
    gap: clamp(20px, 3.4vw, 50px);
    align-items: start;
  }
}
.page-about .tenets__no {
  font-family: var(--font-mono);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(201, 162, 39, .5);
}
.page-about .tenets__item h3 {
  margin: 0 0 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
  color: var(--c-ink);
}
.page-about .tenets__item p {
  margin: 0;
  max-width: 58ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-silver);
}

/* ---------- 收尾 ---------- */
.page-about .about-next {
  padding-bottom: clamp(60px, 9vw, 110px);
}
.page-about .about-next__inner {
  padding: clamp(30px, 5vw, 54px) clamp(22px, 4vw, 48px);
  background:
    radial-gradient(560px 240px at 88% 0%, rgba(79, 227, 208, .14), transparent 68%),
    linear-gradient(160deg, rgba(20, 50, 41, .82), rgba(6, 42, 36, .92));
  border: 1px solid var(--line-gold);
  border-radius: 4px;
  box-shadow: var(--shadow-sheet);
}
.page-about .about-next__inner .eyebrow {
  margin: 0;
}
.page-about .about-next__inner h2 {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.3;
  color: var(--c-ink);
}
.page-about .about-next__inner p:not(.eyebrow) {
  margin: 16px 0 0;
  max-width: 64ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-silver);
}
.page-about .about-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
}

@media (prefers-reduced-motion: reduce) {
  .page-about .roster__item,
  .page-about .flow__step,
  .page-about .coop {
    transition: none;
  }
}
</main>
<<<END>>>

等等，我在末尾把 `</main>` 写了两遍。让我清理一下——`main_html` 必须以 `</main>` 结尾，后面不能再有内容。我会把它去掉。

另外再把缩略语 `.filter-chip.is-active` 仔细想一下——没问题。

再核对一下：有没有可见的“本页/不提供”之类的措辞？没有。

再检查一遍所有 `var()` 引用都存在：

- `--c-emerald`、`--c-emerald-deep`、`--c-gold`、`--c-gold-lit`、`--c-silver`、`--c-cyan`、`--c-ink`、`--line-gold`、`--line-hair`、`--shadow-sheet`、`--font-head`、`--font-body`、`--font-mono` —— 全都存在 ✓
- 页面作用域内的变量：`--about-gold-line`、`--about-panel`、`--about-panel-lit`、`--about-axis` —— 在 `.page-about` 内定义过了 ✓

我从来没有用过 `--about-axis`，把它删掉。

一个也没漏。

另外 `.about-next__inner` 里用了 `radial-gradient` —— 没问题。

再确认一下：`.page-about .about-intro` 里有 `wrap` 这个类，它本身就管宽度；`.about-intro` 这边只补了 `padding-top`。没问题。

`h1` 上的渐变文字放在 `@supports` 里，也有回退色。

可以了。

再检查一下锚点 id 有没有重复：`stage-2016`、`stage-old`、`stage-2024`、`stage-2025`、`stage-now` —— 每个都正好对应一个 `href`。✓

全部都对得上。把最终版本交出去。
<main id="main-content" class="page-about">

  <nav class="crumbs wrap" aria-label="所在位置">
    <ol>
      <li><a href="/">赛场头版</a></li>
      <li aria-current="page">品牌故事</li>
    </ol>
  </nav>

  <header class="about-intro wrap">
    <p class="eyebrow">品牌故事 · 自 2016 年</p>
    <h1>十年只做一件事：把赛场的来龙去脉，理成你一眼看得懂的速览</h1>
    <p class="lede">中欧赛场是一支做中文赛事内容的团队。你打开一场重点场次，会看到图文速览、数据表和赛后复盘摆在同一页里——对阵怎么排、首发有谁、近期战绩如何，扫一遍就够，不必在好几个来源之间来回比对。</p>
    <ul class="about-intro__keys">
      <li><span class="mono">12</span>个联赛与杯赛的数据栏目</li>
      <li><span class="mono">46</span>人编辑与数据团队</li>
      <li><span class="mono">1.2</span>万篇已发布栏目内容</li>
    </ul>
  </header>

  <section class="section" id="origin" aria-labelledby="origin-title">
    <div class="wrap">
      <div class="section-head">
        <span class="chapter-num mono" data-reveal>01</span>
        <div class="section-head__body" data-reveal style="--reveal-delay:120ms">
          <p class="eyebrow">缘起</p>
          <h2 id="origin-title">信息到处都是，重点只有一个</h2>
          <p>开赛前，赛程、首发、伤停、历史交手散落在不同地方；中文读者还得额外对付译名不统一、时间对不上、数据来源各说各话。看球多年的人能自己拼起来，刚入门的往往还没开始就累了。</p>
          <p>2016 年，中欧赛场中文版在 kok-horizon.com.cn 上线，做的就是把散落的信息收拢进同一页。同一场比赛，你从这里拿到三种形态的内容：赛前的图文速览告诉你该看什么，数据表把赛程、积分和近期战绩摆齐，赛后复盘把走势讲明白。</p>
        </div>
      </div>
      <figure class="figure" data-reveal>
        <div class="figure__frame figure__frame--wide">
          <img src="{zhanqunpic:h:700w:1600}" width="1600" height="700" alt="低角度拍摄的夜间体育场馆外立面与灯光" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__cap">夜里亮着灯的场馆，是我们大部分内容的起点。</figcaption>
      </figure>
    </div>
  </section>

  <div class="band" aria-hidden="true"></div>

  <section class="section" id="timeline" aria-labelledby="timeline-title">
    <div class="wrap">
      <div class="section-head">
        <span class="chapter-num mono" data-reveal>02</span>
        <div class="section-head__body" data-reveal style="--reveal-delay:120ms">
          <p class="eyebrow">发展阶段</p>
          <h2 id="timeline-title">从一条赛程，长到十二个联赛的栏目</h2>
          <p>站点不是一次建成的。每隔一两年，读者的设备在换、看比赛的方式在变，栏目就跟着调一次。下面这几个节点，是改动比较大的几次。</p>
        </div>
      </div>

      <nav class="yearnav" aria-label="按阶段查看">
        <ul>
          <li><a href="#stage-2016">2016</a></li>
          <li><a href="#stage-old">2023 赛季以前</a></li>
          <li><a href="#stage-2024">2024</a></li>
          <li><a href="#stage-2025">2025</a></li>
          <li><a href="#stage-now">如今</a></li>
        </ul>
      </nav>

      <ol class="yearline">
        <li class="yearline__item" id="stage-2016" data-reveal>
          <p class="yearline__year mono">2016</p>
          <div class="yearline__body">
            <h3>中文版上线，先把赛程和积分立稳</h3>
            <p>上线那一年，站点只做最基础的两件事：把每一轮赛程排清楚，把积分榜更新到位。12 个联赛与杯赛的数据栏目，是在这个底子上一个赛季一个赛季长出来的。</p>
          </div>
        </li>
        <li class="yearline__item" id="stage-old" data-reveal style="--reveal-delay:80ms">
          <p class="yearline__year mono">2023 赛季以前</p>
          <div class="yearline__body">
            <h3>旧版栏目定格，五个分类一直留着</h3>
            <p>赛程、积分、赛前速览、赛后复盘、术语词典——这五个栏目构成了旧版资讯的结构。后来页面换过几轮，这套结构仍然保留在站上，习惯老入口的读者不必重新摸索。</p>
          </div>
        </li>
        <li class="yearline__item" id="stage-2024" data-reveal style="--reveal-delay:160ms">
          <p class="yearline__year mono">2024</p>
          <div class="yearline__body">
            <h3>升级版上线，一屏并排摆开三个联赛</h3>
            <p>在这之前，想对照两个联赛的走势得来回切页面。升级后的版本把三个联赛的赛程与积分并列放在同一屏里，左右一眼扫过去，节奏快慢自己判断。</p>
          </div>
        </li>
        <li class="yearline__item" id="stage-2025" data-reveal style="--reveal-delay:240ms">
          <p class="yearline__year mono">2025</p>
          <div class="yearline__body">
            <h3>手机上把速览提到二级页首屏</h3>
            <p>以前在手机上要翻到栏目页靠下的位置才看得到速览条目。改造完成后，进入栏目二级页的第一屏就是速览模块，等电梯的工夫也能扫两条。</p>
          </div>
        </li>
        <li class="yearline__item" id="stage-now" data-reveal style="--reveal-delay:320ms">
          <p class="yearline__year mono">如今</p>
          <div class="yearline__body">
            <h3>赛季内一天三更，间歇期转做回顾</h3>
            <p>赛季内分早间、午间、晚间三个时段更新内容。到了间歇期，节奏换成每周三次发布专题回顾，把上一阶段的走势、阵容变动和数据变化重新梳理一遍。</p>
          </div>
        </li>
      </ol>

      <figure class="figure" data-reveal>
        <div class="figure__frame figure__frame--wide">
          <img src="{zhanqunpic:h:600w:1400}" width="1400" height="600" alt="由年份刻度与色带组成的发展阶段示意图" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__cap">每一次调整，都对应读者看比赛方式的一次变化。</figcaption>
      </figure>
    </div>
  </section>

  <div class="band" aria-hidden="true"></div>

  <section class="section" id="team" aria-labelledby="team-title">
    <div class="wrap">
      <div class="section-head">
        <span class="chapter-num mono" data-reveal>03</span>
        <div class="section-head__body" data-reveal style="--reveal-delay:120ms">
          <p class="eyebrow">团队</p>
          <h2 id="team-title">四类角色，三个城市，一天三次交接</h2>
          <p>46 个人分布在合肥、上海、深圳三地。三地不只是办公地点不同，更解决了一个具体问题：早间、午间、晚间三个更新时段要有人接得上，前一班做完的内容和后一班接手的内容，标准得是一致的。</p>
        </div>
      </div>

      <div class="team-layout">
        <div class="team-layout__text" data-reveal>
          <p>合肥承接大部分赛程与数据维护，上海偏重内容策划与专题，深圳负责移动端体验和视觉产出。每天三班交接时，未完成的场次、待校对的名单、待发布的复盘会逐项过一遍，不让任何一条内容悬在中间。</p>
          <p>这种安排的好处，读者在页面上能直接感受到：无论你在哪个时段进来，看到的译名、格式和栏目结构都是一样的。</p>
        </div>
        <figure class="figure" data-reveal style="--reveal-delay:140ms">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="编辑与数据人员在长桌前核对赛事名单的工作场景" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__cap">每一轮开赛前，名单都要过一遍人工校对。</figcaption>
        </figure>
      </div>

      <ul class="roster">
        <li class="roster__item" data-reveal>
          <h3>编辑</h3>
          <p>负责赛前速览与赛后复盘的成稿，把译名、术语和表述统一到同一套说法上。</p>
        </li>
        <li class="roster__item" data-reveal style="--reveal-delay:80ms">
          <h3>数据</h3>
          <p>维护赛程、积分、近期战绩三类数据表，逐场校对首发名单与相关记录。</p>
        </li>
        <li class="roster__item" data-reveal style="--reveal-delay:160ms">
          <h3>视觉</h3>
          <p>出图、做数据可视化，负责栏目页面的排版与长时间阅读的舒适度。</p>
        </li>
        <li class="roster__item" data-reveal style="--reveal-delay:240ms">
          <h3>支持</h3>
          <p>处理访客的账号问题、收藏同步和旧版栏目的访问路径。</p>
        </li>
      </ul>
    </div>
  </section>

  <div class="band" aria-hidden="true"></div>

  <section class="section" id="process" aria-labelledby="process-title">
    <div class="wrap">
      <div class="section-head">
        <span class="chapter-num mono" data-reveal>04</span>
        <div class="section-head__body" data-reveal style="--reveal-delay:120ms">
          <p class="eyebrow">内容是怎么做出来的</p>
          <h2 id="process-title">一场重点场次，经过五道手</h2>
          <p>从赛程落到页面上，到复盘发布出来，中间有五个固定环节。每个环节都有对应的时间要求，压在什么点完成是明确的。</p>
        </div>
      </div>

      <ol class="flow">
        <li class="flow__step" data-reveal>
          <span class="flow__no mono">01</span>
          <h3>赛程整理</h3>
          <p>把当轮对阵、开球时间与场地落到对应联赛的页面上，确认没有错位。</p>
          <span class="flow__meta">赛前一日完成</span>
        </li>
        <li class="flow__step" data-reveal style="--reveal-delay:70ms">
          <span class="flow__no mono">02</span>
          <h3>名单校对</h3>
          <p>首发与替补名单逐项核对，重点场次做二次复核，避免出现译名或号码误差。</p>
          <span class="flow__meta">赛前 90 分钟完成</span>
        </li>
        <li class="flow__step" data-reveal style="--reveal-delay:140ms">
          <span class="flow__no mono">03</span>
          <h3>速览撰写</h3>
          <p>把该看的几个点缩进一屏，用短句说清楚看点在哪、双方近况如何。</p>
          <span class="flow__meta">开赛前发布</span>
        </li>
        <li class="flow__step" data-reveal style="--reveal-delay:210ms">
          <span class="flow__no mono">04</span>
          <h3>数据表生成</h3>
          <p>赛程、积分、近期战绩三类表格同步更新，与速览页面对应同一场比赛。</p>
          <span class="flow__meta">与速览同步</span>
        </li>
        <li class="flow__step" data-reveal style="--reveal-delay:280ms">
          <span class="flow__no mono">05</span>
          <h3>赛后复盘</h3>
          <p>把比赛走势、关键节点和数据变化整理成复盘初版，随后按需补充细节。</p>
          <span class="flow__meta">赛后 2 小时内初版</span>
        </li>
      </ol>
    </div>
  </section>

  <div class="band" aria-hidden="true"></div>

  <section class="section" id="partners" aria-labelledby="partners-title">
    <div class="wrap">
      <div class="section-head">
        <span class="chapter-num mono" data-reveal>05</span>
        <div class="section-head__body" data-reveal style="--reveal-delay:120ms">
          <p class="eyebrow">合作生态</p>
          <h2 id="partners-title">和 18 家区域媒体、6 家数据服务商一起做内容</h2>
          <p>单靠一支团队，覆盖不了这么多联赛的现场信息和数据校验。我们和区域体育媒体、数据服务商长期配合，把各自擅长的一段接起来。合作方式按你的目标分三档，可以单独选，也可以组合着走。</p>
        </div>
      </div>

      <div class="filter-bar" data-filter-group>
        <button type="button" class="filter-chip" data-filter="all" aria-pressed="true">全部合作方式</button>
        <button type="button" class="filter-chip" data-filter="接入">赛事数据接入</button>
        <button type="button" class="filter-chip" data-filter="共建">栏目内容共建</button>
        <button type="button" class="filter-chip" data-filter="专题">专题联合制作</button>
        <span class="filter-status" data-filter-status role="status"></span>
      </div>

      <ul class="coop-list">
        <li class="coop" data-tag="接入" data-reveal>
          <p class="label-tag label-tag--cyan">赛事数据接入</p>
          <h3>把赛程与积分接进你现有的产品</h3>
          <p>适合已经有内容平台、需要一个稳定数据来源的媒体和技术团队。我们按联赛、按字段提供结构化的赛程与积分，你那边直接对接展示。多数合作从单个联赛、单个赛季试起。</p>
          <p class="coop__who">适合：内容平台、体育类应用、区域媒体</p>
        </li>
        <li class="coop" data-tag="共建" data-reveal style="--reveal-delay:90ms">
          <p class="label-tag">栏目内容共建</p>
          <h3>一起养一个长期更新的栏目</h3>
          <p>适合有本地采访资源、但缺编辑与数据能力的区域体育媒体。双方一起定栏目方向，你出素材和现场信息，我们出编辑、校对和数据整理，内容在双方渠道同步呈现。</p>
          <p class="coop__who">适合：区域体育媒体、地方内容团队</p>
        </li>
        <li class="coop" data-tag="专题" data-reveal style="--reveal-delay:180ms">
          <p class="label-tag label-tag--amber">专题联合制作</p>
          <h3>围绕一个主题做一套深度内容</h3>
          <p>适合想借赛事节点做内容表达的机构。我们负责专题结构、数据可视化和成稿，你提供方向与素材，产出的是一组图文加图表的完整专题。</p>
          <p class="coop__who">适合：品牌方、赛事相关机构、内容策划团队</p>
        </li>
      </ul>
    </div>
  </section>

  <div class="band" aria-hidden="true"></div>

  <section class="section" id="standards" aria-labelledby="standards-title">
    <div class="wrap">
      <div class="section-head">
        <span class="chapter-num mono" data-reveal>06</span>
        <div class="section-head__body" data-reveal style="--reveal-delay:120ms">
          <p class="eyebrow">长期坚持的几件事</p>
          <h2 id="standards-title">内容多起来以后，靠的是几条不动的规矩</h2>
        </div>
      </div>

      <ul class="tenets">
        <li class="tenets__item" data-reveal>
          <span class="tenets__no mono">01</span>
          <div>
            <h3>一份术语对照表，全站共用</h3>
            <p>联赛名称、球队简称、规则词条都按同一份对照表走。术语词典目前收录 620 条词条，新词出现后先由编辑组确认，再统一替换到各处，避免同一支球队在两篇文章里叫两个名字。</p>
          </div>
        </li>
        <li class="tenets__item" data-reveal style="--reveal-delay:90ms">
          <span class="tenets__no mono">02</span>
          <div>
            <h3>旧版栏目不撤，随时翻得回去</h3>
            <p>2023 赛季以前的栏目结构完整保留在站上，五个传统分类的入口位置多年没动过。想按赛季往回查，或者找一篇早年的复盘，路径一直都在。</p>
          </div>
        </li>
        <li class="tenets__item" data-reveal style="--reveal-delay:180ms">
          <span class="tenets__no mono">03</span>
          <div>
            <h3>愿读的长页面，先做视觉降噪</h3>
            <p>旧版资讯页面做过一轮阅读优化：压低背景对比、放大正文字号、加大行距。目标很实际——让人从头到尾读一篇长文，眼睛不酸。</p>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <section class="section section--tight about-next" aria-labelledby="next-title">
    <div class="wrap">
      <div class="about-next__inner" data-reveal>
        <p class="eyebrow">接下来</p>
        <h2 id="next-title">先上手试试，再决定要不要聊得更深</h2>
        <p>想看看栏目体验，就去赛场头版；想试工具，工具中心的联赛切换和收藏可以先玩起来；想按赛季往回翻，赛事专栏里旧版结构一直都在。如果你手上有合作的想法，直接联系我们，写清楚你想做什么，我们把合适的那一档说给你听。</p>
        <div class="about-next__actions">
          <a class="btn btn--gold" href="/">回到赛场头版</a>
          <a class="btn btn--cyan" href="/tools/">打开工具中心</a>
          <a class="btn btn--ghost" href="/column/">浏览赛事专栏</a>
          <a class="btn btn--ghost" href="/contact/">聊聊合作</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-gold-line: rgba(201, 162, 39, .30);
  --about-panel: rgba(20, 50, 41, .58);
  --about-panel-lit: rgba(15, 74, 61, .46);
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(201, 162, 39, .15), transparent 64%),
    linear-gradient(180deg, var(--c-emerald) 0%, var(--c-emerald-deep) 54%, #041d18 100%);
  color: var(--c-ink);
  overflow-x: hidden;
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  padding-top: clamp(16px, 3vw, 30px);
}
.page-about .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--c-silver);
}
.page-about .crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--about-gold-line);
}
.page-about .crumbs a {
  color: var(--c-silver);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--c-gold-lit);
  border-bottom-color: var(--c-gold-lit);
}
.page-about .crumbs [aria-current="page"] {
  color: var(--c-gold-lit);
}

/* ---------- 首屏 ---------- */
.page-about .about-intro {
  padding-top: clamp(30px, 6vw, 70px);
}
.page-about .about-intro .eyebrow {
  margin: 0 0 14px;
}
.page-about .about-intro h1 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 6.2vw, 60px);
  line-height: 1.2;
  letter-spacing: .005em;
  color: var(--c-ink);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-about .about-intro h1 {
    background: linear-gradient(102deg, var(--c-ink) 28%, var(--c-gold-lit) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.page-about .about-intro .lede {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.55vw, 18.5px);
  line-height: 1.95;
  color: var(--c-silver);
}
.page-about .about-intro__keys {
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 18px 0 0;
  list-style: none;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-gold);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--c-silver);
}
.page-about .about-intro__keys .mono {
  margin-right: 7px;
  font-size: 19px;
  color: var(--c-gold-lit);
}
@media (min-width: 720px) {
  .page-about .about-intro__keys {
    grid-auto-flow: column;
    justify-content: start;
    gap: clamp(24px, 4vw, 48px);
  }
}

/* ---------- 章节头 ---------- */
.page-about .section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: clamp(26px, 4.4vw, 50px);
}
@media (min-width: 880px) {
  .page-about .section-head {
    grid-template-columns: minmax(112px, 172px) 1fr;
    gap: clamp(26px, 4vw, 58px);
    align-items: start;
  }
}
.page-about .section-head .chapter-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(50px, 9vw, 114px);
  line-height: .84;
  letter-spacing: -.03em;
  color: var(--c-gold);
  opacity: .4;
  padding-left: 16px;
  border-left: 2px solid var(--about-gold-line);
}
.page-about .section-head__body .eyebrow {
  margin: 0;
}
.page-about .section-head__body h2 {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(23px, 3.5vw, 38px);
  line-height: 1.3;
  color: var(--c-ink);
}
.page-about .section-head__body p:not(.eyebrow) {
  margin: 14px 0 0;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.95;
  color: var(--c-silver);
}

/* ---------- 内容区通用 ---------- */
.page-about .band {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--about-gold-line) 18%, rgba(79, 227, 208, .28) 52%, var(--about-gold-line) 82%, transparent);
}

.page-about .figure {
  margin: 0;
}
.page-about .figure__cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(200, 211, 209, .68);
}

/* ---------- 阶段导航 ---------- */
.page-about .yearnav {
  margin-bottom: 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.page-about .yearnav::-webkit-scrollbar {
  display: none;
}
.page-about .yearnav ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  min-width: max-content;
}
.page-about .yearnav a {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--line-hair);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--c-silver);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.page-about .yearnav a:hover,
.page-about .yearnav a:focus-visible {
  border-color: var(--c-gold-lit);
  color: var(--c-gold-lit);
  background: rgba(201, 162, 39, .1);
}

/* ---------- 年份轴 ---------- */
.page-about .yearline {
  position: relative;
  margin: 0 0 clamp(30px, 5vw, 56px);
  padding: 6px 0 0 32px;
  list-style: none;
}
.page-about .yearline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, rgba(201, 162, 39, .62), rgba(201, 162, 39, .1));
}
.page-about .yearline__item {
  position: relative;
  padding-bottom: clamp(26px, 4vw, 46px);
  scroll-margin-top: 120px;
}
.page-about .yearline__item:last-child {
  padding-bottom: 0;
}
.page-about .yearline__item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 9px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c-emerald-deep);
  border: 2px solid var(--c-gold);
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .1);
}
.page-about .yearline__year {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(21px, 3.2vw, 31px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--c-gold);
}
.page-about .yearline__body h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--c-ink);
}
.page-about .yearline__body p {
  margin: 0;
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-silver);
}
@media (min-width: 760px) {
  .page-about .yearline__item {
    display: grid;
    grid-template-columns: clamp(118px, 15vw, 186px) 1fr;
    gap: 0 clamp(20px, 3vw, 42px);
    align-items: start;
  }
  .page-about .yearline__item::before {
    top: 6px;
  }
  .page-about .yearline__year {
    margin: 0;
  }
}

/* ---------- 团队 ---------- */
.page-about .team-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
@media (min-width: 900px) {
  .page-about .team-layout {
    grid-template-columns: 1.04fr .96fr;
  }
}
.page-about .team-layout__text p {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--c-silver);
}
.page-about .team-layout__text p:last-child {
  margin-bottom: 0;
}

.page-about .roster {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 620px) {
  .page-about .roster {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .page-about .roster {
    grid-template-columns: repeat(4, 1fr);
  }
}
.page-about .roster__item {
  position: relative;
  padding: 18px 18px 20px;
  background: var(--about-panel);
  border: 1px solid var(--line-hair);
  border-left: 3px solid var(--c-gold);
  border-radius: 3px;
  box-shadow: var(--shadow-sheet);
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
.page-about .roster__item:hover {
  transform: translateY(-3px);
  border-color: var(--c-gold-lit);
  background: var(--about-panel-lit);
}
.page-about .roster__item h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-gold-lit);
}
.page-about .roster__item p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--c-silver);
}

/* ---------- 流程 ---------- */
.page-about .flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 620px) {
  .page-about .flow {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .page-about .flow {
    grid-template-columns: repeat(5, 1fr);
  }
}
.page-about .flow__step {
  position: relative;
  padding: 20px 17px 18px;
  background: linear-gradient(168deg, var(--about-panel-lit), rgba(6, 42, 36, .72));
  border: 1px solid var(--line-hair);
  border-top: 2px solid var(--about-gold-line);
  border-radius: 3px;
  transition: transform .22s ease, border-top-color .22s ease, box-shadow .22s ease;
}
.page-about .flow__step:hover {
  transform: translateY(-4px);
  border-top-color: var(--c-gold-lit);
  box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .9);
}
.page-about .flow__no {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(201, 162, 39, .58);
}
.page-about .flow__step h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--c-ink);
}
.page-about .flow__step p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--c-silver);
}
.page-about .flow__meta {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-hair);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--c-cyan);
}

/* ---------- 合作方式 ---------- */
.page-about .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.page-about .filter-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: rgba(200, 211, 209, .7);
}
.page-about .filter-chip.is-active,
.page-about .filter-chip[aria-pressed="true"] {
  border-color: var(--c-cyan);
  color: var(--c-cyan);
  background: rgba(79, 227, 208, .1);
}

.page-about .coop-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 860px) {
  .page-about .coop-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page-about .coop {
  display: flex;
  flex-direction: column;
  padding: 24px 21px 22px;
  background: var(--about-panel);
  border: 1px solid var(--line-hair);
  border-radius: 3px;
  box-shadow: var(--shadow-sheet);
  transition: opacity .18s ease, border-color .22s ease, transform .22s ease;
}
.page-about .coop:hover {
  transform: translateY(-3px);
  border-color: var(--about-gold-line);
}
.page-about .coop .label-tag {
  align-self: flex-start;
  margin: 0 0 14px;
}
.page-about .coop h3 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  color: var(--c-ink);
}
.page-about .coop p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-silver);
}
.page-about .coop__who {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(200, 211, 209, .72);
}

/* ---------- 长期规矩 ---------- */
.page-about .tenets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-gold);
}
.page-about .tenets__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: clamp(22px, 3.4vw, 34px) 0;
  border-bottom: 1px solid var(--line-hair);
}
@media (min-width: 820px) {
  .page-about .tenets__item {
    grid-template-columns: minmax(96px, 130px) 1fr;
    gap: clamp(20px, 3.4vw, 50px);
    align-items: start;
  }
}
.page-about .tenets__no {
  font-family: var(--font-mono);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(201, 162, 39, .5);
}
.page-about .tenets__item h3 {
  margin: 0 0 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
  color: var(--c-ink);
}
.page-about .tenets__item p {
  margin: 0;
  max-width: 58ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-silver);
}

/* ---------- 收尾 ---------- */
.page-about .about-next {
  padding-bottom: clamp(60px, 9vw, 110px);
}
.page-about .about-next__inner {
  padding: clamp(30px, 5vw, 54px) clamp(22px, 4vw, 48px);
  background:
    radial-gradient(560px 240px at 88% 0%, rgba(79, 227, 208, .14), transparent 68%),
    linear-gradient(160deg, rgba(20, 50, 41, .82), rgba(6, 42, 36, .92));
  border: 1px solid var(--line-gold);
  border-radius: 4px;
  box-shadow: var(--shadow-sheet);
}
.page-about .about-next__inner .eyebrow {
  margin: 0;
}
.page-about .about-next__inner h2 {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.3;
  color: var(--c-ink);
}
.page-about .about-next__inner p:not(.eyebrow) {
  margin: 16px 0 0;
  max-width: 64ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-silver);
}
.page-about .about-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
}

@media (prefers-reduced-motion: reduce) {
  .page-about .roster__item,
  .page-about .flow__step,
  .page-about .coop {
    transition: none;
  }
}