TITLE: Coarse Press — an identity that ships misregistered

PROMPT: Build a single self-contained HTML editorial brand-identity page for a fictional risograph studio called Coarse Press, styled like a printed specimen sheet. Palette: paper #e8e4da, ink #1c1c1c, riso orange #ff4d2e, riso blue #2d5bff, grey #8f8a7e, card #f2eee4. Structure: a sticky top nav (monospace 0.26em tracked, 1.5px ink bottom rule, links with an orange underline that scales in on hover), a two-column hero grid (minmax(0,1.12fr) / minmax(0,.88fr), 92dvh min height), a full-bleed ink specimen strip, a two-column long manifesto with a sticky monospace kicker, and a footer with a giant outlined wordmark over four monospace contact columns. Hero left: an eyebrow rule in orange, a display headline WE / PRINT / LOUD. at system-ui 900 uppercase, clamp(46px,12.6vw,178px), letter-spacing -0.035em, line-height 0.82, with the last word carrying a 4px orange / -4px blue text-shadow for instant risograph misregistration; a Georgia lede at 1.62 line-height; a 1.5px rule; and a four-item stat row in monospace with 900-weight numerals. Hero right: a paper card with a 1.5px ink border and a hard 10px ink offset shadow containing the logo lockup — a bold C mark built as a single arc path in a symbol, stacked three times as absolutely-positioned SVGs with mix-blend-mode:multiply, orange offset (-7px,5px) and blue offset (8px,-4px) under an ink copy — plus the COARSE wordmark and a caption. Below it a control bar: a custom-styled range input for grain, a live numeric readout, and a Print mode toggle button. Specimen strip on ink: three type specimens (Aa in system-ui 900, Georgia italic, ui-monospace) each under a hairline rule with a monospace label, plus a five-swatch ink library with hex names and an animated texture swatch. Footer: a giant COARSE wordmark at clamp(56px,17.5vw,268px) with -webkit-text-stroke 1.5px ink and transparent fill that fills solid on hover, above Studio / Enquiries / Services / Colophon columns. Motion and texture: a full-viewport fixed canvas of procedurally generated 128x128 noise drawn as a repeating pattern, re-offset to a random position every 110ms (70ms in print mode) so the grain visibly shifts in steps, blended with mix-blend-mode:multiply at opacity driven by a CSS custom property; a second fixed overlay of repeating linear gradients animated with steps(3,end) for print texture; a 4px orange scroll-progress bar scaled with transform; hero headline lines and manifesto articles that reveal by sliding up from translate3d(0,.42em,0) rotate(-.4deg) — position only, never opacity — triggered by IntersectionObserver; logo layers that jitter on a steps() keyframe when the stack is hovered. Interaction: the grain slider rebuilds the noise tile density and alpha live; Print mode doubles the grain, speeds the shift interval and restyles the button; hovering the logo stack misregisters the orange and blue layers; scrolling reveals the manifesto and advances the progress bar. All CSS in one inline <style>, all JS in one IIFE in one inline <script> at the end of body, system fonts only, zero external references, no data URIs, no createElementNS, prefers-reduced-motion honoured by stopping the texture animations and the grain interval while leaving a complete static render.

DESCRIPTION: A print-shop identity sheet that behaves like paper. Grain sits over everything and twitches in discrete steps, the display headline carries a permanent two-ink misregistration, and the logo — a single bold C — is stacked in orange, blue and black with multiply blending so it reads like a three-pass riso print that slipped a millimetre. The editorial grid is confident and asymmetric: a loud manifesto on the left, the lockup and its controls on the right, then a black specimen strip of type, ink and texture, then three numbered manifesto lines, then a giant outlined wordmark sitting on the contact details. Raw, warm and deliberately imperfect.

TECHNIQUES: Procedural 128x128 noise tile via ImageData, used as a CanvasPattern over a full-viewport fixed canvas, re-offset on a timer for stepped grain drift; mix-blend-mode:multiply grain layer with opacity from a CSS custom property; layered gradient texture overlay animated with steps(3,end); offset colour layers with multiply blending for risograph misregistration; a single arc path glyph in an SVG symbol referenced three times by use; hard offset box-shadow as a printed drop shadow; display type with -webkit-text-stroke and transparent fill for an outlined wordmark; custom-styled range input; IntersectionObserver reveal driven purely by transform; transform-based scroll progress bar; sticky monospace kicker.

INTERACTION: Drag the Grain slider to change both the noise density and the grain opacity in real time — the readout updates as you drag. Click Print mode to roughly double the grain, speed up the grain shift and invert the button to orange; click again to return to paper mode. Hover the logo lockup and the orange and blue plates jitter further out of register on a steps() keyframe. Scroll the page: the manifesto lines slide into place from a slightly rotated offset and the thin orange progress bar at the top fills. Hover the nav links for a wiping underline, the footer wordmark to fill it solid, and the contact links to invert them orange. With reduced motion the grain stops shifting and all reveal transitions resolve instantly to their final position.