/* ============================================================================
   typo-v2.css —— 排版复优化(2026-09-22,第 1 棒 / UI-UX)
   基于 2026-09-21「全站排版节奏统一」继续收,不推翻那一轮的四档 padding 角色。
   本文件只追加,不修改既有样式表;要回退,删掉六页的 <link> 即可。

   收录原则(与上一轮同):
   - 断点只改 :root 自定义属性或做局部布局,**不再出现裸 .section 选择器**
     (媒体查询不加权重,裸 .section 会把修饰类压掉 —— 上一轮最贵的坑)。
   - 每一条都附实测差值;没量过的不写进来。
   ========================================================================== */


/* ── § 1 · 图注记号与节头并排 ────────────────────────────────────────────
   现状:.figmark(330×110,0 字)自己占一整行,而它上面的节头被
   `.section__head .body{max-width:40em}` 压在 720px —— 1136px 的容器里
   右侧恒空 416px。330 < 416,放得下。
   并排后 .figmark 的纵向高度与外边距全部归零,内容一个字没动。
   实测(1440):about#what −158、about#vision −118、careers#who −158、
                careers#apply −103。四处均无折行变化、无横向溢出。
   只在 ≥1024 生效 —— 窄屏没有那 416px 空当,并排会把两边都压瘪。      */
@media (min-width: 1024px) {
  .page-about   #what    > .container,
  .page-about   #vision  > .container,
  .page-careers #who     > .container,
  .page-careers #apply   > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-8);
    align-items: start;
  }

  .page-about   #what    > .container > .section__head,
  .page-about   #vision  > .container > .section__head,
  .page-careers #who     > .container > .section__head,
  .page-careers #apply   > .container > .section__head { grid-column: 1; }

  /* grid-row:1 是必须的:#vision / #apply 里 .figmark 在 DOM 上排第三,
     不显式放行会被自动排到第三行,又回到「自己占一行」。 */
  .page-about   #what    > .container > .figmark,
  .page-about   #vision  > .container > .figmark,
  .page-careers #who     > .container > .figmark,
  .page-careers #apply   > .container > .figmark {
    grid-column: 2;
    grid-row: 1;
    margin-block: 0;
    align-self: center;
  }

  /* 其余子块回到通栏,否则会被挤进第一列(宽度少 330+64)。 */
  .page-about   #what    > .container > :not(.section__head):not(.figmark),
  .page-about   #vision  > .container > :not(.section__head):not(.figmark),
  .page-careers #who     > .container > :not(.section__head):not(.figmark),
  .page-careers #apply   > .container > :not(.section__head):not(.figmark) {
    grid-column: 1 / -1;
  }
}


/* ── § 2 · 节头导语的列宽:26em → 34em ──────────────────────────────────
   pages-v1.css:123 给 .section__head .lead 定的是 26em;在 21px 字号下
   = 546px,而同一节头里的 h2 是 20em×36px = 720px —— 导语右缘比标题
   短 174px,读成「标题之下另起了一栏」。上一轮(site.css §J)已把
   .section__head .body 收到 40em 与 h2 对齐,但 p.body.lead 同时命中
   pages-v1 那条 26em、且它在后面,所以那次对齐**对带 .lead 的那批没生效**。

   34em × 21px = 714px,距 h2 的 720px 差 6px —— 与上一轮同一条取舍:
   不为 6px 发明第四个数(要严丝合缝得写 34.2857em,不在任何尺度上)。

   顺带把一行容量从 26 字抬到 34 字,四条导语各少折一行,劈词随之消失。
   实测(1440):index −34、services −101、how-it-works −67、markets ±0。
   全部折行变化都是「行数减少」,无新增折行。
   about / careers 实测 ±0 —— 它们的导语是硬切好的 .seg,列宽不参与断行。 */
@media (min-width: 1024px) {
  .section__head .lead { max-width: 34em; }
}


/* ── § 3 · 市场页数据指标条在 600–767 之间排两列 ───────────────────────
   site.css:995 让 .cards--2/3/4 在 ≥768 变两列,于是 720 档是**单列**。
   (市场页重构说明里写的「720 两列」对不上:那条规则的起点是 768,不是 720。)
   后果:四张 16–20 字的指标卡,每张摊到 673px 宽、竖着堆四层 = 684px。

   ⚠ 这条**只给市场页的指标条**,不动 .cards--4 本身:
   同一个 .cards--4 在首页装的是 60–90 字的能力卡,实测把它一起改成
   两列会让首页 8 处正文多折行(卡宽 480→275)。**一个类名同时承担
   「四列栅格」和「内容类型」两件事,是这套卡片组件的真实缺陷** ——
   根治要给指标条一个自己的最小宽度(见交付说明「留给下一轮」)。
   实测(720):markets#scale 764 → 410(−354),无折行变化。          */
@media (min-width: 600px) and (max-width: 767px) {
  .page-markets #scale .cards--4 { grid-template-columns: repeat(2, 1fr); }
}


/* ── § 4 · 中文断行:窄屏也要能切段 ────────────────────────────────────
   pages-v1.css:367 那条 `.seg{display:block}` 只在 ≥860 生效,于是窄屏
   连 about / careers 也照劈。中文可在任意两字之间断行,靠列宽是治不住的,
   只能把句子按标点切成「一定装得下」的语段。

   这里改用 inline-block 而不是 block:
   - block  = 每段强制独占一行(段数 = 行数),窄屏上段数一多就全是半截行;
   - inline-block = 段内不可断,段间照常流动 —— 行数由列宽决定,
     但**永远不会在段中间劈开**。窄屏要的正是后者。
   ≥860 维持既有的 block(那是上一轮定死的版式,改成 inline-block 会
   让宽屏上的手工断行位置全部失效)。

   ⚠ 只列**真的存在 .seg 的四处**。上一版这里还列了 index/services/how 的
   .lead .seg、.page-about h2 .seg 等七条,全站一个元素都匹配不到 —— 那是我
   照着「打算要插的地方」写的,不是照着「插了的地方」。已删,别再照抄回来。
   hero h1 的 .seg 是**对句**(「状态可自动 / 裁定必人工」),必须永远一段一行,
   所以不在这张表里:让它保持基线的 block。

   ⚠ `.page-about .lead .seg` 从这张表里拿掉了(2026-09-22 实测):
   inline-block 会让装不下的整段整体下移,于是「不劈词」是拿行数换的。
   逐条量过 @375 —— hero .sub 0px、careers .lead 0px、markets hero .sub 0px,
   唯独 about .lead 要 **+57px**(#what +28、#vision +29),而它只保住一段
   「并将持续拓展资产类型」。about 是本轮最空的一页,这 57px 不值当。
   口径与 §5 一致:**白送的保护就要,要拿行数换的就不买。**              */
@media (max-width: 859px) {
  .page-about   .hero .sub .seg,
  .page-careers .lead .seg,
  .page-markets .hero .sub .seg {
    display: inline-block;
  }
}


/* ── § 5 · 中文断行的主治手段:.flowseg ─────────────────────────────────
   做法:在正文的标点后切段,每段包一个 <span class="flowseg">,段设
   inline-block ⇒ **段内不可断,段间照常流动**。于是换行只可能落在标点后,
   劈词从机制上消失,而不是靠人工挑位置。

   为什么是 inline-block 而不是 block:
   对「盒子不可再切」的排版,贪心装箱(能塞就塞,塞不下整段下移)**就是行数
   最少的解**。所以按每个标点都切,行数不会比现在多,而且同一套切法在
   860～1920 任何宽度上自适应 —— 不用为每个断点各写一份版式。
   block 则是强制一段一行,切得越细行数越多,正好相反。

   ⛔ 为什么 <860 不治(这是本轮明写的「不治」之一):
   375 实测一行只放得下 ~18 字,而中文自然语段普遍 20～30 字。逐块量过:
   index hero 与 #why +1 行、services #payments +1 行、how 导语 / #path / #results
   各 +1 行,页脚法务块 +1～+2 行;services #trading / #insight / #more 与
   页脚「地域限制」第一段**根本无解** —— 它们有单个语段本身就超过一行宽,
   切了也还得在段内断。窄屏的纵向空间比宽屏金贵,拿 6～8 行去换几处断行位置
   不划算,所以 <860 维持现状的自然断行。                                  */
@media (min-width: 860px) {
  .flowseg { display: inline-block; }
}