style: 全站改造为 Editorial 编辑杂志风

- 设计令牌：暖米 #F9F8F6 纸面 × 柔和黑 #1C1C1C，透明度分层 /60 /40 /10，纯单色
- 圆角归零、阴影清零、渐变清除；删除渐变光斑背景层 Background.astro
- 字体：Playfair Display + Noto Serif SC 衬线标题（weight 400）+ Noto Sans SC 正文
- 首页巨型衬线刊名 + 日期线 + 最新发布索引卡；Section 自动编号
- 文章页改刊头式标题区；归档改衬线年号 + 目录行；卡片去渐变封面改纯排版
- 交互：hover 细线下划线、标题转斜体、油墨反转，prefers-reduced-motion 降级保留
- 文件处理逻辑 / 文章内容 / deploy 上传脚本未改动
- 附：新增 LLM 系列笔记与配图、Artalk 部署配置、评论组件入库

src/pages/posts/index.astro

@@ -9,22 +9,22 @@ const tags = getAllTags(all);
 ---
 
 <BaseLayout title="全部文章" description="Yukun's Blog 的全部文章列表">
-  <section class="container" style="padding-top: calc(var(--nav-h) + 48px);">
+  <section class="container" style="padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 96px));">
     <header class="page-head reveal">
       <h1 class="page-title">全部文章</h1>
       <p class="page-sub">共 {all.length} 篇 · 按发布时间倒序排列</p>
     </header>
 
-    <div class="tag-bar glass reveal">
-      <span class="tag-label">筛选标签</span>
+    <div class="tag-bar reveal">
+      <span class="label">筛选标签</span>
       <div class="tag-list">
-        <a href="/posts" class="tag-chip active">全部</a>
+        <TagChip tag="全部" href="/posts" active />
         {tags.map((t) => <TagChip tag={t.tag} count={t.count} />)}
       </div>
     </div>
   </section>
 
-  <section class="container section" style="padding-top: 24px;">
+  <section class="container" style="padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(64px, 8vw, 120px);">
     <div class="post-grid">
       {all.map((post) => <PostCard post={post} class="reveal" />)}
     </div>
@@ -32,11 +32,29 @@ const tags = getAllTags(all);
 </BaseLayout>
 
 <style>
-  .page-head { margin-bottom: 28px; }
-  .page-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 4vw, 3rem); letter-spacing: -0.03em; color: var(--ink); }
-  .page-sub { color: var(--ink-soft); margin-top: 8px; }
-  .tag-bar { border-radius: var(--r-lg); padding: 14px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
-  .tag-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 700; white-space: nowrap; }
+  .page-head { margin-bottom: clamp(32px, 5vw, 48px); }
+  .page-title {
+    font-family: var(--font-display);
+    font-weight: 400;
+    font-size: clamp(2.5rem, 1rem + 5vw, 4.5rem);
+    letter-spacing: -0.03em;
+    line-height: 1.05;
+    color: var(--ink);
+  }
+  .page-sub { color: var(--ink-60); margin-top: 14px; font-size: 0.9rem; letter-spacing: 0.05em; }
+  .tag-bar {
+    border-top: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+    padding: 18px 0;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+  }
   .tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
-  .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2.5vw, 24px); }
+  .post-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: clamp(20px, 2.5vw, 32px);
+  }
 </style>