/* ============================================================================
   站点层 —— 页面骨架与版式（与引擎层 engine.css 分工）
   引擎管：影像四层 · 十主题 · 过场 · 揭示 · 天光带 · 金底条
   本文件管：页头 · 导航 · 页脚 · 各页版式块
   ----------------------------------------------------------------------------
   三条纪律落在 CSS 里：
   ① 每屏只有一个视觉重音，重音与次级尺度差 ≥3 倍；
   ② 正文行宽 ≤ --measure(640px)；巨字一律 --ls-display + --lh-display；
   ③ 金色只落「数据 · 行动 · 状态 · 结构」四类职能。
============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* 深色跨页：把页面底色也换掉，滚动到边界时不露白 */
body[data-ground="dark"] { background: var(--c-char); }

/* ---------------------------------------------------------------- 影像：视频与图片同几何 */
video.media__native { width: 100%; height: 100%; object-fit: cover; display: block; }
.media__themed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================
   页头 —— 覆盖在满幅影像之上，十主题下都要读得清
   「世界那么大」用**小号字标**（手册不许孤立的商标性使用：不做大字号美术字、不加 ®™），
   与金线、导航、阶段句同处一栏，即「绑内容用」。
============================================================================ */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; gap: var(--sp-6);
  padding: 12px var(--gutter);
  color: var(--on-img);
  background: rgb(var(--p) / .22);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.masthead.is-scrolled { background: rgb(var(--p) / .48); box-shadow: 0 1px 0 rgb(var(--halo-rgb) / .28); }

/* 页头字标 —— 用**官方横版 LOGO 原文件**（图形 ＋「世界那么大」＋ WORLD SO BIG 三件一体）。
   ⚠ 这里曾经是「图形 ＋ 金色竖线 ＋ 中文」—— 英文被砍、竖线是我自己加的。
   那等于**改了 LOGO 构成**：`WORLD SO BIG` 本来就是那个位置的内容，不是可以拿装饰线替掉的。
   实测「补回英文会撑破横条」是**没量就下的判断**：标组只宽 19.4px（1440）／11.6px（375），
   窄屏汉堡前仍余 ≈227px，真代价只有页头高 +7px。
   LOGO 锁版比例 200.60 × 49.54 = 4.0493 : 1，所以只用一个宽度变量驱动，高度自动。 */
.brandmark { display: inline-flex; align-items: center; flex: none; }
.brandmark .logo-h { width: 158px; height: auto; display: block; color: var(--on-img); }

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-6); }
.nav a {
  font-size: var(--fs-small); letter-spacing: .04em; color: var(--on-img2);
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav a:hover { color: var(--on-img); }
.nav a[aria-current="page"] { color: var(--on-img); border-bottom-color: var(--c-sun); }

.navtoggle {
  display: none; margin-left: auto;
  width: var(--touch); height: var(--touch); align-items: center; justify-content: center;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.navtoggle svg { width: 20px; height: 20px; }

/* 汉堡 ↔ ✕：三条线分开做 —— 打开时上下两条交叉、中线淡出。
   这是「菜单能关」的**可见提示**：此前只有一个静默的汉堡，菜单一展开连它都被盖住了，
   用户看不到任何「关」的入口。（形态用旋转，不用整体 scaleY —— 那会退化成一条压扁的线。） */
.navtoggle .nv-bar {
  transform-box: view-box; transform-origin: 10px 10px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
body.nav-open .navtoggle .nv-bar--t { transform: translateY(4px) rotate(45deg); }
body.nav-open .navtoggle .nv-bar--m { opacity: 0; }
body.nav-open .navtoggle .nv-bar--b { transform: translateY(-4px) rotate(-45deg); }

/* ============================================================================
   屏的版式变体（引擎给了 .screen 的基线）
============================================================================ */
.screen__inner { padding-bottom: 13vh; }
.screen__type h1 { font-size: clamp(28px, 4.1vw, 60px); text-wrap: balance; }

/* 验收钩子 ?only=N 靠 [hidden] 隐藏其余屏。
   ⚠ 经典坑：UA 的 `[hidden]{display:none}` 是**元素级**规则，被 `.screen{display:grid}`
   （作者样式、同特异度但更晚）压过 —— 于是 hidden 完全不起作用。必须显式补一条。 */
.screen[hidden] { display: none; }

/* ============================================================================
   仪表的避让（宽屏）
   天光带是 position:fixed、贴着右边、垂直居中 —— 它常驻在视口上，会压住正文。
   不挪它（那是创始人认可过的形态），改为给正文让出一条「安全带」：
   内容盒仍在 --maxw 内居中，只是右侧留出比仪表更宽的空档。
============================================================================ */
@media (min-width: 1100px) {
  .screen__inner, .foot__wrap { padding-right: calc(var(--gutter) + 190px); }
  .doc { padding-right: calc(var(--gutter) + 190px); }
  .masthead { padding-right: calc(var(--gutter) + 190px); }
  .screen__type, .doc__wrap { max-width: calc(var(--maxw) - 190px); }
}

/* 巨字屏：视觉重音档（与正文 16px 相差 7 倍以上）
   ⚠ 两处都是踩过的坑：
   · 行宽单位必须用 em —— `ch` 按「0」字形算宽，对中文严重偏窄（实测 16ch ≈ 8 个汉字），
     会把「一个从来没有过的地方。」断成「…的地／方。」这种难看的孤字；
   · text-wrap: balance 让两行各自匀开，避免孤字。 */
.screen__type--mega h1 {
  font-size: clamp(40px, 8.4vw, var(--fs-giga));
  line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 700;
  max-width: 14em; text-wrap: balance;
}
.screen__type--mega p { font-size: clamp(15px, 1.5vw, 21px); }
/* 次级档：给「同屏两句话、一大一小」的第二个重音用 */
.screen__type--mega .sub {
  font-size: clamp(17px, 2.2vw, 28px); line-height: 1.34; letter-spacing: -.01em;
  font-weight: 600; color: var(--on-img); max-width: 24ch; margin: .55em 0 0;
}
/* 让位（与引擎的 .screen.peeking 同一套克制度），仅用于「这句必须被注意到」的小字 */
.pin { color: var(--on-img); font-weight: 600; }

/* 正文段：行宽上限只管正文 */
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1em; color: var(--on-img2); }
.prose p:last-child { margin-bottom: 0; }

/* ⚠ 屏内文本类（`.kicker` / `.stage` / `.close-line` / `.fine`）的选择器**必须带 `.screen__type` 前缀**。
   engine.css 里有一条 `.screen__type p { margin: 0; font-size: clamp(15px,1.2vw,19px); … }` ——
   它的优先级 (0,1,1) **高于**单类的 (0,1,0)，会把这些 `font-size` 与 `margin` 整个吃掉。
   （实测：`.close-line` 本该 40px，被压成 17.28px、margin 归零；`.kicker` 12px 被抬成 19px。） */
.screen__type .kicker { font-size: var(--fs-tiny); letter-spacing: .22em; margin: 0 0 .9em; }

/* 阶段句：小字，必带，且做成可辨识的「状态」职能（金色刻度线）。
   颜色用全对比色 —— 阶段句是一票否决项，不能因为「想轻一点」用半透明色而读不清。 */
.screen__type .stage {
  margin-top: 1.5em; font-size: 13px; line-height: 1.6; color: var(--on-img);
  border-left: 2px solid var(--c-sun); padding-left: .9em; max-width: var(--measure);
}

/* ============================================================================
   首页 · 第 4 屏：四列表（能源 → 交通工具 → 住宿形态）
   做成画册式的「一条时间轴」，不是表格 —— 用发丝线分栏，无外框
============================================================================ */
.chain { margin: 2.4em 0 0; max-width: 46em; }
.chain__row {
  display: grid; grid-template-columns: 5.2em 9em minmax(0, 1fr);
  gap: var(--sp-6); align-items: baseline;
  padding: .72em 0; border-top: 1px solid var(--line-invert-2);
}
.chain__row:last-child { border-bottom: 1px solid var(--line-invert-2); }
.chain__era { font-size: var(--fs-small); letter-spacing: .06em; color: var(--on-img3); }
.chain__veh { font-size: var(--fs-body); color: var(--on-img2); }
/* 末行那句是这一屏的答，也是全站最重的一击：平衡断行，别留单字孤行 */
.chain__dwell { font-size: var(--fs-h3); font-weight: 600; color: var(--on-img);
                text-wrap: balance; }
/* 最后一行＝「电 / 电车 / ？」，是本屏的答，用金色标记「状态」 */
.chain__row--now { border-top-color: var(--c-sun-line); }
.chain__row--now .chain__era,
.chain__row--now .chain__veh { color: var(--c-sun); }
.chain__row--now .chain__dwell { font-size: var(--fs-h2); }
.chain__q { color: var(--c-sun); }

/* ============================================================================
   产品页 · 屏 3「里面的条件」—— 四条条件是低声部，末句是次重音
   四条各带一条 2px 金色短刻度：金色只落「结构」职能（手册纪律），
   所以这里用它做列表的刻度，而不是做颜色。
============================================================================ */
.facts { list-style: none; margin: var(--gap-l) 0 0; padding: 0; max-width: 34em; }
.facts li {
  position: relative; padding: .68em 0 .68em 1.6em;
  font-size: clamp(17px, 1.9vw, 24px); line-height: 1.5; color: var(--on-img);
  border-top: 1px solid var(--line-invert-2);
}
.facts li:last-child { border-bottom: 1px solid var(--line-invert-2); }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 1.42em;
  width: 12px; height: 2px; background: var(--c-sun);
}
.facts__note { margin-left: .8em; font-size: var(--fs-small); color: var(--on-img3); }

/* 屏内副标题：默认继承 `.screen__type p` 的 `--on-img2`（半透明），
   落在中亮底上会掉到 1.3:1（实测 gravel 主题的产品页屏 4）。这里统一提到全对比色。
   —— 半透明色只适合「底已经够暗/够亮」的位置，不适合正文级信息。 */
.screen__type .sub { color: var(--on-img); }

/* 屏 3 的收尾句 —— 这一屏的重音，独立成行、给足留白（不与四条争体量） */
.screen__type .close-line {
  margin: var(--gap-xl) 0 0; max-width: 16em; text-wrap: balance;
  font-size: clamp(23px, 3.2vw, var(--fs-display));
  line-height: 1.26; letter-spacing: -.015em; font-weight: 650; color: var(--on-img);
}

/* 产品页屏 4 · 最小字两行：挡句与专利公示。
   「一个全新的发明。」是断言，专利三项是它唯一的硬证据 —— 按大纲给最小字。 */
.screen__type .fine {
  margin: .5em 0 0; max-width: 56em;
  font-size: var(--fs-tiny); line-height: 1.75; color: var(--on-img);
}

/* 第二重音加强档：首屏「一个全新的发明。」—— 大纲要求两句都做重音，靠体量差分工 */
.screen__type--mega .sub--strong {
  font-size: clamp(20px, 2.9vw, var(--fs-display));
  font-weight: 650; letter-spacing: -.015em;
}

/* 阅读蒙版 —— 长文页专用
   引擎的 --veil 是「文字贴底」设计的：中段只有 .18–.26，为的是让画面透出来。
   但文档类页面（观察的问题页）正文从上方铺下来，正好落在中段 —— 亮主题下
   白字压白雪，实测读不清（雪线最能说明问题）。
   做法：**定向蒙版** —— 正文所在的左侧压厚、右侧让影像照常透出来，
   这样既读得清，又不牺牲「满幅影像」。（不整屏压平，那会变成一张灰纸。）
   ⚠ 必须放在 .media__themed 之内：它在 .media__native（z-index 1）之下，
   所以「让我看看」揭开的仍是**不带蒙版的原片** —— 这正是那个动作的意义。 */
.media__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(102deg,
    rgb(var(--p) / .94) 0%, rgb(var(--p) / .90) 34%, rgb(var(--p) / .74) 50%,
    rgb(var(--p) / .40) 68%, rgb(var(--p) / .22) 100%);
}
/* 窄屏是竖着读的，定向蒙版失效 → 改回均匀压厚 */
@media (max-width: 900px) {
  .media__scrim {
    background: linear-gradient(180deg,
      rgb(var(--p) / .90) 0%, rgb(var(--p) / .86) 30%,
      rgb(var(--p) / .84) 72%, rgb(var(--p) / .92) 100%);
  }
}

/* ============================================================================
   /observe —— 索引页：清爽、行密、给答案
============================================================================ */
/* 大纲要求这一页「清爽、行密」—— 行距收紧，别把 15 问摊成一屏三行 */
.qgroup { margin-top: var(--sp-12); }
.qgroup__name {
  font-size: var(--fs-tiny); letter-spacing: .18em; color: var(--on-img2);
  margin: 0 0 var(--sp-3);
}
.qlist { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.qlist li { border-top: 1px solid var(--line-invert-2); }
.qlist li:last-child { border-bottom: 1px solid var(--line-invert-2); }
.qlist a {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: .52em 0; font-size: clamp(16px, 1.45vw, 19px); color: var(--on-img);
  transition: color .2s ease, padding-left .3s cubic-bezier(.16,1,.3,1);
}
.qlist a:hover { color: var(--c-sun); padding-left: .4em; }
.qlist .qnum {
  flex: none; font-family: var(--ff-mono); font-size: var(--fs-tiny);
  color: var(--on-img3); width: 2.4em;
}

/* ============================================================================
   问题页 /about 条目页 —— 同一套阅读版式：问 · 答 · 解
============================================================================ */
.doc { padding: calc(13vh + 64px) var(--gutter) var(--gap-l); }
.doc__wrap { max-width: var(--maxw); margin-inline: auto; }
.doc__back {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small);
  color: var(--on-img2); border-bottom: 1px solid rgb(var(--halo-rgb) / .45);
  padding-bottom: 2px; margin-bottom: var(--sp-8);
}
.doc__back:hover { color: var(--c-sun); border-color: var(--c-sun); }
.doc h1 {
  font-size: clamp(30px, 4.6vw, 56px); line-height: 1.16; letter-spacing: var(--ls-display);
  font-weight: 680; margin: 0 0 var(--sp-4); max-width: 22ch;
}
.doc__ans {
  font-size: clamp(17px, 1.9vw, 24px); line-height: 1.5; color: var(--on-img);
  max-width: 30ch; margin: 0 0 var(--gap-l); font-weight: 600;
}
.doc__body { max-width: var(--measure); }
/* 正文用全对比色（不是 --on-img2）—— 文档页的读法优先于「层级感」。
   --on-img 与该主题的 --p 本就成对（满幅屏正是这么用的），所以在十主题下都达标。 */
.doc__body p { margin: 0 0 1.1em; color: var(--on-img); }
.doc__rel {
  margin-top: var(--gap-xl); padding-top: var(--sp-6);
  border-top: 1px solid var(--line-invert-2); max-width: var(--measure);
}
.doc__rel h2 { font-size: var(--fs-small); letter-spacing: .16em; color: var(--on-img3);
               margin: 0 0 var(--sp-4); font-weight: 600; }
.doc__rel ul { list-style: none; margin: 0; padding: 0; }
.doc__rel li { padding: .4em 0; }
.doc__rel a { color: var(--on-img); border-bottom: 1px solid rgb(var(--halo-rgb) / .4); }
.doc__rel a:hover { color: var(--c-sun); border-color: var(--c-sun); }
.doc__meta { margin-top: var(--gap-l); font-size: var(--fs-tiny); color: var(--on-img3);
             font-family: var(--ff-mono); }

/* 素底屏：不铺影像，用该主题自己的 --p 作底（--on-img 与 --p 本就成对，
   所以在十主题下对比度天然成立 —— 这与蒙版用的是同一对颜色） */
.screen--ground { background: rgb(var(--p)); }

/* ============================================================================
   屏 3（about-03）—— 全站唯一的素底屏，大屏上要单独放宽
   其余各屏都靠满幅影像接住留白；这一屏是纯色底，沿用全站 1200px 内容列时，
   实测内容占视口：1440→56% ／ 1920→52% ／ 2560→39% ／ 3840→26% —— 大屏就是"空"。
   根因是**两处都被钉死**：内容列 max-width 锁 1200px、屏高锁 100svh
   ⇒ 卡片宽在任何视口都是 223px。
   ⇒ 这一屏单独放宽内容列、按视口抬高字号：让四张字卡本身当影像用。
   ⚠ **基础档与改前逐项相同**（1440 及以下零变化）；放大只在 ≥1700px 生效。
   ⚠ 所以生成器里这一屏的 <h1> **不许再写内联 font-size** —— 内联会压过下面的媒体查询。
============================================================================ */
.screen--ground .screen__type h1 { font-size: clamp(24px, 3.4vw, 42px); max-width: 28ch; }
@media (min-width: 1700px) {
  .screen--ground .screen__inner { max-width: min(1800px, 88vw); }
  /* ⚠ 光放宽 .screen__inner 没用 —— 宽屏下 `.screen__type` 被单独钉在
     `calc(--maxw - 190px)` = 1010px（那是给右侧天光带让出安全带用的，见上面 §避让）。
     这里把它解开，让内容盒填满 inner 的内容区即可：inner 的 `padding-right: gutter + 190px`
     已经把安全带留好了，不会压到天光带。 */
  .screen--ground .screen__type { max-width: none; }
  .screen--ground .screen__type h1 { font-size: clamp(42px, 2.4vw, 66px); }
  .screen--ground .titles { gap: clamp(24px, 1.4vw, 40px); margin-top: clamp(32px, 2.1vw, 58px); }
  .screen--ground .titles__move { font-size: clamp(20px, 1.05vw, 28px); }
  .screen--ground .titles__film,
  .screen--ground .titles__gloss { font-size: clamp(14px, .78vw, 19px); }
}

/* 长内容屏（索引、列表）：引擎默认「内容贴底」，内容一高就顶到页头。
   这里改为自上而下，并让出页头的高度。 */
.screen--tall { align-items: start; }
.screen--tall .screen__inner { padding-top: calc(76px + var(--gap-xl)); }
@media (max-width: 640px) {
  .screen--tall .screen__inner { padding-top: calc(64px + var(--gap-l)); }
}

/* ============================================================================
   /about 屏 3 —— 四句话 （全页重音 · 一条时间轴 · 不做卡片、不拆屏）
   四张＝四部影片的片头字卡（固定，不随主题换）；
   但它们各自带一层**主题双色调投射**，所以整屏仍活在当前主题的天光里。
============================================================================ */
.titles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6);
          margin-top: var(--gap-l); }
.titles__item { min-width: 0; }
.titles__fig {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-1);
  background: var(--c-char);
}
.titles__fig picture { display: block; }
.titles__img { width: 100%; height: 100%; object-fit: cover; display: block;
               filter: saturate(.74) brightness(.94); }
/* 与满幅屏同一套双色调 —— 保留明度、只换色相，于是字卡随主题变色 */
.titles__duo { position: absolute; inset: 0; background-color: var(--duo);
               mix-blend-mode: color; opacity: calc(var(--duo-op) * .70); }
.titles__idx {
  display: flex; align-items: center; gap: 8px; margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--c-sun);
}
.titles__idx::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--c-sun-line); }
.titles__move { font-size: var(--fs-h3); font-weight: 650; margin: 0 0 var(--sp-1); }
.titles__film { font-size: var(--fs-small); color: var(--on-img2); margin: 0 0 var(--sp-2); }
.titles__gloss { font-size: var(--fs-small); line-height: 1.7; color: var(--on-img3); margin: 0; }

/* 每张字卡整体 → 该片在 B 站的正片（外链跳转，不做站内嵌入）。
   **整卡就是一个 <a>**：点卡片任何位置都过去；页面上**不再另做「去 B 站看」文字链接**
   —— 两个入口效果完全一样，重复没必要。全页 4 个链接，各带 aria-label 消歧。
   ⚠ 金色只用于**聚焦环**：`--c-sun`(#E8A862) 在亮底主题（雪线/砾径 的 `--p` #F5F3EE）上只有
   **1.86:1**，拿它写字/画承载信息的图形会消失；故派生 `--wlink`（十主题实测 3.67–12.27）。 */
.titles__link {
  --wlink: color-mix(in srgb, var(--c-sun) 62%, var(--on-img));
  display: block; color: inherit; text-decoration: none;
}
.titles__link:hover, .titles__link:focus { text-decoration: none; }
.titles__link:focus-visible {
  outline: 2px solid var(--wlink); outline-offset: 8px; border-radius: var(--r-1);
}
/* 「能点」的提示：悬停/聚焦时字卡提亮 ＋ 中央浮出播放符（不加任何外框）。 */
.titles__img { transition: filter .35s ease; }
.titles__link:hover .titles__img,
.titles__link:focus-visible .titles__img { filter: saturate(.92) brightness(1.04); }
.titles__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.titles__link:hover .titles__play,
.titles__link:focus-visible .titles__play { opacity: 1; }
/* ⚠ 触屏没有 hover —— 不常显播放符，手机上整张卡就没有任何「可点」的提示。 */
@media (hover: none) { .titles__play { opacity: 1; } }
.titles__play::before {
  content: ''; width: 48px; height: 48px; border-radius: 50%;
  background-color: rgb(16 19 24 / .50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1 1l12 7-12 7z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 57% 50%; background-size: 13px 15px;
  border: 1px solid rgb(255 255 255 / .55); box-shadow: 0 6px 20px rgb(16 19 24 / .32);
}
@media (prefers-reduced-motion: reduce) {
  .titles__img, .titles__play, .titles__link { transition: none; }
}

/* 价值观六条 */
.vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gap-l) var(--sp-8); margin-top: var(--gap-l); }
.vals__item { min-width: 0; }
.vals__k { font-size: var(--fs-h3); font-weight: 650; margin: 0 0 var(--sp-2); color: var(--on-img); }
.vals__v { font-size: var(--fs-small); line-height: 1.75; color: var(--on-img2); margin: 0; }

/* ============================================================================
   联系
============================================================================ */
.mailto {
  display: inline-block; margin-top: var(--gap-l);
  font-size: clamp(22px, 3.6vw, 44px); letter-spacing: -.01em; font-weight: 650;
  color: var(--on-img); border-bottom: 2px solid var(--c-sun); padding-bottom: .1em;
  transition: color .2s ease;
}
.mailto:hover { color: var(--c-sun); }

/* ============================================================================
   合规两页 —— 不配影像、不做视觉重音（条例式阅读）
============================================================================ */
.legal { background: var(--c-paper); color: var(--c-ink); }
/* 合规页**不参与十主题**（它们是文件，不是页面作品）。但页头仍会被 JS 按时辰改 --p，
   于是出现「纸白正文 ＋ 灰页头」的打架 —— 这里把页头钉回纸色系。 */
body.legal .masthead { background: rgb(245 243 238 / .92); color: var(--c-ink); }
body.legal .masthead.is-scrolled { background: rgb(245 243 238 / .98); }
body.legal .nav a { color: var(--c-ink-2); }
body.legal .nav a:hover,
body.legal .nav a[aria-current="page"] { color: var(--c-ink); }
body.legal .brandmark .logo-h { color: var(--c-ink); }
.legal .doc { padding-top: calc(13vh + 96px); }
.legal h1 { color: var(--c-ink); font-size: var(--fs-display); letter-spacing: var(--ls-display);
            line-height: 1.2; max-width: 30ch; }
.legal .doc__body { max-width: 68ch; }
.legal .doc__body h2 {
  font-size: var(--fs-h3); font-weight: 650; margin: 2.2em 0 .7em; color: var(--c-ink);
}
.legal .doc__body p, .legal .doc__body li { color: var(--c-ink-2); font-size: var(--fs-small); }
.legal .doc__body ol, .legal .doc__body ul { padding-left: 1.3em; margin: 0 0 1em; }
.legal .doc__body li { margin-bottom: .5em; }
.legal .doc__back { color: var(--c-ink-2); border-color: var(--line-strong); }
.legal .doc__meta { color: var(--c-ink-3); }

/* 404 页（/404）—— 沿用合规页的纸面基调，但语气不同：它不是一份文件，是一次接人。
   任务只有一个：一句人话 ＋ 两个出口。颜色全部取自纸面一系（--c-ink*），
   因此**不依赖十主题**，也就不存在「非六主题纯色底不达 AA」的问题。 */
.nf {
  min-height: 72vh; display: grid; align-content: center;
  padding: calc(13vh + 96px) var(--gutter) var(--gap-l);
}
.nf__wrap { max-width: var(--maxw); margin-inline: auto; width: 100%; }
.nf__code {
  font-family: var(--ff-mono); font-size: var(--fs-small); letter-spacing: .22em;
  color: var(--c-ink-3); margin: 0 0 var(--sp-6);
}
.nf__title {
  font-size: clamp(32px, 5.2vw, 66px); line-height: 1.14;
  letter-spacing: var(--ls-display); font-weight: 680;
  color: var(--c-ink); margin: 0 0 var(--sp-6); max-width: 18ch;
}
.nf__sub {
  font-size: clamp(16px, 1.7vw, 21px); line-height: 1.62;
  color: var(--c-ink-2); max-width: 32ch; margin: 0 0 var(--gap-xl);
}
.nf__acts { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; }
.nf__act {
  display: inline-flex; align-items: center; padding: .72em 1.5em;
  border: 1px solid var(--line-strong); color: var(--c-ink);
  font-size: var(--fs-small); font-weight: 600;
}
.nf__act:hover { border-color: var(--c-sun); color: var(--c-sun); }
/* 次级出口写成「下划线链接」而不是第二个按钮 —— 一眼分得清主次：
   主出口是「回到首页」，这里只是想多给一条路。 */
.nf__act--ghost {
  border: 0; padding: .72em 0;
  border-bottom: 1px solid var(--line-strong);
}
.nf__act--ghost:hover { border-bottom-color: var(--c-sun); }

/* ============================================================================
   狼不狈页（/wolf）—— 社群页的两个专属组件
   ⚠ 行宽一律按 vw 计，不混 em：`.acts` 的 font-size 继承该页 16px 基准，
     写 `min(34em,62vw)` 会算成 34em＝544px < 62vw＝1190px，min() 取小值 ⇒
     vw 那一路永远不参与比较，宽度被自己锁死（实测五行全折两行、左半边空成洞）。
     改成 vw 后五行各占一行（实测行宽 734px @1920）。
============================================================================ */
.wolf-acts { margin: 2.2em 0 0; width: min(46vw, 860px); }
.wolf-acts .act {
  display: grid; grid-template-columns: 6.4em minmax(0, 1fr);
  /* dl/dt/dd 的 UA 默认缩进必须清掉，否则左侧多出一截 */
  margin: 0; gap: var(--sp-6); align-items: baseline;
  padding: .78em 0; border-top: 1px solid var(--line-invert-2);
}
.wolf-acts .act:last-child { border-bottom: 1px solid var(--line-invert-2); }
.wolf-acts .act__do {
  font-size: clamp(19px, 1.9vw, 24px); font-weight: 650; color: var(--on-img);
  letter-spacing: -.01em; white-space: nowrap;
}
.wolf-acts .act__get {
  margin: 0; font-size: clamp(15px, 1.45vw, 19px); color: var(--on-img);
  line-height: 1.65; text-wrap: pretty;
}

/* 狼群地址：提示语独立成行、定宽 18em —— 不定宽会跟右侧码位抢位、把末字挤成孤字 */
/* 「狼群地址」块：文字与小程序码**并存**（创始人 2026-09-27 定）—— 并排，窄屏换行。 */
.wolf-nest { margin-top: var(--gap-l); width: min(52vw, 940px);
             border-top: 1px solid var(--line-invert-2); padding-top: var(--sp-6);
             display: flex; align-items: flex-start; gap: var(--gap-l); }
.wolf-nest__cap { font-size: var(--fs-small); letter-spacing: .16em;
                  color: var(--on-img2); margin: 0 0 .5em; }
.wolf-nest__hint { font-size: var(--fs-tiny); color: var(--on-img2);
                   margin: .6em 0 0; line-height: 1.7; max-width: 18em; }
/* 小程序码：微信码是黑白的，**必须白底**才扫得出来 —— 底色与留白交给 CSS，别做进图里 */
.wolf-nest__qr { margin: 0; flex: 0 0 auto; }
.wolf-nest__qr img { display: block; width: 200px; height: 200px; background: #fff;
                     padding: 8px; border-radius: 10px; box-sizing: content-box; }
.wolf-nest__qr figcaption { margin-top: 9px; font-size: var(--fs-tiny);
                            color: var(--on-img2); text-align: center; }

@media (max-width: 900px) {
  .wolf-acts, .wolf-nest { width: 100%; }
  .wolf-acts .act { grid-template-columns: 1fr; gap: .15em; }
  .wolf-nest { flex-direction: column; gap: var(--sp-6); }
  .wolf-nest__qr img { width: 168px; height: 168px; }
}

/* ============================================================================
   页脚 —— 每页底部；阶段句挂这里（凡对公众的载体必带）
============================================================================ */
.foot {
  background: var(--c-char); color: var(--on-dark);
  padding: var(--gap-xl) var(--gutter) var(--gap-l);
}
.foot__wrap { max-width: var(--maxw); margin-inline: auto;
              display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-l); }
.foot__brand { display: flex; align-items: center; margin-bottom: var(--sp-4); }
/* 页脚 LOGO 比页头小一档：页脚是收尾信息区，字号整体比页头低一级，
   标若与页头同宽会显得突兀。同一把尺子：宽驱动、高自适应。 */
.foot__brand .logo-h { width: 132px; height: auto; display: block; color: var(--on-img); }
.foot__lines { margin: 0; font-size: var(--fs-small); line-height: 1.9; color: var(--on-dark-2); }
.foot__lines a { border-bottom: 1px solid var(--line-invert-2); }
.foot__lines a:hover { color: var(--c-sun); border-color: var(--c-sun); }
.foot__nav { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.foot__nav a { font-size: var(--fs-small); color: var(--on-dark-2); }
.foot__nav a:hover { color: var(--c-sun); }
/* 分享入口：零依赖「复制链接」。全站此前**没有任何分享入口**（「分享」二字只在正文出现 1 次）
   —— 「让读者愿意替我们说」的第一步，是先让他能把链接递出去。 */
.foot__share {
  margin-top: var(--sp-4); padding: 9px 20px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 30%, transparent);
  background: transparent; color: var(--on-dark-2);
  font: inherit; font-size: var(--fs-small); letter-spacing: .02em; cursor: pointer;
  transition: color .18s, border-color .18s, background-color .18s;
}
.foot__share:hover { color: var(--c-sun); border-color: var(--c-sun); }
.foot__share.is-done { color: var(--c-sun); border-color: var(--c-sun); background: var(--c-sun-soft); }
/* 阶段句：对公众必带 —— 与正文有区分，但不抢重音 */
.foot__stage {
  grid-column: 1 / -1; margin: var(--sp-8) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--line-invert-2);
  font-size: var(--fs-tiny); line-height: 1.7; color: var(--on-dark-3);
}
.foot__stage .rule { display: inline-block; width: 2px; height: 9px; background: var(--c-sun);
                     vertical-align: -1px; margin-right: 7px; }

/* ============================================================================
   窄屏
============================================================================ */
@media (max-width: 900px) {
  .foot__wrap { grid-template-columns: minmax(0, 1fr); }
  .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .masthead { padding: 9px var(--gutter); gap: var(--sp-4); }
  /* 窄屏 LOGO 降一档：158px 是按 1920 看的，375 屏上占满半个页头会压掉呼吸感。
     132px 下 LOGO 高约 33px，页头高约 51px —— 仍比旧版（简写标组 24px）高，
     但汉堡前余量充足（实测 ≈210px）。 */
  .brandmark .logo-h { width: 132px; }
  /* 窄屏**保留字标**。原先这里写着 display:none（「字标让位给导航」），但实测 375px 下
     字标右边界 137、按钮左边界 311，中间余 174px —— 空间从来够（320px 屏也还余 119px）。
     更重要的是：品牌手册不许孤立使用商标图形，LOGO 本就是图形 ＋ 中英文一体的，
     去掉字标反而只剩一个图形标，更像孤立使用。 */
  .navtoggle { display: inline-flex; }
  /* 展开的菜单 position:fixed 从视口顶部铺下来（高约 349px，覆盖整个页头），
     而它在 DOM 里排在按钮之后、两者 z-index 同为 auto —— 于是**菜单画在按钮之上**，
     汉堡被吞掉、点不到，用户就没法把菜单收回去（实测该点命中的是 NAV.nav）。
     把页头控件抬一层即可；z-index 只在 .masthead 自己的层叠上下文内比较。 */
  .brandmark, .navtoggle { position: relative; z-index: 1; }
  .nav {
    position: fixed; inset: 0 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 56px var(--gutter) var(--sp-6);
    background: rgb(var(--p) / .92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transform: translateY(-102%); transition: transform .38s cubic-bezier(.16,1,.3,1);
  }
  body.nav-open .nav { transform: none; }
  /* 菜单展开时锁住背景滚动（否则滑一下页面、菜单跟着内容走） */
  body.nav-open { overflow: hidden; }
  .nav a { padding: .85em 0; font-size: var(--fs-body);
           border-bottom: 1px solid rgb(var(--halo-rgb) / .28); }
  .nav a[aria-current="page"] { border-bottom-color: var(--c-sun); }

  .screen__inner { padding-bottom: 96px; }
  .screen__type--mega h1 { font-size: clamp(34px, 11vw, 54px); max-width: none; }
  .chain { grid-template-columns: none; }
  .chain__row { grid-template-columns: 4.2em minmax(0, 1fr); gap: var(--sp-4); }
  .chain__dwell { grid-column: 1 / -1; font-size: var(--fs-h3); }
  .qlist .qnum { width: 2em; }
  .vals, .titles { grid-template-columns: minmax(0, 1fr); gap: var(--gap-l); }
  .titles { gap: var(--sp-8); }
  .doc { padding-top: calc(11vh + 56px); }
}