.page-about {
  --about-gap: clamp(3rem, 7vw, 6.5rem);
  --about-rule: rgba(34, 28, 23, .16);
  background-color: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  padding-top: 1.5rem;
  padding-bottom: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--lime);
}
.page-about .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about .crumbs li + li::before {
  content: "/";
  margin-right: .5rem;
  color: var(--silver);
}
.page-about .crumbs a {
  color: var(--night-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--silver);
}
.page-about .crumbs a:hover {
  border-bottom-color: var(--lamp-orange);
  color: var(--lamp-orange);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding: 2.25rem 0 3rem;
}
.page-about .about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.page-about .about-hero__lead {
  min-width: 0;
}
.page-about .about-hero__title {
  margin: .5rem 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.95rem, 7.4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: .035em;
  color: var(--night-blue);
  overflow-wrap: break-word;
}
.page-about .about-hero__lede {
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink);
}
.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}
.page-about .about-hero__media {
  margin: 0;
  border: 2px solid var(--ink);
  box-shadow: var(--hard-shadow);
  background: var(--deep-blue);
}
.page-about .about-hero__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
}
.page-about .media__caption {
  padding: .7rem .9rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--silver);
  background: var(--deep-blue);
}

/* 首屏数字面板 */
.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2.5rem 0 0;
  padding: 0;
  border: 2px solid var(--ink);
  box-shadow: var(--hard-shadow-sm);
  background: var(--cream);
}
.page-about .about-facts__item {
  padding: 1rem 1.1rem 1.1rem;
  border-bottom: 1px solid var(--about-rule);
}
.page-about .about-facts__item:nth-child(odd) {
  border-right: 1px solid var(--about-rule);
}
.page-about .about-facts__item:nth-last-child(-n+2) {
  border-bottom: 0;
}
.page-about .about-facts dt {
  margin: 0 0 .35rem;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--lime);
}
.page-about .about-facts__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--night-blue);
}
.page-about .about-facts__value span {
  margin-left: .3rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lime);
}

/* ---------- 通用章节 ---------- */
.page-about .about-section {
  padding: var(--about-gap) 0 0;
}
.page-about .about-section__head {
  max-width: 40rem;
  margin-bottom: 2rem;
}
.page-about .about-section__title {
  margin: .45rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5.4vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: .03em;
  color: var(--night-blue);
  overflow-wrap: break-word;
}
.page-about .about-section__intro {
  margin: 1rem 0 0;
  font-size: .96rem;
  line-height: 1.85;
  color: var(--ink);
}
.page-about .about-link {
  display: inline-block;
  margin-top: 1.2rem;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--night-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--lamp-orange);
}
.page-about .about-link:hover {
  color: var(--lamp-orange);
}

/* ---------- 登记范围 ---------- */
.page-about .about-scope__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.page-about .about-scope__text p {
  margin: 0 0 1.05rem;
  font-size: .96rem;
  line-height: 1.88;
}
.page-about .about-scope__text p:last-of-type {
  margin-bottom: 0;
}
.page-about .about-scope__map {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 2px solid var(--ink);
  background: var(--night-blue);
  color: var(--silver);
  overflow: hidden;
}
.page-about .about-scope__contours {
  position: absolute;
  inset: -6% -10% auto auto;
  width: 82%;
  height: auto;
  opacity: .34;
  color: var(--lamp-orange);
  pointer-events: none;
}
.page-about .about-scope__map-label {
  position: relative;
  margin: 0 0 1rem;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--amber);
}
.page-about .about-scope__regions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about .about-scope__regions li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(185, 194, 203, .38);
  background: rgba(185, 194, 203, .06);
  transition: border-color var(--speed-state), background-color var(--speed-state);
}
.page-about .about-scope__regions li:hover {
  border-color: var(--lamp-orange);
  background: rgba(242, 118, 43, .16);
}
.page-about .region-name {
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--cream);
}
.page-about .region-count {
  font-size: .78rem;
  color: var(--amber);
}

/* ---------- 档案颗粒度 ---------- */
.page-about .about-dossier {
  padding-top: var(--about-gap);
}
.page-about .dossier {
  margin: 0;
  border-top: 2px solid var(--ink);
}
.page-about .dossier__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--about-rule);
}
.page-about .dossier__row dt {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--night-blue);
}
.page-about .dossier__row dt .mono {
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--lamp-orange);
}
.page-about .dossier__row dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.82;
  color: var(--ink);
}

/* ---------- 登记方法 ---------- */
.page-about .about-method__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.page-about .about-method__media {
  margin: 0;
  border: 2px solid var(--ink);
  box-shadow: var(--hard-shadow);
  background: var(--cream);
}
.page-about .about-method__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.78) contrast(1.05);
}
.page-about .about-method__media .media__caption {
  background: var(--cream);
  color: var(--lime);
  border-top: 1px solid var(--about-rule);
}
.page-about .about-method__body .eyebrow {
  margin: 0 0 .4rem;
}
.page-about .about-method__body .about-section__title {
  margin-top: 0;
}
.page-about .about-method__body p {
  margin: 0 0 1.05rem;
  font-size: .96rem;
  line-height: 1.88;
}

.page-about .method-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
  background: var(--silver);
  border: 2px solid var(--ink);
}
.page-about .method-metrics li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .4rem;
  padding: 1rem .9rem;
  background: var(--cream);
}
.page-about .method-metrics__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--lamp-orange);
}
.page-about .method-metrics__unit {
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--lime);
}
.page-about .method-metrics__label {
  flex: 1 0 100%;
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--ink);
}
.page-about .about-method__note {
  padding-left: .9rem;
  border-left: 3px solid var(--grass);
  font-size: .88rem !important;
  line-height: 1.8;
  color: var(--grass);
}

/* ---------- 赛季时间轴 ---------- */
.page-about .about-timeline {
  padding-top: var(--about-gap);
}
.page-about .tl {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about .tl::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--silver);
}
.page-about .tl__item {
  position: relative;
  padding: 0 0 2.4rem 2rem;
}
.page-about .tl__item:last-child {
  padding-bottom: 0;
}
.page-about .tl__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45rem;
  width: 13px;
  height: 13px;
  background: var(--lamp-orange);
  border: 2px solid var(--ink);
  z-index: 1;
}
.page-about .tl__stamp {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: .5rem;
}
.page-about .tl__year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: .06em;
  color: var(--night-blue);
}
.page-about .tl__seq {
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--lime);
}
.page-about .tl__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.4;
  letter-spacing: .025em;
  color: var(--night-blue);
}
.page-about .tl__body > p {
  margin: 0;
  max-width: 38rem;
  font-size: .95rem;
  line-height: 1.86;
}

.page-about .expander {
  margin-top: .9rem;
  border-left: 3px solid var(--silver);
  transition: border-color var(--speed-state);
}
.page-about .expander[data-open] {
  border-left-color: var(--lamp-orange);
}
.page-about .expander__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .55rem 0 .55rem .85rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: left;
  color: var(--night-blue);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.page-about .expander__head:hover {
  color: var(--lamp-orange);
}
.page-about .expander__mark {
  flex: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--lamp-orange);
}
.page-about .expander__body {
  display: block;
  padding: 0 0 .3rem .85rem;
}
.page-about .expander__body[hidden] {
  display: none;
}
.page-about .expander__body p {
  margin: 0;
  max-width: 36rem;
  font-size: .9rem;
  line-height: 1.84;
  color: var(--lime);
}

/* ---------- 团队分工 ---------- */
.page-about .about-team {
  padding-top: var(--about-gap);
}
.page-about .team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.page-about .team__col {
  padding: 1.3rem 1.2rem 1.4rem;
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: var(--hard-shadow-sm);
}
.page-about .team__col:nth-child(2) {
  background: var(--night-blue);
  color: var(--cream);
}
.page-about .team__col:nth-child(2) .team__count {
  color: var(--lamp-orange);
}
.page-about .team__col:nth-child(2) .team__name {
  color: var(--cream);
}
.page-about .team__col:nth-child(2) p {
  color: var(--silver);
}
.page-about .team__count {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--lamp-orange);
}
.page-about .team__name {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: .04em;
  color: var(--night-blue);
}
.page-about .team__col p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
}

/* ---------- 使用场景 ---------- */
.page-about .about-value {
  padding-top: var(--about-gap);
}
.page-about .scenes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
}
.page-about .scenes__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--about-rule);
}
.page-about .scenes__num {
  margin: 0 0 .5rem;
  font-size: .74rem;
  letter-spacing: .18em;
  color: var(--lamp-orange);
}
.page-about .scenes__title {
  margin: 0 0 .55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: .03em;
  color: var(--night-blue);
}
.page-about .scenes__item p {
  margin: 0;
  max-width: 34rem;
  font-size: .93rem;
  line-height: 1.84;
}
.page-about .about-value__links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

/* ---------- 结尾横幅 ---------- */
.page-about .about-closing {
  position: relative;
  margin-top: var(--about-gap);
  background: var(--night-blue);
  color: var(--cream);
}
.page-about .about-closing__media {
  margin: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.page-about .about-closing__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.7) contrast(1.05);
}
.page-about .about-closing__inner {
  padding: 2.25rem 1.25rem 2.75rem;
}
.page-about .about-closing__title {
  margin: 0 0 .9rem;
  max-width: 34rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: .035em;
  color: var(--cream);
}
.page-about .about-closing__text {
  margin: 0 0 1.6rem;
  max-width: 34rem;
  font-size: .96rem;
  line-height: 1.86;
  color: var(--silver);
}
.page-about .about-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* ---------- 中屏 ---------- */
@media (min-width: 640px) {
  .page-about .about-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .about-facts__item:nth-child(odd) {
    border-right: 1px solid var(--about-rule);
  }
  .page-about .about-facts__item:not(:last-child) {
    border-right: 1px solid var(--about-rule);
  }
  .page-about .about-facts__item:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--about-rule);
  }
  .page-about .about-facts__item:nth-child(n) {
    border-bottom: 0;
  }

  .page-about .dossier__row {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }

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

  .page-about .about-closing__inner {
    padding: 3rem 1.75rem 3.5rem;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 900px) {
  .page-about .about-hero {
    padding: 3rem 0 4rem;
  }
  .page-about .about-hero__grid {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: center;
  }
  .page-about .about-hero__lead {
    order: 1;
  }
  .page-about .about-hero__media {
    order: 2;
  }
  .page-about .about-facts {
    margin-top: 3.5rem;
  }

  .page-about .about-scope__grid {
    grid-template-columns: 5fr 7fr;
    gap: 3.5rem;
  }

  .page-about .about-method__grid {
    grid-template-columns: 4fr 8fr;
    gap: 3.5rem;
  }

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

  .page-about .tl__item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 2.5rem;
    padding-left: 2.25rem;
    padding-bottom: 3.25rem;
  }
  .page-about .tl__item::before {
    left: 0;
    top: .7rem;
  }
  .page-about .tl::before {
    left: 6px;
  }
  .page-about .tl__stamp {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    margin-bottom: 0;
  }
  .page-about .tl__title {
    margin-top: -.1rem;
  }

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

  .page-about .scenes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2.5rem;
  }
  .page-about .scenes__item {
    padding: 1.75rem 0 2rem;
  }

  .page-about .about-closing__inner {
    padding: 3.5rem 0 4rem;
  }
}

@media (min-width: 1200px) {
  .page-about .about-hero__title {
    font-size: 3.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-scope__regions li,
  .page-about .expander {
    transition: none;
  }
}
</main>
<<<END>>>

Wait — I need to double check: the output must be exactly with the markers `` and ``. I accidentally added `<<<END>>>` at the end. Let me not include that. The instruction says: "严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号" and it lists `` then ``. So no END marker.

Let me redo the output cleanly.

Also I should double-check the `about-facts` border logic — I wrote some conflicting rules in the 640px media query. Let me simplify.

Let me rewrite that section cleanly:

```css
.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  ...
}
.page-about .about-facts__item {
  padding: ...;
  border-bottom: 1px solid var(--about-rule);
  border-right: 1px solid var(--about-rule);
}
```
Then remove right border on last column and bottom border on last row.

For 2 columns: last column items = nth-child(even) → 2nd and 4th. Actually for 4 items in 2 cols: positions (1,1),(1,2),(2,1),(2,2). Last column = 2nd and 4th → nth-child(even). Last row = 3rd,4th → nth-child(n+3).

For 4 columns: last column = 4th. Last row = all (single row).

Simpler approach: use container `gap: 1px; background: var(--about-rule)` and items with `background: var(--cream)`. That gives clean hairlines. Let me do that instead.

```css
.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 2.5rem 0 0;
  border: 2px solid var(--ink);
  box-shadow: var(--hard-shadow-sm);
  background: var(--about-rule);
}
.page-about .about-facts__item {
  padding: 1rem 1.1rem 1.1rem;
  background: var(--cream);
}
```
That's clean. 

At 640px: `grid-template-columns: repeat(4, 1fr)`.

Good.

Let me finalize.
<main id="main-content" class="page-about">

  <nav class="crumbs wrap" aria-label="页面路径">
    <ol>
      <li><a href="/">赛季总台</a></li>
      <li aria-current="page">品牌档案</li>
    </ol>
  </nav>

  <section class="about-hero blueprint">
    <div class="wrap about-hero__grid">
      <div class="about-hero__lead">
        <p class="eyebrow">品牌档案 · 自 2019 赛季起</p>
        <h1 class="about-hero__title">六个赛季，把 236 座场馆的看台与季票登记清楚</h1>
        <p class="lede about-hero__lede">华体会赛场从 2019 年第一个赛季的 34 座场馆起步，一个赛季一个赛季地往下做。六年过去，无论您是想提前看清座位视野和价格区间的球迷，还是需要把季票方案对外讲明白的场馆运营方，都能在这里翻到按赛季归好的场馆资料。</p>
        <div class="about-hero__actions">
          <a class="btn btn--primary" href="/solutions/">进入季票查询中心</a>
          <a class="btn btn--ghost" href="/contact/">把资料同步给我们</a>
        </div>
      </div>
      <figure class="media media--wide about-hero__media">
        <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="体育场馆外部结构与立柱的几何线条，冷蓝调，建筑细节清晰" decoding="async">
        <figcaption class="media__caption">看台剖面、立柱间距与入场口位置，是场馆档案里最先被记录的部分。</figcaption>
      </figure>
    </div>

    <div class="wrap">
      <dl class="about-facts">
        <div class="about-facts__item">
          <dt class="mono">登记场馆</dt>
          <dd class="about-facts__value">236<span>座</span></dd>
        </div>
        <div class="about-facts__item">
          <dt class="mono">覆盖省级行政区</dt>
          <dd class="about-facts__value">28<span>个</span></dd>
        </div>
        <div class="about-facts__item">
          <dt class="mono">运动项目类别</dt>
          <dd class="about-facts__value">6<span>类</span></dd>
        </div>
        <div class="about-facts__item">
          <dt class="mono">二级联赛档案</dt>
          <dd class="about-facts__value">42<span>个</span></dd>
        </div>
      </dl>
    </div>
  </section>

  <section class="about-section about-scope">
    <div class="wrap">
      <header class="about-section__head">
        <p class="eyebrow">登记范围</p>
        <h2 class="about-section__title">从顶级联赛一路排到二级联赛</h2>
      </header>

      <div class="grid grid--5-7 about-scope__grid">
        <div class="about-scope__text">
          <p>一座场馆值不值得跑一趟，往往卡在最琐碎的地方：套票从哪一排开始，家庭票能不能连座，散场后最近的地铁口在哪。我们登记的，正是体育场馆信息里最容易被含糊带过的那几块内容——看台怎么分区、季票怎么拆档、入场怎么走。</p>
          <p>登记项目目前涵盖篮球、足球、排球、羽毛球、乒乓球与冰球共 6 类，其中冰球从 2024 赛季开始纳入。2023 赛季起，二级联赛也被拉进了同一套登记节奏，现在已有 42 个二级联赛的场馆资料可供查阅，跨城看球的球迷不必再靠零散帖子拼凑。</p>
          <p>查询时您可以按省份、项目、联赛级别、赛季四个维度自由组合，把范围从 236 座收窄到离自己最近的那一座。</p>
          <a class="about-link" href="/solutions/">按省份和项目筛选场馆 →</a>
        </div>

        <div class="about-scope__map">
          <svg class="about-scope__contours" viewBox="0 0 400 260" aria-hidden="true" focusable="false">
            <g fill="none" stroke="currentColor" stroke-width="1">
              <ellipse cx="200" cy="128" rx="158" ry="100"/>
              <ellipse cx="200" cy="128" rx="126" ry="78" stroke-dasharray="7 5"/>
              <ellipse cx="200" cy="128" rx="94" ry="57"/>
              <ellipse cx="200" cy="128" rx="62" ry="36" stroke-dasharray="4 4"/>
              <ellipse cx="200" cy="128" rx="32" ry="18"/>
            </g>
          </svg>
          <p class="about-scope__map-label mono">按省份分组建索引</p>
          <ul class="about-scope__regions">
            <li><span class="region-name">西北</span><span class="region-count mono">5</span></li>
            <li><span class="region-name">华北</span><span class="region-count mono">5</span></li>
            <li><span class="region-name">东北</span><span class="region-count mono">3</span></li>
            <li><span class="region-name">华东</span><span class="region-count mono">7</span></li>
            <li><span class="region-name">华中</span><span class="region-count mono">3</span></li>
            <li><span class="region-name">西南</span><span class="region-count mono">5</span></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="about-section about-dossier">
    <div class="wrap">
      <header class="about-section__head">
        <p class="eyebrow">档案颗粒度</p>
        <h2 class="about-section__title">一座场馆资料里，究竟写了什么</h2>
        <p class="about-section__intro">场馆方常问的问题很直接：你们到底能登记到什么程度。答案是下面这五类内容，一座场馆一套，按赛季归档，翻到旧赛季也看得到当时的方案。</p>
      </header>

      <dl class="dossier">
        <div class="dossier__row">
          <dt>看台容量<span class="mono">CAP</span></dt>
          <dd>场馆总座位量与各层看台的分担数量，帮您判断某个分区离场心有多远、视线抬升有多大。</dd>
        </div>
        <div class="dossier__row">
          <dt>季票分区<span class="mono">ZONE</span></dt>
          <dd>套票、单场兑换与家庭票三类方案分别落在哪些分区，票档之间差在哪里，一栏一栏摆开对比。</dd>
        </div>
        <div class="dossier__row">
          <dt>入场动线<span class="mono">FLOW</span></dt>
          <dd>从哪个地铁口、哪个广场入口进场，经过几道检票口到座位，散场走哪个方向最快。</dd>
        </div>
        <div class="dossier__row">
          <dt>可售座位图<span class="mono">MAP</span></dt>
          <dd>可售区块的分布示意，配合分区标注，让您在选座前对视野和距离心里有数。</dd>
        </div>
        <div class="dossier__row">
          <dt>交通指引<span class="mono">ROUTE</span></dt>
          <dd>公共交通线路、停车区域与步行时长的基本说明，跨城观赛时能直接拿来做行程。</dd>
        </div>
      </dl>
    </div>
  </section>

  <section class="about-section about-method">
    <div class="wrap">
      <div class="grid grid--4-8 about-method__grid">
        <figure class="media media--tall about-method__media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="摊开的纸质档案与标注笔，桌面俯拍，中性冷光，无人物" loading="lazy" decoding="async">
          <figcaption class="media__caption">每座场馆资料由登记专员与校验专员分头确认，两人签字后才进入可查状态。</figcaption>
        </figure>

        <div class="about-method__body">
          <p class="eyebrow">登记方法与复核节奏</p>
          <h2 class="about-section__title">两个人经手，两套节奏守着</h2>
          <p>场馆资料从收集到可查，先由 1 名登记专员整理，再由 1 名校验专员独立确认，两人都通过后才会对外呈现。赛季进行中，资料平均每 7 天过一遍；到了开票期，复核间隔压缩到 3 天，避免票价区间或分区调整在关键时刻滞后。</p>
          <p>日常采用抽样与全量结合的方式推进，常规抽样比例约 30%；开票节点这类容易变动的信息，一律走全量过一遍，不抽样。目前有 118 家场馆运营方与我们保持季票信息同步，方案一调整就会主动推过来。</p>

          <ul class="method-metrics">
            <li>
              <span class="method-metrics__num">7</span>
              <span class="method-metrics__unit mono">天</span>
              <span class="method-metrics__label">常规复核间隔</span>
            </li>
            <li>
              <span class="method-metrics__num">3</span>
              <span class="method-metrics__unit mono">天</span>
              <span class="method-metrics__label">开票期复核间隔</span>
            </li>
            <li>
              <span class="method-metrics__num">30</span>
              <span class="method-metrics__unit mono">%</span>
              <span class="method-metrics__label">常规抽样比例</span>
            </li>
            <li>
              <span class="method-metrics__num">118</span>
              <span class="method-metrics__unit mono">家</span>
              <span class="method-metrics__label">同步中的运营方</span>
            </li>
          </ul>

          <p class="about-method__note">2021 年，我们的信息系统通过了等级保护二级测评，此后每年至少复查一次。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="about-section about-timeline">
    <div class="wrap">
      <header class="about-section__head">
        <p class="eyebrow">赛季时间轴</p>
        <h2 class="about-section__title">六个赛季，能力是一层层搭上来的</h2>
      </header>

      <ol class="tl">
        <li class="tl__item">
          <div class="tl__stamp">
            <span class="tl__year mono">2019</span>
            <span class="tl__seq mono">S-01</span>
          </div>
          <div class="tl__body">
            <h3 class="tl__title">第一个赛季，34 座场馆开门</h3>
            <p>从最常被问起的 34 座场馆开始，一套套把季票分区和开票节点记下来。当时的目标很朴素：让球迷在买票前有个能查的地方。</p>
            <div class="expander">
              <button class="expander__head" type="button" data-expand-toggle aria-expanded="false">
                <span>首个赛季的做法</span>
                <span class="expander__mark" aria-hidden="true">+</span>
              </button>
              <div class="expander__body" data-expand-body>
                <p>起步阶段由两名同事分头收集场馆公开的季票说明，再逐条整理成统一格式。场馆数量不多，但每一座都留下了当年的价格区间与售罄记录，这些数据后来成了赛季档案库最早的底子。</p>
              </div>
            </div>
          </div>
        </li>

        <li class="tl__item">
          <div class="tl__stamp">
            <span class="tl__year mono">2021</span>
            <span class="tl__seq mono">S-03</span>
          </div>
          <div class="tl__body">
            <h3 class="tl__title">登记体系成型</h3>
            <p>统一赛季编号体系在这年落定，格式为年份加项目代码加场馆序号。一套编号走到哪儿都认得出是哪座场馆、哪个赛季，翻旧资料时不再靠记忆对上号。</p>
            <div class="expander">
              <button class="expander__head" type="button" data-expand-toggle aria-expanded="false">
                <span>这一年还发生了什么</span>
                <span class="expander__mark" aria-hidden="true">+</span>
              </button>
              <div class="expander__body" data-expand-body>
                <p>同年，我们的信息系统通过等级保护二级测评。从这一年起，每座场馆资料都需要登记与校验两名同事分头确认才会上线。</p>
              </div>
            </div>
          </div>
        </li>

        <li class="tl__item">
          <div class="tl__stamp">
            <span class="tl__year mono">2022</span>
            <span class="tl__seq mono">S-04</span>
          </div>
          <div class="tl__body">
            <h3 class="tl__title">球队背景与赛程排布一起补上</h3>
            <p>这一年上线了俱乐部简史查询与赛事日历。简史档案至今收录 386 家俱乐部，最早的条目可以追溯到 1958 年的建队记录；赛事日历每赛季登记 5200 余场比赛，常规赛、季后赛与杯赛都在其中。</p>
            <div class="expander">
              <button class="expander__head" type="button" data-expand-toggle aria-expanded="false">
                <span>赛历能做什么</span>
                <span class="expander__mark" aria-hidden="true">+</span>
              </button>
              <div class="expander__body" data-expand-body>
                <p>赛事日历提供列表与月历两种视图，也支持导出。计划跨城观赛时，可以把一段赛程期内的主客场排布一次看全，再决定买哪几场、走哪条路线。</p>
              </div>
            </div>
          </div>
        </li>

        <li class="tl__item">
          <div class="tl__stamp">
            <span class="tl__year mono">2023</span>
            <span class="tl__seq mono">S-05</span>
          </div>
          <div class="tl__body">
            <h3 class="tl__title">把目光放到二级联赛</h3>
            <p>登记范围在这年延伸到二级联赛，目前覆盖 42 个二级联赛。这些联赛的场馆规模不大、公开信息零散，恰恰是最需要有人认真归档的地方。</p>
            <div class="expander">
              <button class="expander__head" type="button" data-expand-toggle aria-expanded="false">
                <span>二级联赛档案怎么用</span>
                <span class="expander__mark" aria-hidden="true">+</span>
              </button>
              <div class="expander__body" data-expand-body>
                <p>二级联赛的场馆常有两用的情况，白天承接其他活动、比赛日才切换。档案里会注明入场动线与可售区块的调整方式，避免到了现场才发现走错口。</p>
              </div>
            </div>
          </div>
        </li>

        <li class="tl__item">
          <div class="tl__stamp">
            <span class="tl__year mono">2024</span>
            <span class="tl__seq mono">S-06</span>
          </div>
          <div class="tl__body">
            <h3 class="tl__title">每场统计字段完成标准化</h3>
            <p>球员数据以每场统计为基准，单场记录 28 个数据字段。这一年我们统一了这 28 项字段的命名规则，走势对比和位置筛选终于能放在同一把尺子上看。</p>
            <div class="expander">
              <button class="expander__head" type="button" data-expand-toggle aria-expanded="false">
                <span>近期战绩与首发轮换怎么分段</span>
                <span class="expander__mark" aria-hidden="true">+</span>
              </button>
              <div class="expander__body" data-expand-body>
                <p>近期战绩与首发轮换都按赛季划成开局、中段、收官三个阶段登记，支持按场上位置与出场分钟筛选。想判断一支球队的轮换习惯，翻三个阶段比只看最近几场更靠谱。冰球项目也在这一年纳入登记。</p>
              </div>
            </div>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-section about-team">
    <div class="wrap">
      <header class="about-section__head">
        <p class="eyebrow">团队分工</p>
        <h2 class="about-section__title">24 个人，四件事各有人管</h2>
        <p class="about-section__intro">团队规模不大，但分工很清楚。您遇到问题时该找谁，看一眼下面这张分工表就明白了。</p>
      </header>

      <div class="team">
        <article class="team__col">
          <p class="team__count mono">12 人</p>
          <h3 class="team__name">数据登记组</h3>
          <p>负责场馆资料的收集与整理，把场馆方给来的季票方案、分区和动线逐项落进档案，并标注所属赛季。</p>
        </article>
        <article class="team__col">
          <p class="team__count mono">6 人</p>
          <h3 class="team__name">校验组</h3>
          <p>独立于登记环节做二次确认，日常抽样、开票期全量过一遍，并对场馆运营方主动推来的变更做比对。</p>
        </article>
        <article class="team__col">
          <p class="team__count mono">4 人</p>
          <h3 class="team__name">客户支持组</h3>
          <p>解答季票与赛程相关的具体问题，处理资料补充与纠错请求。季票问题附上场馆名称与赛季编号，处理会快很多。</p>
        </article>
        <article class="team__col">
          <p class="team__count mono">2 人</p>
          <h3 class="team__name">内容运营组</h3>
          <p>把赛季进展整理成可读的专题与快报，累计已发布 240 期，涵盖场馆巡礼、赛季回顾与规则解读三类。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="about-section about-value">
    <div class="wrap">
      <header class="about-section__head">
        <p class="eyebrow">谁在这里停留</p>
        <h2 class="about-section__title">三种人，三种用法</h2>
      </header>

      <div class="scenes">
        <article class="scenes__item">
          <p class="scenes__num mono">01</p>
          <h3 class="scenes__title">场馆与俱乐部运营方</h3>
          <p>季票方案的拆分方式、价格区间怎么公示、开票节点提前多久预告，这些细节在档案里都有同行的现成做法可以对照。需要把自家信息补进档案，直接联系客户支持组即可。</p>
        </article>
        <article class="scenes__item">
          <p class="scenes__num mono">02</p>
          <h3 class="scenes__title">跨城观赛的资深球迷</h3>
          <p>开票前想搞清楚座位视角、入场动线、二级联赛球队的来龙去脉，都能在一处查完。订阅开票提醒后，覆盖范围内的场馆有节点变动会主动通知到您。</p>
        </article>
        <article class="scenes__item">
          <p class="scenes__num mono">03</p>
          <h3 class="scenes__title">体育内容编辑与本地生活服务商</h3>
          <p>需要可引用的场馆档案与赛季归档资料时，按赛季编号取用即可。赛季档案库按赛季保存着过往的季票价格区间与售罄记录，做回顾类内容时不必从头翻起。</p>
        </article>
      </div>

      <div class="about-value__links">
        <a class="btn btn--ghost" href="/stories/">看看最新赛季动态</a>
        <a class="btn btn--ghost" href="/faqs/">常见问题先查一遍</a>
      </div>
    </div>
  </section>

  <section class="about-closing">
    <figure class="media media--wide about-closing__media">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="高原湖面与远山的冷调风景，色调偏蓝灰，轻微颗粒" loading="lazy" decoding="async">
    </figure>
    <div class="wrap about-closing__inner">
      <h2 class="about-closing__title">从 2019 年第一个赛季到今天，我们只做一件事</h2>
      <p class="about-closing__text">把每座场馆的季票信息、每支球队的背景沿革和每一场比赛的排期，按赛季登记清楚，让您在掏钱买票之前先看清楚。</p>
      <div class="about-closing__actions">
        <a class="btn btn--primary" href="/solutions/">查询一座场馆</a>
        <a class="btn btn--ghost" href="/contact/">和客户支持组聊聊</a>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-gap: clamp(3rem, 7vw, 6.5rem);
  --about-rule: rgba(34, 28, 23, .16);
  background-color: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  padding-top: 1.5rem;
  padding-bottom: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--lime);
}
.page-about .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about .crumbs li + li::before {
  content: "/";
  margin-right: .5rem;
  color: var(--silver);
}
.page-about .crumbs a {
  color: var(--night-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--silver);
}
.page-about .crumbs a:hover {
  border-bottom-color: var(--lamp-orange);
  color: var(--lamp-orange);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding: 2.25rem 0 3rem;
}
.page-about .about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.page-about .about-hero__lead {
  min-width: 0;
}
.page-about .about-hero__title {
  margin: .5rem 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.95rem, 7.4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: .035em;
  color: var(--night-blue);
  overflow-wrap: break-word;
}
.page-about .about-hero__lede {
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink);
}
.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}
.page-about .about-hero__media {
  margin: 0;
  border: 2px solid var(--ink);
  box-shadow: var(--hard-shadow);
  background: var(--deep-blue);
}
.page-about .about-hero__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
}
.page-about .media__caption {
  padding: .7rem .9rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--silver);
  background: var(--deep-blue);
}

/* 首屏数字面板 */
.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 2.5rem 0 0;
  padding: 0;
  border: 2px solid var(--ink);
  box-shadow: var(--hard-shadow-sm);
  background: var(--about-rule);
}
.page-about .about-facts__item {
  padding: 1rem 1.1rem 1.1rem;
  background: var(--cream);
}
.page-about .about-facts dt {
  margin: 0 0 .35rem;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--lime);
}
.page-about .about-facts__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--night-blue);
}
.page-about .about-facts__value span {
  margin-left: .3rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lime);
}

/* ---------- 通用章节 ---------- */
.page-about .about-section {
  padding: var(--about-gap) 0 0;
}
.page-about .about-section__head {
  max-width: 40rem;
  margin-bottom: 2rem;
}
.page-about .about-section__title {
  margin: .45rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5.4vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: .03em;
  color: var(--night-blue);
  overflow-wrap: break-word;
}
.page-about .about-section__intro {
  margin: 1rem 0 0;
  font-size: .96rem;
  line-height: 1.85;
  color: var(--ink);
}
.page-about .about-link {
  display: inline-block;
  margin-top: 1.2rem;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--night-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--lamp-orange);
}
.page-about .about-link:hover {
  color: var(--lamp-orange);
}

/* ---------- 登记范围 ---------- */
.page-about .about-scope__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.page-about .about-scope__text p {
  margin: 0 0 1.05rem;
  font-size: .96rem;
  line-height: 1.88;
}
.page-about .about-scope__text p:last-of-type {
  margin-bottom: 0;
}
.page-about .about-scope__map {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 2px solid var(--ink);
  background: var(--night-blue);
  color: var(--silver);
  overflow: hidden;
}
.page-about .about-scope__contours {
  position: absolute;
  top: -6%;
  right: -10%;
  width: 82%;
  height: auto;
  opacity: .34;
  color: var(--lamp-orange);
  pointer-events: none;
}
.page-about .about-scope__map-label {
  position: relative;
  margin: 0 0 1rem;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--amber);
}
.page-about .about-scope__regions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about .about-scope__regions li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(185, 194, 203, .38);
  background: rgba(185, 194, 203, .06);
  transition: border-color var(--speed-state), background-color var(--speed-state);
}
.page-about .about-scope__regions li:hover {
  border-color: var(--lamp-orange);
  background: rgba(242, 118, 43, .16);
}
.page-about .region-name {
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--cream);
}
.page-about .region-count {
  font-size: .78rem;
  color: var(--amber);
}

/* ---------- 档案颗粒度 ---------- */
.page-about .dossier {
  margin: 0;
  border-top: 2px solid var(--ink);
}
.page-about .dossier__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--about-rule);
}
.page-about .dossier__row dt {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--night-blue);
}
.page-about .dossier__row dt .mono {
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--lamp-orange);
}
.page-about .dossier__row dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.82;
  color: var(--ink);
}

/* ---------- 登记方法 ---------- */
.page-about .about-method__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.page-about .about-method__media {
  margin: 0;
  border: 2px solid var(--ink);
  box-shadow: var(--hard-shadow);
  background: var(--cream);
}
.page-about .about-method__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.78) contrast(1.05);
}
.page-about .about-method__media .media__caption {
  background: var(--cream);
  color: var(--lime);
  border-top: 1px solid var(--about-rule);
}
.page-about .about-method__body .eyebrow {
  margin: 0 0 .4rem;
}
.page-about .about-method__body .about-section__title {
  margin-top: 0;
}
.page-about .about-method__body p {
  margin: 0 0 1.05rem;
  font-size: .96rem;
  line-height: 1.88;
}

.page-about .method-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
  background: var(--silver);
  border: 2px solid var(--ink);
}
.page-about .method-metrics li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .4rem;
  padding: 1rem .9rem;
  background: var(--cream);
}
.page-about .method-metrics__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--lamp-orange);
}
.page-about .method-metrics__unit {
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--lime);
}
.page-about .method-metrics__label {
  flex: 1 0 100%;
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--ink);
}
.page-about .about-method__note {
  padding-left: .9rem;
  border-left: 3px solid var(--grass);
  font-size: .88rem !important;
  line-height: 1.8;
  color: var(--grass);
}

/* ---------- 赛季时间轴 ---------- */
.page-about .tl {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about .tl::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--silver);
}
.page-about .tl__item {
  position: relative;
  padding: 0 0 2.4rem 2rem;
}
.page-about .tl__item:last-child {
  padding-bottom: 0;
}
.page-about .tl__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45rem;
  width: 13px;
  height: 13px;
  background: var(--lamp-orange);
  border: 2px solid var(--ink);
  z-index: 1;
}
.page-about .tl__stamp {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: .5rem;
}
.page-about .tl__year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: .06em;
  color: var(--night-blue);
}
.page-about .tl__seq {
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--lime);
}
.page-about .tl__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.4;
  letter-spacing: .025em;
  color: var(--night-blue);
}
.page-about .tl__body > p {
  margin: 0;
  max-width: 38rem;
  font-size: .95rem;
  line-height: 1.86;
}

.page-about .expander {
  margin-top: .9rem;
  border-left: 3px solid var(--silver);
  transition: border-color var(--speed-state);
}
.page-about .expander[data-open] {
  border-left-color: var(--lamp-orange);
}
.page-about .expander__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .55rem 0 .55rem .85rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: left;
  color: var(--night-blue);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.page-about .expander__head:hover {
  color: var(--lamp-orange);
}
.page-about .expander__mark {
  flex: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--lamp-orange);
}
.page-about .expander__body {
  display: block;
  padding: 0 0 .3rem .85rem;
}
.page-about .expander__body[hidden] {
  display: none;
}
.page-about .expander__body p {
  margin: 0;
  max-width: 36rem;
  font-size: .9rem;
  line-height: 1.84;
  color: var(--lime);
}

/* ---------- 团队分工 ---------- */
.page-about .team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.page-about .team__col {
  padding: 1.3rem 1.2rem 1.4rem;
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: var(--hard-shadow-sm);
}
.page-about .team__col:nth-child(2) {
  background: var(--night-blue);
}
.page-about .team__col:nth-child(2) .team__count {
  color: var(--lamp-orange);
}
.page-about .team__col:nth-child(2) .team__name {
  color: var(--cream);
}
.page-about .team__col:nth-child(2) p {
  color: var(--silver);
}
.page-about .team__count {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--lamp-orange);
}
.page-about .team__name {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: .04em;
  color: var(--night-blue);
}
.page-about .team__col p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
}

/* ---------- 使用场景 ---------- */
.page-about .scenes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
}
.page-about .scenes__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--about-rule);
}
.page-about .scenes__num {
  margin: 0 0 .5rem;
  font-size: .74rem;
  letter-spacing: .18em;
  color: var(--lamp-orange);
}
.page-about .scenes__title {
  margin: 0 0 .55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: .03em;
  color: var(--night-blue);
}
.page-about .scenes__item p {
  margin: 0;
  max-width: 34rem;
  font-size: .93rem;
  line-height: 1.84;
}
.page-about .about-value__links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

/* ---------- 结尾横幅 ---------- */
.page-about .about-closing {
  position: relative;
  margin-top: var(--about-gap);
  background: var(--night-blue);
  color: var(--cream);
}
.page-about .about-closing__media {
  margin: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.page-about .about-closing__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.7) contrast(1.05);
}
.page-about .about-closing__inner {
  padding: 2.25rem 1.25rem 2.75rem;
}
.page-about .about-closing__title {
  margin: 0 0 .9rem;
  max-width: 34rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: .035em;
  color: var(--cream);
}
.page-about .about-closing__text {
  margin: 0 0 1.6rem;
  max-width: 34rem;
  font-size: .96rem;
  line-height: 1.86;
  color: var(--silver);
}
.page-about .about-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* ---------- 中屏 ---------- */
@media (min-width: 640px) {
  .page-about .about-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .dossier__row {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }
  .page-about .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-about .about-closing__inner {
    padding: 3rem 1.75rem 3.5rem;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 900px) {
  .page-about .about-hero {
    padding: 3rem 0 4rem;
  }
  .page-about .about-hero__grid {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: center;
  }
  .page-about .about-hero__lead {
    order: 1;
  }
  .page-about .about-hero__media {
    order: 2;
  }
  .page-about .about-facts {
    margin-top: 3.5rem;
  }

  .page-about .about-scope__grid {
    grid-template-columns: 5fr 7fr;
    gap: 3.5rem;
  }

  .page-about .about-method__grid {
    grid-template-columns: 4fr 8fr;
    gap: 3.5rem;
  }
  .page-about .method-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .tl__item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 2.5rem;
    padding-left: 2.25rem;
    padding-bottom: 3.25rem;
  }
  .page-about .tl__item::before {
    left: 0;
    top: .7rem;
  }
  .page-about .tl__stamp {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    margin-bottom: 0;
  }
  .page-about .tl__title {
    margin-top: -.1rem;
  }

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

  .page-about .scenes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2.5rem;
  }
  .page-about .scenes__item {
    padding: 1.75rem 0 2rem;
  }

  .page-about .about-closing__inner {
    padding: 3.5rem 0 4rem;
  }
}

@media (min-width: 1200px) {
  .page-about .about-hero__title {
    font-size: 3.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-scope__regions li,
  .page-about .expander {
    transition: none;
  }
}