KILN. Built from one prompt.

Build a single-page storefront splash for a ceramics brand "KILN" using React, TypeScript, Vite, Tailwind CSS. All product visuals are CSS: each vessel is drawn with stacked border-radius shapes — no images anywhere.

FONTS: "DM Serif Display" and "DM Sans" (400, 500) from Google Fonts; utilities `.font-serif-d` and `.font-dm`. Page `bg-[#f3ece2]`, ink `#2b211a`.

HEADER (sticky top-0 z-30, `bg-[#f3ece2]/90 backdrop-blur-sm border-b border-[#2b211a]/10`, px-6 sm:px-10 py-4, flex justify-between items-center):
- "KILN" in `font-serif-d text-2xl tracking-tight`
- Center nav (hidden md:flex, gap-8): "Vessels", "Process", "Stockists" in `font-dm text-[13px] tracking-[0.2em] uppercase opacity-70 hover:opacity-100 transition-opacity`
- Right: a cart button "CART (0)" in `font-dm text-[12px] tracking-[0.25em] border border-[#2b211a]/30 rounded-full px-4 py-2 hover:bg-[#2b211a] hover:text-[#f3ece2] transition-colors` — clicking any ADD button increments the count via useState.

HERO (pt-24 pb-16, text-center, px-6): "Fired slowly." / "Held daily." on two lines in `font-serif-d text-[clamp(3rem,9vw,7rem)] leading-[0.95] tracking-[-2px]`, then "Stoneware thrown in a wood kiln on the Jutland coast. Twelve pieces per firing, four firings per year." in `font-dm text-sm sm:text-base opacity-70 max-w-md mx-auto mt-6 leading-relaxed`.

PRODUCT GRID (px-6 sm:px-10 pb-24, grid grid-cols-2 md:grid-cols-4 gap-4): four tiles, each `rounded-[1.25rem] p-6 flex flex-col items-center gap-5` with tile backgrounds "#e7dbc9", "#ddc9b4", "#cfb49b", "#b89a83". Each tile contains a CSS vessel: a div silhouette built from a body (`w-20 h-24 rounded-[45%_45%_38%_38%/60%_60%_35%_35%]`) and a neck (`w-9 h-6 rounded-t-full mx-auto -mb-1`), both `bg-[#2b211a]`, opacity 0.85. Products (name / price / button):
- "Morning Beaker" / "€38" ; "Ash Bowl" / "€52" ; "Ember Jug" / "€74" ; "Night Urn" / "€120"
Names in `font-serif-d text-lg`, prices in `font-dm text-[13px] opacity-60`, and an "ADD" button `font-dm text-[11px] tracking-[0.3em] border border-[#2b211a]/40 rounded-full px-5 py-2 hover:bg-[#2b211a] hover:text-[#f3ece2] transition-colors duration-200`.

Each tile lifts on hover: `transition-transform duration-300 hover:-translate-y-2`. Tiles enter staggered on load with `@keyframes clay-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }` 0.7s ease-out, delays 0.05s/0.15s/0.25s/0.35s. FOOTER STRIP: full-width band `bg-[#2b211a] text-[#f3ece2] text-center py-5 font-dm text-[11px] tracking-[0.35em] uppercase`: "NEXT FIRING OPENS MARCH — JOIN THE LIST AT HELLO@KILN.DK". Single App.tsx + src/styles.css.

storefrontwarmeditorial