.page-about{
  --about-panel:rgba(23,38,60,0.86);
  --about-border:2px solid var(--grid-line);
  --about-radius:0;
  --about-gap:1.25rem;
}

/* ========== Hero ========== */
.page-about .about-hero{
  position:relative;
  border-top:2px solid var(--grid-line);
  border-bottom:2px solid var(--grid-line);
  background:
    radial-gradient(ellipse at 78% 30%, rgba(0,180,216,0.10) 0%, transparent 58%),
    linear-gradient(rgba(42,61,92,0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,61,92,0.28) 1px, transparent 1px),
    var(--deep-space);
  background-size:auto, 28px 28px, 28px 28px, auto;
  margin-bottom:2rem;
}
.page-about .about-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  padding:2.5rem 1rem 2.75rem;
}
.page-about .about-hero-main{
  position:relative;
}
.page-about .about-hero-deco{
  display:block;
  width:100%;
  max-width:340px;
  height:auto;
  margin-top:1.75rem;
}
.page-about .about-hero-main .tag{
  margin-bottom:1rem;
}
.page-about .page-title{
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 1rem;
  max-width:18em;
}
.page-about .page-lead{
  font-size:0.9375rem;
  line-height:1.8;
  color:var(--steel-blue);
  max-width:42em;
  margin:0;
}
.page-about .about-hero-aside{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  padding:1.25rem;
  background:var(--about-panel);
  border:var(--about-border);
  box-shadow:8px 8px 0 var(--ink-void);
  align-self:stretch;
  justify-content:center;
}
.page-about .about-hero-badge{
  display:flex;
  align-items:baseline;
  gap:0.75rem;
  flex-wrap:wrap;
}
.page-about .about-hero-vers{
  font-family:var(--font-headline);
  font-size:3.75rem;
  line-height:0.8;
  color:var(--neon-signal);
  letter-spacing:-0.03em;
}
.page-about .about-hero-since{
  font-size:0.8125rem;
  color:var(--bone-white);
  border-left:3px solid var(--thermal-orange);
  padding-left:0.625rem;
  line-height:1.4;
}
.page-about .about-hero-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.75rem;
}
.page-about .about-hero-meta-item{
  border-left:3px solid var(--grid-line);
  padding-left:0.75rem;
}
.page-about .about-hero-meta-item strong{
  display:block;
  font-family:var(--font-headline);
  font-size:1.5rem;
  color:var(--bone-white);
}
.page-about .about-hero-meta-item span{
  font-size:0.75rem;
  color:var(--steel-blue);
  letter-spacing:0.08em;
}

/* ========== 主布局 ========== */
.page-about .about-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  padding-bottom:4rem;
  align-items:start;
}
.page-about .about-directory{
  position:relative;
  background:var(--about-panel);
  border:var(--about-border);
  padding:1.25rem;
  min-width:0;
}
.page-about .about-directory-inner{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.page-about .about-directory-note{
  font-size:0.75rem;
  letter-spacing:0.18em;
  color:var(--thermal-orange);
  font-family:var(--font-body);
}
.page-about .about-directory-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.375rem;
}
.page-about .about-directory-list a{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.625rem 0.5rem;
  color:var(--steel-blue);
  text-decoration:none;
  font-size:0.875rem;
  border-left:3px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.page-about .about-directory-list a:hover{
  color:var(--bone-white);
  border-left-color:var(--neon-signal);
  background:rgba(42,61,92,0.35);
}
.page-about .about-directory-list a:focus-visible{
  outline:2px solid var(--neon-signal);
  outline-offset:2px;
}
.page-about .about-dir-num{
  font-family:var(--font-headline);
  color:var(--thermal-orange);
  font-size:0.75rem;
}
.page-about .about-directory-list a:hover .about-dir-num{
  color:var(--neon-signal);
}
.page-about .about-directory-meta{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  padding-top:1rem;
  border-top:2px solid var(--grid-line);
  font-size:0.8125rem;
  color:var(--steel-blue);
}
.page-about .about-story{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2.25rem;
}

/* ========== 章节通用 ========== */
.page-about .about-chapter{
  border-top:2px solid var(--grid-line);
  padding-top:1.5rem;
  transition:border-color 0.25s ease;
}
.page-about .about-chapter:target{
  border-top-color:var(--neon-signal);
}
.page-about .about-chapter-head{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  margin-bottom:1rem;
}
.page-about .about-chapter-head .chapter-label{
  font-size:0.75rem;
  letter-spacing:0.16em;
  color:var(--steel-blue);
}
.page-about .about-chapter-head h2{
  font-size:1.75rem;
  line-height:1.2;
  margin:0;
  color:var(--bone-white);
}
.page-about .about-chapter-body p{
  font-size:0.9375rem;
  line-height:1.85;
  color:var(--steel-blue);
  margin:0 0 1rem;
}
.page-about .about-chapter-body p:last-child{
  margin-bottom:0;
}

/* ========== 数据条 ========== */
.page-about .about-data-ribbon{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.75rem;
  margin-top:1.5rem;
  background:var(--ink-void);
  border:var(--about-border);
  padding:1rem;
}
.page-about .about-data-item{
  padding:0.75rem;
  border-left:3px solid var(--thermal-orange);
  background:var(--abyss-panel);
}
.page-about .about-data-item:nth-child(4n+2){
  border-left-color:var(--neon-signal);
}
.page-about .about-data-item:nth-child(4n+3){
  border-left-color:var(--archive-amber);
}
.page-about .about-data-num{
  display:block;
  font-family:var(--font-headline);
  font-size:1.625rem;
  color:var(--bone-white);
  line-height:1.1;
  margin-bottom:0.25rem;
}
.page-about .about-data-item span{
  font-size:0.75rem;
  color:var(--steel-blue);
  letter-spacing:0.06em;
}

/* ========== 引语块 ========== */
.page-about .about-quote-block{
  position:relative;
  margin:0.5rem 0;
  padding:2rem 1.5rem 1.5rem;
  border:var(--about-border);
  box-shadow:6px 6px 0 var(--ink-void);
}
.page-about .about-quote-neon{
  background:linear-gradient(135deg, rgba(198,255,0,0.12) 0%, rgba(198,255,0,0.03) 60%);
  border-color:var(--neon-signal);
}
.page-about .about-quote-orange{
  background:linear-gradient(135deg, rgba(255,107,53,0.14) 0%, rgba(255,107,53,0.03) 60%);
  border-color:var(--thermal-orange);
}
.page-about .about-quote-mark{
  position:absolute;
  top:0.25rem;
  left:0.75rem;
  font-family:var(--font-headline);
  font-size:2.5rem;
  line-height:1;
  color:var(--bone-white);
  opacity:0.85;
}
.page-about .about-quote-block p{
  font-family:var(--font-headline);
  font-size:1.125rem;
  line-height:1.55;
  color:var(--bone-white);
  margin:0.25rem 0 1rem;
  padding-left:1rem;
}
.page-about .about-quote-source{
  display:block;
  text-align:right;
  font-size:0.75rem;
  color:var(--steel-blue);
  letter-spacing:0.08em;
}

/* ========== 统计大块 ========== */
.page-about .about-stats-large{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--grid-line);
  border:var(--about-border);
}
.page-about .about-stats-large-item{
  background:var(--deep-space);
  padding:1.25rem 1rem;
  min-width:0;
}
.page-about .about-stats-large-item strong{
  display:block;
  font-family:var(--font-headline);
  font-size:clamp(1.75rem, 4vw, 2.5rem);
  color:var(--neon-signal);
  line-height:1;
  margin-bottom:0.375rem;
}
.page-about .about-stats-large-item:nth-child(even) strong{
  color:var(--thermal-orange);
}
.page-about .about-stats-large-item span{
  font-size:0.75rem;
  color:var(--steel-blue);
  letter-spacing:0.08em;
}

/* ========== 档案体系维度 ========== */
.page-about .about-dim-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.875rem;
  margin:1.5rem 0;
}
.page-about .about-dim-card{
  position:relative;
  background:var(--about-panel);
  border:var(--about-border);
  padding:1.25rem;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-width:0;
}
.page-about .about-dim-card:hover{
  transform:translateY(-2px);
  box-shadow:5px 5px 0 rgba(0,0,0,0.35);
  border-color:var(--steel-blue);
}
.page-about .about-dim-index{
  display:inline-block;
  font-size:0.6875rem;
  letter-spacing:0.14em;
  color:var(--neon-signal);
  margin-bottom:0.625rem;
  border:1px solid var(--grid-line);
  padding:0.25rem 0.5rem;
}
.page-about .about-dim-card:nth-child(even) .about-dim-index{
  color:var(--thermal-orange);
}
.page-about .about-dim-card h3{
  font-size:1.125rem;
  margin:0 0 0.5rem;
  color:var(--bone-white);
}
.page-about .about-dim-card p{
  font-size:0.875rem;
  line-height:1.7;
  color:var(--steel-blue);
  margin:0;
}

/* ========== 时间轴 ========== */
.page-about .about-version-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin-top:1.5rem;
  min-width:0;
}
.page-about .about-timeline{
  position:relative;
  padding-left:2rem;
  min-width:0;
}
.page-about .about-timeline-rail{
  position:absolute;
  left:0;
  top:28px;
  bottom:28px;
  width:30px;
  height:auto;
  z-index:0;
  pointer-events:none;
}
.page-about .about-timeline-rail path{
  vector-effect:non-scaling-stroke;
}
.page-about .about-timeline-item{
  position:relative;
  display:flex;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1.25rem;
}
.page-about .about-timeline-item:last-child{
  margin-bottom:0;
}
.page-about .about-timeline-dot{
  flex:0 0 14px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--archive-amber);
  margin:1.125rem 0 0 8px;
  z-index:1;
  box-shadow:0 0 0 3px var(--deep-space), 0 0 0 5px var(--grid-line);
  transition:transform 0.2s ease, background 0.2s ease;
  cursor:default;
}
.page-about .about-timeline-item:nth-child(2) .about-timeline-dot{
  background:var(--cyan-trace);
}
.page-about .about-timeline-item.is-current .about-timeline-dot{
  background:var(--neon-signal);
  box-shadow:0 0 0 3px var(--deep-space), 0 0 0 5px rgba(198,255,0,0.5);
}
.page-about .about-timeline-item:hover .about-timeline-dot{
  transform:scale(1.35);
}
.page-about .about-timeline-card{
  flex:1;
  min-width:0;
  background:var(--about-panel);
  border:var(--about-border);
  padding:1rem;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-about .about-timeline-item.is-current .about-timeline-card{
  border-color:var(--neon-signal);
  box-shadow:5px 5px 0 rgba(198,255,0,0.08);
}
.page-about .about-timeline-card .tag{
  margin-bottom:0.5rem;
}
.page-about .about-timeline-card h3{
  font-size:1.125rem;
  line-height:1.3;
  margin:0 0 0.375rem;
  color:var(--bone-white);
}
.page-about .about-timeline-card p{
  font-size:0.8125rem;
  line-height:1.65;
  color:var(--steel-blue);
  margin:0 0 0.625rem;
}
.page-about .about-timeline-card details{
  border-top:1px solid var(--grid-line);
  padding-top:0.5rem;
  margin-top:0.375rem;
}
.page-about .about-timeline-card summary{
  cursor:pointer;
  font-size:0.75rem;
  color:var(--cyan-trace);
  letter-spacing:0.06em;
  user-select:none;
}
.page-about .about-timeline-card summary:hover{
  color:var(--neon-signal);
}
.page-about .about-timeline-card details ul{
  margin:0.625rem 0 0;
  padding-left:1.125rem;
}
.page-about .about-timeline-card details li{
  font-size:0.75rem;
  line-height:1.6;
  color:var(--steel-blue);
}
.page-about .about-timeline-art{
  margin:0;
  border:var(--about-border);
  background:var(--abyss-panel);
  box-shadow:6px 6px 0 var(--ink-void);
  overflow:hidden;
  min-width:0;
}
.page-about .about-timeline-art img{
  display:block;
  width:100%;
  height:auto;
  max-height:760px;
  object-fit:cover;
}

/* ========== 图统一样式 ========== */
.page-about .about-figure{
  margin:1.5rem 0;
  border:var(--about-border);
  background:var(--abyss-panel);
  padding:0.625rem;
  box-shadow:5px 5px 0 rgba(0,0,0,0.3);
  min-width:0;
}
.page-about .about-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
.page-about .about-figure figcaption{
  font-size:0.75rem;
  color:var(--steel-blue);
  line-height:1.5;
  padding:0.625rem 0.125rem 0.125rem;
  letter-spacing:0.04em;
}

/* ========== 原则卡片 ========== */
.page-about .about-principle-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.875rem;
  margin:1.5rem 0 1rem;
}
.page-about .about-principle-card{
  border:var(--about-border);
  background:var(--about-panel);
  padding:1.25rem;
  min-width:0;
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.page-about .about-principle-card:hover{
  transform:translateY(-2px);
  border-color:var(--cyan-trace);
}
.page-about .about-principle-icon{
  display:inline-block;
  font-family:var(--font-headline);
  font-size:0.75rem;
  letter-spacing:0.1em;
  color:var(--deep-space);
  background:var(--neon-signal);
  padding:0.25rem 0.5rem;
  margin-bottom:0.625rem;
  transform:skewX(-8deg);
}
.page-about .about-principle-card:nth-child(even) .about-principle-icon{
  background:var(--thermal-orange);
  color:var(--bone-white);
}
.page-about .about-principle-card h3{
  font-size:1.125rem;
  margin:0 0 0.5rem;
  color:var(--bone-white);
}
.page-about .about-principle-card p{
  font-size:0.875rem;
  line-height:1.7;
  color:var(--steel-blue);
  margin:0;
}
.page-about .about-trust-note{
  font-size:0.8125rem;
  line-height:1.7;
  color:var(--steel-blue);
  border-left:3px solid var(--archive-amber);
  padding-left:0.875rem;
  margin:1.25rem 0 0;
}

/* ========== 内链区域 ========== */
.page-about .about-cta-links{
  display:flex;
  flex-wrap:wrap;
  gap:0.875rem;
  align-items:center;
  margin-top:0.75rem;
}

/* ========== 平板及以上 ========== */
@media (min-width: 640px){
  .page-about{
    --about-gap:1.5rem;
  }
  .page-about .about-data-ribbon{
    grid-template-columns:repeat(4, 1fr);
  }
  .page-about .about-stats-large{
    grid-template-columns:repeat(4, 1fr);
  }
  .page-about .about-dim-grid{
    grid-template-columns:1fr 1fr;
  }
  .page-about .about-principle-grid{
    grid-template-columns:1fr 1fr;
  }
  .page-about .about-hero-grid{
    padding:3.25rem 1rem 3.5rem;
  }
}

@media (min-width: 801px){
  .page-about .about-hero-grid{
    grid-template-columns:1.25fr 0.75fr;
    gap:2.5rem;
  }
  .page-about .about-layout{
    grid-template-columns:minmax(220px, 0.3fr) 1fr;
    gap:2.5rem;
  }
  .page-about .about-directory{
    position:sticky;
    top:6.5rem;
  }
  .page-about .about-timeline-card{
    padding:1.125rem 1.25rem;
  }
  .page-about .about-quote-block{
    padding:2.5rem 2rem 1.75rem;
  }
  .page-about .about-quote-block p{
    font-size:1.25rem;
  }
}

@media (min-width: 1100px){
  .page-about .about-version-layout{
    grid-template-columns:1fr 300px;
    gap:2rem;
  }
  .page-about .about-timeline-art{
    box-shadow:8px 8px 0 var(--ink-void);
  }
  .page-about .about-hero-grid{
    padding:4rem 1rem 4.5rem;
  }
  .page-about .about-hero-aside{
    padding:1.75rem;
  }
  .page-about .about-story{
    gap:3rem;
  }
}