/*
Theme Name: Li CW 创作主题
Theme URI: https://github.com/carbon-wolf/LICW-wordpress-theme
Author: 林泽凯
Description: 极简优雅的个人创作博客主题，适配写作、作品展示
Version: 1.1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 极简, 博客, 作品集, 暗色模式, 响应式
*/

/* ============================================
   1. CSS 变量
   ============================================ */
:root {
  /* === 表面与背景 === */
  /* 暖纸色 — 向金色调 (hue ~95)，色度 0.005 制造潜意识的纸张温暖感 */
  --bg-page: oklch(97.5% 0.005 95);
  /* 卡片 — 非纯白，向品牌暖调微偏 0.003 */
  --bg-card: oklch(99% 0.003 95);
  /* 边框 — 淡米色 */
  --border-color: oklch(91% 0.008 95);

  /* === 文字 === */
  /* 主文字 — 近黑，向品牌绿微调 0.005，纯黑在自然界不存在 */
  --text-primary: oklch(15% 0.005 170);
  /* 辅助文字 — 中灰，向绿微调。oklch(42%) 在暖纸背景上达到 ~5:1 对比度，满足 WCAG AA */
  --text-secondary: oklch(42% 0.005 170);

  /* === 强调色 — 60-30-10 中的 10% === */
  /* 深森林绿 */
  --accent: oklch(30% 0.055 170);
  /* 哑金 — 暖度与个性的主要载体 */
  --accent-gold: oklch(68% 0.09 82);
  /* 哑金加深 — 用于 hover 文字，在暖纸背景上满足 WCAG AA 对比度 */
  --accent-gold-hover: oklch(48% 0.09 82);
  /* 置于强调色上的文字 — 近白，替代裸 #fff */
  --text-on-accent: oklch(95% 0.02 160);

  /* === 语义状态色 === */
  /* 成功 — 暖鼠尾草绿，与 accent 绿同族 */
  --color-success: oklch(55% 0.09 160);
  --color-success-bg: oklch(95% 0.02 160);
  /* 错误 — 陶土红，暖调与金色和谐，不致与绿金调色板冲突 */
  --color-error: oklch(50% 0.13 20);
  --color-error-bg: oklch(95% 0.02 20);
  /* 警告 — 琥珀，位于金和绿之间 */
  --color-warning: oklch(65% 0.12 75);
  --color-warning-bg: oklch(95% 0.03 75);
  /* 信息 — 柔和青绿，绿的近邻 */
  --color-info: oklch(55% 0.06 200);
  --color-info-bg: oklch(95% 0.02 200);

  /* 字体：3 个家族覆盖全站，全衬线，统一文学气质 */
  /* Alegreya — 温暖的人文主义拉丁衬线，替代 Inter，用于拉丁正文 + UI */
  /* Noto Serif SC (思源宋体) — CJK 锚点，用于标题 + 中文正文 */
  /* LXGW WenKai (霞鹜文楷) — 手写点缀，仅用于欢迎语 / 引用块 */
  --font-heading: "Noto Serif SC", "Source Han Serif SC", "思源宋体 SC", Georgia, serif;
  --font-body: "Alegreya", "Noto Serif SC", "Source Han Serif SC", "思源宋体 SC", Georgia, serif;
  --font-ui: "Alegreya", Georgia, "Noto Serif SC", serif;
  --font-accent: "LXGW WenKai", "霞鹜文楷", "Noto Serif SC", "Source Han Serif SC", serif;
  --font-code: "JetBrains Mono", "Fira Code", Consolas, Monaco, "Courier New", monospace;

  /* 语义化字号阶梯 — 1.25 ratio（Major Third）*/
  --text-caption: 0.75rem;    /* 12px — 标签、badge */
  --text-meta: 0.875rem;      /* 14px — 日期、页脚、次要元数据 */
  --text-body: 1rem;          /* 16px — 正文【最低 1rem，不小于 16px】*/
  --text-subhead: 1.25rem;    /* 20px — 卡片标题、内容 h3 */
  --text-heading: 1.563rem;   /* 25px — 章节标题、内容 h2 */
  --text-title: clamp(1.8rem, 3vw, 2.441rem);   /* 文章标题，流体 */
  --text-hero: clamp(2.8rem, 6vw, 4.5rem);       /* 首页大标题，流体 */

  /* 行高 */
  --leading-tight: 1.1;     /* 大标题 */
  --leading-heading: 1.25;  /* 标题 */
  --leading-subhead: 1.35;  /* 次级标题、卡片标题 */
  --leading-body: 1.7;      /* 正文 */
  --leading-relaxed: 1.8;   /* 宽松正文（长段落、blockquote）*/

  /* 引用块专用表面色 */
  --bg-quote: oklch(98.5% 0.005 95);
  --border-quote: oklch(84% 0.015 95);

  /* 语义间距 — 4pt 阶梯 */
  --space-xs: 4px;    /* 最紧：图标间距、tag 内边距 */
  --space-sm: 8px;    /* 紧：行内间隙、小元素间距 */
  --space-md: 16px;   /* 中：卡片内边距、相关元素间距 */
  --space-lg: 24px;   /* 宽：网格间隙、段落分隔 */
  --space-xl: 40px;   /* 稀：大章节间过渡 */
  --space-2xl: 64px;  /* 疏：页面级呼吸 */
  --space-3xl: 96px;  /* 极疏：Hero/页脚级 */

  /* 动画缓动 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --radius: 4px;
  --shadow-sm: 0 2px 8px oklch(0% 0 0 / 0.04);
}

html.dark {
  /* 暗色表面 — 向品牌绿调 (hue ~170)，色度 0.005 潜意识的品牌内聚 */
  --bg-page: oklch(17% 0.005 170);
  --bg-card: oklch(21% 0.005 170);
  --border-color: oklch(27% 0.005 170);

  /* 暗色引用块 — 比卡片略亮，形成微弱层次 */
  --bg-quote: oklch(23% 0.005 170);
  --border-quote: oklch(33% 0.01 170);

  /* 暗色文字 — 暖白，略带微弱的暖调 */
  --text-primary: oklch(92% 0.005 95);
  --text-secondary: oklch(68% 0.005 170);

  /* 暗色强调 — 提亮以适应深背景，色度略降 */
  --accent: oklch(48% 0.06 170);
  --accent-gold: oklch(75% 0.08 82);
  /* 暗色模式金 hover — 提亮以在深色背景上保持可见 */
  --accent-gold-hover: oklch(82% 0.07 82);
  /* 置于强调色上的文字 — 近白 */
  --text-on-accent: oklch(98% 0 0 0);

  /* 暗色语义状态 */
  --color-success: oklch(65% 0.08 160);
  --color-success-bg: oklch(25% 0.02 160);
  --color-error: oklch(60% 0.12 20);
  --color-error-bg: oklch(25% 0.02 20);
  --color-warning: oklch(70% 0.1 75);
  --color-warning-bg: oklch(25% 0.03 75);
  --color-info: oklch(65% 0.05 200);
  --color-info-bg: oklch(25% 0.02 200);

  --shadow-sm: 0 2px 8px oklch(0% 0 0 / 0.18);

  /* 暗色模式：浅色文字在深色背景上需要额外 0.05 行高补偿 */
  --leading-body: 1.75;
  --leading-relaxed: 1.85;
}

/* ============================================
   2. 基础重置
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: var(--leading-body);
  font-size: var(--text-body);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-heading);
  text-wrap: balance;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.75;
}

ul,
ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* ============================================
   2b. 动画
   ============================================ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes drawRight {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 滚动揭示：初始隐藏，JS 添加 .is-revealed 后触发 */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out),
              transform 0.6s var(--ease-out);
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 弱动偏好：关闭所有动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   3. 通用容器与工具类
   ============================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-heading);
  font-weight: 600;
  margin-bottom: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--space-sm);
  position: relative;
}

/* 章节标题下方金色装饰线 */
.section-title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 2em;
  height: 2px;
  background: var(--accent-gold);
  border-radius: 1px;
}

.section-title .more-link {
  font-size: var(--text-meta);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-weight: 400;
  transition: color 0.2s;
}

.section-title .more-link:hover {
  color: var(--accent-gold-hover);
  opacity: 1;
}

.btn-primary {
  display: inline-block;
  padding: 10px 24px;
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius);
  font-size: var(--text-meta);
  font-family: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.12s var(--ease-out),
              background 0.2s ease,
              opacity 0.2s ease;
  transform-origin: center center;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

/* 提交中状态 */
.btn-primary.is-submitting {
  pointer-events: none;
  opacity: 0.7;
  animation: btn-pulse 0.8s var(--ease-out) infinite;
}

@keyframes btn-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.45; }
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: var(--text-meta);
  font-family: var(--font-ui);
  font-weight: 400;
  transition: color 0.2s;
}

.btn-text:hover {
  color: var(--accent-gold-hover);
  opacity: 1;
}

.btn-text::after {
  content: "→";
  transition: transform 0.2s, color 0.2s;
  color: var(--accent-gold-hover);
}

.btn-text:hover::after {
  transform: translateX(3px);
  color: var(--accent);
}

/* ============================================
   4. 顶部导航
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-page);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.site-logo {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body);
  letter-spacing: 0.01em;
}

.main-nav ul {
  display: flex;
  gap: 32px;
}

.main-nav a {
  font-family: var(--font-ui);
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s;
  position: relative;
}

.main-nav a:hover,
.main-nav .current-menu-item > a {
  color: var(--accent-gold-hover);
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--accent-gold);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.main-nav .current-menu-item > a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-gold);
  border-radius: 1px;
}

/* ============================================
   4a. 二级子菜单（桌面端悬停下拉）
   ============================================ */

/* 父级菜单项 — 相对定位锚点 */
.main-nav .menu-item-has-children {
  position: relative;
}

/* 下拉箭头指示器（::before 避免与 .current-menu-item::after 金线冲突） */
.main-nav .menu-item-has-children > a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  margin-right: 6px;
  opacity: 0.45;
  transition: transform 0.2s ease, opacity 0.2s;
  vertical-align: middle;
  order: 1;
}

.main-nav .menu-item-has-children:hover > a::before {
  transform: translateY(1px) rotate(-135deg);
  opacity: 0.8;
}

/* 下拉菜单容器 */
.main-nav .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 150px;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--space-xs) 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.06);
  z-index: 110;
}

/* 悬停显示 */
.main-nav .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 子菜单链接 */
.main-nav .sub-menu .menu-item {
  display: block;
}

.main-nav .sub-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  text-decoration: none;
}

.main-nav .sub-menu a:hover {
  background: var(--bg-card);
  color: var(--accent-gold-hover);
  text-decoration: none;
}

/* 子菜单当前项高亮 */
.main-nav .sub-menu .current-menu-item > a {
  color: var(--accent-gold-hover);
}

/* 子菜单中不显示 ::after 底部金线 */
.main-nav .sub-menu .current-menu-item > a::after {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: background 0.2s;
  color: var(--text-secondary);
}

.header-actions button:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.header-actions svg {
  width: 18px;
  height: 18px;
}

/* 暗色切换图标保持视觉 20px，点击区域继承父级 44×44px */
.dark-toggle {
  opacity: 0.8;
  transition: opacity 0.2s;
}

.dark-toggle:hover {
  opacity: 1;
}

/* ============================================
   4b. 移动端汉堡菜单
   ============================================ */
.header-actions .nav-toggle {
  display: none; /* 桌面隐藏 */
}

.nav-toggle {
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius);
  transition: background 0.2s;
  color: var(--text-secondary);
}

.nav-toggle:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* 汉堡 → X 动画 */
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 移动端菜单面板 */
@media (max-width: 600px) {
  .header-actions .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-md) 0;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    z-index: 99;
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .main-nav a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-body);
    color: var(--text-primary);
  }

  .main-nav .current-menu-item > a::after {
    display: none;
  }

  /* 移动端子菜单 — 可展开/折叠 */
  .main-nav .menu-item-has-children > a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    margin-right: 6px;
    opacity: 0.45;
    transition: transform 0.25s ease;
    vertical-align: middle;
  }

  .main-nav .menu-item-has-children.is-expanded > a::before {
    transform: translateY(1px) rotate(-135deg);
    opacity: 0.8;
  }

  .main-nav .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    min-width: auto;
  }

  .main-nav .menu-item-has-children.is-expanded > .sub-menu {
    max-height: 600px;
  }

  .main-nav .sub-menu a {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-meta);
    color: var(--text-secondary);
  }
}

/* ============================================
   5. 首页 Hero
   ============================================ */
.home-hero {
  padding: var(--space-3xl) 0 var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
  min-height: 70vh;
}

.hero-welcome {
  font-family: var(--font-accent);
  font-size: var(--text-meta);
  color: var(--accent-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  animation: fadeUp 0.6s var(--ease-out) both;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: 0;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 0.3em;
  animation: fadeUp 0.6s var(--ease-out) 0.1s both;
}

/* 标题下方手工装帧感金线 */
.hero-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5em;
  height: 3px;
  background: var(--accent-gold);
  border-radius: 2px;
  transform-origin: left;
  animation: drawRight 0.7s var(--ease-out) 0.5s both;
}

.hero-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-subhead);
  color: var(--text-secondary);
  margin-top: 0.3em;
  margin-bottom: var(--space-lg);
  font-weight: 400;
  font-style: italic;
  animation: fadeUp 0.6s var(--ease-out) 0.2s both;
}

.hero-desc {
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 55ch;
  line-height: var(--leading-relaxed);
  font-size: var(--text-body);
  animation: fadeUp 0.6s var(--ease-out) 0.3s both;
}

.hero-buttons {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  animation: fadeUp 0.6s var(--ease-out) 0.4s both;
}

.hero-image {
  position: relative;
  animation: fadeUp 0.7s var(--ease-out) 0.25s both;
}

.hero-image img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  max-height: 500px;
}

/* 首页章节间距 — 渐进的松紧节奏 */
.home-section {
  padding-top: var(--space-2xl);
}

.home-section + .home-section {
  padding-top: var(--space-3xl);
}

/* ============================================
   6. 日志卡片
   ============================================ */
.blog-card {
  display: grid;
  grid-template-columns: 80px 1fr 160px;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-color);
  align-items: start;
  transition: transform 0.25s var(--ease-out),
              border-color 0.25s ease;
}

.blog-card:first-child {
  padding-top: 0;
}

.blog-card:hover {
  transform: translateX(6px);
  border-color: var(--accent-gold);
}

.blog-card-date {
  font-family: var(--font-ui);
  font-size: var(--text-meta);
  color: var(--text-secondary);
}

.blog-card-date .year {
  font-size: var(--text-caption);
  opacity: 0.7;
}

.blog-card-content h3 {
  font-family: var(--font-heading);
  font-size: var(--text-subhead);
  font-weight: 600;
  margin-bottom: 8px;
  line-height: var(--leading-subhead);
}

.blog-card-content h3 a {
  transition: color 0.2s;
}

.blog-card-content h3 a:hover {
  color: var(--accent-gold-hover);
  opacity: 1;
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.blog-card-tag {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--accent-gold);
  text-decoration: none;
  transition: color 0.2s;
}

.blog-card-tag:hover {
  color: var(--accent-gold-hover);
}

.blog-card-excerpt {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

.blog-card-thumb img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ============================================
   7. 作品网格
   ============================================ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.project-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}

.project-card:hover {
  transform: translateY(-3px);
}

.project-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.project-card:hover .project-thumb img {
  transform: scale(1.05);
}

.project-info {
  padding: 16px 20px 20px;
}

.project-status {
  font-family: var(--font-ui);
  display: inline-block;
  font-size: var(--text-caption);
  padding: 2px 8px;
  background: oklch(95% 0.03 82);
  color: var(--accent-gold);
  border-radius: 2px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 已完成状态 — 语义色 */
.project-status.is-done {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.project-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-subhead);
  margin-bottom: 4px;
  transition: color 0.2s;
}

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

.project-cat {
  font-size: var(--text-meta);
  color: var(--text-secondary);
}

/* ============================================
   7.5. 说说卡片 — 时间线风格
   ============================================ */
.shuoshuo-list {
  max-width: 680px;
  margin: 0 auto;
}

.shuoshuo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-color);
  transition: border-color 0.25s ease;
}

.shuoshuo-card:first-child {
  padding-top: 0;
}

.shuoshuo-card:hover {
  border-color: var(--accent-gold);
}

.shuoshuo-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-right: 68px;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
}

.shuoshuo-card-date {
  color: var(--accent-gold);
  font-weight: 500;
}

.shuoshuo-card-mood {
  color: var(--text-secondary);
  opacity: 0.6;
}

.shuoshuo-card-mood::before {
  content: "·";
  margin-right: var(--space-sm);
  opacity: 0.4;
}

.shuoshuo-card-content {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.shuoshuo-card-content p {
  margin: 0 0 var(--space-sm);
}

.shuoshuo-card-content p:last-child {
  margin-bottom: 0;
}

.shuoshuo-card-actions {
  position: absolute;
  top: var(--space-lg);
  right: 0;
}

.shuoshuo-card:first-child .shuoshuo-card-actions {
  top: 0;
}

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-caption);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.2s ease;
}

.like-btn:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold-hover);
}

.like-btn.is-liked {
  border-color: var(--accent-gold);
  color: var(--accent-gold-hover);
}

.like-btn.is-liked .like-icon {
  fill: var(--accent-gold);
}

.like-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: fill 0.2s ease;
}

.like-btn:active .like-icon {
  transform: scale(1.25);
}

.shuoshuo-empty {
  color: var(--text-secondary);
  font-size: var(--text-meta);
  padding: var(--space-2xl) 0;
}

/* ============================================
   7.6. 文章目录 (TOC)
   ============================================ */
/* 正文 + 目录：正文居左，目录退入右侧留白，不抢视觉权重 */
.single-body:has(.toc) {
  display: grid;
  grid-template-columns: minmax(0, 70ch) 200px;
  gap: var(--space-xl);
  align-items: start;
  justify-content: center;
}

.single-body .single-content {
  grid-column: 1;
  grid-row: 1;
}

.single-body .toc {
  grid-column: 2;
  grid-row: 1;
}

.toc {
  position: sticky;
  top: calc(64px + var(--space-md));
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  max-height: calc(100vh - 64px - var(--space-md) * 2);
  overflow-y: auto;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.toc:hover {
  opacity: 1;
}

.toc-details[open] .toc-title {
  margin-bottom: var(--space-sm);
}

.toc-title {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-meta);
  letter-spacing: 0.04em;
  user-select: none;
}

.toc-title::marker {
  color: var(--accent-gold);
}

.toc-list {
  counter-reset: toc-counter;
}

.toc-list ol {
  padding-left: var(--space-lg);
}

.toc-item {
  counter-increment: toc-counter;
  padding: 4px 0;
  line-height: 1.5;
}

.toc-item::before {
  content: counter(toc-counter) ".";
  color: var(--text-secondary);
  margin-right: 6px;
  font-size: var(--text-caption);
}

.toc-item a {
  color: var(--text-secondary);
  transition: color 0.2s;
}

.toc-item a:hover {
  color: var(--accent-gold);
}

.toc-level-2 {
  font-weight: 600;
}

.toc-level-3 {
  padding-left: var(--space-lg);
}

.toc-level-3::before {
  content: "—";
  color: var(--border-color);
  margin-right: 6px;
}

/* ============================================
   8. 单篇文章
   ============================================ */
.single-header {
  max-width: 70ch;
  margin: 0 auto var(--space-md);
  padding: var(--space-xl) 0 0;
}

.single-meta {
  font-family: var(--font-ui);
  font-size: var(--text-meta);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.single-cat-link {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--accent-gold);
  transition: opacity 0.2s;
}

.single-cat-link:hover {
  opacity: 0.7;
}

.single-title {
  font-family: var(--font-heading);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: var(--leading-heading);
  margin-bottom: 0;
}

.single-hero-img {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: var(--space-xl);
  max-height: 400px;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s;
}
.single-hero-img:hover {
  opacity: 0.92;
}

.single-content {
  max-width: 70ch;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  letter-spacing: 0;
}

.single-content p {
  margin-bottom: 1.6em;
}

.single-content strong,
.single-content b {
  font-weight: 600;
}

.single-content h2,
.single-content h3 {
  font-family: var(--font-heading);
  margin: 2.2em 0 1em;
  font-weight: 600;
  line-height: var(--leading-subhead);
}

.single-content h2 {
  font-size: var(--text-heading);
}
.single-content h3 {
  font-size: var(--text-subhead);
}

.single-content img {
  border-radius: var(--radius);
  margin: 2em 0;
  cursor: pointer;
  transition: opacity 0.2s;
}
.single-content img:hover {
  opacity: 0.92;
}

/* Blockquote — 双重线框源自古典书籍排版，金色菱角点缀四角，手工装帧感 */
.single-content blockquote,
.about-content blockquote {
  border: 1px solid var(--border-quote);
  outline: 1px solid var(--border-quote);
  outline-offset: 4px;
  padding: 1.8em 2em;
  margin: 2em 0.5em;
  color: var(--text-primary);
  background: var(--bg-quote);
  border-radius: 0;
  font-family: var(--font-accent);
  font-size: 1.05em;
  font-weight: 400;
  line-height: var(--leading-relaxed);
  letter-spacing: 0.02em;
  position: relative;
}

/* 左上角金色菱形标 — 仿佛装订线上的装饰铆钉 */
.single-content blockquote::before,
.about-content blockquote::before {
  content: "◆";
  position: absolute;
  top: -0.55em;
  left: 1.4em;
  font-size: 0.45rem;
  color: var(--accent-gold);
  background: var(--bg-quote);
  padding: 0 4px;
  line-height: 1;
}

/* 右下角金色菱形标 */
.single-content blockquote::after,
.about-content blockquote::after {
  content: "◆";
  position: absolute;
  bottom: -0.55em;
  right: 1.4em;
  font-size: 0.45rem;
  color: var(--accent-gold);
  background: var(--bg-quote);
  padding: 0 4px;
  line-height: 1;
}
/* 正文超链接 — 金色虚线下划线标识，hover 变实线 + 文字着色 */
.single-content a,
.about-content a,
.comment-content a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--accent-gold);
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    transition: all 0.2s ease;
}
.single-content a:hover,
.about-content a:hover,
.comment-content a:hover {
    color: var(--accent-gold);
    text-decoration-style: solid;
    text-decoration-color: var(--accent-gold);
    opacity: 1;
}
/* ============================================
   正文列表 — 有序 & 无序（含关于页）
   金色长破折号标记呼应 blockquote 菱形标，手工装帧感
   ============================================ */

/* === 列表容器 === */
.single-content ul,
.single-content ol,
.about-content ul,
.about-content ol {
  margin: 1.2em 0;
  padding-left: 0;
  list-style: none;
}

.single-content li,
.about-content li {
  margin-bottom: 0.4em;
  line-height: var(--leading-relaxed);
}

/* === 无序列表 — 金色 em-dash 标记 === */
.single-content ul > li,
.about-content ul > li {
  position: relative;
  padding-left: 1.5em;
}

.single-content ul > li::before,
.about-content ul > li::before {
  content: "\2014"; /* em dash */
  position: absolute;
  left: 0;
  color: var(--accent-gold);
  font-weight: 400;
}

/* === 有序列表 — 金色序号 === */
.single-content ol,
.about-content ol {
  counter-reset: content-ol;
}

.single-content ol > li,
.about-content ol > li {
  position: relative;
  padding-left: 2em;
  counter-increment: content-ol;
}

.single-content ol > li::before,
.about-content ol > li::before {
  content: counter(content-ol) ".";
  position: absolute;
  left: 0;
  color: var(--accent-gold);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-ui);
}

/* === 嵌套列表 === */
.single-content li > ul,
.single-content li > ol,
.about-content li > ul,
.about-content li > ol {
  margin: 0.35em 0 0.15em;
}

/* 二级有序列表 → 小写字母序号 */
.single-content ol ol,
.about-content ol ol {
  counter-reset: content-ol-sub;
}

.single-content ol ol > li,
.about-content ol ol > li {
  counter-increment: content-ol-sub;
}

.single-content ol ol > li::before,
.about-content ol ol > li::before {
  content: counter(content-ol-sub, lower-alpha) ".";
}

/* 二级无序列表 → 短破折号 (en dash)，区分层级 */
.single-content ul ul > li::before,
.single-content ol ul > li::before,
.about-content ul ul > li::before,
.about-content ol ul > li::before {
  content: "\2013"; /* en dash */
  color: var(--text-secondary);
}

/* 列表内嵌段落间距微调 */
.single-content li > p,
.about-content li > p {
  margin-bottom: 0.4em;
}

/* ============================================
   正文表格 — 账本式横线分隔，克制清晰
   移动端自动横向滚动
   ============================================ */
.single-content table,
.about-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: var(--text-meta);
  line-height: var(--leading-relaxed);
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.single-content thead,
.about-content thead {
  border-bottom: 2px solid var(--accent-gold);
}

.single-content th,
.about-content th {
  padding: 0.6em 0.8em;
  text-align: left;
  font-weight: 600;
  font-family: var(--font-heading);
  color: var(--text-primary);
  white-space: nowrap;
}

.single-content td,
.about-content td {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.single-content tr:last-child td,
.about-content tr:last-child td {
  border-bottom: none;
}

/* 偶数行微着色 — 极淡，不抢夺阅读注意力 */
.single-content tbody tr:nth-child(even),
.about-content tbody tr:nth-child(even) {
  background: var(--bg-card);
}

/* 表格标题 / figcaption */
.single-content figcaption,
.single-content table caption,
.about-content figcaption,
.about-content table caption {
  margin-bottom: 0.5em;
  font-size: var(--text-meta);
  color: var(--text-secondary);
  text-align: left;
}

/* ============================================
   代码块美化（行内 + 块级）
   ============================================ */
/* 行内代码：正文段落中穿插的短代码 */
:not(pre) > code {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.88em;
    font-family: var(--font-code);
    color: var(--accent);
    white-space: nowrap;
    vertical-align: 1px;
}

/* 块级代码块：大段代码 */
pre {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 1.5em 0;
    overflow-x: auto;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}

pre code {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-primary);
    font-family: var(--font-code);
    white-space: pre;
    word-wrap: normal;
}

/* 代码块滚动条美化 */
pre::-webkit-scrollbar {
    height: 6px;
}
pre::-webkit-scrollbar-track {
    background: transparent;
}
pre::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
    transition: background 0.2s;
}
pre::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* 兼容WordPress古腾堡代码块 */
.wp-block-code {
    margin: 1.5em 0;
    border: none;
    padding: 0;
}
.wp-block-code code {
    font-family: inherit;
}

/* ============================================
   9. 关于页
   ============================================ */
.about-wrap {
  max-width: 500px;
  margin: var(--space-3xl) auto var(--space-2xl);
  text-align: center;
  position: relative;
}

/* 信息卡与正文之间的金线分隔 */
.about-wrap::after {
  content: "";
  display: block;
  width: 4em;
  height: 2px;
  margin: var(--space-2xl) auto 0;
  background: var(--accent-gold);
  opacity: 0.5;
  border-radius: 1px;
}

.about-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto var(--space-lg);
  object-fit: cover;
  border: 2px solid var(--border-color);
}

.about-name {
  font-family: var(--font-heading);
  font-size: var(--text-heading);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.about-title {
  color: var(--text-secondary);
  font-size: var(--text-meta);
  font-family: var(--font-ui);
  margin-bottom: var(--space-lg);
}

.about-desc {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-xl);
  font-size: var(--text-body);
}

.social-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-lg);
}

.social-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-meta);
}

.social-item span:first-child {
  color: var(--text-secondary);
}

.about-content {
  max-width: 70ch;
  margin: 0 auto var(--space-3xl);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
}

.about-content p {
  margin-bottom: 1.5em;
}

.about-content h2,
.about-content h3,
.about-content h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 2em 0 1em;
  line-height: var(--leading-subhead);
}

.about-content h2 {
  font-size: var(--text-heading);
}
.about-content h3 {
  font-size: var(--text-subhead);
}

.about-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1.5em 0;
}

.about-content hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 2em 0;
}

.about-content code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: var(--font-code);
}

/* ============================================
   10. 友链
   ============================================ */
/* 友链页正文（页面编辑器长文），与文章正文同宽 */
.links-intro {
  max-width: 70ch;
  margin: 0 auto var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* 友链分类标题 */
.links-category-title {
  font-family: var(--font-heading);
  font-size: var(--text-subhead);
  font-weight: 600;
  margin-top: var(--space-xl);
  margin-bottom: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* 友链分类描述 */
.links-category-desc {
  font-size: var(--text-meta);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.link-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}

.link-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}

.link-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.link-info {
  flex: 1;
  min-width: 0;
}

.link-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-desc {
  font-size: var(--text-meta);
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   10.5. 页面通用头部
   ============================================ */
.page-header {
  padding-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-meta);
  margin-top: calc(-1 * var(--space-md));
  margin-bottom: var(--space-lg);
}

/* 照片总数 badge — 画廊页专用 */
.gallery-count-badge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--space-xs);
  font-family: var(--font-ui);
  color: var(--text-secondary);
}

.gallery-count-num {
  font-family: var(--font-heading);
  font-size: var(--text-heading);
  font-weight: 700;
  color: var(--accent-gold);
  line-height: 1;
}

.gallery-count-label {
  font-size: var(--text-meta);
  color: var(--text-secondary);
}

/* ============================================
   11. 分页
   ============================================ */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-2xl) 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-size: var(--text-meta);
  font-family: var(--font-ui);
  color: var(--text-secondary);
}

.page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

/* ============================================
   12. 搜索弹窗
   ============================================ */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--bg-page);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  padding: 16px 0;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;
}

.search-modal.is-open {
  transform: translateY(0);
}

.search-modal .container {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-modal form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-modal input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-modal input:focus-visible {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px oklch(68% 0.09 82 / 0.25);
  outline: none;
}

.search-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: all 0.2s;
}

.search-close:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* ============================================
   13. 评论区
   ============================================ */
.comments-area {
  max-width: 70ch;
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

.comments-title {
  font-family: var(--font-heading);
  font-size: var(--text-subhead);
  margin-bottom: 16px;
  font-weight: 600;
}

.comment-list {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

/* 嵌套回复 — 缝线转角 + 淡金渐变 + 尺寸层级，子对话有手稿质感 */
.comment-list .children {
  list-style: none;
  margin: 8px 0 0 var(--space-lg);
  padding: 10px 0 6px var(--space-md);
  border-left: 2.5px solid oklch(68% 0.09 82 / 0.55);
  background: linear-gradient(
    to right,
    oklch(68% 0.09 82 / 0.06) 0%,
    oklch(68% 0.09 82 / 0.018) 35%,
    transparent 70%
  );
  position: relative;
}

/* 顶部横向转角线 — 金线从父评论缝入子对话 */
.comment-list .children::before {
  content: "";
  display: block;
  width: 22px;
  height: 0;
  border-top: 2.5px solid oklch(68% 0.09 82 / 0.55);
  margin-bottom: var(--space-sm);
  margin-left: calc(-1 * var(--space-md));
}

/* 转角处金色菱标 ◆ — 与正文 blockquote 装帧铆钉同源 */
.comment-list .children::after {
  content: "◆";
  position: absolute;
  top: 10px;
  left: 1px;
  font-size: 0.42rem;
  color: var(--accent-gold);
  line-height: 1;
  transform: translate(-50%, -52%);
}

/* 子评论项 — 虚线分隔，如手稿页间拆线 */
.comment-list .children .comment {
  font-size: 0.9375rem;
  border-bottom: 1px dashed var(--border-color);
  padding: var(--space-sm) 0;
}

.comment-list .children .comment:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* 子评论内容对齐 — 基于小头像尺寸 (24px + 10px gap = 34px) */
.comment-list .children .comment-meta {
  padding-left: 34px;
}

.comment-list .children .comment-content {
  padding-left: 34px;
  font-size: var(--text-meta);
  line-height: var(--leading-body);
}

.comment-list .children .comment-reply {
  padding-left: 34px;
  margin-top: 2px;
}

/* 子评论回复链接 */
.comment-list .children .comment-reply-link {
  font-size: var(--text-caption);
}

/* 置顶评论 — 金线左缘 + 置顶徽标 */
.comment.is-pinned > .comment-body {
  border-left: 3px solid var(--accent-gold);
  padding-left: var(--space-sm);
  background: linear-gradient(
    to right,
    oklch(68% 0.09 82 / 0.06) 0%,
    transparent 60%
  );
  border-radius: 0 4px 4px 0;
}

.comment-pinned-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-gold);
  background: oklch(68% 0.09 82 / 0.12);
  border: 1px solid oklch(68% 0.09 82 / 0.3);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.5;
}

/* 子评论头像 */
.comment-list .children .avatar {
  width: 24px;
  height: 24px;
}

/* 子评论作者名 — 与正文统一，不用更小的 caption */
.comment-list .children .comment-author .fn {
  font-size: var(--text-meta);
}

/* 三级嵌套（孙评论）— 更淡的线索、无笺纸纹理，保持层次清晰 */
.comment-list .children .children {
  margin-left: 0;
  margin-top: 2px;
  padding-top: var(--space-xs);
  background: none;
  border-left-color: oklch(68% 0.09 82 / 0.3);
}

.comment-list .children .children::before {
  border-top-color: oklch(68% 0.09 82 / 0.3);
}

.comment-list .children .children::after {
  content: none; /* 孙评论不重复菱标 */
}

.comment-list .children .children .comment {
  font-size: 0.875rem;
}

.comment-list .children .children .comment-meta,
.comment-list .children .children .comment-content,
.comment-list .children .children .comment-reply {
  padding-left: 28px; /* 20px avatar + 8px gap */
}

.comment-list .children .children .avatar {
  width: 20px;
  height: 20px;
}

.comment-list .children .children .comment-author .fn {
  font-size: var(--text-caption);
}

.comment {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.comment-author .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.comment-author .fn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-style: normal;
  font-size: var(--text-meta);
}

.comment-meta {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  margin-bottom: 8px;
  padding-left: 42px;
}

.comment-content {
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  padding-left: 42px;
}

.comment-content p {
  margin-bottom: 0.5em;
}

.comment-reply {
  padding-left: 42px;
  margin-top: 6px;
}

.comment-reply-to {
  display: inline-block;
  margin-left: 10px;
  padding-left: 6px;
  font-size: var(--text-caption);
  color: var(--accent-gold);
}

/* 回复标记前的小金点 — 手稿旁注的装饰感 */
.comment-reply-to::before {
  content: "·";
  margin-right: 5px;
  color: var(--accent-gold);
  opacity: 0.65;
}

.comment-reply-to .reply-to-name {
  color: var(--accent-gold);
  font-weight: 600;
}

.comment-reply-link {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* 评论模态框 */
.comment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.comment-modal.is-open {
  display: flex;
}

.comment-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: oklch(0% 0 0 / 0.4);
  backdrop-filter: blur(2px);
}

.comment-modal-box {
  position: relative;
  width: 90%;
  max-width: 480px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px oklch(0% 0 0 / 0.12);
  overflow: hidden;
  animation: modalIn 0.2s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comment-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.comment-modal-title {
  font-family: var(--font-heading);
  font-weight: 500;
  margin: 0;
}

.comment-modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.comment-cancel-reply a {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  transition: color 0.2s;
}

.comment-cancel-reply a:hover {
  color: var(--accent-gold);
}

.comment-modal-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: var(--radius);
  background: transparent;
  border: none;
  cursor: pointer;
}

.comment-modal-close:hover {
  background: var(--bg-page);
  color: var(--text-primary);
}

.comment-modal-body {
  padding: 20px;
}

.comment-modal-body p {
  margin-bottom: 14px;
}

.comment-form-cookies {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.comment-form-cookies label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.comment-form-cookies input[type="checkbox"] {
  margin: 0;
}

.comment-modal-body label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-meta);
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.comment-modal-body input,
.comment-modal-body textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.comment-modal-body input:focus-visible,
.comment-modal-body textarea:focus-visible {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px oklch(68% 0.09 82 / 0.25);
  outline: none;
}

.comment-modal-body textarea {
  min-height: 90px;
  resize: vertical;
}

.comment-modal-body .form-submit {
  margin-bottom: 0;
  text-align: right;
}

.comment-modal-body .btn-primary {
  padding: 8px 20px;
  font-size: var(--text-meta);
}

/* ============================================
   14. 页脚 — 左右分组：站点归属 | 访客链接
   ============================================ */
.site-footer {
  border-top: 1px solid var(--border-color);
  padding: var(--space-lg) 0;
  margin-top: var(--space-2xl);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.footer-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.footer-nav a {
  color: var(--text-secondary);
  transition: color 0.2s;
}

.footer-nav a:hover,
.footer-nav .current-menu-item > a {
  color: var(--accent-gold-hover);
  opacity: 1;
}

.footer-beian a {
  color: inherit;
}

.footer-beian a:hover {
  color: var(--accent-gold-hover);
  opacity: 1;
}

.footer-credit {
  color: var(--accent-gold);
  font-weight: 500;
}

.footer-credit::before {
  content: "·";
  margin-right: var(--space-md);
  color: var(--accent-gold);
  opacity: 0.55;
  font-weight: 400;
}

.footer-credit a {
  color: inherit;
  transition: opacity 0.2s;
}

.footer-credit a:hover {
  opacity: 0.75;
}

.back-to-top {
  color: var(--text-secondary);
  transition: color 0.2s;
}

.back-to-top:hover {
  color: var(--accent-gold-hover);
  opacity: 1;
}

/* 页脚自定义 HTML — 全宽独立行 */
.footer-custom-html {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border-color);
  font-size: var(--text-caption);
  line-height: 1.6;
}

.footer-custom-html > * {
  margin: 0;
}

.footer-custom-html a {
  color: var(--accent-gold);
  transition: opacity 0.2s;
}

.footer-custom-html a:hover {
  opacity: 0.75;
}

/* ============================================
   15. 响应式适配
   ============================================ */
@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding: var(--space-2xl) 0 var(--space-xl);
    gap: var(--space-xl);
    min-height: auto;
  }

  .hero-image {
    order: -1;
  }

  .hero-image img {
    max-height: 360px;
  }

  .blog-card {
    grid-template-columns: 60px 1fr;
  }

  .blog-card-thumb {
    display: none;
  }

  .home-section {
    padding-top: var(--space-xl);
  }

  .home-section + .home-section {
    padding-top: var(--space-2xl);
  }

  .single-header {
    max-width: none;
    margin: 0 0 var(--space-xl);
    padding: var(--space-xl) 0 var(--space-lg);
  }

  .single-content,
  .about-content,
  .comments-area,
  .post-navigation {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .nav-prev, .nav-next {
    max-width: none;
  }

  .single-body:has(.toc) {
    display: block;
  }

  .toc {
    position: static;
    max-width: 70ch;
    margin: 0 auto var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-card);
    opacity: 1;
    max-height: none;
    overflow-y: visible;
  }

  .about-wrap {
    margin: var(--space-2xl) auto var(--space-xl);
  }

  .about-wrap::after {
    margin-top: var(--space-xl);
  }
}

/* 平板 & 桌面 ≥601px — 4 列宽窄交错 */
/* 平板 & 桌面 ≥601px — 8 单位比例网格，卡片跟着图片大小走 */
@media (min-width: 601px) {
  /* 列宽单位: 1/8 容器 */
  .photos-grid .grid-sizer {
    width: calc((100% - 7 * var(--masonry-gutter)) / 8);
  }

  /* 默认/u2 — 竖图/方图: 1/4 宽 */
  .photos-grid .masonry-item {
    width: calc((100% - 3 * var(--masonry-gutter)) / 4);
  }

  /* u3 — 微宽: 3/8 宽 */
  .photos-grid .masonry-item--u3 {
    width: calc((300% - 5 * var(--masonry-gutter)) / 8);
  }

  /* u4 — 半宽: 1/2 宽 */
  .photos-grid .masonry-item--u4 {
    width: calc((100% - var(--masonry-gutter)) / 2);
  }

  /* u5 — 宽图: 5/8 宽 */
  .photos-grid .masonry-item--u5 {
    width: calc((500% - 3 * var(--masonry-gutter)) / 8);
  }

  /* u6 — 横图: 3/4 宽 */
  .photos-grid .masonry-item--u6 {
    width: calc((300% - var(--masonry-gutter)) / 4);
  }

  /* u7 — 宽横图: 7/8 宽 */
  .photos-grid .masonry-item--u7 {
    width: calc((700% - var(--masonry-gutter)) / 8);
  }

  /* u8 — 全景: 整行 */
  .photos-grid .masonry-item--u8 {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 0 var(--space-md);
  }

  .header-inner {
    height: 56px;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .photos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .photo-info {
    padding: 10px 12px 14px;
  }

  .photo-title {
    font-size: var(--text-meta);
  }

  .single-photo-img {
    border-radius: 0;
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    width: calc(100% + 2 * var(--space-md));
  }

  .photo-tags {
    gap: 6px;
  }

  .photo-tag {
    font-size: 12px;
    padding: 2px 8px;
  }

  .single-header {
    padding: var(--space-xl) 0 var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .single-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .single-hero-img {
    max-height: 240px;
    margin-bottom: var(--space-lg);
  }

  .single-content,
  .about-content {
    font-size: 0.9375rem;
  }

  .single-content blockquote,
  .about-content blockquote {
    margin: 1.5em 0;
    padding: 1.2em 1.3em;
    outline-offset: 3px;
  }

  .single-content blockquote::before,
  .single-content blockquote::after,
  .about-content blockquote::before,
  .about-content blockquote::after {
    font-size: 0.35rem;
  }

  .about-wrap {
    margin: var(--space-xl) auto var(--space-lg);
  }

  .about-wrap::after {
    margin-top: var(--space-lg);
  }

  .about-avatar {
    width: 80px;
    height: 80px;
  }

  .post-navigation {
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
  }

  .nav-prev, .nav-next {
    max-width: none;
  }

  .nav-next {
    text-align: left;
  }

  .links-grid {
    grid-template-columns: 1fr;
  }

  /* 移动端动效优化 — 更短距离、更快节奏 */
  .reveal {
    transform: translateY(12px);
    transition: opacity 0.45s var(--ease-out),
                transform 0.45s var(--ease-out);
  }

  .hero-welcome {
    animation-duration: 0.45s;
  }

  .hero-title {
    animation-duration: 0.45s;
    animation-delay: 0.05s;
  }

  .hero-title::after {
    animation-duration: 0.5s;
    animation-delay: 0.25s;
  }

  .hero-subtitle {
    animation-duration: 0.45s;
    animation-delay: 0.1s;
  }

  .hero-image {
    animation-duration: 0.45s;
    animation-delay: 0.05s;
  }

  .hero-desc {
    animation-duration: 0.45s;
    animation-delay: 0.15s;
  }

  .hero-buttons {
    animation-duration: 0.45s;
    animation-delay: 0.2s;
  }

  /* 页脚 — 移动端居中、收紧 */
  .site-footer {
    padding: var(--space-md) 0;
  }

  .footer-inner {
    justify-content: center;
    text-align: center;
  }

  .footer-group {
    justify-content: center;
  }

  .footer-nav ul {
    justify-content: center;
  }

  .footer-custom-html {
    text-align: center;
  }

  .shuoshuo-list {
    max-width: 100%;
  }

  .shuoshuo-card-content {
    font-size: 0.9375rem;
  }

  .shuoshuo-card-meta {
    padding-right: 0;
  }

  .shuoshuo-card-actions {
    position: static;
    display: flex;
    justify-content: center;
  }

  .toc {
    margin-left: 0;
    margin-right: 0;
    padding: var(--space-sm);
  }

  .toc-level-3 {
    padding-left: var(--space-md);
  }

  .lightbox-close {
    top: 12px;
    right: 12px;
  }

  .comment-list .children {
    margin-left: var(--space-sm);
    padding-left: var(--space-sm);
    border-left: 2.5px solid oklch(68% 0.09 82 / 0.55);
    background: linear-gradient(
      to right,
      oklch(68% 0.09 82 / 0.045) 0%,
      transparent 50%
    );
  }

  .comment-list .children::before {
    width: 14px;
    margin-left: calc(-1 * var(--space-sm));
  }

  .comment-list .children::after {
    top: 10px;
    font-size: 0.35rem;
  }

  .comment-list .children .comment {
    font-size: 0.9375rem;
  }

  .comment-list .children .comment-meta,
  .comment-list .children .comment-content,
  .comment-list .children .comment-reply {
    padding-left: 28px;
  }

  /* 瀑布流 1 列沉浸式 — 手机端全部撑满 */
  :root {
    --masonry-gutter: 12px;
  }

  .photos-grid .grid-sizer,
  .photos-grid .masonry-item,
  .photos-grid .masonry-item--u3,
  .photos-grid .masonry-item--u4,
  .photos-grid .masonry-item--u5,
  .photos-grid .masonry-item--u6,
  .photos-grid .masonry-item--u7,
  .photos-grid .masonry-item--u8 {
    width: 100%;
  }
}
/* ============================================
   文章上下篇导航
   ============================================ */
.post-navigation {
    max-width: 70ch;
    margin: var(--space-2xl) auto 0;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    position: relative;
}

/* 金色菱形分隔标 — 与正文 blockquote 装帧铆钉同源，置于顶边居中 */
.post-navigation::before {
    content: "◆";
    position: absolute;
    top: -0.55em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.45rem;
    color: var(--accent-gold);
    background: var(--bg-page);
    padding: 0 8px;
    line-height: 1;
}

.nav-prev, .nav-next {
    flex: 1;
    min-width: 0;
    max-width: calc(50% - var(--space-md));
}
.nav-next {
    text-align: right;
}
.nav-label {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--text-caption);
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nav-title {
    font-family: var(--font-heading);
    font-size: var(--text-meta);
    font-weight: 600;
    line-height: var(--leading-subhead);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s;
}
.nav-title:hover {
    color: var(--accent-gold);
}
.nav-prev .nav-title::before {
    content: "← ";
    color: var(--text-secondary);
    transition: color 0.2s;
}
.nav-next .nav-title::after {
    content: " →";
    color: var(--text-secondary);
    transition: color 0.2s;
}
.nav-prev .nav-title:hover::before,
.nav-next .nav-title:hover::after {
    color: var(--accent-gold);
}

/* ===== 代码块增强：行号 + 复制按钮 ===== */
pre {
    position: relative;
    padding-left: 3.5em; /* 给行号留位置 */
}

/* 行号：基于每行span计数，100%准确 */
.code-with-lines {
    counter-reset: code-line;
}
.code-with-lines .code-line {
    display: block;
    counter-increment: code-line;
    position: relative;
    min-height: 1.5em;
}
.code-with-lines .code-line::before {
    content: counter(code-line);
    position: absolute;
    left: -3em;
    width: 2.2em;
    text-align: right;
    color: var(--text-secondary);
    opacity: 0.5;
    user-select: none;
    font-family: inherit;
    font-size: 0.9em;
    line-height: 1.65;
}

/* 代码块内边距统一 */
pre {
    position: relative;
    padding-left: 3.5em;
}

/* 兼容古腾堡代码块默认样式 */
.wp-block-code {
    border: none;
    padding: 0;
    margin: 1.5em 0;
}
.wp-block-code code {
    padding: 16px 20px 16px 3.5em;
    background: var(--bg-card);
}
/* 复制按钮 */
.code-copy-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 4px 10px;
    font-size: var(--text-caption);
    font-family: var(--font-ui);
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}
pre:hover .code-copy-btn {
    opacity: 1;
}
.code-copy-btn:hover {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

/* 高亮配色：适配明暗双模式 */
.hljs {
    background: transparent !important;
    color: var(--text-primary) !important;
}
/* 浅色模式关键字配色 */
.hljs-keyword, .hljs-selector-tag { color: #a626a4; }
.hljs-string { color: #50a14f; }
.hljs-number { color: #986801; }
.hljs-comment { color: #a0a1a7; font-style: italic; }
.hljs-function { color: #4078f2; }
.hljs-title { color: #4078f2; }

/* 暗色模式自动切换配色 */
html.dark .hljs-keyword, html.dark .hljs-selector-tag { color: #c678dd; }
html.dark .hljs-string { color: #98c379; }
html.dark .hljs-number { color: #d19a66; }
html.dark .hljs-comment { color: #5c6370; }
html.dark .hljs-function { color: #61afef; }

/* ============================================
   18. 照片墙 / Photo Gallery
   ============================================ */

/* 照片网格 — 自适应列数，最小 280px 列宽 */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* 空状态 */
.photos-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-meta);
  padding: var(--space-2xl) 0;
}

/* 照片卡片 */
.photo-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-out);
}

.photo-card:hover {
  transform: translateY(-4px);
}

/* 缩略图 — 正方形比例 */
.photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--border-color);
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}

.photo-card:hover .photo-thumb img {
  transform: scale(1.06);
}

/* 无特色图占位 */
.photo-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: var(--text-caption);
}

.photo-thumb-placeholder::after {
  content: "\6682\65E0\56FE\7247";
}

/* 卡片信息区 */
.photo-info {
  padding: 14px 18px 18px;
}

.photo-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-subhead);
  margin-bottom: 6px;
  transition: color 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.photo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.photo-date,
.photo-location,
.photo-camera {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.photo-date::before {
  content: "\1F4C5 ";
}

.photo-location::before {
  content: "\1F4CD ";
}

.photo-camera::before {
  content: "\1F4F7 ";
}

/* --- 卡片 hover 正文摘要 --- */
.photo-excerpt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-md);
  background: oklch(0% 0 0 / 0.68);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
  overflow-y: auto;
}

.photo-card:hover .photo-excerpt {
  opacity: 1;
}

.photo-excerpt p {
  width: 100%;
  color: oklch(98% 0 0 / 0.95);
  font-family: var(--font-body);
  font-size: var(--text-meta);
  line-height: var(--leading-relaxed);
  text-align: left;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ============================================
   18b. 瀑布流 Masonry 布局 — 沉浸式
   ============================================ */

:root {
  --masonry-gutter: 14px;
}

/* Masonry 列宽基准 — 绝对定位不参与布局(宽在媒体查询内) */
.photos-grid .grid-sizer {
  position: absolute;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Masonry 间距基准 — 与 grid-sizer 同样不参与布局 */
.photos-grid .gutter-sizer {
  width: var(--masonry-gutter);
  position: absolute;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Masonry item 通用 — margin-bottom 全尺寸共用 */
.photos-grid .masonry-item {
  margin-bottom: var(--masonry-gutter);
}

/* Staggered reveal — 行内级联淡入，每张卡片依次浮现 */
#masonry-grid .masonry-item .reveal {
  transition-delay: calc(var(--item-index, 0) * 0.06s);
}

/* Masonry 接管 */
#masonry-grid.photos-grid {
  display: block;
  position: relative;
}

#masonry-grid .masonry-item {
  float: left;
}

/* --- 照片卡片 — 悬浮无边界 --- */
#masonry-grid .photo-card {
  display: inline-block;
  width: 100%;
  background: transparent;
  box-shadow: none;
  border-radius: 12px;
}

/* --- 照片链接容器 --- */
#masonry-grid .photo-link {
  display: block;
  position: relative;
}

/* --- 图片容器 — 自然比例 + 圆角 --- */
#masonry-grid .photo-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  aspect-ratio: auto;
}

#masonry-grid .photo-thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.55s var(--ease-out), filter 0.55s var(--ease-out);
}

#masonry-grid .photo-card:hover .photo-thumb img {
  transform: scale(1.05);
  filter: brightness(1.06);
}

/* 悬停时浮现暖金微光 — 内阴影模拟画框光 */
#masonry-grid .photo-card:hover .photo-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px oklch(68% 0.09 82 / 0.35);
  pointer-events: none;
  z-index: 2;
}

/* --- 骨架屏 Shimmer --- */
.photo-skeleton {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(
    110deg,
    var(--border-color) 30%,
    var(--bg-card) 50%,
    var(--border-color) 70%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.photo-thumb.is-loaded .photo-skeleton {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* --- 悬停渐变遮罩 — 画廊标签式 --- */
.photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 14px 12px;
  background: linear-gradient(
    to top,
    oklch(0% 0 0 / 0.62) 0%,
    oklch(0% 0 0 / 0.25) 60%,
    transparent 100%
  );
  border-radius: 0 0 12px 12px;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
}

/* 遮罩顶部金色标线 — 画框标签意象 */
.photo-overlay::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 0 10px;
  background: var(--accent-gold);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out) 0.06s;
}

#masonry-grid .photo-card:hover .photo-overlay {
  opacity: 1;
}

#masonry-grid .photo-card:hover .photo-overlay::before {
  transform: scaleX(1);
}

.photo-overlay-title {
  font-family: var(--font-heading);
  font-size: var(--text-meta);
  font-weight: 600;
  color: oklch(98% 0 0 / 0.95);
  margin: 0 0 4px;
  text-shadow: 0 1px 4px oklch(0% 0 0 / 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 遮罩内的元信息（日期、地点、相机） */
.photo-overlay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.photo-overlay-meta .photo-date,
.photo-overlay-meta .photo-location,
.photo-overlay-meta .photo-camera {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: oklch(97% 0 0 / 0.85);
  text-shadow: 0 1px 3px oklch(0% 0 0 / 0.4);
}

.photo-overlay-meta .photo-date::before {
  content: "\1F4C5 ";
}

.photo-overlay-meta .photo-location::before {
  content: "\1F4CD ";
}

.photo-overlay-meta .photo-camera::before {
  content: "\1F4F7 ";
}

/* 遮罩内简介 */
.photo-overlay-excerpt {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: oklch(97% 0 0 / 0.92);
  line-height: var(--leading-relaxed);
  margin: 6px 0 0;
  text-shadow: 0 1px 3px oklch(0% 0 0 / 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 暗色模式微调 — 加深遮罩，提升文字可读性 --- */
html.dark .photo-overlay {
  background: linear-gradient(
    to top,
    oklch(0% 0 0 / 0.88) 0%,
    oklch(0% 0 0 / 0.5) 45%,
    oklch(0% 0 0 / 0.08) 80%,
    transparent 100%
  );
}

/* 暗色模式：标题更亮、阴影更锐，确保在任何背景图上都清晰 */
html.dark .photo-overlay-title {
  color: oklch(100% 0 0 / 1);
  text-shadow: 0 1px 3px oklch(0% 0 0 / 0.7);
  font-weight: 700;
}

html.dark .photo-overlay-meta .photo-date,
html.dark .photo-overlay-meta .photo-location,
html.dark .photo-overlay-meta .photo-camera,
html.dark .photo-overlay-excerpt {
  color: oklch(100% 0 0 / 0.92);
  text-shadow: 0 1px 2px oklch(0% 0 0 / 0.6);
}

html.dark #masonry-grid .photo-card:hover .photo-thumb::after {
  box-shadow: inset 0 0 0 2px oklch(75% 0.08 82 / 0.4);
}

/* ============================================
   19. 单张照片页
   ============================================ */

/* 全尺寸照片 — 保持原比例 */
.single-photo-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  cursor: zoom-in;
}

/* 拍摄信息标签 */
.photo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.photo-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  padding: 3px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

/* ============================================
   20. 图片灯箱
   ============================================ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0% 0 0 / 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  cursor: pointer;
  /* 导航按钮与计数器定位参考 */
}

.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 8px 40px oklch(0% 0 0 / 0.4);
  cursor: default;
  transform: scale(0.95);
  transition: opacity 0.2s ease;
  /* transform transition 由 JS 控制，避免与拖拽/缩放冲突 */
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}

.lightbox-overlay.is-open .lightbox-img {
  transform: scale(1);
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}

/* ---- 加载动画 ---- */
.lightbox-spinner {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2.5px solid oklch(100% 0 0 / 0.2);
  border-top-color: var(--text-on-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.lightbox-spinner.is-active {
  opacity: 1;
  visibility: visible;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- 关闭按钮 ---- */
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(100% 0 0 / 0.12);
  border: 1px solid oklch(100% 0 0 / 0.18);
  border-radius: 50%;
  color: var(--text-on-accent);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 1;
}

.lightbox-close:hover {
  background: oklch(100% 0 0 / 0.22);
  transform: scale(1.08);
}

/* ---- 上一张 / 下一张 ---- */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(100% 0 0 / 0.08);
  border: none;
  border-radius: var(--radius);
  color: var(--text-on-accent);
  font-size: 36px;
  font-family: var(--font-ui);
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  opacity: 0.5;
  z-index: 1;
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-prev:hover,
.lightbox-next:hover {
  background: oklch(100% 0 0 / 0.18);
  opacity: 1;
}

/* ---- 底部工具栏（旋转 + 计数器）---- */
.lightbox-toolbar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.lightbox-counter {
  color: oklch(100% 0 0 / 0.6);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  pointer-events: none;
  min-width: 48px;
  text-align: center;
}

/* ---- 旋转按钮 ---- */
.lightbox-rotate-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(100% 0 0 / 0.08);
  border: 1px solid oklch(100% 0 0 / 0.12);
  border-radius: 50%;
  color: oklch(100% 0 0 / 0.65);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.lightbox-rotate-btn:hover {
  background: oklch(100% 0 0 / 0.18);
  color: var(--text-on-accent);
  transform: scale(1.1);
}

/* ---- 缩放百分比指示器 ---- */
.lightbox-zoom-indicator {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: oklch(0% 0 0 / 0.5);
  border-radius: 12px;
  color: var(--text-on-accent);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
  z-index: 1;
}

.lightbox-zoom-indicator.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 移动端：导航按钮不遮挡图片 */
@media (max-width: 600px) {
  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 48px;
    font-size: 28px;
    opacity: 0.6;
  }

  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }

  .lightbox-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .lightbox-toolbar {
    bottom: 16px;
    gap: 8px;
  }

  .lightbox-rotate-btn {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }

  .lightbox-counter {
    font-size: 12px;
  }

  .lightbox-zoom-indicator {
    top: 16px;
  }
}
html.dark .hljs-title { color: #61afef; }