feat(design): bento featured grid, theme-aware cards, mono tag chips

- Homepage (EN + ZH) featured section becomes a 2x2 Cyber-Bento grid: OG
  thumbnail at 65%/140px behind a scrim, category badge + metric pill,
  3-line-clamped description, arrow CTA; 1 column under 680px.
- Bento scrim/pill/dot now use theme tokens (--card-veil, --pill-bg,
  --bento-visual-opacity). The original hardcoded dark blend measured
  1.96:1 pill contrast on the light theme; now 6.56 dark / 6.10 light.
- Add the missing @keyframes bento-pulse (the doc claimed a pulsing dot,
  none existed), disabled under prefers-reduced-motion.
- Tag chips: mono face, hairline border, 4px radius; dashed border for
  non-link tags.
- ZH pages: brand links /zh/, in-post category tag links
  /zh/categories/<cat>/ instead of the EN route.
- project-state: B6 shipped note with measured readings; correct the
  prompts-catalog path claim (file is outside the repo).

Measured in headless Chrome at 1280px and 390px, EN + ZH: 4 cards,
2 cols / 1 col, scrollWidth-clientWidth 0, no card overflow, all four
-800.webp thumbs loaded at 800x420.

docs/project-state.md

@@ -28,6 +28,25 @@ Living list of what's done and what's next for blog.hoelee.com. Work through the
 - ✅ Knowledge guides in `docs/` + README index + `hoelee-blog` skill
 - ✅ Both repos public (Gitea + GitHub) with title/description/homepage/topics + `v1.0.0` release
 - ✅ **Live re-audit of the Sept research recorded (§2 Phase E + §4), 2026-09-29** — 53 posts × 2 languages, 127 sitemap URLs, 133/133 internal links 200
+- ✅ **B5 Baseline & Hygiene Batch, 2026-10-18 (commit `3f63150` live on production)**:
+  - Default OG card upgraded: external delivery design with real author headshot integrated, optimised via mozjpeg q85 to **45 KB JPG** (`public/og-default.jpg`, down from 211 KB PNG), with PNG retained for backwards compatibility.
+  - 全站 72 篇 banner 404 卫生彻底清零：为 `scraping-bot-walled-marketplace-warm-browser-session` 补齐 terminal banner WebP 与 PNG 资产。
+  - E9 modern system typography stack deployed: `--font-sans` and `--font-mono` upgraded to native multi-platform stack with PingFang SC / Microsoft YaHei CJK fallbacks.
+  - A2 branding alignment: `<title>`, meta description, JSON-LD, and homepage hero unified to `Mr Hoelee — Full-Stack Developer & DevOps Engineer`.
+  - All 251 pages cleanly verified, Gitea and GitHub remotes strictly 0/0 aligned.
+- ✅ **B6 Visual Redesign with External Consultant & Ideogram 4 Pipeline, 2026-10-18 (Round 4 completed)**:
+  - Outside design consultant review finalised: 70% Dark Cyber-Bento + 30% Blueprint schematic; 100% committed to **Hybrid Paradigm ("One Art, Four Targets")** — pure visual art for hero banners & list thumbnails (eliminating title duplication & bilingual collisions), programmatically composited typography for social share cards.
+  - **Frosted Bento Container Card (`template-v2.2.html`)** deployed to solve layout emptiness:
+    - 736×536 frosted acrylic card (`backdrop-filter: blur(16px)`, gradient top highlight);
+    - 2-line article description added to eliminate vertical voids;
+    - 100% full-width terminal evidence bar (`$ ...`);
+    - CSS-drawn 36px blueprint grid + top-left radial ambient glow restores industrial depth;
+    - 3D base art scaled to 116% and shifted inward to bridge the central divide.
+  - **Self-fitting headline engine implemented**: dynamically measures DOM lines in headless Chrome, stepping down font size (50px → 26px) until headline fits `<= 3 lines` with no orphan/widow lines; CJK titles intelligently split at punctuation; numbers glued with NBSP.
+  - Front-end homepage enhanced: `Featured` section upgraded to 2×2 Cyber-Bento Grid (with metric pills and pulsing green status dots); bilingual navigation brand link fixed to `/zh/`; in-post category tags fixed to `/zh/categories/`.
+  - **Shipped to production 2026-10-18 (front-end UI commit)**, after a measured pass on both themes: the bento scrim and metric pill were hardcoded to a *dark* blend, which on the light theme produced a muddy grey band and **1.96:1** pill text contrast; both are now theme tokens (`--card-veil`, `--pill-bg`, `--bento-visual-opacity`), and the "pulsing" dot finally has an actual `@keyframes bento-pulse` (it had none, and it is disabled under `prefers-reduced-motion`). Measured in headless Chrome, 1280px and 390px, EN + ZH: 4 cards, `2 cols / 1 col`, `documentElement.scrollWidth − clientWidth = 0`, no card overflow, all four `-800.webp` thumbs `naturalWidth 800` — contrast dark pill 6.56 / badge 4.83 / h3 11.86 / desc 5.78, light pill 6.10 / badge 4.85 / h3 16.36 / desc 6.74 (WCAG AA ≥ 4.5). Tag chips restyled to mono + hairline border (4px radius) site-wide; ZH post pages link `/zh/categories/<cat>/`, ZH brand links `/zh/`.
+  - Full catalog of 72 posts' unique physical metaphors and prompts extracted to `scripts/og-gen/prompts_catalog.json` (working-tree tooling, not committed) and `Desktop\blog-og-image-redesign-brief\03-72-Posts-Visual-Prompts-Catalog.md` (outside the repo).
+  - Round 4 delivery bundle packaged at `C:\Users\hoelee\Desktop\blog-og-image-redesign-brief\delivery-for-consultant-round4.zip`.
 - ✅ **B4 identity & distribution batch, 2026-10-16 (fourth batch)** — the photo and the About rewrite:
   - **Real author photo** (source `Professional Portrait with Blue Gradient Background.png`, 1254×1254, kept untouched in `Pictures/` with a converted JPG master beside it). Two derivatives, WebP first with a JPEG fallback: `lee-teong-hoe-640` (42 KB JPG / 26 KB WebP) and `-128` (3 KB / 2 KB). Appears in the About hero, the author card on every post, the home hero (both languages) and **JSON-LD `Person.image`** — the node search engines use to bind name to face.
   - **About page 1,024 → 7,357 characters**, in five sections: identity + photo, "By the numbers" (162 containers / 3 hosts / 71 essays / 0 hosting companies between me and the servers), the real tech stack in four columns, the Hoelee Enterprise block (website design and development is the main business, email hosting secondary) and a contact split between hiring and business (WhatsApp for enquiries). Chinese twin rewritten to match.
@@ -870,6 +889,13 @@ not needed), cross-checked against the local repo at `D:/dev/hoelee-blog`.
 ---
 
 ## 4b. Live re-check — 2026-10-17 (after batches B1–B4)
+...
+- **B6 Visual Redesign Milestone reached (2026-10-18)**:
+  - Ideogram 4 pipeline running locally (`1360x768`, ar 16:9).
+  - Outside consultant reviewed Round 1..4. Frosted Bento layout + blueprint grid + headline auto-fitting (`FIT <n>px`) verified on real Chrome Headless.
+  - Delivery package Round 4 zipped (`delivery-for-consultant-round4.zip`, 2.4 MB).
+  - Ready for 72-post batch run once consultant finalises the 3 minor typography questions.
+
 
 Method: `curl` from the Windows host, the unRaid nginx access log **read over the Portainer API** (no SSH to that host),
 and a DOM probe for the regenerated card. Spot values: `/zh/posts/` 200 · `/tags/docker/` 200 · `/llms.txt` 200