docs(pages): redesign demo page (Fraunces + IBM Plex Mono, editorial layout)

Replaces the dated 800px-fixed, generic-sans demo with a typographic
"engineering reference" treatment:

- Fraunces (variable serif, opsz + SOFT axes) for body, headlines, and
  section numbers; IBM Plex Mono for code, snippets, and metadata.
- Warm cream paper palette (`#f4eee2` base, two ink levels, three rule
  weights) and one rust-red accent (`#b34328`) used for section numbers,
  the printer's-stamp masthead element, code-block left rules, and the
  matched-substring underline inside suggestions.
- Each demo is a two-column split: live "Try it" column with input +
  readout on the left, syntax-coloured code sample on the right showing
  the relevant options. Sections are numbered 01–04 in display-size
  Fraunces.
- Demo 01 now actually performs an Ajax round-trip (`serviceUrl:
  '/api/countries'`) intercepted by mockjax instead of using local
  lookup — so the "Ajax lookup" demo no longer lies about what it
  demos. Mockjax `responseTime` dropped from 2000ms to 150ms for snap.
- Suggestion-panel styling restyled to fit: cream background, hairline
  border, offset Risograph-style shadow, small-caps mono group
  headers, accent-pink selected state, match highlight rendered as a
  rust-coloured underline rather than bold.
- Hero masthead with rotated printer's stamp ("VERSION 2.0.2 / MAY 2026"),
  install snippets (npm + CDN), metadata row, and a colophon footer.
- Staggered rise-on-load animation, prefers-reduced-motion respected,
  full responsive layout (collapses to single column under 880px).

Demo IDs preserved (`#autocomplete-ajax`, `#autocomplete-ajax-x`,
`#selection-ajax`, `#autocomplete`, `#selection`,
`#autocomplete-custom-append`, `#suggestions-container`,
`#autocomplete-dynamic`) — no JS-side breakage. All loaded from CDN.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: tkirda-bison