@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   折叠线以下 —— 把首屏那套网格往版面上延一点点。
   2026-09-19。**不改 site.css**:那一份已经验收过,增量走新文件。

   这份取代了 assets/c-marks.css(2026-09-18,已删)。
   被推翻的是我自己那一版对「C」的认定:那时我以为 C 是「框 + 轴 + 标记」,
   于是折叠线以下配了四种构件 —— 虚线导轨、框角、胶囊节点、强调方块。
   真正的 C 里这四样一个都不存在。C 的形态语言只有一句话:
   **等距网格 + 四边出血,零弧物件、零独立物件、零图标、零柱阵。**
   ⇒ 强调方块是独立物件,胶囊节点是弧物件,框角是图标,虚线不是 C 的笔法。全撤。

   ── 规矩(只有两条)──
   1. 构件只有**两种**,而且两种都不是新东西,都是首屏那张图里现成的线:
        line   正文节    一格 226 的粗线(226.26 长 × 6.79 厚)
        field  分区带节  一小块 57 的网格(113.13 高 × 452.52 宽 = 两格 × 八格)
      长度、厚度、透明度全部逐个取自 brand/_hero-c2-参数.json,没有一个新数。
   2. 每一节的上缘是一条边,构件**骑在这条边上** —— 一半在缝上,一半在缝下。
      上下两节的内边距各 64px,113.13 的带骑上去两边各占 56.6px,不碰任何文字。

   所以「上下有关联」不是靠重复一张图,是靠**同一组格距**:226.26 / 113.13。
   一个页面上这两种构件加起来最多出现十来次,每次都只是一根线或一小块网格 ——
   到此为止,不再加第三种。
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* 格距:C 的三级里的前两级。226.26 = 企业主册封面格距的两倍。 */
  --cg-coarse: 226.26px;
  --cg-pitch: 113.13px;
  --cg-fine: 56.57px;
  /* 线宽:与首屏同名级别逐字相同(收得比格距慢,否则加密不产生明暗差) */
  --cg-lw-0: 6.79px;
  --cg-lw-2: 4.34px;
  /* 墨与不透明度:浅色那一套,取自 brand/_hero-c2-参数.json 的 alphas */
  --cg-ink: var(--c-primary-500);
  --cg-a0: .067;
  --cg-a2: .0909;
}

[data-theme="dark"] {
  --cg-a0: .0765;
  --cg-a2: .0941;
}

.section[data-cgrid] { position: relative; }

.section[data-cgrid]::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  pointer-events: none;
}

/* ── line:正文节。首屏最粗那一级的一格,截下来放在正文左内缘上 ── */
.section[data-cgrid="line"]::before {
  inset-inline-start: calc(max(0px, (100% - var(--container-max)) / 2) + var(--s-4));
  inline-size: var(--cg-coarse);
  block-size: var(--cg-lw-0);
  margin-block-start: calc(var(--cg-lw-0) / -2);
  background: var(--cg-ink);
  opacity: var(--cg-a0);
}

/* ── field:分区带节。首屏最密那一级(56.57)的一小块网格,贴正文右内缘 ──
   高 113.13 = 两格,宽 452.52 = 八格,骑在节的上缘。
   ⚠️ 格距必须比带的高度细,否则带里只落得下**一条**横线,
      整条读成一排竖杠 —— 那正是 build-v14.py 点名禁止的条形码拓扑
      (「只画竖线 = 离散竖元素并排露背景」)。第一版用 113 就是这个毛病,
      实测截图上确实只剩竖杠。改用 56.57 后横竖各落两条以上,才真的是网。
   左缘用 mask 淡入,和首屏「左边留空、往右才显形」是同一条规矩。 */
.section[data-cgrid="field"]::before {
  inset-inline-end: calc(max(0px, (100% - var(--container-max)) / 2) + var(--s-4));
  inline-size: calc(var(--cg-pitch) * 4);
  block-size: var(--cg-pitch);
  margin-block-start: calc(var(--cg-pitch) / -2);
  opacity: var(--cg-a2);
  background-image:
    repeating-linear-gradient(to right,
      var(--cg-ink) 0 var(--cg-lw-2), transparent var(--cg-lw-2) var(--cg-fine)),
    repeating-linear-gradient(to bottom,
      var(--cg-ink) 0 var(--cg-lw-2), transparent var(--cg-lw-2) var(--cg-fine));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60%);
          mask-image: linear-gradient(to right, transparent 0, #000 60%);
}

/* 窄屏:容器一旦窄过四格带的宽度,带就会横穿整个版心、压到文字上方去。
   那不是「缩一档」能解决的,是这一条构件在这个宽度下不成立 ⇒ 直接不出现。
   line 保留:它只有一格宽,375 上仍然只占左边一小段。 */
@media (max-width: 767px) {
  .section[data-cgrid="field"]::before { display: none; }
  .section[data-cgrid="line"]::before { inline-size: var(--cg-pitch); }
}

/* ══════════════════════════════════════════════════════════════════
   首屏在手机上的可读性罩
   ------------------------------------------------------------------
   375 宽时首屏图是 object-fit:cover,只露出画布右侧一条 —— 而那一条正是
   两道台阶收束、网格最密的地方,文案恰好压在同一条上。往左挪露出的是空场,
   上下没有余量。所以罩子只能加在这一层。
   力度比上一版轻得多:上一版画面里有 14px 厚的实色框壁,必须压实;
   C 是纯网格,最粗一级的线也只有 6.79px、不透明度 6.7%,薄压一层就够。

   ⚠️ 只加在**首页**。这一版原先两档都加,依据是「site.css 里那条 .hero__veil
      手机规则没有对应元素,是死规则」—— 这句话是错的,我没核就写了:
      .hero__veil 这个 div 在五个内页上都有(各页第 165 行),site.css 也给了它
      手机规则。于是内页在 375 上被压了三层:SVG 自带的安静罩 + .hero__veil +
      这里这一层。实测后果是五个内页的浅色版在 375 上**整个场都量不到了** ——
      这一轮要的是「每一屏都有自己的巧思」,压到看不见等于这一屏没有。
      ⇒ 内页这一层撤掉,那活 site.css 本来就在干;首页没有 .hero__veil 元素,保留。
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hero:not(.hero--page) .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--c-canvas) 92%, transparent) 0 12%,
      color-mix(in srgb, var(--c-canvas) 72%, transparent) 48%,
      color-mix(in srgb, var(--c-canvas) 40%, transparent) 80%,
      transparent 100%);
  }
}

/* ══════════════════════════════════════════════════════════════════
   平板档(768–1023):这一档不再需要横向罩。
   上一版在这里压过一道:那时画面近端有一道 10px 的实色框壁,横穿内页副标那一行,
   是两个东西抢同一块地方。C 没有框壁,最粗的线 6.79px、不透明度 6.7%,
   压在字底下的通道距离不到 14/255 —— 冲突不存在了,罩就不该留着。
   留着一条没有理由的罩,下一个人会以为那是必需的。⇒ 这一档不写任何规则。
   ══════════════════════════════════════════════════════════════════ */