.page-about {
  --about-rail: 176px;
  --about-pad: clamp(28px, 5vw, 64px);
  color: var(--paper);
}

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

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding-block: clamp(24px, 4vw, 56px) clamp(28px, 4vw, 48px);
}

.page-about .about-hero__inner {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.page-about .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
  margin-bottom: 18px;
}

.page-about .crumbs a {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--whistle);
}

.page-about .crumbs__sep {
  color: var(--line);
}

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

.page-about .about-hero__title {
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 6.2vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.page-about .about-hero__lede {
  margin: 0;
  max-width: 38em;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.85;
  color: rgba(244, 235, 221, 0.82);
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-about .hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.page-about .hero-stats > div {
  border-left: 2px solid var(--brick);
  padding-left: 12px;
}

.page-about .stat__num {
  display: block;
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 700;
  color: var(--paper);
  letter-spacing: 0.04em;
}

.page-about .stat__label {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate);
  margin-bottom: 4px;
}

.page-about .about-hero__media {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--stand-800);
  margin: 0;
}

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

.page-about .about-hero__media .media__img {
  aspect-ratio: 3 / 2;
}

.page-about .media__caption {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--slate);
  border-top: 1px solid var(--line-soft);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-doc {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.page-about .doc-rail__title {
  display: none;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin: 0 0 14px;
}

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

.page-about .doc-rail__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
  border-radius: var(--radius-capsule);
  border: 1px solid var(--line);
  background: rgba(44, 84, 72, 0.4);
  color: var(--paper);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-about .doc-rail__link .mono {
  font-size: 11px;
  color: var(--whistle);
  letter-spacing: 0.08em;
}

.page-about .doc-rail__link:hover,
.page-about .doc-rail__link:focus-visible {
  background: var(--stand-700);
  border-color: var(--whistle);
  transform: translateY(-1px);
}

.page-about .doc-body {
  min-width: 0;
}

.page-about .doc-sec {
  padding-top: clamp(32px, 5vw, 60px);
  scroll-margin-top: 112px;
}

.page-about .doc-sec + .doc-sec {
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--line-soft);
}

.page-about .doc-sec__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
}

.page-about .index-no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: var(--radius-s);
  background: var(--whistle);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.page-about .doc-sec h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3.4vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-about .doc-sec__body > p {
  margin: 0 0 18px;
  max-width: 40em;
  line-height: 1.9;
  color: rgba(244, 235, 221, 0.84);
}

.page-about .doc-sec__note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin: 0 0 18px;
}

/* ---------- 运营原则 ---------- */
.page-about .principles {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.page-about .principle {
  border-radius: var(--radius-m);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
}

.page-about .principle--glass {
  background: rgba(44, 84, 72, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-about .principle--paper {
  background: var(--paper);
  border-color: transparent;
  color: var(--ink);
}

.page-about .principle__no {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--whistle);
}

.page-about .principle--paper .principle__no {
  color: var(--brick-deep);
}

.page-about .principle h3 {
  margin: 0 0 12px;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.35;
}

.page-about .principle p:not(.principle__no) {
  margin: 0 0 16px;
  line-height: 1.85;
  font-size: 15.5px;
  color: rgba(244, 235, 221, 0.84);
}

.page-about .principle--paper p:not(.principle__no) {
  color: rgba(7, 19, 15, 0.78);
}

.page-about .principle__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--whistle);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 194, 76, 0.5);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-about .principle--paper .principle__link {
  color: var(--brick-deep);
  border-bottom-color: rgba(126, 47, 36, 0.45);
}

.page-about .principle__link:hover,
.page-about .principle__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

.page-about .principle--paper .principle__link:hover,
.page-about .principle--paper .principle__link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- 团队 ---------- */
.page-about .team {
  display: grid;
  gap: 24px;
}

.page-about .team__media {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line);
}

.page-about .team__text > p {
  margin: 0 0 16px;
  line-height: 1.9;
  color: rgba(244, 235, 221, 0.84);
}

.page-about .team__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.page-about .team__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--stand-800);
  font-size: 14.5px;
  color: rgba(244, 235, 221, 0.88);
}

.page-about .team__list .mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: var(--radius-s);
  background: rgba(240, 194, 76, 0.14);
  color: var(--whistle);
  font-size: 12px;
}

/* ---------- 里程碑 ---------- */
.page-about .track {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 18px 2px 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-top: 2px dashed rgba(180, 72, 52, 0.55);
}

.page-about .track__item {
  flex: 0 0 min(268px, 78vw);
  scroll-snap-align: start;
  position: relative;
  padding: 22px 20px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--stand-800);
}

.page-about .track__item::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--whistle);
  box-shadow: 0 0 0 4px rgba(240, 194, 76, 0.16);
}

.page-about .track__year {
  margin: 0 0 10px;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--whistle);
}

.page-about .track__title {
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.4;
}

.page-about .track__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.78);
}

.page-about .milestone__figure {
  margin: 24px 0 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  max-width: 460px;
}

.page-about .milestone__figure .media__img {
  aspect-ratio: 1 / 1;
}

/* ---------- 场景 ---------- */
.page-about .scenes {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.page-about .scene {
  padding: 22px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brick);
  background: rgba(20, 57, 46, 0.62);
}

.page-about .scene__no {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate);
}

.page-about .scene h3 {
  margin: 0 0 10px;
  font-size: 1.06rem;
  line-height: 1.4;
}

.page-about .scene p:not(.scene__no) {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.8);
}

.page-about .scene__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--whistle);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 194, 76, 0.45);
}

.page-about .scene__link:hover,
.page-about .scene__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

/* ---------- 问答 ---------- */
.page-about .doc-sec--faq .fold {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: rgba(20, 57, 46, 0.55);
  margin-bottom: 10px;
  overflow: hidden;
}

.page-about .fold__sum {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.page-about .fold__sum::-webkit-details-marker {
  display: none;
}

.page-about .fold__sum::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--whistle);
  flex: none;
}

.page-about .fold[open] .fold__sum::after {
  content: "–";
}

.page-about .fold__sum:focus-visible {
  outline: 2px solid var(--whistle);
  outline-offset: -3px;
}

.page-about .fold__body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line-soft);
}

.page-about .fold__body p {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(244, 235, 221, 0.8);
}

/* ---------- 收尾 ---------- */
.page-about .about-close {
  margin-top: clamp(36px, 5vw, 60px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-l);
  background: var(--stand-700);
  border: 1px solid var(--line);
  display: grid;
  gap: 18px;
}

.page-about .about-close__text {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.8;
  color: var(--paper);
}

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

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

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

  .page-about .track__item {
    flex-basis: 280px;
  }

  .page-about .about-close {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .page-about .team {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 32px;
    align-items: start;
  }

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

@media (min-width: 1024px) {
  .page-about .about-doc {
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }

  .page-about .doc-rail {
    position: sticky;
    top: 108px;
    align-self: start;
  }

  .page-about .doc-rail__title {
    display: block;
  }

  .page-about .doc-rail__list {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .page-about .doc-rail__link {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 16px;
    min-height: 38px;
    color: var(--slate);
    position: relative;
  }

  .page-about .doc-rail__link::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: transparent;
    transition: background var(--dur) var(--ease);
  }

  .page-about .doc-rail__link:hover,
  .page-about .doc-rail__link:focus-visible {
    background: transparent;
    color: var(--paper);
    transform: none;
  }

  .page-about .doc-rail__link:hover::before,
  .page-about .doc-rail__link:focus-visible::before {
    background: var(--whistle);
  }

  .page-about .doc-sec h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  }

  .page-about .track__item {
    flex-basis: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .doc-rail__link,
  .page-about .principle__link,
  .page-about .scene__link,
  .page-about .crumbs a {
    transition: none;
  }

  .page-about .doc-rail__link:hover,
  .page-about .doc-rail__link:focus-visible {
    transform: none;
  }
}


<main id="main-content" class="page-about">
  <section class="about-hero" aria-labelledby="about-title">
    <div class="shell about-hero__inner">
      <div class="about-hero__copy">
        <nav class="crumbs" aria-label="面包屑">
          <a href="/">看台总览</a>
          <span class="crumbs__sep" aria-hidden="true">/</span>
          <span aria-current="page">看台理念</span>
        </nav>
        <p class="eyebrow">196体育 · 看台手册</p>
        <h1 id="about-title" class="display about-hero__title">把赛事入口，排成一座看得懂的看台</h1>
        <p class="lede about-hero__lede">
          196体育从 2016 年起只做一件事：让想看的比赛有固定位置。轮次按编号排好，资源按类别归档，会员权益按指标逐项写清，你按座位号坐下就行。
        </p>
        <div class="about-hero__actions">
          <a class="btn btn--primary" href="/">从赛程入座</a>
          <a class="btn btn--ghost" href="/offerings/">看资源与权益</a>
        </div>
        <dl class="hero-stats">
          <div class="stat">
            <dt class="stat__label">起持续运营</dt>
            <dd class="stat__num mono">2016</dd>
          </div>
          <div class="stat">
            <dt class="stat__label">联赛与杯赛目录</dt>
            <dd class="stat__num mono">24</dd>
          </div>
          <div class="stat">
            <dt class="stat__label">单赛季赛事索引</dt>
            <dd class="stat__num mono">1200+</dd>
          </div>
          <div class="stat">
            <dt class="stat__label">内容团队</dt>
            <dd class="stat__num mono">18</dd>
          </div>
        </dl>
      </div>
      <figure class="media media--tall about-hero__media">
        <img class="media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深墨绿看台座椅呈几何排列，座位间有暖白灯带，构图对称">
        <figcaption class="media__caption">看台的秩序感，是这套目录最早的样子。</figcaption>
      </figure>
    </div>
  </section>

  <div class="shell about-doc">
    <nav class="doc-rail" aria-label="章节索引">
      <p class="doc-rail__title mono">章节 / INDEX</p>
      <ol class="doc-rail__list">
        <li><a class="doc-rail__link" href="#origin"><span class="mono">01</span>品牌起点</a></li>
        <li><a class="doc-rail__link" href="#principles"><span class="mono">02</span>运营原则</a></li>
        <li><a class="doc-rail__link" href="#team"><span class="mono">03</span>团队分工</a></li>
        <li><a class="doc-rail__link" href="#milestones"><span class="mono">04</span>发展历程</a></li>
        <li><a class="doc-rail__link" href="#partners"><span class="mono">05</span>合作与场景</a></li>
        <li><a class="doc-rail__link" href="#faq"><span class="mono">06</span>品牌问答</a></li>
      </ol>
    </nav>

    <div class="doc-body">
      <section class="doc-sec" id="origin" data-reveal>
        <header class="doc-sec__head">
          <span class="index-no mono">01</span>
          <h2 class="h2">从一份赛程目录开始的十年</h2>
        </header>
        <div class="doc-sec__body">
          <p>
            2016 年，我们把中文用户最常问的那句话当成起点：“这场是第几轮，入口在哪？”当时找一个轮次，往往要在几个页面之间来回跳。我们决定先把目录做扎实——一场比赛对应一个轮次，一个轮次有自己固定的位置。
          </p>
          <p>
            十年下来，赛程表覆盖 24 个联赛与杯赛目录，单赛季维护 1,200 余场赛事索引。约 76% 的首次访问用户是从赛程表进入具体轮次的，这个比例说明目录排对了顺序：人先找到座位，才愿意坐下来看。
          </p>
          <p>
            所以栏目名借用了看台的说法。分区不是装饰，它决定了你从首页到具体轮次要点几下、要记住几个名字。
          </p>
        </div>
      </section>

      <section class="doc-sec" id="principles" data-reveal>
        <header class="doc-sec__head">
          <span class="index-no mono">02</span>
          <h2 class="h2">三条长期执行的运营原则</h2>
        </header>
        <div class="doc-sec__body">
          <div class="principles">
            <article class="principle principle--glass" data-reveal>
              <p class="principle__no mono">P-01</p>
              <h3 class="h3">入口清楚，两下就到</h3>
              <p>
                首页首屏直接给出三轮内的赛程预览与最近更新，滚动时胶囊导航收窄但始终可点。2023 年上线的看台分区导航，把主要栏目入口压到两次点击以内，找轮次不用再翻菜单。
              </p>
              <a class="principle__link" href="/help-center/">看首次访问怎么走</a>
            </article>
            <article class="principle principle--paper" data-reveal>
              <p class="principle__no mono">P-02</p>
              <h3 class="h3">资源可查，按需筛选</h3>
              <p>
                资源库累计整理 4,800 余份赛事档案，分集锦、数据、图文、音频、战术板与归档包六类。下载对比支持按格式、清晰度、文件大小、更新时间和适用设备五项筛选，桌面端左右并列看差异。
              </p>
              <a class="principle__link" href="/offerings/">进入资源与权益</a>
            </article>
            <article class="principle principle--glass" data-reveal>
              <p class="principle__no mono">P-03</p>
              <h3 class="h3">权益可评，编号可追</h3>
              <p>
                会员权益拆成 12 项指标，编号 R12-01 至 R12-12，覆盖入口便捷度、资源完整度、下载体验、检索效率与归档能力。看重哪一项就直接报编号来问，回答会落在具体条目上。
              </p>
              <a class="principle__link" href="/offerings/">读权益测评专栏</a>
            </article>
          </div>
        </div>
      </section>

      <section class="doc-sec" id="team" data-reveal>
        <header class="doc-sec__head">
          <span class="index-no mono">03</span>
          <h2 class="h2">十八个人，各自守着一段看台</h2>
        </header>
        <div class="doc-sec__body team">
          <figure class="media team__media">
            <img class="media__img" src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="桌面上摊开的赛程打印稿与标记笔，旁边是计分板局部" loading="lazy" decoding="async">
            <figcaption class="media__caption">编辑组处理赛程与说明，整理组负责归档与命名。</figcaption>
          </figure>
          <div class="team__text">
            <p>
              团队共 18 人。赛事编辑 7 人，负责轮次排布、赛程跟进与赛事说明撰写；资源整理 6 人，负责归档、命名、标签与清晰度、设备适配；产品与体验 5 人，负责导航、筛选与桌面端对照视图。
            </p>
            <p>
              赛程与资源目录每周二、周五更新，赛季高峰加到每周四次。工作日内 9:00 至 18:00 有客服在线，首次响应平均约 2 小时；来信写明轮次或测评编号，处理会更快。
            </p>
            <ul class="team__list">
              <li><span class="mono">7</span>赛事编辑 · 轮次与赛程跟进</li>
              <li><span class="mono">6</span>资源整理 · 归档、标签与适配</li>
              <li><span class="mono">5</span>产品与体验 · 导航与对照视图</li>
            </ul>
          </div>
        </div>
      </section>

      <section class="doc-sec" id="milestones" data-reveal>
        <header class="doc-sec__head">
          <span class="index-no mono">04</span>
          <h2 class="h2">迭代留下的几道跑道线</h2>
        </header>
        <div class="doc-sec__body">
          <p class="doc-sec__note">横向滑动查看各阶段，每一段都对应一次能感知到的改动。</p>
          <ol class="track" aria-label="发展阶段">
            <li class="track__item" data-reveal>
              <p class="track__year mono">2016</p>
              <h3 class="track__title">把目录立起来</h3>
              <p class="track__text">从赛事索引做起，先保证每场比赛都能归到具体轮次，入口有固定位置。</p>
            </li>
            <li class="track__item" data-reveal>
              <p class="track__year mono">2018</p>
              <h3 class="track__title">资源成体系</h3>
              <p class="track__text">集锦、数据、图文、音频、战术板与归档包六类逐步成形，档案开始按统一编号存放。</p>
            </li>
            <li class="track__item" data-reveal>
              <p class="track__year mono">2020</p>
              <h3 class="track__title">主客场并排放</h3>
              <p class="track__text">9 项主客场指标放进同一屏，胜率、净胜分、控球时段与关键球处理可以左右对照。</p>
            </li>
            <li class="track__item" data-reveal>
              <p class="track__year mono">2023</p>
              <h3 class="track__title">看台分区导航上线</h3>
              <p class="track__text">栏目按看台分区重排，主要入口压缩到两次点击以内，首页首屏给出三轮赛程预览。</p>
            </li>
            <li class="track__item" data-reveal>
              <p class="track__year mono">2025</p>
              <h3 class="track__title">对比模块镜像改版</h3>
              <p class="track__text">资源对比改为双栏镜像结构，同一条件下左右并读，对比效率提升 38%。</p>
            </li>
          </ol>
          <figure class="media milestone__figure">
            <img class="media__img" src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="俯视视角下跑道标线与球场边线相交，砖红与暖白线条形成几何切割" loading="lazy" decoding="async">
            <figcaption class="media__caption">标线把大场地切成分区，目录做的是同一件事。</figcaption>
          </figure>
        </div>
      </section>

      <section class="doc-sec" id="partners" data-reveal>
        <header class="doc-sec__head">
          <span class="index-no mono">05</span>
          <h2 class="h2">谁在用，怎么合作</h2>
        </header>
        <div class="doc-sec__body">
          <p>
            我们与 12 家赛事数据与影像整理机构建立内容合作，用于补充赛程索引、影像资料与归档素材。合作方按领域分工提供内容，站点负责统一命名、编目与呈现，让不同来源的资料在检索时能落到同一处。
          </p>
          <div class="scenes">
            <article class="scene">
              <p class="scene__no mono">S-01</p>
              <h3 class="h3">桌面端跟着赛程看</h3>
              <p>适合每周固定追几轮的中文体育迷：首页看完三轮预览，直接点进具体轮次，不用在多个标签页之间切换。</p>
              <a class="scene__link" href="/">从赛程入座</a>
            </article>
            <article class="scene">
              <p class="scene__no mono">S-02</p>
              <h3 class="h3">长期收藏与归档</h3>
              <p>适合需要保留赛季资料的深度用户：赛季归档包配合跨赛季检索标签，本地编目与长期保存都能落地。</p>
              <a class="scene__link" href="/notes/">看赛事笔记与归档专题</a>
            </article>
            <article class="scene">
              <p class="scene__no mono">S-03</p>
              <h3 class="h3">机构整理与权益评估</h3>
              <p>适合需要成批整理素材或评估会员方案的机构：按五项条件筛资源，按 12 项指标比权益，再决定合作范围。</p>
              <a class="scene__link" href="/reach-us/">联系内容合作</a>
            </article>
          </div>
        </div>
      </section>

      <section class="doc-sec doc-sec--faq" id="faq" data-reveal>
        <header class="doc-sec__head">
          <span class="index-no mono">06</span>
          <h2 class="h2">关于这座看台，常被问到的五件事</h2>
        </header>
        <div class="doc-sec__body">
          <details class="fold" open>
            <summary class="fold__sum">196体育主要面向哪些人？</summary>
            <div class="fold__body">
              <p>以 25 至 45 岁的中文体育迷为主，也有长期在桌面端收藏赛事资料的用户，以及需要成批整理素材、比较会员方案的机构。累计服务 36 万桌面端访问用户，月均活跃 4.2 万。</p>
            </div>
          </details>
          <details class="fold">
            <summary class="fold__sum">第一次来，应该从哪一步开始？</summary>
            <div class="fold__body">
              <p>从首页赛程表挑一个轮次进去，看完再回到资源与权益页做对照。不确定点哪里时，帮助中心收录的 68 篇指引覆盖入口、下载、权益编号与桌面端设置。</p>
            </div>
          </details>
          <details class="fold">
            <summary class="fold__sum">内容多久更新一次？</summary>
            <div class="fold__body">
              <p>赛程与资源目录固定在每周二、周五更新，赛季高峰增加至每周四次。首页的最近更新入口会显示当期新增的轮次与档案。</p>
            </div>
          </details>
          <details class="fold">
            <summary class="fold__sum">遇到入口或权益编号的问题找谁？</summary>
            <div class="fold__body">
              <p>可以写信到 email@stadium-196tiyu.com.cn，或拨打 18497666475。工作日内 9:00 至 18:00 有人回复，首次响应平均约 2 小时；附上赛程轮次或测评编号会更快定位。</p>
            </div>
          </details>
          <details class="fold">
            <summary class="fold__sum">机构想合作整理内容，怎么谈？</summary>
            <div class="fold__body">
              <p>通过联系入口说明合作方向、资料类型与期望周期即可，我们已有 12 家赛事数据与影像整理机构的协作经验，会按领域分工确认可行的形式。</p>
            </div>
          </details>
        </div>
      </section>

      <aside class="about-close" aria-label="接下来的入口">
        <p class="about-close__text">落到具体动作上只有三步：挑一个轮次、比一次资源、问一个编号。</p>
        <div class="about-close__actions">
          <a class="btn btn--primary" href="/offerings/">比资源与权益</a>
          <a class="btn btn--quiet" href="/help-center/">去帮助中心</a>
        </div>
      </aside>
    </div>
  </div>
</main>

.page-about {
  --about-rail: 176px;
  color: var(--paper);
}

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

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding-block: clamp(24px, 4vw, 56px) clamp(28px, 4vw, 48px);
}

.page-about .about-hero__inner {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.page-about .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
  margin-bottom: 18px;
}

.page-about .crumbs a {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--whistle);
}

.page-about .crumbs__sep {
  color: var(--line);
}

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

.page-about .about-hero__title {
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 6.2vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.page-about .about-hero__lede {
  margin: 0;
  max-width: 38em;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.85;
  color: rgba(244, 235, 221, 0.82);
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-about .hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.page-about .hero-stats > div {
  border-left: 2px solid var(--brick);
  padding-left: 12px;
}

.page-about .stat__num {
  display: block;
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 700;
  color: var(--paper);
  letter-spacing: 0.04em;
}

.page-about .stat__label {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate);
  margin-bottom: 4px;
}

.page-about .about-hero__media {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--stand-800);
  margin: 0;
}

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

.page-about .about-hero__media .media__img {
  aspect-ratio: 3 / 2;
}

.page-about .media__caption {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--slate);
  border-top: 1px solid var(--line-soft);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-doc {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.page-about .doc-rail__title {
  display: none;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin: 0 0 14px;
}

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

.page-about .doc-rail__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
  border-radius: var(--radius-capsule);
  border: 1px solid var(--line);
  background: rgba(44, 84, 72, 0.4);
  color: var(--paper);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-about .doc-rail__link .mono {
  font-size: 11px;
  color: var(--whistle);
  letter-spacing: 0.08em;
}

.page-about .doc-rail__link:hover,
.page-about .doc-rail__link:focus-visible {
  background: var(--stand-700);
  border-color: var(--whistle);
  transform: translateY(-1px);
}

.page-about .doc-body {
  min-width: 0;
}

.page-about .doc-sec {
  padding-top: clamp(32px, 5vw, 60px);
  scroll-margin-top: 112px;
}

.page-about .doc-sec + .doc-sec {
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--line-soft);
}

.page-about .doc-sec__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
}

.page-about .index-no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: var(--radius-s);
  background: var(--whistle);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.page-about .doc-sec h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3.4vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-about .doc-sec__body > p {
  margin: 0 0 18px;
  max-width: 40em;
  line-height: 1.9;
  color: rgba(244, 235, 221, 0.84);
}

.page-about .doc-sec__note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin: 0 0 18px;
}

/* ---------- 运营原则 ---------- */
.page-about .principles {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.page-about .principle {
  border-radius: var(--radius-m);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
}

.page-about .principle--glass {
  background: rgba(44, 84, 72, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-about .principle--paper {
  background: var(--paper);
  border-color: transparent;
  color: var(--ink);
}

.page-about .principle__no {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--whistle);
}

.page-about .principle--paper .principle__no {
  color: var(--brick-deep);
}

.page-about .principle h3 {
  margin: 0 0 12px;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.35;
}

.page-about .principle p:not(.principle__no) {
  margin: 0 0 16px;
  line-height: 1.85;
  font-size: 15.5px;
  color: rgba(244, 235, 221, 0.84);
}

.page-about .principle--paper p:not(.principle__no) {
  color: rgba(7, 19, 15, 0.78);
}

.page-about .principle__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--whistle);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 194, 76, 0.5);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-about .principle--paper .principle__link {
  color: var(--brick-deep);
  border-bottom-color: rgba(126, 47, 36, 0.45);
}

.page-about .principle__link:hover,
.page-about .principle__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

.page-about .principle--paper .principle__link:hover,
.page-about .principle--paper .principle__link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- 团队 ---------- */
.page-about .team {
  display: grid;
  gap: 24px;
}

.page-about .team__media {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line);
}

.page-about .team__text > p {
  margin: 0 0 16px;
  line-height: 1.9;
  color: rgba(244, 235, 221, 0.84);
}

.page-about .team__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.page-about .team__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--stand-800);
  font-size: 14.5px;
  color: rgba(244, 235, 221, 0.88);
}

.page-about .team__list .mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: var(--radius-s);
  background: rgba(240, 194, 76, 0.14);
  color: var(--whistle);
  font-size: 12px;
}

/* ---------- 里程碑 ---------- */
.page-about .track {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 22px 2px 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-top: 2px dashed rgba(180, 72, 52, 0.55);
}

.page-about .track__item {
  flex: 0 0 min(268px, 78vw);
  scroll-snap-align: start;
  position: relative;
  padding: 22px 20px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--stand-800);
}

.page-about .track__item::before {
  content: "";
  position: absolute;
  top: -29px;
  left: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--whistle);
  box-shadow: 0 0 0 4px rgba(240, 194, 76, 0.16);
}

.page-about .track__year {
  margin: 0 0 10px;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--whistle);
}

.page-about .track__title {
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.4;
}

.page-about .track__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.78);
}

.page-about .milestone__figure {
  margin: 24px 0 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  max-width: 460px;
}

.page-about .milestone__figure .media__img {
  aspect-ratio: 1 / 1;
}

/* ---------- 场景 ---------- */
.page-about .scenes {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.page-about .scene {
  padding: 22px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brick);
  background: rgba(20, 57, 46, 0.62);
}

.page-about .scene__no {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate);
}

.page-about .scene h3 {
  margin: 0 0 10px;
  font-size: 1.06rem;
  line-height: 1.4;
}

.page-about .scene p:not(.scene__no) {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.8);
}

.page-about .scene__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--whistle);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 194, 76, 0.45);
}

.page-about .scene__link:hover,
.page-about .scene__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

/* ---------- 问答 ---------- */
.page-about .doc-sec--faq .fold {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: rgba(20, 57, 46, 0.55);
  margin-bottom: 10px;
  overflow: hidden;
}

.page-about .fold__sum {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.page-about .fold__sum::-webkit-details-marker {
  display: none;
}

.page-about .fold__sum::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--whistle);
  flex: none;
}

.page-about .fold[open] .fold__sum::after {
  content: "–";
}

.page-about .fold__sum:focus-visible {
  outline: 2px solid var(--whistle);
  outline-offset: -3px;
}

.page-about .fold__body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line-soft);
}

.page-about .fold__body p {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(244, 235, 221, 0.8);
}

/* ---------- 收尾 ---------- */
.page-about .about-close {
  margin-top: clamp(36px, 5vw, 60px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-l);
  background: var(--stand-700);
  border: 1px solid var(--line);
  display: grid;
  gap: 18px;
}

.page-about .about-close__text {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.8;
  color: var(--paper);
}

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

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

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

  .page-about .track__item {
    flex-basis: 280px;
  }

  .page-about .about-close {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .page-about .team {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 32px;
    align-items: start;
  }

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

@media (min-width: 1024px) {
  .page-about .about-doc {
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }

  .page-about .doc-rail {
    position: sticky;
    top: 108px;
    align-self: start;
  }

  .page-about .doc-rail__title {
    display: block;
  }

  .page-about .doc-rail__list {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .page-about .doc-rail__link {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 16px;
    min-height: 38px;
    color: var(--slate);
    position: relative;
  }

  .page-about .doc-rail__link::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: transparent;
    transition: background var(--dur) var(--ease);
  }

  .page-about .doc-rail__link:hover,
  .page-about .doc-rail__link:focus-visible {
    background: transparent;
    color: var(--paper);
    transform: none;
  }

  .page-about .doc-rail__link:hover::before,
  .page-about .doc-rail__link:focus-visible::before {
    background: var(--whistle);
  }

  .page-about .doc-sec h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  }

  .page-about .track__item {
    flex-basis: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .doc-rail__link,
  .page-about .principle__link,
  .page-about .scene__link,
  .page-about .crumbs a {
    transition: none;
  }

  .page-about .doc-rail__link:hover,
  .page-about .doc-rail__link:focus-visible {
    transform: none;
  }
}