feat(structure): compact archive + tag pages + hero/featured, and fix site search

Found a real bug while verifying the nav search: /pagefind/pagefind.js is an ES
module that defines no window.Pagefind, but Search.astro loaded it with a classic
<script src> and read window.Pagefind — so every query answered "Search is
unavailable." (confirmed live before the fix). Now a dynamic import; the specifier
must be a variable or Rollup resolves it at build time and the build fails.

Measured before/after in a real browser:

- archive /posts/ + /zh/posts/: 18,220px -> 3,788px (71 rows at 44px, grouped by
  year) with a client-side filter (title/tags/description text, category chips,
  14 tag chips, zero requests). Tested: "nginx" -> 6 rows, chip devops -> 28.
- tag pages for tags with >= 3 posts. Measured 235 distinct tags (an earlier brief
  claimed 74), 156 used exactly once — pages only where a topic exists: 40 tags ->
  80 pages, build 165 -> 245 pages. Pills link only when a page exists.
- homepage + ZH homepage: hero (288px) with the real scale claim, three CTAs, a
  fixed Featured 4 (scale -> automation -> observability -> a delivered result),
  Latest 10 -> 6. ZH hero had linked "关于我" to the English /about/.
- long code blocks collapse above 420px with an Expand button + gradient, copy
  button still copies the whole block (verified on the 1010px block).
- search is visible ("⌕ Search /" pill, "/" plus the existing Ctrl/Cmd+K) and the
  zero-result screen offers topic chips instead of a dead end.

Docs: project-state B3 entry, ops-runbook Pagefind gotcha.

src/styles/global.css

@@ -139,6 +139,16 @@ body {
   justify-content: center;
 }
 .search-toggle:hover { color: var(--brand); border-color: var(--brand); }
+.search-hint { font-size: 0.85rem; margin-right: 0.35rem; }
+.search-key {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  color: var(--faint);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0 0.25rem;
+  margin-left: 0.1rem;
+}
 .lang-switch {
   color: var(--muted);
   text-decoration: none;
@@ -329,6 +339,95 @@ pre code {
 }
 .related-card time { font-size: 0.78rem; margin-top: auto; padding-top: 0.4rem; }
 
+/* ---------- Home hero ---------- */
+.hero {
+  margin: 0.5rem 0 2.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+.hero h1 { margin-bottom: 0.75rem; }
+.hero-sub { font-size: 1.05rem; color: var(--muted); max-width: 62ch; }
+.hero-cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin: 1.25rem 0 0.75rem;
+}
+.btn {
+  display: inline-block;
+  font-size: 0.9rem;
+  color: var(--ink);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.5rem 0.85rem;
+  text-decoration: none;
+}
+.btn:hover { border-color: var(--brand); color: var(--brand); }
+.btn-primary { border-color: var(--brand); color: var(--brand); }
+.hero-note { font-size: 0.82rem; color: var(--faint); margin: 0; }
+
+/* ---------- Featured ---------- */
+.featured-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin: 1rem 0 2.5rem;
+}
+.featured-card {
+  display: block;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem 1.1rem;
+  color: var(--ink);
+  text-decoration: none;
+}
+.featured-card:hover { border-color: var(--brand); }
+.featured-card h3 { margin: 0.5rem 0 0.4rem; font-size: 1.02rem; line-height: 1.35; }
+.featured-card p { margin: 0; font-size: 0.88rem; color: var(--muted); }
+.featured-badge {
+  display: inline-block;
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--brand);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 0.1em 0.6em;
+}
+
+/* ---------- Collapsible long code blocks ---------- */
+.code-block { position: relative; }
+.code-block.is-collapsed pre { max-height: 420px; overflow: hidden; }
+.code-block.is-collapsed::after {
+  content: '';
+  position: absolute;
+  left: 0; right: 0;
+  bottom: 2.4rem;
+  height: 5rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent, var(--paper));
+}
+.code-expand {
+  display: block;
+  width: 100%;
+  margin-top: 0.35rem;
+  font: inherit;
+  font-size: 0.82rem;
+  color: var(--muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.35rem;
+  cursor: pointer;
+}
+.code-expand:hover { color: var(--brand); border-color: var(--brand); }
+
+/* ---------- Archive ---------- */
+.archive-lead, .archive-meta { color: var(--muted); font-size: 0.92rem; }
+.archive-meta { margin: 0 0 1rem; }
+
 /* ---------- 404 ---------- */
 .notfound-actions {
   display: flex;
@@ -541,5 +640,7 @@ a.category-card:hover { border-color: var(--brand); }
   h1 { font-size: 1.7rem; }
   h2 { font-size: 1.25rem; }
   .related-grid { grid-template-columns: 1fr; }
+  .featured-grid { grid-template-columns: 1fr; }
+  .search-hint, .search-key { display: none; }
   .author-card { flex-direction: column; align-items: flex-start; }
 }