@atelic-action/ui 3.5.0 → 3.7.0

package/README.md

@@ -98,7 +98,7 @@ Every export, grouped by the entry it is imported from. The gallery column links
 | `SocialStrip` | `@atelic-action/ui/sections` | A static grid of the business's social photos linking to the profile, never a live embed | [#social-strip](https://ui.atelic.me/#social-strip) |
 | `SplitSection` | `@atelic-action/ui/sections` | The two column band: copy beside copy, or media beside copy | [#split-section](https://ui.atelic.me/#split-section) |
 | `SiteConfig` and its member types, `formatClock`, `formatHoursRange`, `isClosed`, `isHoneypotFilled`, `trackEvent` | `@atelic-action/ui/sections` | The site contract the sections read, and the hours, honeypot, and lead event helpers | none |
-| `ImageFrame`, `ProseBlocks`, `QuoteCard`, `StarRow`, `TickList` | `@atelic-action/ui/primitives` | The marketing primitives: a framed image, prose blocks, a quote card, a row of filled stars, a tick list | [#marketing-primitives](https://ui.atelic.me/#marketing-primitives) |
+| `ImageFrame`, `ProseBlocks`, `QuoteCard`, `StarRow`, `TickList` | `@atelic-action/ui/primitives` | The marketing primitives: a framed image, prose blocks (headings at two levels, paragraphs, lists, and figures: small captioned tiles in rows, an image or a silent looping clip played only while on screen, each opening large in a dialog), a quote card, a row of filled stars, a tick list | [#marketing-primitives](https://ui.atelic.me/#marketing-primitives) |
 | `SiteShell` | `@atelic-action/ui/chrome` | A marketing page's whole chrome: skip link, header, main, footer, sticky bar, mounting the base path provider | none |
 | `BasePathProvider`, `useBasePath`, `useWithBase`, `joinBase`, `stripBase`, `hasBase`, `normalizeBasePath` | `@atelic-action/ui/routing` | The base path a site is served under, read by Button, Chip, and every section that builds a link | none |
 | `joinBase`, `stripBase`, `hasBase`, `normalizeBasePath` | `@atelic-action/ui/routing/base-path` | The same four pure helpers, built, for what Node runs (a Playwright spec, a script) | none |
@@ -405,6 +405,7 @@ The package installs the scripts every artifact site used to carry as files, so
 | `atelic-seal-document <config.json> [out.json]` | Seals a document into the payload that `@atelic-action/artifact`'s `Gate` reads, one wrapped key for each reader. The payload names no one: no address, and readers numbered `r1`, `r2` whatever the config calls them | `seal` |
 | `atelic-clean-sitemap` | Strips fragment and trailing slash duplicates out of `dist/client/sitemap.xml`; says so and passes when a based build wrote none | A marketing site's `build`, after vite |
 | `atelic-check-base-path` | Fails the build when a root path in `dist/client` lacks the base path, or `vercel.json` lacks (or strays from) the two rewrites a based cut needs; a `VITE_BASE_PATH` rehearsal only warns about `vercel.json` off Vercel | Last step of a marketing site's `build` |
+| `atelic-check-images` | Fails the build when `public/images` holds an image over 250 KB, a PNG over 64 KB, or a JPEG that is not a sharing card (`og.jpg` or `<name>-og.jpg`): every photo ships as WebP at about 2x its rendered width (template-marketing's CLAUDE.md, Image budget) | First step of a marketing site's `build` |
 | `atelic-contact-canary` | Posts a token bearing test message to `$SITE_URL/api/contact` and passes only on a Resend id and the expected destination (`CONTACT_EXPECTED_TO`, `CONTACT_CANARY_TOKEN`); a `.invalid` `SITE_URL` is the off switch | `check:contact`, run daily by the canary workflow |
 
 A site's scripts, whole:

package/bin/atelic-check-images.ts

@@ -0,0 +1,5 @@
+#!/usr/bin/env bun
+// atelic-check-images: fails a build whose public/images holds a photo over budget or a JPEG that is not a sharing card.
+import { main } from "../src/scripts/check-images";
+
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "3.5.0",
+	"version": "3.7.0",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, the component library, the access gate, and the app shell they install",
 	"type": "module",
 	"license": "UNLICENSED",
@@ -19,6 +19,7 @@
 	"bin": {
 		"atelic-check-access": "./bin/atelic-check-access.ts",
 		"atelic-check-base-path": "./bin/atelic-check-base-path.ts",
+		"atelic-check-images": "./bin/atelic-check-images.ts",
 		"atelic-check-links": "./bin/atelic-check-links.ts",
 		"atelic-check-wall": "./bin/atelic-check-wall.ts",
 		"atelic-clean-sitemap": "./bin/atelic-clean-sitemap.ts",

package/src/primitives/ProseBlocks.tsx

@@ -1,15 +1,251 @@
+import { X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useWithBase } from "../routing/BasePathProvider";
+
 /**
- * One block of ported prose. A deliberately tiny vocabulary — headings,
- * paragraphs, lists — because that is what survives extraction from a CMS
- * intact, and because anything richer invites rewriting content that was
- * meant to be carried across verbatim.
+ * One block of prose carried as data. A deliberately tiny vocabulary:
+ * headings, paragraphs, lists, and a figure, because that is what survives
+ * extraction from a CMS intact, and because anything richer invites rewriting
+ * content that was meant to be carried across verbatim.
  */
 export interface ProseBlock {
-	type: "h" | "p" | "ul";
+	type: "h" | "p" | "ul" | "figure";
 	/** Present for "h" and "p". */
 	text?: string;
+	/**
+	 * For "h": the heading's level under the page's own h1, where the
+	 * component's `headingLevel` is the default. A post with sections and
+	 * sub sections marks the sub sections 3 and leaves the rest alone.
+	 */
+	level?: 2 | 3;
 	/** Present for "ul". */
 	items?: string[];
+	/**
+	 * Present for "figure": the file the figure shows. A `.mp4` or `.webm`
+	 * plays as a silent loop (a short clip of an exercise, say), anything
+	 * else is an image. Both load lazily, since a figure sits in running prose
+	 * below the fold.
+	 */
+	src?: string;
+	/** For "figure": what the figure shows, for a reader who cannot see it. */
+	alt?: string;
+	/** For "figure": a line under it. */
+	caption?: string;
+	/**
+	 * For "figure": the file's own width and height in pixels. With both, the
+	 * tile keeps the file's shape at the row's height and holds it before the
+	 * file arrives (no layout shift); without them it is 4 by 5.
+	 */
+	width?: number;
+	height?: number;
+	/** For a clip: a still shown until it plays, and to a reader who prefers reduced motion. */
+	poster?: string;
+}
+
+const CLIP = /\.(mp4|webm)([?#].*)?$/i;
+
+/** A tile keeps its file's shape; the row sets its height. */
+function tileStyle(width?: number, height?: number) {
+	return { aspectRatio: width && height ? `${width} / ${height}` : "4 / 5" };
+}
+
+/**
+ * A silent looping clip. It plays only while it is on screen and pauses when
+ * it leaves, and it fetches nothing until it first comes into view, so a post
+ * with a clip beside every exercise costs nothing up front. A reader who asked
+ * for reduced motion gets it still, with controls to start it.
+ */
+function Clip({
+	src,
+	alt,
+	poster,
+	inTile = false,
+}: {
+	src: string;
+	alt?: string;
+	poster?: string;
+	/** Inside a button, where native controls would nest interactive content; the lightbox has them. */
+	inTile?: boolean;
+}) {
+	const ref = useRef<HTMLVideoElement>(null);
+	const [still, setStill] = useState(false);
+	useEffect(() => {
+		const video = ref.current;
+		if (!video) return;
+		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+			setStill(true);
+			return;
+		}
+		// A pause that interrupts a pending play rejects it with an AbortError;
+		// that is the reader scrolling past, not autoplay being refused.
+		let observer: IntersectionObserver | undefined;
+		const play = () =>
+			video.play()?.catch((err: unknown) => {
+				if ((err as { name?: string } | null)?.name === "AbortError") return;
+				// Autoplay refused: hand the clip to the reader and stop steering it.
+				setStill(true);
+				observer?.disconnect();
+			});
+		if (typeof IntersectionObserver === "undefined") {
+			play();
+			return;
+		}
+		observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[entries.length - 1]?.isIntersecting) play();
+				else video.pause();
+			},
+			{ rootMargin: "200px 0px" },
+		);
+		observer.observe(video);
+		return () => observer?.disconnect();
+	}, []);
+	return (
+		// biome-ignore lint/a11y/useMediaCaption: a silent loop has no audio to caption; the figcaption and aria-label carry the words
+		<video
+			ref={ref}
+			src={src}
+			poster={poster}
+			aria-label={alt}
+			loop
+			muted
+			playsInline
+			controls={still && !inTile}
+			// A still clip never plays, so without a poster it needs its first frame loaded.
+			preload={still && !poster ? "metadata" : "none"}
+		/>
+	);
+}
+
+/**
+ * One figure: a small tile, the caption laid over its foot, that opens the
+ * file large in a modal dialog. The platform's dialog gives Escape, focus
+ * containment, and focus return to the tile; a click on the backdrop closes
+ * it too. The large clip mounts only while the dialog is open, so it costs
+ * nothing until a reader asks for it.
+ */
+function Figure({ block, withBase }: { block: ProseBlock; withBase: (path: string) => string }) {
+	const dialogRef = useRef<HTMLDialogElement>(null);
+	const [open, setOpen] = useState(false);
+	const src = block.src ? withBase(block.src) : "";
+	const poster = block.poster ? withBase(block.poster) : undefined;
+	const clip = CLIP.test(src);
+	// The description names the tile; the caption is laid over it and read from the figcaption.
+	const label = block.alt || block.caption || "Figure";
+	// A reader who asked for reduced motion gets the large clip still, with controls.
+	const [reduceMotion, setReduceMotion] = useState(false);
+
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (open && !dialog.open) dialog.showModal();
+		if (!open && dialog.open) dialog.close();
+	}, [open]);
+
+	if (!src) {
+		return (
+			<figure className="pb-figure">
+				<div className="ph" style={tileStyle(block.width, block.height)}>
+					{block.alt ?? "Figure"}
+				</div>
+				{block.caption ? <figcaption className="pb-caption">{block.caption}</figcaption> : null}
+			</figure>
+		);
+	}
+
+	return (
+		<figure className="pb-figure">
+			{/* biome-ignore lint/a11y/useKeyWithClickEvents: the backdrop click is a pointer shortcut; the dialog closes on Escape natively and has a close button */}
+			<dialog
+				ref={dialogRef}
+				className="pb-lightbox"
+				aria-label={label}
+				onClose={() => setOpen(false)}
+				onClick={(event) => {
+					// A click that lands outside the panel's box is a click on the backdrop; the
+					// panel's own padding and blank areas also target the dialog, so test coordinates.
+					if (event.target !== event.currentTarget) return;
+					const box = event.currentTarget.getBoundingClientRect();
+					const outside =
+						event.clientX < box.left ||
+						event.clientX > box.right ||
+						event.clientY < box.top ||
+						event.clientY > box.bottom;
+					if (outside) setOpen(false);
+				}}
+			>
+				<button
+					type="button"
+					className="pb-lightbox-close"
+					aria-label="Close"
+					onClick={() => setOpen(false)}
+				>
+					<X size={20} strokeWidth={2} aria-hidden="true" />
+				</button>
+				{open ? (
+					clip ? (
+						// biome-ignore lint/a11y/useMediaCaption: a silent loop has no audio to caption; the caption below carries the words
+						<video
+							src={src}
+							poster={poster}
+							aria-label={block.alt}
+							width={block.width}
+							height={block.height}
+							autoPlay={!reduceMotion}
+							loop
+							muted
+							playsInline
+							controls
+						/>
+					) : (
+						<img src={src} alt={block.alt ?? ""} width={block.width} height={block.height} />
+					)
+				) : null}
+				{open && block.caption ? <p className="pb-lightbox-caption">{block.caption}</p> : null}
+			</dialog>
+			<button
+				type="button"
+				className="pb-tile"
+				style={tileStyle(block.width, block.height)}
+				aria-label={`Open larger: ${label}`}
+				onClick={() => {
+					setReduceMotion(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false);
+					setOpen(true);
+				}}
+			>
+				{clip ? (
+					<Clip src={src} alt={block.alt} poster={poster} inTile />
+				) : (
+					<img
+						src={src}
+						alt={block.alt ?? ""}
+						width={block.width}
+						height={block.height}
+						loading="lazy"
+						decoding="async"
+					/>
+				)}
+			</button>
+			{block.caption ? <figcaption className="pb-caption">{block.caption}</figcaption> : null}
+		</figure>
+	);
+}
+
+/** Runs of consecutive figures become one row of tiles; everything else stands alone. */
+function segments(blocks: ProseBlock[]) {
+	const out: Array<
+		{ figures: ProseBlock[]; start: number } | { block: ProseBlock; index: number }
+	> = [];
+	blocks.forEach((block, index) => {
+		const last = out[out.length - 1];
+		if (block.type === "figure") {
+			if (last && "figures" in last) last.figures.push(block);
+			else out.push({ figures: [block], start: index });
+		} else {
+			out.push({ block, index });
+		}
+	});
+	return out;
 }
 
 export interface ProseBlocksProps {
@@ -33,15 +269,31 @@ export interface ProseBlocksProps {
  */
 export function ProseBlocks({ blocks, headingLevel = "h2", className }: ProseBlocksProps) {
 	const Heading = headingLevel;
+	const withBase = useWithBase();
 	return (
 		<div className={["prose-blocks", className].filter(Boolean).join(" ")}>
-			{blocks.map((block, i) => {
+			{segments(blocks).map((segment) => {
+				if ("figures" in segment) {
+					return (
+						<div className="pb-figures" key={`figures-${segment.start}`}>
+							{segment.figures.map((block, j) => (
+								// biome-ignore lint/suspicious/noArrayIndexKey: static prose; position plus file is the stable key (see above)
+								<Figure block={block} withBase={withBase} key={`figure-${j}-${block.src ?? ""}`} />
+							))}
+						</div>
+					);
+				}
+				const { block, index: i } = segment;
 				if (block.type === "h") {
+					const Tag = block.level ? (`h${block.level}` as const) : Heading;
 					return (
-						// biome-ignore lint/suspicious/noArrayIndexKey: static ported prose; position plus content is the stable key (see above)
-						<Heading className="pb-heading" key={`h-${i}-${block.text?.slice(0, 24)}`}>
+						<Tag
+							className={["pb-heading", block.level === 3 ? "pb-h3" : ""].filter(Boolean).join(" ")}
+							// biome-ignore lint/suspicious/noArrayIndexKey: static ported prose; position plus content is the stable key (see above)
+							key={`h-${i}-${block.text?.slice(0, 24)}`}
+						>
 							{block.text}
-						</Heading>
+						</Tag>
 					);
 				}
 				if (block.type === "ul") {

package/src/scripts/check-images.ts

@@ -0,0 +1,96 @@
+/**
+ * Fails the build when a photo in public/images is over the house budget or
+ * ships as JPEG where WebP belongs. The rule is template-marketing's CLAUDE.md,
+ * Image budget: every photo ships as WebP at quality about 75, sized to about
+ * 2x its rendered width, and the Open Graph cards alone stay JPEG, because
+ * some link previews still will not read WebP. A card is any JPEG whose file
+ * name is `og` or ends in `-og`.
+ *
+ * Usage: atelic-check-images   (from the site's root)
+ * Exits 1 on any problem.
+ */
+import { existsSync, readdirSync, statSync } from "node:fs";
+import { join, resolve } from "node:path";
+
+/** Where a site keeps the images it serves, from the site's root. */
+export const IMAGES_ROOT = "public/images";
+
+/** The most any one image may weigh, in bytes. */
+export const IMAGE_BUDGET = 250 * 1024;
+
+/** A PNG past this is a photo saved in the wrong format; a mark or a logo is far smaller. */
+export const PNG_BUDGET = 64 * 1024;
+
+export interface ImageFile {
+	/** The path from the site's root. */
+	path: string;
+	bytes: number;
+}
+
+export interface ImageReport {
+	checked: number;
+	problems: string[];
+}
+
+const CARD = /(^|\/)([\w-]+-)?og\.jpe?g$/i;
+
+/** Whether a JPEG is a sharing card, the one place JPEG still belongs. */
+export function isCard(path: string): boolean {
+	return CARD.test(path);
+}
+
+const kb = (bytes: number) => `${Math.round(bytes / 1024)} KB`;
+
+/** The audit, kept pure so it can be tested without a site. */
+export function auditImages(files: ImageFile[]): ImageReport {
+	const problems: string[] = [];
+	for (const file of files) {
+		const lower = file.path.toLowerCase();
+		if (/\.jpe?g$/.test(lower) && !isCard(file.path)) {
+			problems.push(
+				`${file.path} ships as JPEG (${kb(file.bytes)}); convert it to WebP, or name it og.jpg or <name>-og.jpg if it is a sharing card`,
+			);
+		}
+		if (lower.endsWith(".png") && file.bytes > PNG_BUDGET) {
+			problems.push(
+				`${file.path} is a ${kb(file.bytes)} PNG; a photo ships as WebP, and a mark or a logo stays under ${kb(PNG_BUDGET)}`,
+			);
+		}
+		if (file.bytes > IMAGE_BUDGET) {
+			problems.push(
+				`${file.path} weighs ${kb(file.bytes)}, over the ${kb(IMAGE_BUDGET)} budget; size it to about 2x its rendered width at quality about 75`,
+			);
+		}
+	}
+	return { checked: files.length, problems };
+}
+
+const IMAGE = /\.(webp|avif|jpe?g|png|gif|svg)$/i;
+
+function imageFiles(dir: string, root: string): ImageFile[] {
+	return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+		const path = join(dir, entry.name);
+		if (entry.isDirectory()) return imageFiles(path, root);
+		if (!IMAGE.test(entry.name)) return [];
+		return [{ path: join(IMAGES_ROOT, path.slice(root.length + 1)), bytes: statSync(path).size }];
+	});
+}
+
+/** The command: audits the images of the site in `cwd`. */
+export function main(cwd: string = process.cwd()): void {
+	const root = resolve(cwd, IMAGES_ROOT);
+	if (!existsSync(root)) {
+		console.log(`[images] no ${IMAGES_ROOT} in ${cwd}; nothing to check`);
+		return;
+	}
+	const report = auditImages(imageFiles(root, root));
+	if (report.problems.length > 0) {
+		for (const problem of report.problems) console.error(`[images] ${problem}`);
+		const count = report.problems.length;
+		console.error(
+			`[images] ${count} problem${count === 1 ? "" : "s"}; the budget is template-marketing's CLAUDE.md, Image budget`,
+		);
+		process.exit(1);
+	}
+	console.log(`[images] ${report.checked} images checked, all within budget`);
+}

package/src/sections/BlogIndex.tsx

@@ -1,4 +1,3 @@
-import { ArrowUpRight } from "lucide-react";
 import { displayDate } from "../lib/displayDate";
 import { useWithBase } from "../routing/BasePathProvider";
 
@@ -42,10 +41,7 @@ export function BlogIndex({ items, basePath = "/blog", id, className }: BlogInde
 									<time dateTime={item.publishedAt}>{displayDate(item.publishedAt)}</time>
 									{item.readingMinutes ? <span> · {item.readingMinutes} min read</span> : null}
 								</span>
-								<h2 className="bi-title">
-									{item.title}
-									<ArrowUpRight className="bi-arrow" size={20} strokeWidth={2} aria-hidden="true" />
-								</h2>
+								<h2 className="bi-title">{item.title}</h2>
 								{item.description && <p className="bi-excerpt">{item.description}</p>}
 							</a>
 						</li>

package/src/styles/primitives.css

@@ -204,13 +204,10 @@
 	}
 
 	/* ---- ProseBlocks (prose-blocks.css) ---- */
-	/* Body prose for ported documents: legal pages and blog posts. Measure is
-	   capped tighter than the marketing sections and the type steps down, because
-	   this is read continuously rather than scanned. Tokens only. */
-
-	.atelic-ui .prose-blocks {
-		max-width: 70ch;
-	}
+	/* Body prose for documents carried as data: legal pages and blog posts. It
+	   takes the width of the page it sits in, the site's own, rather than a
+	   measure of its own, so no page or site wears a column of its own size
+	   (2026-10-26). Tokens only. */
 
 	.atelic-ui .pb-heading {
 		margin: 40px 0 14px;
@@ -223,6 +220,145 @@
 		margin-top: 0;
 	}
 
+	/* A sub section heading sits closer to its section and steps down a size. */
+	.atelic-ui .pb-heading.pb-h3 {
+		margin: 28px 0 10px;
+		font-size: 1.02rem;
+	}
+
+	/* Figures in running prose sit as small tiles in a row, each at the row's
+	   height and its own shape, with the caption laid over its foot. A tile
+	   opens its file large in a dialog. A run of figures in the data is one
+	   row; the row wraps on a narrow screen. */
+	.atelic-ui .pb-figures {
+		--pb-tile-height: 240px;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+		margin: 20px 0 28px;
+	}
+
+	@media (max-width: 600px) {
+		.atelic-ui .pb-figures {
+			--pb-tile-height: 190px;
+			gap: 8px;
+		}
+	}
+
+	.atelic-ui .pb-figure {
+		position: relative;
+		margin: 0;
+		height: var(--pb-tile-height);
+		min-width: 0;
+		max-width: 100%;
+	}
+
+	/* A placeholder keeps its own look and takes only the tile's shape. */
+	.atelic-ui .pb-figure .ph {
+		height: 100%;
+		max-width: 100%;
+	}
+
+	.atelic-ui .pb-tile {
+		display: block;
+		height: 100%;
+		max-width: 100%;
+		padding: 0;
+		border: 0;
+		border-radius: 12px;
+		overflow: hidden;
+		background: var(--surface-alt, var(--surface));
+		cursor: zoom-in;
+	}
+
+	.atelic-ui .pb-tile:focus-visible {
+		outline: 2px solid var(--primary);
+		outline-offset: 3px;
+	}
+
+	.atelic-ui .pb-tile img,
+	.atelic-ui .pb-tile video {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	/* The caption sits over the tile's foot on a shade, and lets a tap through. */
+	.atelic-ui .pb-figure .pb-caption {
+		position: absolute;
+		inset: auto 0 0;
+		margin: 0;
+		padding: 22px 10px 0;
+		border-bottom: 8px solid transparent;
+		border-radius: 0 0 12px 12px;
+		background: linear-gradient(to top, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0));
+		color: #fff;
+		font-size: 0.78rem;
+		font-weight: 600;
+		line-height: 1.3;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 3;
+		overflow: hidden;
+		pointer-events: none;
+	}
+
+	/* The panel fits what it shows, so a portrait clip is not adrift in a wide frame. */
+	.atelic-ui .pb-lightbox {
+		width: fit-content;
+		max-width: min(92vw, 1100px);
+		max-height: 92vh;
+		padding: 16px;
+		border: 0;
+		border-radius: 16px;
+		background: var(--surface);
+		color: var(--ink);
+	}
+
+	/* Page scroll holds still while the lightbox is open. */
+	html:has(dialog.pb-lightbox[open]) {
+		overflow: hidden;
+	}
+
+	.atelic-ui .pb-lightbox::backdrop {
+		background: rgb(0 0 0 / 0.72);
+	}
+
+	.atelic-ui .pb-lightbox img,
+	.atelic-ui .pb-lightbox video {
+		display: block;
+		max-width: 100%;
+		max-height: calc(92vh - 120px);
+		width: auto;
+		height: auto;
+		margin-inline: auto;
+		border-radius: 10px;
+	}
+
+	.atelic-ui .pb-lightbox-close {
+		display: flex;
+		margin: 0 0 10px auto;
+		padding: 6px;
+		border: 0;
+		border-radius: 999px;
+		background: transparent;
+		color: var(--ink);
+		cursor: pointer;
+	}
+
+	.atelic-ui .pb-lightbox-close:focus-visible {
+		outline: 2px solid var(--primary);
+		outline-offset: 2px;
+	}
+
+	.atelic-ui .pb-lightbox-caption {
+		margin: 10px 0 0;
+		text-align: center;
+		font-size: 0.9rem;
+		color: var(--neutral-700);
+	}
+
 	.atelic-ui .pb-body {
 		margin: 0 0 16px;
 		font-size: 1rem;

package/src/styles/sections.css

@@ -13,7 +13,6 @@
 		margin: 0;
 		padding: 0;
 		list-style: none;
-		max-width: 760px;
 	}
 
 	.atelic-ui .bi-item {
@@ -42,42 +41,22 @@
 		color: var(--neutral-500);
 	}
 
+	/* A title fills the line before it wraps, where the base headings balance
+	   their lines; pretty still keeps a last word from standing alone. */
 	.atelic-ui .bi-title {
 		margin: 0 0 10px;
 		font-size: 1.4rem;
 		line-height: 1.25;
-	}
-
-	.atelic-ui .bi-arrow {
-		margin-left: 8px;
-		vertical-align: baseline;
-		opacity: 0;
-		transform: translate(-4px, 2px);
-		transition:
-			opacity 0.18s ease,
-			transform 0.18s ease;
-	}
-
-	.atelic-ui .bi-link:hover .bi-arrow,
-	.atelic-ui .bi-link:focus-visible .bi-arrow {
-		opacity: 1;
-		transform: translate(0, 2px);
+		text-wrap: pretty;
 	}
 
 	.atelic-ui .bi-excerpt {
 		margin: 0;
-		max-width: 62ch;
 		font-size: 0.98rem;
 		line-height: 1.65;
 		color: var(--neutral-700);
 	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.atelic-ui .bi-arrow {
-			transition: none;
-		}
-	}
-
 	@media (max-width: 600px) {
 		.atelic-ui .bi-title {
 			font-size: 1.2rem;
@@ -88,8 +67,12 @@
 	/* A single article. The title is the content, so it sits in the flow rather
 	   than inside a hero band that would push the writing below the fold. */
 
-	.atelic-ui .bp-wrap {
-		max-width: 760px;
+	/* The article takes the site's own width, like every other page, so no
+	   page or site wears a column of its own size (Forni, 2026-10-26). The
+	   body steps up a size on a wide screen to suit the longer line. */
+	.atelic-ui .bp-body .pb-body,
+	.atelic-ui .bp-body .pb-list li {
+		font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
 	}
 
 	.atelic-ui .bp-back {
@@ -112,6 +95,7 @@
 		margin: 0 0 14px;
 		font-size: clamp(1.9rem, 4vw, 2.6rem);
 		line-height: 1.15;
+		text-wrap: pretty;
 	}
 
 	.atelic-ui .bp-meta {