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>
Replaces the earlier light editorial pass with a darker premium retro
aesthetic for hype404 specifically:
- Warm near-black bg (#0d0c0a) with subtle radial-gradient phosphor
tint, cream ink (#ebe2cd)
- Phosphor lime accent (#b8e25a) for brand mark, drop cap, code, tag
hover (CRT/terminal nod, restrained — not the harsh #00ff66)
- Hot magenta secondary (#f43f8c) for "Top story" flag, blockquote
rule, drop cap (Y2K Wired-magazine vibe)
- Cyan-leaning links (#7cd1ff)
- Same Fraunces serif headlines + Inter body + JetBrains Mono code
- No scanlines, no glitch, no marquee, no [LOG] tags
Listing pages now use a magazine-style hero card (top story, 1.1:1
image+text grid, 36px headline) + image-row cards for the rest.
Each row has a 220px cover thumb on the left, body on the right.
Posts without images render text-only (CSS :has() fallback). Cover
extracted via raw-markdown regex (no full render needed).
Subtle scroll-reveal animation: cards fade+lift into view via
IntersectionObserver, gracefully skips when unsupported.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
