Implement typography system updates and integrate custom Google fonts via next/font

The current typography stack loads Google Fonts via raw tags in pages/_document.page.tsx, which causes FOUT/flash, no automatic preloading/optimization, and no fine-grained control over font features. Typography scale values in tailwind.config.js are also expressed as raw pixel values without line-height and letter-spacing tokens, and several markdown / headline / code components use inconsistent sizes, weights, and tracking.
Motivation

• Replace the manual Google Fonts with next/font/google for automatic self-hosting, zero CLS, optimal loading, and font feature settings.
• Introduce a unified typography scale (size + line-height + letter-spacing) in Tailwind for h1–h5 (desktop + mobile variants) so headings stay balanced and consistent across pages.
• Improve readability of long-form markdown content (p, ul, ol, li, blockquote, code blocks) with better measure (max-w-prose), text-wrap: pretty/balance, and tighter tracking on mono.
• Add Source Serif 4 for editorial/quote surfaces (Bigquote, Regularquote) and bring the project onto Inter (sans), JetBrains Mono (mono) with explicit weights and feature settings.
• Fix typography regressions in the community page cards (heading sizes, spacing, button styles).
  Proposed changes
• New lib/fonts.js configuring Inter, JetBrains_Mono, and Source_Serif_4 via next/font/google, exposing CSS variables (--font-sans, --font-mono, --font-serif).
• pages/_app.page.tsx: apply font CSS variables to the root.
• pages/_document.page.tsx: remove manual Google Fonts / tags.
• next.config.js: exclude lib/fonts from the dev babel-loader so next/font can process it.
• styles/globals.css: new @layer base block with html/body font-family, font-feature-settings, text-wrap: balance/pretty, selection styles, and prefers-reduced-motion overrides.
• tailwind.config.js: rewrite fontFamily to consume the CSS variables, rebuild fontSize (base, xl, h1–h5, mobile variants) with line-height + letter-spacing, and add lineHeight, letterSpacing, maxWidth.prose tokens plus marquee utilities.
• Update components/Headlines.tsx, components/Code.tsx, components/StyledMarkdownBlock.tsx to use the new scale, balanced text wrapping, prose max-width, and Source Serif for quotes.
• Tidy pages/index.page.tsx and pages/community/index.page.tsx to use the new typography (card heading sizes, buttons, upcoming events list).

Start by reading lib/fonts.js, pages/_app.page.tsx, pages/_document.page.tsx, and tailwind.config.js to understand the existing font and typography setup. Review styles/globals.css and the listed headline, code, markdown, index, and community components before changing them. Done means the new font variables and typography tokens are used consistently, manual font links are removed, and the affected pages and components follow the proposed scale and wrapping behavior.