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

e2e/photo-grid.spec.ts

@@ -0,0 +1,75 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Photo Grid', () => {
+    // Use a known public subpage that has photos
+    const GRID_URL = '/deutschland/kloster-chorin-2024';
+
+    test('renders grid items with visible images', async ({ page }) => {
+        await page.goto(GRID_URL);
+
+        // Grid container should exist
+        const grid = page.locator('.photo-grid');
+        await expect(grid).toBeVisible();
+
+        // Should have grid items
+        const items = grid.locator('.photo-grid__item');
+        const count = await items.count();
+        expect(count).toBeGreaterThan(0);
+
+        // Scroll to trigger IntersectionObserver (FadeIn)
+        await items.first().scrollIntoViewIfNeeded();
+        await page.waitForTimeout(1000);
+
+        // First grid item should have real dimensions (not collapsed)
+        const firstItem = items.first();
+        const box = await firstItem.boundingBox();
+        expect(box).not.toBeNull();
+        expect(box!.width).toBeGreaterThan(100);
+        expect(box!.height).toBeGreaterThan(50);
+
+        // Image inside should exist and have the fill layout
+        const img = firstItem.locator('img');
+        await expect(img).toBeAttached();
+    });
+
+    test('grid items have overflow hidden (CSS regression)', async ({ page }) => {
+        // This test guards against the CSS cascade bug where a later rule
+        // strips `overflow: hidden` from .photo-grid__item, which breaks
+        // next/image fill rendering.
+        await page.goto(GRID_URL);
+
+        const grid = page.locator('.photo-grid');
+        await expect(grid).toBeVisible();
+
+        const item = grid.locator('.photo-grid__item').first();
+        await item.scrollIntoViewIfNeeded();
+
+        const overflow = await item.evaluate((el) => getComputedStyle(el).overflow);
+        expect(overflow).toBe('hidden');
+    });
+
+    test('images load with real content (not just blurhash)', async ({ page }) => {
+        await page.goto(GRID_URL);
+
+        // Scroll to trigger lazy loading
+        const grid = page.locator('.photo-grid');
+        await grid.scrollIntoViewIfNeeded();
+        await page.waitForTimeout(3000);
+
+        // Check that at least one image has loaded with real pixel data
+        const imgLoaded = await page.evaluate(() => {
+            const img = document.querySelector('.photo-grid__item img') as HTMLImageElement;
+            if (!img) return { found: false };
+            return {
+                found: true,
+                complete: img.complete,
+                naturalWidth: img.naturalWidth,
+                src: img.src.substring(0, 60),
+            };
+        });
+
+        expect(imgLoaded.found).toBe(true);
+        expect(imgLoaded.complete).toBe(true);
+        expect(imgLoaded.naturalWidth).toBeGreaterThan(0);
+    });
+});