fix invalid <a> nesting + grid min-width: 0 layout collapse

The card markup wrapped the entire .post-hero / .post-row in an outer
<a> while ALSO containing inner <a> tags for tag links. HTML5 forbids
nested <a>, so the browser auto-closed the outer link when it hit each
tag link, restructuring the DOM and breaking the grid layout — body
content rendered outside its column, overlapping the image.

Fix:
- Drop the card-wide <a>; image cell is plain div, body cell is plain
  div, only title <a class="card-link"> and tag <a> remain
- Apply "stretched link" pattern: title link's ::after uses position:
  absolute inset: 0 to overlay the entire card (clickable everywhere)
- Tag links get position: relative + z-index: 2 so they remain
  independently clickable above the title overlay
- Grid container moved from removed .post-hero-link to .post-hero
  itself (and .post-row-link → .post-row)
- Add min-width: 0 to grid items so the image's intrinsic width can't
  blow out the 1.1fr track and crowd the body cell
- Replace post-hero-img aspect-ratio with min-height: 360px (more
  predictable in grid contexts)
- Switch numerals in the brand wordmark from Fraunces to Inter — the
  extra-bold display digits at 42px were rendering with mangled
  glyphs that read as broken text instead of "404"
- Drop scanline overlay (mix-blend-mode: screen interacted poorly
  with text glows)
- Soften phosphor glow on .cursor (12px @ 35% opacity instead of
  22px @ 55%)
- Replace nav.nav [bracket] mono links with clean uppercase Inter
  sans + phosphor underline-on-hover
- Rebalance hero ratio at desktop, fix mobile media query selectors
  (.post-hero-link / .post-row-link no longer exist)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/PostList.astro

@@ -26,46 +26,46 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
 
 {enriched.length > 0 && !tag && hero && (
   <article class="post-hero" data-reveal>
-    <a class="post-hero-link" href={`/${hero.slug}/`}>
-      {hero.cover && (
-        <div class="post-hero-img">
-          <img src={hero.cover} alt="" loading="eager" />
-        </div>
-      )}
-      <div class="post-hero-body">
-        <div class="post-hero-flag">Top story</div>
-        <h2 class="post-hero-title">{hero.title}</h2>
-        <p class="post-hero-excerpt">{hero.rawExcerpt}</p>
-        <div class="post-hero-meta">
-          <span>{fmt(hero.date)}</span>
-          {hero.tags.slice(0, 4).map((t) => (
-            <span class="post-hero-tag"><a href={`/tag/${t}/`}>{t}</a></span>
-          ))}
-        </div>
+    {hero.cover && (
+      <div class="post-hero-img">
+        <img src={hero.cover} alt="" loading="eager" />
       </div>
-    </a>
+    )}
+    <div class="post-hero-body">
+      <div class="post-hero-flag">Top story</div>
+      <h2 class="post-hero-title">
+        <a class="card-link" href={`/${hero.slug}/`}>{hero.title}</a>
+      </h2>
+      <p class="post-hero-excerpt">{hero.rawExcerpt}</p>
+      <div class="post-hero-meta">
+        <span>{fmt(hero.date)}</span>
+        {hero.tags.slice(0, 4).map((t) => (
+          <span class="post-hero-tag"><a href={`/tag/${t}/`}>{t}</a></span>
+        ))}
+      </div>
+    </div>
   </article>
 )}
 
 {(tag ? enriched : rest).map((post, i) => (
   <article class="post-row" data-reveal style={`animation-delay:${Math.min(i * 50, 500)}ms`}>
-    <a class="post-row-link" href={`/${post.slug}/`}>
-      {post.cover && (
-        <div class="post-row-img">
-          <img src={post.cover} alt="" loading="lazy" />
-        </div>
-      )}
-      <div class="post-row-body">
-        <h3 class="post-row-title">{post.title}</h3>
-        <p class="post-row-excerpt">{post.rawExcerpt}</p>
-        <div class="post-row-meta">
-          <time>{fmt(post.date)}</time>
-          {post.tags.slice(0, 3).map((t) => (
-            <span class="post-row-tag"><a href={`/tag/${t}/`}>{t}</a></span>
-          ))}
-        </div>
+    {post.cover && (
+      <div class="post-row-img">
+        <img src={post.cover} alt="" loading="lazy" />
       </div>
-    </a>
+    )}
+    <div class="post-row-body">
+      <h3 class="post-row-title">
+        <a class="card-link" href={`/${post.slug}/`}>{post.title}</a>
+      </h3>
+      <p class="post-row-excerpt">{post.rawExcerpt}</p>
+      <div class="post-row-meta">
+        <time>{fmt(post.date)}</time>
+        {post.tags.slice(0, 3).map((t) => (
+          <span class="post-row-tag"><a href={`/tag/${t}/`}>{t}</a></span>
+        ))}
+      </div>
+    </div>
   </article>
 ))}