.page-about{
  --about-measure:60ch;
  --about-rail:36px;
  display:block;
  overflow-x:hidden;
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0;
  padding-top:clamp(20px,3vw,34px);
  list-style:none;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.page-about .crumbs__item a{
  color:var(--ink-mute);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.page-about .crumbs__item a:hover,
.page-about .crumbs__item a:focus-visible{
  color:var(--gold);
  border-bottom-color:var(--gold);
}
.page-about .crumbs__item [aria-current="page"]{
  color:var(--ink-soft);
}
.page-about .crumbs__sep{
  color:var(--line-2);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  padding-top:clamp(36px,5.5vw,68px);
  padding-bottom:clamp(44px,6.5vw,84px);
}
.page-about .about-hero__title{
  margin:20px 0 0;
  max-width:22ch;
  font-size:clamp(2.1rem,7vw,5.4rem);
  font-weight:200;
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--ink);
}
.page-about .about-hero__lede{
  margin:clamp(24px,3.5vw,40px) 0 0;
  max-width:var(--about-measure);
  font-size:clamp(1rem,1.5vw,1.125rem);
  line-height:1.78;
  color:var(--ink-soft);
}

/* ---------- 使命声明（纸白反色） ---------- */
.page-about .about-mission{
  background:var(--paper);
  color:var(--deep-sea);
}
.page-about .about-mission__inner{
  padding-top:clamp(48px,7vw,92px);
  padding-bottom:clamp(48px,7vw,92px);
}
.page-about .about-mission .index-label{
  color:rgba(10,27,51,.55);
}
.page-about .about-mission__title{
  margin:14px 0 0;
  font-size:clamp(1.4rem,3vw,2.2rem);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--deep-sea);
}
.page-about .about-mission__text{
  margin:clamp(18px,2.8vw,30px) 0 0;
  max-width:var(--about-measure);
  font-size:clamp(1.1rem,2.3vw,1.7rem);
  font-weight:300;
  line-height:1.62;
  letter-spacing:-.01em;
}
.page-about .about-mission__note{
  margin:clamp(22px,3vw,32px) 0 0;
  max-width:var(--about-measure);
  padding-top:20px;
  border-top:1px solid rgba(10,27,51,.16);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.05em;
  line-height:1.95;
  color:rgba(10,27,51,.66);
}

/* ---------- 图像底座 ---------- */
.page-about .about-plate{
  margin:clamp(34px,5vw,60px) 0 0;
}
.page-about .about-plate--wide{
  margin-top:0;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  box-sizing:border-box;
}
.page-about .about-plate__frame{
  position:relative;
  overflow:hidden;
  background:var(--night-black);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.page-about .about-plate__frame img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}
.page-about .about-plate__frame--16x9{ aspect-ratio:16/9; max-height:58vh; }
.page-about .about-plate__frame--2x1{ aspect-ratio:2/1; }
.page-about .about-plate__frame--3x2{ aspect-ratio:3/2; }
.page-about .about-plate__caption{
  margin-top:12px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------- 区块标题 ---------- */
.page-about .rule{
  margin:clamp(44px,6.5vw,80px) 0 0;
}
.page-about .section-head{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:clamp(20px,3vw,32px);
}
.page-about .section-title{
  margin:0;
  font-size:clamp(1.55rem,3.3vw,2.7rem);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
}
.page-about .section-lede{
  margin:0;
  max-width:var(--about-measure);
  font-size:1rem;
  line-height:1.78;
  color:var(--ink-soft);
}

/* ---------- 档案编年 ---------- */
.page-about .chronicle{
  position:relative;
  margin-top:clamp(34px,5vw,58px);
}
.page-about .chronicle__rail{
  position:absolute;
  left:12px;
  top:8px;
  bottom:14px;
  width:1px;
  overflow:visible;
}
.page-about .chronicle__rail rect{
  fill:var(--line-2);
}
.page-about .chronicle__list{
  margin:0;
  padding:0;
  list-style:none;
}
.page-about .chronicle__item{
  border-bottom:1px solid var(--line);
}
.page-about .chronicle__item:first-child{
  border-top:1px solid var(--line);
}
.page-about .chronicle__summary{
  display:grid;
  grid-template-columns:var(--about-rail) 1fr auto;
  align-items:start;
  gap:0 16px;
  padding:clamp(18px,2.4vw,26px) 0;
  cursor:pointer;
  list-style:none;
  outline:none;
}
.page-about .chronicle__summary::-webkit-details-marker{ display:none; }
.page-about .chronicle__summary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.page-about .chronicle__dot{
  width:9px;
  height:9px;
  margin:9px 0 0 8px;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:transparent;
  box-sizing:border-box;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.page-about .chronicle__item--current .chronicle__dot{
  border-color:var(--turf);
  background:var(--turf);
  box-shadow:0 0 0 4px rgba(53,192,122,.14);
}
.page-about .chronicle__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 16px;
}
.page-about .chronicle__year{
  font-size:clamp(1.3rem,3vw,1.95rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--ink);
}
.page-about .chronicle__item--current .chronicle__year{
  color:var(--turf);
}
.page-about .chronicle__label{
  font-size:clamp(.94rem,1.4vw,1.05rem);
  line-height:1.6;
  color:var(--ink-soft);
}
.page-about .chronicle__mark,
.page-about .principles__mark{
  position:relative;
  flex:0 0 auto;
  width:14px;
  height:14px;
  margin-top:10px;
}
.page-about .chronicle__mark::before,
.page-about .principles__mark::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:var(--silver);
  transform:translateY(-50%);
  transition:background-color .18s var(--ease);
}
.page-about .chronicle__mark::after,
.page-about .principles__mark::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:var(--silver);
  transform:translateX(-50%);
  transition:opacity .18s var(--ease);
}
.page-about .chronicle__entry[open] .chronicle__mark::after,
.page-about .principles__item[open] .principles__mark::after{
  opacity:0;
}
.page-about .chronicle__entry[open] .chronicle__mark::before,
.page-about .principles__item[open] .principles__mark::before{
  background:var(--gold);
}
.page-about .chronicle__body{
  padding:0 0 clamp(20px,3vw,28px) calc(var(--about-rail) + 16px);
}
.page-about .chronicle__body p{
  margin:0;
  max-width:var(--about-measure);
  font-size:.95rem;
  line-height:1.85;
  color:var(--ink-mute);
}

/* ---------- 数据流程 ---------- */
.page-about .pipeline{
  margin:clamp(32px,5vw,46px) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.page-about .pipeline__step{
  padding:clamp(20px,2.6vw,28px) 0;
  border-bottom:1px solid var(--line);
  outline:none;
}
.page-about .pipeline__step:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:-2px;
}
.page-about .pipeline__num{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--gold);
}
.page-about .pipeline__title{
  margin:8px 0 0;
  font-size:clamp(1.05rem,1.9vw,1.35rem);
  font-weight:500;
  letter-spacing:.01em;
  color:var(--ink);
}
.page-about .pipeline__text{
  margin:10px 0 0;
  max-width:var(--about-measure);
  font-size:.95rem;
  line-height:1.85;
  color:var(--ink-mute);
}
.page-about .pipeline-aside{
  margin-top:clamp(32px,5vw,46px);
}
.page-about .pipeline-aside .about-plate{
  margin-top:0;
}

/* ---------- 团队分工 ---------- */
.page-about .team{
  margin:clamp(32px,5vw,52px) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.page-about .team__row{
  display:grid;
  grid-template-columns:64px 1fr;
  align-items:start;
  gap:6px 24px;
  padding:clamp(20px,2.8vw,30px) 0;
  border-bottom:1px solid var(--line);
}
.page-about .team__num{
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--gold);
}
.page-about .team__role{
  align-self:center;
  font-size:clamp(1rem,1.6vw,1.15rem);
  font-weight:500;
  color:var(--ink);
}
.page-about .team__desc{
  grid-column:2;
  margin:0;
  max-width:var(--about-measure);
  font-size:.95rem;
  line-height:1.85;
  color:var(--ink-mute);
}

/* ---------- 内容准则 ---------- */
.page-about .principles{
  max-width:880px;
  margin:clamp(32px,5vw,52px) 0 0;
  border-top:1px solid var(--line);
}
.page-about .principles__item{
  border-bottom:1px solid var(--line);
}
.page-about .principles__summary{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:0 20px;
  padding:clamp(18px,2.4vw,26px) 0;
  cursor:pointer;
  list-style:none;
  outline:none;
}
.page-about .principles__summary::-webkit-details-marker{ display:none; }
.page-about .principles__summary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.page-about .principles__tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink-mute);
}
.page-about .principles__name{
  font-size:clamp(1.15rem,2.2vw,1.6rem);
  font-weight:300;
  letter-spacing:-.01em;
  color:var(--ink);
}
.page-about .principles__body{
  padding:0 0 clamp(20px,3vw,28px);
}
.page-about .principles__body p{
  margin:0;
  max-width:var(--about-measure);
  font-size:.95rem;
  line-height:1.85;
  color:var(--ink-soft);
}

/* ---------- 长期承诺 ---------- */
.page-about .commitment{
  margin-top:clamp(32px,5vw,52px);
}
.page-about .commitment__lead{
  margin:0;
  max-width:var(--about-measure);
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  font-weight:300;
  line-height:1.68;
  color:var(--ink-soft);
}
.page-about .commitment__list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.page-about .commitment__list li{
  position:relative;
  padding:16px 0 16px 22px;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
  line-height:1.8;
  color:var(--ink-soft);
}
.page-about .commitment__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:25px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--turf);
}

/* ---------- 页尾入口 ---------- */
.page-about .about-next{
  padding-bottom:clamp(56px,8vw,104px);
}
.page-about .about-next .rule{
  margin-top:clamp(44px,6.5vw,80px);
}
.page-about .about-next .index-label{
  display:block;
  margin-top:clamp(20px,3vw,32px);
}
.page-about .about-next__links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .page-about .about-plate__frame--16x9{ max-height:42vh; }
  .page-about .about-plate--wide{ padding-left:0; padding-right:0; }
  .page-about .about-plate--wide .about-plate__caption{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .page-about .pipeline-aside{ margin-top:clamp(24px,4vw,36px); }
}

@media (max-width:640px){
  .page-about{
    --about-rail:24px;
  }
  .page-about .about-hero__title{
    max-width:100%;
    font-size:clamp(1.9rem,9.5vw,2.8rem);
  }
  .page-about .chronicle__rail{ left:8px; }
  .page-about .chronicle__dot{ margin-left:4px; margin-top:7px; }
  .page-about .chronicle__summary{ gap:0 12px; }
  .page-about .chronicle__body{ padding-left:calc(var(--about-rail) + 12px); }
  .page-about .chronicle__mark{ margin-top:8px; }
  .page-about .team__row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .page-about .team__desc{ grid-column:1; }
  .page-about .team__role{ align-self:start; }
  .page-about .principles__summary{
    grid-template-columns:1fr auto;
    gap:6px 14px;
  }
  .page-about .principles__tag{ grid-column:1 / -1; }
  .page-about .about-next__links .btn{ flex:1 1 100%; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  .page-about .crumbs__item a,
  .page-about .chronicle__dot,
  .page-about .chronicle__mark::before,
  .page-about .chronicle__mark::after,
  .page-about .principles__mark::before,
  .page-about .principles__mark::after{
    transition:none;
  }
}