Merge nucleic/mellow-umber-tapir-3e0n into main

Mirrored from corpo 0d273c8.

scripts/og.html

@@ -5,7 +5,7 @@
 
   This card is a portrait of the page it links to, so every value here is lifted
   from src/pages/index.astro rather than invented: the --paper ground, the two
-  diagonal green ambient washes, the grain that keeps them from banding, Archivo
+  diagonal green ambient washes, the grain that keeps them from banding, Public Sans
   for the statement, JetBrains Mono for the footer, and the 100deg
   #cdead9 -> #2f8f5c signature on "future." Change the site's palette or hero and
   this file has to follow, or the card goes stale again.
@@ -20,11 +20,10 @@
     <meta charset="UTF-8" />
     <style>
       @font-face {
-        font-family: 'Archivo';
-        src: url('../public/fonts/archivo.woff2') format('woff2');
+        font-family: 'Public Sans';
+        src: url('../public/fonts/public-sans.woff2') format('woff2');
         font-style: normal;
         font-weight: 100 900;
-        font-stretch: 62% 125%;
         font-display: block;
       }
 
@@ -55,7 +54,7 @@
         overflow: hidden;
         background-color: var(--paper);
         color: var(--secondary);
-        font-family: 'Archivo', sans-serif;
+        font-family: 'Public Sans', sans-serif;
         -webkit-font-smoothing: antialiased;
       }
 
@@ -162,12 +161,16 @@
         line-height: 1.05;
       }
 
-      /* margin-left is the site's optical inset: the R carries a left side bearing,
-         so the box has to hang 0.078em outside the padding for the printed edge of
-         the headline to land on it. */
+      /* margin-left is the site's optical inset: the S carries a left side bearing,
+         so the box has to hang 0.05em outside the padding for the printed edge of
+         the headline to land on it. Per glyph, not per font — re-measure with the
+         site's value if the first word of the headline changes.
+
+         The size is 0.95x the Archivo-era 132px for the same reason the site's clamp
+         is: Public Sans prints a taller cap at a given font-size. */
       .statement {
-        margin-left: -0.078em;
-        font-size: 132px;
+        margin-left: -0.05em;
+        font-size: 125px;
         font-weight: 600;
         letter-spacing: -0.03em;
         line-height: 0.98;
@@ -179,9 +182,11 @@
       }
 
       /* Line two is locked to line one in em, exactly as on the site, so the
-         composition holds at whatever size the headline ends up. */
+         composition holds at whatever size the headline ends up. The card has room
+         to spare at 1200px; this tracks the site's value so the two compositions
+         stay the same picture, not because the card needs the slack. */
       .statement .line-runs {
-        margin-left: 2.2em;
+        margin-left: 2.1em;
       }
 
       .statement .that {

scripts/render-og.mjs

@@ -45,10 +45,11 @@ const problems = await page.evaluate(() => {
   const height = 630;
 
   // The statement hangs its box outside the padding by a deliberate optical inset,
-  // so the R's printed edge — not its box — lands on the padding. That slack is a
+  // so the S's printed edge — not its box — lands on the padding. That slack is a
   // CONSTANT on purpose: reading it back off the element under test would let any
-  // margin-left, however wrong, widen the very bound meant to catch it.
-  const opticalSlack = 12;
+  // margin-left, however wrong, widen the very bound meant to catch it. 0.05em at
+  // 125px is 6.25px; the 2px over that is rounding room, not licence to drift.
+  const opticalSlack = 8;
 
   const found = [];
   const label = (element) => element.className || element.tagName;

src/pages/404.astro

@@ -16,7 +16,7 @@ const description = 'The page you requested does not exist.';
     <link rel="icon" href="/blakeslee-icon.svg" type="image/svg+xml" sizes="any" />
     <link
       rel="preload"
-      href="/fonts/archivo.woff2"
+      href="/fonts/public-sans.woff2"
       as="font"
       type="font/woff2"
       crossorigin
@@ -34,12 +34,13 @@ const description = 'The page you requested does not exist.';
 </html>
 
 <style is:global>
+  /* Keep this in step with index.astro: each page declares its own face, so a swap
+     that misses this file leaves 404 silently rendering in system-ui. */
   @font-face {
-    font-family: 'Archivo';
-    src: url('/fonts/archivo.woff2') format('woff2');
+    font-family: 'Public Sans';
+    src: url('/fonts/public-sans.woff2') format('woff2');
     font-style: normal;
     font-weight: 100 900;
-    font-stretch: 62% 125%;
     font-display: swap;
   }
 
@@ -78,7 +79,7 @@ const description = 'The page you requested does not exist.';
     min-height: 100svh;
     color: var(--ink);
     background-color: var(--paper);
-    font-family: 'Archivo', system-ui, sans-serif;
+    font-family: 'Public Sans', system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
   }
 
@@ -109,9 +110,12 @@ const description = 'The page you requested does not exist.';
 
   .code {
     margin: 0;
-    font-size: clamp(4rem, 18vw, 10rem);
-    font-weight: 700;
-    font-stretch: 115%;
+    /* 0.95x the Archivo-era clamp (4rem/18vw/10rem), matching the homepage headline:
+       Public Sans prints a taller cap at the same font-size. The 115% font-stretch
+       that used to widen this numeral is gone with Archivo's wdth axis — weight 800
+       gives the figure back the presence the extra width was carrying. */
+    font-size: clamp(3.8rem, 17.1vw, 9.5rem);
+    font-weight: 800;
     letter-spacing: -0.02em;
     line-height: 1;
   }

src/pages/index.astro

@@ -35,7 +35,7 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
     <link rel="icon" href="/blakeslee-icon.svg" type="image/svg+xml" sizes="any" />
     <link
       rel="preload"
-      href="/fonts/archivo.woff2"
+      href="/fonts/public-sans.woff2"
       as="font"
       type="font/woff2"
       crossorigin
@@ -212,12 +212,13 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
 </html>
 
 <style is:global>
+  /* No wdth axis, unlike the Archivo this replaced — Public Sans ships weight only.
+     Any font-stretch declaration is therefore inert here, so there are none left. */
   @font-face {
-    font-family: 'Archivo';
-    src: url('/fonts/archivo.woff2') format('woff2');
+    font-family: 'Public Sans';
+    src: url('/fonts/public-sans.woff2') format('woff2');
     font-style: normal;
     font-weight: 100 900;
-    font-stretch: 62% 125%;
     font-display: swap;
   }
 
@@ -275,7 +276,7 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
        order — body's background first, then its negative-z children above it. */
     isolation: isolate;
     background-color: var(--paper);
-    font-family: 'Archivo', system-ui, sans-serif;
+    font-family: 'Public Sans', system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
   }
 
@@ -513,8 +514,21 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
   }
 
   main {
+    /* overflow-y: auto computes overflow-x to auto as well, so this scroller clips
+       horizontally at its own padding box — and the headline deliberately hangs left
+       of that edge by --optical-inset, plus another 0.045em at the far end of the
+       drift. That hang was getting shaved off flat (the "S" of "Solving" lost 4px of
+       its bowls). Padding moves the clip edge outward and the equal negative margin
+       puts the content box back where it was, so the layout is untouched and only the
+       clip moves. Comfortably more than the ~0.05em of hang at the largest headline,
+       and comfortably less than --edge, so the slack always lands inside the shell's
+       own inset rather than off the window. */
+    --clip-slack: 0.75rem;
+
     display: grid;
     min-height: 0;
+    margin-inline: calc(-1 * var(--clip-slack));
+    padding-inline: var(--clip-slack);
     overflow-y: auto;
     /* none, not contain: contain only stops the gesture chaining to the document, it
        leaves this scroller its own rubber-band. Overscrolling past the top drags the
@@ -629,18 +643,26 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
   }
 
   .statement {
-    /* Optical, not metric: the R carries a left side bearing, so a box that starts on
-       the grid line prints ~0.078em to the right of it. The mission copy below opens
-       on a W, whose diagonal reaches the origin with no bearing at all, so the two
-       only look aligned once the headline is pulled back by that much. Measured off
-       rendered pixels, not the font metrics, and kept in em so it holds across the
-       whole font-size clamp. */
-    --optical-inset: 0.078em;
+    /* Optical, not metric: the S carries a left side bearing, so a box that starts on
+       the grid line prints ~0.054em to the right of it. The mission copy below opens
+       on a W whose bearing is a tenth of that at its much smaller size, so the two
+       only look aligned once the headline is pulled back by the difference. Kept in em
+       so it holds across the whole font-size clamp.
+
+       THIS VALUE IS PER GLYPH, NOT PER FONT. It was 0.078em while line one opened on
+       an R (bearing 0.076em); reusing that figure for the S over-pulled the headline
+       by 4px and the scroller clipped the bowls flat. Re-measure whenever the first
+       word of the headline changes. */
+    --optical-inset: 0.05em;
 
     display: grid;
     justify-items: start;
     margin: 0 0 0 calc(-1 * var(--optical-inset));
-    font-size: clamp(3.2rem, min(9vw, 18vh), 8.25rem);
+    /* 0.95x the Archivo-era clamp (3.2/9vw/18vh/8.25rem). Public Sans sets a cap
+       height of 0.723em against Archivo's 0.686em, so the same font-size would print
+       a 5% larger headline and invalidate the wrap thresholds and the 2.2em indent
+       below. Scaling the clamp keeps the printed composition where it was tuned. */
+    font-size: clamp(3.04rem, min(8.55vw, 17.1vh), 7.84rem);
     font-weight: 600;
     letter-spacing: -0.03em;
     line-height: 0.98;
@@ -668,8 +690,21 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
     animation-delay: 320ms;
   }
 
+  /* The indent is in em of the headline, so it holds at every step of the clamp —
+     but it is also what line two has to pay for out of the same column, and it was
+     set at the edge of what that column can afford. Sweeping the indent against the
+     rendered row count, the largest that still keeps "the future." on one row was
+     2.20-2.24em between 1000px and 1440px under the Archivo this replaced: 2.2em
+     had, at 1440x900, exactly zero slack. Public Sans sets that lowercase ~2.5%
+     wider at the same printed cap height, which moved the ceiling to 2.19em and
+     dropped the phrase onto two rows at 1100 and 1280.
+
+     2.1em is the same composition a hair tighter, with ~0.09em (about 10px at a
+     1280px viewport) of real headroom at the narrowest point instead of a rounding
+     error. Sweep it again — the ceiling, not just the current line count — before
+     changing the headline copy or the face. */
   .line-runs {
-    margin-left: 2.2em;
+    margin-left: 2.1em;
     animation-delay: 480ms;
   }
 
@@ -695,10 +730,10 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
     animation: drift-right 12s 1.35s ease-in-out backwards;
   }
 
-  /* Deliberately wrappable. There is ~5% of slack between "that runs." and the card
-     at every width, so the pair only ever separates when the type has been scaled
-     past what the column can hold — at which point two short lines inside the
-     column beat one long line across the card.
+  /* Deliberately wrappable, so "the future." breaking in two is a graceful failure
+     rather than type running under the card. It is not meant to happen at a plain
+     desktop width, though — that is the indent above being overspent, not this rule
+     working. Check the indent's measured ceiling before accepting a break here.
 
      The resting offset is a 2D translate, and there used to be a ::after here that
      swept a light across the phrase by laying a second -webkit-background-clip: text
@@ -726,7 +761,14 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
   }
 
   .mission {
-    max-width: 29rem;
+    /* Two lines, always — the mission is a couplet and a third line breaks the
+       balance against the headline beside it. Public Sans sets ~4.7% wider than the
+       Archivo this replaced, which pushed the second break past the old 29rem by a
+       single pixel: the two-line window at the top of the font-size clamp is
+       465-894px, and 29rem is 464. 30.5rem clears the floor by ~23px, about a word
+       and a half of headroom, without approaching the far edge. Re-measure this
+       window, not just the line count, if the copy or the face changes. */
+    max-width: 30.5rem;
     margin: 0;
     color: var(--secondary);
     font-size: clamp(0.95rem, 1.25vw, 1.14rem);
@@ -1121,7 +1163,7 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
     }
 
     .statement {
-      font-size: clamp(2.9rem, 14vw, 5.5rem);
+      font-size: clamp(2.76rem, 13.3vw, 5.23rem);
     }
 
     .line-runs {
@@ -1224,7 +1266,7 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
     }
 
     .statement {
-      font-size: clamp(2.5rem, 13.5vw, 4.2rem);
+      font-size: clamp(2.38rem, 12.83vw, 3.99rem);
       letter-spacing: -0.025em;
     }
 
@@ -1242,7 +1284,7 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
     }
 
     .statement {
-      font-size: clamp(2.25rem, min(9vw, 15vh), 8.25rem);
+      font-size: clamp(2.14rem, min(8.55vw, 14.25vh), 7.84rem);
     }
   }
 
@@ -1265,7 +1307,7 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
      the phone size at 721px and approaches the normal desktop size at 1000px. */
   @media (min-width: 721px) and (max-width: 999px) {
     .statement {
-      font-size: clamp(3.2rem, calc(12.5vw - 2.4rem), 5.45rem);
+      font-size: clamp(3.04rem, calc(11.88vw - 2.28rem), 5.18rem);
     }
 
     .technology-stack {