Improve 2col layout spacing and visual balance

- Add left/right padding to columns for better content inset
- Add margins and indentation to math elements
- Reduce column-gap from 2em to 1em for tighter spacing
- Add vspace utilities around code blocks for breathing room
- Improve comprehensive example slide layout
- Final dimensions: right column gets extra 150px padding for logo/pagination

1 files changed, 19 insertions, 6 deletions

diff --git a/acarp.css b/acarp.css
index 98363d7..6d6b3e1 100644
--- a/acarp.css
+++ b/acarp.css
@@ -49,7 +49,7 @@ section {
   /* Typography */
   font-family: 'EB Garamond', 'Times New Roman', serif;
   font-size: 28px;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
   line-height: 1.4;
   
   /* Text behavior */
@@ -133,8 +133,8 @@ section h6::part(auto-scaling) {
 /* Heading font sizes */
 section h1 { font-size: 2.2em; }
 section h2 { font-size: 1.8em; }
-section h3 { font-size: 1.5em; letter-spacing: 2px; }
-section h4 { font-size: 1.3em; letter-spacing: 2px; }
+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; }
 
@@ -283,6 +283,18 @@ pre code .hljs-name,
 /* Math formulas */
 math {
   font-size: 1.1em;
+  display: block !important;
+  margin: 0.8em 0 0.8em 1.5em !important;
+  text-align: left !important;
+}
+
+/* MathML and Marp equation rendering */
+section span[data-math],
+section .math {
+  display: block !important;
+  margin: 0.8em 1.5em !important;
+  text-align: left !important;
+  padding-left: 1.5em;
 }
 
 /* ============================================================================
@@ -388,7 +400,8 @@ section.layout-2col {
     "title title"
     "left right"
     "buffer buffer";
-  gap: 2em;
+  row-gap: 0.8em;
+  column-gap: 1em;
   padding: 0;
   height: 100%;
   width: 100%;
@@ -406,13 +419,13 @@ section.layout-2col > h3:first-child {
 
 section.layout-2col .left-column {
   grid-area: left;
-  padding: 0 var(--padding) 0 var(--padding);
+  padding: 0 1.5em 0 var(--padding);
   min-height: 0;
 }
 
 section.layout-2col .right-column {
   grid-area: right;
-  padding: 0 var(--padding) 0 0;
+  padding: 0 150px 0 1.5em;
   min-height: 0;
 }