modified blog posts

.env.example

@@ -18,3 +18,10 @@ FRONTEND_ORIGIN=
 # Frontend Configuration
 # URL of the backend API accessible from the frontend container.
 PUBLIC_API_URL=http://backend:3000
+
+# Presentation focus. Same skin either way (fonts, cybersigil/breakcore,
+# paper grain, CyberFx). `atelier` = image-first gallery (justified plates,
+# "plates" count). `blog` = writing-first (stacked rows, excerpt, reading
+# time). Read server-side at render — no rebuild needed to switch.
+# Anything other than `blog` falls back to atelier.
+SITE_MODE=atelier

.github/workflows/ci.yml

@@ -0,0 +1,51 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  frontend:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+      - run: npm ci
+      - name: Type-check
+        run: npm run check
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm test
+      - name: Build
+        run: npm run build
+
+  backend:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: backend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
+        with:
+          components: rustfmt, clippy
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: backend
+      - name: Format
+        run: cargo fmt --check
+      - name: Clippy
+        # Warnings are surfaced but not yet gating — ratchet to `-D warnings`
+        # once the existing ~10 style lints are cleared.
+        run: cargo clippy --all-targets
+      - name: Test
+        run: cargo test

backend/Cargo.lock

@@ -2,6 +2,12 @@
 # It is not intended for manual editing.
 version = 4
 
+[[package]]
+name = "adler2"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
+
 [[package]]
 name = "aho-corasick"
 version = "1.1.4"
@@ -11,6 +17,21 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "alloc-no-stdlib"
+version = "2.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc7bb162ec39d46ab1ca8c77bf72e890535becd1751bb45f64c597edb4c8c6b3"
+
+[[package]]
+name = "alloc-stdlib"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "94fb8275041c72129eb51b7d0322c29b8387a0386127718b096429201a5d6ece"
+dependencies = [
+ "alloc-no-stdlib",
+]
+
 [[package]]
 name = "android_system_properties"
 version = "0.1.5"
@@ -20,6 +41,18 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "async-compression"
+version = "0.4.41"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d0f9ee0f6e02ffd7ad5816e9464499fba7b3effd01123b515c41d1697c43dad1"
+dependencies = [
+ "compression-codecs",
+ "compression-core",
+ "pin-project-lite",
+ "tokio",
+]
+
 [[package]]
 name = "atomic-waker"
 version = "1.1.2"
@@ -104,6 +137,7 @@ dependencies = [
  "axum",
  "chrono",
  "dotenvy",
+ "imagesize",
  "infer",
  "serde",
  "serde_json",
@@ -122,6 +156,27 @@ version = "2.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "843867be96c8daad0d758b57df9392b6d8d271134fce549de6ce169ff98a92af"
 
+[[package]]
+name = "brotli"
+version = "8.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4bd8b9603c7aa97359dbd97ecf258968c95f3adddd6db2f7e7a5bef101c84560"
+dependencies = [
+ "alloc-no-stdlib",
+ "alloc-stdlib",
+ "brotli-decompressor",
+]
+
+[[package]]
+name = "brotli-decompressor"
+version = "5.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "874bb8112abecc98cbd6d81ea4fa7e94fb9449648c93cc89aa40c81c24d7de03"
+dependencies = [
+ "alloc-no-stdlib",
+ "alloc-stdlib",
+]
+
 [[package]]
 name = "bumpalo"
 version = "3.20.2"
@@ -181,12 +236,39 @@ dependencies = [
  "windows-link",
 ]
 
+[[package]]
+name = "compression-codecs"
+version = "0.4.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eb7b51a7d9c967fc26773061ba86150f19c50c0d65c887cb1fbe295fd16619b7"
+dependencies = [
+ "brotli",
+ "compression-core",
+ "flate2",
+ "memchr",
+]
+
+[[package]]
+name = "compression-core"
+version = "0.4.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75984efb6ed102a0d42db99afb6c1948f0380d1d91808d5529916e6c08b49d8d"
+
 [[package]]
 name = "core-foundation-sys"
 version = "0.8.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
 
+[[package]]
+name = "crc32fast"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9481c1c90cbf2ac953f07c8d4a58aa3945c425b7185c9154d67a65e4230da511"
+dependencies = [
+ "cfg-if",
+]
+
 [[package]]
 name = "deunicode"
 version = "1.6.2"
@@ -230,6 +312,16 @@ version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
 
+[[package]]
+name = "flate2"
+version = "1.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "843fba2746e448b37e26a819579957415c8cef339bf08564fe8b7ddbd959573c"
+dependencies = [
+ "crc32fast",
+ "miniz_oxide",
+]
+
 [[package]]
 name = "fnv"
 version = "1.0.7"
@@ -401,6 +493,12 @@ dependencies = [
  "cc",
 ]
 
+[[package]]
+name = "imagesize"
+version = "0.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09e54e57b4c48b40f7aec75635392b12b3421fa26fe8b4332e63138ed278459c"
+
 [[package]]
 name = "indexmap"
 version = "2.14.0"
@@ -500,6 +598,16 @@ dependencies = [
  "unicase",
 ]
 
+[[package]]
+name = "miniz_oxide"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
+dependencies = [
+ "adler2",
+ "simd-adler32",
+]
+
 [[package]]
 name = "mio"
 version = "1.1.1"
@@ -759,6 +867,12 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "simd-adler32"
+version = "0.3.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "703d5c7ef118737c72f1af64ad2f6f8c5e1921f818cdcb97b8fe6fc69bf66214"
+
 [[package]]
 name = "slab"
 version = "0.4.12"
@@ -892,6 +1006,7 @@ version = "0.6.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d4e6559d53cc268e5031cd8429d05415bc4cb4aefc4aa5d6cc35fbf5b924a1f8"
 dependencies = [
+ "async-compression",
  "bitflags",
  "bytes",
  "futures-core",

backend/Cargo.toml

@@ -8,12 +8,13 @@ axum = { version = "0.8.8", features = ["multipart", "macros"] }
 chrono = { version = "0.4.44", features = ["serde"] }
 dotenvy = "0.15.7"
 infer = "0.19.0"
+imagesize = "0.14"
 serde = { version = "1.0.228", features = ["derive"] }
 serde_json = "1.0.149"
 serde_yaml = "0.9.34"
 slug = "0.1.6"
 subtle = "2.6.1"
 tokio = { version = "1.50.0", features = ["full"] }
-tower-http = { version = "0.6.8", features = ["cors", "fs"] }
+tower-http = { version = "0.6.8", features = ["cors", "fs", "compression-br", "compression-gzip"] }
 tracing = "0.1.44"
 tracing-subscriber = { version = "0.3.23", features = ["env-filter"] }

backend/rustfmt.toml

@@ -0,0 +1,2 @@
+edition = "2024"
+max_width = 100

backend/src/error.rs

@@ -7,6 +7,7 @@ use tracing::error;
 
 use crate::models::ErrorResponse;
 
+#[derive(Debug)]
 pub enum AppError {
     Unauthorized,
     NotFound(String),
@@ -29,7 +30,10 @@ impl IntoResponse for AppError {
                 } else {
                     error!("Internal error: {}", msg);
                 }
-                (StatusCode::INTERNAL_SERVER_ERROR, "Internal error".to_string())
+                (
+                    StatusCode::INTERNAL_SERVER_ERROR,
+                    "Internal error".to_string(),
+                )
             }
         };
 

backend/src/handlers/config.rs

@@ -1,5 +1,6 @@
 use axum::{Json, extract::State, http::HeaderMap, response::IntoResponse};
-use std::{fs, sync::Arc};
+use std::sync::Arc;
+use tokio::fs;
 use tracing::error;
 
 use crate::{
@@ -12,6 +13,7 @@ use crate::{
 pub async fn get_config(State(state): State<Arc<AppState>>) -> impl IntoResponse {
     let config_path = state.data_dir.join("config.json");
     let config = fs::read_to_string(&config_path)
+        .await
         .ok()
         .and_then(|c| serde_json::from_str::<SiteConfig>(&c).ok())
         .unwrap_or_default();
@@ -28,27 +30,48 @@ pub async fn update_config(
 
     let config_path = state.data_dir.join("config.json");
     let mut config: SiteConfig = fs::read_to_string(&config_path)
+        .await
         .ok()
         .and_then(|c| serde_json::from_str(&c).ok())
         .unwrap_or_default();
 
-    if let Some(v) = patch.title { config.title = v; }
-    if let Some(v) = patch.subtitle { config.subtitle = v; }
-    if let Some(v) = patch.welcome_title { config.welcome_title = v; }
-    if let Some(v) = patch.welcome_subtitle { config.welcome_subtitle = v; }
-    if let Some(v) = patch.footer { config.footer = v; }
-    if let Some(v) = patch.favicon { config.favicon = v; }
-    if let Some(v) = patch.theme { config.theme = v; }
-    if let Some(v) = patch.custom_css { config.custom_css = v; }
-    if let Some(v) = patch.contact_intro { config.contact_intro = v; }
-    if let Some(v) = patch.contact_links { config.contact_links = v; }
+    if let Some(v) = patch.title {
+        config.title = v;
+    }
+    if let Some(v) = patch.subtitle {
+        config.subtitle = v;
+    }
+    if let Some(v) = patch.welcome_title {
+        config.welcome_title = v;
+    }
+    if let Some(v) = patch.welcome_subtitle {
+        config.welcome_subtitle = v;
+    }
+    if let Some(v) = patch.footer {
+        config.footer = v;
+    }
+    if let Some(v) = patch.favicon {
+        config.favicon = v;
+    }
+    if let Some(v) = patch.theme {
+        config.theme = v;
+    }
+    if let Some(v) = patch.custom_css {
+        config.custom_css = v;
+    }
+    if let Some(v) = patch.contact_intro {
+        config.contact_intro = v;
+    }
+    if let Some(v) = patch.contact_links {
+        config.contact_links = v;
+    }
 
     let config_str = serde_json::to_string_pretty(&config).map_err(|e| {
         error!("Serialization error: {}", e);
         AppError::Internal("Serialization error".to_string(), Some(e.to_string()))
     })?;
 
-    fs::write(&config_path, config_str).map_err(|e| {
+    fs::write(&config_path, config_str).await.map_err(|e| {
         error!("Write error for config: {}", e);
         AppError::Internal("Write error".to_string(), Some(e.to_string()))
     })?;

backend/src/handlers/contact.rs

@@ -7,10 +7,10 @@ use axum::{
 use chrono::Utc;
 use std::{
     collections::hash_map::DefaultHasher,
-    fs,
     hash::{Hash, Hasher},
     sync::Arc,
 };
+use tokio::fs;
 use tracing::{error, info, warn};
 
 use crate::{
@@ -22,7 +22,7 @@ use crate::{
 
 const MIN_FILL_TIME_MS: i64 = 3_000;
 const MAX_FORM_AGE_MS: i64 = 24 * 60 * 60 * 1000;
-const RATE_LIMIT_WINDOW_MS: i64 = 60 * 60 * 1000;
+pub const RATE_LIMIT_WINDOW_MS: i64 = 60 * 60 * 1000;
 const RATE_LIMIT_MAX: usize = 5;
 const MAX_NAME: usize = 200;
 const MAX_EMAIL: usize = 200;
@@ -123,7 +123,10 @@ pub async fn submit_contact(
     if name.as_ref().is_some_and(|s| s.chars().count() > MAX_NAME) {
         return Err(AppError::BadRequest("Name is too long.".into()));
     }
-    if email.as_ref().is_some_and(|s| s.chars().count() > MAX_EMAIL) {
+    if email
+        .as_ref()
+        .is_some_and(|s| s.chars().count() > MAX_EMAIL)
+    {
         return Err(AppError::BadRequest("Email is too long.".into()));
     }
     if subject
@@ -155,15 +158,14 @@ pub async fn submit_contact(
     };
 
     let messages_dir = state.data_dir.join("messages");
-    fs::create_dir_all(&messages_dir).map_err(|e| {
+    fs::create_dir_all(&messages_dir).await.map_err(|e| {
         error!("Failed to create messages dir: {}", e);
         AppError::Internal("Storage error".into(), Some(e.to_string()))
     })?;
     let path = messages_dir.join(format!("{}.json", id));
-    let json = serde_json::to_string_pretty(&msg).map_err(|e| {
-        AppError::Internal("Serialization error".into(), Some(e.to_string()))
-    })?;
-    fs::write(&path, json).map_err(|e| {
+    let json = serde_json::to_string_pretty(&msg)
+        .map_err(|e| AppError::Internal("Serialization error".into(), Some(e.to_string())))?;
+    fs::write(&path, json).await.map_err(|e| {
         error!("Failed to write message {}: {}", id, e);
         AppError::Internal("Storage error".into(), Some(e.to_string()))
     })?;
@@ -181,35 +183,43 @@ pub async fn list_messages(
     }
 
     let messages_dir = state.data_dir.join("messages");
-    if !messages_dir.exists() {
+    if !fs::try_exists(&messages_dir).await.unwrap_or(false) {
         return Json(Vec::<Message>::new()).into_response();
     }
 
-    let entries = match fs::read_dir(&messages_dir) {
+    let mut rd = match fs::read_dir(&messages_dir).await {
         Ok(e) => e,
         Err(e) => {
             error!("Failed to read messages dir: {}", e);
-            return AppError::Internal("Read error".into(), Some(e.to_string()))
-                .into_response();
+            return AppError::Internal("Read error".into(), Some(e.to_string())).into_response();
         }
     };
 
     let mut messages: Vec<Message> = Vec::new();
-    for entry in entries.flatten() {
-        let path = entry.path();
-        if path.extension().and_then(|e| e.to_str()) != Some("json") {
-            continue;
-        }
-        let content = match fs::read_to_string(&path) {
-            Ok(c) => c,
-            Err(e) => {
-                error!("Failed to read {:?}: {}", path, e);
-                continue;
+    loop {
+        match rd.next_entry().await {
+            Ok(Some(entry)) => {
+                let path = entry.path();
+                if path.extension().and_then(|e| e.to_str()) != Some("json") {
+                    continue;
+                }
+                let content = match fs::read_to_string(&path).await {
+                    Ok(c) => c,
+                    Err(e) => {
+                        error!("Failed to read {:?}: {}", path, e);
+                        continue;
+                    }
+                };
+                match serde_json::from_str::<Message>(&content) {
+                    Ok(m) => messages.push(m),
+                    Err(e) => error!("Malformed message {:?}: {}", path, e),
+                }
+            }
+            Ok(None) => break,
+            Err(e) => {
+                error!("Error iterating messages dir: {}", e);
+                break;
             }
-        };
-        match serde_json::from_str::<Message>(&content) {
-            Ok(m) => messages.push(m),
-            Err(e) => error!("Malformed message {:?}: {}", path, e),
         }
     }
     messages.sort_by(|a, b| b.received_at.cmp(&a.received_at));
@@ -227,11 +237,11 @@ pub async fn delete_message(
         return Err(AppError::BadRequest("Invalid id.".into()));
     }
     let path = state.data_dir.join("messages").join(format!("{}.json", id));
-    if !path.exists() {
+    if !fs::try_exists(&path).await.unwrap_or(false) {
         return Err(AppError::NotFound("Message not found.".into()));
     }
-    fs::remove_file(&path).map_err(|e| {
-        AppError::Internal("Delete failed".into(), Some(e.to_string()))
-    })?;
+    fs::remove_file(&path)
+        .await
+        .map_err(|e| AppError::Internal("Delete failed".into(), Some(e.to_string())))?;
     Ok(Json(ContactResponse { ok: true }))
 }

backend/src/handlers/posts.rs

@@ -1,203 +1,43 @@
+//! HTTP handlers for posts. Orchestration only — parsing, image handling,
+//! and the cache live in [`crate::post`].
+
 use axum::{
     Json,
     extract::{Path, State},
     http::{HeaderMap, StatusCode},
 };
 use chrono::Utc;
-use std::{fs, sync::Arc};
+use std::sync::Arc;
+use tokio::fs;
 use tracing::{error, info, warn};
 
+use crate::post::cache::{neighbors_from_cache, rebuild_posts_cache};
+use crate::post::images::{cover_from, dims_for_urls, extract_images};
+use crate::post::parse::{reading_time, serialize_post, validate_slug};
 use crate::{
     AppState,
     auth::is_authed,
     error::AppError,
-    models::{CoverImage, CreatePostRequest, PostDetail, PostInfo, PostMeta},
+    models::{CreatePostRequest, PostDetail, PostInfo, PostMeta},
 };
 
-const WORDS_PER_MINUTE: u32 = 200;
-
-const MAX_SLUG_LEN: usize = 100;
-const WINDOWS_RESERVED: &[&str] = &[
-    "CON", "PRN", "AUX", "NUL",
-    "COM1", "COM2", "COM3", "COM4", "COM5", "COM6", "COM7", "COM8", "COM9",
-    "LPT1", "LPT2", "LPT3", "LPT4", "LPT5", "LPT6", "LPT7", "LPT8", "LPT9",
-];
-
-fn validate_slug(s: &str) -> Result<(), AppError> {
-    if s.is_empty() {
-        return Err(AppError::BadRequest("Slug is empty".to_string()));
-    }
-    if s.len() > MAX_SLUG_LEN {
-        return Err(AppError::BadRequest(format!(
-            "Slug exceeds {} characters",
-            MAX_SLUG_LEN
-        )));
-    }
-    if s.starts_with('.') {
-        return Err(AppError::BadRequest(
-            "Slug cannot start with '.'".to_string(),
-        ));
-    }
-    if s.ends_with('.') || s.ends_with(' ') {
-        return Err(AppError::BadRequest(
-            "Slug cannot end with '.' or space".to_string(),
-        ));
-    }
-    if s.contains("..") {
-        return Err(AppError::BadRequest(
-            "Slug cannot contain '..'".to_string(),
-        ));
-    }
-    for c in s.chars() {
-        if c.is_control() {
-            return Err(AppError::BadRequest(
-                "Slug contains control characters".to_string(),
-            ));
-        }
-        if matches!(c, '/' | '\\' | '<' | '>' | ':' | '"' | '|' | '?' | '*') {
-            return Err(AppError::BadRequest(format!(
-                "Slug contains invalid character '{}'",
-                c
-            )));
-        }
-    }
-    let stem = s.split('.').next().unwrap_or("").to_ascii_uppercase();
-    if WINDOWS_RESERVED.iter().any(|r| *r == stem) {
-        return Err(AppError::BadRequest(
-            "Slug is a reserved name".to_string(),
-        ));
-    }
-    Ok(())
-}
-
-fn split_frontmatter(raw: &str) -> Option<(&str, &str)> {
-    let raw = raw.strip_prefix("---\n").or_else(|| raw.strip_prefix("---\r\n"))?;
-    let end_marker = raw.find("\n---\n").or_else(|| raw.find("\r\n---\r\n"))?;
-    let yaml = &raw[..end_marker];
-    let body_start = end_marker
-        + raw[end_marker..]
-            .find("---\n")
-            .or_else(|| raw[end_marker..].find("---\r\n"))?
-        + "---\n".len();
-    let body = raw[body_start..].trim_start_matches('\n').trim_start_matches('\r');
-    Some((yaml, body))
-}
-
-fn parse_post(raw: &str) -> Result<(PostMeta, String), AppError> {
-    let (yaml, body) = split_frontmatter(raw).ok_or_else(|| {
-        AppError::Internal(
-            "Missing frontmatter".to_string(),
-            Some("post is missing the YAML --- block".to_string()),
-        )
-    })?;
-    let meta: PostMeta = serde_yaml::from_str(yaml).map_err(|e| {
-        AppError::Internal(
-            "Invalid frontmatter".to_string(),
-            Some(format!("YAML parse error: {}", e)),
-        )
-    })?;
-    Ok((meta, body.to_string()))
-}
-
-fn serialize_post(meta: &PostMeta, body: &str) -> Result<String, AppError> {
-    let yaml = serde_yaml::to_string(meta).map_err(|e| {
-        AppError::Internal(
-            "Serialization error".to_string(),
-            Some(e.to_string()),
-        )
-    })?;
-    Ok(format!("---\n{}---\n{}", yaml, body))
-}
-
-fn reading_time(body: &str) -> u32 {
-    let words = body.split_whitespace().count() as u32;
-    (words + WORDS_PER_MINUTE - 1) / WORDS_PER_MINUTE.max(1)
-}
-
-/// Scan markdown for `![alt](url)` images. Returns (alt, url) pairs in order.
-/// Skips inside fenced code blocks. Tolerates titles like `![alt](url "title")`.
-fn extract_images(body: &str) -> Vec<(String, String)> {
-    let mut out = Vec::new();
-    let mut in_fence = false;
-    for line in body.lines() {
-        let trimmed = line.trim_start();
-        if trimmed.starts_with("```") || trimmed.starts_with("~~~") {
-            in_fence = !in_fence;
-            continue;
-        }
-        if in_fence {
-            continue;
-        }
-        let bytes = line.as_bytes();
-        let mut i = 0;
-        while i + 1 < bytes.len() {
-            if bytes[i] == b'!' && bytes[i + 1] == b'[' {
-                if let Some(rel_close) = line[i + 2..].find(']') {
-                    let close = i + 2 + rel_close;
-                    if close + 1 < line.len() && bytes[close + 1] == b'(' {
-                        if let Some(rel_paren) = line[close + 2..].find(')') {
-                            let paren_end = close + 2 + rel_paren;
-                            let alt = line[i + 2..close].to_string();
-                            let url_field = line[close + 2..paren_end].trim();
-                            let url = url_field
-                                .split_once(|c: char| c.is_whitespace())
-                                .map(|(u, _)| u)
-                                .unwrap_or(url_field)
-                                .trim_matches(|c| c == '<' || c == '>')
-                                .to_string();
-                            if !url.is_empty() {
-                                out.push((alt, url));
-                            }
-                            i = paren_end + 1;
-                            continue;
-                        }
-                    }
-                }
-            }
-            i += 1;
-        }
-    }
-    out
-}
-
-fn cover_from(images: &[(String, String)]) -> Option<CoverImage> {
-    images.first().map(|(alt, url)| CoverImage {
-        url: url.clone(),
-        alt: alt.clone(),
-    })
-}
-
-fn excerpt_from(meta: &PostMeta, body: &str) -> String {
-    if let Some(s) = meta.summary.as_ref() {
-        if !s.trim().is_empty() {
-            return s.trim().to_string();
-        }
-    }
-    let plain = body
-        .replace(['#', '*', '_', '`'], "")
-        .replace('\n', " ");
-    let mut out: String = plain.chars().take(200).collect();
-    if plain.chars().count() > 200 {
-        out.push_str("...");
-    }
-    out.trim().to_string()
-}
-
-async fn write_post_atomic(
-    state: &AppState,
-    slug: &str,
-    contents: &str,
-) -> Result<(), AppError> {
+async fn write_post_atomic(state: &AppState, slug: &str, contents: &str) -> Result<(), AppError> {
     let _guard = state.post_lock.lock().await;
     let final_path = state.data_dir.join("posts").join(format!("{}.md", slug));
-    let tmp_path = state.data_dir.join("posts").join(format!(".{}.md.tmp", slug));
-    fs::write(&tmp_path, contents).map_err(|e| {
-        AppError::Internal("Write error".to_string(), Some(e.to_string()))
-    })?;
-    fs::rename(&tmp_path, &final_path).map_err(|e| {
-        let _ = fs::remove_file(&tmp_path);
-        AppError::Internal("Rename error".to_string(), Some(e.to_string()))
-    })?;
+    let tmp_path = state
+        .data_dir
+        .join("posts")
+        .join(format!(".{}.md.tmp", slug));
+    fs::write(&tmp_path, contents)
+        .await
+        .map_err(|e| AppError::Internal("Write error".to_string(), Some(e.to_string())))?;
+    if let Err(e) = fs::rename(&tmp_path, &final_path).await {
+        let _ = fs::remove_file(&tmp_path).await;
+        return Err(AppError::Internal(
+            "Rename error".to_string(),
+            Some(e.to_string()),
+        ));
+    }
     Ok(())
 }
 
@@ -227,14 +67,14 @@ pub async fn create_post(
     if let Some(ref old_slug) = payload.old_slug {
         if old_slug != &slug {
             let old_path = posts_dir.join(format!("{}.md", old_slug));
-            if old_path.exists() {
-                if file_path.exists() {
+            if fs::try_exists(&old_path).await.unwrap_or(false) {
+                if fs::try_exists(&file_path).await.unwrap_or(false) {
                     return Err(AppError::BadRequest(
                         "A post with this new title already exists".to_string(),
                     ));
                 }
                 let _guard = state.post_lock.lock().await;
-                fs::rename(&old_path, &file_path).map_err(|e| {
+                fs::rename(&old_path, &file_path).await.map_err(|e| {
                     error!("Rename error from {} to {}: {}", old_slug, slug, e);
                     AppError::Internal("Rename error".to_string(), Some(e.to_string()))
                 })?;
@@ -247,13 +87,17 @@ pub async fn create_post(
     let images = extract_images(&payload.content);
     if images.is_empty() {
         return Err(AppError::BadRequest(
-            "A gallery entry must include at least one image (![](url) in the markdown body).".to_string(),
+            "A gallery entry must include at least one image (![](url) in the markdown body)."
+                .to_string(),
         ));
     }
 
     let meta = PostMeta {
         date: payload.date.unwrap_or_else(|| Utc::now().date_naive()),
-        title: payload.title.map(|t| t.trim().to_string()).filter(|t| !t.is_empty()),
+        title: payload
+            .title
+            .map(|t| t.trim().to_string())
+            .filter(|t| !t.is_empty()),
         summary: payload.summary.filter(|s| !s.trim().is_empty()),
         tags: payload.tags,
         draft: payload.draft,
@@ -263,7 +107,20 @@ pub async fn create_post(
 
     info!("Post saved: {}", slug);
     let image_count = images.len() as u32;
-    let cover = cover_from(&images);
+    let mut cover = cover_from(&images);
+
+    rebuild_posts_cache(&state).await;
+    let (prev, next) = neighbors_from_cache(&state, &slug, true).await;
+
+    let image_urls: Vec<String> = images.iter().map(|(_, u)| u.clone()).collect();
+    let dimensions = dims_for_urls(&state, &image_urls).await;
+    if let Some(c) = cover.as_mut() {
+        if let Some(d) = dimensions.get(&c.url) {
+            c.w = Some(d.w);
+            c.h = Some(d.h);
+        }
+    }
+
     Ok(Json(PostDetail {
         slug,
         date: meta.date,
@@ -275,6 +132,9 @@ pub async fn create_post(
         content: payload.content,
         cover_image: cover,
         image_count,
+        prev,
+        next,
+        dimensions,
     }))
 }
 
@@ -291,17 +151,19 @@ pub async fn delete_post(
     let _guard = state.post_lock.lock().await;
     let file_path = state.data_dir.join("posts").join(format!("{}.md", slug));
 
-    if !file_path.exists() {
+    if !fs::try_exists(&file_path).await.unwrap_or(false) {
         warn!("Post not found for deletion: {}", slug);
         return Err(AppError::NotFound("Post not found".to_string()));
     }
 
-    fs::remove_file(file_path).map_err(|e| {
+    fs::remove_file(file_path).await.map_err(|e| {
         error!("Delete error for post {}: {}", slug, e);
         AppError::Internal("Delete error".to_string(), Some(e.to_string()))
     })?;
+    drop(_guard);
 
     info!("Post deleted: {}", slug);
+    rebuild_posts_cache(&state).await;
     Ok(StatusCode::NO_CONTENT)
 }
 
@@ -310,48 +172,12 @@ pub async fn list_posts(
     headers: HeaderMap,
 ) -> Json<Vec<PostInfo>> {
     let admin = is_authed(&headers, &state.admin_token);
-    let posts_dir = state.data_dir.join("posts");
-    let mut posts: Vec<PostInfo> = Vec::new();
-
-    if let Ok(entries) = fs::read_dir(posts_dir) {
-        for entry in entries.flatten() {
-            let path = entry.path();
-            if path.extension().and_then(|e| e.to_str()) != Some("md") {
-                continue;
-            }
-            let Some(slug) = path.file_stem().and_then(|s| s.to_str()) else {
-                continue;
-            };
-            if slug.starts_with('.') {
-                continue;
-            }
-            let Ok(raw) = fs::read_to_string(&path) else {
-                continue;
-            };
-            let Ok((meta, body)) = parse_post(&raw) else {
-                warn!("Skipping post with bad frontmatter: {}", slug);
-                continue;
-            };
-            if meta.draft && !admin {
-                continue;
-            }
-            let images = extract_images(&body);
-            posts.push(PostInfo {
-                slug: slug.to_string(),
-                date: meta.date,
-                title: meta.title.clone(),
-                summary: meta.summary.clone(),
-                tags: meta.tags.clone(),
-                draft: meta.draft,
-                reading_time: reading_time(&body),
-                excerpt: excerpt_from(&meta, &body),
-                cover_image: cover_from(&images),
-                image_count: images.len() as u32,
-            });
-        }
-    }
-
-    posts.sort_by(|a, b| b.date.cmp(&a.date).then_with(|| a.slug.cmp(&b.slug)));
+    let cache = state.posts_cache.read().await;
+    let posts: Vec<PostInfo> = cache
+        .iter()
+        .filter(|p| admin || !p.info.draft)
+        .map(|p| p.info.clone())
+        .collect();
     Json(posts)
 }
 
@@ -362,27 +188,36 @@ pub async fn get_post(
 ) -> Result<Json<PostDetail>, AppError> {
     validate_slug(&slug)?;
     let admin = is_authed(&headers, &state.admin_token);
-    let file_path = state.data_dir.join("posts").join(format!("{}.md", slug));
 
-    let raw = fs::read_to_string(&file_path)
-        .map_err(|_| AppError::NotFound("Post not found".to_string()))?;
-    let (meta, body) = parse_post(&raw)?;
+    let (info, body) = {
+        let cache = state.posts_cache.read().await;
+        let Some(p) = cache.iter().find(|p| p.info.slug == slug) else {
+            return Err(AppError::NotFound("Post not found".to_string()));
+        };
+        if p.info.draft && !admin {
+            return Err(AppError::NotFound("Post not found".to_string()));
+        }
+        (p.info.clone(), p.body.clone())
+    };
 
-    if meta.draft && !admin {
-        return Err(AppError::NotFound("Post not found".to_string()));
-    }
+    let (prev, next) = neighbors_from_cache(&state, &slug, admin).await;
+
+    let image_urls: Vec<String> = extract_images(&body).into_iter().map(|(_, u)| u).collect();
+    let dimensions = dims_for_urls(&state, &image_urls).await;
 
-    let images = extract_images(&body);
     Ok(Json(PostDetail {
-        slug,
-        date: meta.date,
-        title: meta.title,
-        summary: meta.summary,
-        tags: meta.tags,
-        draft: meta.draft,
-        reading_time: reading_time(&body),
+        slug: info.slug,
+        date: info.date,
+        title: info.title,
+        summary: info.summary,
+        tags: info.tags,
+        draft: info.draft,
+        reading_time: info.reading_time,
         content: body,
-        cover_image: cover_from(&images),
-        image_count: images.len() as u32,
+        cover_image: info.cover_image,
+        image_count: info.image_count,
+        prev,
+        next,
+        dimensions,
     }))
 }

backend/src/handlers/upload.rs

@@ -4,7 +4,8 @@ use axum::{
     http::{HeaderMap, StatusCode},
 };
 use serde::Deserialize;
-use std::{fs, sync::Arc};
+use std::sync::Arc;
+use tokio::fs;
 use tracing::{error, info, warn};
 
 use crate::{
@@ -22,10 +23,8 @@ pub struct UploadQuery {
 /// Allowed upload extensions. SVG, HTML, JS, executables intentionally absent —
 /// /uploads/* is served as-is, so any active content there is XSS waiting to happen.
 const ALLOWED_EXTS: &[&str] = &[
-    "jpg", "jpeg", "png", "webp", "gif", "avif",
-    "pdf", "txt", "md",
-    "mp3", "wav", "ogg",
-    "mp4", "webm", "mov",
+    "jpg", "jpeg", "png", "webp", "gif", "avif", "pdf", "txt", "md", "mp3", "wav", "ogg", "mp4",
+    "webm", "mov",
 ];
 
 fn validate_filename(name: &str) -> Result<(), AppError> {
@@ -76,18 +75,23 @@ pub async fn delete_upload(
     let uploads_dir = state.data_dir.join("uploads");
     let file_path = uploads_dir.join(&filename);
 
-    let canonical_dir = uploads_dir.canonicalize().map_err(|e| {
-        AppError::Internal("Path resolution".to_string(), Some(e.to_string()))
-    })?;
-    if let Ok(canonical_file) = file_path.canonicalize() {
+    let canonical_dir = fs::canonicalize(&uploads_dir)
+        .await
+        .map_err(|e| AppError::Internal("Path resolution".to_string(), Some(e.to_string())))?;
+    if let Ok(canonical_file) = fs::canonicalize(&file_path).await {
         if !canonical_file.starts_with(&canonical_dir) {
             warn!("Refused delete outside uploads dir: {}", filename);
             return Err(AppError::BadRequest("Invalid filename".to_string()));
         }
-        fs::remove_file(canonical_file).map_err(|e| {
+        fs::remove_file(canonical_file).await.map_err(|e| {
             error!("Delete error for file {}: {}", filename, e);
             AppError::Internal("Delete error".to_string(), Some(e.to_string()))
         })?;
+        state
+            .image_dims_cache
+            .write()
+            .await
+            .remove(&format!("/uploads/{}", filename));
         info!("Deleted file: {}", filename);
         Ok(StatusCode::NO_CONTENT)
     } else {
@@ -104,15 +108,30 @@ pub async fn list_uploads(
     let uploads_dir = state.data_dir.join("uploads");
     let mut files = Vec::new();
 
-    if let Ok(entries) = fs::read_dir(uploads_dir) {
-        for entry in entries.flatten() {
-            let path = entry.path();
-            if path.is_file() {
-                if let Some(name) = path.file_name().and_then(|n| n.to_str()) {
-                    files.push(FileInfo {
-                        name: name.to_string(),
-                        url: format!("/uploads/{}", name),
-                    });
+    if let Ok(mut rd) = fs::read_dir(&uploads_dir).await {
+        loop {
+            match rd.next_entry().await {
+                Ok(Some(entry)) => {
+                    let path = entry.path();
+                    let is_file = entry
+                        .file_type()
+                        .await
+                        .map(|t| t.is_file())
+                        .unwrap_or(false);
+                    if !is_file {
+                        continue;
+                    }
+                    if let Some(name) = path.file_name().and_then(|n| n.to_str()) {
+                        files.push(FileInfo {
+                            name: name.to_string(),
+                            url: format!("/uploads/{}", name),
+                        });
+                    }
+                }
+                Ok(None) => break,
+                Err(e) => {
+                    warn!("Error iterating uploads dir: {}", e);
+                    break;
                 }
             }
         }
@@ -178,7 +197,9 @@ pub async fn upload_file(
         let uploads_dir = state.data_dir.join("uploads");
         let target_path = uploads_dir.join(&final_name);
 
-        let final_path = if target_path.exists() && !query.replace.unwrap_or(false) {
+        let final_path = if fs::try_exists(&target_path).await.unwrap_or(false)
+            && !query.replace.unwrap_or(false)
+        {
             let timestamp = chrono::Utc::now().timestamp();
             uploads_dir.join(format!("{}_{}", timestamp, final_name))
         } else {
@@ -186,11 +207,11 @@ pub async fn upload_file(
         };
 
         // Final containment check.
-        let canonical_dir = uploads_dir.canonicalize().map_err(|e| {
-            AppError::Internal("Path resolution".to_string(), Some(e.to_string()))
-        })?;
+        let canonical_dir = fs::canonicalize(&uploads_dir)
+            .await
+            .map_err(|e| AppError::Internal("Path resolution".to_string(), Some(e.to_string())))?;
         if let Some(parent) = final_path.parent() {
-            let canonical_parent = parent.canonicalize().map_err(|e| {
+            let canonical_parent = fs::canonicalize(parent).await.map_err(|e| {
                 AppError::Internal("Path resolution".to_string(), Some(e.to_string()))
             })?;
             if canonical_parent != canonical_dir {
@@ -204,15 +225,17 @@ pub async fn upload_file(
             .unwrap_or(&final_name)
             .to_string();
 
-        fs::write(&final_path, &data).map_err(|e| {
+        fs::write(&final_path, &data).await.map_err(|e| {
             error!("Failed to write file to {:?}: {}", final_path, e);
             AppError::Internal("Write error".to_string(), Some(e.to_string()))
         })?;
 
+        let url = format!("/uploads/{}", final_name_str);
+        // Invalidate any stale dim cache entry (matters when replacing an existing file).
+        state.image_dims_cache.write().await.remove(&url);
+
         info!("File uploaded successfully to {:?}", final_path);
-        return Ok(Json(UploadResponse {
-            url: format!("/uploads/{}", final_name_str),
-        }));
+        return Ok(Json(UploadResponse { url }));
     }
 
     warn!("Upload failed: no file found in multipart stream");

backend/src/main.rs

@@ -2,6 +2,7 @@ pub mod auth;
 pub mod error;
 pub mod handlers;
 pub mod models;
+pub mod post;
 
 use axum::{
     Router,
@@ -9,19 +10,30 @@ use axum::{
     http::{HeaderValue, header},
     routing::{delete, get, post},
 };
-use std::{collections::HashMap, env, fs, path::PathBuf, sync::Arc};
-use tokio::sync::Mutex;
+use std::{collections::HashMap, env, path::PathBuf, sync::Arc, time::Duration};
+use tokio::sync::{Mutex, RwLock};
 use tower_http::{
+    compression::CompressionLayer,
     cors::{AllowOrigin, CorsLayer},
     services::ServeDir,
 };
 use tracing::{error, info, warn};
 
+use crate::handlers::contact::RATE_LIMIT_WINDOW_MS;
+use crate::models::{ImageDim, PostInfo};
+
+pub struct CachedPost {
+    pub info: PostInfo,
+    pub body: String,
+}
+
 pub struct AppState {
     pub admin_token: String,
     pub data_dir: PathBuf,
     pub cookie_secure: bool,
     pub post_lock: Mutex<()>,
+    pub posts_cache: RwLock<Vec<CachedPost>>,
+    pub image_dims_cache: RwLock<HashMap<String, ImageDim>>,
     pub contact_rate_limit: Mutex<HashMap<String, Vec<i64>>>,
 }
 
@@ -36,9 +48,7 @@ async fn main() {
         .filter(|t| !t.trim().is_empty())
         .expect("ADMIN_TOKEN must be set to a non-empty value");
     if admin_token.len() < 16 {
-        warn!(
-            "ADMIN_TOKEN is shorter than 16 characters. Use a long random string in production."
-        );
+        warn!("ADMIN_TOKEN is shorter than 16 characters. Use a long random string in production.");
     }
     let data_dir_str = env::var("DATA_DIR").unwrap_or_else(|_| "../data".to_string());
     let data_dir = PathBuf::from(data_dir_str);
@@ -50,10 +60,10 @@ async fn main() {
 
     let posts_dir = data_dir.join("posts");
     let uploads_dir = data_dir.join("uploads");
-    if let Err(e) = fs::create_dir_all(&posts_dir) {
+    if let Err(e) = tokio::fs::create_dir_all(&posts_dir).await {
         error!("Failed to create posts directory: {}", e);
     }
-    if let Err(e) = fs::create_dir_all(&uploads_dir) {
+    if let Err(e) = tokio::fs::create_dir_all(&uploads_dir).await {
         error!("Failed to create uploads directory: {}", e);
     }
 
@@ -62,17 +72,27 @@ async fn main() {
         data_dir,
         cookie_secure,
         post_lock: Mutex::new(()),
+        posts_cache: RwLock::new(Vec::new()),
+        image_dims_cache: RwLock::new(HashMap::new()),
         contact_rate_limit: Mutex::new(HashMap::new()),
     });
 
+    post::cache::rebuild_posts_cache(&state).await;
+    info!(
+        "Posts cache primed with {} entries",
+        state.posts_cache.read().await.len()
+    );
+
+    spawn_rate_limit_reaper(state.clone());
+
     // CORS — locked down by default. Set FRONTEND_ORIGIN to the public URL of
     // the frontend if you ever expose the backend directly to browsers.
     // Normal deployments hit the backend through the Astro proxy, which is
     // server-to-server and not subject to CORS.
     let cors = match env::var("FRONTEND_ORIGIN").ok().filter(|s| !s.is_empty()) {
         Some(origin) => {
-            let value = HeaderValue::from_str(&origin)
-                .expect("FRONTEND_ORIGIN must be a valid origin URL");
+            let value =
+                HeaderValue::from_str(&origin).expect("FRONTEND_ORIGIN must be a valid origin URL");
             CorsLayer::new()
                 .allow_origin(AllowOrigin::exact(value))
                 .allow_methods([
@@ -87,6 +107,10 @@ async fn main() {
         None => CorsLayer::new(),
     };
 
+    // JSON routes get a tight 1 MB cap; the upload route keeps 50 MB.
+    const JSON_BODY_LIMIT: usize = 1024 * 1024;
+    const UPLOAD_BODY_LIMIT: usize = 50 * 1024 * 1024;
+
     let app = Router::new()
         .route("/api/auth/login", post(handlers::auth::login))
         .route("/api/auth/logout", post(handlers::auth::logout))
@@ -108,7 +132,10 @@ async fn main() {
             "/api/uploads/{filename}",
             delete(handlers::upload::delete_upload),
         )
-        .route("/api/upload", post(handlers::upload::upload_file))
+        .route(
+            "/api/upload",
+            post(handlers::upload::upload_file).layer(DefaultBodyLimit::max(UPLOAD_BODY_LIMIT)),
+        )
         .route("/api/contact", post(handlers::contact::submit_contact))
         .route("/api/messages", get(handlers::contact::list_messages))
         .route(
@@ -117,7 +144,8 @@ async fn main() {
         )
         .route("/healthz", get(|| async { "ok" }))
         .nest_service("/uploads", ServeDir::new(uploads_dir))
-        .layer(DefaultBodyLimit::max(50 * 1024 * 1024))
+        .layer(DefaultBodyLimit::max(JSON_BODY_LIMIT))
+        .layer(CompressionLayer::new().br(true).gzip(true))
         .layer(cors)
         .with_state(state);
 
@@ -126,3 +154,21 @@ async fn main() {
     let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
     axum::serve(listener, app).await.unwrap();
 }
+
+/// Periodically prunes expired entries from the contact rate-limit map so it
+/// can't grow unbounded across the lifetime of the process.
+fn spawn_rate_limit_reaper(state: Arc<AppState>) {
+    tokio::spawn(async move {
+        let mut ticker = tokio::time::interval(Duration::from_secs(300));
+        ticker.tick().await;
+        loop {
+            ticker.tick().await;
+            let now_ms = chrono::Utc::now().timestamp_millis();
+            let mut map = state.contact_rate_limit.lock().await;
+            map.retain(|_, times| {
+                times.retain(|t| now_ms - *t < RATE_LIMIT_WINDOW_MS);
+                !times.is_empty()
+            });
+        }
+    });
+}

backend/src/models.rs

@@ -1,5 +1,6 @@
 use chrono::NaiveDate;
 use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
 
 #[derive(Serialize, Deserialize, Clone)]
 pub struct ContactLink {
@@ -30,9 +31,8 @@ impl Default for SiteConfig {
             title: "Ela's Atelier".to_string(),
             subtitle: "Works on paper, canvas, and elsewhere".to_string(),
             welcome_title: "Works on view".to_string(),
-            welcome_subtitle:
-                "An ongoing arrangement of pieces, sketches, and stray observations."
-                    .to_string(),
+            welcome_subtitle: "An ongoing arrangement of pieces, sketches, and stray observations."
+                .to_string(),
             footer: "Hand-arranged with care".to_string(),
             favicon: "/favicon.svg".to_string(),
             theme: "salon".to_string(),
@@ -80,13 +80,23 @@ pub struct PostMeta {
     pub draft: bool,
 }
 
+#[derive(Serialize, Clone, Copy)]
+pub struct ImageDim {
+    pub w: u32,
+    pub h: u32,
+}
+
 #[derive(Serialize, Clone)]
 pub struct CoverImage {
     pub url: String,
     pub alt: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub w: Option<u32>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub h: Option<u32>,
 }
 
-#[derive(Serialize)]
+#[derive(Serialize, Clone)]
 pub struct PostInfo {
     pub slug: String,
     pub date: NaiveDate,
@@ -103,6 +113,13 @@ pub struct PostInfo {
     pub image_count: u32,
 }
 
+#[derive(Serialize, Clone)]
+pub struct PostNeighbor {
+    pub slug: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub title: Option<String>,
+}
+
 #[derive(Serialize)]
 pub struct PostDetail {
     pub slug: String,
@@ -118,6 +135,12 @@ pub struct PostDetail {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub cover_image: Option<CoverImage>,
     pub image_count: u32,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub prev: Option<PostNeighbor>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub next: Option<PostNeighbor>,
+    #[serde(skip_serializing_if = "HashMap::is_empty")]
+    pub dimensions: HashMap<String, ImageDim>,
 }
 
 #[derive(Deserialize)]

backend/src/post/cache.rs

@@ -0,0 +1,113 @@
+//! The in-memory posts cache: rebuilt from disk at startup and after every
+//! mutation, plus prev/next neighbour lookup over the visible set.
+
+use tokio::fs;
+use tracing::warn;
+
+use crate::models::{PostInfo, PostMeta, PostNeighbor};
+use crate::post::images::{cover_from, dim_for_url, extract_images};
+use crate::post::parse::{excerpt_from, parse_post, reading_time};
+use crate::{AppState, CachedPost};
+
+fn build_post_info(slug: &str, meta: &PostMeta, body: &str) -> PostInfo {
+    let images = extract_images(body);
+    PostInfo {
+        slug: slug.to_string(),
+        date: meta.date,
+        title: meta.title.clone(),
+        summary: meta.summary.clone(),
+        tags: meta.tags.clone(),
+        draft: meta.draft,
+        reading_time: reading_time(body),
+        excerpt: excerpt_from(meta, body),
+        cover_image: cover_from(&images),
+        image_count: images.len() as u32,
+    }
+}
+
+/// Scans the posts directory and replaces the in-memory cache.
+/// Called at startup and after any mutation (create/rename/delete).
+pub(crate) async fn rebuild_posts_cache(state: &AppState) {
+    let posts_dir = state.data_dir.join("posts");
+    let mut posts: Vec<CachedPost> = Vec::new();
+
+    let mut rd = match fs::read_dir(&posts_dir).await {
+        Ok(rd) => rd,
+        Err(_) => {
+            *state.posts_cache.write().await = posts;
+            return;
+        }
+    };
+
+    loop {
+        match rd.next_entry().await {
+            Ok(Some(entry)) => {
+                let path = entry.path();
+                if path.extension().and_then(|e| e.to_str()) != Some("md") {
+                    continue;
+                }
+                let Some(slug) = path.file_stem().and_then(|s| s.to_str()) else {
+                    continue;
+                };
+                if slug.starts_with('.') {
+                    continue;
+                }
+                let Ok(raw) = fs::read_to_string(&path).await else {
+                    continue;
+                };
+                let Ok((meta, body)) = parse_post(&raw) else {
+                    warn!("Skipping post with bad frontmatter: {}", slug);
+                    continue;
+                };
+                let mut info = build_post_info(slug, &meta, &body);
+                if let Some(cover) = info.cover_image.as_mut() {
+                    if let Some(d) = dim_for_url(state, &cover.url).await {
+                        cover.w = Some(d.w);
+                        cover.h = Some(d.h);
+                    }
+                }
+                posts.push(CachedPost { info, body });
+            }
+            Ok(None) => break,
+            Err(e) => {
+                warn!("Error iterating posts dir: {}", e);
+                break;
+            }
+        }
+    }
+
+    posts.sort_by(|a, b| {
+        b.info
+            .date
+            .cmp(&a.info.date)
+            .then_with(|| a.info.slug.cmp(&b.info.slug))
+    });
+    *state.posts_cache.write().await = posts;
+}
+
+pub(crate) async fn neighbors_from_cache(
+    state: &AppState,
+    slug: &str,
+    admin: bool,
+) -> (Option<PostNeighbor>, Option<PostNeighbor>) {
+    let cache = state.posts_cache.read().await;
+    let visible: Vec<&PostInfo> = cache
+        .iter()
+        .filter(|p| admin || !p.info.draft)
+        .map(|p| &p.info)
+        .collect();
+    let Some(i) = visible.iter().position(|p| p.slug == slug) else {
+        return (None, None);
+    };
+    let to_neighbor = |p: &PostInfo| PostNeighbor {
+        slug: p.slug.clone(),
+        title: p.title.clone(),
+    };
+    let prev = if i > 0 {
+        Some(to_neighbor(visible[i - 1]))
+    } else {
+        None
+    };
+    let next = visible.get(i + 1).map(|p| to_neighbor(p));
+    (prev, next)
+}

backend/src/post/images.rs

@@ -0,0 +1,166 @@
+//! Markdown image extraction, cover selection, and the on-disk
+//! image-dimension probe (header-only read, cached on `AppState`).
+
+use std::collections::HashMap;
+
+use crate::AppState;
+use crate::models::{CoverImage, ImageDim};
+
+/// Scan markdown for `![alt](url)` images. Returns (alt, url) pairs in order.
+/// Skips inside fenced code blocks. Tolerates titles like `![alt](url "title")`.
+pub(crate) fn extract_images(body: &str) -> Vec<(String, String)> {
+    let mut out = Vec::new();
+    let mut in_fence = false;
+    for line in body.lines() {
+        let trimmed = line.trim_start();
+        if trimmed.starts_with("```") || trimmed.starts_with("~~~") {
+            in_fence = !in_fence;
+            continue;
+        }
+        if in_fence {
+            continue;
+        }
+        let bytes = line.as_bytes();
+        let mut i = 0;
+        while i + 1 < bytes.len() {
+            if bytes[i] == b'!' && bytes[i + 1] == b'[' {
+                if let Some(rel_close) = line[i + 2..].find(']') {
+                    let close = i + 2 + rel_close;
+                    if close + 1 < line.len() && bytes[close + 1] == b'(' {
+                        if let Some(rel_paren) = line[close + 2..].find(')') {
+                            let paren_end = close + 2 + rel_paren;
+                            let alt = line[i + 2..close].to_string();
+                            let url_field = line[close + 2..paren_end].trim();
+                            let url = url_field
+                                .split_once(|c: char| c.is_whitespace())
+                                .map(|(u, _)| u)
+                                .unwrap_or(url_field)
+                                .trim_matches(|c| c == '<' || c == '>')
+                                .to_string();
+                            if !url.is_empty() {
+                                out.push((alt, url));
+                            }
+                            i = paren_end + 1;
+                            continue;
+                        }
+                    }
+                }
+            }
+            i += 1;
+        }
+    }
+    out
+}
+
+pub(crate) fn cover_from(images: &[(String, String)]) -> Option<CoverImage> {
+    images.first().map(|(alt, url)| CoverImage {
+        url: url.clone(),
+        alt: alt.clone(),
+        w: None,
+        h: None,
+    })
+}
+
+/// Probe an uploads-relative URL for image dimensions. Reads only header
+/// bytes via `imagesize::size`, off the runtime via `spawn_blocking`.
+async fn compute_dim_from_url(state: &AppState, url: &str) -> Option<ImageDim> {
+    let name = url.strip_prefix("/uploads/")?;
+    if name.is_empty() || name.contains("..") || name.contains('\\') || name.starts_with('/') {
+        return None;
+    }
+    let path = state.data_dir.join("uploads").join(name);
+    tokio::task::spawn_blocking(move || imagesize::size(&path).ok())
+        .await
+        .ok()
+        .flatten()
+        .map(|s| ImageDim {
+            w: s.width as u32,
+            h: s.height as u32,
+        })
+}
+
+/// Returns cached dim if present, else probes the file and caches the result.
+pub(crate) async fn dim_for_url(state: &AppState, url: &str) -> Option<ImageDim> {
+    {
+        let cache = state.image_dims_cache.read().await;
+        if let Some(d) = cache.get(url) {
+            return Some(*d);
+        }
+    }
+    let d = compute_dim_from_url(state, url).await?;
+    state
+        .image_dims_cache
+        .write()
+        .await
+        .insert(url.to_string(), d);
+    Some(d)
+}
+
+/// Returns a map of `url -> ImageDim` for the given URLs, using the cache
+/// and probing only the URLs that aren't cached yet.
+pub(crate) async fn dims_for_urls(state: &AppState, urls: &[String]) -> HashMap<String, ImageDim> {
+    let mut out: HashMap<String, ImageDim> = HashMap::new();
+    let mut missing: Vec<String> = Vec::new();
+    {
+        let cache = state.image_dims_cache.read().await;
+        for url in urls {
+            if out.contains_key(url) {
+                continue;
+            }
+            if let Some(d) = cache.get(url) {
+                out.insert(url.clone(), *d);
+            } else {
+                missing.push(url.clone());
+            }
+        }
+    }
+    if missing.is_empty() {
+        return out;
+    }
+    let mut newly: Vec<(String, ImageDim)> = Vec::new();
+    for url in &missing {
+        if let Some(d) = compute_dim_from_url(state, url).await {
+            newly.push((url.clone(), d));
+        }
+    }
+    if !newly.is_empty() {
+        let mut cache = state.image_dims_cache.write().await;
+        for (url, d) in &newly {
+            cache.insert(url.clone(), *d);
+            out.insert(url.clone(), *d);
+        }
+    }
+    out
+}
+
+#[cfg(test)]
+mod tests {
+    use super::{cover_from, extract_images};
+
+    #[test]
+    fn extract_images_skips_fences_and_strips_titles() {
+        let md = "intro\n\
+                  ![a](/u/one.png)\n\
+                  ```\n\
+                  ![skip](/u/hidden.png)\n\
+                  ```\n\
+                  ![c](/u/two.png \"a title\")";
+        let imgs = extract_images(md);
+        assert_eq!(
+            imgs,
+            vec![
+                ("a".to_string(), "/u/one.png".to_string()),
+                ("c".to_string(), "/u/two.png".to_string()),
+            ]
+        );
+    }
+
+    #[test]
+    fn cover_from_takes_first_or_none() {
+        assert!(cover_from(&[]).is_none());
+        let imgs = vec![("alt".to_string(), "/u/first.png".to_string())];
+        let cover = cover_from(&imgs).unwrap();
+        assert_eq!(cover.url, "/u/first.png");
+        assert_eq!(cover.alt, "alt");
+    }
+}

backend/src/post/mod.rs

@@ -0,0 +1,13 @@
+//! Post domain logic, split out of the HTTP layer.
+//!
+//! - [`parse`] — slug validation, frontmatter split/parse/serialize, reading
+//!   time, excerpt. Pure, no I/O.
+//! - [`images`] — markdown image extraction, cover selection, and the
+//!   filesystem image-dimension probe + cache.
+//! - [`cache`] — the in-memory posts cache (rebuild + neighbour lookup).
+//!
+//! `handlers::posts` stays thin and only orchestrates these.
+
+pub mod cache;
+pub mod images;
+pub mod parse;

backend/src/post/parse.rs

@@ -0,0 +1,179 @@
+//! Pure post parsing: slug validation, YAML frontmatter, reading time,
+//! excerpt. No filesystem or network access — trivially unit-testable.
+
+use crate::error::AppError;
+use crate::models::PostMeta;
+
+const WORDS_PER_MINUTE: u32 = 200;
+const MAX_SLUG_LEN: usize = 100;
+const WINDOWS_RESERVED: &[&str] = &[
+    "CON", "PRN", "AUX", "NUL", "COM1", "COM2", "COM3", "COM4", "COM5", "COM6", "COM7", "COM8",
+    "COM9", "LPT1", "LPT2", "LPT3", "LPT4", "LPT5", "LPT6", "LPT7", "LPT8", "LPT9",
+];
+
+pub(crate) fn validate_slug(s: &str) -> Result<(), AppError> {
+    if s.is_empty() {
+        return Err(AppError::BadRequest("Slug is empty".to_string()));
+    }
+    if s.len() > MAX_SLUG_LEN {
+        return Err(AppError::BadRequest(format!(
+            "Slug exceeds {} characters",
+            MAX_SLUG_LEN
+        )));
+    }
+    if s.starts_with('.') {
+        return Err(AppError::BadRequest(
+            "Slug cannot start with '.'".to_string(),
+        ));
+    }
+    if s.ends_with('.') || s.ends_with(' ') {
+        return Err(AppError::BadRequest(
+            "Slug cannot end with '.' or space".to_string(),
+        ));
+    }
+    if s.contains("..") {
+        return Err(AppError::BadRequest("Slug cannot contain '..'".to_string()));
+    }
+    for c in s.chars() {
+        if c.is_control() {
+            return Err(AppError::BadRequest(
+                "Slug contains control characters".to_string(),
+            ));
+        }
+        if matches!(c, '/' | '\\' | '<' | '>' | ':' | '"' | '|' | '?' | '*') {
+            return Err(AppError::BadRequest(format!(
+                "Slug contains invalid character '{}'",
+                c
+            )));
+        }
+    }
+    let stem = s.split('.').next().unwrap_or("").to_ascii_uppercase();
+    if WINDOWS_RESERVED.iter().any(|r| *r == stem) {
+        return Err(AppError::BadRequest("Slug is a reserved name".to_string()));
+    }
+    Ok(())
+}
+
+pub(crate) fn split_frontmatter(raw: &str) -> Option<(&str, &str)> {
+    let raw = raw
+        .strip_prefix("---\n")
+        .or_else(|| raw.strip_prefix("---\r\n"))?;
+    let end_marker = raw.find("\n---\n").or_else(|| raw.find("\r\n---\r\n"))?;
+    let yaml = &raw[..end_marker];
+    let body_start = end_marker
+        + raw[end_marker..]
+            .find("---\n")
+            .or_else(|| raw[end_marker..].find("---\r\n"))?
+        + "---\n".len();
+    let body = raw[body_start..]
+        .trim_start_matches('\n')
+        .trim_start_matches('\r');
+    Some((yaml, body))
+}
+
+pub(crate) fn parse_post(raw: &str) -> Result<(PostMeta, String), AppError> {
+    let (yaml, body) = split_frontmatter(raw).ok_or_else(|| {
+        AppError::Internal(
+            "Missing frontmatter".to_string(),
+            Some("post is missing the YAML --- block".to_string()),
+        )
+    })?;
+    let meta: PostMeta = serde_yaml::from_str(yaml).map_err(|e| {
+        AppError::Internal(
+            "Invalid frontmatter".to_string(),
+            Some(format!("YAML parse error: {}", e)),
+        )
+    })?;
+    Ok((meta, body.to_string()))
+}
+
+pub(crate) fn serialize_post(meta: &PostMeta, body: &str) -> Result<String, AppError> {
+    let yaml = serde_yaml::to_string(meta)
+        .map_err(|e| AppError::Internal("Serialization error".to_string(), Some(e.to_string())))?;
+    Ok(format!("---\n{}---\n{}", yaml, body))
+}
+
+pub(crate) fn reading_time(body: &str) -> u32 {
+    let words = body.split_whitespace().count() as u32;
+    (words + WORDS_PER_MINUTE - 1) / WORDS_PER_MINUTE.max(1)
+}
+
+pub(crate) fn excerpt_from(meta: &PostMeta, body: &str) -> String {
+    if let Some(s) = meta.summary.as_ref() {
+        if !s.trim().is_empty() {
+            return s.trim().to_string();
+        }
+    }
+    let plain = body.replace(['#', '*', '_', '`'], "").replace('\n', " ");
+    let mut out: String = plain.chars().take(200).collect();
+    if plain.chars().count() > 200 {
+        out.push_str("...");
+    }
+    out.trim().to_string()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::{parse_post, reading_time, split_frontmatter, validate_slug};
+    use crate::error::AppError;
+
+    #[test]
+    fn validate_slug_accepts_normal_slugs() {
+        assert!(validate_slug("hello-world").is_ok());
+        assert!(validate_slug("a_b.c-123").is_ok());
+    }
+
+    #[test]
+    fn validate_slug_rejects_traversal_and_bad_chars() {
+        for bad in [
+            "",
+            "../etc",
+            "with/slash",
+            "back\\slash",
+            "ends.",
+            "trailing ",
+            ".hidden",
+        ] {
+            assert!(
+                matches!(validate_slug(bad), Err(AppError::BadRequest(_))),
+                "expected {bad:?} to be rejected"
+            );
+        }
+        let too_long = "x".repeat(101);
+        assert!(validate_slug(&too_long).is_err());
+        assert!(matches!(validate_slug("CON"), Err(AppError::BadRequest(_))));
+    }
+
+    #[test]
+    fn split_frontmatter_handles_lf_and_crlf() {
+        let (yaml, body) = split_frontmatter("---\ndate: 2026-05-16\n---\nHello").unwrap();
+        assert_eq!(yaml, "date: 2026-05-16");
+        assert_eq!(body, "Hello");
+
+        let (y2, b2) = split_frontmatter("---\r\ndate: 2026-05-16\r\n---\r\nHi").unwrap();
+        assert!(y2.contains("date: 2026-05-16"));
+        assert_eq!(b2, "Hi");
+
+        assert!(split_frontmatter("no frontmatter here").is_none());
+    }
+
+    #[test]
+    fn parse_post_reads_meta_and_body() {
+        let raw = "---\ndate: 2026-05-16\ntitle: Hello\ndraft: true\n---\nBody text";
+        let (meta, body) = parse_post(raw).unwrap();
+        assert_eq!(meta.title.as_deref(), Some("Hello"));
+        assert!(meta.draft);
+        assert_eq!(meta.date.to_string(), "2026-05-16");
+        assert_eq!(body, "Body text");
+
+        assert!(parse_post("no frontmatter").is_err());
+    }
+
+    #[test]
+    fn reading_time_rounds_up_by_wpm() {
+        assert_eq!(reading_time(""), 0);
+        assert_eq!(reading_time("one"), 1);
+        assert_eq!(reading_time(&"word ".repeat(200)), 1);
+        assert_eq!(reading_time(&"word ".repeat(201)), 2);
+    }
+}

docker-compose.yml

@@ -41,7 +41,8 @@ services:
     ports:
       - "4322:4321"
     environment:
-      - PUBLIC_API_URL=http://backend:3000
+      - PUBLIC_API_URL=${PUBLIC_API_URL:-}
+      - SITE_MODE=${SITE_MODE:-atelier}
     depends_on:
       backend:
         condition: service_healthy

frontend/biome.json

@@ -0,0 +1,56 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.15/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"includes": ["src/**/*.{ts,tsx,js,jsx,json}", "*.{ts,js,json}", "!**/dist", "!**/.astro"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineWidth": 100
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "off",
+				"noControlCharactersInRegex": "warn",
+				"noArrayIndexKey": "warn"
+			},
+			"correctness": {
+				"useExhaustiveDependencies": "warn"
+			},
+			"security": {
+				"noDangerouslySetInnerHtml": "warn"
+			},
+			"a11y": {
+				"noLabelWithoutControl": "warn",
+				"noSvgWithoutTitle": "warn",
+				"useKeyWithClickEvents": "warn",
+				"useButtonType": "warn",
+				"noStaticElementInteractions": "warn",
+				"useSemanticElements": "warn"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"semicolons": "always"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

frontend/package-lock.json

@@ -21,7 +21,8 @@
         "@fontsource-variable/fraunces": "^5.2.9",
         "@fontsource-variable/inter": "^5.2.5",
         "@fontsource-variable/jetbrains-mono": "^5.2.5",
-        "@fontsource/caveat": "^5.2.8",
+        "@fontsource/space-mono": "^5.2.9",
+        "@fontsource/vt323": "^5.2.7",
         "@replit/codemirror-vim": "^6.3.0",
         "@tailwindcss/vite": "^4.2.2",
         "astro": "^6.0.8",
@@ -40,11 +41,13 @@
       },
       "devDependencies": {
         "@astrojs/check": "^0.9.9",
+        "@biomejs/biome": "^2.0.0",
         "@types/katex": "^0.16.8",
         "@types/node": "^25.5.0",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
-        "typescript": "^5.9.3"
+        "typescript": "^5.9.3",
+        "vitest": "^3.0.0"
       },
       "engines": {
         "node": ">=22.12.0"
@@ -607,6 +610,181 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@biomejs/biome": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.15.tgz",
+      "integrity": "sha512-j5VH3a/h/HXTKBM50MDMxRCzkeLv9S2XJcW2WgnZT1+xyisi+0bISrXR82gCX+8S9lvK0skEvHJRN+3Ktr2hlw==",
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "bin": {
+        "biome": "bin/biome"
+      },
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/biome"
+      },
+      "optionalDependencies": {
+        "@biomejs/cli-darwin-arm64": "2.4.15",
+        "@biomejs/cli-darwin-x64": "2.4.15",
+        "@biomejs/cli-linux-arm64": "2.4.15",
+        "@biomejs/cli-linux-arm64-musl": "2.4.15",
+        "@biomejs/cli-linux-x64": "2.4.15",
+        "@biomejs/cli-linux-x64-musl": "2.4.15",
+        "@biomejs/cli-win32-arm64": "2.4.15",
+        "@biomejs/cli-win32-x64": "2.4.15"
+      }
+    },
+    "node_modules/@biomejs/cli-darwin-arm64": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.15.tgz",
+      "integrity": "sha512-rF3PPqLq1yoST79zaQbDjVJwsuIeci/O+9bgNmC5QpgOqz6aqYuzA4abyAGx+mgyiDXn4A049xAN8gijbuR1Qg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-darwin-x64": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.15.tgz",
+      "integrity": "sha512-/5KHXYMfSJs1fNXiX30xFtI8JcCFV6zaVVLxOa0M2sfqBKHkpQhRTv94yxQWxeTY2lzo2OuTlNvPC+hDQt2wcQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-arm64": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.15.tgz",
+      "integrity": "sha512-owaAMZD/T4LrD0ELNCk0Km3qrRHuM0X6EAyVE1FSqGY0rbLoiDLrO4Us2tllm6cAeB2Ioa9C2C08NZPdr8+0Ug==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-arm64-musl": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.15.tgz",
+      "integrity": "sha512-ZPcxznxm0pogHBLZhYntyR3sR+MrZjqJIKEr7ZqVen0Rl+P/4upVmfYXjftizi9RoqZntg33fv/1fbdhbYXpEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-x64": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.15.tgz",
+      "integrity": "sha512-0jj7THz12GbUOLmMibktK6DZjqz2zV64KFxyBtcFTKPiiOIY0a7vns1elpO1dERvxpsZ5ik0oFfz0oGwFde1+g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-x64-musl": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.15.tgz",
+      "integrity": "sha512-CNq/9W38SYSH023lfcQ4KKU8K0YX8T//FZUhcgtMMRABDojx5XsMV7jlweAvGSl389wJQB29Qo6Zb/a+jdvt+w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-win32-arm64": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.15.tgz",
+      "integrity": "sha512-ouhkYdlhp/1GghEJPdWwD/Vi3gQ1nFxuSpMolWsbq3Lsq3QUR4jl6UdhhscdCugKU5vOEuMiJhvKj66O0OCq+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-win32-x64": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.15.tgz",
+      "integrity": "sha512-zBrGq5mx5wwpnow4+2BxUvleDM+GNd4sLbPaMapsSLQLD0NGRCquqPBTgN+7XkUteHvj7M+BstuI8tmnV7+HgQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
     "node_modules/@bramus/specificity": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
@@ -1723,10 +1901,19 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource/caveat": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/caveat/-/caveat-5.2.8.tgz",
-      "integrity": "sha512-9fUUfFE2IQFKbx+xOcaeQxxmh8iJguEb8z+j1PeueO4UUx+XfT4pRm/B04ZDvFA794/iRxY/IibmP8ZKtIf4rw==",
+    "node_modules/@fontsource/space-mono": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/space-mono/-/space-mono-5.2.9.tgz",
+      "integrity": "sha512-b61faFOHEISQ/pD25G+cfGY9o/WW6lRv6hBQQfpWvEJ4y1V+S4gmth95EVyBE2VL3qDYHeVQ8nBzrplzdXTDDg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/vt323": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/vt323/-/vt323-5.2.7.tgz",
+      "integrity": "sha512-8JTMM23vMhQxin9Cn/ijty8cNwXW4INrln0VAJ2227Rz0CVfkzM3qr3l/CqudZJ6BXCnbCGUTdf2ym3cTNex8A==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -3295,6 +3482,17 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
@@ -3304,6 +3502,13 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -3417,6 +3622,131 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
+      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
+      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.2.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.4.tgz",
+      "integrity": "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.4",
+        "pathe": "^2.0.3",
+        "strip-literal": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz",
+      "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
+      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "loupe": "^3.1.4",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@volar/kit": {
       "version": "2.4.28",
       "resolved": "https://registry.npmjs.org/@volar/kit/-/kit-2.4.28.tgz",
@@ -3632,6 +3962,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/astro": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/astro/-/astro-6.0.8.tgz",
@@ -3789,6 +4129,16 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001781",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001781.tgz",
@@ -3819,6 +4169,23 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chai": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
+      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/character-entities": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
@@ -3849,6 +4216,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/check-error": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
+      "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/chokidar": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
@@ -4150,6 +4527,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/defu": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
@@ -4473,6 +4860,16 @@
       "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
       "license": "MIT"
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -5426,6 +5823,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/loupe": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
+      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "11.2.7",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
@@ -6570,6 +6974,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/piccolore": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/piccolore/-/piccolore-0.1.3.tgz",
@@ -7162,6 +7583,13 @@
         "node": ">=20"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -7199,6 +7627,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -7208,6 +7643,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -7250,6 +7692,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
+      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/style-mod": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
@@ -7312,6 +7774,13 @@
       "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
       "license": "MIT"
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyclip": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/tinyclip/-/tinyclip-0.1.12.tgz",
@@ -7346,6 +7815,36 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinypool": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
+      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz",
+      "integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tldts": {
       "version": "7.0.30",
       "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.30.tgz",
@@ -7904,6 +8403,36 @@
         }
       }
     },
+    "node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vite-node/node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vitefu": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.2.tgz",
@@ -7923,6 +8452,86 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",
+      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/expect": "3.2.4",
+        "@vitest/mocker": "3.2.4",
+        "@vitest/pretty-format": "^3.2.4",
+        "@vitest/runner": "3.2.4",
+        "@vitest/snapshot": "3.2.4",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "debug": "^4.4.1",
+        "expect-type": "^1.2.1",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.14",
+        "tinypool": "^1.1.1",
+        "tinyrainbow": "^2.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+        "vite-node": "3.2.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "3.2.4",
+        "@vitest/ui": "3.2.4",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/volar-service-css": {
       "version": "0.0.70",
       "resolved": "https://registry.npmjs.org/volar-service-css/-/volar-service-css-0.0.70.tgz",
@@ -8247,6 +8856,23 @@
         "node": ">=4"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

frontend/package.json

@@ -9,7 +9,15 @@
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "check": "astro check",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write .",
+    "format": "biome format --write .",
+    "format:check": "biome format .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "verify": "astro check && biome lint . && vitest run"
   },
   "dependencies": {
     "@astrojs/node": "^10.0.3",
@@ -25,7 +33,8 @@
     "@fontsource-variable/fraunces": "^5.2.9",
     "@fontsource-variable/inter": "^5.2.5",
     "@fontsource-variable/jetbrains-mono": "^5.2.5",
-    "@fontsource/caveat": "^5.2.8",
+    "@fontsource/space-mono": "^5.2.9",
+    "@fontsource/vt323": "^5.2.7",
     "@replit/codemirror-vim": "^6.3.0",
     "@tailwindcss/vite": "^4.2.2",
     "astro": "^6.0.8",
@@ -44,10 +53,12 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",
+    "@biomejs/biome": "^2.0.0",
     "@types/katex": "^0.16.8",
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^3.0.0"
   }
 }

frontend/src/components/CyberFx.astro

@@ -0,0 +1,125 @@
+---
+/*
+ * CyberFx — ambient + interactive layer for the `.cybersigil` theme.
+ *
+ * Renders an aria-hidden overlay root on every page. All visuals are CSS,
+ * scoped to `.cybersigil .cs-fx*` in global.css, so this is an inert,
+ * display:none no-op under every other theme. The bundled script only wires
+ * the scroll-entry databend on images and self-disables off-theme or under
+ * prefers-reduced-motion.
+ */
+---
+
+<div class="cs-fx" aria-hidden="true">
+	<div class="cs-fx-halftone"></div>
+	<div class="cs-fx-wire"></div>
+	<div class="cs-fx-tear"></div>
+	<i class="cs-fx-corner cs-fx-corner--tl"></i>
+	<i class="cs-fx-corner cs-fx-corner--tr"></i>
+	<i class="cs-fx-corner cs-fx-corner--bl"></i>
+	<i class="cs-fx-corner cs-fx-corner--br"></i>
+</div>
+
+<script>
+	import { buildCybersigil } from '../lib/cybersigil';
+
+	let teardown: (() => void) | null = null;
+
+	function initCyberFx() {
+		const root = document.documentElement;
+		if (!root.classList.contains('cybersigil')) return;
+		const fx = document.querySelector<HTMLElement>('.cs-fx');
+		if (!fx) return;
+
+		const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+		/* ─── Generated sigil growths in the four corners ─── */
+		/* One sigil per page load; the four corner transforms in global.css
+		 * (scaleX / scaleY / scale) splay it into each corner. */
+		const corners = document.querySelectorAll<HTMLElement>('.cs-fx-corner');
+		if (corners.length) {
+			const svg = buildCybersigil();
+			corners.forEach((c) => {
+				if (c.classList.contains('cs-fx-corner--sig')) return;
+				c.innerHTML = svg;
+				c.classList.add('cs-fx-corner--sig');
+			});
+		}
+
+		/* ─── One sigil filling the background. count:6 (was 9) — fewer branch
+		 * nodes ⇒ far fewer perpetually-animating strokes, same silhouette. ─── */
+		const wire = document.querySelector<HTMLElement>('.cs-fx-wire');
+		if (wire && !wire.classList.contains('cs-fx-wire--sig')) {
+			wire.innerHTML = buildCybersigil({ count: 6 });
+			wire.classList.add('cs-fx-wire--sig');
+		}
+
+		/* ─── Scroll-entry databend on images ─── */
+		if (!reduced && 'IntersectionObserver' in window) {
+			const targets = document.querySelectorAll<HTMLElement>(
+				'.prose img, .prose figure img, .plate-image img'
+			);
+			if (targets.length) {
+				const io = new IntersectionObserver(
+					(entries) => {
+						for (const en of entries) {
+							if (!en.isIntersecting) continue;
+							const el = en.target as HTMLElement;
+							el.classList.remove('cs-databent');
+							// reflow so the animation can retrigger
+							void el.offsetWidth;
+							el.classList.add('cs-databent');
+							io.unobserve(el);
+						}
+					},
+					{ rootMargin: '0px 0px -12% 0px', threshold: 0.15 }
+				);
+				targets.forEach((t) => io.observe(t));
+			}
+		}
+
+		/* ─── Ambient: entrance fade-in (opacity:0 → target via the CSS
+		 * transition on first apply) + scroll-depth recede. Parallax is
+		 * disabled for now — the --cs-px/py/cx/cy vars default to 0px so the
+		 * wire/corner transforms stay put; re-enable by driving those vars
+		 * from scroll/pointer here again. ─── */
+		if (teardown) teardown();
+		const off: Array<() => void> = [];
+		let depth = 0, raf = 0;
+
+		const apply = () => {
+			raf = 0;
+			fx.style.opacity = String(1 - 0.5 * depth);
+		};
+		const schedule = () => { if (!raf) raf = requestAnimationFrame(apply); };
+
+		const onScroll = () => {
+			const vh = window.innerHeight || 1;
+			depth = Math.max(0, Math.min(1, window.scrollY / vh));
+			schedule();
+		};
+		window.addEventListener('scroll', onScroll, { passive: true });
+		window.addEventListener('resize', onScroll);
+		off.push(() => window.removeEventListener('scroll', onScroll));
+		off.push(() => window.removeEventListener('resize', onScroll));
+		onScroll();
+
+		/* Freeze every loop while the tab is hidden — idle-battery win. */
+		const onVis = () => fx.classList.toggle('is-paused', document.hidden);
+		document.addEventListener('visibilitychange', onVis);
+		off.push(() => document.removeEventListener('visibilitychange', onVis));
+		onVis();
+
+		teardown = () => {
+			if (raf) cancelAnimationFrame(raf);
+			off.forEach((fn) => fn());
+			teardown = null;
+		};
+	}
+
+	initCyberFx();
+	// MPA back/forward restores: re-arm if needed.
+	window.addEventListener('pageshow', (e) => {
+		if (e.persisted) initCyberFx();
+	});
+</script>

frontend/src/components/react/AssetsButton.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 export default function AssetsButton({
-  className = 'inline-flex items-center gap-2 bg-surface0 hover:bg-surface1 text-subtext1 hover:text-text px-3 py-2 rounded-lg border border-surface1 transition-colors text-sm',
+  className = 'btn btn--ghost',
   label = 'Assets',
   iconSize = 14,
 }: Props) {
@@ -89,8 +89,7 @@ export default function AssetsButton({
                 type="button"
                 onClick={() => setOpen(false)}
                 aria-label="Close"
-                className="p-1.5 text-[var(--subtext0)] hover:text-[var(--text)] hover:bg-[var(--surface0)] transition-colors"
-                style={{ borderRadius: 2 }}
+                className="btn btn--ghost btn--icon btn--sm"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

frontend/src/components/react/ContactForm.tsx

@@ -169,7 +169,7 @@ export default function ContactForm() {
       <button
         type="submit"
         disabled={status === 'sending'}
-        className="btn-stamp disabled:opacity-60"
+        className="btn btn--primary"
       >
         {status === 'sending' ? 'Sending…' : 'Send message'}
       </button>

frontend/src/components/react/DeletePostButton.tsx

@@ -1,24 +1,34 @@
 import { useState } from 'react';
 import { deletePost } from '../../lib/api';
+import { confirmDialog, notify } from '../../lib/confirm';
+import { type SiteMode, copy } from '../../lib/siteMode';
 
 interface Props {
   slug: string;
   title: string;
   variant?: 'icon' | 'full';
+  mode?: SiteMode;
 }
 
-export default function DeletePostButton({ slug, title, variant = 'full' }: Props) {
+export default function DeletePostButton({ slug, title, variant = 'full', mode = 'atelier' }: Props) {
   const [busy, setBusy] = useState(false);
+  const c = copy(mode);
 
   async function handleClick() {
     if (busy) return;
-    if (!window.confirm(`Delete "${title}"? This cannot be undone.`)) return;
+    const ok = await confirmDialog({
+      title: c.deletePostTitle,
+      message: c.deletePostMsg(title),
+      confirmLabel: 'Delete',
+      cancelLabel: 'Cancel',
+    });
+    if (!ok) return;
     setBusy(true);
     try {
       await deletePost(slug);
       window.location.href = '/';
     } catch (e) {
-      window.alert(`Failed to delete: ${e instanceof Error ? e.message : 'unknown error'}`);
+      notify(`Failed to delete: ${e instanceof Error ? e.message : 'unknown error'}`);
       setBusy(false);
     }
   }
@@ -31,7 +41,7 @@ export default function DeletePostButton({ slug, title, variant = 'full' }: Prop
         disabled={busy}
         title="Delete post"
         aria-label="Delete post"
-        className="p-2 rounded-md bg-surface0/80 hover:bg-red/20 text-subtext0 hover:text-red border border-surface1 transition-colors disabled:opacity-50"
+        className="btn btn--danger btn--icon btn--sm"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -60,7 +70,7 @@ export default function DeletePostButton({ slug, title, variant = 'full' }: Prop
       type="button"
       onClick={handleClick}
       disabled={busy}
-      className="inline-flex items-center gap-2 bg-surface0 hover:bg-red/15 text-subtext1 hover:text-red px-3 py-1.5 md:px-4 md:py-2 rounded-md border border-surface1 hover:border-red/30 transition-colors text-sm disabled:opacity-50"
+      className="btn btn--danger"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"

frontend/src/components/react/LogoutButton.tsx

@@ -22,12 +22,10 @@ export default function LogoutButton() {
       disabled={busy}
       title="Sign out"
       aria-label="Sign out"
-      className="text-subtext0 hover:text-red transition-colors p-1.5 rounded-md hover:bg-surface0/60 disabled:opacity-50"
+      className="topbar-control topbar-control--danger tc-collapse-sm"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -40,6 +38,7 @@ export default function LogoutButton() {
         <polyline points="16 17 21 12 16 7" />
         <line x1="21" x2="9" y1="12" y2="12" />
       </svg>
+      <span className="tc-label">{busy ? 'Signing out…' : 'Sign out'}</span>
     </button>
   );
 }

frontend/src/components/react/PostList.tsx

@@ -1,11 +1,36 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+// useLayoutEffect warns when React renders this island on the server; the
+// measurement only matters on the client anyway.
+const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 import { deletePost } from '../../lib/api';
+import { confirmDialog, notify } from '../../lib/confirm';
+import { buildCybersigil } from '../../lib/cybersigil';
+import { type SiteMode, copy } from '../../lib/siteMode';
+
+// Per-plate sigil accent. Built post-mount (not during render) so the random
+// markup never differs between SSR and hydration. Inert/display:none off the
+// cybersigil theme; carves over the image on plate hover/focus via global.css.
+function PlateSigil() {
+  const [html, setHtml] = useState('');
+  useEffect(() => { setHtml(buildCybersigil()); }, []);
+  if (!html) return null;
+  return (
+    <div
+      className="cs-plate-sig"
+      aria-hidden="true"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
 
 const PAGE_SIZE = 9;
 
 interface CoverImage {
   url: string;
   alt: string;
+  w?: number;
+  h?: number;
 }
 
 interface Post {
@@ -24,6 +49,7 @@ interface Post {
 interface Props {
   posts: Post[];
   isAdmin?: boolean;
+  mode?: SiteMode;
 }
 
 function formatSlug(slug: string) {
@@ -42,35 +68,116 @@ function formatMonth(date: string) {
   return new Date(date).toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
 }
 
-// Deterministic salon-hang layout. Each tile gets a col-span (out of 12) and an aspect ratio.
-// The cycle is chosen so the room reads asymmetric but balanced.
-const LAYOUT_CYCLE: Array<{ col: number; aspect: string; tilt: number }> = [
-  { col: 7, aspect: '4 / 3',  tilt: -0.4 },
-  { col: 5, aspect: '3 / 4',  tilt:  0.3 },
-  { col: 4, aspect: '4 / 5',  tilt: -0.2 },
-  { col: 4, aspect: '1 / 1',  tilt:  0.5 },
-  { col: 4, aspect: '4 / 5',  tilt: -0.6 },
-  { col: 5, aspect: '1 / 1',  tilt:  0.2 },
-  { col: 7, aspect: '5 / 4',  tilt: -0.3 },
-  { col: 8, aspect: '16 / 10', tilt:  0.4 },
-  { col: 4, aspect: '3 / 4',  tilt: -0.5 },
-];
+// Blog rows want a human date, not the gallery's terse MONTH / YEAR split.
+function formatLongDate(date: string) {
+  return new Date(date).toLocaleDateString('en-US', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+}
 
-export default function PostList({ posts: initialPosts, isAdmin = false }: Props) {
+// ── Justified-gallery layout ────────────────────────────────────────────────
+// Every cover keeps its true aspect ratio (no crop). Tiles are packed left to
+// right; once a tentative row is at least as wide as the container it is
+// finalized and its height solved so the row fills the width exactly. The
+// trailing partial row stays at the target height (left-aligned), only shrunk
+// if a lone wide image would overflow. Result: variable widths, one shared
+// image height per visual row, no wasted space.
+
+const GAP = 18;         // horizontal gap between tiles in a row (px)
+const ROW_GAP = 40;     // vertical gap between rows (px)
+const MIN_H = 150;      // floor so a wide-only row never collapses
+// Covers with no usable dimensions (or no cover at all) cycle through a set of
+// pleasant ratios so the placeholder tiles still read as an arranged hang.
+const FALLBACK_RATIOS = [1.5, 0.78, 1, 1.33, 0.8, 1.6, 0.9];
+
+function aspectOf(post: Post, idx: number): number {
+  const ci = post.cover_image;
+  if (ci && ci.w && ci.h && ci.w > 0 && ci.h > 0) {
+    const r = ci.w / ci.h;
+    if (Number.isFinite(r) && r > 0) return r;
+  }
+  return FALLBACK_RATIOS[idx % FALLBACK_RATIOS.length];
+}
+
+function targetRowHeight(cw: number): number {
+  if (cw < 560) return Math.round(cw * 0.72);
+  if (cw < 900) return 260;
+  if (cw < 1280) return 300;
+  return 340;
+}
+
+interface Cell { post: Post; idx: number; aspect: number; w: number; h: number }
+
+function buildRows(
+  tiles: Array<{ post: Post; idx: number; aspect: number }>,
+  cw: number,
+  targetH: number,
+  chromeX: number,
+): Cell[][] {
+  const rows: Cell[][] = [];
+  let cur: typeof tiles = [];
+  let aspSum = 0;
+
+  const finalize = (items: typeof tiles, h: number) => {
+    const rh = Math.round(Math.max(MIN_H, h));
+    rows.push(
+      items.map(t => ({ ...t, w: Math.round(t.aspect * rh), h: rh })),
+    );
+  };
+
+  for (const t of tiles) {
+    cur = [...cur, t];
+    aspSum += t.aspect;
+    const k = cur.length;
+    const projected = targetH * aspSum + k * chromeX + (k - 1) * GAP;
+    if (projected >= cw) {
+      const avail = cw - k * chromeX - (k - 1) * GAP;
+      const h = Math.min(avail / aspSum, targetH * 1.5);
+      finalize(cur, h);
+      cur = [];
+      aspSum = 0;
+    }
+  }
+  if (cur.length) {
+    const k = cur.length;
+    const projected = targetH * aspSum + k * chromeX + (k - 1) * GAP;
+    let h = targetH;
+    if (projected > cw) h = (cw - k * chromeX - (k - 1) * GAP) / aspSum;
+    finalize(cur, Math.min(h, targetH * 1.5));
+  }
+  return rows;
+}
+
+export default function PostList({ posts: initialPosts, isAdmin = false, mode = 'atelier' }: Props) {
+  const isBlog = mode === 'blog';
+  const c = copy(mode);
   const [posts, setPosts] = useState(initialPosts);
   const [deleting, setDeleting] = useState<string | null>(null);
   const [visible, setVisible] = useState(() => Math.min(PAGE_SIZE, initialPosts.length));
   const sentinelRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  // null until measured on the client — keeps SSR and first hydration render
+  // identical (CSS-only fallback), then the precise layout swaps in.
+  const [rows, setRows] = useState<Cell[][] | null>(null);
+  const [chrome, setChrome] = useState(30); // plate mat+border width (px)
 
   async function handleDelete(slug: string, title: string) {
     if (deleting) return;
-    if (!window.confirm(`Take "${title}" off the wall? This cannot be undone.`)) return;
+    const ok = await confirmDialog({
+      title: c.deleteListTitle,
+      message: c.deleteListMsg(title),
+      confirmLabel: c.deleteListConfirm,
+      cancelLabel: c.deleteListCancel,
+    });
+    if (!ok) return;
     setDeleting(slug);
     try {
       await deletePost(slug);
       setPosts(p => p.filter(x => x.slug !== slug));
     } catch (e) {
-      window.alert(`Failed to remove: ${e instanceof Error ? e.message : 'unknown error'}`);
+      notify(`Failed to delete: ${e instanceof Error ? e.message : 'unknown error'}`);
     } finally {
       setDeleting(null);
     }
@@ -96,132 +203,289 @@ export default function PostList({ posts: initialPosts, isAdmin = false }: Props
     return () => io.disconnect();
   }, [visible, posts.length]);
 
-  if (posts.length === 0) {
-    return null;
-  }
-
   const shown = posts.slice(0, visible);
   const hasMore = visible < posts.length;
 
-  return (
-    <>
-    <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-x-10 md:gap-y-16">
-      {shown.map((post, idx) => {
-        const displayTitle = post.title || formatSlug(post.slug);
-        const isDeleting = deleting === post.slug;
-        const layout = LAYOUT_CYCLE[idx % LAYOUT_CYCLE.length];
-        const hasCover = !!post.cover_image?.url;
+  // Measure the container + plate chrome and (re)compute the justified rows.
+  // Re-runs on resize and whenever the shown set changes (infinite scroll).
+  useIsoLayoutEffect(() => {
+    if (isBlog) return; // blog mode renders a plain stack — no justified math
+    const container = containerRef.current;
+    if (!container) return;
 
-        return (
-          <article
-            key={post.slug}
-            className={`relative plate-enter md-col-span ${isDeleting ? 'opacity-40 pointer-events-none' : ''}`}
-            style={{
-              animationDelay: `${Math.min(idx * 80, 480)}ms`,
-              ['--col-span' as any]: layout.col,
-            }}
-          >
-            <a
-              href={`/posts/${encodeURIComponent(post.slug)}`}
-              className="block plate group"
-              style={{ transform: `rotate(${layout.tilt}deg)` }}
-              aria-label={`View ${displayTitle}`}
-            >
+    let frame = 0;
+    const measure = () => {
+      const cw = container.clientWidth;
+      if (cw <= 0) return;
+      // Mat + border are fixed px regardless of tile size — read once from a
+      // live plate so the row-fill math is exact for whatever theme is on.
+      let chromeX = 30;
+      const plate = container.querySelector<HTMLElement>('.plate');
+      if (plate) {
+        const cs = getComputedStyle(plate);
+        chromeX =
+          parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight) +
+          parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
+        if (!Number.isFinite(chromeX)) chromeX = 30;
+      }
+      setChrome(chromeX);
+      const tiles = shown.map((post, idx) => ({ post, idx, aspect: aspectOf(post, idx) }));
+      setRows(buildRows(tiles, cw, targetRowHeight(cw), chromeX));
+    };
+
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+
+    measure();
+    const ro = new ResizeObserver(schedule);
+    ro.observe(container);
+    return () => {
+      cancelAnimationFrame(frame);
+      ro.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, posts]);
+
+  if (posts.length === 0) return null;
+
+  let cellIdx = 0; // running stagger index across all rows
+
+  const renderCell = (cell: Cell | null, post: Post, idx: number) => {
+    const displayTitle = post.title || formatSlug(post.slug);
+    const isDeleting = deleting === post.slug;
+    const hasCover = !!post.cover_image?.url;
+    const stagger = Math.min(cellIdx++ * 70, 480);
+
+    // Precise layout: tile sized to outer (image + mat) width with flex-grow so
+    // sub-pixel rounding redistributes and the row fills the width exactly —
+    // no crop, no wrap. Fallback (pre-measure / no JS): grow proportional to
+    // aspect so it still reads as a justified hang.
+    const aspect = cell ? cell.aspect : aspectOf(post, idx);
+    const ow = cell ? cell.w + chrome : 0;
+    const articleStyle: React.CSSProperties = cell
+      ? { flex: `${ow} ${ow} ${ow}px`, minWidth: 0, animationDelay: `${stagger}ms` }
+      : { flex: `${aspect.toFixed(4)} 1 ${Math.round(aspect * 220)}px`, animationDelay: `${stagger}ms` };
+    const imageStyle: React.CSSProperties = cell
+      ? { height: `${cell.h}px` }
+      : { aspectRatio: `${aspect}` };
+
+    return (
+      <article
+        key={post.slug}
+        className={`relative plate-enter ${isDeleting ? 'opacity-40 pointer-events-none' : ''}`}
+        style={articleStyle}
+      >
+        <a
+          href={`/posts/${encodeURIComponent(post.slug)}`}
+          className="block plate group"
+          aria-label={`View ${displayTitle}`}
+        >
+          <div className="plate-image" style={imageStyle}>
+            {hasCover ? (
+              <img
+                src={post.cover_image!.url}
+                alt={post.cover_image!.alt || displayTitle}
+                width={post.cover_image!.w}
+                height={post.cover_image!.h}
+                loading={idx < 3 ? 'eager' : 'lazy'}
+                decoding={idx === 0 ? 'sync' : 'async'}
+                fetchPriority={idx === 0 ? 'high' : undefined}
+              />
+            ) : (
               <div
-                className={`plate-image ${hasCover ? 'is-natural' : ''}`}
-                style={hasCover ? undefined : { aspectRatio: layout.aspect }}
+                className="w-full h-full flex items-center justify-center text-[var(--rosewater)]"
+                style={{ background: `linear-gradient(135deg, var(--mauve), var(--mantle))` }}
               >
-                {hasCover ? (
-                  <img
-                    src={post.cover_image!.url}
-                    alt={post.cover_image!.alt || displayTitle}
-                    loading={idx < 3 ? 'eager' : 'lazy'}
-                  />
-                ) : (
-                  <div
-                    className="w-full h-full flex items-center justify-center text-[var(--rosewater)]"
-                    style={{
-                      background: `linear-gradient(135deg, var(--mauve), var(--mantle))`,
-                    }}
-                  >
-                    <span className="font-display italic text-3xl opacity-70">
-                      untitled
-                    </span>
-                  </div>
-                )}
-                {post.image_count > 1 && (
-                  <span className="plate-tag-mini">
-                    {post.image_count} plates
-                  </span>
-                )}
-                {post.draft && (
-                  <span className="plate-tag-mini" style={{ left: 18, right: 'auto', background: 'var(--peach)', color: 'var(--crust)' }}>
-                    Sketch
-                  </span>
-                )}
+                <span className="font-display italic text-3xl opacity-70">untitled</span>
               </div>
+            )}
+            {post.image_count > 1 && (
+              <span className="plate-tag-mini">{post.image_count} plates</span>
+            )}
+            {post.draft && (
+              <span className="plate-tag-mini plate-tag-mini--draft">Sketch</span>
+            )}
+            <PlateSigil />
+          </div>
 
-              <div className="plate-caption">
-                <div className="plate-caption-title">{displayTitle}</div>
-                {post.summary && (
-                  <div className="plate-caption-summary">{post.summary}</div>
-                )}
-                <div className="plate-caption-meta">
-                  <span>{formatMonth(post.date)}</span>
-                  <span className="plate-caption-sep" aria-hidden="true">·</span>
-                  <span>{formatYear(post.date)}</span>
-                </div>
-              </div>
+          <div className="plate-caption">
+            <div className="plate-caption-title">{displayTitle}</div>
+            {post.summary && (
+              <div className="plate-caption-summary">{post.summary}</div>
+            )}
+            <div className="plate-caption-meta">
+              <span>{formatMonth(post.date)}</span>
+              <span className="plate-caption-sep" aria-hidden="true">·</span>
+              <span>{formatYear(post.date)}</span>
+            </div>
+          </div>
+        </a>
+
+        {post.tags && post.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mt-3 px-1">
+            {post.tags.slice(0, 4).map(tag => (
+              <span key={tag} className="chip">{tag}</span>
+            ))}
+          </div>
+        )}
+
+        {isAdmin && (
+          <div className="absolute top-3 right-3 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
+            <a
+              href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`}
+              onClick={e => e.stopPropagation()}
+              title="Edit"
+              aria-label={`Edit ${displayTitle}`}
+              className="btn btn--ghost btn--icon btn--sm"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" /></svg>
             </a>
+            <button
+              type="button"
+              onClick={e => { e.preventDefault(); e.stopPropagation(); handleDelete(post.slug, displayTitle); }}
+              disabled={isDeleting}
+              title="Remove"
+              aria-label={`Remove ${displayTitle}`}
+              className="btn btn--danger btn--icon btn--sm"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" /></svg>
+            </button>
+          </div>
+        )}
+      </article>
+    );
+  };
 
+  // ── Blog mode: one writing-first row per post ──────────────────────────
+  const renderRow = (post: Post, idx: number) => {
+    const displayTitle = post.title || formatSlug(post.slug);
+    const isDeleting = deleting === post.slug;
+    const hasCover = !!post.cover_image?.url;
+    const blurb = post.summary || post.excerpt;
+    const stagger = Math.min(idx * 55, 420);
+
+    return (
+      <article
+        key={post.slug}
+        className={`post-row plate-enter ${isDeleting ? 'opacity-40 pointer-events-none' : ''}`}
+        style={{ animationDelay: `${stagger}ms` }}
+      >
+        <a
+          href={`/posts/${encodeURIComponent(post.slug)}`}
+          className="post-row-link group"
+          aria-label={`Read ${displayTitle}`}
+        >
+          <div className="post-row-body">
+            <h2 className="post-row-title">{displayTitle}</h2>
+            <div className="post-row-meta">
+              <span>{formatLongDate(post.date)}</span>
+              <span className="sep" aria-hidden="true">·</span>
+              <span>{post.reading_time} min read</span>
+              {post.draft && (
+                <span className="chip chip-draft post-row-draft">{c.draftShort}</span>
+              )}
+            </div>
+            {blurb && <p className="post-row-excerpt">{blurb}</p>}
             {post.tags && post.tags.length > 0 && (
-              <div className="flex flex-wrap gap-1.5 mt-3 px-1">
+              <div className="post-row-tags">
                 {post.tags.slice(0, 4).map(tag => (
-                  <span key={tag} className="chip">
-                    {tag}
-                  </span>
+                  <span key={tag} className="chip">{tag}</span>
                 ))}
               </div>
             )}
+          </div>
 
-            {isAdmin && (
-              <div className="absolute top-3 right-3 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
-                <a
-                  href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`}
-                  onClick={e => e.stopPropagation()}
-                  title="Edit"
-                  aria-label={`Edit ${displayTitle}`}
-                  className="p-1.5 bg-[var(--mantle)] text-[var(--rosewater)] hover:bg-[var(--blue)] border border-[var(--surface2)] transition-colors"
-                  style={{ borderRadius: 1 }}
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" /></svg>
-                </a>
-                <button
-                  type="button"
-                  onClick={e => { e.preventDefault(); e.stopPropagation(); handleDelete(post.slug, displayTitle); }}
-                  disabled={isDeleting}
-                  title="Remove"
-                  aria-label={`Remove ${displayTitle}`}
-                  className="p-1.5 bg-[var(--mantle)] text-[var(--rosewater)] hover:bg-[var(--red)] border border-[var(--surface2)] transition-colors disabled:opacity-50"
-                  style={{ borderRadius: 1 }}
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" /></svg>
-                </button>
+          {hasCover && (
+            <div className="post-row-thumb">
+              <img
+                src={post.cover_image!.url}
+                alt={post.cover_image!.alt || displayTitle}
+                width={post.cover_image!.w}
+                height={post.cover_image!.h}
+                loading={idx < 4 ? 'eager' : 'lazy'}
+                decoding="async"
+              />
+              <PlateSigil />
+            </div>
+          )}
+        </a>
+
+        {isAdmin && (
+          <div className="absolute top-3 right-3 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
+            <a
+              href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`}
+              onClick={e => e.stopPropagation()}
+              title="Edit"
+              aria-label={`Edit ${displayTitle}`}
+              className="btn btn--ghost btn--icon btn--sm"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" /></svg>
+            </a>
+            <button
+              type="button"
+              onClick={e => { e.preventDefault(); e.stopPropagation(); handleDelete(post.slug, displayTitle); }}
+              disabled={isDeleting}
+              title="Delete"
+              aria-label={`Delete ${displayTitle}`}
+              className="btn btn--danger btn--icon btn--sm"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" /></svg>
+            </button>
+          </div>
+        )}
+      </article>
+    );
+  };
+
+  if (isBlog) {
+    return (
+      <>
+        <div className="post-list">
+          {shown.map((post, idx) => renderRow(post, idx))}
+        </div>
+        {hasMore && (
+          <div
+            ref={sentinelRef}
+            className="mt-12 md:mt-16 flex items-center justify-center text-[var(--subtext0)] font-display italic text-sm tracking-[0.2em] uppercase"
+            aria-hidden="true"
+          >
+            <span className="opacity-60">{c.loadingMore}</span>
+          </div>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div ref={containerRef} className="just-gallery">
+        {rows
+          ? rows.map((row, r) => (
+              <div
+                className="just-row"
+                key={r}
+                style={{ marginBottom: r === rows.length - 1 ? 0 : ROW_GAP }}
+              >
+                {row.map(cell => renderCell(cell, cell.post, cell.idx))}
               </div>
-            )}
-          </article>
-        );
-      })}
-    </div>
-    {hasMore && (
-      <div
-        ref={sentinelRef}
-        className="mt-12 md:mt-16 flex items-center justify-center text-[var(--subtext0)] font-display italic text-sm tracking-[0.2em] uppercase"
-        aria-hidden="true"
-      >
-        <span className="opacity-60">arranging more…</span>
+            ))
+          : (
+            <div className="just-row just-row--fallback">
+              {shown.map((post, idx) => renderCell(null, post, idx))}
+            </div>
+          )}
       </div>
-    )}
+      {hasMore && (
+        <div
+          ref={sentinelRef}
+          className="mt-12 md:mt-16 flex items-center justify-center text-[var(--subtext0)] font-display italic text-sm tracking-[0.2em] uppercase"
+          aria-hidden="true"
+        >
+          <span className="opacity-60">{c.loadingMore}</span>
+        </div>
+      )}
     </>
   );
 }

frontend/src/components/react/Search.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { getPosts } from '../../lib/api';
+import { type SiteMode, copy } from '../../lib/siteMode';
 
 interface Post {
   slug: string;
@@ -27,7 +28,8 @@ function formatDate(date: string) {
   });
 }
 
-export default function Search() {
+export default function Search({ mode = 'atelier' }: { mode?: SiteMode }) {
+  const c = copy(mode);
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
   const [posts, setPosts] = useState<Post[] | null>(null);
@@ -128,15 +130,11 @@ export default function Search() {
       <button
         type="button"
         onClick={() => setOpen(true)}
-        aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
-        title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
-        className="text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors flex items-center gap-2 px-2 py-1 hover:bg-[var(--surface0)]/60 font-display italic"
-        style={{ borderRadius: 1 }}
+        aria-label={`${c.searchAria} (${isMac ? '⌘' : 'Ctrl'}+K)`}
+        className="topbar-control tc-collapse-md kbd-tip-host"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width="18"
-          height="18"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -148,32 +146,34 @@ export default function Search() {
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.3-4.3" />
         </svg>
-        <kbd className="hidden md:inline-flex items-center gap-1 text-[10px] font-mono text-[var(--subtext0)] px-1.5 py-0.5 border border-[var(--surface2)] bg-[var(--surface0)]/60" style={{ borderRadius: 1 }}>
-          <span>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
-        </kbd>
+        <span className="tc-label">Search</span>
+        <span className="kbd-tip" aria-hidden="true">
+          <kbd>{isMac ? '⌘' : 'Ctrl'}</kbd>
+          <kbd>K</kbd>
+        </span>
       </button>
 
       {open && (
         <div
-          className="fixed inset-0 z-[200] flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4"
+          className="search-overlay fixed inset-0 z-[200] flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4"
           role="dialog"
           aria-modal="true"
-          aria-label="Search the catalogue"
+          aria-label={c.searchAria}
           onClick={() => setOpen(false)}
         >
           <div
-            className="absolute inset-0 bg-[var(--crust)]/55 backdrop-blur-md"
+            className="search-backdrop absolute inset-0 bg-[var(--crust)]/55 backdrop-blur-md"
             aria-hidden="true"
           />
           <div
-            className="relative w-full max-w-xl bg-[var(--base)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
+            className="search-panel relative w-full max-w-xl bg-[var(--base)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
             style={{
               borderRadius: 2,
-              boxShadow: '0 30px 60px -20px rgba(20,16,12,0.55), 0 8px 20px -8px rgba(20,16,12,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',
+              boxShadow: '0 30px 60px -20px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',
             }}
             onClick={e => e.stopPropagation()}
           >
-            <div className="flex items-center gap-3 px-4 py-3 border-b border-[var(--surface2)]/60 bg-[var(--surface0)]/40">
+            <div className="search-bar flex items-center gap-3 px-4 py-3 border-b border-[var(--surface2)]/60 bg-[var(--surface0)]/40">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="18"
@@ -196,9 +196,9 @@ export default function Search() {
                 value={query}
                 onChange={e => setQuery(e.target.value)}
                 onKeyDown={onInputKey}
-                placeholder="Search the catalogue…"
+                placeholder={`${c.searchPlaceholder}`}
                 aria-label="Search query"
-                className="flex-1 bg-transparent outline-none text-base text-[var(--text)] placeholder:text-[var(--subtext0)] font-display italic"
+                className="search-input flex-1 bg-transparent outline-none text-base text-[var(--text)] placeholder:text-[var(--subtext0)] font-display italic"
               />
               <kbd className="text-[10px] font-mono text-[var(--subtext0)] px-1.5 py-0.5 border border-[var(--surface2)] bg-[var(--surface0)]/60" style={{ borderRadius: 1 }}>
                 Esc
@@ -207,18 +207,18 @@ export default function Search() {
 
             <div className="flex-1 overflow-y-auto">
               {loading && (
-                <div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">Fetching the catalogue…</div>
+                <div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">{c.searchFetching}</div>
               )}
               {error && (
                 <div className="px-4 py-8 text-center text-sm text-[var(--red)] font-display italic">{error}</div>
               )}
               {!loading && !error && posts && results.length === 0 && (
                 <div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">
-                  {query ? 'No works match.' : 'The catalogue is empty.'}
+                  {query ? c.searchNoMatch : c.searchEmpty}
                 </div>
               )}
               {!loading && !error && results.length > 0 && (
-                <ul ref={listRef} className="py-1">
+                <ul ref={listRef} className="search-list py-1">
                   {results.map((p, i) => {
                     const title = p.title || formatSlug(p.slug);
                     const active = i === activeIdx;
@@ -227,15 +227,20 @@ export default function Search() {
                         key={p.slug}
                         onMouseEnter={() => setActiveIdx(i)}
                         onClick={() => navigate(p.slug)}
-                        className={`px-4 py-3 cursor-pointer border-l-2 transition-colors ${
+                        className={`search-result px-4 py-3 cursor-pointer border-l-2 transition-colors ${
                           active
-                            ? 'bg-[var(--surface0)] border-[var(--mauve)]'
+                            ? 'search-result--active bg-[var(--surface0)] border-[var(--mauve)]'
                             : 'border-transparent hover:bg-[var(--surface0)]/60'
                         }`}
                       >
                         <div className="flex items-baseline justify-between gap-3">
-                          <div className={`font-display italic truncate text-lg leading-tight pr-2 ${active ? 'text-[var(--mauve)]' : 'text-[var(--text)]'}`} style={{ paddingInlineEnd: '0.35em' }}>
-                            {title}
+                          <div className={`font-display italic truncate text-lg leading-tight pr-2 flex items-baseline gap-2 ${active ? 'text-[var(--mauve)]' : 'text-[var(--text)]'}`} style={{ paddingInlineEnd: '0.35em' }}>
+                            <span className="truncate">{title}</span>
+                            {p.draft && (
+                              <span className="chip chip-draft shrink-0 !text-[0.62rem] !py-0">
+                                {c.draftShort}
+                              </span>
+                            )}
                           </div>
                           <time className="text-[10px] font-sans uppercase tracking-[0.18em] text-[var(--subtext0)] shrink-0" dateTime={p.date}>
                             {formatDate(p.date)}
@@ -251,7 +256,7 @@ export default function Search() {
               )}
             </div>
 
-            <div className="flex items-center justify-between px-4 py-2 border-t border-[var(--surface2)]/60 text-[10px] text-[var(--subtext0)] bg-[var(--surface0)]/40 font-display italic">
+            <div className="search-foot flex items-center justify-between px-4 py-2 border-t border-[var(--surface2)]/60 text-[10px] text-[var(--subtext0)] bg-[var(--surface0)]/40 font-display italic">
               <div className="flex items-center gap-3">
                 <span className="flex items-center gap-1">
                   <kbd className="font-mono px-1 border border-[var(--surface2)] bg-[var(--surface0)]/60 not-italic" style={{ borderRadius: 1 }}>↑↓</kbd>

frontend/src/components/react/ThemeSwitcher.tsx

@@ -1,58 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-
-const THEMES = [
-  { value: 'salon', label: 'Salon' },
-  { value: 'salon-noir', label: 'Salon Noir' },
-  { value: 'gothic', label: 'Gothic' },
-];
-
-interface Props {
-  defaultTheme?: string;
-}
-
-export default function ThemeSwitcher({ defaultTheme = 'salon' }: Props) {
-  const [theme, setTheme] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('user-theme') || defaultTheme;
-    }
-    return defaultTheme;
-  });
-  const [toast, setToast] = useState<string | null>(null);
-  const isFirst = useRef(true);
-
-  useEffect(() => {
-    const html = document.documentElement;
-    THEMES.forEach(t => html.classList.remove(t.value));
-    html.classList.add(theme);
-    localStorage.setItem('user-theme', theme);
-
-    if (isFirst.current) {
-      isFirst.current = false;
-      return;
-    }
-    const label = THEMES.find(t => t.value === theme)?.label ?? theme;
-    setToast(`Theme: ${label}`);
-    const id = setTimeout(() => setToast(null), 1200);
-    return () => clearTimeout(id);
-  }, [theme]);
-
-  return (
-    <div className="relative inline-block text-left">
-      <select
-        value={theme}
-        onChange={(e) => setTheme(e.target.value)}
-        aria-label="Theme"
-        className="appearance-none bg-[var(--surface0)]/60 text-[var(--text)] border border-[var(--surface2)] px-3 py-1.5 text-xs uppercase tracking-[0.18em] focus:outline-none focus:border-[var(--mauve)] transition-colors cursor-pointer hover:bg-[var(--surface0)] pr-8 font-display italic"
-        style={{ borderRadius: 1 }}
-      >
-        {THEMES.map(t => (
-          <option key={t.value} value={t.value}>{t.label}</option>
-        ))}
-      </select>
-      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-[var(--subtext0)]">
-        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
-      </div>
-      {toast && <div className="toast" role="status">{toast}</div>}
-    </div>
-  );
-}

frontend/src/components/react/admin/AssetManager.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { getAssets, uploadAsset, deleteAsset as deleteAssetApi, ApiError } from '../../../lib/api';
 import type { Asset } from '../../../lib/types';
+import { confirmDialog } from '../../../lib/confirm';
 
 interface Props {
   mode?: 'manage' | 'select';
@@ -42,7 +43,12 @@ export default function AssetManager({ mode = 'manage', onSelect }: Props) {
   }
 
   async function handleDelete(name: string) {
-    if (!confirm(`Delete "${name}" permanently?`)) return;
+    const ok = await confirmDialog({
+      title: 'Delete asset?',
+      message: `“${name}” will be permanently deleted. Posts referencing it will break.`,
+      confirmLabel: 'Delete',
+    });
+    if (!ok) return;
     try {
       await deleteAssetApi(name);
       showAlert('File deleted.', 'success');
@@ -55,13 +61,13 @@ export default function AssetManager({ mode = 'manage', onSelect }: Props) {
   const isImage = (name: string) => /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(name);
 
   return (
-    <div className="space-y-8">
+    <div className="asset-mgr space-y-8">
       {alert && (
         <div
-          className={`p-4 mb-6 text-sm font-display italic border ${
+          className={`asset-alert p-4 mb-6 text-sm font-display italic border ${
             alert.type === 'success'
-              ? 'bg-[color-mix(in_srgb,var(--green)_18%,transparent)] text-[var(--green)] border-[var(--green)]/40'
-              : 'bg-[color-mix(in_srgb,var(--red)_18%,transparent)] text-[var(--red)] border-[var(--red)]/40'
+              ? 'asset-alert--ok bg-[color-mix(in_srgb,var(--green)_18%,transparent)] text-[var(--green)] border-[var(--green)]/40'
+              : 'asset-alert--err bg-[color-mix(in_srgb,var(--red)_18%,transparent)] text-[var(--red)] border-[var(--red)]/40'
           }`}
           style={{ borderRadius: 2 }}
         >
@@ -71,31 +77,31 @@ export default function AssetManager({ mode = 'manage', onSelect }: Props) {
 
       {/* Upload Zone */}
       <div
-        className="glass p-6 border-dashed border-2 border-[var(--surface2)] hover:border-[var(--mauve)] transition-colors group relative cursor-pointer"
+        className="asset-drop glass p-6 border-dashed border-2 border-[var(--surface2)] hover:border-[var(--mauve)] transition-colors group relative cursor-pointer"
         onClick={() => fileRef.current?.click()}
         onDragOver={e => { e.preventDefault(); e.stopPropagation(); }}
         onDrop={e => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.files.length) handleUpload(e.dataTransfer.files); }}
       >
         <input ref={fileRef} type="file" multiple className="hidden" onChange={e => { if (e.target.files?.length) handleUpload(e.target.files); }} />
-        <div className="text-center py-4">
+        <div className="asset-drop-body text-center py-4">
           <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="mx-auto mb-4 text-[var(--subtext0)] group-hover:text-[var(--mauve)] transition-colors"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
-          <p className="font-display italic text-xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors">Click or drag to upload assets</p>
+          <p className="asset-drop-title font-display italic text-xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors">Click or drag to upload assets</p>
           <p className="font-sans text-xs uppercase tracking-[0.2em] text-[var(--subtext0)] mt-2">Any file type · up to 50 MB</p>
         </div>
       </div>
 
       {/* Grid */}
       {assets.length === 0 ? (
-        <div className="text-center py-20 font-display italic text-[var(--subtext0)]">No assets uploaded yet.</div>
+        <div className="asset-empty text-center py-20 font-display italic text-[var(--subtext0)]">No assets uploaded yet.</div>
       ) : (
-        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        <div className="asset-grid grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
           {assets.map(asset => (
             <div
               key={asset.name}
-              className="group relative aspect-square overflow-hidden bg-[var(--surface0)] border border-[var(--surface2)]/60 hover:border-[var(--mauve)]/60 transition-colors shadow-md flex flex-col"
+              className="asset-tile group relative aspect-square overflow-hidden bg-[var(--surface0)] border border-[var(--surface2)]/60 hover:border-[var(--mauve)]/60 transition-colors shadow-md flex flex-col"
               style={{ borderRadius: 2 }}
             >
-              <div className="flex-1 overflow-hidden bg-[var(--mantle)] relative cursor-pointer">
+              <div className="asset-thumb flex-1 overflow-hidden bg-[var(--mantle)] relative cursor-pointer">
                 {isImage(asset.name) ? (
                   <img src={asset.url} className="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity" alt={asset.name} />
                 ) : (
@@ -105,12 +111,11 @@ export default function AssetManager({ mode = 'manage', onSelect }: Props) {
                   </div>
                 )}
                 {/* Hover overlay */}
-                <div className="absolute inset-0 bg-[var(--crust)]/75 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
+                <div className="asset-actions absolute inset-0 bg-[var(--crust)]/75 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
                   {mode === 'select' && onSelect && (
                     <button
                       onClick={() => onSelect(asset)}
-                      className="bg-[var(--mauve)] hover:bg-[var(--red)] text-[var(--rosewater)] px-4 py-2 text-sm font-display italic font-medium transition-colors shadow-lg inline-flex items-center gap-1.5"
-                      style={{ borderRadius: 1 }}
+                      className="btn btn--primary btn--sm"
                     >
                       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                       Insert
@@ -118,14 +123,13 @@ export default function AssetManager({ mode = 'manage', onSelect }: Props) {
                   )}
                   <button
                     onClick={() => handleDelete(asset.name)}
-                    className="bg-[var(--red)]/80 hover:bg-[var(--red)] text-[var(--rosewater)] p-2.5 transition-colors shadow-lg"
-                    style={{ borderRadius: 1 }}
+                    className="btn btn--danger btn--icon btn--sm"
                   >
                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                   </button>
                 </div>
               </div>
-              <div className="p-2 bg-[var(--surface0)] text-[10px] truncate border-t border-[var(--surface2)]/50 text-[var(--subtext1)] font-mono">{asset.name}</div>
+              <div className="asset-name p-2 bg-[var(--surface0)] text-[10px] truncate border-t border-[var(--surface2)]/50 text-[var(--subtext1)] font-mono">{asset.name}</div>
             </div>
           ))}
         </div>

frontend/src/components/react/admin/Editor.tsx

@@ -1,126 +1,83 @@
-import { useState, useEffect, useRef, useCallback, lazy, Suspense } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { EditorView, keymap, placeholder as cmPlaceholder } from '@codemirror/view';
-import { EditorState, Compartment } from '@codemirror/state';
+import { EditorState } from '@codemirror/state';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { search, searchKeymap } from '@codemirror/search';
 import { closeBrackets } from '@codemirror/autocomplete';
-import { getPost, savePost, deletePost, getAssets, uploadAsset, ApiError } from '../../../lib/api';
 import type { Asset } from '../../../lib/types';
+import { salonTheme, vimCompartment } from './editor/codemirror';
+import { useAssetCache } from './editor/useAssetCache';
+import { useLivePreview } from './editor/useLivePreview';
+import { useImageUpload } from './editor/useImageUpload';
+import { useAssetAutocomplete } from './editor/useAssetAutocomplete';
+import { usePostMeta } from './editor/usePostMeta';
+import { type SiteMode, copy } from '../../../lib/siteMode';
 
 const AssetManager = lazy(() => import('./AssetManager'));
 
 interface Props {
   editSlug?: string;
+  mode?: SiteMode;
 }
 
-const salonTheme = EditorView.theme({
-  '&': {
-    backgroundColor: 'var(--base)',
-    color: 'var(--text)',
-    border: '1px solid var(--surface2)',
-    borderRadius: '2px',
-    fontSize: '14px',
-    boxShadow: 'inset 0 0 0 1px color-mix(in srgb, var(--surface1) 40%, transparent)',
-  },
-  '.cm-content': {
-    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-    padding: '1rem',
-    caretColor: 'var(--mauve)',
-    color: 'var(--text)',
-  },
-  '.cm-cursor': { borderLeftColor: 'var(--mauve)', borderLeftWidth: '2px' },
-  '.cm-selectionBackground': { backgroundColor: 'color-mix(in srgb, var(--mauve) 25%, transparent) !important' },
-  '&.cm-focused .cm-selectionBackground': { backgroundColor: 'color-mix(in srgb, var(--mauve) 30%, transparent) !important' },
-  '.cm-activeLine': { backgroundColor: 'color-mix(in srgb, var(--surface0) 55%, transparent)' },
-  '.cm-gutters': {
-    backgroundColor: 'var(--surface0)',
-    color: 'var(--subtext0)',
-    border: 'none',
-    borderRight: '1px solid var(--surface2)',
-    fontFamily: 'var(--font-display)',
-    fontStyle: 'italic',
-  },
-  '.cm-activeLineGutter': { backgroundColor: 'color-mix(in srgb, var(--mauve) 12%, transparent)', color: 'var(--mauve)' },
-  '.cm-panels': {
-    backgroundColor: 'var(--surface0)',
-    color: 'var(--text)',
-    borderTop: '1px solid var(--surface2)',
-  },
-  '.cm-searchMatch': { backgroundColor: 'color-mix(in srgb, var(--yellow) 45%, transparent)' },
-  '.cm-searchMatch-selected': { backgroundColor: 'color-mix(in srgb, var(--peach) 55%, transparent)' },
-  '.cm-fat-cursor': {
-    backgroundColor: 'var(--mauve) !important',
-    color: 'var(--rosewater) !important',
-  },
-  '&:not(.cm-focused) .cm-fat-cursor': {
-    outline: '1px solid var(--mauve)',
-    backgroundColor: 'transparent !important',
-  },
-}, { dark: false });
-
-// Compartment for hot-swapping vim mode without recreating the editor
-const vimCompartment = new Compartment();
-
-function clientSlugify(s: string): string {
-  return s
-    .toLowerCase()
-    .normalize('NFD')
-    .replace(/[̀-ͯ]/g, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-}
-
-export default function Editor({ editSlug }: Props) {
+export default function Editor({ editSlug, mode = 'atelier' }: Props) {
+  const c = copy(mode);
   const editorRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
-  const previewRef = useRef<HTMLDivElement>(null);
-  const previewTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const updatePreviewRef = useRef<() => void>(() => {});
-  const uploadFnRef = useRef<(files: File[], insertAt?: number) => void>(() => {});
-  const renderMarkdownRef = useRef<((src: string) => string) | null>(null);
-  const today = new Date().toISOString().slice(0, 10);
-  const [title, setTitle] = useState('');
-  const [slug, setSlug] = useState(editSlug || '');
-  const [slugTouched, setSlugTouched] = useState(!!editSlug);
-  const [date, setDate] = useState(today);
-  const [summary, setSummary] = useState('');
-  const [tagsInput, setTagsInput] = useState('');
-  const [draft, setDraft] = useState(false);
-  const [originalSlug, setOriginalSlug] = useState(editSlug || '');
-  const [alert, setAlert] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
-  const [showModal, setShowModal] = useState(false);
-  const [showPreview, setShowPreview] = useState(false);
-  const [mobileView, setMobileView] = useState<'edit' | 'preview'>('edit');
   const [vimEnabled, setVimEnabled] = useState(false);
-  const [showAutocomplete, setShowAutocomplete] = useState(false);
-  const [autocompleteAssets, setAutocompleteAssets] = useState<Asset[]>([]);
-  const [autocompletePos, setAutocompletePos] = useState({ top: 0, left: 0 });
-  const [isDragging, setIsDragging] = useState(false);
-  const [uploadingCount, setUploadingCount] = useState(0);
-  const dragDepthRef = useRef(0);
+  const [showModal, setShowModal] = useState(false);
 
-  function showAlertMsg(msg: string, type: 'success' | 'error') {
-    setAlert({ msg, type });
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-    setTimeout(() => setAlert(null), 5000);
-  }
+  const getView = useCallback(() => viewRef.current, []);
+  const getContent = useCallback(() => viewRef.current?.state.doc.toString() || '', []);
+  const setContent = useCallback((s: string) => {
+    const v = viewRef.current;
+    if (v) v.dispatch({ changes: { from: 0, to: v.state.doc.length, insert: s } });
+  }, []);
 
-  const updatePreview = useCallback(async () => {
-    if (!showPreview || !viewRef.current || !previewRef.current) return;
-    if (!renderMarkdownRef.current) {
-      const mod = await import('../../../lib/markdown');
-      renderMarkdownRef.current = mod.renderMarkdown;
-    }
-    const content = viewRef.current.state.doc.toString();
-    previewRef.current.innerHTML = renderMarkdownRef.current(content);
-  }, [showPreview]);
+  const assetCache = useAssetCache();
+  const preview = useLivePreview({ getView });
+  const upload = useImageUpload({ getView, prependAssets: assetCache.prepend });
+  const autocomplete = useAssetAutocomplete({
+    getView,
+    editorRef,
+    getCachedAssets: assetCache.getCachedAssets,
+  });
+  const meta = usePostMeta({ editSlug, getContent, setContent, mode });
 
-  useEffect(() => { updatePreviewRef.current = updatePreview; }, [updatePreview]);
-  useEffect(() => { uploadFnRef.current = uploadFilesAndInsert; });
+  const {
+    title, setTitle, slug, setSlug, setSlugTouched, date, setDate,
+    summary, setSummary, tagsInput, setTagsInput, draft, setDraft,
+    originalSlug, handleSave, handleDelete,
+  } = meta;
+  const { showPreview, setShowPreview, mobileView, setMobileView, previewRef } = preview;
+  const { isDragging, uploadingCount, setIsDragging, dragDepthRef, uploadFilesAndInsert } = upload;
+  const {
+    showAutocomplete, setShowAutocomplete, autocompleteAssets, autocompletePos,
+    triggerAutocomplete, insertAssetMarkdown,
+  } = autocomplete;
 
-  // Initialize CodeMirror once
+  // Latest handler closures for the (once-created) CodeMirror listeners —
+  // same stale-closure-avoidance pattern the original component used.
+  const cmRef = useRef<{
+    schedulePreview: () => void;
+    triggerAutocomplete: (v: EditorView) => void;
+    closeAutocomplete: () => void;
+    upload: (files: File[], at?: number) => void;
+    setDragging: (b: boolean) => void;
+  }>(null!);
+  useEffect(() => {
+    cmRef.current = {
+      schedulePreview: preview.schedulePreview,
+      triggerAutocomplete,
+      closeAutocomplete: () => setShowAutocomplete(false),
+      upload: uploadFilesAndInsert,
+      setDragging: setIsDragging,
+    };
+  });
+
+  // Initialize CodeMirror once.
   useEffect(() => {
     if (!editorRef.current || viewRef.current) return;
 
@@ -137,23 +94,22 @@ export default function Editor({ editSlug }: Props) {
         cmPlaceholder('# A title for the work\n\n![alt text](/uploads/your-image.jpg "optional caption")\n\nNotes, context, materials...'),
         EditorView.updateListener.of(update => {
           if (!update.docChanged) return;
-          if (previewTimerRef.current) clearTimeout(previewTimerRef.current);
-          previewTimerRef.current = setTimeout(() => updatePreviewRef.current(), 300);
+          cmRef.current.schedulePreview();
           const pos = update.state.selection.main.head;
           const line = update.state.doc.lineAt(pos);
           const textBefore = line.text.slice(0, pos - line.from);
           const lastChar = textBefore.slice(-1);
           if (lastChar === '/' || lastChar === '!') {
-            triggerAutocomplete(update.view);
+            cmRef.current.triggerAutocomplete(update.view);
           } else if (lastChar === ' ' || textBefore.length === 0) {
-            setShowAutocomplete(false);
+            cmRef.current.closeAutocomplete();
           }
         }),
         EditorView.domEventHandlers({
           dragenter(event) {
             if (!event.dataTransfer?.types.includes('Files')) return false;
             dragDepthRef.current += 1;
-            setIsDragging(true);
+            cmRef.current.setDragging(true);
             return false;
           },
           dragover(event) {
@@ -163,7 +119,7 @@ export default function Editor({ editSlug }: Props) {
           },
           dragleave() {
             dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
-            if (dragDepthRef.current === 0) setIsDragging(false);
+            if (dragDepthRef.current === 0) cmRef.current.setDragging(false);
             return false;
           },
           drop(event, view) {
@@ -171,9 +127,9 @@ export default function Editor({ editSlug }: Props) {
             if (!files || files.length === 0) return false;
             event.preventDefault();
             dragDepthRef.current = 0;
-            setIsDragging(false);
+            cmRef.current.setDragging(false);
             const pos = view.posAtCoords({ x: event.clientX, y: event.clientY }) ?? view.state.selection.main.head;
-            uploadFnRef.current(Array.from(files), pos);
+            cmRef.current.upload(Array.from(files), pos);
             return true;
           },
           paste(event, view) {
@@ -188,7 +144,7 @@ export default function Editor({ editSlug }: Props) {
             }
             if (imageFiles.length === 0) return false;
             event.preventDefault();
-            uploadFnRef.current(imageFiles, view.state.selection.main.head);
+            cmRef.current.upload(imageFiles, view.state.selection.main.head);
             return true;
           },
         }),
@@ -199,9 +155,9 @@ export default function Editor({ editSlug }: Props) {
     viewRef.current = view;
 
     return () => { view.destroy(); viewRef.current = null; };
-  }, []);
+  }, [dragDepthRef]);
 
-  // Hot-swap vim mode via compartment reconfiguration; lazy-load vim module
+  // Hot-swap vim mode via compartment reconfiguration; lazy-load vim module.
   useEffect(() => {
     if (!viewRef.current) return;
     if (!vimEnabled) {
@@ -216,178 +172,27 @@ export default function Editor({ editSlug }: Props) {
     return () => { cancelled = true; };
   }, [vimEnabled]);
 
-  // Load existing post for editing
-  useEffect(() => {
-    if (!editSlug) return;
-    getPost(editSlug).then(post => {
-      if (post.title) setTitle(post.title);
-      if (post.summary) setSummary(post.summary);
-      if (post.date) setDate(post.date);
-      if (post.tags?.length) setTagsInput(post.tags.join(', '));
-      setDraft(!!post.draft);
-      if (post.content && viewRef.current) {
-        viewRef.current.dispatch({
-          changes: { from: 0, to: viewRef.current.state.doc.length, insert: post.content },
-        });
-      }
-    }).catch(() => showAlertMsg('Failed to load post.', 'error'));
-  }, [editSlug]);
-
-  // Auto-derive slug from title until user edits the slug field
-  useEffect(() => {
-    if (slugTouched) return;
-    setSlug(clientSlugify(title));
-  }, [title, slugTouched]);
-
-  useEffect(() => {
-    if (showPreview) updatePreview();
-  }, [showPreview, updatePreview]);
-
-  async function triggerAutocomplete(view: EditorView) {
-    try {
-      const assets = await getAssets();
-      setAutocompleteAssets(assets.slice(0, 8));
-      const pos = view.state.selection.main.head;
-      const coords = view.coordsAtPos(pos);
-      if (coords) {
-        const editorRect = editorRef.current?.getBoundingClientRect();
-        if (editorRect) {
-          setAutocompletePos({
-            top: coords.bottom - editorRect.top + 4,
-            left: coords.left - editorRect.left,
-          });
-        }
-      }
-      setShowAutocomplete(true);
-    } catch { /* ignore */ }
-  }
-
-  function insertAssetMarkdown(asset: Asset) {
-    const view = viewRef.current;
-    if (!view) return;
-    const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
-    const md = isImage ? `![${asset.name}](${asset.url})` : `[${asset.name}](${asset.url})`;
-
-    const pos = view.state.selection.main.head;
-    const line = view.state.doc.lineAt(pos);
-    const textBefore = line.text.slice(0, pos - line.from);
-    const triggerIdx = Math.max(textBefore.lastIndexOf('/'), textBefore.lastIndexOf('!'));
-
-    if (triggerIdx !== -1) {
-      const from = line.from + triggerIdx;
-      view.dispatch({ changes: { from, to: pos, insert: md } });
-    } else {
-      view.dispatch({ changes: { from: pos, insert: md } });
-    }
-    view.focus();
-    setShowAutocomplete(false);
-  }
-
-  async function uploadFilesAndInsert(files: File[], insertAt?: number) {
-    const view = viewRef.current;
-    if (!view || files.length === 0) return;
-    const images = files.filter(f => f.type.startsWith('image/'));
-    if (images.length === 0) {
-      showAlertMsg('Only image files can be dropped here.', 'error');
-      return;
-    }
-    setUploadingCount(c => c + images.length);
-    let pos = typeof insertAt === 'number' ? insertAt : view.state.selection.main.head;
-    for (const file of images) {
-      try {
-        const asset = await uploadAsset(file);
-        const md = `![${asset.name}](${asset.url})`;
-        const line = view.state.doc.lineAt(pos);
-        const atLineEnd = pos === line.to;
-        const insertText = atLineEnd ? `\n\n${md}\n` : `${md}\n\n`;
-        view.dispatch({ changes: { from: pos, insert: insertText } });
-        pos += insertText.length;
-      } catch (e) {
-        showAlertMsg(e instanceof ApiError ? `Upload failed: ${e.message}` : 'Upload failed.', 'error');
-      } finally {
-        setUploadingCount(c => Math.max(0, c - 1));
-      }
-    }
-    view.focus();
-  }
-
   function handleAssetSelect(asset: Asset) {
     insertAssetMarkdown(asset);
     setShowModal(false);
   }
 
-  async function handleSave() {
-    const content = viewRef.current?.state.doc.toString() || '';
-    if (!title.trim() || !slug || !content) {
-      showAlertMsg('Title, slug, and body are required.', 'error');
-      return;
-    }
-    if (!/!\[[^\]]*\]\([^)]+\)/.test(content)) {
-      showAlertMsg('Add at least one image before saving — drag, paste, or use the Add image button.', 'error');
-      return;
-    }
-    const tags = tagsInput
-      .split(',')
-      .map(t => t.trim())
-      .filter(Boolean);
-    try {
-      const saved = await savePost({
-        slug,
-        old_slug: originalSlug || null,
-        title: title.trim(),
-        date,
-        summary: summary || null,
-        tags,
-        draft,
-        content,
-      });
-      showAlertMsg('Post saved!', 'success');
-      if (saved?.slug && saved.slug !== slug) {
-        setSlug(saved.slug);
-        setSlugTouched(true);
-      }
-      setOriginalSlug(saved?.slug ?? slug);
-    } catch (e) {
-      showAlertMsg(e instanceof ApiError ? `Error: ${e.message}` : 'Failed to connect to server.', 'error');
-    }
+  function closeAssetModal() {
+    assetCache.invalidate();
+    setShowModal(false);
   }
 
-  async function handleDelete() {
-    const target = originalSlug || slug;
-    if (!confirm(`Remove work "${target}" from the catalogue permanently?`)) return;
-    try {
-      await deletePost(target);
-      window.location.href = '/admin';
-    } catch {
-      showAlertMsg('Error deleting post.', 'error');
-    }
-  }
-
-  useEffect(() => {
-    if (!showAutocomplete) return;
-    const handler = () => setShowAutocomplete(false);
-    window.addEventListener('click', handler);
-    return () => window.removeEventListener('click', handler);
-  }, [showAutocomplete]);
-
   return (
     <>
-      {alert && (
-        <div className={`p-4 rounded-lg mb-6 text-sm font-semibold text-center backdrop-blur-sm shadow-lg ${
-          alert.type === 'success' ? 'bg-green/15 border border-green/30' : 'bg-red/15 border border-red/30'
-        }`} style={{ color: 'var(--text)' }}>
-          {alert.msg}
-        </div>
-      )}
 
       {/* Actions bar */}
       <div className="flex flex-wrap gap-4 mb-6">
         {originalSlug && (
-          <button onClick={handleDelete} className="btn-ghost py-3 px-6 text-[var(--red)] border-[var(--red)]/40 hover:bg-[var(--red)]/10 hover:border-[var(--red)] hover:text-[var(--red)]">
+          <button onClick={handleDelete} className="btn btn--danger">
             Remove
           </button>
         )}
-        <button onClick={handleSave} className="btn-stamp py-3 px-8 whitespace-nowrap">
+        <button onClick={handleSave} className="btn btn--primary">
           Save work
         </button>
         {originalSlug && (
@@ -395,7 +200,7 @@ export default function Editor({ editSlug }: Props) {
             href={`/posts/${encodeURIComponent(originalSlug)}`}
             target="_blank"
             rel="noreferrer"
-            className="btn-ghost py-3 px-6 inline-flex items-center justify-center gap-2 whitespace-nowrap"
+            className="btn btn--ghost"
           >
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
             View work
@@ -413,7 +218,7 @@ export default function Editor({ editSlug }: Props) {
               value={title}
               onChange={e => setTitle(e.target.value)}
               required
-              placeholder="Untitled (charcoal on paper)"
+              placeholder={c.editorTitlePh}
               className="field-input"
             />
           </div>
@@ -431,14 +236,14 @@ export default function Editor({ editSlug }: Props) {
         {/* Slug */}
         <div>
           <label className="field-label">
-            Slug <span className="normal-case tracking-normal text-[var(--overlay0)] italic font-display">— auto-derived from title</span>
+            Slug <span className="slug-hint normal-case tracking-normal text-[var(--overlay0)] italic font-display">— auto-derived from title</span>
           </label>
           <input
             type="text"
             value={slug}
             onChange={e => { setSlug(e.target.value); setSlugTouched(true); }}
             required
-            placeholder="untitled-charcoal-on-paper"
+            placeholder={c.editorSlugPh}
             className="field-input font-mono"
           />
         </div>
@@ -451,7 +256,7 @@ export default function Editor({ editSlug }: Props) {
               type="text"
               value={tagsInput}
               onChange={e => setTagsInput(e.target.value)}
-              placeholder="oil, paper, 2026, study"
+              placeholder={c.editorTagsPh}
               className="field-input"
             />
           </div>
@@ -462,18 +267,18 @@ export default function Editor({ editSlug }: Props) {
               onChange={e => setDraft(e.target.checked)}
               className="accent-[var(--peach)]"
             />
-            <span className="text-sm font-display italic text-[var(--subtext1)]">Sketch (draft)</span>
+            <span className="text-sm font-display italic text-[var(--subtext1)]">{c.editorDraftLabel}</span>
           </label>
         </div>
 
         {/* Summary */}
         <div>
-          <label className="field-label">Caption (optional)</label>
+          <label className="field-label">{c.editorSummaryLabel}</label>
           <textarea
             value={summary}
             onChange={e => setSummary(e.target.value)}
             rows={2}
-            placeholder="A short caption for the catalogue index..."
+            placeholder={c.editorSummaryPh}
             className="field-input resize-none"
           />
         </div>
@@ -485,36 +290,27 @@ export default function Editor({ editSlug }: Props) {
               Drag, paste, or click <span className="text-[var(--mauve)]">Add image</span> to insert. At least one image is required.
             </label>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2 w-full md:w-auto">
             <button
               type="button"
               onClick={() => setVimEnabled(v => !v)}
-              className={`text-xs px-3 py-1.5 border transition-colors font-mono ${
-                vimEnabled
-                  ? 'bg-[var(--mauve)]/20 text-[var(--mauve)] border-[var(--mauve)]/30'
-                  : 'bg-[var(--surface0)] text-[var(--subtext0)] border-[var(--surface2)] hover:text-[var(--text)]'
-              }`}
-              style={{ borderRadius: 2 }}
-              title={vimEnabled ? 'Vim mode ON' : 'Vim mode OFF'}
+              className={`btn btn--ghost btn--sm vim-toggle${vimEnabled ? ' is-active' : ''}`}
+              aria-pressed={vimEnabled}
+              title={vimEnabled ? 'Vim mode ON — click to disable' : 'Vim mode OFF — click to enable'}
             >
-              {vimEnabled ? 'VIM' : 'vim'}
+              {vimEnabled ? 'Vim on' : 'Vim off'}
             </button>
             <button
               type="button"
               onClick={() => setShowPreview(p => !p)}
-              className={`text-xs px-3 py-1.5 border transition-colors ${
-                showPreview
-                  ? 'bg-[var(--blue)]/20 text-[var(--blue)] border-[var(--blue)]/30'
-                  : 'bg-[var(--surface0)] text-[var(--subtext0)] border-[var(--surface2)] hover:text-[var(--text)]'
-              }`}
-              style={{ borderRadius: 2 }}
+              className={`btn btn--ghost btn--sm flex-1 md:flex-none${showPreview ? ' is-active' : ''}`}
             >
               {showPreview ? 'Hide Preview' : 'Show Preview'}
             </button>
             <button
               type="button"
               onClick={() => setShowModal(true)}
-              className="btn-stamp text-sm py-1.5 px-4"
+              className="btn btn--primary btn--sm flex-1 md:flex-none"
               title="Insert an image — also: drag an image into the editor, or paste from clipboard"
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
@@ -531,11 +327,7 @@ export default function Editor({ editSlug }: Props) {
               role="tab"
               aria-selected={mobileView === 'edit'}
               onClick={() => setMobileView('edit')}
-              className={`flex-1 text-xs px-3 py-2 rounded border transition-colors ${
-                mobileView === 'edit'
-                  ? 'bg-blue/20 text-blue border-blue/30'
-                  : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
-              }`}
+              className={`btn btn--ghost btn--sm flex-1${mobileView === 'edit' ? ' is-active' : ''}`}
             >
               Edit
             </button>
@@ -544,11 +336,7 @@ export default function Editor({ editSlug }: Props) {
               role="tab"
               aria-selected={mobileView === 'preview'}
               onClick={() => setMobileView('preview')}
-              className={`flex-1 text-xs px-3 py-2 rounded border transition-colors ${
-                mobileView === 'preview'
-                  ? 'bg-blue/20 text-blue border-blue/30'
-                  : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
-              }`}
+              className={`btn btn--ghost btn--sm flex-1${mobileView === 'preview' ? ' is-active' : ''}`}
             >
               Preview
             </button>
@@ -647,7 +435,7 @@ export default function Editor({ editSlug }: Props) {
                 <h2 className="font-display italic text-2xl md:text-3xl text-[var(--text)] leading-tight">Add image</h2>
                 <p className="text-xs text-[var(--subtext0)] font-display italic mt-1">Click an image to insert it. Drag new files in to upload.</p>
               </div>
-              <button onClick={() => setShowModal(false)} className="p-2 text-[var(--subtext0)] hover:text-[var(--red)] transition-colors">
+              <button onClick={closeAssetModal} className="btn btn--ghost btn--icon btn--sm">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
               </button>
             </header>

frontend/src/components/react/admin/Inbox.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { listMessages, deleteMessage, ApiError } from '../../../lib/api';
 import type { Message } from '../../../lib/types';
+import { confirmDialog, notify } from '../../../lib/confirm';
 
 export default function Inbox() {
   const [messages, setMessages] = useState<Message[] | null>(null);
@@ -23,12 +24,17 @@ export default function Inbox() {
   }
 
   async function remove(id: string) {
-    if (!confirm('Delete this message? This cannot be undone.')) return;
+    const ok = await confirmDialog({
+      title: 'Delete this message?',
+      message: 'This cannot be undone.',
+      confirmLabel: 'Delete',
+    });
+    if (!ok) return;
     try {
       await deleteMessage(id);
       setMessages(prev => (prev ?? []).filter(m => m.id !== id));
     } catch (e) {
-      alert(e instanceof ApiError ? e.message : 'Failed to delete.');
+      notify(e instanceof ApiError ? e.message : 'Failed to delete.');
     }
   }
 
@@ -120,7 +126,7 @@ export default function Inbox() {
                   {m.email && (
                     <a
                       href={`mailto:${m.email}${m.subject ? `?subject=${encodeURIComponent('Re: ' + m.subject)}` : ''}`}
-                      className="chip chip-accent uppercase"
+                      className="btn btn--ghost btn--sm"
                     >
                       Reply
                     </a>
@@ -128,7 +134,7 @@ export default function Inbox() {
                   <button
                     type="button"
                     onClick={() => remove(m.id)}
-                    className="chip text-[var(--red)]"
+                    className="btn btn--danger btn--sm"
                   >
                     Delete
                   </button>

frontend/src/components/react/admin/Login.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { login, ApiError } from '../../../lib/api';
 import { useAuth } from '../../../stores/auth';
+import { type SiteMode, copy } from '../../../lib/siteMode';
 
-export default function Login() {
+export default function Login({ mode = 'atelier' }: { mode?: SiteMode }) {
+  const c = copy(mode);
   const [value, setValue] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
@@ -29,8 +31,8 @@ export default function Login() {
   }
 
   return (
-    <div className="max-w-md mx-auto mt-16">
-      <div className="glass p-10">
+    <div className="max-w-md mx-auto mt-10 md:mt-20 px-1">
+      <div className="glass p-7 sm:p-10">
         <div className="font-display italic text-[var(--subtext0)] text-xs tracking-[0.3em] uppercase mb-3 text-center">
           Artist's entrance
         </div>
@@ -43,7 +45,7 @@ export default function Login() {
         <p className="text-[var(--subtext1)] mb-8 text-center font-display italic">
           Present your token to enter the back room.
         </p>
-        <form onSubmit={handleSubmit} className="space-y-6">
+        <form onSubmit={handleSubmit} className="space-y-6" noValidate>
           <div>
             <label htmlFor="token" className="field-label">Admin token</label>
             <input
@@ -53,24 +55,36 @@ export default function Login() {
               value={value}
               onChange={e => setValue(e.target.value)}
               autoComplete="current-password"
+              aria-invalid={error ? true : undefined}
+              aria-describedby={error ? 'login-error' : undefined}
               className="field-input font-mono tracking-widest"
               placeholder="••••••••••••"
             />
           </div>
           {error && (
-            <p className="text-sm text-[var(--red)] bg-[var(--red)]/10 border border-[var(--red)]/30 px-3 py-2 font-display italic">
+            <p
+              id="login-error"
+              role="alert"
+              className="text-sm text-[var(--red)] bg-[var(--red)]/10 border border-[var(--red)]/30 px-3 py-2 font-display italic"
+            >
               {error}
             </p>
           )}
           <button
             type="submit"
             disabled={busy}
-            className="btn-stamp w-full justify-center disabled:opacity-60 disabled:cursor-not-allowed"
+            className="btn btn--primary btn--block btn--lg"
           >
             {busy ? 'Unlocking…' : 'Enter'}
           </button>
         </form>
       </div>
+      <div className="text-center mt-6">
+        <a href="/" className="back-link">
+          <span className="bl-arrow" aria-hidden="true">←</span>
+          {c.adminBack}
+        </a>
+      </div>
     </div>
   );
 }

frontend/src/components/react/admin/Settings.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { getConfig, updateConfig, ApiError } from '../../../lib/api';
+import { notify } from '../../../lib/confirm';
 import type { SiteConfig, ContactLink } from '../../../lib/types';
 
 const CONTACT_KINDS: { value: string; label: string; placeholder: string }[] = [
@@ -13,8 +14,6 @@ const CONTACT_KINDS: { value: string; label: string; placeholder: string }[] = [
 
 export default function Settings() {
   const [config, setConfig] = useState<Partial<SiteConfig>>({});
-  const [alert, setAlert] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
-
   useEffect(() => {
     getConfig()
       .then(setConfig)
@@ -22,8 +21,7 @@ export default function Settings() {
   }, []);
 
   function showAlert(msg: string, type: 'success' | 'error') {
-    setAlert({ msg, type });
-    setTimeout(() => setAlert(null), 5000);
+    notify(msg, type);
   }
 
   function update<K extends keyof SiteConfig>(key: K, value: SiteConfig[K]) {
@@ -62,19 +60,6 @@ export default function Settings() {
 
   return (
     <form onSubmit={handleSubmit} className="space-y-10">
-      {alert && (
-        <div
-          className={`p-4 text-sm font-display italic text-center border ${
-            alert.type === 'success'
-              ? 'bg-[var(--green)]/15 text-[var(--green)] border-[var(--green)]/30'
-              : 'bg-[var(--red)]/15 text-[var(--red)] border-[var(--red)]/30'
-          }`}
-          style={{ borderRadius: 1 }}
-        >
-          {alert.msg}
-        </div>
-      )}
-
       <section className="space-y-6">
         <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--mauve)] pl-4">Identity</h2>
         <div className="grid md:grid-cols-2 gap-6">
@@ -98,8 +83,10 @@ export default function Settings() {
             <option value="salon">Salon (parchment, default)</option>
             <option value="salon-noir">Salon Noir (black gallery wall)</option>
             <option value="gothic">Gothic (cathedral nightfall)</option>
+            <option value="breakcore">Breakcore (Y2K rot + neon glitch)</option>
+            <option value="cybersigil">Cybersigil (dark frostbite + glitch)</option>
           </select>
-          <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">All three are tuned for the gallery aesthetic. Gothic leans into deep violet-black with cathedral indigo and blood-crimson accents.</p>
+          <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Salon trio tuned for the gallery aesthetic. Breakcore swaps that for early-2000s web rot — hot magenta on CRT violet, acid green, scanline noise. Cybersigil is the moody cut — near-black ground, ice-cyan barbed sigil linework, bruised-magenta on contact, lingering chromatic glitch.</p>
         </div>
         <div>
           <label className="field-label">Custom CSS</label>
@@ -202,7 +189,7 @@ export default function Settings() {
           <button
             type="button"
             onClick={addContactLink}
-            className="chip chip-accent uppercase"
+            className="btn btn--ghost btn--sm"
           >
             + Add contact link
           </button>
@@ -214,7 +201,7 @@ export default function Settings() {
         <Field label="Footer text" value={config.footer || ''} onChange={v => update('footer', v)} />
       </section>
 
-      <button type="submit" className="btn-stamp">
+      <button type="submit" className="btn btn--primary">
         Save site settings
       </button>
     </form>

frontend/src/components/react/admin/editor/codemirror.ts

@@ -0,0 +1,72 @@
+import { EditorView } from '@codemirror/view';
+import { Compartment } from '@codemirror/state';
+
+// Salon-themed CodeMirror look. Static — defined once at module load.
+export const salonTheme = EditorView.theme(
+  {
+    '&': {
+      backgroundColor: 'var(--base)',
+      color: 'var(--text)',
+      border: '1px solid var(--surface2)',
+      borderRadius: '2px',
+      fontSize: '14px',
+      boxShadow: 'inset 0 0 0 1px color-mix(in srgb, var(--surface1) 40%, transparent)',
+    },
+    '.cm-content': {
+      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+      padding: '1rem',
+      caretColor: 'var(--mauve)',
+      color: 'var(--text)',
+    },
+    '.cm-cursor': { borderLeftColor: 'var(--mauve)', borderLeftWidth: '2px' },
+    '.cm-selectionBackground': {
+      backgroundColor: 'color-mix(in srgb, var(--mauve) 25%, transparent) !important',
+    },
+    '&.cm-focused .cm-selectionBackground': {
+      backgroundColor: 'color-mix(in srgb, var(--mauve) 30%, transparent) !important',
+    },
+    '.cm-activeLine': { backgroundColor: 'color-mix(in srgb, var(--surface0) 55%, transparent)' },
+    '.cm-gutters': {
+      backgroundColor: 'var(--surface0)',
+      color: 'var(--subtext0)',
+      border: 'none',
+      borderRight: '1px solid var(--surface2)',
+      fontFamily: 'var(--font-display)',
+      fontStyle: 'italic',
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: 'color-mix(in srgb, var(--mauve) 12%, transparent)',
+      color: 'var(--mauve)',
+    },
+    '.cm-panels': {
+      backgroundColor: 'var(--surface0)',
+      color: 'var(--text)',
+      borderTop: '1px solid var(--surface2)',
+    },
+    '.cm-searchMatch': { backgroundColor: 'color-mix(in srgb, var(--yellow) 45%, transparent)' },
+    '.cm-searchMatch-selected': {
+      backgroundColor: 'color-mix(in srgb, var(--peach) 55%, transparent)',
+    },
+    '.cm-fat-cursor': {
+      backgroundColor: 'var(--mauve) !important',
+      color: 'var(--rosewater) !important',
+    },
+    '&:not(.cm-focused) .cm-fat-cursor': {
+      outline: '1px solid var(--mauve)',
+      backgroundColor: 'transparent !important',
+    },
+  },
+  { dark: false },
+);
+
+// Compartment for hot-swapping vim mode without recreating the editor.
+export const vimCompartment = new Compartment();
+
+export function clientSlugify(s: string): string {
+  return s
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}

frontend/src/components/react/admin/editor/useAssetAutocomplete.ts

@@ -0,0 +1,74 @@
+import { type RefObject, useEffect, useState } from 'react';
+import type { EditorView } from '@codemirror/view';
+import type { Asset } from '../../../../lib/types';
+
+interface Opts {
+  getView: () => EditorView | null;
+  editorRef: RefObject<HTMLDivElement | null>;
+  getCachedAssets: () => Promise<Asset[]>;
+}
+
+/** Inline `/` or `!` asset autocomplete dropdown. */
+export function useAssetAutocomplete({ getView, editorRef, getCachedAssets }: Opts) {
+  const [showAutocomplete, setShowAutocomplete] = useState(false);
+  const [autocompleteAssets, setAutocompleteAssets] = useState<Asset[]>([]);
+  const [autocompletePos, setAutocompletePos] = useState({ top: 0, left: 0 });
+
+  async function triggerAutocomplete(view: EditorView) {
+    try {
+      const assets = await getCachedAssets();
+      setAutocompleteAssets(assets.slice(0, 8));
+      const pos = view.state.selection.main.head;
+      const coords = view.coordsAtPos(pos);
+      if (coords) {
+        const editorRect = editorRef.current?.getBoundingClientRect();
+        if (editorRect) {
+          setAutocompletePos({
+            top: coords.bottom - editorRect.top + 4,
+            left: coords.left - editorRect.left,
+          });
+        }
+      }
+      setShowAutocomplete(true);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  function insertAssetMarkdown(asset: Asset) {
+    const view = getView();
+    if (!view) return;
+    const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
+    const md = isImage ? `![${asset.name}](${asset.url})` : `[${asset.name}](${asset.url})`;
+
+    const pos = view.state.selection.main.head;
+    const line = view.state.doc.lineAt(pos);
+    const textBefore = line.text.slice(0, pos - line.from);
+    const triggerIdx = Math.max(textBefore.lastIndexOf('/'), textBefore.lastIndexOf('!'));
+
+    if (triggerIdx !== -1) {
+      const from = line.from + triggerIdx;
+      view.dispatch({ changes: { from, to: pos, insert: md } });
+    } else {
+      view.dispatch({ changes: { from: pos, insert: md } });
+    }
+    view.focus();
+    setShowAutocomplete(false);
+  }
+
+  useEffect(() => {
+    if (!showAutocomplete) return;
+    const handler = () => setShowAutocomplete(false);
+    window.addEventListener('click', handler);
+    return () => window.removeEventListener('click', handler);
+  }, [showAutocomplete]);
+
+  return {
+    showAutocomplete,
+    setShowAutocomplete,
+    autocompleteAssets,
+    autocompletePos,
+    triggerAutocomplete,
+    insertAssetMarkdown,
+  };
+}

frontend/src/components/react/admin/editor/useAssetCache.ts

@@ -0,0 +1,28 @@
+import { useRef } from 'react';
+import { getAssets } from '../../../../lib/api';
+import type { Asset } from '../../../../lib/types';
+
+/** Shared, lazily-populated asset list (used by autocomplete + upload). */
+export function useAssetCache() {
+  const cacheRef = useRef<Asset[] | null>(null);
+
+  async function getCachedAssets(): Promise<Asset[]> {
+    if (cacheRef.current) return cacheRef.current;
+    const assets = await getAssets();
+    cacheRef.current = assets;
+    return assets;
+  }
+
+  // Mirrors the original behaviour: prepend only if the cache is already
+  // warm; if it's cold, leave it null so the next read refetches.
+  function prepend(newAssets: Asset[]) {
+    if (newAssets.length === 0) return;
+    cacheRef.current = cacheRef.current ? [...newAssets, ...cacheRef.current] : null;
+  }
+
+  function invalidate() {
+    cacheRef.current = null;
+  }
+
+  return { getCachedAssets, prepend, invalidate };
+}

frontend/src/components/react/admin/editor/useImageUpload.ts

@@ -0,0 +1,67 @@
+import { useRef, useState } from 'react';
+import type { EditorView } from '@codemirror/view';
+import { ApiError, uploadAsset } from '../../../../lib/api';
+import { notify } from '../../../../lib/confirm';
+import type { Asset } from '../../../../lib/types';
+
+interface Opts {
+  getView: () => EditorView | null;
+  prependAssets: (assets: Asset[]) => void;
+}
+
+/** Drag/paste/click image upload + insertion, with progress + drag state. */
+export function useImageUpload({ getView, prependAssets }: Opts) {
+  const [uploadingCount, setUploadingCount] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragDepthRef = useRef(0);
+
+  async function uploadFilesAndInsert(files: File[], insertAt?: number) {
+    const view = getView();
+    if (!view || files.length === 0) return;
+    const images = files.filter(f => f.type.startsWith('image/'));
+    if (images.length === 0) {
+      notify('Only image files can be dropped here.', 'error');
+      return;
+    }
+    setUploadingCount(c => c + images.length);
+
+    // Fire all uploads in parallel; the browser caps per-origin concurrency.
+    // Insert results in submission order so the markdown reflects user intent.
+    const uploads = images.map(file =>
+      uploadAsset(file).then(
+        asset => ({ ok: true as const, asset }),
+        err => ({ ok: false as const, err }),
+      ),
+    );
+
+    let pos = typeof insertAt === 'number' ? insertAt : view.state.selection.main.head;
+    const newAssets: Asset[] = [];
+    for (const promise of uploads) {
+      const result = await promise;
+      setUploadingCount(c => Math.max(0, c - 1));
+      if (result.ok) {
+        const { asset } = result;
+        newAssets.push(asset);
+        const md = `![${asset.name}](${asset.url})`;
+        const line = view.state.doc.lineAt(pos);
+        const atLineEnd = pos === line.to;
+        const insertText = atLineEnd ? `\n\n${md}\n` : `${md}\n\n`;
+        view.dispatch({ changes: { from: pos, insert: insertText } });
+        pos += insertText.length;
+      } else {
+        const e = result.err;
+        notify(
+          e instanceof ApiError ? `Upload failed: ${e.message}` : 'Upload failed.',
+          'error',
+        );
+      }
+    }
+
+    if (newAssets.length > 0) {
+      prependAssets(newAssets);
+    }
+    view.focus();
+  }
+
+  return { uploadingCount, isDragging, setIsDragging, dragDepthRef, uploadFilesAndInsert };
+}

frontend/src/components/react/admin/editor/useLivePreview.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { EditorView } from '@codemirror/view';
+
+interface Opts {
+  getView: () => EditorView | null;
+}
+
+/** Live markdown preview pane: visibility, mobile tab, debounced render. */
+export function useLivePreview({ getView }: Opts) {
+  const [showPreview, setShowPreview] = useState(false);
+  const [mobileView, setMobileView] = useState<'edit' | 'preview'>('edit');
+  const previewRef = useRef<HTMLDivElement>(null);
+  const renderMarkdownRef = useRef<((src: string) => string) | null>(null);
+  const previewTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const updatePreviewRef = useRef<() => void>(() => {});
+
+  const updatePreview = useCallback(async () => {
+    const view = getView();
+    if (!showPreview || !view || !previewRef.current) return;
+    if (!renderMarkdownRef.current) {
+      const mod = await import('../../../../lib/markdown');
+      renderMarkdownRef.current = mod.renderMarkdown;
+    }
+    const content = view.state.doc.toString();
+    previewRef.current.innerHTML = renderMarkdownRef.current(content);
+  }, [showPreview, getView]);
+
+  useEffect(() => {
+    updatePreviewRef.current = updatePreview;
+  }, [updatePreview]);
+
+  useEffect(() => {
+    if (showPreview) updatePreview();
+  }, [showPreview, updatePreview]);
+
+  // Debounced refresh — called from the CodeMirror update listener.
+  const schedulePreview = useCallback(() => {
+    if (previewTimerRef.current) clearTimeout(previewTimerRef.current);
+    previewTimerRef.current = setTimeout(() => updatePreviewRef.current(), 300);
+  }, []);
+
+  return {
+    showPreview,
+    setShowPreview,
+    mobileView,
+    setMobileView,
+    previewRef,
+    updatePreview,
+    schedulePreview,
+  };
+}

frontend/src/components/react/admin/editor/usePostMeta.ts

@@ -0,0 +1,124 @@
+import { useEffect, useState } from 'react';
+import { ApiError, deletePost, getPost, savePost } from '../../../../lib/api';
+import { confirmDialog, notify } from '../../../../lib/confirm';
+import { type SiteMode, copy } from '../../../../lib/siteMode';
+import { clientSlugify } from './codemirror';
+
+interface Opts {
+  editSlug?: string;
+  getContent: () => string;
+  setContent: (s: string) => void;
+  mode?: SiteMode;
+}
+
+/** Post metadata form + slug derivation + load/save/delete. */
+export function usePostMeta({ editSlug, getContent, setContent, mode = 'atelier' }: Opts) {
+  const c = copy(mode);
+  const today = new Date().toISOString().slice(0, 10);
+  const [title, setTitle] = useState('');
+  const [slug, setSlug] = useState(editSlug || '');
+  const [slugTouched, setSlugTouched] = useState(!!editSlug);
+  const [date, setDate] = useState(today);
+  const [summary, setSummary] = useState('');
+  const [tagsInput, setTagsInput] = useState('');
+  const [draft, setDraft] = useState(false);
+  const [originalSlug, setOriginalSlug] = useState(editSlug || '');
+
+  // Load existing post for editing.
+  useEffect(() => {
+    if (!editSlug) return;
+    getPost(editSlug)
+      .then(post => {
+        if (post.title) setTitle(post.title);
+        if (post.summary) setSummary(post.summary);
+        if (post.date) setDate(post.date);
+        if (post.tags?.length) setTagsInput(post.tags.join(', '));
+        setDraft(!!post.draft);
+        if (post.content) setContent(post.content);
+      })
+      .catch(() => notify('Failed to load post.', 'error'));
+  }, [editSlug, setContent]);
+
+  // Auto-derive slug from title until the user edits the slug field.
+  useEffect(() => {
+    if (slugTouched) return;
+    setSlug(clientSlugify(title));
+  }, [title, slugTouched]);
+
+  async function handleSave() {
+    const content = getContent();
+    if (!title.trim() || !slug || !content) {
+      notify('Title, slug, and body are required.', 'error');
+      return;
+    }
+    if (!/!\[[^\]]*\]\([^)]+\)/.test(content)) {
+      notify(
+        'Add at least one image before saving — drag, paste, or use the Add image button.',
+        'error',
+      );
+      return;
+    }
+    const tags = tagsInput
+      .split(',')
+      .map(t => t.trim())
+      .filter(Boolean);
+    try {
+      const saved = await savePost({
+        slug,
+        old_slug: originalSlug || null,
+        title: title.trim(),
+        date,
+        summary: summary || null,
+        tags,
+        draft,
+        content,
+      });
+      notify('Post saved!', 'success');
+      if (saved?.slug && saved.slug !== slug) {
+        setSlug(saved.slug);
+        setSlugTouched(true);
+      }
+      setOriginalSlug(saved?.slug ?? slug);
+    } catch (e) {
+      notify(
+        e instanceof ApiError ? `Error: ${e.message}` : 'Failed to connect to server.',
+        'error',
+      );
+    }
+  }
+
+  async function handleDelete() {
+    const target = originalSlug || slug;
+    const ok = await confirmDialog({
+      title: c.deletePostTitle,
+      message: c.deletePostMsg(target),
+      confirmLabel: c.deleteListConfirm,
+    });
+    if (!ok) return;
+    try {
+      await deletePost(target);
+      window.location.href = '/admin';
+    } catch {
+      notify('Error deleting post.', 'error');
+    }
+  }
+
+  return {
+    title,
+    setTitle,
+    slug,
+    setSlug,
+    setSlugTouched,
+    date,
+    setDate,
+    summary,
+    setSummary,
+    tagsInput,
+    setTagsInput,
+    draft,
+    setDraft,
+    originalSlug,
+    handleSave,
+    handleDelete,
+  };
+}

frontend/src/components/ui/Alert.ts

@@ -1,32 +0,0 @@
-export function showAlert(msg: string, type: 'success' | 'error', elementId: string = 'alert') {
-    const alertEl = document.getElementById(elementId);
-    if (alertEl) {
-        alertEl.textContent = msg;
-        
-        // Define colors based on type using theme variables
-        const colorVar = type === 'success' ? 'var(--green)' : 'var(--red)';
-        
-        // Apply inline styles for guaranteed high contrast and glassy look
-        alertEl.style.display = 'block';
-        alertEl.style.backgroundColor = `color-mix(in srgb, ${colorVar} 15%, transparent)`;
-        alertEl.style.color = 'var(--text)';
-        alertEl.style.border = `1px solid color-mix(in srgb, ${colorVar} 40%, transparent)`;
-        alertEl.style.padding = '1rem';
-        alertEl.style.borderRadius = '0.75rem';
-        alertEl.style.marginBottom = '1.5rem';
-        alertEl.style.fontSize = '0.875rem';
-        alertEl.style.fontWeight = '600';
-        alertEl.style.backdropFilter = 'blur(12px)';
-        alertEl.style.textAlign = 'center';
-        alertEl.style.boxShadow = '0 4px 15px -5px rgba(0,0,0,0.3)';
-        
-        alertEl.classList.remove('hidden');
-        
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-        
-        setTimeout(() => { 
-            alertEl.classList.add('hidden'); 
-            alertEl.style.display = 'none';
-        }, 5000);
-    }
-}

frontend/src/layouts/AdminLayout.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from './Layout.astro';
+import { getSiteMode, copy } from '../lib/siteMode';
 
 interface Props {
     title: string;
@@ -7,6 +8,7 @@ interface Props {
 }
 
 const { title, wide = false } = Astro.props;
+const c = copy(getSiteMode());
 
 if (Astro.cookies.get('admin_session')?.value !== '1') {
     return Astro.redirect('/admin/login');
@@ -17,11 +19,11 @@ if (Astro.cookies.get('admin_session')?.value !== '1') {
     <div class="space-y-10 md:space-y-14">
         <header class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-6 border-b border-[var(--surface2)]/60">
             <div class="flex-1 min-w-0">
-                <a href="/" class="inline-flex items-center gap-1.5 text-xs font-display italic text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors mb-3 group">
-                    <span class="transition-transform group-hover:-translate-x-0.5">←</span>
-                    Back to the catalogue
+                <a href="/" class="back-link mb-3">
+                    <span class="bl-arrow" aria-hidden="true">←</span>
+                    {c.adminBack}
                 </a>
-                <div class="font-display italic text-[var(--mauve)] text-xs tracking-[0.3em] uppercase mb-2">Artist's desk</div>
+                <div class="font-display italic text-[var(--mauve)] text-xs tracking-[0.3em] uppercase mb-2">{c.adminEyebrow}</div>
                 <h1 class="font-display italic font-semibold text-[var(--text)] text-4xl md:text-5xl tracking-tight leading-[1.05]">
                     {title}
                 </h1>

frontend/src/layouts/Layout.astro

@@ -1,15 +1,16 @@
 ---
 import '../styles/global.css';
-import 'katex/dist/katex.min.css';
-import 'highlight.js/styles/atom-one-dark.css';
 import '@fontsource-variable/fraunces';
 import '@fontsource-variable/eb-garamond';
-import '@fontsource/caveat';
 import '@fontsource-variable/jetbrains-mono';
-import ThemeSwitcher from '../components/react/ThemeSwitcher';
+import '@fontsource/vt323';
+import '@fontsource/space-mono';
+import '@fontsource/space-mono/700.css';
+import CyberFx from '../components/CyberFx.astro';
 import Search from '../components/react/Search';
 import LogoutButton from '../components/react/LogoutButton';
 import EditableText from '../components/react/EditableText';
+import { getSiteMode, copy } from '../lib/siteMode';
 
 interface Props {
 	title: string;
@@ -17,9 +18,15 @@ interface Props {
 	description?: string;
 	image?: string;
 	type?: 'website' | 'article';
+	/** Strips the top-bar controls and footer nav — used by the login page
+	 * so the sign-in screen is a focused, chrome-free stage. */
+	minimal?: boolean;
 }
 
-const { title, wide = false, description, image, type = 'website' } = Astro.props;
+const { title, wide = false, description, image, type = 'website', minimal = false } = Astro.props;
+
+const siteMode = getSiteMode();
+const c = copy(siteMode);
 
 const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
 const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
@@ -57,10 +64,10 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class={`mode-${siteMode}`}>
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" href={siteConfig.favicon} />
 		<meta name="generator" content={Astro.generator} />
 		<title>{fullTitle}</title>
@@ -77,9 +84,19 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 		{image && <meta name="twitter:image" content={image} />}
 		<link rel="alternate" type="application/rss+xml" title={siteConfig.title} href="/feed.xml" />
 		{siteConfig.custom_css && <style set:html={siteConfig.custom_css} />}
-		<script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
-			const savedTheme = localStorage.getItem('user-theme') || defaultTheme || 'salon';
-			document.documentElement.classList.add(savedTheme);
+		<script is:inline define:vars={{ siteTheme: siteConfig.theme }}>
+			// Theme is owner-controlled (site config). Drop any legacy
+				// per-visitor override so everyone sees the configured theme.
+				try { localStorage.removeItem('user-theme'); } catch (e) {}
+			document.documentElement.classList.add(siteTheme || 'salon');
+		</script>
+		<script is:inline>
+			// When a page is restored from the back/forward cache (e.g. after
+			// saving in the editor and hitting Back), the SSR'd post grid is
+			// stale. Force a fresh fetch so newly edited tags / titles show up.
+			window.addEventListener('pageshow', function (e) {
+				if (e.persisted) window.location.reload();
+			});
 		</script>
 		<slot name="head" />
 	</head>
@@ -87,11 +104,11 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 		<div class="salon-atmosphere" aria-hidden="true"></div>
 
 		<header class="border-b border-[var(--surface2)]/60">
-			<div class="max-w-6xl mx-auto px-6 md:px-10 py-5 md:py-7 flex flex-col md:flex-row md:items-end gap-4 md:gap-6">
+			<div class={`max-w-6xl mx-auto px-6 md:px-10 py-5 md:py-7 flex flex-col gap-4 md:flex-row md:items-end md:gap-6 ${minimal ? 'justify-center text-center' : 'md:justify-between'}`}>
 				<a href="/" class="nameplate group" aria-label="Home">
 					{isAdmin ? (
 						<EditableText
-							client:load
+							client:visible
 							initial={siteConfig.title}
 							fieldKey="title"
 							isAdmin
@@ -103,7 +120,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 					)}
 					{isAdmin ? (
 						<EditableText
-							client:load
+							client:visible
 							initial={siteConfig.subtitle}
 							fieldKey="subtitle"
 							isAdmin
@@ -115,29 +132,28 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 					)}
 				</a>
 
-				<div class="flex flex-wrap items-center gap-3 justify-start md:justify-end md:ml-auto">
-					{hasContact && (
-						<a
-							href="/contact"
-							class="font-display italic text-sm text-[var(--subtext1)] hover:text-[var(--mauve)] transition-colors tracking-wide"
-						>Contact</a>
-					)}
-					<Search client:load />
-					{isAdmin && (
-						<div class="flex items-center gap-1 pl-3 ml-1 border-l border-[var(--surface2)]/60">
+				{!minimal && (
+					<nav class="topbar-cluster w-full md:w-auto" aria-label="Site controls">
+						{hasContact && (
+							<a href="/contact" class="topbar-control">Contact</a>
+						)}
+						<Search client:idle mode={siteMode} />
+						<span class="topbar-divider" aria-hidden="true"></span>
+						{isAdmin ? (
+							<LogoutButton client:idle />
+						) : (
 							<a
-								href="/admin"
-								class="chip chip-accent uppercase"
-								title="Signed in as artist"
+								href="/admin/login"
+								class="topbar-control tc-collapse-sm"
+								aria-label="Admin login"
+								title="Admin login"
 							>
-								<span class="w-1.5 h-1.5 rounded-full bg-[var(--rosewater)] animate-pulse"></span>
-								Artist
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>
+								<span class="tc-label">Admin</span>
 							</a>
-							<LogoutButton client:load />
-						</div>
-					)}
-					<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
-				</div>
+						)}
+					</nav>
+				)}
 			</div>
 		</header>
 
@@ -145,42 +161,42 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 			<slot />
 		</main>
 
-		<footer class="max-w-6xl mx-auto px-6 md:px-10 py-12 md:py-16 text-center border-t border-[var(--surface2)]/40 mt-12">
-			<div class="section-rule mb-6">
-				<span class="ornament">✦</span>
-				<span class="font-display italic text-[var(--subtext0)] text-sm">end of catalogue</span>
-				<span class="ornament">✦</span>
-			</div>
-			<p class="font-display italic text-base text-[var(--subtext1)] mb-2">
-				{isAdmin ? (
-					<EditableText
-						client:load
-						initial={siteConfig.footer}
-						fieldKey="footer"
-						isAdmin
-						ariaLabel="footer text"
-						className="inline"
-					/>
-				) : siteConfig.footer}
-			</p>
-			<div class="text-xs text-[var(--subtext0)] tracking-[0.2em] uppercase mb-3 flex items-center justify-center gap-3 flex-wrap">
-				<a href="/feed.xml" class="hover:text-[var(--mauve)] transition-colors">RSS Feed</a>
-				{hasContact && (
-					<>
-						<span class="text-[var(--overlay0)]" aria-hidden="true">·</span>
-						<a href="/contact" class="hover:text-[var(--mauve)] transition-colors">Contact</a>
-					</>
-				)}
-				{!isAdmin && (
-					<>
-						<span class="text-[var(--overlay0)]" aria-hidden="true">·</span>
-						<a href="/admin/login" class="hover:text-[var(--mauve)] transition-colors">Admin login</a>
-					</>
-				)}
-			</div>
-			<div class="text-[var(--overlay0)] text-xs italic">
+		<footer class={`max-w-6xl mx-auto px-6 md:px-10 text-center border-t border-[var(--surface2)]/40 ${minimal ? 'py-8 mt-8' : 'py-12 md:py-16 mt-12'}`}>
+			{!minimal && (
+				<>
+					<div class="section-rule mb-6">
+						<span class="ornament">✦</span>
+						<span class="font-display italic text-[var(--subtext0)] text-sm">{c.footerEnd}</span>
+						<span class="ornament">✦</span>
+					</div>
+					<p class="font-display italic text-base text-[var(--subtext1)] mb-2">
+						{isAdmin ? (
+							<EditableText
+								client:visible
+								initial={siteConfig.footer}
+								fieldKey="footer"
+								isAdmin
+								ariaLabel="footer text"
+								className="inline"
+							/>
+						) : siteConfig.footer}
+					</p>
+					<div class="text-xs text-[var(--subtext0)] tracking-[0.2em] uppercase mb-3 flex items-center justify-center gap-3 flex-wrap">
+						<a href="/feed.xml" class="hover:text-[var(--mauve)] transition-colors">RSS Feed</a>
+						{hasContact && (
+							<>
+								<span class="text-[var(--overlay0)]" aria-hidden="true">·</span>
+								<a href="/contact" class="hover:text-[var(--mauve)] transition-colors">Contact</a>
+							</>
+						)}
+					</div>
+				</>
+			)}
+			<div class="site-copyright text-[var(--overlay0)] text-xs italic">
 				&copy; {year} · {siteConfig.title}
 			</div>
 		</footer>
+
+		<CyberFx />
 	</body>
 </html>

frontend/src/lib/confirm.ts

@@ -0,0 +1,138 @@
+/*
+ * Imperative confirm() / notify() that replace native window.confirm /
+ * window.alert. The site hydrates many independent React islands that share
+ * no React root, so this is a vanilla DOM singleton: any island (or inline
+ * script) can `await confirmDialog(...)`. Styling is class-driven, so it
+ * inherits every theme — including the breakcore neon/hazard layer — for free.
+ */
+
+export interface ConfirmOptions {
+  title: string;
+  message?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Visual weight of the confirm button. Defaults to 'danger'. */
+  tone?: 'danger' | 'primary';
+}
+
+let activeCleanup: (() => void) | null = null;
+
+export function confirmDialog(opts: ConfirmOptions): Promise<boolean> {
+  // Collapse any in-flight dialog (treat as cancel) before opening a new one.
+  activeCleanup?.();
+
+  return new Promise<boolean>(resolve => {
+    const {
+      title,
+      message,
+      confirmLabel = 'Confirm',
+      cancelLabel = 'Cancel',
+      tone = 'danger',
+    } = opts;
+
+    const lastFocused = document.activeElement as HTMLElement | null;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    const overlay = document.createElement('div');
+    overlay.className = 'cdialog-overlay';
+    overlay.setAttribute('role', 'alertdialog');
+    overlay.setAttribute('aria-modal', 'true');
+
+    const backdrop = document.createElement('div');
+    backdrop.className = 'cdialog-backdrop';
+    backdrop.setAttribute('aria-hidden', 'true');
+
+    const panel = document.createElement('div');
+    panel.className = 'glass cdialog-panel';
+
+    const titleId = `cdlg-t-${Math.random().toString(36).slice(2)}`;
+    const h = document.createElement('h2');
+    h.className = 'cdialog-title';
+    h.id = titleId;
+    h.textContent = title;
+    overlay.setAttribute('aria-labelledby', titleId);
+    panel.appendChild(h);
+
+    if (message) {
+      const p = document.createElement('p');
+      p.className = 'cdialog-msg';
+      p.textContent = message;
+      panel.appendChild(p);
+    }
+
+    const actions = document.createElement('div');
+    actions.className = 'cdialog-actions';
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.type = 'button';
+    cancelBtn.className = 'btn btn--ghost';
+    cancelBtn.textContent = cancelLabel;
+
+    const confirmBtn = document.createElement('button');
+    confirmBtn.type = 'button';
+    confirmBtn.className = `btn ${tone === 'primary' ? 'btn--primary' : 'btn--danger'}`;
+    confirmBtn.textContent = confirmLabel;
+
+    actions.append(cancelBtn, confirmBtn);
+    panel.appendChild(actions);
+    overlay.append(backdrop, panel);
+    document.body.appendChild(overlay);
+
+    let settled = false;
+    function close(result: boolean) {
+      if (settled) return;
+      settled = true;
+      activeCleanup = null;
+      document.removeEventListener('keydown', onKey, true);
+      document.body.style.overflow = prevOverflow;
+      overlay.remove();
+      lastFocused?.focus?.();
+      resolve(result);
+    }
+
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        close(false);
+      } else if (e.key === 'Tab') {
+        // Two-stop focus trap.
+        e.preventDefault();
+        const next = document.activeElement === confirmBtn ? cancelBtn : confirmBtn;
+        next.focus();
+      } else if (e.key === 'Enter' && document.activeElement === confirmBtn) {
+        e.preventDefault();
+        close(true);
+      }
+    }
+
+    backdrop.addEventListener('click', () => close(false));
+    cancelBtn.addEventListener('click', () => close(false));
+    confirmBtn.addEventListener('click', () => close(true));
+    document.addEventListener('keydown', onKey, true);
+    activeCleanup = () => close(false);
+
+    // Destructive default: focus Cancel so an accidental Enter is safe.
+    (tone === 'primary' ? confirmBtn : cancelBtn).focus();
+  });
+}
+
+/** Transient hovering toast at the top of the viewport. Replaces
+ *  window.alert and the old inline save banners. */
+export function notify(message: string, tone: 'error' | 'success' = 'error') {
+  document.querySelector('.toast[data-notify]')?.remove();
+  const el = document.createElement('div');
+  el.className = `toast toast--${tone}`;
+  el.dataset.notify = '';
+  el.setAttribute('role', tone === 'error' ? 'alert' : 'status');
+  el.textContent = message;
+
+  const dismiss = () => {
+    if (el.classList.contains('toast--out')) return;
+    el.classList.add('toast--out');
+    window.setTimeout(() => el.remove(), 220);
+  };
+  el.addEventListener('click', dismiss);
+  document.body.appendChild(el);
+  window.setTimeout(dismiss, 4500);
+}

frontend/src/lib/cybersigil.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+import { buildCybersigil, GLYPHS } from './cybersigil';
+
+/** Deterministic LCG so a given seed reproduces a given sigil. */
+function seeded(seed: number): () => number {
+  let s = seed >>> 0;
+  return () => {
+    s = (s * 1664525 + 1013904223) >>> 0;
+    return s / 4294967296;
+  };
+}
+
+describe('buildCybersigil', () => {
+  it('is deterministic for a fixed RNG', () => {
+    const a = buildCybersigil({ rng: seeded(42) });
+    const b = buildCybersigil({ rng: seeded(42) });
+    expect(a).toBe(b);
+  });
+
+  it('varies with the seed', () => {
+    expect(buildCybersigil({ rng: seeded(1) })).not.toBe(buildCybersigil({ rng: seeded(2) }));
+  });
+
+  it('emits a single well-formed root svg', () => {
+    const svg = buildCybersigil({ rng: seeded(7) });
+    expect(svg.startsWith('<svg')).toBe(true);
+    expect(svg.endsWith('</svg>')).toBe(true);
+    expect(svg.match(/<svg/g)).toHaveLength(1);
+    // no formatting holes leaked into the path data
+    expect(svg).not.toMatch(/NaN|undefined|Infinity/);
+  });
+
+  it('is vertically mirrored (two halves, one flipped about x=0)', () => {
+    const svg = buildCybersigil({ rng: seeded(7) });
+    expect(svg.match(/class="cs-sig-half"/g)).toHaveLength(2);
+    expect(svg).toContain('transform="scale(-1 1)"');
+  });
+
+  it('every stroke is pathLength-normalised for the carve animation', () => {
+    const svg = buildCybersigil({ rng: seeded(99) });
+    const paths = svg.match(/<path\b[^>]*>/g) ?? [];
+    expect(paths.length).toBeGreaterThan(0);
+    for (const p of paths) expect(p).toContain('pathLength="1"');
+  });
+
+  it('exposes a numeric, positive viewBox', () => {
+    const svg = buildCybersigil({ rng: seeded(7) });
+    const vb = svg.match(/viewBox="([^"]+)"/)?.[1] ?? '';
+    const nums = vb.split(/\s+/).map(Number);
+    expect(nums).toHaveLength(4);
+    expect(nums.every(Number.isFinite)).toBe(true);
+    expect(nums[2]).toBeGreaterThan(0); // width
+    expect(nums[3]).toBeGreaterThan(0); // height
+  });
+
+  it('honours the count option and stays bounded', () => {
+    const sparse = buildCybersigil({ count: 1, rng: seeded(5) });
+    const dense = buildCybersigil({ count: 9, rng: seeded(5) });
+    const n = (s: string) => (s.match(/<path/g) ?? []).length;
+    expect(n(dense)).toBeGreaterThan(n(sparse));
+    expect(n(dense)).toBeLessThanOrEqual(260); // MAX_PATHS(110) mirrored + ornaments
+  });
+
+  it('ships a non-empty glyph library with valid path data', () => {
+    expect(GLYPHS.length).toBeGreaterThan(0);
+    for (const g of GLYPHS) {
+      expect(g.w).toBeGreaterThan(0);
+      expect(g.h).toBeGreaterThan(0);
+      expect(g.d).toMatch(/^M/);
+    }
+  });
+});

frontend/src/lib/cybersigil.ts

@@ -0,0 +1,235 @@
+/*
+ * cybersigil — chaotic neo-tribal sigil generator.
+ *
+ * Cybersigilism's signature is dense, fractal, barbed linework with hard
+ * vertical symmetry. We grow it procedurally: a wavering central spine spawns
+ * recursive curved limbs, each scattering barbs and thin filament shadows and
+ * occasionally terminating in a small hand-drawn motif. The whole right-leaning
+ * tangle is mirrored about x=0 (scale(-1 1)); a spine that wobbles in +x while
+ * its mirror wobbles in −x weaves the two halves into one symmetric growth.
+ *
+ * Strokes carry pathLength="1" so the CSS draw-on ("carve") animation needs no
+ * JS length measurement; an inline `--i` staggers the carve into waves.
+ * Output is decorative and self-generated (no user input) — safe to inject via
+ * innerHTML. Inert under non-cybersigil themes (all styling `.cybersigil`-scoped).
+ */
+
+export interface Glyph {
+	w: number;
+	h: number;
+	/** path data, local coords, anchored near origin */
+	d: string;
+}
+
+// Small hand-drawn motifs used as limb-tip flourishes — the deliberate,
+// "carved on purpose" punctuation amid the procedural chaos.
+export const GLYPHS: readonly Glyph[] = [
+	{ w: 18, h: 22, d: 'M0 0 Q16 5 14 14 Q12 21 0 22 M4 7 L10 3' },
+	{ w: 16, h: 16, d: 'M0 8 Q14 0 15 8 Q14 16 0 8 M8 2 L8 14' },
+	{ w: 14, h: 24, d: 'M0 0 L0 24 M0 6 L12 2 M0 14 L13 10 M0 21 L9 19' },
+	{ w: 20, h: 18, d: 'M0 9 Q10 -2 19 4 M19 4 L15 0 M19 4 L20 9 M0 9 L4 16' },
+	{ w: 15, h: 20, d: 'M0 0 Q14 6 13 13 Q12 19 0 19 M7 8 Q11 11 11 16' },
+] as const;
+
+export interface SigilOptions {
+	/** rough number of primary branch nodes; default random 6–10 */
+	count?: number;
+	/** injectable RNG (0..1); default Math.random */
+	rng?: () => number;
+}
+
+const H = 200; // internal canvas height (viewBox scales it to fit)
+const PAD = 14;
+const MAX_PATHS = 110; // safety ceiling; real density is bounded by the params
+
+type Pt = [number, number];
+
+export function buildCybersigil(opts: SigilOptions = {}): string {
+	const rng = opts.rng ?? Math.random;
+	const rnd = (a: number, b: number) => a + rng() * (b - a);
+	const pick = <T>(a: readonly T[]): T => a[Math.floor(rng() * a.length)];
+	const n = (v: number) => {
+		const r = Math.round(v * 10) / 10;
+		return Object.is(r, -0) ? '0' : String(r);
+	};
+
+	const parts: string[] = [];
+	let strokeCount = 0;
+	let maxX = 24;
+
+	const track = (x: number) => {
+		const ax = Math.abs(x);
+		if (ax > maxX) maxX = ax;
+	};
+	const emit = (d: string, cls: string) => {
+		if (strokeCount >= MAX_PATHS) return;
+		parts.push(
+			`<path class="${cls}" d="${d}" pathLength="1" style="--i:${strokeCount % 16}"/>`,
+		);
+		strokeCount++;
+	};
+
+	// Catmull-Rom → cubic Bézier through an ordered point list (organic sweep).
+	const spline = (pts: Pt[]): string => {
+		if (pts.length < 2) return '';
+		let d = `M${n(pts[0][0])} ${n(pts[0][1])}`;
+		for (let i = 0; i < pts.length - 1; i++) {
+			const p0 = pts[i - 1] ?? pts[i];
+			const p1 = pts[i];
+			const p2 = pts[i + 1];
+			const p3 = pts[i + 2] ?? p2;
+			const c1: Pt = [p1[0] + (p2[0] - p0[0]) / 6, p1[1] + (p2[1] - p0[1]) / 6];
+			const c2: Pt = [p2[0] - (p3[0] - p1[0]) / 6, p2[1] - (p3[1] - p1[1]) / 6];
+			d += `C${n(c1[0])} ${n(c1[1])} ${n(c2[0])} ${n(c2[1])} ${n(p2[0])} ${n(p2[1])}`;
+			track(c1[0]);
+			track(c2[0]);
+			track(p2[0]);
+		}
+		return d;
+	};
+
+	// A short spike, optionally kinked into a fang.
+	const barb = (base: Pt, ang: number, len: number) => {
+		const tip: Pt = [base[0] + Math.cos(ang) * len, base[1] + Math.sin(ang) * len];
+		if (tip[0] < -3) tip[0] = -3;
+		track(base[0]);
+		track(tip[0]);
+		if (rng() < 0.45) {
+			const mid: Pt = [
+				(base[0] + tip[0]) / 2 + Math.cos(ang + Math.PI / 2) * len * 0.3,
+				(base[1] + tip[1]) / 2 + Math.sin(ang + Math.PI / 2) * len * 0.3,
+			];
+			emit(
+				`M${n(base[0])} ${n(base[1])}Q${n(mid[0])} ${n(mid[1])} ${n(tip[0])} ${n(tip[1])}`,
+				'cs-sig-barb',
+			);
+		} else {
+			emit(`M${n(base[0])} ${n(base[1])}L${n(tip[0])} ${n(tip[1])}`, 'cs-sig-barb');
+		}
+	};
+
+	const ornament = (at: Pt, ang: number) => {
+		const g = pick(GLYPHS);
+		const s = rnd(0.45, 0.85);
+		const deg = (ang * 180) / Math.PI + rnd(-25, 25);
+		track(at[0] + g.w * s);
+		parts.push(
+			`<g transform="translate(${n(at[0])} ${n(at[1])}) rotate(${n(deg)}) scale(${n(s)})">` +
+				`<path class="cs-sig-orn" d="${g.d}" pathLength="1" style="--i:${strokeCount % 16}"/></g>`,
+		);
+		strokeCount++;
+	};
+
+	// Recursive limb: a curved sweep out from (ox,oy) along `ang`, hooking back,
+	// scattering barbs, shedding a filament shadow, branching, sometimes tipped
+	// with a motif.
+	const limb = (ox: number, oy: number, ang: number, scale: number, depth: number) => {
+		if (strokeCount >= MAX_PATHS) return;
+		const L = scale * rnd(34, 64);
+		const dx = Math.cos(ang) * L;
+		const dy = Math.sin(ang) * L;
+		const peak: Pt = [ox + dx, oy + dy];
+		const mid: Pt = [
+			ox + dx * 0.45 + Math.cos(ang + Math.PI / 2) * rnd(-10, 14),
+			oy + dy * 0.45 + Math.sin(ang + Math.PI / 2) * rnd(-10, 14),
+		];
+		// hook back toward the spine
+		const hook: Pt = [
+			peak[0] - Math.cos(ang) * L * rnd(0.3, 0.55),
+			peak[1] + Math.sin(ang + 0.7) * L * rnd(0.25, 0.5),
+		];
+		const tail: Pt = [Math.max(-2, hook[0] - L * rnd(0.2, 0.4)), hook[1] + rnd(-6, 10)];
+		const pts: Pt[] = [[ox, oy], mid, peak, hook, tail];
+		emit(spline(pts), 'cs-sig-main');
+
+		// terminal spike off the outermost point
+		barb(peak, ang + rnd(-0.5, 0.5), scale * rnd(8, 18));
+
+		// filament shadow trailing the main sweep
+		if (rng() < 0.4) {
+			const off = rnd(2, 6);
+			emit(
+				spline(
+					pts.map(
+						([x, y]) =>
+							[x + Math.cos(ang + Math.PI / 2) * off, y + Math.sin(ang + Math.PI / 2) * off] as Pt,
+					),
+				),
+				'cs-sig-fil',
+			);
+		}
+
+		// barb scatter along the chord
+		const nb = 1 + Math.floor(rng() * 2);
+		for (let k = 0; k < nb; k++) {
+			const t = (k + 1) / (nb + 1);
+			const seg = t < 0.5 ? [pts[0], pts[2], t * 2] : [pts[2], pts[4], (t - 0.5) * 2];
+			const a = seg[0] as Pt;
+			const b = seg[1] as Pt;
+			const tt = seg[2] as number;
+			const base: Pt = [a[0] + (b[0] - a[0]) * tt, a[1] + (b[1] - a[1]) * tt];
+			const side = k % 2 ? 1 : -1;
+			barb(base, ang + side * rnd(0.6, 1.3), scale * rnd(6, 16));
+		}
+
+		// recurse — one child curls off the mid/peak region
+		if (depth > 0 && rng() < 0.55) {
+			const from = rng() < 0.5 ? mid : peak;
+			limb(
+				from[0],
+				from[1],
+				ang + (rng() < 0.5 ? 1 : -1) * rnd(0.5, 1.2),
+				scale * rnd(0.42, 0.6),
+				depth - 1,
+			);
+		}
+
+		// motif flourish at a terminal tip
+		if (depth === 0 && rng() < 0.3) ornament(peak, ang);
+	};
+
+	// ── Wavering spine: a curve from top to bottom, gently bowing in +x.
+	const spineNodes = 5 + Math.floor(rng() * 3);
+	const spinePts: Pt[] = [];
+	for (let i = 0; i <= spineNodes; i++) {
+		const y = (H * i) / spineNodes;
+		const x = i === 0 || i === spineNodes ? 0 : rnd(0, 11);
+		spinePts.push([x, y]);
+	}
+	emit(spline(spinePts), 'cs-sig-main');
+
+	// ── Branch nodes ride the spine and throw limbs outward. Nodes are
+	// inset from the very ends and spread the full height so growth flows
+	// down the whole trunk rather than clumping at the top.
+	const nodes = opts.count ?? 7 + Math.floor(rng() * 3); // 7–9
+	for (let i = 0; i < nodes; i++) {
+		const t = 0.08 + (0.86 * (i + rnd(-0.25, 0.25))) / (nodes - 1);
+		const tc = Math.max(0.05, Math.min(0.95, t));
+		const si = Math.min(spinePts.length - 2, Math.floor(tc * (spinePts.length - 1)));
+		const sf = tc * (spinePts.length - 1) - si;
+		const a = spinePts[si];
+		const b = spinePts[si + 1];
+		const node: Pt = [a[0] + (b[0] - a[0]) * sf, a[1] + (b[1] - a[1]) * sf];
+		// later nodes lean downward so the lower trunk fills out
+		const bias = -0.25 + tc * 0.7;
+		const limbs = 1 + Math.floor(rng() * 2);
+		for (let l = 0; l < limbs; l++) {
+			const ang = bias + rnd(-0.55, 0.55);
+			limb(node[0], node[1], ang, rnd(0.65, 1.05), 1);
+		}
+		// the odd bare barb straight off the spine keeps the trunk prickly
+		if (rng() < 0.55) barb(node, bias + rnd(-0.3, 0.3), rnd(7, 14));
+	}
+
+	const half = parts.join('');
+	const minX = -(maxX + PAD);
+	const vbW = 2 * (maxX + PAD);
+	return (
+		`<svg class="cs-sigil" viewBox="${n(minX)} ${-PAD} ${n(vbW)} ${H + 2 * PAD}" ` +
+		`preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false" ` +
+		`xmlns="http://www.w3.org/2000/svg">` +
+		`<g class="cs-sig-half">${half}</g>` +
+		`<g class="cs-sig-half" transform="scale(-1 1)">${half}</g>` +
+		`</svg>`
+	);
+}

frontend/src/lib/markdown.ts

@@ -2,9 +2,38 @@ import { Marked } from 'marked';
 import markedKatex from 'marked-katex-extension';
 import { markedHighlight } from 'marked-highlight';
 import { gfmHeadingId } from 'marked-gfm-heading-id';
-import hljs from 'highlight.js/lib/common';
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import diff from 'highlight.js/lib/languages/diff';
+import go from 'highlight.js/lib/languages/go';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import rust from 'highlight.js/lib/languages/rust';
+import shell from 'highlight.js/lib/languages/shell';
+import sql from 'highlight.js/lib/languages/sql';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
 import DOMPurify from 'isomorphic-dompurify';
 
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('diff', diff);
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('markdown', markdown);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('rust', rust);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('yaml', yaml);
+
 function escapeHtml(s: string): string {
   return s
     .replace(/&/g, '&')
@@ -50,8 +79,67 @@ const KATEX_TAGS = [
   'mpadded', 'menclose',
 ];
 
-export function renderMarkdown(src: string): string {
-  const html = renderer.parse(src, { async: false }) as string;
+export interface ImageDim { w: number; h: number }
+export type ImageDims = Record<string, ImageDim>;
+
+function injectDimensions(html: string, dims?: ImageDims): string {
+  if (!dims) return html;
+  return html.replace(/<img\s+src="([^"]+)"([^>]*?)\s*\/?>/g, (match, src, rest) => {
+    const d = dims[src];
+    if (!d) return match;
+    if (/\swidth\s*=/.test(rest) || /\sheight\s*=/.test(rest)) return match;
+    return `<img src="${src}" width="${d.w}" height="${d.h}"${rest} />`;
+  });
+}
+
+// Marked emits `<p><figure>…</figure></p>` because the image renderer returns
+// a block element from an inline slot. Strip the `<p>` wrapper when the
+// paragraph contains nothing but figures (and whitespace / <br>), so the
+// figure-grouping step below can see contiguous runs.
+function unwrapFiguresFromParagraphs(html: string): string {
+  return html.replace(/<p>([\s\S]*?)<\/p>/g, (match, inner: string) => {
+    const stripped = inner.replace(/<br\s*\/?>/g, '').trim();
+    if (!stripped) return match;
+    if (/^(?:\s*<figure>[\s\S]*?<\/figure>\s*)+$/.test(stripped)) {
+      return stripped;
+    }
+    return match;
+  });
+}
+
+// Wrap runs of 2+ consecutive <figure> elements in a `.figure-row` flex
+// container. Each figure gets `flex: <aspect-ratio>` so widths divide the
+// row proportionally and the final heights match.
+function groupFigures(html: string): string {
+  return html.replace(
+    /(?:<figure>[\s\S]*?<\/figure>\s*){2,}/g,
+    (run) => {
+      const figures = run.match(/<figure>[\s\S]*?<\/figure>/g) ?? [];
+      const items = figures.map((fig) => {
+        const m = fig.match(/<img[^>]*\swidth="(\d+)"[^>]*\sheight="(\d+)"/);
+        const ratio = m ? Number(m[1]) / Number(m[2]) : 1;
+        const safe = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+        const r = safe.toFixed(3);
+        // flex-basis tracks target row height (var --row-h) × aspect ratio,
+        // so the browser fits as many figures per row as it can while keeping
+        // each at roughly the target height; the rest wrap. max-width caps
+        // any leftover row so a lone last image doesn't balloon.
+        const style = [
+          `flex:${r} ${r} calc(${r} * var(--row-h, 16rem))`,
+          `max-width:calc(${r} * var(--row-max, 30rem))`,
+        ].join(';');
+        return fig.replace('<figure>', `<figure style="${style}">`);
+      });
+      return `<div class="figure-row">${items.join('')}</div>`;
+    },
+  );
+}
+
+export function renderMarkdown(src: string, dims?: ImageDims): string {
+  let html = renderer.parse(src, { async: false }) as string;
+  html = injectDimensions(html, dims);
+  html = unwrapFiguresFromParagraphs(html);
+  html = groupFigures(html);
   return DOMPurify.sanitize(html, {
     ADD_TAGS: [...KATEX_TAGS, 'figure', 'figcaption'],
     ADD_ATTR: ['aria-hidden', 'style', 'id', 'class', 'encoding', 'mathvariant', 'displaystyle', 'scriptlevel', 'loading'],

frontend/src/lib/siteMode.ts

@@ -0,0 +1,99 @@
+// Site presentation mode. The atelier skin (fonts, cybersigil/breakcore
+// themes, paper grain, CyberFx) is identical in both modes — only the *focus*
+// flips: `atelier` puts images first (justified gallery plates, "plates"
+// count), `blog` puts writing first (stacked rows, excerpts, reading time).
+//
+// Resolved server-side from the SITE_MODE env var. React islands cannot read
+// process.env in the browser, so pages pass the resolved mode down as a prop;
+// islands then look up COPY by mode.
+
+export type SiteMode = 'blog' | 'atelier';
+
+/** Server-side only. Defaults to atelier for any unset/unknown value. */
+export function getSiteMode(): SiteMode {
+  const v = typeof process !== 'undefined' ? process.env.SITE_MODE : undefined;
+  return v === 'blog' ? 'blog' : 'atelier';
+}
+
+/**
+ * Mode-keyed user-facing strings. Atelier keeps the gallery voice; blog
+ * neutralises it. Anything not voice-flavoured (e.g. "Search", "Cancel")
+ * stays out of here so there's no needless duplication.
+ */
+export const COPY = {
+  atelier: {
+    indexTitle: 'Catalogue',
+    backHome: 'Back to catalogue',
+    adminBack: 'Back to the catalogue',
+    adminEyebrow: "Artist's desk",
+    footerEnd: 'end of catalogue',
+    loadingMore: 'arranging more…',
+    draftShort: 'Sketch',
+    draftLong: 'Sketch · unpublished',
+    searchPlaceholder: 'Search the catalogue…',
+    searchAria: 'Search the catalogue',
+    searchFetching: 'Fetching the catalogue…',
+    searchEmpty: 'The catalogue is empty.',
+    searchNoMatch: 'No works match.',
+    deleteListTitle: 'Take this off the wall?',
+    deleteListMsg: (t: string) =>
+      `“${t}” will be removed from the catalogue. This cannot be undone.`,
+    deleteListConfirm: 'Remove',
+    deleteListCancel: 'Keep',
+    deletePostTitle: 'Delete this work?',
+    deletePostMsg: (t: string) => `“${t}” will be permanently removed. This cannot be undone.`,
+    postNotFound: 'Work not found in the catalogue',
+    returnHome: 'Return to the catalogue',
+    notFoundTitle: 'Not in the catalogue',
+    notFoundDesc: "The work you're looking for is not on view.",
+    notFoundRule: 'Pardon — the gallery has misplaced this work',
+    notFoundHead: 'This piece is not on view.',
+    notFoundBody:
+      'The room you reached for has either been re-hung, withdrawn,|or never made it to the wall in the first place.',
+    editorTitlePh: 'Untitled (charcoal on paper)',
+    editorSlugPh: 'untitled-charcoal-on-paper',
+    editorDraftLabel: 'Sketch (draft)',
+    editorSummaryPh: 'A short caption for the catalogue index...',
+    editorSummaryLabel: 'Caption (optional)',
+    editorTagsPh: 'oil, paper, 2026, study',
+  },
+  blog: {
+    indexTitle: 'Posts',
+    backHome: 'Back to posts',
+    adminBack: 'Back to posts',
+    adminEyebrow: 'Dashboard',
+    footerEnd: 'end of posts',
+    loadingMore: 'loading more…',
+    draftShort: 'Draft',
+    draftLong: 'Draft · unpublished',
+    searchPlaceholder: 'Search posts…',
+    searchAria: 'Search posts',
+    searchFetching: 'Loading posts…',
+    searchEmpty: 'No posts yet.',
+    searchNoMatch: 'No posts match.',
+    deleteListTitle: 'Delete this post?',
+    deleteListMsg: (t: string) => `“${t}” will be permanently deleted. This cannot be undone.`,
+    deleteListConfirm: 'Delete',
+    deleteListCancel: 'Cancel',
+    deletePostTitle: 'Delete this post?',
+    deletePostMsg: (t: string) => `“${t}” will be permanently deleted. This cannot be undone.`,
+    postNotFound: 'Post not found',
+    returnHome: 'Return to posts',
+    notFoundTitle: 'Post not found',
+    notFoundDesc: "The post you're looking for doesn't exist.",
+    notFoundRule: 'This page could not be found',
+    notFoundHead: 'Nothing here.',
+    notFoundBody:
+      'The post you reached for has either moved, been unpublished,|or never existed in the first place.',
+    editorTitlePh: 'Post title',
+    editorSlugPh: 'post-slug',
+    editorDraftLabel: 'Draft',
+    editorSummaryPh: 'A short summary for the index...',
+    editorSummaryLabel: 'Summary (optional)',
+    editorTagsPh: 'essay, notes, 2026',
+  },
+} as const satisfies Record<SiteMode, Record<string, unknown>>;
+
+export function copy(mode: SiteMode) {
+  return COPY[mode];
+}

frontend/src/pages/404.astro

@@ -1,24 +1,28 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import { getSiteMode, copy } from '../lib/siteMode';
+
+const c = copy(getSiteMode());
+const [bodyA, bodyB] = c.notFoundBody.split('|');
 ---
 
-<Layout title="Not in the catalogue" description="The work you're looking for is not on view.">
+<Layout title={c.notFoundTitle} description={c.notFoundDesc}>
     <div class="max-w-2xl mx-auto py-16 md:py-24 text-center">
         <div class="numeral text-[var(--mauve)] text-[8rem] md:text-[12rem] leading-none mb-4">
             CDIV
         </div>
         <div class="section-rule max-w-sm mx-auto mb-8">
             <span class="ornament">✦</span>
-            <span>Pardon — the gallery has misplaced this work</span>
+            <span>{c.notFoundRule}</span>
             <span class="ornament">✦</span>
         </div>
         <h1 class="font-display italic text-3xl md:text-5xl text-[var(--text)] mb-6 leading-tight">
-            This piece is not on view.
+            {c.notFoundHead}
         </h1>
         <p class="text-[var(--subtext1)] font-sans text-lg mb-10 leading-relaxed">
-            The room you reached for has either been re-hung, withdrawn,<br class="hidden md:block" />
-            or never made it to the wall in the first place.
+            {bodyA}<br class="hidden md:block" />
+            {bodyB}
         </p>
-        <a href="/" class="btn-stamp">↶ Return to the catalogue</a>
+        <a href="/" class="btn btn--primary">↶ {c.returnHome}</a>
     </div>
 </Layout>

frontend/src/pages/admin/editor.astro

@@ -1,11 +1,14 @@
 ---
+import 'katex/dist/katex.min.css';
 import AdminLayout from '../../layouts/AdminLayout.astro';
 import Editor from '../../components/react/admin/Editor';
+import { getSiteMode } from '../../lib/siteMode';
 
 const editSlug = Astro.url.searchParams.get('edit') || undefined;
+const siteMode = getSiteMode();
 ---
 
 <AdminLayout title="Write Post" wide>
     <p slot="header-subtitle" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Create/Edit post.</p>
-    <Editor client:only="react" editSlug={editSlug} />
+    <Editor client:only="react" editSlug={editSlug} mode={siteMode} />
 </AdminLayout>

frontend/src/pages/admin/login.astro

@@ -1,8 +1,11 @@
 ---
 import Layout from '../../layouts/Layout.astro';
 import Login from '../../components/react/admin/Login';
+import { getSiteMode } from '../../lib/siteMode';
+
+const siteMode = getSiteMode();
 ---
 
-<Layout title="Admin Login">
-    <Login client:only="react" />
+<Layout title="Admin Login" description="Sign in to the back room." minimal>
+    <Login client:only="react" mode={siteMode} />
 </Layout>

frontend/src/pages/api/[...path].ts

@@ -2,6 +2,13 @@ import type { APIRoute } from 'astro';
 
 const FORBIDDEN_HEADERS = new Set([
   'host', 'connection', 'content-length', 'transfer-encoding', 'origin', 'referer',
+  'accept-encoding',
+]);
+
+// Node fetch auto-decompresses the response body, so any encoding/length
+// headers from the upstream no longer match what we forward to the browser.
+const FORBIDDEN_RESPONSE_HEADERS = new Set([
+  'content-encoding', 'content-length', 'transfer-encoding',
 ]);
 
 export const ALL: APIRoute = async ({ request, params }) => {
@@ -29,25 +36,26 @@ export const ALL: APIRoute = async ({ request, params }) => {
       headers,
     };
 
-    if (request.method !== 'GET' && request.method !== 'HEAD') {
-      const reqClone = request.clone();
-      if (request.method !== 'DELETE' || reqClone.body) {
-        fetchOptions.body = reqClone.body;
-        // @ts-ignore — required by Node fetch when body is a stream
-        fetchOptions.duplex = 'half';
-      }
+    if (request.method !== 'GET' && request.method !== 'HEAD' && request.body) {
+      fetchOptions.body = request.body;
+      // @ts-expect-error — required by Node fetch when body is a stream
+      fetchOptions.duplex = 'half';
     }
 
     const response = await fetch(url.toString(), fetchOptions);
 
     const responseHeaders = new Headers();
     response.headers.forEach((value, key) => {
+      const k = key.toLowerCase();
       // Set-Cookie can repeat and must NOT be merged. Handle it separately below.
-      if (key.toLowerCase() === 'set-cookie') return;
+      if (k === 'set-cookie') return;
+      if (FORBIDDEN_RESPONSE_HEADERS.has(k)) return;
       responseHeaders.set(key, value);
     });
-    // @ts-ignore — getSetCookie is on Node fetch's Headers
-    const setCookies: string[] = response.headers.getSetCookie?.() ?? [];
+    // getSetCookie is present on Node/undici Headers; type it locally so we
+    // neither depend on a specific @types/node nor need a ts-suppression.
+    const h = response.headers as Headers & { getSetCookie?: () => string[] };
+    const setCookies: string[] = h.getSetCookie?.() ?? [];
     for (const c of setCookies) {
       responseHeaders.append('set-cookie', c);
     }

frontend/src/pages/contact.astro

@@ -60,7 +60,7 @@ function obfuscateEmail(addr: string): { user: string; host: string; display: st
 	<section class="max-w-2xl mx-auto">
 		<div class="mb-10 md:mb-14">
 			<div class="font-display italic text-[var(--subtext0)] text-xs tracking-[0.3em] uppercase mb-4">Correspondence</div>
-			<h1 class="font-display italic font-semibold text-[var(--text)] text-5xl md:text-6xl leading-[0.95] tracking-tight mb-6">
+			<h1 class="font-display italic font-semibold text-[var(--text)] text-5xl md:text-6xl leading-[1.08] tracking-tight mb-6">
 				Get in touch
 			</h1>
 			{intro && (
@@ -116,7 +116,7 @@ function obfuscateEmail(addr: string): { user: string; host: string; display: st
 			<h2 class="font-display italic text-2xl md:text-3xl text-[var(--text)] border-l-2 border-[var(--mauve)] pl-4 mb-6">
 				Or send a note directly
 			</h2>
-			<ContactForm client:load />
+			<ContactForm client:idle />
 		</div>
 
 		<div class="section-rule mt-16">

frontend/src/pages/index.astro

@@ -3,12 +3,18 @@ import Layout from '../layouts/Layout.astro';
 import PostList from '../components/react/PostList';
 import EditableText from '../components/react/EditableText';
 import AssetsButton from '../components/react/AssetsButton';
+import { getSiteMode, copy } from '../lib/siteMode';
+
+const siteMode = getSiteMode();
+const c = copy(siteMode);
 
 const API_URL = process.env.PUBLIC_API_URL || 'http://localhost:3000';
 
 interface CoverImage {
 	url: string;
 	alt: string;
+	w?: number;
+	h?: number;
 }
 
 interface Post {
@@ -31,9 +37,12 @@ let siteConfig = {
 	welcome_subtitle: "An ongoing arrangement of pieces, sketches, and stray observations."
 };
 
+const cookieHeader = Astro.request.headers.get('cookie') ?? '';
+const fetchHeaders: HeadersInit = cookieHeader ? { cookie: cookieHeader } : {};
+
 try {
 	const [postsRes, configRes] = await Promise.all([
-		fetch(`${API_URL}/api/posts`),
+		fetch(`${API_URL}/api/posts`, { headers: fetchHeaders }),
 		fetch(`${API_URL}/api/config`)
 	]);
 
@@ -55,13 +64,18 @@ try {
 const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 ---
 
-<Layout title="Catalogue" description={siteConfig.welcome_subtitle}>
+<Layout title={c.indexTitle} description={siteConfig.welcome_subtitle}>
+	{posts[0]?.cover_image?.url && (
+		<Fragment slot="head">
+			<link rel="preload" as="image" href={posts[0].cover_image.url} fetchpriority="high" />
+		</Fragment>
+	)}
 	<section class="relative mb-16 md:mb-24">
 		<div class="max-w-2xl">
-				<h1 class="font-display italic font-semibold text-[var(--text)] text-5xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight mb-6">
+				<h1 class="font-display italic font-semibold text-[var(--text)] text-5xl md:text-7xl lg:text-8xl leading-[1.08] tracking-tight mb-6">
 					{isAdmin ? (
 						<EditableText
-							client:load
+							client:visible
 							initial={siteConfig.welcome_title}
 							fieldKey="welcome_title"
 							isAdmin
@@ -73,7 +87,7 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 				<p class="font-sans text-lg md:text-xl text-[var(--subtext1)] leading-relaxed max-w-xl">
 					{isAdmin ? (
 						<EditableText
-							client:load
+							client:visible
 							initial={siteConfig.welcome_subtitle}
 							fieldKey="welcome_subtitle"
 							isAdmin
@@ -86,16 +100,16 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 
 				{isAdmin && (
 					<div class="mt-8 flex flex-wrap items-center gap-3">
-						<a href="/admin/editor" class="btn-stamp">
+						<a href="/admin/editor" class="btn btn--primary">
 							<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
 							New work
 						</a>
-						<AssetsButton client:load className="btn-ghost" iconSize={12} />
-						<a href="/admin/messages" class="btn-ghost">
+						<AssetsButton client:idle className="btn btn--ghost" iconSize={14} />
+						<a href="/admin/messages" class="btn btn--ghost">
 							<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
 							Messages
 						</a>
-						<a href="/admin/settings" class="btn-ghost">
+						<a href="/admin/settings" class="btn btn--ghost">
 							<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/></svg>
 							Settings
 						</a>
@@ -118,10 +132,10 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 			</p>
 			<p class="font-sans text-[var(--subtext1)] mt-4">Check back soon.</p>
 			{isAdmin && (
-				<a href="/admin/editor" class="btn-stamp mt-8">Create the first post</a>
+				<a href="/admin/editor" class="btn btn--primary mt-8">Create the first post</a>
 			)}
 		</div>
 	)}
 
-	{posts.length > 0 && <PostList posts={posts} isAdmin={isAdmin} client:load />}
+	{posts.length > 0 && <PostList posts={posts} isAdmin={isAdmin} mode={siteMode} client:idle />}
 </Layout>

frontend/src/pages/posts/[slug].astro

@@ -1,12 +1,22 @@
 ---
+import 'katex/dist/katex.min.css';
 import Layout from '../../layouts/Layout.astro';
 import DeletePostButton from '../../components/react/DeletePostButton';
 import { renderMarkdown } from '../../lib/markdown';
+import { getSiteMode, copy } from '../../lib/siteMode';
+
+const siteMode = getSiteMode();
+const isBlog = siteMode === 'blog';
+const c = copy(siteMode);
 
 const { slug } = Astro.params;
 const API_URL = (typeof process !== 'undefined' ? process.env.PUBLIC_API_URL : import.meta.env.PUBLIC_API_URL) || 'http://localhost:3000';
 
-interface CoverImage { url: string; alt: string }
+interface CoverImage { url: string; alt: string; w?: number; h?: number }
+interface PostNeighbor {
+  slug: string;
+  title?: string;
+}
 interface PostDetail {
   slug: string;
   date: string;
@@ -18,10 +28,9 @@ interface PostDetail {
   reading_time: number;
   cover_image?: CoverImage;
   image_count: number;
-}
-interface PostInfo {
-  slug: string;
-  title?: string;
+  prev?: PostNeighbor;
+  next?: PostNeighbor;
+  dimensions?: Record<string, { w: number; h: number }>;
 }
 
 function formatDate(d: string) {
@@ -36,28 +45,17 @@ function formatSlug(s: string) {
 let post: PostDetail | null = null;
 let html = '';
 let error = '';
-let neighbors: { prev?: PostInfo; next?: PostInfo } = {};
+
+const cookieHeader = Astro.request.headers.get('cookie') ?? '';
+const fetchHeaders: HeadersInit = cookieHeader ? { cookie: cookieHeader } : {};
 
 try {
-  const [postRes, listRes] = await Promise.all([
-    fetch(`${API_URL}/api/posts/${encodeURIComponent(slug ?? '')}`),
-    fetch(`${API_URL}/api/posts`),
-  ]);
+  const postRes = await fetch(`${API_URL}/api/posts/${encodeURIComponent(slug ?? '')}`, { headers: fetchHeaders });
   if (postRes.ok) {
     post = await postRes.json();
-    html = renderMarkdown(post!.content);
+    html = renderMarkdown(post!.content, post!.dimensions);
   } else {
-    error = 'Work not found in the catalogue';
-  }
-  if (listRes.ok) {
-    const list: PostInfo[] = await listRes.json();
-    const i = list.findIndex(p => p.slug === slug);
-    if (i >= 0) {
-      neighbors = {
-        prev: i > 0 ? list[i - 1] : undefined,
-        next: i < list.length - 1 ? list[i + 1] : undefined,
-      };
-    }
+    error = c.postNotFound;
   }
 } catch (e) {
   const cause = (e as any)?.cause;
@@ -65,6 +63,11 @@ try {
   console.error(error);
 }
 
+const neighbors = {
+  prev: post?.prev,
+  next: post?.next,
+};
+
 const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
 ---
@@ -75,46 +78,56 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
     image={post?.cover_image?.url}
     type="article"
 >
+  {!isBlog && post?.cover_image?.url && (
+    <Fragment slot="head">
+      <link rel="preload" as="image" href={post.cover_image.url} fetchpriority="high" />
+    </Fragment>
+  )}
   <div id="reading-progress" class="reading-progress" aria-hidden="true"></div>
 
   {error && (
     <div class="max-w-2xl mx-auto py-20 md:py-32 text-center">
       <div class="font-display italic text-[var(--subtext0)] text-sm tracking-[0.3em] uppercase mb-4">Pardon —</div>
       <h2 class="font-display italic text-3xl md:text-5xl text-[var(--mauve)] mb-6 leading-tight">{error}</h2>
-      <a href="/" class="btn-ghost">← Return to the catalogue</a>
+      <a href="/" class="btn btn--ghost">← {c.returnHome}</a>
     </div>
   )}
 
   {post && (
     <article class="plate-enter">
       {/* Toolbar — exhibit nav */}
-      <div class="flex items-center justify-between gap-3 mb-10 md:mb-14 font-display italic text-sm text-[var(--subtext0)]">
-        <a href="/" class="inline-flex items-center gap-2 hover:text-[var(--mauve)] transition-colors group">
-          <span class="transition-transform group-hover:-translate-x-1">←</span>
-          Back to catalogue
+      <div class="flex flex-wrap items-center justify-between gap-3 mb-10 md:mb-14 font-display italic text-sm text-[var(--subtext0)]">
+        <a href="/" class="back-link">
+          <span class="bl-arrow" aria-hidden="true">←</span>
+          {c.backHome}
         </a>
 
         {isAdmin && (
           <div class="flex items-center gap-2">
-            <a href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`} class="btn-ghost">
+            <a href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`} class="btn btn--ghost">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
               Edit
             </a>
-            <DeletePostButton slug={post.slug} title={displayTitle} client:load />
+            <DeletePostButton slug={post.slug} title={displayTitle} mode={siteMode} client:idle />
           </div>
         )}
       </div>
 
       {/* Plaque header */}
       <header class="max-w-3xl mx-auto text-center mb-12 md:mb-16">
-        <h1 class="font-display italic font-semibold text-[var(--text)] text-4xl md:text-6xl lg:text-7xl leading-[0.95] tracking-tight mb-6">
+        <h1 class="font-display italic font-semibold text-[var(--text)] text-4xl md:text-6xl lg:text-7xl leading-[1.08] tracking-tight mb-6">
           {displayTitle}
         </h1>
 
         <div class="section-rule max-w-md mx-auto mb-6">
           <span class="ornament">✦</span>
           <span>{formatDate(post.date)}</span>
-          {post.image_count > 0 && (
+          {isBlog ? (
+            <>
+              <span class="ornament">·</span>
+              <span>{post.reading_time} min read</span>
+            </>
+          ) : post.image_count > 0 && (
             <>
               <span class="ornament">·</span>
               <span>{post.image_count} {post.image_count === 1 ? 'plate' : 'plates'}</span>
@@ -131,8 +144,8 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
 
         {post.draft && (
           <div class="mt-6 inline-block">
-            <span class="chip" style="background: var(--peach); color: var(--crust); border-color: var(--peach);">
-              Sketch · unpublished
+            <span class="chip chip-draft">
+              {c.draftLong}
             </span>
           </div>
         )}
@@ -147,17 +160,15 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
       {/* Body — works on paper */}
       <div id="post-content" class="prose" set:html={html} />
 
-      {/* Closing — continue the room */}
-      <div class="max-w-3xl mx-auto mt-20 md:mt-28">
-        <div class="section-rule mb-10">
-          <span class="ornament">✦</span>
-          <span>continue the gallery</span>
-          <span class="ornament">✦</span>
+      {isBlog ? (
+        <div class="max-w-3xl mx-auto mt-20 md:mt-28 text-center">
+          <a href="/" class="btn btn--ghost">← {c.backHome}</a>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      ) : (neighbors.prev || neighbors.next) && (
+        <nav class="post-nav max-w-3xl mx-auto mt-20 md:mt-28 grid grid-cols-1 md:grid-cols-2 gap-6" aria-label="Post navigation">
           {neighbors.prev && (
             <a href={`/posts/${encodeURIComponent(neighbors.prev.slug)}`} class="group glass p-6 hover:border-[var(--mauve)] transition-colors text-left">
-              <div class="font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">← Previously hung</div>
+              <div class="pn-eyebrow font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">← Previous</div>
               <div class="font-display italic text-xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors leading-snug">
                 {neighbors.prev.title || formatSlug(neighbors.prev.slug)}
               </div>
@@ -165,23 +176,14 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
           )}
           {neighbors.next && (
             <a href={`/posts/${encodeURIComponent(neighbors.next.slug)}`} class="group glass p-6 hover:border-[var(--mauve)] transition-colors text-right md:col-start-2">
-              <div class="font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">Next on the wall →</div>
+              <div class="pn-eyebrow font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">Next →</div>
               <div class="font-display italic text-xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors leading-snug">
                 {neighbors.next.title || formatSlug(neighbors.next.slug)}
               </div>
             </a>
           )}
-          {!neighbors.prev && !neighbors.next && (
-            <div class="md:col-span-2 text-center font-display italic text-[var(--subtext0)]">
-              This is the sole work currently on view.
-            </div>
-          )}
-        </div>
-
-        <div class="mt-12 text-center">
-          <a href="/" class="btn-ghost">↶ Return to catalogue</a>
-        </div>
-      </div>
+        </nav>
+      )}
     </article>
   )}
 
@@ -196,9 +198,18 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
         const pct = Math.max(0, Math.min(1, (window.scrollY - startY) / distance));
         bar.style.transform = 'scaleX(' + pct + ')';
       }
+      let pending = false;
+      function schedule() {
+        if (pending) return;
+        pending = true;
+        requestAnimationFrame(function () {
+          pending = false;
+          update();
+        });
+      }
       update();
-      window.addEventListener('scroll', update, { passive: true });
-      window.addEventListener('resize', update);
+      window.addEventListener('scroll', schedule, { passive: true });
+      window.addEventListener('resize', schedule);
     })();
   </script>
 </Layout>

frontend/src/pages/uploads/[...path].astro

@@ -8,10 +8,16 @@ if (!response.ok) {
   return new Response(null, { status: 404 });
 }
 
-return new Response(await response.blob(), {
-  headers: {
-    'content-type': response.headers.get('content-type') || 'application/octet-stream',
-    'cache-control': 'public, max-age=3600'
-  }
-});
+const headers = new Headers();
+const contentType = response.headers.get('content-type');
+if (contentType) headers.set('content-type', contentType);
+// Skip content-length / content-encoding: Node fetch auto-decompresses the
+// upstream response, so any length/encoding from the backend is stale.
+const etag = response.headers.get('etag');
+if (etag) headers.set('etag', etag);
+const lastModified = response.headers.get('last-modified');
+if (lastModified) headers.set('last-modified', lastModified);
+headers.set('cache-control', 'public, max-age=3600');
+
+return new Response(response.body, { headers });
 ---

frontend/src/styles/global.css

@@ -1,915 +1,21 @@
 @import "tailwindcss";
 
 /*
- * SALON HANG — gallery theme.
- * Aged parchment ground, oxblood ink, ochre+cobalt+vermillion accents.
- * Romantic gravity (Friedrich, Dix, Goya) + raw scrawl (Basquiat) + bold cutout (Matisse, Kahlo).
+ * Entry stylesheet. The cascade is order-sensitive (custom CSS is unlayered so
+ * it beats Tailwind utilities; per-theme overrides and the reduced-motion
+ * kill-switch rely on source order). These @imports are inlined by Tailwind v4
+ * at build IN ORDER — keep them in this exact sequence; do not reorder.
+ * See partials/ for the split-out sections.
  */
 
-@theme {
-  --color-crust: var(--crust);
-  --color-mantle: var(--mantle);
-  --color-bg: var(--base);
-  --color-surface0: var(--surface0);
-  --color-surface1: var(--surface1);
-  --color-surface2: var(--surface2);
-  --color-overlay0: var(--overlay0);
-  --color-overlay1: var(--overlay1);
-  --color-overlay2: var(--overlay2);
-  --color-text: var(--text);
-  --color-subtext0: var(--subtext0);
-  --color-subtext1: var(--subtext1);
-  --color-blue: var(--blue);
-  --color-lavender: var(--lavender);
-  --color-sapphire: var(--sapphire);
-  --color-sky: var(--sky);
-  --color-teal: var(--teal);
-  --color-green: var(--green);
-  --color-yellow: var(--yellow);
-  --color-peach: var(--peach);
-  --color-maroon: var(--maroon);
-  --color-red: var(--red);
-  --color-mauve: var(--mauve);
-  --color-pink: var(--pink);
-  --color-flamingo: var(--flamingo);
-  --color-rosewater: var(--rosewater);
-
-  --font-sans: 'EB Garamond Variable', 'EB Garamond', Georgia, 'Times New Roman', serif;
-  --font-display: 'Fraunces Variable', 'Fraunces', Georgia, 'Times New Roman', serif;
-  --font-hand: 'Caveat', 'Bradley Hand', cursive;
-  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
-}
-
-/* SALON — default. Aged parchment with romantic weight. */
-:root, .salon {
-  --crust: #14100C;
-  --mantle: #2A1F18;
-  --base: #ECE0C6;
-  --surface0: #DDCEB0;
-  --surface1: #B69C70;
-  --surface2: #826846;
-  --overlay0: #5C463A;
-  --overlay1: #463226;
-  --overlay2: #2E1F17;
-  --text: #1A120C;
-  --subtext0: #5C463A;
-  --subtext1: #3D2B1E;
-  /* accents — mapped to the original token names so existing UI flows pick them up */
-  --blue: #1F3A78;        /* Kahlo cobalt */
-  --lavender: #5C4D7A;    /* faded violet */
-  --sapphire: #2B3E5C;    /* deep ink-blue */
-  --sky: #4A6FA0;         /* muted azure */
-  --teal: #4C7264;        /* verdigris */
-  --green: #6A7341;       /* olive */
-  --yellow: #C9882B;      /* Friedrich ochre */
-  --peach: #C26847;       /* terracotta */
-  --maroon: #6B2B2A;      /* wine */
-  --red: #B83A2B;         /* Matisse/Goya vermillion */
-  --mauve: #6B1F1A;       /* oxblood — primary accent */
-  --pink: #B85A6C;        /* rosehip */
-  --flamingo: #C77A6C;    /* faded coral */
-  --rosewater: #E8D9BD;   /* bone */
-}
-
-/* Salon Noir — black gallery wall variant (Goya black paintings, Abramović stark). */
-.salon-noir {
-  --crust: #050402;
-  --mantle: #0E0A06;
-  --base: #16110B;
-  --surface0: #221A12;
-  --surface1: #3A2B1E;
-  --surface2: #5C4530;
-  --overlay0: #7A5D43;
-  --overlay1: #93755A;
-  --overlay2: #B69779;
-  --text: #ECE0C6;
-  --subtext0: #B69C70;
-  --subtext1: #D6C49E;
-  --blue: #5A7DC4;
-  --lavender: #9A8DBE;
-  --sapphire: #87A9D8;
-  --sky: #B0C4E0;
-  --teal: #84A89A;
-  --green: #B9C076;
-  --yellow: #E9B854;
-  --peach: #E89570;
-  --maroon: #A04A47;
-  --red: #E25940;
-  --mauve: #C24336;       /* lifted oxblood for dark bg contrast */
-  --pink: #E090A0;
-  --flamingo: #EBA797;
-  --rosewater: #F4E5C9;
-}
-
-/* GOTHIC — cathedral nightfall. Midnight violet ground, blood crimson,
- * tarnished candle gold, stained-glass indigo. Catholic-gothic + Sisters of
- * Mercy + Bauhaus stark. Primary accent: cathedral velvet mauve. */
-.gothic {
-  --crust: #030104;
-  --mantle: #0A0710;
-  --base: #110B18;
-  --surface0: #1A1224;
-  --surface1: #261A36;
-  --surface2: #382550;
-  --overlay0: #4F3970;
-  --overlay1: #6E5293;
-  --overlay2: #8D72B1;
-  --text: #EDE3F2;        /* bone, violet wash */
-  --subtext0: #9B8AB0;
-  --subtext1: #C0AED2;
-  --blue: #4239A4;        /* stained-glass deep */
-  --lavender: #9B7BD4;    /* candlelight through purple glass */
-  --sapphire: #5947B2;
-  --sky: #7C68C9;
-  --teal: #487B8A;        /* verdigris on bronze */
-  --green: #5E7842;       /* cemetery moss */
-  --yellow: #D4A82B;      /* taper / tarnished brass */
-  --peach: #B45A38;       /* rust */
-  --maroon: #5B1A24;
-  --red: #A41827;         /* arterial */
-  --mauve: #8B2C9E;       /* cathedral velvet — primary accent */
-  --pink: #B25288;        /* dried rose */
-  --flamingo: #C57B96;
-  --rosewater: #F0DDE8;
-}
-
-html {
-  font-family: var(--font-sans);
-  font-feature-settings: "kern", "liga", "calt", "onum";
-}
-
-body {
-  background-color: var(--base);
-  color: var(--text);
-  min-height: 100vh;
-  transition: background-color 0.3s ease, color 0.3s ease;
-  -webkit-font-smoothing: antialiased;
-  font-size: 1.0625rem;
-  line-height: 1.65;
-  position: relative;
-}
-
-/* Paper grain — applied as a fixed overlay so every page gets the texture.
- * All three layers sit behind content (negative z-index) so fixed-positioned
- * modals (e.g. the search palette) can escape ancestor stacking traps. */
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: -3;
-  background-color: var(--base);
-}
-body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: -1;
-  opacity: 0.32;
-  mix-blend-mode: multiply;
-  background-image:
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
-}
-.salon-noir body::after,
-html.salon-noir body::after {
-  opacity: 0.5;
-}
-.gothic body::after,
-html.gothic body::after {
-  opacity: 0.55;
-  background-image:
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.10 0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
-  mix-blend-mode: screen;
-}
-
-/* Floating motes of pigment — far background, very subtle. */
-.salon-atmosphere {
-  position: fixed;
-  inset: 0;
-  z-index: -2;
-  pointer-events: none;
-  overflow: hidden;
-}
-.salon-atmosphere::before,
-.salon-atmosphere::after {
-  content: "";
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(120px);
-  opacity: 0.18;
-}
-.salon-atmosphere::before {
-  width: 55vw; height: 55vw;
-  top: -15vw; left: -10vw;
-  background: var(--mauve);
-}
-.salon-atmosphere::after {
-  width: 45vw; height: 45vw;
-  bottom: -10vw; right: -10vw;
-  background: var(--blue);
-  opacity: 0.12;
-}
-
-code, pre, kbd, samp {
-  font-family: var(--font-mono);
-}
-
-/* Selection */
-::selection {
-  background: var(--mauve);
-  color: var(--rosewater);
-}
-
-/* ───── Display utilities ───── */
-.font-display {
-  font-family: var(--font-display);
-  font-feature-settings: "kern", "liga", "calt", "lnum", "ss01";
-  letter-spacing: -0.01em;
-}
-.font-hand {
-  font-family: var(--font-hand);
-  font-weight: 400;
-}
-.font-display-italic {
-  font-family: var(--font-display);
-  font-style: italic;
-  font-feature-settings: "kern", "liga", "calt", "ss01";
-}
-
-/* Roman numerals get small-caps treatment */
-.numeral {
-  font-family: var(--font-display);
-  font-variant-numeric: lining-nums;
-  letter-spacing: 0.08em;
-  font-weight: 500;
-}
-
-/* ───── Salon prose — exhibit plaque body ───── */
-.prose {
-  color: var(--text);
-  max-width: 62ch;
-  margin-left: auto;
-  margin-right: auto;
-  line-height: 1.75;
-  font-size: 1.125rem;
-  font-family: var(--font-sans);
-}
-@media (min-width: 768px) {
-  .prose { font-size: 1.1875rem; }
-}
-.prose > *:first-child { margin-top: 0; }
-
-.prose p:first-of-type::first-letter {
-  font-family: var(--font-display);
-  font-weight: 600;
-  font-size: 3.6em;
-  line-height: 0.85;
-  float: left;
-  margin: 0.08em 0.12em 0 -0.04em;
-  color: var(--mauve);
-}
-
-.prose h1 {
-  font-family: var(--font-display);
-  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
-  font-weight: 600;
-  font-style: italic;
-  color: var(--text);
-  margin: 0 0 1.25rem;
-  line-height: 1.05;
-  letter-spacing: -0.02em;
-}
-.prose h2 {
-  font-family: var(--font-display);
-  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
-  font-weight: 500;
-  color: var(--text);
-  margin: 3rem 0 1rem;
-  line-height: 1.2;
-  letter-spacing: -0.01em;
-}
-.prose h2::before {
-  content: "§ ";
-  color: var(--mauve);
-  font-style: italic;
-  opacity: 0.7;
-}
-.prose h3 {
-  font-family: var(--font-display);
-  font-size: 1.4rem;
-  font-weight: 500;
-  font-style: italic;
-  color: var(--text);
-  margin: 2.25rem 0 0.75rem;
-}
-.prose h4 {
-  font-family: var(--font-display);
-  font-size: 1.2rem;
-  font-weight: 500;
-  color: var(--subtext1);
-  margin: 1.75rem 0 0.5rem;
-}
-.prose h5 {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--subtext0);
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  margin: 1.5rem 0 0.5rem;
-}
-.prose h6 {
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--overlay0);
-  font-style: italic;
-  margin: 1rem 0 0.5rem;
-}
-.prose p { margin: 0 0 1.15rem; }
-
-.prose blockquote {
-  border-left: 3px double var(--mauve);
-  padding: 0.5rem 0 0.5rem 1.4rem;
-  margin: 1.75rem 0;
-  color: var(--subtext1);
-  font-family: var(--font-display);
-  font-style: italic;
-  font-size: 1.15em;
-  line-height: 1.55;
-}
-.prose blockquote::before {
-  content: "“";
-  font-family: var(--font-display);
-  color: var(--mauve);
-  font-size: 2.5em;
-  line-height: 0;
-  vertical-align: -0.35em;
-  margin-right: 0.1em;
-  opacity: 0.55;
-}
-
-.prose pre {
-  padding: 1rem 1.1rem;
-  border-radius: 0;
-  border: 1px solid var(--surface2);
-  border-left-width: 3px;
-  border-left-color: var(--mauve);
-  margin: 1.75rem 0;
-  background-color: color-mix(in srgb, var(--surface0) 70%, transparent);
-  font-size: 0.875rem;
-  line-height: 1.55;
-  overflow-x: auto;
-}
-.prose code {
-  background-color: color-mix(in srgb, var(--surface0) 90%, transparent);
-  padding: 0.1rem 0.4rem;
-  border-radius: 0;
-  border-bottom: 1px solid var(--surface1);
-  font-size: 0.9em;
-  color: var(--mauve);
-}
-.prose pre code {
-  background: transparent;
-  padding: 0;
-  border: 0;
-  color: inherit;
-  font-size: inherit;
-}
-
-.prose a {
-  color: var(--mauve);
-  text-decoration: underline;
-  text-decoration-color: var(--surface1);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
-  transition: color 0.15s, text-decoration-color 0.15s;
-}
-.prose a:hover {
-  color: var(--red);
-  text-decoration-color: var(--red);
-}
-
-.prose ul, .prose ol {
-  margin: 0 0 1.15rem;
-  padding-left: 1.6rem;
-}
-.prose ul { list-style: none; }
-.prose ul > li { position: relative; padding-left: 0.2rem; }
-.prose ul > li::before {
-  content: "❦";
-  position: absolute;
-  left: -1.2rem;
-  color: var(--mauve);
-  font-size: 0.85em;
-  top: 0.05em;
-}
-.prose ol { list-style: decimal-leading-zero; }
-.prose ol > li::marker { color: var(--mauve); font-family: var(--font-display); font-style: italic; }
-.prose li { margin: 0.3rem 0; }
-
-.prose hr {
-  margin: 3rem auto;
-  border: 0;
-  text-align: center;
-  height: 1em;
-}
-.prose hr::before {
-  content: "✦ ✦ ✦";
-  color: var(--surface2);
-  letter-spacing: 0.8em;
-  font-size: 0.85em;
-}
-
-.prose strong { color: var(--mauve); font-weight: 700; }
-.prose em { color: inherit; font-style: italic; font-family: var(--font-display); }
-.prose del { color: var(--overlay0); text-decoration: line-through; }
-
-/* ───── Figure / image plate — the heart of the gallery body ───── */
-.prose figure,
-.prose p > img:only-child {
-  margin: 2.5rem 0;
-}
-.prose figure {
-  display: block;
-  text-align: center;
-}
-.prose figure img,
-.prose img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: 0 auto;
-  border: 1px solid var(--surface2);
-  padding: 6px;
-  background:
-    linear-gradient(var(--rosewater), var(--rosewater)) padding-box,
-    linear-gradient(135deg, var(--surface2), var(--surface1)) border-box;
-  box-shadow:
-    0 1px 0 var(--surface0),
-    0 18px 38px -22px rgba(20, 16, 12, 0.45),
-    0 2px 6px -2px rgba(20, 16, 12, 0.2);
-  border-radius: 2px;
-}
-.salon-noir .prose figure img,
-.salon-noir .prose img,
-.gothic .prose figure img,
-.gothic .prose img {
-  background:
-    linear-gradient(var(--surface0), var(--surface0)) padding-box,
-    linear-gradient(135deg, var(--surface2), var(--surface1)) border-box;
-  box-shadow:
-    0 18px 38px -22px rgba(0, 0, 0, 0.7),
-    0 2px 6px -2px rgba(0, 0, 0, 0.5);
-}
-.gothic .prose figure img,
-.gothic .prose img {
-  box-shadow:
-    0 18px 38px -22px rgba(0, 0, 0, 0.85),
-    0 2px 6px -2px rgba(0, 0, 0, 0.6),
-    0 0 0 1px color-mix(in srgb, var(--mauve) 22%, transparent);
-}
-.prose figure figcaption {
-  font-family: var(--font-display);
-  font-style: italic;
-  font-size: 0.9rem;
-  color: var(--subtext0);
-  margin-top: 0.85rem;
-  letter-spacing: 0.02em;
-  line-height: 1.4;
-}
-.prose figure figcaption::before {
-  content: "— ";
-  color: var(--mauve);
-}
-
-/* GFM tables — keep, slightly more editorial */
-.prose table {
-  width: 100%;
-  margin: 1.75rem 0;
-  border-collapse: collapse;
-  border: 1px solid var(--surface2);
-  font-size: 0.95rem;
-  font-family: var(--font-sans);
-}
-.prose thead { background-color: color-mix(in srgb, var(--surface0) 80%, transparent); }
-.prose th {
-  padding: 0.55rem 0.9rem;
-  text-align: left;
-  font-weight: 600;
-  color: var(--text);
-  border-bottom: 1px solid var(--surface2);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 0.75rem;
-}
-.prose td {
-  padding: 0.5rem 0.9rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--surface1) 60%, transparent);
-}
-.prose tr:last-child td { border-bottom: 0; }
-
-/* ───── Salon plate — a single framed image card used on the gallery index ───── */
-.plate {
-  position: relative;
-  background: var(--rosewater);
-  padding: 14px 14px 0 14px;
-  border: 1px solid var(--surface2);
-  box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
-    0 1px 0 var(--surface0),
-    0 22px 42px -28px rgba(20, 16, 12, 0.5),
-    0 4px 12px -6px rgba(20, 16, 12, 0.25);
-  border-radius: 2px;
-  transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
-              box-shadow 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
-}
-.salon-noir .plate,
-.gothic .plate {
-  background: var(--surface0);
-}
-.plate:hover {
-  transform: translateY(-4px) rotate(-0.25deg);
-  box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 60%, transparent),
-    0 1px 0 var(--surface0),
-    0 32px 60px -28px rgba(20, 16, 12, 0.55),
-    0 8px 20px -8px rgba(20, 16, 12, 0.3);
-}
-.plate .plate-image {
-  position: relative;
-  overflow: hidden;
-  background: var(--mantle);
-}
-.plate .plate-image img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  filter: saturate(0.94) contrast(1.02);
-  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1), filter 0.4s ease;
-}
-/* Natural mode — container drops fixed aspect so image shows its true ratio. */
-.plate .plate-image.is-natural {
-  height: auto;
-}
-.plate .plate-image.is-natural img {
-  height: auto;
-  object-fit: contain;
-}
-.plate:hover .plate-image img {
-  transform: scale(1.03);
-  filter: saturate(1.05) contrast(1.04);
-}
-.plate .plate-caption {
-  padding: 14px 6px 16px 6px;
-  margin-top: 2px;
-  border-top: 1px solid color-mix(in srgb, var(--surface2) 50%, transparent);
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-.plate .plate-caption-title {
-  font-family: var(--font-display);
-  font-style: italic;
-  font-weight: 500;
-  font-size: 1.18rem;
-  line-height: 1.18;
-  color: var(--text);
-  letter-spacing: -0.005em;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  transition: color 0.25s ease;
-}
-.plate:hover .plate-caption-title {
-  color: var(--mauve);
-}
-.plate .plate-caption-summary {
-  font-family: var(--font-sans);
-  font-style: italic;
-  font-size: 0.82rem;
-  line-height: 1.4;
-  color: var(--subtext0);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.plate .plate-caption-meta {
-  font-family: var(--font-sans);
-  font-size: 0.68rem;
-  text-transform: uppercase;
-  letter-spacing: 0.22em;
-  color: var(--subtext0);
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-top: 0.25rem;
-}
-.plate .plate-caption-sep {
-  color: var(--mauve);
-  opacity: 0.55;
-}
-.plate-tag-mini {
-  position: absolute;
-  bottom: 18px;
-  right: 18px;
-  background: rgba(20, 16, 12, 0.78);
-  color: var(--rosewater);
-  font-family: var(--font-display);
-  font-size: 0.7rem;
-  letter-spacing: 0.16em;
-  padding: 3px 8px;
-  text-transform: uppercase;
-  backdrop-filter: blur(2px);
-}
-
-/* Nameplate — the museum-style header used in the site chrome */
-.nameplate {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  position: relative;
-}
-.nameplate::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -6px;
-  height: 2px;
-  background: linear-gradient(to right,
-    var(--mauve) 0%,
-    var(--mauve) 35%,
-    var(--surface2) 35%,
-    var(--surface2) 100%);
-}
-.nameplate-title {
-  font-family: var(--font-display);
-  font-weight: 600;
-  font-style: italic;
-  font-size: 1.6rem;
-  letter-spacing: -0.01em;
-  color: var(--text);
-  line-height: 1;
-}
-.nameplate-subtitle {
-  font-family: var(--font-sans);
-  font-size: 0.65rem;
-  letter-spacing: 0.32em;
-  text-transform: uppercase;
-  color: var(--subtext0);
-}
-
-/* Section ornaments */
-.section-rule {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  color: var(--subtext0);
-  font-family: var(--font-display);
-  font-style: italic;
-  font-size: 0.95rem;
-  letter-spacing: 0.04em;
-}
-.section-rule::before,
-.section-rule::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: var(--surface2);
-}
-.section-rule .ornament {
-  color: var(--mauve);
-}
-
-/* Scrawled handwritten margin notes */
-.scrawl {
-  font-family: var(--font-hand);
-  color: var(--mauve);
-  font-size: 1.4rem;
-  line-height: 1;
-  transform: rotate(-6deg);
-  display: inline-block;
-}
-.scrawl-mark::before {
-  content: "✕";
-  font-family: var(--font-hand);
-  color: var(--red);
-  margin-right: 0.35em;
-}
-
-/* Stripe (Matisse cutout) chip used for tags */
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  font-family: var(--font-display);
-  font-style: italic;
-  font-size: 0.78rem;
-  padding: 0.15rem 0.6rem;
-  background: color-mix(in srgb, var(--surface0) 80%, transparent);
-  border: 1px solid var(--surface2);
-  color: var(--subtext1);
-  border-radius: 1px;
-  letter-spacing: 0.02em;
-}
-.chip-accent {
-  background: var(--mauve);
-  color: var(--rosewater);
-  border-color: var(--mauve);
-}
-
-/* Card / glass — keep the name but reinterpret as a paper card */
-.glass {
-  background-color: color-mix(in srgb, var(--surface0) 80%, transparent);
-  border: 1px solid var(--surface2);
-  box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
-    0 10px 30px -20px rgba(20, 16, 12, 0.45);
-  border-radius: 2px;
-}
-.salon-noir .glass,
-.gothic .glass {
-  background-color: color-mix(in srgb, var(--surface0) 70%, transparent);
-}
-.gothic .glass {
-  border-color: color-mix(in srgb, var(--mauve) 35%, var(--surface2));
-  box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 18%, transparent),
-    0 14px 40px -24px rgba(0, 0, 0, 0.85);
-}
-
-/* ───── Buttons ───── */
-.btn-stamp {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-family: var(--font-display);
-  font-style: italic;
-  font-weight: 500;
-  font-size: 0.95rem;
-  padding: 0.55rem 1.2rem;
-  background: var(--mauve);
-  color: var(--rosewater);
-  border: 1px solid var(--mauve);
-  border-radius: 1px;
-  letter-spacing: 0.02em;
-  text-decoration: none;
-  cursor: pointer;
-  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
-  box-shadow: 0 4px 0 -2px color-mix(in srgb, var(--mauve) 60%, black);
-}
-.btn-stamp:hover {
-  transform: translateY(-1px);
-  background: var(--red);
-  border-color: var(--red);
-  box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--red) 60%, black);
-}
-.btn-stamp:active {
-  transform: translateY(1px);
-  box-shadow: 0 1px 0 -1px color-mix(in srgb, var(--mauve) 60%, black);
-}
-.btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-family: var(--font-sans);
-  font-size: 0.82rem;
-  padding: 0.4rem 0.85rem;
-  background: transparent;
-  color: var(--subtext1);
-  border: 1px solid var(--surface2);
-  border-radius: 1px;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  text-decoration: none;
-  cursor: pointer;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
-}
-.btn-ghost:hover {
-  color: var(--mauve);
-  border-color: var(--mauve);
-  background: color-mix(in srgb, var(--mauve) 8%, transparent);
-}
-
-/* Form input look */
-.field-input {
-  width: 100%;
-  background: color-mix(in srgb, var(--surface0) 60%, transparent);
-  border: 1px solid var(--surface2);
-  border-radius: 1px;
-  padding: 0.65rem 0.9rem;
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: 1rem;
-  transition: border-color 0.15s, background 0.15s;
-}
-.field-input:focus {
-  outline: none;
-  border-color: var(--mauve);
-  background: color-mix(in srgb, var(--surface0) 85%, var(--mauve) 8%);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mauve) 22%, transparent);
-}
-.field-label {
-  display: block;
-  font-family: var(--font-sans);
-  font-size: 0.72rem;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  color: var(--subtext0);
-  margin-bottom: 0.4rem;
-}
-
-/* hljs token colors — driven by theme tokens, slightly muted for parchment bg */
-.hljs { color: var(--text); background: transparent; }
-.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--mauve); font-weight: 600; }
-.hljs-string, .hljs-attr { color: var(--green); }
-.hljs-number, .hljs-literal { color: var(--peach); }
-.hljs-comment, .hljs-quote { color: var(--overlay0); font-style: italic; }
-.hljs-title, .hljs-section, .hljs-name { color: var(--blue); }
-.hljs-type, .hljs-class .hljs-title { color: var(--yellow); }
-.hljs-variable, .hljs-template-variable { color: var(--red); }
-
-/* KaTeX */
-.katex { color: var(--text); }
-
-/* Skeleton loader */
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    color-mix(in srgb, var(--surface0) 50%, transparent) 0%,
-    color-mix(in srgb, var(--surface1) 50%, transparent) 50%,
-    color-mix(in srgb, var(--surface0) 50%, transparent) 100%
-  );
-  background-size: 200% 100%;
-  animation: skeleton-shimmer 1.5s ease-in-out infinite;
-  border-radius: 1px;
-}
-@keyframes skeleton-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-/* Toast */
-.toast {
-  position: fixed;
-  bottom: 1.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--mantle);
-  border: 1px solid var(--surface2);
-  color: var(--rosewater);
-  padding: 0.65rem 1.1rem;
-  border-radius: 1px;
-  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
-  font-family: var(--font-display);
-  font-style: italic;
-  font-size: 0.9rem;
-  z-index: 200;
-  animation: toast-in 0.2s ease;
-}
-@keyframes toast-in {
-  from { opacity: 0; transform: translate(-50%, 8px); }
-  to   { opacity: 1; transform: translate(-50%, 0); }
-}
-
-/* Salon grid spans driven by --col-span custom prop (avoids Tailwind dynamic class issue). */
-@media (min-width: 768px) {
-  .md-col-span {
-    grid-column: span var(--col-span, 6) / span var(--col-span, 6);
-  }
-}
-
-/* Subtle page enter animation for gallery / plaque */
-@keyframes plate-fade-up {
-  from { opacity: 0; transform: translateY(12px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-.plate-enter {
-  opacity: 0;
-  animation: plate-fade-up 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
-}
-
-/* Custom checkbox accent for form bits inside the salon */
-input[type="checkbox"] { accent-color: var(--mauve); }
-input[type="date"] { color-scheme: light; }
-.salon-noir input[type="date"] { color-scheme: dark; }
-.gothic input[type="date"] { color-scheme: dark; }
-
-/* Reading progress bar - thin terracotta line */
-.reading-progress {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--mauve);
-  z-index: 150;
-  transform-origin: left;
-  transform: scaleX(0);
-  transition: transform 80ms linear;
-}
+@import "./partials/00-theme.css";
+@import "./partials/10-tokens.css";
+@import "./partials/20-atmosphere.css";
+@import "./partials/30-prose.css";
+@import "./partials/40-components.css";
+@import "./partials/45-blog.css";
+@import "./partials/50-controls.css";
+@import "./partials/60-breakcore.css";
+@import "./partials/70-cybersigil.css";
+@import "./partials/90-keyframes.css";
+@import "./partials/99-reduced-motion.css";

frontend/src/styles/partials/00-theme.css

@@ -0,0 +1,41 @@
+
+/*
+ * SALON HANG — gallery theme.
+ * Aged parchment ground, oxblood ink, ochre+cobalt+vermillion accents.
+ * Romantic gravity (Friedrich, Dix, Goya) + raw scrawl (Basquiat) + bold cutout (Matisse, Kahlo).
+ */
+
+@theme {
+  --color-crust: var(--crust);
+  --color-mantle: var(--mantle);
+  --color-bg: var(--base);
+  --color-surface0: var(--surface0);
+  --color-surface1: var(--surface1);
+  --color-surface2: var(--surface2);
+  --color-overlay0: var(--overlay0);
+  --color-overlay1: var(--overlay1);
+  --color-overlay2: var(--overlay2);
+  --color-text: var(--text);
+  --color-subtext0: var(--subtext0);
+  --color-subtext1: var(--subtext1);
+  --color-blue: var(--blue);
+  --color-lavender: var(--lavender);
+  --color-sapphire: var(--sapphire);
+  --color-sky: var(--sky);
+  --color-teal: var(--teal);
+  --color-green: var(--green);
+  --color-yellow: var(--yellow);
+  --color-peach: var(--peach);
+  --color-maroon: var(--maroon);
+  --color-red: var(--red);
+  --color-mauve: var(--mauve);
+  --color-pink: var(--pink);
+  --color-flamingo: var(--flamingo);
+  --color-rosewater: var(--rosewater);
+
+  --font-sans: 'EB Garamond Variable', 'EB Garamond', Georgia, 'Times New Roman', serif;
+  --font-display: 'Fraunces Variable', 'Fraunces', Georgia, 'Times New Roman', serif;
+  --font-hand: 'Caveat', 'Bradley Hand', cursive;
+  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
+}
+

frontend/src/styles/partials/10-tokens.css

@@ -0,0 +1,174 @@
+/* SALON — default. Aged parchment with romantic weight. */
+:root, .salon {
+  --crust: #14100C;
+  --mantle: #2A1F18;
+  --base: #ECE0C6;
+  --surface0: #DDCEB0;
+  --surface1: #B69C70;
+  --surface2: #826846;
+  --overlay0: #5C463A;
+  --overlay1: #463226;
+  --overlay2: #2E1F17;
+  --text: #1A120C;
+  --subtext0: #5C463A;
+  --subtext1: #3D2B1E;
+  /* accents — mapped to the original token names so existing UI flows pick them up */
+  --blue: #1F3A78;        /* Kahlo cobalt */
+  --lavender: #5C4D7A;    /* faded violet */
+  --sapphire: #2B3E5C;    /* deep ink-blue */
+  --sky: #4A6FA0;         /* muted azure */
+  --teal: #4C7264;        /* verdigris */
+  --green: #6A7341;       /* olive */
+  --yellow: #C9882B;      /* Friedrich ochre */
+  --peach: #C26847;       /* terracotta */
+  --maroon: #6B2B2A;      /* wine */
+  --red: #B83A2B;         /* Matisse/Goya vermillion */
+  --mauve: #6B1F1A;       /* oxblood — primary accent */
+  --pink: #B85A6C;        /* rosehip */
+  --flamingo: #C77A6C;    /* faded coral */
+  --rosewater: #E8D9BD;   /* bone */
+}
+
+/* Salon Noir — black gallery wall variant (Goya black paintings, Abramović stark). */
+.salon-noir {
+  --crust: #050402;
+  --mantle: #0E0A06;
+  --base: #16110B;
+  --surface0: #221A12;
+  --surface1: #3A2B1E;
+  --surface2: #5C4530;
+  --overlay0: #7A5D43;
+  --overlay1: #93755A;
+  --overlay2: #B69779;
+  --text: #ECE0C6;
+  --subtext0: #B69C70;
+  --subtext1: #D6C49E;
+  --blue: #5A7DC4;
+  --lavender: #9A8DBE;
+  --sapphire: #87A9D8;
+  --sky: #B0C4E0;
+  --teal: #84A89A;
+  --green: #B9C076;
+  --yellow: #E9B854;
+  --peach: #E89570;
+  --maroon: #A04A47;
+  --red: #E25940;
+  --mauve: #C24336;       /* lifted oxblood for dark bg contrast */
+  --pink: #E090A0;
+  --flamingo: #EBA797;
+  --rosewater: #F4E5C9;
+}
+
+/* BREAKCORE — early-2000s web rot + breakcore. CRT-violet ground, hot
+ * magenta primary, acid green / electric cyan / hazard yellow accents.
+ * Glitchy, blown-out, MSN-era saturation. */
+.breakcore {
+  --crust: #02000A;
+  --mantle: #06031A;
+  --base: #0A0612;
+  --surface0: #150929;
+  --surface1: #22113F;
+  --surface2: #3A1B62;
+  --overlay0: #5A2D8E;
+  --overlay1: #7B45B8;
+  --overlay2: #A06AD8;
+  --text: #F2F0FF;
+  --subtext0: #B9A8E0;
+  --subtext1: #D8CCFA;
+  --blue: #00B7FF;        /* MSN cyan */
+  --lavender: #B98CFF;    /* CRT violet */
+  --sapphire: #4B6BFF;    /* hyperlink */
+  --sky: #66E1FF;         /* aqua chrome */
+  --teal: #00F5C8;        /* matrix mint */
+  --green: #B6FF00;       /* acid */
+  --yellow: #FFD400;      /* hazard */
+  --peach: #FF8A3D;       /* GIF-era flame */
+  --maroon: #8B0A4B;
+  --red: #FF1F4F;         /* siren */
+  --mauve: #FF2EA6;       /* hot magenta — primary accent */
+  --pink: #FF7AD8;        /* bubblegum */
+  --flamingo: #FFA2C4;
+  --rosewater: #FFE8F6;
+}
+
+/* GOTHIC — cathedral nightfall. Midnight violet ground, blood crimson,
+ * tarnished candle gold, stained-glass indigo. Catholic-gothic + Sisters of
+ * Mercy + Bauhaus stark. Primary accent: cathedral velvet mauve. */
+.gothic {
+  --crust: #030104;
+  --mantle: #0A0710;
+  --base: #110B18;
+  --surface0: #1A1224;
+  --surface1: #261A36;
+  --surface2: #382550;
+  --overlay0: #4F3970;
+  --overlay1: #6E5293;
+  --overlay2: #8D72B1;
+  --text: #EDE3F2;        /* bone, violet wash */
+  --subtext0: #9B8AB0;
+  --subtext1: #C0AED2;
+  --blue: #4239A4;        /* stained-glass deep */
+  --lavender: #9B7BD4;    /* candlelight through purple glass */
+  --sapphire: #5947B2;
+  --sky: #7C68C9;
+  --teal: #487B8A;        /* verdigris on bronze */
+  --green: #5E7842;       /* cemetery moss */
+  --yellow: #D4A82B;      /* taper / tarnished brass */
+  --peach: #B45A38;       /* rust */
+  --maroon: #5B1A24;
+  --red: #A41827;         /* arterial */
+  --mauve: #8B2C9E;       /* cathedral velvet — primary accent */
+  --pink: #B25288;        /* dried rose */
+  --flamingo: #C57B96;
+  --rosewater: #F0DDE8;
+}
+
+/* CYBERSIGIL — Frostbite. Near-black ground, ice-cyan sigil linework,
+ * bruised-magenta primary accent, sterile bone-white text. Modern-breakcore
+ * melancholy: chromatic-aberration glitch, barbed sigil ornament, deep
+ * vignette + fine cold grain. Primary accent: bruised magenta (--mauve). */
+.cybersigil {
+  --crust: #020203;
+  --mantle: #050507;
+  --base: #070709;
+  --surface0: #0C0D11;
+  --surface1: #13151B;
+  --surface2: #1E2129;
+  --overlay0: #2A2F3A;
+  --overlay1: #3D4654;
+  --overlay2: #566174;
+  --text: #DCE6EC;        /* sterile bone-white, cool cast */
+  --subtext0: #7E8B99;
+  --subtext1: #AAB8C4;
+  --blue: #3FB4FF;        /* cold electric */
+  --lavender: #8E7CFF;    /* cold violet */
+  --sapphire: #3A5BFF;    /* deep cold hyperlink */
+  --sky: #4FE9FF;         /* ice-cyan — primary sigil line */
+  --teal: #2FD8D2;        /* frost mint — secondary neon */
+  --green: #5BE0A8;       /* cold jade */
+  --yellow: #E8C24A;      /* muted amber — inline code only */
+  --peach: #E07A5F;
+  --maroon: #5A1530;
+  --red: #FF3B5C;         /* siren — danger only */
+  --mauve: #C8327A;       /* bruised magenta — primary accent */
+  --pink: #E86AAE;        /* faded neon pink */
+  --flamingo: #E8A0C4;
+  --rosewater: #EAF2F6;   /* brightest bone — on-accent text */
+}
+
+html {
+  font-family: var(--font-sans);
+  font-feature-settings: "kern", "liga", "calt", "onum";
+}
+
+body {
+  background-color: var(--base);
+  color: var(--text);
+  min-height: 100vh;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  -webkit-font-smoothing: antialiased;
+  font-size: 1.0625rem;
+  line-height: 1.65;
+  position: relative;
+}
+

frontend/src/styles/partials/20-atmosphere.css

@@ -0,0 +1,105 @@
+/* Paper grain — applied as a fixed overlay so every page gets the texture.
+ * All three layers sit behind content (negative z-index) so fixed-positioned
+ * modals (e.g. the search palette) can escape ancestor stacking traps. */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -3;
+  background-color: var(--base);
+}
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.32;
+  mix-blend-mode: multiply;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+}
+.salon-noir body::after,
+html.salon-noir body::after {
+  opacity: 0.5;
+}
+.gothic body::after,
+html.gothic body::after {
+  opacity: 0.55;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.10 0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+  mix-blend-mode: screen;
+}
+/* Breakcore: blown-out RGB-tinted digital noise + CRT scanlines. */
+.breakcore body::after,
+html.breakcore body::after {
+  opacity: 0.55;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.18 0 0 0 0 0.65 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
+    repeating-linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 0) 2px,
+      rgba(0, 0, 0, 0.28) 3px,
+      rgba(0, 0, 0, 0) 4px
+    );
+  mix-blend-mode: screen;
+}
+.breakcore .salon-atmosphere::before { opacity: 0.32; }
+.breakcore .salon-atmosphere::after { opacity: 0.28; }
+
+/* Floating motes of pigment — far background, very subtle. */
+.salon-atmosphere {
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  pointer-events: none;
+  overflow: hidden;
+}
+.salon-atmosphere::before,
+.salon-atmosphere::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.18;
+}
+.salon-atmosphere::before {
+  width: 55vw; height: 55vw;
+  top: -15vw; left: -10vw;
+  background: var(--mauve);
+}
+.salon-atmosphere::after {
+  width: 45vw; height: 45vw;
+  bottom: -10vw; right: -10vw;
+  background: var(--blue);
+  opacity: 0.12;
+}
+
+code, pre, kbd, samp {
+  font-family: var(--font-mono);
+}
+
+/* Selection */
+::selection {
+  background: var(--mauve);
+  color: var(--rosewater);
+}
+
+/* Breakcore: chromatic-aberration glow on display headings + nameplate. */
+.breakcore .prose h1,
+.breakcore .prose h2,
+.breakcore h1.font-display,
+.breakcore .nameplate-title {
+  text-shadow:
+    -1px 0 0 color-mix(in srgb, var(--teal) 70%, transparent),
+    1px 0 0 color-mix(in srgb, var(--mauve) 70%, transparent),
+    0 0 18px color-mix(in srgb, var(--mauve) 35%, transparent);
+}
+.breakcore ::selection {
+  background: var(--green);
+  color: var(--crust);
+  text-shadow: 0 0 6px var(--mauve);
+}
+

frontend/src/styles/partials/30-prose.css

@@ -0,0 +1,353 @@
+/* ───── Display utilities ───── */
+.font-display {
+  font-family: var(--font-display);
+  font-feature-settings: "kern", "liga", "calt", "lnum", "ss01";
+  letter-spacing: -0.01em;
+}
+.font-hand {
+  font-family: var(--font-hand);
+  font-weight: 400;
+}
+.font-display-italic {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-feature-settings: "kern", "liga", "calt", "ss01";
+}
+
+/* Roman numerals get small-caps treatment */
+.numeral {
+  font-family: var(--font-display);
+  font-variant-numeric: lining-nums;
+  letter-spacing: 0.08em;
+  font-weight: 500;
+}
+
+/* ───── Salon prose — exhibit plaque body ───── */
+.prose {
+  color: var(--text);
+  max-width: none;
+  line-height: 1.75;
+  font-size: 1.125rem;
+  font-family: var(--font-sans);
+}
+@media (min-width: 768px) {
+  .prose { font-size: 1.1875rem; }
+}
+.prose > *:first-child { margin-top: 0; }
+
+.prose h1 {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
+  font-weight: 600;
+  font-style: italic;
+  color: var(--text);
+  margin: 0 0 1.25rem;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  padding-bottom: 0.06em;
+}
+.prose h2 {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
+  font-weight: 500;
+  color: var(--text);
+  margin: 3rem 0 1rem;
+  padding-bottom: 0.35rem;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  border-bottom: 1px solid color-mix(in srgb, var(--mauve) 30%, transparent);
+}
+.prose h3 {
+  font-family: var(--font-display);
+  font-size: 1.4rem;
+  font-weight: 500;
+  font-style: italic;
+  color: var(--text);
+  margin: 2.25rem 0 0.75rem;
+}
+.prose h4 {
+  font-family: var(--font-display);
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: var(--subtext1);
+  margin: 1.75rem 0 0.5rem;
+}
+.prose h5 {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--subtext0);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  margin: 1.5rem 0 0.5rem;
+}
+.prose h6 {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--overlay0);
+  font-style: italic;
+  margin: 1rem 0 0.5rem;
+}
+.prose :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 5rem; }
+.prose p { margin: 0 0 1.15rem; }
+
+.prose blockquote {
+  border-left: 3px solid var(--mauve);
+  padding: 0.25rem 0 0.25rem 1.4rem;
+  margin: 1.75rem 0;
+  color: var(--subtext1);
+  font-style: italic;
+}
+.prose blockquote p { margin: 0 0 0.6rem; }
+.prose blockquote p:last-child { margin: 0; }
+
+.prose pre {
+  padding: 1rem 1.1rem;
+  border-radius: 0;
+  border: 1px solid var(--surface2);
+  border-left-width: 3px;
+  border-left-color: var(--mauve);
+  margin: 1.75rem 0;
+  background-color: color-mix(in srgb, var(--surface0) 70%, transparent);
+  font-size: 0.875rem;
+  line-height: 1.55;
+  overflow-x: auto;
+}
+.prose code {
+  background-color: color-mix(in srgb, var(--surface0) 90%, transparent);
+  padding: 0.1rem 0.4rem;
+  border-radius: 0;
+  border-bottom: 1px solid var(--surface1);
+  font-size: 0.9em;
+  color: var(--mauve);
+}
+.prose pre code {
+  background: transparent;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  font-size: inherit;
+}
+.prose a code,
+.prose :is(h1, h2, h3, h4) code { color: inherit; }
+
+.prose a {
+  color: var(--mauve);
+  text-decoration: underline;
+  text-decoration-color: var(--surface1);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition: color 0.15s, text-decoration-color 0.15s;
+}
+.prose a:hover {
+  color: var(--red);
+  text-decoration-color: var(--red);
+}
+
+.prose ul, .prose ol {
+  margin: 0 0 1.15rem;
+  padding-left: 1.6rem;
+}
+.prose ul { list-style: none; }
+.prose ul > li { position: relative; padding-left: 0.2rem; }
+.prose ul > li::before {
+  content: "";
+  position: absolute;
+  left: -1.1rem;
+  top: 0.62em;
+  width: 0.42em;
+  height: 0.42em;
+  background: var(--mauve);
+  transform: rotate(45deg);
+}
+.prose ol { list-style: decimal-leading-zero; }
+.prose ol > li::marker { color: var(--mauve); font-family: var(--font-display); font-style: italic; }
+.prose li { margin: 0.3rem 0; }
+/* Loose lists wrap items in <p>; drop the paragraph block-margin inside li. */
+.prose li > p { margin: 0; }
+.prose li > p + p { margin-top: 0.6rem; }
+/* GFM task lists — kill the diamond, keep the checkbox. */
+.prose ul > li:has(input[type="checkbox"]) { padding-left: 0; }
+.prose ul > li:has(input[type="checkbox"])::before { content: none; }
+.prose li > input[type="checkbox"] {
+  margin: 0 0.5rem 0 0;
+  vertical-align: 0.04em;
+  accent-color: var(--mauve);
+}
+
+.prose hr {
+  margin: 3rem auto;
+  border: 0;
+  height: 1px;
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--mauve) 55%, transparent) 22%,
+    transparent 45%,
+    transparent 55%,
+    color-mix(in srgb, var(--mauve) 55%, transparent) 78%,
+    transparent 100%
+  );
+  position: relative;
+  overflow: visible;
+}
+.prose hr::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background: var(--mauve);
+}
+
+.prose strong { color: inherit; font-weight: 700; }
+.prose em { color: inherit; font-style: italic; font-family: var(--font-display); }
+.prose del { color: var(--overlay0); text-decoration: line-through; }
+
+/* ───── Figure / image plate — the heart of the gallery body ───── */
+.prose figure {
+  display: block;
+  text-align: center;
+  margin: 2.5rem 0;
+}
+.prose figure img,
+.prose img {
+  display: block;
+  max-width: 100%;
+  /* A tall single image must never overrun the viewport: cap its height and
+   * let width track aspect so it scales down whole, centred. (figure-row
+   * images opt out below — their height is already bounded by --row-h.) */
+  max-height: 85vh;
+  width: auto;
+  height: auto;
+  margin: 0 auto;
+  border: 1px solid var(--surface2);
+  padding: 6px;
+  background:
+    linear-gradient(var(--rosewater), var(--rosewater)) padding-box,
+    linear-gradient(135deg, var(--surface2), var(--surface1)) border-box;
+  box-shadow:
+    0 1px 0 var(--surface0),
+    0 18px 38px -22px rgba(20, 16, 12, 0.45),
+    0 2px 6px -2px rgba(20, 16, 12, 0.2);
+  border-radius: 2px;
+}
+.salon-noir .prose figure img,
+.salon-noir .prose img,
+.gothic .prose figure img,
+.gothic .prose img,
+.breakcore .prose figure img,
+.breakcore .prose img {
+  background:
+    linear-gradient(var(--surface0), var(--surface0)) padding-box,
+    linear-gradient(135deg, var(--surface2), var(--surface1)) border-box;
+  box-shadow:
+    0 18px 38px -22px rgba(0, 0, 0, 0.7),
+    0 2px 6px -2px rgba(0, 0, 0, 0.5);
+}
+.gothic .prose figure img,
+.gothic .prose img {
+  box-shadow:
+    0 18px 38px -22px rgba(0, 0, 0, 0.85),
+    0 2px 6px -2px rgba(0, 0, 0, 0.6),
+    0 0 0 1px color-mix(in srgb, var(--mauve) 22%, transparent);
+}
+.prose figure figcaption {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.9rem;
+  color: var(--subtext0);
+  margin-top: 0.85rem;
+  letter-spacing: 0.02em;
+  line-height: 1.4;
+}
+/* Multi-image rows. Consecutive markdown images auto-collapse into a flex
+ * row; each figure gets `flex: <aspect-ratio>` inline so widths divide
+ * proportionally and heights line up. Wraps to a column on narrow screens. */
+.prose .figure-row {
+  /* Target row height. Each figure's flex-basis is ratio × this value, so
+   * rows pack as many figures as fit at roughly --row-h tall, then wrap.
+   * --row-max caps how tall a sparsely-filled final row can grow. */
+  --row-h: 16rem;
+  --row-max: 30rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+  align-items: flex-start;
+  margin: 2.5rem 0;
+  width: 100%;
+}
+@media (min-width: 1024px) {
+  .prose .figure-row {
+    --row-h: 18rem;
+    --row-max: 34rem;
+  }
+}
+.prose .figure-row figure {
+  margin: 0;
+  min-width: 0;     /* allow flex children to shrink below content width */
+  flex-basis: 0;
+}
+.prose .figure-row figure img {
+  width: 100%;
+  max-width: 100%;
+  max-height: none;
+  height: auto;
+  margin: 0;
+}
+.prose .figure-row figure figcaption {
+  text-align: left;
+  margin-top: 0.55rem;
+  font-size: 0.82rem;
+}
+@media (max-width: 640px) {
+  .prose .figure-row {
+    flex-direction: column;
+    width: 100%;
+    margin-left: 0;
+    gap: 1.4rem;
+  }
+  .prose .figure-row figure {
+    flex: 1 1 100% !important;
+  }
+  .prose .figure-row figure figcaption {
+    text-align: center;
+  }
+}
+
+.prose figure figcaption::before {
+  content: "— ";
+  color: var(--mauve);
+}
+
+/* GFM tables — keep, slightly more editorial */
+.prose table {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  margin: 1.75rem 0;
+  border-collapse: collapse;
+  border: 1px solid var(--surface2);
+  font-size: 0.95rem;
+  font-family: var(--font-sans);
+}
+.prose thead { background-color: color-mix(in srgb, var(--surface0) 80%, transparent); }
+.prose th {
+  padding: 0.55rem 0.9rem;
+  text-align: left;
+  font-weight: 600;
+  color: var(--text);
+  border-bottom: 1px solid var(--surface2);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+}
+.prose td {
+  padding: 0.5rem 0.9rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--surface1) 60%, transparent);
+}
+.prose tr:last-child td { border-bottom: 0; }
+

frontend/src/styles/partials/40-components.css

@@ -0,0 +1,343 @@
+/* ───── Salon plate — a single framed image card used on the gallery index ───── */
+.plate {
+  position: relative;
+  background: var(--rosewater);
+  padding: 14px 14px 0 14px;
+  border: 1px solid var(--surface2);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
+    0 1px 0 var(--surface0),
+    0 22px 42px -28px rgba(20, 16, 12, 0.5),
+    0 4px 12px -6px rgba(20, 16, 12, 0.25);
+  border-radius: 2px;
+  transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
+              box-shadow 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
+}
+.salon-noir .plate,
+.gothic .plate,
+.breakcore .plate {
+  background: var(--surface0);
+}
+.salon-noir .plate,
+.gothic .plate {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
+    0 22px 42px -28px rgba(0, 0, 0, 0.7),
+    0 4px 12px -6px rgba(0, 0, 0, 0.45);
+}
+.breakcore .plate {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 35%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--mauve) 20%, transparent),
+    0 22px 42px -28px rgba(255, 46, 166, 0.35),
+    0 0 24px -8px color-mix(in srgb, var(--mauve) 40%, transparent);
+}
+.plate:hover {
+  transform: translateY(-4px) rotate(-0.25deg);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 60%, transparent),
+    0 1px 0 var(--surface0),
+    0 32px 60px -28px rgba(20, 16, 12, 0.55),
+    0 8px 20px -8px rgba(20, 16, 12, 0.3);
+}
+.salon-noir .plate:hover,
+.gothic .plate:hover {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 60%, transparent),
+    0 32px 60px -28px rgba(0, 0, 0, 0.8),
+    0 8px 20px -8px rgba(0, 0, 0, 0.55);
+}
+.breakcore .plate:hover {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 45%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--mauve) 30%, transparent),
+    0 32px 60px -28px rgba(255, 46, 166, 0.45),
+    0 0 32px -8px color-mix(in srgb, var(--mauve) 50%, transparent);
+}
+/* Keyboard focus for the card link — salon-appropriate inset frame + ring. */
+.plate:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 2px var(--mauve),
+    0 0 0 3px color-mix(in srgb, var(--mauve) 40%, transparent),
+    0 22px 42px -28px rgba(20, 16, 12, 0.5);
+}
+.breakcore .plate:focus-visible {
+  box-shadow:
+    inset 0 0 0 2px var(--mauve),
+    0 0 0 2px var(--green),
+    0 0 28px -6px color-mix(in srgb, var(--mauve) 60%, transparent);
+}
+
+.plate .plate-image {
+  position: relative;
+  overflow: hidden;
+  background: var(--mantle);
+}
+.plate .plate-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.94) contrast(1.02);
+  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1), filter 0.4s ease;
+}
+/* Natural mode — container drops fixed aspect so image shows its true ratio. */
+.plate .plate-image.is-natural {
+  height: auto;
+}
+.plate .plate-image.is-natural img {
+  height: auto;
+  object-fit: contain;
+}
+.plate:hover .plate-image img {
+  transform: scale(1.03);
+  filter: saturate(1.05) contrast(1.04);
+}
+.plate .plate-caption {
+  padding: 14px 6px 16px 6px;
+  margin-top: 2px;
+  border-top: 1px solid color-mix(in srgb, var(--surface2) 50%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.plate .plate-caption-title {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 500;
+  font-size: 1.18rem;
+  line-height: 1.3;
+  color: var(--text);
+  letter-spacing: -0.005em;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  /* line-clamp's overflow:hidden clips italic-Fraunces descenders (g, y, p).
+   * Pad the clip box and pull the layout back with a matching negative
+   * margin so descenders survive without shifting siblings. */
+  padding-bottom: 0.16em;
+  margin-bottom: -0.16em;
+  transition: color 0.25s ease;
+}
+.plate:hover .plate-caption-title {
+  color: var(--mauve);
+}
+.plate .plate-caption-summary {
+  font-family: var(--font-sans);
+  font-style: italic;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  color: var(--subtext0);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  padding-bottom: 0.14em;
+  margin-bottom: -0.14em;
+}
+.plate .plate-caption-meta {
+  font-family: var(--font-sans);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+  color: var(--subtext0);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-top: 0.25rem;
+}
+.plate .plate-caption-sep {
+  color: var(--mauve);
+  opacity: 0.55;
+}
+.plate-tag-mini {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  background: color-mix(in srgb, var(--crust) 70%, transparent);
+  color: var(--rosewater);
+  border: 1px solid color-mix(in srgb, var(--rosewater) 18%, transparent);
+  border-radius: 999px;
+  font-family: var(--font-sans);
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  padding: 4px 11px;
+  text-transform: uppercase;
+  backdrop-filter: blur(3px);
+}
+/* Draft/"Sketch" marker — same chip, pinned bottom-left, amber instead of
+ * the neutral catalogue tag. Themed per skin below (no inline colors). */
+.plate-tag-mini--draft {
+  left: 16px;
+  right: auto;
+  background: color-mix(in srgb, var(--peach) 88%, var(--crust));
+  color: var(--crust);
+  border-color: color-mix(in srgb, var(--peach) 45%, transparent);
+}
+/* Breakcore: hard neon catalogue tag — sharp rect, offset shadow, glow.
+ * Matches the layer's hazard-tape / hard-offset chrome language. */
+.breakcore .plate-tag-mini {
+  background: var(--crust);
+  color: var(--green);
+  border: 1px solid var(--mauve);
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-shadow: 0 0 6px color-mix(in srgb, var(--green) 60%, transparent);
+  box-shadow:
+    2px 2px 0 var(--mauve),
+    0 0 14px -2px color-mix(in srgb, var(--mauve) 65%, transparent);
+  backdrop-filter: none;
+}
+.breakcore .plate-tag-mini--draft {
+  color: var(--peach);
+  border-color: var(--peach);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--peach) 60%, transparent);
+  box-shadow:
+    2px 2px 0 var(--peach),
+    0 0 14px -2px color-mix(in srgb, var(--peach) 65%, transparent);
+}
+
+/* Nameplate — the museum-style header used in the site chrome */
+.nameplate {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  position: relative;
+}
+.nameplate::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -6px;
+  height: 2px;
+  background: linear-gradient(to right,
+    var(--mauve) 0%,
+    var(--mauve) 35%,
+    var(--surface2) 35%,
+    var(--surface2) 100%);
+}
+.nameplate-title {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-style: italic;
+  font-size: 1.6rem;
+  letter-spacing: -0.01em;
+  color: var(--text);
+  /* Loose enough that italic-Fraunces descenders (g, y, p) and the
+   * breakcore chromatic glow clear the line box — nothing slices them. */
+  line-height: 1.2;
+  padding-bottom: 0.06em;
+}
+.nameplate-subtitle {
+  font-family: var(--font-sans);
+  font-size: 0.65rem;
+  letter-spacing: 0.32em;
+  text-transform: uppercase;
+  color: var(--subtext0);
+}
+
+/* Section ornaments */
+.section-rule {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: var(--subtext0);
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.95rem;
+  letter-spacing: 0.04em;
+}
+.section-rule::before,
+.section-rule::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--surface2);
+}
+.section-rule .ornament {
+  color: var(--mauve);
+}
+
+/* Scrawled handwritten margin notes */
+.scrawl {
+  font-family: var(--font-hand);
+  color: var(--mauve);
+  font-size: 1.4rem;
+  line-height: 1;
+  transform: rotate(-6deg);
+  display: inline-block;
+}
+.scrawl-mark::before {
+  content: "✕";
+  font-family: var(--font-hand);
+  color: var(--red);
+  margin-right: 0.35em;
+}
+
+/* Stripe (Matisse cutout) chip used for tags */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.78rem;
+  padding: 0.15rem 0.6rem;
+  background: color-mix(in srgb, var(--surface0) 80%, transparent);
+  border: 1px solid var(--surface2);
+  color: var(--subtext1);
+  border-radius: 1px;
+  letter-spacing: 0.02em;
+}
+.chip-accent {
+  background: var(--mauve);
+  color: var(--rosewater);
+  border-color: var(--mauve);
+}
+.chip-draft {
+  background: color-mix(in srgb, var(--peach) 18%, transparent);
+  color: var(--peach);
+  border-color: color-mix(in srgb, var(--peach) 50%, transparent);
+}
+
+/* Card / glass — keep the name but reinterpret as a paper card */
+.glass {
+  background-color: color-mix(in srgb, var(--surface0) 80%, transparent);
+  border: 1px solid var(--surface2);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
+    0 10px 30px -20px rgba(20, 16, 12, 0.45);
+  border-radius: 2px;
+}
+.salon-noir .glass,
+.gothic .glass,
+.breakcore .glass {
+  background-color: color-mix(in srgb, var(--surface0) 70%, transparent);
+}
+.salon-noir .glass {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
+    0 14px 40px -24px rgba(0, 0, 0, 0.8);
+}
+.gothic .glass {
+  border-color: color-mix(in srgb, var(--mauve) 35%, var(--surface2));
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 18%, transparent),
+    0 14px 40px -24px rgba(0, 0, 0, 0.85);
+}
+.breakcore .glass {
+  border-color: color-mix(in srgb, var(--mauve) 45%, var(--surface2));
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 25%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--teal) 15%, transparent),
+    0 14px 40px -24px rgba(0, 0, 0, 0.9);
+}
+

frontend/src/styles/partials/45-blog.css

@@ -0,0 +1,176 @@
+/*
+ * BLOG MODE — writing-first stacked rows.
+ *
+ * Same skin as the gallery (display font, palette, theme variants, paper
+ * grain, CyberFx) — only the *focus* flips: the post's words lead, the cover
+ * shrinks to a side thumbnail. Everything here is scoped under
+ * `html.mode-blog`; atelier (the default) never sees these rules, and the
+ * justified-gallery markup simply isn't emitted in blog mode.
+ */
+
+html.mode-blog .post-list {
+  width: 100%;
+  max-width: 52rem;
+}
+
+/* One post = one row, separated by a hairline like a printed contents page. */
+html.mode-blog .post-row {
+  position: relative;
+  padding: 1.9rem 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--surface2) 55%, transparent);
+}
+html.mode-blog .post-row:first-child {
+  padding-top: 0;
+}
+html.mode-blog .post-row:last-of-type {
+  border-bottom: none;
+}
+html.breakcore.mode-blog .post-row {
+  border-bottom-color: color-mix(in srgb, var(--mauve) 30%, transparent);
+}
+
+html.mode-blog .post-row-link {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.75rem;
+  outline: none;
+}
+html.mode-blog .post-row-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+html.mode-blog .post-row-title {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 600;
+  font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.4rem);
+  line-height: 1.12;
+  letter-spacing: -0.012em;
+  color: var(--text);
+  /* clip-box padding so italic Fraunces descenders survive (same trick as
+   * .plate-caption-title) */
+  padding-bottom: 0.08em;
+  margin-bottom: -0.08em;
+  transition: color 0.3s ease;
+}
+html.mode-blog .post-row-link:hover .post-row-title,
+html.mode-blog .post-row-link:focus-visible .post-row-title {
+  color: var(--mauve);
+}
+
+html.mode-blog .post-row-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.7rem;
+  font-family: var(--font-sans);
+  font-size: 0.78rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--subtext0);
+}
+html.mode-blog .post-row-meta .sep {
+  color: var(--overlay0);
+}
+
+html.mode-blog .post-row-excerpt {
+  margin-top: 0.85rem;
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1.65;
+  color: var(--subtext1);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+html.mode-blog .post-row-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-top: 1rem;
+}
+
+/* Side thumbnail — framed like a small plate so the salon material carries
+ * over. position:relative + overflow:hidden so the cybersigil hover sigil
+ * (.cs-plate-sig, inset:0) pins to the image box, never the row. */
+html.mode-blog .post-row-thumb {
+  position: relative;
+  flex: 0 0 auto;
+  width: clamp(96px, 22vw, 184px);
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  background: var(--mantle);
+  border: 1px solid var(--surface2);
+  border-radius: 2px;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
+    0 14px 30px -22px rgba(20, 16, 12, 0.5);
+  transition: box-shadow 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
+}
+html.salon-noir.mode-blog .post-row-thumb,
+html.gothic.mode-blog .post-row-thumb {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
+    0 14px 30px -22px rgba(0, 0, 0, 0.75);
+}
+html.breakcore.mode-blog .post-row-thumb {
+  border-color: color-mix(in srgb, var(--mauve) 40%, var(--surface2));
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 28%, transparent),
+    0 0 22px -10px color-mix(in srgb, var(--mauve) 45%, transparent);
+}
+html.mode-blog .post-row-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.94) contrast(1.02);
+  transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), filter 0.4s ease;
+}
+html.mode-blog .post-row-link:hover .post-row-thumb img,
+html.mode-blog .post-row-link:focus-visible .post-row-thumb img {
+  transform: scale(1.04);
+  filter: saturate(1.05) contrast(1.04);
+}
+html.mode-blog .post-row-link:hover .post-row-thumb,
+html.mode-blog .post-row-link:focus-visible .post-row-thumb {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 62%, transparent),
+    0 20px 38px -22px rgba(20, 16, 12, 0.55);
+}
+html.breakcore.mode-blog .post-row-link:hover .post-row-thumb,
+html.breakcore.mode-blog .post-row-link:focus-visible .post-row-thumb {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 42%, transparent),
+    0 0 30px -8px color-mix(in srgb, var(--mauve) 55%, transparent);
+}
+
+/* Keyboard focus — inset salon ring on the whole row link. */
+html.mode-blog .post-row-link:focus-visible {
+  box-shadow:
+    inset 0 0 0 2px var(--mauve),
+    0 0 0 3px color-mix(in srgb, var(--mauve) 35%, transparent);
+  border-radius: 2px;
+}
+
+html.mode-blog .post-row-draft {
+  font-family: var(--font-display);
+  font-style: italic;
+  letter-spacing: 0.04em;
+}
+
+/* Tighter stack on phones; thumbnail drops below the text. */
+@media (max-width: 600px) {
+  html.mode-blog .post-row-link {
+    flex-direction: column-reverse;
+    gap: 1rem;
+  }
+  html.mode-blog .post-row-thumb {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+  }
+}

frontend/src/styles/partials/50-controls.css

@@ -0,0 +1,454 @@
+/* ───── Buttons — one system ─────
+ * Base .btn = layout + size + focus/disabled. One variant for color
+ * (--primary / --ghost / --danger), one size modifier (--sm / --lg),
+ * shape modifiers (--icon / --block). Never restyle buttons ad-hoc. */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 2.5rem;
+  padding: 0 1.2rem;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 500;
+  font-size: 0.95rem;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  background: transparent;
+  color: var(--text);
+  border: 1px solid transparent;
+  border-radius: 1px;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease,
+              border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.btn:focus-visible {
+  outline: none;
+  border-color: var(--mauve);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mauve) 35%, transparent);
+}
+.btn:disabled,
+.btn[aria-disabled="true"] {
+  opacity: 0.55;
+  cursor: default;
+  pointer-events: none;
+}
+.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
+
+/* Variants */
+.btn--primary {
+  background: var(--mauve);
+  color: var(--rosewater);
+  border-color: color-mix(in srgb, var(--mauve) 80%, var(--crust));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
+}
+.btn--primary:hover {
+  transform: translateY(-1px);
+  background: var(--red);
+  border-color: color-mix(in srgb, var(--red) 80%, var(--crust));
+  box-shadow: 0 7px 16px -7px color-mix(in srgb, var(--red) 65%, transparent);
+}
+.btn--primary:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+.btn--ghost {
+  color: var(--subtext1);
+  border-color: var(--surface2);
+  background: color-mix(in srgb, var(--surface0) 45%, transparent);
+}
+.btn--ghost:hover {
+  color: var(--mauve);
+  border-color: color-mix(in srgb, var(--mauve) 50%, var(--surface2));
+  background: color-mix(in srgb, var(--surface0) 80%, transparent);
+}
+.btn--danger {
+  color: var(--red);
+  border-color: color-mix(in srgb, var(--red) 55%, var(--surface2));
+  background: color-mix(in srgb, var(--red) 12%, transparent);
+}
+.btn--danger:hover {
+  color: var(--rosewater);
+  background: var(--red);
+  border-color: var(--red);
+}
+/* Pressed/selected state for toggle & tab buttons. Solid accent fill so an
+ * engaged toggle is unmistakable (label alone is too subtle). The
+ * `.btn--ghost.is-active` selector carries enough specificity (0,3,0) to beat
+ * the theme `.cybersigil/.breakcore .btn--ghost` rules (0,2,0) that load in
+ * later partials — without it the active state is invisible on those themes. */
+.btn.is-active,
+.btn.btn--ghost.is-active {
+  color: var(--rosewater);
+  background: var(--mauve);
+  border-color: var(--mauve);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--crust) 35%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--mauve) 45%, transparent);
+}
+
+/* The vim toggle is desktop-only — vim mode auto-disables below 768px, so the
+ * button is a no-op there. Unlayered media query (Tailwind `hidden` would
+ * lose the cascade to `.btn { display: inline-flex }`). */
+@media (max-width: 767px) {
+  .btn.vim-toggle { display: none !important; }
+}
+
+/* Sizes */
+.btn--sm { height: 2rem; padding: 0 0.85rem; font-size: 0.85rem; gap: 0.35rem; }
+.btn--lg { height: 3rem; padding: 0 1.6rem; font-size: 1.05rem; }
+
+/* Shapes */
+.btn--icon { padding: 0; width: 2.5rem; }
+.btn--icon.btn--sm { width: 2rem; }
+.btn--block { width: 100%; }
+
+/* Back-link — a real affordance, not bare body text. One markup for
+ * every "← back" return link (post, admin, login). */
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.9rem;
+  line-height: 1;
+  color: var(--subtext1);
+  text-decoration: none;
+  padding: 0.35rem 0.1rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--subtext1) 35%, transparent);
+  transition: color 0.15s ease, border-color 0.15s ease, gap 0.15s ease;
+}
+.back-link:hover,
+.back-link:focus-visible {
+  color: var(--mauve);
+  border-color: var(--mauve);
+  gap: 0.7rem;
+  outline: none;
+}
+.back-link .bl-arrow {
+  display: inline-block;
+  transition: transform 0.15s ease;
+}
+.back-link:hover .bl-arrow,
+.back-link:focus-visible .bl-arrow { transform: translateX(-3px); }
+
+/* ───── Top-bar controls — one height, one language ─────
+ * `.topbar-cluster` lays the chrome controls out as one tidy, right-aligned
+ * group that wraps as a unit (never a ragged full-width column on mobile).
+ * Every control is the same 2rem height; icon-only variants are exact
+ * squares so they line up cleanly next to each other. */
+.topbar-cluster {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  justify-content: flex-start;
+}
+@media (min-width: 768px) {
+  .topbar-cluster { justify-content: flex-end; }
+}
+/* A hairline divider between the public controls and the admin group. */
+.topbar-divider {
+  align-self: stretch;
+  width: 1px;
+  margin: 0.15rem 0.15rem;
+  background: var(--surface2);
+  flex: none;
+}
+
+.topbar-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  height: 2rem;
+  padding: 0 0.7rem;
+  flex: none;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.85rem;
+  line-height: 1;
+  color: var(--subtext1);
+  background: color-mix(in srgb, var(--surface0) 55%, transparent);
+  border: 1px solid var(--surface2);
+  border-radius: 1px;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+.topbar-control:hover {
+  color: var(--mauve);
+  background: color-mix(in srgb, var(--surface0) 85%, transparent);
+  border-color: color-mix(in srgb, var(--mauve) 45%, var(--surface2));
+}
+.topbar-control:focus-visible {
+  outline: none;
+  border-color: var(--mauve);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mauve) 40%, transparent);
+}
+.topbar-control:disabled { opacity: 0.5; cursor: default; }
+.topbar-control svg { width: 15px; height: 15px; flex-shrink: 0; }
+/* Exact-square icon-only variant — keeps the row aligned. */
+.topbar-control--icon { width: 2rem; padding: 0; }
+
+/* Keyboard-shortcut hover/focus tooltip — kept out of the button label,
+ * surfaced only on hover or keyboard focus. */
+.kbd-tip-host { position: relative; }
+.kbd-tip {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  white-space: nowrap;
+  padding: 4px 8px;
+  font-family: var(--font-sans);
+  font-size: 0.6rem;
+  font-style: normal;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--subtext1);
+  background: color-mix(in srgb, var(--crust) 90%, transparent);
+  border: 1px solid color-mix(in srgb, var(--surface2) 70%, transparent);
+  border-radius: 4px;
+  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transform: translate(-50%, 4px);
+  pointer-events: none;
+  transition: opacity 0.16s ease, transform 0.16s ease;
+  z-index: 60;
+}
+.kbd-tip kbd {
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  line-height: 1;
+  padding: 2px 5px;
+  color: var(--text);
+  background: color-mix(in srgb, var(--surface0) 70%, transparent);
+  border: 1px solid color-mix(in srgb, var(--surface2) 80%, transparent);
+  border-radius: 3px;
+}
+.kbd-tip-host:hover .kbd-tip,
+.kbd-tip-host:focus-visible .kbd-tip {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+/* Breakcore: hard neon tooltip — matches the layer's offset-shadow chrome. */
+.breakcore .kbd-tip {
+  background: var(--crust);
+  border-color: var(--mauve);
+  border-radius: 0;
+  color: var(--green);
+  box-shadow: 2px 2px 0 var(--mauve);
+}
+.breakcore .kbd-tip kbd {
+  color: var(--rosewater);
+  background: var(--surface0);
+  border-color: var(--mauve);
+  border-radius: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kbd-tip { transition: opacity 0.16s ease; transform: translate(-50%, 0); }
+}
+.topbar-control--danger:hover {
+  color: var(--red);
+  border-color: color-mix(in srgb, var(--red) 55%, var(--surface2));
+}
+/* Native <select> variant — leave room for the chevron overlay.
+ * Fixed width so switching themes never resizes the whole top bar. */
+select.topbar-control {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 1.9rem;
+}
+select.topbar-control.theme-select {
+  width: 8.75rem;
+  justify-content: flex-start;
+  text-align: left;
+}
+.topbar-control kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  font-family: var(--font-mono, monospace);
+  font-style: normal;
+  font-size: 0.62rem;
+  padding: 0.05rem 0.3rem;
+  border: 1px solid var(--surface2);
+  border-radius: 1px;
+  color: var(--subtext0);
+}
+
+/* Responsive collapse — below a breakpoint a control drops its label and
+ * becomes an exact 2rem square so the cluster stays a tidy aligned row on
+ * phones. Written unlayered (not Tailwind utilities) so it reliably wins
+ * over the `.topbar-control` base in the Tailwind v4 cascade. */
+.topbar-control .tc-label { display: inline; }
+@media (max-width: 767px) {
+  .topbar-control.tc-collapse-md { width: 2rem; padding: 0; }
+  .topbar-control.tc-collapse-md .tc-label { display: none; }
+}
+@media (max-width: 639px) {
+  .topbar-control.tc-collapse-sm { width: 2rem; padding: 0; }
+  .topbar-control.tc-collapse-sm .tc-label { display: none; }
+}
+
+/* Form input look */
+.field-input {
+  width: 100%;
+  background: color-mix(in srgb, var(--surface0) 60%, transparent);
+  border: 1px solid var(--surface2);
+  border-radius: 1px;
+  padding: 0.65rem 0.9rem;
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  transition: border-color 0.15s, background 0.15s;
+}
+.field-input:focus {
+  outline: none;
+  border-color: var(--mauve);
+  background: color-mix(in srgb, var(--surface0) 85%, var(--mauve) 8%);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mauve) 22%, transparent);
+}
+.field-label {
+  display: block;
+  font-family: var(--font-sans);
+  font-size: 0.72rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--subtext0);
+  margin-bottom: 0.4rem;
+}
+
+/* hljs token colors — driven by theme tokens, slightly muted for parchment bg */
+.hljs { color: var(--text); background: transparent; }
+.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-operator { color: var(--mauve); font-weight: 600; }
+.hljs-string, .hljs-attr, .hljs-regexp, .hljs-addition { color: var(--green); }
+.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: var(--peach); }
+.hljs-comment, .hljs-quote { color: var(--overlay0); font-style: italic; }
+.hljs-title, .hljs-section, .hljs-name, .hljs-title.function_ { color: var(--blue); }
+.hljs-type, .hljs-class .hljs-title, .hljs-title.class_ { color: var(--yellow); }
+.hljs-variable, .hljs-template-variable, .hljs-params, .hljs-property { color: var(--red); }
+.hljs-attribute, .hljs-meta, .hljs-meta .hljs-keyword { color: var(--subtext0); }
+.hljs-deletion { color: var(--red); }
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: 700; }
+
+/* KaTeX */
+.katex { color: var(--text); }
+
+/* Skeleton loader */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--surface0) 50%, transparent) 0%,
+    color-mix(in srgb, var(--surface1) 50%, transparent) 50%,
+    color-mix(in srgb, var(--surface0) 50%, transparent) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: 1px;
+}
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Toast */
+.toast {
+  position: fixed;
+  top: 1.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--mantle);
+  border: 1px solid var(--surface2);
+  color: var(--rosewater);
+  padding: 0.65rem 1.1rem;
+  border-radius: 1px;
+  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.9rem;
+  z-index: 200;
+  cursor: pointer;
+  animation: toast-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+@keyframes toast-in {
+  from { opacity: 0; transform: translate(-50%, -10px); }
+  to   { opacity: 1; transform: translate(-50%, 0); }
+}
+.toast--out {
+  animation: toast-out 0.2s ease forwards;
+}
+@keyframes toast-out {
+  from { opacity: 1; transform: translate(-50%, 0); }
+  to   { opacity: 0; transform: translate(-50%, -10px); }
+}
+/* Success variant — parallels .toast--error. */
+.toast--success {
+  border-left: 3px solid var(--green);
+  color: var(--rosewater);
+}
+.toast--success::before {
+  content: "✓ ";
+  color: var(--green);
+}
+
+/* Justified gallery — JS solves each row's height so widths fill the line
+ * exactly (PostList.tsx). flex-grow on the tiles absorbs sub-pixel rounding;
+ * the pre-measure / no-JS fallback wraps and grows by aspect instead. */
+.just-gallery { width: 100%; }
+.just-row {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: 18px;
+}
+.just-row--fallback {
+  flex-wrap: wrap;
+  row-gap: 40px;
+}
+.just-row > .plate-enter { min-width: 0; }
+/* Very narrow viewports: let even the fallback stack cleanly. */
+@media (max-width: 420px) {
+  .just-row--fallback > .plate-enter { flex-basis: 100% !important; }
+}
+
+/* Subtle page enter animation for gallery / plaque */
+@keyframes plate-fade-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.plate-enter {
+  opacity: 0;
+  animation: plate-fade-up 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+}
+
+/* Custom checkbox accent for form bits inside the salon */
+input[type="checkbox"] { accent-color: var(--mauve); }
+input[type="date"] { color-scheme: light; }
+.salon-noir input[type="date"] { color-scheme: dark; }
+.gothic input[type="date"] { color-scheme: dark; }
+.breakcore input[type="date"] { color-scheme: dark; }
+
+/* Reading progress bar - thin terracotta line */
+.reading-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--mauve);
+  z-index: 150;
+  transform-origin: left;
+  transform: scaleX(0);
+  transition: transform 80ms linear;
+}
+

frontend/src/styles/partials/60-breakcore.css

@@ -0,0 +1,471 @@
+/* ═══════════════════════════════════════════════════════════════════════
+ * BREAKCORE — refined-neon layer.
+ * Everything below is scoped to `.breakcore`; salon / salon-noir / gothic
+ * are untouched. Aesthetic: editorial serif body in deliberate tension with
+ * hard-edged web-rot chrome — RGB split, hazard tape, neon outline, hard
+ * offset shadows. Motion is *reactive only* (hover / focus / one-shot on
+ * load) and settles fast. All motion is killed by prefers-reduced-motion
+ * at the very end of this file.
+ * ═══════════════════════════════════════════════════════════════════════ */
+
+/* CRT tube depth — static vignette layered on the existing base fill. */
+.breakcore body::before {
+  background-image: radial-gradient(
+    ellipse at center,
+    transparent 52%,
+    color-mix(in srgb, var(--crust) 75%, transparent) 100%
+  );
+}
+
+/* Nameplate — breakcore reworks the underline: hard cyan offset + magenta
+ * neon glow (the layer's hard-offset chrome language) instead of the
+ * default two-tone rule. Plus a glitch-shear burst on hover. */
+.breakcore .nameplate::after {
+  height: 2px;
+  bottom: -7px;
+  background: var(--mauve);
+  box-shadow:
+    2px 2px 0 var(--blue),
+    0 0 10px color-mix(in srgb, var(--mauve) 70%, transparent);
+}
+@keyframes bc-shear {
+  0%   { clip-path: inset(0 0 0 0);     transform: translateX(0);
+         text-shadow: -1px 0 0 var(--teal), 1px 0 0 var(--mauve); }
+  20%  { clip-path: inset(16% 0 56% 0); transform: translateX(-5px);
+         text-shadow: -5px 0 0 var(--green), 5px 0 0 var(--mauve); }
+  40%  { clip-path: inset(62% 0 10% 0); transform: translateX(5px);
+         text-shadow: 5px 0 0 var(--teal), -5px 0 0 var(--red); }
+  60%  { clip-path: inset(30% 0 42% 0); transform: translateX(-3px);
+         text-shadow: -3px 0 0 var(--mauve), 3px 0 0 var(--green); }
+  80%  { clip-path: inset(6% 0 78% 0);  transform: translateX(2px);
+         text-shadow: 2px 0 0 var(--teal), -2px 0 0 var(--mauve); }
+  100% { clip-path: inset(0 0 0 0);     transform: translateX(0);
+         text-shadow: -1px 0 0 var(--teal), 1px 0 0 var(--mauve); }
+}
+.breakcore .nameplate:hover .nameplate-title {
+  animation: bc-shear 200ms steps(3, jump-none) 1;
+}
+
+/* Display headings — one-shot glitch-in on page load. The static chromatic
+ * text-shadow (defined earlier) remains as the resting state. */
+@keyframes bc-load-glitch {
+  0%   { opacity: 0; clip-path: inset(46% 0 46% 0); transform: translateX(-9px); }
+  20%  { opacity: 1; clip-path: inset(8% 0 70% 0);  transform: translateX(7px); }
+  40%  {            clip-path: inset(68% 0 8% 0);   transform: translateX(-5px); }
+  60%  {            clip-path: inset(24% 0 36% 0);  transform: translateX(3px); }
+  80%  {            clip-path: inset(4% 0 84% 0);   transform: translateX(-2px); }
+  /* End unclipped (none, not inset(0)) so italic-Fraunces descenders
+   * (g, y, p) aren't sliced at the box edge once the glitch settles. */
+  100% { opacity: 1; clip-path: none;               transform: translateX(0); }
+}
+.breakcore .prose h1,
+.breakcore h1.font-display {
+  /* `backwards` (not `both`): after the one-shot, props revert to base —
+   * clip-path: none — instead of persisting the final inset clip. */
+  animation: bc-load-glitch 460ms steps(5, jump-none) backwards;
+}
+
+/* Plate — hard hover (no soft lift), RGB-split image, scanline sweep. */
+.breakcore .plate:hover {
+  transform: translateY(-3px);
+}
+.breakcore .plate:hover .plate-caption-title {
+  text-shadow: -1px 0 0 var(--teal), 1px 0 0 var(--mauve);
+}
+.breakcore .plate:hover .plate-image img {
+  filter:
+    drop-shadow(-3px 0 0 color-mix(in srgb, var(--mauve) 70%, transparent))
+    drop-shadow(3px 0 0 color-mix(in srgb, var(--teal) 70%, transparent))
+    saturate(1.12) contrast(1.06);
+}
+.breakcore .plate .plate-image::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-110%);
+  mix-blend-mode: screen;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    color-mix(in srgb, var(--sky) 28%, transparent) 46%,
+    color-mix(in srgb, var(--mauve) 70%, transparent) 49%,
+    color-mix(in srgb, var(--green) 55%, transparent) 51%,
+    color-mix(in srgb, var(--sky) 28%, transparent) 54%,
+    transparent 100%
+  );
+}
+@keyframes bc-scan {
+  0%   { transform: translateY(-110%); opacity: 0; }
+  12%  { opacity: 1; }
+  88%  { opacity: 1; }
+  100% { transform: translateY(110%);  opacity: 0; }
+}
+.breakcore .plate:hover .plate-image::after,
+.breakcore .plate:focus-visible .plate-image::after {
+  animation: bc-scan 0.62s cubic-bezier(0.4, 0, 0.2, 1) 1;
+}
+
+/* Section rule — hazard tape. Used on footer, post header, 404. */
+.breakcore .section-rule {
+  color: var(--green);
+  font-family: var(--font-mono);
+  font-style: normal;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+}
+.breakcore .section-rule::before,
+.breakcore .section-rule::after {
+  height: 1px;
+  opacity: 0.85;
+  background: linear-gradient(
+    to right,
+    transparent,
+    color-mix(in srgb, var(--mauve) 70%, transparent) 45%,
+    color-mix(in srgb, var(--teal) 70%, transparent) 55%,
+    transparent
+  );
+}
+.breakcore .section-rule .ornament {
+  color: var(--mauve);
+}
+
+/* Readability — `--overlay0` (#5A2D8E) is near-invisible on the breakcore
+ * ground. Lift the spots that use it as actual copy to the readable
+ * subtext ramp. */
+.breakcore .prose h6,
+.breakcore .prose del,
+.breakcore .hljs-comment,
+.breakcore .hljs-quote,
+.breakcore .site-copyright,
+.breakcore .slug-hint {
+  color: var(--subtext0);
+}
+
+/* Chips — neon outline, monospace caps. */
+.breakcore .chip {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--teal) 55%, transparent);
+  color: var(--teal);
+  font-family: var(--font-mono);
+  font-style: normal;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  border-radius: 0;
+}
+.breakcore .chip-accent {
+  background: var(--mauve);
+  color: var(--crust);
+  border-color: var(--mauve);
+}
+.breakcore .chip-draft {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--green) 60%, transparent);
+  color: var(--green);
+}
+
+/* Plate caption meta — bracketed mono coordinates. */
+.breakcore .plate-caption-meta {
+  font-family: var(--font-mono);
+  letter-spacing: 0.16em;
+}
+.breakcore .plate-caption-sep {
+  color: var(--green);
+  opacity: 1;
+}
+
+/* Buttons & inputs — square, hard offset block-shadow, neon focus. */
+.breakcore .btn,
+.breakcore .field-input,
+.breakcore .topbar-control,
+.breakcore .topbar-control kbd { border-radius: 0; }
+.breakcore .btn--primary {
+  color: var(--crust);
+  border-color: var(--mauve);
+  box-shadow: 3px 3px 0 0 var(--green);
+}
+.breakcore .btn--primary:hover {
+  background: var(--green);
+  border-color: var(--green);
+  color: var(--crust);
+  box-shadow: 3px 3px 0 0 var(--mauve);
+}
+.breakcore .btn--primary:active {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 0 var(--mauve);
+}
+.breakcore .btn--danger {
+  box-shadow: 3px 3px 0 0 color-mix(in srgb, var(--red) 60%, var(--crust));
+}
+.breakcore .btn--danger:hover {
+  box-shadow: 3px 3px 0 0 var(--mauve);
+}
+.breakcore .btn--danger:active {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 0 var(--mauve);
+}
+.breakcore .btn:focus-visible {
+  border-color: var(--green);
+  box-shadow: 0 0 0 2px var(--green);
+}
+.breakcore .field-input:focus {
+  border-color: var(--green);
+  background: color-mix(in srgb, var(--surface0) 85%, var(--green) 8%);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent);
+}
+
+/* Ghost had no breakcore identity — drab subtext on faint surface,
+ * near-invisible on the violet ground. Give it the neon outline. */
+.breakcore .btn--ghost {
+  color: var(--teal);
+  border-color: color-mix(in srgb, var(--teal) 55%, transparent);
+  background: color-mix(in srgb, var(--surface0) 60%, transparent);
+  box-shadow: 3px 3px 0 0 color-mix(in srgb, var(--teal) 35%, var(--crust));
+}
+.breakcore .btn--ghost:hover {
+  color: var(--crust);
+  background: var(--teal);
+  border-color: var(--teal);
+  box-shadow: 3px 3px 0 0 var(--mauve);
+}
+.breakcore .btn--ghost:active {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 0 var(--mauve);
+}
+
+/* Back-link → hard neon return tab. Impossible to miss against the
+ * CRT-violet ground; same offset-block language as .btn--primary. */
+.breakcore .back-link {
+  font-family: var(--font-mono);
+  font-style: normal;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--green);
+  padding: 7px 13px;
+  background: color-mix(in srgb, var(--crust) 65%, transparent);
+  border: 1px solid var(--mauve);
+  box-shadow: 3px 3px 0 0 var(--mauve);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--green) 50%, transparent);
+}
+.breakcore .back-link:hover,
+.breakcore .back-link:focus-visible {
+  color: var(--crust);
+  background: var(--green);
+  border-color: var(--green);
+  box-shadow: 3px 3px 0 0 var(--mauve);
+  text-shadow: none;
+}
+.breakcore .back-link:active {
+  transform: translate(3px, 3px);
+  box-shadow: 0 0 0 0 var(--mauve);
+}
+
+/* Top-bar chrome — neon UI, not drab subtext. Mono caps + hard offset. */
+.breakcore .topbar-control {
+  font-family: var(--font-mono);
+  font-style: normal;
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--teal);
+  background: color-mix(in srgb, var(--crust) 55%, transparent);
+  border-color: color-mix(in srgb, var(--teal) 50%, transparent);
+}
+.breakcore .topbar-control:hover {
+  color: var(--crust);
+  background: var(--mauve);
+  border-color: var(--mauve);
+  box-shadow: 2px 2px 0 0 var(--green);
+}
+.breakcore .topbar-control:focus-visible {
+  border-color: var(--green);
+  box-shadow: 0 0 0 2px var(--green);
+}
+.breakcore .topbar-control--danger:hover {
+  background: var(--red);
+  border-color: var(--red);
+  color: var(--rosewater);
+  box-shadow: 2px 2px 0 0 var(--mauve);
+}
+.breakcore .topbar-divider {
+  width: 2px;
+  background: repeating-linear-gradient(
+    180deg,
+    var(--mauve) 0 4px,
+    transparent 4px 7px
+  );
+}
+
+/* Post prev/next nav — neon offset panels + acid eyebrow (was dim text). */
+.breakcore .post-nav a { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
+.breakcore .post-nav a:hover {
+  border-color: var(--mauve);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 40%, transparent),
+    4px 4px 0 0 var(--mauve);
+}
+.breakcore .post-nav .pn-eyebrow {
+  color: var(--green);
+  font-family: var(--font-mono);
+  letter-spacing: 0.18em;
+  text-shadow: 0 0 6px color-mix(in srgb, var(--green) 45%, transparent);
+}
+
+/* Prose / code — CRT pass: terminal block, hazard inline code, neon
+ * blockquote, hazard-tape rule. */
+.breakcore .prose pre {
+  color: var(--teal);
+  background-color: color-mix(in srgb, var(--crust) 92%, transparent);
+  background-image: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0) 0 2px,
+    color-mix(in srgb, var(--mauve) 9%, transparent) 2px 3px,
+    rgba(0, 0, 0, 0) 3px 4px
+  );
+  border-color: var(--mauve);
+  border-left-color: var(--green);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--mauve) 28%, transparent),
+    4px 4px 0 0 color-mix(in srgb, var(--mauve) 35%, var(--crust));
+}
+.breakcore .prose pre code { color: inherit; }
+.breakcore .prose :not(pre) code {
+  color: var(--yellow);
+  background: color-mix(in srgb, var(--yellow) 12%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--yellow) 55%, transparent);
+}
+.breakcore .prose blockquote {
+  border-left-color: var(--mauve);
+  background: color-mix(in srgb, var(--mauve) 7%, transparent);
+  box-shadow: -3px 0 14px -5px color-mix(in srgb, var(--mauve) 55%, transparent);
+  padding: 0.5rem 0 0.5rem 1.4rem;
+}
+.breakcore .prose hr {
+  height: 3px;
+  opacity: 0.85;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--mauve) 0 14px,
+    var(--green) 14px 28px
+  );
+  box-shadow: 0 0 10px color-mix(in srgb, var(--mauve) 40%, transparent);
+}
+.breakcore .prose hr::before {
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
+.breakcore .prose h3 { color: var(--pink); }
+.breakcore .prose h4 { color: var(--teal); }
+.breakcore .prose h5 { color: var(--green); font-family: var(--font-mono); }
+
+/* Scrollbar + caret — full-immersion chrome (no default OS bar). */
+.breakcore {
+  scrollbar-color: var(--mauve) var(--crust);
+  caret-color: var(--mauve);
+}
+.breakcore ::-webkit-scrollbar { width: 11px; height: 11px; }
+.breakcore ::-webkit-scrollbar-track { background: var(--crust); }
+.breakcore ::-webkit-scrollbar-thumb {
+  background: var(--mauve);
+  border: 2px solid var(--crust);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 50%, transparent);
+}
+.breakcore ::-webkit-scrollbar-thumb:hover { background: var(--green); }
+.breakcore ::-webkit-scrollbar-corner { background: var(--crust); }
+
+/* Prose links — magenta resting, acid-green on hover. */
+.breakcore .prose a {
+  text-decoration-color: color-mix(in srgb, var(--mauve) 55%, transparent);
+}
+.breakcore .prose a:hover {
+  color: var(--green);
+  text-decoration-color: var(--green);
+}
+
+/* Reading progress — acid scan with bloom. */
+.breakcore .reading-progress {
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green), 0 0 3px var(--mauve);
+}
+
+/* ───── Confirm dialog (replaces window.confirm) ───── */
+.cdialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+.cdialog-backdrop {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--crust) 60%, transparent);
+  backdrop-filter: blur(8px);
+}
+.cdialog-panel {
+  position: relative;
+  width: 100%;
+  max-width: 26rem;
+  padding: 1.6rem 1.6rem 1.4rem;
+  animation: cdialog-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+@keyframes cdialog-in {
+  from { opacity: 0; transform: translateY(10px) scale(0.98); }
+  to   { opacity: 1; transform: none; }
+}
+.cdialog-title {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 600;
+  font-size: 1.4rem;
+  line-height: 1.15;
+  color: var(--text);
+  letter-spacing: -0.01em;
+}
+.cdialog-msg {
+  font-family: var(--font-sans);
+  font-size: 0.98rem;
+  line-height: 1.55;
+  color: var(--subtext1);
+  margin-top: 0.6rem;
+}
+.cdialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.6rem;
+  margin-top: 1.5rem;
+}
+
+/* Breakcore: hard edges + neon cap + chromatic title. */
+.breakcore .cdialog-panel {
+  border-radius: 0;
+  padding-top: 1.85rem;
+}
+.breakcore .cdialog-panel::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--mauve), var(--teal));
+}
+.breakcore .cdialog-title {
+  text-shadow: -1px 0 0 var(--teal), 1px 0 0 var(--mauve);
+}
+
+/* Toast error variant (replaces window.alert). */
+.toast--error {
+  border-left: 3px solid var(--red);
+  color: var(--rosewater);
+  cursor: pointer;
+}
+.toast--error::before {
+  content: "⚠ ";
+  color: var(--red);
+}
+

frontend/src/styles/partials/90-keyframes.css

@@ -0,0 +1,25 @@
+/* ─── Theme keyframes ─── */
+@keyframes cs-blink {
+  0%, 49%  { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+@keyframes cs-flicker {
+  0%, 8%    { opacity: 0.26; }
+  9%        { opacity: 0.46; }
+  10%, 70%  { opacity: 0.26; }
+  71%       { opacity: 0.08; }
+  72%       { opacity: 0.34; }
+  73%, 100% { opacity: 0.26; }
+}
+@keyframes cs-tear {
+  0%, 21%   { opacity: 0; top: 18%; }
+  22%       { opacity: 0.85; top: 18%; transform: translateX(-7px); }
+  23%       { opacity: 0; }
+  46%       { opacity: 0; top: 63%; }
+  47%       { opacity: 0.7; top: 63%; transform: translateX(6px) skewX(-12deg); }
+  48%, 49%  { opacity: 0; }
+  79%       { opacity: 0; top: 41%; }
+  80%       { opacity: 0.9; top: 41%; transform: translateX(-4px); }
+  81%       { opacity: 0.2; }
+  82%, 100% { opacity: 0; }
+}

frontend/src/styles/partials/99-reduced-motion.css

@@ -0,0 +1,20 @@
+/* ═══ Reduced motion — universal kill-switch. Final word in the file so it
+ * overrides every animation/transition above, all themes. Content still
+ * resolves to its final state (forwards-filled keyframes complete). ═══ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+  /* The looping sigils would otherwise collapse to their hidden end-state —
+   * pin them fully drawn instead so they stay visible, just still. */
+  .cybersigil .cs-fx-wire .cs-sigil path,
+  .cybersigil .cs-fx-corner--sig .cs-sigil path {
+    animation: none !important;
+    stroke-dashoffset: 0 !important;
+  }
+}

frontend/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+// Pure-logic unit tests only (no Astro/DOM). Component/integration tests, if
+// added later, should switch to `getViteConfig` from 'astro/config'.
+export default defineConfig({
+  test: {
+    environment: 'node',
+    include: ['src/**/*.test.ts'],
+  },
+});

node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -0,0 +1 @@
+{"version":"4.1.6","results":[[":frontend/src/lib/cybersigil.test.ts",{"duration":66.06918499999995,"failed":false}]]}