/* =========================================================================
   Wherezit — shared stylesheet for BOTH pages (index.html EN / zh.html 中文)
   No external fonts, no CDN, no third-party anything.
   🔴 双页维护纪律：任何样式/文案改动必须两页同步验证。
   中文版排版覆盖集中在文件末尾的 html[lang="zh-CN"] 段。

   SECTION MAP (search for the number to jump):
     1   Design tokens (colour / type / spacing)  ← change the palette HERE only
     2   Reset + base typography
     3   Shared parts (containers, kickers, captions, reveal)
     4   Header
     5   Hero
     6   Problem
     7   How it works (steps + two scenes)
     8   The screen & specs
     9   Numbered triad (How it works)
     10  Specs table
     11  Straight answers
     12  Questions
     13  Footer
     14  Responsive + motion fallbacks
   ========================================================================= */


/* ── 1. DESIGN TOKENS ──────────────────────────────────────────────────────
   Paper off-white background, warm near-black ink, one low-saturation blue.
   Contrast ratios noted where they were checked against WCAG AA.
   🔴 无暗色主题（精髓修正令 §3·Oura 同款）：全站单一纸白美术，
   系统深色下渲染必须与浅色完全一致——不要再加暗色媒体查询。 */
:root{
  --bg:#FDF9F2;              /* page background — paper off-white */
  --surface:#FBF7F0;         /* cards / panels */
  --surface-2:#F6F0E7;       /* 暖米阶梯 5 级之三（R-145 设计规格 §5） */
  --panel:#F1EDE4;           /* solid warm paper panel */
  --panel-2:#EDE7DC;         /* 暖米阶梯最深一级——区块与底只差 1-2 级，不靠投影 */
  --ink:#211D18;             /* body + headings (warm near-black, never pure black) */
  --ink-soft:rgba(33,29,24,.70);   /* ≈6.04:1 on #FDF9F2 — passes AA */
  --ink-faint:rgba(33,29,24,.64);  /* ≈4.95:1 — passes AA for body size */
  --accent-deep:#2F5E9E;     /* readable blue text */
  --line:rgba(33,29,24,.14);
  --line-soft:rgba(33,29,24,.08);
  --amber:#B87333;           /* the amber indicator light */
  --amber-text:#8A5527;      /* 大地色文字级（设计规格 §5：装饰强调禁蓝）。
                                ≈6.0:1 on --bg / ≈5.1:1 on --panel-2 — 小字 AA 过 */

  /* System font stacks only — zero network requests */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:ui-serif,Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* Widths + section rhythm. English measure is set in ch/rem, not em. */
  --w-wide:min(1180px,calc(100% - 44px));
  --hdr-h:61px;              /* 页眉实高·hero 用它算首屏剩余高度 */
  --w-mid:min(1000px,calc(100% - 44px));
  --w-narrow:min(720px,calc(100% - 44px));
  --pad-section:clamp(110px,13vw,200px);  /* 设计规格 §2：对齐 Oura 大段量级 */
  --r-lg:22px;

  /* 正文三档（设计规格 §1）——全站字号只允许这三档 + 结构性小标 */
  --fs-narrative:clamp(17px,1.35vw,19px);  /* 读的部分 · lh 1.75 */
  --fs-note:14.5px;                        /* 查的部分 · lh 1.7 */
  --fs-caption:11.5px;                     /* 图注 mono */
}


/* ── 2. RESET + BASE TYPOGRAPHY ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:clamp(88px,14vh,130px);overflow-x:hidden}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.68;
  overflow-x:hidden;                 /* the body never scrolls sideways */
  -webkit-font-smoothing:antialiased;
}
/* Fixed ambient wash behind everything. Does not move on scroll. */
/* 合并施工令 §5a：环境光洗全暖调——原右上冷蓝 radial 与末端蓝白渐变
   在大片空白区把纸洗成灰蓝（PM 截图实证），按"蓝只留链接"纪律改暖。 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 88% 6%, rgba(224,196,158,.18), transparent 30%),
    radial-gradient(circle at 8% 94%, rgba(235,215,188,.40), transparent 42%),
    linear-gradient(140deg, rgba(255,255,255,.94), rgba(253,249,242,.92) 55%, rgba(250,244,235,.85));
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
/* 字阶（设计规格 §1）：Oura 签名是「大而轻」——大字号靠细字重撑住。
   标题行高 1.1 × 正文行高 1.75 的反差是呼吸感来源，两端都不折中。 */
h1,h2,h3{margin:0}
h1{font-size:clamp(44px,7.5vw,100px);font-weight:300;line-height:1.08;letter-spacing:-.025em}
h2{font-size:clamp(32px,4.6vw,64px);font-weight:350;line-height:1.12;letter-spacing:-.02em;max-width:20ch}
h3{font-size:clamp(20px,2vw,28px);font-weight:500;line-height:1.25}

/* serif 点睛（§1）：sans 大标题内嵌 1 处 serif 斜体词，每标题至多 1 处，全站 ≤5 处 */
.accent{font-family:var(--font-serif);font-style:italic;font-weight:300}
p{margin:0}
a{color:inherit}
::selection{background:var(--accent-deep);color:#fff}

/* Keyboard focus ring — one rule for every interactive element.
   No border-radius here: outline already follows the element's own corners. */
a:focus-visible,summary:focus-visible,video:focus-visible,input:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-deep);
  outline-offset:3px;
}
main:focus{outline:none}

/* Screen-reader-only text: visually hidden, still in the a11y tree. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ── 3. SHARED PARTS ──────────────────────────────────────────────────── */
.section{padding:var(--pad-section) 0;position:relative}
.wrap{width:var(--w-wide);margin:0 auto}
.wrap-mid{width:var(--w-mid);margin:0 auto}
.wrap-narrow{width:var(--w-narrow);margin:0 auto}

/* Monospace micro-label — the source of the whole "editorial" feel. */
.kicker{
  display:block;font-family:var(--font-mono);
  font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px;
}

.section-head{margin-bottom:clamp(24px,2.4vw,32px)}  /* §2：标题→正文 24-32px */

/* Media frame — shared by every photo on the page. */
.frame{
  width:100%;border-radius:var(--r-lg);
  border:1px solid var(--line-soft);object-fit:cover;background:var(--panel);
}

/* Horizontal scroller for content too wide to shrink (the teardown diagram).
   Keeps the BODY from ever scrolling sideways. */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.scroller::-webkit-scrollbar{height:6px}
.scroller::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.scroller img{min-width:620px}

/* The only entrance animation on the site.
   §6：去位移只留淡入——纸不会从下面滑进来。 */
.reveal{opacity:0;transition:opacity .45s ease}
.reveal.in{opacity:1}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:0 0 8px 0}
.skip:focus{left:0;top:0}


/* ── 4. HEADER ────────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  width:var(--w-wide);margin:0 auto;
  display:flex;align-items:center;gap:18px;
  min-height:60px;padding:10px 0;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:-.015em;text-decoration:none;flex:0 0 auto}
.brand-mark{width:22px;height:22px;display:block}
.footer-tagline .brand-mark{display:inline-block;vertical-align:-4px;margin-right:10px}
.nav{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap}
.nav a{font-size:13.5px;color:var(--ink-soft);text-decoration:none;transition:color .2s ease}
.nav a:hover{color:var(--ink)}


/* ── 5. HERO ──────────────────────────────────────────────────────────── */
/* ── HERO：顶部环境视频 ────────────────────────────────────────────
   素材 promo.mp4 实为 1080×810（4:3）。桌面容器比例区间由下面的
   height:min() 决定，cover 裁切见该处注释；object-position 50% 42%
   决定保留哪一带（设备与便签在可视中带）。 */
.hero{position:relative;padding:0;display:grid;grid-template-columns:1fr}
.hero-scene{grid-area:1/1}
.hero-body{grid-area:2/1}
.hero-scene{
  position:relative;overflow:hidden;background:var(--panel);
  /* 整屏出血：挣脱 .wrap 的容器宽度，贴到视口两边 */
  width:100vw;margin-left:calc(50% - 50vw);
  /* 高度 = 首屏减掉页眉，即"占满第一屏"。
     100vw/1.45 给容器比例设下限：素材 4:3（1.333）时，1.45 容器下为
     纵向裁切 1−1.333/1.45 ≈ 8%（无横向裁切）；更窄视口转为轻度横向裁。
     svh 让移动端地址栏收放时不跳。 */
  height:min(calc(100svh - var(--hdr-h)), calc(100vw / 1.45));
  min-height:360px;
}
@supports not (height: 100svh){
  .hero-scene{height:min(calc(100vh - var(--hdr-h)), calc(100vw / 1.45))}
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;      /* 略偏上：把设备与便签留在可视中带 */
  display:block;
  opacity:0;transition:opacity 1.1s cubic-bezier(.25,1,.5,1);
}
.hero-video.ready{opacity:1}
/* 精髓修正令 §4：视频底部渐隐入纸白，标题直接站在纸上——无药丸无投影 */
.hero-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, var(--bg) 26%, rgba(253,249,242,0) 64%);
}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(rgba(33,29,24,.9) .5px, transparent .5px);
  background-size:3px 3px;
}
.hero-overlay{grid-area:1/1;position:relative;align-self:end;z-index:1;padding-bottom:clamp(26px,4vw,56px)}
.hero-overlay h1{max-width:17ch}
.hero-eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink);margin:0 0 14px;
  /* 站在渐变纸白区上，无底片无投影。墨色而非 amber-text：
     12px 压视频渐变区，amber 深帧实测只有 3.98:1（AA 需 4.5），
     墨色 worst-frame ≥6:1——可读性优先于装饰色。 */
}
.hero h1 .l2{display:block;color:var(--ink-soft)}
/* 视频下方的支撑文案：回到纸底常规流，正常可读 */
.hero-body{padding:clamp(30px,4vw,52px) 0 clamp(44px,5vw,70px)}
.hero-sub{font-size:var(--fs-narrative);line-height:1.75;color:var(--ink-soft);max-width:55ch;margin:0}
@media (max-width:995px){
  /* 手机：视频退回普通区块，文案排到它下面——小屏上叠字必然读不了，
     可读性优先于电影感。容器 4/3 与素材 1080×810 同比例——零裁切。 */
  .hero-scene{height:auto;aspect-ratio:4/3;min-height:0}
  .hero-video{object-position:50% 50%}
  .hero-scene::after{background:none}
  .hero-overlay{grid-area:2/1;position:static;align-self:auto;padding:clamp(26px,6vw,38px) 0 0}
  .hero-body{grid-area:3/1}
  .hero-overlay h1{max-width:none}
  .hero-body{padding-top:clamp(20px,4vw,30px)}
}

@media (prefers-reduced-motion:reduce){
  .hero-video{opacity:1;transition:none}
}


/* ── 6. PROBLEM ───────────────────────────────────────────────────────── */
.problem{background:linear-gradient(180deg,transparent,rgba(235,224,209,.32))}
/* The opening statement IS the section heading — styled as display serif. */
/* 精髓修正令 §1：全站唯一情绪宣言，必须是滚动中最响的一屏。
   ui-serif=New York 可变字重，350 在 display 级立得住。 */
.problem h2{
  font-family:var(--font-serif);font-weight:350;
  font-size:clamp(48px,5.8vw,80px);line-height:1.15;letter-spacing:-.02em;
  max-width:34ch;color:var(--ink);
}
.problem p{margin-top:28px;color:var(--ink-soft);line-height:1.75;font-size:var(--fs-narrative);max-width:55ch}


/* ── 7. HOW IT WORKS ──────────────────────────────────────────────────── */
/* Two mounting places, side by side: the fridge door and the family board.
   The pair IS the argument — the product is magnetic, not a fridge part.
   模式 B 出血双联（§3）：两图并排 100vw 出血，图注收回 wrap。
   出血媒体贴边，圆角与边线去掉——纸上开窗，不是贴卡片。 */
.dual-figure{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(34px,4vw,52px);
}
.dual-figure img{aspect-ratio:4/3;border-radius:0;border:0}
.moment{
  display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);
  gap:clamp(14px,3vw,44px);
}
.moment-when{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.6;padding-top:.45em;
}
/* 精髓修正令 §2：场景标题升 h2 级（55-64px/300）——痛点核心不许用字号说"这不重要" */
.moment-body .moment-title{
  font-weight:300;margin-bottom:clamp(18px,2vw,28px);max-width:16ch;
}
.moment-body p{font-size:var(--fs-narrative);color:var(--ink-soft);line-height:1.75;max-width:55ch;margin-bottom:16px}
.moment-body p:last-child{margin-bottom:0}
.moment-body em{font-style:italic;color:var(--ink)}


/* ── 8. THE SCREEN & SPECS ────────────────────────────────────────────── */
/* 模式 A 通栏媒体（§3）：场景短片 100vw 出血，图注收回 wrap */
.screen-figure{margin-bottom:clamp(34px,4vw,52px)}
.film-scene{width:100vw;margin-left:calc(50% - 50vw)}
/* height:auto 必须写：width 属性被 .frame 的 width:100% 覆盖，但 height="1080"
   这个展示性属性仍生效，会把 aspect-ratio 顶掉、让 cover 悄悄裁边。 */
.screen-figure .frame{aspect-ratio:16/9;height:auto;border-radius:0;border:0}
.screen-prose{display:grid;gap:16px;max-width:55ch}
.screen-prose p{font-size:var(--fs-narrative);color:var(--ink-soft);line-height:1.75}
.screen-prose p.first{
  font-size:clamp(17px,1.8vw,21px);line-height:1.62;color:var(--ink);
  letter-spacing:-.012em;max-width:44ch;
}
.specs-figure{margin:clamp(24px,3vw,40px) 0 clamp(34px,4vw,52px)}  /* §4：拆解图开场，不再是附录位 */
.specs-figure img{aspect-ratio:1280/649;object-fit:contain;background:transparent;border:0;border-radius:0;max-height:420px;margin:0 auto}  /* §4/修正令 §5：暖白底直接放，无卡片框 */


/* ── 9. NUMBERED TRIAD (How it works) ─────────────────────────────────── */
.tri-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(24px,3vw,38px);margin-top:clamp(40px,4.6vw,60px);
}
.tri-item{border-top:1px solid var(--line);padding-top:20px}
.tri-item .num{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;
  color:var(--ink-faint);text-transform:uppercase;display:block;margin-bottom:10px;
}
.tri-item h3{font-size:clamp(17px,1.5vw,19px);margin-bottom:12px}
.tri-item p{font-size:var(--fs-note);line-height:1.7;color:var(--ink-soft)}
.tri-item em{font-style:italic;color:var(--ink)}


/* ── 10. SPECS TABLE ──────────────────────────────────────────────────── */
/* One row per fact. The first three rows are what it DOES; the hardware
   follows. Never a card grid again — cards made 17 equal-weight tiles. */
.spec-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:24px}
.spec-table{width:100%;min-width:540px;border-collapse:collapse;text-align:left}
.spec-table th,.spec-table td{
  border-bottom:1px solid var(--line);
  padding:15px 0;vertical-align:baseline;font-weight:400;
}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:1px solid var(--line)}
.spec-table th{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);
  white-space:nowrap;width:1%;padding-right:clamp(24px,4vw,60px);
}
.spec-table td{font-size:var(--fs-note);line-height:1.7;color:var(--ink-soft)}
/* 模式 D（§3）：能力 3 行全宽大字在前；硬件行改 dl 双栏压到半屏 */
.spec-caps td{font-size:16px}
.spec-dl{column-count:2;column-gap:60px;margin:28px 0 0}
.spec-dl>div{break-inside:avoid;border-bottom:1px solid var(--line);padding:8px 0}
.spec-dl dt{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px;
}
.spec-dl dd{margin:0;font-size:var(--fs-note);line-height:1.62;color:var(--ink-soft)}


/* ── 11. STRAIGHT ANSWERS (privacy) ───────────────────────────────────── */
.answers{background:var(--panel-2)}
.answers-figure{margin-bottom:clamp(30px,3.6vw,46px)}  /* §3：图挪文前·w-mid 全宽·图领文随 */
.answers-figure img{aspect-ratio:3/2}   /* w-mid 全宽下压高度（§9.2）；cover 上下各裁 ~5.5% */
.answer-list{display:grid;gap:clamp(24px,2.8vw,34px)}
.answer-item{display:grid;grid-template-columns:minmax(0,4ch) minmax(0,1fr);gap:clamp(14px,2.4vw,28px);align-items:start}
.answer-item .num{font-family:var(--font-mono);font-size:12px;color:var(--amber-text);letter-spacing:.06em;padding-top:.3em}
.answer-item p{font-size:var(--fs-narrative);line-height:1.75;color:var(--ink-soft);max-width:55ch}
.answer-state{margin-top:clamp(38px,4.2vw,54px);display:grid;gap:16px;max-width:70ch}
.answer-state p{font-size:var(--fs-note);line-height:1.7;color:var(--ink-soft)}
.answer-state strong{color:var(--ink);font-weight:600}
.answers-foot{
  margin-top:clamp(34px,3.8vw,48px);font-family:var(--font-mono);font-size:12px;
  letter-spacing:.04em;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:20px;
}


/* ── 12. QUESTIONS ────────────────────────────────────────────────────── */
.faq-list{margin-top:clamp(34px,4vw,50px);border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:var(--fs-narrative);font-weight:500;color:var(--ink);
  letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:18px;color:var(--ink-faint);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{color:var(--accent-deep)}
.faq-answer{padding:0 0 22px;font-size:var(--fs-narrative);line-height:1.75;color:var(--ink-soft);max-width:55ch}
.faq-answer p+p{margin-top:16px}


/* ── 13. FOOTER ───────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line);padding:clamp(52px,6vw,80px) 0 40px;background:var(--surface-2)}
.footer-tagline{font-size:clamp(17px,1.8vw,21px);letter-spacing:-.018em;max-width:34ch;color:var(--ink)}
.footer-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(26px,3vw,40px);margin-top:clamp(38px,4vw,54px);
}
.footer-cols h2{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin-bottom:14px;
}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-cols a{font-size:14px;color:var(--ink-soft);text-decoration:none}
.footer-cols a:hover{color:var(--ink)}
.footer-cols li span{font-size:14px;color:var(--ink-faint)}
.footer-bottom{margin-top:22px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-faint)}


/* ── 14. RESPONSIVE + MOTION FALLBACKS ────────────────────────────────── */

/* Phone */
@media (max-width:640px){
  :root{
    --w-wide:calc(100% - 32px);
    --w-mid:calc(100% - 32px);
    --w-narrow:calc(100% - 32px);
  }
  .header-inner{min-height:auto;gap:10px}
  /* 合并施工令 §1：横滑行右缘半切是全站唯一真实"切边"（无滚动条无提示），
     改折行——页眉高度由 --hdr-h ResizeObserver 自同步，无连带。 */
  .nav{gap:8px 16px;margin-left:0;width:100%;order:3;flex-wrap:wrap}
  .nav a{white-space:nowrap;font-size:13px}
  /* 手机首行：brand … [语言切换 状态标]，导航自己占第二行 */
  .lang-switch{order:1;margin-left:auto}
  .moment{grid-template-columns:1fr;gap:12px}
  .moment-when{padding-top:0}
  .answer-item{grid-template-columns:1fr;gap:6px}
  /* Phone: one fact per stacked pair instead of a sideways-scrolling table.
     Still one row per fact — the label just sits above its value. */
  .spec-table{min-width:0}
  .spec-table th,.spec-table td{display:block;width:auto;padding:0}
  .spec-table th{border-bottom:0;padding-top:16px}
  .spec-table td{padding:5px 0 16px}
  .spec-table tr:first-child td{border-top:0}
  .spec-dl{column-count:1}          /* §9.8：双栏降单栏 */
  .dual-figure{grid-template-columns:1fr}  /* §9.8：出血双联降纵排 */
}

/* Respect reduced-motion: no reveal animation, no smooth scrolling. */
/* 打印与整页渲染工具不跑 IntersectionObserver——reveal 强制可见 */
@media print{.reveal,.hero-video{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1}
}

/* ── 15. 语言切换（两页共用·header 内 nav 之后）───────────────────────── */
.lang-switch{
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
}
.lang-now{color:var(--ink);font-weight:600}
.lang-sep{color:var(--line);user-select:none}
.lang-link{color:var(--ink-faint);text-decoration:none;transition:color .2s ease}
.lang-link:hover{color:var(--ink)}

/* 中文断行锁：把语义单元（器物短语、人名等）锁成不可拆的整体。
   预留工具类（记忆规约）——当前零使用属预期，勿当死代码删。 */
.nb{white-space:nowrap}


/* ── 15c. 邮箱收集（R-147·最小收集）─────────────────────────────────── */
.notify-form{max-width:55ch}
.notify-lede{font-size:var(--fs-narrative);line-height:1.75;color:var(--ink);margin-bottom:22px}
.notify-row{display:flex;gap:10px;flex-wrap:wrap}
.notify-row input[type="email"]{
  flex:1;min-width:220px;font:inherit;font-size:var(--fs-narrative);
  padding:12px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);
}
.notify-row input[type="email"]::placeholder{color:var(--ink-faint)}
.notify-row button{
  font:inherit;font-size:15.5px;font-weight:500;cursor:pointer;
  padding:12px 22px;border:1px solid var(--ink);border-radius:12px;
  background:var(--ink);color:var(--bg);transition:opacity .2s ease;
}
.notify-row button:hover{opacity:.85}
.notify-row button:disabled,.notify-row button.busy{opacity:.5;cursor:default}
/* 蜜罐：视觉与辅助树双隐藏，真人不可达 */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.notify-msg{margin-top:12px;font-size:var(--fs-note);line-height:1.7;color:var(--ink);min-height:1.7em}
.notify-privacy{margin-top:16px;font-size:13px;line-height:1.7;color:var(--ink-faint);max-width:55ch}

/* ── 15b. 404 页（R-147·单页双语·极简纸感）──────────────────────────── */
.notfound{
  min-height:100svh;display:grid;place-content:center;justify-items:start;
  width:var(--w-mid);margin:0 auto;gap:6px;
}
.notfound h1{font-size:clamp(40px,6vw,80px)}
.notfound-zh{font-size:var(--fs-narrative);color:var(--ink-soft);margin-top:10px}
.notfound-links{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.notfound-links a{
  font-size:15.5px;color:var(--ink);text-underline-offset:4px;
}


/* ── 16. 中文版排版覆盖（仅 zh.html·html[lang="zh-CN"] 生效·设计规格 §7）──
   规则：中文限宽用 em 不用 ch——ch 基于西文 "0" 的宽度，对 CJK 失真；
   换算 N ch ≈ N/2 em。正文行高 1.9；字号=英文 token +1px（token 化，非游离）。
   中文负字距 -0.01em 封顶（西文 -0.025 不可照搬）；标题假斜体禁用。
   系统中文字体栈（PingFang SC 等），零 webfont 下载。 */
html[lang="zh-CN"]{
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Segoe UI",Roboto,sans-serif;
  --font-serif:"Songti SC","Noto Serif CJK SC",ui-serif,Georgia,serif;
  /* 三档字号的中文位（§7：英文基础 +1px；写进 token，不散布到元素） */
  --fs-narrative:clamp(18px,1.45vw,20px);
  --fs-note:15.5px;
}
html[lang="zh-CN"] body{font-size:17px;line-height:1.9}
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3{letter-spacing:-.01em}   /* §7：中文负字距封顶 */
html[lang="zh-CN"] h1{line-height:1.18}
html[lang="zh-CN"] h2{line-height:1.28;max-width:14em}
html[lang="zh-CN"] h3{line-height:1.42}
/* 中文没有真斜体——引语与点睛都不倾斜。
   serif 点睛的中文等价（§7）：宋体直立，同样每标题至多 1 处。 */
html[lang="zh-CN"] em{font-style:normal}
html[lang="zh-CN"] .accent{font-family:"Songti SC","Noto Serif CJK SC",serif;font-style:normal;font-weight:400}
/* §7：中文小字号禁细——移动端把 300/350 提回 400 */
@media (max-width:640px){
  html[lang="zh-CN"] h1,html[lang="zh-CN"] h2{font-weight:400}
  /* .moment-title 特异性 0,2,0 会压过上行 0,1,2——单独点名（审计 major） */
  html[lang="zh-CN"] .moment-body .moment-title{font-weight:400}
}

/* eyebrow：中文无大写体系 → 小标签用字距撑（§7） */
html[lang="zh-CN"] .hero-eyebrow{font-size:13px;letter-spacing:.1em}

html[lang="zh-CN"] .nav a{font-size:14px}
html[lang="zh-CN"] .hero-overlay h1{max-width:10em}
html[lang="zh-CN"] .hero-sub{max-width:30em;line-height:1.88}
html[lang="zh-CN"] .problem h2{max-width:15em;line-height:1.3;font-weight:400}  /* 宋体 display 级 400——笔画不糊 */
html[lang="zh-CN"] .problem p{max-width:29em;line-height:1.92}
html[lang="zh-CN"] .moment{grid-template-columns:minmax(0,7em) minmax(0,1fr)}
html[lang="zh-CN"] .moment-body .moment-title{max-width:11em}
html[lang="zh-CN"] .moment-body p{max-width:29em;line-height:1.92}
html[lang="zh-CN"] .tri-item p{line-height:1.88}
html[lang="zh-CN"] .screen-prose{max-width:31em}
html[lang="zh-CN"] .screen-prose p{line-height:1.92}
html[lang="zh-CN"] .screen-prose p.first{max-width:23em;line-height:1.78}
html[lang="zh-CN"] .spec-table td{line-height:1.85}
html[lang="zh-CN"] .spec-dl dd{line-height:1.7}  /* §9.2：dl 半屏优先于 +行高 */
html[lang="zh-CN"] .spec-dl>div{padding:7px 0}   /* 中文 +1px 字号的行高代偿，压回半屏 */
html[lang="zh-CN"] .answer-item p{max-width:29em;line-height:1.9}
html[lang="zh-CN"] .answer-state{max-width:33em}
html[lang="zh-CN"] .answer-state p{line-height:1.88}
html[lang="zh-CN"] .faq-item summary{letter-spacing:0}
html[lang="zh-CN"] .faq-answer{max-width:31em;line-height:1.9}
html[lang="zh-CN"] .footer-tagline{max-width:18em;letter-spacing:0}