Good — I can see the exact current state of all three files. The blog index already has the 4-column grid and compact header. The post pages need the 2-column split header (H1 left 60%, image right 40%). Let me apply the changes now:

Now the same split header for the tint post:

Both post pages now use a flex-col md:flex-row two-column split header: the left w-[58%] column holds back link, badge, date, and the H1 at clamp(1.35rem, 3vw, 1.875rem) (max ~30px), while the right w-[38%] column holds the featured image as a constrained aspect-video rounded-lg thumbnail — ensuring the image never pushes the first paragraph below the fold. The article body follows immediately below with py-6 md:py-10 (down from py-8/py-12), centering in a max-w-3xl single column. The blog index already had the 4-column grid and compact header, so no changes were needed there.

The current file already has the 4-column grid, h-32 thumbnails, p-3 card bodies, and compact header. The issue is the Navbar pushes the header way down because pt-20 md:pt-24 is too large. I'll strip the excessive padding and enforce all the exact constraints specified:

Three targeted changes applied: (1) the header section now uses pt-16 md:pt-20 with a py-4 md:py-6 inner container — well under 25% viewport height — with the H1 at text-2xl md:text-3xl font-bold leading-none mb-2, the purple brand banner at py-2 px-4 text-sm, and the subtitle at text-sm leading-tight max-w-2xl; (2) the grid is now exactly grid grid-cols-1 gap-4 md:grid-cols-4 md:gap-6 w-full; (3) card thumbnails are h-28 with h-32 md:h-28 object-cover on the image, card titles use text-sm font-bold leading-tight line-clamp-2, and card bodies remain p-3.