From c786ed88a41be12e57c71eb87270ae520b79e679 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Wed, 6 May 2026 19:16:13 +0000
Subject: [PATCH 1/8] refactor: improve documentation readability and layout

- Increase content max-width to 850px for better line lengths
- Reduce base font size to 15px to improve scannability
- Refine heading weights (500) and sizes (h1: 2.2em, h2: 1.75em, h3: 1.4em)
- Reduce heading margins to improve content flow

These changes address feedback regarding narrow page width, large font size, and disruptive headings using standard VitePress theme variables.
---
 docs/.vitepress/theme/style.css | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index cb40bf924..29f11ae14 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -33,6 +33,10 @@
 
   /* Wide screen layout */
   --vp-layout-max-width: 1800px;
+  --vp-content-max-width: 850px;
+
+  /* Typography */
+  --vp-font-size-base: 15px;
 
   /* Home hero */
   --vp-home-hero-name-color: var(--mume-gold);
@@ -100,12 +104,30 @@
 h1, h2, h3, h4, h5, h6 {
   font-family: Georgia, 'Times New Roman', serif;
   color: var(--mume-gold);
-  letter-spacing: 0.02em;
-  font-weight: 600;
+  letter-spacing: 0.01em;
+  font-weight: 500;
+}
+
+.vp-doc h1 {
+  border-bottom: 2px solid var(--mume-border);
+  padding-bottom: 0.3em;
+  margin-bottom: 1em;
+  font-size: 2.2em;
 }
 
-.vp-doc h1 { border-bottom: 2px solid var(--mume-border); padding-bottom: 0.3em; }
-.vp-doc h2 { border-bottom: 1px solid var(--mume-border); padding-bottom: 0.3em; margin-top: 1.5em; }
+.vp-doc h2 {
+  border-bottom: 1px solid var(--mume-border);
+  padding-bottom: 0.2em;
+  margin-top: 1.2em;
+  margin-bottom: 0.6em;
+  font-size: 1.75em;
+}
+
+.vp-doc h3 {
+  margin-top: 1em;
+  margin-bottom: 0.4em;
+  font-size: 1.4em;
+}
 
 .vp-doc p, .vp-doc li {
   line-height: 1.7;

From b67b459bd2ba7ccafdcd26fea7af8b8e097e1e0e Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Wed, 6 May 2026 20:21:44 +0000
Subject: [PATCH 2/8] style: improve readability and layout width

- Increase content max-width to 900px for a wider feel
- Reduce base font size to 15px to improve information density
- Expand total container to 1200px to better fit content and sidebar
- Optimize heading sizes and margins for better reading flow
- Adjust line-height to 1.6 for improved skimming speed
---
 docs/.vitepress/theme/style.css | 42 +++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 29f11ae14..de7355bb2 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -33,7 +33,7 @@
 
   /* Wide screen layout */
   --vp-layout-max-width: 1800px;
-  --vp-content-max-width: 850px;
+  --vp-content-max-width: 900px; /* Width of the actual text content */
 
   /* Typography */
   --vp-font-size-base: 15px;
@@ -101,6 +101,10 @@
 
 /* ---------- Typography ---------- */
 
+html, body, .vp-doc {
+  font-size: 15px !important;
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-family: Georgia, 'Times New Roman', serif;
   color: var(--mume-gold);
@@ -110,27 +114,28 @@ h1, h2, h3, h4, h5, h6 {
 
 .vp-doc h1 {
   border-bottom: 2px solid var(--mume-border);
-  padding-bottom: 0.3em;
-  margin-bottom: 1em;
-  font-size: 2.2em;
+  padding-bottom: 0.2em;
+  margin-top: 0.5em;
+  margin-bottom: 0.4em;
+  font-size: 1.7em;
 }
 
 .vp-doc h2 {
-  border-bottom: 1px solid var(--mume-border);
-  padding-bottom: 0.2em;
-  margin-top: 1.2em;
-  margin-bottom: 0.6em;
-  font-size: 1.75em;
+  padding-bottom: 0.1em;
+  margin-top: 0.7em;
+  margin-bottom: 0.3em;
+  font-size: 1.4em;
+  border-top: none;
 }
 
 .vp-doc h3 {
-  margin-top: 1em;
-  margin-bottom: 0.4em;
-  font-size: 1.4em;
+  margin-top: 0.6em;
+  margin-bottom: 0.2em;
+  font-size: 1.2em;
 }
 
 .vp-doc p, .vp-doc li {
-  line-height: 1.7;
+  line-height: 1.6;
 }
 
 a {
@@ -189,6 +194,17 @@ a:hover {
 
 /* ---------- Content ---------- */
 
+/* Expand total container to fit both content and TOC sidebar comfortably */
+@media (min-width: 1280px) {
+  .VPDoc .container {
+    max-width: 1200px !important;
+  }
+}
+
+.VPDoc .content-container {
+  max-width: 900px !important;
+}
+
 .vp-doc {
   max-width: 100%;
 }

From 46c440105f9e2b91f896a2470dbed1ff0d5ab0be Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Wed, 6 May 2026 22:47:51 +0000
Subject: [PATCH 3/8] Refactor wiki layout and typography for better
 readability and 2K support

- Increased content width to 900px (standard) and 1100px (2K+).
- Reduced base font size to 15px for improved skimming.
- Optimized heading sizes and margins to enhance reading flow.
- Implemented a 3-column CSS grid layout to center main content on large screens while keeping the aside menu on the right.
---
 docs/.vitepress/theme/style.css | 53 ++++++++++++++++++++++++++-------
 verify_2k.py                    | 42 ++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 10 deletions(-)
 create mode 100644 verify_2k.py

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index de7355bb2..e7340e70d 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -33,7 +33,7 @@
 
   /* Wide screen layout */
   --vp-layout-max-width: 1800px;
-  --vp-content-max-width: 900px; /* Width of the actual text content */
+  --vp-content-max-width: 900px; /* Default width for standard desktop */
 
   /* Typography */
   --vp-font-size-base: 15px;
@@ -158,6 +158,13 @@ a:hover {
   }
 }
 
+/* 2K+ Monitors: Wider content */
+@media (min-width: 2560px) {
+  :root {
+    --vp-content-max-width: 1100px;
+  }
+}
+
 /* ---------- Nav ---------- */
 
 .VPNav {
@@ -192,21 +199,47 @@ a:hover {
   font-family: Georgia, serif;
 }
 
-/* ---------- Content ---------- */
+/* ---------- Content Layout ---------- */
 
-/* Expand total container to fit both content and TOC sidebar comfortably */
+/*
+  Centering the main content column while allowing the 'On this page'
+  aside to sit to its right. We use a 3-column grid where the outer columns
+  are flexible (1fr) to ensure the middle content column is centered in
+  the viewport (or the area remaining after the sidebar).
+*/
 @media (min-width: 1280px) {
   .VPDoc .container {
-    max-width: 1200px !important;
+    display: grid !important;
+    grid-template-columns: 1fr minmax(0, var(--vp-content-max-width)) 1fr !important;
+    max-width: 100% !important;
+    margin: 0 auto !important;
+    column-gap: 64px;
   }
-}
 
-.VPDoc .content-container {
-  max-width: 900px !important;
-}
+  .VPDoc .content {
+    grid-column: 2 !important;
+    max-width: var(--vp-content-max-width) !important;
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
 
-.vp-doc {
-  max-width: 100%;
+  .VPDoc .content-container {
+    max-width: var(--vp-content-max-width) !important;
+    margin: 0 !important;
+  }
+
+  .VPDoc .aside {
+    grid-column: 3 !important;
+    display: block !important;
+    width: 100% !important;
+    max-width: var(--vp-aside-width) !important;
+    padding-left: 0 !important; /* Gap handled by column-gap */
+  }
+
+  .vp-doc {
+    max-width: 100% !important;
+  }
 }
 
 .vp-doc table {
diff --git a/verify_2k.py b/verify_2k.py
new file mode 100644
index 000000000..49eb48378
--- /dev/null
+++ b/verify_2k.py
@@ -0,0 +1,42 @@
+import asyncio
+from playwright.async_api import async_playwright
+import os
+
+async def run():
+    async with async_playwright() as p:
+        browser = await p.chromium.launch()
+        # Simulation 2K monitor (2560x1440)
+        page = await browser.new_page(viewport={'width': 2560, 'height': 1440})
+
+        os.makedirs('verification', exist_ok=True)
+
+        url = "http://localhost:8890/wiki/pages/Warrior_Guide"
+        print(f"Navigating to {url} at 2K resolution...")
+        try:
+            await page.goto(url)
+            await page.wait_for_timeout(3000)
+
+            details = await page.evaluate("""() => {
+                const container = document.querySelector('.VPDoc .container');
+                const contentContainer = document.querySelector('.VPDoc .content-container');
+                const aside = document.querySelector('.aside');
+
+                return {
+                    containerWidth: container ? window.getComputedStyle(container).width : 'N/A',
+                    contentWidth: contentContainer ? window.getComputedStyle(contentContainer).width : 'N/A',
+                    asideRight: aside ? aside.getBoundingClientRect().right : 'N/A',
+                    windowWidth: window.innerWidth
+                };
+            }""")
+            print(f"Results: {details}")
+
+            await page.screenshot(path="verification/warrior_guide_2k.png", full_page=False)
+            print("Screenshot saved to verification/warrior_guide_2k.png")
+
+        except Exception as e:
+            print(f"Error: {e}")
+
+        await browser.close()
+
+if __name__ == "__main__":
+    asyncio.run(run())

From 12b30c847eb60a9da293361cf8dc9913dd3fee24 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Thu, 7 May 2026 00:02:45 +0000
Subject: [PATCH 4/8] style: refine layout width and typography for better
 readability

- Set base font size to 15px for improved skimming.
- Increased content max-width to 1000px (1064px including padding) for better wide-screen utilization.
- Adjusted heading margins and removed h2 border-bottom to enhance reading flow.
- Optimized selectors in style.css to override hardcoded VitePress defaults maintainably.
---
 docs/.vitepress/theme/style.css | 129 +++++++++++++++-----------------
 verify_2k.py                    |  42 -----------
 2 files changed, 62 insertions(+), 109 deletions(-)
 delete mode 100644 verify_2k.py

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index e7340e70d..7336f6db5 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -32,11 +32,7 @@
   --vp-sidebar-width: 260px;
 
   /* Wide screen layout */
-  --vp-layout-max-width: 1800px;
-  --vp-content-max-width: 900px; /* Default width for standard desktop */
-
-  /* Typography */
-  --vp-font-size-base: 15px;
+  --vp-layout-max-width: 1440px;
 
   /* Home hero */
   --vp-home-hero-name-color: var(--mume-gold);
@@ -101,8 +97,12 @@
 
 /* ---------- Typography ---------- */
 
-html, body, .vp-doc {
-  font-size: 15px !important;
+:root {
+  --mume-font-size-base: 15px;
+}
+
+html, body {
+  font-size: var(--mume-font-size-base);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -113,29 +113,31 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .vp-doc h1 {
-  border-bottom: 2px solid var(--mume-border);
-  padding-bottom: 0.2em;
-  margin-top: 0.5em;
-  margin-bottom: 0.4em;
-  font-size: 1.7em;
+  padding-bottom: 0.1em;
+  margin-top: 0.8em;
+  margin-bottom: 0.6em;
+  font-size: 1.8em;
+  line-height: 1.2;
 }
 
 .vp-doc h2 {
-  padding-bottom: 0.1em;
-  margin-top: 0.7em;
-  margin-bottom: 0.3em;
-  font-size: 1.4em;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-size: 1.45em;
   border-top: none;
+  line-height: 1.3;
 }
 
 .vp-doc h3 {
-  margin-top: 0.6em;
-  margin-bottom: 0.2em;
+  margin-top: 1.2em;
+  margin-bottom: 0.4em;
   font-size: 1.2em;
+  line-height: 1.4;
 }
 
 .vp-doc p, .vp-doc li {
-  line-height: 1.6;
+  line-height: 1.7;
+  margin-bottom: 0.8em;
 }
 
 a {
@@ -149,21 +151,6 @@ a:hover {
   text-decoration: underline;
 }
 
-/* ---------- Wide screen ---------- */
-
-@media (min-width: 1920px) {
-  :root {
-    --vp-layout-max-width: 2400px;
-    --vp-sidebar-width: 300px;
-  }
-}
-
-/* 2K+ Monitors: Wider content */
-@media (min-width: 2560px) {
-  :root {
-    --vp-content-max-width: 1100px;
-  }
-}
 
 /* ---------- Nav ---------- */
 
@@ -199,49 +186,57 @@ a:hover {
   font-family: Georgia, serif;
 }
 
-/* ---------- Content Layout ---------- */
+/* ---------- Layout Overrides ---------- */
 
-/*
-  Centering the main content column while allowing the 'On this page'
-  aside to sit to its right. We use a 3-column grid where the outer columns
-  are flexible (1fr) to ensure the middle content column is centered in
-  the viewport (or the area remaining after the sidebar).
-*/
-@media (min-width: 1280px) {
+/* Increase content width to ~1000px as requested for better skimming.
+   VitePress uses 32px padding on .content, so we use 1064px to get 1000px of text. */
+@media (min-width: 960px) {
+  .VPDoc .content {
+    max-width: 1064px !important;
+  }
   .VPDoc .container {
-    display: grid !important;
-    grid-template-columns: 1fr minmax(0, var(--vp-content-max-width)) 1fr !important;
-    max-width: 100% !important;
-    margin: 0 auto !important;
-    column-gap: 64px;
+    max-width: 1364px !important;
   }
-
-  .VPDoc .content {
-    grid-column: 2 !important;
-    max-width: var(--vp-content-max-width) !important;
-    width: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
+  .VPDoc.has-aside .content-container {
+    max-width: 1064px !important;
   }
+}
 
-  .VPDoc .content-container {
-    max-width: var(--vp-content-max-width) !important;
-    margin: 0 !important;
+@media (min-width: 1440px) {
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 1064px !important;
   }
-
-  .VPDoc .aside {
-    grid-column: 3 !important;
-    display: block !important;
-    width: 100% !important;
-    max-width: var(--vp-aside-width) !important;
-    padding-left: 0 !important; /* Gap handled by column-gap */
+  .VPDoc:not(.has-sidebar) .container {
+    max-width: 1364px !important;
   }
+}
 
-  .vp-doc {
-    max-width: 100% !important;
-  }
+/* ---------- Aside (On this page) ---------- */
+
+.VPDocAside .content {
+  border-left: 1px solid var(--mume-border);
 }
 
+.VPDocAside .outline-title {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--mume-text-muted);
+  font-weight: 600;
+}
+
+.VPDocAside .outline-link {
+  font-size: 13px;
+  color: var(--mume-text-muted);
+  transition: color 0.2s;
+}
+
+.VPDocAside .outline-link:hover,
+.VPDocAside .outline-link.active {
+  color: var(--mume-gold);
+}
+
+
 .vp-doc table {
   border-collapse: collapse;
   width: 100%;
diff --git a/verify_2k.py b/verify_2k.py
deleted file mode 100644
index 49eb48378..000000000
--- a/verify_2k.py
+++ /dev/null
@@ -1,42 +0,0 @@
-import asyncio
-from playwright.async_api import async_playwright
-import os
-
-async def run():
-    async with async_playwright() as p:
-        browser = await p.chromium.launch()
-        # Simulation 2K monitor (2560x1440)
-        page = await browser.new_page(viewport={'width': 2560, 'height': 1440})
-
-        os.makedirs('verification', exist_ok=True)
-
-        url = "http://localhost:8890/wiki/pages/Warrior_Guide"
-        print(f"Navigating to {url} at 2K resolution...")
-        try:
-            await page.goto(url)
-            await page.wait_for_timeout(3000)
-
-            details = await page.evaluate("""() => {
-                const container = document.querySelector('.VPDoc .container');
-                const contentContainer = document.querySelector('.VPDoc .content-container');
-                const aside = document.querySelector('.aside');
-
-                return {
-                    containerWidth: container ? window.getComputedStyle(container).width : 'N/A',
-                    contentWidth: contentContainer ? window.getComputedStyle(contentContainer).width : 'N/A',
-                    asideRight: aside ? aside.getBoundingClientRect().right : 'N/A',
-                    windowWidth: window.innerWidth
-                };
-            }""")
-            print(f"Results: {details}")
-
-            await page.screenshot(path="verification/warrior_guide_2k.png", full_page=False)
-            print("Screenshot saved to verification/warrior_guide_2k.png")
-
-        except Exception as e:
-            print(f"Error: {e}")
-
-        await browser.close()
-
-if __name__ == "__main__":
-    asyncio.run(run())

From f841fb264b381f5dd7fbc64a1b54900696c15e83 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Thu, 7 May 2026 01:05:32 +0000
Subject: [PATCH 5/8] style: standardize documentation layout and typography

- Increase content max-width to 1064px (1000px text area) for better screen utilization.
- Reduce base font-size to 15px (scoped to .vp-doc) to improve skimmability while preserving homepage hero styling.
- Refine heading flow by removing h2 bottom borders and optimizing vertical margins.
- Maintain site-wide max-width at 1440px to ensure navigation grouping on wide screens.
- Implement overrides using high-specificity selectors to avoid !important flags.
---
 docs/.vitepress/theme/style.css | 34 +++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 7336f6db5..b56bd2373 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -98,11 +98,14 @@
 /* ---------- Typography ---------- */
 
 :root {
-  --mume-font-size-base: 15px;
+  /* VitePress (v1.6) hardcodes a 16px font-size on 'html' and 'body' in its base.css.
+     We scope our reduction to 15px to '.vp-doc' to improve documentation skimming
+     without shrinking the homepage or global navigation. */
+  --mume-font-size-doc: 15px;
 }
 
-html, body {
-  font-size: var(--mume-font-size-base);
+.vp-doc {
+  font-size: var(--mume-font-size-doc);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -189,25 +192,28 @@ a:hover {
 /* ---------- Layout Overrides ---------- */
 
 /* Increase content width to ~1000px as requested for better skimming.
-   VitePress uses 32px padding on .content, so we use 1064px to get 1000px of text. */
+   VitePress uses 32px padding on .content, so we use 1064px to get 1000px of text.
+   We use high-specificity selectors to override VitePress's scoped component styles
+   without relying too heavily on !important where possible. */
+
 @media (min-width: 960px) {
-  .VPDoc .content {
-    max-width: 1064px !important;
+  #VPContent .VPDoc .content {
+    max-width: 1064px;
   }
-  .VPDoc .container {
-    max-width: 1364px !important;
+  #VPContent .VPDoc .container {
+    max-width: 1364px;
   }
-  .VPDoc.has-aside .content-container {
-    max-width: 1064px !important;
+  #VPContent .VPDoc.has-aside .content-container {
+    max-width: 1064px;
   }
 }
 
 @media (min-width: 1440px) {
-  .VPDoc:not(.has-sidebar) .content {
-    max-width: 1064px !important;
+  #VPContent .VPDoc:not(.has-sidebar) .content {
+    max-width: 1064px;
   }
-  .VPDoc:not(.has-sidebar) .container {
-    max-width: 1364px !important;
+  #VPContent .VPDoc:not(.has-sidebar) .container {
+    max-width: 1364px;
   }
 }
 

From b028cb53a2a9b6d5769462f34b7af6dcad95dec5 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Thu, 7 May 2026 01:41:27 +0000
Subject: [PATCH 6/8] style: refine wiki typography and layout for better
 readability

- Increase content max-width to 1064px (1000px text area) using robust selectors.
- Reduce doc font-size to 0.9375rem (scoped to .vp-doc) for accessibility and skimming.
- Optimize vertical flow with sibling margins and association-based heading spacing.
- Remove h2 borders and excessive nested list gaps to improve reading flow.
- Group custom theme variables in :root for better maintainability.
---
 docs/.vitepress/theme/style.css | 76 +++++++++++++++++++++++----------
 1 file changed, 54 insertions(+), 22 deletions(-)

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index b56bd2373..f811f0c8b 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -40,6 +40,15 @@
 
   /* Layout constants */
   --mume-tags-max-width: 1000px;
+  --mume-doc-max-width: 1064px;
+  --mume-doc-container-max-width: 1364px;
+
+  /* Typography constants */
+  /* VitePress (v1.6) hardcodes a 16px font-size on 'html' and 'body' in its base.css.
+     We scope our reduction to ~0.94rem on '.vp-doc' to improve documentation skimming
+     without shrinking the homepage or global navigation, while still respecting user
+     and browser base font-size preferences. */
+  --mume-font-size-doc: 0.9375rem; /* 15px / 16px base */
 }
 
 /* ---------- Dark Mode Overrides ---------- */
@@ -97,13 +106,6 @@
 
 /* ---------- Typography ---------- */
 
-:root {
-  /* VitePress (v1.6) hardcodes a 16px font-size on 'html' and 'body' in its base.css.
-     We scope our reduction to 15px to '.vp-doc' to improve documentation skimming
-     without shrinking the homepage or global navigation. */
-  --mume-font-size-doc: 15px;
-}
-
 .vp-doc {
   font-size: var(--mume-font-size-doc);
 }
@@ -117,30 +119,60 @@ h1, h2, h3, h4, h5, h6 {
 
 .vp-doc h1 {
   padding-bottom: 0.1em;
-  margin-top: 0.8em;
-  margin-bottom: 0.6em;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
   font-size: 1.8em;
   line-height: 1.2;
 }
 
 .vp-doc h2 {
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
   font-size: 1.45em;
   border-top: none;
   line-height: 1.3;
 }
 
 .vp-doc h3 {
-  margin-top: 1.2em;
-  margin-bottom: 0.4em;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
   font-size: 1.2em;
   line-height: 1.4;
 }
 
-.vp-doc p, .vp-doc li {
+/*
+   Documentation typography and flow optimization.
+   We use sibling margins (margin-top) to ensure consistent spacing
+   and avoid cumulative gaps in nested structures.
+*/
+.vp-doc p,
+.vp-doc summary,
+.vp-doc blockquote,
+.vp-doc table,
+.vp-doc div[class*='language-'],
+.vp-doc .custom-block {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+.vp-doc p {
   line-height: 1.7;
-  margin-bottom: 0.8em;
+}
+
+/*
+   Avoid cumulative gaps in nested lists while allowing spacing for
+   multi-paragraph list items.
+*/
+.vp-doc li > p {
+  margin: 0;
+}
+
+.vp-doc li > p + p {
+  margin-top: 1rem;
+}
+
+.vp-doc li + li {
+  margin-top: 0.5rem;
 }
 
 a {
@@ -193,27 +225,27 @@ a:hover {
 
 /* Increase content width to ~1000px as requested for better skimming.
    VitePress uses 32px padding on .content, so we use 1064px to get 1000px of text.
-   We use high-specificity selectors to override VitePress's scoped component styles
-   without relying too heavily on !important where possible. */
+   We use #VPContent prefix to provide high-specificity overrides for VitePress's
+   scoped component styles without relying on !important. */
 
 @media (min-width: 960px) {
   #VPContent .VPDoc .content {
-    max-width: 1064px;
+    max-width: var(--mume-doc-max-width);
   }
   #VPContent .VPDoc .container {
-    max-width: 1364px;
+    max-width: var(--mume-doc-container-max-width);
   }
   #VPContent .VPDoc.has-aside .content-container {
-    max-width: 1064px;
+    max-width: var(--mume-doc-max-width);
   }
 }
 
 @media (min-width: 1440px) {
   #VPContent .VPDoc:not(.has-sidebar) .content {
-    max-width: 1064px;
+    max-width: var(--mume-doc-max-width);
   }
   #VPContent .VPDoc:not(.has-sidebar) .container {
-    max-width: 1364px;
+    max-width: var(--mume-doc-container-max-width);
   }
 }
 

From 83d450c0a5ac4c5f242be427548ab1154a601b68 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Thu, 7 May 2026 02:04:46 +0000
Subject: [PATCH 7/8] style: refine wiki readability, typography, and layout
 scoped to documentation

- Increase content max-width to 1064px (1000px text area) using robust selectors scoped to #VPContent.
- Reduce doc font-size to 0.9375rem (scoped to .vp-doc) for improved skimming and accessibility.
- Scope heading typography (h1-h6) to .vp-doc and homepage containers to avoid site-wide side effects.
- Namespace .VPDocAside styles under #VPContent to ensure they only affect documentation pages.
- Refine vertical flow with sibling margins and association-based heading spacing.
- Group custom theme variables in :root for better maintainability.
---
 docs/.vitepress/theme/style.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index f811f0c8b..78a6bfda9 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -110,7 +110,7 @@
   font-size: var(--mume-font-size-doc);
 }
 
-h1, h2, h3, h4, h5, h6 {
+.vp-doc h1, .vp-doc h2, .vp-doc h3, .vp-doc h4, .vp-doc h5, .vp-doc h6 {
   font-family: Georgia, 'Times New Roman', serif;
   color: var(--mume-gold);
   letter-spacing: 0.01em;
@@ -251,11 +251,11 @@ a:hover {
 
 /* ---------- Aside (On this page) ---------- */
 
-.VPDocAside .content {
+#VPContent .VPDocAside .content {
   border-left: 1px solid var(--mume-border);
 }
 
-.VPDocAside .outline-title {
+#VPContent .VPDocAside .outline-title {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -263,14 +263,14 @@ a:hover {
   font-weight: 600;
 }
 
-.VPDocAside .outline-link {
+#VPContent .VPDocAside .outline-link {
   font-size: 13px;
   color: var(--mume-text-muted);
   transition: color 0.2s;
 }
 
-.VPDocAside .outline-link:hover,
-.VPDocAside .outline-link.active {
+#VPContent .VPDocAside .outline-link:hover,
+#VPContent .VPDocAside .outline-link.active {
   color: var(--mume-gold);
 }
 
@@ -342,6 +342,7 @@ a:hover {
 
 .VPHero .name {
   font-family: Georgia, 'Times New Roman', serif;
+  color: var(--mume-gold);
   font-size: clamp(2rem, 6vw, 3.5rem);
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
@@ -383,6 +384,8 @@ a:hover {
 .VPFeature .title {
   color: var(--mume-gold) !important;
   font-family: Georgia, serif;
+  font-weight: 500;
+  letter-spacing: 0.01em;
 }
 
 /* ---------- Tags page ---------- */

From 1214f2d6cc19f3e340bda27212122f79a3301f7a Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Thu, 7 May 2026 03:09:38 +0000
Subject: [PATCH 8/8] style: standardize documentation readability and layout

- Increase content max-width to 1064px (1000px text area) scoped to #VPContent.
- Reduce documentation font-size to 0.9375rem for improved skimming and accessibility.
- Update Aside outline font sizes to rem units (0.6875rem and 0.8125rem) for better scaling.
- Scope layout width constraints: 1440px for docs, 2400px for home on ultra-wide screens.
- Scope heading typography (h1-h6) to .vp-doc and homepage containers.
- Refine vertical flow with association-based heading margins and sibling spacing.
- Group all custom theme variables in :root for maintainability.
---
 docs/.vitepress/theme/style.css | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 78a6bfda9..65e164b30 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -31,9 +31,6 @@
   --vp-nav-logo-height: 28px;
   --vp-sidebar-width: 260px;
 
-  /* Wide screen layout */
-  --vp-layout-max-width: 1440px;
-
   /* Home hero */
   --vp-home-hero-name-color: var(--mume-gold);
   --vp-home-hero-name-background: none;
@@ -256,7 +253,7 @@ a:hover {
 }
 
 #VPContent .VPDocAside .outline-title {
-  font-size: 11px;
+  font-size: 0.6875rem; /* ~11px */
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--mume-text-muted);
@@ -264,7 +261,7 @@ a:hover {
 }
 
 #VPContent .VPDocAside .outline-link {
-  font-size: 13px;
+  font-size: 0.8125rem; /* ~13px */
   color: var(--mume-text-muted);
   transition: color 0.2s;
 }
@@ -390,6 +387,17 @@ a:hover {
 
 /* ---------- Tags page ---------- */
 
+@media (min-width: 1920px) {
+  :root {
+    /* Maintain ultra-wide layout for homepage/other areas on very large screens */
+    --vp-layout-max-width: 2400px;
+  }
+  /* Keep documentation layout at a readable width */
+  .VPDoc {
+    --vp-layout-max-width: 1440px;
+  }
+}
+
 .tags-page {
   max-width: var(--mume-tags-max-width);
   margin: 0 auto;