.page-about {
  --about-pad: 22px;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--f-body);
}

.page-about .about-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}
.page-about .about-crumb a {
  color: var(--lake);
  text-decoration: none;
}
.page-about .about-crumb a:hover,
.page-about .about-crumb a:focus-visible {
  text-decoration: underline;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 0 40px;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
}
.page-about .about-hero__grid {
  display: grid;
  gap: 26px;
}
.page-about .about-hero h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(30px, 7.4vw, 62px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--pine);
  margin: 12px 0 16px;
}
.page-about .about-hero .lede {
  max-width: 34em;
  margin: 0;
  color: var(--ink);
}

.page-about .anchor-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.page-about .anchor-jump a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--pine);
  color: var(--pine);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page-about .anchor-jump a:hover,
.page-about .anchor-jump a:focus-visible {
  background: var(--pine);
  color: var(--paper);
}

.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .about-fact {
  background: var(--paper);
  padding: 13px 14px 15px;
}
.page-about .about-fact__k {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--lake);
}
.page-about .about-fact__v {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--pine);
}
.page-about .about-fact__u {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
  margin-left: 4px;
  color: var(--ink);
}

/* ---------- 通用区块头 ---------- */
.page-about .about-sec {
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
.page-about .sec-head {
  max-width: 720px;
  margin-bottom: 26px;
}
.page-about .sec-head__title {
  font-family: var(--f-display);
  font-size: clamp(23px, 4.6vw, 38px);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--pine);
  margin: 10px 0 0;
}
.page-about .sec-head__lead {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 36em;
}

/* ---------- 发展脉络 ---------- */
.page-about .chronicle__figure {
  margin: 0 0 22px;
}
.page-about .chronicle__rule {
  margin: 0 0 26px;
  height: 64px;
  overflow: hidden;
  opacity: 0.55;
}
.page-about .chronicle__rule img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-about .chronicle__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--line);
}
.page-about .cnode {
  position: relative;
  padding-bottom: 26px;
}
.page-about .cnode:last-child {
  padding-bottom: 0;
}
.page-about .cnode__rail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.page-about .cnode__mark {
  width: 11px;
  height: 11px;
  background: var(--orange);
  flex: none;
}
.page-about .cnode__year {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
}
.page-about .cnode__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 8px;
}
.page-about .cnode__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  max-width: 38em;
}

/* ---------- 团队 ---------- */
.page-about .team__layout {
  display: grid;
  gap: 26px;
}
.page-about .team__matrix {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .role {
  background: var(--paper);
  padding: 16px 16px 18px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-about .role:hover,
.page-about .role:focus-within {
  background: var(--moss);
  transform: translateY(-2px);
}
.page-about .role__no {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--lake);
}
.page-about .role__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--pine);
  margin: 6px 0 8px;
}
.page-about .role__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
.page-about .team__figure {
  margin: 0;
  aspect-ratio: 3 / 4;
}

/* ---------- 流程 ---------- */
.page-about .flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.page-about .fstep {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line);
}
.page-about .fstep__no {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 10px;
}
.page-about .fstep__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 8px;
}
.page-about .fstep__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
}

/* ---------- 协作网络 ---------- */
.page-about .network__grid {
  display: grid;
  gap: 16px;
}
.page-about .net-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 20px 18px 22px;
}
.page-about .net-card--club {
  border-top: 4px solid var(--teal);
}
.page-about .net-card--school {
  border-top: 4px solid var(--lake);
}
.page-about .net-card__num {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--pine);
}
.page-about .net-card__title {
  display: inline;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pine);
  margin: 0 0 0 6px;
}
.page-about .net-card p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
}
.page-about .net-note {
  background: var(--clay);
  border: 1px solid var(--line);
  padding: 20px 18px 22px;
}
.page-about .net-note__title {
  margin: 0 0 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.page-about .net-note__text {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink);
}
.page-about .net-note__link {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.page-about .net-note__link:hover,
.page-about .net-note__link:focus-visible {
  color: var(--pine);
}

/* ---------- 编辑立场 ---------- */
.page-about .practice__panel {
  padding: 28px 20px;
}
.page-about .practice__panel h2 {
  font-family: var(--f-display);
  font-size: clamp(23px, 4.2vw, 34px);
  line-height: 1.2;
  color: var(--paper);
  margin: 8px 0 0;
}
.page-about .practice__lede {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--moss);
}
.page-about .practice__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.page-about .practice__item {
  padding: 16px 0;
  border-top: 1px solid rgba(251, 249, 245, 0.2);
}
.page-about .practice__k {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--paper);
  margin-bottom: 6px;
}
.page-about .practice__item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--moss);
}

/* ---------- 收尾 ---------- */
.page-about .about-cta {
  padding: 38px 0 52px;
  border-top: 1px solid var(--line);
}
.page-about .about-cta__inner {
  display: grid;
  gap: 22px;
}
.page-about .about-cta h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 4.2vw, 34px);
  line-height: 1.22;
  color: var(--pine);
  margin: 0 0 12px;
}
.page-about .about-cta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  max-width: 34em;
}
.page-about .about-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 700px) {
  .page-about .about-hero {
    padding: 30px 0 52px;
  }
  .page-about .about-sec {
    padding: 56px 0;
  }
  .page-about .team__matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-about .network__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-about .net-note {
    grid-column: 1 / -1;
  }
  .page-about .chronicle__rule {
    height: 84px;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    background: var(--paper);
    clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
  }
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    gap: 44px;
    align-items: end;
  }
  .page-about .about-hero__side {
    padding-bottom: 4px;
  }
  .page-about .chronicle__list {
    padding-left: 0;
    border-left: 0;
  }
  .page-about .cnode {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 34px;
    padding-bottom: 34px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
  }
  .page-about .cnode:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .page-about .cnode__rail {
    position: sticky;
    top: 96px;
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
  }
  .page-about .cnode__year {
    font-size: 15px;
  }
  .page-about .team__layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.82fr);
    gap: 34px;
    align-items: start;
  }
  .page-about .team__figure {
    position: sticky;
    top: 96px;
  }
  .page-about .flow__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .page-about .fstep {
    position: relative;
    padding: 24px 18px 26px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .page-about .fstep:last-child {
    border-right: 0;
  }
  .page-about .fstep::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--teal);
  }
  .page-about .fstep:first-child::before {
    background: var(--orange);
  }
  .page-about .practice__panel {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: 44px;
    align-items: start;
    padding: 46px 40px;
  }
  .page-about .practice__list {
    margin-top: 0;
  }
  .page-about .practice__item:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .page-about .about-cta__inner {
    grid-template-columns: minmax(0, 1.3fr) auto;
    align-items: end;
  }
  .page-about .about-cta__links {
    justify-content: flex-end;
  }
  .page-about .network__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .net-note {
    grid-column: auto;
  }
}

<main id="main-content" class="page-about">
  <section class="about-hero">
    <div class="wrap about-hero__inner">
      <nav class="breadcrumb about-crumb" aria-label="面包屑">
        <a href="/">首页</a>
        <span aria-hidden="true">/</span>
        <span aria-current="page">我们是谁</span>
      </nav>

      <div class="about-hero__grid">
        <div class="about-hero__main">
          <p class="section-label">西宁 · 联赛编辑组</p>
          <h1>一支在西宁写联赛的编辑队伍</h1>
          <p class="lede">乐竞体育 2018 年在西宁上线第一版，到今天已经连续服务 7 个完整赛季。8 名编辑每周跟着联赛走，把每一轮的赛程、阵容和比分整理进资料库，让你在开赛前十分钟打开手机就能对上号。</p>

          <div class="anchor-jump">
            <a href="#chronicle">跳到年表</a>
            <a href="#team">跳到团队</a>
            <a href="#network">跳到协作</a>
            <a href="#practice">跳到做法</a>
          </div>
        </div>

        <aside class="about-hero__side" aria-label="运营概览">
          <div class="about-facts">
            <div class="about-fact">
              <span class="about-fact__k">上线年份</span>
              <span class="about-fact__v data-num">2018</span>
            </div>
            <div class="about-fact">
              <span class="about-fact__k">完整赛季</span>
              <span class="about-fact__v data-num">7<span class="about-fact__u">个</span></span>
            </div>
            <div class="about-fact">
              <span class="about-fact__k">归档轮次</span>
              <span class="about-fact__v data-num">266<span class="about-fact__u">轮</span></span>
            </div>
            <div class="about-fact">
              <span class="about-fact__k">编辑团队</span>
              <span class="about-fact__v data-num">8<span class="about-fact__u">人</span></span>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section id="chronicle" class="about-sec chronicle">
    <div class="wrap">
      <div class="sec-head">
        <p class="section-label">发展脉络</p>
        <h2 class="sec-head__title">从一张赛程表，做到七个赛季的轮次资料库</h2>
        <p class="sec-head__lead">起点很简单：一批青海的球友想知道这周末谁在哪儿踢。我们把这件事做了七年，做成了现在这套按轮次走的导航。</p>
      </div>

      <figure class="media media--16x9 chronicle__figure">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="高原城市天际线与远处山脊的轮廓，画面留出大片天空" loading="lazy" decoding="async">
        <figcaption class="media__caption">西宁是我们所有编辑工作的起点，联赛的赛程从这里铺开。</figcaption>
      </figure>

      <figure class="chronicle__rule">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="由细线与分区色块构成的横向赛季刻度示意图形" loading="lazy" decoding="async">
      </figure>

      <ol class="chronicle__list">
        <li class="cnode">
          <div class="cnode__rail">
            <span class="cnode__mark" aria-hidden="true"></span>
            <span class="cnode__year data-num">2018</span>
          </div>
          <div class="cnode__body">
            <h3 class="cnode__title">起步：先让每轮比分有处可放</h3>
            <p>第一版只做一件事——把当轮赛程排清楚。表格是手工填的，比赛一结束，编辑就挨个把比分敲进去。慢，但每一条都是自己写下的。</p>
          </div>
        </li>

        <li class="cnode">
          <div class="cnode__rail">
            <span class="cnode__mark" aria-hidden="true"></span>
            <span class="cnode__year data-num">第 2 赛季</span>
          </div>
          <div class="cnode__body">
            <h3 class="cnode__title">按轮次存下来，翻得到过去</h3>
            <p>比分开始按轮次归档。想回看第三轮哪支队伍客场拿走三分，顺着轮次翻过去就是，不用再从头翻聊天记录。</p>
          </div>
        </li>

        <li class="cnode">
          <div class="cnode__rail">
            <span class="cnode__mark" aria-hidden="true"></span>
            <span class="cnode__year data-num">第 3 赛季</span>
          </div>
          <div class="cnode__body">
            <h3 class="cnode__title">专栏开更，每周二见</h3>
            <p>射手榜前 20 与进失球分布区间固定在周二更新。这一档内容从开更起没有断过，累计已经发出 116 期。</p>
          </div>
        </li>

        <li class="cnode">
          <div class="cnode__rail">
            <span class="cnode__mark" aria-hidden="true"></span>
            <span class="cnode__year data-num">第 5 赛季</span>
          </div>
          <div class="cnode__body">
            <h3 class="cnode__title">手机上先用得起来</h3>
            <p>小屏对照卡片迭代到第 5 版，最低适配 320px 宽度，首屏渲染控制在 1.5 秒内。通勤路上单手握手机，也能看清阵容和近况。</p>
          </div>
        </li>

        <li class="cnode">
          <div class="cnode__rail">
            <span class="cnode__mark" aria-hidden="true"></span>
            <span class="cnode__year data-num">第 7 赛季</span>
          </div>
          <div class="cnode__body">
            <h3 class="cnode__title">现在：一趟走完赛前到赛后</h3>
            <p>本赛季 38 轮赛程全部上线，7 个赛季共 266 轮资料留在库里。首页进导航，服务页看对照，资讯页读专栏，三条路都通。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section id="team" class="about-sec team">
    <div class="wrap">
      <div class="sec-head">
        <p class="section-label">团队分工</p>
        <h2 class="sec-head__title">一轮比赛，八个人各守一段</h2>
        <p class="sec-head__lead">8 名编辑里 3 名常驻西宁。分工按比赛的时间轴切，不是按板块切——所以一轮球从赛前到赛后，每一环都有人盯着。</p>
      </div>

      <div class="team__layout">
        <div class="team__matrix">
          <article class="role">
            <span class="role__no data-num">01</span>
            <h3 class="role__name">轮次编辑</h3>
            <p class="role__desc">排当轮赛程，把开赛时间、场地和对阵关系对齐，赛前一天让整轮安排先落地。</p>
          </article>
          <article class="role">
            <span class="role__no data-num">02</span>
            <h3 class="role__name">阵容确认</h3>
            <p class="role__desc">开赛前 10 分钟做最后一遍名单比对，完成后在卡片上标出时间点。</p>
          </article>
          <article class="role">
            <span class="role__no data-num">03</span>
            <h3 class="role__name">现场记录</h3>
            <p class="role__desc">跟着比赛走，比分每变一次记一次，关键节点一并留下，赛后 30 分钟内录入。</p>
          </article>
          <article class="role">
            <span class="role__no data-num">04</span>
            <h3 class="role__name">区间分析</h3>
            <p class="role__desc">算进失球区间的分布结构，把每一轮的走势写进赛后数据复盘。</p>
          </article>
          <article class="role">
            <span class="role__no data-num">05</span>
            <h3 class="role__name">专栏主笔</h3>
            <p class="role__desc">每周二出射手榜与进失球区间，负责专题的选题与长文组织。</p>
          </article>
          <article class="role">
            <span class="role__no data-num">06</span>
            <h3 class="role__name">移动端产品</h3>
            <p class="role__desc">管小屏对照卡片的排布与加载，横屏两栏并排、竖屏上下分布都由这条线定。</p>
          </article>
          <article class="role">
            <span class="role__no data-num">07</span>
            <h3 class="role__name">资料归档</h3>
            <p class="role__desc">维护按轮次、按队伍、按赛季三套入口，也管赛季资料包的整理与导出。</p>
          </article>
          <article class="role">
            <span class="role__no data-num">08</span>
            <h3 class="role__name">协作联络</h3>
            <p class="role__desc">对接本地球队与校园社团，收线索、收反馈，也把读者的问题带回编辑会。</p>
          </article>
        </div>

        <figure class="media team__figure">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="桌面上摊开的记录表、刻度尺与标注便签俯拍特写，画面不含人物面孔" loading="lazy" decoding="async">
          <figcaption class="media__caption">编辑桌上的纸质记录表，赛后要一条条录进库里。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section id="flow" class="about-sec flow">
    <div class="wrap">
      <div class="sec-head">
        <p class="section-label">一轮怎么走</p>
        <h2 class="sec-head__title">赛前一天到第二天，五步走完一轮</h2>
      </div>

      <ol class="flow__steps">
        <li class="fstep">
          <span class="fstep__no data-num">01</span>
          <h3 class="fstep__title">赛前一天：名单先收齐</h3>
          <p class="fstep__desc">从协作球队和社团那边拿到当轮可能的出场名单，先排进去，缺人的位置单独标出来。</p>
        </li>
        <li class="fstep">
          <span class="fstep__no data-num">02</span>
          <h3 class="fstep__title">赛前 10 分钟：最后一遍确认</h3>
          <p class="fstep__desc">对照最新名单再比一次，确认完把时间写进卡片。你看到的阵容，就是那一刻的样子。</p>
        </li>
        <li class="fstep">
          <span class="fstep__no data-num">03</span>
          <h3 class="fstep__title">赛中：跟着比分走</h3>
          <p class="fstep__desc">比分每变一次记一次，红黄牌与换人节点一并留下，方便赛后回看整场节奏。</p>
        </li>
        <li class="fstep">
          <span class="fstep__no data-num">04</span>
          <h3 class="fstep__title">赛后 30 分钟：数据落地</h3>
          <p class="fstep__desc">终场后半小时内，比分、进失球区间和积分变动一起更新，手机上刷新就能看到。</p>
        </li>
        <li class="fstep">
          <span class="fstep__no data-num">05</span>
          <h3 class="fstep__title">第二天：归档与复盘</h3>
          <p class="fstep__desc">整轮资料归进对应轮次，再发一篇赛后数据复盘。前瞻加复盘，一轮的记录就完整了。</p>
        </li>
      </ol>
    </div>
  </section>

  <section id="network" class="about-sec network">
    <div class="wrap">
      <div class="sec-head">
        <p class="section-label">本地协作网络</p>
        <h2 class="sec-head__title">和本地球队、校园社团一起把比赛记下来</h2>
        <p class="sec-head__lead">联赛的细节藏在场边。光靠编辑坐在西宁写不出来，所以我们把协作方拉进了同一条线。</p>
      </div>

      <div class="network__grid">
        <article class="net-card net-card--club">
          <span class="net-card__num data-num">12</span>
          <h3 class="net-card__title">家本地业余俱乐部</h3>
          <p>提供出场名单、场地变动与临场调整的信息。我们把这些整理成当轮可查的阵容，也把读者的问题带回去。</p>
        </article>
        <article class="net-card net-card--school">
          <span class="net-card__num data-num">4</span>
          <h3 class="net-card__title">所高校体育社团</h3>
          <p>覆盖青海及周边高校球队，比赛日供稿，也帮我们试用小屏卡片的排布，横屏竖屏都在真实场景里跑过。</p>
        </article>
        <div class="net-note">
          <p class="net-note__title">你能带来什么</p>
          <p class="net-note__text">如果你在本地俱乐部或校园球队里做事，手里有比赛名单和赛程变动，欢迎把这些发给编辑组。被记录得更完整的那场球，最后受益的是所有看球的人。</p>
          <a class="net-note__link" href="/contact-us/">把线索发给我们</a>
        </div>
      </div>
    </div>
  </section>

  <section id="practice" class="about-sec practice">
    <div class="wrap">
      <div class="panel panel--dark practice__panel">
        <div class="practice__intro">
          <p class="section-label">编辑立场</p>
          <h2>三条一直在做的事</h2>
          <p class="practice__lede">七年下来，队伍换过人，工具换过几轮，这三条没有动过。</p>
        </div>
        <ol class="practice__list">
          <li class="practice__item">
            <span class="practice__k">一场球归进它所属的那一轮</span>
            <p>赛季往后走，新内容不断压上来，旧的一轮也不会被冲掉。翻回去，它还在原位。</p>
          </li>
          <li class="practice__item">
            <span class="practice__k">每条数据带上更新到几点几分</span>
            <p>你一眼能分清这是赛前的阵容还是终场后的比分，不用猜哪个数字更新鲜。</p>
          </li>
          <li class="practice__item">
            <span class="practice__k">阵容临时变了，旧版本留着</span>
            <p>改动前后都存着，赛后再看那处调整，能对上是哪一步换了人。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="about-cta">
    <div class="wrap about-cta__inner">
      <div class="about-cta__text">
        <h2>想让自己那场球被看得更清楚</h2>
        <p>不管是场上跑的，还是场边看的，知道该看哪一轮、谁的阵容变了，这件事就顺了。从这里往下走，你需要的入口都在。</p>
      </div>
      <div class="about-cta__links">
        <a class="btn btn--primary" href="/services/">看服务与工具</a>
        <a class="btn btn--ghost" href="/information/">翻资讯专栏</a>
        <a class="btn btn--ghost" href="/contact-us/">联系我们</a>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-pad: 22px;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--f-body);
}

.page-about .about-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}
.page-about .about-crumb a {
  color: var(--lake);
  text-decoration: none;
}
.page-about .about-crumb a:hover,
.page-about .about-crumb a:focus-visible {
  text-decoration: underline;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 0 40px;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
}
.page-about .about-hero__grid {
  display: grid;
  gap: 26px;
}
.page-about .about-hero h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(30px, 7.4vw, 62px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--pine);
  margin: 12px 0 16px;
}
.page-about .about-hero .lede {
  max-width: 34em;
  margin: 0;
  color: var(--ink);
}

.page-about .anchor-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.page-about .anchor-jump a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--pine);
  color: var(--pine);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page-about .anchor-jump a:hover,
.page-about .anchor-jump a:focus-visible {
  background: var(--pine);
  color: var(--paper);
}

.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .about-fact {
  background: var(--paper);
  padding: 13px 14px 15px;
}
.page-about .about-fact__k {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--lake);
}
.page-about .about-fact__v {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--pine);
}
.page-about .about-fact__u {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
  margin-left: 4px;
  color: var(--ink);
}

/* ---------- 通用区块头 ---------- */
.page-about .about-sec {
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
.page-about .sec-head {
  max-width: 720px;
  margin-bottom: 26px;
}
.page-about .sec-head__title {
  font-family: var(--f-display);
  font-size: clamp(23px, 4.6vw, 38px);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--pine);
  margin: 10px 0 0;
}
.page-about .sec-head__lead {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 36em;
}

/* ---------- 发展脉络 ---------- */
.page-about .chronicle__figure {
  margin: 0 0 22px;
}
.page-about .chronicle__rule {
  margin: 0 0 26px;
  height: 64px;
  overflow: hidden;
  opacity: 0.55;
}
.page-about .chronicle__rule img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-about .chronicle__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--line);
}
.page-about .cnode {
  position: relative;
  padding-bottom: 26px;
}
.page-about .cnode:last-child {
  padding-bottom: 0;
}
.page-about .cnode__rail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.page-about .cnode__mark {
  width: 11px;
  height: 11px;
  background: var(--orange);
  flex: none;
}
.page-about .cnode__year {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
}
.page-about .cnode__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 8px;
}
.page-about .cnode__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  max-width: 38em;
}

/* ---------- 团队 ---------- */
.page-about .team__layout {
  display: grid;
  gap: 26px;
}
.page-about .team__matrix {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .role {
  background: var(--paper);
  padding: 16px 16px 18px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-about .role:hover,
.page-about .role:focus-within {
  background: var(--moss);
  transform: translateY(-2px);
}
.page-about .role__no {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--lake);
}
.page-about .role__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--pine);
  margin: 6px 0 8px;
}
.page-about .role__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
.page-about .team__figure {
  margin: 0;
  aspect-ratio: 3 / 4;
}

/* ---------- 流程 ---------- */
.page-about .flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.page-about .fstep {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line);
}
.page-about .fstep__no {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 10px;
}
.page-about .fstep__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 8px;
}
.page-about .fstep__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
}

/* ---------- 协作网络 ---------- */
.page-about .network__grid {
  display: grid;
  gap: 16px;
}
.page-about .net-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 20px 18px 22px;
}
.page-about .net-card--club {
  border-top: 4px solid var(--teal);
}
.page-about .net-card--school {
  border-top: 4px solid var(--lake);
}
.page-about .net-card__num {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--pine);
}
.page-about .net-card__title {
  display: inline;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pine);
  margin: 0 0 0 6px;
}
.page-about .net-card p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
}
.page-about .net-note {
  background: var(--clay);
  border: 1px solid var(--line);
  padding: 20px 18px 22px;
}
.page-about .net-note__title {
  margin: 0 0 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.page-about .net-note__text {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink);
}
.page-about .net-note__link {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.page-about .net-note__link:hover,
.page-about .net-note__link:focus-visible {
  color: var(--pine);
}

/* ---------- 编辑立场 ---------- */
.page-about .practice__panel {
  padding: 28px 20px;
}
.page-about .practice__panel h2 {
  font-family: var(--f-display);
  font-size: clamp(23px, 4.2vw, 34px);
  line-height: 1.2;
  color: var(--paper);
  margin: 8px 0 0;
}
.page-about .practice__lede {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--moss);
}
.page-about .practice__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.page-about .practice__item {
  padding: 16px 0;
  border-top: 1px solid rgba(251, 249, 245, 0.2);
}
.page-about .practice__k {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--paper);
  margin-bottom: 6px;
}
.page-about .practice__item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--moss);
}

/* ---------- 收尾 ---------- */
.page-about .about-cta {
  padding: 38px 0 52px;
  border-top: 1px solid var(--line);
}
.page-about .about-cta__inner {
  display: grid;
  gap: 22px;
}
.page-about .about-cta h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 4.2vw, 34px);
  line-height: 1.22;
  color: var(--pine);
  margin: 0 0 12px;
}
.page-about .about-cta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  max-width: 34em;
}
.page-about .about-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 700px) {
  .page-about .about-hero {
    padding: 30px 0 52px;
  }
  .page-about .about-sec {
    padding: 56px 0;
  }
  .page-about .team__matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-about .network__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-about .net-note {
    grid-column: 1 / -1;
  }
  .page-about .chronicle__rule {
    height: 84px;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    background: var(--paper);
    clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
  }
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    gap: 44px;
    align-items: end;
  }
  .page-about .about-hero__side {
    padding-bottom: 4px;
  }
  .page-about .chronicle__list {
    padding-left: 0;
    border-left: 0;
  }
  .page-about .cnode {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 34px;
    padding-bottom: 34px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
  }
  .page-about .cnode:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .page-about .cnode__rail {
    position: sticky;
    top: 96px;
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
  }
  .page-about .cnode__year {
    font-size: 15px;
  }
  .page-about .team__layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.82fr);
    gap: 34px;
    align-items: start;
  }
  .page-about .team__figure {
    position: sticky;
    top: 96px;
  }
  .page-about .flow__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .page-about .fstep {
    position: relative;
    padding: 24px 18px 26px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .page-about .fstep:last-child {
    border-right: 0;
  }
  .page-about .fstep::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--teal);
  }
  .page-about .fstep:first-child::before {
    background: var(--orange);
  }
  .page-about .practice__panel {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: 44px;
    align-items: start;
    padding: 46px 40px;
  }
  .page-about .practice__list {
    margin-top: 0;
  }
  .page-about .practice__item:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .page-about .about-cta__inner {
    grid-template-columns: minmax(0, 1.3fr) auto;
    align-items: end;
  }
  .page-about .about-cta__links {
    justify-content: flex-end;
  }
  .page-about .network__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .net-note {
    grid-column: auto;
  }
}