@charset "UTF-8";
/* ============================================================================
   zigrow.cn — 个人主站（portal）样式表  ZG-PORTAL-2026-R5
   ----------------------------------------------------------------------------
   设计方向（design-spec.md §1）：克制的、编辑部的、纸感的 —— 像一本高端杂志
   的「目录页」。视觉主张三条：① 衬线只用来「说标题」，正文一律黑体；
   ② 编号是版面的骨架（朱砂）；③ 留白即层级。
      · 色彩：墨蓝主 + 朱砂记号 + 暖褐作品（单主色体系）
      · 字体：零外部字体，全部系统栈（衬线栈承担标题 / 刊头 / 编号）
      · 主题：默认跟随系统深浅色，可在导航栏手动切换并记忆（localStorage: zg-theme）
      · 版本标记：ZG-PORTAL-2026-R5（门禁 A16 可 grep 校验线上 CSS 版本）
   ----------------------------------------------------------------------------
   注意：旧的 --mint* / --blue* 两套色相已按 design-spec §2.6 映射表**逐处替换**
   为 --accent* / --mark* / --tone-works*，不是按名改值（旧版把主链接色与作品
   语气色都塞在 --mint 上，按名改值会让链接色与作品色撞色）。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 设计令牌（design-spec.md §2.1，浅色为默认值）
   ------------------------------------------------------------------------- */
:root {
  /* ---- 字体（零外部字体，全部系统栈） ---- */
  --font-serif: "Iowan Old Style", Palatino, Georgia,
    "Noto Serif CJK SC", "Songti SC", "STSong", SimSun, serif;   /* 标题 / 刊头 / 编号 / 引文 */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;  /* 正文 / UI */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;                 /* 域名 / 日期 / 编号 */

  /* ---- 浅色（默认） ---- */
  --bg:            #FAF7F2;   /* 底色：暖纸 */
  --surface:       #FFFFFF;   /* 面：卡片 / 面板 / 输入框 */
  --surface-alt:   #F1EBE1;   /* 次级面：chip 底 / 代码块 / 弱分区 */
  --border:        #E5DED1;   /* 描边：1px 发丝线（装饰性） */
  --border-strong: #CFC5B3;   /* 描边强：hover 强调 */
  --control-line:  #8B8274;   /* 交互边界：输入框/按钮描边（≥3:1，WCAG 1.4.11） */

  --text:  #201C17;           /* 正文 */
  --muted: #5C554C;           /* 次要文字：摘要 / 导语 */
  --faint: #655E52;           /* 辅助文字：日期 / 计数 / 注记 */

  --accent:      #2E6C8E;     /* 主强调（墨蓝）：装饰线 / 点 / 图标 */
  --accent-ink:  #1D4A66;     /* 主强调文字（链接 / 导航选中 / 投资分析角标） */
  --accent-wash: #E8F0F4;     /* 主强调浅底 */
  --mark:        #B4442E;     /* 记号色（朱砂）：编号 / kicker / 年度 / 404 */
  --mark-ink:    #9A3623;     /* 记号文字 */
  --mark-wash:   #F7E9E3;     /* 记号浅底 */

  --tone-works:      #7A6B4E; /* 作品区语气色（暖褐，弱） */
  --tone-works-ink:  #655840;
  --tone-works-wash: #EDE7DA;

  --ok:     #2F6E4F;  --ok-wash:     #E4EFE7;
  --warn:   #8A5A12;  --warn-wash:   #F5EAD5;
  --danger: #A32B2B;  --danger-wash: #F7E3E1;
  --info:   #1D4A66;  --info-wash:   #E8F0F4;

  --shadow:      0 1px 2px rgba(32, 28, 23, .05);
  --shadow-lift: 0 6px 20px rgba(32, 28, 23, .08);

  /* ---- 字阶（流体 clamp：小屏→大屏） ---- */
  --type-display: clamp(2.25rem, 1.60rem + 3.20vw, 3.75rem);  /* 36 → 60px 刊头大字/404 */
  --type-h1:      clamp(1.875rem, 1.35rem + 2.20vw, 2.875rem);/* 30 → 46px 页 H1 */
  --type-h2:      clamp(1.375rem, 1.20rem + 0.80vw, 1.875rem);/* 22 → 30px 区块 H2 */
  --type-h3:      clamp(1.125rem, 1.05rem + 0.40vw, 1.375rem);/* 18 → 22px 卡标题 / 条目 */
  --type-h4:      clamp(1.000rem, 0.98rem + 0.15vw, 1.0625rem);/* 16 → 17px 次列卡标题 */
  --type-body:    clamp(0.9375rem,0.92rem + 0.10vw, 1.0625rem);/* 15 → 17px 正文 */
  --type-meta:    0.875rem;   /* 14px 摘要 / 标签 / 注记 */
  --type-micro:   0.75rem;    /* 12px kicker / 计数 / 徽标 */
  --type-num:     clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);     /* 24 → 36px 面板编号 01–05 */

  /* ---- 行高 / 字重 / 字距 ---- */
  --leading-display: 1.06;
  --leading-tight:   1.22;
  --leading-snug:    1.40;
  --leading-body:    1.75;
  --leading-relaxed: 1.85;   /* 快照正文 */

  --w-regular: 400;  --w-medium: 500;  --w-semibold: 600;  --w-bold: 700;
  --track-display: -0.02em;
  --track-h:       -0.015em;
  --track-caps:     0.14em;

  /* ---- 间距（4/8 基数） ---- */
  --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;
  --block-y:        clamp(56px, 8vw, 112px);
  --block-y-tight:  clamp(40px, 6vw, 72px);

  /* ---- 容器 / 栅格 ---- */
  --wrap-max: 1120px;
  --wrap-pad: clamp(20px, 5vw, 48px);
  --measure:  42rem;
  --cols: 12;
  --gutter: var(--sp-5);

  /* ---- 圆角 ---- */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius: 12px;
  --radius-lg: 18px; --radius-pill: 999px;

  /* ---- 过渡 ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 280ms;
  --transition: 180ms cubic-bezier(.4, 0, .2, 1);

  /* ---- 快照壳别名（article.css / snapshot-shell.css 引用，保留映射） ---- */
  --line: var(--border);  --line2: var(--border-strong);  --card: var(--surface);
  --tx: var(--text);  --tx2: var(--muted);  --tx3: var(--faint);
  --gold: var(--mark-ink);  --snap-link: var(--accent-ink);
}

/* 深色令牌：系统偏好 与 手动 data-theme 两处共用（design-spec §2.2） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #1A1713;
    --surface:       #221F19;
    --surface-alt:   #2A2620;
    --border:        #332E26;
    --border-strong: #423C31;
    --control-line:  #7E7563;

    --text:  #EDE7DC;
    --muted: #B4AC9E;
    --faint: #A79E8E;

    --accent:      #7FB0CE;  --accent-ink: #9CC4DC;  --accent-wash: #22323C;
    --mark:        #E08A6E;  --mark-ink:   #E89B80;  --mark-wash:   #3A2620;
    --tone-works:  #A08B63;  --tone-works-ink: #C9B79A;  --tone-works-wash: #2E2820;

    --ok: #7FC79A; --ok-wash: #1E2E24;
    --warn: #E0B15F; --warn-wash: #322718;
    --danger: #E88C84; --danger-wash: #33201F;
    --info: #9CC4DC; --info-wash: #22323C;

    --shadow: 0 1px 2px rgba(0,0,0,.35);
    --shadow-lift: 0 8px 26px rgba(0,0,0,.42);
  }
}
:root[data-theme="dark"] {
  --bg:            #1A1713;
  --surface:       #221F19;
  --surface-alt:   #2A2620;
  --border:        #332E26;
  --border-strong: #423C31;
  --control-line:  #7E7563;

  --text:  #EDE7DC;
  --muted: #B4AC9E;
  --faint: #A79E8E;

  --accent:      #7FB0CE;  --accent-ink: #9CC4DC;  --accent-wash: #22323C;
  --mark:        #E08A6E;  --mark-ink:   #E89B80;  --mark-wash:   #3A2620;
  --tone-works:  #A08B63;  --tone-works-ink: #C9B79A;  --tone-works-wash: #2E2820;

  --ok: #7FC79A; --ok-wash: #1E2E24;
  --warn: #E0B15F; --warn-wash: #322718;
  --danger: #E88C84; --danger-wash: #33201F;
  --info: #9CC4DC; --info-wash: #22323C;

  --shadow: 0 1px 2px rgba(0,0,0,.35);
  --shadow-lift: 0 8px 26px rgba(0,0,0,.42);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ---------------------------------------------------------------------------
   2. 基础重置
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition), color var(--transition);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .22em; }
h1, h2, h3, h4 { line-height: var(--leading-tight); margin: 0; font-weight: var(--w-bold); letter-spacing: var(--track-h); font-family: var(--font-serif); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
::selection { background: var(--mark-wash); color: var(--text); }

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding-inline: var(--wrap-pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--surface); color: var(--text); padding: 10px 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--control-line);
}
.skip-link:focus { left: var(--wrap-pad); }

/* ---------------------------------------------------------------------------
   3. 吸顶导航（design-spec §4.1）
   ------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--wrap-max); margin: 0 auto;
  padding: 0 var(--wrap-pad);
  height: 60px;
  display: flex; align-items: center; gap: var(--sp-5);
  min-width: 0;
}
.nav-logo {
  font-family: var(--font-serif);
  font-weight: var(--w-bold); font-size: 20px; letter-spacing: var(--track-display);
  color: var(--text); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo .dot { color: var(--mark); }
.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0 0 0 auto;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
  -ms-overflow-style: none; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links li { flex: none; }
.nav-links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  color: var(--muted); font-size: .9375rem;
  white-space: nowrap; border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}
.nav-links a:hover { color: var(--text); background: var(--surface-alt); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent-ink); font-weight: var(--w-semibold); background: var(--accent-wash); }
.theme-toggle {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--control-line);
  border-radius: var(--radius-sm); color: var(--muted);
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-alt); }
.theme-toggle svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

/* ---------------------------------------------------------------------------
   4. 页头 / 刊头（design-spec §4.2）
   ------------------------------------------------------------------------- */
.section { padding-block: var(--block-y); }
.section--tight { padding-block: var(--block-y-tight); }
.page-head { margin-bottom: var(--block-y-tight); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--type-micro);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--mark-ink); margin: 0 0 var(--sp-3);
}
.page-title { font-size: var(--type-h1); letter-spacing: var(--track-display); }
.page-lede { color: var(--muted); margin: var(--sp-4) 0 0; max-width: var(--measure); }
.page-lede a { color: var(--accent-ink); }

.masthead { padding-block: clamp(48px, 9vw, 104px) clamp(32px, 5vw, 56px); }
.masthead-kicker {
  font-family: var(--font-mono); font-size: var(--type-micro);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--mark-ink); margin: 0 0 var(--sp-4);
}
.masthead-brand {
  font-family: var(--font-serif); font-weight: var(--w-bold);
  font-size: var(--type-display); line-height: var(--leading-display);
  letter-spacing: var(--track-display); margin: 0;
}
.masthead-h1 {
  font-size: var(--type-h1); letter-spacing: var(--track-display);
  margin: var(--sp-3) 0 0;
}
.masthead-lede { color: var(--muted); margin: var(--sp-5) 0 0; max-width: var(--measure); }

/* ---------------------------------------------------------------------------
   5. 编号 / 区块标签
   ------------------------------------------------------------------------- */
.feed-num, .strip-num {
  font-family: var(--font-mono); font-weight: var(--w-regular);
  color: var(--mark-ink); letter-spacing: .02em;
}
.strip-label {
  font-family: var(--font-mono); font-size: var(--type-micro);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--tone-works-ink); margin: 0 0 var(--sp-3);
}

/* ---------------------------------------------------------------------------
   6. 首页「最新分析」面板（design-spec §4.3）【新】
   ------------------------------------------------------------------------- */
.feed-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6);
}
.feed-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.feed-num { font-size: var(--type-num); line-height: 1; }
.feed-title { font-size: var(--type-h2); letter-spacing: var(--track-h); }
.feed-body { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.feed-lead-host { min-width: 0; }

.feed-lead {
  position: relative; display: flex; flex-direction: column;
  padding: 28px; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  color: inherit; text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.feed-lead::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(var(--mark), color-mix(in srgb, var(--mark) 35%, transparent));
}
.feed-lead:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); text-decoration: none; }
.feed-lead-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.feed-lead-title {
  font-size: var(--type-h3); line-height: 1.3; margin: 0 0 var(--sp-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.feed-lead:hover .feed-lead-title { color: var(--accent-ink); }
.feed-lead-excerpt {
  color: var(--muted); font-size: var(--type-meta); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-lead-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border);
}
.feed-origin { font-family: var(--font-mono); font-size: var(--type-micro); color: var(--faint); }

.feed-rows { list-style: none; min-width: 0; }
.feed-rows > li { border-top: 1px solid var(--border); }
.feed-row {
  display: flex; align-items: baseline; gap: var(--sp-3);
  min-height: 64px; padding: var(--sp-3) 0;
  color: inherit; text-decoration: none; min-width: 0;
  transition: background-color var(--transition);
}
.feed-row:hover { text-decoration: none; }
.feed-row:hover .feed-row-title { color: var(--accent-ink); }
.feed-row-num {
  flex: none; width: 32px; text-align: right;
  font-family: var(--font-mono); font-size: 18px; color: var(--mark-ink);
}
.feed-row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-row-title {
  font-size: var(--type-h4); font-weight: var(--w-semibold); font-family: var(--font-sans);
  line-height: var(--leading-snug); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.feed-row-meta { font-size: var(--type-meta); color: var(--muted); }

.feed-foot {
  display: flex; align-items: center; gap: var(--sp-4) var(--sp-5);
  flex-wrap: wrap; margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.feed-all { color: var(--accent-ink); font-weight: var(--w-semibold); }
.feed-cats { gap: var(--sp-2); }

/* ---------------------------------------------------------------------------
   7. 作品横条（首页第二屏，design-spec §4.4 / §8）
   ------------------------------------------------------------------------- */
.works-strip { padding-top: 0; }
.strip-head { margin-bottom: var(--sp-5); }
.strip-title { font-size: var(--type-h2); letter-spacing: var(--track-h); }
.strip-note { color: var(--muted); font-size: var(--type-meta); margin: var(--sp-3) 0 0; max-width: 38em; }
.strip-foot {
  display: flex; align-items: baseline; gap: var(--sp-4);
  margin: var(--sp-5) 0 0;
}
.strip-count { font-family: var(--font-mono); font-size: var(--type-micro); color: var(--faint); }

.works-mini { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.mini-work {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 72px; padding: var(--sp-4); border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.mini-work:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); text-decoration: none; }
.mini-work .mw-mark {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tone-works-wash); color: var(--tone-works-ink);
  font-family: var(--font-serif); font-weight: var(--w-semibold); font-size: 1.125rem;
}
.mini-work .mw-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mini-work .mw-title { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: 1rem; color: var(--text); }
.mini-work .mw-desc {
  color: var(--muted); font-size: var(--type-meta); margin: 2px 0 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.mini-work .mw-domain { flex: none; font-family: var(--font-mono); font-size: var(--type-micro); color: var(--faint); }

/* ---------------------------------------------------------------------------
   8. 工具条 / 搜索 / chips / 视图切换（design-spec §4.7–4.10）
   ------------------------------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-5); }
.toolbar > * { min-width: 0; }

.search {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1 1 260px; min-width: 0;
  background: var(--surface); border: 1px solid var(--control-line);
  border-radius: var(--radius-pill); padding: 0 14px; height: 44px;
}
.search svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
.search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: .9375rem; padding: 0; height: 100%;
}
.search input::placeholder { color: var(--faint); }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-clear {
  flex: none; width: 44px; height: 44px; margin-right: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 1.15rem; line-height: 1;
}
.search-clear:hover { color: var(--text); }

.segmented {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface-alt); border: 1px solid var(--control-line);
  border-radius: var(--radius-sm); padding: 2px; min-height: 40px;
}
.segmented .seg {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 16px; border-radius: var(--radius-xs);
  font-size: .875rem; color: var(--muted); white-space: nowrap;
  transition: color var(--transition), background-color var(--transition);
}
.segmented .seg[aria-pressed="true"] {
  background: var(--surface); color: var(--text); font-weight: var(--w-semibold);
  box-shadow: inset 0 0 0 1px var(--border);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--control-line);
  border-radius: var(--radius-pill); color: var(--muted); font-size: .875rem;
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
.chip:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }
.chip[aria-pressed="true"] {
  color: var(--accent-ink); background: var(--accent-wash);
  border-color: var(--accent); font-weight: var(--w-semibold);
}
.chip-group { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.chip-group .cg-label {
  flex: none; width: 42px; margin: 0;
  font-family: var(--font-mono); font-size: var(--type-micro); color: var(--faint); line-height: 2;
}
.filter-note { font-size: var(--type-meta); color: var(--faint); margin: 0 0 var(--sp-5); }
mark { background: color-mix(in srgb, var(--mark) 18%, transparent); color: var(--text); border-radius: 3px; padding: 0 2px; }

/* ---------------------------------------------------------------------------
   9. 文章列表（design-spec §4.5）
   ------------------------------------------------------------------------- */
.article-list { list-style: none; }
.article-item { border-top: 1px solid var(--border); }
.article-item:first-child { border-top: 0; }
.article-row {
  position: relative; display: block;
  padding: var(--sp-5) var(--sp-3) var(--sp-5) var(--sp-4);
  color: inherit; text-decoration: none; min-width: 0;
  transition: background-color var(--transition);
}
.article-row::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: var(--accent); border-radius: 2px; opacity: 0;
  transition: opacity var(--transition);
}
.article-row:hover { background: color-mix(in srgb, var(--surface-alt) 50%, transparent); text-decoration: none; }
.article-row:hover::before { opacity: 1; }
.article-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.article-row .card-date { margin-left: auto; }
.article-title { font-size: var(--type-h3); line-height: 1.3; margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.article-row:hover .article-title { color: var(--accent-ink); }
.article-excerpt {
  color: var(--muted); font-size: var(--type-meta); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pin-badge {
  font-size: var(--type-micro); font-weight: 600; color: var(--mark-ink);
  background: var(--mark-wash); padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap;
}
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.tag {
  font-size: var(--type-micro); color: var(--muted);
  background: var(--surface-alt); border: 1px solid var(--border);
  padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   10. 时间线（归档视图，design-spec §4.6）
   ------------------------------------------------------------------------- */
.view-note { color: var(--muted); font-size: var(--type-meta); margin: 0 0 var(--sp-5); }
.timeline-host { min-width: 0; }
.tl-year {
  font-size: 20px; color: var(--text); margin: var(--sp-7) 0 var(--sp-3);
  padding-left: var(--sp-4); position: relative;
}
.tl-year:first-child { margin-top: 0; }
.tl-year::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--mark); border-radius: 2px;
}
.timeline { list-style: none; position: relative; padding-left: var(--sp-5); }
.timeline::before {
  content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px;
  width: 1px; background: var(--border);
}
.tl-item { position: relative; padding: 0 0 var(--sp-4) 0; }
.tl-item::before {
  content: ""; position: absolute; left: calc(var(--sp-5) * -1 + 0px); top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}
.tl-date { font-family: var(--font-mono); font-size: var(--type-micro); color: var(--faint); }
.tl-title { font-size: 1rem; color: var(--text); display: block; margin-top: 2px; overflow-wrap: anywhere; }
.tl-title:hover { color: var(--accent-ink); }

/* 无 JS 年度分组兜底（紧凑版） */
.nojs-archive { margin-top: var(--sp-6); }
.nojs-archive .tl-year { font-size: var(--type-h3); }
.nojs-list { list-style: none; padding-left: var(--sp-4); }
.nojs-list li { padding: 3px 0; }
.nojs-list a { font-size: var(--type-meta); color: var(--text); overflow-wrap: anywhere; }
.nojs-list a:hover { color: var(--accent-ink); }

/* ---------------------------------------------------------------------------
   11. 文章页布局 + 侧栏（design-spec §4.9 / §4.14）
   ------------------------------------------------------------------------- */
.articles-layout {
  display: grid; gap: clamp(24px, 4vw, 44px); align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.articles-main { min-width: 0; }
.articles-aside { display: grid; gap: var(--sp-4); min-width: 0; }
.aside-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5);
}
.aside-card .aside-kicker {
  font-family: var(--font-mono); font-size: var(--type-micro);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 var(--sp-3);
}
.aside-card .qr-big {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; margin-bottom: var(--sp-4);
}
.aside-card .qr-big img { width: 100%; border-radius: var(--radius-sm); }
.aside-card .aside-title { font-family: var(--font-serif); font-weight: var(--w-bold); margin: 0 0 6px; }
.aside-card .aside-text { font-size: var(--type-meta); color: var(--muted); margin: 0; }
.aside-card .aside-text strong { color: var(--text); }
.aside-card--hint { background: var(--surface-alt); }

/* 公众号名片卡（关于页完整版，design-spec §4.14） */
.gzh {
  display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6);
}
.gzh-media {
  flex: 0 1 320px; min-width: 0;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px;
}
.gzh-media img { width: 100%; border-radius: var(--radius-sm); }
.gzh-body { flex: 1 1 260px; min-width: 0; }
.gzh-title { font-family: var(--font-serif); font-size: var(--type-h3); margin-bottom: var(--sp-2); }
.gzh-text { color: var(--muted); font-size: .9375rem; margin: 0; }
.gzh-text strong { color: var(--text); }
.gzh-text + .gzh-text { margin-top: var(--sp-3); }

/* 首页 / 文章页显著 CTA 卡（design-spec §4.14） */
.gzh-cta {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  background: linear-gradient(135deg, var(--accent-wash), color-mix(in srgb, var(--accent-wash) 45%, var(--surface)));
}
.gzh-cta .qr {
  flex: none; width: 88px; height: 88px; padding: 6px;
  background: #fff; border-radius: 10px; border: 1px solid var(--border);
}
.gzh-cta .qr img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.gzh-cta .cta-body { min-width: 0; }
.gzh-cta .cta-kicker {
  font-family: var(--font-mono); font-size: var(--type-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin: 0;
}
.gzh-cta .cta-title { font-family: var(--font-serif); font-weight: var(--w-bold); margin: 3px 0 0; }
.gzh-cta .cta-text { font-size: var(--type-meta); color: var(--muted); margin: 3px 0 0; }
.gzh-cta .cta-text strong { color: var(--text); }

/* ---------------------------------------------------------------------------
   12. 卡片（作品卡，design-spec §4.11）
   ------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: minmax(0, 1fr); }
.grid-works { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }

.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-5);
  box-shadow: var(--shadow); color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
a.card { color: inherit; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); text-decoration: none; }
.card-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-badge {
  font-size: var(--type-micro); font-weight: 600;
  color: var(--tone-works-ink); background: var(--tone-works-wash);
  padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.card-badge.is-blue { color: var(--accent-ink); background: var(--accent-wash); }
.card-date { margin-left: auto; font-family: var(--font-mono); font-size: var(--type-micro); color: var(--faint); white-space: nowrap; }
.card-title {
  font-family: var(--font-sans); font-weight: var(--w-semibold);
  font-size: var(--type-h3); line-height: 1.35; margin-bottom: var(--sp-2); overflow-wrap: anywhere;
}
.card-desc { color: var(--muted); font-size: var(--type-meta); margin: 0; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-4);
}
.card-domain { font-family: var(--font-mono); font-size: var(--type-micro); color: var(--faint); }
.card-arrow { width: 18px; height: 18px; color: var(--tone-works-ink); flex: none; transition: transform var(--transition); }
a.card:hover .card-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   13. 作品详情（design-spec §4.12）
   ------------------------------------------------------------------------- */
.detail-head { padding-block: clamp(40px, 7vw, 72px) var(--sp-6); }
.detail-title { font-size: var(--type-h1); line-height: 1.12; letter-spacing: var(--track-display); }
.preview-panel {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--tone-works-wash) 60%, var(--surface-alt)),
      var(--surface-alt));
  aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-6); text-align: center;
}
.preview-mark {
  font-family: var(--font-serif); font-weight: var(--w-bold);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3.75rem); letter-spacing: var(--track-display);
  color: var(--tone-works-ink);
}
.preview-domain { font-family: var(--font-mono); font-size: var(--type-meta); color: var(--muted); }
.preview-feats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.spec-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.spec-list li { display: flex; gap: var(--sp-3); align-items: baseline; color: var(--muted); }
.spec-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tone-works); flex: none; transform: translateY(-3px); }
.kv { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); color: var(--faint); font-size: var(--type-meta); }
.kv b { color: var(--text); font-weight: var(--w-semibold); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 24px; border-radius: var(--radius-sm);
  background: var(--accent-ink); color: #fff; font-size: .9375rem; font-weight: var(--w-semibold);
  border: 1px solid transparent; transition: filter var(--transition);
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--control-line); }
.btn-ghost:hover { background: var(--surface-alt); filter: none; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--muted); font-size: .9375rem; margin-top: var(--sp-7);
}
.back-link:hover { color: var(--accent-ink); text-decoration: none; }

/* ---------------------------------------------------------------------------
   14. 页脚（design-spec §4.15）
   ------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); margin-top: var(--block-y); background: var(--surface); }
.footer-inner {
  max-width: var(--wrap-max); margin: 0 auto; padding: var(--sp-7) var(--wrap-pad) var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-6); justify-content: space-between;
}
.footer-col { min-width: 160px; }
.footer-h {
  font-size: var(--type-micro); font-family: var(--font-mono);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-3);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer-links a { color: var(--muted); font-size: .9375rem; }
.footer-links a:hover { color: var(--accent-ink); }
.footer-gzh { color: var(--muted); font-size: .9375rem; }
.footer-bottom {
  border-top: 1px solid var(--border); padding: var(--sp-5) var(--wrap-pad);
  max-width: var(--wrap-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between;
  color: var(--faint); font-size: var(--type-micro);
}
.footer-beian { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.footer-beian a { color: var(--faint); display: inline-flex; align-items: center; gap: 5px; }
.footer-beian a:hover { color: var(--muted); }

/* ---------------------------------------------------------------------------
   15. 404（design-spec §4.18）
   ------------------------------------------------------------------------- */
.err {
  min-height: 60vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding-block: var(--sp-9);
}
.err-code {
  font-family: var(--font-serif); font-weight: var(--w-bold);
  font-size: var(--type-display); color: var(--mark); line-height: 1;
  letter-spacing: -.04em;
}
.err-title { font-size: var(--type-h2); margin: var(--sp-5) 0 var(--sp-3); }
.err-text { color: var(--muted); margin-bottom: var(--sp-6); }
.err-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------------------
   16. SEO 内链区（design-spec §4 / site-spec §3.2 区块 8）
   ------------------------------------------------------------------------- */
.seo-topics { border-top: 1px solid var(--border); }
.seo-h { font-size: var(--type-h3); margin: 0 0 var(--sp-3); }
.seo-h + .seo-sub { margin-top: calc(var(--sp-3) * -1 + 2px); }
.seo-sub { color: var(--muted); font-size: var(--type-meta); margin: 0 0 var(--sp-4); line-height: 1.7; }
.seo-links { list-style: none; margin: 0 0 var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.seo-links li { margin: 0; }
.seo-links a {
  display: inline-block; font-size: var(--type-meta); color: var(--accent-ink);
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-pill); padding: 6px 13px; line-height: 1.4; min-height: 32px;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.seo-links a:hover, .seo-links a:focus-visible { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-wash); }
.seo-chips { list-style: none; margin: 0 0 var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.seo-chips li { margin: 0; }
.seo-chips a {
  display: inline-block; font-size: var(--type-micro); color: var(--muted);
  border-radius: var(--radius-pill); background: var(--surface-alt);
  padding: 5px 12px; line-height: 1.4; min-height: 30px;
  transition: color var(--transition), background-color var(--transition);
}
.seo-chips a:hover, .seo-chips a:focus-visible { color: var(--accent-ink); background: var(--accent-wash); }

.empty-note { color: var(--muted); font-size: .9375rem; padding: var(--sp-5) 0; }
.empty-note a { color: var(--accent-ink); }

/* ---------------------------------------------------------------------------
   16.5 R5 辅助块（关于页正文 / 作品详情两栏 / 页头间距）
   ------------------------------------------------------------------------- */
.page-head-section { padding-bottom: 0; }
.prose { max-width: var(--measure); margin-top: var(--sp-6); }
.prose p { margin: 0 0 var(--sp-5); color: var(--text); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: var(--w-semibold); }
.detail-cols { display: grid; gap: var(--sp-6); align-items: start; }
.detail-cols > * { min-width: 0; }
.detail-body { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.detail-label {
  font-family: var(--font-mono); font-size: var(--type-micro);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--faint); margin: 0 0 var(--sp-3);
}
.cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
@media (min-width: 1000px) {
  .detail-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); }
}

/* ---------------------------------------------------------------------------
   17. 渐进揭示（JS 可用时才隐藏；关闭动画时内容必须可见）
   ------------------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  a.card:hover, .article-row:hover, .mini-work:hover, .feed-lead:hover { transform: none; }
  a.card:hover .card-arrow { transform: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   18. 响应式（design-spec §6）
   断点：≥1100 桌面 / 768–1099 平板 / 480–767 大手机 / ≤479 小手机
   ------------------------------------------------------------------------- */
/* 平板及以上：首页面板两列（头条 7 / 次列 5） */
@media (min-width: 1100px) {
  .feed-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .articles-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .articles-aside { position: sticky; top: 84px; }
}
/* 768–1099：面板单列；侧栏下沉；作品 2 列 */
@media (min-width: 768px) and (max-width: 1099px) {
  .works-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-mini .mini-work:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-works .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 1099px) {
  .articles-aside { position: static; }
}
/* 桌面：作品 3 列 / 首页作品横条 3 列 */
@media (min-width: 1100px) {
  .works-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-works .card:last-child:nth-child(odd) { grid-column: auto; }
}
/* 大手机：工具条换行，搜索占整行 */
@media (max-width: 767px) {
  .toolbar .search { flex: 1 1 100%; }
  .nav-inner { gap: var(--sp-4); }
}
/* 小手机 ≤479：日期列并入标题上方（列表行改纵向），作品单列，域名隐藏 */
@media (max-width: 479px) {
  .nav-inner { height: 56px; gap: var(--sp-3); }
  .nav-logo { font-size: 16px; }
  .nav-links a { padding: 0 10px; font-size: .8125rem; }
  .article-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .article-row .card-date { margin-left: 0; }
  .feed-num { font-size: 18px; }
  .feed-lead { padding: 20px; }
  .feed-lead-title { font-size: 20px; }
  .feed-row-num { width: 26px; font-size: 16px; }
  .mini-work .mw-domain { display: none; }
  /* 窄屏 chips 保持基础 flex-wrap 换行，全部选项可见；避免 flex 子项收缩成竖排文字 */
  .articles-aside .qr-big { max-width: 240px; }
}

/* 打印：去掉交互件，正文黑字白底 */
@media print {
  .nav, .theme-toggle, .search, .chips, .segmented, .footer, .gzh, .gzh-cta, .nojs-archive { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .article-row { border-color: #ddd; box-shadow: none; }
}