feat: theming system, documentation, and photo grid regression tests

- Add configurable theme system with 4 presets (studio, minimal, editorial, classic)
- Theme controls fonts, colors, accent, photo frames, grain, and header dot
- Resolve themes from gallery.yaml: string shorthand or full object override
- Inject theme as CSS custom properties on <html> element
- Dynamic Google Fonts loading based on theme config
- OG image route reads accent/background from theme
- Refactor Studio overrides into conditional CSS via data-attributes

Documentation:
- Add docs/gallery-config.md with comprehensive configuration reference
- Add docs/theming.md with preset reference and custom theme guide
- Slim README to link to detailed docs

Fix CSS regression:
- Fix passepartout frame overflow:visible breaking next/image fill rendering
- Remove duplicate .photo-grid__item block that stripped overflow:hidden

Testing:
- Add e2e/photo-grid.spec.ts with 3 regression tests:
  - Grid items render with real dimensions
  - overflow:hidden CSS guard (catches the exact bug fixed)
  - Images load with real pixel data (not blurhash)

Tooling:
- Add scripts/screenshots.ts for automated theme screenshot generation
- Handles dev server lifecycle, theme cycling, FadeIn + lazy image handling

app/api/og/route.tsx

@@ -1,12 +1,14 @@
 /**
  * Dynamic OG image generator — renders social share previews.
  * Uses next/og (ImageResponse) to create 1200×630 cards.
+ * Reads accent color from theme config.
  *
  * GET /api/og?title=Album+Name&subtitle=12+photos
  */
 
 import { ImageResponse } from 'next/og';
 import { NextRequest } from 'next/server';
+import { getConfig } from '@/lib/config';
 
 export const runtime = 'edge';
 
@@ -14,6 +16,7 @@ export async function GET(request: NextRequest) {
   const { searchParams } = request.nextUrl;
   const title = searchParams.get('title') || 'Gallery';
   const subtitle = searchParams.get('subtitle') || '';
+  const { theme } = getConfig();
 
   return new ImageResponse(
     <div
@@ -34,7 +37,7 @@ export async function GET(request: NextRequest) {
         style={{
           width: '60px',
           height: '2px',
-          backgroundColor: '#d4af37',
+          backgroundColor: theme.accent,
           marginBottom: '40px',
         }}
       />
@@ -75,7 +78,7 @@ export async function GET(request: NextRequest) {
         style={{
           width: '60px',
           height: '2px',
-          backgroundColor: '#d4af37',
+          backgroundColor: theme.accent,
           marginTop: '40px',
         }}
       />