style(related): two-up on desktop, one-up on phones

Six photo cards in 2 columns (3 rows) at desktop widths; phones collapse to a
single full-width column and still show only the first four. Drops the 900px
two-column step (now the base) and the cramped-card type overrides that only
existed for the 2-up phone grid.

docs/design-guide.md

@@ -22,7 +22,7 @@ Read this **before** touching theme, layout, typography, color, or SEO markup. P
 - **Sticky header** — name/logo + nav (Blog / Categories / About / RSS).
 - **Article header** — title, pub date, reading time, category + tags, author card (photo, 1–2 line bio, LinkedIn + GitHub + git.hoelee.com links).
 - **Author box / ProfilePage schema** on every post (see SEO below).
-- **Related posts** (6 photo cards: 3 across on desktop, 2 across ≤900px, the first 4 only on ≤600px) — internal linking + keeps readers on-site. Each card shows the post's own language-specific share card, so an EN page never shows ZH art.
+- **Related posts** (6 photo cards: 2 across on desktop, 1 across on phones with only the first 4 shown) — internal linking + keeps readers on-site. Each card shows the post's own language-specific share card, so an EN page never shows ZH art.
 - **RSS link** in footer — how the technical audience follows me.
 - **Custom og:image per post** — 1200×630, never the reused logo.
 

docs/project-state.md

@@ -254,7 +254,7 @@ No topics were killed by the user in this sweep.
 
 ### Phase G — Related-posts photo grid (2026-10-20)
 - ✅ `Related Posts` / `相关文章` went from 4 text-only cards to **6 cards carrying each post's own share card**: `ogImage` per post means the EN page shows `/og/<slug>.jpg` and the ZH page `/og/zh-<slug>.jpg` — no cross-language art. Measured in the built HTML: 6 `<img class="related-thumb">`, all 6 files 200, ZH page resolves all 6 to `zh-` files.
-- Layout: 3 across (>900px), 2 across (≤900px), and on ≤600px the same 2 columns show only the **first 4** (`.related-extra` hidden, `i >= 4` in `[...slug].astro`). Read-time span (`.related-read`) is dropped on phones so the date fits a 160px card.
+- Layout: **2 across on desktop**, **1 across on phones** (≤600px), where only the **first 4** cards are shown (`.related-extra` hidden, `i >= 4` in `[...slug].astro`). The 3-across version was tried first and reverted same day — two-up at 1200px keeps the baked-in OG type readable.
 - Verified with headless Chrome by injecting the built `<section class="related">` + built CSS into a probe at 1264 / 884 / 500 px: `gridTemplateColumns` = 3 / 2 / 2 columns, visible cards 6 / 6 / 4, `scrollWidth == clientWidth` everywhere (no overflow), 6/6 images decoded.
 - ⚠ Headless `--window-size=390` is silently clamped to **500** on Windows — the right-hand column looks clipped in the screenshot, but that is the capture, not the layout. Verify <500px by putting the probe in a 390px `<iframe>` and screenshotting that.
 - ⚠ `--virtual-time-budget` can expire before lazy images paint (5 of 6 cards came out as empty `var(--border)` rectangles at budget 6000). Use ≥20000 before declaring an image broken.