fix: restore nav menu, language dropdown, sidebar with TOC + articles

- Nav shows About + Topics links again
- Language switcher is a proper dropdown (current lang + translations)
- Article sidebar with sticky TOC + recent articles list
- Wider content area (64rem) with 240px sidebar
- Responsive: sidebar hidden on mobile

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

TYPOGRAPHY_QUICK_REFERENCE.md

@@ -0,0 +1,113 @@
+# Typography Quick Reference Guide
+## For internetforkids.org Redesign
+
+### THE THREE APPROACHES
+
+#### Approach 1: Sam Altman (Classic Contrast)
+```
+BEFORE:                           AFTER:
+[Heading in default font]    -->  [HEADING in Crimson Text]
+Body text in same font      -->  Body text in Oxygen sans-serif
+16px, 1.5 line height       -->  16px, 1.6 line height
+Wide width (800px+)         -->  500px max width (focused)
+```
+**Best for:** Pure, elegant simplicity | Strong serif/sans contrast
+
+---
+
+#### Approach 2: Dario Amodei (Literary Warmth)
+```
+BEFORE:                           AFTER:
+[Heading]                   -->  [Heading in Newsreader serif]
+Body text                   -->  Body text in Newsreader serif (same)
+16px, 1.5 line height       -->  20px, 1.6 line height
+White background            -->  Warm cream (#f0ede6)
+Dark gray text              -->  Dark brown (#1f1e1d)
+```
+**Best for:** Literary, sophisticated feel | Unified serif throughout
+
+---
+
+#### Approach 3: Blowfish Evolution (Modern)
+```
+BEFORE:                           AFTER:
+[Congo default]             -->  [Blowfish with serif headings]
+Sans-serif body             -->  San-serif body (improved)
+16px                        -->  18px
+1.5 line height             -->  1.7 line height
+Current spacing             -->  Generous whitespace/padding
+```
+**Best for:** Modern tech aesthetic | Easier migration path
+
+---
+
+### IMMEDIATE VISUAL CHANGES
+
+**Typography improvement boils down to 3 things:**
+
+1. **Font Selection**
+   - Headings: Switch from default to serif (Crimson Text, Merriweather, or Georgia)
+   - Effect: Instant premium feel, 80% of the improvement
+
+2. **Spacing** (line-height + margins)
+   - Increase body line-height from 1.5 to 1.6-1.7
+   - Increase margins between sections
+   - Effect: More breathing room, easier to read
+
+3. **Color & Width**
+   - Option: Keep pure white OR add warm cream background
+   - Reduce max-width to 700-850px (narrower = more readable)
+   - Effect: Better focus, more intimate feel
+
+---
+
+### MEASUREMENTS COMPARISON
+
+```
+METRIC                  Sam Altman    Dario Amodei    Congo (Current)
+Body Font Size          16px          20px            14-16px
+Body Line Height        1.6 (25.6px)  1.6 (32px)      ~1.5
+Heading Font Size (H1)  50px          36px            Varies
+Heading Weight          400           600             Varies
+Content Width           500px         800px+          800px+
+Paragraph Margin        24px          20px            ~15-20px
+Background              #fff          #f0ede6         Avocado scheme
+Text Color              #555          #1f1e1d         Varies
+```
+
+---
+
+### FONT STACK EXAMPLES
+
+**Option A (Sam Altman style):**
+```css
+/* Headings */
+font-family: 'Crimson Text', Georgia, serif;
+
+/* Body */
+font-family: 'Oxygen', -apple-system, BlinkMacSystemFont, sans-serif;
+```
+
+**Option B (Dario Amodei style):**
+```css
+/* All text */
+font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
+```
+
+**Option C (Blowfish compatible):**
+```css
+/* Headings */
+font-family: 'Merriweather', Georgia, serif;
+
+/* Body */
+font-family: 'Inter', system-ui, -apple-system, sans-serif;
+```
+
+---
+
+### ONE-SENTENCE SUMMARY
+
+Sam Altman = **Classic elegance** (serif + sans contrast)
+Dario Amodei = **Warm literacy** (unified serif, cream background)
+Blowfish = **Modern readability** (clean sans + serif accents)
+