design(web): the hero display sets one sentence per line

The copy track takes 55 %, the display's measure widens to 22ch, and each
sentence is a no-wrap span from the span breakpoint up, so the only break
is between them. text-wrap: balance could not do it: the two candidate
splits are equally balanced and the browser kept the wrong one.

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

Author: angusbezzina

web/src/sections/Hero.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import { ArrowDown, ArrowUpRight } from "lucide-react";
 import { Icon } from "../components/Icon";
 import { hero } from "../copy";
@@ -19,7 +20,17 @@ export function Hero() {
       <div className="u-shell hero__grid">
         <div className="hero__copy">
         <h1 className="hero__display reveal" id="hero-display" style={{ "--i": 0 } as React.CSSProperties}>
-          {hero.display}
+          {/* One sentence per line from the span breakpoint up. Each sentence
+           * is a no-wrap span, so the only place the line can break is
+           * between them; the text content is the one string, unchanged. */}
+          {hero.display.split(/(?<=\.) /).map((sentence, i) => (
+            <Fragment key={sentence}>
+              {/* The space sits BETWEEN the spans: inside a no-wrap span it
+               * would be a space the line cannot break at. */}
+              {i > 0 ? " " : null}
+              <span className="hero__sentence">{sentence}</span>
+            </Fragment>
+          ))}
         </h1>
         <p className="hero__standfirst reveal" style={{ "--i": 1 } as React.CSSProperties}>
           {hero.standfirst}

web/src/styles/base.css

@@ -635,10 +635,24 @@ pre {
 .hero__display {
   font-size: var(--text-display-s);
   line-height: var(--lh-display);
-  max-width: 18ch;
+  /* 22ch, not 18: `ch` is the width of Fraunces's zero, and its bold
+   * lowercase runs wider than that. 18ch broke "Point at the view." before
+   * the full stop; 22ch holds the sentence on one line. */
+  max-width: 22ch;
   margin-block-end: var(--space-lg);
 }
 
+/* Two sentences, two lines. `text-wrap: balance` could not be relied on:
+ * "…view. Hand / the agent…" and "…view. / Hand the agent…" are equally
+ * balanced, and the browser kept the first. So the sentences are spans that
+ * do not wrap inside themselves. Only from the span breakpoint: at 320 px a
+ * 23-character no-wrap line at the display size would run off the page. */
+@media (min-width: 60rem) {
+  .hero__sentence {
+    white-space: nowrap;
+  }
+}
+
 .hero__standfirst {
   font-size: var(--text-md);
   color: var(--color-ink-2);
@@ -666,8 +680,10 @@ pre {
 
 @media (min-width: 60rem) {
   .hero__grid {
-    /* An even split: the copy lost a display step, the loop gains the width. */
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    /* A fraction past even, towards the copy: the display's first sentence
+     * wants one line, and 55 % is where it gets it without the loop shrinking
+     * back to where it was. */
+    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
     gap: var(--space-2xl);
   }
 }