feat(related): photo cards — 6 on desktop, 4 on phones, each post's own share card

Related posts were 4 text-only cards. They now carry the post's language-specific
ogImage (/og/<slug>.jpg for EN, /og/zh-<slug>.jpg for ZH), so an English page never
shows Chinese art. Grid is 3 across above 900px, 2 across below, and phones show the
first 4 only; read-time is dropped under 600px so the date fits.

Verified in the built HTML + headless Chrome at 1264/884/500px: 3/2/2 columns,
6/6/4 visible cards, no horizontal overflow, all six images decoded.

docs/seo-reference.md

@@ -42,7 +42,7 @@ The entire blog strategy is a **name-search play**, so identity must be airtight
 - [ ] `sitemap.xml` + `robots.txt` + RSS — auto-generated by Astro
 - [ ] Core Web Vitals 90+ (verify Lighthouse on 390px **and** 1280px)
 - [ ] Question-shaped H2/H3 (the phrasing a learner actually searches)
-- [ ] Related-posts module (3 cards) on every post
+- [ ] Related-posts module (6 cards) on every post
 - [ ] No orphaned/thin pages (avoid the hoelee.com ~400-attachment mistake)
 
 ### Crawler / sitemap mechanics (as built)