/* ==========================================================================
   sections.css — 各段落版式

   影像的用法（贯穿全站的一条规矩）：
   素材只以「整块画面」出现——满幅背景、满幅过场、成对对照、无缝场景墙。
   永远不做带边框的缩略图网格：那一看就廉价。
   所有影像统一调色（去饱和 + 压暗 + 提对比），让全站像同一部片子。
   ========================================================================== */

/* 全站影像统一调色 */
.mosaic video, .split__v, .band__v { filter: var(--grade); }

/* ══════════ 导航 ══════════ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: transform var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.nav.is-hidden { transform: translateY(-101%); }
.nav.is-stuck  { border-bottom-color: var(--hair); }

/* 压在影像或黑色段落上时整体反色，不留一条白条 */
.nav.is-dark {
  background: rgba(10, 10, 10, .55);
  color: var(--on-dark);
  border-bottom-color: transparent;
}
.nav.is-dark.is-stuck { border-bottom-color: var(--hair-dark); }
.nav.is-dark .nav__links a { color: var(--on-dark-mute); }
.nav.is-dark .nav__links a:hover, .nav.is-dark .nav__cta { color: var(--on-dark); }
.nav.is-dark .nav__lang { border-color: var(--hair-dark); color: var(--on-dark-mute); }

.nav__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav__mark { font-size: .82rem; letter-spacing: .2em; font-weight: 500; flex-shrink: 0; }
.nav__mark:lang(zh) { letter-spacing: .3em; }

.nav__links { display: flex; gap: 2.2rem; margin-inline: auto; }
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a:lang(zh) {
  font-family: var(--font-cjk); letter-spacing: .2em;
  text-transform: none; font-size: .78rem;
}
.nav__links a:hover { color: var(--ink); }

.nav__act { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.nav__lang {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em;
  color: var(--ink-mute); padding: .45em .8em; border: 1px solid var(--hair);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.nav__lang:hover { color: var(--ink); border-color: currentColor; }
.nav__cta {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: .25em;
}
.nav__cta:lang(zh) {
  font-family: var(--font-cjk); letter-spacing: .2em;
  text-transform: none; font-size: .8125rem;
}

/* ══════════ HERO：满幅影像 + 压在上面的主张 ══════════
   占满整屏。曾经是 92svh——故意矮 8%，让下一段的白色从底部露一条，
   当"下面还有内容"的暗示。但 SCROLL 指示器撤掉之后，那条白边成了唯一的暗示，
   看着就是首屏底下多了一道白，已否掉。
   文字仍然靠底（align-items: flex-end），底部留白 13vh：
   10vh 太贴下沿、还骑在拼贴接缝上；18vh 又在下方空出一大条。 */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 14vh 13vh;
  background: var(--black);
  color: var(--on-dark);
  overflow: hidden;
}
/* 影像上再压一层渐变，保证文字在任何一帧上都读得清 */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(10,10,10,.96) 0%, rgba(10,10,10,.82) 38%, rgba(10,10,10,.66) 100%);
}
.hero__in { position: relative; z-index: 2; }

/* 首屏标题：比通用 t-mega 大一档、行距也松一档。
   大一档是为了填首屏——三行标题加一行引导语本来就撑不满一屏，
   靠挪位置只是把空白从上面搬到下面，得让字本身占更多面积。
   行距反而要比段落陈述松：英文那三行有 p/g/y 的下伸和 h/d/f 的上伸，
   .96 时两行几乎咬在一起。中文 1.14 / 英文 1.06 是量过的下限。 */
.hero__h {
  font-size: clamp(2.6rem, 6.9vw, 6.6rem);
  line-height: 1.06;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.1rem);
}
:root[lang='zh'] .hero__h {
  font-size: clamp(2.3rem, 6.2vw, 6.2rem);
  line-height: 1.14;
}

/* ══════════ 通用：陈述 + 引导语（左大右小，Mecka 那种分工） ══════════
   ⚠️ 左栏的宽度是被陈述本身逼出来的，不是拍的：巨型字下中文
   「我们构建机器学习现实的方式。」要 806px，1.15fr 只给到 661px——
   于是每句都折成两行，还掉出「数据。」这种孤字。2fr + 收窄的 gap 给到 839px，留 4% 余量。
   右栏 420px 装引导语够用（中文两行、英文三行）。 */
.lede {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  align-items: end;
  margin-bottom: clamp(1.6rem, 3.2vw, 2.8rem);
}
.stmt { margin: 0; }
/* 尺寸的分工（改陈述前先读这条）：
     满宽陈述（.stmt--solo / #belief）用 t-mega；
     进 .lede 两栏的陈述用 t-huge——巨型字进不了窄栏，
     英文 "We build how machines learn reality." 单行要 1600px，比整个内容宽度还宽。 */
/* 英文陈述进窄栏（.lede 左栏 / .split 左半）时，t-huge 的 3.9vw 都差一点：
   实测上限 #engine 3.61vw、#belief 3.87vw、#us 4.32vw。统一降到 3.5vw 覆盖最紧的那个，
   留 3% 余量。中文不受影响——中文最长一句只要 725px，本来就放得下。 */
:root[lang='en'] .lede .stmt,
:root[lang='en'] .split .stmt { font-size: clamp(1.6rem, 3.5vw, 3.2rem); }
/* 陈述独占一段（旁边没有并排的引导语时）。不进 .lede 的两栏网格：
   那一栏只有 1.15fr，1440 上约 660px，英文那种长行会被逼着折。
   行本来就是手动断的（.t-line），所以这里索性取消行宽上限，由断行控制长度——
   改文案时必须回头量一次，别让某一行悄悄折成两行。 */
.stmt--solo {
  max-width: none;
  margin-bottom: clamp(2.4rem, 5vw, 4.4rem);
}
/* 英文这句最长的一行（"will be driven by sustained, reliable,"）在 --fs-mega 的
   6.2vw 上差一点点放不下：实测各视口的单行上限都是 6.01vw，所以降到 5.85vw 留 3% 余量。
   上限 5.7rem 是给超宽屏的：.wrap 封顶 1600px 之后可用宽度不再涨，字号却还会跟着 vw 涨，
   不封顶就会在 1900px 以上重新折行。中文那三行最长才 12 个字，不受影响。 */
:root[lang='en'] .stmt--solo { font-size: clamp(2.3rem, 5.85vw, 5.7rem); }
.lede .t-lead { padding-bottom: .4em; }

/* ══════════ 通用：分栏论断（三栏 .g3 / 四栏 .g4 共用同一套 .col） ══════════ */
.g3, .g4 { display: grid; border-top: 1px solid var(--hair); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section--dark .g3, .section--dark .g4 { border-top-color: var(--hair-dark); }
.col {
  padding: clamp(1.5rem, 2.8vw, 2.4rem) clamp(1.2rem, 2.6vw, 2.6rem)
           clamp(1.5rem, 2.8vw, 2.4rem) 0;
  border-right: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: .7rem; align-items: flex-start;
}
.section--dark .col { border-right-color: var(--hair-dark); }
.col:not(:first-child) { padding-left: clamp(1.2rem, 2.6vw, 2.6rem); }
.col:last-child { border-right: 0; padding-right: 0; }
.col__t { font-size: var(--fs-big); font-weight: 400; line-height: 1.24; letter-spacing: var(--ls-big); }
/* 英文标题词长，在三栏里放不下：37.4px 时 "Paradigms are converging" 要 443px、
   栏内只有 360px。降到和中文同一档（2.05vw）之后三条都走一行。
   量过 #us 的四栏：那几条本来就短，跟着降只是变小，不会折行。 */
:root[lang='en'] .col__t { font-size: clamp(1.2rem, 2.05vw, 1.9rem); }
/* 描述从 --fs-body（1440 上 14.4px）提到 1.2vw ≈ 17.3px。
   原来那档是正文尺寸，摆在 30px 的标题下面太轻，读着像脚注。 */
.col__d { color: var(--ink-mute); font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.66; }
.section--dark .col__d { color: var(--on-dark-mute); }

/* ══════════ 满幅过场 ══════════ */
.band { background: var(--black); line-height: 0; }
.band__v { width: 100%; height: clamp(280px, 58svh, 620px); object-fit: cover; }

/* ══════════ 03 · 左右对开：一边讲逻辑，一边放影像 ══════════
   放在 .section--stage 里时靠 flex:1 吃掉剩余高度，两栏各自垂直居中，
   所以段落不管多高，文字和影像都在同一条中线上。
   ⚠️ 1.5fr 是被中文逼出来的：「并将其变成机器可学习的数据。」14 个字要 725px，
   对半分只给到 618px 就折行了。加宽到 741px 后中英各三行都是单行。 */
.split {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__lead { margin-top: clamp(1.2rem, 2.4vw, 2rem); }
.split__m { margin: 0; position: relative; background: var(--black); }
/* 影像给定比例，避免素材换成别的尺寸时把版面顶变形 */
.split__v { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.split__m figcaption {
  position: absolute; left: 1rem; bottom: .9rem;
  color: rgba(245, 244, 242, .8);
}


/* ══════════ Footer：兼作联系落点 ══════════
   原来「联系」是独立一段（占 480px 一屏），压缩成页脚里的一条。
   左边是转化出口：小标签当眉头、邮箱在下面——和各段 shead 是同一个语法，
   所以读起来像"这里是联系方式"，而不是一个没反应的按钮。
   右边是法务信息：刻意不用 .label。那个类会转大写又拉字距，
   "BOUNDLESS DOMAIN (BEIJING) TECHNOLOGY CO., LTD." 会又长又吵；
   法务行本来就该安静，用小字号 + 最浅的灰，不转大写、不拉字距。 */
.footer { border-top: 1px solid var(--hair); padding-block: clamp(1.8rem, 3.4vw, 2.8rem); }
.footer__in {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.5rem); flex-wrap: wrap;
}
.footer__k { display: block; margin-bottom: .75rem; }
.footer__mail {
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--hair);
  padding-bottom: .18em;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.footer__mail:hover { border-bottom-color: currentColor; }
.footer__legal {
  display: flex; flex-wrap: wrap;
  gap: .35rem 1.1rem;
  font-size: .78rem; line-height: 1.5;
  color: var(--ink-faint);
}
.footer__icp { color: inherit; }
.footer__icp:hover { color: var(--ink-mute); }

/* 为什么是我们：压缩版——只有一条发丝线和三栏，不再占一整屏 */
.us__h { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* ══════════ 导航里的品牌标记 ══════════ */
.nav__brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
/* 矢量标记：跟随品牌蓝，不带底块。
   位图版在 24px 以下会糊，且自带的深色方块压在浅色导航上像块贴纸（试过，已否掉），
   所以导航用 assets/svg/logo.svg 描出来的这一版（同一识别，单线）。 */
.nav__logo {
  width: 30px; height: 30px;
  display: block;
  flex-shrink: 0;
  color: var(--brand);
}

/* ══════════ 首屏拼贴：六条同时在放 ══════════
   单条视频撑不起首屏；六格铺满、整体压暗，文字压在上面。 */
.mosaic {
  position: absolute; inset: 0; z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
}
/* 首屏这六格要读成一张画面，不是六张缩略图，所以调色比全站 --grade 更狠一档：
   彻底去色 + 压对比。六段素材各自曝光不同，留着色彩和高对比，格与格之间就有亮度落差，
   那道横向接缝会被眼睛读成一条分割线——这正是"整块画面，不做缩略图网格"要避免的。 */
.mosaic video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(.78) contrast(.92);
}

/* 首屏标题下的引导语。
   中文整句约 36.5em，宽屏上放得下，就让它走一行——一行的陈述比折成两行利落。
   40em 是余量（比整句略宽），不是让它长到 40em：写死上限是防将来文案变长时横铺满屏。
   窄屏由字号 clamp 接住：768px 上字号落到下限 16.3px，整句约 595px，仍是一行；
   到手机才折成两行。英文整句约 61.5em，一行太长，保持两行——所以两语言上限不同。
   「Physical AI」当中用的是不换行空格（dict.js 里是  ，HTML 里是  ），
   所以宽度怎么调它都不拆——品牌词拆开就不像话了。
   也正因如此不能用 text-wrap: balance：balance 拉等长，反而会去劈这个词。
   字号比通用 --fs-lead 提了一档：首屏标题 80px，18px 的引导语接不住，层级断档太大。
   宽度设在 .hero__sub 自己身上而不是 .hero__side 容器上——容器是正文 16px，
   在它上面写 em 会按 16px 算，见 tokens.css 里那条警告。 */
.hero__sub {
  font-size: clamp(1.02rem, 1.36vw, 1.28rem);
  line-height: 1.64;
  color: rgba(245, 244, 242, .74);
  max-width: 34em;
}
:root[lang='zh'] .hero__sub { max-width: 40em; }

/* ══════════ 404 ══════════
   独立一页，不引 JS——它可能在任何异常状态下被打开，依赖越少越可靠。 */
.nf {
  min-height: 100svh;
  display: flex; align-items: center;
  background: var(--black); color: var(--on-dark);
}
.nf__in { display: grid; justify-items: start; gap: clamp(1.2rem, 2.6vw, 2rem); }
.nf__brand { display: block; color: var(--brand); }
.nf__code { color: var(--on-dark-faint); }
.nf__h { color: var(--on-dark); }
.nf__back {
  font-size: var(--fs-lead);
  color: var(--on-dark-mute);
  border-bottom: 1px solid var(--hair-dark);
  padding-bottom: .2em;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.nf__back:hover { color: var(--on-dark); border-bottom-color: currentColor; }