From aabd08371ce164ff6a9a0edd71f8ccc868af40c7 Mon Sep 17 00:00:00 2001
From: Joel Brock <joelbrock@gmail.com>
Date: Mon, 18 May 2026 09:42:01 -0700
Subject: [PATCH] arrange: spacing scale + hero rhythm + opening beat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Targeted pass per impeccable:arrange — no markup changes, just sharper
spatial intent in the editorial base:

- New semantic spacing scale (--space-2xs through --space-3xl) at
  the top of :root. Subsequent rules pull from this scale instead of
  inline clamp() values; the scattered numbers stay only where they
  are type-specific (card padding, etc.).
- Hero internal rhythm rebalanced. Tagline keeps its generous gap
  (--space-xl), but bio now sits TIGHT against it (--space-sm) so
  they read as one thought, while the social rail jumps to
  --space-xl from the bio so it reads as a separate action layer.
  Previous mid-range 1.5/1.5/2rem values made everything feel
  equally connected.
- Opening beat: first .section after the hero (and the first child
  of <main>) gets --space-3xl top margin instead of --space-2xl, so
  the page actually breathes after the name before the masthead
  cadence settles in.
- Section masthead tightened: head gap nudged up, title weight
  350 -> 420 with a touch tighter tracking so Projects / Clients
  carry their poster weight.
- Marker bar pads asymmetrically now (--space-lg top, --space-md
  bottom) — typographic line of muted caps sits closer to the rule
  than to the page top, intentional.
---
 assets/css/styles.css | 39 +++++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index ad617a9..92e25b0 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -37,6 +37,16 @@ a { color: inherit; text-decoration: none; }
   --radius: 14px;
   --ease:   cubic-bezier(0.22, 1, 0.36, 1);
   --ease-strong: cubic-bezier(0.16, 1, 0.30, 1);
+
+  /* spacing scale — semantic, fluid. Use these instead of ad-hoc clamps. */
+  --space-2xs: 0.25rem;
+  --space-xs:  0.5rem;
+  --space-sm:  0.75rem;
+  --space-md:  1rem;
+  --space-lg:  clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
+  --space-xl:  clamp(2rem, 1.5rem + 1.4vw, 3rem);
+  --space-2xl: clamp(3rem, 2rem + 3vw, 5rem);
+  --space-3xl: clamp(4.5rem, 3rem + 5vw, 7.5rem);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -85,7 +95,7 @@ body::before {
 /* ───── marker bar ───── */
 .marker {
   display: flex; align-items: center; gap: 1rem;
-  padding: 1.25rem 0;
+  padding: var(--space-lg) 0 var(--space-md);
   border-bottom: 1px solid var(--rule);
   font: 500 var(--fs-mini)/1 var(--mono);
   text-transform: uppercase;
@@ -149,7 +159,7 @@ body::before {
   opacity: 0.95;
 }
 .hero__tagline {
-  margin-top: clamp(1.5rem, 3vw, 2.25rem);
+  margin-top: var(--space-xl);
   font-family: var(--display);
   font-style: italic;
   font-weight: 400;
@@ -162,14 +172,15 @@ body::before {
 }
 .hero__tagline span { color: var(--accent); padding: 0 0.2em; }
 .hero__bio {
-  margin-top: 1.5rem;
+  /* paired with tagline — tight gap so they read as one thought */
+  margin-top: var(--space-sm);
   max-width: 48ch;
   color: var(--muted);
   font-size: var(--fs-md);
 }
 
-/* ───── social rail ───── */
-.social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
+/* ───── social rail — separated from the bio so it reads as the action layer ───── */
+.social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-xl); }
 .social a {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 9px 16px;
@@ -185,7 +196,11 @@ body::before {
 .social svg { width: 16px; height: 16px; }
 
 /* ───── sections ───── */
-.section { margin-top: clamp(4rem, 7vw, 6rem); }
+.section { margin-top: var(--space-2xl); }
+/* opening beat — first section after the hero gets extra air, then the
+   rhythm settles into the regular cadence */
+.hero + .section,
+main > .section:first-child { margin-top: var(--space-3xl); }
 .section--headless {
   /* nest visually under the previous section instead of starting a new one */
   margin-top: clamp(2.75rem, 5vw, 4.5rem);
@@ -197,13 +212,13 @@ body::before {
 .section__head {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: clamp(1rem, 2.5vw, 2rem);
+  gap: clamp(1.25rem, 3vw, 2.5rem);
   align-items: end;
-  padding-bottom: 1rem;
-  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
+  padding-bottom: var(--space-md);
+  margin-bottom: var(--space-xl);
   border-bottom: 2px solid var(--ink);
 }
-.section__numwrap { display: flex; flex-direction: column; gap: 0.2rem; align-self: end; }
+.section__numwrap { display: flex; flex-direction: column; gap: var(--space-2xs); align-self: end; }
 .section__numwrap small {
   font-family: var(--display);
   font-size: var(--fs-md);
@@ -230,11 +245,11 @@ body::before {
 }
 .section__title {
   font-family: var(--display);
-  font-weight: 350;
+  font-weight: 420;
   font-variation-settings: "opsz" 144, "SOFT" 30;
   font-size: var(--fs-xl);
   line-height: 0.95;
-  letter-spacing: -0.025em;
+  letter-spacing: -0.028em;
   color: var(--ink);
 }
 .section__kicker {