/* ============================================
   【名字】的博客 · Claude 橙色设计体系
   羊皮纸底色 + 陶土橙点缀 + 思源宋体
   ============================================ */

:root {
  --paper: #fbf9f3;
  --cream: #f8f2e6;
  --ink: #1c1b18;
  --body-c: #35332c;
  --muted: #7c7767;
  --faint: #9e9887;
  --terra: #c96442;
  --terra-deep: #a8522d;
  --border: #efe7d8;
  --card: #fdfcf8;
  --card-border: #ece6d6;
  --pill-bg: #f7e8dc;
  --nav-bg: rgba(251, 249, 243, .92);
  --quote-bg: #faf6ec;
  --code-bg: #f4efe2;
  --code-border: #ece4d2;
  --pre-bg: #f6f2e7;
  --th-bg: #f7f2e6;
  --link-underline: #d9b6a0;
  --selection: #f3ddca;
  --card-hover-border: #e2d7c0;
  --card-shadow: 0 4px 24px rgba(90, 70, 40, .05);
  --card-shadow-hover: 0 10px 32px rgba(90, 70, 40, .09);
  --serif: "Noto Serif SC", "Iowan Old Style", Georgia, "Songti SC", "SimSun", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ===== 字体（子集化） ===== */
@font-face {
  font-family: "Noto Serif SC";
  src: url("fonts/serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Noto Serif SC";
  src: url("fonts/serif-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection); }

/* ===== 顶部导航 ===== */
.nav {
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav-inner {
  /* 整站统一：跟内容区同宽，站名贴内容左边界。
     1680px 屏下左边界 ≈57px，与文章页左侧栏、正文对齐。 */
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 clamp(24px, 2.8vw, 52px);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--ink);
  text-decoration: none;
}
.nav-brand::after {
  content: ".";
  color: var(--terra);
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  transition: color .15s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--terra-deep); }

/* ===== 容器 ===== */
.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== 首页 / 关于页 Hero ===== */
.page-hero { padding: 60px 0 20px; }
.page-hero h1 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.45;
}
.page-hero .accent-line {
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: var(--terra);
  margin: 20px 0;
}
.page-hero .lead {
  color: var(--body-c);
  font-size: 16px;
  line-height: 2;
  max-width: 580px;
}
.page-hero .lead strong { color: var(--terra-deep); font-weight: 600; }

/* ===== 版块标题 ===== */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 44px 0 18px;
}
.section-title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--terra);
}
.section-title h2 { font-size: 19px; font-weight: 600; letter-spacing: .5px; }
.section-title .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ===== 文章列表卡片 ===== */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 40px;
}
.post-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-hover-border);
  box-shadow: var(--card-shadow-hover);
}
.post-card h3 { font-size: 18px; font-weight: 600; line-height: 1.55; }
.post-card .date { color: var(--faint); font-size: 13px; margin-top: 6px; }
.post-card .excerpt { color: var(--body-c); font-size: 14.5px; margin-top: 10px; line-height: 1.9; }
.post-card .tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--terra-deep);
  background: var(--pill-bg);
  padding: 2px 10px 3px;
  border-radius: 999px;
}

/* ===== 文章页 · 三栏布局（左：文章列表 / 中：正文 / 右：页内目录） ===== */
.layout {
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 clamp(24px, 2.8vw, 52px);
  display: grid;
  grid-template-columns: clamp(210px, 16.5vw, 280px) minmax(0, 1fr) clamp(200px, 15vw, 250px);
  gap: clamp(56px, 5vw, 96px);
  align-items: start;
}
.article-main { padding: 48px 0 80px; min-width: 0; }

/* 侧栏公共 */
.sidebar,
.toc {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding-top: 54px;
}
.side-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--faint);
  margin-bottom: 10px;
}
.side-nav a,
.toc-nav a {
  display: block;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 0 5px 12px;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.side-nav a:hover,
.toc-nav a:hover { color: var(--terra-deep); }
.side-nav a.active,
.toc-nav a.active {
  color: var(--terra-deep);
  border-left-color: var(--terra);
  font-weight: 600;
}
.toc-nav a { font-size: 13px; padding-top: 3px; padding-bottom: 3px; }
.toc-nav a.toc-h3 { padding-left: 26px; font-size: 12.5px; color: var(--faint); }

/* 正文标题锚点补偿（sticky 导航高度） */
.article-body h2,
.article-body h3 { scroll-margin-top: 84px; }
.article-head h1 {
  font-size: 31px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .5px;
}
.article-head .meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 13.5px;
}
.article-head .meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
}
.article-body { margin-top: 34px; }
.article-body p {
  font-size: 15.5px;
  line-height: 2.05;
  margin: 18px 0;
  color: var(--body-c);
}
.article-body h2 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .5px;
  margin: 46px 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-body h2::before {
  content: "";
  flex: none;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--terra);
}
.article-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 30px 0 12px;
}
.article-body ul,
.article-body ol { margin: 16px 0; padding-left: 26px; }
.article-body li {
  margin: 8px 0;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--body-c);
}
.article-body strong { color: var(--terra-deep); font-weight: 600; }
.article-body a {
  color: var(--terra-deep);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
}
.article-body blockquote {
  margin: 24px 0;
  padding: 10px 20px;
  border-left: 3px solid var(--terra);
  background: var(--quote-bg);
  border-radius: 0 10px 10px 0;
  color: var(--muted);
}
.article-body blockquote p { margin: 6px 0; }
.article-body code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 1px 6px;
  border-radius: 6px;
}
.article-body pre {
  margin: 22px 0;
  padding: 18px 20px;
  background: var(--pre-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow-x: auto;
  line-height: 1.75;
}
.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13.5px;
}
.article-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 38px 0;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14.5px;
}
.article-body th,
.article-body td {
  border: 1px solid var(--card-border);
  padding: 9px 12px;
  text-align: left;
  line-height: 1.8;
}
.article-body th { background: var(--th-bg); font-weight: 600; }

/* ===== 文章尾部 ===== */
.article-footer {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--faint);
  font-size: 13.5px;
}
.article-footer a { color: var(--terra-deep); text-decoration: none; }
.article-footer a:hover { text-decoration: underline; }

/* ===== 页脚 ===== */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 36px 0 48px;
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--faint);
  font-size: 13.5px;
}

/* ===== 文章插图（fig-svg，全站一份）===== */
/* ===== 文章插图（本篇专用） ===== */
.fig { margin: 24px 0; }
.fig-frame {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card);
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
}
.fig-cap {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
}
.fig-svg { width: 100%; height: auto; display: block; }
.fig-svg text { font-family: var(--serif); }
.fig-svg .s-box { fill: var(--card); stroke: var(--card-border); stroke-width: 1; }
.fig-svg .s-box-hot { fill: var(--pill-bg); stroke: var(--terra); stroke-width: 1.2; }
.fig-svg .s-box-dash { fill: transparent; stroke: var(--faint); stroke-width: 1; stroke-dasharray: 4 4; }
.fig-svg .s-sm-hot { fill: var(--terra-deep); font-size: 12px; text-anchor: middle; }
.fig-svg .s-stage { fill: var(--terra-deep); font-size: 12.5px; text-anchor: middle; font-weight: 600; }
.fig-svg .s-layer { fill: var(--code-bg); stroke: var(--card-border); stroke-width: 1; }
.fig-svg .s-dot { fill: var(--terra); }
.fig-svg .s-line { stroke: var(--faint); stroke-width: 1.5; }
.fig-svg .s-dash { stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 4 4; }
.fig-svg .s-fill { fill: var(--faint); }
.fig-svg .s-hit { stroke: var(--terra); stroke-width: 1.6; }
.fig-svg .s-ink { fill: var(--ink); font-size: 14px; text-anchor: middle; font-weight: 600; }
.fig-svg .s-hot { fill: var(--terra-deep); font-size: 15px; text-anchor: middle; font-weight: 600; }
.fig-svg .s-label { fill: var(--muted); font-size: 11.5px; text-anchor: middle; letter-spacing: .04em; }
.fig-svg .s-dim { fill: var(--faint); font-size: 11px; text-anchor: middle; }
.fig-svg .s-ink-sm { fill: var(--body-c); font-size: 12px; text-anchor: middle; }
.fig-svg .q-dot { fill: var(--terra-deep); stroke: var(--card); stroke-width: 1.5; }
.fig-svg .q-g1 { stop-color: var(--terra-deep); stop-opacity: 0.85; }
.fig-svg .q-g2 { stop-color: var(--terra); stop-opacity: 0.15; }

/* ===== 跨页面导航过渡（View Transitions）=====
   切换页面时：顶栏与左侧栏保持常驻（纹丝不动），
   正文区域做柔和的淡入淡出，消除整页"硬切"的闪烁感 */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
.sidebar { view-transition-name: side-list; }

/* ===== 响应式 ===== */
@media (max-width: 1240px) {
  .layout { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
  .toc { display: none; }
}
@media (max-width: 900px) {
  .layout { display: block; padding: 0; }
  .sidebar { display: none; }
  .article-main { padding: 40px 24px 64px; }
  /* 窄屏内容内边距统一 24px，导航跟着走 */
  .nav-inner { padding: 0 24px; }
}
@media (max-width: 640px) {
  .page-hero h1 { font-size: 29px; }
  .article-head h1 { font-size: 25px; }
  .nav-inner { height: 54px; }
  .post-card { padding: 18px 18px; }
}


/* ============================================
   深色模式
   ============================================ */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1b1a18;
  --cream: #23211c;
  --ink: #ece9df;
  --body-c: #bdb9ac;
  --muted: #948f80;
  --faint: #6f6b5e;
  --terra: #d97757;
  --terra-deep: #e29a7c;
  --border: #302e28;
  --card: #222018;
  --card-border: #33302a;
  --pill-bg: #3a2b22;
  --nav-bg: rgba(27, 26, 24, .92);
  --quote-bg: #24221d;
  --code-bg: #2a2822;
  --code-border: #383530;
  --pre-bg: #232119;
  --th-bg: #24221d;
  --link-underline: #7d5f4c;
  --selection: #47362a;
  --card-hover-border: #423f36;
  --card-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  --card-shadow-hover: 0 10px 32px rgba(0, 0, 0, .5);
}

/* ===== 主题切换按钮 ===== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background-color .15s;
  font-family: inherit;
}
.theme-toggle:hover {
  color: var(--terra-deep);
  background: var(--pill-bg);
}
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }