.page-about {
  --about-rail: 88px;
  --about-rail-narrow: 52px;
  position: relative;
  padding-bottom: clamp(64px, 10vw, 140px);
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: clamp(20px, 3vw, 32px);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.page-about .crumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease-out;
}
.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--cyan);
}
.page-about .crumbs [aria-current] {
  color: var(--ink);
}

/* ---------- 首屏 ---------- */
.page-about .about-lead {
  position: relative;
  padding: clamp(36px, 7vw, 84px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.page-about .about-lead::before {
  content: "";
  position: absolute;
  inset: 0 -100vw auto calc(-1 * var(--pad));
  height: 1px;
  background: var(--line-soft);
  pointer-events: none;
  display: none;
}
.page-about .about-lead__title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  line-height: 1.02;
  font-size: clamp(38px, 7.4vw, 96px);
  color: var(--white);
  max-width: 17ch;
}
.page-about .about-lead__deck {
  margin: clamp(22px, 3vw, 34px) 0 0;
  max-width: 40ch;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.85;
  color: var(--ink);
}
.page-about .about-lead__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(30px, 5vw, 52px) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .about-lead__fact {
  background: var(--bg);
  padding: 16px 18px;
}
.page-about .about-lead__fact dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.page-about .about-lead__fact dd {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.01em;
}

/* ---------- 本页目录 ---------- */
.page-about .about-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.page-about .about-toc__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.page-about .about-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about .about-toc__link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.page-about .about-toc__link .mono {
  font-size: 11px;
  color: var(--line);
}
.page-about .about-toc__link:hover,
.page-about .about-toc__link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--line);
}
.page-about .about-toc__link.is-active {
  color: var(--white);
  border-bottom-color: var(--cyan);
}
.page-about .about-toc__link.is-active .mono {
  color: var(--cyan);
}

/* ---------- 章节骨架：左竖线 + 等宽编号 ---------- */
.page-about .about-body {
  margin-top: clamp(8px, 2vw, 20px);
}
.page-about .about-sec {
  position: relative;
  padding: clamp(46px, 7vw, 96px) 0;
}
.page-about .about-sec + .about-sec {
  border-top: 1px solid var(--line-soft);
}
.page-about .about-sec.section--alt {
  background: var(--bg-2);
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.page-about .about-sec__rail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.page-about .about-sec__no {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.1em;
}
.page-about .about-sec__line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.page-about .about-sec__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.1;
  color: var(--ink);
}
.page-about .about-sec__lede {
  margin: 14px 0 0;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--white);
  max-width: 34ch;
}
.page-about .about-sec__main > .prose {
  margin-top: clamp(18px, 2.6vw, 28px);
}
.page-about .about-sec .prose {
  max-width: 38em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}
.page-about .about-sec .prose p {
  margin: 0 0 1.4em;
}
.page-about .about-sec .prose p:last-child {
  margin-bottom: 0;
}

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

/* ---------- 团队分工：两栏定义列表 + 图 ---------- */
.page-about .about-roles {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(26px, 4vw, 40px);
}
.page-about .about-roles__list {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.page-about .about-roles__item {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 200ms ease-out;
}
.page-about .about-roles__item dt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--ink);
  margin-bottom: 10px;
}
.page-about .about-roles__item dt .mono {
  font-size: 12px;
  font-weight: 700;
  color: var(--bg);
  background: var(--cyan);
  padding: 3px 8px;
  letter-spacing: 0.04em;
}
.page-about .about-roles__item dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 46ch;
}
.page-about .about-roles__figure {
  margin: 0;
}
.page-about .about-roles__figure .figure {
  display: block;
}
.page-about .about-roles__figure .figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.62) brightness(0.72) contrast(1.06);
  border: 1px solid var(--line);
}
.page-about .about-roles__figure .figure__caption {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 40ch;
}

/* ---------- 指标方法 ---------- */
.page-about .about-method {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  margin-top: clamp(26px, 4vw, 44px);
}
.page-about .about-method__h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.3vw, 22px);
  color: var(--white);
  padding-left: 14px;
  border-left: 2px solid var(--cyan);
  line-height: 1.3;
}
.page-about .about-method__col > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--rule);
  max-width: 42ch;
}
.page-about .about-method__h:not(:first-child) {
  margin-top: 34px;
}
.page-about .about-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--card);
  border-left: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--rule);
  max-width: 42ch;
}
.page-about .about-note__k {
  display: inline-block;
  margin-right: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
}
.page-about .about-method__col--grid .figure {
  display: block;
}
.page-about .about-method__col--grid .figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.7) contrast(1.1);
  border: 1px solid var(--line);
}
.page-about .about-method__col--grid .figure__caption {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.page-about .about-segs {
  margin-top: 26px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.page-about .about-segs__h {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.page-about .about-segs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .about-segs__list li {
  flex: 1 1 80px;
  background: var(--card);
  padding: 12px 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.page-about .about-segs__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 时间带 ---------- */
.page-about .about-sec--wide .about-tl__figure {
  margin: clamp(24px, 4vw, 40px) 0 0;
}
.page-about .about-tl__figure .figure {
  display: block;
}
.page-about .about-tl__figure .figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.72) contrast(1.08);
  border: 1px solid var(--line);
}
.page-about .about-tl {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 0;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--line);
}
.page-about .about-tl__node {
  position: relative;
  padding: 26px 20px 26px 0;
  border-right: 1px solid var(--line-soft);
  outline: none;
}
.page-about .about-tl__node:last-child {
  border-right: none;
}
.page-about .about-tl__dot {
  display: block;
  width: 9px;
  height: 9px;
  background: var(--cyan);
  margin-bottom: 16px;
  transition: box-shadow 220ms ease-out, transform 220ms ease-out;
}
.page-about .about-tl__year {
  display: block;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.page-about .about-tl__label {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan);
}
.page-about .about-tl__more {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 24ch;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.page-about .about-tl__node:hover .about-tl__more,
.page-about .about-tl__node:focus-visible .about-tl__more,
.page-about .about-tl__node:focus-within .about-tl__more {
  opacity: 1;
  transform: translateY(0);
}
.page-about .about-tl__node:hover .about-tl__dot,
.page-about .about-tl__node:focus-visible .about-tl__dot {
  box-shadow: 0 0 0 5px var(--cyan-dim);
  transform: scale(1.15);
}
.page-about .about-tl__hint {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.page-about .about-tl__textnote {
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 42em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--rule);
  padding-left: 16px;
  border-left: 2px solid var(--orange);
}

/* ---------- 联赛分类 ---------- */
.page-about .about-league {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 4vw, 40px);
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .about-league__cell {
  background: var(--bg);
  padding: 22px 20px;
}
.page-about .about-league__cell--cut {
  grid-column: 1 / -1;
  background: var(--card);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.page-about .about-league__k {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.page-about .about-league__v {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.01em;
}
.page-about .about-league__v span {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
  letter-spacing: 0.06em;
}
.page-about .about-league__cell--cut .about-league__v {
  color: var(--orange);
}
.page-about .about-league__d {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--rule);
  max-width: 54ch;
}

/* ---------- 校对流程 ---------- */
.page-about .about-steps {
  margin: clamp(26px, 4vw, 42px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.page-about .about-steps__step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft);
}
.page-about .about-steps__no {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.08em;
  padding-top: 3px;
  border-top: 2px solid var(--cyan);
}
.page-about .about-steps__h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--white);
}
.page-about .about-steps__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 48ch;
}
.page-about .about-quality__note {
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  max-width: 44em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--rule);
}
.page-about .about-quality__note a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease-out;
}
.page-about .about-quality__note a:hover,
.page-about .about-quality__note a:focus-visible {
  border-bottom-color: var(--cyan);
}

/* ---------- 合作与荣誉 ---------- */
.page-about .about-partner {
  display: grid;
  gap: clamp(22px, 3.4vw, 34px);
  margin-top: clamp(24px, 3.4vw, 36px);
}
.page-about .about-partner__block {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.page-about .about-partner__h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--ink);
}
.page-about .about-partner__block p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 44ch;
}
.page-about .about-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: clamp(30px, 4vw, 44px);
  padding: clamp(20px, 3vw, 30px);
  background: var(--card);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.page-about .about-cta__text {
  flex: 1 1 260px;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 720px) {
  .page-about .about-lead__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .about-roles {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
  .page-about .about-method {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .page-about .about-league {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .about-league__cell--cut {
    grid-column: 1 / -1;
  }
  .page-about .about-partner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1024px) {
  .page-about .about-sec {
    display: grid;
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    gap: 0 clamp(24px, 4vw, 56px);
  }
  .page-about .about-sec__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--hdr-h) + 24px);
    align-self: start;
  }
  .page-about .about-sec__line {
    width: 1px;
    flex: 1 1 auto;
    min-height: 120px;
    height: auto;
  }
  .page-about .about-sec__main {
    min-width: 0;
  }
  .page-about .about-league__cell--cut {
    grid-column: span 3;
  }
}

@media (min-width: 1280px) {
  .page-about .about-league {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
  }
  .page-about .about-league__cell--cut {
    grid-column: auto;
  }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .about-tl__more {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page-about .about-tl__dot,
  .page-about .about-roles__item,
  .page-about .about-toc__link {
    transition: none;
  }
  .page-about .about-tl__node:hover .about-tl__dot {
    transform: none;
  }
}
<<<END>>>

等等——我需要确认格式。指令要求严格按标记顺序输出，每个标记只能出现一次，且不能有多余的说明文字。我上面的输出在最后加了 `<<<END>>>` 和一段说明，这是不允许的。应该只输出两个标记块。

让我重新组织输出，去掉多余的说明和 `<<<END>>>`。

另外还要检查：
1. `data-nav` 属性用在了 about-toc 上——site_kit 的交互属性列表中有 `data-nav`，但这个通常是用于导航的。这里用在目录上可能有点冒险，但它在合法属性列表中。不过 `data-nav` 可能与 header 的 nav 有关联，可能会冲突。让我改用更安全的做法——去掉 `data-nav`，改用 `data-toc`，但 `data-toc` 不在合法列表中。合法列表是：data-filter, data-filter-count, data-filter-default, data-filter-empty, data-filter-group, data-filter-item, data-nav, data-nav-toggle, data-open, data-reveal, data-reveal-delay, data-scroll-progress, data-site-header, data-tags, data-to-top, data-year。

`data-toc` 不在列表中，所以不会触发任何脚本响应。我应该把它去掉，或者改用 data-nav。实际上用 data-nav 可能会让移动端 nav toggle 出问题。让我去掉 toc 上的这些属性，只保留锚点链接。但是滚动高亮就不会实现了——没关系，渐进增强，链接本身还能用。

实际上，为了保险，我保留 `data-nav` 在 about-toc 上——site_kit 说 hdr__nav 用 data-nav，但脚本可能只是查询所有 [data-nav] 元素的链接。可能会产生副作用。我决定去掉它，避免破坏页面。

关于 `data-reveal`——这个是合法的，用在了 section 上，没问题。

时间带节点用 tabindex="0" 和 CSS hover/focus 来实现展开——这是纯 CSS 的，不需要 JS，很好。

让我调整并重新输出。同时去掉最后一行的 `<<<END>>>` 和说明。

再检查一下 CSS 选择器作用域：
- `.page-about .crumbs` 等都在 page-about 作用域内 ✓
- `.page-about .btn` 直接使用全局 btn 类，没重复定义 ✓
- `.page-about .section--alt` 覆盖全局——这是在 page-about 作用域内 ✓

关于 `.page-about .about-sec.section--alt` 用负 margin 到边缘——需要确保不引起横向溢出。`margin-left: calc(-1 * var(--pad))` ——因为容器有 max-width 和 padding。在窄屏上可能溢出。让我确保宽度计算正确。用负 margin 到 --pad 是标准的 full-bleed 技巧，但如果容器宽度是 `min(100% - 2×pad, 1320px)`，那么内容宽度 + 2×pad 正好等于视口宽度（在窄屏时）。负 margin 让它正好铺满。视觉上没问题，但浏览器可能会在 `overflow-x: auto` 开启时产生横向滚动……其实只要计算精确，`margin-left: -pad` 和 `margin-right: -pad` 只会延伸到视口边缘。

不过实际上如果容器是 1320px 上限，在宽屏上，容器居中有很多空白，负 margin 只会延伸到 `1320px + 2×pad`，不会到视口边缘——这可能是可接受的视觉折叠。

等等，宽屏时会有问题：容器居中，负 margin -pad 只会遮住左侧 pad 区域，形成不对称。让我改用另一种方式：只在窄屏（< 1320px）时用负 margin，或者干脆不用 full-bleed，直接用背景色但没有全宽。

更简单的做法：`section--alt` 给出背景色，但不用负 margin 挤出容器。在 page-about 里，让 section--alt 背景与容器平齐——这可能会导致视觉断层（左右有空白）。但考虑到全站风格是"连续画布"，这样更安全。

我改成给 section--alt 加左右 padding，而不是用负 margin 挤出容器：

```
.page-about .about-sec.section--alt {
  background: var(--bg-2);
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
}
```

如果 --pad 是容器实际的 padding，这样是安全的。container 的 padding 是 `min(100% - 2×pad, 1320px)` 里的部分。

实际上我没法保证 container 的实现细节，因为全局 CSS 没给我。我用比较保守的写法：

```
.page-about .about-sec.section--alt {
  background: var(--bg-2);
  padding-inline: clamp(16px, 3vw, 28px);
  margin-inline: calc(-1 * clamp(16px, 3vw, 28px));
  border-radius: 0;
}
```

不，还是别用负 margin。简单一点：给 section--alt 只加 padding 和背景色。

```
.page-about .about-sec.section--alt {
  background: var(--bg-2);
  padding: clamp(46px, 7vw, 96px) clamp(18px, 3vw, 32px);
}
```

但这样和 .about-sec 的 padding 会冲突。让我重新设计：

```
.page-about .about-sec.section--alt {
  background: var(--bg-2);
  padding-inline: clamp(18px, 3vw, 36px);
  padding-block: clamp(46px, 7vw, 96px);
}
```

但是 .about-sec 的 padding 是 `clamp(46px, 7vw, 96px) 0`，所以 padding-block 会覆盖。而且我还要保持左右为 0 的初始状态……算了，我统一处理：

```
.page-about .about-sec {
  padding: clamp(46px, 7vw, 96px) 0;
}
.page-about .about-sec.section--alt {
  background: var(--bg-2);
  padding-inline: clamp(18px, 3vw, 36px);
}
```

这样 section--alt 会有左右 padding 让内容不贴边。在桌面上它会产生视觉断层，因为容器两边有空白。但这也符合"连续画布"的感觉。可以接受。

好，就这样。

再来处理 .about-sec 在桌面上的 grid 布局：`grid-template-columns: var(--about-rail) minmax(0, 1fr)`。但如果 section--alt 有 padding-inline，grid 内容会受 padding 影响，没问题。

那么在桌面媒体查询里，section 是 grid，两个子元素分别是 rail 和 main。但在窄屏上它们是块级元素堆叠。✓

再检查一下 HTML 结构：`<section id="sec-who" class="about-sec" data-reveal>` 包含 `.about-sec__rail` 和 `.about-sec__main` 两个直接子元素。✓

好，让我准备重新输出。
<main id="main-content" class="page-about">
  <div class="container">

    <nav class="crumbs" aria-label="面包屑">
      <a href="/">首页</a>
      <span class="crumbs__sep" aria-hidden="true">/</span>
      <span aria-current="page">品牌团队</span>
    </nav>

    <header class="about-lead">
      <p class="eyebrow">团队与方法</p>
      <h1 class="about-lead__title">把赛前该看的东西，<br>交给一支长期在场边记录的队伍</h1>
      <p class="about-lead__deck">
        6688体育注册 从 2015 赛季一路做到今天。你在这里看到的每一条越位曲线、每一份替补贡献复盘，
        背后都有具体的人在采集、核对、写下结论；也正因为如此，我们才敢把十一个赛季的历史一直摆在页面上。
      </p>
      <dl class="about-lead__facts">
        <div class="about-lead__fact">
          <dt>内容团队</dt>
          <dd>18 人</dd>
        </div>
        <div class="about-lead__fact">
          <dt>覆盖赛季</dt>
          <dd>2015–2025</dd>
        </div>
        <div class="about-lead__fact">
          <dt>联赛类别</dt>
          <dd>27 个</dd>
        </div>
        <div class="about-lead__fact">
          <dt>在库球队</dt>
          <dd>640 支</dd>
        </div>
      </dl>
    </header>

    <nav class="about-toc" aria-label="本页目录">
      <span class="about-toc__label mono">本页</span>
      <ol class="about-toc__list">
        <li><a href="#sec-who" class="about-toc__link"><span class="mono">01</span>我们是谁</a></li>
        <li><a href="#sec-roles" class="about-toc__link"><span class="mono">02</span>团队分工</a></li>
        <li><a href="#sec-method" class="about-toc__link"><span class="mono">03</span>指标怎么定</a></li>
        <li><a href="#sec-timeline" class="about-toc__link"><span class="mono">04</span>赛季历程</a></li>
        <li><a href="#sec-league" class="about-toc__link"><span class="mono">05</span>联赛分类</a></li>
        <li><a href="#sec-quality" class="about-toc__link"><span class="mono">06</span>校对流程</a></li>
        <li><a href="#sec-partner" class="about-toc__link"><span class="mono">07</span>合作与记录</a></li>
      </ol>
    </nav>

    <div class="about-body">

      <section id="sec-who" class="about-sec" data-reveal>
        <div class="about-sec__rail" aria-hidden="true">
          <span class="about-sec__no mono">01</span>
          <span class="about-sec__line"></span>
        </div>
        <div class="about-sec__main">
          <h2 class="about-sec__title">我们是谁</h2>
          <p class="about-sec__lede">一家只做赛前内容的简体中文站点，队伍不大，但年头够长。</p>
          <div class="prose">
            <p>
              我们做的事很集中：在比赛开始之前，把双方近况、规则适用条款和可比较的历史数据摆到同一张桌子上。
              越位次数与替补贡献是我们下了最多功夫的两个板块；客场胜率、抢断数据、首发轮换三项指标则贯穿整个赛季，
              按上半程、下半程与冬歇期切成 33 个赛季分段，让跨赛季的走势能放在一起看。
            </p>
            <p>
              目前站内收录 640 支球队，归档在 27 个联赛类别下，每个类别平均 23 至 24 支；
              图像库另有 12,800 张夜间比赛定格与战术板素材，用来给曲线和条款做视觉对照。
              这些数字不是一年堆出来的——从 2015 赛季的第一批场次记录算起，
              我们花了十一个赛季把它们补齐、修平、串成线。
            </p>
          </div>
          <div class="about-links">
            <a class="btn btn--cyan" href="/features/">看功能中心有哪些指标</a>
            <a class="btn btn--text" href="/journal/">翻品牌日志的专题</a>
          </div>
        </div>
      </section>

      <section id="sec-roles" class="about-sec section--alt" data-reveal>
        <div class="about-sec__rail" aria-hidden="true">
          <span class="about-sec__no mono">02</span>
          <span class="about-sec__line"></span>
        </div>
        <div class="about-sec__main">
          <h2 class="about-sec__title">团队分工</h2>
          <p class="about-sec__lede">18 个人分成四类活，每一条上线的曲线都能指回具体的岗位。</p>

          <div class="about-roles">
            <dl class="about-roles__list">
              <div class="about-roles__item">
                <dt><span class="mono">6</span>数据工程</dt>
                <dd>负责场次采集、字段对齐与历史回填。640 支球队、每个赛季的全部场次由这一组铺底，
                  越位次数按场次、区域与时段三个维度入库，抢断数据按后场、中场、前场分层记录场均次数与成功率。</dd>
              </div>
              <div class="about-roles__item">
                <dt><span class="mono">5</span>战术分析</dt>
                <dd>把原始记录读成结论。每场赛前前瞻先列规则适用条款，再排布双方越位与替补贡献的赛季曲线；
                  替补贡献指数的四项权重每赛季复核一次，由这一组牵头提出调整。</dd>
              </div>
              <div class="about-roles__item">
                <dt><span class="mono">4</span>内容编辑</dt>
                <dd>负责把分析结果写成你扫一眼就能读的段落与导语。单个比赛日平均发布约 40 场对阵的前瞻条目，
                  写完后按联赛类别与赛季分段挂到对应索引下。</dd>
              </div>
              <div class="about-roles__item">
                <dt><span class="mono">3</span>图像与视觉</dt>
                <dd>维护 12,800 张素材库的标签，处理曲线局部放大框、斜切数据卡与时间带的呈现，
                  保证同一条曲线在不同页面上是同一种读法。</dd>
              </div>
            </dl>

            <figure class="about-roles__figure">
              <span class="figure figure--4x3">
                <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800"
                     alt="夜间战术室投影上的越位线与阵型手绘线条，画面冷调无人物正面">
              </span>
              <figcaption class="figure__caption">
                战术分析组在赛前复盘的投影画面：越位线、阵型站位与替补席轮换节点被画在同一张图上。
              </figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section id="sec-method" class="about-sec" data-reveal>
        <div class="about-sec__rail" aria-hidden="true">
          <span class="about-sec__no mono">03</span>
          <span class="about-sec__line"></span>
        </div>
        <div class="about-sec__main">
          <h2 class="about-sec__title">指标怎么定</h2>
          <p class="about-sec__lede">三项指标各有各的算法，说出来你能自己复述一遍。</p>

          <div class="about-method">
            <div class="about-method__col">
              <h3 class="about-method__h">客场胜率</h3>
              <p>
                按对手档位与场地类型分档统计胜场占比。档位划分在每个赛季初更新一次，赛季中途不调整，
                因此同一支球队的赛季内走势可以直接横向比较。客场数据与主场分开呈现，不合并成总胜率。
              </p>
              <aside class="about-note">
                <span class="about-note__k mono">档位</span>
                每赛季初更新一次，赛季中不动。
              </aside>

              <h3 class="about-method__h">抢断数据</h3>
              <p>
                分后场、中场、前场三个区域记录，同时给出场均次数与成功率。区域归属以球权发生变化时的位置为准，
                不按球员注册位置划分。低样本的场次在曲线上以虚线呈现，不会用平均值硬填。
              </p>
              <aside class="about-note">
                <span class="about-note__k mono">分层</span>
                后场 / 中场 / 前场三段分别统计。
              </aside>

              <h3 class="about-method__h">首发轮换</h3>
              <p>
                用连续首发场次与轮换幅度两个口径来写。连续首发场次看的是敢不敢沿用同一套先发，
                轮换幅度看一次调整动了几个位置。两者配合起来读，阵容是稳是乱一眼能看出来。
              </p>
              <aside class="about-note">
                <span class="about-note__k mono">口径</span>
                连续场次 + 单次调整人数。
              </aside>
            </div>

            <div class="about-method__col about-method__col--grid">
              <span class="figure figure--4x3">
                <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900"
                     alt="深墨绿底色上的精密网格与荧光青数据折线抽象图" loading="lazy" decoding="async">
              </span>
              <figcaption class="figure__caption">
                赛季分段与指标曲线共用同一套网格：横向是 33 个赛季分段，纵向是区间数值。
              </figcaption>

              <div class="about-segs">
                <p class="about-segs__h mono">赛季分段</p>
                <ul class="about-segs__list">
                  <li>上半程</li>
                  <li>下半程</li>
                  <li>冬歇期</li>
                </ul>
                <p class="about-segs__note">
                  11 个赛季 × 3 段 = 33 个分段。场次过少的区间不参与分段均值，单独列出供你自行判断。
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="sec-timeline" class="about-sec about-sec--wide" data-reveal>
        <div class="about-sec__rail" aria-hidden="true">
          <span class="about-sec__no mono">04</span>
          <span class="about-sec__line"></span>
        </div>
        <div class="about-sec__main">
          <h2 class="about-sec__title">赛季历程</h2>
          <p class="about-sec__lede">十一个赛季，每隔一段时间我们会把读法重做一遍。</p>

          <figure class="about-tl__figure">
            <span class="figure figure--21x9">
              <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600"
                   alt="等宽数字刻度构成的横向时间带，节点以荧光青圆点标记，底色为深墨绿" loading="lazy" decoding="async">
            </span>
          </figure>

          <ol class="about-tl" aria-label="赛季里程碑">
            <li class="about-tl__node" tabindex="0">
              <span class="about-tl__dot" aria-hidden="true"></span>
              <span class="about-tl__year mono">2015</span>
              <span class="about-tl__label">开始记录</span>
              <span class="about-tl__more">首批场次记录入库，确立越位次数按场次、区域、时段三维记录的框架。</span>
            </li>
            <li class="about-tl__node" tabindex="0">
              <span class="about-tl__dot" aria-hidden="true"></span>
              <span class="about-tl__year mono">2017</span>
              <span class="about-tl__label">赛季分段成型</span>
              <span class="about-tl__more">上半程、下半程、冬歇期三段切分固定下来，三项指标按分段重排。</span>
            </li>
            <li class="about-tl__node" tabindex="0">
              <span class="about-tl__dot" aria-hidden="true"></span>
              <span class="about-tl__year mono">2020</span>
              <span class="about-tl__label">替补贡献指数</span>
              <span class="about-tl__more">出场分钟、进球、助攻与抢断四项加权合成替补贡献指数，权重首次成文。</span>
            </li>
            <li class="about-tl__node" tabindex="0">
              <span class="about-tl__dot" aria-hidden="true"></span>
              <span class="about-tl__year mono">2023</span>
              <span class="about-tl__label">节奏轴视图</span>
              <span class="about-tl__more">纵向赛季节奏轴上线，一个长赛季的走势第一次能一屏读完。</span>
            </li>
            <li class="about-tl__node" tabindex="0">
              <span class="about-tl__dot" aria-hidden="true"></span>
              <span class="about-tl__year mono">2024</span>
              <span class="about-tl__label">条款折叠阅读</span>
              <span class="about-tl__more">前瞻里的规则适用条款支持逐条展开，先扫条款再决定读哪段数据。</span>
            </li>
            <li class="about-tl__node" tabindex="0">
              <span class="about-tl__dot" aria-hidden="true"></span>
              <span class="about-tl__year mono">2025</span>
              <span class="about-tl__label">斜切数据卡与局部放大</span>
              <span class="about-tl__more">关键数据改用斜切卡片呈现，曲线支持局部放大，不再满屏铺开。</span>
            </li>
          </ol>
          <p class="about-tl__hint mono" aria-hidden="true">悬停或聚焦节点查看补充说明</p>
          <p class="about-tl__textnote">
            内容以赛季号加版本序号记录，比如「2025 赛季第 3 版」。调整过的地方都能沿版本号往回查，
            这也是我们敢把历史曲线一直放在页面上的原因。
          </p>
        </div>
      </section>

      <section id="sec-league" class="about-sec section--alt" data-reveal>
        <div class="about-sec__rail" aria-hidden="true">
          <span class="about-sec__no mono">05</span>
          <span class="about-sec__line"></span>
        </div>
        <div class="about-sec__main">
          <h2 class="about-sec__title">联赛分类</h2>
          <p class="about-sec__lede">27 个类别不是按名气排的，是按数据能不能放在一起比来排的。</p>
          <div class="prose">
            <p>
              分类时我们先看一个联赛的赛制密度与场次节奏：赛程长度相近、轮次结构相似的归在一起，
              这样跨联赛比较越位次数和抢断数据时才有意义。640 支球队按此归档，每类平均 23 至 24 支，
              球队索引可以同时按联赛类别、赛季分段与指标三项条件组合筛选。
            </p>
            <p>
              跨类别球队按当赛季所在类别归档，赛季中期的类别变动在次年赛季初统一更新，历史赛季仍留在原类别下，
              因此你查任何一支球队的十一年曲线，看到的是它当年的位置，而不是被后来的变动抹平。
              升降级带来的类别迁移同样处理：球队迁移，数据不迁移。
            </p>
          </div>

          <div class="about-league">
            <div class="about-league__cell">
              <p class="about-league__k mono">联赛类别</p>
              <p class="about-league__v">27 <span>个</span></p>
            </div>
            <div class="about-league__cell">
              <p class="about-league__k mono">在库球队</p>
              <p class="about-league__v">640 <span>支</span></p>
            </div>
            <div class="about-league__cell">
              <p class="about-league__k mono">类别均容</p>
              <p class="about-league__v">23–24 <span>支</span></p>
            </div>
            <div class="about-league__cell about-league__cell--cut">
              <p class="about-league__k mono">专题标签</p>
              <p class="about-league__v">27 <span>个</span></p>
              <p class="about-league__d">类别专题与球队索引共用同一套编号，从类别进、从球队进都能落到同一批内容。</p>
            </div>
          </div>
        </div>
      </section>

      <section id="sec-quality" class="about-sec" data-reveal>
        <div class="about-sec__rail" aria-hidden="true">
          <span class="about-sec__no mono">06</span>
          <span class="about-sec__line"></span>
        </div>
        <div class="about-sec__main">
          <h2 class="about-sec__title">校对流程</h2>
          <p class="about-sec__lede">三层检查，从当天查到赛季收尾，不让错误留在曲线上过夜。</p>

          <ol class="about-steps">
            <li class="about-steps__step">
              <span class="about-steps__no mono">01</span>
              <div class="about-steps__body">
                <h3 class="about-steps__h">每日自检</h3>
                <p>比赛日当天入库的场次记录跑一遍检查：字段完整性、区域归属、时段划分逐项过一遍，
                  异常条目当天退回重录。单个比赛日平均约 40 场对阵的前瞻条目都在这一层过手。</p>
              </div>
            </li>
            <li class="about-steps__step">
              <span class="about-steps__no mono">02</span>
              <div class="about-steps__body">
                <h3 class="about-steps__h">每周复核</h3>
                <p>按联赛类别抽取当周新增的曲线与条款，与原始记录对照一次，重点看替补贡献指数的四项加权是否偏移。
                  发现问题就地修订，修订记录写进当周版本号。</p>
              </div>
            </li>
            <li class="about-steps__step">
              <span class="about-steps__no mono">03</span>
              <div class="about-steps__body">
                <h3 class="about-steps__h">赛季末回填</h3>
                <p>赛季收官后把全季数据整体回填一次，历史曲线与赛季分段均值同步更新。
                  如果某一年回填改动了读数，相关页面的版本号会一起升上去，方便你确认看到的是哪一版。</p>
              </div>
            </li>
          </ol>

          <p class="about-quality__note">
            发现偏差也不用绕圈子：站内提交纠错后平均 2 个工作日内响应，经确认的修订会体现在页面版本号里。
            提交方式写在<a href="/support/">支持中心</a>，联系渠道在<a href="/contact/">联系我们</a>页。
          </p>
        </div>
      </section>

      <section id="sec-partner" class="about-sec" data-reveal>
        <div class="about-sec__rail" aria-hidden="true">
          <span class="about-sec__no mono">07</span>
          <span class="about-sec__line"></span>
        </div>
        <div class="about-sec__main">
          <h2 class="about-sec__title">合作与记录</h2>
          <p class="about-sec__lede">内容不只服务一个人看，也算得上一份能流转出去的行业资料。</p>

          <div class="about-partner">
            <div class="about-partner__block">
              <h3 class="about-partner__h">媒体与青训</h3>
              <p>
                我们与 12 家地方体育媒体建立了内容互换：赛季分段总览与专题条目向对方开放引用，
                对方的一线观察补充进我们的前瞻背景。另有 8 家青训机构保持数据回访合作，
                替补贡献与首发轮换两份口径在青训梯队里被当作训练排布参考。
              </p>
            </div>
            <div class="about-partner__block">
              <h3 class="about-partner__h">行业记录</h3>
              <p>
                2024 年，我们整理赛季分段数据的方法入选长沙市体育产业数字化案例汇编。
                同年，越位线研究与替补席笔记两个专题系列合起来超过两百期，成为站内更新最稳定的栏目。
              </p>
            </div>
          </div>

          <div class="about-cta">
            <p class="about-cta__text">想聊内容合作、数据引用，或者只是想知道某项指标是怎么算的，随时找我们。</p>
            <a class="btn btn--cyan" href="/contact/">联系我们</a>
            <a class="btn btn--ghost" href="/support/">去支持中心看常见问题</a>
          </div>
        </div>
      </section>

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


.page-about {
  --about-rail: 88px;
  padding-bottom: clamp(64px, 10vw, 140px);
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: clamp(20px, 3vw, 32px);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.page-about .crumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease-out;
}
.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--cyan);
}
.page-about .crumbs [aria-current] {
  color: var(--ink);
}

/* ---------- 首屏 ---------- */
.page-about .about-lead {
  padding: clamp(36px, 7vw, 84px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.page-about .about-lead__title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  line-height: 1.04;
  font-size: clamp(38px, 7.4vw, 96px);
  color: var(--white);
  max-width: 17ch;
}
.page-about .about-lead__deck {
  margin: clamp(22px, 3vw, 34px) 0 0;
  max-width: 40ch;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.85;
  color: var(--ink);
}
.page-about .about-lead__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(30px, 5vw, 52px) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .about-lead__fact {
  background: var(--bg);
  padding: 16px 18px;
}
.page-about .about-lead__fact dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.page-about .about-lead__fact dd {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.01em;
}

/* ---------- 本页目录 ---------- */
.page-about .about-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.page-about .about-toc__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.page-about .about-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about .about-toc__link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.page-about .about-toc__link .mono {
  font-size: 11px;
  color: var(--line);
}
.page-about .about-toc__link:hover,
.page-about .about-toc__link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--line);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-body {
  margin-top: clamp(8px, 2vw, 20px);
}
.page-about .about-sec {
  position: relative;
  padding: clamp(46px, 7vw, 96px) 0;
}
.page-about .about-sec + .about-sec {
  border-top: 1px solid var(--line-soft);
}
.page-about .about-sec.section--alt {
  background: var(--bg-2);
  padding-inline: clamp(16px, 3vw, 34px);
}
.page-about .about-sec__rail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.page-about .about-sec__no {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.1em;
}
.page-about .about-sec__line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.page-about .about-sec__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.1;
  color: var(--ink);
}
.page-about .about-sec__lede {
  margin: 14px 0 0;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--white);
  max-width: 34ch;
}
.page-about .about-sec__main > .prose {
  margin-top: clamp(18px, 2.6vw, 28px);
}
.page-about .about-sec .prose {
  max-width: 38em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}
.page-about .about-sec .prose p {
  margin: 0 0 1.4em;
}
.page-about .about-sec .prose p:last-child {
  margin-bottom: 0;
}
.page-about .about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- 团队分工 ---------- */
.page-about .about-roles {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(26px, 4vw, 40px);
}
.page-about .about-roles__list {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--line);
}
.page-about .about-roles__item {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line-soft);
}
.page-about .about-roles__item dt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--ink);
  margin-bottom: 10px;
}
.page-about .about-roles__item dt .mono {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-on-cyan);
  background: var(--cyan);
  padding: 3px 8px;
  letter-spacing: 0.04em;
}
.page-about .about-roles__item dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 46ch;
}
.page-about .about-roles__figure {
  margin: 0;
}
.page-about .about-roles__figure .figure {
  display: block;
}
.page-about .about-roles__figure .figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.62) brightness(0.72) contrast(1.06);
  border: 1px solid var(--line);
}
.page-about .about-roles__figure .figure__caption {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 40ch;
}

/* ---------- 指标方法 ---------- */
.page-about .about-method {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  margin-top: clamp(26px, 4vw, 44px);
}
.page-about .about-method__h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.3vw, 22px);
  color: var(--white);
  padding-left: 14px;
  border-left: 2px solid var(--cyan);
  line-height: 1.3;
}
.page-about .about-method__col > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--rule);
  max-width: 42ch;
}
.page-about .about-method__h:not(:first-child) {
  margin-top: 34px;
}
.page-about .about-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--card);
  border-left: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--rule);
  max-width: 42ch;
}
.page-about .about-note__k {
  display: inline-block;
  margin-right: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
}
.page-about .about-method__col--grid .figure {
  display: block;
}
.page-about .about-method__col--grid .figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.7) contrast(1.1);
  border: 1px solid var(--line);
}
.page-about .about-method__col--grid .figure__caption {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.page-about .about-segs {
  margin-top: 26px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.page-about .about-segs__h {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.page-about .about-segs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .about-segs__list li {
  flex: 1 1 80px;
  background: var(--card);
  padding: 12px 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.page-about .about-segs__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 时间带 ---------- */
.page-about .about-tl__figure {
  margin: clamp(24px, 4vw, 40px) 0 0;
}
.page-about .about-tl__figure .figure {
  display: block;
}
.page-about .about-tl__figure .figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.72) contrast(1.08);
  border: 1px solid var(--line);
}
.page-about .about-tl {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 0;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--line);
}
.page-about .about-tl__node {
  position: relative;
  padding: 26px 20px 26px 0;
  border-right: 1px solid var(--line-soft);
  outline: none;
}
.page-about .about-tl__node:last-child {
  border-right: none;
}
.page-about .about-tl__dot {
  display: block;
  width: 9px;
  height: 9px;
  background: var(--cyan);
  margin-bottom: 16px;
  transition: box-shadow 220ms ease-out, transform 220ms ease-out;
}
.page-about .about-tl__year {
  display: block;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.page-about .about-tl__label {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan);
}
.page-about .about-tl__more {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 24ch;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.page-about .about-tl__node:hover .about-tl__more,
.page-about .about-tl__node:focus-visible .about-tl__more {
  opacity: 1;
  transform: translateY(0);
}
.page-about .about-tl__node:hover .about-tl__dot,
.page-about .about-tl__node:focus-visible .about-tl__dot {
  box-shadow: 0 0 0 5px var(--cyan-dim);
  transform: scale(1.15);
}
.page-about .about-tl__hint {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.page-about .about-tl__textnote {
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 42em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--rule);
  padding-left: 16px;
  border-left: 2px solid var(--orange);
}

/* ---------- 联赛分类 ---------- */
.page-about .about-league {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 4vw, 40px);
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .about-league__cell {
  background: var(--bg);
  padding: 22px 20px;
}
.page-about .about-league__cell--cut {
  grid-column: 1 / -1;
  background: var(--card);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.page-about .about-league__k {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.page-about .about-league__v {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.01em;
}
.page-about .about-league__v span {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
  letter-spacing: 0.06em;
}
.page-about .about-league__cell--cut .about-league__v {
  color: var(--orange);
}
.page-about .about-league__d {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--rule);
  max-width: 54ch;
}

/* ---------- 校对流程 ---------- */
.page-about .about-steps {
  margin: clamp(26px, 4vw, 42px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  border-top: 1px solid var(--line);
}
.page-about .about-steps__step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft);
}
.page-about .about-steps__no {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.08em;
  padding-top: 3px;
  border-top: 2px solid var(--cyan);
}
.page-about .about-steps__h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--white);
}
.page-about .about-steps__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 48ch;
}
.page-about .about-quality__note {
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  max-width: 44em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--rule);
}
.page-about .about-quality__note a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease-out;
}
.page-about .about-quality__note a:hover,
.page-about .about-quality__note a:focus-visible {
  border-bottom-color: var(--cyan);
}

/* ---------- 合作与记录 ---------- */
.page-about .about-partner {
  display: grid;
  gap: clamp(22px, 3.4vw, 34px);
  margin-top: clamp(24px, 3.4vw, 36px);
}
.page-about .about-partner__block {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.page-about .about-partner__h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--ink);
}
.page-about .about-partner__block p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 44ch;
}
.page-about .about-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: clamp(30px, 4vw, 44px);
  padding: clamp(20px, 3vw, 30px);
  background: var(--card);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.page-about .about-cta__text {
  flex: 1 1 260px;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 720px) {
  .page-about .about-lead__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .about-roles {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
  .page-about .about-method {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .page-about .about-league {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .about-league__cell--cut {
    grid-column: 1 / -1;
  }
  .page-about .about-partner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1024px) {
  .page-about .about-sec {
    display: grid;
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    gap: 0 clamp(24px, 4vw, 56px);
  }
  .page-about .about-sec__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--hdr-h) + 24px);
    align-self: start;
  }
  .page-about .about-sec__line {
    width: 1px;
    flex: 1 1 auto;
    min-height: 120px;
    height: auto;
  }
  .page-about .about-sec__main {
    min-width: 0;
  }
  .page-about .about-league__cell--cut {
    grid-column: span 3;
  }
}

@media (min-width: 1280px) {
  .page-about .about-league {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
  }
  .page-about .about-league__cell--cut {
    grid-column: auto;
  }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .about-tl__more {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page-about .about-tl__dot,
  .page-about .about-toc__link {
    transition: none;
  }
  .page-about .about-tl__node:hover .about-tl__dot {
    transform: none;
  }
}