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.

src/styles/global.css

@@ -426,7 +426,7 @@ pre code {
 .related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
 .related-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   margin-top: 1rem;
 }
@@ -521,12 +521,6 @@ pre code {
   margin: 1rem 0 2.5rem;
 }
 
-@media (max-width: 900px) {
-  /* Three photo cards per row stops working below ~900px — the OG art is
-     1200x630 with baked-in type, so it needs width to stay readable. */
-  .related-grid { grid-template-columns: repeat(2, 1fr); }
-}
-
 @media (max-width: 680px) {
   .featured-bento-grid {
     grid-template-columns: 1fr;
@@ -915,15 +909,9 @@ a.category-card:hover { border-color: var(--brand); }
   .nav { padding: 0.8rem 1.25rem; gap: 0.85rem; }
   h1 { font-size: 1.7rem; }
   h2 { font-size: 1.25rem; }
-  /* Related grid: four photo cards on phones (the last two are hidden), and
-     keep the type small enough that a 160px-wide card still reads. */
-  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
+  /* Related grid: one full-width card per row on phones, first four only. */
+  .related-grid { grid-template-columns: 1fr; gap: 0.85rem; }
   .related-extra { display: none; }
-  .related-card h3 { font-size: 0.82rem; }
-  .related-card time { font-size: 0.7rem; }
-  .related-read { display: none; }   /* date alone fits a 160px card */
-  .related-body { padding: 0.6rem 0.65rem; }
-  .related-badge { font-size: 0.6rem; margin-bottom: 0.35rem; }
   .featured-bento-grid { grid-template-columns: 1fr; }
   .proof-grid { grid-template-columns: repeat(2, 1fr); }
   .stack-grid, .contact-split { grid-template-columns: 1fr; }