diff --git a/.env.local.example b/.env.local.example
index 273808d..00cdb42 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -34,6 +34,11 @@ STALE_MAX_AGE=86400
 # refetch. Leave it unset in normal operation.
 # IMAGE_CACHE_VERSION=1
 
+# Client proofing links: POST a JSON notification here when a client submits
+# a selection (Discord, Slack, Gotify, n8n, ...). See
+# docs/gallery-config.md#client-proofing-links.
+# PROOFING_WEBHOOK_URL=https://discord.com/api/webhooks/...
+
 # 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
diff --git a/.gitignore b/.gitignore
index e22c502..142eb55 100644
--- a/.gitignore
+++ b/.gitignore
@@ -82,6 +82,7 @@ content/.backups/
 # gets its own .backups/ — the top-level pattern above does not reach it.
 content/**/.backups/
 content/analytics.json
+content/proofing.json
 content/*.screenshot-bak
 # Credentials written by the /install wizard (never committed)
 content/install.json
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7212aa2..2c29728 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,466 @@ 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.19.0] — 2026-09-29
+
+### Security
+
+- **Photo and video URLs stop working once the photo is no longer on the
+  site** ([#737](https://github.com/ralksta/immich-folio/pull/737),
+  [#787](https://github.com/ralksta/immich-folio/pull/787),
+  [GHSA-gfh4-6275-9gqv](https://github.com/ralksta/immich-folio/security/advisories/GHSA-gfh4-6275-9gqv),
+  low). Asset tokens are deterministic and never expire, so a media URL that
+  was ever served kept working after its album was unpublished or a client
+  proofing link was revoked or expired. `/api/image`, `/api/video` and
+  `/api/exif` now answer `404` (`no-store`) for any asset the site does not
+  currently show; signed-in admins still pass. The check follows content-file
+  changes on the next request, and the first views of a newly published album
+  wait for its rebuild instead of being refused. Copies already held by a
+  browser or CDN are not recalled.
+
+- **Subpages taken offline with `enabled: false` are unpublished everywhere**
+  ([#755](https://github.com/ralksta/immich-folio/pull/755),
+  [GHSA-w3wp-6qff-q96p](https://github.com/ralksta/immich-folio/security/advisories/GHSA-w3wp-6qff-q96p),
+  medium). An offline subpage keeps its configuration, so its albums stayed on
+  the album allowlist: the map still showed them, and the media and download
+  routes still served their photos and ZIPs, while the page itself answered 404. The map, the published-asset check and the download checks now consider
+  only albums that are standalone or on an enabled subpage. `hidden: true`
+  subpages are unchanged: reachable by link, their photos still load.
+
+- **The sitemap no longer lists password-protected journal entries**
+  ([#759](https://github.com/ralksta/immich-folio/pull/759),
+  [GHSA-7c42-5pgh-xppr](https://github.com/ralksta/immich-folio/security/advisories/GHSA-7c42-5pgh-xppr),
+  low). It already left out protected subpages, albums and content pages, but
+  filtered journal entries on `draft` alone. It now matches what the journal
+  index shows a visitor who has not unlocked the entry.
+
+- **Share cards and page titles carry only text the site wrote**
+  ([#767](https://github.com/ralksta/immich-folio/pull/767),
+  [#783](https://github.com/ralksta/immich-folio/pull/783)). `/api/og`
+  rendered any `title` and `subtitle` from its query string, on the site's
+  domain and in its accent colour. Card URLs are now signed with the site
+  secret; an unsigned or altered one gets the plain site-title card, so
+  previews already cached by social networks keep working. Page metadata no
+  longer falls back to the requested path: unknown paths get the not-found
+  title and no card of their own, and locked albums and subpages the generic
+  protected title with `noindex`.
+
+- **A locked journal entry's title stays off its password gate**
+  ([#765](https://github.com/ralksta/immich-folio/pull/765)). The index and
+  the page metadata already hid it; the gate itself printed it. It now shows
+  the generic journal title, and a subpage that embeds a locked entry through
+  `essayFile` shows its own title.
+
+- **Password attempts no longer reveal which pages have a password**
+  ([#769](https://github.com/ralksta/immich-folio/pull/769),
+  [#785](https://github.com/ralksta/immich-folio/pull/785)). `POST /api/auth`
+  answered a key without a password with a different status and message than a
+  wrong password, and much faster than a key with an scrypt hash. That gave
+  away drafts and offline subpages, which otherwise answer 404. Both cases now
+  get the same `401` and run exactly one scrypt verification. Input validation
+  and the rate limit are unchanged.
+
+- **ZIP downloads are capped per visitor, and stalled ones are closed**
+  ([#774](https://github.com/ralksta/immich-folio/pull/774)). The album and
+  proofing ZIP routes limited how often an archive starts, not how long one
+  stays open, so a client that read slowly or stopped reading held an Immich
+  connection and its buffers for as long as it liked. At most two archives per
+  client IP may be open at once, shared between both routes (a third gets
+  `429` with `Retry-After: 30`), and an archive whose client takes nothing for
+  60 seconds is torn down. A download that keeps reading is never cut off,
+  however slowly it reads. See the upgrade notes.
+
+- **The Immich webhook caps its request body before checking the signature**
+  ([#780](https://github.com/ralksta/immich-folio/pull/780)). The body was
+  read in full, at any size, before the HMAC check. It is now limited to 64
+  KiB (`413` above), the signature is computed over the raw bytes, and the
+  signature header must be exactly 64 hex characters; a valid digest followed
+  by junk was accepted before.
+
+- **The ZIP refusal page's back link stays on the site**
+  ([#786](https://github.com/ralksta/immich-folio/pull/786)). A `Referer`
+  whose path started with `//` became a protocol-relative link to another
+  host; such paths are now rejected. The link compares the `Referer` with the
+  `Host` header (and `X-Forwarded-Host` only when `TRUSTED_PROXY_HOPS` is
+  set), so behind a reverse proxy it now leads back to the album instead of
+  always to `/`.
+
+- **Client proofing tokens are never written to the view statistics**
+  ([#748](https://github.com/ralksta/immich-folio/pull/748)). The cookieless
+  counter stored every path as visited, and in `/proof/<token>` the token is
+  the link's only credential. Those visits are counted as `/proof`.
+
+### Added
+
+- **Client proofing links**
+  ([#683](https://github.com/ralksta/immich-folio/pull/683),
+  [#758](https://github.com/ralksta/immich-folio/pull/758)). Under the new
+  _Proofing_ tab the admin creates a private link, `/proof/<token>`, per
+  client and album — any Immich album, published on the site or not — with an
+  optional expiry date, an optional ZIP download (the selection or the whole
+  album) and an optional download limit. The client hearts photos as on a
+  public album; the selection is saved on the server as they go, so they can
+  stop and continue later or on another device, and _Submit selection_ locks
+  it. The photographer watches the picks come in, reopens a submitted
+  selection, resets the download counter or revokes the link, and exports the
+  picks as a Lightroom or Capture One filename filter (which finds the RAW as
+  well as the JPEG), CSV or TXT. `PROOFING_WEBHOOK_URL` gets one JSON POST on
+  the first submit, shaped for Discord, Slack, Gotify and generic receivers.
+  Links are stored in `content/proofing.json` (mode `0600`); proof pages are
+  `noindex`, send no `Referer` and stay out of the sitemap, and a site
+  password still applies. The selection ZIP waits until pending hearts are
+  saved, so it never misses the last pick. The anonymous proofing on public
+  albums is unchanged. See `docs/gallery-config.md#client-proofing-links`.
+
+- **Custom content pages**
+  ([#738](https://github.com/ralksta/immich-folio/pull/738),
+  [#760](https://github.com/ralksta/immich-folio/pull/760),
+  [#764](https://github.com/ralksta/immich-folio/pull/764), closes
+  [#722](https://github.com/ralksta/immich-folio/issues/722)).
+  `content/pages/<slug>.md` — frontmatter plus the journal's block markdown —
+  is served at `/<slug>` and rendered like a journal entry without date or
+  reading time. A `- page: <slug>` line among the subpages in `gallery.yaml`
+  puts it in the menu at that position; a page without one is reachable by
+  link but not listed. Pages can be drafts (visible to signed-in admins only)
+  and can carry a password (cookie `lb_auth_page_<slug>`); public pages appear
+  in the sitemap. In the page builder, pages sit in one _Menu_ group with the
+  subpages, _+ New page_ derives the slug from the title with a collision
+  check, and the content is edited in the journal studio. Renaming or deleting
+  a page updates its menu entry, with a backup first; page backups rotate in
+  `content/pages/.backups/`. A new doctor check, `content-pages`, reports slug
+  collisions and menu entries without a file. A missing or draft page is still
+  a soft 404 (status `200`), like other slugs on this route.
+
+- **The asset picker searches the library and picks several photos at once**
+  ([#740](https://github.com/ralksta/immich-folio/pull/740),
+  [#752](https://github.com/ralksta/immich-folio/pull/752), closes
+  [#602](https://github.com/ralksta/immich-folio/issues/602)). A date (`2024`,
+  `2024-05`, `2024-05-17`) searches by capture date, any other text by file
+  name and Immich description. Tiles are buttons with a numbered badge in pick
+  order, and a bar at the bottom offers _Add N photos_. The homepage hero
+  takes several at once, _+ Photos_ in the journal and page editor adds one
+  photo block per pick, and pairs and grids fill their slots. The search stays
+  read-only against Immich.
+
+- **Admin editors detect concurrent edits**
+  ([#742](https://github.com/ralksta/immich-folio/pull/742),
+  [#757](https://github.com/ralksta/immich-folio/pull/757), closes
+  [#601](https://github.com/ralksta/immich-folio/issues/601)). Every editor
+  that saves a content file — gallery, settings, About, privacy, journal
+  entries and content pages — notices when the file changed since it was
+  loaded, in another tab or on another device, by hand or through a backup
+  restore. Instead of overwriting it silently, it offers _Reload (discard
+  mine)_, _Overwrite anyway_ or _Keep editing_. A save from a tab opened
+  before the upgrade still goes through as before. Deletes are not
+  version-checked.
+
+- **Settings set by the environment are shown as locked**
+  ([#739](https://github.com/ralksta/immich-folio/pull/739), closes
+  [#605](https://github.com/ralksta/immich-folio/issues/605)). `sitePassword`
+  (overridden by `SITE_PASSWORD`) and `contact.notifyUrl`
+  (`CONTACT_NOTIFY_URL`) are disabled in the settings editor with a note
+  naming the variable, and a save keeps what `settings.yaml` holds for them.
+  `SITE_TITLE`, `SITE_SUBTITLE` and `SITE_URL` are fallbacks, not overrides,
+  and stay editable.
+
+- **An accessibility baseline**
+  ([#741](https://github.com/ralksta/immich-folio/pull/741), closes
+  [#696](https://github.com/ralksta/immich-folio/issues/696)). The hero
+  carousel stops auto-advancing under `prefers-reduced-motion` and has a pause
+  button, and one reduced-motion rule covers the site, the admin and
+  `/install`. Theme toggle, menu button and scroll-to-top are 44×44 px
+  targets; EXIF and cover overlays also show on keyboard focus, and always on
+  touch screens. The lightbox keeps Tab inside and returns focus to the photo
+  shown last, the mobile menu moves focus in and back out, and the admin and
+  `/install` have skip links. Photo counts in descriptions and share cards,
+  the lightbox position and the _Gallery_ fallback title are translated.
+  Header and hero navigation now share one order — Home, subpages and content
+  pages in `gallery.yaml` order, standalone albums, Journal, About, Map — with
+  external `navLinks` last.
+
+### Changed
+
+- **Less work per request**
+  ([#753](https://github.com/ralksta/immich-folio/pull/753),
+  [#756](https://github.com/ralksta/immich-folio/pull/756),
+  [#749](https://github.com/ralksta/immich-folio/pull/749),
+  [#761](https://github.com/ralksta/immich-folio/pull/761),
+  [#775](https://github.com/ralksta/immich-folio/pull/775)). The configuration
+  is derived once per content-file change instead of on every read (one
+  `/api/image` request did it seven times), and the Immich client reads it
+  once per operation. Album blocks in journal entries, content pages and
+  essays go through the album cache with request coalescing, and a page's
+  blocks load in parallel instead of one after another. Parsed journal and
+  page listings are kept while their files are unchanged, and the journal and
+  site navigation are read once per request. Content edits still show on the
+  next request; album blocks now follow `CACHE_TTL` like every other album.
+
+- **One image URL per photo and size tier**
+  ([#762](https://github.com/ralksta/immich-folio/pull/762)). The proxy
+  answers every width within a tier with the same bytes, but `next/image`
+  wrote ten widths into each `srcset` and the lightbox asked for an eleventh
+  spelling, so opening a grid photo downloaded the same preview again, and so
+  did rotating a phone. Grid, hero, essay and lightbox now request one URL per
+  tier, and the unused `q` parameter is gone. An album viewed in full in the
+  lightbox transfers each preview once instead of twice, and a CDN sees at
+  most one miss per photo and tier. The URLs change once; see the upgrade
+  notes.
+
+- **Pages ship less code they do not use**
+  ([#770](https://github.com/ralksta/immich-folio/pull/770),
+  [#766](https://github.com/ralksta/immich-folio/pull/766)). The proofing UI
+  loads only on pages where proofing is on, and Leaflet's stylesheet and map
+  wrapper only when an essay contains a map block. Album, subpage and journal
+  pages drop 3–5 KB of gzipped JavaScript and 14% of their render-blocking
+  CSS.
+
+- **Settings the site would ignore are refused on save**
+  ([#795](https://github.com/ralksta/immich-folio/pull/795)). A site URL
+  without a scheme, an accent that is not hex, or grid columns and gap outside
+  their bounds were saved with a success message and then silently replaced
+  when the site rendered. The settings form now marks such fields as you type,
+  the save answers `400` naming them and writes nothing, and a new doctor
+  check, `settings-values`, reports values already in `settings.yaml` that the
+  site ignores.
+
+- **Admin colours: blue accent, amber warnings, readable muted text**
+  ([#795](https://github.com/ralksta/immich-folio/pull/795)). Outside Studio
+  Modern the admin accent was the same amber as its warnings, so every active
+  marker and focus ring read as a warning; it is now blue. The unsaved-changes
+  bar and the order editor's drift notice use the warning colour instead of
+  the accent (red under Studio Modern), the status badge has its own amber
+  tone for doctor warnings, and muted text reaches 4.5:1 on every admin
+  surface in every preset.
+
+### Fixed
+
+- **Public pages follow admin saves on the next request**
+  ([#790](https://github.com/ralksta/immich-folio/pull/790)). After a save,
+  changed album titles, descriptions and slugs, and newly published albums,
+  could take up to `CACHE_TTL` (five minutes by default) to appear, and a new
+  album answered 404 meanwhile: the save cleared a copy of the Immich cache
+  that the public pages never read. The cache now holds only Immich's data and
+  applies `gallery.yaml` on the way out, and it is one store per process, so
+  _Clear cache_ in Diagnostics, the webhook and the status panel act on the
+  cache the pages use. A subpage's cover grid and its albums' previous/next
+  links follow the order from `gallery.yaml` and the page builder instead of
+  Immich's. See the upgrade notes.
+
+- **Photo captions with parentheses no longer break journal entries**
+  ([#788](https://github.com/ralksta/immich-folio/pull/788)). A caption like
+  `Summit (560 m)`, or one with a link, ended the photo block at the first
+  `)`: the public page rendered the line as a paragraph showing raw asset IDs,
+  and the editor turned it into a text block, dropping the photo on the next
+  save. Captions now run to the block's last `)`, with no change to the file
+  format, and existing entries parse as before. Photo lines without a blank
+  line between them or directly under a heading are recognised too, and a link
+  URL may hold one level of parentheses.
+
+- **Journal and essay text fields show Markdown, not stored HTML**
+  ([#789](https://github.com/ralksta/immich-folio/pull/789)). After a reload,
+  text blocks, quotes, captions and fact values showed raw `<strong>` and
+  `<a>` tags, and text typed inside a tag could be lost on save. The fields
+  now show and take inline Markdown, the live preview renders bold, italics
+  and links while you type, and an untouched block saves byte for byte as
+  before.
+
+- **Contact messages from devices with a wrong clock are no longer dropped**
+  ([#771](https://github.com/ralksta/immich-folio/pull/771)). The fill-time
+  check compared the visitor's clock with the server's. A device ten minutes
+  fast, or a day slow, made a genuine message look like spam, which is
+  discarded silently while the sender sees the thank-you page. The form is now
+  stamped with the server's time.
+
+- **Missing pages answer a real 404**
+  ([#781](https://github.com/ralksta/immich-folio/pull/781),
+  [#772](https://github.com/ralksta/immich-folio/pull/772)). Since 0.18.0, a
+  switched-off `/contact`, `/impressum`, `/privacy` or `/map`, or an unknown
+  `/journal/<slug>`, could hang for about 30 seconds and fail with `500` when
+  the server was bound to `127.0.0.1`, because the proxy's rewrite looped back
+  through `localhost`. They now get `404` at once. Paths deeper than two
+  segments, such as `/travel/iceland/anything`, rendered the parent subpage or
+  album with `200` and its title; they answer `404` as well.
+
+- **_Email to photographer_ addresses the photographer**
+  ([#746](https://github.com/ralksta/immich-folio/pull/746) by
+  [@lancetm714](https://github.com/lancetm714), follow-up
+  [#747](https://github.com/ralksta/immich-folio/pull/747); reported in
+  [#736](https://github.com/ralksta/immich-folio/issues/736) by
+  [@RichKidsDev](https://github.com/RichKidsDev)). The proofing dialog opened a
+  mail with an empty _To:_ line. The recipient is now the footer contact
+  email, or the new optional `proofing.email` (Settings → General → _Proofing
+  email_); with neither set, the button is hidden. The address stays out of
+  the served HTML, as the footer's does.
+
+- **Proofing on public albums counts and filters correctly**
+  ([#763](https://github.com/ralksta/immich-folio/pull/763),
+  [#773](https://github.com/ralksta/immich-folio/pull/773),
+  [#787](https://github.com/ralksta/immich-folio/pull/787)). The selection
+  count included favourites stored under the same album key but not in the
+  grid — removed photos, or another album with the same name — so the bar
+  could read "3 selected" over one heart; only this album's photos count now.
+  With the favourites filter on, un-hearting the photo open in the lightbox
+  crashed the page when it was the last in the list, and un-hearting the last
+  favourite left an empty grid with no way back. The viewer now steps to the
+  previous favourite or closes, and an empty filter shows _Show all_.
+
+- **Hidden subpages stay off the map**
+  ([#782](https://github.com/ralksta/immich-folio/pull/782)). `hidden: true`
+  subpages are reachable by link only and were already left out of the
+  sitemap, but `/map` showed markers for albums only they carry — name, link
+  and thumbnail — and counted them in its header. Their photos still load for
+  anyone with the link. The map header also no longer counts an album on two
+  subpages twice.
+
+- **Edits made while an admin save is in flight are kept**
+  ([#768](https://github.com/ralksta/immich-folio/pull/768)). Editors marked
+  themselves clean when the save answered, so edits typed meanwhile showed as
+  saved, were missing from the draft and were lost on leaving; the journal
+  editor and the page builder even replaced them with the written copy.
+  Editors now compare with what they sent and stay unsaved when there is more
+  to save. This covers the journal and page editor, the page builder,
+  Settings, About and the privacy policy.
+
+- **Slug fields take hyphens and keep accented letters**
+  ([#751](https://github.com/ralksta/immich-folio/pull/751)). The new-page,
+  page-URL and new-journal-entry fields stripped a trailing hyphen on every
+  keystroke, so `about-us` could only be pasted. Accented letters became
+  hyphens (`Über mich` → `ber-mich`); they now fold to the base letter and `ß`
+  to `ss`, as subpage slugs already did. Existing slugs do not change.
+
+- **Journal dates show the written day everywhere**
+  ([#776](https://github.com/ralksta/immich-folio/pull/776)). On a server west
+  of Greenwich a date-only `2026-03-15` showed as 14 March on the index,
+  hand-typed dates showed "Invalid Date", and the entry page printed the raw
+  frontmatter. Index and entry now format dates the same way, in the site's
+  language and without a timezone shift; `YYYY-MM` shows month and year,
+  anything else is shown as written. Entries with the same date are ordered by
+  slug, so the index and previous/next links no longer depend on the
+  filesystem.
+
+- **Password gates and refusal pages**
+  ([#786](https://github.com/ralksta/immich-folio/pull/786)). Once the rate
+  limit kicked in, the gate said "wrong password" even for the right one and
+  cleared the field; it now says how many seconds to wait and keeps the input.
+  A locked journal entry has its own gate subtitle instead of the gallery's.
+  The ZIP refusal page uses the preset's colours in the site's colour mode
+  instead of plain white, and an expired proofing link is titled as expired
+  rather than "not found".
+
+- **The lightbox and error messages are readable in light mode**
+  ([#792](https://github.com/ralksta/immich-folio/pull/792)). The lightbox
+  overlay is dark in both modes, but its close button, arrows, counter and
+  focus ring used the page's near-black light-mode text colours, down to
+  1.1:1. They now have their own tokens, the round controls get a dark
+  translucent fill that stays visible over a white sky, and the favourite
+  toggle keeps its colour on hover. A new per-mode `--error` colour brings
+  form and gate errors to 4.5:1, and text on accent-filled buttons in the
+  proofing dialogs and on Studio Modern's 404 page follows `--on-accent`.
+
+- **No sideways scrolling on phones and tablets**
+  ([#791](https://github.com/ralksta/immich-folio/pull/791),
+  [#797](https://github.com/ralksta/immich-folio/pull/797)). The footer's name
+  and legal links made every Studio Modern page 441px wide on a 390px phone,
+  which also pushed the lightbox's close and next buttons off-screen. The
+  footer wraps, the header switches to the menu whenever its links do not fit
+  in one row (not only below 641px), the map loses a second side gutter and
+  its grey bands, and Studio Modern's smaller phone and tablet gutters take
+  effect. Long hero, subpage, privacy and album titles wrap or hyphenate
+  instead of widening the page, and phone content no longer starts under the
+  header.
+
+- **The admin on phones, keyboards and screen readers**
+  ([#793](https://github.com/ralksta/immich-folio/pull/793),
+  [#794](https://github.com/ralksta/immich-folio/pull/794),
+  [#795](https://github.com/ralksta/immich-folio/pull/795)). On a phone the
+  subpage sheet was clipped after one screen, hiding its albums and _Delete_;
+  it now grows with its content and scrolls into view on tap, and the journal
+  list, status dropdown and Story Settings password field fit. The album
+  drawer, order editor, Story Settings and new-entry dialog are modal dialogs
+  with Escape and a focus trap, Escape closes only the innermost of two open
+  dialogs, and album picker rows are buttons reachable from the keyboard. An
+  unsaved privacy policy survives switching settings sections, like About. The
+  admin is marked `lang="en"`, so a screen reader on a German site no longer
+  reads it with a German voice, and the analytics chart shows the last 14
+  calendar days, empty ones included.
+
+- **The admin overview no longer crashes on the older map form of
+  `subpages:`** in `gallery.yaml`
+  ([#754](https://github.com/ralksta/immich-folio/pull/754)).
+
+- **Translations** ([#784](https://github.com/ralksta/immich-folio/pull/784),
+  [#777](https://github.com/ralksta/immich-folio/pull/777)). Navigation, next
+  and back links and the subpage password gate name a subpage by its `title`
+  instead of its `gallery.yaml` key (`south-korea`). The map's zoom buttons
+  and Leaflet credit are translated, the share card no longer lowercases its
+  subtitle ("25 fotos"), German says "Diashow" throughout, French uses the
+  singular for 0, and the proofing mail subject no longer reads "1 items".
+
+### Internal
+
+- **The unit tests no longer write into the checkout's `content/`**
+  ([#778](https://github.com/ralksta/immich-folio/pull/778)).
+  `journal.test.ts` created and deleted a real journal entry there, which in a
+  self-hosted checkout briefly published it and left a
+  `test-journey-nordkap.md.<timestamp>.deleted.bak` in
+  `content/journal/.backups/`; remove any such file by hand. A setup file now
+  fails every test that writes under `content/`.
+- **Every public API route must declare whether the site password gates it**
+  ([#750](https://github.com/ralksta/immich-folio/pull/750)); a test fails on
+  a route that is in neither list.
+- **The standalone build no longer traces the whole project**
+  ([#796](https://github.com/ralksta/immich-folio/pull/796)), which the config
+  memo of [#753](https://github.com/ralksta/immich-folio/pull/753) had caused
+  before release.
+- Admin screenshots in the README and `docs/journal.md` show the redesigned
+  panel ([#735](https://github.com/ralksta/immich-folio/pull/735)).
+
+### Upgrade notes
+
+**Image URLs change once.** Each photo now has one URL per size tier, and the
+`q` parameter is gone
+([#762](https://github.com/ralksta/immich-folio/pull/762)). Browsers and a CDN
+fetch every photo once more after the upgrade, as after an
+`IMAGE_CACHE_VERSION` bump. No `IMAGE_CACHE_VERSION` bump is needed this time.
+
+**At most two ZIP downloads run at once per client IP**
+([#774](https://github.com/ralksta/immich-folio/pull/774)). Behind a reverse
+proxy, `TRUSTED_PROXY_HOPS` must be set correctly; otherwise every visitor has
+the proxy's address and all of them share the same two slots.
+
+**Admin saves no longer clear the Immich album cache**
+([#790](https://github.com/ralksta/immich-folio/pull/790)). Changes to
+`gallery.yaml` and settings show on the next request as before. Changes made
+inside Immich — new photos in an album, a renamed album — appear after
+`CACHE_TTL`, after _Clear cache_ under Diagnostics, or at once when the Immich
+webhook is set up.
+
+**Every password attempt costs one scrypt verification** (about 40 ms),
+including attempts on keys that have no password
+([#785](https://github.com/ralksta/immich-folio/pull/785)). The auth rate
+limit keeps the total small.
+
+**The admin's default accent is blue**
+([#795](https://github.com/ralksta/immich-folio/pull/795)); warnings stay
+amber. Studio Modern keeps its red accent.
+
+**Paths deeper than two segments answer `404`**
+([#781](https://github.com/ralksta/immich-folio/pull/781)), where they used to
+render the parent subpage or album. Links of that shape were never generated
+by the site.
+
+**Header and hero navigation share one order**
+([#741](https://github.com/ralksta/immich-folio/pull/741)): external
+`navLinks` from `settings.yaml` now come after About and Map.
+
+**`content/` gains `proofing.json` and `pages/`**, both created on demand, so
+a writable `content/` is enough, as before. `/proof` is a fixed route now: a
+subpage slugged `proof` is hidden behind it.
+
+**New, optional settings:** `proofing.email` and the `PROOFING_WEBHOOK_URL`
+environment variable. See `content/settings.yaml.example`,
+`.env.local.example` and `docs/gallery-config.md#client-proofing-links`.
+
 ## [0.18.1] — 2026-09-27
 
 ### Fixed
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6db8697..85f48df 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -75,6 +75,12 @@ cheaper to test and stays tested when the markup around it changes. Reach for a
 component test when the behaviour _is_ the rendering: a state that hides a form,
 a control that must stay disabled, a keyboard shortcut.
 
+**Never write into the checkout's `content/`.** On a self-hosted install that
+directory is the live site. Services resolve it from `process.cwd()`, so a test
+that saves or deletes anything points `cwd` at a temp directory first and
+re-imports the service — `lib/__tests__/journal-backup.test.ts` shows how.
+`vitest.content-guard.ts` fails any test that writes there anyway.
+
 ## Code style
 
 - **TypeScript** — strict mode, no `any` without justification
diff --git a/README.md b/README.md
index 528bfd3..4817c60 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@
 
 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.1** — built-in contact form, privacy page and a reworked admin panel. → [What's New](#whats-new)
+**Latest: v0.19.0** — private proofing links for clients, custom content pages and a round of security fixes. → [What's New](#whats-new)
 
 ## Contents
 
@@ -67,6 +67,7 @@ A self-hosted portfolio powered by [Immich](https://immich.app). It acts as a **
 - **Subpage on/off toggle** — take a page offline without deleting it
 - **External navigation links** _(experimental)_ — point the header at a shop, a blog, or a social profile
 - **Client proofing** — clients favorite photos and export the selection; picks are encoded in the URL, nothing is stored server-side
+- **Client proofing links** — a private link per client and album, picks saved server-side, a submit that locks the selection and pings you via webhook, expiry dates, download limits, and a Lightroom-ready export of the chosen file names ([guide](docs/gallery-config.md#client-proofing-links))
 - **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
@@ -225,6 +226,7 @@ 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
+PROOFING_WEBHOOK_URL=https://…         # notify on submitted client proofing selections
 ```
 
 > 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).
@@ -330,11 +332,11 @@ own password, separate from any album passwords, and writes straight to
 
 <p align="center">
   <img src="docs/screenshots/admin-login.png" width="49%" alt="Admin panel login screen" />
-  <img src="docs/screenshots/admin-page-builder.png" width="49%" alt="Visual page builder with hero images, standalone albums and subpages" />
+  <img src="docs/screenshots/admin-page-builder.png" width="49%" alt="Page builder: the site structure on the left, the selected page with its albums on the right" />
 </p>
 <p align="center">
   <img src="docs/screenshots/admin-album-picker.png" width="49%" alt="Album picker listing shared Immich albums with photo counts" />
-  <img src="docs/screenshots/admin-settings.png" width="49%" alt="Settings editor with site identity and feature toggles" />
+  <img src="docs/screenshots/admin-settings.png" width="49%" alt="Settings editor: sections on the left, site identity and feature switches grouped by meaning" />
 </p>
 <p align="center"><em>Login · page builder · album picker · settings editor</em></p>
 
@@ -342,15 +344,15 @@ own password, separate from any album passwords, and writes straight to
 
 ## What's New
 
-v0.18.0 — a contact form, a privacy page and a reworked admin:
+v0.19.0 — client proofing links, content pages and a big quality pass:
 
-- **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))
+- **Private proofing links for clients** — one link per client and album, with an optional expiry, download limit and ZIP; the selection is saved on the server, the client submits it, and you export the picks as a Lightroom or Capture One filter
+- **Custom content pages** — `content/pages/<slug>.md` pages (pricing, workshops, anything) written in the journal editor and placed in the menu next to your subpages
+- **A calmer admin** — library search and multi-select in the photo picker, a warning instead of a silent overwrite when a file changed elsewhere, settings from the environment shown as locked, and invalid values refused on save
+- **Better on phones and in light mode** — no sideways scrolling, a menu whenever the navigation does not fit, readable lightbox controls, and an accessibility baseline (reduced motion, focus handling, touch targets)
+- **Security fixes** — media URLs stop working once a photo leaves the site, offline subpages are unpublished everywhere, and the sitemap skips protected journal entries ([advisories](https://github.com/ralksta/immich-folio/security/advisories))
 
-**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.
+**Upgrade note:** image URLs change once (browser and CDN caches refill by themselves), at most two ZIP downloads run at once per visitor — set `TRUSTED_PROXY_HOPS` behind a reverse proxy — and changes made inside Immich now show after `CACHE_TTL` or _Clear cache_. Details in the [changelog](CHANGELOG.md).
 
 Security fixes ship in normal releases, so **running the latest release is the
 recommended baseline**.
@@ -381,12 +383,14 @@ easier to live with.
   picked, as one archive of the originals — streamed, so even a large shoot
   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.
+  turning every button invisible. In v0.19.0, gave the proofing dialog's
+  _Email to photographer_ an actual recipient.
 - **[@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.
+  a second channel. In v0.19.0, reported that _Email to photographer_ opened a
+  mail with nobody in the _To:_ line.
 - **[@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]/AlbumDetailView.tsx b/app/[...path]/AlbumDetailView.tsx
index 15d7c5e..cd17f1a 100644
--- a/app/[...path]/AlbumDetailView.tsx
+++ b/app/[...path]/AlbumDetailView.tsx
@@ -11,14 +11,16 @@ import { albumMetaDetail } from '@/lib/albumMeta';
 import { AlbumNav } from '@/components/AlbumNav';
 import { StructuredData } from '@/components/StructuredData';
 import type { AlbumNavPair } from '@/lib/albumNav';
+import type { ProofSessionInit } from '@/components/ProofingContext';
 
 interface AlbumDetailViewProps {
   album: ImmichAlbum;
   images: PhotoItem[];
   layout: GridConfig['layout'];
   gridStyle: React.CSSProperties;
-  backLinkHref: string;
-  backLinkLabel: string;
+  /** Omitted on a client proofing link, which has nowhere to go back to. */
+  backLinkHref?: string;
+  backLinkLabel?: string;
   subtitle?: string;
   heroImageUrl?: string;
   heroBlurDataURL?: string;
@@ -31,6 +33,12 @@ interface AlbumDetailViewProps {
   proofing?: boolean;
   /** Offer the "send by email" button in the proofing modal. */
   allowMailto?: boolean;
+  /**
+   * `encodeEmail()` of where the proofing dialog's "email to photographer"
+   * goes, when one is configured (#736). Encoded, like every address the site
+   * renders, so the plain form stays out of the HTML and the RSC payload.
+   */
+  encodedMailto?: string;
   /**
    * The ZIP endpoint for this album, when it offers downloads (#475). Renders a
    * "download album" link in the header and lets the proofing modal offer a
@@ -41,6 +49,10 @@ interface AlbumDetailViewProps {
   nav?: AlbumNavPair;
   /** JSON-LD for this album, or null when no site URL is configured (#472). */
   structuredData?: Record<string, unknown> | null;
+  /** A client proofing link's session; see PhotoGrid. */
+  proofSession?: ProofSessionInit;
+  /** Rendered under the title — the proofing link's greeting and notes. */
+  intro?: React.ReactNode;
 }
 
 export function AlbumDetailView({
@@ -58,9 +70,12 @@ export function AlbumDetailView({
   showGear = true,
   proofing,
   allowMailto,
+  encodedMailto,
   downloadArchiveUrl,
   nav,
   structuredData,
+  proofSession,
+  intro,
 }: AlbumDetailViewProps) {
   const metaDetail = albumMetaDetail(album, showGear);
   const t = getServerDictionary();
@@ -86,7 +101,7 @@ export function AlbumDetailView({
       )}
       <div className={`album-header${heroImageUrl ? ' album-header--has-hero' : ''}`}>
         <div className="album-header__main">
-          <BackLink href={backLinkHref} label={backLinkLabel} />
+          {backLinkHref && <BackLink href={backLinkHref} label={backLinkLabel ?? ''} />}
           <h1 className="album-header__title">{album.albumName}</h1>
           {subtitle && (
             <p className="subpage-subtitle" style={{ textAlign: 'left', marginLeft: 0 }}>
@@ -94,6 +109,7 @@ export function AlbumDetailView({
             </p>
           )}
           {album.description && <p className="album-header__description">{album.description}</p>}
+          {intro}
           {downloadArchiveUrl && (
             <a className="album-header__download" href={downloadArchiveUrl}>
               <svg
@@ -127,8 +143,10 @@ export function AlbumDetailView({
         showExifPanel={showExifPanel}
         proofing={proofing}
         allowMailto={allowMailto}
+        encodedMailto={encodedMailto}
         downloadArchiveUrl={downloadArchiveUrl}
         albumName={album.albumName}
+        proofSession={proofSession}
       />
       {nav && <AlbumNav {...nav} />}
     </>
diff --git a/app/[...path]/EssayView.tsx b/app/[...path]/EssayView.tsx
index 5a3ec6a..4734ff2 100644
--- a/app/[...path]/EssayView.tsx
+++ b/app/[...path]/EssayView.tsx
@@ -2,17 +2,32 @@
 
 import { useState, useMemo } from 'react';
 import Image from 'next/image';
+import dynamic from 'next/dynamic';
 import { Lightbox, type LightboxWatermark } from '@/components/Lightbox';
-import { ProofingProvider, useProofing } from '@/components/ProofingContext';
-import { ProofingModal } from '@/components/ProofingModal';
+import { useProofing } from '@/components/useProofing';
+import { ProofingProvider, ProofingModal } from '@/components/ProofingLazy';
 import { FadeIn } from '@/components/FadeIn';
-import { LeafletMap, escapeHtml } from '@/components/LeafletMap';
+import { escapeHtml } from '@/lib/escapeHtml';
 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';
+import { formatJournalDate } from '@/lib/journalDate';
+
+/**
+ * The map block is the only thing in an essay that needs Leaflet, and most
+ * essays have none. Imported statically, LeafletMap put its wrapper and
+ * Leaflet's stylesheet (render-blocking CSS) on every album, subpage and
+ * journal page. The map only ever drew on the client — Leaflet itself was
+ * already imported inside an effect — so the server renders the same empty
+ * container it rendered before, and the wrapper arrives with the map.
+ */
+const LeafletMap = dynamic(() => import('@/components/LeafletMap').then((m) => m.LeafletMap), {
+  ssr: false,
+  loading: () => <div className="essay-map" />,
+});
 
 interface EssayViewProps {
   essay: ParsedEssay;
@@ -28,6 +43,8 @@ interface EssayViewProps {
   proofing?: boolean;
   /** Offer the "send by email" button in the proofing modal. */
   allowMailto?: boolean;
+  /** `encodeEmail()` of the proofing recipient, when one is configured (#736). */
+  encodedMailto?: string;
 }
 
 function EssayViewContent({
@@ -389,6 +406,9 @@ function EssayViewContent({
     }
   };
 
+  // The story's photos that are selected, not the whole stored set (see PhotoGrid).
+  const selectedCount = proofing ? proofing.getSelectedTokens().length : 0;
+
   return (
     <div className="essay-container">
       <header className="essay-header">
@@ -396,7 +416,9 @@ function EssayViewContent({
         {displaySubtitle && <p className="essay-header__subtitle">{displaySubtitle}</p>}
         {(essay.frontmatter.author || essay.frontmatter.date) && (
           <div className="essay-header__meta">
-            {[essay.frontmatter.author, essay.frontmatter.date].filter(Boolean).join(' • ')}
+            {[essay.frontmatter.author, formatJournalDate(essay.frontmatter.date, t.dateLocale)]
+              .filter(Boolean)
+              .join(' • ')}
           </div>
         )}
       </header>
@@ -429,9 +451,9 @@ function EssayViewContent({
         </figure>
       )}
 
-      <main>{essay.blocks.map(renderBlock)}</main>
+      <div>{essay.blocks.map(renderBlock)}</div>
 
-      {proofing && proofing.favorites.size > 0 && (
+      {proofing && selectedCount > 0 && (
         <div
           className="proofing-sticky-bar"
           style={{
@@ -454,7 +476,7 @@ function EssayViewContent({
           {/* 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)}
+            {t.proofing.selected(selectedCount)}
           </span>
           <button
             type="button"
@@ -513,6 +535,7 @@ export function EssayView(props: EssayViewProps) {
       // default key with every album (and story) on the site.
       albumName={props.title || props.essay.frontmatter.title}
       allowMailto={props.allowMailto ?? true}
+      encodedMailto={props.encodedMailto}
     >
       <EssayViewContent {...props} />
     </ProofingProvider>
diff --git a/app/[...path]/PhotoGrid.tsx b/app/[...path]/PhotoGrid.tsx
index 05e3c78..e47710e 100644
--- a/app/[...path]/PhotoGrid.tsx
+++ b/app/[...path]/PhotoGrid.tsx
@@ -15,8 +15,9 @@ import { useState, useCallback, useEffect, useMemo } from 'react';
 import Image from 'next/image';
 import { Lightbox, type LightboxWatermark } from '@/components/Lightbox';
 import { FadeIn } from '@/components/FadeIn';
-import { ProofingProvider, useProofing } from '@/components/ProofingContext';
-import { ProofingModal } from '@/components/ProofingModal';
+import type { ProofSessionInit } from '@/components/ProofingContext';
+import { useProofing } from '@/components/useProofing';
+import { ProofingProvider, ProofingModal, ProofSessionControls } from '@/components/ProofingLazy';
 import { useDictionary } from '@/components/I18nProvider';
 import { parsePhotoHash, parsePhotoQuery, buildPhotoQuery } from '@/lib/photoHash';
 
@@ -60,6 +61,12 @@ interface PhotoGridProps {
   proofing?: boolean;
   /** Offer the "send by email" button in the proofing modal. */
   allowMailto?: boolean;
+  /**
+   * `encodeEmail()` of where the proofing dialog's "email to photographer"
+   * goes, when one is configured (#736). Lets the modal address the compose;
+   * without it the button is hidden.
+   */
+  encodedMailto?: string;
   /**
    * The ZIP endpoint for this album, when it offers downloads. Lets the
    * proofing modal offer a "download selected" action (#475).
@@ -71,6 +78,11 @@ interface PhotoGridProps {
    * selection made in one album leaks into the next.
    */
   albumName?: string;
+  /**
+   * A client proofing link's session (/proof/<token>). Turns proofing on and
+   * keeps the selection on the server instead of in the browser.
+   */
+  proofSession?: ProofSessionInit;
 }
 
 function PhotoGridInner({
@@ -124,6 +136,33 @@ function PhotoGridInner({
     }
   }, [lightboxIndex, displayedAssets]);
 
+  // ── The photo on screen can leave the list ─────────────────────
+  // With "selected only" on, un-hearting the photo in the viewer drops it from
+  // `displayedAssets`. The viewer keeps its position, which now shows the next
+  // favourite; past the end it steps back to the last one, and with nothing
+  // left it closes. `shownIndex` keeps this render valid (it used to hand the
+  // viewer an index past the end, and the page crashed); the effect settles
+  // the state and the URL.
+  const shownIndex =
+    lightboxIndex === null || displayedAssets.length === 0
+      ? null
+      : Math.min(lightboxIndex, displayedAssets.length - 1);
+
+  useEffect(() => {
+    if (lightboxIndex === null || lightboxIndex < displayedAssets.length) return;
+    if (displayedAssets.length > 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setLightboxIndex(displayedAssets.length - 1);
+      return;
+    }
+    setLightboxIndex(null);
+    window.history.replaceState(
+      null,
+      '',
+      window.location.pathname + buildPhotoQuery(window.location.search, null),
+    );
+  }, [lightboxIndex, displayedAssets.length]);
+
   // ── Listen for browser back/forward ────────────────────────────
   useEffect(() => {
     const handlePopState = () => {
@@ -204,6 +243,7 @@ function PhotoGridInner({
             }}
             role="button"
             tabIndex={0}
+            data-lightbox-index={index}
             aria-label={t.lightbox.openPhoto(index + 1)}
             aria-haspopup="dialog"
             style={{
@@ -285,13 +325,38 @@ function PhotoGridInner({
     });
   }, [displayedAssets, layout, openLightbox, proofing, t]);
 
+  // Photos of this album that are selected. Not `favorites.size`: the stored set
+  // can also hold a photo since removed, or a favourite from another album whose
+  // name slugs the same way (they share `folio_fav_<name>`).
+  const selectedCount = proofing ? proofing.getSelectedTokens().length : 0;
+
   return (
     <>
-      <div className={`photo-grid photo-grid--${layout}`} style={gridStyle}>
-        {gridItems}
-      </div>
+      {proofing?.isFilterActive && displayedAssets.length === 0 ? (
+        // Un-hearting the last favourite with the filter on left a blank page
+        // between the header and the footer. Say why, and offer the way back
+        // here as well as in the bar in the corner.
+        <div className="empty-state" role="status">
+          <p className="empty-state__text">{t.proofing.filterEmpty}</p>
+          <div className="empty-state__actions">
+            <button
+              type="button"
+              className="empty-state__button"
+              onClick={() => proofing.setIsFilterActive(false)}
+            >
+              {t.proofing.showAll}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className={`photo-grid photo-grid--${layout}`} style={gridStyle} data-lightbox-group>
+          {gridItems}
+        </div>
+      )}
 
-      {proofing && proofing.favorites.size > 0 && (
+      {/* Kept while the filter is on: un-hearting the last favourite there
+          empties the grid, and the bar holds the only way back to all photos. */}
+      {proofing && !proofing.session && (selectedCount > 0 || proofing.isFilterActive) && (
         <div
           className="proofing-sticky-bar"
           style={{
@@ -327,9 +392,7 @@ function PhotoGridInner({
               cursor: 'pointer',
             }}
           >
-            {proofing.isFilterActive
-              ? t.proofing.showAll
-              : t.proofing.selected(proofing.favorites.size)}
+            {proofing.isFilterActive ? t.proofing.showAll : t.proofing.selected(selectedCount)}
           </button>
           <button
             type="button"
@@ -349,12 +412,13 @@ function PhotoGridInner({
         </div>
       )}
 
-      {proofing && <ProofingModal />}
+      {proofing && !proofing.session && <ProofingModal />}
+      {proofing?.session && <ProofSessionControls />}
 
-      {lightboxIndex !== null && (
+      {shownIndex !== null && (
         <Lightbox
           assets={displayedAssets}
-          currentIndex={lightboxIndex}
+          currentIndex={shownIndex}
           onClose={closeLightbox}
           onNext={goNext}
           onPrev={goPrev}
@@ -372,7 +436,7 @@ export function PhotoGrid(props: PhotoGridProps) {
   // Without the provider useProofing() returns null, and every proofing control
   // (hearts in the grid and in the lightbox, selection bar, modal) drops out on
   // its own.
-  if (!props.proofing) {
+  if (!props.proofing && !props.proofSession) {
     return <PhotoGridInner {...props} />;
   }
 
@@ -381,7 +445,9 @@ export function PhotoGrid(props: PhotoGridProps) {
       albumTokens={albumTokens}
       albumName={props.albumName}
       allowMailto={props.allowMailto ?? true}
+      encodedMailto={props.encodedMailto}
       downloadArchiveUrl={props.downloadArchiveUrl}
+      session={props.proofSession}
     >
       <PhotoGridInner {...props} />
     </ProofingProvider>
diff --git a/app/[...path]/__tests__/lightbox-filtered-unheart.test.tsx b/app/[...path]/__tests__/lightbox-filtered-unheart.test.tsx
new file mode 100644
index 0000000..a17105b
--- /dev/null
+++ b/app/[...path]/__tests__/lightbox-filtered-unheart.test.tsx
@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, within } from '@testing-library/react';
+import { PhotoGrid, type PhotoItem } from '../PhotoGrid';
+
+/**
+ * With "show selected" on, the lightbox walks the favourites only. Un-hearting
+ * the photo on screen takes it out of that list while the viewer is open: on
+ * the last favourite the index pointed past the end and the viewer crashed the
+ * page (`current` undefined), and on the only one the list was empty.
+ */
+
+vi.mock('next/image', () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt?: string }) => <img alt={alt ?? ''} />,
+}));
+vi.mock('@/components/FadeIn', () => ({
+  FadeIn: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+const photo = (id: string): PhotoItem => ({
+  id,
+  type: 'image',
+  thumbUrl: `/t/${id}`,
+  previewUrl: `/p/${id}`,
+  exifUrl: `/e/${id}`,
+  aspectRatio: 1.5,
+});
+
+const ASSETS = [photo('a1'), photo('a2'), photo('a3')];
+
+let store: Map<string, string>;
+
+beforeEach(() => {
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the test a working one.
+  store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+  window.history.replaceState(null, '', '/wedding');
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+async function openFilteredLightboxOn(n: number) {
+  render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+  fireEvent.click(await screen.findByText(/❤️ \d Selected/));
+  fireEvent.click(screen.getByLabelText(`View photo ${n}`));
+  return screen.getByRole('dialog');
+}
+
+const shownPhoto = (dialog: HTMLElement) =>
+  dialog.querySelector('img')?.getAttribute('src')?.split('?')[0];
+
+describe('un-hearting inside the filtered lightbox', () => {
+  it('moves to the previous favourite when the last one is removed', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a1', 'a3']));
+    const dialog = await openFilteredLightboxOn(2);
+    expect(shownPhoto(dialog)).toBe('/p/a3');
+
+    fireEvent.click(within(dialog).getByLabelText('Remove from favorites'));
+
+    const after = screen.getByRole('dialog');
+    expect(shownPhoto(after)).toBe('/p/a1');
+    expect(within(after).getByText('1 / 1')).toBeTruthy();
+    expect(new URLSearchParams(window.location.search).get('photo')).toBe('a1');
+  });
+
+  it('closes the viewer when the only favourite is removed', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a2']));
+    const dialog = await openFilteredLightboxOn(1);
+
+    fireEvent.click(within(dialog).getByLabelText('Remove from favorites'));
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(new URLSearchParams(window.location.search).get('photo')).toBeNull();
+  });
+});
diff --git a/app/[...path]/__tests__/loadAlbumBlocks.test.ts b/app/[...path]/__tests__/loadAlbumBlocks.test.ts
new file mode 100644
index 0000000..4263be7
--- /dev/null
+++ b/app/[...path]/__tests__/loadAlbumBlocks.test.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { JournalBlock } from '@/lib/journal';
+
+const getAlbumAssetsRaw = vi.fn();
+vi.mock('@/lib/immich', () => ({
+  immich: {
+    get getAlbumAssetsRaw() {
+      return getAlbumAssetsRaw;
+    },
+  },
+}));
+
+import { loadAlbumBlocks } from '../essayPayload';
+
+const album = (albumId: string) => ({ type: 'album', albumId, line: 0 }) as unknown as JournalBlock;
+const photo = { type: 'photo', line: 0 } as unknown as JournalBlock;
+
+describe('loadAlbumBlocks', () => {
+  beforeEach(() => {
+    getAlbumAssetsRaw.mockReset();
+  });
+
+  // It used to await each album before asking for the next, so a page with
+  // three album blocks waited for three Immich round trips in a row.
+  it('asks for every album before any answer arrives', async () => {
+    const pending: Array<() => void> = [];
+    getAlbumAssetsRaw.mockImplementation(
+      (id: string) =>
+        new Promise((resolve) => pending.push(() => resolve([{ id: `${id}-asset` }]))),
+    );
+
+    const result = loadAlbumBlocks([album('a'), photo, album('b'), album('c')], () => {});
+    await Promise.resolve();
+
+    expect(getAlbumAssetsRaw).toHaveBeenCalledTimes(3);
+    pending.forEach((resolve) => resolve());
+    expect([...(await result).keys()]).toEqual(['a', 'b', 'c']);
+  });
+
+  it('loads an album named by two blocks once', async () => {
+    getAlbumAssetsRaw.mockResolvedValue([]);
+
+    await loadAlbumBlocks([album('a'), album('a')], () => {});
+
+    expect(getAlbumAssetsRaw).toHaveBeenCalledTimes(1);
+  });
+
+  it('leaves out an album that fails and reports it, keeping the rest', async () => {
+    const failure = new Error('immich down');
+    getAlbumAssetsRaw.mockImplementation(async (id: string) => {
+      if (id === 'b') throw failure;
+      return [{ id: `${id}-asset` }];
+    });
+    const onError = vi.fn();
+
+    const result = await loadAlbumBlocks([album('a'), album('b'), album('c')], onError);
+
+    expect([...result.keys()]).toEqual(['a', 'c']);
+    expect(onError).toHaveBeenCalledWith('b', failure);
+  });
+});
diff --git a/app/[...path]/__tests__/metadata-title.test.ts b/app/[...path]/__tests__/metadata-title.test.ts
new file mode 100644
index 0000000..bb3d619
--- /dev/null
+++ b/app/[...path]/__tests__/metadata-title.test.ts
@@ -0,0 +1,161 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { Metadata } from 'next';
+
+/**
+ * generateMetadata runs for any URL a visitor types. It used to start from
+ * `title = slug` and keep that whenever nothing matched, so an unknown path,
+ * an offline subpage or a locked album put the requested slug in the
+ * `<title>` and in a validly signed share-card URL. Every branch that finds
+ * nothing — or finds it locked — now answers with a dictionary title and no
+ * card of its own.
+ */
+
+vi.mock('next/navigation', () => ({
+  notFound: () => {
+    throw new Error('NEXT_NOT_FOUND');
+  },
+}));
+vi.mock('next/headers', () => ({
+  cookies: async () => ({ get: () => undefined }),
+}));
+vi.mock('@/lib/admin/auth', () => ({ isAdminAuthenticated: async () => false }));
+vi.mock('@/lib/i18n/server', async () => {
+  const { getDictionary } = await import('@/lib/i18n');
+  return { getServerDictionary: () => getDictionary('en') };
+});
+vi.mock('@/lib/ogImage', () => ({
+  ogImageUrl: (title: string, subtitle = '') =>
+    `/api/og?title=${encodeURIComponent(title)}&subtitle=${encodeURIComponent(subtitle)}&sig=x`,
+}));
+vi.mock('../contentPage', () => ({
+  contentPageMetadata: vi.fn(async () => null),
+  renderContentPage: vi.fn(async () => null),
+}));
+
+const locked = vi.hoisted(() => ({ keys: new Set<string>() }));
+vi.mock('@/lib/auth', () => ({
+  isProtected: (key: string) => locked.keys.has(key),
+  isAuthenticated: () => false,
+  withoutLockedAlbums: <T>(albums: T[]) => albums,
+}));
+
+const immich = vi.hoisted(() => ({
+  isSubpageSlug: vi.fn((slug: string) => slug === 'travel' || slug === 'solo'),
+  getSubpageAlbums: vi.fn(),
+  getAlbumBySlug: vi.fn(),
+}));
+vi.mock('@/lib/immich', () => ({ immich }));
+
+const ICELAND = {
+  id: 'album-1',
+  albumName: 'Iceland',
+  slug: 'iceland',
+  assets: [{ id: 'a1', type: 'IMAGE' }],
+  albumThumbnailAssetId: null,
+};
+
+import { generateMetadata } from '../page';
+import { getDictionary } from '@/lib/i18n';
+
+const en = getDictionary('en');
+
+const meta = (path: string[]) =>
+  generateMetadata({ params: Promise.resolve({ path }), searchParams: Promise.resolve({}) });
+
+/** Every string the metadata would put in the page head or a share URL. */
+function emitted(m: Metadata): string {
+  return JSON.stringify(m);
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  locked.keys.clear();
+  immich.getAlbumBySlug.mockImplementation(async (slug: string) =>
+    slug === 'iceland' ? ICELAND : null,
+  );
+  immich.getSubpageAlbums.mockImplementation(async (slug: string) => {
+    if (slug === 'travel') {
+      return {
+        subpage: { slug: 'travel', name: 'travel', title: 'Travel', albumIds: ['album-1', 'b'] },
+        albums: [ICELAND, { ...ICELAND, id: 'b', slug: 'norway', albumName: 'Norway' }],
+      };
+    }
+    if (slug === 'solo') {
+      return { subpage: { slug: 'solo', name: 'solo', albumIds: ['album-1'] }, albums: [ICELAND] };
+    }
+    return null;
+  });
+});
+
+describe('page metadata never echoes the requested path', () => {
+  it.each([
+    ['an unknown slug', ['unknown-visitor-text']],
+    ['an unknown album under a real subpage', ['travel', 'nope']],
+    ['a three-segment path', ['iceland', 'x', 'y']],
+  ])('gives %s the generic not-found title and no card', async (_, path) => {
+    const m = await meta(path);
+
+    expect(m.title).toBe(en.error.notFoundTitle);
+    expect(m.openGraph).toBeUndefined();
+    expect(m.twitter).toBeUndefined();
+    for (const segment of path) expect(emitted(m)).not.toContain(encodeURIComponent(segment));
+  });
+
+  it('drops the layout robots tag on a not-found path, leaving only Next’s noindex', async () => {
+    const m = await meta(['nope']);
+    expect(m.robots).toBeNull();
+  });
+
+  it('treats an offline subpage like any unknown slug', async () => {
+    // isSubpageSlug is false for `enabled: false`, and no album has the slug.
+    const m = await meta(['dubai']);
+    expect(m.title).toBe(en.error.notFoundTitle);
+    expect(emitted(m)).not.toContain('dubai');
+  });
+
+  it('gives a locked standalone album the generic protected title', async () => {
+    locked.keys.add('album-1');
+    const m = await meta(['iceland']);
+
+    expect(m.title).toBe(en.password.protectedPage);
+    expect(emitted(m)).not.toContain('iceland');
+    expect(emitted(m)).not.toContain('Iceland');
+    expect(m.openGraph).toBeUndefined();
+  });
+
+  it('gives a locked multi-album subpage the protected title, not its slug', async () => {
+    locked.keys.add('travel');
+    const m = await meta(['travel']);
+
+    expect(m.title).toBe(en.password.protectedPage);
+    expect(emitted(m)).not.toContain('travel');
+  });
+
+  it('gives an album under a locked subpage the protected title', async () => {
+    locked.keys.add('travel');
+    const m = await meta(['travel', 'iceland']);
+
+    expect(m.title).toBe(en.password.protectedPage);
+    expect(emitted(m)).not.toContain('Iceland');
+  });
+
+  it('gives a locked album on a single-album subpage the protected title', async () => {
+    locked.keys.add('album-1');
+    const m = await meta(['solo']);
+
+    expect(m.title).toBe(en.password.protectedPage);
+    expect(emitted(m)).not.toContain('solo');
+  });
+
+  it('still describes published content by its own name', async () => {
+    const album = await meta(['iceland']);
+    expect(album.title).toBe('Iceland');
+    expect(emitted(album)).toContain(encodeURIComponent('Iceland'));
+
+    const subpage = await meta(['travel']);
+    expect(subpage.title).toBe('Travel');
+
+    const nested = await meta(['travel', 'iceland']);
+    expect(nested.title).toBe('Iceland');
+  });
+});
diff --git a/app/[...path]/__tests__/path-depth.test.ts b/app/[...path]/__tests__/path-depth.test.ts
new file mode 100644
index 0000000..dfcf11e
--- /dev/null
+++ b/app/[...path]/__tests__/path-depth.test.ts
@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+/**
+ * The catch-all answers one segment (subpage, content page, standalone album)
+ * and two (subpage/album). A third segment used to fall through to the
+ * one-segment branch, which only reads `path[0]`: `/travel/iceland/anything`
+ * rendered the Travel subpage and `/iceland/x/y` the Iceland album, each with
+ * a 200, under an endless supply of URLs.
+ */
+
+const NOT_FOUND = new Error('NEXT_NOT_FOUND');
+
+vi.mock('next/navigation', () => ({
+  notFound: () => {
+    throw NOT_FOUND;
+  },
+}));
+vi.mock('next/headers', () => ({
+  cookies: async () => ({ get: () => undefined }),
+}));
+vi.mock('@/lib/admin/auth', () => ({ isAdminAuthenticated: async () => false }));
+
+const immich = vi.hoisted(() => ({
+  isSubpageSlug: vi.fn((slug: string) => slug === 'travel'),
+  getSubpageAlbums: vi.fn(),
+  getAlbumBySlug: vi.fn(),
+  getStandaloneAlbums: vi.fn(async () => []),
+  getSubpages: vi.fn(async () => []),
+  getAssetInfo: vi.fn(async () => null),
+}));
+vi.mock('@/lib/immich', () => ({ immich }));
+
+const ALBUM = {
+  id: 'album-1',
+  albumName: 'Iceland',
+  slug: 'iceland',
+  assets: [],
+  albumThumbnailAssetId: null,
+};
+
+import PathPage, { generateMetadata } from '../page';
+import { getServerDictionary } from '@/lib/i18n/server';
+
+const call = (path: string[]) => ({
+  params: Promise.resolve({ path }),
+  searchParams: Promise.resolve({}),
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  immich.getAlbumBySlug.mockResolvedValue(ALBUM);
+  immich.getSubpageAlbums.mockResolvedValue({
+    subpage: { slug: 'travel', name: 'Travel', albumIds: ['album-1', 'album-2'] },
+    albums: [ALBUM, { ...ALBUM, id: 'album-2', slug: 'norway', albumName: 'Norway' }],
+  });
+});
+
+describe('catch-all path depth', () => {
+  it.each([[['iceland', 'x', 'y']], [['travel', 'iceland', 'extra']], [['travel', 'a', 'b', 'c']]])(
+    'answers %j with a 404',
+    async (path) => {
+      await expect(PathPage(call(path))).rejects.toBe(NOT_FOUND);
+      expect(immich.getAlbumBySlug).not.toHaveBeenCalled();
+      expect(immich.getSubpageAlbums).not.toHaveBeenCalled();
+    },
+  );
+
+  it('gives a three-segment path no album metadata, only the not-found title', async () => {
+    const meta = await generateMetadata(call(['iceland', 'x', 'y']));
+    expect(meta.title).toBe(getServerDictionary().error.notFoundTitle);
+    expect(immich.getAlbumBySlug).not.toHaveBeenCalled();
+  });
+
+  it('still renders one and two segments', async () => {
+    await expect(PathPage(call(['iceland']))).resolves.toBeTruthy();
+    await expect(PathPage(call(['travel', 'iceland']))).resolves.toBeTruthy();
+  });
+});
diff --git a/app/[...path]/__tests__/proofing-count.test.tsx b/app/[...path]/__tests__/proofing-count.test.tsx
new file mode 100644
index 0000000..6c2933f
--- /dev/null
+++ b/app/[...path]/__tests__/proofing-count.test.tsx
@@ -0,0 +1,121 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, within } from '@testing-library/react';
+import { PhotoGrid, type PhotoItem } from '../PhotoGrid';
+import { EssayView } from '../EssayView';
+import { parseEssayMarkdown } from '@/lib/essay';
+import { encodeEmail } from '@/lib/emailObfuscation';
+
+/**
+ * The anonymous proofing selection lives under `folio_fav_<albumName>`, so it
+ * can hold tokens this grid does not show: a photo since removed from the
+ * album, or a favourite from another album whose name slugs the same way.
+ * Every count the visitor sees must be the photos of *this* album that are
+ * selected — the modal's download button already counted that way, while the
+ * bar, the title and the email subject counted the whole stored set.
+ */
+
+vi.mock('next/image', () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt?: string }) => <img alt={alt ?? ''} />,
+}));
+vi.mock('@/components/Lightbox', () => ({ Lightbox: () => null }));
+vi.mock('@/components/LeafletMap', () => ({
+  LeafletMap: () => null,
+  escapeHtml: (s: string) => s,
+}));
+vi.mock('@/components/FadeIn', () => ({
+  FadeIn: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+const photo = (id: string): PhotoItem => ({
+  id,
+  type: 'image',
+  thumbUrl: `/t/${id}`,
+  previewUrl: `/p/${id}`,
+  exifUrl: `/e/${id}`,
+  aspectRatio: 1.5,
+});
+
+const ASSETS = [photo('a1'), photo('a2'), photo('a3')];
+
+let store: Map<string, string>;
+
+beforeEach(() => {
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the test a working one.
+  store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe('proofing counts in the album grid', () => {
+  it('counts only this album’s photos, not stale or foreign favourites', async () => {
+    // One photo of this album, one removed photo, one from a same-named album.
+    store.set('folio_fav_wedding', JSON.stringify(['a2', 'gone', 'other-album']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+
+    expect(await screen.findByText('❤️ 1 Selected')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('Share & Export'));
+    expect(screen.getByText('❤️ Selection (1)')).toBeTruthy();
+    expect(screen.getByText(/You have selected 1 photo\./)).toBeTruthy();
+  });
+
+  it('shows no selection bar when only foreign favourites are stored', () => {
+    store.set('folio_fav_wedding', JSON.stringify(['gone', 'other-album']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    // `render` flushes the hydration effect, so the stored set is loaded here.
+    expect(screen.queryByText(/Selected/)).toBeNull();
+    expect(screen.queryByText('Share & Export')).toBeNull();
+  });
+
+  it('keeps "Show All" reachable after the last favourite is removed in the filter', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a1']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    fireEvent.click(await screen.findByText('❤️ 1 Selected'));
+    // Filtered to the one favourite; un-heart it and the grid is empty.
+    fireEvent.click(screen.getByLabelText('Remove favorite'));
+    expect(screen.queryByLabelText('Add favorite')).toBeNull();
+    // The empty state offers "Show All" too; this is about the bar's own.
+    const bar = document.querySelector<HTMLElement>('.proofing-sticky-bar')!;
+    fireEvent.click(within(bar).getByText('Show All'));
+    expect(screen.getAllByLabelText('Add favorite')).toHaveLength(3);
+  });
+
+  it('puts the album count into the email subject', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a1', 'gone']));
+    render(
+      <PhotoGrid
+        assets={ASSETS}
+        proofing
+        albumName="Wedding"
+        allowMailto
+        encodedMailto={encodeEmail('hello@example.com')}
+      />,
+    );
+    fireEvent.click(await screen.findByText('Share & Export'));
+    const location = { href: 'http://localhost/wedding' };
+    vi.stubGlobal('location', location);
+    fireEvent.click(screen.getByText('✉️ Send Email to Photographer'));
+    expect(decodeURIComponent(location.href)).toMatch(/Photo Selection \(1 items?\)/);
+  });
+});
+
+describe('proofing counts in an essay', () => {
+  it('counts only the essay’s photos', async () => {
+    store.set('folio_fav_story', JSON.stringify(['a3', 'gone']));
+    const essay = parseEssayMarkdown('---\ntitle: Story\n---\n\n![a1, a3](caption)\n');
+    render(<EssayView essay={essay} assets={ASSETS} title="Story" proofing />);
+    expect(await screen.findByText('❤️ 1 Selected')).toBeTruthy();
+  });
+});
diff --git a/app/[...path]/__tests__/proofing-filter-empty.test.tsx b/app/[...path]/__tests__/proofing-filter-empty.test.tsx
new file mode 100644
index 0000000..1f92cb9
--- /dev/null
+++ b/app/[...path]/__tests__/proofing-filter-empty.test.tsx
@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, within } from '@testing-library/react';
+import { PhotoGrid, type PhotoItem } from '../PhotoGrid';
+
+/**
+ * With "show selected" on, un-hearting the last favourite emptied the grid and
+ * left nothing between the album header and the footer — no word on why, and
+ * the only way back a small pill in the corner.
+ */
+
+vi.mock('next/image', () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt?: string }) => <img alt={alt ?? ''} />,
+}));
+vi.mock('@/components/FadeIn', () => ({
+  FadeIn: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+const photo = (id: string): PhotoItem => ({
+  id,
+  type: 'image',
+  thumbUrl: `/t/${id}`,
+  previewUrl: `/p/${id}`,
+  exifUrl: `/e/${id}`,
+  aspectRatio: 1.5,
+});
+
+const ASSETS = [photo('a1'), photo('a2'), photo('a3')];
+
+let store: Map<string, string>;
+
+beforeEach(() => {
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the test a working one.
+  store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+  window.history.replaceState(null, '', '/wedding');
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe('favourites filter with nothing left', () => {
+  it('says nothing is selected and offers the way back to all photos', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a2']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+
+    fireEvent.click(await screen.findByText('❤️ 1 Selected'));
+    expect(screen.getAllByLabelText(/^View photo/)).toHaveLength(1);
+
+    fireEvent.click(screen.getByLabelText('Remove favorite'));
+
+    const empty = screen.getByRole('status');
+    expect(within(empty).getByText('No photos selected.')).toBeTruthy();
+    expect(screen.queryAllByLabelText(/^View photo/)).toHaveLength(0);
+
+    fireEvent.click(within(empty).getByRole('button', { name: 'Show All' }));
+    expect(screen.getAllByLabelText(/^View photo/)).toHaveLength(3);
+    expect(screen.queryByText('No photos selected.')).toBeNull();
+  });
+
+  it('shows no empty state while the filter still has photos', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a1', 'a2']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    fireEvent.click(await screen.findByText('❤️ 2 Selected'));
+    expect(screen.getAllByLabelText(/^View photo/)).toHaveLength(2);
+    expect(screen.queryByText('No photos selected.')).toBeNull();
+  });
+});
diff --git a/app/[...path]/__tests__/proofing-lazy.test.tsx b/app/[...path]/__tests__/proofing-lazy.test.tsx
new file mode 100644
index 0000000..02aefc8
--- /dev/null
+++ b/app/[...path]/__tests__/proofing-lazy.test.tsx
@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { renderToReadableStream } from 'react-dom/server';
+import type { ReactNode } from 'react';
+import { PhotoGrid, type PhotoItem } from '../PhotoGrid';
+import { EssayView } from '../EssayView';
+import { parseEssayMarkdown } from '@/lib/essay';
+
+/**
+ * Proofing is off on most album pages, but its provider, modal and session
+ * controls used to be imported statically by the grid and the essay, so every
+ * album, essay and journal page shipped them (~5 KB gzip). They now load
+ * through `next/dynamic` only where proofing is on.
+ *
+ * The mocks below pass every module through unchanged and only note that it
+ * was loaded: a page without proofing must not load any of them, and a page
+ * with proofing must still render the hearts — on the server too, so they are
+ * in the HTML before the chunk arrives.
+ */
+
+const loaded = vi.hoisted(() => new Set<string>());
+
+vi.mock('@/components/ProofingContext', async (importOriginal) => {
+  loaded.add('ProofingContext');
+  return importOriginal();
+});
+vi.mock('@/components/ProofingModal', async (importOriginal) => {
+  loaded.add('ProofingModal');
+  return importOriginal();
+});
+vi.mock('@/components/ProofSessionControls', async (importOriginal) => {
+  loaded.add('ProofSessionControls');
+  return importOriginal();
+});
+
+// The build aliases `next/dynamic` to the App Router implementation in app/;
+// the bare package resolves to the Pages Router one.
+vi.mock('next/dynamic', async () => ({
+  default: (await import('next/dist/shared/lib/app-dynamic')).default,
+}));
+vi.mock('next/image', () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt?: string }) => <img alt={alt ?? ''} />,
+}));
+vi.mock('@/components/LeafletMap', () => ({
+  LeafletMap: () => null,
+  escapeHtml: (s: string) => s,
+}));
+vi.mock('@/components/FadeIn', () => ({
+  FadeIn: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+const photo = (id: string): PhotoItem => ({
+  id,
+  type: 'image',
+  thumbUrl: `/t/${id}`,
+  previewUrl: `/p/${id}`,
+  exifUrl: `/e/${id}`,
+  aspectRatio: 1.5,
+});
+
+const ASSETS = [photo('a1'), photo('a2'), photo('a3')];
+const ESSAY = parseEssayMarkdown('---\ntitle: Story\n---\n\n![a1, a3](caption)\n');
+
+async function serverHtml(node: ReactNode): Promise<string> {
+  const stream = await renderToReadableStream(node);
+  await stream.allReady;
+  return new Response(stream).text();
+}
+
+const hearts = (html: string) => html.match(/aria-label="Add favorite"/g)?.length ?? 0;
+
+beforeEach(() => {
+  // Node defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the test a working one.
+  const store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+// Runs first: the set records loads for the whole file.
+describe('proofing off', () => {
+  it('loads neither the provider nor the modal nor the session controls', async () => {
+    const grid = render(<PhotoGrid assets={ASSETS} albumName="Wedding" />);
+    const essay = render(<EssayView essay={ESSAY} assets={ASSETS} title="Story" />);
+    expect(grid.container.querySelectorAll('img')).toHaveLength(3);
+    expect(essay.container.querySelectorAll('img')).toHaveLength(2);
+    expect(screen.queryByLabelText('Add favorite')).toBeNull();
+
+    await serverHtml(<PhotoGrid assets={ASSETS} albumName="Wedding" />);
+    expect([...loaded]).toEqual([]);
+  });
+});
+
+describe('proofing on', () => {
+  it('renders the hearts on the server', async () => {
+    const html = await serverHtml(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    expect(hearts(html)).toBe(3);
+    const essay = await serverHtml(
+      <EssayView essay={ESSAY} assets={ASSETS} title="Story" proofing />,
+    );
+    expect(hearts(essay)).toBe(2);
+  });
+
+  it('shares one context between the grid and the lazily loaded provider and modal', async () => {
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    const [first] = await screen.findAllByLabelText('Add favorite');
+    fireEvent.click(first);
+    // The heart, the selection bar and the modal all read the same state.
+    expect(screen.getAllByLabelText('Remove favorite')).toHaveLength(1);
+    fireEvent.click(await screen.findByText('Share & Export'));
+    expect(await screen.findByText(/You have selected 1 photo\./)).toBeTruthy();
+    expect(loaded).toContain('ProofingContext');
+    expect(loaded).toContain('ProofingModal');
+  });
+});
diff --git a/app/[...path]/__tests__/proofing-mailto-wiring.test.ts b/app/[...path]/__tests__/proofing-mailto-wiring.test.ts
new file mode 100644
index 0000000..131c836
--- /dev/null
+++ b/app/[...path]/__tests__/proofing-mailto-wiring.test.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * The page renders albums and essays from several branches — subpage album,
+ * essay, single-album subpage, standalone album — and each one passes the
+ * proofing props by hand. The dialog hides its email button without a
+ * recipient (#736), so a branch that forwards `allowMailto` but forgets
+ * `encodedMailto` silently loses the button on that kind of page. #746 missed
+ * two of the four; this keeps the next branch from doing the same.
+ */
+
+const source = fs.readFileSync(path.join(__dirname, '..', 'page.tsx'), 'utf8');
+
+/** Every `<AlbumDetailView … />` and `<EssayView … />` element in the page. */
+const elements = source.match(/<(AlbumDetailView|EssayView)\b[\s\S]*?\/>/g) ?? [];
+
+describe('proofing email wiring in the catch-all page', () => {
+  it('finds the album and essay views', () => {
+    expect(elements.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it('passes the recipient wherever it passes the email switch', () => {
+    const missing = elements
+      .filter((el) => el.includes('allowMailto='))
+      .filter((el) => !el.includes('encodedMailto='))
+      .map((el) => el.split('\n').slice(0, 3).join(' ').trim());
+    expect(missing).toEqual([]);
+  });
+});
diff --git a/app/[...path]/contentPage.tsx b/app/[...path]/contentPage.tsx
new file mode 100644
index 0000000..6f158c7
--- /dev/null
+++ b/app/[...path]/contentPage.tsx
@@ -0,0 +1,108 @@
+/**
+ * Content pages at `/<slug>` (#722): content/pages/<slug>.md rendered through
+ * the journal's EssayView, without a date, reading time or journal index.
+ *
+ * Draft and password behave as on a journal entry: a draft is a 404 for
+ * everyone but a signed-in admin, and a password shows the gate until the
+ * `lb_auth_page_<slug>` cookie is set. The site password is enforced before
+ * any of this runs, in proxy.ts.
+ */
+
+import type { Metadata } from 'next';
+import { cookies } from 'next/headers';
+import { readPage, type PageRecord } from '@/lib/admin/pages-service';
+import { isAdminAuthenticated } from '@/lib/admin/auth';
+import { isAuthenticated } from '@/lib/auth';
+import { getConfig } from '@/lib/config';
+import { getServerDictionary } from '@/lib/i18n/server';
+import { ogImageUrl } from '@/lib/ogImage';
+import PasswordGate from '@/components/PasswordGate';
+import { EssayView } from './EssayView';
+import { buildEssayPayload } from './essayPayload';
+
+type Access = 'open' | 'draft' | 'locked';
+
+async function accessFor(page: PageRecord): Promise<Access> {
+  const { draft, password } = page.parsed.frontmatter;
+  if (draft && !(await isAdminAuthenticated())) return 'draft';
+  if (password) {
+    const cookieStore = await cookies();
+    if (!isAuthenticated(page.slug, (name) => cookieStore.get(name)?.value, 'page')) {
+      return 'locked';
+    }
+  }
+  return 'open';
+}
+
+/**
+ * Metadata for `/<slug>` when it is a page, or null when it is not.
+ *
+ * A draft is described as not found, and a locked page by a generic
+ * title only: generateMetadata runs ahead of the page's own gate, so the real
+ * title and description must not reach the `<head>` (GHSA-fvgv-97g3-wjr7).
+ */
+export async function contentPageMetadata(slug: string): Promise<Metadata | null> {
+  const page = await readPage(slug).catch(() => null);
+  if (!page) return null;
+  const access = await accessFor(page);
+  const t = getServerDictionary();
+  // A draft answers 404 to everyone but an admin, so it gets the not-found
+  // title, and no robots tag that would contradict Next's own noindex.
+  if (access === 'draft') return { title: t.error.notFoundTitle, robots: null };
+  if (access === 'locked') {
+    return { title: t.password.protectedPage, robots: { index: false } };
+  }
+  const { title: rawTitle, description } = page.parsed.frontmatter;
+  const title = rawTitle || slug;
+  const ogImage = ogImageUrl(title);
+  return {
+    title,
+    ...(description ? { description } : {}),
+    openGraph: { title, ...(description ? { description } : {}), images: [ogImage] },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      ...(description ? { description } : {}),
+      images: [ogImage],
+    },
+  };
+}
+
+/**
+ * The rendered page, `'not-found'` for a draft a visitor may not see, or null
+ * when no page has this slug (the caller then tries a standalone album).
+ */
+export async function renderContentPage(
+  slug: string,
+): Promise<React.ReactElement | 'not-found' | null> {
+  const page = await readPage(slug).catch(() => null);
+  if (!page) return null;
+
+  const access = await accessFor(page);
+  if (access === 'draft') return 'not-found';
+  const { frontmatter, blocks } = page.parsed;
+  if (access === 'locked') {
+    return <PasswordGate slug={slug} title={frontmatter.title || slug} type="page" />;
+  }
+
+  // No map block in v1 (#722): it is dropped before any of its photos are
+  // fetched, so a hand-written `::map` cannot publish positions either.
+  const { essay, images } = await buildEssayPayload(blocks, {
+    logTag: 'page',
+    slug,
+    allowMap: false,
+  });
+
+  return (
+    <div className="content-page" style={{ paddingTop: '2rem' }}>
+      <EssayView
+        // Only the title crosses to the client: the frontmatter also holds
+        // the password, stored hashed but still not the visitor's business.
+        essay={{ ...essay, frontmatter: { title: frontmatter.title } }}
+        assets={images}
+        title={frontmatter.title}
+        watermark={getConfig().watermark}
+      />
+    </div>
+  );
+}
diff --git a/app/[...path]/essayPayload.ts b/app/[...path]/essayPayload.ts
new file mode 100644
index 0000000..a58dfed
--- /dev/null
+++ b/app/[...path]/essayPayload.ts
@@ -0,0 +1,197 @@
+/**
+ * Turn a parsed block-markdown document into what `EssayView` renders: the
+ * blocks with every asset id replaced by its token, and the photo items those
+ * tokens resolve to. Shared by journal entries and content pages (#722).
+ *
+ * Server only — it talks to Immich and encrypts asset ids.
+ */
+
+import {
+  collectAssetIds,
+  mapBlockAssetIds,
+  type JournalBlock,
+  type MapPin,
+  type ParsedJournal,
+} from '@/lib/journal';
+import { entryMapPins } from '@/lib/journalMap';
+import { expandAlbumBlocks } from '@/lib/journalAlbum';
+import { getConfig } from '@/lib/config';
+import { immich, type ImmichAsset } from '@/lib/immich';
+import {
+  imageUrl,
+  videoUrl,
+  exifUrl,
+  assetPlaceholder,
+  assetAspectRatio,
+  assetCaption,
+  assetExifSummary,
+} from '@/lib/urls';
+import { encodeAssetId } from '@/lib/tokens';
+import type { PhotoItem } from './PhotoGrid';
+
+export interface EssayPayload {
+  /** Blocks and cover carry tokens, never raw asset ids. Frontmatter is left empty. */
+  essay: ParsedJournal;
+  images: PhotoItem[];
+}
+
+interface EssayPayloadOptions {
+  /** Prefix for log lines, e.g. `journal` or `page`. */
+  logTag: string;
+  slug: string;
+  /** Map blocks are dropped when false, whatever the site's map setting. */
+  allowMap: boolean;
+  /** Raw asset id of a cover photo, shown in the lightbox sequence. */
+  coverAssetId?: string;
+}
+
+/**
+ * The assets of every album an album block names, keyed by album id, loaded
+ * concurrently. An album that fails is reported and left out, so its block
+ * drops rather than the page.
+ */
+export async function loadAlbumBlocks(
+  blocks: readonly JournalBlock[],
+  onError: (albumId: string, error: unknown) => void,
+): Promise<Map<string, ImmichAsset[]>> {
+  const albumIds = [
+    ...new Set(blocks.flatMap((b) => (b.type === 'album' && b.albumId ? [b.albumId] : []))),
+  ];
+  const loaded = await Promise.all(
+    albumIds.map(async (albumId) => {
+      try {
+        return [albumId, await immich.getAlbumAssetsRaw(albumId)] as const;
+      } catch (error) {
+        onError(albumId, error);
+        return null;
+      }
+    }),
+  );
+  return new Map(loaded.filter((entry) => entry !== null));
+}
+
+export async function buildEssayPayload(
+  authoredBlocks: JournalBlock[],
+  { logTag, slug, allowMap, coverAssetId }: EssayPayloadOptions,
+): Promise<EssayPayload & { coverToken?: string }> {
+  const config = getConfig();
+  const mapAllowed = allowMap && config.map;
+  const sourceBlocks = allowMap ? authoredBlocks : authoredBlocks.filter((b) => b.type !== 'map');
+  const referencedAssetIds = [
+    ...new Set([...(coverAssetId ? [coverAssetId] : []), ...collectAssetIds(sourceBlocks)]),
+  ];
+
+  const fetchedAssets = (
+    await Promise.all(
+      referencedAssetIds.map((assetId) => immich.getAssetInfo(assetId).catch(() => null)),
+    )
+  ).filter((a): a is ImmichAsset => a !== null);
+
+  // Album blocks become photo blocks here. The raw fetch bypasses the album
+  // allowlist on purpose: an entry may already show any single photo by id,
+  // and the author's pick is the gate for a whole album just the same. An
+  // album Immich cannot deliver drops its block rather than the page.
+  // All albums at once, not one round trip after the other.
+  const albumAssetsById = await loadAlbumBlocks(sourceBlocks, (albumId, error) => {
+    // eslint-disable-next-line no-console
+    console.warn(`[${logTag}] ${slug}: album ${albumId} could not be loaded:`, error);
+  });
+  const { blocks } = expandAlbumBlocks(
+    sourceBlocks,
+    (albumId) => albumAssetsById.get(albumId),
+    config.albumManualOrders,
+  );
+  const knownIds = new Set(fetchedAssets.map((a) => a.id));
+  const rawAssets = [...fetchedAssets];
+  for (const list of albumAssetsById.values()) {
+    for (const asset of list) {
+      if (knownIds.has(asset.id)) continue;
+      knownIds.add(asset.id);
+      rawAssets.push(asset);
+    }
+  }
+
+  // EssayView drops photo blocks it cannot resolve, which is right for visitors
+  // but leaves no trace of *why* a photo vanished. Legacy positional references
+  // ("1", "2") are the usual cause: they only resolved against a subpage album.
+  if (fetchedAssets.length < referencedAssetIds.length) {
+    const resolved = new Set(fetchedAssets.map((a) => a.id));
+    const missing = referencedAssetIds.filter((id) => !resolved.has(id));
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[${logTag}] ${slug}: ${missing.length} photo reference(s) could not be resolved and will not render: ${missing.join(', ')}`,
+    );
+  }
+
+  /*
+   * EssayView resolves a block's photo through PhotoItem.id, and those ids are
+   * encrypted tokens — while the blocks coming out of the Markdown carry raw
+   * asset UUIDs. Translating here also keeps raw UUIDs out of the client
+   * payload. Unresolvable references collapse to an empty string, which
+   * EssayView skips.
+   */
+  const tokenByAssetId = new Map(rawAssets.map((a) => [a.id, encodeAssetId(a.id)]));
+  const toToken = (assetId: string) => tokenByAssetId.get(assetId) ?? '';
+
+  // A map block's pins are computed here, from the photos fetched above and
+  // under each photo's `location:` precision, and only when the site
+  // publishes a map at all. The client gets pins only — never the items,
+  // which carry raw asset ids.
+  const entryPhotoIds = collectAssetIds(blocks.filter((b) => b.type !== 'map'));
+  const pinsByBlock = new Map<JournalBlock, MapPin[]>();
+  if (mapAllowed) {
+    for (const block of blocks) {
+      if (block.type === 'map') {
+        pinsByBlock.set(block, await entryMapPins(block.items, rawAssets, entryPhotoIds));
+      }
+    }
+  }
+
+  // Photos that only anchor a map pin are fetched for their EXIF but are not
+  // part of the story, so they stay out of the lightbox sequence.
+  const shownAssetIds = new Set([...entryPhotoIds, ...(coverAssetId ? [coverAssetId] : [])]);
+
+  const essay: ParsedJournal = {
+    frontmatter: {},
+    blocks: blocks.flatMap((block): JournalBlock[] => {
+      if (block.type === 'map') {
+        const pins = pinsByBlock.get(block);
+        return pins
+          ? [{ type: 'map', caption: block.caption, line: block.line, items: [], pins }]
+          : [];
+      }
+      return [mapBlockAssetIds(block, toToken)];
+    }),
+    referencedAssetIds: rawAssets.map((a) => encodeAssetId(a.id)),
+  };
+
+  const images: PhotoItem[] = rawAssets
+    .filter((a) => shownAssetIds.has(a.id) && (a.type === 'IMAGE' || a.type === 'VIDEO'))
+    .map((a) => {
+      const ph = assetPlaceholder(a);
+      const exif =
+        config.exif.onHover && config.exif.camera && a.type === 'IMAGE'
+          ? assetExifSummary(a)
+          : undefined;
+      const caption = assetCaption(a, config.exif.caption);
+      const isVideo = a.type === 'VIDEO';
+      return {
+        id: encodeAssetId(a.id),
+        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 ?? {}),
+        ...(caption ? { caption } : {}),
+        aspectRatio: assetAspectRatio(a),
+      };
+    });
+
+  return {
+    essay,
+    images,
+    ...(coverAssetId ? { coverToken: toToken(coverAssetId) || undefined } : {}),
+  };
+}
diff --git a/app/[...path]/page.tsx b/app/[...path]/page.tsx
index 85dbb00..9e20fb6 100644
--- a/app/[...path]/page.tsx
+++ b/app/[...path]/page.tsx
@@ -3,30 +3,25 @@
  *
  * Single segment:
  *   - If slug matches a subpage → render subpage album grid
+ *   - If slug matches a content page (content/pages/<slug>.md) → render it
  *   - If slug matches a standalone album → render album detail
  *
  * Two segments:
  *   - Treat as subpage-slug/album-slug → render album detail
  *     with back-link to the subpage
+ *
+ * Three or more segments: 404.
  */
 
 import { cookies } from 'next/headers';
 import type { Metadata } from 'next';
 import { immich, type ImmichAsset } from '@/lib/immich';
 import { notFound } from 'next/navigation';
-import type { PhotoItem } from './PhotoGrid';
-import {
-  imageUrl,
-  exifUrl,
-  videoUrl,
-  assetPlaceholder,
-  assetCaption,
-  assetExifSummary,
-  downloadUrl,
-  archiveUrl,
-  assetAspectRatio,
-} from '@/lib/urls';
+import { toPhotoItems } from './photoItems';
+import { imageUrl, assetPlaceholder, archiveUrl } from '@/lib/urls';
+import { ogImageUrl } from '@/lib/ogImage';
 import { encodeAssetId, decodeAssetId } from '@/lib/tokens';
+import { encodeEmail } from '@/lib/emailObfuscation';
 import {
   buildCoverGridVars,
   getConfig,
@@ -52,6 +47,8 @@ import { mapBlockAssetIds } from '@/lib/journal';
 import { strictestPrecision, type LocationPrecision } from '@/lib/mapPrecision';
 import { resolveEssayFile, generatedEssayCaption } from '@/lib/essaySource';
 import { getServerDictionary } from '@/lib/i18n/server';
+import { contentPageMetadata, renderContentPage } from './contentPage';
+import { loadAlbumBlocks } from './essayPayload';
 
 // Render at request time — requires live Immich connection
 export const dynamic = 'force-dynamic';
@@ -75,13 +72,32 @@ async function isLocked(key: string, type: 'subpage' | 'album'): Promise<boolean
   return !isAuthenticated(key, getCookie, type);
 }
 
+/**
+ * Metadata for a path that names nothing this site publishes. The title is
+ * the dictionary's, never the requested slug: generateMetadata runs for any
+ * URL a visitor types, and echoing it would put their text in the `<title>`
+ * and, through a signed share card, in an image served from this domain.
+ * Leaving `openGraph` out keeps the root layout's site card. `robots: null`
+ * drops the layout's `index, follow`, which would otherwise contradict the
+ * `noindex` Next adds to every not-found response.
+ */
+function notFoundMetadata(): Metadata {
+  return { title: getServerDictionary().error.notFoundTitle, robots: null };
+}
+
+/** Metadata for a path behind a password this request has not given. */
+function lockedMetadata(): Metadata {
+  return { title: getServerDictionary().password.protectedPage, robots: { index: false } };
+}
+
 export async function generateMetadata({ params, searchParams }: PathPageProps): Promise<Metadata> {
   // Next hands catch-all segments over percent-encoded, so a non-ASCII slug
   // ("/家族相册") would never match a stored one. Decode once, here, and every
   // comparison downstream works on the same form (#522).
   const { path: rawPath } = await params;
   const path = rawPath?.map(normalizeSlug);
-  if (!path || path.length === 0) return {};
+  // Deeper paths are a 404 (see the page below); they name nothing to describe.
+  if (!path || path.length === 0 || path.length > 2) return notFoundMetadata();
 
   // A shared photo link's whole point is that it reaches the server — unlike
   // the #photo-N hash it replaces, a `photo` query param is visible here, so
@@ -92,45 +108,51 @@ export async function generateMetadata({ params, searchParams }: PathPageProps):
   const photoAssetId = photoToken ? decodeAssetId(photoToken) : null;
   let photoAsset: ImmichAsset | undefined;
 
+  // Each branch follows the page body's order of gates and 404s, and takes
+  // the title only from site-authored text (an album or subpage name). A
+  // branch that finds nothing, or finds it locked, returns early, so the
+  // requested slug never becomes a title or share-card text.
   const slug = path[0];
-  let title = slug;
+  let title: string;
   let subtitle = '';
   let description: string | undefined = undefined;
+  const photoCount = (assets: ImmichAsset[]) =>
+    getServerDictionary().common.photos(
+      assets.filter((a) => a.type === 'IMAGE' || a.type === 'VIDEO').length,
+    );
+
   if (path.length === 1 && immich.isSubpageSlug(slug)) {
-    const subpageLocked = await isLocked(slug, 'subpage');
+    if (await isLocked(slug, 'subpage')) return lockedMetadata();
     const result = await immich.getSubpageAlbums(slug);
-    if (result) {
-      if (!subpageLocked && result.subpage.subtitle) {
-        description = result.subpage.subtitle;
-      }
-      if (result.albums.length === 1) {
-        const album = await immich.getAlbumBySlug(result.albums[0].slug, slug);
-        if (album && !subpageLocked && !(await isLocked(album.id, 'album'))) {
-          title = album.albumName;
-          const count = album.assets.filter((a) => a.type === 'IMAGE' || a.type === 'VIDEO').length;
-          subtitle = `${count} photo${count === 1 ? '' : 's'}`;
-          if (photoAssetId) photoAsset = album.assets.find((a) => a.id === photoAssetId);
-        }
-      } else if (!subpageLocked) {
-        title = result.subpage.title || result.subpage.name;
-      }
+    if (!result || result.albums.length === 0) return notFoundMetadata();
+    if (result.subpage.subtitle) description = result.subpage.subtitle;
+    if (result.albums.length === 1) {
+      const album = await immich.getAlbumBySlug(result.albums[0].slug, slug);
+      if (!album) return notFoundMetadata();
+      if (await isLocked(album.id, 'album')) return lockedMetadata();
+      title = album.albumName;
+      subtitle = photoCount(album.assets);
+      if (photoAssetId) photoAsset = album.assets.find((a) => a.id === photoAssetId);
+    } else {
+      title = result.subpage.title || result.subpage.name;
     }
   } else if (path.length === 2) {
+    if (await isLocked(slug, 'subpage')) return lockedMetadata();
     const album = await immich.getAlbumBySlug(path[1], slug);
-    if (album && !(await isLocked(slug, 'subpage')) && !(await isLocked(album.id, 'album'))) {
-      title = album.albumName;
-      const count = album.assets.filter((a) => a.type === 'IMAGE' || a.type === 'VIDEO').length;
-      subtitle = `${count} photo${count === 1 ? '' : 's'}`;
-      if (photoAssetId) photoAsset = album.assets.find((a) => a.id === photoAssetId);
-    }
+    if (!album) return notFoundMetadata();
+    if (await isLocked(album.id, 'album')) return lockedMetadata();
+    title = album.albumName;
+    subtitle = photoCount(album.assets);
+    if (photoAssetId) photoAsset = album.assets.find((a) => a.id === photoAssetId);
   } else {
+    const pageMeta = await contentPageMetadata(slug);
+    if (pageMeta) return pageMeta;
     const album = await immich.getAlbumBySlug(slug);
-    if (album && !(await isLocked(album.id, 'album'))) {
-      title = album.albumName;
-      const count = album.assets.filter((a) => a.type === 'IMAGE' || a.type === 'VIDEO').length;
-      subtitle = `${count} photo${count === 1 ? '' : 's'}`;
-      if (photoAssetId) photoAsset = album.assets.find((a) => a.id === photoAssetId);
-    }
+    if (!album) return notFoundMetadata();
+    if (await isLocked(album.id, 'album')) return lockedMetadata();
+    title = album.albumName;
+    subtitle = photoCount(album.assets);
+    if (photoAssetId) photoAsset = album.assets.find((a) => a.id === photoAssetId);
   }
 
   // The title stays the album's — it's still the context a reader wants —
@@ -140,9 +162,7 @@ export async function generateMetadata({ params, searchParams }: PathPageProps):
     photoAsset?.exifInfo?.description?.trim() ||
     description ||
     (subtitle ? `${title} — ${subtitle}` : undefined);
-  const ogImage = photoAsset
-    ? imageUrl(photoAsset.id, 'preview')
-    : `/api/og?title=${encodeURIComponent(title)}${subtitle ? `&subtitle=${encodeURIComponent(subtitle)}` : ''}`;
+  const ogImage = photoAsset ? imageUrl(photoAsset.id, 'preview') : ogImageUrl(title, subtitle);
 
   return {
     title,
@@ -161,44 +181,6 @@ export async function generateMetadata({ params, searchParams }: PathPageProps):
   };
 }
 
-/** Map Immich assets to PhotoItem props for the grid/lightbox. */
-/**
- * `showExif` covers the hover overlay only, and that overlay carries camera,
- * lens and focal length — so it follows the `camera` group, not the panel.
- *
- * `showCaption` follows the `caption` group and decides whether the Immich
- * description becomes alt text; see `assetCaption`.
- */
-function toPhotoItems(
-  assets: ImmichAsset[],
-  showExif: boolean,
-  showCaption: boolean,
-  /** The album offering downloads, or undefined when it does not. */
-  downloadAlbumId?: string,
-): PhotoItem[] {
-  return assets
-    .filter((a) => a.type === 'IMAGE' || a.type === 'VIDEO')
-    .map((a) => {
-      const ph = assetPlaceholder(a);
-      const exif = showExif && a.type === 'IMAGE' ? assetExifSummary(a) : undefined;
-      const caption = assetCaption(a, showCaption);
-      const isVideo = a.type === 'VIDEO';
-      return {
-        id: encodeAssetId(a.id),
-        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 ?? {}),
-        ...(caption ? { caption } : {}),
-        ...(downloadAlbumId ? { downloadUrl: downloadUrl(downloadAlbumId, a.id) } : {}),
-        aspectRatio: assetAspectRatio(a),
-      };
-    });
-}
-
 /**
  * JSON-LD for an album page. Null unless a site URL is configured — structured
  * data is a set of claims about absolute URLs, and there is nothing truthful to
@@ -242,7 +224,8 @@ async function gateIfProtected(
   let title = titleOverride || key;
   if (!titleOverride && type === 'subpage') {
     const subpageData = await immich.getSubpageAlbums(key);
-    title = subpageData?.subpage.name ?? key;
+    const sp = subpageData?.subpage;
+    title = sp ? sp.title || sp.name : key;
   }
 
   return <PasswordGate slug={key} title={title} type={type} />;
@@ -280,6 +263,12 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
 
   const config = getConfig();
 
+  // The proofing dialog's "email to photographer" needs a recipient: the
+  // configured `proofing.email`, else the footer contact email (#736). Encoded
+  // here so the plain address stays out of the HTML and the RSC payload, like
+  // every other address the site renders.
+  const encodedMailto = config.proofing.email ? encodeEmail(config.proofing.email) : undefined;
+
   // Build grid CSS custom properties, optionally merging subpage overrides
   const buildGridStyle = (overrides?: Partial<GridConfig>): React.CSSProperties => {
     const g = { ...config.grid, ...overrides };
@@ -322,7 +311,10 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
     return { ...spGrid, ...albumGrid };
   };
 
-  if (!path || path.length === 0) {
+  // One segment or two: nothing on this site lives deeper. A third segment
+  // used to fall through to the one-segment branch below, which reads only
+  // `path[0]`, so `/travel/iceland/anything` rendered the Travel subpage.
+  if (!path || path.length === 0 || path.length > 2) {
     notFound();
   }
 
@@ -351,7 +343,9 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
     // Look up subpage config for grid overrides and back link
     const subpageData = await immich.getSubpageAlbums(subpageSlug, forceFresh);
     const spGrid = subpageData?.subpage.grid;
-    const subpageName = subpageData?.subpage.name ?? subpageSlug;
+    const subpageName = subpageData
+      ? subpageData.subpage.title || subpageData.subpage.name
+      : subpageSlug;
 
     const images = toPhotoItems(
       album.assets,
@@ -385,6 +379,7 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
         showGear={config.exif.camera}
         proofing={proofingFor(subpageData?.subpage)}
         allowMailto={config.proofing.allowMailto}
+        encodedMailto={encodedMailto}
         downloadArchiveUrl={config.albumDownloads[album.id] ? archiveUrl(album.id) : undefined}
         {...heroData}
       />
@@ -435,7 +430,15 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
           getCookie: (name) => cookieStore.get(name)?.value,
         });
         if (file.status === 'locked') {
-          return <PasswordGate slug={result.subpage.essayFile} title={file.title} type="journal" />;
+          // The subpage's own title, which the nav already shows — not the
+          // borrowed entry's, which the journal index hides while it is locked.
+          return (
+            <PasswordGate
+              slug={result.subpage.essayFile}
+              title={result.subpage.title || result.subpage.name}
+              type="journal"
+            />
+          );
         }
         if (file.status === 'open') essayParsed = file.parsed;
       }
@@ -453,16 +456,10 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
       // does, from a raw fetch, and add those photos to the page's assets.
       // Their ids are encoded here because this path hands EssayView tokens.
       if (essayParsed?.blocks.some((b) => b.type === 'album')) {
-        const byAlbum = new Map<string, typeof allAssets>();
-        for (const b of essayParsed.blocks) {
-          if (b.type !== 'album' || !b.albumId || byAlbum.has(b.albumId)) continue;
-          try {
-            byAlbum.set(b.albumId, await immich.getAlbumAssetsRaw(b.albumId));
-          } catch (error) {
-            // eslint-disable-next-line no-console
-            console.warn(`[essay] ${slug}: album ${b.albumId} could not be loaded:`, error);
-          }
-        }
+        const byAlbum = await loadAlbumBlocks(essayParsed.blocks, (albumId, error) => {
+          // eslint-disable-next-line no-console
+          console.warn(`[essay] ${slug}: album ${albumId} could not be loaded:`, error);
+        });
         const expanded = expandAlbumBlocks(
           essayParsed.blocks,
           (id) => byAlbum.get(id),
@@ -551,6 +548,7 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
           watermark={config.watermark}
           proofing={essayProofing}
           allowMailto={config.proofing.allowMailto}
+          encodedMailto={encodedMailto}
         />
       );
     }
@@ -599,6 +597,7 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
           showGear={config.exif.camera}
           proofing={proofingFor(result.subpage)}
           allowMailto={config.proofing.allowMailto}
+          encodedMailto={encodedMailto}
           downloadArchiveUrl={config.albumDownloads[album.id] ? archiveUrl(album.id) : undefined}
           {...heroData}
         />
@@ -653,12 +652,22 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
         gridStyle={buildCoverGridStyle(result.subpage.coverGrid)}
         {...(subpageIndex >= 0 ? { index: subpageIndex + 1 } : {})}
         {...(nextSubpage
-          ? { nextSubpage: { slug: nextSubpage.slug, name: nextSubpage.name } }
+          ? {
+              nextSubpage: { slug: nextSubpage.slug, name: nextSubpage.title || nextSubpage.name },
+            }
           : {})}
       />
     );
   }
 
+  // A content page (#722). The admin refuses a page slug that collides with a
+  // subpage or an album, so the order here only matters for a hand-edited file.
+  if (path.length === 1) {
+    const page = await renderContentPage(slug);
+    if (page === 'not-found') notFound();
+    if (page) return page;
+  }
+
   // Otherwise treat as a standalone album slug
   const album = await immich.getAlbumBySlug(slug, undefined, forceFresh);
   if (!album) {
@@ -701,6 +710,7 @@ export default async function PathPage({ params, searchParams }: PathPageProps)
       showGear={config.exif.camera}
       proofing={proofingFor()}
       allowMailto={config.proofing.allowMailto}
+      encodedMailto={encodedMailto}
       downloadArchiveUrl={config.albumDownloads[album.id] ? archiveUrl(album.id) : undefined}
       {...heroData}
     />
diff --git a/app/[...path]/photoItems.ts b/app/[...path]/photoItems.ts
new file mode 100644
index 0000000..2efe573
--- /dev/null
+++ b/app/[...path]/photoItems.ts
@@ -0,0 +1,57 @@
+/**
+ * Immich assets → the PhotoItem props the grid and lightbox render.
+ *
+ * Shared by the album routes and the client proofing page, so both render a
+ * photo exactly the same way.
+ */
+
+import type { ImmichAsset } from '@/lib/immich';
+import { encodeAssetId } from '@/lib/tokens';
+import {
+  assetAspectRatio,
+  assetCaption,
+  assetExifSummary,
+  assetPlaceholder,
+  downloadUrl,
+  exifUrl,
+  imageUrl,
+  videoUrl,
+} from '@/lib/urls';
+import type { PhotoItem } from './PhotoGrid';
+
+/**
+ * `showExif` covers the hover overlay only, and that overlay carries camera,
+ * lens and focal length — so it follows the `camera` group, not the panel.
+ *
+ * `showCaption` follows the `caption` group and decides whether the Immich
+ * description becomes alt text; see `assetCaption`.
+ */
+export function toPhotoItems(
+  assets: ImmichAsset[],
+  showExif: boolean,
+  showCaption: boolean,
+  /** The album offering downloads, or undefined when it does not. */
+  downloadAlbumId?: string,
+): PhotoItem[] {
+  return assets
+    .filter((a) => a.type === 'IMAGE' || a.type === 'VIDEO')
+    .map((a) => {
+      const ph = assetPlaceholder(a);
+      const exif = showExif && a.type === 'IMAGE' ? assetExifSummary(a) : undefined;
+      const caption = assetCaption(a, showCaption);
+      const isVideo = a.type === 'VIDEO';
+      return {
+        id: encodeAssetId(a.id),
+        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 ?? {}),
+        ...(caption ? { caption } : {}),
+        ...(downloadAlbumId ? { downloadUrl: downloadUrl(downloadAlbumId, a.id) } : {}),
+        aspectRatio: assetAspectRatio(a),
+      };
+    });
+}
diff --git a/app/admin/AdminShell.tsx b/app/admin/AdminShell.tsx
index e701802..6788f2d 100644
--- a/app/admin/AdminShell.tsx
+++ b/app/admin/AdminShell.tsx
@@ -49,8 +49,9 @@ export default function AdminShell({ children }: { children: ReactNode }) {
 
   if (authenticated === null) {
     return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
+      <div className="admin-loading" role="status">
+        <div className="admin-spinner" aria-hidden="true" />
+        <span className="sr-only">Loading admin panel</span>
       </div>
     );
   }
diff --git a/app/admin/__tests__/AdminOverview.test.tsx b/app/admin/__tests__/AdminOverview.test.tsx
new file mode 100644
index 0000000..8a53fc1
--- /dev/null
+++ b/app/admin/__tests__/AdminOverview.test.tsx
@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, screen, cleanup, waitFor } from '@testing-library/react';
+import AdminOverview from '../components/AdminOverview';
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+/** Every admin endpoint answers 404 except gallery.yaml, which holds `gallery`. */
+function stubGallery(gallery: unknown) {
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (url: string) =>
+      url === '/api/admin/gallery'
+        ? new Response(JSON.stringify({ gallery, version: 'v' }), { status: 200 })
+        : new Response(JSON.stringify({ error: 'nope' }), { status: 404 }),
+    ),
+  );
+}
+
+/** The "Pages" tile: its number and the note under it, once loaded. */
+async function pagesTile() {
+  const label = await screen.findByText('Pages');
+  const tile = label.closest('a')!;
+  const value = () => tile.querySelector('.overview-stat-value')!.textContent;
+  await waitFor(() => expect(value()).not.toBe('–'));
+  return { value: value(), note: tile.querySelector('.overview-stat-note')!.textContent };
+}
+
+describe('AdminOverview — Pages tile', () => {
+  it('counts subpages written in the older map form of gallery.yaml', async () => {
+    // `subpages:` as a map of name → albums (or name → object) is still a
+    // valid gallery.yaml — getConfig() and the page builder both read it.
+    // The overview called .filter() on it, and the first admin screen crashed.
+    stubGallery({
+      subpages: {
+        Weddings: ['11111111-1111-4111-8111-111111111111'],
+        Travel: { albums: ['22222222-2222-4222-8222-222222222222'], enabled: false },
+      },
+    });
+    render(<AdminOverview />);
+    expect(await pagesTile()).toEqual({ value: '1', note: '1 switched off' });
+  });
+
+  it('leaves content-page menu entries out of the list form', async () => {
+    stubGallery({
+      subpages: [
+        { name: 'Weddings', albums: ['11111111-1111-4111-8111-111111111111'] },
+        { page: 'pricing' },
+        { name: 'Old', albums: [], enabled: false },
+      ],
+    });
+    render(<AdminOverview />);
+    expect(await pagesTile()).toEqual({ value: '1', note: '1 switched off' });
+  });
+});
diff --git a/app/admin/__tests__/AssetPicker.test.tsx b/app/admin/__tests__/AssetPicker.test.tsx
new file mode 100644
index 0000000..9b5985f
--- /dev/null
+++ b/app/admin/__tests__/AssetPicker.test.tsx
@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest';
+import { render, screen, cleanup, fireEvent, act } from '@testing-library/react';
+import AssetPicker from '../components/AssetPicker';
+
+/**
+ * A fetch whose answers the test hands out by hand, in any order — the
+ * situation of a slow request still running when the operator moves on.
+ */
+function deferredFetch() {
+  const pending: Array<{ url: string; resolve: (body: unknown) => void }> = [];
+  const fetchMock = vi.fn(
+    (url: string) =>
+      new Promise<Response>((resolve) => {
+        pending.push({
+          url,
+          resolve: (body) =>
+            resolve({ ok: true, status: 200, json: async () => body } as unknown as Response),
+        });
+      }),
+  );
+  /** Answer the first open request whose URL contains `match`. */
+  const answer = async (match: string, body: unknown) => {
+    const i = pending.findIndex((p) => p.url.includes(match));
+    if (i === -1) throw new Error(`no pending request for ${match}`);
+    const [req] = pending.splice(i, 1);
+    await act(async () => req.resolve(body));
+  };
+  return { fetchMock, answer };
+}
+
+const asset = (id: string, name: string) => ({
+  id,
+  originalFileName: name,
+  fileCreatedAt: '2024-05-17T10:00:00.000Z',
+  isFavorite: false,
+});
+
+let net: ReturnType<typeof deferredFetch>;
+
+beforeEach(() => {
+  net = deferredFetch();
+  vi.stubGlobal('fetch', net.fetchMock);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe('AssetPicker', () => {
+  it('shows the tab it is on when an older request answers last', async () => {
+    render(<AssetPicker onSelect={() => {}} onClose={() => {}} />);
+    // Opens on Favorites; the operator switches to All Photos before it loads.
+    fireEvent.click(screen.getByRole('button', { name: /All Photos/ }));
+
+    await net.answer('favorites=false', { assets: [asset('a1', 'all.jpg')], nextPage: null });
+    await net.answer('favorites=true', { assets: [asset('f1', 'fav.jpg')], nextPage: null });
+
+    expect(screen.getByRole('button', { name: /all\.jpg/ })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /fav\.jpg/ })).toBeNull();
+  });
+
+  it('keeps the spinner until the current request answers', async () => {
+    render(<AssetPicker onSelect={() => {}} onClose={() => {}} />);
+    fireEvent.click(screen.getByRole('button', { name: /All Photos/ }));
+
+    // The stale Favorites answer must not end the All Photos loading state.
+    await net.answer('favorites=true', { assets: [asset('f1', 'fav.jpg')], nextPage: null });
+    expect(screen.queryByRole('button', { name: /fav\.jpg/ })).toBeNull();
+    expect(screen.queryByText(/No favorite photos found/)).toBeNull();
+
+    await net.answer('favorites=false', { assets: [asset('a1', 'all.jpg')], nextPage: null });
+    expect(screen.getByRole('button', { name: /all\.jpg/ })).toBeTruthy();
+  });
+});
diff --git a/app/admin/__tests__/ConfirmDialog.test.tsx b/app/admin/__tests__/ConfirmDialog.test.tsx
index 907906d..9a6b695 100644
--- a/app/admin/__tests__/ConfirmDialog.test.tsx
+++ b/app/admin/__tests__/ConfirmDialog.test.tsx
@@ -1,7 +1,7 @@
 // @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';
+import { ConfirmProvider, useChoice, useConfirm } from '../components/ConfirmDialog';
 
 afterEach(cleanup);
 
@@ -60,3 +60,46 @@ describe('ConfirmDialog', () => {
     await waitFor(() => expect(results).toEqual([false, false]));
   });
 });
+
+/** The concurrent-edit prompt (#601): more than two ways out. */
+function ChoiceTrigger({ onResult }: { onResult: (id: string | null) => void }) {
+  const choose = useChoice();
+  return (
+    <button
+      onClick={async () =>
+        onResult(
+          await choose({
+            title: 'Changed elsewhere',
+            actions: [
+              { id: 'overwrite', label: 'Overwrite anyway' },
+              { id: 'reload', label: 'Reload (discard mine)' },
+            ],
+            cancelLabel: 'Keep editing',
+          }),
+        )
+      }
+    >
+      choose
+    </button>
+  );
+}
+
+describe('useChoice', () => {
+  it('resolves to the picked action, or null on cancel', async () => {
+    const results: (string | null)[] = [];
+    render(
+      <ConfirmProvider>
+        <ChoiceTrigger onResult={(id) => results.push(id)} />
+      </ConfirmProvider>,
+    );
+    fireEvent.click(screen.getByText('choose'));
+    fireEvent.click(screen.getByRole('button', { name: 'Reload (discard mine)' }));
+    await waitFor(() => expect(results).toEqual(['reload']));
+    fireEvent.click(screen.getByText('choose'));
+    fireEvent.click(screen.getByRole('button', { name: 'Overwrite anyway' }));
+    await waitFor(() => expect(results).toEqual(['reload', 'overwrite']));
+    fireEvent.click(screen.getByText('choose'));
+    fireEvent.click(screen.getByRole('button', { name: 'Keep editing' }));
+    await waitFor(() => expect(results).toEqual(['reload', 'overwrite', null]));
+  });
+});
diff --git a/app/admin/__tests__/NewPageDialog.test.tsx b/app/admin/__tests__/NewPageDialog.test.tsx
new file mode 100644
index 0000000..2bdbe9d
--- /dev/null
+++ b/app/admin/__tests__/NewPageDialog.test.tsx
@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import NewPageDialog from '../components/page-builder/NewPageDialog';
+
+afterEach(cleanup);
+
+const taken = { subpages: [], albums: [], journal: [] };
+
+function setup() {
+  const onCreate = vi.fn();
+  render(
+    <NewPageDialog
+      taken={taken}
+      existingPageSlugs={[]}
+      creating={false}
+      onCreate={onCreate}
+      onClose={() => {}}
+    />,
+  );
+  return { onCreate, slug: screen.getByLabelText('URL') as HTMLInputElement };
+}
+
+/** Type one key at a time into a controlled input, as a person does. */
+function typeKeys(input: HTMLInputElement, text: string) {
+  for (const ch of text) fireEvent.change(input, { target: { value: input.value + ch } });
+}
+
+describe('NewPageDialog slug field', () => {
+  it('takes a hyphen typed between two words', () => {
+    const { slug, onCreate } = setup();
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'About' } });
+    // Select all and retype: the first key replaces the derived slug.
+    fireEvent.change(slug, { target: { value: 'a' } });
+    typeKeys(slug, 'bout-us');
+    expect(slug.value).toBe('about-us');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Create page' }));
+    expect(onCreate).toHaveBeenCalledWith(expect.objectContaining({ slug: 'about-us' }));
+  });
+
+  it('creates the finished slug when the field ends in a hyphen', () => {
+    const { slug, onCreate } = setup();
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Pricing' } });
+    typeKeys(slug, '-');
+    expect(slug.value).toBe('pricing-');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Create page' }));
+    expect(onCreate).toHaveBeenCalledWith(expect.objectContaining({ slug: 'pricing' }));
+  });
+
+  it('derives a readable slug from a German title', () => {
+    const { slug } = setup();
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Preise für Paare' } });
+    expect(slug.value).toBe('preise-fur-paare');
+  });
+});
diff --git a/app/admin/__tests__/analyticsDays.test.ts b/app/admin/__tests__/analyticsDays.test.ts
new file mode 100644
index 0000000..2b2f123
--- /dev/null
+++ b/app/admin/__tests__/analyticsDays.test.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { lastDays } from '../components/analyticsDays';
+
+/**
+ * "Last 14 Days" used to show the last 14 days that had any views, so quiet
+ * days vanished and the chart could span a month (QA A-16).
+ */
+describe('lastDays', () => {
+  const days = {
+    '2026-08-28': { pageviews: 4 },
+    '2026-09-20': { pageviews: 6 },
+    '2026-09-29': { pageviews: 16 },
+  };
+
+  it('returns every calendar day up to today, with 0 for days without views', () => {
+    const out = lastDays(days, 14, new Date('2026-09-29T12:00:00Z'));
+    expect(out).toHaveLength(14);
+    expect(out[0]).toEqual({ date: '2026-09-16', pageviews: 0 });
+    expect(out[4]).toEqual({ date: '2026-09-20', pageviews: 6 });
+    expect(out[13]).toEqual({ date: '2026-09-29', pageviews: 16 });
+    // Older recorded days are outside the window, not pulled into it.
+    expect(out.find((d) => d.date === '2026-08-28')).toBeUndefined();
+  });
+
+  it('counts days in UTC, the way the tracker keys them', () => {
+    // 23:30 UTC on the 29th is already the 30th in Berlin.
+    const out = lastDays(days, 2, new Date('2026-09-29T23:30:00Z'));
+    expect(out.map((d) => d.date)).toEqual(['2026-09-28', '2026-09-29']);
+  });
+
+  it('crosses a month boundary without skipping or repeating a day', () => {
+    const out = lastDays({}, 3, new Date('2026-10-01T00:00:00Z'));
+    expect(out.map((d) => d.date)).toEqual(['2026-09-29', '2026-09-30', '2026-10-01']);
+  });
+});
diff --git a/app/admin/__tests__/gallery-ops.test.ts b/app/admin/__tests__/gallery-ops.test.ts
index b98874d..10ec469 100644
--- a/app/admin/__tests__/gallery-ops.test.ts
+++ b/app/admin/__tests__/gallery-ops.test.ts
@@ -110,3 +110,67 @@ describe('reading', () => {
     expect(ops.followMovedIndex(open, from, to)).toBe(expected);
   });
 });
+
+describe('menu with content pages (#722)', () => {
+  const withPages = (): GalleryState => ({
+    ...state(),
+    // pricing before Japan, faq between Trips and Korea.
+    pageRefs: [
+      { slug: 'pricing', position: 0 },
+      { slug: 'faq', position: 2 },
+    ],
+  });
+  const labels = (g: GalleryState) =>
+    ops.menuItems(g).map((i) => (i.kind === 'page' ? `page:${i.slug}` : g.subpages[i.index].name));
+
+  it('interleaves pages and subpages', () => {
+    expect(labels(withPages())).toEqual(['page:pricing', 'Japan', 'Trips', 'page:faq', 'Korea']);
+  });
+
+  it('moves a page between subpages', () => {
+    const g = ops.moveMenuItem(withPages(), 0, 2);
+    expect(labels(g)).toEqual(['Japan', 'Trips', 'page:pricing', 'page:faq', 'Korea']);
+  });
+
+  it('moves a subpage past a page and follows the open sheet', () => {
+    const before = withPages();
+    // Japan (row 1) to the end (row 4).
+    expect(ops.followMenuMove(before, 0, 1, 4)).toBe(2);
+    const g = ops.moveMenuItem(before, 1, 4);
+    expect(labels(g)).toEqual(['page:pricing', 'Trips', 'page:faq', 'Korea', 'Japan']);
+    expect(g.subpages.map((s) => s.name)).toEqual(['Trips', 'Korea', 'Japan']);
+  });
+
+  it('puts a page in the menu at the end, or before a row, and takes it out', () => {
+    let g = ops.setPageInMenu(state(), 'about-me', true);
+    expect(labels(g)).toEqual(['Japan', 'Trips', 'Korea', 'page:about-me']);
+    g = ops.setPageInMenu(g, 'rates', true, 1);
+    expect(labels(g)).toEqual(['Japan', 'page:rates', 'Trips', 'Korea', 'page:about-me']);
+    g = ops.setPageInMenu(g, 'rates', false);
+    expect(labels(g)).toEqual(['Japan', 'Trips', 'Korea', 'page:about-me']);
+    expect(ops.isPageInMenu(g, 'rates')).toBe(false);
+  });
+
+  it('keeps pages in place when a subpage is removed', () => {
+    const g = ops.removeSubpage(withPages(), 0);
+    expect(labels(g)).toEqual(['page:pricing', 'Trips', 'page:faq', 'Korea']);
+  });
+
+  it('follows a rename', () => {
+    const g = ops.renamePageRef(withPages(), 'faq', 'questions');
+    expect(labels(g)).toContain('page:questions');
+    expect(labels(g)).not.toContain('page:faq');
+  });
+});
+
+describe('addHeroes (#602)', () => {
+  it('appends a multi-pick in pick order, skipping duplicates', () => {
+    expect(ops.addHeroes(state(), ['h9', 'h2', 'h8', 'h9']).hero).toEqual([
+      'h1',
+      'h2',
+      'h3',
+      'h9',
+      'h8',
+    ]);
+  });
+});
diff --git a/app/admin/__tests__/gallery-yaml.test.ts b/app/admin/__tests__/gallery-yaml.test.ts
index 95f402d..80a3223 100644
--- a/app/admin/__tests__/gallery-yaml.test.ts
+++ b/app/admin/__tests__/gallery-yaml.test.ts
@@ -160,3 +160,29 @@ describe('subpage keys', () => {
     });
   });
 });
+
+describe('content page references (#722)', () => {
+  it('keeps `- page:` entries where they were among the subpages', () => {
+    const yaml = {
+      subpages: [
+        { page: 'pricing' },
+        { name: 'Japan', albums: [A] },
+        { page: 'faq' },
+        { name: 'Korea', albums: [B] },
+        { page: 'contact-me' },
+      ],
+    };
+    expect(roundTrip(yaml)).toEqual(yaml);
+  });
+
+  it('parses page references apart from the subpages', () => {
+    const g = parseGalleryYaml({ subpages: [{ name: 'Japan', albums: [A] }, { page: 'faq' }] });
+    expect(g.subpages.map((s) => s.name)).toEqual(['Japan']);
+    expect(g.pageRefs).toEqual([{ slug: 'faq', position: 1 }]);
+  });
+
+  it('writes a menu of pages only', () => {
+    const yaml = { subpages: [{ page: 'pricing' }] };
+    expect(roundTrip(yaml)).toEqual(yaml);
+  });
+});
diff --git a/app/admin/__tests__/journal-editor-parts.test.ts b/app/admin/__tests__/journal-editor-parts.test.ts
index 49369f9..67706b8 100644
--- a/app/admin/__tests__/journal-editor-parts.test.ts
+++ b/app/admin/__tests__/journal-editor-parts.test.ts
@@ -1,7 +1,13 @@
 import { describe, it, expect } from 'vitest';
 import type { JournalBlock } from '@/lib/journal';
 import { serializeJournalMarkdown, parseJournalMarkdown } from '@/lib/journal';
-import { createBlock, moveBlock, isLegacyAssetRef } from '../components/journal/blockOps';
+import {
+  createBlock,
+  createPhotoBlocks,
+  fillAssetSlots,
+  moveBlock,
+  isLegacyAssetRef,
+} from '../components/journal/blockOps';
 import {
   clampSplit,
   splitFromPointer,
@@ -124,3 +130,21 @@ describe('split pane', () => {
     expect(parseStoredSplit('abc')).toBeNull();
   });
 });
+
+describe('multi-pick into photo blocks (#602)', () => {
+  it('fills empty slots first, then appends', () => {
+    expect(fillAssetSlots(['a', '', ''], ['x', 'y', 'z'])).toEqual(['a', 'x', 'y', 'z']);
+  });
+
+  it('never grows past a capacity', () => {
+    expect(fillAssetSlots(['', ''], ['x', 'y', 'z'], 2)).toEqual(['x', 'y']);
+    expect(fillAssetSlots(['a', ''], ['x'], 2)).toEqual(['a', 'x']);
+  });
+
+  it('creates one contained photo block per asset', () => {
+    expect(createPhotoBlocks(['x', 'y'])).toEqual([
+      { type: 'photo', assetId: 'x', caption: '', layout: 'contained' },
+      { type: 'photo', assetId: 'y', caption: '', layout: 'contained' },
+    ]);
+  });
+});
diff --git a/app/admin/__tests__/page-link-slug.test.ts b/app/admin/__tests__/page-link-slug.test.ts
new file mode 100644
index 0000000..89ad612
--- /dev/null
+++ b/app/admin/__tests__/page-link-slug.test.ts
@@ -0,0 +1,24 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+import { describe, expect, it } from 'vitest';
+
+// `?page=<slug>` in /admin/pages selects a page, and the page panel turns the
+// slug into its "open live page" link. A slug such as `/evil.example` would
+// make that link `//evil.example`, which leaves the site. Both ends guard it.
+const read = (file: string) => readFileSync(path.join(process.cwd(), file), 'utf8');
+
+describe('page link from ?page=', () => {
+  it('only selects a page for a valid slug', () => {
+    const src = read('app/admin/components/PageBuilder.tsx');
+    const fn = src.slice(src.indexOf('function openPageFromLink'));
+    const body = fn.slice(0, fn.indexOf('\n  }\n'));
+    expect(body).toMatch(/if \(!isValidSlug\(slug\)\) return;/);
+    expect(body.indexOf('isValidSlug(slug)')).toBeLessThan(body.indexOf('setSelectedPage(slug)'));
+  });
+
+  it('encodes the slug in the live-page link', () => {
+    const src = read('app/admin/components/page-builder/PagePanel.tsx');
+    expect(src).toContain('href={`/${encodeURIComponent(slug)}`}');
+    expect(src).not.toContain('href={`/${slug}`}');
+  });
+});
diff --git a/app/admin/__tests__/systemHealth.test.ts b/app/admin/__tests__/systemHealth.test.ts
index 61ed6c7..a87d902 100644
--- a/app/admin/__tests__/systemHealth.test.ts
+++ b/app/admin/__tests__/systemHealth.test.ts
@@ -50,9 +50,9 @@ describe('systemHealth', () => {
     });
   });
 
-  it('reports a doctor warning as neutral', () => {
+  it('reports a doctor warning in the warning tone, not the neutral one', () => {
     expect(health({ doctorLevel: 'warn' })).toEqual({
-      tone: 'unknown',
+      tone: 'warning',
       label: 'Check Diagnostics',
     });
   });
@@ -67,7 +67,7 @@ describe('systemHealth', () => {
       'Setup Incomplete': 'unknown',
       'System Degraded': 'disconnected',
       'Needs Attention': 'disconnected',
-      'Check Diagnostics': 'unknown',
+      'Check Diagnostics': 'warning',
       'System OK': 'connected',
       'Status Unknown': 'unknown',
     };
diff --git a/app/admin/admin.css b/app/admin/admin.css
index 2800223..300a73a 100644
--- a/app/admin/admin.css
+++ b/app/admin/admin.css
@@ -34,4 +34,5 @@
 @import './styles/diagnostics.css';
 @import './styles/messages.css';
 @import './styles/notifications.css';
+@import './styles/proofing.css';
 @import './styles/redesign.css';
diff --git a/app/admin/components/AdminDashboard.tsx b/app/admin/components/AdminDashboard.tsx
index 71a12e6..c264075 100644
--- a/app/admin/components/AdminDashboard.tsx
+++ b/app/admin/components/AdminDashboard.tsx
@@ -47,7 +47,7 @@ const NAV: {
       {
         label: 'Pages',
         href: '/admin/pages',
-        match: /^\/admin\/pages$/,
+        match: /^\/admin\/pages(\/|$)/,
         icon: <Icons.IconGrid size={16} />,
       },
       {
@@ -68,6 +68,12 @@ const NAV: {
         icon: <Icons.IconFileText size={16} />,
         badge: 'messages',
       },
+      {
+        label: 'Proofing',
+        href: '/admin/proofing',
+        match: /^\/admin\/proofing/,
+        icon: <Icons.IconHeart size={16} />,
+      },
       {
         label: 'Analytics',
         href: '/admin/analytics',
@@ -277,6 +283,9 @@ export default function AdminDashboard({ onLogout, children }: Props) {
         menuOpen ? ' menu-open' : ''
       }`}
     >
+      <a href="#admin-main" className="skip-link">
+        Skip to content
+      </a>
       <aside className="admin-sidebar" aria-label="Admin">
         <button
           type="button"
@@ -506,7 +515,9 @@ export default function AdminDashboard({ onLogout, children }: Props) {
         </div>
       </aside>
 
-      <main className="admin-main admin-workspace">{children}</main>
+      <main id="admin-main" tabIndex={-1} className="admin-main admin-workspace">
+        {children}
+      </main>
 
       <BackupManagerModal
         isOpen={showBackupModal}
diff --git a/app/admin/components/AdminOverview.tsx b/app/admin/components/AdminOverview.tsx
index 919f0de..e4e2dcf 100644
--- a/app/admin/components/AdminOverview.tsx
+++ b/app/admin/components/AdminOverview.tsx
@@ -15,9 +15,11 @@ import * as Icons from './Icons';
 import { adminGet } from './useAdminFetch';
 import type { DoctorFinding, DoctorLevel } from '@/lib/admin/doctor';
 import { DOCTOR_LEVEL_EVENT } from './systemHealth';
+import { parseGalleryYaml } from './page-builder/galleryYaml';
 
 interface OverviewData {
-  gallery: { hero?: unknown; subpages?: Array<{ enabled?: boolean }> } | null;
+  /** gallery.yaml as stored; `subpages` may be a list or the older name → albums map. */
+  gallery: Record<string, unknown> | null;
   journal: Array<{ frontmatter: { draft?: boolean } }> | null;
   messages: Array<{ read: boolean; name: string }> | null;
   analytics: { days?: Record<string, { pageviews?: number }> } | null;
@@ -32,6 +34,7 @@ const FIX_ROUTE: Record<string, string> = {
   passwords: '/admin/settings/security',
   'album-ids': '/admin/pages',
   'albums-shared': '/admin/pages',
+  'content-pages': '/admin/pages',
 };
 
 function viewsLastDays(
@@ -85,7 +88,9 @@ export default function AdminOverview() {
     };
   }, []);
 
-  const subpages = data?.gallery?.subpages ?? [];
+  // Read the way the page builder reads it: both shapes of `subpages:`, and
+  // `- page:` entries, which are content pages in the menu, not subpages (#722).
+  const subpages = data?.gallery ? parseGalleryYaml(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;
diff --git a/app/admin/components/AlbumPicker.tsx b/app/admin/components/AlbumPicker.tsx
index ebf0f31..f4a1a9f 100644
--- a/app/admin/components/AlbumPicker.tsx
+++ b/app/admin/components/AlbumPicker.tsx
@@ -52,7 +52,7 @@ export default function AlbumPicker({ albums, onSelect, onClose, usedAlbumIds }:
       >
         <div className="picker-header">
           <h3 id="album-picker-title">Select Album</h3>
-          <button className="admin-btn-icon" onClick={onClose}>
+          <button type="button" className="admin-btn-icon" onClick={onClose} aria-label="Close">
             ×
           </button>
         </div>
@@ -76,12 +76,16 @@ export default function AlbumPicker({ albums, onSelect, onClose, usedAlbumIds }:
           {filtered.map((album) => {
             const isUsed = usedAlbumIds.has(album.id);
             return (
-              <div
+              // A button, not a div: the list has to work from the keyboard.
+              // An album already on the site is disabled rather than inert.
+              <button
+                type="button"
                 key={album.id}
                 className={`picker-item ${isUsed ? 'used' : ''}`}
-                onClick={() => !isUsed && onSelect(album.id)}
+                disabled={isUsed}
+                onClick={() => onSelect(album.id)}
               >
-                <div className="picker-item-thumb">
+                <span className="picker-item-thumb">
                   {album.thumbnailAssetId ? (
                     <img
                       className="picker-thumb-img"
@@ -90,12 +94,12 @@ export default function AlbumPicker({ albums, onSelect, onClose, usedAlbumIds }:
                       loading="lazy"
                     />
                   ) : (
-                    <div className="picker-thumb-placeholder">
+                    <span className="picker-thumb-placeholder">
                       <IconFolder size={20} />
-                    </div>
+                    </span>
                   )}
-                </div>
-                <div className="picker-item-info">
+                </span>
+                <span className="picker-item-info">
                   <span className="picker-item-name">{album.albumName}</span>
                   <span className="picker-item-meta">
                     {album.assetCount} photos
@@ -108,15 +112,15 @@ export default function AlbumPicker({ albums, onSelect, onClose, usedAlbumIds }:
                   {album.shared === false && (
                     <span className="picker-item-note">Not shared in Immich</span>
                   )}
-                </div>
-                <div className="picker-item-action">
+                </span>
+                <span className="picker-item-action">
                   {isUsed ? (
                     <span className="picker-used-badge">In use</span>
                   ) : (
                     <span className="picker-select-badge">Select</span>
                   )}
-                </div>
-              </div>
+                </span>
+              </button>
             );
           })}
         </div>
diff --git a/app/admin/components/AnalyticsView.tsx b/app/admin/components/AnalyticsView.tsx
index 27c11f6..e547070 100644
--- a/app/admin/components/AnalyticsView.tsx
+++ b/app/admin/components/AnalyticsView.tsx
@@ -4,6 +4,7 @@ import * as Icons from './Icons';
 import { useAdminFetch } from './useAdminFetch';
 import AdminLoadState from './AdminLoadState';
 import PageHeader from './PageHeader';
+import { lastDays } from './analyticsDays';
 
 interface AnalyticsData {
   trackingEnabled?: boolean;
@@ -40,10 +41,9 @@ export default function AnalyticsView() {
 
   const totalViews = data.summary?.totalViews || 0;
   const maxPageViews = data.topPages[0]?.count || 1;
-  const daysList = Object.entries(data.days || {})
-    .sort((a, b) => a[0].localeCompare(b[0]))
-    .slice(-14); // Last 14 days
-  const maxDayViews = Math.max(...daysList.map(([, d]) => d.pageviews || 0), 1);
+  const hasDays = Object.keys(data.days || {}).length > 0;
+  const daysList = lastDays(data.days || {}, 14, new Date());
+  const maxDayViews = Math.max(...daysList.map((d) => d.pageviews), 1);
 
   const desktopRatio =
     data.devices.desktop + data.devices.mobile > 0
@@ -105,24 +105,24 @@ export default function AnalyticsView() {
             <Icons.IconGrid size={16} /> Daily Traffic Trend (Last 14 Days)
           </h3>
         </div>
-        {daysList.length === 0 ? (
+        {!hasDays ? (
           <p className="analytics-empty">
             No pageviews recorded yet. Visit portfolio pages to start tracking!
           </p>
         ) : (
           <div className="analytics-bar-chart">
-            {daysList.map(([dateStr, dayData]) => {
-              const heightPct = Math.round((dayData.pageviews / maxDayViews) * 100);
-              const formattedDate = dateStr.slice(5); // MM-DD
+            {daysList.map(({ date, pageviews }) => {
+              const heightPct = Math.round((pageviews / maxDayViews) * 100);
+              const formattedDate = date.slice(5); // MM-DD
               return (
-                <div
-                  key={dateStr}
-                  className="bar-col"
-                  title={`${dateStr}: ${dayData.pageviews} views`}
-                >
+                <div key={date} className="bar-col" title={`${date}: ${pageviews} views`}>
                   <div className="bar-wrapper">
-                    <div className="bar-fill" style={{ height: `${Math.max(heightPct, 8)}%` }}>
-                      <span className="bar-val">{dayData.pageviews}</span>
+                    {/* A day with views keeps a sliver of bar; an empty one has none. */}
+                    <div
+                      className="bar-fill"
+                      style={{ height: `${pageviews > 0 ? Math.max(heightPct, 3) : 0}%` }}
+                    >
+                      <span className="bar-val">{pageviews}</span>
                     </div>
                   </div>
                   <span className="bar-label">{formattedDate}</span>
diff --git a/app/admin/components/AssetOrderEditor.tsx b/app/admin/components/AssetOrderEditor.tsx
index 2e2691d..01a4c41 100644
--- a/app/admin/components/AssetOrderEditor.tsx
+++ b/app/admin/components/AssetOrderEditor.tsx
@@ -19,6 +19,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useScrollLock } from './useScrollLock';
+import { useModalDialog } from '@/hooks/useModalDialog';
 
 interface AssetInfo {
   id: string;
@@ -65,8 +66,10 @@ function SortableAssetTile({
       <img src={`/api/admin/thumbnail/${asset.id}`} alt={asset.originalFileName} loading="lazy" />
       <span className="order-tile-index">{index + 1}</span>
       <button
+        type="button"
         className="order-tile-action"
         title="Unpin — let this photo follow automatically"
+        aria-label={`Unpin ${asset.originalFileName}`}
         onPointerDown={(e) => e.stopPropagation()}
         onClick={(e) => {
           e.stopPropagation();
@@ -94,6 +97,7 @@ export default function AssetOrderEditor({
   onClose,
 }: Props) {
   useScrollLock(true);
+  const cardRef = useModalDialog(onClose);
   const [assets, setAssets] = useState<AssetInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
@@ -164,10 +168,17 @@ export default function AssetOrderEditor({
 
   return (
     <div className="picker-overlay" onClick={onClose}>
-      <div className="asset-picker-modal" onClick={(e) => e.stopPropagation()}>
+      <div
+        className="asset-picker-modal"
+        ref={cardRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="order-editor-title"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="picker-header">
-          <h3>Photo order — {albumName}</h3>
-          <button className="admin-btn-icon" onClick={onClose}>
+          <h3 id="order-editor-title">Photo order — {albumName}</h3>
+          <button type="button" className="admin-btn-icon" onClick={onClose} aria-label="Close">
             ×
           </button>
         </div>
@@ -240,19 +251,19 @@ export default function AssetOrderEditor({
               </p>
               <div className="order-editor-grid">
                 {unpinned.map((asset) => (
-                  <div
+                  <button
+                    type="button"
                     key={asset.id}
                     className="order-tile order-tile-unpinned"
                     title={asset.originalFileName}
+                    aria-label={`Pin ${asset.originalFileName}`}
                     onClick={() => setPinnedIds([...pinnedIds, asset.id])}
                   >
-                    <img
-                      src={`/api/admin/thumbnail/${asset.id}`}
-                      alt={asset.originalFileName}
-                      loading="lazy"
-                    />
-                    <span className="order-tile-action">+</span>
-                  </div>
+                    <img src={`/api/admin/thumbnail/${asset.id}`} alt="" loading="lazy" />
+                    <span className="order-tile-action" aria-hidden="true">
+                      +
+                    </span>
+                  </button>
                 ))}
               </div>
             </div>
diff --git a/app/admin/components/AssetPicker.tsx b/app/admin/components/AssetPicker.tsx
index f152328..150a897 100644
--- a/app/admin/components/AssetPicker.tsx
+++ b/app/admin/components/AssetPicker.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useModalDialog } from '@/hooks/useModalDialog';
-import { IconCheck, IconFolder, IconImage, IconStar } from './Icons';
+import { canSelectMore, matchesQuery, toggleSelection } from '@/lib/admin/assetSelection';
+import { IconCheck, IconFolder, IconImage, IconSearch, IconStar } from './Icons';
 import { useScrollLock } from './useScrollLock';
 
 interface AssetInfo {
@@ -13,7 +14,15 @@ interface AssetInfo {
 }
 
 interface Props {
-  onSelect: (assetId: string) => void;
+  /** Single-select: called with the one asset picked; the caller closes the picker. */
+  onSelect?: (assetId: string) => void;
+  /**
+   * Multi-select (#602): tiles toggle, and a confirm button hands over every
+   * picked asset in the order they were picked. Takes precedence over `onSelect`.
+   */
+  onSelectMany?: (assetIds: string[]) => void;
+  /** Most assets `onSelectMany` accepts; unlimited when omitted. */
+  max?: number;
   onClose: () => void;
   currentAssetIds?: string[];
   albumId?: string;
@@ -22,8 +31,12 @@ interface Props {
 
 type Tab = 'album' | 'favorites' | 'all';
 
+const SEARCH_DEBOUNCE_MS = 300;
+
 export default function AssetPicker({
   onSelect,
+  onSelectMany,
+  max,
   onClose,
   currentAssetIds = [],
   albumId,
@@ -31,21 +44,50 @@ export default function AssetPicker({
 }: Props) {
   useScrollLock(true);
   const cardRef = useModalDialog(onClose);
+  const multi = onSelectMany !== undefined;
   const [tab, setTab] = useState<Tab>(albumId ? 'album' : 'favorites');
   const [assets, setAssets] = useState<AssetInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(false);
+  const [queryInput, setQueryInput] = useState('');
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState<string[]>([]);
   const [uuidInput, setUuidInput] = useState('');
   const [uuidError, setUuidError] = useState('');
   const listRef = useRef<HTMLDivElement>(null);
-  const currentIds = new Set(currentAssetIds);
+  /**
+   * Bumped each time the list starts over (tab, album or search changed). A
+   * request is only allowed to touch the list while its generation is current:
+   * without this, a slow Favorites answer landing after a switch to All Photos
+   * replaced that tab's photos, and ended its spinner early.
+   */
+  const generation = useRef(0);
+  const currentIds = useMemo(() => new Set(currentAssetIds), [currentAssetIds]);
+
+  // Debounce typing into the query the fetch runs on.
+  useEffect(() => {
+    const t = setTimeout(() => setQuery(queryInput.trim()), SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [queryInput]);
+
+  // The album tab loads the album whole and filters locally; the library tabs
+  // search server-side, since they are paged.
+  const serverQuery = tab === 'album' ? '' : query;
 
   const loadAssets = useCallback(
     async (pageNum: number, append: boolean = false) => {
-      if (pageNum === 1) setLoading(true);
-      else setLoadingMore(true);
+      // A fresh list starts a generation; a further page belongs to the current one.
+      const gen = append ? generation.current : ++generation.current;
+      const current = () => gen === generation.current;
+      if (append) {
+        setLoadingMore(true);
+      } else {
+        setLoading(true);
+        // A "load more" of the previous list will not clear this itself.
+        setLoadingMore(false);
+      }
 
       try {
         let res: Response;
@@ -56,22 +98,31 @@ export default function AssetPicker({
             page: pageNum.toString(),
             favorites: tab === 'favorites' ? 'true' : 'false',
           });
+          if (serverQuery) params.set('q', serverQuery);
           res = await fetch(`/api/admin/assets?${params}`);
         }
         if (res.ok) {
           const data = await res.json();
-          setAssets((prev) => (append ? [...prev, ...data.assets] : data.assets));
+          if (!current()) return;
+          setAssets((prev) => {
+            if (!append) return data.assets;
+            // Merged filename + description pages can overlap across pages.
+            const seen = new Set(prev.map((a) => a.id));
+            return [...prev, ...data.assets.filter((a: AssetInfo) => !seen.has(a.id))];
+          });
           setHasMore(data.nextPage !== null);
           setPage(pageNum);
         }
       } catch (err) {
-        console.error('Failed to load assets:', err);
+        if (current()) console.error('Failed to load assets:', err);
       } finally {
-        setLoading(false);
-        setLoadingMore(false);
+        if (current()) {
+          setLoading(false);
+          setLoadingMore(false);
+        }
       }
     },
-    [tab, albumId],
+    [tab, albumId, serverQuery],
   );
 
   useEffect(() => {
@@ -79,7 +130,9 @@ export default function AssetPicker({
     setPage(1);
     setHasMore(false);
     loadAssets(1);
-  }, [tab, loadAssets]);
+  }, [loadAssets]);
+
+  const visible = tab === 'album' ? assets.filter((a) => matchesQuery(a, query)) : assets;
 
   // Infinite scroll
   function handleScroll() {
@@ -90,6 +143,16 @@ export default function AssetPicker({
     }
   }
 
+  function pick(id: string) {
+    if (currentIds.has(id)) return;
+    if (multi) setSelected((s) => toggleSelection(s, id, { disabled: currentIds, max }));
+    else onSelect?.(id);
+  }
+
+  function confirm() {
+    if (multi && selected.length > 0) onSelectMany(selected);
+  }
+
   function handleUuidSubmit(e: React.FormEvent) {
     e.preventDefault();
     const uuid = uuidInput.trim();
@@ -99,7 +162,12 @@ export default function AssetPicker({
       return;
     }
     setUuidError('');
-    onSelect(uuid);
+    if (multi) {
+      setSelected((s) => toggleSelection(s, uuid.toLowerCase(), { disabled: currentIds, max }));
+      setUuidInput('');
+    } else {
+      onSelect?.(uuid);
+    }
   }
 
   function formatDate(dateStr: string): string {
@@ -114,6 +182,8 @@ export default function AssetPicker({
     }
   }
 
+  const full = multi && !canSelectMore(selected, max);
+
   return (
     <div className="picker-overlay" onClick={onClose}>
       <div
@@ -126,7 +196,7 @@ export default function AssetPicker({
       >
         <div className="picker-header">
           <h3 id="asset-picker-title">{title || 'Select Hero Image'}</h3>
-          <button className="admin-btn-icon" onClick={onClose}>
+          <button className="admin-btn-icon" onClick={onClose} aria-label="Close">
             ×
           </button>
         </div>
@@ -136,6 +206,7 @@ export default function AssetPicker({
           {albumId && (
             <button
               className={`asset-picker-tab ${tab === 'album' ? 'active' : ''}`}
+              aria-pressed={tab === 'album'}
               onClick={() => setTab('album')}
             >
               <IconFolder size={14} />
@@ -144,6 +215,7 @@ export default function AssetPicker({
           )}
           <button
             className={`asset-picker-tab ${tab === 'favorites' ? 'active' : ''}`}
+            aria-pressed={tab === 'favorites'}
             onClick={() => setTab('favorites')}
           >
             <IconStar size={14} />
@@ -151,6 +223,7 @@ export default function AssetPicker({
           </button>
           <button
             className={`asset-picker-tab ${tab === 'all' ? 'active' : ''}`}
+            aria-pressed={tab === 'all'}
             onClick={() => setTab('all')}
           >
             <IconImage size={14} />
@@ -158,45 +231,91 @@ export default function AssetPicker({
           </button>
         </div>
 
+        {/* Search */}
+        <div className="asset-picker-search">
+          <IconSearch size={14} />
+          <input
+            type="search"
+            value={queryInput}
+            onChange={(e) => setQueryInput(e.target.value)}
+            onKeyDown={(e) => {
+              // Enter in the field searches at once instead of submitting anything.
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                setQuery(queryInput.trim());
+              }
+            }}
+            maxLength={100}
+            placeholder={
+              tab === 'album'
+                ? 'Filter this album by filename…'
+                : 'Search filename, description, or a date (2024-05)…'
+            }
+            aria-label="Search photos"
+            className="asset-picker-search-input"
+          />
+        </div>
+
         {/* Asset Grid */}
-        <div className="asset-picker-grid" ref={listRef} onScroll={handleScroll}>
+        <div
+          className="asset-picker-grid"
+          ref={listRef}
+          onScroll={handleScroll}
+          role="group"
+          aria-label="Photos"
+        >
           {loading ? (
             <div className="asset-picker-loading">
               <div className="admin-spinner" />
             </div>
-          ) : assets.length === 0 ? (
+          ) : visible.length === 0 ? (
             <p className="empty-hint">
-              {tab === 'favorites'
-                ? 'No favorite photos found. Star photos in Immich first, or switch to "All Photos".'
-                : 'No photos found.'}
+              {query
+                ? `No photos match “${query}”.`
+                : tab === 'favorites'
+                  ? 'No favorite photos found. Star photos in Immich first, or switch to "All Photos".'
+                  : 'No photos found.'}
             </p>
           ) : (
             <>
-              {assets.map((asset) => {
+              {visible.map((asset) => {
                 const isUsed = currentIds.has(asset.id);
+                const order = selected.indexOf(asset.id);
+                const isSelected = order !== -1;
+                const blocked = isUsed || (full && !isSelected);
+                const label = `${asset.originalFileName}, ${formatDate(asset.fileCreatedAt)}${
+                  isUsed ? ' (already used)' : ''
+                }`;
                 return (
-                  <div
+                  <button
+                    type="button"
                     key={asset.id}
-                    className={`asset-picker-tile ${isUsed ? 'used' : ''}`}
-                    onClick={() => !isUsed && onSelect(asset.id)}
+                    className={`asset-picker-tile ${isUsed ? 'used' : ''} ${
+                      isSelected ? 'selected' : ''
+                    }`}
+                    onClick={() => pick(asset.id)}
+                    disabled={blocked}
+                    aria-pressed={multi ? isSelected : undefined}
+                    aria-label={label}
                     title={`${asset.originalFileName}\n${formatDate(asset.fileCreatedAt)}`}
                   >
-                    <img
-                      src={`/api/admin/thumbnail/${asset.id}`}
-                      alt={asset.originalFileName}
-                      loading="lazy"
-                    />
+                    <img src={`/api/admin/thumbnail/${asset.id}`} alt="" loading="lazy" />
                     {isUsed && (
-                      <div className="asset-picker-used-badge">
+                      <span className="asset-picker-used-badge" aria-hidden="true">
                         <IconCheck size={11} />
-                      </div>
+                      </span>
+                    )}
+                    {isSelected && (
+                      <span className="asset-picker-order-badge" aria-hidden="true">
+                        {max === 1 ? <IconCheck size={11} /> : order + 1}
+                      </span>
                     )}
                     {asset.isFavorite && !isUsed && (
-                      <div className="asset-picker-fav-badge" title="Favorite in Immich">
+                      <span className="asset-picker-fav-badge" aria-hidden="true">
                         <IconStar size={14} />
-                      </div>
+                      </span>
                     )}
-                  </div>
+                  </button>
                 );
               })}
               {loadingMore && (
@@ -208,6 +327,36 @@ export default function AssetPicker({
           )}
         </div>
 
+        {/* Selection bar (multi-select) */}
+        {multi && (
+          <div className="asset-picker-selection">
+            <span aria-live="polite">
+              {selected.length === 0
+                ? max && max > 1
+                  ? `Pick up to ${max} photos`
+                  : 'Pick photos'
+                : `${selected.length}${max && max > 1 ? ` of ${max}` : ''} selected`}
+            </span>
+            {selected.length > 0 && (
+              <button
+                type="button"
+                className="admin-btn admin-btn-sm"
+                onClick={() => setSelected([])}
+              >
+                Clear
+              </button>
+            )}
+            <button
+              type="button"
+              className="admin-btn admin-btn-sm admin-btn-primary"
+              disabled={selected.length === 0}
+              onClick={confirm}
+            >
+              {selected.length > 1 ? `Add ${selected.length} photos` : 'Add photo'}
+            </button>
+          </div>
+        )}
+
         {/* UUID Fallback */}
         <div className="asset-picker-uuid-section">
           <form onSubmit={handleUuidSubmit} className="asset-picker-uuid-form">
@@ -219,6 +368,7 @@ export default function AssetPicker({
                 setUuidError('');
               }}
               placeholder="Or paste asset UUID directly..."
+              aria-label="Asset UUID"
               className="asset-picker-uuid-input"
             />
             <button type="submit" className="admin-btn admin-btn-sm" disabled={!uuidInput.trim()}>
diff --git a/app/admin/components/BackupManagerModal.tsx b/app/admin/components/BackupManagerModal.tsx
index 3125ee7..81eabf2 100644
--- a/app/admin/components/BackupManagerModal.tsx
+++ b/app/admin/components/BackupManagerModal.tsx
@@ -20,6 +20,7 @@ const TABS: { target: BackupTarget; label: string; file: string }[] = [
   { target: 'about', label: 'About', file: 'about.md' },
   { target: 'privacy', label: 'Privacy', file: 'privacy.md' },
   { target: 'journal', label: 'Journal', file: 'journal entries' },
+  { target: 'pages', label: 'Content pages', file: 'content pages' },
 ];
 
 type BackupLists = Record<BackupTarget, BackupItem[]>;
@@ -30,6 +31,7 @@ const EMPTY_LISTS: BackupLists = {
   about: [],
   privacy: [],
   journal: [],
+  pages: [],
 };
 
 export default function BackupManagerModal({ isOpen, onClose, onRestoreSuccess }: Props) {
@@ -87,7 +89,7 @@ export default function BackupManagerModal({ isOpen, onClose, onRestoreSuccess }
 
       setSuccessMsg(
         item.slug
-          ? `Journal entry "${item.slug}" restored.`
+          ? `${item.target === 'pages' ? 'Page' : 'Journal entry'} "${item.slug}" restored.`
           : `Backup restored successfully! (${filename})`,
       );
       setConfirmItem(null);
@@ -121,8 +123,8 @@ export default function BackupManagerModal({ isOpen, onClose, onRestoreSuccess }
           <div>
             <h2 id="backup-modal-title">Backup History &amp; Restoration</h2>
             <p className="backup-modal-subtitle">
-              Restore an earlier version of your pages, settings, about page or journal — including
-              deleted journal entries.
+              Restore an earlier version of your pages, settings, about page, journal or content
+              pages — including deleted journal entries and pages.
             </p>
           </div>
           <button className="backup-modal-close-btn" onClick={onClose} aria-label="Close">
@@ -194,7 +196,7 @@ export default function BackupManagerModal({ isOpen, onClose, onRestoreSuccess }
                 const dateObj = item.timestamp ? new Date(item.timestamp) : null;
                 const formattedDate =
                   dateObj && !isNaN(dateObj.getTime())
-                    ? dateObj.toLocaleString('de-DE', {
+                    ? dateObj.toLocaleString(undefined, {
                         dateStyle: 'medium',
                         timeStyle: 'medium',
                       })
@@ -251,8 +253,8 @@ export default function BackupManagerModal({ isOpen, onClose, onRestoreSuccess }
                     }}
                   />
                   {showAllBackups
-                    ? 'Ältere Einträge einklappen'
-                    : `Ältere Einträge anzeigen (${hiddenCount} weitere)`}
+                    ? 'Hide older backups'
+                    : `Show ${hiddenCount} older ${hiddenCount === 1 ? 'backup' : 'backups'}`}
                 </button>
               )}
             </div>
diff --git a/app/admin/components/ConfirmDialog.tsx b/app/admin/components/ConfirmDialog.tsx
index 757d08b..a225c09 100644
--- a/app/admin/components/ConfirmDialog.tsx
+++ b/app/admin/components/ConfirmDialog.tsx
@@ -28,37 +28,90 @@ export interface ConfirmOptions {
 
 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);
+/** One button of a choice; `id` is what the promise resolves to. */
+export interface ChoiceAction<Id extends string> {
+  id: Id;
+  label: string;
+  danger?: boolean;
 }
 
-export function ConfirmProvider({ children }: { children: ReactNode }) {
-  const [pending, setPending] = useState<ConfirmOptions | null>(null);
-  const resolver = useRef<((ok: boolean) => void) | null>(null);
+/**
+ * More than yes or no — the concurrent-edit prompt (#601) offers three ways
+ * out. The cancel button (and Esc, and the backdrop) resolves to null.
+ */
+export interface ChoiceOptions<Id extends string> {
+  title: string;
+  message?: ReactNode;
+  /** Left to right; the last one is the primary button. */
+  actions: ChoiceAction<Id>[];
+  cancelLabel?: string;
+}
 
-  const confirm = useCallback<Confirm>(
-    (options) =>
-      new Promise<boolean>((resolve) => {
-        resolver.current?.(false);
+type Choose = <Id extends string>(options: ChoiceOptions<Id>) => Promise<Id | null>;
+
+interface DialogContext {
+  confirm: Confirm;
+  choose: Choose;
+}
+
+/** Outside the provider (a component tested on its own) it falls back to window.confirm. */
+const ConfirmContext = createContext<DialogContext>({
+  confirm: async (o) => (typeof window === 'undefined' ? false : window.confirm(o.title)),
+  choose: async (o) =>
+    typeof window !== 'undefined' && window.confirm(o.title)
+      ? (o.actions[o.actions.length - 1]?.id ?? null)
+      : null,
+});
+
+export function useConfirm(): Confirm {
+  return useContext(ConfirmContext).confirm;
+}
+
+export function useChoice(): Choose {
+  return useContext(ConfirmContext).choose;
+}
+
+const CONFIRM_ID = 'confirm';
+
+export function ConfirmProvider({ children }: { children: ReactNode }) {
+  const [pending, setPending] = useState<ChoiceOptions<string> | null>(null);
+  const resolver = useRef<((id: string | null) => void) | null>(null);
+
+  const choose = useCallback(
+    (options: ChoiceOptions<string>) =>
+      new Promise<string | null>((resolve) => {
+        resolver.current?.(null);
         resolver.current = resolve;
         setPending(options);
       }),
     [],
+  ) as Choose;
+
+  const confirm = useCallback<Confirm>(
+    async (options) =>
+      (await choose({
+        title: options.title,
+        message: options.message,
+        cancelLabel: options.cancelLabel,
+        actions: [
+          {
+            id: CONFIRM_ID,
+            label: options.confirmLabel ?? 'Confirm',
+            danger: options.danger,
+          },
+        ],
+      })) === CONFIRM_ID,
+    [choose],
   );
 
-  const settle = useCallback((ok: boolean) => {
-    resolver.current?.(ok);
+  const settle = useCallback((id: string | null) => {
+    resolver.current?.(id);
     resolver.current = null;
     setPending(null);
   }, []);
 
   return (
-    <ConfirmContext.Provider value={confirm}>
+    <ConfirmContext.Provider value={{ confirm, choose }}>
       {children}
       {pending && <Dialog options={pending} onSettle={settle} />}
     </ConfirmContext.Provider>
@@ -69,13 +122,14 @@ function Dialog({
   options,
   onSettle,
 }: {
-  options: ConfirmOptions;
-  onSettle: (ok: boolean) => void;
+  options: ChoiceOptions<string>;
+  onSettle: (id: string | null) => void;
 }) {
   // Esc cancels, focus is trapped and returned (the same hook the modals use).
-  const cardRef = useModalDialog(() => onSettle(false));
+  const cardRef = useModalDialog(() => onSettle(null));
+  const last = options.actions.length - 1;
   return (
-    <div className="confirm-backdrop" onClick={() => onSettle(false)}>
+    <div className="confirm-backdrop" onClick={() => onSettle(null)}>
       <div
         ref={cardRef}
         className="confirm-card"
@@ -97,17 +151,26 @@ function Dialog({
           <button
             type="button"
             className="admin-btn admin-btn-ghost"
-            onClick={() => onSettle(false)}
+            onClick={() => onSettle(null)}
           >
             {options.cancelLabel ?? 'Cancel'}
           </button>
-          <button
-            type="button"
-            className={`admin-btn ${options.danger ? 'confirm-danger' : 'admin-btn-primary'}`}
-            onClick={() => onSettle(true)}
-          >
-            {options.confirmLabel ?? 'Confirm'}
-          </button>
+          {options.actions.map((action, i) => (
+            <button
+              key={action.id}
+              type="button"
+              className={`admin-btn ${
+                action.danger
+                  ? 'confirm-danger'
+                  : i === last
+                    ? 'admin-btn-primary'
+                    : 'admin-btn-ghost'
+              }`}
+              onClick={() => onSettle(action.id)}
+            >
+              {action.label}
+            </button>
+          ))}
         </div>
       </div>
     </div>
diff --git a/app/admin/components/DiagnosticsView.tsx b/app/admin/components/DiagnosticsView.tsx
index 8650411..b5f34fb 100644
--- a/app/admin/components/DiagnosticsView.tsx
+++ b/app/admin/components/DiagnosticsView.tsx
@@ -45,7 +45,16 @@ const GROUPS: { id: string; title: string; checks: string[] }[] = [
   {
     id: 'content',
     title: 'Content',
-    checks: ['albums-shared', 'content-writable', 'alt-text', 'legal', 'contact', 'privacy'],
+    checks: [
+      'albums-shared',
+      'content-pages',
+      'content-writable',
+      'alt-text',
+      'legal',
+      'contact',
+      'privacy',
+      'settings-values',
+    ],
   },
 ];
 
@@ -65,9 +74,12 @@ const FIXES: Record<string, { label: string; href: string }> = {
   passwords: { label: 'Open settings', href: '/admin/settings/security' },
   'album-ids': { label: 'Open pages', href: '/admin/pages' },
   'albums-shared': { label: 'Open pages', href: '/admin/pages' },
+  'content-pages': { 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' },
+  // The href is replaced by the finding's own settingsSection.
+  'settings-values': { label: 'Open settings', href: '/admin/settings/general' },
   'content-writable': { label: 'How to fix', href: `${DOCS}/docs/admin-panel.md#docker-usage` },
   'immich-api': {
     label: 'API key permissions',
@@ -320,8 +332,12 @@ export default function DiagnosticsView() {
       }
       return null; // The photo list toggle is rendered separately.
     }
-    const fix = FIXES[id];
-    if (!fix) return null;
+    const known = FIXES[id];
+    if (!known) return null;
+    // A finding that knows which settings section holds its fix goes there.
+    const fix = f.settingsSection
+      ? { ...known, href: `/admin/settings/${f.settingsSection}` }
+      : known;
     return fix.href.startsWith('/') ? (
       <Link href={fix.href} className="admin-btn admin-btn-sm">
         {fix.label}
diff --git a/app/admin/components/EssayBlockEditor.tsx b/app/admin/components/EssayBlockEditor.tsx
index 16776a5..25f7e06 100644
--- a/app/admin/components/EssayBlockEditor.tsx
+++ b/app/admin/components/EssayBlockEditor.tsx
@@ -29,6 +29,7 @@ import {
   IconX,
 } from './Icons';
 import { BlockBadge } from './BlockBadge';
+import { InlineMarkdownField } from './InlineMarkdownField';
 
 interface EssayBlockEditorProps {
   markdown: string;
@@ -291,19 +292,17 @@ export function EssayBlockEditor({ markdown, onChange, onSelectPhoto }: EssayBlo
 
             {/* 2. PARAGRAPH BLOCK
 
-              The textarea shows `html` raw, as the journal editor does. It used
-              to strip the tags for display — `<strong>` to `**`, everything else
-              to nothing — while `onChange` wrote the stripped text straight back
-              into `html`. Italics, links, anything the markdown had produced was
-              destroyed by the act of editing the paragraph, and the two editors
-              disagreed about the same file. serializeJournalMarkdown() turns the
-              HTML back into markdown on save and handles `<em>` too, so there
-              was nothing to convert here in the first place. */}
+              The field shows the markdown source and writes the rendered HTML
+              back, as the journal editor does (InlineMarkdownField). An older
+              version stripped the tags for display and wrote the stripped text
+              straight back into `html`, destroying italics and links; the one
+              after that showed the raw HTML. */}
             {block.type === 'paragraph' && (
-              <textarea
+              <InlineMarkdownField
+                multiline
                 rows={3}
-                value={block.html}
-                onChange={(e) => handleUpdateBlock(idx, { ...block, html: e.target.value })}
+                html={block.html}
+                onChange={(html) => handleUpdateBlock(idx, { ...block, html })}
                 placeholder="Write text paragraph... (**bold**, *italic* markdown supported)"
               />
             )}
@@ -319,10 +318,11 @@ export function EssayBlockEditor({ markdown, onChange, onSelectPhoto }: EssayBlo
                   paddingLeft: '10px',
                 }}
               >
-                <textarea
+                <InlineMarkdownField
+                  multiline
                   rows={2}
-                  value={block.text}
-                  onChange={(e) => handleUpdateBlock(idx, { ...block, text: e.target.value })}
+                  html={block.text}
+                  onChange={(text) => handleUpdateBlock(idx, { ...block, text })}
                   placeholder="Quote text..."
                   style={{ fontStyle: 'italic', fontFamily: 'serif', fontSize: '1rem' }}
                 />
@@ -411,11 +411,10 @@ export function EssayBlockEditor({ markdown, onChange, onSelectPhoto }: EssayBlo
                   </div>
                 </div>
 
-                <input
-                  type="text"
-                  value={block.caption || ''}
-                  onChange={(e) =>
-                    handleUpdateBlock(idx, { ...block, caption: e.target.value || undefined })
+                <InlineMarkdownField
+                  html={block.caption}
+                  onChange={(caption) =>
+                    handleUpdateBlock(idx, { ...block, caption: caption || undefined })
                   }
                   placeholder="Photo caption (optional)"
                 />
@@ -573,11 +572,10 @@ export function EssayBlockEditor({ markdown, onChange, onSelectPhoto }: EssayBlo
                   </div>
                 </div>
 
-                <input
-                  type="text"
-                  value={block.caption || ''}
-                  onChange={(e) =>
-                    handleUpdateBlock(idx, { ...block, caption: e.target.value || undefined })
+                <InlineMarkdownField
+                  html={block.caption}
+                  onChange={(caption) =>
+                    handleUpdateBlock(idx, { ...block, caption: caption || undefined })
                   }
                   placeholder="Side-by-side caption (optional)"
                 />
@@ -693,11 +691,10 @@ export function EssayBlockEditor({ markdown, onChange, onSelectPhoto }: EssayBlo
                   <IconPlus size={12} /> Add photo
                 </button>
 
-                <input
-                  type="text"
-                  value={block.caption || ''}
-                  onChange={(e) =>
-                    handleUpdateBlock(idx, { ...block, caption: e.target.value || undefined })
+                <InlineMarkdownField
+                  html={block.caption}
+                  onChange={(caption) =>
+                    handleUpdateBlock(idx, { ...block, caption: caption || undefined })
                   }
                   placeholder="Grid caption (optional)"
                 />
@@ -729,16 +726,13 @@ export function EssayBlockEditor({ markdown, onChange, onSelectPhoto }: EssayBlo
                         })
                       }
                     />
-                    <input
-                      type="text"
-                      value={item.value}
+                    <InlineMarkdownField
+                      html={item.value}
                       placeholder="Value, e.g. 21 km"
-                      onChange={(e) =>
+                      onChange={(value) =>
                         handleUpdateBlock(idx, {
                           ...block,
-                          items: block.items.map((it, i) =>
-                            i === fIdx ? { ...it, value: e.target.value } : it,
-                          ),
+                          items: block.items.map((it, i) => (i === fIdx ? { ...it, value } : it)),
                         })
                       }
                     />
@@ -828,13 +822,12 @@ export function EssayBlockEditor({ markdown, onChange, onSelectPhoto }: EssayBlo
                     <option value="wide">Wide (one per row)</option>
                   </select>
                 </div>
-                <input
-                  type="text"
-                  value={block.caption || ''}
-                  placeholder="Caption for the set (optional)"
-                  onChange={(e) =>
-                    handleUpdateBlock(idx, { ...block, caption: e.target.value || undefined })
+                <InlineMarkdownField
+                  html={block.caption}
+                  onChange={(caption) =>
+                    handleUpdateBlock(idx, { ...block, caption: caption || undefined })
                   }
+                  placeholder="Caption for the set (optional)"
                 />
                 <span style={{ fontSize: '0.75rem', color: 'var(--admin-text-secondary)' }}>
                   Expanded into photo blocks when the page renders — the album&apos;s order, a
@@ -846,11 +839,10 @@ export function EssayBlockEditor({ markdown, onChange, onSelectPhoto }: EssayBlo
             {/* 8. MAP BLOCK */}
             {block.type === 'map' && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                <input
-                  type="text"
-                  value={block.caption || ''}
-                  onChange={(e) =>
-                    handleUpdateBlock(idx, { ...block, caption: e.target.value || undefined })
+                <InlineMarkdownField
+                  html={block.caption}
+                  onChange={(caption) =>
+                    handleUpdateBlock(idx, { ...block, caption: caption || undefined })
                   }
                   placeholder="Caption, e.g. Busan → Seoul (optional)"
                 />
diff --git a/app/admin/components/InlineMarkdownField.tsx b/app/admin/components/InlineMarkdownField.tsx
new file mode 100644
index 0000000..4894843
--- /dev/null
+++ b/app/admin/components/InlineMarkdownField.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { useState, type InputHTMLAttributes, type TextareaHTMLAttributes } from 'react';
+import { inlineHtmlToMarkdown, renderInlineMarkdown } from '@/lib/journal';
+
+type SharedProps = {
+  /**
+   * The block field as the parser stores it: HTML from renderInlineMarkdown
+   * (a paragraph's `html`, a quote's `text`, a caption, a fact value).
+   */
+  html: string | undefined;
+  /** Receives the field as HTML again, rendered from what was typed. */
+  onChange: (html: string) => void;
+};
+
+type InputProps = SharedProps & {
+  multiline?: false;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'>;
+
+type TextareaProps = SharedProps & {
+  multiline: true;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'>;
+
+/**
+ * A text field for an inline-markdown block field (A-5).
+ *
+ * Blocks hold rendered HTML, since that is what the public page and the live
+ * preview show. The editors used to put that HTML straight into the field: a
+ * reloaded entry showed `<strong>` and `<a href="…">` in the textarea, text
+ * typed into a tag was lost on save, and typed `**bold**` stayed literal in
+ * the preview until a save re-parsed the file.
+ *
+ * The field shows the markdown source instead and hands every edit back
+ * rendered, so the preview is right while typing and the serializer writes
+ * the same markdown for an untouched block. What was typed is kept as typed:
+ * deriving the field from the HTML on every keystroke would rewrite `__x__`
+ * to `**x**`, or drop a half-typed link, under the cursor. The field re-reads
+ * the HTML only when it changes from outside (markdown mode, a reorder, a
+ * restore).
+ */
+export function InlineMarkdownField(props: InputProps | TextareaProps) {
+  const html = props.html ?? '';
+  const [text, setText] = useState(() => inlineHtmlToMarkdown(html));
+  const [shownHtml, setShownHtml] = useState(html);
+  if (html !== shownHtml) {
+    setShownHtml(html);
+    setText(inlineHtmlToMarkdown(html));
+  }
+
+  const update = (next: string) => {
+    const nextHtml = renderInlineMarkdown(next);
+    setText(next);
+    setShownHtml(nextHtml);
+    props.onChange(nextHtml);
+  };
+
+  if (props.multiline) {
+    const { html: _html, onChange: _onChange, multiline: _multiline, ...rest } = props;
+    return <textarea {...rest} value={text} onChange={(e) => update(e.target.value)} />;
+  }
+  const { html: _html, onChange: _onChange, multiline: _multiline, ...rest } = props;
+  return <input type="text" {...rest} value={text} onChange={(e) => update(e.target.value)} />;
+}
diff --git a/app/admin/components/PageBuilder.tsx b/app/admin/components/PageBuilder.tsx
index b9e39bb..31eee88 100644
--- a/app/admin/components/PageBuilder.tsx
+++ b/app/admin/components/PageBuilder.tsx
@@ -24,7 +24,16 @@ 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 {
+  OffMenuDropZone,
+  SortableHeroTile,
+  SortablePageRow,
+  SortableSubpageRow,
+} from './page-builder/SortableTiles';
+import PagePanel from './page-builder/PagePanel';
+import { isValidSlug } from '@/lib/journal';
+import NewPageDialog from './page-builder/NewPageDialog';
+import type { PageSummary, SlugTakenBy } from '@/lib/pages';
 import { findAlbumAddress } from './page-builder/findAlbumAddress';
 import { parseGalleryYaml, serializeGallery, type GalleryState } from './page-builder/galleryYaml';
 import * as ops from './page-builder/galleryOps';
@@ -41,11 +50,22 @@ import {
 import { useScrollLock } from './useScrollLock';
 import { useUnsavedGuard } from './useUnsavedGuard';
 import { useDraft } from './useDraft';
+import { useLatest } from './useLatest';
+import { useVersionedSave } from './useVersionedSave';
+import type { GalleryVersionChange } from '@/lib/admin/pageRefs';
 import DraftNotice from './DraftNotice';
 import { reportIfSessionExpired } from './sessionExpiry';
 import { IconCamera, IconHome, IconPlus, IconSearch } from './Icons';
 import { useNotify } from './Notifications';
 
+/** Drop target id of the "Not in menu" group. */
+const OFF_MENU_ID = 'offmenu-zone';
+
+/** Sortable id of a menu row. Subpages keep their old `subpage-<index>` id. */
+function menuRowId(item: ops.MenuItem): string {
+  return item.kind === 'subpage' ? `subpage-${item.index}` : `page-${item.slug}`;
+}
+
 export default function PageBuilder() {
   const [gallery, setGallery] = useState<GalleryState>({ hero: [], albums: [], subpages: [] });
   const notify = useNotify();
@@ -79,6 +99,21 @@ export default function PageBuilder() {
   /** Album a `?album=` link pointed at, marked in its subpage sheet for a moment. */
   const [linkedAlbumId, setLinkedAlbumId] = useState<string | null>(null);
 
+  // ── Content pages (#722) ──
+  /** Every page file; the menu itself lives in `gallery.pageRefs`. */
+  const [pages, setPages] = useState<PageSummary[]>([]);
+  const [takenSlugs, setTakenSlugs] = useState<SlugTakenBy>({
+    subpages: [],
+    albums: [],
+    journal: [],
+  });
+  /** The page shown in the panel; exclusive with `expandedSubpage`. */
+  const [selectedPage, setSelectedPage] = useState<string | null>(null);
+  const [showNewPage, setShowNewPage] = useState(false);
+  const [creatingPage, setCreatingPage] = useState(false);
+  /** The edit panel beside (or, on narrow screens, below) the structure list. */
+  const panelRef = useRef<HTMLDivElement>(null);
+
   // 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.
@@ -121,7 +156,12 @@ export default function PageBuilder() {
   // Unsaved edits survive leaving the builder — a tab link, back, Reload,
   // Logout (#592). `serverState` is what a discard goes back to.
   const draft = useDraft<GalleryState>('page-builder', gallery, dirty);
+  /** The tree as last rendered: tells a finished save whether editing went on meanwhile. */
+  const latestGallery = useLatest(gallery);
   const serverState = useRef<GalleryState | null>(null);
+  /** gallery.yaml as loaded, sent back on save so a change elsewhere is caught (#601). */
+  const versionRef = useRef<string | null>(null);
+  const versionedSave = useVersionedSave();
 
   // A subpage opened from a `?album=` link can hold dozens of albums: bring the
   // linked one into view, and let the mark fade after a moment. The mark itself
@@ -147,9 +187,10 @@ export default function PageBuilder() {
     setLoading(true);
     setLoadError(null);
     try {
-      const [galleryRes, albumsRes] = await Promise.all([
+      const [galleryRes, albumsRes, pagesRes] = await Promise.all([
         fetch('/api/admin/gallery'),
         fetch('/api/admin/albums'),
+        fetch('/api/admin/pages'),
       ]);
 
       if (!galleryRes.ok) {
@@ -160,7 +201,8 @@ export default function PageBuilder() {
         );
       }
 
-      const { gallery: raw } = await galleryRes.json();
+      const { gallery: raw, version } = await galleryRes.json();
+      versionRef.current = typeof version === 'string' ? version : null;
       const parsed = parseGalleryYaml(raw);
       serverState.current = parsed;
       const restored = draft.load(JSON.stringify(parsed));
@@ -176,6 +218,15 @@ export default function PageBuilder() {
         const { albums } = await albumsRes.json();
         setImmichAlbums(albums);
       }
+
+      // Pages are survivable the same way: without the list the menu still
+      // shows their references, and saving keeps them.
+      if (pagesRes.ok) {
+        const data = (await pagesRes.json()) as { pages: PageSummary[]; taken: SlugTakenBy };
+        setPages(data.pages);
+        setTakenSlugs(data.taken);
+      }
+      openPageFromLink();
     } catch (err) {
       console.error('Failed to load admin data:', err);
       setLoadError(err instanceof Error ? err.message : 'The page structure could not be loaded.');
@@ -213,6 +264,21 @@ export default function PageBuilder() {
     }
   }
 
+  /** `?page=<slug>` selects a page — the page editor's back link uses it. One-shot. */
+  function openPageFromLink() {
+    const params = new URLSearchParams(window.location.search);
+    const slug = params.get('page');
+    if (slug === null) return;
+    params.delete('page');
+    const query = params.toString();
+    window.history.replaceState(null, '', window.location.pathname + (query ? `?${query}` : ''));
+    // The slug comes from the address bar and becomes the page's live link, so
+    // only a real page slug may select a page — `//host` would leave the site.
+    if (!isValidSlug(slug)) return;
+    setExpandedSubpage(null);
+    setSelectedPage(slug);
+  }
+
   function discardDraft() {
     draft.discard();
     if (serverState.current) setGallery(serverState.current);
@@ -240,17 +306,24 @@ export default function PageBuilder() {
     setSaving(true);
     setSaveStatus(null);
 
-    const yamlData = serializeGallery(gallery);
+    const sent = gallery;
+    const yamlData = serializeGallery(sent);
 
     try {
-      const res = await fetch('/api/admin/gallery', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ gallery: yamlData }),
-      });
+      const result = await versionedSave(
+        '/api/admin/gallery',
+        { gallery: yamlData },
+        versionRef,
+        'The page structure (gallery.yaml)',
+      );
 
-      if (res.ok) {
-        const data = await res.json();
+      if (result.kind === 'reload') {
+        draft.discard();
+        await loadData();
+      } else if (result.kind === 'keep') {
+        setSaveStatus({ kind: 'error', message: 'Not saved — gallery.yaml changed elsewhere.' });
+      } else if (result.kind === 'saved') {
+        const data = result.data as { gallery?: unknown; message?: string };
         // Fingerprint what the next load will see, the way it will see it: the
         // 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
@@ -262,15 +335,22 @@ export default function PageBuilder() {
         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);
+        // Edited while the request was out: those edits are not saved yet, so
+        // they stay dirty and are not replaced by the file as written.
+        const editedMeanwhile = latestGallery.current !== sent;
+        draft.saved(JSON.stringify(asLoaded), editedMeanwhile);
+        if (!editedMeanwhile) {
+          // Show the hashes, so a new password reads "Protected" right away.
+          if (JSON.stringify(written) !== JSON.stringify(yamlData)) setGallery(asLoaded);
+          setDirty(false);
+        }
         setSaveStatus({ kind: 'success', message: data.message || 'Saved successfully!' });
         setTimeout(() => setSaveStatus(null), 5000);
-      } else if (!reportIfSessionExpired(res)) {
-        const err = await res.json();
-        setSaveStatus({ kind: 'error', message: `Error: ${err.error}` });
+      } else if (!reportIfSessionExpired(result.res)) {
+        setSaveStatus({
+          kind: 'error',
+          message: `Error: ${result.data?.error ?? `HTTP ${result.res.status}`}`,
+        });
       }
     } catch {
       setSaveStatus({ kind: 'error', message: 'Error: Failed to save' });
@@ -286,8 +366,8 @@ export default function PageBuilder() {
   }
 
   // ── Pickers ──────────────────────────────────────────────────
-  function handleHeroSelect(assetId: string) {
-    edit((g) => ops.addHero(g, assetId));
+  function handleHeroSelectMany(assetIds: string[]) {
+    edit((g) => ops.addHeroes(g, assetIds));
     setHeroPickerTarget(null);
   }
 
@@ -322,17 +402,158 @@ export default function PageBuilder() {
     }
   }
 
-  function handleSubpageDragEnd(event: DragEndEvent) {
+  /**
+   * The menu list holds subpages and pages in one order (#722). A page can
+   * also be dragged into or out of "Not in menu", which toggles its "Show in
+   * menu" switch.
+   */
+  function handleMenuDragEnd(event: DragEndEvent) {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    const items = ops.menuItems(gallery);
+    const rowIndex = (id: string) => items.findIndex((item) => menuRowId(item) === id);
+    const overOffMenu = overId === OFF_MENU_ID || overId.startsWith('off-');
 
-    const oldIndex = gallery.subpages.findIndex((_, i) => `subpage-${i}` === active.id);
-    const newIndex = gallery.subpages.findIndex((_, i) => `subpage-${i}` === over.id);
-
-    if (oldIndex !== -1 && newIndex !== -1) {
-      edit((g) => ops.moveSubpage(g, oldIndex, newIndex));
-      setExpandedSubpage(ops.followMovedIndex(expandedSubpage, oldIndex, newIndex));
+    if (activeId.startsWith('off-')) {
+      if (overOffMenu) return;
+      const at = rowIndex(overId);
+      if (at === -1) return;
+      const slug = activeId.slice('off-'.length);
+      edit((g) => ops.setPageInMenu(g, slug, true, at));
+      return;
     }
+
+    const from = rowIndex(activeId);
+    if (from === -1) return;
+    if (overOffMenu) {
+      const item = items[from];
+      if (item.kind === 'page') edit((g) => ops.setPageInMenu(g, item.slug, false));
+      return;
+    }
+    const to = rowIndex(overId);
+    if (to === -1) return;
+    setExpandedSubpage(ops.followMenuMove(gallery, expandedSubpage, from, to));
+    edit((g) => ops.moveMenuItem(g, from, to));
+  }
+
+  // ── Content pages ────────────────────────────────────────────
+  function selectPage(slug: string) {
+    setExpandedSubpage(null);
+    setLinkedAlbumId(null);
+    setSelectedPage(slug);
+    revealPanel();
+  }
+
+  function selectSubpage(index: number) {
+    setSelectedPage(null);
+    setExpandedSubpage(index);
+    revealPanel();
+  }
+
+  function selectOverview(which: 'hero' | 'albums') {
+    setExpandedSubpage(null);
+    setSelectedPage(null);
+    setOverview(which);
+    revealPanel();
+  }
+
+  /**
+   * Below 1100px the panel stacks under the structure list, so on a phone a
+   * tapped row changed something a screen further down and looked like it
+   * did nothing. Scroll the panel up once it has rendered.
+   */
+  function revealPanel() {
+    if (!window.matchMedia?.('(max-width: 1100px)').matches) return;
+    requestAnimationFrame(() => {
+      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      panelRef.current?.scrollIntoView({ block: 'start', behavior: reduce ? 'auto' : 'smooth' });
+    });
+  }
+
+  const togglePageMenu = (slug: string) =>
+    edit((g) => ops.setPageInMenu(g, slug, !ops.isPageInMenu(g, slug)));
+
+  /**
+   * gallery.yaml was changed on the server by a page rename or delete. The
+   * same change goes into the builder's state and into what it considers
+   * saved, so neither a pending edit nor the draft check trips over it.
+   */
+  function applyServerMenuChange(
+    op: (g: GalleryState) => GalleryState,
+    change?: GalleryVersionChange | null,
+  ) {
+    setGallery(op);
+    // Follow the rewrite only when it was the sole change since this editor
+    // loaded; otherwise the old version stays and the next save asks (#601).
+    if (change && versionRef.current === change.from) versionRef.current = change.to;
+    if (serverState.current) {
+      serverState.current = op(serverState.current);
+      draft.saved(JSON.stringify(serverState.current));
+    }
+  }
+
+  async function createPage(input: { title: string; slug: string; showInMenu: boolean }) {
+    setCreatingPage(true);
+    try {
+      const res = await fetch('/api/admin/pages', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title: input.title, slug: input.slug }),
+      });
+      const data = await res.json().catch(() => null);
+      if (!res.ok) {
+        if (!reportIfSessionExpired(res))
+          notify('error', data?.error || 'Failed to create the page');
+        return;
+      }
+      const slug: string = data.page.slug;
+      setPages((prev) => [
+        ...prev.filter((p) => p.slug !== slug),
+        { slug, frontmatter: { title: input.title, draft: true } },
+      ]);
+      if (input.showInMenu) edit((g) => ops.setPageInMenu(g, slug, true));
+      setShowNewPage(false);
+      selectPage(slug);
+      notify(
+        'success',
+        input.showInMenu
+          ? 'Page created as a draft. Save Changes to put it in the menu.'
+          : 'Page created as a draft.',
+      );
+    } catch {
+      notify('error', 'Could not create the page. Check the connection and try again.');
+    } finally {
+      setCreatingPage(false);
+    }
+  }
+
+  function handlePageSaved(
+    oldSlug: string,
+    page: PageSummary,
+    menuRenamed: boolean,
+    galleryVersion?: GalleryVersionChange | null,
+  ) {
+    setPages((prev) => [...prev.filter((p) => p.slug !== oldSlug), page]);
+    if (page.slug !== oldSlug) {
+      const rename = (g: GalleryState) => ops.renamePageRef(g, oldSlug, page.slug);
+      if (menuRenamed) applyServerMenuChange(rename, galleryVersion);
+      else setGallery(rename);
+      setSelectedPage(page.slug);
+    }
+  }
+
+  function handlePageDeleted(
+    slug: string,
+    removedFromMenu: boolean,
+    galleryVersion?: GalleryVersionChange | null,
+  ) {
+    setPages((prev) => prev.filter((p) => p.slug !== slug));
+    const remove = (g: GalleryState) => ops.setPageInMenu(g, slug, false);
+    if (removedFromMenu) applyServerMenuChange(remove, galleryVersion);
+    else setGallery(remove);
+    setSelectedPage(null);
   }
 
   function handleSubpageAlbumDragEnd(spIndex: number) {
@@ -510,6 +731,16 @@ export default function PageBuilder() {
     );
   });
 
+  // The menu: subpages and pages in saved order (#722). Search filters it.
+  const pageBySlug = new Map(pages.map((p) => [p.slug, p]));
+  const pageTitle = (slug: string) => pageBySlug.get(slug)?.frontmatter.title || slug;
+  const query = searchQuery.toLowerCase();
+  const pageMatches = (slug: string) =>
+    !searchQuery || slug.includes(query) || pageTitle(slug).toLowerCase().includes(query);
+  const offMenuPages = pages
+    .filter((p) => !ops.isPageInMenu(gallery, p.slug) && pageMatches(p.slug))
+    .sort((a, b) => pageTitle(a.slug).localeCompare(pageTitle(b.slug)));
+
   // Filter subpages
   const filteredSubpages = gallery.subpages
     .map((sp, index) => ({ sp, index }))
@@ -537,6 +768,12 @@ export default function PageBuilder() {
 
       return hasMatchingAlbum;
     });
+  const shownSubpages = new Set(filteredSubpages.map(({ index }) => index));
+  const menuRows = ops
+    .menuItems(gallery)
+    .filter((item) =>
+      item.kind === 'subpage' ? shownSubpages.has(item.index) : pageMatches(item.slug),
+    );
 
   return (
     <div className="page-builder">
@@ -593,10 +830,7 @@ export default function PageBuilder() {
             <button
               type="button"
               className={`pb-row-main pb-row-solo ${expandedSubpage === null && overview === 'hero' ? 'active' : ''}`}
-              onClick={() => {
-                setExpandedSubpage(null);
-                setOverview('hero');
-              }}
+              onClick={() => selectOverview('hero')}
             >
               <span className="pb-row-thumb">
                 {gallery.hero[0] ? (
@@ -610,49 +844,102 @@ export default function PageBuilder() {
             </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}
-            >
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleMenuDragEnd}
+          >
+            <div className="pb-group">
+              <div className="pb-group-head">
+                <span>Menu</span>
+                <span>
+                  {gallery.subpages.filter((sp) => sp.enabled !== false).length} of{' '}
+                  {gallery.subpages.length} subpages live
+                </span>
+              </div>
+              {(gallery.subpages.length > 0 || (gallery.pageRefs ?? []).length > 0) &&
+                menuRows.length === 0 && <p className="empty-hint">No matching entries.</p>}
               <SortableContext
-                items={filteredSubpages.map(({ index }) => `subpage-${index}`)}
+                items={menuRows.map(menuRowId)}
                 strategy={verticalListSortingStrategy}
               >
-                {filteredSubpages.map(({ sp, index }) => (
-                  <SortableSubpageRow
-                    key={`subpage-${index}`}
-                    sp={sp}
-                    spIndex={index}
-                    isActive={expandedSubpage === index}
-                    onClick={() => setExpandedSubpage(index)}
-                    getFirstThumb={getFirstSubpageThumb}
-                  />
-                ))}
+                {menuRows.map((item) => {
+                  if (item.kind === 'subpage') {
+                    const sp = gallery.subpages[item.index];
+                    return (
+                      <SortableSubpageRow
+                        key={menuRowId(item)}
+                        sp={sp}
+                        spIndex={item.index}
+                        isActive={expandedSubpage === item.index}
+                        onClick={() => selectSubpage(item.index)}
+                        getFirstThumb={getFirstSubpageThumb}
+                      />
+                    );
+                  }
+                  const page = pageBySlug.get(item.slug);
+                  return (
+                    <SortablePageRow
+                      key={menuRowId(item)}
+                      id={menuRowId(item)}
+                      title={pageTitle(item.slug)}
+                      isActive={selectedPage === item.slug}
+                      draft={page?.frontmatter.draft}
+                      hasPassword={!!page?.frontmatter.password}
+                      // Only once the list has loaded: an empty list is not proof.
+                      missing={pages.length > 0 && !page}
+                      onClick={() => selectPage(item.slug)}
+                    />
+                  );
+                })}
               </SortableContext>
-            </DndContext>
-            <button
-              type="button"
-              className="pb-add"
-              onClick={() => {
-                addSubpage();
-                setExpandedSubpage(gallery.subpages.length);
-              }}
-            >
-              <IconPlus size={13} /> New subpage
-            </button>
-          </div>
+              <div className="pb-add-row">
+                <button
+                  type="button"
+                  className="pb-add"
+                  onClick={() => {
+                    addSubpage();
+                    selectSubpage(gallery.subpages.length);
+                  }}
+                >
+                  <IconPlus size={13} /> New subpage
+                </button>
+                <button type="button" className="pb-add" onClick={() => setShowNewPage(true)}>
+                  <IconPlus size={13} /> New page
+                </button>
+              </div>
+            </div>
+
+            <div className="pb-group">
+              <div className="pb-group-head">
+                <span>Not in menu</span>
+                <span>{offMenuPages.length}</span>
+              </div>
+              <OffMenuDropZone id={OFF_MENU_ID}>
+                <SortableContext
+                  items={offMenuPages.map((p) => `off-${p.slug}`)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  {offMenuPages.map((p) => (
+                    <SortablePageRow
+                      key={`off-${p.slug}`}
+                      id={`off-${p.slug}`}
+                      title={pageTitle(p.slug)}
+                      isActive={selectedPage === p.slug}
+                      draft={p.frontmatter.draft}
+                      hasPassword={!!p.frontmatter.password}
+                      onClick={() => selectPage(p.slug)}
+                    />
+                  ))}
+                </SortableContext>
+                {offMenuPages.length === 0 && (
+                  <p className="empty-hint">
+                    Pages reachable only by their link. Drag a page here to take it out of the menu.
+                  </p>
+                )}
+              </OffMenuDropZone>
+            </div>
+          </DndContext>
 
           <div className="pb-group">
             <div className="pb-group-head">
@@ -661,10 +948,7 @@ export default function PageBuilder() {
             <button
               type="button"
               className={`pb-row-main pb-row-solo ${expandedSubpage === null && overview === 'albums' ? 'active' : ''}`}
-              onClick={() => {
-                setExpandedSubpage(null);
-                setOverview('albums');
-              }}
+              onClick={() => selectOverview('albums')}
             >
               <span className="pb-row-thumb">
                 <IconCamera size={14} />
@@ -676,8 +960,19 @@ export default function PageBuilder() {
         </aside>
 
         {/* The selected entry, edited in place instead of in an overlay. */}
-        <div className="pb-panel">
-          {expandedSubpage !== null && gallery.subpages[expandedSubpage] ? (
+        <div className="pb-panel" ref={panelRef}>
+          {selectedPage !== null ? (
+            <PagePanel
+              key={selectedPage}
+              slug={selectedPage}
+              inMenu={ops.isPageInMenu(gallery, selectedPage)}
+              onToggleMenu={() => togglePageMenu(selectedPage)}
+              taken={takenSlugs}
+              otherPageSlugs={pages.map((p) => p.slug).filter((s) => s !== selectedPage)}
+              onSaved={handlePageSaved}
+              onDeleted={handlePageDeleted}
+            />
+          ) : expandedSubpage !== null && gallery.subpages[expandedSubpage] ? (
             <>
               <SubpageDrawer
                 sp={gallery.subpages[expandedSubpage]}
@@ -782,9 +1077,9 @@ export default function PageBuilder() {
                     className="admin-btn admin-btn-sm"
                     onClick={() =>
                       setHeroPickerTarget({
-                        onSelect: handleHeroSelect,
+                        onSelectMany: handleHeroSelectMany,
                         currentAssetIds: gallery.hero,
-                        title: 'Pick Hero Image for Homepage',
+                        title: 'Pick Hero Images for Homepage',
                       })
                     }
                   >
@@ -824,6 +1119,16 @@ export default function PageBuilder() {
         </div>
       </div>
 
+      {showNewPage && (
+        <NewPageDialog
+          taken={takenSlugs}
+          existingPageSlugs={pages.map((p) => p.slug)}
+          creating={creatingPage}
+          onCreate={createPage}
+          onClose={() => setShowNewPage(false)}
+        />
+      )}
+
       {/* Album Picker Modal */}
       {pickerTarget && (
         <AlbumPicker
@@ -855,6 +1160,7 @@ export default function PageBuilder() {
         <AssetPicker
           albumId={heroPickerTarget.albumId}
           onSelect={heroPickerTarget.onSelect}
+          onSelectMany={heroPickerTarget.onSelectMany}
           onClose={() => setHeroPickerTarget(null)}
           currentAssetIds={heroPickerTarget.currentAssetIds}
           title={heroPickerTarget.title}
diff --git a/app/admin/components/PrivacyEditor.tsx b/app/admin/components/PrivacyEditor.tsx
index febfd0d..ab92447 100644
--- a/app/admin/components/PrivacyEditor.tsx
+++ b/app/admin/components/PrivacyEditor.tsx
@@ -11,10 +11,15 @@
  * key in settings.yaml.
  */
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import * as Icons from './Icons';
 import { reportIfSessionExpired } from './sessionExpiry';
 import { useUnsavedGuard } from './useUnsavedGuard';
+import { useContentRestored } from './contentRestored';
+import { useVersionedSave } from './useVersionedSave';
+import { useLatest } from './useLatest';
+import { useDraft } from './useDraft';
+import DraftNotice from './DraftNotice';
 import type { ProcessingFact } from '@/lib/privacy';
 
 interface PrivacyData {
@@ -22,6 +27,7 @@ interface PrivacyData {
   enabled: boolean;
   facts: ProcessingFact[];
   starter: string;
+  version?: string;
 }
 
 type Status = { kind: 'success' | 'error'; message: string } | null;
@@ -35,44 +41,80 @@ export default function PrivacyEditor() {
   const [status, setStatus] = useState<Status>(null);
 
   useUnsavedGuard(dirty);
+  // The editor lives in the Legal section and unmounts when another section
+  // opens; without a draft an unsaved policy was simply gone (#554, #592).
+  const draft = useDraft<string>('privacy', body, dirty);
+  const loadDraft = draft.load;
+
+  /** privacy.md as loaded, sent back on save so a change elsewhere is caught (#601). */
+  const versionRef = useRef<string | null>(null);
+  const versionedSave = useVersionedSave();
+  /** The text as last rendered: tells a finished save whether typing went on meanwhile. */
+  const latestBody = useLatest(body);
+  const dirtyRef = useRef(dirty);
+  useEffect(() => {
+    dirtyRef.current = dirty;
+  });
+
+  const load = useCallback(async (): Promise<void> => {
+    try {
+      const res = await fetch('/api/admin/privacy');
+      if (!res.ok) {
+        reportIfSessionExpired(res);
+        throw new Error(`HTTP ${res.status}`);
+      }
+      const d = (await res.json()) as PrivacyData;
+      versionRef.current = d.version ?? null;
+      setData(d);
+      const restored = loadDraft(d.body);
+      setBody(restored ?? d.body);
+      setDirty(restored !== null);
+    } catch (err) {
+      setLoadError(err instanceof Error ? err.message : 'Could not load.');
+    }
+  }, [loadDraft]);
 
   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;
-    };
-  }, []);
+    void load();
+  }, [load]);
+
+  // A restored privacy.md replaces what this editor shows — unless there are
+  // unsaved edits, which stay; their save then meets the conflict prompt.
+  useContentRestored(({ target }) => {
+    if (target === 'privacy' && !dirtyRef.current) void load();
+  });
 
   async function save() {
     setSaving(true);
     setStatus(null);
+    const sent = body;
     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}).` });
+      const result = await versionedSave(
+        '/api/admin/privacy',
+        { body: sent },
+        versionRef,
+        'The privacy policy',
+      );
+      if (result.kind === 'reload') {
+        draft.discard();
+        await load();
+        return;
+      }
+      if (result.kind === 'keep') {
+        setStatus({ kind: 'error', message: 'Not saved — the policy changed elsewhere.' });
+        return;
+      }
+      if (result.kind === 'failed') {
+        if (!reportIfSessionExpired(result.res)) {
+          setStatus({ kind: 'error', message: `Could not save (HTTP ${result.res.status}).` });
         }
         return;
       }
-      setDirty(false);
+      // Typed while the request was out: that part is not saved yet.
+      const editedMeanwhile = latestBody.current !== sent;
+      setData((d) => (d ? { ...d, body: sent } : d));
+      draft.saved(sent, editedMeanwhile);
+      if (!editedMeanwhile) setDirty(false);
       setStatus({ kind: 'success', message: 'Privacy policy saved.' });
     } catch {
       setStatus({ kind: 'error', message: 'Could not reach the server.' });
@@ -99,6 +141,24 @@ export default function PrivacyEditor() {
 
   return (
     <div className="privacy-editor">
+      <DraftNotice
+        status={draft.status}
+        subject="privacy policy"
+        onDiscard={() => {
+          draft.discard();
+          setBody(data.body);
+          setDirty(false);
+          setStatus(null);
+        }}
+        onRestore={() => {
+          const value = draft.takeConflicting();
+          if (value === null) return;
+          setBody(value);
+          setDirty(true);
+        }}
+        onDismiss={draft.dismiss}
+      />
+
       <div className="privacy-editor__facts">
         <h4>What this site processes</h4>
         <p className="admin-field-hint">
diff --git a/app/admin/components/ProofingView.tsx b/app/admin/components/ProofingView.tsx
new file mode 100644
index 0000000..3c467bd
--- /dev/null
+++ b/app/admin/components/ProofingView.tsx
@@ -0,0 +1,468 @@
+'use client';
+
+/**
+ * Admin → Proofing: client links, their selections and the export.
+ *
+ * One card per link. Creating a link picks a client name and an album — any
+ * Immich album, published or not — plus optional expiry and download rights.
+ * A card expands into the selected photos and the export buttons.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import PageHeader from './PageHeader';
+import * as Icons from './Icons';
+import { reportIfSessionExpired } from './sessionExpiry';
+import type { AdminProofPick, AdminProofSession } from '@/lib/admin/proofing-view';
+
+interface AlbumOption {
+  id: string;
+  albumName: string;
+  assetCount: number;
+}
+
+type Download = AdminProofSession['download'];
+
+const STATE_LABEL: Record<AdminProofSession['state'], string> = {
+  open: 'Open',
+  submitted: 'Submitted',
+  expired: 'Expired',
+};
+
+const DOWNLOAD_LABEL: Record<Download, string> = {
+  none: 'No downloads',
+  selection: 'Selection as ZIP',
+  album: 'Whole album as ZIP',
+};
+
+function formatDate(iso: string | null): string {
+  if (!iso) return '—';
+  const date = iso.length === 10 ? new Date(`${iso}T12:00:00`) : new Date(iso);
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+async function api<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(url, init);
+  if (reportIfSessionExpired(res)) throw new Error('Session expired');
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error((data as { error?: string }).error || `HTTP ${res.status}`);
+  return data as T;
+}
+
+function CreateForm({ onCreated }: { onCreated: () => void }) {
+  const [albums, setAlbums] = useState<AlbumOption[] | null>(null);
+  const [clientName, setClientName] = useState('');
+  const [albumId, setAlbumId] = useState('');
+  const [expiresOn, setExpiresOn] = useState('');
+  const [download, setDownload] = useState<Download>('none');
+  const [limit, setLimit] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api<{ albums: AlbumOption[] }>('/api/admin/albums')
+      .then((data) =>
+        setAlbums([...data.albums].sort((a, b) => a.albumName.localeCompare(b.albumName))),
+      )
+      .catch((err: Error) => setError(err.message));
+  }, []);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await api('/api/admin/proofing', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          clientName,
+          albumId,
+          expiresOn: expiresOn || null,
+          download,
+          downloadLimit: download !== 'none' && limit ? Number(limit) : null,
+        }),
+      });
+      setClientName('');
+      setAlbumId('');
+      setExpiresOn('');
+      setDownload('none');
+      setLimit('');
+      onCreated();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <form className="analytics-panel proofing-create" onSubmit={submit}>
+      <div className="analytics-section-title">
+        <h3>
+          <Icons.IconPlus size={16} /> New client link
+        </h3>
+      </div>
+      <div className="proofing-create-grid">
+        <div className="admin-field">
+          <label htmlFor="proof-client">Client</label>
+          <input
+            id="proof-client"
+            value={clientName}
+            onChange={(e) => setClientName(e.target.value)}
+            placeholder="Anna & Ben"
+            maxLength={120}
+            required
+          />
+        </div>
+        <div className="admin-field">
+          <label htmlFor="proof-album">Album</label>
+          <select
+            id="proof-album"
+            value={albumId}
+            onChange={(e) => setAlbumId(e.target.value)}
+            required
+            disabled={!albums}
+          >
+            <option value="">{albums ? 'Choose an Immich album…' : 'Loading albums…'}</option>
+            {albums?.map((album) => (
+              <option key={album.id} value={album.id}>
+                {album.albumName} ({album.assetCount})
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="admin-field">
+          <label htmlFor="proof-expires">Valid until (optional)</label>
+          <input
+            id="proof-expires"
+            type="date"
+            value={expiresOn}
+            onChange={(e) => setExpiresOn(e.target.value)}
+          />
+        </div>
+        <div className="admin-field">
+          <label htmlFor="proof-download">Downloads</label>
+          <select
+            id="proof-download"
+            value={download}
+            onChange={(e) => setDownload(e.target.value as Download)}
+          >
+            {(Object.keys(DOWNLOAD_LABEL) as Download[]).map((key) => (
+              <option key={key} value={key}>
+                {DOWNLOAD_LABEL[key]}
+              </option>
+            ))}
+          </select>
+        </div>
+        {download !== 'none' && (
+          <div className="admin-field">
+            <label htmlFor="proof-limit">Download limit (optional)</label>
+            <input
+              id="proof-limit"
+              type="number"
+              min={1}
+              max={1000}
+              value={limit}
+              onChange={(e) => setLimit(e.target.value)}
+              placeholder="Unlimited"
+            />
+          </div>
+        )}
+      </div>
+      {error && <p className="admin-error">{error}</p>}
+      <div>
+        <button
+          type="submit"
+          className="admin-btn admin-btn-primary"
+          disabled={busy || !clientName.trim() || !albumId}
+        >
+          <Icons.IconLink size={14} /> {busy ? 'Creating…' : 'Create link'}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function SessionCard({
+  session,
+  expanded,
+  onToggle,
+  onChanged,
+}: {
+  session: AdminProofSession;
+  expanded: boolean;
+  onToggle: () => void;
+  onChanged: () => void;
+}) {
+  const [picks, setPicks] = useState<AdminProofPick[] | null>(null);
+  const [copied, setCopied] = useState<'link' | 'lightroom' | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const linkUrl = typeof window !== 'undefined' ? `${window.location.origin}${session.link}` : '';
+
+  useEffect(() => {
+    if (!expanded) return;
+    api<{ picks: AdminProofPick[] }>(`/api/admin/proofing/${session.id}`)
+      .then((data) => setPicks(data.picks))
+      .catch((err: Error) => setError(err.message));
+  }, [expanded, session.id, session.selected, session.submittedAt]);
+
+  const copy = (kind: 'link' | 'lightroom', text: string) => {
+    if (!navigator.clipboard) {
+      window.prompt('Copy:', text);
+      return;
+    }
+    navigator.clipboard.writeText(text).then(
+      () => {
+        setCopied(kind);
+        setTimeout(() => setCopied(null), 2000);
+      },
+      () => window.prompt('Copy:', text),
+    );
+  };
+
+  const patch = async (body: Record<string, unknown>) => {
+    setError(null);
+    try {
+      await api(`/api/admin/proofing/${session.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+
+  const remove = async () => {
+    if (!window.confirm(`Delete the link for ${session.clientName}? It stops working at once.`)) {
+      return;
+    }
+    try {
+      await api(`/api/admin/proofing/${session.id}`, { method: 'DELETE' });
+      onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+
+  const copyLightroom = async () => {
+    try {
+      const res = await fetch(`/api/admin/proofing/${session.id}/export?format=lightroom`);
+      if (reportIfSessionExpired(res)) return;
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      copy('lightroom', await res.text());
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+
+  const downloadsText =
+    session.download === 'none'
+      ? DOWNLOAD_LABEL.none
+      : `${DOWNLOAD_LABEL[session.download]} · ${session.downloadsUsed}${
+          session.downloadLimit !== null ? ` / ${session.downloadLimit}` : ''
+        } used`;
+
+  return (
+    <div className={`analytics-panel proofing-card proofing-card--${session.state}`}>
+      <div className="proofing-card-head">
+        <div>
+          <h3 className="proofing-card-title">
+            {session.clientName}
+            <span className={`proofing-badge proofing-badge--${session.state}`}>
+              {STATE_LABEL[session.state]}
+            </span>
+          </h3>
+          <p className="analytics-subtitle">
+            {session.albumName ?? 'Album not found in Immich'} · {session.selected}
+            {session.albumAssetCount !== null ? ` of ${session.albumAssetCount}` : ''} selected ·
+            created {formatDate(session.createdAt)}
+            {session.expiresOn ? ` · valid until ${formatDate(session.expiresOn)}` : ''}
+          </p>
+          <p className="analytics-subtitle">
+            {downloadsText}
+            {session.submittedAt ? ` · submitted ${formatDate(session.submittedAt)}` : ''}
+          </p>
+        </div>
+        <div className="proofing-card-actions">
+          <button
+            type="button"
+            className="admin-btn admin-btn-ghost admin-btn-sm"
+            onClick={() => copy('link', linkUrl)}
+          >
+            {copied === 'link' ? <Icons.IconCheck size={14} /> : <Icons.IconCopy size={14} />}{' '}
+            {copied === 'link' ? 'Copied' : 'Copy link'}
+          </button>
+          <a
+            className="admin-btn admin-btn-ghost admin-btn-sm"
+            href={session.link}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Icons.IconEye size={14} /> Open
+          </a>
+          <button
+            type="button"
+            className="admin-btn admin-btn-ghost admin-btn-sm"
+            onClick={onToggle}
+            aria-expanded={expanded}
+          >
+            {expanded ? <Icons.IconChevronUp size={14} /> : <Icons.IconChevronDown size={14} />}{' '}
+            Selection
+          </button>
+        </div>
+      </div>
+
+      {error && <p className="admin-error">{error}</p>}
+
+      {expanded && (
+        <div className="proofing-card-body">
+          <div className="proofing-card-actions">
+            <button
+              type="button"
+              className="admin-btn admin-btn-primary admin-btn-sm"
+              onClick={copyLightroom}
+              disabled={session.selected === 0}
+              title="File names without extension, comma-separated — paste into Lightroom's or Capture One's filename filter to find the RAW files too"
+            >
+              {copied === 'lightroom' ? (
+                <Icons.IconCheck size={14} />
+              ) : (
+                <Icons.IconCopy size={14} />
+              )}{' '}
+              {copied === 'lightroom' ? 'Copied' : 'Copy file names (Lightroom)'}
+            </button>
+            <a
+              className="admin-btn admin-btn-ghost admin-btn-sm"
+              href={`/api/admin/proofing/${session.id}/export?format=csv`}
+            >
+              <Icons.IconFileText size={14} /> CSV
+            </a>
+            <a
+              className="admin-btn admin-btn-ghost admin-btn-sm"
+              href={`/api/admin/proofing/${session.id}/export?format=txt`}
+            >
+              <Icons.IconFileText size={14} /> TXT
+            </a>
+            {session.submittedAt && (
+              <button
+                type="button"
+                className="admin-btn admin-btn-ghost admin-btn-sm"
+                onClick={() => patch({ reopen: true })}
+              >
+                <Icons.IconRefresh size={14} /> Reopen for changes
+              </button>
+            )}
+            {session.download !== 'none' && session.downloadsUsed > 0 && (
+              <button
+                type="button"
+                className="admin-btn admin-btn-ghost admin-btn-sm"
+                onClick={() => patch({ resetDownloads: true })}
+              >
+                <Icons.IconRefresh size={14} /> Reset downloads
+              </button>
+            )}
+            <button
+              type="button"
+              className="admin-btn admin-btn-ghost admin-btn-sm admin-btn-icon-danger"
+              onClick={remove}
+            >
+              <Icons.IconTrash size={14} /> Delete link
+            </button>
+          </div>
+
+          {picks === null ? (
+            <div className="admin-spinner" />
+          ) : picks.length === 0 ? (
+            <p className="analytics-empty">No photos selected yet.</p>
+          ) : (
+            <ul className="proofing-picks">
+              {picks.map((pick) => (
+                <li key={pick.assetId} className="proofing-pick">
+                  {/* eslint-disable-next-line @next/next/no-img-element -- admin thumbnails, served by our own proxy */}
+                  <img src={pick.thumbUrl} alt="" loading="lazy" />
+                  <span className="proofing-pick-name" title={pick.fileName}>
+                    #{pick.position} · {pick.fileName}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function ProofingView() {
+  const [sessions, setSessions] = useState<AdminProofSession[] | null>(null);
+  const [webhookConfigured, setWebhookConfigured] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [expanded, setExpanded] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const data = await api<{ sessions: AdminProofSession[]; webhookConfigured: boolean }>(
+        '/api/admin/proofing',
+      );
+      setSessions(data.sessions);
+      setWebhookConfigured(data.webhookConfigured);
+      setError(null);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  }, []);
+
+  useEffect(() => {
+    // The webhook's admin link lands here with ?session=<id>: open that card.
+    const wanted = new URLSearchParams(window.location.search).get('session');
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- one-time read of the URL on mount
+    if (wanted) setExpanded(wanted);
+    void load();
+  }, [load]);
+
+  return (
+    <div className="analytics-view proofing-view">
+      <PageHeader
+        kicker="Visitors"
+        title="Client proofing"
+        description="A private link per client. Picks are saved as they go; you see them here once they submit."
+        actions={
+          <button className="admin-btn admin-btn-ghost admin-btn-sm" onClick={() => void load()}>
+            <Icons.IconRefresh size={14} /> Refresh
+          </button>
+        }
+      />
+
+      {!webhookConfigured && (
+        <p className="analytics-subtitle">
+          Tip: set <code>PROOFING_WEBHOOK_URL</code> to be notified (Discord, Slack, Gotify, n8n, …)
+          when a client submits.
+        </p>
+      )}
+
+      <CreateForm onCreated={() => void load()} />
+
+      {error && <p className="admin-error">{error}</p>}
+
+      {sessions === null && !error ? (
+        <div className="admin-loading-container">
+          <div className="admin-spinner" />
+        </div>
+      ) : sessions && sessions.length === 0 ? (
+        <p className="analytics-empty">No client links yet.</p>
+      ) : (
+        sessions?.map((session) => (
+          <SessionCard
+            key={session.id}
+            session={session}
+            expanded={expanded === session.id}
+            onToggle={() => setExpanded((cur) => (cur === session.id ? null : session.id))}
+            onChanged={() => void load()}
+          />
+        ))
+      )}
+    </div>
+  );
+}
diff --git a/app/admin/components/SettingsEditor.tsx b/app/admin/components/SettingsEditor.tsx
index 8ed63d8..c3e8b71 100644
--- a/app/admin/components/SettingsEditor.tsx
+++ b/app/admin/components/SettingsEditor.tsx
@@ -7,16 +7,20 @@
  * path through useAboutEditor().
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import SaveBar, { type SaveStatus } from './SaveBar';
 import { useUnsavedGuard } from './useUnsavedGuard';
 import { useDraft } from './useDraft';
+import { useLatest } from './useLatest';
 import DraftNotice from './DraftNotice';
 import { useContentRestored } from './contentRestored';
 import { reportIfSessionExpired } from './sessionExpiry';
+import { useVersionedSave } from './useVersionedSave';
 import type { Settings, SectionProps } from './settings/types';
+import type { EnvLocks } from '@/lib/admin/envLocks';
+import { validateSettingValues } from '@/lib/config/settingValues';
 import GeneralSection from './settings/GeneralSection';
 import ThemeSection from './settings/ThemeSection';
 import GridSection from './settings/GridSection';
@@ -65,6 +69,8 @@ export default function SettingsEditor() {
     effective: string | null;
     source: 'env' | 'settings' | 'none';
   } | null>(null);
+  /** Fields an environment variable overrides, path to variable name (#605). */
+  const [envLocks, setEnvLocks] = useState<EnvLocks>({});
   const [loading, setLoading] = useState(true);
   /**
    * Set when the settings could not be fetched. It blocks saving, because an
@@ -87,6 +93,11 @@ export default function SettingsEditor() {
   // 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);
+  /** The form as last rendered: tells a finished save whether editing went on meanwhile. */
+  const latestSettings = useLatest(settings);
+  /** settings.yaml as loaded, sent back on save so a change elsewhere is caught (#601). */
+  const versionRef = useRef<string | null>(null);
+  const versionedSave = useVersionedSave();
 
   useEffect(() => {
     loadSettings();
@@ -149,14 +160,16 @@ export default function SettingsEditor() {
             : `The server answered ${res.status}.`,
         );
       }
-      const { settings: data, siteUrl } = await res.json();
+      const { settings: data, siteUrl, envLocks: locks, version } = await res.json();
       const loaded: Settings = data || {};
+      versionRef.current = typeof version === 'string' ? version : null;
       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);
+      setEnvLocks(locks ?? {});
     } catch (err) {
       console.error('Failed to load settings:', err);
       setLoadError(err instanceof Error ? err.message : 'The settings could not be loaded.');
@@ -218,8 +231,9 @@ export default function SettingsEditor() {
     setSaving(true);
     setSaveStatus(null);
 
+    const sent = settings;
     // Clean up empty objects
-    const cleaned = JSON.parse(JSON.stringify(settings));
+    const cleaned = JSON.parse(JSON.stringify(sent));
     for (const key of Object.keys(cleaned)) {
       if (typeof cleaned[key] === 'object' && Object.keys(cleaned[key]).length === 0) {
         delete cleaned[key];
@@ -227,39 +241,56 @@ export default function SettingsEditor() {
     }
 
     try {
-      const res = await fetch('/api/admin/settings', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ settings: cleaned }),
-      });
+      const result = await versionedSave(
+        '/api/admin/settings',
+        { settings: cleaned },
+        versionRef,
+        'The settings file',
+      );
 
-      if (res.ok) {
-        const data = await res.json();
+      if (result.kind === 'reload') {
+        settingsDraft.discard();
+        await loadSettings();
+      } else if (result.kind === 'keep') {
+        setSaveStatus({ kind: 'error', message: 'Not saved — the settings changed elsewhere.' });
+      } else if (result.kind === 'saved') {
+        const data = result.data;
         // 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;
+        // Edited while the request was out: those edits are not saved yet, so
+        // they stay dirty, and a password retyped meanwhile is not replaced.
+        const editedMeanwhile = latestSettings.current !== sent;
         if (typeof data.sitePassword === 'string') {
-          setSettings((s) => ({ ...s, sitePassword: data.sitePassword }));
+          const hashed = data.sitePassword;
+          setSettings((s) =>
+            s.sitePassword === sent.sitePassword ? { ...s, sitePassword: hashed } : s,
+          );
         }
         setServerSettings(stored);
-        settingsDraft.saved(JSON.stringify(withoutSitePassword(stored)));
-        setDirty(false);
-        setSaveStatus({ kind: 'success', message: data.message || 'Saved!' });
+        settingsDraft.saved(JSON.stringify(withoutSitePassword(stored)), editedMeanwhile);
+        if (!editedMeanwhile) setDirty(false);
+        setSaveStatus({
+          kind: 'success',
+          message: typeof data.message === 'string' ? data.message : 'Saved!',
+        });
         router.refresh();
         setTimeout(() => setSaveStatus(null), 5000);
-      } else if (!reportIfSessionExpired(res)) {
-        const err = await res.json();
+      } else if (!reportIfSessionExpired(result.res)) {
+        const err = result.data ?? {};
         // A rejected save names the fields that caused it. Listing them beats
-        // "could not be saved" over a form with forty inputs; putting the
-        // message next to each input is the job of #600.
+        // "could not be saved" over a form with forty inputs; the value
+        // checks also stand next to their inputs (fieldErrors).
         const fields: string[] = Array.isArray(err.fields)
-          ? err.fields.map((f: { field?: string }) => f.field || 'settings')
+          ? err.fields.map((f: { field?: string; message?: string }) =>
+              f.message ? `${f.field || 'settings'}: ${f.message}` : f.field || 'settings',
+            )
           : [];
         setSaveStatus({
           kind: 'error',
-          message: `Error: ${err.error}${fields.length ? ` — ${fields.join(', ')}` : ''}`,
+          message: `Error: ${err.error ?? `HTTP ${result.res.status}`}${fields.length ? ` — ${fields.join(', ')}` : ''}`,
         });
       }
     } catch {
@@ -311,7 +342,10 @@ export default function SettingsEditor() {
   const saveBarStatus: SaveStatus =
     [saveStatus, about.status].find((st) => st?.kind === 'error') ?? saveStatus ?? about.status;
 
-  const props: SectionProps = { settings, update, updateMany };
+  const fieldErrors = Object.fromEntries(
+    validateSettingValues(settings).map((e) => [e.field, e.message]),
+  );
+  const props: SectionProps = { settings, update, updateMany, envLocks, fieldErrors };
 
   return (
     <div className="settings-editor">
diff --git a/app/admin/components/__tests__/JournalEditor-publish.test.tsx b/app/admin/components/__tests__/JournalEditor-publish.test.tsx
new file mode 100644
index 0000000..837fc9e
--- /dev/null
+++ b/app/admin/components/__tests__/JournalEditor-publish.test.tsx
@@ -0,0 +1,94 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { JournalEditor } from '../journal/JournalEditor';
+import { NotificationProvider } from '../Notifications';
+import { ConfirmProvider } from '../ConfirmDialog';
+
+/**
+ * The page editor's Publish button flips the Draft flag and saves at once
+ * (#722). When that save fails, the flipped flag is an unsaved edit: the editor
+ * has to say so and keep it saveable, not show "Saved" over a page that is
+ * still a draft on disk.
+ */
+
+const MARKDOWN = '---\ntitle: "FAQ"\ndraft: true\n---\n\nHello\n';
+
+let putStatus = 500;
+
+beforeEach(() => {
+  putStatus = 500;
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (_url: string, init?: RequestInit) => {
+      if (init?.method === 'PUT') {
+        if (putStatus !== 200) {
+          return new Response(JSON.stringify({ error: 'Failed to save page' }), {
+            status: putStatus,
+          });
+        }
+        const sent = JSON.parse(init.body as string) as { rawMarkdown: string };
+        return new Response(
+          JSON.stringify({
+            success: true,
+            page: { slug: 'faq', rawMarkdown: sent.rawMarkdown },
+            version: 'v2',
+          }),
+          { status: 200 },
+        );
+      }
+      return new Response(
+        JSON.stringify({ page: { slug: 'faq', rawMarkdown: MARKDOWN }, version: 'v1' }),
+        { status: 200 },
+      );
+    }),
+  );
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the editor a working one.
+  const store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+  // Drafts live in sessionStorage; each test starts without one.
+  window.sessionStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+function renderEditor() {
+  return render(
+    <NotificationProvider>
+      <ConfirmProvider>
+        <JournalEditor slug="faq" kind="page" onBack={() => {}} />
+      </ConfirmProvider>
+    </NotificationProvider>,
+  );
+}
+
+describe('JournalEditor page mode: Publish', () => {
+  it('leaves a failed publish as an unsaved change', async () => {
+    renderEditor();
+    fireEvent.click(await screen.findByRole('button', { name: 'Publish' }));
+
+    await waitFor(() =>
+      expect(screen.getByRole('alert').textContent).toContain('Failed to save page'),
+    );
+    const save = screen.getByRole('button', { name: 'Save Changes' });
+    expect((save as HTMLButtonElement).disabled).toBe(false);
+  });
+
+  it('reads Saved after a publish that went through', async () => {
+    putStatus = 200;
+    renderEditor();
+    fireEvent.click(await screen.findByRole('button', { name: 'Publish' }));
+
+    await screen.findByRole('button', { name: 'Unpublish' });
+    await waitFor(() => expect(screen.getByRole('button', { name: /Saved/ })).toBeTruthy());
+  });
+});
diff --git a/app/admin/components/__tests__/PrivacyEditor-draft.test.tsx b/app/admin/components/__tests__/PrivacyEditor-draft.test.tsx
new file mode 100644
index 0000000..9a1dce8
--- /dev/null
+++ b/app/admin/components/__tests__/PrivacyEditor-draft.test.tsx
@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import PrivacyEditor from '../PrivacyEditor';
+import { NotificationProvider } from '../Notifications';
+import { ConfirmProvider } from '../ConfirmDialog';
+
+/**
+ * The privacy editor sits in Settings → Legal and unmounts when another
+ * section opens. An unsaved policy used to go with it (A-7); it now keeps a
+ * draft like the About editor (#554, #592).
+ */
+
+let serverBody = 'Saved policy';
+
+beforeEach(() => {
+  serverBody = 'Saved policy';
+  window.sessionStorage.clear();
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(
+      async () =>
+        new Response(
+          JSON.stringify({
+            body: serverBody,
+            enabled: true,
+            facts: [],
+            starter: '## Controller',
+            version: 'v1',
+          }),
+          { status: 200 },
+        ),
+    ),
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+function mount() {
+  return render(
+    <NotificationProvider>
+      <ConfirmProvider>
+        <PrivacyEditor />
+      </ConfirmProvider>
+    </NotificationProvider>,
+  );
+}
+
+const editor = async () =>
+  (await screen.findByLabelText('Privacy policy (Markdown)')) as HTMLTextAreaElement;
+
+describe('PrivacyEditor draft (A-7)', () => {
+  it('brings back unsaved text after the editor was unmounted', async () => {
+    const first = mount();
+    fireEvent.change(await editor(), { target: { value: 'Unsaved policy' } });
+    first.unmount();
+
+    mount();
+    expect((await editor()).value).toBe('Unsaved policy');
+    expect(screen.getByText(/unsaved changes to the privacy policy were restored/)).toBeTruthy();
+    const save = screen.getByRole('button', { name: 'Save privacy policy' }) as HTMLButtonElement;
+    expect(save.disabled).toBe(false);
+  });
+
+  it('discarding the draft shows the saved policy again', async () => {
+    const first = mount();
+    fireEvent.change(await editor(), { target: { value: 'Unsaved policy' } });
+    first.unmount();
+
+    mount();
+    await editor();
+    fireEvent.click(screen.getByRole('button', { name: 'Discard changes' }));
+    expect((await editor()).value).toBe('Saved policy');
+    await waitFor(() => expect(window.sessionStorage.getItem('folio_draft_privacy')).toBeNull());
+  });
+
+  it('holds a draft back when the file changed since, and asks', async () => {
+    const first = mount();
+    fireEvent.change(await editor(), { target: { value: 'Unsaved policy' } });
+    first.unmount();
+
+    serverBody = 'Changed in another tab';
+    mount();
+    expect((await editor()).value).toBe('Changed in another tab');
+    fireEvent.click(screen.getByRole('button', { name: 'Restore my changes' }));
+    expect((await editor()).value).toBe('Unsaved policy');
+  });
+});
diff --git a/app/admin/components/__tests__/admin-dialogs-a11y.test.tsx b/app/admin/components/__tests__/admin-dialogs-a11y.test.tsx
new file mode 100644
index 0000000..b00d0e5
--- /dev/null
+++ b/app/admin/components/__tests__/admin-dialogs-a11y.test.tsx
@@ -0,0 +1,176 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { useModalDialog } from '@/hooks/useModalDialog';
+import AlbumPicker from '../AlbumPicker';
+import AlbumDrawer from '../page-builder/AlbumDrawer';
+import { StorySettingsModal } from '../journal/StorySettingsModal';
+
+afterEach(() => {
+  cleanup();
+});
+
+function Dialog({
+  name,
+  onClose,
+  children,
+}: {
+  name: string;
+  onClose: () => void;
+  children?: React.ReactNode;
+}) {
+  const ref = useModalDialog(onClose);
+  return (
+    <div ref={ref} role="dialog" aria-modal="true" aria-label={name}>
+      <button type="button">{name} first</button>
+      {children}
+      <button type="button">{name} last</button>
+    </div>
+  );
+}
+
+const escape = () => fireEvent.keyDown(document.activeElement ?? document.body, { key: 'Escape' });
+
+describe('useModalDialog with nested dialogs (A-9)', () => {
+  it('Escape closes only the innermost dialog', () => {
+    const closeOuter = vi.fn();
+    const closeInner = vi.fn();
+    const { rerender } = render(<Dialog name="outer" onClose={closeOuter} />);
+    rerender(
+      <Dialog name="outer" onClose={closeOuter}>
+        <Dialog name="inner" onClose={closeInner} />
+      </Dialog>,
+    );
+    escape();
+    expect(closeInner).toHaveBeenCalledTimes(1);
+    expect(closeOuter).not.toHaveBeenCalled();
+
+    // Once the inner one is gone, the outer one answers again.
+    rerender(<Dialog name="outer" onClose={closeOuter} />);
+    escape();
+    expect(closeOuter).toHaveBeenCalledTimes(1);
+  });
+
+  it('leaves Escape to an expanded combobox', () => {
+    const close = vi.fn();
+    render(
+      <Dialog name="d" onClose={close}>
+        <button type="button" role="combobox" aria-expanded="true" aria-controls="x">
+          sort
+        </button>
+      </Dialog>,
+    );
+    screen.getByRole('combobox').focus();
+    escape();
+    expect(close).not.toHaveBeenCalled();
+  });
+
+  it('leaves Escape to an item picked up with the keyboard (dnd-kit)', () => {
+    const close = vi.fn();
+    render(
+      <Dialog name="d" onClose={close}>
+        <div role="button" tabIndex={0} aria-roledescription="sortable" aria-pressed="true">
+          tile
+        </div>
+      </Dialog>,
+    );
+    screen.getByText('tile').focus();
+    escape();
+    expect(close).not.toHaveBeenCalled();
+  });
+});
+
+describe('AlbumPicker from the keyboard (A-10)', () => {
+  const albums = [
+    {
+      id: 'a1',
+      albumName: 'Alps',
+      description: '',
+      thumbnailAssetId: null,
+      assetCount: 3,
+      isConfigured: false,
+    },
+    {
+      id: 'a2',
+      albumName: 'Baltic',
+      description: '',
+      thumbnailAssetId: null,
+      assetCount: 5,
+      isConfigured: true,
+    },
+  ];
+
+  it('offers each free album as a button and disables the ones in use', () => {
+    const onSelect = vi.fn();
+    render(
+      <AlbumPicker
+        albums={albums}
+        onSelect={onSelect}
+        onClose={() => {}}
+        usedAlbumIds={new Set(['a2'])}
+      />,
+    );
+    const alps = screen.getByRole('button', { name: /Alps/ });
+    const baltic = screen.getByRole('button', { name: /Baltic/ }) as HTMLButtonElement;
+    expect(baltic.disabled).toBe(true);
+    fireEvent.click(alps);
+    expect(onSelect).toHaveBeenCalledWith('a1');
+    expect(screen.getByRole('button', { name: 'Close' })).toBeTruthy();
+  });
+
+  it('closes on Escape', () => {
+    const onClose = vi.fn();
+    render(
+      <AlbumPicker
+        albums={albums}
+        onSelect={() => {}}
+        onClose={onClose}
+        usedAlbumIds={new Set()}
+      />,
+    );
+    escape();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('AlbumDrawer as a dialog (A-9)', () => {
+  it('is a labelled modal dialog that closes on Escape', () => {
+    const onClose = vi.fn();
+    render(
+      <AlbumDrawer
+        album={{ id: 'a1' }}
+        name="Alps"
+        count={3}
+        thumbnailId={null}
+        onUpdate={() => {}}
+        onRemove={() => {}}
+        onClose={onClose}
+        onPickHero={() => {}}
+        onEditOrder={() => {}}
+      />,
+    );
+    const dialog = screen.getByRole('dialog', { name: /Edit Album Details/ });
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    expect(dialog.contains(document.activeElement)).toBe(true);
+    escape();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('StorySettingsModal as a dialog (A-9)', () => {
+  it('is a labelled modal dialog that closes on Escape', () => {
+    const onClose = vi.fn();
+    render(
+      <StorySettingsModal
+        frontmatter={{ title: 'Trip' }}
+        onChange={() => {}}
+        onPickAsset={() => {}}
+        onClose={onClose}
+      />,
+    );
+    const dialog = screen.getByRole('dialog', { name: /Story Settings/ });
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    escape();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/app/admin/components/__tests__/inflight-save-edits.test.tsx b/app/admin/components/__tests__/inflight-save-edits.test.tsx
new file mode 100644
index 0000000..8d6111d
--- /dev/null
+++ b/app/admin/components/__tests__/inflight-save-edits.test.tsx
@@ -0,0 +1,266 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, waitFor, act } from '@testing-library/react';
+import { JournalEditor } from '../journal/JournalEditor';
+import PrivacyEditor from '../PrivacyEditor';
+import SettingsEditor from '../SettingsEditor';
+import PageBuilder from '../PageBuilder';
+import { NotificationProvider } from '../Notifications';
+import { ConfirmProvider } from '../ConfirmDialog';
+
+const nav = vi.hoisted(() => ({ section: 'general' }));
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ refresh: () => {}, push: () => {}, replace: () => {} }),
+  useParams: () => ({ section: nav.section }),
+  usePathname: () => '/admin/settings/general',
+}));
+
+/**
+ * A save handler closes over the state it started with. Typing on while the
+ * request is out used to be marked saved when the answer came back: the Save
+ * button went to "Saved" and disabled, the unsaved-changes guard and the draft
+ * let go, and leaving the editor threw those edits away. Where the server
+ * rewrote the text (a hashed password line), the newer text was also replaced
+ * by the file as written.
+ */
+
+/** A PUT that answers only when the test says so. */
+let releasePut: ((written?: string) => void) | null = null;
+let putBodies: unknown[] = [];
+
+function stubFetch(
+  loadResponse: unknown,
+  putResponse: (sent: Record<string, unknown>, written?: string) => unknown,
+) {
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (_url: string, init?: RequestInit) => {
+      if (init?.method === 'PUT') {
+        const sent = JSON.parse(init.body as string) as Record<string, unknown>;
+        putBodies.push(sent);
+        const written = await new Promise<string | undefined>((resolve) => {
+          releasePut = resolve;
+        });
+        return new Response(JSON.stringify(putResponse(sent, written)), { status: 200 });
+      }
+      const body = typeof loadResponse === 'function' ? loadResponse(_url) : loadResponse;
+      return new Response(JSON.stringify(body), { status: 200 });
+    }),
+  );
+}
+
+beforeEach(() => {
+  nav.section = 'general';
+  releasePut = null;
+  putBodies = [];
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the editor a working one.
+  const store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+  window.sessionStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+const ENTRY = '---\ntitle: "Trip"\n---\n\nHello\n';
+
+async function renderJournal() {
+  stubFetch({ entry: { slug: 'trip', rawMarkdown: ENTRY }, version: 'v1' }, (sent, written) => ({
+    success: true,
+    entry: { slug: 'trip', rawMarkdown: written ?? sent.rawMarkdown },
+    version: 'v2',
+  }));
+  render(
+    <NotificationProvider>
+      <ConfirmProvider>
+        <JournalEditor slug="trip" onBack={() => {}} />
+      </ConfirmProvider>
+    </NotificationProvider>,
+  );
+  fireEvent.click(await screen.findByRole('button', { name: 'Raw Markdown' }));
+  return screen.getByPlaceholderText('Write Markdown here...') as HTMLTextAreaElement;
+}
+
+describe('JournalEditor: edits made while a save is in flight', () => {
+  it('stay unsaved and saveable', async () => {
+    const editor = await renderJournal();
+    fireEvent.change(editor, { target: { value: `${ENTRY}First\n` } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }));
+    await waitFor(() => expect(releasePut).not.toBeNull());
+
+    fireEvent.change(editor, { target: { value: `${ENTRY}First\nSecond\n` } });
+    await act(async () => releasePut!());
+
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Saving...' })).toBeNull());
+    expect(editor.value).toBe(`${ENTRY}First\nSecond\n`);
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement;
+    expect(save.disabled).toBe(false);
+    // Still kept as a draft, so leaving the editor does not lose it.
+    expect(window.sessionStorage.getItem('folio_draft_journal-trip')).toContain('Second');
+  });
+
+  it('are not replaced by the file as written', async () => {
+    const editor = await renderJournal();
+    fireEvent.change(editor, { target: { value: `${ENTRY}First\n` } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }));
+    await waitFor(() => expect(releasePut).not.toBeNull());
+
+    fireEvent.change(editor, { target: { value: `${ENTRY}First\nSecond\n` } });
+    // The server rewrote what it was sent, as it does when it hashes a password.
+    await act(async () => releasePut!(`${ENTRY}First (as written)\n`));
+
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Saving...' })).toBeNull());
+    expect(editor.value).toBe(`${ENTRY}First\nSecond\n`);
+  });
+
+  it('a save with no edits meanwhile still ends clean, showing the file as written', async () => {
+    const editor = await renderJournal();
+    fireEvent.change(editor, { target: { value: `${ENTRY}First\n` } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }));
+    await waitFor(() => expect(releasePut).not.toBeNull());
+    await act(async () => releasePut!(`${ENTRY}First (as written)\n`));
+
+    await screen.findByRole('button', { name: /Saved/ });
+    expect(editor.value).toBe(`${ENTRY}First (as written)\n`);
+    expect(window.sessionStorage.getItem('folio_draft_journal-trip')).toBeNull();
+  });
+});
+
+describe('PrivacyEditor: edits made while a save is in flight', () => {
+  it('stay unsaved and saveable', async () => {
+    stubFetch(
+      { body: 'Old', enabled: true, facts: [], starter: '## Controller', version: 'v1' },
+      () => ({ success: true, version: 'v2' }),
+    );
+    render(
+      <NotificationProvider>
+        <ConfirmProvider>
+          <PrivacyEditor />
+        </ConfirmProvider>
+      </NotificationProvider>,
+    );
+    const editor = (await screen.findByLabelText(
+      'Privacy policy (Markdown)',
+    )) as HTMLTextAreaElement;
+    fireEvent.change(editor, { target: { value: 'First' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save privacy policy' }));
+    await waitFor(() => expect(releasePut).not.toBeNull());
+
+    fireEvent.change(editor, { target: { value: 'First and second' } });
+    await act(async () => releasePut!());
+
+    await screen.findByText('Privacy policy saved.');
+    const save = screen.getByRole('button', { name: 'Save privacy policy' }) as HTMLButtonElement;
+    expect(save.disabled).toBe(false);
+    expect(putBodies).toEqual([{ body: 'First' }]);
+  });
+});
+
+describe('SettingsEditor: edits made while a save is in flight', () => {
+  it('stay unsaved and saveable', async () => {
+    stubFetch({ settings: { title: 'Old' }, version: 'v1', envLocks: {} }, () => ({
+      success: true,
+      version: 'v2',
+    }));
+    render(
+      <NotificationProvider>
+        <ConfirmProvider>
+          <SettingsEditor />
+        </ConfirmProvider>
+      </NotificationProvider>,
+    );
+    const title = (await screen.findByLabelText('Site Title')) as HTMLInputElement;
+    fireEvent.change(title, { target: { value: 'First' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }));
+    await waitFor(() => expect(releasePut).not.toBeNull());
+
+    fireEvent.change(title, { target: { value: 'First and second' } });
+    await act(async () => releasePut!());
+
+    await screen.findByText('Saved!');
+    expect(title.value).toBe('First and second');
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement;
+    expect(save.disabled).toBe(false);
+    expect(window.sessionStorage.getItem('folio_draft_settings')).toContain('First and second');
+  });
+});
+
+describe('About editor: edits made while a save is in flight', () => {
+  it('stay unsaved and saveable', async () => {
+    nav.section = 'about';
+    stubFetch(
+      (url: string) =>
+        url === '/api/admin/about'
+          ? { meta: { name: 'Ada' }, body: 'Old', version: 'v1' }
+          : { settings: {}, version: 'v1', envLocks: {} },
+      () => ({ success: true, version: 'v2' }),
+    );
+    render(
+      <NotificationProvider>
+        <ConfirmProvider>
+          <SettingsEditor />
+        </ConfirmProvider>
+      </NotificationProvider>,
+    );
+    const bio = (await screen.findByLabelText('Biography (Markdown)')) as HTMLTextAreaElement;
+    fireEvent.change(bio, { target: { value: 'First' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }));
+    await waitFor(() => expect(releasePut).not.toBeNull());
+
+    fireEvent.change(bio, { target: { value: 'First and second' } });
+    await act(async () => releasePut!());
+
+    await screen.findByText('Saved!');
+    expect(bio.value).toBe('First and second');
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement;
+    expect(save.disabled).toBe(false);
+    expect(window.sessionStorage.getItem('folio_draft_about')).toContain('First and second');
+  });
+});
+
+describe('PageBuilder: edits made while a save is in flight', () => {
+  it('stay unsaved and saveable, and are not replaced by the file as written', async () => {
+    stubFetch(
+      (url: string) =>
+        url === '/api/admin/gallery'
+          ? { gallery: { hero: [], albums: [], subpages: [] }, version: 'v1' }
+          : url === '/api/admin/albums'
+            ? { albums: [] }
+            : { pages: [], taken: { subpages: [], albums: [], journal: [] } },
+      // As written: hashed passwords make the server copy differ from the one sent.
+      (sent) => ({
+        success: true,
+        version: 'v2',
+        gallery: { ...(sent.gallery as object), hero: ['written-by-server'] },
+      }),
+    );
+    render(
+      <NotificationProvider>
+        <ConfirmProvider>
+          <PageBuilder />
+        </ConfirmProvider>
+      </NotificationProvider>,
+    );
+    fireEvent.click(await screen.findByRole('button', { name: /New subpage/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }));
+    await waitFor(() => expect(releasePut).not.toBeNull());
+
+    fireEvent.click(screen.getByRole('button', { name: /New subpage/ }));
+    await act(async () => releasePut!());
+
+    await screen.findByText('Saved successfully!');
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement;
+    expect(save.disabled).toBe(false);
+    const kept = JSON.parse(window.sessionStorage.getItem('folio_draft_page-builder') ?? 'null');
+    expect(kept?.value?.subpages).toHaveLength(2);
+    expect((putBodies[0] as { gallery: { subpages: unknown[] } }).gallery.subpages).toHaveLength(1);
+  });
+});
diff --git a/app/admin/components/__tests__/inline-markdown-fields.test.tsx b/app/admin/components/__tests__/inline-markdown-fields.test.tsx
new file mode 100644
index 0000000..cf812c6
--- /dev/null
+++ b/app/admin/components/__tests__/inline-markdown-fields.test.tsx
@@ -0,0 +1,196 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { useState } from 'react';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { JournalEditor } from '../journal/JournalEditor';
+import { EssayBlockEditor } from '../EssayBlockEditor';
+import { InlineMarkdownField } from '../InlineMarkdownField';
+import { NotificationProvider } from '../Notifications';
+import { ConfirmProvider } from '../ConfirmDialog';
+
+/**
+ * Text blocks are edited as markdown, not as the HTML the parser stores (A-5).
+ * A reloaded entry used to show `<strong>` and `<a href=…>` in the textarea,
+ * text typed into a tag was lost on save, and typed `**bold**` stayed literal
+ * in the live preview until the first save.
+ */
+
+const ID = '3f1c9a52-8d4e-4b7a-9c1d-0e2f3a4b5c6d';
+const ENTRY = [
+  '---',
+  'title: "Trip"',
+  '---',
+  '',
+  'Hello **bold** and [Immich](https://immich.app).',
+  '',
+  '> A *quoted* line -- Someone',
+  '',
+  `![${ID}:wide](A **nice** view)`,
+  '',
+  '::facts',
+  'Distance: **21** km',
+].join('\n');
+
+beforeEach(() => {
+  // The live preview's FadeIn reveals at once under reduced motion instead of
+  // needing IntersectionObserver.
+  window.matchMedia = ((query: string) => ({
+    matches: query.includes('reduce'),
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  })) as unknown as typeof window.matchMedia;
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (_url: string, init?: RequestInit) => {
+      if (init?.method === 'PUT') {
+        const sent = JSON.parse(init.body as string) as { rawMarkdown: string };
+        return new Response(
+          JSON.stringify({
+            success: true,
+            entry: { slug: 'trip', rawMarkdown: sent.rawMarkdown },
+            version: 'v2',
+          }),
+          { status: 200 },
+        );
+      }
+      return new Response(
+        JSON.stringify({ entry: { slug: 'trip', rawMarkdown: ENTRY }, version: 'v1' }),
+        { status: 200 },
+      );
+    }),
+  );
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the editor a working one.
+  const store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+  window.sessionStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+async function renderJournal() {
+  render(
+    <NotificationProvider>
+      <ConfirmProvider>
+        <JournalEditor slug="trip" onBack={() => {}} />
+      </ConfirmProvider>
+    </NotificationProvider>,
+  );
+  return (await screen.findByLabelText('Text')) as HTMLTextAreaElement;
+}
+
+/** The entry as the editor would save it, read from the Raw Markdown view. */
+function rawMarkdown(): string {
+  fireEvent.click(screen.getByRole('button', { name: 'Raw Markdown' }));
+  const value = (screen.getByPlaceholderText('Write Markdown here...') as HTMLTextAreaElement)
+    .value;
+  fireEvent.click(screen.getByRole('button', { name: 'Visual Blocks' }));
+  return value;
+}
+
+describe('journal editor: text blocks as markdown (A-5)', () => {
+  it('shows the markdown source, not the stored HTML, after a load', async () => {
+    const text = await renderJournal();
+    expect(text.value).toBe('Hello **bold** and [Immich](https://immich.app).');
+    expect(screen.getByDisplayValue('A *quoted* line')).toBeTruthy();
+    expect(screen.getByDisplayValue('A **nice** view')).toBeTruthy();
+    expect(screen.getByDisplayValue('**21** km')).toBeTruthy();
+    expect(document.body.querySelector('textarea, input')).toBeTruthy();
+    for (const field of document.body.querySelectorAll('textarea, input')) {
+      expect((field as HTMLInputElement).value).not.toMatch(/<(strong|em|a)\b/);
+    }
+  });
+
+  it('renders typed markdown in the live preview before any save', async () => {
+    const text = await renderJournal();
+    fireEvent.change(text, { target: { value: 'Now **strong** text.' } });
+    const preview = document.querySelector('.journal-preview-frame')!;
+    expect(preview.innerHTML).toContain('<strong>strong</strong>');
+    expect(preview.textContent).not.toContain('**strong**');
+    // What was typed stays as typed.
+    expect(text.value).toBe('Now **strong** text.');
+  });
+
+  it('keeps text typed inside a link label or bold run', async () => {
+    const text = await renderJournal();
+    fireEvent.change(text, {
+      target: { value: 'Hello **bold and more** and [Immich Photos](https://immich.app).' },
+    });
+    expect(rawMarkdown()).toContain(
+      'Hello **bold and more** and [Immich Photos](https://immich.app).',
+    );
+  });
+
+  it('writes the same file when the content is unchanged', async () => {
+    const text = await renderJournal();
+    const original = text.value;
+    fireEvent.change(text, { target: { value: `${original} extra` } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: original } });
+    expect(rawMarkdown()).toBe(ENTRY);
+  });
+
+  it('keeps `__` as typed while the file gets the canonical form', async () => {
+    const text = await renderJournal();
+    fireEvent.change(text, { target: { value: 'An __underscored__ word' } });
+    expect(text.value).toBe('An __underscored__ word');
+    expect(rawMarkdown()).toContain('An **underscored** word');
+  });
+});
+
+describe('InlineMarkdownField', () => {
+  function Harness({ initial }: { initial: string }) {
+    const [html, setHtml] = useState(initial);
+    return (
+      <>
+        <InlineMarkdownField aria-label="Field" html={html} onChange={setHtml} />
+        <button type="button" onClick={() => setHtml('<em>replaced</em>')}>
+          Replace
+        </button>
+        <output data-testid="html">{html}</output>
+      </>
+    );
+  }
+
+  it('hands back HTML and re-reads it only on an outside change', () => {
+    render(<Harness initial="<strong>x</strong>" />);
+    const field = screen.getByLabelText('Field') as HTMLInputElement;
+    expect(field.value).toBe('**x**');
+    fireEvent.change(field, { target: { value: 'a [half](http' } });
+    expect(field.value).toBe('a [half](http');
+    fireEvent.change(field, { target: { value: 'a & b <c>' } });
+    expect(screen.getByTestId('html').textContent).toBe('a &amp; b &lt;c&gt;');
+    expect(field.value).toBe('a & b <c>');
+    fireEvent.click(screen.getByRole('button', { name: 'Replace' }));
+    expect(field.value).toBe('*replaced*');
+  });
+});
+
+describe('essay block editor: text blocks as markdown (A-5)', () => {
+  it('shows markdown and serializes an edit through the renderer', () => {
+    const onChange = vi.fn();
+    render(
+      <EssayBlockEditor
+        markdown={'Some *italic* and [a link](https://immich.app).'}
+        onChange={onChange}
+      />,
+    );
+    const text = screen.getByDisplayValue(
+      'Some *italic* and [a link](https://immich.app).',
+    ) as HTMLTextAreaElement;
+    fireEvent.change(text, {
+      target: { value: 'Some *italic* and [a longer link](https://immich.app).' },
+    });
+    expect(onChange).toHaveBeenLastCalledWith(
+      'Some *italic* and [a longer link](https://immich.app).',
+    );
+  });
+});
diff --git a/app/admin/components/__tests__/settings-field-errors.test.tsx b/app/admin/components/__tests__/settings-field-errors.test.tsx
new file mode 100644
index 0000000..2c1be51
--- /dev/null
+++ b/app/admin/components/__tests__/settings-field-errors.test.tsx
@@ -0,0 +1,74 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import SettingsEditor from '../SettingsEditor';
+import { NotificationProvider } from '../Notifications';
+import { ConfirmProvider } from '../ConfirmDialog';
+
+const nav = vi.hoisted(() => ({ section: 'grid' }));
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ refresh: () => {}, push: () => {}, replace: () => {} }),
+  useParams: () => ({ section: nav.section }),
+  usePathname: () => `/admin/settings/${nav.section}`,
+}));
+
+/**
+ * A value the site would ignore is named next to its input as it is typed,
+ * not only after a refused save (QA A-14).
+ */
+beforeEach(() => {
+  window.sessionStorage.clear();
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(
+      async () =>
+        new Response(
+          JSON.stringify({ settings: { title: 'Folio' }, version: 'v1', envLocks: {} }),
+          {
+            status: 200,
+          },
+        ),
+    ),
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+function mount() {
+  return render(
+    <NotificationProvider>
+      <ConfirmProvider>
+        <SettingsEditor />
+      </ConfirmProvider>
+    </NotificationProvider>,
+  );
+}
+
+describe('Settings form: values the site would ignore', () => {
+  it('marks grid columns outside 1–6 at the input', async () => {
+    nav.section = 'grid';
+    mount();
+    const columns = (await screen.findByLabelText(/Columns/)) as HTMLInputElement;
+    expect(columns.getAttribute('aria-invalid')).toBeNull();
+
+    fireEvent.change(columns, { target: { value: '9' } });
+    expect(columns.getAttribute('aria-invalid')).toBe('true');
+    const error = document.getElementById(columns.getAttribute('aria-describedby')!);
+    expect(error?.textContent).toBe('Must be a whole number from 1 to 6.');
+
+    fireEvent.change(columns, { target: { value: '4' } });
+    expect(columns.getAttribute('aria-invalid')).toBeNull();
+  });
+
+  it('marks an accent that is not hex', async () => {
+    nav.section = 'theme';
+    mount();
+    const accent = (await screen.findByLabelText('Accent colour (hex)')) as HTMLInputElement;
+    fireEvent.change(accent, { target: { value: 'rot' } });
+    expect(accent.getAttribute('aria-invalid')).toBe('true');
+    expect(screen.getByText('Must be a hex colour such as #e60012.')).toBeTruthy();
+  });
+});
diff --git a/app/admin/components/analyticsDays.ts b/app/admin/components/analyticsDays.ts
new file mode 100644
index 0000000..8467d17
--- /dev/null
+++ b/app/admin/components/analyticsDays.ts
@@ -0,0 +1,24 @@
+/**
+ * The days the analytics chart shows: the last `count` calendar days up to
+ * `today`, each one present, with 0 for a day nobody visited.
+ *
+ * The chart used to take the last 14 *recorded* days, so a quiet week simply
+ * vanished and "Last 14 Days" could span a month (QA A-16).
+ *
+ * Keys are UTC dates (`YYYY-MM-DD`), the way /api/analytics/track writes them,
+ * so `today` is read in UTC too — a local date would be a day off either side
+ * of midnight.
+ */
+export function lastDays(
+  days: Record<string, { pageviews?: number } | undefined>,
+  count: number,
+  today: Date,
+): Array<{ date: string; pageviews: number }> {
+  const end = Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
+  const out: Array<{ date: string; pageviews: number }> = [];
+  for (let i = count - 1; i >= 0; i--) {
+    const date = new Date(end - i * 86_400_000).toISOString().slice(0, 10);
+    out.push({ date, pageviews: days[date]?.pageviews ?? 0 });
+  }
+  return out;
+}
diff --git a/app/admin/components/fields/EnvLockNote.tsx b/app/admin/components/fields/EnvLockNote.tsx
new file mode 100644
index 0000000..664ce39
--- /dev/null
+++ b/app/admin/components/fields/EnvLockNote.tsx
@@ -0,0 +1,20 @@
+import { IconLock } from '../Icons';
+
+/**
+ * The note under a field an environment variable overrides (#605). The field
+ * itself is rendered disabled by its section; this names the variable, so the
+ * operator knows where the value actually lives. Never shows the value.
+ */
+export default function EnvLockNote({ id, variable }: { id?: string; variable: string }) {
+  return (
+    <p id={id} className="admin-env-lock">
+      <span className="admin-env-lock-pill">
+        <IconLock size={11} /> Locked
+      </span>
+      <span>
+        Set by <code>{variable}</code> in the environment. Change or unset it there; edits here
+        would have no effect.
+      </span>
+    </p>
+  );
+}
diff --git a/app/admin/components/journal/BlockFields.tsx b/app/admin/components/journal/BlockFields.tsx
index 9e6086d..54ae1dc 100644
--- a/app/admin/components/journal/BlockFields.tsx
+++ b/app/admin/components/journal/BlockFields.tsx
@@ -13,12 +13,17 @@ import {
   IconFolder,
   IconX,
 } from '../Icons';
-import { isLegacyAssetRef } from './blockOps';
+import { InlineMarkdownField } from '../InlineMarkdownField';
+import { fillAssetSlots, isLegacyAssetRef } from './blockOps';
 
 /** What the asset picker is opened for: its title, and where the pick goes. */
 export interface AssetPickTarget {
   title: string;
-  onSelect: (assetId: string) => void;
+  onSelect?: (assetId: string) => void;
+  /** Multi-select: several picks confirmed at once (#602). */
+  onSelectMany?: (assetIds: string[]) => void;
+  /** Most assets `onSelectMany` takes. */
+  max?: number;
 }
 
 interface BlockFieldsProps {
@@ -71,22 +76,26 @@ export function BlockFields({
       )}
 
       {block.type === 'paragraph' && (
-        <textarea
+        <InlineMarkdownField
+          multiline
+          aria-label="Text"
           className="admin-input"
           rows={3}
-          value={block.html}
-          onChange={(e) => onChange({ ...block, html: e.target.value })}
+          placeholder="Text (**bold**, *italic*, [link](https://…))"
+          html={block.html}
+          onChange={(html) => onChange({ ...block, html })}
         />
       )}
 
       {block.type === 'quote' && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          <textarea
+          <InlineMarkdownField
+            multiline
             className="admin-input"
             rows={2}
-            value={block.text}
+            html={block.text}
             placeholder="Quote text..."
-            onChange={(e) => onChange({ ...block, text: e.target.value })}
+            onChange={(text) => onChange({ ...block, text })}
           />
           <input
             type="text"
@@ -176,12 +185,11 @@ export function BlockFields({
                 Change Photo
               </button>
             </div>
-            <input
-              type="text"
+            <InlineMarkdownField
               className="admin-input"
               placeholder="Caption (optional)"
-              value={block.caption || ''}
-              onChange={(e) => onChange({ ...block, caption: e.target.value })}
+              html={block.caption}
+              onChange={(caption) => onChange({ ...block, caption })}
             />
           </div>
         </div>
@@ -242,12 +250,31 @@ export function BlockFields({
               </div>
             ))}
           </div>
-          <input
-            type="text"
+          <div>
+            <button
+              type="button"
+              className="admin-btn admin-btn-xs"
+              onClick={() =>
+                onPickAsset({
+                  title: 'Select Photos for Pair',
+                  max: 2,
+                  onSelectMany: (ids) => {
+                    // Two picks replace the pair; a single pick fills a gap.
+                    const base = ids.length >= 2 ? ['', ''] : [...block.assetIds];
+                    const [a, b] = fillAssetSlots(base, ids, 2);
+                    onChange({ ...block, assetIds: [a ?? '', b ?? ''] });
+                  },
+                })
+              }
+            >
+              <IconCamera size={12} /> Pick both photos
+            </button>
+          </div>
+          <InlineMarkdownField
             className="admin-input"
             placeholder="Shared caption for pair (optional)"
-            value={block.caption || ''}
-            onChange={(e) => onChange({ ...block, caption: e.target.value })}
+            html={block.caption}
+            onChange={(caption) => onChange({ ...block, caption })}
           />
         </div>
       )}
@@ -316,16 +343,28 @@ export function BlockFields({
             >
               <IconPlus size={12} /> Add photo
             </button>
+            <button
+              type="button"
+              className="admin-btn admin-btn-xs"
+              onClick={() =>
+                onPickAsset({
+                  title: 'Select Photos for Grid',
+                  onSelectMany: (ids) =>
+                    onChange({ ...block, assetIds: fillAssetSlots(block.assetIds, ids) }),
+                })
+              }
+            >
+              <IconCamera size={12} /> Pick several
+            </button>
             <span style={{ fontSize: '0.75rem', opacity: 0.6 }}>
               Three or more photos, laid out in rows of three.
             </span>
           </div>
-          <input
-            type="text"
+          <InlineMarkdownField
             className="admin-input"
             placeholder="Shared caption for grid (optional)"
-            value={block.caption || ''}
-            onChange={(e) => onChange({ ...block, caption: e.target.value })}
+            html={block.caption}
+            onChange={(caption) => onChange({ ...block, caption })}
           />
         </div>
       )}
@@ -348,17 +387,14 @@ export function BlockFields({
                   })
                 }
               />
-              <input
-                type="text"
+              <InlineMarkdownField
                 className="admin-input"
                 placeholder="Value, e.g. 21 km"
-                value={item.value}
-                onChange={(e) =>
+                html={item.value}
+                onChange={(value) =>
                   onChange({
                     ...block,
-                    items: block.items.map((it, i) =>
-                      i === fIdx ? { ...it, value: e.target.value } : it,
-                    ),
+                    items: block.items.map((it, i) => (i === fIdx ? { ...it, value } : it)),
                   })
                 }
               />
@@ -467,17 +503,11 @@ export function BlockFields({
               </select>
             </label>
           </div>
-          <input
-            type="text"
+          <InlineMarkdownField
             className="admin-input"
             placeholder="Caption for the set (optional)"
-            value={block.caption || ''}
-            onChange={(e) =>
-              onChange({
-                ...block,
-                caption: e.target.value || undefined,
-              })
-            }
+            html={block.caption}
+            onChange={(caption) => onChange({ ...block, caption: caption || undefined })}
           />
           <span style={{ fontSize: '0.75rem', opacity: 0.6 }}>
             Photos follow the album&apos;s order (a manual order in the gallery comes first). Count
@@ -494,12 +524,11 @@ export function BlockFields({
               enabled.
             </p>
           )}
-          <input
-            type="text"
+          <InlineMarkdownField
             className="admin-input"
             placeholder="Caption, e.g. Busan → Seoul (optional)"
-            value={block.caption || ''}
-            onChange={(e) => onChange({ ...block, caption: e.target.value })}
+            html={block.caption}
+            onChange={(caption) => onChange({ ...block, caption })}
           />
 
           {block.items.map((item, mIdx) => {
diff --git a/app/admin/components/journal/JournalEditor.tsx b/app/admin/components/journal/JournalEditor.tsx
index cc72837..2a4d837 100644
--- a/app/admin/components/journal/JournalEditor.tsx
+++ b/app/admin/components/journal/JournalEditor.tsx
@@ -28,14 +28,17 @@ import type { AlbumAssetRef } from '@/lib/journalAlbum';
 import { BlockBadge } from '../BlockBadge';
 import { useUnsavedGuard } from '../useUnsavedGuard';
 import { useDraft } from '../useDraft';
+import { useLatest } from '../useLatest';
 import DraftNotice from '../DraftNotice';
 import { reportIfSessionExpired } from '../sessionExpiry';
 import { useContentRestored } from '../contentRestored';
+import { useVersionedSave } from '../useVersionedSave';
 import './journal-studio.css';
 import { BlockFields, type AssetPickTarget } from './BlockFields';
 import { StorySettingsModal } from './StorySettingsModal';
+import { PageSettingsPanel } from './PageSettingsPanel';
 import { JournalPreview } from './JournalPreview';
-import { createBlock, moveBlock } from './blockOps';
+import { createBlock, createPhotoBlocks, moveBlock } from './blockOps';
 import { useSplitPane, SPLIT_MIN, SPLIT_MAX } from './splitPane';
 import { useNotify } from '../Notifications';
 
@@ -43,9 +46,18 @@ interface JournalEditorProps {
   slug: string;
   mapEnabled?: boolean;
   onBack: () => void;
+  /**
+   * `page` edits a content page (#722) instead of a journal entry: its own
+   * API and live URL, no map block, a settings side panel instead of the
+   * story settings, and a Publish button that saves the Draft flag at once.
+   */
+  kind?: 'journal' | 'page';
 }
 
-export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps) {
+export function JournalEditor({ slug, mapEnabled, onBack, kind = 'journal' }: JournalEditorProps) {
+  const isPage = kind === 'page';
+  const apiUrl = isPage ? `/api/admin/pages/${slug}` : `/api/admin/journal/${slug}`;
+  const liveUrl = isPage ? `/${slug}` : `/journal/${slug}`;
   const notify = useNotify();
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -63,6 +75,8 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
   } = useSplitPane();
 
   const [rawMarkdown, setRawMarkdown] = useState('');
+  /** The markdown as last rendered: tells a finished save whether typing went on meanwhile. */
+  const latestMarkdown = useLatest(rawMarkdown);
   const [parsed, setParsed] = useState<ParsedJournal>(() => ({
     frontmatter: {},
     blocks: [],
@@ -81,14 +95,17 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
   // Unsaved edits survive leaving the editor — the entry list, a tab link,
   // back, Reload (#592). The markdown is the whole entry; blocks and
   // frontmatter are parsed from it. `serverMarkdown` is what a discard restores.
-  const draft = useDraft<string>(`journal-${slug}`, rawMarkdown, dirty);
+  const draft = useDraft<string>(`${isPage ? 'page' : 'journal'}-${slug}`, rawMarkdown, dirty);
   const loadDraft = draft.load;
   const serverMarkdown = useRef('');
+  /** The file as loaded, sent back on save so a change elsewhere is caught (#601). */
+  const versionRef = useRef<string | null>(null);
+  const versionedSave = useVersionedSave();
 
   // 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);
+    if (target === (isPage ? 'pages' : 'journal') && restored === slug) setReloadKey((k) => k + 1);
   });
 
   // Load entry
@@ -97,7 +114,7 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
       setLoading(true);
       setLoadError(null);
       try {
-        const res = await fetch(`/api/admin/journal/${slug}`);
+        const res = await fetch(apiUrl);
         if (!res.ok) {
           throw new Error(
             res.status === 401
@@ -106,7 +123,8 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
           );
         }
         const data = await res.json();
-        const md: string = data.entry.rawMarkdown;
+        versionRef.current = typeof data.version === 'string' ? data.version : null;
+        const md: string = (isPage ? data.page : data.entry).rawMarkdown;
         serverMarkdown.current = md;
         const restored = loadDraft(md);
         setRawMarkdown(restored ?? md);
@@ -122,7 +140,7 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
       }
     }
     load();
-  }, [slug, loadDraft, reloadKey]);
+  }, [slug, apiUrl, isPage, loadDraft, reloadKey]);
 
   // Update markdown and sync blocks
   const handleMarkdownChange = (newMd: string) => {
@@ -159,44 +177,61 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
     setDirty(true);
   };
 
-  // Save
-  const handleSave = async () => {
+  // Save. `override` is markdown to save instead of the editor's — the page
+  // editor's Publish button changes the Draft flag and saves in one go.
+  const handleSave = async (override?: string) => {
     // 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;
+    if ((!dirty && override === undefined) || saving) return;
+    const toSave = override ?? rawMarkdown;
 
     setSaving(true);
     try {
-      const res = await fetch(`/api/admin/journal/${slug}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          rawMarkdown,
-        }),
-      });
+      const result = await versionedSave(
+        apiUrl,
+        { rawMarkdown: toSave },
+        versionRef,
+        isPage ? 'This page' : 'This entry',
+      );
 
-      if (res.ok) {
+      if (result.kind === 'reload') {
+        draft.discard();
+        setReloadKey((k) => k + 1);
+      } else if (result.kind === 'keep') {
+        notify('error', 'Not saved — it changed elsewhere. Your edits are still here.');
+      } else if (result.kind === 'saved') {
         // 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 data = result.data as {
+          page?: { rawMarkdown?: unknown };
+          entry?: { rawMarkdown?: unknown };
+        };
+        const record = isPage ? data.page : data.entry;
         const written: string =
-          typeof data?.entry?.rawMarkdown === 'string' ? data.entry.rawMarkdown : rawMarkdown;
+          typeof record?.rawMarkdown === 'string' ? record.rawMarkdown : toSave;
         serverMarkdown.current = written;
-        draft.saved(written);
-        if (written !== rawMarkdown) {
-          setRawMarkdown(written);
-          setParsed(parseJournalMarkdown(written));
+        // Edited while the request was out: those edits are not saved yet, so
+        // they stay dirty and are not replaced by the file as written.
+        const editedMeanwhile = latestMarkdown.current !== toSave;
+        draft.saved(written, editedMeanwhile);
+        if (!editedMeanwhile) {
+          if (written !== toSave) {
+            setRawMarkdown(written);
+            setParsed(parseJournalMarkdown(written));
+          }
+          setDirty(false);
         }
-        setDirty(false);
-      } else if (!reportIfSessionExpired(res)) {
-        const data = await res.json();
-        notify('error', data.error || 'Failed to save');
+      } else if (!reportIfSessionExpired(result.res)) {
+        notify('error', result.data?.error || 'Failed to save');
       }
     } catch {
-      notify('error', 'Could not save the entry. Check the connection and try again.');
+      notify(
+        'error',
+        `Could not save the ${isPage ? 'page' : 'entry'}. Check the connection and try again.`,
+      );
     } finally {
       setSaving(false);
     }
@@ -278,6 +313,22 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
   };
 
   // Block manipulation
+  /** Page mode: publish or unpublish, saved at once. Same flag as the Draft pill. */
+  const handleTogglePublish = () => {
+    const updated: ParsedJournal = {
+      ...parsed,
+      frontmatter: { ...parsed.frontmatter, draft: !parsed.frontmatter.draft },
+    };
+    const serialized = serializeJournalMarkdown(updated);
+    setParsed(updated);
+    setRawMarkdown(serialized);
+    // An edit like any other until the save lands: a failed or refused save
+    // must leave the flipped flag unsaved, not shown as "Saved" (a success
+    // clears it again).
+    setDirty(true);
+    handleSave(serialized);
+  };
+
   const handleAddBlock = (type: JournalBlock['type']) => {
     handleBlocksChange([...parsed.blocks, createBlock(type)]);
   };
@@ -304,7 +355,7 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
   if (loading) {
     return (
       <div style={{ padding: '4rem', textAlign: 'center', opacity: 0.6 }}>
-        Opening Journal Studio...
+        {isPage ? 'Opening page editor...' : 'Opening Journal Studio...'}
       </div>
     );
   }
@@ -316,13 +367,13 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
   if (loadError) {
     return (
       <div className="admin-error" role="alert">
-        <strong>This entry could not be loaded.</strong> {loadError}
+        <strong>This {isPage ? 'page' : 'entry'} could not be loaded.</strong> {loadError}
         <p>
           Nothing has been changed. Saving stays disabled until it loads, so an empty editor cannot
-          overwrite the entry.
+          overwrite it.
         </p>
         <button className="admin-btn admin-btn-secondary" onClick={onBack}>
-          Back to entries
+          {isPage ? 'Back to pages' : 'Back to entries'}
         </button>
       </div>
     );
@@ -338,15 +389,15 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
             className="admin-btn admin-btn-sm admin-btn-secondary"
             onClick={onBack}
           >
-            ← All Entries
+            {isPage ? '← Pages' : '← All Entries'}
           </button>
 
           <input
             type="text"
             className="journal-editor-title-input"
             value={parsed.frontmatter.title || ''}
-            placeholder="Story Title..."
-            aria-label="Story title"
+            placeholder={isPage ? 'Page title...' : 'Story Title...'}
+            aria-label={isPage ? 'Page title' : 'Story title'}
             onChange={(e) => handleFrontmatterChange({ title: e.target.value })}
           />
 
@@ -382,11 +433,27 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
             className="admin-btn admin-btn-sm admin-btn-secondary"
             onClick={() => setShowMetaModal(true)}
           >
-            <IconGear size={14} /> Story Settings
+            <IconGear size={14} /> {isPage ? 'Page Settings' : 'Story Settings'}
           </button>
 
+          {isPage && (
+            <button
+              type="button"
+              className="admin-btn admin-btn-sm admin-btn-secondary"
+              onClick={handleTogglePublish}
+              disabled={saving}
+              title={
+                parsed.frontmatter.draft
+                  ? 'Publish the page and save it now'
+                  : 'Turn the page back into a draft and save it now'
+              }
+            >
+              {parsed.frontmatter.draft ? 'Publish' : 'Unpublish'}
+            </button>
+          )}
+
           <a
-            href={`/journal/${slug}`}
+            href={liveUrl}
             target="_blank"
             rel="noopener noreferrer"
             className="admin-btn admin-btn-sm admin-btn-secondary"
@@ -397,7 +464,7 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
           <button
             type="button"
             className="admin-btn admin-btn-sm admin-btn-primary"
-            onClick={handleSave}
+            onClick={() => handleSave()}
             disabled={saving || !dirty}
           >
             {saving ? (
@@ -415,7 +482,7 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
 
       <DraftNotice
         status={draft.status}
-        subject="entry"
+        subject={isPage ? 'page' : 'entry'}
         onDiscard={discardDraft}
         onRestore={restoreConflictingDraft}
         onDismiss={draft.dismiss}
@@ -477,6 +544,19 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
                 >
                   <IconCamera size={13} /> + Photo
                 </button>
+                <button
+                  type="button"
+                  className="admin-btn admin-btn-xs admin-btn-primary"
+                  onClick={() =>
+                    setAssetPickerTarget({
+                      title: 'Add Photos (one block each)',
+                      onSelectMany: (ids) =>
+                        handleBlocksChange([...parsed.blocks, ...createPhotoBlocks(ids)]),
+                    })
+                  }
+                >
+                  <IconCamera size={13} /> + Photos
+                </button>
                 <button
                   type="button"
                   className="admin-btn admin-btn-xs admin-btn-primary"
@@ -498,13 +578,16 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
                 >
                   <IconFolder size={13} /> + Album
                 </button>
-                <button
-                  type="button"
-                  className="admin-btn admin-btn-xs"
-                  onClick={() => handleAddBlock('map')}
-                >
-                  <IconMap size={13} /> + Map
-                </button>
+                {/* No map block on content pages in v1 (#722). */}
+                {!isPage && (
+                  <button
+                    type="button"
+                    className="admin-btn admin-btn-xs"
+                    onClick={() => handleAddBlock('map')}
+                  >
+                    <IconMap size={13} /> + Map
+                  </button>
+                )}
               </div>
 
               {/* Blocks List */}
@@ -591,8 +674,17 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
         <JournalPreview parsed={parsed} albumAssets={albumAssets} />
       </div>
 
+      {/* Page settings: a side panel, so editing never means going back (#722). */}
+      {showMetaModal && isPage && (
+        <PageSettingsPanel
+          frontmatter={parsed.frontmatter}
+          onChange={handleFrontmatterChange}
+          onClose={() => setShowMetaModal(false)}
+        />
+      )}
+
       {/* Metadata Modal */}
-      {showMetaModal && (
+      {showMetaModal && !isPage && (
         <StorySettingsModal
           frontmatter={parsed.frontmatter}
           onChange={handleFrontmatterChange}
@@ -618,10 +710,18 @@ export function JournalEditor({ slug, mapEnabled, onBack }: JournalEditorProps)
       {assetPickerTarget && (
         <AssetPicker
           title={assetPickerTarget.title}
+          max={assetPickerTarget.max}
           onSelect={(id) => {
-            assetPickerTarget.onSelect(id);
+            assetPickerTarget.onSelect?.(id);
             setAssetPickerTarget(null);
           }}
+          onSelectMany={
+            assetPickerTarget.onSelectMany &&
+            ((ids) => {
+              assetPickerTarget.onSelectMany?.(ids);
+              setAssetPickerTarget(null);
+            })
+          }
           onClose={() => setAssetPickerTarget(null)}
         />
       )}
diff --git a/app/admin/components/journal/JournalStudio.tsx b/app/admin/components/journal/JournalStudio.tsx
index e630150..fd0fe65 100644
--- a/app/admin/components/journal/JournalStudio.tsx
+++ b/app/admin/components/journal/JournalStudio.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import type { JournalEntrySummary } from '@/lib/journal';
-import { serializeJournalMarkdown, sanitizeSlug } from '@/lib/journal';
+import { serializeJournalMarkdown, sanitizeSlug, slugFieldValue } from '@/lib/journal';
 import { JOURNAL_TEMPLATES } from '@/lib/journalTemplates';
 import {
   IconTrash,
@@ -22,6 +22,7 @@ import { useContentRestored } from '../contentRestored';
 import AdminLoadState from '../AdminLoadState';
 import PageHeader from '../PageHeader';
 import { useConfirm } from '../ConfirmDialog';
+import { useModalDialog } from '@/hooks/useModalDialog';
 
 interface JournalStudioProps {
   /** Entry to open, taken from the /admin/journal/[slug] route. */
@@ -50,6 +51,11 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
   const [creating, setCreating] = useState(false);
   /** null = start blank, matching the previous (only) behavior. */
   const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
+  const closeCreateModal = () => {
+    setShowCreateModal(false);
+    setSelectedTemplateId(null);
+  };
+  const createCardRef = useModalDialog(closeCreateModal, showCreateModal);
 
   const handleCreate = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -254,8 +260,16 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
       {/* Create Modal */}
       {showCreateModal && (
         <div className="journal-modal-overlay">
-          <div className="journal-modal-card">
-            <h3 style={{ margin: '0 0 1rem' }}>Create New Journal Entry</h3>
+          <div
+            className="journal-modal-card"
+            ref={createCardRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="journal-new-dialog-title"
+          >
+            <h3 id="journal-new-dialog-title" style={{ margin: '0 0 1rem' }}>
+              Create New Journal Entry
+            </h3>
             <form onSubmit={handleCreate}>
               <div style={{ marginBottom: '1rem' }}>
                 <label
@@ -304,13 +318,13 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
                   className="admin-input"
                   placeholder="e.g. expedition-nordkap"
                   value={newSlug}
-                  onChange={(e) => setNewSlug(sanitizeSlug(e.target.value))}
+                  onChange={(e) => setNewSlug(slugFieldValue(e.target.value))}
                   required
                 />
                 <span
                   style={{ fontSize: '0.75rem', opacity: 0.6, marginTop: '2px', display: 'block' }}
                 >
-                  Will be accessible at /journal/{newSlug || 'slug'}
+                  Will be accessible at /journal/{newSlug ? sanitizeSlug(newSlug) : 'slug'}
                 </span>
               </div>
 
@@ -352,10 +366,7 @@ export function JournalStudio({ slug: activeSlug, mapEnabled }: JournalStudioPro
                 <button
                   type="button"
                   className="admin-btn admin-btn-secondary"
-                  onClick={() => {
-                    setShowCreateModal(false);
-                    setSelectedTemplateId(null);
-                  }}
+                  onClick={closeCreateModal}
                 >
                   Cancel
                 </button>
diff --git a/app/admin/components/journal/PageSettingsPanel.tsx b/app/admin/components/journal/PageSettingsPanel.tsx
new file mode 100644
index 0000000..f5b16cc
--- /dev/null
+++ b/app/admin/components/journal/PageSettingsPanel.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import { useEffect } from 'react';
+import type { ParsedJournal } from '@/lib/journal';
+import PasswordField from '../fields/PasswordField';
+import { IconX } from '../Icons';
+
+type Frontmatter = ParsedJournal['frontmatter'];
+
+interface PageSettingsPanelProps {
+  frontmatter: Frontmatter;
+  onChange: (updates: Partial<Frontmatter>) => void;
+  onClose: () => void;
+}
+
+/**
+ * A content page's settings inside the editor (#722): a side panel rather than
+ * the journal's modal, so the preview stays in view. The slug and the menu
+ * place are edited in Pages, where the collision check and the menu live.
+ */
+export function PageSettingsPanel({ frontmatter, onChange, onClose }: PageSettingsPanelProps) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return (
+    <aside className="page-settings-panel" aria-label="Page settings">
+      <div className="page-settings-panel-head">
+        <h3>Page settings</h3>
+        <button type="button" className="admin-btn-icon" onClick={onClose} title="Close">
+          <IconX size={14} />
+        </button>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="page-settings-description">SEO description</label>
+        <textarea
+          id="page-settings-description"
+          rows={3}
+          value={frontmatter.description || ''}
+          placeholder="One or two sentences for search engines and link previews"
+          // One line in the frontmatter: a line break would end the value.
+          onChange={(e) => onChange({ description: e.target.value.replace(/\s*\n\s*/g, ' ') })}
+        />
+      </div>
+
+      <button
+        type="button"
+        className="setting-row"
+        onClick={() => onChange({ draft: !frontmatter.draft })}
+        aria-pressed={!!frontmatter.draft}
+      >
+        <span className="setting-row-info">
+          <span className="setting-row-title">Draft</span>
+          <span className="setting-row-desc">
+            Only you can see a draft, and it stays out of the menu and the sitemap.
+          </span>
+        </span>
+        <span className={`switch-toggle switch-toggle--sm ${frontmatter.draft ? 'on' : ''}`}>
+          <span className="switch-slider" />
+        </span>
+      </button>
+
+      <div className="admin-field">
+        <span className="admin-field-label">Password (optional)</span>
+        <PasswordField
+          value={frontmatter.password || undefined}
+          onChange={(password) => onChange({ password: password ?? '' })}
+          label="Page password"
+        />
+      </div>
+
+      <p className="page-settings-panel-note">
+        Settings are saved with the page. The URL and the menu place are set in Pages.
+      </p>
+    </aside>
+  );
+}
diff --git a/app/admin/components/journal/StorySettingsModal.tsx b/app/admin/components/journal/StorySettingsModal.tsx
index 71f1f57..818b7fe 100644
--- a/app/admin/components/journal/StorySettingsModal.tsx
+++ b/app/admin/components/journal/StorySettingsModal.tsx
@@ -3,6 +3,7 @@
 import type { ParsedJournal } from '@/lib/journal';
 import type { AssetPickTarget } from './BlockFields';
 import PasswordField from '../fields/PasswordField';
+import { useModalDialog } from '@/hooks/useModalDialog';
 
 type Frontmatter = ParsedJournal['frontmatter'];
 
@@ -20,10 +21,20 @@ export function StorySettingsModal({
   onPickAsset,
   onClose,
 }: StorySettingsModalProps) {
+  const cardRef = useModalDialog(onClose);
+
   return (
     <div className="journal-modal-overlay">
-      <div className="journal-modal-card">
-        <h3 style={{ margin: '0 0 1.25rem' }}>Story Settings &amp; Metadata</h3>
+      <div
+        className="journal-modal-card"
+        ref={cardRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="story-settings-title"
+      >
+        <h3 id="story-settings-title" style={{ margin: '0 0 1.25rem' }}>
+          Story Settings &amp; Metadata
+        </h3>
 
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
           <div>
@@ -153,6 +164,7 @@ export function StorySettingsModal({
 
           <div>
             <label
+              htmlFor="story-password"
               style={{
                 display: 'block',
                 fontSize: '0.8rem',
@@ -162,11 +174,15 @@ export function StorySettingsModal({
             >
               Password Protection (Optional)
             </label>
-            <PasswordField
-              value={frontmatter.password || undefined}
-              onChange={(password) => onChange({ password: password ?? '' })}
-              label="Entry password"
-            />
+            {/* The input takes its styles from .admin-field, as everywhere else
+                PasswordField is used; without it the lock icon sat on the text. */}
+            <div className="admin-field" style={{ marginBottom: 0 }}>
+              <PasswordField
+                id="story-password"
+                value={frontmatter.password || undefined}
+                onChange={(password) => onChange({ password: password ?? '' })}
+              />
+            </div>
           </div>
 
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px', paddingTop: '4px' }}>
diff --git a/app/admin/components/journal/blockOps.ts b/app/admin/components/journal/blockOps.ts
index 36a37d5..5578734 100644
--- a/app/admin/components/journal/blockOps.ts
+++ b/app/admin/components/journal/blockOps.ts
@@ -17,6 +17,26 @@ export function isLegacyAssetRef(assetId: string): boolean {
   return assetId.length > 0 && !ASSET_UUID.test(assetId);
 }
 
+/**
+ * Slots after a multi-pick (#602): picked photos fill the empty slots first,
+ * in pick order, and the rest are appended. With `capacity` (a pair holds two)
+ * the list never grows past it; overflow picks are dropped.
+ */
+export function fillAssetSlots(slots: string[], picked: string[], capacity?: number): string[] {
+  const next = [...slots];
+  const queue = [...picked];
+  for (let i = 0; i < next.length && queue.length > 0; i++) {
+    if (!next[i]) next[i] = queue.shift()!;
+  }
+  next.push(...queue);
+  return capacity === undefined ? next : next.slice(0, capacity);
+}
+
+/** One photo block per picked asset, for "+ Photos" (#602). */
+export function createPhotoBlocks(assetIds: string[]): JournalBlock[] {
+  return assetIds.map((assetId) => ({ type: 'photo', assetId, caption: '', layout: 'contained' }));
+}
+
 /** The block the "Add Block" toolbar inserts for each type. */
 export function createBlock(type: JournalBlock['type']): JournalBlock {
   switch (type) {
diff --git a/app/admin/components/journal/journal-studio.css b/app/admin/components/journal/journal-studio.css
index 619ee35..428e407 100644
--- a/app/admin/components/journal/journal-studio.css
+++ b/app/admin/components/journal/journal-studio.css
@@ -104,7 +104,9 @@
 
 .journal-list-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  /* min(): on a phone the column is narrower than 320px, and a fixed minimum
+     pushed every card past the right edge. */
+  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
   gap: 1.5rem;
   padding: 2rem;
 }
@@ -680,6 +682,12 @@
    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) {
+  /* The workspace already keeps a gutter; a second 2rem one left the cards
+     under 300px wide. */
+  .journal-list-grid {
+    padding: 1.25rem 0;
+  }
+
   .journal-editor-topbar {
     flex-wrap: wrap;
     padding: 0.75rem 1rem;
@@ -710,3 +718,43 @@
     justify-content: center;
   }
 }
+
+/* ── Content page settings: a side panel, not a modal (#722) ── */
+.page-settings-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(360px, 100vw);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.25rem;
+  overflow-y: auto;
+  background: var(--admin-bg-raised);
+  border-left: 1px solid var(--admin-border);
+  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.25);
+}
+
+.page-settings-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.page-settings-panel-head h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.page-settings-panel textarea {
+  width: 100%;
+  resize: vertical;
+}
+
+.page-settings-panel-note {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--admin-text-muted);
+}
diff --git a/app/admin/components/page-builder/AlbumDrawer.tsx b/app/admin/components/page-builder/AlbumDrawer.tsx
index fe2c87a..d49c841 100644
--- a/app/admin/components/page-builder/AlbumDrawer.tsx
+++ b/app/admin/components/page-builder/AlbumDrawer.tsx
@@ -6,6 +6,7 @@ import { Listbox } from '../Listbox';
 import { SORT_OPTIONS } from './sortOptions';
 import type { AlbumEntry, HeroPickerTarget, OrderEditorTarget } from './types';
 import PasswordField from '../fields/PasswordField';
+import { useModalDialog } from '@/hooks/useModalDialog';
 
 interface AlbumDrawerProps {
   album: AlbumEntry;
@@ -36,15 +37,29 @@ export default function AlbumDrawer({
   onEditOrder,
 }: AlbumDrawerProps) {
   const heroThumb = album.heroImage || thumbnailId;
+  const cardRef = useModalDialog(onClose);
 
   return (
     <div className="album-drawer-overlay open" onClick={() => onClose()}>
-      <div className="album-drawer" onClick={(e) => e.stopPropagation()}>
+      <div
+        className="album-drawer"
+        ref={cardRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="album-drawer-title"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="album-drawer-header">
-          <h3>
+          <h3 id="album-drawer-title">
             <IconCamera /> Edit Album Details
           </h3>
-          <button className="admin-btn-icon" onClick={() => onClose()} title="Close details">
+          <button
+            type="button"
+            className="admin-btn-icon"
+            onClick={() => onClose()}
+            title="Close details"
+            aria-label="Close details"
+          >
             <IconX size={14} />
           </button>
         </div>
diff --git a/app/admin/components/page-builder/NewPageDialog.tsx b/app/admin/components/page-builder/NewPageDialog.tsx
new file mode 100644
index 0000000..dbd0fc3
--- /dev/null
+++ b/app/admin/components/page-builder/NewPageDialog.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import { useState } from 'react';
+import { sanitizeSlug, slugFieldValue } from '@/lib/journal';
+import { describeCollision, pageSlugCollision, type SlugTakenBy } from '@/lib/pages';
+import { useModalDialog } from '@/hooks/useModalDialog';
+
+interface NewPageDialogProps {
+  taken: SlugTakenBy;
+  existingPageSlugs: string[];
+  creating: boolean;
+  onCreate: (input: { title: string; slug: string; showInMenu: boolean }) => void;
+  onClose: () => void;
+}
+
+/**
+ * "+ New page" (#722): a title, the slug derived from it (editable), and
+ * whether the page goes into the menu. v1 starts every page blank.
+ */
+export default function NewPageDialog({
+  taken,
+  existingPageSlugs,
+  creating,
+  onCreate,
+  onClose,
+}: NewPageDialogProps) {
+  const cardRef = useModalDialog(onClose);
+  const [title, setTitle] = useState('');
+  const [slug, setSlug] = useState('');
+  const [slugEdited, setSlugEdited] = useState(false);
+  const [showInMenu, setShowInMenu] = useState(true);
+
+  /** What the field shows: the typed slug, or the one derived from the title. */
+  const fieldSlug = slug || (title.trim() ? sanitizeSlug(title) : '');
+  /** What gets created: the typed slug finished, e.g. without a trailing "-". */
+  const effectiveSlug = slug ? sanitizeSlug(slug) : fieldSlug;
+  const collision = !effectiveSlug
+    ? null
+    : existingPageSlugs.includes(effectiveSlug)
+      ? `A page "${effectiveSlug}" already exists.`
+      : (() => {
+          const c = pageSlugCollision(effectiveSlug, taken);
+          return c ? describeCollision(effectiveSlug, c) : null;
+        })();
+
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim() || !effectiveSlug || collision || creating) return;
+    onCreate({ title: title.trim(), slug: effectiveSlug, showInMenu });
+  };
+
+  return (
+    <div className="confirm-backdrop" onClick={onClose}>
+      <div
+        ref={cardRef}
+        className="confirm-card new-page-card"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="new-page-title"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 id="new-page-title" className="confirm-title">
+          New page
+        </h2>
+        <form onSubmit={submit} className="new-page-form">
+          <div className="admin-field">
+            <label htmlFor="new-page-name">Title</label>
+            <input
+              id="new-page-name"
+              value={title}
+              placeholder="e.g. Pricing"
+              autoFocus
+              onChange={(e) => {
+                setTitle(e.target.value);
+                if (!slugEdited) setSlug('');
+              }}
+            />
+          </div>
+          <div className="admin-field">
+            <label htmlFor="new-page-slug">URL</label>
+            <div className="input-slug-wrapper">
+              <input
+                id="new-page-slug"
+                className="subpage-name-input"
+                value={fieldSlug}
+                placeholder="pricing"
+                aria-describedby="new-page-slug-hint"
+                onChange={(e) => {
+                  setSlugEdited(e.target.value !== '');
+                  setSlug(slugFieldValue(e.target.value));
+                }}
+              />
+              <span className="input-slug-preview">/{effectiveSlug || 'slug'}</span>
+            </div>
+            <span
+              id="new-page-slug-hint"
+              className={`admin-field-hint${collision ? ' admin-field-hint--error' : ''}`}
+            >
+              {collision ?? 'Starts blank and as a draft. You can change the URL later.'}
+            </span>
+          </div>
+          <button
+            type="button"
+            className="setting-row"
+            onClick={() => setShowInMenu(!showInMenu)}
+            aria-pressed={showInMenu}
+          >
+            <span className="setting-row-info">
+              <span className="setting-row-title">Show in menu</span>
+              <span className="setting-row-desc">
+                Adds it to the end of the menu; saved with “Save Changes”.
+              </span>
+            </span>
+            <span className={`switch-toggle switch-toggle--sm ${showInMenu ? 'on' : ''}`}>
+              <span className="switch-slider" />
+            </span>
+          </button>
+          <div className="confirm-actions">
+            <button type="button" className="admin-btn admin-btn-ghost" onClick={onClose}>
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="admin-btn admin-btn-primary"
+              disabled={!title.trim() || !effectiveSlug || !!collision || creating}
+            >
+              {creating ? 'Creating…' : 'Create page'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/components/page-builder/PageContentEditor.tsx b/app/admin/components/page-builder/PageContentEditor.tsx
new file mode 100644
index 0000000..f5ed3aa
--- /dev/null
+++ b/app/admin/components/page-builder/PageContentEditor.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { JournalEditor } from '../journal/JournalEditor';
+
+/**
+ * The journal's block editor and live preview in page mode (#722). Back goes
+ * to Pages with the page selected again.
+ */
+export function PageContentEditor({ slug }: { slug: string }) {
+  const router = useRouter();
+  return (
+    <JournalEditor
+      slug={slug}
+      kind="page"
+      onBack={() => router.push(`/admin/pages?page=${encodeURIComponent(slug)}`)}
+    />
+  );
+}
diff --git a/app/admin/components/page-builder/PagePanel.tsx b/app/admin/components/page-builder/PagePanel.tsx
new file mode 100644
index 0000000..a3c8241
--- /dev/null
+++ b/app/admin/components/page-builder/PagePanel.tsx
@@ -0,0 +1,394 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import {
+  parseJournalMarkdown,
+  sanitizeSlug,
+  serializeJournalMarkdown,
+  slugFieldValue,
+  type ParsedJournal,
+} from '@/lib/journal';
+import {
+  describeCollision,
+  pageSlugCollision,
+  type PageSummary,
+  type SlugTakenBy,
+} from '@/lib/pages';
+import PasswordField from '../fields/PasswordField';
+import { IconFileText, IconTrash } from '../Icons';
+import { useConfirm } from '../ConfirmDialog';
+import { useNotify } from '../Notifications';
+import { reportIfSessionExpired } from '../sessionExpiry';
+import { useVersionedSave } from '../useVersionedSave';
+import type { GalleryVersionChange } from '@/lib/admin/pageRefs';
+
+interface PagePanelProps {
+  slug: string;
+  /** Whether gallery.yaml (as edited in the builder) lists the page. */
+  inMenu: boolean;
+  onToggleMenu: () => void;
+  /** Slugs a page may not take. */
+  taken: SlugTakenBy;
+  /** The other pages' slugs, which a rename must not take either. */
+  otherPageSlugs: string[];
+  /**
+   * `galleryVersion` is set when the server rewrote gallery.yaml's menu, so
+   * the builder can follow that change without mistaking it for a foreign
+   * edit (#601).
+   */
+  onSaved: (
+    oldSlug: string,
+    page: PageSummary,
+    menuRenamed: boolean,
+    galleryVersion?: GalleryVersionChange | null,
+  ) => void;
+  onDeleted: (
+    slug: string,
+    removedFromMenu: boolean,
+    galleryVersion?: GalleryVersionChange | null,
+  ) => void;
+}
+
+/**
+ * A content page selected in the structure list (#722): its settings, saved
+ * to content/pages/<slug>.md with the panel's own button. "Show in menu" is
+ * the one exception — it edits gallery.yaml, so it goes with the builder's
+ * Save like every other change to the menu.
+ */
+export default function PagePanel({
+  slug,
+  inMenu,
+  onToggleMenu,
+  taken,
+  otherPageSlugs,
+  onSaved,
+  onDeleted,
+}: PagePanelProps) {
+  const confirm = useConfirm();
+  const notify = useNotify();
+  const [parsed, setParsed] = useState<ParsedJournal | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [title, setTitle] = useState('');
+  const [slugInput, setSlugInput] = useState(slug);
+  const [draft, setDraft] = useState(false);
+  const [password, setPassword] = useState<string | undefined>(undefined);
+  const [description, setDescription] = useState('');
+  const [saving, setSaving] = useState(false);
+  /** The page file as loaded, sent back on save (#601). */
+  const versionRef = useRef<string | null>(null);
+  const versionedSave = useVersionedSave();
+  /** Bumped to load the file again — "Reload" in the conflict prompt. */
+  const [reloadKey, setReloadKey] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    setParsed(null);
+    setLoadError(null);
+    fetch(`/api/admin/pages/${encodeURIComponent(slug)}`)
+      .then(async (res) => {
+        if (!res.ok) {
+          reportIfSessionExpired(res);
+          throw new Error(
+            res.status === 404
+              ? 'There is no file for this page in content/pages/.'
+              : `The server answered ${res.status}.`,
+          );
+        }
+        return res.json();
+      })
+      .then((data: { page: { rawMarkdown: string }; version?: string }) => {
+        if (cancelled) return;
+        versionRef.current = data.version ?? null;
+        const p = parseJournalMarkdown(data.page.rawMarkdown);
+        setParsed(p);
+        setTitle(p.frontmatter.title || '');
+        setSlugInput(slug);
+        setDraft(!!p.frontmatter.draft);
+        setPassword(p.frontmatter.password || undefined);
+        setDescription(p.frontmatter.description || '');
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) setLoadError(err instanceof Error ? err.message : 'Could not load.');
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [slug, reloadKey]);
+
+  // The field keeps what is typed, a trailing "-" included; the page moves to
+  // the finished slug.
+  const targetSlug = slugInput ? sanitizeSlug(slugInput) : '';
+
+  const fm = parsed?.frontmatter;
+  const dirty =
+    !!fm &&
+    (title !== (fm.title || '') ||
+      targetSlug !== slug ||
+      draft !== !!fm.draft ||
+      (password || '') !== (fm.password || '') ||
+      description !== (fm.description || ''));
+
+  const renaming = targetSlug !== slug;
+  const collision = renaming
+    ? otherPageSlugs.includes(targetSlug)
+      ? `A page "${targetSlug}" already exists.`
+      : (() => {
+          const c = pageSlugCollision(targetSlug, taken);
+          return c ? describeCollision(targetSlug, c) : null;
+        })()
+    : null;
+
+  async function save() {
+    if (!parsed || !dirty || collision || !title.trim()) return;
+    if (renaming) {
+      const ok = await confirm({
+        title: `Move this page to /${targetSlug}?`,
+        message: `Links to /${slug} will stop working. There is no automatic redirect.`,
+        confirmLabel: 'Move page',
+      });
+      if (!ok) return;
+    }
+    setSaving(true);
+    try {
+      const markdown = serializeJournalMarkdown({
+        ...parsed,
+        frontmatter: {
+          ...parsed.frontmatter,
+          title: title.trim(),
+          draft: draft || undefined,
+          password: password || undefined,
+          description: description.trim() || undefined,
+        },
+      });
+      const result = await versionedSave(
+        `/api/admin/pages/${encodeURIComponent(slug)}`,
+        { rawMarkdown: markdown, ...(renaming ? { newSlug: targetSlug } : {}) },
+        versionRef,
+        'This page',
+      );
+      if (result.kind === 'reload') {
+        setReloadKey((k) => k + 1);
+        return;
+      }
+      if (result.kind === 'keep') {
+        notify('error', 'Not saved — the page changed elsewhere. Your edits are still here.');
+        return;
+      }
+      if (result.kind === 'failed') {
+        if (!reportIfSessionExpired(result.res)) {
+          notify('error', result.data?.error || 'Failed to save the page');
+        }
+        return;
+      }
+      const data = result.data as {
+        page: { slug: string; rawMarkdown: string };
+        menuRenamed?: boolean;
+        galleryVersion?: GalleryVersionChange | null;
+        /** The page was saved, but its menu entry in gallery.yaml was not updated. */
+        warning?: string;
+      };
+      const written = parseJournalMarkdown(data.page.rawMarkdown);
+      setParsed(written);
+      setPassword(written.frontmatter.password || undefined);
+      const { title: t, description: d, password: pw, draft: dr } = written.frontmatter;
+      onSaved(
+        slug,
+        {
+          slug: data.page.slug,
+          frontmatter: { title: t, description: d, password: pw, draft: dr },
+        },
+        data.menuRenamed === true,
+        data.galleryVersion,
+      );
+      if (data.warning) notify('error', data.warning);
+      else notify('success', 'Page saved.');
+    } catch {
+      notify('error', 'Could not save the page. Check the connection and try again.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function remove() {
+    const ok = await confirm({
+      title: `Delete “${title || slug}”?`,
+      message: inMenu
+        ? 'The page is also removed from the menu in gallery.yaml. Both files are backed up first and can be restored under Backups.'
+        : 'A copy is kept and can be restored under Backups.',
+      confirmLabel: 'Delete page',
+      danger: true,
+    });
+    if (!ok) return;
+    try {
+      const res = await fetch(`/api/admin/pages/${encodeURIComponent(slug)}`, {
+        method: 'DELETE',
+      });
+      const data = await res.json().catch(() => null);
+      if (!res.ok) {
+        if (!reportIfSessionExpired(res))
+          notify('error', data?.error || 'Failed to delete the page');
+        return;
+      }
+      onDeleted(slug, data?.removedFromMenu === true, data?.galleryVersion);
+      if (typeof data?.warning === 'string') notify('error', data.warning);
+      else notify('success', 'Page deleted.');
+    } catch {
+      notify('error', 'Could not delete the page. Check the connection and try again.');
+    }
+  }
+
+  if (loadError) {
+    return (
+      <section className="builder-section">
+        <div className="builder-section-header">
+          <h2>
+            <IconFileText /> /{slug}
+          </h2>
+        </div>
+        <div className="admin-error" role="alert">
+          <strong>This page could not be loaded.</strong> {loadError}
+          {inMenu && (
+            <p>
+              The menu still lists it. Switch off “Show in menu” and save the structure to remove
+              the entry.
+            </p>
+          )}
+        </div>
+        {inMenu && (
+          <button type="button" className="admin-btn admin-btn-secondary" onClick={onToggleMenu}>
+            Remove from menu
+          </button>
+        )}
+      </section>
+    );
+  }
+
+  if (!parsed) {
+    return (
+      <div className="admin-loading">
+        <div className="admin-spinner" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="builder-section page-panel">
+      <div className="builder-section-header">
+        <h2>
+          <IconFileText /> {fm?.title || slug}
+        </h2>
+        <a
+          href={`/${encodeURIComponent(slug)}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="admin-btn admin-btn-xs admin-btn-ghost"
+          title="Open the live page in a new tab"
+        >
+          /{slug} ↗
+        </a>
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="page-title">Title</label>
+        <input id="page-title" value={title} onChange={(e) => setTitle(e.target.value)} />
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="page-slug">URL</label>
+        <div className="input-slug-wrapper">
+          <input
+            id="page-slug"
+            className="subpage-name-input"
+            value={slugInput}
+            onChange={(e) => setSlugInput(slugFieldValue(e.target.value))}
+            aria-describedby="page-slug-hint"
+          />
+          <span className="input-slug-preview">/{targetSlug}</span>
+        </div>
+        <span
+          id="page-slug-hint"
+          className={`admin-field-hint${collision ? ' admin-field-hint--error' : renaming ? ' admin-field-hint--warn' : ''}`}
+        >
+          {collision
+            ? collision
+            : renaming
+              ? `Links to /${slug} will stop working. There is no automatic redirect.`
+              : 'Checked against subpages, albums, journal entries and built-in routes.'}
+        </span>
+      </div>
+
+      <div className="page-panel-switches">
+        <button type="button" className="setting-row" onClick={onToggleMenu} aria-pressed={inMenu}>
+          <span className="setting-row-info">
+            <span className="setting-row-title">Show in menu</span>
+            <span className="setting-row-desc">
+              {inMenu
+                ? 'Listed in the header menu. Drag it in the structure list to move it.'
+                : 'Not in the menu, but reachable at its URL — for pages shared by link.'}{' '}
+              Saved with “Save Changes”.
+            </span>
+          </span>
+          <span className={`switch-toggle switch-toggle--sm ${inMenu ? 'on' : ''}`}>
+            <span className="switch-slider" />
+          </span>
+        </button>
+
+        <button
+          type="button"
+          className="setting-row"
+          onClick={() => setDraft(!draft)}
+          aria-pressed={draft}
+        >
+          <span className="setting-row-info">
+            <span className="setting-row-title">Draft</span>
+            <span className="setting-row-desc">
+              Only you can see a draft. It stays out of the menu and the sitemap.
+            </span>
+          </span>
+          <span className={`switch-toggle switch-toggle--sm ${draft ? 'on' : ''}`}>
+            <span className="switch-slider" />
+          </span>
+        </button>
+      </div>
+
+      <div className="admin-field">
+        <span className="admin-field-label">Password (optional)</span>
+        <PasswordField value={password} onChange={setPassword} label="Page password" />
+      </div>
+
+      <div className="admin-field">
+        <label htmlFor="page-description">SEO description</label>
+        <textarea
+          id="page-description"
+          rows={2}
+          value={description}
+          placeholder="One or two sentences for search engines and link previews"
+          onChange={(e) => setDescription(e.target.value.replace(/\s*\n\s*/g, ' '))}
+        />
+      </div>
+
+      <div className="page-panel-actions">
+        <Link href={`/admin/pages/edit/${slug}`} className="admin-btn admin-btn-secondary">
+          Edit content →
+        </Link>
+        <button
+          type="button"
+          className="admin-btn admin-btn-primary"
+          onClick={save}
+          disabled={!dirty || saving || !!collision || !title.trim()}
+        >
+          {saving ? 'Saving…' : 'Save page'}
+        </button>
+        <button
+          type="button"
+          className="admin-btn admin-btn-danger"
+          onClick={remove}
+          style={{ marginLeft: 'auto' }}
+        >
+          <IconTrash size={14} /> Delete
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/app/admin/components/page-builder/SortableTiles.tsx b/app/admin/components/page-builder/SortableTiles.tsx
index 90942cd..904cd27 100644
--- a/app/admin/components/page-builder/SortableTiles.tsx
+++ b/app/admin/components/page-builder/SortableTiles.tsx
@@ -6,8 +6,10 @@
  */
 
 import { useSortable } from '@dnd-kit/sortable';
+import { useDroppable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
-import { IconFolder, IconGripVertical, IconLock, IconPencil, IconX } from '../Icons';
+import type { ReactNode } from 'react';
+import { IconFileText, IconFolder, IconGripVertical, IconLock, IconPencil, IconX } from '../Icons';
 import type { Subpage } from './types';
 
 // ── Sortable Hero Tile ─────────────────────────────────────────
@@ -211,3 +213,79 @@ export function SortableSubpageRow({
     </div>
   );
 }
+
+// ── Sortable Page Row (#722) ───────────────────────────────────
+
+/**
+ * A content page in the structure list: document icon and a PAGE tag, so it
+ * reads as something other than a subpage. The same row sits in the menu
+ * list and in "Not in menu"; `id` says which, for the drag handler.
+ */
+export function SortablePageRow({
+  id,
+  title,
+  isActive,
+  draft,
+  hasPassword,
+  missing,
+  onClick,
+}: {
+  id: string;
+  title: string;
+  isActive: boolean;
+  draft?: boolean;
+  hasPassword?: boolean;
+  /** Referenced from gallery.yaml, but there is no file for it. */
+  missing?: boolean;
+  onClick: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
+  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' : ''} ${draft || missing ? '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">
+          <IconFileText size={14} />
+        </span>
+        <span className="pb-row-name">
+          {title}
+          {hasPassword && <IconLock size={11} />}
+        </span>
+        {missing ? (
+          <span className="pb-row-state">Missing</span>
+        ) : draft ? (
+          <span className="pb-row-state">Draft</span>
+        ) : (
+          <span className="pb-row-tag">Page</span>
+        )}
+      </button>
+    </div>
+  );
+}
+
+/**
+ * The "Not in menu" group as a drop target, so a page dragged out of the
+ * menu lands there even when the group is empty (#722).
+ */
+export function OffMenuDropZone({ id, children }: { id: string; children: ReactNode }) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+  return (
+    <div ref={setNodeRef} className={`pb-offmenu ${isOver ? 'is-over' : ''}`}>
+      {children}
+    </div>
+  );
+}
diff --git a/app/admin/components/page-builder/galleryOps.ts b/app/admin/components/page-builder/galleryOps.ts
index 5ac89c5..8f5b88d 100644
--- a/app/admin/components/page-builder/galleryOps.ts
+++ b/app/admin/components/page-builder/galleryOps.ts
@@ -90,6 +90,15 @@ export const addHero = (g: GalleryState, assetId: string): GalleryState => ({
   hero: [...g.hero, assetId],
 });
 
+/** Append several hero photos in pick order, skipping any already listed. */
+export const addHeroes = (g: GalleryState, assetIds: string[]): GalleryState => ({
+  ...g,
+  hero: [
+    ...g.hero,
+    ...assetIds.filter((id, i) => !g.hero.includes(id) && assetIds.indexOf(id) === i),
+  ],
+});
+
 export const removeHero = (g: GalleryState, index: number): GalleryState => ({
   ...g,
   hero: g.hero.filter((_, i) => i !== index),
@@ -113,6 +122,14 @@ export const addSubpage = (g: GalleryState): GalleryState => ({
 export const removeSubpage = (g: GalleryState, index: number): GalleryState => ({
   ...g,
   subpages: g.subpages.filter((_, i) => i !== index),
+  // A page after the removed subpage moves up with the rest of the menu.
+  ...(g.pageRefs
+    ? {
+        pageRefs: g.pageRefs.map((r) =>
+          r.position > index ? { ...r, position: r.position - 1 } : r,
+        ),
+      }
+    : {}),
 });
 
 export const updateSubpage = (g: GalleryState, index: number, updates: Partial<Subpage>) =>
@@ -142,6 +159,98 @@ export const updateSection = (
   updates: Partial<Section>,
 ) => mapSection(g, subpageIndex, sectionIndex, (sec) => ({ ...sec, ...updates }));
 
+// ── Menu: subpages and content pages together (#722) ────────────
+
+/** One row of the menu list: a subpage by its index, or a page by its slug. */
+export type MenuItem = { kind: 'subpage'; index: number } | { kind: 'page'; slug: string };
+
+/** The menu in the order it is saved and shown: subpages with pages interleaved. */
+export function menuItems(g: GalleryState): MenuItem[] {
+  const refs = g.pageRefs ?? [];
+  const out: MenuItem[] = [];
+  for (let i = 0; i <= g.subpages.length; i++) {
+    for (const ref of refs) {
+      if (Math.min(ref.position, g.subpages.length) === i)
+        out.push({ kind: 'page', slug: ref.slug });
+    }
+    if (i < g.subpages.length) out.push({ kind: 'subpage', index: i });
+  }
+  return out;
+}
+
+/** Rebuild the state from a reordered menu list. */
+function fromMenu(g: GalleryState, items: MenuItem[]): GalleryState {
+  const subpages: GalleryState['subpages'] = [];
+  const pageRefs: NonNullable<GalleryState['pageRefs']> = [];
+  for (const item of items) {
+    if (item.kind === 'subpage') subpages.push(g.subpages[item.index]);
+    else pageRefs.push({ slug: item.slug, position: subpages.length });
+  }
+  return { ...g, subpages, pageRefs };
+}
+
+/**
+ * Move a menu row from one position to another. Subpage indexes change with
+ * it; `followMenuMove` tells the builder where an open subpage went.
+ */
+export function moveMenuItem(g: GalleryState, from: number, to: number): GalleryState {
+  const items = menuItems(g);
+  if (!items[from] || !items[to]) return g;
+  return fromMenu(g, arrayMove(items, from, to));
+}
+
+/** The index an open subpage has after moveMenuItem(from, to). */
+export function followMenuMove(
+  g: GalleryState,
+  open: number | null,
+  from: number,
+  to: number,
+): number | null {
+  if (open === null) return null;
+  const moved = arrayMove(menuItems(g), from, to);
+  let index = 0;
+  for (const item of moved) {
+    if (item.kind !== 'subpage') continue;
+    if (item.index === open) return index;
+    index++;
+  }
+  return open;
+}
+
+export function isPageInMenu(g: GalleryState, slug: string): boolean {
+  return (g.pageRefs ?? []).some((r) => r.slug === slug);
+}
+
+/**
+ * Put a page in the menu or take it out. `at` is a menu row index to insert
+ * before; without one the page goes to the end of the menu.
+ */
+export function setPageInMenu(
+  g: GalleryState,
+  slug: string,
+  inMenu: boolean,
+  at?: number,
+): GalleryState {
+  const without = (g.pageRefs ?? []).filter((r) => r.slug !== slug);
+  if (!inMenu) {
+    return isPageInMenu(g, slug) ? { ...g, pageRefs: without } : g;
+  }
+  if (isPageInMenu(g, slug)) return g;
+  const items = menuItems(g);
+  const index = at === undefined ? items.length : Math.max(0, Math.min(at, items.length));
+  items.splice(index, 0, { kind: 'page', slug });
+  return fromMenu(g, items);
+}
+
+/** Follow a page rename, keeping its place in the menu. */
+export function renamePageRef(g: GalleryState, from: string, to: string): GalleryState {
+  if (!isPageInMenu(g, from)) return g;
+  return {
+    ...g,
+    pageRefs: (g.pageRefs ?? []).map((r) => (r.slug === from ? { ...r, slug: to } : r)),
+  };
+}
+
 // ── Reading ─────────────────────────────────────────────────────
 
 /** The "03 — Collection" number the page renders: counted over enabled subpages only. */
diff --git a/app/admin/components/page-builder/galleryYaml.ts b/app/admin/components/page-builder/galleryYaml.ts
index 6f218ad..7926555 100644
--- a/app/admin/components/page-builder/galleryYaml.ts
+++ b/app/admin/components/page-builder/galleryYaml.ts
@@ -14,6 +14,22 @@ export interface GalleryState {
   hero: string[];
   albums: AlbumEntry[];
   subpages: Subpage[];
+  /**
+   * Content pages in the menu (#722): `- page: <slug>` among the subpages.
+   * Optional so a draft saved before pages existed still loads.
+   */
+  pageRefs?: PageRef[];
+}
+
+/**
+ * A content page placed in the menu. `position` is the number of subpages in
+ * front of it, so the subpage list keeps its own indexes — every drawer and
+ * album address in the builder is one — and the menu order is rebuilt from
+ * both lists when saving. Refs sharing a position keep their array order.
+ */
+export interface PageRef {
+  slug: string;
+  position: number;
 }
 
 /**
@@ -27,8 +43,18 @@ export function parseGalleryYaml(raw: Record<string, unknown>): GalleryState {
   );
 
   let subpages: Subpage[] = [];
+  const pageRefs: PageRef[] = [];
   if (Array.isArray(raw.subpages)) {
-    subpages = (raw.subpages as Array<Record<string, unknown>>).map((sp) => ({
+    const entries = raw.subpages as Array<Record<string, unknown>>;
+    const subpageEntries: Array<Record<string, unknown>> = [];
+    for (const entry of entries) {
+      if (entry && typeof entry.page === 'string') {
+        pageRefs.push({ slug: entry.page, position: subpageEntries.length });
+      } else {
+        subpageEntries.push(entry);
+      }
+    }
+    subpages = subpageEntries.map((sp) => ({
       name: (sp.name as string) || '',
       title: sp.title as string | undefined,
       subtitle: sp.subtitle as string | undefined,
@@ -77,7 +103,7 @@ export function parseGalleryYaml(raw: Record<string, unknown>): GalleryState {
     });
   }
 
-  return { hero, albums, subpages };
+  return { hero, albums, subpages, pageRefs };
 }
 
 /** The gallery.yaml object for a builder state. Empty groups are left out. */
@@ -90,8 +116,9 @@ export function serializeGallery(gallery: GalleryState): Record<string, unknown>
   if (gallery.albums.length > 0) {
     yamlData.albums = serializeAlbumEntries(gallery.albums);
   }
-  if (gallery.subpages.length > 0) {
-    yamlData.subpages = gallery.subpages.map((sp) => {
+  const pageRefs = gallery.pageRefs ?? [];
+  if (gallery.subpages.length > 0 || pageRefs.length > 0) {
+    const subpageEntries = 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;
@@ -124,7 +151,25 @@ export function serializeGallery(gallery: GalleryState): Record<string, unknown>
 
       return entry;
     });
+    yamlData.subpages = interleave(subpageEntries, pageRefs);
   }
 
   return yamlData;
 }
+
+/** Subpage entries with `{ page }` entries placed at their positions. */
+function interleave(
+  subpageEntries: Record<string, unknown>[],
+  pageRefs: PageRef[],
+): Record<string, unknown>[] {
+  const out: Record<string, unknown>[] = [];
+  for (let i = 0; i <= subpageEntries.length; i++) {
+    // A ref beyond the end (a subpage was removed) lands at the end.
+    for (const ref of pageRefs) {
+      const at = Math.min(ref.position, subpageEntries.length);
+      if (at === i) out.push({ page: ref.slug });
+    }
+    if (i < subpageEntries.length) out.push(subpageEntries[i]);
+  }
+  return out;
+}
diff --git a/app/admin/components/page-builder/types.ts b/app/admin/components/page-builder/types.ts
index 678e9e5..e0ef16e 100644
--- a/app/admin/components/page-builder/types.ts
+++ b/app/admin/components/page-builder/types.ts
@@ -111,7 +111,10 @@ export interface PickerTarget {
 
 export interface HeroPickerTarget {
   albumId?: string;
-  onSelect: (assetId: string) => void;
+  /** Single pick; the picker closes after it. */
+  onSelect?: (assetId: string) => void;
+  /** Multi-select: several picks confirmed at once (#602). */
+  onSelectMany?: (assetIds: string[]) => void;
   currentAssetIds?: string[];
   title?: string;
 }
diff --git a/app/admin/components/settings/AboutSection.tsx b/app/admin/components/settings/AboutSection.tsx
index a8c7212..dd197da 100644
--- a/app/admin/components/settings/AboutSection.tsx
+++ b/app/admin/components/settings/AboutSection.tsx
@@ -1,10 +1,12 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import * as Icons from '../Icons';
 import type { SaveStatus } from '../SaveBar';
 import { useDraft, readDraft } from '../useDraft';
 import { useContentRestored } from '../contentRestored';
+import { useVersionedSave } from '../useVersionedSave';
+import { useLatest } from '../useLatest';
 
 interface AboutMeta {
   portrait?: string;
@@ -54,6 +56,8 @@ export function useAboutEditor(active: boolean) {
   const [aboutStatus, setAboutStatus] = useState<SaveStatus>(null);
   const [aboutGearText, setAboutGearText] = useState('');
   const [serverAbout, setServerAbout] = useState<AboutDraft | null>(null);
+  /** The fields as last rendered: tell a finished save whether editing went on meanwhile. */
+  const latest = useLatest({ meta: aboutMeta, body: aboutBody, gearText: aboutGearText });
 
   // Unsaved About edits survive a tab switch or Reload, like settings (#592).
   const draft = useDraft<AboutDraft>(
@@ -62,6 +66,9 @@ export function useAboutEditor(active: boolean) {
     aboutDirty,
   );
   const loadDraft = draft.load;
+  /** about.md as loaded, sent back on save so a change elsewhere is caught (#601). */
+  const versionRef = useRef<string | null>(null);
+  const versionedSave = useVersionedSave();
 
   const applyAbout = (value: AboutDraft) => {
     setAboutMeta(value.meta);
@@ -82,6 +89,7 @@ export function useAboutEditor(active: boolean) {
         );
       }
       const data = await res.json();
+      versionRef.current = typeof data.version === 'string' ? data.version : null;
       const loaded: AboutDraft = {
         meta: data.meta || {},
         body: data.body || '',
@@ -128,22 +136,37 @@ export function useAboutEditor(active: boolean) {
     }
 
     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 result = await versionedSave(
+        '/api/admin/about',
+        { meta: cleanedMeta, body: aboutBody },
+        versionRef,
+        'The About page',
+      );
+      if (result.kind === 'reload') {
+        draft.discard();
+        await loadAboutContent();
+      } else if (result.kind === 'keep') {
+        setAboutStatus({ kind: 'error', message: 'Not saved — the About page changed elsewhere.' });
+      } else if (result.kind === 'saved') {
+        const data = result.data;
         const saved: AboutDraft = { meta: cleanedMeta, body: aboutBody, gearText: aboutGearText };
+        // Edited while the request was out: those edits are not saved yet.
+        const now = latest.current;
+        const editedMeanwhile =
+          now.meta !== aboutMeta || now.body !== aboutBody || now.gearText !== aboutGearText;
         setServerAbout(saved);
-        draft.saved(aboutFingerprint(saved));
-        setAboutDirty(false);
-        setAboutStatus({ kind: 'success', message: data.message || 'Saved!' });
+        draft.saved(aboutFingerprint(saved), editedMeanwhile);
+        if (!editedMeanwhile) setAboutDirty(false);
+        setAboutStatus({
+          kind: 'success',
+          message: typeof data.message === 'string' ? data.message : 'Saved!',
+        });
         setTimeout(() => setAboutStatus(null), 4000);
       } else {
-        const err = await res.json();
-        setAboutStatus({ kind: 'error', message: `Error: ${err.error}` });
+        setAboutStatus({
+          kind: 'error',
+          message: `Error: ${result.data?.error ?? `HTTP ${result.res.status}`}`,
+        });
       }
     } catch {
       setAboutStatus({ kind: 'error', message: 'Error: Failed to save' });
diff --git a/app/admin/components/settings/GeneralSection.tsx b/app/admin/components/settings/GeneralSection.tsx
index 5ff13c9..d826717 100644
--- a/app/admin/components/settings/GeneralSection.tsx
+++ b/app/admin/components/settings/GeneralSection.tsx
@@ -137,6 +137,23 @@ export default function GeneralSection({ settings, update, updateMany }: Section
             onToggle={() => update('proofing.enabled', settings.proofing?.enabled === false)}
           />
         </div>
+        {/* Shown even while proofing is off globally: a subpage can switch it
+            on for itself (`proofing: true`), so the address still has to be
+            settable from here. */}
+        <div className="admin-field">
+          <label htmlFor="proofing-email">Proofing email</label>
+          <input
+            id="proofing-email"
+            type="email"
+            value={settings.proofing?.email || ''}
+            onChange={(e) => update('proofing.email', e.target.value)}
+            placeholder="Defaults to the footer contact email"
+          />
+          <p className="admin-field-hint">
+            Where &ldquo;Email to photographer&rdquo; sends a selection. Falls back to the footer
+            contact email; when neither is set, the button is hidden.
+          </p>
+        </div>
       </FeatureGroup>
 
       <FeatureGroup
diff --git a/app/admin/components/settings/GridSection.tsx b/app/admin/components/settings/GridSection.tsx
index 2194758..ce1e574 100644
--- a/app/admin/components/settings/GridSection.tsx
+++ b/app/admin/components/settings/GridSection.tsx
@@ -7,6 +7,7 @@ import {
   PHOTO_GRID_COLUMNS_MIN,
   PHOTO_GRID_GAP_MAX,
 } from '@/lib/config/schema';
+import { FieldError } from './fields';
 import type { SectionProps } from './types';
 
 const LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow', 'justified'];
@@ -131,7 +132,7 @@ function AspectRatioPreview({ value }: { value: string }) {
   );
 }
 
-export default function GridSection({ settings, update }: SectionProps) {
+export default function GridSection({ settings, update, fieldErrors }: SectionProps) {
   return (
     <div className="settings-panel">
       <div className="settings-section-header">
@@ -185,7 +186,10 @@ export default function GridSection({ settings, update }: SectionProps) {
             max={PHOTO_GRID_COLUMNS_MAX}
             value={settings.grid?.columns ?? 3}
             onChange={(e) => update('grid.columns', parseInt(e.target.value) || 3)}
+            aria-invalid={fieldErrors?.['grid.columns'] ? true : undefined}
+            aria-describedby={fieldErrors?.['grid.columns'] ? 'grid-columns-error' : undefined}
           />
+          <FieldError id="grid-columns-error" message={fieldErrors?.['grid.columns']} />
         </div>
         <div className="admin-field">
           <label htmlFor="grid-gap-spacing">Gap Spacing (px)</label>
@@ -196,7 +200,10 @@ export default function GridSection({ settings, update }: SectionProps) {
             max={PHOTO_GRID_GAP_MAX}
             value={settings.grid?.gap ?? 12}
             onChange={(e) => update('grid.gap', parseInt(e.target.value) || 0)}
+            aria-invalid={fieldErrors?.['grid.gap'] ? true : undefined}
+            aria-describedby={fieldErrors?.['grid.gap'] ? 'grid-gap-error' : undefined}
           />
+          <FieldError id="grid-gap-error" message={fieldErrors?.['grid.gap']} />
         </div>
       </div>
     </div>
diff --git a/app/admin/components/settings/LegalSection.tsx b/app/admin/components/settings/LegalSection.tsx
index 0f87ea7..cec6d78 100644
--- a/app/admin/components/settings/LegalSection.tsx
+++ b/app/admin/components/settings/LegalSection.tsx
@@ -3,10 +3,12 @@
 import * as Icons from '../Icons';
 import ToggleCard from '../fields/ToggleCard';
 import PrivacyEditor from '../PrivacyEditor';
+import EnvLockNote from '../fields/EnvLockNote';
 import { CONTACT_RETENTION_DEFAULT, CONTACT_RETENTION_MAX, isHttpUrl } from '@/lib/config/schema';
 import type { SectionProps } from './types';
 
-export default function LegalSection({ settings, update }: SectionProps) {
+export default function LegalSection({ settings, update, envLocks }: SectionProps) {
+  const notifyLock = envLocks?.['contact.notifyUrl'];
   // 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();
@@ -206,16 +208,19 @@ export default function LegalSection({ settings, update }: SectionProps) {
               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"
+              aria-invalid={(!notifyLock && notifyUrlInvalid) || undefined}
+              aria-describedby={notifyLock ? 'contact-notify-url-lock' : 'contact-notify-url-hint'}
+              disabled={!!notifyLock}
             />
+            {notifyLock && <EnvLockNote id="contact-notify-url-lock" variable={notifyLock} />}
             <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.'}
+                : 'Gets a fixed "new message" push, with nothing about the sender. Pick a topic name nobody can guess.' +
+                  (notifyLock ? '' : ' CONTACT_NOTIFY_URL overrides this.')}
             </p>
           </div>
           <div className="admin-field">
diff --git a/app/admin/components/settings/SecuritySection.tsx b/app/admin/components/settings/SecuritySection.tsx
index 846634c..d205db9 100644
--- a/app/admin/components/settings/SecuritySection.tsx
+++ b/app/admin/components/settings/SecuritySection.tsx
@@ -3,10 +3,12 @@
 import * as Icons from '../Icons';
 import ToggleCard from '../fields/ToggleCard';
 import PasswordField from '../fields/PasswordField';
+import EnvLockNote from '../fields/EnvLockNote';
 import { resolveWatermarkOpacity } from '@/lib/config/schema';
 import type { SectionProps } from './types';
 
-export default function SecuritySection({ settings, update }: SectionProps) {
+export default function SecuritySection({ settings, update, envLocks }: SectionProps) {
+  const passwordLock = envLocks?.sitePassword;
   return (
     <div className="settings-panel">
       <div className="settings-section-header">
@@ -27,11 +29,18 @@ export default function SecuritySection({ settings, update }: SectionProps) {
           onChange={(password) => update('sitePassword', password ?? '')}
           placeholder="Leave empty for a public site"
           label="Site password"
+          disabled={!!passwordLock}
         />
+        {passwordLock && <EnvLockNote variable={passwordLock} />}
         <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.
+          Stored as a <code>scrypt:…</code> hash in <code>settings.yaml</code>, never as typed.
+          {!passwordLock && (
+            <>
+              {' '}
+              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>
 
diff --git a/app/admin/components/settings/SeoSection.tsx b/app/admin/components/settings/SeoSection.tsx
index 44083fa..0cbad4d 100644
--- a/app/admin/components/settings/SeoSection.tsx
+++ b/app/admin/components/settings/SeoSection.tsx
@@ -2,11 +2,13 @@
 
 import * as Icons from '../Icons';
 import ToggleCard from '../fields/ToggleCard';
+import { FieldError } from './fields';
 import type { SectionProps } from './types';
 
 export default function SeoSection({
   settings,
   update,
+  fieldErrors,
   siteUrlInfo,
 }: SectionProps & {
   /** Resolved site URL and its origin, so the panel can name SITE_URL (#472). */
@@ -52,7 +54,10 @@ export default function SeoSection({
           value={settings.url || ''}
           onChange={(e) => update('url', e.target.value)}
           placeholder="https://folio.example"
+          aria-invalid={fieldErrors?.url ? true : undefined}
+          aria-describedby={fieldErrors?.url ? 'seo-site-url-error' : undefined}
         />
+        <FieldError id="seo-site-url-error" message={fieldErrors?.url} />
         <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
diff --git a/app/admin/components/settings/ThemeSection.tsx b/app/admin/components/settings/ThemeSection.tsx
index 8f796f8..6412b9b 100644
--- a/app/admin/components/settings/ThemeSection.tsx
+++ b/app/admin/components/settings/ThemeSection.tsx
@@ -4,7 +4,7 @@ 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 { effectiveTheme, FeatureRow, FieldError } from './fields';
 import type { SectionProps } from './types';
 
 const PRESETS = ['studio-modern', 'studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph'];
@@ -264,7 +264,7 @@ function PresetSpecs({ value }: { value: string }) {
   );
 }
 
-export default function ThemeSection({ settings, update }: SectionProps) {
+export default function ThemeSection({ settings, update, fieldErrors }: 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'>(() =>
@@ -417,8 +417,11 @@ export default function ThemeSection({ settings, update }: SectionProps) {
               value={settings.theme?.accent || ''}
               onChange={(e) => update('theme.accent', e.target.value)}
               placeholder={theme.accent}
+              aria-invalid={fieldErrors?.['theme.accent'] ? true : undefined}
+              aria-describedby={fieldErrors?.['theme.accent'] ? 'theme-accent-error' : undefined}
             />
           </div>
+          <FieldError id="theme-accent-error" message={fieldErrors?.['theme.accent']} />
         </div>
       </div>
 
diff --git a/app/admin/components/settings/fields.tsx b/app/admin/components/settings/fields.tsx
index c256e75..0ea3867 100644
--- a/app/admin/components/settings/fields.tsx
+++ b/app/admin/components/settings/fields.tsx
@@ -9,6 +9,20 @@ import { resolveTheme } from '@/lib/config/theme';
 import type { SettingsYaml } from '@/lib/config/schema';
 import type { Settings } from './types';
 
+/**
+ * The message under an input whose value the site would ignore (`fieldErrors`).
+ * Not a live region: it changes as you type, and announcing every keystroke
+ * would drown the field itself. The input points at it with aria-describedby.
+ */
+export function FieldError({ id, message }: { id: string; message?: string }) {
+  if (!message) return null;
+  return (
+    <p id={id} className="admin-field-hint admin-field-hint--error">
+      {message}
+    </p>
+  );
+}
+
 /**
  * One labelled block of related switches.
  *
diff --git a/app/admin/components/settings/types.ts b/app/admin/components/settings/types.ts
index cc89b42..c9824d2 100644
--- a/app/admin/components/settings/types.ts
+++ b/app/admin/components/settings/types.ts
@@ -1,3 +1,5 @@
+import type { EnvLocks } from '@/lib/admin/envLocks';
+
 /**
  * Shared shape of the settings form (#554). The sections edit one object
  * that mirrors settings.yaml; SettingsEditor owns it and hands each section
@@ -76,6 +78,7 @@ export interface Settings {
   proofing?: {
     enabled?: boolean;
     allowMailto?: boolean;
+    email?: string;
   };
   watermark?: {
     enabled?: boolean;
@@ -92,4 +95,12 @@ export interface SectionProps {
   update: (path: string, value: unknown) => void;
   /** Set several paths in one state update. */
   updateMany: (entries: Record<string, unknown>) => void;
+  /** Fields an environment variable overrides; rendered locked (#605). */
+  envLocks?: EnvLocks;
+  /**
+   * Dotted path → message, for values the site would ignore (the save route
+   * rejects them). Checked as the form changes, so the message stands next to
+   * the input before a save is tried.
+   */
+  fieldErrors?: Record<string, string>;
 }
diff --git a/app/admin/components/systemHealth.ts b/app/admin/components/systemHealth.ts
index 1fba8c3..afde88b 100644
--- a/app/admin/components/systemHealth.ts
+++ b/app/admin/components/systemHealth.ts
@@ -7,8 +7,8 @@ import type { DoctorLevel } from '@/lib/admin/doctor';
  */
 export const DOCTOR_LEVEL_EVENT = 'folio:doctor-level';
 
-/** The three tones `status-badge-btn` is styled for. */
-export type BadgeTone = 'connected' | 'disconnected' | 'unknown';
+/** The tones `status-badge-btn` is styled for. */
+export type BadgeTone = 'connected' | 'warning' | 'disconnected' | 'unknown';
 
 export interface SystemHealthInput {
   statusLoading: boolean;
@@ -49,7 +49,9 @@ export function systemHealth({
   if (setupIncomplete) return { tone: 'unknown', label: 'Setup Incomplete' };
   if (immich === 'error') return { tone: 'disconnected', label: 'System Degraded' };
   if (doctorLevel === 'error') return { tone: 'disconnected', label: 'Needs Attention' };
-  if (doctorLevel === 'warn') return { tone: 'unknown', label: 'Check Diagnostics' };
+  // Amber, like the warnings on the diagnostics page it points to. Grey read
+  // as "no answer", which is what `unknown` means.
+  if (doctorLevel === 'warn') return { tone: 'warning', label: 'Check Diagnostics' };
   if (immich === 'ok') return { tone: 'connected', label: 'System OK' };
   return { tone: 'unknown', label: 'Status Unknown' };
 }
diff --git a/app/admin/components/useDraft.ts b/app/admin/components/useDraft.ts
index fa43c8c..dba5fa4 100644
--- a/app/admin/components/useDraft.ts
+++ b/app/admin/components/useDraft.ts
@@ -108,6 +108,11 @@ export function useDraft<T>(key: string, value: T, dirty: boolean) {
    */
   const holdRef = useRef(false);
   const [status, setStatus] = useState<DraftStatus>('none');
+  /** The value as last rendered, for `saved()` when edits arrived during the save. */
+  const valueRef = useRef(value);
+  useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
 
   // 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
@@ -142,12 +147,19 @@ export function useDraft<T>(key: string, value: T, dirty: boolean) {
     [key],
   );
 
-  /** Call after a successful save, with the fingerprint of what was saved. */
+  /**
+   * Call after a successful save, with the fingerprint of what was saved.
+   * `stillDirty` when the editor was changed while the save was in flight: those
+   * edits stay a draft, now on top of the version just written. Clearing it
+   * would leave them unkept until the next keystroke, since the mirror effect
+   * above only runs when the value or the dirty flag changes.
+   */
   const saved = useCallback(
-    (base: string) => {
+    (base: string, stillDirty = false) => {
       baseRef.current = base;
       holdRef.current = false;
-      clearDraft(key);
+      if (stillDirty) writeDraft(key, { base, value: valueRef.current });
+      else clearDraft(key);
       setStatus('none');
     },
     [key],
diff --git a/app/admin/components/useLatest.ts b/app/admin/components/useLatest.ts
new file mode 100644
index 0000000..b0333bf
--- /dev/null
+++ b/app/admin/components/useLatest.ts
@@ -0,0 +1,20 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * A ref that always holds the value of the latest render.
+ *
+ * For code that awaits a request and then has to know whether the editor moved
+ * on meanwhile: a save handler closes over the state it started with, so after
+ * the `await` it cannot tell "nothing changed" from "the operator kept typing".
+ * Comparing what was sent with `ref.current` can (every edit replaces the state
+ * value, so identity is enough).
+ */
+export function useLatest<T>(value: T) {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
diff --git a/app/admin/components/useVersionedSave.ts b/app/admin/components/useVersionedSave.ts
new file mode 100644
index 0000000..05bd0d5
--- /dev/null
+++ b/app/admin/components/useVersionedSave.ts
@@ -0,0 +1,97 @@
+'use client';
+
+/**
+ * Saving a content file without clobbering a change made elsewhere (#601).
+ *
+ * Each editor keeps the `version` its GET returned in a ref and saves through
+ * this hook, which sends it as `If-Match`. When the server answers 409 with
+ * `conflict: true` — the file was saved from another tab or device, edited by
+ * hand, or restored from a backup since it was loaded — the operator picks:
+ *
+ * - Reload: throw away this editor's edits and load the file as it is now.
+ * - Overwrite anyway: save again against the new version, replacing that change.
+ * - Keep editing (cancel): nothing happens; the edits and their draft stay.
+ *
+ * Other 409s (a rename onto a taken slug) carry no `conflict` flag and are
+ * returned like any other failure.
+ */
+
+import { useCallback, type MutableRefObject } from 'react';
+import { useChoice } from './ConfirmDialog';
+
+/** The If-Match header for a version, or none before the first load. */
+export function ifMatch(version: string | null): Record<string, string> {
+  return version ? { 'If-Match': `"${version}"` } : {};
+}
+
+/** The body of any JSON answer; routes return objects. */
+export type SaveData = Record<string, unknown> & { error?: string };
+
+export type VersionedSaveResult =
+  | { kind: 'saved'; res: Response; data: SaveData }
+  | { kind: 'failed'; res: Response; data: SaveData | null }
+  | { kind: 'reload' }
+  | { kind: 'keep' };
+
+export function isEditConflict(res: Response, data: unknown): data is { version: string } {
+  return (
+    res.status === 409 &&
+    !!data &&
+    typeof data === 'object' &&
+    (data as { conflict?: unknown }).conflict === true &&
+    typeof (data as { version?: unknown }).version === 'string'
+  );
+}
+
+type ConflictChoice = 'overwrite' | 'reload';
+
+/**
+ * `what` names the file in the dialog ("The settings", "This entry").
+ * A network failure throws, as a plain fetch would.
+ */
+export function useVersionedSave() {
+  const choose = useChoice();
+
+  return useCallback(
+    async (
+      url: string,
+      body: unknown,
+      versionRef: MutableRefObject<string | null>,
+      what: string,
+    ): Promise<VersionedSaveResult> => {
+      let version = versionRef.current;
+      for (;;) {
+        const res = await fetch(url, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json', ...ifMatch(version) },
+          body: JSON.stringify(body),
+        });
+        const data = (await res.json().catch(() => null)) as SaveData | null;
+
+        if (isEditConflict(res, data)) {
+          const choice = await choose<ConflictChoice>({
+            title: 'Changed elsewhere',
+            message: `${what} was changed since you opened it — in another tab, on another device, by hand or by a backup restore. Saving now would replace that change.`,
+            actions: [
+              { id: 'overwrite', label: 'Overwrite anyway' },
+              { id: 'reload', label: 'Reload (discard mine)' },
+            ],
+            cancelLabel: 'Keep editing',
+          });
+          if (choice === 'overwrite') {
+            version = data.version;
+            continue;
+          }
+          return { kind: choice === 'reload' ? 'reload' : 'keep' };
+        }
+
+        if (res.ok && data) {
+          if (typeof data.version === 'string') versionRef.current = data.version;
+          return { kind: 'saved', res, data };
+        }
+        return { kind: 'failed', res, data };
+      }
+    },
+    [choose],
+  );
+}
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index a8bf1e8..5bdd74f 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -16,9 +16,15 @@ export const metadata: Metadata = {
  */
 export const dynamic = 'force-dynamic';
 
+/**
+ * `lang="en"`: `<html lang>` follows the site language (settings.yaml `lang`),
+ * but the admin is deliberately untranslated. Without this a screen reader
+ * read the English interface with a German voice on a `lang: de` site.
+ * The Listbox popup is portalled to <body> and still inherits the root value.
+ */
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="admin-layout">
+    <div className="admin-layout" lang="en">
       <AdminShell>{children}</AdminShell>
     </div>
   );
diff --git a/app/admin/pages/edit/[slug]/page.tsx b/app/admin/pages/edit/[slug]/page.tsx
new file mode 100644
index 0000000..b68a60d
--- /dev/null
+++ b/app/admin/pages/edit/[slug]/page.tsx
@@ -0,0 +1,11 @@
+import { PageContentEditor } from '../../../components/page-builder/PageContentEditor';
+
+/** The block editor for one content page (#722), reached from Pages. */
+export default async function AdminPageContentPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  return <PageContentEditor slug={slug} />;
+}
diff --git a/app/admin/pages/page.tsx b/app/admin/pages/page.tsx
index 6c9b478..ed446d6 100644
--- a/app/admin/pages/page.tsx
+++ b/app/admin/pages/page.tsx
@@ -7,7 +7,7 @@ export default function AdminPagesPage() {
       <PageHeader
         kicker="Content"
         title="Pages"
-        description="The home page hero, standalone albums and every subpage. Drag to reorder; changes go live when saved."
+        description="The home page hero, standalone albums, subpages and content pages. Drag to reorder; changes go live when saved."
       />
       <PageBuilder />
     </>
diff --git a/app/admin/proofing/page.tsx b/app/admin/proofing/page.tsx
new file mode 100644
index 0000000..69f6c55
--- /dev/null
+++ b/app/admin/proofing/page.tsx
@@ -0,0 +1,5 @@
+import ProofingView from '../components/ProofingView';
+
+export default function AdminProofingPage() {
+  return <ProofingView />;
+}
diff --git a/app/admin/styles/album-picker.css b/app/admin/styles/album-picker.css
index 97fb64e..d9e8baf 100644
--- a/app/admin/styles/album-picker.css
+++ b/app/admin/styles/album-picker.css
@@ -74,16 +74,32 @@
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  width: 100%;
   padding: 0.6rem 0.75rem;
+  border: none;
   border-radius: 8px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
   cursor: pointer;
   transition: background 0.1s;
 }
 
-.picker-item:hover:not(.used) {
+.picker-item:hover:not(.used),
+.picker-item:focus-visible {
   background: var(--admin-bg-elevated);
 }
 
+.picker-item:focus-visible {
+  outline: var(--admin-focus-ring);
+  outline-offset: -2px;
+}
+
+.picker-item:focus-visible .picker-select-badge {
+  opacity: 1;
+}
+
 .picker-item.used {
   opacity: 0.5;
   cursor: not-allowed;
diff --git a/app/admin/styles/analytics.css b/app/admin/styles/analytics.css
index a9a31c7..4d5c293 100644
--- a/app/admin/styles/analytics.css
+++ b/app/admin/styles/analytics.css
@@ -106,25 +106,32 @@
   align-items: flex-end;
   background: var(--admin-bg-elevated);
   border-radius: 6px;
-  overflow: hidden;
 }
 
+/* --admin-primary never existed, so every bar fell back to a fixed blue;
+   the accent is what the top-pages bars below use. */
 .bar-fill {
   width: 100%;
-  background: var(--admin-primary, #3b82f6);
-  border-radius: 6px 6px 0 0;
+  background: var(--admin-accent);
+  border-radius: 6px;
   transition: height 0.3s ease;
   position: relative;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
 }
 
+/* Above the bar, not inside it: inside, a short bar cut its number in half
+   and an empty day had nowhere to put its 0. The chart's padding-top leaves
+   room above the tallest bar. */
 .bar-val {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 3px;
   font-size: 0.65rem;
   font-weight: 600;
-  color: #fff;
-  margin-top: 4px;
+  line-height: 1;
+  color: var(--admin-text-secondary);
+  white-space: nowrap;
 }
 
 .bar-label {
diff --git a/app/admin/styles/asset-order.css b/app/admin/styles/asset-order.css
index aad5029..c90d759 100644
--- a/app/admin/styles/asset-order.css
+++ b/app/admin/styles/asset-order.css
@@ -20,15 +20,16 @@
   padding: 0.75rem;
 }
 
+/* A warning, so --admin-warning: the accent is red under studio-modern. */
 .order-editor-notice {
   margin: 0 0 0.75rem;
   padding: 0.5rem 0.7rem;
   border-radius: 6px;
   font-size: 0.78rem;
   line-height: 1.4;
-  color: var(--admin-accent);
-  border: 1px solid rgba(245, 158, 11, 0.3);
-  background: rgba(245, 158, 11, 0.05);
+  color: var(--admin-warning);
+  border: 1px solid color-mix(in srgb, var(--admin-warning) 30%, transparent);
+  background: color-mix(in srgb, var(--admin-warning) 5%, transparent);
 }
 
 .order-editor-section + .order-editor-section {
@@ -91,15 +92,27 @@
   cursor: grabbing;
 }
 
+/* A button, so the tail can be pinned from the keyboard. */
 .order-tile-unpinned {
+  display: block;
+  width: 100%;
+  padding: 0;
+  font: inherit;
+  color: inherit;
   opacity: 0.55;
 }
 
-.order-tile-unpinned:hover {
+.order-tile-unpinned:hover,
+.order-tile-unpinned:focus-visible {
   opacity: 1;
   border-color: var(--admin-border);
 }
 
+.order-tile:focus-visible {
+  outline: var(--admin-focus-ring);
+  outline-offset: 2px;
+}
+
 .order-tile-index {
   position: absolute;
   bottom: 4px;
@@ -110,7 +123,7 @@
   font-size: 0.68rem;
   font-weight: 700;
   text-align: center;
-  color: #000;
+  color: var(--admin-on-accent);
   background: var(--admin-accent);
 }
 
diff --git a/app/admin/styles/asset-picker.css b/app/admin/styles/asset-picker.css
index 2c19648..dd6c2db 100644
--- a/app/admin/styles/asset-picker.css
+++ b/app/admin/styles/asset-picker.css
@@ -113,7 +113,7 @@
   height: 22px;
   border-radius: 50%;
   background: var(--admin-accent);
-  color: #000;
+  color: var(--admin-on-accent);
   font-size: 0.7rem;
   display: flex;
   align-items: center;
@@ -167,3 +167,85 @@
   margin-top: 0.3rem;
   display: block;
 }
+
+/* ── Search and multi-select (#602) ────────────────────────── */
+
+.asset-picker-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1rem;
+  border-bottom: 1px solid var(--admin-border);
+  color: var(--admin-text-muted);
+}
+
+.asset-picker-search-input {
+  flex: 1;
+  padding: 0.45rem 0.7rem;
+  background: var(--admin-bg-input);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  color: var(--admin-text);
+  font-size: 0.85rem;
+}
+
+.asset-picker-search-input:focus-visible {
+  outline: var(--admin-focus-ring);
+  outline-offset: 1px;
+  border-color: var(--admin-border-focus);
+}
+
+/* Tiles are buttons now; reset what the browser gives a button. */
+button.asset-picker-tile {
+  display: block;
+  width: 100%;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.asset-picker-tile:focus-visible {
+  outline: var(--admin-focus-ring);
+  outline-offset: 2px;
+}
+
+.asset-picker-tile:disabled:not(.used) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.asset-picker-tile.selected {
+  border-color: var(--admin-accent);
+  box-shadow: 0 0 0 2px var(--admin-accent);
+}
+
+.asset-picker-order-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 11px;
+  background: var(--admin-accent);
+  color: var(--admin-on-accent);
+  font-size: 0.72rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.asset-picker-selection {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1rem;
+  border-top: 1px solid var(--admin-border);
+  font-size: 0.85rem;
+  color: var(--admin-text-secondary);
+}
+
+.asset-picker-selection > span {
+  flex: 1;
+}
diff --git a/app/admin/styles/drawers.css b/app/admin/styles/drawers.css
index 58e3694..77ff1da 100644
--- a/app/admin/styles/drawers.css
+++ b/app/admin/styles/drawers.css
@@ -90,7 +90,7 @@ h3 .svg-icon {
 
 .album-tile-btn:hover {
   background: var(--admin-accent);
-  color: #000;
+  color: var(--admin-on-accent);
   border-color: var(--admin-accent);
 }
 
diff --git a/app/admin/styles/messages.css b/app/admin/styles/messages.css
index 0d2ecb1..654c3a5 100644
--- a/app/admin/styles/messages.css
+++ b/app/admin/styles/messages.css
@@ -12,7 +12,7 @@
   padding: 0.1rem 0.5rem;
   border-radius: 999px;
   background: var(--admin-accent);
-  color: #fff;
+  color: var(--admin-on-accent);
   font-size: 0.7rem;
   font-weight: 600;
 }
diff --git a/app/admin/styles/proofing.css b/app/admin/styles/proofing.css
new file mode 100644
index 0000000..a3029ad
--- /dev/null
+++ b/app/admin/styles/proofing.css
@@ -0,0 +1,92 @@
+/* The client proofing view (Admin → Proofing). Builds on the analytics panels. */
+
+.proofing-create-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0 1rem;
+}
+
+.proofing-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.proofing-card-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.proofing-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.proofing-card-body {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.proofing-badge {
+  font-size: 0.7rem;
+  font-weight: 500;
+  padding: 0.1rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--admin-border);
+  color: var(--admin-text-secondary);
+}
+
+.proofing-badge--submitted {
+  border-color: var(--admin-success);
+  color: var(--admin-success);
+}
+
+.proofing-badge--expired {
+  border-color: var(--admin-warning);
+  color: var(--admin-warning);
+}
+
+.proofing-card--expired {
+  opacity: 0.75;
+}
+
+.proofing-picks {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 0.75rem;
+}
+
+.proofing-pick {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.proofing-pick img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 4px;
+  background: var(--admin-bg-input);
+}
+
+.proofing-pick-name {
+  font-size: 0.7rem;
+  color: var(--admin-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/app/admin/styles/redesign.css b/app/admin/styles/redesign.css
index 6902036..af1545d 100644
--- a/app/admin/styles/redesign.css
+++ b/app/admin/styles/redesign.css
@@ -183,7 +183,7 @@
   padding: 0.05rem 0.4rem;
   border-radius: 999px;
   background: var(--admin-accent);
-  color: #fff;
+  color: var(--admin-on-accent);
   font-family: var(--admin-font-label);
   font-size: 0.68rem;
   text-align: center;
@@ -214,17 +214,34 @@
   justify-content: flex-start;
 }
 
-/* In the sidebar foot the dropdown opens upwards and to the right. */
+/* In the sidebar foot the dropdown opens upwards, as wide as the foot. The
+   sidebar scrolls (overflow-y: auto), which clips sideways too: a fixed 280px
+   panel lost its values past the 232px column. */
 .admin-sidebar .status-dropdown {
   top: auto;
   bottom: 100%;
   left: 0;
-  right: auto;
+  right: 0;
   margin: 0 0 0.5rem;
-  width: 280px;
+  width: auto;
   border-radius: var(--admin-radius);
 }
 
+.admin-sidebar .status-item {
+  gap: 0.75rem;
+}
+
+.admin-sidebar .status-val {
+  text-align: right;
+}
+
+/* The collapsed sidebar does not clip (overflow: visible below), so the panel
+   keeps its width and opens out of the 64px column. */
+.admin-app.is-collapsed .admin-sidebar .status-dropdown {
+  right: auto;
+  width: 280px;
+}
+
 .admin-sidebar-actions {
   display: flex;
   flex-direction: column;
@@ -656,6 +673,7 @@
 
 .confirm-actions {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-end;
   gap: 0.5rem;
   margin-top: 1.4rem;
@@ -836,6 +854,82 @@
   text-transform: uppercase;
 }
 
+/* Content pages in the structure list (#722): a document icon and a PAGE tag
+   tell them apart from subpages at a glance. */
+.pb-row-tag {
+  padding: 0 0.35rem;
+  border-radius: 2px;
+  background: var(--admin-bg-elevated);
+  font-family: var(--admin-font-label);
+  font-size: 0.58rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--admin-text-secondary);
+}
+
+.pb-offmenu {
+  min-height: 2.25rem;
+  border-radius: var(--admin-radius);
+}
+
+.pb-offmenu.is-over {
+  outline: 1px dashed var(--admin-border-hover);
+}
+
+.pb-offmenu .empty-hint {
+  margin: 0;
+  padding: 0.45rem 0.6rem;
+  font-size: 0.75rem;
+}
+
+.page-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 720px;
+}
+
+.page-panel .builder-section-header {
+  margin-bottom: 0;
+}
+
+.page-panel textarea {
+  width: 100%;
+  resize: vertical;
+}
+
+.page-panel-switches {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.page-panel-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.new-page-card {
+  width: min(440px, 100%);
+}
+
+.new-page-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.pb-add-row {
+  display: flex;
+  gap: 0.35rem;
+}
+
+.pb-add-row .pb-add {
+  flex: 1;
+}
+
 .pb-add {
   display: flex;
   align-items: center;
@@ -868,6 +962,11 @@
 .subpage-drawer-container--inline {
   max-width: none;
   max-height: none;
+  /* The overlay sheet is 100dvh tall on a phone (subpage-sheet.css). In place,
+     that height clipped everything past the first screen — album list, grid
+     settings, Delete — and the footer slid over the password field. The
+     sheet grows with its content and the page scrolls. */
+  height: auto;
   border-radius: var(--admin-radius);
   box-shadow: none;
   animation: none;
@@ -891,6 +990,11 @@
     position: static;
     max-height: none;
   }
+
+  /* Picking a row scrolls the stacked panel up (PageBuilder revealPanel). */
+  .pb-panel {
+    scroll-margin-top: 1rem;
+  }
 }
 
 /* A custom album title is marked by weight, not by the accent: red italics
@@ -1324,3 +1428,34 @@
     min-height: 44px;
   }
 }
+
+/* ── Env-locked fields (#605) ──────────────────────────────── */
+
+/* A field an environment variable overrides: the input is disabled and this
+   note names the variable. Neutral pill, not the warning or accent colour —
+   the lock is a fact about the deployment, not a problem. */
+.admin-env-lock {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 0.4rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--admin-text-muted);
+}
+
+.admin-env-lock-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--admin-border-hover);
+  border-radius: 999px;
+  font-family: var(--admin-font-label);
+  font-size: 0.62rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
diff --git a/app/admin/styles/save-bar-floating.css b/app/admin/styles/save-bar-floating.css
index b5b8a96..9f5cc70 100644
--- a/app/admin/styles/save-bar-floating.css
+++ b/app/admin/styles/save-bar-floating.css
@@ -27,8 +27,10 @@
   animation: save-bar-in 0.2s ease-out;
 }
 
+/* Unsaved changes are a warning, never the accent: studio-modern makes the
+   accent red, and the bar read as an error. */
 .floating-save-bar.dirty {
-  border-color: var(--admin-accent);
+  border-color: var(--admin-warning);
 }
 
 /* Keyframes must carry the translateX(-50%) or the bar jumps horizontally. */
@@ -47,7 +49,7 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: #ff9800;
+  background: var(--admin-warning);
   display: inline-block;
   margin-right: 6px;
   animation: pulse 1.5s infinite;
@@ -56,15 +58,15 @@
 @keyframes pulse {
   0% {
     transform: scale(0.95);
-    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--admin-warning) 70%, transparent);
   }
   70% {
     transform: scale(1);
-    box-shadow: 0 0 0 8px rgba(255, 152, 0, 0);
+    box-shadow: 0 0 0 8px transparent;
   }
   100% {
     transform: scale(0.95);
-    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
+    box-shadow: 0 0 0 0 transparent;
   }
 }
 
diff --git a/app/admin/styles/settings-editor.css b/app/admin/styles/settings-editor.css
index 896d7bb..811dbfe 100644
--- a/app/admin/styles/settings-editor.css
+++ b/app/admin/styles/settings-editor.css
@@ -269,6 +269,11 @@
   animation: pulse-red 1.5s infinite;
 }
 
+/* The doctor found something worth a look, nothing broken: amber, still. */
+.status-badge-btn.warning .status-dot {
+  background-color: var(--admin-warning);
+}
+
 /* The diagnostics request itself did not run — deliberately not red, and not
    animated: an unanswered check is not a fault report. */
 .status-badge-btn.unknown .status-dot {
@@ -640,6 +645,11 @@
   color: var(--admin-error);
 }
 
+/* A consequence to know about, not an error: --admin-accent may be red (#722). */
+.admin-field-hint--warn {
+  color: var(--admin-warning);
+}
+
 /* 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 {
diff --git a/app/admin/styles/shell.css b/app/admin/styles/shell.css
index 959fe3e..c685ca9 100644
--- a/app/admin/styles/shell.css
+++ b/app/admin/styles/shell.css
@@ -98,7 +98,7 @@
   display: inline-flex;
   align-items: center;
   font-size: 0.75rem;
-  color: var(--admin-accent);
+  color: var(--admin-warning);
   font-weight: 500;
 }
 
diff --git a/app/admin/styles/subpage-sheet.css b/app/admin/styles/subpage-sheet.css
index 1699f91..857600c 100644
--- a/app/admin/styles/subpage-sheet.css
+++ b/app/admin/styles/subpage-sheet.css
@@ -37,7 +37,7 @@
 .hover-action-btn {
   font-size: 0.78rem;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--admin-on-accent);
   background: var(--admin-accent, #e60012);
   padding: 0.4rem 0.85rem;
   border-radius: 20px;
diff --git a/app/admin/styles/tokens.css b/app/admin/styles/tokens.css
index 5479cbb..be4c23a 100644
--- a/app/admin/styles/tokens.css
+++ b/app/admin/styles/tokens.css
@@ -18,8 +18,13 @@
   --admin-border-focus: #777777;
   --admin-text: #f0f0f0;
   --admin-text-secondary: #a0a0a0;
-  --admin-text-muted: #707070;
-  --admin-accent: #f59e0b;
+  /* ≥4.6:1 on every admin surface (#0c0c0c–#222222); #707070 fell to 3.2:1. */
+  --admin-text-muted: #8a8a8a;
+  /* Not amber: that is --admin-warning, and with both the same every active
+     marker and focus ring read as a warning. 7.7:1 on the background. */
+  --admin-accent: #60a5fa;
+  /* Text on an accent fill (counts, badges). */
+  --admin-on-accent: #000000;
   /* Focus used to show only as a border colour change from #2e2e2e to
      #666666, a contrast of 2.37:1 where WCAG 1.4.11 asks for 3:1 against
      adjacent colours, so keyboard users could barely see where they were.
@@ -53,8 +58,10 @@
   --admin-border-focus: #7f7f7f;
   --admin-text: #1a1a1a;
   --admin-text-secondary: #555555;
-  --admin-text-muted: #888888;
-  --admin-accent: #d97706;
+  /* ≥4.6:1 on white and on #efefee; #888888 was 3.1–3.5:1. */
+  --admin-text-muted: #6b6b6b;
+  --admin-accent: #2563eb;
+  --admin-on-accent: #ffffff;
   --admin-success: #16a34a;
   --admin-warning: #b45309;
   --admin-error: #dc2626;
@@ -66,6 +73,20 @@
   --admin-overlay: rgba(0, 0, 0, 0.4);
 }
 
+/* studio-modern restyles the admin in its preset file with a red accent and
+   warm greys. Two of its values are corrected here, one step more specific
+   (html) so the order the sheets load in does not matter: its muted text
+   (#6b6b66 dark, #8a8a84 light) sat at 3.0–3.6:1, and text on its red reads
+   better white (4.8:1) than black (4.4:1). */
+html[data-preset='studio-modern'] .admin-layout {
+  --admin-text-muted: #8c8c86;
+  --admin-on-accent: #ffffff;
+}
+
+html[data-preset='studio-modern'][data-theme='light'] .admin-layout {
+  --admin-text-muted: #6b6b66;
+}
+
 .admin-layout {
   min-height: 100vh;
   background: var(--admin-bg);
diff --git a/app/api/__tests__/site-gate.test.ts b/app/api/__tests__/site-gate.test.ts
index 9357de0..6fb3158 100644
--- a/app/api/__tests__/site-gate.test.ts
+++ b/app/api/__tests__/site-gate.test.ts
@@ -91,6 +91,42 @@ const GATED: { name: string; call: () => Promise<Response> }[] = [
         { params: Promise.resolve({ album: 'tok' }) } as never,
       ),
   },
+  {
+    name: 'GET /api/download/[album]/[id]',
+    call: async () =>
+      (await import('../download/[album]/[id]/route')).GET(
+        request('/api/download/tok/tok') as never,
+        { params: Promise.resolve({ album: 'tok', id: 'tok' }) } as never,
+      ),
+  },
+  // Client proofing links: the site password applies to clients as well.
+  {
+    name: 'PUT /api/proof/[token]/selection',
+    call: async () =>
+      (await import('../proof/[token]/selection/route')).PUT(
+        new NextRequest('http://localhost/api/proof/tok/selection', {
+          method: 'PUT',
+          body: '{"selection":[]}',
+        }) as never,
+        { params: Promise.resolve({ token: 'tok' }) } as never,
+      ),
+  },
+  {
+    name: 'POST /api/proof/[token]/submit',
+    call: async () =>
+      (await import('../proof/[token]/submit/route')).POST(
+        new NextRequest('http://localhost/api/proof/tok/submit', { method: 'POST' }) as never,
+        { params: Promise.resolve({ token: 'tok' }) } as never,
+      ),
+  },
+  {
+    name: 'GET /api/proof/[token]/archive',
+    call: async () =>
+      (await import('../proof/[token]/archive/route')).GET(
+        request('/api/proof/tok/archive') as never,
+        { params: Promise.resolve({ token: 'tok' }) } as never,
+      ),
+  },
   {
     // Stores whatever a visitor sends; a locked site accepts nothing from strangers.
     name: 'POST /api/contact',
@@ -101,6 +137,68 @@ const GATED: { name: string; call: () => Promise<Response> }[] = [
   },
 ];
 
+/**
+ * Routes that answer a locked site on purpose, keyed like the GATED names
+ * (path under /api). Everything else under app/api must be in GATED.
+ * /api/admin is absent: it has its own password and its own suite
+ * (app/api/admin/__tests__/admin-guards.test.ts).
+ */
+const OPEN: Record<string, string> = {
+  health: 'a container health probe runs without cookies',
+  auth: 'the login endpoint cannot sit behind the lock it opens',
+  'fonts/css': 'the gate page is set in the theme fonts',
+  'fonts/file/[name]': 'the gate page is set in the theme fonts',
+  favicon: 'the gate page shows the site icon',
+  install: 'the first-run wizard; setup-token gated, refuses once installed',
+  'install/albums': 'the first-run wizard; setup-token gated, refuses once installed',
+  webhook: 'server-to-server from Immich, HMAC-verified',
+  'analytics/track': 'counts a view of the gate itself; returns no content',
+};
+
+/** `GET /api/download/[album]/[id]` → `download/[album]/[id]`. */
+const routeDir = (name: string) => name.replace(/^[A-Z]+ \/api\//, '');
+
+describe('site gate coverage', () => {
+  it('has a GATED or OPEN row for every public route module under app/api', async () => {
+    const fs = await import('fs');
+    const path = await import('path');
+    const apiDir = path.join(process.cwd(), 'app/api');
+
+    const found: string[] = [];
+    const walk = (dir: string) => {
+      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        const full = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name === '__tests__') continue;
+          walk(full);
+        } else if (/^route\.tsx?$/.test(entry.name)) {
+          found.push(path.relative(apiDir, path.dirname(full)).replace(/\\/g, '/'));
+        }
+      }
+    };
+    walk(apiDir);
+
+    const covered = new Set([...GATED.map((r) => routeDir(r.name)), ...Object.keys(OPEN)]);
+    const uncovered = found.filter((p) => !p.startsWith('admin/') && !covered.has(p));
+
+    expect(uncovered, `Public API routes with no site-gate row: ${uncovered.join(', ')}`).toEqual(
+      [],
+    );
+  });
+
+  it('lists no route in OPEN that does not exist', async () => {
+    const fs = await import('fs');
+    const path = await import('path');
+    const missing = Object.keys(OPEN).filter((dir) => {
+      const base = path.join(process.cwd(), 'app/api', dir);
+      return (
+        !fs.existsSync(path.join(base, 'route.ts')) && !fs.existsSync(path.join(base, 'route.tsx'))
+      );
+    });
+    expect(missing).toEqual([]);
+  });
+});
+
 describe('public content routes behind a locked site', () => {
   beforeEach(() => {
     config.sitePassword = 'letmein';
diff --git a/app/api/admin/__tests__/admin-guards.test.ts b/app/api/admin/__tests__/admin-guards.test.ts
index 23218e7..a94f2ae 100644
--- a/app/api/admin/__tests__/admin-guards.test.ts
+++ b/app/api/admin/__tests__/admin-guards.test.ts
@@ -248,6 +248,106 @@ const ROUTES: {
       { params: Promise.resolve({ slug: 'test-slug' }) },
     ],
   },
+  {
+    name: 'GET /api/admin/pages',
+    path: 'pages',
+    load: () => import('../pages/route'),
+    method: 'GET',
+    args: () => [],
+  },
+  {
+    name: 'POST /api/admin/pages',
+    path: 'pages',
+    load: () => import('../pages/route'),
+    method: 'POST',
+    args: () => [new Request('http://localhost/api/admin/pages', { method: 'POST', body: '{}' })],
+  },
+  {
+    name: 'GET /api/admin/pages/[slug]',
+    path: 'pages/[slug]',
+    load: () => import('../pages/[slug]/route'),
+    method: 'GET',
+    args: () => [
+      new Request('http://localhost/api/admin/pages/test-slug'),
+      { params: Promise.resolve({ slug: 'test-slug' }) },
+    ],
+  },
+  {
+    name: 'PUT /api/admin/pages/[slug]',
+    path: 'pages/[slug]',
+    load: () => import('../pages/[slug]/route'),
+    method: 'PUT',
+    args: () => [
+      new Request('http://localhost/api/admin/pages/test-slug', { method: 'PUT', body: '{}' }),
+      { params: Promise.resolve({ slug: 'test-slug' }) },
+    ],
+  },
+  {
+    name: 'DELETE /api/admin/pages/[slug]',
+    path: 'pages/[slug]',
+    load: () => import('../pages/[slug]/route'),
+    method: 'DELETE',
+    args: () => [
+      new Request('http://localhost/api/admin/pages/test-slug', { method: 'DELETE' }),
+      { params: Promise.resolve({ slug: 'test-slug' }) },
+    ],
+  },
+  {
+    name: 'GET /api/admin/proofing',
+    path: 'proofing',
+    load: () => import('../proofing/route'),
+    method: 'GET',
+    args: () => [new Request('http://localhost/api/admin/proofing')],
+  },
+  {
+    name: 'POST /api/admin/proofing',
+    path: 'proofing',
+    load: () => import('../proofing/route'),
+    method: 'POST',
+    args: () => [
+      new Request('http://localhost/api/admin/proofing', { method: 'POST', body: '{}' }),
+    ],
+  },
+  {
+    name: 'GET /api/admin/proofing/[id]',
+    path: 'proofing/[id]',
+    load: () => import('../proofing/[id]/route'),
+    method: 'GET',
+    args: () => [
+      new Request('http://localhost/api/admin/proofing/abc'),
+      { params: Promise.resolve({ id: 'abc' }) },
+    ],
+  },
+  {
+    name: 'PATCH /api/admin/proofing/[id]',
+    path: 'proofing/[id]',
+    load: () => import('../proofing/[id]/route'),
+    method: 'PATCH',
+    args: () => [
+      new Request('http://localhost/api/admin/proofing/abc', { method: 'PATCH', body: '{}' }),
+      { params: Promise.resolve({ id: 'abc' }) },
+    ],
+  },
+  {
+    name: 'DELETE /api/admin/proofing/[id]',
+    path: 'proofing/[id]',
+    load: () => import('../proofing/[id]/route'),
+    method: 'DELETE',
+    args: () => [
+      new Request('http://localhost/api/admin/proofing/abc', { method: 'DELETE' }),
+      { params: Promise.resolve({ id: 'abc' }) },
+    ],
+  },
+  {
+    name: 'GET /api/admin/proofing/[id]/export',
+    path: 'proofing/[id]/export',
+    load: () => import('../proofing/[id]/export/route'),
+    method: 'GET',
+    args: () => [
+      new Request('http://localhost/api/admin/proofing/abc/export'),
+      { params: Promise.resolve({ id: 'abc' }) },
+    ],
+  },
 ];
 
 describe('admin route guards', () => {
diff --git a/app/api/admin/__tests__/assets-search.test.ts b/app/api/admin/__tests__/assets-search.test.ts
new file mode 100644
index 0000000..4f3cd6e
--- /dev/null
+++ b/app/api/admin/__tests__/assets-search.test.ts
@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { NextRequest } from 'next/server';
+
+vi.mock('@/lib/admin/auth', () => ({
+  isAdminEnabled: () => true,
+  isAdminAuthenticated: async () => true,
+  COOKIE_NAME: 'folio_admin_session',
+}));
+
+vi.mock('@/lib/config', () => ({
+  getConfig: vi.fn(() => ({
+    needsCredentials: false,
+    immich: { apiUrl: 'http://immich.test/api', apiKey: 'key' },
+  })),
+}));
+
+import { GET } from '../assets/route';
+
+type Item = { id: string; originalFileName: string; fileCreatedAt: string; isFavorite: boolean };
+const item = (id: string): Item => ({
+  id,
+  originalFileName: `${id}.jpg`,
+  fileCreatedAt: '2024-05-17T10:00:00.000Z',
+  isFavorite: false,
+});
+
+let fetchMock: ReturnType<typeof vi.fn>;
+const bodies = () =>
+  fetchMock.mock.calls.map(([, init]) => JSON.parse((init as RequestInit).body as string));
+
+function respond(...pages: Array<{ items: Item[]; nextPage: string | null }>) {
+  for (const p of pages) {
+    fetchMock.mockResolvedValueOnce(new Response(JSON.stringify({ assets: p }), { status: 200 }));
+  }
+}
+
+async function get(query: string) {
+  const res = await GET(new NextRequest(`http://localhost/api/admin/assets?${query}`));
+  return { status: res.status, body: await res.json() };
+}
+
+describe('GET /api/admin/assets — search (#602)', () => {
+  beforeEach(() => {
+    fetchMock = vi.fn();
+    vi.stubGlobal('fetch', fetchMock);
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('browses without a query in one Immich call', async () => {
+    respond({ items: [item('a')], nextPage: '2' });
+    const { status, body } = await get('page=1&favorites=true');
+    expect(status).toBe(200);
+    expect(body).toEqual({ assets: [item('a')], nextPage: 2 });
+    expect(bodies()).toEqual([expect.objectContaining({ page: 1, isFavorite: true })]);
+    expect(bodies()[0]).not.toHaveProperty('originalFileName');
+  });
+
+  it('searches filename and description and merges without duplicates', async () => {
+    respond(
+      { items: [item('a'), item('b')], nextPage: null },
+      { items: [item('b'), item('c')], nextPage: '2' },
+    );
+    const { body } = await get('page=1&q=%20harbour%20');
+    expect(bodies()).toEqual([
+      expect.objectContaining({ originalFileName: 'harbour' }),
+      expect.objectContaining({ description: 'harbour' }),
+    ]);
+    expect(body.assets.map((a: Item) => a.id)).toEqual(['a', 'b', 'c']);
+    expect(body.nextPage).toBe(2);
+  });
+
+  it.each([
+    ['2024', '2024-01-01T00:00:00.000Z', '2025-01-01T00:00:00.000Z'],
+    ['2024-02', '2024-02-01T00:00:00.000Z', '2024-03-01T00:00:00.000Z'],
+    ['2024-02-29', '2024-02-29T00:00:00.000Z', '2024-03-01T00:00:00.000Z'],
+  ])('treats %s as a taken-date range', async (q, after, before) => {
+    respond({ items: [], nextPage: null });
+    await get(`q=${q}`);
+    expect(bodies()).toEqual([expect.objectContaining({ takenAfter: after, takenBefore: before })]);
+  });
+
+  it('falls back to text search for an impossible date', async () => {
+    respond({ items: [], nextPage: null }, { items: [], nextPage: null });
+    await get('q=2023-02-29');
+    expect(bodies()[0]).toMatchObject({ originalFileName: '2023-02-29' });
+  });
+
+  it.each(['0', '-1', 'abc', '1.5', '99999', '1e3'])('rejects page=%s', async (page) => {
+    const { status } = await get(`page=${page}`);
+    expect(status).toBe(400);
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('rejects an overlong query before calling Immich', async () => {
+    const { status } = await get(`q=${'x'.repeat(101)}`);
+    expect(status).toBe(400);
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('maps an Immich error to 502', async () => {
+    fetchMock.mockResolvedValue(new Response('nope', { status: 500 }));
+    const { status } = await get('q=x');
+    expect(status).toBe(502);
+  });
+});
diff --git a/app/api/admin/__tests__/concurrent-edits.test.ts b/app/api/admin/__tests__/concurrent-edits.test.ts
new file mode 100644
index 0000000..cfbed1b
--- /dev/null
+++ b/app/api/admin/__tests__/concurrent-edits.test.ts
@@ -0,0 +1,236 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import os from 'os';
+import path from 'path';
+import { mkdtemp, mkdir, readFile, rm, writeFile } from 'fs/promises';
+
+/**
+ * Every content editor's route (#601): GET hands out a version, a PUT with a
+ * stale `If-Match` is answered 409 with the current version and writes
+ * nothing, a matching one saves and returns the new version, and a PUT with no
+ * `If-Match` at all — an admin tab from before the upgrade — still saves.
+ *
+ * Real services on a temp content/ directory; the routes resolve it from
+ * process.cwd() at import, so they are imported after cwd is pointed there.
+ */
+
+vi.mock('@/lib/admin/auth', () => ({
+  isAdminEnabled: vi.fn(() => true),
+  isAdminAuthenticated: vi.fn(async () => true),
+  COOKIE_NAME: 'folio_admin_session',
+}));
+
+vi.mock('@/lib/config', () => ({
+  invalidateConfigCache: vi.fn(),
+  getConfigOrNull: vi.fn(() => null),
+  getConfig: vi.fn(() => ({
+    privacy: { enabled: true },
+    subpages: [],
+    albumPasswords: {},
+    lang: 'en',
+  })),
+  deriveGallery: vi.fn(() => ({ subpages: [] })),
+  isPageRef: (e: unknown) => !!e && typeof e === 'object' && 'page' in e,
+}));
+vi.mock('@/lib/privacy', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@/lib/privacy')>()),
+  processingFacts: vi.fn(() => []),
+  starterHeadings: vi.fn(() => ''),
+}));
+vi.mock('@/lib/admin/pageSlugs', () => ({
+  takenPageSlugs: vi.fn(async () => ({ subpages: [], albums: [], journal: [] })),
+}));
+vi.mock('@/lib/immich', () => ({ immich: { invalidateAll: vi.fn() } }));
+vi.mock('next/cache', () => ({ revalidatePath: vi.fn() }));
+
+let root: string;
+let content: string;
+
+beforeEach(async () => {
+  root = await mkdtemp(path.join(os.tmpdir(), 'folio-conflict-'));
+  content = path.join(root, 'content');
+  await mkdir(path.join(content, 'journal'), { recursive: true });
+  await mkdir(path.join(content, 'pages'), { recursive: true });
+  vi.spyOn(process, 'cwd').mockReturnValue(root);
+  vi.spyOn(console, 'log').mockImplementation(() => {});
+  vi.resetModules();
+});
+
+afterEach(async () => {
+  vi.restoreAllMocks();
+  await rm(root, { recursive: true, force: true });
+});
+
+const req = (method: string, body?: unknown, ifMatch?: string) =>
+  new Request('http://localhost/api/admin/x', {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(ifMatch === undefined ? {} : { 'If-Match': ifMatch }),
+    },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+
+type Handler = (request: Request, ctx?: never) => Promise<Response>;
+
+interface Case {
+  name: string;
+  file: string;
+  initial: string;
+  load: () => Promise<{ GET: Handler; PUT: Handler }>;
+  ctx?: unknown;
+  body: (tag: string) => unknown;
+}
+
+const md = (title: string) => `---\ntitle: "${title}"\n---\n\nBody of ${title}\n`;
+const slugCtx = (slug: string) => ({ params: Promise.resolve({ slug }) });
+
+const cases: Case[] = [
+  {
+    name: 'settings',
+    file: 'settings.yaml',
+    initial: 'title: Start\n',
+    load: () => import('../settings/route'),
+    body: (tag) => ({ settings: { title: tag } }),
+  },
+  {
+    name: 'gallery',
+    file: 'gallery.yaml',
+    initial: 'hero: []\nalbums: []\nsubpages: []\n',
+    load: () => import('../gallery/route'),
+    body: (tag) => ({ gallery: { hero: [], albums: [tag], subpages: [] } }),
+  },
+  {
+    name: 'about',
+    file: 'about.md',
+    initial: '---\nname: Start\n---\n\nHello\n',
+    load: () => import('../about/route'),
+    body: (tag) => ({ meta: { name: tag }, body: 'Hello' }),
+  },
+  {
+    name: 'privacy',
+    file: 'privacy.md',
+    initial: 'Start\n',
+    load: () => import('../privacy/route'),
+    body: (tag) => ({ body: tag }),
+  },
+  {
+    name: 'journal entry',
+    file: 'journal/trip.md',
+    initial: md('Start'),
+    load: () => import('../journal/[slug]/route') as never,
+    ctx: slugCtx('trip'),
+    body: (tag) => ({ rawMarkdown: md(tag) }),
+  },
+  {
+    name: 'content page',
+    file: 'pages/faq.md',
+    initial: md('Start'),
+    load: () => import('../pages/[slug]/route') as never,
+    ctx: slugCtx('faq'),
+    body: (tag) => ({ rawMarkdown: md(tag) }),
+  },
+];
+
+describe.each(cases)('$name route (#601)', ({ file, initial, load, ctx, body }) => {
+  const call = (h: Handler, r: Request) => h(r, ctx as never);
+
+  it('GET returns a version and ETag; a matching If-Match saves and returns the next one', async () => {
+    await writeFile(path.join(content, file), initial);
+    const { GET, PUT } = await load();
+
+    const got = await call(GET, req('GET'));
+    const { version } = await got.json();
+    expect(typeof version).toBe('string');
+    expect(got.headers.get('ETag')).toBe(`"${version}"`);
+
+    const saved = await call(PUT, req('PUT', body('Mine'), `"${version}"`));
+    expect(saved.status).toBe(200);
+    const data = await saved.json();
+    expect(data.version).toMatch(/^[0-9a-f]{32}$/);
+    expect(data.version).not.toBe(version);
+  });
+
+  it('a stale If-Match gets 409 with the current version and writes nothing', async () => {
+    await writeFile(path.join(content, file), initial);
+    const { GET, PUT } = await load();
+    const { version: stale } = await (await call(GET, req('GET'))).json();
+
+    // Another tab saves in between.
+    const other = await call(PUT, req('PUT', body('Theirs'), `"${stale}"`));
+    expect(other.status).toBe(200);
+    const { version: current } = await other.json();
+    const onDisk = await readFile(path.join(content, file), 'utf8');
+
+    const res = await call(PUT, req('PUT', body('Mine'), `"${stale}"`));
+    expect(res.status).toBe(409);
+    const data = await res.json();
+    expect(data).toMatchObject({ conflict: true, version: current });
+    expect(res.headers.get('ETag')).toBe(`"${current}"`);
+    await expect(readFile(path.join(content, file), 'utf8')).resolves.toBe(onDisk);
+
+    // "Overwrite anyway" resends with the version the 409 named.
+    const forced = await call(PUT, req('PUT', body('Mine'), `"${current}"`));
+    expect(forced.status).toBe(200);
+  });
+
+  it('a file that is not valid UTF-8 saves with the version GET handed out', async () => {
+    // A hand edit in Latin-1: "Über" as 0xDC, which UTF-8 cannot decode. The
+    // decoded text re-encodes to other bytes, so a version taken from it never
+    // matched the save's check and every save was a 409.
+    const latin1 = Buffer.concat([
+      Buffer.from(initial),
+      Buffer.from('\n# '),
+      Buffer.from([0xdc]),
+      Buffer.from('ber\n'),
+    ]);
+    await writeFile(path.join(content, file), latin1);
+    const { GET, PUT } = await load();
+
+    const { version } = await (await call(GET, req('GET'))).json();
+    const res = await call(PUT, req('PUT', body('Mine'), `"${version}"`));
+    expect(res.status).toBe(200);
+  });
+
+  it('a PUT without If-Match still saves (older clients)', async () => {
+    await writeFile(path.join(content, file), initial);
+    const { PUT } = await load();
+    const res = await call(PUT, req('PUT', body('Mine')));
+    expect(res.status).toBe(200);
+    await expect(readFile(path.join(content, file), 'utf8')).resolves.not.toBe(initial);
+  });
+});
+
+describe('renames (#601)', () => {
+  it('a journal rename is checked against the entry it was loaded from', async () => {
+    await writeFile(path.join(content, 'journal/trip.md'), md('Start'));
+    const { GET, PUT } = await import('../journal/[slug]/route');
+    const ctx = slugCtx('trip');
+    const { version } = await (await GET(req('GET'), ctx)).json();
+    await writeFile(path.join(content, 'journal/trip.md'), md('Hand edit'));
+
+    const res = await PUT(req('PUT', { rawMarkdown: md('Mine'), newSlug: 'voyage' }, version), ctx);
+    expect(res.status).toBe(409);
+    await expect(readFile(path.join(content, 'journal/trip.md'), 'utf8')).resolves.toBe(
+      md('Hand edit'),
+    );
+    await expect(readFile(path.join(content, 'journal/voyage.md'))).rejects.toThrow();
+  });
+
+  it('a page rename reports the gallery.yaml version change it made', async () => {
+    await writeFile(path.join(content, 'pages/faq.md'), md('FAQ'));
+    await writeFile(path.join(content, 'gallery.yaml'), 'subpages:\n  - page: faq\n');
+    const gallery = await import('../gallery/route');
+    const { version: galleryBefore } = await (await gallery.GET()).json();
+    const { GET, PUT } = await import('../pages/[slug]/route');
+    const ctx = slugCtx('faq');
+    const { version } = await (await GET(req('GET'), ctx)).json();
+
+    const res = await PUT(req('PUT', { rawMarkdown: md('FAQ'), newSlug: 'help' }, version), ctx);
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data.menuRenamed).toBe(true);
+    expect(data.galleryVersion.from).toBe(galleryBefore);
+    const { version: galleryAfter } = await (await gallery.GET()).json();
+    expect(data.galleryVersion.to).toBe(galleryAfter);
+  });
+});
diff --git a/app/api/admin/__tests__/page-menu-refs.test.ts b/app/api/admin/__tests__/page-menu-refs.test.ts
new file mode 100644
index 0000000..529f789
--- /dev/null
+++ b/app/api/admin/__tests__/page-menu-refs.test.ts
@@ -0,0 +1,108 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import os from 'os';
+import path from 'path';
+import { mkdtemp, mkdir, readFile, rm, writeFile } from 'fs/promises';
+
+/**
+ * A page rename or delete moves the file first and then follows up the menu
+ * reference in gallery.yaml (#722). When that follow-up fails — gallery.yaml
+ * edited by hand into invalid YAML, a write error — the page has already been
+ * renamed or deleted. Answering 500 then told the admin nothing was saved: the
+ * panel kept the old slug, and every retry hit a 404 for a file that was gone.
+ *
+ * Real services on a temp content/ directory, as in concurrent-edits.test.ts.
+ */
+
+vi.mock('@/lib/admin/auth', () => ({
+  isAdminEnabled: vi.fn(() => true),
+  isAdminAuthenticated: vi.fn(async () => true),
+  COOKIE_NAME: 'folio_admin_session',
+}));
+vi.mock('@/lib/config', () => ({
+  invalidateConfigCache: vi.fn(),
+  isPageRef: (e: unknown) => !!e && typeof e === 'object' && 'page' in e,
+}));
+vi.mock('@/lib/admin/pageSlugs', () => ({
+  takenPageSlugs: vi.fn(async () => ({ subpages: [], albums: [], journal: [] })),
+}));
+vi.mock('next/cache', () => ({ revalidatePath: vi.fn() }));
+
+let root: string;
+let content: string;
+
+beforeEach(async () => {
+  root = await mkdtemp(path.join(os.tmpdir(), 'folio-page-refs-'));
+  content = path.join(root, 'content');
+  await mkdir(path.join(content, 'pages'), { recursive: true });
+  vi.spyOn(process, 'cwd').mockReturnValue(root);
+  vi.spyOn(console, 'log').mockImplementation(() => {});
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+  vi.resetModules();
+});
+
+afterEach(async () => {
+  vi.restoreAllMocks();
+  await rm(root, { recursive: true, force: true });
+});
+
+const req = (method: string, body?: unknown) =>
+  new Request('http://localhost/api/admin/pages/x', {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+
+const md = (title: string) => `---\ntitle: "${title}"\n---\n\nBody of ${title}\n`;
+const slugCtx = (slug: string) => ({ params: Promise.resolve({ slug }) });
+const BROKEN_YAML = 'subpages:\n  - page: faq\n  bad: [unclosed\n';
+
+describe('page rename when the menu cannot be updated', () => {
+  it('reports the rename as done, with a warning about the menu', async () => {
+    await writeFile(path.join(content, 'pages/faq.md'), md('FAQ'));
+    await writeFile(path.join(content, 'gallery.yaml'), BROKEN_YAML);
+    const { PUT } = await import('../pages/[slug]/route');
+
+    const res = await PUT(req('PUT', { rawMarkdown: md('FAQ'), newSlug: 'help' }), slugCtx('faq'));
+
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data.success).toBe(true);
+    expect(data.page.slug).toBe('help');
+    expect(data.menuRenamed).toBe(false);
+    expect(data.galleryVersion).toBeNull();
+    expect(data.warning).toMatch(/gallery\.yaml/);
+    // The rename itself happened, and gallery.yaml was left alone.
+    await expect(readFile(path.join(content, 'pages/help.md'), 'utf8')).resolves.toBe(md('FAQ'));
+    await expect(readFile(path.join(content, 'pages/faq.md'))).rejects.toThrow();
+    await expect(readFile(path.join(content, 'gallery.yaml'), 'utf8')).resolves.toBe(BROKEN_YAML);
+  });
+
+  it('a plain save does not touch the menu and carries no warning', async () => {
+    await writeFile(path.join(content, 'pages/faq.md'), md('FAQ'));
+    await writeFile(path.join(content, 'gallery.yaml'), BROKEN_YAML);
+    const { PUT } = await import('../pages/[slug]/route');
+
+    const res = await PUT(req('PUT', { rawMarkdown: md('FAQ 2') }), slugCtx('faq'));
+    expect(res.status).toBe(200);
+    expect((await res.json()).warning).toBeUndefined();
+  });
+});
+
+describe('page delete when the menu cannot be updated', () => {
+  it('reports the delete as done, with a warning about the menu', async () => {
+    await writeFile(path.join(content, 'pages/faq.md'), md('FAQ'));
+    await writeFile(path.join(content, 'gallery.yaml'), BROKEN_YAML);
+    const { DELETE } = await import('../pages/[slug]/route');
+
+    const res = await DELETE(req('DELETE'), slugCtx('faq'));
+
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data.success).toBe(true);
+    expect(data.deletedSlug).toBe('faq');
+    expect(data.removedFromMenu).toBe(false);
+    expect(data.galleryVersion).toBeNull();
+    expect(data.warning).toMatch(/gallery\.yaml/);
+    await expect(readFile(path.join(content, 'pages/faq.md'))).rejects.toThrow();
+  });
+});
diff --git a/app/api/admin/__tests__/settings-env-locks.test.ts b/app/api/admin/__tests__/settings-env-locks.test.ts
new file mode 100644
index 0000000..1d3f19f
--- /dev/null
+++ b/app/api/admin/__tests__/settings-env-locks.test.ts
@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('@/lib/admin/auth', () => ({
+  isAdminEnabled: vi.fn(() => true),
+  isAdminAuthenticated: vi.fn(async () => true),
+  COOKIE_NAME: 'folio_admin_session',
+}));
+
+vi.mock('@/lib/admin/yaml-service', () => ({
+  readSettingsYaml: vi.fn(async () => ({
+    sitePassword: 'scrypt:stored:hash',
+    contact: { enabled: true, notifyUrl: 'https://ntfy.sh/stored' },
+  })),
+  readSettingsYamlVersioned: vi.fn(async () => ({
+    data: {
+      sitePassword: 'scrypt:stored:hash',
+      contact: { enabled: true, notifyUrl: 'https://ntfy.sh/stored' },
+    },
+    version: 'v1',
+  })),
+  writeSettingsYaml: vi.fn(async () => undefined),
+}));
+
+vi.mock('@/lib/config', () => ({
+  invalidateConfigCache: vi.fn(),
+  getConfigOrNull: vi.fn(() => null),
+}));
+
+vi.mock('@/lib/immich', () => ({ immich: { invalidateAll: vi.fn() } }));
+vi.mock('next/cache', () => ({ revalidatePath: vi.fn() }));
+
+const env = vi.hoisted(() => ({
+  SITE_PASSWORD: 'env-secret-password' as string | undefined,
+  CONTACT_NOTIFY_URL: 'https://ntfy.sh/env-secret-topic' as string | undefined,
+  SITE_TITLE: 'Env Title',
+}));
+vi.mock('@/lib/env', () => ({ env }));
+
+import { writeSettingsYaml } from '@/lib/admin/yaml-service';
+import { GET, PUT } from '../settings/route';
+
+/**
+ * The panel renders these fields locked (#605). The payload carries only the
+ * variable names: the values are a password and an ntfy topic.
+ */
+describe('/api/admin/settings env locks (#605)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    env.SITE_PASSWORD = 'env-secret-password';
+    env.CONTACT_NOTIFY_URL = 'https://ntfy.sh/env-secret-topic';
+  });
+
+  it('GET names the locking variables and never their values', async () => {
+    const res = await GET();
+    const text = await res.text();
+
+    expect(JSON.parse(text).envLocks).toEqual({
+      sitePassword: 'SITE_PASSWORD',
+      'contact.notifyUrl': 'CONTACT_NOTIFY_URL',
+    });
+    expect(text).not.toContain('env-secret-password');
+    expect(text).not.toContain('env-secret-topic');
+  });
+
+  it('GET reports no locks when the variables are unset', async () => {
+    env.SITE_PASSWORD = undefined;
+    env.CONTACT_NOTIFY_URL = undefined;
+    const body = await (await GET()).json();
+    expect(body.envLocks).toEqual({});
+  });
+
+  it('PUT keeps the stored value of a locked field', async () => {
+    const res = await PUT(
+      new Request('http://localhost/api/admin/settings', {
+        method: 'PUT',
+        body: JSON.stringify({
+          settings: {
+            title: 'Folio',
+            sitePassword: 'typed-in-panel',
+            contact: { enabled: true, notifyUrl: 'https://ntfy.sh/typed' },
+          },
+        }),
+      }),
+    );
+    expect(res.status).toBe(200);
+    expect(vi.mocked(writeSettingsYaml).mock.calls[0][0]).toMatchObject({
+      title: 'Folio',
+      sitePassword: 'scrypt:stored:hash',
+      contact: { enabled: true, notifyUrl: 'https://ntfy.sh/stored' },
+    });
+  });
+});
diff --git a/app/api/admin/__tests__/settings-write.test.ts b/app/api/admin/__tests__/settings-write.test.ts
index 03d7d71..6909e19 100644
--- a/app/api/admin/__tests__/settings-write.test.ts
+++ b/app/api/admin/__tests__/settings-write.test.ts
@@ -95,3 +95,41 @@ describe('PUT /api/admin/settings — site password', () => {
     expect(written.sitePassword).toBe('');
   });
 });
+
+/**
+ * Values the site would ignore used to be written with a success message: the
+ * accent fell back to the preset, the columns were clamped, the sitemap went
+ * out without an address (QA A-14).
+ */
+describe('PUT /api/admin/settings — values the site would ignore', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('refuses them, names each field, and writes nothing', async () => {
+    const res = await put({
+      url: 'folio.example',
+      theme: { preset: 'minimal', accent: 'rot' },
+      grid: { columns: 9, gap: 12 },
+    });
+    const body = await res.json();
+
+    expect(res.status).toBe(400);
+    expect(writeSettingsYaml).not.toHaveBeenCalled();
+    expect(body.fields.map((f: { field: string }) => f.field).sort()).toEqual([
+      'grid.columns',
+      'theme.accent',
+      'url',
+    ]);
+    expect(body.fields.every((f: { message: string }) => f.message.length > 0)).toBe(true);
+  });
+
+  it('writes the same fields once they hold values the site uses', async () => {
+    const res = await put({
+      url: 'https://folio.example',
+      theme: { preset: 'minimal', accent: '#e60012' },
+      grid: { columns: 6, gap: 0 },
+    });
+
+    expect(res.status).toBe(200);
+    expect(writeSettingsYaml).toHaveBeenCalledOnce();
+  });
+});
diff --git a/app/api/admin/about/route.ts b/app/api/admin/about/route.ts
index 460921c..9879b90 100644
--- a/app/api/admin/about/route.ts
+++ b/app/api/admin/about/route.ts
@@ -5,6 +5,16 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import yaml from 'js-yaml';
 import { atomicWrite } from '@/lib/atomicWrite';
+import {
+  VersionConflictError,
+  assertVersion,
+  baseVersionFrom,
+  conflictResponse,
+  etag,
+  readVersioned,
+  serializeContentWrite,
+  versionOf,
+} from '@/lib/admin/contentVersion';
 
 const CONTENT_DIR = path.resolve(process.cwd(), 'content');
 const FILENAME = 'about.md';
@@ -26,9 +36,13 @@ export const GET = withAdmin(async () => {
   const filePath = path.join(CONTENT_DIR, FILENAME);
   let meta: AboutMeta = {};
   let body = '';
+  let version = versionOf(null);
 
   try {
-    const raw = await fs.readFile(filePath, 'utf-8');
+    // The version comes from the bytes read, not the decoded text (#601).
+    const read = await readVersioned(filePath);
+    version = read.version;
+    const raw = read.text;
     const match = raw.match(/^(?:---\r?\n)([\s\S]*?)(?:\r?\n---\r?\n)([\s\S]*)$/);
     if (match) {
       try {
@@ -42,7 +56,8 @@ export const GET = withAdmin(async () => {
     // File doesn't exist yet — return empty defaults
   }
 
-  return NextResponse.json({ meta, body });
+  // `version` goes back in If-Match on save (#601).
+  return NextResponse.json({ meta, body, version }, { headers: { ETag: etag(version) } });
 });
 
 export const PUT = withAdmin(async (request: Request) => {
@@ -64,38 +79,53 @@ export const PUT = withAdmin(async (request: Request) => {
   const content = `---\n${frontmatter}\n---\n\n${data.body ?? ''}\n`;
 
   const filePath = path.join(CONTENT_DIR, FILENAME);
-  await fs.mkdir(CONTENT_DIR, { recursive: true });
-
-  // "No file yet" and "the backup could not be written" used to share one
-  // catch, so a `.backups/` this save couldn't write to looked exactly like a
-  // brand-new file: the save went ahead with no snapshot taken (#630). Only
-  // ENOENT means there is nothing to back up; anything else aborts the save
-  // before it overwrites the live file.
-  let fileExists = true;
+  const baseVersion = baseVersionFrom(request);
   try {
-    await fs.access(filePath);
+    await serializeContentWrite(async () => {
+      await assertVersion(filePath, baseVersion);
+      await fs.mkdir(CONTENT_DIR, { recursive: true });
+
+      // "No file yet" and "the backup could not be written" used to share one
+      // catch, so a `.backups/` this save couldn't write to looked exactly like a
+      // brand-new file: the save went ahead with no snapshot taken (#630). Only
+      // ENOENT means there is nothing to back up; anything else aborts the save
+      // before it overwrites the live file.
+      let fileExists = true;
+      try {
+        await fs.access(filePath);
+      } catch (err) {
+        if ((err as NodeJS.ErrnoException & { code?: string }).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, `${FILENAME}.${timestamp}.bak`));
+
+        // Prune old backups
+        const entries = await fs.readdir(backupDir);
+        const aboutBackups = entries
+          .filter((e) => e.startsWith(FILENAME) && e.endsWith('.bak'))
+          .sort();
+        while (aboutBackups.length > MAX_BACKUPS) {
+          await fs.unlink(path.join(backupDir, aboutBackups.shift()!));
+        }
+      }
+
+      await atomicWrite(filePath, content);
+    });
   } catch (err) {
-    if ((err as NodeJS.ErrnoException & { code?: string }).code !== 'ENOENT') throw err;
-    fileExists = false;
+    if (err instanceof VersionConflictError) return conflictResponse(err.currentVersion);
+    throw err;
   }
 
-  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, `${FILENAME}.${timestamp}.bak`));
-
-    // Prune old backups
-    const entries = await fs.readdir(backupDir);
-    const aboutBackups = entries.filter((e) => e.startsWith(FILENAME) && e.endsWith('.bak')).sort();
-    while (aboutBackups.length > MAX_BACKUPS) {
-      await fs.unlink(path.join(backupDir, aboutBackups.shift()!));
-    }
-  }
-
-  await atomicWrite(filePath, content);
-
   revalidatePath('/about', 'layout');
 
-  return NextResponse.json({ success: true, message: 'About page saved.' });
+  return NextResponse.json({
+    success: true,
+    message: 'About page saved.',
+    version: versionOf(content),
+  });
 });
diff --git a/app/api/admin/albums/[albumId]/assets/__tests__/route.test.ts b/app/api/admin/albums/[albumId]/assets/__tests__/route.test.ts
index edfc14e..5a2bed3 100644
--- a/app/api/admin/albums/[albumId]/assets/__tests__/route.test.ts
+++ b/app/api/admin/albums/[albumId]/assets/__tests__/route.test.ts
@@ -81,7 +81,7 @@ describe('GET /api/admin/albums/[albumId]/assets', () => {
   it('reads assets through the Immich client rather than the album endpoint', async () => {
     await call(ALBUM);
 
-    expect(getAlbumAssetsRaw).toHaveBeenCalledWith(ALBUM);
+    expect(getAlbumAssetsRaw).toHaveBeenCalledWith(ALBUM, true);
   });
 
   it('reports an upstream failure as a 500 rather than an empty album', async () => {
diff --git a/app/api/admin/albums/[albumId]/assets/route.ts b/app/api/admin/albums/[albumId]/assets/route.ts
index 85cc193..198786a 100644
--- a/app/api/admin/albums/[albumId]/assets/route.ts
+++ b/app/api/admin/albums/[albumId]/assets/route.ts
@@ -37,8 +37,9 @@ export const GET = withAdmin(
       // longer embeds assets in that response, so reading `album.assets` returned
       // nothing (and threw outright when the key was absent). getAlbumAssetsRaw()
       // pages through the metadata search and applies the album's own order, so
-      // this list matches what the site renders under `sort: immich`.
-      const all = await immich.getAlbumAssetsRaw(albumId);
+      // this list matches what the site renders under `sort: immich`. Fresh,
+      // not cached: the editors must show the album as Immich has it now.
+      const all = await immich.getAlbumAssetsRaw(albumId, true);
 
       const assets = all
         .filter((a) => a.type === 'IMAGE' || (includeVideos && a.type === 'VIDEO'))
diff --git a/app/api/admin/assets/route.ts b/app/api/admin/assets/route.ts
index 3c33f2e..abfaf37 100644
--- a/app/api/admin/assets/route.ts
+++ b/app/api/admin/assets/route.ts
@@ -1,6 +1,9 @@
 /**
- * Admin API: Browse Immich assets for the hero picker.
- * Supports pagination and fetching favorites first.
+ * Admin API: browse and search Immich assets for the asset picker.
+ * Supports pagination, favourites and a free-text search (#602).
+ *
+ * Read-only against Immich: every call is `POST /search/metadata`, a query
+ * despite the verb.
  */
 
 import { NextRequest, NextResponse } from 'next/server';
@@ -21,7 +24,41 @@ interface ImmichSearchResult {
   };
 }
 
-/** GET: Search/browse assets from Immich for hero image selection. */
+class ImmichStatusError extends Error {
+  constructor(readonly status: number) {
+    super(`Immich API returned ${status}`);
+  }
+}
+
+const PAGE_SIZE = 50;
+/** Far beyond any real scroll depth; keeps a crafted `page` away from Immich. */
+const MAX_PAGE = 1000;
+/** Longer than any filename or description fragment anybody types. */
+const MAX_QUERY_LENGTH = 100;
+
+/**
+ * A query that is a date — `2024`, `2024-05` or `2024-05-17` — searches by the
+ * year, month or day the photo was taken instead of by text. Null for anything
+ * else, including impossible dates such as `2024-13` or `2024-02-31`.
+ */
+function dateRange(q: string): { takenAfter: string; takenBefore: string } | null {
+  const m = /^(\d{4})(?:-(\d{2})(?:-(\d{2}))?)?$/.exec(q);
+  if (!m) return null;
+  const year = Number(m[1]);
+  const month = m[2] ? Number(m[2]) : null;
+  const day = m[3] ? Number(m[3]) : null;
+  if (month !== null && (month < 1 || month > 12)) return null;
+  const start = new Date(Date.UTC(year, (month ?? 1) - 1, day ?? 1));
+  // Date.UTC rolls 2024-02-31 over into March; refuse rather than guess.
+  if (day !== null && start.getUTCDate() !== day) return null;
+  const end = new Date(start);
+  if (day !== null) end.setUTCDate(end.getUTCDate() + 1);
+  else if (month !== null) end.setUTCMonth(end.getUTCMonth() + 1);
+  else end.setUTCFullYear(end.getUTCFullYear() + 1);
+  return { takenAfter: start.toISOString(), takenBefore: end.toISOString() };
+}
+
+/** GET: browse (`?page=&favorites=`) or search (`&q=`) the library. */
 export const GET = withAdmin(async (request: NextRequest) => {
   const config = getConfig();
   // Credentials, not `needsSetup`: this route is how the operator picks the
@@ -32,51 +69,78 @@ export const GET = withAdmin(async (request: NextRequest) => {
   }
 
   const { searchParams } = new URL(request.url);
-  const page = parseInt(searchParams.get('page') || '1', 10);
+  const rawPage = searchParams.get('page') ?? '1';
+  const page = /^\d{1,4}$/.test(rawPage) ? Number(rawPage) : NaN;
+  if (!Number.isInteger(page) || page < 1 || page > MAX_PAGE) {
+    return NextResponse.json({ error: 'Invalid page' }, { status: 400 });
+  }
   const favoritesOnly = searchParams.get('favorites') === 'true';
-  const pageSize = 50;
+  const q = (searchParams.get('q') ?? '').trim();
+  if (q.length > MAX_QUERY_LENGTH) {
+    return NextResponse.json({ error: 'Search query too long' }, { status: 400 });
+  }
+
+  const base: Record<string, unknown> = {
+    type: 'IMAGE',
+    size: PAGE_SIZE,
+    page,
+    order: 'desc',
+    isNotInAlbum: false,
+  };
+  if (favoritesOnly) base.isFavorite = true;
+
+  // Immich's metadata search ANDs its fields, so "filename or description"
+  // takes two searches whose pages are merged.
+  const range = q ? dateRange(q) : null;
+  const bodies: Record<string, unknown>[] = range
+    ? [{ ...base, ...range }]
+    : q
+      ? [
+          { ...base, originalFileName: q },
+          { ...base, description: q },
+        ]
+      : [base];
 
   try {
-    // Use Immich search/metadata endpoint to query assets
-    const body: Record<string, unknown> = {
-      type: 'IMAGE',
-      size: pageSize,
-      page,
-      order: 'desc',
-      isNotInAlbum: false,
-    };
+    const results = await Promise.all(
+      bodies.map(async (body) => {
+        const res = await fetch(`${config.immich.apiUrl}/search/metadata`, {
+          method: 'POST',
+          headers: {
+            'x-api-key': config.immich.apiKey,
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+          },
+          body: JSON.stringify(body),
+        });
+        if (!res.ok) throw new ImmichStatusError(res.status);
+        return (await res.json()) as ImmichSearchResult;
+      }),
+    );
 
-    if (favoritesOnly) {
-      body.isFavorite = true;
-    }
-
-    const res = await fetch(`${config.immich.apiUrl}/search/metadata`, {
-      method: 'POST',
-      headers: {
-        'x-api-key': config.immich.apiKey,
-        'Content-Type': 'application/json',
-        Accept: 'application/json',
-      },
-      body: JSON.stringify(body),
-    });
-
-    if (!res.ok) {
-      return NextResponse.json({ error: `Immich API returned ${res.status}` }, { status: 502 });
-    }
-
-    const data = (await res.json()) as ImmichSearchResult;
-    const assets = data.assets.items.map((asset) => ({
-      id: asset.id,
-      originalFileName: asset.originalFileName,
-      fileCreatedAt: asset.fileCreatedAt,
-      isFavorite: asset.isFavorite,
-    }));
+    const seen = new Set<string>();
+    const assets = results
+      .flatMap((r) => r.assets.items)
+      .filter((a) => {
+        if (seen.has(a.id)) return false;
+        seen.add(a.id);
+        return true;
+      })
+      .map((asset) => ({
+        id: asset.id,
+        originalFileName: asset.originalFileName,
+        fileCreatedAt: asset.fileCreatedAt,
+        isFavorite: asset.isFavorite,
+      }));
 
     return NextResponse.json({
       assets,
-      nextPage: data.assets.nextPage ? page + 1 : null,
+      nextPage: results.some((r) => r.assets.nextPage) ? page + 1 : null,
     });
   } catch (err) {
+    if (err instanceof ImmichStatusError) {
+      return NextResponse.json({ error: `Immich API returned ${err.status}` }, { status: 502 });
+    }
     console.error('[Admin] Failed to fetch assets from Immich:', err);
     return NextResponse.json({ error: 'Failed to connect to Immich' }, { status: 502 });
   }
diff --git a/app/api/admin/backups/route.ts b/app/api/admin/backups/route.ts
index b2ee4d9..82dbf44 100644
--- a/app/api/admin/backups/route.ts
+++ b/app/api/admin/backups/route.ts
@@ -3,19 +3,19 @@ import { withAdmin } from '@/lib/admin/withAdmin';
 import { revalidatePath } from 'next/cache';
 import { listBackups, restoreBackup } from '@/lib/admin/yaml-service';
 import { listJournalBackups, restoreJournalBackup } from '@/lib/admin/journal-service';
+import { listPageBackups, restorePageBackup } from '@/lib/admin/pages-service';
 import { invalidateConfigCache } from '@/lib/config';
-import { immich } from '@/lib/immich';
 
-export type BackupTarget = 'gallery' | 'settings' | 'about' | 'privacy' | 'journal';
+export type BackupTarget = 'gallery' | 'settings' | 'about' | 'privacy' | 'journal' | 'pages';
 
 export interface BackupItem {
   filename: string;
   target: BackupTarget;
   timestamp: string | null;
   isPreRestore: boolean;
-  /** Journal backups only: the entry the backup belongs to. */
+  /** Journal and page backups only: the entry or page the backup belongs to. */
   slug?: string;
-  /** Journal backups only: the snapshot taken when the entry was deleted. */
+  /** Journal and page backups only: the snapshot taken when it was deleted. */
   isDeleted?: boolean;
 }
 
@@ -60,6 +60,13 @@ export const GET = withAdmin(async () => {
         isDeleted: b.kind === 'deleted',
       }))
       .sort((a, b) => (b.timestamp ?? '').localeCompare(a.timestamp ?? ''));
+    const pages = (await listPageBackups())
+      .map((b) => ({
+        ...parseBackupInfo(b.filename, 'pages'),
+        slug: b.slug,
+        isDeleted: b.kind === 'deleted',
+      }))
+      .sort((a, b) => (b.timestamp ?? '').localeCompare(a.timestamp ?? ''));
 
     return NextResponse.json({
       backups: {
@@ -68,6 +75,7 @@ export const GET = withAdmin(async () => {
         about,
         privacy,
         journal,
+        pages,
       },
     });
   } catch (err) {
@@ -103,13 +111,18 @@ export const POST = withAdmin(async (req: Request) => {
     // cannot be told apart from an about.md backup by name alone.
     if (target === 'journal') {
       await restoreJournalBackup(backupFilename);
+    } else if (target === 'pages') {
+      await restorePageBackup(backupFilename);
     } else {
       await restoreBackup(backupFilename);
     }
 
     // Invalidate caches & revalidate pages
     invalidateConfigCache();
-    immich.invalidateAll();
+    // No immich.invalidateAll(): the Immich cache holds Immich's data only, and
+    // the gallery.yaml side (allowlist, titles, order) is applied per request
+    // from the new config. Clearing it made the next visitor refetch every
+    // album although nothing in Immich had changed.
     revalidatePath('/', 'layout');
 
     return NextResponse.json({
diff --git a/app/api/admin/doctor/route.ts b/app/api/admin/doctor/route.ts
index 531b54e..2cf2ef1 100644
--- a/app/api/admin/doctor/route.ts
+++ b/app/api/admin/doctor/route.ts
@@ -6,7 +6,11 @@ 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 { validateSettingValues } from '@/lib/config/settingValues';
 import { readPrivacy } from '@/lib/privacy';
+import { listPageSlugsSync } from '@/lib/admin/pages-service';
+import { takenPageSlugs } from '@/lib/admin/pageSlugs';
+import { describeCollision, menuPageSlugs, pageSlugCollision } from '@/lib/pages';
 import {
   checkAlbumIds,
   checkAlbumSlugCollisions,
@@ -15,8 +19,10 @@ import {
   checkCdn,
   checkImmichCalls,
   checkContact,
+  checkContentPages,
   checkLegal,
   checkPrivacy,
+  checkSettingValues,
   checkPasswords,
   checkProxyHops,
   checkWritable,
@@ -153,6 +159,9 @@ export const GET = withAdmin(async (request: NextRequest) => {
     const settings = await readSettingsYaml();
     rawLegal = settings?.legal ?? rawLegal;
     rawContact = settings?.contact ?? rawContact;
+    // Values the resolvers replaced on the way into `config` — only the raw
+    // file still shows them.
+    findings.push(checkSettingValues(validateSettingValues(settings)));
   } catch {
     // Fall back to the resolved blocks; only a dropped URL goes unseen.
   }
@@ -167,10 +176,30 @@ export const GET = withAdmin(async (request: NextRequest) => {
   });
   if (privacy) findings.push(privacy);
 
+  // ── Content pages: missing menu targets and slug collisions (#722) ────
+  try {
+    const pageSlugs = listPageSlugsSync();
+    const taken = pageSlugs.length ? await takenPageSlugs() : null;
+    const collisions = taken
+      ? pageSlugs.flatMap((slug) => {
+          const collision = pageSlugCollision(slug, taken);
+          return collision ? [{ slug, reason: describeCollision(slug, collision) }] : [];
+        })
+      : [];
+    const pages = checkContentPages({
+      menuRefs: menuPageSlugs(config.nav),
+      pages: pageSlugs,
+      collisions,
+    });
+    if (pages) findings.push(pages);
+  } catch {
+    // Pages are optional; a failure to list them is not a finding of its own.
+  }
+
   // ── Writability of the content volume ────────────────────────────────
   const contentDir = path.join(process.cwd(), 'content');
   const unwritable: string[] = [];
-  for (const dir of ['', '.backups', 'journal']) {
+  for (const dir of ['', '.backups', 'journal', 'pages']) {
     const target = path.join(contentDir, dir);
     try {
       await fs.access(target, (await import('node:fs')).constants.W_OK);
diff --git a/app/api/admin/gallery/route.ts b/app/api/admin/gallery/route.ts
index 3a850ef..023a1f7 100644
--- a/app/api/admin/gallery/route.ts
+++ b/app/api/admin/gallery/route.ts
@@ -1,18 +1,32 @@
 import { NextResponse } from 'next/server';
 import { withAdmin } from '@/lib/admin/withAdmin';
 import { revalidatePath } from 'next/cache';
-import { readGalleryYaml, writeGalleryYaml } from '@/lib/admin/yaml-service';
+import {
+  readGalleryYaml,
+  readGalleryYamlVersioned,
+  writeGalleryYaml,
+} from '@/lib/admin/yaml-service';
+import {
+  VersionConflictError,
+  baseVersionFrom,
+  conflictResponse,
+  etag,
+} from '@/lib/admin/contentVersion';
 import { invalidateConfigCache, deriveGallery } from '@/lib/config';
-import { immich } from '@/lib/immich';
 import type { GalleryYaml } from '@/lib/config/schema';
 import { hashPasswordKeys } from '@/lib/admin/passwordHashing';
+import { listPageSlugsSync } from '@/lib/admin/pages-service';
 
 const PASSWORD_KEY = new Set(['password']);
 
 /** GET: Read current gallery.yaml config. */
 export const GET = withAdmin(async () => {
-  const gallery = await readGalleryYaml();
-  return NextResponse.json({ gallery: gallery || { hero: [], albums: [], subpages: [] } });
+  const { data: gallery, version } = await readGalleryYamlVersioned();
+  // `version` goes back in If-Match on save (#601).
+  return NextResponse.json(
+    { gallery: gallery || { hero: [], albums: [], subpages: [] }, version },
+    { headers: { ETag: etag(version) } },
+  );
 });
 
 /** PUT: Write gallery.yaml config. */
@@ -39,7 +53,17 @@ export const PUT = withAdmin(async (request: Request) => {
   // validating before the write rather than rolling back after — a rollback
   // leaves a window in which other requests read the broken config.
   try {
-    deriveGallery(gallery);
+    const derived = deriveGallery(gallery);
+    // A subpage renamed onto a content page's slug would shadow the page
+    // (#722). The page side of the same rule is enforced where pages save.
+    const pageSlugs = new Set(listPageSlugsSync());
+    const clash = derived.subpages.find((sp) => pageSlugs.has(sp.slug));
+    if (clash) {
+      throw new Error(
+        `Subpage "${clash.name}" would take /${clash.slug}, which is already a content page. ` +
+          `Rename one of them.`,
+      );
+    }
   } catch (err) {
     const reason = err instanceof Error ? err.message : 'Invalid gallery structure';
     console.warn('[Admin] Rejected an unloadable gallery.yaml:', reason);
@@ -53,9 +77,12 @@ export const PUT = withAdmin(async (request: Request) => {
       PASSWORD_KEY,
       await readGalleryYaml().catch(() => null),
     );
-    await writeGalleryYaml(toWrite);
+    const version = await writeGalleryYaml(toWrite, baseVersionFrom(request));
     invalidateConfigCache();
-    immich.invalidateAll();
+    // No immich.invalidateAll(): the Immich cache holds Immich's data only, and
+    // the gallery.yaml side (allowlist, titles, order) is applied per request
+    // from the new config. Clearing it made the next visitor refetch every
+    // album although nothing in Immich had changed.
     // Revalidate all pages so the homepage picks up new hero images immediately
     revalidatePath('/', 'layout');
     revalidatePath('/[...path]', 'page');
@@ -64,8 +91,10 @@ export const PUT = withAdmin(async (request: Request) => {
       message: 'Saved successfully. Backup of previous version created.',
       // What was written, passwords hashed, so the editor can take it over.
       gallery: toWrite,
+      version,
     });
   } catch (err) {
+    if (err instanceof VersionConflictError) return conflictResponse(err.currentVersion);
     console.error('[Admin] Failed to write gallery.yaml:', err);
     return NextResponse.json({ error: 'Failed to save gallery config' }, { status: 500 });
   }
diff --git a/app/api/admin/journal/[slug]/route.ts b/app/api/admin/journal/[slug]/route.ts
index 636a886..fc79cb8 100644
--- a/app/api/admin/journal/[slug]/route.ts
+++ b/app/api/admin/journal/[slug]/route.ts
@@ -4,9 +4,15 @@ import { isValidSlug, sanitizeSlug, parseJournalMarkdown } from '@/lib/journal';
 import { hashFrontmatterPassword } from '@/lib/admin/passwordHashing';
 import {
   readJournalEntry,
-  writeJournalEntry,
+  saveJournalEntry,
   deleteJournalEntry,
 } from '@/lib/admin/journal-service';
+import {
+  VersionConflictError,
+  baseVersionFrom,
+  conflictResponse,
+  etag,
+} from '@/lib/admin/contentVersion';
 
 interface RouteContext {
   params: Promise<{ slug: string }>;
@@ -23,7 +29,9 @@ export const GET = withAdmin(async (request: Request, context: RouteContext) =>
     if (!entry) {
       return NextResponse.json({ error: 'Journal entry not found' }, { status: 404 });
     }
-    return NextResponse.json({ entry });
+    // `version` goes back in If-Match on save (#601).
+    const version = entry.version;
+    return NextResponse.json({ entry, version }, { headers: { ETag: etag(version) } });
   } catch (err) {
     console.error(`[Admin API] Failed to get journal entry "${slug}":`, err);
     return NextResponse.json({ error: 'Failed to read journal entry' }, { status: 500 });
@@ -67,16 +75,16 @@ export const PUT = withAdmin(async (request: Request, context: RouteContext) =>
     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, markdown);
-    }
+    // A rename is checked against the file the editor loaded, the old slug.
+    const version = await saveJournalEntry(targetSlug, markdown, {
+      baseVersion: baseVersionFrom(request),
+      fromSlug: slug,
+    });
 
     const updated = await readJournalEntry(targetSlug);
-    return NextResponse.json({ success: true, entry: updated });
+    return NextResponse.json({ success: true, entry: updated, version });
   } catch (err) {
+    if (err instanceof VersionConflictError) return conflictResponse(err.currentVersion);
     console.error(`[Admin API] Failed to update journal entry "${slug}":`, err);
     return NextResponse.json({ error: 'Failed to update journal entry' }, { status: 500 });
   }
diff --git a/app/api/admin/pages/[slug]/route.ts b/app/api/admin/pages/[slug]/route.ts
new file mode 100644
index 0000000..0c72b3d
--- /dev/null
+++ b/app/api/admin/pages/[slug]/route.ts
@@ -0,0 +1,161 @@
+import { NextResponse } from 'next/server';
+import { revalidatePath } from 'next/cache';
+import { withAdmin } from '@/lib/admin/withAdmin';
+import { isValidSlug, parseJournalMarkdown, sanitizeSlug } from '@/lib/journal';
+import { describeCollision, pageSlugCollision } from '@/lib/pages';
+import { hashFrontmatterPassword } from '@/lib/admin/passwordHashing';
+import { deletePage, readPage, savePage } from '@/lib/admin/pages-service';
+import {
+  VersionConflictError,
+  baseVersionFrom,
+  conflictResponse,
+  etag,
+} from '@/lib/admin/contentVersion';
+import { takenPageSlugs } from '@/lib/admin/pageSlugs';
+import { updatePageRefs, type GalleryVersionChange } from '@/lib/admin/pageRefs';
+
+interface RouteContext {
+  params: Promise<{ slug: string }>;
+}
+
+/**
+ * Follow a page rename or delete in gallery.yaml's menu. Runs after the page
+ * file already moved, so a failure here (gallery.yaml edited into invalid
+ * YAML, a write error) must not turn the answer into a 500: the admin would be
+ * told nothing was saved, keep the old slug, and hit a 404 on every retry.
+ * The page change stands; the menu is left as it was and the admin is told.
+ */
+async function followInMenu(
+  from: string,
+  to: string | null,
+): Promise<{ galleryVersion: GalleryVersionChange | null; warning?: string }> {
+  try {
+    return { galleryVersion: await updatePageRefs(from, to) };
+  } catch (err) {
+    console.error(`[Admin API] Page "${from}" changed, but gallery.yaml was not updated:`, err);
+    return {
+      galleryVersion: null,
+      warning:
+        to === null
+          ? `Page deleted, but its menu entry could not be removed from gallery.yaml. Remove "page: ${from}" there by hand.`
+          : `Page renamed, but the menu in gallery.yaml could not be updated. Change "page: ${from}" to "page: ${to}" there by hand.`,
+    };
+  }
+}
+
+export const GET = withAdmin(async (_request: Request, context: RouteContext) => {
+  const { slug } = await context.params;
+  if (!isValidSlug(slug)) {
+    return NextResponse.json({ error: 'Invalid slug' }, { status: 400 });
+  }
+  try {
+    const page = await readPage(slug);
+    if (!page) return NextResponse.json({ error: 'Page not found' }, { status: 404 });
+    // `version` goes back in If-Match on save (#601).
+    const version = page.version;
+    return NextResponse.json({ page, version }, { headers: { ETag: etag(version) } });
+  } catch (err) {
+    console.error(`[Admin API] Failed to read page "${slug}":`, err);
+    return NextResponse.json({ error: 'Failed to read page' }, { status: 500 });
+  }
+});
+
+/**
+ * Save a page. `newSlug` renames it: the slug is checked like a new one, the
+ * menu reference in gallery.yaml follows, and old links break — the admin
+ * says so before sending it. There are no automatic redirects (#722).
+ */
+export const PUT = withAdmin(async (request: Request, context: RouteContext) => {
+  const { slug } = await context.params;
+  if (!isValidSlug(slug)) {
+    return NextResponse.json({ error: 'Invalid slug' }, { status: 400 });
+  }
+
+  const body = await request.json().catch(() => null);
+  const rawMarkdown = body?.rawMarkdown;
+  if (typeof rawMarkdown !== 'string') {
+    return NextResponse.json({ error: 'Missing rawMarkdown content' }, { status: 400 });
+  }
+
+  try {
+    const current = await readPage(slug);
+    if (!current) return NextResponse.json({ error: 'Page not found' }, { status: 404 });
+
+    // Refuse what the parser cannot read before anything is written.
+    parseJournalMarkdown(rawMarkdown);
+
+    const targetSlug =
+      typeof body.newSlug === 'string' && body.newSlug ? sanitizeSlug(body.newSlug) : slug;
+    if (targetSlug !== slug) {
+      const collision = pageSlugCollision(targetSlug, await takenPageSlugs());
+      if (collision) {
+        return NextResponse.json(
+          { error: describeCollision(targetSlug, collision) },
+          { status: 409 },
+        );
+      }
+      if (await readPage(targetSlug)) {
+        return NextResponse.json(
+          { error: `A page "${targetSlug}" already exists.` },
+          { status: 409 },
+        );
+      }
+    }
+
+    // Stored hashed (#690); the current file supplies the hash to keep.
+    const markdown = await hashFrontmatterPassword(rawMarkdown, current.rawMarkdown);
+
+    // A rename is checked against the file the editor loaded, the old slug.
+    const version = await savePage(targetSlug, markdown, {
+      baseVersion: baseVersionFrom(request),
+      fromSlug: slug,
+    });
+    const { galleryVersion, warning } =
+      targetSlug !== slug
+        ? await followInMenu(slug, targetSlug)
+        : { galleryVersion: null, warning: undefined };
+
+    revalidatePath('/', 'layout');
+    return NextResponse.json({
+      success: true,
+      page: await readPage(targetSlug),
+      menuRenamed: galleryVersion !== null,
+      // So the open page builder can follow the menu rewrite (#601).
+      galleryVersion,
+      version,
+      ...(warning ? { warning } : {}),
+    });
+  } catch (err) {
+    if (err instanceof VersionConflictError) return conflictResponse(err.currentVersion);
+    console.error(`[Admin API] Failed to save page "${slug}":`, err);
+    return NextResponse.json({ error: 'Failed to save page' }, { status: 500 });
+  }
+});
+
+/**
+ * Delete a page. A `.deleted.bak` copy is kept, and a menu reference is
+ * removed from gallery.yaml (backed up as well), so the menu does not keep
+ * pointing at nothing.
+ */
+export const DELETE = withAdmin(async (_request: Request, context: RouteContext) => {
+  const { slug } = await context.params;
+  if (!isValidSlug(slug)) {
+    return NextResponse.json({ error: 'Invalid slug' }, { status: 400 });
+  }
+  try {
+    const deleted = await deletePage(slug);
+    if (!deleted) return NextResponse.json({ error: 'Page not found' }, { status: 404 });
+    const { galleryVersion, warning } = await followInMenu(slug, null);
+    revalidatePath('/', 'layout');
+    return NextResponse.json({
+      success: true,
+      deletedSlug: slug,
+      removedFromMenu: galleryVersion !== null,
+      galleryVersion,
+      ...(warning ? { warning } : {}),
+    });
+  } catch (err) {
+    console.error(`[Admin API] Failed to delete page "${slug}":`, err);
+    return NextResponse.json({ error: 'Failed to delete page' }, { status: 500 });
+  }
+});
diff --git a/app/api/admin/pages/route.ts b/app/api/admin/pages/route.ts
new file mode 100644
index 0000000..f6a0d1b
--- /dev/null
+++ b/app/api/admin/pages/route.ts
@@ -0,0 +1,57 @@
+import { NextResponse } from 'next/server';
+import { revalidatePath } from 'next/cache';
+import { withAdmin } from '@/lib/admin/withAdmin';
+import { sanitizeSlug, serializeJournalMarkdown } from '@/lib/journal';
+import { describeCollision, pageSlugCollision } from '@/lib/pages';
+import { listPages, readPage, writePage } from '@/lib/admin/pages-service';
+import { takenPageSlugs } from '@/lib/admin/pageSlugs';
+
+/**
+ * Content pages (#722). GET lists every page, with the slugs a page may not
+ * take so the admin can warn while the operator types; POST creates one.
+ *
+ * Whether a page sits in the menu is gallery.yaml's business, saved by the
+ * page builder — creating a page never touches the menu.
+ */
+export const GET = withAdmin(async () => {
+  try {
+    const [pages, taken] = await Promise.all([listPages(), takenPageSlugs()]);
+    return NextResponse.json({ pages, taken });
+  } catch (err) {
+    console.error('[Admin API] Failed to list pages:', err);
+    return NextResponse.json({ error: 'Failed to list pages' }, { status: 500 });
+  }
+});
+
+export const POST = withAdmin(async (request: Request) => {
+  const body = await request.json().catch(() => null);
+  const title = typeof body?.title === 'string' ? body.title.trim().replace(/\s+/g, ' ') : '';
+  if (!title) {
+    return NextResponse.json({ error: 'A page needs a title' }, { status: 400 });
+  }
+  const slug = sanitizeSlug(typeof body?.slug === 'string' && body.slug ? body.slug : title);
+
+  try {
+    const collision = pageSlugCollision(slug, await takenPageSlugs());
+    if (collision) {
+      return NextResponse.json({ error: describeCollision(slug, collision) }, { status: 409 });
+    }
+    if (await readPage(slug)) {
+      return NextResponse.json({ error: `A page "${slug}" already exists.` }, { status: 409 });
+    }
+
+    // Created as a draft: an empty page should not go live before it has
+    // content, whatever the menu says.
+    const markdown = serializeJournalMarkdown({
+      frontmatter: { title, draft: true },
+      blocks: [],
+      referencedAssetIds: [],
+    });
+    await writePage(slug, markdown);
+    revalidatePath('/', 'layout');
+    return NextResponse.json({ success: true, page: await readPage(slug) }, { status: 201 });
+  } catch (err) {
+    console.error('[Admin API] Failed to create page:', err);
+    return NextResponse.json({ error: 'Failed to create page' }, { status: 500 });
+  }
+});
diff --git a/app/api/admin/privacy/route.ts b/app/api/admin/privacy/route.ts
index 3232d25..7411f8f 100644
--- a/app/api/admin/privacy/route.ts
+++ b/app/api/admin/privacy/route.ts
@@ -4,6 +4,16 @@ import path from 'path';
 import { revalidatePath } from 'next/cache';
 import { withAdmin } from '@/lib/admin/withAdmin';
 import { atomicWrite } from '@/lib/atomicWrite';
+import {
+  VersionConflictError,
+  assertVersion,
+  baseVersionFrom,
+  conflictResponse,
+  etag,
+  fileVersion,
+  serializeContentWrite,
+  versionOf,
+} from '@/lib/admin/contentVersion';
 import { getConfig } from '@/lib/config';
 import { env } from '@/lib/env';
 import { PRIVACY_FILENAME, processingFacts, readPrivacy, starterHeadings } from '@/lib/privacy';
@@ -26,14 +36,19 @@ export const GET = withAdmin(async () => {
       config.subpages.some((sp) => !!sp.password) ||
       Object.values(config.albumPasswords).some(Boolean),
   });
+  // Read before the text: a save landing between the two then makes the
+  // version stale, which costs a spurious conflict, never a missed one.
+  const version = await fileVersion(path.join(CONTENT_DIR, PRIVACY_FILENAME));
   return NextResponse.json(
     {
       body: readPrivacy(CONTENT_DIR),
+      // Sent back in If-Match on save (#601).
+      version,
       enabled: config.privacy.enabled,
       facts,
       starter: starterHeadings(config.lang, facts),
     },
-    { headers: { 'Cache-Control': 'no-store' } },
+    { headers: { 'Cache-Control': 'no-store', ETag: etag(version) } },
   );
 });
 
@@ -45,34 +60,48 @@ export const PUT = withAdmin(async (request: Request) => {
   }
 
   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` : '');
+  const content = body ? `${body}\n` : '';
+  const baseVersion = baseVersionFrom(request);
+  try {
+    await serializeContentWrite(async () => {
+      await assertVersion(filePath, baseVersion);
+      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()!));
+        }
+      }
+
+      await atomicWrite(filePath, content);
+    });
+  } catch (err) {
+    if (err instanceof VersionConflictError) return conflictResponse(err.currentVersion);
+    throw err;
+  }
   revalidatePath('/', 'layout');
 
-  return NextResponse.json({ success: true, message: 'Privacy policy saved.' });
+  return NextResponse.json({
+    success: true,
+    message: 'Privacy policy saved.',
+    version: versionOf(content),
+  });
 });
diff --git a/app/api/admin/proofing/[id]/export/route.ts b/app/api/admin/proofing/[id]/export/route.ts
new file mode 100644
index 0000000..a8fe8d4
--- /dev/null
+++ b/app/api/admin/proofing/[id]/export/route.ts
@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { withAdmin } from '@/lib/admin/withAdmin';
+import { picksFor } from '@/lib/admin/proofing-view';
+import { immich } from '@/lib/immich';
+import { getSessionById } from '@/lib/proofSessions';
+import {
+  exportContentType,
+  exportExtension,
+  formatExport,
+  type ExportFormat,
+} from '@/lib/proofExport';
+import { contentDisposition, safeDownloadName } from '@/lib/downloadName';
+
+const FORMATS: ExportFormat[] = ['lightroom', 'txt', 'csv'];
+
+/** GET ?format=lightroom|txt|csv — the selection as a file. */
+export const GET = withAdmin(
+  async (request: NextRequest, { params }: { params: Promise<{ id: string }> }) => {
+    const { id } = await params;
+    const requested = request.nextUrl.searchParams.get('format') as ExportFormat | null;
+    const format = requested && FORMATS.includes(requested) ? requested : 'lightroom';
+
+    const session = await getSessionById(id);
+    if (!session) return NextResponse.json({ error: 'Not found' }, { status: 404 });
+    const album = await immich.getProofingAlbum(session.albumId).catch(() => null);
+    if (!album) {
+      return NextResponse.json({ error: 'The album is not available in Immich' }, { status: 502 });
+    }
+
+    const body = formatExport(picksFor(session, album), format);
+    const name = `${safeDownloadName(`${session.clientName} ${album.albumName}`, 'selection')}.${exportExtension(format)}`;
+    return new NextResponse(body, {
+      headers: {
+        'Content-Type': exportContentType(format),
+        'Content-Disposition': contentDisposition(name),
+        'Cache-Control': 'private, no-store',
+      },
+    });
+  },
+);
diff --git a/app/api/admin/proofing/[id]/route.ts b/app/api/admin/proofing/[id]/route.ts
new file mode 100644
index 0000000..423ebc9
--- /dev/null
+++ b/app/api/admin/proofing/[id]/route.ts
@@ -0,0 +1,59 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { withAdmin } from '@/lib/admin/withAdmin';
+import { picksFor, toAdminSession } from '@/lib/admin/proofing-view';
+import { immich } from '@/lib/immich';
+import {
+  deleteSession,
+  getSessionById,
+  ProofError,
+  sessionPatchSchema,
+  updateSession,
+} from '@/lib/proofSessions';
+
+type Context = { params: Promise<{ id: string }> };
+
+/** GET: one link with its selected photos. */
+export const GET = withAdmin(async (_request: NextRequest, { params }: Context) => {
+  const { id } = await params;
+  const session = await getSessionById(id);
+  if (!session) return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  const album = await immich.getProofingAlbum(session.albumId).catch(() => null);
+  return NextResponse.json({
+    session: toAdminSession(session, album),
+    picks: picksFor(session, album),
+  });
+});
+
+/** PATCH: rename, change expiry or downloads, reopen, reset the download count. */
+export const PATCH = withAdmin(async (request: NextRequest, { params }: Context) => {
+  const { id } = await params;
+  const parsed = sessionPatchSchema.safeParse(await request.json().catch(() => null));
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: parsed.error.issues[0]?.message ?? 'Invalid input' },
+      { status: 400 },
+    );
+  }
+  try {
+    const session = await updateSession(id, parsed.data);
+    const album = await immich.getProofingAlbum(session.albumId).catch(() => null);
+    return NextResponse.json({ session: toAdminSession(session, album) });
+  } catch (err) {
+    if (err instanceof ProofError)
+      return NextResponse.json({ error: err.message }, { status: 404 });
+    throw err;
+  }
+});
+
+/** DELETE: revoke the link. The client URL stops working immediately. */
+export const DELETE = withAdmin(async (_request: NextRequest, { params }: Context) => {
+  const { id } = await params;
+  try {
+    await deleteSession(id);
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    if (err instanceof ProofError)
+      return NextResponse.json({ error: err.message }, { status: 404 });
+    throw err;
+  }
+});
diff --git a/app/api/admin/proofing/route.ts b/app/api/admin/proofing/route.ts
new file mode 100644
index 0000000..9e896bd
--- /dev/null
+++ b/app/api/admin/proofing/route.ts
@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { withAdmin } from '@/lib/admin/withAdmin';
+import { loadAlbums, toAdminSession } from '@/lib/admin/proofing-view';
+import { immich } from '@/lib/immich';
+import { createSession, listSessions, ProofError, sessionInputSchema } from '@/lib/proofSessions';
+import { webhookUrl } from '@/lib/proofWebhook';
+
+/** GET: every proofing link, newest first. */
+export const GET = withAdmin(async () => {
+  const sessions = await listSessions();
+  const albums = await loadAlbums(sessions.map((s) => s.albumId));
+  const list = sessions
+    .map((s) => toAdminSession(s, albums.get(s.albumId) ?? null))
+    .sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+  return NextResponse.json({ sessions: list, webhookConfigured: webhookUrl() !== null });
+});
+
+/** POST: create a proofing link for one client and one album. */
+export const POST = withAdmin(async (request: NextRequest) => {
+  const parsed = sessionInputSchema.safeParse(await request.json().catch(() => null));
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: parsed.error.issues[0]?.message ?? 'Invalid input' },
+      { status: 400 },
+    );
+  }
+
+  // Refuse a link to an album Immich does not have, rather than hand out a 404.
+  const album = await immich.getProofingAlbum(parsed.data.albumId).catch(() => null);
+  if (!album) {
+    return NextResponse.json({ error: 'Immich has no album with that ID' }, { status: 400 });
+  }
+
+  try {
+    const session = await createSession(parsed.data);
+    return NextResponse.json({ session: toAdminSession(session, album) }, { status: 201 });
+  } catch (err) {
+    if (err instanceof ProofError) {
+      return NextResponse.json({ error: err.message }, { status: 409 });
+    }
+    throw err;
+  }
+});
diff --git a/app/api/admin/settings/route.ts b/app/api/admin/settings/route.ts
index b3c4344..d9bea20 100644
--- a/app/api/admin/settings/route.ts
+++ b/app/api/admin/settings/route.ts
@@ -1,28 +1,48 @@
 import { NextResponse } from 'next/server';
 import { withAdmin } from '@/lib/admin/withAdmin';
 import { revalidatePath } from 'next/cache';
-import { readSettingsYaml, writeSettingsYaml } from '@/lib/admin/yaml-service';
+import {
+  readSettingsYaml,
+  readSettingsYamlVersioned,
+  writeSettingsYaml,
+} from '@/lib/admin/yaml-service';
+import {
+  VersionConflictError,
+  baseVersionFrom,
+  conflictResponse,
+  etag,
+} from '@/lib/admin/contentVersion';
 import { invalidateConfigCache, getConfigOrNull } from '@/lib/config';
-import { immich } from '@/lib/immich';
 import { validateSettings } from '@/lib/config/settingsSchema';
 import { hashPasswordKeys } from '@/lib/admin/passwordHashing';
+import { keepLockedValues, resolveEnvLocks } from '@/lib/admin/envLocks';
+import { env } from '@/lib/env';
+import { validateSettingValues } from '@/lib/config/settingValues';
 
 const SITE_PASSWORD_KEY = new Set(['sitePassword']);
 import type { SettingsYaml } from '@/lib/config/schema';
 
 /** GET: Read current settings.yaml config. */
 export const GET = withAdmin(async () => {
-  const settings = await readSettingsYaml();
+  const { data: settings, version } = await readSettingsYamlVersioned();
   const config = getConfigOrNull();
-  return NextResponse.json({
-    settings: settings || {},
-    // The resolved value and its origin, so the panel can say when what it
-    // shows came from SITE_URL rather than from the field itself (#472).
-    siteUrl: {
-      effective: config?.siteUrl ?? null,
-      source: config?.siteUrlSource ?? 'none',
+  return NextResponse.json(
+    {
+      settings: settings || {},
+      // Sent back in If-Match on save (#601).
+      version,
+      // The resolved value and its origin, so the panel can say when what it
+      // shows came from SITE_URL rather than from the field itself (#472).
+      siteUrl: {
+        effective: config?.siteUrl ?? null,
+        source: config?.siteUrlSource ?? 'none',
+      },
+      // Fields an environment variable overrides, as path → variable name. Only
+      // the names: the values are secrets (a password, an ntfy topic) (#605).
+      envLocks: resolveEnvLocks(env),
     },
-  });
+    { headers: { ETag: etag(version) } },
+  );
 });
 
 /** PUT: Write settings.yaml config. */
@@ -34,12 +54,15 @@ export const PUT = withAdmin(async (request: Request) => {
 
   // Checked before the write, not after: settings.yaml is read by every public
   // page, so a malformed save is discovered by visitors rather than here.
+  // Then the values the site would silently ignore — an accent that is not
+  // hex, nine columns — which used to be saved with a success message.
   const validation = validateSettings(body.settings);
-  if (!validation.ok) {
+  const fields = validation.ok ? validateSettingValues(body.settings) : validation.errors;
+  if (fields.length > 0) {
     return NextResponse.json(
       {
         error: 'These settings could not be saved.',
-        fields: validation.errors,
+        fields,
       },
       { status: 400 },
     );
@@ -47,22 +70,27 @@ export const PUT = withAdmin(async (request: Request) => {
 
   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);
+    const stored = await readSettingsYaml().catch(() => null);
+    // A locked field keeps what the file holds: the environment wins anyway,
+    // so a changed value would be saved and then silently ignored (#605).
+    const incoming = keepLockedValues(body.settings as SettingsYaml, stored, resolveEnvLocks(env));
+    const settings = await hashPasswordKeys(incoming, SITE_PASSWORD_KEY, stored);
+    const version = await writeSettingsYaml(settings, baseVersionFrom(request));
     invalidateConfigCache();
-    immich.invalidateAll();
+    // No immich.invalidateAll(): the Immich cache holds Immich's data only, and
+    // the gallery.yaml side (allowlist, titles, order) is applied per request
+    // from the new config. Clearing it made the next visitor refetch every
+    // album although nothing in Immich had changed.
     revalidatePath('/', 'layout');
     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,
+      version,
     });
   } catch (err) {
+    if (err instanceof VersionConflictError) return conflictResponse(err.currentVersion);
     console.error('[Admin] Failed to write settings.yaml:', err);
     return NextResponse.json({ error: 'Failed to save settings' }, { status: 500 });
   }
diff --git a/app/api/analytics/__tests__/track-route.test.ts b/app/api/analytics/__tests__/track-route.test.ts
index ce14e5c..a122e95 100644
--- a/app/api/analytics/__tests__/track-route.test.ts
+++ b/app/api/analytics/__tests__/track-route.test.ts
@@ -108,6 +108,28 @@ describe('POST /api/analytics/track', () => {
     expect(Object.keys(data.days[dateKey].pages)).toEqual(['/journal']);
   });
 
+  it('records a client proofing link without its token', async () => {
+    // The token in /proof/<token> is the client's only credential; the counter
+    // must not copy it into a file that is neither 0600 nor meant to hold one.
+    const token = 'AbCdEfGhIjKlMnOpQrStUvWxYz012345';
+    for (const path of [`/proof/${token}`, `/proof/${token}/`, `/proof/${token}?x=1`]) {
+      await post({ path });
+
+      const data = savedData();
+      const [dateKey] = Object.keys(data.days);
+      expect(JSON.stringify(data), path).not.toContain(token);
+      expect(data.days[dateKey].pages, path).toEqual({ '/proof': 1 });
+    }
+  });
+
+  it('leaves paths that merely start with "proof" alone', async () => {
+    await post({ path: '/proofreading' });
+
+    const data = savedData();
+    const [dateKey] = Object.keys(data.days);
+    expect(Object.keys(data.days[dateKey].pages)).toEqual(['/proofreading']);
+  });
+
   it('caps distinct page keys per day without dropping the pageview itself', async () => {
     const dateKey = new Date().toISOString().split('T')[0];
     const pages: Record<string, number> = {};
diff --git a/app/api/analytics/track/route.ts b/app/api/analytics/track/route.ts
index 389a7f4..7cf1e65 100644
--- a/app/api/analytics/track/route.ts
+++ b/app/api/analytics/track/route.ts
@@ -23,6 +23,16 @@ const MAX_PAGES_PER_DAY = 500;
 /** Well past any real route on this app; anything longer is not a path someone navigated to. */
 const MAX_PATH_LENGTH = 200;
 
+/**
+ * The path as it is counted. A client proofing link's path carries its token
+ * (/proof/<token>), which is the client's only credential: proofing.json is
+ * written 0600 for that reason, and this file is not. Every link is counted as
+ * `/proof`, so the counter never holds a working link.
+ */
+function countedPath(pagePath: string): string {
+  return /^\/proof(?:\/|$)/.test(pagePath) ? '/proof' : pagePath;
+}
+
 interface AnalyticsData {
   summary: {
     totalViews: number;
@@ -92,7 +102,7 @@ export async function POST(req: NextRequest) {
 
     const body = await req.json().catch(() => null);
     const rawPath = typeof body?.path === 'string' ? body.path : '/';
-    const pagePath = (rawPath.split('?')[0].slice(0, MAX_PATH_LENGTH) || '/') as string;
+    const pagePath = countedPath(rawPath.split('?')[0].slice(0, MAX_PATH_LENGTH) || '/');
     const userAgent = req.headers.get('user-agent') || '';
     const isMobile = /mobile|iphone|ipad|android/i.test(userAgent);
     const deviceType = isMobile ? 'mobile' : 'desktop';
diff --git a/app/api/auth/__tests__/route.test.ts b/app/api/auth/__tests__/route.test.ts
new file mode 100644
index 0000000..37ab1f6
--- /dev/null
+++ b/app/api/auth/__tests__/route.test.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest';
+import { NextRequest } from 'next/server';
+
+/**
+ * A slug without a password must be indistinguishable from a wrong password.
+ * A separate "not password-protected" answer let anyone probing slugs tell
+ * which ones exist behind a lock — drafts and offline subpages included, whose
+ * pages answer 404 and give nothing away themselves.
+ */
+
+const config = {
+  authSecret: 'test-secret-that-is-at-least-32-chars-long',
+  subpages: [
+    { slug: 'private', name: 'Private', password: 'letmein', albumIds: [] },
+    { slug: 'public', name: 'Public', albumIds: [] },
+  ],
+  albumPasswords: {},
+  sitePassword: undefined,
+};
+
+vi.mock('@/lib/config', () => ({
+  getConfig: () => config,
+  getConfigOrNull: () => config,
+}));
+
+const { POST } = await import('../route');
+
+async function attempt(slug: string, password: string, type = 'subpage') {
+  // Eight attempts in all, inside the route's limit of ten per minute.
+  const res = await POST(
+    new NextRequest('http://localhost/api/auth', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ slug, password, type }),
+    }),
+  );
+  return { status: res.status, body: await res.json() };
+}
+
+describe('POST /api/auth', () => {
+  it('unlocks a protected subpage with its password', async () => {
+    const res = await attempt('private', 'letmein');
+    expect(res.status).toBe(200);
+  });
+
+  it('answers a slug without a password like a wrong password', async () => {
+    const wrong = await attempt('private', 'nope');
+    expect(wrong.status).toBe(401);
+
+    for (const [slug, type] of [
+      ['public', 'subpage'],
+      ['does-not-exist', 'subpage'],
+      ['does-not-exist', 'journal'],
+      ['does-not-exist', 'page'],
+      ['00000000-0000-0000-0000-000000000000', 'album'],
+      ['__site__', 'site'],
+    ]) {
+      expect(await attempt(slug, 'nope', type)).toEqual(wrong);
+    }
+  });
+});
diff --git a/app/api/auth/route.ts b/app/api/auth/route.ts
index b7ede70..b0b7aad 100644
--- a/app/api/auth/route.ts
+++ b/app/api/auth/route.ts
@@ -7,7 +7,7 @@
  */
 
 import { NextRequest, NextResponse } from 'next/server';
-import { authenticate, isHttpsRequest, isProtected, type ProtectedType } from '@/lib/auth';
+import { authenticate, isHttpsRequest, type ProtectedType } from '@/lib/auth';
 import { checkRateLimit, getClientIp, retryAfterSeconds } from '@/lib/rate-limit';
 
 /** Tight limit for auth attempts — 10 per minute per IP. */
@@ -49,28 +49,16 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Invalid password format or length' }, { status: 400 });
     }
 
-    const TYPES: ProtectedType[] = ['subpage', 'album', 'journal', 'site'];
+    const TYPES: ProtectedType[] = ['subpage', 'album', 'journal', 'page', 'site'];
     if (!TYPES.includes(type)) {
       return NextResponse.json({ error: 'Invalid type' }, { status: 400 });
     }
 
-    if (!isProtected(slug, type)) {
-      const typeLabel =
-        type === 'journal'
-          ? 'Journal entry'
-          : type === 'subpage'
-            ? 'Subpage'
-            : type === 'site'
-              ? 'Site'
-              : 'Album';
-      return NextResponse.json(
-        {
-          error: `${typeLabel} is not password-protected`,
-        },
-        { status: 400 },
-      );
-    }
-
+    // A key with no password (or none at all) answers exactly like a wrong
+    // password: `authenticate()` returns null for both. A distinct "not
+    // password-protected" reply told anyone probing slugs which ones hold a
+    // locked entry — including drafts and offline subpages, whose pages answer
+    // 404 and so give nothing away themselves.
     const setCookie = await authenticate(slug, password, type, isHttpsRequest(request));
     if (!setCookie) {
       return NextResponse.json({ error: 'Invalid password' }, { status: 401 });
diff --git a/app/api/download/[album]/archive/__tests__/route.test.ts b/app/api/download/[album]/archive/__tests__/route.test.ts
index d32a747..537963c 100644
--- a/app/api/download/[album]/archive/__tests__/route.test.ts
+++ b/app/api/download/[album]/archive/__tests__/route.test.ts
@@ -32,12 +32,14 @@ import { GET, POST } from '../route';
 import { getConfig, getConfigOrNull } from '@/lib/config';
 import { decodeAssetId } from '@/lib/tokens';
 import { immich } from '@/lib/immich';
+import { getClientIp } from '@/lib/rate-limit';
 
 const mockConfig = getConfig as unknown as ReturnType<typeof vi.fn>;
 const mockConfigOrNull = getConfigOrNull as unknown as ReturnType<typeof vi.fn>;
 const mockDecode = decodeAssetId as unknown as ReturnType<typeof vi.fn>;
 const mockGetAlbum = immich.getAlbum as unknown as ReturnType<typeof vi.fn>;
 const mockStream = immich.streamAsset as unknown as ReturnType<typeof vi.fn>;
+const mockClientIp = getClientIp as unknown as ReturnType<typeof vi.fn>;
 
 const ALBUM = {
   id: 'album-uuid',
@@ -269,6 +271,75 @@ describe('refusals', () => {
     expect(html).not.toContain('evil.example');
   });
 
+  /**
+   * Next rebuilds `nextUrl` from its own bind address, so behind
+   * `next start -H 127.0.0.1` or a reverse proxy it reads `localhost` while
+   * the visitor's Referer names the host they typed. Comparing against
+   * `nextUrl.origin` sent every visitor home.
+   */
+  it('follows the Referer when Next knows itself as localhost but was asked as another host', async () => {
+    mockConfig.mockReturnValue({ albums: ['album-uuid'], albumDownloads: {} });
+    const req = new NextRequest('http://localhost:3598/api/download/album-token/archive', {
+      headers: {
+        Accept: 'text/html',
+        Host: '127.0.0.1:3598',
+        Referer: 'http://127.0.0.1:3598/polen/krakau',
+      },
+    });
+    const html = await (await GET(req, params)).text();
+    expect(html).toContain('href="/polen/krakau"');
+  });
+
+  it('does not follow a Referer whose path would read as a host', async () => {
+    mockConfig.mockReturnValue({ albums: ['album-uuid'], albumDownloads: {} });
+    const html = await (await GET(browsesHtml('http://localhost//evil.example/x'), params)).text();
+    expect(html).toContain('href="/"');
+    expect(html).not.toContain('evil.example');
+  });
+
+  it('ignores X-Forwarded-Host unless a proxy is trusted', async () => {
+    mockConfig.mockReturnValue({ albums: ['album-uuid'], albumDownloads: {} });
+    const req = new NextRequest('http://localhost/api/download/album-token/archive', {
+      headers: {
+        Accept: 'text/html',
+        'X-Forwarded-Host': 'evil.example',
+        Referer: 'https://evil.example/phish',
+      },
+    });
+    const html = await (await GET(req, params)).text();
+    expect(html).toContain('href="/"');
+  });
+
+  /**
+   * The page used to be browser-default: white, blue link, system font — in
+   * the middle of a dark gallery. It now carries the site's colour mode and
+   * accent in an inline stylesheet, and a policy that allows nothing else.
+   */
+  it("wears the site's colour mode and accent, under a policy that allows only its style", async () => {
+    mockConfig.mockReturnValue({ albums: ['album-uuid'], albumDownloads: {} });
+    mockConfigOrNull.mockReturnValue({
+      lang: 'de',
+      colorMode: 'dark',
+      theme: { preset: 'studio-modern', accent: '#e60012' },
+    });
+    const res = await GET(browsesHtml(), params);
+    const html = await res.text();
+    expect(html).toContain('<style>');
+    expect(html).toContain('color-scheme:dark;--bg:#121212');
+    expect(html).toContain('--accent:#e60012');
+    expect(html).not.toContain('style="');
+    expect(res.headers.get('content-security-policy')).toBe(
+      "default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'",
+    );
+  });
+
+  it("follows the visitor's OS when the site's mode is auto", async () => {
+    mockConfig.mockReturnValue({ albums: ['album-uuid'], albumDownloads: {} });
+    mockConfigOrNull.mockReturnValue({ colorMode: 'auto' });
+    const html = await (await GET(browsesHtml(), params)).text();
+    expect(html).toContain('@media (prefers-color-scheme: light){:root{color-scheme:light;');
+  });
+
   it('keeps JSON for an API caller', async () => {
     mockConfig.mockReturnValue({ albums: ['album-uuid'], albumDownloads: {} });
     const res = await GET(getReq(), params);
@@ -311,3 +382,51 @@ describe('abort', () => {
     expect(mockStream).toHaveBeenCalledTimes(1);
   });
 });
+
+/**
+ * The album archive and the proofing archive draw on one pool of slots per
+ * client, so holding two album ZIPs open closes the proofing route as well.
+ */
+describe('concurrent archives', () => {
+  it('shares one per-client cap with the proofing archive route', async () => {
+    mockClientIp.mockReturnValue('198.51.100.7');
+    // Originals that never finish, so both archives stay open.
+    mockStream.mockImplementation(() =>
+      Promise.resolve({
+        stream: new ReadableStream({
+          start(controller) {
+            controller.enqueue(new TextEncoder().encode('first-chunk'));
+          },
+        }),
+        contentType: 'image/jpeg',
+        contentLength: null,
+      }),
+    );
+
+    const first = await GET(getReq(), params);
+    const second = await POST(postReq(['asset-token-1']), params);
+    expect(first.status).toBe(200);
+    expect(second.status).toBe(200);
+
+    const third = await GET(getReq(), params);
+    expect(third.status).toBe(429);
+    expect(third.headers.get('retry-after')).toBeTruthy();
+
+    const { GET: proofArchive } = await import('@/app/api/proof/[token]/archive/route');
+    const proof = await proofArchive(
+      new NextRequest('http://localhost/api/proof/tok/archive?scope=album'),
+      { params: Promise.resolve({ token: 'tok' }) },
+    );
+    expect(proof.status).toBe(429);
+
+    // Closing one download frees its slot for the next.
+    await first.body!.cancel();
+    await vi.waitFor(async () => {
+      const again = await GET(getReq(), params);
+      expect(again.status).toBe(200);
+      await again.body!.cancel();
+    });
+    await second.body!.cancel();
+    mockClientIp.mockReturnValue('127.0.0.1');
+  });
+});
diff --git a/app/api/download/[album]/archive/route.ts b/app/api/download/[album]/archive/route.ts
index 273da5a..19e2d8e 100644
--- a/app/api/download/[album]/archive/route.ts
+++ b/app/api/download/[album]/archive/route.ts
@@ -16,18 +16,15 @@
  * in a blob.
  */
 
-import { NextRequest, NextResponse } from 'next/server';
-import { Readable } from 'node:stream';
-import archiver from 'archiver';
+import { NextRequest } from 'next/server';
 import { cookies } from 'next/headers';
 import { immich, ImmichUnavailableError, type ImmichAsset } from '@/lib/immich';
 import { decodeAssetId } from '@/lib/tokens';
 import { getConfig } from '@/lib/config';
 import { checkRateLimit, getClientIp, retryAfterSeconds } from '@/lib/rate-limit';
 import { isAlbumReachable, siteLockResponse } from '@/lib/auth';
-import { contentDisposition, safeDownloadName } from '@/lib/downloadName';
-import { getDictionary } from '@/lib/i18n';
-import { getLocale, getServerDictionary } from '@/lib/i18n/server';
+import { refusal, withArchiveSlot, type ArchiveStreamer } from '@/lib/zipArchive';
+import { readBodyCapped } from '@/lib/requestBody';
 
 export const dynamic = 'force-dynamic';
 
@@ -52,146 +49,6 @@ const MAX_SELECTION_ASSETS = 1000;
  */
 const MAX_BODY_BYTES = 256 * 1024;
 
-/** Escape a value interpolated into the refusal page. */
-function escapeHtml(value: string): string {
-  return value.replace(/[&<>"']/g, (char) =>
-    char === '&'
-      ? '&amp;'
-      : char === '<'
-        ? '&lt;'
-        : char === '>'
-          ? '&gt;'
-          : char === '"'
-            ? '&quot;'
-            : '&#39;',
-  );
-}
-
-/**
- * A refusal, rendered for whoever asked.
- *
- * A download begins as a navigation — the header link, or the proofing modal's
- * form POST — and only a success carries `Content-Disposition: attachment`. A
- * bare JSON body would therefore replace the gallery with
- * `{"error":"Too many requests"}` on a rate limit, which is the likely failure
- * (5 rpm, and the ZIP shows nothing until the first byte, so people click
- * again). Browsers get a page with a way back; callers asking for JSON keep it.
- *
- * The page speaks the site's language; the JSON stays English, like every other
- * API error.
- */
-function refusal(
-  request: NextRequest,
-  status: number,
-  reason: RefusalReason,
-  retryAfter?: number,
-): NextResponse {
-  const headers: Record<string, string> = { 'Cache-Control': 'no-store' };
-  if (retryAfter) headers['Retry-After'] = String(retryAfter);
-
-  if (!(request.headers.get('accept') ?? '').includes('text/html')) {
-    return NextResponse.json({ error: getDictionary('en').download[reason] }, { status, headers });
-  }
-
-  const t = getServerDictionary().download;
-  headers['Content-Type'] = 'text/html; charset=utf-8';
-  return new NextResponse(
-    `<!doctype html><html lang="${getLocale()}"><head><meta charset="utf-8">` +
-      '<meta name="viewport" content="width=device-width, initial-scale=1">' +
-      `<title>${escapeHtml(t.unavailableTitle)}</title></head>` +
-      '<body style="font-family:system-ui,sans-serif;max-width:32rem;margin:15vh auto;padding:0 1.5rem;line-height:1.6">' +
-      `<h1 style="font-size:1.25rem">${escapeHtml(t.unavailableTitle)}</h1>` +
-      `<p>${escapeHtml(t[reason])}</p>` +
-      `<p><a href="${escapeHtml(backHref(request))}">${escapeHtml(t.back)}</a></p>` +
-      '</body></html>',
-    { status, headers },
-  );
-}
-
-type RefusalReason = 'notAvailable' | 'rateLimited' | 'immichUnavailable';
-
-/**
- * Where the refusal page's link leads: the page the download was started from,
- * so a visitor lands back on the album rather than the home page. Only a
- * same-origin `Referer` is followed — anything else would turn this page into an
- * open redirect with our name on it.
- */
-function backHref(request: NextRequest): string {
-  const referer = request.headers.get('referer');
-  if (!referer) return '/';
-  try {
-    const url = new URL(referer);
-    if (url.origin !== request.nextUrl.origin) return '/';
-    return `${url.pathname}${url.search}`;
-  } catch {
-    return '/';
-  }
-}
-
-/**
- * A unique, ZIP-safe entry name. Originals can collide ("IMG_0001.jpg" from two
- * cards), and a ZIP with duplicate entry names is ambiguous to unzip.
- */
-function uniqueEntryName(raw: string | undefined, used: Set<string>): string {
-  const base = safeDownloadName(raw);
-  let name = base;
-  let n = 2;
-  while (used.has(name)) {
-    const dot = base.lastIndexOf('.');
-    name = dot > 0 ? `${base.slice(0, dot)}-${n}${base.slice(dot)}` : `${base}-${n}`;
-    n++;
-  }
-  used.add(name);
-  return name;
-}
-
-/**
- * Append one entry, resolving once it has been written (or the archive has been
- * torn down because the visitor left).
- *
- * archiver processes entries strictly one at a time — that is what keeps memory
- * flat — but `append()` only *queues* them. Firing every `append` up front (and
- * so opening every upstream request at once) is what made a large album's later
- * originals sit long enough to time out and truncate the ZIP. Awaiting the
- * `entry` event holds the loop until the previous file has finished, so only
- * one original is ever in flight. `close` resolves too, so an aborted download
- * stops the loop rather than hanging on a file nothing will read.
- *
- * On `close` and `error` the source is destroyed as well. archiver does not do
- * that for a queued or half-read entry, and the upstream body would otherwise
- * hold its socket out of undici's pool until GC finalises it (#635).
- */
-function appendEntry(archive: archiver.Archiver, source: Readable, name: string): Promise<void> {
-  return new Promise<void>((resolve, reject) => {
-    const cleanup = () => {
-      archive.off('entry', onEntry);
-      archive.off('error', onError);
-      archive.off('close', onClose);
-    };
-    const onEntry = () => {
-      cleanup();
-      resolve();
-    };
-    // `close` fires when the response is consumed or aborted. Resolving on it
-    // lets the loop see `archive.destroyed` and stop, rather than hanging on a
-    // file nothing will read.
-    const onClose = () => {
-      cleanup();
-      source.destroy();
-      resolve();
-    };
-    const onError = (error: Error) => {
-      cleanup();
-      source.destroy();
-      reject(error);
-    };
-    archive.once('entry', onEntry);
-    archive.once('error', onError);
-    archive.once('close', onClose);
-    archive.append(source, { name });
-  });
-}
-
 /** A refusal to short-circuit with, or a decoded album ready to stream. */
 type ResolvedAlbum = { error: Response } | { albumName: string; assets: ImmichAsset[] };
 
@@ -248,62 +105,6 @@ async function resolveAlbum(
   return { albumName: album.albumName, assets };
 }
 
-/**
- * Stream `assets` as a ZIP of originals.
- *
- * archiver writes data descriptors, so entry sizes are never known up front and
- * memory stays flat no matter how large the album is. The loop pulls one
- * original at a time and stops as soon as the response is gone.
- */
-function streamArchive(albumName: string, assets: ImmichAsset[]): NextResponse {
-  const archive = archiver('zip', { store: true });
-  archive.on('error', (err) => {
-    // A visitor cancelling the download is not a failure worth a log line.
-    if (err.name === 'AbortError') return;
-    console.error(`[Download] Archive stream failed:`, err);
-  });
-
-  const body = Readable.toWeb(archive) as unknown as ReadableStream;
-
-  // Fill the archive in the background: the response has to go out first so the
-  // browser starts reading, and each originals fetch is awaited in turn.
-  void (async () => {
-    try {
-      const used = new Set<string>();
-      for (const asset of assets) {
-        // The visitor left (or the archive failed): stop pulling originals.
-        if (archive.destroyed) break;
-        const result = await immich.streamAsset(asset.id, 'original');
-        if (!result) continue;
-        if (archive.destroyed) {
-          // Left while the headers were on their way: release the body unread.
-          await result.stream.cancel();
-          break;
-        }
-        const nodeStream = Readable.fromWeb(
-          result.stream as unknown as import('node:stream/web').ReadableStream,
-        );
-        await appendEntry(archive, nodeStream, uniqueEntryName(asset.originalFileName, used));
-      }
-      if (!archive.destroyed) await archive.finalize();
-    } catch (err) {
-      archive.destroy(err instanceof Error ? err : new Error(String(err)));
-    }
-  })();
-
-  const zipName = `${safeDownloadName(albumName, 'album')}.zip`;
-  return new NextResponse(body, {
-    headers: {
-      'Content-Type': 'application/zip',
-      'Content-Disposition': contentDisposition(zipName),
-      // Private: authorised per visitor, so a shared cache must not hand the
-      // archive to the next one.
-      'Cache-Control': 'private, no-store',
-      'X-Content-Type-Options': 'nosniff',
-    },
-  });
-}
-
 /**
  * Read the POST body with a hard cap, then pull the token list out of it.
  *
@@ -342,41 +143,16 @@ async function readSelectedTokens(request: NextRequest): Promise<string[] | null
   return tokens.length > 0 ? tokens : null;
 }
 
-/** Read a request body as text, aborting once it exceeds `limit` bytes. */
-async function readBodyCapped(request: NextRequest, limit: number): Promise<string | null> {
-  const stream = request.body;
-  if (!stream) return '';
-
-  const reader = stream.getReader();
-  const decoder = new TextDecoder();
-  let text = '';
-  let bytes = 0;
-  try {
-    for (;;) {
-      const { done, value } = await reader.read();
-      if (done) break;
-      bytes += value.byteLength;
-      if (bytes > limit) {
-        await reader.cancel();
-        return null;
-      }
-      text += decoder.decode(value, { stream: true });
-    }
-    text += decoder.decode();
-    return text;
-  } finally {
-    reader.releaseLock();
-  }
-}
-
 export async function GET(
   request: NextRequest,
   { params }: { params: Promise<{ album: string }> },
 ) {
   const { album } = await params;
-  const resolved = await resolveAlbum(request, { album });
-  if ('error' in resolved) return resolved.error;
-  return streamArchive(resolved.albumName, resolved.assets);
+  return withArchiveSlot(request, async (stream) => {
+    const resolved = await resolveAlbum(request, { album });
+    if ('error' in resolved) return resolved.error;
+    return stream(resolved.albumName, resolved.assets);
+  });
 }
 
 export async function POST(
@@ -384,6 +160,15 @@ export async function POST(
   { params }: { params: Promise<{ album: string }> },
 ) {
   const { album } = await params;
+  return withArchiveSlot(request, (stream) => streamSelection(request, album, stream));
+}
+
+/** The POST handler's body, run inside the client's archive slot. */
+async function streamSelection(
+  request: NextRequest,
+  album: string,
+  stream: ArchiveStreamer,
+): Promise<Response> {
   const resolved = await resolveAlbum(request, { album });
   if ('error' in resolved) return resolved.error;
 
@@ -418,5 +203,5 @@ export async function POST(
     return refusal(request, 404, 'notAvailable');
   }
 
-  return streamArchive(resolved.albumName, selected);
+  return stream(resolved.albumName, selected);
 }
diff --git a/app/api/exif/[id]/route.ts b/app/api/exif/[id]/route.ts
index a39d8d4..96db270 100644
--- a/app/api/exif/[id]/route.ts
+++ b/app/api/exif/[id]/route.ts
@@ -7,6 +7,8 @@
 
 import { NextRequest, NextResponse } from 'next/server';
 import { immich, ImmichUnavailableError } from '@/lib/immich';
+import { isPublishedAsset } from '@/lib/publishedAssets';
+import { isAdminAuthenticated } from '@/lib/admin/auth';
 import { decodeAssetId } from '@/lib/tokens';
 import { getConfig } from '@/lib/config';
 import { checkRateLimit, getClientIp, retryAfterSeconds } from '@/lib/rate-limit';
@@ -52,6 +54,16 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
     return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
   }
 
+  // Only what the site currently shows (GHSA-gfh4-6275-9gqv): a token stays
+  // decodable forever, so an unpublished album or a revoked proofing link
+  // would otherwise keep serving. Signed-in admins pass for previews.
+  if (!(await isPublishedAsset(assetId)) && !(await isAdminAuthenticated())) {
+    return NextResponse.json(
+      { error: 'Not found' },
+      { status: 404, headers: { 'Cache-Control': 'no-store' } },
+    );
+  }
+
   let asset;
   try {
     asset = await immich.getAssetInfo(assetId);
diff --git a/app/api/image/[id]/route.ts b/app/api/image/[id]/route.ts
index 276d3c4..9d004b5 100644
--- a/app/api/image/[id]/route.ts
+++ b/app/api/image/[id]/route.ts
@@ -3,13 +3,15 @@
  * without exposing the Immich server or API key.
  *
  * Usage: GET /api/image/:token?size=thumbnail|preview|original
- *        GET /api/image/:token?w=640&q=75  (for next/image loader)
+ *        GET /api/image/:token?size=preview&w=1440  (next/image loader, lib/imageSize.ts)
  * The :token is an encoded asset ID (not a raw UUID).
  */
 
 import { NextRequest, NextResponse } from 'next/server';
 import { immich, ImmichUnavailableError } from '@/lib/immich';
 import { resolveImageSize } from '@/lib/imageSize';
+import { isPublishedAsset } from '@/lib/publishedAssets';
+import { isAdminAuthenticated } from '@/lib/admin/auth';
 import { decodeAssetId } from '@/lib/tokens';
 import { getConfig } from '@/lib/config';
 import { checkRateLimit, getClientIp, retryAfterSeconds } from '@/lib/rate-limit';
@@ -69,6 +71,16 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
     return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
   }
 
+  // Only what the site currently shows (GHSA-gfh4-6275-9gqv): a token stays
+  // decodable forever, so an unpublished album or a revoked proofing link
+  // would otherwise keep serving. Signed-in admins pass for previews.
+  if (!(await isPublishedAsset(assetId)) && !(await isAdminAuthenticated())) {
+    return NextResponse.json(
+      { error: 'Not found' },
+      { status: 404, headers: { 'Cache-Control': 'no-store' } },
+    );
+  }
+
   const size = resolveImageSize(
     request.nextUrl.searchParams.get('size'),
     request.nextUrl.searchParams.get('w'),
diff --git a/app/api/image/__tests__/image-route.test.ts b/app/api/image/__tests__/image-route.test.ts
index 3d0c681..9bab4b1 100644
--- a/app/api/image/__tests__/image-route.test.ts
+++ b/app/api/image/__tests__/image-route.test.ts
@@ -4,6 +4,14 @@ import { GET } from '../[id]/route';
 import { encodeAssetId } from '@/lib/tokens';
 import { immich, ImmichUnavailableError } from '@/lib/immich';
 
+const published = vi.hoisted(() => ({ value: true }));
+vi.mock('@/lib/publishedAssets', () => ({
+  isPublishedAsset: async () => published.value,
+}));
+vi.mock('@/lib/admin/auth', () => ({
+  isAdminAuthenticated: async () => false,
+}));
+
 vi.mock('@/lib/immich', async () => {
   const actual = await vi.importActual<typeof import('@/lib/immich')>('@/lib/immich');
   return {
@@ -53,6 +61,18 @@ describe('GET /api/image/[id]', () => {
     expect(mockStream).not.toHaveBeenCalled();
   });
 
+  it('refuses an asset the site no longer shows, without caching the refusal', async () => {
+    published.value = false;
+    try {
+      const res = await call(encodeAssetId(ASSET_ID));
+      expect(res.status).toBe(404);
+      expect(res.headers.get('Cache-Control')).toBe('no-store');
+      expect(mockStream).not.toHaveBeenCalled();
+    } finally {
+      published.value = true;
+    }
+  });
+
   it('serves a valid token', async () => {
     mockStream.mockResolvedValue(fakeBody('image/jpeg'));
     const res = await call(encodeAssetId(ASSET_ID));
diff --git a/app/api/og/__tests__/route.test.tsx b/app/api/og/__tests__/route.test.tsx
new file mode 100644
index 0000000..2739832
--- /dev/null
+++ b/app/api/og/__tests__/route.test.tsx
@@ -0,0 +1,82 @@
+import { describe, it, expect, vi } from 'vitest';
+import { NextRequest } from 'next/server';
+import type { ReactNode } from 'react';
+
+/**
+ * The share card prints its URL's text on the site's own domain. Only text
+ * the site signed itself (lib/ogImage.ts) may reach it; any other URL gets the
+ * plain site card.
+ */
+
+const config = {
+  authSecret: 'test-secret-that-is-at-least-32-chars-long',
+  siteTitle: 'Jane Doe Photography',
+  theme: { accent: '#e60012' },
+  sitePassword: undefined,
+};
+
+vi.mock('@/lib/config', () => ({
+  getConfig: () => config,
+  getConfigOrNull: () => config,
+}));
+
+let rendered: ReactNode = null;
+vi.mock('next/og', () => ({
+  ImageResponse: class {
+    status = 200;
+    constructor(element: ReactNode) {
+      rendered = element;
+    }
+  },
+}));
+
+const { GET } = await import('../route');
+const { ogImageUrl } = await import('@/lib/ogImage');
+
+/** Every non-empty string in the rendered card, in order. */
+function textOf(node: ReactNode): string[] {
+  if (node === null || node === undefined || typeof node === 'boolean') return [];
+  if (node === '') return [];
+  if (typeof node === 'string' || typeof node === 'number') return [String(node)];
+  if (Array.isArray(node)) return node.flatMap(textOf);
+  if (typeof node === 'object' && 'props' in node) {
+    return textOf((node.props as { children?: ReactNode }).children);
+  }
+  return [];
+}
+
+async function cardText(path: string): Promise<string[]> {
+  rendered = null;
+  const res = await GET(new NextRequest(`http://localhost${path}`) as never);
+  expect(res.status).toBe(200);
+  return textOf(rendered);
+}
+
+describe('GET /api/og', () => {
+  it('renders text the site signed', async () => {
+    const text = await cardText(ogImageUrl('Iceland 2024', '42 photos'));
+    expect(text).toEqual(['Iceland 2024', '42 photos']);
+  });
+
+  it('ignores an unsigned title and shows the site title', async () => {
+    const text = await cardText(
+      `/api/og?title=${encodeURIComponent('Your account is locked — call +1 555 0100')}`,
+    );
+    expect(text).toEqual(['Jane Doe Photography']);
+  });
+
+  it('ignores text whose signature belongs to other text', async () => {
+    const url = new URL(ogImageUrl('Iceland 2024', '42 photos'), 'http://localhost');
+    url.searchParams.set('subtitle', 'send your password to evil.example');
+    const text = await cardText(url.pathname + url.search);
+    expect(text).toEqual(['Jane Doe Photography']);
+  });
+
+  it('keeps a signature intact across non-ASCII text and truncation', async () => {
+    const long = '家族相册 🏔️ '.repeat(40);
+    const text = await cardText(ogImageUrl(long));
+    expect(text).toHaveLength(1);
+    expect(text[0]).not.toBe('Jane Doe Photography');
+    expect(Array.from(text[0]).length).toBe(200);
+  });
+});
diff --git a/app/api/og/route.tsx b/app/api/og/route.tsx
index 6a13c78..693556f 100644
--- a/app/api/og/route.tsx
+++ b/app/api/og/route.tsx
@@ -3,7 +3,11 @@
  * Uses next/og (ImageResponse) to create 1200×630 cards.
  * Reads accent color from theme config.
  *
- * GET /api/og?title=Album+Name&subtitle=12+photos
+ * GET /api/og?title=Album+Name&subtitle=12+photos&sig=…
+ *
+ * Only text signed by `ogImageUrl()` (lib/ogImage.ts) is rendered; anything
+ * else gets the plain site card, so the site cannot be made to print
+ * arbitrary text under its own name.
  */
 
 import { ImageResponse } from 'next/og';
@@ -11,6 +15,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { getConfig } from '@/lib/config';
 import { checkRateLimit, getClientIp, retryAfterSeconds } from '@/lib/rate-limit';
 import { siteLockResponse } from '@/lib/auth';
+import { verifiedOgText } from '@/lib/ogImage';
 
 /**
  * OG image rendering runs satori + resvg per request and each unique ?title
@@ -22,7 +27,7 @@ const OG_RPM = 30;
 
 export async function GET(request: NextRequest) {
   const ip = getClientIp(request);
-  const { theme } = getConfig();
+  const { theme, siteTitle, authSecret } = getConfig();
 
   const { success, resetAt } = checkRateLimit(`og:${ip}`, OG_RPM);
   if (!success) {
@@ -40,9 +45,12 @@ export async function GET(request: NextRequest) {
   const locked = siteLockResponse(request);
   if (locked) return locked;
 
-  const { searchParams } = request.nextUrl;
-  const title = (searchParams.get('title') || 'Gallery').slice(0, 200);
-  const subtitle = (searchParams.get('subtitle') || '').slice(0, 100);
+  // The site title is already in the visitor's language, or falls back to the
+  // locale's own word for "Gallery" (lib/config). It is also the card for any
+  // URL whose text the site did not sign itself.
+  const signed = verifiedOgText(request.nextUrl.searchParams, authSecret);
+  const title = signed?.title || siteTitle || '';
+  const subtitle = signed?.subtitle ?? '';
 
   return new ImageResponse(
     <div
@@ -83,7 +91,8 @@ export async function GET(request: NextRequest) {
         {title}
       </div>
 
-      {/* Subtitle */}
+      {/* Subtitle — printed as the locale spells it. A lowercase transform
+          turned German "25 Fotos" into "25 fotos". */}
       {subtitle && (
         <div
           style={{
@@ -92,7 +101,6 @@ export async function GET(request: NextRequest) {
             fontWeight: 300,
             marginTop: '16px',
             letterSpacing: '0.08em',
-            textTransform: 'lowercase',
           }}
         >
           {subtitle}
diff --git a/app/api/proof/[token]/archive/route.ts b/app/api/proof/[token]/archive/route.ts
new file mode 100644
index 0000000..4be6c34
--- /dev/null
+++ b/app/api/proof/[token]/archive/route.ts
@@ -0,0 +1,72 @@
+/**
+ * GET /api/proof/:token/archive?scope=selection|album — the originals of a
+ * client proofing link as a ZIP.
+ *
+ * What may be downloaded is the session's to say (`download: selection` or
+ * `album`), every successful start counts against its `downloadLimit`, and
+ * the selection ZIP is built from the saved selection, never from the request.
+ * Streaming and the refusal page are shared with the album archive route.
+ */
+
+import { NextRequest } from 'next/server';
+import { resolveProofAccess } from '@/lib/proofAccess';
+import { claimDownload, ProofError } from '@/lib/proofSessions';
+import { refusal, withArchiveSlot, type ArchiveStreamer } from '@/lib/zipArchive';
+
+export const dynamic = 'force-dynamic';
+
+/** Same budget as the album archive: a whole album of originals per request. */
+const ARCHIVE_RPM = 5;
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ token: string }> },
+) {
+  const { token } = await params;
+  // One slot pool with the album archive route, taken before the first Immich
+  // request and before the download is counted against the link's limit.
+  return withArchiveSlot(request, (stream) => streamProofArchive(request, token, stream));
+}
+
+/** The handler's body, run inside the client's archive slot. */
+async function streamProofArchive(
+  request: NextRequest,
+  token: string,
+  stream: ArchiveStreamer,
+): Promise<Response> {
+  const access = await resolveProofAccess(request, token, 'proof-archive', ARCHIVE_RPM);
+  if ('error' in access) {
+    const status = access.error.status;
+    if (status === 429) {
+      const retry = Number(access.error.headers.get('Retry-After')) || undefined;
+      return refusal(request, 429, 'rateLimited', retry);
+    }
+    if (status === 503) return refusal(request, 503, 'immichUnavailable', 30);
+    if (status === 401) return access.error;
+    return refusal(request, 404, 'notAvailable');
+  }
+
+  const { session } = access;
+  const scope = request.nextUrl.searchParams.get('scope') === 'album' ? 'album' : 'selection';
+  if (session.download === 'none') return refusal(request, 404, 'notAvailable');
+  if (scope === 'album' && session.download !== 'album') {
+    return refusal(request, 404, 'notAvailable');
+  }
+
+  const chosen = new Set(session.selection);
+  const assets =
+    scope === 'album' ? access.assets : access.assets.filter((asset) => chosen.has(asset.id));
+  if (assets.length === 0) return refusal(request, 404, 'notAvailable');
+
+  try {
+    await claimDownload(token, scope);
+  } catch (err) {
+    if (err instanceof ProofError && err.code === 'limit') {
+      return refusal(request, 403, 'limitReached');
+    }
+    if (err instanceof ProofError) return refusal(request, 404, 'notAvailable');
+    throw err;
+  }
+
+  return stream(access.albumName, assets);
+}
diff --git a/app/api/proof/[token]/selection/route.ts b/app/api/proof/[token]/selection/route.ts
new file mode 100644
index 0000000..52e0bc5
--- /dev/null
+++ b/app/api/proof/[token]/selection/route.ts
@@ -0,0 +1,51 @@
+/**
+ * PUT /api/proof/:token/selection — replace a client's saved selection.
+ *
+ * Body: `{ "assets": [<asset token>, …] }`, the album's opaque asset tokens in
+ * any order. Answers 409 once the selection has been submitted, which the page
+ * turns into its locked state.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { decodeSelection, proofError, resolveProofAccess } from '@/lib/proofAccess';
+import { MAX_SELECTION, ProofError, saveSelection } from '@/lib/proofSessions';
+import { readJsonCapped } from '@/lib/requestBody';
+
+export const dynamic = 'force-dynamic';
+
+/** Autosave fires once per burst of hearts; this is generous for one visitor. */
+const SELECTION_RPM = 60;
+
+/** MAX_SELECTION tokens of ~70 characters each, with room to spare. */
+const MAX_BODY_BYTES = 256 * 1024;
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ token: string }> },
+) {
+  const { token } = await params;
+  const access = await resolveProofAccess(request, token, 'proof-save', SELECTION_RPM);
+  if ('error' in access) return access.error;
+
+  const body = (await readJsonCapped(request, MAX_BODY_BYTES)) as { assets?: unknown } | null;
+  const assets = body?.assets;
+  if (!Array.isArray(assets) || assets.length > MAX_SELECTION) {
+    return proofError(400, 'Invalid selection');
+  }
+  const ids = decodeSelection(assets, access.assets);
+  if (!ids) return proofError(400, 'Invalid selection');
+
+  try {
+    const session = await saveSelection(token, ids);
+    return NextResponse.json(
+      { ok: true, selected: session.selection.length },
+      { headers: { 'Cache-Control': 'no-store' } },
+    );
+  } catch (err) {
+    if (err instanceof ProofError && err.code === 'submitted') {
+      return proofError(409, 'Selection already submitted');
+    }
+    if (err instanceof ProofError) return proofError(404, 'Not found');
+    throw err;
+  }
+}
diff --git a/app/api/proof/[token]/submit/route.ts b/app/api/proof/[token]/submit/route.ts
new file mode 100644
index 0000000..35aa129
--- /dev/null
+++ b/app/api/proof/[token]/submit/route.ts
@@ -0,0 +1,44 @@
+/**
+ * POST /api/proof/:token/submit — lock the client's selection and notify the
+ * photographer.
+ *
+ * Idempotent: submitting twice answers 200 both times, and only the first call
+ * fires the webhook.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { proofError, resolveProofAccess } from '@/lib/proofAccess';
+import { ProofError, submitSelection } from '@/lib/proofSessions';
+import { notifySubmitted } from '@/lib/proofWebhook';
+import { getConfig } from '@/lib/config';
+
+export const dynamic = 'force-dynamic';
+
+const SUBMIT_RPM = 10;
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ token: string }> },
+) {
+  const { token } = await params;
+  const access = await resolveProofAccess(request, token, 'proof-submit', SUBMIT_RPM);
+  if ('error' in access) return access.error;
+
+  try {
+    const { session, firstSubmit } = await submitSelection(token);
+    if (firstSubmit) {
+      // Not awaited: a slow or broken webhook must not hold up the client.
+      void notifySubmitted(session, access.albumName, getConfig().siteUrl);
+    }
+    return NextResponse.json(
+      { ok: true, submittedAt: session.submittedAt },
+      { headers: { 'Cache-Control': 'no-store' } },
+    );
+  } catch (err) {
+    if (err instanceof ProofError && err.code === 'empty') {
+      return proofError(400, 'Nothing selected');
+    }
+    if (err instanceof ProofError) return proofError(404, 'Not found');
+    throw err;
+  }
+}
diff --git a/app/api/proof/__tests__/routes.test.ts b/app/api/proof/__tests__/routes.test.ts
new file mode 100644
index 0000000..80a4372
--- /dev/null
+++ b/app/api/proof/__tests__/routes.test.ts
@@ -0,0 +1,197 @@
+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 { NextRequest } from 'next/server';
+
+/**
+ * The public proofing routes against a real session store in a temp dir. Immich,
+ * the asset tokens, the ZIP stream and the webhook are mocked; what is under
+ * test is the authorisation: which token may change what, and when.
+ */
+
+vi.mock('@/lib/config', () => ({
+  getConfig: vi.fn(() => ({ siteUrl: null })),
+  getConfigOrNull: vi.fn(() => null),
+}));
+vi.mock('@/lib/tokens', () => ({
+  decodeAssetId: vi.fn((token: string) => (token.startsWith('tok-') ? token.slice(4) : null)),
+}));
+vi.mock('@/lib/immich', () => ({
+  immich: { getProofingAlbum: vi.fn() },
+  ImmichUnavailableError: class ImmichUnavailableError extends Error {},
+}));
+vi.mock('@/lib/rate-limit', () => ({
+  checkRateLimit: vi.fn(() => ({ success: true, resetAt: 0 })),
+  getClientIp: vi.fn(() => '127.0.0.1'),
+  retryAfterSeconds: vi.fn(() => 60),
+}));
+vi.mock('@/lib/auth', () => ({ siteLockResponse: vi.fn(() => null) }));
+vi.mock('@/lib/proofWebhook', () => ({ notifySubmitted: vi.fn(async () => {}) }));
+vi.mock('@/lib/zipArchive', () => ({
+  withArchiveSlot: vi.fn(
+    (
+      _req: unknown,
+      handler: (stream: (name: string, assets: { id: string }[]) => Response) => unknown,
+    ) => handler((name, assets) => Response.json({ name, ids: assets.map((a) => a.id) })),
+  ),
+  refusal: vi.fn((_req: unknown, status: number, reason: string) =>
+    Response.json({ reason }, { status }),
+  ),
+}));
+
+import { PUT } from '../[token]/selection/route';
+import { POST } from '../[token]/submit/route';
+import { GET } from '../[token]/archive/route';
+import { immich } from '@/lib/immich';
+import { notifySubmitted } from '@/lib/proofWebhook';
+import { siteLockResponse } from '@/lib/auth';
+import { createSession, getSessionById, sessionInputSchema } from '@/lib/proofSessions';
+
+const mockAlbum = immich.getProofingAlbum as unknown as ReturnType<typeof vi.fn>;
+const mockNotify = notifySubmitted as unknown as ReturnType<typeof vi.fn>;
+const mockLock = siteLockResponse as unknown as ReturnType<typeof vi.fn>;
+
+const ALBUM_ID = '11111111-1111-1111-1111-111111111111';
+const ALBUM = {
+  id: ALBUM_ID,
+  albumName: 'Wedding',
+  assets: [
+    { id: 'a1', type: 'IMAGE', originalFileName: 'a1.jpg' },
+    { id: 'a2', type: 'IMAGE', originalFileName: 'a2.jpg' },
+    { id: 'a3', type: 'VIDEO', originalFileName: 'a3.mp4' },
+  ],
+};
+
+let dir: string;
+
+beforeEach(() => {
+  dir = fs.mkdtempSync(path.join(os.tmpdir(), 'folio-proof-routes-'));
+  vi.spyOn(process, 'cwd').mockReturnValue(dir);
+  mockAlbum.mockResolvedValue(structuredClone(ALBUM));
+  mockNotify.mockClear();
+  mockLock.mockReturnValue(null);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  fs.rmSync(dir, { recursive: true, force: true });
+});
+
+async function session(overrides: Record<string, unknown> = {}) {
+  return createSession(
+    sessionInputSchema.parse({ clientName: 'Anna', albumId: ALBUM_ID, ...overrides }),
+  );
+}
+
+const ctx = (token: string) => ({ params: Promise.resolve({ token }) });
+
+function put(token: string, assets: unknown) {
+  return PUT(
+    new NextRequest(`https://folio.example/api/proof/${token}/selection`, {
+      method: 'PUT',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ assets }),
+    }),
+    ctx(token),
+  );
+}
+
+const submit = (token: string) =>
+  POST(
+    new NextRequest(`https://folio.example/api/proof/${token}/submit`, { method: 'POST' }),
+    ctx(token),
+  );
+
+const archive = (token: string, scope = 'selection') =>
+  GET(
+    new NextRequest(`https://folio.example/api/proof/${token}/archive?scope=${scope}`),
+    ctx(token),
+  );
+
+describe('PUT selection', () => {
+  it('saves the selection in album order', async () => {
+    const s = await session();
+    const res = await put(s.token, ['tok-a3', 'tok-a1']);
+    expect(res.status).toBe(200);
+    expect((await getSessionById(s.id))?.selection).toEqual(['a1', 'a3']);
+    // The album comes from the session, not from the request.
+    expect(mockAlbum).toHaveBeenCalledWith(ALBUM_ID);
+  });
+
+  it('refuses an asset from another album', async () => {
+    const s = await session();
+    expect((await put(s.token, ['tok-a1', 'tok-elsewhere'])).status).toBe(400);
+    expect((await put(s.token, ['garbage'])).status).toBe(400);
+    expect((await put(s.token, 'tok-a1')).status).toBe(400);
+    expect((await getSessionById(s.id))?.selection).toEqual([]);
+  });
+
+  it('answers 404 for an unknown or expired link', async () => {
+    expect((await put('x'.repeat(32), ['tok-a1'])).status).toBe(404);
+    const expired = await session({ expiresOn: '2000-01-01' });
+    expect((await put(expired.token, ['tok-a1'])).status).toBe(404);
+  });
+
+  it('answers 409 once submitted', async () => {
+    const s = await session();
+    await put(s.token, ['tok-a1']);
+    await submit(s.token);
+    expect((await put(s.token, ['tok-a2'])).status).toBe(409);
+  });
+
+  it('keeps the site password in charge', async () => {
+    const s = await session();
+    mockLock.mockReturnValue(Response.json({ error: 'locked' }, { status: 401 }));
+    expect((await put(s.token, ['tok-a1'])).status).toBe(401);
+  });
+});
+
+describe('POST submit', () => {
+  it('refuses an empty selection', async () => {
+    const s = await session();
+    expect((await submit(s.token)).status).toBe(400);
+    expect(mockNotify).not.toHaveBeenCalled();
+  });
+
+  it('locks the selection and notifies once', async () => {
+    const s = await session();
+    await put(s.token, ['tok-a2']);
+    expect((await submit(s.token)).status).toBe(200);
+    expect((await submit(s.token)).status).toBe(200);
+    expect(mockNotify).toHaveBeenCalledTimes(1);
+    expect((await getSessionById(s.id))?.submittedAt).toBeTruthy();
+  });
+});
+
+describe('GET archive', () => {
+  it('refuses when the link offers no downloads', async () => {
+    const s = await session();
+    await put(s.token, ['tok-a1']);
+    expect((await archive(s.token)).status).toBe(404);
+  });
+
+  it('streams only the saved selection', async () => {
+    const s = await session({ download: 'selection' });
+    await put(s.token, ['tok-a2']);
+    const res = await archive(s.token);
+    expect(await res.json()).toEqual({ name: 'Wedding', ids: ['a2'] });
+  });
+
+  it('allows the whole album only when the link says so', async () => {
+    const selectionOnly = await session({ download: 'selection' });
+    expect((await archive(selectionOnly.token, 'album')).status).toBe(404);
+
+    const whole = await session({ download: 'album' });
+    const res = await archive(whole.token, 'album');
+    expect((await res.json()).ids).toEqual(['a1', 'a2', 'a3']);
+  });
+
+  it('stops at the download limit', async () => {
+    const s = await session({ download: 'album', downloadLimit: 1 });
+    expect((await archive(s.token, 'album')).status).toBe(200);
+    const refused = await archive(s.token, 'album');
+    expect(refused.status).toBe(403);
+    expect(await refused.json()).toEqual({ reason: 'limitReached' });
+  });
+});
diff --git a/app/api/video/[id]/route.ts b/app/api/video/[id]/route.ts
index b9771c4..9bf8180 100644
--- a/app/api/video/[id]/route.ts
+++ b/app/api/video/[id]/route.ts
@@ -11,6 +11,8 @@
 
 import { NextRequest, NextResponse } from 'next/server';
 import { immich, ImmichUnavailableError } from '@/lib/immich';
+import { isPublishedAsset } from '@/lib/publishedAssets';
+import { isAdminAuthenticated } from '@/lib/admin/auth';
 import { decodeAssetId } from '@/lib/tokens';
 import { getConfig } from '@/lib/config';
 import { checkRateLimit, getClientIp, retryAfterSeconds } from '@/lib/rate-limit';
@@ -47,6 +49,16 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
     return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
   }
 
+  // Only what the site currently shows (GHSA-gfh4-6275-9gqv): a token stays
+  // decodable forever, so an unpublished album or a revoked proofing link
+  // would otherwise keep serving. Signed-in admins pass for previews.
+  if (!(await isPublishedAsset(assetId)) && !(await isAdminAuthenticated())) {
+    return NextResponse.json(
+      { error: 'Not found' },
+      { status: 404, headers: { 'Cache-Control': 'no-store' } },
+    );
+  }
+
   // Forward Range header from browser (needed for <video> seeking)
   const rangeHeader = request.headers.get('range');
 
diff --git a/app/api/webhook/__tests__/route.test.ts b/app/api/webhook/__tests__/route.test.ts
new file mode 100644
index 0000000..f3942f8
--- /dev/null
+++ b/app/api/webhook/__tests__/route.test.ts
@@ -0,0 +1,152 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { NextRequest } from 'next/server';
+import { createHmac } from 'crypto';
+
+/**
+ * The webhook is reachable by anyone, and the body has to be read before its
+ * HMAC can be checked. The read is therefore capped: a declared length over
+ * the cap is refused without touching the stream, and a body that turns out
+ * longer than declared (or declares nothing, as a chunked one does) is cut off
+ * at the cap. The signature must be exactly the hex digest of the raw bytes.
+ */
+
+const SECRET = 'test-webhook-secret';
+
+const env = vi.hoisted(() => ({ WEBHOOK_SECRET: '' as string | undefined }));
+vi.mock('@/lib/env', () => ({ env }));
+vi.mock('@/lib/immich', () => ({
+  immich: { invalidateAlbum: vi.fn(), invalidateAll: vi.fn() },
+}));
+vi.mock('@/lib/rate-limit', () => ({
+  checkRateLimit: vi.fn(() => ({ success: true, resetAt: 0 })),
+  getClientIp: vi.fn(() => '127.0.0.1'),
+}));
+
+import { POST } from '../route';
+import { immich } from '@/lib/immich';
+
+const URL = 'http://localhost/api/webhook';
+const CAP = 64 * 1024;
+
+function sign(body: string | Uint8Array): string {
+  return createHmac('sha256', SECRET).update(body).digest('hex');
+}
+
+function post(body: string, headers: Record<string, string> = {}): NextRequest {
+  return new NextRequest(URL, {
+    method: 'POST',
+    body,
+    headers: { 'content-type': 'application/json', ...headers },
+  });
+}
+
+/**
+ * A request whose body is a lazily produced stream of `chunks` chunks of
+ * `size` bytes each. `pulls()` reports how many chunks the route asked for.
+ */
+function streamed(chunks: number, size: number, headers: Record<string, string> = {}) {
+  let pulled = 0;
+  const chunk = new Uint8Array(size).fill(0x20); // spaces: valid JSON whitespace
+  const body = new ReadableStream<Uint8Array>({
+    pull(controller) {
+      if (pulled >= chunks) {
+        controller.close();
+        return;
+      }
+      pulled++;
+      controller.enqueue(chunk);
+    },
+  });
+  const request = new NextRequest(URL, {
+    method: 'POST',
+    body,
+    headers,
+    duplex: 'half', // undici requires it for a stream body
+  });
+  return { request, pulls: () => pulled };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  env.WEBHOOK_SECRET = SECRET;
+});
+
+describe('POST /api/webhook', () => {
+  it('answers 501 when WEBHOOK_SECRET is unset, before looking at the size', async () => {
+    env.WEBHOOK_SECRET = undefined;
+    const { request } = streamed(1, 16, { 'content-length': String(CAP * 10) });
+    const res = await POST(request);
+    expect(res.status).toBe(501);
+    expect(request.bodyUsed).toBe(false);
+  });
+
+  it('refuses an oversized Content-Length with 413 without reading the body', async () => {
+    const { request } = streamed(1, 16, {
+      'content-length': String(CAP + 1),
+      'x-immich-signature': 'a'.repeat(64),
+    });
+    const res = await POST(request);
+    expect(res.status).toBe(413);
+    expect(request.bodyUsed).toBe(false);
+  });
+
+  it('cuts off a chunked body over the cap, even with a valid signature', async () => {
+    // 100 chunks of 1 KiB = 100 KiB; the whole body is signed correctly, so
+    // only the size cap can turn it away.
+    const size = 1024;
+    const chunks = 100;
+    const full = ' '.repeat(size * chunks);
+    const { request, pulls } = streamed(chunks, size, { 'x-immich-signature': sign(full) });
+    expect(request.headers.get('content-length')).toBeNull();
+
+    const res = await POST(request);
+    expect(res.status).toBe(413);
+    expect(pulls()).toBeLessThan(chunks);
+    expect(immich.invalidateAll).not.toHaveBeenCalled();
+  });
+
+  it('accepts a correctly signed payload under the cap', async () => {
+    const body = JSON.stringify({ event: 'album.updated', albumId: 'album-1' });
+    const res = await POST(post(body, { 'x-immich-signature': sign(body) }));
+    expect(res.status).toBe(200);
+    expect(await res.json()).toEqual({ ok: true, invalidated: 'album-1' });
+    expect(immich.invalidateAlbum).toHaveBeenCalledWith('album-1');
+  });
+
+  it('verifies the signature over the raw bytes, byte-order mark included', async () => {
+    const json = JSON.stringify({ event: 'album.updated', albumId: 'album-1' });
+    const raw = Buffer.concat([Buffer.from([0xef, 0xbb, 0xbf]), Buffer.from(json)]);
+    const res = await POST(
+      new NextRequest(URL, {
+        method: 'POST',
+        body: raw,
+        headers: { 'x-immich-signature': sign(raw) },
+      }),
+    );
+    expect(res.status).toBe(200);
+  });
+
+  it('answers 401 for a wrong signature', async () => {
+    const body = JSON.stringify({ event: 'album.updated', albumId: 'album-1' });
+    const res = await POST(post(body, { 'x-immich-signature': sign('something else') }));
+    expect(res.status).toBe(401);
+    expect(immich.invalidateAlbum).not.toHaveBeenCalled();
+  });
+
+  it('answers 401 for a missing signature', async () => {
+    const res = await POST(post('{"event":"x"}'));
+    expect(res.status).toBe(401);
+  });
+
+  it.each([
+    ['trailing non-hex characters', (sig: string) => `${sig}zz`],
+    ['a trailing odd nibble', (sig: string) => `${sig}0`],
+    ['an over-long digest', (sig: string) => sig.repeat(4)],
+    ['non-hex characters', () => 'z'.repeat(64)],
+  ])('answers 401 for a signature with %s', async (_label, mangle) => {
+    const body = JSON.stringify({ event: 'album.updated', albumId: 'album-1' });
+    const res = await POST(post(body, { 'x-immich-signature': mangle(sign(body)) }));
+    expect(res.status).toBe(401);
+    expect(immich.invalidateAlbum).not.toHaveBeenCalled();
+  });
+});
diff --git a/app/api/webhook/route.ts b/app/api/webhook/route.ts
index 8162061..16a2408 100644
--- a/app/api/webhook/route.ts
+++ b/app/api/webhook/route.ts
@@ -7,7 +7,8 @@
  *
  *   HMAC-SHA256(WEBHOOK_SECRET, raw request body)
  *
- * If WEBHOOK_SECRET is not set, the endpoint returns 501.
+ * If WEBHOOK_SECRET is not set, the endpoint returns 501. Bodies over
+ * MAX_BODY_BYTES are refused with 413 before the signature is checked.
  *
  * Supported Immich event types:
  *   - album.updated      → invalidates the specific album
@@ -23,10 +24,23 @@ import { createHmac, timingSafeEqual } from 'crypto';
 import { immich } from '@/lib/immich';
 import { env } from '@/lib/env';
 import { checkRateLimit, getClientIp } from '@/lib/rate-limit';
+import { readBytesCapped } from '@/lib/requestBody';
 
 // Tight rate limit — webhooks should come from one trusted source only
 const WEBHOOK_RPM = 60;
 
+/**
+ * Largest body the route reads before the signature is checked. The payload
+ * is a small JSON object (`{ "event": "album.updated", "albumId": "<uuid>" }`,
+ * well under 1 KiB), so 64 KiB leaves ample headroom for extra fields while
+ * keeping an unauthenticated sender from making the server buffer and hash
+ * an arbitrarily large body.
+ */
+const MAX_BODY_BYTES = 64 * 1024;
+
+/** An HMAC-SHA256 hex digest: exactly 64 hex characters. */
+const SIGNATURE_PATTERN = /^[0-9a-f]{64}$/i;
+
 /** Album-scoped Immich webhook events. */
 const ALBUM_EVENTS = new Set(['album.updated', 'album.assetAdded', 'album.assetRemoved']);
 
@@ -46,13 +60,24 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: 'Too many requests' }, { status: 429 });
   }
 
+  // ── Body size ──────────────────────────────────────
+  // The declared length is refused before a byte is read; the capped reader
+  // covers a missing or understated Content-Length and chunked bodies.
+  const declared = Number(request.headers.get('content-length') ?? '');
+  if (Number.isFinite(declared) && declared > MAX_BODY_BYTES) {
+    return NextResponse.json({ error: 'Payload too large' }, { status: 413 });
+  }
+
   // ── Read body (needed for HMAC verification) ───────
-  let rawBody: string;
+  let rawBody: Buffer | null;
   try {
-    rawBody = await request.text();
+    rawBody = await readBytesCapped(request, MAX_BODY_BYTES);
   } catch {
     return NextResponse.json({ error: 'Failed to read request body' }, { status: 400 });
   }
+  if (rawBody === null) {
+    return NextResponse.json({ error: 'Payload too large' }, { status: 413 });
+  }
 
   // ── Signature verification ─────────────────────────
   const signature = request.headers.get('x-immich-signature');
@@ -63,13 +88,11 @@ export async function POST(request: NextRequest) {
 
   const expected = createHmac('sha256', env.WEBHOOK_SECRET).update(rawBody).digest('hex');
 
-  let signatureValid = false;
-  try {
-    signatureValid = timingSafeEqual(Buffer.from(signature, 'hex'), Buffer.from(expected, 'hex'));
-  } catch {
-    // Buffer lengths differ → invalid hex or wrong length
-    signatureValid = false;
-  }
+  // Anything but a 64-character hex digest is refused before decoding, so a
+  // malformed or over-long header gets the same answer as a wrong one.
+  const signatureValid =
+    SIGNATURE_PATTERN.test(signature) &&
+    timingSafeEqual(Buffer.from(signature, 'hex'), Buffer.from(expected, 'hex'));
 
   if (!signatureValid) {
     console.warn(`[Webhook] ⚠️ Invalid signature from ${ip}`);
@@ -79,7 +102,7 @@ export async function POST(request: NextRequest) {
   // ── Parse payload ──────────────────────────────────
   let payload: { event?: string; albumId?: string } = {};
   try {
-    payload = JSON.parse(rawBody);
+    payload = JSON.parse(new TextDecoder().decode(rawBody));
   } catch {
     return NextResponse.json({ error: 'Invalid JSON payload' }, { status: 400 });
   }
diff --git a/app/contact/contact.css b/app/contact/contact.css
index 054cb85..bb4da5c 100644
--- a/app/contact/contact.css
+++ b/app/contact/contact.css
@@ -94,7 +94,9 @@ textarea.contact-form__input {
   cursor: wait;
 }
 .contact-form__error {
-  color: #e74c3c;
+  /* Per-mode token; the fixed red it replaces measured 3.5–3.8:1 on the
+     light presets. */
+  color: var(--error);
   font-size: 0.9rem;
 }
 .contact-form__done {
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 61b5740..c5f3882 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -19,6 +19,16 @@ export function generateMetadata(): Metadata {
 
 export const dynamic = 'force-dynamic';
 
+/**
+ * The server's clock for the form's fill-time stamp. The check on submission
+ * runs on this clock, so the start has to as well (see ContactForm). A server
+ * component renders once per request, which is why reading the clock here is
+ * not the re-render hazard `react-hooks/purity` looks for.
+ */
+function serverNow(): number {
+  return Date.now();
+}
+
 export default function ContactPage() {
   const { contact } = getConfig();
   const t = getServerDictionary();
@@ -35,9 +45,9 @@ export default function ContactPage() {
         <p className="contact-page__subtitle">{t.contact.subtitle}</p>
       </header>
 
-      <main className="contact-page__content">
-        <ContactForm retentionDays={contact.retentionDays} />
-      </main>
+      <div className="contact-page__content">
+        <ContactForm retentionDays={contact.retentionDays} renderedAt={serverNow()} />
+      </div>
     </div>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index f4c8612..d5a2b92 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -104,18 +104,31 @@
   border-bottom-color: var(--text-primary);
 }
 
-/* The links (Home, subpages, standalone albums, About, Map) live inside
-   MobileNav's wrapper, but `display: contents` erases the wrapper's own box
-   above the mobile breakpoint — the links become direct flex items of
-   `.header__nav`, so desktop keeps the exact layout it always had. */
-.header__nav-links {
-  display: contents;
-}
+/* ── Header menu (MobileNav) ──────────────────────────
+   The links (Home, subpages, standalone albums, About, Map) live inside
+   MobileNav's wrapper. The menu — a button plus a dropdown panel — is the
+   default here, and the inline row is the exception further down: above the
+   phone breakpoint, and only while MobileNav has not marked the links
+   `data-collapsed` because they do not fit (#590).
 
-/* Hidden above the mobile breakpoint — MobileNav renders it unconditionally,
-   but only the CSS decides when it is reachable, same as `.header__wordmark`. */
+   The header used to rely on the breakpoint alone and scroll sideways with a
+   hidden scrollbar between 641px and whatever width the links needed, which
+   put About, Map and the theme toggle off-screen on every tablet. How many
+   links fit depends on the site's own subpages, so the width is measured
+   instead of guessed. */
 .header__menu-btn {
-  display: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 44px touch target (20px icon + 12px padding); the negative margins
+     keep the header's height and spacing as before (#696). */
+  margin: -4px -4px -4px auto;
+  align-self: center;
+  padding: 12px;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
 }
 
 .header__menu-btn svg {
@@ -124,6 +137,68 @@
   display: block;
 }
 
+.header__nav-links {
+  display: none;
+}
+
+/* `.header` is the nearest positioned ancestor (it's `position: fixed`),
+   so `top: 100%` sits the panel right under it regardless of the actual
+   header height, which differs by preset (plain padding vs. studio-modern's
+   fixed `--header-height`). `left: 50%` + `width: 100vw` + negative margin
+   breaks the panel out to the full viewport width regardless of `.header`'s
+   own horizontal padding, which also differs by preset (`--sm-gutter` for
+   studio-modern vs. a fixed 24px elsewhere). */
+.header__nav-links[data-open='true'] {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 100vw;
+  margin-left: -50vw;
+  max-height: calc(100vh - 64px);
+  overflow-y: auto;
+  background: rgba(26, 26, 26, 0.98);
+  border-bottom: 1px solid var(--border-subtle);
+  z-index: 101;
+}
+
+[data-theme='light'] .header__nav-links[data-open='true'] {
+  background: rgba(245, 245, 240, 0.98);
+}
+
+.header__nav-links[data-open='true'] .header__nav-link,
+.header__nav-links[data-open='true'] .header__nav-link--external {
+  width: 100%;
+  padding: 16px 24px;
+  font-size: 0.75rem;
+}
+
+/* Covers the full viewport, including the area behind the header — the
+   header's own `z-index: 100` keeps it crisp above the dim, so this does
+   not need to know the header's height either. */
+.header__nav-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 99;
+}
+
+/* The inline row. `display: contents` erases the wrapper's own box, so the
+   links become direct flex items of `.header__nav` and desktop keeps the
+   exact layout it always had. The breakpoint is the CSS half — it holds
+   before hydration, so a phone never paints the row first — and it has to
+   match PHONE_QUERY in MobileNav. */
+@media (min-width: 641px) {
+  .header__menu-btn:not([data-collapsed='true']) {
+    display: none;
+  }
+
+  .header__nav-links:not([data-collapsed='true']) {
+    display: contents;
+  }
+}
+
 /* ── Main Content ─────────────────────────────────── */
 .main {
   max-width: var(--max-width);
@@ -153,6 +228,27 @@
   }
 }
 
+/* Reduced motion, site-wide — visitor pages, admin and /install alike (#696).
+ *
+ * Durations collapse to near zero instead of `none`, so every animation and
+ * transition still lands on its end state (a drawer still opens, a toast still
+ * shows) and animationend/transitionend still fire for code that waits on
+ * them. Looping animations — the skeleton shimmer, spinners — run once and
+ * stop; the element itself stays visible. !important is needed to win over
+ * component styles and inline `style` animations (MapView's spinner). */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    animation-delay: 0ms !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* Homepage hero + About page use full bleed — override main padding */
 .main:has(.hero),
 .main:has(.about) {
@@ -257,6 +353,39 @@
   opacity: 1;
 }
 
+/* Pause/play for the crossfade (WCAG 2.2.2). Sits over the photo, so it
+   takes the theme's background at partial opacity rather than a fixed
+   black; the 44px box is the touch target. */
+.hero__carousel-toggle {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid var(--border-subtle);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
+  color: var(--text-primary);
+  cursor: pointer;
+  opacity: 0.75;
+  transition: opacity var(--transition-fast);
+}
+
+.hero__carousel-toggle:hover,
+.hero__carousel-toggle:focus-visible {
+  opacity: 1;
+}
+
+.hero__carousel-toggle svg {
+  width: 16px;
+  height: 16px;
+}
+
 /* Camera chip over the hero image — opt-in per preset. */
 .hero__exif-chip {
   display: none;
@@ -372,7 +501,10 @@
 
 .hero--fullbleed .hero__title {
   color: #fff;
-  font-size: 4rem;
+  /* Scales down on a phone instead of running off the edge; 4rem was cut off
+     at 390px in minimal and noir, whose single long words cannot wrap. */
+  font-size: clamp(2.25rem, 9vw, 4rem);
+  overflow-wrap: break-word;
   text-shadow:
     0 2px 8px rgba(0, 0, 0, 0.7),
     0 8px 48px rgba(0, 0, 0, 0.6);
@@ -1115,11 +1247,19 @@
   }
 }
 
+.album-header__main {
+  /* A flex child defaults to min-width: auto, so one long word in the title
+     would widen the header past the viewport on phones. */
+  min-width: 0;
+}
+
 .album-header__title {
   font-family: var(--font-serif);
   font-size: 2.5rem;
   font-weight: 400;
   letter-spacing: 0.02em;
+  hyphens: auto;
+  overflow-wrap: anywhere;
 }
 
 .album-header__description {
@@ -1131,6 +1271,31 @@
   max-width: 640px;
 }
 
+/* Client proofing link (/proof/<token>): greeting and notes under the title. */
+.proof-session-intro {
+  margin-top: 16px;
+  max-width: 640px;
+}
+
+.proof-session-intro__greeting {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.proof-session-intro__text {
+  margin-top: 6px;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.proof-session-intro__meta {
+  margin-top: 6px;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
 .album-header__meta {
   margin-top: 8px;
   font-size: 0.9rem;
@@ -1372,6 +1537,24 @@
   opacity: 1;
 }
 
+/* Hover-only overlays leave keyboard and touch visitors out (#696). A tile
+   with keyboard focus shows its overlay like a hovered one, and on devices
+   without hover — phones, and tablets wider than the 640px mobile rules — the
+   overlays are simply always shown. */
+.photo-grid__item:is(:focus-visible, :has(:focus-visible)) .photo-grid__item-exif,
+.subpage-grid__item:is(:focus-visible, :has(:focus-visible)) .subpage-grid__item-overlay,
+.album-card:is(:focus-visible, :has(:focus-visible)) .album-card__overlay {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .photo-grid__item .photo-grid__item-exif,
+  .subpage-grid__item .subpage-grid__item-overlay,
+  .album-card .album-card__overlay {
+    opacity: 1;
+  }
+}
+
 .photo-grid__item-play {
   position: absolute;
   inset: 0;
@@ -1452,8 +1635,9 @@
   bottom: 32px;
   right: 32px;
   z-index: 90;
-  width: 40px;
-  height: 40px;
+  /* 44px: the minimum touch target, same as the proofing hearts (#696). */
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
   border: 1px solid var(--border-subtle);
   background: var(--bg-card);
@@ -1511,14 +1695,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px;
+  /* 44px touch target (16px icon + 14px padding). The negative block
+     margins keep the header from growing; no negative inline margin, which
+     pushed the button past the viewport edge on phones (#696). */
+  padding: 14px;
+  margin: -6px 0 -6px auto;
   background: none;
   border: none;
   color: var(--text-secondary);
   cursor: pointer;
   border-radius: var(--radius-sm);
   transition: color var(--transition-fast);
-  margin-left: auto;
 }
 
 .theme-toggle:hover {
@@ -1543,8 +1730,14 @@
 
 .footer__left {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 20px;
+  gap: 12px 20px;
+  /* Without wrapping, the name and three legal links in uppercase tracking
+     ran to about 440px on a phone and widened the page itself: the layout
+     viewport grew with it, and the fixed lightbox and menu panel grew along,
+     cutting off the close button and the next arrow. */
+  min-width: 0;
 }
 
 .footer__name {
@@ -1935,69 +2128,10 @@
     grid-template-columns: 1fr;
   }
 
+  /* The header is about 37px tall here (the 44px menu button with its
+     negative margins); 32px left the album back link partly under it. */
   .main {
-    padding: 32px 20px 80px;
-  }
-
-  /* A proper menu replaces the horizontal scroll below this width — see
-     `.header__nav-links` / `.header__menu-btn` above and MobileNav (#590). */
-  .header__menu-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: auto;
-    padding: 8px;
-    background: none;
-    border: none;
-    color: var(--text-secondary);
-    cursor: pointer;
-  }
-
-  .header__nav-links {
-    display: none;
-  }
-
-  /* `.header` is the nearest positioned ancestor (it's `position: fixed`),
-     so `top: 100%` sits the panel right under it regardless of the actual
-     header height, which differs by preset (plain padding vs. studio-modern's
-     fixed `--header-height`). `left: 50%` + `width: 100vw` + negative margin
-     breaks the panel out to the full viewport width regardless of `.header`'s
-     own horizontal padding, which also differs by preset (`--sm-gutter` for
-     studio-modern vs. a fixed 24px elsewhere). */
-  .header__nav-links[data-open='true'] {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    width: 100vw;
-    margin-left: -50vw;
-    max-height: calc(100vh - 64px);
-    overflow-y: auto;
-    background: rgba(26, 26, 26, 0.98);
-    border-bottom: 1px solid var(--border-subtle);
-    z-index: 101;
-  }
-
-  [data-theme='light'] .header__nav-links[data-open='true'] {
-    background: rgba(245, 245, 240, 0.98);
-  }
-
-  .header__nav-links[data-open='true'] .header__nav-link,
-  .header__nav-links[data-open='true'] .header__nav-link--external {
-    width: 100%;
-    padding: 16px 24px;
-    font-size: 0.75rem;
-  }
-
-  /* Covers the full viewport, including the area behind the header — the
-     header's own `z-index: 100` keeps it crisp above the dim, so this does
-     not need to know the header's height either. */
-  .header__nav-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 99;
+    padding: 56px 20px 80px;
   }
 
   .header__nav-link {
diff --git a/app/install/InstallWizard.tsx b/app/install/InstallWizard.tsx
index 8b079d4..cce8421 100644
--- a/app/install/InstallWizard.tsx
+++ b/app/install/InstallWizard.tsx
@@ -147,7 +147,10 @@ export function InstallWizard({ initialApiUrl, setupToken }: Props) {
   if (done) {
     return (
       <div className="admin-layout">
-        <div className="install-page">
+        <a href="#install-main" className="skip-link">
+          Skip to content
+        </a>
+        <main id="install-main" tabIndex={-1} className="install-page">
           <div className="install-card">
             <div className="install-card__header">
               <span className="install-card__kicker">Immich Folio</span>
@@ -176,14 +179,17 @@ export function InstallWizard({ initialApiUrl, setupToken }: Props) {
               </div>
             </div>
           </div>
-        </div>
+        </main>
       </div>
     );
   }
 
   return (
     <div className="admin-layout">
-      <div className="install-page">
+      <a href="#install-main" className="skip-link">
+        Skip to content
+      </a>
+      <main id="install-main" tabIndex={-1} className="install-page">
         <div className="install-card">
           <div className="install-card__header">
             <span className="install-card__kicker">Immich Folio</span>
@@ -470,7 +476,7 @@ export function InstallWizard({ initialApiUrl, setupToken }: Props) {
             )}
           </div>
         </div>
-      </div>
+      </main>
     </div>
   );
 }
diff --git a/app/journal/[slug]/page.tsx b/app/journal/[slug]/page.tsx
index 4f71f0c..dd8a7b9 100644
--- a/app/journal/[slug]/page.tsx
+++ b/app/journal/[slug]/page.tsx
@@ -1,35 +1,16 @@
 import { notFound } from 'next/navigation';
 import { cookies } from 'next/headers';
 import type { Metadata } from 'next';
-import { readJournalEntry, listJournalEntries } from '@/lib/admin/journal-service';
-import {
-  collectAssetIds,
-  mapBlockAssetIds,
-  type JournalBlock,
-  type MapPin,
-  type ParsedJournal,
-} from '@/lib/journal';
-import { entryMapPins } from '@/lib/journalMap';
-import { expandAlbumBlocks } from '@/lib/journalAlbum';
+import { readJournalEntryForRequest, listJournalEntriesForRequest } from '@/lib/journal.server';
+import type { ParsedJournal } from '@/lib/journal';
+import { buildEssayPayload } from '@/app/[...path]/essayPayload';
 import { isAdminAuthenticated } from '@/lib/admin/auth';
 import { isAuthenticated } from '@/lib/auth';
 import { journalNeighbours } from '@/lib/journalNav';
 import { getConfig } from '@/lib/config';
-import { immich } from '@/lib/immich';
-import {
-  imageUrl,
-  videoUrl,
-  exifUrl,
-  assetPlaceholder,
-  assetAspectRatio,
-  assetCaption,
-  assetExifSummary,
-} from '@/lib/urls';
-import { encodeAssetId } from '@/lib/tokens';
+import { imageUrl } from '@/lib/urls';
 import { EssayView } from '@/app/[...path]/EssayView';
 import { JournalNav } from '@/components/JournalNav';
-import type { PhotoItem } from '@/app/[...path]/PhotoGrid';
-import type { ImmichAsset } from '@/lib/immich';
 import PasswordGate from '@/components/PasswordGate';
 import { BackLink } from '@/components/BackLink';
 import { getServerDictionary } from '@/lib/i18n/server';
@@ -43,9 +24,12 @@ interface JournalDetailPageProps {
 
 export async function generateMetadata({ params }: JournalDetailPageProps): Promise<Metadata> {
   const { slug } = await params;
-  const entry = await readJournalEntry(slug);
+  const entry = await readJournalEntryForRequest(slug);
   const t = getServerDictionary();
-  if (!entry) return { title: t.journal.notFound };
+  // Nothing to describe: the requested slug is not echoed, and `robots: null`
+  // drops the layout's `index, follow`, which would contradict the noindex
+  // Next adds to the 404 below.
+  if (!entry) return { title: t.journal.notFound, robots: null };
 
   const { frontmatter } = entry.parsed;
 
@@ -54,14 +38,15 @@ export async function generateMetadata({ params }: JournalDetailPageProps): Prom
   // entry's real title, subtitle and cover image reached the <head> of a
   // 200 response no authentication was ever asked for (GHSA-fvgv-97g3-wjr7).
   const isAuthedAdmin = await isAdminAuthenticated();
+  // A draft is a 404 for everyone but an admin; describe it as one.
+  if (frontmatter.draft && !isAuthedAdmin) return { title: t.journal.notFound, robots: null };
   const blocked =
-    (frontmatter.draft && !isAuthedAdmin) ||
-    (!!frontmatter.password &&
-      !isJournalAuthenticated(
-        slug,
-        frontmatter.password,
-        (await cookies()).get(`lb_auth_journal_${slug}`)?.value,
-      ));
+    !!frontmatter.password &&
+    !isJournalAuthenticated(
+      slug,
+      frontmatter.password,
+      (await cookies()).get(`lb_auth_journal_${slug}`)?.value,
+    );
 
   const title = blocked ? t.journal.title : frontmatter.title || slug;
   const description = blocked
@@ -117,13 +102,13 @@ function isJournalAuthenticated(
 
 export default async function JournalDetailPage({ params }: JournalDetailPageProps) {
   const { slug } = await params;
-  const entry = await readJournalEntry(slug);
+  const entry = await readJournalEntryForRequest(slug);
 
   if (!entry) {
     notFound();
   }
 
-  const { frontmatter, blocks: authoredBlocks, referencedAssetIds } = entry.parsed;
+  const { frontmatter, blocks: authoredBlocks } = entry.parsed;
   const isAuthedAdmin = await isAdminAuthenticated();
 
   // If draft, only visible to authenticated admin
@@ -137,7 +122,12 @@ export default async function JournalDetailPage({ params }: JournalDetailPagePro
     const cookieVal = cookieStore.get(`lb_auth_journal_${slug}`)?.value;
 
     if (!isJournalAuthenticated(slug, frontmatter.password, cookieVal)) {
-      return <PasswordGate slug={slug} title={frontmatter.title || slug} type="journal" />;
+      // The generic journal title, like generateMetadata above: the index and
+      // the prev/next links hide a locked entry by name, so its gate must not
+      // print that name either (GHSA-fvgv-97g3-wjr7).
+      return (
+        <PasswordGate slug={slug} title={getServerDictionary().journal.title} type="journal" />
+      );
     }
   }
 
@@ -148,7 +138,7 @@ export default async function JournalDetailPage({ params }: JournalDetailPagePro
   // here even by name, the same rule the index and this entry's own gate
   // already enforce (GHSA-fvgv-97g3-wjr7).
   const journalCookies = await cookies();
-  const allEntries = await listJournalEntries();
+  const allEntries = await listJournalEntriesForRequest();
   const visibleEntries = isAuthedAdmin
     ? allEntries
     : allEntries.filter((e) => {
@@ -162,98 +152,15 @@ export default async function JournalDetailPage({ params }: JournalDetailPagePro
   );
 
   const config = getConfig();
-
-  // Fetch all referenced assets from Immich
-  const assetPromises = referencedAssetIds.map(async (assetId) => {
-    try {
-      const asset = await immich.getAssetInfo(assetId);
-      return asset;
-    } catch {
-      return null;
-    }
+  const { essay, images, coverToken } = await buildEssayPayload(authoredBlocks, {
+    logTag: 'journal',
+    slug,
+    allowMap: true,
+    coverAssetId: frontmatter.coverAssetId,
   });
 
-  const fetchedAssets = (await Promise.all(assetPromises)).filter(
-    (a): a is ImmichAsset => a !== null,
-  );
-
-  // Album blocks become photo blocks here. The raw fetch bypasses the album
-  // allowlist on purpose: an entry may already show any single photo by id,
-  // and the author's pick is the gate for a whole album just the same. An
-  // album Immich cannot deliver drops its block rather than the page.
-  const albumAssetsById = new Map<string, ImmichAsset[]>();
-  for (const block of authoredBlocks) {
-    if (block.type !== 'album' || !block.albumId || albumAssetsById.has(block.albumId)) continue;
-    try {
-      albumAssetsById.set(block.albumId, await immich.getAlbumAssetsRaw(block.albumId));
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.warn(`[journal] ${slug}: album ${block.albumId} could not be loaded:`, error);
-    }
-  }
-  const { blocks } = expandAlbumBlocks(
-    authoredBlocks,
-    (albumId) => albumAssetsById.get(albumId),
-    config.albumManualOrders,
-  );
-  const knownIds = new Set(fetchedAssets.map((a) => a.id));
-  const rawAssets = [...fetchedAssets];
-  for (const list of albumAssetsById.values()) {
-    for (const asset of list) {
-      if (knownIds.has(asset.id)) continue;
-      knownIds.add(asset.id);
-      rawAssets.push(asset);
-    }
-  }
-
-  // EssayView drops photo blocks it cannot resolve, which is right for visitors
-  // but leaves no trace of *why* a photo vanished. Legacy positional references
-  // ("1", "2") are the usual cause: they only resolved against a subpage album,
-  // and a standalone journal entry has none.
-  if (fetchedAssets.length < referencedAssetIds.length) {
-    const resolved = new Set(fetchedAssets.map((a) => a.id));
-    const missing = referencedAssetIds.filter((id) => !resolved.has(id));
-    // eslint-disable-next-line no-console
-    console.warn(
-      `[journal] ${slug}: ${missing.length} photo reference(s) could not be resolved and will not render: ${missing.join(', ')}`,
-    );
-  }
-
-  /*
-   * EssayView resolves a block's photo through PhotoItem.id, and those ids are
-   * encrypted tokens — while the blocks coming out of the Markdown carry raw
-   * asset UUIDs. Without this translation every photo block fails its lookup and
-   * is dropped, so a correctly authored entry renders text only. Doing it here
-   * also keeps raw UUIDs out of the client payload, per the project rule that
-   * they must never reach the browser. Unresolvable references collapse to an
-   * empty string, which EssayView skips.
-   */
-  const tokenByAssetId = new Map(rawAssets.map((a) => [a.id, encodeAssetId(a.id)]));
-  const toToken = (assetId: string) => tokenByAssetId.get(assetId) ?? '';
-
-  // A map block's pins are computed here, from the photos fetched above and
-  // under each photo's `location:` precision, and only when the site
-  // publishes a map at all. With the map switched off the block is dropped
-  // before it can reach the client; with it on, the client gets pins only —
-  // never the items, which carry raw asset ids.
-  const entryPhotoIds = collectAssetIds(blocks.filter((b) => b.type !== 'map'));
-  const pinsByBlock = new Map<JournalBlock, MapPin[]>();
-  if (config.map) {
-    for (const block of blocks) {
-      if (block.type === 'map') {
-        pinsByBlock.set(block, await entryMapPins(block.items, rawAssets, entryPhotoIds));
-      }
-    }
-  }
-
-  // Photos that only anchor a map pin are fetched for their EXIF but are not
-  // part of the story, so they stay out of the lightbox sequence.
-  const shownAssetIds = new Set([
-    ...entryPhotoIds,
-    ...(frontmatter.coverAssetId ? [frontmatter.coverAssetId] : []),
-  ]);
-
   const essayForClient: ParsedJournal = {
+    ...essay,
     // Named fields, not a spread of `frontmatter`: EssayView reads only
     // title, subtitle, coverAssetId, author and date, but a spread put the
     // stored password — plaintext or a scrypt hash — into every visitor's
@@ -263,44 +170,10 @@ export default async function JournalDetailPage({ params }: JournalDetailPagePro
       subtitle: frontmatter.subtitle,
       author: frontmatter.author,
       date: frontmatter.date,
-      coverAssetId: frontmatter.coverAssetId ? toToken(frontmatter.coverAssetId) : undefined,
+      coverAssetId: coverToken,
     },
-    blocks: blocks.flatMap((block): JournalBlock[] => {
-      if (block.type === 'map') {
-        const pins = pinsByBlock.get(block);
-        return pins
-          ? [{ type: 'map', caption: block.caption, line: block.line, items: [], pins }]
-          : [];
-      }
-      return [mapBlockAssetIds(block, toToken)];
-    }),
-    referencedAssetIds: rawAssets.map((a) => encodeAssetId(a.id)),
   };
 
-  const images: PhotoItem[] = rawAssets
-    .filter((a) => shownAssetIds.has(a.id) && (a.type === 'IMAGE' || a.type === 'VIDEO'))
-    .map((a) => {
-      const ph = assetPlaceholder(a);
-      const exif =
-        config.exif.onHover && config.exif.camera && a.type === 'IMAGE'
-          ? assetExifSummary(a)
-          : undefined;
-      const caption = assetCaption(a, config.exif.caption);
-      const isVideo = a.type === 'VIDEO';
-      return {
-        id: encodeAssetId(a.id),
-        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 ?? {}),
-        ...(caption ? { caption } : {}),
-        aspectRatio: assetAspectRatio(a),
-      };
-    });
-
   return (
     <div style={{ paddingTop: '2rem' }}>
       <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 1.5rem 1rem' }}>
diff --git a/app/journal/__tests__/locked-gate-title.test.ts b/app/journal/__tests__/locked-gate-title.test.ts
new file mode 100644
index 0000000..7a515c7
--- /dev/null
+++ b/app/journal/__tests__/locked-gate-title.test.ts
@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { ReactElement } from 'react';
+
+/**
+ * A password-protected journal entry is hidden by name everywhere a visitor
+ * can look before unlocking it: the index, the prev/next links and the page
+ * metadata (GHSA-fvgv-97g3-wjr7). The gate itself printed the real title,
+ * which undid all of that for anyone who guessed or was sent the URL.
+ */
+
+const readJournalEntry = vi.fn();
+
+vi.mock('@/lib/admin/journal-service', () => ({
+  readJournalEntry: (slug: string) => readJournalEntry(slug),
+  listJournalEntries: async () => [],
+}));
+vi.mock('@/lib/admin/auth', () => ({ isAdminAuthenticated: async () => false }));
+vi.mock('next/headers', () => ({
+  cookies: async () => ({ get: () => undefined }),
+}));
+vi.mock('next/navigation', () => ({
+  notFound: () => {
+    throw new Error('notFound');
+  },
+}));
+vi.mock('@/lib/config', () => ({
+  getConfig: () => ({ authSecret: 'test-secret' }),
+  getConfigOrNull: () => ({ lang: 'en' }),
+}));
+vi.mock('@/app/[...path]/essayPayload', () => ({ buildEssayPayload: vi.fn() }));
+vi.mock('@/app/[...path]/EssayView', () => ({ EssayView: () => null }));
+vi.mock('@/components/JournalNav', () => ({ JournalNav: () => null }));
+vi.mock('@/components/BackLink', () => ({ BackLink: () => null }));
+vi.mock('@/components/PasswordGate', () => ({ default: function PasswordGate() {} }));
+
+const { default: JournalDetailPage } = await import('../[slug]/page');
+const { default: PasswordGate } = await import('@/components/PasswordGate');
+const { getServerDictionary } = await import('@/lib/i18n/server');
+
+describe('journal entry password gate', () => {
+  beforeEach(() => {
+    readJournalEntry.mockReset();
+    readJournalEntry.mockResolvedValue({
+      slug: 'secret-trip',
+      parsed: {
+        frontmatter: { title: 'Weekend with Alex in Lisbon', password: 'hunter2' },
+        blocks: [],
+      },
+    });
+  });
+
+  it('shows the generic journal title, not the entry title', async () => {
+    const el = (await JournalDetailPage({
+      params: Promise.resolve({ slug: 'secret-trip' }),
+    })) as ReactElement<{ title: string; slug: string; type: string }>;
+
+    expect(el.type).toBe(PasswordGate);
+    expect(el.props.type).toBe('journal');
+    expect(el.props.slug).toBe('secret-trip');
+    expect(el.props.title).toBe(getServerDictionary().journal.title);
+    expect(el.props.title).not.toContain('Lisbon');
+  });
+});
+
+/**
+ * A missing entry and a draft both answer 404. Their metadata used to keep the
+ * root layout's `index, follow` next to the noindex Next adds to a 404, and a
+ * draft was titled like a live entry.
+ */
+describe('journal entry metadata on a 404', () => {
+  const meta = async (slug: string) => {
+    const { generateMetadata } = await import('../[slug]/page');
+    return generateMetadata({ params: Promise.resolve({ slug }) });
+  };
+
+  it('describes a missing entry as not found, with no robots tag of its own', async () => {
+    readJournalEntry.mockResolvedValue(null);
+    const m = await meta('no-such-entry');
+
+    expect(m.title).toBe(getServerDictionary().journal.notFound);
+    expect(m.robots).toBeNull();
+    expect(JSON.stringify(m)).not.toContain('no-such-entry');
+  });
+
+  it('describes a draft as not found, not by its title', async () => {
+    readJournalEntry.mockResolvedValue({
+      slug: 'draft-trip',
+      parsed: { frontmatter: { title: 'Unpublished Draft', draft: true }, blocks: [] },
+    });
+    const m = await meta('draft-trip');
+
+    expect(m.title).toBe(getServerDictionary().journal.notFound);
+    expect(m.robots).toBeNull();
+    expect(JSON.stringify(m)).not.toContain('Unpublished');
+  });
+});
diff --git a/app/journal/__tests__/request-memo.test.ts b/app/journal/__tests__/request-memo.test.ts
new file mode 100644
index 0000000..72a5d52
--- /dev/null
+++ b/app/journal/__tests__/request-memo.test.ts
@@ -0,0 +1,141 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+/**
+ * One render of a journal page used to read the journal directory twice —
+ * the header nav in the root layout listed every entry, then the page listed
+ * them again — and an entry's file twice, once for `generateMetadata()` and
+ * once for the page body. The home page loaded the whole site nav twice, for
+ * the header and for the hero. Those reads now go through React's per-request
+ * `cache()`.
+ *
+ * Outside a server render `cache()` does not memoise, so the test stands in a
+ * memo that lasts until `newRequest()`: what it checks is that every read goes
+ * through `cache()`, and that a new request reads the files again.
+ */
+
+const memo = vi.hoisted(() => ({ current: new Map<unknown, Map<string, unknown>>() }));
+const newRequest = () => memo.current.clear();
+
+vi.mock('react', async (importOriginal) => {
+  const react = await importOriginal<typeof import('react')>();
+  return {
+    ...react,
+    cache:
+      <A extends unknown[], R>(fn: (...args: A) => R) =>
+      (...args: A): R => {
+        let results = memo.current.get(fn);
+        if (!results) memo.current.set(fn, (results = new Map()));
+        const key = JSON.stringify(args);
+        if (!results.has(key)) results.set(key, fn(...args));
+        return results.get(key) as R;
+      },
+  };
+});
+
+const calls = vi.hoisted(() => ({ list: 0, read: 0, pages: 0, subpages: 0 }));
+
+const ENTRIES = ['gamma', 'beta', 'alpha'].map((slug) => ({
+  slug,
+  filename: `${slug}.md`,
+  frontmatter: { title: slug.toUpperCase(), date: '2026-01-01' },
+  excerpt: '',
+  wordCount: 1,
+  readingTimeMinutes: 1,
+}));
+
+vi.mock('@/lib/admin/journal-service', () => ({
+  listJournalEntries: async () => {
+    calls.list++;
+    return ENTRIES;
+  },
+  readJournalEntry: async (slug: string) => {
+    calls.read++;
+    return {
+      slug,
+      rawMarkdown: '',
+      parsed: { frontmatter: { title: slug.toUpperCase() }, blocks: [] },
+    };
+  },
+}));
+vi.mock('@/lib/admin/pages-service', () => ({
+  listPages: async () => {
+    calls.pages++;
+    return [];
+  },
+}));
+vi.mock('@/lib/immich', () => ({
+  immich: {
+    getSubpages: async () => {
+      calls.subpages++;
+      return [];
+    },
+    getStandaloneAlbums: async () => [],
+    getAssetInfo: async () => null,
+  },
+}));
+vi.mock('@/lib/config', () => ({
+  getConfig: () => ({
+    authSecret: 'x'.repeat(32),
+    nav: [],
+    aboutEnabled: false,
+    map: false,
+    watermark: undefined,
+  }),
+}));
+vi.mock('@/lib/i18n/server', async () => {
+  const { getDictionary } = await import('@/lib/i18n');
+  return { getServerDictionary: () => getDictionary('en') };
+});
+vi.mock('next/headers', () => ({ cookies: async () => ({ get: () => undefined }) }));
+vi.mock('next/navigation', () => ({
+  notFound: () => {
+    throw new Error('notFound');
+  },
+}));
+vi.mock('@/lib/admin/auth', () => ({ isAdminAuthenticated: async () => false }));
+vi.mock('@/app/[...path]/essayPayload', () => ({
+  buildEssayPayload: async () => ({ essay: { frontmatter: {}, blocks: [] }, images: [] }),
+}));
+// Client components the page only hands props to.
+vi.mock('@/app/[...path]/EssayView', () => ({ EssayView: () => null }));
+vi.mock('@/components/JournalNav', () => ({ JournalNav: () => null }));
+vi.mock('@/components/PasswordGate', () => ({ default: () => null }));
+vi.mock('@/components/BackLink', () => ({ BackLink: () => null }));
+vi.mock('next/link', () => ({ default: () => null }));
+vi.mock('next/image', () => ({ default: () => null }));
+
+import JournalEntryPage, { generateMetadata } from '../[slug]/page';
+import JournalIndexPage from '../page';
+import { loadSiteNav } from '@/lib/siteNav.server';
+
+const params = { params: Promise.resolve({ slug: 'beta' }) };
+
+beforeEach(() => {
+  newRequest();
+  Object.assign(calls, { list: 0, read: 0, pages: 0, subpages: 0 });
+});
+
+describe('journal reads per request', () => {
+  it('an entry page lists the journal once and reads its file once', async () => {
+    // The order a render takes: layout nav, metadata, page body.
+    await Promise.all([loadSiteNav(), generateMetadata(params), JournalEntryPage(params)]);
+    expect(calls).toMatchObject({ list: 1, read: 1 });
+  });
+
+  it('the journal index lists the journal once', async () => {
+    await Promise.all([loadSiteNav(), JournalIndexPage()]);
+    expect(calls.list).toBe(1);
+  });
+
+  it('the home page loads the site nav once for the header and the hero', async () => {
+    await Promise.all([loadSiteNav(), loadSiteNav()]);
+    expect(calls).toMatchObject({ list: 1, pages: 1, subpages: 1 });
+  });
+
+  it('reads the files again on the next request', async () => {
+    await Promise.all([loadSiteNav(), generateMetadata(params), JournalEntryPage(params)]);
+    newRequest();
+    await Promise.all([loadSiteNav(), generateMetadata(params), JournalEntryPage(params)]);
+    expect(calls).toMatchObject({ list: 2, read: 2 });
+  });
+});
diff --git a/app/journal/page.tsx b/app/journal/page.tsx
index c4db307..611304f 100644
--- a/app/journal/page.tsx
+++ b/app/journal/page.tsx
@@ -3,7 +3,8 @@ import Image from 'next/image';
 import type { Metadata } from 'next';
 import { cookies } from 'next/headers';
 import { type JournalEntrySummary } from '@/lib/journal';
-import { listJournalEntries } from '@/lib/admin/journal-service';
+import { formatJournalDate } from '@/lib/journalDate';
+import { listJournalEntriesForRequest } from '@/lib/journal.server';
 import { isAdminAuthenticated } from '@/lib/admin/auth';
 import { isAuthenticated } from '@/lib/auth';
 import { immich } from '@/lib/immich';
@@ -29,7 +30,7 @@ interface EnrichedJournalEntry extends JournalEntrySummary {
 export default async function JournalIndexPage() {
   const t = getServerDictionary();
   const isAuthedAdmin = await isAdminAuthenticated();
-  const allEntries = await listJournalEntries();
+  const allEntries = await listJournalEntriesForRequest();
 
   // Non-admins only see published entries, and only a password-protected one
   // once they have actually unlocked it — the card otherwise names it, shows
@@ -88,13 +89,7 @@ export default async function JournalIndexPage() {
       ) : (
         <div className="journal-grid">
           {enrichedEntries.map((entry) => {
-            const dateStr = entry.frontmatter.date
-              ? new Date(entry.frontmatter.date).toLocaleDateString(t.dateLocale, {
-                  year: 'numeric',
-                  month: 'short',
-                  day: 'numeric',
-                })
-              : null;
+            const dateStr = formatJournalDate(entry.frontmatter.date, t.dateLocale);
 
             return (
               <Link key={entry.slug} href={`/journal/${entry.slug}`} className="journal-card">
diff --git a/app/layout.tsx b/app/layout.tsx
index c6e1ed5..53f12e5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -19,6 +19,7 @@ import { accentForMode, onAccent } from '@/lib/config/theme';
 import { isAdminPath } from '@/lib/admin/paths';
 import { isInstallPath } from '@/lib/install';
 import { isSiteLocked, isSiteUnlocked } from '@/lib/auth';
+import { ogImageUrl } from '@/lib/ogImage';
 // DevToolbarLoader is a Client Component (ssr: false is only allowed there)
 import { DevToolbarLoader } from '@/components/DevToolbarLoader';
 import AssetProtection from '@/components/AssetProtection';
@@ -67,13 +68,13 @@ export async function generateMetadata(): Promise<Metadata> {
       title: siteTitle,
       description: siteDescription,
       type: 'website',
-      images: [`/api/og?title=${encodeURIComponent(siteTitle)}`],
+      images: [ogImageUrl(siteTitle)],
     },
     twitter: {
       card: 'summary_large_image',
       title: siteTitle,
       description: siteDescription,
-      images: [`/api/og?title=${encodeURIComponent(siteTitle)}`],
+      images: [ogImageUrl(siteTitle)],
     },
   };
 }
@@ -174,7 +175,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
                 {t.nav.skipToContent}
               </a>
               <header className="header">
-                <nav className="header__nav">
+                <nav className="header__nav" aria-label={t.nav.mainNavAria}>
                   {/* Brand wordmark — presets that show it pair it with the dot. */}
                   <span className="header__wordmark" aria-hidden="true">
                     {config.siteTitle}
@@ -182,8 +183,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
                   <MobileNav>
                     <NavLink href="/">{t.nav.home}</NavLink>
                     <SubpageNav />
-                    {config.aboutEnabled && <NavLink href="/about">{t.nav.about}</NavLink>}
-                    {config.map && <NavLink href="/map">{t.nav.map}</NavLink>}
                   </MobileNav>
                   <ThemeToggle />
                 </nav>
diff --git a/app/leaflet.css b/app/leaflet.css
index 1cb32fa..668a4cd 100644
--- a/app/leaflet.css
+++ b/app/leaflet.css
@@ -16,6 +16,14 @@
   filter: grayscale(0.85) contrast(0.95);
 }
 
+/* Leaflet paints #ddd behind the tiles, which shows as grey bands above and
+   below the world at low zoom — bright bars on a dark preset. The page's own
+   secondary surface takes its place. Doubled class to outrank Leaflet's
+   stylesheet, which is loaded after this one. */
+.leaflet-container.leaflet-container {
+  background: var(--bg-secondary);
+}
+
 /* ── Popups ────────────────────────────────────────────────── */
 
 .leaflet-popup-content-wrapper {
diff --git a/app/map/map.css b/app/map/map.css
index 176486e..9f2e97d 100644
--- a/app/map/map.css
+++ b/app/map/map.css
@@ -8,8 +8,11 @@
   min-height: calc(100vh - var(--header-height, 64px));
 }
 
+/* No horizontal padding or margin on the header and the map: the page sits
+   inside .main, which already provides every preset's side gutter. Adding a
+   second one made the map page narrower than the rest of the site. */
 .map-page__header {
-  padding: 2rem var(--page-padding, 2rem) 1rem;
+  padding: 2rem 0 1rem;
 }
 
 /* Kicker + meta block are rendered for every preset but stay hidden
@@ -39,7 +42,7 @@
 .map-container {
   flex: 1;
   min-height: 500px;
-  margin: 0 var(--page-padding, 2rem) 2rem;
+  margin: 0 0 2rem;
   border-radius: var(--radius-sm, 0);
   overflow: hidden;
   border: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.15));
diff --git a/app/map/page.tsx b/app/map/page.tsx
index 1f6e23f..5b7549d 100644
--- a/app/map/page.tsx
+++ b/app/map/page.tsx
@@ -4,6 +4,7 @@
  */
 
 import { getConfig } from '@/lib/config';
+import { isListedSubpage, listedAlbumIds } from '@/lib/config/schema';
 import { notFound } from 'next/navigation';
 import { MapView } from '@/components/MapView';
 import { BackLink } from '@/components/BackLink';
@@ -28,11 +29,10 @@ export default function MapPage() {
     notFound();
   }
 
-  const enabledSubpages = config.subpages.filter((sp) => sp.enabled !== false);
-  const collectionCount = enabledSubpages.length;
-  const albumCount =
-    enabledSubpages.reduce((sum, sp) => sum + sp.albumIds.length, 0) +
-    config.standaloneAlbums.length;
+  // Counts what the map may show: a hidden subpage is reachable by direct
+  // link only, so neither it nor an album only it carries is counted.
+  const collectionCount = config.subpages.filter(isListedSubpage).length;
+  const albumCount = listedAlbumIds(config).size;
 
   return (
     <>
diff --git a/app/page.tsx b/app/page.tsx
index 0c6e528..77121e8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -14,37 +14,14 @@ import { imageUrl, assetPlaceholder } from '@/lib/urls';
 import { HeroCarousel } from '@/components/HeroCarousel';
 import { FadeIn } from '@/components/FadeIn';
 import { getServerDictionary } from '@/lib/i18n/server';
-import type { Dictionary } from '@/lib/i18n';
+import { loadSiteNav } from '@/lib/siteNav.server';
+import type { SiteNavLink } from '@/lib/siteNav';
 
 // Render at request time — requires live Immich connection
 export const dynamic = 'force-dynamic';
 
-type HeroSubpage = { slug: string; name: string; albumCount: number };
-type HeroAlbum = { id: string; slug: string; albumName: string; assetCount: number };
-
 const pad2 = (n: number) => String(n).padStart(2, '0');
 
-/**
- * Flatten subpages + standalone albums into one indexed nav list.
- * Every entry carries an index and a count; presets decide what to show.
- */
-function heroNavEntries(subpages: HeroSubpage[], albums: HeroAlbum[], t: Dictionary) {
-  return [
-    ...subpages.map((sp) => ({
-      key: `sp-${sp.slug}`,
-      href: `/${sp.slug}`,
-      label: sp.name,
-      count: t.common.albums(sp.albumCount),
-    })),
-    ...albums.map((a) => ({
-      key: `al-${a.id}`,
-      href: `/${a.slug}`,
-      label: a.albumName,
-      count: t.common.photos(a.assetCount),
-    })),
-  ];
-}
-
 /**
  * Camera line for the hero chip: "Q3 · 28MM · ƒ/5.6 · 1/250 · ISO 200".
  * Returns undefined when the asset carries no usable EXIF.
@@ -72,20 +49,21 @@ async function heroExifLine(
   return parts.length > 0 ? parts.join(' · ') : undefined;
 }
 
-/** Shared nav links for hero sections. */
-function HeroNavLinks({ subpages, albums }: { subpages: HeroSubpage[]; albums: HeroAlbum[] }) {
-  const t = getServerDictionary();
+/** Shared nav links for hero sections — same entries and order as the header. */
+function HeroNavLinks({ links }: { links: SiteNavLink[] }) {
   return (
     <>
-      {heroNavEntries(subpages, albums, t).map((entry, i) => (
+      {links.map((entry, i) => (
         <Link key={entry.key} href={entry.href} className="hero__nav-link">
           <span className="hero__nav-index" aria-hidden="true">
             {pad2(i + 1)}
           </span>
           <span className="hero__nav-label">{entry.label}</span>
-          <span className="hero__nav-count" aria-hidden="true">
-            {entry.count}
-          </span>
+          {entry.count && (
+            <span className="hero__nav-count" aria-hidden="true">
+              {entry.count}
+            </span>
+          )}
         </Link>
       ))}
     </>
@@ -96,13 +74,13 @@ function HeroNavLinks({ subpages, albums }: { subpages: HeroSubpage[]; albums: H
 function HeroTextContent({
   title,
   subtitle,
-  subpages,
-  albums,
+  links,
+  navLabel,
 }: {
   title: string;
   subtitle?: string;
-  subpages: HeroSubpage[];
-  albums: HeroAlbum[];
+  links: SiteNavLink[];
+  navLabel: string;
 }) {
   return (
     <>
@@ -115,8 +93,8 @@ function HeroTextContent({
         </FadeIn>
       )}
       <FadeIn delay={200}>
-        <nav className="hero__nav">
-          <HeroNavLinks subpages={subpages} albums={albums} />
+        <nav className="hero__nav" aria-label={navLabel}>
+          <HeroNavLinks links={links} />
         </nav>
       </FadeIn>
     </>
@@ -131,10 +109,7 @@ export default async function HomePage() {
     return null;
   }
 
-  const [subpages, albums] = await Promise.all([
-    immich.getSubpages(),
-    immich.getStandaloneAlbums(),
-  ]);
+  const links = await loadSiteNav();
 
   // Fetch ThumbHash + camera line for all hero images
   const heroData = await Promise.all(
@@ -156,8 +131,8 @@ export default async function HomePage() {
   // Welcome-page splash: one fullbleed image, the site
   // title, and one link into the portfolio (the first nav entry).
   if (heroStyle === 'cover') {
-    const entries = heroNavEntries(subpages, albums, t);
-    const enterHref = entries[0]?.href ?? '/about';
+    // No fallback: /about used to be hardcoded here and 404ed with About off.
+    const enterHref = links[0]?.href;
 
     return (
       <div className="hero hero--cover">
@@ -171,14 +146,16 @@ export default async function HomePage() {
               <p className="hero__subtitle">{config.siteSubtitle}</p>
             </FadeIn>
           )}
-          <FadeIn delay={250}>
-            <Link href={enterHref} className="hero__cover-enter">
-              {t.home.enter}
-              <span className="hero__cover-enter-arrow" aria-hidden="true">
-                →
-              </span>
-            </Link>
-          </FadeIn>
+          {enterHref && (
+            <FadeIn delay={250}>
+              <Link href={enterHref} className="hero__cover-enter">
+                {t.home.enter}
+                <span className="hero__cover-enter-arrow" aria-hidden="true">
+                  →
+                </span>
+              </Link>
+            </FadeIn>
+          )}
         </div>
       </div>
     );
@@ -201,8 +178,8 @@ export default async function HomePage() {
             <div className="hero__divider" />
           </FadeIn>
           <FadeIn delay={300}>
-            <nav className="hero__nav hero__nav--indexed">
-              <HeroNavLinks subpages={subpages} albums={albums} />
+            <nav className="hero__nav hero__nav--indexed" aria-label={t.nav.heroNavAria}>
+              <HeroNavLinks links={links} />
             </nav>
           </FadeIn>
         </div>
@@ -212,8 +189,6 @@ export default async function HomePage() {
 
   // ── Stacked: fullbleed image + text at bottom + thumbnail strip ─
   if (heroStyle === 'stacked') {
-    const allEntries = heroNavEntries(subpages, albums, t);
-
     return (
       <div className="hero hero--stacked">
         <div className="hero__stacked-image">
@@ -230,8 +205,8 @@ export default async function HomePage() {
           </div>
         </div>
         <FadeIn delay={200}>
-          <nav className="hero__thumbnail-strip">
-            {allEntries.map((entry, i) => (
+          <nav className="hero__thumbnail-strip" aria-label={t.nav.heroNavAria}>
+            {links.map((entry, i) => (
               <Link key={entry.key} href={entry.href} className="hero__thumbnail-item">
                 <span className="hero__thumbnail-index" aria-hidden="true">
                   {pad2(i + 1)}
@@ -269,8 +244,8 @@ export default async function HomePage() {
           <HeroTextContent
             title={config.siteTitle}
             subtitle={config.siteSubtitle}
-            subpages={subpages}
-            albums={albums}
+            links={links}
+            navLabel={t.nav.heroNavAria}
           />
         </div>
       </div>
@@ -285,8 +260,8 @@ export default async function HomePage() {
           <HeroTextContent
             title={config.siteTitle}
             subtitle={config.siteSubtitle}
-            subpages={subpages}
-            albums={albums}
+            links={links}
+            navLabel={t.nav.heroNavAria}
           />
         </div>
       </div>
@@ -302,8 +277,8 @@ export default async function HomePage() {
           <HeroTextContent
             title={config.siteTitle}
             subtitle={config.siteSubtitle}
-            subpages={subpages}
-            albums={albums}
+            links={links}
+            navLabel={t.nav.heroNavAria}
           />
         </div>
       </div>
@@ -319,15 +294,15 @@ export default async function HomePage() {
           <HeroTextContent
             title={config.siteTitle}
             subtitle={config.siteSubtitle}
-            subpages={subpages}
-            albums={albums}
+            links={links}
+            navLabel={t.nav.heroNavAria}
           />
         </div>
       </div>
 
       {/* ── Right Panel (Hero Carousel) ─────────────── */}
       <div className="hero__right">
-        <HeroCarousel images={heroData} />
+        <HeroCarousel images={heroData} sizes="(max-width: 640px) 100vw, 50vw" />
       </div>
     </div>
   );
diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
index 14f6125..de00c7b 100644
--- a/app/privacy/page.tsx
+++ b/app/privacy/page.tsx
@@ -37,7 +37,7 @@ export default function PrivacyPage() {
 
       {/* Every html string below comes from renderInlineMarkdown, which escapes
           the author's text before adding its own tags. */}
-      <main className="privacy-page__content">
+      <div className="privacy-page__content">
         {blocks.map((block, i) => {
           if (block.type === 'heading') {
             const Tag = block.level === 2 ? 'h2' : 'h3';
@@ -55,7 +55,7 @@ export default function PrivacyPage() {
           }
           return <p key={i} dangerouslySetInnerHTML={{ __html: block.html }} />;
         })}
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/app/privacy/privacy.css b/app/privacy/privacy.css
index b96c7e8..737900d 100644
--- a/app/privacy/privacy.css
+++ b/app/privacy/privacy.css
@@ -10,6 +10,10 @@
   font-family: var(--font-serif);
   font-size: clamp(2.2rem, 7vw, 3.5rem);
   font-weight: 400;
+  /* "Datenschutzerklärung" is one word wider than a phone's content column
+     at this size; unbroken it made the page scroll sideways. */
+  hyphens: auto;
+  overflow-wrap: break-word;
 }
 .privacy-page__content {
   max-width: 680px;
diff --git a/app/proof/[token]/page.tsx b/app/proof/[token]/page.tsx
new file mode 100644
index 0000000..108c5c1
--- /dev/null
+++ b/app/proof/[token]/page.tsx
@@ -0,0 +1,121 @@
+/**
+ * A client proofing link: /proof/<token>.
+ *
+ * Renders the session's album with the proofing controls in session mode —
+ * hearts save to the server, and the client submits the selection when done.
+ * The album does not have to be published; see immich.getProofingAlbum().
+ *
+ * Kept out of search engines and the sitemap: the URL is the credential.
+ */
+
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { immich } from '@/lib/immich';
+import { getConfig, hasExifPanelContent } from '@/lib/config';
+import { encodeAssetId } from '@/lib/tokens';
+import { getServerDictionary } from '@/lib/i18n/server';
+import { downloadsRemaining, findSessionByToken, isExpired } from '@/lib/proofSessions';
+import { AlbumDetailView } from '../../[...path]/AlbumDetailView';
+import { toPhotoItems } from '../../[...path]/photoItems';
+
+export const dynamic = 'force-dynamic';
+
+interface ProofPageProps {
+  params: Promise<{ token: string }>;
+}
+
+export async function generateMetadata({ params }: ProofPageProps): Promise<Metadata> {
+  const { token } = await params;
+  const session = await findSessionByToken(token);
+  const t = getServerDictionary();
+  return {
+    // An expired link names nobody, not even in the tab title — but the tab
+    // says the same as the page, rather than "not found" over "expired".
+    title: !session
+      ? t.error.notFoundTitle
+      : isExpired(session)
+        ? t.proofSession.expiredTitle
+        : t.proofSession.greeting(session.clientName),
+    robots: { index: false, follow: false },
+    // Never let the link travel as a Referer, not even to our own font host.
+    referrer: 'no-referrer',
+  };
+}
+
+export default async function ProofPage({ params }: ProofPageProps) {
+  const { token } = await params;
+  const session = await findSessionByToken(token);
+  if (!session) notFound();
+
+  const t = getServerDictionary();
+
+  if (isExpired(session)) {
+    return (
+      <div className="empty-state">
+        <h1 className="empty-state__title">{t.proofSession.expiredTitle}</h1>
+        <p className="empty-state__text">{t.proofSession.expiredText}</p>
+      </div>
+    );
+  }
+
+  const album = await immich.getProofingAlbum(session.albumId);
+  if (!album) notFound();
+
+  const config = getConfig();
+  const images = toPhotoItems(
+    album.assets,
+    config.exif.onHover && config.exif.camera,
+    config.exif.caption,
+  );
+
+  // Only what is still in the album: a photo removed in Immich after it was
+  // picked drops out of the selection instead of haunting the counter.
+  const inAlbum = new Set(album.assets.map((a) => a.id));
+  const selected = session.selection.filter((id) => inAlbum.has(id)).map(encodeAssetId);
+
+  const validUntil = session.expiresOn
+    ? new Date(`${session.expiresOn}T12:00:00`).toLocaleDateString(t.dateLocale, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    : null;
+
+  const gridStyle = {
+    '--grid-columns': config.grid.columns,
+    ...(config.gridGapExplicit ? { '--grid-gap': `${config.grid.gap}px` } : {}),
+    '--grid-aspect-ratio': config.grid.aspectRatio,
+  } as React.CSSProperties;
+
+  return (
+    <AlbumDetailView
+      album={album}
+      images={images}
+      layout={config.grid.layout}
+      gridStyle={gridStyle}
+      watermark={config.watermark}
+      showExifPanel={hasExifPanelContent(config.exif)}
+      showGear={config.exif.camera}
+      proofSession={{
+        token: session.token,
+        selected,
+        submitted: Boolean(session.submittedAt),
+        download: session.download,
+        downloadsRemaining: downloadsRemaining(session),
+      }}
+      intro={
+        <div className="proof-session-intro">
+          <p className="proof-session-intro__greeting">
+            {t.proofSession.greeting(session.clientName)}
+          </p>
+          <p className="proof-session-intro__text">
+            {session.submittedAt ? t.proofSession.locked : t.proofSession.intro}
+          </p>
+          {validUntil && (
+            <p className="proof-session-intro__meta">{t.proofSession.validUntil(validUntil)}</p>
+          )}
+        </div>
+      }
+    />
+  );
+}
diff --git a/app/proof/__tests__/metadata.test.ts b/app/proof/__tests__/metadata.test.ts
new file mode 100644
index 0000000..18e8fa0
--- /dev/null
+++ b/app/proof/__tests__/metadata.test.ts
@@ -0,0 +1,44 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+/**
+ * An expired proofing link rendered "This link has expired" under a tab that
+ * said "Not found". The tab still names nobody, but now agrees with the page.
+ */
+
+vi.mock('@/lib/proofSessions', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@/lib/proofSessions')>()),
+  findSessionByToken: vi.fn(),
+}));
+vi.mock('@/lib/immich', () => ({ immich: {} }));
+vi.mock('@/lib/config', () => ({
+  getConfig: vi.fn(),
+  getConfigOrNull: vi.fn(() => null),
+  hasExifPanelContent: vi.fn(),
+}));
+
+import { generateMetadata } from '../[token]/page';
+import { findSessionByToken } from '@/lib/proofSessions';
+
+const mockFind = findSessionByToken as unknown as ReturnType<typeof vi.fn>;
+const params = Promise.resolve({ token: 'tok' });
+
+beforeEach(() => mockFind.mockReset());
+
+describe('proofing link tab title', () => {
+  it('says an expired link has expired, and names nobody', async () => {
+    mockFind.mockResolvedValue({ clientName: 'Anna', expiresOn: '2000-01-01', selection: [] });
+    const meta = await generateMetadata({ params });
+    expect(meta.title).toBe('This link has expired');
+    expect(String(meta.title)).not.toContain('Anna');
+  });
+
+  it('greets the client on a live link', async () => {
+    mockFind.mockResolvedValue({ clientName: 'Anna', expiresOn: null, selection: [] });
+    expect((await generateMetadata({ params })).title).toBe('Selection for Anna');
+  });
+
+  it('says not found for a link that never existed', async () => {
+    mockFind.mockResolvedValue(null);
+    expect((await generateMetadata({ params })).title).toBe('Not found');
+  });
+});
diff --git a/app/themes/editorial.css b/app/themes/editorial.css
index 0c15740..f530cba 100644
--- a/app/themes/editorial.css
+++ b/app/themes/editorial.css
@@ -138,7 +138,10 @@
 [data-preset='editorial'] .album-header__title,
 [data-preset='editorial'] .subpage-title {
   font-family: var(--font-serif);
-  font-size: 5rem;
+  /* A fixed 5rem ran "Deutschland" 80px past a 390px phone and made the
+     whole page scroll sideways. */
+  font-size: clamp(2.5rem, 11vw, 5rem);
+  overflow-wrap: break-word;
   font-weight: 400;
   letter-spacing: -0.02em;
 }
diff --git a/app/themes/monograph.css b/app/themes/monograph.css
index 419beb4..53fb2f5 100644
--- a/app/themes/monograph.css
+++ b/app/themes/monograph.css
@@ -85,11 +85,21 @@
     transform 0.4s ease;
 }
 
-[data-preset='monograph'] .photo-grid__item:hover .photo-grid__item-exif {
+[data-preset='monograph'] .photo-grid__item:hover .photo-grid__item-exif,
+[data-preset='monograph']
+  .photo-grid__item:is(:focus-visible, :has(:focus-visible))
+  .photo-grid__item-exif {
   opacity: 1;
   transform: translateY(0);
 }
 
+@media (hover: none) {
+  [data-preset='monograph'] .photo-grid__item .photo-grid__item-exif {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* Album cards: minimal text below */
 [data-preset='monograph'] .album-card {
   border: 1px solid var(--border-subtle);
diff --git a/app/themes/studio-modern.css b/app/themes/studio-modern.css
index d8eec2a..20725d8 100644
--- a/app/themes/studio-modern.css
+++ b/app/themes/studio-modern.css
@@ -877,7 +877,6 @@
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: #fff;
 }
 
 [data-preset='studio-modern'] .scroll-to-top {
@@ -960,8 +959,11 @@
 }
 
 /* ── Map ────────────────────────────────────────────────────── */
+/* No side padding: .main already holds the page to --sm-gutter, and adding it
+   again here put the map page at twice the gutter of every other page (and
+   left a phone a map about 200px wide). */
 [data-preset='studio-modern'] .map-page__header {
-  padding: 64px var(--sm-gutter) 32px;
+  padding: 64px 0 32px;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
@@ -1021,7 +1023,7 @@
 }
 
 [data-preset='studio-modern'] .map-container {
-  margin: 0 var(--sm-gutter) var(--sm-gutter);
+  margin: 0 0 var(--sm-gutter);
   border: var(--sm-hairline);
   border-radius: 0;
 }
@@ -1120,8 +1122,12 @@
 }
 
 /* ── Responsive ─────────────────────────────────────────────── */
+/* `html` in front: app/tokens.css sets the 48px default with the same
+   [data-preset] selector and is imported after this file, so without the
+   extra weight neither narrower gutter ever applied — phones kept 48px a
+   side, and the map page was left about 200px wide. */
 @media (max-width: 1024px) {
-  [data-preset='studio-modern'] {
+  html[data-preset='studio-modern'] {
     --sm-gutter: 32px;
   }
 
@@ -1135,12 +1141,15 @@
 }
 
 @media (max-width: 640px) {
-  [data-preset='studio-modern'] {
+  html[data-preset='studio-modern'] {
     --sm-gutter: 20px;
   }
 
+  /* The header stays --header-height (64px) tall on a phone, so a flat 56px
+     tucked the album back link under it. Same 24px breathing room as the
+     88px on desktop. */
   [data-preset='studio-modern'] .main {
-    padding: 56px var(--sm-gutter) 80px;
+    padding: calc(var(--header-height) + 24px) var(--sm-gutter) 80px;
   }
 
   [data-preset='studio-modern'] .header {
diff --git a/app/tokens.css b/app/tokens.css
index c631c4c..d078d9f 100644
--- a/app/tokens.css
+++ b/app/tokens.css
@@ -37,6 +37,31 @@
   --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent);
   --on-accent: var(--on-accent-dark, #ffffff);
 
+  /* Error and destructive text. One value per mode: no single red clears
+     4.5:1 on both a near-black and a near-white page (the fixed reds these
+     replace measured 3.2–3.8:1 on the light presets). #ff6b6b is at least
+     5.6:1 on every dark surface token, #c62828 (below) at least 4.66:1 on
+     every light one. */
+  --error: #ff6b6b;
+
+  /* The lightbox paints its own dark overlay in both modes, so its controls
+     cannot use --text-*: in light mode those are near-black, and the close
+     button, arrows and counter came out at 1.1–2:1. Lightbox.module.css
+     points the text tokens at these inside the overlay in light mode; dark
+     mode keeps each preset's tinted greys. */
+  --lightbox-text: rgba(255, 255, 255, 0.92);
+  --lightbox-text-secondary: rgba(255, 255, 255, 0.72);
+  --lightbox-text-muted: rgba(255, 255, 255, 0.62);
+  --lightbox-border: rgba(255, 255, 255, 0.12);
+  /* Round controls float over the photo on narrow screens; a dark fill keeps
+     them visible on a white sky, where the old white-alpha disc vanished. */
+  --lightbox-control-bg: rgba(0, 0, 0, 0.35);
+  --lightbox-control-bg-hover: rgba(0, 0, 0, 0.55);
+  --lightbox-control-border: rgba(255, 255, 255, 0.18);
+  /* A saved favourite. Not the accent: minimal's is white and a custom one
+     may be dark navy, neither of which marks anything on the overlay. */
+  --lightbox-fav: #ff6b6b;
+
   --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
   --font-caption: 'EB Garamond', Georgia, serif;
@@ -71,6 +96,8 @@
   --accent: var(--accent-light, #c8000f);
   --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent);
   --on-accent: var(--on-accent-light, #ffffff);
+
+  --error: #c62828;
 }
 
 /* ── Studio Modern: Leica Precision Palette ──────── */
@@ -314,10 +341,17 @@ img {
   max-width: 100%;
 }
 
+/* [tabindex='-1'] is left out: those are focus targets for scripts and skip
+   links (<main>, the lightbox dialog), and outlining a whole region there
+   helps nobody. */
 a:focus-visible,
 button:focus-visible,
 input:focus-visible,
-[role='button']:focus-visible {
+textarea:focus-visible,
+select:focus-visible,
+summary:focus-visible,
+[role='button']:focus-visible,
+[tabindex]:not([tabindex='-1']):focus-visible {
   outline: 2px solid var(--text-primary);
   outline-offset: 2px;
 }
diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx
index 6938006..4f27d96 100644
--- a/components/ContactForm.tsx
+++ b/components/ContactForm.tsx
@@ -7,6 +7,12 @@
  * 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.
+ *
+ * `startedAt` is the server's clock, handed down by the page. The check
+ * subtracts it from the server's clock at submission, and a stamp from the
+ * visitor's device made that a comparison between two clocks: a phone running
+ * a few minutes fast looked like a bot posting before the form existed, and
+ * its message was dropped behind a thank-you page.
  */
 
 import { useState } from 'react';
@@ -14,15 +20,14 @@ import { useDictionary } from './I18nProvider';
 
 interface Props {
   retentionDays: number;
+  /** `Date.now()` on the server when the page was rendered. */
+  renderedAt: number;
 }
 
 type State = 'idle' | 'sending' | 'done';
 
-export default function ContactForm({ retentionDays }: Props) {
+export default function ContactForm({ retentionDays, renderedAt }: 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('');
 
@@ -40,7 +45,9 @@ export default function ContactForm({ retentionDays }: Props) {
           email: data.get('email'),
           message: data.get('message'),
           website: data.get('website'),
-          startedAt,
+          // A bot posting straight to the endpoint has no stamp; one filling
+          // the form on load is faster than MIN_FILL_MS.
+          startedAt: renderedAt,
         }),
       });
       if (res.ok) {
diff --git a/components/HeroCarousel.tsx b/components/HeroCarousel.tsx
index 04e76df..cdf1671 100644
--- a/components/HeroCarousel.tsx
+++ b/components/HeroCarousel.tsx
@@ -2,13 +2,17 @@
  * HeroCarousel — crossfade between hero images on a timer.
  *
  * If only one image is provided, renders a static image with no timer.
- * When multiple images are provided, crossfades between them every 6 seconds.
+ * When multiple images are provided, crossfades between them every 6 seconds
+ * — unless the visitor prefers reduced motion, or has paused it with the
+ * pause control (WCAG 2.2.2: anything that moves on its own for more than
+ * five seconds needs a way to stop it, #696).
  */
 
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useSyncExternalStore } from 'react';
 import Image from 'next/image';
+import { useDictionary } from './I18nProvider';
 
 interface HeroImage {
   src: string;
@@ -19,23 +23,51 @@ interface HeroImage {
 
 interface HeroCarouselProps {
   images: HeroImage[];
+  /**
+   * `sizes` for next/image. Most heroes are full-width; only the split hero's
+   * image panel is half the viewport, and only above the mobile breakpoint.
+   */
+  sizes?: string;
 }
 
-const INTERVAL_MS = 6000;
+export const INTERVAL_MS = 6000;
 
-export function HeroCarousel({ images }: HeroCarouselProps) {
+const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+
+function subscribeReducedMotion(onChange: () => void) {
+  const mql = window.matchMedia(REDUCED_MOTION);
+  mql.addEventListener('change', onChange);
+  return () => mql.removeEventListener('change', onChange);
+}
+
+/** True when the visitor asked the OS for less motion. False during SSR. */
+function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(
+    subscribeReducedMotion,
+    () => window.matchMedia(REDUCED_MOTION).matches,
+    () => false,
+  );
+}
+
+export function HeroCarousel({ images, sizes = '100vw' }: HeroCarouselProps) {
+  const t = useDictionary();
   const [currentIndex, setCurrentIndex] = useState(0);
+  const reducedMotion = usePrefersReducedMotion();
+  // null = the visitor has not touched the control; the default then follows
+  // the motion preference. An explicit play overrides reduced motion.
+  const [pausedByUser, setPausedByUser] = useState<boolean | null>(null);
+  const paused = pausedByUser ?? reducedMotion;
 
   const advance = useCallback(() => {
     setCurrentIndex((prev) => (prev + 1) % images.length);
   }, [images.length]);
 
   useEffect(() => {
-    if (images.length <= 1) return;
+    if (images.length <= 1 || paused) return;
 
     const timer = setInterval(advance, INTERVAL_MS);
     return () => clearInterval(timer);
-  }, [images.length, advance]);
+  }, [images.length, advance, paused]);
 
   if (images.length === 0) {
     return <div className="hero__image-placeholder" />;
@@ -50,7 +82,7 @@ export function HeroCarousel({ images }: HeroCarouselProps) {
           alt=""
           className="hero__image"
           fill
-          sizes="50vw"
+          sizes={sizes}
           priority
           {...(img.blurDataURL
             ? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
@@ -70,7 +102,7 @@ export function HeroCarousel({ images }: HeroCarouselProps) {
           alt=""
           className={`hero__carousel-image${i === currentIndex ? ' hero__carousel-image--active' : ''}`}
           fill
-          sizes="50vw"
+          sizes={sizes}
           priority={i === 0}
           {...(img.blurDataURL
             ? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
@@ -78,6 +110,25 @@ export function HeroCarousel({ images }: HeroCarouselProps) {
         />
       ))}
       <HeroExifChip text={images[currentIndex]?.exif} />
+      <button
+        type="button"
+        className="hero__carousel-toggle"
+        aria-label={paused ? t.home.playSlideshow : t.home.pauseSlideshow}
+        title={paused ? t.home.playSlideshow : t.home.pauseSlideshow}
+        data-paused={paused}
+        onClick={() => setPausedByUser(!paused)}
+      >
+        {paused ? (
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        ) : (
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
+            <rect x="6" y="5" width="4" height="14" />
+            <rect x="14" y="5" width="4" height="14" />
+          </svg>
+        )}
+      </button>
     </>
   );
 }
diff --git a/components/LeafletMap.tsx b/components/LeafletMap.tsx
index f88eaf2..767bd18 100644
--- a/components/LeafletMap.tsx
+++ b/components/LeafletMap.tsx
@@ -13,6 +13,8 @@
 
 import { useEffect, useRef } from 'react';
 import 'leaflet/dist/leaflet.css';
+import { useDictionary } from './I18nProvider';
+import { escapeHtml } from '@/lib/escapeHtml';
 
 export interface LeafletMarker {
   lat: number;
@@ -33,14 +35,14 @@ interface LeafletMapProps {
   onError?: (err: unknown) => void;
 }
 
-/** Escapes special HTML characters for Leaflet's string-based popups and icons. */
-export function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
+export { escapeHtml } from '@/lib/escapeHtml';
+
+/**
+ * Leaflet's attribution prefix with its English link title swapped for
+ * `title`. The rest — link, flag, name — is Leaflet's own markup, kept as is.
+ */
+export function localizedLeafletPrefix(prefix: string, title: string): string {
+  return prefix.replace(/title="[^"]*"/, `title="${escapeHtml(title)}"`);
 }
 
 export function LeafletMap({
@@ -53,6 +55,11 @@ export function LeafletMap({
 }: LeafletMapProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const mapRef = useRef<L.Map | null>(null);
+  // Read inside the effect through a ref: the locale never changes on a
+  // mounted page, and a new dictionary object must not rebuild the map.
+  const t = useDictionary();
+  const labelsRef = useRef(t.map);
+  labelsRef.current = t.map;
 
   // Callers rebuild the markers array on every render; the map is only
   // rebuilt when its content changes.
@@ -71,8 +78,17 @@ export function LeafletMap({
       const L = (await import('leaflet')).default;
       if (cancelled || !containerRef.current || mapRef.current) return;
 
-      const map = L.map(containerRef.current, { zoomControl: true, attributionControl: true });
+      // The zoom buttons' titles (which Leaflet also uses as their aria-label)
+      // and the credit's link title are English in Leaflet; the site's
+      // dictionary supplies them instead.
+      const labels = labelsRef.current;
+      const map = L.map(containerRef.current, { zoomControl: false, attributionControl: true });
       mapRef.current = map;
+      L.control.zoom({ zoomInTitle: labels.zoomIn, zoomOutTitle: labels.zoomOut }).addTo(map);
+      const prefix = map.attributionControl.options.prefix;
+      if (typeof prefix === 'string') {
+        map.attributionControl.setPrefix(localizedLeafletPrefix(prefix, labels.leafletTitle));
+      }
 
       // OpenStreetMap's own tiles: free to use with attribution and a Referer,
       // which the Referrer-Policy sends. CARTO's Dark Matter, used before,
diff --git a/components/Lightbox.module.css b/components/Lightbox.module.css
index 17f5810..79d2605 100644
--- a/components/Lightbox.module.css
+++ b/components/Lightbox.module.css
@@ -11,6 +11,20 @@
   animation: lightbox-fade-in var(--transition-normal) ease forwards;
 }
 
+/* The overlay is dark in both modes — see "Studio-Inspired Lightbox Defaults"
+   below and the studio-modern block, which both paint it near-black. In light
+   mode the page's text tokens are near-black too, so every control that reads
+   them (close, arrows, counter, the bottom-bar buttons, and the focus ring in
+   app/tokens.css, which is var(--text-primary)) sat at 1.1–2:1. Inside the
+   overlay they are pointed at the lightbox tokens instead. Dark mode is left
+   alone: its tokens are already light, and tinted per preset. */
+:global([data-theme='light']) .overlay {
+  --text-primary: var(--lightbox-text);
+  --text-secondary: var(--lightbox-text-secondary);
+  --text-muted: var(--lightbox-text-muted);
+  --border-subtle: var(--lightbox-border);
+}
+
 @keyframes lightbox-fade-in {
   from {
     opacity: 0;
@@ -109,10 +123,10 @@
   top: 50%;
   transform: translateY(-50%);
   z-index: 1001;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--lightbox-control-bg);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--lightbox-control-border);
   border-radius: 50%;
   width: 48px;
   height: 48px;
@@ -127,7 +141,7 @@
 }
 
 .nav:hover {
-  background: rgba(255, 255, 255, 0.15);
+  background: var(--lightbox-control-bg-hover);
   color: var(--text-primary);
 }
 
@@ -203,10 +217,10 @@
   align-items: center;
   gap: 6px;
   z-index: 1001;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--lightbox-control-bg);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--lightbox-control-border);
   border-radius: var(--radius-md);
   padding: 8px 12px;
   color: var(--text-secondary);
@@ -219,10 +233,22 @@
 }
 
 .infoToggle:hover {
-  background: rgba(255, 255, 255, 0.15);
+  background: var(--lightbox-control-bg-hover);
   color: var(--text-primary);
 }
 
+/* A saved favourite. Set by class rather than inline, so a preset's own
+   colour for the toggle (studio-modern's) still applies to the unsaved state —
+   the inline `inherit` it used to fall back to picked up the page's near-black
+   text in light mode (1.08:1). The extra class outranks that preset block,
+   which comes later in this file, hover included: studio-modern hovers in
+   the accent, which a dark custom accent drops to about 1.3:1. */
+.bottomBar .infoToggle.favActive,
+.bottomBar .infoToggle.favActive:hover {
+  color: var(--lightbox-fav);
+  font-weight: 600;
+}
+
 /* Anchors are not buttons; strip the underline so it matches its neighbours. */
 .downloadToggle {
   text-decoration: none;
diff --git a/components/Lightbox.tsx b/components/Lightbox.tsx
index c6eedaf..e140c6d 100644
--- a/components/Lightbox.tsx
+++ b/components/Lightbox.tsx
@@ -19,7 +19,7 @@ import type { PhotoItem } from '@/app/[...path]/PhotoGrid';
 import { useExif } from '@/hooks/useExif';
 import { useSwipe } from '@/hooks/useSwipe';
 import styles from './Lightbox.module.css';
-import { useProofing } from './ProofingContext';
+import { useProofing } from './useProofing';
 import { IconHeart } from './Icons';
 import { useDictionary } from './I18nProvider';
 // From lib/config/schema directly: lib/config/index.ts pulls in `fs`, which a
@@ -27,6 +27,8 @@ import { useDictionary } from './I18nProvider';
 import { resolveWatermarkOpacity } from '@/lib/config/schema';
 import { formatCamera } from '@/lib/exif';
 import { buildPhotoPermalink } from '@/lib/photoHash';
+import { trapTabKey } from '@/lib/focusTrap';
+import { canonicalImageUrl } from '@/lib/imageSize';
 import { nextSlideshowSpeed, type SlideshowSpeed } from '@/lib/slideshow';
 import {
   LIGHTBOX_SHORTCUTS,
@@ -105,6 +107,34 @@ export function Lightbox({
     }
   }, [mounted]);
 
+  /*
+   * Focus stays inside the dialog while it is open, and goes back to the grid
+   * when it closes (#696) — to the tile of the photo that was on screen last,
+   * not necessarily the one that opened the viewer, so a keyboard visitor who
+   * browsed ahead continues from where they are. Tiles mark themselves with
+   * `data-lightbox-index` inside a `data-lightbox-group`; without them the
+   * opener gets focus back.
+   */
+  const indexRef = useRef(currentIndex);
+  useEffect(() => {
+    indexRef.current = currentIndex;
+  }, [currentIndex]);
+
+  useEffect(() => {
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const onTab = (e: KeyboardEvent) => {
+      if (overlayRef.current) trapTabKey(overlayRef.current, e);
+    };
+    document.addEventListener('keydown', onTab);
+    return () => {
+      document.removeEventListener('keydown', onTab);
+      const group = opener?.closest('[data-lightbox-group]');
+      const tile = group?.querySelector<HTMLElement>(`[data-lightbox-index="${indexRef.current}"]`);
+      const target = tile ?? opener;
+      if (target?.isConnected) target.focus();
+    };
+  }, []);
+
   // Reset EXIF data when switching images; refetch if panel is open
   useEffect(() => {
     clearExif();
@@ -260,7 +290,7 @@ export function Lightbox({
     const preload = (index: number) => {
       if (index >= 0 && index < assets.length && assets[index].type !== 'video') {
         const img = new Image();
-        img.src = assets[index].previewUrl;
+        img.src = canonicalImageUrl(assets[index].previewUrl);
       }
     };
     preload(currentIndex + 1);
@@ -487,7 +517,7 @@ export function Lightbox({
           // eslint-disable-next-line @next/next/no-img-element
           <img
             className={`${styles.image}${imageLoaded ? ` ${styles.imageLoaded}` : ''}`}
-            src={current.previewUrl}
+            src={canonicalImageUrl(current.previewUrl)}
             alt={current.caption ?? ''}
             draggable={false}
             onLoad={() => setImageLoaded(true)}
@@ -609,9 +639,7 @@ export function Lightbox({
 
         {/* Counter */}
         <div className={styles.counter} aria-live="polite" aria-atomic="true">
-          <span className="sr-only">
-            Photo {currentIndex + 1} of {assets.length}
-          </span>
+          <span className="sr-only">{t.lightbox.position(currentIndex + 1, assets.length)}</span>
           <span aria-hidden="true">
             {currentIndex + 1} / {assets.length}
           </span>
@@ -621,11 +649,7 @@ export function Lightbox({
           {/* Proofing favorite button */}
           {proofing && current && (
             <button
-              className={styles.infoToggle}
-              style={{
-                color: isFav ? '#ff4d4f' : 'inherit',
-                fontWeight: isFav ? 600 : 400,
-              }}
+              className={`${styles.infoToggle}${isFav ? ` ${styles.favActive}` : ''}`}
               onClick={() => proofing.toggleFavorite(current.id)}
               aria-label={isFav ? t.proofing.removeFromFavorites : t.proofing.addToFavorites}
               title={isFav ? t.proofing.removeFromFavorites : t.proofing.addToFavorites}
diff --git a/components/MapView.tsx b/components/MapView.tsx
index 88a2a11..98243fd 100644
--- a/components/MapView.tsx
+++ b/components/MapView.tsx
@@ -115,8 +115,9 @@ export function MapView() {
       {loading && (
         <div
           className="map-container__loading"
-          role="alert"
-          aria-live="polite"
+          // A loading notice is a status, not an alert (role="alert" is
+          // assertive and contradicted the aria-live="polite" beside it).
+          role="status"
           style={{
             position: 'absolute',
             inset: 0,
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index e01228b..3ed5fc4 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -1,23 +1,31 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { focusableIn } from '@/lib/focusTrap';
 import { usePathname } from 'next/navigation';
 import { useDictionary } from './I18nProvider';
 
+/** Must match the `min-width: 641px` query in globals.css. */
+const PHONE_QUERY = '(max-width: 640px)';
+
 /**
  * MobileNav — hamburger button + dropdown panel for the header links.
  *
  * `children` — Home, subpages, standalone albums, About, Map — is the exact
  * same server-rendered markup the desktop header already used. It is never
- * duplicated: `.header__nav-links` is `display: contents` above the mobile
- * breakpoint, so on desktop this component is invisible and the links sit
- * directly in `.header__nav`'s flex row exactly as before. Below the
- * breakpoint the same markup becomes the dropdown panel's content, toggled
- * by the `data-open` attribute rather than by mounting/unmounting (#590).
+ * duplicated: `.header__nav-links` is `display: contents` while the links fit
+ * in one row, so on desktop this component is invisible and the links sit
+ * directly in `.header__nav`'s flex row exactly as before. Otherwise the same
+ * markup becomes the dropdown panel's content, toggled by the `data-open`
+ * attribute rather than by mounting/unmounting (#590).
  *
- * The header used to scroll sideways with the scrollbar hidden on narrow
- * viewports, so a visitor with more subpages than fit the width had no sign
- * that any were missing.
+ * "Otherwise" is two conditions. Phones always get the menu, and the CSS says
+ * so on its own, before hydration. Wider viewports get it when the row is
+ * wider than the header — measured here, because it depends on how many
+ * subpages the site has and on the preset's type, and published as
+ * `data-collapsed`. The header used to scroll sideways with the scrollbar
+ * hidden instead, which on a tablet left About, Map and the theme toggle
+ * off-screen with no sign they existed.
  */
 export function MobileNav({ children }: { children: React.ReactNode }) {
   const [open, setOpen] = useState(false);
@@ -37,10 +45,61 @@ export function MobileNav({ children }: { children: React.ReactNode }) {
     setOpen(false);
   }
 
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const [collapsed, setCollapsed] = useState(false);
+  // The width the inline row needs. It can only be read while the row is laid
+  // out, so once collapsed this last reading is what a wider header is
+  // compared against; expanding re-measures, and collapses again if the
+  // reading was stale (a late web font, a different active link).
+  const neededRef = useRef(0);
+
+  // A layout effect, so a row that does not fit is swapped for the button
+  // before the browser paints it.
+  useLayoutEffect(() => {
+    const nav = buttonRef.current?.parentElement;
+    if (!nav) return;
+    const phone = typeof window.matchMedia === 'function' ? window.matchMedia(PHONE_QUERY) : null;
+    const measure = () => {
+      const isPhone = phone?.matches ?? false;
+      if (!collapsed && !isPhone) neededRef.current = nav.scrollWidth;
+      const next = isPhone || neededRef.current > nav.clientWidth;
+      if (next === collapsed) return;
+      setCollapsed(next);
+      // A panel left open would otherwise keep its backdrop and the page's
+      // scroll lock once the links are back in the row.
+      if (!next) setOpen(false);
+    };
+    measure();
+    const resize = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : null;
+    resize?.observe(nav);
+    phone?.addEventListener('change', measure);
+    let active = true;
+    document.fonts?.ready.then(() => {
+      if (active) measure();
+    });
+    return () => {
+      active = false;
+      resize?.disconnect();
+      phone?.removeEventListener('change', measure);
+    };
+  }, [collapsed, pathname]);
+
   useEffect(() => {
     if (!open) return;
+    // Focus moves into the panel when it opens (#696), so a keyboard or
+    // screen-reader visitor lands on the first link rather than behind it.
+    // Only when the panel is actually the dropdown — while the links sit in
+    // the row the button is hidden, so this never runs.
+    if (panelRef.current) focusableIn(panelRef.current)[0]?.focus();
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') close();
+      if (e.key === 'Escape') {
+        close();
+        // Esc returns focus to the button that opened the panel; otherwise
+        // it would be left on a link that is no longer visible.
+        buttonRef.current?.focus();
+      }
     };
     document.addEventListener('keydown', onKey);
     document.body.style.overflow = 'hidden';
@@ -53,8 +112,10 @@ export function MobileNav({ children }: { children: React.ReactNode }) {
   return (
     <>
       <button
+        ref={buttonRef}
         type="button"
         className="header__menu-btn"
+        data-collapsed={collapsed}
         aria-expanded={open}
         aria-controls="header-nav-panel"
         aria-label={open ? t.nav.closeMenu : t.nav.openMenu}
@@ -90,7 +151,13 @@ export function MobileNav({ children }: { children: React.ReactNode }) {
         )}
       </button>
       {open && <div className="header__nav-backdrop" onClick={close} aria-hidden="true" />}
-      <div id="header-nav-panel" className="header__nav-links" data-open={open}>
+      <div
+        ref={panelRef}
+        id="header-nav-panel"
+        className="header__nav-links"
+        data-open={open}
+        data-collapsed={collapsed}
+      >
         {children}
       </div>
     </>
diff --git a/components/PasswordGate.module.css b/components/PasswordGate.module.css
index aa7e2b9..eb0ce35 100644
--- a/components/PasswordGate.module.css
+++ b/components/PasswordGate.module.css
@@ -91,7 +91,9 @@
 .error {
   margin-top: 12px;
   font-size: 0.8rem;
-  color: #e74c3c;
+  /* Per-mode token; the fixed red it replaces measured 3.2–3.6:1 on the
+     light presets. */
+  color: var(--error);
   font-weight: 400;
 }
 
diff --git a/components/PasswordGate.tsx b/components/PasswordGate.tsx
index 7371a5d..f18fb74 100644
--- a/components/PasswordGate.tsx
+++ b/components/PasswordGate.tsx
@@ -12,7 +12,13 @@ import { useDictionary } from './I18nProvider';
 interface PasswordGateProps {
   slug: string;
   title: string;
-  type?: 'subpage' | 'album' | 'journal' | 'site';
+  type?: 'subpage' | 'album' | 'journal' | 'page' | 'site';
+}
+
+/** Whole seconds from a `Retry-After` header, or null when there is none. */
+function retryAfterSeconds(res: Response): number | null {
+  const seconds = Number.parseInt(res.headers.get('retry-after') ?? '', 10);
+  return Number.isFinite(seconds) && seconds > 0 ? seconds : null;
 }
 
 export default function PasswordGate({ slug, title, type = 'subpage' }: PasswordGateProps) {
@@ -35,9 +41,15 @@ export default function PasswordGate({ slug, title, type = 'subpage' }: Password
 
       if (res.ok) {
         window.location.reload();
-      } else {
+      } else if (res.status === 401) {
         setError(t.password.incorrect);
         setPassword('');
+      } else if (res.status === 429) {
+        // The limit says nothing about the password, which may well be right:
+        // keep it in the field and say when the next attempt will be heard.
+        setError(t.password.tooManyAttempts(retryAfterSeconds(res)));
+      } else {
+        setError(t.password.failed);
       }
     } catch {
       setError(t.password.failed);
@@ -51,7 +63,13 @@ export default function PasswordGate({ slug, title, type = 'subpage' }: Password
       <div className={styles.card}>
         <h2 className={styles.title}>{title}</h2>
         <p className={styles.subtitle}>
-          {type === 'site' ? t.password.siteSubtitle : t.password.subtitle}
+          {type === 'site'
+            ? t.password.siteSubtitle
+            : type === 'page'
+              ? t.password.pageSubtitle
+              : type === 'journal'
+                ? t.password.journalSubtitle
+                : t.password.subtitle}
         </p>
 
         <form onSubmit={handleSubmit} className={styles.form}>
diff --git a/components/ProofSessionControls.tsx b/components/ProofSessionControls.tsx
new file mode 100644
index 0000000..b877bf1
--- /dev/null
+++ b/components/ProofSessionControls.tsx
@@ -0,0 +1,272 @@
+'use client';
+
+/**
+ * The selection bar and review dialog of a client proofing link.
+ *
+ * Stands in for the anonymous mode's bar and share/export modal: there is
+ * nothing to share (the link already is the share), the selection saves itself,
+ * and the one action that matters is submitting it to the photographer.
+ */
+
+import { useCallback, useState } from 'react';
+import { useProofing } from './ProofingContext';
+import { useDictionary } from './I18nProvider';
+import { useModalDialog } from '@/hooks/useModalDialog';
+
+const barStyle: React.CSSProperties = {
+  position: 'fixed',
+  bottom: '24px',
+  right: '24px',
+  left: 'auto',
+  zIndex: 990,
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  gap: '12px',
+  padding: '8px 16px',
+  borderRadius: '30px',
+  background: 'var(--bg-card, #1e1e1e)',
+  color: 'var(--text-primary, #ffffff)',
+  border: '1px solid var(--border-subtle, rgba(255,255,255,0.15))',
+  boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
+  backdropFilter: 'blur(8px)',
+  maxWidth: 'calc(100vw - 32px)',
+};
+
+const primaryButton: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '0.5rem',
+  padding: '0.75rem 1rem',
+  borderRadius: 'var(--radius-sm, 6px)',
+  background: 'var(--accent, #e60012)',
+  // Black or white, whichever the layout found to carry on this accent.
+  color: 'var(--on-accent, #fff)',
+  border: 'none',
+  fontWeight: 500,
+  // The same for the <button>s and the download <a>s, which would otherwise
+  // take the browser's differing defaults.
+  fontFamily: 'inherit',
+  fontSize: '0.9rem',
+  lineHeight: 1.3,
+  cursor: 'pointer',
+  textDecoration: 'none',
+};
+
+const secondaryButton: React.CSSProperties = {
+  ...primaryButton,
+  background: 'var(--bg-card-hover)',
+  color: 'inherit',
+  border: '1px solid var(--border-subtle)',
+};
+
+export function ProofSessionControls() {
+  const t = useDictionary();
+  const proofing = useProofing();
+  const [open, setOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const close = useCallback(() => setOpen(false), []);
+  const cardRef = useModalDialog(close, open);
+
+  if (!proofing?.session) return null;
+  const { session, isFilterActive, setIsFilterActive, getSelectedTokens } = proofing;
+  const count = getSelectedTokens().length;
+  const p = t.proofSession;
+
+  const status =
+    session.saveState === 'saving'
+      ? p.saving
+      : session.saveState === 'error'
+        ? p.saveFailed
+        : session.saveState === 'saved'
+          ? p.saved
+          : '';
+
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    await session.submit();
+    setSubmitting(false);
+  };
+
+  const downloadHref = (scope: 'selection' | 'album') => `${session.archiveUrl}?scope=${scope}`;
+  const downloadsLeft = session.downloadsRemaining;
+  const canDownload = session.download !== 'none' && (downloadsLeft === null || downloadsLeft > 0);
+  // The selection ZIP is built from what the server has saved, so it is only
+  // offered once there is nothing left to save — a heart still waiting out the
+  // autosave debounce counts, or the ZIP would hold the previous selection.
+  const selectionSaved =
+    !session.unsaved && session.saveState !== 'saving' && session.saveState !== 'error';
+
+  return (
+    <>
+      <div className="proofing-sticky-bar proof-session-bar" style={barStyle}>
+        {(count > 0 || isFilterActive) && (
+          <button
+            type="button"
+            onClick={() => setIsFilterActive((prev) => !prev)}
+            aria-pressed={isFilterActive}
+            style={{
+              background: isFilterActive ? 'var(--accent, #e60012)' : 'var(--bg-card-hover)',
+              color: isFilterActive ? 'var(--on-accent, #fff)' : 'var(--text-primary)',
+              border: 'none',
+              padding: '6px 14px',
+              borderRadius: '20px',
+              fontSize: '0.85rem',
+              fontWeight: 500,
+              cursor: 'pointer',
+            }}
+          >
+            {isFilterActive ? t.proofing.showAll : t.proofing.selected(count)}
+          </button>
+        )}
+        <span
+          role="status"
+          aria-live="polite"
+          style={{
+            fontSize: '0.8rem',
+            // A failed save is an error, not a brand mark: the accent can be
+            // white (minimal) or pale, and the dimming would halve it again.
+            ...(session.saveState === 'error' ? { color: 'var(--error)' } : { opacity: 0.75 }),
+          }}
+        >
+          {session.submitted ? p.locked : status}
+        </span>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: 'inherit',
+            fontSize: '0.85rem',
+            fontWeight: 600,
+            cursor: 'pointer',
+            textDecoration: 'underline',
+          }}
+        >
+          {session.submitted ? p.modalTitle(count) : p.review}
+        </button>
+      </div>
+
+      {open && (
+        <div
+          className="proofing-modal-overlay"
+          onClick={close}
+          style={{
+            position: 'fixed',
+            inset: 0,
+            backgroundColor: 'rgba(0,0,0,0.7)',
+            backdropFilter: 'blur(4px)',
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '1rem',
+          }}
+        >
+          <div
+            className="proofing-modal-card"
+            ref={cardRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="proof-session-title"
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              background: 'var(--bg-card, #1e1e1e)',
+              color: 'var(--text-primary, #ffffff)',
+              borderRadius: 'var(--radius-md, 12px)',
+              border: '1px solid var(--border-subtle, rgba(255,255,255,0.1))',
+              padding: '1.5rem',
+              maxWidth: '480px',
+              width: '100%',
+              boxShadow: '0 20px 40px rgba(0,0,0,0.5)',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: '1rem',
+              }}
+            >
+              <h3
+                id="proof-session-title"
+                style={{ margin: 0, fontSize: '1.2rem', fontWeight: 600 }}
+              >
+                {p.modalTitle(count)}
+              </h3>
+              <button
+                type="button"
+                onClick={close}
+                aria-label={t.proofing.closeModal}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'currentColor',
+                  fontSize: '1.5rem',
+                  cursor: 'pointer',
+                  opacity: 0.7,
+                  lineHeight: 1,
+                }}
+              >
+                &times;
+              </button>
+            </div>
+
+            <p style={{ fontSize: '0.9rem', opacity: 0.85, marginBottom: '1rem' }}>
+              {session.submitted ? p.submitted : count === 0 ? p.empty : p.confirmSubmit(count)}
+            </p>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+              {!session.submitted && (
+                <button
+                  type="button"
+                  onClick={handleSubmit}
+                  disabled={count === 0 || submitting}
+                  style={{
+                    ...primaryButton,
+                    cursor: count === 0 || submitting ? 'not-allowed' : 'pointer',
+                    opacity: count === 0 || submitting ? 0.6 : 1,
+                  }}
+                >
+                  {submitting ? p.submitting : p.submit}
+                </button>
+              )}
+
+              {canDownload && count > 0 && selectionSaved && (
+                <a
+                  href={downloadHref('selection')}
+                  onClick={session.countDownload}
+                  style={secondaryButton}
+                >
+                  {p.downloadSelection}
+                </a>
+              )}
+              {canDownload && session.download === 'album' && (
+                <a
+                  href={downloadHref('album')}
+                  onClick={session.countDownload}
+                  style={secondaryButton}
+                >
+                  {p.downloadAll}
+                </a>
+              )}
+              {session.download !== 'none' && downloadsLeft !== null && (
+                <p style={{ fontSize: '0.8rem', opacity: 0.7, margin: 0, textAlign: 'center' }}>
+                  {downloadsLeft > 0 ? p.downloadsLeft(downloadsLeft) : t.download.limitReached}
+                </p>
+              )}
+              {session.saveState === 'error' && (
+                <p role="alert" style={{ fontSize: '0.85rem', margin: 0 }}>
+                  {p.saveFailed}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/components/ProofingContext.tsx b/components/ProofingContext.tsx
index a9160e0..2a5738a 100644
--- a/components/ProofingContext.tsx
+++ b/components/ProofingContext.tsx
@@ -1,10 +1,52 @@
 'use client';
 
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { encodeProofBitmask, decodeProofBitmask } from '@/lib/proofing';
 import { useDictionary } from './I18nProvider';
+import { ProofingContext } from './useProofing';
 
-interface ProofingContextType {
+export { useProofing } from './useProofing';
+
+/** What the server tells a client proofing page about its session. */
+export interface ProofSessionInit {
+  /** The link token — the capability for this session's API routes. */
+  token: string;
+  /** Asset tokens already selected, from the server. */
+  selected: string[];
+  submitted: boolean;
+  download: 'none' | 'selection' | 'album';
+  /** ZIP downloads left, or null for unlimited. */
+  downloadsRemaining: number | null;
+}
+
+export type ProofSaveState = 'idle' | 'saving' | 'saved' | 'error';
+
+/**
+ * Session mode: a client proofing link (/proof/<token>). The selection lives on
+ * the server instead of localStorage and the URL, and can be submitted once.
+ */
+export interface ProofSessionState {
+  saveState: ProofSaveState;
+  /**
+   * Hearts the server has not confirmed yet — including those still waiting
+   * out the autosave debounce, while `saveState` reads 'idle' or 'saved'.
+   */
+  unsaved: boolean;
+  submitted: boolean;
+  /** Save anything pending, then lock the selection. Resolves to success. */
+  submit: () => Promise<boolean>;
+  download: ProofSessionInit['download'];
+  downloadsRemaining: number | null;
+  /** Count a download that was just started against `downloadsRemaining`. */
+  countDownload: () => void;
+  /** The ZIP route for this session. */
+  archiveUrl: string;
+}
+
+/** How long the selection may sit unsaved after the last heart. */
+const SAVE_DEBOUNCE_MS = 600;
+
+export interface ProofingContextType {
   favorites: Set<string>;
   toggleFavorite: (token: string) => void;
   isFavorite: (token: string) => boolean;
@@ -18,27 +60,68 @@ interface ProofingContextType {
   /** Selected asset tokens in album order — the payload for a ZIP download. */
   getSelectedTokens: () => string[];
   allowMailto: boolean;
+  /**
+   * `encodeEmail()` of the "email to photographer" recipient, when one is
+   * configured (#736). The modal decodes it in the browser; without it the
+   * button is hidden.
+   */
+  encodedMailto?: string;
   /** The ZIP endpoint when the album offers downloads; undefined otherwise. */
   downloadArchiveUrl?: string;
+  /** Present on a client proofing link only. */
+  session?: ProofSessionState;
 }
 
-const ProofingContext = createContext<ProofingContextType | null>(null);
-
 export function ProofingProvider({
   children,
   albumTokens = [],
   albumName = 'Gallery',
   allowMailto = true,
+  encodedMailto,
   downloadArchiveUrl,
+  session: sessionInit,
 }: {
   children: React.ReactNode;
   albumTokens?: string[];
   albumName?: string;
   allowMailto?: boolean;
+  encodedMailto?: string;
   downloadArchiveUrl?: string;
+  session?: ProofSessionInit;
 }) {
   const t = useDictionary();
-  const [favorites, setFavorites] = useState<Set<string>>(new Set());
+  // A session's selection comes from the server, so it can be rendered on the
+  // first pass; the anonymous mode hydrates from the browser in an effect below.
+  const [favorites, setFavorites] = useState<Set<string>>(
+    () => new Set(sessionInit?.selected ?? []),
+  );
+  const [saveState, setSaveState] = useState<ProofSaveState>('idle');
+  const [submitted, setSubmitted] = useState(Boolean(sessionInit?.submitted));
+  /**
+   * Edits made vs. edits the server has confirmed. A counter rather than a
+   * dirty flag, so a heart clicked while a save is in flight is not marked
+   * saved by that earlier request.
+   */
+  const [edits, setEdits] = useState(0);
+  const editsRef = useRef(0);
+  const savedEdits = useRef(0);
+  /** `savedEdits` for rendering: what makes `unsaved` clear once a save lands. */
+  const [savedEditsShown, setSavedEditsShown] = useState(0);
+  /**
+   * Starts from the page load and counts down with each download started here,
+   * so the dialog does not keep offering a download the limit has used up.
+   */
+  const [downloadsRemaining, setDownloadsRemaining] = useState(
+    sessionInit?.downloadsRemaining ?? null,
+  );
+  useEffect(() => {
+    editsRef.current = edits;
+  }, [edits]);
+  /** The selection as the save callbacks see it; kept current by the effect below. */
+  const favoritesRef = useRef(favorites);
+  useEffect(() => {
+    favoritesRef.current = favorites;
+  }, [favorites]);
   const [isFilterActive, setIsFilterActive] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -48,6 +131,7 @@ export function ProofingProvider({
   // an effect: both sources are browser-only, so reading them during render would
   // break SSR and produce a hydration mismatch.
   useEffect(() => {
+    if (sessionInit) return;
     try {
       const saved = localStorage.getItem(storageKey);
       const initialSet = new Set<string>();
@@ -72,14 +156,103 @@ export function ProofingProvider({
 
       // Mount-time hydration from an external store, not a render cascade:
       // the state lands in the same commit and never re-triggers this effect.
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setFavorites(initialSet);
     } catch (e) {
       console.error('Failed to load favorites', e);
     }
-  }, [storageKey, albumTokens]);
+  }, [storageKey, albumTokens, sessionInit]);
+
+  const sessionToken = sessionInit?.token;
+
+  /** Send the current selection, in album order. Resolves to success. */
+  const saveNow = useCallback(async (): Promise<boolean> => {
+    if (!sessionToken) return true;
+    const version = editsRef.current;
+    setSaveState('saving');
+    const selected = albumTokens.filter((token) => favoritesRef.current.has(token));
+    try {
+      const res = await fetch(`/api/proof/${encodeURIComponent(sessionToken)}/selection`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ assets: selected }),
+      });
+      if (res.status === 409) {
+        // Submitted from another tab or device: show the locked state here too.
+        setSubmitted(true);
+        setSaveState('saved');
+        return false;
+      }
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      savedEdits.current = Math.max(savedEdits.current, version);
+      setSavedEditsShown(savedEdits.current);
+      // A heart clicked while this request was in flight has its own save queued.
+      if (editsRef.current <= savedEdits.current) setSaveState('saved');
+      return true;
+    } catch {
+      setSaveState('error');
+      return false;
+    }
+  }, [sessionToken, albumTokens]);
+
+  // Debounced autosave: a burst of hearts becomes one request.
+  useEffect(() => {
+    if (!sessionToken || edits <= savedEdits.current) return;
+    const timer = setTimeout(() => void saveNow(), SAVE_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [edits, sessionToken, saveNow]);
+
+  // Leaving with an unsaved heart: send it anyway. keepalive lets the request
+  // outlive the page, which a normal fetch in `pagehide` would not.
+  useEffect(() => {
+    if (!sessionToken) return;
+    const flush = () => {
+      if (editsRef.current <= savedEdits.current) return;
+      const selected = albumTokens.filter((token) => favoritesRef.current.has(token));
+      void fetch(`/api/proof/${encodeURIComponent(sessionToken)}/selection`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ assets: selected }),
+        keepalive: true,
+      }).catch(() => {});
+    };
+    window.addEventListener('pagehide', flush);
+    return () => window.removeEventListener('pagehide', flush);
+  }, [sessionToken, albumTokens]);
+
+  const submit = useCallback(async (): Promise<boolean> => {
+    if (!sessionToken) return false;
+    if (editsRef.current > savedEdits.current && !(await saveNow())) return false;
+    try {
+      const res = await fetch(`/api/proof/${encodeURIComponent(sessionToken)}/submit`, {
+        method: 'POST',
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      setSubmitted(true);
+      return true;
+    } catch {
+      setSaveState('error');
+      return false;
+    }
+  }, [sessionToken, saveNow]);
+
+  /** A session edit: counted for autosave, refused once submitted. */
+  const editSelection = (update: (prev: Set<string>) => Set<string>) => {
+    // A submitted selection is the photographer's to reopen, not the client's.
+    if (submitted) return;
+    setEdits((n) => n + 1);
+    setFavorites(update);
+  };
 
   const toggleFavorite = (token: string) => {
+    if (sessionInit) {
+      editSelection((prev) => {
+        const next = new Set(prev);
+        if (next.has(token)) next.delete(token);
+        else next.add(token);
+        return next;
+      });
+      return;
+    }
     setFavorites((prev) => {
       const next = new Set(prev);
       if (next.has(token)) {
@@ -99,6 +272,10 @@ export function ProofingProvider({
   const isFavorite = (token: string) => favorites.has(token);
 
   const clearFavorites = () => {
+    if (sessionInit) {
+      editSelection(() => new Set());
+      return;
+    }
     setFavorites(new Set());
     try {
       localStorage.removeItem(storageKey);
@@ -159,15 +336,24 @@ export function ProofingProvider({
         getFormattedList,
         getSelectedTokens,
         allowMailto,
+        encodedMailto,
         downloadArchiveUrl,
+        session: sessionInit
+          ? {
+              saveState,
+              unsaved: edits > savedEditsShown,
+              submitted,
+              submit,
+              download: sessionInit.download,
+              downloadsRemaining,
+              countDownload: () =>
+                setDownloadsRemaining((n) => (n === null ? null : Math.max(0, n - 1))),
+              archiveUrl: `/api/proof/${encodeURIComponent(sessionInit.token)}/archive`,
+            }
+          : undefined,
       }}
     >
       {children}
     </ProofingContext.Provider>
   );
 }
-
-export function useProofing() {
-  const context = useContext(ProofingContext);
-  return context;
-}
diff --git a/components/ProofingLazy.tsx b/components/ProofingLazy.tsx
new file mode 100644
index 0000000..b701080
--- /dev/null
+++ b/components/ProofingLazy.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+/**
+ * The proofing provider, modal and session controls, loaded on demand.
+ *
+ * Proofing is off on most album pages, and these three are only rendered when
+ * it is on — yet imported statically they shipped in every album, essay and
+ * journal bundle. Through `next/dynamic` they become their own chunk: still
+ * rendered on the server (`ssr` stays on, so the hearts and the session bar
+ * are in the HTML as before) and preloaded by the page that renders them.
+ *
+ * All three come from `ProofingParts.ts`, so they arrive as one chunk.
+ * `useProofing()` itself lives in `useProofing.ts` so the grid and the
+ * lightbox can ask for it without pulling the provider back in.
+ */
+
+export const ProofingProvider = dynamic(() =>
+  import('./ProofingParts').then((m) => ({ default: m.ProofingProvider })),
+);
+
+export const ProofingModal = dynamic(() =>
+  import('./ProofingParts').then((m) => ({ default: m.ProofingModal })),
+);
+
+export const ProofSessionControls = dynamic(() =>
+  import('./ProofingParts').then((m) => ({ default: m.ProofSessionControls })),
+);
diff --git a/components/ProofingModal.tsx b/components/ProofingModal.tsx
index f4105e4..5f350bf 100644
--- a/components/ProofingModal.tsx
+++ b/components/ProofingModal.tsx
@@ -5,6 +5,7 @@ import { useProofing } from './ProofingContext';
 import { IconCheck, IconCopy, IconLink } from './Icons';
 import { useDictionary } from './I18nProvider';
 import { useModalDialog } from '@/hooks/useModalDialog';
+import { decodeEmail } from '@/lib/emailObfuscation';
 
 export function ProofingModal() {
   const t = useDictionary();
@@ -27,22 +28,28 @@ export function ProofingModal() {
   if (!proofing || !proofing.isModalOpen) return null;
 
   const {
-    favorites,
     setIsModalOpen,
     getProofingUrl,
     getFormattedList,
     getSelectedTokens,
     clearFavorites,
     allowMailto,
+    encodedMailto,
     downloadArchiveUrl,
   } = proofing;
 
-  // What the archive would actually receive. Gating on this rather than on
-  // `favorites.size` means a favourite left over from another album (they share
-  // the provider's storage key when no `albumName` is passed) can never light up
-  // a button that would post an empty selection and 404.
+  // What the archive would actually receive, and the only count shown here.
+  // `favorites.size` also counts a favourite left over from another album (they
+  // share a storage key when their names slug alike) or a photo since removed
+  // from this one, so it would light up a button that posts an empty selection
+  // and 404s, and put the wrong number in the title and the email subject.
   const selectedCount = getSelectedTokens().length;
 
+  // Decoded in the browser only: the address never travels in the clear. The
+  // email button is hidden without a recipient, so a mailto is never built with
+  // an empty To: — which opened a compose that went nowhere (#736).
+  const mailtoRecipient = encodedMailto ? decodeEmail(encodedMailto) : '';
+
   /** Copy to the clipboard, or show the text to copy by hand where it is unavailable. */
   const copy = (kind: 'link' | 'list', text: string) => {
     if (!navigator.clipboard) {
@@ -64,9 +71,12 @@ export function ProofingModal() {
   const handleCopyList = () => copy('list', getFormattedList());
 
   const handleMailto = () => {
-    const subject = encodeURIComponent(t.proofing.mailSubject(favorites.size));
+    const subject = encodeURIComponent(t.proofing.mailSubject(getSelectedTokens().length));
     const body = encodeURIComponent(t.proofing.mailBody(getFormattedList(), getProofingUrl()));
-    window.location.href = `mailto:?subject=${subject}&body=${body}`;
+    // Percent-encode the address, keeping '@' readable, so a value from the
+    // settings cannot smuggle its own `?bcc=`/`&…` header fields into the draft.
+    const to = encodeURIComponent(mailtoRecipient).replace(/%40/g, '@');
+    window.location.href = `mailto:${to}?subject=${subject}&body=${body}`;
   };
 
   const handleDownloadSelection = () => {
@@ -143,7 +153,7 @@ export function ProofingModal() {
           }}
         >
           <h3 id="proofing-modal-title" style={{ margin: 0, fontSize: '1.2rem', fontWeight: 600 }}>
-            {t.proofing.modalTitle(favorites.size)}
+            {t.proofing.modalTitle(selectedCount)}
           </h3>
           <button
             type="button"
@@ -164,7 +174,7 @@ export function ProofingModal() {
         </div>
 
         <p style={{ fontSize: '0.9rem', opacity: 0.8, marginBottom: '1rem' }}>
-          {t.proofing.intro(favorites.size)}
+          {t.proofing.intro(selectedCount)}
         </p>
 
         <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
@@ -219,13 +229,21 @@ export function ProofingModal() {
               gap: '0.5rem',
               padding: '0.75rem 1rem',
               borderRadius: 'var(--radius-sm, 6px)',
+              // Secondary matches the other buttons below: a white-alpha fill
+              // and border vanished on the light theme's white card. Primary
+              // text takes --on-accent, which the layout computes from the
+              // accent; a fixed white was invisible on minimal's white accent.
               ...(downloadArchiveUrl
                 ? {
-                    background: 'rgba(255,255,255,0.1)',
+                    background: 'var(--bg-card-hover)',
                     color: 'inherit',
-                    border: '1px solid rgba(255,255,255,0.15)',
+                    border: '1px solid var(--border-subtle)',
                   }
-                : { background: 'var(--accent, #e60012)', color: '#fff', border: 'none' }),
+                : {
+                    background: 'var(--accent, #e60012)',
+                    color: 'var(--on-accent, #fff)',
+                    border: 'none',
+                  }),
               fontWeight: 500,
               cursor: 'pointer',
             }}
@@ -296,7 +314,7 @@ export function ProofingModal() {
             </div>
           )}
 
-          {allowMailto && (
+          {allowMailto && mailtoRecipient && (
             <button
               type="button"
               onClick={handleMailto}
@@ -330,10 +348,12 @@ export function ProofingModal() {
               marginTop: '0.5rem',
               background: 'none',
               border: 'none',
-              color: '#ff4d4f',
+              // Per-mode token, at full strength: the fixed red at 80% opacity it
+              // replaces measured 2.7:1 on the light card and under 4:1 on the
+              // dark ones.
+              color: 'var(--error)',
               fontSize: '0.85rem',
               cursor: 'pointer',
-              opacity: 0.8,
             }}
           >
             {t.proofing.clearSelection}
diff --git a/components/ProofingParts.ts b/components/ProofingParts.ts
new file mode 100644
index 0000000..9c8fd86
--- /dev/null
+++ b/components/ProofingParts.ts
@@ -0,0 +1,11 @@
+'use client';
+
+/**
+ * Everything `ProofingLazy.tsx` loads, behind one import so the three share a
+ * single chunk — a page with proofing on needs the provider and a control
+ * together, and separate imports would each carry their own copy of the
+ * provider.
+ */
+export { ProofingProvider } from './ProofingContext';
+export { ProofingModal } from './ProofingModal';
+export { ProofSessionControls } from './ProofSessionControls';
diff --git a/components/SubpageNav.tsx b/components/SubpageNav.tsx
index 43525ef..d0a376e 100644
--- a/components/SubpageNav.tsx
+++ b/components/SubpageNav.tsx
@@ -1,38 +1,28 @@
 /**
- * SubpageNav — server component that renders navigation links
- * for all subpages and standalone albums in the header.
+ * SubpageNav — server component that renders the header's navigation links
+ * after Home: subpages and content pages, standalone albums, Journal, About,
+ * Map (`lib/siteNav.ts`, shared with the home page hero), then any external
+ * links.
+ *
+ * Subpages and content pages (#722) share one order, the order of the
+ * `subpages:` list in gallery.yaml, where a page appears as `- page: <slug>`.
  */
 
 import { NavLink } from './NavLink';
-import { immich } from '@/lib/immich';
 import { getConfig } from '@/lib/config';
-import { listJournalEntries } from '@/lib/admin/journal-service';
-import { getServerDictionary } from '@/lib/i18n/server';
+import { loadSiteNav } from '@/lib/siteNav.server';
 
 export async function SubpageNav() {
-  const [subpages, standaloneAlbums, journalEntries] = await Promise.all([
-    immich.getSubpages(),
-    immich.getStandaloneAlbums(),
-    listJournalEntries().catch(() => []),
-  ]);
+  const links = await loadSiteNav();
   // EXPERIMENTAL: external nav links from settings.yaml, appended after the
   // internal entries. Sanitised to http(s) in getConfig().
   const navLinks = getConfig().navLinks;
-  const t = getServerDictionary();
-
-  const hasPublicJournal = journalEntries.some((e) => !e.frontmatter.draft);
 
   return (
     <>
-      {subpages.map((sp) => (
-        <NavLink key={sp.slug} href={`/${sp.slug}`}>
-          {sp.name}
-        </NavLink>
-      ))}
-      {hasPublicJournal && <NavLink href="/journal">{t.nav.journal}</NavLink>}
-      {standaloneAlbums.map((album) => (
-        <NavLink key={album.id} href={`/${album.slug}`}>
-          {album.albumName}
+      {links.map((item) => (
+        <NavLink key={item.key} href={item.href}>
+          {item.label}
         </NavLink>
       ))}
       {navLinks.map((link) => (
diff --git a/components/__tests__/ContactForm.test.tsx b/components/__tests__/ContactForm.test.tsx
new file mode 100644
index 0000000..c653286
--- /dev/null
+++ b/components/__tests__/ContactForm.test.tsx
@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import ContactForm from '../ContactForm';
+import { validateContact } from '@/lib/contact';
+
+/**
+ * The fill-time check compares `startedAt` against the server's clock. When
+ * the form stamped it with the visitor's clock, a device running a few
+ * minutes fast made every message look "sent before the form existed": the
+ * route answered `ok` (as it does for bots) and dropped the message, and the
+ * visitor saw the thank-you page.
+ */
+
+const SERVER_RENDERED_AT = 1_800_000_000_000;
+const MINUTE = 60_000;
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+async function submitWithClientClock(clientNow: number) {
+  vi.useFakeTimers({ now: clientNow, toFake: ['Date'] });
+  const fetchMock = vi.fn(async (_url: string, _init: RequestInit) => Response.json({ ok: true }));
+  vi.stubGlobal('fetch', fetchMock);
+
+  render(<ContactForm retentionDays={30} renderedAt={SERVER_RENDERED_AT} />);
+  fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Ada' } });
+  fireEvent.change(screen.getByLabelText('Email'), { target: { value: 'ada@example.com' } });
+  fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'Hello there' } });
+  fireEvent.submit(screen.getByRole('button', { name: 'Send message' }).closest('form')!);
+
+  await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1));
+  return JSON.parse(fetchMock.mock.calls[0][1].body as string) as Record<string, unknown>;
+}
+
+describe('ContactForm fill-time stamp', () => {
+  it('survives a visitor clock running ahead of the server', async () => {
+    const body = await submitWithClientClock(SERVER_RENDERED_AT + 10 * MINUTE);
+    // The visitor took two minutes, measured on the server's clock.
+    expect(validateContact(body, SERVER_RENDERED_AT + 2 * MINUTE).ok).toBe(true);
+  });
+
+  it('survives a visitor clock running a day behind the server', async () => {
+    const body = await submitWithClientClock(SERVER_RENDERED_AT - 25 * 60 * MINUTE);
+    expect(validateContact(body, SERVER_RENDERED_AT + 2 * MINUTE).ok).toBe(true);
+  });
+
+  it('still treats an instant submission as spam', async () => {
+    const body = await submitWithClientClock(SERVER_RENDERED_AT);
+    expect(validateContact(body, SERVER_RENDERED_AT + 500)).toEqual({ ok: false, reason: 'spam' });
+  });
+});
diff --git a/components/__tests__/EssayMapLazy.test.tsx b/components/__tests__/EssayMapLazy.test.tsx
new file mode 100644
index 0000000..92809c0
--- /dev/null
+++ b/components/__tests__/EssayMapLazy.test.tsx
@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeAll, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { parseJournalMarkdown } from '@/lib/journal';
+import { escapeHtml } from '@/lib/escapeHtml';
+
+/**
+ * Most essays have no map block, yet a static import of LeafletMap put its
+ * wrapper and Leaflet's render-blocking stylesheet on every album, subpage and
+ * journal page. EssayView now loads it only when a map block renders.
+ */
+
+const leafletModuleLoaded = vi.fn();
+const mapProps = vi.fn();
+
+vi.mock('@/components/LeafletMap', () => {
+  leafletModuleLoaded();
+  return {
+    LeafletMap: (props: { className?: string; markers: unknown[]; line?: boolean }) => {
+      mapProps(props);
+      return <div className={props.className} data-testid="leaflet-map" />;
+    },
+  };
+});
+
+beforeAll(() => {
+  // FadeIn reveals at once under reduced motion instead of needing IntersectionObserver.
+  window.matchMedia = ((query: string) => ({
+    matches: query.includes('reduce'),
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  })) as unknown as typeof window.matchMedia;
+});
+
+afterEach(() => cleanup());
+
+describe('EssayView map block', () => {
+  it('does not load the map module just by being imported', async () => {
+    await import('@/app/[...path]/EssayView');
+    expect(leafletModuleLoaded).not.toHaveBeenCalled();
+  });
+
+  it('renders the map on demand with the same markers and escaped popups', async () => {
+    const { EssayView } = await import('@/app/[...path]/EssayView');
+    const essay = parseJournalMarkdown(
+      [
+        '---',
+        'title: "Trip"',
+        '---',
+        '',
+        '::map The route',
+        "Berlin's <b>: 52.52, 13.405",
+        '48.137, 11.575',
+      ].join('\n'),
+    );
+    const block = essay.blocks.find((b) => b.type === 'map');
+    const label =
+      block?.type === 'map' && block.items[0].kind === 'point' ? block.items[0].label : '';
+    expect(label).toBeTruthy();
+
+    const { container } = render(<EssayView essay={essay} assets={[]} />);
+
+    // Same container the eager version rendered, before and after the load.
+    expect(container.querySelector('.essay-map')).not.toBeNull();
+    await screen.findByTestId('leaflet-map');
+    expect(leafletModuleLoaded).toHaveBeenCalledTimes(1);
+    expect(container.querySelectorAll('.essay-map')).toHaveLength(1);
+
+    const props = mapProps.mock.calls.at(-1)![0];
+    expect(props.className).toBe('essay-map');
+    expect(props.line).toBe(true);
+    expect(props.markers).toHaveLength(2);
+    expect(props.markers[0]).toMatchObject({ lat: 52.52, lng: 13.405 });
+    expect(props.markers[0].popupHtml).toContain(`>${escapeHtml(label!)}</h3>`);
+    expect(props.markers[0].popupHtml).not.toContain('<b>');
+    expect(props.markers[1].popupHtml).toBeUndefined();
+  });
+});
diff --git a/components/__tests__/HeroCarousel.test.tsx b/components/__tests__/HeroCarousel.test.tsx
new file mode 100644
index 0000000..0cbe1d4
--- /dev/null
+++ b/components/__tests__/HeroCarousel.test.tsx
@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, act } from '@testing-library/react';
+import { HeroCarousel, INTERVAL_MS } from '../HeroCarousel';
+
+vi.mock('next/image', () => ({
+  default: ({ className, src }: { className?: string; src: string }) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img alt="" className={className} src={src} />
+  ),
+}));
+
+const images = [{ src: '/a' }, { src: '/b' }, { src: '/c' }];
+
+function mockReducedMotion(reduce: boolean) {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches: reduce && query.includes('reduce'),
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }));
+}
+
+const activeSrc = (container: HTMLElement) =>
+  container.querySelector('.hero__carousel-image--active')?.getAttribute('src');
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+describe('HeroCarousel (#696)', () => {
+  it('advances on its own by default', () => {
+    mockReducedMotion(false);
+    const { container } = render(<HeroCarousel images={images} />);
+    expect(activeSrc(container)).toBe('/a');
+    act(() => vi.advanceTimersByTime(INTERVAL_MS));
+    expect(activeSrc(container)).toBe('/b');
+  });
+
+  it('does not advance under prefers-reduced-motion', () => {
+    mockReducedMotion(true);
+    const { container } = render(<HeroCarousel images={images} />);
+    act(() => vi.advanceTimersByTime(INTERVAL_MS * 3));
+    expect(activeSrc(container)).toBe('/a');
+    expect(screen.getByRole('button', { name: 'Play slideshow' })).toBeTruthy();
+  });
+
+  it('stops and restarts with the pause control', () => {
+    mockReducedMotion(false);
+    const { container } = render(<HeroCarousel images={images} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Pause slideshow' }));
+    act(() => vi.advanceTimersByTime(INTERVAL_MS * 2));
+    expect(activeSrc(container)).toBe('/a');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Play slideshow' }));
+    act(() => vi.advanceTimersByTime(INTERVAL_MS));
+    expect(activeSrc(container)).toBe('/b');
+  });
+
+  it('shows no control for a single image', () => {
+    mockReducedMotion(false);
+    render(<HeroCarousel images={[images[0]]} />);
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+});
diff --git a/components/__tests__/LeafletMapLabels.test.tsx b/components/__tests__/LeafletMapLabels.test.tsx
new file mode 100644
index 0000000..6b3a742
--- /dev/null
+++ b/components/__tests__/LeafletMapLabels.test.tsx
@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup, waitFor } from '@testing-library/react';
+import { I18nProvider } from '@/components/I18nProvider';
+import { LeafletMap, localizedLeafletPrefix } from '@/components/LeafletMap';
+import { de } from '@/lib/i18n/locales/de';
+
+/**
+ * Leaflet ships English control labels: "Zoom in" / "Zoom out" on the zoom
+ * buttons (also their aria-label) and "A JavaScript library for interactive
+ * maps" on the credit link. On a German site they now come from the
+ * dictionary like every other visitor-facing string.
+ */
+
+afterEach(() => cleanup());
+
+describe('LeafletMap control labels', () => {
+  it('takes the zoom button and credit titles from the dictionary', async () => {
+    const { container } = render(
+      <I18nProvider locale="de">
+        <LeafletMap markers={[]} />
+      </I18nProvider>,
+    );
+
+    const zoomIn = await waitFor(() => {
+      const el = container.querySelector('.leaflet-control-zoom-in');
+      if (!el) throw new Error('map not initialised yet');
+      return el;
+    });
+    const zoomOut = container.querySelector('.leaflet-control-zoom-out');
+
+    expect(zoomIn.getAttribute('title')).toBe(de.map.zoomIn);
+    expect(zoomIn.getAttribute('aria-label')).toBe(de.map.zoomIn);
+    expect(zoomOut?.getAttribute('title')).toBe(de.map.zoomOut);
+
+    const credit = container.querySelector('.leaflet-control-attribution a[href*="leafletjs"]');
+    expect(credit?.getAttribute('title')).toBe(de.map.leafletTitle);
+    expect(container.innerHTML).not.toContain('Zoom in');
+    expect(container.innerHTML).not.toContain('A JavaScript library');
+  });
+});
+
+describe('localizedLeafletPrefix', () => {
+  it('swaps only the title and escapes it', () => {
+    const prefix = '<a href="https://leafletjs.com" title="English">Leaflet</a>';
+    expect(localizedLeafletPrefix(prefix, 'Karten "&" mehr')).toBe(
+      '<a href="https://leafletjs.com" title="Karten &quot;&amp;&quot; mehr">Leaflet</a>',
+    );
+  });
+});
diff --git a/components/__tests__/MobileNav.test.tsx b/components/__tests__/MobileNav.test.tsx
new file mode 100644
index 0000000..361e12d
--- /dev/null
+++ b/components/__tests__/MobileNav.test.tsx
@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, act } from '@testing-library/react';
+import { MobileNav } from '../MobileNav';
+
+vi.mock('next/navigation', () => ({ usePathname: () => '/' }));
+
+// jsdom lays nothing out, so the header's geometry is stubbed: `navWidth` is
+// the space the header offers, `rowWidth` what the links need in one row.
+let navWidth = 1440;
+let rowWidth = 900;
+let phone = false;
+let resize: (() => void) | null = null;
+
+beforeEach(() => {
+  navWidth = 1440;
+  rowWidth = 900;
+  phone = false;
+  vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function (
+    this: HTMLElement,
+  ) {
+    return this.tagName === 'NAV' ? navWidth : 0;
+  });
+  vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockImplementation(function (
+    this: HTMLElement,
+  ) {
+    return this.tagName === 'NAV' ? Math.max(rowWidth, navWidth) : 0;
+  });
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      constructor(cb: () => void) {
+        resize = cb;
+      }
+      observe() {}
+      disconnect() {}
+    },
+  );
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    media: query,
+    get matches() {
+      return phone;
+    },
+    addEventListener() {},
+    removeEventListener() {},
+  }));
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  resize = null;
+});
+
+function header() {
+  render(
+    <nav>
+      <MobileNav>
+        <a href="#home">Home</a>
+        <a href="#about">About</a>
+      </MobileNav>
+    </nav>,
+  );
+  return {
+    button: screen.getByRole('button', { name: 'Open menu' }),
+    panel: document.getElementById('header-nav-panel')!,
+  };
+}
+
+describe('MobileNav collapse (QA P-5)', () => {
+  it('keeps the links in the row while they fit', () => {
+    const { button, panel } = header();
+    expect(button.dataset.collapsed).toBe('false');
+    expect(panel.dataset.collapsed).toBe('false');
+  });
+
+  it('collapses into the menu when the row is wider than the header', () => {
+    navWidth = 820;
+    rowWidth = 1080;
+    const { button, panel } = header();
+    expect(button.dataset.collapsed).toBe('true');
+    expect(panel.dataset.collapsed).toBe('true');
+  });
+
+  it('follows the header width in both directions', () => {
+    const { button } = header();
+    expect(button.dataset.collapsed).toBe('false');
+
+    navWidth = 820;
+    rowWidth = 1080;
+    act(() => resize?.());
+    expect(button.dataset.collapsed).toBe('true');
+
+    // Collapsed, the row is not laid out and cannot be measured; the width
+    // read before collapsing decides when it fits again.
+    navWidth = 1440;
+    act(() => resize?.());
+    expect(button.dataset.collapsed).toBe('false');
+  });
+
+  it('closes an open panel when the links return to the row', () => {
+    navWidth = 820;
+    rowWidth = 1080;
+    const { button } = header();
+    fireEvent.click(button);
+    expect(button.getAttribute('aria-expanded')).toBe('true');
+
+    navWidth = 1440;
+    act(() => resize?.());
+    expect(button.dataset.collapsed).toBe('false');
+    expect(button.getAttribute('aria-expanded')).toBe('false');
+    expect(document.querySelector('.header__nav-backdrop')).toBeNull();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('always collapses on a phone, whatever the row measures', () => {
+    phone = true;
+    rowWidth = 100;
+    const { button } = header();
+    expect(button.dataset.collapsed).toBe('true');
+  });
+});
diff --git a/components/__tests__/PasswordGate.test.tsx b/components/__tests__/PasswordGate.test.tsx
new file mode 100644
index 0000000..ccde89a
--- /dev/null
+++ b/components/__tests__/PasswordGate.test.tsx
@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import PasswordGate from '../PasswordGate';
+
+/**
+ * The gate treated every non-ok answer as a wrong password. After ten attempts
+ * the rate limit answers 429 — and the visitor who finally typed the right
+ * password was told it was wrong, and had it wiped from the field.
+ */
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+async function submit(response: Response, type?: 'journal') {
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async () => response),
+  );
+  render(<PasswordGate slug="polen" title="Polen" type={type} />);
+  const input = screen.getByLabelText('Enter password') as HTMLInputElement;
+  fireEvent.change(input, { target: { value: 'right-password' } });
+  fireEvent.submit(input.closest('form')!);
+  const alert = await screen.findByRole('alert');
+  await waitFor(() => expect(input.disabled).toBe(false));
+  return { alert, input };
+}
+
+describe('PasswordGate refusals', () => {
+  it('says a wrong password is wrong, and clears the field', async () => {
+    const { alert, input } = await submit(new Response(null, { status: 401 }));
+    expect(alert.textContent).toBe('Incorrect password. Please try again.');
+    expect(input.value).toBe('');
+  });
+
+  it('says a rate limit is a rate limit, with the wait, and keeps the password', async () => {
+    const { alert, input } = await submit(
+      new Response(null, { status: 429, headers: { 'Retry-After': '42' } }),
+    );
+    expect(alert.textContent).toBe('Too many attempts. Please try again in 42 seconds.');
+    expect(alert.textContent).not.toContain('Incorrect');
+    expect(input.value).toBe('right-password');
+  });
+
+  it('copes with a rate limit that names no wait', async () => {
+    const { alert } = await submit(new Response(null, { status: 429 }));
+    expect(alert.textContent).toBe('Too many attempts. Please try again later.');
+  });
+
+  it('reports a server failure as a failure, not a wrong password', async () => {
+    const { alert, input } = await submit(new Response(null, { status: 500 }));
+    expect(alert.textContent).toBe('Unable to verify password. Please try again later.');
+    expect(input.value).toBe('right-password');
+  });
+});
+
+describe('PasswordGate subtitle', () => {
+  it('calls a journal entry a journal entry, not a gallery', () => {
+    render(<PasswordGate slug="tagebuch" title="Journal" type="journal" />);
+    expect(screen.getByText('This journal entry is password-protected.')).toBeTruthy();
+    expect(screen.queryByText('This gallery is password-protected.')).toBeNull();
+  });
+});
diff --git a/components/__tests__/ProofSessionControls.test.tsx b/components/__tests__/ProofSessionControls.test.tsx
new file mode 100644
index 0000000..620dc4f
--- /dev/null
+++ b/components/__tests__/ProofSessionControls.test.tsx
@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, act } from '@testing-library/react';
+import { ProofingProvider, useProofing, type ProofSessionInit } from '../ProofingContext';
+import { ProofSessionControls } from '../ProofSessionControls';
+
+/**
+ * The review dialog of a client proofing link. The selection ZIP is built from
+ * what the server has saved, so it must not be offered while a heart is still
+ * waiting out the autosave debounce; and the download counter has to follow
+ * the downloads started from this page.
+ */
+
+const TOKEN = 'k'.repeat(32);
+
+function Heart() {
+  const p = useProofing()!;
+  return <button onClick={() => p.toggleFavorite('t1')}>heart t1</button>;
+}
+
+function renderControls(overrides: Partial<ProofSessionInit> = {}) {
+  return render(
+    <ProofingProvider
+      albumTokens={['t1', 't2', 't3']}
+      albumName="Wedding"
+      session={{
+        token: TOKEN,
+        selected: ['t3'],
+        submitted: false,
+        download: 'album',
+        downloadsRemaining: null,
+        ...overrides,
+      }}
+    >
+      <Heart />
+      <ProofSessionControls />
+    </ProofingProvider>,
+  );
+}
+
+const selectionLink = () => screen.queryByText('Download selection (.zip)');
+
+let fetchMock: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  fetchMock = vi.fn(async () => new Response('{}', { status: 200 }));
+  vi.stubGlobal('fetch', fetchMock);
+  const store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+describe('ProofSessionControls', () => {
+  it('offers the selection ZIP when nothing is waiting to be saved', () => {
+    renderControls();
+    fireEvent.click(screen.getByText('Review & submit'));
+    expect(selectionLink()).not.toBeNull();
+  });
+
+  it('withholds the selection ZIP while a heart waits out the autosave debounce', async () => {
+    renderControls();
+    // A first save, so the state reads 'saved' rather than 'idle'.
+    fireEvent.click(screen.getByText('heart t1'));
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000);
+    });
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    // Another heart, and the dialog opened before its save is sent.
+    fireEvent.click(screen.getByText('heart t1'));
+    fireEvent.click(screen.getByText('Review & submit'));
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(selectionLink()).toBeNull();
+
+    // Once the save lands the link comes back, now for the saved selection.
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000);
+    });
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(selectionLink()).not.toBeNull();
+  });
+
+  it('counts a started download against the limit shown', () => {
+    renderControls({ downloadsRemaining: 2 });
+    fireEvent.click(screen.getByText('Review & submit'));
+    expect(screen.getByText('2 downloads left')).toBeTruthy();
+
+    const link = screen.getByText('Download all photos (.zip)');
+    // jsdom does not navigate; keep it from trying.
+    link.addEventListener('click', (e) => e.preventDefault());
+    fireEvent.click(link);
+    expect(screen.getByText('1 download left')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('Download all photos (.zip)'));
+    expect(screen.queryByText('Download all photos (.zip)')).toBeNull();
+    expect(selectionLink()).toBeNull();
+  });
+});
diff --git a/components/__tests__/ProofingModal.test.tsx b/components/__tests__/ProofingModal.test.tsx
index a46ae27..14e3985 100644
--- a/components/__tests__/ProofingModal.test.tsx
+++ b/components/__tests__/ProofingModal.test.tsx
@@ -1,19 +1,30 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, afterEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import { ProofingModal } from '../ProofingModal';
+import { encodeEmail } from '@/lib/emailObfuscation';
 
 /**
  * `navigator.clipboard` only exists in a secure context. A portfolio reached
  * over plain http on a LAN is not one, and both copy buttons used to throw on
  * the missing API and appear dead. They now show the text to copy by hand.
+ *
+ * The context is mutable so a test can turn the email action on and off: the
+ * recipient is `proofing.email`, else the footer contact email (#736), encoded
+ * until the browser decodes it.
  */
 
 const URL_ = 'http://192.168.1.20:7211/deutschland/kloster-chorin?fav=abc';
 const LIST = '#1, #3';
+const RECIPIENT = 'hello@example.com';
 
-vi.mock('../ProofingContext', () => ({
-  useProofing: () => ({
+const { proofing } = vi.hoisted(() => ({ proofing: { current: {} as Record<string, unknown> } }));
+
+vi.mock('../ProofingContext', () => ({ useProofing: () => proofing.current }));
+
+/** The context the modal reads; reset per test so flags cannot leak. */
+function setContext(overrides: Record<string, unknown> = {}) {
+  proofing.current = {
     favorites: new Set(['a', 'b']),
     isModalOpen: true,
     setIsModalOpen: vi.fn(),
@@ -22,16 +33,21 @@ vi.mock('../ProofingContext', () => ({
     getSelectedTokens: () => ['a', 'b'],
     clearFavorites: vi.fn(),
     allowMailto: false,
+    encodedMailto: undefined,
     downloadArchiveUrl: undefined,
-  }),
-}));
+    ...overrides,
+  };
+}
 
 const setClipboard = (value: unknown) =>
   Object.defineProperty(navigator, 'clipboard', { value, configurable: true });
 
+beforeEach(() => setContext());
+
 afterEach(() => {
   cleanup();
   setClipboard(undefined);
+  vi.unstubAllGlobals();
 });
 
 describe('ProofingModal copy buttons', () => {
@@ -66,3 +82,42 @@ describe('ProofingModal copy buttons', () => {
     expect(screen.queryByLabelText('Copy this link')).toBeNull();
   });
 });
+
+describe('ProofingModal email to photographer (#736)', () => {
+  it('hides the email action when no recipient is configured', () => {
+    setContext({ allowMailto: true, encodedMailto: undefined });
+    render(<ProofingModal />);
+    expect(screen.queryByText(/Send Email/)).toBeNull();
+  });
+
+  it('hides the email action when the site turned it off', () => {
+    setContext({ allowMailto: false, encodedMailto: encodeEmail(RECIPIENT) });
+    render(<ProofingModal />);
+    expect(screen.queryByText(/Send Email/)).toBeNull();
+  });
+
+  it('addresses the compose to the configured recipient', () => {
+    setContext({ allowMailto: true, encodedMailto: encodeEmail(RECIPIENT) });
+    const location = { href: '' };
+    vi.stubGlobal('location', location);
+    render(<ProofingModal />);
+    fireEvent.click(screen.getByText(/Send Email/));
+    expect(location.href.startsWith(`mailto:${RECIPIENT}?subject=`)).toBe(true);
+  });
+
+  it('keeps a crafted address from adding its own header fields', () => {
+    setContext({ allowMailto: true, encodedMailto: encodeEmail('a@b.c?bcc=evil@x.y') });
+    const location = { href: '' };
+    vi.stubGlobal('location', location);
+    render(<ProofingModal />);
+    fireEvent.click(screen.getByText(/Send Email/));
+    // The `?` and `=` are escaped, so the draft gains no bcc field.
+    expect(location.href.startsWith('mailto:a@b.c%3Fbcc%3Devil@x.y?subject=')).toBe(true);
+  });
+
+  it('keeps the plain address out of the rendered markup', () => {
+    setContext({ allowMailto: true, encodedMailto: encodeEmail(RECIPIENT) });
+    const { container } = render(<ProofingModal />);
+    expect(container.innerHTML).not.toContain(RECIPIENT);
+  });
+});
diff --git a/components/__tests__/ProofingSession.test.tsx b/components/__tests__/ProofingSession.test.tsx
new file mode 100644
index 0000000..6abd455
--- /dev/null
+++ b/components/__tests__/ProofingSession.test.tsx
@@ -0,0 +1,125 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, act } from '@testing-library/react';
+import { ProofingProvider, useProofing, type ProofSessionInit } from '../ProofingContext';
+
+/**
+ * Session mode of the proofing context: the selection starts from the server,
+ * a burst of hearts becomes one save, and a submitted selection stays put.
+ */
+
+function Probe() {
+  const p = useProofing()!;
+  return (
+    <div>
+      <span data-testid="count">{p.favorites.size}</span>
+      <span data-testid="state">{p.session?.saveState}</span>
+      <span data-testid="submitted">{String(p.session?.submitted)}</span>
+      <button onClick={() => p.toggleFavorite('t1')}>t1</button>
+      <button onClick={() => p.toggleFavorite('t2')}>t2</button>
+      <button onClick={() => void p.session?.submit()}>submit</button>
+    </div>
+  );
+}
+
+const TOKEN = 'k'.repeat(32);
+
+function renderSession(overrides: Partial<ProofSessionInit> = {}) {
+  return render(
+    <ProofingProvider
+      albumTokens={['t1', 't2', 't3']}
+      albumName="Wedding"
+      session={{
+        token: TOKEN,
+        selected: ['t3'],
+        submitted: false,
+        download: 'none',
+        downloadsRemaining: null,
+        ...overrides,
+      }}
+    >
+      <Probe />
+    </ProofingProvider>,
+  );
+}
+
+let fetchMock: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  fetchMock = vi.fn(async () => new Response('{}', { status: 200 }));
+  vi.stubGlobal('fetch', fetchMock);
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the test a working one.
+  const store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+describe('ProofingProvider session mode', () => {
+  it('starts from the server selection, not localStorage', () => {
+    localStorage.setItem('folio_fav_wedding', JSON.stringify(['t1', 't2']));
+    renderSession();
+    expect(screen.getByTestId('count').textContent).toBe('1');
+  });
+
+  it('debounces hearts into one save, in album order', async () => {
+    renderSession();
+    fireEvent.click(screen.getByText('t2'));
+    fireEvent.click(screen.getByText('t1'));
+    expect(fetchMock).not.toHaveBeenCalled();
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000);
+    });
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    const [url, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(url).toBe(`/api/proof/${TOKEN}/selection`);
+    expect(init.method).toBe('PUT');
+    expect(JSON.parse(init.body as string)).toEqual({ assets: ['t1', 't2', 't3'] });
+    expect(screen.getByTestId('state').textContent).toBe('saved');
+  });
+
+  it('reports a failed save', async () => {
+    fetchMock.mockResolvedValue(new Response('{}', { status: 500 }));
+    renderSession();
+    fireEvent.click(screen.getByText('t1'));
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000);
+    });
+    expect(screen.getByTestId('state').textContent).toBe('error');
+  });
+
+  it('saves pending hearts before submitting, then locks', async () => {
+    renderSession();
+    fireEvent.click(screen.getByText('t1'));
+    await act(async () => {
+      fireEvent.click(screen.getByText('submit'));
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    const urls = fetchMock.mock.calls.map((call) => call[0]);
+    expect(urls).toEqual([`/api/proof/${TOKEN}/selection`, `/api/proof/${TOKEN}/submit`]);
+    expect(screen.getByTestId('submitted').textContent).toBe('true');
+
+    fireEvent.click(screen.getByText('t2'));
+    expect(screen.getByTestId('count').textContent).toBe('2');
+  });
+
+  it('ignores hearts on a submitted selection', () => {
+    renderSession({ submitted: true });
+    fireEvent.click(screen.getByText('t1'));
+    expect(screen.getByTestId('count').textContent).toBe('1');
+  });
+});
diff --git a/components/__tests__/colorTokens.test.ts b/components/__tests__/colorTokens.test.ts
new file mode 100644
index 0000000..c4bf56d
--- /dev/null
+++ b/components/__tests__/colorTokens.test.ts
@@ -0,0 +1,148 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+import { THEME_PRESETS } from '@/lib/config/theme';
+
+/**
+ * Colours that used to be hard-coded and failed in one mode or with one
+ * accent (QA T-1, T-2, T-5, T-6, T-8). The values live in app/tokens.css;
+ * these checks read them from there, so a palette change that breaks one
+ * fails here.
+ */
+const read = (...p: string[]) => fs.readFileSync(path.join(process.cwd(), ...p), 'utf8');
+const tokens = read('app', 'tokens.css');
+
+type RGBA = { r: number; g: number; b: number; a: number };
+
+function parse(value: string): RGBA {
+  const v = value.trim();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(v)?.[1];
+  if (hex) {
+    const h = hex.length === 3 ? [...hex].map((c) => c + c).join('') : hex;
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16),
+      a: 1,
+    };
+  }
+  const rgba = /^rgba?\(([^)]+)\)$/.exec(v)?.[1];
+  if (!rgba) throw new Error(`unparsed colour ${value}`);
+  const [r, g, b, a = 1] = rgba.split(',').map(Number);
+  return { r, g, b, a };
+}
+
+function over(fg: RGBA, bg: RGBA): RGBA {
+  const m = (x: number, y: number) => x * fg.a + y * (1 - fg.a);
+  return { r: m(fg.r, bg.r), g: m(fg.g, bg.g), b: m(fg.b, bg.b), a: 1 };
+}
+
+function ratio(a: RGBA, b: RGBA): number {
+  const lum = (c: RGBA) =>
+    [c.r, c.g, c.b]
+      .map((v) => v / 255)
+      .map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4))
+      .reduce((sum, v, i) => sum + v * [0.2126, 0.7152, 0.0722][i], 0);
+  const [x, y] = [lum(a), lum(b)];
+  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+
+function block(selector: string): string | undefined {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return new RegExp(`(?:^|\\n)${escaped}\\s*\\{([^}]*)\\}`).exec(tokens)?.[1];
+}
+
+function token(body: string | undefined, name: string): string | undefined {
+  return body ? new RegExp(`--${name}:\\s*([^;]+);`).exec(body)?.[1] : undefined;
+}
+
+const ROOT = block(':root');
+const LIGHT = block("[data-theme='light']");
+const SURFACES = ['bg-primary', 'bg-secondary', 'bg-card', 'bg-card-hover'];
+
+/** Every opaque surface token a preset resolves to in one mode. */
+function surfaces(preset: string, mode: 'dark' | 'light'): string[] {
+  const own = block(
+    mode === 'dark' ? `[data-preset='${preset}']` : `[data-preset='${preset}'][data-theme='light']`,
+  );
+  const base = mode === 'dark' ? ROOT : LIGHT;
+  return SURFACES.map((s) => token(own, s) ?? token(base, s)!).filter((v) => v.startsWith('#'));
+}
+
+describe('--error (T-8)', () => {
+  it('is defined for both modes', () => {
+    expect(token(ROOT, 'error')).toBeDefined();
+    expect(token(LIGHT, 'error')).toBeDefined();
+  });
+
+  for (const preset of Object.keys(THEME_PRESETS)) {
+    for (const mode of ['dark', 'light'] as const) {
+      it(`${preset} (${mode}): clears 4.5:1 on every surface`, () => {
+        const error = parse(token(mode === 'dark' ? ROOT : LIGHT, 'error')!);
+        for (const surface of surfaces(preset, mode)) {
+          expect(ratio(error, parse(surface)), surface).toBeGreaterThanOrEqual(4.5);
+        }
+      });
+    }
+  }
+
+  it('replaces the fixed reds in the error texts', () => {
+    for (const file of [
+      ['app', 'contact', 'contact.css'],
+      ['components', 'PasswordGate.module.css'],
+      ['components', 'ProofingModal.tsx'],
+    ]) {
+      expect(read(...file), file.join('/')).not.toMatch(/#e74c3c|#ff4d4f/i);
+    }
+  });
+});
+
+describe('lightbox tokens (T-1, T-2)', () => {
+  const lb = (name: string) => parse(token(ROOT, `lightbox-${name}`)!);
+  // The two overlays the lightbox paints (the default, and studio-modern's),
+  // over the lightest page a light preset has — the worst case for white text.
+  const lightest = parse('#ffffff');
+  const overlays = [parse('rgba(0, 0, 0, 0.85)'), parse('rgba(10, 10, 10, 0.92)')].map((o) =>
+    over(o, lightest),
+  );
+
+  it('keeps text and the saved-favourite colour at 4.5:1 on the overlay', () => {
+    for (const bg of overlays) {
+      for (const name of ['text', 'text-secondary', 'text-muted', 'fav']) {
+        expect(ratio(over(lb(name), bg), bg), name).toBeGreaterThanOrEqual(4.5);
+      }
+    }
+  });
+
+  it('points the text tokens at them inside the overlay in light mode', () => {
+    const css = read('components', 'Lightbox.module.css');
+    const rule = /:global\(\[data-theme='light'\]\) \.overlay \{([^}]*)\}/.exec(css)?.[1];
+    expect(rule).toBeDefined();
+    expect(rule).toMatch(/--text-primary:\s*var\(--lightbox-text\)/);
+    expect(rule).toMatch(/--text-secondary:\s*var\(--lightbox-text-secondary\)/);
+    expect(rule).toMatch(/--text-muted:\s*var\(--lightbox-text-muted\)/);
+  });
+
+  it('drops the inline favourite colour that overrode the preset', () => {
+    const tsx = read('components', 'Lightbox.tsx');
+    expect(tsx).not.toMatch(/#ff4d4f/i);
+    expect(tsx).not.toMatch(/color: isFav/);
+  });
+});
+
+describe('text on the accent (T-5, T-6)', () => {
+  it('uses --on-accent instead of a fixed white', () => {
+    for (const file of [
+      ['components', 'ProofingModal.tsx'],
+      ['components', 'ProofSessionControls.tsx'],
+    ]) {
+      expect(read(...file), file.join('/')).not.toMatch(/color: '#fff'/);
+    }
+    const studioModern = read('app', 'themes', 'studio-modern.css');
+    const button = /\[data-preset='studio-modern'\] \.empty-state__button \{([^}]*)\}/.exec(
+      studioModern,
+    )?.[1];
+    expect(button).toBeDefined();
+    expect(button).not.toMatch(/color:\s*#fff/i);
+  });
+});
diff --git a/components/__tests__/focusManagement.test.tsx b/components/__tests__/focusManagement.test.tsx
new file mode 100644
index 0000000..4fba191
--- /dev/null
+++ b/components/__tests__/focusManagement.test.tsx
@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { trapTabKey } from '@/lib/focusTrap';
+import { MobileNav } from '../MobileNav';
+
+vi.mock('next/navigation', () => ({ usePathname: () => '/' }));
+
+afterEach(() => {
+  cleanup();
+  document.body.innerHTML = '';
+});
+
+function tab(container: HTMLElement, shiftKey = false) {
+  const e = new KeyboardEvent('keydown', { key: 'Tab', shiftKey, cancelable: true });
+  const moved = trapTabKey(container, e);
+  return { moved, prevented: e.defaultPrevented };
+}
+
+describe('trapTabKey (#696)', () => {
+  function dialog() {
+    document.body.innerHTML = `
+      <button id="outside">outside</button>
+      <div id="dlg">
+        <button id="a">a</button>
+        <button id="hidden" aria-hidden="true">x</button>
+        <a id="b" href="#">b</a>
+      </div>`;
+    return document.getElementById('dlg')!;
+  }
+
+  it('wraps Tab from the last element to the first', () => {
+    const dlg = dialog();
+    document.getElementById('b')!.focus();
+    expect(tab(dlg)).toEqual({ moved: true, prevented: true });
+    expect(document.activeElement?.id).toBe('a');
+  });
+
+  it('wraps Shift+Tab from the first element to the last', () => {
+    const dlg = dialog();
+    document.getElementById('a')!.focus();
+    tab(dlg, true);
+    expect(document.activeElement?.id).toBe('b');
+  });
+
+  it('leaves Tab between inner elements to the browser', () => {
+    const dlg = dialog();
+    document.getElementById('a')!.focus();
+    expect(tab(dlg)).toEqual({ moved: false, prevented: false });
+  });
+
+  it('pulls escaped focus back in', () => {
+    const dlg = dialog();
+    document.getElementById('outside')!.focus();
+    tab(dlg);
+    expect(document.activeElement?.id).toBe('a');
+  });
+});
+
+describe('MobileNav focus (#696)', () => {
+  it('moves focus into the panel and back to the button on Esc', () => {
+    render(
+      <MobileNav>
+        <a href="#home">Home</a>
+        <a href="#about">About</a>
+      </MobileNav>,
+    );
+    const button = screen.getByRole('button', { name: 'Open menu' });
+    fireEvent.click(button);
+    expect(document.activeElement?.textContent).toBe('Home');
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(document.activeElement).toBe(button);
+    expect(button.getAttribute('aria-expanded')).toBe('false');
+  });
+});
diff --git a/components/useProofing.ts b/components/useProofing.ts
new file mode 100644
index 0000000..89742a0
--- /dev/null
+++ b/components/useProofing.ts
@@ -0,0 +1,18 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { ProofingContextType } from './ProofingContext';
+
+/**
+ * The proofing context on its own, apart from the provider in
+ * `ProofingContext.tsx`. The grid, the essay and the lightbox read it on every
+ * album page, proofing or not; the provider, the modal and the session
+ * controls are only loaded where proofing is on (`ProofingLazy.tsx`). Keeping
+ * the context here is what lets them stay out of the page's first bundle.
+ */
+export const ProofingContext = createContext<ProofingContextType | null>(null);
+
+/** The proofing state, or null outside a provider — proofing is off. */
+export function useProofing() {
+  return useContext(ProofingContext);
+}
diff --git a/content/gallery.yaml.example b/content/gallery.yaml.example
index bcfa766..70ffb9f 100644
--- a/content/gallery.yaml.example
+++ b/content/gallery.yaml.example
@@ -146,3 +146,11 @@ subpages:
       layout: essay
     albums:
       - "album-uuid-iceland-1"
+
+  # ── Content Page in the Menu ─────────────────────────────────────
+  # A timeless text page (pricing, workshops, FAQ) lives in
+  # content/pages/<slug>.md and is served at /<slug>. Listing it here puts it
+  # in the header menu at this position; leave it out and the page is still
+  # reachable at its URL, just not in the menu. Create and edit pages under
+  # Admin → Pages. See docs/gallery-config.md#content-pages.
+  - page: pricing
diff --git a/content/settings.yaml.example b/content/settings.yaml.example
index ba38481..cc04e98 100644
--- a/content/settings.yaml.example
+++ b/content/settings.yaml.example
@@ -111,6 +111,16 @@ footer:
   email: "hello@example.com"
   website: "https://example.com"
 
+# ── Client proofing ──────────────────────────────────────────────
+# Hearts on every photo, a selection bar and an export dialog. A subpage's own
+# `proofing:` in gallery.yaml overrides `enabled` in either direction.
+# "Send by email" addresses `email`, else footer.email, and is hidden when
+# neither is set.
+# proofing:
+#   enabled: true
+#   allowMailto: true
+#   email: "proofs@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
diff --git a/docs/admin-panel.md b/docs/admin-panel.md
index cda424a..b376303 100644
--- a/docs/admin-panel.md
+++ b/docs/admin-panel.md
@@ -39,6 +39,7 @@ Each area has its own URL, so a section can be bookmarked and the browser's back
 | **Pages**       | `/admin/pages`       | `content/gallery.yaml`                      |
 | **Journal**     | `/admin/journal`     | `content/journal/<slug>.md`                 |
 | **Settings**    | `/admin/settings`    | `content/settings.yaml`, `content/about.md` |
+| **Proofing**    | `/admin/proofing`    | `content/proofing.json`                     |
 | **Analytics**   | `/admin/analytics`   | nothing — read-only                         |
 | **Diagnostics** | `/admin/diagnostics` | nothing — read-only                         |
 | **Help**        | `/admin/help`        | nothing — reference only                    |
@@ -127,6 +128,14 @@ Theme presets, grid layouts, photo frames, hero styles and the Google search sni
 
 **General → Favicon** accepts an SVG, PNG, ICO or JPEG. It is stored in the writable `content/` volume and served through `/api/favicon` under a policy that stops an uploaded SVG from executing script. **Reset** restores the bundled default.
 
+## Proofing
+
+Private client links: pick a client name and any Immich album — published or
+not — and optionally an expiry date and download rights. Each card shows the
+link's state (open, submitted, expired), what the client picked, and the export
+buttons. See [Client Proofing Links](gallery-config.md#client-proofing-links)
+for how the client side works.
+
 ## Analytics
 
 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.
diff --git a/docs/deployment.md b/docs/deployment.md
index a543c46..6a63975 100644
--- a/docs/deployment.md
+++ b/docs/deployment.md
@@ -215,7 +215,7 @@ CDN_URL=https://cdn.example.com
 ```
 
 ```
-https://cdn.example.com/api/image/v2:…?size=preview&w=1080&q=75
+https://cdn.example.com/api/image/v2:…?size=preview&w=1440
 ```
 
 The CDN uses Immich Folio as its origin. The first request for a photo is a
@@ -230,7 +230,7 @@ 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
+- **Include the full query string in the cache key.** `size`, `w` 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
diff --git a/docs/gallery-config.md b/docs/gallery-config.md
index 82862b5..f9f5dda 100644
--- a/docs/gallery-config.md
+++ b/docs/gallery-config.md
@@ -35,6 +35,7 @@ cp content/settings.yaml.example content/settings.yaml
 - [Site Behaviour](#site-behaviour)
 - [Navigation Links](#navigation-links)
 - [Client Proofing](#client-proofing)
+- [Client Proofing Links](#client-proofing-links)
 - [Image Protection & Watermark](#image-protection--watermark)
 - [SEO](#seo)
 - [Footer](#footer)
@@ -269,6 +270,12 @@ so an edited URL cannot reach anything else. The ZIP keeps the original
 filenames (deduplicated on collision) and is streamed, so album size does not
 drive memory use.
 
+One visitor (by client IP, see `TRUSTED_PROXY_HOPS`) can have at most two ZIPs
+downloading at once, album and proofing downloads counted together; a third
+gets a "too many requests" page until one finishes. A ZIP whose download stops
+reading for 60 seconds is closed, so an abandoned or stalled download does not
+hold its connection to Immich open.
+
 ## Password Protection
 
 A password can be set on the whole site, on a subpage, on a single album, and on
@@ -617,8 +624,16 @@ Configured in `settings.yaml`:
 proofing:
   enabled: true # hearts, selection bar and export modal (default: true)
   allowMailto: true # offer "send by email" alongside the copyable list (default: true)
+  email: proofs@example.com # recipient of that email (default: footer.email)
 ```
 
+The email draft goes to `proofing.email`, or to the footer contact email
+(`footer.email`) when that is unset. With neither configured the dialog hides
+the email button rather than opening a draft with an empty **To:**. The address
+is set in the admin panel under **Settings → General → Proofing email**, and it
+reaches the page encoded like the footer address, so it does not appear in the
+HTML in plain text.
+
 A subpage overrides `enabled` in either direction — useful to keep proofing off
 across a public portfolio and switch it on for a single client handover:
 
@@ -641,6 +656,59 @@ album reached without a subpage follows `proofing.enabled`.
 > controls only when its subpage sets `proofing: true` **explicitly** — the
 > global default does not reach into essays. Journal entries never show them.
 
+## Client Proofing Links
+
+The proofing above is anonymous: picks live in the visitor's browser and come
+back to you as a link or an email, if they come back at all. A **client
+proofing link** is the handover version. Create one per client in
+**Admin → Proofing**:
+
+- **Client** — a name for your overview and the greeting on the page.
+- **Album** — any Immich album. It does not have to be in `gallery.yaml`; the
+  link itself is what grants access to it.
+- **Valid until** — optional. From the day after, the link shows "This link has
+  expired" and every action on it is refused.
+- **Downloads** — none, the client's selection as a ZIP, or the whole album as
+  a ZIP, with an optional limit on how many ZIPs the link may start.
+
+The client opens `https://your-site/proof/<token>` and hearts photos as usual.
+Every change is **saved on the server** within a second, so they can stop and
+come back later, from another device too. **Submit selection** locks it and
+notifies you. Until then, you can watch the picks come in under
+**Admin → Proofing**. **Reopen for changes** unlocks a submitted selection.
+
+**Export.** Each link offers:
+
+- **Copy file names (Lightroom)** — the selected file names without extension,
+  comma-separated. Pasted into Lightroom's or Capture One's filename filter,
+  `IMG_0412` finds the RAW as well as the JPEG the client saw.
+- **CSV** — position in the album, file name and capture time.
+- **TXT** — full file names, one per line.
+
+**Notification.** Set `PROOFING_WEBHOOK_URL` and every first submit POSTs JSON
+to it. The body carries `content` (Discord), `text` (Slack, Mattermost),
+`title` and `message` (Gotify) and a structured `proofing` object (n8n, Home
+Assistant, your own script), so most receivers work without an adapter. With
+`SITE_URL` set, the message links straight to the selection in the admin panel.
+A failing webhook never fails the client's submit.
+
+```env
+PROOFING_WEBHOOK_URL=https://discord.com/api/webhooks/…
+```
+
+**Security notes.**
+
+- The token in the link is the only credential: 192 random bits, never shown
+  in the admin panel's own URLs. Treat the link like a password; delete it in
+  the admin panel to revoke it at once.
+- Links are stored in `content/proofing.json` (mode `0600`), next to
+  `analytics.json`, and are not part of the YAML backups.
+- A site-wide password still applies: on a locked site, the client needs it
+  too.
+- Proofing pages are `noindex`, left out of the sitemap, and send no
+  `Referer`.
+- A subpage slugged `proof` would be hidden behind this route.
+
 ## Image Protection & Watermark
 
 ```yaml
@@ -744,6 +812,79 @@ The admin panel's **Settings → About** section edits the same file — portrai
 name, location, gear list and bio — so `about.md` does not have to be written by
 hand.
 
+## Content Pages
+
+Pages beyond the gallery — pricing and packages, workshops, press, a booking
+FAQ — are content pages. Each one is a file, `content/pages/<slug>.md`, served
+at `/<slug>`.
+
+```markdown
+---
+title: 'Pricing'
+description: 'Packages and rates for portrait and wedding sessions'
+draft: true
+---
+
+## Portrait sessions
+
+One hour on location, 25 edited photos.
+
+![0a1b2c3d-…:wide](A session in the Highlands)
+```
+
+The frontmatter keys are `title`, `description` (used for search engines and
+link previews), `password` and `draft`. The body uses the journal's block
+syntax ([Journal & Photo Essays](journal.md)): headings, text and photo blocks
+(`:wide` or `:fullbleed`). A page has no date, no reading time and no index,
+and it has no map block.
+
+### In the menu
+
+A page appears in the header menu through a reference among the subpages in
+`gallery.yaml`, at the position it should take:
+
+```yaml
+subpages:
+  - name: Landscapes
+    albums:
+      - 'album-uuid-1'
+  - page: pricing
+```
+
+A page without a reference is still reachable at `/<slug>`, but it is not in
+the menu, which suits a page that is only shared by link. The menu stays flat:
+a page cannot sit inside a subpage's sections. A reference to a page whose file
+does not exist is skipped, and the config doctor reports it.
+
+### Slugs
+
+A page's slug must not be taken by a subpage, a standalone album, a journal
+entry or one of the built-in routes (`about`, `map`, `journal`, `impressum`,
+`privacy`, `install`, `admin`, `gate`, `api`, `proof`, `contact`). The admin
+panel refuses to save a page on such a slug, and the doctor reports a collision
+in a hand-edited file. Renaming a page's slug breaks old links: there are no
+automatic redirects.
+
+### Draft and password
+
+A draft is visible only to a signed-in admin, and it is left out of the menu and
+the sitemap. A `password` locks the page like a journal entry, with its own
+cookie (`lb_auth_page_<slug>`). The site password, when one is set, applies
+before either. Password-protected pages are not listed in the sitemap.
+
+### In the admin panel
+
+Admin → Pages lists pages next to the subpages, with a document icon and a
+PAGE tag, and a separate "Not in menu" group for pages without a reference.
+**+ New page** creates one (it starts blank and as a draft). Select a page to
+edit its title, URL, draft flag, password and description, and to switch
+"Show in menu"; dragging a page into or out of "Not in menu" does the same.
+The menu change is saved with **Save Changes**, like any other change to the
+structure. **Edit content →** opens the journal's block editor with a live
+preview. Every save keeps a backup in `content/pages/.backups/`, and deleting a
+page that is in the menu also removes its `gallery.yaml` reference; both files
+are backed up first.
+
 ## Journal & Photo Essays
 
 Long-form storytelling with fullbleed photos, side-by-side pairs, quotes and
diff --git a/docs/screenshots/admin-journal-list.png b/docs/screenshots/admin-journal-list.png
index e2c8b53..bf8d5b1 100644
Binary files a/docs/screenshots/admin-journal-list.png and b/docs/screenshots/admin-journal-list.png differ
diff --git a/docs/screenshots/admin-journal-settings.png b/docs/screenshots/admin-journal-settings.png
index 66cafdf..cf72987 100644
Binary files a/docs/screenshots/admin-journal-settings.png and b/docs/screenshots/admin-journal-settings.png differ
diff --git a/docs/screenshots/admin-journal-studio.png b/docs/screenshots/admin-journal-studio.png
index 06009f9..d2b5ad3 100644
Binary files a/docs/screenshots/admin-journal-studio.png and b/docs/screenshots/admin-journal-studio.png differ
diff --git a/docs/screenshots/admin-login.png b/docs/screenshots/admin-login.png
index b36cf13..a0bd65a 100644
Binary files a/docs/screenshots/admin-login.png and b/docs/screenshots/admin-login.png differ
diff --git a/docs/screenshots/admin-page-builder.png b/docs/screenshots/admin-page-builder.png
index 77ad431..551b99f 100644
Binary files a/docs/screenshots/admin-page-builder.png and b/docs/screenshots/admin-page-builder.png differ
diff --git a/docs/screenshots/admin-settings.png b/docs/screenshots/admin-settings.png
index 28e315d..3729029 100644
Binary files a/docs/screenshots/admin-settings.png and b/docs/screenshots/admin-settings.png differ
diff --git a/docs/screenshots/header.png b/docs/screenshots/header.png
index 06b6e14..3710344 100644
Binary files a/docs/screenshots/header.png and b/docs/screenshots/header.png differ
diff --git a/docs/screenshots/journal-entry.png b/docs/screenshots/journal-entry.png
index d1ca41f..04901f3 100644
Binary files a/docs/screenshots/journal-entry.png and b/docs/screenshots/journal-entry.png differ
diff --git a/docs/screenshots/journal-index.png b/docs/screenshots/journal-index.png
index 0c912e1..8397861 100644
Binary files a/docs/screenshots/journal-index.png and b/docs/screenshots/journal-index.png differ
diff --git a/hooks/useModalDialog.ts b/hooks/useModalDialog.ts
index 26e9672..93936e0 100644
--- a/hooks/useModalDialog.ts
+++ b/hooks/useModalDialog.ts
@@ -27,8 +27,22 @@ import { useEffect, useRef } from 'react';
  * have to call the hook — hooks may not run conditionally. Without it the
  * effect would run once against an unmounted card, bail out, and never run
  * again, because `onClose` alone does not change when the modal opens.
+ *
+ * Dialogs nest — the album drawer opens the asset picker, the backup manager
+ * a confirmation. Every open dialog listens on `document`, so only the one
+ * opened last handles a key; otherwise one Escape closed the whole stack.
+ *
+ * Escape is also left alone while the focused element owns it: an expanded
+ * combobox (the admin Listbox closes its popup) or a dnd-kit item picked up
+ * with the keyboard (Escape cancels the move). The listener runs in the
+ * capture phase and stops propagation, so neither would see the key.
  */
 
+/** Open dialogs, innermost last. */
+const openDialogs: object[] = [];
+
+const ESCAPE_OWNERS = '[aria-expanded="true"], [aria-roledescription][aria-pressed="true"]';
+
 const FOCUSABLE = [
   'a[href]',
   'button:not([disabled])',
@@ -67,6 +81,8 @@ export function useModalDialog(onClose: () => void, active = true) {
     if (!active || !card) return;
 
     const previous = document.activeElement as HTMLElement | null;
+    const token = {};
+    openDialogs.push(token);
 
     // React has already applied `autoFocus` by the time the effect runs, so
     // an existing focus inside the card is respected rather than overridden.
@@ -75,7 +91,10 @@ export function useModalDialog(onClose: () => void, active = true) {
     }
 
     function onKeyDown(e: KeyboardEvent) {
+      if (openDialogs[openDialogs.length - 1] !== token) return;
       if (e.key === 'Escape') {
+        const active = document.activeElement;
+        if (active && card?.contains(active) && active.matches(ESCAPE_OWNERS)) return;
         e.stopPropagation();
         onCloseRef.current();
         return;
@@ -105,6 +124,7 @@ export function useModalDialog(onClose: () => void, active = true) {
     document.addEventListener('keydown', onKeyDown, true);
     return () => {
       document.removeEventListener('keydown', onKeyDown, true);
+      openDialogs.splice(openDialogs.indexOf(token), 1);
       // Only take the focus back if it is still inside the closing dialog.
       // Something else may legitimately have claimed it in the meantime.
       if (previous && document.contains(previous)) previous.focus();
diff --git a/lib/__tests__/asset-selection.test.ts b/lib/__tests__/asset-selection.test.ts
new file mode 100644
index 0000000..efa1d47
--- /dev/null
+++ b/lib/__tests__/asset-selection.test.ts
@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest';
+import { canSelectMore, matchesQuery, toggleSelection } from '../admin/assetSelection';
+
+describe('toggleSelection (#602)', () => {
+  it('appends in click order and removes on a second toggle', () => {
+    let s = toggleSelection([], 'a');
+    s = toggleSelection(s, 'b');
+    s = toggleSelection(s, 'c');
+    expect(s).toEqual(['a', 'b', 'c']);
+    expect(toggleSelection(s, 'b')).toEqual(['a', 'c']);
+  });
+
+  it('refuses assets the caller already uses', () => {
+    expect(toggleSelection(['a'], 'x', { disabled: new Set(['x']) })).toEqual(['a']);
+  });
+
+  it('stops at max but still lets you deselect', () => {
+    const full = ['a', 'b'];
+    expect(toggleSelection(full, 'c', { max: 2 })).toEqual(['a', 'b']);
+    expect(toggleSelection(full, 'a', { max: 2 })).toEqual(['b']);
+  });
+
+  it('replaces the pick when max is 1', () => {
+    expect(toggleSelection(['a'], 'b', { max: 1 })).toEqual(['b']);
+  });
+
+  it('does not mutate its input', () => {
+    const s = ['a'];
+    toggleSelection(s, 'b');
+    expect(s).toEqual(['a']);
+  });
+});
+
+describe('canSelectMore', () => {
+  it('is unlimited without max, bounded with it, and always open for a single slot', () => {
+    expect(canSelectMore(['a', 'b', 'c'])).toBe(true);
+    expect(canSelectMore(['a'], 2)).toBe(true);
+    expect(canSelectMore(['a', 'b'], 2)).toBe(false);
+    expect(canSelectMore(['a'], 1)).toBe(true);
+  });
+});
+
+describe('matchesQuery', () => {
+  const asset = { originalFileName: 'IMG_4021.HEIC' };
+  it('matches a case-insensitive filename fragment', () => {
+    expect(matchesQuery(asset, 'img_40')).toBe(true);
+    expect(matchesQuery(asset, '  4021 ')).toBe(true);
+    expect(matchesQuery(asset, 'DSC')).toBe(false);
+  });
+  it('matches everything for an empty query', () => {
+    expect(matchesQuery(asset, '   ')).toBe(true);
+  });
+});
diff --git a/lib/__tests__/auth-page.test.ts b/lib/__tests__/auth-page.test.ts
new file mode 100644
index 0000000..5011c2e
--- /dev/null
+++ b/lib/__tests__/auth-page.test.ts
@@ -0,0 +1,71 @@
+import { describe, it, expect, vi } from 'vitest';
+
+/**
+ * Content page passwords (#722): their own cookie, `lb_auth_page_<slug>`,
+ * through the same authenticate()/isAuthenticated() path as every other gate,
+ * and a token that no other gate of the same slug and password accepts.
+ */
+vi.mock('@/lib/config', () => ({
+  getConfig: () => ({
+    authSecret: 'test-auth-secret-32-chars-long-min',
+    standaloneAlbums: [],
+    albumPasswords: {},
+    subpages: [{ name: 'Pricing', slug: 'pricing', albumIds: [], password: 'shared' }],
+  }),
+}));
+
+vi.mock('@/lib/admin/pages-service', () => ({
+  readPageSync: (slug: string) =>
+    slug === 'pricing' || slug === 'open'
+      ? {
+          slug,
+          rawMarkdown: '',
+          parsed: {
+            frontmatter: slug === 'pricing' ? { password: 'shared' } : {},
+            blocks: [],
+            referencedAssetIds: [],
+          },
+        }
+      : null,
+}));
+
+vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+import { authenticate, isAuthenticated, isProtected } from '@/lib/auth';
+
+function cookieFrom(setCookie: string): [string, string] {
+  const [pair] = setCookie.split(';');
+  const eq = pair.indexOf('=');
+  return [pair.slice(0, eq), pair.slice(eq + 1)];
+}
+
+describe('content page passwords', () => {
+  it('knows which pages are protected', () => {
+    expect(isProtected('pricing', 'page')).toBe(true);
+    expect(isProtected('open', 'page')).toBe(false);
+    expect(isProtected('missing', 'page')).toBe(false);
+  });
+
+  it('sets lb_auth_page_<slug> and accepts it back', async () => {
+    const setCookie = await authenticate('pricing', 'shared', 'page');
+    expect(setCookie).not.toBeNull();
+    const [name, value] = cookieFrom(setCookie!);
+    expect(name).toBe('lb_auth_page_pricing');
+    expect(isAuthenticated('pricing', (n) => (n === name ? value : undefined), 'page')).toBe(true);
+  });
+
+  it('refuses a wrong password', async () => {
+    expect(await authenticate('pricing', 'nope', 'page')).toBeNull();
+  });
+
+  it('does not accept a subpage token of the same slug and password', async () => {
+    const [, subpageValue] = cookieFrom((await authenticate('pricing', 'shared', 'subpage'))!);
+    expect(
+      isAuthenticated(
+        'pricing',
+        (n) => (n === 'lb_auth_page_pricing' ? subpageValue : undefined),
+        'page',
+      ),
+    ).toBe(false);
+  });
+});
diff --git a/lib/__tests__/auth.test.ts b/lib/__tests__/auth.test.ts
index 2c73319..a89bf5b 100644
--- a/lib/__tests__/auth.test.ts
+++ b/lib/__tests__/auth.test.ts
@@ -25,6 +25,13 @@ vi.mock('@/lib/config', () => ({
         albumIds: ['00000000-0000-0000-0000-000000000002'],
         // no password
       },
+      {
+        // Taken offline with `enabled: false`, and asks for nothing.
+        name: 'Offline',
+        slug: 'offline',
+        albumIds: ['00000000-0000-0000-0000-000000000006'],
+        enabled: false,
+      },
       {
         name: 'Hashed',
         slug: 'hashed',
@@ -34,6 +41,13 @@ vi.mock('@/lib/config', () => ({
         password:
           'scrypt:0123456789abcdef0123456789abcdef:4850eef18a09612ef11fdcd943bf64ce98d0eca2b0f677f9c0c51d1f648b8a101cf7ea36b6f94cfc05236b2fda6fffabd0929dc7e14c07626522fba68bf26de5',
       },
+      {
+        // A leftover bcrypt hash: refused outright, whatever the attempt.
+        name: 'Legacy',
+        slug: 'legacy',
+        albumIds: ['00000000-0000-0000-0000-000000000007'],
+        password: '$2b$10$abcdefghijklmnopqrstuuPjJ7x1b0c9vX8rZ0Yx0mZ1n2o3p4q5r',
+      },
     ],
   }),
 }));
@@ -129,6 +143,41 @@ describe('password hashing does not stall the process', () => {
   });
 });
 
+/**
+ * A key with an scrypt hash took ~50ms to answer, every other key ~2ms — the
+ * early return skipped hashing. Identical reply bodies did not help: the clock
+ * alone told a prober which pages, albums and journal entries are locked,
+ * drafts included. Every attempt now runs exactly one scrypt. Counting the
+ * calls keeps the test independent of how fast the machine is.
+ */
+describe('authenticate — one scrypt per attempt, whatever the key', () => {
+  const attempts: [string, () => Promise<string | null>][] = [
+    ['scrypt hash, right password', () => authenticate('hashed', 'scrypted-pass')],
+    ['scrypt hash, wrong password', () => authenticate('hashed', 'wrong')],
+    ['plaintext, right password', () => authenticate('private', 'secret123')],
+    ['plaintext, wrong password', () => authenticate('private', 'wrong')],
+    ['key without a password', () => authenticate('public', 'anything')],
+    ['unknown key', () => authenticate('no-such-page', 'anything')],
+    ['unknown journal entry', () => authenticate('no-such-entry', 'x', 'journal')],
+    ['unknown album', () => authenticate('00000000-0000-0000-0000-00000000dead', 'x', 'album')],
+    ['legacy bcrypt hash', () => authenticate('legacy', 'anything')],
+  ];
+
+  it.each(attempts)('%s', async (_label, attempt) => {
+    const scrypt = vi.spyOn(crypto, 'scrypt');
+    const error = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      await attempt();
+      expect(scrypt).toHaveBeenCalledTimes(1);
+    } finally {
+      scrypt.mockRestore();
+      error.mockRestore();
+      warn.mockRestore();
+    }
+  });
+});
+
 describe('isAuthenticated', () => {
   it('returns true when a valid cookie is present', async () => {
     // First authenticate to get the expected token
@@ -249,6 +298,11 @@ describe('isAlbumReachable', () => {
     expect(isAlbumReachable(ALSO_STANDALONE, none)).toBe(true);
   });
 
+  // `enabled: false` takes the subpage offline; its albums have no route left.
+  it('refuses an album whose only subpage is offline', () => {
+    expect(isAlbumReachable('00000000-0000-0000-0000-000000000006', none)).toBe(false);
+  });
+
   it('still refuses an album that carries its own password', async () => {
     const subpageOnly = await cookieFor('private', 'secret123');
     expect(isAlbumReachable(OWN_PASSWORD, subpageOnly)).toBe(false);
diff --git a/lib/__tests__/config-cache.test.ts b/lib/__tests__/config-cache.test.ts
index 2532d98..fb3b1b2 100644
--- a/lib/__tests__/config-cache.test.ts
+++ b/lib/__tests__/config-cache.test.ts
@@ -1,4 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
 
 // Mock env.ts so importing config.ts doesn't trigger Zod validation
 vi.mock('@/lib/env', () => ({
@@ -17,47 +20,109 @@ vi.mock('@/lib/secret', () => ({
   resolveAuthSecret: () => 'test-auth-secret-32-chars-long-min',
 }));
 
-// Replace the filesystem-backed YAML layer. The real loadYaml() already
-// revalidates by mtime, so "the file changed on disk" is modelled by the
-// mock returning different content.
-vi.mock('@/lib/config/parser', () => ({
-  loadYaml: vi.fn(),
-  clearYamlCache: vi.fn(),
-  validateUuid: (id: string) => id,
-}));
+// The real YAML layer, spied on: how often it is asked is how often the
+// config is derived.
+vi.mock('@/lib/config/parser', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/config/parser')>();
+  return { ...actual, loadYaml: vi.fn(actual.loadYaml) };
+});
 
 import { getConfig, invalidateConfigCache } from '@/lib/config';
 import { loadYaml } from '@/lib/config/parser';
 
 const ALBUM_ID = '11111111-1111-1111-1111-111111111111';
 
-function mockYamlFiles(settings: Record<string, unknown>) {
-  vi.mocked(loadYaml).mockImplementation((filename: string) => {
-    if (filename === 'gallery.yaml') return { albums: [ALBUM_ID] };
-    if (filename === 'settings.yaml') return settings;
-    return null;
-  });
+let dir: string;
+let mtime = Date.now() / 1000;
+
+/** Write a content file with a distinct mtime, the way a save from another worker lands. */
+function write(name: string, body: string) {
+  const file = path.join(dir, 'content', name);
+  fs.writeFileSync(file, body);
+  mtime += 10;
+  fs.utimesSync(file, mtime, mtime);
 }
 
 describe('getConfig() in production', () => {
   beforeEach(() => {
     vi.stubEnv('NODE_ENV', 'production');
+    dir = fs.mkdtempSync(path.join(os.tmpdir(), 'folio-config-cache-'));
+    fs.mkdirSync(path.join(dir, 'content'));
+    vi.spyOn(process, 'cwd').mockReturnValue(dir);
+    write('gallery.yaml', `albums:\n  - "${ALBUM_ID}"\n`);
+    write('settings.yaml', 'title: Old Title\n');
     invalidateConfigCache();
+    vi.mocked(loadYaml).mockClear();
   });
 
   afterEach(() => {
+    vi.restoreAllMocks();
     vi.unstubAllEnvs();
+    fs.rmSync(dir, { recursive: true, force: true });
   });
 
   it('picks up settings.yaml changes without invalidateConfigCache()', () => {
     // An admin save may run in a different worker/process than page
     // rendering, so this worker never sees invalidateConfigCache().
-    // getConfig() must delegate freshness to the mtime-checked YAML layer
-    // instead of short-circuiting on a stale in-memory copy.
-    mockYamlFiles({ title: 'Old Title' });
+    // getConfig() must notice the file changed instead of short-circuiting
+    // on a stale in-memory copy.
     expect(getConfig().siteTitle).toBe('Old Title');
 
-    mockYamlFiles({ title: 'New Title' });
+    write('settings.yaml', 'title: New Title\n');
     expect(getConfig().siteTitle).toBe('New Title');
   });
+
+  it('picks up gallery.yaml changes without invalidateConfigCache()', () => {
+    expect(getConfig().albums).toEqual([ALBUM_ID]);
+
+    const other = '22222222-2222-2222-2222-222222222222';
+    write('gallery.yaml', `albums:\n  - "${ALBUM_ID}"\n  - "${other}"\n`);
+    expect(getConfig().albums).toEqual([ALBUM_ID, other]);
+  });
+
+  it('notices about.md appearing', () => {
+    expect(getConfig().aboutEnabled).toBe(false);
+
+    write('about.md', '---\nname: Someone\n---\n');
+    expect(getConfig().aboutEnabled).toBe(true);
+  });
+
+  it('notices install.json credentials appearing', () => {
+    // env supplies the URL; the file is still watched.
+    write('install.json', JSON.stringify({ apiUrl: 'http://file:2283', apiKey: 'file-key' }));
+    getConfig();
+    expect(vi.mocked(loadYaml)).toHaveBeenCalledTimes(2);
+
+    write('install.json', JSON.stringify({ apiUrl: 'http://file:2283', apiKey: 'other' }));
+    getConfig();
+    expect(vi.mocked(loadYaml)).toHaveBeenCalledTimes(4);
+  });
+
+  // Every image request and every page render call getConfig() many times
+  // over. Deriving the whole config each time cost ~150µs a call; the files
+  // did not change in between.
+  it('derives the config once while its files are unchanged', () => {
+    for (let i = 0; i < 100; i++) getConfig();
+
+    // gallery.yaml and settings.yaml, once — not 200 reads.
+    expect(vi.mocked(loadYaml)).toHaveBeenCalledTimes(2);
+  });
+
+  it('derives again after invalidateConfigCache()', () => {
+    getConfig();
+    invalidateConfigCache();
+    getConfig();
+
+    expect(vi.mocked(loadYaml)).toHaveBeenCalledTimes(4);
+  });
+
+  it('hands every caller its own copy', () => {
+    const first = getConfig();
+    first.albums.push('mutated');
+    first.siteTitle = 'mutated';
+
+    const second = getConfig();
+    expect(second.albums).toEqual([ALBUM_ID]);
+    expect(second.siteTitle).toBe('Old Title');
+  });
 });
diff --git a/lib/__tests__/config-default-title.test.ts b/lib/__tests__/config-default-title.test.ts
new file mode 100644
index 0000000..35224e8
--- /dev/null
+++ b/lib/__tests__/config-default-title.test.ts
@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// No SITE_TITLE, so the title has to come from the locale.
+vi.mock('@/lib/env', () => ({
+  env: {
+    IMMICH_API_URL: 'http://localhost:2283',
+    IMMICH_API_KEY: 'test-key',
+    SITE_TITLE: '',
+    SITE_SUBTITLE: '',
+    CACHE_TTL: 300,
+    RATE_LIMIT_RPM: 120,
+  },
+  normalizeApiUrl: (raw: string) => raw.replace(/\/+$/, ''),
+}));
+
+vi.mock('@/lib/secret', () => ({
+  resolveAuthSecret: () => 'test-auth-secret-32-chars-long-min',
+}));
+
+vi.mock('@/lib/config/parser', () => ({
+  loadYaml: vi.fn(),
+  clearYamlCache: vi.fn(),
+  validateUuid: (id: string) => id,
+}));
+
+import { getConfig, invalidateConfigCache } from '@/lib/config';
+import { loadYaml } from '@/lib/config/parser';
+
+const ALBUM_ID = '11111111-1111-1111-1111-111111111111';
+
+function mockYamlFiles(settings: Record<string, unknown>) {
+  vi.mocked(loadYaml).mockImplementation((filename: string) => {
+    if (filename === 'gallery.yaml') return { albums: [ALBUM_ID] };
+    if (filename === 'settings.yaml') return settings;
+    return null;
+  });
+}
+
+// With neither settings.yaml `title` nor SITE_TITLE set, the site used to be
+// called "Gallery" in every language (#696).
+describe('default site title', () => {
+  beforeEach(() => invalidateConfigCache());
+
+  it('uses the configured locale', () => {
+    mockYamlFiles({ lang: 'de' });
+    expect(getConfig().siteTitle).toBe('Galerie');
+    expect(getConfig().seo.title).toBe('Galerie');
+  });
+
+  it('falls back to English for an unsupported locale', () => {
+    mockYamlFiles({ lang: 'ja' });
+    expect(getConfig().siteTitle).toBe('Gallery');
+  });
+
+  it('keeps an explicit title', () => {
+    mockYamlFiles({ lang: 'de', title: 'Mein Folio' });
+    expect(getConfig().siteTitle).toBe('Mein Folio');
+  });
+});
diff --git a/lib/__tests__/config-memo-tracing.test.ts b/lib/__tests__/config-memo-tracing.test.ts
new file mode 100644
index 0000000..12be4f7
--- /dev/null
+++ b/lib/__tests__/config-memo-tracing.test.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+
+/**
+ * configInputs() stats a list of paths it builds at runtime. Turbopack cannot
+ * resolve a path that arrives through a variable, so it traces the whole
+ * project into `.next/standalone` — app/, docs/, e2e/, the real content files —
+ * and the Docker image copies all of it (#753 did this, ~70 MB). The ignore
+ * comment is the documented opt-out; the stat only reads an mtime, and the
+ * files themselves are loaded (and traced) by loadYaml() and readInstallFile().
+ *
+ * The build prints a warning when this regresses, but nothing fails, so the
+ * check lives here.
+ */
+
+const source = fs.readFileSync(path.join(__dirname, '..', 'config', 'index.ts'), 'utf8');
+
+/** The body of configInputs(), up to the next top-level declaration. */
+const body = source.match(/function configInputs\(\)[\s\S]*?\n}\n/)?.[0] ?? '';
+
+describe('config memo key and output file tracing', () => {
+  it('finds configInputs()', () => {
+    expect(body).toContain('statSync');
+  });
+
+  it('marks every filesystem call in configInputs() as ignored by Turbopack', () => {
+    const calls = body.match(/fs\.\w+\([^)]*/g) ?? [];
+    expect(calls.length).toBeGreaterThan(0);
+    const unmarked = calls.filter(
+      (call) => !/^fs\.\w+\(\s*\/\*\s*turbopackIgnore: true\s*\*\//.test(call),
+    );
+    expect(unmarked).toEqual([]);
+  });
+});
diff --git a/lib/__tests__/content-version.test.ts b/lib/__tests__/content-version.test.ts
new file mode 100644
index 0000000..ad33730
--- /dev/null
+++ b/lib/__tests__/content-version.test.ts
@@ -0,0 +1,194 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import os from 'os';
+import path from 'path';
+import { mkdtemp, mkdir, readFile, readdir, rm, writeFile } from 'fs/promises';
+import {
+  ABSENT_VERSION,
+  VersionConflictError,
+  assertVersion,
+  baseVersionFrom,
+  fileVersion,
+  serializeContentWrite,
+  versionOf,
+} from '../admin/contentVersion';
+
+/**
+ * Concurrent-edit detection (#601): a save carrying the version its editor
+ * loaded is refused when the file changed since; a save without one is
+ * written as before.
+ *
+ * The services resolve content/ from process.cwd() at import time, so each
+ * test points cwd at a fresh temp directory and re-imports them.
+ */
+let root: string;
+let contentDir: string;
+
+beforeEach(async () => {
+  root = await mkdtemp(path.join(os.tmpdir(), 'folio-version-'));
+  contentDir = path.join(root, 'content');
+  await mkdir(path.join(contentDir, 'journal'), { recursive: true });
+  vi.spyOn(process, 'cwd').mockReturnValue(root);
+  vi.spyOn(console, 'log').mockImplementation(() => {});
+  vi.resetModules();
+});
+
+afterEach(async () => {
+  vi.restoreAllMocks();
+  await rm(root, { recursive: true, force: true });
+});
+
+/** By name: the services are re-imported per test, so their error class is a different copy. */
+const conflict = expect.objectContaining({ name: 'VersionConflictError' });
+
+const put = (ifMatch?: string) =>
+  new Request('http://localhost/x', {
+    method: 'PUT',
+    headers: ifMatch === undefined ? {} : { 'If-Match': ifMatch },
+  });
+
+describe('contentVersion helpers', () => {
+  it('versions content by its bytes, and a missing file as absent', async () => {
+    expect(versionOf('a')).toBe(versionOf(Buffer.from('a')));
+    expect(versionOf('a')).not.toBe(versionOf('b'));
+    expect(versionOf(null)).toBe(ABSENT_VERSION);
+    await expect(fileVersion(path.join(root, 'nope'))).resolves.toBe(ABSENT_VERSION);
+    await writeFile(path.join(root, 'f'), 'a');
+    await expect(fileVersion(path.join(root, 'f'))).resolves.toBe(versionOf('a'));
+  });
+
+  it('reads If-Match in bare, quoted and weak form; * and absent mean no check', () => {
+    expect(baseVersionFrom(put('abc'))).toBe('abc');
+    expect(baseVersionFrom(put('"abc"'))).toBe('abc');
+    expect(baseVersionFrom(put('W/"abc"'))).toBe('abc');
+    expect(baseVersionFrom(put('*'))).toBeUndefined();
+    expect(baseVersionFrom(put())).toBeUndefined();
+  });
+
+  it('assertVersion passes on a match or no base, and throws with the current version', async () => {
+    const file = path.join(root, 'f');
+    await writeFile(file, 'now');
+    await expect(assertVersion(file, versionOf('now'))).resolves.toBeUndefined();
+    await expect(assertVersion(file, undefined)).resolves.toBeUndefined();
+    const err = await assertVersion(file, versionOf('before')).catch((e) => e);
+    expect(err).toBeInstanceOf(VersionConflictError);
+    expect(err.currentVersion).toBe(versionOf('now'));
+  });
+
+  it('runs queued writes one at a time, and a failure does not stall the queue', async () => {
+    const order: string[] = [];
+    const slow = serializeContentWrite(async () => {
+      order.push('a:start');
+      await new Promise((r) => setTimeout(r, 20));
+      order.push('a:end');
+    });
+    const failing = serializeContentWrite(async () => {
+      order.push('b');
+      throw new Error('boom');
+    });
+    const after = serializeContentWrite(async () => order.push('c'));
+    await Promise.allSettled([slow, failing, after]);
+    await expect(failing).rejects.toThrow('boom');
+    expect(order).toEqual(['a:start', 'a:end', 'b', 'c']);
+  });
+});
+
+describe('yaml-service', () => {
+  it('writes settings.yaml when the base version matches, and refuses when it does not', async () => {
+    const service = await import('../admin/yaml-service');
+    const settingsPath = path.join(contentDir, 'settings.yaml');
+    await writeFile(settingsPath, 'title: One\n');
+
+    const loaded = await service.readSettingsYamlVersioned();
+    expect(loaded.data).toEqual({ title: 'One' });
+
+    // Another tab saves first.
+    const second = await service.writeSettingsYaml({ title: 'Two' }, loaded.version);
+    expect(second).toBe(versionOf(await readFile(settingsPath)));
+
+    // This tab still holds the first version.
+    await expect(service.writeSettingsYaml({ title: 'Three' }, loaded.version)).rejects.toEqual(
+      expect.objectContaining({ name: 'VersionConflictError', currentVersion: second }),
+    );
+    expect(await service.readSettingsYaml()).toEqual({ title: 'Two' });
+  });
+
+  it('still writes without a base version (older clients)', async () => {
+    const service = await import('../admin/yaml-service');
+    await writeFile(path.join(contentDir, 'gallery.yaml'), 'hero: []\n');
+    await service.writeGalleryYaml({ hero: ['x'] } as never);
+    expect(await service.readGalleryYaml()).toEqual({ hero: ['x'] });
+  });
+
+  it('treats a file created since an absent load as a conflict', async () => {
+    const service = await import('../admin/yaml-service');
+    const loaded = await service.readGalleryYamlVersioned();
+    expect(loaded.version).toBe(ABSENT_VERSION);
+    await writeFile(path.join(contentDir, 'gallery.yaml'), 'hero: []\n');
+    await expect(service.writeGalleryYaml({ hero: [] } as never, loaded.version)).rejects.toEqual(
+      conflict,
+    );
+  });
+});
+
+const md = (title: string) => `---\ntitle: "${title}"\n---\n\nBody of ${title}\n`;
+
+describe('journal-service saveJournalEntry', () => {
+  it('saves on a matching version and refuses a stale one', async () => {
+    const service = await import('../admin/journal-service');
+    const file = path.join(contentDir, 'journal', 'trip.md');
+    await writeFile(file, md('One'));
+    const base = versionOf(md('One'));
+
+    await expect(service.saveJournalEntry('trip', md('Two'), { baseVersion: base })).resolves.toBe(
+      versionOf(md('Two')),
+    );
+    await expect(
+      service.saveJournalEntry('trip', md('Three'), { baseVersion: base }),
+    ).rejects.toEqual(conflict);
+    await expect(readFile(file, 'utf8')).resolves.toBe(md('Two'));
+    // No base: written as before.
+    await service.saveJournalEntry('trip', md('Four'));
+    await expect(readFile(file, 'utf8')).resolves.toBe(md('Four'));
+  });
+
+  it('checks a rename against the source entry and leaves both files alone on conflict', async () => {
+    const service = await import('../admin/journal-service');
+    const dir = path.join(contentDir, 'journal');
+    await writeFile(path.join(dir, 'old.md'), md('Changed elsewhere'));
+
+    const err = await service
+      .saveJournalEntry('new', md('Mine'), {
+        baseVersion: versionOf(md('Loaded')),
+        fromSlug: 'old',
+      })
+      .catch((e) => e);
+    expect(err).toEqual(conflict);
+    expect((await readdir(dir)).filter((f) => f.endsWith('.md'))).toEqual(['old.md']);
+
+    await service.saveJournalEntry('new', md('Mine'), {
+      baseVersion: versionOf(md('Changed elsewhere')),
+      fromSlug: 'old',
+    });
+    expect((await readdir(dir)).filter((f) => f.endsWith('.md'))).toEqual(['new.md']);
+  });
+});
+
+describe('pages-service savePage', () => {
+  it('saves on a matching version, refuses a stale one, and renames', async () => {
+    const service = await import('../admin/pages-service');
+    const dir = path.join(contentDir, 'pages');
+    await mkdir(dir, { recursive: true });
+    await writeFile(path.join(dir, 'faq.md'), md('FAQ'));
+
+    await expect(
+      service.savePage('faq', md('Stale'), { baseVersion: versionOf(md('Other')) }),
+    ).rejects.toEqual(conflict);
+    await expect(readFile(path.join(dir, 'faq.md'), 'utf8')).resolves.toBe(md('FAQ'));
+
+    await service.savePage('help', md('Help'), {
+      baseVersion: versionOf(md('FAQ')),
+      fromSlug: 'faq',
+    });
+    expect((await readdir(dir)).filter((f) => f.endsWith('.md'))).toEqual(['help.md']);
+  });
+});
diff --git a/lib/__tests__/content-write-guard.test.ts b/lib/__tests__/content-write-guard.test.ts
new file mode 100644
index 0000000..3644ace
--- /dev/null
+++ b/lib/__tests__/content-write-guard.test.ts
@@ -0,0 +1,93 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import fs from 'fs';
+import { writeFile as namedWriteFile, mkdtemp, readFile, rm } from 'fs/promises';
+import os from 'os';
+import path from 'path';
+import { guardedContentDir, takeContentWriteViolations } from '../../vitest.content-guard';
+
+/**
+ * The unit suite used to write a real journal entry into the checkout's
+ * content/ — the live site's directory in a deployment — and leave a
+ * .deleted.bak behind on every run. vitest.content-guard.ts refuses such
+ * writes; these tests pin that it catches each way code writes a file, and
+ * that it leaves reads and temp directories alone.
+ */
+const repoContent = path.resolve(__dirname, '..', '..', 'content');
+const target = path.join(repoContent, `.content-guard-test-${process.pid}`);
+
+function expectBlocked(write: () => unknown) {
+  expect(write).toThrow(/real content\/ directory/);
+  expect(fs.existsSync(target)).toBe(false);
+  expect(takeContentWriteViolations()).toHaveLength(1);
+}
+
+async function expectRejected(write: () => Promise<unknown>) {
+  await expect(write()).rejects.toThrow(/real content\/ directory/);
+  expect(fs.existsSync(target)).toBe(false);
+  expect(takeContentWriteViolations()).toHaveLength(1);
+}
+
+describe('content write guard', () => {
+  let tmp: string;
+
+  beforeEach(async () => {
+    tmp = await mkdtemp(path.join(os.tmpdir(), 'folio-guard-'));
+  });
+
+  afterEach(async () => {
+    vi.restoreAllMocks();
+    takeContentWriteViolations();
+    await rm(tmp, { recursive: true, force: true });
+  });
+
+  it('protects the checkout content/ directory', () => {
+    expect(guardedContentDir).toBe(repoContent);
+  });
+
+  it('rejects fs.promises writes, the named fs/promises import included', async () => {
+    await expectRejected(() => fs.promises.writeFile(target, 'x'));
+    await expectRejected(() => namedWriteFile(target, 'x'));
+    await expectRejected(() => fs.promises.mkdir(target, { recursive: true }));
+    await expectRejected(() => fs.promises.open(target, 'a+'));
+  });
+
+  it('blocks sync, callback and stream writes', () => {
+    expectBlocked(() => fs.writeFileSync(target, 'x'));
+    expectBlocked(() => fs.writeFile(target, 'x', () => {}));
+    expectBlocked(() => fs.mkdirSync(target, { recursive: true }));
+    expectBlocked(() => fs.appendFileSync(target, 'x'));
+    expectBlocked(() => fs.createWriteStream(target));
+  });
+
+  it('blocks opening for writing and moving, copying or removing a file', () => {
+    const outside = path.join(tmp, 'file');
+    fs.writeFileSync(outside, 'x');
+    expectBlocked(() => fs.openSync(target, 'w'));
+    expectBlocked(() => fs.renameSync(outside, target));
+    expectBlocked(() => fs.copyFileSync(outside, target));
+    expectBlocked(() => fs.unlinkSync(target));
+    expectBlocked(() => fs.rmSync(target, { force: true }));
+  });
+
+  it('still blocks when a test points process.cwd() elsewhere', () => {
+    vi.spyOn(process, 'cwd').mockReturnValue(tmp);
+    expectBlocked(() => fs.writeFileSync(target, 'x'));
+  });
+
+  it('records a blocked write even when the caller swallows the error', async () => {
+    await fs.promises.writeFile(target, 'x').catch(() => {});
+    expect(takeContentWriteViolations()).toHaveLength(1);
+  });
+
+  it('allows reads from content/ and writes anywhere else', async () => {
+    const example = path.join(repoContent, 'gallery.yaml.example');
+    await expect(readFile(example, 'utf8')).resolves.toContain('albums');
+    fs.closeSync(fs.openSync(example, 'r'));
+
+    const elsewhere = path.join(tmp, 'content', 'journal', 'entry.md');
+    fs.mkdirSync(path.dirname(elsewhere), { recursive: true });
+    await namedWriteFile(elsewhere, 'ok');
+    await expect(readFile(elsewhere, 'utf8')).resolves.toBe('ok');
+    expect(takeContentWriteViolations()).toEqual([]);
+  });
+});
diff --git a/lib/__tests__/doctor.test.ts b/lib/__tests__/doctor.test.ts
index d4391fb..5f51a75 100644
--- a/lib/__tests__/doctor.test.ts
+++ b/lib/__tests__/doctor.test.ts
@@ -13,6 +13,8 @@ import {
   checkContact,
   checkLegal,
   checkPrivacy,
+  checkContentPages,
+  checkSettingValues,
   worstLevel,
 } from '../admin/doctor';
 
@@ -444,3 +446,58 @@ describe('checkPrivacy', () => {
     );
   });
 });
+
+describe('checkContentPages (#722)', () => {
+  it('stays silent without pages or references', () => {
+    expect(checkContentPages({ menuRefs: [], pages: [], collisions: [] })).toBeNull();
+  });
+
+  it('is ok when every reference has a file and no slug is taken', () => {
+    const f = checkContentPages({
+      menuRefs: ['pricing'],
+      pages: ['pricing', 'faq'],
+      collisions: [],
+    });
+    expect(f?.level).toBe('ok');
+    expect(f?.id).toBe('content-pages');
+  });
+
+  it('warns about a menu reference without a file, naming it', () => {
+    const f = checkContentPages({
+      menuRefs: ['pricing', 'gone'],
+      pages: ['pricing'],
+      collisions: [],
+    });
+    expect(f?.level).toBe('warn');
+    expect(f?.detail).toContain('"gone"');
+  });
+
+  it('reports a slug collision as an error', () => {
+    const f = checkContentPages({
+      menuRefs: [],
+      pages: ['travel'],
+      collisions: [{ slug: 'travel', reason: '/travel is already a subpage.' }],
+    });
+    expect(f?.level).toBe('error');
+    expect(f?.detail).toContain('/travel is already a subpage.');
+  });
+});
+
+describe('checkSettingValues (QA A-14)', () => {
+  it('is ok when every checked value is used as written', () => {
+    expect(checkSettingValues([]).level).toBe('ok');
+  });
+
+  it('warns and names the fields the site replaces', () => {
+    const f = checkSettingValues([{ field: 'theme.accent' }, { field: 'grid.columns' }]);
+    expect(f.level).toBe('warn');
+    expect(f.title).toBe('2 settings are ignored');
+    expect(f.detail).toContain('accent colour, grid columns');
+  });
+
+  it('points at the settings section of the first field', () => {
+    expect(checkSettingValues([{ field: 'url' }]).settingsSection).toBe('seo');
+    expect(checkSettingValues([{ field: 'grid.gap' }]).settingsSection).toBe('grid');
+    expect(checkSettingValues([{ field: 'theme.accent' }]).settingsSection).toBe('theme');
+  });
+});
diff --git a/lib/__tests__/envLocks.test.ts b/lib/__tests__/envLocks.test.ts
new file mode 100644
index 0000000..931c540
--- /dev/null
+++ b/lib/__tests__/envLocks.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { ENV_LOCKS, keepLockedValues, resolveEnvLocks } from '../admin/envLocks';
+
+describe('resolveEnvLocks (#605)', () => {
+  it('locks nothing when no overriding variable is set', () => {
+    expect(resolveEnvLocks({})).toEqual({});
+    expect(resolveEnvLocks({ SITE_PASSWORD: '  ', CONTACT_NOTIFY_URL: undefined })).toEqual({});
+  });
+
+  it('maps each set variable to its settings path, by name only', () => {
+    const locks = resolveEnvLocks({
+      SITE_PASSWORD: 'hunter2',
+      CONTACT_NOTIFY_URL: 'https://ntfy.sh/secret-topic',
+    });
+    expect(locks).toEqual({
+      sitePassword: 'SITE_PASSWORD',
+      'contact.notifyUrl': 'CONTACT_NOTIFY_URL',
+    });
+    expect(JSON.stringify(locks)).not.toContain('hunter2');
+    expect(JSON.stringify(locks)).not.toContain('secret-topic');
+  });
+
+  it('does not lock title, subtitle or url: settings.yaml wins over those variables', () => {
+    const locks = resolveEnvLocks({ SITE_TITLE: 'T', SITE_SUBTITLE: 'S', SITE_URL: 'https://x' });
+    expect(locks).toEqual({});
+    expect(Object.keys(ENV_LOCKS)).not.toContain('title');
+  });
+});
+
+describe('keepLockedValues (#605)', () => {
+  const locks = { sitePassword: 'SITE_PASSWORD', 'contact.notifyUrl': 'CONTACT_NOTIFY_URL' };
+
+  it('puts the stored value back over an edited locked field', () => {
+    const out = keepLockedValues(
+      { title: 'New', sitePassword: 'changed', contact: { enabled: true, notifyUrl: 'https://b' } },
+      { sitePassword: 'scrypt:a:b', contact: { notifyUrl: 'https://a' } },
+      locks,
+    );
+    expect(out).toEqual({
+      title: 'New',
+      sitePassword: 'scrypt:a:b',
+      contact: { enabled: true, notifyUrl: 'https://a' },
+    });
+  });
+
+  it('drops a locked value the file never had', () => {
+    const out = keepLockedValues(
+      { sitePassword: 'new', contact: { notifyUrl: 'https://b' } },
+      {},
+      locks,
+    );
+    expect(out).toEqual({ contact: {} });
+  });
+
+  it('leaves unlocked fields alone and does not mutate the input', () => {
+    const incoming = { sitePassword: 'new' };
+    expect(keepLockedValues(incoming, { sitePassword: 'old' }, {})).toEqual({
+      sitePassword: 'new',
+    });
+    keepLockedValues(incoming, { sitePassword: 'old' }, locks);
+    expect(incoming.sitePassword).toBe('new');
+  });
+});
diff --git a/lib/__tests__/essay-source.test.ts b/lib/__tests__/essay-source.test.ts
index e0092ec..f097f54 100644
--- a/lib/__tests__/essay-source.test.ts
+++ b/lib/__tests__/essay-source.test.ts
@@ -62,7 +62,7 @@ describe('resolveEssayFile', () => {
   });
 
   it('locks a password-protected entry without a cookie', () => {
-    expect(resolveEssayFile('locked', anonymous)).toEqual({ status: 'locked', title: 'Locked' });
+    expect(resolveEssayFile('locked', anonymous)).toEqual({ status: 'locked' });
   });
 
   it('keeps the entry locked for the admin, like /journal/<slug> does', () => {
diff --git a/lib/__tests__/i18n.test.ts b/lib/__tests__/i18n.test.ts
index 6a91553..f287795 100644
--- a/lib/__tests__/i18n.test.ts
+++ b/lib/__tests__/i18n.test.ts
@@ -219,3 +219,160 @@ describe('plural helpers', () => {
     },
   );
 });
+
+/**
+ * Count strings at the CLDR boundaries. French puts 0 in the singular ("0 photo"),
+ * the other five use the singular for exactly 1 — so a shared `n === 1` helper
+ * was wrong for French, and a hard-coded plural noun ("(1 items)") was wrong for
+ * everyone at 1. Italian "foto"/"album" and the Dutch/German participles are
+ * invariable, which the table spells out rather than skips.
+ */
+type Counted = (d: Dictionary, n: number) => string;
+const COUNTED = {
+  photos: (d, n) => d.common.photos(n),
+  albums: (d, n) => d.common.albums(n),
+  collections: (d, n) => d.common.collections(n),
+  selected: (d, n) => d.proofing.selected(n),
+  mailSubject: (d, n) => d.proofing.mailSubject(n),
+  downloadsLeft: (d, n) => d.proofSession.downloadsLeft(n),
+} satisfies Record<string, Counted>;
+type CountedKey = keyof typeof COUNTED;
+
+const PLURAL_TABLE: [string, Dictionary, Record<CountedKey, [string, string, string]>][] = [
+  [
+    'en',
+    en,
+    {
+      photos: ['0 photos', '1 photo', '2 photos'],
+      albums: ['0 albums', '1 album', '2 albums'],
+      collections: ['0 collections', '1 collection', '2 collections'],
+      selected: ['❤️ 0 Selected', '❤️ 1 Selected', '❤️ 2 Selected'],
+      mailSubject: [
+        'Photo Selection (0 items)',
+        'Photo Selection (1 item)',
+        'Photo Selection (2 items)',
+      ],
+      downloadsLeft: ['0 downloads left', '1 download left', '2 downloads left'],
+    },
+  ],
+  [
+    'de',
+    de,
+    {
+      photos: ['0 Fotos', '1 Foto', '2 Fotos'],
+      albums: ['0 Alben', '1 Album', '2 Alben'],
+      collections: ['0 Sammlungen', '1 Sammlung', '2 Sammlungen'],
+      selected: ['❤️ 0 ausgewählt', '❤️ 1 ausgewählt', '❤️ 2 ausgewählt'],
+      mailSubject: ['Fotoauswahl (0 Fotos)', 'Fotoauswahl (1 Foto)', 'Fotoauswahl (2 Fotos)'],
+      downloadsLeft: ['Noch 0 Downloads', 'Noch 1 Download', 'Noch 2 Downloads'],
+    },
+  ],
+  [
+    'fr',
+    fr,
+    {
+      photos: ['0 photo', '1 photo', '2 photos'],
+      albums: ['0 album', '1 album', '2 albums'],
+      collections: ['0 collection', '1 collection', '2 collections'],
+      selected: ['❤️ 0 sélectionnée', '❤️ 1 sélectionnée', '❤️ 2 sélectionnées'],
+      mailSubject: [
+        'Sélection de photos (0)',
+        'Sélection de photos (1)',
+        'Sélection de photos (2)',
+      ],
+      downloadsLeft: [
+        '0 téléchargement restant',
+        '1 téléchargement restant',
+        '2 téléchargements restants',
+      ],
+    },
+  ],
+  [
+    'es',
+    es,
+    {
+      photos: ['0 fotos', '1 foto', '2 fotos'],
+      albums: ['0 álbumes', '1 álbum', '2 álbumes'],
+      collections: ['0 colecciones', '1 colección', '2 colecciones'],
+      selected: ['❤️ 0 seleccionadas', '❤️ 1 seleccionada', '❤️ 2 seleccionadas'],
+      mailSubject: ['Selección de fotos (0)', 'Selección de fotos (1)', 'Selección de fotos (2)'],
+      downloadsLeft: ['0 descargas restantes', '1 descarga restante', '2 descargas restantes'],
+    },
+  ],
+  [
+    'it',
+    itIT,
+    {
+      photos: ['0 foto', '1 foto', '2 foto'],
+      albums: ['0 album', '1 album', '2 album'],
+      collections: ['0 collezioni', '1 collezione', '2 collezioni'],
+      selected: ['❤️ 0 selezionate', '❤️ 1 selezionata', '❤️ 2 selezionate'],
+      mailSubject: ['Selezione di foto (0)', 'Selezione di foto (1)', 'Selezione di foto (2)'],
+      downloadsLeft: ['0 download rimasti', '1 download rimasto', '2 download rimasti'],
+    },
+  ],
+  [
+    'nl',
+    nl,
+    {
+      photos: ['0 foto’s', '1 foto', '2 foto’s'],
+      albums: ['0 albums', '1 album', '2 albums'],
+      collections: ['0 collecties', '1 collectie', '2 collecties'],
+      selected: ['❤️ 0 geselecteerd', '❤️ 1 geselecteerd', '❤️ 2 geselecteerd'],
+      mailSubject: ['Fotoselectie (0)', 'Fotoselectie (1)', 'Fotoselectie (2)'],
+      downloadsLeft: ['Nog 0 downloads', 'Nog 1 download', 'Nog 2 downloads'],
+    },
+  ],
+];
+
+describe('plural forms at 0, 1 and 2', () => {
+  it('cover every supported locale', () => {
+    expect(PLURAL_TABLE.map(([code]) => code).sort()).toEqual([...SUPPORTED_LOCALES].sort());
+  });
+
+  describe.each(PLURAL_TABLE)('%s', (_code, dict, expected) => {
+    it.each(Object.keys(COUNTED) as CountedKey[])('%s', (key) => {
+      expect([0, 1, 2].map((n) => COUNTED[key](dict, n))).toEqual(expected[key]);
+    });
+  });
+
+  it.each([
+    ['en', en, ['0 days.', '1 day.', '2 days.']],
+    ['de', de, ['0 Tagen gelöscht.', '1 Tag gelöscht.', '2 Tagen gelöscht.']],
+    ['fr', fr, ['0 jour.', '1 jour.', '2 jours.']],
+    ['es', es, ['0 días.', '1 día.', '2 días.']],
+    ['it', itIT, ['0 giorni.', '1 giorno.', '2 giorni.']],
+    ['nl', nl, ['0 dagen verwijderd.', '1 dag verwijderd.', '2 dagen verwijderd.']],
+  ] as const)('contact retention days in %s', (_code, dict, endings) => {
+    const got = [0, 1, 2].map((n) => dict.contact.privacy(n));
+    got.forEach((text, i) => expect(text.endsWith(` ${endings[i]}`), text).toBe(true));
+  });
+});
+
+describe('German terminology', () => {
+  // The carousel said "Diashow", the lightbox's shortcut panel and live
+  // region "Diaschau" for the same feature.
+  it('calls the slideshow "Diashow" everywhere', () => {
+    const strings = [
+      de.home.pauseSlideshow,
+      de.home.playSlideshow,
+      de.lightbox.shortcutSlideshow,
+      de.lightbox.shortcutSlideshowRunning(5),
+      de.lightbox.slideshowStopped,
+      de.lightbox.slideshowRunning(5),
+    ];
+    for (const s of strings) expect(s).toContain('Diashow');
+  });
+
+  it('leaves no "Diaschau" in any string', () => {
+    const walk = (value: unknown): string[] =>
+      typeof value === 'string'
+        ? [value]
+        : typeof value === 'function'
+          ? [String((value as (n: number) => string)(2))]
+          : value && typeof value === 'object'
+            ? Object.values(value).flatMap(walk)
+            : [];
+    expect(walk(de).filter((s) => s.includes('Diaschau'))).toEqual([]);
+  });
+});
diff --git a/lib/__tests__/image-url-per-tier.test.ts b/lib/__tests__/image-url-per-tier.test.ts
new file mode 100644
index 0000000..e161387
--- /dev/null
+++ b/lib/__tests__/image-url-per-tier.test.ts
@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest';
+import { getImgProps } from 'next/dist/shared/lib/get-img-props';
+import { imageConfigDefault } from 'next/dist/shared/lib/image-config';
+import immichLoader from '../immichLoader';
+import { canonicalImageUrl, resolveImageSize } from '../imageSize';
+
+/**
+ * The proxy answers every width inside an Immich tier with the same bytes, but
+ * each distinct URL is its own `immutable` cache entry. next/image used to
+ * write a different `?w=` into every srcset candidate and the lightbox asked
+ * for the bare URL, so a grid tile and the same photo in the lightbox — or a
+ * tile before and after a rotation — downloaded the identical preview twice.
+ */
+
+const PREVIEW = '/api/image/v2:tok?size=preview';
+const THUMB = '/api/image/v2:tok?size=thumbnail';
+
+const ALL_WIDTHS = [...imageConfigDefault.deviceSizes, ...imageConfigDefault.imageSizes];
+
+function srcSetUrls(src: string, sizes: string): string[] {
+  const { props } = getImgProps(
+    { src, alt: '', fill: true, sizes },
+    {
+      defaultLoader: immichLoader,
+      imgConf: { ...imageConfigDefault, loader: 'custom', loaderFile: './lib/immichLoader.ts' },
+      showAltText: false,
+      blurComplete: false,
+    },
+  );
+  return (props.srcSet ?? '').split(', ').map((candidate) => candidate.split(' ')[0]);
+}
+
+const tierOf = (url: string) => {
+  const params = new URLSearchParams(url.slice(url.indexOf('?') + 1));
+  return resolveImageSize(params.get('size'), params.get('w'));
+};
+
+describe('one image URL per asset and tier', () => {
+  it.each([
+    ['PhotoGrid', '(max-width: 600px) 50vw, (max-width: 1000px) 33vw, 25vw'],
+    ['SubpageGridView', '(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw'],
+    ['album hero', '100vw'],
+    ['home hero', '(max-width: 640px) 100vw, 50vw'],
+    ['essay', '(max-width: 1100px) 100vw, 1100px'],
+  ])('every %s srcset candidate is the URL the lightbox opens', (_name, sizes) => {
+    const urls = srcSetUrls(PREVIEW, sizes);
+    expect(urls.length).toBeGreaterThan(3);
+    expect(new Set(urls)).toEqual(new Set([canonicalImageUrl(PREVIEW)]));
+  });
+
+  it('collapses a thumbnail-ceiling image to one URL as well', () => {
+    expect(new Set(srcSetUrls(THUMB, '25vw'))).toEqual(new Set([canonicalImageUrl(THUMB)]));
+  });
+
+  it('asks the proxy for the same rendition the raw width did', () => {
+    for (const size of ['thumbnail', 'preview', 'original', null]) {
+      const src = size ? `/api/image/v2:tok?size=${size}` : '/api/image/v2:tok';
+      for (const w of [...ALL_WIDTHS, 1, 250, 251, 1440, 1441, 99999]) {
+        expect(tierOf(canonicalImageUrl(src, w))).toBe(resolveImageSize(size, String(w)));
+      }
+    }
+  });
+
+  it('keeps the cache buster and writes a width next/image accepts', () => {
+    expect(canonicalImageUrl('/api/image/v2:tok?size=preview&v=7', 640)).toBe(
+      '/api/image/v2:tok?size=preview&v=7&w=1440',
+    );
+    expect(canonicalImageUrl('https://cdn.example.com/api/image/v2:tok?size=thumbnail', 96)).toBe(
+      'https://cdn.example.com/api/image/v2:tok?size=thumbnail&w=250',
+    );
+    expect(immichLoader({ src: PREVIEW, width: 400 })).not.toBe(PREVIEW);
+  });
+});
diff --git a/lib/__tests__/immich-follows-content.test.ts b/lib/__tests__/immich-follows-content.test.ts
new file mode 100644
index 0000000..7c38a9b
--- /dev/null
+++ b/lib/__tests__/immich-follows-content.test.ts
@@ -0,0 +1,230 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+/**
+ * Public pages follow admin saves (A-2) and the page builder's album order
+ * (A-6).
+ *
+ * An admin save lands in another module instance (Next bundles each route
+ * separately), so its immich.invalidateAll() never reached the cache the
+ * pages read. The album list was cached with the allowlist and the
+ * gallery.yaml titles and descriptions already applied, and the public site
+ * kept serving the old ones for up to CACHE_TTL. These tests use the real
+ * getConfig() on a temp content directory: the only signal a save leaves is
+ * the new mtime of gallery.yaml.
+ */
+
+vi.mock('@/lib/env', () => ({
+  env: {
+    IMMICH_API_URL: 'http://immich.test',
+    IMMICH_API_KEY: 'test-key',
+    SITE_TITLE: 'Test Gallery',
+    SITE_SUBTITLE: '',
+    CACHE_TTL: 300,
+    STALE_MAX_AGE: 86_400,
+    IMMICH_TIMEOUT_MS: 15_000,
+    RATE_LIMIT_RPM: 120,
+  },
+  normalizeApiUrl: (raw: string) => raw.replace(/\/+$/, ''),
+}));
+
+vi.mock('@/lib/secret', () => ({
+  resolveAuthSecret: () => 'test-auth-secret-32-chars-long-min',
+}));
+
+import { invalidateConfigCache } from '@/lib/config';
+import { cache } from '@/lib/cache';
+import { immich } from '@/lib/immich';
+
+const A = '11111111-1111-4111-8111-111111111111';
+const B = '22222222-2222-4222-8222-222222222222';
+const C = '33333333-3333-4333-8333-333333333333';
+const NEW = '44444444-4444-4444-8444-444444444444';
+
+let dir: string;
+let mtime = Date.now() / 1000;
+let immichAlbums: { id: string; albumName: string; description: string; assetCount: number }[];
+const fetchMock = vi.fn();
+
+/** Write a content file with a distinct mtime, the way a save from another instance lands. */
+function write(name: string, body: string) {
+  const file = path.join(dir, 'content', name);
+  fs.writeFileSync(file, body);
+  mtime += 10;
+  fs.utimesSync(file, mtime, mtime);
+}
+
+const json = (body: unknown) => ({
+  ok: true,
+  status: 200,
+  headers: { get: () => 'application/json' },
+  json: async () => body,
+});
+
+const listRequests = () =>
+  fetchMock.mock.calls.filter(([url]) => String(url).endsWith('/albums?shared=true')).length;
+
+beforeEach(() => {
+  vi.stubEnv('NODE_ENV', 'production');
+  dir = fs.mkdtempSync(path.join(os.tmpdir(), 'folio-immich-follows-'));
+  fs.mkdirSync(path.join(dir, 'content'));
+  vi.spyOn(process, 'cwd').mockReturnValue(dir);
+  write('settings.yaml', 'title: Test\n');
+  invalidateConfigCache();
+  cache.clear();
+  immichAlbums = [
+    // Immich answers in its own order (last updated first, say).
+    { id: C, albumName: 'Gamma', description: 'from Immich', assetCount: 3 },
+    { id: A, albumName: 'Alpha', description: '', assetCount: 1 },
+    { id: B, albumName: 'Beta', description: '', assetCount: 2 },
+  ];
+  fetchMock.mockReset();
+  fetchMock.mockImplementation(async (url: string) => {
+    if (String(url).endsWith('/albums?shared=true')) return json(immichAlbums);
+    return { ok: false, status: 404, headers: { get: () => 'application/json' } };
+  });
+  vi.stubGlobal('fetch', fetchMock);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+  fs.rmSync(dir, { recursive: true, force: true });
+});
+
+describe('public album data follows a gallery.yaml save (A-2)', () => {
+  it('shows a new title and description on the next call, without asking Immich again', async () => {
+    write('gallery.yaml', `albums:\n  - "${A}"\n  - "${B}"\n`);
+    const before = await immich.getAlbums();
+    expect(before.map((a) => a.albumName)).toEqual(['Alpha', 'Beta']);
+    expect(listRequests()).toBe(1);
+
+    // The admin saves in another module instance: no invalidation reaches us.
+    write(
+      'gallery.yaml',
+      `albums:\n  - "${A}":\n      title: "Alpha, renamed"\n      description: "Now described"\n  - "${B}"\n`,
+    );
+
+    const after = await immich.getAlbums();
+    const alpha = after.find((a) => a.id === A)!;
+    expect(alpha.albumName).toBe('Alpha, renamed');
+    expect(alpha.description).toBe('Now described');
+    expect(alpha.slug).toBe('alpha-renamed');
+    expect(listRequests()).toBe(1);
+  });
+
+  it('drops an unpublished album and adds a newly published one at once', async () => {
+    write('gallery.yaml', `albums:\n  - "${A}"\n  - "${B}"\n`);
+    expect((await immich.getAlbums()).map((a) => a.id)).toEqual([A, B]);
+
+    write('gallery.yaml', `albums:\n  - "${B}"\n  - "${C}"\n`);
+    expect((await immich.getAlbums()).map((a) => a.id).sort()).toEqual([B, C].sort());
+    expect(listRequests()).toBe(1);
+  });
+
+  it('refetches the list once for an album created in Immich after it was cached', async () => {
+    write('gallery.yaml', `albums:\n  - "${A}"\n`);
+    await immich.getAlbums();
+
+    immichAlbums = [
+      ...immichAlbums,
+      { id: NEW, albumName: 'Fresh', description: '', assetCount: 1 },
+    ];
+    write('gallery.yaml', `albums:\n  - "${A}"\n  - "${NEW}"\n`);
+    expect((await immich.getAlbums()).map((a) => a.id)).toContain(NEW);
+    expect(listRequests()).toBe(2);
+
+    // Cached again, and an allowlisted album Immich does not know (deleted)
+    // costs no request per call.
+    write(
+      'gallery.yaml',
+      `albums:\n  - "${A}"\n  - "${NEW}"\n  - "${'5'.repeat(8)}-5555-4555-8555-555555555555"\n`,
+    );
+    await immich.getAlbums();
+    await immich.getAlbums();
+    await immich.getAlbums();
+    expect(listRequests()).toBe(3);
+  });
+
+  it('applies overrides to a single album from the cache as well', async () => {
+    fetchMock.mockImplementation(async (url: string) => {
+      if (String(url).includes('/search/metadata')) {
+        return json({ assets: { items: [], nextPage: null } });
+      }
+      if (String(url).endsWith(`/albums/${A}`)) {
+        return json({ id: A, albumName: 'Alpha', description: '', assetCount: 0, order: 'desc' });
+      }
+      return json(immichAlbums);
+    });
+    write('gallery.yaml', `albums:\n  - "${A}"\n`);
+    expect((await immich.getAlbum(A))?.albumName).toBe('Alpha');
+    const albumRequests = () =>
+      fetchMock.mock.calls.filter(([url]) => String(url).endsWith(`/albums/${A}`)).length;
+    expect(albumRequests()).toBe(1);
+
+    write('gallery.yaml', `albums:\n  - "${A}": Alpha Prime\n`);
+    const album = await immich.getAlbum(A);
+    expect(album?.albumName).toBe('Alpha Prime');
+    expect(album?.slug).toBe('alpha-prime');
+    expect(albumRequests()).toBe(1);
+  });
+});
+
+describe('subpage albums follow the configured order (A-6)', () => {
+  it('lists albums in gallery.yaml order, not Immich order', async () => {
+    write(
+      'gallery.yaml',
+      `subpages:\n  - name: Trips\n    albums:\n      - "${B}"\n      - "${A}"\n      - "${C}"\n`,
+    );
+    const result = await immich.getSubpageAlbums('trips');
+    expect(result?.albums.map((a) => a.id)).toEqual([B, A, C]);
+
+    // Rearranged in the page builder: the next call follows.
+    write(
+      'gallery.yaml',
+      `subpages:\n  - name: Trips\n    albums:\n      - "${C}"\n      - "${B}"\n      - "${A}"\n`,
+    );
+    const reordered = await immich.getSubpageAlbums('trips');
+    expect(reordered?.albums.map((a) => a.id)).toEqual([C, B, A]);
+    expect(listRequests()).toBe(1);
+  });
+
+  it('keeps section order across sections', async () => {
+    write(
+      'gallery.yaml',
+      [
+        'subpages:',
+        '  - name: Japan',
+        '    sections:',
+        '      - title: South',
+        '        albums:',
+        `          - "${B}"`,
+        '      - title: North',
+        '        albums:',
+        `          - "${C}"`,
+        `          - "${A}"`,
+        '',
+      ].join('\n'),
+    );
+    const result = await immich.getSubpageAlbums('japan');
+    expect(result?.albums.map((a) => a.id)).toEqual([B, C, A]);
+  });
+});
+
+describe('the cache is one per process, not one per module instance', () => {
+  it('is cleared for every instance by a clear in any of them', async () => {
+    vi.resetModules();
+    const other = await import('@/lib/cache');
+    expect(other.cache).not.toBe(cache);
+
+    cache.set('probe', 1, 60_000);
+    expect(other.cache.get('probe')).toBe(1);
+    expect(other.cache.size).toBe(cache.size);
+
+    other.cache.clear();
+    expect(cache.get('probe')).toBeNull();
+  });
+});
diff --git a/lib/__tests__/immich-setup-state.test.ts b/lib/__tests__/immich-setup-state.test.ts
index ab1dff0..646a31d 100644
--- a/lib/__tests__/immich-setup-state.test.ts
+++ b/lib/__tests__/immich-setup-state.test.ts
@@ -80,9 +80,11 @@ describe('ImmichClient — install state', () => {
    * The setup config carries an empty allowlist, so the filtered list is [] no
    * matter what Immich returned. Caching that made the gallery look empty until
    * the server restarted, because the wizard's invalidateAll() runs in another
-   * bundle's module instance and never reached this cache.
+   * bundle's module instance and never reached this cache. The cache now holds
+   * Immich's list as sent and the allowlist is applied per call, so the album
+   * shows up from the cached list without a second request.
    */
-  it('does not cache the empty album list while setup is unfinished', async () => {
+  it('does not keep the empty album list of the setup config after setup', async () => {
     const album = {
       id: 'album-1',
       albumName: 'Japan',
@@ -106,10 +108,9 @@ describe('ImmichClient — install state', () => {
     state.needsGallery = false;
     state.albums = ['album-1'];
 
-    mockFetch.mockResolvedValueOnce(respond());
     const after = await immich.getAlbums();
     expect(after.map((a) => a.id)).toEqual(['album-1']);
-    expect(mockFetch).toHaveBeenCalledTimes(2);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
   });
 
   it('makes no request at all when credentials are absent', async () => {
diff --git a/lib/__tests__/immich.test.ts b/lib/__tests__/immich.test.ts
index afc5eaf..2f08792 100644
--- a/lib/__tests__/immich.test.ts
+++ b/lib/__tests__/immich.test.ts
@@ -16,7 +16,8 @@ vi.mock('../config', async () => {
   const actual = await vi.importActual<typeof config>('../config');
   return {
     ...actual,
-    getConfig: () => ({
+    // A spy, so the tests below can count how often the client reads it.
+    getConfig: vi.fn(() => ({
       immich: { apiUrl: 'http://immich.test/api', apiKey: 'test-key' },
       authSecret: 'test-auth-secret-32-chars-long-min',
       albums: ['album-1', 'album-2'],
@@ -34,7 +35,7 @@ vi.mock('../config', async () => {
       cacheTtl: 60_000,
       staleMaxAge: 86_400_000,
       immichTimeoutMs: 15000,
-    }),
+    })),
   };
 });
 
@@ -567,6 +568,59 @@ describe('ImmichClient', () => {
     });
   });
 
+  /**
+   * getConfig() re-checks the content files and clones the whole config on
+   * every call, and the client used to call it once per property it read —
+   * four times per streamed image, twice per album on a list refresh.
+   */
+  describe('reads the config once per operation', () => {
+    const configReads = () => vi.mocked(config.getConfig).mock.calls.length;
+    const json = (body: unknown) => ({
+      ok: true,
+      headers: { get: () => 'application/json' },
+      json: async () => body,
+    });
+
+    it('streamAsset(): once per image', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        body: new ReadableStream(),
+        headers: { get: () => 'image/jpeg' },
+      });
+
+      await immich.streamAsset('asset-1', 'preview');
+
+      expect(configReads()).toBe(1);
+    });
+
+    it('getAlbums(): twice on a refresh, however many albums there are', async () => {
+      const album = (id: string) => ({ id, albumName: id, assetCount: 1, assets: [] });
+      mockFetch.mockResolvedValueOnce(json([album('album-1'), album('album-2')]));
+
+      expect(await immich.getAlbums()).toHaveLength(2);
+
+      // One for the request, one for filtering, naming and caching the list.
+      expect(configReads()).toBe(2);
+    });
+
+    it('getAlbum(): twice on a cache hit', async () => {
+      mockFetch.mockImplementation(async (url: string) =>
+        json(
+          url.includes('/search/metadata')
+            ? { assets: { items: [], nextPage: null } }
+            : { id: 'album-1', albumName: 'A', assetCount: 0, assets: [], order: 'desc' },
+        ),
+      );
+      await immich.getAlbum('album-1');
+      vi.mocked(config.getConfig).mockClear();
+
+      await immich.getAlbum('album-1');
+
+      // The allowlist check, then the configured sort.
+      expect(configReads()).toBe(2);
+    });
+  });
+
   describe('getAlbum()', () => {
     it('returns null for unallowed album IDs', async () => {
       const album = await immich.getAlbum('album-3');
@@ -821,6 +875,85 @@ describe('ImmichClient', () => {
       });
     });
   });
+
+  /**
+   * Album blocks in journal entries, content pages and essay files are
+   * rendered from getAlbumAssetsRaw(), and so is the published-asset set. It
+   * used to go to Immich on every call — two requests per album per page view,
+   * and again on every set rebuild — with no cache and no coalescing.
+   */
+  describe('getAlbumAssetsRaw() request count', () => {
+    function mockRawAlbumApi(albumId: string) {
+      mockFetch.mockImplementation(async (url: string) => {
+        const body = url.includes('/search/metadata')
+          ? {
+              assets: {
+                items: [
+                  { id: 'old', isTrashed: false, fileCreatedAt: '2024-01-01T00:00:00Z' },
+                  { id: 'gone', isTrashed: true, fileCreatedAt: '2024-01-02T00:00:00Z' },
+                  { id: 'new', isTrashed: false, fileCreatedAt: '2024-01-03T00:00:00Z' },
+                ],
+                nextPage: null,
+              },
+            }
+          : { id: albumId, albumName: 'Raw', assetCount: 3, assets: [], order: 'desc' };
+        return { ok: true, headers: { get: () => 'application/json' }, json: async () => body };
+      });
+    }
+
+    it('asks Immich once for many concurrent callers and serves repeats from the cache', async () => {
+      mockRawAlbumApi('unlisted');
+
+      const lists = await Promise.all(
+        Array.from({ length: 10 }, () => immich.getAlbumAssetsRaw('unlisted')),
+      );
+      // One album request plus one metadata page — not 2 × 10.
+      expect(mockFetch).toHaveBeenCalledTimes(2);
+
+      await immich.getAlbumAssetsRaw('unlisted');
+      expect(mockFetch).toHaveBeenCalledTimes(2);
+
+      // Unchanged result: trashed dropped, capture-time order of a 'desc' album.
+      for (const list of lists) expect(list.map((a) => a.id)).toEqual(['new', 'old']);
+    });
+
+    it('shares the load with getAlbum() for an allowlisted album', async () => {
+      mockRawAlbumApi('album-1');
+
+      await immich.getAlbum('album-1');
+      const raw = await immich.getAlbumAssetsRaw('album-1');
+
+      expect(mockFetch).toHaveBeenCalledTimes(2);
+      expect(raw.map((a) => a.id)).toEqual(['new', 'old']);
+    });
+
+    it('hands each caller its own array, so no one reorders the cached entry', async () => {
+      mockRawAlbumApi('unlisted');
+
+      const first = await immich.getAlbumAssetsRaw('unlisted');
+      first.reverse();
+
+      expect((await immich.getAlbumAssetsRaw('unlisted')).map((a) => a.id)).toEqual(['new', 'old']);
+    });
+
+    it('goes back to Immich when the admin editors ask for a fresh copy', async () => {
+      mockRawAlbumApi('unlisted');
+
+      await immich.getAlbumAssetsRaw('unlisted');
+      await immich.getAlbumAssetsRaw('unlisted', true);
+
+      expect(mockFetch).toHaveBeenCalledTimes(4);
+    });
+
+    it('still does not open getAlbum() to an album outside the allowlist', async () => {
+      mockRawAlbumApi('unlisted');
+      vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      await immich.getAlbumAssetsRaw('unlisted');
+
+      expect(await immich.getAlbum('unlisted')).toBeNull();
+    });
+  });
 });
 
 describe('stale fallback when Immich is unavailable', () => {
diff --git a/lib/__tests__/journal-order.test.ts b/lib/__tests__/journal-order.test.ts
new file mode 100644
index 0000000..1362a3c
--- /dev/null
+++ b/lib/__tests__/journal-order.test.ts
@@ -0,0 +1,66 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import os from 'os';
+import path from 'path';
+import fs from 'fs/promises';
+
+/**
+ * listJournalEntries sorted by date only, so two entries from the same day kept
+ * whatever order readdir returned — the /journal index and the entry page's
+ * prev/next links then depended on the filesystem. The slug breaks the tie.
+ */
+let root: string;
+let journalDir: string;
+let service: typeof import('../admin/journal-service');
+
+beforeEach(async () => {
+  root = await fs.mkdtemp(path.join(os.tmpdir(), 'folio-journal-order-'));
+  journalDir = path.join(root, 'content', 'journal');
+  await fs.mkdir(journalDir, { recursive: true });
+  vi.spyOn(process, 'cwd').mockReturnValue(root);
+  vi.resetModules();
+  service = await import('../admin/journal-service');
+});
+
+afterEach(async () => {
+  vi.restoreAllMocks();
+  await fs.rm(root, { recursive: true, force: true });
+});
+
+const entry = (title: string, date?: string) =>
+  `---\ntitle: "${title}"\n${date ? `date: "${date}"\n` : ''}---\n\nBody\n`;
+
+/** Make readdir hand the files back in a fixed order. */
+function readdirOrder(order: 'asc' | 'desc') {
+  const real = fs.readdir.bind(fs) as (dir: string) => Promise<string[]>;
+  vi.spyOn(fs, 'readdir').mockImplementation((async (dir: string) => {
+    const names = [...(await real(dir))].sort();
+    return order === 'asc' ? names : names.reverse();
+  }) as unknown as typeof fs.readdir);
+}
+
+describe('listJournalEntries order', () => {
+  it.each(['asc', 'desc'] as const)(
+    'orders same-day entries by slug whatever readdir returns (%s)',
+    async (order) => {
+      await fs.writeFile(path.join(journalDir, 'alpha.md'), entry('Zebra', '2026-03-15'));
+      await fs.writeFile(path.join(journalDir, 'beta.md'), entry('Aardvark', '2026-03-15'));
+      await fs.writeFile(path.join(journalDir, 'newer.md'), entry('Newer', '2026-04-01'));
+      readdirOrder(order);
+
+      const slugs = (await service.listJournalEntries()).map((e) => e.slug);
+      expect(slugs).toEqual(['newer', 'alpha', 'beta']);
+    },
+  );
+
+  it.each(['asc', 'desc'] as const)(
+    'orders undated entries with the same title by slug (%s)',
+    async (order) => {
+      await fs.writeFile(path.join(journalDir, 'one.md'), entry('Untitled'));
+      await fs.writeFile(path.join(journalDir, 'two.md'), entry('Untitled'));
+      readdirOrder(order);
+
+      const slugs = (await service.listJournalEntries()).map((e) => e.slug);
+      expect(slugs).toEqual(['one', 'two']);
+    },
+  );
+});
diff --git a/lib/__tests__/journal-photo-caption.test.ts b/lib/__tests__/journal-photo-caption.test.ts
new file mode 100644
index 0000000..031a87e
--- /dev/null
+++ b/lib/__tests__/journal-photo-caption.test.ts
@@ -0,0 +1,268 @@
+import { describe, it, expect } from 'vitest';
+import {
+  calculateReadingTime,
+  parseJournalMarkdown,
+  renderInlineMarkdown,
+  serializeJournalMarkdown,
+} from '../journal';
+import type { JournalBlock } from '../journal';
+
+const ID = '3f1c9a52-8d4e-4b7a-9c1d-0e2f3a4b5c6d';
+const ID2 = '7a8b9c0d-1e2f-4a3b-8c4d-5e6f7a8b9c0d';
+const ID3 = 'b1c2d3e4-f5a6-4b7c-8d9e-0f1a2b3c4d5e';
+
+const serialize = (blocks: JournalBlock[]) =>
+  serializeJournalMarkdown({ frontmatter: {}, blocks, referencedAssetIds: [] });
+const roundTrip = (source: string) => serializeJournalMarkdown(parseJournalMarkdown(source));
+
+/** No block that renders as text may carry an asset id. */
+function expectNoIdInText(blocks: JournalBlock[], ids: string[]) {
+  for (const block of blocks) {
+    const text =
+      block.type === 'paragraph'
+        ? block.html
+        : block.type === 'heading'
+          ? block.text
+          : block.type === 'quote'
+            ? block.text
+            : 'caption' in block
+              ? (block.caption ?? '')
+              : '';
+    for (const id of ids) expect(text).not.toContain(id);
+  }
+}
+
+/** Captions that broke, or could break, the `![…](…)` framing. */
+const TRICKY_CAPTIONS = [
+  'Gipfel (560 m)',
+  '(560 m)',
+  'Ende :)',
+  'Anfang :(',
+  '((doppelt))',
+  ')',
+  '(',
+  'a) b (c',
+  'Siehe [Karte](https://example.com/map_(1)) oben',
+  '[Link](https://immich.app)',
+  '**fett (mit Klammer)** und *kursiv*',
+  'eckige [Klammern] ohne Link',
+  '] mitten [',
+  'Pfad C:\\Fotos\\',
+  'Backslash vor Klammer \\) und \\(',
+  'Emoji 🏔️ (Gipfel) 📷',
+  'Umlaute: Größe, Übersicht, Äpfel (Öl)',
+  'Anna\'s "Zitat" & <Tag>',
+  '![verschachtelt](nicht wirklich)',
+];
+
+describe('photo captions with parentheses (A-1)', () => {
+  it('keeps a wide photo with `(560 m)` in its caption a photo block', () => {
+    const source = `![${ID}:wide](Gipfel (560 m))`;
+    const parsed = parseJournalMarkdown(source);
+    expect(parsed.blocks).toEqual([
+      { type: 'photo', assetId: ID, layout: 'wide', caption: 'Gipfel (560 m)' },
+    ]);
+    expect(roundTrip(source)).toBe(source);
+  });
+
+  it('keeps pair and grid captions with parentheses intact', () => {
+    const pair = `![${ID}, ${ID2}](Links (Nord), rechts (Süd))`;
+    expect(parseJournalMarkdown(pair).blocks[0]).toEqual({
+      type: 'photo-pair',
+      assetIds: [ID, ID2],
+      caption: 'Links (Nord), rechts (Süd)',
+    });
+    expect(roundTrip(pair)).toBe(pair);
+
+    const grid = `![${ID}, ${ID2}, ${ID3}](Drei (3))`;
+    expect(parseJournalMarkdown(grid).blocks[0]).toEqual({
+      type: 'photo-grid',
+      assetIds: [ID, ID2, ID3],
+      caption: 'Drei (3)',
+    });
+    expect(roundTrip(grid)).toBe(grid);
+  });
+
+  it('renders a link inside a caption', () => {
+    const parsed = parseJournalMarkdown(`![${ID}](Mehr auf [Immich](https://immich.app))`);
+    expect(parsed.blocks[0]).toMatchObject({
+      type: 'photo',
+      caption:
+        'Mehr auf <a href="https://immich.app" target="_blank" rel="noopener noreferrer">Immich</a>',
+    });
+  });
+
+  it('keeps balanced parentheses inside a link URL', () => {
+    const source = `![${ID}:wide](Gipfel (560 m), siehe [Karte](https://example.com/map_(1)))`;
+    const parsed = parseJournalMarkdown(source);
+    expect(parsed.blocks[0]).toMatchObject({
+      type: 'photo',
+      caption:
+        'Gipfel (560 m), siehe <a href="https://example.com/map_(1)" target="_blank" rel="noopener noreferrer">Karte</a>',
+    });
+    expect(roundTrip(source)).toBe(source);
+    // Outside a link, a parenthesis after the URL is still text.
+    expect(renderInlineMarkdown('[a](https://x.y) (b)')).toBe(
+      '<a href="https://x.y" target="_blank" rel="noopener noreferrer">a</a> (b)',
+    );
+  });
+
+  for (const caption of TRICKY_CAPTIONS) {
+    it(`round-trips the caption ${JSON.stringify(caption)} for every photo block type`, () => {
+      const html = renderInlineMarkdown(caption);
+      const blocks: JournalBlock[] = [
+        { type: 'photo', assetId: ID, layout: 'fullbleed', caption: html },
+        { type: 'photo', assetId: ID, layout: 'contained', caption: html },
+        { type: 'photo-pair', assetIds: [ID, ID2], caption: html },
+        { type: 'photo-grid', assetIds: [ID, ID2, ID3], caption: html },
+      ];
+      for (const block of blocks) {
+        const once = serialize([block]);
+        const parsed = parseJournalMarkdown(once);
+        // The framing is exact: the caption comes back as the markdown that
+        // was written, rendered once, and the block keeps its type and ids.
+        expect(parsed.blocks).toHaveLength(1);
+        const [back] = parsed.blocks;
+        expect(back.type).toBe(block.type);
+        expect(back).toMatchObject(
+          block.type === 'photo'
+            ? { assetId: ID, layout: block.layout }
+            : { assetIds: 'assetIds' in block ? block.assetIds : [] },
+        );
+        const writtenCaption = once.slice(once.indexOf('](') + 2, -1);
+        expect('caption' in back ? back.caption : undefined).toBe(
+          renderInlineMarkdown(writtenCaption.trim()),
+        );
+        // And a second save writes the same file.
+        expect(serialize(parsed.blocks)).toBe(once);
+        expectNoIdInText(
+          parsed.blocks.filter((b) => b.type === 'paragraph'),
+          [ID, ID2, ID3],
+        );
+      }
+    });
+  }
+
+  it('parses any single-line caption exactly (seeded fuzz)', () => {
+    const alphabet = ['(', ')', '[', ']', '\\', '*', '_', ' ', 'a', 'Ü', '🏔️', '!', ':', ','];
+    let seed = 0x5eed;
+    const next = () => {
+      seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+      return seed;
+    };
+    for (let n = 0; n < 500; n++) {
+      const length = next() % 24;
+      let caption = '';
+      for (let i = 0; i < length; i++) caption += alphabet[next() % alphabet.length];
+      const source = `![${ID}:wide](${caption})`;
+      const parsed = parseJournalMarkdown(source);
+      expect(parsed.blocks).toHaveLength(1);
+      expect(parsed.blocks[0]).toMatchObject({ type: 'photo', assetId: ID, layout: 'wide' });
+      const expected = caption.trim() ? renderInlineMarkdown(caption.trim()) : undefined;
+      expect((parsed.blocks[0] as { caption?: string }).caption).toBe(expected);
+      // Idempotence of a save. Stray `*`/`_` runs are left out: the inline
+      // emphasis renderer normalises those on its own (`__*` → `***`), which is
+      // a property of renderInlineMarkdown, not of the photo-line framing.
+      if (!/[*_]/.test(caption)) {
+        const once = serializeJournalMarkdown(parsed);
+        expect(roundTrip(once)).toBe(once);
+      }
+    }
+  });
+});
+
+describe('photo lines the old pattern accepted parse exactly as before', () => {
+  // The pattern before A-1, kept here as the reference for backward compatibility.
+  const legacy = (line: string) => {
+    const m = line.match(/^!\[([^\]]*)\]\(([^)]*)\)$/);
+    return m ? { target: m[1].trim(), caption: m[2].trim() } : null;
+  };
+
+  const lines = [
+    `![${ID}]()`,
+    `![${ID}](Caption)`,
+    `![${ID}:wide](A **bold** caption)`,
+    `![${ID}:fullbleed](Offene Klammer (ohne Ende)`,
+    `![${ID}, ${ID2}](Anna's photos)`,
+    `![${ID}, ${ID2}, ${ID3}](Drei [eckige] Klammern)`,
+    `![](Placeholder)`,
+    `![:wide]()`,
+    `![${ID}](C:\\)`,
+    `![${ID}](a\\b \\( c)`,
+    `![${ID}](Emoji 🏔️ Umlaut ä)`,
+    `![${ID}](  Leerraum  )`,
+  ];
+
+  for (const line of lines) {
+    it(JSON.stringify(line), () => {
+      const old = legacy(line);
+      expect(old).not.toBeNull();
+      const blocks = parseJournalMarkdown(line).blocks;
+      expect(blocks).toHaveLength(1);
+      const expectedCaption = old!.caption ? renderInlineMarkdown(old!.caption) : undefined;
+      expect((blocks[0] as { caption?: string }).caption).toBe(expectedCaption);
+      const ids =
+        blocks[0].type === 'photo'
+          ? [blocks[0].assetId]
+          : 'assetIds' in blocks[0]
+            ? blocks[0].assetIds
+            : [];
+      expect(ids.join(', ')).toBe(old!.target.replace(/:(wide|fullbleed)$/, ''));
+      // Unchanged content saves to the same line.
+      expect(roundTrip(line)).toBe(roundTrip(roundTrip(line)));
+    });
+  }
+});
+
+describe('a malformed photo line never prints asset ids (A-1)', () => {
+  it('splits two photo lines written without a blank line between them', () => {
+    const parsed = parseJournalMarkdown(`![${ID}](Erstes)\n![${ID2}:wide](Zweites (2))`);
+    expect(parsed.blocks).toEqual([
+      { type: 'photo', assetId: ID, layout: 'contained', caption: 'Erstes' },
+      { type: 'photo', assetId: ID2, layout: 'wide', caption: 'Zweites (2)' },
+    ]);
+  });
+
+  it('splits a heading or sentence directly above a photo', () => {
+    const parsed = parseJournalMarkdown(`## Tag 1\n![${ID}](Gipfel)`);
+    expect(parsed.blocks).toEqual([
+      { type: 'heading', level: 2, text: 'Tag 1' },
+      { type: 'photo', assetId: ID, layout: 'contained', caption: 'Gipfel' },
+    ]);
+
+    const para = parseJournalMarkdown(`Wir stiegen auf.\n  ![${ID}, ${ID2}](Oben)`);
+    expect(para.blocks.map((b) => b.type)).toEqual(['paragraph', 'photo-pair']);
+    expectNoIdInText(para.blocks, [ID, ID2]);
+  });
+
+  it('keeps text after the closing parenthesis in the caption, not a paragraph', () => {
+    const parsed = parseJournalMarkdown(`![${ID}](Gipfel) und weiter`);
+    expect(parsed.blocks).toHaveLength(1);
+    expect(parsed.blocks[0]).toMatchObject({ type: 'photo', assetId: ID });
+    expectNoIdInText(parsed.blocks, [ID]);
+    // Stable from the first save on.
+    const once = roundTrip(`![${ID}](Gipfel) und weiter`);
+    expect(roundTrip(once)).toBe(once);
+  });
+
+  it('treats a reference without a caption group as a photo', () => {
+    for (const source of [`![${ID}]`, `![${ID}:wide] Text`, `![${ID}`]) {
+      const parsed = parseJournalMarkdown(source);
+      expect(parsed.blocks[0]).toMatchObject({ type: 'photo', assetId: ID });
+      expectNoIdInText(parsed.blocks, [ID]);
+    }
+  });
+
+  it('leaves directive chunks alone', () => {
+    const parsed = parseJournalMarkdown(`::album abc\ncaption: ![x](y)`);
+    expect(parsed.blocks).toHaveLength(1);
+    expect(parsed.blocks[0]).toMatchObject({ type: 'album', albumId: 'abc' });
+  });
+});
+
+describe('reading time ignores photo lines', () => {
+  it('drops the whole line, parentheses in the caption included', () => {
+    const { words } = calculateReadingTime(`Eins zwei.\n\n![${ID}](Gipfel (560 m) oben)`);
+    expect(words).toBe(2);
+  });
+});
diff --git a/lib/__tests__/journal.test.ts b/lib/__tests__/journal.test.ts
index c4782b9..1f9f585 100644
--- a/lib/__tests__/journal.test.ts
+++ b/lib/__tests__/journal.test.ts
@@ -1,4 +1,7 @@
-import { describe, it, expect, afterEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import os from 'os';
+import path from 'path';
+import { mkdtemp, rm } from 'fs/promises';
 import {
   parseJournalMarkdown,
   serializeJournalMarkdown,
@@ -7,22 +10,8 @@ import {
   isValidSlug,
   sanitizeSlug,
 } from '../journal';
-import {
-  writeJournalEntry,
-  readJournalEntry,
-  deleteJournalEntry,
-  listJournalEntries,
-} from '../admin/journal-service';
 
 describe('Journal Service & Parser', () => {
-  const testSlug = 'test-journey-nordkap';
-
-  afterEach(async () => {
-    try {
-      await deleteJournalEntry(testSlug);
-    } catch {}
-  });
-
   describe('slug validation and sanitization', () => {
     it('validates safe alphanumeric and hyphenated slugs', () => {
       expect(isValidSlug('my-story-2026')).toBe(true);
@@ -149,7 +138,28 @@ A paragraph of text.
   });
 
   describe('filesystem CRUD operations', () => {
+    // The service resolves content/journal from process.cwd() at import time.
+    // Without a temp cwd this wrote a real entry into the checkout's content/
+    // — the live site's, in a deployment — and left a .deleted.bak behind.
+    const testSlug = 'test-journey-nordkap';
+    let root: string;
+    let service: typeof import('../admin/journal-service');
+
+    beforeEach(async () => {
+      root = await mkdtemp(path.join(os.tmpdir(), 'folio-journal-crud-'));
+      vi.spyOn(process, 'cwd').mockReturnValue(root);
+      vi.resetModules();
+      service = await import('../admin/journal-service');
+    });
+
+    afterEach(async () => {
+      vi.restoreAllMocks();
+      await rm(root, { recursive: true, force: true });
+    });
+
     it('writes, reads, lists and deletes journal files safely', async () => {
+      const { writeJournalEntry, readJournalEntry, deleteJournalEntry, listJournalEntries } =
+        service;
       const testContent = `---
 title: "Vitest Journey"
 date: "2026-08-14"
diff --git a/lib/__tests__/journalDate.test.ts b/lib/__tests__/journalDate.test.ts
new file mode 100644
index 0000000..838d0ec
--- /dev/null
+++ b/lib/__tests__/journalDate.test.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { formatJournalDate } from '../journalDate';
+
+/**
+ * The /journal index formatted `new Date(frontmatter.date)` in the server's
+ * timezone: `2026-03-15` is UTC midnight, so every server west of Greenwich
+ * printed Mar 14. Hand-typed dates became "Invalid Date", and the entry page
+ * printed the raw string next to the index's localized one.
+ *
+ * Run under a negative UTC offset so a regression to local-time formatting
+ * shows up on any machine.
+ */
+let savedTz: string | undefined;
+beforeAll(() => {
+  savedTz = process.env.TZ;
+  process.env.TZ = 'America/Los_Angeles';
+});
+afterAll(() => {
+  if (savedTz === undefined) delete process.env.TZ;
+  else process.env.TZ = savedTz;
+});
+
+describe('formatJournalDate', () => {
+  it('keeps the calendar day of a date-only value west of UTC', () => {
+    // Sanity check that the offset is in effect: this is the old code path.
+    expect(new Date('2026-03-15').getDate()).toBe(14);
+    expect(formatJournalDate('2026-03-15', 'en-US')).toBe('Mar 15, 2026');
+    expect(formatJournalDate('2026-01-01', 'de-DE')).toBe('1. Jan. 2026');
+  });
+
+  it('takes the written day of a value with a time', () => {
+    expect(formatJournalDate('2026-03-15T23:30:00+01:00', 'en-US')).toBe('Mar 15, 2026');
+    expect(formatJournalDate('2026-03-15 08:00', 'en-US')).toBe('Mar 15, 2026');
+  });
+
+  it('shows a year-month value without inventing a day', () => {
+    expect(formatJournalDate('2026-03', 'en-US')).toBe('March 2026');
+  });
+
+  it.each(['15.03.2026', 'March 2026', 'Spring 2026', '2026-02-30', '2026-13', '2026-03-150'])(
+    'shows %s as written instead of Invalid Date or a guessed day',
+    (raw) => {
+      expect(formatJournalDate(raw, 'en-US')).toBe(raw);
+    },
+  );
+
+  it('returns null for a missing or blank date', () => {
+    expect(formatJournalDate(undefined, 'en-US')).toBeNull();
+    expect(formatJournalDate('   ', 'en-US')).toBeNull();
+  });
+});
diff --git a/lib/__tests__/mapService.test.ts b/lib/__tests__/mapService.test.ts
index caa133a..aeee2f1 100644
--- a/lib/__tests__/mapService.test.ts
+++ b/lib/__tests__/mapService.test.ts
@@ -13,8 +13,15 @@ vi.mock('@/lib/immich', () => ({
   },
 }));
 
+const config = vi.hoisted(() => ({
+  value: {
+    standaloneAlbums: ['album-1'] as string[],
+    subpages: [] as Array<{ slug: string; albumIds: string[]; enabled: boolean; hidden?: boolean }>,
+    cacheTtl: 60_000,
+  },
+}));
 vi.mock('@/lib/config', () => ({
-  getConfig: () => ({ subpages: [], cacheTtl: 60_000 }),
+  getConfig: () => config.value,
 }));
 
 vi.mock('@/lib/cache', () => ({
@@ -22,6 +29,7 @@ vi.mock('@/lib/cache', () => ({
 }));
 
 import { getMapData } from '@/lib/mapService';
+import { listedAlbumIds } from '@/lib/config/schema';
 
 const ALBUM = { id: 'album-1', albumName: 'Trip', slug: 'trip' };
 
@@ -30,6 +38,8 @@ function asset(id: string, exif: Record<string, unknown>) {
 }
 
 beforeEach(() => {
+  config.value.standaloneAlbums = ['album-1'];
+  config.value.subpages = [];
   getAlbums.mockReset();
   getAlbum.mockReset();
   getAlbums.mockResolvedValue([ALBUM]);
@@ -83,3 +93,101 @@ describe('getMapData coordinate filtering (#635)', () => {
     expect(locations).toHaveLength(0);
   });
 });
+
+/**
+ * `enabled: false` takes a subpage offline. Its albums stay on the allowlist
+ * (the configuration is kept), so the map has to leave them out itself: a
+ * marker names the album, links it, counts it and shows one of its photos.
+ */
+describe('getMapData and offline subpages', () => {
+  const berlin = { latitude: 52.5, longitude: 13.4, city: 'Berlin', country: 'Germany' };
+
+  beforeEach(() => {
+    getAlbum.mockResolvedValue({ id: ALBUM.id, assets: [asset('a', berlin)] });
+  });
+
+  it('leaves out an album whose only subpage is offline', async () => {
+    config.value.standaloneAlbums = [];
+    config.value.subpages = [{ slug: 'old-series', albumIds: [ALBUM.id], enabled: false }];
+
+    expect(await getMapData()).toEqual([]);
+  });
+
+  it('keeps it when an enabled subpage lists it too, and links it there', async () => {
+    config.value.standaloneAlbums = [];
+    config.value.subpages = [
+      { slug: 'old-series', albumIds: [ALBUM.id], enabled: false },
+      { slug: 'travel', albumIds: [ALBUM.id], enabled: true },
+    ];
+
+    const locations = await getMapData();
+
+    expect(locations).toHaveLength(1);
+    expect(locations[0].albums[0].subpageSlug).toBe('travel');
+  });
+});
+
+/**
+ * `hidden: true` keeps a subpage reachable by direct link only. The map is a
+ * listing: a marker names the album, links it under the subpage's address and
+ * shows one of its photos, so an album only a hidden subpage carries must not
+ * appear on it. Its photos stay reachable through the link (publishedAssets
+ * still asks onlineAlbumIds, which is not narrowed).
+ */
+describe('getMapData and hidden subpages', () => {
+  const berlin = { latitude: 52.5, longitude: 13.4, city: 'Berlin', country: 'Germany' };
+
+  beforeEach(() => {
+    getAlbum.mockResolvedValue({ id: ALBUM.id, assets: [asset('a', berlin)] });
+  });
+
+  it('leaves out an album whose only subpage is hidden', async () => {
+    config.value.standaloneAlbums = [];
+    config.value.subpages = [
+      { slug: 'private', albumIds: [ALBUM.id], enabled: true, hidden: true },
+    ];
+
+    expect(await getMapData()).toEqual([]);
+    expect(getAlbum).not.toHaveBeenCalled();
+  });
+
+  it('keeps it when a listed subpage carries it too, and links it there', async () => {
+    config.value.standaloneAlbums = [];
+    config.value.subpages = [
+      { slug: 'private', albumIds: [ALBUM.id], enabled: true, hidden: true },
+      { slug: 'travel', albumIds: [ALBUM.id], enabled: true },
+    ];
+
+    const locations = await getMapData();
+
+    expect(locations).toHaveLength(1);
+    expect(locations[0].albums[0].subpageSlug).toBe('travel');
+  });
+
+  it('keeps a standalone album that a hidden subpage also carries, linked standalone', async () => {
+    config.value.standaloneAlbums = [ALBUM.id];
+    config.value.subpages = [
+      { slug: 'private', albumIds: [ALBUM.id], enabled: true, hidden: true },
+    ];
+
+    const locations = await getMapData();
+
+    expect(locations).toHaveLength(1);
+    expect(locations[0].albums[0].subpageSlug).toBeUndefined();
+  });
+});
+
+describe('listedAlbumIds', () => {
+  it('drops albums of offline and hidden subpages, keeps standalone and listed ones', () => {
+    const ids = listedAlbumIds({
+      standaloneAlbums: ['s'],
+      subpages: [
+        { albumIds: ['v', 'shared'], enabled: true },
+        { albumIds: ['off'], enabled: false },
+        { albumIds: ['h', 'shared'], enabled: true, hidden: true },
+      ],
+    });
+
+    expect([...ids].sort()).toEqual(['s', 'shared', 'v']);
+  });
+});
diff --git a/lib/__tests__/pages-service.test.ts b/lib/__tests__/pages-service.test.ts
new file mode 100644
index 0000000..89c4d20
--- /dev/null
+++ b/lib/__tests__/pages-service.test.ts
@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import os from 'os';
+import path from 'path';
+import { mkdtemp, mkdir, readdir, readFile, rm, writeFile } from 'fs/promises';
+
+/**
+ * content/pages/ storage (#722): the journal's rules — valid slugs only, a
+ * backup before every overwrite, ten saves kept, a `.deleted.bak` on delete.
+ */
+let root: string;
+let pagesDir: string;
+let backupDir: string;
+let service: typeof import('../admin/pages-service');
+
+beforeEach(async () => {
+  root = await mkdtemp(path.join(os.tmpdir(), 'folio-pages-'));
+  pagesDir = path.join(root, 'content', 'pages');
+  backupDir = path.join(pagesDir, '.backups');
+  vi.spyOn(process, 'cwd').mockReturnValue(root);
+  vi.spyOn(console, 'log').mockImplementation(() => {});
+  vi.resetModules();
+  service = await import('../admin/pages-service');
+});
+
+afterEach(async () => {
+  vi.restoreAllMocks();
+  await rm(root, { recursive: true, force: true });
+});
+
+const page = (title: string, extra = '') =>
+  `---\ntitle: "${title}"\n${extra}---\n\nAbout ${title}\n`;
+
+describe('pages-service', () => {
+  it('writes, reads and lists a page', async () => {
+    await service.writePage('pricing', page('Pricing', 'draft: true\n'));
+
+    const read = await service.readPage('pricing');
+    expect(read?.parsed.frontmatter).toMatchObject({ title: 'Pricing', draft: true });
+    expect(service.readPageSync('pricing')?.rawMarkdown).toBe(read?.rawMarkdown);
+
+    const list = await service.listPages();
+    expect(list).toEqual([
+      { slug: 'pricing', frontmatter: expect.objectContaining({ title: 'Pricing' }) },
+    ]);
+    expect(service.listPageSlugsSync()).toEqual(['pricing']);
+  });
+
+  it('keeps the SEO description in the frontmatter', async () => {
+    await service.writePage('faq', page('FAQ', 'description: "Questions, answered"\n'));
+    expect((await service.readPage('faq'))?.parsed.frontmatter.description).toBe(
+      'Questions, answered',
+    );
+  });
+
+  it('refuses a slug that is not one, and never touches a path outside', async () => {
+    await expect(service.writePage('../escape', 'x')).rejects.toThrow(/Invalid page slug/);
+    await expect(service.writePage('a/b', 'x')).rejects.toThrow(/Invalid page slug/);
+    expect(await service.readPage('../gallery')).toBeNull();
+    expect(service.resolvePageFilePath('..')).toBeNull();
+  });
+
+  it('answers null for a page that does not exist', async () => {
+    expect(await service.readPage('nothing')).toBeNull();
+    expect(await service.listPages()).toEqual([]);
+  });
+
+  it('backs up the previous version before an overwrite, keeping ten', async () => {
+    await mkdir(pagesDir, { recursive: true });
+    await writeFile(path.join(pagesDir, 'pricing.md'), page('v0'));
+    for (let i = 1; i <= 12; i++) {
+      await service.writePage('pricing', page(`v${i}`));
+      // Distinct timestamps in the backup names.
+      await new Promise((r) => setTimeout(r, 2));
+    }
+    const backups = await readdir(backupDir);
+    expect(backups).toHaveLength(10);
+    expect(await readFile(path.join(pagesDir, 'pricing.md'), 'utf8')).toBe(page('v12'));
+  });
+
+  it('keeps a .deleted.bak copy on delete, and restores from it', async () => {
+    await service.writePage('workshops', page('Workshops'));
+    await expect(service.deletePage('workshops')).resolves.toBe(true);
+    await expect(service.deletePage('workshops')).resolves.toBe(false);
+    expect(await service.readPage('workshops')).toBeNull();
+
+    const [backup] = await service.listPageBackups();
+    expect(backup).toMatchObject({ slug: 'workshops', kind: 'deleted' });
+
+    await expect(service.restorePageBackup(backup.filename)).resolves.toBe('workshops');
+    expect((await service.readPage('workshops'))?.parsed.frontmatter.title).toBe('Workshops');
+  });
+
+  it('refuses to restore from a name it did not write', async () => {
+    await expect(service.restorePageBackup('../gallery.yaml')).rejects.toThrow(/unrecognised/);
+    await expect(service.restorePageBackup('pricing.md')).rejects.toThrow(/unrecognised/);
+  });
+});
diff --git a/lib/__tests__/pages.test.ts b/lib/__tests__/pages.test.ts
new file mode 100644
index 0000000..29e9ae6
--- /dev/null
+++ b/lib/__tests__/pages.test.ts
@@ -0,0 +1,155 @@
+import { describe, it, expect } from 'vitest';
+import {
+  RESERVED_PAGE_SLUGS,
+  describeCollision,
+  menuPageSlugs,
+  pageSlugCollision,
+  resolveMenu,
+  type NavEntry,
+  type PageSummary,
+} from '../pages';
+import { deriveGallery, type GalleryYaml } from '../config';
+import { rewritePageRefs } from '../admin/pageRefs';
+
+const A1 = '11111111-1111-4111-8111-111111111111';
+const A2 = '22222222-2222-4222-8222-222222222222';
+
+const none = { subpages: [], albums: [], journal: [] };
+
+describe('pageSlugCollision (#722)', () => {
+  it('accepts a free slug', () => {
+    expect(pageSlugCollision('pricing', none)).toBeNull();
+  });
+
+  it.each(RESERVED_PAGE_SLUGS)('refuses the built-in route /%s', (slug) => {
+    expect(pageSlugCollision(slug, none)).toEqual({ kind: 'reserved' });
+  });
+
+  it('refuses a slug taken by a subpage, an album or a journal entry', () => {
+    const taken = { subpages: ['travel'], albums: ['iceland'], journal: ['trip'] };
+    expect(pageSlugCollision('travel', taken)).toEqual({ kind: 'subpage' });
+    expect(pageSlugCollision('iceland', taken)).toEqual({ kind: 'album' });
+    expect(pageSlugCollision('trip', taken)).toEqual({ kind: 'journal' });
+  });
+
+  it('compares without regard to case', () => {
+    expect(pageSlugCollision('Travel', { ...none, subpages: ['travel'] })).toEqual({
+      kind: 'subpage',
+    });
+    expect(pageSlugCollision('ADMIN', none)).toEqual({ kind: 'reserved' });
+  });
+
+  it('refuses what is not a slug at all', () => {
+    expect(pageSlugCollision('a/b', none)).toEqual({ kind: 'invalid' });
+    expect(pageSlugCollision('', none)).toEqual({ kind: 'invalid' });
+  });
+
+  it('describes each collision in a sentence naming the slug', () => {
+    for (const kind of ['invalid', 'reserved', 'subpage', 'album', 'journal'] as const) {
+      expect(describeCollision('x', { kind })).toContain('x');
+    }
+  });
+});
+
+describe('deriveGallery: `- page:` references (#722)', () => {
+  const gallery = (subpages: NonNullable<GalleryYaml['subpages']>): GalleryYaml => ({ subpages });
+
+  it('keeps pages and subpages in one menu order', () => {
+    const { nav, subpages } = deriveGallery(
+      gallery([
+        { page: 'pricing' },
+        { name: 'Travel', albums: [A1] },
+        { page: 'faq' },
+        { name: 'Weddings', albums: [A2] },
+      ]),
+    );
+    expect(subpages.map((s) => s.slug)).toEqual(['travel', 'weddings']);
+    expect(nav).toEqual([
+      { type: 'page', slug: 'pricing' },
+      { type: 'subpage', slug: 'travel' },
+      { type: 'page', slug: 'faq' },
+      { type: 'subpage', slug: 'weddings' },
+    ]);
+    expect(menuPageSlugs(nav)).toEqual(['pricing', 'faq']);
+  });
+
+  it('allows a gallery whose menu holds only pages', () => {
+    expect(deriveGallery(gallery([{ page: 'pricing' }])).nav).toEqual([
+      { type: 'page', slug: 'pricing' },
+    ]);
+  });
+
+  it('rejects an invalid page slug and a page listed twice', () => {
+    expect(() => deriveGallery(gallery([{ page: '../x' }]))).toThrow(/not a valid page slug/);
+    expect(() => deriveGallery(gallery([{ page: 'a' }, { page: 'a' }]))).toThrow(/more than once/);
+  });
+
+  it('builds the menu from the map form of subpages too', () => {
+    const { nav } = deriveGallery({ subpages: { Travel: [A1] } });
+    expect(nav).toEqual([{ type: 'subpage', slug: 'travel' }]);
+  });
+});
+
+describe('resolveMenu (#722)', () => {
+  const nav: NavEntry[] = [
+    { type: 'subpage', slug: 'travel' },
+    { type: 'page', slug: 'pricing' },
+    { type: 'subpage', slug: 'hidden' },
+    { type: 'page', slug: 'draft' },
+    { type: 'page', slug: 'missing' },
+    { type: 'page', slug: 'locked' },
+  ];
+  const pages: PageSummary[] = [
+    { slug: 'pricing', frontmatter: { title: 'Pricing' } },
+    { slug: 'draft', frontmatter: { title: 'Soon', draft: true } },
+    { slug: 'locked', frontmatter: { password: 'scrypt:a:b' } },
+  ];
+
+  it('interleaves visible subpages and published pages in gallery.yaml order', () => {
+    const menu = resolveMenu(nav, [{ slug: 'travel', name: 'Travel' }], pages);
+    expect(menu.map((m) => [m.href, m.label])).toEqual([
+      ['/travel', 'Travel'],
+      ['/pricing', 'Pricing'],
+      // A protected page stays listed; its title falls back to the slug.
+      ['/locked', 'locked'],
+    ]);
+  });
+
+  // `name` is the gallery.yaml key the slug is built from ("south-korea");
+  // `title` is what the page itself shows ("South Korea"). The menu showed
+  // the key.
+  it('labels a subpage with its title, falling back to its name', () => {
+    const menu = resolveMenu(
+      [
+        { type: 'subpage', slug: 'south-korea' },
+        { type: 'subpage', slug: 'travel' },
+      ],
+      [
+        { slug: 'south-korea', name: 'south-korea', title: 'South Korea' },
+        { slug: 'travel', name: 'Travel' },
+      ],
+      [],
+    );
+    expect(menu.map((m) => m.label)).toEqual(['South Korea', 'Travel']);
+  });
+});
+
+describe('rewritePageRefs (#722)', () => {
+  const list = [{ name: 'Travel' }, { page: 'pricing' }, { page: 'faq' }];
+
+  it('renames a reference in place', () => {
+    expect(rewritePageRefs(list, 'pricing', 'rates')).toEqual([
+      { name: 'Travel' },
+      { page: 'rates' },
+      { page: 'faq' },
+    ]);
+  });
+
+  it('removes a reference', () => {
+    expect(rewritePageRefs(list, 'faq', null)).toEqual([{ name: 'Travel' }, { page: 'pricing' }]);
+  });
+
+  it('returns the same list when nothing matches', () => {
+    expect(rewritePageRefs(list, 'nothing', null)).toBe(list);
+  });
+});
diff --git a/lib/__tests__/parsedFileCache.test.ts b/lib/__tests__/parsedFileCache.test.ts
new file mode 100644
index 0000000..380e310
--- /dev/null
+++ b/lib/__tests__/parsedFileCache.test.ts
@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import os from 'os';
+import path from 'path';
+import { mkdtemp, mkdir, rename, rm, unlink, writeFile } from 'fs/promises';
+
+/**
+ * The journal and page listings run on every public render (the header nav
+ * lists both) and used to parse every markdown file each time. They now keep
+ * the parse per file while the file is unchanged — which must never cost an
+ * admin save its immediate visibility.
+ */
+let root: string;
+let journalDir: string;
+let pagesDir: string;
+let parseSpy: ReturnType<typeof vi.fn<(raw: string) => void>>;
+
+beforeEach(async () => {
+  root = await mkdtemp(path.join(os.tmpdir(), 'folio-parsecache-'));
+  journalDir = path.join(root, 'content', 'journal');
+  pagesDir = path.join(root, 'content', 'pages');
+  await mkdir(journalDir, { recursive: true });
+  await mkdir(pagesDir, { recursive: true });
+  vi.spyOn(process, 'cwd').mockReturnValue(root);
+  vi.spyOn(console, 'log').mockImplementation(() => {});
+  vi.resetModules();
+  parseSpy = vi.fn<(raw: string) => void>();
+  vi.doMock('../journal', async (importOriginal) => {
+    const actual = await importOriginal<typeof import('../journal')>();
+    return {
+      ...actual,
+      parseJournalMarkdown: (raw: string) => {
+        parseSpy(raw);
+        return actual.parseJournalMarkdown(raw);
+      },
+    };
+  });
+});
+
+afterEach(async () => {
+  vi.doUnmock('../journal');
+  vi.restoreAllMocks();
+  await rm(root, { recursive: true, force: true });
+});
+
+const doc = (title: string) =>
+  `---\ntitle: "${title}"\ndate: "2026-01-01"\n---\n\nBody of ${title}\n`;
+
+describe('listJournalEntries', () => {
+  it('parses an unchanged file once across listings', async () => {
+    await writeFile(path.join(journalDir, 'a.md'), doc('Alpha'));
+    await writeFile(path.join(journalDir, 'b.md'), doc('Bravo'));
+    const service = await import('../admin/journal-service');
+
+    const first = await service.listJournalEntries();
+    const second = await service.listJournalEntries();
+
+    expect(second).toEqual(first);
+    expect(second.map((e) => e.frontmatter.title).sort()).toEqual(['Alpha', 'Bravo']);
+    expect(parseSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('shows an admin save on the very next listing, even at the same size', async () => {
+    await writeFile(path.join(journalDir, 'a.md'), doc('Alpha'));
+    const service = await import('../admin/journal-service');
+    expect((await service.listJournalEntries())[0].frontmatter.title).toBe('Alpha');
+
+    // Same byte length, so only the inode (atomicWrite renames) tells them apart.
+    await service.writeJournalEntry('a', doc('Omega'));
+
+    expect((await service.listJournalEntries())[0].frontmatter.title).toBe('Omega');
+  });
+
+  it('sees an edit made in place and a file renamed over the entry', async () => {
+    const file = path.join(journalDir, 'a.md');
+    await writeFile(file, doc('Alpha'));
+    const service = await import('../admin/journal-service');
+    await service.listJournalEntries();
+
+    await writeFile(file, doc('Alpha, revised'));
+    expect((await service.listJournalEntries())[0].frontmatter.title).toBe('Alpha, revised');
+
+    await writeFile(path.join(root, 'tmp.md'), doc('Gamma'));
+    await rename(path.join(root, 'tmp.md'), file);
+    expect((await service.listJournalEntries())[0].frontmatter.title).toBe('Gamma');
+  });
+
+  it('drops a deleted entry and hands out copies callers cannot poison', async () => {
+    await writeFile(path.join(journalDir, 'a.md'), doc('Alpha'));
+    await writeFile(path.join(journalDir, 'b.md'), doc('Bravo'));
+    const service = await import('../admin/journal-service');
+
+    const listed = await service.listJournalEntries();
+    listed[0].frontmatter.title = 'mutated';
+    listed[0].excerpt = 'mutated';
+    expect((await service.listJournalEntries()).map((e) => e.frontmatter.title).sort()).toEqual([
+      'Alpha',
+      'Bravo',
+    ]);
+
+    await unlink(path.join(journalDir, 'b.md'));
+    expect((await service.listJournalEntries()).map((e) => e.slug)).toEqual(['a']);
+  });
+});
+
+describe('listPages', () => {
+  it('parses an unchanged page once and sees a save at once', async () => {
+    await writeFile(path.join(pagesDir, 'pricing.md'), doc('Pricing'));
+    const service = await import('../admin/pages-service');
+
+    await service.listPages();
+    const again = await service.listPages();
+    expect(again).toEqual([
+      {
+        slug: 'pricing',
+        frontmatter: {
+          title: 'Pricing',
+          description: undefined,
+          password: undefined,
+          draft: undefined,
+        },
+      },
+    ]);
+    expect(parseSpy).toHaveBeenCalledTimes(1);
+
+    await service.writePage('pricing', doc('Tariffs'));
+    expect((await service.listPages())[0].frontmatter.title).toBe('Tariffs');
+  });
+});
diff --git a/lib/__tests__/proofExport.test.ts b/lib/__tests__/proofExport.test.ts
new file mode 100644
index 0000000..d0bdd74
--- /dev/null
+++ b/lib/__tests__/proofExport.test.ts
@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest';
+import { baseName, formatExport } from '../proofExport';
+
+const picks = [
+  { position: 3, fileName: 'IMG_0412.JPG', takenAt: '2026-05-01T10:00:00' },
+  { position: 7, fileName: 'IMG_0412.CR3' },
+  { position: 9, fileName: 'wedding "first", look.jpg' },
+];
+
+describe('baseName', () => {
+  it('drops only the last extension', () => {
+    expect(baseName('IMG_0412.JPG')).toBe('IMG_0412');
+    expect(baseName('a.b.tif')).toBe('a.b');
+    expect(baseName('.hidden')).toBe('.hidden');
+    expect(baseName('noext')).toBe('noext');
+  });
+});
+
+describe('formatExport', () => {
+  it('lists de-duplicated base names for a Lightroom filter', () => {
+    expect(formatExport(picks, 'lightroom')).toBe('IMG_0412, wedding "first", look');
+  });
+
+  it('lists full names one per line', () => {
+    expect(formatExport(picks, 'txt')).toBe(
+      'IMG_0412.JPG\nIMG_0412.CR3\nwedding "first", look.jpg\n',
+    );
+    expect(formatExport([], 'txt')).toBe('');
+  });
+
+  it('writes RFC 4180 CSV', () => {
+    expect(formatExport(picks, 'csv').split('\r\n')).toEqual([
+      'position,file_name,taken_at',
+      '3,IMG_0412.JPG,2026-05-01T10:00:00',
+      '7,IMG_0412.CR3,',
+      '9,"wedding ""first"", look.jpg",',
+      '',
+    ]);
+  });
+
+  it('never lets a file name become a spreadsheet formula', () => {
+    const csv = formatExport([{ position: 1, fileName: '=HYPERLINK("x")' }], 'csv');
+    expect(csv).toContain(`"'=HYPERLINK(""x"")"`);
+  });
+
+  it('also neutralises names starting with a tab or carriage return', () => {
+    for (const name of ['\t=1+1', '\r=1+1']) {
+      const row = formatExport([{ position: 1, fileName: name }], 'csv').split('\r\n')[1];
+      expect(row).toMatch(/^1,"?'/);
+    }
+  });
+});
diff --git a/lib/__tests__/proofSessions.test.ts b/lib/__tests__/proofSessions.test.ts
new file mode 100644
index 0000000..3fb560e
--- /dev/null
+++ b/lib/__tests__/proofSessions.test.ts
@@ -0,0 +1,198 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import {
+  claimDownload,
+  createSession,
+  deleteSession,
+  downloadsRemaining,
+  findSessionByToken,
+  getSessionById,
+  isExpired,
+  isTokenShaped,
+  listSessions,
+  newToken,
+  ProofError,
+  saveSelection,
+  sessionInputSchema,
+  sessionPatchSchema,
+  sessionState,
+  submitSelection,
+  updateSession,
+  type ProofSession,
+} from '../proofSessions';
+
+const ALBUM = '11111111-1111-1111-1111-111111111111';
+let dir: string;
+
+beforeEach(() => {
+  dir = fs.mkdtempSync(path.join(os.tmpdir(), 'folio-proof-'));
+  vi.spyOn(process, 'cwd').mockReturnValue(dir);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  fs.rmSync(dir, { recursive: true, force: true });
+});
+
+const storePath = () => path.join(dir, 'content', 'proofing.json');
+
+function input(overrides: Record<string, unknown> = {}) {
+  return sessionInputSchema.parse({ clientName: 'Anna', albumId: ALBUM, ...overrides });
+}
+
+describe('tokens', () => {
+  it('are 192-bit URL-safe strings and never repeat', () => {
+    const a = newToken();
+    expect(isTokenShaped(a)).toBe(true);
+    expect(a).not.toBe(newToken());
+  });
+
+  it('rejects anything else before touching the store', async () => {
+    expect(isTokenShaped('../../etc/passwd')).toBe(false);
+    expect(isTokenShaped('short')).toBe(false);
+    expect(await findSessionByToken('short')).toBeNull();
+  });
+});
+
+describe('expiry', () => {
+  it('is inclusive of the last day', () => {
+    const session = { expiresOn: '2026-05-12' };
+    expect(isExpired(session, new Date('2026-05-12T22:00:00'))).toBe(false);
+    expect(isExpired(session, new Date('2026-05-13T00:00:01'))).toBe(true);
+  });
+
+  it('never expires without a date', () => {
+    expect(isExpired({}, new Date('2999-01-01'))).toBe(false);
+  });
+});
+
+describe('input validation', () => {
+  it('requires a client name and an album UUID', () => {
+    expect(sessionInputSchema.safeParse({ clientName: ' ', albumId: ALBUM }).success).toBe(false);
+    expect(sessionInputSchema.safeParse({ clientName: 'A', albumId: 'nope' }).success).toBe(false);
+  });
+
+  it('rejects malformed dates and limits', () => {
+    expect(sessionInputSchema.safeParse({ ...input(), expiresOn: '12.05.2026' }).success).toBe(
+      false,
+    );
+    expect(sessionInputSchema.safeParse({ ...input(), downloadLimit: 0 }).success).toBe(false);
+  });
+
+  it('does not let a patch move a link to another album', () => {
+    const parsed = sessionPatchSchema.parse({ albumId: ALBUM, clientName: 'B' });
+    expect(parsed).not.toHaveProperty('albumId');
+  });
+});
+
+describe('store', () => {
+  it('creates, finds and lists a session, written 0600', async () => {
+    const session = await createSession(input({ download: 'selection', downloadLimit: 2 }));
+    expect(session.selection).toEqual([]);
+    expect(session.downloadsUsed).toBe(0);
+    expect(await findSessionByToken(session.token)).toMatchObject({ id: session.id });
+    expect(await getSessionById(session.id)).toMatchObject({ clientName: 'Anna' });
+    expect(await listSessions()).toHaveLength(1);
+    if (process.platform !== 'win32') {
+      expect(fs.statSync(storePath()).mode & 0o777).toBe(0o600);
+    }
+  });
+
+  it('saves and de-duplicates a selection', async () => {
+    const { token } = await createSession(input());
+    const saved = await saveSelection(token, ['a', 'b', 'a']);
+    expect(saved.selection).toEqual(['a', 'b']);
+    expect(saved.updatedAt).toBeTruthy();
+  });
+
+  it('serialises concurrent saves instead of losing one', async () => {
+    const one = await createSession(input({ clientName: 'One' }));
+    const two = await createSession(input({ clientName: 'Two' }));
+    await Promise.all([saveSelection(one.token, ['x']), saveSelection(two.token, ['y'])]);
+    expect((await getSessionById(one.id))?.selection).toEqual(['x']);
+    expect((await getSessionById(two.id))?.selection).toEqual(['y']);
+  });
+
+  it('locks the selection on submit, and only the first submit counts', async () => {
+    const { token, id } = await createSession(input());
+    await saveSelection(token, ['a']);
+    const first = await submitSelection(token);
+    const second = await submitSelection(token);
+    expect(first.firstSubmit).toBe(true);
+    expect(second.firstSubmit).toBe(false);
+    await expect(saveSelection(token, ['b'])).rejects.toMatchObject({ code: 'submitted' });
+    expect(sessionState((await getSessionById(id)) as ProofSession)).toBe('submitted');
+
+    // The photographer can reopen it.
+    await updateSession(id, { reopen: true });
+    expect((await saveSelection(token, ['b'])).selection).toEqual(['b']);
+  });
+
+  it('refuses every client action on an expired link', async () => {
+    const { token } = await createSession(input({ expiresOn: '2000-01-01' }));
+    await expect(saveSelection(token, ['a'])).rejects.toMatchObject({ code: 'expired' });
+    await expect(submitSelection(token)).rejects.toMatchObject({ code: 'expired' });
+  });
+
+  it('counts downloads against the limit', async () => {
+    const created = await createSession(input({ download: 'album', downloadLimit: 2 }));
+    await claimDownload(created.token);
+    const after = await claimDownload(created.token);
+    expect(downloadsRemaining(after)).toBe(0);
+    await expect(claimDownload(created.token)).rejects.toMatchObject({ code: 'limit' });
+
+    await updateSession(created.id, { resetDownloads: true });
+    expect(downloadsRemaining(await claimDownload(created.token))).toBe(1);
+  });
+
+  it('refuses to submit an empty selection, decided under the write lock', async () => {
+    const { token, id } = await createSession(input());
+    await saveSelection(token, ['a']);
+    // A save of [] landing between the route's snapshot and the submit.
+    await saveSelection(token, []);
+    await expect(submitSelection(token)).rejects.toMatchObject({ code: 'empty' });
+    expect((await getSessionById(id))?.submittedAt).toBeUndefined();
+  });
+
+  it('re-checks the download scope under the lock', async () => {
+    const { token, id } = await createSession(input({ download: 'album' }));
+    // The photographer narrows the link while a request is on its way.
+    await updateSession(id, { download: 'selection' });
+    await expect(claimDownload(token, 'album')).rejects.toMatchObject({ code: 'not-found' });
+    await expect(claimDownload(token, 'selection')).resolves.toBeTruthy();
+  });
+
+  it('refuses downloads on a link that offers none', async () => {
+    const { token } = await createSession(input());
+    await expect(claimDownload(token)).rejects.toBeInstanceOf(ProofError);
+  });
+
+  it('clears optional fields with null in a patch', async () => {
+    const { id } = await createSession(
+      input({ expiresOn: '2030-01-01', download: 'album', downloadLimit: 3 }),
+    );
+    const patched = await updateSession(id, { expiresOn: null, downloadLimit: null });
+    expect(patched.expiresOn).toBeUndefined();
+    expect(patched.downloadLimit).toBeUndefined();
+    expect(downloadsRemaining(patched)).toBeNull();
+  });
+
+  it('deletes a link, which stops it working', async () => {
+    const { id, token } = await createSession(input());
+    await deleteSession(id);
+    expect(await findSessionByToken(token)).toBeNull();
+    await expect(deleteSession(id)).rejects.toMatchObject({ code: 'not-found' });
+  });
+
+  it('does not overwrite a store it cannot parse', async () => {
+    fs.mkdirSync(path.dirname(storePath()), { recursive: true });
+    fs.writeFileSync(storePath(), '{ not json');
+    await expect(createSession(input())).rejects.toThrow();
+    expect(fs.readFileSync(storePath(), 'utf8')).toBe('{ not json');
+    // …and the queue is not stuck behind the failure.
+    fs.writeFileSync(storePath(), '{"sessions":[]}');
+    await expect(createSession(input())).resolves.toBeTruthy();
+  });
+});
diff --git a/lib/__tests__/proofWebhook.test.ts b/lib/__tests__/proofWebhook.test.ts
new file mode 100644
index 0000000..5333896
--- /dev/null
+++ b/lib/__tests__/proofWebhook.test.ts
@@ -0,0 +1,76 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { buildWebhookPayload, notifySubmitted, webhookUrl } from '../proofWebhook';
+import type { ProofSession } from '../proofSessions';
+
+const session: ProofSession = {
+  id: 'abc123',
+  token: 'x'.repeat(32),
+  clientName: 'Anna & Ben',
+  albumId: '11111111-1111-1111-1111-111111111111',
+  createdAt: '2026-01-01T00:00:00Z',
+  download: 'none',
+  downloadsUsed: 0,
+  selection: ['a', 'b'],
+  submittedAt: '2026-02-01T00:00:00Z',
+};
+
+afterEach(() => {
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+describe('webhookUrl', () => {
+  it('accepts http(s) only', () => {
+    expect(webhookUrl('https://ntfy.example/x')).toBe('https://ntfy.example/x');
+    expect(webhookUrl('ftp://x')).toBeNull();
+    expect(webhookUrl('not a url')).toBeNull();
+    expect(webhookUrl('')).toBeNull();
+  });
+});
+
+describe('buildWebhookPayload', () => {
+  it('speaks Discord, Slack and Gotify at once, and never carries the client token', () => {
+    const payload = buildWebhookPayload(session, 'Wedding', 'https://folio.example');
+    expect(payload.content).toContain('Anna & Ben');
+    expect(payload.text).toContain('2 photos');
+    expect(payload.title).toBeTruthy();
+    expect(payload.message).toContain('"Wedding"');
+    expect(payload.proofing.adminUrl).toBe('https://folio.example/admin/proofing?session=abc123');
+    expect(JSON.stringify(payload)).not.toContain(session.token);
+  });
+
+  it('works without a site URL', () => {
+    expect(buildWebhookPayload(session, 'Wedding', null).proofing.adminUrl).toBeNull();
+  });
+});
+
+describe('notifySubmitted', () => {
+  it('does nothing without a URL', async () => {
+    const fetchMock = vi.fn();
+    vi.stubGlobal('fetch', fetchMock);
+    await notifySubmitted(session, 'Wedding', null);
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('posts JSON to the configured URL', async () => {
+    vi.stubEnv('PROOFING_WEBHOOK_URL', 'https://hooks.example/abc');
+    const fetchMock = vi.fn(async () => new Response('ok'));
+    vi.stubGlobal('fetch', fetchMock);
+    await notifySubmitted(session, 'Wedding', null);
+    const [url, init] = fetchMock.mock.calls[0] as unknown as [string, RequestInit];
+    expect(url).toBe('https://hooks.example/abc');
+    expect(JSON.parse(init.body as string).event).toBe('proofing.submitted');
+  });
+
+  it('swallows a failing webhook', async () => {
+    vi.stubEnv('PROOFING_WEBHOOK_URL', 'https://hooks.example/abc');
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => Promise.reject(new Error('down'))),
+    );
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    await expect(notifySubmitted(session, 'Wedding', null)).resolves.toBeUndefined();
+    expect(warn).toHaveBeenCalled();
+  });
+});
diff --git a/lib/__tests__/proofing-resolution.test.ts b/lib/__tests__/proofing-resolution.test.ts
index 8132b93..eaaaa92 100644
--- a/lib/__tests__/proofing-resolution.test.ts
+++ b/lib/__tests__/proofing-resolution.test.ts
@@ -14,7 +14,7 @@ vi.mock('@/lib/env', () => ({
   },
 }));
 
-import { resolveProofing } from '@/lib/config';
+import { resolveProofing, resolveProofingEmail } from '@/lib/config';
 
 /**
  * Client proofing hands a gallery to a client and takes their picks back, so
@@ -48,3 +48,33 @@ describe('resolveProofing', () => {
     expect(resolveProofing({ proofing: false }, true)).not.toBe(resolveProofing(undefined, true));
   });
 });
+
+/**
+ * The proofing dialog's "email to photographer" needs a recipient (#736): the
+ * footer contact email by default, overridable with `proofing.email`. Neither
+ * set means no recipient, and the dialog hides the button rather than opening
+ * a compose with an empty To:.
+ */
+describe('resolveProofingEmail', () => {
+  it('prefers the proofing address over the footer contact email', () => {
+    expect(resolveProofingEmail('proofs@example.com', 'hello@example.com')).toBe(
+      'proofs@example.com',
+    );
+  });
+
+  it('falls back to the footer contact email', () => {
+    expect(resolveProofingEmail(undefined, 'hello@example.com')).toBe('hello@example.com');
+    expect(resolveProofingEmail('', 'hello@example.com')).toBe('hello@example.com');
+    expect(resolveProofingEmail('   ', 'hello@example.com')).toBe('hello@example.com');
+  });
+
+  it('is undefined when neither is set, so the button is hidden', () => {
+    expect(resolveProofingEmail(undefined, undefined)).toBeUndefined();
+    expect(resolveProofingEmail('', '')).toBeUndefined();
+    expect(resolveProofingEmail('  ', '  ')).toBeUndefined();
+  });
+
+  it('trims surrounding whitespace', () => {
+    expect(resolveProofingEmail('  proofs@example.com  ', undefined)).toBe('proofs@example.com');
+  });
+});
diff --git a/lib/__tests__/proxy.test.ts b/lib/__tests__/proxy.test.ts
index d0d7a7b..f91cbb2 100644
--- a/lib/__tests__/proxy.test.ts
+++ b/lib/__tests__/proxy.test.ts
@@ -24,7 +24,7 @@ vi.mock('@/lib/config', () => ({
 import { isSiteUnlocked } from '@/lib/auth';
 import { cdnOrigin } from '@/lib/cdn';
 import { tryToParsePath } from 'next/dist/lib/try-to-parse-path';
-import { proxy, config, isKnownMissing } from '@/proxy';
+import { proxy, config, isKnownMissing, TOP_LEVEL_ROUTES } from '@/proxy';
 import { getConfigOrNull } from '@/lib/config';
 import fs from 'node:fs';
 import os from 'node:os';
@@ -307,6 +307,11 @@ describe('isKnownMissing', () => {
     expect(isKnownMissing('/journal/..%2Fsettings', contentDir)).toBe(true);
   });
 
+  it('treats a malformed escape in a journal slug as missing instead of throwing', () => {
+    expect(isKnownMissing('/journal/%E0', contentDir)).toBe(true);
+    expect(proxy(new NextRequest('https://example.com/journal/%E0')).status).toBe(404);
+  });
+
   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);
@@ -317,6 +322,60 @@ describe('isKnownMissing', () => {
     expect(isKnownMissing('/contact', contentDir)).toBe(false);
   });
 
+  it('knows paths deeper than the catch-all serves', () => {
+    expect(isKnownMissing('/x/y/z', contentDir)).toBe(true);
+    expect(isKnownMissing('/japan/tokyo/extra/', contentDir)).toBe(true);
+    // Deep paths below a fixed route are that route's to answer.
+    expect(isKnownMissing('/admin/settings/general', contentDir)).toBe(false);
+    expect(isKnownMissing('/admin/journal/kyoto', contentDir)).toBe(false);
+    expect(isKnownMissing('/proof/abc/def', contentDir)).toBe(false);
+    // Next's internals and dotfiles are not the catch-all's either.
+    expect(isKnownMissing('/_next/data/build/x.json', contentDir)).toBe(false);
+    expect(isKnownMissing('/.well-known/appspecific/x.json', contentDir)).toBe(false);
+  });
+
+  it('lists every top-level route directory under app/', () => {
+    // A route directory missing from the list would have its deep paths
+    // answered 404 while the page renders normally.
+    const appDir = path.join(process.cwd(), 'app');
+    const hasRoute = (dir: string): boolean =>
+      fs
+        .readdirSync(dir, { withFileTypes: true })
+        .some((entry) =>
+          entry.isDirectory()
+            ? hasRoute(path.join(dir, entry.name))
+            : /^(page|route)\.(tsx?|jsx?)$/.test(entry.name),
+        );
+    const routeDirs = fs
+      .readdirSync(appDir, { withFileTypes: true })
+      .filter((entry) => entry.isDirectory() && entry.name !== '[...path]')
+      .filter((entry) => hasRoute(path.join(appDir, entry.name)))
+      .map((entry) => entry.name);
+    expect(routeDirs.length).toBeGreaterThan(5);
+    for (const name of routeDirs) expect(TOP_LEVEL_ROUTES.has(name), name).toBe(true);
+  });
+
+  /*
+   * #704 answered with NextResponse.rewrite(request.nextUrl, { status: 404 }).
+   * NextURL reports 127.0.0.1 as "localhost", so behind `next start -H
+   * 127.0.0.1` the destination's origin no longer matched the server's and
+   * Next proxied it as an external URL to localhost — ::1, where nothing
+   * listened: a 30 s hang and a 500 for every known-missing path.
+   */
+  it.each(['/journal/nope', '/contact', '/x/y/z'])(
+    'answers %s with a 404 on the same request, not a rewrite to another origin',
+    (pathname) => {
+      const res = proxy(new NextRequest(`http://127.0.0.1:3591${pathname}`));
+      expect(res.status).toBe(404);
+      expect(res.headers.get('x-middleware-rewrite')).toBeNull();
+      expect(res.headers.get('x-middleware-next')).toBe('1');
+      // The page still gets its nonce, and the policy still matches it.
+      const nonce = res.headers.get('x-middleware-request-x-nonce');
+      expect(nonce).toBeTruthy();
+      expect(res.headers.get('Content-Security-Policy')).toContain(`'nonce-${nonce}'`);
+    },
+  );
+
   it('makes proxy() answer 404 with the policy still set', () => {
     const res = proxy(new NextRequest('https://example.com/contact'));
     expect(res.status).toBe(404);
diff --git a/lib/__tests__/publicPages.test.ts b/lib/__tests__/publicPages.test.ts
index d69b17a..1e8e18b 100644
--- a/lib/__tests__/publicPages.test.ts
+++ b/lib/__tests__/publicPages.test.ts
@@ -123,8 +123,21 @@ describe('publicPaths', () => {
       site({
         journalEnabled: true,
         journal: [
-          { slug: 'published', draft: false },
-          { slug: 'wip', draft: true },
+          { slug: 'published', draft: false, isProtected: false },
+          { slug: 'wip', draft: true, isProtected: false },
+        ],
+      }),
+    );
+    expect(paths).toEqual(['/', '/journal', '/journal/published']);
+  });
+
+  it('omits a password-protected journal entry, as the journal index does', () => {
+    const paths = publicPaths(
+      site({
+        journalEnabled: true,
+        journal: [
+          { slug: 'published', draft: false, isProtected: false },
+          { slug: 'private', draft: false, isProtected: true },
         ],
       }),
     );
@@ -133,7 +146,10 @@ describe('publicPaths', () => {
 
   it('omits journal entries entirely when the journal is off', () => {
     const paths = publicPaths(
-      site({ journalEnabled: false, journal: [{ slug: 'published', draft: false }] }),
+      site({
+        journalEnabled: false,
+        journal: [{ slug: 'published', draft: false, isProtected: false }],
+      }),
     );
     expect(paths).toEqual(['/']);
   });
@@ -150,12 +166,38 @@ describe('publicPaths', () => {
     expect(paths).toEqual([...new Set(paths)]);
   });
 
+  it('lists a published content page, whether or not it is in the menu (#722)', () => {
+    const paths = publicPaths(
+      site({ pages: [{ slug: 'pricing', draft: false, isProtected: false }] }),
+    );
+    expect(paths).toEqual(['/', '/pricing']);
+  });
+
+  it('leaves out a draft content page and a password-protected one', () => {
+    const paths = publicPaths(
+      site({
+        pages: [
+          { slug: 'draft', draft: true, isProtected: false },
+          { slug: 'secret', draft: false, isProtected: true },
+        ],
+      }),
+    );
+    expect(paths).toEqual(['/']);
+  });
+
+  it('lists no content page on a locked site', () => {
+    const paths = publicPaths(
+      site({ siteLocked: true, pages: [{ slug: 'pricing', draft: false, isProtected: false }] }),
+    );
+    expect(paths).toEqual([]);
+  });
+
   it('emits only absolute-looking, single-slash paths', () => {
     const paths = publicPaths(
       site({
         aboutEnabled: true,
         journalEnabled: true,
-        journal: [{ slug: 'story', draft: false }],
+        journal: [{ slug: 'story', draft: false, isProtected: false }],
         subpages: [openSubpage('travel', [{ id: 'a', slug: 'iceland' }])],
         standaloneAlbums: [{ id: 'b', slug: 'portraits' }],
       }),
diff --git a/lib/__tests__/publishedAssets.test.ts b/lib/__tests__/publishedAssets.test.ts
new file mode 100644
index 0000000..3d0e8c7
--- /dev/null
+++ b/lib/__tests__/publishedAssets.test.ts
@@ -0,0 +1,300 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+/**
+ * GHSA-gfh4-6275-9gqv: the media routes serve only assets the site shows. Each
+ * source that puts an asset on a public page must land in the set, or that
+ * page loses its photos; nothing else may.
+ */
+
+const state = vi.hoisted(() => ({
+  config: {
+    albums: ['album-pub', 'album-offline'],
+    standaloneAlbums: ['album-pub'],
+    heroImages: ['hero-1'],
+    albumHeroImages: {
+      'album-pub': 'album-hero',
+      'album-offline': 'offline-hero',
+    } as Record<string, string>,
+    subpages: [
+      { albumIds: [], enabled: true, essayText: '![album:album-essay](x)' },
+      // Taken offline with `enabled: false`: its albums stay on the allowlist.
+      {
+        albumIds: ['album-offline'],
+        enabled: false,
+        essayText: '![album:album-offline-essay](x)',
+      },
+    ] as Array<{ albumIds: string[]; enabled: boolean; essayText?: string }>,
+    cacheTtl: 300,
+  },
+  albums: {
+    'album-pub': { albumThumbnailAssetId: 'thumb', assets: [{ id: 'a1' }, { id: 'a2' }] },
+    'album-offline': { albumThumbnailAssetId: 'offline-thumb', assets: [{ id: 'offline-1' }] },
+  } as Record<string, { albumThumbnailAssetId: string | null; assets: { id: string }[] }>,
+  raw: {
+    'album-journal': [{ id: 'j-album-1' }],
+    'album-essay': [{ id: 'essay-1' }],
+    'album-offline-essay': [{ id: 'offline-essay-1' }],
+    'album-page': [{ id: 'page-album-1' }],
+  } as Record<string, { id: string }[]>,
+  proofAlbums: {
+    'album-proof': { albumThumbnailAssetId: null, assets: [{ id: 'proof-1' }] },
+    'album-expired': { albumThumbnailAssetId: null, assets: [{ id: 'expired-1' }] },
+  } as Record<string, { albumThumbnailAssetId: string | null; assets: { id: string }[] }>,
+  builds: 0,
+  mtime: 1,
+  /** While set, a proofing album lookup reads its answer, then waits for it. */
+  gate: null as Promise<void> | null,
+  onGate: null as (() => void) | null,
+}));
+
+vi.mock('../config', () => ({ getConfig: () => state.config }));
+
+vi.mock('../immich', () => ({
+  immich: {
+    getAlbum: async (id: string) => {
+      state.builds += id === 'album-pub' ? 1 : 0;
+      return state.albums[id] ?? null;
+    },
+    getProofingAlbum: async (id: string) => {
+      const album = state.proofAlbums[id];
+      const answer = album ? { ...album, assets: [...album.assets] } : null;
+      if (state.gate) {
+        state.onGate?.();
+        await state.gate;
+      }
+      return answer;
+    },
+    getAlbumAssetsRaw: async (id: string) => state.raw[id] ?? [],
+  },
+}));
+
+vi.mock('../admin/journal-service', () => ({
+  listJournalEntries: async () => [{ slug: 'trip' }, { slug: 'draft' }],
+  readJournalEntry: async (slug: string) => ({
+    slug,
+    rawMarkdown: '',
+    parsed:
+      slug === 'trip'
+        ? {
+            frontmatter: { coverAssetId: 'j-cover' },
+            blocks: [
+              { type: 'photo', assetId: 'j-photo', layout: 'wide' },
+              { type: 'album', albumId: 'album-journal', layout: 'grid' },
+            ],
+          }
+        : { frontmatter: {}, blocks: [{ type: 'photo', assetId: 'draft-photo', layout: 'wide' }] },
+  }),
+}));
+
+vi.mock('../admin/pages-service', () => ({
+  listPages: async () => [{ slug: 'pricing', frontmatter: {} }],
+  readPage: async (slug: string) => ({
+    slug,
+    rawMarkdown: '',
+    parsed: {
+      frontmatter: { draft: true },
+      blocks: [
+        { type: 'photo', assetId: 'page-photo', layout: 'wide' },
+        { type: 'album', albumId: 'album-page', layout: 'grid' },
+        {
+          type: 'map',
+          line: true,
+          items: [{ kind: 'photo', assetId: 'page-map-photo' }],
+        },
+      ],
+    },
+  }),
+}));
+
+vi.mock('../journal', async (orig) => {
+  const actual = await orig<typeof import('../journal')>();
+  return {
+    ...actual,
+    parseJournalMarkdown: (md: string) => {
+      const albumId = /album:([\w-]+)/.exec(md)?.[1];
+      return albumId
+        ? { frontmatter: {}, blocks: [{ type: 'album', albumId, layout: 'grid' }] }
+        : actual.parseJournalMarkdown(md);
+    },
+  };
+});
+
+vi.mock('../proofSessions', () => ({
+  listSessions: async () => [
+    { albumId: 'album-proof', expiresOn: undefined },
+    { albumId: 'album-expired', expiresOn: '2000-01-01' },
+  ],
+  isExpired: (s: { expiresOn?: string }) => s.expiresOn === '2000-01-01',
+}));
+
+vi.mock('fs/promises', () => ({
+  default: {
+    readFile: async () => '---\nportrait: portrait-1\n---\nBio',
+    stat: async () => ({ mtimeMs: state.mtime }),
+  },
+}));
+
+import { isPublishedAsset, resetPublishedAssetsForTest } from '../publishedAssets';
+
+beforeEach(() => {
+  resetPublishedAssetsForTest();
+  state.builds = 0;
+});
+
+describe('isPublishedAsset', () => {
+  it.each([
+    ['an album photo', 'a1'],
+    ['an album thumbnail', 'thumb'],
+    ['a homepage hero', 'hero-1'],
+    ['an album hero', 'album-hero'],
+    ['the about portrait', 'portrait-1'],
+    ['a journal cover', 'j-cover'],
+    ['a journal photo block', 'j-photo'],
+    ["a journal album block's photo", 'j-album-1'],
+    ['a draft entry photo (its page gate hides it)', 'draft-photo'],
+    ["an inline essay's album block photo", 'essay-1'],
+    ['a content page photo block (draft included)', 'page-photo'],
+    ["a content page album block's photo", 'page-album-1'],
+    ['a photo of an open proofing link', 'proof-1'],
+  ])('serves %s', async (_label, id) => {
+    expect(await isPublishedAsset(id)).toBe(true);
+  });
+
+  it('refuses a photo of an expired proofing link', async () => {
+    expect(await isPublishedAsset('expired-1')).toBe(false);
+  });
+
+  it('refuses a photo only a content page map block names (maps do not render on pages)', async () => {
+    expect(await isPublishedAsset('page-map-photo')).toBe(false);
+  });
+
+  it.each([
+    ['a photo of its album', 'offline-1'],
+    ['its album thumbnail', 'offline-thumb'],
+    ['its album hero', 'offline-hero'],
+    ["an album block's photo in its inline essay", 'offline-essay-1'],
+  ])('refuses %s once a subpage is offline', async (_label, id) => {
+    expect(await isPublishedAsset(id)).toBe(false);
+  });
+
+  it('refuses any other asset in the library', async () => {
+    expect(await isPublishedAsset('never-published')).toBe(false);
+  });
+
+  it('builds once and rebuilds on a miss at most every ten seconds', async () => {
+    await isPublishedAsset('a1');
+    await isPublishedAsset('a2');
+    expect(state.builds).toBe(1);
+
+    await isPublishedAsset('unknown-1'); // forced rebuild
+    await isPublishedAsset('unknown-2'); // throttled
+    expect(state.builds).toBe(2);
+  });
+
+  it('rebuilds at once when a content file changes, e.g. a revoked link', async () => {
+    expect(await isPublishedAsset('proof-1')).toBe(true);
+    delete state.proofAlbums['album-proof'].assets[0];
+    state.proofAlbums['album-proof'].assets = [];
+    state.mtime += 1; // proofing.json rewritten by the admin
+    try {
+      expect(await isPublishedAsset('proof-1')).toBe(false);
+    } finally {
+      state.proofAlbums['album-proof'].assets = [{ id: 'proof-1' }];
+    }
+  });
+
+  /**
+   * The files used to be checked at most every 2 s. A request in that window
+   * after a save was answered from the set before it — with `immutable`, so
+   * the browser kept the photo.
+   */
+  it('sees a save made milliseconds after the previous check', async () => {
+    expect(await isPublishedAsset('proof-1')).toBe(true);
+    expect(await isPublishedAsset('a1')).toBe(true); // a check a moment ago
+    state.proofAlbums['album-proof'].assets = [];
+    state.mtime += 1;
+    try {
+      expect(await isPublishedAsset('proof-1')).toBe(false);
+    } finally {
+      state.proofAlbums['album-proof'].assets = [{ id: 'proof-1' }];
+    }
+  });
+
+  /**
+   * A request that finds a build already running joins it. When that build
+   * read the content before the save, its set must not answer for a request
+   * that saw the save.
+   */
+  it('does not answer from a build that read the content before the save', async () => {
+    expect(await isPublishedAsset('proof-1')).toBe(true);
+
+    let release!: () => void;
+    state.gate = new Promise<void>((r) => (release = r));
+    const reached = new Promise<void>((r) => (state.onGate = r));
+    state.mtime += 1; // an unrelated save starts a rebuild…
+    const first = isPublishedAsset('a1');
+    await reached; // …which has read the proofing album and is waiting on Immich
+
+    state.proofAlbums['album-proof'].assets = [];
+    state.mtime += 1; // the link is revoked
+    const second = isPublishedAsset('proof-1');
+
+    state.gate = null;
+    state.onGate = null;
+    release();
+    try {
+      expect(await first).toBe(true);
+      expect(await second).toBe(false);
+    } finally {
+      state.proofAlbums['album-proof'].assets = [{ id: 'proof-1' }];
+    }
+  });
+
+  /**
+   * The first view of a newly published album: a burst of image requests for
+   * photos the set has never seen. Only the first one rebuilt; the rest hit
+   * the rebuild throttle and were refused while that rebuild was still
+   * running — 11 of 13 photos broken until a reload.
+   */
+  describe('a burst of requests for a newly published album', () => {
+    const NEW = Array.from({ length: 13 }, (_, i) => ({ id: `fresh-${i}` }));
+
+    beforeEach(async () => {
+      await isPublishedAsset('a1'); // built, and checked a moment ago
+    });
+
+    afterEach(() => {
+      state.albums['album-pub'].assets = [{ id: 'a1' }, { id: 'a2' }];
+    });
+
+    it('serves every photo when the save changed a content file', async () => {
+      state.albums['album-pub'].assets = [{ id: 'a1' }, { id: 'a2' }, ...NEW];
+      state.mtime += 1; // gallery.yaml saved by the admin
+      const answers = await Promise.all(NEW.map((a) => isPublishedAsset(a.id)));
+      expect(answers).toEqual(NEW.map(() => true));
+    });
+
+    it('serves every photo when only Immich changed (misses share one rebuild)', async () => {
+      state.albums['album-pub'].assets = [{ id: 'a1' }, { id: 'a2' }, ...NEW];
+      const before = state.builds;
+      const answers = await Promise.all(NEW.map((a) => isPublishedAsset(a.id)));
+      expect(answers).toEqual(NEW.map(() => true));
+      expect(state.builds - before).toBe(1);
+    });
+
+    it('still refuses what the rebuild did not publish', async () => {
+      const answers = await Promise.all(NEW.map((a) => isPublishedAsset(a.id)));
+      expect(answers).toEqual(NEW.map(() => false));
+    });
+  });
+
+  it('picks up an asset published since the last build', async () => {
+    await isPublishedAsset('a1');
+    state.albums['album-pub'].assets.push({ id: 'new-photo' });
+    try {
+      expect(await isPublishedAsset('new-photo')).toBe(true);
+    } finally {
+      state.albums['album-pub'].assets.pop();
+    }
+  });
+});
diff --git a/lib/__tests__/refusal-palette.test.ts b/lib/__tests__/refusal-palette.test.ts
new file mode 100644
index 0000000..dec1941
--- /dev/null
+++ b/lib/__tests__/refusal-palette.test.ts
@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+import { THEME_PRESETS } from '../config/theme';
+
+/**
+ * The download refusal page cannot load the site's stylesheets, so it carries
+ * each preset's surface and text colours itself. This keeps that copy honest:
+ * it resolves the same custom properties from app/tokens.css the way the
+ * cascade does, and fails when a preset changes a colour the copy still has.
+ */
+
+vi.mock('../immich', () => ({ immich: {} }));
+
+import { REFUSAL_PALETTES } from '../zipArchive';
+
+const css = fs
+  .readFileSync(path.join(__dirname, '../../app/tokens.css'), 'utf8')
+  .replace(/\/\*[\s\S]*?\*\//g, '');
+
+/** Custom properties declared by the rule with exactly this selector. */
+function block(selector: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const m of css.matchAll(/([^{}]+)\{([^}]*)\}/g)) {
+    if (m[1].trim() !== selector) continue;
+    for (const d of m[2].matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) out[d[1]] = d[2].trim();
+  }
+  return out;
+}
+
+/** What `<html data-preset=… data-theme=…>` resolves, in cascade order. */
+function resolve(preset: string, mode: 'dark' | 'light') {
+  const light = mode === 'light';
+  const vars = {
+    ...block(':root'),
+    ...(light ? block("[data-theme='light']") : {}),
+    ...block(`[data-preset='${preset}']`),
+    ...(light ? block(`[data-preset='${preset}'][data-theme='light']`) : {}),
+  };
+  return {
+    bg: vars['--bg-primary'],
+    text: vars['--text-primary'],
+    muted: vars['--text-secondary'],
+  };
+}
+
+describe('refusal page palette', () => {
+  const cases = Object.keys(THEME_PRESETS).flatMap((preset) =>
+    (['dark', 'light'] as const).map((mode) => [preset, mode] as const),
+  );
+
+  it.each(cases)('%s in %s mode matches app/tokens.css', (preset, mode) => {
+    const palette = REFUSAL_PALETTES[preset] ?? REFUSAL_PALETTES.default;
+    expect(palette[mode]).toEqual(resolve(preset, mode));
+  });
+
+  it('no theme stylesheet redefines the colours the copy is taken from', () => {
+    const dir = path.join(__dirname, '../../app/themes');
+    for (const file of fs.readdirSync(dir)) {
+      const text = fs.readFileSync(path.join(dir, file), 'utf8');
+      expect(text, file).not.toMatch(/--(bg-primary|text-primary|text-secondary)\s*:/);
+    }
+  });
+});
diff --git a/lib/__tests__/settingValues.test.ts b/lib/__tests__/settingValues.test.ts
new file mode 100644
index 0000000..931dbba
--- /dev/null
+++ b/lib/__tests__/settingValues.test.ts
@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest';
+import { validateSettingValues } from '../config/settingValues';
+import { resolveTheme } from '../config/theme';
+import { normaliseSiteUrl } from '../siteUrl';
+
+const fields = (input: unknown) => validateSettingValues(input).map((e) => e.field);
+
+/**
+ * The save route and the doctor refuse exactly what the site would ignore, no
+ * more (QA A-14). Each case is paired with the resolver it mirrors, so the two
+ * cannot drift apart unnoticed.
+ */
+describe('validateSettingValues', () => {
+  it('passes an empty or partial file', () => {
+    expect(fields({})).toEqual([]);
+    expect(fields({ title: 'Folio' })).toEqual([]);
+    expect(fields(null)).toEqual([]);
+  });
+
+  it('refuses an accent resolveTheme would replace, and only that', () => {
+    for (const accent of ['rot', 'red', 'rgb(230 0 18)', '#12345']) {
+      expect(fields({ theme: { accent } })).toEqual(['theme.accent']);
+      expect(resolveTheme({ preset: 'minimal', accent }).accent).toBe(
+        resolveTheme('minimal').accent,
+      );
+    }
+    for (const accent of ['#e60012', '#FFF', ' #e60012 ', '#e60012cc', '']) {
+      expect(fields({ theme: { accent } })).toEqual([]);
+    }
+    // A preset name alone carries no accent.
+    expect(fields({ theme: 'minimal' })).toEqual([]);
+  });
+
+  it('refuses a site URL normaliseSiteUrl cannot use', () => {
+    for (const url of ['folio.example', 'ftp://folio.example', 'javascript:alert(1)']) {
+      expect(fields({ url })).toEqual(['url']);
+      expect(normaliseSiteUrl(url)).toBeNull();
+    }
+    for (const url of ['https://folio.example', 'http://folio.example/sub/', '', '  ']) {
+      expect(fields({ url })).toEqual([]);
+    }
+  });
+
+  it('refuses grid values outside the bounds getConfig clamps to', () => {
+    expect(fields({ grid: { columns: 9 } })).toEqual(['grid.columns']);
+    expect(fields({ grid: { columns: 0 } })).toEqual(['grid.columns']);
+    expect(fields({ grid: { columns: 2.5 } })).toEqual(['grid.columns']);
+    expect(fields({ grid: { gap: 49 } })).toEqual(['grid.gap']);
+    expect(fields({ grid: { gap: -1 } })).toEqual(['grid.gap']);
+    expect(fields({ grid: { columns: 1, gap: 0 } })).toEqual([]);
+    expect(fields({ grid: { columns: 6, gap: 48 } })).toEqual([]);
+  });
+});
diff --git a/lib/__tests__/siteNav.test.ts b/lib/__tests__/siteNav.test.ts
new file mode 100644
index 0000000..29fad57
--- /dev/null
+++ b/lib/__tests__/siteNav.test.ts
@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest';
+import { siteNavLinks, type SiteNavInput } from '../siteNav';
+import { getDictionary } from '../i18n';
+
+const t = getDictionary('en');
+
+const base: SiteNavInput = {
+  menu: [
+    { key: 'sp-travel', href: '/travel', label: 'Travel' },
+    { key: 'page-prices', href: '/prices', label: 'Prices' },
+    { key: 'sp-people', href: '/people', label: 'People' },
+  ],
+  subpageAlbumCounts: new Map([
+    ['travel', 3],
+    ['people', 1],
+  ]),
+  albums: [{ id: 'a1', slug: 'birds', albumName: 'Birds', assetCount: 12 }],
+  hasJournal: true,
+  aboutEnabled: true,
+  map: true,
+};
+
+describe('siteNavLinks', () => {
+  it('orders subpages and pages, albums, Journal, About, Map (#696)', () => {
+    expect(siteNavLinks(base, t).map((l) => l.href)).toEqual([
+      '/travel',
+      '/prices',
+      '/people',
+      '/birds',
+      '/journal',
+      '/about',
+      '/map',
+    ]);
+  });
+
+  it('leaves out Journal, About and Map when they are off', () => {
+    const links = siteNavLinks({ ...base, hasJournal: false, aboutEnabled: false, map: false }, t);
+    expect(links.map((l) => l.href)).not.toContain('/about');
+    expect(links.map((l) => l.href)).not.toContain('/journal');
+    expect(links.map((l) => l.href)).not.toContain('/map');
+  });
+
+  it('attaches counts to subpages and albums only', () => {
+    const byHref = new Map(siteNavLinks(base, t).map((l) => [l.href, l.count]));
+    expect(byHref.get('/travel')).toBe('3 albums');
+    expect(byHref.get('/people')).toBe('1 album');
+    expect(byHref.get('/birds')).toBe('12 photos');
+    expect(byHref.get('/prices')).toBeUndefined();
+    expect(byHref.get('/about')).toBeUndefined();
+  });
+
+  it('is empty for a site with nothing to link', () => {
+    expect(
+      siteNavLinks({ menu: [], albums: [], hasJournal: false, aboutEnabled: false, map: false }, t),
+    ).toEqual([]);
+  });
+});
diff --git a/lib/__tests__/siteShape.test.ts b/lib/__tests__/siteShape.test.ts
new file mode 100644
index 0000000..6a40b10
--- /dev/null
+++ b/lib/__tests__/siteShape.test.ts
@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from 'vitest';
+
+vi.mock('@/lib/config', () => ({
+  getConfig: () => ({
+    subpages: [],
+    standaloneAlbums: [],
+    aboutEnabled: false,
+    map: false,
+  }),
+}));
+
+vi.mock('@/lib/immich', () => ({
+  immich: { getAlbums: async () => [] },
+}));
+
+vi.mock('@/lib/auth', () => ({
+  isProtected: () => false,
+  isSiteLocked: () => false,
+}));
+
+vi.mock('@/lib/admin/journal-service', () => ({
+  listJournalEntries: async () => [
+    { slug: 'open', frontmatter: { title: 'Open' } },
+    { slug: 'locked', frontmatter: { title: 'Locked', password: 'scrypt:salt:hash' } },
+    { slug: 'wip', frontmatter: { title: 'Draft', draft: true } },
+  ],
+}));
+
+vi.mock('@/lib/admin/pages-service', () => ({
+  listPages: async () => [],
+}));
+
+import { buildSiteShape } from '@/lib/siteShape';
+import { publicPaths } from '@/lib/publicPages';
+
+describe('buildSiteShape → publicPaths (the sitemap)', () => {
+  it('lists a public journal entry', async () => {
+    expect(publicPaths(await buildSiteShape())).toContain('/journal/open');
+  });
+
+  it('leaves out a password-protected journal entry, as /journal does', async () => {
+    expect(publicPaths(await buildSiteShape())).not.toContain('/journal/locked');
+  });
+
+  it('leaves out a journal draft', async () => {
+    expect(publicPaths(await buildSiteShape())).not.toContain('/journal/wip');
+  });
+});
diff --git a/lib/__tests__/slug-field.test.ts b/lib/__tests__/slug-field.test.ts
new file mode 100644
index 0000000..0678c2d
--- /dev/null
+++ b/lib/__tests__/slug-field.test.ts
@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest';
+import { isValidSlug, sanitizeSlug, slugFieldValue } from '../journal';
+
+/** What a controlled slug input shows after each keystroke of `text`. */
+function typeInto(text: string): string {
+  let value = '';
+  for (const ch of text) value = slugFieldValue(value + ch);
+  return value;
+}
+
+describe('slugFieldValue — a slug field while it is typed', () => {
+  it('lets a hyphen be typed between two words', () => {
+    // sanitizeSlug() on every keystroke dropped the trailing "-", so the next
+    // letter was glued on: "about-us" came out as "aboutus".
+    expect(typeInto('about-us')).toBe('about-us');
+    expect(typeInto('about us')).toBe('about-us');
+  });
+
+  it('can be emptied instead of jumping to "untitled"', () => {
+    expect(slugFieldValue('')).toBe('');
+  });
+
+  it('still refuses what a slug cannot hold', () => {
+    expect(slugFieldValue('Preise & Pakete!')).toBe('preise-pakete-');
+    expect(slugFieldValue('--a//b')).toBe('a-b');
+  });
+
+  it('becomes the stored slug through sanitizeSlug()', () => {
+    for (const input of ['about-', 'About Us ', '  a--b  ', 'x_y']) {
+      const finished = sanitizeSlug(slugFieldValue(input));
+      expect(finished).toBe(sanitizeSlug(input));
+      expect(isValidSlug(finished)).toBe(true);
+    }
+  });
+});
+
+describe('sanitizeSlug — accented letters', () => {
+  it('keeps the base letter instead of splitting the word', () => {
+    // "für" used to become "f-r": every non-ASCII letter turned into a hyphen.
+    expect(sanitizeSlug('Preise für Hochzeiten')).toBe('preise-fur-hochzeiten');
+    expect(sanitizeSlug('Über mich')).toBe('uber-mich');
+    expect(sanitizeSlug('Café Olé')).toBe('cafe-ole');
+    expect(sanitizeSlug('Straße')).toBe('strasse');
+  });
+
+  it('agrees with the slug field', () => {
+    expect(typeInto('Über mich')).toBe('uber-mich');
+  });
+
+  it('still falls back for a title without any Latin letter', () => {
+    expect(sanitizeSlug('家族')).toBe('untitled');
+  });
+});
diff --git a/lib/__tests__/yaml-write.test.ts b/lib/__tests__/yaml-write.test.ts
index 2c41a02..ef98629 100644
--- a/lib/__tests__/yaml-write.test.ts
+++ b/lib/__tests__/yaml-write.test.ts
@@ -90,7 +90,7 @@ describe('writeYamlFile backup failure', () => {
   beforeEach(() => vi.clearAllMocks());
 
   it('still saves a brand-new file with no backup', async () => {
-    await expect(writeGalleryYaml(gallery)).resolves.toBeUndefined();
+    await expect(writeGalleryYaml(gallery)).resolves.toMatch(/^[0-9a-f]{32}$/);
     expect(fs.copyFile).not.toHaveBeenCalled();
   });
 
diff --git a/lib/__tests__/zipArchive.test.ts b/lib/__tests__/zipArchive.test.ts
new file mode 100644
index 0000000..d0fb2e5
--- /dev/null
+++ b/lib/__tests__/zipArchive.test.ts
@@ -0,0 +1,213 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { NextRequest } from 'next/server';
+
+/**
+ * Resource bounds of the ZIP-of-originals stream: how many archives one client
+ * may hold open at once, that every way an archive can end gives its slot
+ * back, and that a client which stops reading loses the archive (and its
+ * upstream Immich body) instead of pinning both for as long as it likes.
+ */
+
+vi.mock('@/lib/immich', () => ({ immich: { streamAsset: vi.fn() } }));
+vi.mock('@/lib/rate-limit', () => ({
+  getClientIp: vi.fn((req: NextRequest) => req.headers.get('x-test-ip') ?? 'unknown'),
+}));
+
+import {
+  ARCHIVE_STALL_TIMEOUT_MS,
+  MAX_CONCURRENT_ARCHIVES,
+  __archivesInFlight,
+  withArchiveSlot,
+} from '@/lib/zipArchive';
+import { immich, type ImmichAsset } from '@/lib/immich';
+
+const mockStream = immich.streamAsset as unknown as ReturnType<typeof vi.fn>;
+
+const ASSETS = [
+  { id: 'a1', type: 'IMAGE', originalFileName: 'a1.jpg' },
+  { id: 'a2', type: 'IMAGE', originalFileName: 'a2.jpg' },
+] as unknown as ImmichAsset[];
+
+let ipSeq = 0;
+/** A fresh client per test, so slots can never leak from one test into another. */
+function freshIp(): string {
+  ipSeq++;
+  return `203.0.113.${ipSeq}`;
+}
+
+const req = (ip: string) =>
+  new NextRequest('http://localhost/api/download/tok/archive', { headers: { 'x-test-ip': ip } });
+
+/** Start an archive of `assets` for `ip` through the slot wrapper. */
+function start(ip: string, assets: ImmichAsset[] = ASSETS) {
+  return withArchiveSlot(req(ip), async (stream) => stream('Album', assets));
+}
+
+/**
+ * An Immich originals body that produces `chunks` × 64 KB on demand and records
+ * whether it was cancelled — i.e. whether the upstream socket was let go.
+ */
+function upstream(chunks: number) {
+  const state = { pulled: 0, cancelled: false };
+  const stream = new ReadableStream<Uint8Array>({
+    pull(controller) {
+      if (state.pulled >= chunks) {
+        controller.close();
+        return;
+      }
+      state.pulled++;
+      controller.enqueue(new Uint8Array(64 * 1024).fill(state.pulled));
+    },
+    cancel() {
+      state.cancelled = true;
+    },
+  });
+  return { state, result: { stream, contentType: 'image/jpeg', contentLength: null } };
+}
+
+beforeEach(() => {
+  mockStream.mockReset();
+  mockStream.mockImplementation(async () => upstream(2).result);
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('archive concurrency cap', () => {
+  it(`refuses the ${MAX_CONCURRENT_ARCHIVES + 1}th open archive of one client with a 429`, async () => {
+    const ip = freshIp();
+    const open = [];
+    for (let i = 0; i < MAX_CONCURRENT_ARCHIVES; i++) {
+      const res = await start(ip);
+      expect(res.status).toBe(200);
+      open.push(res);
+    }
+    expect(__archivesInFlight(ip)).toBe(MAX_CONCURRENT_ARCHIVES);
+
+    const handler = vi.fn();
+    const refused = await withArchiveSlot(req(ip), handler);
+    expect(refused.status).toBe(429);
+    expect(Number(refused.headers.get('retry-after'))).toBeGreaterThan(0);
+    // Refused before the handler, so before any Immich request.
+    expect(handler).not.toHaveBeenCalled();
+
+    // Another client is unaffected.
+    const other = freshIp();
+    const res = await start(other);
+    expect(res.status).toBe(200);
+
+    await Promise.all([...open, res].map((r) => r.body!.cancel()));
+  });
+
+  it('gives the slot back when the archive is read to the end', async () => {
+    const ip = freshIp();
+    const res = await start(ip);
+    const bytes = new Uint8Array(await res.arrayBuffer());
+    expect(bytes[0]).toBe(0x50); // 'P'
+    await vi.waitFor(() => expect(__archivesInFlight(ip)).toBe(0));
+  });
+
+  it('gives the slot back when the archive fails', async () => {
+    const ip = freshIp();
+    mockStream.mockRejectedValue(new Error('Immich went away'));
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const res = await start(ip);
+    await expect(res.arrayBuffer()).rejects.toThrow();
+    await vi.waitFor(() => expect(__archivesInFlight(ip)).toBe(0));
+  });
+
+  it('gives the slot back, and lets go of Immich, when the download is cancelled', async () => {
+    const ip = freshIp();
+    const origin = upstream(1000);
+    mockStream.mockResolvedValue(origin.result);
+    const res = await start(ip);
+    const reader = res.body!.getReader();
+    await reader.read();
+    await reader.cancel();
+    await vi.waitFor(() => expect(__archivesInFlight(ip)).toBe(0));
+    await vi.waitFor(() => expect(origin.state.cancelled).toBe(true));
+  });
+
+  it('gives the slot back when the route refuses or throws instead of streaming', async () => {
+    const ip = freshIp();
+    const refused = await withArchiveSlot(req(ip), async () => new Response(null, { status: 404 }));
+    expect(refused.status).toBe(404);
+    expect(__archivesInFlight(ip)).toBe(0);
+
+    await expect(
+      withArchiveSlot(req(ip), async () => {
+        throw new Error('boom');
+      }),
+    ).rejects.toThrow('boom');
+    expect(__archivesInFlight(ip)).toBe(0);
+  });
+
+  it('never releases a slot twice', async () => {
+    const ip = freshIp();
+    const first = await start(ip);
+    const second = await start(ip);
+    await first.arrayBuffer();
+    await vi.waitFor(() => expect(__archivesInFlight(ip)).toBe(1));
+    // A late cancel on the finished body must not free the other archive's slot.
+    await first.body?.cancel().catch(() => {});
+    expect(__archivesInFlight(ip)).toBe(1);
+    await second.body!.cancel();
+    await vi.waitFor(() => expect(__archivesInFlight(ip)).toBe(0));
+  });
+});
+
+describe('archive stall timeout', () => {
+  it('tears down the archive and the upstream body when the client stops reading', async () => {
+    vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const ip = freshIp();
+    const origin = upstream(1000);
+    mockStream.mockResolvedValue(origin.result);
+
+    const res = await start(ip);
+    const reader = res.body!.getReader();
+    await reader.read();
+
+    // Still within the window: nothing happens.
+    await vi.advanceTimersByTimeAsync(ARCHIVE_STALL_TIMEOUT_MS - 1_000);
+    expect(origin.state.cancelled).toBe(false);
+    expect(__archivesInFlight(ip)).toBe(1);
+
+    await vi.advanceTimersByTimeAsync(2_000);
+    await vi.waitFor(() => expect(origin.state.cancelled).toBe(true));
+    expect(__archivesInFlight(ip)).toBe(0);
+    // The response is ended with an error rather than left open. The one chunk
+    // queued before the stall may still be handed out first.
+    await expect(
+      (async () => {
+        for (;;) if ((await reader.read()).done) return;
+      })(),
+    ).rejects.toThrow(/stalled/);
+  });
+
+  it('does not cut a slow download that keeps reading', async () => {
+    vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
+    const ip = freshIp();
+    const origin = upstream(128);
+    mockStream.mockResolvedValue(origin.result);
+
+    const res = await start(ip, [ASSETS[0]]);
+    const reader = res.body!.getReader();
+    let bytes = 0;
+    let elapsed = 0;
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      bytes += value.byteLength;
+      // Well under the stall timeout per read, far over it in total.
+      await vi.advanceTimersByTimeAsync(ARCHIVE_STALL_TIMEOUT_MS / 2);
+      elapsed += ARCHIVE_STALL_TIMEOUT_MS / 2;
+    }
+
+    expect(elapsed).toBeGreaterThan(ARCHIVE_STALL_TIMEOUT_MS * 3);
+    expect(bytes).toBeGreaterThan(128 * 64 * 1024);
+    expect(origin.state.cancelled).toBe(false);
+    await vi.waitFor(() => expect(__archivesInFlight(ip)).toBe(0));
+  });
+});
diff --git a/lib/admin/assetSelection.ts b/lib/admin/assetSelection.ts
new file mode 100644
index 0000000..3fbf2af
--- /dev/null
+++ b/lib/admin/assetSelection.ts
@@ -0,0 +1,42 @@
+/**
+ * Selection state of the asset picker's multi-select mode (#602), as plain
+ * functions so it can be tested without rendering the picker.
+ *
+ * The selection is an ordered list: the order you click in is the order the
+ * photos land in (hero list, photo grid), so a Set would lose information.
+ */
+
+export interface SelectionRules {
+  /** Assets the caller already uses; they cannot be picked again. */
+  disabled?: ReadonlySet<string>;
+  /** Most assets the caller can take; undefined means no limit. */
+  max?: number;
+}
+
+/**
+ * The selection after toggling `id`: removed when present, appended when not,
+ * unchanged when it is disabled or the limit is reached. With `max: 1` a new
+ * pick replaces the old one, which is how a single slot should feel.
+ */
+export function toggleSelection(
+  selected: readonly string[],
+  id: string,
+  rules: SelectionRules = {},
+): string[] {
+  if (selected.includes(id)) return selected.filter((s) => s !== id);
+  if (rules.disabled?.has(id)) return [...selected];
+  if (rules.max === 1) return [id];
+  if (rules.max !== undefined && selected.length >= rules.max) return [...selected];
+  return [...selected, id];
+}
+
+/** Whether another asset can still be added without deselecting one first. */
+export function canSelectMore(selected: readonly string[], max?: number): boolean {
+  return max === undefined || max === 1 || selected.length < max;
+}
+
+/** Client-side filter for lists the server returns whole (an album's assets). */
+export function matchesQuery(asset: { originalFileName: string }, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  return q === '' || asset.originalFileName.toLowerCase().includes(q);
+}
diff --git a/lib/admin/contentVersion.ts b/lib/admin/contentVersion.ts
new file mode 100644
index 0000000..1d3c44b
--- /dev/null
+++ b/lib/admin/contentVersion.ts
@@ -0,0 +1,127 @@
+/**
+ * Concurrent-edit detection for the admin's content files (#601).
+ *
+ * Every editor holds a full snapshot of the file it edits and PUTs all of it,
+ * so without a check the tab that saves second silently reverts whatever the
+ * first one changed — as does a panel left open across a hand edit or a backup
+ * restore. Each GET therefore hands out a version of the file it read, the PUT
+ * sends it back in `If-Match`, and the write is refused with 409 when the file
+ * on disk is no longer that version.
+ *
+ * The version is a hash of the bytes, not the mtime: the mtime has a
+ * resolution the filesystem chooses (a second on some), survives a copy that
+ * changes the content (`cp -p`, a restore from a backup of equal age) and
+ * changes on a `touch` that does not. The files are small, so hashing one per
+ * save costs nothing that matters.
+ *
+ * A PUT without `If-Match` is written as before. That keeps an older admin tab
+ * (loaded before the upgrade) and scripts working, and the check is a guard
+ * against accidents, not an access control: an operator who wants to overwrite
+ * can always reload and save. `If-Match: *` means the same — write regardless.
+ */
+
+import crypto from 'crypto';
+import fs from 'fs/promises';
+import { NextResponse } from 'next/server';
+
+/** The version of a file that does not exist. A save expecting it creates the file. */
+export const ABSENT_VERSION = 'absent';
+
+/**
+ * Version of some content; null content means "no file". A string is hashed
+ * as its UTF-8 bytes, which is what a save writes — so it fits content about
+ * to be written, not text decoded from a file (see readVersioned).
+ */
+export function versionOf(content: string | Buffer | null): string {
+  if (content === null) return ABSENT_VERSION;
+  return crypto.createHash('sha256').update(content).digest('hex').slice(0, 32);
+}
+
+/**
+ * Read a text file together with the version of its bytes, for an editor's
+ * GET. The version has to come from the bytes, never from the decoded text:
+ * a file that is not valid UTF-8 (a Latin-1 "Über" from a hand edit) decodes
+ * lossily, the text re-encodes to other bytes, and a version taken from it
+ * would never equal what `fileVersion()` computes at save time — every save
+ * of that file would be refused as a conflict. Throws ENOENT like readFile.
+ */
+export async function readVersioned(filePath: string): Promise<{ text: string; version: string }> {
+  const bytes = await fs.readFile(filePath);
+  return { text: bytes.toString('utf8'), version: versionOf(bytes) };
+}
+
+/** Version of the file at `filePath` as it is on disk now. */
+export async function fileVersion(filePath: string): Promise<string> {
+  try {
+    return versionOf(await fs.readFile(filePath));
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') return ABSENT_VERSION;
+    throw err;
+  }
+}
+
+/** The file changed on disk since the editor loaded it. */
+export class VersionConflictError extends Error {
+  constructor(readonly currentVersion: string) {
+    super('The file was changed elsewhere since it was loaded.');
+    this.name = 'VersionConflictError';
+  }
+}
+
+/**
+ * Throw a VersionConflictError when `filePath` is not at `baseVersion`.
+ * An undefined base version (no `If-Match`) skips the check.
+ */
+export async function assertVersion(
+  filePath: string,
+  baseVersion: string | undefined,
+): Promise<void> {
+  if (baseVersion === undefined) return;
+  const current = await fileVersion(filePath);
+  if (current !== baseVersion) throw new VersionConflictError(current);
+}
+
+/**
+ * The base version a PUT sent, or undefined for "no check". Accepts the
+ * quoted ETag form (`"abc"`, `W/"abc"`) as well as a bare token; `*` and an
+ * empty header mean no check.
+ */
+export function baseVersionFrom(request: Request): string | undefined {
+  const raw = request.headers.get('if-match')?.trim();
+  if (!raw || raw === '*') return undefined;
+  return raw.replace(/^W\//, '').replace(/^"(.*)"$/, '$1');
+}
+
+/** The header form of a version. */
+export function etag(version: string): string {
+  return `"${version}"`;
+}
+
+/** The 409 every content route answers a stale save with. */
+export function conflictResponse(currentVersion: string): NextResponse {
+  return NextResponse.json(
+    {
+      error: 'This was changed elsewhere since you opened it.',
+      conflict: true,
+      version: currentVersion,
+    },
+    { status: 409, headers: { ETag: etag(currentVersion) } },
+  );
+}
+
+/**
+ * Run content writes one at a time within this process.
+ *
+ * The version check and the write it guards must not interleave with another
+ * save, or two tabs saving in the same instant would both pass the check. A
+ * single queue for all content files is enough — admin saves are rare and
+ * short — and it also serialises a rename's write-then-delete. Like the rate
+ * limiter it is per process; Folio runs as one.
+ */
+let queue: Promise<unknown> = Promise.resolve();
+
+export function serializeContentWrite<T>(fn: () => Promise<T>): Promise<T> {
+  const run = queue.then(fn, fn);
+  queue = run.catch(() => {});
+  return run;
+}
diff --git a/lib/admin/doctor.ts b/lib/admin/doctor.ts
index 36720b8..03c43a4 100644
--- a/lib/admin/doctor.ts
+++ b/lib/admin/doctor.ts
@@ -24,6 +24,11 @@ export interface DoctorFinding {
    * diagnostics page can link straight to the album in the page builder.
    */
   albumIds?: string[];
+  /**
+   * The settings section (`/admin/settings/<section>`) that holds the fix, when
+   * it depends on the finding rather than on its id.
+   */
+  settingsSection?: string;
 }
 
 /** The worst level present — what the status badge should show. */
@@ -558,6 +563,53 @@ export function checkContact(
   };
 }
 
+/** Where each value checked by `validateSettingValues` is edited. */
+const SETTING_SECTIONS: Record<string, string> = {
+  url: 'seo',
+  'theme.accent': 'theme',
+  'grid.columns': 'grid',
+  'grid.gap': 'grid',
+};
+
+/** Human names for the same fields, for the finding's text. */
+const SETTING_LABELS: Record<string, string> = {
+  url: 'Site URL',
+  'theme.accent': 'accent colour',
+  'grid.columns': 'grid columns',
+  'grid.gap': 'grid gap',
+};
+
+/**
+ * Values in settings.yaml the site does not use as written — an accent that is
+ * not hex, a column count outside 1–6, a site URL that is not a full address.
+ * The resolvers fall back or clamp, so nothing breaks and nothing says so; the
+ * panel now refuses to save them, but a hand-edited file or one saved before
+ * that still holds them. Takes `validateSettingValues(settings.yaml)`.
+ */
+export function checkSettingValues(errors: Array<{ field: string }>): DoctorFinding {
+  if (errors.length === 0) {
+    return {
+      id: 'settings-values',
+      level: 'ok',
+      title: 'Settings are used as written',
+      detail: 'Site URL, accent colour and grid values in settings.yaml are all valid.',
+    };
+  }
+  const names = errors.map((e) => SETTING_LABELS[e.field] ?? e.field);
+  return {
+    id: 'settings-values',
+    level: 'warn',
+    title:
+      errors.length === 1
+        ? `The ${names[0]} setting is ignored`
+        : `${errors.length} settings are ignored`,
+    detail:
+      `settings.yaml holds a value the site cannot use for: ${names.join(', ')}. ` +
+      'It falls back to the default instead. Open the setting to see what it expects.',
+    settingsSection: SETTING_SECTIONS[errors[0].field],
+  };
+}
+
 /**
  * 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
@@ -637,3 +689,60 @@ export function checkImmichCalls(results: Array<{ endpoint: string; ok: boolean
     detail: results.map((r) => r.endpoint).join(', '),
   };
 }
+
+export interface PageSlugProblem {
+  slug: string;
+  /** One sentence from describeCollision(). */
+  reason: string;
+}
+
+/**
+ * Content pages (#722): a `- page:` reference in gallery.yaml whose file does
+ * not exist puts nothing in the menu, and a page whose slug is already taken
+ * is shadowed by the subpage or album — or, for a built-in route, never
+ * reached at all. Returns null while there are no pages and no references.
+ */
+export function checkContentPages(p: {
+  /** Slugs referenced from gallery.yaml. */
+  menuRefs: string[];
+  /** Slugs of the files in content/pages/. */
+  pages: string[];
+  collisions: PageSlugProblem[];
+}): DoctorFinding | null {
+  if (!p.menuRefs.length && !p.pages.length) return null;
+  const existing = new Set(p.pages);
+  const missing = p.menuRefs.filter((slug) => !existing.has(slug));
+  const missingList = missing.map((s) => `"${s}"`).join(', ');
+
+  if (p.collisions.length) {
+    const n = p.collisions.length;
+    return {
+      id: 'content-pages',
+      level: 'error',
+      title: `${n} content ${n === 1 ? 'page has' : 'pages have'} a slug that is already taken`,
+      detail:
+        p.collisions.map((c) => c.reason).join(' ') +
+        ' Rename the page in Pages so visitors can reach it.' +
+        (missing.length ? ` The menu also lists missing pages: ${missingList}.` : ''),
+    };
+  }
+
+  if (missing.length) {
+    return {
+      id: 'content-pages',
+      level: 'warn',
+      title: `The menu lists ${missing.length} missing ${missing.length === 1 ? 'page' : 'pages'}`,
+      detail:
+        `gallery.yaml references ${missingList}, but content/pages/ has no such file. ` +
+        'The menu skips the entry; remove the reference or create the page.',
+    };
+  }
+
+  const n = p.pages.length;
+  return {
+    id: 'content-pages',
+    level: 'ok',
+    title: `${n} content ${n === 1 ? 'page' : 'pages'}, every slug free`,
+    detail: `${p.menuRefs.length} of them in the menu.`,
+  };
+}
diff --git a/lib/admin/envLocks.ts b/lib/admin/envLocks.ts
new file mode 100644
index 0000000..a5e1a82
--- /dev/null
+++ b/lib/admin/envLocks.ts
@@ -0,0 +1,78 @@
+/**
+ * Settings fields that an environment variable overrides (#605).
+ *
+ * Only fields where the environment actually *wins* belong here — an edit in
+ * the panel would save, report success and then do nothing. `SITE_TITLE`,
+ * `SITE_SUBTITLE` and `SITE_URL` are deliberately absent: lib/config/index.ts
+ * resolves them as `settings.X ?? env.X`, so the field takes precedence and
+ * editing it works (see lib/siteUrl.ts).
+ *
+ * Client-safe: no `fs`, no `lib/env` import. The route passes the parsed env
+ * in, and only the variable *names* ever reach the browser.
+ */
+
+/** Dotted settings.yaml path → the environment variable that overrides it. */
+export const ENV_LOCKS = {
+  sitePassword: 'SITE_PASSWORD',
+  'contact.notifyUrl': 'CONTACT_NOTIFY_URL',
+} as const;
+
+export type EnvLockedKey = keyof typeof ENV_LOCKS;
+
+/** Locked path → variable name. Never carries the variable's value. */
+export type EnvLocks = Partial<Record<EnvLockedKey, string>>;
+
+/** The locks in effect for this environment: paths whose variable is set. */
+export function resolveEnvLocks(env: object): EnvLocks {
+  const source = env as Record<string, unknown>;
+  const locks: EnvLocks = {};
+  for (const [path, name] of Object.entries(ENV_LOCKS) as [EnvLockedKey, string][]) {
+    const value = source[name];
+    if (typeof value === 'string' && value.trim() !== '') locks[path] = name;
+  }
+  return locks;
+}
+
+function getPath(obj: unknown, path: string[]): unknown {
+  let cur = obj;
+  for (const key of path) {
+    if (!cur || typeof cur !== 'object') return undefined;
+    cur = (cur as Record<string, unknown>)[key];
+  }
+  return cur;
+}
+
+/**
+ * The incoming settings with every locked path reset to what settings.yaml
+ * already holds. The panel disables those fields, so this only matters for a
+ * hand-crafted request or a stale draft — but a locked field must not change
+ * through a save whose effect the operator could never see.
+ */
+export function keepLockedValues<T extends object>(
+  incoming: T,
+  stored: object | null | undefined,
+  locks: EnvLocks,
+): T {
+  const out = structuredClone(incoming) as Record<string, unknown>;
+  for (const dotted of Object.keys(locks)) {
+    const path = dotted.split('.');
+    const last = path[path.length - 1];
+    const previous = getPath(stored, path);
+    let parent: Record<string, unknown> | null = out;
+    for (const key of path.slice(0, -1)) {
+      const next: unknown = parent[key];
+      if (!next || typeof next !== 'object') {
+        if (previous === undefined) {
+          parent = null;
+          break;
+        }
+        parent[key] = {};
+      }
+      parent = parent[key] as Record<string, unknown>;
+    }
+    if (!parent) continue;
+    if (previous === undefined) delete parent[last];
+    else parent[last] = previous;
+  }
+  return out as T;
+}
diff --git a/lib/admin/journal-service.ts b/lib/admin/journal-service.ts
index 5b80c2b..dc624ea 100644
--- a/lib/admin/journal-service.ts
+++ b/lib/admin/journal-service.ts
@@ -7,6 +7,8 @@ import fs from 'fs/promises';
 import nodeFs from 'fs';
 import path from 'path';
 import { atomicWrite } from '../atomicWrite';
+import { assertVersion, readVersioned, serializeContentWrite, versionOf } from './contentVersion';
+import { ParsedFileCache } from './parsedFileCache';
 import {
   parseJournalMarkdown,
   calculateReadingTime,
@@ -184,10 +186,30 @@ export function loadEssayFromFile(filename: string): ParsedJournal | null {
   }
 }
 
+/** What a listing needs from one file — everything but the name-derived fields. */
+type EntryFacts = Omit<JournalEntrySummary, 'slug' | 'filename'>;
+
+/**
+ * Parsed listing facts per file, reused while the file is unchanged: every
+ * public page render lists the journal for the header nav (see
+ * parsedFileCache.ts).
+ */
+const summaryCache = new ParsedFileCache<EntryFacts>((content) => {
+  const parsed = parseJournalMarkdown(content);
+  const { words, minutes } = calculateReadingTime(content);
+  return {
+    frontmatter: parsed.frontmatter,
+    excerpt: extractExcerpt(parsed),
+    wordCount: words,
+    readingTimeMinutes: minutes,
+  };
+});
+
 /** List all journal entries */
 export async function listJournalEntries(): Promise<JournalEntrySummary[]> {
   const entries: JournalEntrySummary[] = [];
   const seenSlugs = new Set<string>();
+  const listed = new Set<string>();
 
   const scanDir = async (dir: string) => {
     try {
@@ -205,19 +227,10 @@ export async function listJournalEntries(): Promise<JournalEntrySummary[]> {
         seenSlugs.add(slug);
 
         try {
-          const content = await fs.readFile(path.join(dir, file), 'utf8');
-          const parsed = parseJournalMarkdown(content);
-          const { words, minutes } = calculateReadingTime(content);
-          const excerpt = extractExcerpt(parsed);
-
-          entries.push({
-            slug,
-            filename: file,
-            frontmatter: parsed.frontmatter,
-            excerpt,
-            wordCount: words,
-            readingTimeMinutes: minutes,
-          });
+          const filePath = path.join(dir, file);
+          listed.add(filePath);
+          const summary = await summaryCache.read(filePath);
+          entries.push({ slug, filename: file, ...summary });
         } catch (err) {
           console.error(`[Journal] Failed to parse ${file}:`, err);
         }
@@ -229,15 +242,19 @@ export async function listJournalEntries(): Promise<JournalEntrySummary[]> {
 
   await scanDir(JOURNAL_DIR);
   await scanDir(LEGACY_ESSAYS_DIR);
+  summaryCache.retain(listed);
 
   // Sort: descending by date, fallback to title/slug
   return entries.sort((a, b) => {
     const dateA = a.frontmatter.date || '';
     const dateB = b.frontmatter.date || '';
-    if (dateA && dateB) return dateB.localeCompare(dateA);
+    if (dateA && dateB) return dateB.localeCompare(dateA) || a.slug.localeCompare(b.slug);
     if (dateA) return -1;
     if (dateB) return 1;
-    return (a.frontmatter.title || a.slug).localeCompare(b.frontmatter.title || b.slug);
+    return (
+      (a.frontmatter.title || a.slug).localeCompare(b.frontmatter.title || b.slug) ||
+      a.slug.localeCompare(b.slug)
+    );
   });
 }
 
@@ -246,14 +263,16 @@ export async function readJournalEntry(slug: string): Promise<{
   slug: string;
   rawMarkdown: string;
   parsed: ParsedJournal;
+  /** Version of the file's bytes (#601), for the editor's If-Match. */
+  version: string;
 } | null> {
   const filePath = resolveJournalFilePath(slug);
   if (!filePath) return null;
 
   try {
-    const rawMarkdown = await fs.readFile(filePath, 'utf8');
+    const { text: rawMarkdown, version } = await readVersioned(filePath);
     const parsed = parseJournalMarkdown(rawMarkdown);
-    return { slug, rawMarkdown, parsed };
+    return { slug, rawMarkdown, parsed, version };
   } catch (err) {
     if ((err as NodeJS.ErrnoException).code === 'ENOENT') return null;
     throw err;
@@ -358,3 +377,28 @@ export async function deleteJournalEntry(slug: string): Promise<boolean> {
   if (deletedAny) console.log(`[Journal] 🗑️ Deleted ${filename}`);
   return deletedAny;
 }
+
+/**
+ * The editor's save (#601): write `slug`, refusing with a VersionConflictError
+ * when the file the editor loaded — `fromSlug`'s, for a rename — is no longer
+ * at `baseVersion`. A rename writes the new file and then deletes the old one.
+ * Check, write and delete run in the content write queue, so another save
+ * cannot land between them. Returns the version of what was written.
+ */
+export function saveJournalEntry(
+  slug: string,
+  rawMarkdown: string,
+  options: { baseVersion?: string; fromSlug?: string } = {},
+): Promise<string> {
+  const fromSlug = options.fromSlug ?? slug;
+  return serializeContentWrite(async () => {
+    if (options.baseVersion !== undefined) {
+      const loaded = resolveJournalFilePath(fromSlug);
+      if (!loaded) throw new Error(`Invalid journal entry slug: "${fromSlug}"`);
+      await assertVersion(loaded, options.baseVersion);
+    }
+    await writeJournalEntry(slug, rawMarkdown);
+    if (fromSlug !== slug) await deleteJournalEntry(fromSlug);
+    return versionOf(rawMarkdown);
+  });
+}
diff --git a/lib/admin/pageRefs.ts b/lib/admin/pageRefs.ts
new file mode 100644
index 0000000..93c5278
--- /dev/null
+++ b/lib/admin/pageRefs.ts
@@ -0,0 +1,59 @@
+/**
+ * Keep gallery.yaml's `- page: <slug>` references in step with the page files
+ * (#722): a deleted page leaves the menu, a renamed one keeps its place.
+ *
+ * Server only. Writes go through writeGalleryYaml(), so the previous
+ * gallery.yaml is backed up first like every other admin save.
+ */
+
+import { readGalleryYamlVersioned, writeGalleryYaml } from './yaml-service';
+import { VersionConflictError } from './contentVersion';
+import { invalidateConfigCache, isPageRef } from '../config';
+
+/**
+ * Pure: the `subpages:` list with every reference to `from` replaced by `to`,
+ * or dropped when `to` is null. Returns the same list when nothing matched.
+ */
+export function rewritePageRefs<T>(subpages: T[], from: string, to: string | null): T[] {
+  if (!subpages.some((e) => isPageRef(e) && e.page === from)) return subpages;
+  return subpages.flatMap((entry) => {
+    if (!isPageRef(entry) || entry.page !== from) return [entry];
+    return to === null ? [] : [{ ...entry, page: to } as T];
+  });
+}
+
+/** gallery.yaml's version before and after a menu rewrite (#601). */
+export interface GalleryVersionChange {
+  from: string;
+  to: string;
+}
+
+/**
+ * Apply rewritePageRefs() to gallery.yaml on disk. Returns the version change
+ * when the file changed, null when it did not.
+ *
+ * The page builder is open while this runs and holds gallery.yaml's version.
+ * With `from` and `to` it can tell "only this rewrite happened since I loaded"
+ * (take the new version) from "someone else saved too" (keep the old one, so
+ * its next save is refused rather than clobbering). The write itself is
+ * checked against the version read here, and re-read on a conflict, so a
+ * builder save racing the rewrite is not overwritten either.
+ */
+export async function updatePageRefs(
+  from: string,
+  to: string | null,
+): Promise<GalleryVersionChange | null> {
+  for (let attempt = 0; ; attempt++) {
+    const { data: gallery, version } = await readGalleryYamlVersioned();
+    if (!gallery || !Array.isArray(gallery.subpages)) return null;
+    const next = rewritePageRefs(gallery.subpages, from, to);
+    if (next === gallery.subpages) return null;
+    try {
+      const written = await writeGalleryYaml({ ...gallery, subpages: next }, version);
+      invalidateConfigCache();
+      return { from: version, to: written };
+    } catch (err) {
+      if (!(err instanceof VersionConflictError) || attempt >= 2) throw err;
+    }
+  }
+}
diff --git a/lib/admin/pageSlugs.ts b/lib/admin/pageSlugs.ts
new file mode 100644
index 0000000..98d959e
--- /dev/null
+++ b/lib/admin/pageSlugs.ts
@@ -0,0 +1,27 @@
+/**
+ * The slugs a content page must not take (#722), gathered from the live
+ * configuration: subpages, standalone albums and journal entries. The fixed
+ * routes are checked by pageSlugCollision() itself.
+ *
+ * Server only. Album slugs need Immich; when it cannot answer, the album list
+ * is empty rather than the whole check failing — a save during an Immich
+ * outage should not be refused for a reason nobody can see.
+ */
+
+import { getConfig } from '../config';
+import { immich } from '../immich';
+import { listJournalEntries } from './journal-service';
+import type { SlugTakenBy } from '../pages';
+
+export async function takenPageSlugs(): Promise<SlugTakenBy> {
+  const config = getConfig();
+  const [albums, journal] = await Promise.all([
+    immich.getStandaloneAlbums().catch(() => []),
+    listJournalEntries().catch(() => []),
+  ]);
+  return {
+    subpages: config.subpages.map((sp) => sp.slug),
+    albums: albums.map((a) => a.slug),
+    journal: journal.map((e) => e.slug),
+  };
+}
diff --git a/lib/admin/pages-service.ts b/lib/admin/pages-service.ts
new file mode 100644
index 0000000..1ceab91
--- /dev/null
+++ b/lib/admin/pages-service.ts
@@ -0,0 +1,285 @@
+/**
+ * Server-side storage for content pages (#722): `content/pages/<slug>.md`.
+ *
+ * Mirrors journal-service.ts — the same slug rule, the same containment check
+ * on every path, atomic writes, and rotating backups in
+ * `content/pages/.backups/` (ten saves per page; delete and pre-restore
+ * snapshots are never pruned).
+ */
+
+import fs from 'fs/promises';
+import nodeFs from 'fs';
+import path from 'path';
+import { atomicWrite } from '../atomicWrite';
+import { assertVersion, readVersioned, serializeContentWrite, versionOf } from './contentVersion';
+import { isValidSlug, parseJournalMarkdown, type ParsedJournal } from '../journal';
+import type { PageSummary } from '../pages';
+import { ParsedFileCache } from './parsedFileCache';
+
+const MAX_BACKUPS = 10;
+
+/**
+ * Join a filename onto a directory, or return null if the result would escape
+ * it. isValidSlug() already rejects dots and separators; this is the second
+ * lock, and the barrier the taint analysis in CI can see.
+ */
+function containedPath(dir: string, filename: string): string | null {
+  const base = path.resolve(dir);
+  const resolved = path.resolve(base, filename);
+  if (resolved !== base && !resolved.startsWith(base + path.sep)) return null;
+  return resolved;
+}
+
+/**
+ * Resolved per call rather than at import: tests point the service at a
+ * temporary directory by changing the working directory.
+ */
+function pagesDir(): string {
+  return path.join(process.cwd(), 'content', 'pages');
+}
+function backupDir(): string {
+  return path.join(pagesDir(), '.backups');
+}
+
+/** `<slug>.md.<timestamp>[.deleted|.pre-restore].bak` — see journal-service. */
+const PAGE_BACKUP_NAME = /^([\w-]+)\.md\.[\w-]+\.(?:(deleted|pre-restore)\.)?bak$/;
+
+export interface PageBackup {
+  filename: string;
+  slug: string;
+  kind: 'save' | 'deleted' | 'pre-restore';
+}
+
+/** The file a slug lives in, or null for a slug that is not one. */
+export function resolvePageFilePath(slug: string): string | null {
+  if (!isValidSlug(slug)) return null;
+  return containedPath(pagesDir(), `${slug}.md`);
+}
+
+async function snapshotPage(
+  filePath: string,
+  filename: string,
+  kind?: 'deleted' | 'pre-restore',
+): Promise<void> {
+  await fs.mkdir(backupDir(), { recursive: true });
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const suffix = kind ? `.${kind}` : '';
+  const backupPath = containedPath(backupDir(), `${filename}.${timestamp}${suffix}.bak`);
+  if (!backupPath) {
+    throw new Error(`Refusing to write a backup outside ${backupDir()}: "${filename}"`);
+  }
+  await fs.copyFile(filePath, backupPath);
+}
+
+async function prunePageBackups(filename: string): Promise<void> {
+  const backups = (await fs.readdir(backupDir()))
+    .filter((f) => {
+      const match = PAGE_BACKUP_NAME.exec(f);
+      return match !== null && `${match[1]}.md` === filename && match[2] === undefined;
+    })
+    .sort();
+  for (const old of backups.slice(0, Math.max(0, backups.length - MAX_BACKUPS))) {
+    await fs.unlink(path.join(backupDir(), old)).catch(() => {});
+  }
+}
+
+/** Every page backup on disk, newest first. */
+export async function listPageBackups(): Promise<PageBackup[]> {
+  let files: string[];
+  try {
+    files = await fs.readdir(backupDir());
+  } catch {
+    return [];
+  }
+  return files
+    .map((filename) => {
+      const match = PAGE_BACKUP_NAME.exec(filename);
+      if (!match) return null;
+      return { filename, slug: match[1], kind: (match[2] ?? 'save') as PageBackup['kind'] };
+    })
+    .filter((b): b is PageBackup => b !== null)
+    .sort((a, b) => b.filename.localeCompare(a.filename));
+}
+
+/**
+ * The listed frontmatter per file, reused while the file is unchanged: every
+ * public page render lists the pages for the header nav (see
+ * parsedFileCache.ts).
+ */
+const frontmatterCache = new ParsedFileCache<PageSummary['frontmatter']>((raw) => {
+  const { title, description, password, draft } = parseJournalMarkdown(raw).frontmatter;
+  return { title, description, password, draft };
+});
+
+/** Every page, sorted by title. Unparseable files are skipped with a log line. */
+export async function listPages(): Promise<PageSummary[]> {
+  let files: string[];
+  try {
+    files = await fs.readdir(pagesDir());
+  } catch {
+    return [];
+  }
+  const pages: PageSummary[] = [];
+  const listed = new Set<string>();
+  for (const file of files) {
+    if (!file.endsWith('.md')) continue;
+    const slug = file.slice(0, -3);
+    const filePath = resolvePageFilePath(slug);
+    if (!filePath) continue;
+    listed.add(filePath);
+    try {
+      pages.push({ slug, frontmatter: await frontmatterCache.read(filePath) });
+    } catch (err) {
+      console.error(`[Pages] Failed to read ${file}:`, err);
+    }
+  }
+  frontmatterCache.retain(listed);
+  return pages.sort((a, b) =>
+    (a.frontmatter.title || a.slug).localeCompare(b.frontmatter.title || b.slug),
+  );
+}
+
+/** Slugs of every page file, without parsing them. */
+export function listPageSlugsSync(): string[] {
+  try {
+    return nodeFs
+      .readdirSync(pagesDir())
+      .filter((f) => f.endsWith('.md'))
+      .map((f) => f.slice(0, -3))
+      .filter(isValidSlug);
+  } catch {
+    return [];
+  }
+}
+
+export interface PageRecord {
+  slug: string;
+  rawMarkdown: string;
+  parsed: ParsedJournal;
+  /** Version of the file's bytes (#601), for the editor's If-Match. */
+  version: string;
+}
+
+/** One page, or null when there is no such file. */
+export async function readPage(slug: string): Promise<PageRecord | null> {
+  const filePath = resolvePageFilePath(slug);
+  if (!filePath) return null;
+  try {
+    const { text: rawMarkdown, version } = await readVersioned(filePath);
+    return { slug, rawMarkdown, parsed: parseJournalMarkdown(rawMarkdown), version };
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') return null;
+    throw err;
+  }
+}
+
+/** Synchronous read, for the password lookup in lib/auth.ts. */
+export function readPageSync(slug: string): PageRecord | null {
+  const filePath = resolvePageFilePath(slug);
+  if (!filePath) return null;
+  try {
+    const bytes = nodeFs.readFileSync(filePath);
+    const rawMarkdown = bytes.toString('utf8');
+    return {
+      slug,
+      rawMarkdown,
+      parsed: parseJournalMarkdown(rawMarkdown),
+      version: versionOf(bytes),
+    };
+  } catch {
+    return null;
+  }
+}
+
+/** Write a page atomically, snapshotting the previous version first. */
+export async function writePage(slug: string, rawMarkdown: string): Promise<void> {
+  const filePath = resolvePageFilePath(slug);
+  if (!filePath) throw new Error(`Invalid page slug: "${slug}"`);
+  const filename = `${slug}.md`;
+  await fs.mkdir(pagesDir(), { recursive: true });
+
+  // Only ENOENT means "nothing to back up"; any other failure aborts the save
+  // before it overwrites the live file (the journal's #630).
+  let exists = true;
+  try {
+    await fs.access(filePath);
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code !== 'ENOENT') throw err;
+    exists = false;
+  }
+  if (exists) {
+    await snapshotPage(filePath, filename);
+    await prunePageBackups(filename);
+  }
+
+  await atomicWrite(filePath, rawMarkdown);
+  console.log(`[Pages] ✅ Saved ${filename}`);
+}
+
+/**
+ * Delete a page, keeping a `.deleted.bak` copy. The snapshot is not optional:
+ * when it cannot be written, the delete is refused.
+ */
+export async function deletePage(slug: string): Promise<boolean> {
+  const filePath = resolvePageFilePath(slug);
+  if (!filePath) throw new Error(`Invalid page slug: "${slug}"`);
+  try {
+    await fs.access(filePath);
+  } catch {
+    return false;
+  }
+  await snapshotPage(filePath, `${slug}.md`, 'deleted');
+  await fs.unlink(filePath);
+  console.log(`[Pages] 🗑️ Deleted ${slug}.md`);
+  return true;
+}
+
+/** Restore a page from one of its backups, returning the restored slug. */
+export async function restorePageBackup(backupFilename: string): Promise<string> {
+  const match = PAGE_BACKUP_NAME.exec(backupFilename);
+  if (!match || path.basename(backupFilename) !== backupFilename || !isValidSlug(match[1])) {
+    throw new Error(`Refusing to restore from an unrecognised backup name: "${backupFilename}"`);
+  }
+  const slug = match[1];
+  const source = containedPath(backupDir(), backupFilename);
+  const target = resolvePageFilePath(slug);
+  if (!source || !target) {
+    throw new Error(`Refusing to restore from an unrecognised backup name: "${backupFilename}"`);
+  }
+  const content = await fs.readFile(source, 'utf8');
+  try {
+    await fs.access(target);
+    await snapshotPage(target, `${slug}.md`, 'pre-restore');
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code !== 'ENOENT') throw err;
+  }
+  await fs.mkdir(pagesDir(), { recursive: true });
+  await atomicWrite(target, content);
+  console.log(`[Pages] 🔄 Restored ${slug}.md from ${backupFilename}`);
+  return slug;
+}
+
+/**
+ * The editor's save (#601): write `slug`, refusing with a VersionConflictError
+ * when the file the editor loaded — `fromSlug`'s, for a rename — is no longer
+ * at `baseVersion`. A rename writes the new file and then deletes the old one.
+ * Check, write and delete run in the content write queue, so another save
+ * cannot land between them. Returns the version of what was written.
+ */
+export function savePage(
+  slug: string,
+  rawMarkdown: string,
+  options: { baseVersion?: string; fromSlug?: string } = {},
+): Promise<string> {
+  const fromSlug = options.fromSlug ?? slug;
+  return serializeContentWrite(async () => {
+    if (options.baseVersion !== undefined) {
+      const loaded = resolvePageFilePath(fromSlug);
+      if (!loaded) throw new Error(`Invalid page slug: "${fromSlug}"`);
+      await assertVersion(loaded, options.baseVersion);
+    }
+    await writePage(slug, rawMarkdown);
+    if (fromSlug !== slug) await deletePage(fromSlug);
+    return versionOf(rawMarkdown);
+  });
+}
diff --git a/lib/admin/parsedFileCache.ts b/lib/admin/parsedFileCache.ts
new file mode 100644
index 0000000..5af08ea
--- /dev/null
+++ b/lib/admin/parsedFileCache.ts
@@ -0,0 +1,57 @@
+/**
+ * Per-file memo for the journal and page listings.
+ *
+ * `listJournalEntries()` and `listPages()` run on every public page render —
+ * the header nav asks whether a journal exists and which pages to link — and
+ * used to read and parse every markdown file each time. The parse is the
+ * expensive part and depends only on the file's bytes, so it is kept here,
+ * keyed on the file's identity and stamp: inode, size and mtime in
+ * nanoseconds.
+ *
+ * An admin save goes through atomicWrite (temp file + rename), which always
+ * produces a new inode, so a save is seen by the very next listing, in this
+ * module instance or any other. An edit in place changes mtime. The stat is
+ * taken before the read, so a write landing between the two at worst stores
+ * the new bytes under the old stamp — which the next stat no longer matches,
+ * so the file is simply read again. Stale bytes under a current stamp cannot
+ * happen.
+ *
+ * Values are handed out as copies: a caller that mutates an entry must not
+ * change what the next request sees.
+ */
+
+import fs from 'fs/promises';
+
+interface Cached<T> {
+  stamp: string;
+  value: T;
+}
+
+export class ParsedFileCache<T> {
+  private readonly entries = new Map<string, Cached<T>>();
+
+  constructor(private readonly parse: (raw: string) => T) {}
+
+  /**
+   * Parsed contents of `filePath`, from the memo when the file is unchanged.
+   * Throws like `fs.readFile` for a missing or unreadable file, and like
+   * `parse` for one that does not parse — neither outcome is cached.
+   */
+  async read(filePath: string): Promise<T> {
+    const st = await fs.stat(filePath, { bigint: true });
+    const stamp = `${st.ino}:${st.size}:${st.mtimeNs}`;
+    const hit = this.entries.get(filePath);
+    if (hit && hit.stamp === stamp) return structuredClone(hit.value);
+
+    const value = this.parse(await fs.readFile(filePath, 'utf8'));
+    this.entries.set(filePath, { stamp, value });
+    return structuredClone(value);
+  }
+
+  /** Drop entries for files a listing no longer found, so deletes do not pile up. */
+  retain(filePaths: Set<string>): void {
+    for (const key of this.entries.keys()) {
+      if (!filePaths.has(key)) this.entries.delete(key);
+    }
+  }
+}
diff --git a/lib/admin/proofing-view.ts b/lib/admin/proofing-view.ts
new file mode 100644
index 0000000..609f21e
--- /dev/null
+++ b/lib/admin/proofing-view.ts
@@ -0,0 +1,96 @@
+/**
+ * What the admin panel sees of a proofing session: the stored record plus the
+ * album's name and the state, without the Immich lookups repeated per caller.
+ */
+
+import { immich, type ImmichAlbum } from '@/lib/immich';
+import { imageUrl } from '@/lib/urls';
+import {
+  downloadsRemaining,
+  sessionState,
+  type ProofSession,
+  type ProofState,
+} from '@/lib/proofSessions';
+
+export interface AdminProofSession {
+  id: string;
+  clientName: string;
+  albumId: string;
+  /** Null when Immich no longer has the album (or cannot be reached). */
+  albumName: string | null;
+  albumAssetCount: number | null;
+  /** Relative path of the client link. */
+  link: string;
+  createdAt: string;
+  expiresOn: string | null;
+  download: ProofSession['download'];
+  downloadLimit: number | null;
+  downloadsUsed: number;
+  downloadsRemaining: number | null;
+  selected: number;
+  updatedAt: string | null;
+  submittedAt: string | null;
+  state: ProofState;
+}
+
+export interface AdminProofPick {
+  assetId: string;
+  position: number;
+  fileName: string;
+  thumbUrl: string;
+  takenAt?: string;
+}
+
+/** Load each album once, tolerating ones that are gone or unreachable. */
+export async function loadAlbums(ids: string[]): Promise<Map<string, ImmichAlbum | null>> {
+  const unique = Array.from(new Set(ids));
+  const albums = await Promise.all(
+    unique.map((id) => immich.getProofingAlbum(id).catch(() => null)),
+  );
+  return new Map(unique.map((id, i) => [id, albums[i]]));
+}
+
+export function toAdminSession(
+  session: ProofSession,
+  album: ImmichAlbum | null,
+): AdminProofSession {
+  return {
+    id: session.id,
+    clientName: session.clientName,
+    albumId: session.albumId,
+    albumName: album?.albumName ?? null,
+    albumAssetCount: album ? album.assets.length : null,
+    link: `/proof/${session.token}`,
+    createdAt: session.createdAt,
+    expiresOn: session.expiresOn ?? null,
+    download: session.download,
+    downloadLimit: session.downloadLimit ?? null,
+    downloadsUsed: session.downloadsUsed,
+    downloadsRemaining: downloadsRemaining(session),
+    selected: session.selection.length,
+    updatedAt: session.updatedAt ?? null,
+    submittedAt: session.submittedAt ?? null,
+    state: sessionState(session),
+  };
+}
+
+/** The selected photos in album order, with what the export and preview need. */
+export function picksFor(session: ProofSession, album: ImmichAlbum | null): AdminProofPick[] {
+  if (!album) return [];
+  const chosen = new Set(session.selection);
+  const media = album.assets.filter((a) => a.type === 'IMAGE' || a.type === 'VIDEO');
+  const picks: AdminProofPick[] = [];
+  media.forEach((asset, index) => {
+    if (!chosen.has(asset.id)) return;
+    picks.push({
+      assetId: asset.id,
+      position: index + 1,
+      fileName: asset.originalFileName,
+      thumbUrl: imageUrl(asset.id, 'thumbnail'),
+      ...(asset.localDateTime || asset.fileCreatedAt
+        ? { takenAt: asset.localDateTime ?? asset.fileCreatedAt }
+        : {}),
+    });
+  });
+  return picks;
+}
diff --git a/lib/admin/yaml-service.ts b/lib/admin/yaml-service.ts
index 271f0e4..276a96e 100644
--- a/lib/admin/yaml-service.ts
+++ b/lib/admin/yaml-service.ts
@@ -8,35 +8,67 @@ import path from 'path';
 import yaml from 'js-yaml';
 import { atomicWrite } from '../atomicWrite';
 import type { GalleryYaml, SettingsYaml } from '../config/schema';
+import { assertVersion, readVersioned, serializeContentWrite, versionOf } from './contentVersion';
 
 const CONTENT_DIR = path.join(process.cwd(), 'content');
 const MAX_BACKUPS = 10; // Keep last 10 backups per file
 
-/** Read gallery.yaml and return parsed content. */
-export async function readGalleryYaml(): Promise<GalleryYaml | null> {
+/** A parsed YAML file and the version (#601) of the bytes it was parsed from. */
+export interface VersionedYaml<T> {
+  data: T | null;
+  version: string;
+}
+
+async function readYamlVersioned<T>(filename: string): Promise<VersionedYaml<T>> {
   try {
-    const raw = await fs.readFile(path.join(CONTENT_DIR, 'gallery.yaml'), 'utf8');
-    return yaml.load(raw) as GalleryYaml;
+    const { text, version } = await readVersioned(path.join(CONTENT_DIR, filename));
+    return { data: yaml.load(text) as T, version };
   } catch (err) {
-    if ((err as NodeJS.ErrnoException).code === 'ENOENT') return null;
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+      return { data: null, version: versionOf(null) };
+    }
     throw err;
   }
 }
 
+/** Read gallery.yaml and return parsed content. */
+export async function readGalleryYaml(): Promise<GalleryYaml | null> {
+  return (await readGalleryYamlVersioned()).data;
+}
+
+/** gallery.yaml with its version, for the editor that will save it back. */
+export function readGalleryYamlVersioned(): Promise<VersionedYaml<GalleryYaml>> {
+  return readYamlVersioned<GalleryYaml>('gallery.yaml');
+}
+
 /** Read settings.yaml and return parsed content. */
 export async function readSettingsYaml(): Promise<SettingsYaml | null> {
-  try {
-    const raw = await fs.readFile(path.join(CONTENT_DIR, 'settings.yaml'), 'utf8');
-    return yaml.load(raw) as SettingsYaml;
-  } catch (err) {
-    if ((err as NodeJS.ErrnoException).code === 'ENOENT') return null;
-    throw err;
-  }
+  return (await readSettingsYamlVersioned()).data;
 }
 
-/** Atomically write a YAML file with backup. */
-async function writeYamlFile(filename: string, data: unknown): Promise<void> {
+/** settings.yaml with its version, for the editor that will save it back. */
+export function readSettingsYamlVersioned(): Promise<VersionedYaml<SettingsYaml>> {
+  return readYamlVersioned<SettingsYaml>('settings.yaml');
+}
+
+/**
+ * Atomically write a YAML file with backup, returning the new version.
+ *
+ * With a `baseVersion`, the write is refused with a VersionConflictError when
+ * the file on disk is no longer that version (#601) — checked inside the write
+ * queue, so no other save can slip in between the check and the rename.
+ */
+function writeYamlFile(filename: string, data: unknown, baseVersion?: string): Promise<string> {
+  return serializeContentWrite(() => writeYamlFileNow(filename, data, baseVersion));
+}
+
+async function writeYamlFileNow(
+  filename: string,
+  data: unknown,
+  baseVersion: string | undefined,
+): Promise<string> {
   const filePath = path.join(CONTENT_DIR, filename);
+  await assertVersion(filePath, baseVersion);
 
   // Ensure content directory exists
   await fs.mkdir(CONTENT_DIR, { recursive: true });
@@ -85,16 +117,17 @@ async function writeYamlFile(filename: string, data: unknown): Promise<void> {
   await atomicWrite(filePath, content);
 
   console.log(`[Admin] ✅ Saved ${filename}`);
+  return versionOf(content);
 }
 
-/** Write gallery.yaml. */
-export async function writeGalleryYaml(data: GalleryYaml): Promise<void> {
-  await writeYamlFile('gallery.yaml', data);
+/** Write gallery.yaml; see writeYamlFile for `baseVersion`. Returns the new version. */
+export function writeGalleryYaml(data: GalleryYaml, baseVersion?: string): Promise<string> {
+  return writeYamlFile('gallery.yaml', data, baseVersion);
 }
 
-/** Write settings.yaml. */
-export async function writeSettingsYaml(data: SettingsYaml): Promise<void> {
-  await writeYamlFile('settings.yaml', data);
+/** Write settings.yaml; see writeYamlFile for `baseVersion`. Returns the new version. */
+export function writeSettingsYaml(data: SettingsYaml, baseVersion?: string): Promise<string> {
+  return writeYamlFile('settings.yaml', data, baseVersion);
 }
 
 /** List available backups for a file. */
diff --git a/lib/auth.ts b/lib/auth.ts
index fc36afd..17701b9 100644
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -1,5 +1,6 @@
 /**
- * Password gating for subpages, albums, journal entries and the site as a whole.
+ * Password gating for subpages, albums, journal entries, content pages and the
+ * site as a whole.
  * Uses HMAC tokens stored in HttpOnly cookies — no database needed.
  *
  * Token = HMAC-SHA256(slug + passwordSecret, authSecret)
@@ -11,12 +12,12 @@ import { getConfig, SubpageConfig } from './config';
 // From the pure schema module, not the config barrel: tests that stub out
 // '@/lib/config' wholesale would otherwise lose this helper.
 import { normalizeSlug } from './config/schema';
-import { verifyScrypt, generateScryptHash, isScryptHash } from './password';
+import { verifyScrypt, generateScryptHash, isScryptHash, burnScrypt } from './password';
 
 const TOKEN_EXPIRY_HOURS = 24;
 
 /** What a password can protect. */
-export type ProtectedType = 'subpage' | 'album' | 'journal' | 'site';
+export type ProtectedType = 'subpage' | 'album' | 'journal' | 'page' | 'site';
 
 /**
  * Key used for the site-wide gate. There is only ever one, so it is a constant
@@ -39,15 +40,24 @@ export const SITE_AUTH_KEY = 'site';
  */
 const SITE_TOKEN_KEY = '__site__';
 
-/** The key that actually gets signed: only the site gate is remapped. */
+/**
+ * The key that actually gets signed. The site gate is remapped (see above), and
+ * a content page is prefixed: a page and a subpage or journal entry of the same
+ * slug and password would otherwise sign identical tokens, and a visitor could
+ * copy one cookie's value into the other's name. `page:` cannot be a slug —
+ * isValidSlug() rejects the colon.
+ */
 function tokenKey(key: string, type: ProtectedType): string {
-  return type === 'site' ? SITE_TOKEN_KEY : key;
+  if (type === 'site') return SITE_TOKEN_KEY;
+  if (type === 'page') return `page:${key}`;
+  return key;
 }
 
 const TYPE_LABELS: Record<ProtectedType, string> = {
   subpage: 'Subpage',
   album: 'Album',
   journal: 'Journal entry',
+  page: 'Page',
   site: 'Site',
 };
 
@@ -78,10 +88,12 @@ function authToken(key: string, passwordSecret: string, expiresAt: number): stri
 import nodeFs from 'fs';
 import { parseFrontmatter } from './journal';
 import { resolveJournalFilePath } from './admin/journal-service';
+import { readPageSync } from './admin/pages-service';
 
 function cookieName(key: string, type: ProtectedType): string {
   if (type === 'subpage') return `lb_auth_${key}`;
   if (type === 'journal') return `lb_auth_journal_${key}`;
+  if (type === 'page') return `lb_auth_page_${key}`;
   if (type === 'site') return SITE_AUTH_COOKIE;
   return `lb_auth_album_${key}`;
 }
@@ -107,7 +119,9 @@ export const SITE_AUTH_COOKIE = 'lb_site_auth';
  *
  * An album listed on the home page is published there whatever else lists it,
  * so it stays reachable. Where the only routes are subpages, one of them has
- * to be open — which mirrors what the visitor could actually have clicked.
+ * to be open — which mirrors what the visitor could actually have clicked. A
+ * subpage taken offline with `enabled: false` is no route at all, so an album
+ * listed only there is not reachable, whatever its password.
  */
 export function isAlbumReachable(
   albumId: string,
@@ -121,7 +135,7 @@ export function isAlbumReachable(
   const routes = config.subpages.filter(
     (sp) => sp.enabled !== false && sp.albumIds.includes(albumId),
   );
-  if (routes.length === 0) return true;
+  if (routes.length === 0) return false;
 
   return routes.some((sp) => isAuthenticated(sp.slug, getCookie, 'subpage'));
 }
@@ -175,6 +189,9 @@ function findPassword(key: string, type: ProtectedType): string | undefined {
     } catch {}
     return undefined;
   }
+  if (type === 'page') {
+    return readPageSync(key)?.parsed.frontmatter.password || undefined;
+  }
   return undefined;
 }
 
@@ -217,8 +234,13 @@ export async function authenticate(
   type: ProtectedType = 'subpage',
   secure = true,
 ): Promise<string | null> {
+  // Every path below runs exactly one scrypt, so the reply time does not tell a
+  // prober which keys exist, which carry a password, or how it is stored.
   const storedPassword = findPassword(key, type);
-  if (!storedPassword) return null;
+  if (!storedPassword) {
+    await burnScrypt(password);
+    return null;
+  }
 
   let isValid = false;
 
@@ -229,6 +251,7 @@ export async function authenticate(
         `   Please switch temporarily to plaintext in your gallery.yaml, log in again\n` +
         `   to see your new secure "scrypt:..." hash in the logs, and update your file.\n`,
     );
+    await burnScrypt(password);
     return null;
   }
 
@@ -247,7 +270,10 @@ export async function authenticate(
       .digest();
     isValid = crypto.timingSafeEqual(attemptHash, storedHash);
 
-    if (isValid) {
+    if (!isValid) {
+      await burnScrypt(password);
+    } else {
+      // The success path pays its scrypt here, for the recommended hash.
       const recommendedHash = await generateScryptHash(storedPassword);
       console.warn(
         `\n⚠️  SECURITY WARNING: ${TYPE_LABELS[type]} "${key}" is using a plaintext password${type === 'site' ? ' in settings.yaml' : ' in gallery.yaml'}.\n` +
diff --git a/lib/cache.ts b/lib/cache.ts
index e6c0770..b93317b 100644
--- a/lib/cache.ts
+++ b/lib/cache.ts
@@ -17,8 +17,28 @@ interface CacheEntry<T> {
 
 const DEFAULT_STALE_MAX_AGE_MS = 24 * 60 * 60 * 1000; // 24 hours
 
+/**
+ * The entries live on globalThis, not in this module.
+ *
+ * Next bundles each route separately, so every route handler gets its own
+ * instance of this module. A module-level Map meant the admin panel's
+ * "Clear cache", a save's invalidation and the Immich webhook each cleared a
+ * cache no page ever read from, and the diagnostics page reported the size
+ * of its own, always empty, copy ("0 items"). The process is shared, so one
+ * store on globalThis is the cache every instance reads and clears. The key is
+ * versioned so a dev server's hot reload never hands a new build entries in
+ * an older shape.
+ */
+const STORE_KEY = Symbol.for('immich-folio.immich-cache.v2');
+
+function sharedStore(): Map<string, CacheEntry<unknown>> {
+  const holder = globalThis as unknown as Record<symbol, Map<string, CacheEntry<unknown>>>;
+  holder[STORE_KEY] ??= new Map();
+  return holder[STORE_KEY];
+}
+
 class MemoryCache {
-  private store = new Map<string, CacheEntry<unknown>>();
+  private store = sharedStore();
   private maxEntries = 200;
 
   get size(): number {
diff --git a/lib/config/index.ts b/lib/config/index.ts
index 81c9fb2..d1fe25e 100644
--- a/lib/config/index.ts
+++ b/lib/config/index.ts
@@ -3,7 +3,7 @@ import path from 'node:path';
 import { env } from '../env';
 import { resolveAuthSecret } from '../secret';
 import { resolveSiteUrl } from '../siteUrl';
-import { getInstallCredentials } from '../install';
+import { getInstallCredentials, installFilePath } from '../install';
 import { loadYaml, clearYamlCache, validateUuid } from './parser';
 import { resolveTheme, VALID_LAYOUTS, DEFAULT_PRESET } from './theme';
 import { ALBUM_SORT_MODES, isAlbumSortMode, type AlbumSortMode } from '../albumSort';
@@ -30,14 +30,23 @@ import {
   CONTACT_RETENTION_DEFAULT,
   CONTACT_RETENTION_MAX,
   isHttpUrl,
+  isPageRef,
+  type GallerySubpageYaml,
 } from './schema';
+import { isValidSlug } from '../journal';
+import { getDictionary, resolveLocale } from '../i18n';
+import type { NavEntry } from '../pages';
 
 export * from './schema';
 export * from './theme';
 
+/** The last derived config and the inputs it was derived from; see getConfig(). */
+let derived: { inputs: string; config: AppConfig } | null = null;
+
 /** Invalidate the cached YAML so the next getConfig() call re-parses the files. */
 export function invalidateConfigCache(): void {
   clearYamlCache();
+  derived = null;
 }
 
 /**
@@ -150,6 +159,20 @@ export function resolveProofing(
   return subpage?.proofing ?? globalEnabled;
 }
 
+/**
+ * The recipient of the proofing dialog's "email to photographer" (#736):
+ * `proofing.email` when set, else the footer contact email. The first
+ * non-empty value, trimmed — an address saved as only whitespace is not
+ * configured. Undefined means neither is set, and the dialog hides the button
+ * rather than opening a compose with an empty To:.
+ */
+export function resolveProofingEmail(
+  proofingEmail?: string,
+  footerEmail?: string,
+): string | undefined {
+  return (proofingEmail ?? '').trim() || (footerEmail ?? '').trim() || undefined;
+}
+
 /**
  * EXPERIMENTAL: keep only nav links that are safe to render as header <a>
  * tags. Non-http(s) schemes (javascript:, data:) and incomplete entries are
@@ -244,6 +267,7 @@ export interface GalleryDerivation {
   albums: string[];
   standaloneAlbums: string[];
   subpages: SubpageConfig[];
+  nav: NavEntry[];
   albumOverrides: Record<string, string>;
   albumDescriptions: Record<string, string>;
   albumPasswords: Record<string, string>;
@@ -408,9 +432,35 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
   const standaloneAlbumIds = processAlbumEntries(gallery.albums ?? [], 'gallery.yaml albums');
 
   let subpages: SubpageConfig[] = [];
+  /** Menu order, subpages and `- page:` references interleaved (#722). */
+  const nav: NavEntry[] = [];
 
   if (Array.isArray(gallery.subpages)) {
-    subpages = gallery.subpages.map((sp) => {
+    const pageRefs = new Set<string>();
+    const subpageEntries: GallerySubpageYaml[] = [];
+    for (const entry of gallery.subpages) {
+      if (isPageRef(entry)) {
+        const slug = entry.page.trim();
+        // Thrown like every other structure error: the admin PUT turns it into
+        // a 400, and a hand-edited file degrades to the setup screen.
+        if (!isValidSlug(slug)) {
+          throw new Error(
+            `gallery.yaml subpages: "page: ${entry.page}" is not a valid page slug ` +
+              `(letters, digits, "-" and "_" only).`,
+          );
+        }
+        if (pageRefs.has(slug)) {
+          throw new Error(`gallery.yaml subpages: page "${slug}" is listed more than once.`);
+        }
+        pageRefs.add(slug);
+        nav.push({ type: 'page', slug });
+      } else {
+        subpageEntries.push(entry);
+        // Placeholder, filled in with the derived slug below.
+        nav.push({ type: 'subpage', slug: '' });
+      }
+    }
+    subpages = subpageEntries.map((sp) => {
       if (!sp.name) {
         throw new Error(`Subpage "(unnamed)" must have a name`);
       }
@@ -467,6 +517,10 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
         ...buildSubpageGrids(sp.grid, sp.coverGrid),
       };
     });
+    let next = 0;
+    for (const entry of nav) {
+      if (entry.type === 'subpage') entry.slug = subpages[next++].slug;
+    }
   } else if (gallery.subpages) {
     subpages = Object.entries(gallery.subpages).map(([name, value]) => {
       if (Array.isArray(value)) {
@@ -500,6 +554,10 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
     });
   }
 
+  if (!Array.isArray(gallery.subpages)) {
+    for (const sp of subpages) nav.push({ type: 'subpage', slug: sp.slug });
+  }
+
   const subpageAlbumIds = new Set(subpages.flatMap((sp) => sp.albumIds));
   const allAlbumIds = [...new Set([...standaloneAlbumIds, ...subpageAlbumIds])];
   const standaloneAlbums = standaloneAlbumIds.filter((id) => !subpageAlbumIds.has(id));
@@ -550,6 +608,7 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
     albums: allAlbumIds,
     standaloneAlbums,
     subpages,
+    nav,
     albumOverrides,
     albumDescriptions,
     albumPasswords,
@@ -572,11 +631,54 @@ function aboutContentExists(): boolean {
   }
 }
 
+/**
+ * Everything deriveConfig() reads, as one string: the path and mtime of each
+ * file (or `-` when it is absent) and the parsed environment.
+ */
+function configInputs(): string {
+  const content = path.join(process.cwd(), 'content');
+  const files = [
+    installFilePath(),
+    path.join(content, 'gallery.yaml'),
+    path.join(content, 'settings.yaml'),
+    path.join(content, 'about.md'),
+  ];
+  // throwIfNoEntry: a missing file is the normal case for install.json and
+  // about.md, and building an ENOENT error costs more than the stat.
+  // turbopackIgnore: `file` is not statically resolvable, so without the
+  // comment Turbopack traces the whole project into .next/standalone. Only
+  // the mtime is read here; the files themselves are loaded elsewhere.
+  const stamps = files.map(
+    (file) =>
+      `${file}@${fs.statSync(/* turbopackIgnore: true */ file, { throwIfNoEntry: false })?.mtimeMs ?? '-'}`,
+  );
+  return `${stamps.join('|')}|${JSON.stringify(env)}`;
+}
+
+/**
+ * The site configuration.
+ *
+ * Admin saves can land in a different worker or process than page rendering,
+ * so this cannot be a per-process singleton: freshness comes from the files'
+ * mtimes, re-checked on every call (a statSync each). What is cached is the
+ * derivation. A render and every image request call this many times over
+ * (`immich.config` is a getter), and rebuilding the whole config from the
+ * YAML each time cost more than the stats.
+ *
+ * The inputs are the ones loadYaml() and readInstallFile() already key their
+ * own caches on, so this is never staler than they are. Each caller still
+ * gets its own copy, exactly as before: nothing can mutate the cached one.
+ * A config that throws is not cached, so it throws again on the next call.
+ */
 export function getConfig(): AppConfig {
-  // No in-memory config cache: admin saves can land in a different
-  // worker/process than page rendering, so a per-worker cache goes stale
-  // until restart. Freshness comes from the mtime-checked YAML cache in
-  // loadYaml() — a statSync per file, negligible next to Immich API calls.
+  const inputs = configInputs();
+  if (derived?.inputs !== inputs) {
+    derived = { inputs, config: deriveConfig() };
+  }
+  return structuredClone(derived.config);
+}
+
+function deriveConfig(): AppConfig {
   const { apiUrl, apiKey } = getInstallCredentials();
   const authSecret = resolveAuthSecret();
 
@@ -604,6 +706,7 @@ export function getConfig(): AppConfig {
       albums: [],
       standaloneAlbums: [],
       subpages: [],
+      nav: [],
       siteTitle: env.SITE_TITLE || 'Immich Folio',
       siteSubtitle: env.SITE_SUBTITLE || 'Setup Required',
       lang: 'en',
@@ -665,6 +768,7 @@ export function getConfig(): AppConfig {
     albums: allAlbumIds,
     standaloneAlbums,
     subpages,
+    nav,
     albumOverrides,
     albumDescriptions,
     albumPasswords,
@@ -677,7 +781,10 @@ export function getConfig(): AppConfig {
     albumLocationPrecision,
   } = deriveGallery(gallery);
 
-  const siteSeoTitle = settings.seo?.title || settings.title || env.SITE_TITLE || 'Gallery';
+  // Last-resort title in the site's own language rather than a hardcoded
+  // English "Gallery" (#696).
+  const defaultTitle = env.SITE_TITLE || getDictionary(resolveLocale(settings.lang)).common.gallery;
+  const siteSeoTitle = settings.seo?.title || settings.title || defaultTitle;
 
   return {
     immich: { apiUrl: immichApiUrl, apiKey },
@@ -685,7 +792,8 @@ export function getConfig(): AppConfig {
     albums: allAlbumIds,
     standaloneAlbums,
     subpages,
-    siteTitle: settings.title ?? env.SITE_TITLE,
+    nav,
+    siteTitle: settings.title ?? defaultTitle,
     siteSubtitle: settings.subtitle ?? env.SITE_SUBTITLE,
     lang: settings.lang ?? 'en',
     // Env wins, so a deployment can rotate the site password without touching
@@ -746,6 +854,9 @@ export function getConfig(): AppConfig {
     proofing: {
       enabled: settings.proofing?.enabled !== false,
       allowMailto: settings.proofing?.allowMailto !== false,
+      // `proofing.email`, else the footer contact email (#736); absent hides
+      // the dialog's email button.
+      email: resolveProofingEmail(settings.proofing?.email, settings.footer?.email),
     },
     protection: settings.protection,
     watermark: settings.watermark,
diff --git a/lib/config/schema.ts b/lib/config/schema.ts
index ad1a244..293629f 100644
--- a/lib/config/schema.ts
+++ b/lib/config/schema.ts
@@ -1,5 +1,6 @@
 import type { AlbumSortMode } from '../albumSort';
 import type { LocationPrecision } from '../mapPrecision';
+import type { NavEntry } from '../pages';
 
 export interface SubpageSectionConfig {
   title: string;
@@ -217,6 +218,11 @@ export interface AppConfig {
   albums: string[];
   standaloneAlbums: string[];
   subpages: SubpageConfig[];
+  /**
+   * The header menu in gallery.yaml order: every subpage (hidden and disabled
+   * ones included — the menu filters) and every `- page:` reference (#722).
+   */
+  nav: NavEntry[];
   siteTitle: string;
   siteSubtitle: string;
   lang: string;
@@ -264,6 +270,13 @@ export interface AppConfig {
   proofing: {
     enabled: boolean;
     allowMailto: boolean;
+    /**
+     * Effective "email to photographer" recipient: `proofing.email` from
+     * settings when set, otherwise the footer contact email. Undefined means
+     * neither is configured, and the proofing dialog hides the email action
+     * rather than opening a compose with an empty To: (#736).
+     */
+    email?: string;
   };
   aboutEnabled: boolean;
   albumOverrides: Record<string, string>;
@@ -352,43 +365,63 @@ export interface AlbumEntryObject {
   location?: string;
 }
 
+/**
+ * A content page placed in the menu (#722): `- page: <slug>` among the
+ * subpages. The page itself lives in content/pages/<slug>.md.
+ */
+export interface PageRefYaml {
+  page: string;
+}
+
+/** Whether a raw `subpages:` list entry is a page reference rather than a subpage. */
+export function isPageRef(entry: unknown): entry is PageRefYaml {
+  return (
+    typeof entry === 'object' &&
+    entry !== null &&
+    'page' in entry &&
+    typeof (entry as { page: unknown }).page === 'string'
+  );
+}
+
 export interface GalleryYaml {
   hero?: string | string[];
   albums?: Array<string | Record<string, string | AlbumEntryObject>>;
   subpages?:
     | Record<string, string[] | Array<string | Record<string, string>>>
-    | Array<{
-        name: string;
-        title?: string;
-        subtitle?: string;
-        albums?: Array<string | Record<string, string | AlbumEntryObject>>;
-        sections?: Array<{
-          title: string;
-          description?: string;
-          albums: Array<string | Record<string, string | AlbumEntryObject>>;
-        }>;
-        password?: string;
-        proofing?: boolean;
-        essayFile?: string;
-        essayText?: string;
-        enabled?: boolean;
-        hidden?: boolean;
-        /** Map precision inherited by every album here (#469). */
-        location?: string;
-        grid?: {
-          columns?: number;
-          gap?: number;
-          aspectRatio?: string;
-          layout?: string;
-        };
-        /** Album covers only; falls back to `grid` when unset (#523). */
-        coverGrid?: {
-          columns?: number;
-          gap?: number;
-          aspectRatio?: string;
-          layout?: string;
-        };
-      }>;
+    | Array<GallerySubpageYaml | PageRefYaml>;
+}
+
+export interface GallerySubpageYaml {
+  name: string;
+  title?: string;
+  subtitle?: string;
+  albums?: Array<string | Record<string, string | AlbumEntryObject>>;
+  sections?: Array<{
+    title: string;
+    description?: string;
+    albums: Array<string | Record<string, string | AlbumEntryObject>>;
+  }>;
+  password?: string;
+  proofing?: boolean;
+  essayFile?: string;
+  essayText?: string;
+  enabled?: boolean;
+  hidden?: boolean;
+  /** Map precision inherited by every album here (#469). */
+  location?: string;
+  grid?: {
+    columns?: number;
+    gap?: number;
+    aspectRatio?: string;
+    layout?: string;
+  };
+  /** Album covers only; falls back to `grid` when unset (#523). */
+  coverGrid?: {
+    columns?: number;
+    gap?: number;
+    aspectRatio?: string;
+    layout?: string;
+  };
 }
 
 export interface SettingsYaml {
@@ -417,6 +450,8 @@ export interface SettingsYaml {
   proofing?: {
     enabled?: boolean;
     allowMailto?: boolean;
+    /** Overrides the footer contact email as the proofing recipient. */
+    email?: string;
   };
   theme?:
     | string
@@ -644,3 +679,44 @@ export function normalizeSlug(slug: string): string {
   }
   return decoded.normalize('NFC');
 }
+
+/**
+ * The albums the public site shows: the standalone ones and those of every
+ * subpage that is not offline. `albums` is the allowlist for loading an album
+ * and still holds the albums of a subpage taken offline with `enabled: false`
+ * (its configuration is kept), so it does not answer "is this published".
+ * Anything that lists albums or serves their photos outside a page route asks
+ * this instead.
+ */
+export function onlineAlbumIds(config: {
+  standaloneAlbums?: readonly string[];
+  subpages: ReadonlyArray<{ albumIds: readonly string[]; enabled?: boolean }>;
+}): Set<string> {
+  return new Set([
+    ...(config.standaloneAlbums ?? []),
+    ...config.subpages.filter((sp) => sp.enabled !== false).flatMap((sp) => sp.albumIds),
+  ]);
+}
+
+/** A subpage that appears in listings: online and not `hidden`. */
+export function isListedSubpage(sp: { enabled?: boolean; hidden?: boolean }): boolean {
+  return sp.enabled !== false && sp.hidden !== true;
+}
+
+/**
+ * The albums a public listing may name: the standalone ones and those of
+ * every subpage that is online and not `hidden`. Narrower than
+ * {@link onlineAlbumIds} — a hidden subpage is reachable by direct link only,
+ * so its photos are still served (publishedAssets asks `onlineAlbumIds`), but
+ * an overview such as the map must not advertise them. An album that a listed
+ * subpage or the standalone list also carries stays.
+ */
+export function listedAlbumIds(config: {
+  standaloneAlbums?: readonly string[];
+  subpages: ReadonlyArray<{ albumIds: readonly string[]; enabled?: boolean; hidden?: boolean }>;
+}): Set<string> {
+  return new Set([
+    ...(config.standaloneAlbums ?? []),
+    ...config.subpages.filter(isListedSubpage).flatMap((sp) => sp.albumIds),
+  ]);
+}
diff --git a/lib/config/settingValues.ts b/lib/config/settingValues.ts
new file mode 100644
index 0000000..ab7264f
--- /dev/null
+++ b/lib/config/settingValues.ts
@@ -0,0 +1,71 @@
+/**
+ * Values in settings.yaml that the site would silently ignore (QA A-14).
+ *
+ * `validateSettings` (settingsSchema.ts) checks types and structure and
+ * deliberately leaves values to the resolvers, which clamp or fall back so
+ * hand-edited YAML never takes the site down. For the fields the panel offers
+ * an input for, that meant a save of `accent: rot` or nine columns in a 1–6
+ * field was reported as "Saved" while the site showed something else.
+ *
+ * This checks exactly those fields — the site URL, the accent, the grid
+ * columns and gap — with the resolvers' own rules and bounds, so it can never
+ * be stricter than what renders. Kept apart from settingsSchema.ts so the
+ * settings form can run it as you type without bundling zod; the save route
+ * runs it before writing, and the doctor over settings.yaml as it is.
+ */
+
+import { normaliseSiteUrl } from '../siteUrl';
+import { isAccentHex } from './theme';
+import { PHOTO_GRID_COLUMNS_MAX, PHOTO_GRID_COLUMNS_MIN, PHOTO_GRID_GAP_MAX } from './schema';
+import type { SettingsFieldError } from './settingsSchema';
+
+function inRange(value: unknown, min: number, max: number): boolean {
+  return typeof value === 'number' && Number.isInteger(value) && value >= min && value <= max;
+}
+
+/** One error per offending field; an empty string counts as unset, as in the resolvers. */
+export function validateSettingValues(input: unknown): SettingsFieldError[] {
+  if (!input || typeof input !== 'object') return [];
+  const s = input as {
+    url?: unknown;
+    theme?: unknown;
+    grid?: { columns?: unknown; gap?: unknown } | null;
+  };
+  const errors: SettingsFieldError[] = [];
+
+  // resolveSiteUrl: an unusable value falls back to SITE_URL, or to nothing,
+  // and the sitemap, feed and structured data go out without the address.
+  if (typeof s.url === 'string' && s.url.trim() !== '' && !normaliseSiteUrl(s.url)) {
+    errors.push({
+      field: 'url',
+      message: 'Must be a full http(s) address, e.g. https://photos.example.com.',
+    });
+  }
+
+  // resolveTheme: anything but hex falls back to the preset's accent.
+  const accent =
+    s.theme && typeof s.theme === 'object' ? (s.theme as { accent?: unknown }).accent : undefined;
+  if (typeof accent === 'string' && accent.trim() !== '' && !isAccentHex(accent)) {
+    errors.push({ field: 'theme.accent', message: 'Must be a hex colour such as #e60012.' });
+  }
+
+  // getConfig clamps both into these bounds (lib/config/index.ts).
+  const grid = s.grid && typeof s.grid === 'object' ? s.grid : null;
+  if (
+    grid?.columns != null &&
+    !inRange(grid.columns, PHOTO_GRID_COLUMNS_MIN, PHOTO_GRID_COLUMNS_MAX)
+  ) {
+    errors.push({
+      field: 'grid.columns',
+      message: `Must be a whole number from ${PHOTO_GRID_COLUMNS_MIN} to ${PHOTO_GRID_COLUMNS_MAX}.`,
+    });
+  }
+  if (grid?.gap != null && !inRange(grid.gap, 0, PHOTO_GRID_GAP_MAX)) {
+    errors.push({
+      field: 'grid.gap',
+      message: `Must be a whole number from 0 to ${PHOTO_GRID_GAP_MAX}.`,
+    });
+  }
+
+  return errors;
+}
diff --git a/lib/config/settingsSchema.ts b/lib/config/settingsSchema.ts
index ca8fe1a..ccb346e 100644
--- a/lib/config/settingsSchema.ts
+++ b/lib/config/settingsSchema.ts
@@ -29,6 +29,10 @@
  * to the preset's own value for anything that is not the right type, which
  * covers hand-edited YAML as well as a save from this panel.
  *
+ * **Values the panel offers an input for** are the exception, checked with the
+ * resolvers' own rules in `settingValues.ts`: the site URL, the accent and the
+ * grid columns and gap, which a save used to accept and the site then ignored.
+ *
  * **Unknown keys pass through.** There is no `schemaVersion` and no migration
  * code, so configurations older and newer than this build are both in the wild.
  * A key this version has never heard of is not evidence of a mistake, and
@@ -84,7 +88,7 @@ export const settingsSchema = z.looseObject({
   scrollToTop: bool,
   analytics: bool,
 
-  proofing: z.looseObject({ enabled: bool, allowMailto: bool }).optional(),
+  proofing: z.looseObject({ enabled: bool, allowMailto: bool, email: str }).optional(),
 
   // Checked separately in validateSettings — see themeObjectSchema.
   theme: z.unknown().optional(),
diff --git a/lib/config/theme.ts b/lib/config/theme.ts
index f5ea47f..bd0cc6f 100644
--- a/lib/config/theme.ts
+++ b/lib/config/theme.ts
@@ -130,6 +130,11 @@ function resolveRadius(raw: unknown, fallback: number): number {
  */
 const ACCENT_HEX = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
 
+/** Whether `resolveTheme` keeps an accent rather than falling back to the preset's. */
+export function isAccentHex(value: string): boolean {
+  return ACCENT_HEX.test(value.trim());
+}
+
 /** Trim, case-fold and widen to `#rrggbb`; refuse anything that is not hex. */
 function resolveAccent(raw: unknown, fallback: string): string {
   if (typeof raw !== 'string') return fallback;
diff --git a/lib/env.ts b/lib/env.ts
index 57e5e2f..40a3056 100644
--- a/lib/env.ts
+++ b/lib/env.ts
@@ -152,7 +152,8 @@ function parseEnv(): Env {
   return {
     IMMICH_API_URL: apiUrl,
     IMMICH_API_KEY: apiKey as string,
-    SITE_TITLE: process.env.SITE_TITLE || 'Gallery',
+    // No English default here: lib/config falls back to the locale's word.
+    SITE_TITLE: process.env.SITE_TITLE || '',
     SITE_SUBTITLE: process.env.SITE_SUBTITLE || '',
     CACHE_TTL: Math.max(0, cacheTtl),
     STALE_MAX_AGE: Math.max(0, staleMaxAge),
diff --git a/lib/escapeHtml.ts b/lib/escapeHtml.ts
new file mode 100644
index 0000000..80a5fc9
--- /dev/null
+++ b/lib/escapeHtml.ts
@@ -0,0 +1,16 @@
+/**
+ * Escapes special HTML characters for Leaflet's string-based popups and icons.
+ *
+ * Lives outside components/LeafletMap.tsx so a caller can build marker HTML
+ * without importing the map — EssayView loads the map on demand, and a static
+ * import of this helper from there would pull it (and Leaflet's stylesheet)
+ * back into every essay page.
+ */
+export function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
diff --git a/lib/essaySource.ts b/lib/essaySource.ts
index 7923983..c382585 100644
--- a/lib/essaySource.ts
+++ b/lib/essaySource.ts
@@ -18,8 +18,11 @@ export type EssayFileResult =
   | { 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 };
+  /**
+   * The entry has a password this visitor has not entered. No title: the
+   * journal index hides a locked entry by name, so the gate must not show it.
+   */
+  | { status: 'locked' };
 
 export function resolveEssayFile(
   slug: string,
@@ -31,7 +34,7 @@ export function resolveEssayFile(
   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: 'locked' };
   }
   return { status: 'open', parsed };
 }
diff --git a/lib/focusTrap.ts b/lib/focusTrap.ts
new file mode 100644
index 0000000..6f75ed3
--- /dev/null
+++ b/lib/focusTrap.ts
@@ -0,0 +1,55 @@
+/**
+ * Focus helpers for modal UI (lightbox) and the mobile nav panel (#696).
+ * Client-only: every function works on live DOM nodes.
+ */
+
+const FOCUSABLE = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+/** Keyboard-reachable elements inside `container`, in DOM order. */
+export function focusableIn(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
+    (el) =>
+      !el.closest('[hidden], [inert], [aria-hidden="true"]') &&
+      el.tabIndex >= 0 &&
+      // A `display: none` control (the shortcut panel on touch devices) cannot
+      // take focus; wrapping onto it would strand the visitor.
+      (typeof el.checkVisibility !== 'function' || el.checkVisibility()),
+  );
+}
+
+/**
+ * Keeps Tab and Shift+Tab inside `container`: from the last element Tab wraps
+ * to the first, and the other way round. Focus that has escaped (or never
+ * entered) is pulled back in. Returns true when it moved focus itself.
+ */
+export function trapTabKey(container: HTMLElement, e: KeyboardEvent): boolean {
+  if (e.key !== 'Tab') return false;
+  const items = focusableIn(container);
+  if (items.length === 0) {
+    e.preventDefault();
+    return true;
+  }
+  const first = items[0];
+  const last = items[items.length - 1];
+  const active = document.activeElement as HTMLElement | null;
+  const inside = active !== null && container.contains(active);
+
+  if (e.shiftKey && (!inside || active === first)) {
+    e.preventDefault();
+    last.focus();
+    return true;
+  }
+  if (!e.shiftKey && (!inside || active === last)) {
+    e.preventDefault();
+    first.focus();
+    return true;
+  }
+  return false;
+}
diff --git a/lib/i18n/locales/de.ts b/lib/i18n/locales/de.ts
index 6b7afa8..07f8987 100644
--- a/lib/i18n/locales/de.ts
+++ b/lib/i18n/locales/de.ts
@@ -19,6 +19,8 @@ export const de: Dictionary = {
     map: 'Karte',
     journal: 'Journal',
     skipToContent: 'Zum Inhalt springen',
+    mainNavAria: 'Hauptnavigation',
+    heroNavAria: 'Bereiche',
     openMenu: 'Menü öffnen',
     closeMenu: 'Menü schließen',
   },
@@ -44,12 +46,15 @@ export const de: Dictionary = {
     nextEntryAria: (title: string) => `Nächster Beitrag: ${title}`,
     entryNavAria: 'Journal-Navigation',
     loadingGallery: 'Galerie wird geladen',
+    gallery: 'Galerie',
     loadingPhotos: 'Fotos werden geladen',
     downloadAlbum: 'Album herunterladen',
   },
 
   home: {
     enter: 'Eintreten',
+    pauseSlideshow: 'Diashow anhalten',
+    playSlideshow: 'Diashow abspielen',
   },
 
   error: {
@@ -58,8 +63,6 @@ export const de: Dictionary = {
     errorTitle: 'Etwas ist schiefgelaufen',
     errorText:
       'Diese Seite konnte gerade nicht geladen werden. Das ist meist vorübergehend — bitte gleich noch einmal versuchen.',
-    siteErrorText:
-      'Diese Website konnte gerade nicht geladen werden. Das ist meist vorübergehend — bitte gleich noch einmal versuchen.',
     tryAgain: 'Erneut versuchen',
     reference: (digest: string) => `Referenz: ${digest}`,
   },
@@ -71,6 +74,7 @@ export const de: Dictionary = {
     immichUnavailable:
       'Die Fotobibliothek ist gerade nicht erreichbar. Bitte gleich noch einmal versuchen.',
     back: 'Zurück zur Galerie',
+    limitReached: 'Das Download-Limit für diesen Link ist erreicht.',
   },
 
   theme: {
@@ -82,11 +86,18 @@ export const de: Dictionary = {
   password: {
     subtitle: 'Diese Galerie ist passwortgeschützt.',
     siteSubtitle: 'Diese Website ist passwortgeschützt.',
+    pageSubtitle: 'Diese Seite ist passwortgeschützt.',
+    journalSubtitle: 'Dieser Journal-Eintrag ist passwortgeschützt.',
+    protectedPage: 'Geschützte Seite',
     placeholder: 'Passwort eingeben',
     submit: 'Öffnen',
     verifying: 'Wird geprüft…',
     incorrect: 'Falsches Passwort. Bitte erneut versuchen.',
     failed: 'Passwort konnte nicht geprüft werden. Bitte später erneut versuchen.',
+    tooManyAttempts: (seconds: number | null) =>
+      seconds
+        ? `Zu viele Versuche – bitte in ${seconds} ${seconds === 1 ? 'Sekunde' : 'Sekunden'} erneut versuchen.`
+        : 'Zu viele Versuche – bitte später erneut versuchen.',
   },
 
   about: {
@@ -104,6 +115,9 @@ export const de: Dictionary = {
     loading: 'Karte wird geladen…',
     loadFailed: (status: number) => `Kartendaten konnten nicht geladen werden (${status})`,
     initFailed: 'Karte konnte nicht initialisiert werden',
+    zoomIn: 'Vergrößern',
+    zoomOut: 'Verkleinern',
+    leafletTitle: 'Eine JavaScript-Bibliothek für interaktive Karten',
   },
 
   subpage: {
@@ -130,6 +144,7 @@ export const de: Dictionary = {
 
   lightbox: {
     viewer: 'Bildansicht',
+    position: (n: number, total: number) => `Foto ${n} von ${total}`,
     openPhoto: (n: number) => `Foto ${n} ansehen`,
     close: 'Schließen',
     closeTitle: 'Schließen (Esc)',
@@ -164,10 +179,10 @@ export const de: Dictionary = {
     downloadTitle: 'Originaldatei herunterladen (d)',
     downloadShort: 'Original',
     shortcutDownload: 'Original herunterladen',
-    shortcutSlideshow: 'Diaschau',
-    shortcutSlideshowRunning: (seconds: number) => `Diaschau — alle ${seconds}s`,
-    slideshowStopped: 'Diaschau angehalten',
-    slideshowRunning: (seconds: number) => `Diaschau läuft, wechselt alle ${seconds} Sekunden`,
+    shortcutSlideshow: 'Diashow',
+    shortcutSlideshowRunning: (seconds: number) => `Diashow — alle ${seconds}s`,
+    slideshowStopped: 'Diashow angehalten',
+    slideshowRunning: (seconds: number) => `Diashow läuft, wechselt alle ${seconds} Sekunden`,
     shortcutCopyLink: 'Link zum Foto kopieren',
     shortcutList: 'Diese Liste',
     shortcutClose: 'Ansicht schließen',
@@ -181,6 +196,7 @@ export const de: Dictionary = {
     saved: 'Gemerkt',
     favorite: 'Merken',
     showAll: 'Alle anzeigen',
+    filterEmpty: 'Keine Fotos ausgewählt.',
     selected: (n: number) => `❤️ ${n} ausgewählt`,
     shareExport: 'Teilen & Export',
     modalTitle: (n: number) => `❤️ Auswahl (${n})`,
@@ -200,11 +216,36 @@ export const de: Dictionary = {
     listEmpty: (albumName: string) => `${albumName}: Keine Fotos ausgewählt.`,
     listSummary: (albumName: string, count: number, indices: string) =>
       `${albumName} — Ausgewählte Fotos (${count}): ${indices}`,
-    mailSubject: (n: number) => `Fotoauswahl (${n} Fotos)`,
+    mailSubject: (n: number) => `Fotoauswahl (${plural(n, 'Foto', 'Fotos')})`,
     mailBody: (list: string, url: string) =>
       `Hallo,\n\nhier ist meine Fotoauswahl:\n\n${list}\n\nLink zur Auswahl: ${url}\n\nViele Grüße,`,
   },
 
+  proofSession: {
+    greeting: (name: string) => `Auswahl für ${name}`,
+    intro:
+      'Markiere die gewünschten Fotos mit dem Herz. Deine Auswahl wird laufend gespeichert — du kannst mit diesem Link jederzeit zurückkommen.',
+    saving: 'Wird gespeichert…',
+    saved: 'Auswahl gespeichert',
+    saveFailed:
+      'Deine Auswahl konnte nicht gespeichert werden. Prüfe die Verbindung und versuche es erneut.',
+    review: 'Prüfen & absenden',
+    modalTitle: (n: number) => `Deine Auswahl (${n})`,
+    empty: 'Noch keine Fotos ausgewählt.',
+    submit: 'Auswahl absenden',
+    submitting: 'Wird gesendet…',
+    confirmSubmit: (n: number) =>
+      `${plural(n, 'Foto', 'Fotos')} absenden? Danach lässt sich die Auswahl nicht mehr ändern.`,
+    submitted: 'Danke — deine Auswahl wurde abgeschickt.',
+    locked: 'Diese Auswahl wurde abgeschickt und kann nicht mehr geändert werden.',
+    validUntil: (date: string) => `Dieser Link ist gültig bis ${date}.`,
+    expiredTitle: 'Dieser Link ist abgelaufen',
+    expiredText: 'Bitte frag deinen Fotografen nach einem neuen Link.',
+    downloadSelection: 'Auswahl herunterladen (.zip)',
+    downloadAll: 'Alle Fotos herunterladen (.zip)',
+    downloadsLeft: (n: number) => `Noch ${plural(n, 'Download', 'Downloads')}`,
+  },
+
   legal: {
     navLabel: 'Impressum',
     title: 'Impressum',
diff --git a/lib/i18n/locales/en.ts b/lib/i18n/locales/en.ts
index 4dcacdb..d51f9c5 100644
--- a/lib/i18n/locales/en.ts
+++ b/lib/i18n/locales/en.ts
@@ -19,6 +19,8 @@ export const en = {
     map: 'Map',
     journal: 'Journal',
     skipToContent: 'Skip to content',
+    mainNavAria: 'Main',
+    heroNavAria: 'Sections',
     openMenu: 'Open menu',
     closeMenu: 'Close menu',
   },
@@ -45,12 +47,15 @@ export const en = {
     nextEntryAria: (title: string) => `Next entry: ${title}`,
     entryNavAria: 'Journal entry navigation',
     loadingGallery: 'Loading gallery',
+    gallery: 'Gallery',
     loadingPhotos: 'Loading photos',
     downloadAlbum: 'Download album',
   },
 
   home: {
     enter: 'Enter',
+    pauseSlideshow: 'Pause slideshow',
+    playSlideshow: 'Play slideshow',
   },
 
   error: {
@@ -59,8 +64,6 @@ export const en = {
     errorTitle: 'Something went wrong',
     errorText:
       'This page could not be loaded right now. It is usually temporary — try again in a moment.',
-    siteErrorText:
-      'This site could not be loaded right now. It is usually temporary — try again in a moment.',
     tryAgain: 'Try again',
     reference: (digest: string) => `Reference: ${digest}`,
   },
@@ -72,6 +75,7 @@ export const en = {
     rateLimited: 'Too many download requests. Please wait a moment and try again.',
     immichUnavailable: 'The photo library is unavailable right now. Please try again shortly.',
     back: 'Back to the gallery',
+    limitReached: 'The download limit for this link has been reached.',
   },
 
   theme: {
@@ -83,11 +87,18 @@ export const en = {
   password: {
     subtitle: 'This gallery is password-protected.',
     siteSubtitle: 'This site is password-protected.',
+    pageSubtitle: 'This page is password-protected.',
+    journalSubtitle: 'This journal entry is password-protected.',
+    protectedPage: 'Protected page',
     placeholder: 'Enter password',
     submit: 'Enter',
     verifying: 'Verifying…',
     incorrect: 'Incorrect password. Please try again.',
     failed: 'Unable to verify password. Please try again later.',
+    tooManyAttempts: (seconds: number | null) =>
+      seconds
+        ? `Too many attempts. Please try again in ${seconds} ${seconds === 1 ? 'second' : 'seconds'}.`
+        : 'Too many attempts. Please try again later.',
   },
 
   about: {
@@ -105,6 +116,10 @@ export const en = {
     loading: 'Loading map…',
     loadFailed: (status: number) => `Failed to load map data (${status})`,
     initFailed: 'Failed to initialize map',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    // The title on the Leaflet credit in the map's corner.
+    leafletTitle: 'A JavaScript library for interactive maps',
   },
 
   subpage: {
@@ -131,6 +146,7 @@ export const en = {
 
   lightbox: {
     viewer: 'Image viewer',
+    position: (n: number, total: number) => `Photo ${n} of ${total}`,
     /** A grid tile, which opens the viewer on that photo. */
     openPhoto: (n: number) => `View photo ${n}`,
     close: 'Close',
@@ -183,6 +199,8 @@ export const en = {
     saved: 'Saved',
     favorite: 'Favorite',
     showAll: 'Show All',
+    /** Shown in place of the grid when the filter is on and nothing is selected. */
+    filterEmpty: 'No photos selected.',
     selected: (n: number) => `❤️ ${n} Selected`,
     shareExport: 'Share & Export',
     modalTitle: (n: number) => `❤️ Selection (${n})`,
@@ -203,11 +221,36 @@ export const en = {
     listEmpty: (albumName: string) => `${albumName}: No photos selected.`,
     listSummary: (albumName: string, count: number, indices: string) =>
       `${albumName} — Selected Photos (${count}): ${indices}`,
-    mailSubject: (n: number) => `Photo Selection (${n} items)`,
+    mailSubject: (n: number) => `Photo Selection (${plural(n, 'item', 'items')})`,
     mailBody: (list: string, url: string) =>
       `Hello,\n\nHere is my photo selection:\n\n${list}\n\nShare Link: ${url}\n\nBest regards,`,
   },
 
+  /** Client proofing links (/proof/<token>). */
+  proofSession: {
+    greeting: (name: string) => `Selection for ${name}`,
+    intro:
+      'Tap the heart on the photos you want. Your selection is saved as you go — you can come back with this link at any time.',
+    saving: 'Saving…',
+    saved: 'Selection saved',
+    saveFailed: 'Your selection could not be saved. Check your connection and try again.',
+    review: 'Review & submit',
+    modalTitle: (n: number) => `Your selection (${n})`,
+    empty: 'No photos selected yet.',
+    submit: 'Submit selection',
+    submitting: 'Submitting…',
+    confirmSubmit: (n: number) =>
+      `Submit ${plural(n, 'photo', 'photos')}? The selection cannot be changed afterwards.`,
+    submitted: 'Thank you — your selection has been submitted.',
+    locked: 'This selection has been submitted and can no longer be changed.',
+    validUntil: (date: string) => `This link is valid until ${date}.`,
+    expiredTitle: 'This link has expired',
+    expiredText: 'Please ask your photographer for a new link.',
+    downloadSelection: 'Download selection (.zip)',
+    downloadAll: 'Download all photos (.zip)',
+    downloadsLeft: (n: number) => `${plural(n, 'download', 'downloads')} left`,
+  },
+
   legal: {
     navLabel: 'Legal Notice',
     title: 'Legal Notice',
diff --git a/lib/i18n/locales/es.ts b/lib/i18n/locales/es.ts
index b46c38d..a919ef9 100644
--- a/lib/i18n/locales/es.ts
+++ b/lib/i18n/locales/es.ts
@@ -19,6 +19,8 @@ export const es: Dictionary = {
     map: 'Mapa',
     journal: 'Diario',
     skipToContent: 'Saltar al contenido',
+    mainNavAria: 'Navegación principal',
+    heroNavAria: 'Secciones',
     openMenu: 'Abrir menú',
     closeMenu: 'Cerrar menú',
   },
@@ -44,12 +46,15 @@ export const es: Dictionary = {
     nextEntryAria: (title: string) => `Entrada siguiente: ${title}`,
     entryNavAria: 'Navegación entre entradas del diario',
     loadingGallery: 'Cargando la galería',
+    gallery: 'Galería',
     loadingPhotos: 'Cargando fotos',
     downloadAlbum: 'Descargar álbum',
   },
 
   home: {
     enter: 'Entrar',
+    pauseSlideshow: 'Pausar la presentación',
+    playSlideshow: 'Reproducir la presentación',
   },
 
   error: {
@@ -58,8 +63,6 @@ export const es: Dictionary = {
     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}`,
   },
@@ -71,6 +74,7 @@ export const es: Dictionary = {
     immichUnavailable:
       'La fototeca no está disponible en este momento. Vuelve a intentarlo en breve.',
     back: 'Volver a la galería',
+    limitReached: 'Se ha alcanzado el límite de descargas de este enlace.',
   },
 
   theme: {
@@ -82,11 +86,18 @@ export const es: Dictionary = {
   password: {
     subtitle: 'Esta galería está protegida con contraseña.',
     siteSubtitle: 'Este sitio está protegido con contraseña.',
+    pageSubtitle: 'Esta página está protegida con contraseña.',
+    journalSubtitle: 'Esta entrada del diario está protegida con contraseña.',
+    protectedPage: 'Página protegida',
     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.',
+    tooManyAttempts: (seconds: number | null) =>
+      seconds
+        ? `Demasiados intentos. Inténtalo de nuevo en ${seconds} ${seconds === 1 ? 'segundo' : 'segundos'}.`
+        : 'Demasiados intentos. Inténtalo más tarde.',
   },
 
   about: {
@@ -104,6 +115,9 @@ export const es: Dictionary = {
     loading: 'Cargando el mapa…',
     loadFailed: (status: number) => `No se pudieron cargar los datos del mapa (${status})`,
     initFailed: 'No se pudo inicializar el mapa',
+    zoomIn: 'Acercar',
+    zoomOut: 'Alejar',
+    leafletTitle: 'Una biblioteca de JavaScript para mapas interactivos',
   },
 
   subpage: {
@@ -130,6 +144,7 @@ export const es: Dictionary = {
 
   lightbox: {
     viewer: 'Visor de imágenes',
+    position: (n: number, total: number) => `Foto ${n} de ${total}`,
     openPhoto: (n: number) => `Ver foto ${n}`,
     close: 'Cerrar',
     closeTitle: 'Cerrar (Esc)',
@@ -181,6 +196,7 @@ export const es: Dictionary = {
     saved: 'Guardado',
     favorite: 'Favorito',
     showAll: 'Mostrar todo',
+    filterEmpty: 'No hay fotos seleccionadas.',
     selected: (n: number) => `❤️ ${n} ${n === 1 ? 'seleccionada' : 'seleccionadas'}`,
     shareExport: 'Compartir y exportar',
     modalTitle: (n: number) => `❤️ Selección (${n})`,
@@ -205,6 +221,30 @@ export const es: Dictionary = {
       `Hola:\n\nEsta es mi selección de fotos:\n\n${list}\n\nEnlace: ${url}\n\nUn saludo,`,
   },
 
+  proofSession: {
+    greeting: (name: string) => `Selección para ${name}`,
+    intro:
+      'Toca el corazón en las fotos que quieras. Tu selección se guarda sobre la marcha: puedes volver con este enlace cuando quieras.',
+    saving: 'Guardando…',
+    saved: 'Selección guardada',
+    saveFailed: 'No se ha podido guardar tu selección. Revisa la conexión e inténtalo de nuevo.',
+    review: 'Revisar y enviar',
+    modalTitle: (n: number) => `Tu selección (${n})`,
+    empty: 'Todavía no has seleccionado ninguna foto.',
+    submit: 'Enviar selección',
+    submitting: 'Enviando…',
+    confirmSubmit: (n: number) =>
+      `¿Enviar ${plural(n, 'foto', 'fotos')}? Después no podrás cambiar la selección.`,
+    submitted: 'Gracias: tu selección se ha enviado.',
+    locked: 'Esta selección ya se ha enviado y no se puede modificar.',
+    validUntil: (date: string) => `Este enlace es válido hasta el ${date}.`,
+    expiredTitle: 'Este enlace ha caducado',
+    expiredText: 'Pide un enlace nuevo a tu fotógrafo.',
+    downloadSelection: 'Descargar selección (.zip)',
+    downloadAll: 'Descargar todas las fotos (.zip)',
+    downloadsLeft: (n: number) => `${plural(n, 'descarga restante', 'descargas restantes')}`,
+  },
+
   legal: {
     navLabel: 'Aviso legal',
     title: 'Aviso legal',
diff --git a/lib/i18n/locales/fr.ts b/lib/i18n/locales/fr.ts
index 6277343..abf5fc1 100644
--- a/lib/i18n/locales/fr.ts
+++ b/lib/i18n/locales/fr.ts
@@ -8,7 +8,9 @@
 
 import type { Dictionary } from '../index';
 
-const plural = (n: number, one: string, other: string) => `${n} ${n === 1 ? one : other}`;
+// CLDR: French puts 0 in the singular ("0 photo", "0 jour"), unlike English.
+const isOne = (n: number) => n === 0 || n === 1;
+const plural = (n: number, one: string, other: string) => `${n} ${isOne(n) ? one : other}`;
 
 export const fr: Dictionary = {
   dateLocale: 'fr-FR',
@@ -19,6 +21,8 @@ export const fr: Dictionary = {
     map: 'Carte',
     journal: 'Journal',
     skipToContent: 'Aller au contenu',
+    mainNavAria: 'Navigation principale',
+    heroNavAria: 'Rubriques',
     openMenu: 'Ouvrir le menu',
     closeMenu: 'Fermer le menu',
   },
@@ -44,12 +48,15 @@ export const fr: Dictionary = {
     nextEntryAria: (title: string) => `Article suivant : ${title}`,
     entryNavAria: 'Navigation entre les articles du journal',
     loadingGallery: 'Chargement de la galerie',
+    gallery: 'Galerie',
     loadingPhotos: 'Chargement des photos',
     downloadAlbum: 'Télécharger l’album',
   },
 
   home: {
     enter: 'Entrer',
+    pauseSlideshow: 'Mettre le diaporama en pause',
+    playSlideshow: 'Lancer le diaporama',
   },
 
   error: {
@@ -58,8 +65,6 @@ export const fr: Dictionary = {
     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}`,
   },
@@ -71,6 +76,7 @@ export const fr: Dictionary = {
     immichUnavailable:
       'La photothèque est momentanément indisponible. Veuillez réessayer dans un instant.',
     back: 'Retour à la galerie',
+    limitReached: 'La limite de téléchargements de ce lien est atteinte.',
   },
 
   theme: {
@@ -82,11 +88,18 @@ export const fr: Dictionary = {
   password: {
     subtitle: 'Cette galerie est protégée par un mot de passe.',
     siteSubtitle: 'Ce site est protégé par un mot de passe.',
+    pageSubtitle: 'Cette page est protégée par un mot de passe.',
+    journalSubtitle: 'Cet article du journal est protégé par un mot de passe.',
+    protectedPage: 'Page protégée',
     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.',
+    tooManyAttempts: (seconds: number | null) =>
+      seconds
+        ? `Trop de tentatives. Veuillez réessayer dans ${seconds} ${seconds === 1 ? 'seconde' : 'secondes'}.`
+        : 'Trop de tentatives. Veuillez réessayer plus tard.',
   },
 
   about: {
@@ -104,6 +117,9 @@ export const fr: Dictionary = {
     loading: 'Chargement de la carte…',
     loadFailed: (status: number) => `Échec du chargement des données de la carte (${status})`,
     initFailed: 'Impossible d’initialiser la carte',
+    zoomIn: 'Zoom avant',
+    zoomOut: 'Zoom arrière',
+    leafletTitle: 'Une bibliothèque JavaScript pour cartes interactives',
   },
 
   subpage: {
@@ -130,6 +146,7 @@ export const fr: Dictionary = {
 
   lightbox: {
     viewer: 'Visionneuse d’images',
+    position: (n: number, total: number) => `Photo ${n} sur ${total}`,
     openPhoto: (n: number) => `Afficher la photo ${n}`,
     close: 'Fermer',
     closeTitle: 'Fermer (Échap)',
@@ -182,7 +199,8 @@ export const fr: Dictionary = {
     saved: 'Enregistré',
     favorite: 'Favori',
     showAll: 'Tout afficher',
-    selected: (n: number) => `❤️ ${n} ${n === 1 ? 'sélectionnée' : 'sélectionnées'}`,
+    filterEmpty: 'Aucune photo sélectionnée.',
+    selected: (n: number) => `❤️ ${n} ${isOne(n) ? 'sélectionnée' : 'sélectionnées'}`,
     shareExport: 'Partager & exporter',
     modalTitle: (n: number) => `❤️ Sélection (${n})`,
     closeModal: 'Fermer la fenêtre',
@@ -206,6 +224,32 @@ export const fr: Dictionary = {
       `Bonjour,\n\nVoici ma sélection de photos :\n\n${list}\n\nLien de partage : ${url}\n\nCordialement,`,
   },
 
+  proofSession: {
+    greeting: (name: string) => `Sélection pour ${name}`,
+    intro:
+      'Touchez le cœur sur les photos que vous souhaitez. Votre sélection est enregistrée au fur et à mesure — vous pouvez revenir avec ce lien à tout moment.',
+    saving: 'Enregistrement…',
+    saved: 'Sélection enregistrée',
+    saveFailed:
+      'Votre sélection n’a pas pu être enregistrée. Vérifiez votre connexion et réessayez.',
+    review: 'Vérifier & envoyer',
+    modalTitle: (n: number) => `Votre sélection (${n})`,
+    empty: 'Aucune photo sélectionnée pour le moment.',
+    submit: 'Envoyer la sélection',
+    submitting: 'Envoi…',
+    confirmSubmit: (n: number) =>
+      `Envoyer ${plural(n, 'photo', 'photos')} ? La sélection ne pourra plus être modifiée ensuite.`,
+    submitted: 'Merci — votre sélection a été envoyée.',
+    locked: 'Cette sélection a été envoyée et ne peut plus être modifiée.',
+    validUntil: (date: string) => `Ce lien est valable jusqu’au ${date}.`,
+    expiredTitle: 'Ce lien a expiré',
+    expiredText: 'Demandez un nouveau lien à votre photographe.',
+    downloadSelection: 'Télécharger la sélection (.zip)',
+    downloadAll: 'Télécharger toutes les photos (.zip)',
+    downloadsLeft: (n: number) =>
+      `${plural(n, 'téléchargement restant', 'téléchargements restants')}`,
+  },
+
   legal: {
     navLabel: 'Mentions légales',
     title: 'Mentions légales',
@@ -236,7 +280,7 @@ export const fr: Dictionary = {
     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'}.`,
+      `Votre message est conservé sur le serveur de ce site, sert uniquement à vous répondre et est supprimé après ${days} ${isOne(days) ? 'jour' : 'jours'}.`,
   },
 
   privacy: {
diff --git a/lib/i18n/locales/it.ts b/lib/i18n/locales/it.ts
index 0b232f2..a47bf8b 100644
--- a/lib/i18n/locales/it.ts
+++ b/lib/i18n/locales/it.ts
@@ -19,6 +19,8 @@ export const it: Dictionary = {
     map: 'Mappa',
     journal: 'Diario',
     skipToContent: 'Vai al contenuto',
+    mainNavAria: 'Navigazione principale',
+    heroNavAria: 'Sezioni',
     openMenu: 'Apri menu',
     closeMenu: 'Chiudi menu',
   },
@@ -45,12 +47,15 @@ export const it: Dictionary = {
     nextEntryAria: (title: string) => `Articolo successivo: ${title}`,
     entryNavAria: 'Navigazione tra gli articoli del diario',
     loadingGallery: 'Caricamento della galleria',
+    gallery: 'Galleria',
     loadingPhotos: 'Caricamento delle foto',
     downloadAlbum: 'Scarica album',
   },
 
   home: {
     enter: 'Entra',
+    pauseSlideshow: 'Metti in pausa la presentazione',
+    playSlideshow: 'Avvia la presentazione',
   },
 
   error: {
@@ -59,8 +64,6 @@ export const it: Dictionary = {
     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}`,
   },
@@ -71,6 +74,7 @@ export const it: Dictionary = {
     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',
+    limitReached: 'È stato raggiunto il limite di download per questo link.',
   },
 
   theme: {
@@ -82,11 +86,18 @@ export const it: Dictionary = {
   password: {
     subtitle: 'Questa galleria è protetta da password.',
     siteSubtitle: 'Questo sito è protetto da password.',
+    pageSubtitle: 'Questa pagina è protetta da password.',
+    journalSubtitle: 'Questo articolo del diario è protetto da password.',
+    protectedPage: 'Pagina protetta',
     placeholder: 'Inserisci la password',
     submit: 'Entra',
     verifying: 'Verifica in corso…',
     incorrect: 'Password errata. Riprova.',
     failed: 'Impossibile verificare la password. Riprova più tardi.',
+    tooManyAttempts: (seconds: number | null) =>
+      seconds
+        ? `Troppi tentativi. Riprova tra ${seconds} ${seconds === 1 ? 'secondo' : 'secondi'}.`
+        : 'Troppi tentativi. Riprova più tardi.',
   },
 
   about: {
@@ -104,6 +115,9 @@ export const it: Dictionary = {
     loading: 'Caricamento della mappa…',
     loadFailed: (status: number) => `Impossibile caricare i dati della mappa (${status})`,
     initFailed: 'Impossibile inizializzare la mappa',
+    zoomIn: 'Ingrandisci',
+    zoomOut: 'Riduci',
+    leafletTitle: 'Una libreria JavaScript per mappe interattive',
   },
 
   subpage: {
@@ -130,6 +144,7 @@ export const it: Dictionary = {
 
   lightbox: {
     viewer: 'Visualizzatore di immagini',
+    position: (n: number, total: number) => `Foto ${n} di ${total}`,
     openPhoto: (n: number) => `Apri la foto ${n}`,
     close: 'Chiudi',
     closeTitle: 'Chiudi (Esc)',
@@ -181,6 +196,7 @@ export const it: Dictionary = {
     saved: 'Salvato',
     favorite: 'Preferito',
     showAll: 'Mostra tutto',
+    filterEmpty: 'Nessuna foto selezionata.',
     selected: (n: number) => `❤️ ${n} ${n === 1 ? 'selezionata' : 'selezionate'}`,
     shareExport: 'Condividi ed esporta',
     modalTitle: (n: number) => `❤️ Selezione (${n})`,
@@ -205,6 +221,30 @@ export const it: Dictionary = {
       `Ciao,\n\necco la mia selezione di foto:\n\n${list}\n\nLink di condivisione: ${url}\n\nCordiali saluti,`,
   },
 
+  proofSession: {
+    greeting: (name: string) => `Selezione per ${name}`,
+    intro:
+      'Tocca il cuore sulle foto che desideri. La tua selezione viene salvata man mano: puoi tornare con questo link in qualsiasi momento.',
+    saving: 'Salvataggio…',
+    saved: 'Selezione salvata',
+    saveFailed: 'Non è stato possibile salvare la selezione. Controlla la connessione e riprova.',
+    review: 'Controlla e invia',
+    modalTitle: (n: number) => `La tua selezione (${n})`,
+    empty: 'Nessuna foto selezionata.',
+    submit: 'Invia selezione',
+    submitting: 'Invio in corso…',
+    confirmSubmit: (n: number) =>
+      `Inviare ${n} foto? Dopo non sarà più possibile modificare la selezione.`,
+    submitted: 'Grazie, la tua selezione è stata inviata.',
+    locked: 'Questa selezione è stata inviata e non può più essere modificata.',
+    validUntil: (date: string) => `Questo link è valido fino al ${date}.`,
+    expiredTitle: 'Questo link è scaduto',
+    expiredText: 'Chiedi un nuovo link al tuo fotografo.',
+    downloadSelection: 'Scarica selezione (.zip)',
+    downloadAll: 'Scarica tutte le foto (.zip)',
+    downloadsLeft: (n: number) => `${plural(n, 'download rimasto', 'download rimasti')}`,
+  },
+
   legal: {
     navLabel: 'Note legali',
     title: 'Note legali',
diff --git a/lib/i18n/locales/nl.ts b/lib/i18n/locales/nl.ts
index 38beb88..3177714 100644
--- a/lib/i18n/locales/nl.ts
+++ b/lib/i18n/locales/nl.ts
@@ -19,6 +19,8 @@ export const nl: Dictionary = {
     map: 'Kaart',
     journal: 'Journal',
     skipToContent: 'Naar de inhoud',
+    mainNavAria: 'Hoofdnavigatie',
+    heroNavAria: 'Onderdelen',
     openMenu: 'Menu openen',
     closeMenu: 'Menu sluiten',
   },
@@ -44,12 +46,15 @@ export const nl: Dictionary = {
     nextEntryAria: (title: string) => `Volgend verhaal: ${title}`,
     entryNavAria: 'Navigatie tussen journalverhalen',
     loadingGallery: 'Galerij laden',
+    gallery: 'Galerie',
     loadingPhotos: 'Foto’s laden',
     downloadAlbum: 'Album downloaden',
   },
 
   home: {
     enter: 'Binnenkomen',
+    pauseSlideshow: 'Diavoorstelling pauzeren',
+    playSlideshow: 'Diavoorstelling afspelen',
   },
 
   error: {
@@ -58,8 +63,6 @@ export const nl: Dictionary = {
     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}`,
   },
@@ -71,6 +74,7 @@ export const nl: Dictionary = {
     immichUnavailable:
       'De fotobibliotheek is op dit moment niet bereikbaar. Probeer het zo opnieuw.',
     back: 'Terug naar de galerij',
+    limitReached: 'Het downloadlimiet voor deze link is bereikt.',
   },
 
   theme: {
@@ -82,11 +86,18 @@ export const nl: Dictionary = {
   password: {
     subtitle: 'Deze galerij is met een wachtwoord beveiligd.',
     siteSubtitle: 'Deze site is met een wachtwoord beveiligd.',
+    pageSubtitle: 'Deze pagina is met een wachtwoord beveiligd.',
+    journalSubtitle: 'Dit journalverhaal is met een wachtwoord beveiligd.',
+    protectedPage: 'Beveiligde pagina',
     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.',
+    tooManyAttempts: (seconds: number | null) =>
+      seconds
+        ? `Te veel pogingen. Probeer het over ${seconds} ${seconds === 1 ? 'seconde' : 'seconden'} opnieuw.`
+        : 'Te veel pogingen. Probeer het later opnieuw.',
   },
 
   about: {
@@ -104,6 +115,9 @@ export const nl: Dictionary = {
     loading: 'Kaart laden…',
     loadFailed: (status: number) => `Kaartgegevens konden niet worden geladen (${status})`,
     initFailed: 'De kaart kon niet worden gestart',
+    zoomIn: 'Inzoomen',
+    zoomOut: 'Uitzoomen',
+    leafletTitle: 'Een JavaScript-bibliotheek voor interactieve kaarten',
   },
 
   subpage: {
@@ -130,6 +144,7 @@ export const nl: Dictionary = {
 
   lightbox: {
     viewer: 'Fotoviewer',
+    position: (n: number, total: number) => `Foto ${n} van ${total}`,
     openPhoto: (n: number) => `Foto ${n} bekijken`,
     close: 'Sluiten',
     closeTitle: 'Sluiten (Esc)',
@@ -182,6 +197,7 @@ export const nl: Dictionary = {
     saved: 'Opgeslagen',
     favorite: 'Favoriet',
     showAll: 'Alles tonen',
+    filterEmpty: "Geen foto's geselecteerd.",
     selected: (n: number) => `❤️ ${n} geselecteerd`,
     shareExport: 'Delen & exporteren',
     modalTitle: (n: number) => `❤️ Selectie (${n})`,
@@ -206,6 +222,31 @@ export const nl: Dictionary = {
       `Hallo,\n\nHier is mijn fotoselectie:\n\n${list}\n\nDeellink: ${url}\n\nMet vriendelijke groet,`,
   },
 
+  proofSession: {
+    greeting: (name: string) => `Selectie voor ${name}`,
+    intro:
+      'Tik op het hartje bij de foto’s die je wilt. Je selectie wordt meteen opgeslagen — je kunt met deze link altijd terugkomen.',
+    saving: 'Opslaan…',
+    saved: 'Selectie opgeslagen',
+    saveFailed:
+      'Je selectie kon niet worden opgeslagen. Controleer je verbinding en probeer het opnieuw.',
+    review: 'Bekijken & versturen',
+    modalTitle: (n: number) => `Jouw selectie (${n})`,
+    empty: 'Nog geen foto’s geselecteerd.',
+    submit: 'Selectie versturen',
+    submitting: 'Versturen…',
+    confirmSubmit: (n: number) =>
+      `${plural(n, 'foto', 'foto’s')} versturen? Daarna kun je de selectie niet meer wijzigen.`,
+    submitted: 'Bedankt — je selectie is verstuurd.',
+    locked: 'Deze selectie is verstuurd en kan niet meer worden gewijzigd.',
+    validUntil: (date: string) => `Deze link is geldig tot ${date}.`,
+    expiredTitle: 'Deze link is verlopen',
+    expiredText: 'Vraag je fotograaf om een nieuwe link.',
+    downloadSelection: 'Selectie downloaden (.zip)',
+    downloadAll: 'Alle foto’s downloaden (.zip)',
+    downloadsLeft: (n: number) => `Nog ${plural(n, 'download', 'downloads')}`,
+  },
+
   legal: {
     navLabel: 'Colofon',
     title: 'Colofon',
diff --git a/lib/imageSize.ts b/lib/imageSize.ts
index 9a35c37..c9c6a00 100644
--- a/lib/imageSize.ts
+++ b/lib/imageSize.ts
@@ -62,3 +62,32 @@ export function resolveImageSize(sizeParam: string | null, widthParam: string |
     explicit && fromWidth ? smaller(explicit, fromWidth) : (explicit ?? fromWidth ?? 'preview');
   return smaller(resolved, MAX_SIZE);
 }
+
+/**
+ * The `?w=` written for each tier: the widest value that still resolves to it.
+ * `resolveImageSize(size, String(TIER_WIDTH[t]))` is `t` for every tier the
+ * ceiling allows, so the canonical URL fetches exactly the rendition the
+ * original width did.
+ */
+const TIER_WIDTH: Record<ImageSize, number> = { thumbnail: 250, preview: 1440, original: 3840 };
+
+/**
+ * One URL per asset and tier, whatever width is asked for.
+ *
+ * The proxy answers every width inside a tier with the same bytes — Immich
+ * has one thumbnail and one preview per asset, and `MAX_SIZE` caps the rest —
+ * but each distinct `?w=` is a separate `immutable` cache entry. next/image
+ * writes eight or more widths into every srcset and the lightbox asked for the
+ * bare URL, so a grid tile and the same photo in the lightbox, or one tile
+ * before and after a rotation, downloaded the identical preview twice.
+ * Collapsing the width to its tier makes all of them one cache entry. `q` is
+ * dropped for the same reason: the proxy never read it.
+ *
+ * `width` defaults to "as large as the ceiling allows" — the lightbox's case.
+ */
+export function canonicalImageUrl(src: string, width: number = Number.MAX_SAFE_INTEGER): string {
+  const queryAt = src.indexOf('?');
+  const sizeParam = queryAt === -1 ? null : new URLSearchParams(src.slice(queryAt + 1)).get('size');
+  const tier = resolveImageSize(sizeParam, String(Math.max(1, Math.round(width))));
+  return `${src}${queryAt === -1 ? '?' : '&'}w=${TIER_WIDTH[tier]}`;
+}
diff --git a/lib/immich.ts b/lib/immich.ts
index 1266511..ab1ae5f 100644
--- a/lib/immich.ts
+++ b/lib/immich.ts
@@ -11,7 +11,7 @@
  * cached answer may still be served in ./immichCache (#610).
  */
 
-import { getConfig, albumSlug, normalizeSlug, type SubpageConfig } from './config';
+import { getConfig, albumSlug, normalizeSlug, type AppConfig, type SubpageConfig } from './config';
 import { cache } from './cache';
 import { compareByCaptureTime, sortAlbumAssets, DEFAULT_ALBUM_SORT } from './albumSort';
 import { ImmichUnavailableError, isTimeout, requestJson } from './immichTransport';
@@ -88,6 +88,8 @@ export type ImageSize = 'thumbnail' | 'preview' | 'original';
 /** Enriched subpage with album metadata (for rendering cards). */
 export interface SubpageSummary {
   name: string;
+  /** The display title from gallery.yaml; visitors see this, `name` only as fallback. */
+  title?: string;
   slug: string;
   albumCount: number;
   totalAssetCount: number;
@@ -96,6 +98,16 @@ export interface SubpageSummary {
 
 // Note: Album summary logging state is kept in the client instance.
 
+/** Immich's album list as cached, with the allowlist it was fetched for. */
+interface CachedAlbumList {
+  albums: ImmichAlbum[];
+  fetchedFor: string;
+}
+
+function allowlistKey(config: AppConfig): string {
+  return [...config.albums].sort().join(',');
+}
+
 // ── API Client ─────────────────────────────────────────────────
 
 class ImmichClient {
@@ -105,6 +117,11 @@ class ImmichClient {
   private pendingAlbumPromises = new Map<string, Promise<ImmichAlbum | null>>();
   private pendingAssetPromises = new Map<string, Promise<ImmichAsset | null>>();
 
+  /**
+   * getConfig() re-checks the content files and hands back a fresh copy on
+   * every call, so a method reads it once into a local and uses that, rather
+   * than going through this getter for each property.
+   */
   private get config() {
     return getConfig();
   }
@@ -118,8 +135,8 @@ class ImmichClient {
    * made every call return null before the fetch, so `ping()` reported the
    * server as disconnected without a single line in the log (#507).
    */
-  private get hasCredentials(): boolean {
-    const { apiUrl, apiKey } = this.config.immich;
+  private hasCredentials(config: AppConfig): boolean {
+    const { apiUrl, apiKey } = config.immich;
     return !!apiUrl && !!apiKey;
   }
 
@@ -134,8 +151,8 @@ class ImmichClient {
   }
 
   /** Cache write that carries the configured stale window. */
-  private cacheSet<T>(key: string, data: T): void {
-    cacheSetWithStale(key, data, this.config.cacheTtl, this.config.staleMaxAge);
+  private cacheSet<T>(key: string, data: T, config: AppConfig = this.config): void {
+    cacheSetWithStale(key, data, config.cacheTtl, config.staleMaxAge);
   }
 
   /** See ./immichCache — the policy lives there, testable on its own. */
@@ -156,15 +173,16 @@ class ImmichClient {
    * deployment rather than about HTTP.
    */
   private async request<T>(endpoint: string, body?: unknown): Promise<T | null> {
-    if (!this.hasCredentials) {
+    const config = this.config;
+    if (!this.hasCredentials(config)) {
       this.warnNoCredentials(endpoint);
       return null;
     }
 
     return requestJson<T>({
-      apiUrl: this.config.immich.apiUrl,
-      apiKey: this.config.immich.apiKey,
-      timeoutMs: this.config.immichTimeoutMs,
+      apiUrl: config.immich.apiUrl,
+      apiKey: config.immich.apiKey,
+      timeoutMs: config.immichTimeoutMs,
       endpoint,
       body,
     });
@@ -184,21 +202,22 @@ class ImmichClient {
     contentRange: string | null;
     status: 200 | 206;
   } | null> {
-    if (!this.hasCredentials) return null;
+    const config = this.config;
+    if (!this.hasCredentials(config)) return null;
 
     const endpoint = `/assets/${encodeURIComponent(assetId)}/video/playback`;
-    const url = `${this.config.immich.apiUrl}${endpoint}`;
+    const url = `${config.immich.apiUrl}${endpoint}`;
 
     // Bound the wait for response *headers* only. The `finally` clears the timer
     // the moment they arrive, so the body may then stream for as long as it
     // needs — a whole-request timeout would truncate playback mid-video and
     // break seeking, since every range request would restart the clock.
     const controller = new AbortController();
-    const timer = setTimeout(() => controller.abort(), this.config.immichTimeoutMs);
+    const timer = setTimeout(() => controller.abort(), config.immichTimeoutMs);
 
     try {
       const headers: Record<string, string> = {
-        'x-api-key': this.config.immich.apiKey,
+        'x-api-key': config.immich.apiKey,
       };
       if (rangeHeader) {
         headers['Range'] = rangeHeader;
@@ -235,13 +254,13 @@ class ImmichClient {
       if (error instanceof ImmichUnavailableError) throw error;
       console.error(
         isTimeout(error)
-          ? `[Immich] Video ${assetId} did not respond within ${this.config.immichTimeoutMs}ms`
+          ? `[Immich] Video ${assetId} did not respond within ${config.immichTimeoutMs}ms`
           : `[Immich] Video stream error for ${assetId}:`,
         error,
       );
       throw new ImmichUnavailableError(
         isTimeout(error)
-          ? `Immich did not respond within ${this.config.immichTimeoutMs}ms for video ${assetId}`
+          ? `Immich did not respond within ${config.immichTimeoutMs}ms for video ${assetId}`
           : `Cannot reach Immich to stream video ${assetId}`,
       );
     } finally {
@@ -256,24 +275,25 @@ class ImmichClient {
     assetId: string,
     size: ImageSize = 'preview',
   ): Promise<{ stream: ReadableStream; contentType: string; contentLength: string | null } | null> {
-    if (!this.hasCredentials) return null;
+    const config = this.config;
+    if (!this.hasCredentials(config)) return null;
 
     const endpoint =
       size === 'original'
         ? `/assets/${encodeURIComponent(assetId)}/original`
         : `/assets/${encodeURIComponent(assetId)}/thumbnail?size=${size}`;
 
-    const url = `${this.config.immich.apiUrl}${endpoint}`;
+    const url = `${config.immich.apiUrl}${endpoint}`;
 
     // Headers-only timeout, same reasoning as streamVideo: an original-size
     // photo is legitimately slow to transfer and must not be capped.
     const controller = new AbortController();
-    const timer = setTimeout(() => controller.abort(), this.config.immichTimeoutMs);
+    const timer = setTimeout(() => controller.abort(), config.immichTimeoutMs);
 
     try {
       const res = await fetch(url, {
         headers: {
-          'x-api-key': this.config.immich.apiKey,
+          'x-api-key': config.immich.apiKey,
         },
         signal: controller.signal,
       });
@@ -305,13 +325,13 @@ class ImmichClient {
       if (error instanceof ImmichUnavailableError) throw error;
       console.error(
         isTimeout(error)
-          ? `[Immich] Asset ${assetId} did not respond within ${this.config.immichTimeoutMs}ms`
+          ? `[Immich] Asset ${assetId} did not respond within ${config.immichTimeoutMs}ms`
           : `[Immich] Stream error for ${assetId}:`,
         error,
       );
       throw new ImmichUnavailableError(
         isTimeout(error)
-          ? `Immich did not respond within ${this.config.immichTimeoutMs}ms for asset ${assetId}`
+          ? `Immich did not respond within ${config.immichTimeoutMs}ms for asset ${assetId}`
           : `Cannot reach Immich to stream asset ${assetId}`,
       );
     } finally {
@@ -320,10 +340,63 @@ class ImmichClient {
   }
 
   /**
-   * Get ALL configured albums (filtered by the full allowlist).
-   * Uses ?shared=true to only fetch albums that have been shared in Immich.
+   * Every published album: the allowlist applied to Immich's album list, with
+   * the gallery.yaml title and description overrides and the resulting slug.
+   *
+   * The cache holds Immich's list as Immich sent it; the allowlist and the
+   * overrides are applied here, on every call, from the current config. They
+   * used to be applied before caching, and the admin routes' invalidateAll()
+   * runs in their own module instances (Next bundles each route separately),
+   * so after a save the public pages kept the old titles, descriptions and
+   * album set until CACHE_TTL ran out. getConfig() already follows the
+   * content files' mtimes into every instance, so deriving from it per call
+   * makes a save visible on the next request, at no Immich cost.
+   *
+   * A newly allowlisted album that is missing from the cached list (created
+   * in Immich after the list was fetched) refetches the list once per
+   * allowlist, instead of 404-ing until the TTL runs out; see listIsCurrent().
+   *
+   * `?shared=true` is inert: current Immich ignores it and answers with every
+   * album (#515). The allowlist is the whole protection.
    */
   async getAlbums(forceFresh = false): Promise<ImmichAlbum[]> {
+    const config = this.config;
+    const list = await this.loadAlbumList(forceFresh, config);
+    return this.publishedAlbums(list, config);
+  }
+
+  /** The allowlisted albums of a raw Immich list, named per gallery.yaml. */
+  private publishedAlbums(all: readonly ImmichAlbum[], config: AppConfig): ImmichAlbum[] {
+    const allowedIds = new Set(config.albums);
+    return all
+      .filter((album) => allowedIds.has(album.id))
+      .map((album) => this.withOverrides(album, config));
+  }
+
+  /**
+   * An album named as gallery.yaml says. Returns a copy: the argument is the
+   * cached entry, shared by every caller.
+   */
+  private withOverrides(album: ImmichAlbum, config: AppConfig): ImmichAlbum {
+    const name = config.albumOverrides[album.id] ?? album.albumName;
+    const description = config.albumDescriptions[album.id] ?? album.description ?? '';
+    return { ...album, albumName: name, description, slug: albumSlug(name, album.id) };
+  }
+
+  /**
+   * Whether a cached list can answer for this allowlist: it holds every
+   * allowlisted album, or it was already fetched for this exact allowlist
+   * (an album deleted in Immich stays missing, and must not cost a request
+   * per page view).
+   */
+  private listIsCurrent(entry: CachedAlbumList, config: AppConfig): boolean {
+    if (entry.fetchedFor === allowlistKey(config)) return true;
+    const known = new Set(entry.albums.map((a) => a.id));
+    return config.albums.every((id) => known.has(id));
+  }
+
+  /** Immich's album list, cached as sent. */
+  private async loadAlbumList(forceFresh: boolean, config: AppConfig): Promise<ImmichAlbum[]> {
     const cacheKey = 'albums-list';
     // forceFresh only skips the read below; it must not delete the entry
     // outright. Deleting first meant a request that then failed left every
@@ -331,8 +404,8 @@ class ImmichClient {
     // from the same key, so the old entry has to survive until cacheSet()
     // overwrites it on success.
     if (!forceFresh) {
-      const cached = cache.get<ImmichAlbum[]>(cacheKey);
-      if (cached) return cached;
+      const cached = cache.get<CachedAlbumList>(cacheKey);
+      if (cached && this.listIsCurrent(cached, config)) return cached.albums;
     }
 
     if (this.pendingAlbumsPromise) {
@@ -344,66 +417,20 @@ class ImmichClient {
         const all = await this.request<ImmichAlbum[]>('/albums?shared=true');
         if (!all) return [];
 
-        const allowedIds = new Set(this.config.albums);
-        const filtered = all
-          .filter((album) => allowedIds.has(album.id))
-          .map((album) => {
-            const name = this.config.albumOverrides[album.id] ?? album.albumName;
-            const description = this.config.albumDescriptions[album.id] ?? album.description ?? '';
-            return {
-              ...album,
-              albumName: name,
-              description,
-              slug: albumSlug(name, album.id),
-            };
-          });
-
         // Log album summary on first load so admins can see what's published
         if (!this.hasLoggedAlbums) {
           this.hasLoggedAlbums = true;
-          console.log('\n[Lightbox] Published albums:');
-          console.log('─'.repeat(80));
-
-          // Log standalone albums
-          const standaloneIds = new Set(this.config.standaloneAlbums);
-          const standalone = filtered.filter((a) => standaloneIds.has(a.id));
-          if (standalone.length > 0) {
-            console.log('  Standalone:');
-            for (const a of standalone) {
-              console.log(`    📷 ${a.albumName}`);
-              console.log(`       URL: /${a.slug}  •  ${a.assetCount} photos  •  ID: ${a.id}`);
-            }
-          }
-
-          // Log subpage groupings
-          for (const sp of this.config.subpages) {
-            const spAlbums = filtered.filter((a) => sp.albumIds.includes(a.id));
-            console.log(`  📁 ${sp.name} (/${sp.slug}):`);
-            for (const a of spAlbums) {
-              console.log(`    📷 ${a.albumName}`);
-              console.log(`       URL: /${sp.slug}/${a.slug}  •  ${a.assetCount} photos`);
-            }
-          }
-
-          const missing = this.config.albums.filter((id) => !all.some((a) => a.id === id));
-          if (missing.length > 0) {
-            console.warn(`  ⚠️  Unknown album IDs: ${missing.join(', ')}`);
-          }
-          console.log('─'.repeat(80) + '\n');
+          this.logPublishedAlbums(all, config);
         }
 
-        // Not while the install is unfinished. The dummy setup config carries an
-        // empty allowlist, so `filtered` is [] no matter what Immich returned —
-        // and caching that outlives the wizard that fixes it, because
-        // invalidateAll() runs in the install route's own module instance
-        // (Next bundles each route separately; see lib/install.ts). The gallery
-        // then looks empty until the server restarts.
-        if (!this.config.needsSetup) {
-          this.cacheSet(cacheKey, filtered);
-        }
-        return filtered;
+        // Cached even while setup is unfinished: the list is Immich's, and the
+        // setup config's empty allowlist is applied on the way out, not baked
+        // into the entry.
+        const entry: CachedAlbumList = { albums: all, fetchedFor: allowlistKey(config) };
+        this.cacheSet(cacheKey, entry, config);
+        return all;
       } catch (error) {
-        return this.staleOrThrow<ImmichAlbum[]>(cacheKey, error, 'album list');
+        return this.staleOrThrow<CachedAlbumList>(cacheKey, error, 'album list').albums;
       } finally {
         this.pendingAlbumsPromise = null;
       }
@@ -412,6 +439,40 @@ class ImmichClient {
     return this.pendingAlbumsPromise;
   }
 
+  /** The published albums, once per process, so admins can see what is live. */
+  private logPublishedAlbums(all: readonly ImmichAlbum[], config: AppConfig): void {
+    const filtered = this.publishedAlbums(all, config);
+    console.log('\n[Lightbox] Published albums:');
+    console.log('─'.repeat(80));
+
+    // Log standalone albums
+    const standaloneIds = new Set(config.standaloneAlbums);
+    const standalone = filtered.filter((a) => standaloneIds.has(a.id));
+    if (standalone.length > 0) {
+      console.log('  Standalone:');
+      for (const a of standalone) {
+        console.log(`    📷 ${a.albumName}`);
+        console.log(`       URL: /${a.slug}  •  ${a.assetCount} photos  •  ID: ${a.id}`);
+      }
+    }
+
+    // Log subpage groupings
+    for (const sp of config.subpages) {
+      const spAlbums = filtered.filter((a) => sp.albumIds.includes(a.id));
+      console.log(`  📁 ${sp.name} (/${sp.slug}):`);
+      for (const a of spAlbums) {
+        console.log(`    📷 ${a.albumName}`);
+        console.log(`       URL: /${sp.slug}/${a.slug}  •  ${a.assetCount} photos`);
+      }
+    }
+
+    const missing = config.albums.filter((id) => !all.some((a) => a.id === id));
+    if (missing.length > 0) {
+      console.warn(`  ⚠️  Unknown album IDs: ${missing.join(', ')}`);
+    }
+    console.log('─'.repeat(80) + '\n');
+  }
+
   /**
    * Get only standalone albums (not in any subpage) — for the homepage.
    */
@@ -446,6 +507,7 @@ class ImmichClient {
 
       return {
         name: sp.name,
+        ...(sp.title ? { title: sp.title } : {}),
         slug: sp.slug,
         albumCount: spAlbums.length,
         totalAssetCount: spAlbums.reduce((sum, a) => sum + a.assetCount, 0),
@@ -465,9 +527,13 @@ class ImmichClient {
     const subpage = this.config.subpages.find((sp) => sp.slug === wanted && sp.enabled !== false);
     if (!subpage) return null;
 
-    const allAlbums = await this.getAlbums(forceFresh);
-    const subpageAlbumIds = new Set(subpage.albumIds);
-    const albums = allAlbums.filter((a) => subpageAlbumIds.has(a.id));
+    // In the subpage's own order (gallery.yaml, as arranged in the page
+    // builder), not Immich's: filtering the list kept Immich's order, so the
+    // cover grid ignored every rearrangement.
+    const byId = new Map((await this.getAlbums(forceFresh)).map((a) => [a.id, a]));
+    const albums = [...new Set(subpage.albumIds)]
+      .map((id) => byId.get(id))
+      .filter((a): a is ImmichAlbum => a !== undefined);
 
     return { subpage, albums };
   }
@@ -526,20 +592,23 @@ class ImmichClient {
    * saved config, which is right for the public site but wrong for the page
    * builder: an album just dragged in has not been saved yet, so the picker
    * and the reorder editor would come up empty. Admin auth is the gate here.
+   *
+   * The public site uses it too: album blocks in journal entries, content
+   * pages and essay files, and the published-asset set that covers them. The
+   * author's pick is the gate there, not the allowlist.
+   *
+   * It goes through the same cached, coalesced load as getAlbum(), so those
+   * renders cost no Immich request within CACHE_TTL, and an album that is also
+   * allowlisted is fetched once for both. That load yields exactly this list —
+   * trashed assets dropped, sorted by capture time in the album's own order —
+   * which is the order the site renders under `sort: immich`, and the baseline
+   * the reorder editor has to match. `forceFresh` skips the cached read for
+   * the admin editors, which must show an album as Immich has it now.
    */
-  async getAlbumAssetsRaw(albumId: string): Promise<ImmichAsset[]> {
-    const [album, assets] = await Promise.all([
-      this.request<ImmichAlbum>(`/albums/${encodeURIComponent(albumId)}`),
-      this.fetchAlbumAssets(albumId),
-    ]);
-    if (!album) return [];
-
-    // Same order the site would render under `sort: immich`. The reorder
-    // editor's baseline has to match it exactly, or the assets it shows as
-    // "follows automatically" would not be the ones that actually follow.
-    return assets
-      .filter((a) => !a.isTrashed)
-      .sort(compareByCaptureTime(album.order === 'asc' ? 1 : -1));
+  async getAlbumAssetsRaw(albumId: string, forceFresh = false): Promise<ImmichAsset[]> {
+    const album = await this.loadAlbum(albumId, forceFresh, true);
+    // A copy: the cached entry is shared with every other caller.
+    return album ? [...album.assets] : [];
   }
 
   /**
@@ -555,13 +624,17 @@ class ImmichClient {
    * be sorting the same array.
    */
   private withSort(album: ImmichAlbum): ImmichAlbum {
-    const mode = this.config.albumSortModes[album.id] ?? DEFAULT_ALBUM_SORT;
+    const config = this.config;
+    const mode = config.albumSortModes[album.id] ?? DEFAULT_ALBUM_SORT;
     return {
-      ...album,
+      // Titles and descriptions the same way, for the same reason: the cache
+      // holds the album as Immich has it, so a gallery.yaml override takes
+      // effect on the next request, in every module instance.
+      ...this.withOverrides(album, config),
       assets: sortAlbumAssets(album.assets, {
         mode,
         immichOrder: album.order,
-        manualOrder: this.config.albumManualOrders[album.id],
+        manualOrder: config.albumManualOrders[album.id],
       }),
     };
   }
@@ -571,10 +644,28 @@ class ImmichClient {
     return album ? this.withSort(album) : null;
   }
 
+  /**
+   * An album for a client proofing link, whether or not it is published.
+   *
+   * Client galleries are usually not part of the public portfolio, so the
+   * allowlist cannot be the gate here. The proofing session is: callers reach
+   * this only after resolving a valid, unexpired session token, and pass that
+   * session's own album ID — never one taken from the request.
+   */
+  async getProofingAlbum(albumId: string): Promise<ImmichAlbum | null> {
+    const album = await this.loadAlbum(albumId, false, true);
+    return album ? this.withSort(album) : null;
+  }
+
   /** The cached load. Always yields the canonical Immich order; see withSort(). */
-  private async loadAlbum(albumId: string, forceFresh: boolean): Promise<ImmichAlbum | null> {
+  private async loadAlbum(
+    albumId: string,
+    forceFresh: boolean,
+    /** Only for getProofingAlbum() and getAlbumAssetsRaw(); see there. */
+    bypassAllowlist = false,
+  ): Promise<ImmichAlbum | null> {
     // Security: only serve configured albums
-    if (!this.config.albums.includes(albumId)) {
+    if (!bypassAllowlist && !this.config.albums.includes(albumId)) {
       console.warn(`[Immich] Album ${albumId} is not in LIGHTBOX_ALBUMS`);
       return null;
     }
@@ -627,12 +718,8 @@ class ImmichClient {
         // getAlbum(); see withSort().
         album.assets.sort(compareByCaptureTime(album.order === 'asc' ? 1 : -1));
 
-        const name = this.config.albumOverrides[album.id] ?? album.albumName;
-        const description = this.config.albumDescriptions[album.id] ?? album.description ?? '';
-        album.albumName = name;
-        album.description = description;
-        album.slug = albumSlug(name, album.id);
-
+        // Cached without the gallery.yaml title and description: withSort()
+        // applies them on the way out, from the current config.
         this.cacheSet(cacheKey, album);
         return album;
       } catch (error) {
@@ -662,16 +749,17 @@ class ImmichClient {
   ): Promise<ImmichAlbum | null> {
     const albums = await this.getAlbums(forceFresh);
 
+    const config = this.config;
     let routeIds: Set<string>;
     if (subpageSlug) {
       const wantedSubpage = normalizeSlug(subpageSlug);
-      const subpage = this.config.subpages.find(
+      const subpage = config.subpages.find(
         (sp) => sp.slug === wantedSubpage && sp.enabled !== false,
       );
       if (!subpage) return null;
       routeIds = new Set(subpage.albumIds);
     } else {
-      routeIds = new Set(this.config.standaloneAlbums);
+      routeIds = new Set(config.standaloneAlbums);
     }
     const searchSet = albums.filter((a) => routeIds.has(a.id));
 
diff --git a/lib/immichLoader.ts b/lib/immichLoader.ts
index 0d3a8c7..bd3c143 100644
--- a/lib/immichLoader.ts
+++ b/lib/immichLoader.ts
@@ -2,23 +2,24 @@
  * Custom next/image loader for Immich proxy.
  *
  * Referenced by next.config.ts via images.loaderFile.
- * Generates URLs that point to our /api/image proxy route,
- * passing width and quality as query parameters.
+ * Generates URLs that point to our /api/image proxy route.
  *
  * The src passed to next/image should already be a full proxy URL
- * (e.g. /api/image/<token>?size=preview). This loader appends
- * w and q params for responsive srcset generation.
+ * (e.g. /api/image/<token>?size=preview). This loader appends the width —
+ * collapsed to the width of the Immich tier it resolves to, so every srcset
+ * candidate of one tier is the same URL (see canonicalImageUrl).
  */
 
 'use client';
 
+import { canonicalImageUrl } from './imageSize';
+
 interface ImageLoaderParams {
   src: string;
   width: number;
   quality?: number;
 }
 
-export default function immichLoader({ src, width, quality }: ImageLoaderParams): string {
-  const separator = src.includes('?') ? '&' : '?';
-  return `${src}${separator}w=${width}&q=${quality || 75}`;
+export default function immichLoader({ src, width }: ImageLoaderParams): string {
+  return canonicalImageUrl(src, width);
 }
diff --git a/lib/install.ts b/lib/install.ts
index 388ffcd..93cad16 100644
--- a/lib/install.ts
+++ b/lib/install.ts
@@ -125,8 +125,13 @@ interface InstallFileData {
 
 let cachedInstallFile: { path: string; mtimeMs: number; data: InstallFileData } | null = null;
 
+/** Where install.json lives; getConfig() watches its mtime. */
+export function installFilePath(): string {
+  return path.join(installContentDir(), INSTALL_FILENAME);
+}
+
 function readInstallFile(): InstallFileData {
-  const installPath = path.join(installContentDir(), INSTALL_FILENAME);
+  const installPath = installFilePath();
 
   let mtimeMs = 0;
   try {
diff --git a/lib/journal.server.ts b/lib/journal.server.ts
new file mode 100644
index 0000000..beb6191
--- /dev/null
+++ b/lib/journal.server.ts
@@ -0,0 +1,23 @@
+/**
+ * Journal reads for server rendering, memoised for the length of one request.
+ *
+ * A journal page reads the same files from several places in one render: the
+ * header nav (`loadSiteNav()` in the root layout) lists every entry to decide
+ * whether Journal belongs in the menu, the page lists them again for its
+ * index or its prev/next links, and an entry's `generateMetadata()` reads the
+ * entry the page body reads a moment later. React's `cache()` hands all of
+ * them one result per request — each request still reads the files afresh,
+ * so an edit shows on the next page load as before.
+ *
+ * Render only: outside a React server render `cache()` does not memoise, and
+ * admin routes, which read back what they just wrote, keep calling
+ * `lib/admin/journal-service` directly. Callers must not mutate the results,
+ * which are shared.
+ */
+
+import { cache } from 'react';
+import { listJournalEntries, readJournalEntry } from './admin/journal-service';
+
+export const listJournalEntriesForRequest = cache(listJournalEntries);
+
+export const readJournalEntryForRequest = cache(readJournalEntry);
diff --git a/lib/journal.ts b/lib/journal.ts
index 8d56e0c..eebbd11 100644
--- a/lib/journal.ts
+++ b/lib/journal.ts
@@ -6,6 +6,8 @@
 export interface JournalFrontmatter {
   title?: string;
   subtitle?: string;
+  /** SEO description. Content pages use it (#722); journal entries ignore it. */
+  description?: string;
   date?: string;
   author?: string;
   coverAssetId?: string;
@@ -184,14 +186,28 @@ export function isValidSlug(slug: string): boolean {
 }
 
 export function sanitizeSlug(input: string): string {
-  return (
-    input
-      .toLowerCase()
-      .trim()
-      .replace(/[^a-z0-9_-]/g, '-')
-      .replace(/-+/g, '-')
-      .replace(/^-|-$/g, '') || 'untitled'
-  );
+  return slugFieldValue(input.trim()).replace(/-$/, '') || 'untitled';
+}
+
+/**
+ * A slug field's value while it is being typed: sanitizeSlug() without the two
+ * steps that only suit a finished slug. Dropping the trailing "-" on every
+ * keystroke made a hyphen impossible to type ("about-" became "about", and the
+ * next key gave "aboutu"), and an emptied field jumped to "untitled". Pass the
+ * result through sanitizeSlug() before using it as a slug.
+ *
+ * Accented letters keep their base letter ("für" → "fur", "Straße" →
+ * "strasse"), as subpage slugs do; before, each one split the word ("f-r").
+ */
+export function slugFieldValue(input: string): string {
+  return input
+    .replace(/ß/g, 'ss')
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9_-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-/, '');
 }
 
 /** Simple Markdown inline formatting (bold, italic, links) */
@@ -216,8 +232,11 @@ export function renderInlineMarkdown(text: string): string {
   // Italic: *text* or _text_, same intraword rule for `_`.
   html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
   html = html.replace(/(?<![\w])_(.*?)_(?![\w])/g, '<em>$1</em>');
-  // Links: [label](url)
-  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, label, url) => {
+  // Links: [label](url). The URL may hold one level of balanced parentheses,
+  // as Wikipedia-style URLs do (`…/Foo_(bar)`); it used to end at the first
+  // `)` and leave the rest as text. The two alternatives start on disjoint
+  // characters, so this stays linear.
+  html = html.replace(/\[([^\]]+)\]\(((?:[^()]|\([^()]*\))+)\)/g, (match, label, url) => {
     const trimmed = url.trim();
     if (!isSafeUrl(trimmed)) return label;
     return `<a href="${trimmed}" target="_blank" rel="noopener noreferrer">${label}</a>`;
@@ -365,6 +384,7 @@ export function parseFrontmatter(content: string): {
 
     if (key === 'title') frontmatter.title = val;
     else if (key === 'subtitle') frontmatter.subtitle = val;
+    else if (key === 'description') frontmatter.description = val;
     else if (key === 'date') frontmatter.date = val;
     else if (key === 'author') frontmatter.author = val;
     else if (key === 'coverAssetId') frontmatter.coverAssetId = val;
@@ -376,6 +396,63 @@ export function parseFrontmatter(content: string): {
   return { frontmatter, body };
 }
 
+/**
+ * Split a chunk before every line that starts a photo reference (`![`).
+ *
+ * Paragraphs are separated by blank lines, so two photo lines written without
+ * one, or a heading or sentence directly above a photo, used to arrive as a
+ * single chunk. No block pattern matched it and it fell through to the
+ * paragraph renderer, which printed the raw asset ids on the public page.
+ * Directive chunks (`::map`, `::facts`, `::album`) are left alone: their
+ * lines are key/value pairs, never photo references.
+ */
+function splitAtPhotoLines(chunk: string): string[] {
+  if (chunk.startsWith('::') || !/(?:^|\n)[ \t]*!\[/.test(chunk)) return [chunk];
+  const segments: string[] = [];
+  let current: string[] = [];
+  for (const line of chunk.split(/\r?\n/)) {
+    if (line.trimStart().startsWith('![') && current.length > 0) {
+      segments.push(current.join('\n').trim());
+      current = [];
+    }
+    current.push(line);
+  }
+  segments.push(current.join('\n').trim());
+  return segments.filter(Boolean);
+}
+
+/**
+ * Split a photo line, `![<target>](<caption>)`, into target and caption.
+ *
+ * The target ends at the first `]` on the line: asset ids, layouts and commas
+ * never contain one. The caption is everything after `](` up to the chunk's
+ * **last** `)`, so it may itself contain parentheses and links (`Gipfel
+ * (560 m)`, `see [map](https://…)`) and needs no escaping. The previous
+ * pattern, `\(([^)]*)\)$`, stopped at the first `)`. The serializer wrote such
+ * captions verbatim, the next parse rejected the line, the public page printed
+ * it as a paragraph with the raw asset ids, and the editor turned the photo
+ * into a text block. A line that pattern accepted has no `)` inside its
+ * caption, so it parses exactly as before.
+ *
+ * Every chunk starting with `![` is a photo line, even a malformed one (no
+ * `(`, text after the last `)`): it becomes a photo block whose caption keeps
+ * the stray text, never a paragraph that would print the target.
+ */
+function parsePhotoLine(chunk: string): { target: string; caption: string } | null {
+  if (!chunk.startsWith('![')) return null;
+  const firstLineEnd = chunk.indexOf('\n');
+  const firstLine = firstLineEnd === -1 ? chunk : chunk.slice(0, firstLineEnd);
+  const close = firstLine.indexOf(']');
+  const targetEnd = close === -1 ? firstLine.length : close;
+  const target = chunk.slice(2, targetEnd).trim();
+  let rest = chunk.slice(close === -1 ? targetEnd : targetEnd + 1);
+  if (rest.startsWith('(')) {
+    rest = rest.slice(1);
+    if (rest.endsWith(')')) rest = rest.slice(0, -1);
+  }
+  return { target, caption: rest.trim() };
+}
+
 /** Parse Journal Markdown content into structured blocks */
 export function parseJournalMarkdown(rawContent: string): ParsedJournal {
   const { frontmatter, body } = parseFrontmatter(rawContent);
@@ -385,7 +462,8 @@ export function parseJournalMarkdown(rawContent: string): ParsedJournal {
   const chunks = body
     .split(/\r?\n\s*\r?\n/)
     .map((c) => c.trim())
-    .filter(Boolean);
+    .filter(Boolean)
+    .flatMap(splitAtPhotoLines);
 
   for (const chunk of chunks) {
     // 0a. Map: `::map Caption`, then one line per pin in drawing order —
@@ -526,10 +604,12 @@ export function parseJournalMarkdown(rawContent: string): ParsedJournal {
     // unfilled placeholder — `assetId: ''`, serialized as `![](Caption)` or
     // `![:wide](Caption)` — still parses back into a `photo` block instead of
     // silently degrading into a text paragraph on the next load.
-    const imgMatch = chunk.match(/^!\[([^\]]*)\]\(([^)]*)\)$/);
-    if (imgMatch) {
-      const rawTarget = imgMatch[1].trim();
-      const caption = imgMatch[2].trim() ? renderInlineMarkdown(imgMatch[2].trim()) : undefined;
+    //
+    // parsePhotoLine() has the caption run to the last `)`, see there.
+    const photoLine = parsePhotoLine(chunk);
+    if (photoLine) {
+      const rawTarget = photoLine.target;
+      const caption = photoLine.caption ? renderInlineMarkdown(photoLine.caption) : undefined;
 
       // Two ids are a side-by-side pair, three or more a grid. The pair used
       // to take the first two of any count and drop the rest on the next save.
@@ -704,7 +784,9 @@ export function serializeJournalMarkdown(journal: ParsedJournal): string {
 export function calculateReadingTime(text: string): { words: number; minutes: number } {
   const plainText = text
     .replace(/<[^>]+>/g, ' ')
-    .replace(/!\[.*?\]\(.*?\)/g, ' ')
+    // A photo line is a reference and its caption, to the end of the line:
+    // the caption may itself contain `)`.
+    .replace(/^[ \t]*!\[.*$/gm, ' ')
     // Directive lines (`::facts`, `::map …`) are structure, not reading.
     .replace(/^::\w+.*$/gm, ' ');
   const words = plainText.trim().split(/\s+/).filter(Boolean).length;
diff --git a/lib/journalDate.ts b/lib/journalDate.ts
new file mode 100644
index 0000000..cde9804
--- /dev/null
+++ b/lib/journalDate.ts
@@ -0,0 +1,49 @@
+/**
+ * Display form of a journal entry's `date:` frontmatter. Client-safe (no `fs`),
+ * shared by the /journal index and the entry header so both show the same thing.
+ *
+ * The value is typed by hand, so it is read as a calendar date, not an instant:
+ *
+ * - `2026-03-15` (optionally followed by a time) is formatted in UTC. `new Date()`
+ *   reads a date-only ISO string as UTC midnight, and formatting that in the
+ *   server's or browser's timezone showed Mar 14 west of Greenwich.
+ * - `2026-03` shows month and year — `new Date('2026-03')` invented the 1st.
+ * - Anything else (`15.03.2026`, `March 2026`, `Spring 2026`, an impossible
+ *   `2026-02-30`) is shown as written instead of "Invalid Date" or a guessed day.
+ */
+const DAY = /^(\d{4})-(\d{2})-(\d{2})(?=$|[T\s])/;
+const MONTH = /^(\d{4})-(\d{2})$/;
+
+export function formatJournalDate(raw: string | undefined, locale: string): string | null {
+  const value = raw?.trim();
+  if (!value) return null;
+
+  const day = DAY.exec(value);
+  if (day) {
+    const [y, m, d] = [Number(day[1]), Number(day[2]), Number(day[3])];
+    const date = new Date(Date.UTC(y, m - 1, d));
+    // Date.UTC rolls 2026-02-30 over into March; refuse instead of moving it.
+    if (date.getUTCFullYear() !== y || date.getUTCMonth() !== m - 1 || date.getUTCDate() !== d) {
+      return value;
+    }
+    return date.toLocaleDateString(locale, {
+      timeZone: 'UTC',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  }
+
+  const month = MONTH.exec(value);
+  if (month) {
+    const [y, m] = [Number(month[1]), Number(month[2])];
+    if (m < 1 || m > 12) return value;
+    return new Date(Date.UTC(y, m - 1, 1)).toLocaleDateString(locale, {
+      timeZone: 'UTC',
+      year: 'numeric',
+      month: 'long',
+    });
+  }
+
+  return value;
+}
diff --git a/lib/mapService.ts b/lib/mapService.ts
index dabad13..a94209b 100644
--- a/lib/mapService.ts
+++ b/lib/mapService.ts
@@ -1,5 +1,6 @@
 import { immich } from './immich';
 import { getConfig } from './config';
+import { isListedSubpage, listedAlbumIds } from './config/schema';
 import { cache } from './cache';
 
 /**
@@ -44,13 +45,21 @@ export async function getMapData(): Promise<MapLocation[]> {
 
   pendingMapDataPromise = (async () => {
     try {
-      const albums = await immich.getAlbums();
+      // The allowlist still holds the albums of subpages taken offline with
+      // `enabled: false`, and those of `hidden` subpages, which are reachable
+      // by direct link only. A marker names, links and shows a photo of every
+      // album it counts — a listing — so both have to go before anything is
+      // aggregated.
+      const listed = listedAlbumIds(config);
+      const albums = (await immich.getAlbums()).filter((a) => listed.has(a.id));
 
       // Build a lookup: album ID → { name, slug, subpageSlug? }
       const albumMeta = new Map<string, { name: string; slug: string; subpageSlug?: string }>();
       for (const a of albums) {
-        // Check if this album belongs to a subpage
-        const sp = config.subpages.find((s) => s.albumIds.includes(a.id));
+        // The subpage the marker links to, and whose password gates it. Never
+        // an offline one (its URL is a 404 and its password guards nothing),
+        // and never a hidden one: the marker would publish its address.
+        const sp = config.subpages.find((s) => isListedSubpage(s) && s.albumIds.includes(a.id));
         albumMeta.set(a.id, { name: a.albumName, slug: a.slug, subpageSlug: sp?.slug });
       }
 
diff --git a/lib/ogImage.ts b/lib/ogImage.ts
new file mode 100644
index 0000000..77f8d16
--- /dev/null
+++ b/lib/ogImage.ts
@@ -0,0 +1,66 @@
+/**
+ * Signed URLs for the generated share card (`/api/og`).
+ *
+ * The card prints whatever title and subtitle its URL carries, on the site's
+ * own domain and in its colours. Unsigned, anyone could have the site render
+ * text of their choosing — a fake notice passed around as the site's own
+ * image — and every new string cost a fresh satori render. The pages that
+ * emit the URL sign the text they put in it; the route renders only text that
+ * carries a valid signature and falls back to the plain site card otherwise.
+ */
+
+import crypto from 'crypto';
+import { getConfig } from './config';
+
+export const OG_TITLE_MAX = 200;
+export const OG_SUBTITLE_MAX = 100;
+
+/** Truncates by code point, so a cut never leaves half a surrogate pair. */
+function clip(text: string, max: number): string {
+  const chars = Array.from(text);
+  return chars.length > max ? chars.slice(0, max).join('') : text;
+}
+
+function sign(secret: string, title: string, subtitle: string): string {
+  return crypto
+    .createHmac('sha256', secret)
+    .update(`og-card\0${title}\0${subtitle}`)
+    .digest('base64url')
+    .slice(0, 22);
+}
+
+/** `/api/og` URL for a card showing `title` (and `subtitle`), signed. */
+export function ogImageUrl(title: string, subtitle = ''): string {
+  let secret: string;
+  try {
+    secret = getConfig().authSecret;
+  } catch {
+    // No secret to sign with — the route then shows the site title anyway.
+    return '/api/og';
+  }
+  const t = clip(title, OG_TITLE_MAX);
+  const s = clip(subtitle, OG_SUBTITLE_MAX);
+  const params = new URLSearchParams({ title: t });
+  if (s) params.set('subtitle', s);
+  params.set('sig', sign(secret, t, s));
+  return `/api/og?${params.toString()}`;
+}
+
+/**
+ * The title and subtitle of a card URL, or null unless the URL was produced
+ * by `ogImageUrl()` with this secret.
+ */
+export function verifiedOgText(
+  params: URLSearchParams,
+  secret: string,
+): { title: string; subtitle: string } | null {
+  const title = params.get('title');
+  const subtitle = params.get('subtitle') ?? '';
+  const sig = params.get('sig');
+  if (!title || !sig || !secret) return null;
+
+  const expected = Buffer.from(sign(secret, title, subtitle));
+  const given = Buffer.from(sig);
+  if (given.length !== expected.length || !crypto.timingSafeEqual(given, expected)) return null;
+  return { title, subtitle };
+}
diff --git a/lib/pages.ts b/lib/pages.ts
new file mode 100644
index 0000000..982084b
--- /dev/null
+++ b/lib/pages.ts
@@ -0,0 +1,140 @@
+/**
+ * Content pages (#722): timeless pages such as pricing, workshops or a booking
+ * FAQ, stored one per file in `content/pages/<slug>.md` and served at
+ * `/<slug>`.
+ *
+ * Client-safe (no `fs`) — the admin UI imports the slug rules from here. The
+ * file access lives in lib/admin/pages-service.ts.
+ *
+ * A page is block markdown in the journal format (lib/journal.ts), with a
+ * smaller frontmatter: `title`, `description` (SEO), `password`, `draft`.
+ * Whether it appears in the menu is not a property of the file: it is decided
+ * by a `- page: <slug>` entry among the subpages in gallery.yaml, so the menu
+ * order lives in exactly one place.
+ */
+
+import { isValidSlug, type JournalFrontmatter } from './journal';
+
+export type PageFrontmatter = Pick<
+  JournalFrontmatter,
+  'title' | 'description' | 'password' | 'draft'
+>;
+
+export interface PageSummary {
+  slug: string;
+  frontmatter: PageFrontmatter;
+}
+
+/**
+ * First path segments the app serves itself. A page slugged like one of them
+ * would never be reached — the fixed route wins — so it is refused outright.
+ * `proof` and `contact` are fixed routes too, beyond the list in the issue.
+ */
+export const RESERVED_PAGE_SLUGS: readonly string[] = [
+  'about',
+  'map',
+  'journal',
+  'impressum',
+  'privacy',
+  'install',
+  'admin',
+  'gate',
+  'api',
+  'proof',
+  'contact',
+];
+
+/** Everything a page slug must not collide with. */
+export interface SlugTakenBy {
+  subpages: readonly string[];
+  albums: readonly string[];
+  journal: readonly string[];
+}
+
+export type SlugCollision =
+  | { kind: 'invalid' }
+  | { kind: 'reserved' }
+  | { kind: 'subpage' }
+  | { kind: 'album' }
+  | { kind: 'journal' };
+
+/**
+ * Why `slug` cannot be a page's URL, or null when it can.
+ *
+ * Journal entries live under /journal/ and cannot shadow a page, but they are
+ * checked all the same (#722): a page and an entry of the same name are two
+ * things a visitor would expect at one address.
+ */
+export function pageSlugCollision(slug: string, taken: SlugTakenBy): SlugCollision | null {
+  if (!isValidSlug(slug)) return { kind: 'invalid' };
+  const wanted = slug.toLowerCase();
+  if (RESERVED_PAGE_SLUGS.includes(wanted)) return { kind: 'reserved' };
+  if (taken.subpages.some((s) => s.toLowerCase() === wanted)) return { kind: 'subpage' };
+  if (taken.albums.some((s) => s.toLowerCase() === wanted)) return { kind: 'album' };
+  if (taken.journal.some((s) => s.toLowerCase() === wanted)) return { kind: 'journal' };
+  return null;
+}
+
+/** A sentence for the admin UI and the doctor. */
+export function describeCollision(slug: string, collision: SlugCollision): string {
+  switch (collision.kind) {
+    case 'invalid':
+      return `"${slug}" is not a valid slug: use letters, digits, "-" and "_" only.`;
+    case 'reserved':
+      return `/${slug} is a built-in route of the site.`;
+    case 'subpage':
+      return `/${slug} is already a subpage.`;
+    case 'album':
+      return `/${slug} is already a standalone album.`;
+    case 'journal':
+      return `A journal entry already uses the slug "${slug}".`;
+  }
+}
+
+/** One entry of the header menu, in gallery.yaml order. */
+export type NavEntry = { type: 'subpage'; slug: string } | { type: 'page'; slug: string };
+
+/** The page slugs referenced from gallery.yaml, i.e. the pages shown in the menu. */
+export function menuPageSlugs(nav: readonly NavEntry[]): string[] {
+  return nav.filter((e) => e.type === 'page').map((e) => e.slug);
+}
+
+export interface MenuItem {
+  key: string;
+  href: string;
+  label: string;
+}
+
+/**
+ * The header menu's subpage and page links, in gallery.yaml order.
+ *
+ * `visibleSubpages` is what the menu may show (hidden and disabled subpages
+ * already dropped). A page reference whose file is missing, or that is still a
+ * draft, is left out the same way. A password-protected page stays listed, as
+ * a protected subpage does: the gate is at the page, not in the menu.
+ */
+export function resolveMenu(
+  nav: readonly NavEntry[],
+  visibleSubpages: ReadonlyArray<{ slug: string; name: string; title?: string }>,
+  pages: readonly PageSummary[],
+): MenuItem[] {
+  const subpageBySlug = new Map(visibleSubpages.map((sp) => [sp.slug, sp]));
+  const pageBySlug = new Map(pages.map((p) => [p.slug, p]));
+  return nav.flatMap((entry): MenuItem[] => {
+    if (entry.type === 'subpage') {
+      const sp = subpageBySlug.get(entry.slug);
+      // The title a visitor sees on the page itself; `name` is the key the
+      // slug is made from, and only stands in when no title is set.
+      return sp ? [{ key: `sp-${sp.slug}`, href: `/${sp.slug}`, label: sp.title || sp.name }] : [];
+    }
+    const page = pageBySlug.get(entry.slug);
+    if (!page || page.frontmatter.draft) return [];
+    return [
+      {
+        key: `page-${page.slug}`,
+        href: `/${page.slug}`,
+        label: page.frontmatter.title || page.slug,
+      },
+    ];
+  });
+}
diff --git a/lib/password.ts b/lib/password.ts
index 027f6e4..69bfdb4 100644
--- a/lib/password.ts
+++ b/lib/password.ts
@@ -49,6 +49,29 @@ export async function verifyScrypt(password: string, stored: string): Promise<bo
   }
 }
 
+/**
+ * A well-formed hash with a random salt and a random digest, drawn once per
+ * process. No password matches it (the odds are 2^-512), so verifying against
+ * it costs exactly what a real verification costs and always fails.
+ */
+const DUMMY_HASH = `${SCRYPT_PREFIX}${crypto.randomBytes(16).toString('hex')}:${crypto
+  .randomBytes(64)
+  .toString('hex')}`;
+
+/**
+ * Spend one scrypt verification on nothing.
+ *
+ * A password check that returns early — no such key, a key without a password,
+ * a plaintext password compared by HMAC — answers in a couple of milliseconds,
+ * while a real scrypt hash takes tens. That gap tells anyone who times the
+ * replies which keys hold a hashed password, even when the reply bodies are
+ * identical. Callers run this on every path that would otherwise skip scrypt,
+ * so every attempt costs the same.
+ */
+export async function burnScrypt(password: string): Promise<void> {
+  await verifyScrypt(password, DUMMY_HASH);
+}
+
 /** Produce a storable `scrypt:salt:hash_hex` string. */
 export async function generateScryptHash(password: string): Promise<string> {
   const salt = crypto.randomBytes(16).toString('hex');
diff --git a/lib/proofAccess.ts b/lib/proofAccess.ts
new file mode 100644
index 0000000..6f34344
--- /dev/null
+++ b/lib/proofAccess.ts
@@ -0,0 +1,83 @@
+/**
+ * The shared preamble of every public proofing route: rate limit, site lock,
+ * the session behind the link token, and the album it was created for.
+ *
+ * The album ID always comes from the stored session, never from the request,
+ * which is what makes it safe to load an unpublished album here.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { immich, ImmichUnavailableError, type ImmichAsset } from './immich';
+import { checkRateLimit, getClientIp, retryAfterSeconds } from './rate-limit';
+import { siteLockResponse } from './auth';
+import { decodeAssetId } from './tokens';
+import { findSessionByToken, isExpired, type ProofSession } from './proofSessions';
+
+export type ProofAccess =
+  { error: Response } | { session: ProofSession; albumName: string; assets: ImmichAsset[] };
+
+const noStore = { 'Cache-Control': 'no-store' };
+
+export function proofError(status: number, error: string, extra?: Record<string, string>) {
+  return NextResponse.json({ error }, { status, headers: { ...noStore, ...extra } });
+}
+
+export async function resolveProofAccess(
+  request: NextRequest,
+  token: string,
+  bucket: string,
+  rpm: number,
+): Promise<ProofAccess> {
+  const ip = getClientIp(request);
+  const rl = checkRateLimit(`${bucket}:${ip}`, rpm);
+  if (!rl.success) {
+    return {
+      error: proofError(429, 'Too many requests', {
+        'Retry-After': String(retryAfterSeconds(rl.resetAt)),
+      }),
+    };
+  }
+
+  const locked = siteLockResponse(request);
+  if (locked) return { error: locked };
+
+  const session = await findSessionByToken(token);
+  // Unknown and expired answer the same, so a guessed token learns nothing.
+  if (!session || isExpired(session)) return { error: proofError(404, 'Not found') };
+
+  let album;
+  try {
+    album = await immich.getProofingAlbum(session.albumId);
+  } catch (error) {
+    if (error instanceof ImmichUnavailableError) {
+      return { error: proofError(503, 'Immich is currently unavailable', { 'Retry-After': '30' }) };
+    }
+    throw error;
+  }
+  if (!album) return { error: proofError(404, 'Not found') };
+
+  return {
+    session,
+    albumName: album.albumName,
+    assets: album.assets.filter((a) => a.type === 'IMAGE' || a.type === 'VIDEO'),
+  };
+}
+
+/**
+ * Asset tokens from the client → Immich asset IDs of this album, in album
+ * order. Null when any token does not decode or names an asset outside the
+ * album: a token is unforgeable, but membership is what keeps one session
+ * from recording another album's photos.
+ */
+export function decodeSelection(tokens: unknown, assets: ImmichAsset[]): string[] | null {
+  if (!Array.isArray(tokens)) return null;
+  const inAlbum = new Set(assets.map((a) => a.id));
+  const picked = new Set<string>();
+  for (const token of tokens) {
+    if (typeof token !== 'string') return null;
+    const id = decodeAssetId(token);
+    if (!id || !inAlbum.has(id)) return null;
+    picked.add(id);
+  }
+  return assets.filter((a) => picked.has(a.id)).map((a) => a.id);
+}
diff --git a/lib/proofExport.ts b/lib/proofExport.ts
new file mode 100644
index 0000000..342625f
--- /dev/null
+++ b/lib/proofExport.ts
@@ -0,0 +1,56 @@
+/**
+ * Turning a submitted selection into something the photographer can act on.
+ *
+ * The client picked from web previews; the photographer edits RAW files. So
+ * the most useful export is the list of file names *without* their extension:
+ * pasted into Lightroom's or Capture One's filename filter, it matches
+ * IMG_0412.CR3 as readily as IMG_0412.JPG.
+ */
+
+export interface ExportAsset {
+  /** 1-based position in the album, as the client saw it. */
+  position: number;
+  fileName: string;
+  takenAt?: string;
+}
+
+export type ExportFormat = 'lightroom' | 'txt' | 'csv';
+
+/** `IMG_0412.JPG` → `IMG_0412`. A name without a dot stays as it is. */
+export function baseName(fileName: string): string {
+  const dot = fileName.lastIndexOf('.');
+  return dot > 0 ? fileName.slice(0, dot) : fileName;
+}
+
+/** Quote a CSV field when it needs it (RFC 4180), and defuse spreadsheet formulas. */
+function csvField(value: string): string {
+  // A leading =, +, - or @ makes Excel and LibreOffice evaluate the cell. File
+  // names come from the client's camera, not from us — never let one run.
+  // Tab and CR start a formula in some spreadsheet apps as well (OWASP).
+  const safe = /^[=+\-@\t\r]/.test(value) ? `'${value}` : value;
+  return /[",\r\n]/.test(safe) ? `"${safe.replace(/"/g, '""')}"` : safe;
+}
+
+export function formatExport(assets: ExportAsset[], format: ExportFormat): string {
+  switch (format) {
+    case 'lightroom':
+      // De-duplicated: a RAW+JPEG pair uploaded to Immich shares one base name.
+      return Array.from(new Set(assets.map((a) => baseName(a.fileName)))).join(', ');
+    case 'txt':
+      return assets.map((a) => a.fileName).join('\n') + (assets.length ? '\n' : '');
+    case 'csv': {
+      const rows = [['position', 'file_name', 'taken_at']].concat(
+        assets.map((a) => [String(a.position), a.fileName, a.takenAt ?? '']),
+      );
+      return rows.map((row) => row.map(csvField).join(',')).join('\r\n') + '\r\n';
+    }
+  }
+}
+
+export function exportContentType(format: ExportFormat): string {
+  return format === 'csv' ? 'text/csv; charset=utf-8' : 'text/plain; charset=utf-8';
+}
+
+export function exportExtension(format: ExportFormat): string {
+  return format === 'csv' ? 'csv' : 'txt';
+}
diff --git a/lib/proofSessions.ts b/lib/proofSessions.ts
new file mode 100644
index 0000000..7886c1f
--- /dev/null
+++ b/lib/proofSessions.ts
@@ -0,0 +1,319 @@
+/**
+ * Client proofing sessions — "Proofing 2.0".
+ *
+ * The anonymous proofing on public albums keeps everything in the visitor's
+ * browser: favourites in localStorage, a bitmask in the URL, and a mailto the
+ * photographer may or may not receive. A proofing session is the handover
+ * version of that: the photographer creates a link for one client and one
+ * album, the client's picks are saved here as they make them, and a final
+ * "submit" locks the selection and tells the photographer.
+ *
+ * Storage is one JSON file, `content/proofing.json`, next to analytics.json —
+ * a portfolio has a handful of these at a time, not thousands. The file holds
+ * the link tokens, which are capabilities, so it is written 0600.
+ *
+ * The link token is the only credential a client has. It is 192 random bits,
+ * compared as an exact string lookup, and never derived from anything else.
+ * Admin routes address a session by its separate, non-secret `id`, so an admin
+ * URL in a log or a browser history does not leak a working client link.
+ *
+ * Selections are stored as Immich asset IDs. Clients only ever see the opaque
+ * asset tokens (lib/tokens.ts); the routes decode them and check that every
+ * one belongs to the session's album before anything is written.
+ */
+
+import crypto from 'node:crypto';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { z } from 'zod';
+import { atomicWrite } from './atomicWrite';
+import { isUuid } from './uuid';
+
+/** What a session lets its client download as a ZIP of originals. */
+export type ProofDownload = 'none' | 'selection' | 'album';
+
+export interface ProofSession {
+  /** Non-secret handle for the admin panel. */
+  id: string;
+  /** The client link's capability: /proof/<token>. */
+  token: string;
+  /** Who the link is for, as the photographer wants to see it. */
+  clientName: string;
+  albumId: string;
+  createdAt: string;
+  /** Last day the link works (YYYY-MM-DD, inclusive), or absent for no expiry. */
+  expiresOn?: string;
+  download: ProofDownload;
+  /** How many ZIP downloads the link allows; absent means unlimited. */
+  downloadLimit?: number;
+  downloadsUsed: number;
+  /** Selected Immich asset IDs, in the order the client picked them. */
+  selection: string[];
+  /** When the client last changed the selection. */
+  updatedAt?: string;
+  /** Set once the client submits; the selection is read-only from then on. */
+  submittedAt?: string;
+}
+
+interface ProofStore {
+  sessions: ProofSession[];
+}
+
+/** The largest selection a session stores — far above any real proofing round. */
+export const MAX_SELECTION = 2000;
+
+/** Upper bound on sessions, so a runaway script cannot grow the file forever. */
+export const MAX_SESSIONS = 500;
+
+// ── Pure helpers ────────────────────────────────────────────────────
+
+export type ProofState = 'open' | 'submitted' | 'expired';
+
+/**
+ * Whether a session still works on `now`. `expiresOn` is inclusive: a link
+ * "valid until 12 May" still opens on the evening of 12 May, in the server's
+ * time zone.
+ */
+export function isExpired(session: Pick<ProofSession, 'expiresOn'>, now = new Date()): boolean {
+  if (!session.expiresOn) return false;
+  const end = new Date(`${session.expiresOn}T23:59:59.999`);
+  return Number.isNaN(end.getTime()) ? false : now.getTime() > end.getTime();
+}
+
+export function sessionState(session: ProofSession, now = new Date()): ProofState {
+  if (isExpired(session, now)) return 'expired';
+  return session.submittedAt ? 'submitted' : 'open';
+}
+
+/** ZIP downloads left, or null for unlimited. */
+export function downloadsRemaining(session: ProofSession): number | null {
+  if (session.downloadLimit === undefined) return null;
+  return Math.max(0, session.downloadLimit - session.downloadsUsed);
+}
+
+/** A 192-bit URL-safe token. */
+export function newToken(): string {
+  return crypto.randomBytes(24).toString('base64url');
+}
+
+const TOKEN_PATTERN = /^[A-Za-z0-9_-]{32}$/;
+
+/** Cheap shape check before any file is read for a token from a URL. */
+export function isTokenShaped(token: string): boolean {
+  return TOKEN_PATTERN.test(token);
+}
+
+/** Input the admin panel may send when creating or editing a session. */
+export const sessionInputSchema = z.object({
+  clientName: z.string().trim().min(1).max(120),
+  albumId: z.string().refine(isUuid, 'Not an Immich album ID'),
+  expiresOn: z
+    .string()
+    .regex(/^\d{4}-\d{2}-\d{2}$/)
+    .nullable()
+    .optional(),
+  download: z.enum(['none', 'selection', 'album']).default('none'),
+  downloadLimit: z.number().int().min(1).max(1000).nullable().optional(),
+});
+
+export type SessionInput = z.infer<typeof sessionInputSchema>;
+
+export const sessionPatchSchema = sessionInputSchema
+  .omit({ albumId: true })
+  .partial()
+  .extend({
+    /** Unlock a submitted selection so the client can change it again. */
+    reopen: z.literal(true).optional(),
+    /** Reset the download counter, e.g. after a failed download. */
+    resetDownloads: z.literal(true).optional(),
+  });
+
+export type SessionPatch = z.infer<typeof sessionPatchSchema>;
+
+// ── Storage ─────────────────────────────────────────────────────────
+
+function storeFile(): string {
+  return path.join(process.cwd(), 'content', 'proofing.json');
+}
+
+async function readStore(): Promise<ProofStore> {
+  let raw: string;
+  try {
+    raw = await fs.readFile(storeFile(), 'utf8');
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') return { sessions: [] };
+    throw err;
+  }
+  // A file that exists but does not parse is not treated as empty: the next
+  // write would replace every session with nothing. Let the caller fail.
+  const parsed = JSON.parse(raw) as Partial<ProofStore>;
+  return { sessions: Array.isArray(parsed.sessions) ? parsed.sessions : [] };
+}
+
+/**
+ * Serialises read-modify-write within this process, like the analytics store:
+ * the atomic rename keeps the file whole, but without the queue two concurrent
+ * saves would each write their own copy and one client's heart would vanish.
+ */
+let writeQueue: Promise<unknown> = Promise.resolve();
+
+function mutate<T>(fn: (store: ProofStore) => T): Promise<T> {
+  const run = writeQueue.then(async () => {
+    const store = await readStore();
+    const result = fn(store);
+    await fs.mkdir(path.dirname(storeFile()), { recursive: true });
+    await atomicWrite(storeFile(), JSON.stringify(store, null, 2), { mode: 0o600 });
+    return result;
+  });
+  // The queue must survive a failed write, or every later save would reject too.
+  writeQueue = run.catch(() => {});
+  return run;
+}
+
+export async function listSessions(): Promise<ProofSession[]> {
+  return (await readStore()).sessions;
+}
+
+export async function getSessionById(id: string): Promise<ProofSession | null> {
+  return (await readStore()).sessions.find((s) => s.id === id) ?? null;
+}
+
+/**
+ * Constant-time token comparison. With 192 random bits a timing attack is not
+ * practical, but the link token is the client's only credential and the
+ * comparison costs nothing to harden.
+ */
+function tokenMatches(stored: string, given: string): boolean {
+  const a = Buffer.from(stored);
+  const b = Buffer.from(given);
+  return a.length === b.length && crypto.timingSafeEqual(a, b);
+}
+
+export async function findSessionByToken(token: string): Promise<ProofSession | null> {
+  if (!isTokenShaped(token)) return null;
+  return (await readStore()).sessions.find((s) => tokenMatches(s.token, token)) ?? null;
+}
+
+export class ProofError extends Error {
+  constructor(
+    public readonly code: 'not-found' | 'expired' | 'submitted' | 'limit' | 'too-many' | 'empty',
+    message: string,
+  ) {
+    super(message);
+  }
+}
+
+export async function createSession(input: SessionInput): Promise<ProofSession> {
+  return mutate((store) => {
+    if (store.sessions.length >= MAX_SESSIONS) {
+      throw new ProofError('too-many', `At most ${MAX_SESSIONS} proofing links can exist.`);
+    }
+    const session: ProofSession = {
+      id: crypto.randomBytes(8).toString('hex'),
+      token: newToken(),
+      clientName: input.clientName,
+      albumId: input.albumId,
+      createdAt: new Date().toISOString(),
+      ...(input.expiresOn ? { expiresOn: input.expiresOn } : {}),
+      download: input.download,
+      ...(input.downloadLimit ? { downloadLimit: input.downloadLimit } : {}),
+      downloadsUsed: 0,
+      selection: [],
+    };
+    store.sessions.push(session);
+    return session;
+  });
+}
+
+export async function updateSession(id: string, patch: SessionPatch): Promise<ProofSession> {
+  return mutate((store) => {
+    const session = store.sessions.find((s) => s.id === id);
+    if (!session) throw new ProofError('not-found', 'No such proofing link.');
+
+    if (patch.clientName !== undefined) session.clientName = patch.clientName;
+    if (patch.download !== undefined) session.download = patch.download;
+    // `null` clears, `undefined` leaves alone.
+    if (patch.expiresOn === null) delete session.expiresOn;
+    else if (patch.expiresOn !== undefined) session.expiresOn = patch.expiresOn;
+    if (patch.downloadLimit === null) delete session.downloadLimit;
+    else if (patch.downloadLimit !== undefined) session.downloadLimit = patch.downloadLimit;
+    if (patch.reopen) delete session.submittedAt;
+    if (patch.resetDownloads) session.downloadsUsed = 0;
+    return session;
+  });
+}
+
+export async function deleteSession(id: string): Promise<void> {
+  await mutate((store) => {
+    const before = store.sessions.length;
+    store.sessions = store.sessions.filter((s) => s.id !== id);
+    if (store.sessions.length === before) {
+      throw new ProofError('not-found', 'No such proofing link.');
+    }
+  });
+}
+
+/** Find the session for a token and refuse anything that may not change. */
+function openSession(store: ProofStore, token: string): ProofSession {
+  const session = isTokenShaped(token)
+    ? store.sessions.find((s) => tokenMatches(s.token, token))
+    : undefined;
+  if (!session) throw new ProofError('not-found', 'No such proofing link.');
+  if (isExpired(session)) throw new ProofError('expired', 'This proofing link has expired.');
+  return session;
+}
+
+/**
+ * Replace the client's selection. The caller has already checked that every ID
+ * belongs to the session's album; this re-checks the session's own state inside
+ * the write lock, so a save racing a submit cannot slip in after it.
+ */
+export async function saveSelection(token: string, assetIds: string[]): Promise<ProofSession> {
+  return mutate((store) => {
+    const session = openSession(store, token);
+    if (session.submittedAt) {
+      throw new ProofError('submitted', 'This selection has already been submitted.');
+    }
+    session.selection = Array.from(new Set(assetIds)).slice(0, MAX_SELECTION);
+    session.updatedAt = new Date().toISOString();
+    return session;
+  });
+}
+
+/**
+ * Lock the selection. Returns the session and whether this call was the one
+ * that submitted it, so a double click notifies the photographer only once.
+ */
+export async function submitSelection(
+  token: string,
+): Promise<{ session: ProofSession; firstSubmit: boolean }> {
+  return mutate((store) => {
+    const session = openSession(store, token);
+    if (session.submittedAt) return { session, firstSubmit: false };
+    // Checked here, under the write lock: a save of an empty selection racing
+    // the submit would otherwise lock nothing and still fire the webhook.
+    if (session.selection.length === 0) throw new ProofError('empty', 'Nothing selected.');
+    session.submittedAt = new Date().toISOString();
+    return { session, firstSubmit: true };
+  });
+}
+
+/** Count one ZIP download against the link's limit, refusing past it. */
+export async function claimDownload(
+  token: string,
+  scope: 'selection' | 'album' = 'selection',
+): Promise<ProofSession> {
+  return mutate((store) => {
+    const session = openSession(store, token);
+    // Re-checked under the lock: the admin may have narrowed the link since
+    // the request read its snapshot.
+    if (session.download === 'none' || (scope === 'album' && session.download !== 'album')) {
+      throw new ProofError('not-found', 'This proofing link offers no downloads.');
+    }
+    if (session.downloadLimit !== undefined && session.downloadsUsed >= session.downloadLimit) {
+      throw new ProofError('limit', 'The download limit for this link has been reached.');
+    }
+    session.downloadsUsed += 1;
+    return session;
+  });
+}
diff --git a/lib/proofWebhook.ts b/lib/proofWebhook.ts
new file mode 100644
index 0000000..da804fd
--- /dev/null
+++ b/lib/proofWebhook.ts
@@ -0,0 +1,105 @@
+/**
+ * Tell the photographer that a client submitted a proofing selection.
+ *
+ * One POST to `PROOFING_WEBHOOK_URL` with a JSON body shaped to be useful to
+ * as many receivers as possible without a per-service setting: Discord reads
+ * `content`, Slack and Mattermost read `text`, Gotify reads `title` and
+ * `message`, and n8n, Home Assistant or a script of your own get the
+ * structured `proofing` object.
+ *
+ * Fire-and-forget by design. A webhook that is down must never turn a client's
+ * submit into an error — the selection is already saved and visible in the
+ * admin panel — so failures are logged and swallowed, and the request is
+ * bounded by a short timeout.
+ */
+
+import type { ProofSession } from './proofSessions';
+
+const WEBHOOK_TIMEOUT_MS = 5000;
+
+export interface ProofWebhookPayload {
+  event: 'proofing.submitted';
+  title: string;
+  message: string;
+  text: string;
+  content: string;
+  proofing: {
+    id: string;
+    clientName: string;
+    albumName: string;
+    selected: number;
+    submittedAt: string;
+    /** The admin page for this session, when a site URL is configured. */
+    adminUrl: string | null;
+  };
+}
+
+export function buildWebhookPayload(
+  session: ProofSession,
+  albumName: string,
+  siteUrl: string | null,
+): ProofWebhookPayload {
+  const count = session.selection.length;
+  const title = `Proofing: ${session.clientName} submitted a selection`;
+  const adminUrl = siteUrl ? `${siteUrl}/admin/proofing?session=${session.id}` : null;
+  const message =
+    `${session.clientName} picked ${count} ${count === 1 ? 'photo' : 'photos'} from "${albumName}".` +
+    (adminUrl ? ` ${adminUrl}` : '');
+  return {
+    event: 'proofing.submitted',
+    title,
+    message,
+    text: `${title}\n${message}`,
+    content: `**${title}**\n${message}`,
+    proofing: {
+      id: session.id,
+      clientName: session.clientName,
+      albumName,
+      selected: count,
+      submittedAt: session.submittedAt ?? new Date().toISOString(),
+      adminUrl,
+    },
+  };
+}
+
+/** Parse PROOFING_WEBHOOK_URL; anything that is not an http(s) URL is ignored. */
+export function webhookUrl(raw = process.env.PROOFING_WEBHOOK_URL): string | null {
+  const value = raw?.trim();
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    return url.protocol === 'https:' || url.protocol === 'http:' ? url.toString() : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function notifySubmitted(
+  session: ProofSession,
+  albumName: string,
+  siteUrl: string | null,
+): Promise<void> {
+  const url = webhookUrl();
+  if (!url) return;
+
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), WEBHOOK_TIMEOUT_MS);
+  try {
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(buildWebhookPayload(session, albumName, siteUrl)),
+      signal: controller.signal,
+    });
+    if (!res.ok) {
+      console.warn(`[Proofing] Webhook answered ${res.status}; the selection is saved regardless.`);
+    }
+  } catch (err) {
+    console.warn(
+      '[Proofing] Webhook failed; the selection is saved regardless:',
+      err instanceof Error ? err.message : err,
+    );
+  } finally {
+    clearTimeout(timer);
+  }
+}
diff --git a/lib/publicPages.ts b/lib/publicPages.ts
index a9ecbd2..1fdce22 100644
--- a/lib/publicPages.ts
+++ b/lib/publicPages.ts
@@ -29,6 +29,15 @@ export interface PublicSubpage {
 export interface PublicJournalEntry {
   slug: string;
   draft: boolean;
+  /** The entry carries a password of its own. */
+  isProtected: boolean;
+}
+
+export interface PublicContentPage {
+  slug: string;
+  draft: boolean;
+  /** The page carries a password of its own. */
+  isProtected: boolean;
 }
 
 export interface SiteShape {
@@ -38,6 +47,8 @@ export interface SiteShape {
   /** Albums that are not part of any subpage. */
   standaloneAlbums: PublicAlbum[];
   journal: PublicJournalEntry[];
+  /** Content pages (#722), in or out of the menu — both are public URLs. */
+  pages?: PublicContentPage[];
   /** Whether an album carries its own password. Keyed by Immich album id. */
   isAlbumProtected: (albumId: string) => boolean;
   aboutEnabled: boolean;
@@ -81,11 +92,19 @@ export function publicPaths(site: SiteShape): string[] {
     paths.push(`/${album.slug}`);
   }
 
+  for (const page of site.pages ?? []) {
+    // A page outside the menu is still a public page; a draft or a locked
+    // one is not, and its title would travel with the URL.
+    if (page.draft || page.isProtected) continue;
+    paths.push(`/${page.slug}`);
+  }
+
   if (site.journalEnabled) {
     for (const entry of site.journal) {
       // Drafts stay visible to the logged-in admin and absent for everyone
-      // else; a listing is "everyone else".
-      if (entry.draft) continue;
+      // else; a listing is "everyone else". A locked entry is left out for
+      // the reason /journal hides it: its URL leads to a gate that names it.
+      if (entry.draft || entry.isProtected) continue;
       paths.push(`/journal/${entry.slug}`);
     }
   }
diff --git a/lib/publishedAssets.ts b/lib/publishedAssets.ts
new file mode 100644
index 0000000..5414959
--- /dev/null
+++ b/lib/publishedAssets.ts
@@ -0,0 +1,252 @@
+/**
+ * The set of Immich assets the public site currently shows somewhere.
+ *
+ * Asset tokens are deterministic, so a media URL that was ever served stays
+ * decodable. Without a membership check, /api/image, /api/video and /api/exif
+ * kept streaming an asset after its album was unpublished or a proofing link
+ * was revoked (GHSA-gfh4-6275-9gqv). The media routes now ask this module.
+ *
+ * What counts as published — every source that turns an asset ID into a
+ * public URL:
+ *   - the assets and thumbnail of every standalone album and every album of
+ *     an enabled subpage; a subpage taken offline with `enabled: false` keeps
+ *     its albums on the allowlist, but publishes nothing
+ *   - the homepage hero list, and the hero image of each album above
+ *   - the about.md portrait
+ *   - every journal entry: cover, photo blocks, and the assets of its album
+ *     blocks (drafts and locked entries included: their page gate still hides
+ *     them, and the tokens cannot be guessed)
+ *   - every content page (#722): photo blocks and the assets of its album
+ *     blocks, drafts and locked pages included for the same reason; its map
+ *     blocks are not rendered, so their photos do not count
+ *   - album blocks in an enabled subpage's inline essayText
+ *   - the album of every open (unexpired) proofing link
+ *
+ * Built lazily, cached for CACHE_TTL, one build shared by concurrent callers.
+ * The admin routes run in their own module instances, so a save cannot reach
+ * this cache directly. Instead the set remembers the modification times of
+ * the content files it was built from and rebuilds as soon as one changes —
+ * so unpublishing an album or revoking a proofing link takes effect at once,
+ * not after the TTL. A miss also forces one rebuild before answering "no".
+ *
+ * "At once" means: every answer comes from a set whose build began after the
+ * request looked at the files. The files are stat'ed on every request (they
+ * used to be checked at most every 2 s, and a request in that window was
+ * answered — `immutable` — from the set before the save), and a build reads
+ * the stamp before the content, so a save racing a build leaves the set
+ * stamped older than the files instead of newer.
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import yaml from 'js-yaml';
+import { getConfig } from './config';
+import { onlineAlbumIds } from './config/schema';
+import { immich } from './immich';
+import { collectAssetIds, parseJournalMarkdown, type JournalBlock } from './journal';
+import { listJournalEntries, readJournalEntry } from './admin/journal-service';
+import { listPages, readPage } from './admin/pages-service';
+import { isExpired, listSessions } from './proofSessions';
+
+/** A forced rebuild on a miss at most this often, so misses cannot hammer Immich. */
+const MIN_REBUILD_MS = 10_000;
+
+const CONTENT = path.join(process.cwd(), 'content');
+const WATCHED = [
+  'gallery.yaml',
+  'settings.yaml',
+  'about.md',
+  'proofing.json',
+  'journal',
+  'essays',
+  'pages',
+];
+
+let current: { assets: Set<string>; builtAt: number; stamp: string; startedAt: number } | null =
+  null;
+let building: Promise<Set<string>> | null = null;
+let lastForcedAt = 0;
+/**
+ * Orders file checks and build starts. A set whose `startedAt` is above a
+ * request's check read the files after that request did, and so answers for
+ * it whatever the stamps say.
+ */
+let clock = 0;
+
+function albumBlockIds(blocks: readonly JournalBlock[]): string[] {
+  return blocks.flatMap((b) => (b.type === 'album' && b.albumId ? [b.albumId] : []));
+}
+
+async function aboutPortrait(): Promise<string | null> {
+  try {
+    const raw = await fs.readFile(path.join(process.cwd(), 'content', 'about.md'), 'utf-8');
+    const match = raw.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+    const meta = match ? (yaml.load(match[1]) as { portrait?: unknown } | null) : null;
+    return typeof meta?.portrait === 'string' ? meta.portrait : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Modification times of everything the set is built from. */
+async function contentStamp(): Promise<string> {
+  const times = await Promise.all(
+    WATCHED.map((name) =>
+      fs.stat(path.join(CONTENT, name)).then(
+        (st) => st.mtimeMs,
+        () => 0,
+      ),
+    ),
+  );
+  return times.join(':');
+}
+
+async function build(): Promise<Set<string>> {
+  const config = getConfig();
+  const assets = new Set<string>();
+  const add = (id: string | null | undefined) => {
+    if (id) assets.add(id);
+  };
+  const rawAlbums = new Set<string>();
+  const online = onlineAlbumIds(config);
+
+  // Published albums. A failing album must not empty the whole set.
+  await Promise.all(
+    [...online].map(async (id) => {
+      const album = await immich.getAlbum(id).catch(() => null);
+      if (!album) return;
+      add(album.albumThumbnailAssetId);
+      for (const a of album.assets) add(a.id);
+    }),
+  );
+
+  config.heroImages.forEach(add);
+  for (const [albumId, assetId] of Object.entries(config.albumHeroImages)) {
+    if (online.has(albumId)) add(assetId);
+  }
+  add(await aboutPortrait());
+
+  // Journal entries, including drafts and locked ones (see above).
+  const entries = await listJournalEntries().catch(() => []);
+  await Promise.all(
+    entries.map(async (entry) => {
+      const read = await readJournalEntry(entry.slug).catch(() => null);
+      if (!read) return;
+      add(read.parsed.frontmatter.coverAssetId);
+      collectAssetIds(read.parsed.blocks).forEach(add);
+      albumBlockIds(read.parsed.blocks).forEach((id) => rawAlbums.add(id));
+    }),
+  );
+
+  // Content pages, drafts and locked ones included. Map blocks are dropped
+  // before a page renders, so their photos are not published through it.
+  const pages = await listPages().catch(() => []);
+  await Promise.all(
+    pages.map(async (page) => {
+      const read = await readPage(page.slug).catch(() => null);
+      if (!read) return;
+      const blocks = read.parsed.blocks.filter((b) => b.type !== 'map');
+      collectAssetIds(blocks).forEach(add);
+      albumBlockIds(blocks).forEach((id) => rawAlbums.add(id));
+    }),
+  );
+
+  // Inline essays in gallery.yaml: only their album blocks add assets; a photo
+  // block outside the subpage's albums is dropped before it becomes a URL.
+  for (const sp of config.subpages) {
+    if (sp.enabled !== false && sp.essayText) {
+      albumBlockIds(parseJournalMarkdown(sp.essayText).blocks).forEach((id) => rawAlbums.add(id));
+    }
+  }
+
+  // Open proofing links. Their albums are usually not published.
+  const sessions = await listSessions().catch(() => []);
+  const proofAlbums = new Set(sessions.filter((s) => !isExpired(s)).map((s) => s.albumId));
+  await Promise.all(
+    [...proofAlbums].map(async (id) => {
+      const album = await immich.getProofingAlbum(id).catch(() => null);
+      for (const a of album?.assets ?? []) add(a.id);
+    }),
+  );
+
+  await Promise.all(
+    [...rawAlbums].map(async (id) => {
+      const list = await immich.getAlbumAssetsRaw(id).catch(() => []);
+      for (const a of list) add(a.id);
+    }),
+  );
+
+  return assets;
+}
+
+function rebuild(): Promise<Set<string>> {
+  if (!building) {
+    const startedAt = ++clock;
+    // Stamp first, content second: a save landing mid-build then leaves the
+    // set stamped older than the files, and the next check rebuilds. Read in
+    // parallel, the stamp could come back newer than the content it labels.
+    building = contentStamp()
+      .then(async (stamp) => {
+        const assets = await build();
+        current = { assets, builtAt: Date.now(), stamp, startedAt };
+        return assets;
+      })
+      .finally(() => {
+        building = null;
+      });
+  }
+  return building;
+}
+
+/**
+ * Whether the public site currently shows this asset anywhere.
+ *
+ * Fails open when the set cannot be built at all (Immich down on a cold
+ * start): refusing every photo would take the site down, and the tokens are
+ * unguessable either way. Once built, a stale set is kept through outages.
+ */
+export async function isPublishedAsset(assetId: string): Promise<boolean> {
+  const ttlMs = getConfig().cacheTtl * 1000;
+  try {
+    const checkedAt = ++clock;
+    const stamp = await contentStamp();
+    const stale = () =>
+      !current ||
+      Date.now() - current.builtAt > ttlMs ||
+      (current.stamp !== stamp && current.startedAt < checkedAt);
+    // Twice at most: the first rebuild may join a build that started before
+    // this check; any build started after that one finished is recent enough.
+    for (let i = 0; i < 2 && stale(); i++) await rebuild();
+  } catch {
+    if (!current) return true;
+  }
+  if (current!.assets.has(assetId)) return true;
+
+  // Not in the set: it may have been published since the last build. A miss
+  // while a rebuild is running waits for it — the first view of a new album is
+  // a burst of misses, and refusing all but the one that started the rebuild
+  // broke most of its photos. Only with nothing running does the throttle
+  // decide whether a miss may start one.
+  if (!building) {
+    if (Date.now() - lastForcedAt < MIN_REBUILD_MS) return false;
+    lastForcedAt = Date.now();
+  }
+  try {
+    return (await rebuild()).has(assetId);
+  } catch {
+    return false;
+  }
+}
+
+/** Drop the cached set, e.g. after a save that publishes or unpublishes photos. */
+export function invalidatePublishedAssets(): void {
+  current = null;
+}
+
+/** Test hook. */
+export function resetPublishedAssetsForTest(): void {
+  current = null;
+  building = null;
+  lastForcedAt = 0;
+  clock = 0;
+}
diff --git a/lib/requestBody.ts b/lib/requestBody.ts
new file mode 100644
index 0000000..f2bbd43
--- /dev/null
+++ b/lib/requestBody.ts
@@ -0,0 +1,59 @@
+/**
+ * Request bodies read with a hard size cap.
+ *
+ * `request.json()` parses the whole body before anything can object, which is
+ * the one place an unbounded payload could land. These read the stream by
+ * hand and stop the moment the cap is passed, so a chunked body is capped too.
+ */
+
+import type { NextRequest } from 'next/server';
+
+/**
+ * Read a request body as raw bytes, aborting once it exceeds `limit` bytes.
+ * Null when the cap is passed. For callers that need the exact bytes on the
+ * wire, such as an HMAC over the body.
+ */
+export async function readBytesCapped(request: NextRequest, limit: number): Promise<Buffer | null> {
+  const stream = request.body;
+  if (!stream) return Buffer.alloc(0);
+
+  const reader = stream.getReader();
+  const chunks: Uint8Array[] = [];
+  let bytes = 0;
+  try {
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      bytes += value.byteLength;
+      if (bytes > limit) {
+        await reader.cancel();
+        return null;
+      }
+      chunks.push(value);
+    }
+    return Buffer.concat(chunks, bytes);
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+/** Read a request body as text, aborting once it exceeds `limit` bytes. */
+export async function readBodyCapped(request: NextRequest, limit: number): Promise<string | null> {
+  const bytes = await readBytesCapped(request, limit);
+  return bytes === null ? null : new TextDecoder().decode(bytes);
+}
+
+/**
+ * Read a JSON body of at most `limit` bytes. Null for an oversized, empty or
+ * unparseable body — the caller answers 400 either way.
+ */
+export async function readJsonCapped(request: NextRequest, limit: number): Promise<unknown> {
+  const declared = Number(request.headers.get('content-length') ?? '');
+  if (Number.isFinite(declared) && declared > limit) return null;
+  try {
+    const text = await readBodyCapped(request, limit);
+    return text ? JSON.parse(text) : null;
+  } catch {
+    return null;
+  }
+}
diff --git a/lib/siteNav.server.ts b/lib/siteNav.server.ts
new file mode 100644
index 0000000..712201c
--- /dev/null
+++ b/lib/siteNav.server.ts
@@ -0,0 +1,38 @@
+/**
+ * Server-side loader for `siteNavLinks()` — fetches subpages, albums, pages
+ * and journal entries. Server only (pulls in `fs` via the services).
+ *
+ * Memoised per request with React's `cache()`: the root layout's header nav
+ * and the home page's hero nav both ask for it in one render, and the journal
+ * listing is shared with the journal pages (`lib/journal.server.ts`).
+ */
+
+import { cache } from 'react';
+import { immich } from './immich';
+import { getConfig } from './config';
+import { listJournalEntriesForRequest } from './journal.server';
+import { listPages } from './admin/pages-service';
+import { resolveMenu } from './pages';
+import { getServerDictionary } from './i18n/server';
+import { siteNavLinks, type SiteNavLink } from './siteNav';
+
+export const loadSiteNav = cache(async function loadSiteNav(): Promise<SiteNavLink[]> {
+  const [subpages, albums, journalEntries, pages] = await Promise.all([
+    immich.getSubpages(),
+    immich.getStandaloneAlbums(),
+    listJournalEntriesForRequest().catch(() => []),
+    listPages().catch(() => []),
+  ]);
+  const config = getConfig();
+  return siteNavLinks(
+    {
+      menu: resolveMenu(config.nav, subpages, pages),
+      subpageAlbumCounts: new Map(subpages.map((sp) => [sp.slug, sp.albumCount])),
+      albums,
+      hasJournal: journalEntries.some((e) => !e.frontmatter.draft),
+      aboutEnabled: config.aboutEnabled,
+      map: config.map,
+    },
+    getServerDictionary(),
+  );
+});
diff --git a/lib/siteNav.ts b/lib/siteNav.ts
new file mode 100644
index 0000000..6d03858
--- /dev/null
+++ b/lib/siteNav.ts
@@ -0,0 +1,52 @@
+/**
+ * The site's navigation entries, in the one order the header and the home
+ * page hero share (#696): subpages and content pages (gallery.yaml order),
+ * standalone albums, Journal, About, Map.
+ *
+ * Client-safe: callers do the fetching and pass the results in.
+ */
+
+import type { Dictionary } from './i18n';
+import type { MenuItem } from './pages';
+
+export interface SiteNavLink {
+  key: string;
+  href: string;
+  label: string;
+  /** "3 albums" / "12 photos" — only the hero shows it, and only presets that want it. */
+  count?: string;
+}
+
+export interface SiteNavInput {
+  /** Subpages and content pages, from `resolveMenu()`. */
+  menu: readonly MenuItem[];
+  /** Album count per subpage slug, for the hero's count line. */
+  subpageAlbumCounts?: ReadonlyMap<string, number>;
+  albums: ReadonlyArray<{ id: string; slug: string; albumName: string; assetCount?: number }>;
+  /** At least one published (non-draft) journal entry. */
+  hasJournal: boolean;
+  aboutEnabled: boolean;
+  map: boolean;
+}
+
+export function siteNavLinks(input: SiteNavInput, t: Dictionary): SiteNavLink[] {
+  const links: SiteNavLink[] = input.menu.map((item) => {
+    const n = input.subpageAlbumCounts?.get(item.href.slice(1));
+    return {
+      ...item,
+      ...(item.key.startsWith('sp-') && n !== undefined ? { count: t.common.albums(n) } : {}),
+    };
+  });
+  for (const a of input.albums) {
+    links.push({
+      key: `al-${a.id}`,
+      href: `/${a.slug}`,
+      label: a.albumName,
+      ...(a.assetCount !== undefined ? { count: t.common.photos(a.assetCount) } : {}),
+    });
+  }
+  if (input.hasJournal) links.push({ key: 'journal', href: '/journal', label: t.nav.journal });
+  if (input.aboutEnabled) links.push({ key: 'about', href: '/about', label: t.nav.about });
+  if (input.map) links.push({ key: 'map', href: '/map', label: t.nav.map });
+  return links;
+}
diff --git a/lib/siteShape.ts b/lib/siteShape.ts
index 285237c..d47fa8e 100644
--- a/lib/siteShape.ts
+++ b/lib/siteShape.ts
@@ -10,6 +10,7 @@ import { getConfig } from './config';
 import { immich } from './immich';
 import { isProtected, isSiteLocked } from './auth';
 import { listJournalEntries } from './admin/journal-service';
+import { listPages } from './admin/pages-service';
 import type { SiteShape, PublicAlbum } from './publicPages';
 
 export async function buildSiteShape(): Promise<SiteShape> {
@@ -26,6 +27,7 @@ export async function buildSiteShape(): Promise<SiteShape> {
       .map((album) => ({ id: album.id, slug: album.slug }));
 
   const journal = await listJournalEntries().catch(() => []);
+  const pages = await listPages().catch(() => []);
 
   return {
     siteLocked: isSiteLocked(),
@@ -40,6 +42,12 @@ export async function buildSiteShape(): Promise<SiteShape> {
     journal: journal.map((entry) => ({
       slug: entry.slug,
       draft: entry.frontmatter.draft === true,
+      isProtected: !!entry.frontmatter.password,
+    })),
+    pages: pages.map((page) => ({
+      slug: page.slug,
+      draft: page.frontmatter.draft === true,
+      isProtected: !!page.frontmatter.password,
     })),
     isAlbumProtected: (albumId) => isProtected(albumId, 'album'),
     aboutEnabled: config.aboutEnabled,
diff --git a/lib/zipArchive.ts b/lib/zipArchive.ts
new file mode 100644
index 0000000..604cde6
--- /dev/null
+++ b/lib/zipArchive.ts
@@ -0,0 +1,474 @@
+/**
+ * ZIP-of-originals streaming and the refusal page downloads answer with.
+ *
+ * Shared by the album archive route (/api/download/[album]/archive) and the
+ * client proofing download (/api/proof/[token]/archive), which authorise
+ * differently but must stream and refuse identically.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { Readable } from 'node:stream';
+import archiver from 'archiver';
+import { immich, type ImmichAsset } from '@/lib/immich';
+import { contentDisposition, safeDownloadName } from '@/lib/downloadName';
+import { getClientIp } from '@/lib/rate-limit';
+import { getDictionary } from '@/lib/i18n';
+import { getLocale, getServerDictionary } from '@/lib/i18n/server';
+import { getConfigOrNull } from '@/lib/config';
+import { accentForMode, resolveTheme } from '@/lib/config/theme';
+import { env } from '@/lib/env';
+
+/** Escape a value interpolated into the refusal page. */
+function escapeHtml(value: string): string {
+  return value.replace(/[&<>"']/g, (char) =>
+    char === '&'
+      ? '&amp;'
+      : char === '<'
+        ? '&lt;'
+        : char === '>'
+          ? '&gt;'
+          : char === '"'
+            ? '&quot;'
+            : '&#39;',
+  );
+}
+
+/**
+ * A refusal, rendered for whoever asked.
+ *
+ * A download begins as a navigation — the header link, or the proofing modal's
+ * form POST — and only a success carries `Content-Disposition: attachment`. A
+ * bare JSON body would therefore replace the gallery with
+ * `{"error":"Too many requests"}` on a rate limit, which is the likely failure
+ * (5 rpm, and the ZIP shows nothing until the first byte, so people click
+ * again). Browsers get a page with a way back; callers asking for JSON keep it.
+ *
+ * The page speaks the site's language; the JSON stays English, like every other
+ * API error.
+ */
+export function refusal(
+  request: NextRequest,
+  status: number,
+  reason: RefusalReason,
+  retryAfter?: number,
+): NextResponse {
+  const headers: Record<string, string> = { 'Cache-Control': 'no-store' };
+  if (retryAfter) headers['Retry-After'] = String(retryAfter);
+
+  if (!(request.headers.get('accept') ?? '').includes('text/html')) {
+    return NextResponse.json({ error: getDictionary('en').download[reason] }, { status, headers });
+  }
+
+  const t = getServerDictionary().download;
+  headers['Content-Type'] = 'text/html; charset=utf-8';
+  // Route handlers are outside proxy.ts, so this page gets no site policy. It
+  // needs nothing but its own inline <style>: no script, no image, no form.
+  headers['Content-Security-Policy'] =
+    "default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'";
+  return new NextResponse(
+    `<!doctype html><html lang="${getLocale()}"><head><meta charset="utf-8">` +
+      '<meta name="viewport" content="width=device-width, initial-scale=1">' +
+      `<title>${escapeHtml(t.unavailableTitle)}</title><style>${refusalCss()}</style></head>` +
+      `<body><main><h1>${escapeHtml(t.unavailableTitle)}</h1>` +
+      `<p>${escapeHtml(t[reason])}</p>` +
+      `<p><a href="${escapeHtml(backHref(request))}">${escapeHtml(t.back)}</a></p>` +
+      '</main></body></html>',
+    { status, headers },
+  );
+}
+
+type Palette = { bg: string; text: string; muted: string };
+
+/**
+ * Each preset's `--bg-primary`, `--text-primary` and `--text-secondary` per
+ * colour mode, as app/tokens.css defines them (`default` is its `:root` and
+ * `[data-theme='light']`, which `studio` uses unchanged). The stylesheets are
+ * bundled into hashed chunks a route handler cannot name, so the values are
+ * repeated here; lib/__tests__/refusal-palette.test.ts fails when they drift.
+ * The accent comes from the configured theme.
+ */
+export const REFUSAL_PALETTES: Record<string, { dark: Palette; light: Palette }> = {
+  default: {
+    dark: { bg: '#1a1a1a', text: '#f5f5f0', muted: '#a0a09a' },
+    light: { bg: '#f5f5f0', text: '#1a1a18', muted: '#4a4a45' },
+  },
+  'studio-modern': {
+    dark: { bg: '#121212', text: '#f4f4f2', muted: '#9c9c96' },
+    light: { bg: '#fafaf8', text: '#161614', muted: '#5a5a55' },
+  },
+  minimal: {
+    dark: { bg: '#000000', text: '#ffffff', muted: '#9e9e9e' },
+    light: { bg: '#ffffff', text: '#000000', muted: '#475569' },
+  },
+  editorial: {
+    dark: { bg: '#1a1714', text: '#ede8e0', muted: '#9a9086' },
+    light: { bg: '#faf8f4', text: '#1a1714', muted: '#4a4540' },
+  },
+  classic: {
+    dark: { bg: '#121210', text: '#f0ece4', muted: '#a09888' },
+    light: { bg: '#fdfbf5', text: '#1a1810', muted: '#4a4535' },
+  },
+  noir: {
+    dark: { bg: '#111014', text: '#f0ebe0', muted: '#998f80' },
+    light: { bg: '#faf5ef', text: '#1a1610', muted: '#4a4538' },
+  },
+  monograph: {
+    dark: { bg: '#151515', text: '#e8e8e8', muted: '#a5a5a5' },
+    light: { bg: '#fafafa', text: '#111111', muted: '#475569' },
+  },
+};
+
+const HEX_COLOUR = /^#[0-9a-f]{3,8}$/i;
+
+/**
+ * The refusal page's stylesheet, in the site's colour mode and accent, so a
+ * visitor bounced from a dark gallery does not land on a white system page.
+ * `auto` follows the visitor's OS, as the site does before its script runs.
+ */
+function refusalCss(): string {
+  const config = getConfigOrNull();
+  const theme = config?.theme ?? resolveTheme();
+  const mode = config?.colorMode ?? 'dark';
+  const palette = REFUSAL_PALETTES[theme.preset] ?? REFUSAL_PALETTES.default;
+  const vars = (m: 'dark' | 'light') => {
+    const c = palette[m];
+    const accent = accentForMode(theme, m);
+    return (
+      `color-scheme:${m};--bg:${c.bg};--text:${c.text};--muted:${c.muted};` +
+      `--accent:${HEX_COLOUR.test(accent) ? accent : c.text}`
+    );
+  };
+  const base =
+    'body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;' +
+    'padding:0 1.5rem;box-sizing:border-box;background:var(--bg);color:var(--text);' +
+    'font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}' +
+    'main{max-width:32rem}h1{font-size:1.25rem;font-weight:500;margin:0 0 .75rem}' +
+    'p{margin:0 0 1rem;color:var(--muted)}' +
+    'a{color:var(--text);text-decoration-color:var(--accent);' +
+    'text-decoration-thickness:2px;text-underline-offset:.25em}';
+  const root =
+    mode === 'auto'
+      ? `:root{${vars('dark')}}@media (prefers-color-scheme: light){:root{${vars('light')}}}`
+      : `:root{${vars(mode)}}`;
+  return root + base;
+}
+
+export type RefusalReason = 'notAvailable' | 'rateLimited' | 'immichUnavailable' | 'limitReached';
+
+/**
+ * Where the refusal page's link leads: the page the download was started from,
+ * so a visitor lands back on the album rather than the home page. Only a
+ * same-origin `Referer` is followed, and only its path — anything else would
+ * turn this page into an open redirect with our name on it.
+ *
+ * "Same origin" is judged by the host the visitor addressed. It used to be
+ * `request.nextUrl.origin`, which Next rebuilds from its own bind address —
+ * `localhost` behind `-H 127.0.0.1` or a reverse proxy — so no real Referer
+ * ever matched and the link always led home.
+ */
+function backHref(request: NextRequest): string {
+  const referer = request.headers.get('referer');
+  if (!referer) return '/';
+  try {
+    const url = new URL(referer);
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') return '/';
+    if (!requestHosts(request).has(url.host.toLowerCase())) return '/';
+    // `//evil.example/x` is a path to URL, but a host to the browser.
+    if (url.pathname.startsWith('//')) return '/';
+    return `${url.pathname}${url.search}`;
+  } catch {
+    return '/';
+  }
+}
+
+/**
+ * The hosts this request may have been addressed to: the `Host` header and,
+ * only with `TRUSTED_PROXY_HOPS` set (the same trust lib/rate-limit.ts needs),
+ * the proxy's `X-Forwarded-Host`. A forged header can at most make a Referer
+ * match; the link that results is still a path on this site.
+ */
+function requestHosts(request: NextRequest): Set<string> {
+  const hosts = new Set<string>([request.nextUrl.host.toLowerCase()]);
+  const host = request.headers.get('host');
+  if (host) hosts.add(host.trim().toLowerCase());
+  if (env.TRUSTED_PROXY_HOPS > 0) {
+    for (const h of (request.headers.get('x-forwarded-host') ?? '').split(',')) {
+      if (h.trim()) hosts.add(h.trim().toLowerCase());
+    }
+  }
+  return hosts;
+}
+
+/**
+ * A unique, ZIP-safe entry name. Originals can collide ("IMG_0001.jpg" from two
+ * cards), and a ZIP with duplicate entry names is ambiguous to unzip.
+ */
+function uniqueEntryName(raw: string | undefined, used: Set<string>): string {
+  const base = safeDownloadName(raw);
+  let name = base;
+  let n = 2;
+  while (used.has(name)) {
+    const dot = base.lastIndexOf('.');
+    name = dot > 0 ? `${base.slice(0, dot)}-${n}${base.slice(dot)}` : `${base}-${n}`;
+    n++;
+  }
+  used.add(name);
+  return name;
+}
+
+/**
+ * Append one entry, resolving once it has been written (or the archive has been
+ * torn down because the visitor left).
+ *
+ * archiver processes entries strictly one at a time — that is what keeps memory
+ * flat — but `append()` only *queues* them. Firing every `append` up front (and
+ * so opening every upstream request at once) is what made a large album's later
+ * originals sit long enough to time out and truncate the ZIP. Awaiting the
+ * `entry` event holds the loop until the previous file has finished, so only
+ * one original is ever in flight. `close` resolves too, so an aborted download
+ * stops the loop rather than hanging on a file nothing will read.
+ *
+ * On `close` and `error` the source is destroyed as well. archiver does not do
+ * that for a queued or half-read entry, and the upstream body would otherwise
+ * hold its socket out of undici's pool until GC finalises it (#635).
+ */
+function appendEntry(archive: archiver.Archiver, source: Readable, name: string): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    const cleanup = () => {
+      archive.off('entry', onEntry);
+      archive.off('error', onError);
+      archive.off('close', onClose);
+    };
+    const onEntry = () => {
+      cleanup();
+      resolve();
+    };
+    // `close` fires when the response is consumed or aborted. Resolving on it
+    // lets the loop see `archive.destroyed` and stop, rather than hanging on a
+    // file nothing will read.
+    const onClose = () => {
+      cleanup();
+      source.destroy();
+      resolve();
+    };
+    const onError = (error: Error) => {
+      cleanup();
+      source.destroy();
+      reject(error);
+    };
+    archive.once('entry', onEntry);
+    archive.once('error', onError);
+    archive.once('close', onClose);
+    archive.append(source, { name });
+  });
+}
+
+/**
+ * Archives one client may have open at the same time, the album archive and
+ * the proofing archive counted together.
+ *
+ * The 5-per-minute rate limit bounds how often an archive starts, not how long
+ * it lives. Each open archive holds an Immich socket and a few MB of buffers
+ * for as long as the client keeps its connection, so a client that reads
+ * slowly could otherwise stack them up minute after minute. Two leaves room
+ * for the proofing modal's selection and album ZIPs side by side.
+ */
+export const MAX_CONCURRENT_ARCHIVES = 2;
+
+/** `Retry-After` for a refusal at the concurrency cap. */
+const ARCHIVE_SLOT_RETRY_AFTER = 30;
+
+/**
+ * How long an archive waits for the client to take the next bytes before it
+ * is torn down, upstream Immich stream included.
+ *
+ * Counted from the last pull, and only while data is waiting for the client: a
+ * slow download that keeps reading never trips it, and neither does a slow
+ * Immich (the pull is then still pending, and the upstream request has its own
+ * timeouts). It is needed because backpressure pauses undici's body timeout,
+ * so a client that stopped reading kept the archive and its Immich socket for
+ * as long as it held the TCP connection open.
+ */
+export const ARCHIVE_STALL_TIMEOUT_MS = 60_000;
+
+/** Open archives per client IP. An entry is removed when it drops to 0. */
+const inFlight = new Map<string, number>();
+
+/**
+ * Take one of the client's archive slots. Returns the release function (safe
+ * to call more than once), or `null` when the client is at the cap.
+ */
+function acquireArchiveSlot(ip: string): (() => void) | null {
+  const current = inFlight.get(ip) ?? 0;
+  if (current >= MAX_CONCURRENT_ARCHIVES) return null;
+  inFlight.set(ip, current + 1);
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    const remaining = (inFlight.get(ip) ?? 1) - 1;
+    if (remaining > 0) inFlight.set(ip, remaining);
+    else inFlight.delete(ip);
+  };
+}
+
+/** Test seam: archives currently holding a slot for `ip`. */
+export function __archivesInFlight(ip: string): number {
+  return inFlight.get(ip) ?? 0;
+}
+
+export type ArchiveStreamer = (albumName: string, assets: ImmichAsset[]) => Response;
+
+/**
+ * Run an archive route's handler inside one of the client's archive slots.
+ *
+ * The slot is taken before the handler runs, so before any Immich request, and
+ * a client that already has `MAX_CONCURRENT_ARCHIVES` open gets a 429. The
+ * handler receives a `stream` function to use instead of `streamArchive`: an
+ * archive started through it owns the slot and gives it back when it ends,
+ * fails, is cancelled or stalls. If the handler answers any other way (a
+ * refusal, a throw), the slot is given back here.
+ *
+ * The client key is `getClientIp()`, so it honours `TRUSTED_PROXY_HOPS` like
+ * the rate limiter.
+ */
+export async function withArchiveSlot(
+  request: NextRequest,
+  handler: (stream: ArchiveStreamer) => Promise<Response>,
+): Promise<Response> {
+  const release = acquireArchiveSlot(getClientIp(request));
+  if (!release) return refusal(request, 429, 'rateLimited', ARCHIVE_SLOT_RETRY_AFTER);
+
+  let handedOver = false;
+  try {
+    return await handler((albumName, assets) => {
+      const response = streamArchive(albumName, assets, release);
+      handedOver = true;
+      return response;
+    });
+  } finally {
+    if (!handedOver) release();
+  }
+}
+
+/**
+ * Stream `assets` as a ZIP of originals.
+ *
+ * archiver writes data descriptors, so entry sizes are never known up front and
+ * memory stays flat no matter how large the album is. The loop pulls one
+ * original at a time and stops as soon as the response is gone.
+ *
+ * `onDone` runs exactly once, when the archive has been read to the end,
+ * failed, been cancelled or stalled; `withArchiveSlot` hands its slot release
+ * in here.
+ */
+export function streamArchive(
+  albumName: string,
+  assets: ImmichAsset[],
+  onDone: () => void = () => {},
+): NextResponse {
+  const archive = archiver('zip', { store: true });
+  archive.on('error', (err) => {
+    // A visitor cancelling the download is not a failure worth a log line.
+    if (err.name === 'AbortError') return;
+    console.error(`[Download] Archive stream failed:`, err);
+  });
+
+  let stallTimer: ReturnType<typeof setTimeout> | undefined;
+  let done = false;
+  const finish = () => {
+    clearTimeout(stallTimer);
+    if (done) return;
+    done = true;
+    onDone();
+  };
+  // Every way an archive ends passes through `close`: read to the end,
+  // destroyed by an error, by a cancel, or by the stall timer below.
+  archive.once('close', finish);
+
+  // A pull-based body rather than `Readable.toWeb()`: `pull` runs only once
+  // the client has taken what was queued, which is the signal the stall timer
+  // needs. The queue holds a single chunk; archiver's own buffer and
+  // backpressure do the rest, as before.
+  const chunks = archive[Symbol.asyncIterator]() as AsyncIterator<Buffer>;
+  const body = new ReadableStream<Uint8Array>(
+    {
+      async pull(controller) {
+        clearTimeout(stallTimer);
+        try {
+          const next = await chunks.next();
+          if (next.done) {
+            controller.close();
+            finish();
+            return;
+          }
+          // A Buffer is a Uint8Array: handed on as is, not copied.
+          controller.enqueue(next.value);
+        } catch (err) {
+          // Also reached when a cancel won the race: erroring a cancelled
+          // stream is a no-op.
+          controller.error(err);
+          finish();
+          return;
+        }
+        if (done) return;
+        // The chunk is queued; the next move is the client's.
+        stallTimer = setTimeout(() => {
+          console.warn(
+            `[Download] Archive closed: nothing read for ${ARCHIVE_STALL_TIMEOUT_MS / 1000}s`,
+          );
+          controller.error(new Error('Archive download stalled'));
+          // Destroys the entry in flight and with it the upstream body
+          // (appendEntry), and stops the fill loop.
+          archive.destroy();
+          finish();
+        }, ARCHIVE_STALL_TIMEOUT_MS);
+        stallTimer.unref?.();
+      },
+      cancel() {
+        // The visitor left: tear the archive down, upstream body included.
+        archive.destroy();
+        finish();
+      },
+    },
+    { highWaterMark: 1 },
+  );
+
+  // Fill the archive in the background: the response has to go out first so the
+  // browser starts reading, and each originals fetch is awaited in turn.
+  void (async () => {
+    try {
+      const used = new Set<string>();
+      for (const asset of assets) {
+        // The visitor left (or the archive failed): stop pulling originals.
+        if (archive.destroyed) break;
+        const result = await immich.streamAsset(asset.id, 'original');
+        if (!result) continue;
+        if (archive.destroyed) {
+          // Left while the headers were on their way: release the body unread.
+          await result.stream.cancel();
+          break;
+        }
+        const nodeStream = Readable.fromWeb(
+          result.stream as unknown as import('node:stream/web').ReadableStream,
+        );
+        await appendEntry(archive, nodeStream, uniqueEntryName(asset.originalFileName, used));
+      }
+      if (!archive.destroyed) await archive.finalize();
+    } catch (err) {
+      archive.destroy(err instanceof Error ? err : new Error(String(err)));
+    }
+  })();
+
+  const zipName = `${safeDownloadName(albumName, 'album')}.zip`;
+  return new NextResponse(body, {
+    headers: {
+      'Content-Type': 'application/zip',
+      'Content-Disposition': contentDisposition(zipName),
+      // Private: authorised per visitor, so a shared cache must not hand the
+      // archive to the next one.
+      'Cache-Control': 'private, no-store',
+      'X-Content-Type-Options': 'nosniff',
+    },
+  });
+}
diff --git a/package-lock.json b/package-lock.json
index 285867a..1f37727 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "immich-folio",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "immich-folio",
-      "version": "0.18.1",
+      "version": "0.19.0",
       "license": "MIT",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
diff --git a/package.json b/package.json
index fc8c5de..194bf32 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "immich-folio",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "license": "MIT",
   "scripts": {
     "dev": "next dev",
diff --git a/proxy.ts b/proxy.ts
index fc5009b..d0c7ab6 100644
--- a/proxy.ts
+++ b/proxy.ts
@@ -62,6 +62,26 @@ function siteGate(request: NextRequest): NextResponse | null {
   return NextResponse.rewrite(new URL(GATE_PATH, request.url));
 }
 
+/**
+ * The first segments that belong to a fixed route under app/ rather than to
+ * the app/[...path] catch-all. A deep path below one of these is either served
+ * by that route or answered 404 by Next itself, so isKnownMissing() leaves it
+ * alone. lib/__tests__/proxy.test.ts holds this list to the app/ directory.
+ */
+export const TOP_LEVEL_ROUTES: ReadonlySet<string> = new Set([
+  'about',
+  'admin',
+  'api',
+  'contact',
+  'gate',
+  'impressum',
+  'install',
+  'journal',
+  'map',
+  'privacy',
+  'proof',
+]);
+
 /**
  * Pages that are known not to exist before anything renders.
  *
@@ -71,6 +91,10 @@ function siteGate(request: NextRequest): NextResponse | null {
  * 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.
+ *
+ * The same holds for any path deeper than two segments that lands in the
+ * catch-all: app/[...path] only serves `/<slug>` and `/<subpage>/<album>`, and
+ * calls notFound() for everything longer without asking Immich.
  */
 export function isKnownMissing(
   pathname: string,
@@ -86,7 +110,14 @@ export function isKnownMissing(
 
   const journal = /^\/journal\/([^/]+)\/?$/.exec(pathname);
   if (journal) {
-    const slug = decodeURIComponent(journal[1]);
+    let slug: string;
+    try {
+      slug = decodeURIComponent(journal[1]);
+    } catch {
+      // A malformed escape such as /journal/%E0 names no entry, and must not
+      // throw out of the proxy.
+      return true;
+    }
     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.
@@ -94,6 +125,15 @@ export function isKnownMissing(
       fs.existsSync(path.join(contentDir, dir, `${slug}.md`)),
     );
   }
+
+  const segments = pathname.split('/').filter(Boolean);
+  if (segments.length > 2) {
+    const [first] = segments;
+    // Next's own paths (/_next/…, /__nextjs_…) and dotfiles such as
+    // /.well-known/… are not the catch-all's to answer.
+    if (first.startsWith('_') || first.startsWith('.')) return false;
+    return !TOP_LEVEL_ROUTES.has(first);
+  }
   return false;
 }
 
@@ -155,18 +195,19 @@ export function proxy(request: NextRequest) {
   requestHeaders.set('x-pathname', request.nextUrl.pathname);
   requestHeaders.set('Content-Security-Policy', cspDirectives);
 
-  // The page itself still renders and calls notFound(); this only lets the
+  // The page itself still renders and calls notFound(); the 404 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,
-        },
-      });
+  //
+  // This is NextResponse.next() carrying a status, not a rewrite to the same
+  // URL. A rewrite destination whose origin differs from the one the server
+  // resolved the request against is proxied as an external URL, and
+  // request.nextUrl reports 127.0.0.1 and ::1 as "localhost". Behind
+  // `next start -H 127.0.0.1` every such rewrite went out to localhost, which
+  // resolved to ::1 where nothing listens: a 30 s hang, then a 500.
+  const response = NextResponse.next({
+    request: { headers: requestHeaders },
+    ...(isKnownMissing(request.nextUrl.pathname) ? { status: 404 } : {}),
+  });
 
   // 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/screenshots.ts b/scripts/screenshots.ts
index 0a68fab..e051c4a 100644
--- a/scripts/screenshots.ts
+++ b/scripts/screenshots.ts
@@ -477,20 +477,25 @@ async function captureAdmin(browser: Browser): Promise<void> {
     await page.locator('.admin-login-card').waitFor({ timeout: 15000 });
     await capture(page, 'admin-login');
 
+    // Login lands on the overview (#712). It is not captured: its "needs
+    // attention" list is the live doctor, which names albums, IDs and secrets'
+    // lengths — nothing for a public screenshot.
     await adminLogin(page);
+
+    // The page builder is a structure list and a panel (#717): open the first
+    // subpage, so the panel shows a page with its albums rather than the
+    // empty state.
+    await page.goto(`${BASE_URL}/admin/pages`, { waitUntil: 'networkidle' });
+    await page.locator('.pb-tree').waitFor({ timeout: 20000 });
+    const firstSubpage = page.locator('.pb-tree .pb-group').nth(1).locator('.pb-row-main').first();
+    if ((await firstSubpage.count()) > 0) await firstSubpage.click();
     await page.waitForTimeout(2500);
     await waitForImages(page);
     await capture(page, 'admin-page-builder');
 
     await captureAlbumPicker(page);
 
-    // Reload rather than trusting Escape to have closed the picker — a modal
-    // still on screen swallows the click on the settings tab.
-    await page.reload({ waitUntil: 'networkidle' });
-    await page.locator('.admin-tabs').waitFor({ timeout: 20000 });
-    await page.locator('.admin-tab', { hasText: 'Settings' }).first().click();
-    await page.waitForTimeout(1500);
-    await capture(page, 'admin-settings');
+    await capturePage(page, '/admin/settings/general', 'admin-settings', 1500);
   });
 }
 
@@ -634,7 +639,7 @@ async function adminLogin(page: Page): Promise<void> {
   await page.goto(`${BASE_URL}/admin`, { waitUntil: 'networkidle' });
   await page.locator('.admin-login-card input[type="password"]').fill(ADMIN_PASSWORD!);
   await page.locator('.admin-login-card button[type="submit"]').click();
-  await page.locator('.admin-tabs').waitFor({ timeout: 20000 });
+  await page.locator('.admin-sidebar').waitFor({ timeout: 20000 });
 }
 
 /**
@@ -853,6 +858,12 @@ see the frames on a proper screen before deciding what this is about.
 
 /** Best effort: the picker is a modal behind a button whose label may change. */
 async function captureAlbumPicker(page: Page): Promise<void> {
+  // "Add album" lives in the standalone-albums panel of the page builder.
+  const standalone = page.locator('.pb-row-solo').last();
+  if ((await standalone.count()) > 0) {
+    await standalone.click();
+    await page.waitForTimeout(800);
+  }
   const trigger = page.getByRole('button', { name: /add album/i }).first();
   if ((await trigger.count()) === 0) {
     console.log('  ⏭  No "Add album" button found — skipping the album picker shot.');
diff --git a/vitest.config.ts b/vitest.config.ts
index ca57dde..f1d7d63 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
     // `// @vitest-environment jsdom` in its first docblock (see
     // components/__tests__ for examples), which keeps the fast path fast.
     environment: 'node',
-    setupFiles: ['./vitest.setup.ts'],
+    setupFiles: ['./vitest.setup.ts', './vitest.content-guard.ts'],
     include: [
       'lib/__tests__/**/*.test.{ts,tsx}',
       'app/**/__tests__/**/*.test.{ts,tsx}',
diff --git a/vitest.content-guard.ts b/vitest.content-guard.ts
new file mode 100644
index 0000000..71a5faf
--- /dev/null
+++ b/vitest.content-guard.ts
@@ -0,0 +1,165 @@
+/**
+ * Refuses every filesystem write into the checkout's own content/ directory
+ * while the unit suite runs.
+ *
+ * In a self-hosted deployment that directory is the live content — the
+ * container mounts it — so a test that writes a journal entry there publishes
+ * it for as long as the test runs and leaves a `.deleted.bak` behind in
+ * content/journal/.backups. Tests point `process.cwd()` at a temp directory
+ * instead (see journal-backup.test.ts); this guard makes forgetting that fail
+ * loudly rather than quietly touching the site.
+ *
+ * Why patch fs rather than snapshot the directory before and after: the live
+ * site writes analytics.json and contact messages into the same directory at
+ * any moment, which a snapshot cannot tell apart from a test. Patching sees
+ * only this process's writes, blocks them before they happen, and catches a
+ * file that is written and deleted again within one test.
+ *
+ * A blocked write throws, and is also recorded, because service code often
+ * swallows errors (`catch {}` in cleanup hooks, `.catch(() => {})` after a
+ * failed rename); the afterEach below turns any record into a test failure.
+ */
+import fs from 'node:fs';
+import { syncBuiltinESMExports } from 'node:module';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { afterAll, afterEach } from 'vitest';
+
+type AnyFn = (...args: unknown[]) => unknown;
+
+interface GuardState {
+  contentDir: string;
+  violations: string[];
+}
+
+const STATE_KEY = Symbol.for('folio.contentWriteGuard');
+
+// Tests spy on process.cwd(); the bound original keeps resolving relative
+// paths the way the OS does, against the real working directory.
+const realCwd = process.cwd.bind(process);
+
+function toPath(p: unknown): string | null {
+  if (typeof p === 'string') return p;
+  if (Buffer.isBuffer(p)) return p.toString();
+  if (p instanceof URL) return p.protocol === 'file:' ? fileURLToPath(p) : null;
+  return null; // a file descriptor or FileHandle: nothing to resolve
+}
+
+/** Flags that can create, truncate or change a file. */
+function isWriteFlag(flags: unknown): boolean {
+  if (flags === undefined || flags === null) return false;
+  if (typeof flags === 'number') {
+    const { O_WRONLY, O_RDWR, O_CREAT, O_TRUNC, O_APPEND } = fs.constants;
+    return (flags & (O_WRONLY | O_RDWR | O_CREAT | O_TRUNC | O_APPEND)) !== 0;
+  }
+  return typeof flags === 'string' && /[wa+]/.test(flags);
+}
+
+function install(): GuardState {
+  const existing = (fs as unknown as Record<symbol, GuardState | undefined>)[STATE_KEY];
+  if (existing) return existing;
+
+  const state: GuardState = {
+    contentDir: path.join(path.dirname(fileURLToPath(import.meta.url)), 'content'),
+    violations: [],
+  };
+
+  const check = (op: string, p: unknown) => {
+    const raw = toPath(p);
+    if (raw === null) return;
+    const resolved = path.resolve(realCwd(), raw);
+    if (resolved !== state.contentDir && !resolved.startsWith(state.contentDir + path.sep)) {
+      return;
+    }
+    const message =
+      `Test tried to ${op} ${resolved} — the real content/ directory. ` +
+      `Point process.cwd() at a temp directory first (see journal-backup.test.ts).`;
+    state.violations.push(message);
+    throw new Error(message);
+  };
+
+  // Which arguments are destination paths. rename moves the source too, so
+  // both of its paths count; copies and links only create their second.
+  const targets: Record<string, number[]> = {
+    writeFile: [0],
+    appendFile: [0],
+    mkdir: [0],
+    mkdtemp: [0],
+    rm: [0],
+    rmdir: [0],
+    unlink: [0],
+    truncate: [0],
+    chmod: [0],
+    chown: [0],
+    lchown: [0],
+    utimes: [0],
+    lutimes: [0],
+    rename: [0, 1],
+    copyFile: [1],
+    cp: [1],
+    link: [1],
+    symlink: [1],
+  };
+
+  // A promise-returning fs function never throws synchronously, so the
+  // fs.promises wrappers reject instead — a `.catch()` on the call must see it.
+  const wrap = (
+    owner: Record<string, unknown>,
+    name: string,
+    guard: (args: unknown[]) => void,
+    rejects = false,
+  ) => {
+    const original = owner[name];
+    if (typeof original !== 'function') return;
+    owner[name] = function guarded(this: unknown, ...args: unknown[]) {
+      try {
+        guard(args);
+      } catch (err) {
+        if (rejects) return Promise.reject(err);
+        throw err;
+      }
+      return (original as AnyFn).apply(this, args);
+    };
+  };
+
+  const fsObj = fs as unknown as Record<string, unknown>;
+  const promises = fs.promises as unknown as Record<string, unknown>;
+  for (const [name, indices] of Object.entries(targets)) {
+    const guard = (args: unknown[]) => indices.forEach((i) => check(name, args[i]));
+    wrap(fsObj, name, guard);
+    wrap(fsObj, `${name}Sync`, guard);
+    wrap(promises, name, guard, true);
+  }
+  const openGuard = (args: unknown[]) => {
+    if (isWriteFlag(args[1])) check('open for writing', args[0]);
+  };
+  wrap(fsObj, 'open', openGuard);
+  wrap(fsObj, 'openSync', openGuard);
+  wrap(promises, 'open', openGuard, true);
+  wrap(fsObj, 'createWriteStream', (args) => check('stream into', args[0]));
+
+  // `import { writeFile } from 'fs/promises'` binds the export once; this
+  // pushes the wrapped functions into those bindings too.
+  syncBuiltinESMExports();
+
+  Object.defineProperty(fs, STATE_KEY, { value: state });
+  return state;
+}
+
+const state = install();
+
+/** Returns and clears the recorded violations. For the guard's own test. */
+export function takeContentWriteViolations(): string[] {
+  return state.violations.splice(0);
+}
+
+/** The directory the guard protects. For the guard's own test. */
+export const guardedContentDir = state.contentDir;
+
+function failOnViolations() {
+  const found = takeContentWriteViolations();
+  if (found.length > 0) throw new Error(found.join('\n'));
+}
+
+afterEach(failOnViolations);
+afterAll(failOnViolations);