/* ==========================================================================
   理嘉 · 组件层
   --------------------------------------------------------------------------
   对应：视觉规范 §6.1 按钮 · §6.2 卡片 · §6.3 导航 · §6.4 页脚
        §6.5 链接 · §6.7 分隔线 · §5.4 焦点环 · §5.3 圆角

   ★ 三处「不许」：
     1. 不许出现 accent 按钮变体（见下方按钮注释里的理由）。
     2. 不许给任何组件加 box-shadow，除 tokens.css 里的 4 个变量。
     3. 不许给卡片 hover 加位移 / 抬升阴影 / 缩放——hover 只变背景与边框。

   ★ 焦点环：深色区块内的所有 focusable 元素用 --lj-shadow-focus-on-dark。
     落地方式是给深色区块加 .on-dark 类（见 utilities.css），由作用域统一接管，
     **组件自己不判断所在底色**——判断依据是「最近祖先区块的底色」，组件看不到。
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

@layer components {
  /* ══════════════════════════════════════════════════════════════════════
     按钮｜视觉规范 §6.1
     ----------------------------------------------------------------------
     五个变体：primary / secondary / tertiary / pill / on-dark
     每个四态：default / hover / active / disabled（+ focus）
     三个尺寸：sm 40 / md 48（默认）/ lg 56

     ★ **没有 accent 变体，且不得新增。** 三条理由：
       1. 对比度：Clay #d97757 叠白字 3.12:1，叠 Clay Deep 白字 4.05:1，
          两条都不达 AA 4.5:1。唯一合规组合是 Clay 填充 + 墨字 5.91:1，
          但它把「全站按钮文字必须墨色」变成一条例外规则，脆弱。
       2. 定位：品牌形象站不设彩色 CTA。Clay 一旦做按钮填充，
          整站会被读成营销落地页，与「不追求转化」的定位直接冲突
          （信息架构 §2.3 已定：导航 pill 与页尾按钮都是墨色系）。
       3. 稀缺性：Clay 的识别度来自「全站只出现在装饰位与深色区的一个词」。
          多一个 Clay 按钮，Clay 就从「记号」降级为「配色」。
       因此页尾 CTA 用 on-dark 变体（米白底 + 墨字，17.49:1），
       Clay 落在标题里的一个关键词上（on #000000 6.73:1，合规）。
     ══════════════════════════════════════════════════════════════════════ */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lj-gap-icon-text);
    height: 48px;                      /* md 默认 */
    padding-inline: 24px;
    border: 1px solid transparent;
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-zh-button);   /* 17px 黑体（功能层，判据 1） */
    font-weight: 500;
    line-height: 1.40;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;               /* 按钮文字不换行｜§6.1 通用 */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--lj-dur-base) var(--lj-ease),
      border-color var(--lj-dur-base) var(--lj-ease),
      color var(--lj-dur-base) var(--lj-ease),
      transform var(--lj-dur-fast) var(--lj-ease);
  }

  /* 尺寸｜§6.1 表。字号 sm 15 / md·lg 17（中文），西文对应 15 / 18。 */
  .btn--sm {
    height: 40px;
    padding-inline: 16px;
    font-size: 15px;
  }

  .btn--lg {
    height: 56px;
    padding-inline: 32px;
  }

  /* 焦点环。浅色区用 --lj-shadow-focus；深色区由 .on-dark 作用域覆写。
     不用 outline：规范把焦点环定义在 box-shadow 里，两套值都要能按底色切换。 */
  .btn:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus);
  }

  /* ── primary：墨黑底 + 米白字。全站主 CTA 的唯一形态。 ─────────────── */
  .btn--primary {
    background-color: var(--lj-ink);
    color: var(--lj-canvas);
    border-radius: var(--lj-radius-btn-solid);   /* 签名形状：只圆下两角 */
  }

  .btn--primary:hover {
    background-color: var(--lj-ink-soft);
  }

  .btn--primary:active {
    background-color: var(--lj-surface-black);
    transform: scale(0.99);
  }

  .btn--primary:disabled,
  .btn--primary[aria-disabled="true"] {
    background-color: var(--lj-surface-hover);
    color: var(--lj-text-tertiary);
    cursor: not-allowed;
    transform: none;
  }

  /* ── secondary｜描边按钮：透明底 + 1px 墨边 + 墨色字，12px 四角全圆。─────
     用途：浅底上需要"次一级、但仍要是按钮形态"的动作。属设计系统常驻，
     删掉会导致该场景被临时发明成一个圆角不对的手工按钮。
     ⚠ 不得与 .btn--primary 并排 —— primary 用 --lj-radius-btn-solid
       (0 0 8px 8px) 只圆下两角，四角 12px 与它并置时底部一圆一不圆，读作没对齐；
       375px 竖排后两块实心/描边按钮还会读成"两个都要点"。
     当前 0 个落地实例：首屏第二个动作是文字链接（C2），页尾唯一按钮是 on-dark。 */
  .btn--secondary {
    background-color: transparent;
    color: var(--lj-ink);
    border-color: var(--lj-border-strong);
    border-radius: var(--lj-radius-md);
  }

  .btn--secondary:hover {
    background-color: var(--lj-surface);
    border-color: var(--lj-border-strong);
  }

  .btn--secondary:active {
    background-color: var(--lj-surface-hover);
  }

  .btn--secondary:disabled,
  .btn--secondary[aria-disabled="true"] {
    border-color: var(--lj-border-hairline);
    color: var(--lj-text-tertiary);
    cursor: not-allowed;
  }

  /* ── tertiary｜细描边按钮：比 secondary 再弱一档（边框更浅），用于区块内
     次次级动作。同样是 12px 四角全圆，因此**同样不得与 .btn--primary 并排**，
     理由与 secondary 相同（底部一圆一不圆）。当前 0 个落地实例。 */
  .btn--tertiary {
    background-color: transparent;
    color: var(--lj-ink);
    border-color: var(--lj-border-hairline);
    border-radius: var(--lj-radius-md);
  }

  .btn--tertiary:hover {
    border-color: var(--lj-border-strong);
  }

  .btn--tertiary:active {
    background-color: var(--lj-canvas);
  }

  .btn--tertiary:disabled,
  .btn--tertiary[aria-disabled="true"] {
    border-color: var(--lj-border-subtle);
    color: var(--lj-text-tertiary);
    cursor: not-allowed;
  }

  /* ── pill：全站**唯一**的胶囊形状，只用于导航右侧 CTA｜§6.3 ────────── *
     尺寸取 sm 档（高 40）——导航高 72，40 的 pill 在垂直方向留 16 上下呼吸。 */
  .btn--pill {
    height: 40px;
    padding-inline: 16px;
    font-size: 15px;
    background-color: var(--lj-ink);
    color: var(--lj-canvas);
    border-radius: var(--lj-radius-pill);
  }

  .btn--pill:hover {
    background-color: var(--lj-ink-soft);
  }

  .btn--pill:active {
    background-color: var(--lj-surface-black);
  }

  /* ── on-dark：米白底 + 墨字。页尾 CTA 用 lg 尺寸。 ────────────────── *
     对比度 #141413 on #faf9f5 = 17.49:1（整站最高的一对）。
     形状仍是「只圆下两角」，与全站主按钮同形——深色区不改变形状语言。
     五态齐全（DECISIONS C3 / 视觉规范 §6.1 专条）。 */
  .btn--on-dark {
    background-color: var(--lj-canvas);
    color: var(--lj-ink);
    border-radius: var(--lj-radius-btn-solid);
  }

  .btn--on-dark:hover {
    background-color: var(--lj-surface-warm);   /* #e3dacc，文字不变 */
  }

  .btn--on-dark:active {
    background-color: var(--lj-surface-warm-hover);   /* #dbd1bf */
    transform: scale(0.99);
  }

  /* disabled 态：bg #3d3d3a / 文字 #87867f，实测 2.98:1。
     ★ **不参与 AA 校验**——依据 WCAG 2.1 1.4.3 对 inactive user interface
       components 的豁免（禁用态控件不受对比度要求约束）。
       本站唯一实例不会进入这个状态；保留它是状态矩阵完整性的一部分，
       也是将来增加第二个 on-dark 按钮时的唯一正确取值。
       验收时若有人拿 2.98:1 质疑，答案是豁免条款，不是「回头改颜色」。 */
  .btn--on-dark:disabled,
  .btn--on-dark[aria-disabled="true"] {
    background-color: var(--lj-ink-soft);        /* #3d3d3a */
    color: var(--lj-text-tertiary);              /* #87867f */
    cursor: not-allowed;
    transform: none;
  }

  /* 深色区的 on-dark 按钮用 on-dark 焦点环（它浮在深色底上）。
     这条同时由 utilities.css 的 .on-dark 作用域兜底，此处显式写一遍便于阅读。 */
  .on-dark .btn:focus-visible,
  .btn--on-dark:focus-visible {
    box-shadow: var(--lj-shadow-focus-on-dark);
  }

  /* 带箭头按钮：hover 时箭头右移 4px / 100ms｜§6.1 + §6.5 */
  .btn__arrow {
    display: inline-block;
    transition: transform var(--lj-dur-fast) var(--lj-ease);
  }

  .btn:hover .btn__arrow {
    transform: translateX(4px);
  }

  /* 图标按钮：40 / 44 / 48，padding 0，aspect-ratio 1。
     移动端最小点击区 44×44｜§6.1。 */
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    background-color: transparent;
    border: 0;
    border-radius: var(--lj-radius-sm);
    color: var(--lj-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus);
  }

  /* 按钮组｜§5.1「按钮组内间距 16 / 16 / 12」 */
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lj-gap-btn-group);
  }

  /* ══════════════════════════════════════════════════════════════════════
     首屏动作区｜视觉规范 §7 v1.5.3 专条 + IA §3 B1 / §6.2
     ----------------------------------------------------------------------
     结构 = **1 个 `primary` + 1 个文字链接**（.link-inline zh-nav，17px 黑体）。

     ★ 两条硬规则，改之前先读完：
       1. **不用两个 primary**：两个等重实心黑块在 375px 竖排后是两条黑条，
          读作「两个都要点」，等于没有主入口。
       2. **不用 primary + secondary**：primary 是 0 0 8px 8px（只圆下两角），
          secondary 是 12px 四角全圆，两者并排时底部一圆一不圆，读作没对齐。
          形状语言在同一组里必须同源。
       这两条也是「全站 0 个 secondary 落地实例」的原因——变体保留在
       components.css 里，只是当前 6 个页面没有任何一处用到它。

     间距：桌面 24px / 移动 20px（IA §3 B1、§6.2 B1）。
     移动端：**primary 保持内容宽、不拉满**——它是唯一的实心按钮，
     拉满会读成「页面的全部」；文字链接左对齐，与按钮左缘对齐。
     （页尾 CTA 的 on-dark 按钮不同：那里是全宽，见下方断点块。）
     ══════════════════════════════════════════════════════════════════════ */
  .hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     卡片｜视觉规范 §6.2
     4 个变体，**全部零阴影**，hover 只变背景与边框，不做位移与缩放。
     整张卡片是一个 <a>，卡内不得嵌套第二个链接（否则一张卡出现两个 tab stop）。
     ══════════════════════════════════════════════════════════════════════ */

  .card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition:
      background-color var(--lj-dur-base) var(--lj-ease),
      border-color var(--lj-dur-base) var(--lj-ease);
  }

  /* 焦点环套在卡片外圈。不能用 outline-offset: -1px 让环被卡片裁掉。 */
  .card:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus);
  }

  /* ── card-cream：默认内容卡。类型 5 / 类型 9 的主力。 ─────────────── */
  .card--cream {
    background-color: var(--lj-surface);
    border: 1px solid var(--lj-border-subtle);
    border-radius: var(--lj-radius-lg);      /* 16 */
    padding: var(--lj-pad-card-desktop);     /* 32 */
  }

  .card--cream:hover {
    background-color: var(--lj-surface-hover);
    border-color: var(--lj-border-hairline);
  }

  /* ── card-warm：暖麦底，用于重点卡。24 圆角。 ─────────────────────── *
     ★ 暖麦底硬规则：块内一切次级文字只能 #5e5d59（4.76:1），
       **禁止 #87867f（2.64:1）**。见下方 .card--warm .card__desc。 */
  .card--warm {
    background-color: var(--lj-surface-warm);
    border: 0;
    border-radius: var(--lj-radius-xl);      /* 24 */
    padding: var(--lj-pad-card-desktop);
  }

  .card--warm:hover {
    background-color: var(--lj-surface-warm-hover);
  }

  /* ── card-feature：白底 + 细边，比 cream 更「抬起」。大功能卡。 ────── */
  .card--feature {
    background-color: var(--lj-canvas);
    border: 1px solid var(--lj-border-hairline);
    border-radius: var(--lj-radius-xl);      /* 24 */
    padding: 40px;
  }

  .card--feature:hover {
    border-color: var(--lj-border-strong);
  }

  /* ── card-dark：深色区内的卡片。内部所有 focusable 用 on-dark 焦点环。 ── */
  .card--dark {
    background-color: var(--lj-surface-dark);
    border: 1px solid var(--lj-border-on-dark);
    border-radius: var(--lj-radius-xl);      /* 24 */
    padding: 40px;
    color: var(--lj-canvas-on-dark);
  }

  .card--dark:hover {
    border-color: var(--lj-text-secondary);
  }

  /* 卡片内部结构｜§6.2：眉标（可选）→ 标题 → 描述 → 底部链接，
     纵向间距依次 12 / 12 / 24。用 margin-block-start 表达，避免父级统一管。 */
  .card__eyebrow {
    color: var(--lj-text-secondary);
    margin-block-end: 12px;
  }

  .card__title {
    color: var(--lj-ink);
  }

  /* /about/ 团队卡的顺序是「姓名 → 头衔 → 简介」，
     头衔用的是 .card__eyebrow 的位置，需要补一点上间距 */
  .card__title + .card__eyebrow {
    margin-block-start: 8px;
  }

  .card__desc {
    margin-block-start: 12px;
    color: var(--lj-text-secondary);   /* surface 上 5.67:1 ✓ */
  }

  .card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 24px;
    color: var(--lj-ink);
    font-weight: 500;
  }

  /* 暖麦卡：描述必须降到 #5e5d59，且不能用 --lj-text-tertiary */
  .card--warm .card__desc,
  .card--warm .card__eyebrow {
    color: var(--lj-text-secondary);
  }

  /* 深色卡：标题米白，描述用 on-dark 次色（8.29:1 ✓） */
  .card--dark .card__title,
  .card--dark .card__link {
    color: var(--lj-canvas-on-dark);
  }

  .card--dark .card__desc,
  .card--dark .card__eyebrow {
    color: var(--lj-text-on-dark);
  }

  /* 卡片整卡可点，卡内链接是 <span>（不是第二个 <a>）。
     hover 时箭头右移 4px，复用 .link-arrow__icon 的 transition。 */
  .card:hover .link-arrow__icon {
    transform: translateX(4px);
  }

  /* 卡片配图位（State 1 才启用）｜§6.2：aspect-ratio 4/5，圆角 16，与文字间距 24。
     State 0 下页面里不出现任何图片元素，这个类只作为素材到位后的接入点。 */
  .card__media {
    aspect-ratio: 4 / 5;
    border-radius: var(--lj-radius-lg);
    margin-block-end: 24px;
    object-fit: cover;
    width: 100%;
  }

  /* ══════════════════════════════════════════════════════════════════════
     区块标题组｜§5.1「区块标题 → 区块内容 48 / 40 / 32」
     ══════════════════════════════════════════════════════════════════════ */
  .section-head {
    margin-block-end: 48px;
  }

  .section-head__lead {
    margin-block-start: 16px;
    color: var(--lj-text-secondary);
    max-width: var(--lj-measure);
  }

  /* 眉标｜视觉规范 §2.7 第 2 项：Clay 只能做前置标记，**不能做文字**。
     本方案连标记也不用（控制 Clay 出现次数），只保留文字形态。
     如需启用前置标记，在本类加 ::before 的 16×2px Clay 短横线即可。 */
  .eyebrow {
    color: var(--lj-text-secondary);
    margin-block-end: 12px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     导航｜视觉规范 §6.3 + 信息架构 §2.1 / §6.4
     ══════════════════════════════════════════════════════════════════════ */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--lj-canvas);
    /* 滚动后才叠 blur + 阴影，由 JS 切 data-scrolled｜§6.3 */
    transition: box-shadow var(--lj-dur-base) var(--lj-ease),
                background-color var(--lj-dur-base) var(--lj-ease);
  }

  .site-header[data-scrolled="true"] {
    /* 背景留 8% 透明度，blur 才有东西可模糊；
       不支持的浏览器退回完全不透明的 canvas，视觉无损。 */
    background-color: color-mix(in srgb, var(--lj-canvas) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--lj-shadow-nav);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--lj-nav-h);
  }

  /* 品牌字标：纯文字，宋体 500 / 字距 0.08em｜视觉规范 §3.7 第 1 项建议走纯文字。
     字标属品牌资产，不受「区块 × 字族」表约束。 */
  .logo {
    font-family: var(--lj-font-serif);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--lj-ink);
    text-decoration: none;
    white-space: nowrap;
  }

  .logo:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus);
  }

  /* 主导航：4 项，gap 32，不设固定栅格（避免中文长短不一时出现空洞）｜§2.2 */
  .nav {
    display: flex;
    align-items: center;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .nav__link {
    display: inline-block;
    padding-block: 8px;
    color: var(--lj-ink);
    text-decoration: none;
  }

  /* hover 下划线是补充标识；当前页标识必须同时有 font-weight 500 + aria-current，
     **不允许 hover-only 信息**｜信息架构 §6.4 最后一条。 */
  .nav__link:hover {
    color: var(--lj-text-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.4em;
  }

  .nav__link[aria-current="page"] {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.4em;
    text-decoration-color: var(--lj-ink);
  }

  .nav__link:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus);
    border-radius: 2px;
  }

  /* 右侧动作区：pill 在桌面显示，汉堡在移动显示 */
  .site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
  }

  .nav-toggle {
    display: none;
  }

  /* ── 移动端抽屉｜视觉规范 §6.3 + 信息架构 §6.4 五条要求 ───────────── *
     1. 打开时 body 锁滚动（JS 加 .is-locked，记录 scrollY，关闭后恢复位置）
     2. 焦点移入关闭按钮
     3. Tab 在抽屉内循环（焦点陷阱）
     4. Esc 关闭
     5. 关闭后焦点回到汉堡按钮
     ★ 抽屉内**不含 pill**，「约一次对话」作为抽屉内最后一项，做成 primary 按钮。 */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background-color: var(--lj-canvas);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px var(--lj-gutter) 40px;
  }

  .drawer[hidden] {
    display: none;
  }

  .drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--lj-nav-h-mobile);
  }

  .drawer__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-block-start: 32px;
  }

  .drawer__link {
    color: var(--lj-ink);
    text-decoration: none;
  }

  .drawer__link:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus);
  }

  .drawer__cta {
    margin-block-start: 40px;
    align-self: flex-start;
  }

  /* body 锁滚动｜配合 JS 恢复 scrollY */
  body.is-locked {
    overflow: hidden;
  }

  /* Skip to main content｜必须是第一个 tab stop｜§6.3 + 信息架构 §6.4 序 1。
     视觉隐藏，focus 时出现在左上（padding 12/16，bg #141413，color #faf9f5）。
     ⚠ 不要用 display:none 或 visibility:hidden —— 那会让它从 tab 序列里消失。 */
  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;
    padding: 12px 16px;
    background-color: var(--lj-ink);
    color: var(--lj-canvas);
    text-decoration: none;
    font-family: var(--lj-font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 0 0 var(--lj-radius-sm) 0;
    transform: translateY(-100%);
  }

  .skip-link:focus,
  .skip-link:focus-visible {
    transform: translateY(0);
    box-shadow: var(--lj-shadow-focus);
  }

  /* ══════════════════════════════════════════════════════════════════════
     页脚｜视觉规范 §6.4 + 信息架构 §2.4
     ══════════════════════════════════════════════════════════════════════ */

  .footer__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block-end: 32px;
  }

  .footer__logo {
    font-family: var(--lj-font-serif);
    font-size: 20px;         /* 反色 logo，视觉高度对齐 24px 的图形版 */
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--lj-canvas-on-dark);
    text-decoration: none;
  }

  .footer__logo:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus-on-dark);
  }

  .footer__positioning {
    color: var(--lj-text-on-dark);   /* 深色底上 8.29:1 ✓ */
    margin: 0;
  }

  /* 4 列 → 2 列 → 1 列，列间距 48｜§6.4 */
  .footer__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px;
    padding-block-start: 32px;
    padding-block-end: 32px;
  }

  .footer__col-title {
    color: var(--lj-text-tertiary);   /* 在 #141413 上 5.05:1 ✓（§6.4 指定值） */
    margin-block-end: 16px;
  }

  .footer__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .footer__link {
    color: var(--lj-text-on-dark);
    text-decoration: none;
    display: inline-block;
  }

  .footer__link:hover {
    color: var(--lj-canvas-on-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
  }

  .footer__link:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus-on-dark);
  }

  /* 纯文本项（办公地点、备案号）：不可聚焦，因此没有焦点态 */
  .footer__text {
    color: var(--lj-text-on-dark);
  }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding-block-start: 32px;
    color: var(--lj-text-tertiary);   /* 深底上 5.05:1 ✓ */
  }

  /* 页脚内分隔线：**全站页脚内部只允许 1 条**｜§6.4「最多 1 条」。
     位置固定在列区与底部行之间。 */
  .footer__bottom .divider,
  .footer__divider {
    width: 100%;
    margin-block-end: 24px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     链接｜视觉规范 §6.5
     ══════════════════════════════════════════════════════════════════════ */

  /* 内联链接：下划线**常驻**。中文更依赖下划线识别链接（汉字无词形变化提示）。
     offset 0.35em 是躲开汉字字面下缘的值，不要改小。 */
  .link-inline {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  }

  .link-inline:hover {
    color: var(--lj-text-secondary);
    text-decoration-color: currentColor;
  }

  /* 深色区链接：颜色 #b0aea5 → hover #faf9f5，下划线保留 */
  .on-dark .link-inline:hover {
    color: var(--lj-canvas-on-dark);
  }

  .link-inline:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus);
    border-radius: 2px;
  }

  .on-dark .link-inline:focus-visible {
    box-shadow: var(--lj-shadow-focus-on-dark);
  }

  /* 独立链接（带箭头）：无下划线，hover 箭头右移 4px */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lj-ink);
    font-weight: 500;
    text-decoration: none;
  }

  .link-arrow:hover {
    color: var(--lj-text-secondary);
  }

  .link-arrow:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus);
    border-radius: 2px;
  }

  .on-dark .link-arrow {
    color: var(--lj-canvas-on-dark);
  }

  .on-dark .link-arrow:hover {
    color: var(--lj-text-on-dark);
  }

  .link-arrow__icon {
    display: inline-block;
    transition: transform var(--lj-dur-fast) var(--lj-ease);
  }

  .link-arrow:hover .link-arrow__icon {
    transform: translateX(4px);
  }

  /* 访问过的链接**不做区分**——暖色系统里紫色会破坏整套气质｜§6.5 */

  /* ══════════════════════════════════════════════════════════════════════
     分隔线｜视觉规范 §6.7
     ★ 区块与区块之间**不用分隔线**——分层由底色交替完成。
       这是全站最容易破功的一条，code review 时逐条检查。
     ══════════════════════════════════════════════════════════════════════ */
  .divider {
    height: 0;
    border: 0;
    border-block-start: 1px solid var(--lj-border-hairline);
    margin: 0;
  }

  .divider--subtle {
    border-block-start-color: var(--lj-border-subtle);
  }

  .divider--dark {
    border-block-start-color: var(--lj-border-on-dark);
  }

  /* ══════════════════════════════════════════════════════════════════════
     引述区｜类型 8 · 视觉规范 §7 第 8 位 + 信息架构 §3 B6
     ══════════════════════════════════════════════════════════════════════ */
  .quote__text {
    color: var(--lj-ink);
  }

  .quote__cite {
    display: block;
    margin-block-start: 24px;
    color: var(--lj-text-secondary);   /* 暖麦底上 4.76:1 ✓，**禁止 #87867f（2.64:1）** */
    font-style: normal;
  }

  /* 移动端居中引述的降级｜信息架构 §6.2 / §7.2-2：
     居中引述在移动端超过 3 行会读得很难受。
     规则：≤16 字/行（335÷21）且 ≤3 行 → 保持居中；超过 → 改左对齐。
     实现方式：移动端默认左对齐，文案确认「≤16 字/行且 ≤3 行」后加
     .quote--center 保留居中。**不引入 JS 计算行数**，因为字幕级重排
     依赖字体加载完成，JS 量行会与 swap 打架。 */
  .quote {
    text-align: center;
  }

  /* ══════════════════════════════════════════════════════════════════════
     联系页｜信息架构 §5.5
     ★ 三项都是「可复制的数据」，按判据 1 归功能层（17px 黑体），
       即使把字号放大到 19px 以上也不切宋体。
     ══════════════════════════════════════════════════════════════════════ */
  .contact-list {
    display: flex;
    flex-direction: column;
  }

  .contact-item {
    padding-block: 24px;
  }

  .contact-item:first-child {
    padding-block-start: 0;
  }

  .contact-item__label {
    color: var(--lj-text-secondary);
    margin-block-end: 8px;
  }

  .contact-item__value {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-zh-nav);    /* 17px 黑体 */
    font-weight: 400;
    line-height: 1.40;
    letter-spacing: 0.02em;
    color: var(--lj-ink);
  }

  /* 邮箱与电话是可点的，必须完整显示（不截断、不用「发送邮件」占位） */
  .contact-item__value a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    overflow-wrap: anywhere;             /* 长邮箱在 375px 下允许断行，不溢出 */
  }

  .contact-item__value a:hover {
    color: var(--lj-text-secondary);
    text-decoration-color: currentColor;
  }

  .contact-item__value a:focus-visible {
    outline: none;
    box-shadow: var(--lj-shadow-focus);
    border-radius: 2px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     表单控件｜视觉规范 §6.6 —— **本交付不实现，理由见下**
     ----------------------------------------------------------------------
     信息架构 §5.5 / §7.4-2 已定：/contact/ 不做表单，只有 mailto: 与 tel:。
     全站没有任何输入场景。不实现有三条实质理由：
       1. 死代码：静态站无输入场景，写出来无法验证，只会成为负担。
       2. 破坏机器检查：§6.6 的 focus 态要求
          `box-shadow: 0 0 0 3px rgb(20 20 19 / 0.08)`，那是第 5 个阴影值，
          会让 CHECKLIST 的「全站 box-shadow ⊆ 白名单」检查永远失败。
       3. 决策已锁：客户若改口要表单，应走 Workers 函数自建（§7.4-2），
          届时控件会在真实表单语境下重新设计，比现在抄一份更准。
     若将来必须实现，按 §6.6 逐条落地，并把 focus 态改写为
     `outline: 2px solid var(--lj-ink); outline-offset: 2px`，
     避免引入第 5 个 box-shadow。
     ══════════════════════════════════════════════════════════════════════ */

  /* ══════════════════════════════════════════════════════════════════════
     深色区里的正文颜色
     ----------------------------------------------------------------------
     typography.css 把 .prose 的正文色定死为 --lj-ink（浅底上的最优解，
     17.5:1）。深色区必须整体接管，否则墨字叠在纯黑上等于不可读。
     特异性：.on-dark .prose (0,2,0) 高于 .prose (0,1,0)，无需 !important。
     ══════════════════════════════════════════════════════════════════════ */
  .on-dark .prose,
  .on-dark .prose p,
  .on-dark .prose ul {
    color: var(--lj-canvas-on-dark);   /* #faf9f5 on #000000 = 21:1 */
  }

  /* 页尾 CTA 的说明句比标题弱一档：用深色区次色 #b0aea5（8.29:1 ✓）。
     放在 .on-dark 规则之后，同特异性下后者生效。 */
  .band-cta .prose,
  .band-cta .prose p {
    color: var(--lj-text-on-dark);
  }

  /* ══════════════════════════════════════════════════════════════════════
     断点内调整
     ══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 1023px) {
    .section-head {
      margin-block-end: 40px;
    }

    .footer__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px 48px;
    }
  }

  @media (max-width: 767px) {
    .site-header__inner {
      height: var(--lj-nav-h-mobile);
    }

    .nav,
    .site-header__actions .btn--pill {
      display: none;             /* 移动端切抽屉；抽屉内保留 primary 按钮 */
    }

    .nav-toggle {
      display: inline-flex;
    }

    .logo {
      font-size: 20px;
    }

    /* 首屏动作区：横排 → 上下排列，间距 24 → 20。
       primary **不拉满**（IA §6.2 B1：拉满会读成「页面的全部」），
       文字链接左对齐，与按钮左缘对齐。 */
    .hero-actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }

    /* 页尾 CTA 的按钮全宽｜IA §6.2 B8。只作用于 .band-cta，不波及首屏 */
    .card--feature,
    .card--dark {
      padding: var(--lj-pad-card-mobile);   /* 40 → 24 */
    }

    .card--cream,
    .card--warm {
      padding: var(--lj-pad-card-mobile);   /* 32 → 24 */
    }

    .section-head {
      margin-block-end: 32px;
    }

    .footer__cols {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }

    .footer__brand {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    /* 页尾 CTA 的按钮全宽｜信息架构 §6.2 B8 */
    .band-cta .btn {
      width: 100%;
    }

    .quote {
      text-align: start;   /* 移动端默认左对齐；文案确认 ≤16 字/行且 ≤3 行时加 .quote--center 保留居中 */
    }

    .quote--center {
      text-align: center;
    }
  }

  /* ══════════════════════════════════════════════════════════════════════
     reduced-motion 下的位移取消｜信息架构 §6.5
     「hover 的颜色变化保留（颜色不是运动）；hover 的位移在 reduce 下取消」
     ══════════════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    .btn:hover .btn__arrow,
    .link-arrow:hover .link-arrow__icon,
    .card:hover .link-arrow__icon {
      transform: none;
    }

    .btn:active {
      transform: none;
    }
  }
}