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/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

@@ -35,16 +35,36 @@ pub async fn update_config(
         .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);

backend/src/handlers/contact.rs

@@ -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
@@ -160,9 +163,8 @@ pub async fn submit_contact(
         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()))
-    })?;
+    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()))
@@ -189,8 +191,7 @@ pub async fn list_messages(
         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();
         }
     };
 
@@ -239,8 +240,8 @@ pub async fn delete_message(
     if !fs::try_exists(&path).await.unwrap_or(false) {
         return Err(AppError::NotFound("Message not found.".into()));
     }
-    fs::remove_file(&path).await.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,356 +1,36 @@
+//! 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::{collections::HashMap, 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, CachedPost,
+    AppState,
     auth::is_authed,
     error::AppError,
-    models::{
-        CoverImage, CreatePostRequest, ImageDim, PostDetail, PostInfo, PostMeta, PostNeighbor,
-    },
+    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(),
-        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.
-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.
-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
-}
-
-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()
-}
-
-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 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;
-}
-
-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).await.map_err(|e| {
-        AppError::Internal("Write 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(
@@ -407,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,
@@ -497,29 +181,6 @@ pub async fn list_posts(
     Json(posts)
 }
 
-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)
-}
-
 pub async fn get_post(
     State(state): State<Arc<AppState>>,
     headers: HeaderMap,
@@ -541,10 +202,7 @@ pub async fn get_post(
 
     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 image_urls: Vec<String> = extract_images(&body).into_iter().map(|(_, u)| u).collect();
     let dimensions = dims_for_urls(&state, &image_urls).await;
 
     Ok(Json(PostDetail {

backend/src/handlers/upload.rs

@@ -23,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> {
@@ -77,9 +75,9 @@ pub async fn delete_upload(
     let uploads_dir = state.data_dir.join("uploads");
     let file_path = uploads_dir.join(&filename);
 
-    let canonical_dir = fs::canonicalize(&uploads_dir).await.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 Ok(canonical_file) = fs::canonicalize(&file_path).await {
         if !canonical_file.starts_with(&canonical_dir) {
             warn!("Refused delete outside uploads dir: {}", filename);
@@ -209,9 +207,9 @@ pub async fn upload_file(
         };
 
         // Final containment check.
-        let canonical_dir = fs::canonicalize(&uploads_dir).await.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 = fs::canonicalize(parent).await.map_err(|e| {
                 AppError::Internal("Path resolution".to_string(), Some(e.to_string()))

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,
@@ -47,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);
@@ -78,8 +77,11 @@ async fn main() {
         contact_rate_limit: Mutex::new(HashMap::new()),
     });
 
-    handlers::posts::rebuild_posts_cache(&state).await;
-    info!("Posts cache primed with {} entries", state.posts_cache.read().await.len());
+    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());
 
@@ -89,8 +91,8 @@ async fn main() {
     // 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([
@@ -132,8 +134,7 @@ async fn main() {
         )
         .route(
             "/api/upload",
-            post(handlers::upload::upload_file)
-                .layer(DefaultBodyLimit::max(UPLOAD_BODY_LIMIT)),
+            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))

backend/src/models.rs

@@ -31,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(),

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

@@ -41,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"
@@ -608,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",
@@ -3305,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",
@@ -3314,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",
@@ -3427,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",
@@ -3642,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",
@@ -3799,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",
@@ -3829,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",
@@ -3859,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",
@@ -4160,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",
@@ -4483,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",
@@ -5436,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",
@@ -6580,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",
@@ -7172,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",
@@ -7209,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",
@@ -7218,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",
@@ -7260,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",
@@ -7322,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",
@@ -7356,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",
@@ -7914,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",
@@ -7933,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",
@@ -8257,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",
@@ -45,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

@@ -21,12 +21,39 @@
 </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>(
@@ -50,6 +77,44 @@
 				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();

frontend/src/components/react/DeletePostButton.tsx

@@ -1,21 +1,24 @@
 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;
     const ok = await confirmDialog({
-      title: 'Delete this work?',
-      message: `“${title}” will be permanently removed. This cannot be undone.`,
+      title: c.deletePostTitle,
+      message: c.deletePostMsg(title),
       confirmLabel: 'Delete',
       cancelLabel: 'Cancel',
     });

frontend/src/components/react/PostList.tsx

@@ -1,6 +1,28 @@
-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;
 
@@ -27,6 +49,7 @@ interface Post {
 interface Props {
   posts: Post[];
   isAdmin?: boolean;
+  mode?: SiteMode;
 }
 
 function formatSlug(slug: string) {
@@ -45,33 +68,108 @@ 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;
     const ok = await confirmDialog({
-      title: 'Take this off the wall?',
-      message: `“${title}” will be removed from the catalogue. This cannot be undone.`,
-      confirmLabel: 'Remove',
-      cancelLabel: 'Keep',
+      title: c.deleteListTitle,
+      message: c.deleteListMsg(title),
+      confirmLabel: c.deleteListConfirm,
+      cancelLabel: c.deleteListCancel,
     });
     if (!ok) return;
     setDeleting(slug);
@@ -79,7 +177,7 @@ export default function PostList({ posts: initialPosts, isAdmin = false }: Props
       await deletePost(slug);
       setPosts(p => p.filter(x => x.slug !== slug));
     } catch (e) {
-      notify(`Failed to remove: ${e instanceof Error ? e.message : 'unknown error'}`);
+      notify(`Failed to delete: ${e instanceof Error ? e.message : 'unknown error'}`);
     } finally {
       setDeleting(null);
     }
@@ -105,134 +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}
-                    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="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="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>
+          {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,7 +130,7 @@ export default function Search() {
       <button
         type="button"
         onClick={() => setOpen(true)}
-        aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
+        aria-label={`${c.searchAria} (${isMac ? '⌘' : 'Ctrl'}+K)`}
         className="topbar-control tc-collapse-md kbd-tip-host"
       >
         <svg
@@ -156,7 +158,7 @@ export default function Search() {
           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
@@ -194,7 +196,7 @@ 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="search-input flex-1 bg-transparent outline-none text-base text-[var(--text)] placeholder:text-[var(--subtext0)] font-display italic"
               />
@@ -205,14 +207,14 @@ 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 && (
@@ -236,7 +238,7 @@ export default function Search() {
                             <span className="truncate">{title}</span>
                             {p.draft && (
                               <span className="chip chip-draft shrink-0 !text-[0.62rem] !py-0">
-                                Sketch
+                                {c.draftShort}
                               </span>
                             )}
                           </div>

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

@@ -1,135 +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 { confirmDialog } from '../../../lib/confirm';
+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 assetsCacheRef = useRef<Asset[] | null>(null);
+  const [showModal, setShowModal] = useState(false);
 
-  async function getCachedAssets(): Promise<Asset[]> {
-    if (assetsCacheRef.current) return assetsCacheRef.current;
-    const assets = await getAssets();
-    assetsCacheRef.current = assets;
-    return assets;
-  }
+  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 } });
+  }, []);
 
-  function showAlertMsg(msg: string, type: 'success' | 'error') {
-    setAlert({ msg, type });
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-    setTimeout(() => setAlert(null), 5000);
-  }
+  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 });
 
-  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 {
+    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;
 
-  useEffect(() => { updatePreviewRef.current = updatePreview; }, [updatePreview]);
-  useEffect(() => { uploadFnRef.current = uploadFilesAndInsert; });
+  // 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
+  // Initialize CodeMirror once.
   useEffect(() => {
     if (!editorRef.current || viewRef.current) return;
 
@@ -146,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) {
@@ -172,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) {
@@ -180,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) {
@@ -197,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;
           },
         }),
@@ -208,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) {
@@ -225,198 +172,18 @@ 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 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 = 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);
-
-    // 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;
-        showAlertMsg(e instanceof ApiError ? `Upload failed: ${e.message}` : 'Upload failed.', 'error');
-      }
-    }
-
-    if (newAssets.length > 0) {
-      assetsCacheRef.current = assetsCacheRef.current
-        ? [...newAssets, ...assetsCacheRef.current]
-        : null;
-    }
-    view.focus();
-  }
-
   function handleAssetSelect(asset: Asset) {
     insertAssetMarkdown(asset);
     setShowModal(false);
   }
 
   function closeAssetModal() {
-    assetsCacheRef.current = null;
+    assetCache.invalidate();
     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');
-    }
-  }
-
-  async function handleDelete() {
-    const target = originalSlug || slug;
-    const ok = await confirmDialog({
-      title: 'Remove from catalogue?',
-      message: `“${target}” will be permanently removed. This cannot be undone.`,
-      confirmLabel: 'Remove',
-    });
-    if (!ok) 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">
@@ -451,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>
@@ -476,7 +243,7 @@ export default function Editor({ editSlug }: Props) {
             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>
@@ -489,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>
@@ -500,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>
@@ -523,26 +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={`btn btn--ghost btn--sm${vimEnabled ? ' is-active' : ''}`}
-              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={`btn btn--ghost btn--sm${showPreview ? ' is-active' : ''}`}
+              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 btn--primary btn--sm"
+              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>

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);
@@ -80,7 +82,7 @@ export default function Login() {
       <div className="text-center mt-6">
         <a href="/" className="back-link">
           <span className="bl-arrow" aria-hidden="true">←</span>
-          Back to the catalogue
+          {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">

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');
@@ -19,9 +21,9 @@ if (Astro.cookies.get('admin_session')?.value !== '1') {
             <div class="flex-1 min-w-0">
                 <a href="/" class="back-link mb-3">
                     <span class="bl-arrow" aria-hidden="true">←</span>
-                    Back to the catalogue
+                    {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

@@ -10,6 +10,7 @@ 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;
@@ -24,6 +25,9 @@ interface 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';
 
@@ -60,7 +64,7 @@ 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, initial-scale=1" />
@@ -133,7 +137,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 						{hasContact && (
 							<a href="/contact" class="topbar-control">Contact</a>
 						)}
-						<Search client:idle />
+						<Search client:idle mode={siteMode} />
 						<span class="topbar-divider" aria-hidden="true"></span>
 						{isAdmin ? (
 							<LogoutButton client:idle />
@@ -162,7 +166,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 				<>
 					<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="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">

frontend/src/lib/confirm.ts

@@ -117,15 +117,22 @@ export function confirmDialog(opts: ConfirmOptions): Promise<boolean> {
   });
 }
 
-/** Transient bottom-center toast. Replaces window.alert for failures. */
+/** 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${tone === 'error' ? ' toast--error' : ''}`;
+  el.className = `toast toast--${tone}`;
   el.dataset.notify = '';
   el.setAttribute('role', tone === 'error' ? 'alert' : 'status');
   el.textContent = message;
-  el.addEventListener('click', () => el.remove());
+
+  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(() => el.remove(), 4500);
+  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/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 btn--primary">↶ Return to the catalogue</a>
+        <a href="/" class="btn btn--primary">↶ {c.returnHome}</a>
     </div>
 </Layout>

frontend/src/pages/admin/editor.astro

@@ -2,11 +2,13 @@
 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" description="Sign in to the back room." minimal>
-    <Login client:only="react" />
+    <Login client:only="react" mode={siteMode} />
 </Layout>

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

@@ -38,7 +38,7 @@ export const ALL: APIRoute = async ({ request, params }) => {
 
     if (request.method !== 'GET' && request.method !== 'HEAD' && request.body) {
       fetchOptions.body = request.body;
-      // @ts-ignore — required by Node fetch when body is a stream
+      // @ts-expect-error — required by Node fetch when body is a stream
       fetchOptions.duplex = 'half';
     }
 
@@ -52,8 +52,10 @@ export const ALL: APIRoute = async ({ request, params }) => {
       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/index.astro

@@ -3,6 +3,10 @@ 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';
 
@@ -60,7 +64,7 @@ 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" />
@@ -133,5 +137,5 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 		</div>
 	)}
 
-	{posts.length > 0 && <PostList posts={posts} isAdmin={isAdmin} client:idle />}
+	{posts.length > 0 && <PostList posts={posts} isAdmin={isAdmin} mode={siteMode} client:idle />}
 </Layout>

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

@@ -3,6 +3,11 @@ 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';
@@ -50,7 +55,7 @@ try {
     post = await postRes.json();
     html = renderMarkdown(post!.content, post!.dimensions);
   } else {
-    error = 'Work not found in the catalogue';
+    error = c.postNotFound;
   }
 } catch (e) {
   const cause = (e as any)?.cause;
@@ -73,7 +78,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
     image={post?.cover_image?.url}
     type="article"
 >
-  {post?.cover_image?.url && (
+  {!isBlog && post?.cover_image?.url && (
     <Fragment slot="head">
       <link rel="preload" as="image" href={post.cover_image.url} fetchpriority="high" />
     </Fragment>
@@ -84,7 +89,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
     <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 btn--ghost">← Return to the catalogue</a>
+      <a href="/" class="btn btn--ghost">← {c.returnHome}</a>
     </div>
   )}
 
@@ -94,7 +99,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
       <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>
-          Back to catalogue
+          {c.backHome}
         </a>
 
         {isAdmin && (
@@ -103,7 +108,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
               <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:idle />
+            <DeletePostButton slug={post.slug} title={displayTitle} mode={siteMode} client:idle />
           </div>
         )}
       </div>
@@ -117,7 +122,12 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
         <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>
@@ -135,7 +145,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
         {post.draft && (
           <div class="mt-6 inline-block">
             <span class="chip chip-draft">
-              Sketch · unpublished
+              {c.draftLong}
             </span>
           </div>
         )}
@@ -150,7 +160,11 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
       {/* Body — works on paper */}
       <div id="post-content" class="prose" set:html={html} />
 
-      {(neighbors.prev || neighbors.next) && (
+      {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>
+      ) : (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">

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}]]}