## Why

The current UX for the homepage hero and summary modal still has high-friction behavior and readability issues, and image relevance is still inconsistent for AI news topics. Fixing these now improves retention, trust, and content quality without changing the core product flow.

## What Changes

- Change hero primary CTA behavior to open the in-site TL;DR summary flow instead of immediately sending users off-site.
- Improve hero readability over images so `LATEST` and relative time metadata remain visible across themes and screen sizes.
- Increase modal width and adjust modal height behavior so long content can use near full-height viewport scrolling.
- Add a short horizontal shimmer placeholder for TL;DR bullet content while summary details are loading.
- Strengthen image relevance by extracting better keywords from news text, adding AI-topic default keywords, and using a generic AI fallback image when providers fail.

## Capabilities

### New Capabilities
- `hero-summary-entry-and-readability`: Define hero CTA in-site summary entry behavior and image-overlay readability requirements for badges, timestamps, headline, and summary text.
- `modal-layout-and-loading-feedback`: Define modal sizing/overflow behavior and TL;DR loading placeholders for clearer perceived loading state.
- `news-image-relevance-and-fallbacks`: Define keyword extraction quality, default AI keyword fallback rules, and generic AI image fallback behavior when no relevant image is found.

### Modified Capabilities
- None.

## Impact

- **Frontend/UI:** `frontend/index.html` (hero CTA wiring, hero overlay/readability styles, modal width/height classes, TL;DR loading skeleton state).
- **Backend/Image Pipeline:** `backend/news_service.py` (keyword extraction and provider fallback behavior for summary images).
- **Assets/Config:** generic AI fallback image path/asset contract and related docs may be updated.