/* zyw052.com 主站样式 —— 全部经 var(--token) 引用 shared tokens.css（SKILL §48 纪律）
   规避要点：无 transition:all、无 hover:scale、无 gradient-text、无居中 Hero、
   html/body overflow-x: clip、focus 即时、强调色占比 <5%。 */
/* ---------- 锚点偏移（P0-1）：56px 吸顶导航会压住 section 顶部 ---------- */
html { scroll-behavior: smooth; }
section[id], footer[id], .g-title[id] { scroll-margin-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { overflow-x: clip; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-16); }
@media (min-width: 640px) { .wrap { padding-inline: 0; } }

/* ---------- 导航 ---------- */
.nav { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); backdrop-filter: none; }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.nav-brand { font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: var(--tr-tight2); }
.nav-links { display: flex; gap: var(--s-24); font-size: var(--fs-14); color: var(--text-muted); text-decoration: none; }
.nav-links a { color: inherit; text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text); }
/* P0-3：≤639px 导航不再全灭，改 Apple 章节 chips 式横滑锚点条（纯 CSS，零 JS） */
@media (max-width: 639px) {
  .nav-in { gap: var(--s-16); }
  .nav-brand { flex: 0 0 auto; }
  .nav-links { flex: 1 1 auto; min-width: 0; gap: var(--s-16); justify-content: flex-end;
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { scroll-snap-align: end; }
}

/* ---------- 首屏 ---------- */
.hero { padding-block: var(--s-96) var(--s-64); }
.eyebrow { font-size: var(--fs-12); letter-spacing: var(--tr-wide); color: var(--text-faint); margin: 0 0 var(--s-24); }
.hero h1 {
  margin: 0; max-width: 22ch;
  font-size: clamp(var(--fs-29), 6vw, var(--fs-48));
  font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-style: normal;
}
.lead { max-width: var(--maxw-text); color: var(--text-muted); margin: var(--s-24) 0 0; font-size: var(--fs-19); }
.kn { margin: var(--s-48) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-24) var(--s-32); border-top: 1px solid var(--border); padding-top: var(--s-32); }
@media (min-width: 640px) { .kn { grid-template-columns: repeat(4, 1fr); } }
.kn-item dt { order: 2; font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--s-8); }
.kn-item { display: flex; flex-direction: column; }
.kn-item dd { margin: 0; font-size: var(--fs-37); font-weight: 800; letter-spacing: var(--tr-tight2); line-height: 1; color: var(--text); }
.kn-big dd { font-size: clamp(var(--fs-37), 8vw, var(--fs-48)); color: var(--accent); }
.kn-u { font-size: var(--fs-14); font-weight: 500; color: var(--text-faint); margin-left: 2px; }
.kn-note { margin: var(--s-16) 0 0; color: var(--text-faint); font-size: var(--fs-12); }

/* ---------- 小节通用 ---------- */
/* P1-4：桌面端 section 间距放宽到 96（移动端保持 64），贴近 Apple 段落呼吸感 */
.sec { padding-block: var(--s-64); border-top: 1px solid var(--border); }
@media (min-width: 640px) { .sec { padding-block: var(--s-96); } }
/* P1-5：章节头 reveal（400ms ease-out，落在 Apple 400–600ms 段落级区间内）
   选择器为通用的 .reveal，但 HTML 侧只挂载在 .sec-note（章节导语）上；
   正文（.matrix p / .w-body p / .timeline p / .lead）永不动。
   .js 由脚本置位，故禁用 JS 时元素保持可见；prefers-reduced-motion 由 tokens.css 回退为即时。 */
.js .reveal { opacity: 0; transform: translateY(8px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.h2 { margin: 0 0 var(--s-16); font-size: var(--fs-23); font-weight: 700; letter-spacing: var(--tr-tight2); display: flex; align-items: baseline; gap: var(--s-16); }
.no { color: var(--accent); font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tr-wide); }
.sec-note { margin: 0 0 var(--s-32); color: var(--text-muted); max-width: var(--maxw-text); font-size: var(--fs-14); }
.sec-foot { color: var(--text-faint); font-size: var(--fs-12); border-top: 1px solid var(--border); margin: var(--s-32) 0 0; padding-top: var(--s-16); }

/* ---------- 能力矩阵（编号目录式，弃卡片网格） ---------- */
.matrix { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.matrix li { display: grid; grid-template-columns: 4.5rem 8.5rem 1fr; gap: var(--s-16); align-items: baseline; padding: var(--s-16) 0; border-bottom: 1px solid var(--border); }
.m-no { color: var(--accent); font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--tr-wide); }
.matrix h3 { margin: 0; font-size: var(--fs-16); font-weight: 700; }
.matrix p { margin: 0; color: var(--text-muted); font-size: var(--fs-14); max-width: 52ch; }
@media (max-width: 639px) {
  .matrix li { grid-template-columns: 3.5rem 1fr; }
  .matrix p { grid-column: 1 / -1; max-width: none; }
}

/* ---------- 作品陈列（核心） ---------- */
.g-title { margin: var(--s-48) 0 var(--s-16); font-size: var(--fs-14); font-weight: 700; letter-spacing: var(--tr-wide); color: var(--text-muted); }
/* P1：作品区分块锚点 chips（与 me 站 .tags 同一体系） */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-8); margin: 0 0 var(--s-8); }
.chips a { font-size: var(--fs-12); color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 14px; background: var(--bg-elev);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.chips a:hover, .chips a:focus-visible { color: var(--text); border-color: var(--text-faint); }
.works { list-style: none; margin: 0; padding: 0; }
.work { display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--s-16); align-items: baseline; padding: var(--s-16) 0; border-bottom: 1px solid var(--border); transition: background var(--dur) var(--ease); }
.work:hover { background: var(--bg-elev); }
.w-no { color: var(--text-faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.w-body h4 { margin: 0; font-size: var(--fs-16); font-weight: 700; display: inline; }
.w-body p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-14); max-width: 58ch; }
.w-meta { font-size: var(--fs-12) !important; color: var(--text-faint) !important; }
.w-src { font-size: var(--fs-12); color: var(--accent); text-decoration: none; white-space: nowrap; }
.w-src:hover, .w-src:focus-visible { color: var(--accent-ink); text-decoration: underline; }
.w-src-void { color: var(--text-faint); }
@media (max-width: 639px) { .work { grid-template-columns: 2.25rem 1fr; } .w-src { grid-column: 2; justify-self: start; } }
.works-foot { color: var(--text-faint); font-size: var(--fs-12); margin: var(--s-16) 0 0; }

/* ---------- 成果条图 ---------- */
.chart { display: grid; gap: var(--s-16); }
.bar { display: grid; grid-template-columns: 14rem 1fr auto; gap: var(--s-16); align-items: center; }
.b-label { font-size: var(--fs-14); color: var(--text-muted); }
.b-scale { display: block; height: 6px; background: var(--bg-elev); border-radius: var(--r-pill); overflow: hidden; }
/* 进场动画（P0-2 修正）：原 .js .b-scale i 与 .bar.on 同为 var(--w,0)，两规则同值 → 动画从未发生。
   现拆为三段：① 无 JS 直接到位（--w 写在行内 style）；② 有 JS 先归零；③ 命中 .on 后按 --i 逐条展开。
   prefers-reduced-motion 已由 tokens.css 全局回退到 0.01ms，等效即时呈现。 */
.b-scale i { display: block; height: 100%; width: var(--w, 0); background: var(--text); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }
.js .b-scale i { width: 0; }
.bar.on .b-scale i { width: var(--w, 0); transition-delay: calc(var(--i, 0) * 50ms); }
.bar b { font-size: var(--fs-16); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) { .bar { grid-template-columns: 1fr auto; } .b-scale { grid-column: 1 / -1; } }

/* ---------- 时间线 ---------- */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.timeline li { display: grid; grid-template-columns: 6rem 10rem 1fr; gap: var(--s-16); padding: var(--s-16) 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.t-no { color: var(--accent); font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--tr-wide); }
.timeline b { font-size: var(--fs-16); }
.timeline p { margin: 0; color: var(--text-muted); font-size: var(--fs-14); max-width: 58ch; }
@media (max-width: 639px) { .timeline li { grid-template-columns: 4.5rem 1fr; } .timeline p { grid-column: 1 / -1; } }

/* ---------- v1.1 技术履历（关于段新增） ---------- */
.sub-h { font-size: var(--fs-14); letter-spacing: var(--tr-wide); color: var(--accent); margin: var(--s-48) 0 var(--s-8); font-weight: 700; }
.pos-line { font-size: var(--fs-16); line-height: var(--lh-body); color: var(--text); max-width: var(--maxw-text); margin: 0 0 var(--s-8); }
.cert-line { font-size: var(--fs-14); color: var(--text-muted); line-height: var(--lh-body); max-width: var(--maxw-text); margin: 0 0 var(--s-16); }
.cert-line b { color: var(--text); }

/* ---------- 页脚（联系方式弱化） ---------- */
.foot { padding-block: var(--s-48) var(--s-96); }
.foot-line { margin: 0; font-size: var(--fs-16); display: flex; gap: var(--s-16); align-items: baseline; flex-wrap: wrap; }
.foot-line a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease); }
.foot-line a:hover, .foot-line a:focus-visible { color: var(--accent-ink); }
.foot-sub { margin: var(--s-8) 0 0; color: var(--text-faint); font-size: var(--fs-12); }

/* ---------- 通用可达性 ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; }