.page-about {
  --about-gap: clamp(56px, 9vw, 112px);
  --about-rail: 200px;
  background: var(--bg);
  color: var(--fg);
}

/* ---------- 面包屑 ---------- */
.page-about .breadcrumb {
  padding-top: 28px;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: 30px 0 var(--about-gap);
}

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

.page-about .about-hero__eyebrow {
  margin: 0;
}

.page-about .about-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 7vw, 54px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.page-about .about-hero__lede {
  margin: 0;
  max-width: 42em;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--fg-soft);
}

.page-about .about-hero__stats {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.page-about .about-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--bg);
}

.page-about .about-hero__num {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--spark);
}

.page-about .about-hero__cap {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-dim);
}

.page-about .about-hero__figure {
  margin: clamp(32px, 5vw, 56px) 0 0;
}

.page-about .about-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-soft);
  object-fit: cover;
  filter: saturate(0.88) brightness(0.92);
}

/* ---------- 栏目索引条 ---------- */
.page-about .about-index-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  background: rgba(11, 27, 51, 0.95);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  backdrop-filter: blur(6px);
}

.page-about .about-index {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-about .about-index::-webkit-scrollbar {
  display: none;
}

.page-about .about-index__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}

.page-about .about-index__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-dim);
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--rule-soft);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible {
  color: var(--fg);
  background: var(--indigo);
}

.page-about .about-index__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--grass);
}

/* ---------- 章节通用 ---------- */
.page-about .about-section {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0;
}

.page-about .about-section + .about-section {
  border-top: 1px solid var(--rule-soft);
}

.page-about .about-h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4.2vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.page-about .about-lede {
  max-width: 40em;
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--fg-soft);
}

.page-about .about-split {
  display: grid;
  gap: 26px;
}

.page-about .about-rail {
  border-left: 1px solid var(--rule-soft);
  padding-left: 16px;
}

.page-about .about-rail__note {
  margin: 0;
}

/* ---------- 区域覆盖 ---------- */
.page-about .about-regions__grid {
  display: grid;
  gap: 1px;
  margin-top: 30px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.page-about .about-region {
  position: relative;
  padding: 22px 18px 24px;
  background: var(--bg);
  transition: background var(--t-base) var(--ease-out);
}

.page-about .about-region::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color var(--t-fast) var(--ease-out);
}

.page-about .about-region:hover,
.page-about .about-region:focus-visible {
  background: var(--bg-raised);
  outline: none;
}

.page-about .about-region:hover::after,
.page-about .about-region:focus-visible::after {
  border-color: var(--spark);
}

.page-about .about-region__bar {
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--grass);
  transition: width var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out);
}

.page-about .about-region:hover .about-region__bar,
.page-about .about-region:focus-visible .about-region__bar {
  width: 52px;
  background: var(--spark);
}

.page-about .about-region__name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
}

.page-about .about-region__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--fg-dim);
  transition: color var(--t-fast) var(--ease-out);
}

.page-about .about-region:hover .about-region__meta,
.page-about .about-region:focus-visible .about-region__meta {
  color: var(--fg-soft);
}

.page-about .about-figure {
  margin: clamp(30px, 4vw, 48px) 0 0;
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-soft);
}

.page-about .about-coverage-note {
  margin-top: 26px;
  max-width: 42em;
  border-top: 1px solid var(--rule-soft);
  padding-top: 22px;
}

.page-about .about-coverage-note p {
  margin: 0 0 1.2em;
  font-size: 17px;
  line-height: 1.8;
  color: var(--fg-soft);
}

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

/* ---------- 团队结构条形图 ---------- */
.page-about .about-bars {
  display: grid;
  gap: 20px;
  margin-top: 30px;
  max-width: 40em;
}

.page-about .about-bar__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 9px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--fg-soft);
}

.page-about .about-bar__val {
  color: var(--spark);
}

.page-about .about-bar__track {
  height: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--rule-soft);
}

.page-about .about-bar__fill {
  display: block;
  height: 100%;
}

.page-about .about-bar__fill--tech {
  width: 45%;
  background: var(--spark);
}

.page-about .about-bar__fill--ops {
  width: 55%;
  background: var(--grass);
}

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

/* ---------- 发展历程 ---------- */
.page-about .about-history {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
}

.page-about .about-stage {
  border-bottom: 1px solid var(--rule-soft);
}

.page-about .about-stage__summary {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

.page-about .about-stage__summary::-webkit-details-marker {
  display: none;
}

.page-about .about-stage__year {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--state);
}

.page-about .about-stage__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--fg);
}

.page-about .about-stage__mark {
  position: relative;
  justify-self: end;
  width: 14px;
  height: 14px;
}

.page-about .about-stage__mark::before,
.page-about .about-stage__mark::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}

.page-about .about-stage__mark::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

.page-about .about-stage__mark::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

.page-about .about-stage__details[open] .about-stage__mark::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-about .about-stage__summary:hover .about-stage__name,
.page-about .about-stage__summary:focus-visible .about-stage__name {
  color: var(--accent);
}

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

.page-about .about-stage__body {
  padding: 0 0 24px;
}

.page-about .about-stage__body p {
  margin: 0;
  max-width: 42em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--fg-soft);
}

/* ---------- 浅色分区 ---------- */
.page-about .about-section--light {
  background: var(--cream);
  color: var(--ink);
  --fg: var(--ink);
  --fg-soft: #3A4A46;
  --fg-dim: #5E6E69;
  --rule: rgba(15, 59, 51, 0.3);
  --rule-soft: rgba(15, 59, 51, 0.16);
  --accent: var(--grass);
  --state: var(--saddle);
  --bg: var(--cream);
  --bg-raised: #E6E0D2;
  --indigo: #E6E0D2;
}

/* ---------- 安全与维护 ---------- */
.page-about .about-facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
}

.page-about .about-fact {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.page-about .about-fact__key {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--state);
  padding-top: 3px;
}

.page-about .about-fact__val {
  font-size: 16px;
  line-height: 1.8;
  color: var(--fg-soft);
}

/* ---------- 合作生态 ---------- */
.page-about .about-section--raised {
  background: linear-gradient(180deg, var(--indigo) 0%, var(--night) 100%);
}

.page-about .about-score {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--state);
}

.page-about .about-score small {
  font-size: 0.45em;
  letter-spacing: 0.02em;
}

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

.page-about .about-body .prose a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--grass);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.page-about .about-body .prose a:hover,
.page-about .about-body .prose a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- 收束 ---------- */
.page-about .about-section--close {
  padding-bottom: clamp(64px, 9vw, 128px);
}

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

.page-about .about-close__text {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3.4vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.page-about .about-close__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-about .about-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .page-about .about-regions__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-about .about-split {
    grid-template-columns: minmax(0, var(--about-rail)) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 72px);
  }

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

  .page-about .about-stage__summary {
    grid-template-columns: 92px minmax(0, 1fr) 20px;
    gap: 20px;
  }
}

@media (min-width: 960px) {
  .page-about .about-hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 22px;
    align-items: end;
  }

  .page-about .about-hero__eyebrow {
    grid-column: 1 / -1;
  }

  .page-about .about-hero__title {
    grid-column: 1 / 8;
  }

  .page-about .about-hero__lede {
    grid-column: 8 / 13;
    padding-bottom: 8px;
  }

  .page-about .about-hero__stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 20px;
  }
}

@media (min-width: 1024px) {
  .page-about .about-step-shift {
    padding-left: 8vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-region,
  .page-about .about-region__bar,
  .page-about .about-region__meta,
  .page-about .about-stage__mark::before,
  .page-about .about-stage__mark::after {
    transition: none;
  }
}