.page-about{
  --about-rail-w:196px;
  --about-gap:clamp(1.5rem,4vw,3.25rem);
  --about-rule:rgba(46,91,76,.28);
  background:var(--c-ink);
  color:var(--c-paper);
  overflow-x:clip;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position:relative;
  padding:clamp(1rem,3vw,1.75rem) 0 clamp(2.5rem,6vw,4.5rem);
  background:
    radial-gradient(120% 85% at 88% -10%, rgba(107,255,196,.12), transparent 62%),
    linear-gradient(180deg, var(--c-ink-deep), var(--c-ink) 68%);
  border-bottom:1px solid var(--c-line);
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(107,255,196,.06) 0 1px, transparent 1px 88px);
  opacity:.55;
}
.page-about .about-hero > .shell{position:relative;z-index:1}

.page-about .breadcrumbs{margin-bottom:clamp(1.5rem,4vw,2.75rem)}

.page-about .about-hero__grid{
  display:grid;
  gap:clamp(1.75rem,4vw,3rem);
}
.page-about .about-hero__lead{max-width:44rem}
.page-about .about-hero h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.15rem,7.2vw,4.4rem);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:.5rem 0 1.1rem;
  color:var(--c-paper);
}
.page-about .about-hero .lede{
  max-width:38rem;
  color:var(--c-muted);
  font-size:clamp(.98rem,2.4vw,1.075rem);
  line-height:1.8;
}

.page-about .about-facts{
  list-style:none;
  margin:clamp(1.5rem,3.5vw,2.25rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--c-line-soft);
  border:1px solid var(--c-line-soft);
}
.page-about .about-fact{
  background:rgba(11,42,34,.86);
  padding:.85rem .95rem;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.page-about .about-fact__num{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.35rem,4vw,1.75rem);
  line-height:1.1;
  color:var(--c-mint);
  letter-spacing:.01em;
}
.page-about .about-fact__unit{
  font-size:.65em;
  margin-left:.15em;
  color:var(--c-mint-2);
}
.page-about .about-fact__label{
  font-size:.78rem;
  line-height:1.5;
  color:var(--c-muted);
}

.page-about .about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:clamp(1.5rem,3.5vw,2.25rem);
}

.page-about .about-hero__media{margin:0}
.page-about .about-hero__media .media-frame__label{
  display:block;
  margin-top:.7rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--c-muted);
}

/* ---------- 主体两栏 ---------- */
.page-about .about-body{
  display:block;
  padding-bottom:clamp(2rem,5vw,3.5rem);
}
.page-about .about-rail{display:none}
.page-about .about-flow{min-width:0}

/* ---------- 章节通用 ---------- */
.page-about .about-flow > .section{
  padding:clamp(2.25rem,6vw,4.5rem) 0;
  border-bottom:1px solid var(--c-line-faint);
}
.page-about .about-flow > .section:last-child{border-bottom:0}

.page-about .about-paper{
  background:var(--c-cream);
  color:var(--c-ink);
  position:relative;
}
.page-about .about-paper::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(46,91,76,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46,91,76,.13) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.6;
}
.page-about .about-paper__inner{position:relative;z-index:1}
.page-about .about-paper .eyebrow{color:#5A7A6C}
.page-about .about-paper .section__title{color:var(--c-ink)}
.page-about .about-paper .lede{color:#3B5A4E}

.page-about .about-dark{background:var(--c-ink-2)}
.page-about .about-deep{background:var(--c-ink)}
.page-about .about-archive{
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(107,255,196,.09), transparent 60%),
    var(--c-ink-deep);
}

.page-about .section__head{margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.page-about .section__title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.55rem,4.4vw,2.35rem);
  line-height:1.16;
  letter-spacing:-.01em;
  margin:.45rem 0 .8rem;
}
.page-about .about-dark .lede,
.page-about .about-deep .lede,
.page-about .about-archive .lede{
  max-width:40rem;
  color:var(--c-muted);
  line-height:1.8;
}

/* ---------- 01 起步 ---------- */
.page-about .about-copy p{
  margin:0 0 1.05rem;
  line-height:1.85;
  color:#26453A;
}
.page-about .about-copy p:last-child{margin-bottom:0}

.page-about .about-pullquote{
  margin:1.75rem 0 0;
  padding:1.15rem 1.25rem;
  border-left:3px solid var(--c-mint-2);
  background:var(--c-cream-2);
}
.page-about .about-pullquote__text{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--c-ink);
}
.page-about .about-pullquote__meta{
  margin:.75rem 0 0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  color:#4C6E60;
}

/* ---------- 02 时间轴 ---------- */
.page-about .about-milestone__media{margin:0 0 clamp(1.75rem,4vw,2.5rem)}
.page-about .about-milestone__media .media-frame__label{
  display:block;
  margin-top:.65rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--c-muted);
}

.page-about .timeline{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.page-about .timeline::before{
  content:"";
  position:absolute;
  left:6px;
  top:.5rem;
  bottom:1rem;
  width:1px;
  background:linear-gradient(180deg, var(--c-mint), rgba(107,255,196,.15));
}
.page-about .timeline__item{
  position:relative;
  padding-left:2.25rem;
  padding-bottom:clamp(1.65rem,4vw,2.4rem);
}
.page-about .timeline__item:last-child{padding-bottom:0}
.page-about .timeline__item::before{
  content:"";
  position:absolute;
  left:0;
  top:.45rem;
  width:13px;
  height:13px;
  background:var(--c-ink-2);
  border:1px solid var(--c-mint);
  transform:rotate(45deg);
}
.page-about .timeline__item:last-child::before{background:var(--c-mint)}

.page-about .timeline__year{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  margin-bottom:.4rem;
}
.page-about .about-year{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.1rem,3.2vw,1.35rem);
  letter-spacing:.04em;
  color:var(--c-mint);
}
.page-about .about-year__tag{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--c-orange);
  border:1px solid rgba(255,138,61,.5);
  padding:.12rem .4rem;
}
.page-about .timeline__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.02rem,2.6vw,1.2rem);
  line-height:1.5;
  margin:0 0 .5rem;
  color:var(--c-paper);
}
.page-about .timeline__body p{
  margin:0 0 .65rem;
  color:var(--c-muted);
  line-height:1.8;
  font-size:.95rem;
}
.page-about .timeline__points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.28rem;
}
.page-about .timeline__points li{
  position:relative;
  padding-left:1rem;
  font-size:.85rem;
  line-height:1.65;
  color:#8FB3A4;
}
.page-about .timeline__points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:5px;
  height:5px;
  background:var(--c-mint-2);
  transform:rotate(45deg);
}
.page-about .about-milestone__link{margin:clamp(1.5rem,4vw,2.25rem) 0 0}

/* ---------- 03 团队 ---------- */
.page-about .about-crew__layout{gap:clamp(1.5rem,4vw,2.5rem)}
.page-about .crew{
  display:grid;
  gap:1px;
  background:var(--c-line-soft);
  border:1px solid var(--c-line-soft);
  align-self:start;
}
.page-about .crew__item{background:var(--c-ink-2)}
.page-about .crew__summary{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.95rem 1rem;
  cursor:pointer;
  list-style:none;
  min-height:52px;
  transition:background var(--dur) var(--ease);
}
.page-about .crew__summary::-webkit-details-marker{display:none}
.page-about .crew__summary:hover{background:rgba(107,255,196,.06)}
.page-about .crew__summary:focus-visible{
  outline:2px solid var(--c-mint);
  outline-offset:-2px;
}
.page-about .crew__num{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.04em;
  color:var(--c-mint);
  min-width:2rem;
}
.page-about .crew__name{
  flex:1 1 auto;
  font-weight:700;
  font-size:1rem;
  color:var(--c-paper);
}
.page-about .crew__plus{
  position:relative;
  width:14px;
  height:14px;
  flex:0 0 auto;
}
.page-about .crew__plus::before,
.page-about .crew__plus::after{
  content:"";
  position:absolute;
  background:var(--c-mint-2);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.page-about .crew__plus::before{left:0;top:6px;width:14px;height:1.5px}
.page-about .crew__plus::after{left:6px;top:0;width:1.5px;height:14px}
.page-about .crew__item[open] .crew__plus::after{transform:scaleY(0);opacity:0}
.page-about .crew__body{
  padding:0 1rem 1.05rem;
  border-top:1px solid var(--c-line-faint);
  padding-top:.9rem;
}
.page-about .crew__body p{
  margin:0;
  font-size:.92rem;
  line-height:1.8;
  color:var(--c-muted);
}
.page-about .about-crew__media{margin:0}
.page-about .about-crew__media .media-frame__label{
  display:block;
  margin-top:.65rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--c-muted);
}

/* ---------- 04 流程 ---------- */
.page-about .flow{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.85rem;
  counter-reset:flow;
}
.page-about .flow__step{
  position:relative;
  padding:1.1rem 1.15rem 1.2rem;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(46,91,76,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.page-about .flow__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--c-ink);
  background:var(--c-mint);
  margin-bottom:.6rem;
}
.page-about .flow__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  margin:0 0 .4rem;
  color:var(--c-ink);
}
.page-about .flow__step p{
  margin:0;
  font-size:.9rem;
  line-height:1.75;
  color:#33544A;
}
.page-about .about-flow__note{
  margin-top:clamp(1.35rem,3.5vw,2rem);
  padding-top:clamp(1.1rem,3vw,1.5rem);
  border-top:1px solid rgba(46,91,76,.22);
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}
.page-about .about-flow__note p{
  margin:0;
  max-width:38rem;
  font-size:.94rem;
  line-height:1.8;
  color:#33544A;
}
.page-about .about-flow__note .btn--line{
  color:var(--c-ink);
  border-color:rgba(46,91,76,.45);
}

/* ---------- 05 场景切换 ---------- */
.page-about .scene-switch{position:relative}
.page-about .scene-switch__input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.page-about .scene-switch__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:clamp(1.1rem,3vw,1.6rem);
}
.page-about .scene-switch__tabs label{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.42rem .95rem;
  border:1px solid var(--c-line);
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--c-muted);
  background:rgba(7,28,23,.5);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-about .scene-switch__tabs label:hover{
  color:var(--c-mint);
  border-color:var(--c-mint-2);
}
.page-about #scene-before:checked ~ .scene-switch__tabs label[for="scene-before"],
.page-about #scene-live:checked ~ .scene-switch__tabs label[for="scene-live"],
.page-about #scene-after:checked ~ .scene-switch__tabs label[for="scene-after"],
.page-about #scene-back:checked ~ .scene-switch__tabs label[for="scene-back"]{
  color:var(--c-ink);
  background:var(--c-mint);
  border-color:var(--c-mint);
  font-weight:500;
}
.page-about #scene-before:focus-visible ~ .scene-switch__tabs label[for="scene-before"],
.page-about #scene-live:focus-visible ~ .scene-switch__tabs label[for="scene-live"],
.page-about #scene-after:focus-visible ~ .scene-switch__tabs label[for="scene-after"],
.page-about #scene-back:focus-visible ~ .scene-switch__tabs label[for="scene-back"]{
  outline:2px solid var(--c-orange);
  outline-offset:2px;
}

.page-about .scene-panel{display:none}
.page-about #scene-before:checked ~ .scene-switch__panels .scene-panel--1,
.page-about #scene-live:checked ~ .scene-switch__panels .scene-panel--2,
.page-about #scene-after:checked ~ .scene-switch__panels .scene-panel--3,
.page-about #scene-back:checked ~ .scene-switch__panels .scene-panel--4{
  display:block;
}
.page-about .scene-panel{
  border-left:2px solid var(--c-mint);
  padding:.2rem 0 .2rem clamp(1rem,3vw,1.5rem);
}
.page-about .scene-panel__kicker{
  margin:0 0 .4rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--c-orange);
}
.page-about .scene-panel__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.1rem,3vw,1.3rem);
  line-height:1.45;
  margin:0 0 .7rem;
  color:var(--c-paper);
}
.page-about .scene-panel p{
  margin:0 0 .7rem;
  max-width:38rem;
  font-size:.94rem;
  line-height:1.85;
  color:var(--c-muted);
}
.page-about .scene-panel .scene-panel__link{margin:0;font-size:.9rem}
.page-about .scene-panel a{color:var(--c-mint)}

/* ---------- 06 档案 ---------- */
.page-about .archive-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--c-line-soft);
  border:1px solid var(--c-line-soft);
  margin-bottom:clamp(1.5rem,4vw,2.5rem);
}
.page-about .archive-stat{
  background:rgba(11,42,34,.9);
  padding:1rem 1.05rem 1.15rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.page-about .archive-stat__num{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.6rem,5.4vw,2.35rem);
  line-height:1.05;
  letter-spacing:.01em;
  color:var(--c-mint);
}
.page-about .archive-stat__unit{font-size:.55em;color:var(--c-mint-2)}
.page-about .archive-stat__label{
  font-size:.8rem;
  line-height:1.6;
  color:var(--c-muted);
}

.page-about .about-archive__foot{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.page-about .about-archive__foot p{
  margin:0;
  max-width:42rem;
  font-size:.98rem;
  line-height:1.85;
  color:var(--c-paper);
}
.page-about .about-archive__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

/* ---------- 响应式 ---------- */
@media (min-width:560px){
  .page-about .about-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-about .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-about .about-flow__note{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

@media (min-width:760px){
  .page-about .about-hero__grid{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    align-items:end;
  }
  .page-about .about-hero__media{margin-top:.5rem}
  .page-about .crew{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-about .archive-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:960px){
  .page-about .about-body{
    display:grid;
    grid-template-columns:var(--about-rail-w) minmax(0,1fr);
    gap:var(--about-gap);
    align-items:start;
  }
  .page-about .about-rail{
    display:block;
    position:sticky;
    top:calc(var(--header-h) + 1.75rem);
    padding-top:clamp(2.25rem,6vw,4.5rem);
  }
  .page-about .about-rail__list{
    display:flex;
    flex-direction:column;
    gap:.15rem;
  }
  .page-about .about-rail .anchor-link{
    display:flex;
    align-items:center;
    gap:.55rem;
    padding:.45rem .6rem;
    border-left:2px solid transparent;
    font-size:.85rem;
    color:var(--c-muted);
    transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .page-about .about-rail .anchor-link:hover{
    color:var(--c-mint);
    background:rgba(107,255,196,.06);
  }
  .page-about .about-rail .anchor-link[aria-current="true"]{
    color:var(--c-mint);
    border-left-color:var(--c-mint);
    background:rgba(107,255,196,.08);
  }
  .page-about .about-rail__num{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.04em;
    color:var(--c-line);
  }
  .page-about .about-rail .anchor-link[aria-current="true"] .about-rail__num{color:var(--c-mint-2)}
  .page-about .about-rail__scale{
    margin-top:1.5rem;
    padding-top:.9rem;
    border-top:1px solid var(--c-line-faint);
    display:flex;
    flex-direction:column;
    gap:.55rem;
    font-family:var(--font-mono);
    font-size:.68rem;
    letter-spacing:.08em;
    color:rgba(157,184,172,.5);
  }
  .page-about .about-rail__scale span{
    position:relative;
    padding-left:1.1rem;
  }
  .page-about .about-rail__scale span::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:.65rem;
    height:1px;
    background:rgba(157,184,172,.45);
  }
  .page-about .flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-about .about-archive__foot{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
  }
}

@media (min-width:1100px){
  .page-about .about-crew__layout{align-items:start}
  .page-about .crew{grid-template-columns:1fr}
  .page-about .about-hero h1{max-width:22ch}
}

@media (prefers-reduced-motion:reduce){
  .page-about *{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}
<<<END>>>