/* ==========================================================================
   Lifeblog 设计系统
   概念：野外笔记 / 个人观测站（field notebook / personal observatory）
   层次：reset → tokens → base → utilities → layout → components → pages → overrides
   与 tokens.json 保持同步；改色请双写。
   ========================================================================== */

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

/* ================================================================ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul, ol { padding-left: 0; list-style: none; }
  table { border-collapse: collapse; }
  :focus { outline: none; } /* 由 base 层的 :focus-visible 统一接管 */
}

/* ================================================================ tokens */
@layer tokens {
  :root {
    color-scheme: dark;
    /* 响应式根字号：≤1391px 恒为 16px（既有断点零扰动），大屏 UI 随视口温和放大，
       上限 26px——导航与全文按 rem 同步缩放，但不会失控。 */
    font-size: clamp(16px, 1.15vw, 26px);

    /* 深空（默认）：不是纯黑，是深夜工作台；发丝线 #2A2C32 */
    --paper: #121316;
    --paper-inset: #0e0f12;
    --surface: #1a1c21;
    --ink: #e8e4d8;
    --ink-soft: #b5b0a2;
    --ink-faint: #8e8a7e;
    --rule: #2a2c32;
    --rule-strong: #454a52;
    --focus: #f4a259;
    --brand-tag: #8a9099; /* 冷灰，仅用于品牌副标 */
    --selection-bg: #4a3c22;
    --selection-ink: #f2eee2;

    /* 三轴色（深空原值：X 行路·琥珀金 / Y 格物·量子青 / Z 见心·般若紫） */
    --ax-x: #d49b4b;
    --ax-y: #4ba3b3;
    --ax-z: #9b8ad4;

    /* 七个分区的强调色（文字级，AA 对比度；深空下沿用原夜航值） */
    --c-travel: #d9a24a;
    --c-philosophy: #9aa0e0;
    --c-politics: #e07b52;
    --c-finance: #7fb069;
    --c-orgchem: #f06a44;
    --c-compchem: #4fb3c4;
    --c-life: #aaa495;

    /* 字族：系统字体，无外部请求 */
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
      "Times New Roman", "Songti SC", STSong, "Noto Serif CJK SC",
      "Source Han Serif SC", "Source Han Serif CN", SimSun, serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
      "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
      "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
      "Microsoft YaHei", system-ui, sans-serif;
    --font-display: Didot, "Bodoni MT", Cochin, "Iowan Old Style", Georgia,
      "Times New Roman", "Songti SC", STSong, serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
      "Liberation Mono", "DejaVu Sans Mono", monospace;

    /* 字级 */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-base: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.375rem;
    --text-4xl: clamp(2.5rem, 2rem + 2vw, 3.25rem);

    --leading-body: 1.75;
    --leading-tight: 1.35;
    --leading-heading: 1.3;

    /* 间距 */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* 版式 */
    --wrap: 72rem;
    --measure: 66ch;
    --rail: 13.75rem;
    /* 报头高（16px 根字号下 = 153.6px，实测 153.3px；随 rem 一起缩放，
       供 ≥84rem 的版心宽度与首屏剧幕高度反推用） */
    --masthead-h: 9.6rem;
    --gutter: clamp(1.25rem, 4vw, 3rem);

    /* 半径与线规（笔记体质：基本是直角） */
    --radius-1: 2px;
    --radius-2: 4px;
    --rule-w: 1px;
    --rule-w-strong: 2px;
  }

  /* 白昼（备用暖纸）：系统浅色且未手动指定时启用 */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      color-scheme: light;
      --paper: #f6f1e5;
      --paper-inset: #efe9da;
      --surface: #fcfaf2;
      --ink: #221f19;
      --ink-soft: #54503f;
      --ink-faint: #6f6957;
      --rule: #ddd5c3;
      --rule-strong: #bfb5a0;
      --focus: #9c3d10;
      --brand-tag: #656b74;
      --selection-bg: #ecd9ae;
      --selection-ink: #221f19;
      --ax-x: #8a5e14;
      --ax-y: #176e7a;
      --ax-z: #5e52a3;
      --c-travel: #8a5a13;
      --c-philosophy: #474a94;
      --c-politics: #a03d21;
      --c-finance: #2f6b33;
      --c-orgchem: #b93a1c;
      --c-compchem: #14707f;
      --c-life: #6b6659;
    }
  }

  /* 手动覆盖（与上面媒体查询的值保持一致） */
  :root[data-theme="light"] {
    color-scheme: light;
    --paper: #f6f1e5;
    --paper-inset: #efe9da;
    --surface: #fcfaf2;
    --ink: #221f19;
    --ink-soft: #54503f;
    --ink-faint: #6f6957;
    --rule: #ddd5c3;
    --rule-strong: #bfb5a0;
    --focus: #9c3d10;
    --brand-tag: #656b74;
    --selection-bg: #ecd9ae;
    --selection-ink: #221f19;
    --ax-x: #8a5e14;
    --ax-y: #176e7a;
    --ax-z: #5e52a3;
    --c-travel: #8a5a13;
    --c-philosophy: #474a94;
    --c-politics: #a03d21;
    --c-finance: #2f6b33;
    --c-orgchem: #b93a1c;
    --c-compchem: #14707f;
    --c-life: #6b6659;
  }

  /* 分区语境：data-category 把 --cat 注入子树 */
  [data-category="travel"]     { --cat: var(--c-travel); }
  [data-category="philosophy"] { --cat: var(--c-philosophy); }
  [data-category="politics"]   { --cat: var(--c-politics); }
  [data-category="finance"]    { --cat: var(--c-finance); }
  [data-category="orgchem"]    { --cat: var(--c-orgchem); }
  [data-category="compchem"]   { --cat: var(--c-compchem); }
  [data-category="life"]       { --cat: var(--c-life); }

  /* 轴语境：data-axis 把 --axis 注入子树（与 --cat 可共存） */
  [data-axis="x"] { --axis: var(--ax-x); }
  [data-axis="y"] { --axis: var(--ax-y); }
  [data-axis="z"] { --axis: var(--ax-z); }

  /* ≥84rem：版心放开到 86vw；再用首屏可用高反推宽度上限，
     避免超宽/矮屏把剧照裁成横条、切到引文与署名。 */
  @media (min-width: 84rem) {
    :root {
      --wrap: min(86vw, calc(max(100vh - var(--masthead-h), 560px) * 1.95));
      --wrap: min(86vw, calc(max(100svh - var(--masthead-h), 560px) * 1.95));
    }
  }
}

/* ================================================================= base */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--space-6);
  }

  body {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--ink);
    background-color: var(--paper);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    transition: background-color 200ms ease, color 200ms ease;
  }

  ::selection { background: var(--selection-bg); color: var(--selection-ink); }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-1);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    line-height: var(--leading-heading);
    font-weight: 700;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a {
    color: inherit;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 0.18em;
    transition: color 150ms ease, text-decoration-color 150ms ease;
  }
  a:hover { text-decoration-color: currentColor; }

  small { font-size: var(--text-sm); }
}

/* ============================================================ utilities */
@layer utilities {
  .wrap {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
  }

  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .mono { font-family: var(--font-mono); }
}

/* =============================================================== layout */
@layer layout {
  .site-main { display: block; }

  /* 文章页骨架（沉浸双栏工作台）：窄屏单栏（右轨在文前）；
     ≥64rem 正文居左、右轨（目录 + 局部星云）sticky；
     ≥80rem 边注不再探出（右侧已被轨占据），保持行内块 */
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .rail { display: grid; gap: var(--space-6); align-content: start; }

  @media (min-width: 64rem) {
    .article-layout {
      grid-template-columns: minmax(0, 1fr) var(--rail);
      gap: var(--space-7);
      align-items: start;
      max-width: calc(var(--rail) + var(--space-7) + var(--measure));
      margin-inline: auto;
    }
    .article-layout > .prose { grid-column: 1; grid-row: 1; }
    .article-layout > .rail { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-6); }
  }
}

/* =========================================================== components */

/* ---- 跳转链接（无障碍） ---- */
@layer components {
  .skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }
}

/* ---- 刊头 masthead ---- */
@layer components {
  .masthead { border-bottom: var(--rule-w) solid var(--rule); }

  .masthead-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-5) var(--space-4);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    min-height: 2.75rem;
  }
  .brand-mark { width: 2rem; height: auto; color: var(--ink); flex: none; }
  .brand-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }
  .brand-tag {
    display: block;
    margin-top: 0.35em;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    color: var(--brand-tag);
  }

  .masthead-side {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
  }
  .site-coord {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    display: none;
  }
  @media (min-width: 48rem) { .site-coord { display: inline; } }

  .tool-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 2.75rem;
    padding-inline: var(--space-2);
    text-decoration: none;
  }
  .tool-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .tool-link svg { width: 0.9rem; height: auto; }

  /* 主题切换 */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 2.75rem;
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink);
    white-space: nowrap;
    flex: none;
  }
  .theme-toggle .tt-on-light,
  .theme-toggle .tt-on-dark { white-space: nowrap; }
  .theme-toggle:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .theme-toggle svg { width: 0.9rem; height: auto; }
  /* 默认深空：显示「☼ 白昼」选项；白昼下显示「☾ 深空」 */
  .theme-toggle .tt-on-light { display: none; }
  .theme-toggle .tt-on-dark { display: inline-flex; align-items: center; gap: 0.5em; }
  :root[data-theme="light"] .theme-toggle .tt-on-light { display: inline-flex; align-items: center; gap: 0.5em; }
  :root[data-theme="light"] .theme-toggle .tt-on-dark { display: none; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-toggle .tt-on-light { display: inline-flex; align-items: center; gap: 0.5em; }
    :root:not([data-theme="dark"]) .theme-toggle .tt-on-dark { display: none; }
  }

  /* 桌面导航：一册索引 */
  .site-nav {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    padding-block: var(--space-2);
    border-top: var(--rule-w-strong) solid var(--ink);
  }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding-block: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
  }
  .site-nav a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .site-nav a[aria-current="page"] {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--axis, var(--cat, var(--ink)));
  }
  .dot {
    width: 0.5em; height: 0.5em;
    background: var(--axis, var(--cat, var(--ink-faint)));
    flex: none;
  }
  @media (min-width: 48rem) {
    .site-nav { display: flex; }
    .m-nav { display: none; }
  }

  /* 移动导航：无 JS 的 details 折叠 */
  .m-nav { border-top: var(--rule-w-strong) solid var(--ink); }
  .m-nav summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
  }
  .m-nav summary::-webkit-details-marker { display: none; }
  .m-nav summary::after {
    content: "＋";
    font-family: var(--font-mono);
    color: var(--ink-faint);
  }
  .m-nav[open] summary::after { content: "－"; }
  .m-nav nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-6);
    padding-bottom: var(--space-4);
  }
  .m-nav a {
    display: flex;
    align-items: center;
    gap: 0.6em;
    min-height: 2.75rem;
    border-top: var(--rule-w) solid var(--rule);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
  }
  .m-nav a[aria-current="page"] { font-weight: 600; }
}

/* ---- 通用区块头：索引签 ---- */
@layer components {
  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    border-top: var(--rule-w-strong) solid var(--ink);
    padding-top: var(--space-3);
    margin-bottom: var(--space-5);
  }
  .section-head h2 {
    font-size: var(--text-xl);
    letter-spacing: 0.02em;
  }
  .section-head .section-note {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .section-link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
  }
  .section-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}

/* ---- 首页：首屏铭文图舞台（满宽 W. W. 剧照：lighten 混合把暖黑底融进纸面） ---- */
@layer components {
  /* 暗色（默认）：舞台即列满宽——上缘 0 紧贴导航粗规则线，两边与规则线精确对齐，
     下缘让出 2rem；无辉光、无装饰衬垫，overflow 兜住 hover 缩放。 */
  .ww-cinema-stage {
    margin: 0 0 2rem;
    overflow: hidden;
  }

  .ww-cinema-figure {
    width: 100%;
  }
  .ww-cinema-figure img {
    width: 100%;
    /* 宽幅剧场静帧（<84rem）：高随视口 420–600px，object-position 顶锚 40%。
       源图 1720×1159，cover 裁切与文字位置（元素坐标，实测）：
       1024=942×532.5：上裁 6.44% / 下裁 9.72%，引文 6.99%，署名 87.45%；
       800=736×420：上裁 6.12% / 下裁 9.18%，引文 7.30%，署名 86.90%；
       390=自然 350×236：不裁切，引文 12.3%，署名 79.8%。
       ≥84rem 的首屏剧幕规则见下方。 */
    height: clamp(420px, 52vw, 600px);
    object-fit: cover;
    object-position: center 40%;
    /* 消底原理：更强的 contrast(1.22) brightness(0.88) 把剧照暖棕底（≈#261e13）
       逐通道压到纸色 #121316 地板之下，lighten（逐通道取较亮者）便处处选中纸面，
       暖黑矩形被逐像素擦除，最暗处残余 ≤ ~+2 R；人物与手写引文亮度保持
       （实测引文峰值 198/200、署名 203/204）——所以无需宽幅渐隐。 */
    filter: contrast(1.22) brightness(0.88);
    opacity: 0.95;
    mix-blend-mode: lighten;
    transition: opacity 0.35s ease, transform 0.6s ease;
    /* 只羽化最外缘（横 2% / 顶 3% / 底 94%→100%）：顶褪色止于 3%、底褪色起于 94%，
       各档位下全部文字都落在褪色区之外（最窄余量 ~1.8%：1920 引文首行顶 4.8% 对顶羽化 3%）。
       prefers-reduced-motion 时过渡时长由全局规则归零。 */
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 2%, #000 98%, transparent),
      linear-gradient(to bottom, transparent, #000 3%, #000 94%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent, #000 2%, #000 98%, transparent),
      linear-gradient(to bottom, transparent, #000 3%, #000 94%, transparent);
    mask-composite: intersect;
  }
  /* hover 只做极轻的呼吸：不动的滤镜（动它会改变消底阈值），≥48rem 才许缩放 */
  @media (hover: hover) {
    .ww-cinema-figure:hover img { opacity: 1; }
  }
  @media (hover: hover) and (min-width: 48rem) {
    .ww-cinema-figure:hover img { transform: scale(1.01); }
  }

  /* ≥84rem：首屏电影幕——吃掉导航以下的可用高度；宽度由 --wrap 的
     86vw 与「可用高 × 1.95」共同约束。object-position 39% 是 1.95 极限画幅下
     引文首行（≈3.9%）与署名（≈92.6%）同时落在 3%/94% 羽化区内的平衡点；
     1920×1080 实测为 4.8% / 91.3%。 */
  @media (min-width: 84rem) {
    .ww-cinema-figure img {
      height: min(calc(100vh - var(--masthead-h)), 62vw);
      height: min(calc(100svh - var(--masthead-h)), 62vw);
      min-height: 560px;
      object-position: center 39%;
    }
  }

  /* 白昼：夹在书页里的剧照——满宽溶解退场，回到 860px 相纸小照：正常混合
     （lighten 会把照片整张洗进浅纸里）、无遮罩无滤镜，恢复上缘小留白；
     高度与顶锚 20% 的裁切只在 ≥48rem 生效，窄屏仍回到自然 3:2。 */
  :root[data-theme="light"] .ww-cinema-stage { margin-top: 1.5rem; }
  :root[data-theme="light"] .ww-cinema-figure {
    max-width: 860px;
    margin-inline: auto;
  }
  @media (min-width: 48rem) {
    :root[data-theme="light"] .ww-cinema-figure img {
      height: 470px;
      object-position: center 20%;
    }
  }
  :root[data-theme="light"] .ww-cinema-figure img {
    min-height: 0; /* 抵消 ≥84rem 首屏剧幕的 560px 下限：相纸小照保持 470px */
    mix-blend-mode: normal;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
    filter: none;
    padding: 3px; /* 极窄相纸衬边 */
    background: var(--surface);
    border: var(--rule-w) solid var(--rule-strong);
    border-radius: var(--radius-1);
  }
  /* 系统浅色且未手动指定主题：同上 */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .ww-cinema-stage { margin-top: 1.5rem; }
    :root:not([data-theme="dark"]) .ww-cinema-figure {
      max-width: 860px;
      margin-inline: auto;
    }
    @media (min-width: 48rem) {
      :root:not([data-theme="dark"]) .ww-cinema-figure img {
        height: 470px;
        object-position: center 20%;
      }
    }
    :root:not([data-theme="dark"]) .ww-cinema-figure img {
      min-height: 0; /* 同手动白昼：抵消 ≥84rem 的 560px 下限 */
      mix-blend-mode: normal;
      -webkit-mask-image: none;
      mask-image: none;
      opacity: 1;
      filter: none;
      padding: 3px;
      background: var(--surface);
      border: var(--rule-w) solid var(--rule-strong);
      border-radius: var(--radius-1);
    }
  }

  /* ≤48rem：回到自然 3:2（不定高、不裁切），图满 wrap 宽；lighten 继续消底，
     羽化区（顶 3% / 底 94% / 横 2%）远离引文（y 12.3–69.5%）与署名（79.8% 止） */
  @media (max-width: 48rem) {
    .ww-cinema-stage {
      margin: var(--space-3) 0 var(--space-5);
    }
    .ww-cinema-figure img { height: auto; }
  }
}

/* ---- 首页：七个分区（行，不是卡片） ---- */
@layer components {
  .domains { container-type: inline-size; }

  .domain-row {
    display: grid;
    grid-template-columns: 2.5rem 3.5rem minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    align-items: start;
    padding-block: var(--space-5);
    border-top: var(--rule-w) solid var(--rule);
    transition: background-color 150ms ease;
  }
  .domain-row:last-child { border-bottom: var(--rule-w) solid var(--rule); }
  .domain-row:hover {
    background: color-mix(in srgb, var(--cat) 5%, transparent);
  }

  .domain-no {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    padding-top: 0.55em;
  }
  .domain-motif svg { width: 3rem; height: auto; color: var(--cat); }

  .domain-name {
    font-size: var(--text-lg);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
  }
  .domain-name:hover { text-decoration: underline; text-decoration-color: var(--cat); text-underline-offset: 0.2em; }
  .domain-latin {
    display: block;
    margin-top: 0.35em;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--ink-faint);
  }

  .domain-desc {
    grid-column: 3;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }

  .domain-latest {
    grid-column: 1 / -1;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--rule-w) dashed var(--rule);
    display: grid;
    gap: var(--space-2);
  }
  .domain-latest li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: 0.9375rem;
  }
  .domain-latest a { text-decoration: none; }
  .domain-latest a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
  .domain-latest time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    flex: none;
  }

  @container (min-width: 40rem) {
    .domain-row {
      grid-template-columns: 2.5rem 4rem 11rem minmax(0, 1fr) 15rem;
      align-items: center;
      gap: 0 var(--space-5);
    }
    .domain-motif svg { width: 3.5rem; }
    .domain-desc { grid-column: auto; margin-top: 0; }
    .domain-latest {
      grid-column: auto;
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }
  }
}

/* ---- 账页列表 ledger（首页最新 / 分区 / 归档共用） ---- */
@layer components {
  .ledger { container-type: inline-size; }

  .ledger-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-3) var(--space-2);
    margin-inline: calc(-1 * var(--space-2));
    border-bottom: var(--rule-w) solid var(--rule);
    text-decoration: none;
    transition: background-color 150ms ease;
  }
  .ledger-link:hover { background: var(--surface); }

  .ledger-no {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .ledger-date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-soft);
  }
  .ledger-title {
    order: -1;
    flex: 0 0 100%;
    font-size: 1.0625rem;
    line-height: 1.6;
  }
  .ledger-link:hover .ledger-title { text-decoration: underline; text-underline-offset: 0.18em; }
  .ledger-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
  }
  .ledger-cat {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }
  .ledger-cat::before {
    content: "";
    width: 0.5em; height: 0.5em;
    background: var(--cat, var(--ink-faint));
  }

  .tag {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--ink-soft);
    border: var(--rule-w) solid var(--rule-strong);
    border-radius: var(--radius-1);
    padding: 0.05em 0.5em;
    white-space: nowrap;
  }

  @container (min-width: 42rem) {
    .ledger-link {
      display: grid;
      grid-template-columns: 5.5rem 6.25rem minmax(0, 1fr) auto;
      gap: 0 var(--space-4);
    }
    .ledger-title { order: 0; flex: unset; }
  }
}

/* ---- 分页 ---- */
@layer components {
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--rule-w) solid var(--rule);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
  }
  .pagination a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  .pagination a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .page-status {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
}

/* ---- 文章头 ---- */
@layer components {
  .post-head {
    padding-block: var(--space-7) var(--space-6);
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .post-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
  }
  .post-kicker .kicker-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--cat, var(--ink));
    text-decoration: none;
    font-weight: 600;
  }
  .post-kicker .kicker-cat::before {
    content: "";
    width: 0.55em; height: 0.55em;
    background: var(--cat, var(--ink));
  }
  .post-kicker .kicker-cat:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .kicker-no {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }

  .post-title {
    font-size: clamp(1.875rem, 1.4rem + 2vw, 2.625rem);
    letter-spacing: 0.01em;
    max-width: 24em;
  }
  .dek {
    margin-top: var(--space-4);
    max-width: 56ch;
    font-size: var(--text-lg);
    line-height: 1.65;
    color: var(--ink-soft);
  }
  .meta {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .meta span + span::before {
    content: "·";
    margin-inline: 0.75em;
    color: var(--rule-strong);
  }
}

/* ---- 目录 TOC ---- */
@layer components {
  .toc {
    border: var(--rule-w) solid var(--rule);
    background: var(--surface);
    padding: var(--space-4) var(--space-5);
  }
  .toc-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.25em;
    color: var(--ink-faint);
    margin-bottom: var(--space-3);
  }
  .toc ol { display: grid; gap: var(--space-2); }
  .toc a {
    display: flex;
    gap: 0.75em;
    align-items: baseline;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.6;
    text-decoration: none;
  }
  .toc a:hover { color: var(--cat, var(--ink)); text-decoration: underline; text-underline-offset: 0.2em; }
  .toc-no {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    flex: none;
  }
  .toc .toc-sub { padding-left: 1.75em; }

  @media (min-width: 64rem) {
    .toc {
      border: 0;
      background: none;
      padding: 0;
      border-top: var(--rule-w-strong) solid var(--ink);
      padding-top: var(--space-3);
    }
  }
}

/* ---- 正文 prose ---- */
@layer components {
  .prose {
    max-width: var(--measure);
    counter-reset: sec callout;
    position: relative;
  }
  .prose > * + * { margin-top: var(--space-5); }
  .prose > h2 { margin-top: var(--space-8); }
  .prose > h2:first-child { margin-top: 0; }
  .prose > h3 { margin-top: var(--space-7); }

  .prose h2 {
    counter-increment: sec;
    border-top: var(--rule-w) solid var(--rule);
    padding-top: var(--space-5);
    font-size: var(--text-2xl);
  }
  .prose h2::before {
    content: counter(sec, decimal-leading-zero);
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--cat, var(--ink-faint));
  }
  .prose h3 { font-size: var(--text-xl); }
  .prose h2[id], .prose h3[id] { scroll-margin-top: var(--space-6); }

  .prose a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 0.18em;
  }
  .prose a:hover {
    color: var(--cat, var(--ink));
    text-decoration-color: currentColor;
  }

  .prose strong { font-weight: 700; }

  /* 中文的强调是着重点，不是斜体；西文书名用 <i> 斜体 */
  .prose em {
    font-style: normal;
    -webkit-text-emphasis: filled dot;
    -webkit-text-emphasis-position: under right;
    text-emphasis: filled dot;
    text-emphasis-position: under right;
  }
  .prose :is(i, cite) { font-style: italic; }

  .prose ul { padding-left: 1.5em; }
  .prose ul li { position: relative; }
  .prose ul li::before {
    content: "";
    position: absolute;
    left: -1.25em; top: 0.78em;
    width: 0.35em; height: 0.35em;
    background: var(--ink-faint);
  }
  .prose ol { list-style: decimal; padding-left: 1.75em; }
  .prose ol li::marker {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--cat, var(--ink-faint));
  }
  .prose li + li { margin-top: var(--space-2); }

  .prose blockquote {
    padding-left: var(--space-5);
    border-left: var(--rule-w-strong) solid var(--cat, var(--rule-strong));
    color: var(--ink-soft);
    font-size: var(--text-md);
  }
  .prose blockquote footer {
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ink-faint);
  }

  .prose code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--paper-inset);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-1);
  }
  .prose pre {
    border: var(--rule-w) solid var(--rule);
    background: var(--paper-inset);
    padding: var(--space-4) var(--space-5);
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: 1.7;
  }
  .prose pre code { background: none; padding: 0; }

  .prose hr {
    border: 0;
    border-top: var(--rule-w) solid var(--rule);
    margin-block: var(--space-7);
  }

  .prose sup { font-family: var(--font-mono); font-size: 0.72em; }
  .prose sup a { text-decoration: none; color: var(--cat, var(--ink-soft)); }
  .prose sup a:hover { text-decoration: underline; }

  .prose abbr { text-decoration: none; border-bottom: 1px dotted var(--rule-strong); }

  .prose mark {
    background: color-mix(in srgb, var(--c-travel) 22%, transparent);
    color: inherit;
    padding-inline: 0.1em;
  }

  .prose table {
    width: 100%;
    font-size: 0.9375rem;
    border-top: var(--rule-w-strong) solid var(--ink);
    border-bottom: var(--rule-w-strong) solid var(--ink);
  }
  .prose caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ink-soft);
    padding-bottom: var(--space-2);
  }
  .prose th {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--rule-w) solid var(--ink);
  }
  .prose td {
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--rule-w) solid var(--rule);
    vertical-align: top;
  }
}

/* ---- 提示块 callout：注记 / 提示 / 注意 / 警示 / 引文 / 论点 / 反诘 / 断言 / 分析 / 推测 ---- */
@layer components {
  .callout {
    --ca: var(--ink-soft);
    counter-increment: callout;
    border: var(--rule-w) solid var(--rule);
    border-left: var(--rule-w-strong) solid var(--ca);
    background: var(--surface);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-md);
    line-height: 1.75;
  }
  .callout > * + * { margin-top: var(--space-3); }
  .callout-label {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    color: var(--ca);
  }
  .callout-label::before {
    content: "";
    width: 0.55em; height: 0.55em;
    background: var(--ca);
    flex: none;
  }
  .callout-label::after {
    content: counter(callout, decimal-leading-zero);
    font-family: var(--font-mono);
    letter-spacing: 0;
    opacity: 0.65;
  }

  .callout[data-kind="note"]        { --ca: var(--ink-soft); }
  .callout[data-kind="tip"]         { --ca: var(--c-finance); }
  .callout[data-kind="warning"]     { --ca: var(--c-travel); }
  .callout[data-kind="danger"]      { --ca: var(--c-orgchem); }
  .callout[data-kind="quote"]       { --ca: var(--ink-faint); }
  .callout[data-kind="thesis"]      { --ca: var(--c-philosophy); }
  .callout[data-kind="objection"]   { --ca: var(--c-politics); }
  .callout[data-kind="claim"]       { --ca: var(--c-compchem); }
  .callout[data-kind="analysis"]    { --ca: var(--c-orgchem); }
  .callout[data-kind="speculation"] { --ca: var(--c-life); }
}

/* ---- 图版 figure ---- */
@layer components {
  .figure svg, .figure img {
    width: 100%;
    height: auto;
    border: var(--rule-w) solid var(--rule);
    background: var(--surface);
    color: var(--ink);
  }
  .figure figcaption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--ink-soft);
  }
  /* 窄屏图表保留可读宽度，允许在图内横向滑动，不把正文撑宽。 */
  @media (max-width: 48rem) {
    .figure > picture {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .figure img {
      min-width: 40rem;
    }
  }
  .fig-no {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--cat, var(--ink-faint));
    padding-top: 0.2em;
  }
}

/* ---- 边注 marginalia：≥80rem 探入右侧留白，其余为行内小块 ---- */
@layer components {
  .margin-note {
    border-left: var(--rule-w-strong) solid var(--cat, var(--rule-strong));
    padding-left: var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .mn-label {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    margin-bottom: var(--space-2);
  }
  @media (min-width: 80rem) {
    .margin-note {
      position: absolute;
      right: -14.5rem;
      width: 12.5rem;
      margin-top: 0;
      border-left: 0;
      border-top: var(--rule-w) solid var(--rule-strong);
      padding-left: 0;
      padding-top: var(--space-2);
    }
    /* 双栏工作台（.article-layout 右轨占位）内，边注保持行内块，不再探出 */
    .article-layout .margin-note {
      position: static;
      right: auto;
      width: auto;
      border-left: var(--rule-w-strong) solid var(--cat, var(--rule-strong));
      border-top: 0;
      padding-left: var(--space-4);
      padding-top: 0;
    }
  }
}

/* ---- 脚注与参考 ---- */
@layer components {
  .footnotes {
    margin-top: var(--space-7);
    border-top: var(--rule-w) solid var(--rule);
    padding-top: var(--space-4);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--ink-soft);
  }
  .footnotes ol { list-style: decimal; padding-left: 1.5em; }
  .footnotes ol li::marker {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--cat, var(--ink-faint));
  }
  .footnotes li + li { margin-top: var(--space-2); }
  .footnotes li:target { background: var(--paper-inset); }
  .fn-back {
    font-family: var(--font-mono);
    text-decoration: none;
    margin-left: 0.5em;
  }
  .fn-back:hover { text-decoration: underline; }

  .refs { margin-top: var(--space-7); }
  .refs h2 {
    font-size: var(--text-lg);
    border-top: var(--rule-w-strong) solid var(--ink);
    padding-top: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .refs ol { counter-reset: ref; display: grid; gap: var(--space-2); }
  .refs li {
    counter-increment: ref;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .refs li::before {
    content: "[" counter(ref) "]";
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    padding-top: 0.25em;
  }
  .footnotes a,
  .refs a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ---- 免责声明（金融 / 时政专用） ---- */
@layer components {
  .disclaimer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    border-top: var(--rule-w-strong) solid var(--rule-strong);
    border-bottom: var(--rule-w-strong) solid var(--rule-strong);
    padding-block: var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--ink-soft);
  }
  .disclaimer-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.25em;
    color: var(--ink-faint);
    padding-top: 0.35em;
    white-space: nowrap;
  }

  .demo-frame {
    margin-top: var(--space-8);
    border: var(--rule-w) dashed var(--rule-strong);
    padding: var(--space-5);
  }
  .demo-frame-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    color: var(--ink-faint);
    margin-bottom: var(--space-4);
  }
}

/* ---- 标签 / 相关 / 上下篇 ---- */
@layer components {
  .post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-7);
  }
  .post-tags .tags-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    margin-right: var(--space-2);
  }

  .related { margin-top: var(--space-8); }

  .post-nav {
    display: grid;
    gap: 0;
    margin-top: var(--space-8);
    border-top: var(--rule-w) solid var(--rule);
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .post-nav a {
    display: block;
    padding: var(--space-5) var(--space-2);
    text-decoration: none;
    transition: background-color 150ms ease;
  }
  .post-nav a:hover { background: var(--surface); }
  .pn-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    color: var(--ink-faint);
  }
  .pn-title {
    margin-top: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.5;
  }
  .post-nav .pn-next { border-top: var(--rule-w) solid var(--rule); }
  @media (min-width: 48rem) {
    .post-nav { grid-template-columns: 1fr 1fr; }
    .post-nav .pn-next {
      border-top: 0;
      border-left: var(--rule-w) solid var(--rule);
      text-align: right;
    }
  }
}

/* ---- 分区页 ---- */
@layer components {
  .cat-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5);
    align-items: end;
    padding-block: var(--space-7) var(--space-6);
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .cat-name {
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    letter-spacing: 0.02em;
  }
  .cat-latin {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    color: var(--ink-faint);
  }
  .cat-desc {
    margin-top: var(--space-4);
    max-width: 44ch;
    font-size: var(--text-md);
    color: var(--ink-soft);
  }
  .cat-stats {
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .cat-motif { justify-self: end; }
  .cat-motif svg { width: clamp(5rem, 12vw, 8rem); height: auto; color: var(--cat); }

  /* 类型筛选签 */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-5) var(--space-7);
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    border: var(--rule-w) solid var(--rule-strong);
    border-radius: var(--radius-1);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--ink-soft);
  }
  .chip:hover { border-color: var(--ink); color: var(--ink); }
  .chip .chip-n {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .chip.is-active .chip-n { color: var(--paper); opacity: 0.7; }

  /* 从这一篇开始 */
  .feature-start {
    display: grid;
    gap: var(--space-3);
    border: var(--rule-w) solid var(--rule-strong);
    border-left: var(--space-1) solid var(--cat, var(--ink));
    background: var(--surface);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-8);
  }
  .fs-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.25em;
    color: var(--cat, var(--ink-faint));
  }
  .fs-title {
    font-size: var(--text-2xl);
    max-width: 22em;
  }
  .fs-title a { text-decoration: none; }
  .fs-title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .fs-dek { max-width: 46ch; color: var(--ink-soft); font-size: var(--text-md); }
  .fs-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); }

  /* 年份分组 */
  .year-group { margin-top: var(--space-7); }
  .year-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    border-top: var(--rule-w-strong) solid var(--ink);
    padding-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .year-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
}

/* ---- 归档 ---- */
@layer components {
  .page-head {
    padding-block: var(--space-7) var(--space-6);
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .page-title { font-size: var(--text-4xl); letter-spacing: 0.02em; }
  .page-sub {
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }

  .arc-year { margin-top: var(--space-7); }
  .arc-month { margin-top: var(--space-5); }
  .arc-month-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: var(--space-2);
  }
  .arc-month-title .n {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .arc-note {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-faint);
  }

  details.arc-details { margin-top: var(--space-7); border-top: var(--rule-w) solid var(--rule); }
  details.arc-details summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
  }
  details.arc-details summary::-webkit-details-marker { display: none; }
  details.arc-details summary .n {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  details.arc-details summary::after {
    content: "＋";
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    color: var(--ink-faint);
  }
  details.arc-details[open] summary::after { content: "－"; }
  .arc-month-line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-2);
    border-bottom: var(--rule-w) solid var(--rule);
    font-size: 0.9375rem;
  }
  .arc-month-line .n {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
}

/* ---- 搜索 ---- */
@layer components {
  .search-shell { max-width: 46rem; }
  .search-form {
    display: flex;
    gap: var(--space-3);
    width: 100%;
    max-width: 100%;
    margin-block: var(--space-5) var(--space-2);
  }
  .search-input {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    min-height: 3rem;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    background: var(--surface);
    border: var(--rule-w) solid var(--rule-strong);
    border-radius: 0;
  }
  .search-input::placeholder { color: var(--ink-faint); }
  .search-input:focus-visible { outline-offset: 0; border-color: var(--focus); }
  .search-btn {
    min-height: 3rem;
    padding-inline: var(--space-5);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    flex: none;
  }
  .search-btn:hover { background: var(--ink-soft); }
  @media (max-width: 22rem) {
    .search-form { gap: var(--space-2); }
    .search-btn { padding-inline: var(--space-4); }
  }
  .search-hint {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    margin-bottom: var(--space-7);
  }

  .results-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    color: var(--ink-faint);
    border-top: var(--rule-w-strong) solid var(--ink);
    padding-top: var(--space-3);
    margin-bottom: var(--space-2);
  }
  .result { border-bottom: var(--rule-w) solid var(--rule); }
  .result > a {
    display: block;
    padding-block: var(--space-4);
    margin-inline: calc(-1 * var(--space-2));
    padding-inline: var(--space-2);
    text-decoration: none;
  }
  .result > a:hover { background: var(--surface); }
  .result-title { font-size: var(--text-lg); font-weight: 700; line-height: 1.5; }
  .result-title mark { background: none; color: var(--c-orgchem); padding: 0; border-bottom: 2px solid var(--c-orgchem); }
  .result-meta {
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .result-snippet {
    margin-top: var(--space-2);
    max-width: 60ch;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ink-soft);
  }

  .empty {
    display: grid;
    justify-items: stretch;
    gap: var(--space-4);
    padding-block: var(--space-7);
    border-top: var(--rule-w) solid var(--rule);
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .empty svg { width: 4rem; height: auto; color: var(--ink-faint); }
  .empty-title { font-size: var(--text-xl); }
  .empty > svg,
  .empty-title { justify-self: start; }
  .empty ul { display: grid; gap: var(--space-1); width: 100%; max-width: 60ch; font-size: var(--text-sm); color: var(--ink-soft); }
  .empty li { position: relative; padding-left: 1.5em; }
  .empty li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); }
}

/* ---- 404 ---- */
@layer components {
  .nf { padding-block: var(--space-9); max-width: 40rem; }
  .nf svg.nf-motif { width: 6rem; height: auto; color: var(--ink-faint); margin-bottom: var(--space-5); }
  .nf-code {
    font-family: var(--font-display);
    font-size: clamp(4rem, 16vw, 8rem);
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .nf-title {
    margin-top: var(--space-4);
    font-size: var(--text-2xl);
  }
  .nf-text { margin-top: var(--space-3); color: var(--ink-soft); }
  .nf-links {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
  }
  .nf-links a { min-height: 2.75rem; display: inline-flex; align-items: center; }
}

/* ---- 题署 colophon ---- */
@layer components {
  .colophon {
    margin-top: var(--space-9);
    border-top: var(--rule-w-strong) solid var(--ink);
  }
  .colophon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-6);
    padding-block: var(--space-7);
  }
  .colophon h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.25em;
    color: var(--ink-faint);
    margin-bottom: var(--space-3);
  }
  .colophon-col ul { display: grid; gap: var(--space-1); }
  .colophon-col a {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    min-height: 1.75rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ink-soft);
    text-decoration: none;
  }
  .colophon-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
  .colophon-note {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.9;
    color: var(--ink-soft);
  }
  .colophon-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    border-top: var(--rule-w) solid var(--rule);
    padding-block: var(--space-4) var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .colophon-base a { color: inherit; }
}

/* ---- 轴页题头（行路 / 格物 / 见心共用） ---- */
@layer components {
  .axis-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5);
    align-items: end;
    padding-block: var(--space-7) var(--space-6);
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .axis-kicker {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    color: var(--axis);
  }
  .axis-kicker::before {
    content: "";
    width: 0.6em; height: 0.6em;
    background: var(--axis);
    flex: none;
  }
  .axis-name { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); letter-spacing: 0.02em; }
  .axis-latin {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    color: var(--ink-faint);
  }
  .axis-desc {
    margin-top: var(--space-4);
    max-width: 46ch;
    font-size: var(--text-md);
    color: var(--ink-soft);
  }
  .axis-stats {
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .axis-motif { justify-self: end; }
  .axis-motif svg { width: clamp(5rem, 12vw, 8rem); height: auto; color: var(--axis); }
}

/* ---- 首页：思想星云（总控台） ---- */
@layer components {
  .nebula-grid { display: grid; gap: var(--space-5); }
  @media (min-width: 64rem) {
    .nebula-grid { grid-template-columns: minmax(0, 1fr) var(--nebula-inspector, 20rem); align-items: stretch; }
  }

  .nebula-canvas { border: var(--rule-w) solid var(--rule); background: var(--surface); }
  .nebula-canvas svg { width: 100%; height: auto; display: block; }

  /* 画布内 SVG 元素（currentColor 体系外的命名类） */
  .neb-grid { fill: none; stroke: var(--rule); stroke-width: 1; }
  .neb-axis { stroke: var(--axis); stroke-width: 1; opacity: 0.75; }
  .neb-axis-sq { fill: var(--axis); }
  .neb-origin { fill: var(--ink-faint); }
  .neb-note { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; }
  .neb-link { stroke: var(--ink-faint); stroke-width: 1; opacity: 0.22; }
  .neb-node { stroke: var(--paper); stroke-width: 1; }
  .neb-focus-ring { fill: none; stroke: var(--ink); stroke-width: 1; }
  .neb-focus-dash { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 3; }
  .axis-end text {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.08em;
    fill: var(--axis);
  }
  .axis-end:hover text { text-decoration: underline; text-underline-offset: 3px; }

  /* 坐标检视器 */
  .nebula-inspector {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border: var(--rule-w) solid var(--rule);
    background: var(--surface);
    padding: var(--space-4) var(--space-5);
  }
  .ni-title { font-size: var(--text-lg); font-weight: 700; line-height: 1.5; }
  .ni-title a { text-decoration: none; }
  .ni-title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .ni-coords {
    display: grid;
    gap: var(--space-2);
    border-block: var(--rule-w) solid var(--rule);
    padding-block: var(--space-3);
  }
  .ni-row { display: flex; align-items: center; gap: 0.6em; font-size: var(--text-xs); }
  .ni-row::before { content: ""; width: 0.55em; height: 0.55em; background: var(--axis); flex: none; }
  .ni-row .nm { font-family: var(--font-sans); color: var(--ink-soft); flex: none; }
  .ni-row .wbar { flex: 1; height: 3px; background: var(--rule); position: relative; }
  .ni-row .wbar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--axis); }
  .ni-row .val { font-family: var(--font-mono); color: var(--ink-faint); min-width: 2.4em; text-align: right; }
  .ni-dek { font-size: var(--text-sm); line-height: 1.7; color: var(--ink-soft); }
  .ni-more {
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
  }
  .ni-more:hover { text-decoration: underline; text-underline-offset: 0.2em; }

  .ni-views { border-top: var(--rule-w) solid var(--rule); padding-top: var(--space-3); display: grid; gap: var(--space-2); }
  .vw-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.15em; color: var(--ink-faint); }
  .vw-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .vw-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    border: var(--rule-w) solid var(--rule-strong);
    border-radius: var(--radius-1);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--ink-soft);
    text-decoration: none;
  }
  .vw-btn:hover { border-color: var(--ink); color: var(--ink); }
  .vw-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

  .nebula-hint {
    margin-top: var(--space-3);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }

  /* 降级态：窄屏 / 减弱动态 / 无 JS 时替代交互区（样机中置于 demo-frame 内常显） */
  .nebula-fallback { display: none; }
  .demo-frame .nebula-fallback { display: block; }
  @media (max-width: 47.99rem), (prefers-reduced-motion: reduce) {
    .nebula-live { display: none; }
    .nebula-fallback { display: block; }
  }
  .nf-chips { margin-block: var(--space-4) var(--space-5); }
}

/* ---- 账页条目的轴权重 ---- */
@layer components {
  .weights {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    white-space: nowrap;
  }
  .weights .w { display: inline-flex; align-items: center; gap: 0.4em; }
  .weights .w::before { content: ""; width: 0.55em; height: 0.55em; background: var(--axis); flex: none; }
  .weights .wbar { position: relative; width: 2rem; height: 3px; background: var(--rule); flex: none; }
  .weights .wbar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--axis); }
}

/* ---- 行路 · X 轴投影：世界地图与锚点 ---- */
@layer components {
  .explore-map {
    margin-top: var(--space-6);
    border: var(--rule-w) solid var(--rule);
    background: var(--surface);
    height: min(65vh, 36rem);
  }
  .explore-map svg { width: 100%; height: 100%; display: block; }
  .map-grat { stroke: var(--rule); stroke-width: 1; opacity: 0.6; }
  .map-land { fill: var(--paper-inset); stroke: var(--rule-strong); stroke-width: 1; }
  .map-arc { fill: none; stroke: var(--ax-x); stroke-width: 1; opacity: 0.45; }
  .map-arc.is-vision { stroke-dasharray: 4 4; opacity: 0.35; }
  .anchor { fill: var(--ax-x); }
  .anchor-vision { fill: none; stroke: var(--ax-x); stroke-width: 1; stroke-dasharray: 3 3; }
  .anchor-cross { stroke: var(--ax-x); stroke-width: 1; }
  .anchor-ring { fill: none; stroke: var(--ax-x); stroke-width: 1; }
  .anchor-halo {
    fill: none;
    stroke: var(--ax-x);
    stroke-width: 1;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: halo 3.6s ease-out infinite;
  }
  @keyframes halo {
    0% { transform: scale(0.35); opacity: 0.55; }
    100% { transform: scale(1); opacity: 0; }
  }
  .map-label { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 11px; }
  .map-coord { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 10px; }
  .map-note { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; }

  /* 锚点四维卡片 */
  .geo-card {
    margin-top: var(--space-5);
    border: var(--rule-w) solid var(--rule-strong);
    border-left: var(--space-1) solid var(--ax-x);
    background: var(--surface);
  }
  .gc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-5) 0;
  }
  .gc-name { font-size: var(--text-xl); font-weight: 700; }
  .gc-coord { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); }
  .gc-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--ink-soft);
  }
  .gc-state::before { content: ""; width: 0.55em; height: 0.55em; background: var(--ax-x); }
  .gc-grid { display: grid; grid-template-columns: 1fr; margin-top: var(--space-2); }
  .gc-dim { padding: var(--space-4) var(--space-5); border-top: var(--rule-w) solid var(--rule); }
  .gc-dim h3 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.25em;
    color: var(--ax-x);
    margin-bottom: var(--space-2);
  }
  .gc-dim li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: 0.9375rem;
  }
  .gc-dim li + li { margin-top: var(--space-2); }
  .gc-dim a { text-decoration: none; }
  .gc-dim a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
  .gc-dim time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); flex: none; }
  @media (min-width: 48rem) {
    .gc-grid { grid-template-columns: 1fr 1fr; }
    .gc-dim:nth-child(odd) { border-right: var(--rule-w) solid var(--rule); }
  }

  /* 地点索引：账页变体（首列为坐标） */
  @container (min-width: 42rem) {
    .ledger--loc .ledger-link { grid-template-columns: 10rem 6.25rem minmax(0, 1fr) auto; }
  }
}

/* ---- 格物 · Y 轴投影：两级力导向图 ---- */
@layer components {
  .kg-panels { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
  @media (min-width: 64rem) { .kg-panels { grid-template-columns: 1fr 1fr; } }
  .kg-panel { border: var(--rule-w) solid var(--rule); background: var(--surface); }
  .kg-panel svg { width: 100%; height: auto; display: block; }
  .kg-cap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    border-top: var(--rule-w) solid var(--rule);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .kg-hull { fill: var(--hc); fill-opacity: 0.1; stroke: var(--hc); stroke-opacity: 0.55; stroke-width: 1; }
  .kg-hull.recede { fill-opacity: 0.05; stroke-opacity: 0.25; }
  .kg-subhull { fill: var(--hc); fill-opacity: 0.12; stroke: var(--hc); stroke-opacity: 0.7; stroke-width: 1; }
  .kg-dot { fill: var(--ink-faint); opacity: 0.5; }
  .kg-node { fill: var(--ax-y); stroke: var(--surface); stroke-width: 1; }
  .kg-edge { stroke: var(--ink-faint); stroke-width: 1; opacity: 0.55; }
  .kg-arrow { fill: var(--ink-faint); }
  .kg-label { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 12px; text-anchor: middle; }
  .kg-count { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 10px; text-anchor: middle; }
  .kg-node-label { fill: var(--ink); font-family: var(--font-sans); font-size: 10.5px; }
  .kg-path-note { fill: var(--ax-y); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; }

  /* 簇索引：按簇分组的极简文字表 */
  .cluster-index { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
  @media (min-width: 48rem) { .cluster-index { grid-template-columns: 1fr 1fr; } }
  .ci-group h3 {
    display: flex;
    align-items: center;
    gap: 0.6em;
    border-top: var(--rule-w-strong) solid var(--ink);
    padding-top: var(--space-3);
    margin-bottom: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
  }
  .ci-group h3 .sq { width: 0.6em; height: 0.6em; background: var(--hc); flex: none; }
  .ci-group h3 .n { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--ink-faint); }
  .ci-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-bottom: var(--rule-w) solid var(--rule);
    font-size: 0.9375rem;
    text-decoration: none;
  }
  .ci-row:hover .ci-t { text-decoration: underline; text-underline-offset: 0.18em; }
  .ci-row .no { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); flex: none; }
  .ci-row time { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); flex: none; }
}

/* ---- 见心 · Z 轴投影：层剥卡片流 ---- */
@layer components {
  .peel-flow {
    display: grid;
    gap: var(--space-9);
    max-width: 60rem;
    margin: var(--space-7) auto 0;
  }
  .peel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .peel-quote {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.06em;
    border-bottom: var(--rule-w) solid var(--rule-strong);
    padding-bottom: var(--space-3);
  }
  .peel-quote small {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
  }
  @media (min-width: 48rem) {
    .peel { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); }
    .peel-quote {
      writing-mode: vertical-rl;
      max-height: 22rem;
      border-bottom: 0;
      border-right: var(--rule-w) solid var(--rule-strong);
      padding-bottom: 0;
      padding-right: var(--space-4);
    }
  }
  .peel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  /* 三层渐进：表相 → 析理 → 见性，逐层向内（缩进 + 线规 + 明度），不套卡片 */
  .peel-layer { border-top: var(--rule-w) solid var(--rule); padding-block: var(--space-4); }
  .pl-label {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.25em;
    color: var(--ink-faint);
  }
  .pl-label .pl-no { font-family: var(--font-mono); letter-spacing: 0; }
  .peel-layer[data-layer="surface"] .pl-text { color: var(--ink-soft); font-size: var(--text-md); line-height: 1.75; }
  .peel-layer[data-layer="reason"] { margin-left: var(--space-5); }
  .peel-layer[data-layer="reason"] .pl-text { font-size: var(--text-md); line-height: 1.75; }
  .peel-layer[data-layer="seeing"] { margin-left: calc(var(--space-5) * 2); border-top-color: var(--rule-strong); }
  .peel-layer[data-layer="seeing"] .pl-label { color: var(--ax-z); }
  .peel-seeing-text {
    border-left: var(--rule-w-strong) solid var(--ax-z);
    padding-left: var(--space-4);
    font-size: var(--text-xl);
    line-height: 1.6;
  }
  .peel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
  }
  .peel-foot a { font-family: var(--font-sans); font-size: var(--text-sm); text-decoration: none; }
  .peel-foot a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .peel-foot .pf-coord { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); }
}

/* ---- 文章页：工作台顶栏 / 三维坐标印章 / 局部星云 ---- */
@layer components {
  .post-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-4);
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .crumb-back {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-height: 2rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
  }
  .crumb-back::before { content: ""; width: 0.55em; height: 0.55em; background: var(--axis, var(--ink-faint)); flex: none; }
  .crumb-back:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .crumb-back .crumb-arrow { font-family: var(--font-mono); color: var(--ink-faint); }
  .crumb-back .crumb-text { font-size: var(--text-sm); color: var(--ink-soft); }

  .coord-stamp { display: flex; align-items: center; gap: var(--space-4); }
  .coord-stamp > svg { width: 2.5rem; height: auto; color: var(--ink-soft); flex: none; }
  .cs-bars { display: grid; gap: 3px; }
  .cs-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--ink-faint);
  }
  .cs-row .cs-k { width: 1em; color: var(--axis); font-weight: 700; }
  .cs-track { position: relative; width: 2.25rem; height: 3px; background: var(--rule); flex: none; }
  .cs-track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--axis); }
  .cs-row .cs-v { min-width: 2.2em; }

  .neighbors {
    border: var(--rule-w) solid var(--rule);
    background: var(--surface);
    padding: var(--space-4) var(--space-5);
  }
  .neighbors svg {
    width: 100%;
    height: auto;
    display: block;
    border: var(--rule-w) solid var(--rule);
    background: var(--paper);
    margin-bottom: var(--space-3);
  }
  .nb-cap {
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }
  .nb-list { display: grid; gap: var(--space-2); }
  /* 邻居徽记：轴字母（X/Y/Z），色由模板内联的 color: var(--axis) 决定 */
  .nb-badge {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--axis, var(--ink-faint));
  }
  .nb-center { fill: none; stroke: var(--ink); stroke-width: 1; }
  .nb-center-dot { fill: var(--ink); }
  .nb-list a {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.6;
    text-decoration: none;
  }
  .nb-list a::before {
    content: "";
    width: 0.5em; height: 0.5em;
    background: var(--axis, var(--ink-faint));
    flex: none;
    transform: translateY(0.05em);
  }
  .nb-list a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  @media (min-width: 64rem) {
    .neighbors {
      border: 0;
      background: none;
      padding: 0;
      border-top: var(--rule-w-strong) solid var(--ink);
      padding-top: var(--space-3);
    }
  }
}

/* =============================================================== pages */
@layer pages {
  .home-section { margin-top: var(--space-8); }
  .nebula-live { margin-top: var(--space-6); }
}

/* ============================================================ overrides */
@layer overrides {
  /* 增大触屏目标的点按面积 */
  @media (pointer: coarse) {
    .chip { min-height: 2.75rem; }
    .site-nav a { padding-block: var(--space-3); }
    .colophon-col a { min-height: 2.75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    /* 呼吸晕等纯装饰动画直接移除，不只是加速 */
    .anchor-halo { display: none; }
  }

  @media print {
    body { background: #fff; color: #000; }
    .masthead, .colophon, .toc, .post-nav, .skip-link, .theme-toggle,
    .neighbors, .post-bar, .nebula-live, .demo-frame { display: none; }
    .prose { max-width: none; }
  }
}

/* ==========================================================================
   === Eleventy integration ===
   以上 @layer 之上的集成补丁：样机没有覆盖的模板/短代码组件。
   刻意写在 @layer 之外（unlayered），以便覆盖同名的层内规则。
   ========================================================================== */

/* ---- [hidden] 必须压过组件的 display ---- */
[hidden] { display: none !important; }

/* ---- 图版编号：「图 N」由 CSS 计数器生成（body 起算，顺序即文档顺序） ---- */
body { counter-reset: fig; }
.figure { counter-increment: fig; }
.figure .fig-no::after { content: counter(fig); }
.post-cover { margin-top: var(--space-6); max-width: var(--measure); }

/* ---- 分子结构（RDKit SVG） ---- */
.molecule { max-width: 28rem; }
.molecule svg {
  max-width: 100%;
  height: auto;
  color: var(--ink); /* 描边继承墨色，暗色主题下不发黑 */
}
.molecule-label { font-weight: 600; }
.molecule .molecule-smiles { word-break: break-all; }
.molecule-smiles-block {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  background: var(--paper-inset);
  border: var(--rule-w) solid var(--rule);
  padding: var(--space-4) var(--space-5);
  word-break: break-all;
}

/* ---- 视频 facade：16:9，点击前不产生第三方请求，点击后不产生布局位移 ---- */
.video-figure { max-width: var(--measure); }
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--paper-inset);
  border: var(--rule-w) solid var(--rule);
  text-align: center;
  overflow: hidden;
}
.video-facade img.vf-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  background: none;
}
.video-facade button,
.video-facade .vf-open {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  background: var(--surface);
  border: var(--rule-w) solid var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
}
.video-facade button:hover,
.video-facade .vf-open:hover { background: var(--ink); color: var(--paper); }
.video-facade .vf-hint {
  position: relative;
  z-index: 1;
  max-width: 36ch;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--ink-faint);
}
.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.video-figure figcaption { margin-top: var(--space-3); }

/* ---- KaTeX（字体与布局来自本地 node_modules/katex/dist/katex.min.css） ---- */
.katex-block { margin-bottom: 0; }
.katex-display {
  margin: 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--space-2);
  -webkit-overflow-scrolling: touch;
}
.katex { font-size: inherit; }
@media (max-width: 40rem) {
  .katex-display { font-size: 0.9em; }
}
.katex-error, p.katex-error { color: #b3261e; }

/* ---- Pagefind 自定义结果（结构同 design/search.html 的 .result） ---- */
.results { display: block; }
.result-excerpt {
  margin-top: var(--space-2);
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.result-snippet mark,
.result-excerpt mark {
  background: none;
  color: var(--c-orgchem);
  padding: 0;
  border-bottom: 2px solid var(--c-orgchem);
}
.search-shell noscript { margin-top: var(--space-5); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-soft); }

/* ---- 脚注（markdown-it-footnote 的真实输出：hr + section + ol + li + a） ---- */
.footnotes-sep {
  border: 0;
  border-top: var(--rule-w) solid var(--rule);
  margin-top: var(--space-7);
}
.footnotes { margin-top: var(--space-4); border-top: 0; padding-top: 0; }
.footnotes-list { list-style: decimal; padding-left: 1.5em; }
.footnotes-list li::marker,
.footnote-item::marker {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--cat, var(--ink-faint));
}
.footnote-item + .footnote-item { margin-top: var(--space-2); }
.footnote-item:target,
.footnotes li:target { background: var(--paper-inset); }
.fn-back,
.footnote-backref {
  font-family: var(--font-mono);
  text-decoration: none;
  margin-left: 0.5em;
}
.fn-back:hover,
.footnote-backref:hover { text-decoration: underline; }

/* ---- 参考文献 ---- */
.refs ol li { list-style: none; }

/* ---- 标签签 / 相关 / 上下篇 / 分页 / 空状态 ---- */
.chip[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chip[aria-current="true"] .chip-n { color: var(--paper); opacity: 0.7; }
.empty a { text-decoration: underline; text-underline-offset: 0.18em; }
.section-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--rule-w) solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.section-foot a { min-height: 2.75rem; display: inline-flex; align-items: center; }

/* ---- 页脚「层内索引」：按轴分组的分区小标题（data-axis 提供轴色语境） ---- */
.axis-group {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--axis, var(--ink-faint));
}
.axis-group:first-of-type { margin-top: 0; }

/* ---- 通用页面头 ---- */
.page-lede {
  margin-top: var(--space-3);
  max-width: 56ch;
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ---- 分区页：题签与计数（模板侧类名 .cat-title / .cat-kicker） ---- */
.cat-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}
/* .cat-title：模板给 <h1> 同时输出 .cat-name 与 .cat-title，样式由 .cat-name 提供 */

/* ---- 分区页：该分区的最新一篇为空时的占位说明 ---- */
.domain-latest li.domain-empty {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

/* ---- 提示块的自定义标题（:::note 自定义标题 / callout 短代码的第三个参数） ---- */
.callout-title {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.6;
}

/* ---- 免责声明里的利益披露 ---- */
.disclaimer .disclosure {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--ink-faint);
}

/* ---- 代码块复制按钮（main.js 注入） ---- */
.prose pre { position: relative; }
.code-copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  min-height: 2rem;
  padding: 0.1em 0.6em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--surface);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-1);
}
.code-copy:hover { color: var(--ink); border-color: var(--ink); }
@media (pointer: coarse) { .code-copy { min-height: 2.75rem; } }

/* ---- 代码高亮（eleventy-plugin-syntaxhighlight 的 token 类） ---- */
.prose .token.comment,
.prose .token.prolog,
.prose .token.doctype,
.prose .token.cdata { color: var(--ink-faint); font-style: italic; }
.prose .token.punctuation { color: var(--ink-soft); }
.prose .token.keyword,
.prose .token.tag,
.prose .token.boolean,
.prose .token.number,
.prose .token.constant,
.prose .token.symbol { color: var(--c-politics); }
.prose .token.string,
.prose .token.char,
.prose .token.attr-value { color: var(--c-finance); }
.prose .token.function { color: var(--c-compchem); }
.prose .token.selector,
.prose .token.atrule,
.prose .token.at-rule { color: var(--c-orgchem); }
.prose .token.operator,
.prose .token.entity,
.prose .token.url { color: var(--ink-soft); }
.prose .token.attr-name,
.prose .token.property { color: var(--c-travel); }
.prose .token.class-name { color: var(--c-philosophy); }
.prose .token.variable { color: var(--ink); }

/* ---- 目录 scrollspy（main.js 给 <li> 加 .is-active） ---- */
.toc li.is-active > a { color: var(--cat, var(--ink)); font-weight: 600; }

/* ---- 上下篇：左旧右新；只出现一侧时也留在自己的列 ---- */
@media (min-width: 48rem) {
  .post-nav .pn-prev { grid-column: 1; }
  .post-nav .pn-next { grid-column: 2; }
}

/* ---- 账页行里的成熟度签（分区页 = 类型 + 成熟度） ---- */
.ledger-status {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---- 分区刊头的母题线更细（与 design/category.html 一致） ---- */
.cat-motif svg { stroke-width: 1; }

/* ---- 防止短词在中文段落中被拆行 ---- */
.nowrap { white-space: nowrap; }
.cat-stats time { white-space: nowrap; }