From db4d5332286cba09e8922a4a2060ab54eaf0ec35 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 8 Apr 2026 11:38:32 -0700
Subject: [PATCH] Move demo eyebrow inside .split-comparison for card-edge
 alignment

The eyebrow ('Drag or hover to compare') was a sibling of
.split-comparison, sitting at the left edge of the outer .skill-demo
section. Because .split-comparison has 32px padding, the visible card
inside sat 32px to the right of the eyebrow, creating a visible
indentation mismatch. Move the eyebrow inside .split-comparison so it
inherits the same 32px offset and aligns with the card's left edge
(same as how .split-labels and .skill-demo-caption already align).

Note: the HTML order inside .split-comparison is now eyebrow -> container
-> labels -> caption, which matches the homepage's before/after demo
flow (card -> BEFORE/AFTER -> descriptive caption).
---
 public/css/sub-pages.css   | 2 ++
 scripts/build-sub-pages.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css
index c13970cf5..d0a300314 100644
--- a/public/css/sub-pages.css
+++ b/public/css/sub-pages.css
@@ -1107,6 +1107,8 @@ main#main {
   letter-spacing: 0.14em;
   color: var(--color-ash);
   margin-bottom: var(--spacing-sm);
+  /* Eyebrow now lives inside .split-comparison (which has 32px
+     padding), so it aligns with the visible card edge automatically. */
 }
 
 /* ============================================
diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js
index fa1f724f9..5ef53f6a9 100644
--- a/scripts/build-sub-pages.js
+++ b/scripts/build-sub-pages.js
@@ -39,8 +39,8 @@ function renderSkillDemo(skill) {
   const { before, after, caption } = skill.demo;
   return `
 <section class="skill-demo" aria-label="Before and after demo">
-  <p class="skill-demo-eyebrow">Drag or hover to compare</p>
   <div class="split-comparison" data-demo="skill-${skill.id}">
+    <p class="skill-demo-eyebrow">Drag or hover to compare</p>
     <div class="split-container">
       <div class="split-before">
         <div class="split-content">${before}</div>