SkyFishing fonts, remove escape duplicate, add life_in_alexandra

- SkyFishing: Cormorant Garamond → Estonia (display/headings), IBM Plex Mono → Share Tech Mono - Remove escape-annotated-minimalist.html (duplicate of v2); rename Escape II → Escape in nav - .gitignore: unblock Writings/life_in_alexandra.html (large but the one and only exception) - life_in_alexandra.html now tracked Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Font refactor: replace generic display fonts across Videos + Writings
2026-03-27 15:57:48 +02:00 · 2026-03-27 15:50:20 +02:00 · 2026-03-27 15:44:17 +02:00
22 changed files with 1362 additions and 1161 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -31,9 +31,6 @@ HomePage-JL-notes.md
 *.woff2
 *.otf

-# Oversized HTML (embedded images)
-Writings/life_in_alexandra.html
-
 # Binaries
 DumperCan/WAMEX/WAMEX

--- a/Videos/JL-design-reference/DESIGN.md
+++ b/Videos/JL-design-reference/DESIGN.md
@@ -0,0 +1,84 @@
+# Design System Strategy: Neon-Solar Synthesis
+
+## 1. Overview & Creative North Star: "Electric Eden"
+This design system rejects the clinical, rounded aesthetic of modern "friendly" tech. Our Creative North Star is **Electric Eden**: a high-fidelity collision between the decaying neon of a cyberpunk metropolis and the vibrant, untamed vitality of a solar-powered jungle. 
+
+We break the "template" look through **aggressive geometry** and **chromatic saturation**. By pairing razor-sharp 0px corners with lush, organic imagery and digital glitch textures, we create a UI that feels both hyper-synthetic and intensely alive. Layouts should favor intentional asymmetry—heavy typographic blocks balanced by expansive negative space—to evoke a high-end editorial feel rather than a standard dashboard.
+
+---
+
+## 2. Colors & Surface Logic
+The palette is a high-contrast battle between deep shadows and radioactive highlights.
+
+### The "No-Line" Rule
+**Prohibit 1px solid borders for sectioning.** Structure must be defined through background shifts or light-emitting gradients. Use `surface_container_low` against `surface` to define regions. If a boundary feels "lost," do not reach for a stroke; reach for a tonal shift.
+
+### Surface Hierarchy & Nesting
+Treat the UI as a series of monolithic slabs. 
+- **Base Layer:** `surface` (#130827) provides the "midnight" foundation.
+- **Primary Content Blocks:** Use `surface_container` (#1f1238) for main modules.
+- **Interactive Insets:** Use `surface_container_high` (#261740) for nested elements like input fields or secondary cards.
+- **Deep Insets:** Use `surface_container_lowest` (#000000) for "black hole" code blocks or media galleries to create a sense of infinite depth.
+
+### The "Glass & Gradient" Rule
+To bridge the gap between "Digital Glitch" and "Solarpunk," utilize semi-transparent layers.
+- **Solar Flares:** Apply a linear gradient from `primary` (#ff7cf5) to `secondary` (#00f1fd) at 15% opacity over `surface` to create "light leak" effects.
+- **Cyber-Glass:** Use `surface_variant` (#2d1d49) at 92% opacity for floating navigation or overlays. Depth is achieved through tonal contrast, not blur — a slightly lighter background against the void reads as "lifted" without any filter.
+
+---
+
+## 3. Typography: Retro-Future Editorial
+Our type system juxtaposes the mechanical with the classical, creating an "archaeology of the future."
+
+*   **The Powerhouse (Display & Headlines):** `Space Grotesk` weight 600. Use 3.5rem for hero statements to command the grid.
+*   **The Human Element (Labels):** `Space Grotesk` weight 300 + letter-spacing 0.12em. Light weight with open tracking reads as the serif "breath" this role needs — editorial without a second typeface.
+*   **The Utility (Body & Title):** `Space Grotesk` weight 400. Clean and high-legibility. Noto Emoji for any iconographic characters inline.
+*   **One font, three weights.** The mechanical contrast comes from scale and tracking, not typeface switching.
+
+---
+
+## 4. Elevation & Depth: Tonal Layering
+Traditional shadows are too "soft" for this aesthetic. We use light and tone to simulate height.
+
+*   **The Layering Principle:** Avoid elevation 1–5. Instead, use the **Stacking Rule**: 
+    - `surface_container_low` = Ground.
+    - `surface_container` = Raised Platform.
+    - `surface_container_highest` = Topmost focus.
+*   **Ambient Shadows:** If a floating element requires a shadow, it must be tinted. Use `surface_tint` (#ff7cf5) at 10% opacity with a blur of 8px and 0px spread. This creates a tight glow rather than a shadow, making the element look like it’s emitting light. Keep blur at or below 8px — the sharpness is the point.
+*   **The "Ghost Border" Fallback:** If accessibility requires a container boundary, use `outline_variant` (#4e4264) at **15% opacity**. Never use a 100% opaque border.
+
+---
+
+## 5. Components
+
+### Buttons
+- **Primary:** Background `primary` (#ff7cf5), Text `on_primary` (#580058). Shape: Strict 0px corners. Hover state: Shift background to `primary_fixed_dim` (#ff1cfe) with a subtle `secondary` (#00f1fd) outer glow.
+- **Secondary:** Background `transparent`, Border `outline` (#7d6f94) at 40%, Text `primary`.
+- **Tertiary:** Text `tertiary` (#e9ffba), no background. Use for low-priority actions.
+
+### Input Fields
+- **Container:** `surface_container_high` (#261740).
+- **Bottom Indicator:** Instead of a full border, use a 2px bottom-only stroke in `secondary` (#00f1fd) that expands on focus.
+- **Error State:** Use `error` (#ff6e84) for text and a "digital glitch" animation (slight X-axis jitter) on the label.
+
+### Cards & Lists
+- **The Divider Ban:** Never use horizontal rules. Use `spacing.6` (2rem) of vertical whitespace to separate list items.
+- **Selection:** Use a background of `surface_bright` (#342353) to indicate active states.
+
+### Chips
+- **Aesthetic:** `surface_container_highest` background with `on_surface_variant` text. Sharp edges are non-negotiable.
+
+---
+
+## 6. Do’s and Don'ts
+
+### Do:
+*   **Embrace Asymmetry:** Offset your headline from your body text using the `spacing.10` or `spacing.12` tokens.
+*   **Mix Textures:** Place a high-resolution photo of lush ferns behind a UI panel with a "scanline" or "noise" overlay.
+*   **Use Harsh Cuts:** Use `0px` for all containers, buttons, and selection states.
+
+### Don't:
+*   **Never use Rounded Corners:** Even a 2px radius destroys the "Blade Runner" precision.
+*   **Avoid Muted Tones:** If the screen looks "dusty," you aren't using enough `secondary` (#00f1fd) or `tertiary` (#e9ffba) highlights.
+*   **No Standard Drop Shadows:** Do not use black or grey shadows. Only use tinted glows or tonal shifts.
+*   **Don't Over-Animate:** Use "instant" or "glitch" transitions (0.1s duration). Avoid "bouncy" or "organic" easing; the motion should feel like a high-speed data transfer.
--- a/Videos/JL-design-reference/code.html
+++ b/Videos/JL-design-reference/code.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&amp;family=Manrope:wght@200;300;400;500;600;700;800&amp;family=Newsreader:ital,wght@0,200..800;1,200..800&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            colors: {
+              "background": "#130827",
+              "error": "#ff6e84",
+              "tertiary": "#e9ffba",
+              "primary-fixed-dim": "#ff1cfe",
+              "on-surface": "#ede0ff",
+              "secondary-container": "#00696f",
+              "outline": "#7d6f94",
+              "inverse-on-surface": "#5c4f72",
+              "surface-container-high": "#261740",
+              "on-primary-fixed-variant": "#540054",
+              "on-secondary-fixed": "#004145",
+              "surface-tint": "#ff7cf5",
+              "error-dim": "#d73357",
+              "secondary": "#00f1fd",
+              "on-secondary-container": "#e1fdff",
+              "primary-dim": "#ff51fa",
+              "on-error-container": "#ffb2b9",
+              "surface-container-low": "#180c2f",
+              "tertiary-dim": "#afee00",
+              "inverse-surface": "#fef7ff",
+              "on-secondary": "#00565a",
+              "secondary-fixed-dim": "#00e2ed",
+              "on-background": "#ede0ff",
+              "tertiary-fixed-dim": "#afee00",
+              "primary-fixed": "#ff5af9",
+              "primary": "#ff7cf5",
+              "error-container": "#a70138",
+              "surface-bright": "#342353",
+              "surface-container-lowest": "#000000",
+              "on-error": "#490013",
+              "on-primary": "#580058",
+              "on-tertiary": "#4a6600",
+              "on-tertiary-container": "#435d00",
+              "primary-container": "#ff5af9",
+              "on-tertiary-fixed": "#344a00",
+              "on-secondary-fixed-variant": "#006065",
+              "on-primary-fixed": "#000000",
+              "on-surface-variant": "#b4a4cc",
+              "on-tertiary-fixed-variant": "#4b6800",
+              "surface-container": "#1f1238",
+              "tertiary-fixed": "#bafd00",
+              "surface": "#130827",
+              "surface-variant": "#2d1d49",
+              "outline-variant": "#4e4264",
+              "secondary-dim": "#00e2ed",
+              "tertiary-container": "#bafd00",
+              "secondary-fixed": "#00f1fd",
+              "on-primary-container": "#440044",
+              "surface-dim": "#130827",
+              "surface-container-highest": "#2d1d49",
+              "inverse-primary": "#aa00aa"
+            },
+            fontFamily: {
+              "headline": ["Space Grotesk"],
+              "body": ["Manrope"],
+              "label": ["Newsreader"]
+            },
+            borderRadius: {"DEFAULT": "0px", "lg": "0px", "xl": "0px", "full": "9999px"},
+          },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+            display: inline-block;
+            line-height: 1;
+            text-transform: none;
+            letter-spacing: normal;
+            word-wrap: normal;
+            white-space: nowrap;
+            direction: ltr;
+        }
+        .glitch-overlay {
+            background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
+            pointer-events: none;
+        }
+    </style>
+<style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+  </head>
+<body class="bg-background text-on-background font-body selection:bg-primary selection:text-on-primary min-h-screen pb-24">
+<!-- TopAppBar -->
+<header class="fixed top-0 z-50 w-full bg-[#130827] flex justify-between items-center px-6 py-4 rounded-none border-b-2 border-[#00f1fd]/30">
+<div class="flex items-center gap-4">
+<button class="text-[#ff7cf5] hover:bg-[#261740] hover:text-[#00f1fd] transition-all duration-100 p-1">
+<span class="material-symbols-outlined" data-icon="menu">menu</span>
+</button>
+<h1 class="text-2xl font-black italic text-[#ff7cf5] drop-shadow-[0_0_10px_rgba(255,124,245,0.5)] font-['Space_Grotesk'] uppercase tracking-tighter">NEON SOLAR</h1>
+</div>
+<button class="text-[#ff7cf5] hover:bg-[#261740] hover:text-[#00f1fd] transition-all duration-100 p-1">
+<span class="material-symbols-outlined" data-icon="settings">settings</span>
+</button>
+</header>
+<!-- Main Canvas -->
+<main class="pt-24 px-4 space-y-8 relative overflow-hidden">
+<!-- Aesthetic Solar Flare Background -->
+<div class="absolute top-0 right-0 w-96 h-96 bg-primary/10 blur-[100px] -z-10 translate-x-1/2 -translate-y-1/2"></div>
+<div class="absolute bottom-1/4 left-0 w-80 h-80 bg-secondary/10 blur-[80px] -z-10 -translate-x-1/2"></div>
+<!-- Featured Section -->
+<section class="relative">
+<div class="flex items-baseline justify-between mb-4">
+<h2 class="font-headline font-bold text-3xl uppercase tracking-tighter text-secondary">LIVE_NOW</h2>
+<span class="font-label italic text-tertiary text-lg">Solar Cycle 042</span>
+</div>
+<div class="relative bg-surface-container aspect-video overflow-hidden border-l-4 border-primary">
+<img alt="Cyberpunk sunset" class="w-full h-full object-cover mix-blend-screen opacity-80" data-alt="Hyper-saturated vaporwave sunset with digital scanlines, silhouetted palm trees against a neon pink and cyan sky" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDhcdJEpHv0or4scsO5clCDViEnq9k8gyhINhbczm3UpHHF0ZD44nrINE2dCpKPCvF8ch00p5iS7-zBua_yTdg0Kh6MPzlt6MCwa-kQILOkQZhfJW2NxmdMeW2W2Qr7LgkP9OEg8ahobg6rxsIRq1IkkD_oLJIuptKSRJ7QCyXNpAWwKh12Xzw5rgW0L-dGiO6jlhaA30T2EO_wgpaT6zdrKj0vO2tCWtWZfMnhWuSzcC5pBDgVa30nC5JVbBqDa9wJgoAlYv1zRIc"/>
+<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div>
+<div class="glitch-overlay absolute inset-0"></div>
+<!-- Play Button -->
+<button class="absolute inset-0 m-auto w-20 h-20 bg-primary flex items-center justify-center hover:scale-110 active:scale-95 transition-all duration-100 shadow-[0_0_30px_rgba(255,124,245,0.6)]">
+<span class="material-symbols-outlined text-on-primary text-5xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
+</button>
+<div class="absolute bottom-4 left-4 right-4">
+<div class="bg-surface-container-highest/80 backdrop-blur-md p-4 border-t-2 border-secondary/50">
+<p class="font-headline font-bold text-xl text-on-surface uppercase tracking-tight">SOLAR_PUNK_INITIATIVE: VOL 01</p>
+<p class="font-label text-tertiary text-sm italic">24,892 VIEWERS TUNED IN</p>
+</div>
+</div>
+</div>
+</section>
+<!-- Video Grid -->
+<section class="space-y-6">
+<div class="flex items-center gap-4">
+<div class="h-[2px] flex-grow bg-gradient-to-r from-transparent via-outline-variant/30 to-transparent"></div>
+<h3 class="font-headline font-medium text-xs tracking-[0.3em] uppercase text-on-surface-variant">ARCHIVE_DEEP_DIVE</h3>
+<div class="h-[2px] flex-grow bg-gradient-to-r from-transparent via-outline-variant/30 to-transparent"></div>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+<!-- Video Card 1 -->
+<div class="group relative space-y-3">
+<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-tertiary">
+<img alt="Digital flora" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Macro shot of bioluminescent tropical leaves with glowing cyan veins in a dark jungle setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4fD2fhqpwAV-Galw5QYrqZl9x-OlV_2JV7Nt87bqiOYIfexNMdfhfkFgESGbYyLE9v8HkLfS3c8N07W4aEqZz9VRAZj3EAwbYi_zFjA8yb_y9wdDSc_6iY-uzeTg_Gtmz7WMWhixSFBb_qiHgvBmaeM2G9LsGnX5KDl7ZJU4cZ36tKaVkmIwSD5CDv6re2QxMgP6hTzf1b349Q7ZSjqaXgqEtDzEAcVNGC8zJikBc1nIS5gj6JBb8pCodU9OVL4fL69n_scV7d1A"/>
+<div class="absolute inset-0 bg-secondary/10 mix-blend-overlay"></div>
+<button class="absolute inset-0 m-auto w-12 h-12 bg-secondary text-on-secondary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
+<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
+</button>
+<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-secondary border border-secondary/30">
+                            04:20
+                        </div>
+</div>
+<div>
+<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-primary transition-colors">GLITCH_JUNGLE_WALKTHROUGH</h4>
+<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #00FF1D</p>
+</div>
+</div>
+<!-- Video Card 2 -->
+<div class="group relative space-y-3">
+<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-primary">
+<img alt="Neon rave" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Atmospheric low angle shot of neon lights reflecting on wet pavement with palm tree shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_GeleYh_RHYJA5fioJh4UtqqzFtWo4oZlOtmNTOIDix29-_K-iYPd7xWnW7-4fPkqEZmkdTlGTbjqDXB4vmOUFrOc8_QEFTQXilW5PJt8SacD_nGYrwO3xANClkG-fv2CdTtg9o1iVSKeklkdjRMY290Rs9INH3n5nKvU1NUMB7isKpKHLPumdO-gGSpSIyd91m_8kYt3akx5cdQJlh_x7gmRKjqGs6Qk3VZfbsEkVrT_6BfsQKLWPDRZ2Qzm2grTGUPs8BdQ9Pg"/>
+<div class="absolute inset-0 bg-primary/10 mix-blend-overlay"></div>
+<button class="absolute inset-0 m-auto w-12 h-12 bg-primary text-on-primary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
+<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
+</button>
+<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-primary border border-primary/30">
+                            12:55
+                        </div>
+</div>
+<div>
+<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-secondary transition-colors">NEON_BEACH_MEMORIES</h4>
+<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #FF00F5</p>
+</div>
+</div>
+<!-- Video Card 3 -->
+<div class="group relative space-y-3">
+<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-secondary">
+<img alt="Crystal flora" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Digital rendering of crystalline tropical plants reflecting pink and purple laser light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAAbkXx1Q1B3j_0mZTiWl77No3wfmL2E7MWWfizSwQUTgBrZLITB1UhwAO1qeShFFECNksh6_T9fKrzCBGBKWk-kzUGRRc-Owu_Rlubuy_Kbazrz3uhXa6m_0TTPey9-3d8OSVVuhxwMCfJG1vjbLOssjRPEVv7rrS5SbP5SpPT8RzxZcS3uu4kxFSR6LPLqPJZWKkwviR6V7KiVY20LOuT0tuaoSXZe63uPO1hzK0Ru_q5c8_JEdnDk3gr856VUbQynEOGIJzCPUc"/>
+<div class="absolute inset-0 bg-tertiary/10 mix-blend-overlay"></div>
+<button class="absolute inset-0 m-auto w-12 h-12 bg-tertiary text-on-tertiary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
+<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
+</button>
+<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-tertiary border border-tertiary/30">
+                            08:12
+                        </div>
+</div>
+<div>
+<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-primary transition-colors">BOTANICAL_UPGRADE_V3</h4>
+<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #E9FFBA</p>
+</div>
+</div>
+<!-- Video Card 4 -->
+<div class="group relative space-y-3">
+<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-primary">
+<img alt="Digital sky" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Fast-moving clouds in a hyper-real sky with digital distortion and pixelated artifacts" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEe9Ag_nfP4pjNboSq_yVC-9SXgCRyH0py8lbeb62gsw7yTBO6FGxYnNccVs1ikADIt13vPKf1T11wZ3rISr2xluE7I86TGWRf6wkOe9uHEJZ4ImJE7yTty8U08tELmigbpPkez15yy6Bnsqqix64waUNxkSRtX2O1MUdK6ve2p9D05mk4e071gaMUxzR9F_prGemprPofGnEqcO7FcAfRjcpZcoPYIinAueC9WIyKbctl9xGvBdp1c-VUaV5DtVY4Gbif87WBDss"/>
+<button class="absolute inset-0 m-auto w-12 h-12 bg-primary text-on-primary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
+<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
+</button>
+<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-primary border border-primary/30">
+                            01:30
+                        </div>
+</div>
+<div>
+<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-secondary transition-colors">ATMOSPHERIC_DATA_STREAM</h4>
+<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #AABBCC</p>
+</div>
+</div>
+</div>
+</section>
+<!-- Decorative Palm Leaf Overlay (Floating) -->
+<div class="fixed bottom-24 -right-12 w-64 h-64 pointer-events-none opacity-20 rotate-12 mix-blend-color-dodge">
+<img alt="Palm leaf" class="w-full h-full object-contain filter invert hue-rotate-180" data-alt="Detailed silhouette of a monstera leaf with high contrast highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhwE0zBVGUBSNIgT84a75aq3GGc7HNrI_PK77D5u7CHlzd2fIjK-Ma-VaRNww9cREL4tadifqF4zi2dDMdYtxz1oqwpRi4OjvMqFYEZH5Qo8oaEKdjtBbYRNH0z_y9ZHoSa-pQbMvr-FEOUN-O1axfkZSRpTx1Imo8QNBhCSpV3quOg7JpUL2mcf_MMcvE_Iutkg9vW5JoBC0VBb9xa8I-CwQ00XMUhO5Dzca4Tvgh0POcj4AyJZ60d6cfOEJvzAnlDAAKGt_TuCw"/>
+</div>
+</main>
+<!-- BottomNavBar -->
+<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center h-20 px-4 bg-[#1f1238]/90 backdrop-blur-xl z-50 rounded-none border-t-2 border-[#ff7cf5]/20 shadow-[0_-4px_20px_rgba(255,124,245,0.15)]">
+<a class="flex flex-col items-center justify-center bg-[#ff7cf5] text-[#130827] rounded-none px-6 py-2 scale-105 transition-all duration-100" href="#">
+<span class="material-symbols-outlined" data-icon="grid_view" style="font-variation-settings: 'FILL' 1;">grid_view</span>
+<span class="font-['Space_Grotesk'] font-medium text-[10px] uppercase tracking-widest mt-1">Gallery</span>
+</a>
+<a class="flex flex-col items-center justify-center text-[#7d6f94] px-6 py-2 hover:text-[#ff7cf5] hover:bg-[#2d1d49] transition-all duration-100" href="#">
+<span class="material-symbols-outlined" data-icon="search">search</span>
+<span class="font-['Space_Grotesk'] font-medium text-[10px] uppercase tracking-widest mt-1">Search</span>
+</a>
+<a class="flex flex-col items-center justify-center text-[#7d6f94] px-6 py-2 hover:text-[#ff7cf5] hover:bg-[#2d1d49] transition-all duration-100" href="#">
+<span class="material-symbols-outlined" data-icon="person">person</span>
+<span class="font-['Space_Grotesk'] font-medium text-[10px] uppercase tracking-widest mt-1">Profile</span>
+</a>
+</nav>
+</body></html>
--- a/Videos/cringe-pit.html
+++ b/Videos/cringe-pit.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE CRINGE PIT // Singular Particular</title>
-    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Protest+Revolution&family=Space+Mono:wght@400;700&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --background: #04060b;
@@ -52,7 +52,7 @@
        }

        h1, h2, h3, h4 {
-            font-family: 'Bebas Neue', sans-serif;
+            font-family: 'Protest Revolution', sans-serif;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.05em;
@@ -134,7 +134,7 @@
        }

        .video-title {
-            font-family: 'Bebas Neue', sans-serif;
+            font-family: 'Protest Revolution', sans-serif;
            font-size: 1.7rem;
            letter-spacing: 0.06em;
            margin-bottom: var(--space-2);
@@ -165,6 +165,8 @@
            max-width: 600px;
            background-color: var(--surface-container-high);
            padding: var(--space-8);
+            max-height: 90vh;
+            overflow-y: auto;
            position: relative;
            border-left: 3px solid var(--primary);
            box-shadow: 0 0 60px rgba(255, 26, 224, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.5);
@@ -192,7 +194,7 @@
            color: var(--on-primary);
            border: none;
            padding: var(--space-2) var(--space-6);
-            font-family: 'Bebas Neue', sans-serif;
+            font-family: 'Protest Revolution', sans-serif;
            font-size: 1.2rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
@@ -343,11 +345,11 @@
            localStorage.setItem('cringe_pit_visited', 'true');
        }

-        window.onload = () => {
+        document.addEventListener('DOMContentLoaded', () => {
            if (!localStorage.getItem('cringe_pit_visited')) {
                document.getElementById('welcome-gate').classList.add('active');
            }
-        };
+        });
    </script>
 </body>
 </html>
--- a/Videos/index.html
+++ b/Videos/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Videos // Singular Particular</title>
-    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Workbench&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #04060b;
@@ -47,7 +47,7 @@
        }

        h1 {
-            font-family: 'Bebas Neue', sans-serif;
+            font-family: 'Workbench', sans-serif;
            font-size: clamp(3.5rem, 12vw, 6rem);
            line-height: 0.85;
            color: var(--on-surface);
@@ -127,7 +127,7 @@
        }

        .card-title {
-            font-family: 'Bebas Neue', sans-serif;
+            font-family: 'Workbench', sans-serif;
            font-size: clamp(1.8rem, 5vw, 2.8rem);
            letter-spacing: 0.05em;
            color: var(--on-surface);
--- a/Videos/nomad-soul.html
+++ b/Videos/nomad-soul.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOUR NOMAD SOUL // Singular Particular</title>
-    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rye&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Trade+Winds&family=Babylonica&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --background: #0a0704;
@@ -60,7 +60,7 @@
        }

        h1 {
-            font-family: 'Bebas Neue', sans-serif;
+            font-family: 'Trade Winds', sans-serif;
            font-weight: 400;
            font-size: clamp(5rem, 20vw, 11rem);
            color: var(--primary);
@@ -99,7 +99,7 @@
        }

        .entry-title {
-            font-family: 'Rye', serif;
+            font-family: 'Babylonica', serif;
            font-size: 2.2rem;
            font-weight: 400;
            margin-bottom: var(--space-8);
@@ -212,7 +212,7 @@
        }

        .lightbox-quote {
-            font-family: 'Rye', serif;
+            font-family: 'Babylonica', serif;
            font-size: 1.6rem;
            line-height: 1.35;
            margin-bottom: var(--space-12);
@@ -405,11 +405,11 @@
            localStorage.setItem('nomad_visited', 'true');
        }

-        window.onload = () => {
+        document.addEventListener('DOMContentLoaded', () => {
            if (!localStorage.getItem('nomad_visited')) {
                document.getElementById('welcome-gate').classList.add('active');
            }
-        };
+        });
    </script>
 </body>
 </html>
--- a/Videos/renegade-storyteller.html
+++ b/Videos/renegade-storyteller.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE RENEGADE STORYTELLER // Singular Particular</title>
-    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Amarante&family=Faculty+Glyphic&family=Rambla:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --background: #04060b;
@@ -41,14 +41,14 @@
        body {
            background-color: var(--background);
            color: var(--on-surface);
-            font-family: 'Barlow Condensed', sans-serif;
+            font-family: 'Rambla', sans-serif;
            line-height: 1.5;
            overflow-x: hidden;
            min-height: 100vh;
        }

        .font-mechanical {
-            font-family: 'Bebas Neue', sans-serif;
+            font-family: 'Amarante', sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
@@ -62,9 +62,9 @@
        }

        h1 {
-            font-family: 'Bebas Neue', sans-serif;
+            font-family: 'Amarante', sans-serif;
            font-weight: 400;
-            font-size: clamp(4rem, 16vw, 8rem);
+            font-size: clamp(3rem, 16vw, 8rem);
            line-height: 0.8;
            color: var(--primary);
            text-transform: uppercase;
@@ -85,6 +85,10 @@
            font-family: 'JetBrains Mono', monospace;
        }

+        @media (max-width: 767px) {
+            h1::before { letter-spacing: 0.12em; }
+        }
+
        .container {
            max-width: 1400px;
            margin: 0 auto;
@@ -136,7 +140,7 @@
        }

        .video-card h2 {
-            font-family: 'Barlow Condensed', sans-serif;
+            font-family: 'Faculty Glyphic', sans-serif;
            font-weight: 700;
            font-size: 1.6rem;
            letter-spacing: 0.02em;
@@ -172,7 +176,7 @@
        }

        .lightbox-content h3 {
-            font-family: 'Bebas Neue', sans-serif;
+            font-family: 'Amarante', sans-serif;
            font-size: 1.8rem;
            letter-spacing: 0.1em;
            color: var(--primary);
@@ -180,7 +184,7 @@
        }

        .lightbox-quote {
-            font-family: 'Barlow Condensed', sans-serif;
+            font-family: 'Rambla', sans-serif;
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 1.4;
@@ -395,11 +399,11 @@
            localStorage.setItem('renegade_visited', 'true');
        }

-        window.onload = () => {
+        document.addEventListener('DOMContentLoaded', () => {
            if (!localStorage.getItem('renegade_visited')) {
                document.getElementById('welcome-gate').classList.add('active');
            }
-        };
+        });
    </script>
 </body>
 </html>
--- a/Writings/HowToBuildARaft_Annotated.html
+++ b/Writings/HowToBuildARaft_Annotated.html
@@ -6,7 +6,7 @@
 <title>How to Build a Raft — Annotated</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=Glass+Antiqua&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@@ -68,7 +68,7 @@ body {
  opacity: 0.85;
 }
 .site-title {
-  font-family: 'Cinzel Decorative', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: clamp(1.5rem, 4.5vw, 3rem);
  font-weight: 700;
  color: #f3e5bb;
@@ -78,7 +78,7 @@ body {
  text-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 30px rgba(200,150,50,0.15);
 }
 .site-subtitle {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.8rem;
  color: rgba(220,195,140,0.65);
  letter-spacing: 0.3em;
@@ -99,7 +99,7 @@ body {
  flex-wrap: wrap;
 }
 .nav-btn {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
@@ -166,7 +166,7 @@ body {
  hyphens: auto;
 }
 .story-body > p:first-of-type::first-letter {
-  font-family: 'Cinzel Decorative', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 3.9em;
  float: left;
  line-height: 0.75;
@@ -227,7 +227,7 @@ body {

 .decode-label {
  display: block;
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.63rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
@@ -236,7 +236,7 @@ body {
 }
 .decode-term {
  display: block;
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--forest);
@@ -247,7 +247,7 @@ body {
 .decode-link {
  display: block;
  margin-top: 0.45rem;
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.68rem;
  color: var(--forest);
  text-decoration: none;
@@ -310,7 +310,7 @@ body {
  background: linear-gradient(to right, rgba(45,90,46,0.07), transparent);
 }
 .lightbox-title {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--forest);
@@ -336,7 +336,7 @@ body {
  color: var(--ink);
 }
 .lightbox-body h3 {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
@@ -371,7 +371,7 @@ body {
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.06em;
@@ -409,7 +409,7 @@ body {

 /* ── SECTION HEADERS ── */
 .section-title {
-  font-family: 'Cinzel Decorative', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: clamp(1.25rem, 3.5vw, 1.8rem);
  color: var(--forest);
  text-align: center;
@@ -428,7 +428,7 @@ body {

 /* ── FURTHER READING ── */
 .reading-group-title {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
@@ -459,7 +459,7 @@ body {
  flex: 1 1 200px;
 }
 .reading-tag {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
--- a/Writings/OfPensandSwordsIntheBellyoftheDragon.html
+++ b/Writings/OfPensandSwordsIntheBellyoftheDragon.html
@@ -6,7 +6,7 @@
 <title>Of Pens and Swords / In the Belly of the Dragon — Annotated</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Cinzel:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Glass+Antiqua&display=swap" rel="stylesheet">
 <style>
  :root {
    --bg-deep:       #07070b;
--- a/Writings/SkyFishing_Annotated.html
+++ b/Writings/SkyFishing_Annotated.html
@@ -6,7 +6,7 @@
 <title>Sky Fishing — Annotated</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Estonia&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Share+Tech+Mono&display=swap" rel="stylesheet">
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@@ -81,7 +81,7 @@ body {
 }

 .header-eyebrow {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
@@ -92,7 +92,7 @@ body {
 }

 .site-title {
-  font-family: 'Cormorant Garamond', serif;
+  font-family: 'Estonia', serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 700;
  font-style: italic;
@@ -115,7 +115,7 @@ body {
 }

 .site-subtitle {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
@@ -137,7 +137,7 @@ body {
  flex-wrap: wrap;
 }
 .nav-btn {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.2em;
@@ -201,7 +201,7 @@ body {
  border-bottom: 1px solid var(--dawn-dark);
 }
 .doc-overline {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.57rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
@@ -209,7 +209,7 @@ body {
  margin-bottom: 0.9rem;
 }
 .doc-title {
-  font-family: 'Cormorant Garamond', serif;
+  font-family: 'Estonia', serif;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 700;
  font-style: italic;
@@ -236,7 +236,7 @@ body {

 /* Timeline labels — Past / Present */
 .timeline-label {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
@@ -268,7 +268,7 @@ body {

 /* First letter on opening paragraph only */
 .story-open::first-letter {
-  font-family: 'Cormorant Garamond', serif;
+  font-family: 'Estonia', serif;
  font-size: 3.8em;
  font-weight: 700;
  float: left;
@@ -282,7 +282,7 @@ body {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--dawn-dark);
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
@@ -357,7 +357,7 @@ body {

 .decode-label {
  display: block;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.57rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
@@ -366,7 +366,7 @@ body {
 }
 .decode-term {
  display: block;
-  font-family: 'Cormorant Garamond', serif;
+  font-family: 'Estonia', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dawn);
@@ -377,7 +377,7 @@ body {
 .decode-link {
  display: block;
  margin-top: 0.42rem;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  color: var(--horizon);
  text-decoration: none;
@@ -431,7 +431,7 @@ body {
  border-bottom: 1px solid rgba(74,122,170,0.3);
 }
 .lightbox-title {
-  font-family: 'Cormorant Garamond', serif;
+  font-family: 'Estonia', serif;
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
@@ -459,7 +459,7 @@ body {
  color: var(--haze);
 }
 .lightbox-body h3 {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
@@ -480,7 +480,7 @@ body {
 ══════════════════════════════════════ */
 .section-header { margin-bottom: 2.2rem; }
 .section-eyebrow {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
@@ -489,7 +489,7 @@ body {
  opacity: 0.8;
 }
 .section-title {
-  font-family: 'Cormorant Garamond', serif;
+  font-family: 'Estonia', serif;
  font-size: clamp(1.7rem, 5vw, 2.8rem);
  font-weight: 700;
  font-style: italic;
@@ -561,7 +561,7 @@ body {

 /* ── FURTHER READING ── */
 .reading-group-title {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.57rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
@@ -579,7 +579,7 @@ body {
 .reading-item a:hover { text-decoration: underline; color: var(--cloud); }
 .reading-desc { color: rgba(194,216,236,0.45); font-size: 0.84rem; font-style: italic; flex: 1 1 200px; font-family: 'Lora', serif; }
 .reading-tag {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Share Tech Mono', monospace;
  font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(26,48,80,0.8); color: rgba(194,216,236,0.5);
  border: 1px solid rgba(74,122,170,0.25);
--- a/Writings/doomy-mcdoomface.html
+++ b/Writings/doomy-mcdoomface.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>DOOMY McDOOMFACE — A Doomsday Primer</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Anton&family=Special+Elite&family=Share+Tech+Mono&family=Oswald:wght@400;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Special+Elite&family=Share+Tech+Mono&family=Oswald:wght@400;700&display=swap" rel="stylesheet">
 <style>
  :root {
    --bg:       #0f0808;
@@ -79,7 +79,7 @@
  }

  .masthead-title {
-    font-family: 'Anton', sans-serif;
+    font-family: 'Rubik Glitch', sans-serif;
    font-size: clamp(44px, 8vw, 82px);
    line-height: 0.9;
    color: var(--bg);
@@ -200,7 +200,7 @@
  .story-byline a:hover { color: var(--yellow); }

  .story-body h2 {
-    font-family: 'Anton', sans-serif;
+    font-family: 'Rubik Glitch', sans-serif;
    font-size: clamp(22px, 4vw, 34px);
    color: var(--yellow);
    text-transform: uppercase;
@@ -328,7 +328,7 @@
  }

  .decoder-panel .decode-term {
-    font-family: 'Anton', sans-serif;
+    font-family: 'Rubik Glitch', sans-serif;
    font-size: 18px;
    color: var(--yellow);
    display: block;
@@ -395,7 +395,7 @@
  }

  .clock-time-display {
-    font-family: 'Anton', sans-serif;
+    font-family: 'Rubik Glitch', sans-serif;
    font-size: 58px;
    color: var(--red);
    line-height: 1;
@@ -425,7 +425,7 @@
  }

  .timeline-title {
-    font-family: 'Anton', sans-serif;
+    font-family: 'Rubik Glitch', sans-serif;
    font-size: 22px;
    color: var(--yellow);
    text-transform: uppercase;
@@ -450,7 +450,7 @@
  }

  .timeline-time {
-    font-family: 'Anton', sans-serif;
+    font-family: 'Rubik Glitch', sans-serif;
    font-size: 18px;
    color: var(--red);
    min-width: 90px;
@@ -599,7 +599,7 @@

  /* === RESOURCES TAB === */
  .resources-section-title {
-    font-family: 'Anton', sans-serif;
+    font-family: 'Rubik Glitch', sans-serif;
    font-size: 20px;
    color: var(--yellow);
    text-transform: uppercase;
@@ -731,7 +731,7 @@
  }

  .lightbox-body h3 {
-    font-family: 'Anton', sans-serif;
+    font-family: 'Rubik Glitch', sans-serif;
    font-size: 24px;
    color: var(--yellow);
    text-transform: uppercase;
--- a/Writings/escape-annotated-minimalist.html
+++ b/Writings/escape-annotated-minimalist.html
--- a/Writings/escape-annotated-v2.html
+++ b/Writings/escape-annotated-v2.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ESCAPE — Annotated Edition</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital,wght@0,400;0,500;1,400&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Lora:ital,wght@0,400;0,500;1,400&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
 html{font-size:16px;scroll-behavior:smooth;}
@@ -120,7 +120,7 @@ body {
 }

 h1 {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: clamp(5rem, 18vw, 11rem);
  letter-spacing: 0.06em;
  line-height: 0.88;
@@ -192,7 +192,7 @@ h1 {
  border: none;
  border-top: 2px solid transparent;
  color: var(--cold-dim);
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  padding: 0.9rem 1.5rem 0.75rem;
@@ -263,7 +263,7 @@ h1 {
  background: var(--cold-border);
 }
 .countdown-numeral {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: clamp(4rem, 14vw, 7.5rem);
  letter-spacing: 0.04em;
  line-height: 1;
@@ -347,7 +347,7 @@ h1 {

 .decode-label {
  display:block;
-  font-family:'Bebas Neue',sans-serif;
+  font-family:'Fredericka the Great',sans-serif;
  font-size:0.7rem;
  letter-spacing:0.32em;
  color: var(--warm-hi);
@@ -355,7 +355,7 @@ h1 {
 }
 .decode-term {
  display:block;
-  font-family:'Bebas Neue',sans-serif;
+  font-family:'Fredericka the Great',sans-serif;
  font-size:1.05rem;
  letter-spacing:0.1em;
  color: var(--warm-amber);
@@ -421,7 +421,7 @@ h1 {

 .mn-label {
  display:block;
-  font-family:'Bebas Neue',sans-serif;
+  font-family:'Fredericka the Great',sans-serif;
  font-size:0.7rem;
  letter-spacing:0.32em;
  color: var(--warm-border);
@@ -479,7 +479,7 @@ h1 {
  position:sticky; top:0;
 }
 .lb-title {
-  font-family:'Bebas Neue',sans-serif;
+  font-family:'Fredericka the Great',sans-serif;
  font-size:1.1rem;
  letter-spacing:0.18em;
  color: var(--warm-amber);
@@ -497,7 +497,7 @@ h1 {
 .lb-close:hover { color: var(--warm-amber); border-color: var(--warm-border); }
 .lb-body { padding:1.5rem; }
 .lb-body h3 {
-  font-family:'Bebas Neue',sans-serif;
+  font-family:'Fredericka the Great',sans-serif;
  font-size:0.85rem;
  letter-spacing:0.28em;
  color: var(--warm-border);
@@ -567,7 +567,7 @@ h1 {
  padding:3.5rem 1.5rem 6rem;
 }
 .edu-wrap > h2 {
-  font-family:'Bebas Neue',sans-serif;
+  font-family:'Fredericka the Great',sans-serif;
  font-size:clamp(2rem,6vw,3rem);
  letter-spacing:0.1em;
  color:#d0bc88;
@@ -585,7 +585,7 @@ h1 {

 /* ─── FURTHER READING ───────────────────────── */
 .reading-section h3 {
-  font-family:'Bebas Neue',sans-serif;
+  font-family:'Fredericka the Great',sans-serif;
  font-size:0.85rem;
  letter-spacing:0.3em;
  color: var(--warm-border);
--- a/Writings/gladstone-annotated.html
+++ b/Writings/gladstone-annotated.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Gladstone Gig — Annotated</title>
-  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&family=DM+Serif+Display:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Oswald:wght@400;600;700&family=DM+Serif+Display:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
  <style>
    /* ===== CUSTOM PROPERTIES ===== */
    :root {
@@ -95,7 +95,7 @@
    }

    .site-title {
-      font-family: 'Bebas Neue', sans-serif;
+      font-family: 'Fredericka the Great', sans-serif;
      font-size: 5.5rem;
      line-height: 0.9;
      letter-spacing: 4px;
@@ -533,7 +533,7 @@

    /* ===== TAB HEADINGS ===== */
    .tab-heading {
-      font-family: 'Bebas Neue', sans-serif;
+      font-family: 'Fredericka the Great', sans-serif;
      font-size: 3rem;
      letter-spacing: 3px;
      margin-bottom: 4px;
--- a/Writings/iwashere-annotated.html
+++ b/Writings/iwashere-annotated.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>I Was Here — Annotated Edition</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=IM+Fell+English:ital@0;1&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
 html{font-size:16px;scroll-behavior:smooth;}
@@ -76,7 +76,7 @@ body {
 /* Illuminated corner flourishes */
 .site-header::before,
 .site-header::after {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 3.5rem;
  color: var(--gold-dim);
  position: absolute;
@@ -103,7 +103,7 @@ body {
 }

 .header-ornament-top {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 1.4rem;
  color: var(--gold-dim);
  letter-spacing: 0.6em;
@@ -112,7 +112,7 @@ body {
 }

 h1 {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 10vw, 6rem);
  letter-spacing: 0.12em;
@@ -128,7 +128,7 @@ h1 {
 }

 .header-subtitle {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: var(--forest-dim);
@@ -151,7 +151,7 @@ h1 {
  opacity: 0.5;
 }
 .header-rule span {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.9rem;
  color: var(--gold-dim);
  letter-spacing: 0.3em;
@@ -184,7 +184,7 @@ h1 {
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-dim);
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.68rem; letter-spacing: 0.22em;
  padding: 1rem 1.4rem 0.8rem;
  cursor: pointer; transition: all 0.2s;
@@ -214,7 +214,7 @@ h1 {

 /* ── DROP CAP — for each named section ────────── */
 .section-opener::first-letter {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 4.2em;
  font-weight: 700;
  float: left;
@@ -244,7 +244,7 @@ h1 {
  position: relative;
 }
 .section-head-num {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
@@ -253,7 +253,7 @@ h1 {
  margin-bottom: 0.1rem;
 }
 .section-head-title {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--forest-dim);
@@ -277,7 +277,7 @@ h1 {
 .fear-refrain::before, .fear-refrain::after {
  content: '✦';
  font-style: normal;
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  color: var(--border-dim);
  font-size: 0.6rem;
  position: absolute;
@@ -297,7 +297,7 @@ h1 {
  position: relative;
 }
 .catalogue-label {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
@@ -316,7 +316,7 @@ h1 {
  padding: 4rem 0 2rem;
 }
 .final-words {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.18em;
@@ -345,7 +345,7 @@ h1 {
  margin-top: 3.5rem;
 }
 .challenge-box .ch-label {
-  font-family: 'Cinzel', serif;
+  font-family: 'Glass Antiqua', serif;
  font-size: 0.62rem; letter-spacing: 0.28em;
  color: var(--ink-faint); margin-bottom: 0.5rem;
 }
@@ -394,12 +394,12 @@ h1 {

 .decode-label {
  display: block;
-  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.28em;
+  font-family: 'Glass Antiqua', serif; font-size: 0.6rem; letter-spacing: 0.28em;
  color: var(--forest-faint); margin-bottom: 0.25rem;
 }
 .decode-term {
  display: block;
-  font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.06em;
+  font-family: 'Glass Antiqua', serif; font-size: 1rem; letter-spacing: 0.06em;
  color: var(--gold-faint); margin-bottom: 0.4rem;
 }
 .decoder-panel .panel-body {
@@ -444,7 +444,7 @@ h1 {

 .mn-label {
  display: block;
-  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.28em;
+  font-family: 'Glass Antiqua', serif; font-size: 0.6rem; letter-spacing: 0.28em;
  color: var(--ink-faint); margin-bottom: 0.25rem;
 }
 .marginnote-panel .panel-body {
@@ -489,7 +489,7 @@ h1 {
  background: var(--vellum-dark); position: sticky; top: 0;
 }
 .lb-title {
-  font-family: 'Cinzel', serif; font-size: 1rem;
+  font-family: 'Glass Antiqua', serif; font-size: 1rem;
  letter-spacing: 0.1em; color: var(--forest);
 }
 .lb-close {
@@ -502,7 +502,7 @@ h1 {
 .lb-close:hover { background: var(--forest); color: var(--gold-faint); border-color: var(--forest); }
 .lb-body { padding: 1.6rem; }
 .lb-body h3 {
-  font-family: 'Cinzel', serif; font-size: 0.68rem;
+  font-family: 'Glass Antiqua', serif; font-size: 0.68rem;
  letter-spacing: 0.25em; color: var(--forest-dim);
  margin: 1.4rem 0 0.5rem; padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--vellum-aged);
@@ -525,7 +525,7 @@ h1 {
  background: var(--vellum-mid); border: none; width: 100%;
  text-align: left; padding: 0.95rem 1.1rem; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
-  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em;
+  font-family: 'Glass Antiqua', serif; font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--ink-dim); transition: all 0.18s; gap: 1rem;
 }
 .acc-trigger:hover { background: var(--vellum-dark); color: var(--ink-mid); }
@@ -553,7 +553,7 @@ h1 {
  padding: 4rem 1.5rem 6rem;
 }
 .edu-wrap > h2 {
-  font-family: 'Cinzel', serif; font-weight: 600;
+  font-family: 'Glass Antiqua', serif; font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.12em; color: var(--forest);
  margin-bottom: 0.2rem;
@@ -567,7 +567,7 @@ h1 {

 /* ── FURTHER READING ────────────────────────── */
 .reading-section h3 {
-  font-family: 'Cinzel', serif; font-size: 0.65rem;
+  font-family: 'Glass Antiqua', serif; font-size: 0.65rem;
  letter-spacing: 0.28em; color: var(--forest-dim);
  margin: 2rem 0 0.65rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--vellum-aged);
--- a/Writings/johnny-and-clive.html
+++ b/Writings/johnny-and-clive.html
@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Johnny & Clive — Annotated</title>
-<link href="https://fonts.googleapis.com/css2?family=Anton&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

@@ -23,7 +23,7 @@
  --purp:#8855cc;  /* contested */
  --grn:#4a9060;   /* narrator DE */
  --sil:#707070;   /* stage directions */
-  --hdr:'Anton',Impact,sans-serif;
+  --hdr:'Rubik Glitch',Impact,sans-serif;
  --body:'Libre Baskerville',Georgia,serif;
  --ui:'Jost','Segoe UI',sans-serif;
 }
--- a/Writings/lastmenstanding-annotated.html
+++ b/Writings/lastmenstanding-annotated.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>LAST MEN STANDING — Annotated</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Special+Elite&family=Courier+Prime:ital@0;1&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Special+Elite&family=Courier+Prime:ital@0;1&display=swap" rel="stylesheet">
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
 html{font-size:16px;scroll-behavior:smooth;}
@@ -90,7 +90,7 @@ body {
 }

 h1 {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: clamp(3.5rem, 14vw, 8.5rem);
  letter-spacing: 0.05em;
  line-height: 0.9;
@@ -135,7 +135,7 @@ h1 span { color: var(--amber); }
  background:transparent; border:none;
  border-bottom: 3px solid transparent;
  color: var(--smoke);
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:1rem; letter-spacing:0.18em;
  padding: 0.85rem 1.5rem 0.65rem;
  cursor:pointer; transition:all 0.15s;
@@ -204,7 +204,7 @@ h1 span { color: var(--amber); }

 /* The anti-climax */
 .nothing-happens {
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:1.1rem;
  letter-spacing:0.3em;
  color: var(--smoke-faint);
@@ -221,7 +221,7 @@ h1 span { color: var(--amber); }
  border-left: 3px solid var(--amber);
 }
 .challenge-box .ch-label {
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.28em;
  color: var(--amber-dim);
@@ -275,13 +275,13 @@ h1 span { color: var(--amber); }

 .decode-label {
  display:block;
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:0.68rem; letter-spacing:0.3em;
  color: var(--amber-dim); margin-bottom:0.25rem;
 }
 .decode-term {
  display:block;
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:1.05rem; letter-spacing:0.1em;
  color: var(--amber); margin-bottom:0.4rem;
 }
@@ -334,7 +334,7 @@ h1 span { color: var(--amber); }

 .mn-label {
  display:block;
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:0.68rem; letter-spacing:0.3em;
  color: var(--smoke); margin-bottom:0.25rem;
 }
@@ -380,7 +380,7 @@ h1 span { color: var(--amber); }
  background: var(--paper-mid); position:sticky; top:0;
 }
 .lb-title {
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:1.1rem; letter-spacing:0.15em; color: var(--ink);
 }
 .lb-close {
@@ -393,7 +393,7 @@ h1 span { color: var(--amber); }
 .lb-close:hover { background:var(--ink); color:var(--paper); }
 .lb-body { padding:1.5rem; }
 .lb-body h3 {
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:0.85rem; letter-spacing:0.25em;
  color: var(--amber-dim); margin:1.4rem 0 0.5rem;
  padding-bottom:0.35rem; border-bottom:1px solid var(--paper-dark);
@@ -413,7 +413,7 @@ h1 span { color: var(--amber); }
  background:var(--paper-mid); border:none; width:100%;
  text-align:left; padding:0.9rem 1.1rem; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
-  font-family:'Bebas Neue', sans-serif; font-size:0.95rem;
+  font-family:'Fredericka the Great', sans-serif; font-size:0.95rem;
  letter-spacing:0.12em; color:var(--smoke);
  transition:all 0.15s; gap:1rem;
 }
@@ -442,7 +442,7 @@ h1 span { color: var(--amber); }
  padding:3.5rem 1.5rem 6rem;
 }
 .edu-wrap > h2 {
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:clamp(2rem,6vw,3rem);
  letter-spacing:0.1em; color:var(--ink);
  margin-bottom:0.15rem;
@@ -456,7 +456,7 @@ h1 span { color: var(--amber); }

 /* ── FURTHER READING ────────────────────────── */
 .reading-section h3 {
-  font-family:'Bebas Neue', sans-serif;
+  font-family:'Fredericka the Great', sans-serif;
  font-size:0.85rem; letter-spacing:0.28em;
  color:var(--amber-dim); margin:2rem 0 0.6rem;
  padding-bottom:0.4rem; border-bottom:2px solid var(--paper-dark);
--- a/Writings/life_in_alexandra.html
+++ b/Writings/life_in_alexandra.html
--- a/Writings/note-for-the-end.html
+++ b/Writings/note-for-the-end.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>A Note for the End of the Start — J.L.</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&family=Share+Tech+Mono&family=Cinzel:wght@400;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=IM+Fell+English:ital@0;1&family=Share+Tech+Mono&family=Glass+Antiqua&display=swap" rel="stylesheet">
 <style>
  :root {
    --bg:           #080604;
@@ -129,7 +129,7 @@
  }

  .masthead-title {
-    font-family: 'Cinzel Decorative', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: clamp(22px, 4.5vw, 52px);
    color: var(--brass-bright);
    line-height: 1.1;
@@ -198,7 +198,7 @@
  }

  .tab-btn {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
@@ -260,7 +260,7 @@
  }

  .essay-body h2 {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: clamp(16px, 2.5vw, 22px);
    color: var(--amber);
    text-transform: uppercase;
@@ -489,7 +489,7 @@
  }

  .decoder-panel .decode-term {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: 16px;
    color: var(--amber);
    display: block;
@@ -572,7 +572,7 @@
  }

  .lightbox-title {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
@@ -604,7 +604,7 @@
  }

  .lightbox-body h3 {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: 20px;
    color: var(--amber);
    letter-spacing: 2px;
@@ -660,7 +660,7 @@
  }

  .accordion-trigger-text {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
@@ -703,7 +703,7 @@

  /* === OTHER TAB CONTENT STYLES === */
  .content-title {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: clamp(16px, 2.5vw, 20px);
    color: var(--amber);
    letter-spacing: 3px;
@@ -778,7 +778,7 @@
  }

  .card-title {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--amber);
@@ -815,7 +815,7 @@

  .pull-quote::before {
    content: '"';
-    font-family: 'Cinzel Decorative', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: 48px;
    color: var(--brass-dim);
    opacity: 0.4;
@@ -846,7 +846,7 @@

  /* Resource links */
  .resource-section-title {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
@@ -875,7 +875,7 @@
  }

  .resource-title {
-    font-family: 'Cinzel', serif;
+    font-family: 'Glass Antiqua', serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--text);
--- a/Writings/politics-annotated.html
+++ b/Writings/politics-annotated.html
@@ -6,7 +6,7 @@
 <title>What We Get Wrong About Politics</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Special+Elite&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Special+Elite&display=swap" rel="stylesheet">
 <style>
 :root {
  --bg: #0b0907;
@@ -68,7 +68,7 @@ body::before {
 }

 .masthead-label {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--red);
@@ -77,7 +77,7 @@ body::before {
 }

 .masthead-title {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1;
  letter-spacing: 0.04em;
@@ -115,7 +115,7 @@ body::before {
 .tab-nav::-webkit-scrollbar-thumb { background: var(--red); }

 .tab-btn {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
@@ -159,7 +159,7 @@ body::before {

 /* ─── PROSE ─── */
 .prose h2 {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 26px;
  letter-spacing: 0.08em;
  color: var(--red-bright);
@@ -253,7 +253,7 @@ body::before {

 .decode-label {
  display: block;
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
@@ -267,7 +267,7 @@ body::before {
  font-size: 14px;
  color: var(--ochre);
  margin-bottom: 8px;
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  letter-spacing: 0.06em;
 }

@@ -376,7 +376,7 @@ body::before {
 }

 .lightbox-title {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--parchment);
@@ -404,7 +404,7 @@ body::before {
 }

 .lightbox-body h3 {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--red-bright);
@@ -426,7 +426,7 @@ body::before {

 /* ─── ACCORDION ─── */
 .acc-section-title {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--red-bright);
@@ -497,7 +497,7 @@ body::before {

 /* ─── FURTHER READING ─── */
 .reading-group-title {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
@@ -533,7 +533,7 @@ body::before {
 .reading-tag {
  display: inline-block;
  font-size: 10px;
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  letter-spacing: 0.15em;
  color: var(--red);
  border: 1px solid var(--red);
@@ -565,7 +565,7 @@ body::before {
 }

 .callout-label {
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ochre);
@@ -577,7 +577,7 @@ body::before {
 /* ─── STAMP ─── */
 .stamp {
  display: inline-block;
-  font-family: 'Bebas Neue', sans-serif;
+  font-family: 'Fredericka the Great', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
--- a/Writings/watchmaker.html
+++ b/Writings/watchmaker.html
@@ -6,7 +6,7 @@
 <title>The Watch Maker — Annotated</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Glass+Antiqua&display=swap" rel="stylesheet">
 <style>
  :root {
    --bg-deep:       #06080e;
@@ -27,7 +27,7 @@
    --border-bright: rgba(200,168,75,0.45);
    --ff-prose:      'Cormorant Garamond', Georgia, serif;
    --ff-mono:       'Space Mono', 'Courier New', monospace;
-    --ff-display:    'Cinzel', Georgia, serif;
+    --ff-display:    'Glass Antiqua', Georgia, serif;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
--- a/index.html
+++ b/index.html
@@ -707,8 +707,7 @@ body::after {
    { id: 'butforadream',    label: 'But For A Dream',         sign: '夢', href: 'Writings/butforadream-annotated.html',                     x: 24, y: 6  },
    { id: 'daddydidntdoit',  label: "Daddy Didn't Do It",      sign: '証', href: 'Writings/DaddyDidntDoIt_Annotated.html',                   x: 40, y: 6  },
    { id: 'doomy',           label: 'Doomy McDoomface',        sign: '骸', href: 'Writings/doomy-mcdoomface.html',                           x: 10, y: 15 },
-    { id: 'escape',          label: 'Escape',                  sign: '逃', href: 'Writings/escape-annotated-minimalist.html',                x: 26, y: 15 },
-    { id: 'escape2',         label: 'Escape II',               sign: '二', href: 'Writings/escape-annotated-v2.html',                        x: 42, y: 15 },
+    { id: 'escape2',         label: 'Escape',                  sign: '逃', href: 'Writings/escape-annotated-v2.html',                        x: 42, y: 15 },
    { id: 'faultywarpcore',  label: 'Faulty Warp Core',        sign: '核', href: 'Writings/faulty-warp-core.html',                           x: 6,  y: 24 },
    { id: 'gladstone',       label: 'Gladstone',               sign: '石', href: 'Writings/gladstone-annotated.html',                        x: 20, y: 24 },
    { id: 'raft',            label: 'How To Build A Raft',     sign: '舟', href: 'Writings/HowToBuildARaft_Annotated.html',                  x: 36, y: 24 },