Driftwall.

# Build a website in the "Driftwall" design

You are a senior web designer and front-end engineer. Build one responsive, accessible landing page as a single self-contained HTML file (inline CSS and JavaScript, no frameworks, no build step; Google Fonts is the only allowed external request). Follow the design specification below closely: layout, type, palette, section structure and motion. Replace the demo brand with the business described here.

## The business
- Name: not given; invent a short, credible name and say so at the top of your reply
- What it offers: not given; ask one short question, or infer from the name
- Audience: not given; write for a smart, busy visitor
- Tone of voice: Confident and plain-spoken
- Sections: keep the design's own sequence (Hero wall, Series, About, Prints, Contact, Footer, Lightbox) and rename each section for this business

## Design: Driftwall (photography)
A dark photography portfolio whose first screen is a dense wall of prints that pans with the cursor.

The hero is a wall of photographs hung edge to edge in a 12 by 8 grid with one large feature print in the centre, a big italic serif title at the bottom-left, and a wall that drifts with the pointer. Every print opens in an accessible lightbox, and the sections below stay quiet, typographic and dark.

Theme: dark. Palette: background #0b0b0a, text #f1eee8, secondary text #a8a39a, accent #f1eee8. Typefaces: Newsreader + Inter.

Overall: near-black page #0b0b0a, text #f1eee8, muted #a8a39a, panel #141412, hairlines rgba(241,238,232,.16). No colour accent: the photographs supply all colour. Newsreader (light italic) for display, Inter 400 to 600 for UI and body at 17px. Display sizes are clamp(44px, 6vw, 92px) with -0.03em tracking; small labels are 14px uppercase with .14em tracking.

Hero wall (100svh, overflow hidden): an absolutely positioned wall 138vw by 138vh, offset -19vw / -19vh so it bleeds past the viewport. Inside, a CSS grid of 12 columns by 8 rows with 6px gaps and hard square corners holds 17 photo buttons placed with explicit grid-area so they tile with no gaps: a 4x5 feature print in the centre, mixed 2x2, 2x3, 3x3, 2x1 and 1x3 prints around it, with the eight photographs repeated. Landscape images fill wide cells, portrait images fill tall cells, all object-fit cover. Only the first instance of each photo is focusable; repeats are aria-hidden with tabindex -1. A gradient scrim (near-black at bottom-left fading to clear by about 62% across, plus a top fade) sits above the wall so text passes contrast.

Title block bottom-left: small uppercase kicker, the 168px max Newsreader italic 300 word "Driftwall", and one 19px line ("The wall moves wherever your cursor goes."). Bottom-right cue in a translucent dark chip. Top bar: italic wordmark in a blurred dark pill at left and a pill nav (Series, About, Prints, Contact) at right; on narrow screens the nav becomes a round menu button opening a dropdown.

Pointer parallax: on fine pointers only, the wall translates opposite the cursor by up to 7% of the hero size, eased with a 0.06 lerp per animation frame. Disabled for touch and prefers-reduced-motion. Hovering a print zooms it 6% over 1.2s and dims the others to 72% opacity.

Lightbox: a native dialog opened with showModal on click. Full-screen near-black, image contained, italic title, place and series line, counter, Close and previous/next buttons. Esc closes, ArrowLeft and ArrowRight move, backdrop click closes, focus returns to the print that opened it.

Series: hairline-ruled list; each row has a number, an italic serif title at up to 64px, locations, and a photograph count; hover nudges the row right on a panel background and reveals two small thumbnails. About: 58px light serif statement with the second sentence in muted, two short paragraphs, three large numeric facts. Prints: panel-coloured band with two paragraphs and a size list (30x40, 50x70, 70x100, 100x140 cm with edition size and price); rows are toggle buttons and the selected one inverts to light. Contact: underlined inputs, pill submit, inline confirmation, no network call.

Motion: each print pins onto the wall with a staggered scale from 1.14 to 1 and fade (1.1s, 55ms steps, cubic-bezier(.22,1,.36,1)); title lines rise 36px over 1.0 to 1.2s. Nothing else animates on scroll.

Responsive: at 820px the wall becomes 220vw by 112svh so the feature print fills the screen with neighbours peeking at the edges, the cue hides and the scrim becomes vertical. Series rows and print rows reflow to two lines; forms and grids stack below 1000px.

## Images
The design uses full-bleed photography. Use placeholder <img> elements with descriptive alt text and file names under img/ (for example img/hero.jpg), sized with width and height attributes and object-fit: cover, and list every image you need at the end of the file in an HTML comment: file name, aspect ratio, and a one-line photo brief in the style of the design, so they can be shot or generated later.

## Requirements
- Copy: real, specific sentences for this business. No lorem ipsum. Short headlines, concrete claims, one clear call to action repeated at the end.
- Accessibility: WCAG AA contrast measured against the actual background (add a scrim under text on photos), body text at least 16px, visible keyboard focus, semantic landmarks, one h1, alt text, labelled form fields.
- Responsive: designed at 1440, 1024 and 390 pixels wide with no horizontal scrolling; the navigation collapses to a working menu button on small screens.
- Motion: one orchestrated hero entrance plus motion that answers the visitor; respect prefers-reduced-motion.
- Forms do not submit anywhere: prevent the default and show an inline confirmation.

## Before you answer
- Check the first screen at 1440x900 and 390x844 reads as a finished, premium page.
- Check every text colour against its background.
- Return the complete HTML file in one code block, then the image list, and nothing else.