/* ============================================================
   about.css · About 页专属（仅 /about/ 引入）
   ------------------------------------------------------------
   依据 docs/15-about-plan.md 的确认版方案，并按第 16 轮反馈修正：
   1) 页面底色与浅圆互换：body = --c-stage(#efefec)，圆 = --c-paper(#f8f8f8)；
   2) §02 改为中文大字自述，删去左栏文字，加入吉他 / 爵士乐即兴；
   3) §03 改四列网格：首行空出第一列放 01 / 02 / 03，次行 04，取消错位；
   4) §04 Contact 与页脚重复，整段删除，联系方式只保留页脚。
   本文件不修改任何公共样式；所有规则限定在 .about- / body.page-about 作用域内。
   字体、颜色、12 列栅格、--gap / --pad-x / --indent / --section-gap
   全部沿用 tokens.css 既有令牌，不新增颜色与字号令牌。
   ============================================================ */

/* ---------- 底色互换 ----------
   body 的公共底色是 --c-paper；About 页单独换成 --c-stage。
   汉堡按钮全站统一为「深色实心圆 + 浅色线条」，此处不再单独换底色，
   否则 About 会变成一块浅色圆，与其它页面不一致。 */
body.page-about { background: var(--c-stage); }

.about { position: relative; overflow-x: clip; }

/* ---------- §01 首屏：满屏 + 一个浅圆 + 缩进大标题 ---------- */
.about-hero {
  --nav-h: 98px;
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  box-sizing: border-box;
}
.about-hero__inner {
  position: relative; z-index: 1;
  min-height: inherit;
  display: flex; flex-direction: column;
  padding-bottom: clamp(32px, 5vh, 64px);
}

/* 浅圆：直径 30vw，位置对齐录屏的 left 5% / top 26vh。
   互换后颜色为 --c-paper（原页面底色），在灰底上更亮一层。
   位移由 about.js 的阻尼插值写入 transform，未启用脚本时保持静止。 */
.about__orb {
  position: absolute; z-index: 0;
  left: var(--pad-x);
  top: calc(26vh - var(--nav-h));
  width: 30vw; height: 30vw;
  border-radius: 50%;
  background: var(--c-paper);
  pointer-events: none;
  will-change: transform;
}

.about-hero__title {
  margin-top: clamp(120px, 21vh, 260px);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.about-hero__line { display: block; }
.about-hero__line--indent { padding-left: var(--indent); }

.about-hero__subgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-top: 48px;
}
.about-hero__sub {
  grid-column: 7 / 13;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.025em;
}

/* 屏底三列真实元信息：c4 / c7 / c10，替代参考站的统计数字 */
.about-hero__meta {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-top: auto;
  padding-top: clamp(48px, 8vh, 96px);
}
.about-meta__col:nth-child(1) { grid-column: 4 / span 3; }
.about-meta__col:nth-child(2) { grid-column: 7 / span 3; }
.about-meta__col:nth-child(3) { grid-column: 10 / span 3; }
.about-meta__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: 10px;
}
.about-meta__value { font-size: var(--fs-small); line-height: 1.6; }

/* ---------- 通用分节：只在上侧留白，段间恰好一个 --section-gap ---------- */
.about-section { padding-top: var(--section-gap); }
.about-section__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.about-section__label {
  grid-column: 1 / 4;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-mid);
}
.about-section__label p { margin-top: 14px; max-width: 30ch; font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; line-height: 1.7; }
.about-section__body { grid-column: 4 / 13; }

/* ---------- §02 中文大字自述 ----------
   左栏文字整段删除；正文仍从 c4 起（27.3%），与参考站引言起点一致。
   中文不设负字距，行高放松到 1.5，字号比上一版英文介绍更大。 */
.about-intro {
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  max-width: 19em;
}
.about-focus {
  margin-top: 48px;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-mid);
}

/* 标签行与内容网格之间的一次呼吸 */
.about-section__grid + .about-caps { margin-top: clamp(48px, 5vw, 72px); }

/* ---------- §03 能力：四列网格，首行空出第一列 ----------
   12 列栅格 → 每块 3 列；01/02/03 落在 c4 / c7 / c10，
   04 落到次行 c1。所有块同一基线，不再有纵向错位。
   无图标、无卡片、无进度条，只有文字；
   块顶 1px 区隔线已按全站要求删除。 */
.about-caps {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(56px, 6vw, 88px);
}
.about-cap {
  grid-column: span 3;
  max-width: 252px;                   /* 横向收窄，让每块更像一块方正文块而非长条 */
  padding-top: 24px;                  /* 顶部 1px 区隔线已删除 */
  min-width: 0;
}
.about-cap:nth-child(1) { grid-column: 4 / span 3; grid-row: 1; }
.about-cap:nth-child(2) { grid-column: 7 / span 3; grid-row: 1; }
.about-cap:nth-child(3) { grid-column: 10 / span 3; grid-row: 1; }
.about-cap:nth-child(4) { grid-column: 1 / span 3; grid-row: 2; }
.about-cap__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  color: var(--c-mid);
}
.about-cap__title {
  margin-top: 20px;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.about-cap__text {
  margin-top: 16px;
  max-width: 34ch;
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* ---------- 自然退化（非移动端专项设计，仅保证不破版） ---------- */
@media (max-width: 1199px) {
  .about-hero__sub { grid-column: 5 / 13; }
  .about__orb { width: 36vw; height: 36vw; }
  /* 四列在平板过窄 → 退回两列，仍保持同一基线、无错位；
     两列时放开上面的 252px 收窄，避免文字被挤成窄条 */
  .about-cap:nth-child(n) { grid-column: span 6; grid-row: auto; }
  .about-cap { max-width: none; }
}
@media (max-width: 767px) {
  .about-hero { min-height: calc(92vh - 98px); }
  .about-hero__title { margin-top: 12vh; font-size: clamp(38px, 10vw, 60px); }
  .about-hero__line--indent { padding-left: var(--indent); }
  .about-hero__sub { grid-column: 1 / 13; font-size: clamp(22px, 6vw, 34px); margin-top: 36px; }
  .about__orb { width: 62vw; height: 62vw; top: 16vh; }
  .about-hero__meta { row-gap: 18px; padding-top: 40px; }
  .about-meta__col:nth-child(n) { grid-column: 1 / span 12; }
  .about-section__label, .about-section__body { grid-column: 1 / span 12; }
  .about-section__label { margin-bottom: 28px; }
  .about-cap:nth-child(n) { grid-column: 1 / span 12; grid-row: auto; }
  .about-intro { font-size: clamp(24px, 6vw, 34px); }
  .about-caps { row-gap: 44px; }
}