You are designing a landing page for a fictional small-batch ceramics studio called "Terra & Kiln." Brand facts (fixed — use exactly as given): - Name: Terra & Kiln - One-line description: Handmade stoneware and porcelain pieces, thrown and fired in small batches by a single studio. - Values to convey somewhere in the copy: slowness, imperfection as beauty (wabi-sabi adjacent), durability, everyday use over display-only objects. Three product photos are provided and MUST be used exactly as given, at these fixed URLs: - Mug photo: https://qoyuqtiafuqqyarrnsxr.supabase.co/storage/v1/object/public/Assets/Mug.jpg - Bowl photo: https://qoyuqtiafuqqyarrnsxr.supabase.co/storage/v1/object/public/Assets/Bowl.jpg - Vase photo: https://qoyuqtiafuqqyarrnsxr.supabase.co/storage/v1/object/public/Assets/Vase.jpg Do not reference any other image URL, any other CDN, or generate/invent any additional image source. These three URLs are the only images available, and each must be used exactly once. Build a single, fully self-contained HTML file (inline CSS, inline/vanilla JS only — no external requests of any kind except the three image URLs above) containing a complete landing page with the following sections, in this exact order: 1. Hero — brand name, a short tagline, one clear call-to-action button 2. Studio story — a short "about" section conveying the brand values above 3. Product showcase — exactly 3 product cards, one for the mug photo, one for the bowl photo, one for the vase photo, each with a product name and short description. Apply a consistent visual treatment to all three images (e.g. consistent aspect ratio/crop, consistent CSS filter or color-grading, consistent border/frame treatment) so they read as part of the same designed system — do not just drop the raw images in with no treatment. 4. Newsletter / contact signup — an email input and submit button (non-functional is fine, but must be visually complete) 5. A collapsed, native HTML `<details>` element (with a `<summary>` labeled something like "View Design System") placed just before the footer, closed by default, containing your invented design system documentation: - Color palette: each color shown as a swatch with its name/role (e.g. "Primary", "Accent", "Background") and its exact hex or rgb value printed as visible text next to the swatch - Typographic scale: a sample line for each type size you use (e.g. H1, H2, H3, Body, Caption), each labeled with its font size and weight as visible text - Spacing scale: a visual representation of your spacing units (e.g. small boxes or bars at each spacing step) labeled with their pixel/rem values - Button/component states: your primary and secondary button styles shown side by side, labeled 6. Footer — basic links and copyright line Design requirements: - Invent your own complete design system: a color palette, a typographic scale, and a spacing scale. Declare these as CSS custom properties and apply them consistently across the ENTIRE page (hero, story, products, newsletter, and the design system documentation itself) — do not hardcode one-off colors, font sizes, or spacing values anywhere, including in hover/focus states. - The `<details>` element must use only native browser behavior (no JavaScript required for it to open/close). - The page must be fully responsive and look intentional at mobile (~375px), tablet (~768px), and desktop (~1440px) widths. - Do not use any external fonts, icon libraries, or CDNs. The only external requests allowed are the three image URLs given above. Beyond the structural and technical requirements above, aim for something visually memorable — the kind of page a design-conscious visitor would want to screenshot and share, not a generic, safe template. Concretely: - Include at least one distinctive, deliberate visual or interaction moment that goes beyond the baseline requirements — e.g. an unexpected hero composition, an asymmetrical or editorial layout choice, a subtle scroll-triggered reveal, or a thoughtful micro-interaction on hover/focus. Pick whatever fits your design system, not a specific technique we're prescribing. - Avoid the most generic, overused patterns (perfectly centered hero text over a flat color, three identical icon-title-text columns, a plain stacked list of cards with no visual rhythm) unless you deliberately execute them with unusual craft. - Subtle CSS transitions/animations and small amounts of vanilla JS (e.g. for scroll-triggered reveals via IntersectionObserver) are allowed, as long as there are still zero external network requests and no console errors — do not import any animation library, icon library, or script from a CDN to achieve this. Output only the complete HTML file, nothing else.