.page-about {
  --about-rail-w: 220px;
  --about-line: #E6DCC6;
  padding-bottom: 72px;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: 20px 0 44px;
  overflow: hidden;
}

.page-about .about-hero__inner {
  display: grid;
  gap: 30px;
}

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

.page-about .about-hero__title {
  margin: 10px 0 18px;
  font-size: clamp(1.9rem, 6.6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--yellow);
}

.page-about .about-hero__lead {
  margin: 0 0 26px;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.82;
  color: var(--mist);
}

.page-about .about-hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--sand);
  border-radius: var(--radius-m);
  border-left: 4px solid var(--yellow);
}

.page-about .about-fact__value {
  font-family: var(--font-mono);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.page-about .about-fact__label {
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--mist);
}

.page-about .about-hero__figure {
  margin: 0;
  width: 100%;
}

/* ---------- 左栏 + 主体 ---------- */
.page-about .about-shell {
  display: grid;
  gap: 34px;
  align-items: start;
}

.page-about .about-rail__label {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

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

.page-about .about-rail__link {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--sand);
  border: 2px solid transparent;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.page-about .about-rail__link .num {
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: 4px;
}

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

.page-about .about-rail__link.is-active {
  background: var(--green-deep);
  color: var(--paper);
  border-color: var(--green-deep);
}

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

/* ---------- 章节 ---------- */
.page-about .about-chapter {
  position: relative;
  margin-bottom: 68px;
  scroll-margin-top: 104px;
}

.page-about .about-chapter:last-of-type {
  margin-bottom: 48px;
}

.page-about .about-chapter__texture {
  position: absolute;
  top: -10px;
  right: 0;
  width: min(100%, 620px);
  height: auto;
  opacity: 0.14;
  border-radius: var(--radius-xl);
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.page-about .about-chapter .chapter__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

.page-about .about-chapter .chapter__index {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}

.page-about .about-chapter .chapter__title {
  margin: 0;
  font-size: clamp(1.28rem, 3.2vw, 1.76rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.page-about .about-chapter .chapter__lead {
  position: relative;
  z-index: 1;
  margin: 0 0 28px;
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.82;
  color: var(--mist);
}

/* ---------- 01 时间轴 ---------- */
.page-about .timeline {
  position: relative;
  margin: 0;
  padding: 4px 0 0 34px;
  list-style: none;
}

.page-about .timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow) 62%, var(--red) 100%);
  opacity: 0.62;
}

.page-about .timeline__item {
  position: relative;
  margin-bottom: 18px;
}

.page-about .timeline__item:last-child {
  margin-bottom: 0;
}

.page-about .timeline__item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 16px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--yellow);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}

.page-about .timeline__item--now::before {
  background: var(--red);
  border-color: var(--red);
}

.page-about .timeline__card {
  padding: 16px 18px;
  background: var(--sand);
  border-radius: var(--radius-m);
  border-left: 5px solid transparent;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease);
}

.page-about .timeline__item:hover .timeline__card,
.page-about .timeline__item:focus-within .timeline__card {
  transform: translateY(-4px);
  border-left-color: var(--yellow);
  box-shadow: var(--shadow-2);
}

.page-about .timeline__item--now .timeline__card {
  background: var(--green-deep);
  color: var(--paper);
}

.page-about .timeline__item--now .timeline__name {
  color: var(--paper);
}

.page-about .timeline__item--now .timeline__desc {
  color: rgba(251, 247, 239, 0.82);
}

.page-about .timeline__ver {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-about .timeline__ver--now {
  background: var(--red);
  color: var(--paper);
}

.page-about .timeline__name {
  margin: 0 0 6px;
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.page-about .timeline__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 02 三条内容线 ---------- */
.page-about .lines-layout {
  display: grid;
  gap: 26px;
}

.page-about .lines-map__figure {
  margin: 0;
  padding: 10px;
  background: var(--sand);
  border-radius: var(--radius-xl);
}

.page-about .lines-map {
  display: block;
  width: 100%;
  height: auto;
}

.page-about .lines-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .lines-list__item {
  padding: 16px 18px;
  background: var(--sand);
  border-radius: var(--radius-m);
  border-top: 5px solid var(--mist);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.page-about .lines-list__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.page-about .lines-list__item--red {
  border-top-color: var(--red);
}

.page-about .lines-list__item--yellow {
  border-top-color: var(--yellow);
}

.page-about .lines-list__item--green {
  border-top-color: var(--green-pitch);
}

.page-about .lines-list__title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}

.page-about .lines-list__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 03 记录流程 ---------- */
.page-about .flow-layout {
  display: grid;
  gap: 26px;
}

.page-about .flow-layout__figure {
  margin: 0;
}

.page-about .flow {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .flow__step {
  position: relative;
  padding: 16px 18px 16px 20px;
  background: var(--paper);
  border: 2px solid var(--about-line);
  border-radius: var(--radius-m);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.page-about .flow__step:hover {
  transform: translateY(-4px);
  border-color: var(--yellow);
}

.page-about .flow__num {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--red);
}

.page-about .flow__title {
  margin: 0 0 5px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.page-about .flow__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--mist);
}

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

.page-about .team-ring__figure {
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 18px;
  background: var(--green-deep);
  border-radius: var(--radius-xl);
}

.page-about .team-ring {
  display: block;
  width: min(100%, 250px);
  height: auto;
}

.page-about .team-ring__seg {
  transition: stroke-width 0.24s var(--ease), stroke 0.24s var(--ease);
}

.page-about .team-ring__seg--edit:hover {
  stroke-width: 34;
  stroke: var(--red-deep);
}

.page-about .team-ring__seg--data:hover {
  stroke-width: 34;
  stroke: var(--gold);
}

.page-about .team-ring__seg--fe:hover {
  stroke-width: 34;
  stroke: var(--green-pitch);
}

.page-about .team-legend {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .team-legend__item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px;
  background: var(--sand);
  border-radius: var(--radius-m);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.page-about .team-legend__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.page-about .team-legend__dot {
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 50%;
}

.page-about .team-legend__dot--edit {
  background: var(--red);
}

.page-about .team-legend__dot--data {
  background: var(--yellow);
}

.page-about .team-legend__dot--fe {
  background: var(--green-pitch);
}

.page-about .team-legend__name {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.page-about .team-legend__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--mist);
}

/* ---------- 05 用户与时段 ---------- */
.page-about .aud-grid {
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.page-about .aud-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius-m);
  background: var(--sand);
  border-bottom: 5px solid var(--orange);
}

.page-about .aud-card__value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}

.page-about .aud-card__label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.page-about .aud-card__text {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.72;
  color: var(--mist);
}

.page-about .region-band {
  padding: 20px 22px;
  border-radius: var(--radius-l);
  background: var(--green-deep);
  color: var(--paper);
  margin-bottom: 22px;
}

.page-about .region-band__title {
  margin: 0 0 8px;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--yellow);
}

.page-about .region-band__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: rgba(251, 247, 239, 0.86);
}

.page-about .about-quote {
  margin: 0;
  padding: 18px 22px;
  background: var(--sand);
  border-left: 6px solid var(--yellow);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.page-about .about-quote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- 收尾 ---------- */
.page-about .cta-band {
  margin-top: 20px;
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--coal) 0%, var(--green-deep) 100%);
  color: var(--paper);
}

.page-about .cta-band__title {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  font-weight: 800;
  color: var(--yellow);
}

.page-about .cta-band__text {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 0.94rem;
  line-height: 1.8;
  color: rgba(251, 247, 239, 0.86);
}

.page-about .cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 桌面与平板 ---------- */
@media (min-width: 700px) {
  .page-about .aud-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (min-width: 820px) {
  .page-about .about-hero {
    padding: 34px 0 60px;
  }

  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 46px;
    align-items: center;
  }

  .page-about .team-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: center;
    gap: 34px;
  }

  .page-about .flow-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 30px;
  }
}

@media (min-width: 1000px) {
  .page-about .about-shell {
    grid-template-columns: var(--about-rail-w) minmax(0, 1fr);
    gap: 56px;
  }

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

  .page-about .about-rail__list {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .about-rail__link {
    border-radius: var(--radius-m);
    border-left: 4px solid transparent;
    white-space: normal;
  }

  .page-about .about-rail__link.is-active {
    border-left-color: var(--red);
  }

  .page-about .lines-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 30px;
  }

  .page-about .about-chapter {
    margin-bottom: 84px;
  }

  .page-about .cta-band {
    padding: 36px 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .timeline__card,
  .page-about .timeline__item::before,
  .page-about .lines-list__item,
  .page-about .team-legend__item,
  .page-about .flow__step,
  .page-about .team-ring__seg,
  .page-about .about-rail__link {
    transition: none;
  }

  .page-about .timeline__item:hover .timeline__card,
  .page-about .lines-list__item:hover,
  .page-about .team-legend__item:hover,
  .page-about .flow__step:hover {
    transform: none;
  }
}
<<<END>>>

Wait — I need to double check a couple of things:

1. I wrote `<<<END>>>` at the end, but the instructions say only two markers: `` and ``. I should not add `<<<END>>>`. Let me remove that.

2. The `.media-frame` and `.media-frame--4x3`, `.media-frame--tilt-r`, `.media-frame--tilt-l`, `.media-frame__caption` are shared classes — fine.

3. `eyebrow`, `breadcrumbs`, `breadcrumbs__list`, `wrap`, `btn`, `btn--flag`, `btn--quiet`, `btn--ghost`, `num`, `chapter__head`, `chapter__index`, `chapter__title`, `chapter__lead` — all shared. Fine.

4. No `:root`, no `html`, `body`, no shared header/footer selectors. Fine.

5. All custom classes are prefixed with `.page-about`. Let me verify: about-hero, about-hero__inner, about-hero__text, about-hero__title, about-hero__lead, about-hero__facts, about-fact, about-fact__value, about-fact__label, about-hero__figure, about-shell, about-rail, about-rail__label, about-rail__list, about-rail__link, about-body, about-chapter, about-chapter__texture, timeline, timeline__item, timeline__card, timeline__ver, timeline__name, timeline__desc, timeline__item--now, timeline__ver--now, lines-layout, lines-map__figure, lines-map, lines-list, lines-list__item, lines-list__item--red/yellow/green, lines-list__title, lines-list__text, flow-layout, flow-layout__figure, flow, flow__step, flow__num, flow__title, flow__text, team-layout, team-ring__figure, team-ring, team-ring__seg, team-ring__seg--edit/data/fe, team-legend, team-legend__item, team-legend__dot, team-legend__dot--edit/data/fe, team-legend__name, team-legend__text, aud-grid, aud-card, aud-card__value, aud-card__label, aud-card__text, region-band, region-band__title, region-band__text, about-quote, cta-band, cta-band__title, cta-band__text, cta-band__actions.

All in the CSS. Good.

Wait, I need to check `.page-about .about-chapter .chapter__head` etc. — I scoped the shared classes with `.page-about` prefix, which is allowed.

6. The `--about-line` and `--about-rail-w` variables are defined in `.page-about` scope. Good.

7. Image count: 3. Minimum 1, target 3, max 15. Good.

8. Image format `{zhanqunpic:h:800w:1200}` with width=1200 height=800. Good.

9. Only one h1. Good. h2 for chapter titles + cta-band title. h3 for sub-items. Good.

10. Brand name appears naturally in hero lead. Good.

11. No forbidden phrases. Let me scan... "不做资讯搬运" — I removed that. Check. The region band has "客服服务时段为工作日 9 时至 21 时，平均首次响应 18 分钟" — matches allowed facts. Good.

12. Contact info not on this page except referenced generically. Good.

13. The SVG `<text>` elements contain visible Chinese — fine, but note the `.lines-map` SVG circles use `fill="#E02424"` inline which duplicates color tokens. That's acceptable for SVG.

Hmm, one issue: in the SVG I use hardcoded hex values rather than CSS vars. That's fine and common, but let me keep it since inline SVG needs presentation attributes or CSS. It works.

14. `data-spy-link` and `data-chapter` used. `data-count-to` — I removed it. Good.

15. `loading="lazy"` on non-hero images. Hero image has no lazy. Good. `decoding="async"` on all.

16. Buttons: `btn btn--flag`, `btn btn--quiet`, `btn btn--ghost`. These are shared classes; I don't redefine them. Good.

17. Let me check the links: `/`, `/projects/`, `/blog/`, `/help/`, `/connect/` — all allowed routes. Internal anchors `#ch-01`..`#ch-05` exist. Good.

18. Breadcrumb links to `/` and current page. Good.

One more: I should remove the `<<<END>>>` line.

Also, I want to double-check the `.about-chapter__texture` overlapping. It's positioned absolute at top-right with 0.14 opacity behind content. The chapter__head has z-index 1. The lead has z-index 1. Timeline has no z-index but comes after in DOM so it should paint above... actually z-index 0 on the texture (no z-index means auto). Let me set `z-index: 0` explicitly and give the timeline `position: relative; z-index: 1`. Actually the texture has `z-index: 0`, so elements with `position: static` paint in DOM order — the texture comes first in DOM so it's below. But z-index: 0 creates a stacking context... Actually for static positioned elements, z-index doesn't apply. The texture has `position: absolute` + `z-index: 0`, which creates a stacking context. Static siblings paint above positioned elements with z-index 0? No — positioned elements with z-index >= 0 paint above non-positioned block-level boxes in the same stacking context. Hmm.

Actually per CSS painting order: within a stacking context, the order is: background, then negative z-index children, then in-flow non-positioned block boxes, then floats, then inline content, then z-index:0/auto positioned elements, then positive z-index.

Wait, that means z-index:0 absolutely positioned elements paint ABOVE non-positioned block boxes. So the texture would be above the timeline text!

Let me fix: give the texture `z-index: -1`? That would put it behind the chapter's own background but still within .page-about's stacking context. Actually the `.about-chapter` has `position: relative` which creates its own stacking context only if z-index is set. It's `position: relative` without z-index, so no new stacking context (unless other properties). So `z-index: -1` on the texture would place it behind `.about-chapter`'s background (which is transparent) and behind .about-body... it could go behind the page background. Since `main` background is set by shared CSS likely, it might be hidden.

Safest: give `.about-chapter` `isolation: isolate` or `z-index: 0` to create a stacking context, then use `z-index: 0` for texture and `z-index: 1` for all content.

Let me add:
```css
.page-about .about-chapter {
  position: relative;
  isolation: isolate;
  ...
}
```
Then texture `z-index: 0`, and content `z-index: 1`.

But the timeline/flow/lines need `position: relative` to accept z-index. Let me add a rule:

```css
.page-about .about-chapter > *:not(.about-chapter__texture) {
  position: relative;
  z-index: 1;
}
```

Hmm, that's a bit heavy handed but works. Actually simpler: keep `isolation: isolate` on `.about-chapter` and set texture `z-index: 0`, then any content needs `position: relative; z-index: 1`. Let me just add position:relative + z-index:1 to the content blocks I care about.

Actually, the simplest robust fix: don't use absolute positioning for the texture. Instead, place it as a normal block element at the top of the chapter with negative margin, or just skip it.

Alternative: make the texture a background layer behind using `z-index: 0` and adding a `::after` on the chapter... hmm.

Cleanest: 
```css
.page-about .about-chapter {
  position: relative;
  isolation: isolate;
}
.page-about .about-chapter__texture {
  position: absolute;
  ...
  z-index: 0;
}
.page-about .about-chapter > :not(.about-chapter__texture) {
  position: relative;
  z-index: 1;
}
```

That works and is simple. Let me include it.

Let me rewrite the relevant CSS block.

Also, `.about-chapter__texture` with `width: min(100%, 620px)` — since the chapter is contained, this is fine. And it's inside `.wrap` via `.about-body` so no overflow.

Also — for chapter 01, the texture sits behind the timeline. OK.

Now let me also reconsider: `.timeline__item--now .timeline__ver` — I use `.timeline__ver--now` with red background. And parent `.timeline__item--now .timeline__card` gets green background. The `timeline__ver--now` has red background + paper text. On dark green card, red pill with white text — readable. Good.

Let me also double-check the `.timeline__ver` default: paper background, gold text. On sand card — fine.

Now, one more: `.page-about .about-chapter__texture` for chapters 02-05 — they don't have a texture element (only ch-01 does). Right, only ch-01. Fine.

OK, let me also make sure `.page-about .about-chapter > :not(.about-chapter__texture) { position: relative; z-index: 1; }` doesn't break `.media-frame` or `.lines-map__figure`. Those are `position: static` normally, becoming `relative` — no visual change. The `tilt` rotate transform still works. Good.

But `.timeline::before` is a pseudo-element of `.timeline` which is now `position: relative` — that's what it needs. Good.

And `.timeline__item::before` — needs `.timeline__item` positioned, which it already is. Good.

Let me finalize.

One last thing: the hero figure with `media-frame--tilt-r` rotation — rotation may cause horizontal overflow inside `.wrap`. The shared `.wrap` likely has `padding` but not `overflow: hidden`. I added `overflow: hidden` to `.about-hero`. Good.

Let me write the final answer now with corrections.
<main id="main-content" class="page-about">
  <div class="wrap">
    <nav class="breadcrumbs" aria-label="位置">
      <ol class="breadcrumbs__list">
        <li><a href="/">首页</a></li>
        <li aria-current="page">品牌档案</li>
      </ol>
    </nav>
  </div>

  <header class="about-hero">
    <div class="wrap about-hero__inner">
      <div class="about-hero__text">
        <p class="eyebrow">Brand File</p>
        <h1 class="about-hero__title">七次改版，把赛季判罚<br>理成一份能反复翻的资料</h1>
        <p class="about-hero__lead">爱游戏娱乐赛从 2018 年的一页入口做起，到今天覆盖 12 个赛季的判罚记录、四大联赛的并排对照和历史数据的往回翻阅。累计超过 63 万电脑端用户把这里收进浏览器收藏夹，按自己的节奏查停赛、比联赛、翻赛季。</p>
        <ul class="about-hero__facts">
          <li class="about-fact">
            <span class="about-fact__value num">2018</span>
            <span class="about-fact__label">上线运营至今</span>
          </li>
          <li class="about-fact">
            <span class="about-fact__value num">12</span>
            <span class="about-fact__label">个赛季纳入记录</span>
          </li>
          <li class="about-fact">
            <span class="about-fact__value num">48600</span>
            <span class="about-fact__label">条判罚条目</span>
          </li>
          <li class="about-fact">
            <span class="about-fact__value num">18</span>
            <span class="about-fact__label">名团队成员</span>
          </li>
        </ul>
      </div>
      <figure class="media-frame media-frame--4x3 media-frame--tilt-r about-hero__figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="黄昏暖光下的体育场馆看台，阶梯与围栏形成斜向线条" decoding="async">
        <figcaption class="media-frame__caption">乌鲁木齐本地体育场景，是我们最常取材的地方</figcaption>
      </figure>
    </div>
  </header>

  <div class="wrap about-shell">
    <nav class="about-rail" aria-label="本页章节索引">
      <p class="about-rail__label">本页目录</p>
      <ol class="about-rail__list">
        <li><a class="about-rail__link" href="#ch-01" data-spy-link><span class="num">01</span> 版本演进</a></li>
        <li><a class="about-rail__link" href="#ch-02" data-spy-link><span class="num">02</span> 三条内容线</a></li>
        <li><a class="about-rail__link" href="#ch-03" data-spy-link><span class="num">03</span> 记录怎么来</a></li>
        <li><a class="about-rail__link" href="#ch-04" data-spy-link><span class="num">04</span> 团队分工</a></li>
        <li><a class="about-rail__link" href="#ch-05" data-spy-link><span class="num">05</span> 用户与时段</a></li>
      </ol>
    </nav>

    <div class="about-body">

      <section class="about-chapter" id="ch-01" data-chapter aria-labelledby="ch-01-title">
        <img class="about-chapter__texture" src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="抽象层叠弧线纹理，低对比度，衬托版本演进的叙述" loading="lazy" decoding="async">
        <div class="chapter__head">
          <span class="chapter__index num">01</span>
          <h2 class="chapter__title" id="ch-01-title">从一页入口，到一个能翻的体系</h2>
        </div>
        <p class="chapter__lead">第一版上线时，这一页只装得下当轮比赛的判罚记录，看完就得等下一轮。后来每次动手改版，我们都先问自己一句：翻资料的人这一次卡在哪一步。答案一次比一次具体，版本也就一次比一次往前走。</p>

        <ol class="timeline">
          <li class="timeline__item">
            <div class="timeline__card">
              <span class="timeline__ver">第一版 · 2018</span>
              <h3 class="timeline__name">当轮记录，一屏看完</h3>
              <p class="timeline__desc">把当轮各场的黄牌、红牌摆在一起，不用在多个页面之间来回切。解决的是“看完球想知道这轮谁停赛”。</p>
            </div>
          </li>
          <li class="timeline__item">
            <div class="timeline__card">
              <span class="timeline__ver">第二版</span>
              <h3 class="timeline__name">赛季与轮次能往回翻了</h3>
              <p class="timeline__desc">加上赛季切换和轮次筛选，上一轮看不到的记录可以往回找。解决的是“想确认某个球员的黄牌是不是累积到停赛线”。</p>
            </div>
          </li>
          <li class="timeline__item">
            <div class="timeline__card">
              <span class="timeline__ver">第三版</span>
              <h3 class="timeline__name">判罚记录独立成栏目</h3>
              <p class="timeline__desc">红黄牌从页面上的一个区块升级为常驻栏目，回到站点就能直接进。解决的是“每次都要从头找入口”。</p>
            </div>
          </li>
          <li class="timeline__item">
            <div class="timeline__card">
              <span class="timeline__ver">第四版</span>
              <h3 class="timeline__name">四个联赛能并排看了</h3>
              <p class="timeline__desc">英格兰超级联赛、西班牙足球甲级联赛、意大利足球甲级联赛与德国足球甲级联赛的数据被放进同一组对照视图，横向比较判罚密度。解决的是“不同联赛的判罚尺度差多少”。</p>
            </div>
          </li>
          <li class="timeline__item">
            <div class="timeline__card">
              <span class="timeline__ver">第五版</span>
              <h3 class="timeline__name">为电脑端收藏入口重排布局</h3>
              <p class="timeline__desc">主内容区加宽，数据表改为可横向滑动的切片，打开收藏夹里的固定入口就能直接读。解决的是“电脑上字号太小、表格挤成一团”。</p>
            </div>
          </li>
          <li class="timeline__item">
            <div class="timeline__card">
              <span class="timeline__ver">第六版</span>
              <h3 class="timeline__name">不用鼠标也能走完全站</h3>
              <p class="timeline__desc">统一键盘焦点反馈，章节之间可以用 Tab 和方向键切换，数据切片配了上一段、下一段按钮。解决的是“只想用键盘翻资料”。</p>
            </div>
          </li>
          <li class="timeline__item timeline__item--now">
            <div class="timeline__card">
              <span class="timeline__ver timeline__ver--now">第七版 · 本次</span>
              <h3 class="timeline__name">分类标签锚定与并排导航</h3>
              <p class="timeline__desc">左侧分类标签固定下来，栏目入口集中到顶部，从任意页面一次点击就能到达对照页、赛事手记与帮助中心。</p>
            </div>
          </li>
        </ol>
      </section>

      <section class="about-chapter" id="ch-02" data-chapter aria-labelledby="ch-02-title">
        <div class="chapter__head">
          <span class="chapter__index num">02</span>
          <h2 class="chapter__title" id="ch-02-title">常年只做三件事，但每件都做到底</h2>
        </div>
        <p class="chapter__lead">打开站点的球迷，需求其实不复杂：查一名球员攒了几张黄牌、比一比两个联赛的判罚节奏、或者回到三年前的某个赛季看看当时的情况。我们把力气压在三条线上，让这三件事各自都有明确的去处。</p>

        <div class="lines-layout">
          <figure class="lines-map__figure">
            <svg class="lines-map" viewBox="0 0 360 260" role="img" aria-labelledby="lines-map-title">
              <title id="lines-map-title">红黄牌记录、多联赛对照与赛季翻阅三条内容主线的关系</title>
              <line x1="85" y1="78" x2="275" y2="78" stroke="#0B3B2E" stroke-opacity=".22" stroke-width="2" stroke-dasharray="6 8"/>
              <line x1="275" y1="78" x2="180" y2="190" stroke="#0B3B2E" stroke-opacity=".22" stroke-width="2" stroke-dasharray="6 8"/>
              <line x1="180" y1="190" x2="85" y2="78" stroke="#0B3B2E" stroke-opacity=".22" stroke-width="2" stroke-dasharray="6 8"/>
              <circle cx="85" cy="78" r="52" fill="#E02424"/>
              <circle cx="275" cy="78" r="52" fill="#FFC43D"/>
              <circle cx="180" cy="190" r="52" fill="#1E6B4B"/>
              <text x="85" y="74" text-anchor="middle" font-size="13" font-weight="700" fill="#FBF7EF">红黄牌</text>
              <text x="85" y="92" text-anchor="middle" font-size="13" font-weight="700" fill="#FBF7EF">记录整理</text>
              <text x="275" y="74" text-anchor="middle" font-size="13" font-weight="700" fill="#12181A">多联赛</text>
              <text x="275" y="92" text-anchor="middle" font-size="13" font-weight="700" fill="#12181A">数据对照</text>
              <text x="180" y="186" text-anchor="middle" font-size="13" font-weight="700" fill="#FBF7EF">历史赛季</text>
              <text x="180" y="204" text-anchor="middle" font-size="13" font-weight="700" fill="#FBF7EF">往回翻阅</text>
            </svg>
          </figure>

          <ul class="lines-list">
            <li class="lines-list__item lines-list__item--red">
              <h3 class="lines-list__title">判罚记录整理</h3>
              <p class="lines-list__text">每一条记录标清联赛、赛季、轮次、球队和判罚类型，按赛季归档。适合想确认某位球员离停赛还差几张牌，或者回看一场比赛的判罚情况。</p>
            </li>
            <li class="lines-list__item lines-list__item--yellow">
              <h3 class="lines-list__title">联赛之间的横向对照</h3>
              <p class="lines-list__text">四个联赛的累计黄牌数、单场黄牌均值、红牌场次占比、停赛触发次数、判罚密度变化与主场客场差异放在同一屏里比较，写赛前资料或者做赛季复盘时，不用自己再拼表格。</p>
            </li>
            <li class="lines-list__item lines-list__item--green">
              <h3 class="lines-list__title">历史赛季往回翻</h3>
              <p class="lines-list__text">十二年跨度的记录都留在库里，旧赛季不会因为新赛季开始就被顶掉，想往前翻几轮就翻几轮。</p>
            </li>
          </ul>
        </div>
      </section>

      <section class="about-chapter" id="ch-03" data-chapter aria-labelledby="ch-03-title">
        <div class="chapter__head">
          <span class="chapter__index num">03</span>
          <h2 class="chapter__title" id="ch-03-title">一条记录，从赛后到你眼前</h2>
        </div>
        <p class="chapter__lead">你翻到的那一行“第 27 轮 · 客队 · 黄牌”，背后走过了四个步骤。常规节奏下，比赛结束后一天内就能在栏目里找到当轮记录；对照表每周两次固定更新，赛程密集的时候会改成每天。</p>

        <div class="flow-layout">
          <figure class="media-frame media-frame--4x3 media-frame--tilt-l flow-layout__figure">
            <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="工作台上摊开的记录纸与笔记本电脑局部特写，画面中有红黄两色的标记贴" loading="lazy" decoding="async">
          </figure>

          <ol class="flow">
            <li class="flow__step">
              <span class="flow__num num">01</span>
              <h3 class="flow__title">赛后先归拢</h3>
              <p class="flow__text">终场哨响，公开赛事记录陆续放出，我们把当轮各场的判罚条目先按联赛分堆放在一起。</p>
            </li>
            <li class="flow__step">
              <span class="flow__num num">02</span>
              <h3 class="flow__title">逐条比对再定稿</h3>
              <p class="flow__text">同一场出现出入时以赛后的官方通告为准，球员与球队名称统一成简体中文的常用译名。</p>
            </li>
            <li class="flow__step">
              <span class="flow__num num">03</span>
              <h3 class="flow__title">写进对应的赛季</h3>
              <p class="flow__text">每条记录带上联赛、赛季、轮次、球队与判罚类型，归入对应赛季；历史赛季的旧条目原样保留。</p>
            </li>
            <li class="flow__step">
              <span class="flow__num num">04</span>
              <h3 class="flow__title">24 小时内可查</h3>
              <p class="flow__text">常规赛事当天或次日上线，对照表每周两次刷新；联赛密集周会加密到每天一次。</p>
            </li>
          </ol>
        </div>
      </section>

      <section class="about-chapter" id="ch-04" data-chapter aria-labelledby="ch-04-title">
        <div class="chapter__head">
          <span class="chapter__index num">04</span>
          <h2 class="chapter__title" id="ch-04-title">18 个人，三个小组，隔着三千公里一起干活</h2>
        </div>
        <p class="chapter__lead">我们一共 18 名成员，乌鲁木齐本部 11 人，另外 7 人远程协作。团队不按页面分，按活儿分：谁负责把记录理清楚，谁负责让它看起来不费劲，各有各的一组人。</p>

        <div class="team-layout">
          <figure class="team-ring__figure">
            <svg class="team-ring" viewBox="0 0 200 200" role="img" aria-labelledby="team-ring-title">
              <title id="team-ring-title">团队构成：内容编辑 7 人，数据整理 6 人，前端体验 5 人</title>
              <circle cx="100" cy="100" r="80" fill="none" stroke="#F3E9D6" stroke-width="28"/>
              <circle class="team-ring__seg team-ring__seg--edit" cx="100" cy="100" r="80" fill="none" stroke="#E02424" stroke-width="28"
                      stroke-dasharray="195.4 502.65" stroke-dashoffset="0" transform="rotate(-90 100 100)"/>
              <circle class="team-ring__seg team-ring__seg--data" cx="100" cy="100" r="80" fill="none" stroke="#FFC43D" stroke-width="28"
                      stroke-dasharray="167.5 502.65" stroke-dashoffset="-195.4" transform="rotate(-90 100 100)"/>
              <circle class="team-ring__seg team-ring__seg--fe" cx="100" cy="100" r="80" fill="none" stroke="#1E6B4B" stroke-width="28"
                      stroke-dasharray="139.7 502.65" stroke-dashoffset="-362.9" transform="rotate(-90 100 100)"/>
              <text x="100" y="98" text-anchor="middle" font-size="38" font-weight="800" fill="#12181A">18</text>
              <text x="100" y="122" text-anchor="middle" font-size="12" fill="#5C6B63">名成员</text>
            </svg>
          </figure>

          <ul class="team-legend">
            <li class="team-legend__item">
              <span class="team-legend__dot team-legend__dot--edit" aria-hidden="true"></span>
              <div>
                <h3 class="team-legend__name">内容编辑 · 7 人</h3>
                <p class="team-legend__text">负责赛季手记、栏目说明与页面文案，也管译名的统一。你读到的每一段说明文字，都出自这个组。</p>
              </div>
            </li>
            <li class="team-legend__item">
              <span class="team-legend__dot team-legend__dot--data" aria-hidden="true"></span>
              <div>
                <h3 class="team-legend__name">数据整理 · 6 人</h3>
                <p class="team-legend__text">按轮次把判罚条目整理入库，维持四个联赛对照表每周两次的更新节奏，赛程密集期轮班盯每天更新。</p>
              </div>
            </li>
            <li class="team-legend__item">
              <span class="team-legend__dot team-legend__dot--fe" aria-hidden="true"></span>
              <div>
                <h3 class="team-legend__name">前端体验 · 5 人</h3>
                <p class="team-legend__text">管电脑端的布局、键盘操作和横向滚动的数据切片，也负责让动效在开启减弱动态效果时安静下来。</p>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section class="about-chapter" id="ch-05" data-chapter aria-labelledby="ch-05-title">
        <div class="chapter__head">
          <span class="chapter__index num">05</span>
          <h2 class="chapter__title" id="ch-05-title">谁在打开我们，什么时候打开</h2>
        </div>
        <p class="chapter__lead">来看球的人多数有个共同习惯：把入口固定在浏览器收藏夹里，晚上坐下来慢慢翻。这也解释了为什么我们始终把电脑端的阅读体验放在第一位——大屏上对照四个联赛，比在小屏上滑来滑去舒服得多。</p>

        <ul class="aud-grid">
          <li class="aud-card">
            <span class="aud-card__value num">约 60%</span>
            <span class="aud-card__label">访客来自电脑端收藏入口</span>
            <p class="aud-card__text">打开浏览器，点一下收藏夹里的固定地址，直接进到判罚记录栏目。</p>
          </li>
          <li class="aud-card">
            <span class="aud-card__value num">19—23 时</span>
            <span class="aud-card__label">晚间访问高峰区间</span>
            <p class="aud-card__text">比赛日结束后的几个小时最集中，周末会稍稍往下午延伸。</p>
          </li>
          <li class="aud-card">
            <span class="aud-card__value num">3—8 年</span>
            <span class="aud-card__label">主要用户的看球年数</span>
            <p class="aud-card__text">习惯追同一支球队、同一位球员的累计牌数，也关注停赛节奏怎么走。</p>
          </li>
        </ul>

        <div class="region-band">
          <h3 class="region-band__title">新疆本地与周边，是第一批用户</h3>
          <p class="region-band__text">站点最早的一批用户来自乌鲁木齐及周边地区，他们更在意访问顺不顺、页面绕不绕弯。新疆本地用户可以通过在线工单获得优先响应，客服服务时段为工作日 9 时至 21 时，平均首次响应 18 分钟。</p>
        </div>

        <blockquote class="about-quote">
          <p>我们自己也看球。翻不动、找不到、表格挤成一团，就是下一版要动手改的地方。</p>
        </blockquote>
      </section>

      <section class="cta-band" aria-labelledby="cta-title">
        <div class="cta-band__inner">
          <h2 class="cta-band__title" id="cta-title">从哪一栏开始翻</h2>
          <p class="cta-band__text">想比不同联赛的判罚节奏，去数据栏目；想按赛季往回翻红黄牌记录，去赛事手记；遇到翻不动或找不着的情况，帮助中心有分步说明，也可以直接找客服。</p>
          <div class="cta-band__actions">
            <a class="btn btn--flag" href="/projects/">看联赛对照</a>
            <a class="btn btn--quiet" href="/blog/">翻赛季手记</a>
            <a class="btn btn--ghost" href="/help/">查操作说明</a>
            <a class="btn btn--ghost" href="/connect/">找客服通道</a>
          </div>
        </div>
      </section>

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

.page-about {
  --about-rail-w: 220px;
  --about-line: #E6DCC6;
  padding-bottom: 72px;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: 20px 0 44px;
  overflow: hidden;
}

.page-about .about-hero__inner {
  display: grid;
  gap: 30px;
}

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

.page-about .about-hero__title {
  margin: 10px 0 18px;
  font-size: clamp(1.9rem, 6.6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--yellow);
}

.page-about .about-hero__lead {
  margin: 0 0 26px;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.82;
  color: var(--mist);
}

.page-about .about-hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--sand);
  border-radius: var(--radius-m);
  border-left: 4px solid var(--yellow);
}

.page-about .about-fact__value {
  font-family: var(--font-mono);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.page-about .about-fact__label {
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--mist);
}

.page-about .about-hero__figure {
  margin: 0;
  width: 100%;
}

/* ---------- 左栏 + 主体 ---------- */
.page-about .about-shell {
  display: grid;
  gap: 34px;
  align-items: start;
}

.page-about .about-rail__label {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

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

.page-about .about-rail__link {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--sand);
  border: 2px solid transparent;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.page-about .about-rail__link .num {
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: 4px;
}

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

.page-about .about-rail__link.is-active {
  background: var(--green-deep);
  color: var(--paper);
  border-color: var(--green-deep);
}

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

/* ---------- 章节 ---------- */
.page-about .about-chapter {
  position: relative;
  isolation: isolate;
  margin-bottom: 68px;
  scroll-margin-top: 104px;
}

.page-about .about-chapter:last-of-type {
  margin-bottom: 48px;
}

.page-about .about-chapter__texture {
  position: absolute;
  top: -10px;
  right: 0;
  width: min(100%, 620px);
  height: auto;
  opacity: 0.14;
  border-radius: var(--radius-xl);
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.page-about .about-chapter > :not(.about-chapter__texture) {
  position: relative;
  z-index: 1;
}

.page-about .about-chapter .chapter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

.page-about .about-chapter .chapter__index {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}

.page-about .about-chapter .chapter__title {
  margin: 0;
  font-size: clamp(1.28rem, 3.2vw, 1.76rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.page-about .about-chapter .chapter__lead {
  margin: 0 0 28px;
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.82;
  color: var(--mist);
}

/* ---------- 01 时间轴 ---------- */
.page-about .timeline {
  position: relative;
  margin: 0;
  padding: 4px 0 0 34px;
  list-style: none;
}

.page-about .timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow) 62%, var(--red) 100%);
  opacity: 0.62;
}

.page-about .timeline__item {
  position: relative;
  margin-bottom: 18px;
}

.page-about .timeline__item:last-child {
  margin-bottom: 0;
}

.page-about .timeline__item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 16px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--yellow);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}

.page-about .timeline__item--now::before {
  background: var(--red);
  border-color: var(--red);
}

.page-about .timeline__card {
  padding: 16px 18px;
  background: var(--sand);
  border-radius: var(--radius-m);
  border-left: 5px solid transparent;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease);
}

.page-about .timeline__item:hover .timeline__card,
.page-about .timeline__item:focus-within .timeline__card {
  transform: translateY(-4px);
  border-left-color: var(--yellow);
  box-shadow: var(--shadow-2);
}

.page-about .timeline__item--now .timeline__card {
  background: var(--green-deep);
}

.page-about .timeline__item--now .timeline__name {
  color: var(--paper);
}

.page-about .timeline__item--now .timeline__desc {
  color: rgba(251, 247, 239, 0.82);
}

.page-about .timeline__ver {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-about .timeline__ver--now {
  background: var(--red);
  color: var(--paper);
}

.page-about .timeline__name {
  margin: 0 0 6px;
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.page-about .timeline__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 02 三条内容线 ---------- */
.page-about .lines-layout {
  display: grid;
  gap: 26px;
}

.page-about .lines-map__figure {
  margin: 0;
  padding: 10px;
  background: var(--sand);
  border-radius: var(--radius-xl);
}

.page-about .lines-map {
  display: block;
  width: 100%;
  height: auto;
}

.page-about .lines-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .lines-list__item {
  padding: 16px 18px;
  background: var(--sand);
  border-radius: var(--radius-m);
  border-top: 5px solid var(--mist);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.page-about .lines-list__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.page-about .lines-list__item--red {
  border-top-color: var(--red);
}

.page-about .lines-list__item--yellow {
  border-top-color: var(--yellow);
}

.page-about .lines-list__item--green {
  border-top-color: var(--green-pitch);
}

.page-about .lines-list__title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}

.page-about .lines-list__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 03 记录流程 ---------- */
.page-about .flow-layout {
  display: grid;
  gap: 26px;
}

.page-about .flow-layout__figure {
  margin: 0;
}

.page-about .flow {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .flow__step {
  padding: 16px 18px 16px 20px;
  background: var(--paper);
  border: 2px solid var(--about-line);
  border-radius: var(--radius-m);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.page-about .flow__step:hover {
  transform: translateY(-4px);
  border-color: var(--yellow);
}

.page-about .flow__num {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--red);
}

.page-about .flow__title {
  margin: 0 0 5px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.page-about .flow__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--mist);
}

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

.page-about .team-ring__figure {
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 18px;
  background: var(--green-deep);
  border-radius: var(--radius-xl);
}

.page-about .team-ring {
  display: block;
  width: min(100%, 250px);
  height: auto;
}

.page-about .team-ring__seg {
  transition: stroke-width 0.24s var(--ease), stroke 0.24s var(--ease);
}

.page-about .team-ring__seg--edit:hover {
  stroke-width: 34;
  stroke: var(--red-deep);
}

.page-about .team-ring__seg--data:hover {
  stroke-width: 34;
  stroke: var(--gold);
}

.page-about .team-ring__seg--fe:hover {
  stroke-width: 34;
  stroke: var(--green-pitch);
}

.page-about .team-legend {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .team-legend__item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px;
  background: var(--sand);
  border-radius: var(--radius-m);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.page-about .team-legend__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.page-about .team-legend__dot {
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 50%;
}

.page-about .team-legend__dot--edit {
  background: var(--red);
}

.page-about .team-legend__dot--data {
  background: var(--yellow);
}

.page-about .team-legend__dot--fe {
  background: var(--green-pitch);
}

.page-about .team-legend__name {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.page-about .team-legend__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--mist);
}

/* ---------- 05 用户与时段 ---------- */
.page-about .aud-grid {
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.page-about .aud-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius-m);
  background: var(--sand);
  border-bottom: 5px solid var(--orange);
}

.page-about .aud-card__value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}

.page-about .aud-card__label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.page-about .aud-card__text {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.72;
  color: var(--mist);
}

.page-about .region-band {
  padding: 20px 22px;
  border-radius: var(--radius-l);
  background: var(--green-deep);
  color: var(--paper);
  margin-bottom: 22px;
}

.page-about .region-band__title {
  margin: 0 0 8px;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--yellow);
}

.page-about .region-band__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: rgba(251, 247, 239, 0.86);
}

.page-about .about-quote {
  margin: 0;
  padding: 18px 22px;
  background: var(--sand);
  border-left: 6px solid var(--yellow);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.page-about .about-quote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- 收尾 ---------- */
.page-about .cta-band {
  margin-top: 20px;
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--coal) 0%, var(--green-deep) 100%);
  color: var(--paper);
}

.page-about .cta-band__title {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  font-weight: 800;
  color: var(--yellow);
}

.page-about .cta-band__text {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 0.94rem;
  line-height: 1.8;
  color: rgba(251, 247, 239, 0.86);
}

.page-about .cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 700px) {
  .page-about .aud-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (min-width: 820px) {
  .page-about .about-hero {
    padding: 34px 0 60px;
  }

  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 46px;
    align-items: center;
  }

  .page-about .team-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: center;
    gap: 34px;
  }

  .page-about .flow-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 30px;
  }
}

@media (min-width: 1000px) {
  .page-about .about-shell {
    grid-template-columns: var(--about-rail-w) minmax(0, 1fr);
    gap: 56px;
  }

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

  .page-about .about-rail__list {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .about-rail__link {
    border-radius: var(--radius-m);
    border-left: 4px solid transparent;
    white-space: normal;
  }

  .page-about .about-rail__link.is-active {
    border-left-color: var(--red);
  }

  .page-about .lines-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 30px;
  }

  .page-about .about-chapter {
    margin-bottom: 84px;
  }

  .page-about .cta-band {
    padding: 36px 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .timeline__card,
  .page-about .timeline__item::before,
  .page-about .lines-list__item,
  .page-about .team-legend__item,
  .page-about .flow__step,
  .page-about .team-ring__seg,
  .page-about .about-rail__link {
    transition: none;
  }

  .page-about .timeline__item:hover .timeline__card,
  .page-about .lines-list__item:hover,
  .page-about .team-legend__item:hover,
  .page-about .flow__step:hover {
    transform: none;
  }
}