From b0c829a20e52bad705705f1ddca3a94e2616346d Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 8 Apr 2026 11:22:20 -0700
Subject: [PATCH] Move demo caption inside .split-comparison, tighten its style

Caption was sitting with a ~56px gap below the labels (32px container
padding-bottom + 24px caption margin-top). Move the <p> inside
.split-comparison so the padding wraps the caption too, not separates
it from the labels. Drop caption margin-top from 24px to 12px and tone
the color down from charcoal to ash + 0.8125rem to match the rest of
the supporting-text rhythm on these pages.
---
 public/css/sub-pages.css   | 6 +++---
 scripts/build-sub-pages.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css
index c6e74dd24..2cfcaf6cd 100644
--- a/public/css/sub-pages.css
+++ b/public/css/sub-pages.css
@@ -1086,9 +1086,9 @@ main#main {
 }
 
 .skill-demo-caption {
-  font-size: 0.875rem;
-  color: var(--color-charcoal);
-  margin-top: var(--spacing-md);
+  font-size: 0.8125rem;
+  color: var(--color-ash);
+  margin-top: 12px;
   font-style: italic;
   max-width: 500px;
 }
diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js
index 4d5e61db5..3b5c8d192 100644
--- a/scripts/build-sub-pages.js
+++ b/scripts/build-sub-pages.js
@@ -54,8 +54,8 @@ function renderSkillDemo(skill) {
       <span class="split-label-item" data-point="before">Before</span>
       <span class="split-label-item" data-point="after">After</span>
     </div>
+    ${caption ? `<p class="skill-demo-caption">${escapeHtml(caption)}</p>` : ''}
   </div>
-  ${caption ? `<p class="skill-demo-caption">${escapeHtml(caption)}</p>` : ''}
 </section>`;
 }