/* ==========================================================================
   Rice World — 设计系统
   基线：《Rice World 博客前端设计规范 v1.0》
   所有色值只在语义 token 中声明；正文中一律使用 var() 引用。
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --color-bg: #FAF9F7;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F3F0F5;
  --color-text: #393640;
  --color-text-muted: #6F6979;   /* 规范 #77717E 偏浅，压深以保证正文旁注 ≥4.5:1 */
  /* 主题设置注入的「输入变量」（--set-*）；语义 token 由它们派生，
     因此浅色与深色仍各自独立定义，而不是把设置值直接写进颜色 */
  --set-accent: #806B9B;
  --set-accent-soft: #A394BD;
  --set-ph: #F3F0F5;
  --set-site-width: 1160px;

  --color-accent: var(--set-accent);
  --color-accent-soft: var(--set-accent-soft);
  --ph-color: var(--set-ph);            /* 图片槽位的「底面」：加载中与加载失败都由它兜底 */
  --color-divider: #E8E4EB;
  --color-selection: #E5DDEE;
  --color-shadow: rgba(57, 54, 64, 0.10);
  --color-on-accent: #FFFFFF;           /* 实心强调控件上的文字 */
  --color-on-scrim: #FFFFFF;            /* 深色遮罩上的文字 */
  --color-scrim-line: rgba(255, 255, 255, .5);
  --color-scrim: rgba(28, 26, 33, .58); /* 背景封面的压暗层 */

  --width-site: var(--set-site-width);
  --width-article: 720px;
  --width-article-media: 960px;
  --page-gutter: clamp(20px, 4vw, 48px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-image: 2px;
  --radius-control: 8px;
  --duration-fast: 160ms;
  --duration-page: 260ms;
  /* 页面转场：规范建议退出 120–180ms、进入 180–260ms */
  --duration-exit: 150ms;
  --duration-enter: 220ms;
  --ease-editorial: cubic-bezier(.22, 1, .36, 1);

  /* 首页「只有一张图」的版式所用图片区比例（后台可改；白名单见文件末尾的 data-ratio-* 规则） */
  --ratio-single: 16 / 9;
  --ratio-cover: 20 / 9;

  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Iowan Old Style", "Charter", "Georgia", "Songti SC", "Source Han Serif SC", "Noto Serif SC", "Times New Roman", serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-display: clamp(38px, 5.4vw, 62px);
  --fs-h1: clamp(30px, 3.6vw, 42px);
  --fs-h2: clamp(24px, 2.6vw, 30px);
  --fs-h3: 20px;
  --fs-title: clamp(23px, 2.4vw, 31px);
  --fs-body: 18px;
  --fs-lead: 19px;
  --fs-small: 15px;
  --fs-meta: 13px;
  --fs-micro: 12px;

  --header-h: 64px;
  --drawer-w: 420px;

  color-scheme: light;
}

/* 深色模式：独立语义 token，不做简单颜色反转 */
:root[data-theme="dark"] {
  --color-bg: #1B191F;
  --color-surface: #24212B;
  --color-surface-soft: #2A2634;
  --color-text: #ECE8F0;
  --color-text-muted: #AAA2B6;
  /* 深色下强调色需要提亮：由同一设置值向白端混合，而不是反转浅色 */
  --color-accent: color-mix(in oklab, var(--set-accent) 58%, #FFFFFF);
  --color-accent-soft: color-mix(in oklab, var(--set-accent-soft) 68%, #FFFFFF);
  --ph-color: color-mix(in oklab, var(--set-ph) 20%, #1B191F);
  --color-divider: #383342;
  --color-selection: #413A52;
  --color-shadow: rgba(0, 0, 0, 0.42);
  --color-on-accent: #1B191F;           /* 深色下强调色变亮，文字随之转深 */
  --color-on-scrim: #FFFFFF;
  --color-scrim-line: rgba(255, 255, 255, .5);
  --color-scrim: rgba(20, 18, 24, .5);
  color-scheme: dark;
}

/* ── 2. Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  font-weight: 400;
  /* 超长不可断串（URL、连续英文）不再把视口顶宽：正文里会更彻底，见 .prose */
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--color-divider); margin: 0; }
::selection { background: var(--color-selection); }

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

.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-control); font-size: var(--fs-small);
  transition: top var(--duration-fast) var(--ease-editorial);
}
.skip-link:focus { top: var(--space-4); }

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

/* ── 3. 版心 ───────────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--width-site);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.shell-narrow { max-width: calc(var(--width-article) + var(--page-gutter) * 2); }
.shell-media { max-width: calc(var(--width-article-media) + var(--page-gutter) * 2); }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rule { border-top: 1px solid var(--color-divider); }

/* ── 4. 链接 ───────────────────────────────────────────────────────────── */
.link-quiet { transition: color var(--duration-fast) linear; }
.link-quiet:hover { color: var(--color-accent); }

/* 正文链接：颜色之外还有下划线，不依赖微弱颜色差 */
.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--color-accent-soft);
  transition: text-decoration-color var(--duration-fast) linear;
}
.prose a:hover { text-decoration-color: var(--color-accent); }

/* 链接悬停时加粗一点。用描边而不是 font-weight：改字重会让字变宽、整段文字跟着重新折行，
   读起来会跳。浏览器不支持描边时退回极细的文字阴影，观感接近。 */
.prose a:hover,
.prose a:focus-visible,
.entry-title a:hover,
.entry-title a:focus-visible,
.article-nav a:hover .nm,
.article-nav a:focus-visible .nm,
.link-card:hover .link-name,
a.rn-comment__author:hover,
.site-foot a:hover {
  -webkit-text-stroke: .5px currentColor;
}
@supports not (-webkit-text-stroke: 1px currentColor) {
  .prose a:hover,
  .prose a:focus-visible,
  .entry-title a:hover,
  .entry-title a:focus-visible,
  .article-nav a:hover .nm,
  .article-nav a:focus-visible .nm,
  .link-card:hover .link-name,
  a.rn-comment__author:hover,
  .site-foot a:hover {
  text-shadow: 0 0 .5px currentColor;
  }
  }

/* ── 5. 按钮（控件） ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-size: var(--fs-small);
  line-height: 1;
  transition: background var(--duration-fast) var(--ease-editorial),
              border-color var(--duration-fast) var(--ease-editorial),
              color var(--duration-fast) var(--ease-editorial);
}
.btn:hover { border-color: var(--color-text-muted); }
.btn-solid {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.btn-solid:hover {
  background: color-mix(in oklab, var(--color-accent) 86%, var(--color-text));
  border-color: color-mix(in oklab, var(--color-accent) 86%, var(--color-text));
  color: var(--color-on-accent);
}
.btn-quiet { background: transparent; border-color: transparent; padding-inline: 10px; }
.btn-quiet:hover { border-color: var(--color-divider); }
/* 按钮内的图标统一尺寸：内联 <svg> 没有 width/height 时会被压成 0 宽（图标看不见） */
.btn svg { width: 19px; height: 19px; flex: none; }
.btn[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }

.icon-btn {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-control);
  transition: background var(--duration-fast) var(--ease-editorial),
              border-color var(--duration-fast) var(--ease-editorial);
}
.icon-btn:hover { background: var(--color-surface-soft); border-color: var(--color-divider); }
.icon-btn svg { width: 19px; height: 19px; }

/* ── 6. 首页 Floating Index 刊头 ───────────────────────────────────────── */
.masthead { padding-top: clamp(28px, 5vw, 56px); }
.masthead-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6);
}
.masthead-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.index-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 6px 8px 14px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  flex: none;
  transition: border-color var(--duration-fast) var(--ease-editorial);
}
.index-trigger:hover { border-color: var(--color-text-muted); }
.index-trigger .index-glyph {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--color-accent);          /* 图标不铺底色，只用强调色描线 */
}
.index-trigger .index-glyph svg { width: 15px; height: 15px; }

/* 悬浮 INDEX：全站唯一的目录入口，首页与文章页共用同一个（partials/index-fab.njk）。
   它固定在与「页头里那个按钮」完全相同的位置上，只是不再随页头的排版与滚动走：
   - 水平：对齐内容区右缘（宽屏时是 (100vw - 站宽)/2 + 页边距，窄屏回落到页边距）；
   - 垂直：桌面 10px / 窄屏 8px（页头行为 64 / 60，按钮 44 高，正好垂直居中）；
     首页刊头的首行从 clamp(28px,5vw,56px) 开始，所以首页单独对齐到那里。
   页头工具（目录 / 设置）用 padding-right 让出按钮原来的宽度，视觉上与改造前一致。
   z-index 夹在吸顶页头（40）与抽屉遮罩（60）之间；抽屉打开时淡出并让出点击。 */
html { --index-fab-w: 106px; }
.index-fab {
  position: fixed;
  top: 10px;
  right: max(var(--page-gutter), calc((100vw - var(--width-site)) / 2 + var(--page-gutter)));
  z-index: 45;
  min-width: var(--index-fab-w);
  min-height: 44px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: 0 2px 12px var(--color-shadow);
  transition: top var(--duration-page) var(--ease-editorial),
              opacity var(--duration-page) var(--ease-editorial),
              transform var(--duration-page) var(--ease-editorial),
              border-color var(--duration-fast) var(--ease-editorial),
              background var(--duration-fast) var(--ease-editorial);
}
.index-fab:hover {
  background: color-mix(in oklab, var(--color-bg) 94%, transparent);
  border-color: var(--color-text-muted);
}
.index-fab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* 首页：对齐刊头首行（刊头本身会自然滚出，按钮留在原处不动） */
html[data-page="home"] .index-fab { top: clamp(28px, 5vw, 56px); }
/* 页头工具让出悬浮按钮占的那一格 */
.reader-tools { padding-right: calc(var(--index-fab-w) + var(--space-4)); }
html[data-index-pos="bottom-right"] .index-fab {
  top: auto;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}
html[data-index-pos="bottom-right"] .reader-tools { padding-right: 0; }
html.drawer-open .index-fab {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .index-fab { transition: none; } }
html[data-motion="off"] .index-fab { transition: none; }
@media (max-width: 600px) {
  /* 窄屏只留图标：按钮缩成 44×44，页头让出的宽度同步收窄 */
  html { --index-fab-w: 44px; }
  .index-fab { top: 8px; padding: 8px; }
  html[data-page="home"] .index-fab { top: clamp(28px, 5vw, 56px); }
  .index-fab-label { display: none; }
}

.masthead-title {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.02;
  margin-top: clamp(28px, 5vw, 52px);
}
.masthead-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.intro {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  padding-bottom: var(--space-6);
}
.intro p { max-width: 34em; }
.intro-facts { display: grid; gap: var(--space-3); justify-items: start; }
.intro-facts .fact {
  display: grid; gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  width: 100%;
}
.intro-facts .fact strong { font-weight: 600; font-size: var(--fs-small); }
.feed-head {
  padding: var(--space-6) 0 0;
}

/* ── 7. Editorial Feed ─────────────────────────────────────────────────── */
.feed { padding-bottom: clamp(44px, 6vw, 80px); }
.entry { padding-top: clamp(52px, 7vw, 104px); }
.entry-media { display: grid; gap: 8px; }
.entry-media > * { min-width: 0; }
.entry-text { display: grid; gap: var(--space-3); }

.entry-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.entry-meta .sep { width: 14px; height: 1px; background: var(--color-divider); }
.entry-meta .cat { color: var(--color-text); }

.entry-title {
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.01em;
}
.entry-title a { transition: color var(--duration-fast) linear; }
.entry-title a:hover { color: var(--color-accent); }
.slot-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-image); }
.entry-cover .slot-link:focus-visible,
.entry-cover a:focus-visible { outline: 2px solid var(--color-on-scrim); outline-offset: -6px; }
.entry-excerpt {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: 1.75;
  max-width: 52ch;
}
.entry-foot {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--color-text-muted);
}
/* align-items: start 是硬保证：图片区高度只由比例决定，
   不允许被右侧/下方的文字高度拉伸（否则同一版式会随摘要长短出现不同高度） */
.entry-head {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}

/* text 版式：更大字号与留白 */
.entry--text { padding-top: clamp(64px, 8vw, 120px); }
.entry--text .entry-title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.24; }
.entry--text .entry-head { margin-bottom: 0; }

/* 图片槽（规范允许的图片缺失回退：不显示坏图占位，改为可读的版面占位） */
.slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--ph-color);
  /* 自建层叠上下文（z-index: 0）。否则下面 .slot-ph/.slot-img 的 z-index 会「漏」进
     祖先的层叠上下文，把叠在图片之上的兄弟节点（例如背景封面的标题，z-index: auto）
     整块盖住 —— 曾表现为「背景封面只剩一张图，标题与元数据都不见了」。 */
  z-index: 0;
}
.slot svg { width: 100%; height: 100%; display: block; }

/* 图片两层结构：.slot-ph 是加载中占位（纯装饰），.slot-img 是真实图片 */
.slot-ph,
.slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slot-ph { z-index: 0; pointer-events: none; }
/* 深色下把占位图压暗：占位图是作者上传的浅色图，原样显示会在深色页面上刺眼 */
:root[data-theme="dark"] .slot-ph { opacity: .3; }
.slot-img {
  z-index: 1;
  transition: opacity var(--duration-page) var(--ease-editorial),
              transform var(--duration-page) var(--ease-editorial);
}
/* 图片失败：两张图都撤掉，只留下占位底色，不出现坏图图标（规范 4.4） */
.slot.is-failed .slot-ph,
.slot.is-failed .slot-img { display: none; }

/* 淡入只在脚本可用、且后台开启时生效；关掉后图片直接可见 */
.has-js[data-fade="on"] .slot-img { opacity: 0; }
.has-js[data-fade="on"] .slot-img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .slot-img { transition: none; }
}
html[data-motion="off"] .slot-img { transition: none; }

/* 图片悬停：规范 4.6 允许的极轻缩放（不超过 1.02） */
a:hover > .slot .slot-img,
.slot-link:hover .slot-img,
.entry-cover:hover .slot-img { transform: scale(1.02); }
.slot::after {
  content: "";
  position: absolute; inset: 0;
  /* 图片是 z-index: 1，悬停压暗要盖在它之上，否则这层永远看不见 */
  z-index: 2;
  background: color-mix(in oklab, var(--color-text) 0%, transparent);
  transition: background var(--duration-fast) var(--ease-editorial);
  pointer-events: none;
}
a:hover > .slot::after,
.slot-link:hover .slot::after { background: color-mix(in oklab, var(--color-text) 5%, transparent); }
.slot-link { display: block; }

/* background 封面叠字 */
.entry-cover { position: relative; }
/* 压暗层刻意不叫 .scrim：通用 .scrim 是抽屉遮罩，带 opacity/visibility/z-index，
   曾经因此把这个压暗层变成「opacity: 0 + visibility: hidden + z-index: 60」的隐形层。 */
.entry-cover .cover-shade {
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--color-scrim);
  pointer-events: none;              /* 不参与点击：整张封面仍是通往文章的一张大链接 */
}
.entry-cover .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;                        /* 必须在图片与压暗层之上 */
  padding: clamp(18px, 3vw, 34px);
  display: grid; gap: 10px; max-width: 780px;
  pointer-events: none;              /* 叠字块只留链接可点，空白处穿透到封面链接 */
}
.entry-cover .cap a { pointer-events: auto; }
.entry-cover .cap .entry-meta,
.entry-cover .cap .entry-title,
.entry-cover .cap .entry-excerpt { color: var(--color-on-scrim); }
/* 叠字里的摘要最多 3 行：它是封面上的次要信息，不能把标题顶到图片之外
   （顶出去的部分是白字压在浅色页面上，等于看不见） */
.entry-cover .cap .entry-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry-cover .cap .entry-meta .cat { color: var(--color-on-scrim); }
.entry-cover .cap .entry-title a:hover { color: var(--color-selection); }
.entry-cover .cap .sep { background: var(--color-scrim-line); }

/* 版式：图片区尺寸
   「单图」与「通栏大图」共用 --ratio-single，因此首页所有「只有一张图」的单元高度一致；
   「背景封面」要承载叠字，单独用 --ratio-cover。取值来自后台，但只按下面的白名单匹配，
   未知值自动落回 :root 的默认比例（不把后台字符串拼进样式）。 */
.media-single,
.media-hero { aspect-ratio: var(--ratio-single); }
.media-background { aspect-ratio: var(--ratio-cover); }
html[data-ratio-single="3 / 2"] { --ratio-single: 3 / 2; }
html[data-ratio-single="4 / 3"] { --ratio-single: 4 / 3; }
html[data-ratio-single="2 / 1"] { --ratio-single: 2 / 1; }
html[data-ratio-cover="16 / 9"] { --ratio-cover: 16 / 9; }
html[data-ratio-cover="2 / 1"] { --ratio-cover: 2 / 1; }
.media-double { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.media-double .slot { aspect-ratio: 4 / 5; }
.media-triple { display: grid; grid-template-columns: 1.62fr 1fr; gap: 8px; }
.media-triple .slot-main { aspect-ratio: 4 / 3; }
.media-triple .col { display: grid; gap: 8px; grid-template-rows: 1fr 1fr; height: 100%; align-content: stretch; }
.media-triple .col .slot { min-height: 0; height: 100%; }
.media-quad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.media-quad .slot { aspect-ratio: 4 / 3; }

/* ── 8. 分页 ───────────────────────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
}
.pager-pages { display: flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: var(--fs-meta); }
.pager-pages a, .pager-pages span {
  min-width: 44px; height: 44px; padding-inline: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-control);
}
.pager-pages a { color: var(--color-text-muted); transition: color var(--duration-fast) linear, border-color var(--duration-fast) linear; }
.pager-pages a:hover { color: var(--color-text); border-color: var(--color-divider); }
.pager-pages a.is-current { border-color: var(--color-accent); color: var(--color-accent); }

/* ── 9. 页脚 ───────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--color-divider);
  margin-top: clamp(48px, 7vw, 96px);
  padding-block: var(--space-12) var(--space-16);
}
.foot-grid {
  display: grid;
  /* 页脚只有两栏：站点信息 + 浏览入口（分类导航交给 INDEX 抽屉，避免重复一份） */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
}
.foot-brand { font-family: var(--font-serif); font-size: 22px; }
.foot-col { display: grid; gap: 10px; align-content: start; }
.foot-col .label { margin-bottom: 2px; }
.foot-col a { font-size: var(--fs-small); color: var(--color-text-muted); transition: color var(--duration-fast) linear; }
.foot-col a:hover { color: var(--color-text); }
.foot-base {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--color-text-muted);
}
.to-top { display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; color: var(--color-text-muted); }
.to-top:hover { color: var(--color-text); }
.to-top svg { width: 16px; height: 16px; flex: none; }

/* ── 10. INDEX 抽屉 / 通用抽屉 ─────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in oklab, var(--color-text) 26%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-page) var(--ease-editorial),
              visibility 0s linear var(--duration-page);
}
.scrim.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--duration-page) var(--ease-editorial), visibility 0s linear 0s;
}

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(var(--drawer-w), 100vw);
  max-width: 100vw;
  background: var(--color-surface);
  border-left: 1px solid var(--color-divider);
  box-shadow: -18px 0 48px -28px var(--color-shadow);
  transform: translateX(102%);
  visibility: hidden;
  display: flex; flex-direction: column;
  /* visibility 是离散属性：关闭时延迟到动画结束再隐藏；打开时立即变为可见，
     否则抽屉在过渡中点之前不可聚焦，首次 focus() 会静默失败。 */
  transition: transform var(--duration-page) var(--ease-editorial),
              visibility 0s linear var(--duration-page);
}
.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--duration-page) var(--ease-editorial),
              visibility 0s linear 0s;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  min-height: var(--header-h);
}
.drawer-body { padding: var(--space-6); overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.drawer-foot {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--color-text-muted);
}

/* 目录条目直接来自 rice.navigation 插件的 header.navigation 插槽，
   因此这里只给 `.rn-nav-link` 定版式：编号由 CSS 计数器生成，
   后台增删导航项时编号自动跟着走（01、02…），模板不需要改。 */
.index-list {
  display: grid;
  counter-reset: index-entry;
}
.index-list .rn-nav-link {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;   /* 长的导航文案不撑宽抽屉 */
  align-items: baseline;
  gap: var(--space-4);
  padding: 18px 8px;
  border-bottom: 1px solid var(--color-divider);
  counter-increment: index-entry;
  font-size: var(--fs-body);
  transition: background var(--duration-fast) var(--ease-editorial);
}
.index-list .rn-nav-link:first-child { border-top: 1px solid var(--color-divider); }
.index-list .rn-nav-link::before {
  content: counter(index-entry, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .1em; color: var(--color-text-muted);
}
.index-list .rn-nav-link::after {
  content: "↗";
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--color-text-muted);
}
.index-list .rn-nav-link:hover { background: var(--color-surface-soft); }
.index-list .rn-nav-link[aria-current="page"],
.index-list .rn-nav-link--active { background: var(--color-surface-soft); color: var(--color-accent); }
.index-list .rn-nav-link[aria-current="page"]::before,
.index-list .rn-nav-link--active::before { color: var(--color-accent); }

/* ── 11. 文章页 Compact Header ─────────────────────────────────────────── */
.reader-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(10px);
  /* 下滑收起、上滑回来（.is-hidden 由脚本按滚动方向加）。
     transform 不参与布局，收起时正文与进度线都不会跳动。 */
  transition: transform var(--duration-page) var(--ease-editorial);
}
.reader-head.is-hidden { transform: translateY(-100%); }
/* 键盘焦点回到页头时立刻拉回来，避免焦点留在屏幕外 */
.reader-head.is-hidden:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) { .reader-head { transition: none; } }
html[data-motion="off"] .reader-head { transition: none; }
.reader-bar {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: var(--space-2);
}
/* 返回键与标题是两个独立链接：返回键回上一个页面，标题回首页（见 header-compact.njk） */
.reader-back {
  width: 36px; height: 36px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--color-divider); border-radius: var(--radius-control);
  transition: border-color var(--duration-fast) var(--ease-editorial),
              background var(--duration-fast) var(--ease-editorial);
}
.reader-back:hover { border-color: var(--color-text-muted); background: var(--color-surface-soft); }
.reader-back:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.reader-back svg { width: 16px; height: 16px; }
.reader-brand {
  display: inline-flex; align-items: center;
  min-width: 0;                    /* 允许被压缩：窄屏时让标题渐隐，而不是把顶栏挤成两行 */
  font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  letter-spacing: -.01em;
}
/* 站名 / 文章标题：只占一行，溢出时从右向左渐隐（而不是截断成省略号）。
   .is-clipped 由脚本按真实溢出量加 —— 常开会让短标题的末字也被削淡；
   完整文字始终在 DOM 与无障碍树上，屏幕阅读器读到的是全文。 */
.reader-brand-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.reader-brand-text.is-clipped {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
.reader-tools { flex: none; margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.reader-tools .btn { white-space: nowrap; }
.reader-tools .tool-label {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase;
}
.progress-track { position: relative; height: 3px; background: var(--color-divider); }
.progress-track .bar {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--color-accent);
  transition: width 120ms linear;
}
@media (prefers-reduced-motion: reduce) { .progress-track .bar { transition: none; } }

/* ── 12. 文章页正文 ───────────────────────────────────────────────────── */
.article-head { padding: clamp(28px, 5vw, 64px) 0 0; }
.article-head .eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.article-title { font-size: var(--fs-h1); line-height: 1.22; letter-spacing: -.015em; }
/* 标题下方直接接元信息：不再插入摘要小标题，间距相应收紧 */
.article-byline {
  margin-top: 20px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  color: var(--color-text-muted);
}
.article-cover { margin-top: clamp(28px, 4vw, 48px); }
.article-cover .slot { aspect-ratio: 16 / 9; }
.article-cover .slot--overlay { aspect-ratio: auto; }
.article-cover .slot--overlay svg { height: auto; aspect-ratio: 16 / 9; }
.article-cover figcaption,
.prose figcaption {
  margin-top: 10px;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* anywhere 而不是 break-word：正文里的超长 URL 会参与最小内容宽度计算，
   因此即使处在窄栏 / 弹性容器里也不会把整页撑宽 */
.prose { padding-top: clamp(32px, 4vw, 56px); overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 {
  font-size: var(--fs-h2); line-height: 1.3; letter-spacing: -.012em;
  margin-top: 2.2em; scroll-margin-top: calc(var(--header-h) + 20px);
}
.prose h3 {
  font-size: var(--fs-h3); line-height: 1.4;
  margin-top: 1.9em; scroll-margin-top: calc(var(--header-h) + 20px);
}
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: .5em; }
.prose li { padding-left: .2em; }
.prose li::marker { color: var(--color-text-muted); }

.prose blockquote {
  border-left: 2px solid var(--color-accent-soft);
  padding: 2px 0 2px var(--space-6);
  color: var(--color-text);
  font-size: var(--fs-lead);
  line-height: 1.7;
}
.prose blockquote p + p { margin-top: .8em; }
.prose blockquote cite {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-mono); font-style: normal;
  font-size: var(--fs-micro); letter-spacing: .08em; color: var(--color-text-muted);
}

.prose code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  padding: .1em .38em;
}
.code-block { position: relative; }
.code-block pre {
  margin: 0;
  padding: var(--space-4) var(--space-6) var(--space-6);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-control);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.7;
}
.code-block code { background: none; border: 0; padding: 0; font-size: 14px; }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 8px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted);
}
.copy-code {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 10px;
  border: 1px solid var(--color-divider); border-radius: 6px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) linear, border-color var(--duration-fast) linear;
}
.copy-code:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.copy-code[data-state="done"] { color: var(--color-accent); border-color: var(--color-accent); }

.prose figure { margin-top: 1.8em; }
.prose figure.bleed { width: min(var(--width-article-media), calc(100vw - var(--page-gutter) * 2)); }
.prose .content-img {
  width: 100%; height: auto;
  border-radius: var(--radius-image);
  background: var(--ph-color);
  cursor: zoom-in;
}
.table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 460px; }
.prose th, .prose td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--color-divider); }
.prose th {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted);
  border-bottom-color: var(--color-text-muted);
}
.prose td.num-cell { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

.footnotes {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.footnotes h2 { font-size: var(--fs-h3); color: var(--color-text); margin-bottom: var(--space-4); }
.footnotes ol { display: grid; gap: 10px; padding-left: 1.3em; }
.footnotes li { text-wrap: pretty; }

/* ── 13. 文章页底部 ───────────────────────────────────────────────────── */
.article-tags {
  /* 分割线之上的留白要明显大于线下的内容间距，否则线会「贴」在正文上 */
  margin-top: clamp(64px, 8vw, 96px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.tag {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--color-divider); border-radius: 999px;
  font-size: var(--fs-meta); color: var(--color-text-muted);
  transition: color var(--duration-fast) linear, border-color var(--duration-fast) linear;
}
.tag:hover { color: var(--color-text); border-color: var(--color-text-muted); }

.article-nav {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6);
}
.article-nav a {
  display: grid; gap: 6px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.article-nav .nm { font-size: var(--fs-body); line-height: 1.5; transition: color var(--duration-fast) linear; }
.article-nav a:hover .nm { color: var(--color-accent); }
.article-nav .right { text-align: right; }

.comments { margin-top: clamp(48px, 6vw, 80px); }
.comments-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.comment-form { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.comment-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-meta); color: var(--color-text-muted); }
.input, .textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.textarea { min-height: 104px; resize: vertical; }
.input:focus, .textarea:focus { outline: 2px solid var(--color-accent-soft); outline-offset: 1px; border-color: var(--color-accent); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.comment-list { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.comment { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface-soft); border: 1px solid var(--color-divider);
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--color-text-muted);
}
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.comment-head strong { font-size: var(--fs-small); font-weight: 600; }
.comment-body { margin-top: 6px; font-size: var(--fs-small); color: var(--color-text); }
.comment-actions { margin-top: 8px; display: flex; gap: var(--space-4); }
.comment-actions button {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) linear;
}
.comment-actions button:hover { color: var(--color-text); }
.comment-actions button[data-state="done"] { color: var(--color-accent); }

/* ── 14. 阅读工具面板 ─────────────────────────────────────────────────── */
.tool-group { display: grid; gap: 10px; padding-block: var(--space-4); }
.tool-group + .tool-group { border-top: 1px solid var(--color-divider); }
.tool-group > .label { margin-bottom: 2px; }
.segmented {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-control);
}
.segmented button {
  min-height: 38px; padding: 6px 14px;
  border-radius: 6px;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  transition: background var(--duration-fast) linear, color var(--duration-fast) linear;
}
.segmented button:hover { color: var(--color-text); }
.segmented button[aria-pressed="true"] {
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 1px 2px var(--color-shadow);
}
.tool-note { font-size: var(--fs-meta); color: var(--color-text-muted); line-height: 1.6; }

/* 目录面板 */
.toc-list { display: grid; gap: 2px; }
.toc-list a {
  display: block; padding: 9px 10px;
  border-left: 2px solid transparent;
  font-size: var(--fs-small); color: var(--color-text-muted);
  transition: color var(--duration-fast) linear, border-color var(--duration-fast) linear,
              background var(--duration-fast) linear;
}
.toc-list a:hover { color: var(--color-text); background: var(--color-surface-soft); }
.toc-list a.is-current { color: var(--color-accent); border-left-color: var(--color-accent); background: var(--color-surface-soft); }
.toc-list a.lv3 { padding-left: 26px; font-size: var(--fs-meta); }

/* 字号档位 */
:root[data-size="s"] { --fs-body: 16px; --fs-lead: 17px; }
:root[data-size="l"] { --fs-body: 20px; --fs-lead: 21px; }

/* ── 15. 图片灯箱 ─────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: color-mix(in oklab, var(--color-text) 78%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-page) var(--ease-editorial),
              visibility 0s linear var(--duration-page);
}
.lightbox.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--duration-page) var(--ease-editorial), visibility 0s linear 0s;
}
.lightbox-inner { width: min(100%, 1040px); }
.lightbox img {
  width: auto; height: auto;
  max-width: min(100%, 1040px);
  max-height: min(76vh, 760px);
  object-fit: contain;
  background: var(--color-surface);
  border-radius: var(--radius-image);
}
.lightbox-main { display: grid; gap: var(--space-3); justify-items: center; }
.lightbox figcaption { color: var(--color-bg); font-size: var(--fs-meta); text-align: center; }
.lightbox-close {
  position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px);
  width: 44px; height: 44px; border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-text);
  display: grid; place-items: center;
}

/* ── 16. 归档 / 关于 / 搜索 / 404 ─────────────────────────────────────── */
.page-head { padding: clamp(40px, 6vw, 84px) 0 0; }
.page-title { font-size: var(--fs-h1); line-height: 1.2; letter-spacing: -.015em; }
.page-lead { margin-top: var(--space-4); color: var(--color-text-muted); max-width: 46ch; }

.filter-bar {
  margin-top: var(--space-8);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.filter-bar .label { margin-right: auto; }
.chip {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 4px 13px;
  border: 1px solid var(--color-divider); border-radius: 999px;
  font-size: var(--fs-meta); color: var(--color-text-muted);
  transition: color var(--duration-fast) linear, border-color var(--duration-fast) linear,
              background var(--duration-fast) linear;
}
.chip:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.chip[aria-pressed="true"] { background: var(--color-surface-soft); border-color: var(--color-accent); color: var(--color-accent); }

.year-block { padding-top: clamp(32px, 4vw, 52px); }
.year-head {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding-bottom: var(--space-3);
}
.year-head .yr { font-family: var(--font-mono); font-size: 22px; letter-spacing: .04em; }
.year-head .count { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; color: var(--color-text-muted); }
.year-head .rule { flex: 1; border-top: 1px solid var(--color-divider); }

.archive-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-6);
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--color-divider);
}
.archive-row:first-of-type { border-top: 0; }
.archive-row .date { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--color-text-muted); }
.archive-row .ttl { font-size: var(--fs-body); line-height: 1.55; transition: color var(--duration-fast) linear; }
.archive-row:hover .ttl { color: var(--color-accent); }
.archive-row .cat { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.archive-row.is-hidden { display: none; }

.about-grid {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.about-aside { display: grid; gap: var(--space-6); }
.info-list { display: grid; gap: 0; }
.info-list .row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4);
  padding: 12px 0; border-top: 1px solid var(--color-divider);
  font-size: var(--fs-small);
}
.info-list .row:first-child { border-top: 0; }
.info-list dd { margin: 0; }
.info-list dt { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }

.empty-state {
  padding: clamp(40px, 6vw, 80px) 0;
  display: grid; gap: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.empty-state .nm { font-size: var(--fs-h3); }
.empty-state p { color: var(--color-text-muted); max-width: 46ch; }
.search-field {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 14px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-control);
  background: var(--color-surface);
}
.search-field:focus-within { border-color: var(--color-accent); outline: 2px solid var(--color-accent-soft); outline-offset: 1px; }
.search-field svg { width: 18px; height: 18px; color: var(--color-text-muted); flex: none; }
.search-field input { flex: 1; border: 0; background: none; outline: none; font-size: var(--fs-body); min-width: 0; }

/* ── 17. 响应式 ───────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .media-quad .slot { aspect-ratio: 3 / 2; }
}
@media (max-width: 920px) {
  :root { --fs-body: 17px; --header-h: 60px; }
  .intro { grid-template-columns: 1fr; align-items: start; gap: var(--space-6); }
  .foot-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .article-nav { grid-template-columns: 1fr; gap: var(--space-4); }
  .article-nav .right { text-align: left; }
  .comment-form .field-row { grid-template-columns: 1fr; }
  .media-triple { grid-template-columns: 1fr; }
  .media-triple .slot-main { aspect-ratio: 16 / 10; }
  .media-triple .col { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .media-triple .col .slot { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .masthead-bar { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .archive-row { grid-template-columns: 74px minmax(0, 1fr); }
  .archive-row .cat { grid-column: 2; }
  .media-double, .media-quad { grid-template-columns: 1fr 1fr; gap: 6px; }
  .media-quad .slot { aspect-ratio: 1 / 1; }
  .entry-media { gap: 6px; }
  /* 窄屏「背景封面」：封面只有 ~158px 高，而「分类/日期 + 标题 + 摘要」要 ~296px，
     多出来的部分会被顶到图片上方（白字压在浅色页面上＝看不见）。
     这里把封面放宽一点给标题留余量，并让叠字只保留分类/日期与标题。 */
  .media-background { aspect-ratio: 16 / 9; }
  .entry-cover .cap .entry-excerpt { display: none; }
  .drawer { width: 100vw; border-left: 0; }
  .reader-tools .tool-text { display: none; }
}

@media print {
  .masthead-bar, .reader-head, .site-foot, .comments, .lightbox, .scrim, .drawer, .index-fab { display: none; }
  .transition-main { opacity: 1 !important; transform: none !important; }
  body { font-size: 12pt; }
}

/* ── 18. 页面过渡（Swup 4） ─────────────────────────────────────────────
   只在 Swup 真正接管后才生效（rw-swup 由脚本加到 <html> 上），
   因此脚本加载失败时页面不会被卡在透明度 0。

   ⚠️ 出站/入站选择器必须区分开：swup 在**淡出阶段**就同时挂上
   is-changing + is-animating（还有 is-leaving），直到内容替换时才加 is-rendering。
   所以 is-animating 绝不能出现在「恢复 opacity: 1」的规则里 ——
   同优先级下后写的规则会覆盖淡出，整个动画被吃掉（实测 opacity 全程恒为 1）。 */
.transition-main { opacity: 1; transform: translateY(0); }
.rw-swup .transition-main {
  transition: opacity var(--duration-exit) var(--ease-editorial),
              transform var(--duration-exit) var(--ease-editorial);
}
/* 淡出：is-changing 期间（此时还没有 is-rendering） */
.rw-swup.is-changing .transition-main { opacity: 0; transform: translateY(6px); }
/* 淡入：内容已替换，用稍长的时长 */
.rw-swup.is-rendering .transition-main {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-enter) var(--ease-editorial),
              transform var(--duration-enter) var(--ease-editorial);
}
@media (prefers-reduced-motion: reduce) {
  .rw-swup .transition-main { transition: none; }
}
html[data-motion="off"] .rw-swup .transition-main { transition: none; }

/* ── 19. 友情链接页 ─────────────────────────────────────────────────────
   刻意不渲染域名：卡片由头像、名称与介绍承担识别职责。 */
.links-count { display: block; margin-top: var(--space-8); }
.link-grid {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-divider);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
}
.link-grid[data-columns="1"] { grid-template-columns: minmax(0, 1fr); }
.link-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.link-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.link-item { min-width: 0; }
.link-card {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-control);
  transition: background var(--duration-fast) var(--ease-editorial);
}
.link-card:hover { background: var(--color-surface-soft); }
.link-avatar {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-soft);
}
.link-avatar.is-letter {
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 22px;
  color: var(--color-text-muted);
}
.link-avatar.is-failed { visibility: hidden; }   /* 头像加载失败：保留占位，不显示坏图 */
.link-body { display: grid; gap: 4px; min-width: 0; }
.link-name { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; transition: color var(--duration-fast) linear; }
.link-card:hover .link-name { color: var(--color-accent); }
.link-desc {
  font-size: var(--fs-small); color: var(--color-text-muted); line-height: 1.6;
  overflow-wrap: anywhere;          /* 站点介绍里出现长串时也不会把卡片撑宽 */
}
.links-note {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: 46ch;
}
@media (max-width: 920px) {
  .link-grid, .link-grid[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .link-grid, .link-grid[data-columns="2"], .link-grid[data-columns="4"] { grid-template-columns: minmax(0, 1fr); }
  .link-card { padding-inline: 0; }
}

/* ── 20. 搜索页、空状态与分页补充 ─────────────────────────────────────── */
.search-form { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); max-width: 560px; }
.search-form .search-field { flex: 1 1 240px; }
.search-list { margin-top: var(--space-8); border-top: 1px solid var(--color-divider); }
.empty-state .page-title { margin-top: 12px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.pager-status { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--color-text-muted); }
.pager-pages .is-disabled { opacity: .5; }
.article-nav--single { grid-template-columns: minmax(0, 1fr); }

/* ── 21. 页头与页脚补充（插件插槽 / 站点信息） ────────────────────────── */
.foot-note { margin-top: 10px; color: var(--color-text-muted); font-size: var(--fs-small); max-width: 34ch; }
.foot-social {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-wrap: wrap; gap: var(--space-6);
}
.foot-social a { font-size: var(--fs-small); color: var(--color-text-muted); transition: color var(--duration-fast) linear; }
.foot-social a:hover { color: var(--color-text); }
.foot-widgets { padding-block: var(--space-8) var(--space-6); border-bottom: 1px solid var(--color-divider); }
/* 页头不排任何导航入口：菜单统一在 INDEX 抽屉里，入口是悬浮按钮（见 .index-fab） */
/* 只有图标的按钮（阅读设置）：保持 44×44 触控尺寸，不撑宽顶栏 */
.btn-icon { padding-inline: 0; width: 44px; justify-content: center; }
.btn-icon svg { width: 19px; height: 19px; }
@media (max-width: 600px) {
  /* 顶栏按钮一律不参与压缩：文字隐去后仍要保持 44×44 的触控尺寸 */
  .reader-tools > * { flex: none; }
  .reader-tools .btn-quiet { width: 44px; padding-inline: 0; justify-content: center; }
  /* 窄屏标题降一档字号：同一行里能多留几个字，再开始渐隐 */
  .reader-brand { font-size: 17px; gap: 8px; }
}

/* ── 22. 评论区（标记由 rice.comments 插件的 post.comments 插槽提供） ──
   类名清单来自 plugins/official/comments/src/slot.ts：
   .rn-comments__body/meta/list/pager/form、.rn-comment(.has-avatar)__meta/__author/__time/__body/__actions,
   .rn-field、.rn-pager__link。主题只负责样式，不改标记。 */
.rn-comments__body { display: grid; gap: var(--space-6); }
/* 网格项默认 min-width: auto：一条含长 URL 的评论就能把整个网格（乃至整篇文档）
   撑宽、出现横向滚动。逐个放宽最小宽度，并允许长串在任意位置断行。 */
.rn-comments__body > *,
.rn-comments__list > *,
.rn-comments__children > * { min-width: 0; }
[data-rn-comments] { overflow-wrap: anywhere; }
.rn-comments__meta {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .1em; color: var(--color-text-muted);
}
.rn-comments__empty { color: var(--color-text-muted); }
.rn-comments__message {
  padding: 10px 14px;
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
  border: 1px solid var(--color-divider);
  background: var(--color-surface-soft);
}
.rn-comments__message.is-ok { border-color: var(--color-accent-soft); color: var(--color-text); }
.rn-comments__message.is-error { border-color: var(--color-text); color: var(--color-text); }

.rn-comments__list,
.rn-comments__children { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.rn-comments__children {
  margin-top: var(--space-4);
  /* 缩进按视口收窄：长讨论会叠很多层，固定 24px 在窄屏上会把最深一层推出视口 */
  padding-left: clamp(12px, 2.4vw, 24px);
  border-left: 1px solid var(--color-divider);
}
/* 缩进最多叠加到第 5 层：更深的层不再继续右移，只保留左侧细线作为层级提示 */
.rn-comments__children .rn-comments__children .rn-comments__children
  .rn-comments__children .rn-comments__children .rn-comments__children { padding-left: 0; }

.rn-comment { position: relative; margin: 0; }
/* 有头像时才让出左侧空间（没有头像时不留下空档） */
.rn-comment.has-avatar { padding-left: 60px; }
/* 头像盒：既承载昵称首字，也承载一张图（站点图标 / 站点 LOGO）。
   插件不输出邮箱，所以头像不是「加载失败」而是「由昵称派生」，永远不会出坏图。 */
.rn-comment__avatar {
  position: absolute; left: 0; top: 2px;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-accent) 74%, var(--color-text));
  background: var(--color-surface-soft);
  user-select: none;
}
.rn-comment__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* 首字底色按昵称哈希在 4 档低饱和色之间轮转（同一个人每次都是同一档） */
.rn-comment__avatar[data-tone="1"] { background: color-mix(in oklab, var(--color-accent) 14%, var(--color-surface-soft)); }
.rn-comment__avatar[data-tone="2"] { background: color-mix(in oklab, var(--color-accent-soft) 24%, var(--color-surface-soft)); }
.rn-comment__avatar[data-tone="3"] { background: color-mix(in oklab, var(--color-text) 8%, var(--color-surface-soft)); }
.rn-comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.rn-comment__author { font-size: var(--fs-small); font-weight: 600; }
.rn-comment__time {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .08em; color: var(--color-text-muted);
}
.rn-comment__body { margin-top: 6px; font-size: var(--fs-small); line-height: 1.8; }
.rn-comment__body > * + * { margin-top: .9em; }
.rn-comment__body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: .2em; }
.rn-comment__actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.rn-comment__reply {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .08em; color: var(--color-text-muted);
  transition: color var(--duration-fast) linear;
}
.rn-comment__reply:hover { color: var(--color-accent); }

.rn-comments__pager { display: flex; flex-wrap: wrap; gap: 6px; }
.rn-pager__link {
  min-width: 34px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--color-divider); border-radius: 6px;
  font-family: var(--font-mono); font-size: var(--fs-meta);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) linear, border-color var(--duration-fast) linear;
}
.rn-pager__link:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.rn-pager__link.is-active { color: var(--color-accent); border-color: var(--color-accent); }

/* 表单 */
.rn-comments__form {
  display: grid; gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.rn-comments__form-title { font-size: var(--fs-h3); }
.rn-comments__replying {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  font-size: var(--fs-small); color: var(--color-text-muted);
}
/* display 会盖掉浏览器对 [hidden] 的默认隐藏，这两个由脚本切换显隐的块必须显式处理 */
.rn-comments__replying[hidden],
.rn-comments__message[hidden] { display: none; }
.rn-comments__submit:disabled { opacity: .6; cursor: progress; }
.rn-comments__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.rn-field { display: grid; gap: 6px; }
.rn-field__label { font-size: var(--fs-meta); color: var(--color-text-muted); }
.rn-field__input {
  width: 100%;
  padding: 11px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.rn-field__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
.rn-field__textarea { min-height: 120px; resize: vertical; }
/* 蜜罐字段：视觉隐藏但可提交，键盘也不会落到它上面 */
.rn-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.rn-comments__form-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.rn-comments__hint { font-size: var(--fs-meta); color: var(--color-text-muted); }
.rn-comments__submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 22px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--fs-small);
  transition: background var(--duration-fast) var(--ease-editorial);
}
.rn-comments__submit:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-text)); }
@media (max-width: 768px) {
  .rn-comments__fields { grid-template-columns: minmax(0, 1fr); }
  .rn-comment.has-avatar { padding-left: 52px; }
  .rn-comment__avatar { width: 38px; height: 38px; }
}
@media (max-width: 920px) {
  /* 回复的缩进与头像占位都按层叠加：五层深的长讨论会叠加出 ~320px，
     在 350px 的窄栏里足以把正文挤到一行几个字、甚至把整页推出视口。
     窄屏上从第 3 层起停止叠加，层级关系继续由左侧细线与作者名承担。 */
  .rn-comments__children .rn-comments__children { padding-left: 0; }
  .rn-comments__children .rn-comments__children > .rn-comment.has-avatar { padding-left: 0; }
  .rn-comments__children .rn-comments__children > .rn-comment > [data-rn-avatar] { display: none; }
}

/* ── 23. 短代码（主题自定义标记，见 assets/js/shortcodes.js） ─────────── */
.rw-note {
  border-left: 2px solid var(--color-accent-soft);
  background: var(--color-surface-soft);
  padding: var(--space-4) var(--space-6);
  border-radius: 0 var(--radius-image) var(--radius-image) 0;
}
.rw-note .rw-note-title {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.rw-note-alert { border-left-color: var(--color-text); }
.rw-note-alert .rw-note-title { color: var(--color-text); }
.rw-figure { display: grid; gap: 8px; }
.rw-figure img {
  width: 100%; height: auto;
  border-radius: var(--radius-image);
  background: var(--ph-color);
}
.rw-figure figcaption { font-size: var(--fs-meta); color: var(--color-text-muted); }
.rw-figure-wide { width: min(var(--width-article-media), calc(100vw - var(--page-gutter) * 2)); }
.rw-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.rw-gallery img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-image);
  background: var(--ph-color);
}
/* 瀑布流相册（[photos] 短代码）：按列布局，每张图保留自身比例，自然形成高低错落。
   用多列而不是网格：网格会把每行拉到同一高度（要么裁切、要么留空），就不是瀑布流了。 */
.rw-photos {
  column-count: 2;
  column-gap: var(--space-2);
}
@media (min-width: 720px) { .rw-photos { column-count: 3; } }
/* 选择器带 .rw-photos 前缀：正文里的 .prose figure 会加 margin-top，这里要压回 0 */
.rw-photos .rw-photo {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-2);
}
.rw-photos .rw-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-image);
  background: var(--ph-color);
}
.rw-photos .rw-photo figcaption {
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--color-text-muted);
}
/* 地址失效：只留占位底色，不出坏图图标；图注仍在，作者才能定位是哪一张 */
.rw-photos .rw-photo.is-failed { border-radius: var(--radius-image); }
.rw-photos .rw-photo.is-failed img { visibility: hidden; min-height: 120px; }