.page-about {
  --about-rail-w: 152px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
}

/* ===== 首屏 ===== */
.page-about .about-hero {
  background: var(--ink-2);
  border-bottom: 3px solid var(--steel);
  padding: 24px var(--gutter) clamp(32px, 5vw, 56px);
}
.page-about .about-hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
}
.page-about .about-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ash);
}
.page-about .about-crumb a {
  color: var(--ash);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.page-about .about-crumb a:hover {
  color: var(--mint);
  border-bottom-color: var(--mint);
}
.page-about .about-crumb__sep { color: var(--steel); }
.page-about .about-crumb__here { color: var(--paper); }

.page-about .about-hero__eyebrow {
  margin: 22px 0 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mint);
}
.page-about .about-hero__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 7.4vw, 82px);
  line-height: .98;
  letter-spacing: -.015em;
  max-width: 18ch;
}
.page-about .about-hero__title span {
  display: block;
  color: var(--mint);
}
.page-about .about-hero__lede {
  margin: 20px 0 0;
  max-width: 64ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--ash);
}

.page-about .about-facts {
  list-style: none;
  margin: clamp(24px, 3.5vw, 36px) 0 0;
  padding: 2px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--line-soft);
  border: 2px solid var(--line);
}
.page-about .about-fact {
  background: var(--ink);
  padding: 14px 14px 16px;
}
.page-about .about-fact__num {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mint);
}
.page-about .about-fact__label {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ash);
}

/* ===== 外壳：年份刻度 + 主内容 ===== */
.page-about .about-shell {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 56px) var(--gutter) clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

.page-about .year-rail {
  border: 2px solid var(--line);
  border-left: 5px solid var(--mint);
  background: var(--ink-2);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.page-about .year-rail__title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral);
}
.page-about .year-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-about .year-rail__list li { flex: 0 0 auto; }
.page-about .year-rail__list a {
  display: block;
  padding: 7px 11px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.page-about .year-rail__list a:hover {
  border-color: var(--mint);
  background: var(--ink-3);
  transform: translateX(2px);
}
.page-about .year-rail__year {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--mint);
  line-height: 1.2;
}
.page-about .year-rail__what {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ash);
  white-space: nowrap;
}
.page-about .year-rail__note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ash);
}
.page-about .year-rail__note a {
  color: var(--coral);
  text-decoration: none;
  border-bottom: 1px solid var(--coral);
}
.page-about .year-rail__note a:hover { color: var(--mint); border-bottom-color: var(--mint); }

/* ===== 章节 ===== */
.page-about .about-main { min-width: 0; }

.page-about .chapter {
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 88px;
}
.page-about .chapter:first-child {
  padding-top: 0;
  border-top: 0;
}
.page-about .chapter__head { margin-bottom: 16px; }
.page-about .chapter__kicker {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--mint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mint);
}
.page-about .chapter h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 4.2vw, 42px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--paper);
}
.page-about .chapter p {
  margin: 0 0 14px;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ash);
}
.page-about .chapter p strong {
  color: var(--paper);
  font-weight: 700;
}

/* ===== 图片 ===== */
.page-about .about-figure {
  margin: 24px 0 0;
  border: 2px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-figure figcaption {
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ash);
}

/* ===== 里程碑 ===== */
.page-about .milestones {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-about .milestone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 16px;
  border: 2px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-soft);
  scroll-margin-top: 96px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.page-about .milestone:target {
  border-color: var(--mint);
  box-shadow: 6px 6px 0 var(--mint);
  background: var(--ink-3);
}
.page-about .milestone__year {
  margin: 0;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  line-height: 1;
  color: var(--mint);
}
.page-about .milestone__body h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .milestone__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ash);
}

/* ===== 团队 ===== */
.page-about .team-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.page-about .team-card {
  border: 2px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  transition: border-color .2s ease, transform .2s ease;
}
.page-about .team-card:hover,
.page-about .team-card:focus,
.page-about .team-card:focus-within {
  border-color: var(--mint);
  transform: translateY(-2px);
  outline: none;
}
.page-about .team-card__tag {
  margin: 0;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--coral);
}
.page-about .team-card__name {
  margin: 6px 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .team-card__brief {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ash);
}
.page-about .team-card__detail {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ash);
}

/* ===== 数据维护流程 ===== */
.page-about .pipeline {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  counter-reset: none;
}
.page-about .pipeline__step {
  position: relative;
  border: 2px solid var(--line);
  border-top: 4px solid var(--mint);
  background: var(--ink-2);
  padding: 16px;
}
.page-about .pipeline__num {
  margin: 0;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--steel);
}
.page-about .pipeline__step h3 {
  margin: 8px 0 6px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .pipeline__step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ash);
}

/* ===== 更新节奏（酒红分区） ===== */
.page-about .chapter--wine {
  background: var(--wine);
  border: 2px solid var(--score);
  border-top: 2px solid var(--score);
  box-shadow: var(--shadow-hard);
  padding: clamp(20px, 3vw, 32px);
}
.page-about .chapter--wine .chapter__lede {
  color: rgba(244, 247, 248, .86);
}
.page-about .chapter--wine h2 { color: var(--paper); }

.page-about .cadence-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.page-about .cadence-card {
  background: var(--ink-2);
  border: 2px solid var(--score);
  border-top: 4px solid var(--mint);
  box-shadow: var(--shadow-soft);
  padding: 15px;
  transition: transform .2s ease, border-top-color .2s ease;
}
.page-about .cadence-card:nth-child(2) { border-top-color: var(--coral); }
.page-about .cadence-card:nth-child(3) { border-top-color: var(--steel); }
.page-about .cadence-card:nth-child(4) { border-top-color: var(--coral); }
.page-about .cadence-card:hover { transform: translateY(-3px); }
.page-about .cadence-card__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ash);
}
.page-about .cadence-card h3 {
  margin: 6px 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .cadence-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ash);
}

/* ===== 合作生态 ===== */
.page-about .eco {
  margin-top: 20px;
}
.page-about .eco__toolbar {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--line);
  background: var(--ink-2);
}
.page-about .eco__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mint);
}
.page-about .eco__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 2px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color .18s ease;
}
.page-about .eco__input::placeholder { color: var(--steel); }
.page-about .eco__input:focus {
  outline: none;
  border-color: var(--mint);
}
.page-about .eco__status {
  margin: 0;
  font-size: 12px;
  color: var(--ash);
}

.page-about .eco__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.page-about .eco-card {
  background: var(--indigo);
  border: 2px solid var(--score);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.page-about .eco-card h3 {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .eco-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(244, 247, 248, .84);
}

.page-about .eco-foot {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.page-about .eco-foot h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .eco-foot p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ash);
}
.page-about .about-figure--tight { margin-top: 0; }

/* ===== 服务承诺 ===== */
.page-about .promise-links {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-about .promise-links .btn { text-decoration: none; }

/* ===== 响应式 ===== */
@media (min-width: 620px) {
  .page-about .about-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-about .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .cadence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .eco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .milestone {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .page-about .milestone__year { font-size: 24px; }
}

@media (min-width: 900px) {
  .page-about .about-shell {
    grid-template-columns: var(--about-rail-w) minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 56px);
  }
  .page-about .year-rail {
    position: sticky;
    top: 92px;
    padding: 16px 14px;
  }
  .page-about .year-rail__list {
    flex-direction: column;
    overflow-x: visible;
  }
  .page-about .year-rail__list li { flex: 1 1 auto; }
  .page-about .year-rail__list a { padding: 9px 10px; }
  .page-about .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-about .eco-foot { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }
}

@media (min-width: 1100px) {
  .page-about .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-about .cadence-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-about .team-card__detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top-width: 0;
    transition: max-height .28s ease, opacity .28s ease, margin-top .28s ease, padding-top .28s ease;
  }
  .page-about .team-card:hover .team-card__detail,
  .page-about .team-card:focus .team-card__detail,
  .page-about .team-card:focus-within .team-card__detail {
    max-height: 220px;
    opacity: 1;
    margin-top: 12px;
    padding-top: 12px;
    border-top-width: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .team-card,
  .page-about .cadence-card,
  .page-about .year-rail__list a,
  .page-about .milestone,
  .page-about .team-card__detail,
  .page-about .about-crumb a,
  .page-about .eco__input {
    transition: none;
  }
  .page-about .team-card:hover,
  .page-about .team-card:focus,
  .page-about .team-card:focus-within,
  .page-about .cadence-card:hover,
  .page-about .year-rail__list a:hover {
    transform: none;
  }
}


<main id="main-content" class="page-about">
  <header class="about-hero">
    <div class="about-hero__inner">
      <nav class="about-crumb" aria-label="面包屑">
        <a href="/">首页</a>
        <span class="about-crumb__sep" aria-hidden="true">/</span>
        <span class="about-crumb__here">品牌介绍</span>
      </nav>
      <p class="about-hero__eyebrow mono">2019 — 至今 · CN 中文站</p>
      <h1 class="about-hero__title">企鹅体育赛场：<span>把一整轮赛场讲明白</span></h1>
      <p class="about-hero__lede">
        球迷最常问的是这一轮什么时候打、这支球队什么来路、上一轮丢球丢在哪。企鹅体育赛场从赛事日历起步，把球队档案与轮次数据一层层垒起来，做成能长期翻查的赛场信息台，也让内容编辑和赛事机构能直接拿去用。
      </p>
      <ul class="about-facts">
        <li class="about-fact">
          <p class="about-fact__num mono">2019</p>
          <p class="about-fact__label">赛事日历上线年份</p>
        </li>
        <li class="about-fact">
          <p class="about-fact__num mono">42</p>
          <p class="about-fact__label">内容与数据团队人数</p>
        </li>
        <li class="about-fact">
          <p class="about-fact__num mono">120 万+</p>
          <p class="about-fact__label">累计服务的体育内容访问用户</p>
        </li>
        <li class="about-fact">
          <p class="about-fact__num mono">18 家</p>
          <p class="about-fact__label">赛事内容机构与数据服务商合作方</p>
        </li>
      </ul>
    </div>
  </header>

  <div class="about-shell">
    <aside class="year-rail" aria-label="品牌里程年份">
      <p class="year-rail__title mono">里程刻度</p>
      <ol class="year-rail__list">
        <li><a href="#m-2019"><span class="year-rail__year mono">2019</span><span class="year-rail__what">赛事日历上线</span></a></li>
        <li><a href="#m-2021"><span class="year-rail__year mono">2021</span><span class="year-rail__what">球队资料库</span></a></li>
        <li><a href="#m-2023"><span class="year-rail__year mono">2023</span><span class="year-rail__what">版本对照工具</span></a></li>
        <li><a href="#m-2024"><span class="year-rail__year mono">2024</span><span class="year-rail__what">入口变更时间线</span></a></li>
        <li><a href="#m-2025"><span class="year-rail__year mono">2025</span><span class="year-rail__what">反馈入口改版</span></a></li>
      </ol>
      <p class="year-rail__note">想直接查赛程和球队？<a href="/offerings/">去赛事工具台</a></p>
    </aside>

    <div class="about-main">

      <section class="chapter" id="origin">
        <div class="chapter__head">
          <p class="chapter__kicker">品牌起点</p>
          <h2>先有赛事日历，才有后面整座数据台</h2>
        </div>
        <p>
          刚上线时，中文体育圈缺的往往不是一场比赛的热闹，而是能翻回去的赛程底稿。企鹅体育赛场第一阶段只做一件事：把联赛与杯赛的日程节点按轮次排清楚。日历稳住了，球队资料、进失球分布、版本入口才有地方挂靠。
        </p>
        <p>
          今天的赛事日历覆盖 <strong>12 个联赛与杯赛类别</strong>，每月维护 <strong>300+ 条赛程节点</strong>。每条节点都不是孤立的日期，它连着球队、轮次，也连着后来才长出来的版本记录。
        </p>

        <figure class="about-figure">
          <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="深蓝黑底上的年份刻度与体育场馆结构线稿组成的时间线，青绿色节点标记各阶段">
          <figcaption>品牌历程的年份刻度与赛场结构线稿</figcaption>
        </figure>

        <ol class="milestones">
          <li class="milestone" id="m-2019">
            <p class="milestone__year mono">2019</p>
            <div class="milestone__body">
              <h3>赛事日历上线</h3>
              <p>联赛与杯赛的日程节点按轮次排布，访问者第一次能在同一个入口确认比赛时间与所属轮次。</p>
            </div>
          </li>
          <li class="milestone" id="m-2021">
            <p class="milestone__year mono">2021</p>
            <div class="milestone__body">
              <h3>球队资料库上线</h3>
              <p>按联赛、赛季和轮次建立索引，收录 860+ 支球队、9,600+ 名球员的基础资料，查一支队伍的来路不再需要东拼西凑。</p>
            </div>
          </li>
          <li class="milestone" id="m-2023">
            <p class="milestone__year mono">2023</p>
            <div class="milestone__body">
              <h3>版本对照工具上线</h3>
              <p>桌面端与移动端的导航、索引、帮助入口位置可以并列查看，最近 6 个版本记录放在同一屏里横向比对。</p>
            </div>
          </li>
          <li class="milestone" id="m-2024">
            <p class="milestone__year mono">2024</p>
            <div class="milestone__body">
              <h3>入口变更时间线</h3>
              <p>国内赛事入口的调整与归档说明收进时间线，近 36 个月的记录可以按月往回翻，老用户换了设备也找得到原来的位置。</p>
            </div>
          </li>
          <li class="milestone" id="m-2025">
            <p class="milestone__year mono">2025</p>
            <div class="milestone__body">
              <h3>移动端兼容反馈入口改版</h3>
              <p>LQFR 反馈入口移到索引底部，页面加载更快；提交后进入人工分诊队列，48 小时内完成分诊，7 个工作日内给出处理结论。</p>
            </div>
          </li>
        </ol>
      </section>

      <section class="chapter" id="team">
        <div class="chapter__head">
          <p class="chapter__kicker">团队协作</p>
          <h2>42 个人分成四组，各守一段赛场</h2>
        </div>
        <p>
          资料准不准，取决于谁在负责。企鹅体育赛场把 42 人的团队拆成内容运营、数据编辑、前端体验、客服支持四个小组，每组盯住一段内容，也直接面对使用它的人。
        </p>

        <div class="team-grid">
          <article class="team-card" tabindex="0">
            <p class="team-card__tag mono">CONTENT</p>
            <h3 class="team-card__name">内容运营</h3>
            <p class="team-card__brief">每日赛程摘要与专题选题</p>
            <p class="team-card__detail">品牌专栏每月产出 12–18 篇联赛轮次观察、版本笔记与帮助指南，由这一组定选题、排刊期、做终审。</p>
          </article>
          <article class="team-card" tabindex="0">
            <p class="team-card__tag mono">DATA</p>
            <h3 class="team-card__name">数据编辑</h3>
            <p class="team-card__brief">球队资料与轮次数据</p>
            <p class="team-card__detail">维护球队资料库和按轮次逐轮列出的进失球分布，赛季切换时优先补上升班马与新晋球队。</p>
          </article>
          <article class="team-card" tabindex="0">
            <p class="team-card__tag mono">FRONTEND</p>
            <h3 class="team-card__name">前端体验</h3>
            <p class="team-card__brief">索引、对照区与移动端</p>
            <p class="team-card__detail">负责索引结构、版本对照横向区和折叠面板的呈现，也处理移动端加载速度与排版兼容问题。</p>
          </article>
          <article class="team-card" tabindex="0">
            <p class="team-card__tag mono">SUPPORT</p>
            <h3 class="team-card__name">客服支持</h3>
            <p class="team-card__brief">工单分诊与反馈回流</p>
            <p class="team-card__detail">接收移动端兼容反馈与换设备登录异常的工单，把高频问题整理成下一轮迭代的输入。</p>
          </article>
        </div>

        <figure class="about-figure">
          <img src="{zhanqunpic:h:700w:1100}" width="1100" height="700" alt="内容运营、数据编辑、前端体验与客服支持四组协作流程信息图，粗线条与等宽标签" loading="lazy" decoding="async">
          <figcaption>四个小组的内容协作流程</figcaption>
        </figure>
      </section>

      <section class="chapter" id="data-desk">
        <div class="chapter__head">
          <p class="chapter__kicker">数据维护</p>
          <h2>一条轮次数据，要经过三道手</h2>
        </div>
        <p>
          球队资料、赛程节点与进失球分布每天都会被搜到，所以它们必须始终站得住。数据编辑组的做法很朴素：先锁定，再比对，最后落进索引。
        </p>

        <ol class="pipeline">
          <li class="pipeline__step">
            <p class="pipeline__num mono">01</p>
            <h3>锁定联赛与赛季</h3>
            <p>按联赛与赛季确认当前轮次，赛季筛选一开，历史轮次和本赛季进度就能分开看。</p>
          </li>
          <li class="pipeline__step">
            <p class="pipeline__num mono">02</p>
            <h3>比对球队与比分归属</h3>
            <p>逐轮复核球队归属与比分归属，进失球分布按联赛轮次逐轮列出，一处对不上就整轮回查。</p>
          </li>
          <li class="pipeline__step">
            <p class="pipeline__num mono">03</p>
            <h3>写入索引并标注</h3>
            <p>确认后的结果挂进联赛、赛季、轮次三层索引，并标出改动位置，方便内容编辑直接引用。</p>
          </li>
        </ol>
      </section>

      <section class="chapter chapter--wine" id="cadence">
        <div class="chapter__head">
          <p class="chapter__kicker">更新节奏</p>
          <h2>每天、每周、每月、每季度，各有一件事必须做完</h2>
        </div>
        <p class="chapter__lede">
          合作方最关心的往往是内容是否还在动。企鹅体育赛场的更新分四个节拍，从当天的赛程摘要一直排到季度的版本对照。
        </p>

        <div class="cadence-grid">
          <article class="cadence-card">
            <p class="cadence-card__label mono">DAILY</p>
            <h3>每日</h3>
            <p class="cadence-card__text">更新赛程摘要，处理当天收到的兼容反馈与登录问题工单。</p>
          </article>
          <article class="cadence-card">
            <p class="cadence-card__label mono">WEEKLY</p>
            <h3>每周</h3>
            <p class="cadence-card__text">校准轮次数据，把进失球分布按轮次再走一遍，补齐新出现的球队信息。</p>
          </article>
          <article class="cadence-card">
            <p class="cadence-card__label mono">MONTHLY</p>
            <h3>每月</h3>
            <p class="cadence-card__text">归档入口变更记录，回看客服工单里反复出现的位置问题。</p>
          </article>
          <article class="cadence-card">
            <p class="cadence-card__label mono">QUARTERLY</p>
            <h3>每季度</h3>
            <p class="cadence-card__text">刷新版本对照，做一次桌面端与移动端的体验走查，排出下一轮改动。</p>
          </article>
        </div>
      </section>

      <section class="chapter" id="partners">
        <div class="chapter__head">
          <p class="chapter__kicker">合作生态</p>
          <h2>资料做得厚，靠的是一起干活的人</h2>
        </div>
        <p>
          企鹅体育赛场与 18 家赛事内容机构与数据服务商建立内容合作，合作范围覆盖赛程资料、球队基础数据与可视化素材。跨赛季的球队变动有人同步，图表背后的原始数据也有稳定来源。
        </p>

        <div class="eco" data-filter-scope>
          <div class="eco__toolbar">
            <label class="eco__label" for="eco-search">按合作方向筛选</label>
            <input class="eco__input" id="eco-search" type="search" data-filter-input placeholder="试试输入：赛程 / 球队 / 可视化">
            <p class="eco__status mono" data-filter-status>共 4 个合作方向</p>
          </div>

          <div class="eco__grid">
            <article class="eco-card" data-filter-item data-keywords="赛程 日历 轮次 节点">
              <h3>赛程资料合作</h3>
              <p>联赛与杯赛的日程节点、轮次调整与补赛安排，随赛季推进持续同步。</p>
            </article>
            <article class="eco-card" data-filter-item data-keywords="球队 球员 档案 资料库">
              <h3>球队基础数据合作</h3>
              <p>860+ 支球队、9,600+ 名球员的基础资料按联赛、赛季与轮次建档，换赛季时逐批更新。</p>
            </article>
            <article class="eco-card" data-filter-item data-keywords="可视化 徽章 热区图 线稿 图表">
              <h3>可视化素材合作</h3>
              <p>抽象球队徽章、轮次热区图与场馆结构线稿，让数据图表保持统一的视觉语言。</p>
            </article>
            <article class="eco-card" data-filter-item data-keywords="版本 对照 入口 变更 记录">
              <h3>轮次与版本资料合作</h3>
              <p>版本差异说明与入口调整记录共同维护，方便内容团队把改动画成读者看得懂的时间线。</p>
            </article>
          </div>
        </div>

        <div class="eco-foot">
          <div class="eco-foot__text">
            <h3>行业里的认可，来自长期的重复使用</h3>
            <p>
              自 2019 年上线，站点累计服务 120 万+ 体育内容访问用户。不少内容团队把这里当作查表和写稿的第一站，这份日常依赖比任何一句评价都实在。每季度的体验走查，也会把用户反馈里出现最多的问题排进下一轮迭代。
            </p>
          </div>
          <figure class="about-figure about-figure--tight">
            <img src="{zhanqunpic:h:650w:900}" width="900" height="650" alt="企鹅剪影与冷光数据屏的抽象组合，深海蓝与荧光青绿，无人物特写" loading="lazy" decoding="async">
            <figcaption>企鹅剪影与冷光数据屏</figcaption>
          </figure>
        </div>
      </section>

      <section class="chapter" id="promise">
        <div class="chapter__head">
          <p class="chapter__kicker">服务承诺</p>
          <h2>查得到、追得回，问题也丢得回来</h2>
        </div>
        <p>
          你在这里看到的每一条赛程、每一份球队档案、每一段版本差异，都能顺着联赛、赛季和轮次往下翻到出处；发现对不上，或者移动端打不开某个区域，客服支持组会接手处理。
        </p>
        <p>
          如果你正准备做赛事内容，或者需要一个稳定的数据来源，可以先从工具台看起，再决定从哪里接上。
        </p>
        <div class="promise-links">
          <a class="btn btn--solid" href="/offerings/">进入赛事工具台</a>
          <a class="btn btn--coral" href="/column/">读品牌专栏</a>
          <a class="btn" href="/contact-us/">联系客服</a>
        </div>
      </section>

    </div>
  </div>
</main>

.page-about {
  --about-rail-w: 152px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
}

/* ===== 首屏 ===== */
.page-about .about-hero {
  background: var(--ink-2);
  border-bottom: 3px solid var(--steel);
  padding: 24px var(--gutter) clamp(32px, 5vw, 56px);
}
.page-about .about-hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
}
.page-about .about-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ash);
}
.page-about .about-crumb a {
  color: var(--ash);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.page-about .about-crumb a:hover {
  color: var(--mint);
  border-bottom-color: var(--mint);
}
.page-about .about-crumb__sep { color: var(--steel); }
.page-about .about-crumb__here { color: var(--paper); }

.page-about .about-hero__eyebrow {
  margin: 22px 0 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mint);
}
.page-about .about-hero__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 7.4vw, 82px);
  line-height: .98;
  letter-spacing: -.015em;
  max-width: 18ch;
}
.page-about .about-hero__title span {
  display: block;
  color: var(--mint);
}
.page-about .about-hero__lede {
  margin: 20px 0 0;
  max-width: 64ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--ash);
}

.page-about .about-facts {
  list-style: none;
  margin: clamp(24px, 3.5vw, 36px) 0 0;
  padding: 2px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--line-soft);
  border: 2px solid var(--line);
}
.page-about .about-fact {
  background: var(--ink);
  padding: 14px 14px 16px;
}
.page-about .about-fact__num {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mint);
}
.page-about .about-fact__label {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ash);
}

/* ===== 外壳：年份刻度 + 主内容 ===== */
.page-about .about-shell {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 56px) var(--gutter) clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

.page-about .year-rail {
  border: 2px solid var(--line);
  border-left: 5px solid var(--mint);
  background: var(--ink-2);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.page-about .year-rail__title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral);
}
.page-about .year-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-about .year-rail__list li { flex: 0 0 auto; }
.page-about .year-rail__list a {
  display: block;
  padding: 7px 11px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.page-about .year-rail__list a:hover {
  border-color: var(--mint);
  background: var(--ink-3);
  transform: translateX(2px);
}
.page-about .year-rail__year {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--mint);
  line-height: 1.2;
}
.page-about .year-rail__what {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ash);
  white-space: nowrap;
}
.page-about .year-rail__note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ash);
}
.page-about .year-rail__note a {
  color: var(--coral);
  text-decoration: none;
  border-bottom: 1px solid var(--coral);
}
.page-about .year-rail__note a:hover { color: var(--mint); border-bottom-color: var(--mint); }

/* ===== 章节 ===== */
.page-about .about-main { min-width: 0; }

.page-about .chapter {
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 88px;
}
.page-about .chapter:first-child {
  padding-top: 0;
  border-top: 0;
}
.page-about .chapter__head { margin-bottom: 16px; }
.page-about .chapter__kicker {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--mint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mint);
}
.page-about .chapter h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 4.2vw, 42px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--paper);
}
.page-about .chapter p {
  margin: 0 0 14px;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ash);
}
.page-about .chapter p strong {
  color: var(--paper);
  font-weight: 700;
}

/* ===== 图片 ===== */
.page-about .about-figure {
  margin: 24px 0 0;
  border: 2px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-figure figcaption {
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ash);
}

/* ===== 里程碑 ===== */
.page-about .milestones {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-about .milestone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 16px;
  border: 2px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-soft);
  scroll-margin-top: 96px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.page-about .milestone:target {
  border-color: var(--mint);
  box-shadow: 6px 6px 0 var(--mint);
  background: var(--ink-3);
}
.page-about .milestone__year {
  margin: 0;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  line-height: 1;
  color: var(--mint);
}
.page-about .milestone__body h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .milestone__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ash);
}

/* ===== 团队 ===== */
.page-about .team-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.page-about .team-card {
  border: 2px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  transition: border-color .2s ease, transform .2s ease;
}
.page-about .team-card:hover,
.page-about .team-card:focus,
.page-about .team-card:focus-within {
  border-color: var(--mint);
  transform: translateY(-2px);
  outline: none;
}
.page-about .team-card__tag {
  margin: 0;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--coral);
}
.page-about .team-card__name {
  margin: 6px 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .team-card__brief {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ash);
}
.page-about .team-card__detail {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ash);
}

/* ===== 数据维护流程 ===== */
.page-about .pipeline {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  counter-reset: none;
}
.page-about .pipeline__step {
  position: relative;
  border: 2px solid var(--line);
  border-top: 4px solid var(--mint);
  background: var(--ink-2);
  padding: 16px;
}
.page-about .pipeline__num {
  margin: 0;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--steel);
}
.page-about .pipeline__step h3 {
  margin: 8px 0 6px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .pipeline__step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ash);
}

/* ===== 更新节奏（酒红分区） ===== */
.page-about .chapter--wine {
  background: var(--wine);
  border: 2px solid var(--score);
  border-top: 2px solid var(--score);
  box-shadow: var(--shadow-hard);
  padding: clamp(20px, 3vw, 32px);
}
.page-about .chapter--wine .chapter__lede {
  color: rgba(244, 247, 248, .86);
}
.page-about .chapter--wine h2 { color: var(--paper); }

.page-about .cadence-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.page-about .cadence-card {
  background: var(--ink-2);
  border: 2px solid var(--score);
  border-top: 4px solid var(--mint);
  box-shadow: var(--shadow-soft);
  padding: 15px;
  transition: transform .2s ease, border-top-color .2s ease;
}
.page-about .cadence-card:nth-child(2) { border-top-color: var(--coral); }
.page-about .cadence-card:nth-child(3) { border-top-color: var(--steel); }
.page-about .cadence-card:nth-child(4) { border-top-color: var(--coral); }
.page-about .cadence-card:hover { transform: translateY(-3px); }
.page-about .cadence-card__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ash);
}
.page-about .cadence-card h3 {
  margin: 6px 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .cadence-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ash);
}

/* ===== 合作生态 ===== */
.page-about .eco {
  margin-top: 20px;
}
.page-about .eco__toolbar {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--line);
  background: var(--ink-2);
}
.page-about .eco__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mint);
}
.page-about .eco__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 2px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color .18s ease;
}
.page-about .eco__input::placeholder { color: var(--steel); }
.page-about .eco__input:focus {
  outline: none;
  border-color: var(--mint);
}
.page-about .eco__status {
  margin: 0;
  font-size: 12px;
  color: var(--ash);
}

.page-about .eco__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.page-about .eco-card {
  background: var(--indigo);
  border: 2px solid var(--score);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.page-about .eco-card h3 {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .eco-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(244, 247, 248, .84);
}

.page-about .eco-foot {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.page-about .eco-foot h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--paper);
}
.page-about .eco-foot p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ash);
}
.page-about .about-figure--tight { margin-top: 0; }

/* ===== 服务承诺 ===== */
.page-about .promise-links {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-about .promise-links .btn { text-decoration: none; }

/* ===== 响应式 ===== */
@media (min-width: 620px) {
  .page-about .about-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-about .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .cadence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .eco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .milestone {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .page-about .milestone__year { font-size: 24px; }
}

@media (min-width: 900px) {
  .page-about .about-shell {
    grid-template-columns: var(--about-rail-w) minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 56px);
  }
  .page-about .year-rail {
    position: sticky;
    top: 92px;
    padding: 16px 14px;
  }
  .page-about .year-rail__list {
    flex-direction: column;
    overflow-x: visible;
  }
  .page-about .year-rail__list li { flex: 1 1 auto; }
  .page-about .year-rail__list a { padding: 9px 10px; }
  .page-about .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-about .eco-foot { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }
}

@media (min-width: 1100px) {
  .page-about .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-about .cadence-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-about .team-card__detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top-width: 0;
    transition: max-height .28s ease, opacity .28s ease, margin-top .28s ease, padding-top .28s ease;
  }
  .page-about .team-card:hover .team-card__detail,
  .page-about .team-card:focus .team-card__detail,
  .page-about .team-card:focus-within .team-card__detail {
    max-height: 220px;
    opacity: 1;
    margin-top: 12px;
    padding-top: 12px;
    border-top-width: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .team-card,
  .page-about .cadence-card,
  .page-about .year-rail__list a,
  .page-about .milestone,
  .page-about .team-card__detail,
  .page-about .about-crumb a,
  .page-about .eco__input {
    transition: none;
  }
  .page-about .team-card:hover,
  .page-about .team-card:focus,
  .page-about .team-card:focus-within,
  .page-about .cadence-card:hover,
  .page-about .year-rail__list a:hover {
    transform: none;
  }
}