.page-about {
  --about-cut: 10px;
  --about-cut-lg: 18px;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  overflow-x: clip;
}

/* ---------- 封面 ---------- */
.page-about .about-cover {
  position: relative;
  padding-top: clamp(104px, 16vw, 148px);
  padding-bottom: clamp(40px, 7vw, 76px);
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 90, 31, 0.22), transparent 44%),
    radial-gradient(circle at 70% 0%, rgba(255, 197, 61, 0.3), transparent 40%),
    var(--paper);
  overflow: hidden;
}

.page-about .about-breadcrumb {
  margin-bottom: clamp(24px, 5vw, 44px);
}

.page-about .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.page-about .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-about .breadcrumb-link {
  color: var(--neutral);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-about .breadcrumb-link:hover,
.page-about .breadcrumb-link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.page-about .breadcrumb-sep {
  color: var(--line-strong);
}

.page-about .breadcrumb-current {
  color: var(--ink-900);
  font-weight: 700;
}

.page-about .about-cover-grid {
  display: grid;
  gap: clamp(28px, 6vw, 56px);
}

.page-about .about-kicker {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--orange);
  font-weight: 700;
}

.page-about .about-title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(38px, 10.5vw, 84px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.page-about .about-lead {
  margin: 0 0 14px;
  max-width: 34em;
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.75;
  color: var(--ink-700);
}

.page-about .about-lead-sub {
  margin: 0;
  max-width: 32em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--neutral);
}

.page-about .about-index {
  background: var(--ink-900);
  color: var(--paper);
  padding: 22px 20px 18px;
  clip-path: polygon(0 0, calc(100% - var(--about-cut-lg)) 0, 100% var(--about-cut-lg), 100% 100%, var(--about-cut-lg) 100%, 0 calc(100% - var(--about-cut-lg)));
}

.page-about .about-index-title {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--yellow);
  font-weight: 700;
}

.page-about .about-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-index-item + .about-index-item {
  border-top: 1px solid rgba(255, 249, 240, 0.14);
}

.page-about .about-index-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  color: var(--paper);
  text-decoration: none;
  transition: transform 180ms var(--ease), color 180ms var(--ease);
}

.page-about .about-index-link:hover,
.page-about .about-index-link:focus-visible {
  transform: translateX(4px);
  color: var(--yellow);
}

.page-about .about-index-num {
  flex: none;
  min-width: 30px;
  padding: 3px 0;
  text-align: center;
  background: var(--yellow);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-about .about-index-label {
  font-size: 15px;
  font-weight: 700;
}

/* ---------- 章节通用 ---------- */
.page-about .about-chapter {
  padding-block: clamp(52px, 9vw, 104px);
}

.page-about .about-chapter-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-about .about-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-about .about-step-num {
  display: inline-block;
  padding: 4px 10px;
  background: var(--yellow);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

.page-about .about-step-label {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--neutral);
  font-weight: 700;
}

.page-about .about-step--dark .about-step-label {
  color: rgba(255, 249, 240, 0.66);
}

.page-about .about-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 5.4vw, 46px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.page-about .about-h2--small {
  font-size: clamp(22px, 4vw, 32px);
  margin-bottom: 14px;
}

.page-about .about-h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.page-about .about-p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 36em;
}

.page-about .about-p--dark {
  color: rgba(255, 249, 240, 0.78);
  max-width: 34em;
}

.page-about .about-cols {
  display: grid;
  gap: 20px;
}

.page-about .about-vert {
  color: var(--neutral);
  font-size: 12px;
  letter-spacing: 0.3em;
  margin: 0;
}

.page-about .about-prose p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 36em;
}

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

.page-about .about-figure {
  margin: clamp(28px, 5vw, 52px) auto 0;
  padding-inline: var(--pad);
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 2px;
  background: var(--blue);
}

.page-about .about-figure .media-caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--neutral);
}

.page-about .about-inline-link {
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--neutral);
}

.page-about .about-inline-link a {
  color: var(--ink-900);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 1px;
}

.page-about .about-inline-link a:hover,
.page-about .about-inline-link a:focus-visible {
  color: var(--orange);
}

.page-about .about-inline-link--dark {
  color: rgba(255, 249, 240, 0.7);
}

.page-about .about-inline-link--dark a {
  color: var(--paper);
  border-bottom-color: var(--yellow);
}

/* ---------- 色带 ---------- */
.page-about .about-band {
  background: var(--orange);
  color: var(--paper);
  padding-block: clamp(30px, 5.5vw, 54px);
}

.page-about .about-band-inner {
  display: grid;
  gap: 8px;
}

.page-about .about-band-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: rgba(255, 249, 240, 0.82);
}

.page-about .about-band-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 44px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-about .about-band-sub {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 249, 240, 0.9);
}

/* ---------- 四次整理 ---------- */
.page-about .about-chapter--tidying {
  background:
    linear-gradient(rgba(20, 22, 26, 0.045) 1px, transparent 1px) 0 0 / 100% 32px,
    var(--paper-deep);
}

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

.page-about .about-move {
  position: relative;
  padding: 22px 20px 20px;
  background: var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, var(--about-cut) 100%, 0 calc(100% - var(--about-cut)));
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}

.page-about .about-move:hover {
  transform: translateY(-2px);
  background: var(--coral);
}

.page-about .about-move-num {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.12em;
}

.page-about .about-move p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

/* ---------- 团队 ---------- */
.page-about .about-team-grid {
  display: grid;
  gap: clamp(24px, 5vw, 48px);
}

.page-about .about-team-figure {
  margin: 0;
  max-width: 420px;
}

.page-about .about-team-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--blue);
  clip-path: polygon(0 0, calc(100% - var(--about-cut-lg)) 0, 100% var(--about-cut-lg), 100% 100%, var(--about-cut-lg) 100%, 0 calc(100% - var(--about-cut-lg)));
}

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

.page-about .about-team-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 2px solid var(--ink-900);
}

.page-about .about-team-item:last-child {
  border-bottom: 2px solid var(--ink-900);
}

.page-about .about-team-count {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 42px);
  font-weight: 900;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.page-about .about-team-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

/* ---------- 走查 ---------- */
.page-about .about-chapter--review {
  background:
    radial-gradient(circle at 12% 88%, rgba(47, 211, 165, 0.16), transparent 46%),
    var(--paper);
}

.page-about .about-review-grid {
  display: grid;
  gap: clamp(24px, 5vw, 44px);
}

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

.page-about .about-step-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.page-about .about-steps-num {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.page-about .about-step-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-about .about-review-card {
  padding: 24px 22px;
  background: var(--ink-900);
  color: var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--about-cut-lg)) 0, 100% var(--about-cut-lg), 100% 100%, var(--about-cut-lg) 100%, 0 calc(100% - var(--about-cut-lg)));
}

.page-about .about-review-card-label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--mint);
  font-weight: 700;
}

.page-about .about-review-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
}

.page-about .about-review-num {
  font-family: var(--font-display);
  font-size: clamp(52px, 12vw, 76px);
  font-weight: 900;
  line-height: 1;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.page-about .about-review-unit {
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
}

.page-about .about-review-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 249, 240, 0.8);
}

/* ---------- 版本 ---------- */
.page-about .about-chapter--versions {
  background:
    radial-gradient(circle at 84% 6%, rgba(255, 90, 31, 0.24), transparent 42%),
    var(--blue);
  color: var(--paper);
}

.page-about .about-chapter--versions .about-h2 {
  color: var(--paper);
}

.page-about .about-versions-list {
  position: relative;
  margin: 32px 0 0;
  padding: 0 0 0 26px;
  list-style: none;
  display: grid;
  gap: 22px;
}

.page-about .about-versions-list::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(255, 249, 240, 0.22);
}

.page-about .about-version {
  position: relative;
}

.page-about .about-version-dot {
  position: absolute;
  left: -26px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(47, 211, 165, 0.16);
}

.page-about .about-version-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  background: var(--yellow);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-about .about-version-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 249, 240, 0.84);
}

.page-about .about-figure--timeline {
  padding-inline: 0;
}

.page-about .media-caption--dark {
  color: rgba(255, 249, 240, 0.66) !important;
}

/* ---------- 主题预览 ---------- */
.page-about .about-chapter--theme {
  background: var(--paper);
  padding-block: clamp(40px, 7vw, 76px);
}

.page-about .about-theme {
  margin-top: 22px;
  border: 1px solid var(--line);
  padding: 18px 16px 20px;
  background: var(--paper-deep);
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, var(--about-cut) 100%, 0 calc(100% - var(--about-cut)));
}

.page-about .about-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-about .about-tab {
  appearance: none;
  border: 1px solid var(--ink-900);
  background: transparent;
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-about .about-tab[aria-selected="true"] {
  background: var(--ink-900);
  color: var(--paper);
}

.page-about .about-tab:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--paper);
}

.page-about .about-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.page-about .about-tabpanel-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 34em;
}

.page-about .about-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-swatch {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 4px;
}

.page-about .about-swatch--paper {
  background: var(--paper);
  color: var(--ink-900);
  border: 1px solid var(--line);
}

.page-about .about-swatch--ink {
  background: var(--ink-900);
  color: var(--paper);
}

.page-about .about-swatch--orange {
  background: var(--orange);
  color: var(--paper);
}

.page-about .about-swatch--blue {
  background: var(--blue);
  color: var(--paper);
}

.page-about .about-swatch--grey {
  background: #c9ccd3;
  color: var(--ink-900);
}

.page-about .about-swatch--yellow {
  background: var(--yellow);
  color: var(--ink-900);
}

/* ---------- 长期 ---------- */
.page-about .about-chapter--promise {
  background: var(--coral);
}

.page-about .about-step--plain .about-step-num {
  background: var(--ink-900);
  color: var(--yellow);
}

.page-about .about-promise-list {
  margin: 0 0 clamp(28px, 5vw, 44px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.page-about .about-promise-item {
  padding: 18px 0 16px;
  border-top: 2px solid var(--ink-900);
}

.page-about .about-promise-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-about .about-links {
  display: grid;
  gap: 10px;
}

.page-about .about-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--paper);
  color: var(--ink-900);
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, var(--about-cut) 100%, 0 calc(100% - var(--about-cut)));
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}

.page-about .about-link:hover,
.page-about .about-link:focus-visible {
  transform: translateY(-2px);
  background: var(--yellow);
}

.page-about .about-link-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}

.page-about .about-link-note {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--neutral);
}

.page-about .about-link:hover .about-link-note,
.page-about .about-link:focus-visible .about-link-note {
  color: var(--ink-900);
}

.page-about a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- 平板起 ---------- */
@media (min-width: 760px) {
  .page-about .about-cover-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    align-items: end;
  }

  .page-about .about-index {
    padding: 26px 24px 20px;
  }

  .page-about .about-chapter-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .page-about .about-cols {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 26px;
  }

  .page-about .about-vert {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding-top: 6px;
  }

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

  .page-about .about-team-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .page-about .about-review-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
    align-items: start;
  }

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

  .page-about .about-theme {
    padding: 22px 24px 24px;
  }
}

/* ---------- 桌面：版本时间线横向 ---------- */
@media (min-width: 1000px) {
  .page-about .about-cover {
    padding-top: clamp(120px, 12vw, 168px);
  }

  .page-about .about-title {
    font-size: clamp(56px, 6.4vw, 88px);
  }

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

  .page-about .about-versions-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    padding: 30px 0 0;
    margin-top: 44px;
  }

  .page-about .about-versions-list::before {
    left: 0;
    right: 0;
    top: 6px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .page-about .about-version-dot {
    left: 0;
    top: 0;
  }

  .page-about .about-version {
    padding-right: 12px;
  }

  .page-about .about-figure--timeline {
    padding-inline: 0;
  }

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

  .page-about .about-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px;
  }
}

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

  .page-about .about-index-link:hover,
  .page-about .about-move:hover,
  .page-about .about-link:hover {
    transform: none;
  }
}


<main id="main-content" class="page-about">

  <section class="about-cover" aria-labelledby="about-title">
    <div class="container about-cover-inner">
      <nav class="breadcrumb about-breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb-list">
          <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a><span class="breadcrumb-sep" aria-hidden="true">/</span></li>
          <li class="breadcrumb-item"><span class="breadcrumb-current" aria-current="page">品牌自述</span></li>
        </ol>
      </nav>

      <div class="about-cover-grid">
        <div class="about-cover-main">
          <p class="about-kicker">自 2019 年起 · 第七个内容年度</p>
          <h1 class="about-title" id="about-title">把入口铺成<br>一条走得通的路</h1>
          <p class="about-lead">开心娱乐登录做的事很具体：你打开页面，就知道该往哪儿走。七年下来，18 个分类摆在同一张图上，活动规则写在明处，换台手机也能回到原来那个位置。</p>
          <p class="about-lead-sub">下面说说这个站是谁在做、平时忙些什么，以及为什么把“一找就着”当成正经生意来做。</p>
        </div>

        <nav class="about-index" aria-labelledby="about-index-title">
          <p class="about-index-title" id="about-index-title">往下翻</p>
          <ul class="about-index-list">
            <li class="about-index-item"><a class="about-index-link" href="#origin"><span class="about-index-num">00</span><span class="about-index-label">最早那一版</span></a></li>
            <li class="about-index-item"><a class="about-index-link" href="#tidying"><span class="about-index-num">01</span><span class="about-index-label">四次整理</span></a></li>
            <li class="about-index-item"><a class="about-index-link" href="#team"><span class="about-index-num">02</span><span class="about-index-label">人手与分工</span></a></li>
            <li class="about-index-item"><a class="about-index-link" href="#review"><span class="about-index-num">03</span><span class="about-index-label">每年两次走查</span></a></li>
            <li class="about-index-item"><a class="about-index-link" href="#versions"><span class="about-index-num">04</span><span class="about-index-label">版本怎么长</span></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </section>

  <section class="about-chapter about-chapter--origin" id="origin" aria-labelledby="origin-title">
    <div class="container">
      <div class="about-chapter-head">
        <span class="about-step">
          <span class="about-step-num">00</span>
          <span class="about-step-label">起点</span>
        </span>
        <h2 class="about-h2" id="origin-title">头一版，想找个方向得连点三层</h2>
      </div>

      <div class="about-cols">
        <p class="eyebrow eyebrow--vertical about-vert">ORIGIN / 2019</p>
        <div class="prose about-prose">
          <p>2019 年刚开张那会儿，站里的分类挂得七零八落，有的藏在二级列表里，有的干脆只有名字没有说明。找一个方向得连点三层才看见全貌，换台设备又得从头摸一遍。</p>
          <p>最早那批反馈出奇一致：东西不算少，就是走不到。于是团队认下一件笨事——先把路修直，再谈别的。</p>
        </div>
      </div>
    </div>

    <figure class="about-figure container--wide">
      <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="左侧密集交错的线条向右逐渐归并成三条平直路径，归并点用暖橙高亮标出">
      <figcaption class="media-caption">早期层层嵌套的入口，后来归并成几条一眼能看完的主路径。</figcaption>
    </figure>
  </section>

  <div class="about-band">
    <div class="container about-band-inner">
      <p class="about-band-note">2019 — 现在</p>
      <p class="about-band-text">路修直了，人才愿意往里走。</p>
      <p class="about-band-sub">入口这件事，前后正经动过四次。</p>
    </div>
  </div>

  <section class="about-chapter about-chapter--tidying" id="tidying" aria-labelledby="tidying-title">
    <div class="container">
      <div class="about-chapter-head">
        <span class="about-step">
          <span class="about-step-num">01</span>
          <span class="about-step-label">整理</span>
        </span>
        <h2 class="about-h2" id="tidying-title">四次整理，把分类收进一张铺平的图</h2>
      </div>

      <p class="about-p about-p--wide">改法不复杂：把绕远的路一条条拉直，然后告诉你能从哪儿开始。四次动手，散落的方向并成 18 个一级分类，一屏就能扫完。</p>

      <ol class="about-moves">
        <li class="about-move">
          <span class="about-move-num">A</span>
          <h3 class="about-h3">先把层级砍掉</h3>
          <p>藏在三层底下的内容提到台面上，一级栏目收到 6 个，翻找从“层层点开”变成“抬头就看”。</p>
        </li>
        <li class="about-move">
          <span class="about-move-num">B</span>
          <h3 class="about-h3">再给每个分类正名</h3>
          <p>名字按同一套说法重写，同类的内容挪到一块儿。这一版之后，18 个分类的命名固定下来。</p>
        </li>
        <li class="about-move">
          <span class="about-move-num">C</span>
          <h3 class="about-h3">把图摆平</h3>
          <p>桌面端一屏扫完所有入口，手机端折成两列大卡，拇指够得着，不用来回缩放。</p>
        </li>
        <li class="about-move">
          <span class="about-move-num">D</span>
          <h3 class="about-h3">动了就说一声</h3>
          <p>导航栏的改动按季度对外讲清楚，哪次挪了、挪到哪儿，都能顺着公告查回去。</p>
        </li>
      </ol>

      <p class="about-inline-link">想知道每个入口具体做什么，可以看 <a href="/offerings/">入口与服务</a> 里的分类说明。</p>
    </div>
  </section>

  <section class="about-chapter about-chapter--team" id="team" aria-labelledby="team-title">
    <div class="container">
      <div class="about-chapter-head">
        <span class="about-step">
          <span class="about-step-num">02</span>
          <span class="about-step-label">人手</span>
        </span>
        <h2 class="about-h2" id="team-title">41 个人，把每周的更新按时端上来</h2>
      </div>

      <div class="about-team-grid">
        <figure class="about-team-figure">
          <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="三块不同颜色的切角面板拼成一个方形，分别代表内容运营、技术产品与客服三支队伍" loading="lazy" decoding="async">
        </figure>

        <div class="about-team-body">
          <p class="about-p">日常活儿分三摊干，人不多，但每一摊都有人盯到底。</p>
          <ul class="about-team-list">
            <li class="about-team-item">
              <span class="about-team-count">18</span>
              <div class="about-team-copy">
                <h3 class="about-h3">内容运营</h3>
                <p>管栏目、排活动、写公告。每周 3 次栏目更新按点发出，活动专题每月上线 2 到 3 期。</p>
              </div>
            </li>
            <li class="about-team-item">
              <span class="about-team-count">14</span>
              <div class="about-team-copy">
                <h3 class="about-h3">技术与产品</h3>
                <p>负责入口结构、卡片排布和多设备适配。主流 5 种浏览器内核都跑过一遍，桌面和手机看到的顺序一致。</p>
              </div>
            </li>
            <li class="about-team-item">
              <span class="about-team-count">9</span>
              <div class="about-team-copy">
                <h3 class="about-h3">客服</h3>
                <p>整理出 68 条常见问答，按登录、设备、活动、账号四组摆好，换机找不到入口的人多半能在这儿自己解决。</p>
              </div>
            </li>
          </ul>
          <p class="about-inline-link">问答条目都在 <a href="/knowledge/">帮助中心</a>，按场景分好组。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="about-chapter about-chapter--review" id="review" aria-labelledby="review-title">
    <div class="container">
      <div class="about-chapter-head">
        <span class="about-step">
          <span class="about-step-num">03</span>
          <span class="about-step-label">走查</span>
        </span>
        <h2 class="about-h2" id="review-title">一年两回，把每条路重新走一遍</h2>
      </div>

      <div class="about-review-grid">
        <div class="about-review-main">
          <p class="about-p">入口摆好不是一劳永逸。每年两次全量走查，团队会把自己当成第一次来的人，从头走到尾。</p>
          <ol class="about-steps">
            <li class="about-step-item">
              <span class="about-steps-num">1</span>
              <p>从首页出发，把 18 个分类挨个点进去，记下到目标页要几步。</p>
            </li>
            <li class="about-step-item">
              <span class="about-steps-num">2</span>
              <p>看三件事：一屏能不能扫完、名字看不看得懂、点进去是不是想找的那样东西。</p>
            </li>
            <li class="about-step-item">
              <span class="about-steps-num">3</span>
              <p>把绕远的路线拉直，改完再走一遍，确认没在别处添新坑。</p>
            </li>
          </ol>
        </div>

        <aside class="about-review-card" aria-label="走查结果">
          <p class="about-review-card-label">最近一次走查之后</p>
          <p class="about-review-figure"><span class="about-review-num">2</span><span class="about-review-unit">步以内</span></p>
          <p class="about-review-text">从首页点到常用目标页，平均点击路径缩短到 2 步以内。</p>
        </aside>
      </div>
    </div>
  </section>

  <section class="about-chapter about-chapter--versions" id="versions" aria-labelledby="versions-title">
    <div class="container">
      <div class="about-chapter-head">
        <span class="about-step about-step--dark">
          <span class="about-step-num">04</span>
          <span class="about-step-label">版本</span>
        </span>
        <h2 class="about-h2" id="versions-title">从第一版到 v3.6，中间隔了 12 次大版本</h2>
      </div>

      <p class="about-p about-p--dark">站点没停过手。挑几个你可能有感觉的节点，看看这几年都改了什么。</p>

      <ol class="about-versions-list">
        <li class="about-version">
          <span class="about-version-dot" aria-hidden="true"></span>
          <span class="about-version-tag">v1.0</span>
          <p class="about-version-text">站点上线，第一版分类表挂出来。</p>
        </li>
        <li class="about-version">
          <span class="about-version-dot" aria-hidden="true"></span>
          <span class="about-version-tag">v1.6</span>
          <p class="about-version-text">一级栏目收到 6 个，顶部导航改成一颗能收起的胶囊。</p>
        </li>
        <li class="about-version">
          <span class="about-version-dot" aria-hidden="true"></span>
          <span class="about-version-tag">v2.0</span>
          <p class="about-version-text">分类矩阵铺开，桌面一屏扫完所有入口。</p>
        </li>
        <li class="about-version">
          <span class="about-version-dot" aria-hidden="true"></span>
          <span class="about-version-tag">v2.8</span>
          <p class="about-version-text">活动专题按时间排好，记录明细能翻能存。</p>
        </li>
        <li class="about-version">
          <span class="about-version-dot" aria-hidden="true"></span>
          <span class="about-version-tag">v3.2</span>
          <p class="about-version-text">问答重新归类，换设备和登录问题有了照做的步骤。</p>
        </li>
        <li class="about-version">
          <span class="about-version-dot" aria-hidden="true"></span>
          <span class="about-version-tag">v3.6</span>
          <p class="about-version-text">当前版本：18 个分类稳定运行，公告按季度跟上。</p>
        </li>
      </ol>

      <figure class="about-figure about-figure--timeline">
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="深海蓝底的横向刻度线上分布着十二个版本节点，末端节点标出当前版本 v3.6" loading="lazy" decoding="async">
        <figcaption class="media-caption media-caption--dark">十二次大版本沿一条刻度线排开，走到头就是现在这一版。</figcaption>
      </figure>

      <p class="about-inline-link about-inline-link--dark">每次改动的说明都记在 <a href="/information/">资讯与公告</a> 里。</p>
    </div>
  </section>

  <section class="about-chapter about-chapter--theme" aria-labelledby="theme-title">
    <div class="container">
      <h2 class="about-h2 about-h2--small" id="theme-title">白天在办公室，夜里躺床上，字都得看得清</h2>
      <p class="about-p">屏幕亮度不一样，看东西的姿势也不一样。站里备了两套显示，你随手切，内容一模一样。</p>

      <div class="about-theme" data-tabs>
        <div class="tablist about-tablist" role="tablist" aria-label="显示主题">
          <button class="tab about-tab" type="button" role="tab" id="theme-tab-day" aria-selected="true" aria-controls="theme-panel-day">明亮主题</button>
          <button class="tab about-tab" type="button" role="tab" id="theme-tab-night" aria-selected="false" aria-controls="theme-panel-night">深色主题</button>
        </div>

        <div class="tabpanel about-tabpanel" role="tabpanel" id="theme-panel-day" aria-labelledby="theme-tab-day">
          <p class="about-tabpanel-text">暖白底配墨黑字，标题压得重，入口卡片描边清楚。适合白天的强光环境和办公室的大屏。</p>
          <ul class="about-swatches" aria-label="明亮主题用色">
            <li class="about-swatch about-swatch--paper">纸白 #FFF9F0</li>
            <li class="about-swatch about-swatch--ink">墨黑 #14161A</li>
            <li class="about-swatch about-swatch--orange">暖橙 #FF5A1F</li>
          </ul>
        </div>

        <div class="tabpanel about-tabpanel" role="tabpanel" id="theme-panel-night" aria-labelledby="theme-tab-night">
          <p class="about-tabpanel-text">深海蓝底配浅色字，亮度压下来，夜里刷活动记录不刺眼。入口编号换成亮黄，暗处也认得出。</p>
          <ul class="about-swatches" aria-label="深色主题用色">
            <li class="about-swatch about-swatch--blue">深海蓝 #0B2A4A</li>
            <li class="about-swatch about-swatch--grey">浅灰文字</li>
            <li class="about-swatch about-swatch--yellow">亮黄 #FFC53D</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="about-chapter about-chapter--promise" aria-labelledby="promise-title">
    <div class="container">
      <div class="about-chapter-head">
        <span class="about-step about-step--plain">
          <span class="about-step-num">05</span>
          <span class="about-step-label">长期</span>
        </span>
        <h2 class="about-h2" id="promise-title">打算一直做下去，改动都摆在明面上</h2>
      </div>

      <p class="about-p about-p--wide">站点从 2019 年走到今天，靠的不是哪一次大改，而是每周都在动、每季度都说一声。用户分布在 31 个省级行政区，华东与华南来得最勤，这也决定了我们改哪儿先改。</p>

      <ul class="about-promise-list">
        <li class="about-promise-item">
          <h3 class="about-h3">公告跟得上改动</h3>
          <p>导航栏动的每一次，都在当季公告里写清位置和原因，看见变化时能顺着找回去。</p>
        </li>
        <li class="about-promise-item">
          <h3 class="about-h3">记录翻得回去</h3>
          <p>活动明细保留最近 12 个月，想看更早的，去对应的专题页里翻。</p>
        </li>
        <li class="about-promise-item">
          <h3 class="about-h3">换设备不掉线</h3>
          <p>同一个账号在几台设备之间来回，入口和收藏都还在原处，不用重新认识一遍。</p>
        </li>
      </ul>

      <div class="about-links">
        <a class="about-link" href="/offerings/">
          <span class="about-link-label">18 个分类怎么用</span>
          <span class="about-link-note">入口与服务</span>
        </a>
        <a class="about-link" href="/information/">
          <span class="about-link-label">最近改了什么</span>
          <span class="about-link-note">资讯与公告</span>
        </a>
        <a class="about-link" href="/knowledge/">
          <span class="about-link-label">先自己找答案</span>
          <span class="about-link-note">帮助中心</span>
        </a>
        <a class="about-link" href="/reach-us/">
          <span class="about-link-label">直接问人</span>
          <span class="about-link-note">联系入口</span>
        </a>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-cut: 10px;
  --about-cut-lg: 18px;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  overflow-x: clip;
}

/* ---------- 封面 ---------- */
.page-about .about-cover {
  position: relative;
  padding-top: clamp(104px, 16vw, 148px);
  padding-bottom: clamp(40px, 7vw, 76px);
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 90, 31, 0.22), transparent 44%),
    radial-gradient(circle at 70% 0%, rgba(255, 197, 61, 0.3), transparent 40%),
    var(--paper);
  overflow: hidden;
}

.page-about .about-breadcrumb {
  margin-bottom: clamp(24px, 5vw, 44px);
}

.page-about .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.page-about .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-about .breadcrumb-link {
  color: var(--neutral);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-about .breadcrumb-link:hover,
.page-about .breadcrumb-link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.page-about .breadcrumb-sep {
  color: var(--line-strong);
}

.page-about .breadcrumb-current {
  color: var(--ink-900);
  font-weight: 700;
}

.page-about .about-cover-grid {
  display: grid;
  gap: clamp(28px, 6vw, 56px);
}

.page-about .about-kicker {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--orange);
  font-weight: 700;
}

.page-about .about-title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(38px, 10.5vw, 84px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.page-about .about-lead {
  margin: 0 0 14px;
  max-width: 34em;
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.75;
  color: var(--ink-700);
}

.page-about .about-lead-sub {
  margin: 0;
  max-width: 32em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--neutral);
}

.page-about .about-index {
  background: var(--ink-900);
  color: var(--paper);
  padding: 22px 20px 18px;
  clip-path: polygon(0 0, calc(100% - var(--about-cut-lg)) 0, 100% var(--about-cut-lg), 100% 100%, var(--about-cut-lg) 100%, 0 calc(100% - var(--about-cut-lg)));
}

.page-about .about-index-title {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--yellow);
  font-weight: 700;
}

.page-about .about-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-index-item + .about-index-item {
  border-top: 1px solid rgba(255, 249, 240, 0.14);
}

.page-about .about-index-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  color: var(--paper);
  text-decoration: none;
  transition: transform 180ms var(--ease), color 180ms var(--ease);
}

.page-about .about-index-link:hover,
.page-about .about-index-link:focus-visible {
  transform: translateX(4px);
  color: var(--yellow);
}

.page-about .about-index-num {
  flex: none;
  min-width: 30px;
  padding: 3px 0;
  text-align: center;
  background: var(--yellow);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-about .about-index-label {
  font-size: 15px;
  font-weight: 700;
}

/* ---------- 章节通用 ---------- */
.page-about .about-chapter {
  padding-block: clamp(52px, 9vw, 104px);
}

.page-about .about-chapter-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-about .about-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-about .about-step-num {
  display: inline-block;
  padding: 4px 10px;
  background: var(--yellow);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

.page-about .about-step-label {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--neutral);
  font-weight: 700;
}

.page-about .about-step--dark .about-step-label {
  color: rgba(255, 249, 240, 0.66);
}

.page-about .about-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 5.4vw, 46px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.page-about .about-h2--small {
  font-size: clamp(22px, 4vw, 32px);
  margin-bottom: 14px;
}

.page-about .about-h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.page-about .about-p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 36em;
}

.page-about .about-p--dark {
  color: rgba(255, 249, 240, 0.78);
  max-width: 34em;
}

.page-about .about-cols {
  display: grid;
  gap: 20px;
}

.page-about .about-vert {
  color: var(--neutral);
  font-size: 12px;
  letter-spacing: 0.3em;
  margin: 0;
}

.page-about .about-prose p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 36em;
}

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

.page-about .about-figure {
  margin: clamp(28px, 5vw, 52px) auto 0;
  padding-inline: var(--pad);
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 2px;
  background: var(--blue);
}

.page-about .about-figure .media-caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--neutral);
}

.page-about .about-inline-link {
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--neutral);
}

.page-about .about-inline-link a {
  color: var(--ink-900);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 1px;
}

.page-about .about-inline-link a:hover,
.page-about .about-inline-link a:focus-visible {
  color: var(--orange);
}

.page-about .about-inline-link--dark {
  color: rgba(255, 249, 240, 0.7);
}

.page-about .about-inline-link--dark a {
  color: var(--paper);
  border-bottom-color: var(--yellow);
}

/* ---------- 色带 ---------- */
.page-about .about-band {
  background: var(--orange);
  color: var(--paper);
  padding-block: clamp(30px, 5.5vw, 54px);
}

.page-about .about-band-inner {
  display: grid;
  gap: 8px;
}

.page-about .about-band-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: rgba(255, 249, 240, 0.82);
}

.page-about .about-band-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 44px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-about .about-band-sub {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 249, 240, 0.9);
}

/* ---------- 四次整理 ---------- */
.page-about .about-chapter--tidying {
  background:
    linear-gradient(rgba(20, 22, 26, 0.045) 1px, transparent 1px) 0 0 / 100% 32px,
    var(--paper-deep);
}

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

.page-about .about-move {
  position: relative;
  padding: 22px 20px 20px;
  background: var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, var(--about-cut) 100%, 0 calc(100% - var(--about-cut)));
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}

.page-about .about-move:hover {
  transform: translateY(-2px);
  background: var(--coral);
}

.page-about .about-move-num {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.12em;
}

.page-about .about-move p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

/* ---------- 团队 ---------- */
.page-about .about-team-grid {
  display: grid;
  gap: clamp(24px, 5vw, 48px);
}

.page-about .about-team-figure {
  margin: 0;
  max-width: 420px;
}

.page-about .about-team-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--blue);
  clip-path: polygon(0 0, calc(100% - var(--about-cut-lg)) 0, 100% var(--about-cut-lg), 100% 100%, var(--about-cut-lg) 100%, 0 calc(100% - var(--about-cut-lg)));
}

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

.page-about .about-team-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 2px solid var(--ink-900);
}

.page-about .about-team-item:last-child {
  border-bottom: 2px solid var(--ink-900);
}

.page-about .about-team-count {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 42px);
  font-weight: 900;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.page-about .about-team-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

/* ---------- 走查 ---------- */
.page-about .about-chapter--review {
  background:
    radial-gradient(circle at 12% 88%, rgba(47, 211, 165, 0.16), transparent 46%),
    var(--paper);
}

.page-about .about-review-grid {
  display: grid;
  gap: clamp(24px, 5vw, 44px);
}

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

.page-about .about-step-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.page-about .about-steps-num {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.page-about .about-step-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-about .about-review-card {
  padding: 24px 22px;
  background: var(--ink-900);
  color: var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--about-cut-lg)) 0, 100% var(--about-cut-lg), 100% 100%, var(--about-cut-lg) 100%, 0 calc(100% - var(--about-cut-lg)));
}

.page-about .about-review-card-label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--mint);
  font-weight: 700;
}

.page-about .about-review-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
}

.page-about .about-review-num {
  font-family: var(--font-display);
  font-size: clamp(52px, 12vw, 76px);
  font-weight: 900;
  line-height: 1;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.page-about .about-review-unit {
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
}

.page-about .about-review-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 249, 240, 0.8);
}

/* ---------- 版本 ---------- */
.page-about .about-chapter--versions {
  background:
    radial-gradient(circle at 84% 6%, rgba(255, 90, 31, 0.24), transparent 42%),
    var(--blue);
  color: var(--paper);
}

.page-about .about-chapter--versions .about-h2 {
  color: var(--paper);
}

.page-about .about-versions-list {
  position: relative;
  margin: 32px 0 0;
  padding: 0 0 0 26px;
  list-style: none;
  display: grid;
  gap: 22px;
}

.page-about .about-versions-list::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(255, 249, 240, 0.22);
}

.page-about .about-version {
  position: relative;
}

.page-about .about-version-dot {
  position: absolute;
  left: -26px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(47, 211, 165, 0.16);
}

.page-about .about-version-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  background: var(--yellow);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-about .about-version-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 249, 240, 0.84);
}

.page-about .about-figure--timeline {
  padding-inline: 0;
}

.page-about .media-caption--dark {
  color: rgba(255, 249, 240, 0.66) !important;
}

/* ---------- 主题预览 ---------- */
.page-about .about-chapter--theme {
  background: var(--paper);
  padding-block: clamp(40px, 7vw, 76px);
}

.page-about .about-theme {
  margin-top: 22px;
  border: 1px solid var(--line);
  padding: 18px 16px 20px;
  background: var(--paper-deep);
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, var(--about-cut) 100%, 0 calc(100% - var(--about-cut)));
}

.page-about .about-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-about .about-tab {
  appearance: none;
  border: 1px solid var(--ink-900);
  background: transparent;
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-about .about-tab[aria-selected="true"] {
  background: var(--ink-900);
  color: var(--paper);
}

.page-about .about-tab:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--paper);
}

.page-about .about-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.page-about .about-tabpanel-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 34em;
}

.page-about .about-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-swatch {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 4px;
}

.page-about .about-swatch--paper {
  background: var(--paper);
  color: var(--ink-900);
  border: 1px solid var(--line);
}

.page-about .about-swatch--ink {
  background: var(--ink-900);
  color: var(--paper);
}

.page-about .about-swatch--orange {
  background: var(--orange);
  color: var(--paper);
}

.page-about .about-swatch--blue {
  background: var(--blue);
  color: var(--paper);
}

.page-about .about-swatch--grey {
  background: #c9ccd3;
  color: var(--ink-900);
}

.page-about .about-swatch--yellow {
  background: var(--yellow);
  color: var(--ink-900);
}

/* ---------- 长期 ---------- */
.page-about .about-chapter--promise {
  background: var(--coral);
}

.page-about .about-step--plain .about-step-num {
  background: var(--ink-900);
  color: var(--yellow);
}

.page-about .about-promise-list {
  margin: 0 0 clamp(28px, 5vw, 44px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.page-about .about-promise-item {
  padding: 18px 0 16px;
  border-top: 2px solid var(--ink-900);
}

.page-about .about-promise-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-about .about-links {
  display: grid;
  gap: 10px;
}

.page-about .about-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--paper);
  color: var(--ink-900);
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, var(--about-cut) 100%, 0 calc(100% - var(--about-cut)));
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}

.page-about .about-link:hover,
.page-about .about-link:focus-visible {
  transform: translateY(-2px);
  background: var(--yellow);
}

.page-about .about-link-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}

.page-about .about-link-note {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--neutral);
}

.page-about .about-link:hover .about-link-note,
.page-about .about-link:focus-visible .about-link-note {
  color: var(--ink-900);
}

.page-about a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- 平板起 ---------- */
@media (min-width: 760px) {
  .page-about .about-cover-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    align-items: end;
  }

  .page-about .about-index {
    padding: 26px 24px 20px;
  }

  .page-about .about-chapter-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .page-about .about-cols {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 26px;
  }

  .page-about .about-vert {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding-top: 6px;
  }

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

  .page-about .about-team-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .page-about .about-review-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
    align-items: start;
  }

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

  .page-about .about-theme {
    padding: 22px 24px 24px;
  }
}

/* ---------- 桌面：版本时间线横向 ---------- */
@media (min-width: 1000px) {
  .page-about .about-cover {
    padding-top: clamp(120px, 12vw, 168px);
  }

  .page-about .about-title {
    font-size: clamp(56px, 6.4vw, 88px);
  }

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

  .page-about .about-versions-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    padding: 30px 0 0;
    margin-top: 44px;
  }

  .page-about .about-versions-list::before {
    left: 0;
    right: 0;
    top: 6px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .page-about .about-version-dot {
    left: 0;
    top: 0;
  }

  .page-about .about-version {
    padding-right: 12px;
  }

  .page-about .about-figure--timeline {
    padding-inline: 0;
  }

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

  .page-about .about-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px;
  }
}

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

  .page-about .about-index-link:hover,
  .page-about .about-move:hover,
  .page-about .about-link:hover {
    transform: none;
  }
}