/* 令爷知识刊 — 设计系统 + 版式骨架
   所有颜色/字号/间距必须走 token，禁止在组件里写死数值。
   ============================================================ */

:root {
  /* ---- 纸与墨 ---- */
  --paper: #faf7f1;
  --paper-raised: #fffdf9;
  --paper-sunken: #f2ede3;
  --paper-dark: #171614;
  --paper-dark-raised: #211f1c;

  --ink: #191817;
  --ink-body: #2e2b27;
  --ink-muted: #6b655c;
  --ink-faint: #968f83;
  --ink-on-dark: #ece6da;
  --ink-on-dark-muted: #a8a094;

  --rule: #e4dccd;
  --rule-strong: #c9bfab;
  --rule-on-dark: #38342e;

  /* ---- 强调色：朱 ---- */
  --accent: #9e2b25;
  --accent-hover: #7e211c;
  --accent-tint: #f5e9e5;
  --accent-on-dark: #e07a63;

  /* ---- 三条主线（各自固定色相，用于分类识别） ---- */
  --cat-agi: #2b4c7e;
  --cat-agi-tint: #e8edf4;
  --cat-aigc: #8a5a19;
  --cat-aigc-tint: #f4ecdf;
  --cat-data: #1f5c46;
  --cat-data-tint: #e4eee9;
  --cat-lib: #5a3d77;
  --cat-lib-tint: #ece7f1;

  /* ---- 字体 ---- */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  /* ---- 字阶：1.25 大三度，正文层用 clamp 流体 ---- */
  --fs-display: clamp(2.375rem, 1.5rem + 3.2vw, 3.5rem);
  --fs-800: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-700: clamp(1.4375rem, 1.25rem + 0.7vw, 1.75rem);
  --fs-600: 1.3125rem;
  --fs-500: 1.125rem;
  --fs-400: 1.0625rem;
  --fs-300: 0.9375rem;
  --fs-200: 0.8125rem;
  --fs-100: 0.6875rem;

  --lh-tight: 1.28;
  --lh-snug: 1.5;
  --lh-body: 1.92;
  --lh-prose: 2.05;

  --ls-label: 0.14em;
  --ls-title: -0.012em;

  /* ---- 间距阶 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- 容器 ---- */
  --w-page: 79rem;
  --w-prose: 42rem;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---- 其他 ---- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --shadow-lift: 0 1px 2px rgba(25, 24, 23, 0.05), 0 10px 26px -14px rgba(25, 24, 23, 0.22);
  --shadow-focus: 0 0 0 3px rgba(158, 43, 37, 0.22);
  --t-fast: 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
  --t-med: 280ms cubic-bezier(0.2, 0.8, 0.3, 1);
  --nav-h: 68px;
}

/* ============================================================
   重置与基础
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

figure { margin: 0; }

a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.22em; }
a:hover { color: var(--accent); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-tight);
  margin: 0;
}

p, ul, ol { margin: 0; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent-tint); color: var(--accent-hover); }

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

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -4rem;
  z-index: 99;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-300);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-3); color: var(--paper); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   版式骨架
   ============================================================ */

.shell {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-narrow { max-width: 60rem; }

.site-main { padding-block: var(--sp-6) var(--sp-9); }

/* 深色副刊贴住页脚，不留白条 */
.site-main:has(> .band-dark:last-child) { padding-bottom: 0; }

.band {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-8);
}

.band-sunken { background: var(--paper-sunken); }

.band + .band { border-top: 0; }

/* 两栏：主内容 + 侧栏 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* ============================================================
   刊头 Masthead
   ============================================================ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--nav-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex: 0 0 auto;
}

.brand-lockup {
  display: block;
  width: auto;
  height: 44px;
}

.custom-logo-link { display: block; flex: 0 0 auto; }
.custom-logo-link img {
  display: block;
  width: auto;
  height: 44px;
  max-width: 180px;
  object-fit: contain;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule-strong);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.brand-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.primary-nav { margin-left: auto; }

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  list-style: none;
  font-size: var(--fs-300);
}

.nav-list > li > a {
  position: relative;
  display: block;
  padding-block: var(--sp-2);
  color: var(--ink-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast);
}

.nav-list > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right var(--t-med);
}

.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a { color: var(--accent); }

.nav-list > li > a:hover::after,
.nav-list > li.current-menu-item > a::after { right: 0; }

/* 二级下拉 */
.nav-list .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: 11rem;
  padding: var(--sp-2) 0;
  margin: 0;
  list-style: none;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  translate: -50% 6px;
  transition: opacity var(--t-fast), translate var(--t-fast), visibility var(--t-fast);
}

.nav-list li { position: relative; }
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

.nav-list .sub-menu a {
  display: block;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-300);
  color: var(--ink-body);
  text-decoration: none;
}
.nav-list .sub-menu a:hover { background: var(--paper-sunken); color: var(--accent); }

.masthead-tools { display: flex; align-items: center; gap: var(--sp-2); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-body);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--paper-raised); border-color: var(--rule); color: var(--accent); }
.icon-btn svg { width: 19px; height: 19px; }

.nav-toggle { display: none; }

/* 搜索抽屉 */
.search-drawer {
  overflow: hidden;
  max-height: 0;
  border-top: 1px solid transparent;
  transition: max-height var(--t-med), border-color var(--t-med);
}
.search-drawer.is-open { max-height: 8rem; border-top-color: var(--rule); }

.search-drawer-inner { padding-block: var(--sp-5); }

/* ============================================================
   通用零件
   ============================================================ */

.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.kicker .sep { color: var(--rule-strong); }

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-family: var(--font-body);
  font-size: var(--fs-100);
  letter-spacing: 0.04em;
  text-transform: none;
  border-radius: var(--r-xs);
  background: var(--paper-sunken);
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.cat-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cat-chip:hover { color: var(--paper); }

.cat-agi { background: var(--cat-agi-tint); color: var(--cat-agi); }
.cat-aigc { background: var(--cat-aigc-tint); color: var(--cat-aigc); }
.cat-data { background: var(--cat-data-tint); color: var(--cat-data); }
.cat-lib { background: var(--cat-lib-tint); color: var(--cat-lib); }
.cat-agi:hover, .cat-aigc:hover, .cat-data:hover, .cat-lib:hover { color: var(--paper); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-6);
  border-bottom: 2px solid var(--ink);
}

.section-head h2 {
  font-size: var(--fs-700);
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}

.section-head h2::before {
  content: attr(data-no);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  color: var(--accent);
}

.section-note {
  font-size: var(--fs-300);
  color: var(--ink-muted);
  margin-top: var(--sp-2);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast), gap var(--t-fast);
}
.text-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.text-link-dark { color: var(--ink-on-dark); border-color: var(--rule-on-dark); }
.text-link-dark:hover { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }
.text-link:hover { color: var(--accent); border-color: var(--accent); gap: 10px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 22px;
  font-size: var(--fs-300);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-ghost { background: none; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 表单 */
.field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 0 var(--sp-4);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.field input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  background: none;
  border: 0;
  outline: none;
  font-size: var(--fs-300);
}
.field button {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-muted);
  padding: var(--sp-2);
  display: grid;
  place-items: center;
}
.field button:hover { color: var(--accent); }
.field button svg { width: 18px; height: 18px; }

/* 日期条 */
.dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.dateline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule-strong); }
.dateline-right { margin-left: auto; color: var(--ink-faint); }

/* ============================================================
   本期主打 Lead
   ============================================================ */

.lead { padding-block: var(--sp-6) var(--sp-7); }

.lead-label-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.lead-label {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.lead-label-rule { flex: 1; height: 1px; background: var(--rule-strong); }

.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.lead-grid-noimg { grid-template-columns: minmax(0, 1fr); }
.lead-grid-noimg .lead-deck { max-width: 38rem; }

.lead-title {
  font-size: var(--fs-display);
  font-weight: 700;
  margin-block: var(--sp-4) var(--sp-5);
  text-wrap: balance;
}
.lead-title a { color: inherit; text-decoration: none; }
.lead-title a:hover { color: var(--accent); }

.lead-deck {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: 1.8;
  color: var(--ink-muted);
  max-width: 30rem;
}

.byline {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-300);
  color: var(--ink-muted);
}
.byline-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.byline a { color: var(--ink-body); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.byline a:hover { color: var(--accent); }

.lead-figure { position: relative; }
.lead-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--paper-sunken);
}
.lead-figure::after {
  content: "";
  position: absolute;
  inset: auto -10px -10px auto;
  width: 60%;
  height: 60%;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  z-index: -1;
}

.lead-secondary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule);
}

.mini-title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: 700;
  line-height: var(--lh-snug);
  margin-block: var(--sp-3);
}
.mini-title a { color: inherit; text-decoration: none; }
.mini-title a:hover { color: var(--accent); }
.mini-excerpt {
  font-size: var(--fs-300);
  color: var(--ink-muted);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   课程主线 Tracks
   ============================================================ */

.track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.track {
  --track-color: var(--ink-muted);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--track-color);
  border-radius: var(--r-md);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.track:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.track[data-cat="agi"] { --track-color: var(--cat-agi); }
.track[data-cat="aigc"] { --track-color: var(--cat-aigc); }
.track[data-cat="data"] { --track-color: var(--cat-data); }

.track-no {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: var(--ls-label);
  color: var(--track-color);
}

.track-name {
  font-size: var(--fs-700);
  margin-block: var(--sp-2) var(--sp-3);
  color: var(--track-color);
}

.track-desc {
  font-size: var(--fs-300);
  color: var(--ink-muted);
  line-height: 1.8;
  min-height: 3.6em;
}

.track-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.track-list {
  list-style: none;
  counter-reset: t;
  margin-block: var(--sp-5) var(--sp-5);
  font-size: var(--fs-300);
}
.track-list li {
  counter-increment: t;
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px dotted var(--rule-strong);
}
.track-list li::before {
  content: counter(t, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--ink-faint);
  padding-top: 4px;
  flex: 0 0 auto;
}
.track-list a {
  color: var(--ink-body);
  text-decoration: none;
  line-height: 1.65;
  display: block;
}
.track-list a:hover { color: var(--track-color); }

.track .btn { margin-top: auto; align-self: flex-start; }

/* ============================================================
   文章索引 Post index
   ============================================================ */

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

.pi-row {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  column-gap: var(--sp-6);
  row-gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--rule);
}
.post-index > li:first-child { padding-top: 0; }

.pi-thumb {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, var(--paper-sunken) 0 5px, transparent 5px 11px),
    var(--paper-raised);
  border: 1px solid var(--rule);
}
/* 特色图缺失时的「书脊」占位，避免空心方块 */
.pi-thumb::before {
  content: attr(data-label);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  padding-block: var(--sp-2);
}
.pi-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-med);
}

/* 有特色图：按原比例完整显示，不裁剪 */
.pi-thumb.pi-thumb-img { aspect-ratio: auto; }
.pi-thumb-img::before { display: none; }
.pi-thumb-img img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.pi-row:hover .pi-thumb { border-color: var(--rule-strong); }

.pi-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.pi-meta time { color: var(--ink-muted); }

.pi-title {
  grid-column: 1 / -1;
  font-size: var(--fs-700);
  margin: 0;
  text-wrap: balance;
}
.pi-title a { color: inherit; text-decoration: none; }
.pi-title a:hover { color: var(--accent); }

.pi-excerpt {
  font-size: var(--fs-300);
  line-height: 1.85;
  color: var(--ink-muted);
  max-width: 58ch;
  margin-top: var(--sp-3);
}

.pi-more { margin-top: var(--sp-4); }

/* 归档头条目（无图） */
.pi-row-noimg { grid-template-columns: minmax(0, 1fr); }

/* ============================================================
   侧栏
   ============================================================ */

.side-block + .side-block {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule);
}

.side-title {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}

.side-list { list-style: none; font-size: var(--fs-300); }
.side-list li { padding-block: var(--sp-3); border-bottom: 1px dotted var(--rule-strong); }
.side-list a { color: var(--ink-body); text-decoration: none; line-height: 1.6; }
.side-list a:hover { color: var(--accent); }
.side-list .count { float: right; font-family: var(--font-mono); font-size: var(--fs-100); color: var(--ink-faint); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-cloud a {
  padding: 5px 10px;
  font-size: var(--fs-200);
  color: var(--ink-muted);
  background: var(--paper-sunken);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.tag-cloud a:hover { color: var(--accent); background: var(--accent-tint); border-color: var(--accent); }

.side-note {
  font-size: var(--fs-300);
  line-height: 1.8;
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}

.text-link-wrap { margin-top: var(--sp-4); }

.entry-list .count { font-family: var(--font-body); letter-spacing: 0; }

/* Memos */
.memos {
  list-style: none;
  margin: 0;
  padding: 0;
}
.memo {
  padding-block: var(--sp-4);
  border-bottom: 1px dotted var(--rule-strong);
}
.memo-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}
.memo-link:hover p {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.28em;
}
.memo-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: var(--sp-2);
  border-radius: var(--r-sm);
}
.memo time {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.memo time::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.memo p {
  margin-top: var(--sp-2);
  font-size: var(--fs-300);
  line-height: 1.85;
  color: var(--ink-body);
}
.memo p + p { margin-top: var(--sp-2); }

/* ============================================================
   副刊：知识库 /lib
   ============================================================ */

.band-dark {
  background: var(--paper-dark);
  color: var(--ink-on-dark);
}
.band-dark .section-head { border-bottom-color: var(--ink-on-dark); }
.band-dark .section-head h2 { color: var(--paper); }
.band-dark .section-head h2::before { color: var(--accent-on-dark); }
.band-dark .section-note { color: var(--ink-on-dark-muted); }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.lib-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  min-height: 15rem;
  background: var(--paper-dark-raised);
  border: 1px solid var(--rule-on-dark);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-med), transform var(--t-med), background var(--t-med);
}
.lib-card:hover { transform: translateY(-3px); border-color: var(--accent-on-dark); background: #26231f; }

.lib-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.lib-name {
  font-family: var(--font-display);
  font-size: var(--fs-700);
  color: var(--paper);
  line-height: var(--lh-snug);
}
.lib-desc {
  font-size: var(--fs-300);
  line-height: 1.8;
  color: var(--ink-on-dark-muted);
  flex: 1;
}
.lib-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  color: var(--ink-on-dark-muted);
}
.lib-card:hover .lib-foot { color: var(--accent-on-dark); }

/* 浅色版知识库卡（用于知识库总览页） */
.lib-card-light {
  background: var(--paper-raised);
  border-color: var(--rule);
  color: var(--ink-body);
}
.lib-card-light:hover { background: var(--paper-raised); border-color: var(--rule-strong); }
.lib-card-light .lib-kicker { color: var(--accent); }
.lib-card-light .lib-name { color: var(--ink); }
.lib-card-light .lib-desc { color: var(--ink-muted); }
.lib-card-light .lib-foot { border-top-color: var(--rule); color: var(--ink-faint); }
.lib-card-light:hover .lib-foot { color: var(--accent); }

.section-title { font-size: var(--fs-700); }

/* ============================================================
   作者卡 / 页脚 / 分页 / 评论
   ============================================================ */

.author-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-6);
  margin-top: var(--sp-8);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.author-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-card h3 { font-size: var(--fs-600); margin-bottom: var(--sp-2); }
.author-card p { font-size: var(--fs-300); color: var(--ink-muted); line-height: 1.8; }

.site-footer {
  background: var(--paper-dark);
  color: var(--ink-on-dark-muted);
  padding-block: var(--sp-9) var(--sp-6);
  font-size: var(--fs-300);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--rule-on-dark);
}
.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; }
.site-footer li { padding-block: 6px; }
.site-footer a { color: var(--ink-on-dark-muted); text-decoration: none; transition: color var(--t-fast); }
.site-footer a:hover { color: var(--accent-on-dark); }
.footer-brand { font-family: var(--font-display); font-size: var(--fs-700); color: var(--paper); margin-bottom: var(--sp-3); }
.footer-desc { line-height: 1.9; max-width: 32ch; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-300);
}
.page-nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding-inline: var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-body);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  transition: all var(--t-fast);
}
.page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.comments { margin-top: var(--sp-9); padding-top: var(--sp-6); border-top: 2px solid var(--ink); }
.comment-list { list-style: none; }
.comment-list .comment {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.comment-body { font-size: var(--fs-300); line-height: 1.85; }
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-200);
  color: var(--ink-muted);
}
.comment-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); max-width: 40rem; }
.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 12px var(--sp-4);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-300);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.comment-form textarea { min-height: 9rem; line-height: 1.8; resize: vertical; }
.comment-form p { margin: 0; }
.comment-form label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-200);
  color: var(--ink-muted);
}
.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
.comment-form .comment-form-cookies-consent input { width: auto; margin-top: 5px; }
.comment-form .comment-form-cookies-consent label { margin-bottom: 0; line-height: 1.6; }
.comment-form .submit { width: auto; }
.comment-reply-title {
  font-family: var(--font-display);
  font-size: var(--fs-700);
  margin: var(--sp-6) 0 var(--sp-4);
}
.comment-list .children {
  list-style: none;
  margin-top: var(--sp-4);
  padding-left: var(--sp-6);
  border-left: 1px solid var(--rule);
}
.comment-body p + p { margin-top: var(--sp-3); }
.comment-reply {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
}
.comment-reply a { color: var(--ink-muted); text-decoration: none; }
.comment-reply a:hover { color: var(--accent); }
.comment-awaiting { font-size: var(--fs-200); color: var(--ink-faint); }
.comment-navigation,
.comments .notice { margin-top: var(--sp-5); }
.comment-navigation .nav-links { display: flex; gap: var(--sp-5); font-size: var(--fs-300); }

/* 提示条 / 归档头 */
.archive-head {
  padding-block: var(--sp-7) var(--sp-6);
  border-bottom: 2px solid var(--ink);
}
.archive-head .kicker { margin-bottom: var(--sp-4); }
.archive-title { font-size: var(--fs-800); margin-bottom: var(--sp-4); }
.archive-desc {
  font-size: var(--fs-500);
  line-height: 1.85;
  color: var(--ink-muted);
  max-width: 52ch;
}
.archive-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--ink-faint);
}
.archive-stats b { color: var(--ink); font-weight: 600; }

.archive-body { margin-top: var(--sp-7); }
.archive-search { margin-top: var(--sp-5); max-width: 30rem; }
.search-suggest { max-width: 30rem; margin-top: var(--sp-6); }

/* 导航页 */
.link-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) clamp(32px, 5vw, 72px);
  align-items: start;
}
.link-group-title {
  font-size: var(--fs-600);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-2);
  border-bottom: 2px solid var(--ink);
}
.link-group .side-list { max-width: 34rem; }

/* 知识库总览页 */
.library-body { margin-top: var(--sp-7); }
.library-intro { max-width: var(--w-prose); margin-bottom: var(--sp-8); }
.library-extra { margin-top: var(--sp-8); }
.library-extra .side-list { max-width: 42rem; }

/* 404 */
.notfound {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  padding-block: var(--sp-8) var(--sp-7);
  border-bottom: 2px solid var(--ink);
}
.notfound-no {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 9rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.notfound-body .kicker { margin-bottom: var(--sp-4); }
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.notfound-search { margin-top: var(--sp-5); max-width: 30rem; }
.notfound-recent { padding-top: var(--sp-7); }

.notice {
  padding: var(--sp-5) var(--sp-6);
  background: var(--paper-sunken);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-300);
  line-height: 1.8;
  color: var(--ink-muted);
}

/* 阅读进度条 */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 50;
  width: 100%;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--accent);
  transition: width 80ms linear;
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .side-block + .side-block { margin-top: 0; padding-top: 0; border-top: 0; }
  .side-block { border-top: 1px solid var(--rule); padding-top: var(--sp-5); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --nav-h: 62px; }
  .primary-nav {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    margin: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-7);
    background: var(--paper-raised);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  }
  body.nav-open .primary-nav { transform: none; opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--rule); }
  .nav-list > li > a { padding-block: var(--sp-4); font-size: var(--fs-500); }
  .nav-list > li > a::after { display: none; }
  .nav-list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    translate: none;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0 0 var(--sp-3) var(--sp-4);
    min-width: 0;
  }
  .nav-toggle { display: grid; }
  .lead-grid { grid-template-columns: minmax(0, 1fr); }
  .lead-figure { order: -1; }
  .lead-secondary, .track-grid, .lib-grid { grid-template-columns: minmax(0, 1fr); }
  .track-desc { min-height: 0; }
  .pi-row { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--sp-5); }
  .pi-title { font-size: var(--fs-600); }
  .notfound { grid-template-columns: minmax(0, 1fr); }
  .notfound-no { font-size: 5.5rem; }
  .link-groups { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

@media (max-width: 560px) {
  .site-main { padding-block: var(--sp-6) var(--sp-8); }
  .band { padding-block: var(--sp-7); }
  .pi-row { grid-template-columns: minmax(0, 1fr); }
  .pi-thumb { aspect-ratio: 16 / 9; }
  .side { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .author-card { grid-template-columns: minmax(0, 1fr); }
  .comment-list .children { padding-left: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead, .site-footer, .side, .comments, .reading-progress, .post-nav { display: none !important; }
  body { background: #fff; color: #000; }
}