/* ===========================================================================
   dream的资源保管库 —— 主样式表
   ===========================================================================

   本文件的组织方式：
       第 1 节  设计令牌（颜色、字体、间距、尺寸）  ← 想改外观，先看这里
       第 2 节  基础重置与排版
       第 3 节  页头 / 页脚
       第 4 节  区块标题
       第 5 节  首页首屏
       第 6 节  文章卡片与列表
       第 7 节  分类筛选
       第 8 节  正文（prose）与代码块
       第 9 节  文章详情页与左侧目录
       第 10 节 分页

   当前状态：步骤 7 —— 只有结构，视觉细节在步骤 8 完成。
   =========================================================================== */


/* ===========================================================================
   第 1 节  设计令牌
   ---------------------------------------------------------------------------
   所有颜色和尺寸都定义在这里。想换配色，改下面的色值即可，全站生效。

   注意：参考站（chenxuqiao.com）的样式表无法获取，所以这套色值是按它的
   气质重制的，不是提取来的原值。
   =========================================================================== */

:root {
  /* ---- 颜色 ---- */
  --bg:            #FAF8F5;   /* 页面背景：暖白，不用纯白 */
  --bg-soft:       #F4F1EC;   /* 次级背景（代码块、引用块） */
  --ink:           #1C1B19;   /* 正文：近黑 */
  --ink-mute:      #6B6862;   /* 次要文字：日期、说明 */
  --ink-faint:     #9A968F;   /* 更淡的文字 */
  --accent:        #B4562B;   /* 强调色：陶土橙，用于链接、编号 */
  --rule:          #E8E4DE;   /* 分隔线 */

  /* ---- 字体 ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;

  /* ---- 字号阶梯 ---- */
  --text-xs:   0.8125rem;   /* 13px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.375rem;    /* 22px */
  --text-2xl:  1.75rem;     /* 28px */
  --text-3xl:  2.25rem;     /* 36px */
  --text-4xl:  3rem;        /* 48px */

  /* ---- 行高 ---- */
  --leading-tight: 1.3;
  --leading-base:  1.6;
  --leading-prose: 1.75;    /* 中文正文用更大的行高 */

  /* ---- 间距阶梯 ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---- 布局 ---- */
  --wrap:         960px;    /* 内容最大宽度 */
  --wrap-narrow:  680px;    /* 正文段落的最大宽度，太长不好读 */
  --header-height: 60px;

  /* ---- 背景图案 ---- */
  /* 透明度数值：数值越大图案越明显。想调浓淡，只改这一行。
     0.07 大约相当于 7%。范围参考：0.03 很淡、0.07 明显、0.12 偏强。 */
  --bg-pattern-opacity: 0.07;
}


/* ===========================================================================
   第 2 节  基础重置与排版
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* 锚点跳转时不要贴到最顶上，留出页头的高度 */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.wrap.narrow { max-width: var(--wrap-narrow); }

/* 键盘聚焦时的可见轮廓（无障碍要求） */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 跳到正文链接：默认隐藏，获得焦点时出现 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 100;
}
.skip-link:focus { left: 0; }


/* ===========================================================================
   第 2 节附：背景图案
   ---------------------------------------------------------------------------
   用途：在页面最底层铺一层淡插画，让两侧的留白不那么空。
        参考站那种「窄内容 + 大留白」的排版在宽屏上会显得空旷，
        这层图案用来填充这个观感。

   三种版本（由 base.html 根据页面和网址参数决定给 body 加哪个类）：

        bg-cold    原色直接铺（冷色调：紫蓝粉）—— 首页使用
        bg-plain   同 bg-cold，保留作为备选
        bg-warm    图案上盖一层暖白遮罩，把冷色调压下去 —— 关于页使用
        （无类名）  不显示任何背景图案 —— 文章详情页使用

   切换方式：在网址后面加 ?bg=warm（关于页用），首页固定冷色调。

   图片说明：
        bg.webp 是把原图（1067×600）用 LANCZOS 放大到 1900×1068
        再轻度锐化的结果。放大不增加真实细节，只改善观感。
        原图保留为 bg-original.jpg，需要重新处理时用它。

   关键属性说明：
        position: fixed  滚动时背景不动，像贴在屏幕后面
        z-index: -1      垫在最底层，不会盖住文字
        pointer-events   不拦截鼠标事件，链接照样能点
   =========================================================================== */

body::before {
  content: '';
  position: fixed;
  inset: 0;

  /* 图片路径：相对于本 CSS 文件的位置 */
  background-image: url('../images/bg.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  opacity: var(--bg-pattern-opacity);
  z-index: -1;
  pointer-events: none;
}

/* 暖色版：在图片上方叠一层暖白遮罩，把冷色调压下去 */
body.bg-warm::before {
  background-image:
    linear-gradient(rgba(250, 248, 245, 0.72), rgba(250, 248, 245, 0.72)),
    url('../images/bg.webp');
}

/* 冷色版（原色）与 bg-plain 行为相同，都不加遮罩。
   写在下面只是为了明确表达意图，方便以后单独调整冷色调。
   例如想给冷色版加一点蓝色偏向，可以在这里叠一层淡蓝遮罩。 */
body.bg-cold::before,
body.bg-plain::before {
  background-image: url('../images/bg.webp');
}


/* ===========================================================================
   第 3 节  页头 / 页脚
   =========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.site-name {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  gap: var(--space-6);
  font-size: var(--text-sm);
  color: var(--ink-mute);
}

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-24);
  padding: var(--space-8) 0;
  font-size: var(--text-sm);
  color: var(--ink-mute);
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-footer p { margin: 0; }


/* ===========================================================================
   第 4 节  区块标题
   ---------------------------------------------------------------------------
   参考站的设计语言：编号 + 英文小标签 + 中文大标题
   =========================================================================== */

.section {
  padding: var(--space-12) 0;
}

/* 连续两个区块之间只留一份间距，避免上下内边距叠加出过大的空白 */
.section + .section {
  padding-top: 0;
}

.section-head {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.section-number {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: 0.08em;
}

.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: var(--space-1);
}

.section-title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
}


/* ===========================================================================
   第 5 节  首页首屏
   =========================================================================== */

.hero {
  padding: var(--space-24) 0 var(--space-6);
}

.hero-label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}

.hero-label-en {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-title {
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.hero-desc {
  margin: 0 0 var(--space-8);
  font-size: var(--text-lg);
  color: var(--ink-mute);
  max-width: 30em;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-6);
  border-radius: 4px;
  font-size: var(--text-sm);
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--accent);
  color: #fff;
}

.btn-ghost {
  border-color: var(--rule);
  color: var(--ink-mute);
}
.btn-ghost:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
}

.hero-slogan {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}


/* ===========================================================================
   第 6 节  文章卡片与列表
   =========================================================================== */

.list-count {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

.post-list {
  display: grid;
  gap: var(--space-3);
}

.card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  transition: border-color 0.15s, transform 0.15s;
}

.card:hover {
  border-color: var(--ink-faint);
  transform: translateY(-1px);
}

.card-link {
  display: block;
  padding: var(--space-6);
}

.card-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.card:hover .card-title { color: var(--accent); }

.card-summary {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-mute);
  line-height: var(--leading-base);
}

.card-meta {
  margin: 0;
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

.card-category { color: var(--accent); }

.empty {
  padding: var(--space-12) 0;
  text-align: center;
  color: var(--ink-faint);
}


/* ===========================================================================
   第 7 节  分类筛选
   =========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--text-xs);
  color: var(--ink-mute);
  transition: all 0.15s;
}

.chip:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}

.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}


/* ===========================================================================
   第 8 节  正文（prose）
   ---------------------------------------------------------------------------
   这一节控制文章正文里所有元素的样式。上传的 Markdown 会被渲染成
   h1~h4 / p / ul / ol / blockquote / table / pre 这些标签，样式都在这。
   =========================================================================== */

.prose {
  line-height: var(--leading-prose);
}

.prose > *:first-child { margin-top: 0; }

.prose h1, .prose h2, .prose h3, .prose h4 {
  line-height: var(--leading-tight);
  font-weight: 600;
  margin: var(--space-12) 0 var(--space-4);
}

.prose h1 { font-size: var(--text-2xl); }
.prose h2 { font-size: var(--text-xl); }
.prose h3 { font-size: var(--text-lg); }
.prose h4 { font-size: var(--text-base); }

.prose p { margin: 0 0 var(--space-6); }

.prose ul, .prose ol {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
}

.prose li { margin-bottom: var(--space-2); }

.prose a {
  color: var(--accent);
  border-bottom: 1px solid rgba(180, 86, 43, 0.3);
}
.prose a:hover { border-bottom-color: var(--accent); }

.prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  color: var(--ink-mute);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-12) 0;
}

.prose del { color: var(--ink-faint); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
}

.prose th, .prose td {
  border: 1px solid var(--rule);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.prose th { background: var(--bg-soft); font-weight: 600; }

/* ---- 行内代码 ---- */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-soft);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

/* ---- 代码块 ---- */
.prose pre {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow-x: auto;
  line-height: 1.55;
}

.prose pre code {
  background: none;
  padding: 0;
  font-size: var(--text-sm);
}

/* codehilite 是 Pygments 生成的容器 */
.prose .codehilite {
  margin: var(--space-6) 0;
}
.prose .codehilite pre { margin: 0; }

/* 代码块容器需要相对定位，否则里面的「复制」按钮会定位到整个页面去 */
.codehilite {
  position: relative;
}

/* 复制按钮：待在代码块右上角，平时很淡，鼠标移到代码块上才明显 */
.code-copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;

  padding: 0.2em 0.6em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;

  color: var(--ink-faint);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;

  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

/* 鼠标移到代码块上，或者按钮本身获得焦点时，按钮才显示出来 */
.codehilite:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}

.code-copy:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 复制成功后的短暂提示状态 */
.code-copy.is-done {
  opacity: 1;
  color: #6B7A3A;
  border-color: #6B7A3A;
}

/* 触屏设备没有 hover，按钮常驻显示，否则点不到 */
@media (hover: none) {
  .code-copy { opacity: 1; }
}


/* ===========================================================================
   第 8 节附：数学公式（KaTeX）
   ---------------------------------------------------------------------------
   KaTeX 会把公式渲染成一堆嵌套的 span，这里只做两件事：
       ① 行间公式居中、允许横向滚动（长公式在窄屏上会撑破容器）
       ② 渲染失败时给出可见的提示样式
   =========================================================================== */

.prose .katex {
  font-size: 1.05em;   /* 略微放大，和中文正文视觉重量更匹配 */
}

/* 行间公式：KaTeX 会生成 <span class="katex-display"> */
.prose .katex-display {
  margin: var(--space-6) 0;
  padding: var(--space-2) 0;
  overflow-x: auto;         /* 长公式可以横向滚动，不会撑破布局 */
  overflow-y: hidden;
}

.prose .katex-display > .katex {
  font-size: 1.1em;
}

/* 公式里的错误提示（KaTeX 渲染失败时会标红） */
.prose .katex-error {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.9em;
  border-bottom: 1px dotted var(--accent);
}


/* ===========================================================================
   第 9 节  文章详情页与左侧目录
   =========================================================================== */

.post-layout {
  display: grid;
  grid-template-columns: 1fr;      /* 窄屏：单列，目录在上，正文在下 */
  gap: var(--space-8);
  padding-top: var(--space-12);
}

/* ===========================================================================
   第 11 节  窄屏适配
   ---------------------------------------------------------------------------
   分三档：
       ≤ 640px    手机
       > 1000px   桌面（目录固定在左侧）
   中间档（641–999px，例如竖屏平板）沿用手机布局，只在字号上稍作放宽。
   =========================================================================== */

/* ---- 手机：字号和内边距都收一收 ---- */
@media (max-width: 640px) {

  :root {
    /* 首屏内边距从 96px 降到 48px，让内容尽快出现 */
    --space-24: 3rem;
    --space-16: 2rem;
  }

  .wrap {
    padding: 0 var(--space-4);      /* 两侧留白从 24px 收到 16px */
  }

  .hero {
    padding-top: var(--space-12);
  }

  .hero-title {
    font-size: var(--text-2xl);     /* 28px，原来 48px 在手机上太大 */
  }

  .hero-desc {
    font-size: var(--text-base);
  }

  .section-title {
    font-size: var(--text-xl);
  }

  .post-title {
    font-size: var(--text-2xl);
  }

  /* 页头：站名和导航挤在一行会换行，缩小字号和间距 */
  .site-header .wrap {
    gap: var(--space-3);
  }
  .site-nav {
    gap: var(--space-4);
  }

  .post-list {
    gap: var(--space-2);
  }

  .card-link {
    padding: var(--space-4);        /* 卡片内边距从 24px 收到 16px */
  }

  /* 分页按钮在窄屏上并排会挤，改成上下排列 */
  .pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .site-footer .wrap {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* 代码块的字号小一号，减少横向滚动 */
  .prose pre code {
    font-size: var(--text-xs);
  }
}

/* ---- 表格：窄屏上允许纵向换行，避免撑破页面 ---- */
@media (max-width: 1000px) {
  .prose table {
    font-size: var(--text-xs);
  }
  .prose th,
  .prose td {
    padding: var(--space-1) var(--space-2);
    /* 长内容允许在词内断开，这是防表格撑破的关键一条 */
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* ===========================================================================
   第 11 节附：全局溢出防护
   ---------------------------------------------------------------------------
   这几条是"兜底"性质的，用来防止某个元素把整页撑出横向滚动条。
   横向滚动条一旦出现，整个页面在手机上都能左右晃，体验很差。
   =========================================================================== */

/* 代码块本身横向滚动，不往外撑 */
.prose pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* iOS 上滚动更顺滑 */
}

/* 网格/弹性布局里的项目默认最小宽度是 auto，会被长内容顶开。
   置 0 之后它们才会老实待在容器里。这两条是防溢出的常见做法。 */
.post-layout > *,
.post > * {
  min-width: 0;
}


/* ===========================================================================
   第 12 节  桌面布局（宽屏才生效）
   =========================================================================== */

@media (min-width: 1000px) {
  .post-layout {
    grid-template-columns: 220px minmax(0, 1fr);   /* 左目录 + 右正文 */
    gap: var(--space-12);
  }

  /* 宽屏下不需要折叠：隐藏开关文字、强制展开、变回普通面板 */
  .toc-details {
    border: 0;
    background: none;
    padding: 0;
    margin-bottom: 0;
  }

  .toc-toggle {
    display: none;
  }

  /* 目录在宽屏上跟随滚动 */
  .toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    max-height: calc(100vh - var(--header-height) - var(--space-12));
    overflow-y: auto;
  }

  /* 目录项用左侧竖线表示当前所在位置 */
  .toc-link {
    margin-left: -1px;
    border-left: 2px solid transparent;
  }

  .toc-link.is-active {
    font-weight: 400;
    border-left-color: var(--accent);
  }
}

/* ---- 左侧目录 ---- */
.toc-sidebar { min-width: 0; }

/* ---------------------------------------------------------------------------
   目录的折叠结构（窄屏用）
   ---------------------------------------------------------------------------
   用 HTML 原生的 details/summary：不依赖 JavaScript，自带键盘与触摸支持。
   窄屏：显示「目录 ▸」可点开，默认收起，不占屏
   宽屏（1000px 以上）：隐藏 summary、强制展开，看起来就是普通目录
   --------------------------------------------------------------------------- */

.toc-details {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-soft);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}

.toc-toggle {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--ink-mute);
  list-style: none;          /* 去掉默认三角，Safari 要下面那行 */
  padding: var(--space-1) 0;
}
.toc-toggle::-webkit-details-marker { display: none; }

/* 自己画一个三角，收起时朝右，展开时朝下 */
.toc-toggle::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--space-2);
  transition: transform 0.15s;
}
.toc-details[open] > .toc-toggle::before {
  transform: rotate(90deg);
}

/* 折叠状态下的目录本体：在这里不加定位，让它自然流式排列 */
.toc {
  font-size: var(--text-sm);
}

.toc-title {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.toc-list {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
}

.toc-link {
  display: block;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  color: var(--ink-mute);
  line-height: 1.45;
  transition: color 0.15s, border-color 0.15s;
}

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

.toc-link.is-active {
  color: var(--accent);
  font-weight: 600;
}

/* 三级标题缩进一级 */
.toc-level-h3 { padding-left: var(--space-6); font-size: var(--text-xs); }

/* ---- 正文区 ---- */
.post { min-width: 0; }

/* 正文限制最大宽度：一行太长会导致阅读时串行。
   表格、代码块本身有自己的横向滚动，不受这个限制影响。 */
.post .prose {
  max-width: var(--wrap-narrow);
}

.breadcrumb {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  margin-bottom: var(--space-6);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--accent); }

.post-header {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--rule);
}

.post-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.post-meta {
  margin: 0;
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

.post-category { color: var(--accent); }

.post-footer {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--ink-mute);
}


/* ===========================================================================
   第 10 节  分页
   =========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
}

.pagination .disabled { color: var(--ink-faint); }

.page-info {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}