@struq/skill 0.4.3 → 0.5.0

package/skills/struq/blocks/footers/footer-contact.tsx

@@ -1,23 +1,27 @@
 "use client";
 // footer-contact (Struq footer recipe)
-// A footer whose hero is the way to reach the studio: the mail address as a real mailto link, the studio's city with
-// its live local time and a calm marker of whether the studio is open (computed from that time and the opening hours,
-// never invented), a phone line, the address, three or four plain links and a small foot line. Three compositions:
+// A footer whose hero is the way to reach the studio: the mail address as a real mailto link, the studio's city and
+// its opening hours, a phone line, the address, three or four plain links and a small foot line. With `clock` the city
+// also keeps its live local time and a calm marker of whether the studio is open (computed from that time and the
+// opening hours, never invented); without it nothing reads the time and the hours stand as plain text. One live clock
+// per site at most, so the clock is off unless asked. Three compositions:
 //
 // - address: the mail address is the footer's headline, set at the top and fitted to the width with the loaded face
 //   (on a phone it breaks at the @ when one line would set too small). Its characters roll up into their own slots
 //   from blank as the footer arrives, staggered across the width, and on hover or focus each rolls up again to the
 //   same character, staggered from the side the pointer came in. The details close the footer as one ruled line.
-// - clock: a large live clock for the studio's city is the centre, hours and minutes at display size, the colon
-//   breathing once a second and a changed digit rolling over on the minute (every digit in a slot as wide as the
-//   face's widest, so nothing shifts). The mail address leads the ruled rows under it, the phone, the address and the
-//   hours beneath it, like a timetable. Without scripts the slot holds the opening hours instead of a time.
+// - clock: the studio's city at display size is the centre, fitted to the width and sliding out of its mask. With
+//   `clock` it is a large live clock instead, hours and minutes at display size, the colon breathing once a second and
+//   a changed digit rolling over on the minute (every digit in a slot as wide as the face's widest, so nothing shifts);
+//   without scripts that slot holds the opening hours instead of a time. The mail address leads the ruled rows under
+//   it, the phone, the address and the hours beneath it, like a timetable.
 // - columns: a quiet editorial grid. A short closing line at display size, then three columns (Contact, Studio, Volg
 //   ons); the address is a link whose underline draws from the side the pointer came in. The most restrained.
 //
 // <FooterContact variant="address" studio="Noord" email="hallo@noord.studio" phone={{ label: "010 214 63 80",
 //   href: "tel:+31102146380" }} address={["Maashaven Noordzijde 12", "3072 AA Rotterdam"]} city="Rotterdam"
-//   timeZone="Europe/Amsterdam" hours={{ days: [1, 2, 3, 4, 5], from: "9:00", to: "18:00" }} links={[...]} foot="..." />
+//   hours={{ days: [1, 2, 3, 4, 5], from: "9:00", to: "18:00" }} links={[...]} foot="..." />
+// Add `clock timeZone="Europe/Amsterdam"` for the live time and the open marker.
 //
 // The entrance is scrubbed to the scroll over the footer's own arrival (from its top meeting the bottom of the screen
 // to its bottom meeting it), with 0.4 s of smoothing, so scrolling back runs it backwards and a flick never stacks
@@ -29,8 +33,8 @@
 // ---"); the fitted type stays unseen until it is measured with the face it is read in (capped), and refits when a face
 // lands or the width changes.
 //
-// The time is never rendered on the server: the first paint holds a stable placeholder (an unseen 00:00, an empty
-// marker) and the real time arrives after mount, so there is nothing to mismatch. It ticks on the minute.
+// With `clock` the time is never rendered on the server: the first paint holds a stable placeholder (an unseen 00:00,
+// an empty marker) and the real time arrives after mount, so there is nothing to mismatch. It ticks on the minute.
 // Reduced motion: the composed footer, no travel; the colon holds and the digits cut; hovers show a plain underline.
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode } from "react";
 import { gsap, ScrollTrigger, SplitText, useGSAP } from "../kit/gsap";
@@ -53,7 +57,10 @@ type Props = {
   /** The visiting address, one entry per line. */
   address: string[];
   city: string;
-  timeZone: string;
+  /** The city's live local time and the open marker computed from it. Off unless asked: one clock per site at most. */
+  clock?: boolean;
+  /** IANA zone for the clock. */
+  timeZone?: string;
   /** Opening hours: weekdays 1 (Monday) to 7 (Sunday), times as "9:00". */
   hours: { days: number[]; from: string; to: string };
   /** The closing line the columns variant opens with. */
@@ -145,10 +152,11 @@ function faceReady() {
   return Promise.race([fonts ?? Promise.resolve(), new Promise((res) => window.setTimeout(res, FONT_CAP))]);
 }
 
-/** The time now, only after mount (null on the server and the first paint), ticking on the minute. */
-function useNow() {
+/** The time now, only when `on` and only after mount (null on the server and the first paint), ticking on the minute. */
+function useNow(on: boolean) {
   const [now, setNow] = useState<Date | null>(null);
   useEffect(() => {
+    if (!on) return;
     let timer = 0;
     const tick = () => {
       const d = new Date();
@@ -166,8 +174,8 @@ function useNow() {
       window.clearTimeout(timer);
       document.removeEventListener("visibilitychange", onShow);
     };
-  }, []);
-  return now;
+  }, [on]);
+  return on ? now : null;
 }
 
 type Wall = { dow: number; h: number; m: number; hh: string; mm: string; date: string };
@@ -237,8 +245,9 @@ function OpenMark({ status }: { status: { open: boolean; text: string } | null }
   );
 }
 
-/** "Rotterdam 14:32": the city, and the local time once it is known (an unseen placeholder until then). */
-function CityTime({ city, wall }: { city: string; wall: Wall | null }) {
+/** "Rotterdam 14:32": the city, and with the clock its local time once it is known (an unseen placeholder until then). */
+function CityTime({ city, wall, clock }: { city: string; wall: Wall | null; clock: boolean }) {
+  if (!clock) return <span>{city}</span>;
   return (
     <span className="tabular-nums">
       {city}{" "}
@@ -309,7 +318,7 @@ function RollAddress({ email, parts, className = "", enter = false }: { email: s
                 </span>
               );
               return (
-                <span key={i} data-fc-ch="" style={{ "--d": `${((i / Math.max(1, total - 1)) * ROLL_SPAN).toFixed(3)}s` } as CSSProperties}>
+                <span key={i} data-fc-ch="" className="struq-char-mask" style={{ "--d": `${((i / Math.max(1, total - 1)) * ROLL_SPAN).toFixed(3)}s` } as CSSProperties}>
                   {enter ? <span data-fc-enter="">{roll}</span> : roll}
                 </span>
               );
@@ -355,7 +364,8 @@ export function FooterContact({
   phone,
   address,
   city,
-  timeZone,
+  clock = false,
+  timeZone = "Europe/Amsterdam",
   hours,
   line = "Zullen we een keer komen kijken?",
   links,
@@ -363,7 +373,7 @@ export function FooterContact({
   className = "",
 }: Props) {
   const root = useRef<HTMLElement>(null);
-  const now = useNow();
+  const now = useNow(clock);
   const { wall, status } = useWall(now, timeZone, hours);
   const known = wall !== null;
   const at = email.indexOf("@");
@@ -431,7 +441,7 @@ export function FooterContact({
       ro.disconnect();
       document.fonts?.removeEventListener?.("loadingdone", onFonts);
     };
-  }, [variant, email]);
+  }, [variant, email, city, clock]);
 
   // The clock refits once the real digits replace the placeholder.
   useEffect(() => {
@@ -661,42 +671,56 @@ export function FooterContact({
       <footer
         ref={root}
         data-footer-contact="clock"
-        className={`relative flex min-h-svh flex-col bg-surface-0 px-6 pb-6 pt-16 text-ink md:px-[3vw] md:pt-[10svh] ${className}`}
+        className={`relative flex min-h-svh flex-col bg-surface-0 px-sheet-margin pb-6 pt-16 text-ink md:pt-[10svh] ${className}`}
       >
         <div className="flex flex-wrap items-start justify-between gap-x-10 gap-y-4 text-body">
-          <p data-fc-soft="">
-            {studio}, {city}
-          </p>
-          <p data-fc-soft="" className="text-ink-muted">
-            <OpenMark status={status} />
-          </p>
+          <p data-fc-soft="">{clock ? `${studio}, ${city}` : studio}</p>
+          {clock ? (
+            <p data-fc-soft="" className="text-ink-muted">
+              <OpenMark status={status} />
+            </p>
+          ) : null}
         </div>
 
         <div className="flex flex-1 flex-col items-center justify-center py-[8svh]">
-          <p className="relative w-full text-center">
-            <span className="sr-only">{wall ? `Het is nu ${time} in ${city}.` : `De tijd in ${city}.`}</span>
-            <span aria-hidden data-fc-clock="" data-pending={known ? undefined : ""} className="font-display">
-              <span data-fc-hmask="">
-                <span data-fc-h="" className="block">
-                  {known ? digits(wall.hh) : "00"}
+          {clock ? (
+            <p className="relative w-full text-center">
+              <span className="sr-only">{wall ? `Het is nu ${time} in ${city}.` : `De tijd in ${city}.`}</span>
+              <span aria-hidden data-fc-clock="" data-pending={known ? undefined : ""} className="font-display">
+                <span data-fc-hmask="">
+                  <span data-fc-h="" className="block">
+                    {known ? digits(wall.hh) : "00"}
+                  </span>
                 </span>
-              </span>
-              <span data-fc-colon-wrap="">
-                <span ref={colon} data-fc-colon="">
-                  :
+                <span data-fc-colon-wrap="">
+                  <span ref={colon} data-fc-colon="">
+                    :
+                  </span>
+                </span>
+                <span data-fc-mmask="">
+                  <span data-fc-m="" className="block">
+                    {known ? digits(wall.mm) : "00"}
+                  </span>
                 </span>
               </span>
-              <span data-fc-mmask="">
-                <span data-fc-m="" className="block">
-                  {known ? digits(wall.mm) : "00"}
+              <noscript>
+                <span className="block font-display text-h2">{hoursText(hours)}</span>
+              </noscript>
+            </p>
+          ) : (
+            // Without the clock the city holds the centre at display size, sliding out of its mask as the hours do.
+            <p className="relative w-full text-center">
+              <span className="sr-only">{city}</span>
+              <span aria-hidden data-fc-clock="" className="font-display">
+                <span data-fc-hmask="">
+                  <span data-fc-h="" className="block">
+                    {city}
+                  </span>
                 </span>
               </span>
-            </span>
-            <noscript>
-              <span className="block font-display text-h2">{hoursText(hours)}</span>
-            </noscript>
-          </p>
-          <p data-fc-soft="" className="mt-4 text-body text-ink-muted">
+            </p>
+          )}
+          <p data-fc-soft="" hidden={!clock} className="mt-4 text-body text-ink-muted">
             <span data-fc-fade="" data-pending={known ? undefined : ""}>{wall ? cap(wall.date) : " "}</span>
           </p>
         </div>
@@ -717,7 +741,7 @@ export function FooterContact({
       <footer
         ref={root}
         data-footer-contact="columns"
-        className={`relative bg-surface-0 px-6 pb-6 pt-[14svh] text-ink md:px-[4vw] md:pt-[18svh] ${className}`}
+        className={`relative bg-surface-0 px-sheet-margin pb-6 pt-[14svh] text-ink md:pt-[18svh] ${className}`}
       >
         <h2 data-fc-split="" className="font-display max-w-[13ch] text-display">
           {line}
@@ -743,11 +767,13 @@ export function FooterContact({
               ))}
             </address>
             <p className="mt-4 text-body">
-              <CityTime city={city} wall={wall} />
-            </p>
-            <p className="mt-1 text-small text-ink-muted">
-              <OpenMark status={status} />
+              <CityTime city={city} wall={wall} clock={clock} />
             </p>
+            {clock ? (
+              <p className="mt-1 text-small text-ink-muted">
+                <OpenMark status={status} />
+              </p>
+            ) : null}
           </div>
           <div data-fc-soft="" className="md:col-span-2 md:col-start-11">
             <h3 className="text-small text-ink-muted">Volg ons</h3>
@@ -766,7 +792,7 @@ export function FooterContact({
     <footer
       ref={root}
       data-footer-contact="address"
-      className={`relative bg-surface-0 px-6 pb-6 pt-[14svh] text-ink md:px-[3vw] ${className}`}
+      className={`relative bg-surface-0 px-sheet-margin pb-6 pt-[14svh] text-ink ${className}`}
     >
       <div>
         <RollAddress email={email} parts={halves} enter className="font-display" />
@@ -778,8 +804,8 @@ export function FooterContact({
         </p>
         <p data-fc-soft="">{oneLine(address)}</p>
         <p data-fc-soft="" className="flex flex-wrap gap-x-4">
-          <CityTime city={city} wall={wall} />
-          <OpenMark status={status} />
+          <CityTime city={city} wall={wall} clock={clock} />
+          {clock ? <OpenMark status={status} /> : <span>{hoursText(hours)}</span>}
         </p>
         <div data-fc-soft="">{linkList("flex gap-x-5 text-ink")}</div>
         <p data-fc-soft="">{foot}</p>

package/skills/struq/blocks/footers/footer-reveal.tsx

@@ -257,7 +257,7 @@ export function FooterReveal({
         className={iris ? "scene-inverse" : "bg-surface-1 text-ink"}
       >
         {variant === "fold" ? <div data-fr-shade="" aria-hidden /> : null}
-        <div className="relative flex min-h-svh flex-col px-6 pb-6 pt-[max(4rem,11svh)] md:px-[3vw] md:pt-[max(4.5rem,13svh)]">
+        <div className="relative flex min-h-svh flex-col px-sheet-margin pb-6 pt-[max(4rem,11svh)] md:pt-[max(4.5rem,13svh)]">
           <div className={iris ? "flex flex-col items-center text-center" : ""}>
             <h2
               id={titleId}

package/skills/struq/blocks/headers/header-bar.tsx

@@ -12,8 +12,9 @@
 //           its place in the bar, and the links fade in beside it as it lands (a phone's "Menu" stays). The ground
 //           comes in only once it fits the bar. Scrolling back sets it large again. Hover draws a line from the side
 //           the pointer came in.
-//   split   three parts: wordmark left, the links centred, and the studio's place and live local time on the right;
-//           one line glides under the hovered link, and a thin rule under the bar fills with the page's progress.
+//   split   three parts: wordmark left, the links centred, and the studio's place on the right (with `clock`, its live
+//           local time beside it); one line glides under the hovered link, and a thin rule under the bar fills with
+//           the page's progress. The clock is off unless asked: one live clock per site at most.
 //
 // The bar turns its ink with what is under it, exactly at the edge, per pixel: it is drawn three times (ink for the
 // page ground, on-photo, on-inverse), each copy clipped to the stretches of the bar its own sections cover. Sections
@@ -88,6 +89,7 @@ type FaceProps = {
   menuHref: string;
   onMenu?: () => void;
   place: string;
+  clock: boolean;
   time: string | null;
   /** The copy's ground, for the copies only. */
   tone?: BarTone;
@@ -99,7 +101,7 @@ function Letters({ text }: { text: string }) {
   return (
     <>
       {Array.from(text).map((c, k) => (
-        <span key={k} data-hb-ch="" style={{ "--i": k } as CSSProperties}>
+        <span key={k} data-hb-ch="" className="struq-char-mask" style={{ "--i": k } as CSSProperties}>
           <span>{c}</span>
           <span>{c}</span>
         </span>
@@ -112,7 +114,7 @@ function Letters({ text }: { text: string }) {
  * The bar's face. Drawn once for real (links, transparent text once the copies show) and as aria-hidden copies in every
  * ink, so all of them lay out alike to the pixel.
  */
-function Face({ real = false, tone = "ground", variant, name, homeHref, links, action, menuHref, onMenu, place, time, bind }: FaceProps) {
+function Face({ real = false, tone = "ground", variant, name, homeHref, links, action, menuHref, onMenu, place, clock, time, bind }: FaceProps) {
   const n = links.length;
   const split = variant === "split";
   // Where the full bar starts: split needs the room for three parts.
@@ -147,7 +149,7 @@ function Face({ real = false, tone = "ground", variant, name, homeHref, links, a
   };
 
   const word = (
-    <span data-hb-wmask="" className="block">
+    <span data-hb-wmask="" className="struq-line-mask block">
       <span data-hb-wroll="" className="relative block">
         <span className="block">{name}</span>
         <span aria-hidden="true" className="absolute left-0 block">
@@ -181,7 +183,7 @@ function Face({ real = false, tone = "ground", variant, name, homeHref, links, a
   return (
     <div
       data-hb-face=""
-      className={`relative h-[var(--hb-h)] items-center gap-6 px-6 md:px-[3vw] ${split ? "grid grid-cols-[1fr_auto_1fr]" : "flex justify-between"}`}
+      className={`relative h-[var(--hb-h)] items-center gap-6 px-sheet-margin ${split ? "grid grid-cols-[1fr_auto_1fr]" : "flex justify-between"}`}
     >
       {real ? null : <div data-hb-ground="" aria-hidden="true" className={`absolute inset-0 ${TONE_GROUND[tone]}`} />}
       {real ? (
@@ -201,10 +203,15 @@ function Face({ real = false, tone = "ground", variant, name, homeHref, links, a
           </Nav>
           <div data-hb-fade="" className={`relative flex items-center gap-8 justify-self-end ${wide}`}>
             <span className="whitespace-nowrap text-small leading-none">
-              <span data-hb-place="">{place}</span>{" "}
-              <time data-hb-time="" data-pending={time ? undefined : ""} className="tabular-nums">
-                {time ?? "00:00"}
-              </time>
+              <span data-hb-place="">{place}</span>
+              {clock ? (
+                <>
+                  {" "}
+                  <time data-hb-time="" data-pending={time ? undefined : ""} className="tabular-nums">
+                    {time ?? "00:00"}
+                  </time>
+                </>
+              ) : null}
             </span>
             {act}
           </div>
@@ -265,6 +272,7 @@ export function HeaderBar({
   menuHref = "#menu",
   onMenu,
   place = "Rotterdam",
+  clock = false,
   timeZone = "Europe/Amsterdam",
   startTone = "ground",
 }: {
@@ -280,15 +288,18 @@ export function HeaderBar({
   menuHref?: string;
   /** Opens the site's menu (the menu curtain); the phone's "Menu" is then a button. */
   onMenu?: () => void;
-  /** split: the place whose local time the bar keeps. */
+  /** split: the studio's place, on the right of the bar. */
   place?: string;
+  /** split: the place's live local time beside it. Off unless asked: one live clock per site at most. */
+  clock?: boolean;
+  /** IANA zone for the clock. */
   timeZone?: string;
   /** The ground under the bar on the first paint, before the script measures it (the hero's, usually "photo"). */
   startTone?: BarTone;
 }) {
   const root = useRef<HTMLDivElement>(null);
   const api = useRef<{ hot: (i: number, on: boolean, from?: "left" | "right") => void; focus: (on: boolean) => void } | null>(null);
-  const time = useWallTime(variant === "split", timeZone);
+  const time = useWallTime(variant === "split" && clock, timeZone);
 
   const bind = (i: number) => ({
     onPointerEnter: (e: PointerEvent<HTMLElement>) => {
@@ -618,7 +629,7 @@ export function HeaderBar({
     { scope: root, dependencies: [variant, links.length] },
   );
 
-  const face = { variant, name, homeHref, links, action, menuHref, onMenu, place, time };
+  const face = { variant, name, homeHref, links, action, menuHref, onMenu, place, clock, time };
 
   return (
     <div ref={root} data-header-bar={variant} data-start={startTone} style={{ "--hb-adv": advanceEm(name).toFixed(3) } as CSSProperties}>

package/skills/struq/blocks/headers/menu-curtain.tsx

@@ -3,7 +3,7 @@
 // A minimal bar: the wordmark on the left, one button on the right that reads "Menu" and rolls to "Sluiten". The menu
 // opens as a curtain in the language of one of the page transitions, the links rise in a stagger through their masks,
 // the hovered or focused link shows its photo on the menu's calm side, and a foot line carries the contact line and
-// the studio's local time. It closes the same way, reversed: every part moves from where it is to where it is going,
+// the studio's place (with `clock`, its live local time; off unless asked, one live clock per site at most). It closes the same way, reversed: every part moves from where it is to where it is going,
 // so a close overtaken by an open turns round instead of starting over.
 //
 //   gate    a line draws from the middle of the screen and the menu opens from it, two edges parting up and down;
@@ -125,7 +125,7 @@ function BarFace({
     </>
   );
   return (
-    <div className="flex h-[var(--menu-bar-h)] items-center justify-between gap-6 px-6 md:px-[3vw]">
+    <div className="flex h-[var(--menu-bar-h)] items-center justify-between gap-6 px-sheet-margin">
       {real ? (
         <a href={homeHref} className={word}>
           {name}
@@ -169,6 +169,7 @@ export function MenuCurtain({
   items,
   contact,
   place = "Rotterdam",
+  clock = false,
   timeZone = "Europe/Amsterdam",
   startTone = "ground",
 }: {
@@ -180,8 +181,11 @@ export function MenuCurtain({
   items: MenuItem[];
   /** The foot line's contact: a mailto, a phone or a page. */
   contact: { label: string; href: string };
-  /** The place whose local time the foot line keeps. */
+  /** The studio's place, on the foot line. */
   place?: string;
+  /** The place's live local time beside it. Off unless asked: one live clock per site at most. */
+  clock?: boolean;
+  /** IANA zone for the clock. */
   timeZone?: string;
   /** The ground under the bar on the first paint, before the script measures it (the hero's, usually "photo"). */
   startTone?: BarTone;
@@ -198,13 +202,15 @@ export function MenuCurtain({
   const [time, setTime] = useState("");
   const menuId = useId();
 
+  // The clock, only when asked: empty on the server and the first paint, set after mount.
   useEffect(() => {
+    if (!clock) return;
     const fmt = new Intl.DateTimeFormat("nl-NL", { hour: "2-digit", minute: "2-digit", timeZone });
     const tick = () => setTime(fmt.format(new Date()));
     tick();
     const id = window.setInterval(tick, 15000);
     return () => window.clearInterval(id);
-  }, [timeZone]);
+  }, [clock, timeZone]);
 
   /** Holds the page still and inert while the menu is open; the undo runs on every way out, unmount included. */
   const hold = useCallback(() => {
@@ -642,10 +648,10 @@ export function MenuCurtain({
   const face = { name, homeHref, items };
   const frameBox =
     variant === "gate"
-      ? "right-[3vw] top-1/2 aspect-[4/5] h-[min(58svh,40vw)] -translate-y-1/2"
+      ? "right-sheet-margin top-1/2 aspect-[4/5] h-[min(58svh,40vw)] -translate-y-1/2"
       : variant === "slices"
-        ? "bottom-[4.5rem] right-[3vw] top-[var(--menu-bar-h)] left-[calc(75cqw+1.5rem)]"
-        : "right-[13vw] top-1/2 aspect-[4/5] h-[min(46svh,30vw)] -translate-y-1/2";
+        ? "bottom-[4.5rem] right-sheet-margin top-[var(--menu-bar-h)] left-[calc(75cqw+1.5rem)]"
+        : "right-[13vw] top-1/2 aspect-[4/5] h-[min(46svh,30vw)] -translate-y-1/2"; // sheet-allow: the stack frame floats inside the page, a composition offset
   const frameSizes = variant === "gate" ? "32vw" : "24vw";
   const frameStart = variant === "gate" ? "inset(50% 0px 50% 0px)" : EMPTY;
 
@@ -724,7 +730,8 @@ export function MenuCurtain({
         <nav aria-label="Menu" className="absolute inset-0">
           <ul
             data-menu-list=""
-            className={`absolute bottom-[4.5rem] left-6 top-[var(--menu-bar-h)] m-0 flex list-none flex-col justify-end p-0 pb-[4svh] md:left-[3vw] md:justify-center md:pb-0 ${variant === "slices" ? "md:right-[calc(25cqw+1.5rem)]" : "md:right-[45vw]"}`}
+            // sheet-allow: the list's right bound at 45vw leaves the frame its side, a composition offset
+            className={`absolute bottom-[4.5rem] left-sheet-margin top-[var(--menu-bar-h)] m-0 flex list-none flex-col justify-end p-0 pb-[4svh] md:justify-center md:pb-0 ${variant === "slices" ? "md:right-[calc(25cqw+1.5rem)]" : "md:right-[45vw]"}`}
           >
             {items.map((item, i) => (
               <li key={item.label}>
@@ -736,7 +743,7 @@ export function MenuCurtain({
                   onClick={onLink}
                   className="inline-block font-display text-[min(15.5vw,9svh)] leading-[1.02] tracking-[-0.03em] md:text-[min(7.2vw,11svh)]"
                 >
-                  <span className="struq-line-mask block overflow-hidden">
+                  <span className="struq-line-mask block">
                     <span data-rise="" className="block" style={{ transform: "translate3d(0, 110%, 0)" }}>
                       {item.label}
                     </span>
@@ -768,14 +775,20 @@ export function MenuCurtain({
 
           <div
             data-foot=""
-            className="absolute inset-x-0 bottom-0 flex items-baseline justify-between gap-6 px-6 pb-5 text-small text-[var(--on-menu-muted)] md:px-[3vw] md:pb-6"
+            className="absolute inset-x-0 bottom-0 flex items-baseline justify-between gap-6 px-sheet-margin pb-5 text-small text-[var(--on-menu-muted)] md:pb-6"
             style={{ opacity: 0 }}
           >
             <a href={contact.href} className="underline-offset-4 hover:underline">
               {contact.label}
             </a>
             <span>
-              {place} <span className="tabular-nums">{time}</span>
+              {place}
+              {clock ? (
+                <>
+                  {" "}
+                  <span className="tabular-nums">{time}</span>
+                </>
+              ) : null}
             </span>
           </div>
         </nav>

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

@@ -21,7 +21,11 @@
 // Lead for a photographer, a gallery, an architect, an atelier: any brief where one image carries the work.
 //
 // <HeroFramed image={images.hero[1]} name="Noord" line="Architectuur en bouw" place="Rotterdam, sinds 2011"
-//   caption="Binnenplaats met olijf, 2024" heading={["Ruimte die", "het licht volgt."]} lead="..." />
+//   caption="Binnenplaats met olijf, 2024" heading={["Ruimte die", "het licht volgt."]} accent="licht" lead="..." />
+//
+// `accent` (optional) is the site's one accent word: where it first stands in the heading (the line on the open
+// photograph) it is set in the pairing's italic accent face, inside its line's mask, as the Statement and the Close
+// set the same word. Left out, or not in the heading, the heading is exactly as it was.
 //
 // Phones: the frame larger (about 80% of the width), the label under it, the entrance only; the next line follows
 // on the ground. Reduced motion and pages without scripts: the composed wall, then the line.
@@ -37,6 +41,7 @@
 //   ink, with no veil.
 import Image from "next/image";
 import { useRef } from "react";
+import { accentLines } from "../kit/accent";
 import { gsap, useGSAP } from "../kit/gsap";
 import type { StruqImage } from "../kit/images";
 import { photoLuminances } from "../kit/photo-read";
@@ -64,6 +69,9 @@ type Props = {
   caption?: string;
   /** The next line of copy, standing on the open photograph; one entry per line. */
   heading: string[];
+  /** The site's one accent word: where it first stands in the heading it is set in the pairing's italic accent face
+   * (--face-accent), as the Statement and the Close set it. A word the heading does not hold changes nothing. */
+  accent?: string;
   /** One sentence under it. */
   lead?: string;
   className?: string;
@@ -121,31 +129,32 @@ const LAYOUT: Record<HeroFramedVariant, { vars: Record<string, string>; frame: s
     frame:
       "md:absolute md:left-[calc(50%_-_var(--hf-fw)/2)] md:top-[calc(50%_-_var(--hf-fh)/2)] md:mx-0 md:aspect-auto md:h-[var(--hf-fh)] md:w-[var(--hf-fw)]",
     photo: "md:left-[calc(var(--hf-fw)/2_-_50vw)] md:top-[calc(var(--hf-fh)/2_-_50svh)]",
-    label: "md:absolute md:bottom-[calc(50%_-_var(--hf-fh)/2)] md:left-[calc(50%_+_var(--hf-fw)/2_+_3vw)] md:right-[4vw] md:mt-0",
+    label: "md:absolute md:bottom-[calc(50%_-_var(--hf-fh)/2)] md:left-[calc(50%_+_var(--hf-fw)/2_+_3vw)] md:right-sheet-margin md:mt-0",
     name: "clamp(2.25rem, 1rem + 2.4vw, 3.5rem)",
   },
   portret: {
     // A 3:4 portrait, about three quarters of the screen's height, hung a little high at the right edge.
     vars: { "--hf-fw": "min(36vw, 57svh)", "--hf-fh": "calc(var(--hf-fw) / 0.75)" },
     frame:
+      // sheet-allow: the print hangs 6vw in from the wall's edge, its own distance; the registration below follows it
       "md:absolute md:right-[6vw] md:top-[calc(50%_-_var(--hf-fh)/2_-_3svh)] md:z-[1] md:mx-0 md:aspect-auto md:h-[var(--hf-fh)] md:w-[var(--hf-fw)]",
     photo: "md:left-[calc(var(--hf-fw)_+_6vw_-_100vw)] md:top-[calc(var(--hf-fh)/2_+_3svh_-_50svh)]",
     label:
-      "md:absolute md:bottom-[calc(50%_-_var(--hf-fh)/2_+_3svh)] md:left-[6vw] md:right-[calc(10vw_+_var(--hf-fw))] md:mt-0",
+      "md:absolute md:bottom-[calc(50%_-_var(--hf-fh)/2_+_3svh)] md:left-sheet-margin md:right-[calc(10vw_+_var(--hf-fw))] md:mt-0",
     name: "clamp(4.5rem, 1rem + 11vw, 16rem)",
   },
   passe: {
     // The print inside a thin mat of the ground, the mat wider at the foot where the label sits. It steps back to a
     // 4:5 portrait (--hf-tw by --hf-th) at the left, standing in the middle of the screen's height.
     vars: { "--hf-tw": "min(30vw, 52svh)", "--hf-th": "calc(var(--hf-tw) * 1.25)" },
-    frame: "md:absolute md:inset-x-[4vw] md:bottom-[18svh] md:top-[5svh] md:mx-0 md:aspect-auto md:w-auto",
-    photo: "md:-left-[4vw] md:-top-[5svh]",
-    label: "md:absolute md:bottom-[3svh] md:right-[4vw] md:mt-0 md:w-[34vw] md:text-right",
+    frame: "md:absolute md:inset-x-sheet-margin md:bottom-[18svh] md:top-[5svh] md:mx-0 md:aspect-auto md:w-auto",
+    photo: "md:-left-sheet-margin md:-top-[5svh]",
+    label: "md:absolute md:bottom-[3svh] md:right-sheet-margin md:mt-0 md:w-[34vw] md:text-right",
     name: "clamp(1.75rem, 0.8rem + 1.6vw, 2.75rem)",
   },
 };
 
-export function HeroFramed({ variant = "wand", image, name, line, place, caption, heading, lead, className = "" }: Props) {
+export function HeroFramed({ variant = "wand", image, name, line, place, caption, heading, accent, lead, className = "" }: Props) {
   const lay = LAYOUT[variant] ?? LAYOUT.wand;
   const back = variant === "passe";
   const stage = useRef<HTMLElement>(null);
@@ -445,7 +454,7 @@ export function HeroFramed({ variant = "wand", image, name, line, place, caption
     { scope: stage, dependencies: [name, image.src, variant] },
   );
 
-  const mask = "block overflow-hidden pb-[0.18em] -mb-[0.18em]";
+  const mask = "struq-line-mask block";
   const grade = "object-cover [filter:saturate(0.92)_contrast(1.04)]";
   // Inline: the kit balances display type, which must not wrap the label's name; no transition, so the fit reads a
   // settled size.
@@ -486,15 +495,16 @@ export function HeroFramed({ variant = "wand", image, name, line, place, caption
       data-hf-copy={overlay ? "" : undefined}
       className={
         overlay
-          ? `absolute bottom-[10svh] max-w-[44rem] px-[5vw] group-data-[pos=top]/hf:bottom-auto group-data-[pos=top]/hf:top-[10svh] ${ink} group-data-[side=right]/hf:right-0 group-data-[side=right]/hf:text-right group-data-[side=left]/hf:left-0`
+          ? `absolute bottom-[10svh] max-w-[44rem] px-sheet-margin group-data-[pos=top]/hf:bottom-auto group-data-[pos=top]/hf:top-[10svh] ${ink} group-data-[side=right]/hf:right-0 group-data-[side=right]/hf:text-right group-data-[side=left]/hf:left-0`
           : at === "wall"
-            ? "absolute left-[calc(12vw_+_var(--hf-tw))] right-[6vw] top-1/2 -translate-y-1/2 text-ink"
-            : "px-6 pb-20 pt-6 text-ink md:px-[8vw] md:pb-[14svh]"
+            ? // sheet-allow: beside the stepped-back print, mirroring its 6vw from the wall
+              "absolute left-[calc(12vw_+_var(--hf-tw))] right-[6vw] top-1/2 -translate-y-1/2 text-ink"
+            : "px-sheet-margin pb-20 pt-6 text-ink md:pb-[14svh]"
       }
     >
       <h2 className="m-0 font-display text-[clamp(2.5rem,1rem_+_4.4vw,6.5rem)] leading-[0.95] tracking-[-0.03em]">
-        {heading.map((h) => (
-          <span key={h} className={mask}>
+        {accentLines(heading, accent).map((h, i) => (
+          <span key={heading[i]} className={mask}>
             <span data-hf-copy-rise={moves ? "" : undefined} className="block">
               {h}
             </span>
@@ -502,12 +512,14 @@ export function HeroFramed({ variant = "wand", image, name, line, place, caption
         ))}
       </h2>
       {lead ? (
-        <p className="m-0 mt-6 overflow-hidden text-lead">
-          <span
-            data-hf-copy-rise={moves ? "" : undefined}
-            className={`block max-w-[36ch] ${overlay ? "group-data-[side=right]/hf:ml-auto group-data-[strong]/hf:text-[1.2em] group-data-[strong]/hf:font-medium" : "text-ink-muted"}`}
-          >
-            {lead}
+        <p className="m-0 mt-6 text-lead">
+          <span className="struq-line-mask block">
+            <span
+              data-hf-copy-rise={moves ? "" : undefined}
+              className={`block max-w-[36ch] ${overlay ? "group-data-[side=right]/hf:ml-auto group-data-[strong]/hf:text-[1.2em] group-data-[strong]/hf:font-medium" : "text-ink-muted"}`}
+            >
+              {lead}
+            </span>
           </span>
         </p>
       ) : null}
@@ -539,7 +551,7 @@ export function HeroFramed({ variant = "wand", image, name, line, place, caption
         <span data-ink="dark" className="text-[var(--hf-dark)]" />
       </span>
 
-      <div data-hf-wall="" className="relative px-6 pb-14 pt-[12svh] md:h-svh md:overflow-hidden md:p-0">
+      <div data-hf-wall="" className="relative px-sheet-margin pb-14 pt-[12svh] md:h-svh md:overflow-hidden md:p-0">
         {/* The frame: the box a stack preloader lands on, the photograph inside it registered to the screen. */}
         <div
           data-hf-frame=""
@@ -577,6 +589,7 @@ export function HeroFramed({ variant = "wand", image, name, line, place, caption
           <div
             data-hf-to=""
             aria-hidden
+            // sheet-allow: the stepped-back print hangs 6vw in from the wall's edge, a composition offset
             className="pointer-events-none invisible absolute left-[6vw] top-[calc(50%_-_var(--hf-th)/2)] hidden h-[var(--hf-th)] w-[var(--hf-tw)] md:block"
           />
         ) : null}