From 5f4fbd5e0508461d5d21c01d3c0bcf6ef0327303 Mon Sep 17 00:00:00 2001
From: Jeffrey Hales <committable@bluechip.icu>
Date: Tue, 9 Jun 2026 15:14:22 -0700
Subject: [PATCH] fix(director): align layout and typography with live site

Narrows the photo column to match the live site's ~1:3.6 split,
stacks photo above name as an h3, italicises the quote, and styles
the name line with body font at caption scale.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 www/src/components/home/HomeDirector.astro | 8 ++++----
 www/src/styles/components.css              | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/www/src/components/home/HomeDirector.astro b/www/src/components/home/HomeDirector.astro
index 9c25092..17d303a 100644
--- a/www/src/components/home/HomeDirector.astro
+++ b/www/src/components/home/HomeDirector.astro
@@ -3,15 +3,15 @@ import type { DirectorSection } from '../../types/home-sections';
 interface Props { section: DirectorSection }
 const { section } = Astro.props;
 ---
-<section class="section family-section">
-  <div class="container feature-grid">
+<section class="section director-section">
+  <div class="container feature-grid director-layout">
     <div class="director-card">
       <img src={`/assets/images/${section.photo}`} alt={section.photoAlt} />
-      <p><strong>{section.name}</strong><br />{section.credentials}</p>
+      <h3 class="no-balance">{section.name}, {section.credentials}</h3>
     </div>
     <div>
       <h2>{section.heading}</h2>
-      <p>{section.quote}</p>
+      <p><em>{section.quote}</em></p>
       <img class="signature" src={`/assets/images/${section.signature}`} alt={section.signatureAlt} />
     </div>
   </div>
diff --git a/www/src/styles/components.css b/www/src/styles/components.css
index 46c4950..bb056e9 100644
--- a/www/src/styles/components.css
+++ b/www/src/styles/components.css
@@ -131,8 +131,10 @@
 .process-grid div { background: white; min-height: 190px; padding: 3.2rem 1rem; position: relative; text-align: center; transition: transform .3s ease-in-out; }
 .process-grid div:hover { transform: scale(1.05); z-index: 1; }
 .process-grid img { margin: 0 auto 1rem; width: 42%; }
-.director-card { align-items: center; display: flex; gap: 1.5rem; }
-.director-card img { max-height: 260px; width: auto; }
+.director-layout { grid-template-columns: 1fr 3.6fr; }
+.director-card { text-align: left; }
+.director-card img { border-radius: 3px ;height: auto; margin: 0 auto; width: 100%; }
+.director-card h3 { font-family: var(--font-body); font-size: .84rem; letter-spacing: .5px; margin-top: 1rem; }
 .signature { max-width: 270px; }
 .testimonial-section blockquote { margin: 2rem auto; max-width: 720px; text-align: center; }
 .testimonial-dots { color: var(--color-accent-strong); letter-spacing: .9rem; text-align: center; }