/* ============================================================
   Epistle · 尺素（改） — 一封信的物理感
   ------------------------------------------------------------
   0  令牌（纸/墨/印色，按信龄插值）
   1  基础重置
   2  三层：桌面 · 树影 · 台灯
   3  页眉与工具
   4  信纸与折痕
   5  信件版式
   6  代码与表格
   7  落款 / 导航 / 往来
   8  信匣（侧栏）
   9  信匣页与索引
   10 响应式
   11 打印（真信纸）
   12 无障碍：减动效 / 高对比 / 焦点
   ============================================================ */

/* 「纸短情长」字标用的毛笔字：马善政毛笔楷书（SIL OFL），只子集了这四个字（3 KB）。
   unicode-range 保证别的字永远不会触发这个字体下载。 */
@font-face {
  font-family: "Epistle Brush";
  src: url("../fonts/zhiduan-qingchang.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+7EB8, U+77ED, U+60C5, U+957F;
}

/* ── 0. 令牌 ────────────────────────────────────────────────
   纸色与墨色不是一个开关，是一条随年份滑动的尺：
   --age: 0（今天写的）→ 1（六年以上的旧信）。
   插值放在 body 上（自定义属性在声明处求值，--age 也在 body 上）。 */
:root {
  color-scheme: light; /* 让滚动条、表单控件跟着手选的主题走，而不是只看系统 */
  --age: 0;

  /* 新纸 / 旧纸 */
  --paper-fresh: #FFFDF8;
  --paper-aged: #F2E4C8;
  /* 新墨 / 褪色墨 */
  --ink-fresh: #1B2230;
  --ink-aged: #5A5242;
  /* 小字（日期、注）：留出余量，别压着 4.5:1 走 */
  --meta-fresh: #6A6354; /* 新纸 5.86:1 */
  --meta-aged: #645D4E;  /* 旧纸 5.19:1 */
  /* 朱墨（链接、印记） */
  --accent-fresh: #9A3B2A;
  --accent-aged: #8E4B33;
  /* 印章：比正文的朱墨更实一点，两种纸色上都够显 */
  --seal: #A6392A;
  /* diff 高亮（夜间要单独给亮色） */
  --diff-del: #8A2B1C;
  --diff-add: #2C6A46;

  --desk: #E7E1D6;
  --desk-glow: #F4EFE6;

  --paper-alpha: 0.93;
  --fold-light: rgba(255, 255, 255, 0.6);
  --fold-dark: rgba(40, 30, 12, 0.13);

  --shadow-paper:
    0 1px 1px rgba(60, 45, 20, 0.05),
    0 2px 6px rgba(60, 45, 20, 0.05),
    0 22px 48px -22px rgba(60, 45, 20, 0.42);

  --font-body: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
    "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN",
    "Songti SC", "STSong", "SimSun", "宋体", serif;
  --font-title: "Kaiti SC", "Kaiti TC", "STKaiti", "KaiTi", "楷体",
    "LXGW WenKai", "AR PL UKai CN", "Noto Serif CJK SC", "Noto Serif SC", serif;
  --font-mono: "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --width-paper: 46rem;
  --width-content: 38rem;
  --size-body: 18px;
  --line-height: 1.9;
  --pad-paper: 4.25rem 4.5rem 5rem;

  --dappled-enabled: 1;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 树影的墨色与光池 */
  --dappled-shadow-color: rgba(40, 50, 65, 0.6);
  --dappled-shadow-opacity: 1;
  --dappled-bokeh-color: rgba(255, 248, 230, 0.85);
  --dappled-bokeh-blur: 18px;
  --dappled-bokeh-opacity: 0.85;
  --dappled-grain-opacity: 0.1;
}

/* 夜色：不是把背景刷黑，是把灯关掉一半 */
[data-theme="dark"] {
  color-scheme: dark;
  --seal: #C2553D;
  --paper-fresh: #241E17;
  --paper-aged: #2A2219;
  --ink-fresh: #EFE7D6;
  --ink-aged: #B9AC94;
  --meta-fresh: #9A9382;
  --meta-aged: #877F6F;
  --accent-fresh: #E09B6E;
  --accent-aged: #BE8A6A;
  --diff-del: #E08A7A; /* 夜纸 6.35:1 */
  --diff-add: #7FB08A; /* 夜纸 6.66:1 */

  --desk: #080706;
  --desk-glow: #14100D;

  --paper-alpha: 0.96;
  --fold-light: rgba(255, 255, 255, 0.07);
  --fold-dark: rgba(0, 0, 0, 0.5);

  --shadow-paper:
    0 0 0 1px rgba(255, 240, 210, 0.055),
    0 1px 1px rgba(0, 0, 0, 0.5),
    0 30px 70px -24px rgba(0, 0, 0, 0.9);

  --dappled-shadow-color: rgba(0, 4, 14, 0.5);
  --dappled-shadow-opacity: 0.72;
  --dappled-bokeh-color: rgba(186, 202, 235, 0.42);
  --dappled-bokeh-blur: 22px;
  --dappled-bokeh-opacity: 0.55;
  --dappled-grain-opacity: 0.14;
}

/* 插值：老信纸更黄、墨更淡、朱印更旧 */
body {
  --paper: var(--paper-fresh);
  --ink: var(--ink-fresh);
  --meta: var(--meta-fresh);
  --accent: var(--accent-fresh);
  --hairline: color-mix(in srgb, var(--ink-fresh) 16%, transparent);
}

@supports (color: color-mix(in oklab, red, blue)) {
  body {
    --paper: color-mix(in oklab, var(--paper-fresh), var(--paper-aged) calc(var(--age) * 100%));
    --ink: color-mix(in oklab, var(--ink-fresh), var(--ink-aged) calc(var(--age) * 100%));
    --meta: color-mix(in oklab, var(--meta-fresh), var(--meta-aged) calc(var(--age) * 100%));
    --accent: color-mix(in oklab, var(--accent-fresh), var(--accent-aged) calc(var(--age) * 100%));
    --hairline: color-mix(in srgb, var(--ink) 16%, transparent);
  }
}

/* 素纸：把纸纹、树影、楷体、灯罩全关掉，只留字。
   去掉的是装饰，不是护眼的暖纸暖墨——纯白/纯黑留给「增强对比度」(prefers-contrast: more)。 */
[data-plain="on"] { --font-title: var(--font-body); }
[data-plain="on"] body {
  --paper: #F7F1E4;
  --ink: #2A2723;        /* 暖纸 13.20:1 */
  --meta: #5F5849;       /* 6.26:1 */
  --accent: #8A2B1C;     /* 7.64:1 */
  --hairline: rgba(42, 39, 35, 0.22);
  --paper-alpha: 1;
  --fold-dark: rgba(60, 45, 20, 0.07);
  --shadow-paper: 0 0 0 1px rgba(60, 45, 20, 0.14);
}
[data-plain="on"][data-theme="dark"] body {
  --paper: #1E1A14;
  --ink: #D6CCBA;        /* 夜纸 10.89:1 */
  --meta: #A99C86;       /* 6.42:1 */
  --accent: #E0A579;     /* 8.10:1 */
  --hairline: rgba(214, 204, 186, 0.28);
  --shadow-paper: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
/* 素纸模式：字标也回到正文字体，印章收起——去掉一切装饰 */
[data-plain="on"] .site-title__name { font-family: var(--font-title); font-size: 1.15rem; letter-spacing: 0.14em; }
[data-plain="on"] .site-title__seal { display: none; }

/* ── 1. 基础 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--size-body);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* 移动浏览器地址栏收起时，100vh 会多出一截 */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--line-height);
  color: var(--ink);
  background:
    radial-gradient(120rem 70rem at 50% -20%, var(--desk-glow) 0%, var(--desk) 62%);
  background-color: var(--desk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: inherit;
}

a { color: var(--accent); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--paper);
  color: var(--ink);
  padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

/* ── 2. 三层：桌面 / 树影 / 台灯 ──────────────────────────── */
.dappled-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

body[data-dappled="off"] .dappled-layer { display: none; }
[data-plain="on"] .dappled-layer { display: none; }

.dappled-layer__wash,
.dappled-layer__grain {
  position: absolute;
  inset: 0;
}

.dappled-layer__wash {
  inset: -12% -12% -6% -14%;
  opacity: calc(var(--dappled-enabled) * 0.96);
  background:
    radial-gradient(42rem 28rem at 82% 4%, rgba(255, 246, 231, 0.7) 0%, transparent 56%),
    radial-gradient(30rem 24rem at 58% 18%, rgba(255, 255, 255, 0.24) 0%, transparent 58%);
  /* 不再 blur(38px)：径向渐变本来就是软的，全屏高斯只是白烧一次大图 */
}

[data-theme="dark"] .dappled-layer__wash {
  background:
    radial-gradient(46rem 30rem at 76% 6%, rgba(96, 110, 140, 0.16) 0%, transparent 60%),
    radial-gradient(34rem 26rem at 22% 40%, rgba(70, 60, 40, 0.14) 0%, transparent 62%);
}

.dappled-layer__shadows {
  position: absolute;
  inset: -8%;
  opacity: calc(var(--dappled-enabled) * var(--dappled-shadow-opacity, 1));
  /* 不做动画：整层是静止的，浏览器光栅化一次就不再动它 */
}

.dappled-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 不挂 filter: url(#dw-wind)，也不做动画：
     feTurbulence + 逐组高斯模糊只在第一次绘制时算一遍，之后就是一张静态图 */
}

@supports (-moz-appearance: none) {
  .dappled-svg { filter: none; }
}

.dappled-layer__bokeh {
  position: absolute;
  inset: -8%;
  /* 光斑本身就是 radial-gradient，不用 blur() 也不用 screen 混合 */
  opacity: calc(var(--dappled-enabled) * var(--dappled-bokeh-opacity, 0.7));
}

.dappled-bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dappled-bokeh-color) 0%, transparent 72%);
}

.dappled-layer__grain {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.08) 0.55px, transparent 0.8px),
    radial-gradient(rgba(31, 39, 49, 0.05) 0.55px, transparent 0.8px);
  background-position: 0 0, 9px 12px;
  background-size: 18px 18px, 23px 23px;
  opacity: calc(var(--dappled-enabled) * var(--dappled-grain-opacity, 0.1));
  /* 原来这里是 soft-light：一层全屏混合，等于每帧重读整屏。低透明度下几乎看不出差别 */
}

/* 台灯：一圈亮，四周真的暗下去。不是全黑底，是光锥之外 */
.lamp {
  position: fixed;
  inset: 0;
  /* 0 = 压在树影之上、信纸之下：只把桌面四周压暗，别把正文也一起调暗 */
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  background:
    radial-gradient(28rem 22rem at 50% 40%, rgba(255, 202, 138, 0.15) 0%, rgba(255, 202, 138, 0) 70%),
    radial-gradient(58rem 50rem at 50% 42%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 32%,
      rgba(0, 0, 0, 0.15) 54%,
      rgba(0, 0, 0, 0.5) 78%,
      rgba(0, 0, 0, 0.84) 100%);
}
[data-theme="dark"] .lamp { opacity: 1; }
[data-plain="on"] .lamp { display: none; }

.desk {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── 3. 页眉与工具 ───────────────────────────────────────── */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: calc(var(--width-paper) + 6rem);
  margin: 0 auto;
  padding: 1.6rem 1.5rem 1.2rem;
  padding-top: max(1.6rem, calc(env(safe-area-inset-top) + 1rem));
}

.site-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}

.site-title__name {
  font-family: "Epistle Brush", var(--font-title);
  font-size: 1.72rem;
  line-height: 1.05;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}

/* 朱印：一枚小方章，压在字标后面。印文是英文名（params.seal，如 Tang） */
.site-title__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.05rem;
  padding: 0 0.3rem;
  border-radius: 2px;
  background: var(--seal);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transform: translateY(0.05rem) rotate(-3deg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 32%, transparent);
}

.site-title__tag {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--meta);
  font-family: var(--font-body);
}

.tools {
  display: flex;
  gap: 0.15rem;
  align-items: center;
}

.tool {
  appearance: none;
  border: 0;
  background: none;
  color: var(--meta);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
  transition: color 0.2s var(--ease);
}

.tool:hover { color: var(--ink); }

.tool[aria-pressed="true"] { color: var(--accent); }

.tool[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.1rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

/* 信匣标签 */
.index-tab {
  position: fixed;
  right: -2px;
  top: max(6rem, calc(env(safe-area-inset-top) + 5rem));
  z-index: 200;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  color: var(--meta);
  border: 1px solid var(--hairline);
  border-right: none;
  border-radius: 3px 0 0 3px;
  padding: 0.85rem 0.34rem;
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  cursor: pointer;
  appearance: none;
  box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s var(--ease), color 0.2s, background 0.2s;
}
.index-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.index-tab.is-active { transform: translateX(calc(-1 * min(320px, 85vw) - 2px)); }
[data-plain="on"] .index-tab { backdrop-filter: none; }

/* ── 4. 信纸与折痕 ───────────────────────────────────────── */
.layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  width: 100%;
  max-width: calc(var(--width-paper) + 6rem);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.paper {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0; /* flex 项默认 min-width:auto，长代码行会把纸撑出屏幕 */
  padding: var(--pad-paper);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 97%, transparent) 0%,
      color-mix(in srgb, var(--paper) calc((var(--paper-alpha) + 0.02) * 100%), transparent) 42%,
      color-mix(in srgb, var(--paper) 93%, transparent) 100%);
  box-shadow: var(--shadow-paper);
  /* 原来这里是 backdrop-filter: blur(14px)：纸本身已经 93% 不透明，看不清那点模糊，
     却要让合成器每一帧把下面还在漂移的叶影重新糊一遍——去掉，背景透明度补回来一点 */
  min-height: calc(100vh - 10rem);
  min-height: calc(100dvh - 10rem);
}

/* 纸纹：极细的纤维噪点，只在有树影时出现 */
.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: calc(var(--dappled-enabled) * 0.5);
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 100, 60, 0.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 100, 60, 0.015) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}

.paper > * { position: relative; z-index: 1; }

[data-plain="on"] .paper {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--paper);
}
[data-plain="on"] .paper::after { display: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .paper {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
  }
}

/* 折痕：每个小标题前压一道折线。读过去之后，压痕松开（淡掉） */
.paper__fold {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  z-index: 0;
  --open: 0;
  /* 1px 暗线 + 1px 反光：纸被折过就是上下两笔 */
  background: linear-gradient(180deg, var(--fold-dark) 0 1px, var(--fold-light) 1px 2px);
  opacity: calc(1 - var(--open) * 0.9);
  transition: opacity 0.9s var(--ease);
}
.paper__fold.is-open { --open: 1; }

[data-plain="on"] .paper__fold { display: none; }

/* ── 5. 信件版式 ─────────────────────────────────────────── */
.letter {
  max-width: var(--width-content);
  margin: 0 auto;
}

.letter-header {
  margin-bottom: 2.2rem;
  text-align: center;
}

.letter-kicker {
  margin: 0 0 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--meta);
  font-family: var(--font-body);
}

/* Heti 给 .heti p 设了 justify，标题区和落款区要显式拿回来 */
.letter-header .letter-kicker { text-align: center; }
.letter-footer .valediction { text-align: right; }
.letter-footer .postscript { text-align: left; }

.letter .letter-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.95rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.letter-header__rule {
  display: block;
  width: 2.4rem;
  height: 1px;
  margin: 1.4rem auto 0;
  background: var(--hairline);
}

.salutation {
  margin: 0 0 1.5rem;
  color: var(--meta);
  font-style: normal;
  font-size: 1rem;
}

.letter-body {
  font-size: 1rem;
}

/* Heti 接管后的正文 */
.letter-body.heti p {
  margin-block: 0 1.5em;
  text-align: justify;
  text-justify: inter-ideograph;
}

.letter-body.heti p:last-child { margin-bottom: 0; }

.letter-body h1,
.letter-body h2,
.letter-body h3,
.letter-body h4,
.letter-body h5,
.letter-body h6 {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.letter-body h2 {
  font-size: 1.32rem;
  margin: 2.6em 0 0.9em;
}

.letter-body h3 {
  font-size: 1.1rem;
  margin: 2.2em 0 0.7em;
  font-family: var(--font-body);
  font-weight: 600;
}

.letter-body h4 {
  font-size: 1rem;
  margin: 1.8em 0 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
}

.letter-body h2 + p,
.letter-body h3 + p { margin-top: 0; }

.letter-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transition: text-underline-offset 0.18s var(--ease), text-decoration-color 0.18s;
}
.letter-body a:hover {
  text-underline-offset: 5px;
  text-decoration-color: currentColor;
}

.letter-body strong { font-weight: 600; }
.letter-body em { font-style: italic; }

.letter-body blockquote {
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--meta);
  background: none;
}
.letter-body blockquote p:last-child { margin-bottom: 0; }

.letter-body hr {
  border: 0;
  height: 1px;
  margin: 2.6em auto;
  width: 40%;
  background: var(--hairline);
}

.letter-body ul,
.letter-body ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}
.letter-body li { margin-bottom: 0.35em; }
.letter-body li::marker { color: var(--meta); }

.letter-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2em auto;
  border-radius: 2px;
  box-shadow: 0 2px 14px -6px rgba(0, 0, 0, 0.4);
}

.letter-body figure { margin: 2em 0; }
.letter-body figcaption {
  margin-top: 0.7em;
  font-size: 0.82rem;
  color: var(--meta);
  text-align: center;
}

/* ── 6. 代码与表格 ───────────────────────────────────────── */
.letter-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.08em 0.26em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: color-mix(in srgb, var(--ink) 86%, var(--accent));
}

.letter-body pre,
.highlight pre {
  margin: 1.8em 0;
  padding: 1.05rem 1.2rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.72;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--hairline);
  color: var(--ink);
  -webkit-overflow-scrolling: touch;
}

.letter-body pre code {
  padding: 0;
  background: none;
  font-size: inherit;
  color: inherit;
}

.highlight { margin: 1.8em 0; }
.highlight pre { margin: 0; }
.highlight .chroma { background: none; }

/* Chroma 令牌：只用墨、朱、青三色，和信纸同族 */
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs {
  color: var(--meta);
  font-style: italic;
}
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt {
  color: color-mix(in srgb, var(--accent) 88%, var(--ink));
  font-weight: 600;
}
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd,
.chroma .s1, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .ss {
  color: color-mix(in srgb, var(--ink) 55%, #7A6A3E);
}
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
  color: color-mix(in srgb, var(--ink) 45%, #2F6A6A);
}
.chroma .nf, .chroma .fm, .chroma .nc, .chroma .nn, .chroma .nx {
  color: color-mix(in srgb, var(--ink) 80%, #2C5282);
}
.chroma .nt, .chroma .na { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.chroma .o, .chroma .ow, .chroma .p, .chroma .pi { color: var(--meta); }
.chroma .gd { color: var(--diff-del); }
.chroma .gi { color: var(--diff-add); }
.chroma .err { text-decoration: underline wavy; }

.letter-body table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.letter-body th,
.letter-body td {
  padding: 0.5em 0.7em;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}
.letter-body th {
  font-weight: 600;
  border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent);
}

/* ── 7. 落款 / 导航 / 往来 ───────────────────────────────── */
.letter-footer {
  margin-top: 3.4rem;
  text-align: right;
}

.valediction {
  margin: 0;
  color: var(--meta);
  font-size: 0.95rem;
}

.signature {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--ink);
}

.signature__svg {
  display: block;
  height: 3.1rem;
  width: auto;
  overflow: visible;
}

.letter-date {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.84rem;
  color: var(--meta);
  letter-spacing: 0.04em;
}

.postscript {
  margin: 1.6rem 0 0;
  font-size: 0.86rem;
  color: var(--meta);
  text-align: left;
}
.postscript abbr { text-decoration: none; letter-spacing: 0.1em; }

.letter-tags {
  margin: 2.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.76rem;
  color: var(--meta);
  letter-spacing: 0.06em;
}
.letter-tags a {
  color: var(--meta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.letter-tags a:hover { color: var(--accent); border-bottom-color: currentColor; }

.letter-nav {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
}

.letter-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--ink);
  max-width: 46%;
  transition: color 0.2s;
}
.letter-nav__link:hover { color: var(--accent); }
.letter-nav__link--next { align-items: flex-end; text-align: right; margin-left: auto; }

.letter-nav__label {
  font-size: 0.7rem;
  color: var(--meta);
  letter-spacing: 0.18em;
}
.letter-nav__title { font-size: 0.92rem; line-height: 1.5; }

/* 打印时显示的信笺头 */
.print-head { display: none; }

/* ── 8. 信匣（侧栏） ─────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  padding: 3rem 1.25rem 2rem 1.5rem;
  padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
  background: color-mix(in srgb, var(--paper) 97%, var(--desk));
  z-index: 100;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  display: flex;
  flex-direction: column;
}
.sidebar.is-open { transform: translateX(0); }

.archive { flex: 1; }

.archive-title {
  margin: 0 0 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--meta);
  font-weight: 400;
}

.year-group { margin-bottom: 0.6rem; }

.year-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--meta);
  letter-spacing: 0.08em;
  padding: 0.2rem 0;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.year-toggle::before {
  content: "▸";
  font-size: 0.6rem;
  transition: transform 0.2s;
}
.year-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }

.month-list { margin-bottom: 0.9rem; }

.month-group {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0 0.5rem;
  margin-bottom: 0.2rem;
}

.month-label {
  font-size: 0.7rem;
  color: var(--meta);
  padding-top: 0.2rem;
  letter-spacing: 0.04em;
}

.month-group ul { list-style: none; margin: 0; padding: 0; }

.month-group a {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.18rem 0;
  line-height: 1.45;
  transition: color 0.15s;
}
.month-group a:hover { color: var(--accent); }
.month-group a[aria-current="page"] { color: var(--accent); }
.month-group time {
  flex-shrink: 0;
  color: var(--meta);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.archive-foot {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  font-size: 0.78rem;
}
.archive-foot a { color: var(--meta); text-decoration: none; }
.archive-foot a:hover { color: var(--accent); }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.sidebar-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease);
}

/* ── 页脚 ───────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: calc(var(--width-paper) + 6rem);
  margin: 0 auto;
  padding: 1.4rem 1.5rem 2rem;
  padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
  font-size: 0.76rem;
  color: var(--meta);
  letter-spacing: 0.04em;
}

.footer-links { display: flex; gap: 1rem; }
.footer-links a { color: var(--meta); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }

.back-to-top { color: var(--meta); text-decoration: none; }
.back-to-top:hover { color: var(--accent); }

/* ── 9. 信匣页与索引 ─────────────────────────────────────── */
.archive-page { max-width: var(--width-content); margin: 0 auto; }

.archive-page__head { text-align: center; margin-bottom: 3rem; }

.archive-page__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
}

.archive-page__sub {
  margin: 0.8rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  color: var(--meta);
}

.year-block { margin-bottom: 2.6rem; }

.year-block__year {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--meta);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

.letter-list { list-style: none; margin: 0; padding: 0; }

.letter-list__item + .letter-list__item { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }

.letter-list__item a {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.72rem 0.2rem;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.18s, background 0.18s;
}
.letter-list__item a:hover { color: var(--accent); background: color-mix(in srgb, var(--ink) 3%, transparent); }

.letter-list__date {
  flex-shrink: 0;
  font-size: 0.76rem;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.letter-list__title { font-size: 1rem; }

.letter-list__leader {
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 22%, transparent);
  transform: translateY(-0.28em);
  min-width: 1.5rem;
}

.letter-list__meta {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--meta);
  letter-spacing: 0.08em;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tag-cloud a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  padding-bottom: 1px;
  font-size: 0.92rem;
}
.tag-cloud a:hover { color: var(--accent); border-bottom-color: currentColor; }
.tag-cloud .count { color: var(--meta); font-size: 0.72rem; margin-left: 0.3rem; }

.home-more {
  margin: 3rem auto 0;
  max-width: var(--width-content);
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--meta);
}
.home-more a { color: var(--accent); text-decoration: none; }
.home-more a:hover { text-decoration: underline; }

/* ── 10. 响应式 ─────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --pad-paper: 2.6rem 2rem 3rem; --size-body: 17px; }
  .letter .letter-title { font-size: 1.6rem; }
  .letter-body h2 { font-size: 1.2rem; }
}

@media (max-width: 640px) {
  :root { --size-body: 16.5px; --pad-paper: 1.8rem 1.25rem 2.6rem; }
  .layout { padding: 0; }
  .paper {
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
  }
  .site-header { padding: 1rem 1.1rem 0.8rem; flex-wrap: wrap; }
  .site-header { padding-top: max(1rem, calc(env(safe-area-inset-top) + 0.5rem)); }
  .site-title__tag { display: none; }
  .site-footer { padding: 1rem 1.1rem 1.6rem; flex-direction: column; align-items: flex-start; }
  .site-footer { padding-bottom: max(1.6rem, calc(env(safe-area-inset-bottom) + 0.8rem)); }
  .index-tab { top: max(4.4rem, calc(env(safe-area-inset-top) + 3.4rem)); padding: 0.65rem 0.3rem; font-size: 0.68rem; }
  .index-tab.is-active { transform: translateX(calc(-1 * min(280px, 85vw) - 2px)); }
  .sidebar { width: min(280px, 85vw); }
  .letter-nav { flex-direction: column; }
  .letter-nav__link { max-width: 100%; }
  .letter-nav__link--next { align-items: flex-start; text-align: left; margin-left: 0; }
  .lamp {
    background:
      radial-gradient(22rem 18rem at 50% 40%, rgba(255, 198, 128, 0.10) 0%, rgba(255, 198, 128, 0) 70%),
      radial-gradient(34rem 30rem at 50% 42%, rgba(0,0,0,0) 20%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.8) 100%);
  }

  /* 手机上再省一层：feTurbulence 位移在低端机上很贵，直接不做 */
  .dappled-svg { filter: none; }
  .index-tab { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 窄屏：字标收一号，别把「夜读/素纸/打印」挤到第二行 */
@media (max-width: 640px) {
  .site-title { gap: 0.5rem; }
  .site-title__name { font-size: 1.45rem; }
  .site-title__seal { height: 0.95rem; padding: 0 0.24rem; font-size: 0.5rem; }
}

/* ── 11. 打印：一张真信纸 ───────────────────────────────── */
@media print {
  @page {
    size: A4;
    margin: 20mm 18mm 22mm;
  }

  :root { --size-body: 14px; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 14px;
    line-height: 1.7;
  }

  .dappled-layer,
  .lamp,
  .sidebar,
  .sidebar-overlay,
  .index-tab,
  .tools,
  .skip-link,
  .letter-nav,
  .home-more,
  .site-footer,
  .paper__fold,
  .postscript abbr::after { display: none !important; }

  .site-header { display: none !important; }

  .desk, .layout { display: block; max-width: none; padding: 0; margin: 0; }

  /* 100vh 在分页时会撑出一整页，末尾多一张空白 */
  body, .desk, .layout, .paper { min-height: 0 !important; }

  .paper {
    box-shadow: none !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    min-height: 0;
    border: 0;
  }

  .paper::after { display: none !important; }

  .letter { max-width: none; }

  .print-head {
    display: block;
    margin-bottom: 12mm;
    padding-bottom: 3mm;
    border-bottom: 0.4pt solid #000;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: #000;
  }
  .print-head__row { display: flex; justify-content: space-between; gap: 10mm; }
  .print-head__brand,
  .print-head__date { white-space: nowrap; flex: 0 0 auto; }

  .letter-header { margin-bottom: 8mm; text-align: left; }
  .letter-kicker { color: #000; letter-spacing: 0.2em; margin-bottom: 3mm; }
  .letter-header .letter-kicker { text-align: left; }
  .letter .letter-title {
    font-family: var(--font-title);
    font-size: 27px;
    color: #000;
  }
  .letter-header__rule { display: none; }

  .letter-body { color: #000; }
  .letter-body p { orphans: 3; widows: 3; }
  .letter-body h2, .letter-body h3, .letter-body h4 {
    color: #000;
    break-after: avoid;
    page-break-after: avoid;
  }

  .letter-body a {
    color: #000 !important;
    text-decoration: underline;
    text-decoration-thickness: 0.3pt;
  }

  .letter-body pre,
  .highlight pre {
    background: #fff !important;
    border: 0.4pt solid #999;
    color: #000 !important;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    break-inside: avoid;
  }
  .chroma * { color: #000 !important; }

  .letter-body blockquote { color: #333; border-left: 1pt solid #999; }
  .letter-body img { break-inside: avoid; box-shadow: none; max-height: 110mm; }

  .letter-footer { break-inside: avoid; text-align: right; margin-top: 10mm; }
  .valediction, .letter-date { color: #000; }
  .signature__svg { height: 14mm; }
  .signature { color: #000; }

  .letter-tags { border-top: 0.4pt solid #999; color: #333; break-inside: avoid; }

  /* 打印时给出链接地址，纸面上看不到的才需要 */
  .letter-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10.5px;
    color: #555;
    word-break: break-all;
  }
}

/* ── 12. 无障碍 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dappled-layer { display: none !important; }
  .dappled-svg,
  .dappled-layer__shadows,
  .dappled-layer__bokeh,
  .dappled-layer__grain { animation: none !important; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-contrast: more) {
  .dappled-layer, .lamp, .paper::after { display: none !important; }

  /* 只在各自主题里加强，别把夜里的纸刷成白色 */
  [data-theme="light"] .paper { background: #fff; }
  [data-theme="light"] body { --ink: #000; --meta: #333; }

  [data-theme="dark"] .paper { background: #1E1A14; }
  [data-theme="dark"] body { --ink: #F2EBDD; --meta: #CFC5B4; }
}

[data-theme="dark"] ::-webkit-scrollbar { width: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}