@font-face {
  font-family:CipaSans;
  src:url('fonts/cipa-index-sans.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap}

@font-face {
  font-family:CipaKai;
  src:url('fonts/cipa-index-kai.woff2') format('woff2');
  font-weight:400;
  font-display:swap}

/* 日文展示字体。霞鹜文楷（CipaKai）派生自 FONTWORKS 的クレー One，
   其项目说明写明「日本語版が必要な場合は、オリジナルフォントを直接使用してください」——
   日文请直接用原字体。本站据此自托管クレー One 作为日文展示字体。 */
@font-face {
  font-family:CipaKaiJP;
  src:url('fonts/cipa-index-kai-jp.woff2') format('woff2');
  font-weight:400;
  font-display:swap}

:root {
  /* 统一圆角尺度：此前 4/5/6/9/16px 混用且无规律，是观感零散的主因 */
  --r-sm:6px;
  --r-md:10px;
  --r-pill:999px;
  --paper:#fff;
  --soft:#f5f9fc;
  --ink:#263640;
  --muted:#5b6d7a;
  --blue:#326b94;
  --hover:#255577;
  --selected:#e8f1f7;
  --line:#d9e4ec;
  --control:#7c95a8;
  --font:CipaSans,CipaKai,'Noto Sans SC',sans-serif;
  --display:CipaKai,var(--font);

  /* ══ 尺度体系。唯一依据是仓库根目录的 DESIGN.md，改这里之前先改那里。 ══
     间距八档接自 2026-09-21 的 ui-design/tokens.css（--space-1..--space-16），
     那套 token 从未被本文件继承，导致间距长到 32 个取值、其中 17 个不是 4 的倍数。 */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;

  /* 两条轨道，共用一条左参考线（版心左边缘）。
     --w-page 给页眉页脚与各类网格；--w-prose 给一切阅读性文字；
     --w-aside 是条目详情页的来源栏。 */
  --w-page:1200px;
  --w-prose:720px;   /* 拉丁文另有取值，见下方 html[lang=en] */
  --w-aside:270px;
  /* 栅格轨道。它们和 --w-page/--w-prose 一样属于版面体系，不是「例外」——
     第一版审计漏掉 grid-template-columns 这个属性名，于是这些值一直隐身。 */
  --w-card-min:240px;
  --w-filter:216px;
  --w-label:120px;
  --gutter:40px;

  /* 字阶七档。 */
  --t-xs:12px;
  --t-sm:14px;
  --t-base:16px;
  --t-lg:20px;
  --t-xl:26px;
  --t-2xl:34px;
  --t-3xl:44px;

  /* 行高四档，按「这行字是干什么的」分，不按字号分。
     2026-09-22 收敛前是七个各自为政的值：同样是正文段落，.hero p 用 1.95、
     .summary 用 1.9、.detail-body p 用 1.95、.essay p 用 2——四个值干同一件活，
     而 :root 的注释还写着「正文用 1.85」，三方都对不上。这正是散装的样子。
     取值偏高是有意的：中日文字面率高于拉丁文，拉丁排版常用的 1.5–1.7
     放到中文段落里会挤。1.9 落在实测那一簇（1.9–2.0）的下沿。 */
  --lh-flat:1;        /* 单行控件：语言切换、字标 */
  --lh-display:1.35;  /* 展示级标题（t-3xl）：字越大，行距越该收 */
  --lh-heading:1.5;   /* 标题：h1–h3、条目标题 */
  --lh-body:1.9;      /* 正文段落 */
  --lh-note:1.8;      /* 次要小字（t-sm）：来源面板、核验带 */

  /* 全站唯一的字距调整：眉题与页脚字标这类小字大写感的短标签。
     正文不设字距——那是拉丁文的节奏，中日文加字距只会让字面更散。 */
  --tracking-eyebrow:.07em;

  --h-control:40px;
  --h-touch:44px}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/var(--lh-body) var(--font);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased}
button,input,select {
  font:inherit}
button,summary {
  cursor:pointer}
a {
  color:var(--blue);
  text-underline-offset:5px;
  text-decoration-thickness:1px}
a:hover {
  color:var(--hover)}
button,a {
  touch-action:manipulation}
button:hover {
  color:var(--hover)}
:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:4px}
[hidden] {
  display:none!important}
h1,h2,h3,p {
  margin:0}
h1,h2,h3 {
  font-weight:500;
  line-height:var(--lh-heading)}
h1 {
  font-size:var(--t-3xl);
  line-height:var(--lh-display);
  overflow-wrap:anywhere}
h2 {
  font-size:var(--t-xl)}
h3 {
  font-size:var(--t-lg)}
.container {
  width:min(var(--w-page),calc(100% - 2*var(--gutter)));
  margin:auto}
.skip:not(:focus),.sr-only {
  position:absolute;
  /* token-exempt: 视觉隐藏元素的 1px 占位 */
  width:1px;
  /* token-exempt: 视觉隐藏元素的 1px 占位 */
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap}
.skip:focus {
  position:fixed;
  z-index:5;
  top:var(--s-3);
  left:var(--s-3);
  padding:var(--s-3);
  background:var(--paper)}
.preview-bar {
  background:var(--soft);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:var(--t-xs);
  padding:var(--s-2) 0}
/* ══════════ CJK 排版全局配置 ══════════
   本块是全站中日文排版的唯一口径。每条都有实测依据，改动前请先跑
   scripts/visual/ 下的三个核查（DOM 结构、孤行、断行与避头尾），不要凭印象调。

   一、中西文混排间距（text-autospace）
   中日文与拉丁字母、数字相邻时应留约四分之一字宽。实测 Chrome 的默认行为等同
   no-autospace——不显式声明就完全没有间距，全靠文案里手敲空格，漏一处就挤在一起。
   显式写 normal 后每个边界 +4px（16px 字号下即 0.25em）：
   「本站的资料索引与网页由AI Agent编辑制作」303.11 → 307.11px。
   已有手敲空格的位置不会叠加——有空格就不算相邻，实测同一串只增了未加空格的那一处。

   二、标点挤压（text-spacing-trim）
   全角标点自带半个字宽空白，连续出现时显得松垮。实测
   「病気の基礎知識」「主な症状とその対策」（参考）：
     trim-start 368 → 360px（正确挤压）；space-all 反而 +16px；normal 与 trim-both 无变化。
   因此取 trim-start。

   三、避头尾（line-break）
   标点不得出现在行首、开括号不得落在行尾。zh/ja 用 strict。

   四、断行取值（text-wrap）
   pretty：**全站一处都不用。**675px 中文段落实测其结果与 auto 完全相同（末行仍只有 45px），
     对 CJK 不起作用；2026-09-22 又对英文正文做六段对照，行数、末行宽度、最宽行宽度逐项相同，
     对拉丁文同样没有效果。
   balance：只均衡行长、不挑断点，且会把整段压到比容器更窄——
     实测「关于本站」三行段落被压到 535px 而容器有 640px，右侧空出一大片，每行都停在词中间。
     **只能用于展示类短句和窄栏里的两三行短块**，长段落绝不可用。
     （上一版给全部 p 都加了 balance，正文因此出错。当时只验了「长段落不改变块高」——
     块高确实没变，变的是行长，验错了指标。）

   五、断点控制（.ph 短语锁定）
   balance 不认标点，所以中日文展示类短句会断在词中间（「找|到」「整|理」「団|体」）。
   模板用 Ph 组件按标点把句子切成短语，每段 nowrap，断行只能落在短语之间。
   不用 inline-block：原子盒会挤进当前行的剩余空间再在内部换行，实测把日文引文断成「を|た」。
   代价是短语宽于容器就会溢出，故容器必须容得下最长的短语，由 breaks-harness 核查。

   六、按栏宽分工
   宽栏正文（.essay p 等）：短语锁定，行宽自然填满。
   窄栏短块（卡片摘要、来源栏、定义列表）：不锁定（栏宽装不下整个分句，锁定必溢出），
     改用 balance 防孤字；代价是断点落在词中间，但这是中文在窄栏里本来的样子。
   手机宽度（≤600px）：一律放开锁定，339px 的容器装不下 480px 的日文分句。
   ══════════════════════════════════════ */
/* 拉丁文的行长必须单独定，不能和中日文共用一个 720px。
   **实测（1440px 视口，.essay p，16px）**：
     英文 中位 95 字符／行，最高 102   ← 远超 45–75 的舒适区，也超过 WCAG 1.4.8 的 80
     中文 中位 45                      ← 正好
     日文 中位 44                      ← 正好
   同一个 720px 对中日文合适、对英文过宽，因为每字符宽度差了三成：
   中日文全角约 16px，拉丁文实测约 7.58px。
   DESIGN.md 3.4 此前写「英文约 72 字符／行」，是按每字符 10px 估的，估错了。

   536px：先按 720 × 72/95 反推得 560px（中位 73 字符），实跑后仍有 4 个段落
   中位 79–81——那几段短词多、字符偏窄，超过 WCAG 1.4.8 的 80 字符线。
   按实测最宽的那一例反推（81 字符 ÷ 560px = 每字符 6.91px，78 × 6.91 ≈ 539）取 536px。
   最终：中位 70、全站最宽段落 78，**没有一段超过 WCAG 的线**。
   取值来自实测而不是估算，这一点是这次的教训本身。
   只改这一个 token，全站正文、导语、分隔线、说明块一起跟着变——
   分隔线与正文同宽这条（DESIGN.md 3.4 规则 3）因此仍然成立。

   为什么不用 `ch` 让它自适应：`1ch` 是字符「0」的宽度，中日文里也是半角约 8px，
   72ch 会把中文压到约 36 个全角字，比现在的 45 还窄。**ch 对 CJK 是错的尺子。**
   分语言取值与本项目既定的多语言原则一致——断行、引号、中西文间距早就是分语言的。 */
html[lang=en] {
  --w-prose:536px}
/* 英文页的弯引号改用比例宽度。正文字体是 Noto Sans SC（没有另配英文字体），它按中文排版
   把 ’ “ ” 做成全角（宽 1000，与一个汉字等宽），英文里就成了「Children’ s」——
   2026-09-25 用户在资料卡片与筛选按钮上看到。字体自带 pwid 特性，把它们换成宽 231／374 的
   比例字形（与直引号 ' 同宽），这里用对应的标准属性开启；fonts.py 子集化时保留了 pwid。
   pwid 还会把全角的 ，（）／ 等收窄，而英文页里的中日文原题带着 lang 标注，
   对它们恢复原样，免得中日文标点被挤窄。中日文页不开：那里的 “” 是中文引号，全角才对。 */
html[lang=en] body {
  font-variant-east-asian:proportional-width}
html[lang=en] [lang]:not([lang|=en]) {
  font-variant-east-asian:normal}
/* 中日文页里英文单词中间的撇号（Addenbrooke’s），由 Apos 组件包出来，见该组件注释。 */
.apos {
  font-variant-east-asian:proportional-width}
html[lang=zh-CN],html[lang=ja] {
  text-autospace:normal;
  text-spacing-trim:trim-start;
  line-break:strict;
  overflow-wrap:break-word}
/* 日文交给浏览器自带的文节断行模型，比手写的标点锁定可靠。
   实测同一段日文（550px 栏宽）：normal 断在「焦|点」，把复合词劈开；
   auto-phrase 断在「に|焦」，是正确的文节边界，而且行数不变、零版面代价。
   这条只对日文有意义（规范即为日文设计）。中文不设——中文在任意两字之间断行
   本就是正常排版，不是缺陷，见下方对断行核查口径的说明。
   只在 600px 以上启用：文节断行减少了可断位置，窄屏里这会要命——实测 320px 下
   一张日文机构卡片因此撑到 328px，横向溢出。与短语锁定同一条边界，同一个道理：
   窄屏需要每一个断点，好看要让位于放得下。 */
@media(min-width:601px) {
html[lang=ja] { word-break:auto-phrase}
}
h1,h2,h3,h4,h5,h6,.intro,.page-heading>p:not(.eyebrow),.org-note {
  text-wrap:balance}
/* 术语说明：只在条目实际用到 CIP／HSAN 等词时才出现。
   出处行用更小的字号另起一行，读者不会把它当成额外的免责声明。 */
.glossary dd small {
  display:block;
  margin-top:var(--s-2);
  font-size:var(--t-xs);
  color:var(--muted)}
/* .glossary dd 不在其列：那是多行正文而非两三行短块，
   balance 会把它压窄并让每行停在词中间——实测孤行由 4 处涨到 78 处。 */
.summary,.facts dd:not(.glossary *),.source-panel p,.disclaimer,.footer-top p,.filter-caption,.reading-notice {
  text-wrap:balance}
/* 左栏分类说明的中文例外。上面那段已经写明「中文在任意两字之间断行本就是正常排版」，
   这条不推翻它——`balance` 的问题不是断在字与字之间，而是它**刻意去找等长点**：
   「分类帮助查找，不代表质量评级或适用性判断。」21 字、栏宽 191px 容 15 字，
   均分点正好落在「质|量」中间，每次都断在同一个双字词里。解除 balance 交给贪心填充，
   第一行填满到「…不代表质量评级或」（正好 15 字），「质量」保持完整。
   **只对中文设**，实测理由：
   - 英文靠空格断行，本就不会劈词，改了只是换个断点，没有收益。
   - 日文在 601px 以上已有 word-break:auto-phrase（见上），601px 以下刻意不启用。
     若此处一并解除 balance，日文 390px（正是 iPhone 宽度）会断成「…示すも／のでは」，
     把「もの」劈开——用一个中文的改善换一个日文的退步。
   同理不用 `word-break:auto-phrase` 兜底：它只有 Chromium 支持，Safari／iOS 上会
   退化成纯贪心，受影响的恰好是日文手机读者。 */
html[lang=zh-CN] .filters .filter-caption {
  text-wrap:auto}
.ph {
  white-space:nowrap}
/* 英文的防孤字：只把末尾两个词绑在一起，始终生效（两个词不会撑破任何栏宽）。
   不并入 .ph——.ph 在窄屏会被放开，而这两个词在任何宽度下都该绑住。 */
.ph-widow {
  white-space:nowrap}
/* 窄栏不锁定：来源栏只有 230—270px，而日文分句「原サイトで適用範囲と版をご確認ください。」
   单个短语就要 280px，锁定必然撑破容器。窄栏回到中日文的自然换行。 */
/* 多行正文一律不锁定。锁定只服务于「一两行、整体读」的展示类短句；套到正文段落上，
   每行都只在标点处结束，长短悬殊，读起来像分行的韵文——用户的原话是「排版像散文诗一样业余」。
   实测（1280px，全站 103 个三行以上的锁定文本块）：44 个因锁定而右边缘参差度恶化 40px 以上，
   且几乎全是日文——日文两个读点之间的从句长，一句一行的落差最大。最差的几例：
     ja/resources/eu06     参差 297px → 解除后 10px
     ja/terms              312px → 58px
     ja/corrections        305px → 48px
     ja/about              254px → 14px
     ja/experience         236px → 8px
   中文从句短，受影响小，但判断标准是同一条：正文该行行填满，不该行行断在标点。

   **这笔交易的代价要记住**：解除锁定后，正文段落的末行短小（孤行）会变多——
   全站 1280px 实测由 9 处升到 22 处。仍然值得：参差影响一个段落的每一行，
   孤行只影响末一行；而且中日文段落的末行本来就落在哪算哪，短一点是常态，
   行行断在标点却不是。后人若看到孤行数上升就想回滚，请先跑一遍 ragged-harness。 */
.source-panel .ph,.summary .ph,
.essay p .ph,.detail-body p .ph,.condition-summary p .ph,.glossary dd .ph,
.reading-notice .ph,.coverage-note p .ph,.disclaimer .ph,.footer-top p .ph {
  white-space:normal}
/* 手机宽度下放开：339px 的容器装不下 480px 的日文分句，硬撑 nowrap 会出横向滚动条，
   那比断在词中间更糟。600px 以上才有余量保证短语放得下（实测 560px 已全部通过）。 */
/* 窄屏块已移到 800px 块之后，见下方。
   **媒体查询没有优先级，靠源码顺序决胜**：320px 时 ≤600／≤800／≤1000 三个条件同时成立，
   写在后面的赢。此前把窄屏规则并到文件前部，实测 320px 立刻冒出 14 处横向溢出。 */

.header {
  /* token-exempt: 页眉高度由字标图固有高度 58px 加上下内边距决定 */
  min-height:106px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-4);
  border-bottom:1px solid var(--line)}
.brand {
  flex:none;
  display:block}
/* 字标：2026-09-22 换成圆角 CF 版（v2）的透明横标，400×126。
   **旧写法是一个裁切窗口**：184×58 的盒子 ＋ overflow:hidden，img 放大到 268px
   再用 -42/-16 负偏移把有用的部分抠出来——因为旧图带大片留白。
   新素材包的透明版已经去掉留白，所以按原比例整图显示即可，
   裁切、负定位、放大、以及英文页那一整套覆盖规则全部删除。
   素材包的使用说明专门提醒过这一点：「不能只覆盖图片文件」。
   184px 宽落在它建议的 180—200px 区间内，高度 184×126/400 ≈ 58px，
   与旧值相同——页眉高度不变。 */
.brand-art {
  display:block;
  /* token-exempt: 字标图的固有几何，由 PNG 原件比例决定，不属版面尺度 */
  width:184px}
.brand-art img {
  display:block;
  width:100%;
  height:auto}
.header nav:not(.languages) {
  margin-left:auto;
  display:flex;
  gap:var(--s-5);
  align-items:center}
.header nav:not(.languages) a {
  font-size:var(--t-sm);
  text-decoration:none;
  color:var(--muted);
  padding:var(--s-3) 0;
  white-space:nowrap}
.header nav:not(.languages) a[aria-current=page] {
  color:var(--blue);
  font-weight:600;
  text-decoration:underline}
/* 语言区：软底槽 + 当前项白色凸起的分段控件。
   不用硬边框与分隔线——在 13px 小字上边框会紧贴字形，显得拥挤。
   不用 overflow:hidden——宽度不足时会把末项裁掉，改为允许换行由 flex-wrap 处理。 */
/* 语言区是 header 里的第二个 nav，通用导航规则（.header nav / .header nav a）已统一排除它，
   否则那些规则的优先级更高，会把这里的内边距、字号、颜色全部盖掉——
   实测未选中项的左右内边距被清成 0，于是切换语言时三个选项和整条控件都跟着跳。 */
.languages {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:var(--s-1);
  margin-left:var(--s-3);
  padding:var(--s-1);
  border-radius:999px;
  background:var(--soft)}
.languages>* {
  font-size:var(--t-sm);
  line-height:var(--lh-flat);
  min-height:var(--h-control);
  padding:0 var(--s-3);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  white-space:nowrap;
  text-decoration:none;
  color:var(--muted);
  border-radius:999px;
  transition:background .15s,color .15s}
/* 选中项是粗体、未选中是常规，每项的宽度因此随选中状态变化——每切一次语言，
   三个选项和整条控件都会跳一下。这里用一个隐藏的粗体副本把宽度预留出来：
   纵向排列时副本与文字上下堆叠，容器宽度取两者较大值，也就是恒为加粗后的宽度。
   height:0 保证不占高度，visibility:hidden 保证不被朗读、不可见、不可点。 */
.languages>*::after {
  content:attr(data-label);
  font-weight:600;
  height:0;
  overflow:hidden;
  visibility:hidden;
  pointer-events:none}
.languages>[aria-current=true] {
  background:var(--paper);
  color:var(--blue);
  font-weight:600;
  box-shadow:0 1px 2px rgba(38,54,64,.12)}
.language:hover {
  color:var(--ink)}
.language:focus-visible {
  color:var(--blue)}

/* 首屏收为单栏。原先是「主栏＋270px 小标语框」的两列，而那个框里装的是第三句标语
   （标题、导语已各有一句）。三句并列、互不统属，正是版面显得不规整的根源；
   框本身在 800px 以下还是隐藏的，等于只为宽屏加了一块装饰。整块删除，不另找替代。

   **不给 .hero 本身加 max-width**：它带着 .container，而 .container 有 margin:auto，
   两者相遇会把整块**居中**从而右移——实测 760px 时左边缘落在 340，而页眉在 120。
   要限制宽度就限制它的子元素，父级保持版心。见 DESIGN.md 第 3.4 节规则 2。 */
/* ── 首屏两栏 ──
   左栏是阅读栏（病名、索引名、实数导语、「CIPA 是什么」），右栏是「本站怎么核验」。
   **为什么这么排**：读者判断要不要信任一个索引站，就发生在读到病名和定义的那一刻；
   把三条核验口径推到折线以下，等于让最该并置的两件事错开一屏。
   并栏之后地区入口也进了首屏，「从哪开始」随之在首屏内。

   右栏宽度用 `1fr` 吃掉剩余，不写字面值：1200 − 720 − 64 = 416px。
   它装的是三组「标签 ＋ 一句话」，不是正文——416px 对**正文**偏窄
   （中文约 26 字／行，低于行长核查的 30 字下限），对短标签正好。
   这条边界是行长核查量出来的：同一片空间，放标签可以，放正文不行。

   分类胶囊横跨两栏：它是导航栅格不是正文，七个胶囊总宽 855px，
   此前被 `.hero>*` 一并套上阅读栏而折成两行，右侧 480px 空着。 */
.hero {
  display:grid;
  /* **用比例栏，不用固定栏。** 写成 `minmax(0,var(--w-prose)) minmax(0,1fr)` 时，
     左栏会先长到 720px 再把剩余给右栏——空间不够时它不收缩，直接把栅格撑破：
     实测 801px 视口下文档宽 809，横向溢出 8px（无障碍核查报的）。
     2:1 的比例栏在任何宽度下都按比例分，左栏再由 `.hero-main` 的
     max-width 封在阅读栏上，两件事各管各的。 */
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:var(--s-5) var(--s-8);
  align-items:start;
  padding-block:var(--s-8) var(--s-6)}
.hero-main>* {
  max-width:var(--w-prose)}
.hero-browse {
  grid-column:1 / -1}
.eyebrow {
  font-size:var(--t-xs);
  letter-spacing:var(--tracking-eyebrow);
  color:var(--blue);
  font-weight:500}
.hero h1 {
  font:400 clamp(var(--t-2xl),3.3vw,var(--t-3xl))/var(--lh-display) var(--display);
  margin-top:var(--s-4)}
.intro {
  margin-top:var(--s-5);
  /* 三语实测：中文单行需 673px、日文 801px、英文 1015px；hero 主栏可用约 870px。
     取 720px——中文单行放得下且留 47px 余量，英日在合理位置断为两行（约 43 CJK／63 拉丁字符）。 */
  max-width:var(--w-prose);
  color:var(--muted);
  line-height:var(--lh-body)}
/* 首页的病症说明框。**2026-09-22 曾被整块误删**：当时删除 .index-note 用的是
   「从 .index-note { 剪到 .hero-browse {」的区间剪除，而本规则正好夹在两者之间，
   于是首屏最重要的那个框连续两轮渲染成裸文字，六个核查没有一个能发现。
   教训：区间剪除不看中间有什么，等于蒙眼动刀。
   放在主栏而非侧栏——侧栏在 800px 以下是隐藏的，手机读者看不到。
   医学表述不由本站自撰，取自权威来源并署名出处。 */
.condition-summary {
  margin-top:var(--s-5);
  padding:var(--s-4) var(--s-5);
  /* token-exempt: 3px 强调竖线是微调，小于尺度最小档 */
  border-left:3px solid var(--blue);
  background:var(--soft);
  border-radius:0 var(--r-md) var(--r-md) 0}
.condition-summary h2 {
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--blue);
  margin-bottom:var(--s-2)}
.condition-summary p {
  font-size:var(--t-base)}
.condition-summary small {
  display:block;
  margin-top:var(--s-2);
  font-size:var(--t-xs);
  color:var(--muted)}
/* 首屏浏览入口是主行动点：本站条目不多，读者直接看完比搜索快。
   实测搜索只在本站自写的标题与说明里做子串匹配，故首页不放搜索框。 */
.hero-browse {
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin-top:var(--s-5)}
.hero-browse a {
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:40px;
  padding:0 var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--paper);
  font-size:var(--t-sm);
  text-decoration:none;
  color:var(--ink)}
.hero-browse a:hover {
  border-color:var(--control);
  background:var(--soft);
  color:var(--blue)}
.hero-browse .chip-count {
  font-size:var(--t-xs);
  color:var(--muted)}
.hero-browse .browse-all {
  border-style:dashed;
  color:var(--blue)}
.search-box {
  display:flex;
  gap:var(--s-3);
  align-items:center;
  padding:var(--s-2);
  border:1px solid var(--control);
  border-radius:var(--r-md);
  background:var(--paper)}
.search-box:focus-within {
  outline:2px solid var(--blue);
  outline-offset:2px}
.search-box input {
  border:0;
  background:transparent;
  min-width:0;
  width:100%;
  height:var(--h-touch);
  color:var(--ink);
  padding:0 var(--s-3);
  outline:none}
.search-box input::placeholder {
  color:var(--muted);
  opacity:1}
.search-box button,.button {
  border:0;
  border-radius:var(--r-sm);
  background:var(--blue);
  color:var(--paper);
  min-height:var(--h-touch);
  padding:var(--s-3) var(--s-5);
  white-space:nowrap;
  font-size:var(--t-sm);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  justify-content:center}
.search-box button:hover,.button:hover {
  background:var(--hover);
  color:var(--paper)}
.hero-links {
  display:flex;
  gap:var(--s-4);
  flex-wrap:wrap;
  margin-top:var(--s-3);
  align-items:center;
  font-size:var(--t-sm)}
.hero-links span {
  color:var(--muted)}
.hero-links a {
  padding-block:var(--s-3)}
.section {
  padding-block:var(--s-6) var(--s-7)}
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:var(--s-5);
  margin-bottom:var(--s-5)}
.section-title a {
  font-size:var(--t-sm);
  white-space:nowrap}
.section-title .eyebrow {
  margin-bottom:var(--s-2)}
.region-strip {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--w-card-min),1fr));
  gap:var(--s-3)}
.region-count {
  font-size:var(--t-xs);
  color:var(--muted);
  background:var(--soft);
  border-radius:999px;
  padding:var(--s-1) var(--s-2);
  line-height:var(--lh-flat)}
.region-strip a {
  display:flex;
  justify-content:space-between;
  padding:var(--s-4) var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  text-decoration:none;
  font-size:var(--t-sm)}
.region-strip a {
  transition:background .15s,border-color .15s,transform .15s}
.region-strip a:hover,.region-strip a:focus-visible {
  background:var(--soft);
  border-color:var(--control);
  /* 悬浮与键盘聚焦给同一种反馈：触屏与键盘用户没有 hover，不能只靠它传达可点 */
  transform:translateY(-1px)}
.region-strip a:hover .region-count,.region-strip a:focus-visible .region-count {
  background:var(--paper);
  color:var(--blue)}

.featured-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-2) var(--s-7)}
.resource-row {
  padding:var(--s-5) 0;
  border-top:1px solid var(--line)}
.resource-meta {
  display:flex;
  align-items:center;
  gap:var(--s-3);
  font-size:var(--t-xs);
  color:var(--muted);
  margin-bottom:var(--s-3);
  flex-wrap:wrap}
.tag {
  /* token-exempt: 1px 是徽标的视觉微调，小于尺度最小档 */
  padding:1px var(--s-2);
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--blue);
  font-size:var(--t-xs)}
/* 运营者名字在正文句子里的标记。**不是链接，所以不用 --blue**；
   也不缩小字号——它是句子的主语，缩小会让人以为是注解。

   **文案里必须有真空格，不能只靠内边距。** 第一版只给内边距、不写空格，
   视觉上没问题，但复制出来和屏幕阅读器读出来都是 `byCIPA.FYI Agent`——
   视觉间距不是文本间距。由 2026-09-23 的独立三语复核发现。
   现在空格写进文案，内边距相应收到 --s-1，两者相加与原来的视觉间距相当。 */
.operator-name {
  /* token-exempt: 1px 是徽标的视觉微调，小于尺度最小档 */
  padding:1px var(--s-1);
  border-radius:var(--r-sm);
  background:var(--soft)}
.resource-row h3 {
  font-size:var(--t-lg);
  line-height:var(--lh-heading)}
.resource-row h3 a {
  color:var(--ink);
  text-decoration:none}
.resource-row h3 a:hover {
  color:var(--blue);
  text-decoration:underline}
.source {
  font-size:var(--t-xs);
  color:var(--muted);
  margin-top:var(--s-2)}
.summary {
  font-size:var(--t-base);
  line-height:var(--lh-body);
  margin-top:var(--s-3)}
.row-bottom {
  margin-top:var(--s-4);
  display:flex;
  justify-content:space-between;
  gap:var(--s-5);
  align-items:center;
  font-size:var(--t-xs)}
.row-bottom>span {
  color:var(--muted)}
.row-bottom a {
  padding-block:var(--s-3);
  text-decoration:none}
.breadcrumbs {
  display:flex;
  gap:var(--s-3);
  align-items:center;
  padding-top:var(--s-5);
  flex-wrap:wrap;
  font-size:var(--t-xs);
  color:var(--muted)}
.breadcrumbs a {
  padding-block:var(--s-2)}
.breadcrumbs>span:last-child {
  /* token-exempt: 65ch 是行长守护（防超长题名撑破面包屑），按字符数而非版面尺度 */
  max-width:65ch;
  overflow-wrap:anywhere}
.page-heading {
  padding:var(--s-6) 0 var(--s-6)}
.page-heading>p:not(.eyebrow) {
  margin-top:var(--s-4);
  color:var(--muted);
  max-width:var(--w-prose)}
.page-heading .eyebrow {
  margin-bottom:var(--s-3)}
/* 机构说明：名称本身可能只是一个普通词（如 Contact），单独列出像抓取残缺。
   这一行说明它是什么、面向谁，内容取自该机构自己的页面，不作评价。 */
.org-note {
  margin-top:var(--s-3);
  color:var(--ink);
  max-width:var(--w-prose)}
.organization-card .org-note {
  margin-top:var(--s-2);
  font-size:var(--t-sm);
  color:var(--muted)}
.directory {
  display:grid;
  grid-template-columns:var(--w-filter) minmax(0,1fr);
  gap:var(--s-7);
  padding-bottom:var(--s-8)}
.filters {
  border-right:1px solid var(--line);
  padding-right:var(--s-5);
  align-self:start;
  position:sticky;
  top:24px}
.filters h2,.region-filter label {
  font-size:var(--t-xs);
  color:var(--muted);
  font-weight:500;
  display:block;
  margin-bottom:var(--s-3)}
.category-buttons {
  display:flex;
  flex-direction:column;
  gap:var(--s-1)}
.category-buttons button {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--s-3);
  text-align:left;
  padding:var(--s-3) var(--s-3);
  min-height:var(--h-touch);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:none;
  color:var(--ink);
  font-size:var(--t-sm)}
.category-buttons button>span:last-child {
  font-size:var(--t-xs);
  color:var(--muted)}
.category-buttons button:hover {
  background:var(--soft)}
.category-buttons button[aria-pressed=true] {
  color:var(--blue);
  background:var(--selected);
  border-color:var(--line);
  font-weight:600}
.region-filter {
  margin-top:var(--s-6)}
.region-filter select {
  width:100%;
  padding:var(--s-3);
  min-height:44px;
  border:1px solid var(--control);
  border-radius:var(--r-sm);
  color:var(--ink);
  background:var(--paper);
  font-size:var(--t-sm)}
.filter-caption {
  font-size:var(--t-xs);
  color:var(--muted);
  margin-top:var(--s-6)}
.result-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--s-8);
  font-size:var(--t-xs);
  color:var(--muted)}
.result-bar button,.text-button {
  border:0;
  background:none;
  color:var(--blue);
  padding:var(--s-3) 0;
  min-height:44px;
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:var(--t-sm)}
.empty {
  padding:var(--s-7) var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--soft);
  text-align:center}
.empty p {
  margin:var(--s-3) 0 var(--s-5);
  color:var(--muted)}
.empty button {
  padding:var(--s-3) var(--s-4);
  color:var(--blue);
  border:1px solid var(--control);
  background:var(--paper);
  border-radius:var(--r-sm)}
.region-empty {
  margin-bottom:var(--s-7)}
.region-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-5)}
.region-card {
  display:block;
  padding:var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  text-decoration:none;
  /* token-exempt: 机构卡最小高度取自四列网格下最长机构名加说明的实测占位，不属版面尺度 */
  min-height:170px}
.region-card:hover {
  background:var(--soft);
  border-color:var(--control)}
.region-card h2 {
  font-size:var(--t-lg);
  color:var(--ink)}
.region-card p {
  font-size:var(--t-sm);
  color:var(--muted);
  margin:var(--s-2) 0 var(--s-5)}
.region-card>span {
  font-size:var(--t-sm)}
.organization-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--s-7)}
.organization-card {
  padding:var(--s-5) 0;
  border-top:1px solid var(--line)}
.organization-card h2 {
  font-size:var(--t-lg);
  margin:var(--s-2) 0}
.organization-card h2 a {
  color:var(--ink);
  text-decoration:none}
.organization-card>p:not(.eyebrow) {
  font-size:var(--t-sm);
  color:var(--muted);
  margin-bottom:var(--s-3)}
.organization-card>a {
  font-size:var(--t-sm)}
.organization-note {
  display:flex;
  gap:var(--s-5);
  padding:var(--s-4) 0 var(--s-6);
  font-size:var(--t-sm);
  color:var(--muted)}
/* 约束加在带线的这一层，不是加在段落上（DESIGN.md 3.4 规则 3）。
   **2026-09-22 之前是反的**：段落卡在阅读栏，而上沿那条线拉满版心 1200px，
   中日文空出 480px、英文 664px——全站 27 处，是新建的线宽一致性判据抓出来的。
   这个组件此前从来没被量过：对齐核查只看左边缘，参差核查只看正文内部。 */
.coverage-note {
  max-width:var(--w-prose);
  padding:var(--s-6) 0 var(--s-7);
  border-top:1px solid var(--line)}
.coverage-note h2 {
  font-size:var(--t-lg)}
.coverage-note p {
  margin-top:var(--s-3);
  font-size:var(--t-sm);
  color:var(--muted)}
.resource-heading {
  max-width:var(--w-prose);
  padding-bottom:var(--s-6)}
.resource-heading h1 {
  font-size:var(--t-2xl)}
/* 主栏就是阅读栏，不是「剩下的都归你」。
   **2026-09-22 的教训**：起初只给 .detail-body p 加了 max-width，正文收窄到 536px
   而 section 的分隔线仍然拉满主栏 866px，中间空出 330px——正是 DESIGN.md 3.4 规则 3
   禁止的那个样子（「线拉到 1160、字在 920 就断」）。**约束要加在划定区块的那一层，
   不是加在里面的文字上**，否则线与字就会各走各的。
   右侧剩余空间留白：左对齐目录版式里，右边缘本来就不必齐。 */
.detail-layout {
  display:grid;
  grid-template-columns:minmax(0,var(--w-prose)) var(--w-aside);
  /* 来源栏贴版心右边缘，与页眉页脚同一条线；富余空间全部落在两栏之间。
     若让两栏挨着排，整页内容会停在 990px 而页眉铺到 1320px，
     右侧少一条边界，看着像没排完。左边缘由参考线管，右边界由这一条管。 */
  justify-content:space-between;
  gap:var(--s-8);
  padding-bottom:var(--s-6)}
.detail-body>section {
  padding:var(--s-5) 0;
  border-top:1px solid var(--line)}
.detail-body h2 {
  font-size:var(--t-lg);
  margin-bottom:var(--s-4)}
/* 行长由上方 .detail-layout 的主栏宽度决定，这里不再另设 max-width——
   一处约束就够，两处会各走各的。
   **2026-09-22 之前主栏是「剩下的都归你」（866px）**，正文因此实测
   英文 118 字符／行、中日文 54，而条目详情页是全站最常被读的页型。
   这个疏漏能存活这么久，是因为在行长核查建立之前，**没有任何东西在量行长**。 */
.detail-body p {
  font-size:var(--t-base);
  line-height:var(--lh-body)}
.facts {
  display:grid;
  grid-template-columns:var(--w-label) minmax(0,1fr);
  gap:var(--s-4) var(--s-5);
  margin:0;
  font-size:var(--t-sm)}
.facts dt {
  color:var(--muted)}
.facts dd {
  margin:0;
  overflow-wrap:anywhere}
.facts small {
  display:block;
  font-size:var(--t-xs);
  color:var(--muted);
  margin-top:var(--s-1)}
.source-panel {
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s-5);
  align-self:start;
  position:sticky;
  top:24px}
.source-panel h2 {
  font-size:var(--t-lg);
  margin:var(--s-3) 0}
.source-panel p:not(.eyebrow) {
  font-size:var(--t-sm);
  color:var(--muted);
  line-height:var(--lh-note)}
/* 机构名的尾部（整体收尾的括号组，或不含中日文的缩写串）整体不断行，
   让断点落在它前面。规则与实测见 `[...route].astro` 的 ownerParts。
   `text-wrap` 只在切出尾部时才覆盖：全局去掉 balance 会让贪心填充把别的
   机构名里的人名从连字符处劈开（org-il01 实测被切成 `Ben-` ／ `Gurion`）。 */
.source-owner.has-tail {
  text-wrap:auto}
.source-owner .owner-tail {
  white-space:nowrap}
.source-panel>a,.source-panel>button {
  display:block;
  margin-top:var(--s-4);
  font-size:var(--t-sm)}
/* 同 .hero：本身不设 max-width，否则会被 .container 的 margin:auto 居中右移
   （实测 880px 时左边缘落在 280，偏离页眉 160px）。改为约束子元素。
   子元素统一 --w-prose 之后，.essay 的上沿分隔线与其内部正文同宽——
   此前是「线拉到 1160、字在 920 就断」，中间空出 240px。 */
.prose-page {
  padding-bottom:var(--s-7)}
.prose-page>* {
  max-width:var(--w-prose)}
.essay {
  padding:var(--s-6) 0;
  border-top:1px solid var(--line)}
.essay h2 {
  font-size:var(--t-xl);
  margin-bottom:var(--s-4)}
.essay p {
  font-size:var(--t-base);
  line-height:var(--lh-body)}
.essay p+p {
  margin-top:var(--s-4)}
.article-toc {
  display:flex;
  gap:var(--s-3) var(--s-5);
  flex-wrap:wrap;
  padding-bottom:var(--s-6)}
.article-toc a {
  padding-block:var(--s-2);
  font-size:var(--t-sm)}
.reference-list {
  list-style:none;
  padding:0;
  margin:var(--s-5) 0 0}
.reference-list li {
  display:flex;
  justify-content:space-between;
  gap:var(--s-5);
  padding:var(--s-3) 0;
  font-size:var(--t-sm)}
.reference-list span {
  color:var(--muted);
  font-size:var(--t-xs)}
.essay pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:var(--t-sm)/var(--lh-note) var(--font);
  color:var(--muted)}
.muted {
  color:var(--muted)}
.footer {
  border-top:1px solid var(--line);
  padding:var(--s-6) 0}
.footer-top {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:var(--s-6)}
.footer strong {
  font-size:var(--t-lg);
  color:var(--blue);
  font-weight:600;
  letter-spacing:var(--tracking-eyebrow)}
.footer-top p {
  color:var(--muted);
  font-size:var(--t-xs);
  margin-top:var(--s-1)}
.footer nav {
  display:flex;
  gap:var(--s-5);
  flex-wrap:wrap}
.footer nav a {
  font-size:var(--t-sm);
  padding-block:var(--s-3)}
.disclaimer {
  font-size:var(--t-xs);
  color:var(--muted);
  margin-top:var(--s-6);
  padding-top:var(--s-5);
  border-top:1px solid var(--line)}

html[lang=en] .hero h1 {
  font-family:var(--font);
  font-weight:400}
html[lang=en] .header nav:not(.languages) {
  gap:var(--s-4)}
html[lang=en] .header nav:not(.languages) a {
  font-size:var(--t-sm)}
/* 英文页曾另有一套字标覆盖（166×53 的窗口 ＋ 242px 放大 ＋ -38/-14 偏移）。
   那是为了配合旧图里不同的留白，新透明图三语共用同一张，不再需要区分。 */

@media(max-width:1000px) {
/* 首屏并栏的下界。1000px 以下容器只有 920px，两栏一分左栏就压到 590px 上下，
   中文不到 37 字／行、右栏不足 290px——不如堆成一栏各自舒展。
   不另开断点：这条并入既有的 1000px。 */
.hero {
  grid-template-columns:minmax(0,1fr)}
  .header {
  gap:var(--s-4)}
.header nav:not(.languages) {
  gap:var(--s-4)}
.header nav:not(.languages) a {
  font-size:var(--t-sm)}
.directory {
  /* 覆写 token 而不是重写栅格：规则只留一处，改尺度时不会漏改断点里的副本 */
  --w-filter:190px;
  gap:var(--s-6)}
.filters {
  padding-right:var(--s-4)}
.detail-layout {
  --w-aside:230px;
  gap:var(--s-6)}
.languages>* {
  padding:0 var(--s-3)}
/* 窄屏把字标缩到 160px（高度由 126/400 的原比例得出，约 51px）。
   **这里原先还留着旧裁切窗口的三行**：`img{width:234px;left:-37px;top:-14px}`。
   顶层那段注释写明换新素材时「裁切、负定位、放大……全部删除」，顶层确实删干净了，
   这个 ≤1000px 块里的没删——而 `overflow:hidden` 与 `position` 已随顶层一起删掉，
   于是 left/top 不起作用，只剩一件事生效：**img 被强制撑到 234px，溢出它 160px 的父盒**。
   弹性布局按父盒的 160px 排版，图片却盖出去 74px，正好压在语言切换上。
   2026-09-23 由运营者在真实手机浏览器上发现，320–480px 全段重叠，覆盖所有手机宽度。
   自动核查没抓到：溢出检查只看文档宽度是否超出视口，**重叠不产生溢出**。已补断言。 */
.brand-art {
  /* token-exempt: 字标图的固有几何，由 PNG 原件比例决定，不属版面尺度 */
  width:160px}
/* 原先另有一个压缩成单行的 @media(max-width:1000px) 副本，
   格式与全文件不一致、容易被漏改，已并入此处。 */
.header{flex-wrap:wrap}.header .languages{margin-left:auto;flex-basis:auto;order:0}.header>nav:not(.languages){order:3;flex-basis:100%;justify-content:flex-start;flex-wrap:wrap;margin:0}
}

@media(max-width:800px) {
  .header {
  flex-wrap:wrap;
  gap:0;
  padding:var(--s-4) 0 var(--s-2)}
.header nav:not(.languages) {
  order:3;
  flex-basis:100%;
  justify-content:space-between;
  gap:var(--s-3);
  margin:var(--s-2) 0 0}
.languages {
  margin-left:auto}
.hero {
  padding-block:var(--s-6) var(--s-5)}
.hero h1 {
  /* 窄屏固定 36px 会把日文标题「CIPA 資料インデックス」断成三行（实测 320px 下 162px 高，
     英文两行 108px，中文一行 54px——同一个位置三种语言高度差三倍，版面就散了）。
     改为随视口收缩：320px 取 26px，600px 取 36px，三语都能收在一到两行。 */
  font-size:clamp(var(--t-xl),5.6vw,var(--t-2xl))}
.region-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-layout {
  display:block}
.source-panel {
  position:static;
  margin-bottom:var(--s-5)}
.directory {
  display:block}
.filters {
  position:static;
  border:0;
  padding:0;
  margin-bottom:var(--s-5)}
.category-buttons {
  flex-direction:row;
  flex-wrap:wrap;
  gap:var(--s-2)}
.category-buttons button {
  font-size:var(--t-xs);
  padding:var(--s-2) var(--s-3)}
.region-filter {
  margin-top:var(--s-4)}
.region-filter select {
  /* token-exempt: 下拉宽度取自最长地区名的实测占位，不属版面尺度 */
  max-width:300px}
.filter-caption {
  margin-top:var(--s-3)}
.footer-top {
  display:block}
.footer nav {
  margin-top:var(--s-5)}
/* 原先单独开了 @media(max-width:760px) 只为一条规则。
   760 与 800 之间没有任何其他变化，另开一档只是多一个要记的数。 */
.trust dl {
  grid-template-columns:1fr;
  gap:var(--s-4)}
}

@media(max-width:600px) {
.ph {
  white-space:normal}
/* 但保留最后一个短语不可断：窄屏放开锁定后，末行可能只剩三四个字（实测 336px 的段落末行只有 64px）。
   锁住末句可使末行至少是一个完整短句。
   不改用 balance——实测它确实能消孤行，但代价是列宽缩 14%（336→288），
   与桌面端那个被否掉的 535/640 是同一比例、同一观感问题。
   .ph-tail 由模板只加给**够短的**末句（阈值见 Ph.astro）：末句过长时锁定会撑出横向滚动条，
   实测 320px 视口下一句 28 字的日文末句要 498px，那是 WCAG 1.4.10 的硬性失败，比孤行严重。
   同时要求 :not(:first-child)——整句无内部标点的只有一个短语，锁上等于整句不可断。 */
.ph-tail:not(:first-child) {
  white-space:nowrap}
/* 原先另有 @media(max-width:560px) 承担全部单列化规则。
   560 与 600 相隔 40px，两档之间没有任何设计意图上的差别，
   合并为一档；断点少一个，要记的东西就少一个。 */
.container {
  width:calc(100% - 2*var(--s-5))}
.header nav:not(.languages) {
  flex-wrap:wrap;
  justify-content:start;
  gap:0 var(--s-4)}
.header nav:not(.languages) a,html[lang=en] .header nav:not(.languages) a {
  font-size:var(--t-xs)}
.hero-links {
  gap:var(--s-2) var(--s-3)}
.search-box input {
  font-size:var(--t-base);
  padding-inline:var(--s-2)}
.search-box button {
  padding:var(--s-3) var(--s-3)}
.search-box button span {
  display:none}
.region-strip,.region-grid,.featured-grid,.organization-grid {
  grid-template-columns:1fr}
.region-strip {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.region-strip a {
  padding:var(--s-3);
  font-size:var(--t-sm)}
.section-title {
  align-items:start}
.section-title h2 {
  font-size:var(--t-xl)}
.section-title>a {
  font-size:var(--t-xs)}
.page-heading h1,.resource-heading h1 {
  font-size:var(--t-2xl)}
.page-heading {
  padding-top:var(--s-5)}
.facts {
  grid-template-columns:1fr;
  gap:var(--s-1)}
.facts dd {
  margin-bottom:var(--s-4)}
.essay h2 {
  font-size:var(--t-lg)}
.footer nav {
  gap:var(--s-4)}
.reference-list li {
  align-items:start}
.resource-row h3 {
  font-size:var(--t-lg)}
}

/* ── 让 390px 的页眉排成一行 ──
   字标与语言区并排需要 字标宽 ＋ 语言区 208px ＋ 容器内边距 48px。
   窄屏字标 160px 时合计 416px，**分界正好落在 414 与 420 之间**——
   于是 iPhone 14／15／16 标准版（390px，机型基数最大的一档）刚好被挤到两行，
   页眉吃掉 178px；而 Pro Max（≥420px）是一行、130px。同一个站在两类手机上
   页眉高度差 48px，字标与语言区在窄机上还错着层，运营者实测后要求改。
   字标缩到 132px：132＋208＋48＝388 ≤ 390，390–414px 一并进入单行，页眉 178→128px。
   实测 360／375px 仍是两行——那里放不下，缩到能放下就要 104px，过小，不做。
   **代价**：品牌素材包建议横版字标 180–200px，窄屏此前已是 160px，这里进一步降到 132px。
   字标是「CIPA FYI」字母组合，132px 宽仍清晰可读，且只作用于 419px 以下。
   放在文件末尾的原因见开头那条警告：媒体查询没有优先级，靠源码顺序决胜，
   这一条必须排在 ≤1000px 与 ≤600px 两块之后才生效。 */
@media(max-width:419px) {
.brand-art {
  /* token-exempt: 字标图的固有几何，由 PNG 原件比例决定，不属版面尺度 */
  width:132px}
}

/* ── 页眉换行之后，三行一律靠左 ──
   387px 及以下放不下并排（逐像素实测：387 两行、388 单行），字标与语言区分成两行。
   此前语言区仍带着并排时的 `margin-left:auto`，于是**字标靠左、语言区靠右、
   导航又靠左**，三行左右横跳，运营者的原话是「犬牙交错」。
   并排时靠右是对的（两端对齐）；一旦换行，那条规则就失去了意义，只剩错位。
   统一靠左而不是居中：本站的版面骨架是左参考线，`align-harness` 专门核查它，
   居中会让页眉成为全站唯一不守这条线的区块。
   实测 320／360／375px 三者左边缘一致落在 24px。 */
@media(max-width:387px) {
.header .languages {
  margin-left:0}
}

@media(prefers-reduced-motion:reduce) {
.region-strip a {
  transition:none}
.region-strip a:hover,.region-strip a:focus-visible {
  transform:none}
html {
  scroll-behavior:auto}
}

@media print {
  .header nav:not(.languages),.languages,.filters,.search-form,.result-bar,.text-button,.footer nav,.article-toc {
  display:none}
.container {
  width:100%}
.header {
  /* token-exempt: 打印时的页眉高度，随字标图几何 */
  min-height:70px}
.directory,.detail-layout {
  display:block}
.source-panel {
  position:static}
.resource-row,.essay {
  break-inside:avoid}
.preview-bar {
  background:var(--paper)}
.hero {
  padding-block:var(--s-5)}
.footer {
  padding-block:var(--s-5)}
.detail-body>section {
  padding-block:var(--s-4)}
}


/* 日文的字体栈。分两层，理由不同：
   正文用系统日文无衬线栈——本站自带的 Noto Sans SC 是中文字体，日文汉字（直、骨、語 等）
     用的是中文字形，与日文标准字形不同，日文读者一眼能看出；
     再自托管一套日文无衬线字库收益有限，系统栈已经足够。
   展示文字用自托管的クレー One（CipaKaiJP）——它正是中文页展示字体霞鹜文楷的上游，
     风格同源，日文字形正确，日文页因此仍保有本站的版面特征，而不是完全退回系统默认。
   这样日文页与中文页的结构一致：正文无衬线，标题楷体。
   用变量覆盖而不是逐条改 font-family，避免再出现只盖住 body 和 h1/h2 的半截补丁。 */
html[lang="ja"] {
  --font:system-ui,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --display:CipaKaiJP,var(--font)}

.plain-domain{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
/* ── 来源栏里的定义列表改单栏 ──
   `.facts` 默认是「120px 标签栏 ＋ 正文栏」的两栏栅格，那是给 866px 主栏设计的。
   来源栏只有 270px，减去 24px 内边距各一侧再减去 120px 标签栏与 24px 间隙，
   留给值的只剩约 78px——于是 `nanbyou.or.jp` 被劈成两行、下面那句说明变成
   一行两三个字，读起来像被压碎了（用户截图指出的就是这个）。
   窄栏本来就该标签在上、值在下。这与窄屏下 `.facts` 的处理是同一个道理：
   **栏宽不够时不是把字挤小，是换一种排法。** */
.source-panel .facts {
  grid-template-columns:minmax(0,1fr);
  gap:var(--s-1);
  /* 与上方说明段落分开：`.facts` 默认 margin:0，紧贴着读起来像同一段 */
  margin-top:var(--s-4)}
.source-panel .facts dd {
  margin-bottom:var(--s-3)}
.source-panel .facts dd:last-child {
  margin-bottom:0}
.source-panel .facts small {
  display:block;
  margin-top:var(--s-1)}
/* ── 阅读说明末尾那句提醒 ──
   它此前**一条样式都没有**。全站 `p{margin:0}`，于是它紧贴在定义列表下方、
   零间距，又从容器左缘起排，读起来像一句掉队的话——用户截图指出的
   「行间距有问题、资料用途下方的文字不规范」就是这个。
   它是对整节的提醒，不属于「资料用途」那一行，所以**不缩进到值栏**
   （缩进会让人以为它只说明上面那一条）；改用一条左细线把它标成附注，
   与说明框同一套词汇。 */
.reading-notice {
  margin-top:var(--s-5);
  padding-left:var(--s-4);
  border-left:1px solid var(--line);
  font-size:var(--t-sm);
  color:var(--muted);
  line-height:var(--lh-note)}

/* 首页的「本站怎么核验」带。公益信息站的读者到站要回答四个问题：
   这是不是我要找的病（首屏定义框）、这里有什么（首屏实数与分类入口）、
   凭什么信（就是这一带）、从哪开始（地区条与精选卡片）。
   第三个问题原先没有答案，而它恰恰是本站与一个链接列表的全部差别。
   刻意做成低视觉重量：无边框、无图标、字号小于正文，只给三条事实与一个去向。
   不写「权威」「严谨」这类自评，只写本站实际在做的三件事。 */
/* 首屏右栏。用 --soft 底 ＋ 圆角，与条目详情页的来源栏同一套词汇——
   两者角色相同：正文旁边一块「关于这份资料／这个站」的说明。 */
.trust {
  /* 右栏不得宽于左边的阅读栏——否则次要内容比主要内容还宽，主次就倒了。
     英文的阅读栏是 536px，右栏若吃掉全部剩余会变成 600px，实测就是这个样子。
     封顶用 --w-prose（中日文 720 > 实际 416，无影响；英文 536 < 600，生效），
     再用 margin-left:auto 把它推回版心右沿，右边界那条判据仍然成立。 */
  /* width:100% 不能省：`margin-left:auto` 会取消栅格项的默认拉伸，
     元素退回内容宽度——实测中文那栏因此只剩 328px，空档从 64 变成 152。
     先填满栅格区、再由 max-width 封顶，两件事都要写出来。 */
  width:100%;
  max-width:var(--w-prose);
  margin-left:auto;
  background:var(--soft);
  border-radius:var(--r-md);
  padding:var(--s-5)}
.trust h2 {
  font-size:var(--t-sm);
  font-weight:600;
  margin-bottom:var(--s-4)}
.trust dl {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s-4);
  margin:0}
.trust dt {
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--blue);
  margin-bottom:var(--s-2)}
.trust dd {
  margin:0;
  font-size:var(--t-sm);
  line-height:var(--lh-note);
  color:var(--muted);
  /* 两三行的短块，正是 balance 该用的地方（长段落绝不可用，理由见顶部排版块）。
     不加时英文这三条会断出 33px、62px、64px 的末行，即只剩一个词的孤字。 */
  text-wrap:balance}
.trust>a {
  display:inline-block;
  margin-top:var(--s-4);
  font-size:var(--t-sm)}
/* 三栏在窄屏放不下：320px 视口内容宽 284px，分成三栏每栏只剩 76px，
   中文「每条写明发布方、原题与核对日期。」在 76px 里要断成七八行。改为单栏。 */


/* 404 页的上边距。原先写成内联 style 属性，是全站唯一一处——
   内联样式会迫使 CSP 放开 style-src-attr 'unsafe-inline'，为一条边距放宽全站策略不值。 */
.not-found-block {
  margin-top:var(--s-7)}