Notes in the
margin.

The concept

The Setter’s Desk treats a cryptic crossword as both literature and mechanism. Its visual premise is a Friday broadsheet accidentally spread across a working desk: strict editorial rules are interrupted by proof marks, graphite, a coffee ring, slips of paper, and the one decisive color of a solver’s blue pen. The page is not nostalgic decoration. Its hierarchy behaves like print, while its actions behave like a small, precise instrument.

The narrative moves from invitation, to solving, to revelation, then backward into craft. The dark “penny drops” chapter isolates the emotional reward before the masterclass exposes how that reward was engineered. Pseudonyms and symmetry widen the story from one puzzle to the traditions surrounding it.

Techniques & machinery

The solvable miniature

In main.js, the layout array maps a 7×7 rotationally symmetric pattern. Six clue objects hold answers, coordinates, clue text, and hand-marked wordplay anatomy. activateClue() synchronizes squares with the clue sheet; handleKeydown() manages direction changes and keyboard travel; checkCompletion() validates every crossing. Because entries share the same input nodes, an across letter is immediately a down letter too.

Check and reveal operate only on the active light. updateProgress() counts the 27 unique open squares and advances a blue ink rule after every keystroke. A wrong letter receives a red-pencil slash; a revealed letter turns solver’s blue. When every light matches, checkCompletion() triggers coin-drop, stamp-in, and a radial drop-flash burst around the grid.

The penny-drop apparatus

The dark interlude makes insight playable. playPennyDrop() restarts a short proof sequence when its coin button is clicked or keyboard-activated: two plausible readings are struck out, the dashed inference route draws itself, and PEN + NY resolves into PENNY. The live region speaks the full parse without exposing decorative motion. Reduced-motion preferences skip directly to the final proof.

Visible wordplay

Each “How it works” hatch is a true disclosure: aria-expanded, aria-controls, and the panel’s hidden state move together. Semantic spans use .definition, .fodder, and .container to underline definitions, yellow-mark anagram material, and draw literal container brackets. The live masterclass is a four-state model rendered by setStage(); its tabs support Arrow, Home, and End keys as well as touch.

Print atmosphere

styles.css builds every visual without image files. An inline SVG turbulence texture supplies paper grain; rules, double borders, off-register shadows, rotated proof slips, and a CSS pencil create desk depth. The opening uses a precise stagger through .reveal, while observeSections() brings later editorial plates into view once. Reduced-motion preferences collapse those entrances to their final state.

Palette & type

Newsprint dominates, with ink carrying the main structure, graphite handling secondary copy, and blue reserved for interaction, annotation, and revelation. Gloock gives the masthead its high-contrast authority; Spectral keeps long clues literary and readable; Space Mono makes numbers, labels, and enumerations feel mechanically exact.

Reproduce this

Ask an AI agent for a complete editorial experience, not a themed landing page. Specify one real interaction whose content and mechanics reinforce each other, a narrow historical palette, locally hosted characterful fonts, and code-made atmosphere. Require the agent to solve its own puzzle data before styling, support keyboard and touch equally, honor reduced motion, and inspect screenshots at phone, tablet, and desktop widths.