.page-about {
  --ab-track: 92px;
  --ab-hair: rgba(108, 135, 151, 0.32);
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: calc(var(--bar-h) + 44px) 0 48px;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(228, 137, 44, 0.13), transparent 62%),
    radial-gradient(80% 60% at 0% 100%, rgba(78, 140, 134, 0.12), transparent 70%),
    var(--ink);
  border-bottom: 2px solid var(--edge);
}

.page-about .about-hero__inner {
  position: relative;
  display: grid;
  gap: 34px;
}

.page-about .about-hero__inner::before,
.page-about .about-hero__inner::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--amber);
  pointer-events: none;
}

.page-about .about-hero__inner::before {
  top: -14px;
  left: -6px;
  border-right: 0;
  border-bottom: 0;
}

.page-about .about-hero__inner::after {
  bottom: -14px;
  right: -6px;
  border-left: 0;
  border-top: 0;
}

.page-about .about-hero__text .eyebrow {
  color: var(--amber);
  margin: 0 0 14px;
}

.page-about .about-hero__text h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--paper);
}

.page-about .about-hero__text .lede {
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist);
  margin: 0 0 26px;
  max-width: 34em;
}

.page-about .about-hero__stats {
  list-style: none;
  margin: 0 0 28px;
  padding: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  border-top: 1px solid var(--ab-hair);
}

.page-about .about-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-about .about-hero__stats strong {
  font-family: var(--ff-mono);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--amber);
  line-height: 1;
}

.page-about .about-hero__stats span {
  font-family: var(--ff-label);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
}

.page-about .about-hero__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

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

/* ---------- 面包屑 ---------- */
.page-about .breadcrumb {
  padding: 20px 0 0;
  font-family: var(--ff-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--steel);
}

.page-about .breadcrumb a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-about .breadcrumb a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

.page-about .breadcrumb .breadcrumb__sep {
  margin: 0 8px;
  color: var(--steel);
}

/* ---------- 档案主体 ---------- */
.page-about .about-body {
  padding-top: 8px;
  padding-bottom: 72px;
}

.page-about .archive-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 38px 0 34px;
  border-bottom: 1px dashed var(--ab-hair);
}

.page-about .archive-row__track {
  position: relative;
  padding-top: 6px;
}

.page-about .archive-row__track::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 3px;
  height: 20px;
  background: var(--ember);
}

.page-about .archive-row__index {
  display: block;
  padding-left: 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ember);
  line-height: 1.4;
}

.page-about .archive-row__tag {
  display: block;
  padding-left: 12px;
  margin-top: 6px;
  font-family: var(--ff-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--steel);
  text-transform: uppercase;
}

.page-about .archive-row__body h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--paper);
}

.page-about .archive-row__body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist);
  margin: 0 0 1.15em;
  max-width: 40em;
}

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

.page-about .archive-row__body a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 137, 44, 0.55);
}

.page-about .archive-row__body a:hover {
  border-bottom-color: var(--amber);
}

.page-about .has-dropcap .archive-row__body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--ff-display);
  font-size: 3.1em;
  line-height: 0.86;
  padding: 8px 10px 0 0;
  color: var(--amber);
}

/* ---------- 奶油纸事实条 ---------- */
.page-about .fact-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  margin: 22px 0;
  padding: 22px 20px 24px;
  background: var(--cream);
  color: var(--brown);
  border: 2px solid var(--edge);
  box-shadow: 6px 6px 0 var(--edge);
}

.page-about .fact-band__k {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ember);
}

.page-about .fact-band__t {
  margin: 0;
  flex: 1 1 14em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--brown);
}

/* ---------- 团队错落卡片 ---------- */
.page-about .teams {
  display: grid;
  gap: 18px;
  margin: 28px 0 30px;
}

.page-about .team-card {
  background: var(--ink-2);
  border: 2px solid var(--edge);
  box-shadow: 6px 6px 0 var(--edge);
  padding: 22px 20px 24px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.page-about .team-card:hover,
.page-about .team-card:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--edge);
  border-color: var(--amber);
}

.page-about .team-card__n {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--jade);
}

.page-about .team-card__t {
  margin: 0 0 10px;
  font-family: var(--ff-label);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}

.page-about .team-card__d {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  opacity: 0.82;
  transition: opacity 200ms ease;
}

.page-about .team-card:hover .team-card__d,
.page-about .team-card:focus-within .team-card__d {
  opacity: 1;
}

.page-about .about-media {
  margin: 6px 0 0;
}

/* ---------- 时间线 ---------- */
.page-about .milestones {
  list-style: none;
  margin: 26px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--ab-hair);
}

.page-about .milestones__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 0 0 26px 14px;
}

.page-about .milestones__item:last-child {
  padding-bottom: 0;
}

.page-about .milestones__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -10px;
  width: 9px;
  height: 9px;
  background: var(--amber);
  border: 2px solid var(--ink);
}

.page-about .milestones__item--now::before {
  background: var(--ember);
}

.page-about .milestones__year {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--amber);
  line-height: 1.3;
}

.page-about .milestones__item--now .milestones__year {
  color: var(--ember);
}

.page-about .milestones__body h3 {
  margin: 0 0 6px;
  font-family: var(--ff-label);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
}

.page-about .milestones__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 40em;
}

/* ---------- 覆盖范围条带 ---------- */
.page-about .coverage {
  margin: 28px 0 30px;
  padding: 26px 18px 22px;
  background: var(--ink-2);
  border: 2px solid var(--edge);
  box-shadow: 6px 6px 0 var(--edge);
}

.page-about .coverage__nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.page-about .coverage__node {
  position: relative;
  padding-top: 16px;
  border-top: 3px solid var(--steel);
  transition: border-color 200ms ease;
}

.page-about .coverage__node::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  width: 13px;
  height: 13px;
  background: var(--amber);
  border: 2px solid var(--edge);
}

.page-about .coverage__node:hover {
  border-top-color: var(--amber);
}

.page-about .coverage__city {
  display: block;
  font-family: var(--ff-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--paper);
}

.page-about .coverage__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
}

.page-about .coverage__note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ab-hair);
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

/* ---------- 结尾行动 ---------- */
.page-about .about-cta {
  margin: 40px 0 0;
  padding: 26px 20px 28px;
  background: var(--ink-2);
  border: 2px solid var(--edge);
  border-left: 6px solid var(--amber);
  box-shadow: 6px 6px 0 var(--edge);
}

.page-about .about-cta__label {
  margin: 0 0 10px;
  font-family: var(--ff-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}

.page-about .about-cta__text {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 40em;
}

.page-about .about-cta__links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 720px) {
  .page-about .about-hero {
    padding: calc(var(--bar-h) + 60px) 0 64px;
  }

  .page-about .about-hero__text h1 {
    font-size: 40px;
  }

  .page-about .about-hero__text .lede {
    font-size: 17px;
  }

  .page-about .archive-row {
    grid-template-columns: var(--ab-track) minmax(0, 1fr);
    gap: 30px;
    padding: 50px 0 46px;
  }

  .page-about .archive-row__body h2 {
    font-size: 28px;
  }

  .page-about .archive-row__index {
    font-size: 15px;
  }

  .page-about .fact-band {
    padding: 26px 28px 28px;
    margin: 28px 0;
  }

  .page-about .fact-band__k {
    font-size: 34px;
  }

  .page-about .teams {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
  }

  .page-about .teams > .team-card:nth-child(2) {
    margin-top: 38px;
  }

  .page-about .teams > .team-card:nth-child(3) {
    margin-top: 76px;
  }

  .page-about .milestones__item {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
  }

  .page-about .coverage {
    padding: 30px 28px 26px;
  }

  .page-about .coverage__city {
    font-size: 17px;
  }

  .page-about .about-cta {
    padding: 30px 28px 32px;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1024px) {
  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 56px;
    align-items: end;
  }

  .page-about .about-hero__text h1 {
    font-size: 64px;
    line-height: 1.12;
  }

  .page-about .about-hero__stats strong {
    font-size: 24px;
  }

  .page-about .archive-row {
    padding: 62px 0 56px;
  }

  .page-about .about-cta {
    margin-top: 56px;
  }
}

/* ---------- 降低动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .team-card,
  .page-about .team-card__d,
  .page-about .coverage__node {
    transition: none;
  }

  .page-about .team-card:hover,
  .page-about .team-card:focus-within {
    transform: none;
    box-shadow: 6px 6px 0 var(--edge);
  }
}
<<<END>>>

等等，我不小心在最后加了 `<<<END>>>` 标记，但本来不应该有这个。让我检查一下——标记要求只有 `` 和 `` 各自出现一次。`<<<END>>>` 不是有效标记。需要去掉。

另外还发现两处问题：第一个 `<figure class="media about-media" loading="lazy">` 在 figure 上多了 `loading="lazy"` 属性，应该去掉；第二个同样问题的 figure 也要去掉 `loading="lazy"`。

还有 `.page-about .about-hero__media` 的图片没有加 lazy，首屏主图保留不 lazy 是对的。

CSS 里 `.page-about .about-media` 没有设置 margin 的 bottom 其实还好。但 `.about-media` 在 figure 上，`.media` 有默认 margin 吗？没有，全局 `.media` 定义的是 16:10 比例和粗边阴影。这里没重复定义。

不过我发现 team 段落里 `figure` 加了 `loading="lazy"` 属性，这个属性对 figure 没有意义，应该删掉。

还有 `id="milestones"` 被用在了 `<section>` 上，同时内部的 `<ol class="milestones">` 没有 id。这没问题，锚点指向 section 本身。

让我把这两处修正一下，然后重新输出完整内容。
<main id="main-content" class="page-about">

  <section class="about-hero">
    <div class="wrap about-hero__inner">
      <div class="about-hero__text">
        <p class="eyebrow">品牌自述 · 自 2016 年</p>
        <h1 id="about-title">九年，把看球这件事做安静</h1>
        <p class="lede">从一张能查清楚的赛程表开始，博奥体育把赛程栏、球队库和底部约球入口连成三条走得通的路径。我们希望你在深夜或通勤路上打开站点，几秒钟就知道今晚该看哪一场。</p>
        <ul class="about-hero__stats">
          <li><strong class="num">2016</strong><span>年上线</span></li>
          <li><strong class="num">42</strong><span>个联赛</span></li>
          <li><strong class="num">1,860</strong><span>支球队</span></li>
        </ul>
        <p class="about-hero__actions">
          <a class="btn btn--amber" href="/products/">看观赛产品怎么用</a>
          <a class="btn btn--quiet" href="#milestones">看发展节点</a>
        </p>
      </div>
      <figure class="media about-hero__media">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面上摊开的手写赛程表与一支笔，纸面带折痕，光线偏暖">
        <figcaption class="media__caption">赛程从纸面搬到屏幕，排列方式一直没怎么变</figcaption>
      </figure>
    </div>
  </section>

  <div class="wrap">
    <nav class="breadcrumb" aria-label="当前位置">
      <a href="/">首页</a>
      <span class="breadcrumb__sep">/</span>
      <span aria-current="page">品牌自述</span>
    </nav>
  </div>

  <div class="wrap about-body">

    <section class="archive-row has-dropcap" id="origin" aria-labelledby="origin-title" data-reveal>
      <div class="archive-row__track">
        <span class="archive-row__index num">01</span>
        <span class="archive-row__tag">起点</span>
      </div>
      <div class="archive-row__body">
        <h2 id="origin-title">从一张赛程表开始</h2>
        <p>2016 年博奥体育刚上线的时候，站内只有一张赛程表。原因很直接：那时候查一场比赛要在好几个页面之间来回点，弹窗一层压着一层，看完开赛时间回头还得再找一遍。</p>
        <p>第一版做的事情很窄——把日期、联赛和开赛时间排进一张能检索的表里，翻到就有答案。最早的一批用户大多是在深夜把第二天的比赛提前看好，关灯前扫一眼，第二天到点再看。</p>
        <p>这个习惯一直留到现在。赛程数据每 60 秒刷新一次，你打开页面看到的顺序，基本就是当天最新的排布。</p>
      </div>
    </section>

    <aside class="fact-band" data-reveal>
      <p class="fact-band__k num">2016</p>
      <p class="fact-band__t">站点上线。最初只有一张可检索的赛程表，第一批用户从“查清明天的比赛”开始把它用起来。</p>
    </aside>

    <section class="archive-row has-dropcap" id="voice" aria-labelledby="voice-title" data-reveal>
      <div class="archive-row__track">
        <span class="archive-row__index num">02</span>
        <span class="archive-row__tag">主张</span>
      </div>
      <div class="archive-row__body">
        <h2 id="voice-title">“安静”是怎么成为主张的</h2>
        <p>用久了会看得比较清楚：热闹在场内，不在看球的路上。多数人打开站点的时候是在地铁上、午休的十几分钟里，或者关灯之后躺在床上的那一小段时间。屏幕亮度刺眼、页面元素抢眼，都会让这件事变得难受。</p>
        <p>2023 年我们把这层意思写成了品牌主张——看体育的人，都懂这份安静。落到界面上就是几件很具体的事：深色底压住夜间亮度，关键操作只留一个琥珀橙，赛程时间统一用等宽字排齐，页面上不做抢比赛风头的东西。</p>
        <p>它不是一个口号，更像一条取舍标准。每当要做加法的时候，我们先问一句：这个东西会让看球的人分心吗。</p>
      </div>
    </section>

    <aside class="fact-band" data-reveal>
      <p class="fact-band__k num">2023</p>
      <p class="fact-band__t">“看体育的人，都懂这份安静”确立为全站主张，视觉与文案基调随之重新调整。</p>
    </aside>

    <section class="archive-row" id="teams" aria-labelledby="teams-title" data-reveal>
      <div class="archive-row__track">
        <span class="archive-row__index num">03</span>
        <span class="archive-row__tag">团队</span>
      </div>
      <div class="archive-row__body">
        <h2 id="teams-title">产品、内容与运营，三组人分工</h2>
        <p>站点的日常由三组人撑着，加起来 39 人。分组方式不是按职级，而是按“东西从哪来、由谁改、出了问题找谁”划的。</p>

        <div class="teams">
          <article class="team-card">
            <p class="team-card__n num">18</p>
            <h3 class="team-card__t">产品与前端</h3>
            <p class="team-card__d">负责页面结构、筛选逻辑、直播首帧速度和移动端适配。你在赛程栏里能点的每一个地方，都从这一组过一遍。</p>
          </article>
          <article class="team-card">
            <p class="team-card__n num">9</p>
            <h3 class="team-card__t">内容编辑</h3>
            <p class="team-card__d">品牌专栏每周更新 3 篇，分赛程观察、球队档案、产品更新与本地看球四个栏目。赛前需要补充的信息，也由这一组整理后放上去。</p>
          </article>
          <article class="team-card">
            <p class="team-card__n num">12</p>
            <h3 class="team-card__t">数据与运营</h3>
            <p class="team-card__d">球队库和赛程的日常更新由这一组直接对接，字母索引、联赛归类与订阅提醒的推送时序都归他们盯。</p>
          </article>
        </div>

        <figure class="media about-media">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜里亮着屏幕的工位，几个人影在看赛程排布，均不露正脸" loading="lazy" decoding="async">
          <figcaption class="media__caption">数据组按赛季节奏整理赛程排布，通常从傍晚忙到开赛前</figcaption>
        </figure>
      </div>
    </section>

    <section class="archive-row" id="milestones" aria-labelledby="milestones-title" data-reveal>
      <div class="archive-row__track">
        <span class="archive-row__index num">04</span>
        <span class="archive-row__tag">版本</span>
      </div>
      <div class="archive-row__body">
        <h2 id="milestones-title">每一版都把入口往前挪一点</h2>
        <p>九年里做大版本更新的时候不算多，但每一版的取向都一样：让常用入口离你更近一步，其余位置能不动就不动。</p>

        <ol class="milestones">
          <li class="milestones__item">
            <p class="milestones__year num">2016</p>
            <div class="milestones__body">
              <h3>站点上线</h3>
              <p>一张可检索的赛程表，解决“查一场比赛要在好几个页面之间翻”的老问题。</p>
            </div>
          </li>
          <li class="milestones__item">
            <p class="milestones__year num">2018</p>
            <div class="milestones__body">
              <h3>球队库上线</h3>
              <p>把球队按字母和联赛归到一起，订阅提醒第一次有了落脚点。</p>
            </div>
          </li>
          <li class="milestones__item">
            <p class="milestones__year num">2020</p>
            <div class="milestones__body">
              <h3>移动端改版</h3>
              <p>底部约球入口上线，手机上从首页一步就能进直播页。</p>
            </div>
          </li>
          <li class="milestones__item">
            <p class="milestones__year num">2022</p>
            <div class="milestones__body">
              <h3>移动端成为主场景</h3>
              <p>移动端访问占比过 78%，地铁和睡前成了最主要的使用时段，桌面端与移动端开始共用同一套入口。</p>
            </div>
          </li>
          <li class="milestones__item">
            <p class="milestones__year num">2024</p>
            <div class="milestones__body">
              <h3>球队库改成两级结构</h3>
              <p>字母索引加联赛归类，找一支球队从三步缩到两步。目前库里收录 1,860 支球队、42 个联赛。</p>
            </div>
          </li>
          <li class="milestones__item milestones__item--now">
            <p class="milestones__year num">本季</p>
            <div class="milestones__body">
              <h3>首页导航前移</h3>
              <p>赛程栏、球队库与约球入口在移动端首屏就能点到，其余位置按原样保留。</p>
            </div>
          </li>
        </ol>
      </div>
    </section>

    <section class="archive-row" id="coverage" aria-labelledby="coverage-title" data-reveal>
      <div class="archive-row__track">
        <span class="archive-row__index num">05</span>
        <span class="archive-row__tag">覆盖</span>
      </div>
      <div class="archive-row__body">
        <h2 id="coverage-title">服务覆盖 31 个省级行政区</h2>
        <p>站点目前服务 31 个省级行政区，注册用户 186 万，日活跃约 21 万。吉林本地用户占注册用户的 14%，这个比例让我们在秋冬赛季会额外留意东北主场的安排。</p>
        <p>直播相关的接入节点放在长春、沈阳与北京三地，移动网络下直播首帧加载平均 1.2 秒。三地节点靠近主要使用区域，东北用户晚高峰的加载表现会稳一些。</p>

        <div class="coverage">
          <ul class="coverage__nodes">
            <li class="coverage__node">
              <span class="coverage__city">长春</span>
              <span class="coverage__meta">主接入节点</span>
            </li>
            <li class="coverage__node">
              <span class="coverage__city">沈阳</span>
              <span class="coverage__meta">东北接入节点</span>
            </li>
            <li class="coverage__node">
              <span class="coverage__city">北京</span>
              <span class="coverage__meta">华北接入节点</span>
            </li>
          </ul>
          <p class="coverage__note">秋冬赛季的东北主场提示会附带天气与出行建议，覆盖吉林、辽宁、黑龙江主场。</p>
        </div>

        <figure class="media about-media">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="冬季傍晚的北方体育馆外立面与积雪路面，场馆灯带刚开启" loading="lazy" decoding="async">
          <figcaption class="media__caption">入冬之后的东北主场，开赛时间与路面情况都要提前看一眼</figcaption>
        </figure>
      </div>
    </section>

    <section class="archive-row" id="path" aria-labelledby="path-title" data-reveal>
      <div class="archive-row__track">
        <span class="archive-row__index num">06</span>
        <span class="archive-row__tag">路径</span>
      </div>
      <div class="archive-row__body">
        <h2 id="path-title">老用户的路径，我们不动</h2>
        <p>boao体育老用户在意的一件事很简单：打开站点，赛程栏还在原来那个位置。手感比新鲜感重要，这一点我们比谁都清楚。</p>
        <p>于是每次改版只做加法——把入口往前挪，不做重排。2020 年移动端改版是这样，本季首页导航前移也是这样。赛程栏和球队库的位置，从 2016 年到现在都没换过。</p>
        <p>如果你刚用没多久，从球队库挑一支队、点开订阅提醒，就够开始了。想知道每一步具体怎么操作，<a href="/products/">观赛产品页</a>里有完整说明；想看我们平时在写什么，<a href="/column/">品牌专栏</a>每周都有更新。</p>
      </div>
    </section>

    <aside class="about-cta" data-reveal>
      <p class="about-cta__label">下一步</p>
      <p class="about-cta__text">想谈联赛数据、内容共建或本地活动，写一封邮件说明来意即可，我们按工作日节奏回复。</p>
      <p class="about-cta__links">
        <a class="btn btn--amber" href="/cooperation/">去合作与联系</a>
        <a class="btn btn--line" href="/">回首页看赛程栏</a>
      </p>
    </aside>

  </div>
</main>

.page-about {
  --ab-track: 92px;
  --ab-hair: rgba(108, 135, 151, 0.32);
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: calc(var(--bar-h) + 44px) 0 48px;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(228, 137, 44, 0.13), transparent 62%),
    radial-gradient(80% 60% at 0% 100%, rgba(78, 140, 134, 0.12), transparent 70%),
    var(--ink);
  border-bottom: 2px solid var(--edge);
}

.page-about .about-hero__inner {
  position: relative;
  display: grid;
  gap: 34px;
}

.page-about .about-hero__inner::before,
.page-about .about-hero__inner::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--amber);
  pointer-events: none;
}

.page-about .about-hero__inner::before {
  top: -14px;
  left: -6px;
  border-right: 0;
  border-bottom: 0;
}

.page-about .about-hero__inner::after {
  bottom: -14px;
  right: -6px;
  border-left: 0;
  border-top: 0;
}

.page-about .about-hero__text .eyebrow {
  color: var(--amber);
  margin: 0 0 14px;
}

.page-about .about-hero__text h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--paper);
}

.page-about .about-hero__text .lede {
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist);
  margin: 0 0 26px;
  max-width: 34em;
}

.page-about .about-hero__stats {
  list-style: none;
  margin: 0 0 28px;
  padding: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  border-top: 1px solid var(--ab-hair);
}

.page-about .about-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-about .about-hero__stats strong {
  font-family: var(--ff-mono);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--amber);
  line-height: 1;
}

.page-about .about-hero__stats span {
  font-family: var(--ff-label);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
}

.page-about .about-hero__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

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

/* ---------- 面包屑 ---------- */
.page-about .breadcrumb {
  padding: 20px 0 0;
  font-family: var(--ff-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--steel);
}

.page-about .breadcrumb a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-about .breadcrumb a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

.page-about .breadcrumb .breadcrumb__sep {
  margin: 0 8px;
  color: var(--steel);
}

/* ---------- 档案主体 ---------- */
.page-about .about-body {
  padding-top: 8px;
  padding-bottom: 72px;
}

.page-about .archive-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 38px 0 34px;
  border-bottom: 1px dashed var(--ab-hair);
}

.page-about .archive-row__track {
  position: relative;
  padding-top: 6px;
}

.page-about .archive-row__track::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 3px;
  height: 20px;
  background: var(--ember);
}

.page-about .archive-row__index {
  display: block;
  padding-left: 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ember);
  line-height: 1.4;
}

.page-about .archive-row__tag {
  display: block;
  padding-left: 12px;
  margin-top: 6px;
  font-family: var(--ff-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--steel);
  text-transform: uppercase;
}

.page-about .archive-row__body h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--paper);
}

.page-about .archive-row__body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist);
  margin: 0 0 1.15em;
  max-width: 40em;
}

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

.page-about .archive-row__body a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 137, 44, 0.55);
}

.page-about .archive-row__body a:hover {
  border-bottom-color: var(--amber);
}

.page-about .has-dropcap .archive-row__body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--ff-display);
  font-size: 3.1em;
  line-height: 0.86;
  padding: 8px 10px 0 0;
  color: var(--amber);
}

/* ---------- 奶油纸事实条 ---------- */
.page-about .fact-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  margin: 22px 0;
  padding: 22px 20px 24px;
  background: var(--cream);
  color: var(--brown);
  border: 2px solid var(--edge);
  box-shadow: 6px 6px 0 var(--edge);
}

.page-about .fact-band__k {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ember);
}

.page-about .fact-band__t {
  margin: 0;
  flex: 1 1 14em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--brown);
}

/* ---------- 团队错落卡片 ---------- */
.page-about .teams {
  display: grid;
  gap: 18px;
  margin: 28px 0 30px;
}

.page-about .team-card {
  background: var(--ink-2);
  border: 2px solid var(--edge);
  box-shadow: 6px 6px 0 var(--edge);
  padding: 22px 20px 24px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.page-about .team-card:hover,
.page-about .team-card:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--edge);
  border-color: var(--amber);
}

.page-about .team-card__n {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--jade);
}

.page-about .team-card__t {
  margin: 0 0 10px;
  font-family: var(--ff-label);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}

.page-about .team-card__d {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  opacity: 0.82;
  transition: opacity 200ms ease;
}

.page-about .team-card:hover .team-card__d,
.page-about .team-card:focus-within .team-card__d {
  opacity: 1;
}

.page-about .about-media {
  margin: 6px 0 0;
}

/* ---------- 时间线 ---------- */
.page-about .milestones {
  list-style: none;
  margin: 26px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--ab-hair);
}

.page-about .milestones__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 0 0 26px 14px;
}

.page-about .milestones__item:last-child {
  padding-bottom: 0;
}

.page-about .milestones__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -10px;
  width: 9px;
  height: 9px;
  background: var(--amber);
  border: 2px solid var(--ink);
}

.page-about .milestones__item--now::before {
  background: var(--ember);
}

.page-about .milestones__year {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--amber);
  line-height: 1.3;
}

.page-about .milestones__item--now .milestones__year {
  color: var(--ember);
}

.page-about .milestones__body h3 {
  margin: 0 0 6px;
  font-family: var(--ff-label);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
}

.page-about .milestones__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 40em;
}

/* ---------- 覆盖范围条带 ---------- */
.page-about .coverage {
  margin: 28px 0 30px;
  padding: 26px 18px 22px;
  background: var(--ink-2);
  border: 2px solid var(--edge);
  box-shadow: 6px 6px 0 var(--edge);
}

.page-about .coverage__nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.page-about .coverage__node {
  position: relative;
  padding-top: 16px;
  border-top: 3px solid var(--steel);
  transition: border-color 200ms ease;
}

.page-about .coverage__node::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  width: 13px;
  height: 13px;
  background: var(--amber);
  border: 2px solid var(--edge);
}

.page-about .coverage__node:hover {
  border-top-color: var(--amber);
}

.page-about .coverage__city {
  display: block;
  font-family: var(--ff-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--paper);
}

.page-about .coverage__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
}

.page-about .coverage__note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ab-hair);
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

/* ---------- 结尾行动 ---------- */
.page-about .about-cta {
  margin: 40px 0 0;
  padding: 26px 20px 28px;
  background: var(--ink-2);
  border: 2px solid var(--edge);
  border-left: 6px solid var(--amber);
  box-shadow: 6px 6px 0 var(--edge);
}

.page-about .about-cta__label {
  margin: 0 0 10px;
  font-family: var(--ff-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}

.page-about .about-cta__text {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 40em;
}

.page-about .about-cta__links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 720px) {
  .page-about .about-hero {
    padding: calc(var(--bar-h) + 60px) 0 64px;
  }

  .page-about .about-hero__text h1 {
    font-size: 40px;
  }

  .page-about .about-hero__text .lede {
    font-size: 17px;
  }

  .page-about .archive-row {
    grid-template-columns: var(--ab-track) minmax(0, 1fr);
    gap: 30px;
    padding: 50px 0 46px;
  }

  .page-about .archive-row__body h2 {
    font-size: 28px;
  }

  .page-about .archive-row__index {
    font-size: 15px;
  }

  .page-about .fact-band {
    padding: 26px 28px 28px;
    margin: 28px 0;
  }

  .page-about .fact-band__k {
    font-size: 34px;
  }

  .page-about .teams {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
  }

  .page-about .teams > .team-card:nth-child(2) {
    margin-top: 38px;
  }

  .page-about .teams > .team-card:nth-child(3) {
    margin-top: 76px;
  }

  .page-about .milestones__item {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
  }

  .page-about .coverage {
    padding: 30px 28px 26px;
  }

  .page-about .coverage__city {
    font-size: 17px;
  }

  .page-about .about-cta {
    padding: 30px 28px 32px;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1024px) {
  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 56px;
    align-items: end;
  }

  .page-about .about-hero__text h1 {
    font-size: 64px;
    line-height: 1.12;
  }

  .page-about .about-hero__stats strong {
    font-size: 24px;
  }

  .page-about .archive-row {
    padding: 62px 0 56px;
  }

  .page-about .about-cta {
    margin-top: 56px;
  }
}

/* ---------- 降低动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .team-card,
  .page-about .team-card__d,
  .page-about .coverage__node {
    transition: none;
  }

  .page-about .team-card:hover,
  .page-about .team-card:focus-within {
    transform: none;
    box-shadow: 6px 6px 0 var(--edge);
  }
}