Act as an editorial designer and front-end engineer. Redesign the blog index for {{business_name}} in my {{tech_stack}} project, styled in {{visual_style}}. Keep the content source, routes and post template; change only the listing. Card contents: category, title as a heading with the link, a 2-line excerpt that adds something the title doesn't, date in a time element, reading time, and author only if there's more than one. Each card is an article; the title link is stretched to cover the card so there's one tab stop. Layout: - 1280: the newest post featured, image 7 columns and text 5; then a 3-column grid, gap 32px - 768: featured stacked; 2 columns, gap 24px - 360: 1 column, gap 24px; images 16:9 Max width 1200px; section padding 48 / 64 / 96px. Type: featured title 32 to 40px; card titles 20px weight 600, line height 1.3, clamped to 3 lines with the full title still in the link; excerpt 15 to 16px at 4.5:1; meta 13 to 14px. Navigation: - categories as real links with their own URLs and aria-current, not JavaScript-only chips, so search engines can crawl them - numbered pagination with real page URLs and rel next and prev; if you add Load more, move focus to the first new card Images: width and height set, lazy below the fold, srcset and sizes; the featured one loads eagerly. States: a missing image becomes a typographic card (category tint, title larger) of the same height, never a stock placeholder; an empty category says so and links back to all posts; 1 post shows only the featured layout; hover underlines the title, focus-visible rings the card. Motion: image scale 1.02 on hover over 250ms; none under prefers-reduced-motion. Avoid: every image a look-alike AI illustration, missing dates, excerpts that repeat the title, infinite scroll that hides the footer.