/*
 * Quiet Index — 档案索引 × MX-Ready
 * 深壳暖纸 / 单一赤陶强调色 / 无影三面深度（blur · opacity · scale · color-mix）
 * 硬性禁止：玻璃拟态 · 霓虹 · 赛博 · 渐变光晕 · 大圆角 · 彩色投影 · box-shadow · 噪点 · 故障艺术
 * 层序：tokens → reset → base → type → layout → motion（基础层必须在组件层之前）
 */

@layer qi.tokens, qi.reset, qi.base, qi.type, qi.layout, qi.motion;

/* ============================================================
   qi.tokens — 设计令牌（阶段一）
   ============================================================ */
@layer qi.tokens {
  :root {
    /* 每个令牌先写规范给定值作旧浏览器回退，再以 light-dark() 覆盖 */
    --shell: oklch(22% 0.012 60);
    --shell: light-dark(oklch(22% 0.012 60), oklch(12.5% 0.01 60));
    --paper: oklch(94% 0.008 75);
    --paper: light-dark(oklch(94% 0.008 75), oklch(23% 0.01 60));
    --ink: oklch(28% 0.015 60);
    --ink: light-dark(oklch(28% 0.015 60), oklch(91% 0.012 75));
    --muted: oklch(52% 0.012 60);
    --muted: light-dark(oklch(52% 0.012 60), oklch(68% 0.01 60));
    --rule: oklch(82% 0.01 70);
    --rule: light-dark(oklch(82% 0.01 70), oklch(40% 0.012 60));
    /* 全站唯一强调色：三轴由页头内联样式注入（--qi-hue-base 等），
       暗色仅提亮 32% 明度，绝不另设第二个强调色。
       教训（暗色轨道特异性）：任何暗色规则不得覆盖 --accent 本体，只许覆盖派生令牌。 */
    --accent: oklch(42% 0.09 30);
    --accent: light-dark(
      oklch(var(--qi-light-base, 42%) var(--qi-chroma-base, 0.09) var(--qi-hue-base, 30deg)),
      oklch(calc(var(--qi-light-base, 42%) + 32%) var(--qi-chroma-base, 0.09) var(--qi-hue-base, 30deg))
    );
    /* 深壳反白系 */
    --shell-fg: oklch(90% 0.008 75);
    --shell-fg: light-dark(oklch(90% 0.008 75), oklch(88% 0.008 75));
    /* 无影深度派生：远一档 / 远二档 / 发丝轨（只允许 color-mix · opacity · blur · scale）
       深色侧单独调高配比，弥补浅字深底的抗锯齿观感 */
    --ink-far: light-dark(
      color-mix(in oklch, var(--ink) 62%, var(--paper)),
      color-mix(in oklch, var(--ink) 72%, var(--paper))
    );
    --ink-soft: light-dark(
      color-mix(in oklch, var(--ink) 74%, var(--paper)),
      color-mix(in oklch, var(--ink) 80%, var(--paper))
    );
    --ink-further: light-dark(
      color-mix(in oklch, var(--ink) 38%, var(--paper)),
      color-mix(in oklch, var(--ink) 52%, var(--paper))
    );
    --rule-soft: light-dark(
      color-mix(in oklch, var(--rule) 55%, var(--paper)),
      color-mix(in oklch, var(--rule) 66%, var(--paper))
    );
    --shell-muted: color-mix(in oklch, var(--shell-fg) 60%, var(--shell));
    --shell-rule: color-mix(in oklch, var(--shell-fg) 24%, var(--shell));
    --accent-frame: color-mix(in oklch, var(--accent) 68%, var(--shell));
    /* 活的色彩：色相随滚动漂移后的强调色（仅用于进度线等少数点位，控制重绘面） */
    --qi-accent-live: light-dark(
      oklch(
        var(--qi-light-base, 42%)
        var(--qi-chroma-base, 0.09)
        calc(var(--qi-hue-base, 30deg) + var(--qi-hue-drift, 0deg))
      ),
      oklch(
        calc(var(--qi-light-base, 42%) + 32%)
        var(--qi-chroma-base, 0.09)
        calc(var(--qi-hue-base, 30deg) + var(--qi-hue-drift, 0deg))
      )
    );
    /* 展示层：标题/年份/首字下沉——宋体的笔形只在较大字号立得住 */
    --qi-display: "Source Serif 4", "Source Serif Pro", Georgia, "Songti SC", "Noto Serif SC", SimSun, serif;
    /* 正文层：西文衬线 × 中文黑体——小字号正文交给清晰的黑体渲染 */
    --qi-body: "Source Serif 4", Georgia, "Times New Roman", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
    --qi-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Microsoft YaHei", monospace;
  }
}

/* ============================================================
   qi.reset — 复位（阶段一）
   ============================================================ */
@layer qi.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid var(--rule);
  }
  html {
    -webkit-text-size-adjust: 100%;
    /* 滚动条出现/消失不再引起视口宽度抖动 */
    scrollbar-gutter: stable;
  }
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  img,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
  }
  ul[class],
  ol[class] {
    list-style: none;
  }
  /* 结构性列表去标记（flex 容器不抑制 li 标记，必须显式清除）；
     正文 li 保留项目符号 */
  nav ul,
  nav ol,
  .qi-crumbs ol,
  #qi-toc ol,
  .qi-pager ol {
    list-style: none;
  }
  a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
    text-underline-offset: 0.18em;
  }
  a:hover {
    text-decoration-color: var(--accent);
  }
  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
    background: none;
  }
  [hidden] {
    display: none !important;
  }
}

/* ============================================================
   qi.base — 底座：深壳 × 纸面 × 焦点（阶段一）
   ============================================================ */
@layer qi.base {
  body {
    background: var(--shell);
    color: var(--ink);
    font-family: var(--qi-body);
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 400;
    /* 全站阅读列宽：定值 rem 与字体无关（≈正文 66ch），
       不支持 @property 的旧浏览器也不会退化成逐元素 ch 重算 */
    --qi-col: 40.5rem;
  }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .qi-head :focus-visible,
  .qi-foot :focus-visible {
    outline-color: var(--accent-frame);
  }
  ::selection {
    background: var(--accent);
    color: var(--paper);
  }
  /* 跳转链接：悬浮于视口外（position: fixed 仅用于浮层型界面件，不参与内容排序） */
  .qi-skip {
    position: fixed;
    inset-block-start: -100vh;
    inset-inline-start: 1rem;
    z-index: 100;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--accent);
    padding: 0.5rem 1rem;
    font-family: var(--qi-mono);
    font-size: 0.8125rem;
    text-decoration: none;
  }
  .qi-skip:focus-visible {
    inset-block-start: 0.5rem;
  }
  /* 交互件的轻过渡：只动颜色与描边，不动布局 */
  .qi-nav a,
  .qi-search input,
  .qi-search button,
  .qi-submit,
  .qi-toc-btn,
  .qi-pager a,
  .qi-postnav-cell a,
  .qi-reply-cancel {
    transition: color 0.15s ease, border-color 0.15s ease, text-decoration-color 0.15s ease;
  }
}

/* ============================================================
   qi.type — 光学排版（阶段二）
   ============================================================ */
@layer qi.type {
  /* 悬挂标点：Safari 生效；其余浏览器回落到“负 margin 悬出 + text-indent 归位” */
  body {
    hanging-punctuation: first last;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1.2;
    font-weight: 600;
    text-wrap: balance;
  }
  /* 展示层统一走衬线栈（大字号下宋体笔形才立得住） */
  h1,
  h2,
  h3,
  h4,
  .qi-masthead,
  .qi-year,
  .qi-lead-text,
  .qi-article-title,
  .qi-item-title {
    font-family: var(--qi-display);
  }
  p,
  li,
  dd,
  figcaption {
    text-wrap: pretty;
  }
  /* 标题字距随字号反向收紧 */
  h1,
  .qi-masthead {
    letter-spacing: -0.02em;
  }
  h2 {
    letter-spacing: -0.015em;
  }
  h3 {
    letter-spacing: -0.01em;
  }
  /* 悬挂负缘：负 margin 悬出左缘，text-indent 把正文归位
     （只用于不会折行的短行——长标题折行后第二行会被负缘带偏） */
  .qi-masthead,
  .qi-year,
  .qi-h1,
  .qi-lead-text {
    margin-inline-start: -0.45em;
    text-indent: 0.45em;
  }
  .qi-body p {
    max-inline-size: var(--qi-col);
    margin-block: 0.95em;
    /* CJK 书卷两端对齐：西文 url 行由浏览器断行策略兜底 */
    text-align: justify;
  }
  .qi-body li {
    margin-block: 0.35em;
  }
  /* 元数据与索引：等宽字族 */
  .qi-item-meta,
  .qi-article-meta,
  .qi-crumbs,
  .qi-year,
  .qi-pager,
  .qi-foot-line,
  .qi-search,
  .qi-toc-btn,
  .qi-lead-meta,
  .qi-archive-meta,
  .qi-field label,
  .qi-article-foot,
  .qi-comment-head,
  .qi-comment-note {
    font-family: var(--qi-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
  }
  address {
    font-style: normal;
  }
  /* 元数据 = 远一档（color-mix 大气透视） */
  .qi-item-meta,
  .qi-article-meta,
  .qi-crumbs,
  .qi-archive-meta,
  .qi-lead-meta,
  .qi-article-foot,
  .qi-comment-head {
    color: var(--ink-far);
  }
}

/* ============================================================
   qi.layout — 布局与组件（阶段四 A）
   ============================================================ */
@layer qi.layout {
  /* 深壳页头 */
  .qi-head {
    max-inline-size: 78rem;
    margin-inline: auto;
    padding: clamp(1.25rem, 3vh, 2rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.25rem, 2.5vh, 1.75rem);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 2.25rem;
    color: var(--shell-fg);
    border-block-end: 1px solid var(--shell-rule);
  }
  .qi-masthead {
    font-size: 1.5rem;
    /* CJK 方块字标用正字距，才有雕版铭文感（负字距只适用于西文大标题） */
    letter-spacing: 0.06em;
    /* 首页是 h1、其他页是 p：显式行高与字重让页头高度/观感全站恒定 */
    line-height: 1.2;
    font-weight: 600;
  }
  .qi-masthead a {
    text-decoration: none;
  }
  .qi-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.35rem;
  }
  .qi-nav a {
    color: var(--shell-muted);
    text-decoration: none;
    padding-block: 0.15rem;
    border-block-end: 1px solid transparent;
  }
  .qi-nav a:hover {
    color: var(--shell-fg);
  }
  .qi-nav a[aria-current="page"] {
    color: var(--shell-fg);
    border-block-end-color: var(--accent-frame);
  }
  /* 页头控件组：检索 + 深浅色，桌面靠右成组 */
  .qi-head-controls {
    margin-inline-start: auto;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
  }
  .qi-search {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
  }
  .qi-search label {
    color: var(--shell-muted);
    font-size: 0.75rem;
  }
  .qi-search input {
    inline-size: 11rem;
    padding: 0.2rem 0.35rem;
    color: var(--shell-fg);
    border-block-end: 1px solid var(--shell-rule);
    font-size: 0.8125rem;
  }
  .qi-search input::placeholder {
    color: var(--shell-muted);
  }
  .qi-search button {
    color: var(--shell-muted);
    font-family: var(--qi-mono);
    font-size: 0.8125rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--shell-rule);
  }
  .qi-search button:hover {
    color: var(--shell-fg);
    border-color: var(--accent-frame);
  }
  .qi-theme-toggle {
    color: var(--shell-muted);
    border: 1px solid var(--shell-rule);
    padding: 0.2rem 0.5rem;
    font-family: var(--qi-mono);
    font-size: 0.8125rem;
  }
  .qi-theme-toggle:hover,
  .qi-theme-toggle[aria-pressed="true"] {
    color: var(--shell-fg);
    border-color: var(--accent-frame);
  }

  /* 纸面主区（容器查询宿主） */
  .qi-main {
    background: var(--paper);
    inline-size: min(78rem, 100%);
    min-block-size: 60vh;
    margin-inline: auto;
    padding-block: clamp(2rem, 6vh, 4rem) clamp(3rem, 8vh, 5rem);
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    border-block-start: 1px solid var(--shell-rule);
    border-block-end: 1px solid var(--shell-rule);
    container-type: inline-size;
    container-name: qi-page;
    overflow-wrap: break-word;
  }

  /* 首页引言 */
  .qi-lead {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
    margin-block-end: clamp(2rem, 5vh, 3.5rem);
  }
  .qi-lead-text {
    font-size: 1.125rem;
    color: var(--ink-far);
  }
  .qi-lead-meta {
    margin-block-start: 0.6rem;
    color: var(--ink-further);
  }

  /* 会呼吸的索引网格：Subgrid 让条目的标题/元数据/摘要跨条目同轨对齐 */
  .qi-list {
    display: grid;
    grid-template-columns: [qi-thumb] minmax(8rem, 15rem) [qi-body] minmax(0, 66ch);
    justify-content: center;
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
    row-gap: calc(var(--qi-gap-base, clamp(1.4rem, 4vh, 2.4rem)) * var(--qi-gap-k, 1));
    scroll-margin-block-start: 3rem;
  }
  /* 全站条目均无封面时收掉缩略图轨，正文列回到中轴（:has() 的真实用途之一）；
     子元素的命名线定位（qi-body）一并复位为 auto，防止命名线缺失后的隐式轨错位。
     仅宽屏生效：窄屏交给 759px 断点的单轨规则（其特异性更低，必须隔离） */
  @media (min-width: 760px) {
    .qi-list:not(:has(.qi-thumb)) {
      grid-template-columns: minmax(0, 66ch);
    }
    .qi-list:not(:has(.qi-thumb)) .qi-item > :is(.qi-item-head, .qi-item-title, .qi-item-meta, .qi-item-excerpt) {
      grid-column: auto;
    }
  }
  .qi-year {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    color: var(--ink-further);
    font-weight: 400;
    font-size: 1rem;
    margin-block-start: clamp(1rem, 3vh, 2rem);
  }
  /* 年份发丝轨：远二档（blur 0.35px + scale 微缩） */
  .qi-year::after {
    content: "";
    inline-size: 100%;
    block-size: 1px;
    background: var(--rule-soft);
    filter: blur(0.35px);
    scale: 0.995;
  }
  /* 条目：subgrid 继承父轨道；显式轨道定位仅把首元素放进首轨，不构成顺序错位 */
  .qi-item {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto auto auto;
    align-items: start;
    content-visibility: auto;
    contain-intrinsic-size: auto 13rem;
  }
  .qi-thumb {
    grid-column: qi-thumb / qi-body;
    grid-row: 1 / 4;
  }
  .qi-thumb img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.02);
    opacity: 0.96;
  }
  .qi-item-head {
    grid-column: qi-body;
  }
  .qi-item-title {
    grid-column: qi-body;
    /* 窄屏自适应：16 字 + 英文混排标题在 375–414px 视口仍单行 */
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
    margin-block-start: 0.2rem;
  }
  .qi-item-title a {
    text-decoration: none;
  }
  .qi-item-title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
  }
  .qi-item-meta {
    grid-column: qi-body;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-block-start: 0.45rem;
  }
  .qi-item-excerpt {
    grid-column: qi-body;
    color: var(--ink-soft);
    margin-block-start: 0.5rem;
  }
  .qi-empty {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
    color: var(--ink-far);
  }

  /* 归档头 */
  .qi-archive-head {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
    margin-block-end: clamp(1.5rem, 4vh, 2.5rem);
  }
  .qi-h1 {
    font-size: 1.6rem;
  }
  .qi-archive-meta {
    margin-block-start: 0.5rem;
    color: var(--ink-further);
  }

  /* 面包屑 */
  .qi-crumbs {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
    margin-block-end: clamp(1.25rem, 3vh, 2rem);
  }
  .qi-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
  }
  .qi-crumbs li:not(:first-child)::before {
    content: "→";
    color: var(--ink-further);
    margin-inline-end: 0.55rem;
  }
  .qi-crumbs a {
    text-decoration: none;
  }
  .qi-crumbs [aria-current="page"] {
    color: var(--ink);
  }

  /* 文章 */
  .qi-article-head {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
  }
  .qi-article-title {
    /* 随视口线性缩放：16 字 + 英文混排标题在 375–1440px 全程单行（桌面封顶 2rem） */
    font-size: clamp(1.0625rem, 4.6vw, 2rem);
  }
  .qi-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-block-start: 0.75rem;
    color: var(--ink-soft);
  }
  .qi-hero {
    max-inline-size: min(72rem, 100%);
    margin: clamp(1.5rem, 4vh, 2.5rem) auto;
  }
  .qi-hero img {
    inline-size: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
  }
  .qi-body {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
  }
  .qi-body :is(h2, h3, h4) {
    margin-block: 1.6em 0.6em;
    scroll-margin-block-start: 3rem;
  }
  .qi-body h2 {
    font-size: 1.375em;
  }
  .qi-body h3 {
    font-size: 1.125em;
  }
  .qi-body blockquote {
    margin-block: 1.2em;
    padding-inline-start: 1.25ch;
    border-inline-start: 2px solid var(--accent);
    color: var(--ink-far);
  }
  .qi-body pre {
    font-family: var(--qi-mono);
    font-size: 0.875rem;
    border: 1px solid var(--rule-soft);
    padding: 1rem 1.25rem;
    overflow-inline: auto;
  }
  .qi-body code {
    font-family: var(--qi-mono);
    font-size: 0.92em;
  }
  .qi-body pre code {
    border: 0;
    padding: 0;
  }
  .qi-body :not(pre) > code {
    border: 1px solid var(--rule-soft);
    padding: 0.05em 0.35em;
  }
  .qi-body img {
    margin-block: 1.2em;
    border: 1px solid var(--rule-soft);
  }
  .qi-body hr {
    margin-block: 1.5em;
    border-block-start: 1px solid var(--rule-soft);
  }
  .qi-body li::marker {
    color: var(--accent);
  }
  .qi-body table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block: 1.4em;
    font-size: 0.9375rem;
  }
  .qi-body :is(th, td) {
    border: 1px solid var(--rule-soft);
    padding: 0.45rem 0.7rem;
    text-align: start;
  }
  .qi-article-foot {
    max-inline-size: var(--qi-col);
    margin: clamp(2rem, 5vh, 3rem) auto 0;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--rule-soft);
    color: var(--ink-further);
    display: grid;
    gap: 0.35rem;
  }
  .qi-article-foot a {
    overflow-wrap: anywhere;
  }

  /* 相邻文章导航：缝隙法行式（1px 缝 = rule 色），标题独占一整行不被挤压 */
  .qi-postnav {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
    margin-block-start: clamp(1.5rem, 4vh, 2.5rem);
    display: grid;
    gap: 1px;
    background: var(--rule-soft);
    border: 1px solid var(--rule-soft);
  }
  .qi-postnav-cell {
    background: var(--paper);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    font-family: var(--qi-mono);
    font-size: 0.8125rem;
    color: var(--ink-far);
  }
  .qi-postnav-cell b {
    color: var(--ink-far);
    font-weight: 400;
  }
  .qi-postnav-cell a {
    color: var(--ink);
    text-decoration: none;
    font-family: var(--qi-display);
    font-size: 1rem;
    line-height: 1.45;
  }
  .qi-postnav-cell a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
  }
  .qi-postnav-next {
    align-items: flex-end;
    text-align: end;
  }

  /* 目录浮层：Popover + Anchor Positioning（锚定触发按钮，翻转回退） */
  .qi-toc-wrap {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
    margin-block: 0.5rem 1rem;
  }
  .qi-toc-btn {
    anchor-name: --qi-toc;
    border: 1px solid var(--rule);
    padding: 0.3rem 0.75rem;
    color: var(--ink-far);
  }
  .qi-toc-btn:hover {
    color: var(--ink);
    border-color: var(--accent);
  }
  #qi-toc {
    position: fixed;
    inset: auto;
    inline-size: min(21rem, 90vw);
    max-block-size: min(62vh, 30rem);
    overflow: auto;
    margin: 0.5rem;
    padding: 1.1rem 1.3rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    font-size: 0.9375rem;
  }
  #qi-toc:popover-open {
    position-anchor: --qi-toc;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline;
  }
  #qi-toc ol {
    display: grid;
    gap: 0.4rem;
  }
  #qi-toc a {
    text-decoration: none;
  }
  #qi-toc a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
  }
  .qi-toc-l3 {
    padding-inline-start: 1.4ch;
  }

  /* 分页 */
  .qi-pager {
    max-inline-size: var(--qi-col);
    margin: clamp(2rem, 5vh, 3rem) auto 0;
  }
  .qi-pager ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
  }
  .qi-pager a,
  .qi-pager span {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--rule-soft);
    text-decoration: none;
    color: var(--ink-far);
  }
  .qi-pager li.current a {
    color: var(--accent);
    border-color: var(--accent);
  }

  /* 评论 */
  .qi-comments {
    max-inline-size: var(--qi-col);
    margin: clamp(2.5rem, 7vh, 4rem) auto 0;
    border-block-start: 1px solid var(--rule-soft);
    padding-block-start: clamp(1.5rem, 4vh, 2.5rem);
  }
  .qi-comments h2,
  .qi-respond h2 {
    font-size: 1.125rem;
  }
  .qi-comment-list {
    display: grid;
    gap: clamp(1.25rem, 3vh, 2rem);
    margin-block-start: 1.5rem;
  }
  .qi-comment-list .qi-comment-list {
    border-inline-start: 1px solid var(--rule-soft);
    padding-inline-start: 1.25rem;
    margin-block-start: 1rem;
  }
  .qi-comment-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    align-items: baseline;
    color: var(--ink-far);
  }
  .qi-avatar {
    inline-size: 24px;
    block-size: 24px;
    border: 1px solid var(--rule-soft);
    align-self: center;
  }
  .qi-comment-author {
    font-weight: 600;
    color: var(--ink);
  }
  .qi-comment-anchor {
    text-decoration: none;
    color: var(--ink-further);
  }
  .qi-comment-body {
    margin-block-start: 0.5rem;
    font-size: 0.9375rem;
  }
  .qi-comment-note {
    color: var(--ink-far);
    margin-block-start: 0.5rem;
  }
  .qi-comment-reply {
    margin-block-start: 0.4rem;
    font-size: 0.8125rem;
  }
  .qi-comment-reply a {
    color: var(--ink-far);
  }
  /* 评论分页：复用文章分页样式，间距按评论区收紧；无分页时整个 nav 不占位 */
  .qi-comments .qi-pager {
    margin-block-start: 1.5rem;
  }
  .qi-comments .qi-pager:empty {
    display: none;
  }
  /* 显式状态：作者身份与待审核都有 DOM 类 + 文本提示，不只靠视觉 */
  .qi-comment-owner > article .qi-comment-author::after {
    content: "· 作者";
    color: var(--accent);
    font-family: var(--qi-mono);
    font-size: 0.75rem;
    margin-inline-start: 0.4rem;
  }
  .qi-comment-waiting > article {
    border-inline-start: 2px solid var(--rule-soft);
    padding-inline-start: 1rem;
  }
  .qi-respond {
    margin-block-start: clamp(2rem, 5vh, 3rem);
    scroll-margin-block-start: 2rem;
  }
  /* 零跳转回复的显式状态条（无 JS 时恒隐藏） */
  .qi-replying {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    margin-block-start: 0.9rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--rule-soft);
    border-inline-start: 2px solid var(--accent);
    font-family: var(--qi-mono);
    font-size: 0.8125rem;
    color: var(--ink-far);
  }
  .qi-replying-author {
    color: var(--ink);
    font-weight: 600;
  }
  .qi-reply-cancel {
    color: var(--accent);
    padding: 0;
    border-block-end: 1px solid transparent;
  }
  .qi-reply-cancel:hover {
    border-block-end-color: var(--accent);
  }
  .qi-respond-identity {
    font-size: 0.875rem;
    color: var(--ink-far);
    margin-block: 0.5rem 1rem;
  }
  .qi-form {
    display: grid;
    gap: 1.15rem;
    margin-block-start: 1.25rem;
  }
  .qi-field {
    display: grid;
    gap: 0.35rem;
  }
  .qi-field label {
    color: var(--ink-far);
  }
  .qi-field :is(input, textarea) {
    border: 1px solid var(--rule);
    padding: 0.55rem 0.75rem;
    inline-size: 100%;
    background: var(--paper);
  }
  .qi-field textarea {
    resize: block;
  }
  .qi-field :is(input, textarea):user-invalid,
  .qi-field[data-invalid] :is(input, textarea) {
    border-color: var(--accent);
  }
  .qi-field-error {
    color: var(--ink);
    font-family: var(--qi-mono);
    font-size: 0.75rem;
  }
  .qi-submit {
    justify-self: start;
    border: 1px solid var(--ink);
    padding: 0.5rem 1.4rem;
    color: var(--ink);
  }
  .qi-submit:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .qi-closed {
    color: var(--ink-far);
    margin-block-start: 1rem;
  }

  /* 页脚（回到深壳） */
  .qi-foot {
    max-inline-size: 78rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 5vh, 3rem);
    display: grid;
    gap: 0.4rem;
    color: var(--shell-muted);
  }
  .qi-foot a {
    color: var(--shell-fg);
    text-decoration: none;
  }
  .qi-foot a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent-frame);
  }
  /* 页脚页面导航：手机端专用（桌面由页头导航承担），自适应网格容纳任意页数 */
  .qi-foot-nav {
    display: none;
  }

  /* 友链页全条目：缝隙法卡片网格 */
  .qi-friends {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
    margin-block-start: clamp(2rem, 5vh, 3rem);
  }
  .qi-friends-title {
    font-size: 1.125rem;
  }
  .qi-friends-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1px;
    background: var(--rule-soft);
    border: 1px solid var(--rule-soft);
    margin-block-start: 1.25rem;
  }
  .qi-friend {
    background: var(--paper);
    padding: 0.7rem 0.9rem;
    display: grid;
    gap: 0.25rem;
    align-content: start;
  }
  .qi-friend-url {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
  }
  .qi-friend-url:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
  }
  .qi-friend-desc {
    font-size: 0.8125rem;
    color: var(--ink-far);
  }

  /* 404 */
  .qi-404 {
    max-inline-size: var(--qi-col);
    margin-inline: auto;
    display: grid;
    gap: 1rem;
  }
  .qi-404-actions {
    margin-block-start: 0.5rem;
  }

  /* 回到顶部：锚点 + smooth 滚动（零 JS），显隐由滚动驱动动画控制 */
  .qi-top {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 80;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    text-decoration: none;
    font-family: var(--qi-mono);
    font-size: 1.125rem;
    /* 默认常显：不支持滚动驱动动画的浏览器（Firefox 旧版）也能用 */
    opacity: 1;
    pointer-events: auto;
  }
  /* 支持滚动驱动时：顶部隐藏，滚动后淡入 */
  @supports (animation-timeline: scroll()) {
    .qi-top {
      opacity: 0;
      pointer-events: none;
      animation: qi-top-in linear both;
      animation-timeline: scroll(root block);
    }
  }
  .qi-top:hover,
  .qi-top:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
  }
  @keyframes qi-top-in {
    0% {
      opacity: 0;
      pointer-events: none;
    }
    2% {
      opacity: 1;
      pointer-events: auto;
    }
    100% {
      opacity: 1;
      pointer-events: auto;
    }
  }

  /* 断点 760px：单轨折叠（subgrid 母轨收窄，显式跨轨撤回 auto） */
  @media (max-width: 759px) {
    /* 手机端隐藏首页引言（签名 + 篇数），页头下直接进正文 */
    .qi-lead {
      display: none;
    }
    /* 顶部空隙收紧：页头之后立刻进入内容 */
    .qi-main {
      padding-block-start: 1rem;
    }
    .qi-year {
      margin-block-start: 0.75rem;
    }
    .qi-article-foot {
      /* 手机端脚注登记行（标签/永久链接/归档号）字号降一档 */
      font-size: 0.75rem;
    }
    .qi-list {
      grid-template-columns: minmax(0, 1fr);
      column-gap: 0;
    }
    .qi-item {
      grid-template-rows: auto auto auto auto;
    }
    .qi-thumb {
      grid-column: auto;
      grid-row: auto;
      margin-block-end: 0.6rem;
    }
    .qi-item-head,
    .qi-item-title,
    .qi-item-meta,
    .qi-item-excerpt {
      grid-column: auto;
    }
    /* 页头导航收纳至页脚页面导航 */
    .qi-nav {
      display: none;
    }
    .qi-foot-nav {
      display: block;
      margin-block-start: 0.9rem;
    }
    .qi-foot-nav ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem 1.5rem;
    }
    .qi-foot-nav a {
      color: var(--shell-fg);
      text-decoration: none;
    }
    .qi-foot-nav a:hover {
      text-decoration: underline;
      text-decoration-color: var(--accent-frame);
    }
    .qi-foot-nav [aria-current="page"] {
      color: var(--accent-frame);
    }
    .qi-head-controls {
      margin-inline-start: 0;
      inline-size: 100%;
    }
    .qi-search {
      flex: 1;
    }
    .qi-search label {
      display: none;
    }
    .qi-search input {
      flex: 1;
      inline-size: auto;
    }
  }
  @container qi-page (min-inline-size: 48rem) {
    .qi-item-title {
      font-size: 1.4375rem;
    }
  }
}

/* ============================================================
   qi.motion — 空间与运动（阶段四 B）
   ============================================================ */
@layer qi.motion {
  @property --qi-gap-k {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }
  @property --qi-hue-drift {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }

  /* 活的色彩：色相随滚动在 OKLCH 空间连续漂移 3.5°（优雅不刺眼） */
  :root {
    animation: qi-hue linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes qi-hue {
    from {
      --qi-hue-drift: 0deg;
    }
    to {
      --qi-hue-drift: -3.5deg;
    }
  }

  /* 会呼吸的网格：行距随滚动收放 7.6%（≤8%） */
  .qi-list {
    animation: qi-breathe linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes qi-breathe {
    from {
      --qi-gap-k: 1;
    }
    to {
      --qi-gap-k: 0.96;
    }
  }

  /* 阅读进度：顶部发丝线（position: fixed 为浮层界面件，不参与内容排序） */
  .qi-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    z-index: 90;
    pointer-events: none;
    background: var(--qi-accent-live);
    transform-origin: 0 50%;
    scale: 0 1;
    animation: qi-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes qi-progress {
    from {
      scale: 0 1;
    }
    to {
      scale: 1 1;
    }
  }

  /* View Transitions：列表缩略图/标题 ↔ 文章大图/标题 形状连续变形
     （组时长 0.48s > 新旧快照 0.18s，形变主导而非淡入淡出） */
  .qi-thumb,
  .qi-hero {
    view-transition-name: var(--qi-vt-img);
  }
  .qi-item-title,
  .qi-article-title {
    view-transition-name: var(--qi-vt-title);
  }
  ::view-transition-group(*) {
    animation-duration: 0.36s;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.1, 1);
  }
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.15s;
  }
  /* 新旧页面高度不同时，根快照裁剪到视口高，消除切换底部的闪缝；
     根快照不做淡入淡出（背景直接切换），形变交给命名元素（标题/缩略图） */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    height: 100%;
    overflow: hidden;
  }
  /* 评论区：AJAX 换页时整块轻微淡入淡出 */
  .qi-comments {
    view-transition-name: qi-comments;
  }
  ::view-transition-group(qi-comments) {
    animation-duration: 0.22s;
  }

  /* 入场过渡（@starting-style）：整面一次轻淡入，不再逐条错峰——
     与跨文档 View Transition 叠加时只播一层动效，浏览不拖沓 */
  .qi-main {
    transition: opacity 0.35s ease;
  }
  @starting-style {
    .qi-main {
      opacity: 0;
    }
  }
  #qi-toc {
    transition: opacity 0.18s ease, scale 0.18s ease;
    scale: 0.97;
  }
  #qi-toc:popover-open {
    scale: 1;
  }
  @starting-style {
    #qi-toc:popover-open {
      opacity: 0;
      scale: 0.97;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root,
    .qi-list,
    .qi-progress,
    .qi-top {
      animation: none;
    }
    .qi-main,
    #qi-toc {
      transition: none;
    }
    /* 回顶按钮无动画时保持常显可点 */
    .qi-top {
      opacity: 1;
      pointer-events: auto;
    }
  }
}