/* ============================================================================
   idyll — stylesheet

   设计约束，改动前先读一遍：
   1. 底色是暖白而不是纯白，长时间看不刺眼；文字是墨黑而不是纯黑。
   2. 强调色可以不止一种，但每种颜色都要对应一个具体的东西（比如某个分类），
      不是随手挑一个好看的颜色去装饰。颜色是用来区分的，不是用来点缀的。
   3. 层级主要靠字重、字号和留白拉开；卡片这类需要"浮起来"的元素，
      可以用 --shadow-sm/--shadow-md 这一套统一的柔和阴影（见 §1），
      两级足够，不要再叠边框、再叠一层阴影去加重。
   4. 交互动效（悬停、点击反馈）一律 ≤ 0.3s，只做位移和透明度，不做缩放弹跳。
      首次进入页面的整体入场动效不算在这个时限里，但方向不变：
      只做位移和透明度，缓动曲线仍然用 --ease，见 §1 的 rise-in。
   5. 不用渐变。任何场景都不用 —— 背景、按钮、文字、阴影，一律纯色。
   ========================================================================== */

/* --- 1. 设计变量 -------------------------------------------------------- */

:root {
  /* 纸与墨 */
  --bg:            #fcfcfb;
  --bg-soft:       #f4f4f1;
  --bg-hover:      #efefeb;
  --border:        #e5e5e0;
  --border-strong: #d3d3cb;

  --text:   #1b1b19;   /* 正文 */
  --text-2: #55554f;   /* 次要信息 */
  --text-3: #8a8a81;   /* 时间、计数这类背景信息 */

  --accent:       #2f5fd0;
  --accent-hover: #23499f;
  --accent-wash:  rgba(47, 95, 208, .08);

  /* 半透明浮层和语法高亮也收进变量。暗色模式只改这一张表，下面的规则一行都不用动 */
  --nav-bg:      rgba(252, 252, 251, .88);
  --nav-bg-blur: rgba(252, 252, 251, .72);
  --float-bg:    rgba(252, 252, 251, .90);
  --underline:   rgba(47, 95, 208, .34);
  --ok:          #0f6b3f;

  --syn-comment: #6b7280;
  --syn-keyword: #b5296b;
  --syn-string:  #0f6b3f;
  --syn-number:  #1a5fb4;
  --syn-title:   #6b3fbd;
  --syn-type:    #8a4b12;
  --syn-tag:     #15803d;
  --syn-delete:  #a5203a;

  --img-dim: none;   /* 亮色下图片不做处理，见 §12 */

  /* 字体：全部走系统字体栈。不加载 webfont，首屏就没有字体闪烁 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
               Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo,
               Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-base: 17px;
  --lh-base: 1.75;

  /* 尺度。顶栏、正文、页脚共用同一个宽度，
     站点名、标题、版权行才会落在同一条竖线上 */
  --w-text: 720px;
  --gutter: 24px;
  --nav-h:  56px;

  --radius:    9px;
  --radius-sm: 5px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* 卡片层级用的柔和阴影，只有静止/悬停两级。
     颜色取自 --text 的 rgb 分量，不抄外部的十六进制值，跟全文取色逻辑一致 */
  --shadow-sm: 0 8px 16px -4px rgba(27, 27, 25, .05);
  --shadow-md: 0 10px 24px -6px rgba(27, 27, 25, .10);
}

/* 首次进入页面的错落入场，只做位移和透明度。见 §4 的时限例外说明 */
@keyframes rise-in {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* 之前只有首页 hero 会浮入，其它页面一进来就是静止的，从首页跳过去会显得突兀。
   这里统一铺开：每类页面的「抬头」是第一层，紧接着的「内容」是第二层，
   稍微错开一点，不追求跟首页 hero 一样精细的逐项错落 —— 长列表/长正文
   要是每一项都单独错落，反而会显得乱，这里就整块一起浮入 */
.page-head, .post__head, .oops {
  animation: rise-in .6s var(--ease) backwards;
}
.list, .rows, .cloud, .prose {
  animation: rise-in .6s var(--ease) .1s backwards;
}

/* --- 1.5 暗色 ----------------------------------------------------------- */

/*  暗色有两个入口，所以下面这张表出现了两遍：

      1) @media (prefers-color-scheme: dark) —— 跟随系统。没有 JS 也生效，是默认行为。
      2) [data-theme="dark"]                —— 顶栏按钮手动切的，压过系统偏好。

    CSS 没法把「媒体查询」和「属性选择器」并成一个条件，只能各写一遍。
    ⚠️ 改颜色时两块必须同步改，别只改一块。

    两块都限定 screen：打印时自动落回上面那套亮色，纸上永远白底黑字。
    表里只放变量，不放具体规则 —— 需要跟着变的效果一律走变量（见 --img-dim）。

    配色沿用同一条克制的原则：底色是暖黑不是纯黑，正文是米白不是纯白。 */

@media screen and (prefers-color-scheme: dark) {
  /* :not() 是为了让手动切到亮色时能压过系统的暗色偏好 */
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #171715;
    --bg-soft:       #1e1e1b;
    --bg-hover:      #262622;
    --border:        #2d2d28;
    --border-strong: #3f3f38;

    --text:   #e8e8e3;
    --text-2: #b0b0a8;
    --text-3: #8d8d85;

    /* 强调色必须提亮：#2f5fd0 放在暗底上对比度只有 1.9:1，读不清 */
    --accent:       #7aa2f7;
    --accent-hover: #a2c0ff;
    --accent-wash:  rgba(122, 162, 247, .14);

    --nav-bg:      rgba(23, 23, 21, .88);
    --nav-bg-blur: rgba(23, 23, 21, .70);
    --float-bg:    rgba(23, 23, 21, .90);
    --underline:   rgba(122, 162, 247, .38);
    --ok:          #6fc38d;

    --syn-comment: #8b9099;
    --syn-keyword: #f183ac;
    --syn-string:  #8fce9f;
    --syn-number:  #8ab6f0;
    --syn-title:   #c3a6f2;
    --syn-type:    #dda86a;
    --syn-tag:     #86cf95;
    --syn-delete:  #f0909e;

    --img-dim: brightness(.92);

    /* 纯黑阴影在纯黑底上基本看不见，所以不是把同一个黑色阴影调高透明度了事：
       加一圈极淡的内侧亮边模拟"接住一点光"，配合卡片本身在 :hover 时把
       border-color 换成 --border-strong 一起承担层级信号，阴影只是次要辅助 */
    --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .03), 0 8px 16px -4px rgba(0, 0, 0, .35);
    --shadow-md: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px -6px rgba(0, 0, 0, .45);
  }
}

@media screen {
  /* ↑ 上面那张表的副本。只有值，没有新东西 */
  :root[data-theme="dark"] {
    color-scheme: dark;

    --bg:            #171715;
    --bg-soft:       #1e1e1b;
    --bg-hover:      #262622;
    --border:        #2d2d28;
    --border-strong: #3f3f38;

    --text:   #e8e8e3;
    --text-2: #b0b0a8;
    --text-3: #8d8d85;

    --accent:       #7aa2f7;
    --accent-hover: #a2c0ff;
    --accent-wash:  rgba(122, 162, 247, .14);

    --nav-bg:      rgba(23, 23, 21, .88);
    --nav-bg-blur: rgba(23, 23, 21, .70);
    --float-bg:    rgba(23, 23, 21, .90);
    --underline:   rgba(122, 162, 247, .38);
    --ok:          #6fc38d;

    --syn-comment: #8b9099;
    --syn-keyword: #f183ac;
    --syn-string:  #8fce9f;
    --syn-number:  #8ab6f0;
    --syn-title:   #c3a6f2;
    --syn-type:    #dda86a;
    --syn-tag:     #86cf95;
    --syn-delete:  #f0909e;

    --img-dim: brightness(.92);

    --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .03), 0 8px 16px -4px rgba(0, 0, 0, .35);
    --shadow-md: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px -6px rgba(0, 0, 0, .45);
  }

  /* 手动切到亮色：告诉浏览器滚动条和表单控件也用亮色 */
  :root[data-theme="light"] { color-scheme: light; }
}

/* --- 2. 基础 ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 全站唯一的一处滚动留白，标题自己不再重复设 scroll-margin-top ——
     两个一起用会叠加（导航栏高度被补偿了两次），锚点跳转落点会明显偏下 */
  scroll-padding-top: calc(var(--nav-h) + 8px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.32; letter-spacing: -.012em; margin: 0; }
p, ul, ol, figure, pre, blockquote, table { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--accent-hover); }

button { font: inherit; color: inherit; }

/* 选中态用强调色的淡淡一层，比默认的蓝色块柔和 */
::selection { background: var(--accent-wash); color: var(--text); }

/* 键盘焦点始终可见；鼠标点击不出现焦点框 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* 跳到正文：只有用键盘 Tab 才会看到它 */
.skip {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

/* 只给读屏软件的文字。视觉上不占位，但不能用 display:none，那样会被一起念掉 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* --- 3. 容器 ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--w-text);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--top { padding-top: 56px; }

.main { min-height: 62vh; padding-bottom: 96px; }

/* --- 4. 顶栏 ------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav {
    background: var(--nav-bg-blur);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }
}

/* 分隔线只在页面滚动后出现，顶部停留时保持干净 */
.nav.is-stuck { border-bottom-color: var(--border); }

.nav__in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.008em;
  white-space: nowrap;
}
.nav__brand:hover { color: var(--text); }

/* 站点标记：悬停时方块转成菱形。整站最小的一处彩蛋 */
.nav__mark {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  background: var(--accent);
  flex: none;
  transition: transform .4s var(--ease), border-radius .4s var(--ease);
}
.nav__brand:hover .nav__mark { transform: rotate(45deg); border-radius: 1.5px; }

.nav__right { display: flex; align-items: center; gap: 18px; }
.nav__links { display: flex; align-items: center; gap: 22px; }

/* 主题切换。没有 JS 就不该出现 —— 由 head 里的内联脚本给 html 加 .js 来放行 */
.theme {
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.js .theme { display: grid; }
.theme:hover { color: var(--text); background: var(--bg-hover); }

/* 三个图标画在同一个 svg 里天然重叠，按当前模式只显示一个 */
.theme__ico { display: none; }
.theme__ico--auto { display: block; }
:root[data-theme] .theme__ico--auto { display: none; }
:root[data-theme="light"] .theme__ico--light { display: block; }
:root[data-theme="dark"]  .theme__ico--dark  { display: block; }

.nav__link {
  position: relative;
  color: var(--text-2);
  font-size: 14.5px;
  padding-block: 4px;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .28s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }

.nav__link.is-on { color: var(--text); }
.nav__link.is-on::after { transform: scaleX(1); background: var(--accent); }

/* --- 5. 首页开场 -------------------------------------------------------- */

.hero { padding: clamp(32px, 5vw, 48px) 0 clamp(28px, 4vw, 40px); }

.hero__in {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px 40px;
  align-items: start;
}

/* 不设 max-width：交给正文列宽约束，再让 balance 去挑断点。
   写死 ch 值会让中英文其中一种断得很难看 */
.hero__title {
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.024em;
  text-wrap: balance;
}

.hero__sub {
  margin-top: 14px;
  color: var(--text-3);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- 5.1 统计条 ----------------------------------------------------------- */

.hero__stats {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13.5px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.hero__stats .stat-n { color: var(--text); font-weight: 600; }

/* --- 5.2 写作节奏时间轴 ---------------------------------------------------- */

.hero__rhythm {
  position: relative;
  height: 2px;
  margin-top: 20px;
  background: var(--border);
  border-radius: 2px;
}
.hero__rhythm-dot {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

/* --- 5.3 随便看看 --------------------------------------------------------- */

.hero__random {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  color: var(--accent);
  font-size: 14.5px;
  font-weight: 500;
}
.hero__random:hover { color: var(--accent-hover); }
.hero__random span { transition: transform .2s var(--ease); }
.hero__random:hover span { transform: translateX(3px); }

/* --- 5.4 分类速览卡片 ------------------------------------------------------ */

.hero__cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  animation: rise-in .6s var(--ease) backwards;
}
.cat-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
  box-shadow: var(--shadow-md);
  color: var(--text);
}

/* 分类名首字，超大、极淡、斜放在卡片背景里，平时是纹理，悬停才稍微聚焦一点。
   全站统一 15deg，不要每张卡各转各的角度 */
.cat-card__deco {
  position: absolute;
  z-index: 0;
  top: -.1em;
  right: -.04em;
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  opacity: .08;
  transform: rotate(15deg);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.cat-card:hover .cat-card__deco { opacity: .16; transform: rotate(10deg); }

.cat-card__name { position: relative; z-index: 1; font-size: 15.5px; font-weight: 600; }
.cat-card__n    { position: relative; z-index: 1; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.hero__title, .hero__sub, .hero__stats, .hero__rhythm, .hero__random {
  animation: rise-in .6s var(--ease) backwards;
}

/* --- 6. 内页抬头 -------------------------------------------------------- */

/* 只设上下。用 padding 简写会把 .wrap 的左右内边距一起清零，页面就贴到屏幕边上了 */
.page-head { padding-block: clamp(52px, 8vw, 84px) clamp(24px, 4vw, 40px); }

.page-head__kicker {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}

.page-head__title {
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -.022em;
  text-wrap: balance;
}

.page-head__meta {
  margin-top: 10px;
  color: var(--text-3);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* --- 7. 文章列表 -------------------------------------------------------- */

.year {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 38px 0 6px;
}
.year:first-child { margin-top: 0; }

.year__n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.year__rule { flex: 1; height: 1px; background: var(--border); }

.list { display: flex; flex-direction: column; }

/* 整行可点。日期和正文用网格对齐，多篇文章的标题会落在同一条竖线上 */
.item {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0 20px;
  align-items: start;
  padding: 16px;
  margin-inline: -16px;
  border-radius: var(--radius);
  color: inherit;
  transition: background .18s var(--ease);
}
.item:hover { background: var(--bg-soft); color: inherit; }

.item__date {
  font-size: 13px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  padding-top: .42em;
}

.item__title {
  font-size: 18.5px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.014em;
}

/* 箭头平时藏起来，悬停时从左边滑出来 */
.item__arrow {
  display: inline-block;
  margin-left: .34em;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.item:hover .item__arrow { opacity: 1; transform: none; }

.item__desc {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
}

.item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }

/* --- 8. 标签 ------------------------------------------------------------ */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: nowrap;
}

.pill--link { transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease); }
.pill--link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}

/* --- 9. 分页 ------------------------------------------------------------ */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.pager__btn {
  color: var(--text-2);
  font-size: 14.5px;
  padding: 6px 2px;
  transition: color .16s var(--ease);
}
.pager__btn:hover { color: var(--accent); }
.pager__btn.is-off { color: var(--text-3); opacity: .45; }

.pager__count {
  color: var(--text-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* --- 10. 分类列表 / 标签云 ---------------------------------------------- */

.rows { list-style: none; padding: 0; }

.rows__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 12px;
  margin-inline: -12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: background .18s var(--ease);
}
.rows__link:hover { background: var(--bg-soft); color: var(--accent); }

.rows__name { font-size: 16.5px; font-weight: 500; flex: none; }

/* 虚线把名字和数量连起来，像目录页 */
.rows__rule {
  flex: 1;
  height: 0;
  border-bottom: 1px dashed var(--border-strong);
  opacity: .8;
  transform: translateY(-3px);
}

.rows__n {
  flex: none;
  color: var(--text-3);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.cloud { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }

.cloud__tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease), transform .18s var(--ease);
}
.cloud__tag:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
  transform: translateY(-1px);
}

/* 只分三档，密集的标签页也不会显得乱 */
.cloud__tag--1 { font-size: 14px; }
.cloud__tag--2 { font-size: 15.5px; }
.cloud__tag--3 { font-size: 17px; font-weight: 500; color: var(--text); }

.cloud__n {
  font-size: 11.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* --- 11. 文章页 --------------------------------------------------------- */

.post__head { padding-block: clamp(52px, 8vw, 88px) clamp(22px, 3.5vw, 34px); }

.post__kicker { margin-bottom: 12px; font-size: 13.5px; }
.post__kicker a { color: var(--accent); }
.post__kicker .sep { color: var(--text-3); margin-inline: 6px; }

.post__title {
  font-size: clamp(27px, 4.4vw, 39px);
  line-height: 1.24;
  letter-spacing: -.026em;
  text-wrap: balance;
}

.post__lede {
  margin-top: 14px;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.6;
}

.post__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.post__meta .dot { opacity: .55; }

.post__foot { margin-top: 64px; }
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* 上一篇 / 下一篇 */
.nextprev {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.nextprev__card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nextprev__card:hover { border-color: var(--border-strong); background: var(--bg-soft); color: var(--text); }
.nextprev__card--r { text-align: right; align-items: flex-end; }

.nextprev__label { color: var(--text-3); font-size: 12.5px; letter-spacing: .02em; }

.nextprev__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 11.5 相关文章 -------------------------------------------------------- */

.related { margin-top: 48px; }

.related__label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}

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

/* 悬停背景 + 圆角，跟分类/标签页 .rows__link 是同一套列表行语言 */
.related__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  margin-inline: -12px;
  border-radius: var(--radius-sm);
  color: inherit;
  transition: background .18s var(--ease);
}
.related__link:hover { background: var(--bg-soft); color: inherit; }
.related__link:hover .item__arrow { opacity: 1; transform: none; }

.related__title { font-size: 15.5px; font-weight: 500; line-height: 1.4; }

.related__date {
  flex: none;
  color: var(--text-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* --- 11.6 系列导航 -------------------------------------------------------- */

.series-nav { margin-top: 48px; }

.series-nav__label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}

.series-nav__title {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  transition: color .16s var(--ease);
}
.series-nav__title:hover { color: var(--accent); }

/* 编号列表：详情页和文章页的系列导航共用，跟 .related__link 是同一套列表行语言 */
.series-list { list-style: none; padding: 0; margin: 0; }

.series-list__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px;
  margin-inline: -12px;
  border-radius: var(--radius-sm);
  color: inherit;
  transition: background .18s var(--ease);
}
.series-list__link:hover { background: var(--bg-soft); color: inherit; }
.series-list__link:hover .item__arrow { opacity: 1; transform: none; }

.series-list__n {
  flex: none;
  width: 1.4em;
  color: var(--text-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.series-list__title { font-size: 15.5px; font-weight: 500; line-height: 1.4; }

/* 当前这一篇：不可点，用强调色代替下划线链接标出来 */
.series-list__item.is-current .series-list__n,
.series-list__item.is-current .series-list__title {
  color: var(--accent);
}

/* --- 11.7 评论 ------------------------------------------------------------ */

/* iframe 内部是 giscus 自己的页面，样式管不到，这里只负责跟正文对齐的外部间距 */
.comments { margin-top: 56px; }

.comments__label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

/* --- 12. 正文排版 ------------------------------------------------------- */

.prose { color: var(--text); }
.prose--intro { margin-bottom: 36px; color: var(--text-2); font-size: 16px; }

/* 用相邻兄弟选择器统一节奏，比给每个标签单独设 margin 好维护 */
.prose > * + * { margin-top: 1.15em; }

.prose h2, .prose h3, .prose h4 { position: relative; }
.prose > h2 { margin-top: 2.1em; font-size: 1.4em; letter-spacing: -.018em; }
.prose > h3 { margin-top: 1.8em; font-size: 1.18em; }
.prose > h4 { margin-top: 1.6em; font-size: 1.02em; }

.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--underline); transition: text-decoration-color .16s var(--ease), color .16s var(--ease); }
.prose a:hover { text-decoration-color: currentColor; }

.prose strong { font-weight: 600; }

.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--text-3); }

.prose blockquote {
  padding-left: 1.15em;
  border-left: 2px solid var(--border-strong);
  color: var(--text-2);
}
.prose blockquote > * + * { margin-top: .8em; }

.prose hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin-block: 2.6em;
}

/* 暗底上纯白的图片会晃眼，压一点亮度；鼠标移上去还原。亮色下 --img-dim 是 none */
.prose img {
  border-radius: var(--radius);
  margin-inline: auto;
  filter: var(--img-dim);
  transition: filter .2s var(--ease);
}
.prose img:hover { filter: none; }

.prose figcaption {
  margin-top: .7em;
  color: var(--text-3);
  font-size: .85em;
  text-align: center;
}

/* 只选 .prose 的直接子元素，代码块内部的行号表格嵌在 figure.highlight 里，选不到 */
.prose > table {
  width: fit-content;
  max-width: 100%;
  border-collapse: collapse;
  font-size: .93em;
  display: block;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.prose > table th, .prose > table td {
  padding: 9px 14px;
  border: 1px solid var(--border);
  text-align: left;
}
.prose > table th { background: var(--bg-soft); font-weight: 600; }

/* border-collapse 底下直接给 table 加圆角，单元格自己的边框在圆角处经常会
   戳穿出来（各浏览器表现还不一致），所以最外圈单元格的外侧边框单独摘掉，
   边框和圆角统一交给 table 自己那一圈 */
.prose > table tr:first-child :is(th, td) { border-top: 0; }
.prose > table tr:last-child :is(th, td)  { border-bottom: 0; }
.prose > table :is(th, td):first-child    { border-left: 0; }
.prose > table :is(th, td):last-child     { border-right: 0; }

.prose kbd, .shortcuts__list kbd {
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: .8em;
}

/* 标题锚点：只在悬停该标题时淡入 */
.anchor {
  position: absolute;
  left: -.78em;
  top: 0;
  color: var(--text-3);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity .16s var(--ease);
}
.anchor:hover { color: var(--accent); }
.prose h2:hover .anchor,
.prose h3:hover .anchor,
.prose h4:hover .anchor,
.anchor:focus-visible { opacity: 1; }

/* 站外链接标一个小箭头，点之前就知道会离开本站 */
.prose a[data-ext]::after {
  content: "↗";
  margin-left: .16em;
  font-size: .76em;
  vertical-align: .14em;
  opacity: .5;
  text-decoration: none;
}

/* --- 13. 代码 ----------------------------------------------------------- */

.prose :not(pre) > code {
  padding: .12em .38em;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: .855em;
  word-break: break-word;
}

.cb { position: relative; margin-block: 1.7em; }
.cb > * { margin: 0 !important; }

figure.highlight,
.prose pre {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--text);
}

.prose pre { padding: 15px 17px; }
.prose pre code { font-family: inherit; font-size: inherit; background: none; border: 0; padding: 0; }

figure.highlight table { width: 100%; border-collapse: collapse; }
figure.highlight td { border: 0; padding: 0; vertical-align: top; }
figure.highlight pre { margin: 0; padding: 0; background: none; border: 0; overflow: visible; }
figure.highlight .line { display: block; min-height: 1.72em; }
figure.highlight br { display: none; }

/* 行号列横向滚动时钉在左边，长代码往右拉也不会丢失行号 */
figure.highlight .gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 1%;
  padding: 15px 12px 15px 15px;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  text-align: right;
  color: var(--text-3);
  opacity: .65;
  user-select: none;
  -webkit-user-select: none;
}
figure.highlight .code { padding: 15px 17px; width: 100%; }

figure.highlight figcaption {
  padding: 9px 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12.5px;
  text-align: left;
}
figure.highlight figcaption a { float: right; }

/* 语法配色：低饱和，读代码不刺眼 */
figure.highlight .comment,
figure.highlight .quote      { color: var(--syn-comment); font-style: italic; }
figure.highlight .keyword,
figure.highlight .selector-tag,
figure.highlight .literal,
figure.highlight .doctag     { color: var(--syn-keyword); }
figure.highlight .string,
figure.highlight .regexp,
figure.highlight .addition   { color: var(--syn-string); }
figure.highlight .number,
figure.highlight .symbol,
figure.highlight .bullet,
figure.highlight .variable,
figure.highlight .template-variable { color: var(--syn-number); }
figure.highlight .title,
figure.highlight .section,
figure.highlight .function   { color: var(--syn-title); }
figure.highlight .type,
figure.highlight .built_in,
figure.highlight .class      { color: var(--syn-type); }
figure.highlight .attr,
figure.highlight .attribute,
figure.highlight .meta       { color: var(--syn-number); }
figure.highlight .tag        { color: var(--syn-tag); }
figure.highlight .deletion   { color: var(--syn-delete); }
figure.highlight .emphasis   { font-style: italic; }
figure.highlight .strong     { font-weight: 600; }

/* 复制按钮：平时不在，鼠标进来才出现 */
.copy {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.7;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .18s var(--ease), transform .18s var(--ease),
              color .16s var(--ease), border-color .16s var(--ease);
}
.cb:hover .copy,
.copy:focus-visible { opacity: 1; transform: none; }
.copy:hover { color: var(--accent); border-color: var(--accent); }
.copy.is-done { color: var(--ok); border-color: var(--ok); opacity: 1; transform: none; }

/* 剪贴板不可用时按钮变成一句提示，不做 alert */
.copy.is-fail { color: var(--syn-delete); border-color: var(--syn-delete); opacity: 1; transform: none; }

/* --- 14. 空状态 / 404 --------------------------------------------------- */

.empty {
  padding: 44px 0;
  color: var(--text-3);
  font-size: 15.5px;
  text-align: center;
}

.oops { padding-block: clamp(80px, 15vw, 150px) 100px; text-align: center; }

.oops__code {
  font-size: clamp(56px, 13vw, 92px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--border-strong);
  font-variant-numeric: tabular-nums;
}

.oops__title { margin-top: 20px; font-size: clamp(21px, 3.4vw, 27px); letter-spacing: -.02em; }
.oops__text  { margin-top: 12px; color: var(--text-3); font-size: 15.5px; text-wrap: pretty; }
.oops__home  { display: inline-block; margin-top: 26px; font-size: 15.5px; }

/* --- 14.5 目录 ----------------------------------------------------------- */

/* 浮在正文列右侧的空白里，不挤占 .wrap 的列宽，所以够宽才出现。
   position: fixed 相对视口定位，跟 DOM 里塞在哪一层没关系 */
.toc {
  display: none;
  position: fixed;
  top: calc(var(--nav-h) + 40px);
  left: calc(50% + (var(--w-text) / 2) + 40px);
  width: 196px;
  max-height: calc(100vh - var(--nav-h) - 80px);
  overflow-y: auto;
}

/* 768(列宽+两侧gutter) 的一半 + 196 宽的目录 + 两侧各留 40px 呼吸感，
   凑一个明显不会跟正文重叠的下限 */
@media (min-width: 1320px) {
  .toc { display: block; }
}

.toc__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 11px;
}

.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--border);
}
.toc__list--sub { margin-block: 1px 3px; }

.toc__link {
  display: block;
  overflow: hidden;
  padding: 5px 4px 5px 13px;
  margin-left: -1px;
  border-left: 1.5px solid transparent;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.toc__link:hover { color: var(--text); }
.toc__link--sub { padding-left: 25px; font-size: 12.5px; }

.toc__link.is-on {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}

/* --- 15. 页脚 ----------------------------------------------------------- */

.foot { border-top: 1px solid var(--border); padding-block: 32px 40px; }

.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 24px;
}

.foot__note { color: var(--text-2); font-size: 14px; margin-bottom: 6px; }
.foot__copy { color: var(--text-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }

.foot__right { display: flex; flex-wrap: wrap; gap: 18px; }
.foot__link { color: var(--text-2); font-size: 13.5px; }
.foot__link:hover { color: var(--accent); }
.foot__link--dim { color: var(--text-3); }

/* --- 16. 浮层：进度条 / 回到顶部 ---------------------------------------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .1s linear;
}

.totop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--float-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              visibility .25s, color .16s var(--ease), border-color .16s var(--ease);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { color: var(--accent); border-color: var(--accent); }

/* 按住 Shift 呼出，跟 .totop 是同一套浮层语言（float-bg + blur），
   放左下角跟 .totop 错开，两个都出现时不会叠在一起 */
.shortcuts {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 45;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--float-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  pointer-events: none;
}
.shortcuts.is-on { opacity: 1; visibility: visible; transform: none; }

.shortcuts__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}

.shortcuts__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.shortcuts__list li { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.shortcuts__text { margin-left: 3px; }

/* --- 16.5 关于页 --------------------------------------------------------- */

/* bento 网格：身份卡占左列两行，自述和技能占右列上下，数据条贯穿底部整行 */
.about__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  grid-template-areas:
    "id     bio"
    "id     skills"
    "stats  stats";
  gap: 16px;
}

.card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  animation: rise-in .6s var(--ease) backwards;
}

.card--id     { grid-area: id; position: relative; overflow: hidden; }
.card--bio    { grid-area: bio; }
.card--skills { grid-area: skills; }
.card--stats  { grid-area: stats; }

.card--bio    { animation-delay: 60ms; }
.card--skills { animation-delay: 100ms; }
.card--stats  { animation-delay: 140ms; }

.card__label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

/* 身份卡：姓名首字当背景纹理，跟首页分类速览卡片（.cat-card__deco）是同一个手法，
   全站只有这一处「大字做装饰」的语言，两处保持同一个角度/透明度，才像是同一套设计 */
.about__deco {
  position: absolute;
  z-index: 0;
  top: -.06em;
  right: -.03em;
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  opacity: .07;
  transform: rotate(15deg);
  pointer-events: none;
}

/* 真正的内容叠在装饰字上面，见 .about__deco 同一段注释里的堆叠原理 */
.about__id-content { position: relative; z-index: 1; }

.about__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--bg);
}
.about__avatar--fallback {
  display: grid;
  place-items: center;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 32px;
  font-weight: 600;
}

.about__name  { margin-top: 18px; font-size: 23px; font-weight: 700; letter-spacing: -.016em; }
.about__title { margin-top: 5px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }

.about__location {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  color: var(--text-3);
  font-size: 13.5px;
}

.about__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* 自述：card 里嵌一份 .prose，字号比正文稍小，跟卡片的克制感一致 */
.card--bio.prose { color: var(--text-2); font-size: 15.5px; }
.card--bio.prose > * + * { margin-top: .9em; }
.card--bio.prose > :first-child { font-size: 1.05em; color: var(--text); }

.about__skills { display: flex; flex-wrap: wrap; gap: 8px; }

/* 技能标签：实底而不是描边，跟标签云的 .pill 拉开一点差别 ——
   同一个 chip 形状用在两处会让「技能」看起来像随手打的标签，不是有意整理过的清单 */
.skill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

/* 数据条：跟首页 hero 统计是同一套「大数字 + 小标签」，数字还共用同一个
   滚动计数动画（见 main.js 的 .stat-n[data-count] 选择器，不分页面全局生效） */
.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.about__stat-n {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.016em;
  font-variant-numeric: tabular-nums;
}
.about__stat-label {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12.5px;
}

.about__extra { margin-top: 40px; }

/* --- 17. 窄屏 ----------------------------------------------------------- */

@media (max-width: 720px) {
  :root { --gutter: 20px; --fs-base: 16.5px; }

  .nav__links { gap: 16px; }
  .nav__link  { font-size: 14px; }

  /* 日期挪到标题上方，窄屏不再挤成两列 */
  .item {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 14px;
    margin-inline: -14px;
  }
  .item__date { padding-top: 0; font-size: 12.5px; }
  .item__title { font-size: 17.5px; }

  /* 触屏没有 hover，箭头和复制按钮常驻 */
  .item__arrow { opacity: 1; transform: none; }
  .copy { opacity: 1; transform: none; }

  .nextprev { grid-template-columns: 1fr; }
  .nextprev__card--r { text-align: left; align-items: flex-start; }

  .foot__in { flex-direction: column; align-items: flex-start; }

  .totop { right: 14px; bottom: 14px; }
  .shortcuts { left: 14px; bottom: 14px; }

  .hero { padding: 24px 0 28px; }
  .hero__in { grid-template-columns: 1fr; gap: 28px; }

  .about__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "id" "bio" "skills" "stats";
  }
  .about__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .nav__name { display: none; }
  .hero__cats { grid-template-columns: 1fr; }
}

/* --- 18. 无障碍与打印 --------------------------------------------------- */

/* 系统开了「减少动态效果」就把动画全部停掉 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .item__arrow, .copy { opacity: 1; transform: none; }
}

@media print {
  :root { --fs-base: 11.5pt; }
  .nav, .foot, .totop, .progress, .pager, .nextprev, .copy, .skip, .item__arrow,
  .toc, .related, .comments, .shortcuts { display: none !important; }
  body { background: #fff; color: #000; }
  .wrap { max-width: none; padding: 0; }
  .prose a { color: #000; text-decoration: underline; }
  /* 打印版把链接地址跟在后面，纸上也能查到出处 */
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  figure.highlight, .prose pre { border-color: #ccc; break-inside: avoid; }
  .prose h2, .prose h3 { break-after: avoid; }
}