feat(subpages): add optional sections with typographic TOC

- Add SubpageSectionConfig type to schema.ts
- Update config parser to handle sections with album overrides
- Refactor SubpageGridView to render TOC + section headers
- Add base CSS for subpage-toc and subpage-section in globals.css
- Add theme-specific overrides for all 5 themes (minimal, editorial,
  classic, noir, monograph)
- Update gallery.yaml.example and docs/gallery-config.md

app/[...path]/SubpageGridView.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { imageUrl } from '@/lib/urls';
+import { SubpageSectionConfig } from '@/lib/config';
 
 interface SubpageAlbum {
     id: string;
@@ -21,9 +22,66 @@ interface SubpageGridViewProps {
     subtitle?: string;
     albums: SubpageAlbum[];
     coverPlaceholders: (Placeholder | null)[];
+    sections?: SubpageSectionConfig[];
 }
 
-export function SubpageGridView({ slug, title, subtitle, albums, coverPlaceholders }: SubpageGridViewProps) {
+function AlbumGrid({
+    albums,
+    albumMap,
+    placeholderMap,
+    slug,
+}: {
+    albums: SubpageAlbum[];
+    albumMap: Map<string, SubpageAlbum>;
+    placeholderMap: Map<string, Placeholder | null>;
+    slug: string;
+}) {
+    return (
+        <div className="subpage-grid">
+            {albums.map((album) => {
+                const ph = placeholderMap.get(album.id) ?? null;
+                return (
+                    <Link
+                        key={album.id}
+                        href={`/${slug}/${album.slug}`}
+                        className="subpage-grid__item"
+                        style={ph?.dominantColor ? { backgroundColor: ph.dominantColor } : undefined}
+                    >
+                        {album.albumThumbnailAssetId ? (
+                            <Image
+                                src={imageUrl(album.albumThumbnailAssetId, 'preview')}
+                                alt={album.albumName}
+                                fill
+                                sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
+                                loading="lazy"
+                                {...(ph ? { placeholder: 'blur' as const, blurDataURL: ph.blurDataURL } : {})}
+                            />
+                        ) : (
+                            <div className="skeleton" style={{ width: '100%', height: '100%' }} />
+                        )}
+                        <span className="subpage-grid__item-badge">
+                            {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
+                        </span>
+                        <div className="subpage-grid__item-overlay">
+                            <span className="subpage-grid__item-title">{album.albumName}</span>
+                            <span className="subpage-grid__item-count">
+                                {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
+                            </span>
+                        </div>
+                    </Link>
+                );
+            })}
+        </div>
+    );
+}
+
+export function SubpageGridView({ slug, title, subtitle, albums, coverPlaceholders, sections }: SubpageGridViewProps) {
+    // Build lookup maps once
+    const albumMap = new Map(albums.map((a) => [a.id, a]));
+    const placeholderMap = new Map(albums.map((a, i) => [a.id, coverPlaceholders[i] ?? null]));
+
+    const hasSections = sections && sections.length > 0;
+
     return (
         <div className="subpage-container">
             {(title || subtitle) && (
@@ -32,41 +90,57 @@ export function SubpageGridView({ slug, title, subtitle, albums, coverPlaceholde
                     {subtitle && <p className="subpage-subtitle">{subtitle}</p>}
                 </header>
             )}
-            <div className="subpage-grid">
-                {albums.map((album, i) => {
-                    const ph = coverPlaceholders[i];
-                    return (
-                        <Link
-                            key={album.id}
-                            href={`/${slug}/${album.slug}`}
-                            className="subpage-grid__item"
-                            style={ph?.dominantColor ? { backgroundColor: ph.dominantColor } : undefined}
-                        >
-                            {album.albumThumbnailAssetId ? (
-                                <Image
-                                    src={imageUrl(album.albumThumbnailAssetId, 'preview')}
-                                    alt={album.albumName}
-                                    fill
-                                    sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
-                                    loading="lazy"
-                                    {...(ph ? { placeholder: 'blur' as const, blurDataURL: ph.blurDataURL } : {})}
-                                />
-                            ) : (
-                                <div className="skeleton" style={{ width: '100%', height: '100%' }} />
-                            )}
-                            <span className="subpage-grid__item-badge">
-                                {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
-                            </span>
-                            <div className="subpage-grid__item-overlay">
-                                <span className="subpage-grid__item-title">{album.albumName}</span>
-                                <span className="subpage-grid__item-count">
-                                    {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
+
+            {/* Typographic Table of Contents */}
+            {hasSections && (
+                <nav className="subpage-toc" aria-label="Sections">
+                    {sections.map((sec, i) => (
+                        <span key={sec.slug} className="subpage-toc__entry">
+                            <a href={`#${sec.slug}`} className="subpage-toc__link">
+                                <span className="subpage-toc__num">
+                                    {String(i + 1).padStart(2, '0')}
                                 </span>
-                            </div>
-                        </Link>
+                                <span className="subpage-toc__label">{sec.title}</span>
+                            </a>
+                        </span>
+                    ))}
+                </nav>
+            )}
+
+            {/* Sectioned layout */}
+            {hasSections ? (
+                sections.map((sec) => {
+                    const sectionAlbums = sec.albumIds
+                        .map((id) => albumMap.get(id))
+                        .filter(Boolean) as SubpageAlbum[];
+
+                    return (
+                        <section key={sec.slug} id={sec.slug} className="subpage-section">
+                            <header className="subpage-section__header">
+                                <h2 className="subpage-section__title">{sec.title}</h2>
+                                {sec.description && (
+                                    <p className="subpage-section__desc">{sec.description}</p>
+                                )}
+                                <div className="subpage-section__rule" aria-hidden="true" />
+                            </header>
+                            <AlbumGrid
+                                albums={sectionAlbums}
+                                albumMap={albumMap}
+                                placeholderMap={placeholderMap}
+                                slug={slug}
+                            />
+                        </section>
                     );
-                })}
-            </div>
+                })
+            ) : (
+                /* Flat layout (no sections) */
+                <AlbumGrid
+                    albums={albums}
+                    albumMap={albumMap}
+                    placeholderMap={placeholderMap}
+                    slug={slug}
+                />
+            )}
         </div>
     );
 }

app/[...path]/page.tsx

@@ -227,6 +227,7 @@ export default async function PathPage({ params }: PathPageProps) {
         subtitle={result.subpage.subtitle}
         albums={albums}
         coverPlaceholders={coverPlaceholders}
+        sections={result.subpage.sections}
       />
     );
   }