Added .gitignore to ignore Berkely Fonts.

Align editor and frontend typography, improve code block presentation,
add leading-image spacing, and fix nested submenu positioning.

.gitignore

@@ -0,0 +1,3 @@
+# Ignore BerkeleyMono fonts in repo. User has to provide the font.
+
+fonts/BerkeleyMono*

404.php

@@ -3,9 +3,9 @@
 get_header();
 ?>
 <main id="main" class="site-main not-found">
-	<p class="hero-eyebrow"><?php esc_html_e( 'Error 404', 'c1024-2026' ); ?></p>
-	<h1 class="page-title"><?php esc_html_e( 'Signal lost.', 'c1024-2026' ); ?></h1>
-	<p><?php esc_html_e( 'The page you requested could not be found. Search the archive or return to the home page.', 'c1024-2026' ); ?></p>
+	<p class="hero-eyebrow"><?php esc_html_e( 'Houston, we\'ve had a problem', 'c1024-2026' ); ?></p>
+	<h1 class="error-title"><?php esc_html_e( 'Signal lost.', 'c1024-2026' ); ?></h1>
+	<p><?php esc_html_e( 'Die angeforderte Seite konnte nicht gefunden werden. Benutze die Suche oder gehe zurück zur Startseite.', 'c1024-2026' ); ?></p>
 	<?php get_search_form(); ?>
 	<p><a class="button" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Return home', 'c1024-2026' ); ?></a></p>
 </main>

README.md

@@ -0,0 +1,127 @@
+# Commander1024 2026
+
+A clean, retro-tech inspired **classic WordPress theme** for [commander1024.de](https://www.commander1024.de/). It uses standard PHP templates rather than Full Site Editing templates, while providing a modern Gutenberg authoring experience through `theme.json` and matching editor styles.
+
+The theme is intended for a traditional personal blog with articles, static pages, category/tag archives, search, comments, and media-rich technical content.
+
+## Scope
+
+This theme provides the presentation layer for WordPress. It does **not** bundle content, plugins, analytics, SEO tooling, caching, contact forms, or e-commerce functionality.
+
+It is designed to work with WordPress’s normal post/page workflow and with the block editor. The PHP template hierarchy remains conventional and easy to maintain:
+
+- `index.php` — posts index
+- `single.php` — individual posts
+- `page.php` — static pages
+- `archive.php` — category, tag, date, and author archives
+- `search.php` — search results
+- `404.php` — custom error page
+- `front-page.php` — configurable video hero and front-page content
+
+## Features
+
+### Site experience
+
+- Responsive classic theme with a clean retro-computing visual language
+- Sticky header that hides while scrolling down and returns while scrolling up
+- Multi-level primary navigation:
+  - first-level dropdowns open below their parent
+  - nested dropdowns open beside their parent
+  - menu hierarchy remains expanded and touch-friendly on small screens
+- Expanding search panel with automatic input focus
+- Three-state color-mode control:
+  - **Automatic** — follows the visitor’s system preference
+  - **Light**
+  - **Dark**
+- Color-mode preference stored in the visitor’s browser
+- WordPress admin-bar offset for logged-in visitors
+- Custom 404 page
+
+### Content and taxonomy
+
+- Wide article identity area for post/page titles, metadata, categories, tags, featured images, archive headings, pagination, and post navigation
+- Readable, narrower measure for article body text
+- Category/tag chips and archive support
+- Responsive images, galleries, captions, embeds, and code blocks
+- Threaded comments with avatars, readable metadata, and non-numbered reply hierarchy
+- Previous/next post navigation with directional markers
+
+### Front page
+
+Configure the hero from **Appearance → Customize → Home page video hero**:
+
+- Select a video from the WordPress Media Library
+- Set a custom overlay heading
+- Set optional overlay copy
+- The site subtitle is shown as the hero eyebrow
+
+### Gutenberg support
+
+`theme.json` defines the theme’s editor design system while the site remains a classic PHP theme:
+
+- Commander 1024 color palette, gradients, and duotone preset
+- Local font-family choices
+- Font-size and spacing scales
+- Content width: `760px`
+- Wide width: `1180px`
+- Wide and full block alignments
+- Buttons, tables, quotes, pullquotes, covers, galleries, Media & Text, Group, and Columns styling
+- Matching block-editor canvas styles in `editor-style.css`
+
+### Code blocks
+
+Core Code blocks and the optional [Syntax Highlighting Code Block](https://wordpress.org/plugins/syntax-highlighting-code-block/) plugin are supported.
+
+- Berkeley Mono is used for code
+- Syntax-highlighted blocks use Monokai Light in site light mode
+- Syntax-highlighted blocks use conventional Monokai Dark in site dark/automatic-dark mode
+
+The syntax-highlighting plugin is **not bundled** with this theme and must be installed separately if desired.
+
+## Fonts and licensing
+
+All font files are self-hosted in `fonts/` and are used by both the frontend and block editor. Monospace stacks prefer Berkeley Mono and fall back to Source Code Pro before the browser’s generic monospace face.
+
+| Font | Usage | Files | License / redistribution status |
+|---|---|---|---|
+| **Alpha Lyrae** | Site headings, display titles, retro stylistic sets | `AlphaLyrae-Medium.woff2` | Free for commercial use under the [SIL Open Font License 1.1](https://openfontlicense.org/). |
+| **Crimson Pro** | Body copy | `crimson-pro-latin-wght-normal.woff2`, `crimson-pro-latin-wght-italic.woff2` | [SIL Open Font License 1.1](https://openfontlicense.org/). |
+| **Berkeley Mono** | Preferred code, metadata, navigation, and UI face | `BerkeleyMono-*.woff`, `BerkeleyMono-*.woff2` | Privately licensed by the site owner. It is not an open-source font and must not be redistributed or reused outside the applicable licence. |
+| **Source Code Pro** | Automatic fallback for Berkeley Mono in code, metadata, navigation, and UI | `SourceCodePro-Regular.woff2`, `SourceCodePro-Bold.woff2`, `SourceCodePro-Italic.woff2`, `SourceCodePro-BoldItalic.woff2` | Downloaded from the public [Google Fonts](https://fonts.google.com/specimen/Source+Code+Pro) distribution; [SIL Open Font License 1.1](https://openfontlicense.org/). |
+
+### Alpha Lyrae OpenType features
+
+The supplied Alpha Lyrae font includes stylistic sets `ss01` through `ss05` and ligature support. The theme uses Alpha Lyrae as its heading face; individual features can be selected with CSS, for example:
+
+```css
+.retro-heading {
+  font-family: "Alpha Lyrae", sans-serif;
+  font-feature-settings: "ss01" 1, "liga" 1;
+}
+```
+
+Use one stylistic set at a time. See the CSS around `.hero-title` for a live theme example.
+
+## Installation
+
+1. Place this directory in `wp-content/themes/`.
+2. In WordPress administration, activate **Commander1024 2026** under **Appearance → Themes**.
+3. Configure the custom logo under **Appearance → Customize → Site Identity**.
+4. Assign the Primary and Footer menus under **Appearance → Menus**.
+5. Add widgets to **Appearance → Widgets → Footer column 1–3**. When at least one column contains a widget, the responsive three-column area is displayed above the footer sitewide.
+6. Optionally configure the front-page video hero in the Customizer.
+7. Review block-editor palette, typography, spacing, and alignment controls when authoring content.
+
+## Development notes
+
+- `style.css` contains frontend styles and the WordPress theme header.
+- `editor-style.css` styles the classic editor and block-editor canvas.
+- `assets/js/theme.js` contains the color-mode, scroll-header, search-panel, and mobile-navigation interactions.
+- `functions.php` registers theme supports, menus, editor assets, Customizer controls, and custom comment rendering.
+- `theme.json` is the source of truth for Gutenberg tokens and editor controls.
+
+The theme declares the **GNU General Public License v2 or later** in `style.css`. This applies to the theme code. Font assets remain subject to their respective licences above.
+
+## Validation
+
+The repository’s editor diagnostics are used for static validation. Visual testing should be performed on the local/staging WordPress environment, including both color modes, responsive navigation, nested menus, Gutenberg wide/full blocks, code blocks, and threaded comments.

editor-style.css

@@ -42,6 +42,36 @@
   font-display: swap;
 }
 
+/* Public fallback for the locally licensed Berkeley Mono face. */
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("fonts/SourceCodePro-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("fonts/SourceCodePro-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("fonts/SourceCodePro-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("fonts/SourceCodePro-BoldItalic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 /* Match the frontend's light canvas. The admin chrome is intentionally untouched. */
 body.editor-styles-wrapper {
   /* The canvas may be wide; theme.json constrains normal blocks to contentSize. */
@@ -50,10 +80,6 @@ body.editor-styles-wrapper {
   margin: 0 auto;
   background: #f8f5f0;
   color: #1d1b19;
-  font-family: "Crimson Pro", Georgia, serif;
-  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
-  font-weight: 400;
-  line-height: 1.55;
 }
 
 .editor-styles-wrapper,
@@ -62,7 +88,6 @@ body.editor-styles-wrapper {
 }
 
 
-
 /*
  * Gutenberg's visual editor uses this wrapper (rather than <body>) as its canvas.
  * Apply the frontend reading scale here so blocks do not inherit the admin's 16px UI size.
@@ -105,7 +130,6 @@ body.editor-styles-wrapper {
   max-width: none !important;
 }
 
-
 .editor-styles-wrapper a {
   color: #c3480b;
   text-decoration-thickness: 0.08em;
@@ -175,17 +199,24 @@ body.editor-styles-wrapper {
 .editor-styles-wrapper .wp-block-code .block-editor-plain-text,
 .editor-styles-wrapper .wp-block-preformatted .block-editor-rich-text__editable {
   /* Code blocks use editable controls rather than a rendered <code> element. */
-  font-family: "Berkeley Mono", monospace !important;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace !important;
   font-size: 0.8em;
 }
 
+/* Mirror the frontend rule: block-code text should not receive two relative reductions. */
+.editor-styles-wrapper pre code,
+.editor-styles-wrapper .wp-block-code code {
+  font-size: inherit !important;
+}
+
 .editor-styles-wrapper pre,
 .editor-styles-wrapper .wp-block-code {
   padding: 1rem 1.2rem;
   overflow: auto;
+  border: 1px solid #d5d0c8;
   border-radius: 2px;
-  background: #282623;
-  color: #f5eee5;
+  background: #faf8f5;
+  color: #272822;
 }
 
 .editor-styles-wrapper :not(pre) > code {
@@ -195,10 +226,11 @@ body.editor-styles-wrapper {
   background: #fffdf9;
 }
 
-.editor-styles-wrapper .wp-element-caption {
+.editor-styles-wrapper .wp-element-caption,
+.editor-styles-wrapper .wp-caption-text {
   color: #706a63;
-  font-family: "Berkeley Mono", monospace;
-  font-size: 0.68rem;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
+  font-size: 1rem;
 }
 
 .editor-styles-wrapper hr,
@@ -214,8 +246,8 @@ body.editor-styles-wrapper {
   border-radius: 2px;
   background: #c3480b;
   color: #fff;
-  font-family: "Berkeley Mono", monospace;
-  font-size: 0.75rem;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
+  font-size: 1rem;
   letter-spacing: 0.04em;
 }
 
@@ -241,10 +273,19 @@ body.editor-styles-wrapper {
   text-align: left;
 }
 
-.editor-styles-wrapper .wp-block-table th,
+.editor-styles-wrapper .wp-block-table th {
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
+  font-size: 1em;
+}
+
 .editor-styles-wrapper .wp-block-quote__citation,
-.editor-styles-wrapper .wp-block-pullquote__citation {
-  font-family: "Berkeley Mono", monospace;
+.editor-styles-wrapper .wp-block-pullquote__citation,
+.editor-styles-wrapper .wp-block-quote cite,
+.editor-styles-wrapper .wp-block-pullquote cite {
+  color: #706a63;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace !important;
+  font-size: 1rem;
+  font-style: normal;
 }
 
 .editor-styles-wrapper .wp-block-table th,
@@ -262,7 +303,8 @@ body.editor-styles-wrapper {
 .editor-styles-wrapper .wp-block-pullquote blockquote {
   padding: 0;
   border: 0;
-  margin: 0;
+  max-width: var(--wp--style--global--content-size, 760px);
+  margin: 0 auto;
   color: #1d1b19;
   font-family: "Alpha Lyrae", sans-serif;
   font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.75rem);

footer.php

@@ -1,3 +1,12 @@
+<?php if ( is_active_sidebar( 'footer-1' ) || is_active_sidebar( 'footer-2' ) || is_active_sidebar( 'footer-3' ) ) { ?>
+	<aside class="footer-widgets" aria-label="<?php esc_attr_e( 'Footer widgets', 'c1024-2026' ); ?>">
+		<div class="footer-widgets-inner">
+			<?php dynamic_sidebar( 'footer-1' ); ?>
+			<?php dynamic_sidebar( 'footer-2' ); ?>
+			<?php dynamic_sidebar( 'footer-3' ); ?>
+		</div>
+	</aside>
+<?php } ?>
 <footer class="site-footer">
 	<div class="footer-inner">
 		<span>© <?php echo esc_html( wp_date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?></span>

functions.php

@@ -46,6 +46,24 @@ function c1024_2026_block_editor_assets() {
 }
 add_action( 'enqueue_block_editor_assets', 'c1024_2026_block_editor_assets' );
 
+/** Register the three sitewide widget columns rendered above the footer. */
+function c1024_2026_widgets_init() {
+	for ( $column = 1; $column <= 3; $column++ ) {
+		register_sidebar(
+			array(
+				'name'          => sprintf( __( 'Footer column %d', 'c1024-2026' ), $column ),
+				'id'            => 'footer-' . $column,
+				'description'   => __( 'Widgets displayed above the site footer on every page.', 'c1024-2026' ),
+				'before_widget' => '<section id="%1$s" class="footer-widget %2$s">',
+				'after_widget'  => '</section>',
+				'before_title'  => '<h2 class="footer-widget-title">',
+				'after_title'   => '</h2>',
+			)
+		);
+	}
+}
+add_action( 'widgets_init', 'c1024_2026_widgets_init' );
+
 // These settings drive the optional front-page hero without hard-coding media or copy.
 function c1024_2026_customize_register( $wp_customize ) {
 	$wp_customize->add_section(

single.php

@@ -46,7 +46,13 @@
 			comments_template();
 		}
 
-		the_post_navigation();
+		// Wrap navigation titles so directional markers can remain un-underlined.
+		the_post_navigation(
+			array(
+				'prev_text' => '<span class="post-navigation-title">%title</span>',
+				'next_text' => '<span class="post-navigation-title">%title</span>',
+			)
+		);
 	}
 	?>
 </main>

style.css

@@ -46,6 +46,36 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
   font-display: swap;
 }
 
+/* Public fallback for systems that cannot load the privately licensed Berkeley Mono. */
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("fonts/SourceCodePro-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("fonts/SourceCodePro-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("fonts/SourceCodePro-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("fonts/SourceCodePro-BoldItalic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 /* Shared palette, layout, and code tokens; dark mode overrides the same names below. */
 :root {
   color-scheme: light;
@@ -56,8 +86,16 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
   --line: #d8d0c6;
   --accent: #c3480b;
   --accent-hover: #8f3508;
-  --code-bg: #282623;
-  --code-text: #f5eee5;
+  /* Monokai Light tokens use darker variants for accessible contrast on a light panel. */
+  --monokai-bg: #faf8f5;
+  --monokai-border: #d5d0c8;
+  --monokai-text: #272822;
+  --monokai-comment: #75716a;
+  --monokai-pink: #c4265e;
+  --monokai-green: #4f7902;
+  --monokai-yellow: #9a6700;
+  --monokai-purple: #7653b7;
+  --monokai-cyan: #007c91;
   --shadow: 0 10px 30px rgba(45, 34, 25, 0.08);
   --content: 760px;
   --wide: 1180px;
@@ -71,8 +109,15 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
   --line: #4a4540;
   --accent: #f07a3c;
   --accent-hover: #ff9d6a;
-  --code-bg: #0e0e0d;
-  --code-text: #f5eee5;
+  --monokai-bg: #272822;
+  --monokai-border: #3e3d32;
+  --monokai-text: #f8f8f2;
+  --monokai-comment: #75715e;
+  --monokai-pink: #f92672;
+  --monokai-green: #a6e22e;
+  --monokai-yellow: #e6db74;
+  --monokai-purple: #ae81ff;
+  --monokai-cyan: #66d9ef;
   --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
 }
 /* Automatic mode (and no saved preference) follows the operating-system color scheme. */
@@ -87,8 +132,15 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
     --line: #4a4540;
     --accent: #f07a3c;
     --accent-hover: #ff9d6a;
-    --code-bg: #0e0e0d;
-    --code-text: #f5eee5;
+    --monokai-bg: #272822;
+    --monokai-border: #3e3d32;
+    --monokai-text: #f8f8f2;
+    --monokai-comment: #75715e;
+    --monokai-pink: #f92672;
+    --monokai-green: #a6e22e;
+    --monokai-yellow: #e6db74;
+    --monokai-purple: #ae81ff;
+    --monokai-cyan: #66d9ef;
     --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
   }
 }
@@ -201,7 +253,7 @@ button {
 .site-description {
   margin: 0.1rem 0 0;
   color: var(--muted);
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 1rem;
   letter-spacing: 0.07em;
 }
@@ -212,7 +264,7 @@ button {
   margin: 0;
   padding: 0;
   list-style: none;
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 1rem;
   letter-spacing: 0.04em;
 }
@@ -292,8 +344,8 @@ input[type="submit"] {
   border-radius: 2px;
   background: var(--accent);
   color: #fff;
-  font-family: "Berkeley Mono", monospace;
-  font-size: 0.68rem;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
+  font-size: 1rem;
   letter-spacing: 0.04em;
 }
 .menu-toggle {
@@ -324,6 +376,11 @@ h4 {
   margin: 0;
   font-size: clamp(2rem, 1.35rem + 2.5vw, 3.5rem);
 }
+.error-title {
+  margin: 0;
+  font-size: clamp(4rem, 2.7rem + 5vw, 7rem);
+  font-feature-settings: "ss05" 1, "liga" 1;
+}
 .archive-description {
   color: var(--muted);
 }
@@ -338,7 +395,7 @@ h4 {
 .entry-footer,
 .taxonomy {
   color: var(--muted);
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 1rem;
   letter-spacing: 0.035em;
 }
@@ -363,6 +420,14 @@ h4 {
 .entry-thumbnail {
   margin: 1.25rem 0;
 }
+
+/* Separate a leading article/page image from the body text that follows it. */
+.single .entry-thumbnail,
+.page .entry-content > .wp-block-image:first-child,
+.page .entry-content > figure:first-child,
+.page .entry-content > .wp-block-gallery:first-child {
+  margin-bottom: 3rem;
+}
 .entry-thumbnail img {
   width: 100%;
   border-radius: 2px;
@@ -403,12 +468,13 @@ h4 {
   margin-bottom: 1.3em;
 }
 
-/* Keep prose readable while allowing selected post elements to escape its measure. */
+/* Keep prose readable while allowing selected page and post identity elements to escape its measure. */
 .entry-content > .alignwide,
+.page-header,
 .single .entry-header,
 .single .entry-thumbnail,
 .single .entry-footer {
-  /* Article identity and featured media use the same breakout geometry as a Wide Gutenberg block. */
+  /* Page/article identity and featured media use the same breakout geometry as a Wide Gutenberg block. */
   width: min(var(--wide), calc(100vw - 3rem));
   max-width: none;
   margin-left: 50%;
@@ -446,20 +512,94 @@ h4 {
   padding: 1rem 1.2rem;
   overflow: auto;
   border-radius: 2px;
-  background: var(--code-bg);
-  color: var(--code-text);
-  font-size: 0.78em;
+  font-size: 0.8em;
 }
 .entry-content code {
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 0.8em;
 }
+
+/* Prevent <code> inside <pre> from applying the compact inline-code scale twice. */
+.entry-content pre code {
+  font-size: inherit;
+}
 .entry-content :not(pre) > code {
   padding: 0.1em 0.3em;
   border-radius: 2px;
   background: var(--surface);
   border: 1px solid var(--line);
 }
+
+/* Monokai Light/Dark tokens follow the active site color mode. */
+.entry-content pre,
+.entry-content pre.wp-block-code,
+.entry-content .wp-block-code {
+  border: 1px solid var(--monokai-border);
+  background: var(--monokai-bg);
+  color: var(--monokai-text);
+}
+
+/* Syntax Highlighting Code Block uses Highlight.js classes inside the core Code block. */
+.entry-content .wp-block-code code.hljs,
+.entry-content .wp-block-code .hljs {
+  display: block;
+  padding: 0;
+  background: transparent !important;
+  color: var(--monokai-text) !important;
+}
+
+.entry-content .wp-block-code .hljs-comment {
+  color: var(--monokai-comment) !important;
+}
+
+.entry-content .wp-block-code .hljs-keyword,
+.entry-content .wp-block-code .hljs-selector-tag,
+.entry-content .wp-block-code .hljs-literal,
+.entry-content .wp-block-code .hljs-name,
+.entry-content .wp-block-code .hljs-tag {
+  color: var(--monokai-pink) !important;
+}
+
+.entry-content .wp-block-code .hljs-title,
+.entry-content .wp-block-code .hljs-section,
+.entry-content .wp-block-code .hljs-built_in,
+.entry-content .wp-block-code .hljs-function .hljs-title {
+  color: var(--monokai-green) !important;
+}
+
+.entry-content .wp-block-code .hljs-string,
+.entry-content .wp-block-code .hljs-quote,
+.entry-content .wp-block-code .hljs-link,
+.entry-content .wp-block-code .hljs-type {
+  color: var(--monokai-yellow) !important;
+}
+
+.entry-content .wp-block-code .hljs-number,
+.entry-content .wp-block-code .hljs-regexp,
+.entry-content .wp-block-code .hljs-meta {
+  color: var(--monokai-purple) !important;
+}
+
+.entry-content .wp-block-code .hljs-attribute,
+.entry-content .wp-block-code .hljs-attr,
+.entry-content .wp-block-code .hljs-symbol,
+.entry-content .wp-block-code .hljs-variable,
+.entry-content .wp-block-code .hljs-template-variable {
+  color: var(--monokai-cyan) !important;
+}
+
+.entry-content .wp-block-code .hljs-addition {
+  color: var(--monokai-green) !important;
+}
+
+.entry-content .wp-block-code .hljs-deletion {
+  color: var(--monokai-pink) !important;
+}
+
+.entry-content .wp-block-code .shcb-line-numbers .shcb-loc::before {
+  border-right-color: var(--monokai-border);
+  color: var(--monokai-comment);
+}
 .wp-block-image,
 .entry-content figure {
   margin-left: 0;
@@ -467,8 +607,8 @@ h4 {
 }
 .wp-caption-text {
   color: var(--muted);
-  font-family: "Berkeley Mono", monospace;
-  font-size: 0.68rem;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
+  font-size: 1rem;
 }
 .wp-block-separator {
   border: 0;
@@ -479,8 +619,8 @@ h4 {
 .wp-element-caption,
 .entry-content figcaption {
   color: var(--muted);
-  font-family: "Berkeley Mono", monospace;
-  font-size: 0.68rem;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
+  font-size: 1rem;
 }
 
 .wp-block-button__link,
@@ -489,8 +629,8 @@ h4 {
   border-radius: 2px;
   background: var(--accent);
   color: #fff;
-  font-family: "Berkeley Mono", monospace;
-  font-size: 0.75rem;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
+  font-size: 1rem;
   letter-spacing: 0.04em;
   text-decoration: none;
 }
@@ -528,8 +668,8 @@ h4 {
 
 .wp-block-table th {
   background: var(--surface);
-  font-family: "Berkeley Mono", monospace;
-  font-size: 0.8em;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
+  font-size: 1em;
 }
 
 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
@@ -537,10 +677,12 @@ h4 {
 }
 
 .wp-block-quote__citation,
-.wp-block-pullquote__citation {
+.wp-block-pullquote__citation,
+.wp-block-quote cite,
+.wp-block-pullquote cite {
   color: var(--muted);
-  font-family: "Berkeley Mono", monospace;
-  font-size: 0.68rem;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace !important;
+  font-size: 1rem;
   font-style: normal;
 }
 
@@ -610,7 +752,7 @@ h4 {
   margin: auto;
 }
 .hero-eyebrow {
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 1rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -642,12 +784,89 @@ h4 {
   margin-top: 2.5rem;
   padding-top: 1.5rem;
   border-top: 1px solid var(--line);
-  font-family: "Berkeley Mono", monospace;
-  font-size: 0.7rem;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
 }
+/* Archive and search pagination follows the wide page-title alignment. */
+.pagination {
+  width: min(var(--wide), calc(100vw - 3rem));
+  max-width: none;
+  margin-left: 50%;
+  margin-right: 0;
+  transform: translateX(-50%);
+  font-size: 1rem;
+}
+
 .pagination .nav-links {
+  position: relative;
   display: flex;
+  width: 100%;
+  min-height: 1.8em;
   gap: 0.8rem;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Keep the numbered sequence centered independently of the available directional links. */
+.pagination .prev,
+.pagination .next {
+  position: absolute;
+  top: 0;
+}
+
+.pagination .prev {
+  left: 0;
+}
+
+.pagination .next {
+  right: 0;
+}
+
+/* Previous/next article navigation uses the same wide treatment as archive pagination. */
+.post-navigation {
+  width: min(var(--wide), calc(100vw - 3rem));
+  max-width: none;
+  margin-left: 50%;
+  margin-right: 0;
+  transform: translateX(-50%);
+  font-size: 1rem;
+}
+
+.post-navigation .nav-links {
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+}
+
+.post-navigation .nav-next {
+  margin-left: auto;
+  text-align: right;
+}
+
+/* Keep link decoration on the title only, leaving the directional markers clean. */
+.post-navigation a {
+  text-decoration: none;
+}
+
+.post-navigation .post-navigation-title {
+  text-decoration-line: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.14em;
+}
+
+.post-navigation .nav-previous a::before,
+.post-navigation .nav-next a::after {
+  color: var(--accent);
+  font-size: 1.1em;
+}
+
+.post-navigation .nav-previous a::before {
+  margin-right: 0.5em;
+  content: "◂";
+}
+
+.post-navigation .nav-next a::after {
+  margin-left: 0.5em;
+  content: "▸";
 }
 .page-numbers {
   padding: 0.25rem;
@@ -684,7 +903,7 @@ h4 {
   align-items: center;
   gap: 0.8rem;
   color: var(--muted);
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 1rem;
   line-height: 1.35;
 }
@@ -733,13 +952,13 @@ h4 {
 .comment-awaiting-moderation {
   margin: 1rem 0 0;
   color: var(--accent);
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 1rem;
 }
 
 .comment-actions {
   margin-top: 1.25rem;
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 1rem;
 }
 
@@ -747,7 +966,7 @@ h4 {
 .comment-form .logged-in-as,
 .comment-form .comment-notes,
 .comment-form .form-submit {
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 1rem;
 }
 .comment-form input:not([type="submit"]),
@@ -758,11 +977,51 @@ h4 {
   background: var(--surface);
   color: var(--text);
 }
+.footer-widgets {
+  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
+  border-top: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.footer-widgets-inner {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: clamp(2rem, 5vw, 5rem);
+  max-width: var(--wide);
+  margin: auto;
+}
+
+.footer-widget {
+  min-width: 0;
+}
+
+.footer-widget-title {
+  margin: 0 0 1rem;
+  font-family: "Alpha Lyrae", sans-serif;
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1.16;
+}
+
+.footer-widget > :last-child {
+  margin-bottom: 0;
+}
+
+.footer-widget ul,
+.footer-widget ol {
+  padding-left: 1.25rem;
+  margin: 0;
+}
+
+.footer-widget li + li {
+  margin-top: 0.4rem;
+}
+
 .site-footer {
   padding: 2.5rem 1.5rem;
   border-top: 1px solid var(--line);
   color: var(--muted);
-  font-family: "Berkeley Mono", monospace;
+  font-family: "Berkeley Mono", "Source Code Pro", monospace;
   font-size: 1rem;
 }
 .footer-inner {
@@ -828,6 +1087,10 @@ h4 {
   .hero {
     min-height: 55vh;
   }
+  .footer-widgets-inner {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
   .footer-inner {
     flex-direction: column;
   }
@@ -836,9 +1099,10 @@ h4 {
   }
 }
 /* Desktop submenus are positioned from their parent; nested menus fly out to the side. */
-.primary-menu > li {
+.primary-menu li {
   position: relative;
 }
+
 .primary-menu .sub-menu {
   position: absolute;
   z-index: 30;
@@ -860,8 +1124,8 @@ h4 {
     transform 0.16s ease,
     visibility 0.16s;
 }
-.primary-menu > li:hover > .sub-menu,
-.primary-menu > li:focus-within > .sub-menu {
+.primary-menu li:hover > .sub-menu,
+.primary-menu li:focus-within > .sub-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
@@ -903,8 +1167,9 @@ h4 {
   margin-left: 0.45em;
   content: "▾";
   color: var(--accent);
-  font-size: 0.85em;
-  vertical-align: 0.05em;
+  font-size: 1.45em;
+  line-height: 0.4;
+  vertical-align: -0.2em;
 }
 .primary-menu .sub-menu > li.menu-item-has-children > a {
   display: flex;
@@ -915,19 +1180,12 @@ h4 {
 .primary-menu .sub-menu > li.menu-item-has-children > a::after {
   content: "▸";
   color: var(--accent);
-  font-size: 0.9em;
+  font-size: 1.45em;
+  line-height: 0.4;
 }
 .primary-menu .sub-menu .sub-menu {
   top: -0.6rem;
-  left: calc(100% + 0.6rem);
-}
-.primary-menu .sub-menu .sub-menu::before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -0.6rem;
-  width: 0.6rem;
-  content: "";
+  left: calc(100% - 1px);
 }
 @media (max-width: 760px) {
   .primary-menu > li.menu-item-has-children > a::after,
@@ -940,23 +1198,7 @@ h4 {
     transform: none;
   }
 }
-.primary-menu li:hover > .sub-menu,
-.primary-menu li:focus-within > .sub-menu {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-.primary-menu > li.menu-item-has-children > a::after,
-.primary-menu .sub-menu > li.menu-item-has-children > a::after {
-  font-size: 1.45em;
-  line-height: 0.4;
-}
-.primary-menu .sub-menu .sub-menu {
-  left: calc(100% - 1px);
-}
-.primary-menu li {
-  position: relative;
-}
+
 .site-branding {
   display: flex;
   align-items: center;
@@ -966,9 +1208,7 @@ h4 {
   margin: 0;
   white-space: nowrap;
 }
-.primary-menu > li.menu-item-has-children > a::after {
-  vertical-align: -0.2em;
-}
+
 /* Keep the sticky header below WordPress's admin bar at each core bar height. */
 body.admin-bar .site-header {
   top: 32px;

theme.json

@@ -95,7 +95,7 @@
           ]
         },
         {
-          "fontFamily": "\"Berkeley Mono\", monospace",
+          "fontFamily": "\"Berkeley Mono\", \"Source Code Pro\", monospace",
           "name": "Berkeley Mono",
           "slug": "berkeley-mono",
           "fontFace": [
@@ -135,7 +135,7 @@
         "border": { "radius": "2px" },
         "color": { "background": "var:preset|color|signal-amber", "text": "#ffffff" },
         "spacing": { "padding": { "top": "0.55rem", "right": "0.9rem", "bottom": "0.55rem", "left": "0.9rem" } },
-        "typography": { "fontFamily": "var:preset|font-family|berkeley-mono", "fontSize": "0.75rem", "letterSpacing": "0.04em" }
+        "typography": { "fontFamily": "var:preset|font-family|berkeley-mono", "fontSize": "1rem", "letterSpacing": "0.04em" }
       },
       "heading": {
         "typography": { "fontFamily": "var:preset|font-family|alpha-lyrae", "fontWeight": "500", "lineHeight": "1.16" }