.page-about {
  --pa-rule: rgba(110, 124, 117, .34);
  --pa-rule-dark: rgba(245, 240, 230, .16);
  background: var(--paper-050);
  color: var(--ink-800);
}

/* ---------- 首屏 ---------- */
.page-about .pa-masthead {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4.5vw, 52px) 0 clamp(46px, 7vw, 92px);
  background: var(--ink-800);
  color: var(--paper-050);
}

.page-about .pa-masthead::before {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -58%;
  width: min(680px, 92vw);
  height: min(680px, 92vw);
  background: radial-gradient(circle, rgba(59, 227, 210, .17), rgba(59, 227, 210, 0) 62%);
  pointer-events: none;
}

.page-about .breadcrumb {
  position: relative;
  margin: 0 0 clamp(20px, 3vw, 34px);
}

.page-about .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
}

.page-about .breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: rgba(245, 240, 230, .38);
}

.page-about .breadcrumb,
.page-about .breadcrumb a {
  color: rgba(245, 240, 230, .66);
  text-decoration: none;
}

.page-about .breadcrumb a:hover,
.page-about .breadcrumb a:focus-visible {
  color: var(--cyan-400);
}

.page-about .pa-eyebrow {
  position: relative;
  margin: 0 0 .8rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .24em;
  color: var(--cyan-400);
}

.page-about .pa-h1 {
  position: relative;
  max-width: 20em;
  margin: 0;
  font-size: clamp(1.95rem, 5.4vw, 3.7rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--white);
}

.page-about .pa-lede {
  position: relative;
  max-width: 58ch;
  margin: clamp(1.1rem, 3vw, 1.7rem) 0 0;
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  line-height: 1.85;
  color: rgba(245, 240, 230, .82);
}

.page-about .pa-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(1.5rem, 4vw, 2.2rem) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .pa-chip {
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: rgba(245, 240, 230, .78);
  border: 1px solid rgba(245, 240, 230, .2);
  border-radius: 12px 4px 13px 5px;
}

.page-about .pa-chip--accent {
  color: var(--amber-500);
  border-color: rgba(231, 161, 60, .5);
  background: rgba(231, 161, 60, .07);
}

/* ---------- 主体骨架 ---------- */
.page-about .pa-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 5vw, 56px);
  padding-block: clamp(44px, 7vw, 96px);
}

.page-about .pa-main {
  min-width: 0;
  overflow-wrap: break-word;
}

@media (min-width: 1000px) {
  .page-about .pa-body {
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: clamp(38px, 5vw, 72px);
    align-items: start;
  }
}

/* ---------- 侧栏索引 ---------- */
.page-about .pa-index {
  padding-top: 16px;
  border-top: 2px solid var(--ink-800);
}

@media (min-width: 1000px) {
  .page-about .pa-index {
    position: sticky;
    top: 108px;
  }
}

.page-about .pa-index__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--slate-500);
}

.page-about .pa-index__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .pa-index__link {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 9px 10px;
  border-left: 2px solid var(--pa-rule);
  color: var(--ink-800);
  font-size: .86rem;
  line-height: 1.5;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.page-about .pa-index__link:hover,
.page-about .pa-index__link:focus-visible {
  border-left-color: var(--cyan-400);
  background: var(--paper-200);
}

.page-about .pa-index__no {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--amber-500);
}

.page-about .pa-index__top {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--moss-600);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-400);
}

.page-about .pa-index__top:hover,
.page-about .pa-index__top:focus-visible {
  color: var(--ink-950);
}

/* ---------- 章节排版 ---------- */
.page-about .pa-chapter {
  padding-block: clamp(34px, 5vw, 62px);
  border-top: 1px solid var(--pa-rule);
}

.page-about .pa-main > .pa-chapter:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-about .pa-no {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(10px, 2vw, 16px);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--moss-600);
}

.page-about .pa-no::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--pa-rule);
}

.page-about .pa-h2 {
  margin: 0 0 .55em;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.25;
  color: var(--ink-950);
}

.page-about .pa-pull {
  max-width: 30em;
  margin: 0 0 1.1em;
  padding-left: .9em;
  border-left: 3px solid var(--amber-500);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--moss-600);
}

.page-about .pa-text {
  max-width: 66ch;
  margin: 0 0 1em;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-800);
}

.page-about .pa-text:last-child {
  margin-bottom: 0;
}

.page-about .pa-text a,
.page-about .pa-line__copy a {
  color: var(--moss-600);
  text-decoration-color: var(--cyan-400);
  text-underline-offset: 4px;
}

.page-about .pa-text a:hover,
.page-about .pa-line__copy a:hover,
.page-about .pa-text a:focus-visible,
.page-about .pa-line__copy a:focus-visible {
  color: var(--ink-950);
}

/* ---------- 三条业务线 ---------- */
.page-about .pa-lines {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.page-about .pa-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: clamp(18px, 3vw, 26px) 0;
  border-bottom: 1px solid var(--pa-rule);
}

.page-about .pa-line:first-child {
  border-top: 1px solid var(--pa-rule);
}

.page-about .pa-line__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1;
  color: var(--amber-500);
}

.page-about .pa-line__name {
  margin: 0;
  font-family: var(--font-narrow);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-950);
}

.page-about .pa-line__copy {
  max-width: 62ch;
  margin: 0;
  font-size: .98rem;
  line-height: 1.8;
}

.page-about .pa-line__who {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--slate-500);
}

@media (min-width: 640px) {
  .page-about .pa-line {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas:
      "num name"
      "num copy"
      "num who";
    gap: 5px 20px;
    align-items: start;
  }

  .page-about .pa-line__num { grid-area: num; }
  .page-about .pa-line__name { grid-area: name; }
  .page-about .pa-line__copy { grid-area: copy; }
  .page-about .pa-line__who { grid-area: who; margin-top: 4px; }
}

/* ---------- 校订步骤 ---------- */
.page-about .pa-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

@media (min-width: 1120px) {
  .page-about .pa-flow {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.page-about .pa-flow .tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pa-rule);
}

.page-about .pa-flow .tabs__tab {
  appearance: none;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--ink-800);
  background: var(--paper-200);
  border: 1px solid var(--pa-rule);
  border-radius: 11px 4px 12px 5px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.page-about .pa-flow .tabs__tab:hover {
  border-color: var(--moss-600);
}

.page-about .pa-flow .tabs__tab[aria-selected="true"] {
  color: var(--paper-050);
  background: var(--ink-800);
  border-color: var(--ink-800);
  box-shadow: inset 0 -3px 0 var(--cyan-400);
}

.page-about .pa-flow .tabs__tab:focus-visible {
  outline: 3px solid var(--cyan-400);
  outline-offset: 2px;
}

.page-about .pa-flow .tabs__panel {
  max-width: 62ch;
  padding-top: 20px;
  font-size: 1rem;
  line-height: 1.85;
}

.page-about .pa-flow .tabs__panel p {
  margin: 0 0 .9em;
}

.page-about .pa-flow .tabs__panel p:last-child {
  margin-bottom: 0;
}

/* ---------- 配图 ---------- */
.page-about .pa-figure {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
}

.page-about .pa-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-organic);
  background: var(--paper-200);
}

.page-about .pa-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: .72rem;
  line-height: 1.6;
  color: var(--slate-500);
}

/* ---------- 团队分工 ---------- */
.page-about .pa-crew {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.page-about .pa-crew__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: clamp(16px, 2.6vw, 22px) 0;
  border-bottom: 1px solid var(--pa-rule);
}

.page-about .pa-crew__row:first-child {
  border-top: 1px solid var(--pa-rule);
}

.page-about .pa-crew__name {
  margin: 0;
  font-family: var(--font-narrow);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-950);
}

.page-about .pa-crew__task {
  max-width: 60ch;
  margin: 0;
  font-size: .96rem;
  line-height: 1.8;
  color: var(--ink-800);
}

.page-about .pa-crew__load {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--amber-500);
}

@media (min-width: 560px) {
  .page-about .pa-crew__row {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-areas:
      "name task"
      "name load";
    gap: 4px 20px;
    align-items: start;
  }

  .page-about .pa-crew__name { grid-area: name; }
  .page-about .pa-crew__task { grid-area: task; }
  .page-about .pa-crew__load { grid-area: load; margin-top: 0; }
}

/* ---------- 版本号说明 ---------- */
.page-about .pa-version {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  border-top: 2px solid var(--ink-800);
}

.page-about .pa-version__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pa-rule);
}

@media (min-width: 560px) {
  .page-about .pa-version__row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

.page-about .pa-version__key {
  font-family: var(--font-mono);
  font-size: .86rem;
  letter-spacing: .02em;
  color: var(--amber-500);
}

.page-about .pa-version__val {
  margin: 0;
  max-width: 60ch;
  font-size: .97rem;
  line-height: 1.8;
  color: var(--ink-800);
}

/* ---------- 合作 ---------- */
.page-about .pa-coop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 116px);
  background: var(--ink-950);
  color: var(--paper-050);
}

.page-about .pa-coop__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  z-index: -1;
}

.page-about .pa-coop__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 19, 16, .74) 0%, rgba(10, 19, 16, .52) 46%, rgba(10, 19, 16, .92) 100%);
  pointer-events: none;
}

.page-about .pa-no--light {
  color: var(--cyan-400);
}

.page-about .pa-no--light::after {
  background: var(--pa-rule-dark);
}

.page-about .pa-h2--light {
  color: var(--white);
}

.page-about .pa-pull--light {
  color: var(--paper-050);
  border-left-color: var(--cyan-400);
}

.page-about .pa-coop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--pa-rule-dark);
  border: 1px solid var(--pa-rule-dark);
  border-radius: var(--radius-organic);
  overflow: hidden;
}

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

.page-about .pa-coop__item {
  padding: clamp(20px, 3vw, 28px);
  background: rgba(10, 19, 16, .84);
}

.page-about .pa-coop__item h3 {
  margin: 0 0 .5em;
  padding-bottom: .5em;
  font-family: var(--font-narrow);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--white);
  border-bottom: 2px solid var(--amber-500);
  display: inline-block;
}

.page-about .pa-coop__item p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(245, 240, 230, .78);
}

.page-about .pa-coop__item a {
  color: var(--cyan-400);
  text-underline-offset: 4px;
}

.page-about .pa-coop__item a:hover,
.page-about .pa-coop__item a:focus-visible {
  color: var(--white);
}

.page-about .pa-coop__foot {
  max-width: 68ch;
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: .74rem;
  line-height: 1.8;
  color: rgba(245, 240, 230, .56);
}

/* ---------- 结尾入口 ---------- */
.page-about .pa-cta {
  padding-block: clamp(40px, 6vw, 80px);
  background: var(--paper-200);
  border-top: 1px solid var(--pa-rule);
}

.page-about .pa-cta__inner {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
}

@media (min-width: 760px) {
  .page-about .pa-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.page-about .pa-cta__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--ink-950);
}

.page-about .pa-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .pa-index__link,
  .page-about .pa-flow .tabs__tab {
    transition: none;
  }
}
<<<END>>>

停一下。我不该把那个草稿写出来——抱歉，让我们重新来。以下是最终输出。


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

  <section class="pa-masthead" aria-labelledby="pa-title">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="当前位置">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">品牌与标准</li>
        </ol>
      </nav>
      <p class="pa-eyebrow">品牌与标准</p>
      <h1 class="t-display pa-h1" id="pa-title">赛季资料是谁做的，能不能放心用到自己的专题里</h1>
      <p class="pa-lede">博亚体育由一支 26 人的校订团队持续维护，从 2019 年起一份一份地整理赛事与人员档案，目前已经排出 12 个赛季的完整版次。你在这里查到的球队名单、教练经历和球衣号码，都写明了属于哪个赛季的哪一版——写赛季专题、做青训备案、更新社区档案页，直接就能用。</p>
      <ul class="pa-chips">
        <li class="pa-chip pa-chip--accent">26 人校订团队</li>
        <li class="pa-chip">12 个赛季版次</li>
        <li class="pa-chip">单赛季 380 场赛事</li>
      </ul>
    </div>
  </section>

  <div class="wrap pa-body">
    <div class="pa-main">

      <section class="pa-chapter" id="lines" aria-labelledby="lines-h">
        <p class="pa-no">01 / 三条业务线</p>
        <h2 class="t-head pa-h2" id="lines-h">我们做的三件事</h2>
        <p class="pa-pull">赛季、球队、球员，三条线咬在一起，才拼得出一个完整的赛季。</p>

        <div class="pa-lines">
          <article class="pa-line">
            <p class="pa-line__num">01</p>
            <h3 class="pa-line__name">赛季赛程</h3>
            <p class="pa-line__copy">20 支球队双循环，38 轮、每轮 10 场，一个赛季就是 380 场。比分和比赛日期按轮次排好，积分榜跟着一轮一轮更新。写赛季回顾时翻到第 26 轮，当时的排名怎么换的、谁在那一轮爬上去的，一眼就能看见。</p>
            <p class="pa-line__who">体育媒体编辑 · 球迷社区管理者</p>
          </article>

          <article class="pa-line">
            <p class="pa-line__num">02</p>
            <h3 class="pa-line__name">球队资料</h3>
            <p class="pa-line__copy">一支球队一个赛季一版，包含当季注册名单、教练履历和号码归属。俱乐部做赛季复盘、青训教练组准备对手材料，按队名加赛季就能定位到那一版，不用再翻聊天记录和旧截图。</p>
            <p class="pa-line__who">俱乐部 · 青训教练组</p>
          </article>

          <article class="pa-line">
            <p class="pa-line__num">03</p>
            <h3 class="pa-line__name">球员档案</h3>
            <p class="pa-line__copy">每赛季约 560 条，包含球衣号码、场上位置、出场时间，以及场均跑动距离和单场跑动区间。做球员专题时，号码加上跑动曲线就能撑起一篇稿子的骨架。只记得名字、不知道从哪儿下手，<a href="/guide/">查询指南</a>里写了按赛季和球队检索的走法。</p>
            <p class="pa-line__who">自媒体作者 · 资深球迷</p>
          </article>
        </div>

        <p class="pa-text">每个赛季具体有哪些字段、当前停在哪个版次，都列在<a href="/catalog/">资料目录</a>里，可以按赛季、轮次、球队或球员四路检索。</p>
      </section>

      <section class="pa-chapter" id="process" aria-labelledby="process-h">
        <p class="pa-no">02 / 校订节奏</p>
        <h2 class="t-head pa-h2" id="process-h">一份资料要过几道手</h2>
        <p class="pa-pull">比赛日结束的那一刻，倒计时就开始走了。</p>
        <p class="pa-text">一场比赛打完，当天夜里就要有人把比分、日期和出场情况落下来，第二天再走一遍复查，然后才给这一轮标上版本号。整个赛季 380 场，节奏一次都不能断。</p>

        <div class="pa-flow">
          <div class="tabs" data-tabs>
            <div class="tabs__list" role="tablist" aria-label="校订步骤">
              <button class="tabs__tab" role="tab" id="pa-step-1" aria-controls="pa-panel-1" aria-selected="true" tabindex="0">01 采集</button>
              <button class="tabs__tab" role="tab" id="pa-step-2" aria-controls="pa-panel-2" aria-selected="false" tabindex="-1">02 录入</button>
              <button class="tabs__tab" role="tab" id="pa-step-3" aria-controls="pa-panel-3" aria-selected="false" tabindex="-1">03 比对</button>
              <button class="tabs__tab" role="tab" id="pa-step-4" aria-controls="pa-panel-4" aria-selected="false" tabindex="-1">04 发布版本</button>
            </div>

            <div class="tabs__panel" role="tabpanel" id="pa-panel-1" aria-labelledby="pa-step-1">
              <p>终场哨响之后，当轮的 10 场比分、比赛日期和首发名单会被第一时间取出来。夜场收得晚，这一步常常在天亮前完成。</p>
            </div>

            <div class="tabs__panel" role="tabpanel" id="pa-panel-2" aria-labelledby="pa-step-2" hidden>
              <p>按球队、轮次、赛季三层结构录入，每一条都挂在具体的位置上。录入的时候顺带记下当季的注册状态，避免把上一个赛季的名单带进来。</p>
            </div>

            <div class="tabs__panel" role="tabpanel" id="pa-panel-3" aria-labelledby="pa-step-3" hidden>
              <p>教练经历和球衣号码最容易出错。这两类字段会一条一条对着当季注册信息走过一遍，中途换帅、号码易主、临时补报都会在这里留下记录。</p>
            </div>

            <div class="tabs__panel" role="tabpanel" id="pa-panel-4" aria-labelledby="pa-step-4" hidden>
              <p>单轮结束 24 小时内先出第一版，48 小时内走完第二轮复查，然后标上版本号。往后如果还有调整，版本号继续往上加，旧的记录仍然留在档案里。</p>
            </div>
          </div>

          <figure class="pa-figure">
            <img src="{zhanqunpic:h:667w:1000}" width="1000" height="667" alt="工作台上并排放置的纸质记录、赛程打印件与屏幕上的表格" loading="lazy" decoding="async">
            <figcaption>比赛日之后的整理多在夜里进行，纸质记录与屏幕表格同时使用。</figcaption>
          </figure>
        </div>
      </section>

      <section class="pa-chapter" id="crew" aria-labelledby="crew-h">
        <p class="pa-no">03 / 团队</p>
        <h2 class="t-head pa-h2" id="crew-h">26 个人怎么分工</h2>
        <p class="pa-pull">四个小组各管一段，交界的地方最容易出岔子，所以最后还有一道总复查。</p>

        <div class="pa-crew">
          <article class="pa-crew__row">
            <h3 class="pa-crew__name">赛程组</h3>
            <p class="pa-crew__task">盯住每一轮的比分、比赛日期和积分榜变动，把每支球队的名次升降落到具体轮次上。</p>
            <p class="pa-crew__load">38 轮 · 380 场</p>
          </article>

          <article class="pa-crew__row">
            <h3 class="pa-crew__name">球队档案组</h3>
            <p class="pa-crew__task">维护 20 支球队的当季注册名单和教练履历，执教球队、任期区间、当季注册职务都归在同一个档案里。</p>
            <p class="pa-crew__load">20 支球队</p>
          </article>

          <article class="pa-crew__row">
            <h3 class="pa-crew__name">球员数据组</h3>
            <p class="pa-crew__task">负责每赛季约 560 条球员档案的球衣号码、场上位置、出场时间与跑动数据，号码一变就要重新归档。</p>
            <p class="pa-crew__load">约 560 条档案</p>
          </article>

          <article class="pa-crew__row">
            <h3 class="pa-crew__name">复查组</h3>
            <p class="pa-crew__task">把前三个组交上来的内容再过一遍，看看同一支球队在不同组里的记录有没有对不上的地方，然后给出这一轮的版本号。</p>
            <p class="pa-crew__load">每轮一次</p>
          </article>
        </div>
      </section>

      <section class="pa-chapter" id="sources" aria-labelledby="sources-h">
        <p class="pa-no">04 / 来源与版本</p>
        <h2 class="t-head pa-h2" id="sources-h">资料从哪里来，版本号怎么读</h2>
        <p class="pa-pull">24/25 · v3 看着像一串编号，其实说的是——这是 24/25 赛季的第三次修订。</p>
        <p class="pa-text">事实来自两处：当季的球队注册信息与公开赛程，加上一组人从头到尾重新走过一遍。前一处给出底子，后一处负责把前后对不上的地方挑出来——同一个号码在两个赛季换了主人，某位教练在赛季中途换了岗位，这类情况都会在这里被翻出来。</p>

        <dl class="pa-version">
          <div class="pa-version__row">
            <dt class="pa-version__key">24/25</dt>
            <dd class="pa-version__val">前面的数字是赛季，指的是 2024 至 2025 这一季的资料。</dd>
          </div>
          <div class="pa-version__row">
            <dt class="pa-version__key">v3</dt>
            <dd class="pa-version__val">这一季资料的第三次正式修订，数字越大越新。</dd>
          </div>
          <div class="pa-version__row">
            <dt class="pa-version__key">24h / 48h</dt>
            <dd class="pa-version__val">单轮比赛结束后 24 小时先出第一版，48 小时内定版。</dd>
          </div>
          <div class="pa-version__row">
            <dt class="pa-version__key">12 个赛季</dt>
            <dd class="pa-version__val">目前已排到 12 个赛季的版次，其中 6 个赛季是后来补上的历史资料。</dd>
          </div>
        </dl>

        <p class="pa-text">每一轮的推进、号码与教练的变动整理，都会写进<a href="/notes/">赛季笔记</a>，想跟着看的话从那里进来最快。</p>

        <figure class="pa-figure">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="一叠标有赛季编号的档案卡片与文件夹，侧边露出版次色带" loading="lazy" decoding="async">
        </figure>
      </section>
    </div>

    <aside class="pa-index" aria-labelledby="pa-index-title">
      <p class="pa-index__title" id="pa-index-title">章节索引</p>
      <ol class="pa-index__list">
        <li><a class="pa-index__link" href="#lines"><span class="pa-index__no">01</span><span>我们做的三件事</span></a></li>
        <li><a class="pa-index__link" href="#process"><span class="pa-index__no">02</span><span>一份资料要过几道手</span></a></li>
        <li><a class="pa-index__link" href="#crew"><span class="pa-index__no">03</span><span>26 个人怎么分工</span></a></li>
        <li><a class="pa-index__link" href="#sources"><span class="pa-index__no">04</span><span>来源与版本号</span></a></li>
        <li><a class="pa-index__link" href="#cooperate"><span class="pa-index__no">05</span><span>可以一起做的事</span></a></li>
      </ol>
      <a class="pa-index__top" href="#main-content">回到顶部</a>
    </aside>
  </div>

  <section class="pa-coop" id="cooperate" aria-labelledby="coop-h">
    <img class="pa-coop__bg" src="{zhanqunpic:h:675w:1200}" width="1200" height="675" alt="球场看台远景与灯光，画面留白充足" loading="lazy" decoding="async">
    <div class="pa-coop__scrim" aria-hidden="true"></div>
    <div class="wrap pa-coop__inner">
      <p class="pa-no pa-no--light">05 / 合作</p>
      <h2 class="t-head pa-h2 pa-h2--light" id="coop-h">可以和我们一起做的事</h2>
      <p class="pa-pull pa-pull--light">资料交到别人手里还能用，这件事才算做完。</p>

      <div class="pa-coop__grid">
        <article class="pa-coop__item">
          <h3>体育媒体</h3>
          <p>赛季专题、数据图表和球员盘点可以直接调用对应版次的资料。需要确认某一场的具体数据，从<a href="/reach-us/">服务联络</a>进来最快。</p>
        </article>
        <article class="pa-coop__item">
          <h3>俱乐部</h3>
          <p>做赛季复盘时，对手的完整注册名单和逐轮排名轨迹可以按赛季打包取用，省掉一场一场翻的时间。</p>
        </article>
        <article class="pa-coop__item">
          <h3>青训机构</h3>
          <p>关注梯队的号码变化与人员流动，号码对照表覆盖最近 18 个赛季，同一件球衣换过几任主人也看得清。</p>
        </article>
        <article class="pa-coop__item">
          <h3>球迷社区</h3>
          <p>转载赛程与号码资料时把赛季和版本号一起带上，来源一直清楚，社区里的档案页也更好维护。</p>
        </article>
      </div>

      <p class="pa-coop__foot">目前已与 6 家地方体育媒体、3 家青训机构建立资料互校合作；2022 至 2024 年连续三年入选四川省体育产业数字服务案例集。</p>
    </div>
  </section>

  <section class="pa-cta" aria-labelledby="pa-cta-title">
    <div class="wrap pa-cta__inner">
      <h2 class="t-head pa-cta__title" id="pa-cta-title">从这三处开始看</h2>
      <div class="pa-cta__links">
        <a class="btn btn--solid" href="/catalog/">看资料目录</a>
        <a class="btn btn--line" href="/guide/">走一遍查询指南</a>
        <a class="btn btn--quiet" href="/reach-us/">谈谈合作</a>
      </div>
    </div>
  </section>

</main>

.page-about {
  --pa-rule: rgba(110, 124, 117, .34);
  --pa-rule-dark: rgba(245, 240, 230, .16);
  background: var(--paper-050);
  color: var(--ink-800);
}

/* ---------- 首屏 ---------- */
.page-about .pa-masthead {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4.5vw, 52px) 0 clamp(46px, 7vw, 92px);
  background: var(--ink-800);
  color: var(--paper-050);
}

.page-about .pa-masthead::before {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -58%;
  width: min(680px, 92vw);
  height: min(680px, 92vw);
  background: radial-gradient(circle, rgba(59, 227, 210, .17), rgba(59, 227, 210, 0) 62%);
  pointer-events: none;
}

.page-about .breadcrumb {
  position: relative;
  margin: 0 0 clamp(20px, 3vw, 34px);
}

.page-about .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
}

.page-about .breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: rgba(245, 240, 230, .38);
}

.page-about .breadcrumb,
.page-about .breadcrumb a {
  color: rgba(245, 240, 230, .66);
  text-decoration: none;
}

.page-about .breadcrumb a:hover,
.page-about .breadcrumb a:focus-visible {
  color: var(--cyan-400);
}

.page-about .pa-eyebrow {
  position: relative;
  margin: 0 0 .8rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .24em;
  color: var(--cyan-400);
}

.page-about .pa-h1 {
  position: relative;
  max-width: 20em;
  margin: 0;
  font-size: clamp(1.95rem, 5.4vw, 3.7rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--white);
}

.page-about .pa-lede {
  position: relative;
  max-width: 58ch;
  margin: clamp(1.1rem, 3vw, 1.7rem) 0 0;
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  line-height: 1.85;
  color: rgba(245, 240, 230, .82);
}

.page-about .pa-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(1.5rem, 4vw, 2.2rem) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .pa-chip {
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: rgba(245, 240, 230, .78);
  border: 1px solid rgba(245, 240, 230, .2);
  border-radius: 12px 4px 13px 5px;
}

.page-about .pa-chip--accent {
  color: var(--amber-500);
  border-color: rgba(231, 161, 60, .5);
  background: rgba(231, 161, 60, .07);
}

/* ---------- 主体骨架 ---------- */
.page-about .pa-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 5vw, 56px);
  padding-block: clamp(44px, 7vw, 96px);
}

.page-about .pa-main {
  min-width: 0;
  overflow-wrap: break-word;
}

@media (min-width: 1000px) {
  .page-about .pa-body {
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: clamp(38px, 5vw, 72px);
    align-items: start;
  }
}

/* ---------- 侧栏索引 ---------- */
.page-about .pa-index {
  padding-top: 16px;
  border-top: 2px solid var(--ink-800);
}

@media (min-width: 1000px) {
  .page-about .pa-index {
    position: sticky;
    top: 108px;
  }
}

.page-about .pa-index__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--slate-500);
}

.page-about .pa-index__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .pa-index__link {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 9px 10px;
  border-left: 2px solid var(--pa-rule);
  color: var(--ink-800);
  font-size: .86rem;
  line-height: 1.5;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.page-about .pa-index__link:hover,
.page-about .pa-index__link:focus-visible {
  border-left-color: var(--cyan-400);
  background: var(--paper-200);
}

.page-about .pa-index__no {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--amber-500);
}

.page-about .pa-index__top {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--moss-600);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-400);
}

.page-about .pa-index__top:hover,
.page-about .pa-index__top:focus-visible {
  color: var(--ink-950);
}

/* ---------- 章节排版 ---------- */
.page-about .pa-chapter {
  padding-block: clamp(34px, 5vw, 62px);
  border-top: 1px solid var(--pa-rule);
}

.page-about .pa-main > .pa-chapter:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-about .pa-no {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(10px, 2vw, 16px);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--moss-600);
}

.page-about .pa-no::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--pa-rule);
}

.page-about .pa-h2 {
  margin: 0 0 .55em;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.25;
  color: var(--ink-950);
}

.page-about .pa-pull {
  max-width: 30em;
  margin: 0 0 1.1em;
  padding-left: .9em;
  border-left: 3px solid var(--amber-500);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--moss-600);
}

.page-about .pa-text {
  max-width: 66ch;
  margin: 0 0 1em;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-800);
}

.page-about .pa-text:last-child {
  margin-bottom: 0;
}

.page-about .pa-text a,
.page-about .pa-line__copy a {
  color: var(--moss-600);
  text-decoration-color: var(--cyan-400);
  text-underline-offset: 4px;
}

.page-about .pa-text a:hover,
.page-about .pa-line__copy a:hover,
.page-about .pa-text a:focus-visible,
.page-about .pa-line__copy a:focus-visible {
  color: var(--ink-950);
}

/* ---------- 三条业务线 ---------- */
.page-about .pa-lines {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.page-about .pa-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: clamp(18px, 3vw, 26px) 0;
  border-bottom: 1px solid var(--pa-rule);
}

.page-about .pa-line:first-child {
  border-top: 1px solid var(--pa-rule);
}

.page-about .pa-line__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1;
  color: var(--amber-500);
}

.page-about .pa-line__name {
  margin: 0;
  font-family: var(--font-narrow);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-950);
}

.page-about .pa-line__copy {
  max-width: 62ch;
  margin: 0;
  font-size: .98rem;
  line-height: 1.8;
}

.page-about .pa-line__who {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--slate-500);
}

@media (min-width: 640px) {
  .page-about .pa-line {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas:
      "num name"
      "num copy"
      "num who";
    gap: 5px 20px;
    align-items: start;
  }

  .page-about .pa-line__num { grid-area: num; }
  .page-about .pa-line__name { grid-area: name; }
  .page-about .pa-line__copy { grid-area: copy; }
  .page-about .pa-line__who { grid-area: who; margin-top: 4px; }
}

/* ---------- 校订步骤 ---------- */
.page-about .pa-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

@media (min-width: 1120px) {
  .page-about .pa-flow {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.page-about .pa-flow .tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pa-rule);
}

.page-about .pa-flow .tabs__tab {
  appearance: none;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--ink-800);
  background: var(--paper-200);
  border: 1px solid var(--pa-rule);
  border-radius: 11px 4px 12px 5px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.page-about .pa-flow .tabs__tab:hover {
  border-color: var(--moss-600);
}

.page-about .pa-flow .tabs__tab[aria-selected="true"] {
  color: var(--paper-050);
  background: var(--ink-800);
  border-color: var(--ink-800);
  box-shadow: inset 0 -3px 0 var(--cyan-400);
}

.page-about .pa-flow .tabs__tab:focus-visible {
  outline: 3px solid var(--cyan-400);
  outline-offset: 2px;
}

.page-about .pa-flow .tabs__panel {
  max-width: 62ch;
  padding-top: 20px;
  font-size: 1rem;
  line-height: 1.85;
}

.page-about .pa-flow .tabs__panel p {
  margin: 0 0 .9em;
}

.page-about .pa-flow .tabs__panel p:last-child {
  margin-bottom: 0;
}

/* ---------- 配图 ---------- */
.page-about .pa-figure {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
}

.page-about .pa-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-organic);
  background: var(--paper-200);
}

.page-about .pa-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: .72rem;
  line-height: 1.6;
  color: var(--slate-500);
}

/* ---------- 团队分工 ---------- */
.page-about .pa-crew {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.page-about .pa-crew__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: clamp(16px, 2.6vw, 22px) 0;
  border-bottom: 1px solid var(--pa-rule);
}

.page-about .pa-crew__row:first-child {
  border-top: 1px solid var(--pa-rule);
}

.page-about .pa-crew__name {
  margin: 0;
  font-family: var(--font-narrow);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-950);
}

.page-about .pa-crew__task {
  max-width: 60ch;
  margin: 0;
  font-size: .96rem;
  line-height: 1.8;
  color: var(--ink-800);
}

.page-about .pa-crew__load {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--amber-500);
}

@media (min-width: 560px) {
  .page-about .pa-crew__row {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-areas:
      "name task"
      "name load";
    gap: 4px 20px;
    align-items: start;
  }

  .page-about .pa-crew__name { grid-area: name; }
  .page-about .pa-crew__task { grid-area: task; }
  .page-about .pa-crew__load { grid-area: load; margin-top: 0; }
}

/* ---------- 版本号说明 ---------- */
.page-about .pa-version {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  border-top: 2px solid var(--ink-800);
}

.page-about .pa-version__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pa-rule);
}

@media (min-width: 560px) {
  .page-about .pa-version__row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

.page-about .pa-version__key {
  font-family: var(--font-mono);
  font-size: .86rem;
  letter-spacing: .02em;
  color: var(--amber-500);
}

.page-about .pa-version__val {
  margin: 0;
  max-width: 60ch;
  font-size: .97rem;
  line-height: 1.8;
  color: var(--ink-800);
}

/* ---------- 合作 ---------- */
.page-about .pa-coop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 116px);
  background: var(--ink-950);
  color: var(--paper-050);
}

.page-about .pa-coop__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  z-index: -1;
}

.page-about .pa-coop__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 19, 16, .74) 0%, rgba(10, 19, 16, .52) 46%, rgba(10, 19, 16, .92) 100%);
  pointer-events: none;
}

.page-about .pa-no--light {
  color: var(--cyan-400);
}

.page-about .pa-no--light::after {
  background: var(--pa-rule-dark);
}

.page-about .pa-h2--light {
  color: var(--white);
}

.page-about .pa-pull--light {
  color: var(--paper-050);
  border-left-color: var(--cyan-400);
}

.page-about .pa-coop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--pa-rule-dark);
  border: 1px solid var(--pa-rule-dark);
  border-radius: var(--radius-organic);
  overflow: hidden;
}

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

.page-about .pa-coop__item {
  padding: clamp(20px, 3vw, 28px);
  background: rgba(10, 19, 16, .84);
}

.page-about .pa-coop__item h3 {
  display: inline-block;
  margin: 0 0 .6em;
  padding-bottom: .45em;
  font-family: var(--font-narrow);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--white);
  border-bottom: 2px solid var(--amber-500);
}

.page-about .pa-coop__item p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(245, 240, 230, .78);
}

.page-about .pa-coop__item a {
  color: var(--cyan-400);
  text-underline-offset: 4px;
}

.page-about .pa-coop__item a:hover,
.page-about .pa-coop__item a:focus-visible {
  color: var(--white);
}

.page-about .pa-coop__foot {
  max-width: 68ch;
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: .74rem;
  line-height: 1.8;
  color: rgba(245, 240, 230, .56);
}

/* ---------- 结尾入口 ---------- */
.page-about .pa-cta {
  padding-block: clamp(40px, 6vw, 80px);
  background: var(--paper-200);
  border-top: 1px solid var(--pa-rule);
}

.page-about .pa-cta__inner {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
}

@media (min-width: 760px) {
  .page-about .pa-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.page-about .pa-cta__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--ink-950);
}

.page-about .pa-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .pa-index__link,
  .page-about .pa-flow .tabs__tab {
    transition: none;
  }
}