/*
 * Huang 网站主样式表
 * --------------------------------------------------------------------------
 * 这是全站唯一需要手工维护的 CSS 源文件。构建后它会被复制到 dist/client，
 * 因此请只修改 public/styles.css，不要直接修改 dist/client/styles.css。
 *
 * 推荐阅读顺序：字体与变量 → 全局容器 → 导航 → 首页 → 内容列表 →
 * 文章与 Markdown → 翻页 → 响应式适配。
 * 初学者建议：颜色、字体和最大宽度优先在 :root 中统一调整。
 */

/* 字体资源：Geist Mono 用于日期、编号、代码和标签。 */
@font-face {
  font-family: "Geist Mono";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.7.2/dist/fonts/geist-mono/GeistMono-Variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

/* 全局设计变量：统一管理颜色、字体、圆角和页面最大宽度。 */
:root {
  color-scheme: light;

  /*
   * 页面背景与半透明表面：
   * #f2ede3 是全站轻暖羊皮纸基色，其他表面都围绕它增加明暗层次。
   */
  --background-100: #f2ede3;
  --background-200: rgba(29, 27, 27, 0.035);
  --surface-raised: rgba(250, 247, 241, 0.8);
  --surface-code: #efe9df;
  --surface-code-toolbar: #e8e1d7;
  --surface-prompt: var(--surface-code);
  --surface-prompt-toolbar: var(--surface-code-toolbar);
  --surface-react: #ffffff;
  --surface-hover: rgba(250, 247, 241, 0.94);
  --border-code: #dad1c4;
  --border-prompt: var(--border-code);
  --border-react: #dcd6cd;
  /*
   * 全站共用的纸张表面：
   * 不再使用大范围明暗光晕，三层微纹理均匀平铺，避免页面产生白黄渐变。
   * 深浅颗粒模拟纸浆纤维，极淡斜纹让磨砂表面更规整。
   */
  --paper-surface:
    radial-gradient(
      circle,
      rgba(93, 75, 57, 0.05) 0 0.45px,
      transparent 0.75px
    ) 0 0 / 4px 4px,
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.34) 0 0.4px,
      transparent 0.72px
    ) 2px 1px / 6px 6px,
    linear-gradient(
      115deg,
      rgba(112, 90, 66, 0.024) 25%,
      transparent 25%
    ) 0 0 / 8px 8px;

  /* 从深到浅的正文、说明文字和弱化文字颜色。 */
  --gray-1000: #1d1b1b;
  --gray-900: #56534f;
  --gray-800: #6f6b66;
  --gray-700: #8a8680;
  --gray-alpha-100: rgba(29, 27, 27, 0.04);
  --gray-alpha-200: rgba(29, 27, 27, 0.07);
  --gray-alpha-400: rgba(29, 27, 27, 0.12);
  --gray-alpha-500: rgba(29, 27, 27, 0.21);
  --gray-alpha-700: rgba(29, 27, 27, 0.46);

  /* 青绿色品牌色：用于链接、焦点、标签和交互状态。 */
  --accent-100: rgba(36, 93, 98, 0.08);
  --accent-200: rgba(36, 93, 98, 0.14);
  --accent-700: #8b4513;
  --accent-800: #8b4513;

  /* Markdown 提示框使用的错误、警告、成功和信息颜色。 */
  --red-100: #f9e8e5;
  --red-800: #833b37;
  --amber-100: #f4ead2;
  --amber-800: #8a5710;
  --green-100: #e4ede3;
  --green-800: #8b4513;
  --blue-100: #e3ebef;
  --blue-800: #365f80;

  /* 三档圆角：小组件、普通浮层和大型表面。 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* 字体栈：浏览器会从左到右寻找可用字体。 */
  --sans: "Libre Baskerville", Georgia, "Noto Serif SC", "Source Han Serif SC", "PingFang SC", "Microsoft YaHei", serif;
  --mono: "Libre Baskerville", Georgia, "Noto Serif SC", "Source Han Serif SC", serif;
  --code-font: "Geist Mono", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  --title-serif: "Libre Baskerville", Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --serif: "Libre Baskerville", Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --source-han-serif: "Libre Baskerville", Georgia, "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", SimSun, serif;
  --kai: "Libre Baskerville", Georgia, "Kaiti SC", STKaiti, KaiTi, "楷体", serif;
  --editorial: "Libre Baskerville", Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  /* 正文混排：英文字母与数字优先使用 Times New Roman，中文分别回退到宋体或楷体。 */
  --body-reading: "Times New Roman", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", SimSun, serif;
  --body-kai: "Times New Roman", "Kaiti SC", STKaiti, KaiTi, "楷体", serif;
  /* Prompt / React 接近 Codex 界面的 UI 字体；系统没有 OpenAI Sans 时自动回退。 */
  --codex-ui-font: "OpenAI Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  /* 导航 Huang 字标独享的自然手写字体；不影响站内其他标题和正文。 */
  --brand-script: "Homemade Apple", cursive;

  /* 布局宽度：首页最大 1040px，文章正文最大 740px。 */
  --page-width: 1040px;
  --article-width: 740px;
}

/* 基础重置：让元素的宽高包含 padding 与 border，尺寸更容易计算。 */
* { box-sizing: border-box; }

/* 仅供屏幕阅读器读取的文字：视觉隐藏，但保留无障碍语义。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 页面根节点：设置背景、平滑滚动和锚点跳转的顶部预留。 */
html {
  background: var(--background-100);
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  /* 稳定手机和平板上的文字比例，同时保留浏览器缩放能力。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 全站正文基础样式；局部页面可以在后文覆盖这些值。 */
body {
  margin: 0;
  /*
   * 全站纸张质感背景：
   * 两层微粒和一层 8px 斜纹均匀平铺，不再制造局部白黄光晕；
   * 最后一层保留轻暖羊皮纸底色。
   */
  background: var(--paper-surface), var(--background-100);
  color: var(--gray-1000);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  /* 长篇正文交由浏览器平衡清晰度与性能，标题再单独加强字距渲染。 */
  text-rendering: auto;
}

/* 首页、归档页和全站导航使用更有出版感的衬线字体。 */
.site-header,
.site-footer,
.home .site-shell,
.listing .collection-shell {
  font-family: var(--editorial);
}

/* 用户选中文字时的高亮颜色。 */
::selection {
  background: var(--accent-200);
  color: var(--gray-1000);
}

/* 链接默认继承父元素颜色，具体样式由各组件定义。 */
a { color: inherit; }

/* 顶部导航：滚动时固定，并复用全站均匀的纸张颗粒与斜纹。 */
.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: var(--paper-surface), var(--background-100);
  backdrop-filter: none;
}

/* 全站通用水平容器：控制最大宽度与左右留白。 */
.site-header-inner,
.site-footer-inner,
.site-shell,
.article-shell,
.collection-shell {
  width: min(calc(100% - 48px), var(--page-width));
  margin-inline: auto;
}

/* 页眉只保留 Huang 字标；栏目导航已移动到首页右侧目录。 */
.site-header-inner {
  display: flex;
  min-height: 64px;
  align-items: center;
}

/* 左上角品牌入口与 Huang 文字字标。 */
.site-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-mark {
  color: var(--gray-1000);
  font-family: var(--brand-script);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

/*
 * 仅为短标题和字标启用更精细的字距渲染。
 * 这里没有重复声明字体、字号、字重、行高或字距，因此不会覆盖各组件原有视觉设置。
 */
.brand-mark,
.article-header h1,
.section-kicker,
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* 首页保持 880px 的中等宽度：比初版聚焦，又不会像分栏版本一样局促。 */
.home .site-header-inner,
.home .site-footer-inner,
.home-layout {
  width: min(calc(100% - 48px), 880px);
}

.home-layout {
  padding-bottom: 112px;
}

/* 首页首屏：删除照片后使用完整内容宽度，让自我介绍自然横向延展。 */
.hero {
  padding: 52px 0 16px;
}

.hero-copy { width: 100%; }

/* 英文栏目编号和小标签统一使用 Libre Baskerville。 */
.section-kicker {
  margin: 0;
  color: var(--accent-700);
  font-family: var(--title-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
}

/* 首页隐藏标题与文章大标题共用的基础字重和字距。 */
.hero h1,
.article-header h1 {
  margin: 16px 0 0;
  font-weight: 600;
  letter-spacing: -0.06em;
}

/* 项目、写作、Prompt 与阅读详情页的标题统一使用思源宋体体系。 */
.detail-editorial .article-header {
  border-bottom-color: var(--gray-alpha-400);
}

.detail-editorial .article-header h1 { font-family: var(--source-han-serif); }

.detail-editorial .article-header h1 {
  max-width: 820px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

/* 首页三段个人简介：统一使用首段的字号、颜色和字重。 */
.hero-intro {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  color: var(--gray-1000);
  font-family: var(--source-han-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.82;
  letter-spacing: 0.01em;
}

.hero-intro p { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }

/* 自我介绍下方的社交入口：小型单色图标、克制的文字下划线与圆点分隔。 */
.social-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  color: rgb(79, 77, 74);
  font-family: var(--title-serif);
  font-size: 13px;
  line-height: 20px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

.social-links a span {
  border-bottom: 1px solid rgb(197, 193, 187);
  transition: border-color 200ms ease;
}

.social-links a:hover { color: rgb(29, 27, 27); }
.social-links a:hover span { border-bottom-color: rgb(29, 27, 27); }
.social-links svg { flex: 0 0 auto; }
.social-separator { color: var(--gray-alpha-500); }

/* 首页栏目通用间距；scroll-margin 避免锚点被顶部导航遮挡。 */
.content-section {
  padding-top: 15px;
  scroll-margin-top: 64px;
}

.home-layout > #projects { padding-top: 15px; }

/* 栏目标题区域：编号与中文名称保持小字号，水平线从文字右侧延伸。 */
.section-heading {
  margin-bottom: 20px;
  padding-top: 32px;
}

/* 伪元素承担原本位于标题上方的分隔线，并在右侧占满剩余宽度。 */
.section-heading .section-kicker {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.section-heading .section-kicker::after {
  width: 100%;
  height: 1px;
  background: var(--gray-alpha-400);
  content: "";
}

/* 项目网格：三个项目在所有屏幕上保持同一横排，窄屏由等分列自动压缩。 */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 264px));
  gap: 20px;
  width: min(100%, 900px);
  margin-inline: auto;
  justify-content: center;
}

/*
 * 项目卡片使用与全站一致的羊皮纸材质：
 * 纯色表面承接页面底色，直接复用 --paper-surface 的均匀颗粒和斜向纹理。
 * 不使用透明模糊、局部高光或大范围渐变，保持视觉克制和代码简洁。
 */
.project-card {
  --project-card-surface: #eee8de;
  --project-card-border: rgba(71, 65, 58, 0.18);

  position: relative;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 170px;
  flex-direction: column;
  justify-content: space-between;
  padding: 25px;
  overflow: hidden;
  border: 1px solid var(--project-card-border);
  border-radius: var(--radius-md);
  background: var(--paper-surface), var(--project-card-surface);
  box-shadow:
    3px 4px 0 rgba(61, 55, 48, 0.1),
    0 12px 24px rgba(45, 41, 36, 0.08);
  color: inherit;
  transition:
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

/* 整张卡片的透明主链接：既让卡片可点击，也避免与底部两个外部链接产生嵌套。 */
.project-card-link {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
}

.project-card-link:focus-visible {
  outline: 2px solid var(--accent-700);
  outline-offset: 3px;
}

/* 键盘聚焦时强化纸张边缘，不依赖鼠标操作。 */
.project-card:focus-within {
  border-color: rgba(139, 69, 19, 0.34);
  box-shadow:
    3px 4px 0 rgba(61, 55, 48, 0.13),
    0 14px 28px rgba(45, 41, 36, 0.1);
}

/*
 * 只有具备精确指针的设备才启用轻微上移和按压反馈，
 * 避免手机触摸后残留 Hover 状态。
 */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover {
    border-color: rgba(71, 65, 58, 0.3);
    box-shadow:
      4px 5px 0 rgba(61, 55, 48, 0.14),
      0 16px 30px rgba(45, 41, 36, 0.11);
    transform: translateY(-2px);
  }

  .project-card:active {
    box-shadow:
      2px 3px 0 rgba(61, 55, 48, 0.11),
      0 8px 18px rgba(45, 41, 36, 0.08);
    transform: translateY(0) scale(0.99);
    transition-duration: 100ms;
  }
}

/* 项目名称与简介从卡片顶部自然开始；箭头独立定位，不占用内容高度。 */
.project-card-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.card-arrow,
.row-arrow {
  color: var(--gray-700);
  font-family: var(--mono);
  transition: color 150ms ease, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.project-card .card-arrow {
  position: absolute;
  z-index: 1;
  top: 18px;
  right: 18px;
}

.project-card:hover .card-arrow {
  color: var(--gray-1000);
  transform: translate(2px, -2px);
}

/* 项目标题与简介。 */
.project-card h3 {
  margin: 0;
  padding-right: 25px;
  color: var(--gray-1000);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.project-card h3 {
  color: rgb(139, 69, 19);
  font-size: 17.5px;
  line-height: 27px;
}

.project-card p {
  margin: 9px 0 0;
  color: #34312f;
  font-size: 13.5px;
  line-height: 25px;
}

/* 卡片底部外部链接：沿用首页社交入口的图标、文字下划线和颜色变化。 */
.project-card-actions {
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 0;
  gap: 9px;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  color: rgb(79, 77, 74);
  font-family: var(--title-serif);
  font-size: 12px;
  line-height: 18px;
}

.project-action {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease, opacity 200ms ease;
}

.project-action svg { flex: 0 0 auto; }

.project-action span {
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid rgb(197, 193, 187);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 200ms ease;
}

.project-action:not(.is-disabled):hover { color: rgb(29, 27, 27); }
.project-action:not(.is-disabled):hover span { border-bottom-color: rgb(29, 27, 27); }

/* 尚未填写链接时仍保留入口位置，但用较低透明度表明当前不可点击。 */
.project-action.is-disabled {
  cursor: default;
  opacity: 0.48;
}

/* 写作、Prompt 与阅读共用的分隔式列表。 */
.writing-list {
  border-top: 1px solid var(--gray-alpha-400);
}

/* 单行结构：左侧日期、右侧标题摘要和箭头。 */
.writing-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 32px;
  gap: 24px;
  align-items: start;
  padding: 24px 12px;
  border-bottom: 1px solid var(--gray-alpha-400);
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.writing-row:hover { background: var(--gray-alpha-100); }

/* 列表日期。 */
.writing-row time {
  padding-top: 3px;
  color: var(--gray-700);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: left;
}

/* 标题和摘要组成的两行文字区域。 */
.writing-copy {
  display: grid;
  gap: 8px;
}

.writing-copy strong {
  color: var(--gray-1000);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.025em;
}

.writing-copy > span {
  display: -webkit-box;
  overflow: hidden;
  max-width: 780px;
  color: var(--gray-900);
  font-size: 14px;
  line-height: 22px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 首页用留白而非重复横线区分文章；加粗标题让棕色链接更稳定、醒目。 */
.home .writing-list { border-top: 0; }
.home .writing-row {
  /* 首页同一栏目内文章之间的距离：增减这个纵向内边距即可。 */
  padding-block: 17px;
  border-bottom: 0;
}
.home .writing-row:hover { background: transparent; }
.home .writing-copy strong {
  width: auto;
  justify-self: start;
  color: rgb(139, 69, 19);
  font-family: var(--title-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  /* 常态使用浅棕色下划线，悬浮时自然过渡为标题的深棕色。 */
  text-decoration-color: rgb(190, 155, 128);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.home .writing-copy strong:hover {
  text-decoration-color: rgb(139, 69, 19);
  text-decoration-thickness: 1.5px;
}

/* 首页可选摘要来自 Markdown Front Matter 的 description；没有字段时不生成元素。 */
.home .writing-copy > span {
  /* 暖灰仍保持正文级对比度；英文字母使用 Times New Roman，中文沿用原宋体回退。 */
  color: #74685d;
  font-family: var(--body-reading);
  font-size: 13.8px;
  hyphens: auto;
  line-height: 23.5px;
  /* 窄屏禁用两端对齐，避免中英文换行时被强行拉出不自然的大间隔。 */
  text-align: left;
}

/* 悬浮时箭头向右移动，提示整行可以点击。 */
.writing-row:hover .row-arrow {
  color: var(--gray-1000);
  transform: translateX(3px);
}

/* 栏目右下角“所有文章 →”入口。 */
.section-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

/* 项目卡片带有下沿阴影，额外补偿 6px，使入口与其他栏目保持相近的视觉间距。 */
.home #projects .section-more {
  margin-top: 24px;
}

.section-more a,
.collection-back {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.section-more a span { transition: transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.1); }
.section-more a:hover span { transform: translateX(3px); }

/* 归档页采用更集中的阅读宽度；项目归档保留三列卡片需要的展示空间。 */
.collection-shell {
  padding-bottom: 96px;
}

.listing:not(.listing-projects) .collection-shell {
  width: min(calc(100% - 48px), 760px);
}

.listing-projects .collection-shell {
  width: min(calc(100% - 48px), 900px);
}

/* 归档页标题区域。 */
.collection-header {
  padding: 64px 0 26px;
}

.collection-header h1 {
  margin: 10px 0 0;
  /* 与正文共用暖深灰，避免近黑色标题在羊皮纸背景上显得生硬。 */
  color: #34312f;
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 44px);
  /* 当前字体实际提供 400 / 700；使用真实 400 字重比模拟 300 更稳定。 */
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/*
 * 文字归档只保留日期、标题和箭头：
 * 无摘要、无上下分隔线，以紧凑留白组织阅读顺序。
 */
.listing:not(.listing-projects) .writing-list {
  border-top: 0;
}

.listing:not(.listing-projects) .writing-row {
  padding: 16px 4px;
  border-bottom: 0;
}

.listing:not(.listing-projects) .writing-copy {
  gap: 0;
}

/* 归档条目标题使用正常字重和更松的字距，避免窄版面形成粗黑色块。 */
.listing:not(.listing-projects) .writing-copy strong {
  color: #34312f;
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.01em;
}

.listing:not(.listing-projects) .writing-row:hover {
  background: transparent;
}

.collection-back { margin-top: 28px; }

/* 全站页脚：无分隔线，桌面端横向排列邮箱与年份。 */
.site-footer-inner {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--gray-700);
  font-size: 12px;
  line-height: 16px;
}

.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgb(79, 77, 74);
  font-family: var(--title-serif);
  font-size: 14px;
  text-decoration: none;
  transition: color 200ms ease;
}

.footer-email span {
  border-bottom: 1px solid rgb(197, 193, 187);
  transition: border-color 200ms ease;
}

.footer-email svg { flex: 0 0 auto; }
.footer-email:hover { color: rgb(29, 27, 27); }
.footer-email:hover span { border-bottom-color: rgb(29, 27, 27); }

.footer-meta {
  font-family: var(--title-serif);
  font-variant-numeric: tabular-nums;
}

/* 文章面包屑：“首页 / 写作”等路径提示。 */
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 40px;
  color: var(--gray-700);
  font-size: 13px;
  line-height: 20px;
}

.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--gray-1000); }

/* 文章标题区域：标题、作者、发布日期和文章标签。 */
.article-header {
  max-width: 920px;
  padding: 64px 0;
  border-bottom: 1px solid var(--gray-alpha-400);
}

.article-header h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1.08;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 24px;
  align-items: center;
  margin-top: 32px;
  color: var(--gray-700);
  font-family: var(--title-serif);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

/* 作者和发布日期位于左侧，二者用细分隔符形成一组。 */
.article-byline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.article-author {
  color: var(--gray-900);
}

.article-author::after {
  margin-left: 8px;
  color: var(--gray-alpha-500);
  content: "·";
}

/* 文章标签位于右侧；使用无序列表保留正确的语义结构。 */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-tags li {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--gray-alpha-400);
  border-radius: 9999px;
  background: var(--gray-alpha-100);
}

/* 四个内容栏目均不在详情页显示摘要，因此缩短标题与元信息之间的距离。 */
.detail-editorial .article-meta { margin-top: 24px; }

/* 桌面端文章布局：左侧正文，右侧 220px 目录。 */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--article-width)) 220px;
  gap: 80px;
  justify-content: center;
  align-items: start;
}

/* 正文主列：写作文章的上一篇/下一篇卡片放在这里，与正文精确对齐。 */
.article-main { min-width: 0; }

/* 文章目录固定在视口内；目录过长时鼠标滚轮只滚动目录本身。 */
.article-toc {
  position: sticky;
  top: 96px;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  margin-top: 64px;
  padding: 0 8px 8px 16px;
  border-left: 1px solid var(--gray-alpha-400);
  font-family: var(--body-reading);
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.article-toc:focus-visible {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  outline: 1px solid var(--gray-alpha-400);
  outline-offset: 4px;
}

/* 隐藏目录滚动条，但保留鼠标滚轮、触控板和键盘滚动。 */
.article-toc::-webkit-scrollbar { display: none; }

.article-toc > p {
  margin: 0 0 12px;
  color: var(--gray-1000);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 22px;
}

.article-toc ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-toc li { min-width: 0; }
.article-toc .toc-level-3 { padding-left: 12px; }
.article-toc .toc-level-4 { padding-left: 24px; }

.article-toc a {
  display: block;
  overflow: hidden;
  color: var(--gray-700);
  font-size: 13.5px;
  line-height: 20px;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: color 160ms ease;
  white-space: nowrap;
}

.article-toc a:hover,
.article-toc a[aria-current="location"] {
  color: var(--gray-1000);
}

/* Markdown 正文基础排版：字体、字号、行距和上下留白。 */
.prose {
  min-width: 0;
  margin: 64px 0 80px;
  color: #34312f;
  font-family: var(--body-reading);
  font-size: 15px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* 正文段落、强调和删除线。 */
.prose p { margin: 0 0 1.45em; }
.prose strong { color: var(--gray-1000); font-weight: 600; }
.prose del { color: var(--gray-700); }

/* 正文内部 h1–h6 的通用样式与锚点预留。 */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  scroll-margin-top: 96px;
  color: var(--gray-1000);
  font-family: var(--source-han-serif);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.prose h1 { margin: 2.4em 0 0.9em; font-size: 36px; line-height: 44px; }
.prose h2 { margin: 2.5em 0 0.9em; font-size: 28px; line-height: 36px; }
.prose h3 { margin: 2.25em 0 0.75em; font-size: 22px; line-height: 30px; }
.prose h4 { margin: 2em 0 0.7em; font-size: 18px; line-height: 28px; }
.prose h5,
.prose h6 { margin: 1.8em 0 0.6em; font-size: 16px; line-height: 24px; }

/* 有序列表、无序列表及列表项。 */
.prose ul,
.prose ol {
  margin: 0 0 1.5em;
  padding-left: 1.5em;
}

.prose li { margin: 0.45em 0; padding-left: 0.15em; }
.prose li::marker { color: var(--gray-700); }

/* 多级列表：子层级缩进并使用不同项目符号，层级关系更容易辨认。 */
.prose li > ul,
.prose li > ol {
  margin: 0.45em 0 0.3em;
  padding-left: 1.55em;
}

.prose ul ul { list-style-type: circle; }
.prose ul ul ul { list-style-type: square; }

/* 默认 Markdown 引用：楷体、棕色左边线和淡色背景。 */
.prose blockquote {
  margin: 2em 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent-700);
  background: var(--accent-100);
  color: var(--gray-900);
  font-family: var(--body-kai);
  font-size: 17px;
  font-style: normal;
  line-height: 1.9;
}

.prose blockquote > :last-child { margin-bottom: 0; }

/* 项目、写作、Prompt 与阅读共用的正文排版；margin-top 控制正文与上方分隔线的距离。 */
.detail-editorial .prose {
  margin-top: 40px;
  margin-bottom: 50px;
  color: #34312f;
  font-size: 15.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* 四个内容栏目共用的引用样式：保留楷体和左边线，移除底色。 */
.detail-editorial .prose blockquote {
  margin: 2.5em 1.25em;
  padding: 0.2em 0 0.2em 1.35em;
  border-left: 1px solid var(--accent-700);
  background: transparent;
  color: var(--gray-900);
  font-size: 17px;
  line-height: 1.88;
}

/* 列表项中的引用属于当前序列内容，收紧外边距以保持层级连续。 */
.detail-editorial .prose li > blockquote { margin: 0.85em 0 0.65em; }

/* 行内代码：正文中的短命令、变量名和文件名。 */
.prose code {
  padding: 0.15em 0.38em;
  border: 1px solid var(--gray-alpha-200);
  border-radius: 4px;
  background: var(--gray-alpha-100);
  color: var(--gray-1000);
  font-family: var(--code-font);
  font-size: 0.84em;
}

/* 代码块外壳：轻微环境阴影只建立层次，不制造悬浮卡片感。 */
.code-block {
  overflow: hidden;
  margin: 2em 0;
  border: 1px solid var(--border-code);
  border-radius: 12px;
  background: var(--surface-code);
  box-shadow: 0 14px 34px rgba(64, 54, 42, 0.055), 0 2px 7px rgba(64, 54, 42, 0.035);
}

/* 顶部工具栏：左侧为文件名或代码类型，右侧只保留复制操作。 */
.code-toolbar {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 3px 10px 3px 14px;
  border-bottom: 1px solid var(--border-code);
  background: var(--surface-code-toolbar);
}

/* 工具栏左右两组保持稳定对齐，不包含参考页面中的三色圆点。 */
.code-toolbar .toolbar-left,
.code-toolbar .toolbar-right {
  display: flex;
  min-width: 0;
  align-items: center;
}

.code-toolbar .toolbar-right { flex: 0 0 auto; }

/* 标签与代码正文共享技术型无衬线栈；中文不会回退到正文的宋体。 */
.toolbar-label {
  overflow: hidden;
  color: #69645e;
  font-family: var(--code-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行代码正文：暖灰纸面与站点背景自然过渡，同时支持横向与纵向滚动。 */
.prose pre {
  overflow: auto;
  max-height: min(70vh, 720px);
  margin: 0;
  padding: 22px;
  border: 0;
  border-radius: 0;
  background: var(--surface-code);
  color: #403c37;
  font-family: var(--code-font);
  font-size: 14px;
  line-height: 1.7;
  tab-size: 2;
}

/* 复制按钮：完全采用文章指定的 inline-prompt-copy-btn 与 15px SVG。 */
.inline-prompt-copy-btn {
  flex: 0 0 auto;
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #69645e;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.inline-prompt-copy-btn:hover {
  border-color: var(--gray-alpha-300);
  background: var(--surface-react);
  color: var(--gray-1000);
}

.inline-prompt-copy-btn.is-copied { color: var(--accent-800); }

/* SVG 保持源码指定尺寸；复制成功后隐藏 path，只留下 rect 单方框。 */
.inline-prompt-copy-btn svg {
  display: block;
  overflow: visible;
}

.inline-prompt-copy-btn svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.inline-prompt-copy-btn.is-copied svg path {
  opacity: 0;
  transform: translate(-3px, 3px) scale(0.82);
}

/* Prompt 专用展示：直接复用代码块纸面、顶栏与边框配色，保持同一视觉体系。 */
.prompt-block {
  overflow: hidden;
  margin: 1.7em 0;
  border: 1px solid var(--border-prompt);
  border-radius: 12px;
  background: var(--surface-prompt);
  box-shadow: 0 4px 14px rgba(75, 58, 40, 0.045);
}

/* Prompt 顶栏：左侧是内容类型，右侧是仅保留图标的复制按钮。 */
.prompt-toolbar {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 12px 5px 16px;
  border-bottom: 1px solid var(--border-prompt);
  background: var(--surface-prompt-toolbar);
}

.prompt-heading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gray-1000);
  font-family: var(--codex-ui-font);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.055em;
}

.prompt-mark {
  display: inline-grid;
  place-items: center;
}

.prompt-mark svg { display: block; }

/* 模型图标只在 React 指定 GPT、Claude 或 Gemini 时显示。 */
.prompt-model-icon {
  display: block;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

/* Prompt / React 正文使用接近 Codex 的无衬线 UI 字体，并保留输入段落与换行。 */
.prompt-content {
  padding: 13px 20px 16px;
  color: #302d29;
  font-family: var(--codex-ui-font);
  font-size: 15.5px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* React 表示 AI 输出：移除生硬外框，以白色纸片和极轻投影形成层次。 */
.react-block {
  border: 0;
  background: var(--surface-react);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.react-block .prompt-toolbar {
  border-bottom-color: var(--border-react);
  background: transparent;
}

.react-block .prompt-content { color: #34312f; }

.prose pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* 长公式在窄屏中横向滚动，避免撑破正文栏。 */
.prose .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2em 0;
}

/* 构建阶段生成的语法高亮色：在暖灰纸面上增加色相区分，同时避免高饱和刺眼感。 */
.token-comment { color: #716b64; font-style: italic; }
.token-keyword,
.token-tag { color: #98482f; font-weight: 600; }
.token-string { color: #3f7156; }
.token-property { color: #6b528c; }
.token-number,
.token-constant { color: #a04f42; }

/* 正文链接及悬浮下划线颜色。 */
.prose a {
  color: var(--accent-800);
  text-decoration-color: rgb(190, 155, 128);
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms ease;
}

.prose a:hover { text-decoration-color: var(--accent-700); }

/* Markdown 水平分隔线。 */
.prose hr {
  height: 1px;
  margin: 64px 0;
  border: 0;
  background: var(--gray-alpha-400);
}

/* 正文图片保持原始比例，并使用与站点一致的小圆角。 */
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* 单张 Markdown 图片的外边距和居中方式。 */
.markdown-image { margin: 2.5em 0; }
.markdown-image img { margin-inline: auto; }

/* 图片与多图画廊共用的图注样式。 */
.markdown-image figcaption,
.image-loop figcaption {
  margin-top: 10px;
  color: var(--gray-700);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* 表格外层：小屏幕时允许横向滚动。 */
.table-scroll {
  overflow-x: auto;
  margin: 2em 0;
  border: 1px solid var(--gray-alpha-400);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

/* 表格本体与单元格边框、内边距。 */
.prose table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.prose th,
.prose td {
  padding: 12px 14px;
  border-right: 1px solid var(--gray-alpha-400);
  border-bottom: 1px solid var(--gray-alpha-400);
  vertical-align: top;
}

.prose th:last-child,
.prose td:last-child { border-right: 0; }
.prose tr:last-child td { border-bottom: 0; }

.prose th {
  background: var(--background-200);
  color: var(--gray-1000);
  font-size: 13px;
  font-weight: 600;
}

/* Hugo notice 提示框兼容层。 */
.notice-box {
  margin: 2em 0;
  padding: 0;
  border: 1px solid var(--gray-alpha-400);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

/* 提示框标题胶囊。 */
.notice-box legend {
  margin-left: 16px;
  padding: 3px 8px;
  border: 1px solid var(--gray-alpha-400);
  border-radius: 9999px;
  background: var(--background-100);
  color: var(--accent-800);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

/* 四类提示框的内容内边距和语义颜色。 */
.notice-body { padding: 18px 20px 4px; }
.notice-warning { background: color-mix(in srgb, var(--amber-100) 48%, var(--surface-raised)); }
.notice-warning legend { color: var(--amber-800); }
.notice-info { background: color-mix(in srgb, var(--blue-100) 48%, var(--surface-raised)); }
.notice-info legend { color: var(--blue-800); }
.notice-success { background: color-mix(in srgb, var(--green-100) 48%, var(--surface-raised)); }
.notice-success legend { color: var(--green-800); }
.notice-danger { background: color-mix(in srgb, var(--red-100) 48%, var(--surface-raised)); }
.notice-danger legend { color: var(--red-800); }

/* 可折叠 details / summary，用于隐藏较长代码或补充说明。 */
.prose details {
  margin: 2em 0;
  padding: 16px 18px;
  border: 1px solid var(--gray-alpha-400);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.prose summary {
  cursor: pointer;
  color: var(--gray-1000);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.prose details[open] summary { margin-bottom: 16px; }

/* 键盘按键 kbd 的立体按键外观。 */
.prose kbd {
  display: inline-block;
  min-width: 1.75em;
  padding: 1px 6px;
  border: 1px solid var(--gray-alpha-500);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--gray-1000);
  font-family: var(--code-font);
  font-size: 0.75em;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}

/* 文本高亮 mark、居中工具类与任务清单。 */
.prose mark {
  padding: 0.04em 0.2em;
  background: #e8dca7;
  color: inherit;
}

.text-center { text-align: center; }
.task-list-item { list-style: none; }
.task-list-item input { margin-right: 8px; accent-color: var(--accent-700); }

/* Markdown 脚注编号。 */
.footnote-ref {
  margin-left: 2px;
  font-family: "Times New Roman", serif;
  font-size: 0.72em;
}

.footnote-ref a { text-decoration: none; }

/* 脚注正文和返回正文的链接。 */
.footnotes {
  margin-top: 64px;
  color: var(--gray-900);
  font-family: var(--body-reading);
  font-size: 14px;
  line-height: 24px;
}

.footnotes hr { margin: 0 0 24px; }
.footnotes ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footnotes li {
  position: relative;
  padding-left: 34px;
}

.footnote-number {
  position: absolute;
  left: 0;
  color: var(--accent-800);
  font-family: "Times New Roman", serif;
}
.footnote-backref { margin-left: 4px; text-decoration: none !important; }

/* Hugo imgloop 兼容：可以横向滚动的多图画廊。 */
.image-loop {
  display: grid;
  grid-auto-columns: min(84%, 640px);
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  margin: 2em 0;
  padding: 0 0 12px;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--gray-alpha-500) transparent;
}

.image-loop figure {
  margin: 0;
  scroll-snap-align: start;
}

.image-loop img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--background-200);
}

/* 未识别的旧 Hugo 格式：用红色虚线框提醒开发者继续处理。 */
.unsupported-format {
  display: grid;
  gap: 8px;
  margin: 2em 0;
  padding: 16px;
  border: 1px dashed var(--red-800);
  border-radius: var(--radius-sm);
  color: var(--red-800);
  font-family: var(--code-font);
  font-size: 12px;
}

.unsupported-format code { overflow-wrap: anywhere; }

/* 文章上一篇 / 下一篇与返回首页入口共同占满正文主列。 */
.article-pagination,
.article-footer {
  width: 100%;
}

/* 默认上一篇 / 下一篇使用两列卡片。 */
.article-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-alpha-400);
}

/* 单个翻页卡片的布局、表面和交互动画。 */
.article-pagination-item {
  display: grid;
  min-width: 0;
  min-height: 112px;
  align-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--gray-alpha-400);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--gray-900);
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.article-pagination-item.next { text-align: right; }

.article-pagination-item > span {
  color: var(--gray-700);
  font-size: 12px;
  line-height: 18px;
}

.article-pagination-item strong {
  overflow: hidden;
  color: var(--gray-1000);
  font-family: var(--source-han-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
  text-overflow: ellipsis;
}

a.article-pagination-item:hover {
  border-color: var(--gray-alpha-500);
  background: var(--surface-hover);
  transform: translateY(-2px);
}

.article-pagination-item.is-disabled {
  opacity: 0.46;
}

/* 四个内容栏目均把翻页卡片放入正文列，并删除卡片上方的分隔线。 */
.detail-editorial .article-pagination {
  padding-top: 0;
  border-top: 0;
}

/* 文章末尾“回到首页”入口位于 article-main 内，与正文最左边缘对齐。 */
.article-footer {
  margin: 24px 0 96px;
}

.article-footer a {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.article-footer a:hover { color: var(--gray-1000); }

/* 键盘操作时显示统一焦点环。 */
:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--background-100), 0 0 0 4px var(--accent-700);
}

/* 平板适配（≤ 960px）：仍保持三张项目卡片并排，但按屏幕宽度自动缩小。 */
@media (max-width: 960px) {
  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.8vw, 16px);
    max-width: 100%;
  }

  .project-card {
    width: 100%;
    max-width: 100%;
    min-height: clamp(158px, 22vw, 170px);
    padding: clamp(12px, 2.2vw, 20px);
  }

  .article-layout {
    display: block;
    width: min(100%, var(--article-width));
    margin-inline: auto;
  }

  .article-toc { display: none; }
}

/* 手机适配（≤ 600px）：继续按屏幕宽度缩放，保持三张卡片水平排布。 */
@media (max-width: 600px) {
  /* 手机端全站左右边距由 48px 总留白缩小为 32px。 */
  .site-header-inner,
  .site-footer-inner,
  .site-shell,
  .article-shell,
  .collection-shell {
    width: min(calc(100% - 32px), var(--page-width));
  }

  .listing:not(.listing-projects) .collection-shell {
    width: min(calc(100% - 32px), 760px);
  }

  .listing-projects .collection-shell {
    width: min(calc(100% - 32px), 900px);
  }

  /* 手机端顶部导航与 Huang 字标。 */
  .site-header-inner { min-height: 56px; }
  .brand-mark { font-size: 26px; }

  /* 手机端首页简介：继续保持短行距和紧凑留白。 */
  .hero {
    padding: 40px 0 12px;
  }

  .hero-intro { gap: 10px; font-size: 14px; line-height: 1.8; }

  /* 手机端首页栏目、项目卡片和文章列表。 */
  .content-section { padding-top: 72px; }

  .section-heading {
    margin-bottom: 24px;
    padding-top: 24px;
  }

  .section-heading .section-kicker { gap: 10px; }
  .project-grid {
    gap: clamp(6px, 2vw, 10px);
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-card {
    min-height: clamp(168px, 46vw, 184px);
    padding: clamp(8px, 2.6vw, 14px);
  }

  /* 手机端隐藏装饰箭头，把有限宽度完整留给项目名称。 */
  .project-card .card-arrow { display: none; }

  .project-card h3 {
    padding-right: 0;
    font-size: clamp(12px, 3.2vw, 16px);
    line-height: clamp(17px, 4vw, 23px);
    letter-spacing: 0.015em;
  }

  /* 简介在极窄卡片中最多显示三行，避免把三个卡片共同撑得过高。 */
  .project-card p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    font-size: clamp(10px, 2.55vw, 12.5px);
    line-height: clamp(15px, 3.8vw, 19px);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  /*
   * 手机端仍保持三张卡片横排，但每张卡片内部的两个外部入口改为上下排列。
   * 这样图标和四字标签不会互相挤压，也不需要横向滚动。
   */
  .project-card-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding-top: 10px;
    font-size: clamp(8.5px, 2.2vw, 11px);
    line-height: 1.35;
  }

  .project-action {
    width: 100%;
    gap: 3px;
  }

  .project-action svg {
    width: clamp(9px, 2.5vw, 12px);
    height: clamp(9px, 2.5vw, 12px);
  }

  .writing-row {
    grid-template-columns: 82px minmax(0, 1fr) 20px;
    gap: 10px;
    padding: 20px 8px;
  }

  .home .writing-row { padding-block: 20px; }

  .writing-copy strong { font-size: 17px; line-height: 24px; }

  /* 手机端页脚改成纵向排列。 */
  .site-footer-inner {
    min-height: 88px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .breadcrumb { padding-top: 24px; }

  /* 手机端文章标题和元信息。 */
  .article-header { padding: 48px 0; }
  .article-header h1 { font-size: 36px; line-height: 41px; letter-spacing: -0.045em; }
  .article-meta { align-items: flex-start; flex-direction: column; }
  .article-tags { justify-content: flex-start; }

  /* 手机端 Markdown 正文与扩展组件。 */
  .prose {
    margin-top: 48px;
    font-size: 16px;
    line-height: 1.9;
  }

  .prose h1 { font-size: 30px; line-height: 38px; }
  .prose h2 { font-size: 26px; line-height: 34px; }
  .prose h3 { font-size: 21px; line-height: 29px; }
  .prose h4 { font-size: 18px; line-height: 27px; }
  .code-block { margin-inline: -8px; border-radius: 10px; }
  .code-toolbar { min-height: 38px; padding: 2px 8px 2px 12px; }
  .prose pre { padding: 18px 16px; font-size: 13px; }
  .prompt-toolbar { min-height: 42px; padding: 4px 10px 4px 14px; }
  .prompt-content { padding: 12px 16px 14px; font-size: 15px; }
  .prose blockquote { margin-inline: -8px; }
  .notice-box { margin-inline: -8px; }
  .image-loop { grid-auto-columns: 92%; }

  /* 手机端上下篇导航改为单列。 */
  .article-pagination { grid-template-columns: 1fr; }
  .article-pagination-item { min-height: 104px; }
  .article-footer { margin-bottom: 72px; }

  .collection-header { padding: 52px 0 24px; }

  /* 手机端四个内容栏目的统一字体、段落和楷体引用。 */
  .detail-editorial .prose {
    margin-top: 48px;
    font-size: 16px;
    line-height: 1.76;
    letter-spacing: 0.005em;
  }

  .detail-editorial .prose > p { margin-bottom: 2em; }

  .detail-editorial .prose blockquote {
    margin-inline: 0;
    padding-left: 1.1em;
    font-size: 16px;
  }

  .detail-editorial .article-pagination { gap: 12px; }
}

/* 用户开启“减少动态效果”时，关闭滚动和界面过渡。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }

  /* 项目卡片仍保留层级变化，但不再移动或缩放。 */
  .project-card,
  .project-card:hover,
  .project-card:active {
    transform: none;
  }
}

/* 高对比度偏好下强化项目卡片边界和正文。 */
@media (prefers-contrast: more) {
  .project-card {
    border-color: rgba(29, 27, 27, 0.46);
    background: var(--paper-surface), #f0e9de;
  }

  .project-card p { color: var(--gray-1000); }
}