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

2 files changed, 62 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;
 }
 
diff --git a/demo-standard.md b/demo-standard.md
index 1e1ea75..6c14a17 100644
--- a/demo-standard.md
+++ b/demo-standard.md
@@ -89,6 +89,8 @@ $\text{idf}(t, D) = \log \frac{|D|}{|\{d \in D : t \in d\}|}$
 
 <div class="left-column">
 
+<div class="vspace-medium"></div>
+
 ```python
 def tfidf(term, doc, corpus):
     tf = term_frequency(term, doc)
@@ -104,6 +106,8 @@ print(f"TF-IDF: {score:.3f}")
 
 <div class="right-column">
 
+<div class="vspace-medium"></div>
+
 ```bash
 # Build presentation
 marp --theme acarp demo.md
@@ -208,6 +212,45 @@ Images can have custom spacing too.
 
 ---
 
+<!-- _class: layout-2col -->
+### Comprehensive Slide Example
+
+<div class="left-column">
+
+**Key Concepts:**
+- Grid-based layout
+- Explicit CSS contracts
+- No hidden behaviors
+
+**Simple latex math:**
+
+$\text{score} = \text{tf} \times \log\frac{|D|}{|d_t|}$
+
+**And code blocks:**
+
+```python
+def score(term, doc):
+    tf = freq(term, doc)
+    idf = log(N / df)
+    return tf * idf
+```
+
+</div>
+
+<div class="right-column">
+
+**2col mode for figs + txt**
+
+![width:350px](figs/example.png)
+
+![width:350px](figs/example.png)
+
+</div>
+
+<div class="cite">[Also with citation helper class!]</div>
+
+---
+
 ## Thank You
 
 This theme provides a clean, academic-focused foundation for your presentations.