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/layout.tsx

@@ -1,6 +1,7 @@
 /**
  * Root layout — site header with portfolio-style navigation.
  * Shows all subpages + standalone albums as nav links.
+ * Injects theme CSS custom properties from gallery.yaml config.
  */
 
 import type { Metadata } from 'next';
@@ -10,6 +11,7 @@ import { SubpageNav } from '@/components/SubpageNav';
 import { ThemeToggle } from '@/components/ThemeToggle';
 import { ScrollToTop } from '@/components/ScrollToTop';
 import { Footer } from '@/components/Footer';
+import { getConfig, getGoogleFontsUrl } from '@/lib/config';
 
 const siteTitle = process.env.SITE_TITLE || 'Gallery';
 const siteDescription = 'A curated photography portfolio';
@@ -35,8 +37,35 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const { theme } = getConfig();
+  const fontsUrl = getGoogleFontsUrl(theme);
+
+  // Inject theme values as CSS custom properties
+  const themeVars: Record<string, string> = {
+    '--accent': theme.accent,
+    '--accent-dim': `${theme.accent}1f`,
+    '--font-serif': `'${theme.fonts.heading}', Georgia, 'Times New Roman', serif`,
+    '--font-sans': `'${theme.fonts.body}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`,
+    '--font-caption': `'${theme.fonts.caption}', Georgia, serif`,
+    '--radius-sm': `${theme.radius}px`,
+    '--radius-md': `${Math.round(theme.radius * 1.5)}px`,
+    '--radius-lg': `${theme.radius * 2}px`,
+  };
+
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang="en"
+      suppressHydrationWarning
+      style={themeVars as React.CSSProperties}
+      data-grain={theme.grain}
+      data-header-dot={theme.headerDot}
+      data-photo-frame={theme.photoFrame}
+    >
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link rel="stylesheet" href={fontsUrl} />
+      </head>
       <body>
         <header className="header">
           <nav className="header__nav">