@struq/skill 0.4.2 → 0.5.0

package/skills/struq/blocks/preloaders/preloader-gate.tsx

@@ -1,36 +1,56 @@
 "use client";
 // preloader-gate (Struq preloader): the gate
-// A film leader in the site's own voice. The first paint is the whole leader on a shut gate: two
-// bars meeting on one line, a dial (two rings and a crosshair) and one figure in the display face.
-// Only the sweep moves: the hand and an accent arc run once per figure, 3, 2, 1, on an eased count
-// that waits for the fonts and the hero image. Then the leader drops away, the line through the
-// middle runs out to both edges and lights in the accent, and the gate opens on it: the top bar
-// rises, the bottom bar falls, each carrying half of the light, onto the page's own entrance.
+// The first paint is a shut gate: two bars meeting on one line, and on it a dial that counts the page in on an
+// eased count that waits for the fonts and the hero image. Then the dial drops away, the line through the middle runs
+// out to both edges and lights in the accent, and the gate opens on it: the top bar rises, the bottom bar falls, each
+// carrying half of the light, onto the page's own entrance.
+//
+// What the dial says is the client's. By default it is neutral: one hairline ring that an accent arc fills once while
+// the page loads, nothing written inside it, and the site's name (when given) small at the lower left. `marks` are the
+// figures it counts through, one beat each, cut on the beat in the display face: take them from the client's own
+// lexicon (an architect's scales, 1:500, 1:100, 1:20; a bakery's proving hours), never a countdown it does not own.
+// `dial` picks the drawing: "ring" (the default), "leader" (two rings, a crosshair and a sweeping hand: with marks
+// 3, 2, 1 it is a film leader, the lab's look) or "none" (the marks alone).
 //
 // The clock starts at the first paint, not at hydration:
-// 0.00  the gate shut, the leader whole; the count runs (CSS until React hydrates, then GSAP)
+// 0.00  the gate shut, the dial whole; the count runs (CSS until React hydrates, then GSAP)
 // 1.15  the count holds at its last beat until the fonts and the hero image are in (at most 0.15s)
-// 1.15  the count completes (0.26s); the leader falls back; the line runs out and lights
+// 1.15  the count completes (0.26s); the dial falls back; the line runs out and lights
 // 1.45  the gate opens (0.78s, the curtain ease); the page's entrance starts 0.1s in
 // 2.23  done, and never later than 2.4s after the first paint.
 //
-// Mount it first in <body> (app/layout.tsx), before the page it covers, and start the hero's own
-// entrance with onGateOpen() inside its useGSAP, so the hero moves while the gate opens:
+// Mount it first in <body> (app/layout.tsx), before the page it covers:
 //
 //   <body><PreloaderGate name="Noord, Rotterdam" />{children}</body>
 //
+// The hand-over is the one every frame family uses (helper in preloader-slices-uncovered.ts, which ships with it):
+// while the gate is shut <html> carries data-curtain="closed", and the moment it starts to open the attribute goes and
+// "curtain:lift" fires, so every Struq hero waits behind it with no wiring. A page's own entrance does the same:
+//   useGSAP((_, contextSafe) => whenUncovered(contextSafe!(() => { ...the entrance... })), { scope })
+// onGateOpen() and preloaderCovers() still work, and fire at the same moment.
+//
 // It needs no `js` class or head script of its own setup: the gate renders a small inline script
 // just before itself, which shows it (before the first paint) only when JS runs, motion is allowed
 // and this session has not seen it; blocks.css keeps it display none otherwise. Without JS it is
 // never painted. If the bundle never arrives, the CSS still opens it and removes it by 2.4s.
 // `force` plays it on every load (the lab, a launch page). The tone is "deep" (a step darker than
 // the page in every palette), "inverse" or "field".
-import { useRef, useState, useSyncExternalStore } from "react";
+import { useRef, useState, useSyncExternalStore, type CSSProperties } from "react";
 import { gsap, useGSAP } from "../kit/gsap";
+import { closeCurtain, covered, liftCurtain, whenUncovered } from "./preloader-slices-uncovered";
+
+export { whenUncovered };
 
 type Props = {
-  /** The site's name, set small in the lower left while the leader runs. */
+  /** The gate's caption: the site's name, set small in the lower left while the dial runs. */
   name?: string;
+  /**
+   * The figures the dial counts through, one beat each, in the client's own words (one to four characters read best).
+   * Left out, nothing is written and the arc fills the ring once.
+   */
+  marks?: readonly string[];
+  /** The drawing: one ring (default), the film leader's two rings, crosshair and hand, or none. */
+  dial?: "ring" | "leader" | "none";
   /** Play on every load (the lab, a launch page). Default: once per session. */
   force?: boolean;
   tone?: "deep" | "inverse" | "field";
@@ -81,10 +101,14 @@ const TAKEOVER = 1.4;
 
 /**
  * Runs in the HTML before the gate is parsed, so before its first paint: it shows the gate only with motion
- * allowed and an unseen session (or force), and marks the first paint for the script that takes the clock over.
+ * allowed and an unseen session (or force), closes the curtain on <html> so every entrance waits from the first
+ * paint, and marks the first paint for the script that takes the clock over.
  */
 const showScript = (force: boolean) =>
-  `try{if(!matchMedia("(prefers-reduced-motion: reduce)").matches&&(${force}||sessionStorage.getItem("${KEY}")!=="1")){window.__struqGateT0=performance.now();var s=document.createElement("style");s.id="${SHOW_ID}";s.textContent="[data-preloader-gate]{display:block!important}";document.head.appendChild(s)}}catch(e){}`;
+  `try{if(!matchMedia("(prefers-reduced-motion: reduce)").matches&&(${force}||sessionStorage.getItem("${KEY}")!=="1")){window.__struqGateT0=performance.now();document.documentElement.setAttribute("data-curtain","closed");var s=document.createElement("style");s.id="${SHOW_ID}";s.textContent="[data-preloader-gate]{display:block!important}";document.head.appendChild(s)}}catch(e){}`;
+
+/** A lift owed by a gate torn down before it opened; strict mode's remount comes in the same commit and takes it back. */
+let pendingLift = 0;
 
 /** True while the gate is shut over the page: set an entrance's start state only then, so nothing blinks on a revisit. */
 export function preloaderCovers(): boolean {
@@ -148,9 +172,15 @@ function useServerPass() {
   );
 }
 
-const DIGITS = ["3", "2", "1"];
+/** The figure's size: a numeral or two at full size, a short word smaller, so every mark stays inside the ring. */
+function markSize(marks: readonly string[]) {
+  const longest = Math.max(0, ...marks.map((m) => Array.from(m).length));
+  if (longest <= 2) return "text-[min(32vw,10.5rem)]";
+  if (longest <= 4) return "text-[min(17vw,5.75rem)]";
+  return "text-[min(10vw,3.5rem)]";
+}
 
-export function PreloaderGate({ name, force = false, tone = "deep" }: Props) {
+export function PreloaderGate({ name, marks = [], dial = "ring", force = false, tone = "deep" }: Props) {
   const root = useRef<HTMLDivElement>(null);
   const [done, setDone] = useState(false);
   const serverPass = useServerPass();
@@ -159,10 +189,24 @@ export function PreloaderGate({ name, force = false, tone = "deep" }: Props) {
     () => {
       const el = root.current;
       if (!el) return;
+      window.clearTimeout(pendingLift);
+      // Whether this run holds the curtain closed: only a gate that plays ever closes it.
+      let closed = false;
       const open = () => {
         el.dataset.phase = "open";
+        if (closed) {
+          closed = false;
+          liftCurtain();
+        }
         window.dispatchEvent(new Event(GATE_OPEN_EVENT));
       };
+      // Torn down before it opened: let the page go (hold, curtain, entrances) unless a remount takes it back.
+      const letGo = () => {
+        if (!closed) return;
+        pendingLift = window.setTimeout(() => {
+          if (covered()) liftCurtain();
+        }, 0);
+      };
       const finish = () => {
         if (!force) {
           try {
@@ -185,6 +229,9 @@ export function PreloaderGate({ name, force = false, tone = "deep" }: Props) {
       const elapsed = (performance.now() - t0) / 1000;
       const release = holdScroll();
       window.scrollTo(0, 0);
+      // The inline script closed it before the first paint; closed again here for strict mode's second run.
+      closeCurtain();
+      closed = true;
 
       // Hydrated late: the CSS clock is already into the exit. Let it finish, keep the hand-over on time.
       if (elapsed >= TAKEOVER) {
@@ -197,6 +244,7 @@ export function PreloaderGate({ name, force = false, tone = "deep" }: Props) {
           handover.kill();
           end.kill();
           release();
+          letGo();
         };
       }
 
@@ -269,6 +317,7 @@ export function PreloaderGate({ name, force = false, tone = "deep" }: Props) {
       return () => {
         tl.kill();
         release();
+        letGo();
       };
     },
     { scope: root },
@@ -280,6 +329,11 @@ export function PreloaderGate({ name, force = false, tone = "deep" }: Props) {
   const ring = "color-mix(in oklch, var(--on-gate) 46%, transparent)";
   const inner = "color-mix(in oklch, var(--on-gate) 30%, transparent)";
   const cross = "color-mix(in oklch, var(--on-gate) 24%, transparent)";
+  // One beat per mark, one beat when there are none. blocks.css derives the beat from the count for three beats; any
+  // other number is set here, on the same element, from the same count.
+  const beats = marks.length ? marks : [""];
+  const n = beats.length;
+  const count = n === 3 ? undefined : ({ "--gate-b": `min(calc(var(--gate-p) * ${n}), ${n - 0.01})` } as CSSProperties);
   return (
     <>
       {serverPass ? <script dangerouslySetInnerHTML={{ __html: showScript(force) }} /> : null}
@@ -288,9 +342,11 @@ export function PreloaderGate({ name, force = false, tone = "deep" }: Props) {
         data-preloader-gate=""
         data-gate=""
         data-tone={tone}
+        data-dial={dial}
         data-phase="shut"
         aria-hidden="true"
         className="fixed inset-0 z-[100] select-none"
+        style={count}
       >
         {(["top", "bottom"] as const).map((side) => (
           <div
@@ -311,37 +367,51 @@ export function PreloaderGate({ name, force = false, tone = "deep" }: Props) {
         ))}
 
         <div data-leader="" className="absolute left-1/2 top-1/2 aspect-square w-[min(64vw,22rem)] -translate-x-1/2 -translate-y-1/2">
-          <svg viewBox="0 0 200 200" className="absolute inset-0 size-full overflow-visible" fill="none">
-            <circle cx="100" cy="100" r="92" style={{ stroke: ring, strokeWidth: 0.8 }} />
-            <circle cx="100" cy="100" r="78" style={{ stroke: inner, strokeWidth: 0.7 }} />
-            <line x1="100" y1="-14" x2="100" y2="214" style={{ stroke: cross, strokeWidth: 0.7 }} />
-            {/* The sweep: one accent arc per figure, drawn round the inner ring as the hand passes. */}
-            {DIGITS.map((d, i) => (
-              <circle
-                key={d}
-                data-beat=""
-                data-sweep=""
-                cx="100"
-                cy="100"
-                r="78"
-                pathLength={1}
-                strokeDasharray="1 1"
-                transform="rotate(-90 100 100)"
-                className="stroke-accent"
-                style={{ strokeWidth: 1.4, ["--i" as string]: i }}
-              />
-            ))}
-            <line data-hand="" x1="100" y1="100" x2="100" y2="8" className="stroke-accent" style={{ strokeWidth: 1.1 }} />
-          </svg>
+          {dial === "none" ? null : (
+            <svg viewBox="0 0 200 200" className="absolute inset-0 size-full overflow-visible" fill="none">
+              {dial === "leader" ? (
+                <>
+                  <circle cx="100" cy="100" r="92" style={{ stroke: ring, strokeWidth: 0.8 }} />
+                  <circle cx="100" cy="100" r="78" style={{ stroke: inner, strokeWidth: 0.7 }} />
+                  <line x1="100" y1="-14" x2="100" y2="214" style={{ stroke: cross, strokeWidth: 0.7 }} />
+                </>
+              ) : (
+                <circle cx="100" cy="100" r="78" style={{ stroke: ring, strokeWidth: 0.7 }} />
+              )}
+              {/* The sweep: one accent arc per beat, drawn round the ring. */}
+              {beats.map((_, i) => (
+                <circle
+                  key={i}
+                  data-beat=""
+                  data-sweep=""
+                  cx="100"
+                  cy="100"
+                  r="78"
+                  pathLength={1}
+                  strokeDasharray="1 1"
+                  transform="rotate(-90 100 100)"
+                  className="stroke-accent"
+                  style={{ strokeWidth: 1.4, ["--i" as string]: i }}
+                />
+              ))}
+              {dial === "leader" ? (
+                <line data-hand="" x1="100" y1="100" x2="100" y2="8" className="stroke-accent" style={{ strokeWidth: 1.1 }} />
+              ) : null}
+            </svg>
+          )}
 
-          {/* One figure at a time, cut on the beat. */}
-          <div className="absolute inset-0 grid place-items-center font-display text-[min(32vw,10.5rem)] leading-none tracking-[-0.02em] text-[var(--on-gate)] [font-variant-numeric:lining-nums]">
-            {DIGITS.map((d, i) => (
-              <span key={d} data-beat="" className="[grid-area:1/1]" style={{ ["--i" as string]: i }}>
-                {d}
-              </span>
-            ))}
-          </div>
+          {/* One mark at a time, cut on the beat. */}
+          {marks.length ? (
+            <div
+              className={`absolute inset-0 grid place-items-center font-display ${markSize(marks)} leading-none tracking-[-0.02em] text-[var(--on-gate)] [font-variant-numeric:lining-nums]`}
+            >
+              {marks.map((mark, i) => (
+                <span key={i} data-beat="" className="whitespace-nowrap [grid-area:1/1]" style={{ ["--i" as string]: i }}>
+                  {mark}
+                </span>
+              ))}
+            </div>
+          ) : null}
         </div>
 
         {name ? (

package/skills/struq/blocks/preloaders/preloader-stack.tsx

@@ -343,13 +343,16 @@ export function PreloaderStack({ photos, hero, target = "[data-stack-target]", n
           </div>
           {/* Parsed right after the frame: the first print shows (blocks.css) only once it is loaded and decoded. */}
           <script dangerouslySetInnerHTML={{ __html: FIRST }} />
-          {/* The caption, in a mask it leaves through as the frame starts to grow. */}
-          <div className="mt-3 overflow-hidden pb-[0.15em] md:mt-4">
-            <div data-caption="" className="flex items-baseline justify-between gap-4">
-              {name ? <p className="font-display text-h3 leading-none">{name}</p> : <span />}
-              {/* The count is one number, --stack-n, shown by blocks.css: its CSS clock runs from the first paint and
-                  the script takes the same number over when it hydrates. */}
-              <p data-count="" className="text-small tabular-nums lining-nums text-ink-muted" />
+          {/* The caption, in a mask it leaves through as the frame starts to grow: the shared line mask, at the
+              name's size so its room is the name's. */}
+          <div className="mt-3 md:mt-4">
+            <div className="struq-line-mask text-h3">
+              <div data-caption="" className="flex items-baseline justify-between gap-4">
+                {name ? <p className="font-display text-h3 leading-none">{name}</p> : <span />}
+                {/* The count is one number, --stack-n, shown by blocks.css: its CSS clock runs from the first paint
+                    and the script takes the same number over when it hydrates. */}
+                <p data-count="" className="text-small tabular-nums lining-nums text-ink-muted" />
+              </div>
             </div>
           </div>
           {/* Parsed right after the caption: it shows (blocks.css) only once its own faces are in, never in a fallback. */}

package/skills/struq/blocks/sections/contact-form.tsx

@@ -379,7 +379,7 @@ export function ContactForm({
       <p
         className={`font-display ${size === "display" ? "text-[clamp(2.5rem,1.1rem+4.6vw,6rem)] leading-[1.02]" : "text-h2"} tracking-[-0.02em]`}
       >
-        <span className="struq-line-mask block overflow-hidden">
+        <span className="struq-line-mask block">
           <span data-cf-rise="" className="block">
             {firstName ? `Dank je, ${firstName}.` : "Dank je."}
           </span>

package/skills/struq/blocks/sections/cta-closing.tsx

@@ -611,7 +611,7 @@ export function CtaClosing({ variant = "photo", lines, link, image, caption, cla
   const head = (extra = "", rise = true) => (
     <h2 id={titleId} data-cc-rise={rise ? "" : undefined} data-cc-head="" className={`font-display ${extra}`}>
       {lines.map((line, i) => (
-        <span key={i} data-cc-mask="" className="struq-line-mask block overflow-hidden">
+        <span key={i} data-cc-mask="" className="struq-line-mask block">
           <span data-cc-line="" className="block">
             <span data-cc-text="" className="inline-block">
               {line}
@@ -667,7 +667,8 @@ export function CtaClosing({ variant = "photo", lines, link, image, caption, cla
         </div>
         {/* The band: decoration, the backdrop the link stands in front of. */}
         <div aria-hidden className="pointer-events-none absolute inset-0 flex items-center motion-reduce:hidden">
-          <div className="struq-line-mask w-full overflow-hidden">
+          {/* The mask carries the band's size, so its room (blocks.css) is measured in the band's em. */}
+          <div className="struq-line-mask w-full text-[30vw] md:text-[min(19vw,18rem)]">
             <div data-cc-bandrow="" data-cc-rise="">
               <div data-cc-band="" className="flex w-max">
                 {Array.from({ length: COPIES }, (_, c) => (

package/skills/struq/blocks/sections/fanned-cards.tsx

@@ -407,10 +407,11 @@ export function FannedCards({ title, accent, lead, items, className = "" }: Prop
   // `js` in a client project and `sq-js` on struq.nl.
   const gate =
     "lg:motion-safe:[.js_&]:invisible lg:motion-safe:[.sq-js_&]:invisible lg:motion-safe:animate-[struq-show_0s_3s_forwards]";
-  // Masks clip only top and bottom, so a wide face never loses the end of a word.
-  const mask = "struq-line-mask block overflow-x-visible overflow-y-clip";
-  const display =
-    "font-display block w-fit whitespace-nowrap text-[length:calc(var(--d)*var(--fit,1))] leading-[0.92] tracking-[-0.04em]";
+  // The shared line mask (blocks.css): it clips only top and bottom, with room for accents and descenders measured
+  // in its own em, so each mask carries the size of the line it holds.
+  const mask = "struq-line-mask block";
+  const size = "text-[length:calc(var(--d)*var(--fit,1))]";
+  const display = `font-display block w-fit whitespace-nowrap ${size} leading-[0.92] tracking-[-0.04em]`;
   // A soft shadow made from the ground itself, deeper than the ground in light and dark palettes alike.
   const shadow =
     "0 2px 6px oklch(from var(--surface-0) calc(l * 0.3) c h / 0.3), 0 36px 64px -28px oklch(from var(--surface-0) calc(l * 0.22) c h / 0.62)";
@@ -427,13 +428,13 @@ export function FannedCards({ title, accent, lead, items, className = "" }: Prop
         data-type=""
         className={`relative z-0 px-6 lg:static lg:px-0 ${gate}`}
       >
-        <span className={`${mask} lg:absolute lg:left-[4vw] lg:top-[5svh]`}>
+        <span className={`${mask} ${size} lg:absolute lg:left-[4vw] lg:top-[5svh]`}>
           <span data-rise="" data-line-one="" className={display}>
             {title}
           </span>
         </span>
         {accent ? (
-          <span className={`${mask} ml-auto w-fit lg:absolute lg:bottom-[4svh] lg:right-[4vw]`}>
+          <span className={`${mask} ${size} ml-auto w-fit lg:absolute lg:bottom-[4svh] lg:right-[4vw]`}>
             <span
               data-line-two=""
               className={`${display} font-accent font-light italic tracking-[-0.03em]`}
@@ -523,7 +524,7 @@ export function FannedCards({ title, accent, lead, items, className = "" }: Prop
               } ${lead0 ? "lg:w-[min(34svh,26vw)]" : ""} ${gate}`}
               style={pos as React.CSSProperties}
             >
-              <span className={mask}>
+              <span className={`${mask} text-h3 ${lead0 ? "lg:text-[clamp(2rem,1rem_+_1.7vw,3rem)]" : ""}`}>
                 <span
                   data-cap-line=""
                   className={`font-display block text-h3 text-ink hyphens-auto ${
@@ -533,9 +534,12 @@ export function FannedCards({ title, accent, lead, items, className = "" }: Prop
                   {item.title}
                 </span>
               </span>
-              <span className={`${mask} mt-1.5`}>
-                <span data-cap-line="" className="block text-small text-ink-muted">
-                  {item.text}
+              {/* The spacing sits on a plain wrapper: the mask's own negative margins would cancel it. */}
+              <span className="mt-1.5 block">
+                <span className={`${mask} text-small`}>
+                  <span data-cap-line="" className="block text-small text-ink-muted">
+                    {item.text}
+                  </span>
                 </span>
               </span>
             </div>

package/skills/struq/blocks/sections/film-strip.tsx

@@ -306,30 +306,34 @@ export function FilmStrip({ items, intro, outro, className = "" }: Props) {
         {/* The title of the frame in the gate, and its metadata, each in its own mask, standing under the gate
             (where the first frame's left edge is: 5vw, the intro's 40vw and one gap, until measured). */}
         <div data-foot="" aria-hidden className="absolute bottom-10 left-[50.5vw] right-[5vw]">
-          <p className={`relative m-0 overflow-hidden pb-[0.14em] text-[length:calc(var(--fs-t)*var(--fs-fit,1))] ${display}`}>
+          {/* Shared line masks (blocks.css). The waiting copies stand one room down from the mask's top, where the
+              first one's text starts, since an absolute box is placed from the mask's padding edge. */}
+          <p className={`struq-line-mask relative text-[length:calc(var(--fs-t)*var(--fs-fit,1))] ${display}`}>
             {items.map((item, j) => (
               <span
                 key={item.title}
                 data-title=""
-                className={`block whitespace-nowrap will-change-transform ${j === 0 ? "relative" : "absolute inset-x-0 top-0"}`}
+                className={`block whitespace-nowrap will-change-transform ${j === 0 ? "relative" : "absolute inset-x-0 top-[var(--struq-mask-top)]"}`}
                 style={{ transform: j === 0 ? "translate3d(0, 0%, 0)" : "translate3d(0, 140%, 0)" }}
               >
                 {item.title}
               </span>
             ))}
           </p>
-          <p className="relative m-0 mt-3 overflow-hidden text-small text-ink-muted">
-            {items.map((item, j) => (
-              <span
-                key={item.title}
-                data-meta=""
-                className={`block whitespace-nowrap ${j === 0 ? "relative" : "absolute inset-x-0 top-0"}`}
-                style={{ transform: j === 0 ? "translate3d(0, 0%, 0)" : "translate3d(0, 140%, 0)" }}
-              >
-                {item.meta ?? " "}
-              </span>
-            ))}
-          </p>
+          <div className="mt-3">
+            <p className="struq-line-mask relative text-small text-ink-muted">
+              {items.map((item, j) => (
+                <span
+                  key={item.title}
+                  data-meta=""
+                  className={`block whitespace-nowrap ${j === 0 ? "relative" : "absolute inset-x-0 top-[var(--struq-mask-top)]"}`}
+                  style={{ transform: j === 0 ? "translate3d(0, 0%, 0)" : "translate3d(0, 140%, 0)" }}
+                >
+                  {item.meta ?? " "}
+                </span>
+              ))}
+            </p>
+          </div>
         </div>
       </div>
 

package/skills/struq/blocks/sections/grid-assembly.tsx

@@ -460,8 +460,9 @@ export function GridAssembly({ tiles, hero, title, text, heading, line, classNam
       "--r": `${cell.r} / span ${cell.rs}`,
     }) as React.CSSProperties;
   // Desktop: the board's cell. Phones: two columns, tall prints over two rows.
-  const tileClass = (tall: boolean, wide: boolean) =>
-    `relative overflow-hidden bg-surface-2 will-change-transform md:[grid-column:var(--c)] md:[grid-row:var(--r)] ${
+  // The type cell does not clip: its lines clip in their own masks, with room for accents and descenders.
+  const tileClass = (tall: boolean, wide: boolean, clip = true) =>
+    `relative ${clip ? "overflow-hidden" : ""} bg-surface-2 will-change-transform md:[grid-column:var(--c)] md:[grid-row:var(--r)] ${
       wide ? "col-span-2" : ""
     } ${tall ? "row-span-2" : ""}`;
   const ink = "text-on-photo group-data-[tone=dark]/ga:text-[var(--ga-dark)]";
@@ -474,7 +475,7 @@ export function GridAssembly({ tiles, hero, title, text, heading, line, classNam
     >
       <h3 className={`m-0 text-[clamp(2.75rem,1rem_+_5.4vw,8rem)] ${display}`}>
         {heading.map((h) => (
-          <span key={h} className="block overflow-hidden pb-[0.1em] -mb-[0.1em]">
+          <span key={h} className="struq-line-mask block">
             <span data-rise={rise ? "" : undefined} className="block">
               {h}
             </span>
@@ -482,9 +483,11 @@ export function GridAssembly({ tiles, hero, title, text, heading, line, classNam
         ))}
       </h3>
       {line ? (
-        <p className="m-0 mt-6 overflow-hidden text-lead">
-          <span data-rise={rise ? "" : undefined} className="block max-w-[34ch] group-data-[side=right]/ga:ml-auto">
-            {line}
+        <p className="m-0 mt-6 text-lead">
+          <span className="struq-line-mask block">
+            <span data-rise={rise ? "" : undefined} className="block max-w-[34ch] group-data-[side=right]/ga:ml-auto">
+              {line}
+            </span>
           </span>
         </p>
       ) : null}
@@ -513,20 +516,22 @@ export function GridAssembly({ tiles, hero, title, text, heading, line, classNam
           {/* The type cell: the section's line, standing up as the grid locks. */}
           <div
             data-tile="t"
-            className={`${tileClass(false, true)} flex flex-col justify-between bg-transparent py-1 md:py-0`}
+            className={`${tileClass(false, true, false)} flex flex-col justify-between bg-transparent py-1 md:py-0`}
             style={{ ...place(CELLS.t), ...({ "--sx": "0px", "--sy": "0px", "--sr": "0deg", "--sd": "0" } as React.CSSProperties) }}
           >
             <h2 className={`m-0 text-[clamp(2.25rem,1rem_+_2.9vw,5rem)] text-ink ${display}`}>
-              <span className="block overflow-hidden pb-[0.1em] -mb-[0.1em]">
+              <span className="struq-line-mask block">
                 <span data-ga-line="" className="block">
                   {title}
                 </span>
               </span>
             </h2>
             {text ? (
-              <p className="m-0 overflow-hidden text-small text-ink-muted">
-                <span data-ga-line="" className="block max-w-[32ch]">
-                  {text}
+              <p className="m-0 text-small text-ink-muted">
+                <span className="struq-line-mask block">
+                  <span data-ga-line="" className="block max-w-[32ch]">
+                    {text}
+                  </span>
                 </span>
               </p>
             ) : null}

package/skills/struq/blocks/sections/manifesto.tsx

@@ -220,8 +220,9 @@ function runWrites(el: HTMLElement, reduce: boolean) {
       const to = (write * acc) / total;
       const p = within(P, from, to);
       const r = p * l.w;
-      // The clip reaches a quarter line past every edge it is not drawing, so ascents, descents and overhangs show.
-      const pad = Math.round(l.h * 0.25);
+      // The clip reaches a whole line past every edge it is not drawing, so ascents, accents, descents and an italic's
+      // overhang show at any leading (they need up to 0.35em; a line is at least 0.82em).
+      const pad = Math.round(l.h);
       const right = p <= 0 ? l.box + pad : p >= 1 ? -pad : l.box - l.left - r;
       lines[i].style.clipPath = `inset(${-pad}px ${right.toFixed(1)}px ${-pad}px ${-pad}px)`;
       if (P >= from) {

package/skills/struq/blocks/sections/panel-accordion.tsx

@@ -354,12 +354,13 @@ export function PanelAccordion({ title, items, className = "" }: Props) {
               className="absolute bottom-0 left-[-1px] w-[calc(100%+2px)] bg-surface-0 group-focus-visible:shadow-[inset_0_2px_0_var(--focus,var(--accent))]"
             >
               <div className="grid items-start px-4 pb-4 pt-3 md:px-5 md:pb-5 md:pt-4">
-                <span className="block overflow-hidden [grid-area:1/1]">
+                {/* Two shared line masks in one cell; the big one carries the name's size, so its room is the name's. */}
+                <span className="struq-line-mask block [grid-area:1/1]">
                   <span data-small="" className="text-small block whitespace-nowrap">
                     {item.title}
                   </span>
                 </span>
-                <span className="block overflow-hidden pb-[0.14em] [grid-area:1/1]">
+                <span className="struq-line-mask block text-h3 [grid-area:1/1] md:text-[clamp(2.5rem,1rem_+_3.6vw,5.5rem)]">
                   <span data-big="" className="flex flex-col items-start gap-2 md:gap-3" style={{ transform: "translateY(115%)" }}>
                     <span
                       data-name=""

package/skills/struq/blocks/sections/split-pair.tsx

@@ -500,7 +500,7 @@ export function SplitPair({ images, word, line, captions, place, className = ""
     { scope: stage, dependencies: [named, place] },
   );
 
-  const mask = "block overflow-hidden pb-[0.15em] -mb-[0.15em]";
+  const mask = "struq-line-mask block";
 
   // The word and the line under it, laid out once and rendered on the ground and on each photo. Only the ground
   // copy is the real text; the copies on the photos are pictures of it.
@@ -509,8 +509,9 @@ export function SplitPair({ images, word, line, captions, place, className = ""
       <div
         className="absolute inset-x-0 top-[calc(var(--sp-y)*100%)] flex -translate-y-1/2 justify-center text-[length:min(calc(var(--sp-base)*var(--sp-fit,1)),34svh)]"
       >
-        {/* The mask the word rises out of, with room for accents above and descenders below. */}
-        <span className="-mx-[0.1em] -mb-[0.24em] -mt-[0.08em] block overflow-hidden px-[0.1em] pb-[0.24em] pt-[0.08em]">
+        {/* The mask the word rises out of: the shared line mask, with room for accents above and descenders below
+            and the sides left open for an italic's overhang. */}
+        <span className="struq-line-mask block">
           <span
             data-word=""
             className="font-display block w-fit whitespace-nowrap leading-[0.82] tracking-[-0.045em] [word-spacing:0.08em]"