5c88d19231
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>