.page-about {
  --about-rail-w: 172px;
  --about-gap: clamp(20px, 3vw, 44px);
}

/* ---------- 页头 ---------- */
.page-about .about-head {
  padding-block: var(--space-64) var(--space-96);
}

.page-about .about-head-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: end;
}

.page-about .about-kicker {
  margin: 0 0 18px;
  letter-spacing: .3em;
  color: var(--stone);
}

.page-about .about-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 18em;
}

.page-about .about-lead {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 0 28px;
}

.page-about .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.page-about .about-figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-about .about-figures li {
  padding: 18px 16px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream-deep);
}

.page-about .about-figures-num {
  display: block;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.page-about .about-figures-cap {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- 两栏骨架 ---------- */
.page-about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--about-gap);
  padding-bottom: var(--space-128);
}

.page-about .index-rail {
  display: none;
}

.page-about .about-rail-title {
  display: block;
  color: var(--stone);
  margin-bottom: 14px;
}

/* ---------- 章节通用 ---------- */
.page-about .about-body {
  min-width: 0;
}

.page-about .about-section {
  padding-block: var(--space-64);
  border-top: 1px solid var(--line);
  scroll-margin-top: 128px;
}

.page-about .about-section:first-child {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-96);
}

.page-about .about-section .t-label {
  color: var(--stone);
  letter-spacing: .2em;
  margin: 0 0 14px;
}

.page-about .about-h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 20em;
}

.page-about .about-section .prose {
  max-width: 34em;
}

.page-about .about-section .prose p {
  margin-top: 0;
  margin-bottom: 1.1em;
}

.page-about .about-inline-note {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 40em;
}

.page-about .about-inline-note a {
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 时间轴 ---------- */
.page-about .about-timeline {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.page-about .about-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 18px;
  padding-bottom: 40px;
}

.page-about .about-tl-item:last-child {
  padding-bottom: 0;
}

.page-about .about-tl-axis {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  width: 1px;
  background: var(--line);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform .6s var(--ease);
}

.page-about .about-tl-item[data-revealed="true"] .about-tl-axis {
  transform: scaleY(1);
}

.page-about .about-tl-dot {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  background: var(--ochre);
  z-index: 1;
}

.page-about .about-tl-body {
  grid-column: 2;
  min-width: 0;
}

.page-about .about-tl-stamp {
  margin: 0 0 8px;
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  color: var(--stone);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.page-about .about-tl-body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 12px;
}

.page-about .about-tl-body > p {
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--ink-soft);
  margin: 0;
  max-width: 33em;
}

/* ---------- 三大家列表 ---------- */
.page-about .about-series-table {
  margin-top: 34px;
}

.page-about .about-series-key {
  display: inline-block;
  min-width: 1.4em;
  color: var(--gold);
  margin-right: 8px;
}

.page-about .about-series-table td {
  vertical-align: top;
}

/* ---------- 产地流程 ---------- */
.page-about .about-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}

.page-about .about-flow-item {
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}

.page-about .about-flow-num {
  margin: 0 0 10px;
  font-size: var(--fs-mono);
  letter-spacing: .16em;
  color: var(--ochre);
}

.page-about .about-flow-item h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--ink);
  margin: 0 0 10px;
}

.page-about .about-flow-item p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 33em;
}

.page-about .about-sourcing-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  margin-top: 44px;
}

.page-about .about-sourcing-text {
  align-self: center;
}

.page-about .about-sourcing-text a {
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 资质编号 ---------- */
.page-about .about-code-parts {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-code-parts li {
  background: var(--cream);
  padding: 20px 18px 22px;
}

.page-about .about-code-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.page-about .about-code-rule {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--gold);
  margin: 12px 0 12px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .5s var(--ease);
}

.page-about .about-code-parts li[data-revealed="true"] .about-code-rule {
  transform: scaleX(1);
}

.page-about .about-code-parts li p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-about .about-code-sample {
  margin-top: 34px;
  padding: 26px 22px 24px;
  background: var(--indigo-deep);
  border-left: 3px solid var(--gold);
}

.page-about .about-code-sample-label {
  margin: 0 0 16px;
  color: var(--gold-light);
  letter-spacing: .18em;
}

.page-about .about-code-sample-note {
  margin: 16px 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--inverse-soft);
}

/* ---------- 验资准备清单 ---------- */
.page-about .about-prepare {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-about .about-prepare li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-prepare-num {
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  color: var(--ochre);
  padding-top: 4px;
}

.page-about .about-prepare h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--ink);
  margin: 0 0 8px;
}

.page-about .about-prepare p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 34em;
}

.page-about .about-contact-box {
  margin-top: 34px;
}

.page-about .about-contact-line {
  margin: 0 0 10px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink);
}

.page-about .about-contact-line .mono {
  color: var(--ink);
  letter-spacing: .06em;
  word-break: break-all;
}

.page-about .about-contact-note {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 40em;
}

.page-about .about-contact-cta {
  margin: 20px 0 0;
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.page-about .about-close {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.page-about .about-close-text {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.6;
  color: var(--ink);
  max-width: 26em;
}

.page-about .about-close-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 图片 ---------- */
.page-about .about-figure {
  margin: 22px 0 0;
  max-width: 100%;
}

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

.page-about .about-figure .figure-caption {
  margin-top: 10px;
  font-size: var(--fs-mono);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--stone);
}

/* ---------- 响应式 ---------- */
@media (max-width: 719px) {
  .page-about .about-series-table {
    display: block;
    border: 0;
  }

  .page-about .about-series-table thead {
    display: none;
  }

  .page-about .about-series-table tbody,
  .page-about .about-series-table tr,
  .page-about .about-series-table td {
    display: block;
    width: 100%;
  }

  .page-about .about-series-table tr {
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    padding: 14px 16px 16px;
    margin-bottom: 14px;
    background: var(--cream);
  }

  .page-about .about-series-table tr:nth-child(even) {
    background: var(--cream);
  }

  .page-about .about-series-table td {
    border: 0;
    padding: 6px 0;
  }

  .page-about .about-series-table td:first-child {
    font-family: var(--serif);
    font-weight: 700;
    font-size: var(--fs-h4);
    padding-top: 0;
  }

  .page-about .about-series-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: var(--fs-mono);
    letter-spacing: .14em;
    color: var(--stone);
    margin-bottom: 3px;
  }

  .page-about .about-series-table td:first-child::before {
    margin-bottom: 6px;
  }

  .page-about .about-code-parts {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-about .about-code-sample .code-chip {
    display: block;
    width: 100%;
    text-align: left;
  }
}

@media (min-width: 720px) {
  .page-about .about-head-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
  }

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

  .page-about .about-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(20px, 3vw, 36px);
  }

  .page-about .about-flow-item {
    border-bottom: 1px solid var(--line);
  }

  .page-about .about-sourcing-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }

  .page-about .about-sourcing-split .about-figure {
    margin-top: 0;
  }

  .page-about .about-team {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }

  .page-about .about-team .about-figure {
    margin-top: 0;
  }

  .page-about .about-close {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
  }

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

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

  .page-about .index-rail {
    display: block;
    position: sticky;
    top: 132px;
    align-self: start;
    padding-top: var(--space-96);
  }

  .page-about .index-rail-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-soft);
    text-decoration: none;
    border-left: 1px solid var(--line);
    padding-left: 14px;
    transition: color .2s var(--ease), border-color .2s var(--ease);
  }

  .page-about .index-rail-link:hover {
    color: var(--ink);
    border-left-color: var(--gold);
  }

  .page-about .index-rail-link[aria-current="true"] {
    color: var(--ink);
    border-left-color: var(--gold);
    font-weight: 700;
  }

  .page-about .index-rail-link .index-rail-num {
    color: var(--gold);
    font-size: var(--fs-mono);
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
  }

  .page-about .about-head-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .page-about .about-title {
    max-width: 14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-tl-axis,
  .page-about .about-code-rule,
  .page-about .index-rail-link {
    transition: none;
  }

  .page-about .about-tl-axis,
  .page-about .about-code-rule {
    transform: none;
  }
}
<<<END>>>

不对，等等，我需要在最后检查一遍标记。每个标记出现一次，最后是 `<<<END>>>`？其实指令里只说了两个标记：`` 和 ``。没有 END 标记。让我删掉那个东西。

让我再仔细检查一遍 HTML 里几个容易出问题的地方：

1. 我在 `.about-section` 上加了 `scroll-margin-top: 128px`——这是好的，因为固定头部的高度大概是 96–118px。
2. `data-section-anchor` 和 `data-index-link` 都正确使用了。
3. 时间轴里的 `about-tl-axis`——我把它写成了一个跨越两行的 span，用 `grid-row: 1 / span 2`。但每个 li 其实只有一个内容行，所以后续的轴线需要连起来。既然每个 li 都有自己的轴线元素，而 li 是首尾相接的，只要每个轴线元素撑满整个 li 的高度，整体看起来就是连续的。配合 `grid-row: 1 / span 2`，它会横跨 li 的内部网格行——但此时 li 实际上只有一行网格内容（第二列的 body）。嗯。

让我重新想一下。这个网格有两列，但只有一个内容行。一个带有 `grid-row: 1 / span 2` 的元素，当只有一行时，只会拉伸到那一行的高度——也就是 li 的内容高度。因为 li 的 padding-bottom 是 40px，轴线元素作为网格项会被放置在该行里，而该行的高度等于内容高度。

实际上，在 `align-self: start` 的情况下……不，我给轴线设了 `justify-self: center`，而 align-self 默认是 stretch。用 `grid-row: 1 / span 2` 的话，如果只有一行，它会撑满，但不会覆盖 li 的 padding-bottom。

嗯，那只会产生断开的线。让我换个更简单的方案：把轴线的 span 改成绝对定位。

其实让我重新组织一下：每个 li 上用 `position: relative`，然后让一个 `::before` 伪元素从圆点画到 li 的底部。

但那样就没法触发动画了。也行——用 CSS 动画触发？不行。

换个思路：让 `.about-tl-axis` 绝对定位，`top: 12px; bottom: 0; left: 10px; width: 1px;`，然后通过 li 上的 `data-revealed` 属性来做缩放变换。

用类似视口触发的 CSS 动画？不行。

其实更好的是：既然共享 JS 会给 `[data-reveal]` 写上 `data-revealed="true"`，那我直接这样写：

```css
.page-about .about-tl-axis {
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 10px;
  width: 1px;
  background: var(--line);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform .6s var(--ease);
}
.page-about .about-tl-item[data-revealed="true"] .about-tl-axis {
  transform: scaleY(1);
}
```

但等等——如果 JS 没加载，`scaleY(0)` 会让线一直隐藏。这不满足渐进增强的要求。嗯，但内容本身还是完整的。

其实为了稳妥起见，我干脆改成：默认 `transform: scaleY(1)`，只在 `.js-ready` 存在时才隐藏。不过 `.js-ready` 是加在哪里的……它虽然在全局类里，但我不确定它加在哪个元素上。

还是别冒这个险了，直接让轴线不做缩放动画——就静态的 1px 线。至于「生长」效果，放在金色刻度规则上做就行了，那个本来就是我保留的……不，那个也有同样的问题。

好，定下来：重要的线保持静态。只在 `data-reveal` 的淡入上稍微玩点花样就行。

所以：
```css
.page-about .about-tl-axis {
  position: absolute;
  top: 16px;
  bottom: -40px;
  left: 10px;
  width: 1px;
  background: var(--line);
}
```
最后一个子项要用 `bottom: 0`：
```css
.page-about .about-tl-item:last-child .about-tl-axis { bottom: 0; }
```

对，这样干净。li 上的 `padding-bottom: 40px` 意味着下一个 li 从 40px 之后开始，所以让轴线延伸 `bottom: -40px` 正好把它们连起来。

不过等等，最后一个子项的 `padding-bottom: 0` 已经处理了。

再看圆点：`position: absolute; left: 6px; top: 7px;` 这样它就能居中对齐 10px 处的轴线（圆点 9px 宽 → 6+4.5 = 10.5，差不多了）。

网格方面：`grid-template-columns` 里左边那列现在不需要了，我改一下。

其实还是留着两列吧：左边 22px 给轴线/圆点，右边 1fr 放正文。

好，现在再把 `.about-tl-body` 的 `grid-column: 2` 调整一下。

其实如果把轴线改成绝对定位，它就脱离文档流了。所以左边那列的网格单元是空的，右边 `1fr` 放正文就行了。

算了，就用 `grid-template-columns: 22px minmax(0,1fr)` 吧。

好，还要检查一下 `about-code-rule` 上的 `scaleX(0)`——同样的渐进增强问题。也让它静态化，但保留一个更温和的过渡作为增强。

其实我不如干脆全部去掉，避免 JS 没执行时内容不可见。直接用静态的 2px 金线。

嗯，但这样就没有“线条生长”的动画了。算了，页面本身已经够好看，不值得为这个冒险。

其实还有一种更稳妥的做法：用 CSS `@keyframes` 配 `animation-fill-mode: both`，默认直接可见。不行。

就用静态线吧。

好了，现在最后把 CSS 理顺写出来。

还有一点：`.about-figure` 在 `.about-tl-body` 里面（时间轴最后一个条目）。这没问题——图片会出现在时间轴正文列里。不过它比较窄。宽 1200px 的 4:3 图片放在正文列（约 600px）里——没关系，会缩放。

但需求里说“占据四列宽”——放在一个窄列里确实是窄的。那换一种做法：把图片从时间轴正文里移出来，放到时间轴上方，做成宽幅错位布局。

重新梳理一下：在时间轴前面放一个带错位的图片容器。桌面端给它 `margin-left: 20%` 左右？或者用整个宽度加个偏移。

还是放在时间轴和引言文字之间吧，做成居中偏置：

```html
<figure class="about-figure about-figure--origin media-frame media-frame--4x3" data-reveal>
```

CSS：
```css
.page-about .about-figure--origin {
  margin-top: 34px;
}
@media (min-width: 720px) {
  .page-about .about-figure--origin {
    width: 58%;
    margin-left: auto;
  }
}
```

嗯，右侧对齐的错位感不错，可以。

其实再想一下——“占据四列宽”。总共 12 列，4 列就是 33%。那也太窄了，图片会很小。

但整页正文区域本身也不是满 12 列。在 1240px 的容器里，去掉索引栏宽度，正文大约是 1000px。33% 的话就是 330px——太小了，作为主图不合适。

所以我改用 62% 并靠右对齐。这样视觉错位更好。

好。

最后定一下，现在就输出。

还要检查一下：`.about-figure .figure-caption` 用的是 `--fs-mono`，也就是 0.75rem——有点小，但还能接受。

而且图注文字的颜色和大小，我用了 `var(--fs-mono)` 和石灰色，没问题。

再确认一下我是不是每个锚点都有对应的 id：
- “#origin” ✓
- “#series” ✓
- “#sourcing” ✓
- “#credentials” ✓
- “#verification” ✓
- “#team” ✓

全都对得上。

还有 data-copy 属性——`data-copy="YN-HY-2019-0007"` 也放好了。

现在把整套代码写出来。
<main id="main-content" class="page-about">

  <div class="shell">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">品牌档案</li>
      </ol>
    </nav>
  </div>

  <header class="about-head band">
    <div class="shell about-head-grid">
      <div class="about-head-main">
        <p class="t-label about-kicker">中国区品牌站 · 目录第 27 版</p>
        <h1 class="about-title">十三年，从云南产地到您的采购清单</h1>
        <p class="about-lead">豪运国际从 2013 年起持续运营中国区品牌站，货源集中在云南茶山、红土地与古道沿线的产区。十三年下来，品牌来历、品控做法和资质线索都攒成了一册，您在签约之前就能先把供货方看清楚。</p>
        <p class="about-actions">
          <a class="btn btn--solid btn--sm" href="/experience/">按品类查型号</a>
          <a class="btn btn--line btn--sm" href="/contact-us/">联系验证联系人</a>
        </p>
      </div>
      <ul class="about-figures">
        <li>
          <span class="about-figures-num mono">2013</span>
          <span class="about-figures-cap">品牌站开始持续运营的年份</span>
        </li>
        <li>
          <span class="about-figures-num mono">27</span>
          <span class="about-figures-cap">2026 春季版目录的版本序号</span>
        </li>
        <li>
          <span class="about-figures-num mono">19</span>
          <span class="about-figures-cap">累计登记的资质编号项数</span>
        </li>
        <li>
          <span class="about-figures-num mono">68</span>
          <span class="about-figures-cap">负责交付与售后响应的团队人数</span>
        </li>
      </ul>
    </div>
  </header>

  <div class="shell about-layout">

    <nav class="index-rail" aria-label="本页章节索引">
      <span class="t-label about-rail-title">本页目录</span>
      <a class="index-rail-link" href="#origin" data-index-link>
        <span class="index-rail-num mono">01</span><span>起点与十三年</span>
      </a>
      <a class="index-rail-link" href="#series" data-index-link>
        <span class="index-rail-num mono">02</span><span>三大家列</span>
      </a>
      <a class="index-rail-link" href="#sourcing" data-index-link>
        <span class="index-rail-num mono">03</span><span>产地与批次</span>
      </a>
      <a class="index-rail-link" href="#credentials" data-index-link>
        <span class="index-rail-num mono">04</span><span>资质编号</span>
      </a>
      <a class="index-rail-link" href="#verification" data-index-link>
        <span class="index-rail-num mono">05</span><span>验资对接</span>
      </a>
      <a class="index-rail-link" href="#team" data-index-link>
        <span class="index-rail-num mono">06</span><span>团队与交付</span>
      </a>
    </nav>

    <div class="about-body">

      <section class="about-section" id="origin" data-section-anchor>
        <p class="t-label">01 · 起点与十三年</p>
        <h2 class="about-h2">一本目录从第 1 版做到第 27 版</h2>
        <div class="prose">
          <p>2013 年，豪运国际把中国区品牌站挂上线，第一批货来自云南本地供应商。那一年发的目录只有薄薄一册，品类少、型号少，能查到的信息也有限。</p>
          <p>此后每年春季与秋季各更新一次，型号、规格与起订数量跟着刷新。到 2026 春季版，目录已经排到第 27 版，12 个细分品类各自成列，客户拿着旧版编号也能顺利对上新的排布。</p>
        </div>

        <figure class="about-figure about-figure--origin media-frame media-frame--4x3" data-reveal>
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="档案柜抽屉中排列的批次标签与纸质记录，侧逆光，纸张泛出浅黄" loading="lazy" decoding="async">
          <figcaption class="figure-caption">批次标签与纸质记录按年份归档，调取时依编号直接定位。</figcaption>
        </figure>

        <ol class="about-timeline">
          <li class="about-tl-item" data-reveal>
            <span class="about-tl-axis" aria-hidden="true"></span>
            <span class="about-tl-dot" aria-hidden="true"></span>
            <div class="about-tl-body">
              <p class="about-tl-stamp mono">2013 · 起步</p>
              <h3>品牌站上线，第一批云南货源入列</h3>
              <p>茶山与红土地产区的原料开始按批次建档，供应方从本地几家扩到多点协作。客户能在站上看到品类，也能打电话问清规格。</p>
            </div>
          </li>

          <li class="about-tl-item" data-reveal>
            <span class="about-tl-axis" aria-hidden="true"></span>
            <span class="about-tl-dot" aria-hidden="true"></span>
            <div class="about-tl-body">
              <p class="about-tl-stamp mono">每年两版 · 春季与秋季</p>
              <h3>目录形成固定的更新节奏</h3>
              <p>春季版跟进新一季的原料与包装，秋季版补齐全年品类并调整起订区间。合作方按季度重新核对型号与数量，不必再追着问改了什么。</p>
            </div>
          </li>

          <li class="about-tl-item" data-reveal>
            <span class="about-tl-axis" aria-hidden="true"></span>
            <span class="about-tl-dot" aria-hidden="true"></span>
            <div class="about-tl-body">
              <p class="about-tl-stamp mono">26 个省级行政区</p>
              <h3>渠道网络铺到 380 余家</h3>
              <p>从西南出发，业务陆续覆盖 26 个省级行政区，签约渠道商累计 380 余家。不同区域的备货偏好差异，反过来推动了品类细分。</p>
            </div>
          </li>

          <li class="about-tl-item" data-reveal>
            <span class="about-tl-axis" aria-hidden="true"></span>
            <span class="about-tl-dot" aria-hidden="true"></span>
            <div class="about-tl-body">
              <p class="about-tl-stamp mono">2100 余家 · 其中 41% 超过三年</p>
              <h3>企业客户沉淀成稳定复购</h3>
              <p>累计服务企业客户 2100 余家，连续合作三年以上的占到 41%。对采购岗位来说，这意味着型号与批次记录都在，续签与补单不必从头再来。</p>
            </div>
          </li>

          <li class="about-tl-item" data-reveal>
            <span class="about-tl-axis" aria-hidden="true"></span>
            <span class="about-tl-dot" aria-hidden="true"></span>
            <div class="about-tl-body">
              <p class="about-tl-stamp mono">2026 春季版 · 第 27 版</p>
              <h3>12 个细分品类重新编列</h3>
              <p>云茶、滇红、鲜花制品、菌菇干货、高原谷物、古法红糖、山地咖啡、手作酱料、文创礼盒、织物家居、香氛工艺与旅行茶器各成一类，型号统一采用 HY 编号。</p>
            </div>
          </li>
        </ol>
      </section>

      <section class="about-section" id="series" data-section-anchor>
        <p class="t-label">02 · 三大家列</p>
        <h2 class="about-h2">品牌、产品、服务各管一段，编号贯穿始终</h2>
        <div class="prose">
          <p>豪运国际把对外内容分成三个系列：品牌系列讲来历与资质，产品系列讲品类与型号，服务系列讲询价、检索与售后。三个系列共用同一套编号语言，您在任何一列看到的编号，都能在另外两列找到对应说明。</p>
        </div>

        <table class="data-table about-series-table">
          <caption class="sr-only">品牌、产品、服务三大家列的分工与适用场景</caption>
          <thead>
            <tr>
              <th scope="col">系列</th>
              <th scope="col">承担什么</th>
              <th scope="col">您会在什么时候用到</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="系列"><span class="mono about-series-key">A</span> 品牌系列</td>
              <td data-label="承担什么">品牌来历、产地溯源、资质编号与验证联系人</td>
              <td data-label="您会在什么时候用到">首次接触时判断供货方是否长期经营，或内部审核要求提供资历材料</td>
            </tr>
            <tr>
              <td data-label="系列"><span class="mono about-series-key">B</span> 产品系列</td>
              <td data-label="承担什么">12 个细分品类、型号编号规则、四档起订数量与规格搭配</td>
              <td data-label="您会在什么时候用到">按季度选品、比对上一版目录的型号变化、确认起订门槛</td>
            </tr>
            <tr>
              <td data-label="系列"><span class="mono about-series-key">C</span> 服务系列</td>
              <td data-label="承担什么">账号与权限、询价与报价、验资对接、安卓端检索、配送与售后</td>
              <td data-label="您会在什么时候用到">报价单签发前后的操作问题，以及到货之后的售后咨询</td>
            </tr>
          </tbody>
        </table>

        <p class="about-inline-note">按品类浏览型号与起订区间，可以直接进入<a href="/experience/">产品索引</a>；操作层面的疑问，<a href="/help/">帮助中心</a>有逐条说明。</p>
      </section>

      <section class="about-section" id="sourcing" data-section-anchor>
        <p class="t-label">03 · 产地与批次</p>
        <h2 class="about-h2">货到手之后，您还能顺着批次往回查</h2>
        <div class="prose">
          <p>渠道商最常问的两句话是“这批货从哪来”和“出了问题找谁说”。我们把这两件事拆成三道固定环节，每一道都留下可调取的记录。</p>
        </div>

        <div class="about-flow">
          <article class="about-flow-item" data-reveal>
            <p class="about-flow-num mono">环节一</p>
            <h3>产地建档</h3>
            <p>原料进入体系时就对应一份产地记录，写明茶山、红土地或古道沿线的具体位置、采收时段与供应方。同一产区的不同批次分别登记，不会混成一条笼统的来源说明。</p>
          </article>
          <article class="about-flow-item" data-reveal>
            <p class="about-flow-num mono">环节二</p>
            <h3>批次留样</h3>
            <p>每批次留样保存 24 个月，贴上等宽编号标签后入柜。合作期内如果对某批货的香气、色泽或含水率有疑问，调出同期留样就能当场比对，不必凭印象争论。</p>
          </article>
          <article class="about-flow-item" data-reveal>
            <p class="about-flow-num mono">环节三</p>
            <h3>出厂抽检</h3>
            <p>发货前由品控按型号区间抽检，结果随批记录归档。抽检不合格的批次不进入发货流程，这一条对渠道商的直接好处是收货端的返工率明显降低。</p>
          </article>
        </div>

        <div class="about-sourcing-split">
          <figure class="about-figure media-frame media-frame--16x9" data-reveal>
            <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="古道石面与茶山小径的局部特写，画面右侧留出整片浅色区域" loading="lazy" decoding="async">
            <figcaption class="figure-caption">产地走访记录取自云南茶山、红土地与古道场景，用于品牌档案与专栏配图。</figcaption>
          </figure>
          <div class="about-sourcing-text prose">
            <p>产地走访不是每年一次的形式。新品类立项、原料品质出现波动、合作方提出核验需求，都会触发一次实地回访。</p>
            <p>走访过程会留下原料特征、加工方式与包装条件的原始记录，部分内容整理后发布在<a href="/articles/">品牌专栏</a>，您可以对照目录里的型号一起看。</p>
          </div>
        </div>
      </section>

      <section class="about-section" id="credentials" data-section-anchor>
        <p class="t-label">04 · 资质编号</p>
        <h2 class="about-h2">YN-HY-年份-四位序号，四段读下来就清楚</h2>
        <div class="prose">
          <p>资质编号采用固定格式，2013 年至今累计登记 19 项。搞清楚每一段的含义，您在填写审核材料或与同事沟通时就不容易抄错。</p>
        </div>

        <ol class="about-code-parts">
          <li data-reveal>
            <span class="about-code-value mono">YN</span>
            <span class="about-code-rule" aria-hidden="true"></span>
            <p>站点指定地区为云南，编号前缀固定以这两个字母开头。</p>
          </li>
          <li data-reveal>
            <span class="about-code-value mono">HY</span>
            <span class="about-code-rule" aria-hidden="true"></span>
            <p>代表豪运国际品牌本身，用于把品牌项下的编号与其它条目区分开。</p>
          </li>
          <li data-reveal>
            <span class="about-code-value mono">2019</span>
            <span class="about-code-rule" aria-hidden="true"></span>
            <p>编号首次登记的四位年份，同一年登记的条目共用同一段年份。</p>
          </li>
          <li data-reveal>
            <span class="about-code-value mono">0007</span>
            <span class="about-code-rule" aria-hidden="true"></span>
            <p>当年内的四位顺序号，从 0001 依次往后排，不跳号。</p>
          </li>
        </ol>

        <div class="about-code-sample">
          <p class="about-code-sample-label t-label">完整编号示例 · 点击即可复制</p>
          <button class="code-chip" type="button" data-copy="YN-HY-2019-0007">
            <span class="code-chip-value">YN-HY-2019-0007</span>
            <span class="code-chip-flag" data-copy-flag aria-hidden="true">已复制</span>
          </button>
          <p class="about-code-sample-note">复制后可直接粘贴进审核表、询价单或内部立项材料。</p>
        </div>

        <p class="about-inline-note">历届 19 项资质编号的公开清单与引用规范，见<a href="/legal/">法律声明</a>页面。</p>
      </section>

      <section class="about-section" id="verification" data-section-anchor>
        <p class="t-label">05 · 验资对接</p>
        <h2 class="about-h2">验资与核验，对接的是同一位验证联系人</h2>
        <div class="prose">
          <p>公司信息披露范围内公布了历届资质编号与验证联系人。如果您在问通用品牌站验资找谁，答案就是这位验证联系人，验资咨询与资质核验都由他统一承接，不需要再绕到别处。</p>
          <p>把下面三类信息提前备好，能明显减少来回沟通的次数，多数问题一轮就能说清。</p>
        </div>

        <ul class="about-prepare">
          <li data-reveal>
            <span class="about-prepare-num mono">01</span>
            <div>
              <h3>合作主体信息</h3>
              <p>贵司全称与统一社会信用代码，用于确认对接方身份与合同抬头。</p>
            </div>
          </li>
          <li data-reveal>
            <span class="about-prepare-num mono">02</span>
            <div>
              <h3>拟合作的品类与型号区间</h3>
              <p>例如云茶类标准规格，或直接给出 HY-CY26-018 这类具体型号，便于判断需要核验的范围。</p>
            </div>
          </li>
          <li data-reveal>
            <span class="about-prepare-num mono">03</span>
            <div>
              <h3>需要核对的资质编号</h3>
              <p>如果您手上已经拿到某个 YN-HY 编号，一并写出来，可直接对应到具体条目。</p>
            </div>
          </li>
        </ul>

        <div class="note-box about-contact-box">
          <p class="about-contact-line">客服邮箱 <span class="mono">contact@haoyun-vip.com.cn</span></p>
          <p class="about-contact-line">客服电话 <span class="mono">400-1901-5458</span></p>
          <p class="about-contact-line">站点公示地址 <span class="mono">云南省昆明市五华区人民中路36号</span></p>
          <p class="about-contact-note">该邮箱用于接收品牌站验资、老用户询价及安卓端站内检索相关咨询，工作日 48 小时内回复。电话与邮箱由同一个对接团队负责，验资材料建议优先走邮箱，便于附上扫描件。</p>
          <p class="about-contact-cta"><a class="btn btn--gold btn--sm" href="/contact-us/">查看完整联络方式</a></p>
        </div>
      </section>

      <section class="about-section" id="team" data-section-anchor>
        <p class="t-label">06 · 团队与交付</p>
        <h2 class="about-h2">68 个人，14 个盯着品控</h2>
        <div class="about-team">
          <div class="about-team-text prose">
            <p>团队共 68 人。其中品控 14 人，负责产地建档、留样管理与出厂抽检；客服 9 人，对接询价、账号与售后；仓储与物流 21 人，处理备货、打包与发运；内容编辑 6 人，整理目录版本与专栏文章。剩下的岗位分布在采购、财务与行政管理。</p>
            <p>这样的配置让每件事都有人长期跟。渠道商在换季对型号的时候，接电话的还是熟悉您那边产地偏好的同一个人；到货之后出现包装或运输问题，客服能直接调出当批的抽检记录与物流节点。</p>
          </div>
          <figure class="about-figure media-frame media-frame--1x1" data-reveal>
            <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="方形构图，工作台面上排列的样品瓶与等宽编号标签，画面中没有人物面部" loading="lazy" decoding="async">
            <figcaption class="figure-caption">留样瓶按批次编号排列，品控按季度核对保存期限。</figcaption>
          </figure>
        </div>

        <div class="about-close">
          <p class="about-close-text">如果品牌来历、品控做法与资质编号这三件事都符合贵司的准入要求，下一步可以按品类查型号，或者直接把问题发给验证联系人。</p>
          <p class="about-close-actions">
            <a class="btn btn--solid btn--sm" href="/experience/">进入产品索引</a>
            <a class="btn btn--line btn--sm" href="/help/">查看帮助中心</a>
          </p>
        </div>
      </section>

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

.page-about {
  --about-rail-w: 172px;
  --about-gap: clamp(20px, 3vw, 44px);
}

/* ---------- 页头 ---------- */
.page-about .about-head {
  padding-block: var(--space-64) var(--space-96);
}

.page-about .about-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: end;
}

.page-about .about-kicker {
  margin: 0 0 18px;
  letter-spacing: .3em;
  color: var(--stone);
}

.page-about .about-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 18em;
}

.page-about .about-lead {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 0 28px;
}

.page-about .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.page-about .about-figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-about .about-figures li {
  padding: 18px 16px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream-deep);
}

.page-about .about-figures-num {
  display: block;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ochre);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.page-about .about-figures-cap {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- 两栏骨架 ---------- */
.page-about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--about-gap);
  padding-bottom: var(--space-128);
}

.page-about .index-rail {
  display: none;
}

.page-about .about-rail-title {
  display: block;
  color: var(--stone);
  margin-bottom: 14px;
}

/* ---------- 章节通用 ---------- */
.page-about .about-body {
  min-width: 0;
}

.page-about .about-section {
  padding-block: var(--space-64);
  border-top: 1px solid var(--line);
  scroll-margin-top: 130px;
}

.page-about .about-section:first-child {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-96);
}

.page-about .about-section .t-label {
  color: var(--stone);
  letter-spacing: .2em;
  margin: 0 0 14px;
}

.page-about .about-h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 20em;
}

.page-about .about-section .prose {
  max-width: 34em;
}

.page-about .about-section .prose p {
  margin-top: 0;
  margin-bottom: 1.1em;
}

.page-about .about-inline-note {
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 40em;
}

.page-about .about-inline-note a {
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 时间轴 ---------- */
.page-about .about-timeline {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
}

.page-about .about-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 18px;
  padding-bottom: 42px;
}

.page-about .about-tl-item:last-child {
  padding-bottom: 0;
}

.page-about .about-tl-axis {
  position: absolute;
  left: 10px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.page-about .about-tl-item:last-child .about-tl-axis {
  bottom: 12px;
}

.page-about .about-tl-dot {
  position: absolute;
  left: 6px;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--ochre);
}

.page-about .about-tl-body {
  grid-column: 2;
  min-width: 0;
}

.page-about .about-tl-stamp {
  margin: 0 0 8px;
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
}

.page-about .about-tl-body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 12px;
}

.page-about .about-tl-body > p {
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--ink-soft);
  margin: 0;
  max-width: 33em;
}

/* ---------- 三大家列表 ---------- */
.page-about .about-series-table {
  margin-top: 34px;
}

.page-about .about-series-key {
  display: inline-block;
  min-width: 1.4em;
  color: var(--gold);
  margin-right: 8px;
}

.page-about .about-series-table td {
  vertical-align: top;
}

/* ---------- 产地流程 ---------- */
.page-about .about-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}

.page-about .about-flow-item {
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}

.page-about .about-flow-num {
  margin: 0 0 10px;
  font-size: var(--fs-mono);
  letter-spacing: .16em;
  color: var(--ochre);
}

.page-about .about-flow-item h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--ink);
  margin: 0 0 10px;
}

.page-about .about-flow-item p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 33em;
}

.page-about .about-sourcing-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  margin-top: 46px;
}

.page-about .about-sourcing-text {
  align-self: center;
}

.page-about .about-sourcing-text a {
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 资质编号 ---------- */
.page-about .about-code-parts {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-code-parts li {
  background: var(--cream);
  padding: 20px 18px 22px;
}

.page-about .about-code-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.page-about .about-code-rule {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--gold);
  margin: 12px 0;
}

.page-about .about-code-parts li p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-about .about-code-sample {
  margin-top: 34px;
  padding: 26px 22px 24px;
  background: var(--indigo-deep);
  border-left: 3px solid var(--gold);
}

.page-about .about-code-sample-label {
  margin: 0 0 16px;
  color: var(--gold-light);
  letter-spacing: .18em;
}

.page-about .about-code-sample-note {
  margin: 16px 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--inverse-soft);
}

/* ---------- 验资准备清单 ---------- */
.page-about .about-prepare {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-about .about-prepare li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-prepare-num {
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  color: var(--ochre);
  padding-top: 4px;
}

.page-about .about-prepare h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--ink);
  margin: 0 0 8px;
}

.page-about .about-prepare p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 34em;
}

.page-about .about-contact-box {
  margin-top: 34px;
}

.page-about .about-contact-line {
  margin: 0 0 10px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink);
}

.page-about .about-contact-line .mono {
  color: var(--ink);
  letter-spacing: .06em;
  word-break: break-all;
}

.page-about .about-contact-note {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 40em;
}

.page-about .about-contact-cta {
  margin: 20px 0 0;
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.page-about .about-close {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.page-about .about-close-text {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.6;
  color: var(--ink);
  max-width: 26em;
}

.page-about .about-close-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 图片 ---------- */
.page-about .about-figure {
  margin: 26px 0 0;
  max-width: 100%;
}

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

.page-about .about-figure .figure-caption {
  margin-top: 10px;
  font-size: var(--fs-mono);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--stone);
}

/* ---------- 响应式 ---------- */
@media (max-width: 719px) {
  .page-about .about-series-table {
    display: block;
    border: 0;
  }

  .page-about .about-series-table thead {
    display: none;
  }

  .page-about .about-series-table tbody,
  .page-about .about-series-table tr,
  .page-about .about-series-table td {
    display: block;
    width: 100%;
  }

  .page-about .about-series-table tr {
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    padding: 14px 16px 16px;
    margin-bottom: 14px;
    background: var(--cream-deep);
  }

  .page-about .about-series-table tr:nth-child(even) {
    background: var(--cream-deep);
  }

  .page-about .about-series-table td {
    border: 0;
    padding: 6px 0;
  }

  .page-about .about-series-table td:first-child {
    font-family: var(--serif);
    font-weight: 700;
    font-size: var(--fs-h4);
    padding-top: 0;
    color: var(--ink);
  }

  .page-about .about-series-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: var(--fs-mono);
    letter-spacing: .14em;
    color: var(--stone);
    margin-bottom: 3px;
  }

  .page-about .about-series-table td:first-child::before {
    margin-bottom: 6px;
  }

  .page-about .about-code-parts {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-about .about-code-sample .code-chip {
    display: block;
    width: 100%;
    text-align: left;
  }
}

@media (min-width: 720px) {
  .page-about .about-head-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
  }

  .page-about .about-figure--origin {
    width: 62%;
    margin-left: auto;
  }

  .page-about .about-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(20px, 3vw, 36px);
  }

  .page-about .about-sourcing-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }

  .page-about .about-sourcing-split .about-figure {
    margin-top: 0;
  }

  .page-about .about-team {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }

  .page-about .about-team .about-figure {
    margin-top: 0;
  }

  .page-about .about-close {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
  }

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

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

  .page-about .index-rail {
    display: block;
    position: sticky;
    top: 132px;
    align-self: start;
    padding-top: var(--space-96);
  }

  .page-about .index-rail-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0 9px 14px;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-soft);
    text-decoration: none;
    border-left: 1px solid var(--line);
    transition: color .2s var(--ease), border-color .2s var(--ease);
  }

  .page-about .index-rail-link:hover,
  .page-about .index-rail-link:focus-visible {
    color: var(--ink);
    border-left-color: var(--gold);
  }

  .page-about .index-rail-link[aria-current="true"] {
    color: var(--ink);
    border-left-color: var(--gold);
    font-weight: 700;
  }

  .page-about .index-rail-link .index-rail-num {
    color: var(--gold);
    font-size: var(--fs-mono);
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
  }

  .page-about .about-head-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .page-about .about-title {
    max-width: 14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .index-rail-link {
    transition: none;
  }
}