.page-about {
  --about-pad-y: clamp(3rem, 8vw, 6rem);
  --about-gap: clamp(1.75rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--on-dark);
  overflow-x: clip;
}

.page-about .shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding-block: clamp(1rem, 3vw, 1.75rem) clamp(2.75rem, 7vw, 4.5rem);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(56, 242, 200, 0.14), transparent 58%),
    linear-gradient(158deg, var(--ink-2) 0%, var(--ink) 66%);
  overflow: hidden;
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -68%;
  width: 70%;
  height: 130%;
  background: linear-gradient(180deg, rgba(255, 122, 61, 0.16), transparent 70%);
  transform: skewX(calc(var(--skew) * -1));
  pointer-events: none;
}

.page-about .breadcrumbs {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.page-about .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-num);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage-2);
}

.page-about .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--sage);
}

.page-about .breadcrumb-link {
  color: var(--sage-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-about .breadcrumb-link:hover,
.page-about .breadcrumb-link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-about .breadcrumb-current {
  color: var(--on-dark);
}

.page-about .about-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}

.page-about .eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-about h1 {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--on-dark);
}

.page-about .lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.8;
  color: rgba(232, 239, 233, 0.82);
}

.page-about .about-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.page-about .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
    border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-about .btn--primary {
  background: var(--cyan);
  color: var(--ink);
}

.page-about .btn--primary:hover,
.page-about .btn--primary:focus-visible {
  background: #63f7d7;
  transform: translateY(-2px);
}

.page-about .btn--ghost {
  border-color: rgba(185, 198, 190, 0.5);
  color: var(--on-dark);
}

.page-about .btn--ghost:hover,
.page-about .btn--ghost:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
}

.page-about .btn--quiet {
  color: var(--on-dark);
  padding-inline: 0.4rem;
  border-bottom: 1px solid rgba(185, 198, 190, 0.5);
  border-radius: 0;
}

.page-about .btn--quiet:hover,
.page-about .btn--quiet:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-about .btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-about .hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(185, 198, 190, 0.22);
  border: 1px solid rgba(185, 198, 190, 0.22);
  border-radius: var(--r-md);
  overflow: hidden;
  align-self: start;
}

.page-about .hero-stats__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.1rem;
  background: rgba(8, 21, 15, 0.72);
}

.page-about .hero-stats__num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1;
  color: var(--amber);
}

.page-about .hero-stats__label {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sage-2);
}

/* ---------- 章节通用 ---------- */
.page-about .about-band {
  padding-block: var(--about-pad-y);
}

.page-about .about-band--paper {
  background: var(--paper);
  color: var(--on-paper);
}

.page-about .about-band--ink {
  background: var(--ink-2);
  color: var(--on-dark);
}

.page-about .about-chapter {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.page-about .chapter-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
}

.page-about .chapter-num {
  position: sticky;
  top: 1rem;
  font-family: var(--font-num);
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--sage);
  opacity: 0.85;
  user-select: none;
}

.page-about .about-band--paper .chapter-num {
  -webkit-text-stroke-color: rgba(22, 33, 28, 0.42);
  opacity: 0.7;
}

.page-about .chapter-head__text {
  min-width: 0;
}

.page-about .about-band--ink .eyebrow {
  color: var(--orange);
}

.page-about .about-band--paper .eyebrow {
  color: #0b6b57;
}

.page-about .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: inherit;
  max-width: 24ch;
}

/* ---------- 01 章节正文 ---------- */
.page-about .chapter-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--about-gap);
}

.page-about .prose p {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--on-paper);
}

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

.page-about .prose--dark p {
  color: rgba(232, 239, 233, 0.84);
}

.page-about .fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-light);
}

.page-about .fact-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-light);
}

.page-about .fact-item__key {
  font-family: var(--font-num);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a5f56;
}

.page-about .fact-item__val {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--on-paper);
}

/* ---------- 02 时间轴 ---------- */
.page-about .version-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--about-gap);
}

.page-about .version-figure,
.page-about .team-figure,
.page-about .eco__aside {
  margin: 0;
}

.page-about .version-figure img,
.page-about .team-figure img,
.page-about .eco__aside img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.page-about .version-figure img {
  aspect-ratio: 3 / 2;
}

.page-about .media-frame__caption {
  margin-top: 0.7rem;
  font-family: var(--font-num);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--sage);
}

.page-about .about-band--paper .media-frame__caption {
  color: #55685f;
}

.page-about .timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.page-about .timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(56, 242, 200, 0.08));
}

.page-about .tl-item {
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

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

.page-about .tl-dot {
  position: absolute;
  left: -1.5rem;
  top: 1.35rem;
  width: 11px;
  height: 11px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 2px solid var(--cyan);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.page-about .tl-item--current .tl-dot {
  background: var(--orange);
  border-color: var(--orange);
}

.page-about .tl-body {
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: var(--r-md);
  background: rgba(8, 21, 15, 0.62);
  border: 1px solid rgba(185, 198, 190, 0.2);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.page-about .tl-item:hover .tl-body,
.page-about .tl-item:focus-within .tl-body {
  transform: translateY(-2px);
  border-color: var(--cyan);
  background: rgba(14, 43, 34, 0.9);
}

.page-about .tl-item:hover .tl-dot,
.page-about .tl-item:focus-within .tl-dot {
  transform: scale(1.25);
}

.page-about .tl-ver {
  margin: 0 0 0.4rem;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}

.page-about .tl-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-dark);
}

.page-about .tl-text {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(232, 239, 233, 0.8);
}

.page-about .tl-note {
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(185, 198, 190, 0.28);
  font-family: var(--font-num);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--sage-2);
}

/* ---------- 03 团队 ---------- */
.page-about .team-figure img {
  aspect-ratio: 14 / 9;
}

.page-about .chapter-intro {
  margin: 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.85;
  color: #3b4c45;
}

.page-about .team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: start;
}

.page-about .team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.35rem 1.4rem;
  border-radius: var(--r-lg);
  background: #faf6ec;
  border: 1px solid var(--paper-2);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.page-about .team-card:hover,
.page-about .team-card:focus-within {
  transform: translateY(-2px);
  border-color: #0f9c7e;
  box-shadow: 0 12px 28px rgba(22, 33, 28, 0.08);
}

.page-about .team-card__count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  color: #0b6b57;
}

.page-about .team-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--on-paper);
}

.page-about .team-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: #3b4c45;
}

.page-about .team-card__out {
  margin: 0;
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-light);
  font-family: var(--font-num);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #55685f;
}

.page-about .flow-line {
  margin-top: 0.5rem;
  padding: 1.4rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--ink-2);
  color: var(--on-dark);
}

.page-about .flow-line__label {
  margin: 0 0 0.9rem;
  font-family: var(--font-num);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-2);
}

.page-about .flow-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .flow-step {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--on-dark);
}

.page-about .flow-step__no {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--amber);
}

.page-about .flow-line__note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--sage-2);
}

/* ---------- 04 合作生态 ---------- */
.page-about .eco {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--about-gap);
  align-items: start;
}

.page-about .eco__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 3vw, 1.75rem);
}

.page-about .eco__aside img {
  aspect-ratio: 5 / 6;
}

.page-about .eco-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(185, 198, 190, 0.22);
}

.page-about .eco-list__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(185, 198, 190, 0.22);
}

.page-about .eco-list__key {
  font-family: var(--font-num);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-about .eco-list__val {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--on-dark);
}

/* ---------- 05 认可 ---------- */
.page-about .honor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
}

.page-about .honor-card {
  padding: 1.4rem 1.3rem;
  border-radius: var(--r-md);
  border-left: 3px solid #0f9c7e;
  background: #faf6ec;
}

.page-about .honor-card:nth-child(2) {
  border-left-color: var(--amber);
}

.page-about .honor-card:nth-child(3) {
  border-left-color: var(--orange);
}

.page-about .honor-card__year,
.page-about .honor-card__num {
  margin: 0 0 0.6rem;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--on-paper);
}

.page-about .honor-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: #3b4c45;
}

/* ---------- 收尾 ---------- */
.page-about .about-cta {
  padding-block: clamp(2.75rem, 7vw, 5rem);
  background:
    linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 55%, #123a2c 100%);
  color: var(--on-dark);
}

.page-about .about-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}

.page-about .about-cta__text .section-title {
  max-width: 22ch;
  color: var(--on-dark);
}

.page-about .about-cta__text .lead {
  margin-top: 0.9rem;
  max-width: 52ch;
}

.page-about .about-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

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

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

  .page-about .team-card--b {
    margin-top: 2.5rem;
  }

  .page-about .team-card--c {
    margin-top: 1.15rem;
  }

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

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

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
  }

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

  .page-about .chapter-body {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 3.5rem);
  }

  .page-about .chapter-aside {
    margin-top: 2.5rem;
  }

  .page-about .version-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }

  .page-about .version-figure {
    position: sticky;
    top: 2rem;
  }

  .page-about .eco {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 3.5rem);
  }

  .page-about .about-cta__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-about .about-cta__links {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .tl-item,
  .page-about .tl-body,
  .page-about .tl-dot,
  .page-about .team-card,
  .page-about .btn {
    transition: none;
  }

  .page-about .tl-item {
    opacity: 1;
    transform: none;
  }
}
<<<END>>>

[BRIDGE]


<main id="main-content" class="page-about">
  <div class="about-hero">
    <div class="shell">
      <nav class="breadcrumbs" aria-label="页面位置">
        <ol class="breadcrumb-list">
          <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a></li>
          <li class="breadcrumb-item"><span class="breadcrumb-current">品牌档案</span></li>
        </ol>
      </nav>

      <div class="about-hero__grid">
        <div class="about-hero__lead">
          <p class="eyebrow">编辑室手记 · 华体会体育站</p>
          <h1>一支把比赛收进档案的编辑室</h1>
          <p class="lead">你临时想找一场球的画面，或者正为选题翻上一轮的数据，这里都尽量让你两步之内落到位。华体会体育站做了四年多，从只列赛程做到今天能在两支球队的视角之间来回切换，靠的是一支常驻的小团队和一群一起写稿的伙伴。</p>
          <div class="about-hero__cta">
            <a class="btn btn--primary" href="/catalog/">翻一轮数据</a>
            <a class="btn btn--ghost" href="/information/">看本周更新</a>
          </div>
        </div>

        <ul class="hero-stats">
          <li class="hero-stats__item">
            <span class="hero-stats__num is-num">328</span>
            <span class="hero-stats__label">个赛事页面案例</span>
          </li>
          <li class="hero-stats__item">
            <span class="hero-stats__num is-num">1,860</span>
            <span class="hero-stats__label">组对照数据</span>
          </li>
          <li class="hero-stats__item">
            <span class="hero-stats__num is-num">5</span>
            <span class="hero-stats__label">个联赛在册</span>
          </li>
          <li class="hero-stats__item">
            <span class="hero-stats__num is-num">18</span>
            <span class="hero-stats__label">人内容团队</span>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <section class="about-band about-band--paper" aria-labelledby="chapter-what">
    <div class="shell about-chapter">
      <div class="chapter-head">
        <span class="chapter-num is-num" aria-hidden="true">01</span>
        <div class="chapter-head__text">
          <p class="eyebrow">我们在整理什么</p>
          <h2 class="section-title" id="chapter-what">一场球的来龙去脉，都按赛季收在同一处</h2>
        </div>
      </div>

      <div class="chapter-body">
        <div class="chapter-main">
          <div class="prose">
            <p>有人打开页面只为在开赛前找到入口，有人要把同一场比赛放在两支球队的视角里比一遍。这两类需求我们都接住了：前者要的是路径短，后者要的是字段齐。所以一场比赛在我们这里不是一条新闻，而是一份带着轮次编号的记录，赛前速览、赛中数据、赛后复盘都能在同一个位置翻到。</p>
            <p>足球的记录可以往回翻到 2008-09 赛季，篮球最早的一批从 2011-12 赛季开始。英格兰超级联赛、西班牙甲级联赛、德国甲级联赛、中国男子篮球职业联赛和欧洲篮球联赛，这五个联赛的赛季区间是并排摆放的，你想横向看哪一段，直接从目录里点进去就行。</p>
            <p>做实体的朋友常常问我们，为什么不干脆做成一篇篇稿子。因为稿子会沉下去，而档案不会——你今天写的复盘，三个月后还有人要为它找一场对照的比赛。把画面给球迷，把表给做内容的人，这是这份工作最朴素的两头。</p>
          </div>
        </div>

        <aside class="chapter-aside" aria-label="资料库概况">
          <ul class="fact-list">
            <li class="fact-item">
              <span class="fact-item__key">更新节奏</span>
              <span class="fact-item__val">每周三补齐上一轮记录，赛季切换时加开一次</span>
            </li>
            <li class="fact-item">
              <span class="fact-item__key">专题分区</span>
              <span class="fact-item__val">12 个合集，按开局、中段、冲刺、休赛期四个阶段归类</span>
            </li>
            <li class="fact-item">
              <span class="fact-item__key">检索条件</span>
              <span class="fact-item__val">联赛、赛季区间、球队、日期四种条件可组合</span>
            </li>
            <li class="fact-item">
              <span class="fact-item__key">进档原则</span>
              <span class="fact-item__val">原始轮次编号随记录一同保留，方便与官方赛程对齐</span>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </section>

  <section class="about-band about-band--ink" aria-labelledby="chapter-version">
    <div class="shell about-chapter">
      <div class="chapter-head">
        <span class="chapter-num is-num" aria-hidden="true">02</span>
        <div class="chapter-head__text">
          <p class="eyebrow">四个版本</p>
          <h2 class="section-title" id="chapter-version">每一版都只解决一个让人皱眉头的问题</h2>
        </div>
      </div>

      <div class="version-layout">
        <figure class="version-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="被反复擦写的战术板局部，手绘箭头与磁吸标记，纸面留有笔迹叠压的痕迹" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">战术板上的箭头换过很多次，档案里的轮次编号一直没动过</figcaption>
        </figure>

        <ol class="timeline">
          <li class="tl-item" data-reveal>
            <span class="tl-dot" aria-hidden="true"></span>
            <div class="tl-body">
              <p class="tl-ver is-num">V1 · 2019</p>
              <h3 class="tl-title">先把比赛排出来</h3>
              <p class="tl-text">上线初期只做一件事：把当轮的赛程列清楚，让大家知道几点开球。够用，但看完就走。</p>
              <p class="tl-note">当时的麻烦：赛程散在好几个地方，凑不齐一轮</p>
            </div>
          </li>
          <li class="tl-item" data-reveal data-reveal-delay="120">
            <span class="tl-dot" aria-hidden="true"></span>
            <div class="tl-body">
              <p class="tl-ver is-num">V2 · 2021</p>
              <h3 class="tl-title">让记录跨得过年头</h3>
              <p class="tl-text">引入赛季区间记录，一场球从此有了来处。想翻三年前同一轮发生了什么，顺着区间往回走就行。</p>
              <p class="tl-note">当时的麻烦：比赛查得到，赛季连不起来</p>
            </div>
          </li>
          <li class="tl-item" data-reveal data-reveal-delay="240">
            <span class="tl-dot" aria-hidden="true"></span>
            <div class="tl-body">
              <p class="tl-ver is-num">V3 · 2022</p>
              <h3 class="tl-title">把两支球队摆在一起看</h3>
              <p class="tl-text">对照数据表上线，同一场比赛可以在两支球队的视角之间切换。做内容的人不必再开两个窗口对数字。</p>
              <p class="tl-note">当时的麻烦：想横向比较，得自己拼表格</p>
            </div>
          </li>
          <li class="tl-item tl-item--current" data-reveal data-reveal-delay="360">
            <span class="tl-dot" aria-hidden="true"></span>
            <div class="tl-body">
              <p class="tl-ver is-num">V4 · 现在</p>
              <h3 class="tl-title">把路走短</h3>
              <p class="tl-text">查询路径从四步压到两步，筛选条件从 6 项精简为 4 项并可组合。页面平均首屏 0.9 秒打开，表格分页加载，一屏最多呈现 24 项字段。</p>
              <p class="tl-note">当时的麻烦：能找到，但绕</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="about-band about-band--paper" aria-labelledby="chapter-team">
    <div class="shell about-chapter">
      <figure class="team-figure">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="俯拍的编辑桌面，笔记本、便签与打印出来的赛程表并排摊开，冷绿色光线" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">更新日当天，赛程表、便签和校对稿会同时摊在一张桌上</figcaption>
      </figure>

      <div class="chapter-head">
        <span class="chapter-num is-num" aria-hidden="true">03</span>
        <div class="chapter-head__text">
          <p class="eyebrow">团队与分工</p>
          <h2 class="section-title" id="chapter-team">十八个人，三条流水线</h2>
        </div>
      </div>

      <p class="chapter-intro">一篇资料从采集到上线要过三道手：先有人把原始记录收进来，再有人把它读成一段能看懂的叙述，最后有人把它排成你在手机上滑得动的一页。分工写在下面，节奏却是一起走的。</p>

      <div class="team-grid">
        <article class="team-card team-card--a">
          <p class="team-card__count is-num">09</p>
          <h3 class="team-card__title">数据编辑组</h3>
          <p class="team-card__text">负责赛季区间记录与字段整理。原始轮次编号进档、对阵信息落位、对照表的两侧口径对齐，都在这条线上完成。他们最常做的是把一份散乱的赛后记录变成可比较的结构。</p>
          <p class="team-card__out">代表产出 · 赛季区间记录、对照数据表</p>
        </article>
        <article class="team-card team-card--b">
          <p class="team-card__count is-num">05</p>
          <h3 class="team-card__title">赛事观察组</h3>
          <p class="team-card__text">把数据读成比赛。开局怎么起势、中段哪一段被拉开、冲刺阶段换人带来什么变化，由他们落笔成稿，并决定这一轮进哪个专题合集。</p>
          <p class="team-card__out">代表产出 · 赛事观察稿、专题合集</p>
        </article>
        <article class="team-card team-card--c">
          <p class="team-card__count is-num">04</p>
          <h3 class="team-card__title">前端与体验组</h3>
          <p class="team-card__text">管路径和阅读手感。两步到达、表格吸附首列、移动端只留必要信息，都是他们一遍遍改出来的；页面骨架与数据表组件由他们自建并全站共用。</p>
          <p class="team-card__out">代表产出 · 查询路径、数据表组件</p>
        </article>
      </div>

      <div class="flow-line" data-reveal>
        <p class="flow-line__label">一次发布怎么走完</p>
        <ol class="flow-steps">
          <li class="flow-step"><span class="flow-step__no is-num">01</span>编号进档</li>
          <li class="flow-step"><span class="flow-step__no is-num">02</span>字段成形</li>
          <li class="flow-step"><span class="flow-step__no is-num">03</span>观察成稿</li>
          <li class="flow-step"><span class="flow-step__no is-num">04</span>排版上线</li>
        </ol>
        <p class="flow-line__note">更新日当天走完，赛季切换期加开一次，慢一点也要等记录齐了再发。</p>
      </div>
    </div>
  </section>

  <section class="about-band about-band--ink" aria-labelledby="chapter-eco">
    <div class="shell about-chapter">
      <div class="eco">
        <div class="eco__body">
          <div class="chapter-head">
            <span class="chapter-num is-num" aria-hidden="true">04</span>
            <div class="chapter-head__text">
              <p class="eyebrow">合作生态</p>
              <h2 class="section-title" id="chapter-eco">球场边上的写手，也在往这里投稿</h2>
            </div>
          </div>

          <div class="prose prose--dark">
            <p>校园体育社团和区域性体育自媒体是我们最主要的写稿伙伴，目前有 32 家在长期合作，每月合起来产出约 40 篇赛事观察稿。他们看得见我们看不到的角落：一场校内联赛的布阵、一支地方球队的连败拐点，往往比大屏上的比分更早被记下来。</p>
            <p>合作方式是开放的。你带着选题来，我们的编辑给你一份赛季区间数据和几个可引用的对照维度；稿件署你的名字，字段和格式由编辑组统一整理，确保读者点开时看到的是同一套表格语言。写得好的稿子会进专题合集，跟着赛季阶段一起被翻到。</p>
          </div>

          <ul class="eco-list">
            <li class="eco-list__item">
              <span class="eco-list__key">合作规模</span>
              <span class="eco-list__val">32 家校园体育社团与区域性体育自媒体</span>
            </li>
            <li class="eco-list__item">
              <span class="eco-list__key">月度产出</span>
              <span class="eco-list__val">约 40 篇赛事观察稿</span>
            </li>
            <li class="eco-list__item">
              <span class="eco-list__key">署名方式</span>
              <span class="eco-list__val">作者署名保留，编辑组负责字段与排版的统一</span>
            </li>
          </ul>
        </div>

        <figure class="eco__aside">
          <img src="{zhanqunpic:h:1200w:1000}" width="1000" height="1200" alt="整齐排列的资料柜走廊向纵深延伸，冷绿色调，柜格上有微弱的指示灯" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">每一格都对应一个赛季区间，翻旧稿时不会迷路</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="about-band about-band--paper" aria-labelledby="chapter-honor">
    <div class="shell about-chapter">
      <div class="chapter-head">
        <span class="chapter-num is-num" aria-hidden="true">05</span>
        <div class="chapter-head__text">
          <p class="eyebrow">被记录的认可</p>
          <h2 class="section-title" id="chapter-honor">有人用，有人愿意提一句</h2>
        </div>
      </div>

      <div class="honor-grid">
        <div class="honor-card">
          <p class="honor-card__year is-num">2023</p>
          <p class="honor-card__text">获得区域性体育内容平台评选的年度数据整理案例称号。对一个主要靠表格说话的站点来说，这份认可来得挺意外。</p>
        </div>
        <div class="honor-card">
          <p class="honor-card__num is-num">46 万</p>
          <p class="honor-card__text">每月约 46 万人次到访，其中 63% 来自手机。赛前和赛后是两个最集中的时段，也是我们把移动端排在前面改的原因。</p>
        </div>
        <div class="honor-card">
          <p class="honor-card__num is-num">3 小时</p>
          <p class="honor-card__text">工作日 9:00-18:00 收到的纠错与使用咨询，平均首次回复时长 3 小时。有错就改，是我们最愿意被记住的一点。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="about-cta" aria-labelledby="chapter-next">
    <div class="shell about-cta__inner">
      <div class="about-cta__text">
        <p class="eyebrow">下一步</p>
        <h2 class="section-title" id="chapter-next">想先看看东西，还是先找人说句话</h2>
        <p class="lead">目录里放着已经做好的页面案例和可导出的对照表；动态区能看到最近的更新和专题上新。合作、投稿或纠错，走联络页面会有专人接。</p>
      </div>
      <div class="about-cta__links">
        <a class="btn btn--primary" href="/catalog/">进入赛事资料目录</a>
        <a class="btn btn--ghost" href="/information/">看资料库动态</a>
        <a class="btn btn--quiet" href="/reach-us/">联络与支持</a>
      </div>
    </div>
  </section>
</main>