/* ══════════════════════════════════════════════════════════════════
   figart-r34.css — 关于我们 / 加入我们:插图换笔法(2026-09-25 第二轮)

   与 r33 的差别只有**笔法**,判断一条没改:
   仍然只有 4 张图(about#what / about#governance /
   careers#work / careers#structure),其余 8 个模块仍然不要图,
   r33 的排版补偿(见文末 §F)原样带过来。

   换掉的那一层
   ─────────────
     r33:玻璃是画面里的一个个小牌子,字写在牌子上,图元是通用几何件。
     r34:玻璃是**装着整张图的外层图版** .fig-plate(配方直接用
          home-v6.css 里那一份,本文件**一个字都不重抄**),
          图版里装一张 inline SVG 线描图,**SVG 里一个字都不写**,
          名字走图版下方的 .fig-legend。

   ⛔ 为什么这里看不到 .fig-plate 的定义
   ─────────────
     它住在 home-v6.css。两页 <head> 里在本文件**之前**引入了它。
     抄一份到这里 = 两份配方,首页改了这里不会跟着改 —— 那正是
     「全站故意一套」要防的事。本文件只写 home-v6.css 里没有的东西。

   本文件只做四件事
   ─────────────
     §1 给四节铺环境光(玻璃的前提:平底色上开 blur 等于没开)
     §2 图版尺寸与断点(宽版 / 竖版,两版都在 DOM 里,由媒体查询切)
     §3 r34 新增的 fx-* 图元类(home-v6.css 里没有的那几件)
     §F r33 的排版补偿,原样继承

   配色零新增:一个 hex 都没有,全部 var(--c-*) + color-mix。
   --c-accent-500 本文件一次都没用(它全站只留给「具名问责」)。

   回退:两页 <head> 里换回 figart-r33.css 那一行 + 两页里的 .fg34 块。
   ══════════════════════════════════════════════════════════════════ */

/* ══ §1 · 环境光:玻璃的前提 ════════════════════════════════════════
   backdrop-filter 要有东西可糊。这四节原来是纯平底色,
   直接放图版的话「开了模糊」和「没开模糊」在像素上分不开
   —— 那样毛玻璃就只是源码里的一行字,不是画面上的一件事。
   照 home-v6.css §环境光 的做法:每节两团大而软的光斑,
   用 background-image 叠加,不碰各节原有的 background-color。
   浓度取首页那一档(primary-500 11–15% / primary-600 7–9%),
   位置各节不同,免得四节看起来是同一张底。

   ⚠️ 光斑位置**不是照着感觉丢在角上的**,是量出来的。
   第一版把四团主光都放在各节顶部(y 2%–8%),而牌实际落在:
       about#what 24–44% / about#governance 66–92%
       careers#work 29–61% / careers#structure 26–69%      (where.mjs 实测)
   —— 牌整个泡在光斑的**平尾巴**里。结果毛玻璃像素闸四档 16 张里红了 4 张,
   红得最惨的正是离光最远的 careers#work(牌内变化占比 7.74%,首页参照是 15.43%)。
   模糊糊的是**明暗的落差**,不是亮度本身:光斑再亮,只要牌底下是平的,
   16px 的核就什么都糊不出来。
   所以这一版把每节主光挪到**牌自己那条横带上**,并且把竖向半径收窄
   (原来 42–50% → 现在 34–36%),让落差最陡的那一圈正好横穿牌面。
   横向位置仍然四节各不相同,底还是四张不同的底。 ══════════════════════ */
.page-about   #what,
.page-about   #governance,
.page-careers #work,
.page-careers #structure { position: relative; }

/* 牌 y 24–44% ⇒ 主光落 30% */
.page-about #what {
  background-image:
    radial-gradient(54% 34% at 22% 30%, color-mix(in srgb, var(--c-primary-500) 14%, transparent), transparent 70%),
    radial-gradient(54% 44% at 90% 70%, color-mix(in srgb, var(--c-primary-600) 8%,  transparent), transparent 72%);
}
/* 牌 y 66–92% ⇒ 主光落 78% */
.page-about #governance {
  background-image:
    radial-gradient(56% 34% at 74% 78%, color-mix(in srgb, var(--c-primary-500) 12%, transparent), transparent 70%),
    radial-gradient(50% 42% at 8%  22%, color-mix(in srgb, var(--c-primary-600) 7%,  transparent), transparent 74%);
}
/* 牌 y 29–61% ⇒ 主光落 36%(上一版在 6%,是红得最惨的一节) */
.page-careers #work {
  background-image:
    radial-gradient(52% 34% at 84% 36%, color-mix(in srgb, var(--c-primary-500) 13%, transparent), transparent 70%),
    radial-gradient(52% 44% at 6%  84%, color-mix(in srgb, var(--c-primary-600) 8%,  transparent), transparent 72%);
}
/* 牌 y 26–69% ⇒ 主光落 40% */
.page-careers #structure {
  background-image:
    radial-gradient(56% 36% at 14% 40%, color-mix(in srgb, var(--c-primary-500) 13%, transparent), transparent 70%),
    radial-gradient(56% 46% at 92% 86%, color-mix(in srgb, var(--c-primary-600) 9%,  transparent), transparent 72%);
}

/* ══ §2 · 图版尺寸 ═════════════════════════════════════════════════
   尺寸不是抄首页那个 viewBox 数字来的,是**量出来的**:
   容器内宽实测 1440→1136 / 1024→976 / 768→720 / 375→343。
   图版内距 --s-6 = 32,所以 SVG 实际渲染宽 = 图版宽 − 64。
   宽版 viewBox 定 860,于是把图版封顶在 924 ⇒ 1440 与 1024 两档
   SVG 都正好渲染在 860 CSS px,缩放比 1.00 —— 线宽就是设计线宽。
   768 档容器只有 720,图版通栏、内距收到 --s-5 ⇒ SVG 672,比例 0.78,
   还在能看的范围。
   375 档容器 343、内距 --s-4 ⇒ SVG 311:宽版拿到这里会被压成 108 高
   的一条缝(这正是 r33 文件头记下来的那个病),所以 <768 换**竖版**
   viewBox(宽 340),比例 0.91,同样接近 1:1。
   ⚠️ 宽版竖版画的是**同一批图元**(同一份 objects.py),不是各画各的。 */
/* ⚠️ `inline-size:100%` 这一行不是保险起见,是实测出来的必需项:
   #what 的 .container 是 typo-v2 定的 grid。在 grid 里,只要行内方向上
   有一个 `margin:auto`,项目的 justify-self:stretch 就失效、退回按内容
   算宽(fit-content),auto 边距再去吃掉剩下的空间。
   实测后果:图版在 1440/1024 两档只有 **366px** 宽,宽版 SVG 被压成
   300×104.6 的一条缝 —— 正是 r33 文件头记下的那个病又从另一条路回来了。
   写死 inline-size:100% 之后,盒子先占满轨道、再被 max-inline-size 收到
   924,auto 边距只负责居中。#governance 的 .container 是普通块级,
   本来就没事 —— 所以这条只在 #what 上暴露,最容易漏掉。 */
.fg34 {
  margin-block: var(--s-8);
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: 924px;
}
@media (max-width: 1023.98px) {
  .fg34 { max-inline-size: none; padding: var(--s-5); }
}
@media (max-width: 767.98px) {
  .fg34 { padding: var(--s-4); margin-block: var(--s-7); }
}

/* ⚠️ 特异度陷阱:home-v6.css 有 `.fig-plate svg{display:block}`(0,1,1)。
   这里若只写 `.fg34__tall{display:none}`(0,1,0) 会被它压掉 ——
   而且压掉时的表现是「两张图叠着一起出现」,看着像我多画了一张。
   所以下面两条都带上 `.fig-plate svg` 前缀,把特异度抬到 (0,2,1)。 */
.fig-plate svg.fg34__tall { display: none; }
@media (max-width: 767.98px) {
  .fig-plate svg.fg34__wide { display: none; }
  .fig-plate svg.fg34__tall { display: block; }
}

/* ══ §3 · r34 新增图元类 ═══════════════════════════════════════════
   判据(home-v6.css r28 那段注释):每个类必须对应**一件具体的东西**,
   「圆角框 + 一颗蓝药丸 + 几条灰线」那种占位件一件都不许有。
   下面六个类各自是什么,写在名字后面。
   语义沿用站上既有分工,且**颜色差同时是形状差**:
     机器 / 智能体执行 = 冷蓝 var(--c-primary-*) + 圆
     人 / 裁量 / 具名   = 中性亮 var(--c-text)    + 方
   颜色失效(高对比模式、色觉差异、黑白打印)时,圆与方仍然分得开。 */

/* 具名的那个人:一枚**实心方**。它出现在哪,哪一件事上就挂着一个人。 */
.fig-plate .fx-hand   { fill: color-mix(in srgb, var(--c-text) 76%, transparent); stroke: none; }
/* 同一枚方,**空心** = 这个位置该有人、但还没有人(或拿不走、改不动)。 */
.fig-plate .fx-hand-o { fill: none;
                        stroke: color-mix(in srgb, var(--c-text) 60%, transparent);
                        stroke-width: 1.5; }
/* 一条**已封存的记录**:有实体的面、有闭合的边,不是一条灰线。 */
.fig-plate .fx-filed  { fill: color-mix(in srgb, var(--c-border-strong) 20%, transparent);
                        stroke: color-mix(in srgb, var(--c-border-strong) 48%, transparent);
                        stroke-width: 1; }
/* 一个**还空着的档格**:只有虚线的轮廓,里面什么都没有。 */
.fig-plate .fx-slot   { fill: none;
                        stroke: color-mix(in srgb, var(--c-border-strong) 44%, transparent);
                        stroke-width: 1; stroke-dasharray: 3 4; }
/* 一道**真的手写笔迹**。用 --c-text-2 而不是 --c-text:签字是人留下的痕,
   不该比它签的那份东西还亮。 */
.fig-plate .fx-sign   { fill: none; stroke: var(--c-text-2); stroke-width: 1.6;
                        stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
/* 一条**分工线 / 一道墙**:比图里任何线都实、都厚,因为它是结构不是装饰。 */
.fig-plate .fx-divide { stroke: color-mix(in srgb, var(--c-text) 34%, transparent);
                        stroke-width: 2; stroke-linecap: round; }
.fig-plate .fx-wall   { fill: color-mix(in srgb, var(--c-text) 26%, transparent); stroke: none; }
/* 一块**被圈起来的域**(风险域):有边界、有自己的底,进去了就受另一套规矩。 */
.fig-plate .fx-zone   { fill: color-mix(in srgb, var(--c-primary-600) 6%, transparent);
                        stroke: color-mix(in srgb, var(--c-border-strong) 32%, transparent);
                        stroke-width: 1; }

/* ══════════════════════════════════════════════════════════════════
   §F · 判「不要图」的模块:撤图之后的排版补偿(r33 原样继承)

   Yannie:「并非所有板块都要有插图,但每个模块的排版……要适合。」
   撤图不是把一块画面挖空就完事 —— 下面每一条都对着一处实测出来的洞。
   本文件在 <head> 里排在 about-careers-layout-r32.css **之后**,
   否则 §F.2 会被 r32 同特异度的规则压掉(实测过,不是推测)。
   ══════════════════════════════════════════════════════════════════ */

/* ⚠️ 本节的特异度陷阱(踩过,写在最前面)
   typo-v2.css §1 有一条通栏令
     `.page-careers #who > .container > :not(.section__head):not(.figmark)`
   两个 :not() 各按一个 class 记 ⇒ (id 1, class 4)。本文件排在它后面,
   但「后来居上」只在**同特异度**时成立。所以下面凡是要给某个子块重新
   定列的,都得把特异度抬到 ≥4 个 class —— 我用的办法是原样带上那两个
   :not(),既够特异又自带出处。别图省事写 `> .rows`(只有 3 个 class),
   它会被那条通栏令压掉,而且压掉时**布局看着像生效了一半**,最难查。 */

/* F.1 · 空轨道的 48px 白吃(about#what / about#vision)
   typo-v2.css §1 把四节的 .container 做成 `minmax(0,1fr) auto` 两栏,
   第二栏专放那张 330 宽的侧图。图撤掉之后第二栏塌成 0,**但 column-gap
   还在**:实测内宽 1136 → 第一栏只拿到 1088,平白丢 48。
   这两节撤图后内容本来就是通栏的,收回单栏即可。
   careers#who / careers#apply 不在这里 —— 它们的洞不是 48px 能补的,
   见 F.2 / F.5。 */
@media (min-width: 1024px) {
  .page-about #what   > .container,
  .page-about #vision > .container {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
}

/* F.2 · careers#who:撤图之后,这张对照表就是整个模块
   原先节头右边有一条侧图,表只是图下面的注脚,所以表用注脚字号是合理的。
   图撤掉之后实测:表 494 宽躺在 1136 里(43%),右边 642px 全空,
   而收束那两句话又老老实实排在表底下 —— 这才是真的塌。

   不把表拉宽:r32 已经论证过,拉到 1fr 会在表**内部**留 369px 空白,
   横分隔线一路画到 903,反而把「右半边是空的」显示得更清楚。

   两件事:
   ① 把表提到主角的字号 —— 左半句上到 h3,右半句上到正文,
      对照轴的沟从 40 开到 64,一对句子之间要看得见那条轴;
   ② 把收束那两句从表底下挪到**表右边、与表垂直居中**。
      它本来就是对三条特质的限定语("不一定什么都懂,但……"),
      放在旁批的位置读起来比垫在底下更对。正文一个字没动,只换了位置。
      右栏实得 1136−494−64 = 578,实测两句各 ~400 宽,不折行。 */
@media (min-width: 768px) {
  .page-careers #who .rows--pair       { column-gap: var(--s-9); }
  .page-careers #who .rows--pair .row  { column-gap: var(--s-9); padding-block: var(--s-6); }
  .page-careers #who .rows--pair .row__name  { font-size: var(--fs-h3); }
  .page-careers #who .rows--pair .row__state { font-size: var(--fs-body); }
}
@media (min-width: 1024px) {
  .page-careers #who > .container {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--s-9);
    align-items: start;
  }
  .page-careers #who > .container > .section__head { grid-column: 1 / -1; grid-row: 1; }
  .page-careers #who > .container > .rows:not(.section__head):not(.figmark) {
    grid-column: 1; grid-row: 2;
  }
  .page-careers #who > .container > .body:not(.section__head):not(.figmark) {
    grid-column: 2; grid-row: 2;
    align-self: center;
    margin-block-start: 0;   /* r32:506 给的是 --s-9,那是「垫在表底下」时的节奏 */
  }
}

/* F.3 · about#boundary:六条誓言撤图后要自己站住
   整版图 + 图例(那条自相矛盾的图例)一起撤掉之后,节头与六宫格之间
   只剩卡片自己的外边距,读起来是「标题贴着表格」。补一段起势。 */
.page-about #boundary .section__head { margin-block-end: var(--s-9); }

/* F.4 · 两页 lead 节:撤掉整块 section__bg 之后不补任何东西
   这一节只有两行字,原先压着一张通栏底纹。实测撤前撤后节高都是 160px
   —— 底纹是绝对定位的背景层,不占流,撤掉不产生洞,**故不补**。
   这一条写在这里是为了说明「已经查过、确认不需要」,不是漏了。 */

/* F.5 · careers#apply:表单节的洞**大部分不是这一轮挖的**,但得一起收了
   撤图前这一节右上角有一枚 220×55 的 faint 记号(实渲 ~215×160),
   压在 1043 高的容器顶上 —— 也就是说右栏下面那 880px 本来就是空的,
   我只是把顶上那一枚也拿掉了。实测:form 640 宽(site.css:814 的
   `.form{max-width:640px}`,不是我定的)靠左躺在 1136 里,
   右边 496 宽 × 1300 高全空。一个表单不该、也不能拉到 1136 宽,
   所以补法不是把表单撑大,是**给右边那半找回它该有的内容**。

   办法:节头(眉标 + 标题 + 导语)挪到左栏,表单挪到右栏。
   这是表单页的常规排法:左边说「这是什么、填了会怎样」,右边是动作区。
   432 + 64 + 640 = 1136,一像素不剩。正文一个字没动、表单结构没动,
   只换了两个块的列位。
   左栏 432:标题实测自然宽 720 ⇒ 在 432 里折成两行,导语 714 ⇒ 折两行,
   都在 .section__head 自己的 max-width 之内,不会溢出。
   <1024 自动回到上下堆叠(本规则在媒体查询里),窄屏没有 432 可分。 */
@media (min-width: 1024px) {
  .page-careers #apply > .container {
    grid-template-columns: minmax(0, 1fr) 640px;
    column-gap: var(--s-9);
    align-items: start;
  }
  .page-careers #apply > .container > .section__head { grid-column: 1; grid-row: 1; }
  /* 表单外面那层 div 没有 class,只能靠 :not() 选 —— 正好也是抬特异度要的形状 */
  .page-careers #apply > .container > :not(.section__head):not(.figmark) {
    grid-column: 2; grid-row: 1;
  }
}


/* ══ G · about#governance:四步与图合成一块牌(2026-09-26,Yannie 当面定的「结合」)══

   改前实测(1440):四步的字排到 x=745 就没了,右边 568px 空着 431px 高;
   牌另起一块 924 宽躺在下面,牌下图例是「识别/裁定/记录/复盘/更新规则」
   —— 与上面四步同一批词。同一件事说两遍,中间断开,这就是「散」。

   做法:把 <div class="rail"> 整块搬进 <figure>,放在两张 SVG 下面,
   删掉那行 .fig-legend(它的词已经由四步的标题承担)。正文一个字没动,只换位置。

   ⚠️ 这一条与 r32 §4 的结论相反,是**有意的**,理由必须写下来:
   r32 把四步定死成竖梯,理由是「横过来就是四个等大方框 = 读成四件并列的事,
   而它上面那三条 .card 才是并列」。那条理由在**四步单独成块**时成立。
   搬进牌之后不成立了:四步正下方顶着的那幅画,四组图形之间有箭头、底下还有
   一条回到第一组的回路 —— 串行由画面承担,序号 1-4 仍在,四栏不再是「并排的框」
   (无边框、无底、无卡壳)。若日后把 .fg34--combo 摘掉,r32 的竖梯会原样回来。

   对齐:画面四组的横向中心在 860 viewBox 里是 95 / 300 / 522 / 712
   ⇒ 占比 .110 / .349 / .607 / .828;四等分列的中心是 .125 / .375 / .625 / .875。
   最大偏差 .047(1136 宽上 ≈53px),实拍确认读得出对应关系,故用四等分,
   不写死不等宽的列 —— 不等宽列一换语言就错位。 */

.fg34--combo { max-inline-size: none; }

/* 画 → 字 之间的分界,沿用 .fig-legend 原来那条线的做法 */
.fg34--combo .rail {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid color-mix(in srgb, var(--c-border-strong) 40%, transparent);
}

@media (min-width: 768px) {
  /* (1,5,0) 压过 r32 §0 的 (1,4,0) */
  .page-about #governance .fg34--combo .rail.rail--on .rail__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--s-6);
    row-gap: 0;
  }
  /* 序号压在标题上方,让它落在对应那组图形的正下方 */
  .page-about #governance .fg34--combo .rail.rail--on .flow__step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
    padding-block: 0;
  }
  /* 竖连接轨取消:串行已经由上面那幅画的箭头与回路承担 */
  .page-about #governance .fg34--combo .rail.rail--on .flow__step:not(:last-child)::before {
    content: none;
  }
  /* --measure 是为单栏长行定的,四栏里会把列撑不开 */
  .page-about #governance .fg34--combo .flow__body { max-width: none; }
}

/* 序号盒底色是 --c-canvas(为盖住竖轨而设)。轨没了,而玻璃牌上一块不透明的
   底色会现出一个方块 ⇒ 透明。 */
.fg34--combo .flow__marker { background: transparent; }