diff --git a/.env.example b/.env.example
index 2443b39..83ecb45 100644
--- a/.env.example
+++ b/.env.example
@@ -120,8 +120,9 @@ FEDI_DOMAIN=example.com
 # --- Optional: Web Push (PWA phone notifications) ---
 # Lets you install the site to your phone's home screen and receive push
 # notifications for likes/boosts/replies/follows/DMs/comments — even when closed.
-# Dormant until these are set. Generate a keypair with:
-#   npx web-push generate-vapid-keys
+# EASIEST: generate keys in Admin → Site settings → Phone notifications (one
+# click, stored encrypted at rest — no keys in this file). These env vars are a
+# fallback for automated deploys; a key generated in the admin panel wins.
 # VAPID_PUBLIC_KEY=
 # VAPID_PRIVATE_KEY=
 # VAPID_SUBJECT=mailto:you@example.com
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c6e003..2aa6753 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,27 @@
 # Changelog
 
+## 1.19.0 (2026-07-23)
+
+### Added
+- **Set your avatar and banner during first-run setup** (#59) — the setup wizard now takes a profile picture and banner (optional), so a fresh install lands looking like *you* without a later trip to the admin panel. Uploads are gated by your setup token (the same one that protects setup) and go through the same optimise/EXIF-strip pipeline as everywhere else. A corrupt or mislabelled image is now a clear error instead of a 500.
+- **Set session + token lifetimes from the admin** (#59) — a new **Security** section in **Admin → Site settings** sets how long an admin session stays signed in (default 30 days) and how long a generated app token lasts (0 = never expires), with no `ADMIN_SESSION_TTL_DAYS` / `APP_TOKEN_TTL_DAYS` env editing. Changes apply to newly-created sessions and tokens; the env vars still work as defaults.
+- **A third theme — "Classic Blog"** (#250) — a left sidebar of your bio, recent posts and links beside a serif reading column, on a warm charcoal ground with a pine-green accent: a traditional personal-blog counterpoint to the default's glass and Editorial's sepia. Pick it in **Admin → Site settings → Appearance → Theme** (no restart) or set `THEME=classic`. Default instances render identically — nothing changes unless you choose it. A theme can now also **preset the sidebar's side and blocks** (Classic Blog ships a left sidebar with the nav kept out of it), which you can still override per-site.
+- **Turn on phone notifications without touching the server** (#59) — **Admin → Site settings → Phone notifications** generates your Web Push (VAPID) keypair in one click, so PWA push works with no `npx web-push generate-vapid-keys` or `.env` editing. The private signing key is **stored AES-256-GCM-encrypted at rest** and never sent to the browser; the `VAPID_*` env vars still work as a fallback. Regenerating keys correctly **unsubscribes every device** (a subscription is bound to the old key and can't receive new sends) — and this also fixes a latent bug where, after any key change, a device would show notifications as "on" while silently receiving nothing; it now detects the mismatch and prompts you to re-enable.
+- **Put the sidebar where you want it, with the blocks you want** (#307) — the sidebar layout can now sit on the **left or right**, and its blocks are an **ordered list you control**: `about, recent, sections, connect`. The order you write is the order they render, and leaving one out hides it — so dropping `sections` stops your nav appearing in both the header and the sidebar. Set both in **Admin → Site settings → Appearance** (they appear once you pick the Sidebar page width), or during first-run setup. On mobile your content always comes first regardless of which side you choose.
+
+- **Themeable text colour** (#250) — text now resolves through a `content-*` ramp (primary → strong → muted → subtle → faint → dim → ghost) instead of fixed Tailwind greys, so a theme can move body copy and not just its background. This is the groundwork a **light theme** and the upcoming in-admin **custom palette** both need: `@theme` extends Tailwind's palette rather than replacing it, so hard-coded `text-white` / `text-gray-*` could never follow a theme — which is why every theme so far has had to be dark. **Nothing changes visually:** each token defaults to the exact neutral it replaces, and every built-in theme shares the default ramp, so the emitted CSS is unchanged. The site's header, footer, sidebar, mobile menu and notification menu are converted; the rest of the app follows in later passes, and until then themes stay dark (the contrast invariant still enforces it).
+
+### Changed
+- **Web Push is documented** (#59) — `docs/configuration.md` gains a **Phone Notifications** section. Push had no documentation anywhere: how to switch it on, the iOS home-screen requirement, that regenerating keys deliberately unsubscribes every device, and that the `VAPID_*` env vars are now only a fallback.
+- **`docs/theming.md` rewritten for the current theme system** (#250) — the old guide predated themes entirely (it told you to hand-edit `globals.css` and swap avatar files on disk). It now covers what's web-editable in the admin panel, the `Theme` token contract + region×variant model, and a **developer scaffold** for adding a built-in theme (one data file + one registry line, with the dark/contrast and self-hosted-font constraints spelled out).
+- Dependency refresh: `next` 16.2.11, `react`/`react-dom` 19.2.8, `postcss` 8.5.22, `marked` 18.0.7, `@atproto/api` 0.20.31, `eslint-config-next` 16.2.11. (`typescript` remains blocked upstream — #234.)
+
+### Fixed
+- **Phone notifications couldn't be switched on at all on a fresh install** (#59) — the 🔔 menu offered **Enable phone notifications** even when the server had no Web Push keypair yet, then failed on the click with a terse *"push not configured on server"* — and nothing pointed at the panel that would fix it, which sat in a different screen entirely. The menu now checks first and, when there's no keypair, offers **Set up phone notifications**: one click creates the keys *and* enables the device. If that can't work (for instance `ADMIN_SECRET` isn't set, so the private key can't be encrypted at rest) it now tells you the actual reason. iPhone users still need **Share → Add to Home Screen** first — iOS only gives push to installed apps — and the menu keeps saying so.
+
+### Security
+- **Patched a high-severity image-processing vulnerability** (#329) — `sharp` moves to 0.35.3, clearing [GHSA-f88m-g3jw-g9cj](https://github.com/advisories/GHSA-f88m-g3jw-g9cj) (four libvips CVEs, CVSS 7.0). This one was genuinely reachable rather than theoretical: FediHome decodes images fetched from **arbitrary remote instances** when it caches fediverse media, and `/_next/image` is a public endpoint that fetches and decodes thumbnails from the allow-listed PeerTube hosts — so bytes an attacker controls reached the vulnerable decoders. Upgrading alone would **not** have fixed it: Next.js pins its own copy of `sharp`, which would have left a second, still-vulnerable one (and a duplicate native image library) in the tree, invisible to type-checking, tests and builds alike. `sharp` is therefore pinned tree-wide via `overrides`, so exactly one patched copy is installed. Giving `postcss` the same treatment clears the last remaining transitive advisory (#12), and `npm audit` now reports **0 vulnerabilities**.
+
 ## 1.18.0 (2026-07-21)
 
 ### Fixed
diff --git a/docs/configuration.md b/docs/configuration.md
index 3de26a7..cf89521 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -112,6 +112,40 @@ Some settings are stored in the database (`SiteSettings` table) and managed thro
 
 Changes made in the admin panel are saved to the database and take effect immediately without restarting the server.
 
+## Phone Notifications (Web Push)
+
+FediHome can push likes, boosts, replies, follows, DMs and comments to your phone
+or desktop — even when the site isn't open. **There is nothing to configure on the
+server:** the keys it needs are generated in-app the first time you turn it on.
+
+**Turning it on:**
+
+1. Open the **🔔 menu** (visible only when you're signed in as the owner) and
+   choose **Set up phone notifications**. That generates your Web Push **VAPID
+   keypair**, stores the private half AES-256-GCM-encrypted, and subscribes the
+   device you're on — one click, no `.env` editing and no restart.
+2. Hit **Test** to confirm a notification actually arrives.
+
+**On iPhone/iPad you must install the site first.** iOS only exposes push to
+home-screen apps, so in Safari tap **Share → Add to Home Screen**, then open
+FediHome *from the Home Screen* and enable notifications there. Until you do, the
+menu shows install guidance instead of an enable button — that's expected, not an
+error.
+
+Repeat step 1 on each device you want notifications on; subscriptions are
+per-device.
+
+**Rotating keys.** **Admin → Site settings → Phone notifications** shows the key
+status and can **regenerate** or **clear** the keypair. Regenerating deliberately
+**unsubscribes every device**: a subscription is bound to the key it was created
+with and can never receive a send signed by a new one. Each device simply detects
+the mismatch and offers to re-enable.
+
+**Env fallback.** `VAPID_PUBLIC_KEY`, `VAPID_PRIVATE_KEY` and `VAPID_SUBJECT` still
+work for automated deploys, but a key generated in the admin panel takes
+precedence. Generating in-app requires `ADMIN_SECRET` to be set, since that's what
+encrypts the private key at rest.
+
 ## Navigation Configuration
 
 The `nav` object in `site.config.ts` controls which top-level pages appear in the navbar:
diff --git a/docs/theming.md b/docs/theming.md
index d312963..b124856 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -1,235 +1,197 @@
 # Theming
 
-FediHome uses Tailwind CSS with custom design tokens defined in CSS variables. You can customize colors, fonts, and layout without modifying component code.
-
-## Theme Architecture
-
-All theme variables are defined in `src/app/globals.css` inside the `@theme` block. Tailwind picks these up as custom utilities, so they're available throughout the app as classes like `bg-surface-900` or `text-accent-400`.
-
-The default theme is a dark palette with blue accents:
-
-```css
-@theme {
-  /* Neutral slate dark palette */
-  --color-surface-950: #0a0a0f;
-  --color-surface-900: #111118;
-  --color-surface-800: #1a1a24;
-  --color-surface-700: #252530;
-  --color-surface-600: #3a3a4a;
-
-  /* Blue accent */
-  --color-accent-50:  #eff6ff;
-  --color-accent-100: #dbeafe;
-  --color-accent-200: #bfdbfe;
-  --color-accent-300: #93c5fd;
-  --color-accent-400: #60a5fa;
-  --color-accent-500: #3b82f6;
-  --color-accent-600: #2563eb;
-  --color-accent-700: #1d4ed8;
-  --color-accent-800: #1e40af;
-  --color-accent-900: #1e3a8a;
-
-  /* Success green */
-  --color-moss-400: #34d399;
-  --color-moss-500: #10b981;
-  --color-moss-600: #059669;
-
-  /* Typography */
-  --font-display: "Source Serif 4", "Georgia", serif;
-  --font-body: "Inter", system-ui, -apple-system, sans-serif;
-  --font-mono: "JetBrains Mono", "Fira Code", monospace;
+FediHome's look is a **theme**: a bundle of design tokens (colour, type, feel)
+plus a chosen **layout variant for each region** of the page. There are two ways
+to change it — pick one based on who you are:
+
+- **Site owner?** Everything below in [From the admin panel](#from-the-admin-panel)
+  is web-editable, no file editing or restart.
+- **Developer adding a built-in theme?** Jump to [Authoring a theme](#authoring-a-theme).
+
+---
+
+## From the admin panel
+
+**Admin → Site settings → Appearance** controls all of this live:
+
+| Control | What it does |
+|---|---|
+| **Theme** | Pick a built-in theme — Cards (default), Editorial, Classic Blog. Sets colours, fonts, feel and every region's layout at once. |
+| **Accent colour** | Any `#RRGGBB`, **per theme** (each theme remembers its own). "Use theme's accent" reverts to the theme's built-in colour. |
+| **Header / Feed / Footer / Page width** | Override any single region's variant (bar/centered/minimal, cards/list, row/minimal/columns, normal/narrow/sidebar). "Inherit from theme" uses the theme's own default. |
+| **Sidebar side / blocks** | When the shell is a sidebar: left or right, and an ordered list of blocks (`about, recent, sections, connect`) — omit one to hide it. |
+
+**Profile picture & banner** live in **Admin → Site settings → Your profile**
+(or during first-run setup) — upload directly, no file swapping.
+
+Under the hood these write to the `SiteSetting` / `SiteSettings` overlay, read
+back within ~60s. Env vars (`THEME`, `LAYOUT_*`, `SIDEBAR_*`, `ACCENT_COLOR`, …)
+still work as defaults for automated deploys; a saved admin value wins.
+
+---
+
+## How themes work
+
+A **theme is pure data** (`src/lib/themes/<id>.ts`): the design tokens the UI
+resolves to at runtime, plus its layout presets. Everything visual references a
+CSS variable (`var(--color-*)`, `var(--font-*)`, `var(--radius-*)`,
+`var(--glass-filter)`), defined in `src/app/globals.css`'s `@theme` block. At
+runtime `buildThemeStyle` (`src/lib/themes/index.ts`) emits **only the tokens
+that differ from the default** as a `:root:root{…}` block and injects it in the
+root layout — so the default theme injects nothing and is byte-identical, and a
+theme only ships its deltas.
+
+The `Theme` contract (`src/lib/themes/types.ts`):
+
+```ts
+interface Theme {
+  id: string;
+  name: string;
+  description?: string;
+  tokens: {
+    colors: Record<ColorToken, string>;   // surface-950…600, accent-50…900, moss-400…600, content-*
+    fonts:  { display; body; mono };
+    feel:   { radiusCard; radiusButton; glassFilter };  // e.g. "8px", "blur(12px)", "none"
+  };
+  layout:  { feed; header; footer; shell };             // a variant per region
+  sidebar?: { side?; blocks? };                         // preset, if shell is "sidebar"
 }
 ```
 
-## Changing the Accent Color
-
-The accent color is used for links, buttons, borders, badges, and interactive elements throughout the UI.
-
-### Method 1: Admin Panel (per theme)
-
-The simplest way is **Admin → Site settings → Appearance**: pick a colour under
-"Accent colour" and Save — it applies live, no restart. The accent is **per
-theme**: each theme (Cards, Editorial, …) remembers its own, so switching themes
-restores the accent you chose for it. Use **"Use theme's accent"** to fall back
-to the theme's built-in accent. (Stored in the `SiteSettings` profile row —
-`accentColor` for the default theme, `themeAccents` for the rest.)
-
-### Method 2: Edit globals.css
-
-For full control over the entire accent scale, edit `src/app/globals.css`:
-
-```css
-@theme {
-  /* Example: change to purple */
-  --color-accent-50:  #faf5ff;
-  --color-accent-100: #f3e8ff;
-  --color-accent-200: #e9d5ff;
-  --color-accent-300: #d8b4fe;
-  --color-accent-400: #c084fc;
-  --color-accent-500: #a855f7;
-  --color-accent-600: #9333ea;
-  --color-accent-700: #7e22ce;
-  --color-accent-800: #6b21a8;
-  --color-accent-900: #581c87;
-}
-```
-
-Each shade (50 through 900) is used in different contexts:
-- **accent-400/500** — Primary interactive elements (links, buttons)
-- **accent-50/100** — Very light tints (text on dark backgrounds)
-- **accent-600/700** — Hover states, button gradients
-- **accent-800/900** — Darkest accents (rarely used in dark theme)
-
-You can generate a consistent color scale from any base color using tools like [uicolors.app](https://uicolors.app/create) or [tailwindshades.com](https://www.tailwindshades.com/).
-
-The button gradient in `.btn-primary` and border colors in `.glass-card` also reference the accent color directly. If you change the accent palette, update these too:
-
-```css
-.btn-primary {
-  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
-}
-
-.btn-primary:hover {
-  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25);
-}
-
-.glass-card {
-  border: 1px solid rgba(168, 85, 247, 0.1);
-}
-
-.glass-card:hover {
-  border-color: rgba(168, 85, 247, 0.2);
-}
-```
-
-## Changing Surface Colors
-
-The surface palette controls the background colors of the page, cards, and panels:
-
-```css
-@theme {
-  /* Example: warmer dark palette */
-  --color-surface-950: #0f0d0a;
-  --color-surface-900: #1a1714;
-  --color-surface-800: #252118;
-  --color-surface-700: #332d22;
-  --color-surface-600: #4a4232;
-}
-```
-
-The body background is `surface-950`, cards use `surface-900`, and borders/dividers use `surface-700/800`.
-
-## Changing Fonts
-
-FediHome ships with three font families:
-
-- **Display** (`font-display`) — Used for headings. Default: Source Serif 4 (serif)
-- **Body** (`font-body`) — Used for body text, navigation, UI elements. Default: Inter (sans-serif)
-- **Mono** (`font-mono`) — Used for code blocks and inline code. Default: JetBrains Mono
-
-### Replacing a Font
-
-1. Download the font file(s) in `.woff2` format
-2. Place them in `public/fonts/`
-3. Update the `@font-face` rule in `globals.css`:
-
-```css
-@font-face {
-  font-family: "Your Font Name";
-  src: url("/fonts/YourFont-Variable.woff2") format("woff2");
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-```
-
-4. Update the `@theme` block:
-
-```css
-@theme {
-  --font-body: "Your Font Name", system-ui, sans-serif;
-}
-```
-
-### Using System Fonts Only
-
-To skip custom font loading entirely and use system fonts:
-
-```css
-@theme {
-  --font-display: Georgia, "Times New Roman", serif;
-  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-mono: "SF Mono", "Cascadia Code", "Consolas", monospace;
-}
-```
-
-Then remove or comment out the `@font-face` rules.
-
-## Custom CSS Overrides
-
-You can add custom CSS at the bottom of `globals.css`. Styles defined there take precedence over Tailwind utilities when specificity is equal.
-
-Examples:
-
-```css
-/* Make all headings use the accent color */
-h1, h2, h3, h4, h5, h6 {
-  color: var(--color-accent-400);
-}
-
-/* Rounded avatar instead of default */
-.avatar-img {
-  border-radius: 50%;
-}
-
-/* Custom link underline style */
-a:hover {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-/* Hide the footer entirely */
-footer {
-  display: none;
-}
-```
-
-## Component Classes
-
-FediHome uses several reusable CSS classes defined in `globals.css`:
-
-| Class | Purpose |
-|-------|---------|
-| `.glass-card` | Card container with translucent background, blur, and subtle border. Used for post cards, timeline entries, and panels. |
-| `.btn-primary` | Solid gradient button (accent color). Used for primary actions. |
-| `.btn-outlined` | Outlined button with accent border. Used for secondary actions. |
-| `.divider` | A subtle horizontal line with gradient fade on edges. |
-| `.fedi-badge` | Small pill-shaped badge for Fediverse interaction counts. |
-| `.lightbox-overlay` | Full-screen overlay for the photo lightbox. |
-
-You can override any of these to change the look of core UI elements.
-
-## Uploading Custom Avatar and Banner
-
-### Avatar
-
-Replace the file at `public/images/avatar.png` with your own image. The recommended size is 400x400 pixels. PNG or WebP format.
-
-The avatar is used in:
-- The site navbar
-- Your ActivityPub profile (what Mastodon users see)
-- RSS feed metadata
-
-### Banner
-
-Replace the file at `public/images/banner.webp` with your own image. The recommended size is at least 1500x500 pixels. WebP format is preferred for file size.
-
-The banner is used in:
-- The homepage header area
-- Your ActivityPub profile header image
-
-### Open Graph Image
-
-Replace `public/images/og-image.webp` with a custom image (1200x630 pixels recommended). This is the default image shown when your site URL is shared on social media without a specific post cover image.
-
-After replacing any of these files, the changes take effect immediately (or after clearing any CDN cache if you use one).
+### The text ramp
+
+Colour tokens cover the *ground* (`surface-*`) and the *brand* (`accent-*`), but
+body text was long hard-coded to Tailwind neutrals — which `@theme` can't move,
+because it extends the palette rather than replacing it. That's the single reason
+every theme has had to be dark.
+
+`content-*` (`src/lib/themes/content.ts`) is the text ramp that fixes it,
+brightest → dimmest:
+
+| Token | Role | Was |
+|---|---|---|
+| `content` | headings, body copy | `text-white` |
+| `content-strong` | just under primary | `text-gray-200` |
+| `content-muted` | secondary copy | `text-gray-300` |
+| `content-subtle` | labels, captions | `text-gray-400` |
+| `content-faint` | timestamps, counts, bylines | `text-gray-500` |
+| `content-dim` | decorative, de-emphasised | `text-gray-600` |
+| `content-ghost` | hairline text | `text-gray-700` |
+
+Use `text-content`, `text-content-faint`, … in components. Each token **defaults
+to the exact Tailwind neutral it replaces** (`globals.css` sets
+`--color-content-faint: var(--color-gray-500)`), so migrating a utility is a pure
+rename with no visual change, and a theme that doesn't set them renders
+identically to before.
+
+The migration is **partial** — the layout chrome is on tokens, the rest of the app
+isn't yet. Until it finishes, light themes stay blocked and the dark-only contrast
+invariant stands. If you're touching a component's text colours, moving them onto
+these tokens is the way to help (#250).
+
+`themes.test.ts` asserts the readable tier (`content` … `content-subtle`) stays AA
+on each theme's own `surface-950`, and that the ramp is monotonic. `content-faint`
+and below are metadata and decoration and sit below AA by design.
+
+### Regions × variants
+
+Layout is a curated catalogue, not arbitrary markup (so a theme can't break
+ActivityPub actor pages, feeds, SEO or a11y). Each region offers a fixed set of
+variants (`src/lib/themes/layout.ts`, `LAYOUT_REGIONS`):
+
+| Region | Variants |
+|---|---|
+| `feed`   | `cards` · `list` |
+| `header` | `bar` · `centered` · `minimal` |
+| `footer` | `row` · `minimal` · `columns` |
+| `shell`  | `normal` · `narrow` · `sidebar` |
+
+A theme sets a default variant per region; the owner can override any one from
+the admin panel (`resolveLayout` / `resolveSidebar` layer owner → theme →
+built-in default).
+
+---
+
+## Authoring a theme
+
+Adding a built-in theme is **one data file + one registry line** — no other
+wiring. It auto-appears in the admin theme picker and the first-run wizard
+(both iterate the `THEMES` registry).
+
+1. **Create `src/lib/themes/<id>.ts`.** Copy an existing one as a template —
+   `editorial.ts` (warm, list feed) or `classic.ts` (sidebar shell) are the
+   closest to a "second look".
+
+   ```ts
+   import type { Theme } from "./types";
+
+   export const OCEAN_THEME: Theme = {
+     id: "ocean",
+     name: "Ocean",
+     description: "Cool teal on deep navy — a calm reading theme.",
+     tokens: {
+       colors: {
+         "surface-950": "#0a1420", /* … 900/800/700/600, monotonic in luminance */
+         // Pin the accent ramp from a single base — see the constraint below:
+         "accent-500": "#2f8f83", /* …the full 50–900 scale, pinned */
+         "moss-400": "#…", "moss-500": "#…", "moss-600": "#…",
+       },
+       fonts: { display: '…', body: '…', mono: '"JetBrains Mono", monospace' },
+       feel:  { radiusCard: "12px", radiusButton: "8px", glassFilter: "blur(12px)" },
+     },
+     layout:  { feed: "list", header: "bar", footer: "row", shell: "normal" },
+     // sidebar: { side: "left", blocks: ["about", "recent", "connect"] }, // if shell: "sidebar"
+   };
+   ```
+
+2. **Register it** in `src/lib/themes/registry.ts`:
+
+   ```ts
+   import { OCEAN_THEME } from "./ocean";
+   export const THEMES = { …, [OCEAN_THEME.id]: OCEAN_THEME };
+   ```
+
+3. **Run the tests** — `themes.test.ts` iterates every registered theme and
+   enforces the constraints below, so a bad theme fails CI rather than shipping.
+
+### Constraints (enforced by `themes.test.ts`)
+
+- **Themes must (still) be dark.** Most components hard-code Tailwind neutrals
+  (`text-white`, `text-gray-*`) for body/secondary text, and `@theme` *extends*
+  the palette so those neutrals stay fixed while `surface-*` moves. On a light
+  ground `text-white` lands at ~1:1 — an invisible site. A contrast invariant
+  requires `white` / `gray-200` / `gray-400` to stay ≥ 4.5:1 (AA) on your
+  `surface-950`. The migration that lifts this is underway — see
+  [The text ramp](#the-text-ramp) — and is tracked in #250.
+- **Fonts swap families only.** `buildThemeStyle` can't register `@font-face`,
+  and only **Inter** and **Source Serif 4** are self-hosted, so pick among those
+  (+ system fallbacks). Adding a new face means an `@font-face` in `globals.css`.
+- **Pin the accent ramp.** Generate the 50–900 scale from your base with
+  `deriveAccentScale("#…")` (`src/lib/themes/color.ts`) and paste the literal
+  values — so the shipped theme's identity can't drift if that ramp is ever
+  retuned. (This is the same ramp a per-theme custom accent goes through.)
+- **`mono` and any token equal to the default diff out** and are never emitted —
+  only your real deltas ship.
+
+---
+
+## Deeper changes in `globals.css`
+
+For anything below the token layer, edit `src/app/globals.css`:
+
+- The `@theme` block defines the **default** token values (what other themes diff
+  against) and the Tailwind utilities (`bg-surface-900`, `text-accent-400`, …).
+- The `@font-face` rules self-host the fonts (`public/fonts/`).
+- Component classes — `.glass-card`, `.btn-primary`, `.btn-outlined`, `.divider`,
+  `.fedi-badge`, `.lightbox-overlay` — style the reusable UI pieces and read the
+  feel tokens (`var(--radius-card)`, `var(--glass-filter)`). Override any of them
+  for a site-wide tweak.
+
+Changes here are compiled into the build (not runtime-swappable per theme), so
+they affect every theme's baseline.
+
+## Open Graph image
+
+Avatar and banner are web-editable (above). The social-share fallback image is
+still a file: replace `public/images/og-image.webp` (1200×630 recommended). It's
+used when a URL is shared without a post-specific cover.
diff --git a/package-lock.json b/package-lock.json
index 4a9f643..b6f5467 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "fedihome",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fedihome",
-      "version": "1.18.0",
+      "version": "1.19.0",
       "hasInstallScript": true,
       "license": "ISC",
       "dependencies": {
-        "@atproto/api": "^0.20.30",
+        "@atproto/api": "^0.20.31",
         "@fedify/fedify": "^2.3.3",
         "@fedify/next": "^2.3.3",
         "@prisma/adapter-pg": "^7.9.0",
@@ -22,20 +22,20 @@
         "@types/web-push": "^3.6.4",
         "dotenv": "^17.4.2",
         "fast-xml-parser": "^5.10.1",
-        "marked": "^18.0.6",
+        "marked": "^18.0.7",
         "music-metadata": "^11.14.0",
-        "next": "^16.2.10",
+        "next": "^16.2.11",
         "next-mdx-remote": "^6.0.0",
         "nodemailer": "^9.0.1",
         "pg": "^8.21.0",
-        "postcss": "^8.5.20",
+        "postcss": "^8.5.22",
         "prisma": "^7.9.0",
-        "react": "^19.2.6",
-        "react-dom": "^19.2.6",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
         "react-masonry-css": "^1.0.16",
         "remark-gfm": "^4.0.1",
         "sanitize-html": "^2.17.6",
-        "sharp": "^0.34.5",
+        "sharp": "^0.35.3",
         "tailwindcss": "^4.3.3",
         "typescript": "^6.0.3",
         "web-push": "^3.6.7"
@@ -47,7 +47,7 @@
         "@types/sanitize-html": "^2.16.1",
         "@vitest/coverage-v8": "^4.1.10",
         "eslint": "^10.7.0",
-        "eslint-config-next": "^16.2.10",
+        "eslint-config-next": "^16.2.11",
         "tsx": "^4.23.1",
         "vitest": "^4.1.10"
       }
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@atproto/api": {
-      "version": "0.20.30",
-      "resolved": "https://registry.npmjs.org/@atproto/api/-/api-0.20.30.tgz",
-      "integrity": "sha512-t/9pPW+60AFeefiT186z4Z16yz4UmNGtb0EYVyCIHkwYk6nat57OvJA3oEbp4NK9yd/REsVCTBk6gOk8PNWyQQ==",
+      "version": "0.20.31",
+      "resolved": "https://registry.npmjs.org/@atproto/api/-/api-0.20.31.tgz",
+      "integrity": "sha512-TovCQLQv5ti1jqh8UH6jJ0EFuWRjGdUtFyFR5xYC/IkIulwHDuyrVaXdCv7VLWiHftp92DevtZnFRm+BZsZZdw==",
       "license": "MIT",
       "dependencies": {
         "@atproto/common-web": "^0.5.6",
@@ -1353,9 +1353,9 @@
       }
     },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
-      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.3.tgz",
+      "integrity": "sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg==",
       "cpu": [
         "arm64"
       ],
@@ -1365,19 +1365,19 @@
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+        "@img/sharp-libvips-darwin-arm64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
-      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.3.tgz",
+      "integrity": "sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w==",
       "cpu": [
         "x64"
       ],
@@ -1387,19 +1387,38 @@
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.4"
+        "@img/sharp-libvips-darwin-x64": "1.3.2"
+      }
+    },
+    "node_modules/@img/sharp-freebsd-wasm32": {
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.3.tgz",
+      "integrity": "sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.3"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
-      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.2.tgz",
+      "integrity": "sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg==",
       "cpu": [
         "arm64"
       ],
@@ -1413,9 +1432,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
-      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.2.tgz",
+      "integrity": "sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw==",
       "cpu": [
         "x64"
       ],
@@ -1429,9 +1448,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
-      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.2.tgz",
+      "integrity": "sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ==",
       "cpu": [
         "arm"
       ],
@@ -1445,9 +1464,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
-      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.2.tgz",
+      "integrity": "sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA==",
       "cpu": [
         "arm64"
       ],
@@ -1461,9 +1480,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
-      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.2.tgz",
+      "integrity": "sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw==",
       "cpu": [
         "ppc64"
       ],
@@ -1477,9 +1496,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
-      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.2.tgz",
+      "integrity": "sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w==",
       "cpu": [
         "riscv64"
       ],
@@ -1493,9 +1512,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
-      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.2.tgz",
+      "integrity": "sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ==",
       "cpu": [
         "s390x"
       ],
@@ -1509,9 +1528,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
-      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.2.tgz",
+      "integrity": "sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w==",
       "cpu": [
         "x64"
       ],
@@ -1525,9 +1544,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
-      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.2.tgz",
+      "integrity": "sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw==",
       "cpu": [
         "arm64"
       ],
@@ -1541,9 +1560,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
-      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.2.tgz",
+      "integrity": "sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ==",
       "cpu": [
         "x64"
       ],
@@ -1557,9 +1576,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
-      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.3.tgz",
+      "integrity": "sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA==",
       "cpu": [
         "arm"
       ],
@@ -1569,19 +1588,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.4"
+        "@img/sharp-libvips-linux-arm": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
-      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.3.tgz",
+      "integrity": "sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ==",
       "cpu": [
         "arm64"
       ],
@@ -1591,19 +1610,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.4"
+        "@img/sharp-libvips-linux-arm64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
-      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.3.tgz",
+      "integrity": "sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA==",
       "cpu": [
         "ppc64"
       ],
@@ -1613,19 +1632,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+        "@img/sharp-libvips-linux-ppc64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
-      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.3.tgz",
+      "integrity": "sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ==",
       "cpu": [
         "riscv64"
       ],
@@ -1635,19 +1654,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+        "@img/sharp-libvips-linux-riscv64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
-      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.3.tgz",
+      "integrity": "sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw==",
       "cpu": [
         "s390x"
       ],
@@ -1657,19 +1676,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.4"
+        "@img/sharp-libvips-linux-s390x": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
-      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.3.tgz",
+      "integrity": "sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA==",
       "cpu": [
         "x64"
       ],
@@ -1679,19 +1698,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.4"
+        "@img/sharp-libvips-linux-x64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
-      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.3.tgz",
+      "integrity": "sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w==",
       "cpu": [
         "arm64"
       ],
@@ -1701,19 +1720,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
-      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.3.tgz",
+      "integrity": "sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg==",
       "cpu": [
         "x64"
       ],
@@ -1723,38 +1742,54 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
-      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.3.tgz",
+      "integrity": "sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w==",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.11.1"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-webcontainers-wasm32": {
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.3.tgz",
+      "integrity": "sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q==",
       "cpu": [
         "wasm32"
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.7.0"
+        "@img/sharp-wasm32": "0.35.3"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
-      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.3.tgz",
+      "integrity": "sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w==",
       "cpu": [
         "arm64"
       ],
@@ -1764,16 +1799,16 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
-      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.3.tgz",
+      "integrity": "sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw==",
       "cpu": [
         "ia32"
       ],
@@ -1783,16 +1818,16 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": "^20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
-      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.3.tgz",
+      "integrity": "sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA==",
       "cpu": [
         "x64"
       ],
@@ -1802,7 +1837,7 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
@@ -1953,15 +1988,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.10.tgz",
-      "integrity": "sha512-zLPxg9M0MEHmygpj5OuxjQ+vHMiy/K7cSp74G8ecYolmgUWw0RwN02tF56npup/+qaI8JB97hQgS/r2Hb6QwVA==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.11.tgz",
+      "integrity": "sha512-0do5A3BJ2gxWr0ZCMcD6BhW+e595jyxdTl3rXTS6lOtD8ektMiW6CO+EPwt1Eca1DBnm90r/7GdiKWBKxH++DA==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.10.tgz",
-      "integrity": "sha512-Gs8D2m21VnJeFo9qvYIIqJH94frWerWYu41BprU1pLtRVF7PCQNLiFZZ3fG+iPuj3K83Cwv/rt+msLOy8Qgu3Q==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.11.tgz",
+      "integrity": "sha512-vMEf/aXOpzFFdtIvFYOnIDPKb0xBbrXONsz83CcKdRrekfxNdL8PNkq5qHqAHSXVlIifnX68LOMaxr3z5PkeLQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1969,9 +2004,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.10.tgz",
-      "integrity": "sha512-v9IdJCa0H0mbo+8z5zwUpOk1Vj7RjkcI5uNYf5Ws1y6szf/p3Mzl9hLaST8SCt6L9h8NGnruZcd2+o0NTNwDhA==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.11.tgz",
+      "integrity": "sha512-wryL4pjKmDwGv2ox6+GZDFxvmtSRLqApBR8kL1j4+vhB7Z5vJC/zAnXpiR9Xkfzl0AS8WLMnsuGV/UKI67/rrw==",
       "cpu": [
         "arm64"
       ],
@@ -1985,9 +2020,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.10.tgz",
-      "integrity": "sha512-17IS0jJRViROGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQ==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.11.tgz",
+      "integrity": "sha512-aZl2j4f/fLyjQvOhv0Oe9UaMAQHolYpKhctsoYzplSumKJKPUmgjcf6545aBtysLTcu994TREd0+pSgNE4ohmg==",
       "cpu": [
         "x64"
       ],
@@ -2001,9 +2036,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.10.tgz",
-      "integrity": "sha512-GRQRsRtuciNJvB54AvvuQTiq0oZtFwa1owQqtZD8wwnGpM2L39MV22kpI72YSXLKIyY40LC66EiLFv4PiicXxg==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.11.tgz",
+      "integrity": "sha512-5jEriyEnH/LWFy27L2ZG0XaLlyEJIjhsImEsiS9P563PKEVp2BVups/xfOucIrsvVntp11oNcZwjHvaDPYVB5g==",
       "cpu": [
         "arm64"
       ],
@@ -2017,9 +2052,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.10.tgz",
-      "integrity": "sha512-zkN9MQYS7UQBro+FnISUq1itaQjXI9xqISzuQ+2bc921NcJ1x4yPCqrn77tVN6/dOOXaaWVX3k6/bR07pPwK+A==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.11.tgz",
+      "integrity": "sha512-eIjcpx2fnnFSSkZDbTxy74KnokUXDjfoLClpWelfgHLf621aTqswhwXQ7GkD5K5rplrS6LZ/Bj+mVuvzluBOEg==",
       "cpu": [
         "arm64"
       ],
@@ -2033,9 +2068,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.10.tgz",
-      "integrity": "sha512-iCVJnwvrPYECvA6WM/7+oo+OiTvedIKLxtCLAZP4xZR3nXa1zmzZyLPbYCmWvpd4CvMYF1EMTafd0ii3DygLvA==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.11.tgz",
+      "integrity": "sha512-8WgzpaWMs46qJT9kiV47cje86L0x/Mu9t8/Gwj+pnbgW3rETVfCnaScPjlYUwNScpOozdcIMHWmAvuZJUonR2w==",
       "cpu": [
         "x64"
       ],
@@ -2049,9 +2084,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.10.tgz",
-      "integrity": "sha512-ov2g4H0dHY9bPoOU83m91hWT7Iq5qy13bUnyyshLU3HGR1Ownn0X9QpmDPc5iIUaahTp7f7LeGAhV4DSFtackw==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.11.tgz",
+      "integrity": "sha512-I3UgPds7G4ZYnTb/H+5GBGuUT2DhAk6j0mL6A4s63RjFs74wB2hOWP0vaxsK+3NJraExt3eYEPQ/UtT0x/64Nw==",
       "cpu": [
         "x64"
       ],
@@ -2065,9 +2100,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.10.tgz",
-      "integrity": "sha512-DwAnhLX76HQiFFQNgWlcK+JzlnD1rZ+UK/WY0ZMI/deXpvgnesjNYrqcfo1JzBuz4Kf7o3brIBL0glI1junatA==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.11.tgz",
+      "integrity": "sha512-n89CjtcThnjrwgJMAiI5xbqwLY51zvwC9tSlArmVndAJLYVl9T9UAdlkXTmZvE++idoXe8KdglQlhNRdUp1c6g==",
       "cpu": [
         "arm64"
       ],
@@ -2081,9 +2116,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.10.tgz",
-      "integrity": "sha512-0JXq3b85Jk9Jg4ntLUbXSPvoDw3gpZou7twuKdoFG2jOw635v7+IiXfTaa0TxVMyx78pUjnrVYwLgjKfX4e6/A==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.11.tgz",
+      "integrity": "sha512-md8CLNggS1Dx9pUgApzps5uAf+N8GN9xywzmNx9vHAWo94HtBwCCqkSnhIrdfQe83Dhz8Lfo/20Nb1Zxal092w==",
       "cpu": [
         "x64"
       ],
@@ -6085,13 +6120,13 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.2.10.tgz",
-      "integrity": "sha512-HSybLOY0QKf39i4FWUqPN0xWiNDi6A6UqJmZtgDkS3zMqjXTqULvj/sueXx3cdCG0mVG+qH6k5/qdegklH1d1w==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.2.11.tgz",
+      "integrity": "sha512-FIpbK/dUyxUExchDB7eBg3k+VU8R2iR/Cx9/kqTBUTFv2bOIR9aRrpno4rvAQ9VhiPQAyFKNA2NlZwouGWtclA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "16.2.10",
+        "@next/eslint-plugin-next": "16.2.11",
         "eslint-import-resolver-node": "^0.3.6",
         "eslint-import-resolver-typescript": "^3.5.2",
         "eslint-plugin-import": "^2.32.0",
@@ -8722,9 +8757,9 @@
       }
     },
     "node_modules/marked": {
-      "version": "18.0.6",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.6.tgz",
-      "integrity": "sha512-MrV5puXBfuiy6wl6DLaq3BtIJQAJToAd5zt/ZKhRfGRAuFPALE7/4Y7jnxRQoEgK/pBgurGqLyAuRgZ2xOjr6w==",
+      "version": "18.0.7",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.7.tgz",
+      "integrity": "sha512-iDVQ5ldaiKXn6b2JroX5kgRfmwgqolW7NpaEzTl1k/2Zh1njIEN9yniyLV/mOvWwtsE8OGgkjsCYvijuPk1dtA==",
       "license": "MIT",
       "bin": {
         "marked": "bin/marked.js"
@@ -9941,12 +9976,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.2.10.tgz",
-      "integrity": "sha512-2som5AVXb3kE6Yjine3/mNbBayYF58eguBWIVVUdr1y/L426xyVEgYxgBG+1QC34P2x5E+tcDup6XkuOAX3dCA==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.2.11.tgz",
+      "integrity": "sha512-B339zaqbyK8cmxhoAvLrcwoabwCP1wz21zSzfqxqXAemTu2BXnH7tQnfcglKv1vnMUIDBc+Hth7XODQriTZiRQ==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.2.10",
+        "@next/env": "16.2.11",
         "@swc/helpers": "0.5.15",
         "baseline-browser-mapping": "^2.9.19",
         "caniuse-lite": "^1.0.30001579",
@@ -9960,14 +9995,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.2.10",
-        "@next/swc-darwin-x64": "16.2.10",
-        "@next/swc-linux-arm64-gnu": "16.2.10",
-        "@next/swc-linux-arm64-musl": "16.2.10",
-        "@next/swc-linux-x64-gnu": "16.2.10",
-        "@next/swc-linux-x64-musl": "16.2.10",
-        "@next/swc-win32-arm64-msvc": "16.2.10",
-        "@next/swc-win32-x64-msvc": "16.2.10",
+        "@next/swc-darwin-arm64": "16.2.11",
+        "@next/swc-darwin-x64": "16.2.11",
+        "@next/swc-linux-arm64-gnu": "16.2.11",
+        "@next/swc-linux-arm64-musl": "16.2.11",
+        "@next/swc-linux-x64-gnu": "16.2.11",
+        "@next/swc-linux-x64-musl": "16.2.11",
+        "@next/swc-win32-arm64-msvc": "16.2.11",
+        "@next/swc-win32-x64-msvc": "16.2.11",
         "sharp": "^0.34.5"
       },
       "peerDependencies": {
@@ -10015,34 +10050,6 @@
         "react": ">=16"
       }
     },
-    "node_modules/next/node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
     "node_modules/node-exports-info": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
@@ -10545,9 +10552,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.20",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.20.tgz",
-      "integrity": "sha512-lW616l85ucIQL+FocMmL7pQFPqBmwejrCMg+iPxyImlrANNJG9NHq/RkyCZopDhd8C3LA03PHRJDjkbGu8vvug==",
+      "version": "8.5.22",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.22.tgz",
+      "integrity": "sha512-KBDEIpLrvpv16pp3K0Fw+UCoZfopFjjgeB+0tA/aaThfEE74kKDLrgg603YvOWJyg3+WYtyq3xYsQWsIyZlPqQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -10794,24 +10801,24 @@
       }
     },
     "node_modules/react": {
-      "version": "19.2.7",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
-      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.7",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
-      "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
+      "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.7"
+        "react": "^19.2.8"
       }
     },
     "node_modules/react-is": {
@@ -11503,47 +11510,52 @@
       "license": "MIT"
     },
     "node_modules/sharp": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
-      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
-      "hasInstallScript": true,
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.3.tgz",
+      "integrity": "sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@img/colour": "^1.0.0",
+        "@img/colour": "^1.1.0",
         "detect-libc": "^2.1.2",
-        "semver": "^7.7.3"
+        "semver": "^7.8.5"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.5",
-        "@img/sharp-darwin-x64": "0.34.5",
-        "@img/sharp-libvips-darwin-arm64": "1.2.4",
-        "@img/sharp-libvips-darwin-x64": "1.2.4",
-        "@img/sharp-libvips-linux-arm": "1.2.4",
-        "@img/sharp-libvips-linux-arm64": "1.2.4",
-        "@img/sharp-libvips-linux-ppc64": "1.2.4",
-        "@img/sharp-libvips-linux-riscv64": "1.2.4",
-        "@img/sharp-libvips-linux-s390x": "1.2.4",
-        "@img/sharp-libvips-linux-x64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
-        "@img/sharp-linux-arm": "0.34.5",
-        "@img/sharp-linux-arm64": "0.34.5",
-        "@img/sharp-linux-ppc64": "0.34.5",
-        "@img/sharp-linux-riscv64": "0.34.5",
-        "@img/sharp-linux-s390x": "0.34.5",
-        "@img/sharp-linux-x64": "0.34.5",
-        "@img/sharp-linuxmusl-arm64": "0.34.5",
-        "@img/sharp-linuxmusl-x64": "0.34.5",
-        "@img/sharp-wasm32": "0.34.5",
-        "@img/sharp-win32-arm64": "0.34.5",
-        "@img/sharp-win32-ia32": "0.34.5",
-        "@img/sharp-win32-x64": "0.34.5"
+        "@img/sharp-darwin-arm64": "0.35.3",
+        "@img/sharp-darwin-x64": "0.35.3",
+        "@img/sharp-freebsd-wasm32": "0.35.3",
+        "@img/sharp-libvips-darwin-arm64": "1.3.2",
+        "@img/sharp-libvips-darwin-x64": "1.3.2",
+        "@img/sharp-libvips-linux-arm": "1.3.2",
+        "@img/sharp-libvips-linux-arm64": "1.3.2",
+        "@img/sharp-libvips-linux-ppc64": "1.3.2",
+        "@img/sharp-libvips-linux-riscv64": "1.3.2",
+        "@img/sharp-libvips-linux-s390x": "1.3.2",
+        "@img/sharp-libvips-linux-x64": "1.3.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.2",
+        "@img/sharp-linux-arm": "0.35.3",
+        "@img/sharp-linux-arm64": "0.35.3",
+        "@img/sharp-linux-ppc64": "0.35.3",
+        "@img/sharp-linux-riscv64": "0.35.3",
+        "@img/sharp-linux-s390x": "0.35.3",
+        "@img/sharp-linux-x64": "0.35.3",
+        "@img/sharp-linuxmusl-arm64": "0.35.3",
+        "@img/sharp-linuxmusl-x64": "0.35.3",
+        "@img/sharp-webcontainers-wasm32": "0.35.3",
+        "@img/sharp-win32-arm64": "0.35.3",
+        "@img/sharp-win32-ia32": "0.35.3",
+        "@img/sharp-win32-x64": "0.35.3"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
     "node_modules/sharp/node_modules/semver": {
diff --git a/package.json b/package.json
index c57d5a6..193faeb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fedihome",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "Your home on the Fediverse — self-hosted publishing for blog, photos, and federated social.",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@atproto/api": "^0.20.30",
+    "@atproto/api": "^0.20.31",
     "@fedify/fedify": "^2.3.3",
     "@fedify/next": "^2.3.3",
     "@prisma/adapter-pg": "^7.9.0",
@@ -32,20 +32,20 @@
     "@types/web-push": "^3.6.4",
     "dotenv": "^17.4.2",
     "fast-xml-parser": "^5.10.1",
-    "marked": "^18.0.6",
+    "marked": "^18.0.7",
     "music-metadata": "^11.14.0",
-    "next": "^16.2.10",
+    "next": "^16.2.11",
     "next-mdx-remote": "^6.0.0",
     "nodemailer": "^9.0.1",
     "pg": "^8.21.0",
-    "postcss": "^8.5.20",
+    "postcss": "^8.5.22",
     "prisma": "^7.9.0",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-masonry-css": "^1.0.16",
     "remark-gfm": "^4.0.1",
     "sanitize-html": "^2.17.6",
-    "sharp": "^0.34.5",
+    "sharp": "^0.35.3",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.3",
     "web-push": "^3.6.7"
@@ -57,13 +57,15 @@
     "@types/sanitize-html": "^2.16.1",
     "@vitest/coverage-v8": "^4.1.10",
     "eslint": "^10.7.0",
-    "eslint-config-next": "^16.2.10",
+    "eslint-config-next": "^16.2.11",
     "tsx": "^4.23.1",
     "vitest": "^4.1.10"
   },
   "overrides": {
     "yaml": "^2.8.3",
     "js-yaml": "^4.2.0",
+    "sharp": "$sharp",
+    "postcss": "$postcss",
     "@opentelemetry/core": "^2.8.0",
     "@hono/node-server": "^1.19.13"
   }
diff --git a/site.config.ts b/site.config.ts
index c51c548..6b60ecc 100644
--- a/site.config.ts
+++ b/site.config.ts
@@ -112,6 +112,30 @@ export const siteConfig = {
     shell: process.env.LAYOUT_SHELL || "",
   },
 
+  // Sidebar options (#307), used when layout.shell is "sidebar". `side` is
+  // "right" (default) or "left"; `blocks` is a comma-separated, ORDERED list of
+  // about/recent/sections/connect — the order is the render order, and omitting
+  // one hides it (drop `sections` to stop duplicating your header nav). Empty =
+  // built-in defaults.
+  sidebar: {
+    side: process.env.SIDEBAR_SIDE || "",
+    blocks: process.env.SIDEBAR_BLOCKS || "",
+  },
+
+  // Security policy (#59), web-editable in Admin → Site settings → Security.
+  // Days. adminSession default 30; appToken 0 = never expires (long-lived +
+  // revocable). Changes affect only newly-minted sessions/tokens.
+  security: {
+    adminSessionTtlDays: (() => {
+      const n = Number(process.env.ADMIN_SESSION_TTL_DAYS);
+      return Number.isInteger(n) && n > 0 ? n : 30;
+    })(),
+    appTokenTtlDays: (() => {
+      const n = Number(process.env.APP_TOKEN_TTL_DAYS);
+      return Number.isInteger(n) && n > 0 ? n : 0;
+    })(),
+  },
+
   // /audio podcast RSS feed overrides (#59). Empty = derive from your profile
   // (title "<author> — Audio", author = your name, etc.). All web-editable in
   // Admin → Site settings; env vars remain as defaults.
diff --git a/src/app/(public)/layout.tsx b/src/app/(public)/layout.tsx
index ee1e8ac..306b990 100644
--- a/src/app/(public)/layout.tsx
+++ b/src/app/(public)/layout.tsx
@@ -31,10 +31,18 @@ export default async function PublicLayout({ children }: { children: React.React
     // Same two-column grid + breakpoint already used by the photo detail page,
     // so it collapses to a single column on mobile consistently with the rest
     // of the site.
+    //
+    // Side (#307) is done with CSS `order`, not by reordering the DOM: content
+    // stays FIRST in source order, so on mobile (single column) the reader gets
+    // the post before the sidebar either way. Only the desktop columns swap.
+    const onLeft = site.sidebar.side === "left";
+    const cols = onLeft ? "lg:grid-cols-[300px_1fr]" : "lg:grid-cols-[1fr_300px]";
     return (
-      <div className="max-w-6xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8">
-        <div className="min-w-0">{children}</div>
-        <Sidebar />
+      <div className={`max-w-6xl mx-auto px-6 grid grid-cols-1 ${cols} gap-8`}>
+        <div className={`min-w-0 ${onLeft ? "lg:order-2" : ""}`}>{children}</div>
+        <div className={onLeft ? "lg:order-1" : ""}>
+          <Sidebar blocks={site.sidebar.blocks} />
+        </div>
       </div>
     );
   }
diff --git a/src/app/admin/site/SiteSettingsClient.tsx b/src/app/admin/site/SiteSettingsClient.tsx
index 424db4c..bc4a657 100644
--- a/src/app/admin/site/SiteSettingsClient.tsx
+++ b/src/app/admin/site/SiteSettingsClient.tsx
@@ -27,6 +27,7 @@ export default function SiteSettingsClient({
   accent,
   analyticsStatus,
   analyticsKey,
+  pushKey,
   encryptionAvailable,
   profile,
   profileDefaults,
@@ -37,6 +38,7 @@ export default function SiteSettingsClient({
   accent: { accentColor: string; themeAccents: Record<string, string> };
   analyticsStatus: { embedCode: string | null; unresolved: boolean };
   analyticsKey: { configured: boolean; source: "db" | "env" | null };
+  pushKey: { configured: boolean; source: "db" | "env" | null; subject: string };
   encryptionAvailable: boolean;
   profile: {
     authorName: string; authorTagline: string; authorBio: string;
@@ -55,6 +57,37 @@ export default function SiteSettingsClient({
   const [keyStatus, setKeyStatus] = useState(analyticsKey);
   const [keyInput, setKeyInput] = useState("");
   const [keyBusy, setKeyBusy] = useState(false);
+  // Web-push (VAPID) keys (#59) — generate/clear via a dedicated route; the
+  // private key is encrypted at rest and never sent to the browser.
+  const [pushStatus, setPushStatus] = useState(pushKey);
+  const [pushBusy, setPushBusy] = useState(false);
+
+  async function postPushKeys(action: "generate" | "clear"): Promise<void> {
+    if (action === "generate" && pushStatus.configured &&
+        !confirm("Generate new push keys? Every device currently enrolled for push will stop receiving notifications until it re-enables them.")) {
+      return;
+    }
+    setPushBusy(true);
+    setResult(null);
+    try {
+      const res = await fetch("/api/admin/push-keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setResult({ ok: false, msg: data.error || "Couldn't update the push keys." });
+        return;
+      }
+      setPushStatus(data.status);
+      setResult({ ok: true, msg: action === "clear" ? "Push keys cleared." : "Push keys generated — re-enable notifications on each device." });
+    } catch {
+      setResult({ ok: false, msg: "Couldn't update the push keys." });
+    } finally {
+      setPushBusy(false);
+    }
+  }
 
   /* ---- Profile overlay (#59) — name/tagline/bio/summary + avatar/banner ---- */
   // Held separately from `cfg` because the profile is a DIFFERENT store (the
@@ -274,6 +307,10 @@ export default function SiteSettingsClient({
       "layout.header": cfg.layout.header,
       "layout.footer": cfg.layout.footer,
       "layout.shell": cfg.layout.shell,
+      "sidebar.side": cfg.sidebar.side,
+      "sidebar.blocks": sidebarText,
+      "security.adminSessionTtlDays": String(cfg.security.adminSessionTtlDays),
+      "security.appTokenTtlDays": String(cfg.security.appTokenTtlDays),
       "contact.email": cfg.contact.email,
       "podcast.title": cfg.podcast.title,
       "podcast.author": cfg.podcast.author,
@@ -306,7 +343,8 @@ export default function SiteSettingsClient({
         "footer.webringUrl", "footer.webringLabel", "footer.badgeSrc", "footer.badgeHref",
         "footer.badgeAlt", "footer.fundingUrl", "footer.fundingLabel",
         "download.macos.enabled", "download.macos.releaseUrl", "download.macos.appStoreUrl",
-        "theme.id", "layout.feed", "layout.header", "layout.footer", "layout.shell", "contact.email",
+        "theme.id", "layout.feed", "layout.header", "layout.footer", "layout.shell",
+        "sidebar.side", "sidebar.blocks", "security.adminSessionTtlDays", "security.appTokenTtlDays", "contact.email",
         "podcast.title", "podcast.author", "podcast.description", "podcast.email", "podcast.image",
         "categories.photos", "categories.videos", "categories.audio",
         "analytics.siteId", "analytics.embedId",
@@ -324,6 +362,8 @@ export default function SiteSettingsClient({
   const setFooter = (patch: Partial<RuntimeSiteConfig["footer"]>) => setCfg((c) => ({ ...c, footer: { ...c.footer, ...patch } }));
   const setDownload = (patch: Partial<RuntimeSiteConfig["download"]>) => setCfg((c) => ({ ...c, download: { ...c.download, ...patch } }));
   const setLayout = (patch: Partial<RuntimeSiteConfig["layout"]>) => setCfg((c) => ({ ...c, layout: { ...c.layout, ...patch } }));
+  const setSidebar = (patch: Partial<RuntimeSiteConfig["sidebar"]>) => setCfg((c) => ({ ...c, sidebar: { ...c.sidebar, ...patch } }));
+  const setSecurity = (patch: Partial<RuntimeSiteConfig["security"]>) => setCfg((c) => ({ ...c, security: { ...c.security, ...patch } }));
   const setContact = (patch: Partial<RuntimeSiteConfig["contact"]>) => setCfg((c) => ({ ...c, contact: { ...c.contact, ...patch } }));
   const setPodcast = (patch: Partial<RuntimeSiteConfig["podcast"]>) => setCfg((c) => ({ ...c, podcast: { ...c.podcast, ...patch } }));
   const setAnalytics = (patch: Partial<RuntimeSiteConfig["analytics"]>) => setCfg((c) => ({ ...c, analytics: { ...c.analytics, ...patch } }));
@@ -340,6 +380,11 @@ export default function SiteSettingsClient({
   const [catText, setCatText] = useState(catCsv(effective));
   useEffect(() => { setCatText(catCsv(cfg)); }, [cfg.categories]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Sidebar block order (#307) — same raw-text treatment as categories above, so
+  // typing a comma doesn't get eaten by a `join()`-bound controlled input.
+  const [sidebarText, setSidebarText] = useState(effective.sidebar.blocks.join(", "));
+  useEffect(() => { setSidebarText(cfg.sidebar.blocks.join(", ")); }, [cfg.sidebar.blocks]);
+
   const text = (label: string, value: string, onChange: (v: string) => void, placeholder = "") => (
     <label className="flex flex-col gap-1 text-xs text-gray-400">
       <span>{label}</span>
@@ -550,6 +595,32 @@ export default function SiteSettingsClient({
             (v) => setLayout({ shell: v }),
             "The frame around your public pages (your admin screens are unaffected).",
           )}
+          {cfg.layout.shell === "sidebar" && (
+            <>
+              {select(
+                "Sidebar side",
+                cfg.sidebar.side,
+                [
+                  { value: "right", label: "Right" },
+                  { value: "left", label: "Left" },
+                ],
+                (v) => setSidebar({ side: v as RuntimeSiteConfig["sidebar"]["side"] }),
+                "Which side of your content the sidebar sits on. On mobile your content always comes first.",
+              )}
+              {text(
+                "Sidebar blocks",
+                sidebarText,
+                setSidebarText,
+                "about, recent, sections, connect",
+              )}
+              <p className="text-xs text-gray-600 m-0 -mt-1">
+                Comma-separated, in the order you want them. Leave a block out to hide it — drop{" "}
+                <code>sections</code> if you don&apos;t want your nav in both the header and the sidebar.
+                Blank uses the default order. Available: <code>about</code>, <code>recent</code>,{" "}
+                <code>sections</code>, <code>connect</code>.
+              </p>
+            </>
+          )}
         </>)}
 
         {section("Landing page", <>
@@ -665,6 +736,79 @@ export default function SiteSettingsClient({
           </div>
         </>)}
 
+        {section("Phone notifications (Web Push)", <>
+          <p className="text-xs text-gray-600 m-0">
+            Push notifications to your installed app (PWA) need a VAPID keypair. Generate one here — no
+            <code> npx web-push </code> or <code>.env</code> editing. The private key is stored encrypted;
+            after generating, enable notifications on each device from the 🔔 menu.
+          </p>
+          <p className="text-xs m-0">
+            {pushStatus.configured ? (
+              <span className="text-green-400">✓ Push keys configured{pushStatus.source === "env" ? " (from env)" : ""}.</span>
+            ) : (
+              <span className="text-gray-500">No push keys yet — notifications are off until you generate them.</span>
+            )}
+          </p>
+          {pushStatus.configured && (
+            <p className="text-xs text-amber-400/80 m-0">
+              ⚠️ Regenerating replaces your keys and <strong>unsubscribes every device</strong> — each one has to re-enable push.
+            </p>
+          )}
+          {!encryptionAvailable && (
+            <p className="text-xs text-amber-400 m-0">Set <code>ADMIN_SECRET</code> to store the private key encrypted at rest.</p>
+          )}
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => postPushKeys("generate")}
+              disabled={pushBusy || !encryptionAvailable}
+              className="btn-primary text-xs disabled:opacity-50"
+            >
+              {pushBusy ? "Working…" : pushStatus.configured ? "Regenerate keys" : "Generate keys"}
+            </button>
+            {pushStatus.source === "db" && (
+              <button
+                type="button"
+                onClick={() => postPushKeys("clear")}
+                disabled={pushBusy}
+                className="text-xs text-gray-400 hover:text-white underline disabled:opacity-40"
+              >
+                Clear saved keys
+              </button>
+            )}
+          </div>
+        </>)}
+
+        {section("Security", <>
+          <p className="text-xs text-gray-600 m-0">
+            Session and token lifetimes, in days. Changes apply to <strong>newly-created</strong> sessions and
+            tokens only — existing ones keep their original expiry.
+          </p>
+          <label className="flex flex-col gap-1 text-xs text-gray-400">
+            <span>Admin session lifetime (days)</span>
+            <input
+              type="number" min={1} max={3650}
+              value={cfg.security.adminSessionTtlDays}
+              onChange={(e) => setSecurity({ adminSessionTtlDays: Math.max(0, Math.floor(Number(e.target.value) || 0)) })}
+              className="w-28 bg-surface-800 border border-surface-700 rounded-md px-2 py-1.5 text-sm text-white"
+            />
+            <span className="text-gray-600">How long you stay signed in to the admin panel. Default 30.</span>
+          </label>
+          <label className="flex flex-col gap-1 text-xs text-gray-400">
+            <span>App token lifetime (days)</span>
+            <input
+              type="number" min={0} max={3650}
+              value={cfg.security.appTokenTtlDays}
+              onChange={(e) => setSecurity({ appTokenTtlDays: Math.max(0, Math.floor(Number(e.target.value) || 0)) })}
+              className="w-28 bg-surface-800 border border-surface-700 rounded-md px-2 py-1.5 text-sm text-white"
+            />
+            <span className="text-gray-600">
+              How long a generated app token lasts. <strong>0 = never expires</strong> (long-lived + revocable).
+              Setting a limit starts expiring newly-issued tokens.
+            </span>
+          </label>
+        </>)}
+
         <div className="flex items-center gap-3 py-4">
           <button onClick={save} disabled={saving} className="btn-primary disabled:opacity-50">
             {saving ? "Saving…" : "Save"}
diff --git a/src/app/admin/site/page.tsx b/src/app/admin/site/page.tsx
index 23f31f0..605aba8 100644
--- a/src/app/admin/site/page.tsx
+++ b/src/app/admin/site/page.tsx
@@ -8,6 +8,7 @@ import { getRuntimeProfile } from "@/lib/site-profile";
 import { siteConfig } from "@/../site.config";
 import { resolveTinylyticsEmbed } from "@/lib/tinylytics";
 import { getAnalyticsKeyStatus } from "@/lib/analytics-secret";
+import { getPushKeyStatus } from "@/lib/push-config";
 import { secretBoxAvailable } from "@/lib/secret-box";
 import TimelineLogin from "../../timeline/TimelineLogin";
 import SiteSettingsClient from "./SiteSettingsClient";
@@ -34,9 +35,10 @@ export default async function AdminSitePage() {
   // Resolve the collecting-embed code so the panel can confirm analytics is
   // actually collecting (vs configured-but-silently-404ing) (#288), and the
   // encrypted API-key status (#59) so the panel can set/show it in-app.
-  const [embedCode, analyticsKey] = await Promise.all([
+  const [embedCode, analyticsKey, pushKey] = await Promise.all([
     resolveTinylyticsEmbed(effective.analytics),
     getAnalyticsKeyStatus(),
+    getPushKeyStatus(),
   ]);
   const analyticsConfigured = !!(effective.analytics.siteId || effective.analytics.embedId);
   const analyticsStatus = {
@@ -64,6 +66,7 @@ export default async function AdminSitePage() {
       profileDefaults={{ avatarPath: siteConfig.avatarPath, bannerPath: siteConfig.bannerPath }}
       analyticsStatus={analyticsStatus}
       analyticsKey={analyticsKey}
+      pushKey={pushKey}
       encryptionAvailable={secretBoxAvailable()}
     />
   );
diff --git a/src/app/api/admin/push-keys/route.ts b/src/app/api/admin/push-keys/route.ts
new file mode 100644
index 0000000..3e0254b
--- /dev/null
+++ b/src/app/api/admin/push-keys/route.ts
@@ -0,0 +1,76 @@
+import { NextRequest, NextResponse } from "next/server";
+import { verifyAdmin, verifyOrigin } from "@/lib/auth";
+import { secretBoxAvailable } from "@/lib/secret-box";
+import {
+  getPushKeyStatus,
+  generateVapidKeys,
+  setVapidKeys,
+  clearVapidKeys,
+} from "@/lib/push-config";
+
+/**
+ * Admin VAPID / web-push keys (#59): generate, save or clear the keys in-app
+ * instead of editing `.env.local` + running `npx web-push generate-vapid-keys`.
+ * The private key is stored AES-256-GCM-encrypted (push-config → secret-box) and
+ * is NEVER returned to the client — GET reports only configured/source/subject.
+ *
+ * Cookie-only ON PURPOSE (`verifyAdmin`, no bearer path): keys are owner-only;
+ * an app token must never read or rotate them — same stance as
+ * /api/admin/analytics-key and /api/admin/integrations.
+ *
+ * ⚠️ generate / save / clear all PURGE every push subscription — see push-config.
+ */
+
+const CONTROL = /[\r\n]/;
+const clean = (v: unknown, max: number): string | null => {
+  if (typeof v !== "string") return null;
+  const t = v.trim();
+  return !t || t.length > max || CONTROL.test(t) ? null : t;
+};
+
+export async function GET(req: NextRequest) {
+  if (!(await verifyAdmin(req))) {
+    return NextResponse.json({ error: "unauthorized" }, { status: 401 });
+  }
+  return NextResponse.json({
+    status: await getPushKeyStatus(),
+    encryptionAvailable: secretBoxAvailable(),
+  });
+}
+
+export async function POST(req: NextRequest) {
+  if (!verifyOrigin(req)) {
+    return NextResponse.json({ error: "forbidden" }, { status: 403 });
+  }
+  if (!(await verifyAdmin(req))) {
+    return NextResponse.json({ error: "unauthorized" }, { status: 401 });
+  }
+
+  const body = await req.json().catch(() => ({}));
+  const action = body?.action;
+  const subject = clean(body?.subject, 200) ?? undefined; // optional mailto:
+
+  if (action === "clear") {
+    await clearVapidKeys();
+    return NextResponse.json({ success: true, status: await getPushKeyStatus() });
+  }
+
+  if (action === "generate") {
+    const r = await generateVapidKeys(subject);
+    if (!r.ok) return NextResponse.json({ error: r.error }, { status: 400 });
+    return NextResponse.json({ success: true, status: await getPushKeyStatus() });
+  }
+
+  if (action === "save") {
+    const publicKey = clean(body?.publicKey, 500);
+    const privateKey = clean(body?.privateKey, 500);
+    if (!publicKey || !privateKey) {
+      return NextResponse.json({ error: "Both a public and private VAPID key are required." }, { status: 400 });
+    }
+    const r = await setVapidKeys(publicKey, privateKey, subject);
+    if (!r.ok) return NextResponse.json({ error: r.error }, { status: 400 });
+    return NextResponse.json({ success: true, status: await getPushKeyStatus() });
+  }
+
+  return NextResponse.json({ error: "unknown action" }, { status: 400 });
+}
diff --git a/src/app/api/media/route.ts b/src/app/api/media/route.ts
index bb9cc6e..05aea95 100644
--- a/src/app/api/media/route.ts
+++ b/src/app/api/media/route.ts
@@ -2,13 +2,8 @@ import { NextRequest, NextResponse } from "next/server";
 import { authenticateApiRequest, verifyOrigin } from "@/lib/auth";
 import { writeFile, mkdir } from "fs/promises";
 import path from "path";
-import sharp from "sharp";
 import { parseBuffer as parseAudioMetadata } from "music-metadata";
-
-// Images larger than this get optimized
-const MAX_DIMENSION = 2400; // px (longest edge)
-const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB — optimize anything bigger
-const WEBP_QUALITY = 85;
+import { saveUploadedImage, IMAGE_TYPES } from "@/lib/media";
 
 // Audio cap (per-file)
 const MAX_AUDIO_SIZE = 100 * 1024 * 1024; // 100 MB
@@ -33,13 +28,6 @@ export async function POST(req: NextRequest) {
     return NextResponse.json({ error: "no file uploaded" }, { status: 400 });
   }
 
-  const imageTypes = [
-    "image/jpeg",
-    "image/png",
-    "image/webp",
-    "image/gif",
-    "image/heic",
-  ];
   const audioTypes = ["audio/mpeg", "audio/mp3"];
 
   // Audio path
@@ -47,67 +35,17 @@ export async function POST(req: NextRequest) {
     return await handleAudioUpload(file);
   }
 
-  // Image path
-  if (!imageTypes.includes(file.type)) {
+  // Image path — validation + optimise + write shared with the wizard (#59).
+  if (!IMAGE_TYPES.includes(file.type)) {
     return NextResponse.json({ error: "unsupported file type" }, { status: 400 });
   }
-
-  // Create upload directory
-  const now = new Date();
-  const year = now.getFullYear();
-  const month = String(now.getMonth() + 1).padStart(2, "0");
-  const uploadDir = path.join(process.cwd(), "public", "uploads", String(year), month);
-  await mkdir(uploadDir, { recursive: true });
-
-  const timestamp = Date.now().toString(36);
-  let buffer: Buffer = Buffer.from(await file.arrayBuffer()) as Buffer;
-
-  // Optimize if image is large (skip GIFs to preserve animation)
-  let ext: string;
-  if (file.type !== "image/gif" && (buffer.length > MAX_FILE_SIZE || file.type === "image/heic")) {
-    // Resize + convert to WebP
-    const image = sharp(buffer);
-    const metadata = await image.metadata();
-
-    let pipeline = image;
-
-    // Resize if dimensions exceed max
-    if (metadata.width && metadata.height) {
-      const longest = Math.max(metadata.width, metadata.height);
-      if (longest > MAX_DIMENSION) {
-        pipeline = pipeline.resize({
-          width: metadata.width >= metadata.height ? MAX_DIMENSION : undefined,
-          height: metadata.height > metadata.width ? MAX_DIMENSION : undefined,
-          fit: "inside",
-          withoutEnlargement: true,
-        });
-      }
-    }
-
-    buffer = await pipeline.rotate().webp({ quality: WEBP_QUALITY }).toBuffer();
-    ext = "webp";
-  } else if (file.type !== "image/gif") {
-    // Strip EXIF from small images (GPS, camera serial, etc.)
-    buffer = await sharp(buffer).rotate().toBuffer();
-    const extFromMime: Record<string, string> = {
-      "image/jpeg": "jpg", "image/png": "png", "image/webp": "webp",
-    };
-    ext = extFromMime[file.type] || "jpg";
-  } else {
-    ext = "gif";
+  const result = await saveUploadedImage(file);
+  if (!result.ok) {
+    return NextResponse.json({ error: result.error }, { status: 400 });
   }
-
-  const filename = `${timestamp}.${ext}`;
-  const filePath = path.join(uploadDir, filename);
-  await writeFile(filePath, buffer);
-
   const siteUrl = process.env.SITE_URL || "http://localhost:3000";
-  const url = `${siteUrl}/uploads/${year}/${month}/${filename}`;
-
-  return NextResponse.json({ url }, {
-    status: 201,
-    headers: { Location: url },
-  });
+  const url = `${siteUrl}${result.path}`;
+  return NextResponse.json({ url }, { status: 201, headers: { Location: url } });
 }
 
 async function handleAudioUpload(file: File): Promise<NextResponse> {
diff --git a/src/app/api/oauth/token/route.ts b/src/app/api/oauth/token/route.ts
index 2c8f55a..75adedb 100644
--- a/src/app/api/oauth/token/route.ts
+++ b/src/app/api/oauth/token/route.ts
@@ -19,8 +19,10 @@ const tokenLimiter = makeRateLimiter(20, 60_000);
  * Optional token lifetime. Set `APP_TOKEN_TTL_DAYS` to expire OAuth tokens after
  * N days; unset (or <= 0) → no expiry (long-lived + revocable), the default.
  */
-function appTokenExpiry(): Date | null {
-  const days = Number(process.env.APP_TOKEN_TTL_DAYS);
+async function appTokenExpiry(): Promise<Date | null> {
+  // Web-editable (Admin → Security), env as the default (#59). 0 = never expires.
+  const { getRuntimeSiteConfig } = await import("@/lib/site-settings");
+  const days = (await getRuntimeSiteConfig()).security.appTokenTtlDays;
   if (!Number.isFinite(days) || days <= 0) return null;
   return new Date(Date.now() + days * 24 * 60 * 60 * 1000);
 }
@@ -111,7 +113,7 @@ export async function POST(req: NextRequest) {
     scope: grantedScope,
     clientId: client.id,
     createdVia: "oauth",
-    expiresAt: appTokenExpiry(), // null (long-lived + revocable) unless APP_TOKEN_TTL_DAYS is set
+    expiresAt: await appTokenExpiry(), // null (long-lived + revocable) unless a TTL is set
   });
 
   return NextResponse.json(
diff --git a/src/app/api/push/route.ts b/src/app/api/push/route.ts
index 13c598d..deb2871 100644
--- a/src/app/api/push/route.ts
+++ b/src/app/api/push/route.ts
@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { prisma } from "@/lib/db";
 import { verifyAdmin, verifyOrigin } from "@/lib/auth";
-import { getVapidPublicKey, pushConfigured } from "@/lib/push";
+import { getVapidPublicKey, pushConfigured } from "@/lib/push-config";
 
 /**
  * Web Push subscription management for the owner.
@@ -15,12 +15,12 @@ export async function GET(req: NextRequest) {
   if (!(await verifyAdmin(req))) {
     return NextResponse.json({ error: "unauthorized" }, { status: 401 });
   }
-  const count = await prisma.pushSubscription.count();
-  return NextResponse.json({
-    configured: pushConfigured(),
-    publicKey: getVapidPublicKey(),
-    count,
-  });
+  const [count, configured, publicKey] = await Promise.all([
+    prisma.pushSubscription.count(),
+    pushConfigured(),
+    getVapidPublicKey(),
+  ]);
+  return NextResponse.json({ configured, publicKey, count });
 }
 
 export async function POST(req: NextRequest) {
diff --git a/src/app/api/push/test/route.ts b/src/app/api/push/test/route.ts
index 9beb1ac..4cd81e6 100644
--- a/src/app/api/push/test/route.ts
+++ b/src/app/api/push/test/route.ts
@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { verifyAdmin, verifyOrigin } from "@/lib/auth";
-import { sendPushToOwner, pushConfigured } from "@/lib/push";
+import { sendPushToOwner } from "@/lib/push";
+import { pushConfigured } from "@/lib/push-config";
 import { siteConfig } from "@/../site.config";
 
 /** Fire a test push to all of the owner's devices so a new install can be verified. */
@@ -11,7 +12,7 @@ export async function POST(req: NextRequest) {
   if (!verifyOrigin(req)) {
     return NextResponse.json({ error: "bad origin" }, { status: 403 });
   }
-  if (!pushConfigured()) {
+  if (!(await pushConfigured())) {
     return NextResponse.json({ error: "push not configured" }, { status: 503 });
   }
 
diff --git a/src/app/api/setup/media/route.ts b/src/app/api/setup/media/route.ts
new file mode 100644
index 0000000..571f59a
--- /dev/null
+++ b/src/app/api/setup/media/route.ts
@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from "next/server";
+import { verifyAdmin } from "@/lib/auth";
+import { verifySetupToken } from "@/lib/setup-token";
+import { saveUploadedImage } from "@/lib/media";
+
+/**
+ * First-run image upload for the setup wizard (#59) — avatar/banner, before an
+ * owner cookie exists. Gated exactly like /api/setup: once `ADMIN_SECRET` is set
+ * (setup complete or an install.sh deploy) it requires admin auth; on a fresh
+ * deploy it requires the out-of-band setup token (header `x-setup-token`). Images
+ * only, re-encoded (EXIF-stripped) by the shared pipeline, written to
+ * public/uploads. Returns the RELATIVE path the wizard then submits to /api/setup.
+ */
+export async function POST(req: NextRequest) {
+  if (process.env.ADMIN_SECRET) {
+    if (!(await verifyAdmin(req))) {
+      return NextResponse.json({ error: "unauthorized" }, { status: 401 });
+    }
+  } else if (!(await verifySetupToken(req.headers.get("x-setup-token")))) {
+    return NextResponse.json({ error: "setup token required" }, { status: 401 });
+  }
+
+  const form = await req.formData().catch(() => null);
+  const file = form?.get("file");
+  if (!(file instanceof File)) {
+    return NextResponse.json({ error: "no file uploaded" }, { status: 400 });
+  }
+
+  const result = await saveUploadedImage(file);
+  if (!result.ok) {
+    return NextResponse.json({ error: result.error }, { status: 400 });
+  }
+  return NextResponse.json({ path: result.path }, { status: 201 });
+}
diff --git a/src/app/api/setup/route.ts b/src/app/api/setup/route.ts
index b08e0c2..9c69924 100644
--- a/src/app/api/setup/route.ts
+++ b/src/app/api/setup/route.ts
@@ -1,11 +1,12 @@
 import { NextResponse } from "next/server";
-import crypto from "crypto";
 import { PrismaClient } from "@/generated/prisma/client";
 import { PrismaPg } from "@prisma/adapter-pg";
 import * as fs from "fs";
 import * as path from "path";
-import { verifyAdmin, safeCompare } from "@/lib/auth";
+import { verifyAdmin } from "@/lib/auth";
 import { applySiteConfig } from "@/lib/site-settings";
+import { verifySetupToken } from "@/lib/setup-token";
+import { validateImagePath } from "@/lib/media";
 
 const prisma = new PrismaClient({
   adapter: new PrismaPg({ connectionString: process.env.DATABASE_URL }),
@@ -88,30 +89,6 @@ function validateSiteUrl(raw: unknown): { siteUrl: string; host: string } {
   return { siteUrl: u.origin, host: u.host };
 }
 
-/**
- * First-run setup token. When ADMIN_SECRET isn't configured yet (a fresh,
- * possibly publicly-exposed deploy), completing setup requires this out-of-band
- * token so an anonymous visitor can't claim admin before the owner. Taken from
- * SETUP_TOKEN if set; otherwise a random token is generated once, stored, and
- * printed to the server console for the operator to copy.
- */
-async function getOrCreateSetupToken(): Promise<string> {
-  const existing = await prisma.siteSetting.findUnique({ where: { key: "setup_token" } });
-  if (existing) return existing.value;
-  const token = crypto.randomBytes(24).toString("hex");
-  try {
-    await prisma.siteSetting.create({ data: { key: "setup_token", value: token } });
-    console.warn(
-      `\n[FediHome] First-run setup token — enter this in the setup wizard to complete setup:\n          ${token}\n`
-    );
-    return token;
-  } catch {
-    // Lost a race to create it — read whoever won.
-    const again = await prisma.siteSetting.findUnique({ where: { key: "setup_token" } });
-    return again?.value ?? token;
-  }
-}
-
 export async function POST(request: Request) {
   try {
     // C6: if ADMIN_SECRET is already configured, this endpoint must require
@@ -133,9 +110,7 @@ export async function POST(request: Request) {
     // admin before the owner. install.sh sets ADMIN_SECRET, so its users never
     // reach this branch; the block above handles the already-configured case.
     if (!process.env.ADMIN_SECRET) {
-      const expected = process.env.SETUP_TOKEN || (await getOrCreateSetupToken());
-      const provided = typeof body.setupToken === "string" ? body.setupToken : "";
-      if (!provided || !safeCompare(provided, expected)) {
+      if (!(await verifySetupToken(body.setupToken))) {
         return NextResponse.json(
           {
             error:
@@ -160,6 +135,22 @@ export async function POST(request: Request) {
       );
     }
 
+    // Optional avatar/banner (#59) — paths from a prior setup-token-gated upload.
+    // Validate before the claim; a bad path is a 400, not a silent skip.
+    let avatarPath: string | undefined;
+    let bannerPath: string | undefined;
+    if (typeof body.avatarPath === "string" && body.avatarPath.trim()) {
+      const v = validateImagePath(body.avatarPath);
+      if (!v) return NextResponse.json({ error: "Invalid avatar image path." }, { status: 400 });
+      avatarPath = v;
+    }
+    if (typeof body.bannerPath === "string" && body.bannerPath.trim()) {
+      const v = validateImagePath(body.bannerPath);
+      if (!v) return NextResponse.json({ error: "Invalid banner image path." }, { status: 400 });
+      bannerPath = v;
+    }
+    const imageData = { ...(avatarPath ? { avatarPath } : {}), ...(bannerPath ? { bannerPath } : {}) };
+
     // Resolve + validate EVERYTHING before claiming the setup slot. This used to
     // happen after the claim, which meant a bad siteUrl (or an unwritable
     // .env.local) left `setupDone=true` with NO ADMIN_SECRET written — the proxy
@@ -203,6 +194,7 @@ export async function POST(request: Request) {
           authorName: authorName || "Your Name",
           authorTagline,
           contactEmail,
+          ...imageData,
         },
       });
       claimed = true;
@@ -216,6 +208,7 @@ export async function POST(request: Request) {
           authorName: authorName || "Your Name",
           authorTagline,
           contactEmail,
+          ...imageData,
         },
       });
       claimed = upd.count > 0;
diff --git a/src/app/globals.css b/src/app/globals.css
index 0f15bea..7f54f20 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -27,6 +27,19 @@
   --color-moss-500: #10b981;
   --color-moss-600: #059669;
 
+  /* Text ramp (#250), brightest -> dimmest. Each defaults to the exact Tailwind
+     neutral the components used before the migration, so `text-content-faint`
+     and `text-gray-500` render identically — the swap is a pure rename. Themes
+     override these to move text colour, which is what a light theme needs
+     (`gray-*` is fixed by Tailwind; only tokens can move). See themes/content.ts. */
+  --color-content: var(--color-white);
+  --color-content-strong: var(--color-gray-200);
+  --color-content-muted: var(--color-gray-300);
+  --color-content-subtle: var(--color-gray-400);
+  --color-content-faint: var(--color-gray-500);
+  --color-content-dim: var(--color-gray-600);
+  --color-content-ghost: var(--color-gray-700);
+
   /* Typography */
   --font-display: "Source Serif 4", "Georgia", serif;
   --font-body: "Inter", system-ui, -apple-system, sans-serif;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e04d081..c67239a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -47,8 +47,9 @@ export async function generateMetadata(): Promise<Metadata> {
     },
     robots: { index: true, follow: true },
     // PWA: installable to the iOS/Android home screen. Push (incl. iOS 16.4+) is
-    // wired up via /sw.js + the NotificationBell "Enable phone notifications"
-    // (dormant until VAPID keys are set in .env.local).
+    // wired up via /sw.js + the NotificationBell "Enable phone notifications",
+    // which generates the VAPID keys in-app on first use (#59) — the VAPID_* env
+    // vars remain a fallback for automated deploys.
     manifest: "/manifest.webmanifest",
     appleWebApp: {
       capable: true,
diff --git a/src/app/setup/page.tsx b/src/app/setup/page.tsx
index f2c0079..77c3c68 100644
--- a/src/app/setup/page.tsx
+++ b/src/app/setup/page.tsx
@@ -96,6 +96,34 @@ export default function SetupWizard() {
   const [adminSecret, setAdminSecret] = useState("");
   const [savedPassword, setSavedPassword] = useState(false);
   const [setupToken, setSetupToken] = useState("");
+  // Optional avatar/banner (#59) — relative /uploads/ paths from the setup-token-
+  // gated upload; "" = keep the built-in default.
+  const [avatarPath, setAvatarPath] = useState("");
+  const [bannerPath, setBannerPath] = useState("");
+  const [uploadingImg, setUploadingImg] = useState<"avatar" | "banner" | null>(null);
+
+  async function uploadWizardImage(kind: "avatar" | "banner", file: File) {
+    if (!setupToken.trim()) { setError("Enter your setup token above before uploading."); return; }
+    if (file.size > 8 * 1024 * 1024) { setError("That image is over 8 MB — please pick a smaller one."); return; }
+    setUploadingImg(kind);
+    setError(null);
+    try {
+      const fd = new FormData();
+      fd.append("file", file);
+      const res = await fetch("/api/setup/media", {
+        method: "POST",
+        headers: { "x-setup-token": setupToken },
+        body: fd,
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) { setError(data.error || "Upload failed."); return; }
+      (kind === "avatar" ? setAvatarPath : setBannerPath)(data.path);
+    } catch {
+      setError("Upload failed.");
+    } finally {
+      setUploadingImg(null);
+    }
+  }
 
   // Site features (#59) — collected here and written to the DB-backed site
   // config, so a fresh install is configured without editing files. Defaults
@@ -112,6 +140,7 @@ export default function SetupWizard() {
   const [headerLayout, setHeaderLayout] = useState(""); // "" = inherit the theme's default
   const [footerLayout, setFooterLayout] = useState(""); // "" = inherit the theme's default
   const [shellLayout, setShellLayout] = useState(""); // "" = inherit the theme's default
+  const [sidebarSide, setSidebarSide] = useState(""); // "" = right (the default side)
   // Set when the server detects setup ran inside a container (#308) — the
   // .env.local it wrote isn't the file compose reads on the next start.
   const [containerised, setContainerised] = useState(false);
@@ -192,6 +221,7 @@ export default function SetupWizard() {
     if (headerLayout) siteConfig["layout.header"] = headerLayout; // "" = inherit → no override
     if (footerLayout) siteConfig["layout.footer"] = footerLayout; // "" = inherit → no override
     if (shellLayout) siteConfig["layout.shell"] = shellLayout; // "" = inherit → no override
+    if (sidebarSide) siteConfig["sidebar.side"] = sidebarSide; // "" = right → no override
     try {
       const res = await fetch("/api/setup", {
         method: "POST",
@@ -205,6 +235,8 @@ export default function SetupWizard() {
           adminSecret,
           siteUrl,
           setupToken,
+          ...(avatarPath ? { avatarPath } : {}),
+          ...(bannerPath ? { bannerPath } : {}),
           ...(Object.keys(siteConfig).length ? { siteConfig } : {}),
         }),
       });
@@ -541,6 +573,19 @@ export default function SetupWizard() {
                     <option value="sidebar">Sidebar</option>
                   </select>
                 </label>
+                {shellLayout === "sidebar" && (
+                  <label className="flex flex-col gap-1 text-xs text-gray-400">
+                    <span>Sidebar side</span>
+                    <select
+                      value={sidebarSide}
+                      onChange={(e) => setSidebarSide(e.target.value)}
+                      className="bg-surface-800 border border-surface-700 rounded-md px-2 py-1.5 text-sm text-white"
+                    >
+                      <option value="">Right</option>
+                      <option value="left">Left</option>
+                    </select>
+                  </label>
+                )}
               </div>
 
               <div className="flex justify-between">
@@ -612,6 +657,45 @@ export default function SetupWizard() {
                 </p>
               </div>
 
+              {/* Optional avatar/banner (#59) — needs the token above, so it lives here. */}
+              <div className="mb-6">
+                <label className={labelClass}>Profile picture &amp; banner (optional)</label>
+                <div className="flex items-center gap-4 mt-1">
+                  {(["avatar", "banner"] as const).map((kind) => {
+                    const p = kind === "avatar" ? avatarPath : bannerPath;
+                    return (
+                      <div key={kind} className="flex items-center gap-2">
+                        {p && (
+                          // eslint-disable-next-line @next/next/no-img-element
+                          <img src={p} alt="" className={kind === "avatar" ? "w-10 h-10 rounded-full object-cover" : "w-16 h-10 rounded object-cover"} />
+                        )}
+                        <label className="btn-outlined text-xs cursor-pointer">
+                          {uploadingImg === kind ? "Uploading…" : p ? `Change ${kind}` : `Add ${kind}`}
+                          <input
+                            type="file"
+                            accept="image/jpeg,image/png,image/webp,image/gif"
+                            className="hidden"
+                            disabled={uploadingImg !== null}
+                            onChange={(e) => {
+                              const f = e.target.files?.[0];
+                              e.target.value = "";
+                              if (f) void uploadWizardImage(kind, f);
+                            }}
+                          />
+                        </label>
+                      </div>
+                    );
+                  })}
+                </div>
+                <p className="text-gray-500 text-xs mt-1.5">You can also set these later in the admin panel.</p>
+              </div>
+
+              {error && (
+                <div className="rounded-lg bg-red-950/30 border border-red-800/40 p-3 mb-4">
+                  <p className="text-red-400 text-sm">{error}</p>
+                </div>
+              )}
+
               <div className="flex justify-between">
                 <button onClick={prev} className="btn-outlined cursor-pointer">Back</button>
                 <button
@@ -653,6 +737,7 @@ export default function SetupWizard() {
                     ["Header layout", headerLayout || "Theme default"],
                     ["Footer layout", footerLayout || "Theme default"],
                     ["Page width", shellLayout || "Theme default"],
+                    ...(shellLayout === "sidebar" ? [["Sidebar side", sidebarSide || "Right"]] : []),
                   ].map(([label, value], i) => (
                     <div key={label as string}>
                       {i > 0 && <div className="divider mb-3" />}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index a750581..19c39be 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -17,14 +17,14 @@ export default async function Footer() {
       <div className="max-w-5xl mx-auto px-6 py-10">
         <div className="flex flex-col md:flex-row items-center justify-between gap-6">
           <div className="text-center md:text-left">
-            <p className="text-sm text-gray-500">
+            <p className="text-sm text-content-faint">
               &copy; {new Date().getFullYear()} {profile.authorName}
             </p>
-            <p className="text-xs text-gray-600 mt-1">
+            <p className="text-xs text-content-dim mt-1">
               Self-owned. Self-hosted. Fediverse-native.
             </p>
             {stats && (
-              <p className="text-xs text-gray-700 mt-1 font-mono">
+              <p className="text-xs text-content-ghost mt-1 font-mono">
                 {stats.totalHits.toLocaleString()} visits
                 {stats.totalKudos > 0 && ` · ${stats.totalKudos} kudos`}
               </p>
@@ -58,7 +58,7 @@ export default async function Footer() {
               {webringUrl && (
                 <a
                   href={webringUrl}
-                  className="text-sm text-gray-400 hover:text-accent-400 transition-colors"
+                  className="text-sm text-content-subtle hover:text-accent-400 transition-colors"
                 >
                   {webringLabel}
                 </a>
@@ -68,7 +68,7 @@ export default async function Footer() {
                   href={fundingUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-sm text-gray-400 hover:text-accent-400 transition-colors"
+                  className="text-sm text-content-subtle hover:text-accent-400 transition-colors"
                 >
                   ♥ {fundingLabel}
                 </a>
@@ -77,8 +77,8 @@ export default async function Footer() {
           )}
 
           {/* Right: handle + links */}
-          <div className="flex items-center gap-5 text-gray-500">
-            <span className="text-xs text-gray-600 font-mono">
+          <div className="flex items-center gap-5 text-content-faint">
+            <span className="text-xs text-content-dim font-mono">
               {siteConfig.fediAddress}
             </span>
 
diff --git a/src/components/layout/FooterColumns.tsx b/src/components/layout/FooterColumns.tsx
index 709f695..1398a87 100644
--- a/src/components/layout/FooterColumns.tsx
+++ b/src/components/layout/FooterColumns.tsx
@@ -21,10 +21,10 @@ export default async function FooterColumns() {
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
           {/* About */}
           <div>
-            <h2 className="text-sm font-semibold text-white mb-2">{siteName}</h2>
-            <p className="text-xs text-gray-600">Self-owned. Self-hosted. Fediverse-native.</p>
+            <h2 className="text-sm font-semibold text-content mb-2">{siteName}</h2>
+            <p className="text-xs text-content-dim">Self-owned. Self-hosted. Fediverse-native.</p>
             {stats && (
-              <p className="text-xs text-gray-700 mt-2 font-mono">
+              <p className="text-xs text-content-ghost mt-2 font-mono">
                 {stats.totalHits.toLocaleString()} visits
                 {stats.totalKudos > 0 && ` · ${stats.totalKudos} kudos`}
               </p>
@@ -34,11 +34,11 @@ export default async function FooterColumns() {
           {/* Sections */}
           {navLinks.length > 0 && (
             <div>
-              <h2 className="text-sm font-semibold text-white mb-2">Sections</h2>
+              <h2 className="text-sm font-semibold text-content mb-2">Sections</h2>
               <ul className="flex flex-col gap-1.5">
                 {navLinks.map((link) => (
                   <li key={link.href}>
-                    <Link href={link.href} className="text-xs text-gray-500 hover:text-accent-400 transition-colors">
+                    <Link href={link.href} className="text-xs text-content-faint hover:text-accent-400 transition-colors">
                       {link.label}
                     </Link>
                   </li>
@@ -49,9 +49,9 @@ export default async function FooterColumns() {
 
           {/* Connect */}
           <div>
-            <h2 className="text-sm font-semibold text-white mb-2">Connect</h2>
-            <p className="text-xs text-gray-600 font-mono mb-2">{fediAddress}</p>
-            <div className="flex items-center gap-4 text-gray-500">
+            <h2 className="text-sm font-semibold text-content mb-2">Connect</h2>
+            <p className="text-xs text-content-dim font-mono mb-2">{fediAddress}</p>
+            <div className="flex items-center gap-4 text-content-faint">
               <a href="/feed.xml" className="hover:text-accent-400 transition-colors" title="RSS Feed">
                 <RssIcon />
               </a>
@@ -92,7 +92,7 @@ export default async function FooterColumns() {
           </div>
         </div>
 
-        <p className="text-xs text-gray-600 mt-8 pt-6 border-t border-surface-800">
+        <p className="text-xs text-content-dim mt-8 pt-6 border-t border-surface-800">
           &copy; {year} {authorName}
         </p>
       </div>
diff --git a/src/components/layout/FooterMinimal.tsx b/src/components/layout/FooterMinimal.tsx
index e276c66..4f14aec 100644
--- a/src/components/layout/FooterMinimal.tsx
+++ b/src/components/layout/FooterMinimal.tsx
@@ -13,10 +13,10 @@ export default async function FooterMinimal() {
     <footer className="mt-auto">
       <div className="divider" />
       <div className="max-w-5xl mx-auto px-6 py-6">
-        <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs text-gray-600">
+        <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs text-content-dim">
           <span>&copy; {year} {authorName}</span>
-          <span className="font-mono text-gray-700">{fediAddress}</span>
-          <a href="/feed.xml" className="text-gray-500 hover:text-accent-400 transition-colors" title="RSS Feed">
+          <span className="font-mono text-content-ghost">{fediAddress}</span>
+          <a href="/feed.xml" className="text-content-faint hover:text-accent-400 transition-colors" title="RSS Feed">
             <RssIcon />
           </a>
         </div>
diff --git a/src/components/layout/HeaderCentered.tsx b/src/components/layout/HeaderCentered.tsx
index 5736604..6e0bbf4 100644
--- a/src/components/layout/HeaderCentered.tsx
+++ b/src/components/layout/HeaderCentered.tsx
@@ -19,12 +19,12 @@ export default async function HeaderCentered() {
             collapsed menu's dropdown (anchored at top-14) lines up. */}
         <div className="h-14 flex items-center justify-between">
           <div className="w-16 md:w-24" aria-hidden />
-          <Link href="/" className="font-display text-xl font-bold text-white hover:text-accent-400 transition-colors text-center">
+          <Link href="/" className="font-display text-xl font-bold text-content hover:text-accent-400 transition-colors text-center">
             {name}
           </Link>
           <div className="flex items-center gap-3 w-16 md:w-24 justify-end">
             {isAdmin && <NotificationBell />}
-            <a href="/feed.xml" className="text-gray-500 hover:text-accent-400 transition-colors hidden md:block" title="RSS Feed">
+            <a href="/feed.xml" className="text-content-faint hover:text-accent-400 transition-colors hidden md:block" title="RSS Feed">
               <RssIcon />
             </a>
             <MobileMenu isAdmin={isAdmin} links={navLinks} />
@@ -34,12 +34,12 @@ export default async function HeaderCentered() {
         {/* Row 2: centered nav links (desktop only) */}
         <div className="hidden md:flex items-center justify-center gap-6 pb-2 -mt-1">
           {navLinks.map((link) => (
-            <Link key={link.href} href={link.href} className="text-sm text-gray-400 hover:text-accent-400 transition-colors">
+            <Link key={link.href} href={link.href} className="text-sm text-content-subtle hover:text-accent-400 transition-colors">
               {link.label}
             </Link>
           ))}
           {isAdmin && (
-            <Link href="/timeline" className="text-xs text-gray-500 hover:text-accent-400 transition-colors">
+            <Link href="/timeline" className="text-xs text-content-faint hover:text-accent-400 transition-colors">
               Fedi Feed
             </Link>
           )}
diff --git a/src/components/layout/HeaderMinimal.tsx b/src/components/layout/HeaderMinimal.tsx
index 7b695a1..ef78965 100644
--- a/src/components/layout/HeaderMinimal.tsx
+++ b/src/components/layout/HeaderMinimal.tsx
@@ -15,7 +15,7 @@ export default async function HeaderMinimal() {
   return (
     <nav className="border-b border-surface-800 bg-surface-950/90 backdrop-blur-md sticky top-0 z-50">
       <div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
-        <Link href="/" className="font-display text-lg font-bold text-white hover:text-accent-400 transition-colors">
+        <Link href="/" className="font-display text-lg font-bold text-content hover:text-accent-400 transition-colors">
           {name}
         </Link>
         <div className="flex items-center gap-3">
diff --git a/src/components/layout/MobileMenu.tsx b/src/components/layout/MobileMenu.tsx
index bb1188e..e86e6c0 100644
--- a/src/components/layout/MobileMenu.tsx
+++ b/src/components/layout/MobileMenu.tsx
@@ -28,7 +28,7 @@ export default function MobileMenu({
       {/* Hamburger button */}
       <button
         onClick={() => setOpen(!open)}
-        className="p-1.5 text-gray-400 hover:text-accent-400 transition-colors"
+        className="p-1.5 text-content-subtle hover:text-accent-400 transition-colors"
         aria-label="Menu"
       >
         {open ? (
@@ -53,7 +53,7 @@ export default function MobileMenu({
                 className={`text-base py-2.5 border-b border-surface-800/50 transition-colors ${
                   pathname === link.href
                     ? "text-accent-400"
-                    : "text-gray-300 hover:text-accent-400"
+                    : "text-content-muted hover:text-accent-400"
                 }`}
               >
                 {link.label}
@@ -62,14 +62,14 @@ export default function MobileMenu({
             {isAdmin && (
               <Link
                 href="/timeline"
-                className="text-base py-2.5 border-b border-surface-800/50 text-gray-500 hover:text-accent-400 transition-colors"
+                className="text-base py-2.5 border-b border-surface-800/50 text-content-faint hover:text-accent-400 transition-colors"
               >
                 Fedi Feed
               </Link>
             )}
             <Link
               href="/feed.xml"
-              className="text-base py-2.5 text-gray-500 hover:text-accent-400 transition-colors"
+              className="text-base py-2.5 text-content-faint hover:text-accent-400 transition-colors"
             >
               RSS Feed
             </Link>
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 44a2c54..a609b87 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -17,7 +17,7 @@ export default async function Navbar() {
   return (
     <nav className="border-b border-surface-800 bg-surface-950/90 backdrop-blur-md sticky top-0 z-50">
       <div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
-        <Link href="/" className="flex-shrink-0 font-display text-lg font-bold text-white hover:text-accent-400 transition-colors">
+        <Link href="/" className="flex-shrink-0 font-display text-lg font-bold text-content hover:text-accent-400 transition-colors">
           {siteCfg.name}
         </Link>
 
@@ -26,7 +26,7 @@ export default async function Navbar() {
             <Link
               key={link.href}
               href={link.href}
-              className="text-sm text-gray-400 hover:text-accent-400 transition-colors"
+              className="text-sm text-content-subtle hover:text-accent-400 transition-colors"
             >
               {link.label}
             </Link>
@@ -37,7 +37,7 @@ export default async function Navbar() {
           {isAdmin && (
             <Link
               href="/timeline"
-              className="text-xs text-gray-500 hover:text-accent-400 transition-colors hidden md:inline"
+              className="text-xs text-content-faint hover:text-accent-400 transition-colors hidden md:inline"
             >
               Fedi Feed
             </Link>
@@ -45,7 +45,7 @@ export default async function Navbar() {
           {isAdmin && <NotificationBell />}
           <a
             href="/feed.xml"
-            className="text-gray-500 hover:text-accent-400 transition-colors hidden md:block"
+            className="text-content-faint hover:text-accent-400 transition-colors hidden md:block"
             title="RSS Feed"
           >
             <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
diff --git a/src/components/layout/NotificationBell.tsx b/src/components/layout/NotificationBell.tsx
index ce23e94..24c5536 100644
--- a/src/components/layout/NotificationBell.tsx
+++ b/src/components/layout/NotificationBell.tsx
@@ -55,7 +55,7 @@ const typeEmojis: Record<string, string> = {
 const sourceColors: Record<string, string> = {
   fedi: "text-accent-400",
   bluesky: "text-blue-400",
-  guest: "text-gray-400",
+  guest: "text-content-subtle",
   maintenance: "text-amber-400",
 };
 
@@ -270,7 +270,7 @@ export default function NotificationBell() {
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setOpen(!open)}
-        className="relative text-gray-500 hover:text-accent-400 transition-colors"
+        className="relative text-content-faint hover:text-accent-400 transition-colors"
         title="Notifications"
       >
         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
@@ -281,7 +281,7 @@ export default function NotificationBell() {
           />
         </svg>
         {count > 0 && (
-          <span className="absolute -top-1.5 -right-1.5 min-w-[16px] h-4 flex items-center justify-center bg-red-500 text-white text-[9px] font-bold rounded-full px-1">
+          <span className="absolute -top-1.5 -right-1.5 min-w-[16px] h-4 flex items-center justify-center bg-red-500 text-content text-[9px] font-bold rounded-full px-1">
             {count > 99 ? "99+" : count}
           </span>
         )}
@@ -291,7 +291,7 @@ export default function NotificationBell() {
         <div className="fixed inset-x-2 top-14 sm:absolute sm:inset-x-auto sm:right-0 sm:top-8 sm:w-[460px] bg-surface-900 border border-surface-600/30 rounded-xl shadow-2xl shadow-black/50 z-50 overflow-hidden flex flex-col">
           {/* Header */}
           <div className="px-4 py-3 border-b border-surface-700 flex items-center justify-between">
-            <h3 className="text-sm font-semibold text-white">Notifications</h3>
+            <h3 className="text-sm font-semibold text-content">Notifications</h3>
             <div className="flex items-center gap-3">
               {count > 0 && (
                 <button
@@ -310,7 +310,7 @@ export default function NotificationBell() {
             <div className="flex-1 overflow-y-auto">
               {displayItems.length === 0 ? (
                 <div className="p-6 text-center">
-                  <p className="text-xs text-gray-600">
+                  <p className="text-xs text-content-dim">
                     {activeCategory === "all" ? "No notifications" : `No ${categories.find((c) => c.key === activeCategory)?.label?.toLowerCase() || ""}`}
                   </p>
                 </div>
@@ -340,20 +340,20 @@ export default function NotificationBell() {
                       )}
                     </div>
                     <div className="flex-1 min-w-0">
-                      <p className="text-xs text-gray-300">
-                        <span className="font-semibold text-white">{item.actor}</span>{" "}
+                      <p className="text-xs text-content-muted">
+                        <span className="font-semibold text-content">{item.actor}</span>{" "}
                         {item.summary}
                       </p>
                       <div className="flex items-center gap-2 mt-0.5">
-                        <span className="text-[10px] text-gray-600">{timeAgo(item.createdAt)}</span>
-                        <span className={`text-[10px] ${sourceColors[item.source] || "text-gray-500"}`}>
+                        <span className="text-[10px] text-content-dim">{timeAgo(item.createdAt)}</span>
+                        <span className={`text-[10px] ${sourceColors[item.source] || "text-content-faint"}`}>
                           {item.source}
                         </span>
                         <span className="text-[10px]">{typeEmojis[item.type]}</span>
                       </div>
                     </div>
                     {item.type === "follow" && (
-                      <span className="text-[10px] text-gray-600 flex-shrink-0 mt-1">
+                      <span className="text-[10px] text-content-dim flex-shrink-0 mt-1">
                         view profile
                       </span>
                     )}
@@ -373,7 +373,7 @@ export default function NotificationBell() {
                           type="button"
                           title="Dismiss"
                           onClick={(e) => handleMaintenanceAction(e, item.maintenanceId!, "dismissed")}
-                          className="w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:bg-red-500/20 hover:text-red-400 transition-colors"
+                          className="w-6 h-6 flex items-center justify-center rounded text-content-faint hover:bg-red-500/20 hover:text-red-400 transition-colors"
                         >
                           <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -398,13 +398,13 @@ export default function NotificationBell() {
                     className={`relative w-9 h-9 flex items-center justify-center rounded-lg transition-colors ${
                       isActive
                         ? "bg-accent-500/20 text-accent-400"
-                        : "text-gray-500 hover:text-gray-300 hover:bg-surface-800/50"
+                        : "text-content-faint hover:text-content-muted hover:bg-surface-800/50"
                     }`}
                     title={cat.label}
                   >
                     <CategoryIcon type={cat.key} className="w-4 h-4" />
                     {unread > 0 && (
-                      <span className="absolute -top-0.5 -right-0.5 min-w-[14px] h-3.5 flex items-center justify-center bg-red-500 text-white text-[8px] font-bold rounded-full px-0.5">
+                      <span className="absolute -top-0.5 -right-0.5 min-w-[14px] h-3.5 flex items-center justify-center bg-red-500 text-content text-[8px] font-bold rounded-full px-0.5">
                         {unread > 99 ? "99" : unread}
                       </span>
                     )}
diff --git a/src/components/layout/PushSetup.tsx b/src/components/layout/PushSetup.tsx
index 0319dba..c1cedf5 100644
--- a/src/components/layout/PushSetup.tsx
+++ b/src/components/layout/PushSetup.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { resolvePushStatus, subKeyOf } from "@/lib/push-client";
 
 /**
  * Web Push enrollment UI, shown in the NotificationBell dropdown (admin-only).
@@ -10,7 +11,11 @@ import { useEffect, useState } from "react";
  * server-side. On iOS, push only works from a home-screen install, so when not
  * running standalone we show Add-to-Home-Screen guidance instead.
  *
- * Dormant until the server has VAPID keys set (the enable button reports it).
+ * If the server has no VAPID keypair yet, this generates one first — the bell is
+ * owner-only and /api/admin/push-keys re-checks that, so the whole thing is one
+ * click with no .env editing (#59). It used to show the enable button regardless
+ * and fail with an opaque "push not configured on server", which left push
+ * unreachable on a fresh install.
  */
 
 function urlBase64ToUint8Array(base64String: string): Uint8Array<ArrayBuffer> {
@@ -23,7 +28,25 @@ function urlBase64ToUint8Array(base64String: string): Uint8Array<ArrayBuffer> {
   return output;
 }
 
-type Status = "loading" | "unsupported" | "ios-needs-install" | "ready" | "on" | "denied";
+type PushInfo = { configured: boolean; publicKey: string; count: number };
+
+/** `GET /api/push` — the server's key + how many devices it currently knows about. */
+async function fetchPushInfo(): Promise<PushInfo | null> {
+  try {
+    const res = await fetch("/api/push");
+    if (!res.ok) return null;
+    const d = await res.json();
+    return {
+      configured: !!d?.configured,
+      publicKey: typeof d?.publicKey === "string" ? d.publicKey : "",
+      count: typeof d?.count === "number" ? d.count : 0,
+    };
+  } catch {
+    return null;
+  }
+}
+
+type Status = "loading" | "unsupported" | "ios-needs-install" | "needs-keys" | "ready" | "on" | "denied";
 
 export default function PushSetup() {
   const [status, setStatus] = useState<Status>("loading");
@@ -65,7 +88,24 @@ export default function PushSetup() {
           (await navigator.serviceWorker.getRegistration()) ||
           (await navigator.serviceWorker.register("/sw.js"));
         const existing = await reg.pushManager.getSubscription();
-        if (!cancelled) setStatus(existing ? "on" : "ready");
+        // Always ask the server, even with no local subscription: that's the only
+        // way to learn it has no keypair yet, and showing "Enable" in that state
+        // is a dead end (#59). Don't trust a bare subscription either — after a
+        // key rotation it's bound to a dead key and silently receives nothing.
+        const info = await fetchPushInfo();
+        if (cancelled) return;
+        setStatus(
+          info
+            ? resolvePushStatus({
+                configured: info.configured,
+                serverKey: info.publicKey,
+                serverCount: info.count,
+                subKey: existing ? subKeyOf(existing.options?.applicationServerKey) : null,
+              })
+            : // Couldn't reach the server — offer the button and let the click
+              // report the real reason rather than guessing a state.
+              "ready",
+        );
       } catch {
         if (!cancelled) setStatus("unsupported");
       }
@@ -80,20 +120,49 @@ export default function PushSetup() {
     setBusy(true);
     setMsg(null);
     try {
+      // Must stay first and un-awaited-before: the permission prompt has to run
+      // inside the user gesture (Safari enforces this strictly).
       const perm = await Notification.requestPermission();
       if (perm !== "granted") {
-        setStatus(perm === "denied" ? "denied" : "ready");
+        setStatus(perm === "denied" ? "denied" : status);
         setBusy(false);
         return;
       }
 
-      const keyRes = await fetch("/api/push");
-      if (!keyRes.ok) throw new Error("could not load push config");
-      const { publicKey, configured } = await keyRes.json();
-      if (!configured || !publicKey) throw new Error("push not configured on server");
+      let info = await fetchPushInfo();
+      if (!info) throw new Error("Couldn't load the push settings.");
+
+      // No keypair on the server yet — make one, rather than dead-ending on
+      // "push not configured". Safe to do from here: this menu is owner-only,
+      // /api/admin/push-keys re-checks admin + origin, and with no keys there
+      // are no existing subscriptions for the generate to purge.
+      if (!info.configured || !info.publicKey) {
+        setMsg("Setting up push on the server…");
+        const gen = await fetch("/api/admin/push-keys", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: "generate" }),
+        });
+        const genBody = await gen.json().catch(() => null);
+        // Surface the server's own reason (e.g. ADMIN_SECRET missing, so the
+        // private key can't be encrypted at rest) instead of a generic failure.
+        if (!gen.ok) throw new Error(genBody?.error || "Couldn't set up push on the server.");
+        info = await fetchPushInfo();
+        if (!info?.configured || !info.publicKey) {
+          throw new Error("Push keys were created but couldn't be read back.");
+        }
+      }
+      const publicKey = info.publicKey;
 
       const reg = await navigator.serviceWorker.ready;
       let sub = await reg.pushManager.getSubscription();
+      // If an existing subscription is bound to a DIFFERENT (rotated) key, drop it
+      // and re-subscribe — the browser throws InvalidStateError if you subscribe
+      // with a new applicationServerKey while an old subscription exists.
+      if (sub && subKeyOf(sub.options?.applicationServerKey) !== publicKey) {
+        await sub.unsubscribe().catch(() => {});
+        sub = null;
+      }
       if (!sub) {
         sub = await reg.pushManager.subscribe({
           userVisibleOnly: true,
@@ -156,12 +225,12 @@ export default function PushSetup() {
   if (status === "loading") return null;
 
   return (
-    <div className="px-4 py-2.5 border-t border-surface-700 text-[11px] text-gray-400">
+    <div className="px-4 py-2.5 border-t border-surface-700 text-[11px] text-content-subtle">
       {status === "ios-needs-install" && (
         <p className="leading-relaxed">
           📲 To get push on your iPhone: tap the{" "}
-          <span className="text-gray-200">Share</span> icon →{" "}
-          <span className="text-gray-200">Add to Home Screen</span>, then open the app
+          <span className="text-content-strong">Share</span> icon →{" "}
+          <span className="text-content-strong">Add to Home Screen</span>, then open the app
           from your Home Screen and enable notifications here.
         </p>
       )}
@@ -177,6 +246,22 @@ export default function PushSetup() {
         </p>
       )}
 
+      {status === "needs-keys" && (
+        <div>
+          <button
+            onClick={enable}
+            disabled={busy}
+            className="text-accent-400 hover:text-accent-300 transition-colors disabled:opacity-50"
+          >
+            🔔 {busy ? "Setting up…" : "Set up phone notifications"}
+          </button>
+          <p className="mt-1 text-[10px] text-content-faint leading-relaxed">
+            One click — this creates your push keys on the server, then enables
+            notifications on this device.
+          </p>
+        </div>
+      )}
+
       {status === "ready" && (
         <button
           onClick={enable}
@@ -201,7 +286,7 @@ export default function PushSetup() {
             <button
               onClick={disable}
               disabled={busy}
-              className="text-gray-500 hover:text-red-400 transition-colors disabled:opacity-50"
+              className="text-content-faint hover:text-red-400 transition-colors disabled:opacity-50"
             >
               Turn off
             </button>
@@ -209,7 +294,7 @@ export default function PushSetup() {
         </div>
       )}
 
-      {msg && <p className="mt-1 text-[10px] text-gray-500">{msg}</p>}
+      {msg && <p className="mt-1 text-[10px] text-content-faint">{msg}</p>}
     </div>
   );
 }
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index a02e449..5496a03 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,28 +1,33 @@
 import Link from "next/link";
 import Image from "next/image";
 import { getSidebarData } from "./sidebarData";
+import { SIDEBAR_BLOCKS, type SidebarBlock } from "@/lib/sidebar";
 
 /**
  * The sidebar column (#250) — rendered beside the page content when the owner
- * picks the `sidebar` shell variant. Four blocks: about/bio, recent posts,
- * sections, and connect (handle + links). Styled with the existing
- * `glass-card` idiom so it inherits the active theme's surface + feel tokens.
+ * picks the `sidebar` shell variant. Styled with the existing `glass-card` idiom
+ * so it inherits the active theme's surface + feel tokens.
+ *
+ * Which blocks appear, and in what order, is owner-configurable (#307): the
+ * `blocks` list IS the render order, and omitting a block hides it. That's also
+ * how you stop the header and sidebar both showing your nav — drop `sections`.
  *
  * No tags block yet: there is no public tag route, so those links would go
  * nowhere. It lands with a public `/tags/[tag]` page in a later slice.
  */
-export default async function Sidebar() {
+export default async function Sidebar({ blocks = SIDEBAR_BLOCKS }: { blocks?: SidebarBlock[] }) {
   const {
     authorName, authorBio, authorTagline, avatarPath,
     navLinks, recentPosts, fediAddress, contactEmail, footer,
   } = await getSidebarData();
 
   const block = "glass-card p-5 h-fit";
-  const heading = "text-xs font-semibold text-white uppercase tracking-wider mb-3";
+  const heading = "text-xs font-semibold text-content uppercase tracking-wider mb-3";
 
-  return (
-    <aside className="flex flex-col gap-6">
-      {/* About */}
+  // Each block renders itself or returns null when it has nothing to show; the
+  // configured order below decides what actually appears.
+  const rendered: Record<SidebarBlock, React.ReactNode> = {
+    about: (
       <div className={block}>
         <div className="flex items-center gap-3 mb-3">
           <Image
@@ -33,65 +38,64 @@ export default async function Sidebar() {
             className="rounded-full object-cover shrink-0"
           />
           <div className="min-w-0">
-            <p className="text-sm font-semibold text-white truncate">{authorName}</p>
-            {authorTagline && <p className="text-xs text-gray-500 truncate">{authorTagline}</p>}
+            <p className="text-sm font-semibold text-content truncate">{authorName}</p>
+            {authorTagline && <p className="text-xs text-content-faint truncate">{authorTagline}</p>}
           </div>
         </div>
-        {authorBio && <p className="text-xs text-gray-400 leading-relaxed">{authorBio}</p>}
+        {authorBio && <p className="text-xs text-content-subtle leading-relaxed">{authorBio}</p>}
       </div>
+    ),
 
-      {/* Recent posts */}
-      {recentPosts.length > 0 && (
-        <div className={block}>
-          <h2 className={heading}>Recent</h2>
-          <ul className="flex flex-col gap-2.5">
-            {recentPosts.map((p) => (
-              <li key={p.slug}>
-                <Link href={`/post/${p.slug}`} className="block group">
-                  <span className="text-xs text-gray-300 group-hover:text-accent-400 transition-colors line-clamp-2">
-                    {p.title || "Untitled"}
-                  </span>
-                  <span className="block text-[11px] text-gray-600 mt-0.5">
-                    {new Date(p.publishedAt).toLocaleDateString(undefined, {
-                      year: "numeric", month: "short", day: "numeric",
-                    })}
-                  </span>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
+    recent: recentPosts.length > 0 ? (
+      <div className={block}>
+        <h2 className={heading}>Recent</h2>
+        <ul className="flex flex-col gap-2.5">
+          {recentPosts.map((p) => (
+            <li key={p.slug}>
+              <Link href={`/post/${p.slug}`} className="block group">
+                <span className="text-xs text-content-muted group-hover:text-accent-400 transition-colors line-clamp-2">
+                  {p.title || "Untitled"}
+                </span>
+                <span className="block text-[11px] text-content-dim mt-0.5">
+                  {new Date(p.publishedAt).toLocaleDateString(undefined, {
+                    year: "numeric", month: "short", day: "numeric",
+                  })}
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ) : null,
 
-      {/* Sections */}
-      {navLinks.length > 0 && (
-        <div className={block}>
-          <h2 className={heading}>Sections</h2>
-          <ul className="flex flex-col gap-2">
-            {navLinks.map((link) => (
-              <li key={link.href}>
-                <Link href={link.href} className="text-xs text-gray-400 hover:text-accent-400 transition-colors">
-                  {link.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
+    sections: navLinks.length > 0 ? (
+      <div className={block}>
+        <h2 className={heading}>Sections</h2>
+        <ul className="flex flex-col gap-2">
+          {navLinks.map((link) => (
+            <li key={link.href}>
+              <Link href={link.href} className="text-xs text-content-subtle hover:text-accent-400 transition-colors">
+                {link.label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ) : null,
 
-      {/* Connect */}
+    connect: (
       <div className={block}>
         <h2 className={heading}>Connect</h2>
-        <p className="text-xs text-gray-500 font-mono break-all mb-2">{fediAddress}</p>
+        <p className="text-xs text-content-faint font-mono break-all mb-2">{fediAddress}</p>
         <div className="flex flex-col gap-2">
-          <a href="/feed.xml" className="text-xs text-gray-400 hover:text-accent-400 transition-colors">RSS feed</a>
+          <a href="/feed.xml" className="text-xs text-content-subtle hover:text-accent-400 transition-colors">RSS feed</a>
           {contactEmail && (
-            <a href={`mailto:${contactEmail}`} className="text-xs text-gray-400 hover:text-accent-400 transition-colors">
+            <a href={`mailto:${contactEmail}`} className="text-xs text-content-subtle hover:text-accent-400 transition-colors">
               Email
             </a>
           )}
           {footer.webringUrl && (
-            <a href={footer.webringUrl} className="text-xs text-gray-400 hover:text-accent-400 transition-colors">
+            <a href={footer.webringUrl} className="text-xs text-content-subtle hover:text-accent-400 transition-colors">
               {footer.webringLabel}
             </a>
           )}
@@ -100,13 +104,22 @@ export default async function Sidebar() {
               href={footer.fundingUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs text-gray-400 hover:text-accent-400 transition-colors"
+              className="text-xs text-content-subtle hover:text-accent-400 transition-colors"
             >
               ♥ {footer.fundingLabel}
             </a>
           )}
         </div>
       </div>
+    ),
+  };
+
+  return (
+    <aside className="flex flex-col gap-6">
+      {blocks.map((name) => {
+        const node = rendered[name];
+        return node ? <div key={name} className="contents">{node}</div> : null;
+      })}
     </aside>
   );
 }
diff --git a/src/lib/__tests__/media-path.test.ts b/src/lib/__tests__/media-path.test.ts
new file mode 100644
index 0000000..7f0cd11
--- /dev/null
+++ b/src/lib/__tests__/media-path.test.ts
@@ -0,0 +1,36 @@
+import { describe, it, expect } from "vitest";
+import { validateImagePath, saveUploadedImage } from "@/lib/media";
+
+describe("saveUploadedImage (#59)", () => {
+  it("returns ok:false for an undecodable image instead of throwing (→ 400, not 500)", async () => {
+    const bad = new File([new Uint8Array([1, 2, 3, 4])], "x.png", { type: "image/png" });
+    const r = await saveUploadedImage(bad);
+    expect(r.ok).toBe(false);
+  });
+
+  it("rejects an unsupported type without touching sharp", async () => {
+    const r = await saveUploadedImage(new File([new Uint8Array([1])], "x.txt", { type: "text/plain" }));
+    expect(r).toEqual({ ok: false, error: "unsupported file type" });
+  });
+});
+
+describe("validateImagePath (#59) — the shared avatar/banner path guard", () => {
+  it("accepts a same-origin /uploads or /images path", () => {
+    expect(validateImagePath("/uploads/2026/07/me.webp")).toBe("/uploads/2026/07/me.webp");
+    expect(validateImagePath("/images/avatar.png")).toBe("/images/avatar.png");
+  });
+
+  it("treats empty/null as a clear-to-default (empty string)", () => {
+    expect(validateImagePath("")).toBe("");
+    expect(validateImagePath("   ")).toBe("");
+    expect(validateImagePath(null)).toBe("");
+  });
+
+  it("rejects external URLs, traversal, and non-strings (undefined)", () => {
+    expect(validateImagePath("https://evil.example/x.jpg")).toBeUndefined();
+    expect(validateImagePath("/uploads/../../etc/passwd")).toBeUndefined();
+    expect(validateImagePath("/etc/passwd")).toBeUndefined();
+    expect(validateImagePath("javascript:alert(1)")).toBeUndefined();
+    expect(validateImagePath(42)).toBeUndefined();
+  });
+});
diff --git a/src/lib/__tests__/oauth-token.test.ts b/src/lib/__tests__/oauth-token.test.ts
index 7492952..053da1f 100644
--- a/src/lib/__tests__/oauth-token.test.ts
+++ b/src/lib/__tests__/oauth-token.test.ts
@@ -8,6 +8,9 @@ vi.mock("@/lib/db", () => ({
     authToken: { create: vi.fn(), deleteMany: vi.fn() },
   },
 }));
+// The app-token TTL now comes from runtime config (#59), not process.env.
+const { getRuntimeSiteConfig } = vi.hoisted(() => ({ getRuntimeSiteConfig: vi.fn() }));
+vi.mock("@/lib/site-settings", () => ({ getRuntimeSiteConfig }));
 
 import { POST as tokenPOST } from "@/app/api/oauth/token/route";
 import { POST as revokePOST } from "@/app/api/oauth/revoke/route";
@@ -56,7 +59,7 @@ function exchange(fields: Partial<Record<string, string>> = {}, verifier = "v")
 beforeEach(() => {
   vi.clearAllMocks();
   process.env.SITE_URL = "https://demo.example";
-  delete process.env.APP_TOKEN_TTL_DAYS;
+  getRuntimeSiteConfig.mockResolvedValue({ security: { appTokenTtlDays: 0, adminSessionTtlDays: 30 } });
   vi.mocked(prisma.authorizationCode.deleteMany).mockResolvedValue({ count: 1 } as never);
   vi.mocked(prisma.authToken.create).mockResolvedValue({} as never);
   vi.mocked(prisma.authToken.deleteMany).mockResolvedValue({ count: 1 } as never);
@@ -169,8 +172,8 @@ describe("POST /api/oauth/token", () => {
     expect((await res.json()).error).toBe("invalid_request");
     expect(prisma.authorizationCode.findUnique).not.toHaveBeenCalled();
   });
-  it("sets expiresAt when APP_TOKEN_TTL_DAYS is configured", async () => {
-    process.env.APP_TOKEN_TTL_DAYS = "30";
+  it("sets expiresAt when an app-token TTL is configured", async () => {
+    getRuntimeSiteConfig.mockResolvedValue({ security: { appTokenTtlDays: 30, adminSessionTtlDays: 30 } });
     const { verifier, challenge } = pkcePair();
     vi.mocked(prisma.authorizationCode.findUnique).mockResolvedValue(validRecord(challenge) as never);
     await tokenPOST(exchange({}, verifier));
diff --git a/src/lib/__tests__/push-client.test.ts b/src/lib/__tests__/push-client.test.ts
new file mode 100644
index 0000000..8549909
--- /dev/null
+++ b/src/lib/__tests__/push-client.test.ts
@@ -0,0 +1,88 @@
+import { describe, it, expect } from "vitest";
+import { resolvePushStatus, subKeyOf } from "@/lib/push-client";
+
+/**
+ * Push enrollment state (#59). The bug this locks down: the bell showed
+ * "Enable phone notifications" on a server with no VAPID keypair, and clicking it
+ * failed with an opaque "push not configured on server" — a dead end, with the
+ * panel that fixes it somewhere else entirely. `needs-keys` is what makes that
+ * state visible (and one-click fixable) instead.
+ *
+ * The other half is the rotation trap: a PushSubscription bound to a rotated key
+ * still looks healthy to getSubscription() but can never receive a send again,
+ * so it must never resolve to "on".
+ */
+
+const KEY_A = "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM";
+const KEY_B = "BLc4xRzKlKORKWlbdgFaBrrPK3ydWAHo4M0gs0i1oEKgPpWC5cW8OCzVrOQRv-1npXRWk8udnW3oYhIO4475rds";
+
+describe("resolvePushStatus — server has no keypair", () => {
+  it("reports needs-keys when the server is unconfigured", () => {
+    expect(
+      resolvePushStatus({ configured: false, serverKey: "", serverCount: 0, subKey: null }),
+    ).toBe("needs-keys");
+  });
+
+  it("reports needs-keys even when this device still holds a subscription", () => {
+    // The stale local subscription must not mask an unconfigured server.
+    expect(
+      resolvePushStatus({ configured: false, serverKey: "", serverCount: 0, subKey: KEY_A }),
+    ).toBe("needs-keys");
+  });
+
+  it("treats configured-but-keyless as needs-keys (never offers a subscribe with no key)", () => {
+    expect(
+      resolvePushStatus({ configured: true, serverKey: "", serverCount: 0, subKey: null }),
+    ).toBe("needs-keys");
+  });
+});
+
+describe("resolvePushStatus — server configured", () => {
+  it("is ready when this device has no subscription", () => {
+    expect(
+      resolvePushStatus({ configured: true, serverKey: KEY_A, serverCount: 0, subKey: null }),
+    ).toBe("ready");
+  });
+
+  it("is on when the subscription matches the server's current key", () => {
+    expect(
+      resolvePushStatus({ configured: true, serverKey: KEY_A, serverCount: 1, subKey: KEY_A }),
+    ).toBe("on");
+  });
+
+  it("is ready — NOT on — when the subscription is bound to a rotated key", () => {
+    // The silent-death case: looks subscribed, can never receive a send.
+    expect(
+      resolvePushStatus({ configured: true, serverKey: KEY_B, serverCount: 1, subKey: KEY_A }),
+    ).toBe("ready");
+  });
+
+  it("is ready when the server holds zero subscriptions, even on a key match", () => {
+    // Keys were rotated and every subscription purged from under this device.
+    expect(
+      resolvePushStatus({ configured: true, serverKey: KEY_A, serverCount: 0, subKey: KEY_A }),
+    ).toBe("ready");
+  });
+});
+
+describe("subKeyOf", () => {
+  it("returns '' for a missing key", () => {
+    expect(subKeyOf(null)).toBe("");
+    expect(subKeyOf(undefined)).toBe("");
+  });
+
+  it("round-trips a base64url key through the same encoding the server uses", () => {
+    // Decode KEY_A the way the browser stores it, then re-encode: must match, or
+    // every comparison against the server's public key is a false mismatch.
+    const b64 = KEY_A.replace(/-/g, "+").replace(/_/g, "/");
+    const bin = atob(b64 + "=".repeat((4 - (b64.length % 4)) % 4));
+    const bytes = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+    expect(subKeyOf(bytes.buffer)).toBe(KEY_A);
+  });
+
+  it("emits no base64 padding or +/ characters (must match the server's base64url)", () => {
+    const key = subKeyOf(new Uint8Array([251, 255, 254, 0, 62, 63]).buffer);
+    expect(key).not.toMatch(/[+/=]/);
+  });
+});
diff --git a/src/lib/__tests__/push-config.test.ts b/src/lib/__tests__/push-config.test.ts
new file mode 100644
index 0000000..fd1dae5
--- /dev/null
+++ b/src/lib/__tests__/push-config.test.ts
@@ -0,0 +1,133 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+// VAPID web-push config (#59). Prisma mocked; real secret-box crypto so the
+// encrypted round-trip + env fallback are genuine. web-push is mocked so
+// generate/setVapidDetails are observable without native crypto.
+const { findMany, upsert, deleteMany, subDeleteMany } = vi.hoisted(() => ({
+  findMany: vi.fn(), upsert: vi.fn(), deleteMany: vi.fn(), subDeleteMany: vi.fn(),
+}));
+vi.mock("@/lib/db", () => ({
+  prisma: {
+    siteSetting: { findMany, upsert, deleteMany },
+    pushSubscription: { deleteMany: subDeleteMany },
+  },
+}));
+const { generateVAPIDKeys, setVapidDetails } = vi.hoisted(() => ({
+  generateVAPIDKeys: vi.fn(() => ({ publicKey: "GEN_PUB", privateKey: "GEN_PRIV" })),
+  setVapidDetails: vi.fn(),
+}));
+vi.mock("web-push", () => ({ default: { generateVAPIDKeys, setVapidDetails } }));
+vi.mock("@/../site.config", () => ({ siteConfig: { contactEmail: "", fediDomain: "demo.example" } }));
+vi.mock("@/lib/site-settings", () => ({ getRuntimeSiteConfig: vi.fn().mockResolvedValue({ contact: { email: "" } }) }));
+
+import {
+  getVapidConfig, getVapidPublicKey, pushConfigured, getPushKeyStatus,
+  setVapidKeys, generateVapidKeys, clearVapidKeys, ensurePushConfigured, invalidatePushConfig,
+} from "@/lib/push-config";
+import { encryptSecret } from "@/lib/secret-box";
+
+const PUB = "integration.push.publicKey";
+const PRIV = "integration.push.privateKey";
+const SUBJ = "integration.push.subject";
+const rows = (o: Record<string, string>) => Object.entries(o).map(([key, value]) => ({ key, value }));
+
+const OLD_PUB = process.env.VAPID_PUBLIC_KEY, OLD_PRIV = process.env.VAPID_PRIVATE_KEY, OLD_ADMIN = process.env.ADMIN_SECRET;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  process.env.ADMIN_SECRET = "test-admin-secret-0123456789abcdef";
+  delete process.env.VAPID_PUBLIC_KEY;
+  delete process.env.VAPID_PRIVATE_KEY;
+  delete process.env.VAPID_SUBJECT;
+  findMany.mockResolvedValue([]);
+  upsert.mockResolvedValue({});
+  deleteMany.mockResolvedValue({ count: 0 });
+  subDeleteMany.mockResolvedValue({ count: 0 });
+  invalidatePushConfig();
+});
+afterEach(() => {
+  process.env.VAPID_PUBLIC_KEY = OLD_PUB; process.env.VAPID_PRIVATE_KEY = OLD_PRIV; process.env.ADMIN_SECRET = OLD_ADMIN;
+  if (OLD_PUB === undefined) delete process.env.VAPID_PUBLIC_KEY;
+  if (OLD_PRIV === undefined) delete process.env.VAPID_PRIVATE_KEY;
+  if (OLD_ADMIN === undefined) delete process.env.ADMIN_SECRET;
+});
+
+describe("getVapidConfig / status", () => {
+  it("returns null when neither DB nor env has a keypair", async () => {
+    expect(await getVapidConfig()).toBeNull();
+    expect(await pushConfigured()).toBe(false);
+    expect((await getPushKeyStatus()).configured).toBe(false);
+  });
+
+  it("resolves the DB keypair (private decrypted), and status reports source=db without leaking the private key", async () => {
+    findMany.mockResolvedValue(rows({ [PUB]: "DBPUB", [PRIV]: encryptSecret("DBPRIV")!, [SUBJ]: "mailto:me@x" }));
+    expect(await getVapidConfig()).toEqual({ publicKey: "DBPUB", privateKey: "DBPRIV", subject: "mailto:me@x" });
+    expect(await getVapidPublicKey()).toBe("DBPUB");
+    const status = await getPushKeyStatus();
+    expect(status).toEqual({ configured: true, source: "db", subject: "mailto:me@x" });
+    expect(JSON.stringify(status)).not.toContain("DBPRIV"); // never exposed
+  });
+
+  it("falls back to env when no DB keypair is stored", async () => {
+    findMany.mockResolvedValue([]);
+    process.env.VAPID_PUBLIC_KEY = "ENVPUB"; process.env.VAPID_PRIVATE_KEY = "ENVPRIV";
+    expect((await getVapidConfig())?.publicKey).toBe("ENVPUB");
+    expect((await getPushKeyStatus()).source).toBe("env");
+  });
+
+  it("derives a mailto subject from the fedi domain when none is set", async () => {
+    findMany.mockResolvedValue(rows({ [PUB]: "DBPUB", [PRIV]: encryptSecret("DBPRIV")! }));
+    expect((await getVapidConfig())?.subject).toBe("mailto:admin@demo.example");
+  });
+});
+
+describe("setVapidKeys / generate / clear — the rotation purge", () => {
+  it("save encrypts the private key (never plaintext) and PURGES every subscription", async () => {
+    const r = await setVapidKeys("NEWPUB", "NEWPRIV", "mailto:a@b");
+    expect(r).toEqual({ ok: true });
+    const privWrite = upsert.mock.calls.find((c) => c[0].where.key === PRIV)![0].create.value as string;
+    expect(privWrite).toMatch(/^v1:/);
+    expect(privWrite).not.toContain("NEWPRIV");
+    expect(subDeleteMany).toHaveBeenCalledWith({}); // MANDATORY — old subs are bound to the old key
+  });
+
+  it("generate mints server-side, saves, purges, and returns the public key", async () => {
+    const r = await generateVapidKeys();
+    expect(r).toEqual({ ok: true, publicKey: "GEN_PUB" });
+    expect(generateVAPIDKeys).toHaveBeenCalled();
+    expect(subDeleteMany).toHaveBeenCalledWith({});
+  });
+
+  it("refuses to save without ADMIN_SECRET, and does NOT purge in that case", async () => {
+    delete process.env.ADMIN_SECRET;
+    const r = await setVapidKeys("P", "PRIV");
+    expect(r.ok).toBe(false);
+    expect(subDeleteMany).not.toHaveBeenCalled();
+  });
+
+  it("clear removes all three rows and purges subscriptions", async () => {
+    await clearVapidKeys();
+    expect(deleteMany).toHaveBeenCalledWith({ where: { key: { in: [PUB, PRIV, SUBJ] } } });
+    expect(subDeleteMany).toHaveBeenCalledWith({});
+  });
+});
+
+describe("ensurePushConfigured — process-global re-init", () => {
+  it("calls setVapidDetails once for a stable key, and AGAIN after a rotation (new fingerprint)", async () => {
+    findMany.mockResolvedValue(rows({ [PUB]: "PUB1", [PRIV]: encryptSecret("PRIV1")!, [SUBJ]: "mailto:a" }));
+    expect(await ensurePushConfigured()).toBe(true);
+    expect(await ensurePushConfigured()).toBe(true); // unchanged → no re-init
+    expect(setVapidDetails).toHaveBeenCalledTimes(1);
+
+    findMany.mockResolvedValue(rows({ [PUB]: "PUB2", [PRIV]: encryptSecret("PRIV2")!, [SUBJ]: "mailto:a" }));
+    expect(await ensurePushConfigured()).toBe(true);
+    expect(setVapidDetails).toHaveBeenCalledTimes(2); // rotated → re-init
+    expect(setVapidDetails).toHaveBeenLastCalledWith("mailto:a", "PUB2", "PRIV2");
+  });
+
+  it("returns false and never calls setVapidDetails when unconfigured", async () => {
+    findMany.mockResolvedValue([]);
+    expect(await ensurePushConfigured()).toBe(false);
+    expect(setVapidDetails).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/lib/__tests__/push-keys-route.test.ts b/src/lib/__tests__/push-keys-route.test.ts
new file mode 100644
index 0000000..3ee230f
--- /dev/null
+++ b/src/lib/__tests__/push-keys-route.test.ts
@@ -0,0 +1,79 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import type { NextRequest } from "next/server";
+
+const { verifyAdmin, verifyOrigin } = vi.hoisted(() => ({ verifyAdmin: vi.fn(), verifyOrigin: vi.fn() }));
+vi.mock("@/lib/auth", () => ({ verifyAdmin, verifyOrigin }));
+vi.mock("@/lib/secret-box", () => ({ secretBoxAvailable: () => true }));
+const { status, generate, save, clear } = vi.hoisted(() => ({
+  status: vi.fn(), generate: vi.fn(), save: vi.fn(), clear: vi.fn(),
+}));
+vi.mock("@/lib/push-config", () => ({
+  getPushKeyStatus: status, generateVapidKeys: generate, setVapidKeys: save, clearVapidKeys: clear,
+}));
+
+import { GET, POST } from "@/app/api/admin/push-keys/route";
+
+const post = (body: unknown): NextRequest =>
+  new Request("https://x/api/admin/push-keys", {
+    method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body),
+  }) as unknown as NextRequest;
+const get = () => new Request("https://x/api/admin/push-keys") as unknown as NextRequest;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  verifyAdmin.mockResolvedValue(true);
+  verifyOrigin.mockReturnValue(true);
+  status.mockResolvedValue({ configured: true, source: "db", subject: "mailto:a@b" });
+  generate.mockResolvedValue({ ok: true, publicKey: "PUB" });
+  save.mockResolvedValue({ ok: true });
+  clear.mockResolvedValue(undefined);
+});
+
+describe("/api/admin/push-keys (#59)", () => {
+  it("GET requires admin, returns status only (never the private key)", async () => {
+    verifyAdmin.mockResolvedValue(false);
+    expect((await GET(get())).status).toBe(401);
+    verifyAdmin.mockResolvedValue(true);
+    const body = await (await GET(get())).json();
+    expect(body.status).toEqual({ configured: true, source: "db", subject: "mailto:a@b" });
+    expect(JSON.stringify(body)).not.toMatch(/private/i);
+  });
+
+  it("POST is CSRF-gated then admin-gated", async () => {
+    verifyOrigin.mockReturnValue(false);
+    expect((await POST(post({ action: "generate" }))).status).toBe(403);
+    verifyOrigin.mockReturnValue(true);
+    verifyAdmin.mockResolvedValue(false);
+    expect((await POST(post({ action: "generate" }))).status).toBe(401);
+    expect(generate).not.toHaveBeenCalled();
+  });
+
+  it("generate mints keys and returns status", async () => {
+    const res = await POST(post({ action: "generate" }));
+    expect(res.status).toBe(200);
+    expect(generate).toHaveBeenCalled();
+    expect((await res.json()).success).toBe(true);
+  });
+
+  it("save requires both keys, then stores them", async () => {
+    expect((await POST(post({ action: "save", publicKey: "P" }))).status).toBe(400); // missing private
+    expect(save).not.toHaveBeenCalled();
+    const res = await POST(post({ action: "save", publicKey: "P", privateKey: "Q" }));
+    expect(res.status).toBe(200);
+    expect(save).toHaveBeenCalledWith("P", "Q", undefined);
+  });
+
+  it("clear removes the keys", async () => {
+    expect((await POST(post({ action: "clear" }))).status).toBe(200);
+    expect(clear).toHaveBeenCalled();
+  });
+
+  it("rejects an unknown action", async () => {
+    expect((await POST(post({ action: "nope" }))).status).toBe(400);
+  });
+
+  it("surfaces a generate error (e.g. no ADMIN_SECRET) as 400", async () => {
+    generate.mockResolvedValue({ ok: false, error: "Encryption unavailable — ADMIN_SECRET is not set." });
+    expect((await POST(post({ action: "generate" }))).status).toBe(400);
+  });
+});
diff --git a/src/lib/__tests__/setup-media-route.test.ts b/src/lib/__tests__/setup-media-route.test.ts
new file mode 100644
index 0000000..67ca2f1
--- /dev/null
+++ b/src/lib/__tests__/setup-media-route.test.ts
@@ -0,0 +1,68 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import type { NextRequest } from "next/server";
+
+const { verifyAdmin } = vi.hoisted(() => ({ verifyAdmin: vi.fn() }));
+vi.mock("@/lib/auth", () => ({ verifyAdmin }));
+const { verifySetupToken } = vi.hoisted(() => ({ verifySetupToken: vi.fn() }));
+vi.mock("@/lib/setup-token", () => ({ verifySetupToken }));
+const { saveUploadedImage } = vi.hoisted(() => ({ saveUploadedImage: vi.fn() }));
+vi.mock("@/lib/media", () => ({ saveUploadedImage }));
+
+import { POST } from "@/app/api/setup/media/route";
+
+const OLD_ADMIN = process.env.ADMIN_SECRET;
+
+function req(token: string | null, withFile = true): NextRequest {
+  const fd = new FormData();
+  if (withFile) fd.append("file", new File([new Uint8Array([1, 2, 3])], "a.png", { type: "image/png" }));
+  return new Request("https://x/api/setup/media", {
+    method: "POST",
+    headers: token ? { "x-setup-token": token } : {},
+    body: fd,
+  }) as unknown as NextRequest;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  delete process.env.ADMIN_SECRET; // fresh deploy → token branch
+  verifyAdmin.mockResolvedValue(true);
+  verifySetupToken.mockResolvedValue(true);
+  saveUploadedImage.mockResolvedValue({ ok: true, path: "/uploads/2026/07/x.webp" });
+});
+afterEach(() => {
+  if (OLD_ADMIN === undefined) delete process.env.ADMIN_SECRET;
+  else process.env.ADMIN_SECRET = OLD_ADMIN;
+});
+
+describe("/api/setup/media (#59)", () => {
+  it("fresh deploy: rejects a bad setup token without touching the file", async () => {
+    verifySetupToken.mockResolvedValue(false);
+    expect((await POST(req("wrong"))).status).toBe(401);
+    expect(saveUploadedImage).not.toHaveBeenCalled();
+  });
+
+  it("fresh deploy: a valid token uploads and returns the relative path", async () => {
+    const res = await POST(req("good-token"));
+    expect(res.status).toBe(201);
+    expect(verifySetupToken).toHaveBeenCalledWith("good-token");
+    expect(await res.json()).toEqual({ path: "/uploads/2026/07/x.webp" });
+  });
+
+  it("once ADMIN_SECRET is set, it requires admin auth (not the token)", async () => {
+    process.env.ADMIN_SECRET = "x".repeat(64);
+    verifyAdmin.mockResolvedValue(false);
+    expect((await POST(req("any"))).status).toBe(401);
+    verifyAdmin.mockResolvedValue(true);
+    expect((await POST(req("any"))).status).toBe(201);
+  });
+
+  it("400 when no file is provided", async () => {
+    expect((await POST(req("good-token", false))).status).toBe(400);
+    expect(saveUploadedImage).not.toHaveBeenCalled();
+  });
+
+  it("surfaces a save error (e.g. unsupported type) as 400", async () => {
+    saveUploadedImage.mockResolvedValue({ ok: false, error: "unsupported file type" });
+    expect((await POST(req("good-token"))).status).toBe(400);
+  });
+});
diff --git a/src/lib/__tests__/setup-route.test.ts b/src/lib/__tests__/setup-route.test.ts
index 598e38c..c95b6bd 100644
--- a/src/lib/__tests__/setup-route.test.ts
+++ b/src/lib/__tests__/setup-route.test.ts
@@ -100,6 +100,30 @@ describe("/api/setup — SITE_URL validation (#59)", () => {
   });
 });
 
+describe("/api/setup — optional avatar/banner (#59)", () => {
+  it("writes a valid avatar/banner path into the claimed row", async () => {
+    const res = await POST(req(validBody({ avatarPath: "/uploads/2026/07/me.webp", bannerPath: "/images/banner.webp" })));
+    expect(res.status).toBe(200);
+    const data = create.mock.calls[0][0].data;
+    expect(data.avatarPath).toBe("/uploads/2026/07/me.webp");
+    expect(data.bannerPath).toBe("/images/banner.webp");
+  });
+
+  it("rejects a bad avatar path with 400, before claiming or writing", async () => {
+    const res = await POST(req(validBody({ avatarPath: "https://evil.example/x.jpg" })));
+    expect(res.status).toBe(400);
+    expect(create).not.toHaveBeenCalled();
+    expect(writeFileSync).not.toHaveBeenCalled();
+  });
+
+  it("omits the image fields entirely when none is provided", async () => {
+    await POST(req(validBody()));
+    const data = create.mock.calls[0][0].data;
+    expect("avatarPath" in data).toBe(false);
+    expect("bannerPath" in data).toBe(false);
+  });
+});
+
 describe("/api/setup — claim ordering + rollback (the bricking fix)", () => {
   it("validates BEFORE claiming: a bad payload leaves setupDone untouched", async () => {
     const res = await POST(req(validBody({ adminSecret: "not-hex" })));
diff --git a/src/lib/__tests__/sidebar.test.ts b/src/lib/__tests__/sidebar.test.ts
new file mode 100644
index 0000000..e5ad422
--- /dev/null
+++ b/src/lib/__tests__/sidebar.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import {
+  SIDEBAR_BLOCKS, SIDEBAR_SIDES,
+  isSidebarBlock, isSidebarSide, sidebarBlockLabel,
+  parseSidebarBlocks, resolveSidebarBlocks,
+} from "@/lib/sidebar";
+
+describe("sidebar side (#307)", () => {
+  it("accepts only left/right", () => {
+    for (const s of SIDEBAR_SIDES) expect(isSidebarSide(s)).toBe(true);
+    expect(isSidebarSide("top")).toBe(false);
+    expect(isSidebarSide("")).toBe(false);
+  });
+});
+
+describe("parseSidebarBlocks (#307)", () => {
+  it("splits, trims, lowercases and preserves the given ORDER", () => {
+    expect(parseSidebarBlocks("recent, About ,connect")).toEqual(["recent", "about", "connect"]);
+  });
+
+  it("dedupes while keeping first position", () => {
+    expect(parseSidebarBlocks("connect,about,connect")).toEqual(["connect", "about"]);
+  });
+
+  it("drops unknown names rather than rendering nothing", () => {
+    expect(parseSidebarBlocks("about,tags,connect")).toEqual(["about", "connect"]);
+  });
+
+  it("blank / garbage / null → [] so callers fall back to the default order", () => {
+    expect(parseSidebarBlocks("")).toEqual([]);
+    expect(parseSidebarBlocks(null)).toEqual([]);
+    expect(parseSidebarBlocks(" , ,")).toEqual([]);
+    expect(parseSidebarBlocks("nonsense")).toEqual([]);
+  });
+});
+
+describe("resolveSidebarBlocks (#307)", () => {
+  it("empty → the built-in order", () => {
+    expect(resolveSidebarBlocks([])).toEqual(SIDEBAR_BLOCKS);
+  });
+
+  it("a configured list wins, order intact", () => {
+    expect(resolveSidebarBlocks(["connect", "about"])).toEqual(["connect", "about"]);
+  });
+
+  it("omitting a block is how you hide it — notably `sections`, which fixes the header duplication", () => {
+    const resolved = resolveSidebarBlocks(parseSidebarBlocks("about,recent,connect"));
+    expect(resolved).not.toContain("sections");
+    expect(resolved).toEqual(["about", "recent", "connect"]);
+  });
+
+  it("returns a copy, so a caller can't mutate the shared default", () => {
+    const a = resolveSidebarBlocks([]);
+    a.pop();
+    expect(resolveSidebarBlocks([])).toEqual(SIDEBAR_BLOCKS); // still all four
+  });
+});
+
+describe("block metadata (#307)", () => {
+  it("every block is recognised and has a label", () => {
+    for (const b of SIDEBAR_BLOCKS) {
+      expect(isSidebarBlock(b)).toBe(true);
+      expect(sidebarBlockLabel(b).length).toBeGreaterThan(0);
+    }
+    expect(isSidebarBlock("tags")).toBe(false); // not built yet — needs a public tag route
+  });
+});
diff --git a/src/lib/__tests__/site-settings.test.ts b/src/lib/__tests__/site-settings.test.ts
index 6cb4f9a..b8f08bc 100644
--- a/src/lib/__tests__/site-settings.test.ts
+++ b/src/lib/__tests__/site-settings.test.ts
@@ -11,6 +11,8 @@ vi.mock("@/../site.config", () => ({
     download: { macosEnabled: false, macosReleaseUrl: "https://env/releases/latest", macosAppStoreUrl: "" },
     theme: { id: "default" },
     layout: { feed: "", header: "", footer: "", shell: "" },
+    sidebar: { side: "", blocks: "" },
+    security: { adminSessionTtlDays: 30, appTokenTtlDays: 0 },
     contactEmail: "env@example.com",
     podcast: { title: "", author: "", description: "", email: "", image: "" },
     categories: { photos: "", videos: "", audio: "" },
@@ -100,6 +102,31 @@ describe("getRuntimeSiteConfig (#59)", () => {
     expect((await getRuntimeSiteConfig()).layout.shell).toBe("narrow");
   });
 
+  it("overlays sidebar side + block order (#307): defaults when unset, saved values win", async () => {
+    const base = await getRuntimeSiteConfig();
+    expect(base.sidebar.side).toBe("right"); // shipped default
+    expect(base.sidebar.blocks).toEqual(["about", "recent", "sections", "connect"]);
+
+    invalidateSiteConfigCache();
+    vi.mocked(prisma.siteSetting.findMany).mockResolvedValue(
+      rows({ "sidebar.side": "left", "sidebar.blocks": "connect,about" }) as never,
+    );
+    const cfg = await getRuntimeSiteConfig();
+    expect(cfg.sidebar.side).toBe("left");
+    expect(cfg.sidebar.blocks).toEqual(["connect", "about"]); // order preserved, others hidden
+  });
+
+  it("overlays security TTLs (#59): env defaults, a saved integer wins", async () => {
+    const base = await getRuntimeSiteConfig();
+    expect(base.security).toEqual({ adminSessionTtlDays: 30, appTokenTtlDays: 0 });
+    invalidateSiteConfigCache();
+    vi.mocked(prisma.siteSetting.findMany).mockResolvedValue(
+      rows({ "security.adminSessionTtlDays": "7", "security.appTokenTtlDays": "90" }) as never,
+    );
+    const cfg = await getRuntimeSiteConfig();
+    expect(cfg.security).toEqual({ adminSessionTtlDays: 7, appTokenTtlDays: 90 });
+  });
+
   it("resolves gallery categories (#284): defaults when unset, a saved override wins, general guaranteed", async () => {
     const base = await getRuntimeSiteConfig();
     expect(base.categories.photos).toEqual(["wildlife", "macro", "landscape", "street", "general"]);
@@ -190,6 +217,29 @@ describe("validateSiteConfigValue (#59)", () => {
     expect(validateSiteConfigValue("layout.shell", "sidebar")).toBe("sidebar");
     expect(validateSiteConfigValue("layout.shell", "wide")).toBeNull(); // still a later phase
   });
+  it("sidebar.side accepts left/right or empty, rejects anything else (#307)", () => {
+    expect(validateSiteConfigValue("sidebar.side", "left")).toBe("left");
+    expect(validateSiteConfigValue("sidebar.side", "right")).toBe("right");
+    expect(validateSiteConfigValue("sidebar.side", "")).toBe("");
+    expect(validateSiteConfigValue("sidebar.side", "top")).toBeNull();
+  });
+  it("security TTLs accept a non-negative integer in range, reject anything else (#59)", () => {
+    expect(validateSiteConfigValue("security.adminSessionTtlDays", "14")).toBe("14");
+    expect(validateSiteConfigValue("security.appTokenTtlDays", "0")).toBe("0"); // 0 = never expires
+    expect(validateSiteConfigValue("security.appTokenTtlDays", "3650")).toBe("3650");
+    expect(validateSiteConfigValue("security.adminSessionTtlDays", "-1")).toBeNull();
+    expect(validateSiteConfigValue("security.adminSessionTtlDays", "9999")).toBeNull(); // over the ~10yr cap
+    expect(validateSiteConfigValue("security.adminSessionTtlDays", "7.5")).toBeNull(); // not an integer
+    expect(validateSiteConfigValue("security.adminSessionTtlDays", "abc")).toBeNull();
+  });
+  it("sidebar.blocks accepts an ordered CSV of KNOWN blocks, rejecting typos outright (#307)", () => {
+    expect(validateSiteConfigValue("sidebar.blocks", "connect, about")).toBe("connect,about");
+    expect(validateSiteConfigValue("sidebar.blocks", "")).toBe(""); // built-in order
+    expect(validateSiteConfigValue("sidebar.blocks", "about,about")).toBe("about"); // deduped
+    // A typo must FAIL rather than silently hiding a block.
+    expect(validateSiteConfigValue("sidebar.blocks", "about,recentt")).toBeNull();
+    expect(validateSiteConfigValue("sidebar.blocks", "tags")).toBeNull(); // not built yet
+  });
   it("categories.* accepts comma-separated slugs (normalized), empty = defaults, rejects non-slugs (#284)", () => {
     expect(validateSiteConfigValue("categories.photos", "Wildlife, macro , wildlife")).toBe("wildlife,macro"); // lowercased, deduped
     expect(validateSiteConfigValue("categories.videos", "")).toBe(""); // built-in defaults
diff --git a/src/lib/__tests__/themes.test.ts b/src/lib/__tests__/themes.test.ts
index 8eff07b..b35b5a9 100644
--- a/src/lib/__tests__/themes.test.ts
+++ b/src/lib/__tests__/themes.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import {
   deriveAccentScale, resolveTheme, isThemeId, buildThemeStyle, resolveAccent, DEFAULT_ACCENT, DEFAULT_THEME,
-  isFeedVariant, isHeaderVariant, isFooterVariant, isShellVariant, resolveLayout,
+  isFeedVariant, isHeaderVariant, isFooterVariant, isShellVariant, resolveLayout, resolveSidebar,
   FEED_VARIANTS, HEADER_VARIANTS, FOOTER_VARIANTS, SHELL_VARIANTS, THEMES,
 } from "@/lib/themes";
 
@@ -110,8 +110,9 @@ describe("Editorial theme (#250)", () => {
   it("emits a full token override — but only what actually differs", () => {
     const css = buildThemeStyle("editorial", null);
     expect(css.startsWith(":root:root{")).toBe(true);
-    // All 18 colour tokens differ from the default, so all 18 are emitted.
+    // Every surface/accent/moss token differs from the default, so all are emitted.
     for (const token of Object.keys(DEFAULT_THEME.tokens.colors)) {
+      if (token.startsWith("content")) continue; // shares the default ramp — see below
       expect(css).toContain(`--color-${token}:`);
     }
     expect(css).toContain("--color-surface-950:#17120e");
@@ -122,6 +123,15 @@ describe("Editorial theme (#250)", () => {
     expect(css).not.toContain("--font-mono");
   });
 
+  it("shares the default content ramp, so no text token is emitted (#250)", () => {
+    // Editorial hasn't customised its text colours, so every content-* token
+    // must diff out. That's what keeps `--color-content-*` resolving to the
+    // Tailwind neutral in globals.css — i.e. text renders exactly as before the
+    // migration, on this theme as well as the default.
+    const css = buildThemeStyle("editorial", null);
+    expect(css).not.toContain("--color-content");
+  });
+
   it("emits its crisp/flat feel tokens (texture), diffing out the ones it shares (#250)", () => {
     const css = buildThemeStyle("editorial", null);
     expect(css).toContain("--radius-card:4px");
@@ -136,33 +146,38 @@ describe("Editorial theme (#250)", () => {
   });
 });
 
+const luminance = (hex: string) => {
+  const n = parseInt(hex.slice(1), 16);
+  const chan = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * chan[0] + 0.7152 * chan[1] + 0.0722 * chan[2];
+};
+const contrast = (a: string, b: string) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+};
+
 /**
- * Guards the constraint that makes themes shippable at all: ~56 files hard-code
- * Tailwind neutrals (`text-white`, `text-gray-200`, `text-gray-400`) that no
- * theme token can reach, because `@theme` extends the palette rather than
- * replacing it. A light theme would therefore render invisible text sitewide
- * (`text-white` on paper is ~1.07:1). Until those utilities are migrated to
- * tokens, EVERY theme must keep a dark `surface-950`. This makes that
- * executable rather than tribal knowledge.
+ * Guards the constraint that makes themes shippable at all: most files still
+ * hard-code Tailwind neutrals (`text-white`, `text-gray-200`, `text-gray-400`)
+ * that no theme token can reach, because `@theme` extends the palette rather
+ * than replacing it. A light theme would therefore render invisible text
+ * sitewide (`text-white` on paper is ~1.07:1). Until those utilities are
+ * migrated to the `content-*` ramp, EVERY theme must keep a dark `surface-950`.
+ * This makes that executable rather than tribal knowledge.
+ *
+ * Delete this block only when the migration is finished — at which point the
+ * token check below is the whole invariant and light themes become possible.
  *
  * `gray-500` is deliberately excluded — it already fails on the DEFAULT theme
  * (4.09:1), so asserting it would fail on main. Tracked separately.
  */
 describe("every theme keeps hardcoded body text legible (#250)", () => {
-  const luminance = (hex: string) => {
-    const n = parseInt(hex.slice(1), 16);
-    const chan = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
-      const s = v / 255;
-      return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
-    });
-    return 0.2126 * chan[0] + 0.7152 * chan[1] + 0.0722 * chan[2];
-  };
-  const contrast = (a: string, b: string) => {
-    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
-    return (hi + 0.05) / (lo + 0.05);
-  };
-  // The Tailwind neutrals our components hardcode for body/secondary text.
-  const HARDCODED_TEXT = { white: "#ffffff", "gray-200": "#e5e7eb", "gray-400": "#9ca3af" };
+  // The Tailwind v4 neutrals our un-migrated components still hardcode. (v4
+  // regenerated the palette in oklch, so these are NOT the v3 hexes.)
+  const HARDCODED_TEXT = { white: "#ffffff", "gray-200": "#e5e7eb", "gray-400": "#99a1af" };
 
   for (const [id, theme] of Object.entries(THEMES)) {
     it(`${id}: white/gray-200/gray-400 stay AA on surface-950`, () => {
@@ -175,6 +190,48 @@ describe("every theme keeps hardcoded body text legible (#250)", () => {
   }
 });
 
+/**
+ * The same invariant expressed against the tokens themselves (#250) — this is
+ * the one that survives the migration, and the one a light theme will have to
+ * satisfy: whatever a theme sets its readable text to must stay AA on its own
+ * ground, whichever direction that ground moves.
+ *
+ * Only the READABLE tier is asserted. `content-faint` / `-dim` / `-ghost` are
+ * metadata and decoration (timestamps, hairlines) and sit below 4.5:1 by
+ * design — `content-faint` is `gray-500`, which is exactly why that shade is
+ * excluded above too.
+ */
+describe("every theme's readable content tokens are AA on its own ground (#250)", () => {
+  const READABLE = ["content", "content-strong", "content-muted", "content-subtle"] as const;
+
+  for (const [id, theme] of Object.entries(THEMES)) {
+    it(`${id}: readable content tokens stay AA on surface-950`, () => {
+      const ground = theme.tokens.colors["surface-950"];
+      for (const token of READABLE) {
+        const hex = theme.tokens.colors[token];
+        const ratio = contrast(hex, ground);
+        expect(ratio, `${token} (${hex}) on ${id} surface-950 (${ground}) = ${ratio.toFixed(2)}:1`).toBeGreaterThanOrEqual(4.5);
+      }
+    });
+
+    it(`${id}: the content ramp is monotonic, brightest to dimmest`, () => {
+      // A ramp that isn't ordered makes "faint" louder than "muted" and the
+      // semantic names meaningless to whoever uses them next.
+      const ramp = [
+        "content", "content-strong", "content-muted", "content-subtle",
+        "content-faint", "content-dim", "content-ghost",
+      ] as const;
+      const lums = ramp.map((t) => luminance(theme.tokens.colors[t]));
+      for (let i = 1; i < lums.length; i++) {
+        expect(
+          lums[i],
+          `${ramp[i]} (${theme.tokens.colors[ramp[i]]}) should be dimmer than ${ramp[i - 1]} on ${id}`,
+        ).toBeLessThan(lums[i - 1]);
+      }
+    });
+  }
+});
+
 describe("resolveLayout / isFeedVariant (#250 Phase 3)", () => {
   it("isFeedVariant only accepts known feed variants", () => {
     for (const v of FEED_VARIANTS) expect(isFeedVariant(v)).toBe(true);
@@ -278,3 +335,41 @@ describe("resolveLayout / isShellVariant (#250 — public shell region)", () =>
       .toEqual({ feed: "list", header: "minimal", footer: "columns", shell: "narrow" });
   });
 });
+
+describe("resolveSidebar (#307) — owner override → theme preset → default", () => {
+  it("defaults to right + all blocks when a theme presets nothing", () => {
+    expect(resolveSidebar("default", {})).toEqual({
+      side: "right", blocks: ["about", "recent", "sections", "connect"],
+    });
+  });
+
+  it("a theme's preset applies when the owner hasn't overridden (Classic Blog)", () => {
+    const r = resolveSidebar("classic", {});
+    expect(r.side).toBe("left");
+    expect(r.blocks).toEqual(["about", "recent", "connect"]); // sections omitted
+  });
+
+  it("a valid owner override beats the theme preset", () => {
+    expect(resolveSidebar("classic", { side: "right" }).side).toBe("right");
+    expect(resolveSidebar("classic", { blocks: "sections,about" }).blocks).toEqual(["sections", "about"]);
+  });
+
+  it("empty/blank overrides inherit the theme (or the default)", () => {
+    expect(resolveSidebar("classic", { side: "", blocks: "" }).side).toBe("left"); // theme
+    expect(resolveSidebar("default", { side: "", blocks: "" }).side).toBe("right"); // built-in
+  });
+
+  it("an unknown side falls through to the theme/default, not a crash", () => {
+    expect(resolveSidebar("classic", { side: "top" }).side).toBe("left");
+  });
+});
+
+describe("Classic Blog theme (#250)", () => {
+  it("is registered and presets the sidebar shell", () => {
+    expect(THEMES.classic).toBeDefined();
+    const l = resolveLayout("classic", {});
+    expect(l.shell).toBe("sidebar");
+    expect(l.feed).toBe("list");
+    expect(l.header).toBe("minimal");
+  });
+});
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index bb970d4..31cf0b2 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -192,8 +192,10 @@ export function sessionIdFromCookie(cookie: string | undefined): string | null {
   return /^[a-f0-9]{32}$/i.test(id) ? id : null;
 }
 
-function adminSessionTtlMs(): number {
-  const days = Number(process.env.ADMIN_SESSION_TTL_DAYS);
+async function adminSessionTtlMs(): Promise<number> {
+  // Web-editable (Admin → Security), env as the default (#59).
+  const { getRuntimeSiteConfig } = await import("@/lib/site-settings");
+  const days = (await getRuntimeSiteConfig()).security.adminSessionTtlDays;
   return (Number.isFinite(days) && days > 0 ? days : 30) * 24 * 60 * 60 * 1000;
 }
 
@@ -210,7 +212,7 @@ export async function createAdminSession(
     .createHmac("sha256", process.env.ADMIN_SECRET || "")
     .update(sessionId)
     .digest("hex");
-  const ttlMs = adminSessionTtlMs();
+  const ttlMs = await adminSessionTtlMs();
   const expiresAt = new Date(Date.now() + ttlMs);
   // Opportunistically sweep expired rows so the table can't grow unbounded.
   await prisma.adminSession
diff --git a/src/lib/media.ts b/src/lib/media.ts
new file mode 100644
index 0000000..3ff34c5
--- /dev/null
+++ b/src/lib/media.ts
@@ -0,0 +1,82 @@
+import { writeFile, mkdir } from "fs/promises";
+import path from "path";
+import sharp from "sharp";
+
+/**
+ * Shared image handling (#59) — the optimise / EXIF-strip / write pipeline used
+ * by both the authenticated media route and the setup-token-gated wizard upload.
+ * Returns the RELATIVE `/uploads/…` path (not an absolute URL), so callers set at
+ * different times (e.g. before SITE_URL is configured, during first-run setup)
+ * can store a stable, origin-independent path.
+ */
+
+const MAX_DIMENSION = 2400; // px (longest edge)
+const MAX_FILE_SIZE = 2 * 1024 * 1024; // optimise anything bigger
+const WEBP_QUALITY = 85;
+
+export const IMAGE_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif", "image/heic"];
+
+export async function saveUploadedImage(
+  file: File,
+): Promise<{ ok: true; path: string } | { ok: false; error: string }> {
+  if (!IMAGE_TYPES.includes(file.type)) return { ok: false, error: "unsupported file type" };
+
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const uploadDir = path.join(process.cwd(), "public", "uploads", String(year), month);
+  await mkdir(uploadDir, { recursive: true });
+
+  const timestamp = Date.now().toString(36);
+  let buffer: Buffer = Buffer.from(await file.arrayBuffer());
+  let ext: string;
+
+  try {
+    // Optimise large images (skip GIFs to preserve animation).
+    if (file.type !== "image/gif" && (buffer.length > MAX_FILE_SIZE || file.type === "image/heic")) {
+      const image = sharp(buffer);
+      const metadata = await image.metadata();
+      let pipeline = image;
+      if (metadata.width && metadata.height) {
+        const longest = Math.max(metadata.width, metadata.height);
+        if (longest > MAX_DIMENSION) {
+          pipeline = pipeline.resize({
+            width: metadata.width >= metadata.height ? MAX_DIMENSION : undefined,
+            height: metadata.height > metadata.width ? MAX_DIMENSION : undefined,
+            fit: "inside",
+            withoutEnlargement: true,
+          });
+        }
+      }
+      buffer = (await pipeline.rotate().webp({ quality: WEBP_QUALITY }).toBuffer()) as Buffer;
+      ext = "webp";
+    } else if (file.type !== "image/gif") {
+      // Strip EXIF from small images (GPS, camera serial, etc.).
+      buffer = (await sharp(buffer).rotate().toBuffer()) as Buffer;
+      const extFromMime: Record<string, string> = { "image/jpeg": "jpg", "image/png": "png", "image/webp": "webp" };
+      ext = extFromMime[file.type] || "jpg";
+    } else {
+      ext = "gif";
+    }
+  } catch {
+    // sharp can't decode it — a corrupt or mislabelled file. Caller's problem (400), not a 500.
+    return { ok: false, error: "couldn't process that image — is it a valid file?" };
+  }
+
+  const filename = `${timestamp}.${ext}`;
+  await writeFile(path.join(uploadDir, filename), buffer);
+  return { ok: true, path: `/uploads/${year}/${month}/${filename}` };
+}
+
+/**
+ * A safe same-origin image path — a prior `/uploads/…` upload or a built-in
+ * `/images/…` asset — else null. Never an external URL (SSRF/hotlink) or a
+ * traversal escape. `""`/`null` are treated as "clear to the default".
+ */
+export function validateImagePath(input: unknown): string | null | undefined {
+  if (input === null || (typeof input === "string" && input.trim() === "")) return ""; // clear
+  if (typeof input !== "string") return undefined; // invalid
+  const p = input.trim();
+  if (!/^\/(uploads|images)\/[A-Za-z0-9._/-]+$/.test(p) || p.includes("..")) return undefined;
+  return p;
+}
diff --git a/src/lib/push-client.ts b/src/lib/push-client.ts
new file mode 100644
index 0000000..1a2736f
--- /dev/null
+++ b/src/lib/push-client.ts
@@ -0,0 +1,66 @@
+/**
+ * Web-push enrollment decision logic (#59), split out of `PushSetup.tsx`.
+ *
+ * The component is a client component and the test suite runs in the `node`
+ * environment (no DOM, no jsdom), so the part worth testing — deciding whether
+ * this device is genuinely subscribed — lives here as pure functions over
+ * primitives. The component supplies the browser objects.
+ *
+ * The subtlety these encode: a `PushSubscription` object existing does NOT mean
+ * push works. It is bound to the `applicationServerKey` it was created with, so
+ * after a server-side VAPID rotation it can never receive a send again — while
+ * still looking perfectly healthy to `getSubscription()`. Reporting that as "on"
+ * is how a device silently goes dark.
+ */
+
+/**
+ * base64url of a subscription's `applicationServerKey`, in the same encoding the
+ * server reports its public key in — so the two can be compared directly.
+ * `""` when there's no key to read.
+ */
+export function subKeyOf(raw: ArrayBuffer | ArrayBufferView | null | undefined): string {
+  if (!raw) return "";
+  const bytes =
+    raw instanceof ArrayBuffer
+      ? new Uint8Array(raw)
+      : new Uint8Array(raw.buffer, raw.byteOffset, raw.byteLength);
+  let bin = "";
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+/**
+ * `needs-keys` — the server has no VAPID keypair, so nothing can be subscribed
+ * yet (the owner sets one up in one click).
+ * `on` — this device holds a subscription bound to the server's current key.
+ * `ready` — push is available but this device isn't (or is no longer) enrolled.
+ */
+export type PushEnrollment = "needs-keys" | "on" | "ready";
+
+export interface PushStatusInput {
+  /** Whether the server has a full VAPID keypair (from `GET /api/push`). */
+  configured: boolean;
+  /** The server's current VAPID public key, base64url. */
+  serverKey: string;
+  /** How many subscriptions the server currently holds. */
+  serverCount: number;
+  /** base64url of this device's subscription key, or `null` when unsubscribed. */
+  subKey: string | null;
+}
+
+export function resolvePushStatus({
+  configured,
+  serverKey,
+  serverCount,
+  subKey,
+}: PushStatusInput): PushEnrollment {
+  // No keypair on the server — the enable button would only ever fail, so say so
+  // up front instead of letting the owner click into a dead end (#59).
+  if (!configured || !serverKey) return "needs-keys";
+  if (!subKey) return "ready";
+  // The server holds no subscriptions: its keys were rotated + purged from under
+  // us, so whatever this device still has is dead.
+  if (serverCount === 0) return "ready";
+  // Bound to a different (rotated) key — dead, however healthy it looks.
+  return subKey === serverKey ? "on" : "ready";
+}
diff --git a/src/lib/push-config.ts b/src/lib/push-config.ts
new file mode 100644
index 0000000..c2d0a71
--- /dev/null
+++ b/src/lib/push-config.ts
@@ -0,0 +1,152 @@
+import webpush from "web-push";
+import { prisma } from "./db";
+import { siteConfig } from "@/../site.config";
+import { encryptSecret, decryptSecret } from "./secret-box";
+import { getRuntimeSiteConfig } from "./site-settings";
+
+/**
+ * Web-push VAPID configuration (#59), settable in the admin panel so PWA push
+ * needs no `.env` editing. Mirrors the encrypted-secret pattern used for the
+ * Tinylytics API key (see analytics-secret.ts): stored as `SiteSetting` rows
+ * under the `integration.push.*` namespace, DELIBERATELY outside
+ * `SITE_CONFIG_KEYS` so the site-config admin GET / applySiteConfig never touch
+ * them. The public key + subject are public (the browser needs the public key);
+ * the private signing key is AES-256-GCM-encrypted at rest.
+ *
+ * Env fallback (`VAPID_*`) throughout, so instances configured the old way keep
+ * working; a saved DB key takes precedence.
+ */
+
+const PUB = "integration.push.publicKey";
+const PRIV = "integration.push.privateKey"; // encrypted
+const SUBJ = "integration.push.subject";
+
+async function readRows(): Promise<Record<string, string>> {
+  try {
+    const rows = await prisma.siteSetting.findMany({ where: { key: { in: [PUB, PRIV, SUBJ] } } });
+    return Object.fromEntries(rows.map((r) => [r.key, r.value]));
+  } catch {
+    return {}; // DB down/mid-migration → fall back to env
+  }
+}
+
+/** The VAPID `mailto:` subject — the web-set contact email, else the fedi domain. */
+async function defaultSubject(): Promise<string> {
+  let email = "";
+  try {
+    email = (await getRuntimeSiteConfig()).contact.email || "";
+  } catch {
+    /* DB down → env/config fallback below */
+  }
+  email = email || siteConfig.contactEmail || "";
+  return email ? `mailto:${email}` : `mailto:admin@${siteConfig.fediDomain}`;
+}
+
+export interface VapidConfig {
+  publicKey: string;
+  privateKey: string;
+  subject: string;
+}
+
+/**
+ * The resolved VAPID triple: the saved DB values (private key decrypted) if
+ * complete, else the env vars. `null` when neither source has a full keypair
+ * (push then stays dormant).
+ */
+export async function getVapidConfig(): Promise<VapidConfig | null> {
+  const o = await readRows();
+  const dbPriv = o[PRIV] ? decryptSecret(o[PRIV]) : null;
+  if (o[PUB] && dbPriv) {
+    return { publicKey: o[PUB], privateKey: dbPriv, subject: o[SUBJ] || (await defaultSubject()) };
+  }
+  const ePub = process.env.VAPID_PUBLIC_KEY;
+  const ePriv = process.env.VAPID_PRIVATE_KEY;
+  if (ePub && ePriv) {
+    return { publicKey: ePub, privateKey: ePriv, subject: process.env.VAPID_SUBJECT || (await defaultSubject()) };
+  }
+  return null;
+}
+
+/** The public key the browser needs to subscribe. Safe to expose; "" when unset. */
+export async function getVapidPublicKey(): Promise<string> {
+  return (await getVapidConfig())?.publicKey ?? "";
+}
+
+/** Whether push can actually be sent (a full keypair exists in DB or env). */
+export async function pushConfigured(): Promise<boolean> {
+  return !!(await getVapidConfig());
+}
+
+/** Admin-panel status — never returns the private key. */
+export async function getPushKeyStatus(): Promise<{ configured: boolean; source: "db" | "env" | null; subject: string }> {
+  const o = await readRows();
+  const db = !!(o[PUB] && o[PRIV] && decryptSecret(o[PRIV]));
+  const env = !!(process.env.VAPID_PUBLIC_KEY && process.env.VAPID_PRIVATE_KEY);
+  const subject = o[SUBJ] || process.env.VAPID_SUBJECT || (await defaultSubject());
+  return { configured: db || env, source: db ? "db" : env ? "env" : null, subject };
+}
+
+/**
+ * Rotating VAPID keys invalidates EVERY existing subscription — each is bound to
+ * the old `applicationServerKey` and can never receive a send signed by a new
+ * key. So any key change must drop them all; devices re-enrol against the new
+ * key (the client detects the mismatch and re-subscribes).
+ */
+async function purgeSubscriptions(): Promise<void> {
+  await prisma.pushSubscription.deleteMany({}).catch(() => {});
+}
+
+/** Save a VAPID triple (private key encrypted), purging old subscriptions. */
+export async function setVapidKeys(
+  publicKey: string,
+  privateKey: string,
+  subject?: string,
+): Promise<{ ok: true } | { ok: false; error: string }> {
+  const enc = encryptSecret(privateKey);
+  if (!enc) return { ok: false, error: "Encryption unavailable — ADMIN_SECRET is not set." };
+  await prisma.siteSetting.upsert({ where: { key: PUB }, update: { value: publicKey }, create: { key: PUB, value: publicKey } });
+  await prisma.siteSetting.upsert({ where: { key: PRIV }, update: { value: enc }, create: { key: PRIV, value: enc } });
+  if (subject) {
+    await prisma.siteSetting.upsert({ where: { key: SUBJ }, update: { value: subject }, create: { key: SUBJ, value: subject } });
+  }
+  await purgeSubscriptions();
+  invalidatePushConfig();
+  return { ok: true };
+}
+
+/** Generate a fresh keypair server-side, save it (purging old subscriptions), return the public key. */
+export async function generateVapidKeys(subject?: string): Promise<{ ok: true; publicKey: string } | { ok: false; error: string }> {
+  const { publicKey, privateKey } = webpush.generateVAPIDKeys();
+  const r = await setVapidKeys(publicKey, privateKey, subject);
+  return r.ok ? { ok: true, publicKey } : r;
+}
+
+/** Remove the DB override (reverts to env if set), purging subscriptions. */
+export async function clearVapidKeys(): Promise<void> {
+  await prisma.siteSetting.deleteMany({ where: { key: { in: [PUB, PRIV, SUBJ] } } });
+  await purgeSubscriptions();
+  invalidatePushConfig();
+}
+
+/* --- web-push global re-init ------------------------------------------------
+ * `webpush.setVapidDetails` sets PROCESS-GLOBAL state, so a one-shot boolean
+ * would keep signing with the old key after a rotation. Instead we track a
+ * fingerprint of the active keys and re-init whenever it changes. getVapidConfig
+ * reads fresh each call (push isn't a hot path), so a rotation in ANY process is
+ * picked up on that process's next send. */
+let currentFingerprint = "";
+export function invalidatePushConfig(): void {
+  currentFingerprint = "";
+}
+
+/** Ensure web-push is configured with the CURRENT keys; re-inits on change. False when unset. */
+export async function ensurePushConfigured(): Promise<boolean> {
+  const c = await getVapidConfig();
+  if (!c) return false;
+  const fp = `${c.publicKey}:${c.subject}`;
+  if (fp !== currentFingerprint) {
+    webpush.setVapidDetails(c.subject, c.publicKey, c.privateKey);
+    currentFingerprint = fp;
+  }
+  return true;
+}
diff --git a/src/lib/push.ts b/src/lib/push.ts
index 3c34a46..33956ea 100644
--- a/src/lib/push.ts
+++ b/src/lib/push.ts
@@ -1,7 +1,7 @@
 import webpush from "web-push";
 import { prisma } from "./db";
-import { siteConfig } from "@/../site.config";
 import { computeNotifications } from "./notifications";
+import { ensurePushConfigured } from "./push-config";
 
 /**
  * Web Push (PWA notifications) for the single site owner.
@@ -10,39 +10,11 @@ import { computeNotifications } from "./notifications";
  * `sendPushToOwner` fans a payload out to all the owner's registered devices and
  * prunes endpoints the push service reports as gone (404/410).
  *
- * Dormant until VAPID keys are set in .env.local (gitignored):
- *   VAPID_PUBLIC_KEY  — also handed to the browser as applicationServerKey
- *   VAPID_PRIVATE_KEY — server-only signing key
- *   VAPID_SUBJECT     — contact, e.g. mailto:you@example.com
- * Generate a keypair with:  npx web-push generate-vapid-keys
+ * The VAPID keys themselves (settable in the admin panel or via VAPID_* env)
+ * live in push-config.ts; `ensurePushConfigured()` re-inits web-push whenever
+ * they change, so this module just sends.
  */
 
-const PUBLIC = process.env.VAPID_PUBLIC_KEY || "";
-const PRIVATE = process.env.VAPID_PRIVATE_KEY || "";
-const SUBJECT =
-  process.env.VAPID_SUBJECT ||
-  (siteConfig.contactEmail ? `mailto:${siteConfig.contactEmail}` : `mailto:admin@${siteConfig.fediDomain}`);
-
-let configured = false;
-function ensureConfigured(): boolean {
-  if (!PUBLIC || !PRIVATE) return false;
-  if (!configured) {
-    webpush.setVapidDetails(SUBJECT, PUBLIC, PRIVATE);
-    configured = true;
-  }
-  return true;
-}
-
-/** True when VAPID keys are present so push can actually be sent. */
-export function pushConfigured(): boolean {
-  return !!(PUBLIC && PRIVATE);
-}
-
-/** The VAPID public key the browser needs to subscribe. Safe to expose. */
-export function getVapidPublicKey(): string {
-  return PUBLIC;
-}
-
 export interface PushPayload {
   title: string;
   body: string;
@@ -63,7 +35,7 @@ const FAILURE_PRUNE_THRESHOLD = 8;
  */
 export async function sendPushToOwner(payload: PushPayload): Promise<void> {
   try {
-    if (!ensureConfigured()) return; // keys not set — silently no-op
+    if (!(await ensurePushConfigured())) return; // keys not set — silently no-op
 
     const subs = await prisma.pushSubscription.findMany();
     if (subs.length === 0) return;
diff --git a/src/lib/setup-token.ts b/src/lib/setup-token.ts
new file mode 100644
index 0000000..11663ad
--- /dev/null
+++ b/src/lib/setup-token.ts
@@ -0,0 +1,39 @@
+import crypto from "crypto";
+import { prisma } from "./db";
+import { safeCompare } from "./auth";
+
+/**
+ * First-run setup token (#22). When `ADMIN_SECRET` isn't configured yet (a fresh,
+ * possibly publicly-exposed deploy), any first-run write — completing setup, or
+ * uploading an avatar during the wizard — requires this out-of-band token so an
+ * anonymous visitor can't claim the instance before the owner. Taken from
+ * `SETUP_TOKEN` if set; otherwise generated once, stored, and printed to the
+ * server console for the operator to copy.
+ *
+ * Stored as the `setup_token` SiteSetting row, so every caller resolves the same
+ * value.
+ */
+export async function getOrCreateSetupToken(): Promise<string> {
+  if (process.env.SETUP_TOKEN) return process.env.SETUP_TOKEN;
+  const existing = await prisma.siteSetting.findUnique({ where: { key: "setup_token" } });
+  if (existing) return existing.value;
+  const token = crypto.randomBytes(24).toString("hex");
+  try {
+    await prisma.siteSetting.create({ data: { key: "setup_token", value: token } });
+    console.warn(
+      `\n[FediHome] First-run setup token — enter this in the setup wizard to complete setup:\n          ${token}\n`,
+    );
+    return token;
+  } catch {
+    // Lost a race to create it — read whoever won.
+    const again = await prisma.siteSetting.findUnique({ where: { key: "setup_token" } });
+    return again?.value ?? token;
+  }
+}
+
+/** Constant-time check of a provided setup token against the expected one. */
+export async function verifySetupToken(provided: unknown): Promise<boolean> {
+  if (typeof provided !== "string" || !provided) return false;
+  const expected = await getOrCreateSetupToken();
+  return safeCompare(provided, expected);
+}
diff --git a/src/lib/sidebar.ts b/src/lib/sidebar.ts
new file mode 100644
index 0000000..7e77e89
--- /dev/null
+++ b/src/lib/sidebar.ts
@@ -0,0 +1,59 @@
+/**
+ * Sidebar configuration (#307) — which blocks the sidebar shows, in what order,
+ * and which side it sits on. Kept pure (no prisma / server-only imports) so both
+ * server components and the admin client bundle can use it, exactly like
+ * `@/lib/categories` and `@/lib/themes`.
+ *
+ * The block list is deliberately ONE ordered CSV rather than a set of toggles
+ * plus a separate order: the list order IS the render order, and omitting a
+ * block hides it. That also settles the header/sidebar duplication — drop
+ * `sections` and your nav appears once, not twice.
+ */
+
+/** Which side of the content the sidebar sits on. `right` is the shipped default. */
+export type SidebarSide = "right" | "left";
+export const SIDEBAR_SIDES: SidebarSide[] = ["right", "left"];
+
+export function isSidebarSide(v: string): v is SidebarSide {
+  return (SIDEBAR_SIDES as readonly string[]).includes(v);
+}
+
+/** Every block the sidebar can render. Order here is the built-in default order. */
+export type SidebarBlock = "about" | "recent" | "sections" | "connect";
+export const SIDEBAR_BLOCKS: SidebarBlock[] = ["about", "recent", "sections", "connect"];
+
+export function isSidebarBlock(v: string): v is SidebarBlock {
+  return (SIDEBAR_BLOCKS as readonly string[]).includes(v);
+}
+
+/** Human label for the admin UI. */
+export function sidebarBlockLabel(block: SidebarBlock): string {
+  const labels: Record<SidebarBlock, string> = {
+    about: "About",
+    recent: "Recent posts",
+    sections: "Sections",
+    connect: "Connect",
+  };
+  return labels[block];
+}
+
+/**
+ * Parse a comma-separated block list: trim, lowercase, keep only known blocks,
+ * dedupe. A blank or entirely-unknown string yields `[]` so callers fall back to
+ * the built-in order. (Unknown names are rejected at save time by
+ * `validateSiteConfigValue`, so this is the belt to that braces.)
+ */
+export function parseSidebarBlocks(csv: string | null | undefined): SidebarBlock[] {
+  if (!csv) return [];
+  const out: SidebarBlock[] = [];
+  for (const raw of csv.split(",")) {
+    const name = raw.trim().toLowerCase();
+    if (isSidebarBlock(name) && !out.includes(name)) out.push(name);
+  }
+  return out;
+}
+
+/** The effective block list: the parsed order, or the built-in default when empty. */
+export function resolveSidebarBlocks(parsed: SidebarBlock[]): SidebarBlock[] {
+  return parsed.length ? parsed : [...SIDEBAR_BLOCKS];
+}
diff --git a/src/lib/site-settings.ts b/src/lib/site-settings.ts
index 6d2fe35..8fe0b4e 100644
--- a/src/lib/site-settings.ts
+++ b/src/lib/site-settings.ts
@@ -1,7 +1,11 @@
 import { prisma } from "./db";
 import { siteConfig } from "@/../site.config";
-import { isThemeId, isFeedVariant, isHeaderVariant, isFooterVariant, isShellVariant } from "./themes";
+import { isThemeId, isFeedVariant, isHeaderVariant, isFooterVariant, isShellVariant, resolveSidebar } from "./themes";
 import { parseCategoryList, resolveCategoryList, MAX_CATEGORIES } from "./categories";
+import {
+  isSidebarSide, isSidebarBlock,
+  type SidebarSide, type SidebarBlock,
+} from "./sidebar";
 
 const SLUG = /^[a-z0-9-]+$/;
 
@@ -19,7 +23,7 @@ const SLUG = /^[a-z0-9-]+$/;
  * (site-profile.ts, #201).
  */
 
-export type FieldType = "bool" | "text" | "url";
+export type FieldType = "bool" | "text" | "url" | "int";
 
 /** Every editable key and its value type (drives validation + parsing). */
 export const SITE_CONFIG_FIELDS: Record<string, FieldType> = {
@@ -53,6 +57,10 @@ export const SITE_CONFIG_FIELDS: Record<string, FieldType> = {
   "layout.header": "text", // "" (inherit theme) or a known header variant (see validateSiteConfigValue)
   "layout.footer": "text", // "" (inherit theme) or a known footer variant (see validateSiteConfigValue)
   "layout.shell": "text", // "" (inherit theme) or a known shell variant (see validateSiteConfigValue)
+  "sidebar.side": "text", // "" (default right) or left|right (#307)
+  "sidebar.blocks": "text", // ordered CSV of known blocks; "" = built-in order (#307)
+  "security.adminSessionTtlDays": "int", // 0–3650; how long an admin session lasts (#59)
+  "security.appTokenTtlDays": "int", // 0–3650; 0 = app tokens never expire (#59)
   "contact.email": "text",
   "podcast.title": "text",
   "podcast.author": "text",
@@ -86,6 +94,10 @@ export interface RuntimeSiteConfig {
   download: { macosEnabled: boolean; macosReleaseUrl: string; macosAppStoreUrl: string };
   theme: { id: string };
   layout: { feed: string; header: string; footer: string; shell: string };
+  /** Sidebar options (#307) — only meaningful when the shell variant is "sidebar". */
+  sidebar: { side: SidebarSide; blocks: SidebarBlock[] };
+  /** Security policy (#59) — session/token lifetimes in days (0 = app tokens never expire). */
+  security: { adminSessionTtlDays: number; appTokenTtlDays: number };
   contact: { email: string };
   // /audio podcast feed overrides — empty means "derive from your profile".
   podcast: { title: string; author: string; description: string; email: string; image: string };
@@ -114,6 +126,11 @@ export function siteConfigDefaults(): RuntimeSiteConfig {
     download: { ...siteConfig.download },
     theme: { ...siteConfig.theme },
     layout: { ...siteConfig.layout },
+    sidebar: resolveSidebar(siteConfig.theme.id, {
+      side: siteConfig.sidebar.side,
+      blocks: siteConfig.sidebar.blocks,
+    }),
+    security: { ...siteConfig.security },
     contact: { email: siteConfig.contactEmail },
     podcast: { ...siteConfig.podcast },
     categories: {
@@ -133,6 +150,11 @@ function boolOverride(v: string | undefined, fallback: boolean): boolean {
 function textOverride(v: string | undefined, fallback: string): string {
   return v == null ? fallback : v;
 }
+function intOverride(v: string | undefined, fallback: number): number {
+  if (v == null) return fallback;
+  const n = Number(v);
+  return Number.isInteger(n) && n >= 0 ? n : fallback;
+}
 
 const CACHE_TTL_MS = 60_000;
 let cache: { at: number; cfg: RuntimeSiteConfig } | null = null;
@@ -151,6 +173,8 @@ export async function getRuntimeSiteConfig(): Promise<RuntimeSiteConfig> {
   try {
     const rows = await prisma.siteSetting.findMany({ where: { key: { in: SITE_CONFIG_KEYS } } });
     const o = Object.fromEntries(rows.map((r) => [r.key, r.value]));
+    // Resolve the theme id up front — the sidebar layering below reads its preset.
+    const themeId = textOverride(o["theme.id"], base.theme.id);
     cfg = {
       name: textOverride(o["site.name"], base.name),
       description: textOverride(o["site.description"], base.description),
@@ -185,7 +209,7 @@ export async function getRuntimeSiteConfig(): Promise<RuntimeSiteConfig> {
         macosReleaseUrl: textOverride(o["download.macos.releaseUrl"], base.download.macosReleaseUrl),
         macosAppStoreUrl: textOverride(o["download.macos.appStoreUrl"], base.download.macosAppStoreUrl),
       },
-      theme: { id: textOverride(o["theme.id"], base.theme.id) },
+      theme: { id: themeId },
       layout: {
         feed: textOverride(o["layout.feed"], base.layout.feed),
         header: textOverride(o["layout.header"], base.layout.header),
@@ -200,6 +224,16 @@ export async function getRuntimeSiteConfig(): Promise<RuntimeSiteConfig> {
         email: textOverride(o["podcast.email"], base.podcast.email),
         image: textOverride(o["podcast.image"], base.podcast.image),
       },
+      // Sidebar side + ordered block list (#307), layered against the active
+      // theme's preset: owner override → theme preset → built-in default.
+      sidebar: resolveSidebar(themeId, {
+        side: o["sidebar.side"] ?? siteConfig.sidebar.side,
+        blocks: o["sidebar.blocks"] ?? siteConfig.sidebar.blocks,
+      }),
+      security: {
+        adminSessionTtlDays: intOverride(o["security.adminSessionTtlDays"], base.security.adminSessionTtlDays),
+        appTokenTtlDays: intOverride(o["security.appTokenTtlDays"], base.security.appTokenTtlDays),
+      },
       // Resolve the override CSV (else the env CSV) into a slug list; empty → defaults.
       categories: {
         photos: resolveCategoryList(parseCategoryList(o["categories.photos"] ?? siteConfig.categories.photos), "photos"),
@@ -234,12 +268,26 @@ const CONTROL = /[\r\n]/;
 export function validateSiteConfigValue(key: string, value: string): string | null {
   const type = SITE_CONFIG_FIELDS[key];
   if (type === "bool") return value === "true" || value === "false" ? value : null;
+  if (type === "int") {
+    const n = Number(value);
+    return Number.isInteger(n) && n >= 0 && n <= 3650 ? String(n) : null; // days, ~10yr cap
+  }
   if (value.length > MAX_TEXT || CONTROL.test(value)) return null;
   if (key === "theme.id") return isThemeId(value) ? value : null; // must be a known theme
   if (key === "layout.feed") return value === "" || isFeedVariant(value) ? value : null; // "" inherits the theme
   if (key === "layout.header") return value === "" || isHeaderVariant(value) ? value : null; // "" inherits the theme
   if (key === "layout.footer") return value === "" || isFooterVariant(value) ? value : null; // "" inherits the theme
   if (key === "layout.shell") return value === "" || isShellVariant(value) ? value : null; // "" inherits the theme
+  if (key === "sidebar.side") return value === "" || isSidebarSide(value) ? value : null; // "" = right
+  if (key === "sidebar.blocks") {
+    // "" = built-in order. Else an ordered CSV of KNOWN blocks — reject unknown
+    // names rather than silently dropping them, so a typo surfaces at save time
+    // instead of quietly hiding a block.
+    if (value.trim() === "") return "";
+    const tokens = value.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+    if (tokens.length === 0 || !tokens.every((t) => isSidebarBlock(t))) return null;
+    return [...new Set(tokens)].join(",");
+  }
   if (key === "categories.photos" || key === "categories.videos" || key === "categories.audio") {
     // "" = built-in defaults. Else comma-separated URL-safe slugs, deduped, capped.
     if (value.trim() === "") return "";
diff --git a/src/lib/themes/classic.ts b/src/lib/themes/classic.ts
new file mode 100644
index 0000000..a460315
--- /dev/null
+++ b/src/lib/themes/classic.ts
@@ -0,0 +1,72 @@
+import type { Theme } from "./types";
+import { CONTENT_RAMP } from "./content";
+
+/**
+ * "Classic Blog" (#250) — the third built-in theme, and the first to lean on the
+ * sidebar shell: a left sidebar of bio / recent posts / links beside a compact
+ * reading column, warm charcoal ground, a pine-green accent, and serif
+ * throughout. A traditional personal-blog counterpoint to the default's cool
+ * glass and Editorial's sepia print.
+ *
+ * **Composition (why these presets).** `shell: "sidebar"` is the whole point;
+ * `header: "minimal"` keeps a quiet masthead (name + menu) so the nav isn't
+ * duplicated — the sidebar omits `sections` and carries about / recent / connect
+ * instead, exactly the combination flagged in #307. `feed: "list"` gives the
+ * date-led index a blog wants. An owner can still override any of it.
+ *
+ * **Why it's dark.** Same reason as Editorial: a light ground is unreachable
+ * until the remaining hard-coded `text-white` / `gray-*` utilities become
+ * `content-*` tokens, so the contrast invariant in `themes.test.ts` keeps
+ * `surface-950` dark. This is a warm *charcoal*, not paper.
+ *
+ * **Fonts** swap round only (buildThemeStyle can't register `@font-face`): serif
+ * display AND serif body — a fully bookish voice, distinct from Editorial's sans
+ * headline over serif body. `mono` is untouched, so it diffs out.
+ */
+export const CLASSIC_THEME: Theme = {
+  id: "classic",
+  name: "Classic Blog",
+  description: "A left sidebar of bio, recent posts and links beside a serif reading column — warm charcoal, pine-green accent.",
+  tokens: {
+    colors: {
+      // Warm neutral charcoal — a hair of warmth, monotonic in luminance.
+      "surface-950": "#141310",
+      "surface-900": "#1b1916",
+      "surface-800": "#24211a",
+      "surface-700": "#302b22",
+      "surface-600": "#463f33",
+      // Pine green — deriveAccentScale("#3f7d5c"), pinned so the theme's identity
+      // can't drift if that ramp is ever retuned.
+      "accent-50": "#f5f9f7",
+      "accent-100": "#e8efeb",
+      "accent-200": "#cdddd5",
+      "accent-300": "#a9c5b6",
+      "accent-400": "#75a18a",
+      "accent-500": "#3f7d5c",
+      "accent-600": "#376e51",
+      "accent-700": "#2d5a42",
+      "accent-800": "#234533",
+      "accent-900": "#1a3527",
+      // Warm gold — the highlight counterpart to the pine accent.
+      "moss-400": "#cbb26b",
+      "moss-500": "#b0904a",
+      "moss-600": "#8a6f38",
+      // Text ramp (#250) — unchanged for now: the migration onto these tokens is still in progress, so a warm text ramp would only apply to the already-migrated surfaces.
+      ...CONTENT_RAMP,
+    },
+    fonts: {
+      display: '"Source Serif 4", "Georgia", serif',
+      body: '"Source Serif 4", "Georgia", serif',
+      mono: '"JetBrains Mono", "Fira Code", monospace',
+    },
+    // Softly rounded, no glass — a calm, paper-like blog rather than frosted glass.
+    feel: {
+      radiusCard: "8px",
+      radiusButton: "6px",
+      glassFilter: "none",
+    },
+  },
+  layout: { feed: "list", header: "minimal", footer: "row", shell: "sidebar" },
+  // A left sidebar; `sections` omitted so the nav lives once, in the header menu.
+  sidebar: { side: "left", blocks: ["about", "recent", "connect"] },
+};
diff --git a/src/lib/themes/content.ts b/src/lib/themes/content.ts
new file mode 100644
index 0000000..5642413
--- /dev/null
+++ b/src/lib/themes/content.ts
@@ -0,0 +1,41 @@
+import type { ColorToken } from "./types";
+
+/**
+ * The text/content ramp (#250) — the tokens body copy resolves to, so a theme
+ * can move text colour and not just its background.
+ *
+ * **Why this exists.** Components hard-coded Tailwind neutrals (`text-white`,
+ * `text-gray-400`, …) for every piece of text. `@theme` *extends* Tailwind's
+ * palette rather than replacing it, so those neutrals stay fixed while
+ * `surface-*` moves — which is precisely why every theme has had to be dark: on
+ * a paper ground `text-white` lands around 1:1, an invisible site. Migrating
+ * those utilities onto these tokens is what makes a light theme (and the
+ * in-admin custom palette) reachable.
+ *
+ * **The values are Tailwind v4's own neutrals**, so the migration is a pure
+ * rename with no visual change. Note they are NOT the v3 hexes people remember
+ * (`gray-500` is `#6a7282` here, not `#6b7280`) — v4 regenerated the palette in
+ * oklch. `globals.css` defaults each token to `var(--color-gray-*)` so the
+ * default theme renders the Tailwind colour *exactly*; these hexes are the same
+ * colours written in sRGB, used for diffing in `buildThemeStyle` and for the
+ * contrast maths in `themes.test.ts`.
+ *
+ * Ordered brightest → dimmest. A theme spreads this and overrides only what it
+ * wants to move.
+ */
+export const CONTENT_RAMP: Record<Extract<ColorToken, `content${string}`>, string> = {
+  /** Primary text — headings, body copy. Was `text-white`. */
+  content: "#ffffff",
+  /** Just under primary. Was `text-gray-200`. */
+  "content-strong": "#e5e7eb",
+  /** Secondary copy. Was `text-gray-300`. */
+  "content-muted": "#d1d5dc",
+  /** Tertiary — labels, captions. Was `text-gray-400`. */
+  "content-subtle": "#99a1af",
+  /** Metadata — timestamps, counts, bylines. Was `text-gray-500`. */
+  "content-faint": "#6a7282",
+  /** Decorative or de-emphasised. Was `text-gray-600`. */
+  "content-dim": "#4a5565",
+  /** The quietest step — separators, hairline text. Was `text-gray-700`. */
+  "content-ghost": "#364153",
+};
diff --git a/src/lib/themes/default.ts b/src/lib/themes/default.ts
index c009c44..c23902a 100644
--- a/src/lib/themes/default.ts
+++ b/src/lib/themes/default.ts
@@ -1,4 +1,5 @@
 import type { Theme } from "./types";
+import { CONTENT_RAMP } from "./content";
 
 /**
  * The default ("Cards") theme — today's look, extracted verbatim from the
@@ -30,6 +31,8 @@ export const DEFAULT_THEME: Theme = {
       "moss-400": "#34d399",
       "moss-500": "#10b981",
       "moss-600": "#059669",
+      // Text ramp (#250) — the Tailwind neutrals the components already used.
+      ...CONTENT_RAMP,
     },
     fonts: {
       display: '"Source Serif 4", "Georgia", serif',
diff --git a/src/lib/themes/editorial.ts b/src/lib/themes/editorial.ts
index f332b78..db71ad7 100644
--- a/src/lib/themes/editorial.ts
+++ b/src/lib/themes/editorial.ts
@@ -1,4 +1,5 @@
 import type { Theme } from "./types";
+import { CONTENT_RAMP } from "./content";
 
 /**
  * "Editorial" (#250) — the second built-in theme, and the first proof that the
@@ -6,14 +7,15 @@ import type { Theme } from "./types";
  * A warm sepia ground with a terracotta accent, serif body copy and a compact
  * list feed — a reading-first counterpoint to the default's cool glassy Cards.
  *
- * **Why it's dark, not paper.** A light theme isn't reachable yet: ~56 files
- * (and the global body class in `app/layout.tsx`) hard-code Tailwind neutrals
- * like `text-white` / `text-gray-200`, which are NOT theme tokens — `@theme`
- * *extends* the palette, so `gray-*` stays fixed while `surface-*` moves. On a
- * paper ground `text-white` lands at 1.07:1 and `text-gray-200` at 1.16:1, i.e.
- * an invisible site. Light themes need those utilities migrated to tokens
- * first; until then every theme must be dark. `themes.test.ts` encodes this as
- * a contrast invariant so it can't be violated by accident.
+ * **Why it's dark, not paper.** A light theme isn't reachable yet: most files
+ * (and the global body class in `app/layout.tsx`) still hard-code Tailwind
+ * neutrals like `text-white` / `text-gray-200`, which are NOT theme tokens —
+ * `@theme` *extends* the palette, so `gray-*` stays fixed while `surface-*`
+ * moves. On a paper ground `text-white` lands at 1.07:1 and `text-gray-200` at
+ * 1.16:1, i.e. an invisible site. The `content-*` ramp (`content.ts`) is the
+ * migration target and the layout chrome is already on it; until the rest
+ * follows, every theme must be dark. `themes.test.ts` encodes this as a
+ * contrast invariant so it can't be violated by accident.
  *
  * **Why the fonts only swap round.** `buildThemeStyle` can swap font *families*
  * but cannot register `@font-face`, and only Inter + Source Serif 4 are
@@ -51,6 +53,8 @@ export const EDITORIAL_THEME: Theme = {
       "moss-400": "#9cb380",
       "moss-500": "#7e9a5f",
       "moss-600": "#63793f",
+      // Text ramp (#250) — unchanged for now: the migration onto these tokens is still in progress, so a warm text ramp would only apply to the already-migrated surfaces.
+      ...CONTENT_RAMP,
     },
     fonts: {
       display: '"Inter", system-ui, -apple-system, sans-serif',
diff --git a/src/lib/themes/index.ts b/src/lib/themes/index.ts
index 193231f..9204455 100644
--- a/src/lib/themes/index.ts
+++ b/src/lib/themes/index.ts
@@ -9,7 +9,7 @@ export { DEFAULT_THEME } from "./default";
 export { THEMES, THEME_IDS, isThemeId, resolveTheme } from "./registry";
 export {
   LAYOUT_REGIONS, FEED_VARIANTS, HEADER_VARIANTS, FOOTER_VARIANTS, SHELL_VARIANTS,
-  isFeedVariant, isHeaderVariant, isFooterVariant, isShellVariant, resolveLayout,
+  isFeedVariant, isHeaderVariant, isFooterVariant, isShellVariant, resolveLayout, resolveSidebar,
 } from "./layout";
 
 const HEX = /^#[0-9a-fA-F]{6}$/;
diff --git a/src/lib/themes/layout.ts b/src/lib/themes/layout.ts
index 5b57f57..e753112 100644
--- a/src/lib/themes/layout.ts
+++ b/src/lib/themes/layout.ts
@@ -1,5 +1,9 @@
 import type { FeedVariant, HeaderVariant, FooterVariant, ShellVariant, LayoutConfig } from "./types";
 import { resolveTheme } from "./registry";
+import {
+  isSidebarSide, parseSidebarBlocks, SIDEBAR_BLOCKS,
+  type SidebarSide, type SidebarBlock,
+} from "@/lib/sidebar";
 
 /**
  * Layout region catalogue + resolution (#250). A theme picks a variant for each
@@ -85,3 +89,23 @@ export function resolveLayout(
     shell: isShellVariant(overrides.shell ?? "") ? (overrides.shell as ShellVariant) : base.shell,
   };
 }
+
+/**
+ * The active sidebar config (#307), layered like `resolveLayout`: a valid owner
+ * override wins, else the theme's preset (a Classic-Blog-style theme can bake in
+ * a left sidebar with `sections` omitted), else the built-in default (right, all
+ * blocks). `blocks: ""` means "inherit" — only a non-empty parse counts as an
+ * override.
+ */
+export function resolveSidebar(
+  themeId: string,
+  overrides: { side?: string; blocks?: string } = {},
+): { side: SidebarSide; blocks: SidebarBlock[] } {
+  const preset = resolveTheme(themeId).sidebar;
+  const side = isSidebarSide(overrides.side ?? "")
+    ? (overrides.side as SidebarSide)
+    : preset?.side ?? "right";
+  const parsed = parseSidebarBlocks(overrides.blocks ?? "");
+  const blocks = parsed.length ? parsed : preset?.blocks ?? [...SIDEBAR_BLOCKS];
+  return { side, blocks };
+}
diff --git a/src/lib/themes/registry.ts b/src/lib/themes/registry.ts
index f675477..26f6f92 100644
--- a/src/lib/themes/registry.ts
+++ b/src/lib/themes/registry.ts
@@ -1,6 +1,7 @@
 import type { Theme } from "./types";
 import { DEFAULT_THEME } from "./default";
 import { EDITORIAL_THEME } from "./editorial";
+import { CLASSIC_THEME } from "./classic";
 
 /**
  * Registry of built-in themes (#250). Adding a theme is one entry here plus one
@@ -15,6 +16,7 @@ import { EDITORIAL_THEME } from "./editorial";
 export const THEMES: Record<string, Theme> = {
   [DEFAULT_THEME.id]: DEFAULT_THEME,
   [EDITORIAL_THEME.id]: EDITORIAL_THEME,
+  [CLASSIC_THEME.id]: CLASSIC_THEME,
 };
 
 export const THEME_IDS = Object.keys(THEMES);
diff --git a/src/lib/themes/types.ts b/src/lib/themes/types.ts
index 63946da..af1808e 100644
--- a/src/lib/themes/types.ts
+++ b/src/lib/themes/types.ts
@@ -4,13 +4,24 @@
  * `var(--font-*)` (see globals.css), so overriding these at `:root:root`
  * re-themes the whole site. Layout/region theming builds on top of this later.
  */
+import type { SidebarSide, SidebarBlock } from "@/lib/sidebar";
 
-/** Colour tokens, keyed by their `--color-<token>` custom-property suffix. */
+/**
+ * Colour tokens, keyed by their `--color-<token>` custom-property suffix.
+ *
+ * `content-*` is the text ramp (see `content.ts`): the tokens body copy resolves
+ * to, so a theme can move text colour and not only its ground. Components are
+ * being migrated onto them from hard-coded Tailwind neutrals — the prerequisite
+ * for a light theme, since `@theme` extends the palette and leaves `gray-*`
+ * fixed while `surface-*` moves.
+ */
 export type ColorToken =
   | "surface-950" | "surface-900" | "surface-800" | "surface-700" | "surface-600"
   | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400"
   | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900"
-  | "moss-400" | "moss-500" | "moss-600";
+  | "moss-400" | "moss-500" | "moss-600"
+  | "content" | "content-strong" | "content-muted" | "content-subtle"
+  | "content-faint" | "content-dim" | "content-ghost";
 
 export type ThemeColors = Record<ColorToken, string>;
 
@@ -77,4 +88,10 @@ export interface Theme {
   tokens: ThemeTokens;
   /** The variant this theme picks for each region (its layout preset). */
   layout: LayoutConfig;
+  /**
+   * A theme that uses the `sidebar` shell can preset the sidebar's side + block
+   * order/visibility (#307). Owner settings still override; omitted → the global
+   * defaults (right, all blocks). Only meaningful when `layout.shell === "sidebar"`.
+   */
+  sidebar?: { side?: SidebarSide; blocks?: SidebarBlock[] };
 }