/* 绘念の窝 · 布局 + 主题参考 bitnb.io（土とデジタル）
   暖纸白 / 暖棕黑 / 米色描边；编辑式大字号 hero + 竖向细线编号列表 + 大写等宽小标签 */

:root {
  color-scheme: light;     /* 声明站点配色方案：手机浏览器表单控件/滚动条跟随站点主题而非系统 */
  --bg: #f8f4ef;          /* 暖纸白 */
  --bg-soft: #f0ece6;     /* 浅暖灰 */
  --surface: #ffffff;
  --border: #e4ddd1;      /* 米色描边 */
  --text: #2e2521;        /* 暖棕黑 */
  --muted: #6f6660;       /* 暖灰 */
  --accent: #9c5b43;      /* 陶土色（克制点缀） */
  --accent-soft: rgba(156, 91, 67, .12);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --radius: .4rem;
  --maxw: 1000px;
  --shadow: 0 1px 2px rgba(46, 37, 33, .05), 0 8px 24px rgba(46, 37, 33, .05);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181514;
  --bg-soft: #221d1a;
  --surface: #221d1a;
  --border: #3a322d;
  --text: #f3ede4;
  --muted: #b5ab9f;
  --accent: #c98b6f;
  --accent-soft: rgba(201, 139, 111, .16);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;   /* 主题切换柔和过渡 */
}
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 16px; top: 14px; background: var(--text); color: var(--bg); padding: 8px 12px; border-radius: 8px; z-index: 100; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background-color .3s ease;
}
.header-inner { display: flex; align-items: center; gap: 18px; height: 68px; }
/* PC 端：站名居左（上下两行）、导航真居中、时间天气+主题按钮靠右 */
@media (min-width: 721px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-nav { margin: 0; justify-self: center; }
  .header-right { display: flex; align-items: center; gap: 18px; justify-self: end; }
}
/* 手机端：header-right 展开回流，保持原布局（meta 隐藏、导航靠右） */
@media (max-width: 720px) {
  .header-right { display: contents; }
}
.brand {
  font-weight: 800; letter-spacing: -.02em; font-size: 1.02rem; line-height: 1.25; white-space: nowrap;
  transition: color .15s ease;
}
.brand:hover { color: var(--accent); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.site-nav .nav-sep { color: var(--muted); opacity: .55; user-select: none; font-family: var(--mono); }
.site-nav a { white-space: nowrap;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .16em;
  color: var(--muted); padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover { color: var(--text); }
.site-nav a.active { color: var(--text); border-bottom-color: var(--text); }
/* 「文章」抽屉导航：桌面端按钮不可跳转，hover / 键盘聚焦 / 点击展开栏目（纯 CSS + 少量 JS 兜底） */
.nav-drawer-wrap { position: relative; display: inline-flex; }
.site-nav .nav-trigger {
  background: none; border: 0; cursor: default; padding: 6px 0; white-space: nowrap;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .16em;
  color: var(--muted); border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav .nav-trigger:hover,
.nav-drawer-wrap:focus-within .nav-trigger { color: var(--text); }
.site-nav .nav-trigger.active { color: var(--text); border-bottom-color: var(--text); }
.nav-caret { font-size: .6rem; opacity: .7; }
.nav-drawer {
  position: absolute; top: 100%; left: 50%; margin: 0; padding: 6px; list-style: none; min-width: 132px;
  transform: translate(-50%, -6px);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.nav-drawer-wrap:hover .nav-drawer,
.nav-drawer-wrap:focus-within .nav-drawer,
.nav-drawer-wrap.is-open .nav-drawer {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0); transition-delay: 0s;
}
.nav-drawer li a {
  display: block; padding: 8px 12px; border-bottom: 0;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .16em;
  color: var(--muted); white-space: nowrap; border-radius: calc(var(--radius) - 2px);
  transition: color .15s ease, background-color .15s ease;
}
.nav-drawer li a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-drawer .nav-drawer-all { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.nav-mobile-articles { display: none; }
.theme-toggle {
  background: none; border: 1px solid var(--border); color: var(--text);
  width: 36px; height: 36px; border-radius: var(--radius); cursor: pointer; font-size: 1rem;
  transition: transform .3s ease, border-color .15s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: rotate(180deg); }
.theme-toggle:active { transform: rotate(180deg) scale(.92); }

/* ---------- hero（像素动态花 + 宣言） ---------- */
.hero-pixel { position: relative; }
.pixel-flower { display: block; width: 100%; height: auto; }
/* 手机端：树满宽在上、文字在下（保持原布局）；PC 端：文字左、缩小后的树右 */
.hero-row { display: flex; flex-direction: column-reverse; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.hero-art { width: 100%; }
@media (min-width: 721px) {
  .hero-row { flex-direction: row; align-items: center; gap: 48px; }
  .hero-caption { flex: 1 1 auto; min-width: 0; }
  .hero-art { flex: 0 0 360px; width: 360px; }
}
/* 页头站点 meta：城市 / 时间 / 温度（参考 bitnb 左上角信息块） */
.site-meta { padding-left: 22px; border-left: 1px solid var(--border); }
.site-meta p { margin: 0; }
.site-meta-line {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; line-height: 1.7; color: var(--text);
}
.site-meta-line.muted { color: var(--muted); }
.hero-caption { padding-top: 10px; padding-bottom: 40px; }
.hero { padding: 88px 28px 40px; }
.hero-label {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 22px;
}
.hero-statement {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  letter-spacing: -.045em; line-height: 1.04; margin: 0; font-weight: 800;
}
.hero-sub { color: var(--muted); font-size: 1rem; margin: 26px 0 0; max-width: 46ch; }

/* ---------- section ---------- */
.section { padding: 8px 28px 24px; }
.section-head {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 30px; margin-bottom: 8px;
}
.section-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.section-more { display: inline-block; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--muted); border-bottom: 1px solid transparent; transition: color .15s ease, transform .18s ease; }
.section-more:hover { color: var(--accent); transform: translateX(3px); }
.section-label {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 700; margin: 0; color: var(--text);
}
.section-label-cn { color: var(--muted); margin-left: 12px; letter-spacing: .04em; font-size: 1rem; font-weight: 400; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 7px 13px; border-radius: var(--radius); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}
.filter-btn:hover { color: var(--text); border-color: var(--text); }
.filter-btn:active { transform: scale(.95); }
.filter-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.search {
  font-family: var(--sans); background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 9px 13px; border-radius: var(--radius); min-width: 220px; font-size: .9rem;
}
.search:focus { border-color: var(--accent); }

/* ---------- 表格列式列表（参考 bitnb Projects 表格） ---------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-row { border-bottom: 1px solid var(--border); }
.post-row:first-child { border-top: 1px solid var(--border); }
.post-row-link {
  display: grid; grid-template-columns: 200px 1fr 110px 30px; gap: 22px; align-items: center;
  padding: 12px 4px; transition: padding .18s ease, background .15s ease;
}
.post-row-link:hover { padding-left: 14px; background: color-mix(in srgb, var(--bg-soft) 60%, transparent); }
.post-row-head {
  display: grid; grid-template-columns: 200px 1fr 110px 30px; gap: 22px; align-items: center;
  padding: 8px 4px;
}
.post-row-head > span {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.post-cat {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-cell-title { min-width: 0; }
.post-row-link .post-title {
  font-size: 1rem; letter-spacing: 0; line-height: 1.5;
  margin: 0; font-weight: 400; transition: color .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-row-link:hover .post-title { color: var(--accent); }
.post-excerpt { display: none; }
.post-date {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: var(--muted);
  text-align: left; white-space: nowrap;
}
.post-arrow {
  font-family: var(--mono); font-size: 1.05rem; color: var(--muted); justify-self: end;
  transition: transform .18s ease, color .15s ease;
}
.post-row-link:hover .post-arrow { transform: translate(4px, 4px); color: var(--accent); }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-block;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-soft);
  padding: 4px 9px; border-radius: var(--radius);
  transition: background .15s ease, color .15s ease, transform .18s ease;
}
.tag:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.empty { text-align: center; color: var(--muted); padding: 48px 0; font-family: var(--mono); letter-spacing: .1em; }

/* ---------- tag 索引网格 ---------- */
.tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.tag-card {
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 26px 24px; transition: background .15s ease;
}
.tag-card:hover { background: var(--bg-soft); }
.tag-name { font-weight: 700; letter-spacing: -.01em; font-size: 1.15rem; }
.tag-count { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); }

/* ---------- post 详情 ---------- */
.post { padding: 72px 28px 16px; }
.post-header { margin-bottom: 40px; }
.post-kicker {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 20px;
}
.post-meta { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; text-transform: uppercase; }
.post-title { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.04em; line-height: 1.08; margin: 0 0 18px; font-weight: 800; }
.post-body { font-size: 1.08rem; max-width: 70ch; }
.page-post .post { max-width: 46em; }
.post-body h2 { font-size: 1.5rem; letter-spacing: -.02em; margin-top: 2.2em; font-weight: 700; }
.post-body h3 { font-size: 1.2rem; letter-spacing: -.01em; margin-top: 1.8em; font-weight: 700; }
.post-body p { margin: 1.1em 0; }
.post-body blockquote {
  margin: 1.6em 0; padding: .6em 1.2em; color: var(--muted);
  border-left: 2px solid var(--accent); background: var(--bg-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
.post-body code { font-family: var(--mono); background: var(--bg-soft); padding: 2px 6px; border-radius: 5px; font-size: .88em; }
.post-body pre { background: var(--bg-soft); border: 1px solid var(--border); padding: 18px; border-radius: var(--radius); overflow: auto; }
.post-body pre code { background: none; padding: 0; }
.post-body img { max-width: 100%; border-radius: var(--radius); }
.post-body a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
.post-body a:hover { border-bottom-color: var(--accent); }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-footer { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); }
.back-link { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--muted); }
.back-link:hover { color: var(--accent); }

/* ---------- about ---------- */
.about-body { max-width: 70ch; }
.about-body h1 { font-size: 1.8rem; letter-spacing: -.03em; margin-top: 0; }
/* 个人形象 IP：手机端置顶居中，PC 端在 hero 文字右侧 */
.about-ip { margin: 0 auto; width: 100%; max-width: 300px; order: -1; }
.about-ip img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
@media (min-width: 721px) {
  .about-hero { display: flex; align-items: center; gap: 64px; }
  .about-hero .hero-caption { flex: 1 1 auto; min-width: 0; padding-bottom: 0; }
  .about-ip { order: 2; flex: 0 0 320px; width: 320px; }  /* PC：图在文字右侧（红框位） */
}
.about-sign {
  margin-top: 3em; padding-top: 18px; border-top: 1px dashed var(--border);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .3em;
  color: var(--muted); text-align: right;
}

/* ---------- footer ---------- */
.site-footer { margin-top: 90px; border-top: 1px solid var(--border); padding: 32px 0; color: var(--muted); font-size: .82rem; }
.site-footer p { margin: 5px 0; }
.site-footer .muted { font-family: var(--mono); letter-spacing: .04em; }
.footer-mail { font-family: var(--mono); letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--border); transition: color .15s ease, border-color .15s ease; }
.footer-mail:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- comments (Giscus) ---------- */
.comments { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border); }
.comments-title {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 22px; font-weight: 700;
}
.comments-title .section-label-cn { margin-left: 10px; letter-spacing: .1em; opacity: .7; }
.giscus-wrap { min-height: 120px; }
.giscus-hint {
  font-family: var(--mono); font-size: .8rem; line-height: 1.7; color: var(--muted);
  background: var(--bg-soft); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin: 0;
}
.giscus-hint code { color: var(--accent); }

/* ---------- projects ---------- */
.proj-list { list-style: none; margin: 0; padding: 0; }
.proj-row-link {
  display: grid; grid-template-columns: 110px 1fr 80px 30px; gap: 8px 18px; align-items: baseline;
  padding: 20px 0; border-top: 1px solid var(--border);
  transition: padding-left .18s ease;
}
a.proj-row-link:hover { padding-left: 14px; }
a.proj-row-link:hover .proj-name { color: var(--accent); }
a.proj-row-link:hover .post-arrow { transform: translate(3px, 2px); color: var(--accent); }
.proj-row-link.is-plain { cursor: default; }
.proj-row-head { border-top: none; padding: 0 0 14px; }
.proj-row-head .proj-status, .proj-row-head .proj-year {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.proj-status {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; justify-self: start; white-space: nowrap;
}
.proj-status.is-online { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.proj-name { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; transition: color .15s ease; }
.proj-tags { margin-left: 12px; font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .06em; color: var(--muted); }
.proj-desc { margin: 6px 0 0; font-size: .86rem; color: var(--muted); line-height: 1.7; }
.proj-year { font-family: var(--mono); font-size: .78rem; color: var(--muted); }

@media (max-width: 720px) {
  .site-meta { display: none; }
  .post-row-link { grid-template-columns: 1fr 30px; gap: 8px 14px; }
  .post-row-head { display: none; }
  .post-cat { grid-column: 1 / -1; }
  .post-date { grid-column: 1; }
  .post-row-link .post-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .post-excerpt { display: none; }
  .post-row-head { display: none; }
  .section-head { flex-direction: column; align-items: stretch; }
  .search { width: 100%; }
  .site-nav { gap: 9px; }
  .site-nav .nav-sep { display: none; }
  /* 方案 A：移动端无 hover，抽屉隐藏，「文章」变普通链接直达归档页 */
  .site-nav .nav-trigger, .site-nav .nav-drawer { display: none; }
  .nav-mobile-articles { display: inline; }
  .proj-row-link { grid-template-columns: 1fr 30px; gap: 8px 14px; }
  .proj-row-head { display: none; }
  .proj-status { grid-column: 1 / -1; justify-self: start; }
  .proj-year { grid-column: 1; }
}

/* ==================================================================
   动效层（纯 CSS，零 JS / 零新增请求）
   原则：只动 transform / opacity（GPU 合成，不触发重排重绘）；
   入场动画用 backwards 填充（播完不残留合成层）；
   用户系统开启「减弱动态效果」时全部自动关闭。
   ================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---- 跨文档视图过渡：同源页面跳转自动淡入淡出（Chromium 126+ / Safari 18.2+，其余浏览器无感知跳过） ---- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .2s ease both; }
  ::view-transition-new(root) { animation: vt-in .3s ease both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

  @keyframes fade-up   { from { opacity: 0; transform: translateY(14px); } }
  @keyframes fade-down { from { opacity: 0; transform: translateY(-10px); } }
  @keyframes fade-in   { from { opacity: 0; } }

  /* ---- 首屏入场编排：页头 → 标签 → 大标题 → 副标题 → 像素树 → 列表（延迟统一见文件末尾「入场节奏」） ---- */
  .site-header     { animation: fade-down .5s ease backwards; }
  .hero-label      { animation: fade-up   .6s ease backwards; }
  .hero-statement  { animation: fade-up   .75s ease backwards; }
  .hero-sub        { animation: fade-up   .75s ease backwards; }
  .hero-art        { animation: fade-in   .9s  ease backwards; }  /* 只淡入，不位移：canvas 测量不受影响 */
  .hero > *:nth-child(1) { animation: fade-up .6s  ease backwards; }
  .hero > *:nth-child(2) { animation: fade-up .75s ease backwards; }
  .hero > *:nth-child(3) { animation: fade-up .75s ease backwards; }

  /* ---- 列表行错峰浮现（首页 3 行 / 文章页 9 行 / 标签卡 / 项目行 通用） ---- */
  .post-row, .tag-grid > *, .proj-list > * { animation: fade-up .65s ease backwards; }
  .post-row:nth-child(n+12),   .tag-grid > *:nth-child(n+12),   .proj-list > *:nth-child(n+12)   { animation-delay: 1.3s; }

  /* ---- 文章详情页：标题区 → 正文段落 → 页脚 逐段浮现 ---- */
  .post-header { animation: fade-up .6s ease backwards; }
  .post-body > * { animation: fade-up .6s ease backwards; }
  .post-body > *:nth-child(n+8) { animation-delay: .9s; }
  .post-footer { animation: fade-in .6s ease backwards; }
  .about-body  { animation: fade-up .6s ease backwards; }
}

/* 系统开启「减弱动态效果」时：不做位移/滚动闪烁，但保留纯透明度淡入（无障碍允许的柔和呈现） */
@media (prefers-reduced-motion: reduce) {
  @keyframes rm-fade { from { opacity: 0; } }
  .site-header, .hero-label, .hero-statement, .hero-sub, .hero-art,
  .hero > *, .post-row, .tag-grid > *, .proj-list > *,
  .post-header, .post-body > *, .post-footer, .about-body {
    animation: rm-fade .9s ease backwards;
  }
}

/* ---- 入场节奏（慢速编排，两种动效模式共用；置于文件末尾以覆盖 shorthand 默认延迟） ---- */
.site-header { animation-delay: 0s; }
.hero-label, .hero > *:nth-child(1) { animation-delay: .12s; }
.hero-statement, .hero > *:nth-child(2) { animation-delay: .26s; }
.hero-sub, .hero > *:nth-child(3) { animation-delay: .44s; }
.hero-art { animation-delay: .55s; }
.post-row:nth-child(1),    .tag-grid > *:nth-child(1),    .proj-list > *:nth-child(1)    { animation-delay: .5s; }
.post-row:nth-child(2),    .tag-grid > *:nth-child(2),    .proj-list > *:nth-child(2)    { animation-delay: .57s; }
.post-row:nth-child(3),    .tag-grid > *:nth-child(3),    .proj-list > *:nth-child(3)    { animation-delay: .64s; }
.post-row:nth-child(4),    .tag-grid > *:nth-child(4),    .proj-list > *:nth-child(4)    { animation-delay: .71s; }
.post-row:nth-child(5),    .tag-grid > *:nth-child(5),    .proj-list > *:nth-child(5)    { animation-delay: .78s; }
.post-row:nth-child(6),    .tag-grid > *:nth-child(6),    .proj-list > *:nth-child(6)    { animation-delay: .85s; }
.post-row:nth-child(7),    .tag-grid > *:nth-child(7),    .proj-list > *:nth-child(7)    { animation-delay: .92s; }
.post-row:nth-child(8),    .tag-grid > *:nth-child(8),    .proj-list > *:nth-child(8)    { animation-delay: .99s; }
.post-row:nth-child(9),    .tag-grid > *:nth-child(9),    .proj-list > *:nth-child(9)    { animation-delay: 1.06s; }
.post-row:nth-child(10),   .tag-grid > *:nth-child(10),   .proj-list > *:nth-child(10)   { animation-delay: 1.13s; }
.post-row:nth-child(11),   .tag-grid > *:nth-child(11),   .proj-list > *:nth-child(11)   { animation-delay: 1.2s; }
.post-header, .about-body { animation-delay: .1s; }
.post-body > *:nth-child(1) { animation-delay: .3s; }
.post-body > *:nth-child(2) { animation-delay: .38s; }
.post-body > *:nth-child(3) { animation-delay: .46s; }
.post-body > *:nth-child(4) { animation-delay: .54s; }
.post-body > *:nth-child(5) { animation-delay: .62s; }
.post-body > *:nth-child(6) { animation-delay: .7s; }
.post-body > *:nth-child(7) { animation-delay: .78s; }
.post-footer { animation-delay: .7s; }

/* ---------- 文章串联：上下篇 + 同主题延伸 ---------- */
.post-nav {
  margin-top: 3.2em; padding-top: 18px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.pn {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; min-width: 0; display: block;
  transition: border-color .15s ease, transform .15s ease;
}
.pn:hover { border-color: var(--accent); transform: translateY(-2px); }
.pn-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--muted); margin: 0 0 6px; }
.pn-title { margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn.is-next { text-align: right; }
.pn.is-disabled { opacity: .4; pointer-events: none; }
.related { margin-top: 2.8em; }
.related-title { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; color: var(--muted); margin: 0 0 10px; }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { border-bottom: 1px dashed var(--border); }
.related a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 2px; font-size: .92rem; transition: color .15s ease; }
.related a:hover { color: var(--accent); }
.related time { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--muted); flex: 0 0 auto; }
@media (max-width: 720px) {
  .post-nav { grid-template-columns: 1fr; }
  .pn.is-next { text-align: left; }
  .pn-title { white-space: normal; }
}