The Close (Odometer Pagination)

Features

• Compact pagination scaled up to full masthead width: generous tactile arrow buttons under a heavy rule, with the open section's running title beneath
• Odometer digit counter — the page number rolls on a masked vertical reel with neighbouring digits faintly peeking through the fade window
• Hidden-radio page switching with per-page arrow swaps via :has() and a single live section heading
• Broadsheet masthead: hairline topline with date, edition and a standing "illustrative quotes" marker, a centered serif nameplate, the signature heavy double rule, and a six-cell market tape
• One edition section per page: a display-serif lead story with dek, a full-width sparkline instrument strip and quote, then two secondary stories divided by hairlines
• Ranked movers table in the rail — ticker, company, sparkline, last and change in tabular-lining numerals over hairline row rules
• "By the numbers" ledger of real reported figures, each attributed to its outlet
• Real July 2026 reporting: every story carries its outlet as a visible source link (src URL per story in js/data.js); all prices, changes and sparklines are illustrative and marked as such in the chrome and footer
• Gain/loss inks derived from --success/--error via color-mix toward the live text ink, so they clear contrast floors on every design system in both modes
• Direction-aware page-turn animation (slide + fade, ~320ms) that respects prefers-reduced-motion
• Keyboard navigation with arrow keys
• Responsive layout that drops the rail below the stories, stacks the secondary pair and wraps the tape

Accessibility

ARIA labels

All interactive elements have aria-label

Keyboard nav

ArrowLeft/ArrowRight/Home/End for page navigation

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Live regions

aria-live="polite" on the edition container for page changes

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open The Close (Odometer Pagination) in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the pagination is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.