/* 技术随笔 - 纯静态、低调、可读优先。系统字体，无外链字体/CDN/JS。
   设计取向：calm editorial，dials VARIANCE 4 / MOTION 2 / DENSITY 3。
   主题：light + dark（跟随 prefers-color-scheme），一个锁定的克制强调色。 */

:root {
  color-scheme: light dark;

  /* 间距刻度 */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-6: 2.5rem;
  --space-8: 4rem;

  --measure: 42rem;     /* 正文阅读宽度（中英文混排舒适） */

  /* 浅色主题（暖中性，避免纯白纯黑） */
  --bg: #fcfcfa;
  --fg: #232220;
  --muted: #6c6a64;
  --rule: #e8e6e0;
  --accent: #3f6079;       /* 锁定强调色：克制的钢蓝，低饱和 */
  --accent-ink: #2f4a5e;   /* 链接 hover 时略深 */
  --selection: #d9e4ec;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --fg: #e7e4de;
    --muted: #9a978f;
    --rule: #2a2d31;
    --accent: #8fb2cf;
    --accent-ink: #aac6dd;
    --selection: #2b3a47;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;        /* 17px */
  line-height: 1.8;            /* 中文阅读更松一档 */
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-ink); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 头部：紧凑、一条细分隔线 */
.site-header {
  padding-block: var(--space-8) var(--space-4);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: inline-block;
  color: var(--fg);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.brand:hover { color: var(--fg); text-decoration: none; }
.brand-sub {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* 正文区块 */
main { padding-block: var(--space-6) var(--space-8); }

.prose + .prose { margin-top: var(--space-6); }

h1 {
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 650;
  margin: 0 0 var(--space-3);
}
h2 {
  font-size: 1.1875rem;
  line-height: 1.4;
  font-weight: 650;
  margin: 0 0 var(--space-2);
}

.prose p { margin: 0 0 var(--space-3); }
.prose p:last-child { margin-bottom: 0; }

.topics {
  margin: 0 0 var(--space-3);
  padding-left: 1.2em;
}
.topics li { margin-block: 0.25rem; }
.topics li::marker { color: var(--muted); }

.note { color: var(--muted); font-size: 0.9375rem; }

/* 页脚 */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-4) var(--space-6);
  color: var(--muted);
  font-size: 0.875rem;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* 窄屏 */
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .site-header { padding-block: var(--space-6) var(--space-3); }
  .brand { font-size: 1.375rem; }
}

/* 尊重减少动效偏好（本页本就近乎静态，这里兜底） */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ */
/* 以下为多页结构追加的样式：导航、文章列表、正文细节、代码块。       */
/* 沿用既有 --space / --accent / 明暗 token，低调克制。               */
/* ------------------------------------------------------------------ */

/* 代码块底色 token */
:root {
  --code-bg: #f3f2ee;
  --code-fg: #2f2e2b;
  --code-inline-bg: #efeee9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --code-bg: #1c1f23;
    --code-fg: #d7d4ce;
    --code-inline-bg: #23262b;
  }
}

/* 头部导航：极简单行 */
.site-nav {
  margin-top: var(--space-3);
  font-size: 0.9375rem;
}
.site-nav a {
  color: var(--muted);
  margin-right: var(--space-3);
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] {
  color: var(--fg);
  font-weight: 650;
}

/* 最近文章列表 */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-list li { margin-bottom: var(--space-4); }
.post-list li:last-child { margin-bottom: 0; }
.post-list .post-title {
  font-size: 1.0625rem;
  font-weight: 650;
}
.post-list .post-summary {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* 文章正文：在 .prose 基础上补充长文需要的元素间距 */
.prose h2 { margin-top: var(--space-6); }
.prose h1 + h2,
.prose h1 + p { margin-top: 0; }
.prose ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.prose ul li { margin-block: 0.25rem; }
.prose ul li::marker { color: var(--muted); }

/* 行内代码 */
.prose code {
  background: var(--code-inline-bg);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.875em;
}

/* 代码块 */
.prose pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
  overflow-x: auto;
  line-height: 1.6;
}
.prose pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.875rem;
  color: inherit;
}

/* 返回链接 */
.back-link {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}