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.

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(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   margin-top: 1rem;
 }
@@ -440,8 +440,19 @@ pre code {
   color: var(--ink);
   text-decoration: none;
 }
+/* The post's own OG share card doubles as the card image, so the art matches
+   the language of the page (see the ogImage note in posts/[...slug].astro). */
+.related-thumb {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1200 / 630;
+  object-fit: cover;
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+}
 .related-card:hover { border-color: var(--brand); }
-.related-body { padding: 0.9rem 1rem; display: flex; flex-direction: column; flex: 1; }
+.related-body { padding: 0.8rem 0.9rem; display: flex; flex-direction: column; flex: 1; }
 .related-badge {
   align-self: flex-start;
   display: inline-block;
@@ -457,8 +468,8 @@ pre code {
 }
 .related-card h3 {
   margin: 0 0 0.3rem;
-  font-size: 0.95rem;
-  /* keep card heights comparable without thumbnails */
+  font-size: 0.92rem;
+  /* keep card heights comparable across a row */
   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
 }
 .related-card time { font-size: 0.78rem; margin-top: auto; padding-top: 0.4rem; }
@@ -510,6 +521,12 @@ 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;
@@ -898,7 +915,15 @@ 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 { grid-template-columns: 1fr; }
+  /* 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-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; }