.page-about {
  --ab-cut: 16px;
  --ab-num-size: clamp(56px, 10.5vw, 104px);
  background: var(--carbon-black);
  color: var(--paper-white);
  font-family: var(--font-sans);
  overflow-wrap: break-word;
}

.page-about .ab-hero {
  position: relative;
  padding: clamp(26px, 4.5vw, 52px) 0 clamp(46px, 7vw, 84px);
  background-color: var(--carbon-black);
  background-image:
    repeating-linear-gradient(0deg, rgba(140, 147, 159, 0.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(140, 147, 159, 0.07) 0 1px, transparent 1px 44px),
    linear-gradient(160deg, rgba(255, 107, 26, 0.09) 0%, rgba(20, 22, 26, 0) 46%);
  border-bottom: 1px solid var(--hairline);
}

.page-about .ab-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(24px, 4vw, 40px);
}

.page-about .ab-hero__title {
  margin: 16px 0 0;
  font-size: clamp(29px, 5.2vw, 50px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 15em;
  color: var(--paper-white);
}

.page-about .ab-hero__lede {
  margin: 18px 0 0;
  max-width: 42em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--cool-gray-200);
}

.page-about .ab-hero__panel {
  position: relative;
  padding: 22px 22px 26px;
  background: var(--pitch-900);
  clip-path: polygon(var(--ab-cut) 0, 100% 0, 100% calc(100% - var(--ab-cut)), calc(100% - var(--ab-cut)) 100%, 0 100%, 0 var(--ab-cut));
}

.page-about .ab-hero__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ab-cut);
  right: 0;
  height: 3px;
  background: var(--signal-orange);
}

.page-about .ab-panel__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--cool-gray-400);
  text-transform: uppercase;
}

.page-about .ab-panel__version {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(38px, 6vw, 54px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--signal-orange);
}

.page-about .ab-panel__stats {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--hairline-strong);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-about .ab-panel__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--paper-white);
}

.page-about .ab-panel__cap {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cool-gray-400);
}

.page-about .ab-longread {
  padding: clamp(38px, 6vw, 72px) 0 clamp(54px, 8vw, 96px);
  background: var(--carbon-black);
}

.page-about .ab-longread__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 44px);
}

.page-about .ab-toc {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 14px;
}

.page-about .ab-toc__title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cool-gray-400);
  text-transform: uppercase;
}

.page-about .ab-toc__list {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-about .ab-toc__list > li {
  flex: 0 0 auto;
}

.page-about .ab-toc__link {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cool-gray-400);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-about .ab-toc__link:hover,
.page-about .ab-toc__link:focus-visible {
  color: var(--paper-white);
  border-color: var(--signal-orange);
}

.page-about .ab-toc__link[aria-current="true"] {
  color: var(--signal-orange);
  border-color: var(--signal-orange);
  font-weight: 700;
}

.page-about .ab-chapter {
  padding: clamp(30px, 4.4vw, 48px) 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 96px;
}

.page-about .ab-chapter:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-about .ab-chapter__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--ab-num-size);
  font-weight: 600;
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: rgba(255, 107, 26, 0.14);
  -webkit-text-stroke: 2px var(--signal-orange);
}

.page-about .ab-chapter__title {
  margin: 12px 0 0;
  font-size: clamp(22px, 3.1vw, 32px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--paper-white);
}

.page-about .ab-chapter__lede {
  margin: 12px 0 0;
  max-width: 680px;
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-chapter__body {
  max-width: 680px;
  margin-top: 20px;
}

.page-about .ab-chapter__body > p {
  margin: 0 0 16px;
  font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.85;
  color: var(--cool-gray-200);
}

.page-about .ab-chapter__body > p:last-child {
  margin-bottom: 0;
}

.page-about .ab-figure {
  margin: 22px 0 26px;
}

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

.page-about .ab-picks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}

.page-about .ab-pick {
  position: relative;
  padding: 20px 18px 22px;
  background: var(--pitch-900);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.page-about .ab-pick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 2px;
  background: var(--signal-orange);
}

.page-about .ab-pick:hover {
  transform: translateY(-4px);
  background: var(--pitch-800);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
}

.page-about .ab-pick__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--cool-gray-400);
  text-transform: uppercase;
}

.page-about .ab-pick__title {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--paper-white);
}

.page-about .ab-pick__text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--cool-gray-400);
}

.page-about .ab-ribbon {
  margin: clamp(30px, 4.4vw, 46px) 0;
  padding: 20px clamp(18px, 3vw, 26px);
  border-left: 4px solid var(--lake-teal);
  background: linear-gradient(90deg, rgba(31, 169, 160, 0.24) 0%, rgba(31, 169, 160, 0.05) 100%);
}

.page-about .ab-ribbon__en {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lake-teal);
}

.page-about .ab-ribbon__text {
  margin: 8px 0 0;
  font-size: clamp(16px, 2.1vw, 21px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--paper-white);
}

.page-about .ab-roles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-about .ab-role {
  padding: 16px 18px 18px;
  background: var(--pitch-900);
  border-left: 3px solid var(--dusk-purple);
}

.page-about .ab-role__tag {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper-white);
}

.page-about .ab-role__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-timeline {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--hairline-strong);
}

.page-about .ab-timeline__item {
  position: relative;
  padding: 0 0 26px 0;
}

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

.page-about .ab-timeline__item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 5px;
  width: 11px;
  height: 11px;
  background: var(--signal-orange);
  transform: rotate(45deg);
}

.page-about .ab-timeline__time {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lake-teal);
}

.page-about .ab-timeline__title {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--paper-white);
}

.page-about .ab-timeline__desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-board {
  position: relative;
  margin-top: 6px;
  overflow: hidden;
  background: var(--pitch-900);
  clip-path: polygon(0 0, calc(100% - var(--ab-cut)) 0, 100% var(--ab-cut), 100% 100%, var(--ab-cut) 100%, 0 calc(100% - var(--ab-cut)));
}

.page-about .ab-board__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.page-about .ab-board__inner {
  position: relative;
  padding: clamp(20px, 3.4vw, 34px);
}

.page-about .ab-board__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.page-about .ab-board__cell {
  padding: 14px 12px 14px 14px;
  background: rgba(20, 22, 26, 0.62);
  border-left: 2px solid var(--signal-orange);
}

.page-about .ab-board__cell--teal {
  border-left-color: var(--lake-teal);
}

.page-about .ab-board__cell--purple {
  border-left-color: var(--dusk-purple);
}

.page-about .ab-board__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--signal-orange);
}

.page-about .ab-board__cell--teal .ab-board__num {
  color: var(--lake-teal);
}

.page-about .ab-board__cell--purple .ab-board__num {
  color: var(--paper-white);
}

.page-about .ab-board__num span {
  font-size: 0.44em;
  font-weight: 600;
  margin-left: 4px;
  letter-spacing: 0;
}

.page-about .ab-board__cap {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cool-gray-200);
}

.page-about .ab-board__note {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-strong);
  font-size: 12px;
  line-height: 1.6;
  color: var(--cool-gray-400);
  font-family: var(--font-mono);
}

.page-about .ab-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.page-about .ab-plan {
  padding: 18px 18px 20px;
  background: var(--pitch-900);
  border-top: 3px solid var(--lake-teal);
}

.page-about .ab-plan:nth-child(2) {
  border-top-color: var(--dusk-purple);
}

.page-about .ab-plan__title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--paper-white);
}

.page-about .ab-plan__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-next {
  padding: clamp(40px, 6vw, 72px) 0;
  background: var(--pitch-900);
  border-top: 2px solid var(--signal-orange);
}

.page-about .ab-next__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-about .ab-next__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-orange);
}

.page-about .ab-next__title {
  margin: 10px 0 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--paper-white);
}

.page-about .ab-next__text {
  margin: 10px 0 0;
  max-width: 34em;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 560px) {
  .page-about .ab-panel__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .page-about .ab-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .ab-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .page-about .ab-board__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .ab-next__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

@media (min-width: 940px) {
  .page-about .ab-hero__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
  }

  .page-about .ab-longread__inner {
    grid-template-columns: 176px minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
  }

  .page-about .ab-toc {
    position: sticky;
    top: 88px;
    align-self: start;
    border-top: 0;
    border-left: 2px solid var(--hairline-strong);
    padding: 0 0 0 16px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .page-about .ab-toc__list {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .ab-toc__list > li + li {
    margin-top: 2px;
  }

  .page-about .ab-toc__link {
    border: 0;
    border-radius: 0;
    padding: 6px 0 6px 12px;
    white-space: normal;
    position: relative;
  }

  .page-about .ab-toc__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 1px;
    background: var(--hairline-strong);
    transform: translateY(-50%);
  }

  .page-about .ab-toc__link[aria-current="true"]::before {
    width: 10px;
    height: 2px;
    background: var(--signal-orange);
  }

  .page-about .ab-chapter__num {
    margin-left: -22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-pick,
  .page-about .ab-toc__link {
    transition: none;
  }

  .page-about .ab-pick:hover {
    transform: none;
  }
}


<main id="main-content" class="page-about">

  <section class="ab-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="页面路径">
        <a href="/">首页</a>
        <span class="breadcrumbs__sep" aria-hidden="true">/</span>
        <span aria-current="page">焕新主张</span>
      </nav>

      <div class="ab-hero__grid">
        <div class="ab-hero__lead">
          <p class="tag tag--orange">
            <span class="tag__en">RATIONALE</span>
            <span class="tag__cn">焕新主张</span>
          </p>
          <h1 class="ab-hero__title">火狐体育新版：把加载、数据与复盘一起重做了一遍</h1>
          <p class="ab-hero__lede">
            你打开火狐体育，多半只想在十几秒里搞清楚这一轮谁上、谁赢、排名怎么挪。这次整站重做就围着这个场景来：首屏加载中位数压到 1.2 秒，联赛排名从任意页面两步可达，每一轮复盘都能顺着编号翻回当时的阵容与赛果。
          </p>
        </div>

        <aside class="ab-hero__panel" aria-label="当前版本概览">
          <p class="ab-panel__label"><span>VERSION</span><span>当前版本</span></p>
          <p class="ab-panel__version">3.2</p>
          <ul class="ab-panel__stats">
            <li class="ab-panel__stat">
              <span class="ab-panel__num">1.2s</span>
              <span class="ab-panel__cap">首屏加载中位数</span>
            </li>
            <li class="ab-panel__stat">
              <span class="ab-panel__num">40%</span>
              <span class="ab-panel__cap">加载耗时较上一版的降幅</span>
            </li>
            <li class="ab-panel__stat">
              <span class="ab-panel__num">114 轮</span>
              <span class="ab-panel__cap">已经归档的复盘轮次</span>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </section>

  <div class="ab-longread">
    <div class="container ab-longread__inner">

      <nav class="ab-toc" data-toc aria-label="章节导航">
        <p class="ab-toc__title">CHAPTERS / 章节</p>
        <ul class="ab-toc__list">
          <li><a class="ab-toc__link" href="#chapter-1">01 旧版卡在哪一步</a></li>
          <li><a class="ab-toc__link" href="#chapter-2">02 三条取舍</a></li>
          <li><a class="ab-toc__link" href="#chapter-3">03 三条工作线</a></li>
          <li><a class="ab-toc__link" href="#chapter-4">04 一轮的流转</a></li>
          <li><a class="ab-toc__link" href="#chapter-5">05 看得见的数字</a></li>
          <li><a class="ab-toc__link" href="#chapter-6">06 后面还要补的</a></li>
        </ul>
      </nav>

      <div class="ab-flow">

        <section class="ab-chapter" id="chapter-1" data-reveal aria-labelledby="c1-title">
          <header class="ab-chapter__head">
            <span class="ab-chapter__num" aria-hidden="true">01</span>
            <h2 class="ab-chapter__title" id="c1-title">旧版的麻烦不在内容，在路径</h2>
          </header>
          <div class="ab-chapter__body">
            <p>
              上一版是按栏目切开的：资讯一栏、数据一栏，阵容则藏在赛事页的第三层。在手机上查一场球的首发，得先回首页、再挑联赛、再点开单场，翻到的时候，场上可能已经换过人了。
            </p>
            <p>
              所以我们没有在旧骨架上打补丁，而是把页面结构整个重排了一遍。最常走的两个动作——看排名、查阵容——直接摊到一级入口；球队库、赛果摘要和轮次复盘也从偏角的位置挪了出来。改的是路径长度，不是版面颜色。
            </p>
            <p>
              这一版在最近 12 个月内完成了两次大版本迭代，你看到的 3.2 是第二次。改动集中在三个地方，下面就按这三条说。
            </p>
          </div>
        </section>

        <section class="ab-chapter" id="chapter-2" data-reveal aria-labelledby="c2-title">
          <header class="ab-chapter__head">
            <span class="ab-chapter__num" aria-hidden="true">02</span>
            <h2 class="ab-chapter__title" id="c2-title">三条取舍：更快、更近、可回溯</h2>
            <p class="ab-chapter__lede">重做只在这三件事上下功夫，其余能不动就不动。</p>
          </header>

          <div class="ab-chapter__body">
            <figure class="figure ab-figure">
              <div class="figure__frame">
                <img class="figure__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深色战术板上画有三条不同方向的路线，均以橙色线条标注" decoding="async">
              </div>
              <figcaption class="figure__caption">三条并行的路线，对应三个方向上的取舍：加载、入口与归档。</figcaption>
            </figure>

            <div class="ab-picks">
              <article class="ab-pick">
                <p class="ab-pick__label"><span>SPEED</span><span>更快</span></p>
                <h3 class="ab-pick__title">先出骨架，再填数据</h3>
                <p class="ab-pick__text">
                  首屏加载中位数 1.2 秒，比上一版缩短约四成。页面框架先立起来，数据随后补进去，你不用对着空白屏等结果。
                </p>
              </article>

              <article class="ab-pick">
                <p class="ab-pick__label"><span>SHORTCUT</span><span>更近</span></p>
                <h3 class="ab-pick__title">两步之内到数据</h3>
                <p class="ab-pick__text">
                  联赛排名、积分差、近期状态做成三类速查，从任意页面两步抵达。移动端阵容卡可按联赛、轮次、主客场三种条件筛选，筛完不用退回上一层。
                </p>
              </article>

              <article class="ab-pick">
                <p class="ab-pick__label"><span>ARCHIVE</span><span>可回溯</span></p>
                <h3 class="ab-pick__title">按轮次翻回当时的阵容</h3>
                <p class="ab-pick__text">
                  复盘专题按轮次归档，三个赛季累计 114 轮。想看第几轮，顺着编号点回去，当时的阵容卡和赛果都留在原位，不用再去别处拼凑。
                </p>
              </article>
            </div>
          </div>
        </section>

        <div class="ab-ribbon ab-ribbon--teal">
          <p class="ab-ribbon__en">COVERAGE / 覆盖</p>
          <p class="ab-ribbon__text">赛事阵容页覆盖 12 个主流联赛，单轮提供 20 场以上对阵阵容卡。</p>
        </div>

        <section class="ab-chapter" id="chapter-3" data-reveal aria-labelledby="c3-title">
          <header class="ab-chapter__head">
            <span class="ab-chapter__num" aria-hidden="true">03</span>
            <h2 class="ab-chapter__title" id="c3-title">三条工作线，十七个人</h2>
            <p class="ab-chapter__lede">数据、评测、专栏三组分头做事，最后汇到同一轮内容里。</p>
          </header>

          <div class="ab-chapter__body">
            <div class="ab-roles">
              <article class="ab-role">
                <p class="ab-role__tag">数据组</p>
                <p class="ab-role__text">
                  打理球队库：128 支主流联赛球队，主客场分开列，各看最近 10 场表现。每轮的阵容卡与赛果摘要也由这一组录入和归档。
                </p>
              </article>
              <article class="ab-role">
                <p class="ab-role__tag">评测组</p>
                <p class="ab-role__text">
                  盯版本。加载速度、数据页直达、阵容卡片、复盘入口、球队库同步五个维度摆在一张表里对照，新旧版本差在哪一眼能看出来。
                </p>
              </article>
              <article class="ab-role">
                <p class="ab-role__tag">专栏组</p>
                <p class="ab-role__text">
                  9 位签约作者，每轮产出 4 到 6 篇短评，赛季结束再回头整理成专题，和已经归档的轮次挂在一起。
                </p>
              </article>
            </div>

            <figure class="figure ab-figure">
              <div class="figure__frame">
                <img class="figure__img" src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="桌面上并排放置平板与手写笔记，屏幕显示阵容卡列表" loading="lazy" decoding="async">
              </div>
              <figcaption class="figure__caption">阵容卡在桌面上按联赛、轮次与主客场排列，笔记用来标出本轮需要留意的对阵。</figcaption>
            </figure>
          </div>
        </section>

        <section class="ab-chapter" id="chapter-4" data-reveal aria-labelledby="c4-title">
          <header class="ab-chapter__head">
            <span class="ab-chapter__num" aria-hidden="true">04</span>
            <h2 class="ab-chapter__title" id="c4-title">一轮内容怎么走到你面前</h2>
            <p class="ab-chapter__lede">从终场哨响到次日上午，一轮内容大致走这么几步。</p>
          </header>

          <div class="ab-chapter__body">
            <ol class="ab-timeline">
              <li class="ab-timeline__item">
                <span class="ab-timeline__time">FULL TIME / 终场</span>
                <h3 class="ab-timeline__title">比分先落库</h3>
                <p class="ab-timeline__desc">终场哨响后，比分与技术统计进入赛果库，作为这一轮所有内容的底稿。</p>
              </li>
              <li class="ab-timeline__item">
                <span class="ab-timeline__time">NIGHT / 当晚</span>
                <h3 class="ab-timeline__title">阵容卡按联赛归位</h3>
                <p class="ab-timeline__desc">首发与替补名单补齐，按 12 个联赛分区、主客场分列，第二天你要筛哪一块都能直接点。</p>
              </li>
              <li class="ab-timeline__item">
                <span class="ab-timeline__time">DRAFT / 同夜</span>
                <h3 class="ab-timeline__title">短评进排期</h3>
                <p class="ab-timeline__desc">专栏组从本轮挑出值得回看的对阵，4 到 6 篇短评写完进排版。</p>
              </li>
              <li class="ab-timeline__item">
                <span class="ab-timeline__time">NEXT MORNING / 次日上午</span>
                <h3 class="ab-timeline__title">三块内容一起上线</h3>
                <p class="ab-timeline__desc">阵容卡、赛果摘要和轮次短评同时更新，你打开就能一次看全，不用来回刷新等补齐。</p>
              </li>
            </ol>
          </div>
        </section>

        <section class="ab-chapter" id="chapter-5" data-reveal aria-labelledby="c5-title">
          <header class="ab-chapter__head">
            <span class="ab-chapter__num" aria-hidden="true">05</span>
            <h2 class="ab-chapter__title" id="c5-title">几个你随时能自己看到的数字</h2>
            <p class="ab-chapter__lede">运营时间、产出量、归档深度和团队规模，都摆在这里。</p>
          </header>

          <div class="ab-chapter__body">
            <div class="ab-board">
              <img class="ab-board__bg" src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="夜间球场顶部灯带的长条特写，光线在冷灰结构上形成层次" loading="lazy" decoding="async">
              <div class="ab-board__inner">
                <ul class="ab-board__grid">
                  <li class="ab-board__cell">
                    <p class="ab-board__num">2019</p>
                    <p class="ab-board__cap">开始持续更新中文内容的年份</p>
                  </li>
                  <li class="ab-board__cell">
                    <p class="ab-board__num">620<span>余篇</span></p>
                    <p class="ab-board__cap">累积发布的观察报告</p>
                  </li>
                  <li class="ab-board__cell ab-board__cell--teal">
                    <p class="ab-board__num">114<span>轮</span></p>
                    <p class="ab-board__cap">三个赛季的复盘归档</p>
                  </li>
                  <li class="ab-board__cell ab-board__cell--purple">
                    <p class="ab-board__num">17<span>人</span></p>
                    <p class="ab-board__cap">数据、评测、专栏三组的内容团队</p>
                  </li>
                </ul>
                <p class="ab-board__note">运营主体位于青海，站点备案号青ICP备46414458号-4。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="ab-chapter" id="chapter-6" data-reveal aria-labelledby="c6-title">
          <header class="ab-chapter__head">
            <span class="ab-chapter__num" aria-hidden="true">06</span>
            <h2 class="ab-chapter__title" id="c6-title">接下来还要补的两件事</h2>
            <p class="ab-chapter__lede">排在后面的大版本里，方向已经定了。</p>
          </header>

          <div class="ab-chapter__body">
            <div class="ab-plans">
              <article class="ab-plan">
                <h3 class="ab-plan__title">球队库继续扩容</h3>
                <p class="ab-plan__text">
                  现在收录 128 支主流联赛球队，下一步把更多联赛的球队纳入同一套主客场分列里。查状态的时候，不用在一个联赛页和另一个联赛页之间来回跳。
                </p>
              </article>
              <article class="ab-plan">
                <h3 class="ab-plan__title">平板端的并列对照往多轮走</h3>
                <p class="ab-plan__text">
                  目前平板复盘页单页可以并排看两轮数据，还配了阵容热区图与轮次对照。接下来把对照拉到更多轮次，做战术复盘的人可以先横着看趋势，再竖着看单场。
                </p>
              </article>
            </div>
            <p>
              想先摸清现在这一版能做什么，可以去看功能与版本，把五个维度的对照表过一遍；也可以直接翻最近几轮的赛事观察，看看阵容卡和短评的实际样子。有具体的合作或反馈，走合作联系就好。
            </p>
          </div>
        </section>

      </div>
    </div>
  </div>

  <section class="ab-next">
    <div class="container ab-next__inner">
      <div class="ab-next__lead">
        <p class="ab-next__kicker">NEXT / 下一步</p>
        <h2 class="ab-next__title">看完主张，直接去看东西</h2>
        <p class="ab-next__text">对照表、轮次复盘和联系渠道，都在下面三个入口里。</p>
      </div>
      <div class="ab-next__links">
        <a class="btn btn--primary" href="/offerings/">看版本对照<span class="btn__arrow" aria-hidden="true">→</span></a>
        <a class="btn btn--ghost" href="/reports/">翻赛事观察</a>
        <a class="btn btn--ghost" href="/cooperation/">合作联系</a>
      </div>
    </div>
  </section>

</main>

.page-about {
  --ab-cut: 16px;
  --ab-num-size: clamp(56px, 10.5vw, 104px);
  background: var(--carbon-black);
  color: var(--paper-white);
  font-family: var(--font-sans);
  overflow-wrap: break-word;
}

.page-about .ab-hero {
  position: relative;
  padding: clamp(26px, 4.5vw, 52px) 0 clamp(46px, 7vw, 84px);
  background-color: var(--carbon-black);
  background-image:
    repeating-linear-gradient(0deg, rgba(140, 147, 159, 0.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(140, 147, 159, 0.07) 0 1px, transparent 1px 44px),
    linear-gradient(160deg, rgba(255, 107, 26, 0.09) 0%, rgba(20, 22, 26, 0) 46%);
  border-bottom: 1px solid var(--hairline);
}

.page-about .ab-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(24px, 4vw, 40px);
}

.page-about .ab-hero__title {
  margin: 16px 0 0;
  font-size: clamp(29px, 5.2vw, 50px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 15em;
  color: var(--paper-white);
}

.page-about .ab-hero__lede {
  margin: 18px 0 0;
  max-width: 42em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--cool-gray-200);
}

.page-about .ab-hero__panel {
  position: relative;
  padding: 22px 22px 26px;
  background: var(--pitch-900);
  clip-path: polygon(var(--ab-cut) 0, 100% 0, 100% calc(100% - var(--ab-cut)), calc(100% - var(--ab-cut)) 100%, 0 100%, 0 var(--ab-cut));
}

.page-about .ab-hero__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ab-cut);
  right: 0;
  height: 3px;
  background: var(--signal-orange);
}

.page-about .ab-panel__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--cool-gray-400);
  text-transform: uppercase;
}

.page-about .ab-panel__version {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(38px, 6vw, 54px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--signal-orange);
}

.page-about .ab-panel__stats {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--hairline-strong);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-about .ab-panel__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--paper-white);
}

.page-about .ab-panel__cap {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cool-gray-400);
}

.page-about .ab-longread {
  padding: clamp(38px, 6vw, 72px) 0 clamp(54px, 8vw, 96px);
  background: var(--carbon-black);
}

.page-about .ab-longread__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 44px);
}

.page-about .ab-toc {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 14px;
}

.page-about .ab-toc__title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cool-gray-400);
  text-transform: uppercase;
}

.page-about .ab-toc__list {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-about .ab-toc__list > li {
  flex: 0 0 auto;
}

.page-about .ab-toc__link {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cool-gray-400);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-about .ab-toc__link:hover,
.page-about .ab-toc__link:focus-visible {
  color: var(--paper-white);
  border-color: var(--signal-orange);
}

.page-about .ab-toc__link[aria-current="true"] {
  color: var(--signal-orange);
  border-color: var(--signal-orange);
  font-weight: 700;
}

.page-about .ab-chapter {
  padding: clamp(30px, 4.4vw, 48px) 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 96px;
}

.page-about .ab-chapter:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-about .ab-chapter__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--ab-num-size);
  font-weight: 600;
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: rgba(255, 107, 26, 0.14);
  -webkit-text-stroke: 2px var(--signal-orange);
}

.page-about .ab-chapter__title {
  margin: 12px 0 0;
  font-size: clamp(22px, 3.1vw, 32px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--paper-white);
}

.page-about .ab-chapter__lede {
  margin: 12px 0 0;
  max-width: 680px;
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-chapter__body {
  max-width: 680px;
  margin-top: 20px;
}

.page-about .ab-chapter__body > p {
  margin: 0 0 16px;
  font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.85;
  color: var(--cool-gray-200);
}

.page-about .ab-chapter__body > p:last-child {
  margin-bottom: 0;
}

.page-about .ab-figure {
  margin: 22px 0 26px;
}

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

.page-about .ab-picks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}

.page-about .ab-pick {
  position: relative;
  padding: 20px 18px 22px;
  background: var(--pitch-900);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.page-about .ab-pick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 2px;
  background: var(--signal-orange);
}

.page-about .ab-pick:hover {
  transform: translateY(-4px);
  background: var(--pitch-800);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
}

.page-about .ab-pick__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--cool-gray-400);
  text-transform: uppercase;
}

.page-about .ab-pick__title {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--paper-white);
}

.page-about .ab-pick__text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--cool-gray-400);
}

.page-about .ab-ribbon {
  margin: clamp(30px, 4.4vw, 46px) 0;
  padding: 20px clamp(18px, 3vw, 26px);
  border-left: 4px solid var(--lake-teal);
  background: linear-gradient(90deg, rgba(31, 169, 160, 0.24) 0%, rgba(31, 169, 160, 0.05) 100%);
}

.page-about .ab-ribbon__en {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lake-teal);
}

.page-about .ab-ribbon__text {
  margin: 8px 0 0;
  font-size: clamp(16px, 2.1vw, 21px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--paper-white);
}

.page-about .ab-roles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-about .ab-role {
  padding: 16px 18px 18px;
  background: var(--pitch-900);
  border-left: 3px solid var(--dusk-purple);
}

.page-about .ab-role__tag {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper-white);
}

.page-about .ab-role__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-timeline {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--hairline-strong);
}

.page-about .ab-timeline__item {
  position: relative;
  padding: 0 0 26px 0;
}

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

.page-about .ab-timeline__item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 5px;
  width: 11px;
  height: 11px;
  background: var(--signal-orange);
  transform: rotate(45deg);
}

.page-about .ab-timeline__time {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lake-teal);
}

.page-about .ab-timeline__title {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--paper-white);
}

.page-about .ab-timeline__desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-board {
  position: relative;
  margin-top: 6px;
  overflow: hidden;
  background: var(--pitch-900);
  clip-path: polygon(0 0, calc(100% - var(--ab-cut)) 0, 100% var(--ab-cut), 100% 100%, var(--ab-cut) 100%, 0 calc(100% - var(--ab-cut)));
}

.page-about .ab-board__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.page-about .ab-board__inner {
  position: relative;
  padding: clamp(20px, 3.4vw, 34px);
}

.page-about .ab-board__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.page-about .ab-board__cell {
  padding: 14px 12px 14px 14px;
  background: rgba(20, 22, 26, 0.62);
  border-left: 2px solid var(--signal-orange);
}

.page-about .ab-board__cell--teal {
  border-left-color: var(--lake-teal);
}

.page-about .ab-board__cell--purple {
  border-left-color: var(--dusk-purple);
}

.page-about .ab-board__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--signal-orange);
}

.page-about .ab-board__cell--teal .ab-board__num {
  color: var(--lake-teal);
}

.page-about .ab-board__cell--purple .ab-board__num {
  color: var(--paper-white);
}

.page-about .ab-board__num span {
  font-size: 0.44em;
  font-weight: 600;
  margin-left: 4px;
  letter-spacing: 0;
}

.page-about .ab-board__cap {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cool-gray-200);
}

.page-about .ab-board__note {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-strong);
  font-size: 12px;
  line-height: 1.6;
  color: var(--cool-gray-400);
  font-family: var(--font-mono);
}

.page-about .ab-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.page-about .ab-plan {
  padding: 18px 18px 20px;
  background: var(--pitch-900);
  border-top: 3px solid var(--lake-teal);
}

.page-about .ab-plan:nth-child(2) {
  border-top-color: var(--dusk-purple);
}

.page-about .ab-plan__title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--paper-white);
}

.page-about .ab-plan__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-next {
  padding: clamp(40px, 6vw, 72px) 0;
  background: var(--pitch-900);
  border-top: 2px solid var(--signal-orange);
}

.page-about .ab-next__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-about .ab-next__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-orange);
}

.page-about .ab-next__title {
  margin: 10px 0 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--paper-white);
}

.page-about .ab-next__text {
  margin: 10px 0 0;
  max-width: 34em;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--cool-gray-400);
}

.page-about .ab-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 560px) {
  .page-about .ab-panel__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .page-about .ab-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .ab-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .page-about .ab-board__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .ab-next__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

@media (min-width: 940px) {
  .page-about .ab-hero__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
  }

  .page-about .ab-longread__inner {
    grid-template-columns: 176px minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
  }

  .page-about .ab-toc {
    position: sticky;
    top: 88px;
    align-self: start;
    border-top: 0;
    border-left: 2px solid var(--hairline-strong);
    padding: 0 0 0 16px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .page-about .ab-toc__list {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .ab-toc__list > li + li {
    margin-top: 2px;
  }

  .page-about .ab-toc__link {
    border: 0;
    border-radius: 0;
    padding: 6px 0 6px 12px;
    white-space: normal;
    position: relative;
  }

  .page-about .ab-toc__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 1px;
    background: var(--hairline-strong);
    transform: translateY(-50%);
  }

  .page-about .ab-toc__link[aria-current="true"]::before {
    width: 10px;
    height: 2px;
    background: var(--signal-orange);
  }

  .page-about .ab-chapter__num {
    margin-left: -22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-pick,
  .page-about .ab-toc__link {
    transition: none;
  }

  .page-about .ab-pick:hover {
    transform: none;
  }
}