/* ============================================================
   鹈鹕镇村民 · 站点主样式（v4，纸墨编辑与工作区）
   阅读用留白，操作用分组；共享纸墨、品牌与可访问性规范。
   ============================================================ */

:root {
  color-scheme: light;
  --paper: #faf8f3;
  --paper-soft: #f4f1ea;
  --paper-deep: #ebe6da;
  --ink-deepest: #1f1c17;
  --ink: #2c2924;
  --ink-soft: #6c675c;
  /* faint 原来 #a39c8d，在纸色上只有 2.57:1，11~12px 的日期基本糊成一片。
     现在压到 #6b665a：纸色 5.39:1、纸灰 5.07:1、纸深 4.59:1 ——
     12px 的元信息常常落在「纸灰」底上（KPI 标签、表格）那里以前只有 4.46:1。 */
  --ink-faint: #6b665a;
  --line: rgba(31, 28, 23, 0.10);
  --line-soft: rgba(31, 28, 23, 0.05);
  /* 滚动时导航底下那条线加深一档用的（原来 JS 会加 .is-scrolled，
     但没有任何样式接住它 —— 等于白toggle 了一个类） */
  --line-strong: rgba(31, 28, 23, 0.18);
  /* accent 原来 #8a6e44 在纸色上刚好 4.50，落到 paper-deep 上只有 3.84。
     压深一档，色相不变。 */
  --accent: #836839;
  --accent-soft: rgba(138, 110, 68, 0.10);
  --accent-tint: rgba(138, 110, 68, 0.18);
  /* 这两档原来是 #5b8a5b / #b3543f：11px 的小字压在浅色药丸底上只有 3.56 / 4.37
     （物品状态「在用」「必填」标记）—— 低饱和不等于可以浅。压深一档，
     色相不变、仍然温和，量出来 ≥4.5（2026-09-30 全文扫出来的）。 */
  --success: #3f6b45;
  --success-tint: rgba(91, 138, 91, 0.12);
  --info: #5b7d8a;
  --info-tint: rgba(91, 125, 138, 0.12);
  --danger: #9c4433;
  --danger-tint: rgba(179, 84, 63, 0.08);
  /* 天气面板 AQI / 紫外线那四个"越来越糟"的档位（以前写死在规则里，
     暗色模式下几乎看不见）。1 最轻、4 最重。 */
  --sev-1: #7d5f28;
  --sev-2: #964c27;
  --sev-3: #9c4433;
  --sev-4: #7f3325;
  --shadow-color: rgba(31, 28, 23, 1);
  --shadow-card: 0 12px 28px rgba(31, 28, 23, 0.07);
  --shadow-pop: 0 8px 32px rgba(31, 28, 23, 0.08);
  --shadow-panel: 0 6px 24px rgba(31, 28, 23, 0.06), 0 1px 0 rgba(31, 28, 23, 0.04);

  /* ---------- 文字系统：五级 ----------
     Display   40 / 34 / 32 / 30 / 26    一页里最大的一两处：首页那个名字、
                                         文章大标题、归档的年份章（手机上各降一档）
     Heading   28 / 24 / 22 / 19         页面标题、区块标题、列表标题
     Body      17 / 16                   正文（阅读页 17，其余 16）
     Caption   14 / 13                   摘要、说明、按钮文字
     Metadata  12 / 11                   日期、计数、页脚、徽标

     三条纪律（tests/test_typography.py 盯着，加新样式前先看它）：
     ① 字号只能取上面这些档；不许再出现 10.5 / 13.5 / 15 这种随手写的值
       （2026-10-01 量出来全站还散着 39 处 0.5 档和 10px/15px，已经归位）；
     ② 字体族只有两套：--serif（读的）/ --sans（用的），不许引入第三套；
     ③ 档与档之间差 8%~12%，所以同一屏里不会出现「差不多大」到含糊的两行字。 */
  --fs-xs: 11px;      /* 日期、计数、页脚、备案 */
  --fs-sm: 12px;      /* 次要说明、天气面板 */
  --fs-meta: 13px;    /* 元信息、摘要、按钮文字 */
  --fs-sub: 14px;     /* 小标题、列表项 */
  --fs-base: 16px;    /* 基准 */
  --fs-read: 17px;    /* 阅读页正文 */
  --fs-title: 19px;   /* 列表标题 */
  --fs-h2: 22px;      /* 区块标题 */
  --fs-h1: 28px;      /* 页面 / 文章标题 */
  --fs-display: 48px; /* 只有错误页那个大水印用；其余「大」走上面的展示档 */

  /* ---------- 字体：全站只有两套 ----------
     ① --serif（读的）：标题、正文、摘录、引文、空状态；
     ② --sans（用的）：导航、日期、标签、按钮、表格、元信息。
     代码块另有一个等宽栈，不算「一套字体体系」。

     以前还有第三套 --kai（楷体，用在摘录 / 引文 / 空状态 48 处）。删掉它是为了
     两件事：一是「最多两套」这条纪律；二是它**在别的设备上会坏** ——
     `"Kaiti SC"` 只有 macOS / iOS 有，Windows 会落到 `cursive`，
     而 Windows 的 cursive 就是 Comic Sans MS：中文没字形、退回黑体，
     夹在中文里的英文和数字却变成 Comic Sans，同一句话两个声音。
     现在这些地方跟正文一样走 --serif，跨设备一致。
     （别再加第三个手写体：`tests/test_typography.py` 会拦。） */
  /* 西文与数字先用系统无衬线；中文回退宋体，避免 iOS 宋体数字过细。 */
  --serif: "Helvetica Neue", Arial, "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --radius: 8px;
  --max-w: 720px;
  /* 阅读页正文宽度：16~17px 的中文一行 40 字以上就偏长了，
     这里比 --max-w 窄一点，把每行收到 ~38 字。 */
  --read-w: 660px;
  --fs-article-title: 34px;
  --fs-article-mobile: 26px;
  --tap: 44px;
  --workspace-w: 1120px;
  --data-w: 960px;
  --control-h: 40px;
  --fs-page-mobile: 24px;
  --fs-hero: 40px;
  --fs-hero-mobile: 32px;

  /* ---------- 间距音阶 ----------
     和字号一样：只用这几档，别再随手写 13px / 18px / 27px。 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* ---------- 动效 ----------
     只是让页面「有反应」，不是表演：短、慢、轻。全站只用这几个值，
     并且一律包在 prefers-reduced-motion 的判断里（见文件末尾）。 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 120ms;   /* 颜色 / 透明度 */
  --dur-2: 220ms;   /* 位移 / 缩放 */
  --dur-3: 520ms;   /* 首屏进入 */

  /* 品牌色：鹈鹕的嘴与喉囊。纸墨底上只用它做极少的强调（链接 hover、
     一个小小的点、印章边框），绝不大面积铺。
     色相不变、压深一档：#b4623c 在纸色上只有 4.16:1，做 13px 的文字 hover 不够；
     现在 4.94:1（paper）/ 4.65:1（paper-soft）。 */
  --brand: #a8552f;
  --brand-soft: rgba(168, 85, 47, 0.12);
  --scrim: rgba(31, 28, 23, 0.42);
  --photo-overlay: rgba(31, 28, 23, 0.62);
  --photo-ink: #faf8f3;
  --warning: var(--sev-1);
  --warning-tint: var(--accent-soft);
}

/* ---------- 夜间（跟随系统）----------
   纸墨配色反过来：暖黑的"纸" + 米白的"墨"。只覆盖变量，
   下面所有规则不用动。想强制浅色时在 <html> 上加 data-theme="light"。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #171614;
    --paper-soft: #201e1b;
    --paper-deep: #2a2723;
    --ink-deepest: #f4f1e9;
    --ink: #ded9cf;
    --ink-soft: #a9a294;
    /* 暗色同理：纸灰底上要 ≥4.5（量到过 4.49 的边界值） */
    --ink-faint: #948d80;
    --line: rgba(240, 236, 227, 0.14);
    --line-soft: rgba(240, 236, 227, 0.07);
    --line-strong: rgba(240, 236, 227, 0.24);
    --accent: #c9a273;
    --accent-soft: rgba(201, 162, 115, 0.14);
    --accent-tint: rgba(201, 162, 115, 0.22);
    --success: #8fbe8f;
    --success-tint: rgba(143, 190, 143, 0.14);
    --info: #8fb2c0;
    --info-tint: rgba(143, 178, 192, 0.14);
    --danger: #d98a7c;
    --danger-tint: rgba(217, 138, 124, 0.14);
    --sev-1: #d3b070;
    --sev-2: #e0a077;
    --sev-3: #e2937f;
    --sev-4: #e98f78;
    --brand: #d68a5f;
    --brand-soft: rgba(214, 138, 95, 0.16);
    --scrim: rgba(0, 0, 0, 0.62);
    --photo-overlay: rgba(0, 0, 0, 0.72);
    --photo-ink: #faf8f3;
    --shadow-color: rgba(0, 0, 0, 1);
    --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-panel: 0 6px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-base);
  font-variant-numeric: lining-nums;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }

/* 选中文字：用品牌色，很浅的一层就够 */
::selection { background: var(--brand-soft); color: var(--ink-deepest); }

/* 键盘用户要看得见焦点；鼠标用户不该看到难看的方框 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* 占位符跟着站点的「最浅一档」走，别让浏览器各给各的灰度（Firefox 默认还会再叠
   一层 opacity，所以显式写 1）。对比度：亮色 5.07 / 暗色 5.05，够读。
   滚动条**故意不自定义**：macOS / iOS 的浮层滚动条本来就是「用的时候才出现」，
   再画一条反而显脏 —— 该检查的是它别出现横向滚动（量测脚本里 overflowX 必须 false）。 */
::placeholder { color: var(--ink-faint); opacity: 1; }

/* ---------- 首屏进入：只做一次，轻微上移 + 淡入 ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.reveal { animation: rise-in var(--dur-3) var(--ease) both; }
/* 同一屏里依次出现，制造一点节奏；不叠加过多，最多错开三档 */
.reveal:nth-of-type(2) { animation-delay: 70ms; }
.reveal:nth-of-type(3) { animation-delay: 140ms; }
.reveal:nth-of-type(n+4) { animation-delay: 200ms; }

/* ---------- 系统提醒条 ----------
   仪表盘 / AI 助理 / 我的数据 三处共用的一条提示（定时任务超期、模型报错、
   早报没来）。安静的左边线，不是红色警报 —— 这是自家工具，说清就行。 */
.sys-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.sys-alert {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--sev-1);
  border-radius: 3px;
  background: var(--paper-soft);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}
.sys-alert-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid var(--sev-1);
  border-radius: 50%;
  color: var(--sev-1);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.sys-alert a { color: var(--ink); border-bottom: 1px solid var(--line); }
.sys-alert a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* 「跳到正文」：平时藏起来，键盘 Tab 到它才出现。
   这是全站对键盘/读屏用户最有用的一行 —— 每个页面都要有（写在 _nav.html 里）。 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink-deepest);
  border: 1px solid var(--brand);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: var(--fs-meta);
}
.skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-3);
}

/* 按钮在 macOS 上默认是箭头光标，看着像「不能点」 */
button:not(:disabled),
a.primary-btn { cursor: pointer; }

.page-shell {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ---------- 同一站点的两种空间：阅读与操作 ---------- */
.workspace-shell { max-width: var(--workspace-w); }
.data-shell { max-width: var(--data-w); }
.workspace-shell main, .data-shell main { min-width: 0; }
/* 宽工作区不能把日记正文拉成长行。 */
.data-shell .myd-entry-text { max-width: var(--read-w); }
:where(button, input, select, textarea) { font-family: var(--sans); }
:where(input, select, textarea) { color-scheme: inherit; accent-color: var(--accent); }
:where(.primary-btn, .secondary-btn, .admin-btn, .myd-btn, .mem-btn, .aic-btn) {
  min-height: var(--control-h);
  border-radius: var(--radius);
  font-size: var(--fs-meta);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
:where(.admin-input, .myd-input, .myd-select, .mem-input, .mem-select) {
  min-height: var(--control-h);
}
:where(.admin-input, .myd-input, .myd-select, .mem-input, .mem-select):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
:where(.admin-head, .dash-head, .myd-head, .mem-head, .aic-head, .hub-hero-head) {
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
}
:where(.dash-kpi-card strong, .admin-quest-card strong, .myd-kpi-value, .mem-kpi strong) {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  :where(.primary-btn, .secondary-btn, .admin-btn, .myd-btn, .mem-btn, .aic-btn) { min-height: var(--tap); }
}

/* 线图标只用于操作入口；品牌鹈鹕继续使用自己的标记。 */
.ui-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -0.2em; }

/* ---------- 顶栏 ---------- */
.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  transition: border-color var(--dur-2) var(--ease);
}
/* 往下滚之后，那条横线加深一档 —— 「导航知道你滚了」，但不闪、不动、不粘顶 */
.site-nav.is-scrolled { border-bottom-color: var(--line-strong); }

/* ---------- 读长文的两个小机关（只在文章页出现）---------- */
/* 顶部细线：2px，品牌色，宽度跟着读到的位置走。
   用 transform: scaleX() 而不是 width，免得每帧都触发布局。 */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.read-progress > span {
  display: block;
  height: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* 回到顶部：读完一屏才淡出来，贴右下角、避开手机底部安全区 */
.to-top {
  position: fixed;
  right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.to-top svg { width: 18px; height: 18px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--brand); border-color: var(--brand); }

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  color: var(--ink-deepest);
  font-family: var(--serif);
  white-space: nowrap;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--ink-deepest);
  transition: color var(--dur-1) var(--ease);
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
/* 悬停时只有「嘴和喉囊」那部分染上品牌色——很小的一点反馈 */
.brand:hover .brand-mark { color: var(--brand); }
.brand:hover .brand-word { color: var(--ink-deepest); }
.brand-word {
  font-size: var(--fs-read);
  letter-spacing: 0.04em;
  transition: color var(--dur-1) var(--ease);
}

/* 页脚那只小鹈鹕：比导航更淡，只是个签名 */
.footer-mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  color: var(--ink-faint);
}
.footer-mark svg { width: 100%; height: 100%; display: block; }

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: transparent;
  /* 44px：拇指够得着的下限，36px 在手机上经常点空 */
  width: var(--tap);
  height: var(--tap);
  /* 按钮不继承正文字号，不写死的话会露出浏览器的 13.33px 默认值 */
  font-size: var(--fs-xs);
  border-radius: var(--radius);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.nav-toggle span {
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  /* 16px 时整行几乎没有余量，搜索框会被压到 146px、提示语差 14px 放不下；
     12px 让出约 48px，搜索框能到 190px 上下 */
  gap: 12px;
  font-family: var(--sans);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
}
.nav-links a {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color var(--dur-1) var(--ease);
}
.nav-links a:hover { color: var(--ink-deepest); }
/* 当前页：不用底色块，只用一条极细的下划线把自己标出来 */
.nav-links a[aria-current="page"] {
  color: var(--ink-deepest);
  box-shadow: inset 0 -1px 0 0 var(--brand);
}
.nav-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  /* 下限保证输入框里放得下提示文字（导航 nowrap、链接不收缩，一挤全压到这里） */
  min-width: 140px;
  max-width: 208px;
  margin-left: 2px;
}
.nav-search input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink);

}
.nav-search input:focus { border-color: var(--accent); }
/* One focus treatment: emphasize the existing field instead of a second box. */
.nav-search input:focus-visible { outline: none; border-color: var(--brand); box-shadow: inset 0 -2px var(--brand); }
.nav-search button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 6px 2px 6px 6px;
  white-space: nowrap;
}
.nav-search button:hover { color: var(--accent); }
.nav-rss {
  display: inline-flex;
  align-items: center;
  color: var(--ink-faint);
}
.nav-admin {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.nav-admin:hover {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}

/* 导航「更多」：网站管理类入口收进一个原生下拉，不写 JS 也能开合（可键盘操作） */
.nav-more {
  position: relative;
  flex: 0 0 auto;
}
.nav-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--ink-soft);
  list-style: none;
  transition: color var(--dur-1) var(--ease);
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after {
  content: "▾";
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.nav-more > summary:hover,
.nav-more[open] > summary { color: var(--ink-deepest); }
.nav-more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 172px;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.nav-more:not([open]) .nav-more-menu { display: none; }
.nav-more-menu a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--ink-soft);
  white-space: nowrap;

  min-height: var(--tap);

  display: flex;

  align-items: center;
}
.nav-more-menu a:hover {
  background: var(--paper-soft);
  color: var(--ink-deepest);
}

/* 导航上「AI 助理」旁边的小角标：有几条待处理 */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
}

/* ---------- 首页 ---------- */
.home-main {
  padding-bottom: var(--sp-6);
}

/* ---------- 客厅：左边是谁，右边此刻 ---------- */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  gap: var(--sp-7);
  align-items: start;
  padding: var(--sp-8) 0 var(--sp-7);
  border-bottom: 1px solid var(--line);
}
.home-kicker {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--sp-3);
}
/* 全站最大的一行字：不用渐变、不用阴影，靠字号和字距说话 */
.home-name {
  font-family: var(--serif);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: var(--ink-deepest);
  margin: 0 0 var(--sp-5);
}
.home-tagline {
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
  max-width: 28em;
}
.home-hero-side {
  min-width: 0;
  padding: var(--sp-3) 0 0 var(--sp-5);
  background: transparent;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--line);
}
.home-side-label {
  margin: 0 0 var(--sp-3);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--accent);
}
.home-section-index {
  margin-right: var(--sp-3);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---------- 「现在」：四条真实记录，密度低、看得快 ---------- */
.home-label {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.home-now {
  display: grid;
  grid-template-columns: var(--sp-8) minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.home-now > .home-label { padding-top: var(--sp-1); }
.now-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-7);
  margin: 0;
}
.now-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: baseline;
  min-width: 0;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.now-item dt {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.now-item dd {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: var(--fs-sub);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-item dd a { border-bottom: 1px solid var(--line); }
.now-item dd a:hover { color: var(--accent); border-color: var(--accent); }

/* 「此刻」那一句：站长自己写的，跟另外四项（从数据里自动抓的）分开 ——
   占满两列、用衬线、允许换行，读起来像一句手记而不是又一条状态。
   其余四项在桌面分列、手机并回短行。 */
.now-item--note {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom-color: var(--line);
}
.now-item--note dd {
  font-family: var(--serif);
  font-size: var(--fs-read);
  color: var(--ink-deepest);
  line-height: 1.75;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.now-meta {
  display: block;
  margin-top: var(--sp-1);
  margin-left: 0;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.now-item--note .now-meta { display: inline; margin-left: var(--sp-2); }

/* ---------- 书影音：三个入口排成一行，不用卡片 ---------- */
.home-shelf { margin-top: var(--sp-7); }
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.shelf-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  border-top: 1px solid var(--line);
  transition: border-color var(--dur-1) var(--ease);
}
.shelf-item::after {
  content: "↗";
  position: absolute;
  right: 0;
  top: var(--sp-5);
  font-family: var(--sans);
  color: var(--accent);
}
.shelf-item:hover { border-top-color: var(--brand); }
.shelf-name {
  font-family: var(--serif);
  font-size: var(--fs-title);
  color: var(--ink-deepest);
}
.shelf-item:hover .shelf-name { color: var(--accent); }
.shelf-note {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* 手机端：首屏要「一眼看全」，所以客厅改单列、标签在上，别把两栏压扁 */
@media (max-width: 720px) {
  /* 导航里的站点名是「回首页」，手机上也要够点 */
  .brand { min-height: 44px; }
  /* 手机菜单里的搜索框也放大到 16px：iOS 聚焦更小的输入框会整页缩放 */
  .nav-search input { font-size: var(--fs-base); min-height: 44px; }
  .home-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-6);
  }
  .home-hero-side {
    padding: var(--sp-3) 0 0;
    border-top: 1px solid var(--accent);
    border-left: 0;
  }
  .home-name { font-size: var(--fs-hero-mobile); margin-bottom: var(--sp-3); }
  .home-tagline { max-width: none; }
  .home-now { display: block; margin-top: var(--sp-5); padding-bottom: var(--sp-4); }
  .now-grid { grid-template-columns: 1fr; gap: var(--sp-2); margin-top: var(--sp-4); }
  .now-item { flex-direction: row; gap: var(--sp-3); }
  .now-meta { display: inline; margin-left: var(--sp-2); }
  .now-item dd { white-space: normal; }
  .shelf-grid { grid-template-columns: 1fr; gap: 0; }
  .shelf-item { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* ---------- 首页「照片」：看一眼就够了，点进去才是展厅 ----------
   这一格是**索引**不是展览，所以固定 4:3、允许裁切 —— 六张排整齐才看得清
   「这里最近有过哪些照片」。真正的展览在 /photos：不裁切、一屏一件。 */
.home-photos { margin-top: var(--sp-7); }
.home-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.home-photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-soft);
  border-radius: 2px;
}
.home-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-1) var(--ease);
}
.home-photo:hover img { opacity: 0.86; }

.home-date {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  margin: 0 0 var(--sp-3);
  letter-spacing: 0.04em;
}
.home-date > span:first-child { display: block; }
.home-lunar {
  display: inline-block;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.home-quote {
  font-family: var(--serif);
  color: var(--ink-soft);
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.9;
  max-width: 44ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.home-quote-text {
  white-space: normal;
  /* 古诗偶尔很长，最多两行，别把首页第一屏挤满 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-quote-attribution {
  max-width: 100%;
  font-size: var(--fs-sub);
  line-height: 1.6;
  color: var(--ink-faint);
  white-space: normal;
  overflow-wrap: anywhere;
}
.home-quote-author,
.home-quote-title {
  white-space: inherit;
}
/* 窄屏允许署名换行，避免长书名溢出右侧 */
@media (max-width: 720px) {
  .home-quote-attribution {
    white-space: normal;
  }
}

.home-section { margin-top: var(--sp-7); }
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-strong);
}
.home-section-head h2 {
  /* 区块标题统一成「安静的小字标签」：层级靠间距和字号，不靠加粗放大 */
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin: 0;
  color: var(--ink-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-more {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.home-empty,
.empty-state {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--ink-soft);
  /* 空状态不是「一个虚线框」——一句话，两边各一条发丝线，安静地说这里暂时没有东西 */
  padding: var(--sp-5) 0 var(--sp-4);
  margin: 0 0 var(--sp-5);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* ---------- 分页 ---------- */
.pagination {
  width: 100%;
  margin: 36px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--sans);
}
.pagination-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pagination-btn,
.pagination-pages a,
.pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pagination-btn {
  border-color: var(--line);
  padding: 0 16px;
}
.pagination-pages a:hover,
.pagination-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pagination-pages a:hover {
  background: var(--accent-soft);
}
.pagination-current {
  background: var(--ink-deepest);
  border-color: var(--ink-deepest);
  color: var(--paper);
}
.pagination-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.pagination-ellipsis {
  color: var(--ink-faint);
  padding: 0 4px;
}

/* ---------- 日志列表 ---------- */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.post-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: baseline;
}
.post-row:last-child { border-bottom: 0; }
.post-row-date {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.post-row-link {
  font-family: var(--serif);
  color: var(--ink-deepest);
  font-size: var(--fs-read);
}
.post-row-link:hover { color: var(--accent); }
.post-row-excerpt {
  grid-column: 2;
  font-family: var(--serif);
  color: var(--ink-soft);
  margin: 4px 0 0;
  font-size: var(--fs-sub);
}
/* 正文命中时的摘句：比摘要更"次要"一点，让标题仍然是主角 */
.post-row-snippet {
  grid-column: 2;
  font-family: var(--serif);
  color: var(--ink-soft);
  margin: 2px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.75;
}

/* ---------- 首页日志列表 ----------
   一期一篇「头条」（.post-item--lead：整幅照片 + 大一号标题），其余是安静的短行：
   日期（固定 92px 左对齐）│ 正文 │ 小照片（可选，行尾）。
   有照片没照片，日期和标题的左边缘都对齐；没有照片就不占地、也不用占位图。 */
.post-list--home { margin-top: 0; }
.post-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas: "date body";
  align-items: start;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
/* 有缩略图时才多出第三列（:has 不被支持时最坏情况是右侧留白，不影响对齐） */
.post-item:has(.post-item-thumb) {
  grid-template-columns: 92px minmax(0, 1fr) 112px;
  grid-template-areas: "date body thumb";
}
.post-item:first-child { padding-top: 4px; }
.post-item:last-child { border-bottom: 0; padding-bottom: 4px; }

/* 头条：不是网格，照片在上面铺满整栏，下面的字按编辑排版落下来 */
.post-item--lead {
  display: block;
  padding: var(--sp-4) 0 var(--sp-7);
}
.post-lead-cover {
  display: block;
  margin-bottom: var(--sp-4);
  background: var(--paper-soft);
  overflow: hidden;
  /* 照片不套圆角、不加阴影：它是生活痕迹，不是卡片 */
}
.post-lead-cover img {
  display: block;
  width: 100%;
  /* 不再把每张照片都塞进同一个 16:10 的框里：竖图、方图、宽幅保留自己的比例，
     只有特别高的时候夹一个上限（手机上不出屏、桌面不出 520px）。
     这样头条照片是「一张生活痕迹」，而不是一条统一的横幅 —— 统一比例最像模板。 */
  height: auto;
  max-height: min(70vh, 520px);
  object-fit: cover;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.post-item--lead:hover .post-lead-cover img { opacity: 0.94; transform: scale(1.01); }
.post-item-date--lead {
  display: block;
  padding-top: 0;
  margin-bottom: 6px;
}
.post-item-title--lead {
  /* 头条标题比列表标题大一档，但离首页名字（40px）还很远 */
  font-size: var(--fs-h2);
  line-height: 1.35;
  margin-bottom: var(--sp-2);
}
.post-item--lead .post-item-excerpt { font-size: var(--fs-read); }
/* 头条的导语多给一行：它是这一期的开场白，不该跟列表摘要一样被截成两行 */
.post-item--lead .post-item-excerpt { -webkit-line-clamp: 3; }
.post-item--lead .post-item-title a:hover,
.post-item--lead .post-item-title a:focus-visible { color: var(--brand); }

.post-item-date {
  grid-area: date;
  padding-top: 6px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.post-item-body {
  grid-area: body;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.post-item-thumb {
  grid-area: thumb;
  display: block;
  width: 112px;
  /* 固定 4:3、上边对齐日期：照片再也不会被文字高度拉成奇怪的形状 */
  aspect-ratio: auto;
  background: none;
  align-self: start;
  overflow: hidden;
  background: var(--paper-soft);
}
.post-item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-2) var(--ease);
}
.post-item:hover .post-item-thumb img { opacity: 0.9; }
.post-item-title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.45;
}
.post-item-title a { color: var(--ink-deepest); }
.post-item-title a:hover { color: var(--accent); }
.post-item-excerpt {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink-soft);
  font-size: var(--fs-sub);
  line-height: 1.7;
  /* 诗是分行写的：保留换行，最多显示两行 */
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-item-tags {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
}
.post-item-tags a {
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.post-item-tags a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* 纯文字目录版式（首页 ?layout=plain）：不要缩略图，所有文字严格对齐在两条竖线上 */
.layout-plain .post-item { grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "date body"; }
.layout-plain .post-item-thumb { display: none; }
.layout-plain .post-lead-cover { display: none; }
.layout-plain .post-item--lead { padding: 16px 0; }
.layout-plain .post-item-title--lead { font-size: var(--fs-title); }
.layout-plain .post-item-excerpt { font-size: var(--fs-meta); }


/* ---------- 日志详情 ---------- */
.subpage-body { background: var(--paper); }
.subpage-main { padding-bottom: 64px; }
/* 文章落款之后只留一段间距，避免正文与页脚的留白叠加。 */
.article-main { padding-bottom: var(--sp-4); }
.article-main + .site-footer { margin-top: var(--sp-5); }
.subpage-hero {
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.subpage-kicker {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.subpage-title {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink-deepest);
  letter-spacing: 0.02em;
}
.subpage-sub {
  font-family: var(--sans);
  font-size: var(--fs-sub);
  color: var(--ink-soft);
  margin: 0;
}

.search-page-form {
  display: flex;
  gap: 10px;
  margin: 24px 0 8px;
}
.search-page-form input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-family: var(--serif);
  font-size: var(--fs-base);
  color: var(--ink);

}
.search-page-form input:focus { border-color: var(--accent); }
.search-section { margin-top: 42px; }

.article-head {
  /* 从「居中模板头」改成编辑设计的左对齐：日期在上、标题最大、导语收一行 */
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.article-date {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin: 0 0 var(--sp-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.article-title {
  font-family: var(--serif);
  /* 全站第二大的字：只比首页名字小一档，让文章标题真正立住 */
  font-size: var(--fs-article-title);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 var(--sp-4);
  color: var(--ink-deepest);
  line-height: 1.35;
}
.article-excerpt {
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0;
}
.article-body {
  font-family: var(--serif);
  /* 阅读页正文比基准大一档：16px 时一行 42 个字，17px 收到 ~39 字 */
  font-size: var(--fs-read);
  color: var(--ink);
  line-height: 1.85;
}
/* 日志详情整列（标题 / 封面 / 正文 / 页脚）一起收窄，保证左边界对齐 */
.article {
  max-width: var(--read-w);
  margin: 0 auto;
}
.article-body h1, .article-body h2, .article-body h3 {
  font-weight: 500;
  color: var(--ink-deepest);
  margin: var(--sp-7) 0 var(--sp-4);
  line-height: 1.5;
}
.article-body h1 { font-size: var(--fs-h2); }
.article-body h2 { font-size: var(--fs-title); }
.article-body h3 { font-size: var(--fs-read); }
.article-body p { margin: var(--sp-5) 0; }
.article-body > :first-child { margin-top: 0; }
.article-body blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-3) var(--sp-5);
  background: var(--paper-soft);
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
  font-family: var(--serif);
}
.article-body code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--paper-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
.article-body pre {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-meta);
  line-height: 1.6;
}
.article-body pre code { background: transparent; padding: 0; }
.article-body ul, .article-body ol { padding-left: 22px; margin: 14px 0; }
.article-body li { margin: 4px 0; }
.article-body .md-table {
  margin: 20px 0;
  /* 表格比正文宽时自己横向滚动，别把整页撑破（手机上是常态） */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-body table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: var(--fs-sub);
  line-height: 1.6;
}
.article-body th, .article-body td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.article-body th {
  background: var(--paper-soft);
  color: var(--ink-deepest);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- 诗体 ----------
   诗是分行写的，而原稿里每行之间都空了一行，于是每行都渲染成独立的 <p>，
   结果「行距」和「段距」一样宽（都是 14px），读起来散，也分不出分节。
   _render_markdown() 认出这种内容后会套一个 .md-verse：
   行与行贴着行高排，分节交给 `---`（渲染成 <hr>）。
   注意：这条必须写在 .article-body p 之后，两者 specificity 相同，靠顺序取胜。 */
.md-verse { line-height: 1.95; }
.md-verse p { margin: 0.12em 0; }
.md-verse p:first-child { margin-top: 0; }
.md-verse p:last-child { margin-bottom: 0; }
.md-verse hr { margin: 22px auto; border-top-color: var(--line-soft); }
.md-verse h1, .md-verse h2, .md-verse h3 { margin: 24px 0 10px; }
.article-body img {
  display: block;
  margin: var(--sp-6) 0;
  /* 同上：正文里的照片也别做成「圆角卡片」 */
  border-radius: 2px;
  /* 单张插图与正文共用版心，保留原比例。 */
  width: 100%;
  /* 显式 auto：`width` / `height` 属性一旦在场，浏览器会把它当成一条
     「表现性提示」的 height 用；作者样式里写死 auto，最终尺寸才完全由这里的
     规则说了算 —— 而**留位置**靠的是浏览器从这两个属性算出的宽高比，不受影响。 */
  height: auto;
  max-width: 100%;
  max-height: none;
}

/* 正文里的照片 + 图注（整行一张图、且 Markdown 的说明非空时才生成）。
   图注是「生活痕迹」的注脚，不是说明文：小一号的 sans、跟图同宽居中、
   和照片之间留一点吸气的位置。没写说明就不生成这一块 —— 不硬凑。 */
.article-body .body-figure {
  margin: var(--sp-6) 0;
}
.article-body .body-figure img {
  margin: 0;
}

/* 并排的照片（Markdown 里同一行放两三张）：一张是大图，两三张就是小图 ——
   一页里因此有了大小的节奏，而不是每张都占满整栏。 */
.article-body .body-gallery {
  display: grid;
  gap: var(--sp-3);
  align-items: start;
  margin: var(--sp-6) 0;
}
.article-body .body-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-body .body-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-body .body-gallery .body-figure { margin: 0; }
.article-body .body-gallery img {
  width: 100%;
  max-height: none;
  margin: 0;
}
.article-body .body-gallery figcaption {
  margin-top: 6px;
  text-align: left;
  line-height: 1.5;
}

/* 图注开头那个日期：像报头那样立一下，剩下的字照旧是安静的灰 */
.article-body figcaption time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.article-body figcaption {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-faint);
  text-align: left;
  letter-spacing: 0.02em;
}
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.article-body a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
.article-body a:hover { border-bottom-color: var(--accent); }

.article-foot {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}
.back-link { color: var(--ink-soft); }

/* 文章落款：小鹈鹕 + 站点名 + 日期，安静地收尾 */
.article-sign {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
/* 印章：一枚朱红小方印，里面一个「鹈」。
   和 og-default.png / app 图标上那枚印章是同一个记号 ——
   方形图标家族走印章，线条鹈鹕（favicon、导航、页脚）走主标记，别混用。 */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--brand);
  border-radius: 3px;
  color: var(--brand);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
  /* 兜底：不同系统的「鹈」字宽窄不一样，别让它把方框撑变形 */
  overflow: hidden;
  /* 印章是「盖」上去的，跟文字差半个像素反而更像印出来的 */
  padding-bottom: 1px;
  user-select: none;
}
.seal--lg { width: 30px; height: 30px; font-size: 20px; border-radius: 4px; }
.article-sign .back-link {
  margin-left: auto;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.article-sign .back-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- 接着读 ---------- */
.article-related {
  margin: 32px 0 24px;
}
.article-related-title {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.article-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-related-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.article-related-list li:last-child { border-bottom: 0; }
.article-related-link {
  font-family: var(--serif);
  font-size: var(--fs-read);
  color: var(--ink-deepest);
}
.article-related-link:hover { color: var(--accent); }
.article-related-date {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* ---------- 归档 ---------- */
.archive-list {
  margin-top: var(--sp-5);
}
/* 年份：一章的标题 —— 大字 + 篇数 + 一条横线，不再是孤零零一个数字 */
.archive-year {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-deepest);
  margin: var(--sp-7) 0 var(--sp-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.archive-year::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  transform: translateY(-4px);
}
.archive-year-count {
  order: 3;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
/* 「作品年表」上的那一张：年份 → 横线 → 篇数 → 那年最近的一张照片。
   order 4 让它排在篇数之后；align-self 居中，免得 30px 的行盒被图片顶高。
   缩略图统一 3:2 裁切（它只有指甲盖大，裁切才排得齐）。 */
.archive-year-thumb {
  order: 4;
  align-self: center;
  width: 48px;
  height: 32px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--paper-soft);
}
.archive-year:first-child { margin-top: var(--sp-4); }
/* 月份不再是「圆角卡片」，是贴在一条细时间线上的小节 */
.archive-month {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  margin-left: 2px;
}
.archive-month[open] { padding-bottom: var(--sp-4); }
.archive-month-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  margin: 0;
  padding: 2px 0;
  transition: color var(--dur-1) var(--ease);
}
.archive-month-head:hover { color: var(--ink-deepest); }
.archive-month-head::-webkit-details-marker { display: none; }
.archive-month-label { letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.archive-month-count { font-size: var(--fs-xs); color: var(--ink-faint); }
.archive-month-entries {
  list-style: none;
  padding: var(--sp-2) 0 0;
  margin: 0;
}
.archive-month-entries li {
  display: flex;
  gap: var(--sp-4);
  padding: 8px 0;
  font-family: var(--serif);
  /* 归档是拿来读标题的：16px 比 14px 读起来稳，一行也不会太长 */
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--line-soft);
}
.archive-month-entries li:last-child { border-bottom: 0; }
.archive-month-entries a {
  transition: color var(--dur-1) var(--ease);
}
.archive-month-entries a:hover { color: var(--brand); }
.archive-month-entries time {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  flex: 0 0 60px;
}

/* ---------- 书影音：编辑式列表（不是卡片墙）----------
   读书 / 影展 / 游戏 是同一件事的三个面：页签 + 一条时间线。
   封面是「书脊」不是卡片，只有发丝分隔线和留白，没有圆角、没有阴影、没有底色块。 */
.shelf-tabs {
  display: flex;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.shelf-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 0 10px;
  margin-bottom: -1px;
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.shelf-tab:hover { color: var(--ink); }
.shelf-tab.is-current { color: var(--ink-deepest); border-bottom-color: var(--brand); }
.shelf-tab-num {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.shelf-overview {
  margin-bottom: var(--sp-6);
  padding-block: var(--sp-5);
  border-block: 1px solid var(--line-strong);
}
.shelf-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.shelf-chart-head h2 { margin: 0; font: 400 var(--fs-base)/1.5 var(--serif); }
.shelf-chart-total { color: var(--ink-faint); font: var(--fs-sm)/1.5 var(--sans); }
.shelf-overview-note { color: var(--ink-faint); font: var(--fs-xs)/1.75 var(--sans); margin: var(--sp-2) 0 0; }
.shelf-chart-scroll { overflow-x: auto; }
.shelf-chart {
  --chart-years: 1;
  position: relative;
  min-width: calc(var(--sp-6) * var(--chart-years) + var(--sp-6));
  padding: var(--sp-6) var(--sp-3) var(--sp-6) var(--sp-6);
}
.shelf-chart-plot { position: relative; height: calc(var(--sp-8) * 2); }
.shelf-chart-line { display: block; width: 100%; height: 100%; overflow: visible; }
.shelf-chart-line polyline { fill: none; stroke: var(--accent); stroke-width: 2; }
.shelf-chart-guide { stroke: var(--line); stroke-width: 1; }
.shelf-chart-axis { position: absolute; inset: var(--sp-6) auto var(--sp-6) 0; width: var(--sp-5); }
.shelf-chart-axis span { position: absolute; right: 0; transform: translateY(-50%); color: var(--ink-faint); font: var(--fs-xs)/1 var(--sans); }
.shelf-chart-point {
  position: absolute;
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--paper);
  transform: translate(-50%, -50%);
}
.shelf-chart-value {
  position: absolute;
  bottom: calc(100% + var(--sp-2));
  left: 50%;
  transform: translateX(-50%);
  font: var(--fs-sm)/1 var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.shelf-chart-year {
  position: absolute;
  top: calc(100% + var(--sp-3));
  transform: translateX(-50%);
  color: var(--ink-faint);
  font: var(--fs-xs)/1 var(--sans);
}
.shelf-year-count {
  margin-left: var(--sp-3);
  color: var(--ink-faint);
  font: var(--fs-sm)/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* 年份、日期、数量统一用系统数字，避免衬线旧式数字高低错落。
   明确指定 lining 与 tabular；日期不要继承编辑标题的额外字距。 */
.home-date,
.now-meta,
.post-item-date,
.article-date,
.article-related-date,
.shelf-tab-num,
.shelf-meta,
.shelf-chart-total,
.shelf-chart-axis,
.shelf-chart-value,
.shelf-chart-year,
.shelf-year-count,
.archive-year-count,
.archive-month-label,
.archive-month-count,
.archive-month-entries time,
.pagination,
.footer-copy {
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}

.shelf-list { list-style: none; padding: 0; margin: 0; }
.shelf-year {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-deepest);
  margin: var(--sp-7) 0 var(--sp-3);
}
.shelf-year:first-child { margin-top: 0; }

/* 注意：首页「书架」那三个入口用的是 .shelf-item（见文件上方），
   这里是书影音页的列表行，必须另起一个名字，否则两处会互相污染。 */
.shelf-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-soft);
}
.shelf-cover {
  display: block;
  width: 96px;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper-soft);
}
/* 游戏与书、电影共用 2:3 竖幅及列宽；方形和横幅原图居中裁切。 */
.shelf-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: opacity var(--dur-2) var(--ease);
}
.shelf-row--game .shelf-cover img { object-fit: cover; }
.shelf-cover:hover img { opacity: 0.82; }
.shelf-no-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ink-faint);
  background: var(--paper-deep);
}

.shelf-body { min-width: 0; }
.shelf-title {
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 6px;
  color: var(--ink-deepest);
}
.shelf-title a { transition: color var(--dur-1) var(--ease); }
.shelf-title a:hover { color: var(--brand); }
.shelf-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin: 0 0 var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.shelf-stars { letter-spacing: -0.02em; }
.shelf-stars-on { color: var(--brand); }
.shelf-stars-off { color: var(--line); }
.shelf-kind {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}
.shelf-intro {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shelf-quote {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line);
  font-family: var(--serif);
  font-size: var(--fs-meta);
  line-height: 1.8;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shelf-quote p { margin: 0; }
/* 搜索结果里更紧凑：封面退到 64px，让结果条数先读得出来 */
.shelf-list--compact .shelf-row {
  grid-template-columns: 64px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}
.shelf-list--compact .shelf-cover { width: 64px; }
.shelf-list--compact .shelf-title { font-size: var(--fs-sub); }

/* ---------- 关于 ----------
   一段自述 + 几行真数字。没有卡片、没有图标墙：分节靠留白和一条发丝线。 */
.about-hero {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.about-title {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-deepest);
  margin: 0 0 var(--sp-2);
}
.about-lede {
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34em;
}
.about-section { margin-top: var(--sp-7); }
.about-h {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin: 0 0 var(--sp-4);
}
.about-body { font-size: var(--fs-read); }
.about-body p:first-child { margin-top: 0; }
.about-p {
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 var(--sp-4);
  max-width: 34em;
}
.about-index { margin: 0; }
.about-index-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-soft);
}
.about-index-row:last-child { border-bottom: 1px solid var(--line-soft); }
.about-index dt {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.about-index dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: baseline;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--ink);
}
.about-index dd a { border-bottom: 1px solid var(--accent-soft); }
.about-index dd a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.about-note {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* ---------- 照片展厅 ----------
   日志是「按篇读」，照片是「按张看」：同一批素材的两种观看方式。
   这里是展览，所以**不裁切** —— 竖构图就让它竖着，方构图就让它方着，
   每张照片底下是日期 + 一句图注（图注来自 Markdown 的 alt，没写就不显示）。
   列表小图那种固定 4:3 的盒子是「索引」，刻意留给首页那一格，
   别把裁切带进展厅里来。 */
.photo-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-6);
}
.photo-item { margin: 0; }
.photo-frame {
  /* 照片还没到之前先占住这块底：它是一张纸，不是一块 UI 组件 */
  background: var(--paper-soft);
}
.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  /* 照片是生活痕迹，不是 UI 组件：只留一点点圆角，也不加阴影 */
  border-radius: 2px;
}
.photo-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--ink-faint);
}
.photo-caption time { letter-spacing: 0.04em; }
.photo-caption-text {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--ink-soft);
}
.photo-source {
  margin: var(--sp-2) 0 0;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.photo-source a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--accent-soft);
}
.photo-source a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- 物品卡片网格 ---------- */
.thing-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.thing-card:hover {
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-card);
}
.thing-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}
.thing-card-name {
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 500;
  margin: 0;
  color: var(--ink-deepest);
  line-height: 1.4;
}
.thing-card-note {
  font-family: var(--serif);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.65;
}
.thing-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.thing-status--in_use {
  color: var(--success);
  background: var(--success-tint);
}
.thing-status--idle {
  color: var(--accent);
  background: var(--accent-soft);
}
.thing-status--lent {
  color: var(--info);
  background: var(--info-tint);
}
.thing-status--gone {
  color: var(--ink-faint);
  background: var(--paper-deep);
}

/* ---------- 页脚 ---------- */
.site-footer {
  margin-top: 64px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: 0.04em;
}
.site-footer p { margin: 4px 0; }
/* 页脚的落款：中文名是「名字」，英文名是「字标」——
   一个走衬线、字距松一点；一个小一号走无衬线，像印在角落的拉丁文。 */
.footer-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 8px;
  line-height: 1.4;
}
.footer-word-cn {
  font-family: var(--serif);
  font-size: var(--fs-meta);
  color: var(--ink);
  letter-spacing: 0.1em;
}
.footer-word-sep { color: var(--ink-faint); }
.footer-word-en {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  letter-spacing: 0.14em;
}
.footer-copy { color: var(--ink-faint); }
/* 页脚链接原来只有 23×13px，手机上很难点准：给足纵向内边距，
   视觉上仍是普通的一行字，手指却有三倍多的落点。 */
.footer-links a, .footer-beian a {
  display: inline-block;
  /* 手机上照着拇指量过：一屏内所有页脚链接都 ≥ 44px 高（原来 37px） */
  padding: 13px 6px;
  margin: 0 -3px;
}
/* 站长自己的登录入口：和别的页脚链接同一排，颜色再轻一档 ——
   访客不需要注意到它（美术馆门口不摆员工通道）。 */
.footer-admin-link { color: var(--ink-faint); }
.footer-links, .footer-beian { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2px; }
.footer-links span[aria-hidden], .footer-beian span[aria-hidden] { color: var(--ink-faint); }
.footer-beian { color: var(--ink-faint); font-size: var(--fs-xs); }
.footer-beian a { color: var(--ink-faint); }
.footer-beian .footer-security {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;
}
.footer-security img { width: var(--sp-4); height: auto; flex-shrink: 0; }

/* ---------- 登录 ---------- */
.auth-body { background: var(--paper); }
.auth-main {
  max-width: 360px;
  margin: 64px auto;
}
.auth-title {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--ink-deepest);
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}
.auth-error {
  background: var(--danger-tint);
  border-left: 2px solid var(--danger);
  padding: 8px 12px;
  color: var(--danger);
  font-family: var(--serif);
  font-size: var(--fs-meta);
  margin: 0 0 16px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.auth-form input {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--serif);
  font-size: var(--fs-base);
  color: var(--ink);

}
.auth-form input:focus { border-color: var(--accent); }
.primary-btn {
  border: 0;
  background: var(--ink-deepest);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.primary-btn:hover { background: var(--accent); }
/* ---------- 中等屏幕优化 ---------- */

/* ---------- 中文排版的细节 ----------
   text-spacing-trim 会把行首、行尾的全角标点"咬"掉一半，
   中文正文读起来左右更齐。浏览器不支持就整条忽略，没有副作用。 */
@supports (text-spacing-trim: space-first) {
  .article-body,
  .myd-entry-text {
    text-spacing-trim: space-first;
  }
}

/* ---------- 尊重「减少动态效果」----------
   系统里开了这个开关的用户（前庭敏感）会晕动效与平滑滚动。 */
/* 减少动态效果：唯一的兜底，写在文件最后 —— 前面不要再写第二份
   （2026-09-30 清重复时发现写了两遍，后一份 0.001ms 一直盖着前一份 0.01ms） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
@media (max-width: 900px) {
  .nav-links { gap: 14px; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .page-shell { padding: 0 16px; }
  .site-nav { padding: 16px 0 12px; margin-bottom: 24px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% - 4px);
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 18px;
    gap: 10px;
    box-shadow: var(--shadow-pop);
    z-index: 50;
    /* 下拉菜单的宽度原本由链接文字撑出来（约 70px），
       里面的搜索框跟着被挤扁，提示文字显示不全 —— 给一个下限 */
    min-width: 236px;
  }
  .nav-links.is-open { display: flex; }
  .nav-search {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
  }
  .nav-search input { flex: 1 1 auto; width: auto; }
  /* 手机上下拉导航本身就是弹层，里面的「更多」不再绝对定位，跟着往下排 */
  .nav-more { position: static; width: 100%; }
  .nav-more-menu {
    position: static;
    min-width: 0;
    padding: 4px 0 2px 12px;
    border: 0;
    box-shadow: none;
  }
  .nav-more-menu a { display: block; width: 100%; }
  .post-row { grid-template-columns: 1fr; gap: 4px; }
  .post-row-excerpt { grid-column: 1; }
  /* 手机上标题不跟着缩太多：文章标题 26px 仍要是「这一页最大的东西」 */
  .article-title { font-size: var(--fs-article-mobile); }
  /* 三张一排的照片在手机上挤成两张一行，最后一张独自占满一行 */
  .article-body .body-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-body .body-gallery--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .subpage-title { font-size: 24px; }
  .archive-year { font-size: 26px; margin-top: var(--sp-6); }
  .archive-month { padding-left: var(--sp-3); }
  .archive-month-entries li { gap: var(--sp-3); }
  .archive-month-entries time { flex: 0 0 28px; }
  .article-sign { flex-wrap: wrap; }
  .article-sign .back-link { margin-left: 0; }
}

@media (max-width: 560px) {
  /* 手机上像「一本本翻」：封面小一点，字和短评先读得出来 */
  .shelf-row { grid-template-columns: 72px 1fr; gap: var(--sp-4); padding: var(--sp-4) 0; }
  .shelf-cover { width: 72px; }
  .shelf-title { font-size: var(--fs-base); line-height: 1.5; }
  .shelf-intro { font-size: var(--fs-sub); }
  .shelf-quote { font-size: var(--fs-sub); }
  .shelf-meta { font-size: var(--fs-sm); }
  .shelf-chart-axis span,
  .shelf-chart-year { font-size: var(--fs-sm); }
  .shelf-chart-value { font-size: var(--fs-meta); }
  .shelf-year { font-size: 20px; margin-top: var(--sp-6); }
  .about-title { font-size: 24px; }
  .about-index-row { grid-template-columns: 72px 1fr; gap: var(--sp-3); }
}


/* ============================================================
   首页日期栏天气 chip（v2：无外框、更轻）
   变更：
   - 按钮 appearance: none，去掉 Safari 默认边框 / 灰色背景
   - 展开态不再加背景框，只让 ▾ 旋转
   - 面板去掉 border，仅靠阴影区分
   - 行间分隔线改为留白
   ============================================================ */
.home-weather {
  display: inline-block;
  position: relative;
  margin-left: 6px;
  vertical-align: baseline;
}
.home-weather[hidden] { display: none; }

.home-weather-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 2px 4px;
  margin: 0;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: 0.04em;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease;
}
.home-weather-chip:hover { color: var(--ink-deepest); }
.home-weather-chip:focus {  }
.home-weather-chip:focus-visible {
  outline: 1px dashed var(--ink-faint);
  outline-offset: 2px;
}

.home-weather-icon {
  font-size: var(--fs-meta);
  line-height: 1;
  position: relative;
  top: 1px;
}
.home-weather-temp {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-meta);
  color: inherit;
}
.home-weather-sep {
  color: var(--ink-faint);
  margin: 0 1px;
}
.home-weather-city {
  color: var(--ink-soft);
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.home-weather-caret {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  transition: transform 0.18s ease;
  margin-left: 1px;
  position: relative;
  top: -1px;
}
.home-weather-chip[aria-expanded="true"] .home-weather-caret {
  transform: rotate(180deg);
}

/* 入场动画形成独立层叠上下文，展开时整个首栏需高于后续区块。 */
.home-hero:has(.home-weather-chip[aria-expanded="true"]) {
  position: relative;
  z-index: 41;
}

/* ---------- 展开面板：实底纸面，独立于风景背景 ---------- */
.home-weather-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 40;
  box-sizing: border-box;
  width: 320px;
  max-width: calc(100vw - var(--sp-6));
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--ink);
  text-align: left;
  letter-spacing: normal;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.home-weather-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.home-weather-panel[hidden] {
  display: none;
}

/* 顶部一行：图标 + 描述 + 大温度 */
.hw-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.hw-row .hw-icon {
  font-size: var(--fs-h2);
  line-height: 1;
}
.hw-row .hw-desc {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--ink-deepest);
  flex: 1;
}
.hw-row .hw-temp-big {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  color: var(--ink-deepest);
  font-weight: 500;
}
.hw-row .hw-temp-unit {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-left: 1px;
  font-weight: 400;
}

/* 指标网格 */
.hw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 0;
}
.hw-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hw-cell dt {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin: 0;
}
.hw-cell dd {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-meta);
  color: var(--ink-deepest);
}
.hw-cell--good  dd { color: var(--success); }
.hw-cell--ok    dd { color: var(--ink-deepest); }
.hw-cell--warn  dd { color: var(--sev-1); }
.hw-cell--bad   dd { color: var(--sev-2); }
.hw-cell--worse dd { color: var(--sev-3); font-weight: 500; }
.hw-cell--worst dd { color: var(--sev-4); font-weight: 600; }

.hw-hint {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-family: var(--serif);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* ---------- 响应式：移动端面板 ---------- */
@media (max-width: 560px) {
  .home-weather-panel {
    left: -8px;
  }
  .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   2026-09 新增：标签 / 搜索高亮 / 封面图 / 相邻日志 / 错误页
   ============================================================ */

/* 只给屏幕阅读器 / 搜索引擎看的小标题 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  /* 屏幕阅读器专用：固定成音阶里的一级，别让 h1 的默认 32px 混进统计 */
  font-size: var(--fs-base);
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 搜索命中高亮（服务端已经转义过，只加 mark 标签） */
mark {
  background: var(--accent-tint);
  color: var(--ink-deepest);
  padding: 0 2px;
  border-radius: 3px;
}

/* 页脚第二行：标签 / 归档 / RSS / 联系 */
.footer-links {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}
.footer-links a { color: var(--ink-faint); }
.footer-links a:hover { color: var(--accent); }

/* ---------- 标签 ---------- */
.tag-cloud {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 4px 0 28px;
}
/* 标签页：像书后的索引，不是一屏药丸 —— 一列列「名字 + 篇数」，行间发丝线 */
.tag-index {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-7);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  column-gap: var(--sp-6);
}
.tag-index-item { border-top: 1px solid var(--line-soft); }
.tag-index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 0;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--ink);
  transition: color var(--dur-1) var(--ease);
}
.tag-index a:hover { color: var(--brand); }
.tag-index-count {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.tag-index-item.is-active a,
.tag-index-item.is-active .tag-index-count { color: var(--brand); }

/* 文章页脚上的标签：一行安静的小字，不做药丸（.tag-chip 留给后台的筛选按钮） */
.tag-link {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tag-link:hover { color: var(--brand); border-bottom-color: var(--brand); }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  background: var(--paper-soft);
}
.tag-chip:hover,
.tag-chip.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tag-count { font-size: var(--fs-xs); color: var(--ink-faint); }
.tag-chip.is-active .tag-count { color: var(--accent); }
.tag-chip--small { padding: 1px 8px; font-size: var(--fs-xs); }
.article-tags {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- 正文头图 ----------
   与正文共享整列版心，保留原比例；竖图不再缩成居中的窄条。 */
.article-cover { margin: 0 0 var(--sp-6); }
.article-cover img {
  display: block;
  width: 100%;
  /* 同上：属性里的 height 只能当「表现性提示」，别让它越过这条规则 */
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0;
  object-fit: cover;
  /* 照片是「生活痕迹」，不是 UI 组件：不给圆角、不加阴影，让它自己站着 */
  border-radius: 2px;
}

/* ---------- 上一篇 / 下一篇 ---------- */
.article-neighbors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.article-neighbor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.article-neighbor:hover { border-color: var(--accent); }
.article-neighbor--next { text-align: right; }
.article-neighbor-label {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.article-neighbor-title { font-size: var(--fs-sub); color: var(--ink-deepest); }

/* ---------- 搜索结果提示 ---------- */
.search-hint {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

/* ---------- 错误页 ---------- */
.error-page { padding: 40px 0 24px; text-align: center; }
.error-code {
  font-family: var(--sans);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--paper-deep);
  margin: 0 0 10px;
}
.error-title {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink-deepest);
}
.error-message {
  color: var(--ink-soft);
  margin: 0 auto 24px;
  max-width: 420px;
}
.error-page .search-page-form { margin: 0 auto 18px; }
.error-links {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--ink-faint);
}
.error-links a { color: var(--ink-soft); }
.error-links a:hover { color: var(--accent); }

@media (max-width: 560px) {
  /* 手机上日期回到标题上方一行，缩略图挂在右上角 */
  .post-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "date" "body";
    gap: 4px;
    padding: 16px 0;
  }
  .post-item:has(.post-item-thumb) {
    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-areas: "date thumb" "body thumb";
    gap: 4px 12px;
  }
  .post-item-date { padding-top: 0; font-size: var(--fs-xs); }
  /* 手机上缩略图小一号、仍是 4:3：不跟着文字高度变形 */
  .post-item-thumb { width: 84px; }
  .post-item--lead { padding: var(--sp-4) 0 var(--sp-5); }
  .post-item-title { font-size: var(--fs-read); }
  /* 头条：标题比列表大一档（放在 .post-item-title 之后，同权重靠顺序取胜） */
  .post-item-title--lead { font-size: var(--fs-title); }
  .post-item-excerpt { font-size: var(--fs-meta); }
  .article-neighbor--next { text-align: left; }
}

/* ============================================================================
   手机上的「手指够得着」  —— 这一块**必须留在文件最后**
   ----------------------------------------------------------------------------
   为什么放最后：CSS 里同权重的规则是后者优先。这块一开始写在文件中间，
   结果 .tag-link 的 padding-bottom 被后面 .tag-link 基础规则顶掉了（只长高 12px）。
   放在最后就不用靠加权重去打架。

   2026-09-30 用无头浏览器把首页 / 归档 / 书影音 / 正文四页在 390 宽下量了一遍：
   横向不溢出、对比度全过 4.5，但「看得见」和「点得着」是两回事 ——
   文章页脚的标签只有 45×21、首页日志的标签 21、书架标题 20、
   首页「现在」那一列 21、归档条目 28、书影音页签 35。
   修法一律是「字一个都不动，只把可点区域垫到 44px」：
   WCAG 2.5.8 的 24px 是底线，44px 才是拇指真正点得准的尺寸；
   这些是列表项 / 独立控件，不属于「行内链接」的豁免范围。
   ============================================================================ */

.article-tags .tag-link { border-bottom: 0; text-decoration: none; padding-left: var(--sp-2); padding-right: var(--sp-2); background: var(--paper-soft); border-radius: var(--radius); }
.article-tags .tag-link:hover { color: var(--accent); background: var(--accent-soft); }

@media (max-width: 720px) {
  .archive-month-head { min-height: 44px; align-items: center; }
  .footer-links a { min-width: 44px; justify-content: center; }
  .home-section-head a { min-width: 44px; }
  .shelf-empty a { display: inline-flex; min-height: 44px; align-items: center; }
  /* ① 行内文字链接（父级不是 flex，所以排版完全不受影响）：
     上下各垫 12px，再用等量负 margin 抵掉 —— 行盒高度不看 vertical padding，
     所以字的位置、行距、段落高度全都一模一样，只有手指能感觉到差别。 */
  .now-item dd a,
  .home-date a,
  .shelf-meta a {
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
  }

  /* ② flex 行里的标签（首页日志 / 文章页脚）：行会因此高一点，这是要的 ——
     原来那行标签挤在 21px 里，手指点哪个都像抽签。 */
  .post-item-tags a,
  .article-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ③ 版块右上角那个「归档 →」（父级是基线对齐的 flex 行）：
     往上垫出去 23px，正好凑够 44 —— 容器高度和那条分割线都不动。 */
  .home-more {
    padding-top: 23px;
    margin-top: -23px;
  }

  /* ④ 书影音页的页签：用一档留白与等量负 margin 扩大点击区，
     分割线不动；Safari 的字体盒比 Chrome 略矮，不能卡着 44px 边界。 */
  .shelf-tab {
    min-width: 44px;
    padding-top: var(--sp-3);
    margin-top: calc(-1 * var(--sp-3));
  }

  /* ⑤ 首页日志标题 + 书影音标题 + 正文页「接着读」：这些都是行内链接，
     改成 inline-block 再用 token 留白、用等量负 margin 抵掉 ——
     自身的盒子变成 44px 以上，而它在文档流里占的位置一点没变
     （行盒按 margin box 算，负 margin 把多出来的高度抵消了）。 */
  .post-item-title a,
  .shelf-title a,
  .article-related-link {
    display: inline-block;
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
    margin-top: calc(-1 * var(--sp-4));
    margin-bottom: calc(-1 * var(--sp-4));
  }

  /* ⑥ 归档：行高本来就是 44px（8px 留白 + 28px 文字），但可点的只有中间那 28px。
     把留白从 <li> 挪到链接上，行高不变、整行都点得着。 */
  .archive-month-entries li { padding: 0; }
  .archive-month-entries a {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 45px;
  }

  /* ⑦ 文章落款的「回到归档」：落款那一行 39px，链接只有 20px */
  .article-sign .back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ⑧ 分页：36px 的圆形按钮在手机上偏小（书影音 400 条，翻页是常用动作），
     统一抬到 44px —— 它们本来就是 inline-flex，改高度不会动排版结构。 */
  .pagination-btn,
  .pagination-pages a,
  .pagination-current {
    height: 44px;
    min-width: 44px;
  }

  /* ⑨ 系统提醒条里的链接（「去 AI 设置」这种）：
     44px 的规则原来只写在 admin_dashboard.css 里，**但这张条子是全站共用的**，
     助理页 / 我的数据页也用它 —— 那些页面不加载仪表盘的 CSS，于是又变成 20px。 */
  .sys-alert a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }

  /* ⑩ 「关于」页那张索引表里的链接（「3 篇」「467 部」「RSS」「邮箱」）：
     手机上量出来只有 26px。行内链接，垫 padding + 等量负 margin，排版不变。 */
  .about-index dd a {
    padding-top: 14px;
    padding-bottom: 14px;
    margin-top: -14px;
    margin-bottom: -14px;
  }

  /* ⑪ 主按钮（登录页那颗 343×38）与 404 页那排链接（16px）。
     主按钮是**全站共用**的：写在这里，登录 / 后台 / 404 的搜索框一起生效。 */
  .primary-btn {
    min-height: 44px;
  }
  .error-links a {
    padding-top: 14px;
    padding-bottom: 14px;
    margin-top: -14px;
    margin-bottom: -14px;
  }

  /* ⑫ 照片展厅底下那行「来自《…》」：行内链接，垫 padding + 等量负 margin，
     排版一点不变、可点区域到 44px。量过：11px 的 sans 内容区只有 14px 高，
     垫 14px 只有 42px（差的正是那两像素），要 16px 才到 46。顺带把首页那一格改成两列 ——
     三列在 390 宽下每张只有一百来像素，小到看不出拍的是什么。 */
  .photo-source a {
    padding-top: 16px;
    padding-bottom: 16px;
    margin-top: -16px;
    margin-bottom: -16px;
  }
  .home-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Safari 原生下拉菜单不会按 min-height 扩大可点区域，必须声明高度。 */
  select { height: 44px; }
}