.page-about {
  --about-rail-top: calc(var(--space-8) + var(--space-4));
  --about-dot: 8px;
}

.page-about .about-head {
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

.page-about .about-head__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-4xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  max-width: 16ch;
}

.page-about .about-head__title::after {
  content: "";
  display: block;
  width: 88px;
  height: var(--border-thick);
  margin-top: var(--space-3);
  background: var(--color-primary);
}

.page-about .about-head__lede {
  margin: var(--space-3) 0 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

/* 布局：窄栏索引 + 正文 */
.page-about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--section-y);
}

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

.page-about .about-rail__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
  text-transform: uppercase;
}

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

.page-about .about-toc li {
  border-top: 1px dashed var(--color-line);
}

.page-about .about-toc a {
  position: relative;
  display: block;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about .about-toc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: var(--border-thick);
  background: var(--color-line);
  transform: translateY(-50%);
  transition: width 140ms cubic-bezier(0.2, 0.7, 0.3, 1), background 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about .about-toc a:hover {
  color: var(--color-accent);
}

.page-about .about-toc a:hover::before {
  width: 18px;
  background: var(--color-accent);
}

.page-about .about-toc a[aria-current="true"] {
  color: var(--color-accent);
}

.page-about .about-toc a[aria-current="true"]::before {
  width: 22px;
  background: var(--color-accent);
}

.page-about .about-rail__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-muted);
  max-width: 24ch;
}

/* 正文 */
.page-about .about-body {
  min-width: 0;
}

.page-about .about-section {
  display: flow-root;
  padding-top: var(--space-4);
}

.page-about .about-section h2 {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-2);
  border-left: var(--border-thick) solid var(--color-primary);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  max-width: 24ch;
}

.page-about .about-section h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-about .about-body p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  max-width: var(--measure);
}

.page-about .about-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

.page-about .about-body a:hover {
  color: var(--color-focus);
}

.page-about .about-body a:focus-visible,
.page-about .about-toc a:focus-visible,
.page-about .about-exit:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
}

.page-about .about-dropcap::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 3.1em;
  line-height: 0.86;
  padding: 0.06em 0.12em 0 0;
  color: var(--color-primary);
}

.page-about .about-pull {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-highlight);
  border-left: var(--border-thick) solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  max-width: var(--measure);
  transition: background 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about .about-pull:hover {
  background: color-mix(in srgb, var(--color-highlight) 78%, var(--color-accent));
}

/* 虚线分隔：左端主色短杠 */
.page-about .about-rule {
  position: relative;
  height: 0;
  margin-top: var(--space-6);
  border-top: 1px dashed var(--color-line);
}

.page-about .about-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--border-thick));
  width: 56px;
  height: var(--border-thick);
  background: var(--color-primary);
}

/* 图片 */
.page-about .about-figure {
  margin: var(--space-3) 0;
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

.page-about .about-figure figcaption {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-muted);
}

.page-about .about-figure--wide figcaption,
.page-about .about-figure--square figcaption {
  padding-top: var(--space-1);
  border-top: 1px dashed var(--color-line);
}

/* 赛季台阶 */
.page-about .about-timeline {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0 0 0 var(--space-3);
  border-left: var(--border-thick) solid var(--color-primary-soft);
}

.page-about .about-timeline__item {
  position: relative;
  padding-bottom: var(--space-3);
}

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

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-3) - 6px);
  top: 6px;
  width: var(--about-dot);
  height: var(--about-dot);
  border-radius: 50%;
  background: var(--color-surface);
  border: var(--border-thick) solid var(--color-primary);
}

.page-about .about-timeline__item p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-about .about-timeline__stage {
  display: inline-block;
  margin-bottom: var(--space-1);
  padding: 2px var(--space-1);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink);
  transform: rotate(-1.5deg);
}

/* 团队分组 */
.page-about .about-teams {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.page-about .about-teams li {
  padding: var(--space-2) var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

.page-about .about-teams li:nth-child(2) {
  background: var(--color-surface);
}

.page-about .about-teams__num {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.page-about .about-teams li p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* 关键数字 */
.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3) 0;
  border-top: 1px dashed var(--color-line);
  border-bottom: 1px dashed var(--color-line);
}

.page-about .about-stats__item {
  min-width: 0;
  padding-left: var(--space-2);
  border-left: var(--border-thin) solid var(--color-line);
}

.page-about .about-stats__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--weight-heading);
  font-size: var(--text-figure);
  line-height: 1;
  color: var(--color-accent);
  overflow-wrap: anywhere;
}

.page-about .about-stats__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

/* 出口 */
.page-about .about-exits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.page-about .about-exit {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-left: var(--border-thick) solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about .about-exit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.page-about .about-exit__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.page-about .about-exit__t {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

/* 视口进入 */
.page-about [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms cubic-bezier(0.2, 0.7, 0.3, 1), transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal] {
    transform: none;
    transition: opacity 320ms linear;
  }
  .page-about .about-exit:hover {
    transform: none;
  }
}

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

@media (min-width: 760px) {
  .page-about .about-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .about-head__title {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 900px) {
  .page-about .about-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--gutter);
  }

  .page-about .about-rail__inner {
    position: sticky;
    top: var(--about-rail-top);
  }

  .page-about .about-figure--narrow {
    float: right;
    width: 36%;
    margin: var(--space-1) 0 var(--space-3) var(--space-3);
  }

  .page-about .about-figure--wide {
    width: calc(100% + var(--space-3));
    margin-left: calc(-1 * var(--space-3));
  }

  .page-about .about-figure--square {
    width: 76%;
  }

  .page-about .about-section h2 {
    padding-left: var(--space-3);
  }
}
<<<END>>>

等等——我加了个 `<<<END>>>`，但标记里根本没有这个。必须删掉。我重新输出一遍，去掉它。

不过再读一遍规则：“严格按照以下标记顺序输出，每个标记只能出现一次”——只标了 `` 和 ``。所以我不能加 `<<<END>>>`。

我再仔细输出一遍，去掉 `<<<END>>>`。

还有一点：“看台高位视角 · 场地几何与数据线叠合”——这里用的是 `·` 间隔号，没问题。

再查一下 `about-head__title::after` 用了 `--space-3` 这些，没问题。

另外 `.about-figure--narrow` 在 900px 以上用了 `float`——`.about-section` 有 `flow-root`，所以能包裹住。

还要注意 `.page-about .about-section h2` 里的 `max-width: 24ch` 可能会把中文标题压得太窄。24ch 在衬线字体 28px 下大约就是 24 个中文字符宽？其实 `ch` 量的是“0”字符的宽度，对中文字体来说可能偏窄，标题会被压得换行太频繁。还是改成 `max-width: 20em` 或者干脆去掉。我改成一个宽松些的 `max-width`，比如 `22em` 吧。

还有 `.about-stats__num` 的 `overflow-wrap: anywhere` 可能会把数字从中间断开，看起来不好。不过考虑到 `32,000+` 在 28px 的字号下大约占 7 个等宽字符宽度，大概 110px。在 360px 的屏幕上，容器宽度是 360-32=328，两列的话每列 164px，减去 padding 和 gap 大概 130px，还是能放下。但如果是 `+` 被断行的话，也会很难看。嗯，算了，保留也行，影响不大。

另外我还是要再确认一下 rail 里的 `about-toc` 链接元素——JS 只会设置 `aria-current="true"`，我的 CSS 能正确响应。

现在把输出定稿吧。

还有个小问题：`content_form` 是 `narrative`，所以整体是叙事性的，没问题。

还有一点——`h1` 里不能包含品牌名？这个没有强制要求。好了。

定稿吧。
<main id="main-content" class="page-about">
  <div class="wrap">
    <nav class="breadcrumbs" aria-label="页面位置">
      <a href="/">首页</a>
      <span aria-hidden="true">/</span>
      <span aria-current="page">品牌故事</span>
    </nav>
  </div>

  <header class="wrap about-head" data-reveal="1">
    <p class="eyebrow">品牌故事</p>
    <h1 class="about-head__title">把一场比赛的读数，搬进一块竖屏</h1>
    <p class="about-head__lede">亚博体育手机中国官方网站亚洲区做的是亚洲区赛事的数据与战术阅读。最早只有一项赛事、一轮比赛的射门读数，如今覆盖 6 项赛事体系与 48 支球队。这一页讲的是这件事怎么开始、靠什么把口径定住、谁在做，以及现在走到了哪一步。</p>
  </header>

  <div class="wrap about-layout">
    <aside class="about-rail" aria-label="本页小节">
      <div class="about-rail__inner">
        <p class="about-rail__label">本页小节</p>
        <ol class="about-toc">
          <li><a data-chapter-link href="#origin">起点</a></li>
          <li><a data-chapter-link href="#method">口径</a></li>
          <li><a data-chapter-link href="#seasons">台阶</a></li>
          <li><a data-chapter-link href="#team">分工</a></li>
          <li><a data-chapter-link href="#now">现状</a></li>
          <li><a data-chapter-link href="#region">服务与出口</a></li>
        </ol>
        <p class="about-rail__note">阅读大约 6 分钟。每一节都可以单独看。</p>
      </div>
    </aside>

    <div class="about-body">
      <article>

        <section class="about-section" id="origin" data-section="起点" data-reveal="1">
          <h2>起点：时段太散，手机上的读数也太散</h2>
          <figure class="about-figure about-figure--narrow">
            <img src="{zhanqunpic:h:1080w:720}" width="720" height="1080" alt="夜间球场看台俯视视角，场地几何上叠加半透明数据线与坐标刻度" loading="lazy" decoding="async">
            <figcaption>看台高位视角 · 场地几何与数据线叠合</figcaption>
          </figure>
          <p class="about-dropcap">亚洲区比赛的时段本来就是散的。同一轮里，有的场次开在傍晚，有的拖到深夜，跨时区的读者很难连着看完。比时段更麻烦的是读数：射门次数在一处，角球数在另一处，半场比分又得往回翻。看完一场球要开好几个页面，最后拼起来的数字还未必对得上。</p>
          <p>所以我们决定只切一项进去——射门统计。理由很直接：射门是大部分讨论的落点，也最容易被随口引用、又最容易被引错。先把这一项做到经得起翻查，其他读数才有稳定的参照点。每场比赛记录 12 类射门参数，围绕射门位置、射门方式、射门结果、门将应对四组展开，读者从任意一组进去，落到的都是同一场比赛的同一处读数。</p>
          <p>这条选择也决定了后面的样子：不做横向铺开的大而全，而是把一项读数做深，再沿着赛季时间轴往外接角球数与半场比分。想看这些读数怎么组织，可以直接进<a href="/system/">数据系统</a>。</p>
        </section>

        <div class="about-rule" aria-hidden="true"></div>

        <section class="about-section" id="method" data-section="口径" data-reveal="2">
          <h2>口径是一轮一轮定下来的，不是讨论出来的</h2>
          <p>每一轮比赛结束，射门事件按赛事规程逐场核定。主客场入球与失球走同一条线：同一轮次内口径完全一致，核定时间与依据随数据一起留着，谁在什么时候、根据哪条规程做了判断，都能回头看。这不是为了给页面加注释，而是为了下一轮再有人问同一件事时，答案不用重新吵一遍。</p>
          <p class="about-pull">口径对得上，比数字大不大更要紧。</p>
          <figure class="about-figure about-figure--wide">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="球门网格与球场白线局部特写，网格交叉点带编号标注" loading="lazy" decoding="async" data-zoomable>
            <figcaption>球门网格交叉点 · 射门位置与结果的落点参照</figcaption>
          </figure>
          <p>核定也不是一个人说了算。每场比赛由两人独立核定后再比对，差异超过 1 项就进复核队列，由当班负责人判断哪一边更贴近规程。球衣号码同理，以各队报名名单为准，赛季内出现变更就同步更新，不让旧号码继续留在页面上。新来的核定员要先通过 40 场比对考核才能独立上岗，这条线守的是同一件事：数字可以被质疑，但质疑要有落点。</p>
          <p>这套做法怎么落到每一场比赛上、从开赛到上线要经过几道手，<a href="/workflow/">核定流程</a>里逐段写了。</p>
        </section>

        <div class="about-rule" aria-hidden="true"></div>

        <section class="about-section" id="seasons" data-section="台阶" data-reveal="3">
          <h2>八个赛季里的几个台阶</h2>
          <p>发展这件事按赛季阶段看比按日期看更清楚，因为节奏本来就跟赛事走。</p>
          <ol class="about-timeline">
            <li class="about-timeline__item">
              <span class="about-timeline__stage">起步</span>
              <h3>先在一项赛事里把流程跑通</h3>
              <p>从一个赛事体系的单轮射门核定开始，把双人比对和复核队列跑顺，确认这套做法能在比赛日结束后的窗口里完成。规模小，但每一步都要留痕。</p>
            </li>
            <li class="about-timeline__item">
              <span class="about-timeline__stage">扩展</span>
              <h3>覆盖范围铺到六项赛事体系</h3>
              <p>流程稳定之后，跟踪范围扩到亚洲区 6 项主要赛事体系与 48 支球队，角球数与半场比分一并进入赛季时间轴，不同轮次之间开始能直接横向比对。</p>
            </li>
            <li class="about-timeline__item">
              <span class="about-timeline__stage">读法</span>
              <h3>移动端阅读版本按赛季重做</h3>
              <p>手机竖屏从 360px 宽度起做设计，看板与地图优先照顾单手滑动，图表配上文字替代。阅读版本每个赛季迭代一次，当前是第 9 个赛季版本。</p>
            </li>
            <li class="about-timeline__item">
              <span class="about-timeline__stage">到场</span>
              <h3>主场地图与季票信息进入同一屏</h3>
              <p>6 座亚洲区主场球场的看台分区、入口与视角参考，连同 5 类季票档位对应的看台区域与入场通道，被放到与比赛读数相邻的位置，看完数据就能接着看座位。</p>
            </li>
            <li class="about-timeline__item">
              <span class="about-timeline__stage">当前</span>
              <h3>同步到 2024 赛季常规赛第 28 轮</h3>
              <p>主客场进失球口径、角球与半场比分的同步点都停在常规赛第 28 轮，累计核定射门事件超过 32,000 次，比赛日结束后 2 小时内完成当轮核定并上线。</p>
            </li>
          </ol>
        </section>

        <div class="about-rule" aria-hidden="true"></div>

        <section class="about-section" id="team" data-section="分工" data-reveal="1">
          <h2>四组人，一条线</h2>
          <p>核定、规则、地图、体验四组合计 40 人。分工不是按工序切段，而是按问题类型切——数据对不上找核定，规则说不清找规则，到现场不确定看哪找地图，手机上滑不动找体验。</p>
          <ul class="about-teams">
            <li>
              <span class="about-teams__num">24 人</span>
              <h3>核定组</h3>
              <p>分 3 个班次覆盖亚洲区比赛时段，比赛日结束后 2 小时内完成当轮核定。每场两人独立核定，差异超过 1 项进复核队列。</p>
            </li>
            <li>
              <span class="about-teams__num">章程线</span>
              <h3>规则组</h3>
              <p>把赛事规程翻成能执行的口径条目，处理复核队列里剩下的分歧，并维护<a href="/system/">数据系统</a>中的进失球分布规则说明。</p>
            </li>
            <li>
              <span class="about-teams__num">6 座球场</span>
              <h3>地图组</h3>
              <p>维护看台分区、入口与视角参考，把 5 类季票档位和入场通道的对应关系跟着赛季更新，座位图和比赛读数保持同一版。</p>
            </li>
            <li>
              <span class="about-teams__num">360px 起</span>
              <h3>体验组</h3>
              <p>负责手机竖屏的看板排布、图表文字替代与焦点环，保证窄屏不横向溢出，长段落读起来不费劲。</p>
            </li>
          </ul>
        </section>

        <div class="about-rule" aria-hidden="true"></div>

        <section class="about-section" id="now" data-section="现状" data-reveal="2">
          <h2>现在做到的这一步</h2>
          <p>不看宣传口径，只看能核对的几个量。</p>
          <div class="about-stats">
            <div class="about-stats__item">
              <span class="about-stats__num mono">8</span>
              <span class="about-stats__label">个完整赛季连续运营</span>
            </div>
            <div class="about-stats__item">
              <span class="about-stats__num mono">6</span>
              <span class="about-stats__label">项主要赛事体系</span>
            </div>
            <div class="about-stats__item">
              <span class="about-stats__num mono">48</span>
              <span class="about-stats__label">支长期跟踪球队</span>
            </div>
            <div class="about-stats__item">
              <span class="about-stats__num mono">32,000+</span>
              <span class="about-stats__label">次射门事件已核定</span>
            </div>
            <div class="about-stats__item">
              <span class="about-stats__num mono">6</span>
              <span class="about-stats__label">座主场球场标注了看台分区</span>
            </div>
            <div class="about-stats__item">
              <span class="about-stats__num mono">5</span>
              <span class="about-stats__label">类季票档位对应入场通道</span>
            </div>
          </div>
          <figure class="about-figure about-figure--square">
            <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="球场看台座椅排布俯拍，用不同色块区分看台区域并叠加虚线标注" loading="lazy" decoding="async" data-zoomable>
            <figcaption>看台分区俯拍 · 色块对应季票档位覆盖范围</figcaption>
          </figure>
          <p>这些量不是一次定下来的。2024 赛季常规赛第 28 轮这个同步点之前，每推进一轮都要重新对一遍覆盖范围和口径版本；球迷看到的是一个数字，背后是当班核定员在比赛日夜里逐场比对的结果。</p>
        </section>

        <div class="about-rule" aria-hidden="true"></div>

        <section class="about-section" id="region" data-section="服务与出口" data-reveal="3">
          <h2>吉林地区团队负责哪一段</h2>
          <p>吉林地区服务团队承担中文内容支持与咨询受理。射门统计口径、进失球分布规则，以及主场看台与季票方面的问题，都可以发到客服邮箱 <a href="mailto:email@yabo-sports-mobile.com.cn">email@yabo-sports-mobile.com.cn</a>，工作日 9:00-18:00 会有人回。提问时带上轮次和具体比赛，回复会快很多，也更容易一次说清。</p>
          <p>如果你是长期读者，按轮次追更比事后回头翻更省事——<a href="/selection/">赛季精选</a>每周围绕轮次看点更新 3 到 5 条，把当轮值得注意的读数和战术解读放在一起。</p>

          <div class="about-exits">
            <a class="about-exit" href="/workflow/">
              <span class="about-exit__k">核定流程</span>
              <span class="about-exit__t">看一轮数据从开赛到上线的每一道手</span>
            </a>
            <a class="about-exit" href="/system/">
              <span class="about-exit__k">数据系统</span>
              <span class="about-exit__t">弄清主客场进失球的判定依据与读法</span>
            </a>
            <a class="about-exit" href="/contact/">
              <span class="about-exit__k">联系我们</span>
              <span class="about-exit__t">查主场地图与季票档位，或直接问口径</span>
            </a>
            <a class="about-exit" href="/selection/">
              <span class="about-exit__k">赛季精选</span>
              <span class="about-exit__t">按轮次读当轮射门统计与战术看点</span>
            </a>
          </div>
        </section>

      </article>
    </div>
  </div>
</main>

.page-about {
  --about-rail-top: calc(var(--space-8) + var(--space-4));
  --about-dot: 8px;
}

.page-about .about-head {
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

.page-about .about-head__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  max-width: 16ch;
}

.page-about .about-head__title::after {
  content: "";
  display: block;
  width: 88px;
  height: var(--border-thick);
  margin-top: var(--space-3);
  background: var(--color-primary);
}

.page-about .about-head__lede {
  margin: var(--space-3) 0 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

/* 布局：窄栏索引 + 正文 */
.page-about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--section-y);
}

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

.page-about .about-rail__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

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

.page-about .about-toc li {
  border-top: 1px dashed var(--color-line);
}

.page-about .about-toc a {
  position: relative;
  display: block;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about .about-toc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: var(--border-thick);
  background: var(--color-line);
  transform: translateY(-50%);
  transition: width 140ms cubic-bezier(0.2, 0.7, 0.3, 1), background 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about .about-toc a:hover {
  color: var(--color-accent);
}

.page-about .about-toc a:hover::before {
  width: 18px;
  background: var(--color-accent);
}

.page-about .about-toc a[aria-current="true"] {
  color: var(--color-accent);
}

.page-about .about-toc a[aria-current="true"]::before {
  width: 22px;
  background: var(--color-accent);
}

.page-about .about-rail__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-muted);
  max-width: 24ch;
}

/* 正文 */
.page-about .about-body {
  min-width: 0;
}

.page-about .about-section {
  display: flow-root;
  padding-top: var(--space-4);
}

.page-about .about-section h2 {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-2);
  border-left: var(--border-thick) solid var(--color-primary);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  max-width: 22em;
}

.page-about .about-section h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-about .about-body p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  max-width: var(--measure);
}

.page-about .about-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

.page-about .about-body a:hover {
  color: var(--color-focus);
}

.page-about .about-body a:focus-visible,
.page-about .about-toc a:focus-visible,
.page-about .about-exit:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
}

.page-about .about-dropcap::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 3.1em;
  line-height: 0.86;
  padding: 0.06em 0.12em 0 0;
  color: var(--color-primary);
}

.page-about .about-pull {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-highlight);
  border-left: var(--border-thick) solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  max-width: var(--measure);
  transition: background 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about .about-pull:hover {
  background: color-mix(in srgb, var(--color-highlight) 78%, var(--color-accent));
}

/* 虚线分隔：左端主色短杠 */
.page-about .about-rule {
  position: relative;
  height: 0;
  margin-top: var(--space-6);
  border-top: 1px dashed var(--color-line);
}

.page-about .about-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--border-thick));
  width: 56px;
  height: var(--border-thick);
  background: var(--color-primary);
}

/* 图片 */
.page-about .about-figure {
  margin: var(--space-3) 0;
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

.page-about .about-figure figcaption {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-muted);
}

.page-about .about-figure--wide figcaption,
.page-about .about-figure--square figcaption {
  padding-top: var(--space-1);
  border-top: 1px dashed var(--color-line);
}

/* 赛季台阶 */
.page-about .about-timeline {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0 0 0 var(--space-3);
  border-left: var(--border-thick) solid var(--color-primary-soft);
}

.page-about .about-timeline__item {
  position: relative;
  padding-bottom: var(--space-3);
}

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

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-3) - 6px);
  top: 6px;
  width: var(--about-dot);
  height: var(--about-dot);
  border-radius: 50%;
  background: var(--color-surface);
  border: var(--border-thick) solid var(--color-primary);
}

.page-about .about-timeline__item p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

.page-about .about-timeline__stage {
  display: inline-block;
  margin-bottom: var(--space-1);
  padding: 2px var(--space-1);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink);
  transform: rotate(-1.5deg);
}

/* 团队分组 */
.page-about .about-teams {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.page-about .about-teams li {
  padding: var(--space-2) var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

.page-about .about-teams li:nth-child(2) {
  background: var(--color-surface);
}

.page-about .about-teams__num {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.page-about .about-teams li p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* 关键数字 */
.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3) 0;
  border-top: 1px dashed var(--color-line);
  border-bottom: 1px dashed var(--color-line);
}

.page-about .about-stats__item {
  min-width: 0;
  padding-left: var(--space-2);
  border-left: var(--border-thin) solid var(--color-line);
}

.page-about .about-stats__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--weight-heading);
  font-size: var(--text-figure);
  line-height: 1;
  color: var(--color-accent);
}

.page-about .about-stats__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

/* 出口 */
.page-about .about-exits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.page-about .about-exit {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-left: var(--border-thick) solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about .about-exit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.page-about .about-exit__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.page-about .about-exit__t {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

/* 视口进入 */
.page-about [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms cubic-bezier(0.2, 0.7, 0.3, 1), transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.page-about [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal] {
    transform: none;
    transition: opacity 320ms linear;
  }
  .page-about .about-exit:hover {
    transform: none;
  }
}

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

@media (min-width: 760px) {
  .page-about .about-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .about-head__title {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 900px) {
  .page-about .about-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--gutter);
  }

  .page-about .about-rail__inner {
    position: sticky;
    top: var(--about-rail-top);
  }

  .page-about .about-figure--narrow {
    float: right;
    width: 36%;
    margin: var(--space-1) 0 var(--space-3) var(--space-3);
  }

  .page-about .about-figure--wide {
    width: calc(100% + var(--space-3));
    margin-left: calc(-1 * var(--space-3));
  }

  .page-about .about-figure--square {
    width: 76%;
  }

  .page-about .about-section h2 {
    padding-left: var(--space-3);
  }
}