feat: photography features & image optimizations

- Hero carousel: gallery.yaml hero accepts single UUID or array, crossfade component
- Full-bleed single albums: subpages with 1 album skip grid, render photos directly
- EXIF on hover: camera/lens/focal length overlay on grid items (toggle via exifOnHover)
- Customizable grid: columns/gap/aspectRatio/layout (masonry|uniform) via gallery.yaml
- Per-subpage grid overrides: each subpage can override global grid config
- True masonry: per-image aspect ratios from EXIF dimensions
- next/image migration: homepage hero, album covers, grid thumbnails, about portrait
- ThumbHash blur placeholders and dominant color backgrounds
- Custom next/image loader via image proxy with width/quality params
- Lightbox fade-in transition with dominant color background
- Password-protected subpages, health check, rate limiting, OG images

app/api/og/route.tsx

@@ -0,0 +1,93 @@
+/**
+ * Dynamic OG image generator — renders social share previews.
+ * Uses next/og (ImageResponse) to create 1200×630 cards.
+ *
+ * GET /api/og?title=Album+Name&subtitle=12+photos
+ */
+
+import { ImageResponse } from 'next/og';
+import { NextRequest } from 'next/server';
+
+export const runtime = 'edge';
+
+export async function GET(request: NextRequest) {
+    const { searchParams } = request.nextUrl;
+    const title = searchParams.get('title') || 'Gallery';
+    const subtitle = searchParams.get('subtitle') || '';
+
+    return new ImageResponse(
+        (
+            <div
+                style={{
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: '#0a0a0a',
+                    fontFamily: 'system-ui, -apple-system, sans-serif',
+                    padding: '60px',
+                }}
+            >
+                {/* Decorative top line */}
+                <div
+                    style={{
+                        width: '60px',
+                        height: '2px',
+                        backgroundColor: '#d4af37',
+                        marginBottom: '40px',
+                    }}
+                />
+
+                {/* Title */}
+                <div
+                    style={{
+                        fontSize: '64px',
+                        fontWeight: 600,
+                        color: '#f0f0f0',
+                        letterSpacing: '0.02em',
+                        textAlign: 'center',
+                        lineHeight: 1.2,
+                        maxWidth: '900px',
+                    }}
+                >
+                    {title}
+                </div>
+
+                {/* Subtitle */}
+                {subtitle && (
+                    <div
+                        style={{
+                            fontSize: '24px',
+                            color: '#999999',
+                            fontWeight: 300,
+                            marginTop: '16px',
+                            letterSpacing: '0.08em',
+                            textTransform: 'lowercase',
+                        }}
+                    >
+                        {subtitle}
+                    </div>
+                )}
+
+                {/* Bottom decorative line */}
+                <div
+                    style={{
+                        width: '60px',
+                        height: '2px',
+                        backgroundColor: '#d4af37',
+                        marginTop: '40px',
+                    }}
+                />
+            </div>
+        ),
+        {
+            width: 1200,
+            height: 630,
+            headers: {
+                'Cache-Control': 'public, max-age=86400, s-maxage=86400',
+            },
+        },
+    );
+}