.page-about{
  --ab-line:rgba(11,31,51,.13);
  --ab-line-strong:rgba(11,31,51,.2);
  background:var(--moon);
  color:var(--text);
}

/* ── 首屏 ───────────────────────────────── */
.page-about .about-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(30,76,122,.62) 0%, rgba(11,31,51,0) 62%),
    var(--ink);
  color:var(--moon);
  padding:clamp(2.25rem,6vw,4.25rem) 0 clamp(2.5rem,5vw,3.75rem);
  border-bottom:1px solid var(--line-soft);
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(232,207,138,.06) 0 1px, transparent 1px 64px);
}
.page-about .about-hero .shell{
  position:relative;
  z-index:1;
}
.page-about .about-hero .crumb{
  color:var(--on-dark-dim);
  font-size:.8125rem;
  letter-spacing:.04em;
}
.page-about .about-hero .crumb a{
  color:var(--gold-soft);
  text-decoration:none;
}
.page-about .about-hero .crumb a:hover{
  color:var(--gold);
}
.page-about .hero-engrave{
  margin:1.5rem 0 0;
  font-size:.75rem;
  letter-spacing:.24em;
  color:var(--gold);
  text-transform:uppercase;
}
.page-about .about-hero h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.85rem,5.4vw,3.6rem);
  line-height:1.22;
  letter-spacing:-.015em;
  margin:1rem 0 0;
  max-width:23ch;
  color:var(--moon);
}
.page-about .hero-lead{
  margin:1.5rem 0 0;
  max-width:44rem;
  font-size:clamp(1rem,1.5vw,1.125rem);
  line-height:1.85;
  color:var(--on-dark);
}
.page-about .hero-figures{
  list-style:none;
  margin:2.75rem 0 0;
  padding:1.75rem 0 0;
  border-top:1px solid var(--line-soft);
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
.page-about .hero-figures li{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.page-about .fig-num{
  font-size:clamp(1.65rem,3.4vw,2.3rem);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--gold);
  line-height:1.1;
}
.page-about .fig-label{
  font-size:.9375rem;
  color:var(--moon);
}
.page-about .fig-note{
  font-size:.8125rem;
  line-height:1.6;
  color:var(--on-dark-dim);
}

/* ── 通用章节 ───────────────────────────── */
.page-about .about-sec{
  padding:clamp(2.75rem,6vw,4.5rem) 0;
}
.page-about .about-sec--paper{
  background:var(--paper);
}
.page-about .about-sec--dark{
  background:var(--ink-2);
  color:var(--moon);
}
.page-about .sec-tag{
  display:inline-block;
  margin:0 0 .9rem;
  padding:.2rem .55rem;
  font-size:.6875rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);
  border:1px solid var(--line-cool);
}
.page-about .about-sec--dark .sec-tag{
  color:var(--gold);
  border-color:var(--line);
}
.page-about .sec-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.45rem,3.4vw,2.2rem);
  line-height:1.32;
  letter-spacing:-.01em;
  margin:0 0 1.25rem;
  max-width:26ch;
}
.page-about .sec-title::after{
  content:"";
  display:block;
  width:52px;
  height:3px;
  margin-top:.8rem;
  background:var(--gold);
}
.page-about .sec-intro{
  margin:0 0 2rem;
  max-width:48rem;
  font-size:1rem;
  line-height:1.85;
  color:var(--text);
}
.page-about .about-sec--dark .sec-intro{
  color:var(--on-dark);
}
.page-about .about-sec .prose p{
  margin:0 0 1.15rem;
}

/* ── 归集范围分类 ───────────────────────── */
.page-about .cat-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--ab-line-strong);
  border:1px solid var(--ab-line-strong);
}
.page-about .cat-list li{
  background:var(--moon);
  padding:1.4rem 1.35rem 1.6rem;
}
.page-about .about-sec--dark .cat-list{
  background:var(--line);
  border-color:var(--line);
}
.page-about .about-sec--dark .cat-list li{
  background:#102A44;
}
.page-about .cat-no{
  display:inline-block;
  margin-bottom:.85rem;
  padding:.15rem .5rem;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--gold);
  border:1px solid var(--line);
}
.page-about .cat-list h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.0625rem;
  margin:0 0 .5rem;
  color:var(--moon);
}
.page-about .cat-list p{
  margin:0;
  font-size:.9375rem;
  line-height:1.8;
  color:var(--on-dark);
}

/* ── 团队分工 ───────────────────────────── */
.page-about .team-list{
  list-style:none;
  margin:0;
  padding:0;
}
.page-about .team-list li{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "role num"
    "desc desc";
  align-items:baseline;
  gap:.35rem 1rem;
  padding:1.3rem 0;
  border-bottom:1px solid var(--ab-line);
}
.page-about .team-list li:first-child{
  border-top:1px solid var(--ab-line);
}
.page-about .team-role{
  grid-area:role;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.0625rem;
  letter-spacing:.01em;
}
.page-about .team-num{
  grid-area:num;
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--blue);
  line-height:1;
}
.page-about .team-desc{
  grid-area:desc;
  font-size:.9375rem;
  line-height:1.8;
  color:rgba(26,26,26,.72);
}
.page-about .team-media{
  margin:2.5rem 0 0;
  aspect-ratio:3 / 2;
}
.page-about .media-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ── 编校工序 ───────────────────────────── */
.page-about .steps-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:2.25rem;
}
.page-about .steps{
  list-style:none;
  counter-reset:st;
  margin:0;
  padding:0;
}
.page-about .steps li{
  counter-increment:st;
  position:relative;
  padding:0 0 1.9rem 3.6rem;
}
.page-about .steps li:last-child{
  padding-bottom:0;
}
.page-about .steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;
  left:0;
  top:-.1rem;
  width:2.35rem;
  height:2.35rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:.875rem;
  font-weight:700;
  color:var(--gold);
  border:1px solid var(--gold);
  background:var(--moon);
}
.page-about .steps li + li::after{
  content:"";
  position:absolute;
  left:1.17rem;
  top:-1rem;
  height:1rem;
  width:1px;
  background:var(--gold-soft);
}
.page-about .steps h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.125rem;
  margin:0 0 .45rem;
}
.page-about .steps p{
  margin:0;
  font-size:.9375rem;
  line-height:1.85;
  color:rgba(26,26,26,.76);
}
.page-about .steps-media{
  margin:0;
  aspect-ratio:14 / 9;
}

/* ── 时间线 ─────────────────────────────── */
.page-about .timeline-media{
  margin:0 0 2.5rem;
  aspect-ratio:3 / 2;
}
.page-about .timeline-list{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
}
.page-about .timeline-list::before{
  content:"";
  position:absolute;
  left:8px;
  top:10px;
  bottom:10px;
  width:2px;
  background:linear-gradient(180deg, var(--gold), var(--gold-soft));
}
.page-about .tl-item{
  position:relative;
  padding-left:2.5rem;
  transition:transform var(--dur) var(--ease);
}
.page-about .tl-item::before{
  content:"";
  position:absolute;
  left:0;
  top:.35rem;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--moon);
  border:2px solid var(--gold);
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.page-about .tl-item:hover::before,
.page-about .tl-item:focus-within::before{
  background:var(--gold);
  box-shadow:0 0 0 5px rgba(201,162,39,.16);
}
.page-about .tl-year{
  margin:0 0 .35rem;
  font-size:.75rem;
  letter-spacing:.16em;
  color:var(--blue);
  text-transform:uppercase;
}
.page-about .tl-item h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.0625rem;
  margin:0 0 .4rem;
}
.page-about .tl-item p{
  margin:0;
  font-size:.9375rem;
  line-height:1.8;
  color:rgba(26,26,26,.74);
}
.page-about .tl-foot{
  margin:2.5rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--ab-line);
  font-size:.9375rem;
  line-height:1.85;
  color:rgba(26,26,26,.66);
  max-width:52rem;
}

/* ── 长期价值 ───────────────────────────── */
.page-about .value-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
.page-about .value-item{
  background:var(--moon);
  border:1px solid var(--ab-line);
  border-top:3px solid var(--gold);
  padding:1.5rem 1.4rem 1.7rem;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.page-about .value-item:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(11,31,51,.1);
}
.page-about .value-no{
  display:block;
  margin-bottom:.7rem;
  font-size:.75rem;
  letter-spacing:.18em;
  color:var(--cinnabar);
}
.page-about .value-item h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.125rem;
  margin:0 0 .55rem;
}
.page-about .value-item p{
  margin:0;
  font-size:.9375rem;
  line-height:1.82;
  color:rgba(26,26,26,.76);
}

/* ── 收尾 ───────────────────────────────── */
.page-about .about-cta{
  background:var(--ink-2);
  color:var(--moon);
  padding:clamp(2.5rem,5.5vw,3.75rem) 0;
  border-top:1px solid var(--line-soft);
}
.page-about .about-cta h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.4rem,3.2vw,2rem);
  line-height:1.35;
  margin:0 0 .85rem;
  max-width:22ch;
}
.page-about .about-cta p{
  margin:0 0 1.75rem;
  max-width:44rem;
  font-size:1rem;
  line-height:1.85;
  color:var(--on-dark);
}
.page-about .cta-links{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

/* ── 断点 ───────────────────────────────── */
@media (min-width:600px){
  .page-about .cat-list{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (min-width:720px){
  .page-about .hero-figures{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:1rem 2.25rem;
  }
}

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

@media (min-width:900px){
  .page-about .timeline-list{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:1.75rem;
  }
  .page-about .timeline-list::before{
    left:9px;
    right:9px;
    top:8px;
    bottom:auto;
    width:auto;
    height:2px;
    background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  }
  .page-about .tl-item{
    padding-left:0;
    padding-top:2.35rem;
  }
  .page-about .tl-item::before{
    left:0;
    top:0;
  }
}

@media (min-width:960px){
  .page-about .steps-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    gap:3rem;
    align-items:start;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about .tl-item,
  .page-about .tl-item::before,
  .page-about .value-item{
    transition:none;
  }
  .page-about .value-item:hover{
    transform:none;
  }
}
</style>