.page-about {
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

.page-about figure {
  margin: 0;
}

.page-about img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-about .breadcrumb {
  padding: 20px 0 4px;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-top: 12px;
  padding-bottom: 40px;
  align-items: center;
}

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

.page-about .about-hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  font-weight: 800;
  margin: 14px 0 18px;
  color: var(--ink);
}

.page-about .about-hero__lede {
  margin: 0;
  max-width: 34em;
}

.page-about .about-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}

.page-about .about-stat {
  min-width: 110px;
}

.page-about .about-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-about .about-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.page-about .about-hero__media {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-card);
  background: var(--warm);
}

.page-about .about-hero__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- 主体布局 ---------- */
.page-about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 64px;
}

.page-about .about-index {
  padding: 14px 0 10px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hair);
  margin-bottom: 8px;
}

.page-about .about-index__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 10px;
  text-transform: uppercase;
}

.page-about .about-index__list {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-about .about-index__item {
  flex: 0 0 auto;
}

.page-about .about-index__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--hair);
  background: var(--warm);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-about .about-index__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
}

.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: var(--warm);
}

.page-about .about-index__link:hover .about-index__num,
.page-about .about-index__link:focus-visible .about-index__num {
  color: var(--warm);
}

.page-about .about-index__link[aria-current="true"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--warm);
}

.page-about .about-index__link[aria-current="true"] .about-index__num {
  color: var(--warm);
}

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

/* ---------- 章节 ---------- */
.page-about .about-sec {
  padding: 36px 0 40px;
  border-top: 1px solid var(--hair);
}

.page-about .about-sec:first-child {
  border-top: 0;
  padding-top: 24px;
}

.page-about .about-sec__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.page-about .about-sec__num {
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 0.9;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.04em;
  flex: 0 0 auto;
}

.page-about .about-sec__title {
  font-family: var(--font-display);
  font-size: clamp(21px, 5vw, 28px);
  line-height: 1.25;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}

.page-about .about-sec p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 34em;
}

.page-about .about-quote {
  margin: 24px 0 4px;
  padding-left: 18px;
  border-left: 3px solid var(--amber);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 30em;
}

/* ---------- 三条主线 ---------- */
.page-about .about-lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 20px 0 8px;
}

.page-about .about-line {
  background: var(--warm);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow-card);
  padding: 18px 18px 20px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

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

.page-about .about-line__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--red);
  margin: 0 0 8px;
}

.page-about .about-line__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--ink);
}

.page-about .about-line__body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink);
  margin: 0;
}

/* ---------- 斜切图 ---------- */
.page-about .about-break {
  margin: 26px 0 22px;
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
  background: var(--warm);
  border: 1px solid var(--hair);
}

.page-about .about-break__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-about .about-break__cap {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  padding: 12px 16px 14px;
  border-top: 1px solid var(--hair);
  background: var(--cream);
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.page-about .about-team__media {
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-card);
  background: var(--warm);
  clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
}

.page-about .about-team__img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-about .about-team__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  margin: 24px 0 4px;
}

.page-about .about-team__cell {
  background: var(--warm);
  padding: 14px 16px;
}

.page-about .about-team__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--red);
  line-height: 1.2;
}

.page-about .about-team__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- 年份刻度 ---------- */
.page-about .about-scale {
  list-style: none;
  display: flex;
  margin: 0 0 24px;
  padding: 0;
  overflow-x: auto;
  border-top: 2px solid var(--ink);
  -webkit-overflow-scrolling: touch;
}

.page-about .about-scale__item {
  flex: 1 0 auto;
  min-width: 96px;
}

.page-about .about-scale__link {
  position: relative;
  display: block;
  padding: 16px 12px 14px;
  text-decoration: none;
  color: var(--ink);
  border-right: 1px solid var(--hair);
  transition: background 180ms var(--ease);
}

.page-about .about-scale__link::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}

.page-about .about-scale__link:hover,
.page-about .about-scale__link:focus-visible {
  background: var(--warm);
}

.page-about .about-scale__year {
  display: block;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-about .about-scale__label {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- 年份节点折叠 ---------- */
.page-about .about-nodes {
  border-top: 1px solid var(--hair);
}

.page-about .about-node {
  border-bottom: 1px solid var(--hair);
}

.page-about .about-node__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 2px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.page-about .about-node__toggle:hover .about-node__title,
.page-about .about-node__toggle:focus-visible .about-node__title {
  color: var(--red);
}

.page-about .about-node__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.page-about .about-node__year {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--warm);
  background: var(--red);
  padding: 2px 7px;
  flex: 0 0 auto;
}

.page-about .about-node__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  transition: color 180ms var(--ease);
}

.page-about .about-node__panel {
  padding: 0 2px 18px;
}

.page-about .about-node__panel p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  max-width: 34em;
}

/* ---------- 合作深色区 ---------- */
.page-about .about-coop {
  background: var(--charcoal);
  color: var(--cream);
  padding: 40px 0 48px;
  position: relative;
  overflow: hidden;
}

.page-about .about-coop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(163, 22, 33, 0.22) 0%, rgba(42, 39, 36, 0) 55%),
    repeating-linear-gradient(90deg, var(--cream-14) 0 1px, transparent 1px 120px);
  pointer-events: none;
}

.page-about .about-coop__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.page-about .about-coop__title {
  color: var(--cream);
  margin: 12px 0 16px;
}

.page-about .about-coop__text .lede {
  max-width: 36em;
  margin: 0;
}

.page-about .about-coop__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 40em;
}

.page-about .about-coop__list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--cream-62);
}

.page-about .about-coop__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--signal);
}

.page-about .about-coop__cta {
  border: 1px solid var(--cream-16);
  background: rgba(20, 16, 15, 0.35);
  padding: 20px;
}

.page-about .about-coop__cta-note {
  font-size: 14px;
  line-height: 1.72;
  color: var(--cream-62);
  margin: 0 0 16px;
}

.page-about .about-coop__buttons {
  display: grid;
  gap: 10px;
}

.page-about .about-coop .btn {
  text-decoration: none;
  text-align: center;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.page-about .about-coop .btn:hover {
  transform: translateY(-2px);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-about .about-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 900px) {
  .page-about .about-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 0;
    padding-top: 24px;
    padding-bottom: 64px;
  }

  .page-about .about-hero__media {
    margin-left: -64px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  }

  .page-about .about-hero__img {
    aspect-ratio: 4 / 3;
  }

  .page-about .about-team {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: 32px;
  }

  .page-about .about-sec {
    padding: 48px 0 52px;
  }

  .page-about .about-sec__num {
    font-size: 72px;
  }

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

  .page-about .about-break {
    margin: 34px 0 28px;
  }

  .page-about .about-coop {
    padding: 64px 0 72px;
    clip-path: polygon(0 0, 100% 2.5%, 100% 100%, 0 100%);
  }

  .page-about .about-coop__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
    gap: 48px;
  }
}

@media (min-width: 980px) {
  .page-about .about-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    padding-bottom: 80px;
  }

  .page-about .about-index {
    position: sticky;
    top: calc(var(--bar-h-compact) + 24px);
    align-self: start;
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    padding: 16px 0 0;
    margin-bottom: 0;
  }

  .page-about .about-index__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding: 0;
    border-left: 1px solid var(--hair);
  }

  .page-about .about-index__item {
    flex: 0 0 auto;
  }

  .page-about .about-index__link {
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    margin-left: -1px;
    padding: 9px 12px;
    white-space: normal;
    line-height: 1.4;
  }

  .page-about .about-index__link[aria-current="true"] {
    border-left-color: var(--red-deep);
  }

  .page-about .about-house {
    border-bottom-color: var(--hair);
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-about .about-line,
  .page-about .about-coop .btn,
  .page-about .about-node__title,
  .page-about .about-index__link,
  .page-about .about-scale__link {
    transition: none;
  }

  .page-about .about-line:hover,
  .page-about .about-coop .btn:hover {
    transform: none;
  }
}


<main id="main-content" class="page-about">
  <div class="shell">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <a class="breadcrumb__link" href="/">首页</a>
      <span class="breadcrumb__sep">/</span>
      <span class="breadcrumb__current">品牌使命</span>
    </nav>
  </div>

  <header class="about-hero shell">
    <div class="about-hero__text">
      <p class="eyebrow">品牌使命 · 自 2016 年起</p>
      <h1 class="about-hero__title">把一场球的赛前与赛后，都留在能查的档案里</h1>
      <p class="lede about-hero__lede">米兰赛场陪中国区的观赛人群走完整场比赛：开哨前十分钟确认谁首发，通勤路上两分钟看完比分与关键回合，周末连看两场时知道下一场几点开球、间歇该回看哪一段。我们把这些问题拆成三条内容主线，让每一种需求都能直接落到具体的页面上。</p>
      <div class="about-hero__stats">
        <div class="about-stat">
          <span class="about-stat__num">2,600 万</span>
          <span class="about-stat__label">累计服务访客人次</span>
        </div>
        <div class="about-stat">
          <span class="about-stat__num">12 个赛季</span>
          <span class="about-stat__label">连续跟队的完整赛季</span>
        </div>
        <div class="about-stat">
          <span class="about-stat__num">72%</span>
          <span class="about-stat__label">来自移动端的访问</span>
        </div>
      </div>
    </div>
    <figure class="about-hero__media">
      <img class="about-hero__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="档案盒与打印成册的战报俯拍，盒脊贴着手写标签，奶油色纸张质感">
    </figure>
  </header>

  <div class="about-layout shell">
    <aside class="about-index" aria-label="章节索引">
      <p class="about-index__title">章节索引</p>
      <ul class="about-index__list">
        <li class="about-index__item"><a class="about-index__link" href="#sec-start" aria-current="true"><span class="about-index__num">01</span>通勤路上开始</a></li>
        <li class="about-index__item"><a class="about-index__link" href="#sec-lines"><span class="about-index__num">02</span>三条主线</a></li>
        <li class="about-index__item"><a class="about-index__link" href="#sec-team"><span class="about-index__num">03</span>谁来写、谁校对</a></li>
        <li class="about-index__item"><a class="about-index__link" href="#sec-years"><span class="about-index__num">04</span>2016 到现在</a></li>
        <li class="about-index__item"><a class="about-index__link" href="#coop"><span class="about-index__num">05</span>内容互推合作</a></li>
      </ul>
    </aside>

    <div class="about-main">
      <section class="about-sec" id="sec-start">
        <div class="about-sec__head">
          <span class="about-sec__num">01</span>
          <h2 class="about-sec__title">起点是通勤路上那几次多余的点击</h2>
        </div>
        <p>2016 年刚上线时，我们收到最多的抱怨是同一句话：想在上车后看一眼昨晚的战报，点进首页再点两层列表才见到正文，车已经到站了。移动端占我们全部访问的 72%，早上 7:00–9:00 与傍晚 17:30–19:30 两段高峰叠在一起，任何一次多余跳转都会被放大成实打实的体验损失。</p>
        <p>改版做的第一件事就是把栏目按赛前、赛后、资料三条主线重排，从首页进到一篇战报正文缩到两级。上下班路上刷战报不再绕路之后，我们才敢往更深的内容走——战术复盘、历史交锋、赛程订阅，都建立在“先让人顺利读到”这件事上。</p>
        <blockquote class="quote about-quote">做球赛内容，最贵的成本从来不是写作，是读者为了读到它而多花的那三十秒。</blockquote>
      </section>

      <section class="about-sec" id="sec-lines">
        <div class="about-sec__head">
          <span class="about-sec__num">02</span>
          <h2 class="about-sec__title">三条主线，各管一段比赛时间</h2>
        </div>
        <p>一场比赛从开哨前到赛季结束，关注点完全不同。我们把它们分给三条主线，谁也不抢谁的活。</p>
        <div class="about-lines">
          <article class="about-line">
            <p class="about-line__tag">赛前</p>
            <h3 class="about-line__title">阵容确认</h3>
            <p class="about-line__body">开赛前 90 分钟进入阵容确认模式，首页与专题页同步刷新首发与替补名单。你在球场外排队、在回家地铁上临时查人，看到的都是同一份、同一个时间点更新的名单。</p>
          </article>
          <article class="about-line">
            <p class="about-line__tag">赛后</p>
            <h3 class="about-line__title">战报归档</h3>
            <p class="about-line__body">战报按联赛、杯赛、欧战、友谊赛四类赛事分区归档，每个分区内按赛季倒序排。1,240 场赛事战报与 380 篇战术复盘覆盖近 12 个赛季，翻旧比赛不用再从头翻列表。</p>
          </article>
          <article class="about-line">
            <p class="about-line__tag">资料</p>
            <h3 class="about-line__title">资源下载</h3>
            <p class="about-line__body">赛程日历订阅文件、单场与连场两种观赛清单、手机壁纸与战术板模板，都集中在专题页第三栏的下载卡片里，随赛程调整同步更新，导入后不用再手动改时间。</p>
          </article>
        </div>

        <figure class="about-break">
          <img class="about-break__img" src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="看台局部：成排座椅、围巾与纸杯，背景虚化，光线偏暖" loading="lazy" decoding="async">
          <figcaption class="about-break__cap">周末连看两场的人，最关心的往往是两场之间那段时间怎么安排回看——连场清单就是为这个场景做的。</figcaption>
        </figure>

        <p>三条线在时间轴上首尾咬合：赛前九十分钟名单落地，终场后两小时内战报与关键回合上线，周末连场的读者则在赛程日历和连场清单里拿到下一场的开球时间与间歇回看顺序。你只需要记住自己此刻在看哪个阶段。</p>
      </section>

      <section class="about-sec" id="sec-team">
        <div class="about-sec__head">
          <span class="about-sec__num">03</span>
          <h2 class="about-sec__title">署名的人、录名单的人、复核的人</h2>
        </div>
        <div class="about-team">
          <div class="about-team__text">
            <p>专家专栏由 6 位长期跟队作者轮值撰写，统一以笔名署名，每篇都附一份历史交锋对照表，收录 1990 年以来的正式比赛记录，可以按主客场与赛事类型筛选。作者只对自己熟悉的赛事分区主笔，避免同一个观点在四类赛事里被反复套用。</p>
            <p>阵容线上是另一套节奏：官方公布后 5 分钟内由 3 人编辑小组录入，第二位编辑逐项复核名单与号码，确认无误才推到首页与专题页。比赛日实时更新，非比赛日每日两次巡检，把上一场遗留的错误在下一场之前清掉。</p>
          </div>
          <figure class="about-team__media">
            <img class="about-team__img" src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="工作台俯拍：笔记本、荧光笔、打印的阵容表与校对标记，无人物出镜" loading="lazy" decoding="async">
          </figure>
        </div>
        <div class="about-team__stats">
          <div class="about-team__cell">
            <span class="about-team__num">6 位</span>
            <span class="about-team__label">轮值跟队作者</span>
          </div>
          <div class="about-team__cell">
            <span class="about-team__num">3 人</span>
            <span class="about-team__label">阵容录入与复核小组</span>
          </div>
          <div class="about-team__cell">
            <span class="about-team__num">5 分钟</span>
            <span class="about-team__label">官方公布后的录入时限</span>
          </div>
          <div class="about-team__cell">
            <span class="about-team__num">2 次</span>
            <span class="about-team__label">非比赛日每日巡检</span>
          </div>
        </div>
        <blockquote class="quote about-quote">名字录错一个字母，读者第二天的讨论就会跑偏一整轮。所以名单永远要过两个人的眼睛。</blockquote>
      </section>

      <section class="about-sec" id="sec-years">
        <div class="about-sec__head">
          <span class="about-sec__num">04</span>
          <h2 class="about-sec__title">每一次改版，都对应一个被问烦了的问题</h2>
        </div>
        <p>下面这条刻度是我们真正动过结构的时间点。点选年份跳到对应节点，展开就能看到当时要解决的是什么。</p>

        <ol class="about-scale" aria-label="版本节点刻度">
          <li class="about-scale__item"><a class="about-scale__link" href="#node-2016"><span class="about-scale__year">2016</span><span class="about-scale__label">站点上线</span></a></li>
          <li class="about-scale__item"><a class="about-scale__link" href="#node-2018"><span class="about-scale__year">2018</span><span class="about-scale__label">赛事分区</span></a></li>
          <li class="about-scale__item"><a class="about-scale__link" href="#node-2020"><span class="about-scale__year">2020</span><span class="about-scale__label">排查成型</span></a></li>
          <li class="about-scale__item"><a class="about-scale__link" href="#node-2022"><span class="about-scale__year">2022</span><span class="about-scale__label">资源卡片</span></a></li>
          <li class="about-scale__item"><a class="about-scale__link" href="#node-2024"><span class="about-scale__year">2024</span><span class="about-scale__label">移动重排</span></a></li>
          <li class="about-scale__item"><a class="about-scale__link" href="#node-now"><span class="about-scale__year">本季</span><span class="about-scale__label">阵容模式</span></a></li>
        </ol>

        <div class="about-nodes">
          <div class="fold about-node" id="node-2016" data-fold data-open>
            <button class="fold__toggle about-node__toggle" data-fold-toggle>
              <span class="about-node__head"><span class="about-node__year">2016</span><span class="fold__title about-node__title">先解决“昨晚那场在哪”</span></span>
              <span class="fold__sign">+</span>
            </button>
            <div class="fold__panel about-node__panel" data-fold-panel>
              <p>上线第一年只有一个赛后列表和一个赛程页，比赛日实时更新，其余时间靠人盯着。这个阶段攒下的战报，成了后面所有分区的原始库存。</p>
            </div>
          </div>

          <div class="fold about-node" id="node-2018" data-fold>
            <button class="fold__toggle about-node__toggle" data-fold-toggle>
              <span class="about-node__head"><span class="about-node__year">2018</span><span class="fold__title about-node__title">四类赛事分区，赛季倒序</span></span>
              <span class="fold__sign">+</span>
            </button>
            <div class="fold__panel about-node__panel" data-fold-panel>
              <p>列表变长之后，找一场三年前的杯赛要翻很久。资料库按联赛、杯赛、欧战、友谊赛分开，每区按赛季倒序，历史交锋对照也开始随战报一起给出。</p>
            </div>
          </div>

          <div class="fold about-node" id="node-2020" data-fold>
            <button class="fold__toggle about-node__toggle" data-fold-toggle>
              <span class="about-node__head"><span class="about-node__year">2020</span><span class="fold__title about-node__title">六步排查跑通</span></span>
              <span class="fold__sign">+</span>
            </button>
            <div class="fold__panel about-node__panel" data-fold-panel>
              <p>赛前高峰页面打不开，问的人多、说法却各不相同。把网络环境、DNS、缓存、浏览器版本、脚本权限与本地时间校准固定成六步，逐条排除，多数问题在前两步就有结论。</p>
            </div>
          </div>

          <div class="fold about-node" id="node-2022" data-fold>
            <button class="fold__toggle about-node__toggle" data-fold-toggle>
              <span class="about-node__head"><span class="about-node__year">2022</span><span class="fold__title about-node__title">第三栏变成资源卡片带</span></span>
              <span class="fold__sign">+</span>
            </button>
            <div class="fold__panel about-node__panel" data-fold-panel>
              <p>赛程日历、观赛清单、壁纸和战术板模板原先散在各处，找起来像考古。改版后统一收进专题页第三栏，用一种卡片带排布，格式和用法写在卡片上，扫一眼就知道下哪个。</p>
            </div>
          </div>

          <div class="fold about-node" id="node-2024" data-fold>
            <button class="fold__toggle about-node__toggle" data-fold-toggle>
              <span class="about-node__head"><span class="about-node__year">2024</span><span class="fold__title about-node__title">移动优先，路径压到两级</span></span>
              <span class="fold__sign">+</span>
            </button>
            <div class="fold__panel about-node__panel" data-fold-panel>
              <p>通勤时段的点击路径正式压到两级：首页直接进正文。简体版为默认入口，繁体入口单独给出，两项切换不再打断阅读。</p>
            </div>
          </div>

          <div class="fold about-node" id="node-now" data-fold>
            <button class="fold__toggle about-node__toggle" data-fold-toggle>
              <span class="about-node__head"><span class="about-node__year">本季</span><span class="fold__title about-node__title">赛前九十分钟的阵容确认模式</span></span>
              <span class="fold__sign">+</span>
            </button>
            <div class="fold__panel about-node__panel" data-fold-panel>
              <p>官方名单一落地，首页与专题页同步进入确认状态，首发、替补、变更时间写在同一屏里。这是目前访问最集中的一段，也是我们内部响应优先级最高的一段。</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>

  <section class="about-coop" id="coop">
    <div class="shell about-coop__inner">
      <div class="about-coop__text">
        <p class="eyebrow eyebrow--light">05 · 内容互推</p>
        <h2 class="display display--lg about-coop__title">与四家体育媒体、两家球迷社区互推内容</h2>
        <p class="lede lede--light">我们和 4 家国内体育媒体、2 家球迷社区建立了长期内容互推合作：战报提要与赛前阵容提示卡互相分发，专题资源包联合推送。合作方式是内容互推，双方各自对自己的内容负责，署名与来源链接始终随内容一起出现。</p>
        <ul class="about-coop__list">
          <li><span class="about-coop__dot" aria-hidden="true"></span>战报提要互推：终场后两小时内的关键回合摘要，供合作方在自有渠道同步分发。</li>
          <li><span class="about-coop__dot" aria-hidden="true"></span>赛前提示卡：阵容确认后的首发与替补要点，适合在社区与媒体端快速转发。</li>
          <li><span class="about-coop__dot" aria-hidden="true"></span>专题资源包：赛程日历与连场清单的联合推送，让合作方的读者也能直接订阅。</li>
        </ul>
      </div>
      <div class="about-coop__cta">
        <p class="about-coop__cta-note">合作洽谈、内容纠错、资源包咨询，都可以从联系反馈页进来。工作日 9:00–18:00 内回复，赛前高峰优先处理阵容与加载问题。</p>
        <div class="about-coop__buttons">
          <a class="btn btn--signal btn--block" href="/feedback/">联系反馈</a>
          <a class="btn btn--ghost btn--block" href="/blog/">查看战报</a>
          <a class="btn btn--ghost btn--block" href="/services/">下载清单</a>
          <a class="btn btn--ghost btn--block" href="/faqs/">按六步排查</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-about {
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

.page-about figure {
  margin: 0;
}

.page-about img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-about .breadcrumb {
  padding: 20px 0 4px;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-top: 12px;
  padding-bottom: 40px;
  align-items: center;
}

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

.page-about .about-hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  font-weight: 800;
  margin: 14px 0 18px;
  color: var(--ink);
}

.page-about .about-hero__lede {
  margin: 0;
  max-width: 34em;
}

.page-about .about-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}

.page-about .about-stat {
  min-width: 110px;
}

.page-about .about-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-about .about-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.page-about .about-hero__media {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-card);
  background: var(--warm);
}

.page-about .about-hero__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- 主体布局 ---------- */
.page-about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 64px;
}

.page-about .about-index {
  padding: 14px 0 10px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hair);
  margin-bottom: 8px;
}

.page-about .about-index__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 10px;
  text-transform: uppercase;
}

.page-about .about-index__list {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-about .about-index__item {
  flex: 0 0 auto;
}

.page-about .about-index__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--hair);
  background: var(--warm);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-about .about-index__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
}

.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: var(--warm);
}

.page-about .about-index__link:hover .about-index__num,
.page-about .about-index__link:focus-visible .about-index__num {
  color: var(--warm);
}

.page-about .about-index__link[aria-current="true"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--warm);
}

.page-about .about-index__link[aria-current="true"] .about-index__num {
  color: var(--warm);
}

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

/* ---------- 章节 ---------- */
.page-about .about-sec {
  padding: 36px 0 40px;
  border-top: 1px solid var(--hair);
}

.page-about .about-sec:first-child {
  border-top: 0;
  padding-top: 24px;
}

.page-about .about-sec__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.page-about .about-sec__num {
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 0.9;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.04em;
  flex: 0 0 auto;
}

.page-about .about-sec__title {
  font-family: var(--font-display);
  font-size: clamp(21px, 5vw, 28px);
  line-height: 1.25;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}

.page-about .about-sec p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 34em;
}

.page-about .about-quote {
  margin: 24px 0 4px;
  padding-left: 18px;
  border-left: 3px solid var(--amber);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 30em;
}

/* ---------- 三条主线 ---------- */
.page-about .about-lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 20px 0 8px;
}

.page-about .about-line {
  background: var(--warm);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow-card);
  padding: 18px 18px 20px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

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

.page-about .about-line__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--red);
  margin: 0 0 8px;
}

.page-about .about-line__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--ink);
}

.page-about .about-line__body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink);
  margin: 0;
}

/* ---------- 斜切图 ---------- */
.page-about .about-break {
  margin: 26px 0 22px;
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
  background: var(--warm);
  border: 1px solid var(--hair);
}

.page-about .about-break__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-about .about-break__cap {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  padding: 12px 16px 14px;
  border-top: 1px solid var(--hair);
  background: var(--cream);
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.page-about .about-team__media {
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-card);
  background: var(--warm);
  clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
}

.page-about .about-team__img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-about .about-team__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  margin: 24px 0 4px;
}

.page-about .about-team__cell {
  background: var(--warm);
  padding: 14px 16px;
}

.page-about .about-team__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--red);
  line-height: 1.2;
}

.page-about .about-team__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- 年份刻度 ---------- */
.page-about .about-scale {
  list-style: none;
  display: flex;
  margin: 0 0 24px;
  padding: 0;
  overflow-x: auto;
  border-top: 2px solid var(--ink);
  -webkit-overflow-scrolling: touch;
}

.page-about .about-scale__item {
  flex: 1 0 auto;
  min-width: 96px;
}

.page-about .about-scale__link {
  position: relative;
  display: block;
  padding: 16px 12px 14px;
  text-decoration: none;
  color: var(--ink);
  border-right: 1px solid var(--hair);
  transition: background 180ms var(--ease);
}

.page-about .about-scale__link::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}

.page-about .about-scale__link:hover,
.page-about .about-scale__link:focus-visible {
  background: var(--warm);
}

.page-about .about-scale__year {
  display: block;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-about .about-scale__label {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- 年份节点折叠 ---------- */
.page-about .about-nodes {
  border-top: 1px solid var(--hair);
}

.page-about .about-node {
  border-bottom: 1px solid var(--hair);
}

.page-about .about-node__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 2px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.page-about .about-node__toggle:hover .about-node__title,
.page-about .about-node__toggle:focus-visible .about-node__title {
  color: var(--red);
}

.page-about .about-node__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.page-about .about-node__year {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--warm);
  background: var(--red);
  padding: 2px 7px;
  flex: 0 0 auto;
}

.page-about .about-node__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  transition: color 180ms var(--ease);
}

.page-about .about-node__panel {
  padding: 0 2px 18px;
}

.page-about .about-node__panel p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  max-width: 34em;
}

/* ---------- 合作深色区 ---------- */
.page-about .about-coop {
  background: var(--charcoal);
  color: var(--cream);
  padding: 40px 0 48px;
  position: relative;
  overflow: hidden;
}

.page-about .about-coop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(163, 22, 33, 0.22) 0%, rgba(42, 39, 36, 0) 55%),
    repeating-linear-gradient(90deg, var(--cream-14) 0 1px, transparent 1px 120px);
  pointer-events: none;
}

.page-about .about-coop__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.page-about .about-coop__title {
  color: var(--cream);
  margin: 12px 0 16px;
}

.page-about .about-coop__text .lede {
  max-width: 36em;
  margin: 0;
}

.page-about .about-coop__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 40em;
}

.page-about .about-coop__list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--cream-62);
}

.page-about .about-coop__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--signal);
}

.page-about .about-coop__cta {
  border: 1px solid var(--cream-16);
  background: rgba(20, 16, 15, 0.35);
  padding: 20px;
}

.page-about .about-coop__cta-note {
  font-size: 14px;
  line-height: 1.72;
  color: var(--cream-62);
  margin: 0 0 16px;
}

.page-about .about-coop__buttons {
  display: grid;
  gap: 10px;
}

.page-about .about-coop .btn {
  text-decoration: none;
  text-align: center;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.page-about .about-coop .btn:hover {
  transform: translateY(-2px);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-about .about-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 900px) {
  .page-about .about-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 0;
    padding-top: 24px;
    padding-bottom: 64px;
  }

  .page-about .about-hero__media {
    margin-left: -64px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  }

  .page-about .about-hero__img {
    aspect-ratio: 4 / 3;
  }

  .page-about .about-team {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: 32px;
  }

  .page-about .about-sec {
    padding: 48px 0 52px;
  }

  .page-about .about-sec__num {
    font-size: 72px;
  }

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

  .page-about .about-break {
    margin: 34px 0 28px;
  }

  .page-about .about-coop {
    padding: 64px 0 72px;
    clip-path: polygon(0 0, 100% 2.5%, 100% 100%, 0 100%);
  }

  .page-about .about-coop__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
    gap: 48px;
  }
}

@media (min-width: 980px) {
  .page-about .about-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    padding-bottom: 80px;
  }

  .page-about .about-index {
    position: sticky;
    top: calc(var(--bar-h-compact) + 24px);
    align-self: start;
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    padding: 16px 0 0;
    margin-bottom: 0;
  }

  .page-about .about-index__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding: 0;
    border-left: 1px solid var(--hair);
  }

  .page-about .about-index__item {
    flex: 0 0 auto;
  }

  .page-about .about-index__link {
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    margin-left: -1px;
    padding: 9px 12px;
    white-space: normal;
    line-height: 1.4;
  }

  .page-about .about-index__link[aria-current="true"] {
    border-left-color: var(--red-deep);
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-about .about-line,
  .page-about .about-coop .btn,
  .page-about .about-node__title,
  .page-about .about-index__link,
  .page-about .about-scale__link {
    transition: none;
  }

  .page-about .about-line:hover,
  .page-about .about-coop .btn:hover {
    transform: none;
  }
}