Kiln.

# Build a website in the "Kiln" 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, Marquee, The drop, Made to be repaired, Journal, Newsletter, Footer) and rename each section for this business

## Design: Kiln (fashion)
A raw, editorial outerwear brand page built around one storm photograph and a giant condensed wordmark.

A full-bleed stormy-coast hero carries an enormous Anton wordmark bottom-left, an italic serif line and a rust button on the right, and a mono top bar with coordinates and a live local clock. Product cards show a numbered-run counter with a progress bar, so scarcity is the design.

Theme: dark. Palette: background #121212, text #efebe4, secondary text #a7a29a, accent #c4532d. Typefaces: Anton + Instrument Serif + IBM Plex Mono.

Dark, raw, editorial. One photograph does the work; type is huge and blunt.

Palette
- Page #121212, panel #1a1917, text #efebe4, muted #a7a29a, hairlines rgba(239,235,228,.18).
- Rust #c4532d is a fill only (buttons, newsletter submit) with white bold mono text (4.5:1). Where rust must be text (run numbers, marquee slashes) use a lifted #e0704a.

Type
- Anton, uppercase, for the wordmark and section headings: wordmark clamp(150px, 29vw, 470px) at line-height .8; h2 clamp(56px, 9vw, 140px) at .88.
- Instrument Serif for reading copy at 20px and italic display lines at 30 to 46px (hero line, journal titles). Each h2 has a lowercase italic serif tail ("autumn, three pieces") at .62em.
- IBM Plex Mono 13 to 16px, uppercase, tracked .08 to .1em, for meta, buttons, prices and readouts.

Hero (100svh)
- Full-bleed photo, object-position 100% 50% so the figure sits at about 62% of the width. Three gradients: dark bottom, dark top for the bar, dark right so the copy column passes contrast.
- Top bar in a 3-column grid: KILN logo left, centre readout (coordinates 57.1497 N, 7.3614 W and a ticking local time via Intl.DateTimeFormat), nav right with a Bag (n) counter.
- Bottom grid: 1fr wordmark bottom-left, 340px copy column right (italic line, 20px paragraph, rust "Shop the drop" button). A thin footer strip with two mono facts.
- Entrance: bar, wordmark (rises 60px, 1.2s), line, paragraph, button, footer strip staggered 150ms apart, 1s, cubic-bezier(.22,1,.36,1). The photo settles from scale 1.06 to 1 over 1.6s.

Sections
- Marquee: a slow 40s linear loop of Anton phrases separated by rust slashes.
- The drop: three equal columns, 4:5 photos with a "Sold n" tag, Anton product name with a mono price, one-line description, a mono "No. 231 of 300" row over a 3px progress track that fills when scrolled into view, and an outlined Add to bag button that bumps the nav counter.
- Made to be repaired: panel background, split 5fr / 6fr, 4:5 photo left, heading and a three-row numbered promise list right.
- Journal: ruled list, mono date, large italic title, arrow; the row slides 18px and tints on hover.
- Newsletter: centred, one outlined field joined to a rust submit; inline confirmation, no network.
- Footer: four columns then a full-width KILN at clamp(120px, 33vw, 520px), clipped by overflow.

Responsive
- Under 900px the readout and nav collapse to a Menu button opening a full-screen list in 52px Anton; the hero image crops to 72% and the wordmark grows to 41vw above the copy; grids go to one column.
- prefers-reduced-motion removes all animation and transitions.

## 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.