1 files changed, 87 insertions, 23 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;
 }