TITLE
BÉTON BRUT — Six Buildings Nobody Asked For

PROMPT
An architecture zine about brutalism: six invented concrete buildings in an invented post-war new town, "Northmere", each presented as an isometric model built from CSS 3D transforms (stacked boxes, cantilevers, ramps, service towers, repeating window modules), set against enormous, heavy grotesque type. Concept: typography with the mass of concrete; pages that feel poured rather than laid out.

Mood: monumental, argumentative, affectionate, a bit funny. Palette: raw concrete grey #BDB9B1 as the page ground, shuttering-shadow charcoal black #1A1A1A, safety orange #FF5A00 as the single violent accent, and pale cement #E9E6DF for light faces. Grey colour-field page. Texture: board-marked concrete (fine horizontal plank lines with knots via repeating gradients and SVG noise), tie-holes as small dots in a grid, water stains running down from parapets, a little moss; photocopier grit over the type.

Typography: the main voice. Colossal condensed grotesque capitals (Impact/"Haettenschweiler"/"Arial Narrow"/"Helvetica Neue Condensed Black" stack), set so large they crop at the viewport edges, stacked with almost no leading, sometimes rotated 90°, sometimes running behind the buildings so the isometric masses collide with and overlap the letters; body text in small, tight monospace or typewriter (Courier) in narrow columns, with orange marginal numbering; captions in tiny caps with arrows. Overprint effects: orange words multiplied over black. Issue line: "BÉTON BRUT · No. 6 · THE NORTHMERE ISSUE · 50p".

Structure: a vertical scroll of "spreads", each a full viewport: Cover (the title three lines tall: BÉTON / BRUT / No.6, the last line in overprinted orange; an orange circle "sun" behind a tower model, a 50p price roundel, the line "Six buildings nobody asked for and everyone now defends"); then one spread per building; then a manifesto spread and a back cover with a fold-out style site plan (an isometric town plan with the six buildings marked) and subscription coupon with dotted cut line (a button snips it loose). The plan's numbered markers and legend jump to the buildings. Buildings (each with name, date, architect of an invented municipal office, a 90–130 word essay with opinion and detail, and three "facts" such as tonnes of concrete and number of steps): 1) Northmere Civic Centre (1967): an inverted ziggurat on pilotis; 2) The Trinity Road car park: a helical ramp tower, "the best room in town has no walls"; 3) Hallam Point: a 22-storey slab with a separate lift tower joined by bridges every third floor; 4) St Jude's Church: a folded concrete tent with a slot of coloured light; 5) The Water Board pumping station: windowless drum and fins; 6) Queensway bus station: a long canopy on mushroom columns, scheduled for demolition, "write to the council".

Isometric models (CSS 3D, transform-style: preserve-3d, built from divs as extruded boxes with three visible faces shaded light/mid/dark concrete with the board-mark texture, plus orange-highlighted details): each model sits on a base plate with a dashed north arrow and a scale figure (a tiny person). Signature moment: as each spread scrolls into view the building is "poured": its volumes rise storey by storey from the base plate with a heavy, slightly delayed ease (cubic-bezier(.7,0,.2,1), each lift 250–400ms, staggered), formwork lines flashing orange for an instant as each level sets, and the giant building name slams in behind it with a slight page shake. Hover/drag on a model rotates it around its vertical axis (pointer x mapped to rotateY within the isometric rig, with inertia; touch drag supported), and holding on it "explodes" the floors apart vertically to show the section, with floor labels in orange. A vertical sun slider (06h to 18h) at the outer edge of each model stage changes the light direction (face shades swap smoothly) and casts a long skewed shadow across the base plate and the page. Under each model sit two small buttons, "Cut section" (a keyboard-friendly toggle for the explode) and "Pour again", plus a tiny-caps hint; arrow keys turn a focused model and Space lifts its floors.

Details: orange "LISTED" / "AT RISK" / "DEMOLISHED 1998" rubber stamps slapped at angles (and "NOT NEUTRAL" on the manifesto, which is set on a charcoal field); the demolished pumping station has its giant name half in outline; a running footer with page numbers in huge numerals; crop marks at corners; an editor's note in the voice of the invented zine-maker Dot Ferreira; the manifesto set as numbered slogans that are specific, not generic ("4. A ramp is a staircase with manners."). Navigation: a fixed orange index of six numbered squares on the right edge, jumps smooth-scrolled. If the condensed display face is missing, the fallback grotesque is measured and squeezed to the same width so the type keeps its mass. Phone: type still huge (clamp with vw), models scale to width, columns collapse to one. Reduced motion: buildings appear built; no shake; rotation only on drag.

DESCRIPTION
A photocopied architecture zine, issue six of BÉTON BRUT, laid out as nine full-viewport spreads on a board-marked concrete-grey ground. Colossal condensed capitals crop at the page edges and run behind six isometric concrete models of an invented new town, Northmere; typewritten essays by the zine-maker Dot Ferreira sit on taped-down pale slips with orange marginal numbering. As each spread arrives its building is poured storey by storey out of the base plate, flashing orange formwork as each lift sets, then the giant name slams in behind it, the page shakes and a rubber stamp lands. Every model can be turned, pulled apart into a labelled section and re-lit with a sun slider that throws a long shadow across the page. A charcoal manifesto spread and a back cover with a creased fold-out site plan and a cut-out subscription coupon close the issue. The tone is monumental, argumentative, affectionate and a bit funny.

VISUAL TECHNIQUES
- Isometric models built from divs with CSS 3D transforms (preserve-3d, orthographic rotateX/rotateY rig): extruded boxes, many-sided drums, tilted folded plates with clipped gables, a 50-segment helical ramp
- Per-face lighting computed from a sun vector: each face normal is dotted with the light direction and mapped onto a pale-cement to charcoal concrete ramp, with orange details shaded on their own ramp
- Projected ground shadows: every volume's corners are projected along the sun vector onto the base plate, convex-hulled and drawn as one SVG path lying in the ground plane
- Pour choreography with individual scale/translate properties, cubic-bezier(.7,0,.2,1), 250–400 ms lifts staggered by level, and a keyframed orange formwork outline that sets to concrete
- Board-marked concrete from layered repeating gradients (plank lines, knots, tie-hole grids), water stains and moss as blurred gradient streaks, SVG turbulence grain
- Photocopier grit: an SVG turbulence alpha mask punching toner dropouts into the giant type, page numerals and rubber stamps
- Window modules drawn with tiled conic gradients so one face carries a whole grid of openings
- Overprint: orange type and the cover sun set to multiply over charcoal letters
- Billboarded scale figures, section labels and plan markers that counter-rotate to face the viewer inside the 3D rig
- Fallback-font fitting: canvas text measurement drives a horizontal squeeze so any heavy grotesque matches the condensed display width
- Crop marks, taped paper slips with hard offset shadows, fold creases on the site plan, dashed coupon border with SVG scissors, hand-drawn SVG signature that writes itself

INTERACTION MODEL
Scrolling moves through the spreads; each building pours itself when its model is in view, followed by the name slam, a short page shake and the stamp. Moving the mouse across a model swings it gently; dragging (mouse or touch, horizontal) spins it around its vertical axis with inertia, while vertical touch still scrolls the page. Pressing and holding on a model lifts its floors apart into an exploded section with orange floor labels, and releasing drops them back; the "Cut section" button toggles the same state and "Pour again" replays the pour. The orange sun on the dashed vertical track can be dragged (or moved with arrow keys) from 06h to 18h: face shades cross-fade and the shadow sweeps and lengthens across the plate and page. With a model focused, left and right arrows turn it and Space or Enter cuts the section. The fixed orange index of six numbered squares on the right edge smooth-scrolls to each building and marks the current one; the site plan's markers and legend do the same, and the plan itself can be turned. On the back cover the coupon fields can be filled in and a button cuts the coupon loose along its dotted line. With reduced motion the buildings are already built, nothing slams or shakes, and models turn only when dragged or keyed.