@struq/skill 0.4.3 → 0.5.1

package/skills/struq/blocks/heroes/hero-still.tsx

@@ -1,13 +1,22 @@
 "use client";
 // hero-still (Struq hero recipe)
-// A film still with a title. One photograph edge to edge, held with a very slow push-in (six percent over twenty
-// seconds); the headline rises line by line through masks at display size on the photo's calm side; under the still,
-// on the page ground like a film's caption strip, a quiet bar with three facts on one line: the studio's place, the
-// live local time, one link. On scroll
-// the photograph moves slower than the page and the headline leaves first, so the hero hands over with depth.
+// A photograph with a title. One photograph edge to edge, held with a very slow push-in (six percent over twenty
+// seconds); the headline rises line by line through masks at display size on the photo's calm side; under the photo,
+// on the page ground, a quiet caption bar with its facts on one line: the place, an optional middle fact, one link.
+// On scroll the photograph moves slower than the page and the headline leaves first, so the hero hands over with depth.
 //
-// <HeroStill image={images.hero[0]} lines={["Ruimte die", "blijft."]} place="Noord, Rotterdam"
-//   timeZone="Europe/Amsterdam" link={{ href: "/werk", label: "Bekijk het werk" }} />
+// <HeroStill image={images.hero[0]} lines={["Ruimte die", "blijft."]} accent="blijft" place="Noord, Rotterdam"
+//   link={{ href: "/werk", label: "Bekijk het werk" }} />
+//
+// `accent` (optional) is the site's one accent word: where it first stands in the headline it is set in the pairing's
+// italic accent face, inside its line's mask, and the Statement and the Close carry the same word. Left out, or not in
+// the headline, the headline is exactly as it was.
+//
+// The caption's words are the client's own. `note` fills the middle with one fact from the client's trade (a scale, a
+// year, a plot number); without it the caption is the place and the link, one either side. A live local clock is
+// there only when asked: `clock` puts the time in `timeZone` in the middle (with `clockLabel` after it, "lokale tijd"
+// by default) in place of the note. The time is never read during render: the slot holds its width empty on the server
+// and the first paint, and the real time arrives after mount, renewed on the minute.
 //
 // The photo's box carries data-stack-target, so preloader-stack and page-transition-stack land on it exactly, and the
 // entrance starts only when the cover lifts (whenUncovered), at once when there is none. The push-in never re-rasters:
@@ -40,6 +49,7 @@
 //   with the photograph, so it stays on its horizon as the still hands over.
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
+import { accentLines } from "../kit/accent";
 import { ScrollTrigger, gsap, useGSAP } from "../kit/gsap";
 import type { StruqImage } from "../kit/images";
 import { photoLuminances, type PhotoBox } from "../kit/photo-read";
@@ -62,11 +72,21 @@ type Inner = {
   image: StruqImage;
   /** The headline, one entry per line, display size. Two or three short lines read best. */
   lines: string[];
+  /** The site's one accent word: where it first stands in the headline it is set in the pairing's italic accent face
+   * (--face-accent), as the Statement and the Close set it. A word the headline does not hold changes nothing. */
+  accent?: string;
   /** The studio's place, the caption's first fact. */
   place: string;
-  /** IANA zone for the live local time, the caption's second fact. */
+  /** The caption's middle fact, in the client's own words (a scale, a year, a plot number). Left out, the caption is
+   * the place and the link alone. A clock takes its place. */
+  note?: string;
+  /** A live local clock in the caption's middle. Off unless asked: one clock per site at most. */
+  clock?: boolean;
+  /** IANA zone for the clock. */
   timeZone?: string;
-  /** The caption's third fact: one link. */
+  /** The words after the clock's time. */
+  clockLabel?: string;
+  /** The caption's last fact: one link. */
   link: { href: string; label: string };
   /** Where the headline stands. Left out, the block reads the photo and takes the side that needs the weaker veil
    * (the photo's negativeSpace breaks a tie); the first paint, and a page without scripts, use negativeSpace. */
@@ -128,7 +148,7 @@ function veilFor(under: number, ink: number, veilS: number, ratio: number): numb
   return hi;
 }
 
-/** The time in a zone as HH:MM, the same five characters at every minute. */
+/** The time in a zone as HH:MM, the same five characters at every minute. Only ever called after mount. */
 function timeIn(zone: string) {
   return new Intl.DateTimeFormat("nl-NL", { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: zone }).format(
     new Date(),
@@ -183,24 +203,12 @@ export function inkOver(img: HTMLImageElement, frame: PhotoBox, boxes: PhotoBox[
 export function HeroStill({ variant = "still", ...rest }: Props) {
   if (variant === "frame") return <StillFrame {...rest} />;
   if (variant === "horizon") return <StillHorizon {...rest} />;
-  return <StillFilm {...rest} />;
+  return <StillBleed {...rest} />;
 }
 
-function StillFilm({ image, lines, place, timeZone = "Europe/Amsterdam", link, side, className = "" }: Inner) {
+function StillBleed({ image, lines, accent, side, className = "", ...caption }: Inner) {
   const root = useRef<HTMLElement>(null);
   const first = side ?? (image.negativeSpace === "right" ? "right" : "left");
-  const [time, setTime] = useState(() => timeIn(timeZone));
-
-  // The clock: renewed on each minute, in tabular figures, so nothing around it ever moves.
-  useEffect(() => {
-    let tick = 0;
-    const next = () => {
-      setTime(timeIn(timeZone));
-      tick = window.setTimeout(next, 60_000 - (Date.now() % 60_000) + 50);
-    };
-    next();
-    return () => window.clearTimeout(tick);
-  }, [timeZone]);
 
   useGSAP(
     (_, contextSafe) => {
@@ -346,7 +354,7 @@ function StillFilm({ image, lines, place, timeZone = "Europe/Amsterdam", link, s
   );
 
   const mask = (child: React.ReactNode, key?: number) => (
-    <span key={key} className="struq-line-mask block overflow-hidden">
+    <span key={key} className="struq-line-mask block">
       <span data-rise="" className="block">
         {child}
       </span>
@@ -384,43 +392,28 @@ function StillFilm({ image, lines, place, timeZone = "Europe/Amsterdam", link, s
 
       <div
         data-head=""
-        className="absolute inset-x-0 bottom-[5vh] px-6 group-data-[side=right]/hs:flex group-data-[side=right]/hs:justify-end group-data-[side=right]/hs:text-right md:bottom-[6vh] md:px-[4vw]"
+        className="absolute inset-x-0 bottom-[5vh] px-sheet-margin group-data-[side=right]/hs:flex group-data-[side=right]/hs:justify-end group-data-[side=right]/hs:text-right md:bottom-[6vh]"
       >
         <h1 className="font-display text-[clamp(3rem,13.5vw,4.75rem)] leading-[0.92] tracking-[-0.035em] md:text-[clamp(3.5rem,8vw,9.5rem)]">
-          {lines.map((line, i) => mask(line, i))}
+          {accentLines(lines, accent).map((line, i) => mask(line, i))}
         </h1>
       </div>
       </div>
 
-      {/* The caption bar, on the page ground under the still like a film's caption strip: three facts on one line (two
-          on phones), the clock in tabular figures at a fixed width. On the ground its ink holds on any photograph. */}
-      <div data-bar="" className="text-small relative bg-surface-0 px-6 pb-4 pt-3.5 text-ink md:px-[4vw] md:pb-5 md:pt-4">
-        <div>
-          {mask(
-            <span className="grid grid-cols-[1fr_auto] gap-x-6 gap-y-1 md:grid-cols-[1fr_auto_1fr]">
-              <span>{place}</span>
-              <span className="tabular-nums lining-nums md:text-center">
-                <time suppressHydrationWarning className="inline-block min-w-[5ch] text-right">
-                  {time}
-                </time>{" "}
-                lokale tijd
-              </span>
-              <a href={link.href} className="col-span-2 underline decoration-1 underline-offset-4 md:col-span-1 md:justify-self-end">
-                {link.label}
-              </a>
-            </span>,
-          )}
-        </div>
-      </div>
+      <Caption {...caption} />
     </section>
   );
 }
 
-// The frame and the horizon share what follows: the clock, the caption strip, the line masks and the entrance.
+// All three variants share what follows: the clock, the caption strip, the line masks; the frame and the horizon
+// share the entrance.
 
-function useClock(timeZone: string) {
-  const [time, setTime] = useState(() => timeIn(timeZone));
+/** The time in `timeZone` as HH:MM, only when `on`: empty on the server and the first paint, set after mount and
+ * renewed on each minute. */
+function useClock(on: boolean, timeZone: string) {
+  const [time, setTime] = useState("");
   useEffect(() => {
+    if (!on) return;
     let tick = 0;
     const next = () => {
       setTime(timeIn(timeZone));
@@ -428,33 +421,46 @@ function useClock(timeZone: string) {
     };
     next();
     return () => window.clearTimeout(tick);
-  }, [timeZone]);
+  }, [on, timeZone]);
   return time;
 }
 
 const lineMask = (child: React.ReactNode, key?: number) => (
-  <span key={key} className="struq-line-mask block overflow-hidden">
+  <span key={key} className="struq-line-mask block">
     <span data-rise="" className="block">
       {child}
     </span>
   </span>
 );
 
-/** The caption strip on the page ground, as the still has it: place, the live local time, one link. */
-function Caption({ place, time, link }: { place: string; time: string; link: Inner["link"] }) {
+type CaptionProps = Pick<Inner, "place" | "note" | "clock" | "timeZone" | "clockLabel" | "link">;
+
+/**
+ * The caption strip on the page ground: the place, a middle fact (the clock when asked, else the note), one link, on
+ * one line (two on phones). The clock is in tabular figures at a fixed width, so nothing around it ever moves. With no
+ * middle fact the place and the link stand at either end. On the ground its ink holds on any photograph.
+ */
+function Caption({ place, note, clock = false, timeZone = "Europe/Amsterdam", clockLabel = "lokale tijd", link }: CaptionProps) {
+  const time = useClock(clock, timeZone);
+  const middle = clock ? (
+    <span className="tabular-nums lining-nums md:text-center">
+      <time className="inline-block min-w-[5ch] text-right">{time}</time>
+      {clockLabel ? ` ${clockLabel}` : null}
+    </span>
+  ) : note ? (
+    <span className="md:text-center">{note}</span>
+  ) : null;
   return (
-    <div data-bar="" className="text-small relative bg-surface-0 px-6 pb-4 pt-3.5 text-ink md:px-[4vw] md:pb-5 md:pt-4">
+    <div data-bar="" className="text-small relative bg-surface-0 px-sheet-margin pb-4 pt-3.5 text-ink md:pb-5 md:pt-4">
       <div>
         {lineMask(
-          <span className="grid grid-cols-[1fr_auto] gap-x-6 gap-y-1 md:grid-cols-[1fr_auto_1fr]">
+          <span className={`grid grid-cols-[1fr_auto] gap-x-6 gap-y-1 ${middle ? "md:grid-cols-[1fr_auto_1fr]" : ""}`}>
             <span>{place}</span>
-            <span className="tabular-nums lining-nums md:text-center">
-              <time suppressHydrationWarning className="inline-block min-w-[5ch] text-right">
-                {time}
-              </time>{" "}
-              lokale tijd
-            </span>
-            <a href={link.href} className="col-span-2 underline decoration-1 underline-offset-4 md:col-span-1 md:justify-self-end">
+            {middle}
+            <a
+              href={link.href}
+              className={`underline decoration-1 underline-offset-4 ${middle ? "col-span-2 md:col-span-1 md:justify-self-end" : "justify-self-end"}`}
+            >
               {link.label}
             </a>
           </span>,
@@ -546,9 +552,8 @@ const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
  * preloader lands on the frame with the photo laid as the still, and opening the frame on the first scroll is a clip
  * from whole-pixel numbers to the full bleed, never a scale. The headline leaves upward ahead of the opening edge.
  */
-function StillFrame({ image, lines, place, timeZone = "Europe/Amsterdam", link, className = "" }: Inner) {
+function StillFrame({ image, lines, accent, className = "", ...caption }: Inner) {
   const root = useRef<HTMLElement>(null);
-  const time = useClock(timeZone);
 
   useGSAP(
     (_, contextSafe) => {
@@ -670,14 +675,14 @@ function StillFrame({ image, lines, place, timeZone = "Europe/Amsterdam", link,
         </div>
         <div
           data-head=""
-          className="absolute inset-x-6 bottom-[4svh] z-10 will-change-transform md:bottom-[3svh] md:left-[4vw] md:right-auto md:max-w-[34vw]"
+          className="absolute inset-x-sheet-margin bottom-[4svh] z-10 will-change-transform md:bottom-[3svh] md:right-auto md:max-w-[34vw]"
         >
           <h1 className="font-display text-[clamp(3rem,13.5vw,4.75rem)] leading-[0.92] tracking-[-0.035em] md:text-[clamp(3rem,5.4vw,7.5rem)]">
-            {lines.map((line, i) => lineMask(line, i))}
+            {accentLines(lines, accent).map((line, i) => lineMask(line, i))}
           </h1>
         </div>
       </div>
-      <Caption place={place} time={time} link={link} />
+      <Caption {...caption} />
     </section>
   );
 }
@@ -688,12 +693,13 @@ function StillFrame({ image, lines, place, timeZone = "Europe/Amsterdam", link,
  * when the photo cannot be read). Each half takes the ink that needs the weaker veil over what is under its own
  * glyphs, over its own veil band that ends at the horizon; the side is measured the same way unless it is given.
  */
-function StillHorizon({ image, lines, place, timeZone = "Europe/Amsterdam", link, side, horizon, className = "" }: Inner) {
+function StillHorizon({ image, lines, accent, side, horizon, className = "", ...caption }: Inner) {
   const root = useRef<HTMLElement>(null);
-  const time = useClock(timeZone);
   const first = side ?? (image.negativeSpace === "right" ? "right" : "left");
-  const up = lines.slice(0, Math.ceil(lines.length / 2));
-  const down = lines.slice(up.length);
+  // The accent is found over the whole headline, then the lines are halved: one mark, on whichever side it falls.
+  const shown = accentLines(lines, accent);
+  const up = shown.slice(0, Math.ceil(lines.length / 2));
+  const down = shown.slice(up.length);
 
   useGSAP(
     (_, contextSafe) => {
@@ -810,7 +816,7 @@ function StillHorizon({ image, lines, place, timeZone = "Europe/Amsterdam", link
   );
 
   const head =
-    "absolute inset-x-6 font-display text-[clamp(3rem,13.5vw,4.75rem)] leading-[0.92] tracking-[-0.035em] group-data-[side=right]/hs:text-right md:inset-x-[4vw] md:text-[clamp(3.5rem,8vw,9.5rem)]";
+    "absolute inset-x-sheet-margin font-display text-[clamp(3rem,13.5vw,4.75rem)] leading-[0.92] tracking-[-0.035em] group-data-[side=right]/hs:text-right md:text-[clamp(3.5rem,8vw,9.5rem)]";
 
   return (
     <section
@@ -856,7 +862,7 @@ function StillHorizon({ image, lines, place, timeZone = "Europe/Amsterdam", link
           ) : null}
         </div>
       </div>
-      <Caption place={place} time={time} link={link} />
+      <Caption {...caption} />
     </section>
   );
 }

package/skills/struq/blocks/kit/accent.ts

@@ -0,0 +1,82 @@
+// components/struq/accent.ts (Struq recipe)
+// The site's one accent word: the same word, set in the pairing's italic accent face (--face-accent), in the opening
+// headline and again in the last scene. Every block that takes an `accent` prop marks it with this one helper, so the
+// word looks the same wherever it stands.
+//
+// withAccent("Waar valt het licht?", "licht")        -> Waar valt het <em>licht</em>?
+// accentLines(["Ruimte die", "blijft."], "blijft")   -> ["Ruimte die", <>...<em>blijft</em>.</>]
+//
+// The match: the first time the word stands in the text as a whole word, case-insensitive, with the text's own casing
+// kept. Punctuation attached to the word (or passed with it, "vuur.") stays outside the mark. A word the text does not
+// hold changes nothing and throws nothing: the text comes back as it went in.
+//
+// The mark is a plain inline <em>: it stays a text-level element, so SplitText carries it into whichever line it lands
+// on when it cuts (and cuts again on a resize), and it sits inside the line's mask (.struq-line-mask), whose room
+// above and below the line holds the accent face's tallest and deepest glyph. Its size and leading are the line's
+// own; only the face and the slant change. A block that fits its type to a width measures with the mark in place, and
+// waits for the accent face with accentFaceReady before it trusts a measure.
+import { createElement, Fragment, type ReactNode } from "react";
+
+/** The accent's classes: the pairing's accent face (blocks.css --font-accent), italic. Nothing else changes. */
+export const ACCENT_CLASS = "font-accent italic";
+
+export type AccentParts = { before: string; word: string; after: string };
+
+/** The word itself: the accent with any punctuation or space around it taken off. */
+function coreOf(accent: string) {
+  return accent.replace(/^[^\p{L}\p{N}]+|[^\p{L}\p{N}]+$/gu, "");
+}
+
+/** Where the accent stands in the text, split around it; null when the text does not hold it. */
+export function findAccent(text: string, accent?: string): AccentParts | null {
+  const word = accent ? coreOf(accent) : "";
+  if (!word || !text) return null;
+  const escaped = word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const match = new RegExp(`(?<![\\p{L}\\p{N}])${escaped}(?![\\p{L}\\p{N}])`, "iu").exec(text);
+  if (!match) return null;
+  return {
+    before: text.slice(0, match.index),
+    word: match[0],
+    after: text.slice(match.index + match[0].length),
+  };
+}
+
+function marked({ before, word, after }: AccentParts): ReactNode {
+  return createElement(Fragment, null, before, createElement("em", { className: ACCENT_CLASS, "data-accent": "" }, word), after);
+}
+
+/** The text with its accent word (the first time it occurs) in the accent face; the text itself when it is absent. */
+export function withAccent(text: string, accent?: string): ReactNode {
+  const parts = findAccent(text, accent);
+  return parts ? marked(parts) : text;
+}
+
+/**
+ * A headline given as lines (or as words, for a block that sets one word per row): the first line that holds the
+ * accent gets the mark, every other line comes back as the same string.
+ */
+export function accentLines(lines: readonly string[], accent?: string): ReactNode[] {
+  let done = false;
+  return lines.map((line) => {
+    if (done) return line;
+    const parts = findAccent(line, accent);
+    if (!parts) return line;
+    done = true;
+    return marked(parts);
+  });
+}
+
+/**
+ * Resolves once the accent face of every mark under `root` is loaded (or failed), so a fit measures the italic as it
+ * will stand. Resolves at once when there is no mark, no font loading API, or nothing to wait for.
+ */
+export function accentFaceReady(root: ParentNode | null | undefined): Promise<void> {
+  if (!root || typeof document === "undefined" || !document.fonts?.load) return Promise.resolve();
+  const loads = Array.from(root.querySelectorAll<HTMLElement>("[data-accent]")).map((mark) => {
+    const cs = getComputedStyle(mark);
+    return document.fonts
+      .load(`${cs.fontStyle} ${cs.fontWeight} 16px ${cs.fontFamily}`, mark.textContent || undefined)
+      .catch(() => []);
+  });
+  return Promise.all(loads).then(() => undefined);
+}

package/skills/struq/blocks/kit/blocks.css

@@ -27,7 +27,7 @@
 }
 
 @theme {
-  /* Type roles: text-display, text-h2, text-h3, text-lead, text-body, text-small. */
+  /* Type roles: text-display, text-h2, text-h3, text-lead, text-body, text-small; the sheet's below. */
   --text-display: clamp(2.875rem, 1.2rem + 6.86vw, 8rem);
   --text-display--line-height: 0.95;
   --text-display--letter-spacing: -0.025em;
@@ -42,6 +42,18 @@
   --text-body--line-height: 1.65;
   --text-small: 0.875rem;
   --text-small--line-height: 1.5;
+  /* The sheet (the film grammar's type and grid), prefixed so it never meets struq.nl's own --step-*, --space-* or
+     --gutter. text-sheet-moment: poster-scale type, two or three per page, about 20vw on a phone easing to 12.5vw
+     at 1920 (3.5rem floor, 15rem cap). text-sheet-label: the small label in the margin column or under a photo,
+     body face, sentence case. px-sheet-margin (and mx-, pl-, ...): the page margin, the header wordmark's and the
+     heroes' left edge. gap-x-sheet-gutter: the gutter of the 12 column grid. */
+  --text-sheet-moment: clamp(3.5rem, 1.7rem + 12vw, 15rem);
+  --text-sheet-moment--line-height: 0.9;
+  --text-sheet-moment--letter-spacing: -0.03em;
+  --text-sheet-label: clamp(0.8125rem, 0.78rem + 0.12vw, 0.9375rem);
+  --text-sheet-label--line-height: 1.45;
+  --spacing-sheet-margin: clamp(1.5rem, 4vw, 5rem);
+  --spacing-sheet-gutter: clamp(1rem, 0.6rem + 1.6vw, 2.5rem);
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
 }
@@ -167,10 +179,48 @@
 @keyframes struq-fade { to { opacity: 1; } }
 @keyframes struq-open { to { clip-path: inset(0 0 0 0); } }
 
-/* SplitText masks: room for descenders inside each line's clip. */
-[data-blocks] .struq-line-mask {
-  padding-block: 0.06em 0.16em;
-  margin-block: -0.06em -0.16em;
+/* The one line mask (SplitText's `mask: "lines"` with linesClass "struq-line", `mask: "chars"` with charsClass
+   "struq-char", and every hand-rolled mask: a .struq-line-mask whose direct child is the part that rises).
+   Room: the clip reaches 0.3em above the line box and 0.35em below it. Measured on every face Struq ships (Fraunces,
+   Newsreader, Bodoni Moda, Sora, Urbanist, Big Shoulders, Unbounded, Syne, Schibsted Grotesk, Instrument Serif, all
+   weights and italics, hhea and win metrics) at leading 0.82, the tightest in the canon: the tallest accent stands
+   0.30em above the line (Syne A-ring), the deepest descender 0.34em below it (Unbounded C-cedilla). Leading above
+   0.82 needs less. The negative margin gives the room back, so the layout is the line box alone.
+   The rising child carries the same room, so its own box is as tall as the clip: a start of yPercent 100 or more
+   puts every ascent and accent below the clip edge, whatever the face and leading.
+   The clip is padding, not overflow-clip-margin, which WebKit has not shipped: padding moves the clip edge in every
+   engine. Masks and their children paint no background, so the overlap with the next line's room hides nothing; the
+   next line's clip only clips the next line. Only the vertical axis clips (overflow: clip lets the other axis stay
+   visible, where hidden would not), so an italic j or f overhanging the line's start or end keeps its ink; engines
+   without overflow: clip (Safari before 16) clip both axes, as before. !important because SplitText writes
+   overflow: clip on every mask inline. The room is registered as a length, so it resolves in the mask's own em and
+   the child inherits it in pixels, whatever the child's own size. */
+@property --struq-mask-top {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+@property --struq-mask-bottom {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+[data-blocks] :is(.struq-line-mask, .struq-char-mask) {
+  --struq-mask-top: 0.3em;
+  --struq-mask-bottom: 0.35em;
+  padding-block: var(--struq-mask-top) var(--struq-mask-bottom);
+  margin-block: calc(var(--struq-mask-top) * -1) calc(var(--struq-mask-bottom) * -1);
+  overflow: hidden !important;
+}
+@supports (overflow: clip) {
+  [data-blocks] :is(.struq-line-mask, .struq-char-mask) {
+    overflow-x: visible !important;
+    overflow-y: clip !important;
+  }
+}
+[data-blocks] :is(.struq-line-mask, .struq-char-mask) > * {
+  padding-block: var(--struq-mask-top) var(--struq-mask-bottom);
+  margin-block: calc(var(--struq-mask-top) * -1) calc(var(--struq-mask-bottom) * -1);
 }
 
 /* --- preloader-gate and page-transition-gate --- */
@@ -466,8 +516,8 @@
 [data-blocks] [data-hero-still] [data-hs-slot] {
   position: absolute;
   top: 4svh;
-  left: 1.5rem;
-  right: 1.5rem;
+  left: var(--spacing-sheet-margin);
+  right: var(--spacing-sheet-margin);
   bottom: 42%;
   overflow: hidden;
 }
@@ -479,7 +529,7 @@
   [data-blocks] [data-hero-still] [data-hs-slot] {
     top: 7svh;
     left: 42vw;
-    right: 4vw;
+    right: var(--spacing-sheet-margin);
     bottom: 3svh;
   }
   [data-blocks] [data-hero-still] [data-hs-photo] {
@@ -667,8 +717,8 @@
   opacity: 1;
 }
 [data-blocks] [data-bg-facets] [data-copy] {
-  left: 24px;
-  right: 24px;
+  left: var(--spacing-sheet-margin);
+  right: var(--spacing-sheet-margin);
   bottom: 9svh;
 }
 [data-blocks] [data-bg-facets] h1 {
@@ -676,7 +726,7 @@
 }
 @media (min-width: 768px) {
   [data-blocks] [data-bg-facets] [data-copy] {
-    left: 6vw;
+    left: var(--spacing-sheet-margin);
     right: auto;
     width: min(46vw, 44rem);
   }
@@ -1151,13 +1201,15 @@
 [data-blocks] [data-footer-contact] [data-fc-part] {
   display: inline-block;
   white-space: nowrap;
-  clip-path: inset(0 -0.3em);
 }
+/* Each character is a shared mask (.struq-char-mask): top-aligned, because a clipping inline-block sits on its bottom
+   edge instead of its text's baseline. The roll carries the mask's room in either nesting, so its copy waits one
+   room lower than its own box and lands exactly where the character stood. */
 [data-blocks] [data-footer-contact] [data-fc-ch] {
   display: inline-block;
   position: relative;
+  vertical-align: top;
   white-space: pre;
-  clip-path: inset(0 -0.2em);
 }
 [data-blocks] [data-footer-contact] [data-fc-enter] {
   display: block;
@@ -1165,6 +1217,8 @@
 [data-blocks] [data-footer-contact] [data-fc-roll] {
   display: block;
   position: relative;
+  padding-block: var(--struq-mask-top) var(--struq-mask-bottom);
+  margin-block: calc(var(--struq-mask-top) * -1) calc(var(--struq-mask-bottom) * -1);
   transition: transform 0.75s var(--ease-out-expo) var(--d, 0s);
 }
 [data-blocks] [data-footer-contact] [data-fc-roll] > span {
@@ -1173,7 +1227,7 @@
 [data-blocks] [data-footer-contact] [data-fc-roll] > [data-fc-copy] {
   position: absolute;
   left: 0;
-  top: 100%;
+  top: calc(100% + var(--struq-mask-top));
 }
 [data-blocks] [data-footer-contact] [data-fc-roll-host]:is(:hover, :focus-visible) [data-fc-roll] {
   transform: translateY(-100%);
@@ -1394,13 +1448,9 @@ html:not(.sq-js) [data-blocks] [data-header-bar] [data-hb-move] {
    55svh over its line, at the top the script will use;
    the links wait for the landing. The script takes over with the measured face and eases out the difference. If the
    script never runs the plain bar returns after 3s. The wordmark rises out of its mask from 0s, script or not. */
+/* --hb-gx: the bar's side padding, the sheet's page margin, so the estimate spans what the script measures. */
 [data-blocks] [data-header-bar] {
-  --hb-gx: 1.5rem;
-}
-@media (min-width: 768px) {
-  [data-blocks] [data-header-bar] {
-    --hb-gx: 3vw;
-  }
+  --hb-gx: var(--spacing-sheet-margin);
 }
 @media (prefers-reduced-motion: no-preference) {
   .sq-js [data-blocks] [data-header-bar="settle"]:not([data-ready]) [data-hb-word] {
@@ -1424,7 +1474,7 @@ html:not(.sq-js) [data-blocks] [data-header-bar] [data-hb-move] {
 }
 @keyframes hb-rise {
   from {
-    translate: 0 calc(100% + 0.22em);
+    translate: 0 100%;
   }
 }
 /* Keyboard focus: drawn on the copies in their own ink (the real links' text is transparent once they show). */
@@ -1452,29 +1502,22 @@ html:not(.sq-js) [data-blocks] [data-header-bar] [data-hb-move] {
   opacity: 0.2;
 }
 /* The wordmark rolls whole (its letters keep their kerning, even set large): the name slides up out of its mask and its
-   copy rises in from below. The mask has room for descenders; the copy waits a little lower than the line. */
-[data-blocks] [data-header-bar] [data-hb-wmask] {
-  overflow: hidden;
-  padding-block: 0.08em 0.14em;
-  margin-block: -0.08em -0.14em;
-}
+   copy rises in from below. The mask is the shared line mask (.struq-line-mask): the roll carries its room, so the copy
+   waits one room below the roll's box and a roll of -100% lands it where the name stood. */
 [data-blocks] [data-header-bar] [data-hb-wroll] > span:last-child {
-  top: calc(100% + 0.22em);
+  top: calc(100% + var(--struq-mask-top));
 }
 [data-blocks] [data-header-bar] [data-hb-wroll] {
   transition: transform 0.6s var(--ease-out-expo);
 }
 [data-blocks] [data-header-bar] [data-hb-word][data-hot] [data-hb-wroll] {
-  transform: translateY(calc(-100% - 0.22em));
+  transform: translateY(-100%);
 }
-/* quiet: each letter in its own mask, rolling after the one before it. */
+/* quiet: each letter in its own mask (.struq-char-mask), rolling after the one before it, by the same sums. */
 [data-blocks] [data-header-bar] [data-hb-ch] {
   position: relative;
   display: inline-block;
-  overflow: hidden;
   white-space: pre;
-  padding-block: 0.15em;
-  margin-block: -0.15em;
 }
 [data-blocks] [data-header-bar] [data-hb-ch] > span {
   display: block;
@@ -1483,10 +1526,10 @@ html:not(.sq-js) [data-blocks] [data-header-bar] [data-hb-move] {
 [data-blocks] [data-header-bar] [data-hb-ch] > span:last-child {
   position: absolute;
   left: 0;
-  top: calc(100% + 0.15em);
+  top: calc(100% + var(--struq-mask-top));
 }
 [data-blocks] [data-header-bar] [data-hb-link][data-hot] [data-hb-ch] > span {
-  transform: translateY(calc(-100% - 0.3em));
+  transform: translateY(-100%);
 }
 /* The action: a text link with a faint rule under it at rest; quiet's rule comes up to the full ink on hover. */
 [data-blocks] [data-header-bar] [data-hb-action]::before {