Reading-Flow Accessible Grid

Fixes a real, common accessibility bug — a visually-rearranged CSS Grid (a 'featured' card placed big and first, with the rest auto-flowing around it via grid-column/grid-row) whose keyboard Tab order still silently follows plain DOM order, so a keyboard or screen-reader user tabs through two unrelated links *before* ever reaching the card that's visually first on the page. This has always been the quiet cost of using grid/flex to reorder content: DOM order (good for source/SEO) and visual order (good for layout) diverge, and until now nothing closed that gap except a JS-driven aria-owns rewrite or just not visually reordering at all. The new CSS `reading-flow` property closes it declaratively: `reading-flow: grid-rows` on the grid container makes Tab/Shift+Tab (and screen-reader linear navigation) follow the real visual row-by-row order instead of source order — here that changes the tab sequence from Overview→Pricing→Featured→FAQ→Contact (DOM order) to the correct Featured→Overview→Pricing→FAQ→Contact (visual order, since Featured spans the top-left 2×2 area). Real, current, primary-sourced this run (not a single blog's guess): fetched directly off this sandbox's standing `ENOTFOUND` egress block via Firecrawl's own fetch infrastructure (same workaround this catalog has used since day 29) — Chrome for Developers' own blog post 'Use CSS reading-flow for logical sequential focus navigation' (developer.chrome.com/blog/reading-flow, published 2025-05-01, byline Di Zhang + Rachel Andrew) states `reading-flow` and its companion `reading-order` property shipped in Chrome 137, and a second primary source, MDN's own `reading-flow` reference page (last modified 2026-04-20, fetched fresh this run), gives the exact current cross-browser matrix used here rather than a stale or rounded-up one: Chrome/Edge/Opera 137+, Chrome Android 137, Opera Android 90, Samsung Browser 30, and Android WebView 137 all show 'Full support'; Firefox (desktop + Android) and Safari (desktop + iOS + WebView-on-iOS) both show 'No support' as of that same fetch. MDN also still tags the property 'Experimental' / not yet Baseline. Treated here exactly as those two primary sources state it — a genuinely real, shipped, current (2025/2026) feature, but Chromium-only today, not asserted as cross-browser. **Honest fallback, not glossed over:** `reading-flow` has no feature-detectable `@supports` fallback that changes anything, because nothing breaks either way — a non-supporting browser (Firefox, Safari today) renders the exact same visual grid and simply keeps the pre-existing DOM-order tab sequence, i.e. today's ordinary (imperfect but not broken) behavior most sites already ship; this entry's own fallback note, shown only via `@supports not (reading-flow: grid-rows)`, says exactly that rather than claiming a fix that isn't there for those browsers. Checked for overlap before building: no existing entry in this catalog sets `reading-flow` or `reading-order`, and this is the first entry whose subject is keyboard/screen-reader navigation order rather than a visual or motion effect — genuinely new ground, not a tweak to `css-grid-lanes-masonry` or any other grid entry. **DIY $999 tier — real, strong fit, arguably more so than most entries here:** pure CSS, zero JS, no WebGL, no scroll-jacking, and it's a legitimate accessibility fix (not just a visual flourish) for the exact kind of 'featured item in a grid' layout that small-business marketing/pricing pages use constantly — but it can't actually be added to `docs/diy-website-style-catalog.md` this run; that doc is still missing (see this run's §0 repo-state check). (Vanilla example: live iframe preview + HTML/CSS tabs — click into the preview and press Tab repeatedly to feel the fixed order; the HTML tab's link order is left as plain, sensible source order on purpose, since reading-flow is meant to let authors keep that and still reorder visually.)

<div class="rfg-wrap">
  <p class="rfg-hint">Click into the preview, then press Tab (or Shift+Tab) repeatedly — focus follows the visual layout, not the order below.</p>
  <div class="rfg-grid">
    <a class="rfg-item" href="#">Overview</a>
    <a class="rfg-item" href="#">Pricing</a>
    <a class="rfg-item rfg-featured" href="#">Featured plan</a>
    <a class="rfg-item" href="#">FAQ</a>
    <a class="rfg-item" href="#">Contact</a>
  </div>
  <p class="rfg-fallback-note">Your browser doesn't support reading-flow yet — tab order follows plain HTML order (Overview, Pricing, Featured plan, FAQ, Contact) instead of the visual layout. Nothing is broken; it's just not fixed here yet.</p>
</div>