/* ===== 关于本站 / page-about ===== */

.page-about{
  --ab-rail: clamp(56px, 9vw, 156px);
  --ab-hair: 1px solid var(--grid);
}

/* --- 面包屑 --- */
.page-about .crumbs{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top: clamp(18px, 3vw, 34px);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
}
.page-about .crumbs a{
  color:var(--muted);
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible{
  color:var(--cyan);
}
.page-about .crumbs [aria-current="page"]{
  color:var(--text);
}

/* --- 页首 --- */
.page-about .ab-head{
  padding: clamp(34px, 5.5vw, 76px) 0 clamp(30px, 4.5vw, 60px);
}
.page-about .ab-head__kicker{
  margin:0 0 clamp(16px, 2.4vw, 28px);
  color:var(--cyan);
}
.page-about .ab-head__title{
  margin:0;
  max-width:12ch;
  overflow-wrap:anywhere;
}
.page-about .ab-head__grid{
  display:grid;
  grid-template-columns:1fr;
  gap: clamp(26px, 4vw, 46px);
  margin-top: clamp(22px, 3.6vw, 44px);
}
.page-about .ab-head__lede{
  margin:0;
  max-width:56ch;
  color:var(--text-64);
}

.page-about .ab-head__spec{
  margin:0;
  border-top:var(--ab-hair);
}
.page-about .ab-head__spec > div{
  display:grid;
  grid-template-columns: minmax(80px, auto) minmax(0, 1fr);
  gap:14px;
  padding:11px 0;
  border-bottom:var(--ab-hair);
}
.page-about .ab-head__spec dt{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--muted);
  padding-top:3px;
}
.page-about .ab-head__spec dd{
  margin:0;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text);
  overflow-wrap:anywhere;
}

/* --- 目录 --- */
.page-about .ab-toc{
  margin-bottom: clamp(36px, 5.5vw, 84px);
}
.page-about .ab-toc__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  border-top:var(--ab-hair);
}
.page-about .ab-toc__list li{
  margin:0;
}
.page-about .ab-toc__list a{
  display:flex;
  align-items:baseline;
  gap: clamp(14px, 2.2vw, 28px);
  padding:15px 2px;
  border-bottom:var(--ab-hair);
  color:var(--text-64);
  font-size:15px;
  font-weight:300;
  text-decoration:none;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-about .ab-toc__list a .mono{
  font-size:12px;
  letter-spacing:.08em;
  color:var(--cyan-deep);
  transition:color var(--dur) var(--ease);
}
.page-about .ab-toc__list a:hover,
.page-about .ab-toc__list a:focus-visible{
  color:var(--text);
  border-bottom-color:var(--cyan);
}
.page-about .ab-toc__list a:hover .mono,
.page-about .ab-toc__list a:focus-visible .mono{
  color:var(--cyan);
}

/* --- 章节骨架 --- */
.page-about .ab-sec{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap: clamp(16px, 2.6vw, 26px);
  padding: clamp(46px, 7vw, 104px) 0;
  border-top:var(--ab-hair);
}
.page-about .ab-sec:last-of-type{
  border-bottom:var(--ab-hair);
}

.page-about .ab-sec__no{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size: clamp(42px, 7vw, 84px);
  font-weight:200;
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--text-16);
  transition:color 320ms var(--ease);
}
.page-about .ab-sec.is-active .ab-sec__no,
.page-about .ab-sec:hover .ab-sec__no{
  color:var(--cyan);
}

.page-about .ab-sec__body{
  display:flow-root;
  min-width:0;
}
.page-about .ab-sec__title{
  margin:0 0 clamp(16px, 2.4vw, 26px);
  max-width:24ch;
}

.page-about .ab-prose{
  max-width:64ch;
}
.page-about .ab-prose--after{
  margin-top: clamp(20px, 3vw, 30px);
}
.page-about .ab-prose p{
  margin:0 0 1.05em;
  font-size:15.5px;
  line-height:1.75;
  font-weight:300;
  color:var(--text-64);
}
.page-about .ab-prose p:last-child{
  margin-bottom:0;
}
.page-about .ab-prose a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid var(--cyan-32);
  transition:border-color var(--dur) var(--ease);
}
.page-about .ab-prose a:hover,
.page-about .ab-prose a:focus-visible{
  border-bottom-color:var(--cyan);
}

/* --- 媒体板 --- */
.page-about .media-frame{
  margin:0;
  border:var(--ab-hair);
  background:var(--panel);
  overflow:hidden;
}
.page-about .media-frame img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}
.page-about .media-frame__note{
  display:block;
  padding:10px 12px;
  border-top:var(--ab-hair);
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--muted);
}
.page-about .ab-plate{
  margin:0 0 clamp(22px, 3vw, 34px);
}

/* --- 档位色块 --- */
.page-about .ab-levels{
  list-style:none;
  margin: clamp(22px, 3vw, 36px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.page-about .ab-levels .level{
  display:grid;
  grid-template-columns: 46px minmax(0, 1fr);
  row-gap:6px;
  column-gap:14px;
  align-items:center;
  padding:11px 14px;
  border:var(--ab-hair);
  border-left:2px solid var(--scale);
  background:var(--panel);
  cursor:default;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.page-about .ab-levels .level:hover{
  background:var(--zone);
}
.page-about .ab-levels .level[data-level="1"]{ border-left-color:var(--cyan); }
.page-about .ab-levels .level[data-level="2"]{ border-left-color:var(--cyan-64); }
.page-about .ab-levels .level[data-level="3"]{ border-left-color:var(--cyan-deep); }
.page-about .ab-levels .level[data-level="4"]{ border-left-color:var(--amber); }
.page-about .ab-levels .level[data-level="5"]{ border-left-color:var(--magenta); }

.page-about .ab-levels .level__code{
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--text);
}
.page-about .ab-levels .level__range{
  font-size:12.5px;
  color:var(--cyan);
}
.page-about .ab-levels .level__note{
  grid-column:1 / -1;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}

/* --- 团队分工 --- */
.page-about .ab-team{
  list-style:none;
  margin: clamp(22px, 3vw, 36px) 0 0;
  padding:0;
  border-top:var(--ab-hair);
  max-width:64ch;
}
.page-about .ab-team li{
  display:grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap:14px;
  row-gap:4px;
  padding:13px 0;
  border-bottom:var(--ab-hair);
}
.page-about .ab-team__num{
  font-size:22px;
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--cyan);
}
.page-about .ab-team__name{
  font-size:14px;
  font-weight:500;
  color:var(--text);
  align-self:center;
}
.page-about .ab-team__desc{
  grid-column:2;
  font-size:12.5px;
  line-height:1.65;
  color:var(--muted);
}

/* --- 版本背景图 --- */
.page-about .ab-sec--ghost{
  overflow:clip;
  isolation:isolate;
}
.page-about .ab-ghost{
  position:absolute;
  right:-5%;
  bottom:0;
  z-index:-1;
  width:min(58%, 620px);
  height:auto;
  max-width:100%;
  opacity:.12;
  object-fit:cover;
  pointer-events:none;
}

/* --- 版本阶梯 --- */
.page-about .ab-ladder{
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: clamp(14px, 2vw, 24px);
  border:var(--ab-hair);
  background:var(--panel);
}
.page-about .ab-ladder__svg{
  display:block;
  width:100%;
  height:auto;
}
.page-about .ab-ladder__base{
  stroke:var(--grid);
  stroke-width:1;
}
.page-about .ab-ladder__bar{
  fill:var(--cyan-08);
  stroke:var(--cyan-32);
  stroke-width:1;
  transition:fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
}
.page-about .ab-ladder__bar:hover{
  fill:var(--cyan-16);
  stroke:var(--cyan);
}
.page-about .ab-ladder__dot{
  fill:var(--cyan);
}
.page-about .ab-ladder__labels text{
  fill:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
}
.page-about .ab-ladder figcaption{
  margin-top:12px;
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--muted);
}

/* --- 周刻度带 --- */
.page-about .ab-ruler{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  height:52px;
  margin: clamp(22px, 3vw, 36px) 0 0;
  border-bottom:var(--ab-hair);
}
.page-about .ab-ruler span{
  display:block;
  width:1px;
  height:10px;
  background:var(--grid);
}
.page-about .ab-ruler span:nth-child(4n+1){
  height:24px;
  background:var(--cyan-32);
}
.page-about .ab-ruler__cap{
  margin:9px 0 0;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--muted);
}

/* --- 站点信息表 --- */
.page-about .ab-facts{
  margin: clamp(22px, 3vw, 34px) 0 0;
  display:grid;
  grid-template-columns:1fr;
  border-top:var(--ab-hair);
}
.page-about .ab-facts > div{
  display:grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap:14px;
  padding:11px 0;
  border-bottom:var(--ab-hair);
}
.page-about .ab-facts dt{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--muted);
  padding-top:3px;
}
.page-about .ab-facts dd{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text);
  overflow-wrap:anywhere;
}

.page-about .ab-copy{
  margin: clamp(18px, 2.4vw, 26px) 0 0;
}

/* --- 页尾收束 --- */
.page-about .ab-coda{
  padding: clamp(52px, 7.5vw, 116px) 0 clamp(40px, 6vw, 84px);
  border-top:var(--ab-hair);
}
.page-about .ab-coda__grid{
  display:grid;
  grid-template-columns:1fr;
  gap: clamp(28px, 4vw, 52px);
}
.page-about .ab-coda__text > .label{
  color:var(--cyan);
}
.page-about .ab-coda__text .section-title{
  margin: clamp(14px, 2vw, 22px) 0 0;
}
.page-about .ab-coda__text p{
  margin: clamp(14px, 2vw, 20px) 0 0;
  max-width:56ch;
  font-size:15px;
  line-height:1.75;
  font-weight:300;
  color:var(--text-64);
}
.page-about .ab-coda__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: clamp(20px, 3vw, 30px);
}
.page-about .ab-coda__figure{
  align-self:start;
}

/* --- 焦点可见性 --- */
.page-about a:focus-visible,
.page-about button:focus-visible,
.page-about [tabindex]:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

/* --- 平板及以上 --- */
@media (min-width:700px){
  .page-about .ab-toc__list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 4.5vw, 88px);
  }
  .page-about .ab-facts{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3.5vw, 64px);
  }
  .page-about .ab-team li{
    grid-template-columns: 3.4rem 9rem minmax(0, 1fr);
    align-items:baseline;
  }
  .page-about .ab-team__desc{
    grid-column:auto;
  }
  .page-about .ab-levels .level{
    grid-template-columns: 46px 104px minmax(0, 1fr);
    align-items:center;
  }
  .page-about .ab-levels .level__note{
    grid-column:auto;
  }
}

/* --- 桌面及以上 --- */
@media (min-width:960px){
  .page-about .ab-head__grid{
    grid-template-columns: 7fr 5fr;
    column-gap: clamp(32px, 5vw, 88px);
    align-items:start;
  }
  .page-about .ab-head__spec{
    border-top:none;
  }
  .page-about .ab-head__spec > div:first-child{
    border-top:var(--ab-hair);
  }

  .page-about .ab-sec{
    grid-template-columns: var(--ab-rail) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 92px);
  }
  .page-about .ab-sec__no{
    position:sticky;
    top: calc(var(--top-h) + 28px);
    align-self:start;
  }

  .page-about .ab-coda__grid{
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: clamp(40px, 6vw, 92px);
    align-items:start;
  }
}

@media (min-width:1040px){
  .page-about .ab-sec--media .ab-sec__body{
    max-width:none;
  }
  .page-about .ab-sec--media .ab-plate{
    float:right;
    width:min(40%, 396px);
    margin: 6px 0 18px clamp(24px, 3vw, 46px);
  }
  .page-about .ab-sec--media .ab-prose{
    max-width:62ch;
  }
}

/* --- 动效降级 --- */
@media (prefers-reduced-motion: reduce){
  .page-about .ab-sec__no,
  .page-about .ab-toc__list a,
  .page-about .ab-toc__list a .mono,
  .page-about .ab-ladder__bar,
  .page-about .ab-levels .level{
    transition:none;
  }
}
</main>