/* ============================================================
   design-system.css — Yeezeon Li Portfolio 2026
   页面级视觉系统组件层（design.md §5 / §4 的实现）
   ── 规则 ──
   · 与 master.css 并存，**载入顺序在 master.css 之后**（复用其 :root token）。
   · 纯 ADDITIVE：只新增 class，不重定义 master.css 已有的 .card/.tag/.stat-card/
     .highlight-quote/.meta-bar（避免冲突）；迁移 index.html 是后续步骤。
   · 一个视觉决策 = 改这里一处 → 全册生效。token 名锚定 design.md §3。
   · 方向：A 暖有机编辑（地板）+ B 系统蓝图（重页）+ C 报告体（封面/分隔）。
   版本 v0.3（S81 · Phase 1 骨架：§5 14 组件 + §4 12 列栅格 + 字体配对）
   ============================================================ */

/* ── §4 · 12 列栅格 + 两列布局 ───────────────────────────── */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
}
/* 主力两列：主 7 列 / 辅 5 列（替代裸 flex:1 / 38-42%）·落列线 */
.cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
  align-items: stretch;  /* band 共同体：两栏满高·内部 space-between 吸收差值（对齐协议 §6）*/
}
.col--main { grid-column: span 7; min-width: 0; }  /* min-width:0 防 grid 溢出 */
.col--side { grid-column: span 5; min-width: 0; }
/* S103 方案A 变体档：8+4（窄辅栏）/ 6+6（对半）——三档 = 12列全集，不再即兴 % */
.col--main-8 { grid-column: span 8; min-width: 0; }
.col--side-4 { grid-column: span 4; min-width: 0; }
.col--half { grid-column: span 6; min-width: 0; }
/* 跨列工具（按 12 列派生）*/
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }

/* ── 竖堆 Stack ───────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--g3 { gap: var(--sp-3); }
.stack--g5 { gap: var(--sp-5); }
.stack--g6 { gap: var(--sp-6); }

/* ── §5 · 眉标 Eyebrow（mono 中英双层 + leader rule）────── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-tai-teal);          /* 深青绿 kicker 语义 */
  margin-bottom: var(--sp-3);
}
.eyebrow::before {                    /* leader rule */
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  background: var(--c-tai-teal);
}
.eyebrow .en { color: var(--c-text-tertiary); letter-spacing: 0.1em; }  /* 中英双层·EN 副层 */

/* ── §5 · 页眉 Section-header（>eyebrow + h2 · 全宽 band）── */
.section-header { margin-bottom: var(--sp-5); }
.section-header h2 { max-width: 60ch; }          /* 控行宽·守可读 measure */
.section-header .lead { margin-top: var(--sp-3); }

/* ── §5 · 节内小标题 Section-sublabel（■ 8px 项目色方块 + h3 · canon p08/p28 L832）──
   用法：<h3 class="section-sublabel">关键决策溯源</h3>（CN-only · 字型继承 h3 基样 20/500/黑）
   ■ 为唯一绿色（项目色方块），文字守黑（design.md §3 L114 禁小字绿 · §6 L198 ■+h3 跨页铁律）*/
.section-sublabel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4) 0;
}
.section-sublabel::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--c-project);
}

/* ── §5 · 卡片变体（master .card 之上叠 border-left 色码）─── */
.card--accent { border-left: 3px solid var(--c-accent-deep); }
.card--teal   { border-left: 3px solid var(--c-tai-teal); }   /* 色码系统卡：一子系统一色 */
.card--clay   { border-left: 3px solid var(--c-tai-clay); }
.card--mist   { border-left: 3px solid var(--c-tai-mist); }
.card--sprout { border-left: 3px solid var(--c-tai-sprout); }
.card--warn   { border-left: 3px solid var(--c-tai-clay); }
.card--danger { border-left: 3px solid #B4524A; }              /* 暖红·仅风险/陷阱 */

/* ── §5 · 数据卡 Stat（big-number mono + context）─────────── */
.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mega);
  font-weight: 700;
  line-height: 0.95;                  /* 行高随字号反向缩放（紧）*/
  letter-spacing: -0.03em;
  color: var(--c-accent);             /* 大字·苔光绿允许（§3 铁律：仅大字/非正文）*/
}
.stat__label {
  font-size: var(--fs-small);
  color: var(--c-text-secondary);
  line-height: 1.4;
}
.stat--sm .stat__num { font-size: var(--fs-display); }
/* 项目页：KPI 数字随项目色（对齐 master.css .stat-card__number 既有行为）*/
.project-a .stat__num, .project-b .stat__num,
.project-c .stat__num, .project-d .stat__num { color: var(--c-project); }

/* ── §5 · 引述 Quote（border-left + soft bg）──────────────── */
.quote {
  border-left: 3px solid var(--c-accent);
  background: var(--c-accent-soft);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}
.quote .src {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
  font-style: normal;
}

/* ── §5/§7 · 媒体 Media（figure + img + cap）──────────────── */
.media { margin: 0; }
.media__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;               /* §7 裁切比例库默认 */
  object-fit: cover;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.media__cap {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
  line-height: var(--lh-normal);
}
.media--4-3 .media__img   { aspect-ratio: 4 / 3; }
.media--band .media__img  { aspect-ratio: 21 / 9; }   /* 群组带（角色/帧）*/
.media--square .media__img{ aspect-ratio: 1 / 1; }    /* persona/avatar */

/* ── §5/§7 · 媒体网格 Media-grid ──────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--sp-3);
}

/* ── §5 · 正文 Lead / Small ───────────────────────────────── */
.lead  { font-size: var(--fs-h3); line-height: var(--lh-normal); color: var(--c-text-secondary); }
.small { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--c-text-secondary); }

/* ── §3 · 字体角色：serif 重音混排（§2.2 标志装置 #2）──────── */
.serif { font-family: var(--font-serif); }
.display-serif {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
/* display 标题里的重音：用更亮的橄榄绿（#648825·AA 4.13）让中文重音「看得见」
   —— body 级 .em 仍用深森林绿 #16453A（AAA）；display 级需更高彩度才显色差 */
.display-serif .em { color: #648825; }
/* 重音：serif 正体 + 深森林绿 + 字重（中文无斜体传统·禁假 italic 歪斜）。
   拉丁文重音如需斜体，另叠 .em--i（serif italic 仅对 Latin 字形成立）。*/
.em {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  color: var(--c-accent-deep);
}
.em--i { font-style: italic; }

/* ── 交互编排谱 Choreography ── ⚠ DEPRECATED（S81）──
   solution 页 6-段交互编排已改用「Figma Make 精修 SVG + 本地 scoped/var 整合」方案
   （见 p28 内联 `.p28-*` info-graph SVG · 与 p27/p30 同族信息图调性）。
   原 HTML .choreo 矩阵组件已撤（看着像 table，调性不及 SVG 信息图）——
   历史 standalone 实现留存于 `_handoff/p28_6段编排_standalone.html`。
   教训：实心色块 > 描边细线（信息图重心）；info-graph 走 SVG 不走 HTML 矩阵。 */

/* ── 决策溯源 编辑体行（Huuuu/きこえるいわて 式·编号 + 发丝线·替 pill 标签）──
   grid: 编号 | 决策 | → 依据（右）。读出「决策 → 洞察/数据」的逻辑链。 */
.trace-list { display: flex; flex-direction: column; gap: 2px; }
.trace-row {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 7px 2px;
  font-size: var(--fs-small);
}
.trace-row__n {
  flex: none;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--c-project, var(--c-accent)); font-weight: 600;
}
/* 决策→依据 = 一句流式陈述（依据 inline 紧跟·不右推·消除右栏 rag）*/
.trace-row__d { color: var(--c-text); }
.trace-row__e {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--c-project, var(--c-accent)); white-space: nowrap;
  margin-left: 4px;
}

/* ── §8 · p03 总览 bento（S107 · D1.1c 等宽定稿·user 冷判）──────
   四项目等权 2×2：罩色卡底(project 7% mix) + ghost 巨号(30% mix) + KPI 上位 46px。
   等宽 = 「目录页」语义诚实（ref: 目次01-08 / 商家开店01-03）·差异化交给罩色+ghost+卡内容。
   作用域 .p03-* 仅 p03 使用；lime 0 处（效果层留 Claude Design 轮）。*/
.p03-stack { margin-top: 16px; display: flex; flex-direction: column; gap: 24px; flex: 1; min-height: 0; }
.p03-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; height: 240px; }  /* 卡带两行 · 定高 240 */
.p03-card {
  position: relative; grid-column: span 6;
  border: 1px solid var(--c-border); border-radius: var(--r-md);  /* 14px 杂值归档（user 裁 r-md 随全册·S107）*/
  padding: 20px 24px; display: flex; min-height: 0; overflow: hidden;
  background: color-mix(in srgb, var(--c-project) 7%, var(--c-bg));   /* 罩色卡底·per-project hue */
}
.p03-card__content { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p03-ghost {
  position: absolute; top: -6px; right: 0;
  font-family: var(--font-mono); font-size: 72px; font-weight: 500;
  line-height: 1; letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--c-project) 30%, var(--c-bg));       /* 装饰编号·非信息文本 */
  pointer-events: none;
}
.p03-kicker { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-project); letter-spacing: .08em; }
.p03-kicker .en { color: var(--c-text-tertiary); }
.p03-titlerow { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-top: 10px; }
.p03-card h3 { margin: 0; font-size: 22px; line-height: 1.15; }
.p03-card h3 .en { color: var(--c-text-tertiary); font-weight: 400; font-size: var(--fs-small); font-family: inherit; }
.p03-pos { margin: 3px 0 0; font-size: var(--fs-caption); color: var(--c-text-secondary); }
.p03-label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-project); letter-spacing: .05em; }
.p03-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p03-tag {
  font-family: var(--font-mono); font-size: 10.5px; padding: 2px 8px;
  border-radius: 4px; border: 1px solid var(--c-border);
  color: var(--c-text-secondary); background: var(--c-bg-alt);
}
.p03-kpirow { margin-top: auto; display: flex; align-items: baseline; gap: 14px; }
.p03-kpi {
  font-family: var(--font-mono); font-size: 46px; font-weight: 600;   /* P-2 user 裁 600（A/B 三档冷判·守「大而不重」≤600 铁律）*/
  color: var(--c-accent-deep); line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
.p03-kpicap { font-size: var(--fs-caption); color: var(--c-text-secondary); }
.p03-close { height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.p03-photo { position: absolute; right: 20px; bottom: 18px; width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--c-border); z-index: 1; }  /* S114 user 拍板 M案：真图从 p02 归位目录卡（D1.1c 无图定稿的 user 自主修订·Gate0④真图·ref 目次页 cover art 语法）·absolute 零溢出·ghost 右上↔真图右下对角 */
p.p03-statement { margin: 0; font-family: var(--font-serif); font-weight: 500; color: var(--c-text); font-size: 25px; line-height: 1.4; text-align: center; }  /* p. 前缀防 .page--dark p (0,1,1) 压字号（master 611 同法）*/
.p03-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px; margin-right: 4px; }
.p03-dot--a { background: var(--c-hero-a); }
.p03-dot--b { background: var(--c-hero-b); }
.p03-dot--c { background: var(--c-hero-c); }
.p03-dot--d { background: var(--c-hero-d); }

/* ── §9 · p02 About 重心重建（S109 · B案+C档 user 冷判拍板·替代 S108 甲案 kicker）──
   症状（user 亲判）：核心能力被平铺卡阵稀释无重点；卡内视觉重心落在展开说明
   而非 6 能力 tag；中文优先级须大于英文翻译；SENSE SHOWCASE 真图板块抢语流。
   B案 = 去卡化 6 行能力索引：中文大字（fs-h3/600）= 第一读物 > EN mono 尾随
   > 说明（fs-xs 次级）> 证据（mono 三级）。lime kicker ×6 归主色（苔光 ≤5 回账）。
   C档右列强降权 = quote 去 lime 底（.p02-quote）。
   末端共底：space-between 松弛归行间（p06 洞察卡组同法先例）。
   S110-S116 历案（索引行/序号升档/showcase 索引条）已被 S117 替代·原文 git 可溯。
   S117 T案（user 拍板·ref 回溯校准「模块不是排字行」）：组成单位 = 有面容器——
   三主卡（镜像 h2 三主张·卡内 display 位 = lime 能力词·p02 禁 KPI = user 裁
   「全册数字饱和」）+ 次三小卡一行；lime 语义点 = 3 能力词 + quote 尾句 = 4 ≤5；
   showcase 已整节移除（真图归 p03 目录卡 44cd27c）。*/
.p02-stack { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); justify-content: space-between; }
.p02-pcard { display: flex; align-items: center; gap: 20px; padding: 16px 20px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.p02-pcard__num { font-family: var(--font-mono); font-size: var(--fs-h1); font-weight: 500; line-height: 1; color: var(--c-text-tertiary); letter-spacing: -0.03em; flex: 0 0 52px; }  /* 36→32=fs-h1 归档位（预览 36 为杂值） */
.p02-pcard__body { flex: 1; min-width: 0; }
.p02-pcard__kw { font-size: 22px; font-weight: 600; color: var(--c-accent); line-height: 1.25; }  /* 22px = p03-card h3 同档先例 */
.p02-pcard__en { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-tertiary); letter-spacing: .08em; margin-left: 10px; }
p.p02-pcard__desc { margin: 4px 0 0; font-size: var(--fs-small); color: var(--c-text-secondary); line-height: 1.5; }  /* p. 提位防 .page--dark p 压字号（p03-statement 同法） */
p.p02-pcard__ev { margin: 3px 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-tertiary); }
.p02-scard__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-tertiary); margin-right: 8px; }
.p02-scard__kw { font-size: var(--fs-body); font-weight: 500; color: var(--c-text); }
p.p02-scard__desc { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-text-tertiary); line-height: 1.45; }

/* ── S119 Z2 定稿（user 三轮拍板 X→Z→Z2·六维度迭代·.p02-srow/.p02-scard 容器类已无引用即删）──
   节奏阶梯（维六）= 全宽主卡(46px 锚)→对半双卡→分组横带→分体薄带；
   关系层（维四）= 左缘虚线脊+节点（warm ramp 灰阶·预览 JS 量点→定版伪元素静态化）；
   图形化（维五收敛）= 01 闭环环形图 + 右列双线交叉图（quote 结论画成图）+ 钩子句胶囊。
   lime 账：3 能力词 + 钩子胶囊 + 交叉节点 = 5 ≤5。
   杂值归档（S107 对账纪律）：半卡序号 18→fs-h3 / 半卡 padding→sp-3+sp-4 /
   横带胶囊 10→fs-xs / hl 16=fs-body / 胶囊圆角 6→r-sm；46px = p03-kpi 同档。*/
.p02-pcard--lead { flex: 1.15; }
.p02-pcard--lead .p02-pcard__num { font-size: 46px; flex: 0 0 76px; }
.p02-pcard--lead p.p02-pcard__desc { text-wrap: balance; }  /* 孤字治理（S109 balance 同法） */
.p02-loop { flex: 0 0 192px; height: auto; align-self: center; }  /* S123 user 判 128 版面比例失调 → 192 环径吃满卡内高（卡高不变·文案不重排实测） */
.p02-pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.p02-hcard { padding: var(--sp-3) var(--sp-4); background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-md); display: flex; flex-direction: column; justify-content: center; }
.p02-hcard__num { font-family: var(--font-mono); font-size: var(--fs-h3); color: var(--c-text-tertiary); letter-spacing: -0.03em; margin-right: 10px; }
.p02-gband { display: flex; align-items: center; gap: 10px; }
.p02-gband__cap { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--c-text-tertiary); border: 1px solid var(--c-border); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.p02-gband__line { flex: 1; border-top: 1px dashed var(--c-warm-400); }
.p02-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--c-border); border-radius: var(--r-md); }  /* 无 overflow:hidden——会裁掉容器外 -18.5px 的 ::before 脊线节点；内部分隔为纵向内线不穿圆角 */
.p02-strip__cell { padding: 10px 14px; }  /* = 原 .p02-scard padding 同值 */
.p02-strip__cell + .p02-strip__cell { border-left: 1px solid var(--c-border); }
.p02-xdiag { padding: var(--sp-1) 0; }
.p02-xdiag svg { display: block; width: 100%; height: auto; }
.p02-xdiag text, .p02-loop text { font-family: var(--font-mono); }  /* SVG 属性值不解析 var()·font 走 CSS */
.p02-stack--spine { position: relative; padding-left: 22px; }
.p02-stack--spine::before { content: ''; position: absolute; left: 7px; top: 38px; bottom: 32px; border-left: 1.5px dashed var(--c-warm-400); }
.p02-node { position: relative; }
.p02-node::before { content: ''; position: absolute; left: -18.5px; top: 34px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-bg); border: 1.5px solid var(--c-warm-600); z-index: 1; }
.p02-node--mid::before { top: 50%; margin-top: -4px; }
.p02-hl { color: var(--c-accent-deep); background: color-mix(in srgb, var(--c-accent) 14%, transparent); border-radius: var(--r-sm); padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: var(--fs-body); font-weight: 500; }  /* S112 lime 钩子 → S119 句中胶囊 + 收口升重（fs-body 归档） */
.page--dark .highlight-quote.p02-quote { background: transparent; padding-top: var(--sp-1); padding-bottom: var(--sp-1); }  /* specificity 0,3,0 压 master L587 深底基 */

/* ── §10 · p05 剖面立论页（S128 · Gate 0.5 草图批准 W1 + 实现冷判 V2 定稿·SK-6 候选骨架）──
   穹顶剖面 SVG 内联于 index（无 id 件·类前缀 p05w-）；弧 ramp 由外向内升亮 = 亮是挣来的。 */
.p05w-cap { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--c-text-tertiary); border: 1px solid var(--c-border); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }  /* 物件名签胶囊 = .p02-gband__cap 同值（同构论证：均为「具名物件」命名件·冷判台账 S128） */
.p05w-hl { color: var(--c-accent-deep); background: color-mix(in srgb, var(--c-accent) 14%, transparent); border-radius: var(--r-sm); padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-weight: 500; }  /* 句中胶囊 = .p02-hl 同值（不设 font-size·随载体：注释行 fs-xs / 收口带 fs-body）·跨页第 2 例·DS 收口时可合并升全局 */
.p05w-dome text { font-family: var(--font-mono); }  /* SVG 属性值不解析 var()·font 走 CSS（.p02-xdiag 同法） */
.p05w-ctitle { margin: 0; font-size: var(--fs-h4); font-weight: 600; color: var(--c-text); line-height: 1.15; }  /* 三张力卡标题（S129b J1b·层名主导领读=同构 p02 用研闭环大标题·映射穹顶挂签）·S133d 微档转正：18px 入档 --fs-h4（user 裁「标题层非正文层」·冷判史 b17ac25c R5.1 判 20 偏大/16 领读不够） */

/* ── §2 · 人格层（适度 · 仅封面/About/章节）───────────────────
   拟物散点 + 手绘虚线注 = Phase 2 随封面样板页落地（避免现在臆造）。
   占位锚：.scatter（散点容器）· .leader-note（手绘虚线注）留待 Phase 2。 */