/*
 * 品牌站 libokang.com 的全站样式。
 *
 * 构建时带内容 hash 输出为 /assets/brand.<hash>.css，各页 link 引用。之所以不再内联进
 * HTML：站点已经是多页（首页 15 语种 + 4 个板块介绍页 + 30 个法律页 + about + 404），
 * 内联等于每页重复一份，而外链只下载一次、后续全站命中缓存；改版期间它也终于是一个
 * 能被编辑器和 lint 认识的真 CSS 文件。
 *
 * 配色取自应用的设计令牌 src/shared/styles/tokens.css，与「康」字印章同色系。
 * 字体只用系统栈：public/fonts 下那份思源宋体子集是按应用界面用字切的，
 * 装不下本站 15 语种（尤其泰语、韩语）的字，缺字回退会造成同一行里字体混排。
 */

/*
 * 首页大标题的两份自托管字体，由 scripts/brand-site/build-hero-fonts.py 生成。
 * 都是按标题逐字切的极小子集，所以**只能**用在首页那一句大标题上，别处套用会大面积缺字回退。
 *
 * Hero CJK 是鴻雷板書體（12 字形 6KB），中文与全角标点用它。
 * Hero Latin 是 Great Vibes（18 字形 3KB），英文标题用它。
 *
 * size-adjust —— Great Vibes 的 x 高只有 335/1000，同字号下比中文书法体小一大截，
 * 放大到 140% 才与中文标题看着一般大。它只影响这一个字族，不动 font-size 就不会牵动
 * 标题的行高与外边距。
 *
 * font-display: block —— 大标题是首屏最醒目的一行，用 swap 会先闪一下系统字体再跳成书法体，
 * 配合逐字渐显尤其明显。两份加起来 9KB 且在 head 里预载，阻塞期实际几乎为零。
 */
@font-face {
  font-family: "Hero CJK";
  src: url("/fonts/hero-cjk.woff2") format("woff2");
  font-display: block;
}

@font-face {
  font-family: "Hero Latin";
  src: url("/fonts/hero-latin.woff2") format("woff2");
  font-display: block;
  size-adjust: 140%;
}

:root {
  /* 应用令牌 */
  --ink: #1f1b16;
  --muted: #8f6f4c;
  --accent: #ec631f;
  --bg: #faf9f5;
  --surface: #fff;

  /* 由令牌派生：#cab49f 满强度用作大面积描边偏重，按用途分三档 */
  --line: #e3d7c9;
  --line-strong: #cab49f;
  --tint: #fdf3ec;
  --accent-ink: #c44a0d;

  /*
   * 墨色：只服务中道板块与它压着的那段顶栏。两者必须同色，顶栏反色后才能与板块连成
   * 一片，所以提到令牌里共用；除此之外别处不该引用，否则这套暗色会漫到整站。
   */
  --ink-bg: #17120d;
  --ink-fg: #f0e6d6;
  --ink-gold: rgba(212, 180, 126, 0.82);

  /* 首屏底部那段入口引导的高度。Hero 的高度按它反算，两者必须同源。 */
  --enter-h: 132px;

  /*
   * 栅格对齐 openai.com：实测它在 1280 与 1512 两个视口下内容块宽度都等于视口宽，
   * 左右各 32px，即「满宽不封顶」而非居中定宽容器；Hero 输入框固定 700px。
   * 这里给 1920 的上限只是为了超宽屏不至于把卡片拉到失控——在 1920 以下的任何宽度上，
   * 表现与满宽完全一致，所以观感与 openai.com 相同。
   * 正文另有窄栏（--maxw-text / --maxw-prose），满宽只作用于顶栏、卡片这类结构元素，
   * 段落行长仍受控，否则宽屏下一行七八十个字会没法读。
   */
  --maxw: 1920px;
  --maxw-text: 76rem;
  --maxw-prose: 46rem;
  --gutter: 20px;

  --radius: 12px;
  --radius-lg: 18px;

  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", Georgia, serif;
  /*
   * 大字（首屏标题、老师那句同行）。书法体盖不到的文字整句退回衬线体——
   * 覆盖规则由构建按语种表的 noDisplayFont 生成，见 locales.mjs 与 writeCss。
   */
  --font-display: "Hero Latin", "Hero CJK", var(--font-serif);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Source Han Sans SC",
    "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

  --header-h: 52px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --enter-h: 176px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* 锚点跳转不要被 sticky 顶栏盖住标题 */
[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wrap.prose {
  max-width: calc(var(--maxw-prose) + var(--gutter) * 2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 顶栏 ─────────────────────────────────────────────── */

/*
 * 顶栏与页面同色（--bg），整宽下拉面板也用同一个色值，两者衔接处不留色差。
 *
 * 刻意不用 backdrop-filter 做毛玻璃：带 backdrop-filter 的元素会成为其
 * position:fixed 后代的包含块，整宽下拉的蒙层就会被压缩成只有顶栏那么高，蒙不住页面。
 *
 * 分隔线只在滚动后出现（.scrolled 由 CHROME_SCRIPT 切换）。停在页顶时顶栏与页面同色、
 * 无线条，视觉上是一整块；内容滚到它下面时才需要一条线交代层次。
 * 用内阴影而不是 border：border 会把顶栏撑到 --header-h + 1px，而首屏
 * 「Hero 高度 = 一屏 − 入口引导 − 顶栏」这道算式要求这个令牌就是它的真实高度。
 *
 * --nav-ink 是「顶栏有多少已经落在墨色板块上」，0 到 1，由 CHROME_SCRIPT 逐帧写。
 * 文字、字标、按钮都照它过渡，所以换装是跟着滚动一起走的：滚到板块占满屏幕时已经换完，
 * 落地之后不再补动画。也正因为逐帧在写，这些属性一律不能加 transition，
 * 加了就始终慢半拍。没有墨色板块的页面上它恒为 0，一切保持米色底那一套。
 */
header.site {
  --nav-ink: 0;

  position: sticky;
  top: 0;
  z-index: 50;
  /* 前一条是给不认 color-mix 的浏览器的：那里顶栏一直是米色，不跟着换装但不会透底。 */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) calc((1 - var(--nav-ink)) * 100%), transparent);
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow 0.18s ease;
}

/*
 * 分隔线也吃 --nav-ink：压在墨色板块上时淡到全无（那里顶栏与板块要连成一片，
 * 多一条线就把它割出来了），退回米色段落就实实在在画出来。
 *
 * 不用 .on-ink 那个过半才翻的开关：那样线会在交界处闪一下才消失。跟着进度淡，
 * 与底色同步。
 */
header.site.scrolled {
  box-shadow: inset 0 -1px 0 var(--line);
  box-shadow: inset 0 -1px 0
    color-mix(in srgb, transparent calc(var(--nav-ink) * 100%), var(--line));
}

/*
 * 文字跟着 --nav-ink 在墨色板块的字色与正文墨色之间过渡，与底色同一个进度，
 * 所以不需要也不能加 transition——加了就和底色错开。
 */
header.site nav.primary > a,
header.site .menu-trigger {
  color: var(--ink);
  color: color-mix(in srgb, var(--ink-fg) calc(var(--nav-ink) * 100%), var(--ink));
}

header.site.on-ink nav.primary > a:hover,
header.site.on-ink .menu-trigger:hover {
  background: rgba(240, 230, 214, 0.1);
}

/*
 * 墨色上的主按钮脱掉橙色实底，改成描边式。
 * 橙色是米色底上的强调色，压到墨色渐变上就成了一块与整节无关的亮斑，比顶栏其余部分
 * 都抢眼；描边之后分量还在，但让位给「中道」二字。
 *
 * 同样吃 --nav-ink 而不是 .on-ink：它是顶栏上最亮的一块，若在半途某一刻整个跳变，
 * 旁边的字都在平滑过渡，就它一个人在闪。
 */
header.site .actions .btn-primary {
  background: color-mix(in srgb, transparent calc(var(--nav-ink) * 100%), var(--accent));
  border-color: color-mix(
    in srgb,
    rgba(240, 230, 214, 0.38) calc(var(--nav-ink) * 100%),
    var(--accent)
  );
  color: color-mix(in srgb, var(--ink-fg) calc(var(--nav-ink) * 100%), #fff);
}

header.site.on-ink .actions .btn-primary:hover {
  background: rgba(240, 230, 214, 0.12);
  border-color: rgba(240, 230, 214, 0.6);
}


header.site .bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}

header.site .brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

header.site .brand:hover {
  text-decoration: none;
}

/* Libo 字标：按高度定尺寸，宽度随原始 84×33 比例走。 */
header.site .brand .mark {
  display: block;
  height: 22px;
  width: auto;
}

/*
 * 深浅两份字标都在 DOM 里叠着，按 --nav-ink 交叉淡入——img 的 src 换不了，
 * 换了也会闪一下白；用 display 切又是硬跳，和旁边平滑过渡的字色对不上。
 * 浅色那份脱离文档流盖在深色那份上，两者同尺寸，所以严丝合缝。
 */
header.site .brand .mark {
  opacity: calc(1 - var(--nav-ink));
}

header.site .brand .mark-light {
  position: absolute;
  left: 0;
  top: 0;
  opacity: var(--nav-ink);
}

header.site nav.primary {
  display: none;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}

header.site nav.primary > a,
header.site .menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  /* 字色由上面那条 --nav-ink 的 color-mix 规则给，这里不再写死，否则会把它盖掉。 */
  font-family: inherit;
  font-size: 0.92rem;
  white-space: nowrap;
  cursor: pointer;
}

header.site nav.primary > a:hover,
header.site .menu-trigger:hover,
.mega-menu:hover .menu-trigger,
.mega-menu:focus-within .menu-trigger {
  background: var(--tint);
  text-decoration: none;
}

/*
 * 顶栏的「试用」按钮比正文 CTA 更轻：不加粗、上下内边距更小，
 * 免得一个胶囊在 53px 高的顶栏里显得过于笨重。
 */
header.site .actions .btn {
  padding: 0.3rem 0.95rem;
  font-weight: 500;
}

header.site .actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex: none;
}

@media (min-width: 900px) {
  header.site nav.primary {
    display: flex;
  }
}

/* ── 产品整宽下拉：悬停展开，其余页面蒙一层模糊 ── */

.mega-menu {
  display: inline-flex;
}

/*
 * 面板与蒙层默认不可见但保留在流外。用 visibility + opacity 而不是 display:none，
 * 是为了能做淡入过渡；visibility 一并切换保证收起时不会截获鼠标事件。
 */
.mega,
.mega-menu .scrim {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0.16s;
}

.mega-menu:hover .mega,
.mega-menu:focus-within .mega,
.mega-menu:hover .scrim,
.mega-menu:focus-within .scrim {
  opacity: 1;
  visibility: visible;
}

/*
 * 蒙层盖住顶栏以下的整个视口。它在 header 内部，因此自动位于页面内容之上。
 * pointer-events:none 不能省：蒙层是 .mega-menu 的后代，若能接收鼠标事件，
 * 指针移到页面任意位置都仍算「悬停在菜单内」，菜单就再也收不起来。
 */
.mega-menu .scrim {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: rgba(31, 27, 22, 0.28);
  backdrop-filter: blur(3px);
}

/*
 * 面板定位到 header 底边。header 是 sticky（本身即定位包含块），而 .mega-menu 不定位，
 * 所以这里的 left/right:0 相对整个 header 展开，铺满视口宽度，不受顶栏容器 max-width 约束。
 */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* 与顶栏同色，两者之间不出现色带。面板边界靠下方蒙层的明暗差交代，不需要描边。 */
  background: var(--bg);
  box-shadow: 0 16px 32px rgba(31, 27, 22, 0.08);
}

.mega-inner {
  display: grid;
  gap: 2rem 3rem;
  padding-top: 1.75rem;
  padding-bottom: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .mega-inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  }
}

.mega-head {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mega-grid {
  display: grid;
  gap: 0.25rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.mega-grid a {
  display: block;
  padding: 0.5rem 0.7rem;
  margin-left: -0.7rem;
  border-radius: 8px;
  color: var(--ink);
}

.mega-grid a:hover {
  background: var(--tint);
  text-decoration: none;
}

.mega-grid .t {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
}

.mega-grid .d {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.mega-side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-side li {
  margin: 0 0 0.35rem;
}

.mega-side a {
  color: var(--ink);
  font-size: 0.92rem;
}

/* 外链到应用的板块，标一个角标，避免用户以为还在官网内 */
.mega-grid a.ext .t::after,
.footer-col a.ext::after {
  content: "↗";
  margin-left: 0.3rem;
  font-size: 0.85em;
  opacity: 0.55;
}

/* ── 按钮 ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-ink);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--tint);
}

.btn-lg {
  padding: 0.75rem 1.6rem;
  font-size: 1rem;
}


/* ── 段落节奏 ─────────────────────────────────────────── */

main {
  display: block;
}

.section {
  padding: 56px 0;
}

.section + .section {
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .section {
    padding: 88px 0;
  }
}

.section-head {
  max-width: 44rem;
  margin: 0 0 2rem;
}

.section-head h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.3;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}



/* ── 触屏：点击目标放大到 44px ─────────────────────────── */

/*
 * 按 pointer: coarse 而不是按宽度：判据是「用手指点」，不是「屏幕窄」——平板横屏也该放大，
 * 而窄窗口里的鼠标并不需要。44px 是各家可访问性指南共同的触控下限，低于它拇指容易点偏。
 *
 * 只加 min-height 与竖向内距，不动字号：字号一动，整页的节奏都得跟着重调。
 */
@media (pointer: coarse) {
  .btn,
  .suggests a,
  .askband-field button,
  .tao-cta {
    min-height: 44px;
    padding-block: 0.7rem;
  }

  /* 圆形发送键：宽高一起放，否则会变成竖椭圆。 */
  .composer .send {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* 输入框本身也要够高，手指才点得中，而不是只点得中里面的按钮。 */
  .askband-field input {
    min-height: 44px;
  }
}



/* ── 左右分栏（板块介绍页的正文段） ─────────────────────── */

/* 正文分栏限宽：容器满宽后不限的话，宽屏下单行会长到读不动。 */
.split {
  display: grid;
  gap: 2rem;
  align-items: start;
  max-width: var(--maxw-text);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4rem;
  }
}

.split h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.3;
}

.split p {
  margin: 0 0 1rem;
}

.split p:last-child {
  margin-bottom: 0;
}

/* 三层架构这类有序清单 */

@media (min-width: 900px) {
}


@media (min-width: 800px) {
}

/* 真实评价到位前的占位样式：明确标记为占位，避免误当成已完成 */
/* ── 结尾 CTA ─────────────────────────────────────────── */

.cta-band {
  padding: 56px 0;
  text-align: center;
  background: var(--tint);
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .cta-band {
    padding: 88px 0;
  }
}

.cta-band h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
}

.cta-band p {
  margin: 0 auto 1.75rem;
  max-width: 36rem;
  color: var(--muted);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ── 页脚 ─────────────────────────────────────────────── */

footer.site {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

/*
 * 四列链接整组居中，列内文字仍左对齐。
 * 限宽再居中，而不是让四列摊满整行：内容本来就不多，摊开后右侧空一大片，
 * 而各列自身又还是左对齐，看着像没排完。
 */
footer.site .cols {
  display: grid;
  gap: 1.75rem 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
  padding: 48px 0 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
  footer.site .cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 有内容层入口的三个语种多一列，整组随之放宽，列宽保持一致。 */
  footer.site .cols-5 {
    max-width: 68rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.footer-col h3 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col li {
  margin: 0 0 0.45rem;
}

.footer-col a {
  color: var(--muted);
}

.footer-col a:hover {
  color: var(--ink);
}

/*
 * 底栏：左边主体署名与免责声明，右边语言切换，中间留空。
 * 两端对齐用 space-between，中间不塞东西——挤第三样进来，三者都会显得局促。
 */
footer.site .bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

footer.site .bottom-l {
  flex: 1 1 24rem;
  min-width: 0;
}

footer.site .legalname {
  margin: 0;
  color: var(--ink);
}

footer.site .note {
  margin: 0.5rem 0 0;
}

/* ── 语言切换 ─────────────────────────────────────────── */

footer.site .langbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

footer.site .langbtn:hover {
  border-color: var(--accent);
}

footer.site .langbtn svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.langdlg {
  width: min(92vw, 26rem);
  max-height: min(80vh, 34rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}

.langdlg::backdrop {
  background: rgba(28, 20, 12, 0.42);
}

.langdlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem 0.9rem;
  border-bottom: 1px solid var(--line);
}

.langdlg-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.langdlg-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
}

.langdlg-x:hover {
  background: var(--line);
}

/* 列表自己滚，弹层整体不动——标题与关闭键要一直看得见。 */
.langlist {
  margin: 0;
  padding: 0.5rem;
  max-height: calc(min(80vh, 34rem) - 4.4rem);
  overflow-y: auto;
  list-style: none;
}

.langopt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}

a.langopt:hover {
  background: var(--tint);
  text-decoration: none;
}

.langopt .n {
  flex: 1 1 auto;
  min-width: 0;
}

.langopt .e {
  flex: none;
  color: var(--muted);
  font-size: 0.8rem;
}

.langopt.cur {
  background: var(--tint);
  font-weight: 700;
}

.langopt .tick {
  flex: none;
  color: var(--accent);
}

/* 无 JS 兜底：弹层打不开，平铺一行链接顶上。 */
.langs-plain {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.langs-plain .cur {
  font-weight: 700;
}

/* ── 面包屑 ───────────────────────────────────────────── */

/*
 * 只出现在有上级的页面：板块介绍页、法律页、about。首页是根，404 不索引，都不给。
 *
 * 层级与 BreadcrumbList 结构化数据由同一份数据一次产出（见 brand-site/seo.mjs 的
 * breadcrumb），所以页面上看到的和喂给 Google 的不可能各说各话。
 *
 * 用 <ol> 而不是 <nav aria-label="面包屑">：那个标签得铺开 15 个语种的译文，
 * 为一个无障碍标签不值当；有序列表本身就会被读屏播报为「列表，N 项」。
 */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.85rem;
}

.crumbs li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

/* 分隔符由 CSS 生成：它是装饰，不该被读屏念出来，也不该跟着正文被复制走。 */
.crumbs li + li::before {
  content: "/";
  opacity: 0.5;
}

.crumbs a {
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--ink);
}

.crumbs [aria-current] {
  color: var(--ink);
}

/* 板块介绍页：面包屑自成一条压在 Hero 之上，不进 Hero 那个居中版心。 */
.crumbs-bar {
  padding-top: 1.25rem;
}

/* ── 长文页（法律 / about / 404） ──────────────────────── */

.doc {
  padding: 40px 0 72px;
}

/* 长文页的面包屑与 h1 是一组，间距收得比段落紧。 */
.doc .crumbs {
  margin-bottom: 0.9rem;
}

.doc h1 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.35;
  margin: 0 0 1rem;
}

.doc h2 {
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.28rem;
}

.doc h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 1.06rem;
}

.doc p {
  margin: 0 0 1rem;
}

.doc ul,
.doc ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.doc li {
  margin: 0.3rem 0;
}

.doc table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.doc th,
.doc td {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--surface);
}

.doc code {
  padding: 0.1rem 0.3rem;
  border-radius: 0.2rem;
  background: var(--tint);
  font-size: 0.92em;
}

.doc .meta {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.doc .cta {
  display: inline-block;
  margin: 0.25rem 0 1.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.doc .cta:hover {
  background: var(--accent-ink);
  text-decoration: none;
}

/* ── 无障碍与降级 ─────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
}

/* 由 build-legal-static.mjs 依据 locales.mjs 的 noDisplayFont 生成：书法体没有这些文字，整句退回衬线体，避免逐字回退成混排。 */
html[lang="ja"],
html[lang="ko"],
html[lang="vi"],
html[lang="th"] {
  --font-display: var(--font-serif);
}