.page-about{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
}

/* ---------- 首屏框景 ---------- */
.page-about .about-hero{
  padding:1.25rem 0 0;
}
.page-about .about-hero__frame{
  position:relative;
  border:1px solid var(--line-strong);
  background:
    linear-gradient(170deg, rgba(31,111,74,.10), rgba(244,241,234,0) 58%),
    var(--paper-warm);
  padding:2rem 1.35rem 2.25rem;
  box-shadow:0 26px 50px -42px rgba(11,15,14,.75);
}
.page-about .about-hero__frame::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:7px;
  background:repeating-linear-gradient(180deg, var(--silver) 0 1px, transparent 1px 13px);
  opacity:.55;
  pointer-events:none;
}
.page-about .about-hero__frame::after{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid var(--line);
  pointer-events:none;
}
.page-about .about-hero__note{
  display:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--silver);
  writing-mode:vertical-rl;
}
.page-about .about-hero__body{
  position:relative;
  z-index:1;
}
.page-about .about-hero__year{
  display:flex;
  align-items:flex-end;
  gap:.75rem;
  margin:.6rem 0 .4rem;
}
.page-about .about-hero__year-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(66px,17vw,164px);
  line-height:.82;
  letter-spacing:-.05em;
  color:var(--pitch-deep);
  font-variant-numeric:tabular-nums;
}
.page-about .about-hero__year-label{
  font-family:var(--font-mono);
  font-style:normal;
  font-size:11px;
  letter-spacing:.28em;
  color:var(--signal);
  padding-bottom:.55rem;
}
.page-about .about-hero__title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(26px,5vw,46px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 1rem;
  max-width:23ch;
}
.page-about .about-hero__lede{
  margin:0 0 1.6rem;
  font-size:var(--step0);
  line-height:1.8;
  max-width:38ch;
  color:rgba(11,15,14,.82);
}
.page-about .about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

/* ---------- 章节外壳 ---------- */
.page-about .section{
  padding:var(--pad-section) 0;
}
.page-about .section__head{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding-bottom:.85rem;
  margin-bottom:1.9rem;
  border-bottom:1px solid var(--line-strong);
}
.page-about .section__title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--step3);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0;
}
.page-about .section__note{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--silver);
}
.page-about .prose p{
  margin:0 0 1rem;
  font-size:var(--step0);
  line-height:1.8;
  max-width:38ch;
}
.page-about .prose p:last-child{
  margin-bottom:0;
}

/* ---------- 哨声由来 ---------- */
.page-about .about-origin__grid{
  display:grid;
  gap:1.75rem;
}
.page-about .about-origin__media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--slate);
}
.page-about .about-origin__media img{
  width:100%;
  max-width:100%;
  display:block;
  object-fit:cover;
}
.page-about .about-origin__marks{
  list-style:none;
  margin:1.4rem 0 0;
  padding:0;
  display:grid;
  gap:.55rem;
  font-size:14px;
  line-height:1.6;
  color:rgba(11,15,14,.78);
}
.page-about .about-origin__marks li{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  padding-top:.55rem;
  border-top:1px solid var(--line);
}

/* ---------- 版本年表 ---------- */
.page-about .about-history{
  background:linear-gradient(180deg, rgba(220,228,234,.5), rgba(244,241,234,0) 42%);
}
.page-about .about-timeline{
  display:grid;
  gap:2rem;
}
.page-about .about-index{
  display:none;
}
.page-about .about-index__title{
  margin:0 0 .7rem;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--silver);
}
.page-about .about-index__list{
  list-style:none;
  margin:0;
  padding:0;
}
.page-about .about-index__link{
  display:block;
  padding:.55rem 0 .55rem .9rem;
  border-left:2px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--archive);
  text-decoration:none;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible{
  border-left-color:var(--pitch);
  background:rgba(31,111,74,.06);
}
.page-about .about-index__link.is-current{
  border-left-color:var(--signal);
  color:var(--ink);
  font-weight:700;
}

.page-about .timeline{
  list-style:none;
  margin:0;
  padding:0 0 0 2.5rem;
  position:relative;
}
.page-about .timeline::before{
  content:"";
  position:absolute;
  left:.625rem;
  top:.7rem;
  bottom:.7rem;
  width:2px;
  background:linear-gradient(180deg, var(--wine), var(--signal) 52%, var(--pitch));
}
.page-about .timeline__item{
  position:relative;
  padding-bottom:2.6rem;
}
.page-about .timeline__item::before{
  content:"";
  position:absolute;
  left:-2.1875rem;
  top:.5rem;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 4px rgba(255,106,43,.14);
}
.page-about .timeline__item--old::before{
  border-radius:0;
  background:var(--wine);
  box-shadow:0 0 0 4px rgba(90,27,42,.13);
}
.page-about .timeline__item--now{
  padding-bottom:2rem;
}
.page-about .timeline__label{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 .55rem;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--archive);
}
.page-about .timeline__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--step2);
  line-height:1.15;
  margin:0 0 .6rem;
}
.page-about .timeline__text{
  margin:0;
  font-size:var(--step0);
  line-height:1.8;
  max-width:36ch;
  color:rgba(11,15,14,.8);
}
.page-about .timeline__item--now .timeline__text{
  padding:1.1rem 1.15rem;
  border:1px solid var(--line-strong);
  background:var(--paper-warm);
  box-shadow:5px 5px 0 -1px var(--paper), 5px 5px 0 0 var(--line-strong);
}
.page-about .timeline__link{
  margin:.9rem 0 0;
}
.page-about .timeline__figure{
  position:relative;
  padding-bottom:2.6rem;
}
.page-about .about-timeline__media{
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--pitch-deep);
}
.page-about .about-timeline__media img{
  width:100%;
  max-width:100%;
  display:block;
  object-fit:cover;
}

/* ---------- 团队 ---------- */
.page-about .about-team__grid{
  display:grid;
  gap:1.75rem;
}
.page-about .paper-plate{
  position:relative;
  background:var(--paper-warm);
  border:1px solid var(--line-strong);
  padding:1.4rem 1.25rem 1.5rem;
  box-shadow:7px 7px 0 -1px var(--paper), 7px 7px 0 0 var(--line-strong);
}
.page-about .paper-plate__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--step1);
  line-height:1.2;
  margin:0 0 .9rem;
  padding-left:.75rem;
  border-left:3px solid var(--signal);
}
.page-about .about-team__tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:1.3rem 0 0;
  padding:0;
}
.page-about .about-team__media{
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--archive);
}
.page-about .about-team__media img{
  width:100%;
  max-width:100%;
  display:block;
  object-fit:cover;
}

/* ---------- 数据来源（深色宽幅带） ---------- */
.page-about .about-data{
  background:var(--ink);
  color:var(--paper);
  border-top:3px solid var(--signal);
  border-bottom:1px solid rgba(244,241,234,.14);
}
.page-about .about-data .section__head{
  border-bottom-color:rgba(244,241,234,.24);
}
.page-about .about-data .section__title{
  color:var(--paper-warm);
}
.page-about .about-data .section__note{
  color:var(--turf);
}
.page-about .about-data__lede{
  margin:0 0 1.9rem;
  font-size:var(--step0);
  line-height:1.85;
  max-width:44ch;
  color:rgba(244,241,234,.84);
}
.page-about .about-data__figures{
  list-style:none;
  margin:0 0 1.9rem;
  padding:0;
  display:grid;
  gap:1.1rem;
}
.page-about .about-data__figure{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  padding:.95rem 0;
  border-top:1px solid rgba(244,241,234,.2);
}
.page-about .about-data__figure .figure__num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(34px,6vw,54px);
  line-height:.9;
  letter-spacing:-.03em;
  color:var(--turf);
  font-variant-numeric:tabular-nums;
}
.page-about .about-data__figure .figure__label{
  font-size:14px;
  line-height:1.6;
  color:rgba(244,241,234,.78);
}
.page-about .about-data__foot{
  margin:0;
  font-size:15px;
  line-height:1.85;
  max-width:44ch;
  color:rgba(244,241,234,.72);
}
.page-about .about-data__link{
  color:var(--signal);
  text-decoration:none;
  border-bottom:1px solid var(--signal);
}
.page-about .about-data__link:hover,
.page-about .about-data__link:focus-visible{
  color:var(--paper-warm);
  border-bottom-color:var(--paper-warm);
}

/* ---------- 做法 ---------- */
.page-about .principles{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1.4rem;
}
.page-about .principle{
  position:relative;
  padding:1.1rem 0 1.25rem;
  border-top:2px solid var(--pitch);
}
.page-about .principle__no{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--signal);
}
.page-about .principle__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--step1);
  line-height:1.25;
  margin:.35rem 0 .5rem;
}
.page-about .principle__text{
  margin:0;
  font-size:15px;
  line-height:1.8;
  max-width:34ch;
  color:rgba(11,15,14,.78);
}

/* ---------- 里程碑 ---------- */
.page-about .about-milestones{
  background:linear-gradient(180deg, rgba(220,228,234,.55), rgba(244,241,234,0) 60%);
}
.page-about .milestones{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.9rem;
}
.page-about .milestone{
  position:relative;
  padding:1.15rem 1.1rem 1.3rem;
  border:1px solid var(--line-strong);
  background:var(--paper-warm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.page-about .milestone:nth-child(even){
  background:var(--slate);
}
.page-about .milestone:hover,
.page-about .milestone:focus-within{
  transform:translateY(-4px);
  box-shadow:0 16px 30px -24px rgba(11,15,14,.8);
  border-color:var(--signal);
}
.page-about .milestone__year{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--silver);
  border:1px solid var(--line);
  padding:.12rem .45rem;
  margin-bottom:.6rem;
  transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.page-about .milestone:hover .milestone__year,
.page-about .milestone:focus-within .milestone__year{
  color:var(--ink);
  border-color:var(--signal);
  background:rgba(255,106,43,.14);
}
.page-about .milestone__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--step1);
  line-height:1.22;
  margin:0 0 .45rem;
}
.page-about .milestone__text{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:rgba(11,15,14,.76);
}
.page-about .milestone--lg .milestone__title{
  font-size:var(--step2);
}
.page-about .milestone--lg{
  background:var(--pitch-deep);
  border-color:var(--pitch-deep);
  color:var(--paper-warm);
}
.page-about .milestone--lg .milestone__title{
  color:var(--paper-warm);
}
.page-about .milestone--lg .milestone__text{
  color:rgba(244,241,234,.78);
}
.page-about .milestone--lg .milestone__year{
  color:var(--turf);
  border-color:rgba(244,241,234,.28);
}

/* ---------- 收束 ---------- */
.page-about .about-cta{
  padding:0 0 var(--pad-section);
}
.page-about .about-cta__inner{
  position:relative;
  border:1px solid var(--line-strong);
  border-top:3px solid var(--signal);
  background:var(--paper-warm);
  padding:1.9rem 1.25rem 2.1rem;
}
.page-about .about-cta__title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--step3);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:.5rem 0 .85rem;
  max-width:20ch;
}
.page-about .about-cta__text{
  margin:0 0 1.5rem;
  font-size:var(--step0);
  line-height:1.8;
  max-width:40ch;
  color:rgba(11,15,14,.8);
}
.page-about .about-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

/* ---------- 响应式 ---------- */
@media (min-width:720px){
  .page-about .about-hero__frame{
    padding:2.75rem 2.5rem 3rem;
  }
  .page-about .section__head{
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
  }
  .page-about .section__note{
    flex:none;
    text-align:right;
  }
  .page-about .about-origin__marks{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.9rem;
  }
  .page-about .about-origin__marks li{
    flex-direction:column;
    align-items:flex-start;
    gap:.4rem;
  }
  .page-about .about-data__figures{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.6rem;
  }
  .page-about .about-data__figure{
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
  }
  .page-about .principles{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.6rem 2rem;
  }
  .page-about .milestones{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:1rem;
  }
  .page-about .milestone--lg{ grid-column:span 4; }
  .page-about .milestone--md{ grid-column:span 2; }
  .page-about .milestone--sm{ grid-column:span 2; }
  .page-about .about-cta__inner{
    padding:2.5rem 2.5rem 2.7rem;
  }
}

@media (min-width:860px){
  .page-about .about-origin__grid{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:3rem;
    align-items:start;
  }
  .page-about .about-team__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:2.75rem;
    align-items:center;
  }
  .page-about .paper-plate{
    padding:2rem 1.9rem 2.1rem;
  }
}

@media (min-width:960px){
  .page-about .about-hero__note{
    display:block;
    position:absolute;
    top:3rem;
  }
  .page-about .about-hero__note--left{
    left:1.1rem;
  }
  .page-about .about-hero__note--right{
    right:1.1rem;
    bottom:3rem;
    top:auto;
  }
  .page-about .about-hero__body{
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
  .page-about .about-timeline{
    grid-template-columns:190px minmax(0,1fr);
    gap:3.5rem;
  }
  .page-about .about-index{
    display:block;
    align-self:start;
    position:sticky;
    top:7rem;
  }
  .page-about .timeline{
    padding-left:3rem;
  }
  .page-about .timeline::before{
    left:1.125rem;
  }
  .page-about .timeline__item::before{
    left:-1.9375rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about .milestone,
  .page-about .about-index__link{
    transition:none;
  }
  .page-about .milestone:hover,
  .page-about .milestone:focus-within{
    transform:none;
  }
}
<<<END>>>