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 && (
-      {hero.cover && (
+      <div class="post-hero-img">
-        <div class="post-hero-img">
+        <img src={hero.cover} alt="" loading="eager" />
-          <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>
       </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 && (
-      {post.cover && (
+      <div class="post-row-img">
-        <div class="post-row-img">
+        <img src={post.cover} alt="" loading="lazy" />
-          <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>
       </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>
 ))}
 

src/layouts/Layout.astro

@@ -96,24 +96,7 @@ const year = new Date().getFullYear();
       min-height: 100vh;
       position: relative;
     }
-    /* Very faint scanline overlay — ambient CRT texture, doesn't affect readability */
+    /* (scanline overlay removed — it interacted poorly with text glow effects) */
-    body::before {
-      content: "";
-      position: fixed;
-      inset: 0;
-      pointer-events: none;
-      z-index: 1;
-      background:
-        repeating-linear-gradient(
-          180deg,
-          rgba(118, 231, 77, 0) 0,
-          rgba(118, 231, 77, 0) 2px,
-          rgba(118, 231, 77, 0.018) 2px,
-          rgba(118, 231, 77, 0.018) 3px
-        );
-      mix-blend-mode: screen;
-    }
-    body > * { position: relative; z-index: 2; }
 
     .container {
       max-width: 1180px;
@@ -143,16 +126,19 @@ const year = new Date().getFullYear();
       color: var(--ink);
       line-height: 1;
       font-variation-settings: 'opsz' 144;
-      display: inline-block;
+      display: inline-flex;
+      align-items: baseline;
+      gap: 4px;
     }
-    /* Keep .cursor in the SAME font/weight/size as "hype" so the baseline
+    /* Numerals get Inter — Fraunces' extra-bold display digits look mangled
-       aligns perfectly. Identity comes from color + chromatic CRT shadow. */
+       at 42px, Inter's geometric digits read cleanly as "404" */
     .ascii-brand .cursor {
+      font-family: 'Inter', sans-serif;
+      font-weight: 700;
+      font-size: 0.92em;
+      letter-spacing: -0.02em;
       color: var(--accent);
-      text-shadow:
+      text-shadow: 0 0 14px rgba(118, 231, 77, 0.4);
-        0 0 18px var(--accent-glow),
-        2px 0 0 rgba(255, 79, 166, 0.55),
-        -2px 0 0 rgba(94, 213, 255, 0.55);
     }
     .tagline {
       color: var(--ink-soft);
@@ -165,20 +151,32 @@ const year = new Date().getFullYear();
     }
     nav.nav {
       display: flex;
-      gap: 22px;
+      gap: 28px;
-      font-size: 14px;
+      font-size: 13px;
-      font-family: var(--term);
+      font-weight: 600;
-      letter-spacing: 0.06em;
+      letter-spacing: 0.14em;
       text-transform: uppercase;
     }
-    nav.nav a::before { content: "["; color: var(--magenta); margin-right: 2px; }
-    nav.nav a::after  { content: "]"; color: var(--magenta); margin-left: 2px; }
     nav.nav a {
       color: var(--ink-soft);
       text-decoration: none;
       transition: color 0.15s;
+      position: relative;
     }
     nav.nav a:hover { color: var(--accent); }
+    /* Subtle phosphor underline on hover instead of brackets */
+    nav.nav a::after {
+      content: "";
+      position: absolute;
+      left: 0; right: 0; bottom: -6px;
+      height: 1px;
+      background: var(--accent);
+      transform: scaleX(0);
+      transform-origin: left;
+      transition: transform 0.2s ease;
+      box-shadow: 0 0 8px var(--accent-glow);
+    }
+    nav.nav a:hover::after { transform: scaleX(1); }
 
     main { padding: 0 0 64px; }
 
@@ -211,6 +209,10 @@ const year = new Date().getFullYear();
 
     /* ========== Hero card (top story on home) ========== */
     .post-hero {
+      position: relative;
+      display: grid;
+      grid-template-columns: 1.1fr 1fr;
+      align-items: stretch;
       margin-bottom: 44px;
       border-radius: 14px;
       overflow: hidden;
@@ -223,18 +225,17 @@ const year = new Date().getFullYear();
       border-color: var(--line-strong);
       box-shadow: 0 18px 48px -22px rgba(244, 63, 140, 0.22);
     }
-    .post-hero-link {
-      display: grid;
-      grid-template-columns: 1.1fr 1fr;
-      text-decoration: none;
-      color: inherit;
-    }
     .post-hero-img {
+      position: relative;
       overflow: hidden;
       background: var(--bg-soft);
-      min-height: 280px;
+      min-height: 360px;
+      min-width: 0;
     }
+    .post-hero-body { min-width: 0; }
     .post-hero-img img {
+      position: absolute;
+      inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
@@ -243,20 +244,32 @@ const year = new Date().getFullYear();
     }
     .post-hero:hover .post-hero-img img { transform: scale(1.04); }
     .post-hero-body {
-      padding: 36px 36px;
+      padding: 36px 40px;
       display: flex;
       flex-direction: column;
       justify-content: center;
     }
+    /* Stretched-link pattern: title <a> overlay covers the whole card.
+       Tag links sit above via z-index so they remain independently clickable. */
+    .post-hero-title .card-link {
+      color: inherit;
+      text-decoration: none;
+    }
+    .post-hero-title .card-link::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+    }
+    .post-hero:hover .post-hero-title .card-link { color: var(--accent); }
     .post-hero-flag {
       font-family: var(--term);
       color: var(--magenta);
-      font-size: 16px;
+      font-size: 17px;
       font-weight: 400;
       text-transform: uppercase;
-      letter-spacing: 0.18em;
+      letter-spacing: 0.16em;
-      margin-bottom: 12px;
+      margin-bottom: 14px;
-      text-shadow: 0 0 10px var(--magenta-glow);
     }
     .post-hero-flag::before { content: "// "; color: var(--accent); }
     .post-hero-title {
@@ -269,7 +282,6 @@ const year = new Date().getFullYear();
       margin-bottom: 14px;
       font-variation-settings: 'opsz' 144;
     }
-    .post-hero:hover .post-hero-title { color: var(--accent); }
     .post-hero-excerpt {
       color: var(--ink-soft);
       font-size: 16px;
@@ -302,10 +314,14 @@ const year = new Date().getFullYear();
       letter-spacing: 0.02em;
     }
     .post-hero-tag::before { content: "#"; color: var(--magenta); }
-    .post-hero-tag a { color: inherit; text-decoration: none; }
+    .post-hero-tag a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
 
     /* ========== Row cards (rest of feed) ========== */
     .post-row {
+      position: relative;
+      display: grid;
+      grid-template-columns: 240px 1fr;
+      align-items: stretch;
       background: var(--bg-card);
       border: 1px solid var(--line);
       border-radius: 12px;
@@ -318,18 +334,17 @@ const year = new Date().getFullYear();
       border-color: var(--line-strong);
       box-shadow: 0 14px 36px -18px rgba(184, 226, 90, 0.18);
     }
-    .post-row-link {
+    /* Body-only row (no cover image) → full width */
-      display: grid;
+    .post-row:has(.post-row-body:only-child) {
-      grid-template-columns: 240px 1fr;
+      grid-template-columns: 1fr;
-      align-items: stretch;
-      text-decoration: none;
-      color: inherit;
     }
     .post-row-img {
       position: relative;
       overflow: hidden;
       background: var(--bg-soft);
+      min-width: 0;
     }
+    .post-row-body { min-width: 0; }
     .post-row-img img {
       position: absolute;
       inset: 0;
@@ -347,10 +362,6 @@ const year = new Date().getFullYear();
       justify-content: center;
       gap: 6px;
     }
-    /* When no cover, body spans the full row */
-    .post-row-link:has(.post-row-body:only-child) {
-      grid-template-columns: 1fr;
-    }
     .post-row-title {
       font-family: 'Fraunces', serif;
       font-weight: 600;
@@ -358,11 +369,21 @@ const year = new Date().getFullYear();
       line-height: 1.22;
       letter-spacing: -0.015em;
       color: var(--ink);
-      margin-bottom: 8px;
+      margin-bottom: 4px;
       font-variation-settings: 'opsz' 80;
+    }
+    .post-row-title .card-link {
+      color: inherit;
+      text-decoration: none;
       transition: color 0.15s;
     }
-    .post-row:hover .post-row-title { color: var(--accent); }
+    .post-row-title .card-link::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+    }
+    .post-row:hover .post-row-title .card-link { color: var(--accent); }
     .post-row-excerpt {
       color: var(--ink-soft);
       font-size: 15px;
@@ -399,7 +420,7 @@ const year = new Date().getFullYear();
       font-size: 15px;
     }
     .post-row-tag::before { content: "#"; color: var(--magenta); }
-    .post-row-tag a { color: inherit; text-decoration: none; }
+    .post-row-tag a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
 
     .post-empty {
       color: var(--ink-muted);
@@ -698,10 +719,8 @@ const year = new Date().getFullYear();
 
     /* ========== Mobile ========== */
     @media (max-width: 820px) {
-      .post-hero-link {
+      .post-hero { grid-template-columns: 1fr; }
-        grid-template-columns: 1fr;
+      .post-hero-img { min-height: 220px; max-height: 280px; }
-      }
-      .post-hero-img { min-height: 220px; max-height: 260px; }
       .post-hero-body { padding: 24px 22px; }
     }
     @media (max-width: 700px) {
@@ -709,8 +728,7 @@ const year = new Date().getFullYear();
       header.hero { padding: 24px 0 20px; margin-bottom: 32px; }
       .ascii-brand { font-size: 30px; }
       .tagline { font-size: 14px; }
-      .post-row-link { grid-template-columns: 110px 1fr; }
+      .post-row { grid-template-columns: 110px 1fr; }
-      .post-row-img img { min-height: 110px; }
       .post-row-body { padding: 16px 18px; }
       .post-row-title { font-size: 17px; }
       .post-row-excerpt { font-size: 13px; -webkit-line-clamp: 2; }