/* 博客页面样式：复用 style.css 的设计令牌、网格背景与粒子层。 */

.blog-head {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--nav-h);
  background: rgb(8 8 10 / 64%);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.blog-head__inner {
  max-width: var(--container); height: 100%; margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.blog-head a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target);
  font-size: var(--size-small); color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease);
}
.blog-head a:hover { color: var(--text); }
.blog-head__brand { font-family: var(--font-mono); font-style: normal; font-size: 1.0625rem; }

.blog-main {
  position: relative;
  max-width: var(--container); margin-inline: auto;
  padding: calc(var(--nav-h) + var(--space-12)) var(--gutter) var(--space-16);
}

/* ---------- 列表页 ---------- */
.blog-intro { max-width: 44em; }
.blog-intro__kicker {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-6);
}
.blog-intro__kicker span { color: var(--accent); padding-inline: var(--space-2); }
.blog-intro__title { font-size: var(--size-h2); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.blog-intro__desc { margin-top: var(--space-8); color: var(--text-secondary); }
.blog-intro__count { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-secondary); }

.blog-list { margin-top: var(--space-12); }
.post-list { display: grid; gap: var(--space-4); }
.post-item a {
  display: grid; gap: var(--space-2);
  padding: var(--space-6); border: 1px solid var(--line); border-radius: 14px;
  background: rgb(245 242 236 / 2%);
  transition: border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.post-item a:hover { border-color: var(--a2); background: rgb(245 242 236 / 5%); transform: translateY(-3px); }
.post-item__title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; }
.post-item__meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }
.post-item__summary { color: var(--text-secondary); }
.post-empty { padding: var(--space-6); border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--text-secondary); }

/* ---------- 文章页 ---------- */
.post { max-width: 44em; }
.post__kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--accent);
}
.post__title { margin-top: var(--space-5); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; line-height: 1.22; letter-spacing: -0.025em; }
.post__date { margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-secondary); }

/* Markdown 正文：恢复列表标记，并给标题重新定级。 */
.post__body { margin-top: var(--space-12); }
.post__body > * + * { margin-top: var(--space-6); }
.post__body h2 { margin-top: var(--space-12); font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; }
.post__body h3 { margin-top: var(--space-8); font-size: 1.25rem; }
.post__body ul, .post__body ol { padding-left: 1.4em; list-style: revert; }
.post__body li + li { margin-top: var(--space-2); }
.post__body a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease);
}
.post__body a:hover { text-decoration-color: currentColor; }
.post__body code {
  padding: 0.15em 0.4em; border-radius: 5px;
  background: rgb(245 242 236 / 8%); font-family: var(--font-mono); font-size: 0.9em;
}
.post__body pre { padding: var(--space-5); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; background: rgb(245 242 236 / 3%); }
.post__body pre code { padding: 0; background: none; }
.post__body blockquote { padding-left: var(--space-5); border-left: 2px solid var(--a2); color: var(--text-secondary); }
.post__body hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-12); }
.post__body img { border-radius: 12px; }
.post__body em { color: var(--text-secondary); }
.post__body strong { color: var(--text); }

.post-nav { margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.post-nav a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target); font-size: var(--size-small); color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease);
}
.post-nav a:hover { color: var(--accent); }

/* ---------- 页脚 ---------- */
.blog-foot { padding-block: var(--space-12) var(--space-8); }
.blog-foot__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-5); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-secondary);
}
.blog-foot__inner a { transition: color var(--duration-fast) var(--ease); }
.blog-foot__inner a:hover { color: var(--accent); }

@media (min-width: 768px) {
  .blog-main { padding-top: calc(var(--nav-h) + var(--space-16)); }
}