Split the hero into a title and a subtitle

"Code4Policy" becomes the h1 on its own, with "Design & Build Digital
Public Services with AI" demoted to a subtitle beneath it. The crimson
italic on "with AI" carries over.

The subtitle wraps with text-wrap: balance so the two lines break
between "Digital" and "Public Services" rather than through the middle
of that phrase.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: dmil

index.html

@@ -25,7 +25,8 @@
 
     <section class="hero reveal">
       <p class="eyebrow">DPI-691M &middot; January 2027</p>
-      <h1>Code4Policy: Design &amp; Build Digital Public Services <em>with AI</em></h1>
+      <h1>Code4Policy</h1>
+      <p class="subtitle">Design &amp; Build Digital Public Services <em>with AI</em></p>
     </section>
 
     <section class="prose reveal">

style.css

@@ -130,16 +130,27 @@ main { padding: 0 var(--gutter) 6rem; }
 .hero { padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(2rem, 4vw, 3rem); }
 
 .hero h1 {
-  font-size: clamp(2.25rem, 6.2vw, 4.75rem);
+  font-size: clamp(2.75rem, 8vw, 5.75rem);
   font-weight: 300;
   font-variation-settings: "SOFT" 20, "WONK" 1;
   line-height: 1;
   letter-spacing: -0.02em;
-  margin: 0 0 1.75rem;
-  max-width: 20ch;
+  margin: 0 0 0.9rem;
 }
 
-.hero h1 em {
+.hero .subtitle {
+  margin: 0;
+  max-width: 30ch;
+  /* Balanced so the wrap does not split "Public Services". */
+  text-wrap: balance;
+  font-size: clamp(1.35rem, 3.4vw, 2.35rem);
+  font-weight: 300;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--ink-soft);
+}
+
+.hero .subtitle em {
   font-style: italic;
   color: var(--crimson);
 }