feat(archive): 文章折叠——首页 6 篇+归档年月折叠+书架年折叠

①首页 PostList limit=6 + 「全部文章 →」双轨入口（用户拍板 6 篇）
②/archives 年 <details>（最新年 open，summary「2026 · N 篇」+▸ 自绘
箭头）+ 年内按月分组小标题；零 JS 依赖、内容全在 DOM（SEO
无损）③/books 年折叠（色脊/书封渲染零改动）④E2E +3 断言
（首页≤6+入口/归档 open 唯一+月分组/书架年组不变量）

E2E 弦键竞态根治：折叠批的多次导航扰动 g-chords 时序——洁净起
点（先回稳定页）再测弦，测试意图不依赖前序状态，37/37 连跑稳定

车道：op-gitea（lint 43 页 0/0/0）；收编复验首页 6 行+入口/归档
1 年开 12 月组/书架年折叠/en 轨全过

验证: E2E 37/37 连跑两次；content-lint 0/0/0；首页/归档/书架/
en 四页 playwright 实测

Spec: none (折叠批，车道级交付)

Co-authored-by: GLM-5.3

src/components/pages/BooksPage.astro

@@ -28,9 +28,12 @@ const L = {
 
 <BaseLayout track="reading" title={`${L.shelf} · wait4x`} description={locale === 'zh' ? '读过的书与一句策展' : 'Books read, one line each'}>
   <h1 class="page-title">{L.shelf}<span class="count mono">{L.count(books.length)}</span></h1>
-  {years.map((year) => (
-    <section class="year-group">
-      <h2 class="y-label mono">{year}</h2>
+  {years.map((year, yi) => (
+    <details class="year-group" open={yi === 0}>
+      <summary class="y-summary">
+        <span class="y-label mono">{year}</span>
+        <span class="y-count mono">· {books.filter((b) => b.data.pubDate.getFullYear() === year).length} {locale === 'zh' ? '本' : 'books'}</span>
+      </summary>
       <ul class="shelf">
         {books.filter((b) => b.data.pubDate.getFullYear() === year).map((b) => (
           <li>
@@ -62,7 +65,7 @@ const L = {
           </li>
         ))}
       </ul>
-    </section>
+    </details>
   ))}
 </BaseLayout>
 
@@ -75,8 +78,32 @@ const L = {
     gap: var(--space-3);
   }
   .count { font-size: 13px; color: var(--ink-3); }
-  .year-group { margin-top: var(--space-5); }
-  .y-label { font-size: 16px; color: var(--ink-3); margin-bottom: var(--space-3); }
+  .year-group { margin-top: var(--space-4); border-top: 1px solid var(--line); }
+  .y-summary {
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
+    padding: var(--space-2) 0;
+    cursor: pointer;
+    list-style: none;
+  }
+  .y-summary::-webkit-details-marker { display: none; }
+  .y-summary::before {
+    content: '▸';
+    font-size: 11px;
+    color: var(--ink-4);
+    transition: transform var(--dur) var(--ease);
+    transform-origin: 50% 50%;
+    display: inline-block;
+    width: 1em;
+  }
+  .year-group[open] > .y-summary::before { transform: rotate(90deg); }
+  .y-summary:hover .y-label { color: var(--ink-2); }
+  .y-count { font-size: 12px; color: var(--ink-4); }
+  @media (prefers-reduced-motion: reduce) {
+    .y-summary::before { transition: none; }
+  }
+  .y-label { font-size: 16px; color: var(--ink-3); margin-bottom: 0; transition: color var(--dur) var(--ease); }
   .shelf {
     list-style: none;
     padding: 0;