theme: switch to Atkinson Hyperlegible, 28px base, sync beamer variant

- Replace EB Garamond with Atkinson Hyperlegible for projection legibility
- Drop base font-size to 28px in both standard and beamer themes
- Normalize letter-spacing for sans body text (0.2px)
- Consolidate logo CSS variables, pad-top/bottom variables, and refined
  two-column title-row layout into the published theme

2 files changed, 404 insertions, 266 deletions

diff --git a/acarp-beamer.css b/acarp-beamer.css
index c60fab6..69833e7 100644
--- a/acarp-beamer.css
+++ b/acarp-beamer.css
@@ -6,6 +6,25 @@
  * 
  * Beamer-style 4:3 aspect ratio variant of the Academic Marp theme.
  * Import base theme and override dimensions for classic LaTeX Beamer-style presentations.
+ *
+ * ============================================================================
+ * CUSTOMIZATION GUIDE
+ * ============================================================================
+ *
+ * This theme overrides the base acarp.css with 4:3 dimensions.
+ * Edit the :root section below to customize for 4:3 presentations:
+ *
+ * Dimensions (4:3 aspect ratio):
+ *   --slide-width: 1280px          # Slide width
+ *   --slide-height: 960px          # Slide height (4:3 ratio)
+ *   --padding: 80px                # Increased padding for 4:3 format
+ *   --pad-top: 40px                # Top padding
+ *   --pad-bottom: 40px             # Bottom padding
+ *
+ * All color and typography settings are inherited from acarp.css.
+ * To change colors, edit acarp.css instead.
+ *
+ * ============================================================================
  */
 
 /* @theme acarp-beamer */
@@ -17,25 +36,55 @@
 /* Import the base theme and override specific values */
 @import 'acarp.css';
 
-/* Override slide dimensions for 4:3 aspect ratio */
+/* ============================================================================
+   SLIDE DIMENSIONS FOR 4:3 ASPECT RATIO
+   
+   Override the 16:9 dimensions from acarp.css with 4:3 dimensions.
+   This creates a taller slide format suitable for classic presentations.
+   ============================================================================ */
+
 :root {
   --slide-width: 1280px !important;
   --slide-height: 960px !important;
   --padding: 80px !important;
+  --pad-top: 40px !important;
+  --pad-bottom: 40px !important;
+  --page-right: var(--padding) !important;
+  --page-bottom: var(--pad-bottom) !important;
 }
 
-/* Force 4:3 dimensions on all sections */
+/* ============================================================================
+   SECTION DIMENSIONS
+   
+   Force all sections to use 4:3 dimensions.
+   ============================================================================ */
+
 section {
   width: 1280px !important;
   height: 960px !important;
 }
 
-/* Increase font size proportionally for taller slides */
+/* ============================================================================
+   TYPOGRAPHY ADJUSTMENTS FOR 4:3
+   
+   Base font size remains the same, but heading sizes are adjusted
+   proportionally for the taller slide format.
+   ============================================================================ */
+
 section {
-  font-size: 37px !important;
+  font-size: 28px !important;
 }
 
-/* Adjust code blocks for 4:3 aspect ratio */
+section h1 { font-size: 1.5em !important; }
+section h2 { font-size: 1.2em !important; }
+section h3 { font-size: 1.05em !important; font-weight: normal !important; }
+
+/* ============================================================================
+   CODE BLOCK ADJUSTMENTS FOR 4:3
+   
+   Reduce code block font size slightly to fit more content on taller slides.
+   ============================================================================ */
+
 pre {
   font-size: 55% !important;
 }
@@ -44,32 +93,47 @@ pre > code {
   min-width: 280px !important;
 }
 
-/* Adjust 2-column layout for 4:3 format */
-section.layout-2col > h1:first-child,
-section.layout-2col > h2:first-child,
-section.layout-2col > h3:first-child {
-  padding: 40px 80px 0 80px !important;
+/* ============================================================================
+   TWO-COLUMN LAYOUT ADJUSTMENTS FOR 4:3
+   
+   Increase title row height to accommodate larger headings in 4:3 format.
+   Title is aligned to top of row with 27px padding for consistent baseline.
+   Title text does not wrap (uses white-space: nowrap).
+   ============================================================================ */
+
+section.layout-2col {
+  grid-template-rows: 80px 1fr !important;
+}
+
+section.layout-2col-center {
+  grid-template-rows: 80px 1fr !important;
 }
 
-section.layout-2col .left-column {
-  padding: 0 1em 0 80px !important;
+section.layout-2col > :is(h1, h2, h3),
+section.layout-2col-center > :is(h1, h2, h3) {
+  grid-area: title !important;
+  grid-column: 1 / -1 !important;
+  margin: 0 !important;
+  padding: 27px 0 0 0 !important;
+  position: static !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+  min-width: 0 !important;
+  white-space: nowrap !important;
 }
 
-section.layout-2col .right-column {
-  padding: 0 150px 0 1em !important;
+section.layout-2col .left-column {
+  padding: 0 !important;
 }
 
-section.layout-2col::after {
-  bottom: 40px !important;
-  right: 80px !important;
+section.layout-2col .right-column {
+  padding: 0 !important;
 }
 
-/* Larger pagination for beamer theme */
-section::after {
-  font-size: 24px !important;
+section.layout-2col-center .left-column {
+  padding: 0 !important;
 }
 
-/* Ensure 2col layouts also use larger pagination */
-section.layout-2col::after {
-  font-size: 24px !important;
+section.layout-2col-center .right-column {
+  padding: 0 !important;
 }
diff --git a/acarp.css b/acarp.css
index 91f2482..ed10edb 100644
--- a/acarp.css
+++ b/acarp.css
@@ -6,10 +6,48 @@
  * 
  * A minimal, grid-based theme for Marp presentations designed for academic content.
  * Grid-only layouts - no flexbox, no utility classes, explicit contracts.
+ *
+ * ============================================================================
+ * CUSTOMIZATION GUIDE
+ * ============================================================================
+ *
+ * Most common customizations are in the :root section below. Edit these
+ * CSS variables to change the theme's appearance:
+ *
+ * Dimensions:
+ *   --slide-width: 1280px          # Slide width (16:9 aspect ratio)
+ *   --slide-height: 720px          # Slide height (16:9 aspect ratio)
+ *   --padding: 70px                # Main content padding (left/right)
+ *   --pad-top: 30px                # Top padding
+ *   --pad-bottom: 30px             # Bottom padding (also pagination position)
+ *
+ * Colors:
+ *   --color-background: #fdfcff    # Slide background
+ *   --color-foreground: #202228    # Text color
+ *   --color-highlight: #009dd5     # Accent color (links, highlights)
+ *   --color-highlight-heading: #33b1dd  # Heading accent color
+ *   --color-background-code: #f2f1f4    # Code block background
+ *
+ * Typography:
+ *   Font family: 'Atkinson Hyperlegible' (sans, projection-optimized)
+ *   Base font size: 28px
+ *   Line height: 1.4
+ *
+ * Logo (optional):
+ *   --logo-image: url('path/to/logo.png')
+ *   --logo-width: 100px
+ *   --logo-height: 40px
+ *   --logo-opacity: 0.7
+ *   --logo-top: 20px
+ *   --logo-right: 20px
+ *
+ * For 4:3 aspect ratio (Beamer style), see acarp-beamer.css
+ *
+ * ============================================================================
  */
 
 /* @theme acarp */
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
 /* Import syntax highlighting theme */
 @import url('https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css');
@@ -23,7 +61,10 @@
   --slide-width: 1280px;
   --slide-height: 720px;
   --padding: 70px;
-  --title-top: 40px;
+  --pad-top: 30px;
+  --pad-bottom: 30px;
+  --page-right: var(--padding);
+  --page-bottom: var(--pad-bottom);
   --color-background: #fdfcff;
   --color-background-code: #f2f1f4;
   --color-foreground: #202228;
@@ -32,7 +73,13 @@
   --color-highlight-heading: #33b1dd;
 }
 
-/* Base section styling */
+/* ============================================================================
+   BASE SECTION STYLING
+   
+   All slides inherit from this base. Defines the slide container, typography,
+   and positioning context for pagination.
+   ============================================================================ */
+
 section {
   /* Visual appearance */
   background: var(--color-background);
@@ -43,13 +90,13 @@ section {
   position: relative;
   width: var(--slide-width);
   height: var(--slide-height);
-  padding: 30px var(--padding);
+  padding: var(--pad-top) var(--padding) var(--pad-bottom);
   z-index: 0;
   
   /* Typography */
-  font-family: 'EB Garamond', 'Times New Roman', serif;
+  font-family: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
   font-size: 28px;
-  letter-spacing: 1px;
+  letter-spacing: 0.2px;
   line-height: 1.4;
   
   /* Text behavior */
@@ -57,11 +104,21 @@ section {
   word-wrap: break-word;
 }
 
-/* Just change the color and styling of Marp's default pagination */
+/* ============================================================================
+   PAGINATION
+   
+   Marp renders slide numbers as section::after pseudo-elements.
+   Positioned absolutely in the bottom-right corner using CSS variables
+   to ensure consistency across all layout types.
+   ============================================================================ */
+
 section::after {
+  position: absolute;
+  bottom: var(--page-bottom);
+  right: var(--page-right);
   color: #888888 !important;
   font-size: 18px !important;
-  font-family: 'EB Garamond', 'Times New Roman', serif !important;
+  font-family: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif !important;
 }
 
 /* Hide pagination on title slides */
@@ -69,7 +126,13 @@ section.title::after {
   display: none !important;
 }
 
-/* Logo support - top right corner */
+/* ============================================================================
+   LOGO SUPPORT
+   
+   Optional logo in top-right corner. Configure via CSS variables in your
+   markdown frontmatter or override in :root above.
+   ============================================================================ */
+
 section:not(.title)::before {
   content: '';
   position: absolute;
@@ -85,14 +148,17 @@ section:not(.title)::before {
   z-index: 1;
 }
 
-
-
 section:not([data-marpit-pagination])::after {
   display: none;
 }
 
-/* Typography */
-/* Remove top margin from first element and last element */
+/* ============================================================================
+   TYPOGRAPHY: MARGINS AND SPACING
+   
+   Remove default margins from first and last elements to maintain clean
+   spacing. Paragraphs and blockquotes use consistent 15px bottom margin.
+   ============================================================================ */
+
 section > *:first-child,
 section[data-header] > :nth-child(2) {
   margin-top: 0;
@@ -103,49 +169,61 @@ section[data-footer] > :nth-last-child(2) {
   margin-bottom: 0;
 }
 
-/* Paragraph and blockquote spacing */
-section p, section blockquote {
+section p,
+section blockquote {
   margin: 0 0 15px;
 }
 
-/* Heading spacing and sizing */
-section h1, section h2, section h3, section h4, section h5, section h6 {
+/* ============================================================================
+   TYPOGRAPHY: LISTS
+   
+   Use right-pointing angle bracket (›) as list marker for a more
+   academic, minimal appearance.
+   ============================================================================ */
+
+section ul {
+  list-style-type: '› ';
+}
+
+/* ============================================================================
+   TYPOGRAPHY: HEADINGS
+   
+   Headings use consistent spacing and sizing. Bold text in headings
+   is highlighted with the accent color for emphasis.
+   ============================================================================ */
+
+section :is(h1, h2, h3, h4, h5, h6) {
   margin: 15px 0 30px;
 }
 
-/* Highlight styling for bold text in headings */
-section h1 strong, section h2 strong, section h3 strong,
-section h4 strong, section h5 strong, section h6 strong {
+section :is(h1, h2, h3, h4, h5, h6) strong {
   color: var(--color-highlight-heading);
   font-weight: inherit;
 }
 
-/* Auto-scaling constraint for headings */
-section h1::part(auto-scaling),
-section h2::part(auto-scaling),
-section h3::part(auto-scaling),
-section h4::part(auto-scaling),
-section h5::part(auto-scaling),
-section h6::part(auto-scaling) {
+section :is(h1, h2, h3, h4, h5, h6)::part(auto-scaling) {
   max-height: 660px;
 }
 
-/* Heading font sizes */
-section h1 { font-size: 2.2em; }
-section h2 { font-size: 1.8em; }
-section h3 { font-size: 1.5em; }
-section h4 { font-size: 1.3em; }
-section h5 { font-size: 1.1em; letter-spacing: 1px; }
-section h6 { font-size: 0.9em; letter-spacing: 1px; }
+section h1 { font-size: 2em; }
+section h2 { font-size: 1.6em; }
+section h3 { font-size: 1.3em; }
+section h4 { font-size: 1.1em; }
+section h5 { font-size: 1.05em; letter-spacing: 0.2px; }
+section h6 { font-size: 0.9em; letter-spacing: 0.2px; }
+
+/* ============================================================================
+   CODE: INLINE CODE
+   
+   Inline code (backticks) gets a subtle background and border.
+   Font size is reduced to 85% to maintain visual balance.
+   ============================================================================ */
 
-/* Code and preformatted text */
-/* Inline code styling */
 code {
   font-family: Monaco, monospace;
   letter-spacing: 0;
 }
 
-/* Background for inline code */
 section > code,
 section *:not(pre) > code {
   background: var(--color-background-code);
@@ -159,7 +237,14 @@ section *:not(pre) > code {
   letter-spacing: -0.02em;
 }
 
-/* Code block styling */
+/* ============================================================================
+   CODE: CODE BLOCKS
+   
+   Code blocks (pre/code) use a subtle drop shadow and top accent bar.
+   Font size is reduced to 70% to fit more content. Overflow is handled
+   with horizontal scrolling.
+   ============================================================================ */
+
 pre {
   filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
   font-size: 70%;
@@ -177,7 +262,7 @@ div[style*="max-width"] pre {
   overflow-x: hidden;
 }
 
-/* Add subtle background pattern for code blocks */
+/* Add subtle accent bar at top of code blocks */
 pre::before {
   content: '';
   position: absolute;
@@ -203,116 +288,45 @@ pre > code {
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-/* Enhanced syntax highlighting for academic theme - override github theme */
-pre code .hljs-keyword,
-.hljs-keyword {
-  color: #d73a49 !important;
-  font-weight: 600 !important;
-}
-
-pre code .hljs-string,
-.hljs-string {
-  color: #032f62 !important;
-}
-
-pre code .hljs-comment,
-.hljs-comment {
-  color: #6a737d !important;
-  font-style: italic;
-}
-
-pre code .hljs-number,
-.hljs-number {
-  color: #005cc5 !important;
-}
-
-pre code .hljs-function,
-.hljs-function {
-  color: #6f42c1 !important;
-}
-
-pre code .hljs-variable,
-.hljs-variable {
-  color: #24292e !important;
-}
-
-pre code .hljs-class,
-.hljs-class {
-  color: #6f42c1 !important;
-  font-weight: 600 !important;
-}
-
-pre code .hljs-tag,
-.hljs-tag {
-  color: #22863a !important;
-}
-
-/* Language-specific highlights */
-pre code .hljs-built_in,
-.hljs-built_in {
-  color: #e36209 !important;
-}
-
-pre code .hljs-operator,
-.hljs-operator {
-  color: #d73a49 !important;
-}
-
-pre code .hljs-punctuation,
-.hljs-punctuation {
-  color: #586069 !important;
-}
-
-/* Additional syntax elements */
-pre code .hljs-title,
-.hljs-title {
-  color: #6f42c1 !important;
-  font-weight: 600 !important;
-}
-
-pre code .hljs-params,
-.hljs-params {
-  color: #24292e !important;
-}
-
-pre code .hljs-attr,
-.hljs-attr {
-  color: #6f42c1 !important;
-}
-
-pre code .hljs-name,
-.hljs-name {
-  color: #22863a !important;
-}
-
-/* Math formulas */
-math {
-  font-size: 1.1em;
-  display: block !important;
-  margin: 0.8em 0 0.8em 1.5em !important;
-  text-align: left !important;
-}
+/* ============================================================================
+   MATH FORMULAS
+   
+   Math expressions (LaTeX) are displayed as block elements with
+   left indentation for visual hierarchy.
+   ============================================================================ */
 
-/* MathML and Marp equation rendering */
+math,
 section span[data-math],
 section .math {
+  font-size: 1.1em;
   display: block !important;
-  margin: 0.8em 1.5em !important;
+  margin: 0.8em 0 0.8em 1.5em !important;
   text-align: left !important;
   padding-left: 1.5em;
 }
 
 /* ============================================================================
    UTILITY CLASSES
+   
+   Spacing utilities for fine-grained control over vertical spacing.
+   Use these classes to add consistent spacing between content blocks.
    ============================================================================ */
 
-/* Vertical spacing utilities */
+/* Vertical spacing utilities - add top margin */
+.vspace-tiny { margin-top: 0.5em !important; }
 .vspace-small { margin-top: 1em !important; }
 .vspace-medium { margin-top: 2em !important; }
 .vspace-large { margin-top: 3em !important; }
 .vspace-xlarge { margin-top: 4em !important; }
+.vspace-xxlarge { margin-top: 5em !important; }
+.vspace-6 { margin-top: 6em !important; }
+.vspace-7 { margin-top: 7em !important; }
+.vspace-8 { margin-top: 8em !important; }
+.vspace-9 { margin-top: 9em !important; }
+.vspace-10 { margin-top: 10em !important; }
+
 
-/* Spacing that works on any element */
+/* General spacing utilities */
 .push-down { margin-bottom: 1.5em !important; }
 .push-up { margin-top: 1.5em !important; }
 
@@ -327,20 +341,46 @@ section p > img:only-child {
   margin: 0 auto;
 }
 
-/* Citation utility - bottom left corner */
-.cite {
-  position: absolute;
-  bottom: 30px;
-  left: var(--padding);
-  font-size: 0.7em;
-  color: #888888;
-  opacity: 0.9;
+/* ============================================================================
+   CITATION HELPER
+   
+   Position citations in the bottom-left corner. Use the .cite class
+   on a div or span to add a citation to your slide.
+   ============================================================================ */
+
+section .cite,
+div.cite {
+  position: absolute !important;
+  bottom: var(--page-bottom) !important;
+  left: var(--padding) !important;
+  font-size: 18px !important;
+  color: #888888 !important;
+  opacity: 0.9 !important;
+  white-space: normal !important;
+  margin-bottom: 0 !important;
+  width: calc(100% - var(--padding) - var(--page-right) - 150px) !important;
+  max-width: calc(100% - var(--padding) - var(--page-right) - 150px) !important;
+  box-sizing: border-box !important;
+  overflow-wrap: break-word !important;
+  word-break: break-word !important;
+  display: block !important;
 }
 
 /* ============================================================================
    LAYOUT: title
    
-   Centered title slide for cover pages.
+   Title slide layout - centered content with flexbox.
+   
+   Usage:
+   <!-- _class: title -->
+   # Main Title
+   ## Subtitle
+   
+   Features:
+   - Centered vertically and horizontally
+   - Hides pagination
+   - Supports multiple heading levels
+   - Images scale to 80% width
    ============================================================================ */
 
 section.title {
@@ -356,37 +396,49 @@ section.title {
   position: relative;
 }
 
-/* Wrapper for title content to ensure proper centering */
 section.title > * {
   flex: 0 0 auto;
 }
 
 section.title > h1 {
-  font-size: 64px;
+  font-size: 2em !important;
   margin: 0;
   padding: 0;
 }
 
 section.title > h2 {
-  font-size: 24px;
+  font-size: 1.2em !important;
   color: #666;
   margin: 0.5em 0 0 0;
   padding: 0;
   font-weight: normal;
-  letter-spacing: 1px;
+  letter-spacing: 0.2px;
+}
+
+section.title > h3 {
+  font-size: 0.9em !important;
+  font-weight: normal !important;
+  color: #666;
+  margin: 0.5em 0 0 0;
+  padding: 0;
+}
+
+section.title > h4 {
+  font-size: 0.8em !important;
+  font-weight: normal !important;
+  color: #888;
+  margin: 0.3em 0 0 0;
+  padding: 0;
+  letter-spacing: 0.2px;
 }
 
-/* Images in title slides behave normally */
 section.title > img {
   margin: 2em 0;
   max-width: 80%;
   height: auto;
 }
 
-/* Ensure proper title slide alignment in fullscreen mode */
-div.marpit > svg > foreignObject > section.title,
-svg.marpit > foreignObject > section.title,
-.marpit svg > foreignObject > section.title {
+:is(div.marpit, svg.marpit, .marpit svg) > foreignObject > section.title {
   width: 100%;
   height: 100%;
   display: grid;
@@ -396,58 +448,76 @@ svg.marpit > foreignObject > section.title,
 /* ============================================================================
    LAYOUT: layout-2col
    
-   Two-column layout: left and right columns with title at top.
+   Two-column layout with title at top.
    
-   Grid contract:
+   Grid structure:
    ┌─────────────────────────────┐
    │         title               │
    ├──────────────┬──────────────┤
    │              │              │
    │  left-col    │  right-col   │
    │              │              │
-   ├──────────────┴──────────────┤
-   │         pagination          │
-   └─────────────────────────────┘
+   └──────────────┴──────────────┘
+   
+   Usage:
+   <!-- _class: layout-2col -->
+   # Title
    
-   Grid areas: title, left, right, footer
-   Default gap: 2em
-   Columns: 1fr 1fr (equal)
+   <div class="left-column">
+   Left content here
+   </div>
+   
+   <div class="right-column">
+   Right content here
+   </div>
+   
+   Features:
+   - Fixed title row height (60px) for consistent positioning
+   - Equal-width columns (1fr 1fr)
+   - 1em gap between columns
+   - Title aligned to top of fixed row with 15px padding
+   - Pagination positioned absolutely at bottom-right
+   - Title text does not wrap (uses white-space: nowrap)
+   
+   Grid areas: title, left, right
+   
+   Note: Title selector targets any h1/h2/h3 direct child (not just first-child)
+   because citation divs may appear before the heading in the HTML.
    ============================================================================ */
 
 section.layout-2col {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: 60px 1fr;
   grid-template-areas:
     "title title"
-    "left right"
-    "buffer buffer";
+    "left right";
   row-gap: 1em;
-  column-gap: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
+  column-gap: 1em;
+  box-sizing: border-box;
 }
 
-section.layout-2col > h1:first-child,
-section.layout-2col > h2:first-child,
-section.layout-2col > h3:first-child {
+section.layout-2col > :is(h1, h2, h3),
+section.layout-2col-center > :is(h1, h2, h3) {
   grid-area: title;
-  padding: 30px 70px 0 70px;
-  margin: 15px 0 0;
+  margin: 0;
+  padding: 15px 0 0 0;
   position: static;
+  display: flex;
+  align-items: flex-start;
+  min-width: 0;
+  white-space: nowrap;
 }
 
 section.layout-2col .left-column {
   grid-area: left;
-  padding: 0 1em 0 70px;
+  padding: 0;
   min-height: 0;
 }
 
 section.layout-2col .right-column {
   grid-area: right;
-  padding: 0 150px 0 1em;
+  padding: 0;
   min-height: 0;
 }
 
@@ -460,16 +530,65 @@ section.layout-2col pre {
   margin: 15px 0 15px;
 }
 
-section.layout-2col::after {
-  position: absolute;
-  bottom: 30px;
-  right: 70px;
-  color: #888888 !important;
-  font-size: 18px !important;
-  font-family: 'EB Garamond', 'Times New Roman', serif !important;
+section.layout-2col img {
+  max-width: 90%;
+  max-height: 90%;
+  height: auto;
+  width: auto;
+  object-fit: contain;
+  display: block;
 }
 
-section.layout-2col img {
+/* ============================================================================
+   LAYOUT: layout-2col-center
+   
+   Two-column layout with centered text content. Useful for outline slides.
+   Inherits grid structure from layout-2col but centers text in each column.
+   
+   Note: Title styling is consolidated with layout-2col above to reduce
+   duplication. Both layouts share identical title behavior.
+   ============================================================================ */
+
+section.layout-2col-center {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 60px 1fr;
+  grid-template-areas:
+    "title title"
+    "left right";
+  row-gap: 1em;
+  column-gap: 1em;
+  box-sizing: border-box;
+}
+
+section.layout-2col-center > :is(h1, h2, h3) {
+  grid-column: 1 / -1;
+}
+
+section.layout-2col-center .left-column {
+  grid-area: left;
+  padding: 0;
+  min-height: 0;
+  text-align: center;
+}
+
+section.layout-2col-center .right-column {
+  grid-area: right;
+  padding: 0;
+  min-height: 0;
+  text-align: center;
+}
+
+section.layout-2col-center ul,
+section.layout-2col-center ol {
+  margin: 0 0 15px;
+}
+
+section.layout-2col-center pre {
+  margin: 15px 0 15px;
+}
+
+section.layout-2col-center img {
   max-width: 90%;
   max-height: 90%;
   height: auto;
@@ -481,10 +600,10 @@ section.layout-2col img {
 /* ============================================================================
    SYNTAX HIGHLIGHTING OVERRIDE
    
-   Force override of highlight.js theme colors for consistent academic styling.
+   Override highlight.js theme colors for consistent academic styling.
+   Colors are chosen to be readable and professional.
    ============================================================================ */
 
-/* Base code block colors */
 pre {
   --hljs-bg: var(--color-background-code) !important;
   --hljs-fg: var(--color-foreground) !important;
@@ -496,108 +615,63 @@ pre code {
   color: var(--hljs-fg) !important;
 }
 
-/* Syntax-specific colors with maximum specificity */
-section pre code .token.keyword,
-section pre code .hljs-keyword,
-.token.keyword,
-.hljs-keyword {
+/* Syntax-specific colors */
+section pre code :is(.token.keyword, .hljs-keyword) {
   color: #d73a49 !important;
   font-weight: 600 !important;
 }
 
-section pre code .token.string,
-section pre code .hljs-string,
-.token.string,
-.hljs-string {
+section pre code :is(.token.string, .hljs-string) {
   color: #032f62 !important;
 }
 
-section pre code .token.comment,
-section pre code .hljs-comment,
-.token.comment,
-.hljs-comment {
+section pre code :is(.token.comment, .hljs-comment) {
   color: #6a737d !important;
   font-style: italic !important;
 }
 
-section pre code .token.number,
-section pre code .hljs-number,
-.token.number,
-.hljs-number {
+section pre code :is(.token.number, .hljs-number) {
   color: #005cc5 !important;
 }
 
-section pre code .token.function,
-section pre code .hljs-function,
-.token.function,
-.hljs-function {
+section pre code :is(.token.function, .hljs-function) {
   color: #6f42c1 !important;
 }
 
-section pre code .token.class-name,
-section pre code .hljs-class,
-.token.class-name,
-.hljs-class {
+section pre code :is(.token.class-name, .hljs-class) {
   color: #6f42c1 !important;
   font-weight: 600 !important;
 }
 
-section pre code .token.tag,
-section pre code .hljs-tag,
-.token.tag,
-.hljs-tag {
+section pre code :is(.token.tag, .hljs-tag) {
   color: #22863a !important;
 }
 
-section pre code .token.builtin,
-section pre code .hljs-built_in,
-.token.builtin,
-.hljs-built_in {
+section pre code :is(.token.builtin, .hljs-built_in) {
   color: #e36209 !important;
 }
 
-section pre code .token.operator,
-section pre code .hljs-operator,
-.token.operator,
-.hljs-operator {
+section pre code :is(.token.operator, .hljs-operator) {
   color: #d73a49 !important;
 }
 
-section pre code .token.punctuation,
-section pre code .hljs-punctuation,
-.token.punctuation,
-.hljs-punctuation {
+section pre code :is(.token.punctuation, .hljs-punctuation) {
   color: #586069 !important;
 }
 
-/* Additional syntax elements */
-section pre code .token.title,
-section pre code .hljs-title,
-.token.title,
-.hljs-title {
+section pre code :is(.token.title, .hljs-title) {
   color: #6f42c1 !important;
   font-weight: 600 !important;
 }
 
-section pre code .token.parameter,
-section pre code .hljs-params,
-.token.parameter,
-.hljs-params {
+section pre code :is(.token.parameter, .hljs-params) {
   color: #24292e !important;
 }
 
-section pre code .token.attr-name,
-section pre code .hljs-attr,
-.token.attr-name,
-.hljs-attr {
+section pre code :is(.token.attr-name, .hljs-attr) {
   color: #6f42c1 !important;
 }
 
-section pre code .token.attr-value,
-section pre code .hljs-string,
-.token.attr-value {
+section pre code :is(.token.attr-value, .hljs-string) {
   color: #032f62 !important;
 }
-
-
-