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

@@ -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;
 }

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>`;
 }