:root {
  --bg: #f5f6f9;
  --surface: #fff;
  --fg: #172235;
  --muted: #5b6a80;
  --line: #dce3ed;
  --link: #2857ff;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 3px; }
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.header-inner { max-width: 1120px; min-height: 72px; margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-brand { color: var(--fg); font-size: 21px; font-weight: 600; letter-spacing: -.4px; text-decoration: none; }
.site-header nav { display: flex; align-items: center; gap: 24px; }
.site-header nav a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); font-size: 14px; text-decoration: none; }
.site-header nav a:hover { color: var(--link); }
.page-shell { max-width: 1120px; margin: 0 auto; padding: 64px 32px 48px; }
.article-head, .prose, .references, .page-footer { max-width: 740px; margin-inline: auto; }
.eyebrow { margin: 0 0 18px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
h1 { margin: 0; font-size: 46px; font-weight: 650; line-height: 1.2; letter-spacing: -1.3px; }
.subtitle { margin: 22px 0 0; color: var(--muted); font-size: 20px; line-height: 1.75; }
.date { margin: 22px 0 0; color: var(--muted); font-size: 13px; }
/* 配图与正文保持相同宽度，并沿用居中的左右边距。 */
figure { max-width: 740px; margin: 40px auto 42px; }
figure img { display: block; width: 100%; height: auto; border-radius: 10px; background: #0b1728; }
figcaption { margin-top: 12px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.7; }
.prose p { margin: 0 0 22px; font-size: 18px; line-height: 1.9; overflow-wrap: break-word; }
.prose .lead { font-weight: 550; }
.prose h2 { margin: 46px 0 22px; font-size: 27px; line-height: 1.4; letter-spacing: -.4px; }
sup { margin-left: 3px; font-size: 11px; }
.closing { margin-top: 34px; padding: 4px 0 4px 24px; border-left: 3px solid var(--link); }
.closing p { margin: 0; font-size: 20px; font-weight: 550; }
.references { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.references h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.references p { margin: 0 0 9px; }
.references p:target { scroll-margin-top: 24px; }
.page-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.page-footer a { color: var(--muted); }
.blog-head { max-width: 740px; margin-bottom: 36px; }
.post-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.post-image { display: block; height: 100%; }
.post-image img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.post-copy { min-width: 0; padding: 32px; }
.post-copy h2 { margin: 14px 0; font-size: 28px; line-height: 1.35; letter-spacing: -.4px; }
.post-copy h2 a { color: var(--fg); text-decoration: none; }
.post-copy h2 a:hover { color: var(--link); }
.post-copy p { margin: 0 0 20px; color: var(--muted); font-size: 16px; }
.post-copy .date { margin: 0; font-size: 13px; }
.post-languages { display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 14px; }

/* 正文限制阅读宽度，横版配图使用外层宽度；窄屏同步缩小边距和字号。 */
@media (max-width: 640px) {
  .header-inner { min-height: 64px; padding: 10px 20px; }
  .site-header nav { gap: 18px; }
  .page-shell { padding: 36px 20px 36px; }
  h1 { font-size: 34px; letter-spacing: -.7px; }
  .subtitle { margin-top: 18px; font-size: 17px; }
  .eyebrow { margin-bottom: 16px; }
  figure { margin: 30px auto 32px; }
  figure img { border-radius: 8px; }
  figcaption { font-size: 12px; text-align: left; }
  .prose p { margin-bottom: 20px; font-size: 17px; }
  .prose h2 { margin-top: 36px; font-size: 24px; }
  .closing { padding-left: 18px; }
  .closing p { font-size: 18px; }
  /* 博客卡片在窄屏改为上下排列，避免图片和标题相互挤压。 */
  .post-card { grid-template-columns: 1fr; }
  .post-image img { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .post-copy { padding: 24px; }
  .post-copy h2 { font-size: 24px; }
}