.page-about {
  --ab-line: rgba(44, 74, 110, 0.55);
  --ab-line-soft: rgba(169, 192, 216, 0.16);
  --ab-glow: rgba(95, 224, 208, 0.35);
  background: var(--jl-space);
  color: var(--jl-paper);
  overflow-x: hidden;
}

.page-about .jl-figure__media {
  overflow: hidden;
  background: var(--jl-midnight);
}

.page-about .jl-figure__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* ---------- 面包屑 ---------- */
.page-about .ab-crumbs {
  padding-top: calc(var(--jl-top-h) + 14px);
}

.page-about .ab-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--jl-mist);
}

.page-about .ab-crumbs__list li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--jl-steel);
}

.page-about .ab-crumbs__list a {
  color: var(--jl-mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 240ms var(--jl-ease), border-color 240ms var(--jl-ease);
}

.page-about .ab-crumbs__list a:hover {
  color: var(--jl-aurora);
  border-bottom-color: var(--jl-aurora);
}

.page-about .ab-crumbs__list [aria-current="page"] {
  color: var(--jl-sand);
}

/* ---------- 首屏 ---------- */
.page-about .ab-hero {
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0 clamp(36px, 6vw, 72px);
}

.page-about .ab-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  background:
    radial-gradient(circle at 82% 12%, rgba(192, 133, 82, 0.18), transparent 55%),
    radial-gradient(circle at 12% 0%, rgba(95, 224, 208, 0.12), transparent 50%);
  pointer-events: none;
}

.page-about .ab-hero__inner {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  align-items: end;
}

.page-about .ab-hero__h1 {
  margin: 12px 0 0;
  font-family: var(--jl-font-display);
  font-weight: 900;
  font-size: clamp(30px, 7vw, 68px);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--jl-paper);
}

.page-about .ab-hero__lead {
  margin: 18px 0 0;
  max-width: 46ch;
  color: var(--jl-mist);
}

.page-about .ab-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 0;
  padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid var(--ab-line);
}

.page-about .ab-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-about .ab-stat__num {
  font-size: clamp(20px, 4.4vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--jl-sand);
}

.page-about .ab-stat__label {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--jl-mist);
}

.page-about .ab-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-about .ab-hero__fig {
  margin: 0;
  clip-path: var(--jl-cut);
  border: 1px solid var(--ab-line);
}

.page-about .ab-hero__fig .jl-figure__media img {
  aspect-ratio: 3 / 2;
}

/* ---------- 主题带 ---------- */
.page-about .ab-band {
  margin: clamp(16px, 3vw, 32px) 0;
  border-left: 2px solid var(--jl-copper);
}

/* ---------- 通用小节头 ---------- */
.page-about .ab-sechead {
  max-width: 62ch;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-about .ab-sechead .jl-title {
  margin: 10px 0 14px;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.3;
}

.page-about .ab-sechead .jl-lead {
  color: var(--jl-mist);
}

/* ---------- 缘起 ---------- */
.page-about .ab-origin .jl-title {
  margin: 10px 0 18px;
  font-size: clamp(24px, 4.2vw, 38px);
  line-height: 1.35;
}

.page-about .ab-origin p {
  color: var(--jl-mist);
  margin: 0 0 16px;
}

.page-about .ab-origin p:last-child {
  margin-bottom: 0;
}

.page-about .ab-origin a {
  color: var(--jl-aurora);
  text-decoration: none;
  border-bottom: 1px solid rgba(95, 224, 208, 0.4);
  transition: border-color 240ms var(--jl-ease), color 240ms var(--jl-ease);
}

.page-about .ab-origin a:hover {
  border-bottom-color: var(--jl-aurora);
  color: var(--jl-paper);
}

.page-about .ab-points {
  align-self: start;
  padding: 22px 20px 26px;
  background: linear-gradient(160deg, var(--jl-midnight), rgba(19, 42, 74, 0.4));
  border: 1px solid var(--ab-line);
  clip-path: var(--jl-cut);
}

.page-about .ab-points__head {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--jl-copper);
}

.page-about .ab-points__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.page-about .ab-point {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ab-line-soft);
}

.page-about .ab-point:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-about .ab-point__no {
  font-size: 13px;
  color: var(--jl-copper);
  letter-spacing: 0.12em;
  padding-top: 2px;
}

.page-about .ab-point__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--jl-paper);
}

/* ---------- 年份轴 ---------- */
.page-about .ab-nodes {
  position: relative;
  padding-left: 32px;
}

.page-about .ab-nodes::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--jl-copper) 0%, var(--jl-aurora) 42%, rgba(95, 224, 208, 0.08) 100%);
}

.page-about .ab-node {
  position: relative;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ab-line-soft);
  margin-bottom: 18px;
}

.page-about .ab-node:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-about .ab-node__sum {
  display: block;
  cursor: pointer;
  list-style: none;
  padding: 6px 0 4px;
}

.page-about .ab-node__sum::-webkit-details-marker {
  display: none;
}

.page-about .ab-node__year {
  display: block;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--jl-copper);
  margin-bottom: 6px;
  transition: color 240ms var(--jl-ease);
}

.page-about .ab-node__head {
  display: block;
}

.page-about .ab-node__title {
  display: block;
  font-family: var(--jl-font-display);
  font-size: clamp(17px, 3.4vw, 23px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--jl-paper);
  transition: color 240ms var(--jl-ease);
}

.page-about .ab-node__sub {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--jl-mist);
}

.page-about .ab-node__mark {
  position: absolute;
  left: -26px;
  top: 12px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--jl-copper);
  background: var(--jl-space);
  transform: rotate(45deg);
  transition: transform 240ms var(--jl-ease), background-color 240ms var(--jl-ease), border-color 240ms var(--jl-ease);
}

.page-about .ab-node__sum:hover .ab-node__title {
  color: var(--jl-sand);
}

.page-about .ab-node__sum:hover .ab-node__mark {
  border-color: var(--jl-aurora);
  transform: rotate(45deg) scale(1.14);
}

.page-about .ab-node[open] .ab-node__mark {
  background: var(--jl-aurora);
  border-color: var(--jl-aurora);
  transform: rotate(45deg) scale(1.24);
}

.page-about .ab-node[open] .ab-node__year {
  color: var(--jl-aurora);
}

.page-about .ab-node__body {
  margin: 10px 0 0;
  padding: 14px 16px;
  background: rgba(19, 42, 74, 0.45);
  border-left: 2px solid var(--jl-aurora);
}

.page-about .ab-node__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--jl-mist);
}

/* ---------- 通栏图带 ---------- */
.page-about .ab-strata {
  margin: clamp(28px, 5vw, 56px) 0;
  padding: 0 var(--jl-gutter);
}

.page-about .ab-strata .jl-figure__media {
  clip-path: var(--jl-cut);
}

.page-about .ab-strata .jl-figure__media img {
  aspect-ratio: 10 / 3;
  object-fit: cover;
}

/* ---------- 研究方法 ---------- */
.page-about .ab-method .jl-title {
  margin: 10px 0 16px;
  font-size: clamp(24px, 4.2vw, 38px);
  line-height: 1.35;
}

.page-about .ab-method__text > p {
  color: var(--jl-mist);
  margin: 0 0 24px;
}

.page-about .ab-flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.page-about .ab-flow__item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(19, 42, 74, 0.38);
  border: 1px solid var(--ab-line-soft);
  clip-path: var(--jl-cut);
  transition: border-color 240ms var(--jl-ease), transform 240ms var(--jl-ease);
}

.page-about .ab-flow__item:hover {
  border-color: rgba(192, 133, 82, 0.65);
  transform: translateY(-4px);
}

.page-about .ab-flow__no {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--jl-copper);
  padding-top: 3px;
}

.page-about .ab-flow__title {
  margin: 0 0 6px;
  font-family: var(--jl-font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--jl-paper);
}

.page-about .ab-flow__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--jl-mist);
}

.page-about .ab-method__fig {
  margin: 0;
  align-self: start;
  clip-path: var(--jl-cut);
  border: 1px solid var(--ab-line);
}

.page-about .ab-method__fig .jl-figure__media img {
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

/* ---------- 团队与网络 ---------- */
.page-about .ab-net__figure {
  padding: 22px 20px;
  background: linear-gradient(200deg, rgba(19, 42, 74, 0.85), rgba(11, 27, 51, 0.5));
  border: 1px solid var(--ab-line);
  clip-path: var(--jl-cut);
}

.page-about .ab-dots {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.page-about .ab-dot {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(169, 192, 216, 0.28);
  transition: background-color 240ms var(--jl-ease), transform 240ms var(--jl-ease);
}

.page-about .ab-dot--key {
  background: var(--jl-copper);
  box-shadow: 0 0 0 3px rgba(192, 133, 82, 0.18);
}

.page-about .ab-dots:hover .ab-dot--key {
  background: var(--jl-aurora);
  box-shadow: 0 0 0 3px rgba(95, 224, 208, 0.2);
}

.page-about .ab-net__legend {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--jl-mist);
}

.page-about .ab-net__legend-num {
  font-size: 17px;
  font-weight: 700;
  color: var(--jl-sand);
  margin-right: 2px;
}

.page-about .ab-net__text > p {
  margin: 0 0 16px;
  color: var(--jl-mist);
}

.page-about .ab-net__list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-about .ab-net__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 14px;
  border-left: 2px solid var(--jl-steel);
  background: rgba(19, 42, 74, 0.32);
  font-size: 14px;
  line-height: 1.7;
  color: var(--jl-mist);
  transition: border-color 240ms var(--jl-ease), background-color 240ms var(--jl-ease);
}

.page-about .ab-net__row:hover {
  border-left-color: var(--jl-aurora);
  background: rgba(19, 42, 74, 0.6);
}

.page-about .ab-net__type {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--jl-sand);
}

/* ---------- 荣誉档案卡 ---------- */
.page-about .ab-files {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .ab-file {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  background: linear-gradient(155deg, var(--jl-midnight), rgba(11, 27, 51, 0.6));
  border: 1px solid var(--ab-line);
  border-top: 2px solid var(--jl-copper);
}

.page-about .ab-file .jl-tag {
  align-self: flex-start;
}

.page-about .ab-file__num {
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--jl-sand);
}

.page-about .ab-file__unit {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--jl-mist);
  margin-left: 4px;
}

.page-about .ab-file__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--jl-mist);
}

/* ---------- 未来方向 ---------- */
.page-about .ab-next {
  display: grid;
  gap: 22px;
}

.page-about .ab-next__item {
  padding: 24px 22px;
  background: rgba(19, 42, 74, 0.42);
  border: 1px solid var(--ab-line-soft);
  clip-path: var(--jl-cut);
  transition: transform 240ms var(--jl-ease), border-color 240ms var(--jl-ease);
}

.page-about .ab-next__item:hover {
  transform: translateY(-6px);
  border-color: rgba(95, 224, 208, 0.55);
}

.page-about .ab-next__no {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--jl-copper);
  margin-bottom: 12px;
}

.page-about .ab-next__title {
  margin: 0 0 10px;
  font-family: var(--jl-font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--jl-paper);
}

.page-about .ab-next__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--jl-mist);
}

/* ---------- 收尾 ---------- */
.page-about .ab-cta {
  position: relative;
  padding-bottom: clamp(48px, 7vw, 88px);
}

.page-about .ab-cta__inner {
  padding: clamp(28px, 5vw, 52px) clamp(22px, 4vw, 48px);
  background:
    radial-gradient(circle at 88% 10%, rgba(95, 224, 208, 0.16), transparent 58%),
    linear-gradient(120deg, rgba(19, 42, 74, 0.95), rgba(11, 27, 51, 0.85));
  border: 1px solid var(--ab-line);
  border-bottom: 2px solid var(--jl-copper);
  clip-path: var(--jl-cut);
  display: grid;
  gap: 26px;
}

.page-about .ab-cta__title {
  margin: 0 0 12px;
  font-family: var(--jl-font-display);
  font-size: clamp(21px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.4;
  color: var(--jl-paper);
}

.page-about .ab-cta__text p {
  margin: 0;
  max-width: 52ch;
  color: var(--jl-mist);
  font-size: 15px;
  line-height: 1.85;
}

.page-about .ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 760px) {
  .page-about .ab-files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .page-about .ab-next {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .page-about .ab-next__item:nth-child(2) {
    transform: translateY(28px);
  }

  .page-about .ab-next__item:nth-child(2):hover {
    transform: translateY(22px);
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 900px) {
  .page-about .ab-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-about .ab-dots {
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (min-width: 1000px) {
  .page-about .ab-nodes {
    padding-left: 0;
  }

  .page-about .ab-nodes::before {
    left: 126px;
    top: 14px;
    bottom: 14px;
  }

  .page-about .ab-node {
    padding-left: 172px;
    padding-bottom: 30px;
    margin-bottom: 26px;
  }

  .page-about .ab-node__sum {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    padding: 0;
  }

  .page-about .ab-node__year {
    font-size: 18px;
    text-align: right;
    letter-spacing: 0.12em;
    margin-bottom: 0;
    padding-top: 4px;
  }

  .page-about .ab-node__mark {
    left: 120px;
    top: 18px;
    width: 12px;
    height: 12px;
  }

  .page-about .ab-node__body {
    margin-left: 172px;
    margin-top: 16px;
  }

  .page-about .ab-cta__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .page-about .ab-cta__actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1180px) {
  .page-about .ab-files {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .page-about .ab-net__row {
    grid-template-columns: 104px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-flow__item,
  .page-about .ab-next__item,
  .page-about .ab-dot {
    transition: none;
  }
}
