diff --git a/.env.local.example b/.env.local.example
index 2d7160f..273808d 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -34,6 +34,14 @@ STALE_MAX_AGE=86400
 # refetch. Leave it unset in normal operation.
 # IMAGE_CACHE_VERSION=1
 
+# CDN mode: serve photos and videos through a pull CDN (default: off).
+# Point a CDN (Cloudflare, Bunny, CloudFront, ...) at this server as its origin,
+# cache /api/image/* and /api/video/* including the query string, and put its
+# URL here. Pages, EXIF, the map and downloads keep coming from this server.
+# Ignored while a site password is set, so the password keeps covering photos.
+# Also set TRUSTED_PROXY_HOPS to count the CDN, see docs/deployment.md#cdn-mode.
+# CDN_URL=https://cdn.example.com
+
 # How long to wait for a response from Immich, in milliseconds
 # (integer, minimum 1000, default: 15000 = 15 seconds).
 # Bounds the wait for a *response* only — downloading a large photo or a long
diff --git a/.gitignore b/.gitignore
index 7caad44..e22c502 100644
--- a/.gitignore
+++ b/.gitignore
@@ -68,6 +68,7 @@ docker-compose.override.yml
 content/settings.yaml
 content/gallery.yaml
 content/about.md
+content/privacy.md
 # Journal entries reference Immich asset UUIDs, which are specific to one
 # server — committing an entry would publish ids from the author's instance.
 # The .example alongside them stays tracked as a starting point.
@@ -86,6 +87,10 @@ content/*.screenshot-bak
 content/install.json
 # One-time setup token, written on first access and removed once install completes
 content/.setup-token
+# Contact form messages (lib/contact.ts), personal data of visitors
+content/messages/
+# Google Fonts cached by /api/fonts (lib/fonts.ts)
+content/.fonts/
 
 # ── Internal Dev Docs ────────────────────────────────
 docs/dev/
diff --git a/CHANGELOG.md b/CHANGELOG.md
index afeb9bc..50ba7c6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,273 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 Releases up to and including v0.9.2 are documented in the
 [GitHub releases](https://github.com/ralksta/immich-folio/releases).
 
+## [0.18.0] — 2026-09-27
+
+### Security
+
+- **Journal drafts and password-protected entries no longer render publicly
+  as a subpage essay**
+  ([#684](https://github.com/ralksta/immich-folio/pull/684),
+  [GHSA-987w-cpwm-c9g9](https://github.com/ralksta/immich-folio/security/advisories/GHSA-987w-cpwm-c9g9),
+  medium). A subpage's `essayFile` read the journal entry straight from disk,
+  skipping the draft and password rules `/journal/<slug>` applies. It now
+  resolves through the same rules: a draft reads as missing for visitors, and
+  a protected entry shows its password gate, sharing the
+  `lb_auth_journal_<slug>` cookie.
+
+- **Immich descriptions are escaped in generated subpage essays**
+  ([#684](https://github.com/ralksta/immich-folio/pull/684),
+  [GHSA-8ppx-39jv-q5xm](https://github.com/ralksta/immich-folio/security/advisories/GHSA-8ppx-39jv-q5xm),
+  low). The essay built from a subpage's albums (`layout: essay` without
+  markdown) put each asset's Immich description into the page as raw HTML.
+  Captions are now HTML-escaped, and they go through `assetCaption()`, so
+  `exif.caption: false` is respected there as well. Tracked in
+  [#689](https://github.com/ralksta/immich-folio/issues/689).
+
+- **Admin drafts no longer keep a typed password, and the contact form's
+  email check runs in linear time**
+  ([#727](https://github.com/ralksta/immich-folio/pull/727)). The admin's
+  session drafts wrote a password as typed to `sessionStorage`; a draft
+  holding a plaintext password is now not kept (the unsaved-changes guard
+  still warns). The email pattern could backtrack polynomially on a crafted
+  domain; its labels now exclude the dot and the length is checked first.
+  Both found by CodeQL before release.
+
+### Added
+
+- **A built-in contact form with an inbox in the admin**
+  ([#703](https://github.com/ralksta/immich-folio/pull/703), closes
+  [#702](https://github.com/ralksta/immich-folio/issues/702)). `/contact`
+  needs neither SMTP nor a form service: each message is one file in
+  `content/messages/` (mode `0600`), read under the new _Messages_ tab, where
+  _Reply by email_ opens the owner's mail client with the message quoted.
+  Messages older than `contact.retentionDays` (default 90) are deleted. An
+  optional ntfy push goes to `contact.notifyUrl` or `CONTACT_NOTIFY_URL`, and
+  since [#709](https://github.com/ralksta/immich-folio/pull/709) it carries a
+  fixed "new message" line and nothing about the sender — no name, no
+  address, no text. Spam is kept out without a captcha: an off-screen
+  honeypot, a minimum fill time, three submissions a minute per IP and a cap
+  of 500 stored messages. With the Impressum on and no `legal.contactUrl`,
+  the Impressum links the form as its second contact channel. A new doctor
+  check warns when the form is on but nobody is notified.
+
+- **A privacy policy page, next to a list of what the site processes**
+  ([#708](https://github.com/ralksta/immich-folio/pull/708)). `/privacy`
+  renders `content/privacy.md`, edited under Settings → Legal, and the footer
+  links it once the file has text; `privacy.enabled: false` hides it. Folio
+  writes no legal text. Beside the editor it lists what _this_ installation
+  does, read off the configuration — the map, statistics, contact form,
+  password cookies, CDN — and marks every entry that involves a third party.
+  _Insert headings_ adds the matching section headings and nothing else. The
+  doctor warns while the Impressum is on and there is no policy.
+
+- **French, Spanish, Italian and Dutch interface translations**
+  ([#681](https://github.com/ralksta/immich-folio/pull/681)), selected with
+  `settings.yaml: lang` as before. The admin panel stays English.
+
+- **CDN mode for photos and videos**
+  ([#681](https://github.com/ralksta/immich-folio/pull/681)). With `CDN_URL`
+  set, image and video URLs point at a pull CDN whose origin is this server,
+  so repeat views reach neither the server nor Immich. A site password
+  switches the mode off, since a CDN would hand out cached photos without
+  checking the unlock cookie. The CDN origin is added to the CSP, and a
+  doctor check covers the password and `TRUSTED_PROXY_HOPS` cases. See
+  `docs/deployment.md#cdn-mode`.
+
+- **A reworked admin panel**
+  ([#712](https://github.com/ralksta/immich-folio/pull/712),
+  [#713](https://github.com/ralksta/immich-folio/pull/713),
+  [#714](https://github.com/ralksta/immich-folio/pull/714),
+  [#716](https://github.com/ralksta/immich-folio/pull/716),
+  [#717](https://github.com/ralksta/immich-folio/pull/717),
+  [#718](https://github.com/ralksta/immich-folio/pull/718),
+  [#719](https://github.com/ralksta/immich-folio/pull/719),
+  [#721](https://github.com/ralksta/immich-folio/pull/721)):
+  - **A sidebar instead of the header row**, grouped by task, with an unread
+    count on Messages and a dot on Diagnostics while Immich is down. It
+    collapses to an icon rail, with names shown on hover and focus, and
+    remembers that per browser.
+  - **`/admin` is an overview**: what needs attention (unread messages,
+    doctor warnings), published pages, journal entries and recent views.
+  - **The site's own visual language** — the preset's fonts, hairline
+    borders, the square marker — and one page header on every screen. The
+    accent is kept for the current place and the primary action; switches
+    are now pills reading ON or OFF, in green rather than the accent, so
+    Studio Modern's red no longer makes an enabled setting look like an
+    error.
+  - **The page builder is a structure list and a panel.** Hero, subpages and
+    standalone albums sit in one list on the left, subpages drag-sorted in
+    place; the selected entry is edited on the right instead of in an
+    overlay.
+  - **Dialogs only where a change is permanent.** Deleting a message or a
+    journal entry, and resetting the favicon (which used to delete the file
+    without asking), go through one confirm dialog in the admin's own look.
+    Removals in the page builder, which only touch unsaved state, happen at
+    once and offer _Undo_. No `window.confirm()` is left.
+  - **Feature switches are grouped by meaning** as one-line rows under
+    Settings → General; page transitions and scroll-to-top moved to Theme →
+    Look & motion. No setting keys changed.
+
+### Changed
+
+- **Fonts and the Leaflet stylesheet are served from the site itself**
+  ([#700](https://github.com/ralksta/immich-folio/pull/700)). Every page used
+  to link `fonts.googleapis.com`, which sends each visitor's IP address to
+  Google. The server now fetches a theme's Google fonts once, rewrites the
+  stylesheet and caches the files in `content/.fonts/`; custom fonts in
+  `theme.fonts` keep working. If Google cannot be reached before a font is
+  cached, the page falls back to the theme's system fonts. `leaflet.css`
+  comes from the npm package instead of unpkg. The CSP drops
+  `fonts.googleapis.com`, `fonts.gstatic.com` and `unpkg.com`.
+
+- **Email addresses are kept out of the served HTML**
+  ([#705](https://github.com/ralksta/immich-folio/pull/705)). The Impressum
+  and footer render the address only after hydration, from an encoded form,
+  so harvesters reading raw HTML find nothing. Without JavaScript the
+  Impressum shows `name [at] example [dot] de`. This defeats bulk harvesting,
+  not a person with a browser.
+
+- **The Impressum cites § 5 DDG and links its contacts**
+  ([#698](https://github.com/ralksta/immich-folio/pull/698), reported in
+  [#697](https://github.com/ralksta/immich-folio/issues/697) by
+  [@RichKidsDev](https://github.com/RichKidsDev)). The TMG was replaced by the
+  DDG in May 2024; `legal.heading` replaces the line for other laws (e.g.
+  § 5 ECG in Austria). `legal.contactUrl` and `legal.contactLabel` add a
+  contact form as the second channel, so a phone number stays optional.
+  Email, phone and contact URL are now links, and the "Created with the
+  Impressum generator by eRecht24" line, shown on every site whether true or
+  not, is gone. Settings → Legal gains fields for heading, contact URL, VAT
+  ID and tax number, and a doctor check flags missing details.
+
+- **Missing pages answer `404`**
+  ([#704](https://github.com/ralksta/immich-folio/pull/704)). Every missing
+  page used to answer `200`, because streaming had started before
+  `notFound()` ran. `/contact`, `/impressum`, `/map` and `/privacy` while
+  switched off, and `/journal/<slug>` without an entry, now return a real
+  404 with the same not-found page. Album and subpage slugs still depend on
+  Immich and stay soft 404s.
+
+- **Passwords set in the admin are stored as scrypt hashes**
+  ([#706](https://github.com/ralksta/immich-folio/pull/706), closes
+  [#690](https://github.com/ralksta/immich-folio/issues/690)). Subpage,
+  album, journal-entry and site passwords were written as typed. The save
+  routes now hash them; a stored hash reads _Protected_ with _Change_ and
+  _Remove_ and is never put into an input. Visitors who unlocked a page stay
+  signed in across unrelated saves. Existing plaintext passwords are hashed
+  the next time their file is saved in the admin.
+
+- **One notification surface in the admin**
+  ([#707](https://github.com/ralksta/immich-folio/pull/707)) replaces every
+  `alert()`: errors stay until dismissed, successes clear themselves, and
+  screen readers announce both.
+
+### Fixed
+
+- **Map tiles load again**
+  ([#701](https://github.com/ralksta/immich-folio/pull/701)). CARTO started
+  answering every tile with an "API KEY REQUIRED" image, leaving `/map` and
+  journal map blocks as a grey grid. Tiles now come from OpenStreetMap; the
+  dark look is a CSS filter, so the map now follows the colour mode.
+
+- **The page builder no longer drops a subpage's `proofing:` flag on save**
+  ([#711](https://github.com/ralksta/immich-folio/pull/711)). A page switched
+  off for proofing by hand reverted after any unrelated edit.
+
+- **Unsaved edits in Settings and About survive switching admin tabs, and a
+  backup restore is no longer overwritten by the next save**
+  ([#687](https://github.com/ralksta/immich-folio/pull/687)). Editors that
+  were open during a restore now reload and offer unsaved edits back as a
+  conflict. Also: "Restore my changes" after a conflict found nothing,
+  removing an album left its drawer showing the next album, and the journal
+  saved (rotating a backup) without changes.
+
+- **Accent-backed buttons stay readable with a light or malformed accent**
+  ([#724](https://github.com/ralksta/immich-folio/pull/724), supersedes
+  [#680](https://github.com/ralksta/immich-folio/pull/680)) — contributed by
+  [@lancetm714](https://github.com/lancetm714). A white accent made the
+  proofing dialog's _Download selected (.zip)_ button white on white.
+  `theme.accent` is now accepted as hex only and normalised to `#rrggbb`,
+  anything else falls back to the preset, and the proofing dialog and filter
+  pills use the mode-aware `--on-accent` text colour from #688.
+
+- **Every preset's accent is visible in both colour modes**
+  ([#688](https://github.com/ralksta/immich-folio/pull/688)). Presets had one
+  accent for both modes; minimal's dark mode drew black buttons on black.
+  Presets now carry a light and a dark accent, and text on accent-filled
+  buttons picks black or white for contrast. A custom accent stays the
+  owner's choice in both modes.
+
+- **Visitor-side inconsistencies**
+  ([#685](https://github.com/ralksta/immich-folio/pull/685)): after visiting
+  `/impressum`, every subpage header turned centred and uppercase; back links
+  announced "Back to Back to …"; the hero EXIF chip ignored
+  `exif.location`/`camera`/`settings`; videos in journal entries opened as
+  stills; the setup screen named a non-existent `.env.example`.
+
+- **An essay's lightbox walks only the photos the story shows**
+  ([#686](https://github.com/ralksta/immich-folio/pull/686)), not every photo
+  of the subpage's albums, and the proofing bar in essays shows the selection
+  count instead of a filter button that did nothing.
+
+- **The page panel scrolls with the mouse wheel**
+  ([#720](https://github.com/ralksta/immich-folio/pull/720)).
+
+- **The journal editor's top bar wraps on phones**
+  ([#723](https://github.com/ralksta/immich-folio/pull/723), closes
+  [#675](https://github.com/ralksta/immich-folio/issues/675)), so the title
+  stays editable and Save stays on screen.
+
+- **Every admin form field has a name for assistive technology**
+  ([#715](https://github.com/ralksta/immich-folio/pull/715)). Only two inputs
+  had a linked label; 47 are linked now, and clicking a label focuses its
+  field.
+
+### Internal
+
+- **`SettingsEditor` and `PageBuilder` are split up**
+  ([#710](https://github.com/ralksta/immich-folio/pull/710),
+  [#711](https://github.com/ralksta/immich-folio/pull/711)). The 2,200-line
+  settings editor is a shell with one file per section; the page builder's
+  YAML handling and edits are pure functions under test. Both were checked
+  side by side against `dev` for identical output.
+- **`useAdminFetch()`** ([#707](https://github.com/ralksta/immich-folio/pull/707))
+  gives Analytics, Messages, Backups and the journal list one loading and
+  error pattern.
+- README brought up to v0.17.0
+  ([#678](https://github.com/ralksta/immich-folio/pull/678),
+  [#679](https://github.com/ralksta/immich-folio/pull/679)).
+
+### Upgrade notes
+
+**`content/` gains two directories the app writes to:** `content/.fonts/`
+for the cached fonts and `content/messages/` for contact-form messages. Both
+are created on demand, so a writable `content/` is enough, as before.
+
+**The server needs outbound HTTPS to Google once per font** to fill the font
+cache. Until then pages fall back to the theme's system fonts. Visitors'
+browsers no longer contact Google.
+
+**A custom CSP or reverse-proxy allowlist** must now allow
+`tile.openstreetmap.org` for images instead of `*.basemaps.cartocdn.com`,
+and no longer needs `fonts.googleapis.com`, `fonts.gstatic.com` or
+`unpkg.com`. The built-in CSP is updated.
+
+**`theme.accent` must be hex** (`#rgb`, `#rrggbb` or `#rrggbbaa`). Anything
+else, including a value without `#`, falls back to the preset's accent.
+
+**Plaintext passwords in `gallery.yaml`, `settings.yaml` or journal entries**
+are hashed the next time that file is saved in the admin; one save clears the
+doctor's warning.
+
+**New, optional settings:** `contact.*` (the form is off by default),
+`privacy.enabled`, `legal.heading`, `legal.contactUrl`, `legal.contactLabel`,
+and the `CDN_URL` and `CONTACT_NOTIFY_URL` environment variables. See
+`content/settings.yaml.example` and `.env.local.example`. In the example file,
+`vatId` and `taxId` had swapped sample values; check yours if you copied
+them.
+
+No `IMAGE_CACHE_VERSION` bump is needed this time.
+
 ## [0.17.0] — 2026-09-23
 
 ### Added
diff --git a/README.md b/README.md
index ef14ec0..e4c8ba5 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,8 @@
 
 A self-hosted portfolio powered by [Immich](https://immich.app). It acts as a **secure reverse proxy** between your visitors and your private Immich instance: your Immich server stays on your local network, completely invisible to the outside world, while your albums are published as a gallery you control.
 
+**Latest: v0.18.0** — built-in contact form, privacy page and a reworked admin panel. → [What's New](#whats-new)
+
 ## Contents
 
 - [Features](#features)
@@ -67,6 +69,7 @@ A self-hosted portfolio powered by [Immich](https://immich.app). It acts as a **
 - **Client proofing** — clients favorite photos and export the selection; picks are encoded in the URL, nothing is stored server-side
 - **Originals delivery** — per-album opt-in lets visitors download a whole album or their proofing selection as a ZIP of the originals
 - **Lightbox watermark** — configurable overlay on fullscreen images
+- **Six interface languages** — English, German, French, Spanish, Italian and Dutch for everything visitors see
 - **Privacy-friendly analytics** — cookieless view counts, no third parties, can be switched off
 - **Dynamic OG images** — auto-generated social preview images per album
 
@@ -114,6 +117,7 @@ A self-hosted portfolio powered by [Immich](https://immich.app). It acts as a **
 
 - Health check endpoint at `GET /api/health`
 - In-memory caching with configurable TTL
+- Optional CDN mode — photos and videos served through a pull CDN, so repeat views never reach your server ([Deployment Guide](docs/deployment.md#cdn-mode))
 - Standalone Docker image — multi-stage, non-root, ~150 MB
 - Dependencies kept current via Dependabot (npm + GitHub Actions, weekly)
 
@@ -219,6 +223,8 @@ AUTH_SECRET=long-random-string        # required in production
 TRUSTED_PROXY_HOPS=1                   # reverse proxies in front, default: 0
 ADMIN_PASSWORD=your-secure-password   # enables /admin panel
 WEBHOOK_SECRET=long-random-string     # enables POST /api/webhook cache invalidation
+CDN_URL=https://cdn.example.com       # serve photos and videos through a pull CDN
+CONTACT_NOTIFY_URL=https://ntfy.sh/x  # push for new contact form messages, overrides settings.yaml
 ```
 
 > Login and setup endpoints have their own, much lower limits that `RATE_LIMIT_RPM` does not raise — see [Rate Limiting](docs/gallery-config.md#rate-limiting).
@@ -336,15 +342,15 @@ own password, separate from any album passwords, and writes straight to
 
 ## What's New
 
-v0.17.0 — originals as a ZIP, and a richer journal:
+v0.18.0 — a contact form, a privacy page and a reworked admin:
 
-- **Download originals as a ZIP** — a whole album, or just the photos a client picked in proofing, as one archive of the originals. Opt-in per album; contributed by [@lancetm714](https://github.com/lancetm714)
-- **Journal templates** — start a new entry from eight structures, from a wedding to a hiking trip
-- **New journal blocks** — photo grids, facts lists, a map with the pins you choose, and a slice of an album; reorder blocks by dragging → [Journal guide](docs/journal.md)
-- **Unsaved admin edits survive navigation** — switching tabs or reloading no longer throws your changes away
-- **Plain-HTTP installs** — admin login and gallery passwords now work at `http://host:7211`
+- **Built-in contact form** — no SMTP or form service: messages land in a new admin inbox, with an optional ntfy push that carries nothing about the sender
+- **Privacy page and fewer third parties** — `/privacy` with a list of what your installation actually processes; fonts and map styles are served from your own server, and email addresses stay out of the page source
+- **A reworked admin panel** — a collapsible sidebar, an overview page, the page builder as a structure list with Undo, and ON/OFF switches grouped by meaning
+- **Four more languages and a CDN mode** — French, Spanish, Italian and Dutch, and `CDN_URL` to serve photos through a pull CDN
+- **Two security fixes** — draft and password-protected journal entries used as subpage essays, and unescaped Immich descriptions ([advisories](https://github.com/ralksta/immich-folio/security/advisories))
 
-**Upgrade note:** visitors' proofing favourites from before v0.17.0 are not carried over. Nothing else to migrate.
+**Upgrade note:** a custom CSP or proxy allowlist must now allow `tile.openstreetmap.org` for map tiles, and `theme.accent` must be a hex colour. Nothing else to migrate.
 
 Security fixes ship in normal releases, so **running the latest release is the
 recommended baseline**.
@@ -373,7 +379,14 @@ easier to live with.
   readable in light mode. Also brought links to journal quote attributions. In
   v0.17.0, built the ZIP download: a whole album, or just the photos a client
   picked, as one archive of the originals — streamed, so even a large shoot
-  arrives complete.
+  arrives complete. In v0.18.0, kept accent-coloured buttons readable when the
+  accent is light, and made a mistyped accent fall back to the theme instead of
+  turning every button invisible.
+- **[@RichKidsDev](https://github.com/RichKidsDev)** — noticed that the
+  Impressum still cited the TMG, which the DDG replaced in 2024. That report
+  turned into a proper overhaul in v0.18.0: the right law by default, a heading
+  you can change for other countries, clickable contacts and a contact form as
+  a second channel.
 - **[@ImScheinox](https://github.com/ImScheinox)** — found and fixed portrait
   photos rendering as landscape tiles, because the grid ignored the camera's
   EXIF orientation flag. That brought the masonry layout's stagger back for
diff --git a/app/[...path]/EssayView.tsx b/app/[...path]/EssayView.tsx
index 8a003e4..5a3ec6a 100644
--- a/app/[...path]/EssayView.tsx
+++ b/app/[...path]/EssayView.tsx
@@ -9,6 +9,7 @@ import { FadeIn } from '@/components/FadeIn';
 import { LeafletMap, escapeHtml } from '@/components/LeafletMap';
 import type { ParsedEssay, EssayBlock } from '@/lib/essay';
 import { renderInlineMarkdown } from '@/lib/essay';
+import { essayPhotoSequence } from '@/lib/essaySequence';
 import type { PhotoItem } from './PhotoGrid';
 import './essay.css';
 import { useDictionary } from '@/components/I18nProvider';
@@ -60,19 +61,35 @@ function EssayViewContent({
     ? assetMap.get(essay.frontmatter.coverAssetId)
     : undefined;
 
+  // The lightbox walks only the photos this essay shows, in reading order —
+  // not every photo of the subpage's albums (`assets`).
+  const sequence = useMemo(
+    () =>
+      essayPhotoSequence(
+        essay.blocks,
+        essay.frontmatter.coverAssetId,
+        (key) => assetMap.get(key)?.item,
+      ),
+    [essay.blocks, essay.frontmatter.coverAssetId, assetMap],
+  );
+  const openPhoto = (item: PhotoItem) => {
+    const at = sequence.findIndex((p) => p.id === item.id);
+    if (at !== -1) setLightboxIndex(at);
+  };
+
   /**
    * One photo tile of a pair or a grid: sized by its real ratio (see
    * .essay-pair-grid), opens the lightbox, carries the proofing heart. The pair
    * used to spell this out a second time next to the photo case; a third copy
    * for the grid is where that stops.
    */
-  const renderTile = ({ item, index }: { item: PhotoItem; index: number }, key: number) => {
+  const renderTile = ({ item }: { item: PhotoItem }, key: number) => {
     const isFav = proofing ? proofing.isFavorite(item.id) : false;
     return (
       <div
         key={key}
         className="essay-image-wrapper photo-grid__item"
-        onClick={() => setLightboxIndex(index)}
+        onClick={() => openPhoto(item)}
         style={{
           ...(item.dominantColor ? { backgroundColor: item.dominantColor } : {}),
           flexGrow: item.aspectRatio ?? 1.5,
@@ -166,7 +183,7 @@ function EssayViewContent({
       case 'photo': {
         const resolved = assetMap.get(block.assetId);
         if (!resolved) return null;
-        const { item, index } = resolved;
+        const { item } = resolved;
         const isFav = proofing ? proofing.isFavorite(item.id) : false;
 
         return (
@@ -174,7 +191,7 @@ function EssayViewContent({
             <figure className={`essay-figure essay-figure--${block.layout}`}>
               <div
                 className="essay-image-wrapper photo-grid__item"
-                onClick={() => setLightboxIndex(index)}
+                onClick={() => openPhoto(item)}
                 style={{
                   ...(item.dominantColor ? { backgroundColor: item.dominantColor } : {}),
                   ...(item.aspectRatio ? { aspectRatio: `${item.aspectRatio}` } : {}),
@@ -388,7 +405,7 @@ function EssayViewContent({
         <figure className="essay-figure essay-figure--wide" style={{ marginBottom: '4rem' }}>
           <div
             className="essay-image-wrapper photo-grid__item"
-            onClick={() => setLightboxIndex(coverAsset.index)}
+            onClick={() => openPhoto(coverAsset.item)}
             style={{
               ...(coverAsset.item.dominantColor
                 ? { backgroundColor: coverAsset.item.dominantColor }
@@ -434,26 +451,11 @@ function EssayViewContent({
             backdropFilter: 'blur(8px)',
           }}
         >
-          <button
-            type="button"
-            onClick={() => proofing.setIsFilterActive((prev) => !prev)}
-            style={{
-              background: proofing.isFilterActive
-                ? 'var(--accent, #e60012)'
-                : 'var(--bg-card-hover)',
-              color: proofing.isFilterActive ? '#fff' : 'var(--text-primary)',
-              border: 'none',
-              padding: '6px 14px',
-              borderRadius: '20px',
-              fontSize: '0.85rem',
-              fontWeight: 500,
-              cursor: 'pointer',
-            }}
-          >
-            {proofing.isFilterActive
-              ? t.proofing.showAll
-              : t.proofing.selected(proofing.favorites.size)}
-          </button>
+          {/* A count, not the album grid's filter toggle: a story's layout is
+              authored, so there is nothing for "show favourites" to narrow. */}
+          <span style={{ fontSize: '0.85rem', fontWeight: 500, padding: '6px 4px' }}>
+            {t.proofing.selected(proofing.favorites.size)}
+          </span>
           <button
             type="button"
             onClick={() => proofing.setIsModalOpen(true)}
@@ -476,15 +478,15 @@ function EssayViewContent({
 
       {lightboxIndex !== null && (
         <Lightbox
-          assets={assets}
+          assets={sequence}
           currentIndex={lightboxIndex}
           onClose={() => setLightboxIndex(null)}
           onNext={() =>
-            setLightboxIndex((prev) => (prev !== null ? (prev + 1) % assets.length : null))
+            setLightboxIndex((prev) => (prev !== null ? (prev + 1) % sequence.length : null))
           }
           onPrev={() =>
             setLightboxIndex((prev) =>
-              prev !== null ? (prev - 1 + assets.length) % assets.length : null,
+              prev !== null ? (prev - 1 + sequence.length) % sequence.length : null,
             )
           }
           watermark={watermark}
diff --git a/app/[...path]/PhotoGrid.tsx b/app/[...path]/PhotoGrid.tsx
index eadd314..05e3c78 100644
--- a/app/[...path]/PhotoGrid.tsx
+++ b/app/[...path]/PhotoGrid.tsx
@@ -318,7 +318,7 @@ function PhotoGridInner({
               background: proofing.isFilterActive
                 ? 'var(--accent, #e60012)'
                 : 'var(--bg-card-hover)',
-              color: proofing.isFilterActive ? '#fff' : 'var(--text-primary)',
+              color: proofing.isFilterActive ? 'var(--on-accent, #fff)' : 'var(--text-primary)',
               border: 'none',
               padding: '6px 14px',
               borderRadius: '20px',
diff --git a/app/[...path]/page.tsx b/app/[...path]/page.tsx
index 6ecb2fc..85dbb00 100644
--- a/app/[...path]/page.tsx
+++ b/app/[...path]/page.tsx
@@ -45,12 +45,12 @@ import { albumStructuredData } from '@/lib/structuredData';
 import { absoluteUrl } from '@/lib/siteUrl';
 import { SubpageGridView } from './SubpageGridView';
 import { EssayView } from './EssayView';
-import { parseEssayMarkdown, type EssayBlock } from '@/lib/essay';
+import { parseEssayMarkdown, type EssayBlock, type ParsedEssay } from '@/lib/essay';
 import { pinsForEntry } from '@/lib/journalMap';
 import { expandAlbumBlocks } from '@/lib/journalAlbum';
 import { mapBlockAssetIds } from '@/lib/journal';
 import { strictestPrecision, type LocationPrecision } from '@/lib/mapPrecision';
-import { loadEssayFromFile } from '@/lib/admin/journal-service';
+import { resolveEssayFile, generatedEssayCaption } from '@/lib/essaySource';
 import { getServerDictionary } from '@/lib/i18n/server';
 
 // Render at request time — requires live Immich connection
@@ -424,16 +424,25 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
       !!result.subpage.essayText;
 
     if (isEssay) {
-      let essayParsed = result.subpage.essayText
-        ? parseEssayMarkdown(result.subpage.essayText)
-        : result.subpage.essayFile
-          ? loadEssayFromFile(result.subpage.essayFile)
-          : null;
+      const cookieStore = await cookies();
+      let essayParsed: ParsedEssay | null = null;
+      if (result.subpage.essayText) {
+        essayParsed = parseEssayMarkdown(result.subpage.essayText);
+      } else if (result.subpage.essayFile) {
+        // A borrowed journal entry keeps its own draft flag and password.
+        const file = resolveEssayFile(result.subpage.essayFile, {
+          isAdmin: await isAdminAuthenticated(),
+          getCookie: (name) => cookieStore.get(name)?.value,
+        });
+        if (file.status === 'locked') {
+          return <PasswordGate slug={result.subpage.essayFile} title={file.title} type="journal" />;
+        }
+        if (file.status === 'open') essayParsed = file.parsed;
+      }
 
       // Fetch assets from the subpage's albums. An essay has no per-album
       // gate to pass through, so an album with its own password stays out
       // until it has been unlocked.
-      const cookieStore = await cookies();
       const openAlbums = withoutLockedAlbums(albums, (name) => cookieStore.get(name)?.value);
       const allAlbums = await Promise.all(
         openAlbums.map((a) => immich.getAlbumBySlug(a.slug, slug, forceFresh)),
@@ -494,7 +503,7 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
             ...a.assets.map((asset) => ({
               type: 'photo' as const,
               assetId: encodeAssetId(asset.id),
-              caption: asset.exifInfo?.description || undefined,
+              caption: generatedEssayCaption(asset, config.exif.caption),
               layout: 'contained' as const,
             })),
           ]),
diff --git a/app/admin/AdminShell.tsx b/app/admin/AdminShell.tsx
index 2951a8c..e701802 100644
--- a/app/admin/AdminShell.tsx
+++ b/app/admin/AdminShell.tsx
@@ -4,7 +4,9 @@ import { useState, useEffect, type ReactNode } from 'react';
 import AdminLogin from './components/AdminLogin';
 import AdminDashboard from './components/AdminDashboard';
 import { SESSION_EXPIRED_EVENT } from './components/sessionExpiry';
+import { NotificationProvider } from './components/Notifications';
 import './admin.css';
+import { ConfirmProvider } from './components/ConfirmDialog';
 
 /**
  * Auth gate and panel chrome for every /admin route. Lives in the admin layout
@@ -79,5 +81,11 @@ export default function AdminShell({ children }: { children: ReactNode }) {
     );
   }
 
-  return <AdminDashboard onLogout={() => setAuthenticated(false)}>{children}</AdminDashboard>;
+  return (
+    <NotificationProvider>
+      <ConfirmProvider>
+        <AdminDashboard onLogout={() => setAuthenticated(false)}>{children}</AdminDashboard>
+      </ConfirmProvider>
+    </NotificationProvider>
+  );
 }
diff --git a/app/admin/__tests__/ConfirmDialog.test.tsx b/app/admin/__tests__/ConfirmDialog.test.tsx
new file mode 100644
index 0000000..907906d
--- /dev/null
+++ b/app/admin/__tests__/ConfirmDialog.test.tsx
@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { ConfirmProvider, useConfirm } from '../components/ConfirmDialog';
+
+afterEach(cleanup);
+
+/** UX stage 3 (#694 §3): what replaced window.confirm in the admin. */
+function Trigger({ onResult }: { onResult: (ok: boolean) => void }) {
+  const confirm = useConfirm();
+  return (
+    <button
+      onClick={async () =>
+        onResult(
+          await confirm({
+            title: 'Delete it?',
+            message: 'Gone for good.',
+            confirmLabel: 'Delete',
+            danger: true,
+          }),
+        )
+      }
+    >
+      go
+    </button>
+  );
+}
+
+function setup() {
+  const results: boolean[] = [];
+  render(
+    <ConfirmProvider>
+      <Trigger onResult={(ok) => results.push(ok)} />
+    </ConfirmProvider>,
+  );
+  fireEvent.click(screen.getByText('go'));
+  return results;
+}
+
+describe('ConfirmDialog', () => {
+  it('asks in an alertdialog named by its title', () => {
+    setup();
+    const dialog = screen.getByRole('alertdialog', { name: 'Delete it?' });
+    expect(dialog.textContent).toContain('Gone for good.');
+  });
+
+  it('resolves true on confirm and closes', async () => {
+    const results = setup();
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    await waitFor(() => expect(results).toEqual([true]));
+    expect(screen.queryByRole('alertdialog')).toBeNull();
+  });
+
+  it('resolves false on cancel, and on Escape', async () => {
+    const results = setup();
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await waitFor(() => expect(results).toEqual([false]));
+    fireEvent.click(screen.getByText('go'));
+    fireEvent.keyDown(document, { key: 'Escape' });
+    await waitFor(() => expect(results).toEqual([false, false]));
+  });
+});
diff --git a/app/admin/__tests__/Notifications.test.tsx b/app/admin/__tests__/Notifications.test.tsx
new file mode 100644
index 0000000..dda20f7
--- /dev/null
+++ b/app/admin/__tests__/Notifications.test.tsx
@@ -0,0 +1,74 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, screen, cleanup, fireEvent, act } from '@testing-library/react';
+import { NotificationProvider, useNotify } from '../components/Notifications';
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+function Trigger({ kind, message }: { kind: 'success' | 'error'; message: string }) {
+  const notify = useNotify();
+  return <button onClick={() => notify(kind, message)}>go</button>;
+}
+
+/** #600: what replaced alert() in the admin. */
+describe('admin notifications', () => {
+  it('announces an error assertively and keeps it until dismissed', () => {
+    vi.useFakeTimers();
+    render(
+      <NotificationProvider>
+        <Trigger kind="error" message="Save failed" />
+      </NotificationProvider>,
+    );
+    fireEvent.click(screen.getByText('go'));
+
+    expect(screen.getByRole('alert').textContent).toContain('Save failed');
+    act(() => vi.advanceTimersByTime(60_000));
+    expect(screen.queryByText('Save failed')).not.toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss' }));
+    expect(screen.queryByText('Save failed')).toBeNull();
+  });
+
+  it('announces a success politely and lets it go on its own', () => {
+    vi.useFakeTimers();
+    render(
+      <NotificationProvider>
+        <Trigger kind="success" message="Saved" />
+      </NotificationProvider>,
+    );
+    fireEvent.click(screen.getByText('go'));
+
+    expect(screen.getByRole('status').textContent).toContain('Saved');
+    act(() => vi.advanceTimersByTime(5000));
+    expect(screen.queryByText('Saved')).toBeNull();
+  });
+
+  it('does nothing outside the provider instead of throwing', () => {
+    render(<Trigger kind="error" message="x" />);
+    expect(() => fireEvent.click(screen.getByText('go'))).not.toThrow();
+  });
+
+  it('runs an action once and closes the notification', () => {
+    let runs = 0;
+    function WithAction() {
+      const notify = useNotify();
+      return (
+        <button onClick={() => notify('success', 'Removed', { label: 'Undo', run: () => runs++ })}>
+          go
+        </button>
+      );
+    }
+    render(
+      <NotificationProvider>
+        <WithAction />
+      </NotificationProvider>,
+    );
+    fireEvent.click(screen.getByText('go'));
+    fireEvent.click(screen.getByRole('button', { name: 'Undo' }));
+    expect(runs).toBe(1);
+    expect(screen.queryByText('Removed')).toBeNull();
+  });
+});
diff --git a/app/admin/__tests__/SaveBar.test.tsx b/app/admin/__tests__/SaveBar.test.tsx
index 24973c2..3ef1cc9 100644
--- a/app/admin/__tests__/SaveBar.test.tsx
+++ b/app/admin/__tests__/SaveBar.test.tsx
@@ -1,17 +1,16 @@
 // @vitest-environment jsdom
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render, screen, cleanup, fireEvent } from '@testing-library/react';
-import SaveBar from '../components/SaveBar';
+import SaveBar, { type SaveStatus } from '../components/SaveBar';
 
 /**
  * The first component test in the project, and deliberately a small one: it is
  * here to show the shape (`// @vitest-environment jsdom` on the first line,
  * render, assert, cleanup) as much as to cover SaveBar.
  *
- * SaveBar earns it though. It decides whether an outcome reads as success or
- * failure by testing whether the message happens to start with "Error" — #600
- * replaces that with a typed state, and this pins the behaviour so the swap can
- * be verified rather than eyeballed.
+ * SaveBar earns it though. It used to decide whether an outcome read as
+ * success or failure by testing whether the message happened to start with
+ * "Error"; #600 replaced that with a typed state, pinned below.
  */
 
 afterEach(cleanup);
@@ -19,7 +18,7 @@ afterEach(cleanup);
 const props = {
   dirty: false,
   saving: false,
-  saveMessage: '',
+  status: null as SaveStatus,
   onSave: () => {},
   label: 'Save',
 };
@@ -40,7 +39,9 @@ describe('SaveBar', () => {
   });
 
   it('only offers saving when there is something to save', () => {
-    const { rerender } = render(<SaveBar {...props} saveMessage="Saved!" />);
+    const { rerender } = render(
+      <SaveBar {...props} status={{ kind: 'success', message: 'Saved!' }} />,
+    );
     expect(screen.getByRole('button', { name: 'Save' })).toHaveProperty('disabled', true);
 
     rerender(<SaveBar {...props} dirty />);
@@ -63,18 +64,21 @@ describe('SaveBar', () => {
     expect(onSave).toHaveBeenCalledOnce();
   });
 
-  it('tells a failure from a success by the message prefix', () => {
-    // Pinned as it is, not as it should be: the prefix check is the thing #600
-    // replaces. A message that fails without starting with "Error" is styled as
-    // a success today, which is precisely the argument for a typed state.
-    const { rerender } = render(<SaveBar {...props} saveMessage="Error: Failed to save" />);
+  it('styles the outcome by its kind, not by its wording', () => {
+    // #600: the bar used to call a message an error when it started with
+    // "Error", so this third message was shown as a success.
+    const { rerender } = render(
+      <SaveBar {...props} status={{ kind: 'error', message: 'Error: Failed to save' }} />,
+    );
     expect(screen.getByText('Error: Failed to save').className).toContain('error');
 
-    rerender(<SaveBar {...props} saveMessage="Saved!" />);
+    rerender(<SaveBar {...props} status={{ kind: 'success', message: 'Saved!' }} />);
     expect(screen.getByText('Saved!').className).toContain('success');
 
-    rerender(<SaveBar {...props} saveMessage="Could not reach the server" />);
-    expect(screen.getByText('Could not reach the server').className).toContain('success');
+    rerender(
+      <SaveBar {...props} status={{ kind: 'error', message: 'Could not reach the server' }} />,
+    );
+    expect(screen.getByText('Could not reach the server').className).toContain('error');
   });
 
   it('offers the preview link only where it belongs', () => {
diff --git a/app/admin/__tests__/contentRestored.test.tsx b/app/admin/__tests__/contentRestored.test.tsx
new file mode 100644
index 0000000..065a5dd
--- /dev/null
+++ b/app/admin/__tests__/contentRestored.test.tsx
@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { renderHook, act, cleanup } from '@testing-library/react';
+import { reportContentRestored, useContentRestored } from '../components/contentRestored';
+
+afterEach(() => cleanup());
+
+describe('useContentRestored', () => {
+  it('hands each restore to the mounted editors', () => {
+    const handler = vi.fn();
+    renderHook(() => useContentRestored(handler));
+    act(() => reportContentRestored({ target: 'journal', slug: 'iceland' }));
+    expect(handler).toHaveBeenCalledWith({ target: 'journal', slug: 'iceland' });
+  });
+
+  it('calls the latest handler, not the one from the first render', () => {
+    const first = vi.fn();
+    const second = vi.fn();
+    const { rerender } = renderHook(({ fn }) => useContentRestored(fn), {
+      initialProps: { fn: first },
+    });
+    rerender({ fn: second });
+    act(() => reportContentRestored({ target: 'gallery' }));
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledOnce();
+  });
+
+  it('stops listening once the editor unmounts', () => {
+    const handler = vi.fn();
+    const { unmount } = renderHook(() => useContentRestored(handler));
+    unmount();
+    act(() => reportContentRestored({ target: 'settings' }));
+    expect(handler).not.toHaveBeenCalled();
+  });
+});
diff --git a/app/admin/__tests__/gallery-ops.test.ts b/app/admin/__tests__/gallery-ops.test.ts
new file mode 100644
index 0000000..b98874d
--- /dev/null
+++ b/app/admin/__tests__/gallery-ops.test.ts
@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest';
+import * as ops from '../components/page-builder/galleryOps';
+import type { GalleryState } from '../components/page-builder/galleryYaml';
+
+/** #608: the page builder's edits, out of the component and under test. */
+
+const state = (): GalleryState => ({
+  hero: ['h1', 'h2', 'h3'],
+  albums: [{ id: 'a1' }, { id: 'a2' }],
+  subpages: [
+    { name: 'Japan', albums: [{ id: 'j1' }, { id: 'j2' }] },
+    {
+      name: 'Trips',
+      enabled: false,
+      albums: [],
+      sections: [{ title: 'North', albums: [{ id: 'n1' }] }],
+    },
+    { name: 'Korea', albums: [{ id: 'k1' }] },
+  ],
+});
+
+describe('album lists by address', () => {
+  it('adds to the standalone list, a subpage and a section', () => {
+    let g = ops.addAlbum(state(), { type: 'standalone' }, { id: 'x' });
+    expect(g.albums.map((a) => a.id)).toEqual(['a1', 'a2', 'x']);
+    g = ops.addAlbum(g, { type: 'subpage', subpageIndex: 0 }, { id: 'y' });
+    expect(g.subpages[0].albums.map((a) => a.id)).toEqual(['j1', 'j2', 'y']);
+    g = ops.addAlbum(g, { type: 'section', subpageIndex: 1, sectionIndex: 0 }, { id: 'z' });
+    expect(g.subpages[1].sections![0].albums.map((a) => a.id)).toEqual(['n1', 'z']);
+  });
+
+  it('updates, removes and moves one entry and leaves its neighbours alone', () => {
+    const at = { type: 'subpage' as const, subpageIndex: 0 };
+    let g = ops.updateAlbum(state(), at, 1, { title: 'Tokyo', sort: 'manual' });
+    expect(g.subpages[0].albums).toEqual([
+      { id: 'j1' },
+      { id: 'j2', title: 'Tokyo', sort: 'manual' },
+    ]);
+    g = ops.moveAlbum(g, at, 1, 0);
+    expect(g.subpages[0].albums.map((a) => a.id)).toEqual(['j2', 'j1']);
+    g = ops.removeAlbum(g, at, 0);
+    expect(g.subpages[0].albums.map((a) => a.id)).toEqual(['j1']);
+  });
+
+  it('never mutates the state it was given', () => {
+    const before = state();
+    const copy = JSON.parse(JSON.stringify(before));
+    ops.removeAlbum(before, { type: 'section', subpageIndex: 1, sectionIndex: 0 }, 0);
+    ops.updateSubpage(before, 0, { title: 'x' });
+    ops.moveHero(before, 0, 2);
+    expect(before).toEqual(copy);
+  });
+
+  it('leaves the state as it is for an address that no longer exists', () => {
+    const g = state();
+    expect(ops.addAlbum(g, { type: 'subpage', subpageIndex: 9 }, { id: 'x' })).toBe(g);
+    expect(ops.removeAlbum(g, { type: 'section', subpageIndex: 0, sectionIndex: 0 }, 0)).toBe(g);
+    expect(ops.albumsAt(g, { type: 'section', subpageIndex: 1, sectionIndex: 5 })).toBeUndefined();
+  });
+});
+
+describe('hero, subpages and sections', () => {
+  it('adds, moves and removes hero photos', () => {
+    let g = ops.addHero(state(), 'h4');
+    g = ops.moveHero(g, 3, 0);
+    expect(ops.removeHero(g, 1).hero).toEqual(['h4', 'h2', 'h3']);
+  });
+
+  it('names a new subpage after its position and starts it empty', () => {
+    const g = ops.addSubpage(state());
+    expect(g.subpages[3]).toEqual({ name: 'New Page 4', albums: [], sections: undefined });
+  });
+
+  it('adds, updates and removes sections', () => {
+    let g = ops.addSection(state(), 0);
+    expect(g.subpages[0].sections).toEqual([{ title: 'New Section', albums: [] }]);
+    g = ops.updateSection(g, 0, 0, { title: 'Tokyo', description: 'Night' });
+    expect(g.subpages[0].sections![0]).toEqual({
+      title: 'Tokyo',
+      description: 'Night',
+      albums: [],
+    });
+    expect(ops.removeSection(g, 0, 0).subpages[0].sections).toEqual([]);
+  });
+});
+
+describe('reading', () => {
+  it('numbers subpages over the enabled ones only', () => {
+    const g = state();
+    expect(ops.enabledPosition(g, 0)).toBe(1);
+    expect(ops.enabledPosition(g, 1)).toBeUndefined();
+    expect(ops.enabledPosition(g, 2)).toBe(2);
+  });
+
+  it('collects every album in use, sections included', () => {
+    expect([...ops.usedAlbumIds(state())].sort()).toEqual(['a1', 'a2', 'j1', 'j2', 'k1', 'n1']);
+  });
+
+  /*
+   * The open subpage sheet follows its page through a drag: the page itself,
+   * or a neighbour moving across it, shifts its index.
+   */
+  it.each([
+    [null, 0, 2, null],
+    [1, 1, 2, 2],
+    [1, 0, 2, 0],
+    [1, 2, 0, 2],
+    [0, 1, 2, 0],
+  ])('keeps sheet %s on its page when %s moves to %s', (open, from, to, expected) => {
+    expect(ops.followMovedIndex(open, from, to)).toBe(expected);
+  });
+});
diff --git a/app/admin/__tests__/gallery-yaml.test.ts b/app/admin/__tests__/gallery-yaml.test.ts
new file mode 100644
index 0000000..95f402d
--- /dev/null
+++ b/app/admin/__tests__/gallery-yaml.test.ts
@@ -0,0 +1,162 @@
+import { describe, it, expect } from 'vitest';
+import { parseGalleryYaml, serializeGallery } from '../components/page-builder/galleryYaml';
+import type { GalleryYaml } from '@/lib/config/schema';
+
+/**
+ * #608: gallery.yaml ⇄ the page builder's model. This is what decides what the
+ * builder writes on save, and until it left PageBuilder.tsx nothing tested it.
+ * Album entries themselves are covered in album-entries-round-trip.test.ts.
+ */
+
+const A = '11111111-1111-1111-1111-111111111111';
+const B = '22222222-2222-2222-2222-222222222222';
+
+/** Load and save once, the way the builder does without any edit in between. */
+const roundTrip = (yaml: Record<string, unknown>) => serializeGallery(parseGalleryYaml(yaml));
+
+describe('gallery.yaml round trip', () => {
+  it('keeps hero photos, standalone albums and a plain subpage', () => {
+    const yaml = {
+      hero: ['h1', 'h2'],
+      albums: [A],
+      subpages: [{ name: 'Japan', albums: [B] }],
+    };
+    expect(roundTrip(yaml)).toEqual(yaml);
+  });
+
+  it('turns a single hero string into a list', () => {
+    expect(roundTrip({ hero: 'h1' })).toEqual({ hero: ['h1'] });
+  });
+
+  it('leaves empty groups out instead of writing empty lists', () => {
+    expect(roundTrip({ hero: [], albums: [], subpages: [] })).toEqual({});
+  });
+
+  it('keeps every subpage field the builder knows', () => {
+    const sp = {
+      name: 'Clients',
+      title: 'For clients',
+      subtitle: 'Handover',
+      password: 'scrypt:aa:bb',
+      enabled: false,
+      hidden: true,
+      essayText: 'Text',
+      essayFile: 'story',
+      grid: { columns: 4, layout: 'justified' },
+      coverGrid: { columns: 2, gap: 8 },
+      location: 'city',
+      albums: [A],
+    };
+    expect(roundTrip({ subpages: [sp] })).toEqual({ subpages: [sp] });
+  });
+
+  it('writes enabled and hidden only when they differ from the default', () => {
+    const out = roundTrip({ subpages: [{ name: 'P', enabled: true, hidden: false, albums: [A] }] });
+    expect(out).toEqual({ subpages: [{ name: 'P', albums: [A] }] });
+  });
+
+  it('keeps sections, and page-level albums next to them only when there are any', () => {
+    const withSections = {
+      subpages: [
+        {
+          name: 'Trips',
+          sections: [
+            { title: 'North', description: 'Cold', albums: [A] },
+            { title: 'South', albums: [B] },
+          ],
+        },
+      ],
+    };
+    expect(roundTrip(withSections)).toEqual(withSections);
+
+    const both = {
+      subpages: [{ name: 'Trips', albums: [B], sections: [{ title: 'North', albums: [A] }] }],
+    };
+    expect(roundTrip(both)).toEqual({
+      subpages: [{ name: 'Trips', sections: [{ title: 'North', albums: [A] }], albums: [B] }],
+    });
+  });
+
+  it('converts the older name → albums map into the list the builder writes', () => {
+    expect(
+      roundTrip({ subpages: { Japan: [A], Korea: { title: 'South Korea', albums: [B] } } }),
+    ).toEqual({
+      subpages: [
+        { name: 'Japan', albums: [A] },
+        { name: 'Korea', title: 'South Korea', albums: [B] },
+      ],
+    });
+  });
+
+  /*
+   * #523 split `grid` into photo grid and cover grid. A pre-#523 page keeps
+   * its cover columns and gap by being seeded from `grid` on load, so the
+   * first save writes the split out explicitly.
+   */
+  it('seeds the cover grid from a pre-#523 grid', () => {
+    const out = roundTrip({
+      subpages: [{ name: 'Old', grid: { columns: 3, gap: 10, layout: 'masonry' }, albums: [A] }],
+    });
+    expect(out).toEqual({
+      subpages: [
+        {
+          name: 'Old',
+          grid: { columns: 3, gap: 10, layout: 'masonry' },
+          coverGrid: { columns: 3, gap: 10 },
+          albums: [A],
+        },
+      ],
+    });
+  });
+
+  it('is stable: a second round trip changes nothing', () => {
+    const once = roundTrip({
+      hero: 'h1',
+      subpages: { Japan: { grid: { columns: 2 }, albums: [A] } },
+    });
+    expect(roundTrip(once)).toEqual(once);
+  });
+});
+
+/**
+ * The builder rewrites gallery.yaml wholesale on every save, so a subpage key
+ * it does not carry is deleted, not ignored. `proofing` was lost this way: a
+ * page switched off for client proofing by hand came back on after any
+ * unrelated save in the admin. Same lesson as #614 for album entries.
+ *
+ * The type annotation is the enforcement: every key the schema allows on a
+ * subpage has to be listed here, so the next one added and forgotten in
+ * galleryYaml.ts fails this test instead of vanishing from someone's file.
+ */
+type SubpageYaml = Extract<NonNullable<GalleryYaml['subpages']>, unknown[]>[number];
+
+const everySubpageKey: Required<SubpageYaml> = {
+  name: 'Clients',
+  title: 'For clients',
+  subtitle: 'Handover',
+  albums: [A],
+  sections: [{ title: 'North', description: 'Cold', albums: [B] }],
+  password: 'scrypt:aa:bb',
+  proofing: false,
+  essayFile: 'story',
+  essayText: 'Text',
+  enabled: false,
+  hidden: true,
+  location: 'city',
+  grid: { columns: 4, gap: 6, aspectRatio: '3/2', layout: 'justified' },
+  coverGrid: { columns: 2, gap: 8, aspectRatio: '1', layout: 'masonry' },
+};
+
+describe('subpage keys', () => {
+  it('survives a round trip with every key the schema allows', () => {
+    expect(roundTrip({ subpages: [everySubpageKey] })).toEqual({ subpages: [everySubpageKey] });
+  });
+
+  it('keeps proofing in either direction, and writes nothing when unset', () => {
+    const on = { name: 'P', proofing: true, albums: [A] };
+    expect(roundTrip({ subpages: [on] })).toEqual({ subpages: [on] });
+    expect(roundTrip({ subpages: [{ name: 'P', albums: [A] }] })).toEqual({
+      subpages: [{ name: 'P', albums: [A] }],
+    });
+  });
+});
diff --git a/app/admin/__tests__/useAdminFetch.test.tsx b/app/admin/__tests__/useAdminFetch.test.tsx
new file mode 100644
index 0000000..0f0418b
--- /dev/null
+++ b/app/admin/__tests__/useAdminFetch.test.tsx
@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { renderHook, waitFor, act, cleanup } from '@testing-library/react';
+import { useAdminFetch } from '../components/useAdminFetch';
+import { SESSION_EXPIRED_EVENT } from '../components/sessionExpiry';
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+const respond = (status: number, body: unknown) =>
+  vi.fn(async () => new Response(JSON.stringify(body), { status }));
+
+/**
+ * #609: every admin screen used to hand-roll this, with three error
+ * conventions between them, one of them a silent catch. These pin the one
+ * convention that replaced them.
+ */
+describe('useAdminFetch', () => {
+  it('loads data and clears loading', async () => {
+    vi.stubGlobal('fetch', respond(200, { n: 1 }));
+    const { result } = renderHook(() => useAdminFetch<{ n: number }>('/api/admin/x'));
+    expect(result.current.loading).toBe(true);
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.data).toEqual({ n: 1 });
+    expect(result.current.error).toBeNull();
+  });
+
+  it('turns an HTTP failure into a message, with the server error when there is one', async () => {
+    vi.stubGlobal('fetch', respond(500, { error: 'disk full' }));
+    const { result } = renderHook(() => useAdminFetch('/api/admin/x'));
+    await waitFor(() => expect(result.current.error).toBe('Could not load (HTTP 500): disk full.'));
+    expect(result.current.data).toBeNull();
+  });
+
+  it('reports a network failure instead of swallowing it', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => {
+        throw new TypeError('network');
+      }),
+    );
+    const { result } = renderHook(() => useAdminFetch('/api/admin/x'));
+    await waitFor(() => expect(result.current.error).toBe('Could not reach the server.'));
+  });
+
+  it('raises the session-expired event on a 401', async () => {
+    vi.stubGlobal('fetch', respond(401, {}));
+    const expired = vi.fn();
+    window.addEventListener(SESSION_EXPIRED_EVENT, expired);
+    const { result } = renderHook(() => useAdminFetch('/api/admin/x'));
+    await waitFor(() => expect(result.current.error).toContain('session expired'));
+    expect(expired).toHaveBeenCalledOnce();
+    window.removeEventListener(SESSION_EXPIRED_EVENT, expired);
+  });
+
+  it('fetches nothing for a null url, and again on reload', async () => {
+    const fetchMock = respond(200, { n: 1 });
+    vi.stubGlobal('fetch', fetchMock);
+    const { result, rerender } = renderHook(({ url }) => useAdminFetch(url), {
+      initialProps: { url: null as string | null },
+    });
+    expect(result.current.loading).toBe(false);
+    expect(fetchMock).not.toHaveBeenCalled();
+
+    rerender({ url: '/api/admin/x' });
+    await waitFor(() => expect(result.current.data).toEqual({ n: 1 }));
+    act(() => result.current.reload());
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(2));
+  });
+
+  it('applies a local edit without a round trip', async () => {
+    vi.stubGlobal('fetch', respond(200, { items: [1, 2] }));
+    const { result } = renderHook(() => useAdminFetch<{ items: number[] }>('/api/admin/x'));
+    await waitFor(() => expect(result.current.data).not.toBeNull());
+    act(() => result.current.mutate((d) => ({ items: d.items.filter((i) => i !== 1) })));
+    expect(result.current.data).toEqual({ items: [2] });
+  });
+});
diff --git a/app/admin/__tests__/useDraft.test.tsx b/app/admin/__tests__/useDraft.test.tsx
index 5aceecd..0c94ee8 100644
--- a/app/admin/__tests__/useDraft.test.tsx
+++ b/app/admin/__tests__/useDraft.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { describe, it, expect, afterEach, vi } from 'vitest';
 import { renderHook, act, render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { useDraft, readDraft } from '../components/useDraft';
+import { useDraft, readDraft, writeDraft, holdsPlaintextPassword } from '../components/useDraft';
 import DraftNotice from '../components/DraftNotice';
 
 /**
@@ -70,6 +70,25 @@ describe('useDraft', () => {
     expect(second.result.current.status).toBe('restored');
   });
 
+  it('keeps a held-back draft while the editor shows the server state', () => {
+    const first = mount();
+    act(() => void first.result.current.load('server-v1'));
+    first.rerender({ value: 'my edit', dirty: true });
+    first.unmount();
+
+    // The editor applies the server state after a conflict and is not dirty.
+    // That render used to clear the draft "Restore my changes" then reads.
+    const second = mount();
+    act(() => void second.result.current.load('server-v2'));
+    second.rerender({ value: 'server v2', dirty: false });
+
+    let taken: string | null = null;
+    act(() => {
+      taken = second.result.current.takeConflicting();
+    });
+    expect(taken).toBe('my edit');
+  });
+
   it('forgets the draft once saved, and bases new edits on the saved state', () => {
     const first = mount();
     act(() => void first.result.current.load('server-v1'));
@@ -155,3 +174,26 @@ describe('DraftNotice', () => {
     expect(h.onDiscard).toHaveBeenCalled();
   });
 });
+
+describe('drafts never keep a typed password', () => {
+  it('detects plaintext passwords in settings, gallery and journal drafts', () => {
+    expect(holdsPlaintextPassword({ sitePassword: 'hunter2' })).toBe(true);
+    expect(holdsPlaintextPassword({ subpages: [{ slug: 'x', password: 'pw' }] })).toBe(true);
+    expect(holdsPlaintextPassword('---\ntitle: A\npassword: pw\n---\nBody')).toBe(true);
+  });
+
+  it('lets hashes and empty values through', () => {
+    expect(holdsPlaintextPassword({ sitePassword: 'scrypt:aa:bb' })).toBe(false);
+    expect(holdsPlaintextPassword({ sitePassword: '' })).toBe(false);
+    expect(holdsPlaintextPassword('---\npassword: scrypt:aa:bb\n---\n')).toBe(false);
+    expect(holdsPlaintextPassword('No frontmatter, password: pw')).toBe(false);
+  });
+
+  it('drops the draft instead of writing the password to sessionStorage', () => {
+    writeDraft('settings', { base: 'b', value: { title: 'x' } });
+    expect(readDraft('settings')).not.toBeNull();
+    writeDraft('settings', { base: 'b', value: { title: 'x', sitePassword: 'hunter2' } });
+    expect(readDraft('settings')).toBeNull();
+    expect(JSON.stringify(window.sessionStorage)).not.toContain('hunter2');
+  });
+});
diff --git a/app/admin/admin.css b/app/admin/admin.css
index 03f9507..2800223 100644
--- a/app/admin/admin.css
+++ b/app/admin/admin.css
@@ -32,3 +32,6 @@
 @import './styles/asset-order.css';
 @import './styles/favicon.css';
 @import './styles/diagnostics.css';
+@import './styles/messages.css';
+@import './styles/notifications.css';
+@import './styles/redesign.css';
diff --git a/app/admin/components/AdminDashboard.tsx b/app/admin/components/AdminDashboard.tsx
index 79401f2..1f51912 100644
--- a/app/admin/components/AdminDashboard.tsx
+++ b/app/admin/components/AdminDashboard.tsx
@@ -8,6 +8,8 @@ import type { DoctorLevel } from '@/lib/admin/doctor';
 import { DOCTOR_LEVEL_EVENT, systemHealth } from './systemHealth';
 import { reportIfSessionExpired } from './sessionExpiry';
 import * as Icons from './Icons';
+import { useNotify } from './Notifications';
+import { adminGet } from './useAdminFetch';
 
 interface Props {
   onLogout: () => void;
@@ -15,16 +17,100 @@ interface Props {
   children: ReactNode;
 }
 
-const TABS = [
-  { label: 'Pages', href: '/admin/pages', match: /^\/admin\/pages$/ },
-  { label: 'Journal', href: '/admin/journal', match: /^\/admin\/journal/ },
-  { label: 'Settings', href: '/admin/settings', match: /^\/admin\/settings/ },
-  { label: 'Analytics', href: '/admin/analytics', match: /^\/admin\/analytics/ },
-  { label: 'Diagnostics', href: '/admin/diagnostics', match: /^\/admin\/diagnostics/ },
-  { label: 'Help', href: '/admin/help', match: /^\/admin\/help/ },
+/**
+ * The sidebar, grouped by what the owner is doing (docs/admin-ux-concept.md).
+ * `match` decides the active entry; Overview only matches /admin itself.
+ */
+const NAV: {
+  group?: string;
+  items: {
+    label: string;
+    href: string;
+    match: RegExp;
+    icon: ReactNode;
+    badge?: 'messages' | 'health';
+  }[];
+}[] = [
+  {
+    items: [
+      {
+        label: 'Overview',
+        href: '/admin',
+        match: /^\/admin\/?$/,
+        icon: <Icons.IconHome size={16} />,
+      },
+    ],
+  },
+  {
+    group: 'Content',
+    items: [
+      {
+        label: 'Pages',
+        href: '/admin/pages',
+        match: /^\/admin\/pages$/,
+        icon: <Icons.IconGrid size={16} />,
+      },
+      {
+        label: 'Journal',
+        href: '/admin/journal',
+        match: /^\/admin\/journal/,
+        icon: <Icons.IconBook size={16} />,
+      },
+    ],
+  },
+  {
+    group: 'Visitors',
+    items: [
+      {
+        label: 'Messages',
+        href: '/admin/messages',
+        match: /^\/admin\/messages/,
+        icon: <Icons.IconFileText size={16} />,
+        badge: 'messages',
+      },
+      {
+        label: 'Analytics',
+        href: '/admin/analytics',
+        match: /^\/admin\/analytics/,
+        icon: <Icons.IconBarChart size={16} />,
+      },
+    ],
+  },
+  {
+    group: 'Site',
+    items: [
+      {
+        label: 'Settings',
+        href: '/admin/settings',
+        match: /^\/admin\/settings/,
+        icon: <Icons.IconGear size={16} />,
+      },
+    ],
+  },
+  {
+    group: 'System',
+    items: [
+      {
+        label: 'Diagnostics',
+        href: '/admin/diagnostics',
+        match: /^\/admin\/diagnostics/,
+        icon: <Icons.IconShieldCheck size={16} />,
+        badge: 'health',
+      },
+      {
+        label: 'Help',
+        href: '/admin/help',
+        match: /^\/admin\/help/,
+        icon: <Icons.IconQuote size={16} />,
+      },
+    ],
+  },
 ];
 
+const SIDEBAR_KEY = 'folio_admin_sidebar';
+
 export default function AdminDashboard({ onLogout, children }: Props) {
+  const notify = useNotify();
   const pathname = usePathname();
   const [saving, setSaving] = useState(false);
 
@@ -40,6 +126,29 @@ export default function AdminDashboard({ onLogout, children }: Props) {
   // an expired session or a 500 rendered exactly like a real outage — every
   // indicator flipped to its alarming value at once (#341).
   const [statusError, setStatusError] = useState(false);
+  /**
+   * Icons-only sidebar, remembered per browser. The dashboard only renders
+   * after the client-side session check, so reading storage in the initial
+   * state cannot mismatch a server render.
+   */
+  const [collapsed, setCollapsed] = useState<boolean>(() => {
+    try {
+      return window.localStorage.getItem(SIDEBAR_KEY) === 'collapsed';
+    } catch {
+      return false;
+    }
+  });
+  const toggleCollapsed = () =>
+    setCollapsed((c) => {
+      try {
+        window.localStorage.setItem(SIDEBAR_KEY, c ? 'expanded' : 'collapsed');
+      } catch {
+        // Private mode or blocked storage: the toggle still works for this visit.
+      }
+      return !c;
+    });
+  /** Unread contact messages, for the count next to Messages. */
+  const [unread, setUnread] = useState(0);
 
   async function handleLogout() {
     await fetch('/api/admin/auth', { method: 'DELETE' });
@@ -54,7 +163,7 @@ export default function AdminDashboard({ onLogout, children }: Props) {
       // result was never checked at all (#596).
       if (!res.ok) {
         if (!reportIfSessionExpired(res)) {
-          alert(`Reload failed (HTTP ${res.status}).`);
+          notify('error', `Reload failed (HTTP ${res.status}).`);
         }
         return;
       }
@@ -112,6 +221,18 @@ export default function AdminDashboard({ onLogout, children }: Props) {
     fetchDoctor();
   }, [fetchDoctor]);
 
+  // Re-counted on every navigation: reading a message in the inbox and moving
+  // on should clear the count without a reload.
+  useEffect(() => {
+    let live = true;
+    adminGet<{ messages: { read: boolean }[] }>('/api/admin/messages').then((r) => {
+      if (live && r.data) setUnread(r.data.messages.filter((m) => !m.read).length);
+    });
+    return () => {
+      live = false;
+    };
+  }, [pathname]);
+
   // The diagnostics page runs the doctor itself; take its answer rather than
   // asking Immich the same three questions again.
   useEffect(() => {
@@ -146,36 +267,81 @@ export default function AdminDashboard({ onLogout, children }: Props) {
   const missingCredentials = status?.setup?.credentials === 'missing';
 
   return (
-    <div className="admin-dashboard">
-      <header className="admin-header">
-        <div className="admin-header-left">
-          <h1>Immich Folio</h1>
-          <nav className="admin-tabs">
-            {TABS.map((t) => {
-              const active = t.match.test(pathname);
-              return (
-                <Link
-                  key={t.href}
-                  href={t.href}
-                  className={`admin-tab ${active ? 'active' : ''}`}
-                  aria-current={active ? 'page' : undefined}
-                >
-                  {t.label}
-                </Link>
-              );
-            })}
-          </nav>
-        </div>
-        <div className="admin-header-right">
+    <div className={`admin-dashboard admin-app${collapsed ? ' is-collapsed' : ''}`}>
+      <aside className="admin-sidebar" aria-label="Admin">
+        <button
+          type="button"
+          className="admin-sidebar-toggle"
+          onClick={toggleCollapsed}
+          aria-expanded={!collapsed}
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          data-tip={collapsed ? 'Expand' : undefined}
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points={collapsed ? '9 6 15 12 9 18' : '15 6 9 12 15 18'} />
+          </svg>
+        </button>
+        <Link href="/admin" className="admin-brand" data-tip="Immich Folio">
+          <span className="admin-brand-mark" aria-hidden="true" />
+          <span className="admin-brand-text">
+            <span className="admin-brand-name">Immich Folio</span>
+            <span className="admin-brand-sub">Admin</span>
+          </span>
+        </Link>
+
+        <nav className="admin-nav">
+          {NAV.map((section, i) => (
+            <div key={section.group ?? i} className="admin-nav-group">
+              {section.group && <span className="admin-nav-label">{section.group}</span>}
+              {section.items.map((item) => {
+                const active = item.match.test(pathname);
+                const count = item.badge === 'messages' ? unread : 0;
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className={`admin-nav-item ${active ? 'active' : ''}`}
+                    data-tip={item.label}
+                    aria-current={active ? 'page' : undefined}
+                  >
+                    <span className="admin-nav-icon">{item.icon}</span>
+                    <span className="admin-nav-text">{item.label}</span>
+                    {count > 0 && (
+                      <span className="admin-nav-count" aria-label={`${count} unread`}>
+                        {count}
+                      </span>
+                    )}
+                    {item.badge === 'health' && health.tone === 'disconnected' && (
+                      <span className={`admin-nav-dot ${health.tone}`} aria-label={health.label} />
+                    )}
+                  </Link>
+                );
+              })}
+            </div>
+          ))}
+        </nav>
+
+        <div className="admin-sidebar-foot">
           {/* Diagnostics Badge */}
           <div className="status-indicator-container">
             <button
-              className={`status-badge-btn ${health.tone}`}
+              className={`status-badge-btn sidebar-status ${health.tone}`}
               onClick={() => {
                 setShowStatus(!showStatus);
                 if (!showStatus) fetchStatus();
               }}
               title="Show system status"
+              data-tip={health.label}
             >
               <span className="status-dot"></span>
               <span className="status-text">{health.label}</span>
@@ -266,39 +432,46 @@ export default function AdminDashboard({ onLogout, children }: Props) {
             )}
           </div>
 
-          <span className="admin-header-divider" aria-hidden="true" />
-
-          <a
-            href="/?fresh=1"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="admin-btn admin-btn-ghost"
-            title="Open site in new tab (bypassing cache)"
-          >
-            <Icons.IconLink size={14} /> Site
-          </a>
-          <button
-            className="admin-btn admin-btn-ghost"
-            onClick={() => setShowBackupModal(true)}
-            title="Manage config backups & restore"
-          >
-            <Icons.IconArchive size={14} /> Backups
-          </button>
-          <button
-            className="admin-btn admin-btn-ghost"
-            onClick={handleReload}
-            disabled={saving}
-            title="Reload config & clear cache"
-          >
-            <Icons.IconRefresh size={14} /> Reload
-          </button>
-          <button className="admin-btn admin-btn-ghost" onClick={handleLogout}>
-            Logout
-          </button>
+          <div className="admin-sidebar-actions">
+            <a
+              href="/?fresh=1"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="admin-side-action"
+              data-tip="View site"
+              title="Open site in new tab (bypassing cache)"
+            >
+              <Icons.IconLink size={14} />
+              <span className="admin-side-label">View site</span>
+            </a>
+            <button
+              className="admin-side-action"
+              data-tip="Backups"
+              onClick={() => setShowBackupModal(true)}
+              title="Manage config backups & restore"
+            >
+              <Icons.IconArchive size={14} />
+              <span className="admin-side-label">Backups</span>
+            </button>
+            <button
+              className="admin-side-action"
+              data-tip="Reload"
+              onClick={handleReload}
+              disabled={saving}
+              title="Reload config & clear cache"
+            >
+              <Icons.IconRefresh size={14} />
+              <span className="admin-side-label">Reload</span>
+            </button>
+            <button className="admin-side-action" data-tip="Sign out" onClick={handleLogout}>
+              <Icons.IconX size={14} />
+              <span className="admin-side-label">Sign out</span>
+            </button>
+          </div>
         </div>
-      </header>
+      </aside>
 
-      <main className="admin-main">{children}</main>
+      <main className="admin-main admin-workspace">{children}</main>
 
       <BackupManagerModal
         isOpen={showBackupModal}
diff --git a/app/admin/components/AdminLoadState.tsx b/app/admin/components/AdminLoadState.tsx
new file mode 100644
index 0000000..af3debb
--- /dev/null
+++ b/app/admin/components/AdminLoadState.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import * as Icons from './Icons';
+
+/**
+ * The one spinner and the one error-with-retry for admin screens (#609), so a
+ * failed load looks the same everywhere and always offers a way out.
+ *
+ * Renders nothing once there is data and no error; the caller renders the
+ * content then.
+ */
+export default function AdminLoadState({
+  loading,
+  error,
+  onRetry,
+  hasData,
+}: {
+  loading: boolean;
+  error: string | null;
+  onRetry: () => void;
+  /** With data already on screen, a reload shows no spinner over it. */
+  hasData?: boolean;
+}) {
+  if (error) {
+    return (
+      <div className="admin-load-error" role="alert">
+        <p>{error}</p>
+        <button type="button" className="admin-btn admin-btn-primary" onClick={onRetry}>
+          <Icons.IconRefresh size={14} /> Retry
+        </button>
+      </div>
+    );
+  }
+  if (loading && !hasData) {
+    return (
+      <div className="admin-loading-container" role="status" aria-label="Loading">
+        <div className="admin-spinner" />
+      </div>
+    );
+  }
+  return null;
+}
diff --git a/app/admin/components/AdminOverview.tsx b/app/admin/components/AdminOverview.tsx
new file mode 100644
index 0000000..919f0de
--- /dev/null
+++ b/app/admin/components/AdminOverview.tsx
@@ -0,0 +1,229 @@
+'use client';
+
+/**
+ * /admin: the first screen after signing in (docs/admin-ux-concept.md).
+ *
+ * Says what needs attention before it is asked for (unread messages, doctor
+ * findings), then the site at a glance. Everything on it links to the screen
+ * where it is acted on. It only reads the existing admin endpoints; a failed
+ * one leaves its part out rather than failing the page.
+ */
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import * as Icons from './Icons';
+import { adminGet } from './useAdminFetch';
+import type { DoctorFinding, DoctorLevel } from '@/lib/admin/doctor';
+import { DOCTOR_LEVEL_EVENT } from './systemHealth';
+
+interface OverviewData {
+  gallery: { hero?: unknown; subpages?: Array<{ enabled?: boolean }> } | null;
+  journal: Array<{ frontmatter: { draft?: boolean } }> | null;
+  messages: Array<{ read: boolean; name: string }> | null;
+  analytics: { days?: Record<string, { pageviews?: number }> } | null;
+  doctor: { level: DoctorLevel; findings: DoctorFinding[] } | null;
+}
+
+/** Where a doctor finding is fixed; mirrors FIXES in DiagnosticsView. */
+const FIX_ROUTE: Record<string, string> = {
+  legal: '/admin/settings/legal',
+  contact: '/admin/settings/legal',
+  privacy: '/admin/settings/legal',
+  passwords: '/admin/settings/security',
+  'album-ids': '/admin/pages',
+  'albums-shared': '/admin/pages',
+};
+
+function viewsLastDays(
+  days: Record<string, { pageviews?: number }> | undefined,
+  n: number,
+): number {
+  if (!days) return 0;
+  const cutoff = new Date();
+  cutoff.setDate(cutoff.getDate() - (n - 1));
+  const from = cutoff.toISOString().slice(0, 10);
+  return Object.entries(days)
+    .filter(([date]) => date >= from)
+    .reduce((sum, [, d]) => sum + (d.pageviews || 0), 0);
+}
+
+function greeting(): string {
+  const h = new Date().getHours();
+  if (h < 5) return 'Good night';
+  if (h < 12) return 'Good morning';
+  if (h < 18) return 'Good afternoon';
+  return 'Good evening';
+}
+
+export default function AdminOverview() {
+  const [data, setData] = useState<OverviewData | null>(null);
+
+  useEffect(() => {
+    let live = true;
+    Promise.all([
+      adminGet<{ gallery: OverviewData['gallery'] }>('/api/admin/gallery'),
+      adminGet<{ entries: NonNullable<OverviewData['journal']> }>('/api/admin/journal'),
+      adminGet<{ messages: NonNullable<OverviewData['messages']> }>('/api/admin/messages'),
+      adminGet<NonNullable<OverviewData['analytics']>>('/api/admin/analytics'),
+      adminGet<NonNullable<OverviewData['doctor']>>('/api/admin/doctor'),
+    ]).then(([gallery, journal, messages, analytics, doctor]) => {
+      if (!live) return;
+      setData({
+        gallery: gallery.data?.gallery ?? null,
+        journal: journal.data?.entries ?? null,
+        messages: messages.data?.messages ?? null,
+        analytics: analytics.data ?? null,
+        doctor: doctor.data ?? null,
+      });
+      // The sidebar badge takes the level from here instead of asking again.
+      if (doctor.data?.level) {
+        window.dispatchEvent(new CustomEvent(DOCTOR_LEVEL_EVENT, { detail: doctor.data.level }));
+      }
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
+
+  const subpages = data?.gallery?.subpages ?? [];
+  const published = subpages.filter((sp) => sp.enabled !== false).length;
+  const heroRaw = data?.gallery?.hero;
+  const heroCount = Array.isArray(heroRaw) ? heroRaw.length : heroRaw ? 1 : 0;
+  const entries = data?.journal ?? [];
+  const drafts = entries.filter((e) => e.frontmatter.draft).length;
+  const unread = (data?.messages ?? []).filter((m) => !m.read);
+  const views7 = viewsLastDays(data?.analytics?.days, 7);
+  const findings = (data?.doctor?.findings ?? []).filter((f) => f.level !== 'ok');
+
+  const attention: Array<{
+    tone: 'accent' | 'warn' | 'error';
+    title: string;
+    detail?: string;
+    href: string;
+  }> = [];
+  if (unread.length) {
+    attention.push({
+      tone: 'accent',
+      title: `${unread.length} unread message${unread.length === 1 ? '' : 's'}`,
+      detail: `From ${[...new Set(unread.map((m) => m.name))].slice(0, 3).join(', ')}`,
+      href: '/admin/messages',
+    });
+  }
+  for (const f of findings) {
+    attention.push({
+      tone: f.level === 'error' ? 'error' : 'warn',
+      title: f.title,
+      detail: f.detail,
+      href: FIX_ROUTE[f.id] ?? '/admin/diagnostics',
+    });
+  }
+
+  return (
+    <div className="admin-overview">
+      <header className="overview-head">
+        <div>
+          <p className="overview-kicker">Overview</p>
+          <h1 className="overview-title">{greeting()}.</h1>
+          <p className="overview-sub">
+            {data
+              ? attention.length
+                ? `${attention.length} thing${attention.length === 1 ? '' : 's'} could use a look.`
+                : 'Everything is in order.'
+              : 'Checking the site…'}
+          </p>
+        </div>
+        <div className="overview-actions">
+          <a
+            className="admin-btn admin-btn-ghost"
+            href="/?fresh=1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Icons.IconLink size={14} /> View site
+          </a>
+          <Link className="admin-btn admin-btn-primary" href="/admin/pages">
+            <Icons.IconPencil size={14} /> Edit pages
+          </Link>
+        </div>
+      </header>
+
+      <section aria-labelledby="overview-attention">
+        <h2 id="overview-attention" className="overview-section-label">
+          Needs attention
+        </h2>
+        {!data ? (
+          <div className="admin-spinner" />
+        ) : attention.length ? (
+          <div className="overview-attention">
+            {attention.map((a, i) => (
+              <Link key={i} href={a.href} className="overview-attention-item">
+                <span className={`overview-attention-marker ${a.tone}`} aria-hidden="true" />
+                <span className="overview-attention-text">
+                  {a.title}
+                  {a.detail && <span className="overview-attention-detail">{a.detail}</span>}
+                </span>
+                <span className="overview-attention-go">Open</span>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <p className="overview-calm">Nothing waiting. New messages and problems show up here.</p>
+        )}
+      </section>
+
+      <section aria-labelledby="overview-glance">
+        <h2 id="overview-glance" className="overview-section-label">
+          At a glance
+        </h2>
+        <div className="overview-stats">
+          <Link href="/admin/pages" className="overview-stat">
+            <span className="overview-stat-label">Pages</span>
+            <span className="overview-stat-value">{data ? published : '–'}</span>
+            <span className="overview-stat-note">
+              {subpages.length - published > 0
+                ? `${subpages.length - published} switched off`
+                : 'all published'}
+            </span>
+          </Link>
+          <Link href="/admin/pages" className="overview-stat">
+            <span className="overview-stat-label">Hero photos</span>
+            <span className="overview-stat-value">{data ? heroCount : '–'}</span>
+            <span className="overview-stat-note">on the home page</span>
+          </Link>
+          <Link href="/admin/journal" className="overview-stat">
+            <span className="overview-stat-label">Journal</span>
+            <span className="overview-stat-value">{data ? entries.length : '–'}</span>
+            <span className="overview-stat-note">
+              {drafts ? `${drafts} draft${drafts === 1 ? '' : 's'}` : 'no drafts'}
+            </span>
+          </Link>
+          <Link href="/admin/analytics" className="overview-stat">
+            <span className="overview-stat-label">Views · 7 days</span>
+            <span className="overview-stat-value">{data ? views7.toLocaleString() : '–'}</span>
+            <span className="overview-stat-note">cookieless count</span>
+          </Link>
+        </div>
+      </section>
+
+      <section aria-labelledby="overview-next">
+        <h2 id="overview-next" className="overview-section-label">
+          Quick actions
+        </h2>
+        <div className="overview-actions">
+          <Link className="admin-btn admin-btn-ghost" href="/admin/journal">
+            <Icons.IconPlus size={14} /> New journal entry
+          </Link>
+          <Link className="admin-btn admin-btn-ghost" href="/admin/messages">
+            <Icons.IconFileText size={14} /> Messages
+          </Link>
+          <Link className="admin-btn admin-btn-ghost" href="/admin/settings/theme">
+            <Icons.IconPalette size={14} /> Theme
+          </Link>
+          <Link className="admin-btn admin-btn-ghost" href="/admin/diagnostics">
+            <Icons.IconShieldCheck size={14} /> Diagnostics
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/app/admin/components/AnalyticsView.tsx b/app/admin/components/AnalyticsView.tsx
index 4b6aae6..27c11f6 100644
--- a/app/admin/components/AnalyticsView.tsx
+++ b/app/admin/components/AnalyticsView.tsx
@@ -1,7 +1,9 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
 import * as Icons from './Icons';
+import { useAdminFetch } from './useAdminFetch';
+import AdminLoadState from './AdminLoadState';
+import PageHeader from './PageHeader';
 
 interface AnalyticsData {
   trackingEnabled?: boolean;
@@ -22,47 +24,17 @@ interface AnalyticsData {
 }
 
 export default function AnalyticsView() {
-  const [data, setData] = useState<AnalyticsData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const analytics = useAdminFetch<AnalyticsData>('/api/admin/analytics');
+  const data = analytics.data;
 
-  const fetchAnalytics = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await fetch('/api/admin/analytics');
-      if (!res.ok) throw new Error('Failed to fetch analytics');
-      const json = await res.json();
-      setData(json);
-    } catch (err: any) {
-      setError(err.message || 'Error loading analytics');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchAnalytics();
-  }, [fetchAnalytics]);
-
-  if (loading) {
+  if (!data || analytics.error) {
     return (
-      <div className="admin-loading-container">
-        <div className="admin-spinner" />
-      </div>
-    );
-  }
-
-  if (error || !data) {
-    return (
-      <div className="admin-panel" style={{ padding: '2rem', textAlign: 'center' }}>
-        <p style={{ color: 'var(--admin-text-muted)', marginBottom: '1rem' }}>
-          {error || 'No analytics data'}
-        </p>
-        <button className="admin-btn admin-btn-primary" onClick={fetchAnalytics}>
-          <Icons.IconRefresh size={14} /> Retry
-        </button>
-      </div>
+      <AdminLoadState
+        loading={analytics.loading}
+        error={analytics.error}
+        onRetry={analytics.reload}
+        hasData={!!data}
+      />
     );
   }
 
@@ -80,20 +52,16 @@ export default function AnalyticsView() {
 
   return (
     <div className="analytics-view">
-      {/* Header */}
-      <div className="analytics-header">
-        <div>
-          <h2>
-            <Icons.IconSparkles size={20} /> Visitor Insights &amp; Analytics
-          </h2>
-          <p className="analytics-subtitle">
-            Privacy-first aggregate traffic stats. No personal data collected.
-          </p>
-        </div>
-        <button className="admin-btn admin-btn-ghost admin-btn-sm" onClick={fetchAnalytics}>
-          <Icons.IconRefresh size={14} /> Refresh
-        </button>
-      </div>
+      <PageHeader
+        kicker="Visitors"
+        title="Analytics"
+        description="Cookieless page counts, kept on this server. No personal data is collected."
+        actions={
+          <button className="admin-btn admin-btn-ghost admin-btn-sm" onClick={analytics.reload}>
+            <Icons.IconRefresh size={14} /> Refresh
+          </button>
+        }
+      />
 
       {data.trackingEnabled === false && (
         <div
diff --git a/app/admin/components/BackupManagerModal.tsx b/app/admin/components/BackupManagerModal.tsx
index 50b4d24..3125ee7 100644
--- a/app/admin/components/BackupManagerModal.tsx
+++ b/app/admin/components/BackupManagerModal.tsx
@@ -1,10 +1,12 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect } from 'react';
 import type { BackupItem, BackupTarget } from '@/app/api/admin/backups/route';
 import * as Icons from './Icons';
 import { useScrollLock } from './useScrollLock';
 import { useModalDialog } from '@/hooks/useModalDialog';
+import { reportContentRestored } from './contentRestored';
+import { useAdminFetch } from './useAdminFetch';
 
 interface Props {
   isOpen: boolean;
@@ -16,48 +18,47 @@ const TABS: { target: BackupTarget; label: string; file: string }[] = [
   { target: 'gallery', label: 'Gallery', file: 'gallery.yaml' },
   { target: 'settings', label: 'Settings', file: 'settings.yaml' },
   { target: 'about', label: 'About', file: 'about.md' },
+  { target: 'privacy', label: 'Privacy', file: 'privacy.md' },
   { target: 'journal', label: 'Journal', file: 'journal entries' },
 ];
 
 type BackupLists = Record<BackupTarget, BackupItem[]>;
 
-const EMPTY_LISTS: BackupLists = { gallery: [], settings: [], about: [], journal: [] };
+const EMPTY_LISTS: BackupLists = {
+  gallery: [],
+  settings: [],
+  about: [],
+  privacy: [],
+  journal: [],
+};
 
 export default function BackupManagerModal({ isOpen, onClose, onRestoreSuccess }: Props) {
   const [activeTab, setActiveTab] = useState<BackupTarget>('gallery');
   const [showAllBackups, setShowAllBackups] = useState(false);
-  const [backups, setBackups] = useState<BackupLists>(EMPTY_LISTS);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const list = useAdminFetch<{ backups: Partial<BackupLists> }>(
+    isOpen ? '/api/admin/backups' : null,
+  );
+  const backups: BackupLists = { ...EMPTY_LISTS, ...list.data?.backups };
+  /** A failed restore; a failed load is list.error. */
+  const [restoreError, setRestoreError] = useState<string | null>(null);
+  const error = list.error ?? restoreError;
+  const loading = list.loading;
+  const reloadList = list.reload;
   const [restoringFilename, setRestoringFilename] = useState<string | null>(null);
   const [confirmItem, setConfirmItem] = useState<BackupItem | null>(null);
   const [successMsg, setSuccessMsg] = useState<string | null>(null);
 
-  const fetchBackups = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await fetch('/api/admin/backups');
-      if (!res.ok) {
-        throw new Error('Failed to fetch backup history');
-      }
-      const data = await res.json();
-      setBackups({ ...EMPTY_LISTS, ...data.backups });
-    } catch (err: any) {
-      setError(err.message || 'Error loading backups');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
   useEffect(() => {
     if (isOpen) {
-      fetchBackups();
+      // Each opening shows the backups as they are now, not as they were
+      // the last time the modal was open.
+      reloadList();
+      setRestoreError(null);
       setConfirmItem(null);
       setSuccessMsg(null);
       setShowAllBackups(false);
     }
-  }, [isOpen, fetchBackups]);
+  }, [isOpen, reloadList]);
 
   useScrollLock(isOpen);
   /* Before the early `return null`: hooks must not run conditionally. */
@@ -68,7 +69,7 @@ export default function BackupManagerModal({ isOpen, onClose, onRestoreSuccess }
   async function handleRestore(item: BackupItem) {
     const filename = item.filename;
     setRestoringFilename(filename);
-    setError(null);
+    setRestoreError(null);
     setSuccessMsg(null);
 
     try {
@@ -90,10 +91,12 @@ export default function BackupManagerModal({ isOpen, onClose, onRestoreSuccess }
           : `Backup restored successfully! (${filename})`,
       );
       setConfirmItem(null);
-      await fetchBackups();
+      // Open editors still hold the pre-restore state; they reload on this.
+      reportContentRestored({ target: item.target, slug: item.slug });
+      reloadList();
       onRestoreSuccess();
-    } catch (err: any) {
-      setError(err.message || 'Error restoring backup');
+    } catch (err) {
+      setRestoreError(err instanceof Error ? err.message : 'Error restoring backup');
     } finally {
       setRestoringFilename(null);
     }
diff --git a/app/admin/components/ConfirmDialog.tsx b/app/admin/components/ConfirmDialog.tsx
new file mode 100644
index 0000000..757d08b
--- /dev/null
+++ b/app/admin/components/ConfirmDialog.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+/**
+ * One confirmation for the admin (UX stage 3, #694 §3), replacing the
+ * browser's `confirm()`, which cannot be styled, blocks the tab and reads the
+ * same for "discard a draft" and "delete a file".
+ *
+ * Policy: ask only before something that is permanent or takes effect at
+ * once (deleting a message, a journal entry, the uploaded favicon). Removals
+ * of unsaved state are undone by not saving and do not need a dialog.
+ *
+ *   const confirm = useConfirm();
+ *   if (!(await confirm({ title: 'Delete message?', confirmLabel: 'Delete', danger: true }))) return;
+ */
+
+import { createContext, useCallback, useContext, useRef, useState, type ReactNode } from 'react';
+import { useModalDialog } from '@/hooks/useModalDialog';
+
+export interface ConfirmOptions {
+  title: string;
+  /** What happens, in one or two sentences. */
+  message?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Destructive: the confirm button uses the error colour. */
+  danger?: boolean;
+}
+
+type Confirm = (options: ConfirmOptions) => Promise<boolean>;
+
+/** Outside the provider (a component tested on its own) it falls back to window.confirm. */
+const ConfirmContext = createContext<Confirm>(async (o) =>
+  typeof window === 'undefined' ? false : window.confirm(o.title),
+);
+
+export function useConfirm(): Confirm {
+  return useContext(ConfirmContext);
+}
+
+export function ConfirmProvider({ children }: { children: ReactNode }) {
+  const [pending, setPending] = useState<ConfirmOptions | null>(null);
+  const resolver = useRef<((ok: boolean) => void) | null>(null);
+
+  const confirm = useCallback<Confirm>(
+    (options) =>
+      new Promise<boolean>((resolve) => {
+        resolver.current?.(false);
+        resolver.current = resolve;
+        setPending(options);
+      }),
+    [],
+  );
+
+  const settle = useCallback((ok: boolean) => {
+    resolver.current?.(ok);
+    resolver.current = null;
+    setPending(null);
+  }, []);
+
+  return (
+    <ConfirmContext.Provider value={confirm}>
+      {children}
+      {pending && <Dialog options={pending} onSettle={settle} />}
+    </ConfirmContext.Provider>
+  );
+}
+
+function Dialog({
+  options,
+  onSettle,
+}: {
+  options: ConfirmOptions;
+  onSettle: (ok: boolean) => void;
+}) {
+  // Esc cancels, focus is trapped and returned (the same hook the modals use).
+  const cardRef = useModalDialog(() => onSettle(false));
+  return (
+    <div className="confirm-backdrop" onClick={() => onSettle(false)}>
+      <div
+        ref={cardRef}
+        className="confirm-card"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="confirm-title"
+        aria-describedby={options.message ? 'confirm-message' : undefined}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 id="confirm-title" className="confirm-title">
+          {options.title}
+        </h2>
+        {options.message && (
+          <p id="confirm-message" className="confirm-message">
+            {options.message}
+          </p>
+        )}
+        <div className="confirm-actions">
+          <button
+            type="button"
+            className="admin-btn admin-btn-ghost"
+            onClick={() => onSettle(false)}
+          >
+            {options.cancelLabel ?? 'Cancel'}
+          </button>
+          <button
+            type="button"
+            className={`admin-btn ${options.danger ? 'confirm-danger' : 'admin-btn-primary'}`}
+            onClick={() => onSettle(true)}
+          >
+            {options.confirmLabel ?? 'Confirm'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/components/DiagnosticsView.tsx b/app/admin/components/DiagnosticsView.tsx
index bf9d471..8650411 100644
--- a/app/admin/components/DiagnosticsView.tsx
+++ b/app/admin/components/DiagnosticsView.tsx
@@ -7,6 +7,7 @@ import * as Icons from './Icons';
 import { DOCTOR_LEVEL_EVENT } from './systemHealth';
 import type { DoctorFinding, DoctorLevel } from '@/lib/admin/doctor';
 import type { AltTextReport } from '@/lib/admin/alt-text';
+import PageHeader from './PageHeader';
 
 /**
  * Diagnostics as a page (/admin/diagnostics).
@@ -40,8 +41,12 @@ type AltTextData = AltTextReport & {
 /** Which group a doctor check belongs to. An unknown id lands in Content. */
 const GROUPS: { id: string; title: string; checks: string[] }[] = [
   { id: 'connection', title: 'Connection', checks: ['immich-api', 'album-ids'] },
-  { id: 'security', title: 'Security', checks: ['auth-secret', 'passwords', 'proxy-hops'] },
-  { id: 'content', title: 'Content', checks: ['albums-shared', 'content-writable', 'alt-text'] },
+  { id: 'security', title: 'Security', checks: ['auth-secret', 'passwords', 'proxy-hops', 'cdn'] },
+  {
+    id: 'content',
+    title: 'Content',
+    checks: ['albums-shared', 'content-writable', 'alt-text', 'legal', 'contact', 'privacy'],
+  },
 ];
 
 const LEVEL_LABEL: Record<DoctorLevel, string> = { ok: 'OK', warn: 'Check', error: 'Problem' };
@@ -56,9 +61,13 @@ const FIXES: Record<string, { label: string; href: string }> = {
     href: `${DOCS}/README.md#environment-variables-envlocal`,
   },
   'proxy-hops': { label: 'How to set it', href: `${DOCS}/docs/gallery-config.md#trusted-proxies` },
+  cdn: { label: 'CDN setup', href: `${DOCS}/docs/deployment.md#cdn-mode` },
   passwords: { label: 'Open settings', href: '/admin/settings/security' },
   'album-ids': { label: 'Open pages', href: '/admin/pages' },
   'albums-shared': { label: 'Open pages', href: '/admin/pages' },
+  legal: { label: 'Open settings', href: '/admin/settings/legal' },
+  contact: { label: 'Open settings', href: '/admin/settings/legal' },
+  privacy: { label: 'Open settings', href: '/admin/settings/legal' },
   'content-writable': { label: 'How to fix', href: `${DOCS}/docs/admin-panel.md#docker-usage` },
   'immich-api': {
     label: 'API key permissions',
@@ -371,27 +380,26 @@ export default function DiagnosticsView() {
 
   return (
     <div className="diag-page">
-      <div className="diag-head">
-        <div>
-          <h2>{headline}</h2>
-          <p className="diag-sub">
-            {ranAt ? `Last run ${ranAt.toLocaleString()}` : 'Running the checks…'}
-          </p>
-        </div>
-        <div className="diag-actions">
-          <button className="admin-btn admin-btn-sm" onClick={run} disabled={loading}>
-            <Icons.IconRefresh size={14} /> {loading ? 'Checking…' : 'Run again'}
-          </button>
-          <button
-            className="admin-btn admin-btn-sm"
-            onClick={copyReport}
-            disabled={loading || !all.length}
-            title="Markdown, ready to paste into an issue"
-          >
-            <Icons.IconCopy size={14} /> {copied ? 'Copied' : 'Copy report'}
-          </button>
-        </div>
-      </div>
+      <PageHeader
+        kicker="System"
+        title={headline}
+        description={ranAt ? `Last run ${ranAt.toLocaleString()}` : 'Running the checks…'}
+        actions={
+          <>
+            <button className="admin-btn admin-btn-sm" onClick={run} disabled={loading}>
+              <Icons.IconRefresh size={14} /> {loading ? 'Checking…' : 'Run again'}
+            </button>
+            <button
+              className="admin-btn admin-btn-sm"
+              onClick={copyReport}
+              disabled={loading || !all.length}
+              title="Markdown, ready to paste into an issue"
+            >
+              <Icons.IconCopy size={14} /> {copied ? 'Copied' : 'Copy report'}
+            </button>
+          </>
+        }
+      />
 
       {error && <div className="admin-error">{error}</div>}
 
diff --git a/app/admin/components/HelpView.tsx b/app/admin/components/HelpView.tsx
index 39d06ba..0e2251d 100644
--- a/app/admin/components/HelpView.tsx
+++ b/app/admin/components/HelpView.tsx
@@ -3,6 +3,7 @@
 import * as Icons from './Icons';
 import { en } from '@/lib/i18n/locales/en';
 import { LIGHTBOX_SHORTCUTS, shortcutDisplayKeys } from '@/lib/lightboxShortcuts';
+import PageHeader from './PageHeader';
 
 /**
  * The admin help section.
@@ -19,14 +20,11 @@ import { LIGHTBOX_SHORTCUTS, shortcutDisplayKeys } from '@/lib/lightboxShortcuts
 export default function HelpView() {
   return (
     <div className="settings-panel">
-      <div className="settings-section-header">
-        <h3>
-          <Icons.IconFileText size={18} /> Help
-        </h3>
-        <p className="settings-section-sub">
-          What your portfolio can do that has no button of its own.
-        </p>
-      </div>
+      <PageHeader
+        kicker="System"
+        title="Help"
+        description="What your portfolio can do that has no button of its own."
+      />
 
       <div className="settings-group">
         <div className="settings-group-head">
diff --git a/app/admin/components/MessagesView.tsx b/app/admin/components/MessagesView.tsx
new file mode 100644
index 0000000..dbb50c4
--- /dev/null
+++ b/app/admin/components/MessagesView.tsx
@@ -0,0 +1,192 @@
+'use client';
+
+/**
+ * The contact form inbox at /admin/messages (#702). Messages live in
+ * content/messages/ (lib/contact.ts); replying happens in the owner's own
+ * mail client through a mailto: link, since Folio sends no mail.
+ */
+
+import { useState } from 'react';
+import Link from 'next/link';
+import * as Icons from './Icons';
+import { reportIfSessionExpired } from './sessionExpiry';
+import { useAdminFetch } from './useAdminFetch';
+import AdminLoadState from './AdminLoadState';
+import type { ContactMessage } from '@/lib/contact';
+import { useNotify } from './Notifications';
+import PageHeader from './PageHeader';
+import { useConfirm } from './ConfirmDialog';
+
+interface InboxData {
+  enabled: boolean;
+  notifyConfigured: boolean;
+  retentionDays: number;
+  messages: ContactMessage[];
+}
+
+function replyHref(m: ContactMessage): string {
+  const subject = encodeURIComponent('Re: your message');
+  const quoted = m.message
+    .split('\n')
+    .map((line) => `> ${line}`)
+    .join('\n');
+  const body = encodeURIComponent(`\n\n${m.name} wrote:\n${quoted}`);
+  // Encoded so a ? or & in the address cannot start the query, with the @
+  // put back: not every mail client decodes %40 in the address part.
+  const to = encodeURIComponent(m.email).replace(/%40/g, '@');
+  return `mailto:${to}?subject=${subject}&body=${body}`;
+}
+
+export default function MessagesView() {
+  const confirm = useConfirm();
+  const notify = useNotify();
+  const inbox = useAdminFetch<InboxData>('/api/admin/messages');
+  const data = inbox.data;
+  const [open, setOpen] = useState<string | null>(null);
+
+  async function markRead(m: ContactMessage, read: boolean) {
+    const res = await fetch('/api/admin/messages', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id: m.id, read }),
+    });
+    if (!res.ok) {
+      reportIfSessionExpired(res);
+      return;
+    }
+    inbox.mutate((d) => ({
+      ...d,
+      messages: d.messages.map((x) => (x.id === m.id ? { ...x, read } : x)),
+    }));
+  }
+
+  function toggle(m: ContactMessage) {
+    const opening = open !== m.id;
+    setOpen(opening ? m.id : null);
+    if (opening && !m.read) markRead(m, true);
+  }
+
+  async function remove(m: ContactMessage) {
+    const ok = await confirm({
+      title: `Delete the message from ${m.name}?`,
+      message: 'It is removed from this server and cannot be restored.',
+      confirmLabel: 'Delete',
+      danger: true,
+    });
+    if (!ok) return;
+    const res = await fetch(`/api/admin/messages?id=${encodeURIComponent(m.id)}`, {
+      method: 'DELETE',
+    });
+    if (!res.ok) {
+      if (!reportIfSessionExpired(res)) notify('error', `Delete failed (HTTP ${res.status}).`);
+      return;
+    }
+    inbox.mutate((d) => ({ ...d, messages: d.messages.filter((x) => x.id !== m.id) }));
+  }
+
+  if (!data || inbox.error) {
+    return (
+      <AdminLoadState
+        loading={inbox.loading}
+        error={inbox.error}
+        onRetry={inbox.reload}
+        hasData={!!data}
+      />
+    );
+  }
+
+  const unread = data.messages.filter((m) => !m.read).length;
+
+  return (
+    <div className="messages-view">
+      <PageHeader
+        kicker="Visitors"
+        title={
+          <>
+            Messages
+            {unread > 0 && <span className="messages-count">{unread} unread</span>}
+          </>
+        }
+        description={`Sent through the contact form at /contact. Stored on this server and deleted after ${data.retentionDays} days.`}
+        actions={
+          <button className="admin-btn admin-btn-ghost admin-btn-sm" onClick={inbox.reload}>
+            <Icons.IconRefresh size={14} /> Refresh
+          </button>
+        }
+      />
+
+      {!data.enabled && (
+        <div className="messages-notice">
+          The contact form is switched off, so no new messages arrive.{' '}
+          <Link href="/admin/settings/legal">Turn it on in Settings → Legal</Link>.
+        </div>
+      )}
+      {data.enabled && !data.notifyConfigured && (
+        <div className="messages-notice">
+          No notification is set up, so new messages only show up here.{' '}
+          <Link href="/admin/settings/legal">Add an ntfy URL in Settings → Legal</Link>.
+        </div>
+      )}
+
+      {data.messages.length === 0 ? (
+        <div className="analytics-panel messages-empty">No messages.</div>
+      ) : (
+        <ul className="messages-list">
+          {data.messages.map((m) => {
+            const expanded = open === m.id;
+            return (
+              <li
+                key={m.id}
+                className={`messages-item${m.read ? '' : ' messages-item--unread'}${expanded ? ' messages-item--open' : ''}`}
+              >
+                <button
+                  type="button"
+                  className="messages-summary"
+                  onClick={() => toggle(m)}
+                  aria-expanded={expanded}
+                >
+                  <span className="messages-dot" aria-hidden="true" />
+                  <span className="messages-from">
+                    {m.name}
+                    {!m.read && <span className="sr-only"> (unread)</span>}
+                  </span>
+                  <span className="messages-preview">{m.message.slice(0, 120)}</span>
+                  <time className="messages-date" dateTime={m.receivedAt}>
+                    {new Date(m.receivedAt).toLocaleString()}
+                  </time>
+                </button>
+                {expanded && (
+                  <div className="messages-body">
+                    <p className="messages-meta">
+                      {m.name} &lt;{m.email}&gt;
+                    </p>
+                    <p className="messages-text">{m.message}</p>
+                    <div className="messages-actions">
+                      <a className="admin-btn admin-btn-primary admin-btn-sm" href={replyHref(m)}>
+                        Reply by email
+                      </a>
+                      <button
+                        type="button"
+                        className="admin-btn admin-btn-ghost admin-btn-sm"
+                        onClick={() => markRead(m, false)}
+                      >
+                        Mark unread
+                      </button>
+                      <button
+                        type="button"
+                        className="admin-btn admin-btn-ghost admin-btn-sm"
+                        onClick={() => remove(m)}
+                      >
+                        <Icons.IconTrash size={14} /> Delete
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/app/admin/components/Notifications.tsx b/app/admin/components/Notifications.tsx
new file mode 100644
index 0000000..bd829b4
--- /dev/null
+++ b/app/admin/components/Notifications.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+/**
+ * The admin's one place to say that something happened (#600).
+ *
+ * Replaces `alert()`, which blocked the page, could not be styled and said
+ * nothing to a screen reader beyond the dialog itself. A notification here has
+ * an explicit kind rather than one guessed from its wording, can be dismissed,
+ * and is announced: errors through an assertive live region, successes through
+ * a polite one. Successes leave on their own after a few seconds; errors stay
+ * until dismissed, because an error nobody saw did not get reported.
+ */
+
+import { createContext, useCallback, useContext, useRef, useState, type ReactNode } from 'react';
+import { IconX } from './Icons';
+
+export type NotificationKind = 'success' | 'error';
+
+/** One button on a notification, e.g. Undo after a removal. */
+export interface NotificationAction {
+  label: string;
+  run: () => void;
+}
+
+interface Notification {
+  id: number;
+  kind: NotificationKind;
+  message: string;
+  action?: NotificationAction;
+}
+
+type Notify = (kind: NotificationKind, message: string, action?: NotificationAction) => void;
+
+/**
+ * Outside the provider (a component rendered on its own in a test) notifying
+ * does nothing rather than throwing.
+ */
+const NotifyContext = createContext<Notify>(() => {});
+
+export function useNotify(): Notify {
+  return useContext(NotifyContext);
+}
+
+const SUCCESS_MS = 4000;
+const ACTION_MS = 8000;
+
+export function NotificationProvider({ children }: { children: ReactNode }) {
+  const [items, setItems] = useState<Notification[]>([]);
+  const nextId = useRef(1);
+
+  const dismiss = useCallback((id: number) => {
+    setItems((list) => list.filter((n) => n.id !== id));
+  }, []);
+
+  const notify = useCallback<Notify>(
+    (kind, message, action) => {
+      const id = nextId.current++;
+      setItems((list) => [...list, { id, kind, message, action }]);
+      // Longer with an action: there has to be time to reach the button.
+      if (kind === 'success') setTimeout(() => dismiss(id), action ? ACTION_MS : SUCCESS_MS);
+    },
+    [dismiss],
+  );
+
+  const render = (kind: NotificationKind) =>
+    items
+      .filter((n) => n.kind === kind)
+      .map((n) => (
+        <div key={n.id} className={`admin-notification admin-notification--${n.kind}`}>
+          <span className="admin-notification__text">{n.message}</span>
+          {n.action && (
+            <button
+              type="button"
+              className="admin-notification__action"
+              onClick={() => {
+                n.action!.run();
+                dismiss(n.id);
+              }}
+            >
+              {n.action.label}
+            </button>
+          )}
+          <button
+            type="button"
+            className="admin-notification__close"
+            onClick={() => dismiss(n.id)}
+            aria-label="Dismiss"
+          >
+            <IconX size={14} />
+          </button>
+        </div>
+      ));
+
+  return (
+    <NotifyContext.Provider value={notify}>
+      {children}
+      <div className="admin-notifications">
+        {/* Two regions, because politeness belongs to the region, not the message. */}
+        <div role="alert" aria-live="assertive" className="admin-notifications__group">
+          {render('error')}
+        </div>
+        <div role="status" aria-live="polite" className="admin-notifications__group">
+          {render('success')}
+        </div>
+      </div>
+    </NotifyContext.Provider>
+  );
+}
diff --git a/app/admin/components/PageBuilder.tsx b/app/admin/components/PageBuilder.tsx
index 6ed78fd..b9e39bb 100644
--- a/app/admin/components/PageBuilder.tsx
+++ b/app/admin/components/PageBuilder.tsx
@@ -11,25 +11,24 @@ import {
   DragEndEvent,
 } from '@dnd-kit/core';
 import {
-  arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
-  useSortable,
   verticalListSortingStrategy,
   horizontalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
 import AlbumPicker from './AlbumPicker';
+import { useContentRestored } from './contentRestored';
 import AssetPicker from './AssetPicker';
 import AssetOrderEditor from './AssetOrderEditor';
-import SaveBar from './SaveBar';
+import SaveBar, { type SaveStatus } from './SaveBar';
 import AlbumDrawer from './page-builder/AlbumDrawer';
 import { SortableAlbumCard } from './page-builder/AlbumCard';
 import SubpageDrawer from './page-builder/SubpageDrawer';
+import { SortableHeroTile, SortableSubpageRow } from './page-builder/SortableTiles';
 import { findAlbumAddress } from './page-builder/findAlbumAddress';
-import { parseAlbumEntries, serializeAlbumEntries } from './page-builder/albumEntries';
+import { parseGalleryYaml, serializeGallery, type GalleryState } from './page-builder/galleryYaml';
+import * as ops from './page-builder/galleryOps';
 import {
-  seedCoverGrid,
   type ActiveEditAlbumAddress,
   type AlbumEntry,
   type HeroPickerTarget,
@@ -44,164 +43,17 @@ import { useUnsavedGuard } from './useUnsavedGuard';
 import { useDraft } from './useDraft';
 import DraftNotice from './DraftNotice';
 import { reportIfSessionExpired } from './sessionExpiry';
-import {
-  IconCamera,
-  IconFolder,
-  IconGripVertical,
-  IconHome,
-  IconLock,
-  IconPencil,
-  IconPlus,
-  IconSearch,
-  IconX,
-} from './Icons';
-
-// ── Types ──────────────────────────────────────────────────────
-
-interface GalleryState {
-  hero: string[];
-  albums: AlbumEntry[];
-  subpages: Subpage[];
-}
-
-// ── Sortable Hero Tile ─────────────────────────────────────────
-
-function SortableHeroTile({
-  id,
-  index,
-  onRemove,
-}: {
-  id: string;
-  index: number;
-  onRemove: () => void;
-}) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: `hero-${index}`,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-    zIndex: isDragging ? 10 : undefined,
-  };
-
-  return (
-    <div ref={setNodeRef} style={style} className="hero-tile" {...attributes}>
-      <div className="hero-tile-drag" {...listeners} title="Drag to reorder">
-        <IconGripVertical size={18} className="svg-icon svg-drag" />
-      </div>
-      <img src={`/api/admin/thumbnail/${id}`} alt="" loading="lazy" />
-      <button className="hero-tile-remove" onClick={onRemove} title="Remove">
-        <IconX size={14} />
-      </button>
-      <span className="hero-tile-index">{index + 1}</span>
-    </div>
-  );
-}
-
-// ── Sortable Subpage Tile ──────────────────────────────────────
-
-function SortableSubpageTile({
-  sp,
-  spIndex,
-  isActive,
-  onClick,
-  getFirstThumb,
-}: {
-  sp: Subpage;
-  spIndex: number;
-  isActive: boolean;
-  onClick: () => void;
-  getFirstThumb: (sp: Subpage) => string | null;
-}) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: `subpage-${spIndex}`,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-    zIndex: isDragging ? 10 : undefined,
-  };
-
-  const totalAlbums =
-    sp.albums.length + (sp.sections?.reduce((sum, sec) => sum + sec.albums.length, 0) || 0);
-  const firstThumb = getFirstThumb(sp);
-  const slug = sp.name
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-|-$/g, '');
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={`subpage-tile ${isActive ? 'active' : ''}`}
-      onClick={onClick}
-      {...attributes}
-    >
-      <div className="subpage-tile-drag" {...listeners} title="Drag to reorder">
-        <IconGripVertical size={18} className="svg-icon svg-drag" />
-      </div>
-
-      {sp.enabled === false && (
-        <span
-          className="subpage-badge-protected"
-          style={{ background: '#e60012', color: '#fff' }}
-          title="Page is disabled"
-        >
-          Disabled
-        </span>
-      )}
-
-      {sp.hidden === true && sp.enabled !== false && (
-        <span
-          className="subpage-badge-protected"
-          title="Hidden from navigation, reachable by direct link"
-        >
-          Unlisted
-        </span>
-      )}
-
-      {sp.password && (
-        <span className="subpage-badge-protected" title="Password protected">
-          <IconLock size={12} /> Password
-        </span>
-      )}
-
-      <div className="subpage-tile-cover">
-        {firstThumb ? (
-          <img src={`/api/admin/thumbnail/${firstThumb}`} alt="" loading="lazy" />
-        ) : (
-          <div className="subpage-tile-placeholder">
-            <IconFolder />
-          </div>
-        )}
-        <div className="subpage-hover-overlay">
-          <span className="hover-action-btn">
-            <IconPencil size={14} /> Edit Page
-          </span>
-        </div>
-      </div>
-      <div className="subpage-tile-info">
-        <div className="subpage-tile-title-row">
-          <span className="subpage-tile-name">{sp.title || sp.name}</span>
-          <span className="subpage-tile-slug">/{slug}</span>
-        </div>
-        <span className="subpage-tile-meta">
-          <IconFolder /> {totalAlbums} album{totalAlbums !== 1 ? 's' : ''}
-        </span>
-      </div>
-    </div>
-  );
-}
-
-// ── Component ──────────────────────────────────────────────────
+import { IconCamera, IconHome, IconPlus, IconSearch } from './Icons';
+import { useNotify } from './Notifications';
 
 export default function PageBuilder() {
   const [gallery, setGallery] = useState<GalleryState>({ hero: [], albums: [], subpages: [] });
+  const notify = useNotify();
+  /** The state as last rendered, for Undo to check nothing changed since. */
+  const galleryRef = useRef(gallery);
+  useEffect(() => {
+    galleryRef.current = gallery;
+  }, [gallery]);
   const [immichAlbums, setImmichAlbums] = useState<ImmichAlbumInfo[]>([]);
   const [loading, setLoading] = useState(true);
   /**
@@ -212,8 +64,10 @@ export default function PageBuilder() {
   const [loadError, setLoadError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
   const [dirty, setDirty] = useState(false);
-  const [saveMessage, setSaveMessage] = useState('');
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>(null);
   const [expandedSubpage, setExpandedSubpage] = useState<number | null>(null);
+  /** What the panel shows while no subpage is selected (UX stage 4). */
+  const [overview, setOverview] = useState<'hero' | 'albums'>('hero');
   const [drawerMode, setDrawerMode] = useState<'edit' | 'preview'>('edit');
   const [pickerTarget, setPickerTarget] = useState<PickerTarget | null>(null);
   const [heroPickerTarget, setHeroPickerTarget] = useState<HeroPickerTarget | null>(null);
@@ -228,7 +82,7 @@ export default function PageBuilder() {
   // Keep the builder still behind either drawer. One combined lock rather than
   // one per drawer: the album drawer opens from inside the subpage drawer, and
   // a single condition avoids two locks racing over the same inline style.
-  useScrollLock(editingAlbumAddress !== null || expandedSubpage !== null);
+  useScrollLock(editingAlbumAddress !== null);
 
   // DnD sensors
   const sensors = useSensors(
@@ -242,6 +96,11 @@ export default function PageBuilder() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // A restored gallery.yaml replaces what this editor loaded.
+  useContentRestored(({ target }) => {
+    if (target === 'gallery') loadData();
+  });
+
   // ── Keyboard shortcut: ⌘+S / Ctrl+S ─────────────────────────
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
@@ -257,22 +116,6 @@ export default function PageBuilder() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dirty, saving, gallery]);
 
-  // ── Escape closes the subpage sheet — only when it is topmost ─
-  useEffect(() => {
-    if (expandedSubpage === null) return;
-    function handleEscape(e: KeyboardEvent) {
-      if (e.key !== 'Escape') return;
-      // Listbox preventDefaults its own Escape but does not stopPropagation —
-      // respect that so closing a popup never also closes the sheet.
-      if (e.defaultPrevented) return;
-      // A higher layer (album editor, pickers, order editor) owns the key.
-      if (editingAlbumAddress || pickerTarget || heroPickerTarget || orderEditorTarget) return;
-      setExpandedSubpage(null);
-    }
-    window.addEventListener('keydown', handleEscape);
-    return () => window.removeEventListener('keydown', handleEscape);
-  }, [expandedSubpage, editingAlbumAddress, pickerTarget, heroPickerTarget, orderEditorTarget]);
-
   useUnsavedGuard(dirty);
 
   // Unsaved edits survive leaving the builder — a tab link, back, Reload,
@@ -322,7 +165,9 @@ export default function PageBuilder() {
       serverState.current = parsed;
       const restored = draft.load(JSON.stringify(parsed));
       setGallery(restored ?? parsed);
-      if (restored) setDirty(true);
+      // Not merely "set when restored": on a reload after a backup restore the
+      // editor may have been dirty, and now shows the server state.
+      setDirty(restored !== null);
       openAlbumFromLink(restored ?? parsed);
 
       // A failed album list is survivable — it only empties the picker, and
@@ -368,71 +213,11 @@ export default function PageBuilder() {
     }
   }
 
-  function parseGalleryYaml(raw: Record<string, unknown>): GalleryState {
-    const hero = Array.isArray(raw.hero) ? raw.hero : raw.hero ? [raw.hero as string] : [];
-    const albums = parseAlbumEntries(
-      raw.albums as Array<string | Record<string, string>> | undefined,
-    );
-
-    let subpages: Subpage[] = [];
-    if (Array.isArray(raw.subpages)) {
-      subpages = (raw.subpages as Array<Record<string, unknown>>).map((sp) => ({
-        name: (sp.name as string) || '',
-        title: sp.title as string | undefined,
-        subtitle: sp.subtitle as string | undefined,
-        password: sp.password as string | undefined,
-        enabled: sp.enabled !== false,
-        hidden: sp.hidden === true,
-        location: sp.location as string | undefined,
-        essayText: sp.essayText as string | undefined,
-        essayFile: sp.essayFile as string | undefined,
-        albums: parseAlbumEntries(sp.albums as Array<string | Record<string, string>> | undefined),
-        sections: sp.sections
-          ? (sp.sections as Array<Record<string, unknown>>).map((sec) => ({
-              title: (sec.title as string) || '',
-              description: sec.description as string | undefined,
-              albums: parseAlbumEntries(sec.albums as Array<string | Record<string, string>>),
-            }))
-          : undefined,
-        grid: sp.grid as Subpage['grid'],
-        coverGrid:
-          (sp.coverGrid as Subpage['coverGrid']) ?? seedCoverGrid(sp.grid as Subpage['grid']),
-      }));
-    } else if (raw.subpages && typeof raw.subpages === 'object') {
-      subpages = Object.entries(raw.subpages as Record<string, unknown>).map(([name, value]) => {
-        if (Array.isArray(value)) {
-          return { name, albums: parseAlbumEntries(value), sections: undefined, enabled: true };
-        }
-        const sp = value as Record<string, unknown>;
-        return {
-          name,
-          title: sp.title as string | undefined,
-          subtitle: sp.subtitle as string | undefined,
-          password: sp.password as string | undefined,
-          enabled: sp.enabled !== false,
-          hidden: sp.hidden === true,
-          location: sp.location as string | undefined,
-          essayText: sp.essayText as string | undefined,
-          essayFile: sp.essayFile as string | undefined,
-          albums: parseAlbumEntries(
-            sp.albums as Array<string | Record<string, string>> | undefined,
-          ),
-          sections: undefined,
-          grid: sp.grid as Subpage['grid'],
-          coverGrid:
-            (sp.coverGrid as Subpage['coverGrid']) ?? seedCoverGrid(sp.grid as Subpage['grid']),
-        };
-      });
-    }
-
-    return { hero, albums, subpages };
-  }
-
   function discardDraft() {
     draft.discard();
     if (serverState.current) setGallery(serverState.current);
     setDirty(false);
-    setSaveMessage('');
+    setSaveStatus(null);
   }
 
   function restoreConflictingDraft() {
@@ -444,7 +229,7 @@ export default function PageBuilder() {
 
   const markDirty = useCallback(() => {
     setDirty(true);
-    setSaveMessage('');
+    setSaveStatus(null);
   }, []);
 
   // ── Save ──────────────────────────────────────────────────────
@@ -453,49 +238,9 @@ export default function PageBuilder() {
     if (loadError) return;
 
     setSaving(true);
-    setSaveMessage('');
+    setSaveStatus(null);
 
-    const yamlData: Record<string, unknown> = {};
-
-    if (gallery.hero.length > 0) {
-      yamlData.hero = gallery.hero;
-    }
-    if (gallery.albums.length > 0) {
-      yamlData.albums = serializeAlbumEntries(gallery.albums);
-    }
-    if (gallery.subpages.length > 0) {
-      yamlData.subpages = gallery.subpages.map((sp) => {
-        const entry: Record<string, unknown> = { name: sp.name };
-        if (sp.title) entry.title = sp.title;
-        if (sp.subtitle) entry.subtitle = sp.subtitle;
-        if (sp.password) entry.password = sp.password;
-        if (sp.enabled === false) entry.enabled = false;
-        if (sp.hidden === true) entry.hidden = true;
-        if (sp.essayText) entry.essayText = sp.essayText;
-        if (sp.essayFile) entry.essayFile = sp.essayFile;
-        if (sp.grid) entry.grid = sp.grid;
-        if (sp.coverGrid) entry.coverGrid = sp.coverGrid;
-        if (sp.location) entry.location = sp.location;
-
-        if (sp.sections && sp.sections.length > 0) {
-          entry.sections = sp.sections.map((sec) => {
-            const s: Record<string, unknown> = {
-              title: sec.title,
-              albums: serializeAlbumEntries(sec.albums),
-            };
-            if (sec.description) s.description = sec.description;
-            return s;
-          });
-          if (sp.albums.length > 0) {
-            entry.albums = serializeAlbumEntries(sp.albums);
-          }
-        } else {
-          entry.albums = serializeAlbumEntries(sp.albums);
-        }
-
-        return entry;
-      });
-    }
+    const yamlData = serializeGallery(gallery);
 
     try {
       const res = await fetch('/api/admin/gallery', {
@@ -507,72 +252,54 @@ export default function PageBuilder() {
       if (res.ok) {
         const data = await res.json();
         // Fingerprint what the next load will see, the way it will see it: the
-        // file is exactly `yamlData`, read back through the same parser. The
-        // editor's own state can differ in shape (an `undefined` here, a
-        // default there) and would make every later draft look outdated.
-        const asLoaded = parseGalleryYaml(JSON.parse(JSON.stringify(yamlData)));
+        // file as written, read back through the same parser. The editor's own
+        // state can differ in shape (an `undefined` here, a default there) and
+        // would make every later draft look outdated.
+        //
+        // "As written" is the server's copy, not `yamlData`: passwords are
+        // hashed on the way to disk (#690). Fingerprinting the plaintext would
+        // make the next draft look like a conflicting edit from elsewhere.
+        const written = (data.gallery ?? yamlData) as Record<string, unknown>;
+        const asLoaded = parseGalleryYaml(JSON.parse(JSON.stringify(written)));
         serverState.current = asLoaded;
         draft.saved(JSON.stringify(asLoaded));
+        // Show the hashes, so a new password reads "Protected" right away.
+        if (JSON.stringify(written) !== JSON.stringify(yamlData)) setGallery(asLoaded);
         setDirty(false);
-        setSaveMessage(data.message || 'Saved successfully!');
-        setTimeout(() => setSaveMessage(''), 5000);
+        setSaveStatus({ kind: 'success', message: data.message || 'Saved successfully!' });
+        setTimeout(() => setSaveStatus(null), 5000);
       } else if (!reportIfSessionExpired(res)) {
         const err = await res.json();
-        setSaveMessage(`Error: ${err.error}`);
+        setSaveStatus({ kind: 'error', message: `Error: ${err.error}` });
       }
     } catch {
-      setSaveMessage('Error: Failed to save');
+      setSaveStatus({ kind: 'error', message: 'Error: Failed to save' });
     } finally {
       setSaving(false);
     }
   }
 
-  // ── Hero Picker ──────────────────────────────────────────────
-  function handleHeroSelect(assetId: string) {
-    setGallery((g) => ({ ...g, hero: [...g.hero, assetId] }));
-    setHeroPickerTarget(null);
+  /** Apply one edit from galleryOps and mark the form dirty. */
+  function edit(op: (g: GalleryState) => GalleryState) {
+    setGallery(op);
     markDirty();
   }
 
-  // ── Album Picker Handlers ────────────────────────────────────
+  // ── Pickers ──────────────────────────────────────────────────
+  function handleHeroSelect(assetId: string) {
+    edit((g) => ops.addHero(g, assetId));
+    setHeroPickerTarget(null);
+  }
+
   function handlePickAlbum(albumId: string) {
     if (!pickerTarget) return;
-
-    const entry: AlbumEntry = { id: albumId };
-
-    if (pickerTarget.type === 'standalone') {
-      setGallery((g) => ({ ...g, albums: [...g.albums, entry] }));
-    } else if (pickerTarget.type === 'subpage' && pickerTarget.subpageIndex != null) {
-      setGallery((g) => {
-        const subpages = [...g.subpages];
-        const sp = { ...subpages[pickerTarget.subpageIndex!] };
-        sp.albums = [...sp.albums, entry];
-        subpages[pickerTarget.subpageIndex!] = sp;
-        return { ...g, subpages };
-      });
-    } else if (
-      pickerTarget.type === 'section' &&
-      pickerTarget.subpageIndex != null &&
-      pickerTarget.sectionIndex != null
-    ) {
-      setGallery((g) => {
-        const subpages = [...g.subpages];
-        const sp = { ...subpages[pickerTarget.subpageIndex!] };
-        const sections = [...(sp.sections || [])];
-        const sec = { ...sections[pickerTarget.sectionIndex!] };
-        sec.albums = [...sec.albums, entry];
-        sections[pickerTarget.sectionIndex!] = sec;
-        sp.sections = sections;
-        subpages[pickerTarget.subpageIndex!] = sp;
-        return { ...g, subpages };
-      });
-    }
-
+    const target = pickerTarget;
+    edit((g) => ops.addAlbum(g, target, { id: albumId }));
     setPickerTarget(null);
-    markDirty();
   }
 
   // ── Drag & Drop Handlers ─────────────────────────────────────
+  // dnd-kit reports item ids; these map them back to positions in the list.
   function handleHeroDragEnd(event: DragEndEvent) {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
@@ -580,10 +307,7 @@ export default function PageBuilder() {
     const oldIndex = gallery.hero.findIndex((_, i) => `hero-${i}` === active.id);
     const newIndex = gallery.hero.findIndex((_, i) => `hero-${i}` === over.id);
 
-    if (oldIndex !== -1 && newIndex !== -1) {
-      setGallery((g) => ({ ...g, hero: arrayMove(g.hero, oldIndex, newIndex) }));
-      markDirty();
-    }
+    if (oldIndex !== -1 && newIndex !== -1) edit((g) => ops.moveHero(g, oldIndex, newIndex));
   }
 
   function handleAlbumDragEnd(event: DragEndEvent) {
@@ -594,8 +318,7 @@ export default function PageBuilder() {
     const newIndex = gallery.albums.findIndex((a, i) => `album-${a.id}-${i}` === over.id);
 
     if (oldIndex !== -1 && newIndex !== -1) {
-      setGallery((g) => ({ ...g, albums: arrayMove(g.albums, oldIndex, newIndex) }));
-      markDirty();
+      edit((g) => ops.moveAlbum(g, { type: 'standalone' }, oldIndex, newIndex));
     }
   }
 
@@ -607,15 +330,8 @@ export default function PageBuilder() {
     const newIndex = gallery.subpages.findIndex((_, i) => `subpage-${i}` === over.id);
 
     if (oldIndex !== -1 && newIndex !== -1) {
-      setGallery((g) => ({ ...g, subpages: arrayMove(g.subpages, oldIndex, newIndex) }));
-      if (expandedSubpage === oldIndex) setExpandedSubpage(newIndex);
-      else if (expandedSubpage !== null) {
-        if (oldIndex < expandedSubpage && newIndex >= expandedSubpage)
-          setExpandedSubpage(expandedSubpage - 1);
-        else if (oldIndex > expandedSubpage && newIndex <= expandedSubpage)
-          setExpandedSubpage(expandedSubpage + 1);
-      }
-      markDirty();
+      edit((g) => ops.moveSubpage(g, oldIndex, newIndex));
+      setExpandedSubpage(ops.followMovedIndex(expandedSubpage, oldIndex, newIndex));
     }
   }
 
@@ -629,142 +345,72 @@ export default function PageBuilder() {
       const newIndex = sp.albums.findIndex((a, i) => `album-${a.id}-${i}` === over.id);
 
       if (oldIndex !== -1 && newIndex !== -1) {
-        setGallery((g) => {
-          const subpages = [...g.subpages];
-          const sp2 = { ...subpages[spIndex] };
-          sp2.albums = arrayMove(sp2.albums, oldIndex, newIndex);
-          subpages[spIndex] = sp2;
-          return { ...g, subpages };
-        });
-        markDirty();
+        edit((g) =>
+          ops.moveAlbum(g, { type: 'subpage', subpageIndex: spIndex }, oldIndex, newIndex),
+        );
       }
     };
   }
 
-  // ── Subpage Management ────────────────────────────────────────
-  function addSubpage() {
-    setGallery((g) => ({
-      ...g,
-      subpages: [
-        ...g.subpages,
-        { name: `New Page ${g.subpages.length + 1}`, albums: [], sections: undefined },
-      ],
-    }));
-    markDirty();
-  }
+  // ── Subpages and sections ────────────────────────────────────
+  const addSubpage = () => edit(ops.addSubpage);
 
-  /** The "03 — Collection" number the page renders: counted over enabled subpages only. */
-  function enabledPosition(index: number): number | undefined {
-    const sp = gallery.subpages[index];
-    if (!sp || sp.enabled === false) return undefined;
-    return gallery.subpages.slice(0, index).filter((s) => s.enabled !== false).length + 1;
-  }
+  const removeSubpage = (index: number) =>
+    removeWithUndo('Page removed.', (g) => ops.removeSubpage(g, index));
 
-  function removeSubpage(index: number) {
-    if (!confirm('Remove this subpage?')) return;
-    setGallery((g) => ({
-      ...g,
-      subpages: g.subpages.filter((_, i) => i !== index),
-    }));
-    markDirty();
-  }
+  const updateSubpage = (index: number, updates: Partial<Subpage>) =>
+    edit((g) => ops.updateSubpage(g, index, updates));
 
-  function updateSubpage(index: number, updates: Partial<Subpage>) {
-    setGallery((g) => {
-      const subpages = [...g.subpages];
-      subpages[index] = { ...subpages[index], ...updates };
-      return { ...g, subpages };
+  const addSection = (subpageIndex: number) => edit((g) => ops.addSection(g, subpageIndex));
+
+  const removeSection = (subpageIndex: number, sectionIndex: number) =>
+    edit((g) => ops.removeSection(g, subpageIndex, sectionIndex));
+
+  const updateSection = (subpageIndex: number, sectionIndex: number, updates: Partial<Section>) =>
+    edit((g) => ops.updateSection(g, subpageIndex, sectionIndex, updates));
+
+  // ── Removal ──────────────────────────────────────────────────
+  // Removing only changes unsaved state, so it happens at once and offers Undo
+  // instead of asking first (#694 §3). It used to be a confirm() before every
+  // click, which is how the builder ended up asking about things nobody could
+  // lose: nothing is written until Save.
+  function removeWithUndo(message: string, op: (g: GalleryState) => GalleryState) {
+    const before = gallery;
+    const after = op(before);
+    if (after === before) return;
+    edit(() => after);
+    notify('success', message, {
+      label: 'Undo',
+      run: () => {
+        // Only while nothing else changed since: restoring `before` on top of
+        // later edits would silently throw those away.
+        if (galleryRef.current !== after) {
+          notify(
+            'error',
+            'Could not undo: the page structure changed since. Nothing is saved yet.',
+          );
+          return;
+        }
+        edit(() => before);
+      },
     });
-    markDirty();
   }
 
-  // ── Section Management ────────────────────────────────────────
-  function addSection(subpageIndex: number) {
-    setGallery((g) => {
-      const subpages = [...g.subpages];
-      const sp = { ...subpages[subpageIndex] };
-      sp.sections = [...(sp.sections || []), { title: 'New Section', albums: [] }];
-      subpages[subpageIndex] = sp;
-      return { ...g, subpages };
-    });
-    markDirty();
-  }
+  const removeStandaloneAlbum = (index: number) =>
+    removeWithUndo('Album removed.', (g) => ops.removeAlbum(g, { type: 'standalone' }, index));
 
-  function removeSection(subpageIndex: number, sectionIndex: number) {
-    setGallery((g) => {
-      const subpages = [...g.subpages];
-      const sp = { ...subpages[subpageIndex] };
-      sp.sections = (sp.sections || []).filter((_, i) => i !== sectionIndex);
-      subpages[subpageIndex] = sp;
-      return { ...g, subpages };
-    });
-    markDirty();
-  }
+  const removeSubpageAlbum = (subpageIndex: number, albumIndex: number) =>
+    removeWithUndo('Album removed from the page.', (g) =>
+      ops.removeAlbum(g, { type: 'subpage', subpageIndex }, albumIndex),
+    );
 
-  function updateSection(subpageIndex: number, sectionIndex: number, updates: Partial<Section>) {
-    setGallery((g) => {
-      const subpages = [...g.subpages];
-      const sp = { ...subpages[subpageIndex] };
-      const sections = [...(sp.sections || [])];
-      sections[sectionIndex] = { ...sections[sectionIndex], ...updates };
-      sp.sections = sections;
-      subpages[subpageIndex] = sp;
-      return { ...g, subpages };
-    });
-    markDirty();
-  }
+  const removeSectionAlbum = (subpageIndex: number, sectionIndex: number, albumIndex: number) =>
+    removeWithUndo('Album removed from the section.', (g) =>
+      ops.removeAlbum(g, { type: 'section', subpageIndex, sectionIndex }, albumIndex),
+    );
 
-  // ── Album Removal ────────────────────────────────────────────
-  // Confirmed like removeSubpage: an album entry carries its grid overrides,
-  // cover asset and manual assetOrder with it, there is no undo stack in the
-  // builder, and the only escape from an accidental click used to be
-  // reloading the page — which discards every other unsaved edit too (#597).
-  function removeStandaloneAlbum(index: number) {
-    if (!confirm('Remove this album from the gallery?')) return;
-    setGallery((g) => ({
-      ...g,
-      albums: g.albums.filter((_, i) => i !== index),
-    }));
-    markDirty();
-  }
-
-  function removeSubpageAlbum(subpageIndex: number, albumIndex: number) {
-    if (!confirm('Remove this album from the subpage?')) return;
-    setGallery((g) => {
-      const subpages = [...g.subpages];
-      const sp = { ...subpages[subpageIndex] };
-      sp.albums = sp.albums.filter((_, i) => i !== albumIndex);
-      subpages[subpageIndex] = sp;
-      return { ...g, subpages };
-    });
-    markDirty();
-  }
-
-  function removeSectionAlbum(subpageIndex: number, sectionIndex: number, albumIndex: number) {
-    if (!confirm('Remove this album from the section?')) return;
-    setGallery((g) => {
-      const subpages = [...g.subpages];
-      const sp = { ...subpages[subpageIndex] };
-      const sections = [...(sp.sections || [])];
-      const sec = { ...sections[sectionIndex] };
-      sec.albums = sec.albums.filter((_, i) => i !== albumIndex);
-      sections[sectionIndex] = sec;
-      sp.sections = sections;
-      subpages[subpageIndex] = sp;
-      return { ...g, subpages };
-    });
-    markDirty();
-  }
-
-  // ── Hero Management ──────────────────────────────────────────
-  function removeHero(index: number) {
-    if (!confirm('Remove this photo from the home page hero?')) return;
-    setGallery((g) => ({
-      ...g,
-      hero: g.hero.filter((_, i) => i !== index),
-    }));
-    markDirty();
-  }
+  const removeHero = (index: number) =>
+    removeWithUndo('Hero photo removed.', (g) => ops.removeHero(g, index));
 
   // ── Helpers ──────────────────────────────────────────────────
   function getAlbumName(id: string): string {
@@ -798,6 +444,28 @@ export default function PageBuilder() {
     return null;
   }
 
+  /** The album an open drawer edits, with the callbacks the drawer needs. */
+  function getEditingAlbumInfo(addr: ActiveEditAlbumAddress) {
+    const album = ops.albumsAt(gallery, addr)?.[addr.albumIndex];
+    if (!album) return null;
+    return {
+      album,
+      name: getAlbumName(album.id),
+      count: getAlbumCount(album.id),
+      thumbnailId: getAlbumThumbnailId(album.id),
+      onUpdate: (updates: Partial<AlbumEntry>) =>
+        edit((g) => ops.updateAlbum(g, addr, addr.albumIndex, updates)),
+      onRemove: () => {
+        if (addr.type === 'standalone') removeStandaloneAlbum(addr.albumIndex);
+        else if (addr.type === 'subpage') removeSubpageAlbum(addr.subpageIndex!, addr.albumIndex);
+        else removeSectionAlbum(addr.subpageIndex!, addr.sectionIndex!, addr.albumIndex);
+        // The drawer is addressed by index and would otherwise show whichever
+        // album slid into this slot.
+        setEditingAlbumAddress(null);
+      },
+    };
+  }
+
   // ── Render ───────────────────────────────────────────────────
   if (loading) {
     return (
@@ -875,7 +543,7 @@ export default function PageBuilder() {
       <SaveBar
         dirty={dirty}
         saving={saving}
-        saveMessage={saveMessage}
+        status={saveStatus}
         onSave={handleSave}
         label="Save Changes"
         showPreview
@@ -889,221 +557,280 @@ export default function PageBuilder() {
         onDismiss={draft.dismiss}
       />
 
-      {/* Search Bar */}
-      <div className="builder-search-container">
-        <div className="builder-search-wrapper">
-          <span className="builder-search-icon">
-            <IconSearch size={14} />
-          </span>
-          <input
-            type="text"
-            className="builder-search-input"
-            placeholder="Search albums or subpages..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-          {searchQuery && (
+      <div className="pb-split">
+        {/* Structure: everything on the site, always visible (UX stage 4). */}
+        <aside className="pb-tree" aria-label="Page structure">
+          {/* Search Bar */}
+          <div className="builder-search-container">
+            <div className="builder-search-wrapper">
+              <span className="builder-search-icon">
+                <IconSearch size={14} />
+              </span>
+              <input
+                type="search"
+                aria-label="Search albums or subpages"
+                className="builder-search-input"
+                placeholder="Search albums or subpages..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+              {searchQuery && (
+                <button
+                  className="builder-search-clear"
+                  onClick={() => setSearchQuery('')}
+                  title="Clear search"
+                >
+                  ×
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="pb-group">
+            <div className="pb-group-head">
+              <span>Home page</span>
+            </div>
             <button
-              className="builder-search-clear"
-              onClick={() => setSearchQuery('')}
-              title="Clear search"
+              type="button"
+              className={`pb-row-main pb-row-solo ${expandedSubpage === null && overview === 'hero' ? 'active' : ''}`}
+              onClick={() => {
+                setExpandedSubpage(null);
+                setOverview('hero');
+              }}
             >
-              ×
+              <span className="pb-row-thumb">
+                {gallery.hero[0] ? (
+                  <img src={`/api/admin/thumbnail/${gallery.hero[0]}`} alt="" loading="lazy" />
+                ) : (
+                  <IconHome size={14} />
+                )}
+              </span>
+              <span className="pb-row-name">Hero photos</span>
+              <span className="pb-row-count">{gallery.hero.length}</span>
             </button>
+          </div>
+
+          <div className="pb-group">
+            <div className="pb-group-head">
+              <span>Subpages</span>
+              <span>
+                {gallery.subpages.filter((sp) => sp.enabled !== false).length} of{' '}
+                {gallery.subpages.length} live
+              </span>
+            </div>
+            {gallery.subpages.length > 0 && filteredSubpages.length === 0 && (
+              <p className="empty-hint">No matching subpages.</p>
+            )}
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleSubpageDragEnd}
+            >
+              <SortableContext
+                items={filteredSubpages.map(({ index }) => `subpage-${index}`)}
+                strategy={verticalListSortingStrategy}
+              >
+                {filteredSubpages.map(({ sp, index }) => (
+                  <SortableSubpageRow
+                    key={`subpage-${index}`}
+                    sp={sp}
+                    spIndex={index}
+                    isActive={expandedSubpage === index}
+                    onClick={() => setExpandedSubpage(index)}
+                    getFirstThumb={getFirstSubpageThumb}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
+            <button
+              type="button"
+              className="pb-add"
+              onClick={() => {
+                addSubpage();
+                setExpandedSubpage(gallery.subpages.length);
+              }}
+            >
+              <IconPlus size={13} /> New subpage
+            </button>
+          </div>
+
+          <div className="pb-group">
+            <div className="pb-group-head">
+              <span>Standalone albums</span>
+            </div>
+            <button
+              type="button"
+              className={`pb-row-main pb-row-solo ${expandedSubpage === null && overview === 'albums' ? 'active' : ''}`}
+              onClick={() => {
+                setExpandedSubpage(null);
+                setOverview('albums');
+              }}
+            >
+              <span className="pb-row-thumb">
+                <IconCamera size={14} />
+              </span>
+              <span className="pb-row-name">On the home page</span>
+              <span className="pb-row-count">{gallery.albums.length}</span>
+            </button>
+          </div>
+        </aside>
+
+        {/* The selected entry, edited in place instead of in an overlay. */}
+        <div className="pb-panel">
+          {expandedSubpage !== null && gallery.subpages[expandedSubpage] ? (
+            <>
+              <SubpageDrawer
+                sp={gallery.subpages[expandedSubpage]}
+                spIndex={expandedSubpage}
+                kickerIndex={ops.enabledPosition(gallery, expandedSubpage)}
+                immichAlbums={immichAlbums}
+                sensors={sensors}
+                drawerMode={drawerMode}
+                onDrawerModeChange={setDrawerMode}
+                onClose={() => {
+                  setExpandedSubpage(null);
+                  setLinkedAlbumId(null);
+                }}
+                updateSubpage={updateSubpage}
+                removeSubpage={removeSubpage}
+                addSection={addSection}
+                removeSection={removeSection}
+                updateSection={updateSection}
+                removeSubpageAlbum={removeSubpageAlbum}
+                removeSectionAlbum={removeSectionAlbum}
+                onAlbumDragEnd={handleSubpageAlbumDragEnd(expandedSubpage)}
+                onPickAlbum={setPickerTarget}
+                onEditAlbum={setEditingAlbumAddress}
+                onPickHero={setHeroPickerTarget}
+                getAlbumName={getAlbumName}
+                getAlbumCount={getAlbumCount}
+                getAlbumThumbnailId={getAlbumThumbnailId}
+                highlightedAlbumId={linkedAlbumId}
+                inline
+              />
+            </>
+          ) : overview === 'albums' ? (
+            <>
+              {/* Standalone Albums */}
+              <section className="builder-section">
+                <div className="builder-section-header">
+                  <h2>
+                    <IconCamera />
+                    Standalone Albums
+                  </h2>
+                  <button
+                    className="admin-btn admin-btn-sm"
+                    onClick={() => setPickerTarget({ type: 'standalone' })}
+                  >
+                    + Add Album
+                  </button>
+                </div>
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleAlbumDragEnd}
+                >
+                  <SortableContext
+                    items={filteredAlbums.map((a) => {
+                      const originalIndex = gallery.albums.findIndex((x) => x.id === a.id);
+                      return `album-${a.id}-${originalIndex}`;
+                    })}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    <div className="album-list">
+                      {filteredAlbums.length === 0 && (
+                        <p className="empty-hint">
+                          {searchQuery
+                            ? 'No matching standalone albums found.'
+                            : 'No standalone albums. These show directly on the homepage.'}
+                        </p>
+                      )}
+                      {filteredAlbums.map((album) => {
+                        const originalIndex = gallery.albums.findIndex((a) => a.id === album.id);
+                        return (
+                          <SortableAlbumCard
+                            key={`${album.id}-${originalIndex}`}
+                            album={album}
+                            index={originalIndex}
+                            name={getAlbumName(album.id)}
+                            count={getAlbumCount(album.id)}
+                            thumbnailId={getAlbumThumbnailId(album.id)}
+                            onRemove={() => removeStandaloneAlbum(originalIndex)}
+                            onEdit={() =>
+                              setEditingAlbumAddress({
+                                type: 'standalone',
+                                albumIndex: originalIndex,
+                              })
+                            }
+                          />
+                        );
+                      })}
+                    </div>
+                  </SortableContext>
+                </DndContext>
+              </section>
+            </>
+          ) : (
+            <>
+              {/* Hero Section */}
+              <section className="builder-section">
+                <div className="builder-section-header">
+                  <h2>
+                    <IconHome /> Homepage Hero
+                  </h2>
+                  <button
+                    className="admin-btn admin-btn-sm"
+                    onClick={() =>
+                      setHeroPickerTarget({
+                        onSelect: handleHeroSelect,
+                        currentAssetIds: gallery.hero,
+                        title: 'Pick Hero Image for Homepage',
+                      })
+                    }
+                  >
+                    <IconPlus size={14} /> Add Hero
+                  </button>
+                </div>
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleHeroDragEnd}
+                >
+                  <SortableContext
+                    items={gallery.hero.map((_, i) => `hero-${i}`)}
+                    strategy={horizontalListSortingStrategy}
+                  >
+                    <div className="hero-grid">
+                      {gallery.hero.length === 0 && (
+                        <p className="empty-hint">
+                          No hero images configured. Add photos to show a hero carousel on the
+                          homepage.
+                        </p>
+                      )}
+                      {gallery.hero.map((id, i) => (
+                        <SortableHeroTile
+                          key={`hero-${i}`}
+                          id={id}
+                          index={i}
+                          onRemove={() => removeHero(i)}
+                        />
+                      ))}
+                    </div>
+                  </SortableContext>
+                </DndContext>
+              </section>
+            </>
           )}
         </div>
       </div>
 
-      {/* Hero Section */}
-      <section className="builder-section">
-        <div className="builder-section-header">
-          <h2>
-            <IconHome /> Homepage Hero
-          </h2>
-          <button
-            className="admin-btn admin-btn-sm"
-            onClick={() =>
-              setHeroPickerTarget({
-                onSelect: handleHeroSelect,
-                currentAssetIds: gallery.hero,
-                title: 'Pick Hero Image for Homepage',
-              })
-            }
-          >
-            <IconPlus size={14} /> Add Hero
-          </button>
-        </div>
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleHeroDragEnd}
-        >
-          <SortableContext
-            items={gallery.hero.map((_, i) => `hero-${i}`)}
-            strategy={horizontalListSortingStrategy}
-          >
-            <div className="hero-grid">
-              {gallery.hero.length === 0 && (
-                <p className="empty-hint">
-                  No hero images configured. Add photos to show a hero carousel on the homepage.
-                </p>
-              )}
-              {gallery.hero.map((id, i) => (
-                <SortableHeroTile
-                  key={`hero-${i}`}
-                  id={id}
-                  index={i}
-                  onRemove={() => removeHero(i)}
-                />
-              ))}
-            </div>
-          </SortableContext>
-        </DndContext>
-      </section>
-
-      {/* Standalone Albums */}
-      <section className="builder-section">
-        <div className="builder-section-header">
-          <h2>
-            <IconCamera />
-            Standalone Albums
-          </h2>
-          <button
-            className="admin-btn admin-btn-sm"
-            onClick={() => setPickerTarget({ type: 'standalone' })}
-          >
-            + Add Album
-          </button>
-        </div>
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleAlbumDragEnd}
-        >
-          <SortableContext
-            items={filteredAlbums.map((a) => {
-              const originalIndex = gallery.albums.findIndex((x) => x.id === a.id);
-              return `album-${a.id}-${originalIndex}`;
-            })}
-            strategy={verticalListSortingStrategy}
-          >
-            <div className="album-list">
-              {filteredAlbums.length === 0 && (
-                <p className="empty-hint">
-                  {searchQuery
-                    ? 'No matching standalone albums found.'
-                    : 'No standalone albums. These show directly on the homepage.'}
-                </p>
-              )}
-              {filteredAlbums.map((album) => {
-                const originalIndex = gallery.albums.findIndex((a) => a.id === album.id);
-                return (
-                  <SortableAlbumCard
-                    key={`${album.id}-${originalIndex}`}
-                    album={album}
-                    index={originalIndex}
-                    name={getAlbumName(album.id)}
-                    count={getAlbumCount(album.id)}
-                    thumbnailId={getAlbumThumbnailId(album.id)}
-                    onRemove={() => removeStandaloneAlbum(originalIndex)}
-                    onEdit={() =>
-                      setEditingAlbumAddress({ type: 'standalone', albumIndex: originalIndex })
-                    }
-                  />
-                );
-              })}
-            </div>
-          </SortableContext>
-        </DndContext>
-      </section>
-
-      {/* Subpages */}
-      <section className="builder-section">
-        <div className="builder-section-header">
-          <h2>
-            <IconFolder />
-            Subpages
-          </h2>
-          <button className="admin-btn admin-btn-sm" onClick={addSubpage}>
-            + New Subpage
-          </button>
-        </div>
-
-        {gallery.subpages.length === 0 && (
-          <p className="empty-hint">
-            No subpages. Create one to group albums under a custom URL path.
-          </p>
-        )}
-
-        {gallery.subpages.length > 0 && filteredSubpages.length === 0 && (
-          <p className="empty-hint">No matching subpages found.</p>
-        )}
-
-        {/* Collapsed overview grid with DnD */}
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleSubpageDragEnd}
-        >
-          <SortableContext
-            items={filteredSubpages.map(({ index }) => `subpage-${index}`)}
-            strategy={horizontalListSortingStrategy}
-          >
-            <div className="subpage-tiles">
-              {filteredSubpages.map(({ sp, index }) => (
-                <SortableSubpageTile
-                  key={`subpage-${index}`}
-                  sp={sp}
-                  spIndex={index}
-                  isActive={expandedSubpage === index}
-                  onClick={() => setExpandedSubpage(expandedSubpage === index ? null : index)}
-                  getFirstThumb={getFirstSubpageThumb}
-                />
-              ))}
-            </div>
-          </SortableContext>
-        </DndContext>
-
-        {/* Expanded subpage detail (Slide-Over Drawer) */}
-        {expandedSubpage !== null && gallery.subpages[expandedSubpage] && (
-          <SubpageDrawer
-            sp={gallery.subpages[expandedSubpage]}
-            spIndex={expandedSubpage}
-            kickerIndex={enabledPosition(expandedSubpage)}
-            immichAlbums={immichAlbums}
-            sensors={sensors}
-            drawerMode={drawerMode}
-            onDrawerModeChange={setDrawerMode}
-            onClose={() => {
-              setExpandedSubpage(null);
-              setLinkedAlbumId(null);
-            }}
-            updateSubpage={updateSubpage}
-            removeSubpage={removeSubpage}
-            addSection={addSection}
-            removeSection={removeSection}
-            updateSection={updateSection}
-            removeSubpageAlbum={removeSubpageAlbum}
-            removeSectionAlbum={removeSectionAlbum}
-            onAlbumDragEnd={handleSubpageAlbumDragEnd(expandedSubpage)}
-            onPickAlbum={setPickerTarget}
-            onEditAlbum={setEditingAlbumAddress}
-            onPickHero={setHeroPickerTarget}
-            getAlbumName={getAlbumName}
-            getAlbumCount={getAlbumCount}
-            getAlbumThumbnailId={getAlbumThumbnailId}
-            highlightedAlbumId={linkedAlbumId}
-          />
-        )}
-      </section>
-
       {/* Album Picker Modal */}
       {pickerTarget && (
         <AlbumPicker
           albums={immichAlbums}
           onSelect={handlePickAlbum}
           onClose={() => setPickerTarget(null)}
-          usedAlbumIds={getAllUsedAlbumIds()}
+          usedAlbumIds={ops.usedAlbumIds(gallery)}
         />
       )}
 
@@ -1146,96 +873,4 @@ export default function PageBuilder() {
       )}
     </div>
   );
-
-  function getEditingAlbumInfo(addr: ActiveEditAlbumAddress) {
-    let album: AlbumEntry;
-    let name: string;
-    let count: number;
-    let thumbnailId: string | null;
-    let onUpdate: (updates: Partial<AlbumEntry>) => void;
-    let onRemove: () => void;
-
-    if (addr.type === 'standalone') {
-      album = gallery.albums[addr.albumIndex];
-      if (!album) return null;
-      name = getAlbumName(album.id);
-      count = getAlbumCount(album.id);
-      thumbnailId = getAlbumThumbnailId(album.id);
-      onUpdate = (updates) => {
-        setGallery((g) => {
-          const albums = [...g.albums];
-          albums[addr.albumIndex] = { ...albums[addr.albumIndex], ...updates };
-          return { ...g, albums };
-        });
-        markDirty();
-      };
-      onRemove = () => {
-        removeStandaloneAlbum(addr.albumIndex);
-      };
-    } else if (addr.type === 'subpage') {
-      const sp = gallery.subpages[addr.subpageIndex!];
-      if (!sp) return null;
-      album = sp.albums[addr.albumIndex];
-      if (!album) return null;
-      name = getAlbumName(album.id);
-      count = getAlbumCount(album.id);
-      thumbnailId = getAlbumThumbnailId(album.id);
-      onUpdate = (updates) => {
-        setGallery((g) => {
-          const subpages = [...g.subpages];
-          const sp2 = { ...subpages[addr.subpageIndex!] };
-          const albums = [...sp2.albums];
-          albums[addr.albumIndex] = { ...albums[addr.albumIndex], ...updates };
-          sp2.albums = albums;
-          subpages[addr.subpageIndex!] = sp2;
-          return { ...g, subpages };
-        });
-        markDirty();
-      };
-      onRemove = () => {
-        removeSubpageAlbum(addr.subpageIndex!, addr.albumIndex);
-      };
-    } else {
-      const sp = gallery.subpages[addr.subpageIndex!];
-      if (!sp) return null;
-      const sec = sp.sections?.[addr.sectionIndex!];
-      if (!sec) return null;
-      album = sec.albums[addr.albumIndex];
-      if (!album) return null;
-      name = getAlbumName(album.id);
-      count = getAlbumCount(album.id);
-      thumbnailId = getAlbumThumbnailId(album.id);
-      onUpdate = (updates) => {
-        setGallery((g) => {
-          const subpages = [...g.subpages];
-          const sp2 = { ...subpages[addr.subpageIndex!] };
-          const sections = [...(sp2.sections || [])];
-          const sec2 = { ...sections[addr.sectionIndex!] };
-          const albums = [...sec2.albums];
-          albums[addr.albumIndex] = { ...albums[addr.albumIndex], ...updates };
-          sec2.albums = albums;
-          sections[addr.sectionIndex!] = sec2;
-          sp2.sections = sections;
-          subpages[addr.subpageIndex!] = sp2;
-          return { ...g, subpages };
-        });
-        markDirty();
-      };
-      onRemove = () => {
-        removeSectionAlbum(addr.subpageIndex!, addr.sectionIndex!, addr.albumIndex);
-      };
-    }
-
-    return { album, name, count, thumbnailId, onUpdate, onRemove };
-  }
-
-  function getAllUsedAlbumIds(): Set<string> {
-    const ids = new Set<string>();
-    gallery.albums.forEach((a) => ids.add(a.id));
-    gallery.subpages.forEach((sp) => {
-      sp.albums.forEach((a) => ids.add(a.id));
-      sp.sections?.forEach((sec) => sec.albums.forEach((a) => ids.add(a.id)));
-    });
-    return ids;
-  }
 }
diff --git a/app/admin/components/PageHeader.tsx b/app/admin/components/PageHeader.tsx
new file mode 100644
index 0000000..2f6a047
--- /dev/null
+++ b/app/admin/components/PageHeader.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+
+/**
+ * The one screen header (UX stage 2, docs/admin-ux-concept.md): kicker with
+ * the site's square marker, title, one sentence, actions on the right. Every
+ * screen used to build its own, each with a different size and position.
+ */
+export default function PageHeader({
+  kicker,
+  title,
+  description,
+  actions,
+}: {
+  kicker: string;
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <header className="page-header">
+      <div className="page-header-text">
+        <p className="page-header-kicker">{kicker}</p>
+        <h1 className="page-header-title">{title}</h1>
+        {description && <p className="page-header-sub">{description}</p>}
+      </div>
+      {actions && <div className="page-header-actions">{actions}</div>}
+    </header>
+  );
+}
diff --git a/app/admin/components/PrivacyEditor.tsx b/app/admin/components/PrivacyEditor.tsx
new file mode 100644
index 0000000..febfd0d
--- /dev/null
+++ b/app/admin/components/PrivacyEditor.tsx
@@ -0,0 +1,168 @@
+'use client';
+
+/**
+ * Editor for content/privacy.md (#699), in Settings → Legal.
+ *
+ * Folio writes no legal text. Next to the editor it lists what this
+ * installation processes, read off the configuration, and "Insert headings"
+ * adds the section headings that list implies, nothing more.
+ *
+ * Saves on its own, like the About page: the policy is a Markdown file, not a
+ * key in settings.yaml.
+ */
+
+import { useEffect, useState } from 'react';
+import * as Icons from './Icons';
+import { reportIfSessionExpired } from './sessionExpiry';
+import { useUnsavedGuard } from './useUnsavedGuard';
+import type { ProcessingFact } from '@/lib/privacy';
+
+interface PrivacyData {
+  body: string;
+  enabled: boolean;
+  facts: ProcessingFact[];
+  starter: string;
+}
+
+type Status = { kind: 'success' | 'error'; message: string } | null;
+
+export default function PrivacyEditor() {
+  const [data, setData] = useState<PrivacyData | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [body, setBody] = useState('');
+  const [dirty, setDirty] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [status, setStatus] = useState<Status>(null);
+
+  useUnsavedGuard(dirty);
+
+  useEffect(() => {
+    let live = true;
+    fetch('/api/admin/privacy')
+      .then(async (res) => {
+        if (!res.ok) {
+          reportIfSessionExpired(res);
+          throw new Error(`HTTP ${res.status}`);
+        }
+        return (await res.json()) as PrivacyData;
+      })
+      .then((d) => {
+        if (!live) return;
+        setData(d);
+        setBody(d.body);
+      })
+      .catch((err: Error) => live && setLoadError(err.message));
+    return () => {
+      live = false;
+    };
+  }, []);
+
+  async function save() {
+    setSaving(true);
+    setStatus(null);
+    try {
+      const res = await fetch('/api/admin/privacy', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ body }),
+      });
+      if (!res.ok) {
+        if (!reportIfSessionExpired(res)) {
+          setStatus({ kind: 'error', message: `Could not save (HTTP ${res.status}).` });
+        }
+        return;
+      }
+      setDirty(false);
+      setStatus({ kind: 'success', message: 'Privacy policy saved.' });
+    } catch {
+      setStatus({ kind: 'error', message: 'Could not reach the server.' });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function insertHeadings() {
+    if (!data) return;
+    setBody((b) => (b.trim() ? `${b.trimEnd()}\n\n${data.starter}\n` : `${data.starter}\n`));
+    setDirty(true);
+  }
+
+  if (loadError) {
+    // No editor over an unknown file: saving an empty one would erase the policy.
+    return (
+      <p className="admin-field-hint admin-field-hint--error">
+        The privacy policy could not be loaded ({loadError}). Reload the page to try again.
+      </p>
+    );
+  }
+  if (!data) return <div className="admin-spinner" />;
+
+  return (
+    <div className="privacy-editor">
+      <div className="privacy-editor__facts">
+        <h4>What this site processes</h4>
+        <p className="admin-field-hint">
+          Read off your current configuration. A checklist for writing the policy, not text for the
+          page.
+        </p>
+        <ul>
+          {data.facts.map((f) => (
+            <li key={f.topic}>
+              <strong>{f.topic}</strong>
+              {f.thirdParty && <span className="privacy-editor__badge">third party</span>}
+              <span>{f.detail}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="privacy-body">Privacy policy (Markdown)</label>
+        <textarea
+          id="privacy-body"
+          value={body}
+          onChange={(e) => {
+            setBody(e.target.value);
+            setDirty(true);
+          }}
+          rows={18}
+          placeholder="## Controller&#10;&#10;Name, address, email…"
+        />
+        <p className="admin-field-hint">
+          Headings with <code>##</code>, lists with <code>-</code>, <code>**bold**</code> and{' '}
+          <code>[links](https://…)</code>. Shown at /privacy and linked in the footer once there is
+          text. Earlier versions are kept under Backups.
+        </p>
+      </div>
+
+      <div className="privacy-editor__actions">
+        <button type="button" className="admin-btn admin-btn-ghost" onClick={insertHeadings}>
+          <Icons.IconPlus size={14} /> Insert headings
+        </button>
+        {body.trim() && data.enabled && (
+          <a
+            className="admin-btn admin-btn-ghost"
+            href="/privacy"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View /privacy ↗
+          </a>
+        )}
+        <button
+          type="button"
+          className="admin-btn admin-btn-primary"
+          onClick={save}
+          disabled={!dirty || saving}
+        >
+          {saving ? 'Saving…' : 'Save privacy policy'}
+        </button>
+        {status && (
+          <span className={`save-message ${status.kind}`} role="status">
+            {status.message}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/components/SaveBar.tsx b/app/admin/components/SaveBar.tsx
index 1d294fb..98dc5a9 100644
--- a/app/admin/components/SaveBar.tsx
+++ b/app/admin/components/SaveBar.tsx
@@ -1,9 +1,16 @@
 'use client';
 
+/**
+ * The outcome of the last save. Typed rather than read off the wording: the bar
+ * used to call a message an error when it started with "Error", so a failure
+ * worded any other way was shown as a success (#600).
+ */
+export type SaveStatus = { kind: 'success' | 'error'; message: string } | null;
+
 interface SaveBarProps {
   dirty: boolean;
   saving: boolean;
-  saveMessage: string;
+  status: SaveStatus;
   onSave: () => void;
   label: string;
   /** Show the cache-bypassing preview link (page builder only). */
@@ -21,20 +28,18 @@ interface SaveBarProps {
 export default function SaveBar({
   dirty,
   saving,
-  saveMessage,
+  status,
   onSave,
   label,
   showPreview = false,
 }: SaveBarProps) {
-  if (!dirty && !saving && !saveMessage) return null;
+  if (!dirty && !saving && !status) return null;
 
   return (
     <div className={`floating-save-bar ${dirty ? 'dirty' : ''}`} role="status">
       <div className="save-bar-left">
-        {saveMessage ? (
-          <span className={`save-message ${saveMessage.startsWith('Error') ? 'error' : 'success'}`}>
-            {saveMessage}
-          </span>
+        {status ? (
+          <span className={`save-message ${status.kind}`}>{status.message}</span>
         ) : (
           <span className="unsaved-badge">
             <span className="badge-pulse-dot" aria-hidden="true" />
diff --git a/app/admin/components/SettingsEditor.tsx b/app/admin/components/SettingsEditor.tsx
index 6854383..c28d063 100644
--- a/app/admin/components/SettingsEditor.tsx
+++ b/app/admin/components/SettingsEditor.tsx
@@ -1,480 +1,31 @@
 'use client';
 
+/**
+ * The settings form: loading, the section nav, dirty tracking and saving.
+ * Each section is its own component in ./settings/ (#554) and edits the one
+ * `settings` object through `update()`; About brings its own file and save
+ * path through useAboutEditor().
+ */
+
 import { useState, useEffect, useCallback } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
-import * as Icons from './Icons';
-import SaveBar from './SaveBar';
+import SaveBar, { type SaveStatus } from './SaveBar';
 import { useUnsavedGuard } from './useUnsavedGuard';
+import { useDraft } from './useDraft';
+import DraftNotice from './DraftNotice';
+import { useContentRestored } from './contentRestored';
 import { reportIfSessionExpired } from './sessionExpiry';
-import ToggleCard from './fields/ToggleCard';
-import OptionGrid, { toOptions } from './fields/OptionGrid';
-// Direct import from the theme module, not from '@/lib/config': the config
-// index pulls in `fs` and cannot be bundled into a client component.
-import { DEFAULT_PRESET } from '@/lib/config/theme';
-import {
-  PHOTO_GRID_COLUMNS_MAX,
-  PHOTO_GRID_COLUMNS_MIN,
-  PHOTO_GRID_GAP_MAX,
-  resolveExifDisplay,
-  resolveWatermarkOpacity,
-} from '@/lib/config/schema';
-import { SUPPORTED_LOCALES } from '@/lib/i18n';
-
-interface Settings {
-  title?: string;
-  subtitle?: string;
-  /** Absolute site URL for sitemap, feed and structured data (#472). */
-  url?: string;
-  lang?: string;
-  sitePassword?: string;
-  mode?: 'light' | 'dark' | 'auto';
-  exifOnHover?: boolean;
-  exif?: {
-    camera?: boolean;
-    settings?: boolean;
-    location?: boolean;
-    caption?: boolean;
-  };
-  map?: boolean;
-  transitions?: boolean;
-  scrollToTop?: boolean;
-  analytics?: boolean;
-  theme?: {
-    preset?: string;
-    accent?: string;
-    photoFrame?: string;
-    grain?: boolean;
-    headerDot?: boolean;
-    heroStyle?: string;
-  };
-  grid?: {
-    columns?: number;
-    gap?: number;
-    aspectRatio?: string;
-    layout?: string;
-  };
-  footer?: {
-    name?: string;
-    instagram?: string;
-    email?: string;
-    website?: string;
-  };
-  /** EXPERIMENTAL: external links appended to the header navigation */
-  navLinks?: Array<{ label?: string; url?: string }>;
-  legal?: {
-    enabled?: boolean;
-    name?: string;
-    address?: string;
-    zipCity?: string;
-    country?: string;
-    email?: string;
-    phone?: string;
-    taxId?: string;
-    vatId?: string;
-    extraInfo?: string;
-  };
-  seo?: {
-    title?: string;
-    description?: string;
-    titleTemplate?: string;
-    noIndex?: boolean;
-    noFollow?: boolean;
-  };
-  protection?: {
-    disableRightClick?: boolean;
-    disableImageDrag?: boolean;
-  };
-  proofing?: {
-    enabled?: boolean;
-    allowMailto?: boolean;
-  };
-  watermark?: {
-    enabled?: boolean;
-    text?: string;
-    opacity?: number;
-    position?: 'bottom-right' | 'bottom-left' | 'center';
-  };
-  about?: { enabled?: boolean };
-}
-
-const PRESETS = ['studio-modern', 'studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph'];
-const LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow', 'justified'];
-const PHOTO_FRAMES = ['none', 'passepartout', 'shadow'];
-const HERO_STYLES = ['split', 'fullbleed', 'minimal', 'stacked', 'typographic', 'mosaic', 'cover'];
-const ASPECT_RATIOS = ['1', '3/2', '2/3', '16/9', 'auto'];
-
-const PHOTO_FRAME_INFO: Record<string, { label: string; desc: string }> = {
-  none: { label: 'None', desc: 'Flush image with crisp edges' },
-  passepartout: {
-    label: 'Passepartout',
-    desc: 'Classic gallery matting border',
-  },
-  shadow: { label: 'Shadow', desc: 'Soft floating drop shadow' },
-};
-const PHOTO_FRAME_OPTIONS = toOptions(PHOTO_FRAMES, PHOTO_FRAME_INFO);
-
-function PhotoFramePreview({ value }: { value: string }) {
-  return (
-    <div className="frame-card-preview">
-      <div className={`mini-frame-demo frame-${value}`}>
-        <div className="mini-frame-photo" />
-      </div>
-    </div>
-  );
-}
-
-const HERO_STYLE_INFO: Record<string, { label: string; desc: string }> = {
-  split: { label: 'Split', desc: 'Side-by-side title & photo' },
-  fullbleed: { label: 'Fullbleed', desc: 'Edge-to-edge full width banner' },
-  minimal: { label: 'Minimal', desc: 'Centered title with subtle photo' },
-  stacked: { label: 'Stacked', desc: 'Title stacked directly over photo' },
-  typographic: { label: 'Typographic', desc: 'Oversized magazine masthead' },
-  mosaic: { label: 'Mosaic', desc: 'Dynamic photo collage layout' },
-  cover: {
-    label: 'Cover (Experimental)',
-    desc: 'Fullscreen splash with a single Enter link',
-  },
-};
-const HERO_STYLE_OPTIONS = toOptions(HERO_STYLES, HERO_STYLE_INFO);
-
-function HeroStylePreview({ value }: { value: string }) {
-  return (
-    <div className="hero-card-preview">
-      <div className={`mini-hero-demo hero-demo-${value}`}>
-        {value === 'split' && (
-          <>
-            <div className="hero-demo-text">
-              <div className="demo-line title" />
-              <div className="demo-line sub" />
-            </div>
-            <div className="hero-demo-photo" />
-          </>
-        )}
-        {value === 'fullbleed' && (
-          <div className="hero-demo-full">
-            <div className="demo-line title light" />
-          </div>
-        )}
-        {value === 'minimal' && (
-          <>
-            <div className="hero-demo-center-text">
-              <div className="demo-line title short" />
-            </div>
-            <div className="hero-demo-photo small" />
-          </>
-        )}
-        {value === 'stacked' && (
-          <>
-            <div className="hero-demo-text">
-              <div className="demo-line title" />
-            </div>
-            <div className="hero-demo-photo banner" />
-          </>
-        )}
-        {value === 'typographic' && (
-          <>
-            <div className="demo-line title giant" />
-            <div className="hero-demo-grid2">
-              <div className="hero-demo-photo" />
-              <div className="hero-demo-photo" />
-            </div>
-          </>
-        )}
-        {value === 'mosaic' && (
-          <div className="hero-demo-mosaic">
-            <div className="hero-demo-photo big" />
-            <div className="hero-demo-photo-col">
-              <div className="hero-demo-photo" />
-              <div className="hero-demo-photo" />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-const LAYOUT_INFO: Record<string, { label: string; desc: string }> = {
-  masonry: {
-    label: 'Masonry',
-    desc: 'Dynamic pinterest-style staggered columns',
-  },
-  uniform: { label: 'Uniform Grid', desc: 'Clean equal aspect ratio grid' },
-  showcase: {
-    label: 'Showcase',
-    desc: 'Featured hero photos mixed with smaller tiles',
-  },
-  filmstrip: {
-    label: 'Filmstrip',
-    desc: 'Horizontal scrollable film strip timeline',
-  },
-  'editorial-flow': {
-    label: 'Editorial Flow',
-    desc: 'Magazine story layout with varying photo sizes',
-  },
-  justified: {
-    label: 'Justified (Experimental)',
-    desc: 'Equal-height rows that fill the full width',
-  },
-};
-const LAYOUT_OPTIONS = toOptions(LAYOUTS, LAYOUT_INFO);
-
-function LayoutPreview({ value }: { value: string }) {
-  return (
-    <div className="grid-card-preview">
-      <div className={`mini-layout-demo layout-demo-${value}`}>
-        {value === 'masonry' && (
-          <div className="demo-masonry-col-group">
-            <div className="demo-col">
-              <div className="demo-tile h-high" />
-              <div className="demo-tile h-low" />
-            </div>
-            <div className="demo-col">
-              <div className="demo-tile h-low" />
-              <div className="demo-tile h-high" />
-            </div>
-            <div className="demo-col">
-              <div className="demo-tile h-med" />
-              <div className="demo-tile h-med" />
-            </div>
-          </div>
-        )}
-        {value === 'uniform' && (
-          <div className="demo-uniform-grid">
-            <div className="demo-tile" />
-            <div className="demo-tile" />
-            <div className="demo-tile" />
-            <div className="demo-tile" />
-            <div className="demo-tile" />
-            <div className="demo-tile" />
-          </div>
-        )}
-        {value === 'showcase' && (
-          <div className="demo-showcase-grid">
-            <div className="demo-tile demo-hero" />
-            <div className="demo-col">
-              <div className="demo-tile" />
-              <div className="demo-tile" />
-            </div>
-          </div>
-        )}
-        {value === 'filmstrip' && (
-          <div className="demo-filmstrip-row">
-            <div className="demo-tile strip" />
-            <div className="demo-tile strip" />
-            <div className="demo-tile strip" />
-          </div>
-        )}
-        {value === 'editorial-flow' && (
-          <div className="demo-editorial-flow">
-            <div className="demo-tile wide" />
-            <div className="demo-row">
-              <div className="demo-tile" />
-              <div className="demo-tile" />
-            </div>
-          </div>
-        )}
-        {value === 'justified' && (
-          <div className="demo-editorial-flow">
-            <div className="demo-row">
-              <div className="demo-tile wide" />
-              <div className="demo-tile" />
-            </div>
-            <div className="demo-row">
-              <div className="demo-tile" />
-              <div className="demo-tile wide" />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-const ASPECT_RATIO_INFO: Record<string, { label: string; desc: string }> = {
-  '1': { label: 'Square (1:1)', desc: '1:1 ratio square crops' },
-  '3/2': { label: 'Landscape (3:2)', desc: 'Standard 35mm DSLR landscape' },
-  '2/3': { label: 'Portrait (2:3)', desc: 'Vertical portrait orientation' },
-  '16/9': { label: 'Cinema (16:9)', desc: 'Widescreen 16:9 cinematic ratio' },
-  auto: {
-    label: 'Original Auto',
-    desc: 'Uncropped original image proportions',
-  },
-};
-const ASPECT_RATIO_OPTIONS = toOptions(ASPECT_RATIOS, ASPECT_RATIO_INFO);
-
-function AspectRatioPreview({ value }: { value: string }) {
-  return (
-    <div className="ratio-card-preview">
-      <div className={`mini-aspect-box ratio-${value.replace('/', '-')}`}>
-        <div className="mini-aspect-inner" />
-      </div>
-    </div>
-  );
-}
-
-/**
- * Card metadata for the theme picker. `font`, `radius` and `frame` mirror the
- * real preset definitions in lib/config/theme.ts so the mini mockups show what
- * the preset actually does; `gap` is the visual density of its gallery grid.
- */
-const THEME_INFO: Record<
-  string,
-  {
-    desc: string;
-    label: string;
-    accent: string;
-    bg: string;
-    tile: string;
-    font: string;
-    type: 'serif' | 'sans' | 'mono';
-    radius: number;
-    frame: 'none' | 'passepartout' | 'shadow';
-    gap: number;
-  }
-> = {
-  studio: {
-    label: 'Studio',
-    desc: 'Clean, high-contrast grid with sans-serif type.',
-    bg: '#141414',
-    tile: '#242424',
-    accent: '#e60012',
-    font: 'Playfair Display',
-    type: 'serif',
-    radius: 0,
-    frame: 'passepartout',
-    gap: 4,
-  },
-  'studio-modern': {
-    label: 'Studio Modern',
-    desc: 'Leica precision: Archivo grotesque, mono EXIF, red signal accents.',
-    bg: '#121212',
-    tile: '#191919',
-    accent: '#e60012',
-    font: 'Archivo',
-    type: 'sans',
-    radius: 0,
-    frame: 'none',
-    gap: 3,
-  },
-  minimal: {
-    label: 'Minimal',
-    desc: 'Pure raw layouts with tiny gaps and high whitespace.',
-    bg: '#ffffff',
-    tile: '#f3f3f3',
-    accent: '#111111',
-    font: 'Geist',
-    type: 'sans',
-    radius: 0,
-    frame: 'none',
-    gap: 2,
-  },
-  editorial: {
-    label: 'Editorial',
-    desc: 'Warm backgrounds, elegant serifs and large headers.',
-    bg: '#fbf9f4',
-    tile: '#e5dfd4',
-    accent: '#b89053',
-    font: 'Bodoni Moda',
-    type: 'serif',
-    radius: 0,
-    frame: 'shadow',
-    gap: 8,
-  },
-  classic: {
-    label: 'Classic',
-    desc: 'Soft traditional photographer portfolio with shadows.',
-    bg: '#f7f7f7',
-    tile: '#ffffff',
-    accent: '#444444',
-    font: 'Cinzel',
-    type: 'serif',
-    radius: 12,
-    frame: 'passepartout',
-    gap: 7,
-  },
-  noir: {
-    label: 'Noir',
-    desc: 'High drama absolute pitch black, stark high-fashion look.',
-    bg: '#000000',
-    tile: '#151515',
-    accent: '#ffffff',
-    font: 'Libre Baskerville',
-    type: 'serif',
-    radius: 0,
-    frame: 'passepartout',
-    gap: 6,
-  },
-  monograph: {
-    label: 'Monograph',
-    desc: 'Typewriter monospace font, grid borders and document feel.',
-    bg: '#f4f4f6',
-    tile: '#ffffff',
-    accent: '#555555',
-    font: 'Instrument Serif',
-    type: 'mono',
-    radius: 0,
-    frame: 'none',
-    gap: 5,
-  },
-};
-
-/* The preset group sits below THEME_INFO on purpose. PRESET_OPTIONS is built
-   at module evaluation and reads it through themeInfo(); declared above, it
-   hit the temporal dead zone and the whole Settings page failed to load with
-   "Cannot access 'THEME_INFO' before initialization". tsc does not catch it
-   because the read goes through a hoisted function, and a production build
-   succeeds because the module is only evaluated in the browser (#542). */
-/** The theme picker's own metadata, with the fallback the card grid needs. */
-function themeInfo(value: string) {
-  return (
-    THEME_INFO[value] || {
-      label: value,
-      desc: '',
-      bg: '#fff',
-      tile: '#eee',
-      accent: '#333',
-      font: 'System',
-      type: 'sans' as const,
-      radius: 0,
-      frame: 'none' as const,
-      gap: 4,
-    }
-  );
-}
-
-const PRESET_OPTIONS = PRESETS.map((value) => ({
-  value,
-  label: themeInfo(value).label,
-  desc: themeInfo(value).desc,
-}));
-
-function PresetPreview({ value }: { value: string }) {
-  const i = themeInfo(value);
-  return (
-    <div className="preset-card-preview" data-frame={i.frame}>
-      <div className="mini-header">
-        <span className={`mini-specimen type-${i.type}`}>Aa</span>
-        <span className="mini-line" />
-      </div>
-      <div className="mini-grid">
-        <div className="mini-tile" />
-        <div className="mini-tile" />
-        <div className="mini-tile" />
-      </div>
-    </div>
-  );
-}
-
-function PresetSpecs({ value }: { value: string }) {
-  const i = themeInfo(value);
-  return (
-    <span className="preset-card-specs">
-      {i.font} &middot; radius {i.radius} &middot; {i.frame}
-    </span>
-  );
-}
+import type { Settings, SectionProps } from './settings/types';
+import GeneralSection from './settings/GeneralSection';
+import ThemeSection from './settings/ThemeSection';
+import GridSection from './settings/GridSection';
+import FooterSection from './settings/FooterSection';
+import LegalSection from './settings/LegalSection';
+import SeoSection from './settings/SeoSection';
+import SecuritySection from './settings/SecuritySection';
+import AboutSection, { useAboutEditor } from './settings/AboutSection';
+import PageHeader from './PageHeader';
 
 const SETTINGS_SECTIONS = [
   { id: 'general', label: 'General' },
@@ -487,89 +38,16 @@ const SETTINGS_SECTIONS = [
   { id: 'about', label: 'About' },
 ];
 
-/**
- * One labelled block of related switches.
- *
- * The features panel was a single flat grid of identical cards, so nothing said
- * which switches belonged together — and a switch that publishes private notes
- * looked exactly like one that controls a fade (#510).
- */
-function FeatureGroup({
-  icon,
-  title,
-  description,
-  chip,
-  children,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  /** Short marker for a group that needs its own weight, e.g. what visitors see. */
-  chip?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="settings-group">
-      <div className="settings-group-head">
-        <span className="settings-group-title">
-          {icon}
-          {title}
-          {chip && <span className="settings-group-chip">{chip}</span>}
-        </span>
-        <span className="settings-group-desc">{description}</span>
-      </div>
-      {children}
-    </div>
-  );
+function withoutSitePassword(settings: Settings): Settings {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { sitePassword, ...rest } = settings;
+  return rest;
 }
 
-/**
- * A switch inside a group panel. Deliberately lighter than a toggle card: these
- * are settings *of* the panel they sit in, and rendering them as peers of the
- * top-level cards is what hid the structure in the first place.
- */
-function SettingRow({
-  title,
-  description,
-  checked,
-  onToggle,
-  disabled,
-  hint,
-  indented,
-}: {
-  title: string;
-  description: string;
-  checked: boolean;
-  onToggle: () => void;
-  /** A row whose parent switch is off — shown, but inert and explained. */
-  disabled?: boolean;
-  hint?: string;
-  indented?: boolean;
-}) {
-  return (
-    <button
-      type="button"
-      className={`setting-row${indented ? ' setting-row--indented' : ''}${
-        disabled ? ' setting-row--disabled' : ''
-      }`}
-      onClick={onToggle}
-      disabled={disabled}
-      aria-pressed={checked}
-    >
-      <span className="setting-row-info">
-        <span className="setting-row-title">{title}</span>
-        <span className="setting-row-desc">{description}</span>
-        {hint && (
-          <span className="setting-row-hint">
-            <Icons.IconBan size={11} /> {hint}
-          </span>
-        )}
-      </span>
-      <span className={`switch-toggle switch-toggle--sm ${checked && !disabled ? 'on' : ''}`}>
-        <span className="switch-slider" />
-      </span>
-    </button>
-  );
+function withSitePasswordOf(draft: Settings, source: Settings): Settings {
+  return source.sitePassword === undefined
+    ? draft
+    : { ...draft, sitePassword: source.sitePassword };
 }
 
 export default function SettingsEditor() {
@@ -594,41 +72,33 @@ export default function SettingsEditor() {
    * field the user happened to touch.
    */
   const [loadError, setLoadError] = useState<string | null>(null);
-  // Collapsed by default: the four metadata switches are a detail of one
-  // decision, and showing them permanently is what made the section a wall (#510).
-  const [metadataOpen, setMetadataOpen] = useState(false);
   const [saving, setSaving] = useState(false);
   const [dirty, setDirty] = useState(false);
-  const [saveMessage, setSaveMessage] = useState('');
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>(null);
 
-  const [currentMode, setCurrentMode] = useState<'dark' | 'light'>('dark');
-  const [faviconUploading, setFaviconUploading] = useState(false);
-  const [faviconMessage, setFaviconMessage] = useState('');
+  const about = useAboutEditor(activeSection === 'about');
 
-  // About content state (independent of main settings save)
-  const [aboutMeta, setAboutMeta] = useState<{
-    portrait?: string;
-    name?: string;
-    location?: string;
-    gear?: string[];
-  }>({});
-  const [aboutBody, setAboutBody] = useState('');
-  const [aboutLoading, setAboutLoading] = useState(false);
-  const [aboutLoaded, setAboutLoaded] = useState(false);
-  const [aboutSaving, setAboutSaving] = useState(false);
-  const [aboutDirty, setAboutDirty] = useState(false);
-  const [aboutMessage, setAboutMessage] = useState('');
-  const [aboutGearText, setAboutGearText] = useState('');
+  // Unsaved edits survive a tab switch, Reload or Logout the way the page
+  // builder's and the journal's do (#592) — useUnsavedGuard only covers
+  // leaving the browser.
+  const [serverSettings, setServerSettings] = useState<Settings>({});
+  // The draft never sees `sitePassword`: sessionStorage is readable by any
+  // script on the admin origin, and until it is saved (and hashed) the field
+  // holds the password as typed. A restored draft takes the password from the
+  // server instead; a new one is typed again after a reload.
+  const settingsDraft = useDraft<Settings>('settings', withoutSitePassword(settings), dirty);
 
   useEffect(() => {
     loadSettings();
-    if (typeof window !== 'undefined') {
-      const mode =
-        (document.documentElement.getAttribute('data-theme') as 'dark' | 'light') || 'dark';
-      setCurrentMode(mode);
-    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // A restored settings.yaml replaces what this editor loaded. (About handles
+  // its own file in useAboutEditor.)
+  useContentRestored(({ target }) => {
+    if (target === 'settings') loadSettings();
+  });
+
   // Sync picked preset & accent color to document element immediately for live feedback
   useEffect(() => {
     if (typeof document !== 'undefined') {
@@ -642,26 +112,11 @@ export default function SettingsEditor() {
     }
   }, [settings.theme?.preset, settings.theme?.accent]);
 
-  // Loaded the first time the About section opens, and only then: the editor
-  // stays mounted across sections, so reloading on every visit would overwrite
-  // unsaved About edits with the file on disk.
-  useEffect(() => {
-    if (activeSection === 'about' && !aboutLoaded) loadAboutContent();
-  }, [activeSection, aboutLoaded]);
-
-  const toggleMode = (mode: 'dark' | 'light') => {
-    setCurrentMode(mode);
-    if (typeof document !== 'undefined') {
-      document.documentElement.setAttribute('data-theme', mode);
-      localStorage.setItem('theme', mode);
-    }
-  };
-
   // ── Keyboard shortcut: ⌘+S / Ctrl+S ─────────────────────────
   const handleSaveRef = useCallback(() => {
     saveAll();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dirty, saving, settings, aboutDirty, aboutSaving, aboutMeta, aboutBody, aboutGearText]);
+  }, [dirty, saving, settings, about]);
 
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
@@ -674,7 +129,7 @@ export default function SettingsEditor() {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [handleSaveRef]);
 
-  useUnsavedGuard(dirty || aboutDirty);
+  useUnsavedGuard(dirty || about.dirty);
 
   async function loadSettings() {
     setLoading(true);
@@ -695,7 +150,12 @@ export default function SettingsEditor() {
         );
       }
       const { settings: data, siteUrl } = await res.json();
-      setSettings(data || {});
+      const loaded: Settings = data || {};
+      setServerSettings(loaded);
+      const restoredDraft = settingsDraft.load(JSON.stringify(withoutSitePassword(loaded)));
+      const restored = restoredDraft && withSitePasswordOf(restoredDraft, loaded);
+      setSettings(restored ?? loaded);
+      setDirty(restored !== null);
       setSiteUrlInfo(siteUrl ?? null);
     } catch (err) {
       console.error('Failed to load settings:', err);
@@ -721,7 +181,7 @@ export default function SettingsEditor() {
       return copy;
     });
     setDirty(true);
-    setSaveMessage('');
+    setSaveStatus(null);
   }
 
   function update(path: string, value: unknown) {
@@ -742,7 +202,7 @@ export default function SettingsEditor() {
       return copy;
     });
     setDirty(true);
-    setSaveMessage('');
+    setSaveStatus(null);
   }
 
   async function handleSave() {
@@ -750,7 +210,7 @@ export default function SettingsEditor() {
     if (loadError) return;
 
     setSaving(true);
-    setSaveMessage('');
+    setSaveStatus(null);
 
     // Clean up empty objects
     const cleaned = JSON.parse(JSON.stringify(settings));
@@ -769,10 +229,20 @@ export default function SettingsEditor() {
 
       if (res.ok) {
         const data = await res.json();
+        // The site password is stored hashed (#690); show that, not the typed text.
+        const stored: Settings =
+          typeof data.sitePassword === 'string'
+            ? { ...cleaned, sitePassword: data.sitePassword }
+            : cleaned;
+        if (typeof data.sitePassword === 'string') {
+          setSettings((s) => ({ ...s, sitePassword: data.sitePassword }));
+        }
+        setServerSettings(stored);
+        settingsDraft.saved(JSON.stringify(withoutSitePassword(stored)));
         setDirty(false);
-        setSaveMessage(data.message || 'Saved!');
+        setSaveStatus({ kind: 'success', message: data.message || 'Saved!' });
         router.refresh();
-        setTimeout(() => setSaveMessage(''), 5000);
+        setTimeout(() => setSaveStatus(null), 5000);
       } else if (!reportIfSessionExpired(res)) {
         const err = await res.json();
         // A rejected save names the fields that caused it. Listing them beats
@@ -781,85 +251,18 @@ export default function SettingsEditor() {
         const fields: string[] = Array.isArray(err.fields)
           ? err.fields.map((f: { field?: string }) => f.field || 'settings')
           : [];
-        setSaveMessage(`Error: ${err.error}${fields.length ? ` — ${fields.join(', ')}` : ''}`);
+        setSaveStatus({
+          kind: 'error',
+          message: `Error: ${err.error}${fields.length ? ` — ${fields.join(', ')}` : ''}`,
+        });
       }
     } catch {
-      setSaveMessage('Error: Failed to save');
+      setSaveStatus({ kind: 'error', message: 'Error: Failed to save' });
     } finally {
       setSaving(false);
     }
   }
 
-  async function loadAboutContent() {
-    setAboutLoading(true);
-    setAboutMessage('');
-    try {
-      const res = await fetch('/api/admin/about');
-      if (!res.ok) {
-        throw new Error(
-          res.status === 401
-            ? 'Your session has expired. Sign in again to continue.'
-            : `The server answered ${res.status}.`,
-        );
-      }
-      const data = await res.json();
-      setAboutMeta(data.meta || {});
-      setAboutBody(data.body || '');
-      setAboutGearText(data.meta?.gear?.join('\n') || '');
-      setAboutLoaded(true);
-    } catch (err) {
-      console.error('Failed to load about content:', err);
-      // aboutLoaded stays false, which is what blocks the save below: an empty
-      // editor written to about.md would replace the page with nothing.
-      setAboutMessage(
-        `Error: ${err instanceof Error ? err.message : 'The About page could not be loaded.'}`,
-      );
-    } finally {
-      setAboutLoading(false);
-    }
-  }
-
-  async function saveAboutContent() {
-    if (!aboutLoaded) return;
-
-    setAboutSaving(true);
-    setAboutMessage('');
-    const cleanedMeta = { ...aboutMeta };
-    for (const [k, v] of Object.entries(cleanedMeta)) {
-      if (v === '' || v === undefined) delete cleanedMeta[k as keyof typeof cleanedMeta];
-    }
-    const gearLines = aboutGearText
-      .split('\n')
-      .map((s) => s.trim())
-      .filter(Boolean);
-    if (gearLines.length > 0) {
-      cleanedMeta.gear = gearLines;
-    } else {
-      delete cleanedMeta.gear;
-    }
-
-    try {
-      const res = await fetch('/api/admin/about', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ meta: cleanedMeta, body: aboutBody }),
-      });
-      if (res.ok) {
-        const data = await res.json();
-        setAboutDirty(false);
-        setAboutMessage(data.message || 'Saved!');
-        setTimeout(() => setAboutMessage(''), 4000);
-      } else {
-        const err = await res.json();
-        setAboutMessage(`Error: ${err.error}`);
-      }
-    } catch {
-      setAboutMessage('Error: Failed to save');
-    } finally {
-      setAboutSaving(false);
-    }
-  }
-
   /**
    * Save whatever is unsaved, in either file. The owner edits one set of
    * settings; that About lives in about.md and the rest in settings.yaml is
@@ -867,13 +270,7 @@ export default function SettingsEditor() {
    */
   function saveAll() {
     if (dirty && !saving) handleSave();
-    if (aboutDirty && !aboutSaving) saveAboutContent();
-  }
-
-  function updateAboutMeta(key: string, value: unknown) {
-    setAboutMeta((m) => ({ ...m, [key]: value }));
-    setAboutDirty(true);
-    setAboutMessage('');
+    if (about.dirty && !about.saving) about.save();
   }
 
   if (loading) {
@@ -904,53 +301,54 @@ export default function SettingsEditor() {
     );
   }
 
-  // Resolved the same way the site resolves it, so the switches show what a
-  // visitor actually sees — including a config that only ever set the older
-  // `exifOnHover`.
-  const exif = resolveExifDisplay(settings.exif, settings.exifOnHover);
-
-  // The master switch has no key of its own and needs none: "off" is all four
-  // groups off, a state the site already acts on — with nothing left to show,
-  // the lightbox withdraws its info button and the `i` key entirely (#506).
-  const anyMetadata = exif.camera || exif.settings || exif.location || exif.caption;
-  const metadataSummary =
-    [
-      exif.camera && 'Camera & lens',
-      exif.settings && 'Exposure',
-      exif.location && 'Location',
-      exif.caption && 'Description',
-    ]
-      .filter(Boolean)
-      .join(' · ') || 'Nothing published — the lightbox hides its info panel';
-
-  /** Turning it back on selects everything; the details below narrow it again. */
-  const toggleMetadata = () =>
-    updateMany({
-      'exif.camera': !anyMetadata,
-      'exif.settings': !anyMetadata,
-      'exif.location': !anyMetadata,
-      'exif.caption': !anyMetadata,
-    });
-
   // An error from either save wins over the other's success.
-  const saveBarMessage =
-    [saveMessage, aboutMessage].find((m) => m.startsWith('Error')) || saveMessage || aboutMessage;
+  const saveBarStatus: SaveStatus =
+    [saveStatus, about.status].find((st) => st?.kind === 'error') ?? saveStatus ?? about.status;
+
+  const props: SectionProps = { settings, update, updateMany };
 
   return (
     <div className="settings-editor">
       {/* One bar for both files, on every section: an About edit stays visible
           from Theme, and a settings edit from About. */}
       <SaveBar
-        dirty={dirty || aboutDirty}
-        saving={saving || aboutSaving}
-        saveMessage={saveBarMessage}
+        dirty={dirty || about.dirty}
+        saving={saving || about.saving}
+        status={saveBarStatus}
         onSave={saveAll}
         label="Save Changes"
       />
 
-      <p className="settings-live-sync-note">
-        <Icons.IconRefresh size={13} /> Live Sync (No Docker restart required)
-      </p>
+      <DraftNotice
+        status={settingsDraft.status}
+        subject="settings"
+        onDiscard={() => {
+          settingsDraft.discard();
+          setSettings(serverSettings);
+          setDirty(false);
+          setSaveStatus(null);
+        }}
+        onRestore={() => {
+          const value = settingsDraft.takeConflicting();
+          if (!value) return;
+          setSettings(withSitePasswordOf(value, serverSettings));
+          setDirty(true);
+        }}
+        onDismiss={settingsDraft.dismiss}
+      />
+      <DraftNotice
+        status={about.draftStatus}
+        subject="About page"
+        onDiscard={about.discardDraft}
+        onRestore={about.restoreDraft}
+        onDismiss={about.dismissDraft}
+      />
+
+      <PageHeader
+        kicker="Site"
+        title="Settings"
+        description="Saved changes apply to the site at once, no restart needed."
+      />
 
       <div className="settings-layout">
         {/* Sidebar */}
@@ -969,1075 +367,14 @@ export default function SettingsEditor() {
 
         {/* Content */}
         <div className="settings-content">
-          {activeSection === 'general' && (
-            <div className="settings-panel">
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconGear size={18} /> General Site Settings
-                </h3>
-                <p className="settings-section-sub">
-                  Configure basic site identity, language, and core feature toggles.
-                </p>
-              </div>
-
-              <div className="admin-field">
-                <label>Site Title</label>
-                <input
-                  value={settings.title || ''}
-                  onChange={(e) => update('title', e.target.value)}
-                  placeholder="My Portfolio"
-                />
-              </div>
-              <div className="admin-field">
-                <label>Subtitle</label>
-                <input
-                  value={settings.subtitle || ''}
-                  onChange={(e) => update('subtitle', e.target.value)}
-                  placeholder="A visual journal"
-                />
-              </div>
-              <div className="admin-field">
-                <label>Language</label>
-                <select
-                  aria-label="Language"
-                  value={settings.lang || 'en'}
-                  onChange={(e) => update('lang', e.target.value)}
-                >
-                  <option value="en">English (US)</option>
-                  <option value="de">Deutsch (DE)</option>
-                  <option value="fr">Français (FR)</option>
-                  <option value="es">Español (ES)</option>
-                  <option value="ja">日本語 (JA)</option>
-                </select>
-                <p className="admin-field-hint">
-                  The visitor-facing interface is translated for {SUPPORTED_LOCALES.join(', ')}.
-                  Other languages still set <code>&lt;html lang&gt;</code> and date formatting, but
-                  show the English interface. The admin panel is always English.
-                </p>
-              </div>
-
-              <div className="settings-section-divider" />
-
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconSparkles size={18} /> Portfolio Features &amp; Modules
-                </h3>
-                <p className="settings-section-sub">
-                  Enable or disable optional portfolio modules, privacy analytics, and map widgets.
-                </p>
-              </div>
-
-              <FeatureGroup
-                icon={<Icons.IconFrame size={13} />}
-                title="Pages &amp; motion"
-                description="Chrome the visitor sees on every page."
-              >
-                <div className="admin-toggle-cards-grid">
-                  <ToggleCard
-                    icon={<Icons.IconCamera size={16} />}
-                    title="About Page"
-                    description="Show a portrait, bio, and gear section on your portfolio"
-                    checked={settings.about?.enabled !== false}
-                    onToggle={() => update('about.enabled', settings.about?.enabled === false)}
-                  />
-
-                  <ToggleCard
-                    icon={<Icons.IconSparkles size={16} />}
-                    title="Smooth Page Transitions"
-                    description="Enable subtle fade-in animations between page navigation"
-                    checked={settings.transitions !== false}
-                    onToggle={() => update('transitions', settings.transitions === false)}
-                  />
-
-                  <ToggleCard
-                    icon={<Icons.IconArrowUp size={16} />}
-                    title="Scroll-to-Top Button"
-                    description="Show a floating arrow that returns visitors to the top of long pages"
-                    checked={settings.scrollToTop !== false}
-                    onToggle={() => update('scrollToTop', settings.scrollToTop === false)}
-                  />
-                </div>
-              </FeatureGroup>
-
-              <FeatureGroup
-                icon={<Icons.IconShieldCheck size={13} />}
-                title="What each photo reveals"
-                description="Published to anyone who opens a photo."
-                chip="visible to visitors"
-              >
-                <div className={`metadata-card ${anyMetadata ? 'active' : ''}`}>
-                  <button
-                    type="button"
-                    className="metadata-card-main"
-                    onClick={toggleMetadata}
-                    aria-pressed={anyMetadata}
-                  >
-                    <span className="toggle-card-info">
-                      <span className="toggle-card-title">
-                        <Icons.IconCamera size={16} /> Photo metadata
-                      </span>
-                      <span className="toggle-card-desc">{metadataSummary}</span>
-                    </span>
-                    <span className={`switch-toggle ${anyMetadata ? 'on' : ''}`}>
-                      <span className="switch-slider" />
-                    </span>
-                  </button>
-
-                  <button
-                    type="button"
-                    className="metadata-details-btn"
-                    onClick={() => setMetadataOpen((open) => !open)}
-                    aria-expanded={metadataOpen}
-                  >
-                    Details
-                    <Icons.IconChevronDown
-                      size={13}
-                      className={`metadata-details-chevron${metadataOpen ? ' open' : ''}`}
-                    />
-                  </button>
-
-                  {metadataOpen && (
-                    <div className="metadata-details">
-                      <SettingRow
-                        title="Camera &amp; Lens"
-                        description="Body, lens and focal length"
-                        checked={exif.camera}
-                        onToggle={() => update('exif.camera', !exif.camera)}
-                      />
-                      <SettingRow
-                        title="Exposure Settings"
-                        description="Aperture, shutter speed and ISO"
-                        checked={exif.settings}
-                        onToggle={() => update('exif.settings', !exif.settings)}
-                      />
-                      <SettingRow
-                        title="Location"
-                        description="City and country from the photo's GPS data"
-                        checked={exif.location}
-                        onToggle={() => update('exif.location', !exif.location)}
-                      />
-                      <SettingRow
-                        title="Photo Description"
-                        description="The description written in Immich"
-                        checked={exif.caption}
-                        onToggle={() => update('exif.caption', !exif.caption)}
-                      />
-
-                      {/* Dependent, not a peer: this only controls the grid overlay, and
-                      the overlay carries camera and lens. With those off it has
-                      nothing to show, which used to leave it switched on and
-                      silently doing nothing (#510). */}
-                      <SettingRow
-                        indented
-                        title="Summary on grid hover"
-                        description="Camera and lens over the photo, not only in the lightbox"
-                        checked={settings.exifOnHover !== false}
-                        disabled={!exif.camera}
-                        hint={exif.camera ? undefined : 'Needs Camera & Lens'}
-                        onToggle={() => update('exifOnHover', settings.exifOnHover === false)}
-                      />
-                    </div>
-                  )}
-                </div>
-              </FeatureGroup>
-
-              <FeatureGroup
-                icon={<Icons.IconHeart size={13} />}
-                title="What visitors can do"
-                description="Optional pages and interactions."
-              >
-                <div className="admin-toggle-cards-grid">
-                  <ToggleCard
-                    icon={<Icons.IconMap size={16} />}
-                    title="Interactive GPS Map"
-                    description="Enable /map view showing photo locations on a world map"
-                    checked={settings.map === true}
-                    onToggle={() => update('map', !settings.map)}
-                  />
-
-                  <ToggleCard
-                    icon={<Icons.IconHeart size={16} />}
-                    title="Client Proofing & Favorites"
-                    description="Allow visitors & clients to heart, filter, and export favorite photo selections"
-                    checked={settings.proofing?.enabled !== false}
-                    onToggle={() =>
-                      update('proofing.enabled', settings.proofing?.enabled === false)
-                    }
-                  />
-                </div>
-              </FeatureGroup>
-
-              <FeatureGroup
-                icon={<Icons.IconBarChart size={13} />}
-                title="Measurement"
-                description="Cookieless and self-hosted — nothing leaves your server."
-              >
-                <div className="admin-toggle-cards-grid">
-                  <ToggleCard
-                    icon={<Icons.IconBarChart size={16} />}
-                    title="Analytics Tracking"
-                    description="Collect anonymous privacy-friendly visit statistics"
-                    checked={settings.analytics !== false}
-                    onToggle={() => update('analytics', settings.analytics === false)}
-                  />
-                </div>
-              </FeatureGroup>
-
-              <div className="admin-field favicon-field">
-                <label>Favicon</label>
-                <div className="favicon-row">
-                  <input
-                    type="file"
-                    accept=".svg,.png,.ico,.jpg,.jpeg"
-                    disabled={faviconUploading}
-                    onChange={async (e) => {
-                      const file = e.target.files?.[0];
-                      if (!file) return;
-                      setFaviconMessage('');
-                      setFaviconUploading(true);
-                      const form = new FormData();
-                      form.append('file', file);
-                      try {
-                        const res = await fetch('/api/admin/favicon', {
-                          method: 'PUT',
-                          body: form,
-                        });
-                        const data = await res.json();
-                        setFaviconMessage(res.ok ? data.message : `Error: ${data.error}`);
-                      } catch {
-                        setFaviconMessage('Error: Upload failed');
-                      } finally {
-                        setFaviconUploading(false);
-                        e.target.value = '';
-                      }
-                    }}
-                  />
-                  <button
-                    type="button"
-                    className="admin-btn"
-                    disabled={faviconUploading}
-                    onClick={async () => {
-                      setFaviconMessage('');
-                      setFaviconUploading(true);
-                      try {
-                        const res = await fetch('/api/admin/favicon', { method: 'DELETE' });
-                        const data = await res.json();
-                        setFaviconMessage(res.ok ? data.message : `Error: ${data.error}`);
-                      } catch {
-                        setFaviconMessage('Error: Reset failed');
-                      } finally {
-                        setFaviconUploading(false);
-                      }
-                    }}
-                  >
-                    Reset
-                  </button>
-                  {faviconUploading && <div className="admin-spinner" />}
-                </div>
-                {faviconMessage && (
-                  <p
-                    className={`save-message ${faviconMessage.startsWith('Error') ? 'error' : 'success'}`}
-                  >
-                    {faviconMessage}
-                  </p>
-                )}
-                <span className="admin-field-hint">
-                  SVG, PNG, ICO, or JPEG — max 512 kB. Stored in the content volume. Reset restores
-                  the bundled default.
-                </span>
-              </div>
-            </div>
-          )}
-
-          {activeSection === 'theme' && (
-            <div className="settings-panel theme-settings-panel">
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconPalette size={18} /> Theme Presets &amp; Color Mode
-                </h3>
-                <p className="settings-section-sub">
-                  Choose a typography preset and preview in Light or Dark mode.
-                </p>
-              </div>
-
-              <div className="admin-field">
-                <label>Visitor Default Mode</label>
-                <select
-                  aria-label="Visitor default mode"
-                  value={settings.mode || 'dark'}
-                  onChange={(e) => update('mode', e.target.value)}
-                >
-                  <option value="dark">Dark</option>
-                  <option value="light">Light</option>
-                  <option value="auto">Follow the visitor&apos;s system</option>
-                </select>
-                <p className="admin-field-hint">
-                  What a first-time visitor sees. The light/dark toggle in the site header still
-                  lets them choose, and their choice is remembered on their device. The preview
-                  below is your own, and does not change this.
-                </p>
-              </div>
-
-              <OptionGrid
-                label="Preset"
-                options={PRESET_OPTIONS}
-                value={settings.theme?.preset || DEFAULT_PRESET}
-                onSelect={(v) => update('theme.preset', v)}
-                cardClassName="theme-preset-card"
-                renderPreview={(o) => <PresetPreview value={o.value} />}
-                renderSpecs={(o) => <PresetSpecs value={o.value} />}
-                cardStyle={(o) => {
-                  const i = themeInfo(o.value);
-                  return {
-                    '--preset-accent': i.accent,
-                    '--preset-bg': i.bg,
-                    '--preset-tile': i.tile,
-                    '--preset-radius': `${i.radius}px`,
-                    '--preset-gap': `${i.gap}px`,
-                  } as React.CSSProperties;
-                }}
-              />
-
-              <div className="admin-field">
-                <label>Color Mode</label>
-                <p
-                  style={{
-                    fontSize: '0.78rem',
-                    color: 'var(--admin-text-muted)',
-                    margin: '0.25rem 0 0.6rem',
-                    lineHeight: '1.4',
-                  }}
-                >
-                  Presets like <strong>Editorial</strong>, <strong>Minimal</strong> &amp;{' '}
-                  <strong>Classic</strong> feature warm light/cream backgrounds in Light Mode and
-                  charcoal in Dark Mode.
-                </p>
-                <div className="segmented-control">
-                  <button
-                    type="button"
-                    className={`segment-btn ${currentMode === 'light' ? 'active' : ''}`}
-                    onClick={() => toggleMode('light')}
-                  >
-                    <Icons.IconSun size={14} /> Light Mode (Cream / Beige)
-                  </button>
-                  <button
-                    type="button"
-                    className={`segment-btn ${currentMode === 'dark' ? 'active' : ''}`}
-                    onClick={() => toggleMode('dark')}
-                  >
-                    <Icons.IconMoon size={14} /> Dark Mode (Charcoal)
-                  </button>
-                </div>
-              </div>
-
-              <div className="settings-section-divider" />
-
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconTarget size={18} /> Accent Color
-                </h3>
-                <p className="settings-section-sub">
-                  Pick a primary accent color for links, buttons, and highlights.
-                </p>
-              </div>
-
-              <div className="admin-field">
-                <div className="accent-picker-wrapper">
-                  <div className="color-swatches-row">
-                    {[
-                      { hex: '#e60012', name: 'Studio Red' },
-                      { hex: '#b89053', name: 'Editorial Gold' },
-                      { hex: '#10b981', name: 'Emerald' },
-                      { hex: '#3b82f6', name: 'Sapphire' },
-                      { hex: '#8b5cf6', name: 'Violet' },
-                      { hex: '#ffffff', name: 'Monochrome White' },
-                      { hex: '#000000', name: 'Obsidian Black' },
-                    ].map((swatch) => {
-                      const isSelected =
-                        (settings.theme?.accent || '#e60012').toLowerCase() ===
-                        swatch.hex.toLowerCase();
-                      return (
-                        <button
-                          key={swatch.hex}
-                          type="button"
-                          className={`color-swatch-btn ${isSelected ? 'active' : ''}`}
-                          style={{ backgroundColor: swatch.hex }}
-                          onClick={() => update('theme.accent', swatch.hex)}
-                          title={swatch.name}
-                        />
-                      );
-                    })}
-                  </div>
-                  <div className="color-field">
-                    <input
-                      type="color"
-                      value={settings.theme?.accent || '#e60012'}
-                      onChange={(e) => update('theme.accent', e.target.value)}
-                    />
-                    <input
-                      type="text"
-                      value={settings.theme?.accent || ''}
-                      onChange={(e) => update('theme.accent', e.target.value)}
-                      placeholder="#e60012"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <div className="settings-section-divider" />
-
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconFrame size={18} /> Photo Frame &amp; Layout
-                </h3>
-                <p className="settings-section-sub">
-                  Customize image presentation borders and hero layouts.
-                </p>
-              </div>
-
-              <OptionGrid
-                label="Photo Frame"
-                options={PHOTO_FRAME_OPTIONS}
-                value={settings.theme?.photoFrame || 'none'}
-                onSelect={(v) => update('theme.photoFrame', v)}
-                cardClassName="frame-card"
-                renderPreview={(o) => <PhotoFramePreview value={o.value} />}
-              />
-
-              <OptionGrid
-                label="Hero Style"
-                options={HERO_STYLE_OPTIONS}
-                value={settings.theme?.heroStyle || 'split'}
-                onSelect={(v) => update('theme.heroStyle', v)}
-                cardClassName="hero-card"
-                renderPreview={(o) => <HeroStylePreview value={o.value} />}
-              />
-
-              <div className="settings-section-divider" />
-
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconSparkles size={18} /> Finishing Touches
-                </h3>
-                <p className="settings-section-sub">
-                  Enable optional visual effects and indicators.
-                </p>
-              </div>
-
-              <div className="admin-toggle-cards-grid">
-                <ToggleCard
-                  icon={<Icons.IconFilm size={16} />}
-                  title="Film Grain Texture"
-                  description="Adds analog noise overlay across portfolio background"
-                  checked={settings.theme?.grain === true}
-                  onToggle={() => update('theme.grain', !settings.theme?.grain)}
-                />
-
-                <ToggleCard
-                  icon={<Icons.IconTarget size={16} />}
-                  title="Header Accent Dot"
-                  description="Displays accent dot next to active section header"
-                  checked={settings.theme?.headerDot !== false}
-                  onToggle={() => update('theme.headerDot', settings.theme?.headerDot === false)}
-                />
-              </div>
-            </div>
-          )}
-
-          {activeSection === 'grid' && (
-            <div className="settings-panel">
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconGrid size={18} /> Grid &amp; Layout Engine
-                </h3>
-                <p className="settings-section-sub">
-                  Configure photography gallery column structures and thumbnail aspect ratios.
-                </p>
-              </div>
-
-              <OptionGrid
-                label="Layout Algorithm"
-                options={LAYOUT_OPTIONS}
-                value={settings.grid?.layout || 'masonry'}
-                onSelect={(v) => update('grid.layout', v)}
-                cardClassName="grid-layout-card"
-                renderPreview={(o) => <LayoutPreview value={o.value} />}
-              />
-
-              <OptionGrid
-                label="Aspect Ratio"
-                options={ASPECT_RATIO_OPTIONS}
-                value={settings.grid?.aspectRatio || '1'}
-                onSelect={(v) => update('grid.aspectRatio', v)}
-                cardClassName="ratio-card"
-                renderPreview={(o) => <AspectRatioPreview value={o.value} />}
-              />
-
-              <div className="settings-section-divider" />
-
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconColumns size={18} /> Spacing &amp; Columns
-                </h3>
-                <p className="settings-section-sub">
-                  Adjust column counts and grid gap spacing. The column count also tiles the album
-                  covers on a subpage; their spacing stays with the theme unless a page overrides
-                  it.
-                </p>
-              </div>
-
-              <div className="admin-field-row">
-                <div className="admin-field">
-                  <label>
-                    Columns ({PHOTO_GRID_COLUMNS_MIN} - {PHOTO_GRID_COLUMNS_MAX})
-                  </label>
-                  <input
-                    type="number"
-                    min={PHOTO_GRID_COLUMNS_MIN}
-                    max={PHOTO_GRID_COLUMNS_MAX}
-                    value={settings.grid?.columns ?? 3}
-                    onChange={(e) => update('grid.columns', parseInt(e.target.value) || 3)}
-                  />
-                </div>
-                <div className="admin-field">
-                  <label>Gap Spacing (px)</label>
-                  <input
-                    type="number"
-                    min={0}
-                    max={PHOTO_GRID_GAP_MAX}
-                    value={settings.grid?.gap ?? 12}
-                    onChange={(e) => update('grid.gap', parseInt(e.target.value) || 0)}
-                  />
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeSection === 'footer' && (
-            <div className="settings-panel">
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconLink size={18} /> Footer &amp; Social Links
-                </h3>
-                <p className="settings-section-sub">
-                  Display branding, Instagram, email and website links in portfolio footer.
-                </p>
-              </div>
-
-              <div className="admin-field">
-                <label>Footer Brand Name</label>
-                <input
-                  value={settings.footer?.name || ''}
-                  onChange={(e) => update('footer.name', e.target.value)}
-                  placeholder="My Photography"
-                />
-              </div>
-              <div className="admin-field">
-                <label>Instagram URL</label>
-                <input
-                  value={settings.footer?.instagram || ''}
-                  onChange={(e) => update('footer.instagram', e.target.value)}
-                  placeholder="https://instagram.com/your-handle"
-                />
-              </div>
-              <div className="admin-field-row">
-                <div className="admin-field">
-                  <label>Contact Email</label>
-                  <input
-                    value={settings.footer?.email || ''}
-                    onChange={(e) => update('footer.email', e.target.value)}
-                    placeholder="hello@example.com"
-                  />
-                </div>
-                <div className="admin-field">
-                  <label>Personal Website</label>
-                  <input
-                    value={settings.footer?.website || ''}
-                    onChange={(e) => update('footer.website', e.target.value)}
-                    placeholder="https://example.com"
-                  />
-                </div>
-              </div>
-
-              <div className="settings-section-header" style={{ marginTop: '2rem' }}>
-                <h3>
-                  <Icons.IconLink size={18} /> Header Navigation Links (Experimental)
-                </h3>
-                <p className="settings-section-sub">
-                  External links shown after your pages in the header menu. Only http(s) URLs are
-                  allowed; they open in a new tab.
-                </p>
-              </div>
-
-              {(settings.navLinks || []).map((link, i) => (
-                <div className="admin-field-row" key={i}>
-                  <div className="admin-field">
-                    <label>Label</label>
-                    <input
-                      value={link.label || ''}
-                      onChange={(e) => {
-                        const next = [...(settings.navLinks || [])];
-                        next[i] = { ...next[i], label: e.target.value };
-                        update('navLinks', next);
-                      }}
-                      placeholder="Shop"
-                    />
-                  </div>
-                  <div className="admin-field">
-                    <label>URL</label>
-                    <input
-                      value={link.url || ''}
-                      onChange={(e) => {
-                        const next = [...(settings.navLinks || [])];
-                        next[i] = { ...next[i], url: e.target.value };
-                        update('navLinks', next);
-                      }}
-                      placeholder="https://shop.example.com"
-                    />
-                  </div>
-                  <button
-                    type="button"
-                    className="admin-btn admin-btn-sm"
-                    style={{ alignSelf: 'flex-end' }}
-                    onClick={() => {
-                      const next = (settings.navLinks || []).filter((_, j) => j !== i);
-                      update('navLinks', next.length > 0 ? next : undefined);
-                    }}
-                    title="Remove link"
-                  >
-                    Remove
-                  </button>
-                </div>
-              ))}
-              <button
-                type="button"
-                className="admin-btn admin-btn-sm"
-                onClick={() =>
-                  update('navLinks', [...(settings.navLinks || []), { label: '', url: '' }])
-                }
-              >
-                + Add external link
-              </button>
-            </div>
-          )}
-
-          {activeSection === 'legal' && (
-            <div className="settings-panel">
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconScale size={18} /> Legal Notice &amp; Impressum
-                </h3>
-                <p className="settings-section-sub">
-                  Configure required legal disclosure page for EU / German Telemediengesetz
-                  compliance.
-                </p>
-              </div>
-
-              <div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
-                <ToggleCard
-                  icon={<Icons.IconFileText size={16} />}
-                  title="Enable Impressum Page (/impressum)"
-                  description="Automatically generates and links /impressum in footer"
-                  checked={settings.legal?.enabled === true}
-                  onToggle={() => update('legal.enabled', !settings.legal?.enabled)}
-                />
-              </div>
-
-              {settings.legal?.enabled && (
-                <>
-                  <div className="admin-field-row">
-                    <div className="admin-field">
-                      <label>Full Name / Business Name</label>
-                      <input
-                        value={settings.legal?.name || ''}
-                        onChange={(e) => update('legal.name', e.target.value)}
-                        placeholder="Max Mustermann"
-                      />
-                    </div>
-                    <div className="admin-field">
-                      <label>Street Address</label>
-                      <input
-                        value={settings.legal?.address || ''}
-                        onChange={(e) => update('legal.address', e.target.value)}
-                        placeholder="Musterstraße 1"
-                      />
-                    </div>
-                  </div>
-                  <div className="admin-field-row">
-                    <div className="admin-field">
-                      <label>ZIP &amp; City</label>
-                      <input
-                        value={settings.legal?.zipCity || ''}
-                        onChange={(e) => update('legal.zipCity', e.target.value)}
-                        placeholder="12345 Berlin"
-                      />
-                    </div>
-                    <div className="admin-field">
-                      <label>Country</label>
-                      <input
-                        value={settings.legal?.country || ''}
-                        onChange={(e) => update('legal.country', e.target.value)}
-                        placeholder="Germany"
-                      />
-                    </div>
-                  </div>
-                  <div className="admin-field-row">
-                    <div className="admin-field">
-                      <label>Legal Email</label>
-                      <input
-                        value={settings.legal?.email || ''}
-                        onChange={(e) => update('legal.email', e.target.value)}
-                        placeholder="legal@example.com"
-                      />
-                    </div>
-                    <div className="admin-field">
-                      <label>Phone Number</label>
-                      <input
-                        value={settings.legal?.phone || ''}
-                        onChange={(e) => update('legal.phone', e.target.value)}
-                        placeholder="+49 123 456789"
-                      />
-                    </div>
-                  </div>
-                  <div className="admin-field">
-                    <label>Additional Disclosures / Tax ID</label>
-                    <textarea
-                      value={settings.legal?.extraInfo || ''}
-                      onChange={(e) => update('legal.extraInfo', e.target.value)}
-                      placeholder="Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV..."
-                      rows={3}
-                    />
-                  </div>
-                </>
-              )}
-            </div>
-          )}
-
-          {activeSection === 'seo' && (
-            <div className="settings-panel">
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconSearch size={18} /> Search Engine Optimization (SEO)
-                </h3>
-                <p className="settings-section-sub">
-                  Customize search engine metadata, OpenGraph tags, and indexing rules.
-                </p>
-              </div>
-
-              {/* Live Google Search Result Snippet Card */}
-              <div className="google-snippet-preview">
-                <div className="google-snippet-header">
-                  <span>
-                    <Icons.IconGlobe size={14} /> Google Search Result Preview
-                  </span>
-                </div>
-                <div className="google-snippet-card">
-                  <div className="google-snippet-url">
-                    https://yourportfolio.com <span className="google-snippet-arrow">▼</span>
-                  </div>
-                  <div className="google-snippet-title">
-                    {settings.seo?.title || settings.title || 'My Photography Portfolio'}
-                  </div>
-                  <div className="google-snippet-desc">
-                    {settings.seo?.description ||
-                      settings.subtitle ||
-                      'A curated selection of photography work.'}
-                  </div>
-                </div>
-              </div>
-
-              <div className="admin-field">
-                <label>Site URL</label>
-                <input
-                  value={settings.url || ''}
-                  onChange={(e) => update('url', e.target.value)}
-                  placeholder="https://folio.example"
-                />
-                <p style={{ fontSize: '0.8rem', opacity: 0.7, marginTop: '4px' }}>
-                  Needed for <code>sitemap.xml</code>, the feed and structured data — those are
-                  generated without a request, so the address cannot be derived from it. Leave empty
-                  and the sitemap stays empty rather than guessing.
-                  {siteUrlInfo?.source === 'env' && (
-                    <>
-                      <br />
-                      Currently supplied by the <code>SITE_URL</code> environment variable (
-                      <code>{siteUrlInfo.effective}</code>). A value entered here takes precedence
-                      once saved.
-                    </>
-                  )}
-                </p>
-              </div>
-
-              <div className="admin-field">
-                <label>SEO Meta Title</label>
-                <input
-                  value={settings.seo?.title || ''}
-                  onChange={(e) => update('seo.title', e.target.value)}
-                  placeholder="Overrides default site title for Google search results"
-                />
-              </div>
-
-              <div className="admin-field">
-                <label>Subpage Title Template</label>
-                <input
-                  value={settings.seo?.titleTemplate || ''}
-                  onChange={(e) => update('seo.titleTemplate', e.target.value)}
-                  placeholder={`%s | ${settings.seo?.title || settings.title || 'My Portfolio'}`}
-                />
-                <p style={{ fontSize: '0.8rem', opacity: 0.7, marginTop: '4px' }}>
-                  Template for subpages &amp; albums. Use <code>%s</code> as placeholder for the
-                  page title.
-                  <br />
-                  <strong>Preview:</strong>{' '}
-                  {(
-                    settings.seo?.titleTemplate ||
-                    `%s | ${settings.seo?.title || settings.title || 'My Portfolio'}`
-                  ).replace('%s', 'Landscapes')}
-                </p>
-              </div>
-
-              <div className="admin-field">
-                <label>SEO Meta Description</label>
-                <textarea
-                  value={settings.seo?.description || ''}
-                  onChange={(e) => update('seo.description', e.target.value)}
-                  placeholder="A curated selection of photography work..."
-                  rows={3}
-                />
-              </div>
-
-              <div className="settings-section-divider" />
-
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconGlobe size={18} /> Search Crawler Directives
-                </h3>
-                <p className="settings-section-sub">
-                  Control how Googlebot and other web crawlers index your site.
-                </p>
-              </div>
-
-              <div className="admin-toggle-cards-grid">
-                <ToggleCard
-                  icon={<Icons.IconBan size={16} />}
-                  title="noindex (Hide from Google)"
-                  description="Instructs search engines NOT to index this site in search results"
-                  checked={settings.seo?.noIndex === true}
-                  onToggle={() => update('seo.noIndex', !settings.seo?.noIndex)}
-                />
-
-                <ToggleCard
-                  icon={<Icons.IconLink size={16} />}
-                  title="nofollow (Block Link Following)"
-                  description="Instructs search engine crawlers not to follow outgoing links"
-                  checked={settings.seo?.noFollow === true}
-                  onToggle={() => update('seo.noFollow', !settings.seo?.noFollow)}
-                />
-              </div>
-            </div>
-          )}
-
-          {activeSection === 'security' && (
-            <div className="settings-panel">
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconLock size={18} /> Site Password
-                </h3>
-                <p className="settings-section-sub">
-                  Puts the whole public site behind one password — useful while a portfolio is still
-                  being built, or for a folio only ever shown to clients.
-                </p>
-              </div>
-
-              <div className="admin-field">
-                <label>Site Password</label>
-                <input
-                  type="text"
-                  value={settings.sitePassword || ''}
-                  onChange={(e) => update('sitePassword', e.target.value)}
-                  placeholder="Leave empty for a public site"
-                  autoComplete="off"
-                />
-                <p className="admin-field-hint">
-                  Stored in <code>settings.yaml</code>. Log in once and the server log prints a{' '}
-                  <code>scrypt:…</code> hash to paste back here instead of the plaintext. The{' '}
-                  <code>SITE_PASSWORD</code> environment variable overrides this field. The admin
-                  panel keeps its own password and is never behind this gate.
-                </p>
-              </div>
-
-              <div className="settings-section-divider" />
-
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconShieldCheck size={18} /> Asset Protection &amp; Watermark
-                </h3>
-                <p className="settings-section-sub">
-                  Configure image protection rules, right-click prevention, and watermark overlay.
-                </p>
-              </div>
-
-              <div className="admin-toggle-cards-grid">
-                <ToggleCard
-                  icon={<Icons.IconLock size={16} />}
-                  title="Disable Right-Click Menu"
-                  description="Prevents context menu on portfolio images to hinder unauthorized downloads"
-                  checked={settings.protection?.disableRightClick === true}
-                  onToggle={() =>
-                    update('protection.disableRightClick', !settings.protection?.disableRightClick)
-                  }
-                />
-
-                <ToggleCard
-                  icon={<Icons.IconBan size={16} />}
-                  title="Disable Image Dragging"
-                  description="Prevents visitors from dragging images off the portfolio page"
-                  checked={settings.protection?.disableImageDrag === true}
-                  onToggle={() =>
-                    update('protection.disableImageDrag', !settings.protection?.disableImageDrag)
-                  }
-                />
-              </div>
-
-              <div className="settings-section-divider" />
-
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconSparkles size={18} /> Dynamic Watermark Overlay
-                </h3>
-                <p className="settings-section-sub">
-                  Overlay copyright branding text on Lightbox images.
-                </p>
-              </div>
-
-              <div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
-                <ToggleCard
-                  icon={<Icons.IconFrame size={16} />}
-                  title="Enable Watermark"
-                  description="Overlay copyright text on portfolio image views"
-                  checked={settings.watermark?.enabled === true}
-                  onToggle={() => update('watermark.enabled', !settings.watermark?.enabled)}
-                />
-              </div>
-
-              {settings.watermark?.enabled && (
-                <>
-                  <div className="admin-field">
-                    <label>Watermark Text</label>
-                    <input
-                      value={settings.watermark?.text || ''}
-                      onChange={(e) => update('watermark.text', e.target.value)}
-                      placeholder="© Ralfo Photography"
-                    />
-                  </div>
-
-                  <div className="admin-field-row">
-                    <div className="admin-field">
-                      <label>Position</label>
-                      <select
-                        aria-label="Watermark position"
-                        value={settings.watermark?.position || 'bottom-right'}
-                        onChange={(e) => update('watermark.position', e.target.value)}
-                      >
-                        <option value="bottom-right">Bottom Right</option>
-                        <option value="bottom-left">Bottom Left</option>
-                        <option value="center">Center Overlay</option>
-                      </select>
-                    </div>
-                    <div className="admin-field">
-                      {/* Read through the same normaliser the lightbox uses, so a
-                          config written as a percentage shows as "90%" here rather
-                          than "9000%" — and is written back as a fraction on save. */}
-                      <label>
-                        Opacity (
-                        {Math.round(resolveWatermarkOpacity(settings.watermark?.opacity) * 100)}
-                        %)
-                      </label>
-                      <input
-                        type="range"
-                        min="0.1"
-                        max="1"
-                        step="0.05"
-                        value={resolveWatermarkOpacity(settings.watermark?.opacity)}
-                        onChange={(e) => update('watermark.opacity', parseFloat(e.target.value))}
-                      />
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-          )}
-
-          {activeSection === 'about' && (
-            <div className="settings-panel">
-              <div className="settings-section-header">
-                <h3>
-                  <Icons.IconCamera size={18} /> About Page
-                </h3>
-                <p className="settings-section-sub">
-                  Edit the portrait, biography and gear shown on the About page. Use General to show
-                  or hide the page itself.
-                </p>
-              </div>
-
-              {aboutLoading ? (
-                <div className="admin-spinner" style={{ margin: '2rem auto' }} />
-              ) : (
-                <>
-                  <div className="admin-field">
-                    <label>Portrait Asset ID</label>
-                    <input
-                      value={aboutMeta.portrait || ''}
-                      onChange={(e) => updateAboutMeta('portrait', e.target.value)}
-                      placeholder="Immich asset UUID for the portrait photo"
-                    />
-                  </div>
-                  <div className="admin-field">
-                    <label>Name</label>
-                    <input
-                      value={aboutMeta.name || ''}
-                      onChange={(e) => updateAboutMeta('name', e.target.value)}
-                      placeholder="Your name"
-                    />
-                  </div>
-                  <div className="admin-field">
-                    <label>Location</label>
-                    <input
-                      value={aboutMeta.location || ''}
-                      onChange={(e) => updateAboutMeta('location', e.target.value)}
-                      placeholder="City, Country"
-                    />
-                  </div>
-                  <div className="admin-field">
-                    <label>Gear (one per line)</label>
-                    <textarea
-                      value={aboutGearText}
-                      onChange={(e) => {
-                        setAboutGearText(e.target.value);
-                        setAboutDirty(true);
-                        setAboutMessage('');
-                      }}
-                      placeholder={`Leica Q3\nSummilux 35mm f/1.4`}
-                      rows={4}
-                    />
-                  </div>
-                  <div className="admin-field">
-                    <label>Biography (Markdown)</label>
-                    <textarea
-                      value={aboutBody}
-                      onChange={(e) => {
-                        setAboutBody(e.target.value);
-                        setAboutDirty(true);
-                        setAboutMessage('');
-                      }}
-                      placeholder="Photographer based in..."
-                      rows={6}
-                    />
-                  </div>
-                </>
-              )}
-            </div>
-          )}
+          {activeSection === 'general' && <GeneralSection {...props} />}
+          {activeSection === 'theme' && <ThemeSection {...props} />}
+          {activeSection === 'grid' && <GridSection {...props} />}
+          {activeSection === 'footer' && <FooterSection {...props} />}
+          {activeSection === 'legal' && <LegalSection {...props} />}
+          {activeSection === 'seo' && <SeoSection {...props} siteUrlInfo={siteUrlInfo} />}
+          {activeSection === 'security' && <SecuritySection {...props} />}
+          {activeSection === 'about' && <AboutSection about={about} />}
         </div>
       </div>
     </div>
diff --git a/app/admin/components/__tests__/AdminDashboard-reload.test.tsx b/app/admin/components/__tests__/AdminDashboard-reload.test.tsx
index 3d21183..8b5eed7 100644
--- a/app/admin/components/__tests__/AdminDashboard-reload.test.tsx
+++ b/app/admin/components/__tests__/AdminDashboard-reload.test.tsx
@@ -3,6 +3,7 @@ import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import AdminDashboard from '../AdminDashboard';
 import { SESSION_EXPIRED_EVENT } from '../sessionExpiry';
+import { NotificationProvider } from '../Notifications';
 
 vi.mock('next/navigation', () => ({
   usePathname: () => '/admin',
@@ -16,8 +17,6 @@ afterEach(cleanup);
  */
 describe('AdminDashboard reload failure reporting', () => {
   it('reports a non-ok, non-401 reload failure', async () => {
-    const alertMock = vi.fn();
-    vi.stubGlobal('alert', alertMock);
     vi.stubGlobal(
       'fetch',
       vi.fn(async (url: string, init?: RequestInit) => {
@@ -29,19 +28,22 @@ describe('AdminDashboard reload failure reporting', () => {
     );
 
     render(
-      <AdminDashboard onLogout={() => {}}>
-        <div>Panel</div>
-      </AdminDashboard>,
+      <NotificationProvider>
+        <AdminDashboard onLogout={() => {}}>
+          <div>Panel</div>
+        </AdminDashboard>
+      </NotificationProvider>,
     );
 
     fireEvent.click(screen.getByTitle('Reload config & clear cache'));
 
-    await waitFor(() => expect(alertMock).toHaveBeenCalledWith('Reload failed (HTTP 500).'));
+    // Reported through the notification surface (#600), not alert().
+    await waitFor(() =>
+      expect(screen.getByRole('alert').textContent).toContain('Reload failed (HTTP 500).'),
+    );
   });
 
-  it('raises the session-expired event instead of alerting on a 401', async () => {
-    const alertMock = vi.fn();
-    vi.stubGlobal('alert', alertMock);
+  it('raises the session-expired event instead of reporting an error on a 401', async () => {
     const listener = vi.fn();
     window.addEventListener(SESSION_EXPIRED_EVENT, listener);
     vi.stubGlobal(
@@ -55,21 +57,21 @@ describe('AdminDashboard reload failure reporting', () => {
     );
 
     render(
-      <AdminDashboard onLogout={() => {}}>
-        <div>Panel</div>
-      </AdminDashboard>,
+      <NotificationProvider>
+        <AdminDashboard onLogout={() => {}}>
+          <div>Panel</div>
+        </AdminDashboard>
+      </NotificationProvider>,
     );
 
     fireEvent.click(screen.getByTitle('Reload config & clear cache'));
 
     await waitFor(() => expect(listener).toHaveBeenCalledOnce());
-    expect(alertMock).not.toHaveBeenCalled();
+    expect(screen.getByRole('alert').textContent).toBe('');
     window.removeEventListener(SESSION_EXPIRED_EVENT, listener);
   });
 
-  it('does not alert when the reload succeeds', async () => {
-    const alertMock = vi.fn();
-    vi.stubGlobal('alert', alertMock);
+  it('reports no error when the reload succeeds', async () => {
     const fetchMock = vi.fn(async (url: string, init?: RequestInit) => {
       if (url === '/api/admin/reload' && init?.method === 'POST') {
         return new Response(null, { status: 200 });
@@ -79,9 +81,11 @@ describe('AdminDashboard reload failure reporting', () => {
     vi.stubGlobal('fetch', fetchMock);
 
     render(
-      <AdminDashboard onLogout={() => {}}>
-        <div>Panel</div>
-      </AdminDashboard>,
+      <NotificationProvider>
+        <AdminDashboard onLogout={() => {}}>
+          <div>Panel</div>
+        </AdminDashboard>
+      </NotificationProvider>,
     );
 
     fireEvent.click(screen.getByTitle('Reload config & clear cache'));
@@ -93,6 +97,6 @@ describe('AdminDashboard reload failure reporting', () => {
         ),
       ).toHaveLength(1),
     );
-    expect(alertMock).not.toHaveBeenCalled();
+    expect(screen.getByRole('alert').textContent).toBe('');
   });
 });
diff --git a/app/admin/components/contentRestored.ts b/app/admin/components/contentRestored.ts
new file mode 100644
index 0000000..a7964dc
--- /dev/null
+++ b/app/admin/components/contentRestored.ts
@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import type { BackupTarget } from '@/app/api/admin/backups/route';
+
+/**
+ * A backup restore rewrote a content file behind the editors' backs.
+ *
+ * The page builder, settings and journal editors stay mounted in their
+ * layouts, holding what they loaded before the restore. Left alone, the next
+ * save wrote that older state straight over the restored file. So the backup
+ * manager announces the restore and each editor reloads the file it owns —
+ * through its draft, so unsaved edits come back as a `conflict` the operator
+ * decides on instead of vanishing or winning silently.
+ *
+ * Same pattern as SESSION_EXPIRED_EVENT in sessionExpiry.ts.
+ */
+export const CONTENT_RESTORED_EVENT = 'folio:admin-content-restored';
+
+export interface ContentRestored {
+  target: BackupTarget;
+  /** The journal entry, for `journal`. */
+  slug?: string;
+}
+
+export function reportContentRestored(detail: ContentRestored): void {
+  window.dispatchEvent(new CustomEvent<ContentRestored>(CONTENT_RESTORED_EVENT, { detail }));
+}
+
+export function useContentRestored(handler: (detail: ContentRestored) => void): void {
+  const handlerRef = useRef(handler);
+  useEffect(() => {
+    handlerRef.current = handler;
+  });
+  useEffect(() => {
+    const onRestored = (e: Event) => handlerRef.current((e as CustomEvent<ContentRestored>).detail);
+    window.addEventListener(CONTENT_RESTORED_EVENT, onRestored);
+    return () => window.removeEventListener(CONTENT_RESTORED_EVENT, onRestored);
+  }, []);
+}
diff --git a/app/admin/components/fields/GridOverrideFields.tsx b/app/admin/components/fields/GridOverrideFields.tsx
index 196aaf3..9c984d7 100644
--- a/app/admin/components/fields/GridOverrideFields.tsx
+++ b/app/admin/components/fields/GridOverrideFields.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { ReactNode } from 'react';
+import { useId, type ReactNode } from 'react';
 
 type GridOverride = { columns?: number; gap?: number };
 
@@ -50,16 +50,20 @@ export default function GridOverrideFields({
     });
   };
 
+  const labelId = useId();
   return (
     <div className="admin-field" style={{ marginTop: '1rem' }}>
-      <label>{label}</label>
-      <div style={{ display: 'flex', gap: '12px' }}>
+      <span className="admin-field-label" id={labelId}>
+        {label}
+      </span>
+      <div style={{ display: 'flex', gap: '12px' }} role="group" aria-labelledby={labelId}>
         <input
           type="number"
           min={columnsMin}
           max={columnsMax}
           value={value?.columns ?? ''}
           placeholder="Columns (site default)"
+          aria-label="Columns"
           onChange={(e) => patch('columns', e.target.value, columnsMin, columnsMax)}
           style={NUMBER_INPUT_STYLE}
         />
@@ -69,6 +73,7 @@ export default function GridOverrideFields({
           max={gapMax}
           value={value?.gap ?? ''}
           placeholder="Gap in px (theme default)"
+          aria-label="Gap in px"
           onChange={(e) => patch('gap', e.target.value, 0, gapMax)}
           style={NUMBER_INPUT_STYLE}
         />
diff --git a/app/admin/components/fields/OptionGrid.tsx b/app/admin/components/fields/OptionGrid.tsx
index 65ab16d..701a9f1 100644
--- a/app/admin/components/fields/OptionGrid.tsx
+++ b/app/admin/components/fields/OptionGrid.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { CSSProperties, ReactNode } from 'react';
+import { useId, type CSSProperties, type ReactNode } from 'react';
 
 export type CardOption = { value: string; label: string; desc: string };
 
@@ -55,10 +55,14 @@ export default function OptionGrid({
   renderSpecs?: (option: CardOption) => ReactNode;
   cardStyle?: (option: CardOption) => CSSProperties | undefined;
 }) {
+  // A group of buttons, not one control, so it is named as a group (#694 §4).
+  const labelId = useId();
   return (
     <div className="admin-field">
-      <label>{label}</label>
-      <div className="preset-card-grid">
+      <span className="admin-field-label" id={labelId}>
+        {label}
+      </span>
+      <div className="preset-card-grid" role="group" aria-labelledby={labelId}>
         {options.map((option) => {
           const isActive = value === option.value;
           return (
diff --git a/app/admin/components/fields/PasswordField.tsx b/app/admin/components/fields/PasswordField.tsx
new file mode 100644
index 0000000..9f6ef50
--- /dev/null
+++ b/app/admin/components/fields/PasswordField.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { useId, useState } from 'react';
+import { IconEye, IconEyeOff, IconLock } from '../Icons';
+
+/**
+ * One password input for every place the admin sets one: subpage, album,
+ * journal entry and site password (#690).
+ *
+ * The save routes store passwords as scrypt hashes (lib/admin/passwordHashing.ts),
+ * so a saved password comes back as `scrypt:…`. That value is never put into
+ * the input: showing it would invite editing a hash, and saving an edited hash
+ * would lock the page with the hash string. Instead the field reads
+ * "Protected", with Change and Remove.
+ *
+ * A plaintext value from a hand-written file is shown in the input as before;
+ * the next save stores it hashed.
+ */
+export default function PasswordField({
+  value,
+  onChange,
+  placeholder = 'Leave empty for public access',
+  disabled,
+  label,
+  id: idProp,
+}: {
+  value: string | undefined;
+  /** `undefined` removes the password. */
+  onChange: (value: string | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Accessible name when there is no visible <label> for the field. */
+  label?: string;
+  /** For a visible <label htmlFor>; generated otherwise. */
+  id?: string;
+}) {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  /** The stored hash while it is being changed, so "Keep" can put it back. */
+  const [original, setOriginal] = useState<string | null>(null);
+  const [revealed, setRevealed] = useState(false);
+  const isHash = !!value && value.startsWith('scrypt:');
+  // Derived rather than stored: a save that brings back a new hash ends the
+  // change without the field having to be told.
+  const changing = original !== null && (value === original || !isHash);
+
+  if (isHash && !changing) {
+    return (
+      <div className="password-field password-field--set">
+        <span className="password-field__status">
+          <IconLock size={12} /> Protected
+        </span>
+        <button
+          type="button"
+          className="admin-btn admin-btn-ghost admin-btn-sm"
+          // The hash stays in the form until something is typed, so opening
+          // the field and saving is not a way to lose the password.
+          onClick={() => setOriginal(value)}
+          disabled={disabled}
+        >
+          Change
+        </button>
+        <button
+          type="button"
+          className="admin-btn admin-btn-ghost admin-btn-sm"
+          onClick={() => onChange(undefined)}
+          disabled={disabled}
+        >
+          Remove
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="password-field">
+      <div className="password-input-wrapper">
+        <span className="password-icon" aria-hidden="true">
+          <IconLock size={12} />
+        </span>
+        <input
+          id={id}
+          type={revealed ? 'text' : 'password'}
+          value={changing && value === original ? '' : (value ?? '')}
+          // Emptying the field while changing falls back to the stored hash;
+          // only Remove takes a password away.
+          onChange={(e) => onChange(e.target.value || (changing ? original! : undefined))}
+          placeholder={changing ? 'New password' : placeholder}
+          aria-label={label}
+          autoComplete="new-password"
+          disabled={disabled}
+          autoFocus={changing}
+        />
+        <button
+          type="button"
+          className="password-field__reveal"
+          onClick={() => setRevealed((r) => !r)}
+          aria-label={revealed ? 'Hide password' : 'Show password'}
+          aria-pressed={revealed}
+          aria-controls={id}
+          disabled={disabled}
+        >
+          {revealed ? <IconEyeOff size={14} /> : <IconEye size={14} />}
+        </button>
+      </div>
+      {changing && (
+        <button
+          type="button"
+          className="admin-btn admin-btn-ghost admin-btn-sm password-field__cancel"
+          onClick={() => {
+            onChange(original);
+            setOriginal(null);
+          }}
+        >
+          Keep current password
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/app/admin/components/journal/JournalEditor.tsx b/app/admin/components/journal/JournalEditor.tsx
index fd1c938..cc72837 100644
--- a/app/admin/components/journal/JournalEditor.tsx
+++ b/app/admin/components/journal/JournalEditor.tsx
@@ -30,12 +30,14 @@ import { useUnsavedGuard } from '../useUnsavedGuard';
 import { useDraft } from '../useDraft';
 import DraftNotice from '../DraftNotice';
 import { reportIfSessionExpired } from '../sessionExpiry';
+import { useContentRestored } from '../contentRestored';
 import './journal-studio.css';
 import { BlockFields, type AssetPickTarget } from './BlockFields';
 import { StorySettingsModal } from './StorySettingsModal';
 import { JournalPreview } from './JournalPreview';
 import { createBlock, moveBlock } from './blockOps';
 import { useSplitPane, SPLIT_MIN, SPLIT_MAX } from './splitPane';
+import { useNotify } from '../Notifications';
 
 interface JournalEditorProps {
   slug: string;
@@ -44,6 +46,7 @@ interface JournalEditorProps {
 }
 
 export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps) {
+  const notify = useNotify();
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [dirty, setDirty] = useState(false);
@@ -82,6 +85,12 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
   const loadDraft = draft.load;
   const serverMarkdown = useRef('');
 
+  // Bumped when this entry is restored from a backup, to load it again.
+  const [reloadKey, setReloadKey] = useState(0);
+  useContentRestored(({ target, slug: restored }) => {
+    if (target === 'journal' && restored === slug) setReloadKey((k) => k + 1);
+  });
+
   // Load entry
   useEffect(() => {
     async function load() {
@@ -113,7 +122,7 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
       }
     }
     load();
-  }, [slug, loadDraft]);
+  }, [slug, loadDraft, reloadKey]);
 
   // Update markdown and sync blocks
   const handleMarkdownChange = (newMd: string) => {
@@ -154,6 +163,9 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
   const handleSave = async () => {
     // The editor is not rendered in this state, but Cmd+S still reaches here.
     if (loadError) return;
+    // Nothing to save: every save rotates a backup, so repeated Cmd+S on an
+    // unchanged entry pushed real history out of the ten kept per file.
+    if (!dirty || saving) return;
 
     setSaving(true);
     try {
@@ -166,15 +178,25 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
       });
 
       if (res.ok) {
-        serverMarkdown.current = rawMarkdown;
-        draft.saved(rawMarkdown);
+        // The file as written, not as sent: a password line is hashed on the
+        // way to disk (#690). Taking the sent text as the base would make the
+        // next draft look like a conflicting edit from elsewhere.
+        const data = await res.json().catch(() => null);
+        const written: string =
+          typeof data?.entry?.rawMarkdown === 'string' ? data.entry.rawMarkdown : rawMarkdown;
+        serverMarkdown.current = written;
+        draft.saved(written);
+        if (written !== rawMarkdown) {
+          setRawMarkdown(written);
+          setParsed(parseJournalMarkdown(written));
+        }
         setDirty(false);
       } else if (!reportIfSessionExpired(res)) {
         const data = await res.json();
-        alert(data.error || 'Failed to save');
+        notify('error', data.error || 'Failed to save');
       }
     } catch {
-      alert('Error saving entry');
+      notify('error', 'Could not save the entry. Check the connection and try again.');
     } finally {
       setSaving(false);
     }
@@ -324,6 +346,7 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
             className="journal-editor-title-input"
             value={parsed.frontmatter.title || ''}
             placeholder="Story Title..."
+            aria-label="Story title"
             onChange={(e) => handleFrontmatterChange({ title: e.target.value })}
           />
 
@@ -375,7 +398,7 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
             type="button"
             className="admin-btn admin-btn-sm admin-btn-primary"
             onClick={handleSave}
-            disabled={saving}
+            disabled={saving || !dirty}
           >
             {saving ? (
               'Saving...'
diff --git a/app/admin/components/journal/JournalStudio.tsx b/app/admin/components/journal/JournalStudio.tsx
index 5836192..e630150 100644
--- a/app/admin/components/journal/JournalStudio.tsx
+++ b/app/admin/components/journal/JournalStudio.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import type { JournalEntrySummary } from '@/lib/journal';
 import { serializeJournalMarkdown, sanitizeSlug } from '@/lib/journal';
@@ -16,6 +16,12 @@ import {
 } from '../Icons';
 import './journal-studio.css';
 import { JournalEditor } from './JournalEditor';
+import { useNotify } from '../Notifications';
+import { useAdminFetch } from '../useAdminFetch';
+import { useContentRestored } from '../contentRestored';
+import AdminLoadState from '../AdminLoadState';
+import PageHeader from '../PageHeader';
+import { useConfirm } from '../ConfirmDialog';
 
 interface JournalStudioProps {
   /** Entry to open, taken from the /admin/journal/[slug] route. */
@@ -25,10 +31,17 @@ interface JournalStudioProps {
 }
 
 export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioProps) {
+  const confirm = useConfirm();
+  const notify = useNotify();
   const router = useRouter();
-  const [entries, setEntries] = useState<JournalEntrySummary[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const list = useAdminFetch<{ entries?: JournalEntrySummary[] }>('/api/admin/journal');
+  const entries = list.data?.entries ?? [];
+  const fetchEntries = list.reload;
+
+  // A restored entry may be one that was deleted, or have a new title.
+  useContentRestored(({ target }) => {
+    if (target === 'journal') fetchEntries();
+  });
 
   // New Entry Modal
   const [showCreateModal, setShowCreateModal] = useState(false);
@@ -38,28 +51,6 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
   /** null = start blank, matching the previous (only) behavior. */
   const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
 
-  const fetchEntries = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await fetch('/api/admin/journal');
-      if (res.ok) {
-        const data = await res.json();
-        setEntries(data.entries || []);
-      } else {
-        setError('Failed to load journal entries');
-      }
-    } catch {
-      setError('Failed to load journal entries');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchEntries();
-  }, [fetchEntries]);
-
   const handleCreate = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!newTitle.trim()) return;
@@ -98,41 +89,42 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
         setNewTitle('');
         setNewSlug('');
         setSelectedTemplateId(null);
-        await fetchEntries();
+        fetchEntries();
         if (data.entry?.slug) {
           router.push(`/admin/journal/${data.entry.slug}`);
         }
       } else {
         const data = await res.json();
-        alert(data.error || 'Failed to create journal entry');
+        notify('error', data.error || 'Failed to create journal entry');
       }
     } catch {
-      alert('Error creating journal entry');
+      notify('error', 'Could not create the journal entry. Check the connection and try again.');
     } finally {
       setCreating(false);
     }
   };
 
   const handleDelete = async (slug: string) => {
-    if (
-      !confirm(
-        `Delete "${slug}"?\n\nA copy is kept and can be restored from Backups on the dashboard.`,
-      )
-    )
-      return;
+    const ok = await confirm({
+      title: `Delete “${slug}”?`,
+      message: 'A copy is kept and can be restored under Backups.',
+      confirmLabel: 'Delete',
+      danger: true,
+    });
+    if (!ok) return;
 
     try {
       const res = await fetch(`/api/admin/journal/${slug}`, {
         method: 'DELETE',
       });
       if (res.ok) {
-        await fetchEntries();
+        fetchEntries();
         if (activeSlug === slug) router.push('/admin/journal');
       } else {
-        alert('Failed to delete journal entry');
+        notify('error', 'Failed to delete journal entry');
       }
     } catch {
-      alert('Error deleting journal entry');
+      notify('error', 'Could not delete the journal entry. Check the connection and try again.');
     }
   };
 
@@ -148,30 +140,28 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
 
   return (
     <div className="journal-studio">
-      <div className="journal-studio-header">
-        <div>
-          <h2>
-            <IconBook size={20} /> Journal &amp; Photo Essays
-          </h2>
-          <p style={{ margin: '4px 0 0', opacity: 0.7, fontSize: '0.9rem' }}>
-            Author visual stories, field notes, and longform photo essays with live preview.
-          </p>
-        </div>
-        <button
-          type="button"
-          className="admin-btn admin-btn-primary"
-          onClick={() => setShowCreateModal(true)}
-        >
-          <IconPlus size={16} /> New Journal Entry
-        </button>
-      </div>
+      <PageHeader
+        kicker="Content"
+        title="Journal"
+        description="Stories, field notes and longform photo essays, written with a live preview."
+        actions={
+          <button
+            type="button"
+            className="admin-btn admin-btn-primary"
+            onClick={() => setShowCreateModal(true)}
+          >
+            <IconPlus size={16} /> New Journal Entry
+          </button>
+        }
+      />
 
-      {loading ? (
-        <div style={{ padding: '3rem', textAlign: 'center', opacity: 0.6 }}>
-          Loading journal entries...
-        </div>
-      ) : error ? (
-        <div style={{ padding: '3rem', textAlign: 'center', color: '#ef4444' }}>{error}</div>
+      {(list.loading && !list.data) || list.error ? (
+        <AdminLoadState
+          loading={list.loading}
+          error={list.error}
+          onRetry={list.reload}
+          hasData={!!list.data}
+        />
       ) : entries.length === 0 ? (
         <div style={{ padding: '5rem 2rem', textAlign: 'center', opacity: 0.6 }}>
           <h3>No journal entries yet</h3>
@@ -269,6 +259,7 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
             <form onSubmit={handleCreate}>
               <div style={{ marginBottom: '1rem' }}>
                 <label
+                  htmlFor="journal-new-title"
                   style={{
                     display: 'block',
                     fontSize: '0.85rem',
@@ -279,6 +270,7 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
                   Title
                 </label>
                 <input
+                  id="journal-new-title"
                   type="text"
                   className="admin-input"
                   placeholder="e.g. Expedition Nordkap"
@@ -296,6 +288,7 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
 
               <div style={{ marginBottom: '1.5rem' }}>
                 <label
+                  htmlFor="journal-new-url-slug"
                   style={{
                     display: 'block',
                     fontSize: '0.85rem',
@@ -306,6 +299,7 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
                   URL Slug
                 </label>
                 <input
+                  id="journal-new-url-slug"
                   type="text"
                   className="admin-input"
                   placeholder="e.g. expedition-nordkap"
diff --git a/app/admin/components/journal/StorySettingsModal.tsx b/app/admin/components/journal/StorySettingsModal.tsx
index 8f84ce5..71f1f57 100644
--- a/app/admin/components/journal/StorySettingsModal.tsx
+++ b/app/admin/components/journal/StorySettingsModal.tsx
@@ -2,6 +2,7 @@
 
 import type { ParsedJournal } from '@/lib/journal';
 import type { AssetPickTarget } from './BlockFields';
+import PasswordField from '../fields/PasswordField';
 
 type Frontmatter = ParsedJournal['frontmatter'];
 
@@ -27,6 +28,7 @@ export function StorySettingsModal({
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
           <div>
             <label
+              htmlFor="story-subtitle"
               style={{
                 display: 'block',
                 fontSize: '0.8rem',
@@ -37,6 +39,7 @@ export function StorySettingsModal({
               Subtitle
             </label>
             <input
+              id="story-subtitle"
               type="text"
               className="admin-input"
               value={frontmatter.subtitle || ''}
@@ -48,6 +51,7 @@ export function StorySettingsModal({
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
             <div>
               <label
+                htmlFor="story-author"
                 style={{
                   display: 'block',
                   fontSize: '0.8rem',
@@ -58,6 +62,7 @@ export function StorySettingsModal({
                 Author
               </label>
               <input
+                id="story-author"
                 type="text"
                 className="admin-input"
                 value={frontmatter.author || ''}
@@ -67,6 +72,7 @@ export function StorySettingsModal({
             </div>
             <div>
               <label
+                htmlFor="story-publish-date"
                 style={{
                   display: 'block',
                   fontSize: '0.8rem',
@@ -77,6 +83,7 @@ export function StorySettingsModal({
                 Publish Date
               </label>
               <input
+                id="story-publish-date"
                 type="date"
                 className="admin-input"
                 value={frontmatter.date || ''}
@@ -155,12 +162,10 @@ export function StorySettingsModal({
             >
               Password Protection (Optional)
             </label>
-            <input
-              type="password"
-              className="admin-input"
-              value={frontmatter.password || ''}
-              placeholder="Leave empty for public access"
-              onChange={(e) => onChange({ password: e.target.value })}
+            <PasswordField
+              value={frontmatter.password || undefined}
+              onChange={(password) => onChange({ password: password ?? '' })}
+              label="Entry password"
             />
           </div>
 
diff --git a/app/admin/components/journal/journal-studio.css b/app/admin/components/journal/journal-studio.css
index 136bde2..619ee35 100644
--- a/app/admin/components/journal/journal-studio.css
+++ b/app/admin/components/journal/journal-studio.css
@@ -674,3 +674,39 @@
   background: rgba(239, 68, 68, 0.1);
   border: 1px solid rgba(239, 68, 68, 0.3);
 }
+
+/* Phones: the top bar was one non-wrapping row, so the title input shrank to
+   nothing and Save ran off the screen — and there is no ⌘S on a phone (#675).
+   Below 700px it wraps: back button and mode toggle, the title on a line of
+   its own, then the actions with Save taking the remaining width. */
+@media (max-width: 700px) {
+  .journal-editor-topbar {
+    flex-wrap: wrap;
+    padding: 0.75rem 1rem;
+    gap: 0.75rem;
+  }
+
+  .journal-editor-topbar-left {
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+    width: 100%;
+  }
+
+  .journal-editor-title-input {
+    order: 3;
+    flex: 1 1 100%;
+    max-width: none;
+    min-width: 0;
+    border-color: var(--admin-border, rgba(255, 255, 255, 0.08));
+  }
+
+  .journal-editor-topbar-right {
+    width: 100%;
+    gap: 0.5rem;
+  }
+
+  .journal-editor-topbar-right > .admin-btn-primary {
+    flex: 1;
+    justify-content: center;
+  }
+}
diff --git a/app/admin/components/page-builder/AlbumDrawer.tsx b/app/admin/components/page-builder/AlbumDrawer.tsx
index efcf4f1..fe2c87a 100644
--- a/app/admin/components/page-builder/AlbumDrawer.tsx
+++ b/app/admin/components/page-builder/AlbumDrawer.tsx
@@ -5,6 +5,7 @@ import { IconCamera, IconCopy, IconGripVertical, IconImage, IconTrash, IconX } f
 import { Listbox } from '../Listbox';
 import { SORT_OPTIONS } from './sortOptions';
 import type { AlbumEntry, HeroPickerTarget, OrderEditorTarget } from './types';
+import PasswordField from '../fields/PasswordField';
 
 interface AlbumDrawerProps {
   album: AlbumEntry;
@@ -71,8 +72,9 @@ export default function AlbumDrawer({
               </div>
 
               <div className="admin-field">
-                <label>Title override</label>
+                <label htmlFor="album-title-override">Title override</label>
                 <input
+                  id="album-title-override"
                   value={album.title || ''}
                   onChange={(e) => onUpdate({ title: e.target.value || undefined })}
                   placeholder={name}
@@ -80,8 +82,9 @@ export default function AlbumDrawer({
               </div>
 
               <div className="admin-field">
-                <label>Description</label>
+                <label htmlFor="album-description">Description</label>
                 <textarea
+                  id="album-description"
                   value={album.description || ''}
                   onChange={(e) => onUpdate({ description: e.target.value || undefined })}
                   placeholder="Optional description for visitors"
@@ -90,19 +93,17 @@ export default function AlbumDrawer({
               </div>
 
               <div className="admin-field">
-                <label>Password protection</label>
-                <div className="input-with-icon">
-                  <input
-                    type="password"
-                    value={album.password || ''}
-                    onChange={(e) => onUpdate({ password: e.target.value || undefined })}
-                    placeholder="Leave empty for public access"
-                  />
-                </div>
+                <label htmlFor="album-password">Password protection</label>
+                <PasswordField
+                  id="album-password"
+                  value={album.password}
+                  onChange={(password) => onUpdate({ password })}
+                  label="Album password"
+                />
               </div>
 
               <div className="admin-field">
-                <label>Downloads</label>
+                <span className="admin-field-label">Downloads</span>
                 <button
                   type="button"
                   className={`admin-toggle-card ${album.download ? 'active' : ''}`}
@@ -141,8 +142,9 @@ export default function AlbumDrawer({
 
             <div className="admin-sheet-col admin-sheet-col--divided">
               <div className="admin-field">
-                <label>Layout override (Experimental)</label>
+                <label htmlFor="album-layout-override">Layout override (Experimental)</label>
                 <select
+                  id="album-layout-override"
                   aria-label="Layout override"
                   value={album.grid?.layout || ''}
                   onChange={(e) => {
@@ -166,8 +168,9 @@ export default function AlbumDrawer({
               </div>
 
               <div className="admin-field">
-                <label>Cover focal point (Experimental)</label>
+                <label htmlFor="album-cover-focal-point">Cover focal point (Experimental)</label>
                 <input
+                  id="album-cover-focal-point"
                   value={album.coverPosition || ''}
                   onChange={(e) => onUpdate({ coverPosition: e.target.value || undefined })}
                   placeholder={'e.g. "50% 25%" or "top" — where the cover crop should anchor'}
@@ -176,7 +179,7 @@ export default function AlbumDrawer({
 
               {/* Hero Image Selection */}
               <div className="admin-field">
-                <label>Custom Hero Image</label>
+                <span className="admin-field-label">Custom Hero Image</span>
                 <div className="album-hero-field">
                   {album.heroImage ? (
                     <div className="album-hero-preview">
@@ -213,7 +216,9 @@ export default function AlbumDrawer({
 
               {/* Photo order */}
               <div className="admin-field">
-                <label id="album-sort-label">Photo order</label>
+                <span className="admin-field-label" id="album-sort-label">
+                  Photo order
+                </span>
                 <Listbox
                   labelledBy="album-sort-label"
                   value={album.sort || DEFAULT_ALBUM_SORT}
diff --git a/app/admin/components/page-builder/SortableTiles.tsx b/app/admin/components/page-builder/SortableTiles.tsx
new file mode 100644
index 0000000..90942cd
--- /dev/null
+++ b/app/admin/components/page-builder/SortableTiles.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+/**
+ * The two drag-sortable tiles of the page builder (#608): a hero photo, and
+ * a subpage in the page list. Album cards are in ./AlbumCard.tsx.
+ */
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { IconFolder, IconGripVertical, IconLock, IconPencil, IconX } from '../Icons';
+import type { Subpage } from './types';
+
+// ── Sortable Hero Tile ─────────────────────────────────────────
+
+export function SortableHeroTile({
+  id,
+  index,
+  onRemove,
+}: {
+  id: string;
+  index: number;
+  onRemove: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: `hero-${index}`,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 10 : undefined,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className="hero-tile" {...attributes}>
+      <div className="hero-tile-drag" {...listeners} title="Drag to reorder">
+        <IconGripVertical size={18} className="svg-icon svg-drag" />
+      </div>
+      <img src={`/api/admin/thumbnail/${id}`} alt="" loading="lazy" />
+      <button className="hero-tile-remove" onClick={onRemove} title="Remove">
+        <IconX size={14} />
+      </button>
+      <span className="hero-tile-index">{index + 1}</span>
+    </div>
+  );
+}
+
+// ── Sortable Subpage Tile ──────────────────────────────────────
+
+export function SortableSubpageTile({
+  sp,
+  spIndex,
+  isActive,
+  onClick,
+  getFirstThumb,
+}: {
+  sp: Subpage;
+  spIndex: number;
+  isActive: boolean;
+  onClick: () => void;
+  getFirstThumb: (sp: Subpage) => string | null;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: `subpage-${spIndex}`,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 10 : undefined,
+  };
+
+  const totalAlbums =
+    sp.albums.length + (sp.sections?.reduce((sum, sec) => sum + sec.albums.length, 0) || 0);
+  const firstThumb = getFirstThumb(sp);
+  const slug = sp.name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '');
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`subpage-tile ${isActive ? 'active' : ''}`}
+      onClick={onClick}
+      {...attributes}
+    >
+      <div className="subpage-tile-drag" {...listeners} title="Drag to reorder">
+        <IconGripVertical size={18} className="svg-icon svg-drag" />
+      </div>
+
+      {sp.enabled === false && (
+        <span
+          className="subpage-badge-protected"
+          style={{ background: '#e60012', color: '#fff' }}
+          title="Page is disabled"
+        >
+          Disabled
+        </span>
+      )}
+
+      {sp.hidden === true && sp.enabled !== false && (
+        <span
+          className="subpage-badge-protected"
+          title="Hidden from navigation, reachable by direct link"
+        >
+          Unlisted
+        </span>
+      )}
+
+      {sp.password && (
+        <span className="subpage-badge-protected" title="Password protected">
+          <IconLock size={12} /> Password
+        </span>
+      )}
+
+      <div className="subpage-tile-cover">
+        {firstThumb ? (
+          <img src={`/api/admin/thumbnail/${firstThumb}`} alt="" loading="lazy" />
+        ) : (
+          <div className="subpage-tile-placeholder">
+            <IconFolder />
+          </div>
+        )}
+        <div className="subpage-hover-overlay">
+          <span className="hover-action-btn">
+            <IconPencil size={14} /> Edit Page
+          </span>
+        </div>
+      </div>
+      <div className="subpage-tile-info">
+        <div className="subpage-tile-title-row">
+          <span className="subpage-tile-name">{sp.title || sp.name}</span>
+          <span className="subpage-tile-slug">/{slug}</span>
+        </div>
+        <span className="subpage-tile-meta">
+          <IconFolder /> {totalAlbums} album{totalAlbums !== 1 ? 's' : ''}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// ── Component ──────────────────────────────────────────────────
+
+// ── Sortable Subpage Row (stage 4 structure list) ──────────────
+
+/**
+ * One subpage in the page builder's structure list (UX stage 4): drag handle,
+ * cover, name, state and album count, in one line. Same sortable id as the
+ * tile it replaces, so the builder's drag handler is unchanged.
+ */
+export function SortableSubpageRow({
+  sp,
+  spIndex,
+  isActive,
+  onClick,
+  getFirstThumb,
+}: {
+  sp: Subpage;
+  spIndex: number;
+  isActive: boolean;
+  onClick: () => void;
+  getFirstThumb: (sp: Subpage) => string | null;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: `subpage-${spIndex}`,
+  });
+  const totalAlbums =
+    sp.albums.length + (sp.sections?.reduce((sum, sec) => sum + sec.albums.length, 0) || 0);
+  const thumb = getFirstThumb(sp);
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        zIndex: isDragging ? 10 : undefined,
+      }}
+      className={`pb-row ${isActive ? 'active' : ''} ${sp.enabled === false ? 'is-off' : ''}`}
+      {...attributes}
+    >
+      <span className="pb-row-grip" {...listeners} title="Drag to reorder">
+        <IconGripVertical size={14} />
+      </span>
+      <button type="button" className="pb-row-main" onClick={onClick} aria-current={isActive}>
+        <span className="pb-row-thumb">
+          {thumb ? (
+            <img src={`/api/admin/thumbnail/${thumb}`} alt="" loading="lazy" />
+          ) : (
+            <IconFolder size={14} />
+          )}
+        </span>
+        <span className="pb-row-name">
+          {sp.title || sp.name}
+          {sp.password && <IconLock size={11} />}
+        </span>
+        {sp.enabled === false ? (
+          <span className="pb-row-state">Off</span>
+        ) : sp.hidden ? (
+          <span className="pb-row-state">Unlisted</span>
+        ) : (
+          <span className="pb-row-count">{totalAlbums}</span>
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/app/admin/components/page-builder/SubpageDrawer.tsx b/app/admin/components/page-builder/SubpageDrawer.tsx
index 3dd42ea..21dc25d 100644
--- a/app/admin/components/page-builder/SubpageDrawer.tsx
+++ b/app/admin/components/page-builder/SubpageDrawer.tsx
@@ -15,7 +15,6 @@ import {
   IconBook,
   IconEyeOff,
   IconGlobe,
-  IconLock,
   IconPencil,
   IconSearch,
   IconTrash,
@@ -23,6 +22,7 @@ import {
 } from '../Icons';
 import AlbumCard, { SortableAlbumCard } from './AlbumCard';
 import SubpagePreview from './SubpagePreview';
+import PasswordField from '../fields/PasswordField';
 import {
   normalizeSubpageGrid,
   type ActiveEditAlbumAddress,
@@ -68,6 +68,12 @@ interface SubpageDrawerProps {
   getAlbumThumbnailId: (id: string) => string | null;
   /** Album to mark, when the sheet was opened from a diagnostics link. */
   highlightedAlbumId?: string | null;
+  /**
+   * Rendered as the page builder's right-hand panel (UX stage 4) instead of
+   * a slide-over: no backdrop, no close or Done, the structure list beside
+   * it is how you move on.
+   */
+  inline?: boolean;
 }
 
 /**
@@ -101,485 +107,497 @@ export default function SubpageDrawer({
   getAlbumCount,
   getAlbumThumbnailId,
   highlightedAlbumId,
+  inline = false,
 }: SubpageDrawerProps) {
-  return (
-    <div className="subpage-drawer-backdrop" onClick={() => onClose()}>
-      <div className="subpage-drawer-container" onClick={(e) => e.stopPropagation()}>
-        <div className="subpage-drawer-header">
-          <div className="subpage-drawer-title-group">
-            <span className="subpage-drawer-breadcrumb">Pages / Subpages</span>
-            <h3 className="subpage-drawer-title">{sp.title || sp.name || 'Untitled Page'}</h3>
-          </div>
-          <div className="subpage-drawer-header-actions">
-            <div className="segmented-control" style={{ padding: '2px' }}>
-              <button
-                type="button"
-                className={`segment-btn ${drawerMode === 'edit' ? 'active' : ''}`}
-                onClick={() => onDrawerModeChange('edit')}
-                style={{ padding: '0.2rem 0.6rem', fontSize: '0.75rem' }}
-              >
-                <IconPencil size={14} /> Edit
-              </button>
-              <button
-                type="button"
-                className={`segment-btn ${drawerMode === 'preview' ? 'active' : ''}`}
-                onClick={() => onDrawerModeChange('preview')}
-                style={{ padding: '0.2rem 0.6rem', fontSize: '0.75rem' }}
-              >
-                <IconSearch size={14} /> Live Preview
-              </button>
-            </div>
-
-            <a
-              href={`/${slugify(sp.name)}?fresh=1`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="admin-btn admin-btn-xs admin-btn-ghost"
-              title="Open live page in new tab (bypassing cache)"
+  const sheet = (
+    <div
+      className={`subpage-drawer-container${inline ? ' subpage-drawer-container--inline' : ''}`}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="subpage-drawer-header">
+        <div className="subpage-drawer-title-group">
+          <span className="subpage-drawer-breadcrumb">Pages / Subpages</span>
+          <h3 className="subpage-drawer-title">{sp.title || sp.name || 'Untitled Page'}</h3>
+        </div>
+        <div className="subpage-drawer-header-actions">
+          <div className="segmented-control" style={{ padding: '2px' }}>
+            <button
+              type="button"
+              className={`segment-btn ${drawerMode === 'edit' ? 'active' : ''}`}
+              onClick={() => onDrawerModeChange('edit')}
+              style={{ padding: '0.2rem 0.6rem', fontSize: '0.75rem' }}
             >
-              /{slugify(sp.name)} ↗
-            </a>
+              <IconPencil size={14} /> Edit
+            </button>
+            <button
+              type="button"
+              className={`segment-btn ${drawerMode === 'preview' ? 'active' : ''}`}
+              onClick={() => onDrawerModeChange('preview')}
+              style={{ padding: '0.2rem 0.6rem', fontSize: '0.75rem' }}
+            >
+              <IconSearch size={14} /> Live Preview
+            </button>
+          </div>
+
+          <a
+            href={`/${slugify(sp.name)}?fresh=1`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="admin-btn admin-btn-xs admin-btn-ghost"
+            title="Open live page in new tab (bypassing cache)"
+          >
+            /{slugify(sp.name)} ↗
+          </a>
+          {!inline && (
             <button className="admin-btn-icon" onClick={() => onClose()} title="Close drawer">
               <IconX size={14} />
             </button>
-          </div>
+          )}
         </div>
+      </div>
 
-        <div className="subpage-drawer-body">
-          {drawerMode === 'preview' ? (
-            <SubpagePreview sp={sp} immichAlbums={immichAlbums} index={kickerIndex} />
-          ) : (
-            <div className="admin-sheet-columns admin-sheet-columns--settings-aside">
-              <div className="admin-sheet-col">
-                <div className="subpage-drawer-section">
-                  <div className="admin-field">
-                    <label>Page Name (URL Identifier)</label>
-                    <div className="input-slug-wrapper">
-                      <input
-                        className="subpage-name-input"
-                        value={sp.name}
-                        onChange={(e) => updateSubpage(spIndex, { name: e.target.value })}
-                        placeholder="e.g. dubai, travel, weddings"
-                      />
-                      <span className="input-slug-preview">/{slugify(sp.name)}</span>
-                    </div>
+      <div className="subpage-drawer-body">
+        {drawerMode === 'preview' ? (
+          <SubpagePreview sp={sp} immichAlbums={immichAlbums} index={kickerIndex} />
+        ) : (
+          <div className="admin-sheet-columns admin-sheet-columns--settings-aside">
+            <div className="admin-sheet-col">
+              <div className="subpage-drawer-section">
+                <div className="admin-field">
+                  <label htmlFor="subpage-name">Page Name (URL Identifier)</label>
+                  <div className="input-slug-wrapper">
+                    <input
+                      id="subpage-name"
+                      className="subpage-name-input"
+                      value={sp.name}
+                      onChange={(e) => updateSubpage(spIndex, { name: e.target.value })}
+                      placeholder="e.g. dubai, travel, weddings"
+                    />
+                    <span className="input-slug-preview">/{slugify(sp.name)}</span>
                   </div>
                 </div>
+              </div>
 
-                {/* Subpage metadata */}
-                <div className="subpage-drawer-section">
-                  <div className="admin-field-row">
-                    <div className="admin-field">
-                      <label>Display Title (optional)</label>
-                      <input
-                        value={sp.title || ''}
-                        onChange={(e) =>
-                          updateSubpage(spIndex, { title: e.target.value || undefined })
-                        }
-                        placeholder="Display title (defaults to name)"
-                      />
-                    </div>
-                    <div className="admin-field">
-                      <label>Subtitle</label>
-                      <input
-                        value={sp.subtitle || ''}
-                        onChange={(e) =>
-                          updateSubpage(spIndex, {
-                            subtitle: e.target.value || undefined,
-                          })
-                        }
-                        placeholder="Subtitle text"
-                      />
-                    </div>
+              {/* Subpage metadata */}
+              <div className="subpage-drawer-section">
+                <div className="admin-field-row">
+                  <div className="admin-field">
+                    <label htmlFor="subpage-display-title">Display Title (optional)</label>
+                    <input
+                      id="subpage-display-title"
+                      value={sp.title || ''}
+                      onChange={(e) =>
+                        updateSubpage(spIndex, { title: e.target.value || undefined })
+                      }
+                      placeholder="Display title (defaults to name)"
+                    />
                   </div>
-                  <div className="admin-field" style={{ marginTop: '1rem' }}>
-                    <label>Visibility &amp; Access</label>
-                    {/*
+                  <div className="admin-field">
+                    <label htmlFor="subpage-subtitle">Subtitle</label>
+                    <input
+                      id="subpage-subtitle"
+                      value={sp.subtitle || ''}
+                      onChange={(e) =>
+                        updateSubpage(spIndex, {
+                          subtitle: e.target.value || undefined,
+                        })
+                      }
+                      placeholder="Subtitle text"
+                    />
+                  </div>
+                </div>
+                <div className="admin-field" style={{ marginTop: '1rem' }}>
+                  <span className="admin-field-label">Visibility &amp; Access</span>
+                  {/*
                             One field, three states — enabled/hidden are two YAML flags,
                             but for the owner it is a single question: how visible is
                             this page? Splitting it across two toggles produced
                             contradictory copy ("Disabled (Hidden)" vs "Unlisted").
                           */}
-                    {(
-                      [
-                        {
-                          key: 'published',
-                          active: sp.enabled !== false && sp.hidden !== true,
-                          icon: <IconGlobe size={15} />,
-                          iconColor: '#4ade80',
-                          title: 'Published',
-                          desc: 'Shown in the header menu and homepage lists, reachable via URL',
-                          patch: { enabled: true, hidden: false },
-                        },
-                        {
-                          key: 'unlisted',
-                          active: sp.enabled !== false && sp.hidden === true,
-                          icon: <IconEyeOff size={15} />,
-                          iconColor: '#fbbf24',
-                          title: 'Unlisted (Experimental)',
-                          desc: 'Not shown in menus or on the homepage, but reachable via direct link',
-                          patch: { enabled: true, hidden: true },
-                        },
-                        {
-                          key: 'disabled',
-                          active: sp.enabled === false,
-                          icon: <IconBan size={15} />,
-                          iconColor: '#f87171',
-                          title: 'Disabled',
-                          desc: 'Completely offline — returns 404 even when accessed directly',
-                          patch: { enabled: false, hidden: false },
-                        },
-                      ] as const
-                    ).map((opt) => (
-                      <button
-                        key={opt.key}
-                        type="button"
-                        className={`admin-toggle-card ${opt.active ? 'active' : ''}`}
-                        onClick={() => updateSubpage(spIndex, opt.patch)}
-                        aria-pressed={opt.active}
-                        style={{
-                          padding: '10px 14px',
-                          width: '100%',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'space-between',
-                          borderRadius: '8px',
-                          cursor: 'pointer',
-                          marginBottom: '6px',
-                        }}
-                      >
-                        <div className="toggle-card-info" style={{ textAlign: 'left' }}>
-                          <span
-                            className="toggle-card-title"
-                            style={{
-                              fontWeight: 600,
-                              display: 'inline-flex',
-                              alignItems: 'center',
-                              gap: '8px',
-                            }}
-                          >
-                            <span
-                              style={{ color: opt.iconColor, display: 'inline-flex' }}
-                              aria-hidden="true"
-                            >
-                              {opt.icon}
-                            </span>
-                            {opt.title}
-                          </span>
-                          <span
-                            className="toggle-card-desc"
-                            style={{
-                              fontSize: '0.8rem',
-                              display: 'block',
-                              opacity: 0.75,
-                            }}
-                          >
-                            {opt.desc}
-                          </span>
-                        </div>
-                        <div className={`switch-toggle ${opt.active ? 'on' : ''}`}>
-                          <span className="switch-slider" />
-                        </div>
-                      </button>
-                    ))}
-
-                    {/* Password lives in the same group: it is the access half
-                              of "who gets to see this page". Applies to Published and
-                              Unlisted; a Disabled page 404s before the gate. */}
-                    <div className="password-input-wrapper" style={{ marginTop: '6px' }}>
-                      <span className="password-icon">
-                        <IconLock size={12} />
-                      </span>
-                      <input
-                        type="password"
-                        value={sp.password || ''}
-                        onChange={(e) =>
-                          updateSubpage(spIndex, {
-                            password: e.target.value || undefined,
-                          })
-                        }
-                        placeholder="Password protection (optional) — leave empty for public access"
-                        disabled={sp.enabled === false}
-                      />
-                    </div>
-                  </div>
-                  <div className="admin-field" style={{ marginTop: '1rem' }}>
-                    <label>Page Layout Style</label>
-                    <select
-                      aria-label="Page layout style"
-                      value={sp.grid?.layout || 'masonry'}
-                      onChange={(e) => {
-                        const newLayout = e.target.value;
-                        updateSubpage(spIndex, {
-                          grid: { ...(sp.grid || {}), layout: newLayout },
-                        });
-                      }}
+                  {(
+                    [
+                      {
+                        key: 'published',
+                        active: sp.enabled !== false && sp.hidden !== true,
+                        icon: <IconGlobe size={15} />,
+                        iconColor: '#4ade80',
+                        title: 'Published',
+                        desc: 'Shown in the header menu and homepage lists, reachable via URL',
+                        patch: { enabled: true, hidden: false },
+                      },
+                      {
+                        key: 'unlisted',
+                        active: sp.enabled !== false && sp.hidden === true,
+                        icon: <IconEyeOff size={15} />,
+                        iconColor: '#fbbf24',
+                        title: 'Unlisted (Experimental)',
+                        desc: 'Not shown in menus or on the homepage, but reachable via direct link',
+                        patch: { enabled: true, hidden: true },
+                      },
+                      {
+                        key: 'disabled',
+                        active: sp.enabled === false,
+                        icon: <IconBan size={15} />,
+                        iconColor: '#f87171',
+                        title: 'Disabled',
+                        desc: 'Completely offline — returns 404 even when accessed directly',
+                        patch: { enabled: false, hidden: false },
+                      },
+                    ] as const
+                  ).map((opt) => (
+                    <button
+                      key={opt.key}
+                      type="button"
+                      className={`admin-toggle-card ${opt.active ? 'active' : ''}`}
+                      onClick={() => updateSubpage(spIndex, opt.patch)}
+                      aria-pressed={opt.active}
                       style={{
-                        padding: '8px 12px',
-                        borderRadius: '6px',
+                        padding: '10px 14px',
                         width: '100%',
-                        fontSize: '0.9rem',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        borderRadius: '8px',
+                        cursor: 'pointer',
+                        marginBottom: '6px',
                       }}
                     >
-                      {/*
+                      <div className="toggle-card-info" style={{ textAlign: 'left' }}>
+                        <span
+                          className="toggle-card-title"
+                          style={{
+                            fontWeight: 600,
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '8px',
+                          }}
+                        >
+                          <span
+                            style={{ color: opt.iconColor, display: 'inline-flex' }}
+                            aria-hidden="true"
+                          >
+                            {opt.icon}
+                          </span>
+                          {opt.title}
+                        </span>
+                        <span
+                          className="toggle-card-desc"
+                          style={{
+                            fontSize: '0.8rem',
+                            display: 'block',
+                            opacity: 0.75,
+                          }}
+                        >
+                          {opt.desc}
+                        </span>
+                      </div>
+                      <div className={`switch-toggle ${opt.active ? 'on' : ''}`}>
+                        <span className="switch-slider" />
+                      </div>
+                    </button>
+                  ))}
+
+                  {/* Password lives in the same group: it is the access half
+                              of "who gets to see this page". Applies to Published and
+                              Unlisted; a Disabled page 404s before the gate. */}
+                  <div style={{ marginTop: '6px' }}>
+                    <PasswordField
+                      value={sp.password}
+                      onChange={(password) => updateSubpage(spIndex, { password })}
+                      placeholder="Password protection (optional) — leave empty for public access"
+                      label="Page password"
+                      disabled={sp.enabled === false}
+                    />
+                  </div>
+                </div>
+                <div className="admin-field" style={{ marginTop: '1rem' }}>
+                  <label htmlFor="subpage-page-layout-style">Page Layout Style</label>
+                  <select
+                    id="subpage-page-layout-style"
+                    aria-label="Page layout style"
+                    value={sp.grid?.layout || 'masonry'}
+                    onChange={(e) => {
+                      const newLayout = e.target.value;
+                      updateSubpage(spIndex, {
+                        grid: { ...(sp.grid || {}), layout: newLayout },
+                      });
+                    }}
+                    style={{
+                      padding: '8px 12px',
+                      borderRadius: '6px',
+                      width: '100%',
+                      fontSize: '0.9rem',
+                    }}
+                  >
+                    {/*
                               Plain text, no emoji: an <option> cannot contain markup, so the
                               SVG icon set is not available here — and a decorative emoji is
                               not a substitute for it.
                             */}
-                      <option value="masonry">Masonry Grid (Dynamic Height)</option>
-                      <option value="uniform">Uniform Grid (Square Tiles)</option>
-                      <option value="showcase">Showcase (Featured First Asset)</option>
-                      <option value="filmstrip">Filmstrip (Horizontal Scroll)</option>
-                      <option value="editorial-flow">Editorial Flow</option>
-                      <option value="essay">Photo Essay Mode (Storytelling Editor)</option>
-                    </select>
-                  </div>
+                    <option value="masonry">Masonry Grid (Dynamic Height)</option>
+                    <option value="uniform">Uniform Grid (Square Tiles)</option>
+                    <option value="showcase">Showcase (Featured First Asset)</option>
+                    <option value="filmstrip">Filmstrip (Horizontal Scroll)</option>
+                    <option value="editorial-flow">Editorial Flow</option>
+                    <option value="essay">Photo Essay Mode (Storytelling Editor)</option>
+                  </select>
+                </div>
 
-                  {/* Album cover grid — hidden in essay mode, which
+                {/* Album cover grid — hidden in essay mode, which
                                   renders a story instead of a cover grid. The
                                   album count is deliberately not checked: it
                                   changes in this very drawer, and a field that
                                   vanishes while you edit is worse than one that
                                   has no effect yet. */}
-                  {sp.grid?.layout !== 'essay' && sp.essayText == null && (
-                    <GridOverrideFields
-                      label="Album Cover Grid"
-                      hint={
-                        <>
-                          Overrides how the album covers are tiled on this page — the photos inside
-                          the albums are not affected. Leave the column count empty to follow the
-                          site-wide grid setting, and the gap empty to keep the theme&apos;s own
-                          spacing. Tablet widths show at most two covers per row.
-                        </>
-                      }
-                      columnsMin={COVER_GRID_COLUMNS_MIN}
-                      columnsMax={COVER_GRID_COLUMNS_MAX}
-                      gapMax={COVER_GRID_GAP_MAX}
-                      value={sp.coverGrid}
-                      onChange={(next) =>
-                        updateSubpage(spIndex, {
-                          coverGrid: normalizeSubpageGrid(next),
-                        })
-                      }
-                    />
-                  )}
+                {sp.grid?.layout !== 'essay' && sp.essayText == null && (
+                  <GridOverrideFields
+                    label="Album Cover Grid"
+                    hint={
+                      <>
+                        Overrides how the album covers are tiled on this page — the photos inside
+                        the albums are not affected. Leave the column count empty to follow the
+                        site-wide grid setting, and the gap empty to keep the theme&apos;s own
+                        spacing. Tablet widths show at most two covers per row.
+                      </>
+                    }
+                    columnsMin={COVER_GRID_COLUMNS_MIN}
+                    columnsMax={COVER_GRID_COLUMNS_MAX}
+                    gapMax={COVER_GRID_GAP_MAX}
+                    value={sp.coverGrid}
+                    onChange={(next) =>
+                      updateSubpage(spIndex, {
+                        coverGrid: normalizeSubpageGrid(next),
+                      })
+                    }
+                  />
+                )}
 
-                  {/* Photo grid — the albums opened from this page.
+                {/* Photo grid — the albums opened from this page.
                                   Separate from the cover grid above: one field
                                   used to drive both, so a cover gap retuned
                                   every photo grid on the page (#523). */}
-                  {sp.essayText == null && (
-                    <GridOverrideFields
-                      label="Photo Grid (Albums On This Page)"
-                      hint={
-                        <>
-                          How the photos inside every album on this page are laid out. Leave both
-                          empty to follow Settings &rsaquo; Grid; a single album can still override
-                          this in gallery.yaml.
-                        </>
-                      }
-                      columnsMin={PHOTO_GRID_COLUMNS_MIN}
-                      columnsMax={PHOTO_GRID_COLUMNS_MAX}
-                      gapMax={PHOTO_GRID_GAP_MAX}
-                      value={sp.grid}
-                      onChange={(next) =>
-                        updateSubpage(spIndex, { grid: normalizeSubpageGrid(next) })
-                      }
-                    />
-                  )}
-                </div>
-
-                {/* Visual Photo Essay Builder (if layout === 'essay') */}
-                {(sp.grid?.layout === 'essay' || sp.essayText != null) && (
-                  <div className="subpage-drawer-section">
-                    <div className="drawer-section-heading">
-                      <h4>
-                        <IconBook size={16} /> Storytelling &amp; Photo Essay Builder
-                      </h4>
-                      <p>Compose text, quotes, and fullbleed/wide photos visually.</p>
-                    </div>
-
-                    <EssayBlockEditor
-                      markdown={sp.essayText || ''}
-                      onChange={(newMarkdown) => updateSubpage(spIndex, { essayText: newMarkdown })}
-                      onSelectPhoto={(callback) => {
-                        onPickHero({
-                          albumId: undefined,
-                          title: 'Select Photo for Photo Essay',
-                          onSelect: (assetId) => {
-                            callback(assetId);
-                            onPickHero(null);
-                          },
-                        });
-                      }}
-                    />
-                  </div>
+                {sp.essayText == null && (
+                  <GridOverrideFields
+                    label="Photo Grid (Albums On This Page)"
+                    hint={
+                      <>
+                        How the photos inside every album on this page are laid out. Leave both
+                        empty to follow Settings &rsaquo; Grid; a single album can still override
+                        this in gallery.yaml.
+                      </>
+                    }
+                    columnsMin={PHOTO_GRID_COLUMNS_MIN}
+                    columnsMax={PHOTO_GRID_COLUMNS_MAX}
+                    gapMax={PHOTO_GRID_GAP_MAX}
+                    value={sp.grid}
+                    onChange={(next) =>
+                      updateSubpage(spIndex, { grid: normalizeSubpageGrid(next) })
+                    }
+                  />
                 )}
               </div>
 
-              <div className="admin-sheet-col admin-sheet-col--divided">
-                {/* Albums (if no sections) with DnD */}
-                {(!sp.sections || sp.sections.length === 0) && (
-                  <div className="subpage-albums">
-                    <div className="subpage-albums-header">
-                      <span>Albums in this Page</span>
+              {/* Visual Photo Essay Builder (if layout === 'essay') */}
+              {(sp.grid?.layout === 'essay' || sp.essayText != null) && (
+                <div className="subpage-drawer-section">
+                  <div className="drawer-section-heading">
+                    <h4>
+                      <IconBook size={16} /> Storytelling &amp; Photo Essay Builder
+                    </h4>
+                    <p>Compose text, quotes, and fullbleed/wide photos visually.</p>
+                  </div>
+
+                  <EssayBlockEditor
+                    markdown={sp.essayText || ''}
+                    onChange={(newMarkdown) => updateSubpage(spIndex, { essayText: newMarkdown })}
+                    onSelectPhoto={(callback) => {
+                      onPickHero({
+                        albumId: undefined,
+                        title: 'Select Photo for Photo Essay',
+                        onSelect: (assetId) => {
+                          callback(assetId);
+                          onPickHero(null);
+                        },
+                      });
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+
+            <div className="admin-sheet-col admin-sheet-col--divided">
+              {/* Albums (if no sections) with DnD */}
+              {(!sp.sections || sp.sections.length === 0) && (
+                <div className="subpage-albums">
+                  <div className="subpage-albums-header">
+                    <span>Albums in this Page</span>
+                    <button
+                      className="admin-btn admin-btn-xs admin-btn-primary"
+                      onClick={() => onPickAlbum({ type: 'subpage', subpageIndex: spIndex })}
+                    >
+                      + Add Album
+                    </button>
+                  </div>
+                  <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={onAlbumDragEnd}
+                  >
+                    <SortableContext
+                      items={sp.albums.map((a, i) => `album-${a.id}-${i}`)}
+                      strategy={verticalListSortingStrategy}
+                    >
+                      <div className="album-list">
+                        {sp.albums.length === 0 && (
+                          <p className="empty-hint">
+                            No albums added yet. Click + Add Album to pick from Immich.
+                          </p>
+                        )}
+                        {sp.albums.map((album, aIndex) => (
+                          <SortableAlbumCard
+                            key={`${album.id}-${aIndex}`}
+                            album={album}
+                            index={aIndex}
+                            name={getAlbumName(album.id)}
+                            count={getAlbumCount(album.id)}
+                            thumbnailId={getAlbumThumbnailId(album.id)}
+                            highlighted={album.id === highlightedAlbumId}
+                            onRemove={() => removeSubpageAlbum(spIndex, aIndex)}
+                            onEdit={() =>
+                              onEditAlbum({
+                                type: 'subpage',
+                                subpageIndex: spIndex,
+                                albumIndex: aIndex,
+                              })
+                            }
+                          />
+                        ))}
+                      </div>
+                    </SortableContext>
+                  </DndContext>
+                </div>
+              )}
+
+              {/* Sections */}
+              {sp.sections && sp.sections.length > 0 && (
+                <div className="subpage-sections">
+                  {sp.sections.map((sec, secIndex) => (
+                    <div key={secIndex} className="section-card">
+                      <div className="section-header">
+                        <input
+                          className="section-title-input"
+                          value={sec.title}
+                          onChange={(e) =>
+                            updateSection(spIndex, secIndex, {
+                              title: e.target.value,
+                            })
+                          }
+                          placeholder="Section title"
+                          aria-label="Section title"
+                        />
+                        <button
+                          className="admin-btn-icon"
+                          onClick={() => removeSection(spIndex, secIndex)}
+                          title="Remove section"
+                        >
+                          <IconX size={14} />
+                        </button>
+                      </div>
+                      <div className="admin-field">
+                        <input
+                          value={sec.description || ''}
+                          onChange={(e) =>
+                            updateSection(spIndex, secIndex, {
+                              description: e.target.value || undefined,
+                            })
+                          }
+                          placeholder="Section description (optional)"
+                          aria-label="Section description"
+                          className="section-desc-input"
+                        />
+                      </div>
+                      <div className="album-list">
+                        {sec.albums.map((album, aIndex) => (
+                          <AlbumCard
+                            key={`${album.id}-${aIndex}`}
+                            album={album}
+                            name={getAlbumName(album.id)}
+                            count={getAlbumCount(album.id)}
+                            thumbnailId={getAlbumThumbnailId(album.id)}
+                            highlighted={album.id === highlightedAlbumId}
+                            onRemove={() => removeSectionAlbum(spIndex, secIndex, aIndex)}
+                            onEdit={() =>
+                              onEditAlbum({
+                                type: 'section',
+                                subpageIndex: spIndex,
+                                sectionIndex: secIndex,
+                                albumIndex: aIndex,
+                              })
+                            }
+                          />
+                        ))}
+                      </div>
                       <button
-                        className="admin-btn admin-btn-xs admin-btn-primary"
-                        onClick={() => onPickAlbum({ type: 'subpage', subpageIndex: spIndex })}
+                        className="admin-btn admin-btn-xs"
+                        onClick={() =>
+                          onPickAlbum({
+                            type: 'section',
+                            subpageIndex: spIndex,
+                            sectionIndex: secIndex,
+                          })
+                        }
                       >
                         + Add Album
                       </button>
                     </div>
-                    <DndContext
-                      sensors={sensors}
-                      collisionDetection={closestCenter}
-                      onDragEnd={onAlbumDragEnd}
-                    >
-                      <SortableContext
-                        items={sp.albums.map((a, i) => `album-${a.id}-${i}`)}
-                        strategy={verticalListSortingStrategy}
-                      >
-                        <div className="album-list">
-                          {sp.albums.length === 0 && (
-                            <p className="empty-hint">
-                              No albums added yet. Click + Add Album to pick from Immich.
-                            </p>
-                          )}
-                          {sp.albums.map((album, aIndex) => (
-                            <SortableAlbumCard
-                              key={`${album.id}-${aIndex}`}
-                              album={album}
-                              index={aIndex}
-                              name={getAlbumName(album.id)}
-                              count={getAlbumCount(album.id)}
-                              thumbnailId={getAlbumThumbnailId(album.id)}
-                              highlighted={album.id === highlightedAlbumId}
-                              onRemove={() => removeSubpageAlbum(spIndex, aIndex)}
-                              onEdit={() =>
-                                onEditAlbum({
-                                  type: 'subpage',
-                                  subpageIndex: spIndex,
-                                  albumIndex: aIndex,
-                                })
-                              }
-                            />
-                          ))}
-                        </div>
-                      </SortableContext>
-                    </DndContext>
-                  </div>
-                )}
+                  ))}
+                </div>
+              )}
 
-                {/* Sections */}
+              <div className="subpage-actions" style={{ marginTop: '1rem' }}>
+                <button
+                  className="admin-btn admin-btn-xs admin-btn-secondary"
+                  onClick={() => addSection(spIndex)}
+                >
+                  + Add Section
+                </button>
                 {sp.sections && sp.sections.length > 0 && (
-                  <div className="subpage-sections">
-                    {sp.sections.map((sec, secIndex) => (
-                      <div key={secIndex} className="section-card">
-                        <div className="section-header">
-                          <input
-                            className="section-title-input"
-                            value={sec.title}
-                            onChange={(e) =>
-                              updateSection(spIndex, secIndex, {
-                                title: e.target.value,
-                              })
-                            }
-                            placeholder="Section title"
-                          />
-                          <button
-                            className="admin-btn-icon"
-                            onClick={() => removeSection(spIndex, secIndex)}
-                            title="Remove section"
-                          >
-                            <IconX size={14} />
-                          </button>
-                        </div>
-                        <div className="admin-field">
-                          <input
-                            value={sec.description || ''}
-                            onChange={(e) =>
-                              updateSection(spIndex, secIndex, {
-                                description: e.target.value || undefined,
-                              })
-                            }
-                            placeholder="Section description (optional)"
-                            className="section-desc-input"
-                          />
-                        </div>
-                        <div className="album-list">
-                          {sec.albums.map((album, aIndex) => (
-                            <AlbumCard
-                              key={`${album.id}-${aIndex}`}
-                              album={album}
-                              name={getAlbumName(album.id)}
-                              count={getAlbumCount(album.id)}
-                              thumbnailId={getAlbumThumbnailId(album.id)}
-                              highlighted={album.id === highlightedAlbumId}
-                              onRemove={() => removeSectionAlbum(spIndex, secIndex, aIndex)}
-                              onEdit={() =>
-                                onEditAlbum({
-                                  type: 'section',
-                                  subpageIndex: spIndex,
-                                  sectionIndex: secIndex,
-                                  albumIndex: aIndex,
-                                })
-                              }
-                            />
-                          ))}
-                        </div>
-                        <button
-                          className="admin-btn admin-btn-xs"
-                          onClick={() =>
-                            onPickAlbum({
-                              type: 'section',
-                              subpageIndex: spIndex,
-                              sectionIndex: secIndex,
-                            })
-                          }
-                        >
-                          + Add Album
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                )}
-
-                <div className="subpage-actions" style={{ marginTop: '1rem' }}>
                   <button
                     className="admin-btn admin-btn-xs admin-btn-secondary"
-                    onClick={() => addSection(spIndex)}
+                    onClick={() => onPickAlbum({ type: 'subpage', subpageIndex: spIndex })}
                   >
-                    + Add Section
+                    + Add Loose Album
                   </button>
-                  {sp.sections && sp.sections.length > 0 && (
-                    <button
-                      className="admin-btn admin-btn-xs admin-btn-secondary"
-                      onClick={() => onPickAlbum({ type: 'subpage', subpageIndex: spIndex })}
-                    >
-                      + Add Loose Album
-                    </button>
-                  )}
-                </div>
+                )}
               </div>
             </div>
-          )}
-        </div>
+          </div>
+        )}
+      </div>
 
-        <div className="subpage-drawer-footer">
-          <button
-            className="admin-btn admin-btn-danger admin-btn-sm"
-            onClick={() => {
-              removeSubpage(spIndex);
-              onClose();
-            }}
-          >
-            <IconTrash size={14} /> Delete Subpage
-          </button>
+      <div className="subpage-drawer-footer">
+        <button
+          className="admin-btn admin-btn-danger admin-btn-sm"
+          onClick={() => {
+            removeSubpage(spIndex);
+            onClose();
+          }}
+        >
+          <IconTrash size={14} /> Delete Subpage
+        </button>
+        {!inline && (
           <button className="admin-btn admin-btn-primary admin-btn-sm" onClick={() => onClose()}>
             Done
           </button>
-        </div>
+        )}
       </div>
     </div>
   );
+
+  if (inline) return sheet;
+  return (
+    <div className="subpage-drawer-backdrop" onClick={() => onClose()}>
+      {sheet}
+    </div>
+  );
 }
diff --git a/app/admin/components/page-builder/galleryOps.ts b/app/admin/components/page-builder/galleryOps.ts
new file mode 100644
index 0000000..5ac89c5
--- /dev/null
+++ b/app/admin/components/page-builder/galleryOps.ts
@@ -0,0 +1,175 @@
+/**
+ * The page builder's edits as pure functions on GalleryState (#608).
+ *
+ * Each takes a state and returns a new one; PageBuilder wraps them in
+ * setGallery() and adds what is not the state's business: confirming a
+ * removal and marking the form dirty. Out here they have tests
+ * (app/admin/__tests__/gallery-ops.test.ts).
+ *
+ * An index that does not exist leaves the state as it is.
+ */
+
+import { arrayMove } from '@dnd-kit/sortable';
+import type { GalleryState } from './galleryYaml';
+import type { AlbumEntry, PickerTarget, Section, Subpage } from './types';
+
+/**
+ * Where a list of albums lives: the standalone list, a subpage's own list, or
+ * a section of a subpage. PickerTarget and ActiveEditAlbumAddress both carry
+ * this shape.
+ */
+type AlbumListAddress = Pick<PickerTarget, 'type' | 'subpageIndex' | 'sectionIndex'>;
+
+function mapSubpage(g: GalleryState, index: number, fn: (sp: Subpage) => Subpage): GalleryState {
+  if (!g.subpages[index]) return g;
+  return { ...g, subpages: g.subpages.map((sp, i) => (i === index ? fn(sp) : sp)) };
+}
+
+function mapSection(
+  g: GalleryState,
+  subpageIndex: number,
+  sectionIndex: number,
+  fn: (sec: Section) => Section,
+): GalleryState {
+  if (!g.subpages[subpageIndex]?.sections?.[sectionIndex]) return g;
+  return mapSubpage(g, subpageIndex, (sp) => ({
+    ...sp,
+    sections: sp.sections!.map((sec, i) => (i === sectionIndex ? fn(sec) : sec)),
+  }));
+}
+
+/** Replace the album list at an address. */
+export function mapAlbums(
+  g: GalleryState,
+  at: AlbumListAddress,
+  fn: (albums: AlbumEntry[]) => AlbumEntry[],
+): GalleryState {
+  if (at.type === 'standalone') return { ...g, albums: fn(g.albums) };
+  if (at.subpageIndex == null) return g;
+  if (at.type === 'subpage') {
+    return mapSubpage(g, at.subpageIndex, (sp) => ({ ...sp, albums: fn(sp.albums) }));
+  }
+  if (at.sectionIndex == null) return g;
+  return mapSection(g, at.subpageIndex, at.sectionIndex, (sec) => ({
+    ...sec,
+    albums: fn(sec.albums),
+  }));
+}
+
+/** The album list at an address, or undefined when the address is stale. */
+export function albumsAt(g: GalleryState, at: AlbumListAddress): AlbumEntry[] | undefined {
+  if (at.type === 'standalone') return g.albums;
+  const sp = at.subpageIndex == null ? undefined : g.subpages[at.subpageIndex];
+  if (at.type === 'subpage') return sp?.albums;
+  return at.sectionIndex == null ? undefined : sp?.sections?.[at.sectionIndex]?.albums;
+}
+
+// ── Albums ──────────────────────────────────────────────────────
+
+export const addAlbum = (g: GalleryState, at: AlbumListAddress, entry: AlbumEntry) =>
+  mapAlbums(g, at, (albums) => [...albums, entry]);
+
+export const updateAlbum = (
+  g: GalleryState,
+  at: AlbumListAddress,
+  albumIndex: number,
+  updates: Partial<AlbumEntry>,
+) =>
+  mapAlbums(g, at, (albums) => albums.map((a, i) => (i === albumIndex ? { ...a, ...updates } : a)));
+
+export const removeAlbum = (g: GalleryState, at: AlbumListAddress, albumIndex: number) =>
+  mapAlbums(g, at, (albums) => albums.filter((_, i) => i !== albumIndex));
+
+export const moveAlbum = (g: GalleryState, at: AlbumListAddress, from: number, to: number) =>
+  mapAlbums(g, at, (albums) => arrayMove(albums, from, to));
+
+// ── Hero ────────────────────────────────────────────────────────
+
+export const addHero = (g: GalleryState, assetId: string): GalleryState => ({
+  ...g,
+  hero: [...g.hero, assetId],
+});
+
+export const removeHero = (g: GalleryState, index: number): GalleryState => ({
+  ...g,
+  hero: g.hero.filter((_, i) => i !== index),
+});
+
+export const moveHero = (g: GalleryState, from: number, to: number): GalleryState => ({
+  ...g,
+  hero: arrayMove(g.hero, from, to),
+});
+
+// ── Subpages and sections ───────────────────────────────────────
+
+export const addSubpage = (g: GalleryState): GalleryState => ({
+  ...g,
+  subpages: [
+    ...g.subpages,
+    { name: `New Page ${g.subpages.length + 1}`, albums: [], sections: undefined },
+  ],
+});
+
+export const removeSubpage = (g: GalleryState, index: number): GalleryState => ({
+  ...g,
+  subpages: g.subpages.filter((_, i) => i !== index),
+});
+
+export const updateSubpage = (g: GalleryState, index: number, updates: Partial<Subpage>) =>
+  mapSubpage(g, index, (sp) => ({ ...sp, ...updates }));
+
+export const moveSubpage = (g: GalleryState, from: number, to: number): GalleryState => ({
+  ...g,
+  subpages: arrayMove(g.subpages, from, to),
+});
+
+export const addSection = (g: GalleryState, subpageIndex: number) =>
+  mapSubpage(g, subpageIndex, (sp) => ({
+    ...sp,
+    sections: [...(sp.sections || []), { title: 'New Section', albums: [] }],
+  }));
+
+export const removeSection = (g: GalleryState, subpageIndex: number, sectionIndex: number) =>
+  mapSubpage(g, subpageIndex, (sp) => ({
+    ...sp,
+    sections: (sp.sections || []).filter((_, i) => i !== sectionIndex),
+  }));
+
+export const updateSection = (
+  g: GalleryState,
+  subpageIndex: number,
+  sectionIndex: number,
+  updates: Partial<Section>,
+) => mapSection(g, subpageIndex, sectionIndex, (sec) => ({ ...sec, ...updates }));
+
+// ── Reading ─────────────────────────────────────────────────────
+
+/** The "03 — Collection" number the page renders: counted over enabled subpages only. */
+export function enabledPosition(g: GalleryState, index: number): number | undefined {
+  const sp = g.subpages[index];
+  if (!sp || sp.enabled === false) return undefined;
+  return g.subpages.slice(0, index).filter((s) => s.enabled !== false).length + 1;
+}
+
+/** Every album published anywhere, so the picker can mark the ones already in use. */
+export function usedAlbumIds(g: GalleryState): Set<string> {
+  const ids = new Set<string>();
+  g.albums.forEach((a) => ids.add(a.id));
+  g.subpages.forEach((sp) => {
+    sp.albums.forEach((a) => ids.add(a.id));
+    sp.sections?.forEach((sec) => sec.albums.forEach((a) => ids.add(a.id)));
+  });
+  return ids;
+}
+
+/**
+ * Where the open subpage sheet goes after a drag, so the sheet stays on the
+ * page it was showing.
+ */
+export function followMovedIndex(open: number | null, from: number, to: number): number | null {
+  if (open === null) return null;
+  if (open === from) return to;
+  if (from < open && to >= open) return open - 1;
+  if (from > open && to <= open) return open + 1;
+  return open;
+}
diff --git a/app/admin/components/page-builder/galleryYaml.ts b/app/admin/components/page-builder/galleryYaml.ts
new file mode 100644
index 0000000..6f218ad
--- /dev/null
+++ b/app/admin/components/page-builder/galleryYaml.ts
@@ -0,0 +1,130 @@
+/**
+ * gallery.yaml ⇄ the page builder's model (#608).
+ *
+ * This is the code that decides what ends up in gallery.yaml when the
+ * builder saves. It lived inside the 1,200-line PageBuilder component, where
+ * nothing could test it; as pure functions it has a table of cases in
+ * app/admin/__tests__/gallery-yaml.test.ts.
+ */
+
+import { parseAlbumEntries, serializeAlbumEntries } from './albumEntries';
+import { seedCoverGrid, type AlbumEntry, type Subpage } from './types';
+
+export interface GalleryState {
+  hero: string[];
+  albums: AlbumEntry[];
+  subpages: Subpage[];
+}
+
+/**
+ * Accepts both subpage shapes gallery.yaml allows: the list of objects the
+ * builder writes, and the older map of name → albums (or name → object).
+ */
+export function parseGalleryYaml(raw: Record<string, unknown>): GalleryState {
+  const hero = Array.isArray(raw.hero) ? raw.hero : raw.hero ? [raw.hero as string] : [];
+  const albums = parseAlbumEntries(
+    raw.albums as Array<string | Record<string, string>> | undefined,
+  );
+
+  let subpages: Subpage[] = [];
+  if (Array.isArray(raw.subpages)) {
+    subpages = (raw.subpages as Array<Record<string, unknown>>).map((sp) => ({
+      name: (sp.name as string) || '',
+      title: sp.title as string | undefined,
+      subtitle: sp.subtitle as string | undefined,
+      password: sp.password as string | undefined,
+      enabled: sp.enabled !== false,
+      hidden: sp.hidden === true,
+      proofing: typeof sp.proofing === 'boolean' ? sp.proofing : undefined,
+      location: sp.location as string | undefined,
+      essayText: sp.essayText as string | undefined,
+      essayFile: sp.essayFile as string | undefined,
+      albums: parseAlbumEntries(sp.albums as Array<string | Record<string, string>> | undefined),
+      sections: sp.sections
+        ? (sp.sections as Array<Record<string, unknown>>).map((sec) => ({
+            title: (sec.title as string) || '',
+            description: sec.description as string | undefined,
+            albums: parseAlbumEntries(sec.albums as Array<string | Record<string, string>>),
+          }))
+        : undefined,
+      grid: sp.grid as Subpage['grid'],
+      coverGrid:
+        (sp.coverGrid as Subpage['coverGrid']) ?? seedCoverGrid(sp.grid as Subpage['grid']),
+    }));
+  } else if (raw.subpages && typeof raw.subpages === 'object') {
+    subpages = Object.entries(raw.subpages as Record<string, unknown>).map(([name, value]) => {
+      if (Array.isArray(value)) {
+        return { name, albums: parseAlbumEntries(value), sections: undefined, enabled: true };
+      }
+      const sp = value as Record<string, unknown>;
+      return {
+        name,
+        title: sp.title as string | undefined,
+        subtitle: sp.subtitle as string | undefined,
+        password: sp.password as string | undefined,
+        enabled: sp.enabled !== false,
+        hidden: sp.hidden === true,
+        proofing: typeof sp.proofing === 'boolean' ? sp.proofing : undefined,
+        location: sp.location as string | undefined,
+        essayText: sp.essayText as string | undefined,
+        essayFile: sp.essayFile as string | undefined,
+        albums: parseAlbumEntries(sp.albums as Array<string | Record<string, string>> | undefined),
+        sections: undefined,
+        grid: sp.grid as Subpage['grid'],
+        coverGrid:
+          (sp.coverGrid as Subpage['coverGrid']) ?? seedCoverGrid(sp.grid as Subpage['grid']),
+      };
+    });
+  }
+
+  return { hero, albums, subpages };
+}
+
+/** The gallery.yaml object for a builder state. Empty groups are left out. */
+export function serializeGallery(gallery: GalleryState): Record<string, unknown> {
+  const yamlData: Record<string, unknown> = {};
+
+  if (gallery.hero.length > 0) {
+    yamlData.hero = gallery.hero;
+  }
+  if (gallery.albums.length > 0) {
+    yamlData.albums = serializeAlbumEntries(gallery.albums);
+  }
+  if (gallery.subpages.length > 0) {
+    yamlData.subpages = gallery.subpages.map((sp) => {
+      const entry: Record<string, unknown> = { name: sp.name };
+      if (sp.title) entry.title = sp.title;
+      if (sp.subtitle) entry.subtitle = sp.subtitle;
+      if (sp.password) entry.password = sp.password;
+      if (sp.enabled === false) entry.enabled = false;
+      if (sp.hidden === true) entry.hidden = true;
+      // Both values mean something: false switches proofing off for this page.
+      if (sp.proofing !== undefined) entry.proofing = sp.proofing;
+      if (sp.essayText) entry.essayText = sp.essayText;
+      if (sp.essayFile) entry.essayFile = sp.essayFile;
+      if (sp.grid) entry.grid = sp.grid;
+      if (sp.coverGrid) entry.coverGrid = sp.coverGrid;
+      if (sp.location) entry.location = sp.location;
+
+      if (sp.sections && sp.sections.length > 0) {
+        entry.sections = sp.sections.map((sec) => {
+          const s: Record<string, unknown> = {
+            title: sec.title,
+            albums: serializeAlbumEntries(sec.albums),
+          };
+          if (sec.description) s.description = sec.description;
+          return s;
+        });
+        if (sp.albums.length > 0) {
+          entry.albums = serializeAlbumEntries(sp.albums);
+        }
+      } else {
+        entry.albums = serializeAlbumEntries(sp.albums);
+      }
+
+      return entry;
+    });
+  }
+
+  return yamlData;
+}
diff --git a/app/admin/components/page-builder/types.ts b/app/admin/components/page-builder/types.ts
index 4e7d117..678e9e5 100644
--- a/app/admin/components/page-builder/types.ts
+++ b/app/admin/components/page-builder/types.ts
@@ -38,6 +38,11 @@ export interface Subpage {
   subtitle?: string;
   password?: string;
   enabled?: boolean;
+  /**
+   * Client proofing on this page, overriding the site-wide setting in either
+   * direction. No control in the builder yet; carried so a save keeps it.
+   */
+  proofing?: boolean;
   /** EXPERIMENTAL: reachable by direct link, but not shown in navigation */
   hidden?: boolean;
   essayText?: string;
diff --git a/app/admin/components/settings/AboutSection.tsx b/app/admin/components/settings/AboutSection.tsx
new file mode 100644
index 0000000..a8c7212
--- /dev/null
+++ b/app/admin/components/settings/AboutSection.tsx
@@ -0,0 +1,287 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import * as Icons from '../Icons';
+import type { SaveStatus } from '../SaveBar';
+import { useDraft, readDraft } from '../useDraft';
+import { useContentRestored } from '../contentRestored';
+
+interface AboutMeta {
+  portrait?: string;
+  name?: string;
+  location?: string;
+  gear?: string[];
+}
+
+/** The About editor's state, as kept in a draft. */
+interface AboutDraft {
+  meta: AboutMeta;
+  body: string;
+  gearText: string;
+}
+
+/**
+ * What a draft of the About page is compared against: the file's content, not
+ * the textarea's. `gearText` is derived from `meta.gear` and would make a
+ * trailing newline read as a change on disk.
+ */
+function aboutFingerprint(about: AboutDraft): string {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { gear: _gear, ...meta } = about.meta;
+  const gear = about.gearText
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+  return JSON.stringify({ meta, gear, body: about.body });
+}
+
+/**
+ * The About page editor's state: content/about.md, loaded over its own
+ * endpoint and saved on its own, but reached through the settings nav and
+ * saved by the same save bar and ⌘S (#554).
+ *
+ * A hook rather than state inside the section, because the section unmounts
+ * when another one is opened while an About edit is still unsaved, and the
+ * save bar has to keep offering it.
+ */
+export function useAboutEditor(active: boolean) {
+  const [aboutMeta, setAboutMeta] = useState<AboutMeta>({});
+  const [aboutBody, setAboutBody] = useState('');
+  const [aboutLoading, setAboutLoading] = useState(false);
+  const [aboutLoaded, setAboutLoaded] = useState(false);
+  const [aboutSaving, setAboutSaving] = useState(false);
+  const [aboutDirty, setAboutDirty] = useState(false);
+  const [aboutStatus, setAboutStatus] = useState<SaveStatus>(null);
+  const [aboutGearText, setAboutGearText] = useState('');
+  const [serverAbout, setServerAbout] = useState<AboutDraft | null>(null);
+
+  // Unsaved About edits survive a tab switch or Reload, like settings (#592).
+  const draft = useDraft<AboutDraft>(
+    'about',
+    { meta: aboutMeta, body: aboutBody, gearText: aboutGearText },
+    aboutDirty,
+  );
+  const loadDraft = draft.load;
+
+  const applyAbout = (value: AboutDraft) => {
+    setAboutMeta(value.meta);
+    setAboutBody(value.body);
+    setAboutGearText(value.gearText);
+  };
+
+  const loadAboutContent = useCallback(async () => {
+    setAboutLoading(true);
+    setAboutStatus(null);
+    try {
+      const res = await fetch('/api/admin/about');
+      if (!res.ok) {
+        throw new Error(
+          res.status === 401
+            ? 'Your session has expired. Sign in again to continue.'
+            : `The server answered ${res.status}.`,
+        );
+      }
+      const data = await res.json();
+      const loaded: AboutDraft = {
+        meta: data.meta || {},
+        body: data.body || '',
+        gearText: data.meta?.gear?.join('\n') || '',
+      };
+      setServerAbout(loaded);
+      const restored = loadDraft(aboutFingerprint(loaded));
+      const value = restored ?? loaded;
+      setAboutMeta(value.meta);
+      setAboutBody(value.body);
+      setAboutGearText(value.gearText);
+      setAboutDirty(restored !== null);
+      setAboutLoaded(true);
+    } catch (err) {
+      console.error('Failed to load about content:', err);
+      // aboutLoaded stays false, which is what blocks the save below: an empty
+      // editor written to about.md would replace the page with nothing.
+      setAboutStatus({
+        kind: 'error',
+        message: `Error: ${err instanceof Error ? err.message : 'The About page could not be loaded.'}`,
+      });
+    } finally {
+      setAboutLoading(false);
+    }
+  }, [loadDraft]);
+
+  async function saveAboutContent() {
+    if (!aboutLoaded) return;
+
+    setAboutSaving(true);
+    setAboutStatus(null);
+    const cleanedMeta = { ...aboutMeta };
+    for (const [k, v] of Object.entries(cleanedMeta)) {
+      if (v === '' || v === undefined) delete cleanedMeta[k as keyof typeof cleanedMeta];
+    }
+    const gearLines = aboutGearText
+      .split('\n')
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (gearLines.length > 0) {
+      cleanedMeta.gear = gearLines;
+    } else {
+      delete cleanedMeta.gear;
+    }
+
+    try {
+      const res = await fetch('/api/admin/about', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ meta: cleanedMeta, body: aboutBody }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        const saved: AboutDraft = { meta: cleanedMeta, body: aboutBody, gearText: aboutGearText };
+        setServerAbout(saved);
+        draft.saved(aboutFingerprint(saved));
+        setAboutDirty(false);
+        setAboutStatus({ kind: 'success', message: data.message || 'Saved!' });
+        setTimeout(() => setAboutStatus(null), 4000);
+      } else {
+        const err = await res.json();
+        setAboutStatus({ kind: 'error', message: `Error: ${err.error}` });
+      }
+    } catch {
+      setAboutStatus({ kind: 'error', message: 'Error: Failed to save' });
+    } finally {
+      setAboutSaving(false);
+    }
+  }
+
+  // Loaded the first time the About section opens, and only then: the editor
+  // stays mounted across sections, so reloading on every visit would overwrite
+  // unsaved About edits with the file on disk.
+  useEffect(() => {
+    if (active && !aboutLoaded) loadAboutContent();
+  }, [active, aboutLoaded, loadAboutContent]);
+
+  // A kept About draft loads the file at once, from any section, so the save
+  // bar owns up to those edits before the About section is ever opened.
+  useEffect(() => {
+    if (!active && readDraft('about')) loadAboutContent();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // A restored about.md replaces what this editor loaded.
+  useContentRestored(({ target }) => {
+    if (target === 'about' && aboutLoaded) loadAboutContent();
+  });
+
+  function updateAboutMeta(key: string, value: unknown) {
+    setAboutMeta((m) => ({ ...m, [key]: value }));
+    setAboutDirty(true);
+    setAboutStatus(null);
+  }
+
+  return {
+    meta: aboutMeta,
+    body: aboutBody,
+    gearText: aboutGearText,
+    loading: aboutLoading,
+    saving: aboutSaving,
+    dirty: aboutDirty,
+    status: aboutStatus as SaveStatus,
+    updateMeta: updateAboutMeta,
+    setBody: (value: string) => {
+      setAboutBody(value);
+      setAboutDirty(true);
+      setAboutStatus(null);
+    },
+    setGearText: (value: string) => {
+      setAboutGearText(value);
+      setAboutDirty(true);
+      setAboutStatus(null);
+    },
+    save: saveAboutContent,
+    draftStatus: draft.status,
+    dismissDraft: draft.dismiss,
+    discardDraft: () => {
+      draft.discard();
+      if (serverAbout) applyAbout(serverAbout);
+      setAboutDirty(false);
+      setAboutStatus(null);
+    },
+    restoreDraft: () => {
+      const value = draft.takeConflicting();
+      if (!value) return;
+      applyAbout(value);
+      setAboutDirty(true);
+    },
+  };
+}
+
+export type AboutEditor = ReturnType<typeof useAboutEditor>;
+
+export default function AboutSection({ about }: { about: AboutEditor }) {
+  return (
+    <div className="settings-panel">
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconCamera size={18} /> About Page
+        </h3>
+        <p className="settings-section-sub">
+          Edit the portrait, biography and gear shown on the About page. Use General to show or hide
+          the page itself.
+        </p>
+      </div>
+
+      {about.loading ? (
+        <div className="admin-spinner" style={{ margin: '2rem auto' }} />
+      ) : (
+        <>
+          <div className="admin-field">
+            <label htmlFor="about-portrait-asset-id">Portrait Asset ID</label>
+            <input
+              id="about-portrait-asset-id"
+              value={about.meta.portrait || ''}
+              onChange={(e) => about.updateMeta('portrait', e.target.value)}
+              placeholder="Immich asset UUID for the portrait photo"
+            />
+          </div>
+          <div className="admin-field">
+            <label htmlFor="about-name">Name</label>
+            <input
+              id="about-name"
+              value={about.meta.name || ''}
+              onChange={(e) => about.updateMeta('name', e.target.value)}
+              placeholder="Your name"
+            />
+          </div>
+          <div className="admin-field">
+            <label htmlFor="about-location">Location</label>
+            <input
+              id="about-location"
+              value={about.meta.location || ''}
+              onChange={(e) => about.updateMeta('location', e.target.value)}
+              placeholder="City, Country"
+            />
+          </div>
+          <div className="admin-field">
+            <label htmlFor="about-gear">Gear (one per line)</label>
+            <textarea
+              id="about-gear"
+              value={about.gearText}
+              onChange={(e) => about.setGearText(e.target.value)}
+              placeholder={`Leica Q3\nSummilux 35mm f/1.4`}
+              rows={4}
+            />
+          </div>
+          <div className="admin-field">
+            <label htmlFor="about-biography">Biography (Markdown)</label>
+            <textarea
+              id="about-biography"
+              value={about.body}
+              onChange={(e) => about.setBody(e.target.value)}
+              placeholder="Photographer based in..."
+              rows={6}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/app/admin/components/settings/FooterSection.tsx b/app/admin/components/settings/FooterSection.tsx
new file mode 100644
index 0000000..d8981c1
--- /dev/null
+++ b/app/admin/components/settings/FooterSection.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import * as Icons from '../Icons';
+import type { SectionProps } from './types';
+
+export default function FooterSection({ settings, update }: SectionProps) {
+  return (
+    <div className="settings-panel">
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconLink size={18} /> Footer &amp; Social Links
+        </h3>
+        <p className="settings-section-sub">
+          Display branding, Instagram, email and website links in portfolio footer.
+        </p>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="footer-brand-name">Footer Brand Name</label>
+        <input
+          id="footer-brand-name"
+          value={settings.footer?.name || ''}
+          onChange={(e) => update('footer.name', e.target.value)}
+          placeholder="My Photography"
+        />
+      </div>
+      <div className="admin-field">
+        <label htmlFor="footer-instagram-url">Instagram URL</label>
+        <input
+          id="footer-instagram-url"
+          value={settings.footer?.instagram || ''}
+          onChange={(e) => update('footer.instagram', e.target.value)}
+          placeholder="https://instagram.com/your-handle"
+        />
+      </div>
+      <div className="admin-field-row">
+        <div className="admin-field">
+          <label htmlFor="footer-contact-email">Contact Email</label>
+          <input
+            id="footer-contact-email"
+            value={settings.footer?.email || ''}
+            onChange={(e) => update('footer.email', e.target.value)}
+            placeholder="hello@example.com"
+          />
+        </div>
+        <div className="admin-field">
+          <label htmlFor="footer-personal-website">Personal Website</label>
+          <input
+            id="footer-personal-website"
+            value={settings.footer?.website || ''}
+            onChange={(e) => update('footer.website', e.target.value)}
+            placeholder="https://example.com"
+          />
+        </div>
+      </div>
+
+      <div className="settings-section-header" style={{ marginTop: '2rem' }}>
+        <h3>
+          <Icons.IconLink size={18} /> Header Navigation Links (Experimental)
+        </h3>
+        <p className="settings-section-sub">
+          External links shown after your pages in the header menu. Only http(s) URLs are allowed;
+          they open in a new tab.
+        </p>
+      </div>
+
+      {(settings.navLinks || []).map((link, i) => (
+        <div className="admin-field-row" key={i}>
+          <div className="admin-field">
+            <label htmlFor="footer-label">Label</label>
+            <input
+              id="footer-label"
+              value={link.label || ''}
+              onChange={(e) => {
+                const next = [...(settings.navLinks || [])];
+                next[i] = { ...next[i], label: e.target.value };
+                update('navLinks', next);
+              }}
+              placeholder="Shop"
+            />
+          </div>
+          <div className="admin-field">
+            <label htmlFor="footer-url">URL</label>
+            <input
+              id="footer-url"
+              value={link.url || ''}
+              onChange={(e) => {
+                const next = [...(settings.navLinks || [])];
+                next[i] = { ...next[i], url: e.target.value };
+                update('navLinks', next);
+              }}
+              placeholder="https://shop.example.com"
+            />
+          </div>
+          <button
+            type="button"
+            className="admin-btn admin-btn-sm"
+            style={{ alignSelf: 'flex-end' }}
+            onClick={() => {
+              const next = (settings.navLinks || []).filter((_, j) => j !== i);
+              update('navLinks', next.length > 0 ? next : undefined);
+            }}
+            title="Remove link"
+          >
+            Remove
+          </button>
+        </div>
+      ))}
+      <button
+        type="button"
+        className="admin-btn admin-btn-sm"
+        onClick={() => update('navLinks', [...(settings.navLinks || []), { label: '', url: '' }])}
+      >
+        + Add external link
+      </button>
+    </div>
+  );
+}
diff --git a/app/admin/components/settings/GeneralSection.tsx b/app/admin/components/settings/GeneralSection.tsx
new file mode 100644
index 0000000..5ff13c9
--- /dev/null
+++ b/app/admin/components/settings/GeneralSection.tsx
@@ -0,0 +1,311 @@
+'use client';
+
+import { useState } from 'react';
+import * as Icons from '../Icons';
+import type { SaveStatus } from '../SaveBar';
+import { resolveExifDisplay } from '@/lib/config/schema';
+import { SUPPORTED_LOCALES } from '@/lib/i18n';
+import { FeatureGroup, FeatureRow, SettingRow } from './fields';
+import type { SectionProps } from './types';
+import { useConfirm } from '../ConfirmDialog';
+
+export default function GeneralSection({ settings, update, updateMany }: SectionProps) {
+  const confirm = useConfirm();
+  // Collapsed by default: the four metadata switches are a detail of one
+  // decision, and showing them permanently is what made the section a wall (#510).
+  const [metadataOpen, setMetadataOpen] = useState(false);
+  const [faviconUploading, setFaviconUploading] = useState(false);
+  const [faviconStatus, setFaviconStatus] = useState<SaveStatus>(null);
+
+  // Resolved the same way the site resolves it, so the switches show what a
+  // visitor actually sees — including a config that only ever set the older
+  // `exifOnHover`.
+  const exif = resolveExifDisplay(settings.exif, settings.exifOnHover);
+
+  // The master switch has no key of its own and needs none: "off" is all four
+  // groups off, a state the site already acts on — with nothing left to show,
+  // the lightbox withdraws its info button and the `i` key entirely (#506).
+  const anyMetadata = exif.camera || exif.settings || exif.location || exif.caption;
+  const metadataSummary =
+    [
+      exif.camera && 'Camera & lens',
+      exif.settings && 'Exposure',
+      exif.location && 'Location',
+      exif.caption && 'Description',
+    ]
+      .filter(Boolean)
+      .join(' · ') || 'Nothing published — the lightbox hides its info panel';
+
+  /** Turning it back on selects everything; the details below narrow it again. */
+  const toggleMetadata = () =>
+    updateMany({
+      'exif.camera': !anyMetadata,
+      'exif.settings': !anyMetadata,
+      'exif.location': !anyMetadata,
+      'exif.caption': !anyMetadata,
+    });
+
+  return (
+    <div className="settings-panel">
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconGear size={18} /> General Site Settings
+        </h3>
+        <p className="settings-section-sub">
+          Configure basic site identity, language, and core feature toggles.
+        </p>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="general-site-title">Site Title</label>
+        <input
+          id="general-site-title"
+          value={settings.title || ''}
+          onChange={(e) => update('title', e.target.value)}
+          placeholder="My Portfolio"
+        />
+      </div>
+      <div className="admin-field">
+        <label htmlFor="general-subtitle">Subtitle</label>
+        <input
+          id="general-subtitle"
+          value={settings.subtitle || ''}
+          onChange={(e) => update('subtitle', e.target.value)}
+          placeholder="A visual journal"
+        />
+      </div>
+      <div className="admin-field">
+        <label htmlFor="general-language">Language</label>
+        <select
+          id="general-language"
+          aria-label="Language"
+          value={settings.lang || 'en'}
+          onChange={(e) => update('lang', e.target.value)}
+        >
+          <option value="en">English (US)</option>
+          <option value="de">Deutsch (DE)</option>
+          <option value="fr">Français (FR)</option>
+          <option value="es">Español (ES)</option>
+          <option value="it">Italiano (IT)</option>
+          <option value="nl">Nederlands (NL)</option>
+          <option value="ja">日本語 (JA)</option>
+        </select>
+        <p className="admin-field-hint">
+          The visitor-facing interface is translated for {SUPPORTED_LOCALES.join(', ')}. Other
+          languages still set <code>&lt;html lang&gt;</code> and date formatting, but show the
+          English interface. The admin panel is always English.
+        </p>
+      </div>
+
+      <div className="settings-section-divider" />
+
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconSparkles size={18} /> Portfolio Features &amp; Modules
+        </h3>
+        <p className="settings-section-sub">
+          Optional pages, and what the site reveals about your photos and counts about visits.
+        </p>
+      </div>
+
+      <FeatureGroup
+        icon={<Icons.IconFrame size={13} />}
+        title="Modules"
+        description="Each one adds a page or a control visitors can use."
+      >
+        <div className="feature-list">
+          <FeatureRow
+            icon={<Icons.IconCamera size={15} />}
+            title="About page"
+            description="Portrait, bio and gear at /about"
+            checked={settings.about?.enabled !== false}
+            onToggle={() => update('about.enabled', settings.about?.enabled === false)}
+            href="/admin/settings/about"
+          />
+          <FeatureRow
+            icon={<Icons.IconMap size={15} />}
+            title="Map"
+            description="Photo locations on a world map at /map"
+            checked={settings.map === true}
+            onToggle={() => update('map', !settings.map)}
+          />
+          <FeatureRow
+            icon={<Icons.IconHeart size={15} />}
+            title="Client proofing"
+            description="Visitors heart, filter and export a selection of photos"
+            checked={settings.proofing?.enabled !== false}
+            onToggle={() => update('proofing.enabled', settings.proofing?.enabled === false)}
+          />
+        </div>
+      </FeatureGroup>
+
+      <FeatureGroup
+        icon={<Icons.IconShieldCheck size={13} />}
+        title="What visitors learn about you"
+        description="What each photo reveals, and what is counted about a visit."
+        chip="visible to visitors"
+      >
+        <div className={`metadata-card ${anyMetadata ? 'active' : ''}`}>
+          <button
+            type="button"
+            className="metadata-card-main"
+            onClick={toggleMetadata}
+            aria-pressed={anyMetadata}
+          >
+            <span className="toggle-card-info">
+              <span className="toggle-card-title">
+                <Icons.IconCamera size={16} /> Photo metadata
+              </span>
+              <span className="toggle-card-desc">{metadataSummary}</span>
+            </span>
+            <span className={`switch-toggle ${anyMetadata ? 'on' : ''}`}>
+              <span className="switch-slider" />
+            </span>
+          </button>
+
+          <button
+            type="button"
+            className="metadata-details-btn"
+            onClick={() => setMetadataOpen((open) => !open)}
+            aria-expanded={metadataOpen}
+          >
+            Details
+            <Icons.IconChevronDown
+              size={13}
+              className={`metadata-details-chevron${metadataOpen ? ' open' : ''}`}
+            />
+          </button>
+
+          {metadataOpen && (
+            <div className="metadata-details">
+              <SettingRow
+                title="Camera &amp; Lens"
+                description="Body, lens and focal length"
+                checked={exif.camera}
+                onToggle={() => update('exif.camera', !exif.camera)}
+              />
+              <SettingRow
+                title="Exposure Settings"
+                description="Aperture, shutter speed and ISO"
+                checked={exif.settings}
+                onToggle={() => update('exif.settings', !exif.settings)}
+              />
+              <SettingRow
+                title="Location"
+                description="City and country from the photo's GPS data"
+                checked={exif.location}
+                onToggle={() => update('exif.location', !exif.location)}
+              />
+              <SettingRow
+                title="Photo Description"
+                description="The description written in Immich"
+                checked={exif.caption}
+                onToggle={() => update('exif.caption', !exif.caption)}
+              />
+
+              {/* Dependent, not a peer: this only controls the grid overlay, and
+                      the overlay carries camera and lens. With those off it has
+                      nothing to show, which used to leave it switched on and
+                      silently doing nothing (#510). */}
+              <SettingRow
+                indented
+                title="Summary on grid hover"
+                description="Camera and lens over the photo, not only in the lightbox"
+                checked={settings.exifOnHover !== false}
+                disabled={!exif.camera}
+                hint={exif.camera ? undefined : 'Needs Camera & Lens'}
+                onToggle={() => update('exifOnHover', settings.exifOnHover === false)}
+              />
+            </div>
+          )}
+        </div>
+        <div className="feature-list">
+          <FeatureRow
+            icon={<Icons.IconBarChart size={15} />}
+            title="Analytics"
+            description="Cookieless view counts, stored on your server only"
+            checked={settings.analytics !== false}
+            onToggle={() => update('analytics', settings.analytics === false)}
+            href="/admin/analytics"
+          />
+        </div>
+      </FeatureGroup>
+
+      <div className="admin-field favicon-field">
+        <span className="admin-field-label">Favicon</span>
+        <div className="favicon-row">
+          <input
+            type="file"
+            accept=".svg,.png,.ico,.jpg,.jpeg"
+            disabled={faviconUploading}
+            onChange={async (e) => {
+              const file = e.target.files?.[0];
+              if (!file) return;
+              setFaviconStatus(null);
+              setFaviconUploading(true);
+              const form = new FormData();
+              form.append('file', file);
+              try {
+                const res = await fetch('/api/admin/favicon', {
+                  method: 'PUT',
+                  body: form,
+                });
+                const data = await res.json();
+                setFaviconStatus(
+                  res.ok
+                    ? { kind: 'success', message: data.message }
+                    : { kind: 'error', message: `Error: ${data.error}` },
+                );
+              } catch {
+                setFaviconStatus({ kind: 'error', message: 'Error: Upload failed' });
+              } finally {
+                setFaviconUploading(false);
+                e.target.value = '';
+              }
+            }}
+          />
+          <button
+            type="button"
+            className="admin-btn"
+            disabled={faviconUploading}
+            onClick={async () => {
+              // Deletes the uploaded file at once, outside the staged form.
+              const ok = await confirm({
+                title: 'Reset the favicon?',
+                message: 'The uploaded icon is deleted and the bundled default is used again.',
+                confirmLabel: 'Reset',
+                danger: true,
+              });
+              if (!ok) return;
+              setFaviconStatus(null);
+              setFaviconUploading(true);
+              try {
+                const res = await fetch('/api/admin/favicon', { method: 'DELETE' });
+                const data = await res.json();
+                setFaviconStatus(
+                  res.ok
+                    ? { kind: 'success', message: data.message }
+                    : { kind: 'error', message: `Error: ${data.error}` },
+                );
+              } catch {
+                setFaviconStatus({ kind: 'error', message: 'Error: Reset failed' });
+              } finally {
+                setFaviconUploading(false);
+              }
+            }}
+          >
+            Reset
+          </button>
+          {faviconUploading && <div className="admin-spinner" />}
+        </div>
+        {faviconStatus && (
+          <p className={`save-message ${faviconStatus.kind}`}>{faviconStatus.message}</p>
+        )}
+        <span className="admin-field-hint">
+          SVG, PNG, ICO, or JPEG — max 512 kB. Stored in the content volume. Reset restores the
+          bundled default.
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/components/settings/GridSection.tsx b/app/admin/components/settings/GridSection.tsx
new file mode 100644
index 0000000..2194758
--- /dev/null
+++ b/app/admin/components/settings/GridSection.tsx
@@ -0,0 +1,204 @@
+'use client';
+
+import * as Icons from '../Icons';
+import OptionGrid, { toOptions } from '../fields/OptionGrid';
+import {
+  PHOTO_GRID_COLUMNS_MAX,
+  PHOTO_GRID_COLUMNS_MIN,
+  PHOTO_GRID_GAP_MAX,
+} from '@/lib/config/schema';
+import type { SectionProps } from './types';
+
+const LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow', 'justified'];
+const ASPECT_RATIOS = ['1', '3/2', '2/3', '16/9', 'auto'];
+
+const LAYOUT_INFO: Record<string, { label: string; desc: string }> = {
+  masonry: {
+    label: 'Masonry',
+    desc: 'Dynamic pinterest-style staggered columns',
+  },
+  uniform: { label: 'Uniform Grid', desc: 'Clean equal aspect ratio grid' },
+  showcase: {
+    label: 'Showcase',
+    desc: 'Featured hero photos mixed with smaller tiles',
+  },
+  filmstrip: {
+    label: 'Filmstrip',
+    desc: 'Horizontal scrollable film strip timeline',
+  },
+  'editorial-flow': {
+    label: 'Editorial Flow',
+    desc: 'Magazine story layout with varying photo sizes',
+  },
+  justified: {
+    label: 'Justified (Experimental)',
+    desc: 'Equal-height rows that fill the full width',
+  },
+};
+const LAYOUT_OPTIONS = toOptions(LAYOUTS, LAYOUT_INFO);
+
+function LayoutPreview({ value }: { value: string }) {
+  return (
+    <div className="grid-card-preview">
+      <div className={`mini-layout-demo layout-demo-${value}`}>
+        {value === 'masonry' && (
+          <div className="demo-masonry-col-group">
+            <div className="demo-col">
+              <div className="demo-tile h-high" />
+              <div className="demo-tile h-low" />
+            </div>
+            <div className="demo-col">
+              <div className="demo-tile h-low" />
+              <div className="demo-tile h-high" />
+            </div>
+            <div className="demo-col">
+              <div className="demo-tile h-med" />
+              <div className="demo-tile h-med" />
+            </div>
+          </div>
+        )}
+        {value === 'uniform' && (
+          <div className="demo-uniform-grid">
+            <div className="demo-tile" />
+            <div className="demo-tile" />
+            <div className="demo-tile" />
+            <div className="demo-tile" />
+            <div className="demo-tile" />
+            <div className="demo-tile" />
+          </div>
+        )}
+        {value === 'showcase' && (
+          <div className="demo-showcase-grid">
+            <div className="demo-tile demo-hero" />
+            <div className="demo-col">
+              <div className="demo-tile" />
+              <div className="demo-tile" />
+            </div>
+          </div>
+        )}
+        {value === 'filmstrip' && (
+          <div className="demo-filmstrip-row">
+            <div className="demo-tile strip" />
+            <div className="demo-tile strip" />
+            <div className="demo-tile strip" />
+          </div>
+        )}
+        {value === 'editorial-flow' && (
+          <div className="demo-editorial-flow">
+            <div className="demo-tile wide" />
+            <div className="demo-row">
+              <div className="demo-tile" />
+              <div className="demo-tile" />
+            </div>
+          </div>
+        )}
+        {value === 'justified' && (
+          <div className="demo-editorial-flow">
+            <div className="demo-row">
+              <div className="demo-tile wide" />
+              <div className="demo-tile" />
+            </div>
+            <div className="demo-row">
+              <div className="demo-tile" />
+              <div className="demo-tile wide" />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const ASPECT_RATIO_INFO: Record<string, { label: string; desc: string }> = {
+  '1': { label: 'Square (1:1)', desc: '1:1 ratio square crops' },
+  '3/2': { label: 'Landscape (3:2)', desc: 'Standard 35mm DSLR landscape' },
+  '2/3': { label: 'Portrait (2:3)', desc: 'Vertical portrait orientation' },
+  '16/9': { label: 'Cinema (16:9)', desc: 'Widescreen 16:9 cinematic ratio' },
+  auto: {
+    label: 'Original Auto',
+    desc: 'Uncropped original image proportions',
+  },
+};
+const ASPECT_RATIO_OPTIONS = toOptions(ASPECT_RATIOS, ASPECT_RATIO_INFO);
+
+function AspectRatioPreview({ value }: { value: string }) {
+  return (
+    <div className="ratio-card-preview">
+      <div className={`mini-aspect-box ratio-${value.replace('/', '-')}`}>
+        <div className="mini-aspect-inner" />
+      </div>
+    </div>
+  );
+}
+
+export default function GridSection({ settings, update }: SectionProps) {
+  return (
+    <div className="settings-panel">
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconGrid size={18} /> Grid &amp; Layout Engine
+        </h3>
+        <p className="settings-section-sub">
+          Configure photography gallery column structures and thumbnail aspect ratios.
+        </p>
+      </div>
+
+      <OptionGrid
+        label="Layout Algorithm"
+        options={LAYOUT_OPTIONS}
+        value={settings.grid?.layout || 'masonry'}
+        onSelect={(v) => update('grid.layout', v)}
+        cardClassName="grid-layout-card"
+        renderPreview={(o) => <LayoutPreview value={o.value} />}
+      />
+
+      <OptionGrid
+        label="Aspect Ratio"
+        options={ASPECT_RATIO_OPTIONS}
+        value={settings.grid?.aspectRatio || '1'}
+        onSelect={(v) => update('grid.aspectRatio', v)}
+        cardClassName="ratio-card"
+        renderPreview={(o) => <AspectRatioPreview value={o.value} />}
+      />
+
+      <div className="settings-section-divider" />
+
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconColumns size={18} /> Spacing &amp; Columns
+        </h3>
+        <p className="settings-section-sub">
+          Adjust column counts and grid gap spacing. The column count also tiles the album covers on
+          a subpage; their spacing stays with the theme unless a page overrides it.
+        </p>
+      </div>
+
+      <div className="admin-field-row">
+        <div className="admin-field">
+          <label htmlFor="grid-columns">
+            Columns ({PHOTO_GRID_COLUMNS_MIN} - {PHOTO_GRID_COLUMNS_MAX})
+          </label>
+          <input
+            id="grid-columns"
+            type="number"
+            min={PHOTO_GRID_COLUMNS_MIN}
+            max={PHOTO_GRID_COLUMNS_MAX}
+            value={settings.grid?.columns ?? 3}
+            onChange={(e) => update('grid.columns', parseInt(e.target.value) || 3)}
+          />
+        </div>
+        <div className="admin-field">
+          <label htmlFor="grid-gap-spacing">Gap Spacing (px)</label>
+          <input
+            id="grid-gap-spacing"
+            type="number"
+            min={0}
+            max={PHOTO_GRID_GAP_MAX}
+            value={settings.grid?.gap ?? 12}
+            onChange={(e) => update('grid.gap', parseInt(e.target.value) || 0)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/components/settings/LegalSection.tsx b/app/admin/components/settings/LegalSection.tsx
new file mode 100644
index 0000000..0f87ea7
--- /dev/null
+++ b/app/admin/components/settings/LegalSection.tsx
@@ -0,0 +1,255 @@
+'use client';
+
+import * as Icons from '../Icons';
+import ToggleCard from '../fields/ToggleCard';
+import PrivacyEditor from '../PrivacyEditor';
+import { CONTACT_RETENTION_DEFAULT, CONTACT_RETENTION_MAX, isHttpUrl } from '@/lib/config/schema';
+import type { SectionProps } from './types';
+
+export default function LegalSection({ settings, update }: SectionProps) {
+  // The Impressum drops a non-http(s) contact URL with a warning in the server
+  // log, where nobody looks; say it here instead.
+  const contactUrl = settings.legal?.contactUrl?.trim();
+  const contactUrlInvalid = !!contactUrl && !isHttpUrl(contactUrl);
+  const notifyUrl = settings.contact?.notifyUrl?.trim();
+  const notifyUrlInvalid = !!notifyUrl && !isHttpUrl(notifyUrl);
+
+  return (
+    <div className="settings-panel">
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconScale size={18} /> Legal Notice &amp; Impressum
+        </h3>
+        <p className="settings-section-sub">
+          Configure the legal disclosure page required by the German Digitale-Dienste-Gesetz (DDG).
+        </p>
+        {settings.legal?.enabled && (
+          <a
+            href="/impressum"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="admin-btn admin-btn-sm settings-section-action"
+          >
+            View /impressum ↗
+          </a>
+        )}
+      </div>
+
+      <div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
+        <ToggleCard
+          icon={<Icons.IconFileText size={16} />}
+          title="Enable Impressum Page (/impressum)"
+          description="Automatically generates and links /impressum in footer"
+          checked={settings.legal?.enabled === true}
+          onToggle={() => update('legal.enabled', !settings.legal?.enabled)}
+        />
+      </div>
+
+      {settings.legal?.enabled && (
+        <>
+          <div className="admin-field">
+            <label htmlFor="legal-heading">Heading</label>
+            <input
+              id="legal-heading"
+              value={settings.legal?.heading || ''}
+              onChange={(e) => update('legal.heading', e.target.value)}
+              placeholder="Angaben gemäß § 5 DDG"
+            />
+            <p className="admin-field-hint">
+              Leave empty for the § 5 DDG line in the site language. Set it when a different law
+              applies, e.g. § 5 ECG in Austria.
+            </p>
+          </div>
+          <div className="admin-field-row">
+            <div className="admin-field">
+              <label htmlFor="legal-full-name-business-name">Full Name / Business Name</label>
+              <input
+                id="legal-full-name-business-name"
+                value={settings.legal?.name || ''}
+                onChange={(e) => update('legal.name', e.target.value)}
+                placeholder="Max Mustermann"
+              />
+            </div>
+            <div className="admin-field">
+              <label htmlFor="legal-street-address">Street Address</label>
+              <input
+                id="legal-street-address"
+                value={settings.legal?.address || ''}
+                onChange={(e) => update('legal.address', e.target.value)}
+                placeholder="Musterstraße 1"
+              />
+            </div>
+          </div>
+          <div className="admin-field-row">
+            <div className="admin-field">
+              <label htmlFor="legal-zip-city">ZIP &amp; City</label>
+              <input
+                id="legal-zip-city"
+                value={settings.legal?.zipCity || ''}
+                onChange={(e) => update('legal.zipCity', e.target.value)}
+                placeholder="12345 Berlin"
+              />
+            </div>
+            <div className="admin-field">
+              <label htmlFor="legal-country">Country</label>
+              <input
+                id="legal-country"
+                value={settings.legal?.country || ''}
+                onChange={(e) => update('legal.country', e.target.value)}
+                placeholder="Germany"
+              />
+            </div>
+          </div>
+          <div className="admin-field-row">
+            <div className="admin-field">
+              <label htmlFor="legal-email">Legal Email</label>
+              <input
+                id="legal-email"
+                value={settings.legal?.email || ''}
+                onChange={(e) => update('legal.email', e.target.value)}
+                placeholder="legal@example.com"
+              />
+            </div>
+            <div className="admin-field">
+              <label htmlFor="legal-phone-number">Phone Number</label>
+              <input
+                id="legal-phone-number"
+                value={settings.legal?.phone || ''}
+                onChange={(e) => update('legal.phone', e.target.value)}
+                placeholder="+49 123 456789"
+              />
+            </div>
+          </div>
+          <div className="admin-field-row">
+            <div className="admin-field">
+              <label htmlFor="legal-contact-url">Contact Form URL</label>
+              <input
+                id="legal-contact-url"
+                type="url"
+                value={settings.legal?.contactUrl || ''}
+                onChange={(e) => update('legal.contactUrl', e.target.value)}
+                placeholder="https://example.com/contact"
+                aria-invalid={contactUrlInvalid || undefined}
+                aria-describedby={contactUrlInvalid ? 'legal-contact-url-error' : undefined}
+              />
+              {contactUrlInvalid && (
+                <p
+                  id="legal-contact-url-error"
+                  className="admin-field-hint admin-field-hint--error"
+                >
+                  Must start with https:// or http://. Any other link is left off the page.
+                </p>
+              )}
+            </div>
+            <div className="admin-field">
+              <label htmlFor="legal-contact-link-text">Contact Link Text</label>
+              <input
+                id="legal-contact-link-text"
+                value={settings.legal?.contactLabel || ''}
+                onChange={(e) => update('legal.contactLabel', e.target.value)}
+                placeholder="Contact form"
+              />
+            </div>
+          </div>
+          <div className="admin-field-row">
+            <div className="admin-field">
+              <label htmlFor="legal-vat-id">VAT ID</label>
+              <input
+                id="legal-vat-id"
+                value={settings.legal?.vatId || ''}
+                onChange={(e) => update('legal.vatId', e.target.value)}
+                placeholder="DE123456789"
+              />
+            </div>
+            <div className="admin-field">
+              <label htmlFor="legal-tax-number">Tax Number</label>
+              <input
+                id="legal-tax-number"
+                value={settings.legal?.taxId || ''}
+                onChange={(e) => update('legal.taxId', e.target.value)}
+                placeholder="12/345/67890"
+              />
+            </div>
+          </div>
+          <div className="admin-field">
+            <label htmlFor="legal-additional-disclosures">Additional Disclosures</label>
+            <textarea
+              id="legal-additional-disclosures"
+              value={settings.legal?.extraInfo || ''}
+              onChange={(e) => update('legal.extraInfo', e.target.value)}
+              placeholder="Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV..."
+              rows={3}
+            />
+          </div>
+        </>
+      )}
+
+      <div className="settings-section-divider" />
+
+      <div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
+        <ToggleCard
+          icon={<Icons.IconFileText size={16} />}
+          title="Contact Form (/contact)"
+          description="Messages are stored on this server and read under Messages. No mail is sent."
+          checked={settings.contact?.enabled === true}
+          onToggle={() => update('contact.enabled', !settings.contact?.enabled)}
+        />
+      </div>
+
+      {settings.contact?.enabled && (
+        <div className="admin-field-row">
+          <div className="admin-field">
+            <label htmlFor="contact-notify-url">Notification URL (ntfy)</label>
+            <input
+              id="contact-notify-url"
+              type="url"
+              value={settings.contact?.notifyUrl || ''}
+              onChange={(e) => update('contact.notifyUrl', e.target.value)}
+              placeholder="https://ntfy.sh/your-secret-topic"
+              aria-invalid={notifyUrlInvalid || undefined}
+              aria-describedby="contact-notify-url-hint"
+            />
+            <p
+              id="contact-notify-url-hint"
+              className={`admin-field-hint${notifyUrlInvalid ? ' admin-field-hint--error' : ''}`}
+            >
+              {notifyUrlInvalid
+                ? 'Must start with https:// or http://.'
+                : 'Gets a fixed "new message" push, with nothing about the sender. Pick a topic name nobody can guess. CONTACT_NOTIFY_URL overrides this.'}
+            </p>
+          </div>
+          <div className="admin-field">
+            <label htmlFor="contact-retention">Delete messages after (days)</label>
+            <input
+              id="contact-retention"
+              type="number"
+              min={1}
+              max={CONTACT_RETENTION_MAX}
+              value={settings.contact?.retentionDays ?? CONTACT_RETENTION_DEFAULT}
+              onChange={(e) =>
+                update(
+                  'contact.retentionDays',
+                  parseInt(e.target.value) || CONTACT_RETENTION_DEFAULT,
+                )
+              }
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="settings-section-divider" />
+
+      <div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
+        <ToggleCard
+          icon={<Icons.IconShieldCheck size={16} />}
+          title="Privacy Policy (/privacy)"
+          description="Shown and linked in the footer once the text below is saved"
+          checked={settings.privacy?.enabled !== false}
+          onToggle={() => update('privacy.enabled', settings.privacy?.enabled === false)}
+        />
+      </div>
+
+      <PrivacyEditor />
+    </div>
+  );
+}
diff --git a/app/admin/components/settings/SecuritySection.tsx b/app/admin/components/settings/SecuritySection.tsx
new file mode 100644
index 0000000..846634c
--- /dev/null
+++ b/app/admin/components/settings/SecuritySection.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import * as Icons from '../Icons';
+import ToggleCard from '../fields/ToggleCard';
+import PasswordField from '../fields/PasswordField';
+import { resolveWatermarkOpacity } from '@/lib/config/schema';
+import type { SectionProps } from './types';
+
+export default function SecuritySection({ settings, update }: SectionProps) {
+  return (
+    <div className="settings-panel">
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconLock size={18} /> Site Password
+        </h3>
+        <p className="settings-section-sub">
+          Puts the whole public site behind one password — useful while a portfolio is still being
+          built, or for a folio only ever shown to clients.
+        </p>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="security-site-password">Site Password</label>
+        <PasswordField
+          id="security-site-password"
+          value={settings.sitePassword}
+          onChange={(password) => update('sitePassword', password ?? '')}
+          placeholder="Leave empty for a public site"
+          label="Site password"
+        />
+        <p className="admin-field-hint">
+          Stored as a <code>scrypt:…</code> hash in <code>settings.yaml</code>, never as typed. The{' '}
+          <code>SITE_PASSWORD</code> environment variable overrides this field. The admin panel
+          keeps its own password and is never behind this gate.
+        </p>
+      </div>
+
+      <div className="settings-section-divider" />
+
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconShieldCheck size={18} /> Asset Protection &amp; Watermark
+        </h3>
+        <p className="settings-section-sub">
+          Configure image protection rules, right-click prevention, and watermark overlay.
+        </p>
+      </div>
+
+      <div className="admin-toggle-cards-grid">
+        <ToggleCard
+          icon={<Icons.IconLock size={16} />}
+          title="Disable Right-Click Menu"
+          description="Prevents context menu on portfolio images to hinder unauthorized downloads"
+          checked={settings.protection?.disableRightClick === true}
+          onToggle={() =>
+            update('protection.disableRightClick', !settings.protection?.disableRightClick)
+          }
+        />
+
+        <ToggleCard
+          icon={<Icons.IconBan size={16} />}
+          title="Disable Image Dragging"
+          description="Prevents visitors from dragging images off the portfolio page"
+          checked={settings.protection?.disableImageDrag === true}
+          onToggle={() =>
+            update('protection.disableImageDrag', !settings.protection?.disableImageDrag)
+          }
+        />
+      </div>
+
+      <div className="settings-section-divider" />
+
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconSparkles size={18} /> Dynamic Watermark Overlay
+        </h3>
+        <p className="settings-section-sub">Overlay copyright branding text on Lightbox images.</p>
+      </div>
+
+      <div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
+        <ToggleCard
+          icon={<Icons.IconFrame size={16} />}
+          title="Enable Watermark"
+          description="Overlay copyright text on portfolio image views"
+          checked={settings.watermark?.enabled === true}
+          onToggle={() => update('watermark.enabled', !settings.watermark?.enabled)}
+        />
+      </div>
+
+      {settings.watermark?.enabled && (
+        <>
+          <div className="admin-field">
+            <label htmlFor="security-watermark-text">Watermark Text</label>
+            <input
+              id="security-watermark-text"
+              value={settings.watermark?.text || ''}
+              onChange={(e) => update('watermark.text', e.target.value)}
+              placeholder="© Ralfo Photography"
+            />
+          </div>
+
+          <div className="admin-field-row">
+            <div className="admin-field">
+              <label htmlFor="security-position">Position</label>
+              <select
+                id="security-position"
+                aria-label="Watermark position"
+                value={settings.watermark?.position || 'bottom-right'}
+                onChange={(e) => update('watermark.position', e.target.value)}
+              >
+                <option value="bottom-right">Bottom Right</option>
+                <option value="bottom-left">Bottom Left</option>
+                <option value="center">Center Overlay</option>
+              </select>
+            </div>
+            <div className="admin-field">
+              {/* Read through the same normaliser the lightbox uses, so a
+                          config written as a percentage shows as "90%" here rather
+                          than "9000%" — and is written back as a fraction on save. */}
+              <label htmlFor="security-opacity-100">
+                Opacity ({Math.round(resolveWatermarkOpacity(settings.watermark?.opacity) * 100)}
+                %)
+              </label>
+              <input
+                id="security-opacity-100"
+                type="range"
+                min="0.1"
+                max="1"
+                step="0.05"
+                value={resolveWatermarkOpacity(settings.watermark?.opacity)}
+                onChange={(e) => update('watermark.opacity', parseFloat(e.target.value))}
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/app/admin/components/settings/SeoSection.tsx b/app/admin/components/settings/SeoSection.tsx
new file mode 100644
index 0000000..44083fa
--- /dev/null
+++ b/app/admin/components/settings/SeoSection.tsx
@@ -0,0 +1,141 @@
+'use client';
+
+import * as Icons from '../Icons';
+import ToggleCard from '../fields/ToggleCard';
+import type { SectionProps } from './types';
+
+export default function SeoSection({
+  settings,
+  update,
+  siteUrlInfo,
+}: SectionProps & {
+  /** Resolved site URL and its origin, so the panel can name SITE_URL (#472). */
+  siteUrlInfo: { effective: string | null; source: 'env' | 'settings' | 'none' } | null;
+}) {
+  return (
+    <div className="settings-panel">
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconSearch size={18} /> Search Engine Optimization (SEO)
+        </h3>
+        <p className="settings-section-sub">
+          Customize search engine metadata, OpenGraph tags, and indexing rules.
+        </p>
+      </div>
+
+      {/* Live Google Search Result Snippet Card */}
+      <div className="google-snippet-preview">
+        <div className="google-snippet-header">
+          <span>
+            <Icons.IconGlobe size={14} /> Google Search Result Preview
+          </span>
+        </div>
+        <div className="google-snippet-card">
+          <div className="google-snippet-url">
+            https://yourportfolio.com <span className="google-snippet-arrow">▼</span>
+          </div>
+          <div className="google-snippet-title">
+            {settings.seo?.title || settings.title || 'My Photography Portfolio'}
+          </div>
+          <div className="google-snippet-desc">
+            {settings.seo?.description ||
+              settings.subtitle ||
+              'A curated selection of photography work.'}
+          </div>
+        </div>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="seo-site-url">Site URL</label>
+        <input
+          id="seo-site-url"
+          value={settings.url || ''}
+          onChange={(e) => update('url', e.target.value)}
+          placeholder="https://folio.example"
+        />
+        <p style={{ fontSize: '0.8rem', opacity: 0.7, marginTop: '4px' }}>
+          Needed for <code>sitemap.xml</code>, the feed and structured data — those are generated
+          without a request, so the address cannot be derived from it. Leave empty and the sitemap
+          stays empty rather than guessing.
+          {siteUrlInfo?.source === 'env' && (
+            <>
+              <br />
+              Currently supplied by the <code>SITE_URL</code> environment variable (
+              <code>{siteUrlInfo.effective}</code>). A value entered here takes precedence once
+              saved.
+            </>
+          )}
+        </p>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="seo-meta-title">SEO Meta Title</label>
+        <input
+          id="seo-meta-title"
+          value={settings.seo?.title || ''}
+          onChange={(e) => update('seo.title', e.target.value)}
+          placeholder="Overrides default site title for Google search results"
+        />
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="seo-subpage-title-template">Subpage Title Template</label>
+        <input
+          id="seo-subpage-title-template"
+          value={settings.seo?.titleTemplate || ''}
+          onChange={(e) => update('seo.titleTemplate', e.target.value)}
+          placeholder={`%s | ${settings.seo?.title || settings.title || 'My Portfolio'}`}
+        />
+        <p style={{ fontSize: '0.8rem', opacity: 0.7, marginTop: '4px' }}>
+          Template for subpages &amp; albums. Use <code>%s</code> as placeholder for the page title.
+          <br />
+          <strong>Preview:</strong>{' '}
+          {(
+            settings.seo?.titleTemplate ||
+            `%s | ${settings.seo?.title || settings.title || 'My Portfolio'}`
+          ).replace('%s', 'Landscapes')}
+        </p>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="seo-meta-description">SEO Meta Description</label>
+        <textarea
+          id="seo-meta-description"
+          value={settings.seo?.description || ''}
+          onChange={(e) => update('seo.description', e.target.value)}
+          placeholder="A curated selection of photography work..."
+          rows={3}
+        />
+      </div>
+
+      <div className="settings-section-divider" />
+
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconGlobe size={18} /> Search Crawler Directives
+        </h3>
+        <p className="settings-section-sub">
+          Control how Googlebot and other web crawlers index your site.
+        </p>
+      </div>
+
+      <div className="admin-toggle-cards-grid">
+        <ToggleCard
+          icon={<Icons.IconBan size={16} />}
+          title="noindex (Hide from Google)"
+          description="Instructs search engines NOT to index this site in search results"
+          checked={settings.seo?.noIndex === true}
+          onToggle={() => update('seo.noIndex', !settings.seo?.noIndex)}
+        />
+
+        <ToggleCard
+          icon={<Icons.IconLink size={16} />}
+          title="nofollow (Block Link Following)"
+          description="Instructs search engine crawlers not to follow outgoing links"
+          checked={settings.seo?.noFollow === true}
+          onToggle={() => update('seo.noFollow', !settings.seo?.noFollow)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/components/settings/ThemeSection.tsx b/app/admin/components/settings/ThemeSection.tsx
new file mode 100644
index 0000000..8f796f8
--- /dev/null
+++ b/app/admin/components/settings/ThemeSection.tsx
@@ -0,0 +1,495 @@
+'use client';
+
+import { useState, type CSSProperties } from 'react';
+import * as Icons from '../Icons';
+import OptionGrid, { toOptions } from '../fields/OptionGrid';
+import { DEFAULT_PRESET } from '@/lib/config/theme';
+import { effectiveTheme, FeatureRow } from './fields';
+import type { SectionProps } from './types';
+
+const PRESETS = ['studio-modern', 'studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph'];
+const PHOTO_FRAMES = ['none', 'passepartout', 'shadow'];
+const HERO_STYLES = ['split', 'fullbleed', 'minimal', 'stacked', 'typographic', 'mosaic', 'cover'];
+
+const PHOTO_FRAME_INFO: Record<string, { label: string; desc: string }> = {
+  none: { label: 'None', desc: 'Flush image with crisp edges' },
+  passepartout: {
+    label: 'Passepartout',
+    desc: 'Classic gallery matting border',
+  },
+  shadow: { label: 'Shadow', desc: 'Soft floating drop shadow' },
+};
+const PHOTO_FRAME_OPTIONS = toOptions(PHOTO_FRAMES, PHOTO_FRAME_INFO);
+
+function PhotoFramePreview({ value }: { value: string }) {
+  return (
+    <div className="frame-card-preview">
+      <div className={`mini-frame-demo frame-${value}`}>
+        <div className="mini-frame-photo" />
+      </div>
+    </div>
+  );
+}
+
+const HERO_STYLE_INFO: Record<string, { label: string; desc: string }> = {
+  split: { label: 'Split', desc: 'Side-by-side title & photo' },
+  fullbleed: { label: 'Fullbleed', desc: 'Edge-to-edge full width banner' },
+  minimal: { label: 'Minimal', desc: 'Centered title with subtle photo' },
+  stacked: { label: 'Stacked', desc: 'Title stacked directly over photo' },
+  typographic: { label: 'Typographic', desc: 'Oversized magazine masthead' },
+  mosaic: { label: 'Mosaic', desc: 'Dynamic photo collage layout' },
+  cover: {
+    label: 'Cover (Experimental)',
+    desc: 'Fullscreen splash with a single Enter link',
+  },
+};
+const HERO_STYLE_OPTIONS = toOptions(HERO_STYLES, HERO_STYLE_INFO);
+
+function HeroStylePreview({ value }: { value: string }) {
+  return (
+    <div className="hero-card-preview">
+      <div className={`mini-hero-demo hero-demo-${value}`}>
+        {value === 'split' && (
+          <>
+            <div className="hero-demo-text">
+              <div className="demo-line title" />
+              <div className="demo-line sub" />
+            </div>
+            <div className="hero-demo-photo" />
+          </>
+        )}
+        {value === 'fullbleed' && (
+          <div className="hero-demo-full">
+            <div className="demo-line title light" />
+          </div>
+        )}
+        {value === 'minimal' && (
+          <>
+            <div className="hero-demo-center-text">
+              <div className="demo-line title short" />
+            </div>
+            <div className="hero-demo-photo small" />
+          </>
+        )}
+        {value === 'stacked' && (
+          <>
+            <div className="hero-demo-text">
+              <div className="demo-line title" />
+            </div>
+            <div className="hero-demo-photo banner" />
+          </>
+        )}
+        {value === 'typographic' && (
+          <>
+            <div className="demo-line title giant" />
+            <div className="hero-demo-grid2">
+              <div className="hero-demo-photo" />
+              <div className="hero-demo-photo" />
+            </div>
+          </>
+        )}
+        {value === 'mosaic' && (
+          <div className="hero-demo-mosaic">
+            <div className="hero-demo-photo big" />
+            <div className="hero-demo-photo-col">
+              <div className="hero-demo-photo" />
+              <div className="hero-demo-photo" />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Card metadata for the theme picker. `font`, `radius` and `frame` mirror the
+ * real preset definitions in lib/config/theme.ts so the mini mockups show what
+ * the preset actually does; `gap` is the visual density of its gallery grid.
+ */
+const THEME_INFO: Record<
+  string,
+  {
+    desc: string;
+    label: string;
+    accent: string;
+    bg: string;
+    tile: string;
+    font: string;
+    type: 'serif' | 'sans' | 'mono';
+    radius: number;
+    frame: 'none' | 'passepartout' | 'shadow';
+    gap: number;
+  }
+> = {
+  studio: {
+    label: 'Studio',
+    desc: 'Clean, high-contrast grid with sans-serif type.',
+    bg: '#141414',
+    tile: '#242424',
+    accent: '#e60012',
+    font: 'Playfair Display',
+    type: 'serif',
+    radius: 0,
+    frame: 'passepartout',
+    gap: 4,
+  },
+  'studio-modern': {
+    label: 'Studio Modern',
+    desc: 'Leica precision: Archivo grotesque, mono EXIF, red signal accents.',
+    bg: '#121212',
+    tile: '#191919',
+    accent: '#e60012',
+    font: 'Archivo',
+    type: 'sans',
+    radius: 0,
+    frame: 'none',
+    gap: 3,
+  },
+  minimal: {
+    label: 'Minimal',
+    desc: 'Pure raw layouts with tiny gaps and high whitespace.',
+    bg: '#ffffff',
+    tile: '#f3f3f3',
+    accent: '#111111',
+    font: 'Geist',
+    type: 'sans',
+    radius: 0,
+    frame: 'none',
+    gap: 2,
+  },
+  editorial: {
+    label: 'Editorial',
+    desc: 'Warm backgrounds, elegant serifs and large headers.',
+    bg: '#fbf9f4',
+    tile: '#e5dfd4',
+    accent: '#b89053',
+    font: 'Bodoni Moda',
+    type: 'serif',
+    radius: 0,
+    frame: 'shadow',
+    gap: 8,
+  },
+  classic: {
+    label: 'Classic',
+    desc: 'Soft traditional photographer portfolio with shadows.',
+    bg: '#f7f7f7',
+    tile: '#ffffff',
+    accent: '#444444',
+    font: 'Cinzel',
+    type: 'serif',
+    radius: 12,
+    frame: 'passepartout',
+    gap: 7,
+  },
+  noir: {
+    label: 'Noir',
+    desc: 'High drama absolute pitch black, stark high-fashion look.',
+    bg: '#000000',
+    tile: '#151515',
+    accent: '#ffffff',
+    font: 'Libre Baskerville',
+    type: 'serif',
+    radius: 0,
+    frame: 'passepartout',
+    gap: 6,
+  },
+  monograph: {
+    label: 'Monograph',
+    desc: 'Typewriter monospace font, grid borders and document feel.',
+    bg: '#f4f4f6',
+    tile: '#ffffff',
+    accent: '#555555',
+    font: 'Instrument Serif',
+    type: 'mono',
+    radius: 0,
+    frame: 'none',
+    gap: 5,
+  },
+};
+
+/* The preset group sits below THEME_INFO on purpose. PRESET_OPTIONS is built
+   at module evaluation and reads it through themeInfo(); declared above, it
+   hit the temporal dead zone and the whole Settings page failed to load with
+   "Cannot access 'THEME_INFO' before initialization". tsc does not catch it
+   because the read goes through a hoisted function, and a production build
+   succeeds because the module is only evaluated in the browser (#542). */
+/** The theme picker's own metadata, with the fallback the card grid needs. */
+function themeInfo(value: string) {
+  return (
+    THEME_INFO[value] || {
+      label: value,
+      desc: '',
+      bg: '#fff',
+      tile: '#eee',
+      accent: '#333',
+      font: 'System',
+      type: 'sans' as const,
+      radius: 0,
+      frame: 'none' as const,
+      gap: 4,
+    }
+  );
+}
+
+const PRESET_OPTIONS = PRESETS.map((value) => ({
+  value,
+  label: themeInfo(value).label,
+  desc: themeInfo(value).desc,
+}));
+
+function PresetPreview({ value }: { value: string }) {
+  const i = themeInfo(value);
+  return (
+    <div className="preset-card-preview" data-frame={i.frame}>
+      <div className="mini-header">
+        <span className={`mini-specimen type-${i.type}`}>Aa</span>
+        <span className="mini-line" />
+      </div>
+      <div className="mini-grid">
+        <div className="mini-tile" />
+        <div className="mini-tile" />
+        <div className="mini-tile" />
+      </div>
+    </div>
+  );
+}
+
+function PresetSpecs({ value }: { value: string }) {
+  const i = themeInfo(value);
+  return (
+    <span className="preset-card-specs">
+      {i.font} &middot; radius {i.radius} &middot; {i.frame}
+    </span>
+  );
+}
+
+export default function ThemeSection({ settings, update }: SectionProps) {
+  // Read off the page on mount: the toggle previews light and dark on the
+  // admin itself, and the page may already be in either.
+  const [currentMode, setCurrentMode] = useState<'dark' | 'light'>(() =>
+    typeof document !== 'undefined' &&
+    document.documentElement.getAttribute('data-theme') === 'light'
+      ? 'light'
+      : 'dark',
+  );
+
+  const toggleMode = (mode: 'dark' | 'light') => {
+    setCurrentMode(mode);
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', mode);
+      localStorage.setItem('theme', mode);
+    }
+  };
+
+  // Same idea for the theme: an unset field shows the preset's own value, not
+  // a fallback of this form's — Classic used to read "split hero, no frame".
+  const theme = effectiveTheme(settings.theme);
+
+  return (
+    <div className="settings-panel theme-settings-panel">
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconPalette size={18} /> Theme Presets &amp; Color Mode
+        </h3>
+        <p className="settings-section-sub">
+          Choose a typography preset and preview in Light or Dark mode.
+        </p>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="theme-visitor-default-mode">Visitor Default Mode</label>
+        <select
+          id="theme-visitor-default-mode"
+          aria-label="Visitor default mode"
+          value={settings.mode || 'dark'}
+          onChange={(e) => update('mode', e.target.value)}
+        >
+          <option value="dark">Dark</option>
+          <option value="light">Light</option>
+          <option value="auto">Follow the visitor&apos;s system</option>
+        </select>
+        <p className="admin-field-hint">
+          What a first-time visitor sees. The light/dark toggle in the site header still lets them
+          choose, and their choice is remembered on their device. The preview below is your own, and
+          does not change this.
+        </p>
+      </div>
+
+      <OptionGrid
+        label="Preset"
+        options={PRESET_OPTIONS}
+        value={settings.theme?.preset || DEFAULT_PRESET}
+        onSelect={(v) => update('theme.preset', v)}
+        cardClassName="theme-preset-card"
+        renderPreview={(o) => <PresetPreview value={o.value} />}
+        renderSpecs={(o) => <PresetSpecs value={o.value} />}
+        cardStyle={(o) => {
+          const i = themeInfo(o.value);
+          return {
+            '--preset-accent': i.accent,
+            '--preset-bg': i.bg,
+            '--preset-tile': i.tile,
+            '--preset-radius': `${i.radius}px`,
+            '--preset-gap': `${i.gap}px`,
+          } as CSSProperties;
+        }}
+      />
+
+      <div className="admin-field">
+        <span className="admin-field-label">Color Mode</span>
+        <p
+          style={{
+            fontSize: '0.78rem',
+            color: 'var(--admin-text-muted)',
+            margin: '0.25rem 0 0.6rem',
+            lineHeight: '1.4',
+          }}
+        >
+          Presets like <strong>Editorial</strong>, <strong>Minimal</strong> &amp;{' '}
+          <strong>Classic</strong> feature warm light/cream backgrounds in Light Mode and charcoal
+          in Dark Mode.
+        </p>
+        <div className="segmented-control">
+          <button
+            type="button"
+            className={`segment-btn ${currentMode === 'light' ? 'active' : ''}`}
+            onClick={() => toggleMode('light')}
+          >
+            <Icons.IconSun size={14} /> Light Mode (Cream / Beige)
+          </button>
+          <button
+            type="button"
+            className={`segment-btn ${currentMode === 'dark' ? 'active' : ''}`}
+            onClick={() => toggleMode('dark')}
+          >
+            <Icons.IconMoon size={14} /> Dark Mode (Charcoal)
+          </button>
+        </div>
+      </div>
+
+      <div className="settings-section-divider" />
+
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconTarget size={18} /> Accent Color
+        </h3>
+        <p className="settings-section-sub">
+          Pick a primary accent color for links, buttons, and highlights.
+        </p>
+      </div>
+
+      <div className="admin-field">
+        <div className="accent-picker-wrapper">
+          <div className="color-swatches-row">
+            {[
+              { hex: '#e60012', name: 'Studio Red' },
+              { hex: '#b89053', name: 'Editorial Gold' },
+              { hex: '#10b981', name: 'Emerald' },
+              { hex: '#3b82f6', name: 'Sapphire' },
+              { hex: '#8b5cf6', name: 'Violet' },
+              { hex: '#ffffff', name: 'Monochrome White' },
+              { hex: '#000000', name: 'Obsidian Black' },
+            ].map((swatch) => {
+              const isSelected = theme.accent.toLowerCase() === swatch.hex.toLowerCase();
+              return (
+                <button
+                  key={swatch.hex}
+                  type="button"
+                  className={`color-swatch-btn ${isSelected ? 'active' : ''}`}
+                  style={{ backgroundColor: swatch.hex }}
+                  onClick={() => update('theme.accent', swatch.hex)}
+                  title={swatch.name}
+                />
+              );
+            })}
+          </div>
+          <div className="color-field">
+            <input
+              type="color"
+              aria-label="Accent colour"
+              value={theme.accent}
+              onChange={(e) => update('theme.accent', e.target.value)}
+            />
+            <input
+              aria-label="Accent colour (hex)"
+              type="text"
+              value={settings.theme?.accent || ''}
+              onChange={(e) => update('theme.accent', e.target.value)}
+              placeholder={theme.accent}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="settings-section-divider" />
+
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconFrame size={18} /> Photo Frame &amp; Layout
+        </h3>
+        <p className="settings-section-sub">
+          Customize image presentation borders and hero layouts.
+        </p>
+      </div>
+
+      <OptionGrid
+        label="Photo Frame"
+        options={PHOTO_FRAME_OPTIONS}
+        value={theme.photoFrame}
+        onSelect={(v) => update('theme.photoFrame', v)}
+        cardClassName="frame-card"
+        renderPreview={(o) => <PhotoFramePreview value={o.value} />}
+      />
+
+      <OptionGrid
+        label="Hero Style"
+        options={HERO_STYLE_OPTIONS}
+        value={theme.heroStyle}
+        onSelect={(v) => update('theme.heroStyle', v)}
+        cardClassName="hero-card"
+        renderPreview={(o) => <HeroStylePreview value={o.value} />}
+      />
+
+      <div className="settings-section-divider" />
+
+      <div className="settings-section-header">
+        <h3>
+          <Icons.IconSparkles size={18} /> Look &amp; motion
+        </h3>
+        <p className="settings-section-sub">Effects and small controls on every page.</p>
+      </div>
+
+      <div className="feature-list">
+        <FeatureRow
+          icon={<Icons.IconSparkles size={15} />}
+          title="Page transitions"
+          description="A short fade between pages"
+          checked={settings.transitions !== false}
+          onToggle={() => update('transitions', settings.transitions === false)}
+        />
+        <FeatureRow
+          icon={<Icons.IconArrowUp size={15} />}
+          title="Scroll-to-top button"
+          description="A floating arrow on long pages"
+          checked={settings.scrollToTop !== false}
+          onToggle={() => update('scrollToTop', settings.scrollToTop === false)}
+        />
+        <FeatureRow
+          icon={<Icons.IconFilm size={15} />}
+          title="Film grain"
+          description="Analog noise over the background"
+          checked={theme.grain}
+          onToggle={() => update('theme.grain', !theme.grain)}
+        />
+        <FeatureRow
+          icon={<Icons.IconTarget size={15} />}
+          title="Header accent dot"
+          description="A dot beside the active section heading"
+          checked={theme.headerDot}
+          onToggle={() => update('theme.headerDot', !theme.headerDot)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/components/settings/fields.tsx b/app/admin/components/settings/fields.tsx
new file mode 100644
index 0000000..c256e75
--- /dev/null
+++ b/app/admin/components/settings/fields.tsx
@@ -0,0 +1,154 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import Link from 'next/link';
+import * as Icons from '../Icons';
+// Direct import from the theme module, not from '@/lib/config': the config
+// index pulls in `fs` and cannot be bundled into a client component.
+import { resolveTheme } from '@/lib/config/theme';
+import type { SettingsYaml } from '@/lib/config/schema';
+import type { Settings } from './types';
+
+/**
+ * One labelled block of related switches.
+ *
+ * The features panel was a single flat grid of identical cards, so nothing said
+ * which switches belonged together — and a switch that publishes private notes
+ * looked exactly like one that controls a fade (#510).
+ */
+export function FeatureGroup({
+  icon,
+  title,
+  description,
+  chip,
+  children,
+}: {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  /** Short marker for a group that needs its own weight, e.g. what visitors see. */
+  chip?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="settings-group">
+      <div className="settings-group-head">
+        <span className="settings-group-title">
+          {icon}
+          {title}
+          {chip && <span className="settings-group-chip">{chip}</span>}
+        </span>
+        <span className="settings-group-desc">{description}</span>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * A switch inside a group panel. Deliberately lighter than a toggle card: these
+ * are settings *of* the panel they sit in, and rendering them as peers of the
+ * top-level cards is what hid the structure in the first place.
+ */
+export function SettingRow({
+  title,
+  description,
+  checked,
+  onToggle,
+  disabled,
+  hint,
+  indented,
+}: {
+  title: string;
+  description: string;
+  checked: boolean;
+  onToggle: () => void;
+  /** A row whose parent switch is off — shown, but inert and explained. */
+  disabled?: boolean;
+  hint?: string;
+  indented?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      className={`setting-row${indented ? ' setting-row--indented' : ''}${
+        disabled ? ' setting-row--disabled' : ''
+      }`}
+      onClick={onToggle}
+      disabled={disabled}
+      aria-pressed={checked}
+    >
+      <span className="setting-row-info">
+        <span className="setting-row-title">{title}</span>
+        <span className="setting-row-desc">{description}</span>
+        {hint && (
+          <span className="setting-row-hint">
+            <Icons.IconBan size={11} /> {hint}
+          </span>
+        )}
+      </span>
+      <span className={`switch-toggle switch-toggle--sm ${checked && !disabled ? 'on' : ''}`}>
+        <span className="switch-slider" />
+      </span>
+    </button>
+  );
+}
+
+/**
+ * One switch in a feature list: a single dense line instead of a card. Cards
+ * gave every switch the same weight, so a fade and a whole page looked alike;
+ * rows grouped by meaning let the group heading carry that weight instead.
+ * The optional link sits beside the switch, not inside it — a link nested in
+ * a button is invalid and swallows the click.
+ */
+export function FeatureRow({
+  icon,
+  title,
+  description,
+  checked,
+  onToggle,
+  href,
+}: {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  checked: boolean;
+  onToggle: () => void;
+  /** Where this feature is configured beyond on/off. */
+  href?: string;
+}) {
+  return (
+    <div className="feature-row">
+      <button type="button" className="feature-row-main" onClick={onToggle} aria-pressed={checked}>
+        <span className="feature-row-icon">{icon}</span>
+        <span className="feature-row-info">
+          <span className="feature-row-title">{title}</span>
+          <span className="feature-row-desc">{description}</span>
+        </span>
+        <span className={`switch-toggle ${checked ? 'on' : ''}`}>
+          <span className="switch-slider" />
+        </span>
+      </button>
+      {/* Reserved even without a link, so every switch lines up in one column. */}
+      {href ? (
+        <Link href={href} className="feature-row-link">
+          Configure →
+        </Link>
+      ) : (
+        <span className="feature-row-link" aria-hidden="true" />
+      )}
+    </div>
+  );
+}
+
+/**
+ * The theme as the site resolves it. A preset name the form does not know (a
+ * hand-edited typo) falls back to the default instead of taking the panel down.
+ */
+export function effectiveTheme(raw: Settings['theme']) {
+  try {
+    return resolveTheme(raw as SettingsYaml['theme']);
+  } catch {
+    return resolveTheme(undefined);
+  }
+}
diff --git a/app/admin/components/settings/types.ts b/app/admin/components/settings/types.ts
new file mode 100644
index 0000000..cc89b42
--- /dev/null
+++ b/app/admin/components/settings/types.ts
@@ -0,0 +1,95 @@
+/**
+ * Shared shape of the settings form (#554). The sections edit one object
+ * that mirrors settings.yaml; SettingsEditor owns it and hands each section
+ * the object plus the two ways to change it.
+ */
+
+export interface Settings {
+  title?: string;
+  subtitle?: string;
+  /** Absolute site URL for sitemap, feed and structured data (#472). */
+  url?: string;
+  lang?: string;
+  sitePassword?: string;
+  mode?: 'light' | 'dark' | 'auto';
+  exifOnHover?: boolean;
+  exif?: {
+    camera?: boolean;
+    settings?: boolean;
+    location?: boolean;
+    caption?: boolean;
+  };
+  map?: boolean;
+  transitions?: boolean;
+  scrollToTop?: boolean;
+  analytics?: boolean;
+  theme?: {
+    preset?: string;
+    accent?: string;
+    photoFrame?: string;
+    grain?: boolean;
+    headerDot?: boolean;
+    heroStyle?: string;
+  };
+  grid?: {
+    columns?: number;
+    gap?: number;
+    aspectRatio?: string;
+    layout?: string;
+  };
+  footer?: {
+    name?: string;
+    instagram?: string;
+    email?: string;
+    website?: string;
+  };
+  /** EXPERIMENTAL: external links appended to the header navigation */
+  navLinks?: Array<{ label?: string; url?: string }>;
+  contact?: { enabled?: boolean; notifyUrl?: string; retentionDays?: number };
+  privacy?: { enabled?: boolean };
+  legal?: {
+    enabled?: boolean;
+    heading?: string;
+    name?: string;
+    address?: string;
+    zipCity?: string;
+    country?: string;
+    email?: string;
+    phone?: string;
+    contactUrl?: string;
+    contactLabel?: string;
+    taxId?: string;
+    vatId?: string;
+    extraInfo?: string;
+  };
+  seo?: {
+    title?: string;
+    description?: string;
+    titleTemplate?: string;
+    noIndex?: boolean;
+    noFollow?: boolean;
+  };
+  protection?: {
+    disableRightClick?: boolean;
+    disableImageDrag?: boolean;
+  };
+  proofing?: {
+    enabled?: boolean;
+    allowMailto?: boolean;
+  };
+  watermark?: {
+    enabled?: boolean;
+    text?: string;
+    opacity?: number;
+    position?: 'bottom-right' | 'bottom-left' | 'center';
+  };
+  about?: { enabled?: boolean };
+}
+
+export interface SectionProps {
+  settings: Settings;
+  /** Set one dotted path, e.g. `theme.accent`. An empty value removes the key. */
+  update: (path: string, value: unknown) => void;
+  /** Set several paths in one state update. */
+  updateMany: (entries: Record<string, unknown>) => void;
+}
diff --git a/app/admin/components/useAdminFetch.ts b/app/admin/components/useAdminFetch.ts
new file mode 100644
index 0000000..3e8ced1
--- /dev/null
+++ b/app/admin/components/useAdminFetch.ts
@@ -0,0 +1,85 @@
+'use client';
+
+/**
+ * Loading, data and a typed error for an admin screen (#609).
+ *
+ * Every screen used to write this by hand: set loading, fetch, check res.ok,
+ * set data, catch, set error, clear loading. The copies disagreed on errors:
+ * `err: any` with `err.message`, a silent `catch {}`, a boolean flag. A silent
+ * catch is how a failed load turns into an empty form. Here a failure is
+ * always a message, and a 401 always goes through reportIfSessionExpired.
+ *
+ * Pair it with <AdminLoadState> for the spinner and the error-with-retry.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { reportIfSessionExpired } from './sessionExpiry';
+
+export type AdminResult<T> = { data: T; error: null } | { data: null; error: string };
+
+/** One GET, with the admin's error conventions. Usable outside the hook too. */
+export async function adminGet<T>(url: string): Promise<AdminResult<T>> {
+  try {
+    const res = await fetch(url);
+    if (!res.ok) {
+      if (reportIfSessionExpired(res)) {
+        return { data: null, error: 'Your session expired. Sign in again.' };
+      }
+      const body = (await res.json().catch(() => null)) as { error?: unknown } | null;
+      const detail = typeof body?.error === 'string' ? `: ${body.error}` : '';
+      return { data: null, error: `Could not load (HTTP ${res.status})${detail}.` };
+    }
+    return { data: (await res.json()) as T, error: null };
+  } catch {
+    return { data: null, error: 'Could not reach the server.' };
+  }
+}
+
+export interface AdminFetch<T> {
+  data: T | null;
+  /** Only the latest attempt's error; cleared while a reload is in flight. */
+  error: string | null;
+  /** True until the current URL has answered, including after reload(). */
+  loading: boolean;
+  reload: () => void;
+  /** Local edit after a successful mutation, without a round trip. */
+  mutate: (update: (data: T) => T) => void;
+}
+
+/**
+ * `url === null` fetches nothing (a closed modal, say). Data from the previous
+ * answer stays visible while a reload runs.
+ */
+export function useAdminFetch<T>(url: string | null): AdminFetch<T> {
+  const [attempt, setAttempt] = useState(0);
+  const key = url === null ? null : `${attempt}:${url}`;
+  const [result, setResult] = useState<(AdminResult<T> & { key: string }) | null>(null);
+
+  useEffect(() => {
+    if (key === null || url === null) return;
+    let live = true;
+    // State is set in the callback, never synchronously in the effect.
+    adminGet<T>(url).then((r) => {
+      if (live) setResult({ ...r, key });
+    });
+    return () => {
+      live = false;
+    };
+  }, [key, url]);
+
+  const loading = key !== null && result?.key !== key;
+  const reload = useCallback(() => setAttempt((n) => n + 1), []);
+  const mutate = useCallback((update: (data: T) => T) => {
+    setResult((r) =>
+      r && r.error === null ? { key: r.key, data: update(r.data), error: null } : r,
+    );
+  }, []);
+
+  return {
+    data: result?.data ?? null,
+    error: loading ? null : (result?.error ?? null),
+    loading,
+    reload,
+    mutate,
+  };
+}
diff --git a/app/admin/components/useDraft.ts b/app/admin/components/useDraft.ts
index 77b098f..fa43c8c 100644
--- a/app/admin/components/useDraft.ts
+++ b/app/admin/components/useDraft.ts
@@ -46,7 +46,35 @@ export function readDraft<T>(key: string): Draft<T> | null {
   }
 }
 
+/**
+ * True when a draft holds a password as typed. Passwords are stored as scrypt
+ * hashes (#706), but between typing and saving the editor holds the plaintext,
+ * and sessionStorage is readable by any script on the admin origin. Such a
+ * draft is not kept: the unsaved-changes guard still warns before leaving, and
+ * the password is typed again after a reload.
+ */
+export function holdsPlaintextPassword(value: unknown): boolean {
+  if (typeof value === 'string') {
+    // Journal markdown: a `password:` line in the frontmatter.
+    const fm = /^---\n([\s\S]*?)\n---/.exec(value)?.[1] ?? '';
+    return /^password:[ \t]*(?!['"]?scrypt:)['"]?\S/m.test(fm);
+  }
+  if (Array.isArray(value)) return value.some(holdsPlaintextPassword);
+  if (value && typeof value === 'object') {
+    return Object.entries(value).some(([k, v]) =>
+      /^(?:password|sitePassword)$/.test(k) && typeof v === 'string'
+        ? v !== '' && !v.startsWith('scrypt:')
+        : holdsPlaintextPassword(v),
+    );
+  }
+  return false;
+}
+
 export function writeDraft<T>(key: string, draft: Draft<T>): void {
+  if (holdsPlaintextPassword(draft.value)) {
+    clearDraft(key);
+    return;
+  }
   try {
     window.sessionStorage.setItem(PREFIX + key, JSON.stringify(draft));
   } catch {
@@ -73,13 +101,19 @@ export type DraftStatus = 'none' | 'restored' | 'conflict';
 export function useDraft<T>(key: string, value: T, dirty: boolean) {
   /** The server fingerprint the current edits started from; null until loaded. */
   const baseRef = useRef<string | null>(null);
+  /**
+   * True while a `conflict` waits for an answer. The editor shows the server
+   * state meanwhile — not dirty — and without this hold the effect below would
+   * clear the very draft "Restore my changes" is about to read.
+   */
+  const holdRef = useRef(false);
   const [status, setStatus] = useState<DraftStatus>('none');
 
   // Mirror the edits while there are any, and drop the draft once there are
   // none — a save or a discard. Nothing is written before `load()` has set a
   // base, so the empty state an editor mounts with never lands in storage.
   useEffect(() => {
-    if (baseRef.current === null) return;
+    if (baseRef.current === null || holdRef.current) return;
     if (dirty) writeDraft(key, { base: baseRef.current, value });
     else clearDraft(key);
   }, [key, value, dirty]);
@@ -91,6 +125,7 @@ export function useDraft<T>(key: string, value: T, dirty: boolean) {
   const load = useCallback(
     (base: string): T | null => {
       baseRef.current = base;
+      holdRef.current = false;
       const draft = readDraft<T>(key);
       if (!draft) {
         setStatus('none');
@@ -100,6 +135,7 @@ export function useDraft<T>(key: string, value: T, dirty: boolean) {
         setStatus('restored');
         return draft.value;
       }
+      holdRef.current = true;
       setStatus('conflict');
       return null;
     },
@@ -110,6 +146,7 @@ export function useDraft<T>(key: string, value: T, dirty: boolean) {
   const saved = useCallback(
     (base: string) => {
       baseRef.current = base;
+      holdRef.current = false;
       clearDraft(key);
       setStatus('none');
     },
@@ -118,6 +155,7 @@ export function useDraft<T>(key: string, value: T, dirty: boolean) {
 
   /** The held-back draft of a `conflict`, for "restore anyway". */
   const takeConflicting = useCallback((): T | null => {
+    holdRef.current = false;
     const draft = readDraft<T>(key);
     setStatus(draft ? 'restored' : 'none');
     return draft?.value ?? null;
@@ -125,6 +163,7 @@ export function useDraft<T>(key: string, value: T, dirty: boolean) {
 
   /** Forget the draft. The editor reloads the server state itself. */
   const discard = useCallback(() => {
+    holdRef.current = false;
     clearDraft(key);
     setStatus('none');
   }, [key]);
diff --git a/app/admin/messages/page.tsx b/app/admin/messages/page.tsx
new file mode 100644
index 0000000..a162313
--- /dev/null
+++ b/app/admin/messages/page.tsx
@@ -0,0 +1,5 @@
+import MessagesView from '../components/MessagesView';
+
+export default function AdminMessagesPage() {
+  return <MessagesView />;
+}
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 0f9df4c..514ef64 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,15 +1,11 @@
-import { redirect } from 'next/navigation';
+import AdminOverview from './components/AdminOverview';
 
 /**
- * `/admin` and `/admin/pages` both rendered the page builder, so the same
- * screen had two addresses: two routes to keep in step, two things to find
- * when something about the builder changes, and no way to tell which one a
- * bookmark or a bug report meant.
- *
- * `/admin/pages` wins because that is what the Pages tab links to. `/admin`
- * stays as the entry point people type and bookmark — and it is what the
- * public diagnostic banner links to — so it redirects rather than disappearing.
+ * `/admin` is the overview: what needs attention, and the site at a glance
+ * (docs/admin-ux-concept.md). It used to redirect to the page builder, which
+ * left unread messages and doctor warnings to be found by visiting the right
+ * tab. The page builder keeps its own address at `/admin/pages`.
  */
 export default function AdminHomePage() {
-  redirect('/admin/pages');
+  return <AdminOverview />;
 }
diff --git a/app/admin/pages/page.tsx b/app/admin/pages/page.tsx
index f6fd6f1..6c9b478 100644
--- a/app/admin/pages/page.tsx
+++ b/app/admin/pages/page.tsx
@@ -1,5 +1,15 @@
 import PageBuilder from '../components/PageBuilder';
+import PageHeader from '../components/PageHeader';
 
 export default function AdminPagesPage() {
-  return <PageBuilder />;
+  return (
+    <>
+      <PageHeader
+        kicker="Content"
+        title="Pages"
+        description="The home page hero, standalone albums and every subpage. Drag to reorder; changes go live when saved."
+      />
+      <PageBuilder />
+    </>
+  );
 }
diff --git a/app/admin/styles/messages.css b/app/admin/styles/messages.css
new file mode 100644
index 0000000..0d2ecb1
--- /dev/null
+++ b/app/admin/styles/messages.css
@@ -0,0 +1,138 @@
+/* The contact form inbox (#702). */
+
+.messages-view {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  max-width: 900px;
+}
+
+.messages-count {
+  margin-left: 0.5rem;
+  padding: 0.1rem 0.5rem;
+  border-radius: 999px;
+  background: var(--admin-accent);
+  color: #fff;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+/* A hint, not an error: --admin-warning, never the accent (a preset may make
+   the accent red). */
+.messages-notice {
+  padding: 0.65rem 0.85rem;
+  border: 1px solid var(--admin-warning);
+  border-radius: 8px;
+  color: var(--admin-text);
+  font-size: 0.82rem;
+}
+
+.messages-notice a {
+  color: var(--admin-warning);
+  text-decoration: underline;
+}
+
+.messages-empty {
+  color: var(--admin-text-muted);
+  text-align: center;
+}
+
+.messages-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--admin-border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--admin-bg-raised);
+}
+
+.messages-item + .messages-item {
+  border-top: 1px solid var(--admin-border);
+}
+
+.messages-summary {
+  display: grid;
+  grid-template-columns: 10px minmax(8rem, 12rem) 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.8rem 1rem;
+  background: none;
+  border: none;
+  color: var(--admin-text);
+  font: inherit;
+  font-size: 0.85rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.messages-summary:hover {
+  background: var(--admin-bg-hover, rgba(128, 128, 128, 0.08));
+}
+
+.messages-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.messages-item--unread .messages-dot {
+  background: var(--admin-accent);
+}
+
+.messages-item--unread .messages-from {
+  font-weight: 600;
+}
+
+.messages-from,
+.messages-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.messages-preview,
+.messages-date {
+  color: var(--admin-text-muted);
+}
+
+.messages-date {
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+.messages-body {
+  padding: 0 1rem 1rem calc(1rem + 10px + 0.75rem);
+}
+
+.messages-meta {
+  margin: 0 0 0.5rem;
+  font-size: 0.8rem;
+  color: var(--admin-text-muted);
+}
+
+.messages-text {
+  margin: 0 0 1rem;
+  white-space: pre-wrap;
+  line-height: 1.55;
+  font-size: 0.9rem;
+}
+
+.messages-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .messages-summary {
+    grid-template-columns: 10px 1fr auto;
+  }
+  .messages-preview {
+    display: none;
+  }
+  .messages-body {
+    padding-left: 1rem;
+  }
+}
diff --git a/app/admin/styles/notifications.css b/app/admin/styles/notifications.css
new file mode 100644
index 0000000..eb9b439
--- /dev/null
+++ b/app/admin/styles/notifications.css
@@ -0,0 +1,100 @@
+/* The admin notification stack (#600), bottom right, above the save bar. */
+
+.admin-notifications {
+  position: fixed;
+  right: 1.25rem;
+  bottom: 5.5rem;
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: min(420px, calc(100vw - 2.5rem));
+  pointer-events: none;
+}
+
+.admin-notifications__group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.admin-notification {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.7rem 0.8rem 0.7rem 1rem;
+  border-radius: 10px;
+  border: 1px solid var(--admin-border);
+  border-left-width: 4px;
+  background: var(--admin-bg-raised);
+  color: var(--admin-text);
+  font-size: 0.85rem;
+  line-height: 1.45;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  pointer-events: auto;
+}
+
+.admin-notification--success {
+  border-left-color: var(--admin-success, #10b981);
+}
+
+.admin-notification--error {
+  border-left-color: var(--admin-error);
+}
+
+.admin-notification__text {
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+
+.admin-notification__close {
+  display: inline-flex;
+  padding: 2px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--admin-text-muted);
+  cursor: pointer;
+}
+
+.admin-notification__close:hover {
+  color: var(--admin-text);
+}
+
+@media (max-width: 640px) {
+  .admin-notifications {
+    left: 1rem;
+    right: 1rem;
+    max-width: none;
+  }
+}
+
+/* AdminLoadState (#609): the shared failed-load panel. */
+.admin-load-error {
+  padding: 2rem;
+  text-align: center;
+  border: 1px solid var(--admin-border);
+  border-radius: 12px;
+  background: var(--admin-bg-raised);
+}
+
+.admin-load-error p {
+  margin: 0 0 1rem;
+  color: var(--admin-text-muted);
+}
+
+.admin-notification__action {
+  padding: 0.1rem 0.5rem;
+  border: 1px solid var(--admin-border-hover);
+  border-radius: 4px;
+  background: none;
+  color: var(--admin-text);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.admin-notification__action:hover {
+  background: var(--admin-bg-elevated);
+}
diff --git a/app/admin/styles/redesign.css b/app/admin/styles/redesign.css
new file mode 100644
index 0000000..2664d82
--- /dev/null
+++ b/app/admin/styles/redesign.css
@@ -0,0 +1,1249 @@
+/* ── Admin redesign, stage 1 (docs/admin-ux-concept.md) ──────────
+   Loaded last from admin.css, so it overrides the earlier sheets rather than
+   rewriting them. Stage 1: the sidebar shell, the overview page, the site's
+   typography and a calmer use of the accent. */
+
+/* ── Tokens ────────────────────────────────────────────────── */
+
+.admin-layout,
+.admin-listbox-popup {
+  /* The site's own fonts (set on <html> by the root layout from the preset).
+     The fallbacks are what the admin used before. */
+  --admin-font: var(
+    --font-sans,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    system-ui,
+    sans-serif
+  );
+  --admin-font-label: var(--font-caption, ui-monospace, 'SF Mono', Menlo, monospace);
+  --admin-bg: #0c0c0c;
+  --admin-bg-raised: #141414;
+  --admin-bg-elevated: #1b1b1b;
+  --admin-bg-input: #101010;
+  --admin-border: #242424;
+  --admin-border-hover: #3a3a3a;
+  --admin-sidebar-bg: #090909;
+  --admin-radius: 4px;
+  --admin-sidebar-width: 232px;
+  font-family: var(--admin-font);
+}
+
+[data-theme='light'] .admin-layout,
+[data-theme='light'] .admin-listbox-popup {
+  --admin-bg: #f6f6f5;
+  --admin-bg-raised: #ffffff;
+  --admin-bg-elevated: #efefee;
+  --admin-bg-input: #ffffff;
+  --admin-border: #e2e2e0;
+  --admin-border-hover: #c8c8c5;
+  --admin-sidebar-bg: #fbfbfa;
+}
+
+.admin-listbox-popup {
+  font-family: var(--admin-font);
+}
+
+/* ── Shell: sidebar + workspace ────────────────────────────── */
+
+.admin-app {
+  display: grid;
+  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
+  flex-direction: unset;
+  min-height: 100vh;
+}
+
+.admin-sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 1.25rem 0.75rem 1rem;
+  background: var(--admin-sidebar-bg);
+  border-right: 1px solid var(--admin-border);
+  overflow-y: auto;
+  z-index: 50;
+}
+
+.admin-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.25rem 0.6rem 0.75rem;
+  color: var(--admin-text);
+  text-decoration: none;
+}
+
+/* The square marker the site uses for kickers and the header dot. */
+.admin-brand-mark {
+  width: 10px;
+  height: 10px;
+  background: var(--admin-accent);
+  flex-shrink: 0;
+}
+
+.admin-brand-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.15;
+}
+
+.admin-brand-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.admin-brand-sub {
+  font-family: var(--admin-font-label);
+  font-size: 0.65rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--admin-text-muted);
+}
+
+.admin-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+}
+
+.admin-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.admin-nav-label {
+  padding: 0 0.6rem 0.35rem;
+  font-family: var(--admin-font-label);
+  font-size: 0.62rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--admin-text-muted);
+}
+
+.admin-nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.5rem 0.6rem;
+  border-radius: var(--admin-radius);
+  color: var(--admin-text-secondary);
+  font-size: 0.85rem;
+  text-decoration: none;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.admin-nav-item:hover {
+  color: var(--admin-text);
+  background: var(--admin-bg-raised);
+}
+
+.admin-nav-item.active {
+  color: var(--admin-text);
+  background: var(--admin-bg-elevated);
+}
+
+/* One of the accent's three jobs: where you are. */
+.admin-nav-item.active::before {
+  content: '';
+  position: absolute;
+  left: -0.75rem;
+  top: 50%;
+  width: 3px;
+  height: 18px;
+  transform: translateY(-50%);
+  background: var(--admin-accent);
+}
+
+.admin-nav-icon {
+  display: inline-flex;
+  color: var(--admin-text-muted);
+}
+
+.admin-nav-item.active .admin-nav-icon {
+  color: var(--admin-text);
+}
+
+.admin-nav-text {
+  flex: 1;
+}
+
+.admin-nav-count {
+  min-width: 1.35rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: 999px;
+  background: var(--admin-accent);
+  color: #fff;
+  font-family: var(--admin-font-label);
+  font-size: 0.68rem;
+  text-align: center;
+}
+
+.admin-nav-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--admin-error);
+}
+
+.admin-sidebar-foot {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--admin-border);
+}
+
+.admin-sidebar .status-indicator-container {
+  display: block;
+  margin: 0;
+}
+
+.admin-sidebar .sidebar-status {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+/* In the sidebar foot the dropdown opens upwards and to the right. */
+.admin-sidebar .status-dropdown {
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  right: auto;
+  margin: 0 0 0.5rem;
+  width: 280px;
+  border-radius: var(--admin-radius);
+}
+
+.admin-sidebar-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.admin-side-action {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.45rem 0.6rem;
+  border: none;
+  border-radius: var(--admin-radius);
+  background: none;
+  color: var(--admin-text-muted);
+  font: inherit;
+  font-size: 0.8rem;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.admin-side-action:hover:not(:disabled) {
+  color: var(--admin-text);
+  background: var(--admin-bg-raised);
+}
+
+.admin-side-action:disabled {
+  opacity: 0.5;
+  cursor: wait;
+}
+
+.admin-workspace {
+  max-width: 1180px;
+  padding: 2.25rem 2.5rem 6rem;
+  margin: 0;
+}
+
+/* The save bar centres on the workspace, not on the window. */
+.admin-app ~ .floating-save-bar,
+.admin-app .floating-save-bar {
+  left: calc(50% + var(--admin-sidebar-width) / 2);
+}
+
+@media (max-width: 860px) {
+  .admin-app {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-sidebar {
+    position: static;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--admin-border);
+  }
+
+  .admin-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.25rem 1rem;
+  }
+
+  .admin-nav-item.active::before {
+    display: none;
+  }
+
+  .admin-workspace {
+    padding: 1.5rem 1rem 6rem;
+  }
+
+  .admin-app .floating-save-bar {
+    left: 50%;
+  }
+}
+
+/* ── Calmer accent ─────────────────────────────────────────── */
+
+/* A switched-on card keeps a hairline; its switch carries the state. A thick
+   accent frame on every active card turned Studio Modern's settings into a
+   wall of red and took the colour's meaning with it. */
+.admin-layout .admin-toggle-card.active {
+  border-color: var(--admin-border-hover);
+  box-shadow: none;
+}
+
+.admin-layout .admin-toggle-card,
+.admin-layout .settings-group,
+.admin-layout .analytics-panel,
+.admin-layout .metric-card,
+.admin-layout .messages-list {
+  border-radius: var(--admin-radius);
+}
+
+/* Section and field labels in the site's caption voice. */
+.admin-layout .admin-field > label,
+.admin-layout .settings-group-title,
+.admin-layout .analytics-section-title h3 {
+  font-family: var(--admin-font-label);
+  letter-spacing: 0.12em;
+}
+
+.admin-layout .settings-section-header h3,
+.admin-layout .analytics-header h2 {
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+
+/* Section icons stay neutral; the accent is not decoration. */
+.admin-layout .settings-section-header h3 svg,
+.admin-layout .analytics-header h2 svg {
+  color: var(--admin-text-muted);
+}
+
+/* ── Overview ──────────────────────────────────────────────── */
+
+.admin-overview {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+}
+
+.overview-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.overview-kicker {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.6rem;
+  font-family: var(--admin-font-label);
+  font-size: 0.7rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--admin-text-muted);
+}
+
+.overview-kicker::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  background: var(--admin-accent);
+}
+
+.overview-title {
+  margin: 0;
+  font-size: clamp(1.8rem, 3vw, 2.4rem);
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+.overview-sub {
+  margin: 0.4rem 0 0;
+  color: var(--admin-text-secondary);
+  font-size: 0.9rem;
+}
+
+.overview-section-label {
+  margin: 0 0 0.9rem;
+  font-family: var(--admin-font-label);
+  font-size: 0.68rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--admin-text-muted);
+}
+
+.overview-attention {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--admin-border);
+  border-radius: var(--admin-radius);
+  background: var(--admin-bg-raised);
+}
+
+.overview-attention-item {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  padding: 0.95rem 1.1rem;
+  color: var(--admin-text);
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
+.overview-attention-item + .overview-attention-item {
+  border-top: 1px solid var(--admin-border);
+}
+
+.overview-attention-item:hover {
+  background: var(--admin-bg-elevated);
+}
+
+.overview-attention-marker {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+}
+
+.overview-attention-marker.accent {
+  background: var(--admin-accent);
+}
+
+.overview-attention-marker.warn {
+  background: var(--admin-warning);
+}
+
+.overview-attention-marker.error {
+  background: var(--admin-error);
+}
+
+.overview-attention-text {
+  flex: 1;
+}
+
+.overview-attention-detail {
+  display: block;
+  margin-top: 0.15rem;
+  color: var(--admin-text-muted);
+  font-size: 0.8rem;
+}
+
+.overview-attention-go {
+  font-family: var(--admin-font-label);
+  font-size: 0.68rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--admin-text-muted);
+}
+
+.overview-calm {
+  margin: 0;
+  padding: 1rem 1.1rem;
+  border: 1px dashed var(--admin-border);
+  border-radius: var(--admin-radius);
+  color: var(--admin-text-muted);
+  font-size: 0.88rem;
+}
+
+.overview-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1px;
+  border: 1px solid var(--admin-border);
+  border-radius: var(--admin-radius);
+  background: var(--admin-border);
+  overflow: hidden;
+}
+
+.overview-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 1.2rem 1.25rem 1.1rem;
+  background: var(--admin-bg-raised);
+  color: inherit;
+  text-decoration: none;
+}
+
+.overview-stat:hover {
+  background: var(--admin-bg-elevated);
+}
+
+.overview-stat-value {
+  font-size: 2rem;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+
+.overview-stat-label {
+  font-family: var(--admin-font-label);
+  font-size: 0.66rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--admin-text-muted);
+}
+
+.overview-stat-note {
+  color: var(--admin-text-secondary);
+  font-size: 0.78rem;
+}
+
+.overview-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+}
+
+/* Same rule for the metadata master card: its switch says it is on. */
+.admin-layout .metadata-card.active {
+  border-color: var(--admin-border-hover);
+  box-shadow: none;
+}
+
+/* A chosen option (preset, frame, layout…) is a place, so it keeps the accent,
+   but as a hairline rather than a doubled frame. */
+.admin-layout .preset-card.active,
+.admin-layout .preset-btn.active {
+  box-shadow: none;
+}
+
+/* Page builder section icons: neutral, like the settings headers. */
+.admin-layout .builder-section-header h2 svg {
+  color: var(--admin-text-muted);
+}
+
+/* "Disabled" is a state, not an error. The badge sets its red inline, hence
+   !important; stage 2 moves the colour into the stylesheet (after #711). */
+.admin-layout .subpage-badge-protected[title='Page is disabled'] {
+  background: rgba(0, 0, 0, 0.72) !important;
+  color: var(--admin-text-secondary) !important;
+  border: 1px solid var(--admin-border-hover);
+}
+
+/* Every screen starts at the same left edge (stage 2 adds the shared page header). */
+.admin-layout .diag-page {
+  margin-left: 0;
+}
+
+/* ── Page header (stage 2) ─────────────────────────────────── */
+
+.page-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem 2rem;
+  flex-wrap: wrap;
+  margin: 0 0 2rem;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.page-header-kicker {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.55rem;
+  font-family: var(--admin-font-label);
+  font-size: 0.68rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--admin-text-muted);
+}
+
+.page-header-kicker::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  background: var(--admin-accent);
+}
+
+.page-header-title {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0;
+  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+.page-header-sub {
+  margin: 0.35rem 0 0;
+  max-width: 62ch;
+  color: var(--admin-text-secondary);
+  font-size: 0.88rem;
+  line-height: 1.5;
+}
+
+.page-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* The journal list is an ordinary screen and gets the workspace column; only
+   the editor (split view) needs the full width journal-studio.css gives it. */
+.admin-app .admin-main:has(> .journal-studio) {
+  max-width: 1180px;
+  padding: 2.25rem 2.5rem 6rem;
+}
+
+@media (max-width: 860px) {
+  .admin-app .admin-main:has(> .journal-studio) {
+    padding: 1.5rem 1rem 6rem;
+  }
+}
+
+/* ── Confirm dialog (stage 3) ──────────────────────────────── */
+
+.confirm-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: var(--admin-overlay);
+}
+
+.confirm-card {
+  width: min(420px, 100%);
+  padding: 1.4rem 1.5rem 1.2rem;
+  border: 1px solid var(--admin-border-hover);
+  border-radius: var(--admin-radius);
+  background: var(--admin-bg-raised);
+  color: var(--admin-text);
+  font-family: var(--admin-font);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
+}
+
+.confirm-title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+.confirm-message {
+  margin: 0.5rem 0 0;
+  color: var(--admin-text-secondary);
+  font-size: 0.88rem;
+  line-height: 1.5;
+}
+
+.confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.4rem;
+}
+
+.admin-btn.confirm-danger {
+  background: var(--admin-error);
+  border-color: var(--admin-error);
+  color: #fff;
+}
+
+/* A caption over a group of buttons or a self-labelled switch: looks like a
+   field label, but is not a <label>, since there is no single control for it
+   to name (#694 §4). */
+.admin-layout .admin-field-label {
+  display: block;
+  margin-bottom: 0.4rem;
+  font-family: var(--admin-font-label);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--admin-text-secondary);
+}
+
+/* ── Page builder: structure list + panel (stage 4) ────────── */
+
+/* The builder uses the full workspace width: the list and the panel both
+   need room, and the panel carries the live preview. */
+.admin-app .admin-main:has(.pb-split) {
+  max-width: none;
+}
+
+.pb-split {
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: 1.75rem;
+  align-items: start;
+}
+
+.pb-tree {
+  position: sticky;
+  top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
+  padding-right: 0.25rem;
+}
+
+.pb-tree .builder-search-container {
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+}
+
+.pb-tree .builder-search-wrapper {
+  max-width: none;
+}
+
+.pb-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.pb-group-head {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0.5rem 0.4rem;
+  font-family: var(--admin-font-label);
+  font-size: 0.62rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--admin-text-muted);
+}
+
+.pb-row {
+  display: flex;
+  align-items: center;
+  border-radius: var(--admin-radius);
+}
+
+.pb-row-grip {
+  display: inline-flex;
+  padding: 0 0.1rem 0 0.25rem;
+  color: var(--admin-text-muted);
+  opacity: 0.45;
+  cursor: grab;
+}
+
+.pb-row:hover .pb-row-grip {
+  opacity: 1;
+}
+
+.pb-row-main {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  flex: 1;
+  min-width: 0;
+  padding: 0.4rem 0.5rem;
+  border: none;
+  border-radius: var(--admin-radius);
+  background: none;
+  color: var(--admin-text-secondary);
+  font: inherit;
+  font-size: 0.86rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.pb-row-solo {
+  width: 100%;
+}
+
+.pb-row-main:hover {
+  background: var(--admin-bg-raised);
+  color: var(--admin-text);
+}
+
+.pb-row.active .pb-row-main,
+.pb-row-main.active {
+  background: var(--admin-bg-elevated);
+  color: var(--admin-text);
+  box-shadow: inset 2px 0 0 var(--admin-accent);
+}
+
+.pb-row.is-off .pb-row-name {
+  color: var(--admin-text-muted);
+}
+
+.pb-row-thumb {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 36px;
+  height: 26px;
+  overflow: hidden;
+  border-radius: 2px;
+  background: var(--admin-bg-elevated);
+  color: var(--admin-text-muted);
+}
+
+.pb-row-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pb-row-name {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pb-row-count,
+.pb-row-state {
+  font-family: var(--admin-font-label);
+  font-size: 0.68rem;
+  color: var(--admin-text-muted);
+}
+
+.pb-row-state {
+  padding: 0 0.35rem;
+  border: 1px solid var(--admin-border-hover);
+  border-radius: 2px;
+  font-size: 0.6rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.pb-add {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.35rem;
+  padding: 0.45rem 0.6rem;
+  border: 1px dashed var(--admin-border);
+  border-radius: var(--admin-radius);
+  background: none;
+  color: var(--admin-text-muted);
+  font: inherit;
+  font-size: 0.82rem;
+  cursor: pointer;
+}
+
+.pb-add:hover {
+  border-color: var(--admin-border-hover);
+  color: var(--admin-text);
+}
+
+.pb-panel {
+  min-width: 0;
+}
+
+.pb-panel .builder-section:first-child {
+  margin-top: 0;
+}
+
+/* The subpage sheet, in place: no overlay chrome, full panel height. */
+.subpage-drawer-container--inline {
+  max-width: none;
+  max-height: none;
+  border-radius: var(--admin-radius);
+  box-shadow: none;
+  animation: none;
+}
+
+/* Out of the overlay, the page itself scrolls. The body keeps no scroller of
+   its own: with `overflow-y: auto` it still became one (a sideways overflow
+   is enough), and `overscroll-behavior: contain` then swallowed every wheel
+   turn over the panel instead of handing it to the page. */
+.subpage-drawer-container--inline .subpage-drawer-body {
+  overflow: visible;
+  overscroll-behavior: auto;
+}
+
+@media (max-width: 1100px) {
+  .pb-split {
+    grid-template-columns: 1fr;
+  }
+
+  .pb-tree {
+    position: static;
+    max-height: none;
+  }
+}
+
+/* A custom album title is marked by weight, not by the accent: red italics
+   on every renamed album read as an error. */
+.admin-layout .album-tile-name.custom-title {
+  color: var(--admin-text);
+  font-style: normal;
+  font-weight: 600;
+}
+
+/* ── Collapsible sidebar ───────────────────────────────────── */
+
+.admin-sidebar {
+  position: sticky;
+  transition: width 0.18s ease;
+}
+
+.admin-app {
+  transition: grid-template-columns 0.18s ease;
+}
+
+.admin-sidebar-toggle {
+  position: absolute;
+  top: 1.35rem;
+  right: 0.6rem;
+  display: inline-grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--admin-border);
+  border-radius: var(--admin-radius);
+  background: var(--admin-bg-raised);
+  color: var(--admin-text-muted);
+  cursor: pointer;
+  z-index: 2;
+}
+
+.admin-sidebar-toggle:hover {
+  color: var(--admin-text);
+  border-color: var(--admin-border-hover);
+}
+
+.admin-app.is-collapsed {
+  --admin-sidebar-width: 64px;
+}
+
+.admin-app.is-collapsed .admin-sidebar {
+  padding-left: 0.6rem;
+  padding-right: 0.6rem;
+  align-items: center;
+  /* The name overlays sit outside the 64px column. */
+  overflow: visible;
+}
+
+.admin-app.is-collapsed .admin-sidebar-toggle {
+  position: static;
+  order: -1;
+}
+
+.admin-app.is-collapsed .admin-brand {
+  justify-content: center;
+  padding: 0.25rem 0 0.5rem;
+}
+
+.admin-app.is-collapsed .admin-brand-text,
+.admin-app.is-collapsed .admin-nav-text,
+.admin-app.is-collapsed .admin-side-label,
+.admin-app.is-collapsed .status-text {
+  display: none;
+}
+
+/* Group labels become a hairline between groups. */
+.admin-app.is-collapsed .admin-nav-label {
+  display: block;
+  height: 1px;
+  margin: 0 0.35rem 0.35rem;
+  padding: 0;
+  overflow: hidden;
+  font-size: 0;
+  background: var(--admin-border);
+}
+
+.admin-app.is-collapsed .admin-nav,
+.admin-app.is-collapsed .admin-sidebar-foot,
+.admin-app.is-collapsed .admin-sidebar-actions {
+  width: 100%;
+  align-items: center;
+}
+
+.admin-app.is-collapsed .admin-nav-item,
+.admin-app.is-collapsed .admin-side-action {
+  justify-content: center;
+  width: 40px;
+  height: 36px;
+  padding: 0;
+}
+
+.admin-app.is-collapsed .admin-nav-item.active::before {
+  left: -0.6rem;
+}
+
+/* The unread count shrinks to a dot on the icon. */
+.admin-app.is-collapsed .admin-nav-count {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  min-width: 0;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  font-size: 0;
+}
+
+.admin-app.is-collapsed .admin-nav-dot {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+}
+
+.admin-app.is-collapsed .sidebar-status {
+  justify-content: center;
+  width: 40px;
+  padding: 0;
+}
+
+.admin-app.is-collapsed .status-indicator-container {
+  display: flex;
+  justify-content: center;
+}
+
+/* Name overlays: on hover and on keyboard focus, beside the icon. */
+.admin-app.is-collapsed [data-tip] {
+  position: relative;
+}
+
+.admin-app.is-collapsed [data-tip]:hover::after,
+.admin-app.is-collapsed [data-tip]:focus-visible::after {
+  content: attr(data-tip);
+  position: absolute;
+  left: calc(100% + 12px);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.35rem 0.6rem;
+  border: 1px solid var(--admin-border-hover);
+  border-radius: var(--admin-radius);
+  background: var(--admin-bg-elevated);
+  color: var(--admin-text);
+  font-family: var(--admin-font);
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+  white-space: nowrap;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  pointer-events: none;
+  z-index: 200;
+}
+
+@media (max-width: 860px) {
+  .admin-sidebar-toggle {
+    display: none;
+  }
+}
+
+/* ── Status pill switches ──────────────────────────────────── */
+
+/* Every switch reads as a pill that says what it is: a dot plus ON or OFF.
+   "On" is the success green, never the accent — a preset may make the accent
+   red, and a switched-on setting must not look like an error. The markup is
+   unchanged (`.switch-toggle` > `.switch-slider`); the slider becomes the dot
+   and the word comes from CSS, hidden from assistive technology because the
+   button already carries `aria-pressed`. */
+.admin-layout .switch-toggle,
+.admin-layout .switch-toggle--sm {
+  width: auto;
+  min-width: 62px;
+  height: 24px;
+  padding: 0 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--admin-border-hover);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--admin-text-muted);
+  font-family: var(--admin-font-label);
+  font-size: 0.66rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.admin-layout .switch-toggle--sm {
+  min-width: 56px;
+  height: 22px;
+  padding: 0 8px;
+}
+
+.admin-layout .switch-toggle::after {
+  content: 'Off' / '';
+}
+
+.admin-layout .switch-toggle .switch-slider,
+.admin-layout .switch-toggle--sm .switch-slider {
+  position: static;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--admin-border-hover);
+  box-shadow: none;
+  transform: none;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.admin-layout .switch-toggle.on {
+  color: var(--admin-success);
+  border-color: var(--admin-success);
+  background: color-mix(in srgb, var(--admin-success) 12%, transparent);
+}
+
+.admin-layout .switch-toggle.on::after {
+  content: 'On' / '';
+}
+
+.admin-layout .switch-toggle.on .switch-slider {
+  background: var(--admin-success);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-success) 22%, transparent);
+  transform: none;
+}
+
+/* Inert: dashed, no dot colour — not an off switch someone could turn on. */
+.admin-layout .setting-row--disabled .switch-toggle {
+  border-style: dashed;
+  background: transparent;
+  opacity: 0.6;
+}
+
+.admin-layout .setting-row--disabled .switch-slider {
+  background: var(--admin-text-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .admin-layout .switch-toggle,
+  .admin-layout .switch-slider {
+    transition: none;
+  }
+}
+
+/* ── Feature lists ─────────────────────────────────────────── */
+
+/* Dense rows grouped by meaning replace the grid of equal cards: the group
+   heading carries the weight, each switch is one line. */
+.admin-layout .feature-list {
+  border-top: 1px solid var(--admin-border);
+}
+
+.admin-layout .feature-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.admin-layout .feature-row-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 4px;
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.admin-layout .feature-row-main:focus-visible {
+  outline: var(--admin-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--admin-radius);
+}
+
+.admin-layout .feature-row-icon {
+  display: inline-flex;
+  color: var(--admin-text-muted);
+  flex-shrink: 0;
+}
+
+.admin-layout .feature-row-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.admin-layout .feature-row-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--admin-text);
+}
+
+.admin-layout .feature-row-desc {
+  font-size: 0.78rem;
+  color: var(--admin-text-muted);
+}
+
+.admin-layout .feature-row-main:hover .feature-row-title {
+  color: var(--admin-text);
+  text-decoration: underline;
+  text-decoration-color: var(--admin-border-hover);
+  text-underline-offset: 3px;
+}
+
+.admin-layout .feature-row-link {
+  flex-shrink: 0;
+  width: 84px;
+  text-align: right;
+  font-size: 0.75rem;
+  color: var(--admin-text-secondary);
+  text-decoration: none;
+  padding: 4px 2px;
+}
+
+.admin-layout .feature-row-link:hover {
+  color: var(--admin-text);
+}
+
+.admin-layout .settings-group .feature-list + .metadata-card,
+.admin-layout .settings-group .metadata-card + .feature-list {
+  margin-top: 12px;
+}
+
+@media (max-width: 640px) {
+  .admin-layout .feature-row {
+    flex-wrap: wrap;
+    gap: 0 12px;
+  }
+
+  .admin-layout .feature-row-link {
+    width: auto;
+    padding: 0 0 10px 31px;
+  }
+
+  .admin-layout .feature-row-link:empty {
+    display: none;
+  }
+}
diff --git a/app/admin/styles/settings-editor.css b/app/admin/styles/settings-editor.css
index a3b4adf..896d7bb 100644
--- a/app/admin/styles/settings-editor.css
+++ b/app/admin/styles/settings-editor.css
@@ -635,3 +635,71 @@
 .status-val.unknown {
   color: var(--admin-text-secondary);
 }
+
+.admin-field-hint--error {
+  color: var(--admin-error);
+}
+
+/* A link out of a section header, e.g. to the page the section configures.
+   It shows the saved state, not unsaved edits. */
+.settings-section-action {
+  display: inline-flex;
+  margin-top: 0.6rem;
+}
+
+/* ── Privacy policy editor (#699) ──────────────────────────────── */
+
+.privacy-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.privacy-editor__facts {
+  padding: 1rem 1.1rem;
+  border: 1px solid var(--admin-border);
+  border-radius: 10px;
+  background: var(--admin-bg-raised);
+}
+
+.privacy-editor__facts h4 {
+  margin: 0 0 0.25rem;
+  font-size: 0.9rem;
+}
+
+.privacy-editor__facts ul {
+  margin: 0.75rem 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.privacy-editor__facts li {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+
+.privacy-editor__facts li span:last-child {
+  flex-basis: 100%;
+  color: var(--admin-text-muted);
+}
+
+.privacy-editor__badge {
+  padding: 0 0.4rem;
+  border: 1px solid var(--admin-warning);
+  border-radius: 999px;
+  color: var(--admin-warning);
+  font-size: 0.7rem;
+}
+
+.privacy-editor__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
diff --git a/app/admin/styles/subpage-sheet.css b/app/admin/styles/subpage-sheet.css
index 3740cd9..1699f91 100644
--- a/app/admin/styles/subpage-sheet.css
+++ b/app/admin/styles/subpage-sheet.css
@@ -323,3 +323,53 @@
 .password-input-wrapper input {
   padding-left: 2.25rem !important;
 }
+
+/* ── PasswordField (#690) ──────────────────────────────────────── */
+
+.password-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.password-field--set {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.password-field__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-right: auto;
+  font-size: 0.85rem;
+  color: var(--admin-text);
+}
+
+.password-field .password-input-wrapper input {
+  padding-right: 2.5rem !important;
+}
+
+.password-field__reveal {
+  position: absolute;
+  right: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--admin-text-muted);
+  cursor: pointer;
+}
+
+.password-field__reveal:hover {
+  color: var(--admin-text);
+}
+
+.password-field__cancel {
+  align-self: flex-start;
+}
diff --git a/app/api/__tests__/site-gate.test.ts b/app/api/__tests__/site-gate.test.ts
index 9dccc31..9357de0 100644
--- a/app/api/__tests__/site-gate.test.ts
+++ b/app/api/__tests__/site-gate.test.ts
@@ -37,6 +37,8 @@ const config = {
   subpages: [],
   albumPasswords: {},
   theme: { accent: '#e60012', fonts: { heading: 'Inter', body: 'Inter', caption: 'Inter' } },
+  contact: { enabled: true, retentionDays: 90 },
+  siteUrl: null,
 };
 
 vi.mock('@/lib/config', () => ({
@@ -89,6 +91,14 @@ const GATED: { name: string; call: () => Promise<Response> }[] = [
         { params: Promise.resolve({ album: 'tok' }) } as never,
       ),
   },
+  {
+    // Stores whatever a visitor sends; a locked site accepts nothing from strangers.
+    name: 'POST /api/contact',
+    call: async () =>
+      (await import('../contact/route')).POST(
+        new NextRequest('http://localhost/api/contact', { method: 'POST', body: '{}' }) as never,
+      ),
+  },
 ];
 
 describe('public content routes behind a locked site', () => {
@@ -142,4 +152,24 @@ describe('routes that must stay open', () => {
     );
     expect(res.status).toBe(200);
   });
+
+  // The password gate is set in the theme's fonts; locking them would render
+  // the gate itself in fallback fonts. Three public font names give nothing away.
+  it('GET /api/fonts/css answers a locked site', async () => {
+    config.sitePassword = 'letmein';
+    const res = await (
+      await import('../fonts/css/route')
+    ).GET(request('/api/fonts/css?family=Inter%3Ax') as never);
+    expect(res.status).not.toBe(401);
+  });
+
+  it('GET /api/fonts/file/[name] answers a locked site', async () => {
+    config.sitePassword = 'letmein';
+    const res = await (
+      await import('../fonts/file/[name]/route')
+    ).GET(request('/api/fonts/file/x.woff2') as never, {
+      params: Promise.resolve({ name: 'x.woff2' }),
+    });
+    expect(res.status).not.toBe(401);
+  });
 });
diff --git a/app/api/admin/__tests__/admin-guards.test.ts b/app/api/admin/__tests__/admin-guards.test.ts
index bb15975..23218e7 100644
--- a/app/api/admin/__tests__/admin-guards.test.ts
+++ b/app/api/admin/__tests__/admin-guards.test.ts
@@ -22,7 +22,7 @@ const ROUTES: {
   name: string;
   path: string;
   load: () => Promise<Record<string, unknown>>;
-  method: 'GET' | 'PUT' | 'POST' | 'DELETE';
+  method: 'GET' | 'PUT' | 'POST' | 'DELETE' | 'PATCH';
   args: () => unknown[];
 }[] = [
   {
@@ -124,6 +124,44 @@ const ROUTES: {
     method: 'GET',
     args: () => [],
   },
+  {
+    // Names and email addresses of everyone who used the contact form.
+    name: 'GET /api/admin/messages',
+    path: 'messages',
+    load: () => import('../messages/route'),
+    method: 'GET',
+    args: () => [],
+  },
+  {
+    name: 'PATCH /api/admin/messages',
+    path: 'messages',
+    load: () => import('../messages/route'),
+    method: 'PATCH',
+    args: () => [
+      new NextRequest('http://localhost/api/admin/messages', { method: 'PATCH', body: '{}' }),
+    ],
+  },
+  {
+    name: 'DELETE /api/admin/messages',
+    path: 'messages',
+    load: () => import('../messages/route'),
+    method: 'DELETE',
+    args: () => [new NextRequest('http://localhost/api/admin/messages?id=x', { method: 'DELETE' })],
+  },
+  {
+    name: 'GET /api/admin/privacy',
+    path: 'privacy',
+    load: () => import('../privacy/route'),
+    method: 'GET',
+    args: () => [],
+  },
+  {
+    name: 'PUT /api/admin/privacy',
+    path: 'privacy',
+    load: () => import('../privacy/route'),
+    method: 'PUT',
+    args: () => [new Request('http://localhost/api/admin/privacy', { method: 'PUT', body: '{}' })],
+  },
   {
     name: 'GET /api/admin/backups',
     path: 'backups',
diff --git a/app/api/admin/__tests__/doctor-guards.test.ts b/app/api/admin/__tests__/doctor-guards.test.ts
index 0b2314c..639fbdd 100644
--- a/app/api/admin/__tests__/doctor-guards.test.ts
+++ b/app/api/admin/__tests__/doctor-guards.test.ts
@@ -26,6 +26,15 @@ const baseConfig = {
   sitePassword: '',
   immich: { apiUrl: '', apiKey: '' },
   immichTimeoutMs: 1000,
+  legal: {
+    enabled: false,
+    name: '',
+    address: '',
+    zipCity: '',
+    country: '',
+  } as Record<string, unknown>,
+  contact: { enabled: false, retentionDays: 90 } as Record<string, unknown>,
+  privacy: { enabled: true },
 };
 const getConfigMock = vi.fn(() => baseConfig);
 
@@ -40,6 +49,8 @@ vi.mock('@/lib/config', () => ({
 
 vi.mock('@/lib/env', () => ({ env: { AUTH_SECRET: 'x'.repeat(64) } }));
 vi.mock('@/lib/admin/journal-service', () => ({ listJournalEntries: async () => [] }));
+const readSettingsYamlMock = vi.fn(async (): Promise<unknown> => null);
+vi.mock('@/lib/admin/yaml-service', () => ({ readSettingsYaml: () => readSettingsYamlMock() }));
 
 import { GET } from '../doctor/route';
 import { NextRequest } from 'next/server';
@@ -215,3 +226,36 @@ describe('GET /api/admin/doctor — album slug collisions', () => {
     vi.unstubAllGlobals();
   });
 });
+
+/**
+ * resolveLegal() drops a non-http(s) contact URL and only tells the server
+ * log. The doctor reads the raw settings.yaml so the admin sees why the link
+ * is gone.
+ */
+describe('GET /api/admin/doctor — Impressum', () => {
+  const complete = {
+    enabled: true,
+    name: 'Ralf',
+    address: 'Street 1',
+    zipCity: '10247 Berlin',
+    country: 'Germany',
+    email: 'mail@example.com',
+  };
+
+  it('stays out of the report while the page is off', async () => {
+    const body = await (await GET(req())).json();
+    expect(body.findings.find((f: { id: string }) => f.id === 'legal')).toBeUndefined();
+  });
+
+  it('names a contact URL that the page dropped', async () => {
+    readSettingsYamlMock.mockResolvedValueOnce({
+      legal: { ...complete, contactUrl: 'javascript:alert(1)' },
+    });
+
+    const body = await (await GET(req())).json();
+    const finding = body.findings.find((f: { id: string }) => f.id === 'legal');
+
+    expect(finding?.level).toBe('warn');
+    expect(finding?.detail).toContain('contact form URL is ignored');
+  });
+});
diff --git a/app/api/admin/__tests__/settings-write.test.ts b/app/api/admin/__tests__/settings-write.test.ts
index e6df529..03d7d71 100644
--- a/app/api/admin/__tests__/settings-write.test.ts
+++ b/app/api/admin/__tests__/settings-write.test.ts
@@ -75,3 +75,23 @@ describe('PUT /api/admin/settings', () => {
     expect(writeSettingsYaml).toHaveBeenCalledOnce();
   });
 });
+
+/** The panel sends the site password as typed; the file must not keep it that way (#690). */
+describe('PUT /api/admin/settings — site password', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('writes the site password as an scrypt hash', async () => {
+    const res = await put({ title: 'Folio', sitePassword: 'letmein' });
+    expect(res.status).toBe(200);
+
+    const written = vi.mocked(writeSettingsYaml).mock.calls[0][0] as { sitePassword: string };
+    expect(written.sitePassword).toMatch(/^scrypt:/);
+    expect(JSON.stringify(written)).not.toContain('letmein');
+  });
+
+  it('leaves an open site open', async () => {
+    await put({ title: 'Folio', sitePassword: '' });
+    const written = vi.mocked(writeSettingsYaml).mock.calls[0][0] as { sitePassword: string };
+    expect(written.sitePassword).toBe('');
+  });
+});
diff --git a/app/api/admin/backups/route.ts b/app/api/admin/backups/route.ts
index cd020f7..b2ee4d9 100644
--- a/app/api/admin/backups/route.ts
+++ b/app/api/admin/backups/route.ts
@@ -6,7 +6,7 @@ import { listJournalBackups, restoreJournalBackup } from '@/lib/admin/journal-se
 import { invalidateConfigCache } from '@/lib/config';
 import { immich } from '@/lib/immich';
 
-export type BackupTarget = 'gallery' | 'settings' | 'about' | 'journal';
+export type BackupTarget = 'gallery' | 'settings' | 'about' | 'privacy' | 'journal';
 
 export interface BackupItem {
   filename: string;
@@ -51,6 +51,7 @@ export const GET = withAdmin(async () => {
       parseBackupInfo(f, 'settings'),
     );
     const about = (await listBackups('about.md')).map((f) => parseBackupInfo(f, 'about'));
+    const privacy = (await listBackups('privacy.md')).map((f) => parseBackupInfo(f, 'privacy'));
     // Newest first across all entries, so a just-deleted entry sits on top.
     const journal = (await listJournalBackups())
       .map((b) => ({
@@ -65,6 +66,7 @@ export const GET = withAdmin(async () => {
         gallery,
         settings,
         about,
+        privacy,
         journal,
       },
     });
diff --git a/app/api/admin/doctor/route.ts b/app/api/admin/doctor/route.ts
index c84a118..531b54e 100644
--- a/app/api/admin/doctor/route.ts
+++ b/app/api/admin/doctor/route.ts
@@ -5,12 +5,18 @@ import path from 'node:path';
 import { getConfig, slugify } from '@/lib/config';
 import { env } from '@/lib/env';
 import { listJournalEntries } from '@/lib/admin/journal-service';
+import { readSettingsYaml } from '@/lib/admin/yaml-service';
+import { readPrivacy } from '@/lib/privacy';
 import {
   checkAlbumIds,
   checkAlbumSlugCollisions,
   checkAlbumsShared,
   checkAuthSecret,
+  checkCdn,
   checkImmichCalls,
+  checkContact,
+  checkLegal,
+  checkPrivacy,
   checkPasswords,
   checkProxyHops,
   checkWritable,
@@ -20,6 +26,8 @@ import {
   type AlbumRef,
   type AlbumSlugGroup,
   type DoctorFinding,
+  type ContactRef,
+  type LegalRef,
   type PasswordRef,
 } from '@/lib/admin/doctor';
 
@@ -44,6 +52,9 @@ export const GET = withAdmin(async (request: NextRequest) => {
     ),
   );
 
+  const cdn = checkCdn(env.CDN_URL, !!config.sitePassword, config.trustedProxyHops);
+  if (cdn) findings.push(cdn);
+
   // ── Immich: the three calls Folio actually depends on ────────────────
   const calls: Array<{ endpoint: string; ok: boolean }> = [];
   let albums: AlbumRef[] = [];
@@ -135,6 +146,27 @@ export const GET = withAdmin(async (request: NextRequest) => {
   }
   findings.push(checkPasswords(passwords));
 
+  // ── Impressum and contact form: judged on the raw blocks, see checkLegal ──
+  let rawLegal: LegalRef = config.legal;
+  let rawContact: ContactRef = config.contact;
+  try {
+    const settings = await readSettingsYaml();
+    rawLegal = settings?.legal ?? rawLegal;
+    rawContact = settings?.contact ?? rawContact;
+  } catch {
+    // Fall back to the resolved blocks; only a dropped URL goes unseen.
+  }
+  const legal = checkLegal(rawLegal, config.contact.enabled);
+  if (legal) findings.push(legal);
+  const contact = checkContact(rawContact, env.CONTACT_NOTIFY_URL);
+  if (contact) findings.push(contact);
+  const privacy = checkPrivacy({
+    legalEnabled: config.legal.enabled,
+    privacyEnabled: config.privacy.enabled,
+    hasText: readPrivacy() !== '',
+  });
+  if (privacy) findings.push(privacy);
+
   // ── Writability of the content volume ────────────────────────────────
   const contentDir = path.join(process.cwd(), 'content');
   const unwritable: string[] = [];
diff --git a/app/api/admin/gallery/route.ts b/app/api/admin/gallery/route.ts
index c6b6eae..3a850ef 100644
--- a/app/api/admin/gallery/route.ts
+++ b/app/api/admin/gallery/route.ts
@@ -5,6 +5,9 @@ import { readGalleryYaml, writeGalleryYaml } from '@/lib/admin/yaml-service';
 import { invalidateConfigCache, deriveGallery } from '@/lib/config';
 import { immich } from '@/lib/immich';
 import type { GalleryYaml } from '@/lib/config/schema';
+import { hashPasswordKeys } from '@/lib/admin/passwordHashing';
+
+const PASSWORD_KEY = new Set(['password']);
 
 /** GET: Read current gallery.yaml config. */
 export const GET = withAdmin(async () => {
@@ -44,7 +47,13 @@ export const PUT = withAdmin(async (request: Request) => {
   }
 
   try {
-    await writeGalleryYaml(gallery);
+    // Subpage and album passwords, wherever the entry sits (#690).
+    const toWrite = await hashPasswordKeys(
+      gallery,
+      PASSWORD_KEY,
+      await readGalleryYaml().catch(() => null),
+    );
+    await writeGalleryYaml(toWrite);
     invalidateConfigCache();
     immich.invalidateAll();
     // Revalidate all pages so the homepage picks up new hero images immediately
@@ -53,6 +62,8 @@ export const PUT = withAdmin(async (request: Request) => {
     return NextResponse.json({
       success: true,
       message: 'Saved successfully. Backup of previous version created.',
+      // What was written, passwords hashed, so the editor can take it over.
+      gallery: toWrite,
     });
   } catch (err) {
     console.error('[Admin] Failed to write gallery.yaml:', err);
diff --git a/app/api/admin/journal/[slug]/route.ts b/app/api/admin/journal/[slug]/route.ts
index fc8f11d..636a886 100644
--- a/app/api/admin/journal/[slug]/route.ts
+++ b/app/api/admin/journal/[slug]/route.ts
@@ -1,6 +1,7 @@
 import { NextResponse } from 'next/server';
 import { withAdmin } from '@/lib/admin/withAdmin';
 import { isValidSlug, sanitizeSlug, parseJournalMarkdown } from '@/lib/journal';
+import { hashFrontmatterPassword } from '@/lib/admin/passwordHashing';
 import {
   readJournalEntry,
   writeJournalEntry,
@@ -59,10 +60,18 @@ export const PUT = withAdmin(async (request: Request, context: RouteContext) =>
       if (existing) {
         return NextResponse.json({ error: 'Target slug already exists' }, { status: 409 });
       }
-      await writeJournalEntry(targetSlug, rawMarkdown);
+    }
+
+    // The entry's password is stored hashed (#690). The file as it is now
+    // supplies the hash to keep when the password did not change.
+    const current = await readJournalEntry(slug);
+    const markdown = await hashFrontmatterPassword(rawMarkdown, current?.rawMarkdown ?? null);
+
+    if (targetSlug !== slug) {
+      await writeJournalEntry(targetSlug, markdown);
       await deleteJournalEntry(slug);
     } else {
-      await writeJournalEntry(slug, rawMarkdown);
+      await writeJournalEntry(slug, markdown);
     }
 
     const updated = await readJournalEntry(targetSlug);
diff --git a/app/api/admin/messages/route.ts b/app/api/admin/messages/route.ts
new file mode 100644
index 0000000..bb0959f
--- /dev/null
+++ b/app/api/admin/messages/route.ts
@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { withAdmin } from '@/lib/admin/withAdmin';
+import { getConfig } from '@/lib/config';
+import { deleteMessage, isMessageId, listMessages, setRead } from '@/lib/contact';
+
+/**
+ * The contact form inbox (#702). Listing also applies the retention period,
+ * so opening the inbox is enough to purge what has expired.
+ */
+export const GET = withAdmin(async () => {
+  const { contact } = getConfig();
+  const messages = await listMessages(contact.retentionDays);
+  return NextResponse.json(
+    {
+      enabled: contact.enabled,
+      notifyConfigured: !!contact.notifyUrl,
+      retentionDays: contact.retentionDays,
+      messages,
+    },
+    { headers: { 'Cache-Control': 'no-store' } },
+  );
+});
+
+/** PATCH { id, read } — mark a message read or unread. */
+export const PATCH = withAdmin(async (request: NextRequest) => {
+  const body = (await request.json().catch(() => null)) as { id?: unknown; read?: unknown } | null;
+  if (!body || !isMessageId(body.id) || typeof body.read !== 'boolean') {
+    return NextResponse.json({ error: 'Invalid request' }, { status: 400 });
+  }
+  return (await setRead(body.id, body.read))
+    ? NextResponse.json({ ok: true })
+    : NextResponse.json({ error: 'Not found' }, { status: 404 });
+});
+
+/** DELETE ?id=<id> */
+export const DELETE = withAdmin(async (request: NextRequest) => {
+  const id = request.nextUrl.searchParams.get('id');
+  if (!isMessageId(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+  return (await deleteMessage(id))
+    ? NextResponse.json({ ok: true })
+    : NextResponse.json({ error: 'Not found' }, { status: 404 });
+});
diff --git a/app/api/admin/privacy/route.ts b/app/api/admin/privacy/route.ts
new file mode 100644
index 0000000..3232d25
--- /dev/null
+++ b/app/api/admin/privacy/route.ts
@@ -0,0 +1,78 @@
+import { NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { revalidatePath } from 'next/cache';
+import { withAdmin } from '@/lib/admin/withAdmin';
+import { atomicWrite } from '@/lib/atomicWrite';
+import { getConfig } from '@/lib/config';
+import { env } from '@/lib/env';
+import { PRIVACY_FILENAME, processingFacts, readPrivacy, starterHeadings } from '@/lib/privacy';
+
+const CONTENT_DIR = path.resolve(process.cwd(), 'content');
+const MAX_BACKUPS = 10;
+/** Far beyond any real policy; keeps a runaway paste out of the content volume. */
+const MAX_LENGTH = 200_000;
+
+/**
+ * The privacy policy (#699). GET also returns what this installation
+ * processes (lib/privacy.ts), which the editor shows next to the text.
+ */
+export const GET = withAdmin(async () => {
+  const config = getConfig();
+  const facts = processingFacts(config, {
+    CDN_URL: env.CDN_URL,
+    hasPasswords:
+      !!config.sitePassword ||
+      config.subpages.some((sp) => !!sp.password) ||
+      Object.values(config.albumPasswords).some(Boolean),
+  });
+  return NextResponse.json(
+    {
+      body: readPrivacy(CONTENT_DIR),
+      enabled: config.privacy.enabled,
+      facts,
+      starter: starterHeadings(config.lang, facts),
+    },
+    { headers: { 'Cache-Control': 'no-store' } },
+  );
+});
+
+/** PUT { body } — writes content/privacy.md, keeping a backup like about.md. */
+export const PUT = withAdmin(async (request: Request) => {
+  const data = (await request.json().catch(() => null)) as { body?: unknown } | null;
+  if (!data || typeof data.body !== 'string' || data.body.length > MAX_LENGTH) {
+    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+  }
+
+  const filePath = path.join(CONTENT_DIR, PRIVACY_FILENAME);
+  await fs.mkdir(CONTENT_DIR, { recursive: true });
+
+  // Same rule as the about route (#630): only a missing file means there is
+  // nothing to back up. Any other failure aborts before the live file changes.
+  let fileExists = true;
+  try {
+    await fs.access(filePath);
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code !== 'ENOENT') throw err;
+    fileExists = false;
+  }
+
+  if (fileExists) {
+    const backupDir = path.join(CONTENT_DIR, '.backups');
+    await fs.mkdir(backupDir, { recursive: true });
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    await fs.copyFile(filePath, path.join(backupDir, `${PRIVACY_FILENAME}.${timestamp}.bak`));
+    const backups = (await fs.readdir(backupDir))
+      .filter((e) => e.startsWith(PRIVACY_FILENAME) && e.endsWith('.bak'))
+      .sort();
+    while (backups.length > MAX_BACKUPS) {
+      await fs.unlink(path.join(backupDir, backups.shift()!));
+    }
+  }
+
+  const body = data.body.trim();
+  await atomicWrite(filePath, body ? `${body}\n` : '');
+  revalidatePath('/', 'layout');
+
+  return NextResponse.json({ success: true, message: 'Privacy policy saved.' });
+});
diff --git a/app/api/admin/settings/route.ts b/app/api/admin/settings/route.ts
index 6d1f09e..b3c4344 100644
--- a/app/api/admin/settings/route.ts
+++ b/app/api/admin/settings/route.ts
@@ -5,6 +5,9 @@ import { readSettingsYaml, writeSettingsYaml } from '@/lib/admin/yaml-service';
 import { invalidateConfigCache, getConfigOrNull } from '@/lib/config';
 import { immich } from '@/lib/immich';
 import { validateSettings } from '@/lib/config/settingsSchema';
+import { hashPasswordKeys } from '@/lib/admin/passwordHashing';
+
+const SITE_PASSWORD_KEY = new Set(['sitePassword']);
 import type { SettingsYaml } from '@/lib/config/schema';
 
 /** GET: Read current settings.yaml config. */
@@ -42,9 +45,13 @@ export const PUT = withAdmin(async (request: Request) => {
     );
   }
 
-  const settings = body.settings as SettingsYaml;
-
   try {
+    // Only the top-level site password: settings.yaml has no other password.
+    const settings = await hashPasswordKeys(
+      body.settings as SettingsYaml,
+      SITE_PASSWORD_KEY,
+      await readSettingsYaml().catch(() => null),
+    );
     await writeSettingsYaml(settings);
     invalidateConfigCache();
     immich.invalidateAll();
@@ -52,6 +59,8 @@ export const PUT = withAdmin(async (request: Request) => {
     return NextResponse.json({
       success: true,
       message: 'Saved successfully. Backup of previous version created.',
+      // The stored site password, hashed, so the field can read "Protected".
+      sitePassword: settings.sitePassword,
     });
   } catch (err) {
     console.error('[Admin] Failed to write settings.yaml:', err);
diff --git a/app/api/contact/route.ts b/app/api/contact/route.ts
new file mode 100644
index 0000000..ed6e929
--- /dev/null
+++ b/app/api/contact/route.ts
@@ -0,0 +1,71 @@
+/**
+ * Contact form submission (#702). POST /api/contact
+ * { name, email, message, website (honeypot), startedAt }
+ *
+ * The message is stored under content/messages/ and the owner is notified
+ * through contact.notifyUrl when one is set (lib/contact.ts).
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getConfig } from '@/lib/config';
+import { siteLockResponse } from '@/lib/auth';
+import { notifyNewMessage, saveMessage, validateContact } from '@/lib/contact';
+import { checkRateLimit, getClientIp, retryAfterSeconds } from '@/lib/rate-limit';
+
+/** A person sends one message, maybe a correction. Three a minute is generous. */
+const CONTACT_RPM = 3;
+
+/** Bodies larger than any valid message plus its fields are refused unread. */
+const MAX_BODY_BYTES = 16 * 1024;
+
+export async function POST(request: NextRequest) {
+  const config = getConfig();
+  if (!config.contact.enabled) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  // The page sits behind the site password; so does the endpoint it posts to.
+  const locked = siteLockResponse(request);
+  if (locked) return locked;
+
+  const ip = getClientIp(request);
+  const { success, resetAt } = checkRateLimit(`contact:${ip}`, CONTACT_RPM);
+  if (!success) {
+    return NextResponse.json(
+      { error: 'Too many requests' },
+      { status: 429, headers: { 'Retry-After': String(retryAfterSeconds(resetAt)) } },
+    );
+  }
+
+  if (Number(request.headers.get('content-length') ?? 0) > MAX_BODY_BYTES) {
+    return NextResponse.json({ error: 'Too large' }, { status: 413 });
+  }
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid request' }, { status: 400 });
+  }
+
+  const result = validateContact((body ?? {}) as Record<string, unknown>);
+  if (!result.ok) {
+    // A bot gets the same answer as a person, so it has nothing to tune against.
+    if (result.reason === 'spam') return NextResponse.json({ ok: true });
+    return NextResponse.json({ error: 'Invalid message' }, { status: 400 });
+  }
+
+  const saved = await saveMessage(
+    { name: result.name, email: result.email, message: result.message },
+    config.contact.retentionDays,
+  );
+  if (saved === 'full') {
+    console.warn('[Folio] contact: inbox is full, message refused');
+    return NextResponse.json({ error: 'Inbox full' }, { status: 503 });
+  }
+
+  const inboxUrl = config.siteUrl ? `${config.siteUrl.replace(/\/$/, '')}/admin/messages` : null;
+  await notifyNewMessage(config.contact.notifyUrl, inboxUrl);
+
+  return NextResponse.json({ ok: true });
+}
diff --git a/app/api/fonts/css/route.ts b/app/api/fonts/css/route.ts
new file mode 100644
index 0000000..4972347
--- /dev/null
+++ b/app/api/fonts/css/route.ts
@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getConfig } from '@/lib/config';
+import { getGoogleCss, parseFamilies, rewriteCss } from '@/lib/fonts';
+import { checkRateLimit, getClientIp, retryAfterSeconds } from '@/lib/rate-limit';
+
+/**
+ * The theme's font stylesheet, fetched from Google by the server and served
+ * from this origin (lib/fonts.ts).
+ *
+ * Not behind the site password: the password gate itself is set in the
+ * theme's fonts, and a stylesheet naming three public fonts gives nothing away.
+ */
+export async function GET(request: NextRequest) {
+  const ip = getClientIp(request);
+  const { success, resetAt } = checkRateLimit(`fonts:${ip}`, getConfig().rateLimitRpm);
+  if (!success) {
+    return new NextResponse(null, {
+      status: 429,
+      headers: { 'Retry-After': String(retryAfterSeconds(resetAt)), 'Cache-Control': 'no-store' },
+    });
+  }
+
+  const families = parseFamilies(request.nextUrl.searchParams.getAll('family'));
+  if (!families) {
+    return new NextResponse('/* invalid font families */', {
+      status: 400,
+      headers: { 'Content-Type': 'text/css; charset=utf-8', 'Cache-Control': 'no-store' },
+    });
+  }
+
+  const css = await getGoogleCss(families);
+  if (css === null) {
+    // The theme CSS names a system fallback after every family, so an empty
+    // stylesheet degrades to those. A short max-age lets the page pick the
+    // fonts up once Google answers again.
+    return new NextResponse('/* fonts unavailable, using system fallbacks */', {
+      headers: {
+        'Content-Type': 'text/css; charset=utf-8',
+        'Cache-Control': 'public, max-age=300',
+      },
+    });
+  }
+
+  return new NextResponse(rewriteCss(css), {
+    headers: {
+      'Content-Type': 'text/css; charset=utf-8',
+      'Cache-Control': 'public, max-age=86400',
+    },
+  });
+}
diff --git a/app/api/fonts/file/[name]/route.ts b/app/api/fonts/file/[name]/route.ts
new file mode 100644
index 0000000..ef54bea
--- /dev/null
+++ b/app/api/fonts/file/[name]/route.ts
@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getConfig } from '@/lib/config';
+import { getFontFile } from '@/lib/fonts';
+import { checkRateLimit, getClientIp, retryAfterSeconds } from '@/lib/rate-limit';
+
+/**
+ * One font file named by a stylesheet from /api/fonts/css (lib/fonts.ts).
+ * The name is a hash of the gstatic URL, so a file never changes under it.
+ */
+export async function GET(request: NextRequest, { params }: { params: Promise<{ name: string }> }) {
+  const ip = getClientIp(request);
+  const { success, resetAt } = checkRateLimit(`fonts:${ip}`, getConfig().rateLimitRpm);
+  if (!success) {
+    return new NextResponse(null, {
+      status: 429,
+      headers: { 'Retry-After': String(retryAfterSeconds(resetAt)), 'Cache-Control': 'no-store' },
+    });
+  }
+
+  const data = await getFontFile((await params).name);
+  if (!data) {
+    return new NextResponse(null, { status: 404, headers: { 'Cache-Control': 'no-store' } });
+  }
+
+  return new NextResponse(data as BodyInit, {
+    headers: {
+      'Content-Type': 'font/woff2',
+      'Cache-Control': 'public, max-age=31536000, immutable',
+    },
+  });
+}
diff --git a/app/contact/contact.css b/app/contact/contact.css
new file mode 100644
index 0000000..054cb85
--- /dev/null
+++ b/app/contact/contact.css
@@ -0,0 +1,112 @@
+.contact-page {
+  padding: 4rem 2rem;
+  min-height: 80vh;
+}
+.contact-page__header {
+  margin-bottom: 3rem;
+  text-align: center;
+}
+.contact-page__title {
+  font-family: var(--font-serif);
+  font-size: clamp(2.5rem, 8vw, 4rem);
+  font-weight: 400;
+  margin-bottom: 1rem;
+}
+.contact-page__subtitle {
+  font-family: var(--font-caption);
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+}
+.contact-page__content {
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.contact-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.contact-form__label {
+  font-family: var(--font-caption);
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+}
+.contact-form__input {
+  width: 100%;
+  padding: 12px 14px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  transition: border-color var(--transition-fast);
+}
+.contact-form__input:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-color: var(--accent);
+}
+textarea.contact-form__input {
+  min-height: 10rem;
+  resize: vertical;
+  line-height: 1.5;
+}
+/* The honeypot. Off-screen rather than display:none, which some bots skip. */
+.contact-form__trap {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+.contact-form__privacy {
+  font-size: 0.85rem;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+.contact-form__submit {
+  align-self: flex-start;
+  padding: 12px 28px;
+  background: var(--accent);
+  color: var(--on-accent);
+  border: none;
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans);
+  font-size: 0.9rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: opacity var(--transition-fast);
+}
+.contact-form__submit:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+.contact-form__error {
+  color: #e74c3c;
+  font-size: 0.9rem;
+}
+.contact-form__done {
+  text-align: center;
+}
+.contact-form__done h2 {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: 1.8rem;
+  margin-bottom: 0.75rem;
+}
+.contact-form__done p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..61b5740
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,43 @@
+/**
+ * Contact page (#702). The form posts to /api/contact, which stores the
+ * message on this server; see lib/contact.ts.
+ */
+
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { getConfig } from '@/lib/config';
+import { BackLink } from '@/components/BackLink';
+import ContactForm from '@/components/ContactForm';
+import { getServerDictionary } from '@/lib/i18n/server';
+import './contact.css';
+
+export function generateMetadata(): Metadata {
+  // No title for a page that is switched off: it renders the 404 page.
+  if (!getConfig().contact.enabled) return {};
+  return { title: getServerDictionary().contact.title };
+}
+
+export const dynamic = 'force-dynamic';
+
+export default function ContactPage() {
+  const { contact } = getConfig();
+  const t = getServerDictionary();
+
+  if (!contact.enabled) {
+    notFound();
+  }
+
+  return (
+    <div className="contact-page">
+      <header className="contact-page__header">
+        <BackLink href="/" label={t.common.home} />
+        <h1 className="contact-page__title">{t.contact.title}</h1>
+        <p className="contact-page__subtitle">{t.contact.subtitle}</p>
+      </header>
+
+      <main className="contact-page__content">
+        <ContactForm retentionDays={contact.retentionDays} />
+      </main>
+    </div>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index d194d7e..f4c8612 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1645,7 +1645,7 @@
 .empty-state__button {
   padding: 12px 24px;
   background: var(--accent);
-  color: var(--bg-primary);
+  color: var(--on-accent);
   border: none;
   border-radius: var(--radius-md);
   font-family: var(--font-sans);
diff --git a/app/impressum/impressum.css b/app/impressum/impressum.css
index 7955e89..1769e44 100644
--- a/app/impressum/impressum.css
+++ b/app/impressum/impressum.css
@@ -1,18 +1,18 @@
-.subpage-container {
+.legal-page {
   padding: 4rem 2rem;
   min-height: 80vh;
 }
-.subpage-header {
+.legal-header {
   margin-bottom: 4rem;
   text-align: center;
 }
-.subpage-title {
+.legal-title {
   font-family: var(--font-serif);
   font-size: clamp(2.5rem, 8vw, 4rem);
   font-weight: 400;
   margin-bottom: 1rem;
 }
-.subpage-subtitle {
+.legal-subtitle {
   font-family: var(--font-caption);
   font-size: 1rem;
   text-transform: uppercase;
@@ -21,7 +21,7 @@
      an opacity on top of them is not. */
   color: var(--text-muted);
 }
-.subpage-content {
+.legal-content {
   max-width: 600px;
   margin: 0 auto;
 }
@@ -39,8 +39,14 @@
 .legal-section__text--pre {
   white-space: pre-wrap;
 }
-.legal-source {
-  margin-top: 4rem;
-  font-size: 0.85rem;
-  color: var(--text-muted);
+/* tokens.css strips link underlines site-wide; here the links sit inside
+   running text and would otherwise be indistinguishable from it. */
+.legal-section__text a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--text-muted);
+  transition: text-decoration-color var(--transition-fast);
+}
+.legal-section__text a:hover {
+  text-decoration-color: currentColor;
 }
diff --git a/app/impressum/page.tsx b/app/impressum/page.tsx
index aacb009..49512ff 100644
--- a/app/impressum/page.tsx
+++ b/app/impressum/page.tsx
@@ -7,10 +7,14 @@ import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getConfig } from '@/lib/config';
 import { BackLink } from '@/components/BackLink';
+import EmailLink from '@/components/EmailLink';
+import { encodeEmail, spelledOutEmail } from '@/lib/emailObfuscation';
 import { getServerDictionary } from '@/lib/i18n/server';
 import './impressum.css';
 
 export function generateMetadata(): Metadata {
+  // No title for a page that is switched off: it renders the 404 page.
+  if (!getConfig().legal.enabled) return {};
   return {
     title: getServerDictionary().legal.title,
     robots: { index: false, follow: true }, // Usually no need to index legal pages
@@ -19,23 +23,31 @@ export function generateMetadata(): Metadata {
 
 export const dynamic = 'force-dynamic';
 
+/** `tel:` takes digits and a leading +; the displayed number keeps its spacing. */
+function telHref(phone: string): string {
+  return `tel:${phone.replace(/[^\d+]/g, '')}`;
+}
+
 export default function ImpressumPage() {
-  const { legal } = getConfig();
+  const { legal, contact } = getConfig();
   const t = getServerDictionary();
+  // The built-in form stands in as the second contact channel unless an
+  // external one is configured.
+  const contactUrl = legal.contactUrl ?? (contact.enabled ? '/contact' : undefined);
 
   if (!legal.enabled) {
     notFound();
   }
 
   return (
-    <div className="subpage-container">
-      <header className="subpage-header">
-        <BackLink href="/" label={t.common.home} />
-        <h1 className="subpage-title">{t.legal.title}</h1>
-        <p className="subpage-subtitle">{t.legal.subtitle}</p>
+    <div className="legal-page">
+      <header className="legal-header">
+        <BackLink href="/" label={t.common.backToGallery} />
+        <h1 className="legal-title">{t.legal.title}</h1>
+        <p className="legal-subtitle">{legal.heading ?? t.legal.subtitle}</p>
       </header>
 
-      <main className="subpage-content">
+      <div className="legal-content">
         <section className="legal-section">
           <h2 className="legal-section__title">{t.legal.address}</h2>
           <p className="legal-section__text">
@@ -49,21 +61,29 @@ export default function ImpressumPage() {
           </p>
         </section>
 
-        {(legal.email || legal.phone) && (
+        {(legal.email || legal.phone || contactUrl) && (
           <section className="legal-section">
             <h2 className="legal-section__title">{t.legal.contact}</h2>
             <p className="legal-section__text">
               {legal.email && (
                 <>
-                  {t.legal.email}: {legal.email}
+                  {t.legal.email}: <EmailLink encoded={encodeEmail(legal.email)} />
+                  {/* § 5 DDG wants the address reachable without JavaScript too. */}
+                  <noscript>{spelledOutEmail(legal.email)}</noscript>
                   <br />
                 </>
               )}
               {legal.phone && (
                 <>
-                  {t.legal.phone}: {legal.phone}
+                  {t.legal.phone}: <a href={telHref(legal.phone)}>{legal.phone}</a>
+                  <br />
                 </>
               )}
+              {contactUrl && (
+                <a href={contactUrl} rel="noopener">
+                  {legal.contactLabel ?? t.legal.contactForm}
+                </a>
+              )}
             </p>
           </section>
         )}
@@ -93,11 +113,7 @@ export default function ImpressumPage() {
             <p className="legal-section__text legal-section__text--pre">{legal.extraInfo}</p>
           </section>
         )}
-
-        <section className="legal-source">
-          <p>{t.legal.source}</p>
-        </section>
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/app/journal/[slug]/page.tsx b/app/journal/[slug]/page.tsx
index 48da0a6..4f71f0c 100644
--- a/app/journal/[slug]/page.tsx
+++ b/app/journal/[slug]/page.tsx
@@ -18,6 +18,7 @@ import { getConfig } from '@/lib/config';
 import { immich } from '@/lib/immich';
 import {
   imageUrl,
+  videoUrl,
   exifUrl,
   assetPlaceholder,
   assetAspectRatio,
@@ -291,6 +292,7 @@ export default async function JournalDetailPage({ params }: JournalDetailPagePro
         type: isVideo ? 'video' : 'image',
         thumbUrl: imageUrl(a.id, 'preview'),
         previewUrl: imageUrl(a.id, 'preview'),
+        ...(isVideo ? { videoUrl: videoUrl(a.id) } : {}),
         exifUrl: exifUrl(a.id),
         ...(ph ? { blurDataURL: ph.blurDataURL, dominantColor: ph.dominantColor } : {}),
         ...(exif ?? {}),
diff --git a/app/layout.tsx b/app/layout.tsx
index bf4e4b5..c6e1ed5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -14,7 +14,8 @@ import { ThemeToggle } from '@/components/ThemeToggle';
 import { ScrollToTop } from '@/components/ScrollToTop';
 import { Footer } from '@/components/Footer';
 import { SetupScreen } from '@/components/SetupScreen';
-import { getConfigOrNull, getGoogleFontsUrl, AppConfig } from '@/lib/config';
+import { getConfigOrNull, getThemeFontsUrl, AppConfig } from '@/lib/config';
+import { accentForMode, onAccent } from '@/lib/config/theme';
 import { isAdminPath } from '@/lib/admin/paths';
 import { isInstallPath } from '@/lib/install';
 import { isSiteLocked, isSiteUnlocked } from '@/lib/auth';
@@ -95,11 +96,15 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   }
 
   const { theme } = config;
-  const fontsUrl = getGoogleFontsUrl(theme);
+  const fontsUrl = getThemeFontsUrl(theme);
 
   const themeVars: Record<string, string> = {
-    '--accent': theme.accent,
-    '--accent-dim': `${theme.accent}1f`,
+    // One accent per colour mode; tokens.css picks the active one as --accent,
+    // so the mode toggle switches it without a server round trip.
+    '--accent-dark': accentForMode(theme, 'dark'),
+    '--accent-light': accentForMode(theme, 'light'),
+    '--on-accent-dark': onAccent(accentForMode(theme, 'dark')),
+    '--on-accent-light': onAccent(accentForMode(theme, 'light')),
     '--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`,
@@ -157,8 +162,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       data-default-theme={config.colorMode}
     >
       <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>
diff --git a/app/leaflet.css b/app/leaflet.css
index 25795f2..1cb32fa 100644
--- a/app/leaflet.css
+++ b/app/leaflet.css
@@ -3,6 +3,19 @@
    page and inside a journal entry alike. Leaflet's own stylesheet is
    emitted by components/LeafletMap.tsx. */
 
+/* ── Tiles ─────────────────────────────────────────────────── */
+
+/* OpenStreetMap's tiles are bright and colourful. Photographs should carry
+   the colour, so the map is muted in both modes, and inverted into a dark
+   map in dark mode (the default; light mode sets data-theme='light'). */
+.leaflet-tile-pane {
+  filter: invert(1) hue-rotate(180deg) grayscale(0.85) brightness(0.9) contrast(0.9);
+}
+
+[data-theme='light'] .leaflet-tile-pane {
+  filter: grayscale(0.85) contrast(0.95);
+}
+
 /* ── Popups ────────────────────────────────────────────────── */
 
 .leaflet-popup-content-wrapper {
@@ -93,7 +106,7 @@
   height: 32px;
   border-radius: 50%;
   background: var(--accent, #e60012);
-  color: #fff;
+  color: var(--on-accent, #fff);
   font-family: var(--font-caption);
   font-size: 0.6875rem;
   font-weight: 700;
diff --git a/app/map/page.tsx b/app/map/page.tsx
index 24340f3..1f6e23f 100644
--- a/app/map/page.tsx
+++ b/app/map/page.tsx
@@ -9,6 +9,9 @@ import { MapView } from '@/components/MapView';
 import { BackLink } from '@/components/BackLink';
 import type { Metadata } from 'next';
 import { getServerDictionary } from '@/lib/i18n/server';
+// Imported here as well as in LeafletMap: this page has the stylesheet in its
+// server HTML, so the tiles never render before their CSS.
+import 'leaflet/dist/leaflet.css';
 import './map.css';
 
 export const dynamic = 'force-dynamic';
@@ -33,15 +36,6 @@ export default function MapPage() {
 
   return (
     <>
-      {/* LeafletMap emits this too, but only once /api/map has answered; on
-          this page the stylesheet should be in the server HTML so the tiles
-          never render before their CSS. Same href — the browser loads it once. */}
-      <link
-        rel="stylesheet"
-        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-        crossOrigin=""
-      />
       <div className="map-page">
         <div className="map-page__header">
           <div className="map-page__header-main">
diff --git a/app/page.tsx b/app/page.tsx
index 215c925..0c6e528 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,7 +7,9 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { immich, type ImmichAsset } from '@/lib/immich';
-import { getConfig } from '@/lib/config';
+import { getConfig, type ExifDisplayConfig } from '@/lib/config';
+import { assetLocationPrecision } from '@/lib/assetLocation';
+import { placeLabel } from '@/lib/mapPrecision';
 import { imageUrl, assetPlaceholder } from '@/lib/urls';
 import { HeroCarousel } from '@/components/HeroCarousel';
 import { FadeIn } from '@/components/FadeIn';
@@ -46,16 +48,26 @@ function heroNavEntries(subpages: HeroSubpage[], albums: HeroAlbum[], t: Diction
 /**
  * Camera line for the hero chip: "Q3 · 28MM · ƒ/5.6 · 1/250 · ISO 200".
  * Returns undefined when the asset carries no usable EXIF.
+ *
+ * Honours the same `exif:` groups as the lightbox panel (`/api/exif`), and the
+ * city passes the album's `location:` precision too — the chip is the most
+ * visible EXIF on the site and must not publish what the owner switched off.
  */
-function heroExifLine(asset: ImmichAsset): string | undefined {
+async function heroExifLine(
+  asset: ImmichAsset,
+  show: ExifDisplayConfig,
+): Promise<string | undefined> {
   const e = asset.exifInfo;
   if (!e) return undefined;
+  const city = show.location
+    ? placeLabel(await assetLocationPrecision(asset.id), { city: e.city ?? '', country: '' }).city
+    : '';
   const parts = [
-    e.city || e.model || undefined,
-    e.focalLength ? `${Math.round(e.focalLength)}mm` : undefined,
-    e.fNumber ? `ƒ/${e.fNumber}` : undefined,
-    e.exposureTime ? `${e.exposureTime}s` : undefined,
-    e.iso ? `ISO ${e.iso}` : undefined,
+    city || (show.camera ? e.model : undefined) || undefined,
+    show.camera && e.focalLength ? `${Math.round(e.focalLength)}mm` : undefined,
+    show.settings && e.fNumber ? `ƒ/${e.fNumber}` : undefined,
+    show.settings && e.exposureTime ? `${e.exposureTime}s` : undefined,
+    show.settings && e.iso ? `ISO ${e.iso}` : undefined,
   ].filter(Boolean);
   return parts.length > 0 ? parts.join(' · ') : undefined;
 }
@@ -129,7 +141,7 @@ export default async function HomePage() {
     config.heroImages.map(async (id) => {
       const asset = await immich.getAssetInfo(id);
       const ph = asset ? assetPlaceholder(asset) : null;
-      const exif = asset ? heroExifLine(asset) : undefined;
+      const exif = asset ? await heroExifLine(asset, config.exif) : undefined;
       return {
         src: imageUrl(id, 'preview'),
         ...(ph ? { blurDataURL: ph.blurDataURL } : {}),
diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
new file mode 100644
index 0000000..14f6125
--- /dev/null
+++ b/app/privacy/page.tsx
@@ -0,0 +1,61 @@
+/**
+ * Privacy policy (#699): content/privacy.md, written by the owner in the
+ * admin panel. Folio ships no legal text of its own.
+ */
+
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { getConfig } from '@/lib/config';
+import { BackLink } from '@/components/BackLink';
+import { getServerDictionary } from '@/lib/i18n/server';
+import { parseMarkdownBlocks } from '@/lib/markdownBlocks';
+import { privacyAvailable, readPrivacy } from '@/lib/privacy';
+import './privacy.css';
+
+export function generateMetadata(): Metadata {
+  if (!privacyAvailable(getConfig())) return {};
+  return {
+    title: getServerDictionary().privacy.title,
+    robots: { index: false, follow: true },
+  };
+}
+
+export const dynamic = 'force-dynamic';
+
+export default function PrivacyPage() {
+  const t = getServerDictionary();
+  if (!privacyAvailable(getConfig())) notFound();
+
+  const blocks = parseMarkdownBlocks(readPrivacy());
+
+  return (
+    <div className="privacy-page">
+      <header className="privacy-page__header">
+        <BackLink href="/" label={t.common.home} />
+        <h1 className="privacy-page__title">{t.privacy.title}</h1>
+      </header>
+
+      {/* Every html string below comes from renderInlineMarkdown, which escapes
+          the author's text before adding its own tags. */}
+      <main className="privacy-page__content">
+        {blocks.map((block, i) => {
+          if (block.type === 'heading') {
+            const Tag = block.level === 2 ? 'h2' : 'h3';
+            return <Tag key={i} dangerouslySetInnerHTML={{ __html: block.html }} />;
+          }
+          if (block.type === 'list') {
+            const List = block.ordered ? 'ol' : 'ul';
+            return (
+              <List key={i}>
+                {block.items.map((item, j) => (
+                  <li key={j} dangerouslySetInnerHTML={{ __html: item }} />
+                ))}
+              </List>
+            );
+          }
+          return <p key={i} dangerouslySetInnerHTML={{ __html: block.html }} />;
+        })}
+      </main>
+    </div>
+  );
+}
diff --git a/app/privacy/privacy.css b/app/privacy/privacy.css
new file mode 100644
index 0000000..b96c7e8
--- /dev/null
+++ b/app/privacy/privacy.css
@@ -0,0 +1,43 @@
+.privacy-page {
+  padding: 4rem 2rem;
+  min-height: 80vh;
+}
+.privacy-page__header {
+  margin-bottom: 3rem;
+  text-align: center;
+}
+.privacy-page__title {
+  font-family: var(--font-serif);
+  font-size: clamp(2.2rem, 7vw, 3.5rem);
+  font-weight: 400;
+}
+.privacy-page__content {
+  max-width: 680px;
+  margin: 0 auto;
+  line-height: 1.7;
+  color: var(--text-secondary);
+}
+.privacy-page__content h2 {
+  margin: 2.5rem 0 0.75rem;
+  font-size: 1.3rem;
+  color: var(--text-primary);
+}
+.privacy-page__content h3 {
+  margin: 1.75rem 0 0.5rem;
+  font-size: 1.05rem;
+  color: var(--text-primary);
+}
+.privacy-page__content p,
+.privacy-page__content ul,
+.privacy-page__content ol {
+  margin: 0 0 1rem;
+}
+.privacy-page__content ul,
+.privacy-page__content ol {
+  padding-left: 1.4rem;
+}
+/* tokens.css strips link underlines site-wide; in running text they are needed. */
+.privacy-page__content a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
diff --git a/app/tokens.css b/app/tokens.css
index b2b22ce..c631c4c 100644
--- a/app/tokens.css
+++ b/app/tokens.css
@@ -31,8 +31,11 @@
   --border-subtle: #2a2a28;
   --border-hover: #3a3a38;
 
-  --accent: #e60012;
-  --accent-dim: rgba(230, 0, 18, 0.12);
+  /* The layout sets --accent-dark/--accent-light (and --on-accent-*) from the
+     theme; the fallbacks only cover a page rendered without it. */
+  --accent: var(--accent-dark, #e60012);
+  --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent);
+  --on-accent: var(--on-accent-dark, #ffffff);
 
   --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
@@ -65,8 +68,9 @@
   --border-subtle: #ddddd8;
   --border-hover: #c5c5c0;
 
-  --accent: #c8000f;
-  --accent-dim: rgba(200, 0, 15, 0.08);
+  --accent: var(--accent-light, #c8000f);
+  --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent);
+  --on-accent: var(--on-accent-light, #ffffff);
 }
 
 /* ── Studio Modern: Leica Precision Palette ──────── */
diff --git a/components/BackLink.tsx b/components/BackLink.tsx
index c93fde0..ef79b27 100644
--- a/components/BackLink.tsx
+++ b/components/BackLink.tsx
@@ -4,7 +4,6 @@
  */
 
 import Link from 'next/link';
-import { getServerDictionary } from '@/lib/i18n/server';
 
 interface BackLinkProps {
   href: string;
@@ -12,9 +11,10 @@ interface BackLinkProps {
 }
 
 export function BackLink({ href, label }: BackLinkProps) {
-  const t = getServerDictionary();
   return (
-    <Link href={href} className="album-header__back" aria-label={t.common.backTo(label)}>
+    // No aria-label: every caller's label already reads "Back to …", and an
+    // aria-label built from it announced "Back to Back to …".
+    <Link href={href} className="album-header__back">
       <svg
         aria-hidden="true"
         viewBox="0 0 24 24"
diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx
new file mode 100644
index 0000000..6938006
--- /dev/null
+++ b/components/ContactForm.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+/**
+ * Contact form (#702). Posts to /api/contact; see lib/contact.ts for what
+ * happens to the message.
+ *
+ * Spam protection without a captcha, which would be another third party: a
+ * honeypot field people never see, and `startedAt`, the time the form was
+ * rendered, which the server compares against the submission.
+ */
+
+import { useState } from 'react';
+import { useDictionary } from './I18nProvider';
+
+interface Props {
+  retentionDays: number;
+}
+
+type State = 'idle' | 'sending' | 'done';
+
+export default function ContactForm({ retentionDays }: Props) {
+  const t = useDictionary().contact;
+  // When the form became usable. A bot posting straight to the endpoint has
+  // none; one filling the form on load is faster than MIN_FILL_MS.
+  const [startedAt] = useState(() => Date.now());
+  const [state, setState] = useState<State>('idle');
+  const [error, setError] = useState('');
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+    setError('');
+    setState('sending');
+    try {
+      const res = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: data.get('name'),
+          email: data.get('email'),
+          message: data.get('message'),
+          website: data.get('website'),
+          startedAt,
+        }),
+      });
+      if (res.ok) {
+        setState('done');
+        return;
+      }
+      setError(res.status === 400 ? t.invalid : res.status === 429 ? t.tooMany : t.failed);
+    } catch {
+      setError(t.failed);
+    }
+    setState('idle');
+  }
+
+  if (state === 'done') {
+    return (
+      <div className="contact-form__done" role="status">
+        <h2>{t.successTitle}</h2>
+        <p>{t.successText}</p>
+      </div>
+    );
+  }
+
+  const sending = state === 'sending';
+
+  return (
+    <form className="contact-form" onSubmit={handleSubmit}>
+      <div className="contact-form__field">
+        <label className="contact-form__label" htmlFor="contact-name">
+          {t.name}
+        </label>
+        <input
+          id="contact-name"
+          name="name"
+          className="contact-form__input"
+          autoComplete="name"
+          maxLength={100}
+          required
+          disabled={sending}
+        />
+      </div>
+
+      <div className="contact-form__field">
+        <label className="contact-form__label" htmlFor="contact-email">
+          {t.email}
+        </label>
+        <input
+          id="contact-email"
+          name="email"
+          type="email"
+          className="contact-form__input"
+          autoComplete="email"
+          maxLength={200}
+          required
+          disabled={sending}
+        />
+      </div>
+
+      <div className="contact-form__field">
+        <label className="contact-form__label" htmlFor="contact-message">
+          {t.message}
+        </label>
+        <textarea
+          id="contact-message"
+          name="message"
+          className="contact-form__input"
+          maxLength={5000}
+          required
+          disabled={sending}
+        />
+      </div>
+
+      <div className="contact-form__trap" aria-hidden="true">
+        <label htmlFor="contact-website">Website</label>
+        <input id="contact-website" name="website" tabIndex={-1} autoComplete="off" />
+      </div>
+
+      <p className="contact-form__privacy">{t.privacy(retentionDays)}</p>
+
+      {error && (
+        <p className="contact-form__error" role="alert">
+          {error}
+        </p>
+      )}
+
+      <button type="submit" className="contact-form__submit" disabled={sending}>
+        {sending ? t.sending : t.submit}
+      </button>
+    </form>
+  );
+}
diff --git a/components/DevToolbar.tsx b/components/DevToolbar.tsx
index f98f85a..7042831 100644
--- a/components/DevToolbar.tsx
+++ b/components/DevToolbar.tsx
@@ -16,6 +16,7 @@
 
 import React, { useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import { IconPalette, IconX } from './Icons';
+import { getFontsCssUrl } from '@/lib/config/theme';
 
 const PRESETS = ['studio', 'studio-modern', 'minimal', 'editorial', 'classic', 'noir', 'monograph'];
 const FRAMES = ['none', 'passepartout', 'shadow'];
@@ -108,14 +109,8 @@ export function DevToolbar() {
         `'${fonts.body}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`,
       );
       setVar('--font-caption', `'${fonts.caption}', Georgia, serif`);
-      // Dynamically load Google Fonts if not already loaded
-      const families = [fonts.heading, fonts.body, fonts.caption]
-        .filter((f, i, a) => a.indexOf(f) === i)
-        .map(
-          (f) => `family=${f.replace(/\s+/g, '+')}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400`,
-        )
-        .join('&');
-      const href = `https://fonts.googleapis.com/css2?${families}&display=swap`;
+      // Load the fonts through the same-origin proxy the layout uses
+      const href = getFontsCssUrl([fonts.heading, fonts.body, fonts.caption]);
       // Check if already loaded
       const existing = document.querySelector(`link[href="${href}"]`);
       if (!existing) {
diff --git a/components/EmailLink.tsx b/components/EmailLink.tsx
new file mode 100644
index 0000000..d6db02d
--- /dev/null
+++ b/components/EmailLink.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+/**
+ * A mailto: link whose address is only put together in the browser; see
+ * lib/emailObfuscation.ts.
+ *
+ * Until hydration there is no address and no href. A page that must keep the
+ * address reachable without JavaScript (the Impressum) renders its own
+ * <noscript> with spelledOutEmail(). That is not a prop here: props travel in
+ * the RSC payload, so even an unused fallback would land in every page.
+ */
+
+import { useSyncExternalStore, type ReactNode } from 'react';
+import { decodeEmail } from '@/lib/emailObfuscation';
+
+interface Props {
+  /** encodeEmail() of the address. */
+  encoded: string;
+  className?: string;
+  'aria-label'?: string;
+  /** Link content, e.g. an icon. Without it the address itself is shown. */
+  children?: ReactNode;
+}
+
+const subscribe = () => () => {};
+
+export default function EmailLink({ encoded, className, children, ...rest }: Props) {
+  // False on the server and during hydration, true afterwards: the decoded
+  // address never appears in server HTML and never causes a mismatch.
+  const inBrowser = useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  );
+  const email = inBrowser ? decodeEmail(encoded) : '';
+
+  return (
+    <a
+      href={email ? `mailto:${email}` : undefined}
+      className={className}
+      aria-label={rest['aria-label']}
+    >
+      {children ?? email}
+    </a>
+  );
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 89805f8..e69b14d 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -6,15 +6,21 @@
 import Link from 'next/link';
 import { getConfig } from '@/lib/config';
 import { getServerDictionary } from '@/lib/i18n/server';
+import { privacyAvailable } from '@/lib/privacy';
+import EmailLink from './EmailLink';
+import { encodeEmail } from '@/lib/emailObfuscation';
 
 export function Footer() {
   const config = getConfig();
-  const { footer, legal } = config;
+  const { footer, legal, contact } = config;
   const t = getServerDictionary();
+  const privacy = privacyAvailable(config);
 
-  // Don't render if no footer config AND no legal config
+  // Don't render if there is no footer config and no legal or contact page to link
   if (
     !legal.enabled &&
+    !contact.enabled &&
+    !privacy &&
     (!footer || (!footer.name && !footer.instagram && !footer.email && !footer.website))
   ) {
     return null;
@@ -30,6 +36,16 @@ export function Footer() {
               {t.legal.navLabel}
             </Link>
           )}
+          {privacy && (
+            <Link href="/privacy" className="footer__legal-link">
+              {t.privacy.navLabel}
+            </Link>
+          )}
+          {contact.enabled && (
+            <Link href="/contact" className="footer__legal-link">
+              {t.contact.navLabel}
+            </Link>
+          )}
         </div>
 
         <div className="footer__links">
@@ -59,7 +75,11 @@ export function Footer() {
             </a>
           )}
           {footer?.email && (
-            <a href={`mailto:${footer.email}`} className="footer__link" aria-label={t.common.email}>
+            <EmailLink
+              encoded={encodeEmail(footer.email)}
+              className="footer__link"
+              aria-label={t.common.email}
+            >
               <svg
                 aria-hidden="true"
                 width="16"
@@ -74,7 +94,7 @@ export function Footer() {
                 <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                 <polyline points="22,6 12,13 2,6" />
               </svg>
-            </a>
+            </EmailLink>
           )}
           {footer?.website && (
             <a
diff --git a/components/LeafletMap.tsx b/components/LeafletMap.tsx
index 80dc757..f88eaf2 100644
--- a/components/LeafletMap.tsx
+++ b/components/LeafletMap.tsx
@@ -5,12 +5,14 @@
  * blocks: tiles, markers from props, an optional line through them, fit to
  * bounds. It knows nothing about /api/map; MapView fetches and hands over.
  *
- * The Leaflet stylesheet is emitted here rather than by each page, so a map
- * anywhere brings its own CSS. Marker and popup styling lives in
- * app/leaflet.css, loaded globally.
+ * The Leaflet stylesheet is imported here rather than by each page, so a map
+ * anywhere brings its own CSS. It comes from the npm package, bundled, not
+ * from a CDN: no visitor request leaves this origin for it (#699). Marker
+ * and popup styling lives in app/leaflet.css, loaded globally.
  */
 
 import { useEffect, useRef } from 'react';
+import 'leaflet/dist/leaflet.css';
 
 export interface LeafletMarker {
   lat: number;
@@ -41,9 +43,6 @@ export function escapeHtml(str: string): string {
     .replace(/'/g, '&#039;');
 }
 
-const LEAFLET_CSS_HREF = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
-const LEAFLET_CSS_INTEGRITY = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';
-
 export function LeafletMap({
   markers,
   line = false,
@@ -75,11 +74,13 @@ export function LeafletMap({
       const map = L.map(containerRef.current, { zoomControl: true, attributionControl: true });
       mapRef.current = map;
 
-      // Dark-themed tiles (CartoDB Dark Matter)
-      L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+      // OpenStreetMap's own tiles: free to use with attribution and a Referer,
+      // which the Referrer-Policy sends. CARTO's Dark Matter, used before,
+      // started answering every tile with "API KEY REQUIRED". The dark look
+      // comes from a filter in app/leaflet.css, so it follows the colour mode.
+      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution:
-          '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
-        subdomains: 'abcd',
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
         maxZoom: 19,
       }).addTo(map);
 
@@ -136,15 +137,5 @@ export function LeafletMap({
     };
   }, [markersKey, line, fitMaxZoom]);
 
-  return (
-    <>
-      <link
-        rel="stylesheet"
-        href={LEAFLET_CSS_HREF}
-        integrity={LEAFLET_CSS_INTEGRITY}
-        crossOrigin=""
-      />
-      <div ref={containerRef} className={className} />
-    </>
-  );
+  return <div ref={containerRef} className={className} />;
 }
diff --git a/components/PasswordGate.module.css b/components/PasswordGate.module.css
index 75bfc85..aa7e2b9 100644
--- a/components/PasswordGate.module.css
+++ b/components/PasswordGate.module.css
@@ -68,7 +68,7 @@
 .button {
   padding: 12px 24px;
   background: var(--accent);
-  color: var(--bg-primary);
+  color: var(--on-accent);
   border: none;
   border-radius: var(--radius-md);
   font-family: var(--font-sans);
diff --git a/components/ProofingModal.tsx b/components/ProofingModal.tsx
index 05e2112..f4105e4 100644
--- a/components/ProofingModal.tsx
+++ b/components/ProofingModal.tsx
@@ -181,7 +181,7 @@ export function ProofingModal() {
                 padding: '0.75rem 1rem',
                 borderRadius: 'var(--radius-sm, 6px)',
                 background: 'var(--accent, #e60012)',
-                color: '#fff',
+                color: 'var(--on-accent, #fff)',
                 border: 'none',
                 fontWeight: 500,
                 cursor: selectedCount === 0 ? 'not-allowed' : 'pointer',
diff --git a/components/SetupScreen.tsx b/components/SetupScreen.tsx
index d7c68af..e4e4bea 100644
--- a/components/SetupScreen.tsx
+++ b/components/SetupScreen.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Link from 'next/link';
 
 export function SetupScreen() {
   return (
@@ -46,17 +47,17 @@ export function SetupScreen() {
           }}
         >
           <p style={{ marginBottom: '1rem' }}>
-            The quickest way is the setup wizard at <code>/install</code>. It is gated by a one-time
-            token printed to the server log at startup (<code>docker logs</code>) — append it as{' '}
-            <code>?token=…</code>.
+            The quickest way is the setup wizard at <Link href="/install">/install</Link>. It is
+            gated by a one-time token printed to the server log at startup (<code>docker logs</code>
+            ) — append it as <code>?token=…</code>.
           </p>
           <p style={{ marginBottom: '1rem' }}>
             Or configure it by hand, in your repository or mounted <code>content/</code> volume:
           </p>
           <ol style={{ margin: 0, paddingLeft: '1.25rem' }}>
             <li style={{ marginBottom: '0.5rem' }}>
-              Copy <code>.env.example</code> to <code>.env.local</code> and fill in your Immich API
-              URL and Key
+              Copy <code>.env.local.example</code> to <code>.env.local</code> and fill in your
+              Immich API URL and Key
             </li>
             <li style={{ marginBottom: '0.5rem' }}>
               Copy <code>settings.yaml.example</code> to <code>settings.yaml</code>
diff --git a/content/settings.yaml.example b/content/settings.yaml.example
index 250746c..ba38481 100644
--- a/content/settings.yaml.example
+++ b/content/settings.yaml.example
@@ -6,7 +6,7 @@
 title: "My Portfolio"
 subtitle: "A visual journal"
 
-# Interface language of the visitor-facing site: "en" or "de".
+# Interface language of the visitor-facing site: "en", "de", "fr", "es", "it" or "nl".
 # Any other value still sets <html lang> and date formatting, but the
 # interface stays English. The admin panel is always English.
 lang: "en"
@@ -111,16 +111,39 @@ footer:
   email: "hello@example.com"
   website: "https://example.com"
 
+# ── Privacy policy ───────────────────────────────────────────────
+# The text lives in content/privacy.md, written in the admin panel under
+# Settings → Legal. /privacy is shown, and linked in the footer, while this is
+# on (the default) and the file has text.
+# privacy:
+#   enabled: false
+
+# ── Contact form ─────────────────────────────────────────────────
+# A form at /contact. Messages are stored in content/messages/ and read in
+# the admin panel under Messages; no mail is sent. With the Impressum on and
+# no legal.contactUrl, the Impressum links this form as its second channel.
+contact:
+  enabled: false
+  # A fixed "new message" push, with nothing about the sender.
+  # Pick a topic nobody can guess. CONTACT_NOTIFY_URL overrides this.
+  # notifyUrl: "https://ntfy.sh/your-secret-topic"
+  retentionDays: 90 # messages are deleted after this many days
+
 # ── Legal / Impressum (German Law compliance) ────────────────────
 # If enabled: true, a link to /impressum will appear in the footer.
 legal:
   enabled: false
+  # heading: "Angaben gemäß § 5 ECG"  # replaces the default "§ 5 DDG" line
   name: "Your Full Name"
   address: "Street and House Number"
   zipCity: "ZIP Code and City"
   country: "Germany"
   email: "legal@example.com"
   phone: "+49 123 456789"
-  # taxId: "DE123456789"
-  # vatId: "12/345/67890"
+  # A contact form counts as the second contact channel next to email, so
+  # phone can be left out. Only http(s) URLs are accepted.
+  # contactUrl: "https://example.com/contact"
+  # contactLabel: "Contact form"
+  # vatId: "DE123456789"
+  # taxId: "12/345/67890"
   extraInfo: "Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV: Max Mustermann"
diff --git a/docs/admin-panel.md b/docs/admin-panel.md
index 7d38106..cda424a 100644
--- a/docs/admin-panel.md
+++ b/docs/admin-panel.md
@@ -45,8 +45,13 @@ Each area has its own URL, so a section can be bookmarked and the browser's back
 
 Unsaved changes raise a save bar pinned to the bottom of the viewport, so the Save button is reachable without scrolling back up. Saving applies immediately — no server restart.
 
+## Overview
+
+`/admin` opens on the overview: what needs attention (unread messages, doctor warnings and errors, each linking to where it is fixed), the site at a glance (published pages, hero photos, journal entries and drafts, views in the last seven days) and a few quick actions. Navigation sits in a sidebar grouped into Content, Visitors, Site and System; View site, Backups, Reload and Sign out are at its foot. See [the UX concept](admin-ux-concept.md) for where this is going.
+
 ## Pages
 
+The page builder has two columns: on the left the whole structure (home page hero, every subpage with its cover, state and album count, standalone albums), always visible and drag-sortable; on the right the selected entry, edited in place. A subpage's panel switches between **Edit** and **Live preview** in its header.
 A visual tree of your gallery structure. Each item opens a slide-over drawer with its settings.
 
 ### Hero Images
@@ -111,7 +116,7 @@ Eight sections, each at its own URL (`/admin/settings/theme`, …):
 | **Theme**                 | Preset, colour mode, accent, photo frame, hero style, grain, header dot                                                             |
 | **Grid**                  | Layout algorithm, columns, gap, aspect ratio                                                                                        |
 | **Footer**                | Name, Instagram, email, website, and the header navigation links                                                                    |
-| **Legal**                 | Impressum toggle and all legal fields                                                                                               |
+| **Legal**                 | Impressum toggle and all legal fields, the contact form and its notification, the privacy policy                                    |
 | **SEO**                   | Meta title, subpage title template, description, noindex, nofollow                                                                  |
 | **Security & Protection** | Right-click and image-drag deterrents, lightbox watermark (text, position, opacity)                                                 |
 | **About**                 | Portrait asset, name, location, gear list, and the biography — written to `content/about.md`                                        |
@@ -126,6 +131,22 @@ Theme presets, grid layouts, photo frames, hero styles and the Google search sni
 
 View counts per page and album, read from `content/analytics.json`. No cookies, no third party, nothing leaving your server. Switch the collection off entirely in **Settings → General**; the tracking endpoint then refuses to record.
 
+## Privacy Policy
+
+**Settings → Legal → Privacy Policy** edits `content/privacy.md`, shown at `/privacy` and linked in the footer once it has text. It is Markdown: `##` headings, `-` lists, `**bold**` and links.
+
+Folio writes no legal text for you. Next to the editor it lists **what this site processes**, read off your configuration: where photos and fonts come from, whether the map, visitor statistics, the contact form, password cookies or a CDN are in use, and which of them involve a third party. **Insert headings** adds the section headings that list implies, and nothing else. Earlier versions are kept under **Backups**, like the About page.
+
+Diagnostics warns while the Impressum is on and there is no privacy policy.
+
+## Messages
+
+The inbox of the contact form at `/contact`, switched on under **Settings → Legal**. Each message is a file in `content/messages/` and is deleted automatically after the retention period (90 days unless set otherwise). Opening a message marks it read; **Reply by email** opens your own mail client with the sender's address and the message quoted, since Folio sends no mail itself.
+
+To hear about new messages, set a **Notification URL**. Folio POSTs a fixed "A new message arrived" to it, with nothing about the sender: no name, no address, no text. So no personal data reaches the push service. That fits [ntfy](https://ntfy.sh): install the app, subscribe to a topic name nobody can guess, and paste `https://ntfy.sh/<topic>` (or the URL of your own ntfy server). Any other endpoint that accepts a plain-text POST works too. `CONTACT_NOTIFY_URL` in the environment overrides the field. Without a notification, the Diagnostics page warns: a contact channel nobody reads does not count as one.
+
+Spam protection works without a captcha: a hidden field only bots fill in, a minimum time between opening the form and sending it, three messages a minute per IP, and a cap of 500 stored messages. At the cap new messages are refused rather than old ones dropped.
+
 ## Album & Asset Pickers
 
 **Album Picker** — a modal listing **all shared albums** from your Immich instance, not just the configured ones:
diff --git a/docs/admin-ux-concept.md b/docs/admin-ux-concept.md
new file mode 100644
index 0000000..0c95d3b
--- /dev/null
+++ b/docs/admin-ux-concept.md
@@ -0,0 +1,69 @@
+# Admin UX concept
+
+A proposal for reworking the admin panel so it reads as calmly as the portfolio it edits. This document is the plan; the pull request that adds it implements the first stage (shell, overview, visual language) so there is something to look at.
+
+## What is wrong today
+
+Seen on a real install (Studio Modern preset):
+
+- **The header is doing too much.** Seven tabs, a status pill and four buttons share one row. Navigation, global actions and system state compete, and nothing says which of them matters.
+- **Red means everything.** The admin inherits the preset accent, and every switched-on card gets a thick accent border. On Studio Modern a settings page is a wall of red frames, so the colour no longer marks the one thing that needs attention.
+- **There is no starting point.** `/admin` redirects to the page builder. Unread messages, a failing Immich connection or a missing privacy policy are only found by visiting the right tab.
+- **Pages do not share a layout.** Settings has a sidebar, Analytics a centred column, Diagnostics its own grid. Titles, descriptions and actions sit in a different place on each.
+- **It does not look like the site.** The portfolio has a clear typographic voice: Archivo for text, IBM Plex Mono in uppercase for labels, square red markers, hairline rules. The admin uses a generic system font and rounded cards.
+
+## Principles
+
+1. **The photographs are the loudest thing.** The chrome is monochrome. Colour is reserved for state.
+2. **One accent, few uses.** The preset accent marks exactly three things: the current place (the nav marker), the primary action on a screen, and switches that are on. Everything else is grey. Warnings stay amber and errors red, independent of the preset (as `--admin-warning` already does).
+3. **The same frame everywhere.** Every screen has a page header (kicker, title, one sentence, actions on the right) and content below it at one maximum width.
+4. **Say what needs attention before it is asked for.** The overview surfaces unread messages, health and gaps; the nav carries counts.
+5. **Borrow the site's voice.** Headings and body in the site's own fonts, labels in its caption font, uppercase and letter-spaced, as on the public pages.
+
+## Information architecture
+
+A left sidebar replaces the tab row, grouped by what the owner is doing:
+
+| Group    | Entries                             |
+| -------- | ----------------------------------- |
+| —        | **Overview** (new)                  |
+| Content  | Pages · Journal                     |
+| Visitors | Messages (unread count) · Analytics |
+| Site     | Settings                            |
+| System   | Diagnostics (health dot) · Help     |
+
+Global actions move out of the header into the sidebar foot: _View site_, _Backups_, _Reload_, _Sign out_, plus the version. The header row disappears; each screen's own header takes its place.
+
+### Overview (`/admin`)
+
+The first screen after signing in. Everything on it is a link to where it is acted on:
+
+- **Needs attention**: unread messages, a doctor warning or error, a missing privacy policy. Empty when there is nothing, with a single calm line saying so.
+- **At a glance**: pages published, journal entries (drafts), photos on the home page hero, views in the last 7 days.
+- **Quick actions**: new journal entry, edit pages, open the site.
+
+## Visual language
+
+| Token   | Today                                   | Proposed                                                                                |
+| ------- | --------------------------------------- | --------------------------------------------------------------------------------------- |
+| Surface | #111 / #1a1a1a cards with 12px radius   | #0c0c0c canvas, #141414 panels, 4px radius                                              |
+| Borders | 1px #2e2e2e, 2px accent on active cards | 1px hairline everywhere; active cards keep the hairline, their switch carries the state |
+| Type    | system UI font                          | the site's `--font-sans`; labels in `--font-caption`, uppercase, 0.12em tracking        |
+| Accent  | on borders, icons, headings, switches   | nav marker, primary button, on-switches                                                 |
+| Density | 36px controls, mixed spacing            | 36px controls, an 8px spacing scale                                                     |
+
+Light mode follows the same rules with inverted surfaces.
+
+## Stages
+
+1. **Shell, overview, visual language** (this PR): sidebar with groups and counts, `/admin` overview, tokens and typography, calmer cards. No screen's behaviour changes.
+2. **Page headers**: one `PageHeader` component on every screen; remove the per-screen title variants.
+3. **Forms**: one field, switch and dialog pattern (#694); replaces `confirm()` with an inline confirmation.
+4. **Page builder** (done): the structure (hero, subpages, standalone albums) as an always-visible list on the left, the selected entry edited in a panel on the right instead of an overlay, with Edit / Live preview in the panel header. Builds on the split in #608.
+5. **Mobile**: the sidebar collapses into a sheet; not a priority for how the panel is used today, but the grid should not break.
+
+## Not changing
+
+- The admin stays English (see `docs/gallery-config.md`).
+- Folio stays a read-only Immich client; nothing in this plan writes to Immich.
+- The live preview in the page builder stays; it is how the owner checks changes.
diff --git a/docs/deployment.md b/docs/deployment.md
index c0986a1..a543c46 100644
--- a/docs/deployment.md
+++ b/docs/deployment.md
@@ -17,6 +17,7 @@ For the quick path — clone, `npm run dev`, open `/install` — see the
 - [Config Doctor](#config-doctor)
 - [Behaviour when Immich is Unreachable](#behaviour-when-immich-is-unreachable)
 - [Reverse Proxy](#reverse-proxy)
+- [CDN Mode](#cdn-mode)
 
 ## What the Setup Wizard Writes
 
@@ -43,7 +44,8 @@ server, so a typo cannot leave you with an "installed" site that loads no photos
 `IMMICH_API_URL`, `IMMICH_API_KEY`, `AUTH_SECRET` and `ADMIN_PASSWORD` override
 anything in `install.json`, so any of them can be rotated by setting the variable
 — no need to touch the file. `SITE_PASSWORD` works the same way over
-`sitePassword` in `settings.yaml`.
+`sitePassword` in `settings.yaml`, and so does `CONTACT_NOTIFY_URL` over
+`contact.notifyUrl`.
 
 Set all of them up front and the wizard never appears, which is the usual choice
 for an infrastructure-as-code deployment.
@@ -112,7 +114,9 @@ Checks an installation from the terminal and prints what it finds: whether
 `settings.yaml` parse, whether Immich answers the three calls Folio depends on,
 whether every published album ID still exists in Immich (and is shared there),
 whether any password is still stored in plaintext or as an unusable bcrypt
-hash, and whether `content/` can be written to.
+hash, whether an enabled Impressum has a name, address, email and a second
+contact channel, whether the contact form notifies anyone, and whether
+`content/` can be written to.
 
 This is the same set of checks as the **Diagnostics** page in `/admin`, but it
 needs neither a running app nor an admin password — which is the point. It is
@@ -200,3 +204,59 @@ and Traefik send it on their own; nginx needs the
 Opening the app over plain HTTP, e.g. `http://server:7211` on a home network,
 works too: the cookies are then set without `Secure`, since a browser would
 discard them otherwise.
+
+## CDN Mode
+
+With `CDN_URL` set, every photo and video URL on the site points at a pull CDN
+instead of this server:
+
+```env
+CDN_URL=https://cdn.example.com
+```
+
+```
+https://cdn.example.com/api/image/v2:…?size=preview&w=1080&q=75
+```
+
+The CDN uses Immich Folio as its origin. The first request for a photo is a
+cache miss and goes to `/api/image` as usual; every request after that is
+answered by the CDN and never reaches your server or the Immich box behind it.
+On a home connection with a slow uplink, that is the difference between a
+gallery that crawls and one that does not.
+
+**Setting up the CDN.** Create a pull zone (Bunny), a distribution
+(CloudFront) or a CNAME'd subdomain (Cloudflare) whose origin is your public
+Folio URL, then:
+
+- **Cache `/api/image/*` and `/api/video/*`**, and nothing else. Pages are
+  rendered per request, and other routes check cookies.
+- **Include the full query string in the cache key.** `size`, `w`, `q` and the
+  `IMAGE_CACHE_VERSION` buster `v` all select a different file.
+- **Respect the origin's `Cache-Control`.** Photos come back
+  `public, max-age=31536000, immutable`; errors (429, 503, 404) come back
+  `no-store` and must not be cached.
+- **Forward `Range` requests** for videos, so seeking works.
+
+**Rate limiting.** A cache miss arrives from a CDN edge, not from the visitor.
+Set `TRUSTED_PROXY_HOPS` to count the CDN as a proxy (Cloudflare → Caddy = 2)
+so the limiter reads the visitor's IP from `X-Forwarded-For`; otherwise a
+handful of edges share one bucket. The [Config Doctor](#config-doctor) warns
+when CDN mode is on with `TRUSTED_PROXY_HOPS=0`.
+
+**What stays on this server:** pages, `/_next` assets, EXIF, the map,
+downloads, the admin panel and the Open Graph images. These are either small or
+carry a cookie check a CDN would bypass.
+
+**Site passwords switch it off.** On a password-protected site, the image
+route checks the visitor's unlock cookie, and a CDN would answer from its cache
+without asking. So while a site password is set, photos stay on this server
+whatever `CDN_URL` says, and the diagnostics page says so. Gallery (per-page)
+passwords are unaffected: they already protect the page that holds the photo
+links, not the image URLs themselves.
+
+**Changing a photo.** A CDN keeps immutable responses for as long as a browser
+does. Bump `IMAGE_CACHE_VERSION` after regenerating thumbnails in Immich, which
+changes every URL at once, or purge the CDN.
+
+The Content-Security-Policy allows the CDN's origin for `img-src` and
+`media-src` automatically.
diff --git a/docs/gallery-config.md b/docs/gallery-config.md
index 77bc36e..82862b5 100644
--- a/docs/gallery-config.md
+++ b/docs/gallery-config.md
@@ -285,8 +285,10 @@ Three storage formats are accepted:
 
 To get the hash for an existing plaintext password, unlock the gallery once and
 read the server log: the successful unlock prints the matching `scrypt:…` line
-to paste back into `gallery.yaml`. The admin panel writes the hashed form
-directly.
+to paste back into `gallery.yaml`. Simpler: open the page or album in the
+admin panel and save it once. Every password saved there is stored as a
+`scrypt:…` hash, and the field then reads **Protected** with **Change** and
+**Remove** instead of showing the stored value.
 
 > [!NOTE]
 > Album and subpage gates protect the **page**. Image URLs handed out while a
@@ -533,18 +535,26 @@ lightbox, the password gate, the proofing dialog, the legal notice, error pages
 | ----- | ----------------- |
 | `en`  | English (default) |
 | `de`  | German            |
+| `fr`  | French            |
+| `es`  | Spanish           |
+| `it`  | Italian           |
+| `nl`  | Dutch             |
 
-Any other value (`fr`, `ja`, …) still reaches `<html lang>` and
+Region subtags are accepted and dropped for the interface (`fr-CA` → French,
+`nl-BE` → Dutch), while the full value still reaches `<html lang>`.
+
+Any other value (`ja`, `pt`, …) still reaches `<html lang>` and
 `toLocaleDateString`, but the interface stays English: there is no dictionary
 for it yet. That is deliberate — claiming `lang="en"` on a French site would be
 worse for screen readers than an English interface on a page correctly marked
-as French.
+as Japanese.
 
 Two things stay in one language by design:
 
 - **The admin panel** is always English, whatever `lang` says.
-- **`/impressum`** keeps its German headings when `lang: de` and the § 5 TMG
-  citation in both, because that is what the statute names. Under `lang: en`
+- **`/impressum`** keeps its German headings when `lang: de` and the § 5 DDG
+  citation in every language, because that is what the statute names
+  (`legal.heading` replaces it where another law applies). Under `lang: en`
   the footer link reads "Legal Notice" rather than "Impressum" — the page is
   optional (`legal.enabled`), and an unexplained German word in the footer of
   an English site is what drove this out of the backlog.
@@ -553,7 +563,12 @@ Adding a language means adding one file under `lib/i18n/locales/` and listing
 it in `SUPPORTED_LOCALES` (`lib/i18n/index.ts`). The dictionary is typed
 against the English one, so a missing key fails the type-check rather than
 falling back silently, and `lib/__tests__/i18n.test.ts` additionally catches
-keys that were copied over but never translated.
+keys that were copied over but never translated. Words a language genuinely
+shares with English (`ISO`, `Info`, French "photos") go into that locale's
+allowance list in the same test, which in turn fails if an entry stops being
+identical. Add the language to the **Language** select in
+`app/admin/components/SettingsEditor.tsx` so it can be picked from the admin
+panel.
 
 ### Analytics
 
@@ -678,6 +693,28 @@ footer:
 A `legal:` block with `enabled: true` adds an Impressum page at `/impressum` and
 links it in the footer — see `content/settings.yaml.example` for every field.
 
+Email, phone and `contactUrl` render as links. `contactUrl` is a second contact
+channel such as a contact form, which case law accepts in place of a phone
+number; it takes http(s) URLs only and is dropped with a warning otherwise.
+`heading` replaces the "Angaben gemäß § 5 DDG" line, e.g. for § 5 ECG in Austria.
+
+A privacy policy is written in the admin panel and stored in
+`content/privacy.md`; `/privacy` shows it and the footer links it once the file
+has text. `privacy: { enabled: false }` hides it without deleting the file. See
+[Privacy Policy](admin-panel.md#privacy-policy).
+
+A `contact:` block with `enabled: true` adds a contact form at `/contact` and
+links it in the footer. Messages stay on the server (`content/messages/`) and
+are read in the admin panel; see [Messages](admin-panel.md#messages). While the
+Impressum has no `contactUrl`, it links this form as the second contact channel.
+
+```yaml
+contact:
+  enabled: true
+  notifyUrl: https://ntfy.sh/your-secret-topic # optional push for new messages
+  retentionDays: 90 # delete messages after this many days
+```
+
 ## About Page
 
 Create `content/about.md` with YAML frontmatter:
diff --git a/docs/journal.md b/docs/journal.md
index 08314b7..db1d77b 100644
--- a/docs/journal.md
+++ b/docs/journal.md
@@ -260,9 +260,10 @@ A `password` in the frontmatter puts the entry behind the same gate used for
 subpages and albums. The unlock cookie is `lb_auth_journal_<slug>` and expires
 after 24 hours.
 
-Store a hash rather than the plaintext where possible — the `scrypt:salt:hash`
-format described in [Gallery Configuration](gallery-config.md) applies here too.
-A plaintext password works but is logged as a warning at startup.
+A password set in Journal Studio is stored as a `scrypt:salt:hash`, never as
+typed. For hand-written frontmatter the same format described in
+[Gallery Configuration](gallery-config.md) applies. A plaintext password works
+but is logged as a warning.
 
 ## Journal Studio
 
diff --git a/docs/theming.md b/docs/theming.md
index b3a119f..8d658d4 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -111,12 +111,16 @@ The brand color used for hover effects, navigation highlights, the header dot, a
 
 ### `fonts`
 
-Google Fonts names. Fonts are loaded automatically — just use the name as it appears on [fonts.google.com](https://fonts.google.com). Three font slots:
+Google Fonts names, as they appear on [fonts.google.com](https://fonts.google.com). Three font slots:
 
 - **heading** — album titles, hero title, section labels
 - **body** — navigation, descriptions, UI text
 - **caption** — EXIF metadata, photo captions
 
+Visitors never contact Google. The server fetches the stylesheet and the font files on first use, keeps them in `content/.fonts/` and serves them from your own domain through `/api/fonts`. Loading Google Fonts straight from Google sends every visitor's IP address there without consent, which a German court ruled unlawful in 2022.
+
+The server therefore needs outbound HTTPS to `fonts.googleapis.com` and `fonts.gstatic.com` the first time a font is used. Once cached, the fonts keep working without it. If Google cannot be reached before that, the page falls back to the system fonts until it can.
+
 ### `radius`
 
 Border radius in pixels applied to photo grid items and album cards:
diff --git a/e2e/admin-smoke.spec.ts b/e2e/admin-smoke.spec.ts
index 5c271e3..4406952 100644
--- a/e2e/admin-smoke.spec.ts
+++ b/e2e/admin-smoke.spec.ts
@@ -25,12 +25,13 @@ const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || 'e2e-admin-password';
  * empty shell would still pass.
  */
 const ROUTES: { path: string; content: string; name: string }[] = [
-  { path: '/admin', content: '.page-builder', name: 'dashboard' },
+  { path: '/admin', content: '.admin-overview', name: 'overview' },
   { path: '/admin/pages', content: '.page-builder', name: 'pages' },
   { path: '/admin/journal', content: '.journal-studio', name: 'journal' },
   // AnalyticsView falls back to .admin-panel when the analytics API is
   // unreachable, which is the normal case without a live Immich behind it.
   { path: '/admin/analytics', content: '.analytics-view, .admin-panel', name: 'analytics' },
+  { path: '/admin/messages', content: '.messages-view, .admin-load-error', name: 'messages' },
   { path: '/admin/help', content: '.settings-panel', name: 'help' },
   { path: '/admin/settings', content: '.settings-editor', name: 'settings' },
   ...['general', 'theme', 'grid', 'footer', 'legal', 'seo', 'security', 'about'].map((id) => ({
@@ -80,7 +81,7 @@ test('every admin route renders without throwing', async ({ page }) => {
 
   await page.fill('input[type="password"]', ADMIN_PASSWORD);
   await page.click('button[type="submit"]');
-  await expect(page.locator('.page-builder')).toBeVisible({ timeout: 15_000 });
+  await expect(page.locator('.admin-overview')).toBeVisible({ timeout: 15_000 });
 
   // One test walking every route rather than one test each: the routes share a
   // login, and expect.soft keeps a broken route from hiding the ones after it.
diff --git a/lib/__tests__/cdn.test.ts b/lib/__tests__/cdn.test.ts
new file mode 100644
index 0000000..034c7ea
--- /dev/null
+++ b/lib/__tests__/cdn.test.ts
@@ -0,0 +1,110 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+const config = { authSecret: 'test-auth-secret-32-chars-long-min', sitePassword: '' };
+
+vi.mock('@/lib/config', () => ({
+  getConfig: () => config,
+  getConfigOrNull: () => config,
+}));
+
+const ASSET = '11111111-1111-1111-1111-111111111111';
+
+describe('normalizeCdnUrl', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.unstubAllEnvs();
+  });
+
+  async function normalize(raw: string | undefined) {
+    const { normalizeCdnUrl } = await import('@/lib/env');
+    return normalizeCdnUrl(raw);
+  }
+
+  it('keeps an https origin and drops the trailing slash', async () => {
+    expect(await normalize('https://cdn.example.net/')).toBe('https://cdn.example.net');
+  });
+
+  it('keeps a path prefix', async () => {
+    expect(await normalize(' https://cdn.example.net/folio// ')).toBe(
+      'https://cdn.example.net/folio',
+    );
+  });
+
+  it('rejects what cannot prefix a path', async () => {
+    expect(await normalize('')).toBe('');
+    expect(await normalize(undefined)).toBe('');
+    expect(await normalize('cdn.example.net')).toBe('');
+    expect(await normalize('ftp://cdn.example.net')).toBe('');
+    expect(await normalize('https://cdn.example.net/?x=1')).toBe('');
+    expect(await normalize('https://cdn.example.net/#top')).toBe('');
+    expect(await normalize('https://user:pw@cdn.example.net')).toBe('');
+  });
+});
+
+describe('CDN mode', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.unstubAllEnvs();
+    config.sitePassword = '';
+  });
+
+  async function load() {
+    const urls = await import('@/lib/urls');
+    const cdn = await import('@/lib/cdn');
+    return { ...urls, ...cdn };
+  }
+
+  it('keeps URLs relative without CDN_URL', async () => {
+    const { imageUrl, videoUrl, cdnOrigin } = await load();
+    expect(imageUrl(ASSET)).toMatch(/^\/api\/image\/[^?]+\?size=preview$/);
+    expect(videoUrl(ASSET)).toMatch(/^\/api\/video\/[^?]+$/);
+    expect(cdnOrigin()).toBeNull();
+  });
+
+  it('puts images and videos on the CDN', async () => {
+    vi.stubEnv('CDN_URL', 'https://cdn.example.net/folio/');
+    const { imageUrl, videoUrl, exifUrl, downloadUrl, cdnOrigin } = await load();
+
+    expect(imageUrl(ASSET, 'thumbnail')).toMatch(
+      /^https:\/\/cdn\.example\.net\/folio\/api\/image\/[^?]+\?size=thumbnail$/,
+    );
+    expect(videoUrl(ASSET)).toMatch(/^https:\/\/cdn\.example\.net\/folio\/api\/video\//);
+    expect(cdnOrigin()).toBe('https://cdn.example.net');
+
+    // Routes that check cookies or are not cacheable stay on this host.
+    expect(exifUrl(ASSET)).toMatch(/^\/api\/exif\//);
+    expect(downloadUrl('album', ASSET)).toMatch(/^\/api\/download\//);
+  });
+
+  it('keeps the cache buster on CDN URLs', async () => {
+    vi.stubEnv('CDN_URL', 'https://cdn.example.net');
+    vi.stubEnv('IMAGE_CACHE_VERSION', '7');
+    const { imageUrl } = await load();
+    expect(imageUrl(ASSET)).toMatch(/^https:\/\/cdn\.example\.net\/api\/image\/.+&v=7$/);
+  });
+
+  it('stays off while a site password is set, and follows it at runtime', async () => {
+    vi.stubEnv('CDN_URL', 'https://cdn.example.net');
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const { imageUrl, cdnOrigin } = await load();
+
+    config.sitePassword = 'secret';
+    expect(imageUrl(ASSET)).toMatch(/^\/api\/image\//);
+    // The policy still allows the origin; it just goes unused.
+    expect(cdnOrigin()).toBe('https://cdn.example.net');
+    expect(warn).toHaveBeenCalledTimes(1);
+
+    config.sitePassword = '';
+    expect(imageUrl(ASSET)).toMatch(/^https:\/\/cdn\.example\.net\/api\/image\//);
+    warn.mockRestore();
+  });
+
+  it('ignores an invalid CDN_URL', async () => {
+    vi.stubEnv('CDN_URL', 'not a url');
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const { imageUrl, cdnOrigin } = await load();
+    expect(imageUrl(ASSET)).toMatch(/^\/api\/image\//);
+    expect(cdnOrigin()).toBeNull();
+    warn.mockRestore();
+  });
+});
diff --git a/lib/__tests__/config.test.ts b/lib/__tests__/config.test.ts
index 893432d..cde930b 100644
--- a/lib/__tests__/config.test.ts
+++ b/lib/__tests__/config.test.ts
@@ -19,6 +19,8 @@ import {
   normalizeSlug,
   buildSubpageGrid,
   sanitizeNavLinks,
+  resolveLegal,
+  resolveContact,
 } from '@/lib/config';
 
 // EXPERIMENTAL: external navigation links — rendered as <a href> in the
@@ -52,6 +54,71 @@ describe('sanitizeNavLinks', () => {
   });
 });
 
+// legal.contactUrl lands in an <a href> on /impressum, so it gets the
+// navLinks rule: http(s) or nothing.
+describe('resolveLegal', () => {
+  it('keeps an http(s) contact URL and its label', () => {
+    const legal = resolveLegal({
+      enabled: true,
+      contactUrl: ' https://example.com/contact ',
+      contactLabel: 'Write to me',
+    });
+    expect(legal.contactUrl).toBe('https://example.com/contact');
+    expect(legal.contactLabel).toBe('Write to me');
+  });
+
+  it('drops a contact URL with any other scheme', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    for (const contactUrl of ['javascript:alert(1)', 'data:text/html,x', 'example.com/contact']) {
+      expect(resolveLegal({ contactUrl }).contactUrl).toBeUndefined();
+    }
+    expect(warn).toHaveBeenCalledTimes(3);
+    warn.mockRestore();
+  });
+
+  it('turns blank optional fields into undefined so the page can skip them', () => {
+    const legal = resolveLegal({ heading: '  ', email: '', phone: ' ', vatId: '' });
+    expect(legal.heading).toBeUndefined();
+    expect(legal.email).toBeUndefined();
+    expect(legal.phone).toBeUndefined();
+    expect(legal.vatId).toBeUndefined();
+  });
+
+  it('is disabled unless enabled is literally true', () => {
+    expect(resolveLegal(undefined).enabled).toBe(false);
+    expect(resolveLegal({ name: 'Ralf' }).enabled).toBe(false);
+  });
+});
+
+describe('resolveContact', () => {
+  it('is off with a 90-day retention by default', () => {
+    expect(resolveContact(undefined)).toEqual({
+      enabled: false,
+      notifyUrl: undefined,
+      retentionDays: 90,
+    });
+  });
+
+  it('lets CONTACT_NOTIFY_URL override the settings value', () => {
+    expect(
+      resolveContact({ enabled: true, notifyUrl: 'https://a.example/x' }, 'https://b.example/y')
+        .notifyUrl,
+    ).toBe('https://b.example/y');
+  });
+
+  it('drops a notify URL that is not http(s)', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    expect(resolveContact({ notifyUrl: 'javascript:alert(1)' }).notifyUrl).toBeUndefined();
+    warn.mockRestore();
+  });
+
+  it('clamps the retention period', () => {
+    expect(resolveContact({ retentionDays: 0 }).retentionDays).toBe(1);
+    expect(resolveContact({ retentionDays: 10_000 }).retentionDays).toBe(365);
+    expect(resolveContact({ retentionDays: 'soon' as unknown as number }).retentionDays).toBe(90);
+  });
+});
+
 describe('slugify', () => {
   it('converts a simple name to lowercase with hyphens', () => {
     expect(slugify('Kloster Chorin')).toBe('kloster-chorin');
diff --git a/lib/__tests__/contact.test.ts b/lib/__tests__/contact.test.ts
new file mode 100644
index 0000000..7b90aae
--- /dev/null
+++ b/lib/__tests__/contact.test.ts
@@ -0,0 +1,175 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import {
+  MAX_MESSAGES,
+  MIN_FILL_MS,
+  deleteMessage,
+  listMessages,
+  notifyNewMessage,
+  saveMessage,
+  setRead,
+  validateContact,
+} from '../contact';
+
+const NOW = 1_800_000_000_000;
+const DAY = 24 * 60 * 60 * 1000;
+const valid = {
+  name: 'Ada',
+  email: 'ada@example.com',
+  message: 'Hello there',
+  website: '',
+  startedAt: NOW - 10_000,
+};
+
+describe('validateContact', () => {
+  it('accepts a normal submission and trims it', () => {
+    expect(validateContact({ ...valid, name: '  Ada\nLovelace ' }, NOW)).toEqual({
+      ok: true,
+      name: 'Ada Lovelace',
+      email: 'ada@example.com',
+      message: 'Hello there',
+    });
+  });
+
+  it('treats a filled honeypot as spam', () => {
+    expect(validateContact({ ...valid, website: 'http://spam' }, NOW)).toEqual({
+      ok: false,
+      reason: 'spam',
+    });
+  });
+
+  it('treats a form sent faster than a person types as spam', () => {
+    expect(validateContact({ ...valid, startedAt: NOW - MIN_FILL_MS + 1 }, NOW).ok).toBe(false);
+    expect(validateContact({ ...valid, startedAt: undefined }, NOW)).toEqual({
+      ok: false,
+      reason: 'spam',
+    });
+  });
+
+  it('rejects a missing field or a malformed email as invalid', () => {
+    expect(validateContact({ ...valid, name: ' ' }, NOW)).toEqual({ ok: false, reason: 'invalid' });
+    expect(validateContact({ ...valid, email: 'not-an-email' }, NOW).ok).toBe(false);
+    expect(validateContact({ ...valid, email: 'a@b.c\r\nBcc: x@y.z' }, NOW).ok).toBe(false);
+    expect(validateContact({ ...valid, message: 'x'.repeat(5001) }, NOW).ok).toBe(false);
+  });
+});
+
+describe('message storage', () => {
+  let cwd: string;
+
+  beforeEach(() => {
+    cwd = fs.mkdtempSync(path.join(os.tmpdir(), 'folio-contact-'));
+    vi.spyOn(process, 'cwd').mockReturnValue(cwd);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    fs.rmSync(cwd, { recursive: true, force: true });
+  });
+
+  const fields = { name: 'Ada', email: 'ada@example.com', message: 'Hi' };
+
+  it('stores a message unread and lists newest first', async () => {
+    await saveMessage(fields, 90, NOW - 1000);
+    const second = await saveMessage({ ...fields, name: 'Grace' }, 90, NOW);
+    const list = await listMessages(90, NOW);
+    expect(list.map((m) => m.name)).toEqual(['Grace', 'Ada']);
+    expect(list[0]).toMatchObject({ read: false, id: (second as { id: string }).id });
+  });
+
+  it('writes the file readable by the owner only', async () => {
+    const msg = (await saveMessage(fields, 90, NOW)) as { id: string };
+    const mode = fs.statSync(path.join(cwd, 'content', 'messages', `${msg.id}.json`)).mode;
+    expect(mode & 0o077).toBe(0);
+  });
+
+  it('deletes messages past the retention period when listing', async () => {
+    await saveMessage(fields, 90, NOW - 31 * DAY);
+    await saveMessage(fields, 90, NOW - DAY);
+    expect(await listMessages(30, NOW)).toHaveLength(1);
+    expect(fs.readdirSync(path.join(cwd, 'content', 'messages'))).toHaveLength(1);
+  });
+
+  it('refuses new messages at the cap instead of evicting old ones', async () => {
+    const dir = path.join(cwd, 'content', 'messages');
+    fs.mkdirSync(dir, { recursive: true });
+    for (let i = 0; i < MAX_MESSAGES; i++) {
+      const id = `${NOW - i}-${i.toString(16).padStart(8, '0')}`;
+      fs.writeFileSync(
+        path.join(dir, `${id}.json`),
+        JSON.stringify({
+          id,
+          receivedAt: '',
+          name: 'x',
+          email: 'x@y.z',
+          message: 'm',
+          read: false,
+        }),
+      );
+    }
+    expect(await saveMessage(fields, 90, NOW)).toBe('full');
+    expect(fs.readdirSync(dir)).toHaveLength(MAX_MESSAGES);
+  });
+
+  it('marks read and deletes by id, and ignores ids that could escape the directory', async () => {
+    const msg = (await saveMessage(fields, 90, NOW)) as { id: string };
+    expect(await setRead(msg.id, true)).toBe(true);
+    expect((await listMessages(90, NOW))[0].read).toBe(true);
+    expect(await deleteMessage('../settings')).toBe(false);
+    expect(await deleteMessage(msg.id)).toBe(true);
+    expect(await listMessages(90, NOW)).toEqual([]);
+  });
+});
+
+describe('notifyNewMessage', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it('posts nothing about the sender, so the push service gets no personal data', async () => {
+    const fetchMock = vi.fn(async () => new Response('ok'));
+    vi.stubGlobal('fetch', fetchMock);
+    await notifyNewMessage('https://ntfy.sh/topic', 'https://site.example/admin/messages');
+    const [url, init] = fetchMock.mock.calls[0] as unknown as [string, RequestInit];
+    expect(url).toBe('https://ntfy.sh/topic');
+    expect(init.body).toBe('A new message arrived through the contact form.');
+    expect((init.headers as Record<string, string>).Click).toBe(
+      'https://site.example/admin/messages',
+    );
+  });
+
+  it('does nothing without a URL and never throws on failure', async () => {
+    const fetchMock = vi.fn(async () => {
+      throw new Error('down');
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+    await notifyNewMessage(undefined, null);
+    expect(fetchMock).not.toHaveBeenCalled();
+    await expect(notifyNewMessage('https://ntfy.sh/t', null)).resolves.toBeUndefined();
+  });
+});
+
+describe('validateContact: email pattern', () => {
+  it('accepts ordinary addresses and rejects malformed ones', () => {
+    for (const email of ['a@b.de', 'first.last@mail.example.co.uk']) {
+      expect(validateContact({ ...valid, email }, NOW).ok).toBe(true);
+    }
+    for (const email of ['a@b', 'a@.de', 'a@b.', 'a@b..de', 'a b@c.de', 'a@@b.de']) {
+      expect(validateContact({ ...valid, email }, NOW).ok).toBe(false);
+    }
+  });
+
+  // CodeQL js/polynomial-redos: the old pattern backtracked polynomially on a
+  // domain of many dots. The limit keeps input short, and the pattern no
+  // longer has more than one way to match.
+  it('answers crafted input at once', () => {
+    const crafted = '!@!.' + '!.'.repeat(50_000);
+    const start = performance.now();
+    expect(validateContact({ ...valid, email: crafted }, NOW).ok).toBe(false);
+    expect(performance.now() - start).toBeLessThan(50);
+  });
+});
diff --git a/lib/__tests__/doctor.test.ts b/lib/__tests__/doctor.test.ts
index 57924d9..d4391fb 100644
--- a/lib/__tests__/doctor.test.ts
+++ b/lib/__tests__/doctor.test.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import {
+  checkCdn,
   checkAuthSecret,
   checkProxyHops,
   countForwardedHops,
@@ -9,6 +10,9 @@ import {
   checkPasswords,
   checkWritable,
   checkImmichCalls,
+  checkContact,
+  checkLegal,
+  checkPrivacy,
   worstLevel,
 } from '../admin/doctor';
 
@@ -305,3 +309,138 @@ describe('worstLevel', () => {
     ).toBe('error');
   });
 });
+
+describe('checkCdn', () => {
+  it('stays silent without CDN_URL', () => {
+    expect(checkCdn(undefined, false, 1)).toBeNull();
+  });
+
+  it('warns that a site password keeps photos off the CDN', () => {
+    const finding = checkCdn('https://cdn.example.net', true, 1)!;
+    expect(finding.level).toBe('warn');
+    expect(finding.detail).toMatch(/password/);
+  });
+
+  it('warns when the rate limiter would count CDN edges', () => {
+    const finding = checkCdn('https://cdn.example.net', false, 0)!;
+    expect(finding.level).toBe('warn');
+    expect(finding.title).toMatch(/TRUSTED_PROXY_HOPS/);
+  });
+
+  it('reports ok with a proxy chain configured', () => {
+    const finding = checkCdn('https://cdn.example.net', false, 2)!;
+    expect(finding.level).toBe('ok');
+    expect(finding.detail).toContain('https://cdn.example.net');
+  });
+});
+
+describe('checkLegal', () => {
+  const complete = {
+    enabled: true,
+    name: 'Ralf',
+    address: 'Street 1',
+    zipCity: '10247 Berlin',
+    email: 'mail@example.com',
+    contactUrl: 'https://example.com/contact',
+  };
+
+  it('returns nothing while the Impressum is switched off or absent', () => {
+    expect(checkLegal({ ...complete, enabled: false })).toBeNull();
+    expect(checkLegal(undefined)).toBeNull();
+  });
+
+  it('passes with name, address, email and a second channel', () => {
+    expect(checkLegal(complete)?.level).toBe('ok');
+    expect(checkLegal({ ...complete, contactUrl: undefined, phone: '+49 30 1' })?.level).toBe('ok');
+  });
+
+  it('names the missing address fields', () => {
+    const f = checkLegal({ ...complete, address: '', zipCity: ' ' })!;
+    expect(f.level).toBe('warn');
+    expect(f.detail).toContain('street address, ZIP and city');
+  });
+
+  it('asks for an email address', () => {
+    expect(checkLegal({ ...complete, email: undefined })!.detail).toContain('No email address');
+  });
+
+  it('flags email as the only contact channel', () => {
+    const f = checkLegal({ ...complete, contactUrl: undefined })!;
+    expect(f.level).toBe('warn');
+    expect(f.detail).toContain('only contact channel');
+  });
+
+  it('reports a contact URL the page drops, and does not count it as a channel', () => {
+    const f = checkLegal({ ...complete, contactUrl: 'javascript:alert(1)' })!;
+    expect(f.level).toBe('warn');
+    expect(f.title).toContain('2 gaps');
+    expect(f.detail).toContain('ignored');
+    expect(f.detail).toContain('only contact channel');
+  });
+
+  it('tolerates hand-edited YAML with the wrong types', () => {
+    const f = checkLegal({ ...complete, name: 42, email: ['a'] })!;
+    expect(f.level).toBe('warn');
+    expect(f.detail).toContain('Missing: name');
+  });
+});
+
+describe('checkLegal with the built-in contact form', () => {
+  const emailOnly = {
+    enabled: true,
+    name: 'Ralf',
+    address: 'Street 1',
+    zipCity: '10247 Berlin',
+    email: 'mail@example.com',
+  };
+
+  it('counts the form as the second contact channel', () => {
+    expect(checkLegal(emailOnly)?.level).toBe('warn');
+    expect(checkLegal(emailOnly, true)?.level).toBe('ok');
+  });
+});
+
+describe('checkContact', () => {
+  it('returns nothing while the form is off', () => {
+    expect(checkContact({ enabled: false })).toBeNull();
+    expect(checkContact(undefined)).toBeNull();
+  });
+
+  it('warns when nobody hears about new messages', () => {
+    expect(checkContact({ enabled: true })?.level).toBe('warn');
+  });
+
+  it('warns about a URL that is not http(s)', () => {
+    const f = checkContact({ enabled: true, notifyUrl: 'ntfy.sh/topic' })!;
+    expect(f.level).toBe('warn');
+    expect(f.title).toContain('ignored');
+  });
+
+  it('is satisfied by the settings value or by CONTACT_NOTIFY_URL', () => {
+    expect(checkContact({ enabled: true, notifyUrl: 'https://ntfy.sh/t' })?.level).toBe('ok');
+    expect(checkContact({ enabled: true }, 'https://ntfy.sh/t')?.level).toBe('ok');
+  });
+});
+
+describe('checkPrivacy', () => {
+  it('stays quiet on a site with no legal pages at all', () => {
+    expect(checkPrivacy({ legalEnabled: false, privacyEnabled: true, hasText: false })).toBeNull();
+  });
+
+  it('warns when the Impressum is on and there is no policy', () => {
+    const f = checkPrivacy({ legalEnabled: true, privacyEnabled: true, hasText: false })!;
+    expect(f.level).toBe('warn');
+    expect(f.detail).toContain('no text');
+  });
+
+  it('warns when the text exists but the page is switched off', () => {
+    const f = checkPrivacy({ legalEnabled: true, privacyEnabled: false, hasText: true })!;
+    expect(f.detail).toContain('switched off');
+  });
+
+  it('is satisfied by a published policy', () => {
+    expect(checkPrivacy({ legalEnabled: true, privacyEnabled: true, hasText: true })?.level).toBe(
+      'ok',
+    );
+  });
+});
diff --git a/lib/__tests__/emailObfuscation.test.ts b/lib/__tests__/emailObfuscation.test.ts
new file mode 100644
index 0000000..0c73e0b
--- /dev/null
+++ b/lib/__tests__/emailObfuscation.test.ts
@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { createElement } from 'react';
+import { renderToString } from 'react-dom/server';
+import { decodeEmail, encodeEmail, spelledOutEmail } from '../emailObfuscation';
+import EmailLink from '@/components/EmailLink';
+
+const ADDRESS = 'ralf.test+impressum@example.de';
+
+describe('email obfuscation', () => {
+  it('round-trips, including non-ASCII addresses', () => {
+    expect(decodeEmail(encodeEmail(ADDRESS))).toBe(ADDRESS);
+    expect(decodeEmail(encodeEmail('jürgen@müller.de'))).toBe('jürgen@müller.de');
+  });
+
+  it('leaves nothing a harvester would match in the encoded form', () => {
+    const encoded = encodeEmail(ADDRESS);
+    expect(encoded).not.toContain('@');
+    expect(encoded).not.toContain('example');
+  });
+
+  it('decodes garbage to an empty string instead of throwing', () => {
+    expect(decodeEmail('%%%')).toBe('');
+  });
+
+  it('spells the address out for the no-script fallback', () => {
+    expect(spelledOutEmail('a.b@example.de')).toBe('a [dot] b [at] example [dot] de');
+  });
+
+  /*
+   * The point of the exercise: the server HTML carries neither the address
+   * nor a mailto: link. It appears only once the browser has hydrated.
+   */
+  it('renders no address and no mailto: on the server', () => {
+    const html = renderToString(createElement(EmailLink, { encoded: encodeEmail(ADDRESS) }));
+    expect(html).not.toContain(ADDRESS);
+    expect(html).not.toContain('mailto:');
+    expect(html).not.toContain('[at]');
+  });
+});
diff --git a/lib/__tests__/essay-sequence.test.ts b/lib/__tests__/essay-sequence.test.ts
new file mode 100644
index 0000000..e1ffac1
--- /dev/null
+++ b/lib/__tests__/essay-sequence.test.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { essayPhotoSequence } from '../essaySequence';
+import type { JournalBlock } from '../journal';
+
+// Six photos in the subpage's albums; the essay shows only some of them.
+const photos = ['a', 'b', 'c', 'd', 'e', 'f'].map((id) => ({ id }));
+const resolve = (key: string) => {
+  const byIndex = Number(key);
+  if (Number.isInteger(byIndex) && byIndex >= 1) return photos[byIndex - 1];
+  return photos.find((p) => p.id === key);
+};
+const ids = (list: { id: string }[]) => list.map((p) => p.id);
+
+describe('essayPhotoSequence', () => {
+  it('lists only the photos the blocks show, in reading order', () => {
+    const blocks: JournalBlock[] = [
+      { type: 'photo', assetId: 'c', layout: 'wide' },
+      { type: 'paragraph', html: 'text' },
+      { type: 'photo-pair', assetIds: ['a', 'e'] },
+    ];
+    expect(ids(essayPhotoSequence(blocks, undefined, resolve))).toEqual(['c', 'a', 'e']);
+  });
+
+  it('puts the cover first and does not repeat it', () => {
+    const blocks: JournalBlock[] = [{ type: 'photo', assetId: 'b', layout: 'wide' }];
+    expect(ids(essayPhotoSequence(blocks, 'b', resolve))).toEqual(['b']);
+    expect(ids(essayPhotoSequence(blocks, 'd', resolve))).toEqual(['d', 'b']);
+  });
+
+  it('resolves 1-based index references', () => {
+    const blocks: JournalBlock[] = [{ type: 'photo', assetId: '6', layout: 'contained' }];
+    expect(ids(essayPhotoSequence(blocks, undefined, resolve))).toEqual(['f']);
+  });
+
+  it('skips a pair with a missing half, like the renderer', () => {
+    const blocks: JournalBlock[] = [{ type: 'photo-pair', assetIds: ['a', 'missing'] }];
+    expect(essayPhotoSequence(blocks, undefined, resolve)).toEqual([]);
+  });
+
+  it('keeps a grid only while two photos resolve', () => {
+    const one: JournalBlock[] = [{ type: 'photo-grid', assetIds: ['a', 'x', 'y'] }];
+    const two: JournalBlock[] = [{ type: 'photo-grid', assetIds: ['a', 'x', 'b'] }];
+    expect(essayPhotoSequence(one, undefined, resolve)).toEqual([]);
+    expect(ids(essayPhotoSequence(two, undefined, resolve))).toEqual(['a', 'b']);
+  });
+});
diff --git a/lib/__tests__/essay-source.test.ts b/lib/__tests__/essay-source.test.ts
new file mode 100644
index 0000000..e0092ec
--- /dev/null
+++ b/lib/__tests__/essay-source.test.ts
@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+
+const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'essay-source-'));
+
+vi.mock('@/lib/config', () => ({
+  getConfig: () => ({
+    authSecret: 'test-auth-secret-32-chars-long-min',
+    subpages: [],
+    albumPasswords: {},
+  }),
+}));
+
+// Journal files come from a temp dir instead of content/journal/. Both the
+// loader and lib/auth's password lookup go through this module, so the gate
+// under test reads the same file the essay does.
+vi.mock('@/lib/admin/journal-service', async () => {
+  const { parseJournalMarkdown } = await import('@/lib/journal');
+  const file = (slug: string) => path.join(dir, `${slug}.md`);
+  return {
+    resolveJournalFilePath: (slug: string) => file(slug),
+    loadEssayFromFile: (slug: string) =>
+      fs.existsSync(file(slug)) ? parseJournalMarkdown(fs.readFileSync(file(slug), 'utf8')) : null,
+  };
+});
+
+import { resolveEssayFile, generatedEssayCaption } from '@/lib/essaySource';
+import { authenticate } from '@/lib/auth';
+import type { ImmichAsset } from '@/lib/immich';
+
+const write = (slug: string, frontmatter: string) =>
+  fs.writeFileSync(path.join(dir, `${slug}.md`), `---\n${frontmatter}\n---\n\nBody text.\n`);
+
+const anonymous = { isAdmin: false, getCookie: () => undefined };
+
+beforeAll(() => {
+  write('open', 'title: "Open"');
+  write('draft', 'title: "Draft"\ndraft: true');
+  write('locked', 'title: "Locked"\npassword: "letmein"');
+});
+
+afterAll(() => fs.rmSync(dir, { recursive: true, force: true }));
+
+describe('resolveEssayFile', () => {
+  it('returns a public entry', () => {
+    const result = resolveEssayFile('open', anonymous);
+    expect(result.status).toBe('open');
+  });
+
+  it('treats a missing entry as missing', () => {
+    expect(resolveEssayFile('nope', anonymous)).toEqual({ status: 'missing' });
+  });
+
+  it('hides a draft from visitors', () => {
+    expect(resolveEssayFile('draft', anonymous)).toEqual({ status: 'missing' });
+  });
+
+  it('shows a draft to the admin', () => {
+    expect(resolveEssayFile('draft', { ...anonymous, isAdmin: true }).status).toBe('open');
+  });
+
+  it('locks a password-protected entry without a cookie', () => {
+    expect(resolveEssayFile('locked', anonymous)).toEqual({ status: 'locked', title: 'Locked' });
+  });
+
+  it('keeps the entry locked for the admin, like /journal/<slug> does', () => {
+    expect(resolveEssayFile('locked', { ...anonymous, isAdmin: true }).status).toBe('locked');
+  });
+
+  it('opens a protected entry with the journal cookie', async () => {
+    const setCookie = await authenticate('locked', 'letmein', 'journal');
+    expect(setCookie).not.toBeNull();
+    const [pair] = setCookie!.split(';');
+    const [name, value] = pair.split('=');
+    const result = resolveEssayFile('locked', {
+      isAdmin: false,
+      getCookie: (n) => (n === name ? value : undefined),
+    });
+    expect(result.status).toBe('open');
+  });
+});
+
+describe('generatedEssayCaption', () => {
+  const asset = (description?: string) =>
+    ({ exifInfo: { description } }) as Pick<ImmichAsset, 'exifInfo'>;
+
+  it('escapes markup in an Immich description', () => {
+    expect(generatedEssayCaption(asset('<b>hi</b> & "you"'), true)).toBe(
+      '&lt;b&gt;hi&lt;/b&gt; &amp; &quot;you&quot;',
+    );
+  });
+
+  it('follows the exif.caption toggle', () => {
+    expect(generatedEssayCaption(asset('A caption'), false)).toBeUndefined();
+  });
+
+  it('leaves no caption for an empty description', () => {
+    expect(generatedEssayCaption(asset('   '), true)).toBeUndefined();
+  });
+});
diff --git a/lib/__tests__/fonts.test.ts b/lib/__tests__/fonts.test.ts
new file mode 100644
index 0000000..5499bc4
--- /dev/null
+++ b/lib/__tests__/fonts.test.ts
@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import {
+  __resetFontsForTests,
+  getFontFile,
+  getGoogleCss,
+  parseFamilies,
+  rewriteCss,
+} from '../fonts';
+import { getFontsCssUrl } from '../config/theme';
+
+const GSTATIC_URL = 'https://fonts.gstatic.com/s/archivo/v19/abc.woff2';
+const GOOGLE_CSS = `@font-face {
+  font-family: 'Archivo';
+  font-weight: 400;
+  src: url(${GSTATIC_URL}) format('woff2');
+}`;
+
+let cwd: string;
+let fetchMock: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  // lib/fonts.ts caches under <cwd>/content/.fonts.
+  cwd = fs.mkdtempSync(path.join(os.tmpdir(), 'folio-fonts-'));
+  vi.spyOn(process, 'cwd').mockReturnValue(cwd);
+  vi.spyOn(console, 'warn').mockImplementation(() => {});
+  fetchMock = vi.fn(async (url: string) => {
+    if (url.startsWith('https://fonts.googleapis.com/')) return new Response(GOOGLE_CSS);
+    if (url === GSTATIC_URL) return new Response(new Uint8Array([1, 2, 3]));
+    return new Response(null, { status: 404 });
+  });
+  vi.stubGlobal('fetch', fetchMock);
+  __resetFontsForTests();
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  fs.rmSync(cwd, { recursive: true, force: true });
+});
+
+const fileName = () =>
+  rewriteCss(GOOGLE_CSS).match(/\/api\/fonts\/file\/([a-f0-9]{32}\.woff2)/)![1];
+
+describe('getFontsCssUrl', () => {
+  it('points at this origin, one family parameter per distinct family', () => {
+    expect(getFontsCssUrl(['Archivo', 'Archivo', 'IBM Plex Mono'])).toBe(
+      '/api/fonts/css?family=Archivo&family=IBM%20Plex%20Mono',
+    );
+  });
+});
+
+describe('parseFamilies', () => {
+  it('accepts Google Fonts names with spaces and digits', () => {
+    expect(parseFamilies(['Source Sans 3', 'IBM Plex Mono'])).toEqual([
+      'Source Sans 3',
+      'IBM Plex Mono',
+    ]);
+  });
+
+  it('rejects anything that could change the upstream query', () => {
+    expect(parseFamilies(['Inter:wght@100'])).toBeNull();
+    expect(parseFamilies(['Inter&family=Roboto'])).toBeNull();
+    expect(parseFamilies(['../etc'])).toBeNull();
+  });
+
+  it('rejects an empty list and more families than a theme has slots', () => {
+    expect(parseFamilies([])).toBeNull();
+    expect(parseFamilies(['A', 'B', 'C', 'D'])).toBeNull();
+  });
+});
+
+describe('rewriteCss', () => {
+  it('replaces every gstatic URL with a same-origin one', () => {
+    const css = rewriteCss(GOOGLE_CSS);
+    expect(css).not.toContain('gstatic');
+    expect(css).toMatch(/url\(\/api\/fonts\/file\/[a-f0-9]{32}\.woff2\)/);
+  });
+});
+
+describe('getGoogleCss', () => {
+  it('fetches once and serves the cached copy afterwards', async () => {
+    expect(await getGoogleCss(['Archivo'])).toBe(GOOGLE_CSS);
+    __resetFontsForTests();
+    expect(await getGoogleCss(['Archivo'])).toBe(GOOGLE_CSS);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('asks Google with a browser User-Agent, so the answer is WOFF2', async () => {
+    await getGoogleCss(['IBM Plex Mono']);
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(url).toContain('family=IBM+Plex+Mono:wght@');
+    expect(init.headers['User-Agent']).toMatch(/Chrome/);
+  });
+
+  it('does not retry a failed fetch on every request', async () => {
+    fetchMock.mockRejectedValue(new Error('offline'));
+    expect(await getGoogleCss(['Archivo'])).toBeNull();
+    expect(await getGoogleCss(['Archivo'])).toBeNull();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('getFontFile', () => {
+  it('serves a file that a fetched stylesheet named, and caches it', async () => {
+    await getGoogleCss(['Archivo']);
+    expect(await getFontFile(fileName())).toEqual(new Uint8Array([1, 2, 3]));
+    expect(fs.existsSync(path.join(cwd, 'content', '.fonts', fileName()))).toBe(true);
+  });
+
+  it('finds the file after a restart from the stylesheet on disk', async () => {
+    await getGoogleCss(['Archivo']);
+    __resetFontsForTests();
+    expect(await getFontFile(fileName())).toEqual(new Uint8Array([1, 2, 3]));
+  });
+
+  it('refuses a name no stylesheet produced, without fetching anything', async () => {
+    expect(await getFontFile('0'.repeat(32) + '.woff2')).toBeNull();
+    expect(await getFontFile('../../settings.yaml')).toBeNull();
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});
diff --git a/lib/__tests__/i18n.test.ts b/lib/__tests__/i18n.test.ts
index c90ebdb..6a91553 100644
--- a/lib/__tests__/i18n.test.ts
+++ b/lib/__tests__/i18n.test.ts
@@ -11,17 +11,27 @@ import { describe, it, expect } from 'vitest';
 import { resolveLocale, getDictionary, dictionaryFor, SUPPORTED_LOCALES } from '../i18n';
 import { en } from '../i18n/locales/en';
 import { de } from '../i18n/locales/de';
+import { fr } from '../i18n/locales/fr';
+import { es } from '../i18n/locales/es';
+import { it as itIT } from '../i18n/locales/it';
+import { nl } from '../i18n/locales/nl';
+import type { Dictionary } from '../i18n';
 
 describe('resolveLocale', () => {
   it('accepts the supported locales', () => {
-    expect(resolveLocale('en')).toBe('en');
-    expect(resolveLocale('de')).toBe('de');
+    for (const locale of SUPPORTED_LOCALES) {
+      expect(resolveLocale(locale)).toBe(locale);
+    }
   });
 
   it('drops the region subtag', () => {
     expect(resolveLocale('de-DE')).toBe('de');
     expect(resolveLocale('de-AT')).toBe('de');
     expect(resolveLocale('en_GB')).toBe('en');
+    expect(resolveLocale('fr-CA')).toBe('fr');
+    expect(resolveLocale('es-MX')).toBe('es');
+    expect(resolveLocale('it-CH')).toBe('it');
+    expect(resolveLocale('nl-BE')).toBe('nl');
   });
 
   it('is case- and whitespace-insensitive', () => {
@@ -30,8 +40,8 @@ describe('resolveLocale', () => {
   });
 
   it('falls back to English for languages without a dictionary', () => {
-    expect(resolveLocale('fr')).toBe('en');
     expect(resolveLocale('ja-JP')).toBe('en');
+    expect(resolveLocale('pt')).toBe('en');
     expect(resolveLocale('')).toBe('en');
     expect(resolveLocale(undefined)).toBe('en');
     expect(resolveLocale(null)).toBe('en');
@@ -47,7 +57,8 @@ describe('getDictionary', () => {
 
   it('dictionaryFor resolves and looks up in one step', () => {
     expect(dictionaryFor('de-DE')).toBe(de);
-    expect(dictionaryFor('fr')).toBe(en);
+    expect(dictionaryFor('fr-FR')).toBe(fr);
+    expect(dictionaryFor('ja')).toBe(en);
   });
 });
 
@@ -67,37 +78,110 @@ function invoke(fn: (...args: never[]) => string): string {
   return (fn as (...a: unknown[]) => string)(...args);
 }
 
-describe('dictionary parity', () => {
-  const enLeaves = leaves(en);
-  const deLeaves = new Map(leaves(de));
+/**
+ * Keys a locale legitimately shares with English — proper nouns, loanwords,
+ * units and cognates that read the same in both languages. Anything not listed
+ * here and still identical to English is an untranslated string.
+ */
+const SHARED_EVERYWHERE = [
+  'lightbox.iso',
+  // Pure interpolation with no words of its own.
+  'subpage.coverAria',
+];
 
-  it('German covers every English key', () => {
-    expect([...deLeaves.keys()].sort()).toEqual(enLeaves.map(([k]) => k).sort());
+const TRANSLATIONS: [string, Dictionary, string[]][] = [
+  [
+    'de',
+    de,
+    [
+      'nav.journal',
+      'journal.title',
+      'lightbox.copyLinkShort',
+      'lightbox.downloadShort',
+      'common.website',
+      'contact.name',
+    ],
+  ],
+  [
+    'fr',
+    fr,
+    [
+      'nav.journal',
+      'journal.title',
+      'about.portraitAlt',
+      'legal.contact',
+      'lightbox.downloadShort',
+      'subpage.sectionsNav',
+      'subpage.collectionKicker',
+      // French shares the words "photo(s)", "album(s)" and "collection(s)".
+      'common.photos',
+      'common.albums',
+      'common.collections',
+      'contact.navLabel',
+      'contact.title',
+      'contact.message',
+    ],
+  ],
+  ['es', es, ['lightbox.downloadShort', 'lightbox.info']],
+  [
+    'it',
+    itIT,
+    ['nav.home', 'common.home', 'lightbox.info', 'lightbox.copyLinkShort', 'privacy.navLabel'],
+  ],
+  [
+    'nl',
+    nl,
+    [
+      'nav.journal',
+      'journal.title',
+      'common.website',
+      'common.albums',
+      'lightbox.camera',
+      'lightbox.info',
+      'lightbox.copyLinkShort',
+      'legal.contact',
+      'contact.navLabel',
+      'contact.title',
+      'privacy.navLabel',
+    ],
+  ],
+];
+
+describe('supported locales', () => {
+  it('have a parity check below for every non-English dictionary', () => {
+    expect(TRANSLATIONS.map(([code]) => code).sort()).toEqual(
+      SUPPORTED_LOCALES.filter((l) => l !== 'en').sort(),
+    );
+  });
+
+  it('each dictionary is the one getDictionary serves', () => {
+    for (const [code, dict] of TRANSLATIONS) {
+      expect(getDictionary(code as (typeof SUPPORTED_LOCALES)[number])).toBe(dict);
+    }
+  });
+});
+
+describe.each(TRANSLATIONS)('dictionary parity: %s', (code, dict, sharedKeys) => {
+  const enLeaves = leaves(en);
+  const otherLeaves = new Map(leaves(dict));
+
+  it('covers every English key', () => {
+    expect([...otherLeaves.keys()].sort()).toEqual(enLeaves.map(([k]) => k).sort());
   });
 
   it('matches value kinds — a string never stands in for an interpolator', () => {
     for (const [path, value] of enLeaves) {
-      expect(typeof deLeaves.get(path), path).toBe(typeof value);
+      expect(typeof otherLeaves.get(path), path).toBe(typeof value);
     }
   });
 
   it('leaves no English string untranslated', () => {
-    // Proper nouns, loanwords and units read the same in both languages;
-    // `coverAria` is pure interpolation with no words of its own.
-    const shared = new Set([
-      'nav.journal',
-      'journal.title',
-      'lightbox.iso',
-      'lightbox.copyLinkShort',
-      'lightbox.downloadShort',
-      'common.website',
-      'subpage.coverAria',
-    ]);
+    const shared = new Set([...SHARED_EVERYWHERE, ...sharedKeys]);
 
     const identical = enLeaves
       .filter(([path]) => !shared.has(path))
       .filter(([path, value]) => {
-        const other = deLeaves.get(path);
+        const other = otherLeaves.get(path);
         if (typeof value === 'function') {
           return invoke(other as (...a: never[]) => string) === invoke(value as never);
         }
@@ -108,11 +192,30 @@ describe('dictionary parity', () => {
     expect(identical).toEqual([]);
   });
 
-  it('plural helpers actually vary on their count', () => {
-    for (const dict of [en, de]) {
+  it('lists only keys that really are identical, so the allowance cannot go stale', () => {
+    const english = new Map(enLeaves);
+    const stale = sharedKeys.filter((path) => {
+      const value = english.get(path);
+      const other = otherLeaves.get(path);
+      return typeof value === 'function'
+        ? invoke(other as (...a: never[]) => string) !== invoke(value as never)
+        : other !== value;
+    });
+    expect(stale).toEqual([]);
+  });
+
+  it('formats dates for its own language', () => {
+    expect(dict.dateLocale.split('-')[0]).toBe(code);
+  });
+});
+
+describe('plural helpers', () => {
+  it.each([['en', en] as const, ...TRANSLATIONS.map(([c, d]) => [c, d] as const)])(
+    'vary on their count in %s',
+    (_code, dict) => {
       expect(dict.common.photos(1)).not.toBe(dict.common.photos(2));
       expect(dict.common.albums(1)).not.toBe(dict.common.albums(2));
       expect(dict.common.collections(1)).not.toBe(dict.common.collections(2));
-    }
-  });
+    },
+  );
 });
diff --git a/lib/__tests__/password-hashing.test.ts b/lib/__tests__/password-hashing.test.ts
new file mode 100644
index 0000000..cd3c621
--- /dev/null
+++ b/lib/__tests__/password-hashing.test.ts
@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest';
+import { hashFrontmatterPassword, hashPassword, hashPasswordKeys } from '../admin/passwordHashing';
+import { generateScryptHash, verifyScrypt } from '../password';
+
+const KEY = new Set(['password']);
+
+describe('hashPassword', () => {
+  it('hashes plaintext, and leaves empty, scrypt and bcrypt values alone', async () => {
+    const hashed = await hashPassword('secret', []);
+    expect(hashed).toMatch(/^scrypt:/);
+    expect(await verifyScrypt('secret', hashed)).toBe(true);
+    expect(await hashPassword('', [])).toBe('');
+    expect(await hashPassword(hashed, [])).toBe(hashed);
+    expect(await hashPassword('$2b$10$abcdefghijklmno', [])).toBe('$2b$10$abcdefghijklmno');
+  });
+
+  /*
+   * The visitor's unlock cookie signs the stored value. The admin form re-sends
+   * the plaintext after a save; a fresh salt each time would sign everyone out.
+   */
+  it('keeps an existing hash when the plaintext still matches it', async () => {
+    const existing = await generateScryptHash('secret');
+    expect(await hashPassword('secret', [existing])).toBe(existing);
+    expect(await hashPassword('other', [existing])).not.toBe(existing);
+  });
+});
+
+describe('hashPasswordKeys', () => {
+  it('hashes every password in a gallery, however deep, and nothing else', async () => {
+    const gallery = {
+      albums: [{ 'album-1': { title: 'Kyoto', password: 'a' } }],
+      subpages: [
+        {
+          name: 'Clients',
+          password: 'b',
+          sections: [{ title: 'S', albums: [{ 'album-2': { password: 'c' } }] }],
+        },
+      ],
+    };
+    const out = await hashPasswordKeys(gallery, KEY, null);
+    const albums = out.albums as Array<Record<string, { title: string; password: string }>>;
+    const section = (
+      out.subpages[0].sections![0].albums as Array<Record<string, { password: string }>>
+    )[0];
+    expect(albums[0]['album-1'].password).toMatch(/^scrypt:/);
+    expect(albums[0]['album-1'].title).toBe('Kyoto');
+    expect(out.subpages[0].password).toMatch(/^scrypt:/);
+    expect(section['album-2'].password).toMatch(/^scrypt:/);
+    // The input is not mutated.
+    expect(gallery.subpages[0].password).toBe('b');
+  });
+
+  it('reuses a hash from the file on disk, wherever the entry moved to', async () => {
+    const onDisk = { subpages: [{ name: 'A', password: await generateScryptHash('b') }] };
+    const out = await hashPasswordKeys(
+      { subpages: [{ name: 'Renamed', password: 'b' }] },
+      KEY,
+      onDisk,
+    );
+    expect(out.subpages[0].password).toBe(onDisk.subpages[0].password);
+  });
+});
+
+describe('hashFrontmatterPassword', () => {
+  const entry = (pw: string) =>
+    `---\ntitle: "Price: $5 & more"\npassword: ${pw}\ndraft: true\n---\n\nBody with password: not-this\n`;
+
+  it('hashes only the frontmatter line and leaves the rest byte for byte', async () => {
+    const out = await hashFrontmatterPassword(entry('secret'), null);
+    const line = out.match(/^password: "(scrypt:[^"]+)"$/m)!;
+    expect(await verifyScrypt('secret', line[1])).toBe(true);
+    expect(out).toContain('title: "Price: $5 & more"');
+    expect(out).toContain('Body with password: not-this');
+  });
+
+  it('understands quoted values and keeps the previous hash when unchanged', async () => {
+    const previous = await hashFrontmatterPassword(entry('secret'), null);
+    const again = await hashFrontmatterPassword(entry('"secret"'), previous);
+    expect(again).toBe(previous);
+  });
+
+  it('leaves an entry without a password untouched', async () => {
+    const md = '---\ntitle: Open\n---\n\nText\n';
+    expect(await hashFrontmatterPassword(md, null)).toBe(md);
+  });
+});
diff --git a/lib/__tests__/preset-contrast.test.ts b/lib/__tests__/preset-contrast.test.ts
new file mode 100644
index 0000000..c88a8b2
--- /dev/null
+++ b/lib/__tests__/preset-contrast.test.ts
@@ -0,0 +1,97 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+import {
+  THEME_PRESETS,
+  resolveTheme,
+  accentForMode,
+  onAccent,
+  contrastRatio,
+} from '../config/theme';
+
+/**
+ * Every preset's accent must stay visible on its own page background in both
+ * colour modes, and text on an accent-filled button must stay readable. Minimal
+ * shipped a black accent on its black dark mode: the password gate's button and
+ * the error page's "Try again" were invisible.
+ *
+ * The backgrounds are read from app/tokens.css, so a palette change that breaks
+ * an accent fails here too.
+ */
+const css = fs.readFileSync(path.join(process.cwd(), 'app', 'tokens.css'), 'utf8');
+
+function bgPrimary(selector: string): string | undefined {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const block = new RegExp(`${escaped}\\s*\\{([^}]*)\\}`).exec(css)?.[1];
+  return block ? /--bg-primary:\s*(#[0-9a-fA-F]{3,6})/.exec(block)?.[1] : undefined;
+}
+
+const defaults = { dark: bgPrimary(':root')!, light: bgPrimary("[data-theme='light']")! };
+
+function background(preset: string, mode: 'dark' | 'light'): string {
+  const own =
+    mode === 'dark'
+      ? bgPrimary(`[data-preset='${preset}']`)
+      : bgPrimary(`[data-preset='${preset}'][data-theme='light']`);
+  return own ?? defaults[mode];
+}
+
+// 3:1 is WCAG's floor for UI components and large text (non-text contrast,
+// 1.4.11); the accent draws dots, rules, active states and button fills.
+const ACCENT_MIN = 3;
+const BUTTON_TEXT_MIN = 4.5;
+
+describe('preset accent contrast', () => {
+  it('finds a background for every preset and mode', () => {
+    expect(defaults.dark).toBeDefined();
+    expect(defaults.light).toBeDefined();
+  });
+
+  for (const name of Object.keys(THEME_PRESETS)) {
+    for (const mode of ['dark', 'light'] as const) {
+      it(`${name} (${mode}): accent is visible on the page`, () => {
+        const accent = accentForMode(resolveTheme(name), mode);
+        const ratio = contrastRatio(accent, background(name, mode))!;
+        expect(ratio).toBeGreaterThanOrEqual(ACCENT_MIN);
+      });
+
+      it(`${name} (${mode}): button text is readable on the accent`, () => {
+        const accent = accentForMode(resolveTheme(name), mode);
+        expect(contrastRatio(onAccent(accent), accent)!).toBeGreaterThanOrEqual(BUTTON_TEXT_MIN);
+      });
+    }
+  }
+});
+
+describe('per-mode accents', () => {
+  it('apply while the owner keeps the preset accent', () => {
+    const theme = resolveTheme({ preset: 'minimal', accent: '#000000' });
+    expect(accentForMode(theme, 'dark')).toBe('#ffffff');
+    expect(accentForMode(theme, 'light')).toBe('#000000');
+  });
+
+  it('give way to an accent of the owner’s own, in both modes', () => {
+    const theme = resolveTheme({ preset: 'minimal', accent: '#0055ff' });
+    expect(accentForMode(theme, 'dark')).toBe('#0055ff');
+    expect(accentForMode(theme, 'light')).toBe('#0055ff');
+  });
+
+  it('fall back to the single accent where a preset has none', () => {
+    const theme = resolveTheme('studio-modern');
+    expect(accentForMode(theme, 'dark')).toBe(theme.accent);
+    expect(accentForMode(theme, 'light')).toBe(theme.accent);
+  });
+});
+
+describe('onAccent', () => {
+  it('picks the stronger of black and white', () => {
+    expect(onAccent('#000000')).toBe('#ffffff');
+    expect(onAccent('#ffffff')).toBe('#000000');
+    expect(onAccent('#c49a3c')).toBe('#000000');
+    expect(onAccent('#e60012')).toBe('#ffffff');
+  });
+
+  it('keeps white for a colour it cannot parse', () => {
+    expect(onAccent('rebeccapurple')).toBe('#ffffff');
+  });
+});
diff --git a/lib/__tests__/privacy.test.ts b/lib/__tests__/privacy.test.ts
new file mode 100644
index 0000000..b86dc93
--- /dev/null
+++ b/lib/__tests__/privacy.test.ts
@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { parseMarkdownBlocks } from '../markdownBlocks';
+import { privacyAvailable, processingFacts, starterHeadings } from '../privacy';
+import type { AppConfig } from '../config/schema';
+
+describe('parseMarkdownBlocks', () => {
+  it('reads headings, lists and paragraphs', () => {
+    const blocks = parseMarkdownBlocks(
+      '# Datenschutz\n\nErster Satz\nzweiter Satz.\n\n### Detail\n- eins\n- **zwei**\n\n1. a\n2. b',
+    );
+    expect(blocks).toEqual([
+      { type: 'heading', level: 2, html: 'Datenschutz' },
+      { type: 'paragraph', html: 'Erster Satz zweiter Satz.' },
+      { type: 'heading', level: 3, html: 'Detail' },
+      { type: 'list', ordered: false, items: ['eins', '<strong>zwei</strong>'] },
+      { type: 'list', ordered: true, items: ['a', 'b'] },
+    ]);
+  });
+
+  it('escapes the author text before adding its own tags', () => {
+    const [p] = parseMarkdownBlocks('<script>alert(1)</script> [x](javascript:alert(1))');
+    const html = p.type === 'paragraph' ? p.html : '';
+    expect(html).toContain('&lt;script&gt;');
+    expect(html).not.toContain('<script');
+    expect(html).not.toContain('<a ');
+  });
+});
+
+const config = (over: Partial<AppConfig> = {}) =>
+  ({
+    map: false,
+    analytics: false,
+    contact: { enabled: false, retentionDays: 90 },
+    proofing: { enabled: false },
+    privacy: { enabled: true },
+    ...over,
+  }) as unknown as AppConfig;
+
+describe('processingFacts', () => {
+  it('lists only what this installation actually does', () => {
+    const topics = processingFacts(config(), { hasPasswords: false }).map((f) => f.topic);
+    expect(topics).toEqual(['Photos', 'Server log', 'Fonts', 'Browser storage']);
+  });
+
+  it('names third parties for the map, the notification host and a CDN', () => {
+    const facts = processingFacts(
+      config({
+        map: true,
+        contact: { enabled: true, retentionDays: 30, notifyUrl: 'https://ntfy.sh/secret' },
+      }),
+      { hasPasswords: true, CDN_URL: 'https://cdn.example.net' },
+    );
+    const third = facts.filter((f) => f.thirdParty).map((f) => f.topic);
+    // The notification carries nothing about the sender (#702), so the
+    // contact form is not a third-party transfer.
+    expect(third).toEqual(['Map', 'CDN']);
+    const contact = facts.find((f) => f.topic === 'Contact form')!;
+    expect(contact.detail).toContain('30 days');
+    // The host, never the topic path: the topic name is the secret.
+    expect(contact.detail).toContain('ntfy.sh');
+    expect(contact.detail).not.toContain('secret');
+    expect(facts.some((f) => f.topic === 'Cookies')).toBe(true);
+  });
+
+  it('turns the facts into headings in the site language, and nothing else', () => {
+    const facts = processingFacts(config({ map: true }), { hasPasswords: false });
+    const de = starterHeadings('de', facts);
+    expect(de).toContain('## Kartendienst');
+    expect(de).not.toContain('Kontaktformular');
+    expect(de.split('\n').filter((l) => l && !l.startsWith('## '))).toEqual([]);
+    expect(starterHeadings('en', facts)).toContain('## Your rights');
+  });
+});
+
+describe('privacyAvailable', () => {
+  it('needs the switch on and text in the file', () => {
+    const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'folio-privacy-'));
+    expect(privacyAvailable(config(), dir)).toBe(false);
+    fs.writeFileSync(path.join(dir, 'privacy.md'), '  \n');
+    expect(privacyAvailable(config(), dir)).toBe(false);
+    fs.writeFileSync(path.join(dir, 'privacy.md'), '## Text\n');
+    expect(privacyAvailable(config(), dir)).toBe(true);
+    expect(privacyAvailable(config({ privacy: { enabled: false } }), dir)).toBe(false);
+    fs.rmSync(dir, { recursive: true, force: true });
+  });
+});
diff --git a/lib/__tests__/proxy.test.ts b/lib/__tests__/proxy.test.ts
index db9552c..d0d7a7b 100644
--- a/lib/__tests__/proxy.test.ts
+++ b/lib/__tests__/proxy.test.ts
@@ -12,11 +12,27 @@ vi.mock('@/lib/auth', () => ({
   isSiteUnlocked: vi.fn(() => true),
 }));
 
+vi.mock('@/lib/cdn', () => ({
+  cdnOrigin: vi.fn(() => null),
+}));
+
+// Null by default: isKnownMissing() then leaves every path to the page.
+vi.mock('@/lib/config', () => ({
+  getConfigOrNull: vi.fn(() => null),
+}));
+
 import { isSiteUnlocked } from '@/lib/auth';
+import { cdnOrigin } from '@/lib/cdn';
 import { tryToParsePath } from 'next/dist/lib/try-to-parse-path';
-import { proxy, config } from '@/proxy';
+import { proxy, config, isKnownMissing } from '@/proxy';
+import { getConfigOrNull } from '@/lib/config';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
 
 const mockUnlocked = isSiteUnlocked as unknown as ReturnType<typeof vi.fn>;
+const mockCdnOrigin = cdnOrigin as unknown as ReturnType<typeof vi.fn>;
+const mockConfig = getConfigOrNull as unknown as ReturnType<typeof vi.fn>;
 
 // Next.js 16 renamed the "middleware" file convention to "proxy": the file must
 // be proxy.ts and must export proxy(), not middleware(). A silent regression here
@@ -27,6 +43,28 @@ describe('proxy', () => {
 
   beforeEach(() => {
     mockUnlocked.mockReturnValue(true);
+    mockCdnOrigin.mockReturnValue(null);
+  });
+
+  describe('CDN mode', () => {
+    it('leaves the policy untouched without a CDN', () => {
+      const csp = run().headers.get('Content-Security-Policy')!;
+      expect(csp).not.toContain('media-src');
+    });
+
+    it('allows the CDN origin for images and video', () => {
+      mockCdnOrigin.mockReturnValue('https://cdn.example.net');
+      const csp = run().headers.get('Content-Security-Policy')!;
+      const directive = (name: string) =>
+        csp
+          .split(';')
+          .map((d) => d.trim())
+          .find((d) => d.startsWith(`${name} `));
+      expect(directive('img-src')).toContain('https://cdn.example.net');
+      expect(directive('media-src')).toBe("media-src 'self' https://cdn.example.net");
+      // Scripts never come from the CDN.
+      expect(directive('script-src')).not.toContain('cdn.example.net');
+    });
   });
 
   it('is exported under the name Next.js 16 expects', () => {
@@ -229,3 +267,61 @@ describe('proxy', () => {
     });
   });
 });
+
+/*
+ * app/loading.tsx makes every page stream, so notFound() in a page can no
+ * longer change the 200 that was already sent. Routes whose existence the
+ * proxy can decide on its own get the 404 before streaming starts.
+ */
+describe('isKnownMissing', () => {
+  let contentDir: string;
+  const settings = {
+    contact: { enabled: false },
+    legal: { enabled: true },
+    map: false,
+    privacy: { enabled: true },
+  };
+
+  beforeEach(() => {
+    contentDir = fs.mkdtempSync(path.join(os.tmpdir(), 'folio-proxy-'));
+    fs.mkdirSync(path.join(contentDir, 'journal'));
+    fs.writeFileSync(path.join(contentDir, 'journal', 'kyoto.md'), '---\ntitle: Kyoto\n---\n');
+    mockConfig.mockReturnValue(settings);
+  });
+
+  it('knows the pages that are switched off in settings', () => {
+    expect(isKnownMissing('/contact', contentDir)).toBe(true);
+    expect(isKnownMissing('/map', contentDir)).toBe(true);
+    expect(isKnownMissing('/impressum', contentDir)).toBe(false);
+  });
+
+  it('knows /privacy by its switch and its file', () => {
+    expect(isKnownMissing('/privacy', contentDir)).toBe(true);
+    fs.writeFileSync(path.join(contentDir, 'privacy.md'), '## Datenschutz\n');
+    expect(isKnownMissing('/privacy', contentDir)).toBe(false);
+  });
+
+  it('knows a journal entry by its file, and rejects slugs that are not slugs', () => {
+    expect(isKnownMissing('/journal/kyoto', contentDir)).toBe(false);
+    expect(isKnownMissing('/journal/osaka', contentDir)).toBe(true);
+    expect(isKnownMissing('/journal/..%2Fsettings', contentDir)).toBe(true);
+  });
+
+  it('leaves album and subpage slugs to the page, which needs Immich to decide', () => {
+    expect(isKnownMissing('/japan', contentDir)).toBe(false);
+    expect(isKnownMissing('/japan/tokyo', contentDir)).toBe(false);
+  });
+
+  it('decides nothing when the config cannot be read', () => {
+    mockConfig.mockReturnValue(null);
+    expect(isKnownMissing('/contact', contentDir)).toBe(false);
+  });
+
+  it('makes proxy() answer 404 with the policy still set', () => {
+    const res = proxy(new NextRequest('https://example.com/contact'));
+    expect(res.status).toBe(404);
+    expect(res.headers.get('Content-Security-Policy')).toBeTruthy();
+    mockConfig.mockReturnValue(null);
+    expect(proxy(new NextRequest('https://example.com/contact')).status).toBe(200);
+  });
+});
diff --git a/lib/__tests__/siteUrl.test.ts b/lib/__tests__/siteUrl.test.ts
index 9264c1b..023eb97 100644
--- a/lib/__tests__/siteUrl.test.ts
+++ b/lib/__tests__/siteUrl.test.ts
@@ -82,6 +82,12 @@ describe('resolveSiteUrl', () => {
 });
 
 describe('absoluteUrl', () => {
+  it('passes an already absolute URL through — a photo on the CDN', () => {
+    const cdn = 'https://cdn.example.net/api/image/v2:abc?size=preview';
+    expect(absoluteUrl('https://folio.example', cdn)).toBe(cdn);
+    expect(absoluteUrl(null, cdn)).toBe(cdn);
+  });
+
   it('joins a path', () => {
     expect(absoluteUrl('https://folio.example', '/travel')).toBe('https://folio.example/travel');
   });
diff --git a/lib/__tests__/theme-scalars.test.ts b/lib/__tests__/theme-scalars.test.ts
index 5001e91..1ca235d 100644
--- a/lib/__tests__/theme-scalars.test.ts
+++ b/lib/__tests__/theme-scalars.test.ts
@@ -1,5 +1,11 @@
 import { describe, it, expect } from 'vitest';
-import { resolveTheme, THEME_PRESETS, DEFAULT_PRESET } from '@/lib/config/theme';
+import {
+  resolveTheme,
+  accentForMode,
+  onAccent,
+  THEME_PRESETS,
+  DEFAULT_PRESET,
+} from '@/lib/config/theme';
 
 /**
  * `radius` reaches CSS as `${radius}px` and `${radius * 1.5}px` (app/layout.tsx),
@@ -45,6 +51,41 @@ describe('resolveTheme scalar coercion (#633)', () => {
     expect(resolveTheme({ accent: '#123456' }).accent).toBe('#123456');
   });
 
+  it('normalises a 3-digit accent to the #rrggbb every consumer survives', () => {
+    expect(resolveTheme({ accent: '#f00' }).accent).toBe('#ff0000');
+    expect(resolveTheme({ accent: '#FFF' }).accent).toBe('#ffffff');
+  });
+
+  it('normalises an 8-digit accent by dropping the alpha', () => {
+    expect(resolveTheme({ accent: '#e6001280' }).accent).toBe('#e60012');
+  });
+
+  it('trims surrounding whitespace from an accent', () => {
+    expect(resolveTheme({ accent: '  #e60012  ' }).accent).toBe('#e60012');
+  });
+
+  it('falls back to the preset accent for a hex literal without the #', () => {
+    // The nastiest input: defined, so var() substitutes it and any accent-
+    // backed background becomes transparent instead of taking its fallback.
+    expect(resolveTheme({ accent: 'e60012' }).accent).toBe(base.accent);
+  });
+
+  it('falls back to the preset accent for a 5-digit hex', () => {
+    expect(resolveTheme({ accent: '#12345' }).accent).toBe(base.accent);
+  });
+
+  it('falls back to the preset accent for named and functional colours', () => {
+    // They would render, but onAccent() reads only hex and would answer white.
+    expect(resolveTheme({ accent: 'red' }).accent).toBe(base.accent);
+    expect(resolveTheme({ accent: 'rgb(230 0 18)' }).accent).toBe(base.accent);
+  });
+
+  it('gives a white accent dark button text, the proofing ZIP button included', () => {
+    // #ffffff on the light theme rendered Download selected white-on-white.
+    const theme = resolveTheme({ accent: '#FFF' });
+    expect(onAccent(accentForMode(theme, 'light'))).toBe('#000000');
+  });
+
   it('falls back to the preset grain/headerDot when not a boolean', () => {
     const theme = resolveTheme({
       grain: 'yes' as unknown as boolean,
diff --git a/lib/admin/doctor.ts b/lib/admin/doctor.ts
index a2e57b9..36720b8 100644
--- a/lib/admin/doctor.ts
+++ b/lib/admin/doctor.ts
@@ -173,6 +173,53 @@ export function checkProxyHops(
   };
 }
 
+/**
+ * CDN mode (lib/cdn.ts). Only reported when `CDN_URL` is set.
+ *
+ * Two ways it quietly goes wrong. A site password keeps the photos on this
+ * host on purpose, which reads as "the CDN does nothing". And with
+ * `TRUSTED_PROXY_HOPS=0`, every cache miss is rate-limited by the CDN edge's
+ * IP instead of the visitor's: a handful of edges share one bucket, and a busy
+ * page can push one of them into 429s that then show up as missing photos.
+ */
+export function checkCdn(
+  cdnUrl: string | undefined,
+  sitePasswordSet: boolean,
+  trustedProxyHops: number,
+): DoctorFinding | null {
+  if (!cdnUrl) return null;
+
+  if (sitePasswordSet) {
+    return {
+      id: 'cdn',
+      level: 'warn',
+      title: 'CDN_URL is set, but photos are served from this server',
+      detail:
+        'The site is password-protected, and a CDN would hand cached photos to anyone with a ' +
+        'link, so CDN mode stays off. Remove the site password or unset CDN_URL.',
+    };
+  }
+
+  if (trustedProxyHops === 0) {
+    return {
+      id: 'cdn',
+      level: 'warn',
+      title: 'CDN mode is on, but TRUSTED_PROXY_HOPS is 0',
+      detail:
+        `Photos are served through ${cdnUrl}, and without TRUSTED_PROXY_HOPS the rate limiter ` +
+        'counts the CDN edge instead of the visitor. Set it to the number of proxies in front of ' +
+        'the app, the CDN included.',
+    };
+  }
+
+  return {
+    id: 'cdn',
+    level: 'ok',
+    title: 'CDN mode is on',
+    detail: `Photos and videos are served through ${cdnUrl}.`,
+  };
+}
+
 /** Headers a reverse proxy sets and Next never synthesises. */
 export const PROXY_MARKER_HEADERS = ['x-real-ip', 'forwarded', 'via'];
 
@@ -369,7 +416,8 @@ export function checkPasswords(passwords: PasswordRef[]): DoctorFinding {
       level: 'warn',
       title: `${plaintext.length} password${plaintext.length === 1 ? ' is' : 's are'} stored in plaintext`,
       detail:
-        'Anyone who reads the file reads the password. Log in once and replace it with the ' +
+        'Anyone who reads the file reads the password. Saving the page, entry or setting once ' +
+        'in the admin panel stores it hashed; for a hand-edited file, log in once and paste the ' +
         `scrypt: hash printed to the server log: ${plaintext.map((p) => p.label).join(', ')}`,
     };
   }
@@ -391,6 +439,154 @@ export function checkPasswords(passwords: PasswordRef[]): DoctorFinding {
   };
 }
 
+/** The `legal:` block as settings.yaml holds it, before resolveLegal(). */
+export interface LegalRef {
+  enabled?: unknown;
+  name?: unknown;
+  address?: unknown;
+  zipCity?: unknown;
+  email?: unknown;
+  phone?: unknown;
+  contactUrl?: unknown;
+}
+
+/**
+ * Whether an enabled Impressum carries what § 5 DDG asks for: a name and a
+ * postal address, an email address, and a second fast way to get in touch
+ * (phone or a contact form, ECJ C-298/07).
+ *
+ * It takes the raw block rather than the resolved one because resolveLegal()
+ * drops a contact URL that is not http(s) and only tells the server log, so
+ * the link would just go missing. The http(s) test repeats isHttpUrl() from
+ * lib/config/schema.ts: this module has no imports, so the CLI can load it.
+ * Returns null when the page is switched off.
+ */
+export function checkLegal(
+  legal: LegalRef | null | undefined,
+  /** The built-in form (#702) is linked from the Impressum when no contactUrl is set. */
+  contactFormEnabled = false,
+): DoctorFinding | null {
+  if (!legal || legal.enabled !== true) return null;
+
+  const text = (value: unknown) => (typeof value === 'string' ? value.trim() : '');
+  const email = text(legal.email);
+  const phone = text(legal.phone);
+  const rawUrl = text(legal.contactUrl);
+  const contactUrl = /^https?:\/\//i.test(rawUrl) ? rawUrl : '';
+  const secondChannel = phone || contactUrl || contactFormEnabled;
+
+  const problems: string[] = [];
+  const missing = (
+    [
+      ['name', legal.name],
+      ['street address', legal.address],
+      ['ZIP and city', legal.zipCity],
+    ] as const
+  )
+    .filter(([, value]) => !text(value))
+    .map(([label]) => label);
+  if (missing.length) problems.push(`Missing: ${missing.join(', ')}.`);
+  if (!email) problems.push('No email address; § 5 DDG requires one.');
+  if (rawUrl && !contactUrl) {
+    problems.push('The contact form URL is ignored because it does not start with http(s)://.');
+  }
+  if (email && !secondChannel) {
+    problems.push(
+      'Email is the only contact channel. Add a phone number, a contact form URL, or turn on the built-in contact form.',
+    );
+  }
+
+  if (problems.length) {
+    return {
+      id: 'legal',
+      level: 'warn',
+      title: `The Impressum has ${problems.length} gap${problems.length === 1 ? '' : 's'}`,
+      detail: problems.join(' '),
+    };
+  }
+
+  return {
+    id: 'legal',
+    level: 'ok',
+    title: 'The Impressum is complete',
+    detail: 'Name, address, email and a second contact channel are set.',
+  };
+}
+
+/** The `contact:` block as settings.yaml holds it. */
+export interface ContactRef {
+  enabled?: unknown;
+  notifyUrl?: unknown;
+}
+
+/**
+ * The contact form stores messages without telling anyone unless a
+ * notification URL is set. The ECJ reads the second contact channel as one
+ * that allows "direct and effective" communication, and a form nobody looks
+ * at does not. Returns null when the form is off.
+ */
+export function checkContact(
+  contact: ContactRef | null | undefined,
+  envNotifyUrl?: string,
+): DoctorFinding | null {
+  if (!contact || contact.enabled !== true) return null;
+  const url =
+    envNotifyUrl?.trim() || (typeof contact.notifyUrl === 'string' ? contact.notifyUrl.trim() : '');
+
+  if (!url) {
+    return {
+      id: 'contact',
+      level: 'warn',
+      title: 'Contact form messages notify nobody',
+      detail:
+        'New messages only show up under Messages in the admin panel. Set an ntfy URL so you hear about them.',
+    };
+  }
+  if (!/^https?:\/\//i.test(url)) {
+    return {
+      id: 'contact',
+      level: 'warn',
+      title: 'The contact notification URL is ignored',
+      detail: 'It does not start with http(s)://, so no notification is sent.',
+    };
+  }
+  return {
+    id: 'contact',
+    level: 'ok',
+    title: 'Contact form notifies you',
+    detail: 'Each new message triggers a notification.',
+  };
+}
+
+/**
+ * A site that needs an Impressum almost always needs a privacy policy too
+ * (Art. 13 GDPR). Returns null while there is neither an Impressum nor a
+ * policy, so a site that has chosen to have no legal pages is not nagged.
+ */
+export function checkPrivacy(p: {
+  legalEnabled: boolean;
+  privacyEnabled: boolean;
+  hasText: boolean;
+}): DoctorFinding | null {
+  if (p.privacyEnabled && p.hasText) {
+    return {
+      id: 'privacy',
+      level: 'ok',
+      title: 'The privacy policy is published',
+      detail: 'Shown at /privacy and linked in the footer.',
+    };
+  }
+  if (!p.legalEnabled) return null;
+  return {
+    id: 'privacy',
+    level: 'warn',
+    title: 'There is no privacy policy',
+    detail: p.hasText
+      ? 'The text exists but the privacy page is switched off, so /privacy answers 404.'
+      : 'The Impressum is on but /privacy has no text. Settings → Legal lists what this site processes, as a starting point.',
+  };
+}
+
 /**
  * The whole content directory must be writable: the wizard, the admin panel,
  * the journal, favicon upload, analytics and backup rotation all write there.
diff --git a/lib/admin/passwordHashing.ts b/lib/admin/passwordHashing.ts
new file mode 100644
index 0000000..788432e
--- /dev/null
+++ b/lib/admin/passwordHashing.ts
@@ -0,0 +1,120 @@
+/**
+ * Passwords typed into the admin panel are stored as scrypt hashes (#690).
+ *
+ * The save routes run every password field through here before writing, so
+ * gallery.yaml, settings.yaml and journal frontmatter never receive the
+ * password as typed. Reading plaintext keeps working for hand-written files
+ * (lib/auth.ts, with its deprecation warning); the doctor still reports it.
+ *
+ * ── Why the previous file is consulted ─────────────────────────────
+ *
+ * A visitor's unlock cookie is an HMAC over the *stored* value (lib/auth.ts),
+ * so replacing a hash with a fresh one, same password but a new salt, signs
+ * out everyone who had unlocked the page. The admin form keeps the plaintext
+ * in memory after a save and sends it again with the next one. Hashing it
+ * again each time would log visitors out on every unrelated edit. So a
+ * plaintext value that an existing hash already verifies keeps that hash.
+ */
+
+import { generateScryptHash, isScryptHash, verifyScrypt } from '../password';
+
+const BCRYPT_RE = /^\$2[aby]\$/;
+
+/** Every scrypt hash stored under one of `keys`, anywhere in the document. */
+export function collectHashes(node: unknown, keys: ReadonlySet<string>): string[] {
+  const found: string[] = [];
+  const walk = (value: unknown) => {
+    if (Array.isArray(value)) value.forEach(walk);
+    else if (value && typeof value === 'object') {
+      for (const [k, v] of Object.entries(value)) {
+        if (keys.has(k) && typeof v === 'string' && isScryptHash(v)) found.push(v);
+        else walk(v);
+      }
+    }
+  };
+  walk(node);
+  return found;
+}
+
+/**
+ * The value to store for one password field. Empty stays empty (no password),
+ * a hash stays as it is, and bcrypt is left alone for the doctor to report,
+ * since it cannot be verified any more and re-hashing it would lock the page
+ * with the hash string as its password.
+ */
+export async function hashPassword(value: string, previousHashes: string[]): Promise<string> {
+  if (!value || isScryptHash(value) || BCRYPT_RE.test(value)) return value;
+  for (const hash of previousHashes) {
+    if (await verifyScrypt(value, hash)) return hash;
+  }
+  return generateScryptHash(value);
+}
+
+/**
+ * A copy of `node` with every string under one of `keys` hashed. `previous` is
+ * the document currently on disk, whose hashes are reused where they match.
+ */
+export async function hashPasswordKeys<T>(
+  node: T,
+  keys: ReadonlySet<string>,
+  previous: unknown,
+): Promise<T> {
+  const previousHashes = collectHashes(previous, keys);
+  const walk = async (value: unknown): Promise<unknown> => {
+    if (Array.isArray(value)) return Promise.all(value.map(walk));
+    if (value && typeof value === 'object') {
+      const out: Record<string, unknown> = {};
+      for (const [k, v] of Object.entries(value)) {
+        out[k] =
+          keys.has(k) && typeof v === 'string'
+            ? await hashPassword(v, previousHashes)
+            : await walk(v);
+      }
+      return out;
+    }
+    return value;
+  };
+  return (await walk(node)) as T;
+}
+
+const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---/;
+const PASSWORD_LINE_RE = /^(\s*password\s*:\s*)(.*?)\s*$/m;
+
+function unquote(raw: string): string {
+  if (raw.length >= 2 && raw.startsWith('"') && raw.endsWith('"')) {
+    return raw.slice(1, -1).replace(/\\([\\"])/g, '$1');
+  }
+  if (raw.length >= 2 && raw.startsWith("'") && raw.endsWith("'")) return raw.slice(1, -1);
+  return raw;
+}
+
+function frontmatterPassword(markdown: string | null): string | null {
+  const block = markdown?.match(FRONTMATTER_RE)?.[1];
+  const line = block?.match(PASSWORD_LINE_RE);
+  return line ? unquote(line[2]) : null;
+}
+
+/**
+ * The journal entry with its `password:` frontmatter line hashed. Only that
+ * line changes: running the whole entry through parse and serialize would
+ * also rewrite everything else the author wrote.
+ */
+export async function hashFrontmatterPassword(
+  markdown: string,
+  previousMarkdown: string | null,
+): Promise<string> {
+  const block = markdown.match(FRONTMATTER_RE);
+  if (!block) return markdown;
+  const line = block[1].match(PASSWORD_LINE_RE);
+  if (!line) return markdown;
+
+  const value = unquote(line[2]);
+  const previous = frontmatterPassword(previousMarkdown);
+  const hashed = await hashPassword(value, previous && isScryptHash(previous) ? [previous] : []);
+  if (hashed === value) return markdown;
+
+  // Replacer functions, not strings: a `$` in the author's title would
+  // otherwise be read as a replacement pattern.
+  const newBlock = block[1].replace(PASSWORD_LINE_RE, () => `${line[1]}"${hashed}"`);
+  return markdown.replace(block[1], () => newBlock);
+}
diff --git a/lib/admin/yaml-service.ts b/lib/admin/yaml-service.ts
index 2fc17b5..271f0e4 100644
--- a/lib/admin/yaml-service.ts
+++ b/lib/admin/yaml-service.ts
@@ -120,7 +120,8 @@ export async function listBackups(filename: string): Promise<string[]> {
  * readable file over content/settings.yaml — which the admin GET endpoints then
  * hand straight back.
  */
-const BACKUP_FILENAME = /^(gallery\.yaml|settings\.yaml|about\.md)\.[\w-]+\.(pre-restore\.)?bak$/;
+const BACKUP_FILENAME =
+  /^(gallery\.yaml|settings\.yaml|about\.md|privacy\.md)\.[\w-]+\.(pre-restore\.)?bak$/;
 
 /** Restore a specific backup. */
 export async function restoreBackup(backupFilename: string): Promise<void> {
diff --git a/lib/cdn.ts b/lib/cdn.ts
new file mode 100644
index 0000000..8f4d089
--- /dev/null
+++ b/lib/cdn.ts
@@ -0,0 +1,69 @@
+/**
+ * CDN mode — serve photos and videos through a pull CDN.
+ *
+ * With `CDN_URL` set, every image and video URL the server renders points at
+ * the CDN instead of this host: `https://cdn.example.com/api/image/<token>…`.
+ * The CDN is configured with this server as its origin, so a cache miss is
+ * fetched from `/api/image` exactly as a browser would, and every hit after
+ * that never reaches the server — or the Immich box behind it — at all.
+ *
+ * This works because the image and video routes are already CDN-shaped: the
+ * URL is the whole capability (an opaque, deterministic token plus size, width,
+ * quality and the IMAGE_CACHE_VERSION buster), the response does not depend on
+ * cookies, and successful responses are `public, max-age=31536000, immutable`.
+ *
+ * Pages, `/_next` assets, EXIF, the map, downloads and every admin route stay
+ * on this host. Pages are rendered per request, and the others either carry a
+ * cookie check or are small enough not to matter.
+ *
+ * **A site-wide password turns CDN mode off.** On a locked site the image route
+ * checks the visitor's unlock cookie, and a CDN would answer from its cache
+ * without asking — every photo would be public to anyone holding a URL. So the
+ * URLs quietly stay on this host while `sitePassword` is set, whatever CDN_URL
+ * says, and the diagnostics page reports why.
+ */
+
+import { env } from './env';
+import { getConfigOrNull } from './config';
+
+let warnedLocked = false;
+
+/**
+ * The prefix to put in front of `/api/image/…` and `/api/video/…`, or `''`
+ * to keep them relative. Evaluated per call, because the site password can be
+ * switched on from the admin panel without a restart.
+ */
+export function cdnBase(): string {
+  const base = env.CDN_URL;
+  if (!base) return '';
+
+  let locked: boolean;
+  try {
+    locked = !!getConfigOrNull()?.sitePassword;
+  } catch {
+    // An unreadable config renders the setup screen; no image URLs are made.
+    locked = true;
+  }
+
+  if (locked) {
+    if (!warnedLocked) {
+      warnedLocked = true;
+      console.warn(
+        '[CDN] CDN_URL is set, but the site is password-protected — serving photos from this ' +
+          'server so the password keeps covering them.',
+      );
+    }
+    return '';
+  }
+  return base;
+}
+
+/**
+ * The CDN's origin, for the Content-Security-Policy's `img-src` and
+ * `media-src`. Independent of the site password: allowing an origin the page
+ * happens not to use costs nothing, and the proxy that builds the policy runs
+ * before the config is consulted.
+ */
+export function cdnOrigin(): string | null {
+  return env.CDN_URL ? new URL(env.CDN_URL).origin : null;
+}
diff --git a/lib/config/index.ts b/lib/config/index.ts
index 04d20c2..81c9fb2 100644
--- a/lib/config/index.ts
+++ b/lib/config/index.ts
@@ -25,6 +25,11 @@ import {
   GalleryYaml,
   SettingsYaml,
   GridConfig,
+  LegalConfig,
+  ContactConfig,
+  CONTACT_RETENTION_DEFAULT,
+  CONTACT_RETENTION_MAX,
+  isHttpUrl,
 } from './schema';
 
 export * from './schema';
@@ -171,6 +176,69 @@ export function sanitizeNavLinks(
   return links;
 }
 
+/**
+ * The `legal:` block of settings.yaml, as the Impressum page renders it.
+ *
+ * `contactUrl` ends up in an `href`, so it gets the same rule as navLinks:
+ * anything that is not http(s) is dropped with a warning, which keeps a
+ * `javascript:` URL in hand-edited YAML off the page without taking it down.
+ * Empty strings become undefined so the page can test fields with `&&`.
+ */
+export function resolveLegal(raw?: Partial<LegalConfig>): LegalConfig {
+  const opt = (value?: string) => value?.trim() || undefined;
+  let contactUrl = opt(raw?.contactUrl);
+  if (contactUrl && !isHttpUrl(contactUrl)) {
+    console.warn(
+      `[Folio] settings.yaml legal.contactUrl: dropping ${JSON.stringify(contactUrl)} — ` +
+        'only http(s) URLs are allowed.',
+    );
+    contactUrl = undefined;
+  }
+  return {
+    enabled: raw?.enabled === true,
+    heading: opt(raw?.heading),
+    name: raw?.name || '',
+    address: raw?.address || '',
+    zipCity: raw?.zipCity || '',
+    country: raw?.country || '',
+    email: opt(raw?.email),
+    phone: opt(raw?.phone),
+    contactUrl,
+    contactLabel: opt(raw?.contactLabel),
+    taxId: opt(raw?.taxId),
+    vatId: opt(raw?.vatId),
+    extraInfo: opt(raw?.extraInfo),
+  };
+}
+
+/**
+ * The `contact:` block. `CONTACT_NOTIFY_URL` wins over `notifyUrl`, the same
+ * precedence SITE_PASSWORD has: an ntfy topic URL is as good as a password to
+ * anyone who wants to spam the owner's phone, so it may live outside the YAML.
+ * A non-http(s) URL is dropped with a warning, like `legal.contactUrl`.
+ */
+export function resolveContact(
+  raw?: SettingsYaml['contact'],
+  envNotifyUrl?: string,
+): ContactConfig {
+  let notifyUrl = envNotifyUrl?.trim() || raw?.notifyUrl?.trim() || undefined;
+  if (notifyUrl && !isHttpUrl(notifyUrl)) {
+    console.warn(
+      `[Folio] contact.notifyUrl: dropping ${JSON.stringify(notifyUrl)} — only http(s) URLs are allowed.`,
+    );
+    notifyUrl = undefined;
+  }
+  const days = raw?.retentionDays;
+  return {
+    enabled: raw?.enabled === true,
+    notifyUrl,
+    retentionDays:
+      typeof days === 'number' && Number.isFinite(days)
+        ? clamp(Math.round(days), 1, CONTACT_RETENTION_MAX)
+        : CONTACT_RETENTION_DEFAULT,
+  };
+}
+
 /** The parts of AppConfig that come from gallery.yaml. */
 export interface GalleryDerivation {
   albums: string[];
@@ -561,6 +629,8 @@ export function getConfig(): AppConfig {
       theme: resolveTheme(DEFAULT_PRESET),
       footer: null,
       legal: { enabled: false, name: '', address: '', zipCity: '', country: '' },
+      contact: { enabled: false, retentionDays: CONTACT_RETENTION_DEFAULT },
+      privacy: { enabled: false },
       map: false,
       transitions: false,
       scrollToTop: false,
@@ -666,18 +736,9 @@ export function getConfig(): AppConfig {
           website: settings.footer.website,
         }
       : null,
-    legal: {
-      enabled: settings.legal?.enabled === true,
-      name: settings.legal?.name || '',
-      address: settings.legal?.address || '',
-      zipCity: settings.legal?.zipCity || '',
-      country: settings.legal?.country || '',
-      email: settings.legal?.email,
-      phone: settings.legal?.phone,
-      taxId: settings.legal?.taxId,
-      vatId: settings.legal?.vatId,
-      extraInfo: settings.legal?.extraInfo,
-    },
+    legal: resolveLegal(settings.legal),
+    contact: resolveContact(settings.contact, env.CONTACT_NOTIFY_URL),
+    privacy: { enabled: settings.privacy?.enabled !== false },
     map: settings.map === true,
     transitions: settings.transitions !== false,
     scrollToTop: settings.scrollToTop !== false,
diff --git a/lib/config/schema.ts b/lib/config/schema.ts
index a504f91..ad1a244 100644
--- a/lib/config/schema.ts
+++ b/lib/config/schema.ts
@@ -70,22 +70,58 @@ export interface FooterConfig {
   website?: string;
 }
 
+/**
+ * Whether a URL may go into an `href` taken from settings: http(s) only, so a
+ * `javascript:` or `data:` URL in hand-edited YAML never reaches a link.
+ */
+export function isHttpUrl(url: string): boolean {
+  return /^https?:\/\//i.test(url.trim());
+}
+
 export interface LegalConfig {
   enabled: boolean;
+  /** Replaces the statute line under the title ("Angaben gemäß § 5 DDG"). */
+  heading?: string;
   name: string;
   address: string;
   zipCity: string;
   country: string;
   email?: string;
   phone?: string;
+  /** Second contact channel next to email, e.g. a contact form. http(s) only. */
+  contactUrl?: string;
+  contactLabel?: string;
   taxId?: string;
   vatId?: string;
   extraInfo?: string;
 }
 
+/** The built-in contact form (`/contact`, #702). */
+export interface ContactConfig {
+  enabled: boolean;
+  /**
+   * Where a "new message" notification is POSTed, e.g. an ntfy topic URL.
+   * `CONTACT_NOTIFY_URL` overrides the settings.yaml value. http(s) only.
+   */
+  notifyUrl?: string;
+  /** Messages older than this are deleted. */
+  retentionDays: number;
+}
+
+export const CONTACT_RETENTION_DEFAULT = 90;
+export const CONTACT_RETENTION_MAX = 365;
+
 export interface ThemeConfig {
   preset: string;
   accent: string;
+  /**
+   * The accent for one colour mode, where a preset's single `accent` fails
+   * contrast against that mode's background (Minimal's black on its black dark
+   * mode, say). Only presets set these, and resolveTheme keeps them only while
+   * the owner uses the preset's own accent. See accentForMode().
+   */
+  accentDark?: string;
+  accentLight?: string;
   fonts: { heading: string; body: string; caption: string };
   radius: number;
   photoFrame: 'none' | 'passepartout' | 'shadow';
@@ -217,6 +253,9 @@ export interface AppConfig {
   theme: ThemeConfig;
   footer: FooterConfig | null;
   legal: LegalConfig;
+  contact: ContactConfig;
+  /** /privacy, shown while this is on and content/privacy.md has text (#699). */
+  privacy: { enabled: boolean };
   map: boolean;
   transitions: boolean;
   /** Floating back-to-top arrow in the frontend. */
@@ -399,6 +438,8 @@ export interface SettingsYaml {
   };
   footer?: FooterConfig;
   legal?: Partial<LegalConfig>;
+  contact?: { enabled?: boolean; notifyUrl?: string; retentionDays?: number };
+  privacy?: { enabled?: boolean };
   /** EXPERIMENTAL: external links appended to the header navigation. */
   navLinks?: Array<{ label?: string; url?: string }>;
   protection?: {
diff --git a/lib/config/settingsSchema.ts b/lib/config/settingsSchema.ts
index 75e4d21..ca8fe1a 100644
--- a/lib/config/settingsSchema.ts
+++ b/lib/config/settingsSchema.ts
@@ -96,18 +96,25 @@ export const settingsSchema = z.looseObject({
   legal: z
     .looseObject({
       enabled: bool,
+      heading: str,
       name: str,
       address: str,
       zipCity: str,
       country: str,
       email: str,
       phone: str,
+      contactUrl: str,
+      contactLabel: str,
       taxId: str,
       vatId: str,
       extraInfo: str,
     })
     .optional(),
 
+  contact: z.looseObject({ enabled: bool, notifyUrl: str, retentionDays: num }).optional(),
+
+  privacy: z.looseObject({ enabled: bool }).optional(),
+
   navLinks: z.array(z.looseObject({ label: str, url: str })).optional(),
 
   protection: z.looseObject({ disableRightClick: bool, disableImageDrag: bool }).optional(),
diff --git a/lib/config/theme.ts b/lib/config/theme.ts
index ff9cfca..f5ea47f 100644
--- a/lib/config/theme.ts
+++ b/lib/config/theme.ts
@@ -27,6 +27,7 @@ export const THEME_PRESETS: Record<string, ThemeConfig> = {
   minimal: {
     preset: 'minimal',
     accent: '#000000',
+    accentDark: '#ffffff',
     fonts: { heading: 'Geist', body: 'Geist', caption: 'IBM Plex Mono' },
     radius: 0,
     photoFrame: 'none',
@@ -37,6 +38,7 @@ export const THEME_PRESETS: Record<string, ThemeConfig> = {
   editorial: {
     preset: 'editorial',
     accent: '#8B2500',
+    accentDark: '#d9602a',
     fonts: { heading: 'Bodoni Moda', body: 'Newsreader', caption: 'Spectral' },
     radius: 0,
     photoFrame: 'shadow',
@@ -47,6 +49,7 @@ export const THEME_PRESETS: Record<string, ThemeConfig> = {
   classic: {
     preset: 'classic',
     accent: '#c49a3c',
+    accentLight: '#8d6f2b',
     fonts: { heading: 'Cinzel', body: 'Crimson Pro', caption: 'Crimson Pro' },
     radius: 12,
     photoFrame: 'passepartout',
@@ -57,6 +60,7 @@ export const THEME_PRESETS: Record<string, ThemeConfig> = {
   noir: {
     preset: 'noir',
     accent: '#ff6b35',
+    accentLight: '#c2410c',
     fonts: { heading: 'Libre Baskerville', body: 'Source Sans 3', caption: 'Space Mono' },
     radius: 0,
     photoFrame: 'passepartout',
@@ -67,6 +71,7 @@ export const THEME_PRESETS: Record<string, ThemeConfig> = {
   monograph: {
     preset: 'monograph',
     accent: '#333333',
+    accentDark: '#c8c8c8',
     fonts: { heading: 'Instrument Serif', body: 'Inter', caption: 'IBM Plex Mono' },
     radius: 0,
     photoFrame: 'none',
@@ -110,9 +115,71 @@ function resolveRadius(raw: unknown, fallback: number): number {
   return Math.min(THEME_RADIUS_MAX, Math.max(0, raw));
 }
 
-/** `--accent` and `--accent-dim` (app/layout.tsx) take this verbatim. */
+/**
+ * The one form of `--accent` every consumer survives: a `#rrggbb` hex.
+ * A value that is not a colour at all is worse than it looks —
+ * `background: var(--accent, #e60012)` does not fall back, because the
+ * variable is *defined*; the declaration becomes invalid at computed-value
+ * time and the background comes out transparent, leaving the button text on
+ * the surface below. Named and functional colours (`red`, `rgb(230 0 18)`)
+ * would render, but `onAccent()` only reads hex and would answer white for
+ * them whatever their lightness. Parsing arbitrary CSS colour syntax
+ * server-side is a dependency this does not need: hex is what the admin's
+ * picker writes and what every preset uses, so everything else falls back to
+ * the preset, the same treatment `resolveRadius` gives `radius`.
+ */
+const ACCENT_HEX = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+
+/** Trim, case-fold and widen to `#rrggbb`; refuse anything that is not hex. */
 function resolveAccent(raw: unknown, fallback: string): string {
-  return typeof raw === 'string' && raw.trim() ? raw : fallback;
+  if (typeof raw !== 'string') return fallback;
+  const value = raw.trim();
+  if (!ACCENT_HEX.test(value)) return fallback;
+  const hex = value.slice(1).toLowerCase();
+  if (hex.length === 3) {
+    return `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+  }
+  // 8-digit keeps the hue and drops the alpha — an accent a visitor can read
+  // is worth more than the translucency the 12%-dim variants approximate anyway.
+  return `#${hex.slice(0, 6)}`;
+}
+
+/** The accent a colour mode renders with (`--accent-dark` / `--accent-light`). */
+export function accentForMode(theme: ThemeConfig, mode: 'dark' | 'light'): string {
+  return (mode === 'dark' ? theme.accentDark : theme.accentLight) ?? theme.accent;
+}
+
+/** WCAG relative luminance of a `#rgb` / `#rrggbb` colour, or null for anything else. */
+export function relativeLuminance(color: string): number | null {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
+  if (!m) return null;
+  const hex = m[1].length === 3 ? [...m[1]].map((c) => c + c).join('') : m[1];
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/** WCAG contrast ratio of two hex colours; null when either is not hex. */
+export function contrastRatio(a: string, b: string): number | null {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  if (la === null || lb === null) return null;
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+
+/**
+ * Text colour for a button filled with the accent (`--on-accent`): black or
+ * white, whichever contrasts more. Buttons used `--bg-primary` for this, which
+ * is the one colour guaranteed to vanish when the accent matches the page —
+ * Minimal's black-on-black gate button. A non-hex accent keeps white.
+ */
+export function onAccent(accent: string): string {
+  const toBlack = contrastRatio(accent, '#000000');
+  const toWhite = contrastRatio(accent, '#ffffff');
+  if (toBlack === null || toWhite === null) return '#ffffff';
+  return toBlack > toWhite ? '#000000' : '#ffffff';
 }
 
 /** `String(theme.grain)`/`String(theme.headerDot)` become a `data-*` attribute
@@ -144,9 +211,17 @@ export function resolveTheme(raw?: SettingsYaml['theme']): ThemeConfig {
     );
   }
 
+  const accent = resolveAccent(raw.accent, base.accent);
+  // An accent of the owner's own is their choice in both modes. The preset's
+  // per-mode variants stand in only for the preset's accent — which the admin
+  // may also have written into settings.yaml verbatim.
+  const ownAccent = accent.trim().toLowerCase() !== base.accent.toLowerCase();
+
   return {
     preset: baseName,
-    accent: resolveAccent(raw.accent, base.accent),
+    accent,
+    ...(!ownAccent && base.accentDark ? { accentDark: base.accentDark } : {}),
+    ...(!ownAccent && base.accentLight ? { accentLight: base.accentLight } : {}),
     fonts: {
       heading: raw.fonts?.heading ?? base.fonts.heading,
       body: raw.fonts?.body ?? base.fonts.body,
@@ -164,9 +239,16 @@ export function resolveTheme(raw?: SettingsYaml['theme']): ThemeConfig {
   };
 }
 
-export function getGoogleFontsUrl(theme: ThemeConfig): string {
-  const weights = '300;400;500;600';
-  const families = [...new Set([theme.fonts.heading, theme.fonts.body, theme.fonts.caption])];
-  const params = families.map((f) => `family=${f.replace(/ /g, '+')}:wght@${weights}`).join('&');
-  return `https://fonts.googleapis.com/css2?${params}&display=swap`;
+/**
+ * The stylesheet for a set of Google Fonts families, served from this origin
+ * by /api/fonts/css (lib/fonts.ts) so a visitor's browser never contacts
+ * Google. Client-safe: the dev toolbar builds the same URL.
+ */
+export function getFontsCssUrl(families: string[]): string {
+  const unique = [...new Set(families)];
+  return `/api/fonts/css?${unique.map((f) => `family=${encodeURIComponent(f)}`).join('&')}`;
+}
+
+export function getThemeFontsUrl(theme: ThemeConfig): string {
+  return getFontsCssUrl([theme.fonts.heading, theme.fonts.body, theme.fonts.caption]);
 }
diff --git a/lib/contact.ts b/lib/contact.ts
new file mode 100644
index 0000000..3183a2f
--- /dev/null
+++ b/lib/contact.ts
@@ -0,0 +1,233 @@
+/**
+ * The built-in contact form (#702): validation, storage and notification.
+ *
+ * Messages stay on this server, one JSON file each in `content/messages/`.
+ * No SMTP and no form service: the owner reads them in the admin panel and
+ * learns about new ones through an optional plain-text POST to
+ * `contact.notifyUrl` (an ntfy topic, typically). The notification carries
+ * nothing about the sender: no name, no address, no text. A push service is a
+ * third party, and a fixed "new message" needs no line in the privacy policy.
+ *
+ * Retention is enforced on every read and write rather than by a timer, so
+ * nothing older than `retentionDays` survives the next visit to the inbox or
+ * the next submission. The privacy policy can then state a fixed period.
+ */
+
+import crypto from 'node:crypto';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+export interface ContactMessage {
+  id: string;
+  /** ISO timestamp. */
+  receivedAt: string;
+  name: string;
+  email: string;
+  message: string;
+  read: boolean;
+}
+
+export interface ContactInput {
+  name?: unknown;
+  email?: unknown;
+  message?: unknown;
+  /** Honeypot: a field hidden from people. Anything in it means a bot. */
+  website?: unknown;
+  /** When the form was rendered (epoch ms), for the minimum fill time. */
+  startedAt?: unknown;
+}
+
+export const LIMITS = { name: 100, email: 200, message: 5000 } as const;
+
+/** Faster than a person can type a message; slower than a bot posting on load. */
+export const MIN_FILL_MS = 3000;
+
+/** A form older than this was not filled in just now. */
+const MAX_FILL_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * Hard cap on stored messages. A flood that gets past the rate limit fills the
+ * inbox and then stops, rather than filling the disk. New messages are refused
+ * at the cap instead of evicting old ones: a flood must not delete real mail.
+ */
+export const MAX_MESSAGES = 500;
+
+const ID_RE = /^\d{13}-[a-f0-9]{8}$/;
+// One `@`, a local part, and a domain of dot-separated labels. The labels
+// exclude the dot, so each character can match only one way: the previous
+// pattern let `[^…]+\.[^…]+` split a dotted domain in many places and ran in
+// polynomial time on crafted input (CodeQL js/polynomial-redos).
+const EMAIL_RE = /^[^\s@<>()[\]\\,;:"]+@[^\s@<>()[\]\\,;:".]+(?:\.[^\s@<>()[\]\\,;:".]+)+$/;
+
+export function messagesDir(): string {
+  return path.join(process.cwd(), 'content', 'messages');
+}
+
+export type ValidationResult =
+  | { ok: true; name: string; email: string; message: string }
+  | { ok: false; reason: 'invalid' }
+  /** Looks like a bot. The route answers as if it had worked, so the bot learns nothing. */
+  | { ok: false; reason: 'spam' };
+
+export function validateContact(input: ContactInput, now = Date.now()): ValidationResult {
+  if (typeof input.website === 'string' && input.website.trim()) {
+    return { ok: false, reason: 'spam' };
+  }
+  const started = Number(input.startedAt);
+  if (!Number.isFinite(started) || now - started < MIN_FILL_MS || now - started > MAX_FILL_MS) {
+    return { ok: false, reason: 'spam' };
+  }
+
+  const text = (value: unknown) => (typeof value === 'string' ? value.trim() : '');
+  const name = text(input.name);
+  const email = text(input.email);
+  const message = text(input.message);
+
+  if (
+    !name ||
+    name.length > LIMITS.name ||
+    // Length first: the pattern never sees more than the limit.
+    email.length > LIMITS.email ||
+    !EMAIL_RE.test(email) ||
+    !message ||
+    message.length > LIMITS.message
+  ) {
+    return { ok: false, reason: 'invalid' };
+  }
+  // A name is one line. Keeping newlines out also keeps them out of the
+  // notification text and the reply subject.
+  return { ok: true, name: name.replace(/\s+/g, ' '), email, message };
+}
+
+function isMessage(value: unknown): value is ContactMessage {
+  const m = value as ContactMessage;
+  return (
+    !!m &&
+    typeof m.id === 'string' &&
+    ID_RE.test(m.id) &&
+    typeof m.receivedAt === 'string' &&
+    typeof m.name === 'string' &&
+    typeof m.email === 'string' &&
+    typeof m.message === 'string'
+  );
+}
+
+async function writeMessage(msg: ContactMessage): Promise<void> {
+  await fs.mkdir(messagesDir(), { recursive: true });
+  const target = path.join(messagesDir(), `${msg.id}.json`);
+  const tmp = `${target}.${process.pid}.tmp`;
+  await fs.writeFile(tmp, JSON.stringify(msg, null, 2), { mode: 0o600 });
+  await fs.rename(tmp, target);
+}
+
+/**
+ * Every stored message, newest first, after deleting the ones past their
+ * retention. Unreadable files are skipped rather than failing the inbox.
+ */
+export async function listMessages(
+  retentionDays: number,
+  now = Date.now(),
+): Promise<ContactMessage[]> {
+  let names: string[];
+  try {
+    names = await fs.readdir(messagesDir());
+  } catch {
+    return [];
+  }
+
+  const cutoff = now - retentionDays * 24 * 60 * 60 * 1000;
+  const messages: ContactMessage[] = [];
+  for (const name of names) {
+    const id = name.replace(/\.json$/, '');
+    if (!ID_RE.test(id) || !name.endsWith('.json')) continue;
+    const file = path.join(messagesDir(), name);
+    if (Number(id.slice(0, 13)) < cutoff) {
+      await fs.rm(file, { force: true });
+      continue;
+    }
+    try {
+      const parsed = JSON.parse(await fs.readFile(file, 'utf8'));
+      if (isMessage(parsed)) messages.push({ ...parsed, read: parsed.read === true });
+    } catch {
+      // A half-written or hand-edited file is not worth failing the inbox for.
+    }
+  }
+  return messages.sort((a, b) => b.id.localeCompare(a.id));
+}
+
+export async function saveMessage(
+  fields: { name: string; email: string; message: string },
+  retentionDays: number,
+  now = Date.now(),
+): Promise<ContactMessage | 'full'> {
+  const existing = await listMessages(retentionDays, now);
+  if (existing.length >= MAX_MESSAGES) return 'full';
+
+  const msg: ContactMessage = {
+    id: `${now}-${crypto.randomBytes(4).toString('hex')}`,
+    receivedAt: new Date(now).toISOString(),
+    ...fields,
+    read: false,
+  };
+  await writeMessage(msg);
+  return msg;
+}
+
+/** Ids come from the admin client; the pattern keeps them inside the directory. */
+export function isMessageId(id: unknown): id is string {
+  return typeof id === 'string' && ID_RE.test(id);
+}
+
+export async function setRead(id: string, read: boolean): Promise<boolean> {
+  if (!isMessageId(id)) return false;
+  const file = path.join(messagesDir(), `${id}.json`);
+  try {
+    const parsed = JSON.parse(await fs.readFile(file, 'utf8'));
+    if (!isMessage(parsed)) return false;
+    await writeMessage({ ...parsed, read });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function deleteMessage(id: string): Promise<boolean> {
+  if (!isMessageId(id)) return false;
+  try {
+    await fs.rm(path.join(messagesDir(), `${id}.json`));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Tell the owner a message arrived. Best effort: the message is already
+ * stored, so a failing push service must not fail the visitor's submission.
+ *
+ * The body is plain text, which is what ntfy expects; its `Title` and `Click`
+ * headers are ignored by endpoints that do not know them.
+ */
+export async function notifyNewMessage(
+  notifyUrl: string | undefined,
+  inboxUrl: string | null,
+): Promise<void> {
+  if (!notifyUrl) return;
+  try {
+    const headers: Record<string, string> = {
+      'Content-Type': 'text/plain; charset=utf-8',
+      Title: 'New contact form message',
+      Tags: 'envelope',
+    };
+    if (inboxUrl) headers.Click = inboxUrl;
+    const res = await fetch(notifyUrl, {
+      method: 'POST',
+      headers,
+      body: 'A new message arrived through the contact form.',
+      signal: AbortSignal.timeout(5000),
+    });
+    if (!res.ok) console.warn(`[Folio] contact: notification answered ${res.status}`);
+  } catch (err) {
+    console.warn(`[Folio] contact: notification failed: ${(err as Error).message}`);
+  }
+}
diff --git a/lib/emailObfuscation.ts b/lib/emailObfuscation.ts
new file mode 100644
index 0000000..f27d7dc
--- /dev/null
+++ b/lib/emailObfuscation.ts
@@ -0,0 +1,44 @@
+/**
+ * Email addresses kept out of the served HTML.
+ *
+ * Address harvesters read raw HTML and do not run scripts. The server writes
+ * the address reversed and base64-encoded; components/EmailLink.tsx decodes
+ * it in the browser, so visitors and screen readers get a normal, clickable
+ * address. The plain address appears neither in the HTML nor in the RSC
+ * payload, because only the encoded form is ever passed to the client.
+ *
+ * This is not encryption: anyone running a browser gets the address. It only
+ * has to defeat bulk harvesting. Client-safe, no Node APIs.
+ */
+
+function toBase64(text: string): string {
+  let binary = '';
+  for (const byte of new TextEncoder().encode(text)) binary += String.fromCharCode(byte);
+  return btoa(binary);
+}
+
+function fromBase64(encoded: string): string {
+  const binary = atob(encoded);
+  return new TextDecoder().decode(Uint8Array.from(binary, (c) => c.charCodeAt(0)));
+}
+
+export function encodeEmail(email: string): string {
+  return toBase64([...email].reverse().join(''));
+}
+
+export function decodeEmail(encoded: string): string {
+  try {
+    return [...fromBase64(encoded)].reverse().join('');
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * The no-script fallback, "name [at] example [dot] com". Weaker than the
+ * encoded form, but it keeps the address reachable for a visitor without
+ * JavaScript, which § 5 DDG asks of the Impressum.
+ */
+export function spelledOutEmail(email: string): string {
+  return email.replace('@', ' [at] ').replace(/\./g, ' [dot] ');
+}
diff --git a/lib/env.ts b/lib/env.ts
index 44c5e9a..57e5e2f 100644
--- a/lib/env.ts
+++ b/lib/env.ts
@@ -18,11 +18,17 @@ export interface Env {
   WEBHOOK_SECRET?: string;
   ADMIN_PASSWORD?: string;
   SITE_PASSWORD?: string;
+  CONTACT_NOTIFY_URL?: string;
   INSTALL_CONTENT_DIR?: string;
   /** Whether the admin dashboard may ask GitHub for the latest release. */
   UPDATE_CHECK: boolean;
   /** Absolute site URL for sitemap, feed and JSON-LD. Overrides settings.yaml. */
   SITE_URL?: string;
+  /**
+   * Base URL of a pull CDN in front of this server. Image and video URLs are
+   * rewritten onto it; see lib/cdn.ts.
+   */
+  CDN_URL?: string;
 }
 
 /**
@@ -45,6 +51,26 @@ export function normalizeApiUrl(raw: string): string {
   }
 }
 
+/**
+ * Validate CDN_URL: an absolute http(s) URL, optionally with a path prefix, no
+ * query or fragment (a query would be glued in front of the image path).
+ * Returned without trailing slash so `${base}/api/image/…` never doubles it.
+ * An unusable value returns `''`, which leaves CDN mode off.
+ */
+export function normalizeCdnUrl(raw: string | undefined): string {
+  const value = raw?.trim();
+  if (!value) return '';
+  let url: URL;
+  try {
+    url = new URL(value);
+  } catch {
+    return '';
+  }
+  if (url.protocol !== 'https:' && url.protocol !== 'http:') return '';
+  if (url.search || url.hash || url.username || url.password) return '';
+  return `${url.origin}${url.pathname}`.replace(/\/+$/, '');
+}
+
 function parseEnv(): Env {
   const urlRaw = process.env.IMMICH_API_URL;
   let apiUrl = '';
@@ -116,6 +142,13 @@ function parseEnv(): Env {
 
   if (trustedProxyHops < 0) trustedProxyHops = 0;
 
+  const cdnUrl = normalizeCdnUrl(process.env.CDN_URL);
+  if (process.env.CDN_URL?.trim() && !cdnUrl) {
+    console.warn(
+      '⚠️ CDN_URL is not an absolute http(s) URL without query string — CDN mode stays off.',
+    );
+  }
+
   return {
     IMMICH_API_URL: apiUrl,
     IMMICH_API_KEY: apiKey as string,
@@ -133,12 +166,14 @@ function parseEnv(): Env {
     WEBHOOK_SECRET: process.env.WEBHOOK_SECRET || undefined,
     ADMIN_PASSWORD: process.env.ADMIN_PASSWORD || undefined,
     SITE_PASSWORD: process.env.SITE_PASSWORD || undefined,
+    CONTACT_NOTIFY_URL: process.env.CONTACT_NOTIFY_URL || undefined,
     INSTALL_CONTENT_DIR: process.env.INSTALL_CONTENT_DIR || undefined,
     // On unless switched off: an instance that never learns about a security
     // release is the worse default. Only `false` disables it, so a typo does
     // not silently turn the check off.
     UPDATE_CHECK: process.env.UPDATE_CHECK !== 'false',
     SITE_URL: process.env.SITE_URL || undefined,
+    CDN_URL: cdnUrl || undefined,
   };
 }
 
diff --git a/lib/essaySequence.ts b/lib/essaySequence.ts
new file mode 100644
index 0000000..d3d5b72
--- /dev/null
+++ b/lib/essaySequence.ts
@@ -0,0 +1,44 @@
+/**
+ * The photos an essay actually shows, in reading order — the lightbox's
+ * sequence. Client-safe (no `fs`).
+ *
+ * EssayView receives every photo of the subpage's albums, because blocks may
+ * address them by 1-based index as well as by id. Walking that full list in the
+ * lightbox let next/prev step through photos the story never shows; the
+ * journal route already trims it (`shownAssetIds`), the subpage path cannot
+ * without breaking index references, so the trimming happens here.
+ *
+ * Mirrors EssayView's rendering rules: a pair with a missing half renders as
+ * nothing, and so does a grid left with fewer than two photos.
+ */
+import type { JournalBlock } from './journal';
+
+export function essayPhotoSequence<T extends { id: string }>(
+  blocks: JournalBlock[],
+  coverKey: string | undefined,
+  resolve: (key: string) => T | undefined,
+): T[] {
+  const out: T[] = [];
+  const seen = new Set<string>();
+  const add = (items: (T | undefined)[]) => {
+    for (const item of items) {
+      if (!item || seen.has(item.id)) continue;
+      seen.add(item.id);
+      out.push(item);
+    }
+  };
+
+  if (coverKey) add([resolve(coverKey)]);
+  for (const block of blocks) {
+    if (block.type === 'photo') {
+      add([resolve(block.assetId)]);
+    } else if (block.type === 'photo-pair') {
+      const pair = block.assetIds.map(resolve);
+      if (pair.every(Boolean)) add(pair);
+    } else if (block.type === 'photo-grid') {
+      const grid = block.assetIds.map(resolve).filter(Boolean);
+      if (grid.length >= 2) add(grid);
+    }
+  }
+  return out;
+}
diff --git a/lib/essaySource.ts b/lib/essaySource.ts
new file mode 100644
index 0000000..7923983
--- /dev/null
+++ b/lib/essaySource.ts
@@ -0,0 +1,53 @@
+/**
+ * Server-only helpers for the subpage essay (story) path in
+ * `app/[...path]/page.tsx`.
+ *
+ * A subpage can borrow a journal entry as its essay via `essayFile: <slug>`.
+ * That entry keeps its own `draft` and `password`, and they have to hold here
+ * exactly as they do at `/journal/<slug>` — otherwise the subpage becomes a
+ * second, ungated door into the same content.
+ */
+import type { ImmichAsset } from './immich';
+import { sanitizeHtml, type ParsedJournal } from './journal';
+import { assetCaption } from './urls';
+import { isAuthenticated } from './auth';
+import { loadEssayFromFile } from './admin/journal-service';
+
+export type EssayFileResult =
+  /** Readable by this visitor. */
+  | { status: 'open'; parsed: ParsedJournal }
+  /** No such entry, or a draft seen by a non-admin — both render as absent. */
+  | { status: 'missing' }
+  /** The entry has a password this visitor has not entered. */
+  | { status: 'locked'; title: string };
+
+export function resolveEssayFile(
+  slug: string,
+  visitor: { isAdmin: boolean; getCookie: (name: string) => string | undefined },
+): EssayFileResult {
+  const parsed = loadEssayFromFile(slug);
+  if (!parsed) return { status: 'missing' };
+
+  const { frontmatter } = parsed;
+  if (frontmatter.draft && !visitor.isAdmin) return { status: 'missing' };
+  if (frontmatter.password && !isAuthenticated(slug, visitor.getCookie, 'journal')) {
+    return { status: 'locked', title: frontmatter.title || slug };
+  }
+  return { status: 'open', parsed };
+}
+
+/**
+ * Caption for a photo in the essay generated from a subpage's albums.
+ *
+ * EssayView renders captions as HTML, because authored captions arrive already
+ * rendered by `renderInlineMarkdown`. An Immich description has not been
+ * through that, so it is escaped here — and it follows the `exif.caption`
+ * toggle like every other place a description is shown.
+ */
+export function generatedEssayCaption(
+  asset: Pick<ImmichAsset, 'exifInfo'>,
+  showCaption: boolean,
+): string | undefined {
+  const caption = assetCaption(asset, showCaption);
+  return caption ? sanitizeHtml(caption) : undefined;
+}
diff --git a/lib/fonts.ts b/lib/fonts.ts
new file mode 100644
index 0000000..d4fdabe
--- /dev/null
+++ b/lib/fonts.ts
@@ -0,0 +1,206 @@
+/**
+ * Google Fonts, served from this origin (#699).
+ *
+ * Linking fonts.googleapis.com sends every visitor's IP address to Google
+ * before they have agreed to anything, which LG München I (3 O 17493/20)
+ * ruled unlawful. The server fetches the stylesheet and the font files
+ * instead and hands them out itself, so the only address Google sees is the
+ * server's.
+ *
+ * A theme may name any Google font (`theme.fonts` in settings.yaml), so the
+ * fonts cannot be bundled at build time. They are fetched on first use and
+ * kept in `content/.fonts/`, which also keeps a site's fonts working when
+ * Google is unreachable later.
+ *
+ * - `/api/fonts/css?family=A&family=B` answers with Google's stylesheet, every
+ *   `fonts.gstatic.com` URL rewritten to `/api/fonts/file/<hash>.woff2`.
+ * - `/api/fonts/file/<hash>.woff2` serves a file only when some fetched
+ *   stylesheet named it, so the route cannot be used to fetch arbitrary URLs.
+ */
+
+import crypto from 'node:crypto';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+export const FONT_WEIGHTS = '300;400;500;600';
+
+/** Three slots in a theme; the dev toolbar asks for the same three. */
+export const MAX_FAMILIES = 3;
+
+const GOOGLE_CSS = 'https://fonts.googleapis.com/css2';
+const GSTATIC = 'https://fonts.gstatic.com/';
+const FETCH_TIMEOUT_MS = 5000;
+/** How long a failed stylesheet fetch is not retried, so an outage costs one timeout, not one per page. */
+const RETRY_AFTER_MS = 5 * 60 * 1000;
+
+/**
+ * Google picks the format by User-Agent. Without a current browser's it
+ * answers with TTF, which is several times larger than WOFF2.
+ */
+const BROWSER_UA =
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36';
+
+/** Google Fonts family names: letters, digits and spaces ("IBM Plex Mono", "Source Sans 3"). */
+const FAMILY_RE = /^[A-Za-z0-9 ]{1,64}$/;
+const FILE_RE = /^([a-f0-9]{32})\.woff2$/;
+
+export function fontsDir(): string {
+  return path.join(process.cwd(), 'content', '.fonts');
+}
+
+/** Valid, de-duplicated family names, or null when any name is unusable. */
+export function parseFamilies(raw: string[]): string[] | null {
+  const families = [...new Set(raw.map((f) => f.trim()))].filter(Boolean);
+  if (!families.length || families.length > MAX_FAMILIES) return null;
+  return families.every((f) => FAMILY_RE.test(f)) ? families : null;
+}
+
+function googleCssUrl(families: string[]): string {
+  const params = families
+    .map((f) => `family=${f.replace(/ /g, '+')}:wght@${FONT_WEIGHTS}`)
+    .join('&');
+  return `${GOOGLE_CSS}?${params}&display=swap`;
+}
+
+const sha = (value: string) => crypto.createHash('sha256').update(value).digest('hex').slice(0, 32);
+
+/** Every gstatic URL in a stylesheet, keyed by the file name it is served under. */
+function fileUrls(css: string): Map<string, string> {
+  const files = new Map<string, string>();
+  for (const match of css.matchAll(/url\((https:\/\/fonts\.gstatic\.com\/[^)\s'"]+)\)/g)) {
+    files.set(`${sha(match[1])}.woff2`, match[1]);
+  }
+  return files;
+}
+
+/** Google's stylesheet with every font URL pointing at this server. */
+export function rewriteCss(css: string): string {
+  return css.replace(
+    /url\((https:\/\/fonts\.gstatic\.com\/[^)\s'"]+)\)/g,
+    (_, url: string) => `url(/api/fonts/file/${sha(url)}.woff2)`,
+  );
+}
+
+/** file name → gstatic URL, for every stylesheet fetched so far. */
+const knownFiles = new Map<string, string>();
+/** stylesheet cache name → when to ask Google again. */
+const failedUntil = new Map<string, number>();
+const pending = new Map<string, Promise<unknown>>();
+
+function coalesce<T>(key: string, run: () => Promise<T>): Promise<T> {
+  const existing = pending.get(key);
+  if (existing) return existing as Promise<T>;
+  const promise = run().finally(() => pending.delete(key));
+  pending.set(key, promise);
+  return promise;
+}
+
+async function fetchWithTimeout(url: string): Promise<Response> {
+  return fetch(url, {
+    headers: { 'User-Agent': BROWSER_UA },
+    signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+  });
+}
+
+/** Write a cache file. A read-only content/ only costs the cache, not the response. */
+async function store(name: string, data: string | Uint8Array): Promise<void> {
+  try {
+    await fs.mkdir(fontsDir(), { recursive: true });
+    const target = path.join(fontsDir(), name);
+    const tmp = `${target}.${process.pid}.tmp`;
+    await fs.writeFile(tmp, data);
+    await fs.rename(tmp, target);
+  } catch (err) {
+    console.warn(`[Folio] fonts: could not cache ${name}: ${(err as Error).message}`);
+  }
+}
+
+/**
+ * Google's original stylesheet for these families, from the cache or from
+ * Google. Null when neither has it; the page then falls back to the system
+ * fonts named after each family in the theme CSS.
+ */
+export async function getGoogleCss(families: string[]): Promise<string | null> {
+  const name = `${sha(families.join('|'))}.css`;
+  const css = await coalesce(`css:${name}`, async () => {
+    try {
+      return await fs.readFile(path.join(fontsDir(), name), 'utf8');
+    } catch {
+      // Not cached yet.
+    }
+    if ((failedUntil.get(name) ?? 0) > Date.now()) return null;
+    try {
+      const res = await fetchWithTimeout(googleCssUrl(families));
+      if (!res.ok) {
+        console.warn(`[Folio] fonts: Google answered ${res.status} for ${families.join(', ')}`);
+        failedUntil.set(name, Date.now() + RETRY_AFTER_MS);
+        return null;
+      }
+      const text = await res.text();
+      await store(name, text);
+      return text;
+    } catch (err) {
+      console.warn(`[Folio] fonts: could not reach Google Fonts: ${(err as Error).message}`);
+      failedUntil.set(name, Date.now() + RETRY_AFTER_MS);
+      return null;
+    }
+  });
+  if (css) for (const [file, url] of fileUrls(css)) knownFiles.set(file, url);
+  return css;
+}
+
+/**
+ * After a restart the map is empty until a stylesheet is requested again, and
+ * a browser holding a cached stylesheet asks for the files directly. The cached
+ * stylesheets on disk name every file that may legitimately be asked for.
+ */
+async function rebuildKnownFiles(): Promise<void> {
+  let names: string[];
+  try {
+    names = await fs.readdir(fontsDir());
+  } catch {
+    return;
+  }
+  for (const name of names.filter((n) => n.endsWith('.css'))) {
+    try {
+      const css = await fs.readFile(path.join(fontsDir(), name), 'utf8');
+      for (const [file, url] of fileUrls(css)) knownFiles.set(file, url);
+    } catch {
+      // A file that vanished between readdir and read is not worth a warning.
+    }
+  }
+}
+
+/** A font file by the name the rewritten stylesheet gave it, or null. */
+export async function getFontFile(name: string): Promise<Uint8Array | null> {
+  if (!FILE_RE.test(name)) return null;
+
+  try {
+    return new Uint8Array(await fs.readFile(path.join(fontsDir(), name)));
+  } catch {
+    // Not cached yet.
+  }
+
+  return coalesce(`file:${name}`, async () => {
+    if (!knownFiles.has(name)) await rebuildKnownFiles();
+    const url = knownFiles.get(name);
+    if (!url?.startsWith(GSTATIC)) return null;
+    try {
+      const res = await fetchWithTimeout(url);
+      if (!res.ok) return null;
+      const data = new Uint8Array(await res.arrayBuffer());
+      await store(name, data);
+      return data;
+    } catch (err) {
+      console.warn(`[Folio] fonts: could not fetch ${name}: ${(err as Error).message}`);
+      return null;
+    }
+  });
+}
+
+/** Test hook: forget what earlier tests fetched. */
+export function __resetFontsForTests(): void {
+  knownFiles.clear();
+  failedUntil.clear();
+  pending.clear();
+}
diff --git a/lib/i18n/index.ts b/lib/i18n/index.ts
index 82a55c6..7688429 100644
--- a/lib/i18n/index.ts
+++ b/lib/i18n/index.ts
@@ -9,15 +9,19 @@
  * This module is **client-safe** (no `fs`). Server components read the language
  * from the config via `lib/i18n/server.ts`; client components take the resolved
  * locale from `components/I18nProvider.tsx` and look the dictionary up here.
- * Both dictionaries are small enough that shipping them together beats a
+ * The dictionaries are small enough that shipping them together beats a
  * dynamic import.
  */
 
 import { en } from './locales/en';
 import { de } from './locales/de';
+import { fr } from './locales/fr';
+import { es } from './locales/es';
+import { it } from './locales/it';
+import { nl } from './locales/nl';
 
 /** Locales with a dictionary. Anything else falls back to English. */
-export const SUPPORTED_LOCALES = ['en', 'de'] as const;
+export const SUPPORTED_LOCALES = ['en', 'de', 'fr', 'es', 'it', 'nl'] as const;
 
 export type Locale = (typeof SUPPORTED_LOCALES)[number];
 
@@ -26,14 +30,14 @@ export const DEFAULT_LOCALE: Locale = 'en';
 /** The shape every dictionary must implement — English is the reference. */
 export type Dictionary = typeof en;
 
-const DICTIONARIES: Record<Locale, Dictionary> = { en, de };
+const DICTIONARIES: Record<Locale, Dictionary> = { en, de, fr, es, it, nl };
 
 /**
  * Map a `settings.yaml: lang` value onto a locale we have strings for.
  *
  * Region subtags are accepted (`de-AT` → `de`), unknown languages fall back to
- * English. The raw value still reaches `<html lang>` — a French deployment gets
- * `lang="fr"` for screen readers and an English UI, which beats claiming to be
+ * English. The raw value still reaches `<html lang>` — a Japanese deployment gets
+ * `lang="ja"` for screen readers and an English UI, which beats claiming to be
  * English.
  */
 export function resolveLocale(lang?: string | null): Locale {
diff --git a/lib/i18n/locales/de.ts b/lib/i18n/locales/de.ts
index bca31d3..6b7afa8 100644
--- a/lib/i18n/locales/de.ts
+++ b/lib/i18n/locales/de.ts
@@ -208,15 +208,38 @@ export const de: Dictionary = {
   legal: {
     navLabel: 'Impressum',
     title: 'Impressum',
-    subtitle: 'Angaben gemäß § 5 TMG',
+    subtitle: 'Angaben gemäß § 5 DDG',
     address: 'Anschrift',
     contact: 'Kontakt',
     email: 'E-Mail',
     phone: 'Telefon',
+    contactForm: 'Kontaktformular',
     taxSection: 'Steuernummer',
     taxId: 'Steuernummer',
     vatId: 'Umsatzsteuer-ID',
     extraInfo: 'Weitere Informationen',
-    source: 'Quelle: Erstellt mit dem Impressum-Generator von eRecht24.',
+  },
+
+  contact: {
+    navLabel: 'Kontakt',
+    title: 'Kontakt',
+    subtitle: 'Schreib mir eine Nachricht',
+    name: 'Name',
+    email: 'E-Mail',
+    message: 'Nachricht',
+    submit: 'Nachricht senden',
+    sending: 'Wird gesendet…',
+    successTitle: 'Danke',
+    successText: 'Deine Nachricht ist angekommen. Ich antworte dir per E-Mail.',
+    invalid: 'Bitte fülle alle Felder aus und gib eine gültige E-Mail-Adresse an.',
+    tooMany: 'Zu viele Nachrichten in kurzer Zeit. Bitte versuch es in einer Minute noch einmal.',
+    failed: 'Die Nachricht konnte nicht gesendet werden. Bitte versuch es später noch einmal.',
+    privacy: (days: number) =>
+      `Deine Nachricht wird auf dem eigenen Server dieser Seite gespeichert, nur für die Antwort verwendet und nach ${days} ${days === 1 ? 'Tag' : 'Tagen'} gelöscht.`,
+  },
+
+  privacy: {
+    navLabel: 'Datenschutz',
+    title: 'Datenschutzerklärung',
   },
 };
diff --git a/lib/i18n/locales/en.ts b/lib/i18n/locales/en.ts
index e741e35..4dcacdb 100644
--- a/lib/i18n/locales/en.ts
+++ b/lib/i18n/locales/en.ts
@@ -211,15 +211,38 @@ export const en = {
   legal: {
     navLabel: 'Legal Notice',
     title: 'Legal Notice',
-    subtitle: 'Information pursuant to § 5 TMG',
+    subtitle: 'Information pursuant to § 5 DDG',
     address: 'Address',
     contact: 'Contact',
     email: 'Email',
     phone: 'Phone',
+    contactForm: 'Contact form',
     taxSection: 'Tax Information',
     taxId: 'Tax number',
     vatId: 'VAT ID',
     extraInfo: 'Additional Information',
-    source: 'Source: Created with the Impressum generator by eRecht24.',
+  },
+
+  contact: {
+    navLabel: 'Contact',
+    title: 'Contact',
+    subtitle: 'Write me a message',
+    name: 'Name',
+    email: 'Email',
+    message: 'Message',
+    submit: 'Send message',
+    sending: 'Sending…',
+    successTitle: 'Thank you',
+    successText: 'Your message has arrived. I will get back to you by email.',
+    invalid: 'Please fill in every field with a valid email address.',
+    tooMany: 'Too many messages in a short time. Please try again in a minute.',
+    failed: 'The message could not be sent. Please try again later.',
+    privacy: (days: number) =>
+      `Your message is stored on this site's own server, is only used to reply to you, and is deleted after ${days} ${days === 1 ? 'day' : 'days'}.`,
+  },
+
+  privacy: {
+    navLabel: 'Privacy',
+    title: 'Privacy Policy',
   },
 };
diff --git a/lib/i18n/locales/es.ts b/lib/i18n/locales/es.ts
new file mode 100644
index 0000000..b46c38d
--- /dev/null
+++ b/lib/i18n/locales/es.ts
@@ -0,0 +1,245 @@
+/**
+ * Spanish dictionary.
+ *
+ * Typed as `Dictionary` (derived from `en.ts`), so a key added to English but
+ * forgotten here fails the type-check rather than falling through to English
+ * at runtime.
+ */
+
+import type { Dictionary } from '../index';
+
+const plural = (n: number, one: string, other: string) => `${n} ${n === 1 ? one : other}`;
+
+export const es: Dictionary = {
+  dateLocale: 'es-ES',
+
+  nav: {
+    home: 'Inicio',
+    about: 'Sobre mí',
+    map: 'Mapa',
+    journal: 'Diario',
+    skipToContent: 'Saltar al contenido',
+    openMenu: 'Abrir menú',
+    closeMenu: 'Cerrar menú',
+  },
+
+  common: {
+    backTo: (label: string) => `Volver a ${label}`,
+    backToGallery: 'Volver a la galería',
+    backToJournal: 'Volver al diario',
+    email: 'Correo electrónico',
+    website: 'Sitio web',
+    home: 'Inicio',
+    photos: (n: number) => plural(n, 'foto', 'fotos'),
+    albums: (n: number) => plural(n, 'álbum', 'álbumes'),
+    collections: (n: number) => plural(n, 'colección', 'colecciones'),
+    prevAlbum: 'Álbum anterior',
+    nextAlbum: 'Álbum siguiente',
+    prevAlbumAria: (name: string) => `Álbum anterior: ${name}`,
+    nextAlbumAria: (name: string) => `Álbum siguiente: ${name}`,
+    albumNavAria: 'Navegación entre álbumes',
+    prevEntry: 'Entrada anterior',
+    nextEntry: 'Entrada siguiente',
+    prevEntryAria: (title: string) => `Entrada anterior: ${title}`,
+    nextEntryAria: (title: string) => `Entrada siguiente: ${title}`,
+    entryNavAria: 'Navegación entre entradas del diario',
+    loadingGallery: 'Cargando la galería',
+    loadingPhotos: 'Cargando fotos',
+    downloadAlbum: 'Descargar álbum',
+  },
+
+  home: {
+    enter: 'Entrar',
+  },
+
+  error: {
+    notFoundTitle: 'No encontrado',
+    notFoundText: 'Esta página no existe o el álbum ya no está publicado.',
+    errorTitle: 'Algo ha salido mal',
+    errorText:
+      'No se ha podido cargar esta página. Suele ser algo temporal: inténtalo de nuevo en un momento.',
+    siteErrorText:
+      'No se ha podido cargar este sitio. Suele ser algo temporal: inténtalo de nuevo en un momento.',
+    tryAgain: 'Reintentar',
+    reference: (digest: string) => `Referencia: ${digest}`,
+  },
+
+  download: {
+    unavailableTitle: 'Descarga no disponible',
+    notAvailable: 'Esta descarga no está disponible.',
+    rateLimited: 'Demasiadas solicitudes de descarga. Espera un momento y vuelve a intentarlo.',
+    immichUnavailable:
+      'La fototeca no está disponible en este momento. Vuelve a intentarlo en breve.',
+    back: 'Volver a la galería',
+  },
+
+  theme: {
+    switchToLight: 'Cambiar a modo claro',
+    switchToDark: 'Cambiar a modo oscuro',
+    scrollToTop: 'Volver arriba',
+  },
+
+  password: {
+    subtitle: 'Esta galería está protegida con contraseña.',
+    siteSubtitle: 'Este sitio está protegido con contraseña.',
+    placeholder: 'Introduce la contraseña',
+    submit: 'Entrar',
+    verifying: 'Verificando…',
+    incorrect: 'Contraseña incorrecta. Inténtalo de nuevo.',
+    failed: 'No se ha podido verificar la contraseña. Inténtalo más tarde.',
+  },
+
+  about: {
+    kicker: 'Sobre mí',
+    title: 'Sobre mí',
+    metaTitle: (name: string) => `Sobre mí — ${name}`,
+    portraitAlt: 'Retrato',
+    gear: 'Equipo',
+  },
+
+  map: {
+    title: 'Mapa',
+    kicker: 'Dónde',
+    subtitle: 'Dónde se tomaron las fotos',
+    loading: 'Cargando el mapa…',
+    loadFailed: (status: number) => `No se pudieron cargar los datos del mapa (${status})`,
+    initFailed: 'No se pudo inicializar el mapa',
+  },
+
+  subpage: {
+    collectionKicker: (index: string) => `${index} — Colección`,
+    sectionsNav: 'Secciones',
+    coverAria: (albumName: string, count: string) => `${albumName}, ${count}`,
+    nextSubpage: 'Siguiente',
+    nextSubpageAria: (name: string) => `Siguiente: ${name}`,
+  },
+
+  journal: {
+    title: 'Diario',
+    kicker: 'Historias y ensayos',
+    subtitle: 'Ensayos fotográficos, historias visuales y notas de campo.',
+    description: 'Ensayos fotográficos, relatos de viaje y diarios entre bastidores.',
+    entryDescription: 'Entrada del diario',
+    empty: 'Todavía no hay entradas publicadas.',
+    readStory: 'Leer historia →',
+    minRead: (n: number) => `${n} min de lectura`,
+    draft: 'Borrador',
+    by: (author: string) => `por ${author}`,
+    notFound: 'No encontrado',
+  },
+
+  lightbox: {
+    viewer: 'Visor de imágenes',
+    openPhoto: (n: number) => `Ver foto ${n}`,
+    close: 'Cerrar',
+    closeTitle: 'Cerrar (Esc)',
+    previous: 'Foto anterior',
+    previousTitle: 'Foto anterior (flecha izquierda)',
+    next: 'Foto siguiente',
+    nextTitle: 'Foto siguiente (flecha derecha)',
+    toggleInfo: 'Mostrar/ocultar información',
+    toggleInfoTitle: 'Mostrar/ocultar información (i)',
+    hideInfo: 'Ocultar info',
+    info: 'Info',
+    loading: 'Cargando…',
+    camera: 'Cámara',
+    lens: 'Objetivo',
+    focalLength: 'Distancia focal',
+    aperture: 'Apertura',
+    shutter: 'Obturación',
+    iso: 'ISO',
+    location: 'Ubicación',
+    noExif: 'No hay datos EXIF disponibles',
+    copyLink: 'Copiar enlace a esta foto',
+    copyLinkTitle: 'Copiar enlace a esta foto (c)',
+    copyLinkShort: 'Enlace',
+    copied: 'Copiado',
+    copyManual: 'Copia este enlace',
+    shortcuts: 'Atajos de teclado',
+    shortcutNavigate: 'Foto anterior / siguiente',
+    shortcutInfo: 'Información de la foto',
+    shortcutFullscreen: 'Pantalla completa',
+    shortcutExitFullscreen: 'Salir de pantalla completa',
+    download: 'Descargar el archivo original',
+    downloadTitle: 'Descargar el archivo original (d)',
+    downloadShort: 'Original',
+    shortcutDownload: 'Descargar el original',
+    shortcutSlideshow: 'Presentación',
+    shortcutSlideshowRunning: (seconds: number) => `Presentación — cada ${seconds} s`,
+    slideshowStopped: 'Presentación detenida',
+    slideshowRunning: (seconds: number) => `Presentación en curso, avanza cada ${seconds} segundos`,
+    shortcutCopyLink: 'Copiar enlace a esta foto',
+    shortcutList: 'Esta lista',
+    shortcutClose: 'Cerrar el visor',
+  },
+
+  proofing: {
+    addFavorite: 'Añadir favorito',
+    removeFavorite: 'Quitar favorito',
+    addToFavorites: 'Añadir a favoritos',
+    removeFromFavorites: 'Quitar de favoritos',
+    saved: 'Guardado',
+    favorite: 'Favorito',
+    showAll: 'Mostrar todo',
+    selected: (n: number) => `❤️ ${n} ${n === 1 ? 'seleccionada' : 'seleccionadas'}`,
+    shareExport: 'Compartir y exportar',
+    modalTitle: (n: number) => `❤️ Selección (${n})`,
+    closeModal: 'Cerrar ventana',
+    intro: (n: number) =>
+      `Has seleccionado ${plural(n, 'foto', 'fotos')}. Elige una opción de exportación para compartir tu selección:`,
+    copyLink: 'Copiar enlace para compartir',
+    linkCopied: '¡Enlace copiado!',
+    copyList: 'Copiar lista de texto (#1, #2…)',
+    listCopied: '¡Lista copiada!',
+    copyManualLink: 'Copia este enlace',
+    copyManualList: 'Copia esta lista',
+    sendEmail: '✉️ Enviar correo al fotógrafo',
+    downloadSelected: 'Descargar selección (.zip)',
+    clearSelection: 'Borrar selección',
+    confirmClear: '¿Quitar todos los favoritos seleccionados?',
+    listEmpty: (albumName: string) => `${albumName}: ninguna foto seleccionada.`,
+    listSummary: (albumName: string, count: number, indices: string) =>
+      `${albumName} — Fotos seleccionadas (${count}): ${indices}`,
+    mailSubject: (n: number) => `Selección de fotos (${n})`,
+    mailBody: (list: string, url: string) =>
+      `Hola:\n\nEsta es mi selección de fotos:\n\n${list}\n\nEnlace: ${url}\n\nUn saludo,`,
+  },
+
+  legal: {
+    navLabel: 'Aviso legal',
+    title: 'Aviso legal',
+    subtitle: 'Información conforme al § 5 DDG',
+    address: 'Dirección',
+    contact: 'Contacto',
+    email: 'Correo electrónico',
+    phone: 'Teléfono',
+    contactForm: 'Formulario de contacto',
+    taxSection: 'Información fiscal',
+    taxId: 'Número de identificación fiscal',
+    vatId: 'Número de IVA',
+    extraInfo: 'Información adicional',
+  },
+
+  contact: {
+    navLabel: 'Contacto',
+    title: 'Contacto',
+    subtitle: 'Escríbeme un mensaje',
+    name: 'Nombre',
+    email: 'Correo electrónico',
+    message: 'Mensaje',
+    submit: 'Enviar mensaje',
+    sending: 'Enviando…',
+    successTitle: 'Gracias',
+    successText: 'Tu mensaje ha llegado. Te responderé por correo electrónico.',
+    invalid: 'Rellena todos los campos con una dirección de correo válida.',
+    tooMany: 'Demasiados mensajes en poco tiempo. Inténtalo de nuevo en un minuto.',
+    failed: 'No se ha podido enviar el mensaje. Inténtalo más tarde.',
+    privacy: (days: number) =>
+      `Tu mensaje se guarda en el propio servidor de este sitio, solo se usa para responderte y se borra después de ${days} ${days === 1 ? 'día' : 'días'}.`,
+  },
+
+  privacy: {
+    navLabel: 'Privacidad',
+    title: 'Política de privacidad',
+  },
+};
diff --git a/lib/i18n/locales/fr.ts b/lib/i18n/locales/fr.ts
new file mode 100644
index 0000000..6277343
--- /dev/null
+++ b/lib/i18n/locales/fr.ts
@@ -0,0 +1,246 @@
+/**
+ * French dictionary.
+ *
+ * Typed as `Dictionary` (derived from `en.ts`), so a key added to English but
+ * forgotten here fails the type-check rather than falling through to English
+ * at runtime.
+ */
+
+import type { Dictionary } from '../index';
+
+const plural = (n: number, one: string, other: string) => `${n} ${n === 1 ? one : other}`;
+
+export const fr: Dictionary = {
+  dateLocale: 'fr-FR',
+
+  nav: {
+    home: 'Accueil',
+    about: 'À propos',
+    map: 'Carte',
+    journal: 'Journal',
+    skipToContent: 'Aller au contenu',
+    openMenu: 'Ouvrir le menu',
+    closeMenu: 'Fermer le menu',
+  },
+
+  common: {
+    backTo: (label: string) => `Retour à ${label}`,
+    backToGallery: 'Retour à la galerie',
+    backToJournal: 'Retour au journal',
+    email: 'E-mail',
+    website: 'Site web',
+    home: 'Accueil',
+    photos: (n: number) => plural(n, 'photo', 'photos'),
+    albums: (n: number) => plural(n, 'album', 'albums'),
+    collections: (n: number) => plural(n, 'collection', 'collections'),
+    prevAlbum: 'Album précédent',
+    nextAlbum: 'Album suivant',
+    prevAlbumAria: (name: string) => `Album précédent : ${name}`,
+    nextAlbumAria: (name: string) => `Album suivant : ${name}`,
+    albumNavAria: 'Navigation entre les albums',
+    prevEntry: 'Article précédent',
+    nextEntry: 'Article suivant',
+    prevEntryAria: (title: string) => `Article précédent : ${title}`,
+    nextEntryAria: (title: string) => `Article suivant : ${title}`,
+    entryNavAria: 'Navigation entre les articles du journal',
+    loadingGallery: 'Chargement de la galerie',
+    loadingPhotos: 'Chargement des photos',
+    downloadAlbum: 'Télécharger l’album',
+  },
+
+  home: {
+    enter: 'Entrer',
+  },
+
+  error: {
+    notFoundTitle: 'Page introuvable',
+    notFoundText: 'Cette page n’existe pas, ou l’album n’est plus publié.',
+    errorTitle: 'Une erreur est survenue',
+    errorText:
+      'Cette page n’a pas pu être chargée. C’est généralement temporaire — réessayez dans un instant.',
+    siteErrorText:
+      'Ce site n’a pas pu être chargé. C’est généralement temporaire — réessayez dans un instant.',
+    tryAgain: 'Réessayer',
+    reference: (digest: string) => `Référence : ${digest}`,
+  },
+
+  download: {
+    unavailableTitle: 'Téléchargement indisponible',
+    notAvailable: 'Ce téléchargement n’est pas disponible.',
+    rateLimited: 'Trop de demandes de téléchargement. Patientez un instant, puis réessayez.',
+    immichUnavailable:
+      'La photothèque est momentanément indisponible. Veuillez réessayer dans un instant.',
+    back: 'Retour à la galerie',
+  },
+
+  theme: {
+    switchToLight: 'Passer en mode clair',
+    switchToDark: 'Passer en mode sombre',
+    scrollToTop: 'Revenir en haut',
+  },
+
+  password: {
+    subtitle: 'Cette galerie est protégée par un mot de passe.',
+    siteSubtitle: 'Ce site est protégé par un mot de passe.',
+    placeholder: 'Saisissez le mot de passe',
+    submit: 'Entrer',
+    verifying: 'Vérification…',
+    incorrect: 'Mot de passe incorrect. Veuillez réessayer.',
+    failed: 'Impossible de vérifier le mot de passe. Veuillez réessayer plus tard.',
+  },
+
+  about: {
+    kicker: 'À propos',
+    title: 'À propos',
+    metaTitle: (name: string) => `À propos — ${name}`,
+    portraitAlt: 'Portrait',
+    gear: 'Matériel',
+  },
+
+  map: {
+    title: 'Carte',
+    kicker: 'Où',
+    subtitle: 'Les lieux où les photos ont été prises',
+    loading: 'Chargement de la carte…',
+    loadFailed: (status: number) => `Échec du chargement des données de la carte (${status})`,
+    initFailed: 'Impossible d’initialiser la carte',
+  },
+
+  subpage: {
+    collectionKicker: (index: string) => `${index} — Collection`,
+    sectionsNav: 'Sections',
+    coverAria: (albumName: string, count: string) => `${albumName}, ${count}`,
+    nextSubpage: 'Suivant',
+    nextSubpageAria: (name: string) => `Suivant : ${name}`,
+  },
+
+  journal: {
+    title: 'Journal',
+    kicker: 'Récits & essais',
+    subtitle: 'Essais photographiques, récits visuels et notes de terrain.',
+    description: 'Essais photographiques, récits de voyage et coulisses.',
+    entryDescription: 'Article du journal',
+    empty: 'Aucun article publié pour le moment.',
+    readStory: 'Lire le récit →',
+    minRead: (n: number) => `${n} min de lecture`,
+    draft: 'Brouillon',
+    by: (author: string) => `par ${author}`,
+    notFound: 'Introuvable',
+  },
+
+  lightbox: {
+    viewer: 'Visionneuse d’images',
+    openPhoto: (n: number) => `Afficher la photo ${n}`,
+    close: 'Fermer',
+    closeTitle: 'Fermer (Échap)',
+    previous: 'Photo précédente',
+    previousTitle: 'Photo précédente (flèche gauche)',
+    next: 'Photo suivante',
+    nextTitle: 'Photo suivante (flèche droite)',
+    toggleInfo: 'Afficher/masquer les informations',
+    toggleInfoTitle: 'Afficher/masquer les informations (i)',
+    hideInfo: 'Masquer les infos',
+    info: 'Infos',
+    loading: 'Chargement…',
+    camera: 'Appareil',
+    lens: 'Objectif',
+    focalLength: 'Focale',
+    aperture: 'Ouverture',
+    shutter: 'Vitesse',
+    iso: 'ISO',
+    location: 'Lieu',
+    noExif: 'Aucune donnée EXIF disponible',
+    copyLink: 'Copier le lien de cette photo',
+    copyLinkTitle: 'Copier le lien de cette photo (c)',
+    copyLinkShort: 'Lien',
+    copied: 'Copié',
+    copyManual: 'Copiez ce lien',
+    shortcuts: 'Raccourcis clavier',
+    shortcutNavigate: 'Photo précédente / suivante',
+    shortcutInfo: 'Informations sur la photo',
+    shortcutFullscreen: 'Plein écran',
+    shortcutExitFullscreen: 'Quitter le plein écran',
+    download: 'Télécharger le fichier original',
+    downloadTitle: 'Télécharger le fichier original (d)',
+    downloadShort: 'Original',
+    shortcutDownload: 'Télécharger l’original',
+    shortcutSlideshow: 'Diaporama',
+    shortcutSlideshowRunning: (seconds: number) => `Diaporama — toutes les ${seconds} s`,
+    slideshowStopped: 'Diaporama arrêté',
+    slideshowRunning: (seconds: number) =>
+      `Diaporama en cours, photo suivante toutes les ${seconds} secondes`,
+    shortcutCopyLink: 'Copier le lien de cette photo',
+    shortcutList: 'Cette liste',
+    shortcutClose: 'Fermer la visionneuse',
+  },
+
+  proofing: {
+    addFavorite: 'Ajouter aux favoris',
+    removeFavorite: 'Retirer des favoris',
+    addToFavorites: 'Ajouter aux favoris',
+    removeFromFavorites: 'Retirer des favoris',
+    saved: 'Enregistré',
+    favorite: 'Favori',
+    showAll: 'Tout afficher',
+    selected: (n: number) => `❤️ ${n} ${n === 1 ? 'sélectionnée' : 'sélectionnées'}`,
+    shareExport: 'Partager & exporter',
+    modalTitle: (n: number) => `❤️ Sélection (${n})`,
+    closeModal: 'Fermer la fenêtre',
+    intro: (n: number) =>
+      `Vous avez sélectionné ${plural(n, 'photo', 'photos')}. Choisissez une option d’export ci-dessous pour partager votre sélection :`,
+    copyLink: 'Copier le lien de partage',
+    linkCopied: 'Lien copié !',
+    copyList: 'Copier la liste (#1, #2…)',
+    listCopied: 'Liste copiée !',
+    copyManualLink: 'Copiez ce lien',
+    copyManualList: 'Copiez cette liste',
+    sendEmail: '✉️ Envoyer un e-mail au photographe',
+    downloadSelected: 'Télécharger la sélection (.zip)',
+    clearSelection: 'Vider la sélection',
+    confirmClear: 'Retirer tous les favoris sélectionnés ?',
+    listEmpty: (albumName: string) => `${albumName} : aucune photo sélectionnée.`,
+    listSummary: (albumName: string, count: number, indices: string) =>
+      `${albumName} — Photos sélectionnées (${count}) : ${indices}`,
+    mailSubject: (n: number) => `Sélection de photos (${n})`,
+    mailBody: (list: string, url: string) =>
+      `Bonjour,\n\nVoici ma sélection de photos :\n\n${list}\n\nLien de partage : ${url}\n\nCordialement,`,
+  },
+
+  legal: {
+    navLabel: 'Mentions légales',
+    title: 'Mentions légales',
+    subtitle: 'Informations conformément au § 5 DDG',
+    address: 'Adresse',
+    contact: 'Contact',
+    email: 'E-mail',
+    phone: 'Téléphone',
+    contactForm: 'Formulaire de contact',
+    taxSection: 'Informations fiscales',
+    taxId: 'Numéro fiscal',
+    vatId: 'Numéro de TVA',
+    extraInfo: 'Informations complémentaires',
+  },
+
+  contact: {
+    navLabel: 'Contact',
+    title: 'Contact',
+    subtitle: 'Écrivez-moi un message',
+    name: 'Nom',
+    email: 'E-mail',
+    message: 'Message',
+    submit: 'Envoyer le message',
+    sending: 'Envoi…',
+    successTitle: 'Merci',
+    successText: 'Votre message est bien arrivé. Je vous répondrai par e-mail.',
+    invalid: 'Veuillez remplir tous les champs avec une adresse e-mail valide.',
+    tooMany: 'Trop de messages en peu de temps. Réessayez dans une minute.',
+    failed: 'Le message n’a pas pu être envoyé. Réessayez plus tard.',
+    privacy: (days: number) =>
+      `Votre message est conservé sur le serveur de ce site, sert uniquement à vous répondre et est supprimé après ${days} ${days === 1 ? 'jour' : 'jours'}.`,
+  },
+
+  privacy: {
+    navLabel: 'Confidentialité',
+    title: 'Politique de confidentialité',
+  },
+};
diff --git a/lib/i18n/locales/it.ts b/lib/i18n/locales/it.ts
new file mode 100644
index 0000000..0b232f2
--- /dev/null
+++ b/lib/i18n/locales/it.ts
@@ -0,0 +1,245 @@
+/**
+ * Italian dictionary.
+ *
+ * Typed as `Dictionary` (derived from `en.ts`), so a key added to English but
+ * forgotten here fails the type-check rather than falling through to English
+ * at runtime.
+ */
+
+import type { Dictionary } from '../index';
+
+const plural = (n: number, one: string, other: string) => `${n} ${n === 1 ? one : other}`;
+
+export const it: Dictionary = {
+  dateLocale: 'it-IT',
+
+  nav: {
+    home: 'Home',
+    about: 'Chi sono',
+    map: 'Mappa',
+    journal: 'Diario',
+    skipToContent: 'Vai al contenuto',
+    openMenu: 'Apri menu',
+    closeMenu: 'Chiudi menu',
+  },
+
+  common: {
+    backTo: (label: string) => `Torna a ${label}`,
+    backToGallery: 'Torna alla galleria',
+    backToJournal: 'Torna al diario',
+    email: 'E-mail',
+    website: 'Sito web',
+    home: 'Home',
+    // Italian "foto" and "album" are invariable — the article carries the plural.
+    photos: (n: number) => `${n} foto`,
+    albums: (n: number) => `${n} album`,
+    collections: (n: number) => plural(n, 'collezione', 'collezioni'),
+    prevAlbum: 'Album precedente',
+    nextAlbum: 'Album successivo',
+    prevAlbumAria: (name: string) => `Album precedente: ${name}`,
+    nextAlbumAria: (name: string) => `Album successivo: ${name}`,
+    albumNavAria: 'Navigazione tra gli album',
+    prevEntry: 'Articolo precedente',
+    nextEntry: 'Articolo successivo',
+    prevEntryAria: (title: string) => `Articolo precedente: ${title}`,
+    nextEntryAria: (title: string) => `Articolo successivo: ${title}`,
+    entryNavAria: 'Navigazione tra gli articoli del diario',
+    loadingGallery: 'Caricamento della galleria',
+    loadingPhotos: 'Caricamento delle foto',
+    downloadAlbum: 'Scarica album',
+  },
+
+  home: {
+    enter: 'Entra',
+  },
+
+  error: {
+    notFoundTitle: 'Pagina non trovata',
+    notFoundText: 'Questa pagina non esiste, oppure l’album non è più pubblicato.',
+    errorTitle: 'Qualcosa è andato storto',
+    errorText:
+      'Non è stato possibile caricare questa pagina. Di solito è temporaneo: riprova tra un momento.',
+    siteErrorText:
+      'Non è stato possibile caricare questo sito. Di solito è temporaneo: riprova tra un momento.',
+    tryAgain: 'Riprova',
+    reference: (digest: string) => `Riferimento: ${digest}`,
+  },
+
+  download: {
+    unavailableTitle: 'Download non disponibile',
+    notAvailable: 'Questo download non è disponibile.',
+    rateLimited: 'Troppe richieste di download. Attendi un momento e riprova.',
+    immichUnavailable: 'La libreria fotografica non è al momento disponibile. Riprova a breve.',
+    back: 'Torna alla galleria',
+  },
+
+  theme: {
+    switchToLight: 'Passa alla modalità chiara',
+    switchToDark: 'Passa alla modalità scura',
+    scrollToTop: 'Torna su',
+  },
+
+  password: {
+    subtitle: 'Questa galleria è protetta da password.',
+    siteSubtitle: 'Questo sito è protetto da password.',
+    placeholder: 'Inserisci la password',
+    submit: 'Entra',
+    verifying: 'Verifica in corso…',
+    incorrect: 'Password errata. Riprova.',
+    failed: 'Impossibile verificare la password. Riprova più tardi.',
+  },
+
+  about: {
+    kicker: 'Chi sono',
+    title: 'Chi sono',
+    metaTitle: (name: string) => `Chi sono — ${name}`,
+    portraitAlt: 'Ritratto',
+    gear: 'Attrezzatura',
+  },
+
+  map: {
+    title: 'Mappa',
+    kicker: 'Dove',
+    subtitle: 'Dove sono state scattate le foto',
+    loading: 'Caricamento della mappa…',
+    loadFailed: (status: number) => `Impossibile caricare i dati della mappa (${status})`,
+    initFailed: 'Impossibile inizializzare la mappa',
+  },
+
+  subpage: {
+    collectionKicker: (index: string) => `${index} — Collezione`,
+    sectionsNav: 'Sezioni',
+    coverAria: (albumName: string, count: string) => `${albumName}, ${count}`,
+    nextSubpage: 'Avanti',
+    nextSubpageAria: (name: string) => `Avanti: ${name}`,
+  },
+
+  journal: {
+    title: 'Diario',
+    kicker: 'Storie e saggi',
+    subtitle: 'Saggi fotografici, racconti visivi e appunti sul campo.',
+    description: 'Saggi fotografici, racconti di viaggio e diari dietro le quinte.',
+    entryDescription: 'Articolo del diario',
+    empty: 'Nessun articolo pubblicato per ora.',
+    readStory: 'Leggi la storia →',
+    minRead: (n: number) => `${n} min di lettura`,
+    draft: 'Bozza',
+    by: (author: string) => `di ${author}`,
+    notFound: 'Non trovato',
+  },
+
+  lightbox: {
+    viewer: 'Visualizzatore di immagini',
+    openPhoto: (n: number) => `Apri la foto ${n}`,
+    close: 'Chiudi',
+    closeTitle: 'Chiudi (Esc)',
+    previous: 'Foto precedente',
+    previousTitle: 'Foto precedente (freccia sinistra)',
+    next: 'Foto successiva',
+    nextTitle: 'Foto successiva (freccia destra)',
+    toggleInfo: 'Mostra/nascondi informazioni',
+    toggleInfoTitle: 'Mostra/nascondi informazioni (i)',
+    hideInfo: 'Nascondi info',
+    info: 'Info',
+    loading: 'Caricamento…',
+    camera: 'Fotocamera',
+    lens: 'Obiettivo',
+    focalLength: 'Lunghezza focale',
+    aperture: 'Diaframma',
+    shutter: 'Tempo di scatto',
+    iso: 'ISO',
+    location: 'Luogo',
+    noExif: 'Nessun dato EXIF disponibile',
+    copyLink: 'Copia il link a questa foto',
+    copyLinkTitle: 'Copia il link a questa foto (c)',
+    copyLinkShort: 'Link',
+    copied: 'Copiato',
+    copyManual: 'Copia questo link',
+    shortcuts: 'Scorciatoie da tastiera',
+    shortcutNavigate: 'Foto precedente / successiva',
+    shortcutInfo: 'Informazioni sulla foto',
+    shortcutFullscreen: 'Schermo intero',
+    shortcutExitFullscreen: 'Esci da schermo intero',
+    download: 'Scarica il file originale',
+    downloadTitle: 'Scarica il file originale (d)',
+    downloadShort: 'Originale',
+    shortcutDownload: 'Scarica l’originale',
+    shortcutSlideshow: 'Presentazione',
+    shortcutSlideshowRunning: (seconds: number) => `Presentazione — ogni ${seconds} s`,
+    slideshowStopped: 'Presentazione interrotta',
+    slideshowRunning: (seconds: number) => `Presentazione in corso, avanza ogni ${seconds} secondi`,
+    shortcutCopyLink: 'Copia il link a questa foto',
+    shortcutList: 'Questo elenco',
+    shortcutClose: 'Chiudi il visualizzatore',
+  },
+
+  proofing: {
+    addFavorite: 'Aggiungi ai preferiti',
+    removeFavorite: 'Rimuovi dai preferiti',
+    addToFavorites: 'Aggiungi ai preferiti',
+    removeFromFavorites: 'Rimuovi dai preferiti',
+    saved: 'Salvato',
+    favorite: 'Preferito',
+    showAll: 'Mostra tutto',
+    selected: (n: number) => `❤️ ${n} ${n === 1 ? 'selezionata' : 'selezionate'}`,
+    shareExport: 'Condividi ed esporta',
+    modalTitle: (n: number) => `❤️ Selezione (${n})`,
+    closeModal: 'Chiudi finestra',
+    intro: (n: number) =>
+      `Hai selezionato ${n} foto. Scegli un’opzione di esportazione per condividere la tua selezione:`,
+    copyLink: 'Copia link di condivisione',
+    linkCopied: 'Link copiato!',
+    copyList: 'Copia elenco testuale (#1, #2…)',
+    listCopied: 'Elenco copiato!',
+    copyManualLink: 'Copia questo link',
+    copyManualList: 'Copia questo elenco',
+    sendEmail: '✉️ Invia e-mail al fotografo',
+    downloadSelected: 'Scarica selezione (.zip)',
+    clearSelection: 'Svuota selezione',
+    confirmClear: 'Rimuovere tutti i preferiti selezionati?',
+    listEmpty: (albumName: string) => `${albumName}: nessuna foto selezionata.`,
+    listSummary: (albumName: string, count: number, indices: string) =>
+      `${albumName} — Foto selezionate (${count}): ${indices}`,
+    mailSubject: (n: number) => `Selezione di foto (${n})`,
+    mailBody: (list: string, url: string) =>
+      `Ciao,\n\necco la mia selezione di foto:\n\n${list}\n\nLink di condivisione: ${url}\n\nCordiali saluti,`,
+  },
+
+  legal: {
+    navLabel: 'Note legali',
+    title: 'Note legali',
+    subtitle: 'Informazioni ai sensi del § 5 DDG',
+    address: 'Indirizzo',
+    contact: 'Contatti',
+    email: 'E-mail',
+    phone: 'Telefono',
+    contactForm: 'Modulo di contatto',
+    taxSection: 'Informazioni fiscali',
+    taxId: 'Codice fiscale',
+    vatId: 'Partita IVA',
+    extraInfo: 'Ulteriori informazioni',
+  },
+
+  contact: {
+    navLabel: 'Contatto',
+    title: 'Contatto',
+    subtitle: 'Scrivimi un messaggio',
+    name: 'Nome',
+    email: 'E-mail',
+    message: 'Messaggio',
+    submit: 'Invia messaggio',
+    sending: 'Invio…',
+    successTitle: 'Grazie',
+    successText: 'Il tuo messaggio è arrivato. Ti risponderò via e-mail.',
+    invalid: 'Compila tutti i campi con un indirizzo e-mail valido.',
+    tooMany: 'Troppi messaggi in poco tempo. Riprova tra un minuto.',
+    failed: 'Non è stato possibile inviare il messaggio. Riprova più tardi.',
+    privacy: (days: number) =>
+      `Il tuo messaggio viene salvato sul server di questo sito, usato solo per risponderti e cancellato dopo ${days} ${days === 1 ? 'giorno' : 'giorni'}.`,
+  },
+
+  privacy: {
+    navLabel: 'Privacy',
+    title: 'Informativa sulla privacy',
+  },
+};
diff --git a/lib/i18n/locales/nl.ts b/lib/i18n/locales/nl.ts
new file mode 100644
index 0000000..38beb88
--- /dev/null
+++ b/lib/i18n/locales/nl.ts
@@ -0,0 +1,246 @@
+/**
+ * Dutch dictionary.
+ *
+ * Typed as `Dictionary` (derived from `en.ts`), so a key added to English but
+ * forgotten here fails the type-check rather than falling through to English
+ * at runtime.
+ */
+
+import type { Dictionary } from '../index';
+
+const plural = (n: number, one: string, other: string) => `${n} ${n === 1 ? one : other}`;
+
+export const nl: Dictionary = {
+  dateLocale: 'nl-NL',
+
+  nav: {
+    home: 'Start',
+    about: 'Over mij',
+    map: 'Kaart',
+    journal: 'Journal',
+    skipToContent: 'Naar de inhoud',
+    openMenu: 'Menu openen',
+    closeMenu: 'Menu sluiten',
+  },
+
+  common: {
+    backTo: (label: string) => `Terug naar ${label}`,
+    backToGallery: 'Terug naar de galerij',
+    backToJournal: 'Terug naar het journal',
+    email: 'E-mail',
+    website: 'Website',
+    home: 'Start',
+    photos: (n: number) => plural(n, 'foto', 'foto’s'),
+    albums: (n: number) => plural(n, 'album', 'albums'),
+    collections: (n: number) => plural(n, 'collectie', 'collecties'),
+    prevAlbum: 'Vorig album',
+    nextAlbum: 'Volgend album',
+    prevAlbumAria: (name: string) => `Vorig album: ${name}`,
+    nextAlbumAria: (name: string) => `Volgend album: ${name}`,
+    albumNavAria: 'Albumnavigatie',
+    prevEntry: 'Vorig verhaal',
+    nextEntry: 'Volgend verhaal',
+    prevEntryAria: (title: string) => `Vorig verhaal: ${title}`,
+    nextEntryAria: (title: string) => `Volgend verhaal: ${title}`,
+    entryNavAria: 'Navigatie tussen journalverhalen',
+    loadingGallery: 'Galerij laden',
+    loadingPhotos: 'Foto’s laden',
+    downloadAlbum: 'Album downloaden',
+  },
+
+  home: {
+    enter: 'Binnenkomen',
+  },
+
+  error: {
+    notFoundTitle: 'Niet gevonden',
+    notFoundText: 'Deze pagina bestaat niet, of het album is niet meer gepubliceerd.',
+    errorTitle: 'Er is iets misgegaan',
+    errorText:
+      'Deze pagina kon niet worden geladen. Meestal is dat tijdelijk — probeer het zo nog eens.',
+    siteErrorText:
+      'Deze site kon niet worden geladen. Meestal is dat tijdelijk — probeer het zo nog eens.',
+    tryAgain: 'Opnieuw proberen',
+    reference: (digest: string) => `Referentie: ${digest}`,
+  },
+
+  download: {
+    unavailableTitle: 'Download niet beschikbaar',
+    notAvailable: 'Deze download is niet beschikbaar.',
+    rateLimited: 'Te veel downloadverzoeken. Wacht even en probeer het opnieuw.',
+    immichUnavailable:
+      'De fotobibliotheek is op dit moment niet bereikbaar. Probeer het zo opnieuw.',
+    back: 'Terug naar de galerij',
+  },
+
+  theme: {
+    switchToLight: 'Naar lichte modus',
+    switchToDark: 'Naar donkere modus',
+    scrollToTop: 'Naar boven',
+  },
+
+  password: {
+    subtitle: 'Deze galerij is met een wachtwoord beveiligd.',
+    siteSubtitle: 'Deze site is met een wachtwoord beveiligd.',
+    placeholder: 'Voer het wachtwoord in',
+    submit: 'Binnenkomen',
+    verifying: 'Controleren…',
+    incorrect: 'Onjuist wachtwoord. Probeer het opnieuw.',
+    failed: 'Het wachtwoord kon niet worden gecontroleerd. Probeer het later opnieuw.',
+  },
+
+  about: {
+    kicker: 'Over mij',
+    title: 'Over mij',
+    metaTitle: (name: string) => `Over mij — ${name}`,
+    portraitAlt: 'Portret',
+    gear: 'Uitrusting',
+  },
+
+  map: {
+    title: 'Kaart',
+    kicker: 'Waar',
+    subtitle: 'Waar de foto’s zijn gemaakt',
+    loading: 'Kaart laden…',
+    loadFailed: (status: number) => `Kaartgegevens konden niet worden geladen (${status})`,
+    initFailed: 'De kaart kon niet worden gestart',
+  },
+
+  subpage: {
+    collectionKicker: (index: string) => `${index} — Collectie`,
+    sectionsNav: 'Onderdelen',
+    coverAria: (albumName: string, count: string) => `${albumName}, ${count}`,
+    nextSubpage: 'Volgende',
+    nextSubpageAria: (name: string) => `Volgende: ${name}`,
+  },
+
+  journal: {
+    title: 'Journal',
+    kicker: 'Verhalen & essays',
+    subtitle: 'Fotoessays, beeldverhalen en veldnotities.',
+    description: 'Fotoessays, reisverhalen en een kijkje achter de schermen.',
+    entryDescription: 'Journalverhaal',
+    empty: 'Er zijn nog geen verhalen gepubliceerd.',
+    readStory: 'Lees het verhaal →',
+    minRead: (n: number) => `${n} min lezen`,
+    draft: 'Concept',
+    by: (author: string) => `door ${author}`,
+    notFound: 'Niet gevonden',
+  },
+
+  lightbox: {
+    viewer: 'Fotoviewer',
+    openPhoto: (n: number) => `Foto ${n} bekijken`,
+    close: 'Sluiten',
+    closeTitle: 'Sluiten (Esc)',
+    previous: 'Vorige foto',
+    previousTitle: 'Vorige foto (pijl naar links)',
+    next: 'Volgende foto',
+    nextTitle: 'Volgende foto (pijl naar rechts)',
+    toggleInfo: 'Foto-info tonen/verbergen',
+    toggleInfoTitle: 'Foto-info tonen/verbergen (i)',
+    hideInfo: 'Info verbergen',
+    info: 'Info',
+    loading: 'Laden…',
+    camera: 'Camera',
+    lens: 'Objectief',
+    focalLength: 'Brandpuntsafstand',
+    aperture: 'Diafragma',
+    shutter: 'Sluitertijd',
+    iso: 'ISO',
+    location: 'Locatie',
+    noExif: 'Geen EXIF-gegevens beschikbaar',
+    copyLink: 'Link naar deze foto kopiëren',
+    copyLinkTitle: 'Link naar deze foto kopiëren (c)',
+    copyLinkShort: 'Link',
+    copied: 'Gekopieerd',
+    copyManual: 'Kopieer deze link',
+    shortcuts: 'Sneltoetsen',
+    shortcutNavigate: 'Vorige / volgende foto',
+    shortcutInfo: 'Foto-info',
+    shortcutFullscreen: 'Volledig scherm',
+    shortcutExitFullscreen: 'Volledig scherm verlaten',
+    download: 'Het originele bestand downloaden',
+    downloadTitle: 'Het originele bestand downloaden (d)',
+    downloadShort: 'Origineel',
+    shortcutDownload: 'Het origineel downloaden',
+    shortcutSlideshow: 'Diavoorstelling',
+    shortcutSlideshowRunning: (seconds: number) => `Diavoorstelling — elke ${seconds} s`,
+    slideshowStopped: 'Diavoorstelling gestopt',
+    slideshowRunning: (seconds: number) =>
+      `Diavoorstelling loopt, elke ${seconds} seconden de volgende foto`,
+    shortcutCopyLink: 'Link naar deze foto kopiëren',
+    shortcutList: 'Deze lijst',
+    shortcutClose: 'De viewer sluiten',
+  },
+
+  proofing: {
+    addFavorite: 'Favoriet maken',
+    removeFavorite: 'Favoriet verwijderen',
+    addToFavorites: 'Aan favorieten toevoegen',
+    removeFromFavorites: 'Uit favorieten verwijderen',
+    saved: 'Opgeslagen',
+    favorite: 'Favoriet',
+    showAll: 'Alles tonen',
+    selected: (n: number) => `❤️ ${n} geselecteerd`,
+    shareExport: 'Delen & exporteren',
+    modalTitle: (n: number) => `❤️ Selectie (${n})`,
+    closeModal: 'Venster sluiten',
+    intro: (n: number) =>
+      `Je hebt ${plural(n, 'foto', 'foto’s')} geselecteerd. Kies hieronder een exportoptie om je selectie te delen:`,
+    copyLink: 'Deellink kopiëren',
+    linkCopied: 'Link gekopieerd!',
+    copyList: 'Tekstlijst kopiëren (#1, #2…)',
+    listCopied: 'Lijst gekopieerd!',
+    copyManualLink: 'Kopieer deze link',
+    copyManualList: 'Kopieer deze lijst',
+    sendEmail: '✉️ E-mail naar de fotograaf sturen',
+    downloadSelected: 'Selectie downloaden (.zip)',
+    clearSelection: 'Selectie wissen',
+    confirmClear: 'Alle geselecteerde favorieten wissen?',
+    listEmpty: (albumName: string) => `${albumName}: geen foto’s geselecteerd.`,
+    listSummary: (albumName: string, count: number, indices: string) =>
+      `${albumName} — Geselecteerde foto’s (${count}): ${indices}`,
+    mailSubject: (n: number) => `Fotoselectie (${n})`,
+    mailBody: (list: string, url: string) =>
+      `Hallo,\n\nHier is mijn fotoselectie:\n\n${list}\n\nDeellink: ${url}\n\nMet vriendelijke groet,`,
+  },
+
+  legal: {
+    navLabel: 'Colofon',
+    title: 'Colofon',
+    subtitle: 'Gegevens volgens § 5 DDG',
+    address: 'Adres',
+    contact: 'Contact',
+    email: 'E-mail',
+    phone: 'Telefoon',
+    contactForm: 'Contactformulier',
+    taxSection: 'Fiscale gegevens',
+    taxId: 'Fiscaal nummer',
+    vatId: 'Btw-nummer',
+    extraInfo: 'Aanvullende informatie',
+  },
+
+  contact: {
+    navLabel: 'Contact',
+    title: 'Contact',
+    subtitle: 'Stuur me een bericht',
+    name: 'Naam',
+    email: 'E-mail',
+    message: 'Bericht',
+    submit: 'Bericht versturen',
+    sending: 'Versturen…',
+    successTitle: 'Bedankt',
+    successText: 'Je bericht is aangekomen. Ik antwoord je per e-mail.',
+    invalid: 'Vul alle velden in met een geldig e-mailadres.',
+    tooMany: 'Te veel berichten in korte tijd. Probeer het over een minuut opnieuw.',
+    failed: 'Het bericht kon niet worden verstuurd. Probeer het later opnieuw.',
+    privacy: (days: number) =>
+      `Je bericht wordt op de eigen server van deze site bewaard, alleen gebruikt om je te antwoorden en na ${days} ${days === 1 ? 'dag' : 'dagen'} verwijderd.`,
+  },
+
+  privacy: {
+    navLabel: 'Privacy',
+    title: 'Privacyverklaring',
+  },
+};
diff --git a/lib/markdownBlocks.ts b/lib/markdownBlocks.ts
new file mode 100644
index 0000000..7e3e115
--- /dev/null
+++ b/lib/markdownBlocks.ts
@@ -0,0 +1,62 @@
+/**
+ * Block-level Markdown for plain pages such as the privacy policy (#699):
+ * headings, lists and paragraphs. Inline formatting goes through
+ * renderInlineMarkdown, which escapes first, so the only tags in the output
+ * are the ones built here and there.
+ *
+ * Deliberately small. The journal has its own block format; this is for a
+ * text a person writes once and reads top to bottom.
+ */
+
+import { renderInlineMarkdown } from './journal';
+
+export type MarkdownBlock =
+  | { type: 'heading'; level: 2 | 3; html: string }
+  | { type: 'list'; ordered: boolean; items: string[] }
+  | { type: 'paragraph'; html: string };
+
+export function parseMarkdownBlocks(markdown: string): MarkdownBlock[] {
+  const blocks: MarkdownBlock[] = [];
+  let paragraph: string[] = [];
+  let list: { ordered: boolean; items: string[] } | null = null;
+
+  const flush = () => {
+    if (paragraph.length) {
+      blocks.push({ type: 'paragraph', html: renderInlineMarkdown(paragraph.join(' ')) });
+      paragraph = [];
+    }
+    if (list) {
+      blocks.push({ type: 'list', ...list });
+      list = null;
+    }
+  };
+
+  for (const raw of markdown.replace(/\r\n/g, '\n').split('\n')) {
+    const line = raw.trim();
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+    const bullet = /^[-*+]\s+(.*)$/.exec(line);
+    const numbered = /^\d+[.)]\s+(.*)$/.exec(line);
+
+    if (!line) {
+      flush();
+    } else if (heading) {
+      flush();
+      // The page title is the h1, so # and ## both become h2.
+      blocks.push({
+        type: 'heading',
+        level: heading[1].length <= 2 ? 2 : 3,
+        html: renderInlineMarkdown(heading[2]),
+      });
+    } else if (bullet || numbered) {
+      const ordered = !!numbered;
+      if (paragraph.length || (list && list.ordered !== ordered)) flush();
+      list ??= { ordered, items: [] };
+      list.items.push(renderInlineMarkdown((bullet ?? numbered)![1]));
+    } else {
+      if (list) flush();
+      paragraph.push(line);
+    }
+  }
+  flush();
+  return blocks;
+}
diff --git a/lib/privacy.ts b/lib/privacy.ts
new file mode 100644
index 0000000..a7410ac
--- /dev/null
+++ b/lib/privacy.ts
@@ -0,0 +1,161 @@
+/**
+ * The privacy policy page (#699): `content/privacy.md`, shown at /privacy.
+ *
+ * Folio ships no legal text. What it can do is say what this installation
+ * processes, read off the configuration, so the owner does not have to dig
+ * through the code to write the policy: processingFacts() below, shown next
+ * to the editor in the admin panel.
+ *
+ * Server only (fs).
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import type { AppConfig } from './config/schema';
+
+export const PRIVACY_FILENAME = 'privacy.md';
+
+export function privacyPath(contentDir = path.join(process.cwd(), 'content')): string {
+  return path.join(contentDir, PRIVACY_FILENAME);
+}
+
+/** The policy text, or '' when there is none. */
+export function readPrivacy(contentDir?: string): string {
+  try {
+    return fs.readFileSync(privacyPath(contentDir), 'utf8').trim();
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Whether /privacy exists: switched on (the default) and with text in the
+ * file. Synchronous, because proxy.ts decides the 404 before rendering.
+ */
+export function privacyAvailable(config: Pick<AppConfig, 'privacy'>, contentDir?: string): boolean {
+  if (!config.privacy.enabled) return false;
+  try {
+    return fs.statSync(privacyPath(contentDir)).size > 0 && readPrivacy(contentDir) !== '';
+  } catch {
+    return false;
+  }
+}
+
+export interface ProcessingFact {
+  /** Short label, e.g. "Contact form". */
+  topic: string;
+  /** What is processed, where it goes, how long it stays. */
+  detail: string;
+  /** Data leaves this server towards a third party. */
+  thirdParty: boolean;
+}
+
+/**
+ * What this installation processes, derived from its configuration. English,
+ * like the rest of the admin panel; it is a checklist for the owner, not text
+ * for the page.
+ */
+export function processingFacts(
+  config: AppConfig,
+  env: { CDN_URL?: string; hasPasswords: boolean },
+): ProcessingFact[] {
+  const facts: ProcessingFact[] = [
+    {
+      topic: 'Photos',
+      detail:
+        'Served through this site from your Immich server. Visitors never contact Immich directly.',
+      thirdParty: false,
+    },
+    {
+      topic: 'Server log',
+      detail:
+        'Folio keeps no access log. It prints a visitor IP address to the server log only when that visitor exceeds a rate limit. Your reverse proxy or hosting may log more, so check those too.',
+      thirdParty: false,
+    },
+    {
+      topic: 'Fonts',
+      detail:
+        'Served from this site. The server fetches them from Google Fonts once; visitors do not contact Google.',
+      thirdParty: false,
+    },
+  ];
+
+  if (config.map) {
+    facts.push({
+      topic: 'Map',
+      detail:
+        'The map on /map and in journal entries loads its tiles from tile.openstreetmap.org (OpenStreetMap Foundation, UK). The visitor’s browser requests them, so their IP address reaches OSM.',
+      thirdParty: true,
+    });
+  }
+  if (config.analytics) {
+    facts.push({
+      topic: 'Visitor statistics',
+      detail:
+        'A cookieless counter stores the page path, the date and whether the device is mobile or desktop in content/analytics.json. No IP address and no identifier are stored.',
+      thirdParty: false,
+    });
+  }
+  if (config.contact.enabled) {
+    facts.push({
+      topic: 'Contact form',
+      detail: `Name, email address and message are stored on this server in content/messages/ and deleted after ${config.contact.retentionDays} days.${
+        config.contact.notifyUrl
+          ? ` A notification goes to ${hostOf(config.contact.notifyUrl)}, carrying nothing about the sender.`
+          : ''
+      }`,
+      thirdParty: false,
+    });
+  }
+  if (env.hasPasswords) {
+    facts.push({
+      topic: 'Cookies',
+      detail:
+        'Password-protected pages set an HttpOnly cookie after a correct password, valid for 24 hours. It is needed for the page to work and holds no personal data.',
+      thirdParty: false,
+    });
+  }
+  facts.push({
+    topic: 'Browser storage',
+    detail: `The colour-mode choice${
+      config.proofing.enabled ? ' and photo selections (proofing)' : ''
+    } are kept in the visitor’s own browser (localStorage) and never sent to the server.`,
+    thirdParty: false,
+  });
+  if (env.CDN_URL) {
+    facts.push({
+      topic: 'CDN',
+      detail: `Photos and videos are delivered through ${hostOf(env.CDN_URL)}, which receives the visitor’s IP address.`,
+      thirdParty: true,
+    });
+  }
+  return facts;
+}
+
+function hostOf(url: string): string {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}
+
+/** Headings to start from, in the site language. No wording beyond them. */
+export function starterHeadings(lang: string, facts: ProcessingFact[]): string {
+  const de = lang.toLowerCase().startsWith('de');
+  const topics = new Set(facts.map((f) => f.topic));
+  const h = (en: string, german: string) => `## ${de ? german : en}\n\n`;
+  return [
+    h('Controller', 'Verantwortlicher'),
+    h('Hosting and server logs', 'Hosting und Server-Logfiles'),
+    h('Fonts', 'Schriftarten'),
+    topics.has('Map') ? h('Map', 'Kartendienst') : '',
+    topics.has('Visitor statistics') ? h('Visitor statistics', 'Besucherstatistik') : '',
+    topics.has('Contact form') ? h('Contact form', 'Kontaktformular') : '',
+    h('Cookies and browser storage', 'Cookies und lokaler Speicher'),
+    topics.has('CDN') ? h('Content delivery network', 'Content Delivery Network') : '',
+    h('Your rights', 'Ihre Rechte'),
+  ]
+    .join('')
+    .trim();
+}
diff --git a/lib/siteUrl.ts b/lib/siteUrl.ts
index 31ee11e..024727e 100644
--- a/lib/siteUrl.ts
+++ b/lib/siteUrl.ts
@@ -71,8 +71,12 @@ export function resolveSiteUrl(
  * Returns null without a site URL: a relative link in a sitemap is invalid and
  * a relative link in a feed points at the reader, so there is nothing sensible
  * to fall back to.
+ *
+ * A path that is already an absolute http(s) URL — an image URL in CDN mode
+ * (lib/cdn.ts) — is returned as it is, site URL or not.
  */
 export function absoluteUrl(siteUrl: string | null, path: string): string | null {
+  if (/^https?:\/\//i.test(path)) return path;
   if (!siteUrl) return null;
   const raw = path.startsWith('/') ? path : `/${path}`;
   const suffix = raw === '/' ? '/' : raw.replace(/\/+$/, '');
diff --git a/lib/urls.ts b/lib/urls.ts
index 8bfd0e7..5ddc7ad 100644
--- a/lib/urls.ts
+++ b/lib/urls.ts
@@ -5,6 +5,7 @@
 
 import { encodeAssetId } from './tokens';
 import { env } from './env';
+import { cdnBase } from './cdn';
 import { thumbHashToBlurDataUrl, thumbHashToDominantHex } from './thumbhash';
 import type { ImmichAsset } from './immich';
 
@@ -22,13 +23,14 @@ import type { ImmichAsset } from './immich';
 const cacheBuster = env.IMAGE_CACHE_VERSION ? `&v=${env.IMAGE_CACHE_VERSION}` : '';
 
 /**
- * Generate a public image proxy URL for an asset.
+ * Generate a public image proxy URL for an asset. Absolute, on the CDN, when
+ * CDN mode is on (lib/cdn.ts); relative otherwise.
  */
 export function imageUrl(
   assetId: string,
   size: 'thumbnail' | 'preview' | 'original' = 'preview',
 ): string {
-  return `/api/image/${encodeAssetId(assetId)}?size=${size}${cacheBuster}`;
+  return `${cdnBase()}/api/image/${encodeAssetId(assetId)}?size=${size}${cacheBuster}`;
 }
 
 /**
@@ -39,12 +41,13 @@ export function exifUrl(assetId: string): string {
 }
 
 /**
- * Generate a public video proxy URL for an asset.
+ * Generate a public video proxy URL for an asset — on the CDN in CDN mode,
+ * like imageUrl().
  */
 export function videoUrl(assetId: string): string {
   // No `size` here, so the buster is the only query parameter.
   const v = cacheBuster ? `?${cacheBuster.slice(1)}` : '';
-  return `/api/video/${encodeAssetId(assetId)}${v}`;
+  return `${cdnBase()}/api/video/${encodeAssetId(assetId)}${v}`;
 }
 
 /**
diff --git a/package-lock.json b/package-lock.json
index 29adc81..dda3413 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "immich-folio",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "immich-folio",
-      "version": "0.17.0",
+      "version": "0.18.0",
       "license": "MIT",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
diff --git a/package.json b/package.json
index dd8f7ae..9d52bae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "immich-folio",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "license": "MIT",
   "scripts": {
     "dev": "next dev",
diff --git a/proxy.ts b/proxy.ts
index f3052b1..fc5009b 100644
--- a/proxy.ts
+++ b/proxy.ts
@@ -1,8 +1,14 @@
+import fs from 'node:fs';
+import path from 'node:path';
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
+import { getConfigOrNull } from '@/lib/config';
+import { isValidSlug } from '@/lib/journal';
+import { privacyAvailable } from '@/lib/privacy';
 import { isSiteUnlocked } from '@/lib/auth';
 import { isAdminPath } from '@/lib/admin/paths';
 import { isInstallPath } from '@/lib/install';
+import { cdnOrigin } from '@/lib/cdn';
 
 /** Where a locked-out visitor is rewritten to. */
 const GATE_PATH = '/gate';
@@ -56,6 +62,41 @@ function siteGate(request: NextRequest): NextResponse | null {
   return NextResponse.rewrite(new URL(GATE_PATH, request.url));
 }
 
+/**
+ * Pages that are known not to exist before anything renders.
+ *
+ * app/loading.tsx makes every page stream, and a streamed response has sent
+ * its 200 before the page gets to call notFound(). Next then marks the page
+ * noindex, which keeps it out of search results, but the status stays 200.
+ * For the fixed routes whose existence depends only on settings.yaml or a file
+ * in content/journal/, the answer is known here, before streaming starts, so
+ * they can get a real 404. Album and subpage slugs need Immich and stay soft.
+ */
+export function isKnownMissing(
+  pathname: string,
+  contentDir = path.join(process.cwd(), 'content'),
+): boolean {
+  const config = getConfigOrNull();
+  if (!config) return false;
+
+  if (pathname === '/contact') return !config.contact.enabled;
+  if (pathname === '/impressum') return !config.legal.enabled;
+  if (pathname === '/privacy') return !privacyAvailable(config, contentDir);
+  if (pathname === '/map') return !config.map;
+
+  const journal = /^\/journal\/([^/]+)\/?$/.exec(pathname);
+  if (journal) {
+    const slug = decodeURIComponent(journal[1]);
+    if (!isValidSlug(slug)) return true;
+    // A draft still has its file, so it stays a soft 404 for visitors and
+    // reachable for a signed-in admin, which only the page can tell apart.
+    return !['journal', 'essays'].some((dir) =>
+      fs.existsSync(path.join(contentDir, dir, `${slug}.md`)),
+    );
+  }
+  return false;
+}
+
 export function proxy(request: NextRequest) {
   /*
    * Runs before the prefetch shortcut below, and must keep doing so: a
@@ -83,6 +124,10 @@ export function proxy(request: NextRequest) {
 
   const isDev = process.env.NODE_ENV === 'development';
 
+  // CDN mode (lib/cdn.ts) serves photos and videos from another origin. Media
+  // has no directive of its own otherwise and falls back to default-src.
+  const cdn = cdnOrigin();
+
   // Define CSP directives
   const cspDirectives = [
     "default-src 'self'",
@@ -93,10 +138,11 @@ export function proxy(request: NextRequest) {
     // In development mode, Next.js / React dev tools require 'unsafe-eval' for Fast Refresh
     // and stack trace reconstruction. Omitted in production.
     `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'${isDev ? " 'unsafe-eval'" : ''}`,
-    "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://unpkg.com",
-    "font-src 'self' https://fonts.gstatic.com",
-    "img-src 'self' data: blob: https://*.basemaps.cartocdn.com https://*.tile.openstreetmap.org https://unpkg.com",
-    "connect-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com",
+    "style-src 'self' 'unsafe-inline'",
+    "font-src 'self'",
+    `img-src 'self' data: blob: https://tile.openstreetmap.org${cdn ? ` ${cdn}` : ''}`,
+    ...(cdn ? [`media-src 'self' ${cdn}`] : []),
+    "connect-src 'self'",
     "frame-ancestors 'none'",
     "base-uri 'self'",
     "form-action 'self'",
@@ -109,11 +155,18 @@ export function proxy(request: NextRequest) {
   requestHeaders.set('x-pathname', request.nextUrl.pathname);
   requestHeaders.set('Content-Security-Policy', cspDirectives);
 
-  const response = NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  });
+  // The page itself still renders and calls notFound(); this only lets the
+  // status say so before streaming starts. See isKnownMissing().
+  const response = isKnownMissing(request.nextUrl.pathname)
+    ? NextResponse.rewrite(request.nextUrl, {
+        request: { headers: requestHeaders },
+        status: 404,
+      })
+    : NextResponse.next({
+        request: {
+          headers: requestHeaders,
+        },
+      });
 
   // Only the CSP is set here. Every other security header comes from
   // next.config.ts, which also covers /api and static assets. Setting a header
diff --git a/scripts/doctor.mts b/scripts/doctor.mts
index 0c70c03..bc9d5f0 100644
--- a/scripts/doctor.mts
+++ b/scripts/doctor.mts
@@ -53,12 +53,17 @@ import {
   checkAlbumIds,
   checkAlbumsShared,
   checkAuthSecret,
+  checkContact,
   checkImmichCalls,
+  checkLegal,
+  checkPrivacy,
   checkPasswords,
   worstLevel,
   type AlbumRef,
   type DoctorFinding,
   type DoctorLevel,
+  type ContactRef,
+  type LegalRef,
   type PasswordRef,
 } from '../lib/admin/doctor.ts';
 
@@ -702,6 +707,31 @@ export async function gatherFindings(cwd: string, env: EnvLike): Promise<CliFind
 
   findings.push(checkPasswords(passwords));
 
+  // ── Impressum ───────────────────────────────────────────────────────
+  const settingsNode = settings.node;
+  if (settingsNode && typeof settingsNode === 'object' && !Array.isArray(settingsNode)) {
+    const node = settingsNode as Record<string, unknown>;
+    const contactNode = node.contact as ContactRef | undefined;
+    const legal = checkLegal(node.legal as LegalRef, contactNode?.enabled === true);
+    if (legal) findings.push(legal);
+    const contact = checkContact(contactNode, env.CONTACT_NOTIFY_URL);
+    if (contact) findings.push(contact);
+    const legalNode = node.legal as { enabled?: unknown } | undefined;
+    const privacyNode = node.privacy as { enabled?: unknown } | undefined;
+    let privacyText = '';
+    try {
+      privacyText = fs.readFileSync(path.join(contentDir, 'privacy.md'), 'utf8').trim();
+    } catch {
+      // No policy written yet.
+    }
+    const privacy = checkPrivacy({
+      legalEnabled: legalNode?.enabled === true,
+      privacyEnabled: privacyNode?.enabled !== false,
+      hasText: privacyText !== '',
+    });
+    if (privacy) findings.push(privacy);
+  }
+
   // ── Writability of the content volume ───────────────────────────────
   if (!fs.existsSync(contentDir)) {
     findings.push({